/* ==========================================================================
   Legisite OS V1 — dark "command console" (from Legisite grund) refined to iOS.
   Deep navy void + neon blue signals, frosted materials, soft layered depth,
   SF system font, large radii, segmented tabs, grouped inset lists, pill buttons.
   CSS-only restyle: targets the existing grundis class structure.
   ========================================================================== */

:root {
    /* Surfaces — the void (from grund) */
    --bg:            #050b14;
    --bg-2:          #07101d;
    --surface:       rgba(18, 30, 48, 0.72);   /* translucent glass tile */
    --surface-solid: #0c1729;
    --surface-2:     rgba(28, 42, 64, 0.66);
    --surface-3:     rgba(40, 56, 82, 0.55);
    --sidebar-bg:    rgba(11, 24, 46, 0.82);
    --border:        rgba(120, 160, 214, 0.16);
    --border-strong: rgba(120, 160, 214, 0.28);
    --hairline:      rgba(140, 175, 220, 0.12);

    /* Neon blue (primary) */
    --navy:    #0b2342;
    --blue:    #2f8cff;
    --blue-rgb: 47, 140, 255;
    --blue-600:#1f6fe0;
    --blue-soft:   rgba(47, 140, 255, 0.14);
    --blue-border: rgba(47, 140, 255, 0.34);
    --blue-glow:   rgba(47, 140, 255, 0.30);

    /* Text strata (from grund) */
    --t1: #f7fbff;
    --t2: #b7c5d8;
    --t3: #8194ad;
    --t4: #5a6f8c;

    /* Status signals — mapped onto grundis's semantic names */
    --green:   #2df5a7;  --green-soft:  rgba(45, 245, 167, 0.12);  --green-border:rgba(45, 245, 167, 0.30);
    --orange:  #f3c43d;  --orange-soft: rgba(243, 196, 61, 0.13);  --orange-border:rgba(243, 196, 61, 0.32);
    --red:     #ff4d5d;  --red-soft:    rgba(255, 77, 93, 0.13);   --red-border: rgba(255, 77, 93, 0.34);
    --grey:    #8194ad;  --grey-soft:   rgba(129, 148, 173, 0.13); --grey-border:rgba(129, 148, 173, 0.26);
    --purple:  #8b7cff;

    /* iOS geometry */
    --r:     18px;   /* cards / sections */
    --r-md:  14px;
    --r-sm:  12px;   /* controls */
    --r-pill: 999px;
    --shadow-sm: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.34);
    --shadow:    0 1px 0 rgba(255,255,255,.05) inset, 0 12px 32px rgba(0,0,0,.45);
    --shadow-lg: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px rgba(0,0,0,.58);
    --blur: saturate(160%) blur(20px);
    --sidebar-w: 236px;
    --control-h: 44px;
    --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
    --font: -apple-system, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--t2);
    background:
        radial-gradient(circle at 12% -5%, rgba(47,140,255,0.12) 0%, transparent 42%),
        radial-gradient(circle at 100% 0%, rgba(139,124,255,0.08) 0%, transparent 40%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: #5aa6ff; }
h1, h2, h3, h4 { color: var(--t1); margin: 0; font-weight: 650; letter-spacing: -0.02em; }
code { font-family: 'SF Mono', ui-monospace, 'JetBrains Mono', monospace; font-size: .86em; color: var(--t2); }

/* ----------------------------------------------------------------- Shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
    background: var(--sidebar-bg);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 20px 18px 14px; }
.brand__mark {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
    background: linear-gradient(160deg, #4ea0ff, var(--blue));
    color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px;
    box-shadow: 0 6px 18px rgba(var(--blue-rgb), .42), inset 0 1px 0 rgba(255,255,255,.4);
}
.brand__name { font-weight: 700; color: var(--t1); font-size: 16px; line-height: 1; letter-spacing: -0.02em; }
.brand__sub { font-size: 10.5px; color: var(--t4); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 3px; }

.nav { flex: 1; overflow-y: auto; padding: 6px 10px 16px; }
.nav__group { margin-bottom: 16px; }
.nav__kicker {
    font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--t4); padding: 6px 12px; font-weight: 600;
}
.nav__link {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm);
    color: var(--t2); font-size: 13.5px; font-weight: 500; margin-bottom: 2px;
    transition: background .18s, color .18s;
}
.nav__link:hover { background: rgba(255,255,255,0.04); color: var(--t1); }
.nav__link.is-active {
    background: linear-gradient(180deg, rgba(var(--blue-rgb),.22), rgba(var(--blue-rgb),.12));
    color: #eaf3ff; font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--blue-border), 0 4px 14px rgba(var(--blue-rgb),.18);
}
.nav__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.45; }

.sidebar__footer { border-top: 1px solid var(--hairline); padding: 12px 14px; }
.who { display: flex; align-items: center; gap: 10px; }
.who__avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft); color: #8fc0ff;
    display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: 0 0 34px;
    box-shadow: inset 0 0 0 1px var(--blue-border);
}
.who__name { font-size: 13px; color: var(--t1); font-weight: 600; }
.who__role { font-size: 11px; color: var(--t3); }
.logout-btn {
    margin-top: 10px; width: 100%; height: 36px; border: 1px solid var(--border-strong);
    background: rgba(255,255,255,0.03); color: var(--t2); border-radius: var(--r-sm); cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 500; transition: background .18s;
}
.logout-btn:hover { background: rgba(255,255,255,0.07); color: var(--t1); }

/* ------------------------------------------------------------------ Main */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page { padding: 22px 26px 64px; max-width: 1340px; width: 100%; }

.page-head {
    margin: -22px -26px 20px; padding: 20px 26px 16px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    position: sticky; top: 0; z-index: 40;
    background: linear-gradient(180deg, rgba(5,11,20,0.82), rgba(5,11,20,0.55));
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--hairline);
}
.page-head__title { font-size: 26px; font-weight: 700; color: var(--t1); letter-spacing: -0.03em; }
.page-head__subtitle { color: var(--t3); font-size: 13.5px; margin-top: 4px; max-width: 70ch; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- Cards */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    box-shadow: var(--shadow-sm);
}
.card--pad { padding: 20px; }
.section { margin-bottom: 20px; }
.section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--hairline); }
.section__title { font-size: 16px; font-weight: 650; color: var(--t1); letter-spacing: -0.02em; }
.section__subtitle { font-size: 12.5px; color: var(--t3); margin-top: 3px; }
.section__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section__body { padding: 18px 20px; }
.section__body--flush { padding: 0; }

