/* ENDGAME Control — design tokens + shell layout.
   Ported from the frozen UI prototype (ENDGAME-Control-14-Guests-Real-Data.html).
   Do not redesign without an explicit product request — see docs/CLAUDE_HANDOFF. */

:root { color-scheme: light dark; }

body {
    margin: 0;
    background: light-dark(#f4f1eb, #10100f);
    font: 14px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#eg-control {
    --bg: light-dark(#f4f1eb, #10100f);
    --panel: light-dark(#fffefa, #191816);
    --text: light-dark(#252018, #f1e8d6);
    --muted: light-dark(#736959, #b6ac9a);
    --line: light-dark(#e2dbcd, #38332a);
    --accent: light-dark(#8b642c, #c4a16a);
    --soft: light-dark(#eee5d6, #2e271d);
    --green: light-dark(#206445, #86c8a3);
    --greenbg: light-dark(#e3f1e8, #1a3025);
    --orange: light-dark(#8a4c13, #efbd7d);
    --orangebg: light-dark(#fff0d8, #392b19);
    --blue: light-dark(#3b59a0, #94adff);
    --bluebg: light-dark(#e8edfa, #20283d);
    --teal: light-dark(#246967, #8fc9c1);
    --tealbg: light-dark(#e0f0ec, #1d3430);
    --purple: light-dark(#76549a, #c5a5e4);
    --purplebg: light-dark(#f0e8f6, #35283f);

    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100vh;
    color: var(--text);
    background: var(--bg);
}
#eg-control * { box-sizing: border-box; }
#eg-control [hidden] { display: none !important; }
#eg-control button, #eg-control input, #eg-control select, #eg-control textarea { font: inherit; color: var(--text); }
#eg-control button {
    background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
    padding: 7px 11px; min-height: 36px; cursor: pointer;
    transition: border-color .14s, background .14s, transform .08s;
}
#eg-control button:hover { border-color: var(--accent); }
#eg-control button:active { transform: translateY(1px); }
#eg-control button.primary { background: var(--accent); color: light-dark(#fffefa, #17130c); border-color: transparent; }
#eg-control button[aria-pressed="true"] { background: var(--accent); color: light-dark(#fffefa, #17130c); border-color: transparent; }
#eg-control button.danger { border-color: #6b3d38 !important; color: #d48a80 !important; }
#eg-control button.danger:hover { background: #2b1716 !important; color: #fff !important; }
#eg-control a.button-link { text-decoration: none; display: inline-flex; align-items: center; }

#eg-control h1 { font-size: 15px; line-height: 1.15; letter-spacing: .075em; text-transform: uppercase; font-weight: 750; margin: 0; }
#eg-control h2 { font-size: 13px; font-weight: 720; margin: 0; }
#eg-control p { margin: 5px 0; }
#eg-control .muted { font-size: 12px; color: var(--muted); }
#eg-control .money { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }
#eg-control .big { font-size: 24px; font-weight: 730; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
#eg-control .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#eg-control .between { justify-content: space-between; }
#eg-control .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

#eg-control .panel {
    background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 98%, var(--soft)), var(--panel));
    border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
    border-radius: 12px; padding: 16px; margin-bottom: 16px; min-width: 0;
    box-shadow: 0 7px 24px light-dark(rgba(70,54,34,.035), rgba(0,0,0,.12));
}
#eg-control .summary { display: flex; gap: 26px; flex-wrap: wrap; padding: 12px 0; }
#eg-control .summary > div { position: relative; padding-left: 10px; }
#eg-control .summary > div:before {
    content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; border-radius: 2px;
    background: color-mix(in srgb, var(--accent) 56%, transparent);
}
#eg-control .summary strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.35px; }
#eg-control .summary span { display: block; font-size: 9px; color: var(--muted); }

#eg-control .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
#eg-control label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; }
#eg-control input, #eg-control select, #eg-control textarea {
    width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--bg); font-size: 14px;
}
#eg-control input:focus, #eg-control select:focus, #eg-control textarea:focus { outline: none; border-color: var(--accent); }

#eg-control table { width: 100%; border-collapse: collapse; }
#eg-control th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; padding: 8px 9px; border-bottom: 1px solid var(--line); }
#eg-control td { padding: 10px 9px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
#eg-control tr:last-child td { border-bottom: 0; }
#eg-control .tag {
    display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 5px;
    color: var(--accent); background: var(--soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* Sidebar — icons only, no labels (final, not revisiting) */
#eg-control > .eg-sidenav {
    grid-column: 1; grid-row: 1 / 4; position: sticky; top: 0; height: 100vh; z-index: 130;
    width: 62px; display: flex; flex-direction: column; gap: 7px; padding: 10px 8px 9px;
    background: light-dark(#ece7de, #0b0d0f); border-right: 1px solid var(--line);
}
#eg-control > .eg-sidenav a {
    position: relative; width: 44px; height: 44px; margin: 0 auto; display: grid; place-items: center;
    border-radius: 11px; border: 1px solid transparent; color: var(--muted); text-decoration: none;
}
#eg-control > .eg-sidenav a:hover { background: var(--soft); color: var(--text); }
#eg-control > .eg-sidenav a[aria-current="page"] {
    background: light-dark(#e2d6c3, #2a231a); border-color: light-dark(#c8ad83, #57472f); color: var(--accent);
    box-shadow: inset 2px 0 var(--accent);
}
#eg-control .eg-nav-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#eg-control .eg-nav-badge {
    position: absolute; top: 3px; right: 3px; font-size: 8px; font-weight: 750; min-width: 14px; height: 14px;
    display: grid; place-items: center; background: var(--accent); color: light-dark(#fffefa, #17130c);
    border-radius: 999px; padding: 0 3px; line-height: 1;
}
#eg-control .eg-side-spacer { flex: 1; }
#eg-control .eg-side-place {
    display: flex; align-items: center; justify-content: center; padding: 9px 0 0; margin: 0 auto;
    border-top: 1px solid var(--line); color: var(--muted);
}
#eg-control .eg-side-place b {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
    background: var(--soft); color: var(--accent); font-size: 9px;
}

/* Top bar — intentionally not sticky: scrolls out of view with the page */
#eg-control > .top {
    grid-column: 2; grid-row: 1; height: 38px; min-height: 38px; display: flex; align-items: center; gap: 8px;
    padding: 0 18px; background: var(--panel); border-bottom: 1px solid var(--line);
}
#eg-control > .top form { margin-left: 0; }
#eg-control > .top button { min-height: 24px; padding: 3px 9px; font-size: 9px; }

/* Club switcher — one club today, but built the same way as the role picker
   so a future multi-club owner account can pick between clubs here without
   a header redesign. */
#eg-control .eg-club { position: relative; }
#eg-control .eg-club-trigger {
    display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 9px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--soft);
    font-size: 9px; color: var(--muted);
}
#eg-control .eg-club-chevron { font-size: 9px; }
#eg-control .eg-club-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 140; min-width: 200px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px;
    box-shadow: 0 14px 34px rgba(0,0,0,.3);
}
#eg-control .eg-club-row {
    display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 7px 8px;
    border-radius: 8px; font-size: 11px;
}
#eg-control .eg-club-row.active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
#eg-control .eg-club-hint { padding: 6px 8px 2px; font-size: 9.5px; }

#eg-control .eg-search { position: relative; margin-left: 10px; width: 260px; max-width: 32vw; }
#eg-control .eg-search input {
    width: 100%; min-width: 0; padding: 4px 40px 4px 10px; height: 24px; font-size: 10px;
    border-radius: 6px; background: var(--bg);
}
#eg-control .eg-search-kbd {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 8px; color: var(--muted);
    border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; pointer-events: none;
}
#eg-control .eg-search-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 140; width: 360px; max-width: 80vw; max-height: 70vh;
    overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px;
    box-shadow: 0 14px 34px rgba(0,0,0,.3);
}
#eg-control .eg-search-group { font-size: 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 7px 8px 3px; }
#eg-control .eg-search-item { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 8px; border-radius: 7px; text-decoration: none; color: var(--text); }
#eg-control .eg-search-item:hover, #eg-control .eg-search-item.active { background: var(--soft); }
#eg-control .eg-search-title { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eg-control .eg-search-sub { font-size: 10px; color: var(--muted); white-space: nowrap; }
#eg-control .eg-search-empty { padding: 12px 8px; font-size: 11px; color: var(--muted); text-align: center; }

#eg-control .eg-freshness { position: relative; margin-left: 12px; }
/* Icon-only now — just the status dot, no "Актуально" label. The click
   target stays a comfortable size (22px circle) even though the dot itself
   is tiny. Selector has to out-specificity `#eg-control > .top button`
   (id+class+type) above, which was still winning over a plain
   `.eg-freshness-toggle` (id+class) reset and forcing back its generic
   3px/9px padding — squeezing the button's content box down to ~4px and
   flex-shrinking the dot into a sliver instead of a circle. */
#eg-control > .top .eg-freshness-toggle {
    width: 24px; height: 24px; min-height: 0; padding: 0; display: inline-flex; align-items: center;
    justify-content: center; border-radius: 999px; border: 1px solid transparent;
}
#eg-control .eg-freshness-toggle:hover { background: var(--soft); border-color: var(--line); }
/* Same 11px diameter as the chart legend dots, for visual consistency. */
#eg-control .eg-freshness .eg-dot {
    width: 11px; height: 11px; min-width: 11px; flex: none; border-radius: 50%;
    background: var(--green); display: inline-block;
}
#eg-control .eg-freshness-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 140; min-width: 190px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
#eg-control .eg-freshness-row { display: flex; justify-content: space-between; gap: 14px; font-size: 10px; padding: 4px 0; }
#eg-control .eg-freshness-row + .eg-freshness-row { border-top: 1px solid var(--line); }

