/* ===========================================================================
   Samt employee portal — brand system (maroon + gold, taken from the mark).
   Logical properties throughout so one sheet serves RTL and LTR.

   Sections
     01  Typeface            07  Command palette        13  Modals
     02  Design tokens       08  Auth                   14  Contracting
     03  Base + typography   09  Dashboard              15  Wizard
     04  Controls            10  Panels                 16  Print
     05  App shell           11  Tables / DataTable     17  Motion prefs
     06  Sidebar             12  Boards + chips
   =========================================================================== */

/* --- 01  Typeface: IBM Plex Sans Arabic, self-hosted (no CDN round-trip) --- */

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/plex-ar-400.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/plex-la-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/plex-ar-500.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/plex-la-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/plex-ar-600.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/plex-la-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/plex-ar-700.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/plex-la-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* --- 02  Design tokens --- */

:root {
    /* Brand — sampled from the mark */
    --brand-950: #150609;
    --brand-900: #260810;
    --brand-800: #3c0f1c;
    --brand-700: #5c1a2e;
    --brand-600: #7a2438;
    --gold-700: #8a6510;
    --gold-600: #a97f16;
    --gold-500: #c9a227;
    --gold-400: #ddbb52;
    --gold-300: #ecd48c;

    /* Neutrals — a hint of warmth so gold sits naturally on them */
    --ink: #2b1a20;
    --ink-2: #54404a;
    --muted: #84686f;
    --bg: #f7f1ee;
    --surface: #ffffff;
    --surface-2: #fdf8f7;
    --surface-3: #f7f0ed;
    --border: #e9dcdc;
    --border-strong: #dcc9cb;
    --on-dark: #f0dade;
    --on-dark-muted: #c297a1;

    /* Semantic */
    --ok: #1a7f45;
    --ok-bg: #e7f6ec;
    --warn: #8a5a00;
    --warn-bg: #fdf3e2;
    --danger: #b42318;
    --danger-bg: #fdecea;
    --info: #1c4fb0;
    --info-bg: #e8f0fe;

    --accent-gradient: linear-gradient(135deg, var(--gold-600), var(--gold-400));
    --accent-gradient-soft: linear-gradient(135deg, rgba(201, 162, 39, 0.16), rgba(221, 187, 82, 0.06));
    --brand-gradient: radial-gradient(140% 110% at 0% 0%, var(--brand-800), var(--brand-950) 72%);

    --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
    --font-mono: 'Cascadia Code', 'Consolas', ui-monospace, monospace;

    --radius: 14px;
    --radius-lg: 20px;
    --radius-sm: 10px;
    --container: 92rem;

    /* Layered shadows read as real depth instead of a grey smear */
    --shadow-xs: 0 1px 2px rgba(38, 8, 16, 0.05);
    --shadow-sm: 0 1px 2px rgba(38, 8, 16, 0.05), 0 4px 12px -6px rgba(38, 8, 16, 0.14);
    --shadow: 0 2px 4px rgba(38, 8, 16, 0.05), 0 18px 40px -20px rgba(38, 8, 16, 0.32);
    --shadow-lg: 0 4px 8px rgba(38, 8, 16, 0.06), 0 32px 64px -28px rgba(38, 8, 16, 0.42);
    --glow-gold: 0 0 0 1px rgba(201, 162, 39, 0.35), 0 8px 24px -10px rgba(201, 162, 39, 0.55);

    --ease-out: cubic-bezier(0.22, 0.75, 0.24, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.42, 1);
}

/* --- 03  Base + typography --- */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-family: var(--font-ar);
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-size: 0.975rem;
    font-feature-settings: 'kern' 1, 'liga' 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* A very faint brand wash so large empty areas never read as flat grey. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 30rem at 100% -10%, rgba(201, 162, 39, 0.07), transparent 60%),
        radial-gradient(50rem 28rem at -10% 100%, rgba(38, 55, 95, 0.07), transparent 60%);
}

h1 {
    font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem);
    font-weight: 700;
    color: var(--brand-900);
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0 0 0.4rem;
}
h2 { letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
a { color: var(--brand-700); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--gold-600); text-decoration: none; }
img { max-width: 100%; height: auto; }
strong, b { font-weight: 700; }

/* Figures line up in columns everywhere — the single biggest readability win
   a data table gets for free. */
td, th, .num, input[type="number"] { font-variant-numeric: tabular-nums; }

:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
    border-radius: 6px;
}

::selection { background: rgba(201, 162, 39, 0.28); color: var(--brand-900); }

/* Scrollbars in brand colours (WebKit + Firefox). */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-500); background-clip: content-box; }

.text-muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; }

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-block-end: 0.5rem;
}

/* --- 04  Controls --- */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65em 1.25em;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    overflow: hidden;
    white-space: nowrap;
    transition: transform 0.12s var(--ease-out), box-shadow 0.22s var(--ease-out),
                background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.995); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--primary {
    background: var(--accent-gradient);
    color: var(--brand-900);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) { box-shadow: var(--glow-gold); }

/* A slow gold sheen crosses primary buttons on hover — the one flourish that
   ties the UI back to the metallic mark. */
.btn--primary::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    inline-size: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}
.btn--primary:hover:not(:disabled)::after { animation: sheen 0.75s var(--ease-out); }
@keyframes sheen {
    from { inset-inline-start: -60%; opacity: 0.9; }
    to { inset-inline-start: 130%; opacity: 0; }
}

.btn--ghost { background: var(--surface); color: var(--brand-900); border-color: var(--border-strong); }
.btn--ghost:hover:not(:disabled) { border-color: var(--gold-500); color: var(--gold-700); box-shadow: var(--shadow-sm); }
.btn--brand { background: var(--brand-800); color: var(--on-dark); }
.btn--brand:hover:not(:disabled) { background: var(--brand-700); box-shadow: var(--shadow); }
.btn--danger { background: var(--danger-bg); color: var(--danger); border-color: #f3bdb6; }
.btn--danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn--sm { padding: 0.5em 0.85em; font-size: 0.875rem; }
.btn--lg { padding: 0.8em 1.6em; font-size: 1.05rem; }

/* Fields */
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-block-end: 1rem; }
.field label { font-weight: 600; font-size: 0.875rem; color: var(--ink-2); }
.field input,
.field select,
.field textarea {
    font: inherit;
    color: var(--ink);
    padding: 0.62em 0.85em;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    inline-size: 100%;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #9aa2b5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #bcc2d4; }
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
    outline: none;
}
.field textarea { resize: vertical; min-block-size: 3rem; line-height: 1.8; }
.field select {
    appearance: none;
    padding-inline-end: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b748a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 1.05rem;
}
html[dir="ltr"] .field select { background-position: right 0.75rem center; }

.validation-message { color: var(--danger); font-size: 0.85rem; }
/* Hint line under a field — explains a rule without stealing the label's slot. */
.field small { color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.field--required label::after { content: " *"; color: var(--gold-600); font-weight: 800; }
.form-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-block-end: 1rem;
}
.form-row .field { margin-block-end: 0; }
.form-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-block-end: 1rem;
    font-size: 0.92rem;
    border: 1px solid transparent;
    animation: pop-in 0.22s var(--ease-out) both;
}
.form-status .icon { inline-size: 1.05rem; block-size: 1.05rem; flex: none; }
.form-status--error { background: var(--danger-bg); color: var(--danger); border-color: #f3bdb6; }
.form-status--ok { background: var(--ok-bg); color: var(--ok); border-color: #b9e2c8; }

/* Icon action buttons */
.icon-btn {
    display: inline-grid;
    place-items: center;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    flex: none;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--brand-700);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
                transform 0.12s var(--ease-spring), box-shadow 0.18s ease;
}
.icon-btn:hover {
    border-color: var(--gold-500);
    color: var(--gold-700);
    background: rgba(201, 162, 39, 0.09);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}
.icon-btn:active { transform: translateY(0) scale(0.94); }
.icon-btn .icon { inline-size: 1.05rem; block-size: 1.05rem; }
.icon-btn--danger { color: var(--danger); }
.icon-btn--danger:hover { border-color: #f0a99e; background: var(--danger-bg); color: #912018; }
.icon-btn.is-active { background: var(--brand-800); border-color: var(--brand-800); color: var(--on-dark); }

.icon { inline-size: 1em; block-size: 1em; display: inline-block; vertical-align: -0.125em; flex: none; }

/* ---- Page toolbar: the row of actions and filters above a board or table ---- */
.toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-block: 1.25rem 0.25rem;
}
.toolbar__spacer { flex: 1 1 auto; }

/* ---- Tabs: a status strip that filters the list under it ---- */
.tabs {
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    margin-block: 1.25rem 0;
    padding-block-end: 0;
    border-block-end: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    padding: 0.6rem 0.9rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color 0.18s ease, background 0.18s ease;
}
.tabs__tab:hover:not(:disabled) { color: var(--brand-900); background: rgba(201, 162, 39, 0.07); }
.tabs__tab:disabled { opacity: 0.55; cursor: not-allowed; }

/* The gold underline grows out from the centre when a tab is picked — the same
   gold rule that sits under the mark, doing a job. */
.tabs__tab::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0.35rem;
    block-size: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent-gradient);
    transform: scaleX(0);
    transition: transform 0.28s var(--ease-out);
}
.tabs__tab.is-active { color: var(--brand-900); font-weight: 700; }
.tabs__tab.is-active::after { transform: scaleX(1); }

.tabs__count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.5rem;
    padding: 0 0.4em;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tabs__tab.is-active .tabs__count {
    background: var(--accent-gradient);
    border-color: var(--gold-600);
    color: var(--brand-900);
}
/* A tab may tint its badge with the status colour it already uses elsewhere. */
.tabs__count.tag--ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(26, 127, 69, 0.25); }
.tabs__count.tag--info { background: var(--info-bg); color: var(--info); border-color: rgba(28, 79, 176, 0.22); }
.tabs__count.tag--warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(138, 90, 0, 0.25); }
.tabs__count.tag--danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(180, 35, 24, 0.25); }
.tabs__tab.is-active .tabs__count.tag--ok,
.tabs__tab.is-active .tabs__count.tag--info,
.tabs__tab.is-active .tabs__count.tag--warn,
.tabs__tab.is-active .tabs__count.tag--danger {
    background: var(--accent-gradient);
    border-color: var(--gold-600);
    color: var(--brand-900);
}

/* A panel sitting directly under the strip joins onto it instead of floating. */
.tabs + .panel { margin-block-start: 0; border-start-start-radius: 0; border-start-end-radius: 0; }

/* ---- FilterSelect: one dropdown shape for every toolbar filter ---- */
.fsel {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-inline: 0.7rem 0.35rem;
    block-size: 2.2rem;
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.fsel:hover { border-color: var(--gold-500); }
/* Focus lives on the inner <select>, so the ring is drawn on the wrapper. */
.fsel:focus-within { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16); }

/* A filter that is doing something must look different from one that is not. */
.fsel.is-active {
    border-color: var(--gold-600);
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.16), rgba(221, 187, 82, 0.07));
    color: var(--gold-700);
}

.fsel__ico { display: inline-grid; place-items: center; flex: none; color: var(--muted); }
.fsel.is-active .fsel__ico { color: var(--gold-600); }
.fsel__ico .icon { inline-size: 1rem; block-size: 1rem; }
.fsel__label { color: var(--muted); font-weight: 600; white-space: nowrap; }
.fsel.is-active .fsel__label { color: var(--gold-700); }

.fsel__input {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0 0.15rem;
    max-inline-size: 12rem;
    text-overflow: ellipsis;
    cursor: pointer;
    outline: none;
}
.fsel__input:disabled { cursor: not-allowed; opacity: 0.6; }
.fsel__input option { color: var(--ink); background: var(--surface); font-weight: 500; }

.fsel__caret { display: inline-grid; place-items: center; flex: none; color: var(--muted); padding-inline-end: 0.35rem; }
.fsel__caret .icon { inline-size: 0.95rem; block-size: 0.95rem; }
.fsel__clear {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.2);
    color: var(--gold-700);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s var(--ease-spring);
}
.fsel__clear:hover { background: var(--danger-bg); color: var(--danger); transform: scale(1.08); }
.fsel__clear .icon { inline-size: 0.75rem; block-size: 0.75rem; }

/* ---- Combo: the dropdown you can type into (long lists: projects, clients, services) ----
   Shaped like a form .field control, not like the pill above: this one lives
   inside forms next to <input>s and must line up with them. */
.combo { position: relative; }

.combo__control {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-inline: 0.75rem 0.4rem;
    block-size: 2.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.combo__control:hover { border-color: var(--gold-500); }
.combo:focus-within .combo__control {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}
.combo__control.is-disabled { opacity: 0.6; }

.combo__ico { display: inline-grid; place-items: center; flex: none; color: var(--muted); }
.combo__ico .icon { inline-size: 1rem; block-size: 1rem; }

.combo__input {
    flex: 1 1 auto;
    min-inline-size: 0;
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--ink);
    padding: 0;
    outline: none;
    text-overflow: ellipsis;
}
.combo__input::placeholder { color: var(--muted); font-weight: 400; }
.combo__input:disabled { cursor: not-allowed; }

.combo__caret { display: inline-grid; place-items: center; flex: none; color: var(--muted); }
.combo__caret .icon { inline-size: 0.95rem; block-size: 0.95rem; }
.combo__clear {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.18);
    color: var(--gold-700);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.combo__clear:hover { background: var(--danger-bg); color: var(--danger); }
.combo__clear .icon { inline-size: 0.75rem; block-size: 0.75rem; }

.combo__list {
    position: absolute;
    z-index: 40;
    inset-inline: 0;
    inset-block-start: calc(100% + 0.25rem);
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    max-block-size: 16rem;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-md, 0 12px 28px rgba(11, 22, 44, 0.16));
}

.combo__option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.9rem;
}
/* Keyboard and mouse share one highlight so arrowing down and hovering cannot
   disagree about which row Enter would pick. */
.combo__option.is-active { background: rgba(201, 162, 39, 0.14); }
.combo__option.is-selected .combo__option-text { color: var(--gold-700); font-weight: 700; }
.combo__option-text { flex: 1 1 auto; min-inline-size: 0; }
.combo__option-hint { flex: 0 0 auto; color: var(--muted); font-size: 0.8rem; }
.combo__empty { padding: 0.6rem; color: var(--muted); font-size: 0.875rem; }

/* --- 05  App shell --- */

.shell { --sb-w: 16.5rem; min-height: 100vh; }

.shell__main {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    margin-inline-start: var(--sb-w);
    transition: margin-inline-start 0.24s var(--ease-out);
}

.app-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: rgba(252, 252, 254, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-block-end: 1px solid var(--border);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Lifts off the page once you scroll (class set from admin.js). */
.app-bar.is-stuck { box-shadow: 0 6px 22px -14px rgba(38, 8, 16, 0.45); border-color: var(--border-strong); }

/* A hairline of gold under the bar — the mark's underline, repeated. */
.app-bar::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    block-size: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    opacity: 0.5;
}

