/* =========================================================================
   Task.Inc admin - component layer
   =========================================================================
   Design read: internal operations console for staff who live in it all day.
   Dense, keyboard-first, calm. Not a marketing page: no heroes, no bento,
   no motion for its own sake.

   Preserved from the existing admin (this is a restyle, not a rebrand):
     - the editorial blue accent (#2563EB)
     - the ink / line / soft neutral ramp
     - Inter, which is the right face for dense tabular UI
     - dark mode keyed to [data-theme], NOT the OS, so the in-app toggle wins

   Everything is expressed as tokens so a page never hard-codes a colour.
   One accent, one radius scale, one shadow ramp, one motion duration.
   ========================================================================= */

:root {
    /* Surfaces, back to front. */
    --ui-bg: #F7F8FA;
    --ui-surface: #FFFFFF;
    --ui-surface-2: #FBFCFD;
    --ui-surface-3: #F2F4F7;
    --ui-overlay: rgb(16 20 28 / 0.55);

    /* Text, strongest to faintest. */
    --ui-text: #141414;
    --ui-text-2: #4A5261;
    --ui-text-3: #6B7480;
    --ui-text-inverse: #FFFFFF;

    /* Lines. Two weights only: hairline for dividers, strong for inputs. */
    --ui-line: #E5E7EB;
    --ui-line-strong: #D3D8DF;

    /* The single accent. Nothing else on the page competes with it. */
    --ui-accent: #2563EB;
    --ui-accent-hover: #1D4ED8;
    --ui-accent-soft: #EFF6FF;
    --ui-accent-border: #BFDBFE;
    --ui-accent-text: #FFFFFF;

    /* Status. Used for state, never for decoration. */
    --ui-success: #047857;
    --ui-success-soft: #ECFDF5;
    --ui-warning: #B45309;
    --ui-warning-soft: #FFFBEB;
    --ui-danger: #B42318;
    --ui-danger-hover: #912018;
    --ui-danger-soft: #FEF3F2;

    /* One radius scale. Inputs and buttons share a value so a button beside
       an input reads as one control, not two systems. */
    --ui-r-sm: 6px;
    --ui-r: 8px;
    --ui-r-lg: 12px;
    --ui-r-xl: 16px;

    /* Shadows tinted toward the surface hue, never pure black. */
    --ui-shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05);
    --ui-shadow: 0 4px 12px -2px rgb(16 24 40 / 0.08), 0 2px 4px -2px rgb(16 24 40 / 0.04);
    --ui-shadow-lg: 0 16px 40px -8px rgb(16 24 40 / 0.16), 0 4px 12px -4px rgb(16 24 40 / 0.08);

    --ui-ring: 0 0 0 3px rgb(37 99 235 / 0.18);
    --ui-ring-danger: 0 0 0 3px rgb(180 35 24 / 0.18);

    /* One duration. Fast enough to feel instant on a control you press 200
       times a day. */
    --ui-t: 140ms;
    --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);

    --ui-z-dropdown: 1000;
    --ui-z-modal: 1100;
    --ui-z-toast: 1200;
}

[data-theme="dark"] {
    --ui-bg: #0C0F14;
    --ui-surface: #141922;
    --ui-surface-2: #1A202B;
    --ui-surface-3: #232B37;
    --ui-overlay: rgb(0 0 0 / 0.68);

    --ui-text: #E9EDF3;
    --ui-text-2: #A8B2C1;
    --ui-text-3: #7C8798;
    --ui-text-inverse: #0C0F14;

    --ui-line: #262E3A;
    --ui-line-strong: #38424F;

    /* Lifted so the accent keeps its punch against a dark surface rather
       than sinking into it. */
    --ui-accent: #4B8BF5;
    --ui-accent-hover: #6BA1F8;
    --ui-accent-soft: #16233A;
    --ui-accent-border: #274571;
    --ui-accent-text: #06121F;

    --ui-success: #34D399;
    --ui-success-soft: #0C2A21;
    --ui-warning: #FBBF24;
    --ui-warning-soft: #2B2110;
    --ui-danger: #F97066;
    --ui-danger-hover: #FDA29B;
    --ui-danger-soft: #2D1513;

    --ui-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --ui-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.5);
    --ui-shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.6);
    --ui-ring: 0 0 0 3px rgb(75 139 245 / 0.28);
}

/* =========================================================================
   1. Modal - replaces window.alert / confirm
   ========================================================================= */

.ui-modal-root {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-modal);
    display: grid;
    /* End-aligned on phones so the sheet rises from the thumb, centred from
       the tablet breakpoint up. */
    place-items: end stretch;
    padding: 0;
}

