/* ============================================================================
   GSO Portal — Shared UI System
   ----------------------------------------------------------------------------
   One stylesheet linked by every page. Defines the unified design language:
     • design tokens          (surfaces, borders, elevation, radii, motion)
     • app background         (.gso-app on <body>)
     • inputs / labels        (.gso-input, .gso-label)
     • buttons                (.gso-btn + variants)
     • cards                  (.gso-card)
     • tabs                   (.gso-tab)
     • modals                 (.gso-modal, .gso-backdrop)
     • tables                 (.gso-table-wrap, .gso-table)
     • empty states/skeletons (.gso-empty, .gso-skeleton)
     • legends                (.gso-legend, .gso-legend__item)
     • global polish          (scrollbars, selection, focus rings)
   Theme colors come from CSS variables set per page by the inline theme script:
     --theme-color-main, --theme-color-dark, --theme-color-shadow,
     --theme-rgb, --theme-rgb-alt
   Every component ships its own html.light-mode counterpart.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens --- */
:root {
    color-scheme: dark;

    /* surfaces */
    --gso-surface: linear-gradient(180deg, rgba(23, 33, 58, 0.72), rgba(11, 18, 38, 0.62));
    --gso-surface-solid: #0f172a;
    --gso-surface-sunken: rgba(2, 6, 23, 0.42);
    --gso-surface-raised: rgba(255, 255, 255, 0.045);

    /* hairlines */
    --gso-border: rgba(255, 255, 255, 0.075);
    --gso-border-strong: rgba(255, 255, 255, 0.13);

    /* text */
    --gso-text: #f8fafc;
    --gso-text-soft: #cbd5e1;
    --gso-text-muted: #7c8ba1;

    /* elevation — layered, not a single flat drop */
    --gso-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 6px -2px rgba(0, 0, 0, 0.32);
    --gso-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -10px rgba(0, 0, 0, 0.62);
    --gso-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.32), 0 22px 48px -14px rgba(0, 0, 0, 0.7);
    --gso-shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.34), 0 36px 68px -18px rgba(0, 0, 0, 0.78);

    /* the top-edge highlight that reads as "lit from above" */
    --gso-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);

    /* radii */
    --gso-radius-sm: 0.625rem;
    --gso-radius: 0.75rem;
    --gso-radius-lg: 1.125rem;
    --gso-radius-xl: 1.375rem;

    /* motion */
    --gso-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --gso-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.light-mode {
    color-scheme: light;

    --gso-surface: #ffffff;
    --gso-surface-solid: #ffffff;
    --gso-surface-sunken: #f8fafc;
    --gso-surface-raised: rgba(15, 23, 42, 0.035);

    --gso-border: #e5e9f0;
    --gso-border-strong: #cbd5e1;

    --gso-text: #0f172a;
    --gso-text-soft: #334155;
    --gso-text-muted: #64748b;

    --gso-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
    --gso-shadow-md: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 26px -12px rgba(15, 23, 42, 0.16);
    --gso-shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.06), 0 22px 48px -16px rgba(15, 23, 42, 0.2);
    --gso-shadow-xl: 0 4px 8px rgba(15, 23, 42, 0.07), 0 36px 68px -20px rgba(15, 23, 42, 0.26);

    --gso-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------- global polish --- */
::selection {
    background: rgba(var(--theme-rgb, 99, 102, 241), 0.35);
    color: #ffffff;
}

html.light-mode ::selection {
    background: rgba(var(--theme-rgb, 99, 102, 241), 0.25);
    color: #0f172a;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.20);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.35);
    border: 2px solid transparent;
    background-clip: padding-box;
}

html.light-mode ::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.20);
    border: 2px solid transparent;
    background-clip: padding-box;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.gso-input:focus-visible {
    outline: 2px solid rgba(var(--theme-rgb, 99, 102, 241), 0.85);
    outline-offset: 2px;
    border-radius: var(--gso-radius-sm);
}

