/* =====================================================================
   WA Platform — design tokens + base styles (WABAA-2, decision #63)
   Shared by the dashboard SPA (welcome.blade.php) and /docs.

   Colours are RGB triplets so Tailwind can apply opacity:
   tailwind.config maps e.g. `surface` → rgb(var(--c-surface) / <alpha-value>),
   which gives classes like bg-surface, text-ink-3, border-brand/30.
   Light is the default; `html.dark` swaps the values (theme-head partial).
   Never hard-code gray-9xx / #hex colours in markup — use the token classes.
   ===================================================================== */

:root {
    /* Neutrals */
    --c-page: 243 245 247;        /* page background            #f3f5f7 */
    --c-surface: 255 255 255;     /* cards, sidebar, modals     #ffffff */
    --c-surface-2: 247 248 250;   /* inputs, insets, table head #f7f8fa */
    --c-surface-3: 238 241 244;   /* hover, chips, secondary    #eef1f4 */
    --c-line: 227 231 236;        /* borders, dividers          #e3e7ec */
    --c-line-strong: 207 214 222; /* input borders, emphasis    #cfd6de */

    /* Text — ink … ink-4 all keep ≥ 4.5:1 on every surface */
    --c-ink: 16 24 40;            /* primary                    #101828 */
    --c-ink-2: 52 64 84;          /* secondary                  #344054 */
    --c-ink-3: 71 84 103;         /* muted                      #475467 */
    --c-ink-4: 93 107 126;        /* faint (meta, captions)     #5d6b7e */
    --c-ink-5: 152 162 179;       /* placeholders/disabled only #98a2b3 */

    /* Brand (restrained emerald) */
    --c-brand: 4 120 87;          /* buttons, active states     #047857 */
    --c-brand-hover: 6 95 70;     /*                            #065f46 */
    --c-brand-ink: 4 120 87;      /* brand-coloured text        #047857 */
    --c-brand-soft: 236 253 243;  /* tinted backgrounds         #ecfdf3 */
    --c-on-brand: 255 255 255;

    /* Status */
    --c-danger: 217 45 32;        --c-danger-ink: 180 35 24;    --c-danger-soft: 254 243 242;
    --c-warning: 220 104 3;       --c-warning-ink: 181 71 8;    --c-warning-soft: 255 250 235;
    --c-info: 21 112 239;         --c-info-ink: 23 92 211;      --c-info-soft: 239 248 255;
    --c-violet: 122 90 248;       --c-violet-ink: 89 37 220;    --c-violet-soft: 244 243 255;

    /* Elevation & shape */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-lg: 0 12px 32px -12px rgba(16, 24, 40, .18), 0 4px 8px -4px rgba(16, 24, 40, .06);
    --radius: 0.75rem;
    --focus-ring: 0 0 0 3px rgb(var(--c-brand) / .18);

    color-scheme: light;
}

html.dark {
    --c-page: 11 16 24;           /* #0b1018 */
    --c-surface: 18 25 36;        /* #121924 */
    --c-surface-2: 14 20 29;      /* #0e141d */
    --c-surface-3: 26 35 49;      /* #1a2331 */
    --c-line: 37 47 63;           /* #252f3f */
    --c-line-strong: 52 64 84;    /* #344054 */

    --c-ink: 231 235 241;         /* #e7ebf1 */
    --c-ink-2: 197 204 214;       /* #c5ccd6 */
    --c-ink-3: 166 176 190;       /* #a6b0be */
    --c-ink-4: 142 153 168;       /* #8e99a8 */
    --c-ink-5: 95 107 123;        /* #5f6b7b */

    --c-brand: 4 120 87;
    --c-brand-hover: 5 150 105;   /* lighter on hover in the dark */
    --c-brand-ink: 60 207 145;    /* #3ccf91 */
    --c-brand-soft: 15 42 34;     /* #0f2a22 */
    --c-on-brand: 255 255 255;

    --c-danger: 240 68 56;        --c-danger-ink: 249 112 102;  --c-danger-soft: 45 20 22;
    --c-warning: 247 144 9;       --c-warning-ink: 253 176 34;  --c-warning-soft: 43 32 16;
    --c-info: 46 144 250;         --c-info-ink: 83 177 253;     --c-info-soft: 15 34 56;
    --c-violet: 135 91 247;       --c-violet-ink: 164 138 251;  --c-violet-soft: 31 26 58;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .6);

    color-scheme: dark;
}