.app-bar__inner {
    padding: 0.6rem clamp(1rem, 2vw, 2rem);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-block-size: 3.6rem;
}
.app-bar__menu {
    display: none;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    flex: none;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    color: var(--brand-700);
    cursor: pointer;
}
.app-bar__menu .icon { inline-size: 1.3rem; block-size: 1.3rem; }
.app-bar__title {
    font-weight: 700;
    color: var(--brand-900);
    flex: 1;
    min-inline-size: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    letter-spacing: -0.01em;
}
.app-bar__title .icon { color: var(--gold-600); inline-size: 1.1rem; block-size: 1.1rem; }

/* ⌘K launcher, sitting in the bar like a real product's */
.app-bar__search {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.75rem;
    min-inline-size: 15rem;
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.app-bar__search:hover { border-color: var(--gold-500); color: var(--ink-2); box-shadow: var(--shadow-xs); }
.app-bar__search .icon { inline-size: 1rem; block-size: 1rem; }
.app-bar__search span { flex: 1; text-align: start; }
.kbd {
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1em 0.45em;
    border-radius: 5px;
    border: 1px solid var(--border-strong);
    border-block-end-width: 2px;
    background: var(--surface-3);
    color: var(--muted);
    direction: ltr;
    white-space: nowrap;
}

.app-main { flex: 1; padding-block: clamp(1.25rem, 2.5vw, 2.25rem) 3rem; }
.container {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1rem, 2vw, 2rem);
}

.shell__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(10, 21, 48, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* --- 06  Sidebar --- */

.sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    inline-size: var(--sb-w);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 0.75rem 0.85rem;
    overflow: hidden;
    background: var(--brand-gradient);
    border-inline-end: 1px solid rgba(201, 162, 39, 0.16);
    transition: inline-size 0.24s var(--ease-out), transform 0.28s var(--ease-out), box-shadow 0.25s ease;
}

/* A faint diamond lattice — the mark's motif, used as texture not decoration. */
.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        linear-gradient(45deg, rgba(201, 162, 39, 0.045) 25%, transparent 25%, transparent 75%, rgba(201, 162, 39, 0.045) 75%),
        linear-gradient(45deg, rgba(201, 162, 39, 0.045) 25%, transparent 25%, transparent 75%, rgba(201, 162, 39, 0.045) 75%);
    background-size: 34px 34px;
    background-position: 0 0, 17px 17px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 45%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 45%);
}
.sidebar > * { position: relative; }

.sidebar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-inline: 0.3rem;
    padding-block-end: 0.6rem;
    border-block-end: 1px solid rgba(255, 255, 255, 0.07);
}
.sidebar__brand { display: block; border-radius: 8px; }
.sidebar__brand img {
    display: block;
    block-size: 2.1rem;
    inline-size: auto;
    transition: transform 0.35s var(--ease-spring), filter 0.3s ease;
}
.sidebar__brand:hover img { transform: scale(1.04); filter: drop-shadow(0 2px 10px rgba(221, 187, 82, 0.55)); }

.sidebar__collapse {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    flex: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    color: var(--on-dark-muted);
    transition: background 0.15s ease, color 0.15s ease, transform 0.2s var(--ease-spring);
}
.sidebar__collapse:hover { background: rgba(201, 162, 39, 0.2); color: var(--gold-300); transform: scale(1.06); }
.sidebar__collapse .icon { inline-size: 1.15rem; block-size: 1.15rem; }

/* Nav quick-filter: type to narrow the menu instead of hunting through it. */
.sidebar__filter { position: relative; display: flex; align-items: center; padding-inline: 0.15rem; }
.sidebar__filter .icon {
    position: absolute;
    inset-inline-start: 0.75rem;
    inline-size: 0.95rem;
    block-size: 0.95rem;
    color: var(--on-dark-muted);
    pointer-events: none;
}
.sidebar__filter input {
    inline-size: 100%;
    font: inherit;
    font-size: 0.85rem;
    color: var(--on-dark);
    padding: 0.42rem 0.7rem;
    padding-inline-start: 2.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    transition: border-color 0.18s ease, background 0.18s ease;
}
.sidebar__filter input::placeholder { color: rgba(169, 180, 210, 0.75); }
.sidebar__filter input:focus {
    outline: none;
    border-color: rgba(201, 162, 39, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-inline-end: 0.15rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 162, 39, 0.3) transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(201, 162, 39, 0.3); border: 0; }

.sidebar__caption {
    padding: 0.85rem 0.75rem 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(169, 180, 210, 0.55);
    white-space: nowrap;
}

.sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    inline-size: 100%;
    padding: 0.6rem 0.7rem;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--on-dark-muted);
    font: inherit;
    font-size: 0.925rem;
    font-weight: 500;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s var(--ease-out);
}
.sidebar__link:hover {
    text-decoration: none;
    color: var(--on-dark);
    background: rgba(255, 255, 255, 0.07);
}
.sidebar__link:hover .sidebar__ico .icon { transform: scale(1.12) rotate(-4deg); color: var(--gold-300); }

.sidebar__ico { display: inline-grid; place-items: center; flex: none; inline-size: 1.4rem; }
.sidebar__ico .icon {
    inline-size: 1.22rem;
    block-size: 1.22rem;
    transition: transform 0.28s var(--ease-spring), color 0.2s ease;
}
.sidebar__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Active page: gold pill + a rail marker that grows in from nothing. */
.sidebar__link.active {
    color: var(--brand-900);
    font-weight: 700;
    background: var(--accent-gradient);
    box-shadow: 0 6px 18px -8px rgba(201, 162, 39, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.sidebar__link.active .sidebar__ico .icon { color: var(--brand-900); }
.sidebar__link.active::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.75rem;
    inset-block: 0.35rem;
    inline-size: 3px;
    border-radius: 99px;
    background: var(--gold-300);
    box-shadow: 0 0 10px 1px rgba(221, 187, 82, 0.8);
    animation: rail-in 0.34s var(--ease-out) both;
}
@keyframes rail-in {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}

/* Submenu: a chain of diamonds on a gold thread (brand motif). */
.nav-group { display: flex; flex-direction: column; }
.nav-group__caret {
    display: inline-grid;
    place-items: center;
    flex: none;
    transition: transform 0.28s var(--ease-out), color 0.2s ease;
}
.nav-group__caret .icon { inline-size: 0.95rem; block-size: 0.95rem; }
.nav-group.is-open .nav-group__caret { transform: rotate(180deg); color: var(--gold-400); }
.nav-group.is-open > .nav-group__toggle { color: var(--on-dark); }

/* Parent of the page you are on: label goes gold, so the trail is readable
   even when the group is collapsed. */
.nav-group.has-active > .nav-group__toggle { color: var(--gold-300); background: rgba(201, 162, 39, 0.1); }
.nav-group.has-active > .nav-group__toggle .sidebar__ico .icon { color: var(--gold-400); }

.nav-group__items {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    max-height: 0;
    overflow: hidden;
    margin-block-start: 0.1rem;
    margin-inline-start: 1.2rem;
    padding-inline-start: 1.25rem;
    transition: max-height 0.32s var(--ease-out), opacity 0.25s ease;
    opacity: 0;
}
.nav-group__items::before {
    content: "";
    position: absolute;
    inset-block: 0.45rem;
    inset-inline-start: 0.45rem;
    inline-size: 2px;
    border-radius: 2px;
    background: linear-gradient(var(--gold-500), rgba(201, 162, 39, 0.1));
}
.nav-group.is-open .nav-group__items { max-height: 22rem; opacity: 1; }

.sidebar__sublink {
    position: relative;
    display: block;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    color: var(--on-dark-muted);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, padding-inline-start 0.2s var(--ease-out);
}
.sidebar__sublink::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.98rem;
    inset-block-start: calc(50% - 0.22rem);
    inline-size: 0.44rem;
    block-size: 0.44rem;
    transform: rotate(45deg);
    background: var(--brand-900);
    border: 1.5px solid var(--gold-600);
    border-radius: 1px;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-spring);
}
.sidebar__sublink:hover {
    text-decoration: none;
    color: var(--on-dark);
    background: rgba(255, 255, 255, 0.06);
    padding-inline-start: 0.9rem;
}
.sidebar__sublink:hover::before { background: var(--gold-600); border-color: var(--gold-400); }
.sidebar__sublink.active {
    color: var(--brand-900);
    font-weight: 700;
    background: linear-gradient(90deg, rgba(221, 187, 82, 0.95), rgba(201, 162, 39, 0.75));
    box-shadow: 0 4px 14px -8px rgba(201, 162, 39, 0.9);
}
.sidebar__sublink.active::before {
    background: var(--gold-300);
    border-color: var(--gold-300);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.22), 0 0 12px 2px rgba(221, 187, 82, 0.6);
    transform: rotate(45deg) scale(1.25);
    animation: diamond-pulse 2.6s var(--ease-out) infinite;
}
@keyframes diamond-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.22), 0 0 12px 2px rgba(221, 187, 82, 0.55); }
    50% { box-shadow: 0 0 0 5px rgba(201, 162, 39, 0.1), 0 0 18px 3px rgba(221, 187, 82, 0.85); }
}

/* Filtered out by the quick-filter box. */
.sidebar__nav .is-filtered { display: none; }

.sidebar__foot { padding-inline: 0.5rem; padding-block-start: 0.6rem; border-block-start: 1px solid rgba(255, 255, 255, 0.07); }

/* ---- Account block at the foot of the rail ---- */
.sidebar__account { position: relative; }

.sidebar__user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    inline-size: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--on-dark);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.sidebar__user:hover, .sidebar__user[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(201, 162, 39, 0.28);
}
.sidebar__user-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: var(--brand-900);
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--brand-900), 0 0 0 3px rgba(201, 162, 39, 0.45);
}
.sidebar__user-id { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; line-height: 1.35; }
.sidebar__user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--on-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar__user-role { font-size: 0.75rem; color: var(--gold-400); white-space: nowrap; }
.sidebar__user-caret { display: inline-grid; place-items: center; flex: none; color: var(--on-dark-muted); transition: transform 0.25s var(--ease-out); }
.sidebar__user-caret .icon { inline-size: 0.95rem; block-size: 0.95rem; }
.sidebar__user[aria-expanded="true"] .sidebar__user-caret { transform: rotate(180deg); color: var(--gold-400); }