@media (min-width: 640px) {
    .ui-modal-root {
        place-items: center;
        padding: 24px;
    }
}

.ui-modal-scrim {
    position: absolute;
    inset: 0;
    background: var(--ui-overlay);
    opacity: 0;
    transition: opacity var(--ui-t) var(--ui-ease);
}

.ui-modal-root[data-open="true"] .ui-modal-scrim { opacity: 1; }

.ui-modal {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    background: var(--ui-surface);
    color: var(--ui-text);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-xl) var(--ui-r-xl) 0 0;
    box-shadow: var(--ui-shadow-lg);
    transform: translateY(12px);
    opacity: 0;
    transition: transform var(--ui-t) var(--ui-ease), opacity var(--ui-t) var(--ui-ease);
}

@media (min-width: 640px) {
    .ui-modal {
        max-width: 460px;
        margin: 0 auto;
        border-radius: var(--ui-r-lg);
    }
    .ui-modal--wide { max-width: 720px; }
}

.ui-modal-root[data-open="true"] .ui-modal {
    transform: translateY(0);
    opacity: 1;
}

/* Grab handle: signals "drag or tap outside to dismiss" on the phone sheet. */
.ui-modal-grip {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--ui-line-strong);
    margin: 10px auto 0;
    flex: none;
}

@media (min-width: 640px) { .ui-modal-grip { display: none; } }

.ui-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 20px 0;
}

.ui-modal-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 17px;
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

.ui-modal-icon[data-tone="danger"]  { background: var(--ui-danger-soft);  color: var(--ui-danger); }
.ui-modal-icon[data-tone="warning"] { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-modal-icon[data-tone="success"] { background: var(--ui-success-soft); color: var(--ui-success); }

.ui-modal-title {
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.011em;
    margin: 8px 0 0;
}

.ui-modal-body {
    padding: 8px 20px 4px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ui-text-2);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ui-modal-foot {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    flex: none;
}

@media (min-width: 640px) {
    .ui-modal-foot {
        flex-direction: row;
        justify-content: flex-end;
        padding-bottom: 20px;
    }
}

/* =========================================================================
   2. Buttons
   ========================================================================= */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 40px tall: comfortably above the 44px touch target once padding and
       line-height are counted, without feeling chunky on desktop. */
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--ui-r);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 560;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ui-t) var(--ui-ease),
                border-color var(--ui-t) var(--ui-ease),
                transform var(--ui-t) var(--ui-ease);
}

.ui-btn:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.ui-btn:active:not(:disabled) { transform: translateY(1px); }
.ui-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.ui-btn--primary { background: var(--ui-accent); color: var(--ui-accent-text); }
.ui-btn--primary:hover:not(:disabled) { background: var(--ui-accent-hover); }

.ui-btn--danger { background: var(--ui-danger); color: #fff; }
.ui-btn--danger:hover:not(:disabled) { background: var(--ui-danger-hover); }
.ui-btn--danger:focus-visible { box-shadow: var(--ui-ring-danger); }

.ui-btn--ghost {
    background: var(--ui-surface);
    color: var(--ui-text);
    border-color: var(--ui-line-strong);
}
.ui-btn--ghost:hover:not(:disabled) { background: var(--ui-surface-3); }

.ui-btn--quiet { background: transparent; color: var(--ui-text-2); }
.ui-btn--quiet:hover:not(:disabled) { background: var(--ui-surface-3); color: var(--ui-text); }

@media (max-width: 639px) {
    /* Full-width actions in a modal footer: a half-width button next to the
       screen edge is awkward to hit one-handed. */
    .ui-modal-foot .ui-btn { width: 100%; }
}

/* =========================================================================
   3. Select - replaces the native control
   ========================================================================= */

.ui-select { position: relative; width: 100%; }

.ui-select-control {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 6px 34px 6px 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-r);
    color: var(--ui-text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ui-t) var(--ui-ease), box-shadow var(--ui-t) var(--ui-ease);
}

.ui-select-control:focus-visible,
.ui-select[data-open="true"] .ui-select-control {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: var(--ui-ring);
}

.ui-select[data-disabled="true"] .ui-select-control {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--ui-surface-3);
}

.ui-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-value[data-placeholder="true"] { color: var(--ui-text-3); }

.ui-select-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-text-3);
    pointer-events: none;
    font-size: 12px;
    transition: transform var(--ui-t) var(--ui-ease);
}