/* ===== Base ===== */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: rgb(var(--c-ink));
    background-color: rgb(var(--c-page));
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* Numbers in tables and KPIs line up */
.tabular-nums, td, .ui-kpi-value { font-variant-numeric: tabular-nums; }

/* Heading icons carry the brand colour (text stays neutral) */
h2 > svg, h3 > svg { color: rgb(var(--c-brand-ink)); }

/* Cards (legacy name kept: used across all tabs) */
.glass-card {
    background: rgb(var(--c-surface));
    border: 1px solid rgb(var(--c-line));
    box-shadow: var(--shadow);
}

/* Code blocks (docs, logs) */
pre {
    background-color: rgb(var(--c-surface-2));
    color: rgb(var(--c-ink-2));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius);
}

/* ===== Form controls ===== */
input, textarea, select { color: rgb(var(--c-ink)); }
input::placeholder, textarea::placeholder { color: rgb(var(--c-ink-5)); opacity: 1; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
textarea,
select {
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: rgb(var(--c-brand)) !important;
    box-shadow: var(--focus-ring) !important;
}

input:disabled, textarea:disabled, select:disabled { opacity: .6; cursor: not-allowed; }

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem;
    padding-right: 2.25rem !important;
}
select option { background-color: rgb(var(--c-surface)); color: rgb(var(--c-ink)); }

/* Checkboxes & radios (override the Tailwind forms plugin) */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-block;
    width: 1.15rem !important;
    height: 1.15rem !important;
    border: 1.5px solid rgb(var(--c-line-strong)) !important;
    border-radius: 0.4rem !important;
    background-color: rgb(var(--c-surface)) !important;
    background-image: none !important;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type="radio"] { border-radius: 9999px !important; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: rgb(var(--c-brand)) !important; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: rgb(var(--c-brand)) !important;
    border-color: rgb(var(--c-brand)) !important;
}
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 0.32rem;
    height: 0.6rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #fff;
    transform: translate(-50%, -50%);
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: none !important;
    box-shadow: var(--focus-ring) !important;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }

/* Keyboard focus is always visible on buttons and links */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, summary:focus-visible {
    outline: 2px solid rgb(var(--c-brand));
    outline-offset: 2px;
}