/* Opens upward — at the bottom of the viewport there is nowhere else to go. */
.sidebar__menu {
    position: absolute;
    inset-block-end: calc(100% + 0.45rem);
    inset-inline: 0;
    z-index: 70;
    padding: 0.35rem;
    background: var(--brand-950);
    border: 1px solid rgba(201, 162, 39, 0.28);
    border-radius: var(--radius);
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.75);
    animation: menu-up 0.18s var(--ease-out) both;
}
.sidebar__menu[hidden] { display: none; }
@keyframes menu-up {
    from { opacity: 0; transform: translateY(0.5rem) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.sidebar__menu form { margin: 0; }
.sidebar__menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    inline-size: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--on-dark-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar__menu-item:hover { text-decoration: none; background: rgba(201, 162, 39, 0.15); color: var(--gold-300); }
.sidebar__menu-item .icon { inline-size: 1.05rem; block-size: 1.05rem; flex: none; }
/* Solid, not translucent: the flattened value over the maroon menu, so the
   contrast of the text on it is checkable rather than a guess. */
.sidebar__menu-item--danger:hover { background: #3a1a22; color: #ffc9c2; }
.sidebar__menu-sep { block-size: 1px; margin: 0.3rem 0.2rem; background: rgba(255, 255, 255, 0.09); }

/* On the rail the menu has no width to inherit, so it floats out beside it. */
.shell--collapsed .sidebar:not(:hover) .sidebar__menu {
    inset-inline: auto;
    inset-inline-start: calc(100% + 0.5rem);
    inset-block-end: 0;
    min-inline-size: 14rem;
}

/* Collapsed rail (desktop).

   Anything that carries text is removed from the flow entirely, not just made
   invisible: a hidden-but-still-laid-out caption leaves a gap, which is what
   made the icon column look unevenly spaced. */
.shell--collapsed { --sb-w: 4.6rem; }
.shell--collapsed .sidebar__brand,
.shell--collapsed .sidebar__label,
.shell--collapsed .nav-group__caret,
.shell--collapsed .sidebar__user-id { opacity: 0; visibility: hidden; }
.shell--collapsed .sidebar__caption,
.shell--collapsed .sidebar__filter { display: none; }

/* On the rail every group is shut, so the icons form one even column. The
   open/closed state itself is untouched — reopening the rail restores it. */
.shell--collapsed .nav-group__items { max-height: 0; opacity: 0; visibility: hidden; }

.shell--collapsed .sidebar__top { justify-content: center; }
.shell--collapsed .sidebar__link { justify-content: center; padding-inline: 0.5rem; }
.shell--collapsed .sidebar__link.active::before { inset-inline-start: -0.75rem; }
.shell--collapsed .sidebar__foot { padding-inline: 0; }
.shell--collapsed .sidebar__user { justify-content: center; padding-inline: 0.5rem; }
.shell--collapsed .sidebar__user-caret { display: none; }

/* On the rail, hovering an item reveals its name as a flyout chip. */
@media (hover: hover) {
    .shell--collapsed .sidebar__link { position: relative; }
    .shell--collapsed .sidebar:not(:hover) .sidebar__link::after {
        content: attr(data-tip);
        position: absolute;
        inset-inline-start: calc(100% + 0.6rem);
        inset-block-start: 50%;
        transform: translateY(-50%) scale(0.9);
        transform-origin: center inline-start;
        padding: 0.35rem 0.7rem;
        border-radius: 8px;
        background: var(--brand-950);
        border: 1px solid rgba(201, 162, 39, 0.35);
        color: var(--on-dark);
        font-size: 0.82rem;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        box-shadow: var(--shadow);
        transition: opacity 0.16s ease, transform 0.2s var(--ease-spring);
        z-index: 5;
    }
    .shell--collapsed .sidebar:not(:hover) .sidebar__link:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }

    /* Hovering the rail floats the full menu over the content (no reflow), and
       whatever was open before the collapse comes back open. */
    .shell--collapsed .sidebar:hover {
        inline-size: 16.5rem;
        box-shadow: 0 24px 70px -18px rgba(0, 0, 0, 0.65);
    }
    .shell--collapsed .sidebar:hover .sidebar__brand,
    .shell--collapsed .sidebar:hover .sidebar__label,
    .shell--collapsed .sidebar:hover .nav-group__caret,
    .shell--collapsed .sidebar:hover .sidebar__user-id { opacity: 1; visibility: visible; }
    .shell--collapsed .sidebar:hover .sidebar__caption { display: block; }
    .shell--collapsed .sidebar:hover .sidebar__filter { display: flex; }
    .shell--collapsed .sidebar:hover .sidebar__user-caret { display: inline-grid; }
    .shell--collapsed .sidebar:hover .nav-group.is-open .nav-group__items {
        opacity: 1;
        visibility: visible;
        max-height: 22rem;
    }
    .shell--collapsed .sidebar:hover .sidebar__top { justify-content: space-between; }
    .shell--collapsed .sidebar:hover .sidebar__link { justify-content: flex-start; padding-inline: 0.7rem; }
    .shell--collapsed .sidebar:hover .sidebar__foot { padding-inline: 0.5rem; }
    .shell--collapsed .sidebar:hover .sidebar__user { justify-content: flex-start; padding-inline: 0.6rem; }
}

/* Mobile: off-canvas */
@media (max-width: 60rem) {
    .sidebar { inline-size: 16.5rem; transform: translateX(100%); box-shadow: 0 0 60px rgba(0, 0, 0, 0.5); }
    html[dir="ltr"] .sidebar { transform: translateX(-100%); }
    .shell--menu-open .sidebar { transform: none; }
    .shell__main, .shell--collapsed .shell__main { margin-inline-start: 0; }
    .app-bar__menu { display: inline-grid; }
    .app-bar__search { min-inline-size: 0; }
    .app-bar__search span, .app-bar__search .kbd { display: none; }
    .sidebar__collapse { display: none; }

    /* The rail is a desktop idea; on a phone the drawer is always the full menu. */
    .shell--collapsed .sidebar { inline-size: 16.5rem; }
    .shell--collapsed .sidebar__brand,
    .shell--collapsed .sidebar__label,
    .shell--collapsed .nav-group__caret,
    .shell--collapsed .sidebar__user-id { opacity: 1; visibility: visible; }
    .shell--collapsed .sidebar__caption { display: block; }
    .shell--collapsed .sidebar__filter { display: flex; }
    .shell--collapsed .sidebar__user-caret { display: inline-grid; }
    .shell--collapsed .nav-group.is-open .nav-group__items { max-height: 22rem; opacity: 1; visibility: visible; }
    .shell--collapsed .sidebar__top { justify-content: space-between; }
    .shell--collapsed .sidebar__link { justify-content: flex-start; padding-inline: 0.7rem; }
    .shell--collapsed .sidebar__foot { padding-inline: 0.5rem; }
    .shell--collapsed .sidebar__user { justify-content: flex-start; padding-inline: 0.6rem; }

    .shell__backdrop { display: block; }
    .shell--menu-open .shell__backdrop { opacity: 1; pointer-events: auto; }
}

/* --- 07  Command palette (Ctrl/⌘ + K) --- */

.cmdk {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: start center;
    padding: clamp(3rem, 12vh, 8rem) 1rem 1rem;
    background: rgba(10, 21, 48, 0.55);
    backdrop-filter: blur(4px);
    animation: fade-in 0.14s ease both;
}
.cmdk[hidden] { display: none; }
.cmdk__panel {
    inline-size: 100%;
    max-inline-size: 34rem;
    background: var(--surface);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: cmdk-pop 0.2s var(--ease-out) both;
}
@keyframes cmdk-pop {
    from { opacity: 0; transform: translateY(-0.8rem) scale(0.97); }
    to { opacity: 1; transform: none; }
}
.cmdk__field { display: flex; align-items: center; gap: 0.65rem; padding: 0.9rem 1.1rem; border-block-end: 1px solid var(--border); }
.cmdk__field .icon { inline-size: 1.15rem; block-size: 1.15rem; color: var(--gold-600); flex: none; }
.cmdk__field input {
    flex: 1;
    font: inherit;
    font-size: 1rem;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    min-inline-size: 0;
}
.cmdk__list { max-block-size: 22rem; overflow-y: auto; padding: 0.4rem; margin: 0; list-style: none; }
.cmdk__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    inline-size: 100%;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.cmdk__item:hover, .cmdk__item.is-active { background: rgba(201, 162, 39, 0.12); color: var(--brand-900); }
.cmdk__item.is-active { box-shadow: inset 2px 0 0 var(--gold-500); }
.cmdk__crumb { color: var(--muted); font-size: 0.82rem; }
.cmdk__crumb::before { content: "‹ "; }
.cmdk__empty { padding: 1.5rem; text-align: center; color: var(--muted); font-size: 0.9rem; }
.cmdk__foot {
    display: flex;
    gap: 1rem;
    padding: 0.55rem 1.1rem;
    border-block-start: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.78rem;
}

/* --- 08  Auth --- */

/* Base shell: a centred card on maroon. Still what the error and not-found
   screens use. */
.auth {
    position: relative;
    overflow: hidden;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: radial-gradient(120% 120% at 100% 0%, var(--brand-700), var(--brand-950) 62%);
}

/* Sign-in only: brand on one side, form on the other. The form column keeps a
   fixed, comfortable width — a sign-in box stretched across a 27" monitor is
   the single most common way this screen goes wrong. */
.auth--split {
    grid-template-columns: 1.05fr minmax(24rem, 1fr);
    place-items: stretch;
    padding: 0;
    background: var(--surface);
}

.auth__brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.75rem, 3vw, 3.25rem);
    background: radial-gradient(120% 120% at 100% 0%, var(--brand-700), var(--brand-950) 62%);
    color: var(--on-dark);
}
/* The diamond lattice from the sidebar, at a larger scale. */
.auth__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    background-image:
        linear-gradient(45deg, rgba(201, 162, 39, 0.06) 25%, transparent 25%, transparent 75%, rgba(201, 162, 39, 0.06) 75%),
        linear-gradient(45deg, rgba(201, 162, 39, 0.06) 25%, transparent 25%, transparent 75%, rgba(201, 162, 39, 0.06) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
    mask-image: radial-gradient(120% 90% at 100% 0%, rgba(0, 0, 0, 0.85), transparent 70%);
    -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, rgba(0, 0, 0, 0.85), transparent 70%);
}
.auth__brand > * { position: relative; z-index: 1; }

.auth__logo { display: block; block-size: 2.6rem; inline-size: auto; }

.auth__pitch { max-inline-size: 30rem; }
.auth__eyebrow {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-400);
}
.auth__headline {
    margin: 0 0 1.5rem;
    font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #fff;
}
.auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.auth__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--on-dark-muted);
    font-size: 0.95rem;
    line-height: 1.65;
    animation: point-in 0.5s var(--ease-out) both;
}
.auth__points li:nth-child(2) { animation-delay: 0.1s; }
.auth__points li:nth-child(3) { animation-delay: 0.2s; }
@keyframes point-in {
    from { opacity: 0; transform: translateY(0.6rem); }
    to { opacity: 1; transform: none; }
}
.auth__tick {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    margin-block-start: 0.15rem;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.18);
    border: 1px solid rgba(201, 162, 39, 0.45);
    color: var(--gold-300);
}
.auth__tick .icon { inline-size: 0.8rem; block-size: 0.8rem; }
.auth__brand-foot { margin: 0; color: rgba(169, 180, 210, 0.6); font-size: 0.82rem; letter-spacing: 0.05em; }

/* --- form side --- */
.auth__panel {
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 3vw, 3rem);
    background: var(--surface);
}
.auth__form {
    inline-size: 100%;
    max-inline-size: 23rem;
    animation: pop-in 0.4s var(--ease-out) both;
}
.auth__form h1 { font-size: 1.6rem; margin-block-end: 0.35rem; }
.auth__sub { color: var(--muted); margin-block-end: 1.75rem; }

.auth__step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-block-end: 0.85rem;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid rgba(201, 162, 39, 0.35);
    color: var(--gold-700);
    font-size: 0.78rem;
    font-weight: 700;
}
.auth__step .icon { inline-size: 0.9rem; block-size: 0.9rem; }

.auth__submit {
    inline-size: 100%;
    margin-block-start: 0.35rem;
    padding-block: 0.8em;
    font-size: 1rem;
}
.auth__submit .icon { transition: transform 0.22s var(--ease-out); }
.auth__submit:hover .icon { transform: translateX(-0.2rem); }
html[dir="ltr"] .auth__submit:hover .icon { transform: translateX(0.2rem); }

/* Posting state: the button is disabled from JS a tick after submit, so a
   double-click cannot post the credentials twice. */
.auth__submit.is-busy { pointer-events: none; opacity: 0.85; }
.auth__submit.is-busy .icon { display: none; }
.auth__submit.is-busy::before {
    content: "";
    inline-size: 1.05rem;
    block-size: 1.05rem;
    border-radius: 50%;
    border: 2px solid rgba(38, 8, 16, 0.25);
    border-block-start-color: var(--brand-900);
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.auth__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-start: 1.1rem;
    color: var(--muted);
    font-size: 0.9rem;
}
.auth__back:hover { color: var(--gold-600); }
.auth__back .icon { inline-size: 0.9rem; block-size: 0.9rem; }

.auth__note {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 2.25rem 0 0;
    padding-block-start: 1.1rem;
    border-block-start: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
}
.auth__note .icon { inline-size: 0.95rem; block-size: 0.95rem; color: var(--ok); flex: none; }

/* --- inputs with a leading icon and a trailing action --- */
.field__control { position: relative; display: flex; align-items: center; }
.field__ico {
    position: absolute;
    inset-inline-start: 0.85rem;
    display: inline-grid;
    place-items: center;
    color: var(--muted);
    pointer-events: none;
    transition: color 0.18s ease;
}
.field__ico .icon { inline-size: 1.05rem; block-size: 1.05rem; }
.field__control input { padding-inline-start: 2.65rem; }
.field__control:focus-within .field__ico { color: var(--gold-600); }

.field__toggle {
    position: absolute;
    inset-inline-end: 0.4rem;
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.field__toggle:hover { background: var(--surface-3); color: var(--brand-900); }
.field__toggle .icon { inline-size: 1.05rem; block-size: 1.05rem; }
.field__control:has(.field__toggle) input { padding-inline-end: 2.6rem; }
/* The button shows the action available, so the eye is hidden once revealed. */
.field__toggle-off { display: none; }
.field__toggle[aria-pressed="true"] .field__toggle-on { display: none; }
.field__toggle[aria-pressed="true"] .field__toggle-off { display: inline-grid; }
.field__toggle[aria-pressed="true"] { color: var(--gold-700); }

/* The one-time code: wide tracking so six digits are checked at a glance. */
.field__control--code input {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-align: center;
    padding-inline: 2.65rem;
    font-variant-numeric: tabular-nums;
}
.field__control--code input::placeholder { letter-spacing: 0.4em; font-weight: 500; color: #c3c9d8; }

.field__caps {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.1rem 0 0;
    color: var(--warn);
    font-size: 0.8rem;
    font-weight: 600;
}
.field__caps .icon { inline-size: 0.9rem; block-size: 0.9rem; }

@media (max-width: 62rem) {
    /* The brand column becomes a compact header so the form stays above the fold. */
    .auth--split { grid-template-columns: 1fr; }
    .auth__brand {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.1rem 1.35rem;
    }
    .auth__pitch, .auth__brand-foot { display: none; }
    .auth__logo { block-size: 2.1rem; }
    .auth__panel { padding-block: 2.5rem; align-items: start; }
}

.auth__aurora { position: absolute; inset: 0; pointer-events: none; }
.auth__aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(70px); }
.auth__aurora span:nth-child(1) {
    inline-size: 26rem; block-size: 26rem; inset-block-start: -8rem; inset-inline-end: -6rem;
    background: radial-gradient(circle, var(--gold-500), transparent 68%); opacity: 0.35;
    animation: drift 18s ease-in-out infinite alternate;
}
.auth__aurora span:nth-child(2) {
    inline-size: 24rem; block-size: 24rem; inset-block-end: -10rem; inset-inline-start: -6rem;
    background: radial-gradient(circle, #3a5ba0, transparent 68%); opacity: 0.4;
    animation: drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-2rem, 2.5rem, 0) scale(1.12); }
}
.auth-card {
    position: relative;
    inline-size: 100%;
    max-inline-size: 25rem;
    background: var(--surface);
    border: 1px solid rgba(201, 162, 39, 0.25);
    border-radius: var(--radius-lg);
    padding: 2.2rem 2rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
    animation: pop-in 0.35s var(--ease-out) both;
}
.auth-card__logo { display: block; margin-inline: auto; block-size: 3.2rem; inline-size: auto; margin-block-end: 1rem; }
.auth-card h1 { font-size: 1.45rem; }
.auth-card__sub { color: var(--muted); margin-block-end: 1.5rem; }
.auth-card .field { text-align: start; }
.auth-card__submit { inline-size: 100%; margin-block-start: 0.5rem; }
.auth-card--message { text-align: center; }
.auth-card--message .btn { margin-block-start: 1rem; }
.auth-card__back { display: inline-block; margin-block-start: 1rem; color: var(--muted); font-size: 0.9rem; }

/* --- 09  Dashboard --- */

.dash { position: relative; }
.dash-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-block-start: 1.75rem;
}
.stat-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: transform 0.22s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.25s ease;
}
/* Gold accent bar wipes in along the top edge on hover. */
.stat-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: var(--accent-gradient);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform 0.35s var(--ease-out);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(201, 162, 39, 0.4); }
.stat-card:hover::before { transform: scaleX(1); }
.stat-card__label { font-size: 0.83rem; color: var(--muted); font-weight: 600; }
.stat-card__value { font-size: 1.65rem; font-weight: 700; color: var(--brand-900); letter-spacing: -0.02em; line-height: 1.2; }
.stat-card--soon .stat-card__value { color: var(--gold-600); }
.stat-card__value--sm { font-size: 1.05rem; word-break: break-all; }

/* A line under a figure that says what it counts. Cheap to add and it stops a
   number being read as the one beside it — «يصلك كل شهر» and «دفعات سنوية» are
   different money, and only this line says so on the card itself. */
.stat-card__note { font-size: 0.72rem; color: var(--muted); line-height: 1.5; }
.stat-card__value--neg { color: var(--danger); }
.stat-card__deco {
    position: absolute;
    inset-block-start: -1.4rem;
    inset-inline-end: -1.4rem;
    inline-size: 4rem;
    block-size: 4rem;
    border: 1.5px solid rgba(201, 162, 39, 0.3);
    border-radius: 8px;
    transform: rotate(45deg);
    pointer-events: none;
    transition: transform 0.6s var(--ease-out), border-color 0.4s ease;
}
.stat-card:hover .stat-card__deco { transform: rotate(135deg) scale(1.1); border-color: rgba(201, 162, 39, 0.6); }