.ui-select[data-open="true"] .ui-select-caret { transform: translateY(-50%) rotate(180deg); }

/* Chips for multi-select. */
.ui-select-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }

.ui-select-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 6px 3px 9px;
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    border: 1px solid var(--ui-accent-border);
    border-radius: var(--ui-r-sm);
    font-size: 12.5px;
    font-weight: 550;
    line-height: 1.5;
}

.ui-select-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-select-chip button {
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 10px;
    opacity: 0.7;
}

.ui-select-chip button:hover { opacity: 1; background: rgb(0 0 0 / 0.07); }

/* The dropdown. Fixed-positioned by JS so it escapes any overflow:hidden
   ancestor - a dropdown clipped by its table cell is the classic failure. */
.ui-select-menu {
    position: fixed;
    z-index: var(--ui-z-dropdown);
    display: flex;
    flex-direction: column;
    max-height: 300px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r);
    box-shadow: var(--ui-shadow-lg);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--ui-t) var(--ui-ease), transform var(--ui-t) var(--ui-ease);
}

.ui-select-menu[data-open="true"] { opacity: 1; transform: translateY(0); }

.ui-select-search {
    flex: none;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--ui-line);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 14px;
}

.ui-select-search:focus { outline: none; }
.ui-select-search::placeholder { color: var(--ui-text-3); }

.ui-select-options { overflow-y: auto; overscroll-behavior: contain; padding: 4px; }

.ui-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--ui-r-sm);
    font-size: 14px;
    color: var(--ui-text);
    cursor: pointer;
}

.ui-select-option[data-active="true"] { background: var(--ui-surface-3); }
.ui-select-option[data-selected="true"] { color: var(--ui-accent); font-weight: 560; }
.ui-select-option[data-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.ui-select-check { flex: none; width: 16px; font-size: 12px; opacity: 0; }
.ui-select-option[data-selected="true"] .ui-select-check { opacity: 1; }

.ui-select-empty { padding: 18px 12px; text-align: center; font-size: 13.5px; color: var(--ui-text-3); }

.ui-select-group {
    padding: 10px 10px 4px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-text-3);
}

/* On phones the menu becomes a bottom sheet: a 300px floating list anchored
   to a control near the bottom of the screen gets covered by the keyboard. */
@media (max-width: 639px) {
    .ui-select-menu[data-sheet="true"] {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: auto !important;
        max-height: 72dvh;
        border-radius: var(--ui-r-xl) var(--ui-r-xl) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateY(100%);
    }
    .ui-select-menu[data-sheet="true"][data-open="true"] { transform: translateY(0); }
    .ui-select-option { padding: 12px 10px; }
}

.ui-select-sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--ui-z-dropdown) - 1);
    background: var(--ui-overlay);
    opacity: 0;
    transition: opacity var(--ui-t) var(--ui-ease);
}

.ui-select-sheet-scrim[data-open="true"] { opacity: 1; }

/* =========================================================================
   4. Date picker - replaces <input type="date">
   ========================================================================= */

.ui-date { position: relative; width: 100%; }

.ui-date-control { padding-right: 38px; }

.ui-date-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-text-3);
    pointer-events: none;
    font-size: 13px;
}

.ui-cal {
    position: fixed;
    z-index: var(--ui-z-dropdown);
    width: 304px;
    padding: 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg);
    box-shadow: var(--ui-shadow-lg);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--ui-t) var(--ui-ease), transform var(--ui-t) var(--ui-ease);
}

.ui-cal[data-open="true"] { opacity: 1; transform: translateY(0); }

.ui-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.ui-cal-nav {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--ui-r-sm);
    background: transparent;
    color: var(--ui-text-2);
    cursor: pointer;
    font-size: 13px;
}

.ui-cal-nav:hover { background: var(--ui-surface-3); color: var(--ui-text); }
.ui-cal-nav:focus-visible { outline: none; box-shadow: var(--ui-ring); }

.ui-cal-label {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.ui-cal-label select {
    padding: 5px 8px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 13.5px;
    font-weight: 560;
    cursor: pointer;
}

.ui-cal-label select:focus-visible { outline: none; box-shadow: var(--ui-ring); }

.ui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.ui-cal-dow {
    padding: 6px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.03em;
    color: var(--ui-text-3);
}

.ui-cal-day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--ui-r-sm);
    background: transparent;
    color: var(--ui-text);
    font-size: 13.5px;
    cursor: pointer;
    transition: background var(--ui-t) var(--ui-ease);
}