/* ===== Scrollbars ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: rgb(var(--c-line-strong));
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-ink-5)); background-clip: content-box; }

/* ===== Tooltip (ui-kit.js) ===== */
.ui-tooltip {
    position: fixed;
    z-index: 9999;
    background: #101828;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .22);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .13s ease, transform .13s ease;
    white-space: nowrap;
    max-width: 280px;
}
html.dark .ui-tooltip { background: #e7ebf1; color: #101828; }
.ui-tooltip.show { opacity: 1; transform: translateY(0); }
.ui-tooltip::after {
    content: '';
    position: absolute;
    left: var(--tip-arrow, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
}
.ui-tooltip.pos-top::after { top: 100%; border-top-color: #101828; }
.ui-tooltip.pos-bottom::after { bottom: 100%; border-bottom-color: #101828; }
html.dark .ui-tooltip.pos-top::after { border-top-color: #e7ebf1; }
html.dark .ui-tooltip.pos-bottom::after { border-bottom-color: #e7ebf1; }

/* ===== AI prompt chips (agents tab) ===== */
.ai-chip {
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    background: rgb(var(--c-surface-3));
    border: 1px solid rgb(var(--c-line));
    color: rgb(var(--c-ink-2));
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.ai-chip:hover { border-color: rgb(var(--c-brand) / .45); }
.ai-chip-active {
    background: rgb(var(--c-brand-soft));
    border-color: rgb(var(--c-brand) / .5);
    color: rgb(var(--c-brand-ink));
}

/* =====================================================================
   UI components (WABAA-3). Prefixed `ui-` — the SPA is one global scope.
   ===================================================================== */

/* Buttons */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    border-radius: .625rem;
    border: 1px solid transparent;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ui-btn-sm { min-height: 2rem; padding: .3rem .75rem; font-size: .8125rem; border-radius: .5rem; }
.ui-btn-primary { background: rgb(var(--c-brand)); color: rgb(var(--c-on-brand)); box-shadow: var(--shadow-sm); }
.ui-btn-primary:not(:disabled):hover { background: rgb(var(--c-brand-hover)); }
.ui-btn-secondary { background: rgb(var(--c-surface)); color: rgb(var(--c-ink-2)); border-color: rgb(var(--c-line-strong)); box-shadow: var(--shadow-sm); }
.ui-btn-secondary:not(:disabled):hover { background: rgb(var(--c-surface-3)); color: rgb(var(--c-ink)); }
.ui-btn-ghost { background: transparent; color: rgb(var(--c-ink-3)); }
.ui-btn-ghost:not(:disabled):hover { background: rgb(var(--c-surface-3)); color: rgb(var(--c-ink)); }
.ui-btn-danger { background: rgb(var(--c-danger)); color: #fff; }
.ui-btn-danger:not(:disabled):hover { filter: brightness(.93); }
.ui-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ui-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 2px solid currentColor;
    border-color: rgb(var(--c-on-brand)) transparent rgb(var(--c-on-brand)) transparent;
    animation: ui-spin .7s linear infinite;
}
.ui-btn-secondary.is-loading::after, .ui-btn-ghost.is-loading::after {
    border-color: rgb(var(--c-ink-3)) transparent rgb(var(--c-ink-3)) transparent;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Icon-only button */
.ui-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .625rem;
    color: rgb(var(--c-ink-3));
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease;
}
.ui-icon-btn:hover { background: rgb(var(--c-surface-3)); color: rgb(var(--c-ink)); }

/* Fields */
.ui-label {
    display: block;
    margin-bottom: .375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: rgb(var(--c-ink-2));
}
.ui-hint { margin-top: .375rem; font-size: .75rem; line-height: 1.1rem; color: rgb(var(--c-ink-4)); }
.ui-error { margin-top: .375rem; font-size: .75rem; color: rgb(var(--c-danger-ink)); }
.ui-input {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: .5rem .75rem;
    border-radius: .625rem;
    border: 1px solid rgb(var(--c-line-strong));
    background: rgb(var(--c-surface));
    color: rgb(var(--c-ink));
    font-size: .875rem;
}
.ui-input.is-invalid, .is-invalid { border-color: rgb(var(--c-danger)) !important; }
.ui-input.is-invalid:focus, .is-invalid:focus { box-shadow: 0 0 0 3px rgb(var(--c-danger) / .18) !important; }

/* Cards */
.ui-card {
    background: rgb(var(--c-surface));
    border: 1px solid rgb(var(--c-line));
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

/* Badges */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    border-radius: 9999px;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.1rem;
    white-space: nowrap;
    background: rgb(var(--c-surface-3));
    color: rgb(var(--c-ink-3));
}
.ui-badge-success { background: rgb(var(--c-brand-soft)); color: rgb(var(--c-brand-ink)); }
.ui-badge-warning { background: rgb(var(--c-warning-soft)); color: rgb(var(--c-warning-ink)); }
.ui-badge-danger { background: rgb(var(--c-danger-soft)); color: rgb(var(--c-danger-ink)); }
.ui-badge-info { background: rgb(var(--c-info-soft)); color: rgb(var(--c-info-ink)); }
.ui-badge-violet { background: rgb(var(--c-violet-soft)); color: rgb(var(--c-violet-ink)); }

/* Segmented control / inner tabs */
.ui-seg {
    display: inline-flex;
    padding: .1875rem;
    gap: .125rem;
    border-radius: .75rem;
    background: rgb(var(--c-surface-3));
    border: 1px solid rgb(var(--c-line));
}
.ui-seg > button, .ui-seg > a {
    padding: .375rem .875rem;
    border-radius: .5625rem;
    font-size: .8125rem;
    font-weight: 600;
    color: rgb(var(--c-ink-3));
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.ui-seg > button:hover, .ui-seg > a:hover { color: rgb(var(--c-ink)); }
.ui-seg > .is-active {
    background: rgb(var(--c-surface));
    color: rgb(var(--c-ink));
    box-shadow: var(--shadow-sm);
}

/* KPI tiles (dashboard) */
.ui-kpi {
    display: block;
    padding: 1rem 1.125rem;
    background: rgb(var(--c-surface));
    border: 1px solid rgb(var(--c-line));
    border-radius: 1rem;
    box-shadow: var(--shadow);
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}
a.ui-kpi:hover, button.ui-kpi:hover { border-color: rgb(var(--c-line-strong)); box-shadow: var(--shadow-lg); }
.ui-kpi-label { font-size: .75rem; font-weight: 600; color: rgb(var(--c-ink-3)); }
.ui-kpi-value { margin-top: .375rem; font-size: 1.625rem; line-height: 2rem; font-weight: 700; color: rgb(var(--c-ink)); }
.ui-kpi-sub { margin-top: .125rem; font-size: .75rem; color: rgb(var(--c-ink-4)); }
.ui-kpi.is-alert { border-color: rgb(var(--c-warning) / .5); background: rgb(var(--c-warning-soft)); }
.ui-kpi.is-alert .ui-kpi-value { color: rgb(var(--c-warning-ink)); }

/* Data tables */
.ui-table-wrap {
    background: rgb(var(--c-surface));
    border: 1px solid rgb(var(--c-line));
    border-radius: 1rem;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.ui-table-scroll { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; text-align: left; }
.ui-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .625rem 1rem;
    background: rgb(var(--c-surface-2));
    border-bottom: 1px solid rgb(var(--c-line));
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgb(var(--c-ink-3));
    white-space: nowrap;
}
.ui-table tbody td { padding: .75rem 1rem; border-bottom: 1px solid rgb(var(--c-line)); color: rgb(var(--c-ink-2)); vertical-align: middle; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td { background: rgb(var(--c-surface-2)); }
.ui-table .num { text-align: right; white-space: nowrap; }

/* Toolbar above tables: search + filters */
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ui-search { position: relative; flex: 1 1 14rem; min-width: 0; max-width: 22rem; }
.ui-search > svg {
    position: absolute;
    left: .75rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    color: rgb(var(--c-ink-4));
    pointer-events: none;
}
.ui-search > input { padding-left: 2.25rem !important; }

/* Empty states */
.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}
.ui-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: .25rem;
    border-radius: .875rem;
    background: rgb(var(--c-surface-3));
    color: rgb(var(--c-ink-4));
}
.ui-empty-icon > svg { width: 1.5rem; height: 1.5rem; }
.ui-empty-title { font-size: .9375rem; font-weight: 700; color: rgb(var(--c-ink)); }
.ui-empty-text { max-width: 26rem; font-size: .8125rem; line-height: 1.25rem; color: rgb(var(--c-ink-3)); }
.ui-empty .ui-btn { margin-top: .5rem; }

/* Loading skeleton */
.ui-skeleton {
    display: block;
    border-radius: .5rem;
    background: linear-gradient(90deg, rgb(var(--c-surface-3)) 0%, rgb(var(--c-surface-2)) 50%, rgb(var(--c-surface-3)) 100%);
    background-size: 200% 100%;
    animation: ui-shimmer 1.2s ease-in-out infinite;
}
@keyframes ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Mobile: tables collapse to cards — each cell shows its column name (data-label) on the left */
@media (max-width: 767px) {
    .ui-table-cards thead { display: none; }
    .ui-table-cards, .ui-table-cards tbody, .ui-table-cards tr, .ui-table-cards td { display: block; width: 100%; }
    .ui-table-cards tbody tr { padding: .75rem 1rem; border-bottom: 1px solid rgb(var(--c-line)); }
    .ui-table-cards tbody tr:last-child { border-bottom: 0; }
    .ui-table-cards tbody td {
        position: relative;
        min-height: 1.75rem;
        max-width: none !important;
        padding: .25rem 0 .25rem 7rem;
        border: 0;
        text-align: right;
        white-space: normal !important;
    }
    .ui-table-cards tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: .3rem;
        width: 6.5rem;
        font-size: .75rem;
        font-weight: 600;
        color: rgb(var(--c-ink-4));
        text-align: left;
    }
    .ui-table-cards tbody td:not([data-label]) { padding-left: 0; }
    .ui-table-cards tbody td:not([data-label])::before { content: none; }
    .ui-table-cards tbody td:not([data-label]):last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding-top: .5rem; }
    .ui-table-cards tbody td .truncate { white-space: normal; overflow: visible; }
    .ui-table-cards tbody td[colspan] { padding-left: 0; text-align: center; }
    .ui-table-cards tbody tr:hover td { background: transparent; }
}

/* =====================================================================
   Modals (WABAA-8): every SPA modal is `.fixed.inset-0 … > .glass-card`.
   The frame below gives them one shape: sticky header and footer, a body
   that scrolls, and full-screen on phones.
   ===================================================================== */
.ui-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid rgb(var(--c-line));
}
.ui-modal-title { font-size: 1.0625rem; font-weight: 700; color: rgb(var(--c-ink)); }
.ui-modal-sub { margin-top: .125rem; font-size: .8125rem; color: rgb(var(--c-ink-3)); }
.ui-modal-body { padding: 1.25rem 1.5rem; overflow-y: auto; }
.ui-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .875rem 1.5rem;
    border-top: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-surface-2));
}

/* Section inside a long form */
.ui-section + .ui-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgb(var(--c-line)); }
.ui-section-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--c-ink-3)); margin-bottom: .75rem; }