/* Profile widget — avatar + role, owner-only role switcher in the popover */
#eg-control .eg-profile { position: relative; margin-left: auto; }
#eg-control .eg-profile-trigger {
    display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 10px 3px 3px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--soft);
}
#eg-control .eg-avatar {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
    background: var(--panel); color: var(--accent); font-size: 10px; font-weight: 750; flex: none;
}
#eg-control .eg-avatar img { width: 100%; height: 100%; object-fit: cover; }
#eg-control .eg-profile-text { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
#eg-control .eg-profile-text strong { font-size: 10px; }
#eg-control .eg-profile-text small { font-size: 8px; color: var(--muted); }
#eg-control .eg-profile-chevron { font-size: 10px; color: var(--muted); }
#eg-control .eg-profile-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 140; width: 280px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px;
    box-shadow: 0 14px 34px rgba(0,0,0,.3);
}
#eg-control .eg-profile-pop-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 10px; }
#eg-control .eg-profile-pop-head strong { font-size: 13px; }
#eg-control .eg-profile-pop-head .muted { font-size: 9.5px; }
#eg-control .eg-profile-role-row {
    width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 10px;
    text-align: left; background: transparent; border: 1px solid transparent; min-height: 0;
}
#eg-control .eg-profile-role-row:hover { background: var(--soft); }
#eg-control .eg-profile-role-row.active { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); }
#eg-control .eg-avatar-sm {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--soft); color: var(--accent); font-size: 12px; font-weight: 750;
}
#eg-control .eg-profile-role-text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
#eg-control .eg-profile-role-text strong { font-size: 12.5px; }
#eg-control .eg-profile-role-text small { font-size: 10px; color: var(--muted); }
#eg-control .eg-profile-check { color: var(--green); font-size: 13px; }
#eg-control .eg-profile-pop-actions { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
#eg-control .eg-profile-pop-actions a, #eg-control .eg-profile-pop-actions button, #eg-control .eg-profile-avatar-upload {
    display: block; width: 100%; text-align: left; padding: 7px 8px; border-radius: 8px; font-size: 11.5px;
    color: var(--text); background: transparent; border: none; cursor: pointer; min-height: 0;
}
#eg-control .eg-profile-pop-actions a:hover, #eg-control .eg-profile-pop-actions button:hover, #eg-control .eg-profile-avatar-upload:hover { background: var(--soft); }