.ui-cal-day:hover:not(:disabled) { background: var(--ui-surface-3); }
.ui-cal-day:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.ui-cal-day[data-outside="true"] { color: var(--ui-text-3); opacity: 0.55; }
.ui-cal-day[data-today="true"] { border-color: var(--ui-accent-border); font-weight: 650; }
.ui-cal-day[data-selected="true"] { background: var(--ui-accent); color: var(--ui-accent-text); font-weight: 650; }
.ui-cal-day[data-selected="true"]:hover { background: var(--ui-accent-hover); }
.ui-cal-day:disabled { opacity: 0.3; cursor: not-allowed; }

.ui-cal-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ui-line);
}

@media (max-width: 639px) {
    .ui-cal[data-sheet="true"] {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: auto !important;
        border-radius: var(--ui-r-xl) var(--ui-r-xl) 0 0;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
    }
    .ui-cal[data-sheet="true"][data-open="true"] { transform: translateY(0); }
    .ui-cal-day { font-size: 15px; }
}

/* =========================================================================
   5. Toast
   ========================================================================= */

.ui-toasts {
    position: fixed;
    z-index: var(--ui-z-toast);
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

@media (min-width: 640px) {
    .ui-toasts { left: auto; right: 20px; bottom: 20px; width: 380px; }
}

.ui-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-left: 3px solid var(--ui-accent);
    border-radius: var(--ui-r);
    box-shadow: var(--ui-shadow-lg);
    color: var(--ui-text);
    font-size: 13.5px;
    line-height: 1.5;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--ui-t) var(--ui-ease), transform var(--ui-t) var(--ui-ease);
}

.ui-toast[data-open="true"] { opacity: 1; transform: translateY(0); }
.ui-toast[data-tone="success"] { border-left-color: var(--ui-success); }
.ui-toast[data-tone="danger"]  { border-left-color: var(--ui-danger); }
.ui-toast[data-tone="warning"] { border-left-color: var(--ui-warning); }

.ui-toast-icon { flex: none; font-size: 14px; margin-top: 1px; color: var(--ui-accent); }
.ui-toast[data-tone="success"] .ui-toast-icon { color: var(--ui-success); }
.ui-toast[data-tone="danger"]  .ui-toast-icon { color: var(--ui-danger); }
.ui-toast[data-tone="warning"] .ui-toast-icon { color: var(--ui-warning); }

.ui-toast-close {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--ui-text-3);
    cursor: pointer;
    font-size: 12px;
    padding: 2px;
}

.ui-toast-close:hover { color: var(--ui-text); }

/* =========================================================================
   6. Responsive tables
   -------------------------------------------------------------------------
   Twenty admin templates render tables. A table is the one layout that
   cannot simply reflow: columns have meaning. Two strategies, both opt-in
   per table so an existing page is never silently restructured.
   ========================================================================= */

/* Strategy A: horizontal scroll with an edge cue. Right for wide numeric
   tables where the row must stay intact to be readable. */
.ui-table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.ui-table-scroll table { min-width: 640px; }

.ui-table-scroll::-webkit-scrollbar { height: 8px; }
.ui-table-scroll::-webkit-scrollbar-thumb {
    background: var(--ui-line-strong);
    border-radius: 999px;
}

/* Strategy B: collapse each row into a labelled card under 768px. Right for
   tables of 3-6 columns where each row is an entity a person acts on.
   Requires data-label on each cell, which the JS fills in from the header. */
@media (max-width: 767px) {
    .ui-table-cards thead { display: none; }

    .ui-table-cards tbody tr {
        display: block;
        margin-bottom: 10px;
        padding: 12px;
        background: var(--ui-surface);
        border: 1px solid var(--ui-line);
        border-radius: var(--ui-r);
        box-shadow: var(--ui-shadow-sm);
    }

    .ui-table-cards tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border: 0;
        text-align: right;
    }

    .ui-table-cards tbody td::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--ui-text-3);
    }

    /* A cell holding only buttons gets the full width; a right-aligned row
       of actions squashed into 55% is unusable. */
    .ui-table-cards tbody td[data-actions="true"] {
        justify-content: flex-end;
        flex-wrap: wrap;
        padding-top: 10px;
        margin-top: 6px;
        border-top: 1px solid var(--ui-line);
    }
    .ui-table-cards tbody td[data-actions="true"]::before { display: none; }
}

/* =========================================================================
   7. Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .ui-modal,
    .ui-modal-scrim,
    .ui-select-menu,
    .ui-select-sheet-scrim,
    .ui-cal,
    .ui-toast,
    .ui-btn,
    .ui-select-caret {
        transition-duration: 1ms !important;
    }
}

/* Locks background scroll while a sheet or modal owns the screen. */
.ui-scroll-locked { overflow: hidden !important; }