/* ------------------------------------------------------------------- KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kpi {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    padding: 16px 18px; box-shadow: var(--shadow-sm); display: block; position: relative;
    transition: transform .18s var(--ease-spring), box-shadow .18s, border-color .18s;
}
a.kpi:hover { transform: translateY(-2px); border-color: var(--blue-border); box-shadow: var(--shadow); }
.kpi__label { font-size: 12px; color: var(--t3); font-weight: 550; display: flex; align-items: center; gap: 6px; }
.kpi__value { font-size: 28px; font-weight: 720; color: var(--t1); margin-top: 7px; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi__hint { font-size: 11.5px; color: var(--t4); margin-top: 5px; }
.kpi__tag { position: absolute; top: 16px; right: 16px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.kpi--green  { color: var(--green); }   .kpi--green .kpi__value  { color: var(--green); }
.kpi--orange { color: var(--orange); }  .kpi--orange .kpi__value { color: var(--orange); }
.kpi--red    { color: var(--red); }     .kpi--red .kpi__value    { color: var(--red); }
.kpi--blue   { color: var(--blue); }
.kpi--grey   { color: var(--grey); }
.kpi__tag { background: currentColor; }
.kpi--blue .kpi__value, .kpi--grey .kpi__value { color: var(--t1); }

/* ------------------------------------------------------------------ Chips */
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; letter-spacing: -0.01em;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.chip--neutral { background: var(--grey-soft);   color: #aab8cc;  border-color: var(--grey-border); }
.chip--blue    { background: var(--blue-soft);   color: #7ab6ff;  border-color: var(--blue-border); }
.chip--green   { background: var(--green-soft);  color: var(--green);  border-color: var(--green-border); }
.chip--orange  { background: var(--orange-soft); color: var(--orange); border-color: var(--orange-border); }
.chip--red     { background: var(--red-soft);    color: var(--red);    border-color: var(--red-border); }

/* --------------------------------------------------- Grouped inset tables */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data thead th {
    text-align: left; padding: 11px 16px; color: var(--t3); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--hairline);
    background: rgba(255,255,255,0.02); white-space: nowrap;
}
table.data tbody td { padding: 12px 16px; border-bottom: 1px solid var(--hairline); color: var(--t2); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover { background: rgba(255,255,255,0.03); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-strong { color: var(--t1); font-weight: 600; }
.cell-muted { color: var(--t4); }

/* ----------------------------------------------------------- Pill buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--control-h);
    padding: 0 18px; border-radius: var(--r-pill); font: inherit; font-size: 13.5px; font-weight: 600;
    border: 1px solid var(--border-strong); background: rgba(255,255,255,0.05); color: var(--t1); cursor: pointer;
    white-space: nowrap; letter-spacing: -0.01em;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform .14s var(--ease-spring), background .16s, box-shadow .16s, border-color .16s;
}
.btn:hover { background: rgba(255,255,255,0.09); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--primary {
    background: linear-gradient(180deg, #4ea0ff, var(--blue)); border-color: transparent; color: #fff;
    box-shadow: 0 8px 22px rgba(var(--blue-rgb), .36), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover { background: linear-gradient(180deg, #62acff, #2a82f4); color: #fff; }
.btn--danger { background: var(--red-soft); border-color: var(--red-border); color: #ff8088; }
.btn--danger:hover { background: rgba(255, 77, 93, 0.2); }
.btn--ghost { border-color: transparent; background: transparent; color: #7ab6ff; }
.btn--ghost:hover { background: var(--blue-soft); }
.btn--sm { height: 34px; padding: 0 14px; font-size: 12.5px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; }

/* ------------------------------------------------------------------ Forms */
.field { margin-bottom: 14px; }
.field__label { display: block; font-size: 12.5px; color: var(--t2); font-weight: 600; margin-bottom: 6px; }
.field__label .req { color: var(--red); }
.input, .select, .textarea {
    width: 100%; min-height: var(--control-h); padding: 10px 13px; border: 1px solid var(--border-strong);
    border-radius: var(--r-sm); background: rgba(5, 11, 20, 0.5); color: var(--t1); font: inherit; font-size: 14px;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.input::placeholder, .textarea::placeholder { color: var(--t4); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue); background: rgba(5,11,20,0.7); box-shadow: 0 0 0 4px rgba(var(--blue-rgb), .16); }
.textarea { min-height: 92px; resize: vertical; }
.select { appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--t3) 50%), linear-gradient(135deg, var(--t3) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.form-error-summary { background: var(--red-soft); border: 1px solid var(--red-border); color: #ff97a0; border-radius: var(--r-sm); padding: 11px 14px; font-size: 13px; margin-bottom: 14px; }

/* iOS toggle switch — restyles existing checkboxes (Mail Mode grant, product flags) */
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    width: 46px; height: 28px; border-radius: var(--r-pill); background: rgba(255,255,255,0.12);
    position: relative; vertical-align: middle; flex: 0 0 46px; transition: background .22s var(--ease-spring); border: none;
}
input[type="checkbox"]::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .22s var(--ease-spring);
}
input[type="checkbox"]:checked { background: var(--green); }
input[type="checkbox"]:checked::after { transform: translateX(18px); }

/* ----------------------------------------------------- Segmented control */
.tabs {
    display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 20px; flex-wrap: wrap;
    background: rgba(5,11,20,0.5); border: 1px solid var(--hairline); border-radius: var(--r-sm);
}
.tab {
    padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--t3); border-radius: 9px;
    transition: background .16s, color .16s; letter-spacing: -0.01em;
}
.tab:hover { color: var(--t1); }
.tab.is-active {
    color: #eaf3ff; background: linear-gradient(180deg, rgba(var(--blue-rgb),.34), rgba(var(--blue-rgb),.2));
    box-shadow: inset 0 0 0 1px var(--blue-border), 0 4px 12px rgba(0,0,0,.3);
}
.tab .count { color: var(--t4); font-weight: 600; margin-left: 5px; }

/* ----------------------------------------------------- Grouped queue rows */
.queue { display: flex; flex-direction: column; }
.queue__row { display: flex; align-items: center; gap: 12px; padding: 13px 6px; border-bottom: 1px solid var(--hairline); transition: background .12s; border-radius: 8px; }
.queue__row:hover { background: rgba(255,255,255,0.03); }
.queue__row:last-child { border-bottom: none; }
.queue__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--grey); box-shadow: 0 0 10px currentColor; color: var(--grey); }
.queue__dot--blue { background: var(--blue); color: var(--blue); }
.queue__dot--green { background: var(--green); color: var(--green); }
.queue__dot--orange { background: var(--orange); color: var(--orange); }
.queue__dot--red { background: var(--red); color: var(--red); }
.queue__main { flex: 1; min-width: 0; }
.queue__title { color: var(--t1); font-weight: 600; font-size: 13.5px; }
.queue__context { color: var(--t3); font-size: 12px; margin-top: 1px; }
.queue__meta { color: var(--t4); font-size: 12px; white-space: nowrap; }