/* Navigation cards (dashboard shortcuts + settings tiles) */
.nav-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-block-start: 1.75rem; }
.nav-cards--tiles { margin-block-start: 1.5rem; }
.nav-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    transition: transform 0.22s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.25s ease;
}
.nav-card:hover {
    text-decoration: none;
    color: var(--ink);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(201, 162, 39, 0.45);
}
.nav-card__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: 2.9rem;
    block-size: 2.9rem;
    border-radius: 12px;
    background: var(--accent-gradient-soft);
    border: 1px solid rgba(201, 162, 39, 0.22);
    color: var(--gold-600);
    transition: background 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-spring);
}
.nav-card:hover .nav-card__icon { background: var(--accent-gradient); color: var(--brand-900); transform: rotate(-6deg) scale(1.06); }
.nav-card__icon .icon { inline-size: 1.45rem; block-size: 1.45rem; }
.nav-card__body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-inline-size: 0; }
.nav-card__title { font-weight: 700; color: var(--brand-900); font-size: 1rem; }
.nav-card__desc { color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.nav-card__go { flex: none; color: var(--muted); transition: transform 0.22s var(--ease-out), color 0.2s ease; }
.nav-card__go .icon { inline-size: 1.1rem; block-size: 1.1rem; }
.nav-card:hover .nav-card__go { color: var(--gold-600); transform: translateX(-0.3rem); }
html[dir="ltr"] .nav-card:hover .nav-card__go { transform: translateX(0.3rem); }

/* --- 10  Panels + page scaffold --- */

.panel {
    position: relative;
    margin-block-start: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem;
    box-shadow: var(--shadow-sm);
}
.panel h2 { font-size: 1.15rem; color: var(--brand-900); margin: 0 0 1rem; }
.panel--flush { padding: 0; overflow: hidden; }
.panel--inset {
    margin-block-start: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

/* `backwards`, never `both`.
   An animation that fills *forwards* leaves the element with an animated
   `transform` for good — Chrome then reports `matrix(1, 0, 0, 1, 0, 0)` rather
   than `none`, and any non-none transform makes the element a containing block
   for `position: fixed` descendants. Every modal in the portal is inside a
   `.page`, so with `both` the overlay was being laid out against the page box
   instead of the viewport: it started ~96px down, while its `max-height:
   calc(100vh - 3rem)` was still measured against the full viewport. Short
   dialogs fit anyway and hid it; the permissions editor is 3,800px tall, so its
   footer — the Save button — fell off the bottom of the screen.
   `backwards` gives the same entrance and leaves `transform: none` behind. */
.page { position: relative; animation: page-in 0.32s var(--ease-out) backwards; }
@keyframes page-in {
    from { opacity: 0; transform: translateY(0.6rem); }
    to { opacity: 1; transform: none; }
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.85rem;
    margin-block-end: 0.5rem;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--gold-600); }
.crumbs > * + *::before { content: "/"; margin-inline-end: 0.45rem; color: var(--border-strong); }

.placeholder {
    margin-block-start: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
}
.placeholder__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 3.4rem;
    block-size: 3.4rem;
    border-radius: 14px;
    background: var(--accent-gradient-soft);
    color: var(--gold-600);
}
.placeholder__icon .icon { inline-size: 1.7rem; block-size: 1.7rem; }
.placeholder__badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0.2em 0.9em;
    border-radius: 999px;
    color: var(--gold-700);
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid rgba(201, 162, 39, 0.35);
}

/* --- 11  Tables / DataTable --- */

.dt { display: flex; flex-direction: column; gap: 0.85rem; }

/* Fullscreen: the table takes the viewport, chrome and all. */
.dt--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 250;
    margin: 0;
    padding: 1.25rem;
    background: var(--bg);
    overflow: auto;
    animation: fade-in 0.18s ease both;
}

.dt__toolbar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.dt__search { position: relative; flex: 1; min-inline-size: 13rem; display: flex; align-items: center; }
.dt__search > .icon {
    position: absolute;
    inset-inline-start: 0.75rem;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    color: var(--muted);
    pointer-events: none;
}
.dt__search input {
    inline-size: 100%;
    font: inherit;
    font-size: 0.92rem;
    color: var(--ink);
    padding: 0.55em 0.9em;
    padding-inline-start: 2.35rem;
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    background: var(--surface);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.dt__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.dt__search input:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
    outline: none;
}
.dt__search-clear {
    position: absolute;
    inset-inline-end: 0.4rem;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--muted);
    cursor: pointer;
}
.dt__search-clear:hover { background: var(--danger-bg); color: var(--danger); }
.dt__search-clear .icon { inline-size: 0.85rem; block-size: 0.85rem; }

.dt__tools { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dt__sep { inline-size: 1px; block-size: 1.5rem; background: var(--border); }

.dt__view { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.dt__view-btn {
    display: inline-grid;
    place-items: center;
    inline-size: 2.2rem;
    block-size: 2.05rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.dt__view-btn + .dt__view-btn { border-inline-start: 1px solid var(--border); }
.dt__view-btn:hover { color: var(--brand-900); background: var(--surface-3); }
.dt__view-btn.is-active { background: var(--brand-800); color: var(--gold-300); }
.dt__view-btn .icon { inline-size: 1.05rem; block-size: 1.05rem; }

/* Dropdown menus (column picker, facet filters, density) */
.dt__menu { position: relative; }
/* Invisible catcher so the next click anywhere dismisses the open menu. */
.dt__menu-backdrop { position: fixed; inset: 0; z-index: 39; }
.dt__menu-pop {
    position: absolute;
    inset-block-start: calc(100% + 0.4rem);
    inset-inline-end: 0;
    z-index: 40;
    min-inline-size: 13rem;
    max-block-size: 20rem;
    overflow-y: auto;
    padding: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: pop-in 0.16s var(--ease-out) both;
}
.dt__menu-title {
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.dt__menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    inline-size: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    text-align: start;
    cursor: pointer;
    transition: background 0.14s ease;
}
.dt__menu-item:hover { background: rgba(201, 162, 39, 0.1); }
.dt__menu-item .icon { inline-size: 1rem; block-size: 1rem; color: var(--gold-600); }
.dt__menu-item.is-on { font-weight: 700; color: var(--brand-900); }
.dt__menu-item input { accent-color: var(--gold-600); inline-size: 1rem; block-size: 1rem; }

/* Bulk-selection bar: slides in only when rows are ticked. */
.dt__bulk {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.16), rgba(201, 162, 39, 0.06));
    border: 1px solid rgba(201, 162, 39, 0.4);
    animation: bulk-in 0.22s var(--ease-out) both;
}
@keyframes bulk-in {
    from { opacity: 0; transform: translateY(-0.4rem); }
    to { opacity: 1; transform: none; }
}
.dt__bulk-count { font-weight: 700; color: var(--brand-900); }
.dt__bulk-spacer { flex: 1; }

.dt__chips { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.35rem 0.2rem 0.7rem;
    border-radius: 99px;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-2);
}
.chip button {
    display: grid;
    place-items: center;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.chip button:hover { background: var(--danger-bg); color: var(--danger); }
.chip button .icon { inline-size: 0.7rem; block-size: 0.7rem; }

/* The table itself */
.table-wrap {
    position: relative;
    overflow: auto;
    max-block-size: 70vh;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overscroll-behavior-x: contain;
}

.table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.table th, .table td {
    padding: 0.7rem 0.9rem;
    text-align: start;
    border-block-end: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: middle;
}

/* Sticky header: stays put while the body scrolls. */
.table thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: linear-gradient(180deg, #f7f8fc, #eef1f7);
    color: var(--ink-2);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-block-end: 1px solid var(--border-strong);
    padding-block: 0.72rem;
    user-select: none;
}
.table thead th::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    block-size: 2px;
    background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.55), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.table thead th.is-sorted::after { opacity: 1; }

.table tbody tr { transition: background 0.14s ease, box-shadow 0.14s ease; }
.table tbody tr:nth-child(even) { background: rgba(244, 246, 250, 0.6); }
.table tbody tr:last-child td { border-block-end: 0; }

/* Hover paints the row gold and lights an edge marker. */
.table tbody tr:hover { background: rgba(201, 162, 39, 0.07); }
.table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--gold-500); }
html[dir="ltr"] .table tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 var(--gold-500); }

.table tbody tr.is-selected { background: rgba(201, 162, 39, 0.14); }
.table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--gold-600); }
.table tbody tr.is-clickable { cursor: pointer; }

/* Compact density */
.dt--dense .table th, .dt--dense .table td { padding-block: 0.4rem; padding-inline: 0.7rem; font-size: 0.855rem; }
/* Wrap long text instead of clipping it to an ellipsis */
.dt--wrap .table td { white-space: normal; min-inline-size: 10rem; overflow: visible; }

/* Column alignment + type hints (set per column) */
.table .col--center { text-align: center; }
.table .col--end { text-align: end; }
.table .col--num { text-align: end; font-variant-numeric: tabular-nums; direction: ltr; }
html[dir="rtl"] .table .col--num { text-align: start; }

/* Sortable headers */
.table th.is-sortable { cursor: pointer; }
.table th.is-sortable:hover { color: var(--brand-900); background: linear-gradient(180deg, #f1f3fa, #e6eaf4); }
.th-inner { display: inline-flex; align-items: center; gap: 0.35rem; }
.dt__sort { display: inline-grid; place-items: center; color: var(--border-strong); transition: color 0.18s ease, transform 0.22s var(--ease-spring); }
.dt__sort .icon { inline-size: 0.85rem; block-size: 0.85rem; }
.table th.is-sortable:hover .dt__sort { color: var(--muted); }
.dt__sort.is-on { color: var(--gold-600); }
.dt__sort.is-on.is-desc { transform: rotate(180deg); }
.dt__sort-rank {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--gold-700);
    background: rgba(201, 162, 39, 0.18);
    border-radius: 4px;
    padding: 0 0.25em;
}

/* Drag grip for column resizing (wired up in admin.js) */
.dt__grip {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 6px;
    cursor: col-resize;
    z-index: 3;
    touch-action: none;
}
.dt__grip::before {
    content: "";
    position: absolute;
    inset-block: 25%;
    inset-inline-start: 2px;
    inline-size: 1px;
    background: var(--border-strong);
    transition: background 0.15s ease, inset-block 0.15s ease;
}
.dt__grip:hover::before, .dt__grip.is-dragging::before { background: var(--gold-500); inset-block: 10%; inline-size: 2px; }
.table th { position: relative; }
.table.is-resizing { user-select: none; cursor: col-resize; }

/* Once a column is dragged the table switches to fixed layout (see admin.js);
   without this, over-long cell text would spill across its neighbour. */
.table td { overflow: hidden; text-overflow: ellipsis; }

/* Selection column */
.dt__check-head, .dt__check { inline-size: 1%; padding-inline-end: 0.4rem; }
.dt__check input, .dt__check-head input {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    accent-color: var(--gold-600);
    cursor: pointer;
    vertical-align: middle;
}

.dt__actions-head { inline-size: 1%; text-align: end; }
.dt__actions { inline-size: 1%; white-space: nowrap; }
td.dt__actions { display: table-cell; }
td.dt__actions > * { display: inline-flex; gap: 0.35rem; }

/* Footer summary band */
.table tfoot td {
    position: sticky;
    inset-block-end: 0;
    z-index: 2;
    background: linear-gradient(180deg, #f7f8fc, #eef1f7);
    border-block-start: 1px solid var(--border-strong);
    border-block-end: 0;
    font-weight: 700;
    color: var(--brand-900);
}

/* Cards view */
.dt__cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.dt__card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.05rem;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.2s var(--ease-out);
    animation: pop-in 0.3s var(--ease-out) both;
}
.dt__card:hover { border-color: rgba(201, 162, 39, 0.45); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.dt__card.is-selected { border-color: var(--gold-500); box-shadow: var(--glow-gold); }

.dt__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    color: var(--muted);
    padding: 3rem 1rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
}
.dt__empty .icon { inline-size: 2rem; block-size: 2rem; color: var(--border-strong); }

/* Loading skeleton — shimmer rows instead of a bare "جارٍ التحميل" */
.dt__skeleton { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.4rem 0; }
.sk-row {
    block-size: 2.35rem;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--surface-3) 25%, #eceef5 37%, var(--surface-3) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
}
.sk-row:nth-child(odd) { opacity: 0.75; }
@keyframes shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* Pager */
.dt__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-block-start: 0.15rem;
}
.dt__pageinfo { color: var(--muted); font-size: 0.865rem; }
.dt__pageinfo strong { color: var(--brand-900); font-weight: 700; }
.dt__pages { display: inline-flex; align-items: center; gap: 0.3rem; }
.dt__page-btn {
    display: inline-grid;
    place-items: center;
    min-inline-size: 2.1rem;
    block-size: 2.1rem;
    padding-inline: 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--brand-700);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s var(--ease-spring);
}
.dt__page-btn:hover:not(:disabled) { border-color: var(--gold-500); background: rgba(201, 162, 39, 0.09); transform: translateY(-1px); }
.dt__page-btn:disabled { opacity: 0.4; cursor: default; }
.dt__page-btn.is-current {
    background: var(--accent-gradient);
    border-color: var(--gold-600);
    color: var(--brand-900);
    box-shadow: var(--shadow-xs);
}
.dt__page-btn .icon { inline-size: 1rem; block-size: 1rem; }
.dt__gap { color: var(--muted); padding-inline: 0.15rem; }
.dt__pagesize { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.85rem; }
.dt__pagesize select {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

/* --- 12  Boards, chips, badges, lists --- */

.badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.15em 0.7em;
    border-radius: 999px;
}
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--off { background: var(--danger-bg); color: var(--danger); }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.18em 0.7em;
    border-radius: 999px;
    background: rgba(38, 55, 95, 0.08);
    color: var(--brand-700);
    border: 1px solid transparent;
    white-space: nowrap;
}
/* A dot leads each tag so status reads without relying on colour alone. */
.tag::before {
    content: "";
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
    flex: none;
}
.tag--ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(26, 127, 69, 0.2); }
.tag--info { background: var(--info-bg); color: var(--info); border-color: rgba(28, 79, 176, 0.18); }
.tag--warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(138, 90, 0, 0.2); }
.tag--danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(180, 35, 24, 0.2); }
.tag--gold { background: rgba(201, 162, 39, 0.14); color: var(--gold-700); border-color: rgba(201, 162, 39, 0.35); }

/* Pipeline board (opportunities) */
.pipeline { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-block-start: 1.5rem; }
.pipeline__col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.pipeline__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 0.75rem; font-weight: 700; color: var(--brand-900); }
.pipeline__count {
    font-weight: 800;
    color: var(--brand-900);
    background: var(--surface-3);
    border-radius: 999px;
    padding: 0.05em 0.65em;
    font-size: 0.82rem;
}
.pipeline__cards { display: flex; flex-direction: column; gap: 0.55rem; min-block-size: 3rem; }
.pipeline__empty { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 0.8rem 0; margin: 0; }
.pipeline__col--over {
    border-color: var(--gold-600);
    background: rgba(201, 162, 39, 0.06);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.2);
}
.pipeline__col--over .pipeline__cards { min-block-size: 4.5rem; }
.board-hint { color: var(--muted); font-size: 0.85rem; }

/* The whole card is the control — it opens the "what happened with this person?"
   question. The bin lives in the name row and stops the click from reaching the
   card. Done this way rather than as two side-by-side buttons because a <button>
   inside a <button> is invalid HTML, and browsers disagree about which one owns
   the click. */
.lead-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.14s var(--ease-out);
}