/* Content */
#eg-control > main { grid-column: 2; grid-row: 2; max-width: 1540px; width: 100%; margin: 0 auto; padding: 0 20px 30px; }
#eg-control > main > .head {
    position: sticky; top: 0; z-index: 105; margin: 0 -2px 14px; padding: 16px 2px 8px; min-height: 42px;
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(13px);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}
#eg-control > main > .head p.muted { font-size: 10px; margin: 3px 0 0; }
#eg-control > .footer { grid-column: 2; grid-row: 3; padding: 12px 24px; color: var(--muted); font-size: 11px; }

@media (max-width: 900px) {
    #eg-control > main { padding: 16px; }
}
@media (max-width: 540px) {
    #eg-control .eg-profile-text { display: none; }
    #eg-control > main { padding: 0 12px 24px; }
}

/* Phones: the icon sidebar is a poor fit for one-handed use (top-of-screen,
   thumb has to stretch) — below tablet width it becomes a fixed bottom tab
   bar instead, which is how every native mobile app places primary nav.
   Tablets (iPad et al. all stay well above this width even in portrait, see
   the 900px breakpoint above) keep the desktop icon-rail sidebar untouched. */
@media (max-width: 640px) {
    #eg-control {
        /* minmax(0, 1fr), not plain 1fr — an `fr` track's automatic minimum
           is its content's min-content width, so without the explicit 0
           floor any wide table/grid on the page (schedule grid, employee
           list, etc.) stretches this single column past the viewport and
           the whole site scrolls sideways. This is what made every screen
           render wider than the phone after the previous pass. */
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
    }
    #eg-control > .eg-sidenav {
        grid-column: 1; grid-row: 3;
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto;
        width: 100%; flex-direction: row; align-items: center; justify-content: space-around;
        gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        border-right: 0; border-top: 1px solid var(--line);
        z-index: 200;
    }
    #eg-control > .eg-sidenav .eg-side-spacer,
    #eg-control > .eg-sidenav .eg-side-place { display: none; }
    #eg-control > .eg-sidenav a { width: 42px; height: 42px; margin: 0; }
    /* .top and .footer are pinned to column 2 in the desktop 2-column grid —
       on this 1-column mobile grid that stale grid-column:2 would otherwise
       place them in a phantom implicit second column, which is exactly what
       broke the header on phones after the first pass at this. */
    #eg-control > .top { grid-column: 1; }
    #eg-control > main { grid-column: 1; grid-row: 2; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    #eg-control > .footer { grid-column: 1; display: none; }

    /* Two-column forms/grids: comfortable on tablets, too cramped on a phone. */
    #eg-control .fields, #eg-control .columns { grid-template-columns: 1fr; }
    #eg-control .eg-search { max-width: 36vw; }

    /* Safety net: with the grid-blowout above fixed this shouldn't be load-
       bearing anymore, but if some other not-yet-audited element on some
       page is still wider than the screen, this clips the outer page instead
       of letting it scroll sideways — inner elements that manage their own
       horizontal scroll (.gridwrap, table wrappers) are unaffected since
       their overflow is set on themselves, not inherited from here. */
    body { overflow-x: hidden; }
}