button,
a,
select {
    -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------ app background ----- */
/* Add `gso-app` to <body> on interior/app pages (not landing/auth pages). */
body.gso-app {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv11', 'ss01';
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    color: var(--gso-text);
    background:
        radial-gradient(1200px 780px at 6% -12%, rgba(var(--theme-rgb, 99, 102, 241), 0.16), transparent 62%),
        radial-gradient(980px 680px at 106% 110%, rgba(var(--theme-rgb-alt, 16, 185, 129), 0.10), transparent 60%),
        radial-gradient(700px 520px at 78% 4%, rgba(var(--theme-rgb, 99, 102, 241), 0.05), transparent 58%),
        #060b1a;
    background-attachment: fixed;
}

html.light-mode body.gso-app {
    color: var(--gso-text);
    background:
        radial-gradient(1200px 780px at 6% -12%, rgba(var(--theme-rgb, 99, 102, 241), 0.11), transparent 62%),
        radial-gradient(980px 680px at 106% 110%, rgba(var(--theme-rgb-alt, 16, 185, 129), 0.08), transparent 60%),
        radial-gradient(700px 520px at 78% 4%, rgba(var(--theme-rgb, 99, 102, 241), 0.04), transparent 58%),
        #f6f8fc;
    background-attachment: fixed;
}

/* ---------------------------------------------------------------- inputs --- */
.gso-input {
    width: 100%;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid var(--gso-border);
    border-radius: var(--gso-radius);
    padding: 0.625rem 0.875rem;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #f1f5f9;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.gso-input::placeholder {
    color: #5b6b81;
}

.gso-input:hover:not(:focus):not(:disabled) {
    border-color: var(--gso-border-strong);
}

.gso-input:focus {
    outline: none;
    border-color: rgba(var(--theme-rgb, 99, 102, 241), 0.7);
    box-shadow: 0 0 0 3.5px rgba(var(--theme-rgb, 99, 102, 241), 0.16), inset 0 1px 2px rgba(0, 0, 0, 0.2);
    background: rgba(2, 6, 23, 0.66);
}

.gso-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

textarea.gso-input {
    resize: vertical;
}

select.gso-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1.1em 1.1em;
}

select.gso-input option {
    background-color: #0d1426;
    color: #f1f5f9;
}

html.light-mode select.gso-input option {
    background-color: #f8fafc;
    color: #0f172a;
}

html.light-mode .gso-input {
    background: #ffffff;
    border-color: var(--gso-border-strong);
    color: #0f172a;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

html.light-mode .gso-input::placeholder {
    color: #94a3b8;
}

html.light-mode .gso-input:focus {
    border-color: rgba(var(--theme-rgb, 99, 102, 241), 0.6);
    box-shadow: 0 0 0 3.5px rgba(var(--theme-rgb, 99, 102, 241), 0.13);
    background: #ffffff;
}

.gso-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gso-text-muted);
    margin-bottom: 0.375rem;
    padding-left: 0.25rem;
}

html.light-mode .gso-label {
    color: #475569;
}

/* --------------------------------------------------------------- buttons --- */
.gso-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1;
    letter-spacing: -0.006em;
    border-radius: var(--gso-radius);
    padding: 0.625rem 1.125rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.16s var(--gso-spring), box-shadow 0.22s ease,
        background 0.22s ease, border-color 0.22s ease, color 0.22s ease, filter 0.22s ease;
}

.gso-btn:active {
    transform: scale(0.97);
}

.gso-btn:disabled {
    opacity: 0.55;
    pointer-events: none;
}

.gso-btn-primary {
    color: #ffffff;
    background-image: linear-gradient(135deg, var(--theme-color-main, #4f46e5), var(--theme-color-dark, #3730a3));
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--gso-shadow-sm), 0 8px 22px -8px rgba(var(--theme-rgb, 99, 102, 241), 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.gso-btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: var(--gso-shadow-md), 0 14px 30px -8px rgba(var(--theme-rgb, 99, 102, 241), 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1.5px);
}

.gso-btn-ghost {
    color: var(--gso-text-soft);
    background: var(--gso-surface-raised);
    border: 1px solid var(--gso-border);
    box-shadow: var(--gso-highlight);
}

.gso-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--gso-border-strong);
    color: #ffffff;
    transform: translateY(-1.5px);
}

.gso-btn-danger {
    color: #ffffff;
    background-image: linear-gradient(135deg, #f43f5e, #be123c);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--gso-shadow-sm), 0 8px 22px -8px rgba(225, 29, 72, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.gso-btn-danger:hover {
    filter: brightness(1.08);
    box-shadow: var(--gso-shadow-md), 0 14px 30px -8px rgba(225, 29, 72, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1.5px);
}

.gso-btn-danger-ghost {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.09);
    border: 1px solid rgba(244, 63, 94, 0.24);
}