/* A lead nobody has answered for a week reads as a problem, not a card. */
.lead-card.is-stale { border-color: var(--danger); background: var(--danger-bg); }
.lead-card:hover {
    text-decoration: none;
    border-color: rgba(201, 162, 39, 0.5);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.lead-card:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* The name and the bin share a row, so the bin never claims a line of its own. */
.lead-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.lead-card__top .lead-card__name { flex: 1 1 auto; min-inline-size: 0; }

.lead-card__del {
    flex: 0 0 auto;
    /* Present but quiet: it must not compete with the name it sits beside. */
    opacity: 0.45;
    transition: opacity 0.15s ease;
}
.lead-card:hover .lead-card__del,
.lead-card__del:hover,
.lead-card__del:focus-visible { opacity: 1; }
.lead-card__name { color: var(--brand-900); font-weight: 600; }
.lead-card__meta { color: var(--muted); font-size: 0.8rem; }
.lead-card__contact { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; }

.task-card { cursor: default; }
.task-card[draggable="true"] { cursor: grab; }
.task-card[draggable="true"]:active { cursor: grabbing; }
.task-card--dragging { opacity: 0.4; border-style: dashed; }
.task-card--dragging * { pointer-events: none; }
.task-card__title { color: var(--brand-900); font-weight: 600; }
.task-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-block-start: 0.45rem; }
.task-card__due { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.task-card__due--late { color: var(--danger); font-weight: 600; }
.task-card__actions { display: flex; gap: 0.15rem; }
.task-card__actions .icon-btn { inline-size: 1.75rem; block-size: 1.75rem; }

/* Reports: status breakdown bars */
.report-section { margin-block-start: 2rem; }
.report-section > h2 { font-size: 1.1rem; color: var(--brand-900); margin-block-end: 0.9rem; }
.report-bars { display: flex; flex-direction: column; gap: 0.7rem; }
.report-bar { display: grid; grid-template-columns: 8rem 1fr 3rem; align-items: center; gap: 0.75rem; }
.report-bar__label { color: var(--ink); font-size: 0.9rem; }
.report-bar__track { background: var(--surface-3); border-radius: 999px; block-size: 0.6rem; overflow: hidden; }
.report-bar__fill {
    /* Was a bare <span>, so it stayed inline and every bar rendered at zero width —
       the track showed, the fill never did. Inline boxes ignore width, height and
       transform alike, which also silently killed the grow animation below. */
    display: block;
    background: linear-gradient(90deg, var(--gold-500), var(--brand-800));
    block-size: 100%;
    border-radius: 999px;
    animation: bar-grow 0.7s var(--ease-out) both;
    transform-origin: inline-start;
}
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.report-bar__count { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; text-align: start; }

/* --- 12b  Charts + report layout --------------------------------------------
   Every chart is inline SVG or plain CSS: no chart library, no CDN, nothing to
   load before the first paint. The colours arrive as inline `fill` / `background`
   from the page so the palette lives beside the data it encodes, and this file
   only ever styles the chrome — grid, axes, labels, spacing.
   Text here never wears a series colour; identity comes from the swatch next to it.
   ------------------------------------------------------------------------- */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-head > div { min-inline-size: 0; }
.page-head p { margin: 0; }

.period-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.period-pill .icon { inline-size: 0.95rem; block-size: 0.95rem; }

/* The headline block: one figure leads, everything else supports it. */
.report-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.5rem 2rem;
    align-items: center;
}
.report-head__lead { display: flex; flex-direction: column; gap: 0.3rem; min-inline-size: 0; }
.report-head__label { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.report-head__value {
    /* The one hero figure on the page. Proportional digits on purpose: tabular
       widths make a number like 121 look gappy at display size. */
    font-size: clamp(3rem, 2.2rem + 2.4vw, 3.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--brand-900);
}
.report-head__value.is-neg { color: var(--danger); }
.report-head__sub { color: var(--muted); font-size: 0.87rem; line-height: 1.55; }
.report-head__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-inline-size: 0;
}
.report-head__reading {
    margin: 0;
    padding-inline-start: 0.9rem;
    border-inline-start: 3px solid var(--gold-500);
    color: var(--ink-2);
    font-size: 0.92rem;
    line-height: 1.7;
}

.delta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-start: 0.35rem;
    font-size: 0.87rem;
    font-weight: 600;
}
/* Direction is carried by the arrow and the word beside it, never by hue alone. */
.delta .icon { inline-size: 0.9rem; block-size: 0.9rem; }
.delta--up { color: var(--ok); }
.delta--down { color: var(--danger); }
.delta--down .icon { transform: rotate(180deg); }

.mini { display: flex; flex-direction: column; gap: 0.35rem; }
.mini__label { color: var(--muted); font-size: 0.8rem; font-weight: 600; }

.report-cols {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    margin-block-start: 1.75rem;
}
.report-cols > .panel { margin-block-start: 0; }

.panel__head { margin-block-end: 1.15rem; }
.panel__head h2 { margin: 0 0 0.25rem; }
.panel__hint { margin: 0; color: var(--muted); font-size: 0.87rem; line-height: 1.6; }
.panel__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-start: 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-700);
}
.panel__more:hover { color: var(--gold-600); }
.panel__more .icon { inline-size: 1rem; block-size: 1rem; }

/* --- chart chrome --- */

.chart { margin: 0; }
.chart__svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem; margin-block-end: 0.85rem; }
.chart__key { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-2); font-size: 0.85rem; }
.chart__swatch { inline-size: 0.72rem; block-size: 0.72rem; border-radius: 3px; flex: none; }

.chart__grid { stroke: var(--border); stroke-width: 1; }
.chart__axis { stroke: var(--border-strong); stroke-width: 1; }
.chart__tick,
.chart__label {
    fill: var(--muted);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    direction: rtl;
}
.chart__label--sub { font-size: 9.5px; fill: var(--border-strong); }
.chart__value { fill: var(--brand-900); font-size: 11.5px; font-weight: 700; direction: rtl; }

/* The hover layer: the band lights up, and each column carries a native title.
   A Blazor mouse handler would round-trip to the server for every column. */
.chart__band { fill: transparent; }
.chart__group:hover .chart__band { fill: rgba(38, 8, 16, 0.05); }
.chart__bar { transition: opacity 0.15s ease; }
.chart__svg:hover .chart__group:not(:hover) .chart__bar { opacity: 0.55; }

.chart__empty { margin: 0; padding-block: 2rem; text-align: center; color: var(--muted); }

.chart__data { margin-block-start: 1rem; }
.chart__data > summary {
    cursor: pointer;
    color: var(--brand-700);
    font-size: 0.87rem;
    font-weight: 600;
    inline-size: fit-content;
    padding-block: 0.25rem;
    list-style-position: inside;
}
.chart__data > summary:hover { color: var(--gold-600); }
.chart__data .table-wrap { margin-block-start: 0.75rem; }
.chart__data .table { font-size: 0.87rem; }

/* --- sparkline --- */

.spark { display: block; inline-size: 100%; max-inline-size: 11rem; block-size: auto; }
.spark__area { opacity: 0.1; }
.spark__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* The 2px ring is the surface, so the end dot stays legible over its own line. */
.spark__dot { stroke: var(--surface); stroke-width: 2; }

/* --- stacked bar (ordered parts of one whole) --- */

.stackbar { margin: 0; }
.stackbar__track {
    display: flex;
    gap: 2px;
    block-size: 1.2rem;
    border-radius: 999px;
    overflow: hidden;
}
.stackbar__seg { flex-basis: 0; min-inline-size: 3px; }
.stackbar__legend { margin-block-start: 1rem; }
.stackbar__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 2.8rem;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.45rem;
    border-block-end: 1px solid var(--border);
    font-size: 0.89rem;
}
.stackbar__row:last-child { border-block-end: 0; }
.stackbar__row.is-empty { opacity: 0.45; }
.stackbar__key { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-2); min-inline-size: 0; }
.stackbar__amount { font-weight: 700; color: var(--brand-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stackbar__share { color: var(--muted); font-size: 0.83rem; text-align: start; font-variant-numeric: tabular-nums; }

/* --- meter (one value against a threshold) --- */

.meter { margin-block-start: 1.5rem; }
.meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.meter__label { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.meter__value { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.meter__value.is-ok { color: var(--ok); }
.meter__value.is-warn { color: var(--warn); }
.meter__value.is-bad { color: var(--danger); }
.meter__track {
    position: relative;
    margin-block-start: 0.5rem;
    block-size: 0.55rem;
    border-radius: 999px;
    /* Unfilled track is a lighter step of the fill's own ramp, so the state reads
       across the whole bar rather than only where it happens to stop. */
    background: var(--surface-3);
    overflow: hidden;
}
.meter__fill { display: block; block-size: 100%; border-radius: 999px; }
.meter__fill.is-ok { background: var(--ok); }
.meter__fill.is-warn { background: var(--warn); }
.meter__fill.is-bad { background: var(--danger); }
/* The benchmark, cut into the bar as a gap in the surface colour rather than drawn
   on top of it — so it reads at any fill level instead of vanishing into the fill. */
.meter__mark {
    position: absolute;
    inset-block: -1px;
    inline-size: 3px;
    background: var(--surface);
    border-radius: 1px;
}
.meter__note { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.6; }

/* --- funnel (ordered stages, one hue stepped by stage) --- */

.funnel { display: flex; flex-direction: column; gap: 0.85rem; }
.funnel__step { display: grid; grid-template-columns: 7rem 1fr 2.5rem; align-items: center; gap: 0.75rem; }
.funnel__label { color: var(--ink-2); font-size: 0.89rem; }
.funnel__track { background: var(--surface-3); border-radius: 999px; block-size: 0.7rem; overflow: hidden; }
.funnel__fill {
    display: block;
    block-size: 100%;
    border-radius: 999px;
    animation: bar-grow 0.7s var(--ease-out) both;
    transform-origin: inline-start;
}
.funnel__count { font-weight: 700; color: var(--brand-900); font-variant-numeric: tabular-nums; text-align: start; }

/* --- a lone figure, and plain labelled facts --- */

.figure { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 1.25rem; }
.figure__value { font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.025em; color: var(--brand-900); }
.figure__label { color: var(--muted); font-size: 0.9rem; font-weight: 600; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.85rem 1.5rem; margin: 1.25rem 0 0; }
.facts dt { color: var(--muted); font-size: 0.83rem; font-weight: 600; }
.facts dd { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--brand-900); font-variant-numeric: tabular-nums; }
.facts--stack { grid-template-columns: 1fr; gap: 0; margin-block-start: 0; }
.facts--stack > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.7rem;
    border-block-end: 1px solid var(--border);
}
.facts--stack > div:last-child { border-block-end: 0; }

@media (max-width: 46rem) {
    .report-head { grid-template-columns: 1fr; }
    .stackbar__row { grid-template-columns: minmax(0, 1fr) auto; }
    .stackbar__share { display: none; }
    .funnel__step { grid-template-columns: 5.5rem 1fr 2.2rem; }
}

/* --- 12b-2  Select: a dropdown whose open list is ours --------------------
   Everything here styles the list a native <select> never let us touch. Kept
   deliberately close to .combo so the two read as one control with and without
   a search box. ---------------------------------------------------------- */

.sel { position: relative; }

.sel__control {
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.75rem 0.5rem;
    block-size: 2.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.sel__control:hover:not(:disabled) { border-color: var(--gold-500); }
.sel__control:focus-visible,
.sel.is-open .sel__control {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}
.sel__control:disabled { opacity: 0.55; cursor: not-allowed; }

.sel__ico { display: inline-grid; place-items: center; flex: none; color: var(--muted); }
.sel__ico .icon { inline-size: 1rem; block-size: 1rem; }

.sel__label { flex: none; color: var(--muted); font-size: 0.85rem; font-weight: 600; }

/* A filter with a value picked reads as "on" at a glance across a toolbar. */
.sel:has(.sel__clear) .sel__control { border-color: rgba(201, 162, 39, 0.55); background: var(--accent-gradient-soft); }

.sel__clear {
    position: absolute;
    inset-inline-end: 0.4rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sel__clear:hover { background: var(--danger-bg); color: var(--danger); transform: translateY(-50%) scale(1.08); }
.sel__clear .icon { inline-size: 0.85rem; block-size: 0.85rem; }
/* Room for the × so a long label never slides under it. */
.sel:has(.sel__clear) .sel__caret { visibility: hidden; }

.sel__value { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__value.is-placeholder { color: var(--muted); }

.sel__caret { flex: none; color: var(--muted); display: inline-grid; place-items: center; transition: transform 0.2s var(--ease-out); }
.sel__caret .icon { inline-size: 1rem; block-size: 1rem; }
.sel.is-open .sel__caret { transform: rotate(180deg); }

/* In the top layer via `popover`, so the browser's own popover styles apply and
   have to be undone: it defaults to a centred, bordered, auto-sized box. The
   absolute values are the fallback for a browser without popover support, where
   the list stays inside its component. */
/* The UA stylesheet gives every [popover] `inset: 0` and `margin: auto`, which
   with a computed `top` leaves `bottom: 0` in force — the box then stretches from
   the control to the bottom of the screen. Clearing the inset is what lets it
   shrink to its own content again. */
.sel__list:popover-open {
    display: block;
    inset: auto;
    margin: 0;
    border: 1px solid var(--border-strong);
    overflow-y: auto;
}
.sel__list {
    position: absolute;
    z-index: 40;
    inset-inline: 0;
    inset-block-start: calc(100% + 0.3rem);
    inline-size: auto;
    block-size: auto;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    max-block-size: 16rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: sel-drop 0.14s var(--ease-out) both;
}
@keyframes sel-drop {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to { opacity: 1; transform: none; }
}

.sel__option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ink);
}
/* Hover and keyboard land on the same style, so a mouse user and a keyboard
   user are never looking at two different "current" rows. */
.sel__option.is-active { background: var(--accent-gradient-soft); }
.sel__option.is-selected { font-weight: 700; color: var(--brand-900); }

.sel__check { flex: none; inline-size: 1rem; display: inline-grid; place-items: center; color: var(--gold-600); }
.sel__check .icon { inline-size: 0.95rem; block-size: 0.95rem; }

.sel__option-body { display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; flex: 1; }
.sel__option-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__option-hint { color: var(--muted); font-size: 0.78rem; }

/* The page-size picker is a compact one — the numbers are two characters. */
.dt__pagesize { display: flex; align-items: center; }
.dt__pagesize-select { min-inline-size: 9.5rem; }
.dt__pagesize-select .sel__control { block-size: 2.2rem; font-size: 0.87rem; }

/* The package's countable promises, and the locked block beside them. */
.allowance-row {
    display: grid;
    grid-template-columns: 1fr 6rem auto auto;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.5rem;
    border-block-end: 1px solid var(--border);
}
.allowance-row:last-child { border-block-end: 0; }
.allowance-row__name { color: var(--ink); font-size: 0.9rem; }
.allowance-row__qty { text-align: center; }
.allowance-row__unlimited { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

/* Anything inside carries a number the client must never see. The tint is the
   reminder, not the protection — the API redacts these for callers without the key. */
.panel--locked { border-color: rgba(180, 35, 24, 0.35); background: var(--danger-bg); }
.panel--locked h3 { display: flex; align-items: center; gap: 0.45rem; color: var(--danger); }
.panel--locked h3 .icon { inline-size: 1rem; block-size: 1rem; }

/* --- 12c  Roles + permissions -------------------------------------------- */

/* The blocked page. Deliberately calm: a boundary somebody drew on purpose
   should not look like the application broke. */
.denied { text-align: center; padding-block: 2.5rem; }
.denied__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--muted);
    margin-block-end: 1rem;
}
.denied__icon .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.denied h2 { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--brand-900); }
.denied p { max-inline-size: 34rem; margin: 0 auto 1.25rem; color: var(--muted); line-height: 1.75; }

/* "Who is waiting for a role" — an alert, because an employee who cannot work
   is a cost that runs until somebody notices. */
.panel--alert { border-color: rgba(201, 162, 39, 0.5); background: var(--accent-gradient-soft); }
.panel--alert .panel__head h2 { color: var(--gold-700); }

.assign-list { display: flex; flex-direction: column; gap: 0.5rem; }
.assign-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex-wrap: wrap;
}
.assign-row__body { display: flex; flex-direction: column; flex: 1; min-inline-size: 10rem; }
.assign-row__name { font-weight: 700; color: var(--brand-900); display: flex; align-items: center; gap: 0.5rem; }
.assign-row__mail { color: var(--muted); font-size: 0.85rem; }
.assign-row__pick { max-inline-size: 16rem; }