/* =========================================================================
   8. Admin surface refinements
   -------------------------------------------------------------------------
   base.html ships its own token set and component classes from before this
   layer existed. Rather than rewrite 650 lines of inline CSS across 42
   pages, the legacy names are re-pointed at the shared tokens here. This
   file loads after that inline <style>, so equal-specificity rules win.

   Two things this fixes beyond colour:

   SHAPE. The panel had three radius systems at once - cards at 20px,
   buttons as full pills, inputs at 8px. The rule is now one scale:

       inputs, buttons, chips, badges   8px   (--ui-r)
       cards, panels, tables           12px   (--ui-r-lg)
       modals and bottom sheets        16px   (--ui-r-xl)

   Pills read consumer; a dense operations console wants the button and the
   input beside it to look like one control.

   THEME. The legacy variables were only defined for light. Aliasing them
   to the shared tokens means every legacy class inherits dark mode without
   being touched individually.
   ========================================================================= */

:root,
[data-theme="dark"] {
    --page-bg: var(--ui-bg);
    --surface: var(--ui-surface);
    --surface-2: var(--ui-surface-3);
    --ink: var(--ui-text);
    --ink-mute: var(--ui-text-3);
    --line: var(--ui-line);
    --soft: var(--ui-surface-2);
    --accent: var(--ui-accent);
    --accent-50: var(--ui-accent-soft);
    --accent-100: var(--ui-accent-soft);
    --accent-700: var(--ui-accent-hover);
    --danger: var(--ui-danger);
}

/* ── Cards ────────────────────────────────────────────────────── */

.ai-card,
.ai-stat-card,
.glass-card {
    border-radius: var(--ui-r-lg);
    border-color: var(--ui-line);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
    transition: box-shadow var(--ui-t) var(--ui-ease),
                border-color var(--ui-t) var(--ui-ease);
}

/* Lift only on cards that are actually links. A hover state on a static
   panel promises an interaction that is not there. */
a.ai-card:hover,
a.ai-stat-card:hover {
    border-color: var(--ui-line-strong);
    box-shadow: var(--ui-shadow);
}

/* ── Buttons ──────────────────────────────────────────────────── */

.btn {
    border-radius: var(--ui-r);
    font-weight: 560;
    transition: background-color var(--ui-t) var(--ui-ease),
                border-color var(--ui-t) var(--ui-ease),
                transform var(--ui-t) var(--ui-ease);
}

.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ui-ring); }

/* ── Tables ───────────────────────────────────────────────────── */

.table-container { border-radius: var(--ui-r-lg); border-color: var(--ui-line); }

.data-table th {
    background: var(--ui-surface-2);
    color: var(--ui-text-3);
    border-bottom-color: var(--ui-line);
    /* 11px uppercase at 600 was heavy for a header that repeats on every
       row group; slightly lighter reads as structure, not as content. */
    font-weight: 600;
    letter-spacing: 0.04em;
}

.data-table td { border-bottom-color: var(--ui-line); color: var(--ui-text); }
.data-table tbody tr:hover td { background: var(--ui-surface-2); }

/* Numbers in a table are compared down the column, so they need to line
   up. Proportional digits make that impossible. */
.data-table td.num,
.data-table .tabular-nums,
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Native controls that are not enhanced ────────────────────── */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="tel"],
textarea {
    border-radius: var(--ui-r);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: var(--ui-ring);
}

/* ── Page rhythm ──────────────────────────────────────────────── */

.page-head { margin-bottom: 1.75rem; }

@media (max-width: 767px) {
    /* Action rows in a page header wrap into a stack rather than shrinking
       each button below a comfortable tap target. */
    .page-head .btn { width: 100%; justify-content: center; }
    .page-head .btn + .btn { margin-top: 8px; }
}

/* Keeps a focused control clear of a sticky header when tabbing through a
   long form. */
:target,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { scroll-margin-top: 96px; }

/* Prompt field. Sits between the message and the buttons so the dialog
   reads as one question rather than a form bolted onto an alert. */
.ui-modal-field { padding: 12px 20px 4px; }

.ui-modal-field .ui-prompt-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-r);
    color: var(--ui-text);
    font: inherit;
    font-size: 14.5px;
}

.ui-modal-field .ui-prompt-input::placeholder { color: var(--ui-text-3); }

.ui-modal-field .ui-prompt-input:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: var(--ui-ring);
}