.gso-btn-danger-ghost:hover {
    background: rgba(244, 63, 94, 0.17);
    border-color: rgba(244, 63, 94, 0.45);
    color: #ffffff;
    transform: translateY(-1.5px);
}

.gso-btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.6875rem;
    border-radius: var(--gso-radius-sm);
}

.gso-btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: 0.9063rem;
    border-radius: var(--gso-radius-lg);
}

html.light-mode .gso-btn-ghost {
    background: #ffffff;
    border-color: var(--gso-border-strong);
    color: #334155;
    box-shadow: var(--gso-shadow-sm);
}

html.light-mode .gso-btn-ghost:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

html.light-mode .gso-btn-danger-ghost {
    background: rgba(225, 29, 72, 0.06);
    border-color: rgba(225, 29, 72, 0.25);
    color: #be123c;
}

html.light-mode .gso-btn-danger-ghost:hover {
    background: rgba(225, 29, 72, 0.12);
    color: #ffffff;
}

/* ----------------------------------------------------------------- cards --- */
.gso-card {
    background: var(--gso-surface);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--gso-border);
    border-radius: var(--gso-radius-lg);
    box-shadow: var(--gso-shadow-md), var(--gso-highlight);
    transition: transform 0.3s var(--gso-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}

.gso-card-hover:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--theme-rgb, 99, 102, 241), 0.32);
    box-shadow: var(--gso-shadow-lg), 0 0 0 1px rgba(var(--theme-rgb, 99, 102, 241), 0.12),
        var(--gso-highlight);
}

html.light-mode .gso-card {
    background: #ffffff;
    border-color: var(--gso-border);
    box-shadow: var(--gso-shadow-md);
}

html.light-mode .gso-card-hover:hover {
    border-color: rgba(var(--theme-rgb, 99, 102, 241), 0.35);
    box-shadow: var(--gso-shadow-lg), 0 0 0 1px rgba(var(--theme-rgb, 99, 102, 241), 0.14);
}