.role-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    margin-block-start: 1.75rem;
}
.role-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.role-card.is-locked { background: var(--surface-2); border-style: dashed; }
.role-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.role-card__name { font-weight: 700; font-size: 1.05rem; color: var(--brand-900); }
.role-card__desc { margin: 0; color: var(--muted); font-size: 0.87rem; line-height: 1.6; min-block-size: 2.7rem; }
.role-card__facts { display: flex; gap: 1.25rem; font-size: 0.85rem; color: var(--muted); }
.role-card__facts strong { color: var(--brand-900); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.role-card__actions { display: flex; align-items: center; gap: 0.5rem; margin-block-start: 0.35rem; }
.role-card__note { color: var(--muted); font-size: 0.8rem; line-height: 1.6; }

/* The editor. Modules collapse so the list stays scannable at ~90 checkboxes. */
.perm-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.85rem;
    border-block-end: 1px solid var(--border);
    margin-block-end: 0.75rem;
}
.perm-toolbar__count { font-weight: 700; color: var(--brand-900); font-variant-numeric: tabular-nums; }
.perm-toolbar__spacer { flex: 1; }

.perm-modules { display: flex; flex-direction: column; gap: 0.5rem; }
.perm-module { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.perm-module > summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem 0.9rem;
    font-weight: 700;
    color: var(--brand-900);
}
.perm-module__name { flex: 1; }
.perm-module__count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface-3);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-variant-numeric: tabular-nums;
}
.perm-module__count.is-on { background: var(--accent-gradient); color: var(--brand-900); }
.perm-module__desc,
.perm-module__routes { margin: 0 0.9rem 0.5rem; color: var(--muted); font-size: 0.83rem; line-height: 1.6; }
.perm-module__routes { font-family: var(--font-mono); direction: ltr; text-align: end; font-size: 0.75rem; }
.perm-module__bulk { display: flex; gap: 0.5rem; padding: 0.5rem 0.9rem 0.85rem; flex-wrap: wrap; }

.perm-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.55rem 0.9rem;
    border-block-start: 1px solid var(--border);
    cursor: pointer;
}
.perm-row:hover { background: var(--surface); }
.perm-row input { margin-block-start: 0.25rem; flex: none; }
.perm-row__body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.perm-row__name { color: var(--ink); font-size: 0.92rem; }
/* The hint is where an action's real weight is stated — signing, purging,
   granting. It is not decoration and must stay legible. */
.perm-row__hint { color: var(--warn); font-size: 0.8rem; line-height: 1.6; }

.perm-scope {
    margin: 0.5rem 0.9rem 0.9rem;
    padding: 0.75rem 0.9rem;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
}
.perm-scope__label { display: block; font-weight: 700; font-size: 0.85rem; color: var(--brand-900); margin-block-end: 0.5rem; }
.perm-scope__choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.perm-scope__choices label { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.87rem; cursor: pointer; }

/* Audit trail */
.audit-time { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.audit-card { display: flex; flex-direction: column; gap: 0.6rem; }
.audit-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.audit-card__time { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.audit-card__target { margin: 0; color: var(--brand-900); font-weight: 600; }
.audit-card__actor { color: var(--muted); font-size: 0.85rem; }

/* Profile */
.profile__head { display: flex; align-items: center; gap: 1rem; margin-block-end: 1.25rem; }
.profile__avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 3.6rem;
    block-size: 3.6rem;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: var(--brand-900);
    font-size: 1.4rem;
    font-weight: 800;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px rgba(201, 162, 39, 0.4);
}
.profile__name { margin: 0 0 0.3rem; font-size: 1.25rem; color: var(--brand-900); }
.profile__role { margin: 0; }
.profile__facts {
    display: grid;
    gap: 0.9rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin: 0 0 1.25rem;
    padding-block: 1.1rem;
    border-block: 1px solid var(--border);
}
.profile__facts dt { color: var(--muted); font-size: 0.8rem; font-weight: 600; margin-block-end: 0.2rem; }
.profile__facts dd { margin: 0; color: var(--brand-900); font-weight: 600; }

/* Staff card (cards view of the users table) */
.staff-card { display: flex; flex-direction: column; gap: 0.85rem; }
.staff-card__top { display: flex; align-items: center; gap: 0.8rem; }
.staff-card__avatar {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: var(--brand-900);
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(201, 162, 39, 0.35);
}
.staff-card__id { display: flex; flex-direction: column; min-inline-size: 0; }
.staff-card__name { color: var(--brand-900); }
.staff-card__email { color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; }
.staff-card__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.staff-card__actions { display: flex; gap: 0.4rem; margin-block-start: 0.2rem; }

/* --- 13  Modals --- */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(10, 21, 48, 0.55);
    backdrop-filter: blur(4px);
    animation: fade-in 0.15s ease both;
}
/* A column that never outgrows the screen: the body scrolls, the header and the
   footer are laid out as flex siblings and therefore cannot leave the viewport.
   Previously the whole dialog scrolled with a sticky head and foot — which works
   only while the dialog itself is fully on screen, and stops working the moment
   anything places it even slightly off. A form this long must always show its
   Save button. dvh so mobile browser chrome cannot eat the footer either. */
.modal {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: 34rem;
    max-block-size: calc(100vh - 3rem);
    max-block-size: calc(100dvh - 3rem);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(201, 162, 39, 0.28);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: modal-pop 0.22s var(--ease-out) both;
}
.modal--sm { max-inline-size: 25rem; }
.modal--lg { max-inline-size: 52rem; }
.modal:focus { outline: none; }

.modal__head {
    flex: none;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.05rem 1.35rem;
    border-block-end: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
/* Gold hairline across the header — the same rule that sits under the mark. */
.modal__head::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 1.35rem;
    block-size: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-500), transparent);
}
.modal--danger .modal__head::after { background: linear-gradient(90deg, var(--danger), transparent); }

.modal__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 12px;
    background: var(--accent-gradient-soft);
    border: 1px solid rgba(201, 162, 39, 0.28);
    color: var(--gold-600);
}
.modal__icon .icon { inline-size: 1.2rem; block-size: 1.2rem; }
.modal--danger .modal__icon {
    background: var(--danger-bg);
    border-color: #f3bdb6;
    color: var(--danger);
}

.modal__heading { flex: 1; min-inline-size: 0; }
.modal__title { margin: 0; font-size: 1.1rem; color: var(--brand-900); font-weight: 700; letter-spacing: -0.01em; }
.modal__sub { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.modal__close {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.2s var(--ease-spring);
}
.modal__close:hover { background: var(--danger-bg); color: var(--danger); transform: rotate(90deg); }
.modal__close .icon { inline-size: 1.15rem; block-size: 1.15rem; }
/* The one scroller. `overscroll-behavior` keeps a flick at the end of a long
   permission list from scrolling the page behind the dialog. */
.modal__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.35rem; }
.modal__body > :last-child { margin-block-end: 0; }
.modal__body .field:last-child { margin-block-end: 0; }
.modal__body .form-row:last-child { margin-block-end: 0; }

.modal__foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.9rem 1.35rem;
    border-block-start: 1px solid var(--border);
    background: var(--surface-2);
    border-end-start-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
}
/* Lets a dialog push a secondary action (e.g. "delete") to the far edge. */
.modal__foot-spacer { flex: 1 1 auto; }
/* The confirming action carries the weight in a dialog. */
.modal__foot .btn { min-inline-size: 6rem; }

/* A titled block inside a long form — groups related fields without a second
   dialog or a tab strip. */
.form-section { margin-block-end: 1.35rem; }
.form-section:last-child { margin-block-end: 0; }
.form-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
    padding-block-end: 0.4rem;
    border-block-end: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.form-section__title .icon { inline-size: 0.95rem; block-size: 0.95rem; color: var(--gold-600); }

@media (max-width: 40rem) {
    /* Full-height sheet on a phone: a centred card with a scrolling body is
       awkward to reach with a thumb. */
    .modal-overlay { padding: 0; place-items: end center; }
    .modal {
        max-inline-size: none;
        max-block-size: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        animation: sheet-up 0.24s var(--ease-out) both;
    }
    .modal__foot { border-radius: 0; }
    .modal__foot .btn { flex: 1; }
}
@keyframes sheet-up {
    from { opacity: 0; transform: translateY(2rem); }
    to { opacity: 1; transform: none; }
}

.confirm { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.confirm__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 3.4rem;
    block-size: 3.4rem;
    border-radius: 50%;
    background: var(--danger-bg);
    color: #d92d20;
    animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0.3); }
    70% { box-shadow: 0 0 0 12px rgba(217, 45, 32, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); }
}
.confirm__icon .icon { inline-size: 1.7rem; block-size: 1.7rem; }
.confirm__message { margin: 0; color: var(--ink); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(0.9rem) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(0.4rem) scale(0.99); } to { opacity: 1; transform: none; } }

/* ---- Notification bell + dropdown ---- */

.bell { position: relative; flex: none; }
.bell__button {
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    color: var(--brand-700);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.bell__button:hover, .bell.is-open .bell__button {
    border-color: var(--gold-500);
    background: rgba(201, 162, 39, 0.09);
    color: var(--gold-700);
}
.bell__button .icon { inline-size: 1.2rem; block-size: 1.2rem; }

.bell__dot {
    position: absolute;
    inset-block-start: -0.35rem;
    inset-inline-end: -0.35rem;
    min-inline-size: 1.15rem;
    padding: 0 0.3em;
    border-radius: 999px;
    background: var(--danger);
    border: 2px solid var(--surface);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15rem;
    text-align: center;
}
/* A ring pulses out once a second while anything is unread. */
.bell__dot::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    border: 2px solid var(--danger);
    animation: bell-ping 2s var(--ease-out) infinite;
}
@keyframes bell-ping {
    0% { opacity: 0.7; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.9); }
}

.bell__pop {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    z-index: 46;
    inline-size: min(24rem, calc(100vw - 2rem));
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: pop-in 0.18s var(--ease-out) both;
}
.bell__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    border-block-end: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--brand-900);
}
.bell__mark {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    background: transparent;
    color: var(--gold-700);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 7px;
}
.bell__mark:hover { background: rgba(201, 162, 39, 0.14); }
.bell__mark:disabled { opacity: 0.5; cursor: default; }
.bell__mark .icon { inline-size: 0.9rem; block-size: 0.9rem; }

.bell__list { max-block-size: 24rem; overflow-y: auto; padding: 0.3rem; }
.bell__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    transition: background 0.15s ease;
}
.bell__item:hover { text-decoration: none; background: rgba(201, 162, 39, 0.09); color: var(--ink); }
/* Read entries recede but stay legible — greying them out entirely hides the
   very history the read log exists to keep. */
.bell__item.is-read { opacity: 0.62; }
.bell__item-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 9px;
    border: 1px solid transparent;
}
.bell__item-icon .icon { inline-size: 1rem; block-size: 1rem; }
.bell__item-body { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-inline-size: 0; }
.bell__item-title { font-size: 0.875rem; font-weight: 700; color: var(--brand-900); }
.bell__item-text { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.bell__item-dot {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-block-start: 0.65rem;
    border-radius: 50%;
    background: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}

.bell__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--muted);
    text-align: center;
}
.bell__empty .icon { inline-size: 1.8rem; block-size: 1.8rem; color: var(--ok); }
.bell__empty p { margin: 0; font-size: 0.875rem; }

.bell__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem;
    border-block-start: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--brand-800);
    font-size: 0.85rem;
    font-weight: 700;
}
.bell__more:hover { background: rgba(201, 162, 39, 0.1); color: var(--gold-700); text-decoration: none; }
.bell__more .icon { inline-size: 0.9rem; block-size: 0.9rem; }

/* ---- Notifications page ---- */

.notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.notes__row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 0.4rem;
    border-block-end: 1px solid var(--border);
}
.notes__row:last-child { border-block-end: 0; }
.notes__row.is-read { opacity: 0.66; }
.notes__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 11px;
    border: 1px solid transparent;
}
.notes__icon .icon { inline-size: 1.15rem; block-size: 1.15rem; }
.notes__body { flex: 1; min-inline-size: 0; }
.notes__title { display: inline-block; font-weight: 700; color: var(--brand-900); }
.notes__title:hover { color: var(--gold-700); }
.notes__text { margin: 0.2rem 0 0.45rem; color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.notes__meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0; font-size: 0.8rem; }
.notes__read { color: var(--muted); }
.notes__unread { color: var(--gold-700); font-weight: 700; }
.notes__actions { flex: none; }
.notes__note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.6;
}
.notes__note .icon { inline-size: 0.95rem; block-size: 0.95rem; flex: none; margin-block-start: 0.15rem; }

@media (max-width: 40rem) {
    .notes__row { flex-wrap: wrap; }
    .notes__actions { inline-size: 100%; display: flex; justify-content: flex-end; }
}

/* ---- Toasts ---- */

.toasts {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    inline-size: min(23rem, calc(100vw - 2.5rem));
    pointer-events: none;
}
.toasts > * { pointer-events: auto; }

.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem 0.95rem;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--brand-900);
    color: var(--on-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 40px -16px rgba(10, 21, 48, 0.7);
    animation: toast-in 0.34s var(--ease-spring) both;
}
/* The tone shows as a lit edge, not a coloured card: four saturated cards
   stacked in a corner is noise, one gold-maroon family is a system. */
