/* ============================================================
   TAURI — Cyber-Minimalism dark theme
   Lightweight, framework-free. Deep dark base + blue accents.
   ============================================================ */

:root {
    /* surfaces */
    --bg:        #070b12;
    --bg-2:      #0b111c;
    --bg-3:      #0f1826;
    --bg-hover:  #131f31;
    --line:      #182234;
    --line-2:    #24344d;

    /* text */
    --txt:   #dce5f2;
    --txt-2: #8896ac;
    --txt-3: #56657e;

    /* accents */
    --accent:      #3d7dff;
    --accent-cyan: #22d3ee;
    --glow:        rgba(61, 125, 255, .30);

    /* status */
    --st-new:      #3d7dff;
    --st-progress: #22d3ee;
    --st-pending:  #8b93a7;
    --st-ok:       #2fd67a;
    --st-warn:     #f5a524;
    --st-danger:   #ff4d6a;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    --radius: 12px;
    --topbar-h: 58px;

    /* theme-dependent surfaces (overridden by [data-theme="light"]) */
    --topbar-bg: linear-gradient(180deg, rgba(13, 20, 33, .95), rgba(9, 14, 23, .85));
    --tint1: rgba(61, 125, 255, .10);
    --tint2: rgba(34, 211, 238, .06);
    --hero-tint: rgba(61, 125, 255, .12);
    --scroll-thumb: #1c283b;
    --scroll-thumb-hover: #26374f;
    --shadow: none;
}

/* ---------- Light theme ----------------------------------- */
:root[data-theme="light"] {
    --bg:        #eef2f9;
    --bg-2:      #ffffff;
    --bg-3:      #f2f5fb;
    --bg-hover:  #eaf0fb;
    --line:      #e2e8f2;
    --line-2:    #cdd8ea;

    --txt:   #16202f;
    --txt-2: #56617a;
    --txt-3: #8492a8;

    --accent:      #2563eb;
    --accent-cyan: #0891b2;
    --glow:        rgba(37, 99, 235, .18);

    --st-new:      #2563eb;
    --st-progress: #0891b2;
    --st-pending:  #64748b;
    --st-ok:       #16a34a;
    --st-warn:     #d97706;
    --st-danger:   #e11d48;

    --topbar-bg: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(244, 247, 252, .88));
    --tint1: rgba(37, 99, 235, .07);
    --tint2: rgba(8, 145, 178, .05);
    --hero-tint: rgba(37, 99, 235, .10);
    --scroll-thumb: #cdd8ea;
    --scroll-thumb-hover: #b6c4dc;
    --shadow: 0 1px 2px rgba(19, 39, 74, .04), 0 6px 20px rgba(19, 39, 74, .05);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--txt);
    background:
        radial-gradient(1200px 600px at 80% -10%, var(--tint1), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, var(--tint2), transparent 55%),
        var(--bg);
    background-attachment: fixed;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h2 { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--txt-2); }

/* ---------- Topbar ---------------------------------------- */

.topbar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar__brand { display: flex; align-items: center; gap: 12px; }

.logo-mark {
    width: 18px; height: 18px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    box-shadow: 0 0 14px var(--glow);
    transform: rotate(45deg);
}

.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 700; letter-spacing: .18em; font-size: 15px; }
.brand__sub  { font-size: 10px; letter-spacing: .22em; color: var(--txt-3); }

.topbar__meta { display: flex; align-items: center; gap: 22px; }

.hud { display: flex; gap: 20px; }
.hud__item { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.hud__num { font-family: var(--mono); font-size: 18px; font-weight: 600; }
.hud__lbl { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-3); }

.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    background: var(--bg-3); border: 1px solid var(--line-2); color: var(--txt-2);
    transition: color .12s, border-color .12s, background .12s;
}
.theme-toggle:hover { color: var(--accent); border-color: rgba(61, 125, 255, .5); }
.theme-toggle svg { width: 17px; height: 17px; }
/* show sun in dark mode (click -> light), moon in light mode */
.theme-toggle .i-moon { display: none; }
.theme-toggle .i-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .i-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; padding-left: 22px; border-left: 1px solid var(--line); }
.clock__date { font-size: 11px; color: var(--txt-2); }
.clock__time { font-family: var(--mono); font-size: 15px; color: var(--accent-cyan); letter-spacing: .06em; }

/* ---------- Shell / panels -------------------------------- */

.shell { padding: 16px; height: calc(100vh - var(--topbar-h)); }

.panels {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr) 320px;
    gap: 16px;
    height: 100%;
    min-height: 0;
}

.panel {
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow);
}
.panel::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}
.panel__title { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--txt-2); }
.panel__subhead {
    padding: 14px 16px 8px;
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--txt-3);
    border-top: 1px solid var(--line);
    margin-top: auto;
}

.chip {
    font-family: var(--mono); font-size: 12px;
    padding: 1px 9px; border-radius: 999px;
    background: var(--bg-3); border: 1px solid var(--line-2); color: var(--txt-2);
}