/* Fixed multi-column rows (team roster, payroll lines) need real minimum
   widths per column to stay readable — below ~900px (covers phones and the
   11" iPad Air/Pro in portrait; 13" iPads keep the row layout) that no longer
   fits, so stack each row into a single-column card instead of letting it
   overflow sideways. */
@media (max-width: 900px) {
    #eg-control .employee-row {
        grid-template-columns: 1fr !important;
        gap: 6px; padding: 12px;
    }
    #eg-control .employee-status, #eg-control .employee-dates { justify-self: start; text-align: left; }
    #eg-control .employee-row .money { text-align: left !important; }
    #eg-control .employee-row > a.button-link { align-self: stretch; }
    #eg-control .employee-row > a.button-link button { width: 100%; }
}

/* Two-week payment calendar (Обзор) */
#eg-control .calendar-window {
    max-height: 690px; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.008);
}
#eg-control .calendar-week { padding: 0 12px 14px; }
#eg-control .calendar-week + .calendar-week { border-top: 2px solid color-mix(in srgb, var(--accent) 34%, transparent); padding-top: 16px; margin-top: 4px; }
#eg-control .calendar-week-head {
    position: sticky; top: 0; z-index: 8; display: grid;
    grid-template-columns: minmax(190px,1fr) repeat(4, minmax(125px,auto)); gap: 10px; align-items: center;
    padding: 10px; background: color-mix(in srgb, var(--panel) 97%, transparent); backdrop-filter: blur(10px);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
#eg-control .calendar-week-head h3 { margin: 0; font-size: 14px; text-align: left; text-transform: none; letter-spacing: 0; }
#eg-control .calendar-week-head small { display: block; color: var(--muted); font-size: 8px; margin-top: 2px; }
#eg-control .week-kpi { padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--accent) 42%, transparent); }
#eg-control .week-kpi span { display: block; color: var(--muted); font-size: 7px; text-transform: uppercase; letter-spacing: .06em; }
#eg-control .week-kpi strong { display: block; font-size: 12px; margin-top: 2px; }
#eg-control .week-kpi.personaltext { border-left-color: #8e7351; }

#eg-control .compact-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
#eg-control .compact-calendar th { font-size: 9px; text-transform: uppercase; color: var(--muted); font-weight: 400; text-align: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
#eg-control .compact-calendar th:first-child { width: 62px; text-align: left; }
#eg-control .compact-calendar td { padding: 6px; vertical-align: top; border-bottom: 1px solid var(--line); }
#eg-control .compact-calendar td:first-child { font-size: 12px; font-weight: 500; }
#eg-control .compact-calendar tr.today td:first-child { color: var(--accent); border-left: 3px solid var(--accent); }
#eg-control .compact-calendar td.daytotal { text-align: right; font-size: 12px; }
#eg-control .day-cell { display: flex; flex-direction: column; gap: 4px; min-height: 34px; }