.toast::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--accent-gradient);
}
.toast--success::before { background: linear-gradient(var(--ok), #34c77b); }
.toast--error::before { background: linear-gradient(#e5544a, var(--danger)); }
.toast--warning::before { background: var(--accent-gradient); }
.toast--info::before { background: linear-gradient(#5b86d8, var(--info)); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(0.9rem) scale(0.96); }
    to { opacity: 1; transform: none; }
}
.toast.is-leaving { animation: toast-out 0.22s var(--ease-out) both; }
@keyframes toast-out {
    from { opacity: 1; transform: none; max-block-size: 12rem; }
    to { opacity: 0; transform: translateY(-0.4rem) scale(0.97); max-block-size: 0; }
}

.toast__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 1.85rem;
    block-size: 1.85rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}
.toast__icon svg { inline-size: 1.05rem; block-size: 1.05rem; }
.toast--success .toast__icon { color: #5fd99b; }
.toast--error .toast__icon { color: #ff9d94; }
.toast--warning .toast__icon { color: var(--gold-300); }
.toast--info .toast__icon { color: #9dbdf5; }

.toast__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.toast__title { font-size: 0.925rem; font-weight: 700; color: #fff; }
.toast__text { font-size: 0.85rem; line-height: 1.55; color: var(--on-dark-muted); overflow-wrap: anywhere; }

.toast__close {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--on-dark-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
/* Flattened over the maroon card so the contrast is checkable, not assumed. */
.toast__close:hover { background: #2c3b58; color: #fff; }
.toast__close svg { inline-size: 0.85rem; block-size: 0.85rem; }

/* This bar is the dismissal timer itself — pausing the animation on hover
   pauses the countdown, so the two can never fall out of step. */
.toast__bar {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 2px;
    transform-origin: inline-start;
    background: var(--accent-gradient);
    opacity: 0.7;
    animation: toast-drain linear forwards;
}
@keyframes toast-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 40rem) {
    .toasts { inset-inline: 0.75rem; inset-block-end: 0.75rem; inline-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
    /* Dismissal is a JS timer, so losing the bar costs nothing — and a bar that
       empties instantly would misreport how long the toast has left. */
    .toast__bar { display: none; }
}

/* Blazor error UI */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 1000;
    background: var(--brand-900);
    color: #fff;
    padding: 0.8rem 1.2rem;
    box-shadow: 0 -6px 20px -8px rgba(0, 0, 0, 0.4);
}
#blazor-error-ui .reload { color: var(--gold-400); margin-inline-start: 0.5rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: inline-end; }

/* Staggered entrance for the dashboard tiles */
@media (prefers-reduced-motion: no-preference) {
    .stat-card, .nav-card { animation: dash-rise 0.5s var(--ease-out) both; }
    .stat-card:nth-child(2), .nav-card:nth-child(2) { animation-delay: 0.06s; }
    .stat-card:nth-child(3), .nav-card:nth-child(3) { animation-delay: 0.12s; }
    .stat-card:nth-child(4), .nav-card:nth-child(4) { animation-delay: 0.18s; }
    .stat-card:nth-child(5), .nav-card:nth-child(5) { animation-delay: 0.24s; }
    .stat-card:nth-child(6), .nav-card:nth-child(6) { animation-delay: 0.3s; }
}
@keyframes dash-rise {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: none; }
}

/* Responsive table -> stacked rows on narrow screens */
@media (max-width: 46rem) {
    .table-wrap { border: 0; background: none; max-block-size: none; overflow: visible; }
    .table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table tfoot { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; inline-size: 100%; }
    .table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 0.5rem 0.85rem;
        margin-block-end: 0.7rem;
        background: var(--surface);
        box-shadow: var(--shadow-xs);
    }
    .table tbody tr:nth-child(even) { background: var(--surface); }
    .table tbody tr:hover td:first-child { box-shadow: none; }
    .table td {
        border-block-end: 0;
        white-space: normal;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding-inline: 0;
        text-align: end;
    }
    .table td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: 0.8rem; text-align: start; }
    .table td.dt__actions { justify-content: flex-end; }
    .table td.dt__actions::before { content: none; }
    .table td.dt__check { justify-content: flex-start; }
    .dt__pager { justify-content: center; }
}

/* --- 14  Contracting: scopes, contract detail, in-person signing --- */

.scope-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.5rem; }
.scope-list__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.scope-list__item:hover { border-color: rgba(201, 162, 39, 0.4); box-shadow: var(--shadow-xs); }
.scope-list__num {
    flex: 0 0 2rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    /* No strong directional character in a bare marker — pin it LTR. */
    direction: ltr;
    text-align: start;
}
.scope-list__body { flex: 1 1 auto; min-inline-size: 0; }
.scope-list__body p { margin: 0.25rem 0 0; }
.scope-list__actions { display: flex; gap: 0.25rem; flex: 0 0 auto; }

/* Money on a scope line: right-aligned in the reading direction, tabular so a
   column of prices lines up on the decimal instead of drifting. */
.scope-list__price {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.scope-list__calc { font-size: 0.8rem; }

/* What a line promises — the edge of the work, printed where the founder reads
   the price. Set apart by a rule rather than a box: it belongs to the line above
   it, and a second card here would break the list into unrelated tiles. */
.scope-promise {
    margin-block-start: 0.55rem;
    padding-inline-start: 0.7rem;
    border-inline-start: 2px solid var(--line);
    display: grid;
    gap: 0.3rem;
}

.scope-promise__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.scope-promise__counts li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.12rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.scope-promise__counts strong { color: var(--text); font-variant-numeric: tabular-nums; }

.scope-promise__line {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.scope-promise__tag {
    display: inline-block;
    margin-inline-end: 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
}

.scope-promise__tag.is-in { color: var(--ok-700, #1a7f52); background: rgba(26, 127, 82, 0.1); }
.scope-promise__tag.is-out { color: var(--danger-700, #a3352b); background: rgba(163, 53, 43, 0.09); }
.scope-list__item.is-editing { display: block; border-color: var(--gold-500); background: rgba(201, 162, 39, 0.05); }
.scope-list__editbar { display: flex; gap: 0.5rem; margin-block-start: 0.5rem; }
.scope-list--compact .scope-list__item { padding: 0.4rem 0.6rem; }

.scope-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--gold-500);
    border-radius: 10px;
    background: rgba(201, 162, 39, 0.08);
    font-weight: 600;
}
.scope-total strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* ---- Team distribution: one row per project, the people on it inline ---- */
.team-grid { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.team-grid__row {
    display: grid;
    grid-template-columns: minmax(9rem, 1.1fr) auto minmax(10rem, 2fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
}
/* A project nobody is on is the finding this page exists for. */
.team-grid__row.is-empty { border-color: var(--danger); background: var(--danger-bg); }
.team-grid__project { display: grid; gap: 0.1rem; min-inline-size: 0; }
.team-grid__project .text-muted { font-size: 0.8rem; }
.team-grid__people { display: flex; gap: 0.35rem; flex-wrap: wrap; }

@media (max-width: 48rem) {
    .team-grid__row { grid-template-columns: 1fr; }
}

/* Distinct from .chip, which the data table already owns for filter pills. */
.person-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    background: var(--surface);
    font-size: 0.8rem;
}
.person-chip__name { font-weight: 600; }
.person-chip__role { color: var(--muted); font-size: 0.72rem; }

/* ---- Session step 1: the picked client, the company fields, the phone clash ---- */

/* The "or create a new one" line. Previously the button sat flush against the
   panel above it and read as part of it; it is an alternative, not a field. */
.wizard__alt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-block-start: 1rem;
    padding-block-start: 0.9rem;
    border-block-start: 1px dashed var(--border-strong);
}

.picked {
    margin-block-start: 0.9rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--gold-500);
    border-radius: 10px;
    background: rgba(201, 162, 39, 0.07);
}
.picked__id { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.picked__id strong { font-size: 1.02rem; }
.picked__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.75rem;
    margin: 0.6rem 0 0;
    font-size: 0.88rem;
}
.picked__facts dt { color: var(--muted); font-weight: 600; }
.picked__facts dd { margin: 0; }

.cofields {
    margin-block-start: 0.9rem;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--border);
}
.cofields__note { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.85rem; }

/* A clash is a decision to make, not an error to dismiss — hence the actions
   sit inside it rather than the founder having to hunt for them. */
.clash {
    margin-block-start: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--danger);
    border-radius: 10px;
    background: var(--danger-bg);
}
.clash__head { display: flex; align-items: center; gap: 0.4rem; color: var(--danger); }
.clash__head .icon { inline-size: 1.05rem; block-size: 1.05rem; }
.clash__list { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; gap: 0.3rem; }
.clash__list li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.clash__name { font-weight: 700; }
.clash__ask { margin: 0.6rem 0 0.5rem; font-weight: 600; }
.clash__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.clash__note { margin: 0.7rem 0 0; font-size: 0.82rem; }

/* ---- Pipeline extras: the age of a lead, and how it is answered ---- */
.lead-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block-end: 1rem; }

.lead-card__age {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-block-start: 0.35rem;
    color: var(--muted);
    font-size: 0.78rem;
}
.lead-card__age.is-stale { color: var(--danger); font-weight: 700; }
.lead-card__age .icon { inline-size: 0.85rem; block-size: 0.85rem; }

/* One question per row, its answer beside it. */
.decide { display: grid; gap: 0.5rem; margin-block-start: 1rem; }
.decide__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.decide__row--primary { border-color: var(--gold-500); background: rgba(201, 162, 39, 0.08); }
.decide__note { margin: 0; font-size: 0.82rem; }

/* A card that opens something must say so before it is clicked. The table's own
   rows get .is-clickable from DataTable; the card view needs its own. */
.staff-card[role="button"] { cursor: pointer; }
.staff-card[role="button"]:hover { border-color: var(--gold-500); }
.staff-card[role="button"]:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}

/* ---- Deletion preview: what goes, what stays, what refuses ---- */
.delitems {
    margin: 0.4rem 0 0.6rem;
    padding-inline-start: 1.1rem;
    font-size: 0.9rem;
    color: var(--ink-2);
}
.delitems li { margin-block-end: 0.15rem; }
/* Red only for what is actually about to be destroyed — an unlinked row is not. */
.delitems--danger li { color: var(--danger); font-weight: 600; }
.delitems--block li { font-weight: 600; }

/* The primary cell of a row that opens something. */
.rowlink { font-weight: 700; color: var(--ink); text-decoration: none; }
.rowlink:hover { color: var(--gold-700); text-decoration: underline; }

/* A button that has to read as a link inside a sentence. */
.linkish {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--gold-700);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.contract-body { margin-block: 1rem; }
.contract-body summary { cursor: pointer; font-weight: 600; }
.contract-body__text {
    margin-block-start: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    line-height: 1.9;
    max-block-size: 26rem;
    overflow-y: auto;
}

.present { max-inline-size: 56rem; margin-inline: auto; padding: 1.5rem 1rem 3rem; }
.present__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
.present__head h1 { margin: 0; }
.present__doc { margin-block-end: 1.5rem; }
.present__sign { padding: 1.25rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.present__ack { display: flex; align-items: flex-start; gap: 0.6rem; margin-block-end: 1rem; line-height: 1.8; }
.present__ack input { margin-block-start: 0.35rem; accent-color: var(--gold-600); }
.present__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-block-start: 1rem; }
.present__done { text-align: center; padding-block: 3rem; }

.signature-pad {
    inline-size: 100%;
    block-size: 220px;
    border: 2px dashed var(--border-strong);
    border-radius: 12px;
    background: #fff;
    /* Without these the browser scrolls or zooms instead of drawing — the most
       common way a touch signature pad fails on a tablet. */
    touch-action: none;
    overscroll-behavior: none;
    cursor: crosshair;
    transition: border-color 0.2s ease;
}
.signature-pad:hover { border-color: var(--gold-500); }

.team-list { list-style: none; margin: 0.75rem 0; padding: 0; display: grid; gap: 0.5rem; }
.team-list__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; }
.team-list__name { flex: 1 1 auto; font-weight: 600; min-inline-size: 8rem; }

/* An inline role/status picker: reads as text until you reach for it. */
.team-list__role {
    flex: 0 0 auto;
    appearance: none;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}
.team-list__role:hover { border-color: var(--gold-500); }

/* ---- Project hub: one project, everything about it ---- */

.hub__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 1rem;
}
.hub__head h1 { margin: 0; }
.hub__head p { margin: 0.25rem 0 0; }
.hub__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* The one sentence the founder should read first, so it outranks the data. */
.nextup {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.9rem 1rem;
    border: 1px solid var(--gold-500);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.14), rgba(221, 187, 82, 0.05));
    margin-block-end: 1rem;
}
.nextup__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    color: var(--gold-700);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: none;
}
.nextup__label .icon { inline-size: 1rem; block-size: 1rem; }
.nextup__text { flex: 1 1 14rem; margin: 0; font-weight: 600; }

.hub__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
    margin-block-end: 1rem;
}
.hub__stat {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}
.hub__stat-label { color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.hub__stat strong { font-size: 1.05rem; }
.hub__stat--ok { color: var(--ok, #1c7c54); }
.hub__stat--warn { color: var(--gold-700); }
.hub__stat--danger { color: var(--danger); }

.hubnav { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-block-end: 0; }
.hubnav__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-block-end-color: transparent;
    border-start-start-radius: 10px;
    border-start-end-radius: 10px;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.hubnav__item:hover { color: var(--gold-700); border-color: var(--gold-500); }
.hubnav__item.is-active {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--gold-700);
}
.hubnav__item .icon { inline-size: 0.95rem; block-size: 0.95rem; }
.hubnav__count {
    min-inline-size: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 99px;
    background: rgba(201, 162, 39, 0.18);
    color: var(--gold-700);
    font-size: 0.72rem;
    text-align: center;
}
.hubnav + .panel { margin-block-start: 0; border-start-start-radius: 0; }

.hub__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.75rem; }

.deflist { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.75rem; margin: 0.5rem 0 0; }
.deflist dt { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.deflist dd { margin: 0; font-weight: 600; }

.reasons { margin: 0.5rem 0 0; padding-inline-start: 1.1rem; color: var(--ink-2); }
.reasons li { margin-block-end: 0.2rem; }

/* A task list you can finish from, rather than a table you read. */
.checklist { list-style: none; margin: 0.75rem 0; padding: 0; display: grid; gap: 0.35rem; }
.checklist__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    flex-wrap: wrap;
}
.checklist__item.is-done { opacity: 0.6; }
.checklist__item.is-done .checklist__text { text-decoration: line-through; }
.checklist__box {
    flex: none;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--gold-700);
    cursor: pointer;
}
.checklist__box:hover { border-color: var(--gold-500); }
.checklist__box .icon { inline-size: 0.85rem; block-size: 0.85rem; }
.checklist__text { flex: 1 1 10rem; min-inline-size: 0; }

/* Security (MFA) settings */
.security__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
.security__head h2 { margin: 0 0 0.3rem; font-size: 1.15rem; color: var(--brand-900); }
.security__steps { margin: 0.8rem 0; padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; color: var(--ink); }
.security__secret {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--brand-900);
    background: var(--surface-2);
    border: 1px dashed var(--gold-500);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
    text-align: center;
    word-break: break-all;
    direction: ltr;
}
.security__uri { font-size: 0.8rem; margin-block: 0.6rem 0; word-break: break-all; }
.security__uri code { direction: ltr; unicode-bidi: embed; }
.security__form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.8rem; margin-block-start: 1rem; }
.security__form .field { margin-block-end: 0; flex: 1; min-inline-size: 10rem; }

/* --- 15  Client session wizard --- */