/* -------------------------------------------------------------- Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { position: relative; padding: 0 0 15px 22px; border-left: 2px solid var(--hairline); }
.timeline__item:last-child { border-left-color: transparent; }
.timeline__item::before { content: ''; position: absolute; left: -6px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue-glow); }
.timeline__when { font-size: 11.5px; color: var(--t4); }
.timeline__what { font-size: 13px; color: var(--t2); }

/* ------------------------------------------------------------ Empty state */
.empty { text-align: center; padding: 38px 16px; color: var(--t3); }
.empty__icon { font-size: 24px; opacity: .4; }
.empty__msg { margin-top: 6px; font-size: 13.5px; }
td.empty { padding: 30px 16px; }

/* ----------------------------------------------------- Controlled warning */
.controlled-warning {
    display: flex; align-items: center; gap: 10px; background: var(--orange-soft);
    border: 1px solid var(--orange-border); color: #f6d98c; border-radius: var(--r-sm);
    padding: 12px 15px; font-size: 13px; margin-bottom: 16px;
}
.controlled-warning__label { font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; background: rgba(243,196,61,.2); color: var(--orange); padding: 3px 8px; border-radius: var(--r-pill); }

/* -------------------------------------------------------------- Flash/toast */
.flash { border-radius: var(--r-sm); padding: 12px 15px; font-size: 13px; margin-bottom: 16px; font-weight: 500; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.flash--ok { background: var(--green-soft); border: 1px solid var(--green-border); color: #88f6c6; }
.flash--error { background: var(--red-soft); border: 1px solid var(--red-border); color: #ff97a0; }

/* ----------------------------------------------------------- Audit badge */
.audit-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--t4); }
.audit-badge::before { content: '●'; color: var(--green); font-size: 8px; }

/* --------------------------------------------------------- Misc utilities */
.muted { color: var(--t3); }
.mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: 8px; } .mb-md { margin-bottom: 16px; } .mb-lg { margin-bottom: 24px; }
.mt-md { margin-top: 16px; }
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: 300px minmax(0,1fr) 320px; gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.big-revenue { font-size: 36px; font-weight: 760; color: var(--t1); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.def-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; }
.def-list dt { color: var(--t3); } .def-list dd { margin: 0; color: var(--t1); font-weight: 500; }