/* ------------------------------------------------------------------ tabs ---- */
.gso-tab {
    position: relative;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.008em;
    color: var(--gso-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.22s ease, border-color 0.22s ease;
}

.gso-tab:hover {
    color: var(--gso-text-soft);
}

.gso-tab.gso-tab-active {
    color: var(--theme-color-main, #4f46e5);
    border-bottom-color: var(--theme-color-main, #4f46e5);
}

.gso-tab.gso-tab-active::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    width: 55%;
    height: 4px;
    border-radius: 999px;
    background: var(--theme-color-main, #4f46e5);
    filter: blur(6px);
    opacity: 0.6;
    pointer-events: none;
}

/* gso-tab-scroll-fix
   A tab bar that scrolls sideways (overflow-x:auto) also becomes a vertical
   scroller, and the active tab's glow sits a few pixels BELOW the bar -- so
   the browser showed a tiny vertical scrollbar beside the tabs. Tab bars never
   scroll vertically: clip that axis, keep the glow on the underline, and hide
   the scrollbar chrome (sideways swiping still works on narrow screens). */
[class*="overflow-x-auto"]:has(> .gso-tab) {
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
[class*="overflow-x-auto"]:has(> .gso-tab)::-webkit-scrollbar {
    display: none;
}
[class*="overflow-x-auto"] > .gso-tab.gso-tab-active::after {
    bottom: 0;
}

/* Tab slider (built by gso-prefs.js). Arrows live inside the tab row and
   stick to its edges while the tabs scroll beneath; they appear only when the
   row overflows, and each only while there is more in its direction. */
.gso-tabslider {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gso-tabslider::-webkit-scrollbar {
    display: none;
}
.gso-tabslider-btn {
    display: none;
    position: sticky;
    z-index: 3;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    align-self: center;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--gso-border-strong);
    background: var(--gso-surface-solid);
    color: var(--gso-text-soft);
    box-shadow: var(--gso-shadow-md);
    cursor: pointer;
    scroll-snap-align: none !important;
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s var(--gso-ease);
}
.gso-tabslider-btn--prev { left: 0; }
.gso-tabslider-btn--next { right: 0; }
.gso-tabslider-btn:hover {
    color: var(--theme-color-main, #6366f1);
    border-color: rgba(var(--theme-rgb, 99, 102, 241), 0.5);
}
.gso-tabslider-btn:active { transform: scale(0.92); }
.gso-tabslider--on > .gso-tabslider-btn { display: inline-flex; }
.gso-tabslider--on.gso-tabslider--start > .gso-tabslider-btn--prev,
.gso-tabslider--on.gso-tabslider--end > .gso-tabslider-btn--next {
    display: inline-flex;
    visibility: hidden;
}

/* ---------------------------------------------------------------- modals ---- */
.gso-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    animation: gso-fade-in 0.22s ease;
}

.gso-modal {
    background: linear-gradient(180deg, rgba(23, 33, 58, 0.96), rgba(11, 18, 38, 0.96));
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    border: 1px solid var(--gso-border-strong);
    border-radius: var(--gso-radius-xl);
    box-shadow: var(--gso-shadow-xl), var(--gso-highlight);
    animation: gso-modal-in 0.3s var(--gso-ease);
}

@keyframes gso-modal-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.965);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes gso-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

html.light-mode .gso-modal {
    background: #ffffff;
    border-color: var(--gso-border);
    box-shadow: var(--gso-shadow-xl);
}

/* ---------------------------------------------------------------- tables ---- */
.gso-table-wrap {
    overflow: auto;
    border: 1px solid var(--gso-border);
    border-radius: var(--gso-radius-lg);
    background: var(--gso-surface-sunken);
    box-shadow: var(--gso-shadow-sm);
}

.gso-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.gso-table thead th {
    padding: 0.75rem 1.25rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gso-text-muted);
    background: rgba(9, 14, 30, 0.82);
    border-bottom: 1px solid var(--gso-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.gso-table tbody td {
    padding: 0.875rem 1.25rem;
    color: var(--gso-text-soft);
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    vertical-align: middle;
}

.gso-table tbody tr:last-child td {
    border-bottom: none;
}

.gso-table tbody tr {
    transition: background 0.16s ease, box-shadow 0.16s ease;
}

.gso-table tbody tr:hover {
    background: rgba(var(--theme-rgb, 99, 102, 241), 0.07);
    box-shadow: inset 3px 0 0 rgba(var(--theme-rgb, 99, 102, 241), 0.55);
}

html.light-mode .gso-table-wrap {
    border-color: var(--gso-border);
    background: #ffffff;
}

html.light-mode .gso-table thead th {
    color: #475569;
    background: #f4f7fb;
    border-bottom-color: var(--gso-border);
}

html.light-mode .gso-table tbody td {
    color: #1e293b;
    border-bottom-color: #f1f5f9;
}

html.light-mode .gso-table tbody tr:hover {
    background: rgba(var(--theme-rgb, 99, 102, 241), 0.06);
    box-shadow: inset 3px 0 0 rgba(var(--theme-rgb, 99, 102, 241), 0.45);
}

/* --------------------------------------------- empty states & skeletons ---- */
.gso-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--gso-text-muted);
}

.gso-empty .gso-empty-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 30%, rgba(var(--theme-rgb, 99, 102, 241), 0.16), rgba(255, 255, 255, 0.03));
    border: 1px solid var(--gso-border);
    box-shadow: var(--gso-highlight);
    color: #94a3b8;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

html.light-mode .gso-empty {
    color: #64748b;
}

html.light-mode .gso-empty .gso-empty-icon {
    background: radial-gradient(circle at 50% 30%, rgba(var(--theme-rgb, 99, 102, 241), 0.12), rgba(15, 23, 42, 0.03));
    border-color: var(--gso-border);
}

.gso-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.055);
    border-radius: var(--gso-radius-sm);
}

.gso-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: gso-shimmer 1.6s infinite;
}

html.light-mode .gso-skeleton {
    background: rgba(15, 23, 42, 0.06);
}

html.light-mode .gso-skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.05), transparent);
}

@keyframes gso-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* --------------------------------------------------------------- legends ---- */
/* One look for every colour key (calendars, AI priority/type maps).  Each item
   sets --c to the colour it stands for; the pill, ring and badge are tinted
   from it, so a new legend entry only needs a colour. */