/* Theme switch (topbar / sidebar) */
.ui-theme-toggle .ui-theme-sun { display: none; }
html.dark .ui-theme-toggle .ui-theme-sun { display: block; }
html.dark .ui-theme-toggle .ui-theme-moon { display: none; }

/* Sidebar navigation */
.ui-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.375rem;
    padding: .375rem .875rem;
    border-radius: .625rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgb(var(--c-ink-2));
    transition: background-color .15s ease, color .15s ease;
}
.ui-nav-link > svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: rgb(var(--c-ink-4)); transition: color .15s ease; }
.ui-nav-link:hover { background: rgb(var(--c-surface-3)); color: rgb(var(--c-ink)); }
.ui-nav-link.is-active { background: rgb(var(--c-brand-soft)); color: rgb(var(--c-brand-ink)); font-weight: 600; }
.ui-nav-link.is-active > svg { color: rgb(var(--c-brand-ink)); }
.ui-nav-group {
    padding: .875rem .875rem .25rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgb(var(--c-ink-4));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Section search results (App.shell) reuse the sidebar icons */
.shell-search-item svg { width: 1.25rem; height: 1.25rem; }

/* Legacy markup still says shadow-lg/xl/2xl on cards: keep one quiet elevation,
   and a deeper one only for dialogs (overlays are `.fixed` containers). */
.glass-card.shadow-lg, .glass-card.shadow-xl, .glass-card.shadow-2xl { box-shadow: var(--shadow); }
.fixed .glass-card, .fixed .ui-card { box-shadow: var(--shadow-lg); }

/* ===== Modal frame applied by markup classes (WABAA-8) =====
   .ui-modal-overlay  fixed backdrop container (Esc closes the top one — ui-kit.js)
   .ui-modal          the dialog panel; it scrolls, head and foot stay pinned
   .ui-modal-head     title row + close button
   .ui-modal-foot     action row (Cancel / Save) */
.ui-modal .ui-modal-head {
    position: sticky;
    top: -1.5rem; /* sticky offsets count from the panel padding (p-6) */
    z-index: 3;
    margin: -1.5rem -1.5rem 1.25rem;
    padding: 1rem 1.5rem;
    background: rgb(var(--c-surface));
    border-bottom: 1px solid rgb(var(--c-line));
}
.ui-modal .ui-modal-head h3 { font-size: 1rem; line-height: 1.5rem; }
.ui-modal .ui-modal-foot {
    position: sticky;
    bottom: -1.5rem;
    z-index: 3;
    margin: 1.5rem -1.5rem -1.5rem;
    padding: .875rem 1.5rem;
    background: rgb(var(--c-surface-2));
    border-top: 1px solid rgb(var(--c-line));
}
.ui-modal.flex-col .ui-modal-foot { margin-top: 1rem; }
/* Fields inside dialogs: readable size, visible borders */
.ui-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.ui-modal select,
.ui-modal textarea { font-size: .875rem; }
.ui-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.py-1):not(.py-1\.5),
.ui-modal select:not(.py-1):not(.py-1\.5) { min-height: 2.5rem; }