#eg-control .entry, #eg-control .personal-entry {
    width: 100%; text-align: left; display: block; margin: 0; padding: 6px 8px; border-radius: 6px;
    border: 0; border-left: 3px solid var(--orange); background: var(--orangebg); cursor: pointer;
    text-decoration: none; color: var(--text); font: inherit;
}
#eg-control .entry.paid, #eg-control .personal-entry.paid { border-color: var(--green); background: var(--greenbg); }
#eg-control .personal-entry { border-left-color: #8e7351; background: rgba(164,131,79,.08); }
#eg-control .personal-entry.paid { border-color: var(--green); background: var(--greenbg); }
#eg-control .entry strong, #eg-control .personal-entry strong { display: block; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
#eg-control .entrybottom { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-top: 3px; }
#eg-control .entrybottom .money { font-size: 11px; }
#eg-control .status { font-size: 0; width: 14px; height: 14px; display: inline-grid; place-items: center; }
#eg-control .status::before { font-size: 11px; line-height: 1; }
#eg-control .entry.paid .status::before, #eg-control .personal-entry.paid .status::before { content: "✓"; color: var(--green); }
#eg-control .entry:not(.paid) .status::before, #eg-control .personal-entry:not(.paid) .status::before { content: "○"; color: var(--orange); }
#eg-control .calendar-empty { color: var(--muted); font-size: 10px; }
#eg-control .calendar-note { margin: 8px 2px 0; font-size: 9px; }

@media (max-width: 900px) {
    #eg-control .compact-calendar { table-layout: auto; }
    #eg-control .calendar-week-head { grid-template-columns: 1fr 1fr 1fr; }
    #eg-control .week-kpi:nth-child(4), #eg-control .week-kpi:nth-child(5) { display: none; }
}

/* Team: employee list */
#eg-control .employee-list { display: grid; gap: 8px; }
#eg-control .employee-row {
    display: grid; grid-template-columns: minmax(210px,1.15fr) 110px minmax(220px,1.7fr) 110px 90px;
    gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
    background: rgba(255,255,255,.012);
}
#eg-control .employee-row.fired { opacity: .58; }
#eg-control .employee-person strong { display: block; font-size: 13px; }
#eg-control .employee-person small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
#eg-control .employee-status {
    justify-self: center; font-size: 9px; font-weight: 800; padding: 5px 8px; border-radius: 999px;
    border: 1px solid #365747; color: #7dc39d; background: rgba(64,121,88,.10); white-space: nowrap;
}
#eg-control .employee-status.fired { border-color: #65413d; color: #cc857a; background: rgba(133,65,56,.10); }
#eg-control .employee-pay { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
#eg-control .employee-pay span { font-size: 9px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.012); }
#eg-control .employee-dates { text-align: center; font-size: 9px; color: var(--muted); line-height: 1.45; }

/* Team: schedule grid */
#eg-control .gridwrap { overflow-x: auto; max-width: 100%; }
#eg-control .staffgrid { border-collapse: separate; border-spacing: 0; min-width: 900px; width: 100%; font-variant-numeric: tabular-nums; }
#eg-control .staffgrid th, #eg-control .staffgrid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 4px; text-align: center; min-width: 32px; }
#eg-control .staffgrid th { font-size: 10px; color: var(--muted); font-weight: 400; }
#eg-control .staffgrid .employee { position: sticky; left: 0; z-index: 2; background: var(--panel); text-align: left; min-width: 160px; width: 160px; padding: 8px; }
#eg-control .staffgrid .boundary { border-right: 2px solid var(--accent); }
#eg-control .staffgrid th.currentday { box-shadow: inset 0 3px var(--accent); color: var(--accent); }
#eg-control .staffgrid .cell { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; min-height: 32px; }
#eg-control .chip { padding: 2px 5px; border: 1px solid currentColor; border-radius: 5px; display: inline-block; font-size: 10px; line-height: 16px; color: var(--accent); background: var(--soft); }
#eg-control .chip.n { color: var(--blue); background: var(--bluebg); }
#eg-control .chip.u { color: var(--teal); background: var(--tealbg); }
#eg-control .chip.v { color: var(--purple); background: var(--purplebg); }
#eg-control .legend { font-size: 11px; color: var(--muted); }
#eg-control .legend span { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; }