.gso-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.gso-legend--center { justify-content: center; }
.gso-legend__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.25rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gso-text-muted);
}
.gso-legend__item {
    --c: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.3rem 0.75rem 0.3rem 0.5rem;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gso-text-soft);
    background: rgba(148, 163, 184, 0.08);
    background: color-mix(in srgb, var(--c) 11%, transparent);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-color: color-mix(in srgb, var(--c) 30%, transparent);
    box-shadow: var(--gso-highlight);
    transition: transform 0.2s var(--gso-ease), border-color 0.2s var(--gso-ease),
        background-color 0.2s var(--gso-ease);
}
.gso-legend__item:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--c) 17%, transparent);
    border-color: color-mix(in srgb, var(--c) 58%, transparent);
}
.gso-legend__swatch {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 999px;
    background: var(--c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 24%, transparent),
        0 0 10px color-mix(in srgb, var(--c) 45%, transparent);
}
.gso-legend__icon {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
}
.gso-legend__key {
    flex: 0 0 auto;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: var(--c);
    box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--c) 60%, transparent);
}
.gso-legend__label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gso-legend--compact { gap: 0.4rem; }
.gso-legend--compact .gso-legend__item {
    padding: 0.22rem 0.6rem 0.22rem 0.45rem;
    font-size: 10.5px;
}
html.light-mode .gso-legend__item {
    color: #334155;
    background: color-mix(in srgb, var(--c) 9%, #ffffff);
    border-color: color-mix(in srgb, var(--c) 32%, #ffffff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
html.light-mode .gso-legend__item:hover {
    background: color-mix(in srgb, var(--c) 15%, #ffffff);
    border-color: color-mix(in srgb, var(--c) 55%, #ffffff);
}
html.light-mode .gso-legend__swatch {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, #ffffff);
}

/* --------------------------------------------------- sidebar active link ---- */
.sidebar-link.active {
    background: linear-gradient(135deg, rgba(var(--theme-rgb, 99, 102, 241), 0.26), rgba(var(--theme-rgb, 99, 102, 241), 0.05)) !important;
    border-left: 3px solid var(--theme-color-main, #4f46e5) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* ------------------------------------------------------- reduced motion ----- */
@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;
    }
}

/* ============================================================================
   LEGACY PALETTE MODERNIZATION
   ----------------------------------------------------------------------------
   The pages carry ~2,000 hand-written Tailwind slate utilities predating the
   design system. Rather than rewrite that markup (and risk the class strings
   JS assigns at runtime), this layer re-skins those utilities in place.

   Slate is remapped to a deeper, blue-tinted charcoal that harmonizes with the
   indigo accent, with wider steps between surface levels so hierarchy reads,
   and a brighter text ramp — Tailwind's slate-400/500 on near-black is well
   under comfortable contrast.

   Scoped to html:not(.light-mode) so light mode keeps its existing per-page
   patches untouched. The extra specificity also outranks Tailwind's own
   single-class rules regardless of injection order.
   ========================================================================== */

html:not(.light-mode) {
    --sl-950: 7, 13, 30;
    --sl-900: 14, 22, 48;
    --sl-800: 23, 33, 61;
    --sl-700: 33, 46, 79;
}

/* ---- surfaces (solid) ---- */
html:not(.light-mode) .bg-slate-950 { background-color: rgb(var(--sl-950)); }
html:not(.light-mode) .bg-slate-900 { background-color: rgb(var(--sl-900)); }
html:not(.light-mode) .bg-slate-800 { background-color: rgb(var(--sl-800)); }
html:not(.light-mode) .bg-slate-700 { background-color: rgb(var(--sl-700)); }

/* ---- surfaces (alpha variants) ---- */
html:not(.light-mode) .bg-slate-950\/20 { background-color: rgba(var(--sl-950), 0.2); }
html:not(.light-mode) .bg-slate-950\/30 { background-color: rgba(var(--sl-950), 0.3); }
html:not(.light-mode) .bg-slate-950\/40 { background-color: rgba(var(--sl-950), 0.4); }
html:not(.light-mode) .bg-slate-950\/50 { background-color: rgba(var(--sl-950), 0.5); }
html:not(.light-mode) .bg-slate-950\/60 { background-color: rgba(var(--sl-950), 0.6); }
html:not(.light-mode) .bg-slate-950\/70 { background-color: rgba(var(--sl-950), 0.7); }
html:not(.light-mode) .bg-slate-950\/80 { background-color: rgba(var(--sl-950), 0.8); }
html:not(.light-mode) .bg-slate-950\/90 { background-color: rgba(var(--sl-950), 0.9); }
html:not(.light-mode) .bg-slate-900\/40 { background-color: rgba(var(--sl-900), 0.4); }
html:not(.light-mode) .bg-slate-900\/50 { background-color: rgba(var(--sl-900), 0.5); }
html:not(.light-mode) .bg-slate-900\/60 { background-color: rgba(var(--sl-900), 0.6); }
html:not(.light-mode) .bg-slate-900\/80 { background-color: rgba(var(--sl-900), 0.8); }
html:not(.light-mode) .bg-slate-900\/90 { background-color: rgba(var(--sl-900), 0.9); }
html:not(.light-mode) .bg-slate-800\/40 { background-color: rgba(var(--sl-800), 0.4); }
html:not(.light-mode) .bg-slate-800\/50 { background-color: rgba(var(--sl-800), 0.5); }
html:not(.light-mode) .bg-slate-800\/80 { background-color: rgba(var(--sl-800), 0.8); }

/* ---- gradient stops ----
   from-*/to-* resolve through --tw-gradient-stops at use time, so overriding
   the variable is enough. via-* has no variable of its own (Tailwind inlines
   the color into --tw-gradient-stops), so it is left on the stock palette. */
html:not(.light-mode) .from-slate-900 { --tw-gradient-from: rgb(var(--sl-900)); }
html:not(.light-mode) .from-slate-950 { --tw-gradient-from: rgb(var(--sl-950)); }
html:not(.light-mode) .to-slate-900   { --tw-gradient-to: rgb(var(--sl-900)); }
html:not(.light-mode) .to-slate-950   { --tw-gradient-to: rgb(var(--sl-950)); }

/* ---- translucent overlays ---- */
html:not(.light-mode) .bg-white\/5  { background-color: rgba(255, 255, 255, 0.045); }
html:not(.light-mode) .bg-white\/10 { background-color: rgba(255, 255, 255, 0.085); }
html:not(.light-mode) .hover\:bg-white\/5:hover  { background-color: rgba(255, 255, 255, 0.07); }
html:not(.light-mode) .hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.11); }

/* ---- text ramp: lifted for contrast ---- */
html:not(.light-mode) .text-slate-600 { color: #6b7c96; }
html:not(.light-mode) .text-slate-500 { color: #8496b0; }
html:not(.light-mode) .text-slate-400 { color: #a3b2c8; }
html:not(.light-mode) .text-slate-300 { color: #c2cdde; }
html:not(.light-mode) .text-slate-200 { color: #dde4ef; }
html:not(.light-mode) .text-slate-100 { color: #eef2f8; }

/* ---- hairlines: unified, warmer than raw slate ---- */
html:not(.light-mode) .border-slate-950 { border-color: rgba(255, 255, 255, 0.05); }
html:not(.light-mode) .border-slate-800 { border-color: rgba(255, 255, 255, 0.075); }
html:not(.light-mode) .border-slate-700 { border-color: rgba(255, 255, 255, 0.11); }
html:not(.light-mode) .border-white\/5   { border-color: rgba(255, 255, 255, 0.06); }
html:not(.light-mode) .border-white\/10  { border-color: rgba(255, 255, 255, 0.11); }
html:not(.light-mode) .divide-slate-800 > * + * { border-color: rgba(255, 255, 255, 0.075); }

/* ---- radii: softened a step, the cheapest modernization there is ---- */
html:not(.light-mode) .rounded-lg  { border-radius: 0.625rem; }
html:not(.light-mode) .rounded-xl  { border-radius: 0.875rem; }
html:not(.light-mode) .rounded-2xl { border-radius: 1.25rem; }
html.light-mode .rounded-lg  { border-radius: 0.625rem; }
html.light-mode .rounded-xl  { border-radius: 0.875rem; }
html.light-mode .rounded-2xl { border-radius: 1.25rem; }

/* ICT surfaces (ict.html, the ICT box on dashboard cards): the pastel accent
   text used on the dark theme is unreadable on the light background. */
html.light-mode .ict-tone .text-violet-200,
html.light-mode .ict-tone .text-violet-300,
html.light-mode .ict-tone .text-violet-400 { color: #6d28d9 !important; }
html.light-mode .ict-tone .text-rose-200,
html.light-mode .ict-tone .text-rose-300,
html.light-mode .ict-tone .text-rose-400 { color: #be123c !important; }
html.light-mode .ict-tone .text-emerald-300 { color: #047857 !important; }
html.light-mode .ict-tone .text-amber-300 { color: #b45309 !important; }