/* scrollable inner areas */
.emp-list, .table-wrap { overflow-y: auto; min-height: 0; }
.panel--right { overflow-y: auto; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* ---------- Panel 1 · Employees --------------------------- */

.emp-list { padding: 8px; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }

.emp {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    border-radius: 9px;
    border: 1px solid transparent;
    position: relative;
    transition: background .12s, border-color .12s;
}
.emp:hover { background: var(--bg-hover); }
.emp.is-active {
    background: linear-gradient(90deg, rgba(61, 125, 255, .14), rgba(61, 125, 255, .03));
    border-color: rgba(61, 125, 255, .45);
}
.emp.is-active::before {
    content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 22px;
    background: var(--accent); border-radius: 0 3px 3px 0; box-shadow: 0 0 10px var(--glow);
}
.emp__dot { width: 8px; height: 8px; border-radius: 50%; }
.emp__dot.is-online  { background: var(--st-ok); box-shadow: 0 0 8px rgba(47, 214, 122, .7); }
.emp__dot.is-offline { background: #38445a; }
.emp__body { min-width: 0; }
.emp__name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp__pos  { display: block; font-size: 11px; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp__count {
    font-family: var(--mono); font-size: 12px; min-width: 26px; text-align: center;
    padding: 2px 6px; border-radius: 7px; background: var(--bg-3); color: var(--txt-2); border: 1px solid var(--line);
}
.emp__count.has-expired { color: var(--st-danger); border-color: rgba(255, 77, 106, .4); }

/* ---------- Panel 2 · Tasks ------------------------------- */

.panel__head--emp { align-items: flex-start; }
.panel__head--emp .panel__title { font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--txt); }
.emp-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--txt-2); }
.emp-meta span { display: inline-flex; align-items: center; }
.ic { font-style: normal; color: var(--accent-cyan); margin-right: 6px; font-size: 11px; }
.ic-role::before { content: "\2B22"; }
.ic-geo::before  { content: "\25CE"; }

.state { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; padding: 2px 8px; border-radius: 6px; }
.state--on  { color: var(--st-ok); background: rgba(47, 214, 122, .10); border: 1px solid rgba(47, 214, 122, .3); }
.state--off { color: var(--txt-3); background: var(--bg-3); border: 1px solid var(--line); }

.panel__head-num { text-align: right; line-height: 1; }
.big-num { font-family: var(--mono); font-size: 30px; font-weight: 600; color: var(--accent); text-shadow: 0 0 20px var(--glow); }
.big-lbl { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-3); }

.table-wrap { flex: 1 1 auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--bg-2);
    text-align: left; font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3);
    padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.tbl tbody td { padding: 11px 14px; border-bottom: 1px solid rgba(24, 34, 52, .6); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl .w-id { width: 78px; }
.tbl .w-act { width: 44px; text-align: center; }
.task-title { font-weight: 500; }
.task-sub { font-size: 11px; color: var(--txt-3); margin-top: 2px; }

.tag {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    padding: 2px 8px; border-radius: 6px;
    background: var(--bg-3); border: 1px solid var(--line-2); color: var(--txt-2);
}
.tag--new      { color: var(--st-new);      border-color: rgba(61, 125, 255, .45);  background: rgba(61, 125, 255, .08); }
.tag--progress { color: var(--st-progress); border-color: rgba(34, 211, 238, .40);  background: rgba(34, 211, 238, .08); }
.tag--danger   { color: var(--st-danger);   border-color: rgba(255, 77, 106, .45);  background: rgba(255, 77, 106, .10); }
.tag--warn     { color: var(--st-warn);     border-color: rgba(245, 165, 36, .45);  background: rgba(245, 165, 36, .10); }
.tag--ok       { color: var(--st-ok);       border-color: rgba(47, 214, 122, .40);  background: rgba(47, 214, 122, .08); }

.pill { font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--txt-2); }
.pill--new      { color: var(--st-new);      border-color: rgba(61, 125, 255, .4); }
.pill--progress { color: var(--st-progress); border-color: rgba(34, 211, 238, .4); }
.pill--danger   { color: var(--st-danger);   border-color: rgba(255, 77, 106, .4); }
.pill--warn     { color: var(--st-warn);     border-color: rgba(245, 165, 36, .4); }
.pill--ok       { color: var(--st-ok);       border-color: rgba(47, 214, 122, .4); }
.pill--pending, .pill--muted { color: var(--txt-2); }

.ext {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 7px;
    background: var(--bg-3); border: 1px solid var(--line-2); color: var(--txt-2);
    transition: color .12s, border-color .12s, background .12s;
}
.ext:hover { color: var(--accent); border-color: rgba(61, 125, 255, .5); background: rgba(61, 125, 255, .08); }

/* ---------- Panel 3 · Statistics -------------------------- */