details > summary { user-select: none; }
details[open] > summary { margin-bottom: 4px; }

/* --------------------------------------------------------------- Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background:
        radial-gradient(circle at 50% -10%, rgba(47,140,255,0.22) 0%, transparent 46%),
        radial-gradient(circle at 100% 100%, rgba(139,124,255,0.12) 0%, transparent 44%),
        var(--bg);
}
.login-card { width: 100%; max-width: 390px; box-shadow: var(--shadow-lg); }
.login-card .brand { justify-content: center; padding: 4px 0 16px; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1040px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .app-shell { flex-direction: column; }
    .sidebar { position: static; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; }
    .nav__group { margin: 0; display: flex; flex-wrap: wrap; }
    .nav__kicker { display: none; }
    .sidebar__footer { border-top: none; margin-left: auto; }
    .page { padding: 16px; }
    .page-head { margin: -16px -16px 16px; padding: 16px; position: static; }
    /* iOS grouped cards: tables collapse, never hide status/owner/due/action (spec §11). */
    table.data, table.data thead, table.data tbody, table.data th, table.data td, table.data tr { display: block; }
    table.data thead { position: absolute; left: -9999px; }
    table.data tbody tr { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; padding: 8px 12px; background: var(--surface); }
    table.data tbody td { border: none; padding: 6px 0; display: flex; justify-content: space-between; gap: 14px; }
    table.data tbody td::before { content: attr(data-label); color: var(--t3); font-weight: 600; font-size: 12px; }
    .tabs { display: flex; }
}