/* Inputs everywhere get a visible border (line is too faint for a field edge) */
input.border-line:not([type="checkbox"]):not([type="radio"]),
select.border-line,
textarea.border-line { border-color: rgb(var(--c-line-strong)); }

.ui-btn-danger-ghost { background: transparent; color: rgb(var(--c-danger-ink)); }
.ui-btn-danger-ghost:not(:disabled):hover { background: rgb(var(--c-danger-soft)); }

/* Phones: dialogs take the whole screen */
@media (max-width: 639px) {
    .ui-modal-overlay { padding: 0 !important; align-items: stretch !important; }
    .ui-modal {
        max-width: none !important;
        width: 100% !important;
        min-height: 100%;
        max-height: 100% !important;
        border-radius: 0 !important;
        border: 0 !important;
    }
    .ui-modal .ui-modal-head { padding-top: max(1rem, env(safe-area-inset-top)); }
    .ui-modal .ui-modal-foot { padding-bottom: max(.875rem, env(safe-area-inset-bottom)); }
    .ui-modal .ui-modal-foot .ui-btn { flex: 1 1 auto; }
}

/* Form fields: 12px (text-xs / text-[11px]) is too small for business forms — 14px everywhere */
input.text-xs:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select.text-xs, textarea.text-xs,
input.text-\[11px\], select.text-\[11px\], textarea.text-\[11px\] { font-size: .875rem; line-height: 1.25rem; }