.wizard { max-inline-size: 56rem; margin-inline: auto; padding: 1.25rem 1rem 3rem; }
.wizard__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-block-end: 1.25rem; }
.wizard__bar h1 { margin: 0; font-size: 1.3rem; }
.wizard__steps { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-block-end: 1.5rem; }
.wizard__step {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.85rem;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.wizard__num {
    inline-size: 1.6rem;
    block-size: 1.6rem;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    /* A bare numeral has no strong direction — pin it LTR inside the RTL row. */
    direction: ltr;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-spring);
}
.wizard__step--done { color: var(--ink); }
.wizard__step--done .wizard__num { background: var(--brand-800); border-color: var(--brand-800); color: var(--on-dark); }
.wizard__step--current { color: var(--ink); font-weight: 600; }
.wizard__step--current .wizard__num {
    background: var(--gold-500);
    border-color: var(--gold-600);
    color: var(--brand-900);
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18);
}
.wizard__body { min-block-size: 18rem; }
.wizard__foot {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-block-start: 1.5rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--border);
}
.wizard__foot-spacer { flex: 1 1 auto; }
/* The exit sits at the start edge, away from where the client's thumb rests
   when the device is handed over. */
.wizard__exit { margin-inline-start: 0; }

.pick-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.4rem; max-block-size: 18rem; overflow-y: auto; }
/* A tappable row, not a <select>: a native picker is unusable when scanning a
   list with a client watching over your shoulder. */
.pick-list__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    inline-size: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-align: start;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.pick-list__item:hover { border-color: var(--gold-500); }
.pick-list__item.is-selected { border-color: var(--gold-600); box-shadow: inset 0 0 0 1px var(--gold-600); }
.pick-list__name { flex: 1 1 auto; font-weight: 600; }
/* Phone numbers have no strong directional character and reverse otherwise. */
.pick-list__meta { color: var(--muted); font-size: 0.85rem; direction: ltr; }

@media (max-width: 40rem) {
    .wizard__steps { gap: 0.2rem; }
    .wizard__step { padding: 0.25rem 0.35rem; font-size: 0.75rem; }
    .wizard__step span:not(.wizard__num) { display: none; }
}

/* --- 16  Print: paper gets the data, not the chrome --- */

@media print {
    body::before, .sidebar, .app-bar, .shell__backdrop, .cmdk,
    .dt__toolbar, .dt__pager, .dt__bulk, .dt__actions, .dt__actions-head,
    .dt__check, .dt__check-head, .dt__grip, #blazor-error-ui { display: none !important; }

    .shell__main { margin-inline-start: 0 !important; }
    .app-main { padding: 0 !important; }
    .container { max-inline-size: none !important; padding: 0 !important; }
    .panel, .table-wrap, .dt--fullscreen {
        border: 0 !important;
        box-shadow: none !important;
        max-block-size: none !important;
        overflow: visible !important;
        position: static !important;
        padding: 0 !important;
    }
    .table { font-size: 10pt; }
    .table thead th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table tbody tr { break-inside: avoid; }
    .table td, .table th { border-block-end: 1px solid #ccc !important; }
    a[href]::after { content: ""; }
}

/* --- 17  Motion preferences --- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}

/* --- 25  Subscriptions: what is due, before the book ------------------------
   A list and not a table on purpose: these rows are a to-do, and each carries a
   button. A table would sort them by a column the founder did not ask about and
   bury the late one in the middle. */

.due-list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.5rem; }

.due-list__item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
}

.due-list__body { display: grid; gap: 0.15rem; flex: 1 1 14rem; min-width: 0; }
.due-list__body strong { overflow-wrap: anywhere; }
.due-list__body span { font-size: 0.8rem; }

.due-list__when { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.due-list__when.is-late { color: var(--danger-700, #a3352b); font-weight: 600; }

.due-list__amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* --- 22  Calendar ---------------------------------------------------------

   A month grid, drawn right-to-left like everything else: the sheet is
   `direction: rtl` already, so emitting Sunday first puts it in the rightmost
   column with no per-cell arithmetic.

   Six rows always, never five. A grid that changes height as the months are
   paged makes everything under it jump, and a calendar is clicked through fast.

   The type colour arrives per chip as `--chip-ink`, set inline from the row's
   own hex. It is the one place an inline style is written, which is exactly why
   the value is validated as #RRGGBB at the domain boundary rather than escaped
   at each of the places that print it. */

.cal-bar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-block: 1.4rem 0.9rem;
}

.cal-bar__nav { display: flex; align-items: center; gap: 0.35rem; }
.cal-bar__month { font-size: 1.05rem; min-inline-size: 9rem; text-align: center; }
.cal-bar__filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.cal-bar__scope { display: flex; align-items: center; gap: 0.3rem; }
.cal-bar__scope-label { font-size: 0.78rem; color: var(--muted); }

.cal {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cal__head,
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.cal__head { background: var(--surface-2); border-block-end: 1px solid var(--border); }

.cal__heading {
    padding: 0.6rem 0.4rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.cal__day {
    min-block-size: 7.5rem;
    padding: 0.35rem;
    border-inline-start: 1px solid var(--border);
    border-block-start: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: background 0.18s var(--ease-out);
}

/* The first column of each row carries the grid's own edge, not a second line. */
.cal__day:nth-child(7n + 1) { border-inline-start: 0; }
.cal__day:nth-child(-n + 7) { border-block-start: 0; }

.cal__day--outside { background: var(--surface-2); }
.cal__day--outside .cal__day-num { opacity: 0.45; }

.cal__day--today { box-shadow: inset 0 0 0 2px var(--gold-500); }

.cal__day--over { background: rgba(201, 162, 39, 0.14); }

.cal__day-head { display: flex; align-items: center; gap: 0.3rem; }

.cal__day-num {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-900);
    font-variant-numeric: tabular-nums;
}

.cal__add {
    margin-inline-start: auto;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s var(--ease-out), background 0.15s var(--ease-out);
}

/* Revealed on hover and always for keyboards — an action that only exists on
   hover is an action a keyboard user does not have. */
.cal__day:hover .cal__add,
.cal__add:focus-visible { opacity: 1; }
.cal__add:hover { background: var(--surface-2); border-color: var(--border); color: var(--brand-900); }

.cal__items { display: grid; gap: 0.22rem; align-content: start; min-block-size: 0; }

.cal__drop {
    font-size: 0.75rem;
    color: var(--gold-600);
    text-align: center;
    padding-block: 0.4rem;
}

.cal-chip {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    inline-size: 100%;
    padding: 0.22rem 0.4rem;
    border: 0;
    border-inline-start: 3px solid var(--chip-ink, var(--muted));
    border-radius: 6px;
    background: color-mix(in srgb, var(--chip-ink, #6b6f76) 12%, #fff);
    text-align: start;
    font: inherit;
    font-size: 0.76rem;
    color: var(--brand-900);
    cursor: grab;
    overflow: hidden;
}

.cal-chip:hover { background: color-mix(in srgb, var(--chip-ink, #6b6f76) 20%, #fff); }
.cal-chip:active { cursor: grabbing; }
.cal-chip--dragging { opacity: 0.4; }

.cal-chip__time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--chip-ink, var(--muted));
    white-space: nowrap;
}

.cal-chip__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }

.cal-chip__mark { font-size: 0.65rem; opacity: 0.7; flex: 0 0 auto; }
.cal-chip__mark .icon { inline-size: 0.72rem; block-size: 0.72rem; }

/* Weekday and attendee toggles: the same control twice, because "which days" and
   "which people" are the same question asked of two lists. */
.cal-days,
.cal-people { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.cal-days__day,
.cal-people__one {
    padding: 0.32rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font: inherit;
    font-size: 0.8rem;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}

.cal-days__day:hover,
.cal-people__one:hover { border-color: var(--gold-500); color: var(--brand-900); }

.cal-days__day.is-on,
.cal-people__one.is-on {
    background: var(--brand-900);
    border-color: var(--brand-900);
    color: #fff;
    font-weight: 600;
}

/* The rule in a sentence. Four controls that each look right can still add up to
   a rule nobody meant; this is where it is read before it is saved. */
.cal-rule {
    margin-block: 0.6rem 0.9rem;
    padding: 0.55rem 0.75rem;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 0.83rem;
    color: var(--brand-900);
}

.cal-swatch {
    display: inline-block;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    border-radius: 5px;
    border: 1px solid rgba(38, 8, 16, 0.12);
    vertical-align: middle;
}

.cal-color { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.cal-color input[type="color"] { inline-size: 3rem; block-size: 2.1rem; padding: 0.15rem; cursor: pointer; }
.cal-color__value { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--muted); }

.cal-color__preset {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 6px;
    border: 1px solid rgba(38, 8, 16, 0.12);
    cursor: pointer;
}

.cal-color__preset:hover { transform: scale(1.12); }

/* Narrow screens: a seven-column month is unreadable on a phone, so the grid
   becomes a list of the days that actually have something on them. */
@media (max-width: 780px) {
    .cal__head { display: none; }
    .cal__grid { grid-template-columns: 1fr; }

    .cal__day {
        min-block-size: 0;
        border-inline-start: 0;
        border-block-start: 1px solid var(--border);
        flex-direction: row;
        align-items: flex-start;
        gap: 0.6rem;
        padding: 0.55rem 0.7rem;
    }

    .cal__day--outside { display: none; }
    .cal__day-head { flex: 0 0 3.2rem; }
    .cal__items { flex: 1 1 auto; }
    .cal__add { opacity: 1; }
}

/* --- 23  Calendar entry: chip tools, notes, checklist ---------------------

   The chip stopped being one button. Reading an entry and editing its card are
   different intentions, and one click could only ever serve one of them — so the
   body is a link to the entry's own page and the tools sit beside it. */

.cal-chip { padding: 0; position: relative; }

.cal-chip__open {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 0.22rem 0.4rem;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.cal-chip__open:hover { text-decoration: none; }

.cal-chip__tools {
    display: flex;
    gap: 0.1rem;
    padding-inline-end: 0.2rem;
    opacity: 0;
    transition: opacity 0.15s var(--ease-out);
}

/* Shown on hover and always for keyboards — a tool that exists only under a
   pointer is a tool a keyboard user does not have. */
.cal-chip:hover .cal-chip__tools,
.cal-chip__tools:focus-within { opacity: 1; }

.cal-chip__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--brand-900);
    cursor: pointer;
}

.cal-chip__tool:hover { background: #fff; }
.cal-chip__tool--danger:hover { color: var(--danger); }
.cal-chip__tool .icon { inline-size: 0.7rem; block-size: 0.7rem; }

/* How many points are still open. A tick when none are — the difference between
   "nothing to do" and "no list" is worth one character. */
.cal-chip__points {
    flex: 0 0 auto;
    min-inline-size: 1.05rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--chip-ink, var(--muted));
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}

.cal-chip__points.is-done { background: var(--ok, #1a7f45); }

/* ---- the entry's page ---- */

.ev-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding-inline-start: 0.9rem;
    border-inline-start: 4px solid var(--chip-ink, var(--muted));
    margin-block: 0.4rem 1.4rem;
}

.ev-head__main { flex: 1 1 22rem; min-inline-size: 0; }
.ev-head__main h1 { margin: 0 0 0.4rem; }
.ev-head__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; }
.ev-head__people { margin: 0.45rem 0 0; font-size: 0.85rem; }
.ev-head__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.ev-note__foot { display: flex; align-items: center; gap: 0.7rem; margin-block-start: 0.7rem; }

/* ---- the notes box ---- */

.rich { line-height: 1.9; }
.rich p { margin: 0 0 0.55rem; }
.rich p:last-child { margin-block-end: 0; }
.rich ul, .rich ol { margin: 0 0 0.55rem; padding-inline-start: 1.4rem; }
.rich li { margin-block-end: 0.2rem; }
.rich__empty { margin: 0; }

.rich-editor { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.rich-editor.is-disabled { background: var(--surface-2); }

.rich-editor__bar {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.4rem;
    background: var(--surface-2);
    border-block-end: 1px solid var(--border);
}

.rich-editor__btn {
    min-inline-size: 1.9rem;
    block-size: 1.75rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    color: var(--brand-900);
    cursor: pointer;
}

.rich-editor__btn:hover { background: #fff; border-color: var(--border); }
.rich-editor__sep { inline-size: 1px; block-size: 1.1rem; background: var(--border); margin-inline: 0.25rem; }

.rich-editor__box {
    min-block-size: 8rem;
    max-block-size: 26rem;
    overflow-y: auto;
    padding: 0.7rem 0.9rem;
    outline: none;
}

.rich-editor__box:focus-visible { box-shadow: inset 0 0 0 2px rgba(201, 162, 39, 0.35); }

/* ---- the checklist ---- */

.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

.pts__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.pts__item.is-done { opacity: 0.65; }
.pts__item.is-done .pts__text { text-decoration: line-through; }

.pts__check { display: flex; align-items: center; gap: 0.55rem; flex: 1 1 16rem; min-inline-size: 0; cursor: pointer; }
.pts__check input { inline-size: 1.05rem; block-size: 1.05rem; flex: 0 0 auto; cursor: pointer; }
.pts__text { overflow-wrap: anywhere; }

.pts__side { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.pts__owner { min-inline-size: 11rem; }
.pts__done { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The add row is the next item, drawn as one: a dashed outline and a hollow
   checkbox say "not yet", and both go solid the moment the caret lands. Three
   loose controls on a bare line read as a form bolted under a list; this reads
   as the row about to exist. */
.pts__add {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-block-start: 0.7rem;
    padding: 0.45rem 0.7rem;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: transparent;
    transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.pts__add:hover { border-color: rgba(201, 162, 39, 0.5); }

.pts__add:focus-within {
    border-style: solid;
    border-color: var(--gold-500);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}

/* A hollow box where the real row has its checkbox, so the two line up exactly. */
.pts__add-box {
    flex: 0 0 auto;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    border: 1.5px dashed var(--border);
    border-radius: 4px;
    transition: border-color 0.18s var(--ease-out);
}

.pts__add:focus-within .pts__add-box { border-style: solid; border-color: var(--gold-500); }

/* Borderless: the row around it is the field now, so an input with its own frame
   would draw a box inside a box. */
.pts__add-input {
    flex: 1 1 14rem;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    padding: 0.15rem 0;
    font: inherit;
    color: var(--brand-900);
}

.pts__add-input:focus { outline: none; box-shadow: none; }
.pts__add-input::placeholder { color: var(--muted); }

.pts__add-tools { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }

/* Only ever seen in the last stretch — a counter that is always on is noise. */
.pts__add-count {
    font-size: 0.72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    min-inline-size: 1.6rem;
    text-align: center;
}

.pts__hint { margin: 0.45rem 0 0; font-size: 0.76rem; color: var(--muted); }

.pts__hint kbd {
    padding: 0.05rem 0.32rem;
    border: 1px solid var(--border);
    border-block-end-width: 2px;
    border-radius: 4px;
    background: var(--surface);
    font-family: inherit;
    font-size: 0.72rem;
}

/* Narrow screens: the tools drop under the words rather than squeezing them to
   nothing. */
@media (max-width: 620px) {
    .pts__add-input { flex: 1 1 100%; order: -1; }
    .pts__add-tools { inline-size: 100%; justify-content: flex-end; }
}