.metric-hero {
    margin: 16px; padding: 18px;
    background: radial-gradient(120% 140% at 50% 0%, var(--hero-tint), transparent 70%), var(--bg-3);
    border: 1px solid var(--line-2); border-radius: 10px; text-align: center;
}
.metric-hero__num { display: block; font-family: var(--mono); font-size: 40px; font-weight: 700; color: var(--accent); text-shadow: 0 0 24px var(--glow); }
.metric-hero__lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }

.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.kpi {
    background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px; display: flex; flex-direction: column; gap: 2px;
    border-left-width: 3px;
}
.kpi__num { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.kpi__lbl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.kpi--new      { border-left-color: var(--st-new); }
.kpi--progress { border-left-color: var(--st-progress); }
.kpi--pending  { border-left-color: var(--st-pending); }
.kpi--danger   { border-left-color: var(--st-danger); }
.kpi--danger .kpi__num { color: var(--st-danger); }

.breakdown { list-style: none; margin: 14px 16px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.breakdown li { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--txt-2); }
.breakdown b { margin-left: auto; color: var(--txt); }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot--warn  { background: var(--st-warn); }
.dot--muted { background: var(--txt-3); }

.team-stats { list-style: none; margin: 0; padding: 6px 16px 16px; display: flex; flex-direction: column; }
.team-stats li { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--txt-2); }
.team-stats li:last-child { border-bottom: 0; }
.team-stats b { color: var(--txt); font-size: 14px; }

.accent-new      { color: var(--st-new); }
.accent-progress { color: var(--st-progress); }
.accent-danger   { color: var(--st-danger); }
.accent-online   { color: var(--st-ok); }

/* ---------- Empty states ---------------------------------- */

.empty { padding: 22px 16px; text-align: center; color: var(--txt-3); font-size: 13px; }
.empty--lg { display: flex; align-items: center; justify-content: center; height: 100%; }

/* ---------- Responsive ------------------------------------ */

@media (max-width: 1160px) {
    .shell { height: auto; }
    .panels { grid-template-columns: 1fr; height: auto; }
    .panel { max-height: none; }
    .emp-list { max-height: 320px; }
    .table-wrap { max-height: 60vh; }
}

@media (max-width: 720px) {
    .hud { display: none; }
    .hide-sm { display: none; }
    .topbar { padding: 0 14px; }
    .shell { padding: 10px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Print ----------------------------------------- */

@media print {
    /* Ink-friendly rendering regardless of the active theme. */
    :root,
    :root[data-theme="light"],
    :root[data-theme="dark"] {
        --bg: #fff; --bg-2: #fff; --bg-3: #fff; --bg-hover: #fff;
        --line: #c9c9c9; --line-2: #a9a9a9;
        --txt: #000; --txt-2: #333; --txt-3: #555;
        --topbar-bg: #fff;
        --tint1: transparent; --tint2: transparent; --hero-tint: transparent;
        --glow: transparent; --shadow: none;
    }

    @page { margin: 14mm; }

    html, body { height: auto; }
    body {
        background: #fff !important;
        color: #000;
        font-size: 11pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Drop interactive chrome and the employee nav panel. */
    .theme-toggle, .hud, .clock__time, .ext, .w-act, .panel--left { display: none !important; }

    /* Topbar -> plain report header (brand + date). */
    .topbar {
        position: static; height: auto; padding: 0 0 8pt;
        background: #fff; border-bottom: 1px solid #000; backdrop-filter: none;
        margin-bottom: 10pt;
    }
    .clock { border-left: none; padding-left: 0; }

    /* Panels stack full width, no decoration. */
    .shell { height: auto; padding: 0; }
    .panels { display: block; height: auto; }
    .panel {
        border: none; border-radius: 0; box-shadow: none; overflow: visible;
        break-inside: avoid; margin-bottom: 12pt;
    }
    .panel::before { display: none; }
    .panel__head { border-color: #000; padding: 6pt 0; }
    .panel__subhead { border-top: 1px solid #999; }

    /* Numbers in black, no glow. */
    .big-num, .metric-hero__num, .kpi__num, .kpi--danger .kpi__num { color: #000 !important; text-shadow: none; }

    .metric-hero, .kpi { background: #fff; border: 1px solid #999; }
    .breakdown, .team-stats, .kpi-grid, .metric-hero { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }

    /* Tasks table prints in full. */
    .table-wrap { overflow: visible; max-height: none; }
    .tbl { font-size: 10pt; }
    .tbl thead th { background: #fff; color: #000; border-bottom: 1.5px solid #000; padding: 5pt 6pt; }
    .tbl tbody td { border-bottom: 1px solid #ccc; padding: 5pt 6pt; }
    .tbl tbody tr { break-inside: avoid; }
    .tbl tbody tr:hover { background: none; }

    /* Status chips: outline only, black text. */
    .tag, .pill, .state, .chip {
        background: #fff !important; color: #000 !important;
        border: 1px solid #888 !important; text-shadow: none;
    }

    a { color: #000; text-decoration: none; }
}