/* ===== Covisian CX brand tokens (change colors/fonts here only) =====
   Theming: every color below is a CSS variable. The light values live on
   :root; [data-theme="dark"] redefines the SAME variable names with dark
   values. Nothing else in this file should need to change when a new
   theme value is picked here. See Components/App.razor for the script
   that sets data-theme on <html> from localStorage before first paint. */
:root {
    --cx-black: #0B0B0C;
    --cx-ink: #16171A;
    --cx-graphite: #2A2C31;
    --cx-gray-600: #5B6472;
    --cx-gray-300: #E3E7EE;
    --cx-gray-200: #ECEEF2;
    --cx-gray-100: #F4F5F7;
    --cx-white: #FFFFFF;
    --cx-yellow: #FFD400; /* provisional: replace with the official brand yellow */
    --cx-sidebar-width: 260px;
    --cx-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --cx-font-display: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* ===== Tech accent palette ===== */
    --cx-accent: #0C8CE9;
    --cx-accent-dark: #0369A1;
    --cx-accent-light: #E7F3FE;
    --cx-accent-2: #7C5CFC;
    /* ===== Semantic status palette (soft-bg + ink pairs) ===== */
    --cx-good: #16A34A;
    --cx-good-soft: #E9F8EF;
    --cx-warn: #D97706;
    --cx-warn-soft: #FDF1DF;
    --cx-bad: #DC2626;
    --cx-bad-soft: #FDEAEA;
    --cx-orange: #EA580C;
    --cx-orange-soft: #FFEDD5;
    /* ===== Categorical chart palette (validated: adjacent-pair CVD/contrast safe) =====
       Used for comparing several series on the same chart (e.g. several URLs on the
       response-time chart). Never reuse these for status/good/bad — those stay
       --cx-good/--cx-bad so color always means the same thing everywhere. */
    --rt-series-1: #2A78D6;
    --rt-series-2: #EB6834;
    --rt-series-3: #1BAF7A;
    --rt-series-4: #EDA100;
    --rt-series-5: #E87BA4;
    /* ===== Surfaces, chrome and rules ===== */
    --cx-surface: #FFFFFF;
    --cx-surface-2: #F9FAFC;
    --cx-rule: #0B0B0C;
    --cx-bg: #F3F5F9;
    --cx-bg-grid: rgba(14, 36, 65, .05);
    --cx-card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --cx-card-shadow-hover: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
}

[data-theme="dark"] {
    --cx-black: #05070B;
    --cx-ink: #EEF1F7;
    --cx-graphite: #C7CCD6;
    --cx-gray-600: #9AA4B7;
    --cx-gray-300: #212838;
    --cx-gray-200: #1C2230;
    --cx-gray-100: #171C28;
    --cx-accent: #3DBBFF;
    --cx-accent-dark: #8ED3FF;
    --cx-accent-light: rgba(61, 187, 255, .16);
    --cx-accent-2: #9C87FF;
    --cx-good: #34D27A;
    --cx-good-soft: rgba(52, 210, 122, .14);
    --cx-warn: #F3B13B;
    --cx-warn-soft: rgba(243, 177, 59, .14);
    --cx-bad: #FF6868;
    --cx-bad-soft: rgba(255, 104, 104, .14);
    --cx-orange: #FB923C;
    --cx-orange-soft: rgba(251, 146, 60, .16);
    --rt-series-1: #3987E5;
    --rt-series-2: #D95926;
    --rt-series-3: #199E70;
    --rt-series-4: #C98500;
    --rt-series-5: #D55181;
    --cx-surface: #10141E;
    --cx-surface-2: #151A26;
    --cx-rule: #3DBBFF;
    --cx-bg: #0A0D14;
    --cx-bg-grid: rgba(255, 255, 255, .035);
    --cx-card-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.35);
    --cx-card-shadow-hover: 0 10px 28px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
}

/* ===== Base ===== */
html, body {
    min-height: 100%;
}

body {
    background-color: var(--cx-bg);
    background-image: radial-gradient(1100px 600px at 100% -10%, var(--cx-accent-light), transparent 60%), radial-gradient(circle, var(--cx-bg-grid) 1px, transparent 1px);
    background-size: 100% 100%, 20px 20px;
    background-attachment: fixed;
    color: var(--cx-ink);
    font-family: var(--cx-font);
    transition: background-color .2s ease, color .2s ease;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cx-font-display);
    letter-spacing: -.01em;
}
h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--cx-ink);
}

    a:hover, .btn-link:hover {
        color: var(--cx-graphite);
    }

/* ===== Layout ===== */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--cx-sidebar-width);
    flex-shrink: 0;
    background: var(--cx-black);
    color: var(--cx-white);
    padding: 1.5rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 10;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    height: 64px;
    background: var(--cx-surface);
    border-bottom: 1px solid var(--cx-gray-300);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
}

.app-topbar-title {
    font-weight: 600;
    color: var(--cx-gray-600);
}

.app-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cx-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--cx-gray-300);
    background: var(--cx-surface-2);
    color: var(--cx-gray-600);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

    .cx-theme-toggle:hover {
        background: var(--cx-accent-light);
        color: var(--cx-accent-dark);
        border-color: var(--cx-accent);
    }

    .cx-theme-toggle .icon-moon {
        display: none;
    }

[data-theme="dark"] .cx-theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] .cx-theme-toggle .icon-moon {
    display: inline;
}

.app-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-user-name {
    font-weight: 500;
}

.app-content {
    padding: 2rem;
    flex: 1;
}

@media (max-width: 991.98px) {
    .app-shell {
        flex-direction: column;
    }

    .app-sidebar {
        width: 100%;
        height: auto;
        position: static;
    }

    .app-content {
        padding: 1.25rem;
    }
}

/* ===== Sidebar brand and navigation ===== */
.brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
    padding: .25rem .5rem 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.brand-logo {
    width: 100%;
    max-width: 180px;
    height: auto;
    display: block;
}

.brand-sub {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

    .brand-sub::before {
        content: "";
        width: 18px;
        height: 3px;
        background: var(--cx-yellow);
    }

.nav-section {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    padding: 1.1rem .75rem .4rem;
}

.nav-item-link {
    display: block;
    padding: .6rem .75rem;
    margin-bottom: 2px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
}

    .nav-item-link:hover {
        background: rgba(255, 255, 255, .08);
        color: var(--cx-white);
    }

    .nav-item-link.active {
        background: rgba(255, 255, 255, .12);
        color: var(--cx-white);
        border-left-color: var(--cx-yellow);
    }

/* ===== Page titles: short yellow accent line ===== */
.app-content h3 {
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 1.25rem;
}

    .app-content h3::after {
        content: "";
        display: block;
        width: 36px;
        height: 3px;
        background: var(--cx-yellow);
        margin-top: .5rem;
    }

/* ===== Buttons ===== */
.btn {
    font-weight: 500;
    border-radius: 8px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cx-black);
    --bs-btn-border-color: var(--cx-black);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cx-graphite);
    --bs-btn-hover-border-color: var(--cx-graphite);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cx-black);
    --bs-btn-active-border-color: var(--cx-black);
    --bs-btn-focus-shadow-rgb: 255, 212, 0;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 212, 0, .45);
}

.form-control:focus, .form-select:focus {
    border-color: var(--cx-accent);
}

/* Bootstrap's outline-dark/outline-secondary variants are intentionally
   theme-invariant, so they go low-contrast on a dark topbar in dark mode.
   Make the ones we use on dark chrome follow our own tokens instead. */
.app-topbar .btn-outline-dark {
    color: var(--cx-ink);
    border-color: var(--cx-gray-300);
}

    .app-topbar .btn-outline-dark:hover {
        color: var(--cx-ink);
        background: var(--cx-surface-2);
        border-color: var(--cx-gray-300);
    }

.form-check-input:checked {
    background-color: var(--cx-black);
    border-color: var(--cx-black);
}

/* ===== Tables ===== */
.table {
    --bs-table-bg: var(--cx-surface);
    --bs-table-striped-bg: var(--cx-surface-2);
    --bs-table-striped-color: var(--cx-ink);
    --bs-table-color: var(--cx-ink);
    border: 1px solid var(--cx-gray-300);
}

    .table > :not(caption) > * > * {
        padding: .8rem 1rem;
    }

    .table thead th {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--cx-gray-600);
        border-bottom: 2px solid var(--cx-rule);
    }

/* ===== Blazor validation and errors ===== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ===== Login screen ===== */
.login-shell {
    display: flex;
    min-height: 100vh;
}

.login-hero {
    flex: 1 1 55%;
    background: var(--cx-black);
    color: var(--cx-white);
    display: flex;
    align-items: center;
    padding: 4rem;
    position: relative;
    overflow: hidden;
}

    /* Decorative concentric circles, subtle "tech" feel */
    .login-hero::after {
        content: "";
        position: absolute;
        right: -140px;
        bottom: -140px;
        width: 360px;
        height: 360px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 50%;
        box-shadow: 0 0 0 60px rgba(255, 255, 255, .025), 0 0 0 120px rgba(255, 255, 255, .02);
    }

.login-hero-inner {
    max-width: 520px;
    position: relative;
    z-index: 1;
}

.login-brand {
    margin-bottom: 3rem;
}

.login-logo {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
}

.login-headline::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    background: var(--cx-yellow);
    margin-bottom: 1.25rem;
}

.login-headline {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0;
}

.login-subtext {
    color: rgba(255, 255, 255, .65);
    margin-top: 1rem;
}

.login-panel {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--cx-surface);
}

.login-card {
    width: 100%;
    max-width: 380px;
}

    .login-card h2 {
        font-weight: 700;
        letter-spacing: -.01em;
    }

        .login-card h2::after {
            content: "";
            display: block;
            width: 36px;
            height: 3px;
            background: var(--cx-yellow);
            margin-top: .5rem;
        }

@media (max-width: 991.98px) {
    .login-shell {
        flex-direction: column;
    }

    .login-hero {
        flex: none;
        padding: 2rem;
    }

    .login-headline {
        font-size: 1.5rem;
    }

    .login-brand {
        margin-bottom: 1.5rem;
    }
}

/* ===== Word search activity ===== */
    .ws-panel {
        display: flex;
        align-items: center;
    }

    .ws-timer {
        font-weight: 600;
        color: var(--cx-gray-600);
    }

    .ws-container {
        display: flex;
        gap: 1.75rem;
        flex-wrap: wrap;
    }

    #ws-grid {
        display: grid;
        grid-template-columns: repeat(12, 36px);
        gap: 3px;
        background: var(--cx-black);
        padding: 10px;
        border-radius: 10px;
        user-select: none;
    }

    .ws-cell {
        width: 36px;
        height: 36px;
        background: var(--cx-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        border-radius: 4px;
        cursor: pointer;
        color: var(--cx-ink);
    }

        .ws-cell.selected {
            background: var(--cx-yellow) !important;
            color: var(--cx-ink) !important;
        }

        .ws-cell.found {
            background: #1fae6b !important;
            color: #fff !important;
        }

    .ws-word-list {
        background: var(--cx-surface);
        border: 1px solid var(--cx-gray-300);
        border-radius: 10px;
        padding: 1.25rem;
        flex: 1;
        min-width: 260px;
    }

    .ws-word-item {
        padding: .5rem 0;
        border-bottom: 1px solid var(--cx-gray-100);
    }

        .ws-word-item.completed {
            text-decoration: line-through;
            color: var(--cx-gray-600);
        }

    .ws-word-title {
        font-weight: 700;
    }

    .ws-word-clue {
        font-size: .85rem;
        color: var(--cx-gray-600);
    }

/* ===== Crossword activity ===== */
.cw-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.cw-timer {
    font-weight: 600;
    color: var(--cx-gray-600);
}

.cw-badge {
    background: var(--cx-gray-100);
    border: 1px solid var(--cx-gray-300);
    padding: .3rem .75rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    cursor: default;
}

.cw-container {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.cw-board-wrapper {
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-300);
    border-radius: 10px;
    padding: 1rem;
}

.cw-board {
    display: grid;
    gap: 2px;
    background: var(--cx-gray-300);
    border-radius: 4px;
    overflow: hidden;
}

.cw-cell {
    width: 36px;
    height: 36px;
    background: var(--cx-surface);
    position: relative;
}

    .cw-cell input {
        width: 100%;
        height: 100%;
        border: none;
        text-align: center;
        font-weight: 700;
        text-transform: uppercase;
        background: transparent;
        outline: none;
        color: var(--cx-ink);
    }

    .cw-cell.highlighted {
        background: #fff3b0;
    }

    .cw-cell.active {
        background: var(--cx-yellow) !important;
    }

.cw-number {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 9px;
    color: var(--cx-gray-600);
    font-weight: 700;
    pointer-events: none;
}

.cw-clues {
    flex: 1;
    min-width: 280px;
    max-width: 440px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-300);
    border-radius: 10px;
    padding: 1.25rem;
    max-height: 520px;
    overflow-y: auto;
}

.cw-clues-group {
    margin-bottom: 1.25rem;
}

    .cw-clues-group h4 {
        font-size: 1rem;
        border-bottom: 2px solid var(--cx-rule);
        padding-bottom: .4rem;
    }

.cw-clue-item {
    font-size: .85rem;
    line-height: 1.4;
    color: var(--cx-gray-600);
    padding: .3rem .5rem;
    border-radius: 4px;
    cursor: pointer;
}

    .cw-clue-item.active-clue {
        background: #fff3b0;
        color: var(--cx-ink);
        font-weight: 500;
    }

/* ===== Dashboard viewer ===== */
.dashboard-frame-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--cx-gray-300);
    border-radius: 10px;
    overflow: hidden;
    background: var(--cx-surface);
}

    .dashboard-frame-wrapper iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
    /* ===== Multi-select filter dropdowns ===== */
.filter-dropdown { position: relative; }

.filter-dropdown > summary {
    list-style: none;
    cursor: pointer;
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-300);
    border-radius: 8px;
    padding: .45rem .9rem;
    font-size: .95rem;
    min-width: 170px;
}

.filter-dropdown > summary::-webkit-details-marker { display: none; }
.filter-dropdown > summary::after { content: " ▾"; color: var(--cx-gray-600); }

.filter-dropdown-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-300);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    padding: .6rem .8rem;
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
}

.filter-dropdown-panel .form-check { white-space: nowrap; }

/* ===== Role permissions: collapsible sections ===== */
.perm-section {
    border: 1px solid var(--cx-gray-300);
    border-radius: 10px;
    margin-bottom: .75rem;
    background: var(--cx-surface);
    overflow: hidden;
}

    .perm-section > summary {
        list-style: none;
        cursor: pointer;
        padding: .75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
    }

        .perm-section > summary::-webkit-details-marker {
            display: none;
        }

        .perm-section > summary::after {
            content: "▾";
            color: var(--cx-gray-600);
            transition: transform .15s;
        }

    .perm-section[open] > summary::after {
        transform: rotate(180deg);
    }

.perm-section-count {
    font-size: .78rem;
    font-weight: 500;
    color: var(--cx-gray-600);
    background: var(--cx-gray-100);
    border-radius: 20px;
    padding: .15rem .65rem;
    margin-left: .6rem;
}

    .perm-section-count.has-selected {
        background: var(--cx-black);
        color: var(--cx-white);
    }

.perm-section-body {
    border-top: 1px solid var(--cx-gray-300);
    padding: .5rem 1rem 1rem;
}

.perm-section-toolbar {
    display: flex;
    gap: 1rem;
    font-size: .8rem;
    margin: .6rem 0 .4rem;
}

    .perm-section-toolbar a {
        cursor: pointer;
    }

/* Nested module group inside a multi-module category (e.g. Technology > SSL) — same mechanics as
   .perm-section, lighter so it reads as a level down rather than a sibling. */
.perm-subsection {
    border: 1px solid var(--cx-gray-200);
    border-radius: 8px;
    margin: 0 0 .6rem;
    background: var(--cx-gray-100);
    overflow: hidden;
}

    .perm-subsection > summary {
        list-style: none;
        cursor: pointer;
        padding: .55rem .85rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        font-size: .92rem;
    }

        .perm-subsection > summary::-webkit-details-marker {
            display: none;
        }

        .perm-subsection > summary::after {
            content: "▾";
            color: var(--cx-gray-600);
            transition: transform .15s;
        }

    .perm-subsection[open] > summary::after {
        transform: rotate(180deg);
    }

    .perm-subsection > .perm-section-body {
        border-top: 1px solid var(--cx-gray-200);
        padding: .4rem .85rem .75rem;
        background: var(--cx-surface);
    }

.perm-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--cx-gray-100);
}

    .perm-row:last-child {
        border-bottom: none;
    }

    .perm-row input[type="checkbox"] {
        margin-top: .3rem;
        flex-shrink: 0;
    }

.perm-code {
    display: inline-block;
    font-family: "Courier New", monospace;
    font-size: .85rem;
    background: var(--cx-gray-100);
    color: var(--cx-graphite);
    border-radius: 4px;
    padding: .1rem .4rem;
    margin-right: .5rem;
}

.perm-desc {
    font-size: .92rem;
    color: var(--cx-gray-600);
}
/* ===== Sidebar flyout menus ===== */
.nav-flyout {
    position: relative;
}

    .nav-flyout > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .6rem .75rem;
        margin-bottom: 2px;
        border-radius: 8px;
        color: rgba(255, 255, 255, .78);
        font-weight: 500;
        font-size: .95rem;
    }

        .nav-flyout > summary::-webkit-details-marker {
            display: none;
        }

        .nav-flyout > summary::after {
            content: "›";
            color: rgba(255, 255, 255, .4);
            font-size: 1.1rem;
        }

    .nav-flyout:hover > summary,
    .nav-flyout[open] > summary {
        background: rgba(255, 255, 255, .1);
        color: var(--cx-white);
    }

.nav-flyout-panel {
    min-width: 220px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-300);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    padding: .5rem;
    z-index: 1050;
}

.nav-flyout-panel-title {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cx-gray-600);
    padding: .3rem .6rem .4rem;
}

.nav-flyout-panel a.nav-item-link {
    color: var(--cx-ink);
    font-size: .92rem;
    padding: .5rem .6rem;
}

    .nav-flyout-panel a.nav-item-link:hover {
        background: var(--cx-gray-100);
        color: var(--cx-ink);
    }

    .nav-flyout-panel a.nav-item-link.active {
        background: var(--cx-gray-100);
        color: var(--cx-ink);
        font-weight: 600;
    }
/* ===== On-Call calendar ===== */
.oncall-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.oncall-legend-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cx-gray-600);
    margin-right: .3rem;
}

.oncall-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: color-mix(in srgb, var(--chip-color) 14%, white);
    color: var(--chip-color);
    border: 1px solid color-mix(in srgb, var(--chip-color) 35%, white);
    border-radius: 6px;
    padding: .3rem .6rem;
    font-size: .8rem;
    font-weight: 700;
}

.oncall-chip-btn {
    border: none;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    margin-top: .3rem;
}

    .oncall-chip-btn:hover {
        filter: brightness(0.95);
    }

.oncall-swapped {
    font-size: .62rem;
    text-transform: uppercase;
    background: #fff3b0;
    color: #7a5b00;
    border-radius: 4px;
    padding: 0 .3rem;
}

.oncall-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--cx-gray-300);
    border: 1px solid var(--cx-gray-300);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--cx-card-shadow);
}

.oncall-dow {
    background: var(--cx-black);
    color: var(--cx-white);
    text-align: center;
    font-size: .78rem;
    font-weight: 600;
    padding: .5rem 0;
}

.oncall-cell {
    background: var(--cx-surface);
    min-height: 110px;
    padding: .4rem;
}

.oncall-cell-blank {
    background: var(--cx-gray-100);
}

.oncall-cell-today {
    outline: 2px solid var(--cx-yellow);
    outline-offset: -2px;
}

.oncall-cell-date {
    font-size: .78rem;
    font-weight: 700;
    color: var(--cx-gray-600);
}

.oncall-holiday {
    font-size: .62rem;
    font-weight: 600;
    border-radius: 4px;
    padding: .1rem .3rem;
    margin-top: .2rem;
}

.oncall-holiday-us {
    background: #dbeafe;
    color: #1e3a8a;
}

.oncall-holiday-co {
    background: #fee2e2;
    color: #7f1d1d;
}

.oncall-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11,11,12,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1rem;
}

.oncall-modal {
    background: var(--cx-surface);
    border-radius: 14px;
    max-width: 420px;
    width: 100%;
    overflow: hidden;
}

.oncall-modal-header {
    color: #fff;
    padding: 1.25rem;
    position: relative;
}

    .oncall-modal-header h4 {
        margin: 0;
    }

    .oncall-modal-header p {
        margin: 0;
        font-size: .85rem;
        opacity: .85;
    }

.oncall-modal-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: rgba(0,0,0,.25);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
}

.oncall-modal-body {
    padding: 1.25rem;
}
.oncall-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.15);
}
/* ===== Certificate status badges ===== */
.cert-badge {
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 20px;
}

.cert-badge-valid {
    background: var(--cx-good-soft);
    color: var(--cx-good);
}

.cert-badge-renew {
    background: var(--cx-warn-soft);
    color: var(--cx-warn);
}

.cert-badge-expiring {
    background: var(--cx-orange-soft);
    color: var(--cx-orange);
}

.cert-badge-critical {
    background: var(--cx-bad-soft);
    color: var(--cx-bad);
}

.cert-badge-expired {
    background: var(--cx-black);
    color: var(--cx-white);
}

.cert-badge-unknown {
    background: var(--cx-gray-100);
    color: var(--cx-gray-600);
}
/* ===== URL monitor response-time chart (inline SVG + a small vanilla-JS hover layer,
   no charting library) ===== */
.rt-chart-wrap {
    position: relative;
}

.rt-chart-svg {
    width: 100%;
    height: 220px;
    display: block;
}

.rt-grid-line {
    stroke: var(--cx-gray-200);
    stroke-width: 1;
}

.rt-axis-label {
    fill: var(--cx-gray-600);
    font-size: 9px;
    dominant-baseline: middle;
}

.rt-line {
    fill: none;
    stroke: var(--cx-accent);
    stroke-width: 1.75;
    opacity: .9;
}

/* Categorical identity colors, used only when comparing 2+ series — never reused for
   status, so color always means the same thing (identity here, up/down elsewhere). */
.rt-series-0 { stroke: var(--rt-series-1); fill: var(--rt-series-1); background: var(--rt-series-1); }
.rt-series-1 { stroke: var(--rt-series-2); fill: var(--rt-series-2); background: var(--rt-series-2); }
.rt-series-2 { stroke: var(--rt-series-3); fill: var(--rt-series-3); background: var(--rt-series-3); }
.rt-series-3 { stroke: var(--rt-series-4); fill: var(--rt-series-4); background: var(--rt-series-4); }
.rt-series-4 { stroke: var(--rt-series-5); fill: var(--rt-series-5); background: var(--rt-series-5); }

.rt-point-fail {
    fill: var(--cx-bad);
    stroke: var(--cx-surface);
    stroke-width: 1;
}


.rt-crosshair {
    stroke: var(--cx-gray-600);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    display: none;
    pointer-events: none;
}

.rt-tooltip {
    position: absolute;
    display: none;
    z-index: 5;
    min-width: 140px;
    padding: .5rem .65rem;
    border-radius: 8px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-300);
    box-shadow: var(--cx-card-shadow-hover);
    font-size: 12px;
    pointer-events: none;
}

.rt-tooltip-time {
    color: var(--cx-gray-600);
    font-size: 11px;
    margin-bottom: .25rem;
}

.rt-tooltip-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    line-height: 1.5;
}

.rt-tooltip-key {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.rt-tooltip-label {
    color: var(--cx-graphite);
}

.rt-tooltip-value {
    font-weight: 600;
    margin-left: auto;
}

.rt-tooltip-value.rt-tooltip-fail {
    color: var(--cx-bad);
}

.rt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: .5rem;
}

.rt-legend-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: 12px;
    color: var(--cx-graphite);
}

.rt-legend-swatch {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}
/* ===== Certificate donut chart ===== */
.cert-donut {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cert-donut-hole {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--cx-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cert-donut-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
/* ===== Certificate campaign bar chart ===== */
.cert-bar-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .55rem;
}

.cert-bar-label {
    width: 150px;
    flex-shrink: 0;
    font-size: .85rem;
    color: var(--cx-gray-600);
    text-align: right;
}

.cert-bar-track {
    flex: 1;
    background: var(--cx-gray-100);
    border-radius: 6px;
    height: 24px;
    position: relative;
    overflow: hidden;
}

.cert-bar-fill {
    height: 100%;
    background: var(--cx-accent);
    border-radius: 6px;
    transition: width .3s ease;
}

.cert-bar-value {
    width: 28px;
    flex-shrink: 0;
    text-align: left;
    font-size: .85rem;
    font-weight: 700;
    color: var(--cx-ink);
}
.settings-tabs {
    display: flex;
    gap: .5rem;
}

/* ===== Modern card system ===== */
.cx-card {
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-200);
    border-radius: 14px;
    box-shadow: var(--cx-card-shadow);
    transition: box-shadow .18s ease, transform .18s ease;
}

.cx-card-hover:hover {
    box-shadow: var(--cx-card-shadow-hover);
    transform: translateY(-2px);
}

.cx-btn-accent {
    background: var(--cx-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    transition: background .15s ease;
}

    .cx-btn-accent:hover {
        background: var(--cx-accent-dark);
        color: #fff;
    }

.cx-breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    color: var(--cx-gray-600);
    margin-bottom: 1.25rem;
}

    .cx-breadcrumb a {
        color: var(--cx-accent);
        text-decoration: none;
        font-weight: 600;
    }

        .cx-breadcrumb a:hover {
            text-decoration: underline;
        }

    .cx-breadcrumb .sep {
        color: var(--cx-gray-300);
    }
/* ===== File explorer ===== */
.cx-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 2rem;
}

.cx-folder-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.1rem .5rem;
    text-align: center;
    cursor: pointer;
}

    .cx-folder-tile .icon {
        font-size: 2.6rem;
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
    }

    .cx-folder-tile .name {
        font-size: .85rem;
        font-weight: 600;
        color: var(--cx-ink);
        word-break: break-word;
    }

    .cx-folder-tile.active {
        background: var(--cx-accent-light);
        border-color: var(--cx-accent);
    }

.cx-dropzone {
    border: 2px dashed var(--cx-gray-300);
    border-radius: 14px;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--cx-gray-600);
    transition: border-color .15s ease, background .15s ease;
    position: relative;
}

    .cx-dropzone.dragover {
        border-color: var(--cx-accent);
        background: var(--cx-accent-light);
    }

    .cx-dropzone input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .cx-dropzone .icon {
        font-size: 2rem;
        margin-bottom: .4rem;
        display: block;
    }

/* ===== Compliance Reports dashboard (KPI tiles + progress bars) ===== */
.cx-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 1.25rem;
}

.cx-kpi-tile {
    padding: .9rem 1rem;
}

    .cx-kpi-tile .num {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--cx-ink);
        line-height: 1.1;
    }

    .cx-kpi-tile .label {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--cx-gray-600);
        margin-top: .25rem;
    }

.cx-bar-track {
    position: relative;
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: var(--cx-gray-100);
    overflow: hidden;
    min-width: 80px;
}

.cx-bar-fill {
    height: 100%;
    border-radius: 999px;
}

    .cx-bar-fill.cx-bar-red { background: #DC3545; }
    .cx-bar-fill.cx-bar-amber { background: #F0883E; }
    .cx-bar-fill.cx-bar-green { background: #1F9D55; }

.cx-bar-row {
    display: flex;
    align-items: center;
    gap: .6rem;
}

    .cx-bar-row .pct {
        flex: 0 0 auto;
        font-weight: 700;
        font-size: .85rem;
        min-width: 3.2rem;
        text-align: right;
    }

.cx-client-tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--cx-accent-light);
    color: var(--cx-accent-dark);
    margin-left: .4rem;
}

/* ===== Documents folder tree (left-hand sidebar on the Documents page) ===== */
.cx-doc-tree-panel {
    border: 1px solid var(--cx-gray-300);
    border-radius: 14px;
    background: var(--cx-surface);
    box-shadow: var(--cx-card-shadow);
    overflow: hidden;
}

.cx-doc-tree-toolbar {
    display: flex;
    gap: .4rem;
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--cx-gray-100);
}

    .cx-doc-tree-toolbar button {
        font-size: .75rem;
        padding: .2rem .55rem;
        border-radius: 8px;
        border: 1px solid var(--cx-gray-300);
        background: var(--cx-surface);
        color: var(--cx-gray-600);
        cursor: pointer;
    }

        .cx-doc-tree-toolbar button:hover {
            background: var(--cx-gray-100);
            color: var(--cx-ink);
        }

.cx-doc-tree-body {
    max-height: 70vh;
    overflow-y: auto;
    padding: .4rem 0;
}

.cx-tree-row {
    display: flex;
    align-items: center;
    gap: .25rem;
    border-radius: 8px;
    margin: 1px .4rem;
}

    .cx-tree-row:hover {
        background: var(--cx-gray-100);
    }

    .cx-tree-row.active {
        background: var(--cx-accent-light);
    }

        .cx-tree-row.active .cx-tree-link .name {
            color: var(--cx-accent-dark);
            font-weight: 700;
        }

.cx-tree-indent {
    flex: 0 0 auto;
}

.cx-tree-toggle {
    flex: 0 0 1.1rem;
    text-align: center;
    font-size: .7rem;
    color: var(--cx-gray-600);
    cursor: pointer;
    user-select: none;
}

.cx-tree-toggle-spacer {
    cursor: default;
}

.cx-tree-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .3rem;
    text-decoration: none;
    color: var(--cx-ink);
    min-width: 0;
}

    .cx-tree-link .icon {
        flex: 0 0 auto;
        font-size: 1rem;
    }

    .cx-tree-link .name {
        font-size: .88rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.cx-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.cx-file-tile {
    display: flex;
    flex-direction: column;
    padding: .9rem;
    gap: .5rem;
}

    .cx-file-tile .icon-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cx-file-tile .icon {
        font-size: 1.8rem;
    }

    .cx-file-tile .name {
        font-weight: 600;
        font-size: .85rem;
        word-break: break-word;
    }

    .cx-file-tile .meta {
        font-size: .72rem;
        color: var(--cx-gray-600);
    }

    .cx-file-tile .actions {
        display: flex;
        gap: .6rem;
        font-size: .78rem;
        margin-top: auto;
    }

    .cx-filetype-xlsx {
        color: #1D6F42;
    }

    .cx-filetype-docx {
        color: #2B579A;
    }

    .cx-filetype-pdf {
        color: #D32F2F;
    }

    .cx-filetype-pptx {
        color: #D04423;
    }

    .cx-filetype-generic {
        color: var(--cx-gray-600);
    }
.cx-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cx-gray-200);
}

    .cx-page-header h3 {
        font-weight: 700;
    }

.cx-stat-card {
    background: var(--cx-surface);
    border-radius: 14px;
    box-shadow: var(--cx-card-shadow);
    padding: 1rem;
    text-align: center;
    border-top: 3px solid var(--cx-accent);
    border-image: linear-gradient(90deg, var(--cx-accent), var(--cx-accent-2)) 1;
}

    .cx-stat-card .value {
        font-size: 1.6rem;
        font-weight: 700;
    }

    .cx-stat-card .label {
        font-size: .75rem;
        color: var(--cx-gray-600);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

.cx-table-modern {
    background: var(--cx-surface);
    border-radius: 14px;
    box-shadow: var(--cx-card-shadow);
    /* No "overflow: hidden" here on purpose: it used to clip absolutely-positioned
       .filter-dropdown-panel menus (multi-select checklists for Sites/Clients/Backup/Escalation)
       to the table's own box, making them look cut off after a couple of items. */
}

    .cx-table-modern table {
        margin-bottom: 0;
    }

    .cx-table-modern thead th {
        background: #FAFBFC;
        border-bottom: 1px solid var(--cx-gray-200);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--cx-gray-600);
    }

    .cx-table-modern tbody tr:hover {
        background: var(--cx-accent-light);
    }
.cx-pill-tabs {
    display: inline-flex;
    background: var(--cx-gray-100);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}

    .cx-pill-tabs button,
    .cx-pill-tabs a {
        border: none;
        background: transparent;
        padding: .45rem 1rem;
        border-radius: 8px;
        font-size: .85rem;
        font-weight: 600;
        color: var(--cx-gray-600);
        cursor: pointer;
        transition: all .15s ease;
        text-decoration: none;
        display: inline-block;
    }

        .cx-pill-tabs button.active,
        .cx-pill-tabs a.active {
            background: var(--cx-surface);
            color: var(--cx-ink);
            box-shadow: 0 1px 2px rgba(0,0,0,.08);
        }

    .cx-pill-tabs .cx-badge-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        margin-left: 6px;
        border-radius: 999px;
        background: #f0883e;
        color: #fff;
        font-size: .7rem;
        font-weight: 700;
        line-height: 1;
        vertical-align: middle;
    }

/* ===========================================================================
   Outage Protocol — dark "control room" theme, scoped to .outage-theme so it
   never bleeds onto the rest of the Intranet. Ported from the legacy app's
   visual identity (IBM Plex Mono, dark background, checkpoint timeline).
   =========================================================================== */
.outage-theme {
    --outage-bg: #0b0f12;
    --outage-panel: #12181d;
    --outage-panel-2: #171f25;
    --outage-border: #26323a;
    --outage-text: #e6edf0;
    --outage-muted: #7f8f98;
    --outage-accent: #ff5a5f;
    --outage-done: #2fd675;
    --outage-skip: #ffb648;
    font-family: "IBM Plex Mono", "Inter", monospace;
    background: var(--outage-bg);
    color: var(--outage-text);
    padding: 1.5rem;
    border-radius: 12px;
    margin: -0.5rem 0 1rem 0;
}

.outage-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: .75rem;
}

.outage-header-kicker {
    color: var(--outage-accent);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
}

.outage-header-title {
    color: var(--outage-text);
    margin: .1rem 0 0 0;
}

.outage-btn-ghost {
    color: var(--outage-muted);
    text-decoration: none;
    border: 1px solid var(--outage-border);
    border-radius: 8px;
    padding: .4rem .8rem;
    font-size: .85rem;
}
.outage-btn-ghost:hover { color: var(--outage-text); border-color: var(--outage-muted); }

.outage-btn-primary {
    background: var(--outage-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .55rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
}
.outage-btn-primary:disabled { opacity: .6; cursor: default; }

.outage-alert {
    background: rgba(255,90,95,.12);
    border: 1px solid var(--outage-accent);
    color: #ffb3b6;
    border-radius: 8px;
    padding: .65rem 1rem;
    margin-bottom: 1rem;
}

.outage-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 900px) {
    .outage-layout { grid-template-columns: 1fr; }
}

.outage-card {
    background: var(--outage-panel);
    border: 1px solid var(--outage-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: .9rem;
}

.outage-card-title {
    color: var(--outage-text);
    font-size: .95rem;
    margin-bottom: .75rem;
}

.outage-label, .outage-label-sm {
    display: block;
    color: var(--outage-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .25rem;
}
.outage-label-sm { font-size: .68rem; }

.outage-input {
    background: var(--outage-panel-2) !important;
    border: 1px solid var(--outage-border) !important;
    color: var(--outage-text) !important;
}
.outage-input:focus { border-color: var(--outage-accent) !important; box-shadow: none !important; }
.outage-input-sm { padding: .3rem .5rem; font-size: .85rem; }

.outage-step { border-left: 3px solid var(--outage-border); transition: border-color .15s ease; }
.outage-step.is-done { border-left-color: var(--outage-done); }
.outage-step.is-skip { border-left-color: var(--outage-skip); }

.outage-step-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.outage-step-time {
    font-weight: 700;
    color: var(--outage-text);
    min-width: 50px;
}

.outage-step-title { color: var(--outage-text); flex: 1; }

.outage-proof-badge {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--outage-skip);
    border: 1px solid var(--outage-skip);
    border-radius: 999px;
    padding: .1rem .5rem;
}

.outage-chip-done, .outage-chip-skip {
    font-size: .7rem;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .15rem .55rem;
}
.outage-chip-done { color: var(--outage-done); border: 1px solid var(--outage-done); }
.outage-chip-skip { color: var(--outage-skip); border: 1px solid var(--outage-skip); }

.outage-step-toggle { display: flex; gap: .5rem; margin-top: .6rem; }

.outage-toggle-btn {
    background: var(--outage-panel-2);
    border: 1px solid var(--outage-border);
    color: var(--outage-muted);
    border-radius: 8px;
    padding: .35rem .9rem;
    font-size: .8rem;
    cursor: pointer;
}
.outage-toggle-btn.active { color: #fff; border-color: var(--outage-done); background: rgba(47,214,117,.15); }
.outage-toggle-skip.active { border-color: var(--outage-skip); background: rgba(255,182,72,.15); }

.outage-file-list { color: var(--outage-muted); font-size: .78rem; margin-top: .3rem; }
.outage-file-list a { color: var(--outage-text); }

.outage-sidebar { position: sticky; top: 1rem; }

.outage-progress-card {
    background: var(--outage-panel);
    border: 1px solid var(--outage-border);
    border-radius: 10px;
    padding: 1rem;
}

.outage-progress-label {
    color: var(--outage-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}

.outage-progress-bar {
    background: var(--outage-panel-2);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin-bottom: .4rem;
}
.outage-progress-fill { background: var(--outage-accent); height: 100%; transition: width .2s ease; }

.outage-progress-count { color: var(--outage-muted); font-size: .75rem; margin-bottom: 1rem; }

.outage-timeline { display: flex; flex-direction: column; gap: .5rem; }

.outage-timeline-item { display: flex; align-items: center; gap: .5rem; color: var(--outage-muted); font-size: .78rem; }
.outage-timeline-item.done { color: var(--outage-done); }
.outage-timeline-item.skip { color: var(--outage-skip); }

.outage-timeline-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--outage-border);
    flex-shrink: 0;
}
.outage-timeline-item.done .outage-timeline-dot { background: var(--outage-done); }
.outage-timeline-item.skip .outage-timeline-dot { background: var(--outage-skip); }

/* ===========================================================================
   QA & Performance — teal "control panel" theme, scoped to .qa-theme so it
   never bleeds onto the rest of the Intranet. Light background (unlike the
   dark Outage Protocol theme), Inter font (already loaded by the app),
   teal accent per the module evaluation's design notes.
   =========================================================================== */
.qa-theme {
    --qa-bg: #f4f8f7;
    --qa-panel: #ffffff;
    --qa-border: #d9e6e3;
    --qa-text: #16302c;
    --qa-muted: #5b7470;
    --qa-accent: #0f766e;
    --qa-accent-dark: #0b5a53;
    --qa-warn: #b45309;
    --qa-warn-bg: #fef3e2;
    --qa-status-submitted-bg: #e8eef7;
    --qa-status-submitted-color: #2b4a8c;
    --qa-status-reviewed-bg: #e3f3ef;
    --qa-status-reviewed-color: var(--qa-accent-dark);
    --qa-status-complete-bg: #eafbe7;
    --qa-status-complete-color: #2f7a1f;
    --qa-accent-ink: #ffffff;
    font-family: "Inter", sans-serif;
    background: var(--qa-bg);
    color: var(--qa-text);
    padding: 1.5rem;
    border-radius: 12px;
    margin: -0.5rem 0 1rem 0;
    transition: background .2s ease, color .2s ease;
}

/* Dark-mode values for the same tokens — this is what keeps every module
   that wraps itself in .qa-theme (Performance Reviews, QA Tracking, PAF,
   Deliverables, Covisian Cash, Employee Awards, Voice Assistant) in step
   with the global light/dark toggle instead of staying a fixed light
   teal panel. */
[data-theme="dark"] .qa-theme {
    --qa-bg: #10181a;
    --qa-panel: #16211f;
    --qa-border: #24322f;
    --qa-text: #E3EFEC;
    --qa-muted: #8CA6A1;
    --qa-accent: #2DD4BF;
    --qa-accent-dark: #7CE6D8;
    --qa-warn: #F3B13B;
    --qa-warn-bg: rgba(243, 177, 59, .14);
    --qa-status-submitted-bg: rgba(96, 165, 250, .16);
    --qa-status-submitted-color: #93c5fd;
    --qa-status-reviewed-bg: rgba(45, 212, 191, .16);
    --qa-status-reviewed-color: var(--qa-accent-dark);
    --qa-status-complete-bg: rgba(74, 222, 128, .16);
    --qa-status-complete-color: #86efac;
    --qa-accent-ink: #052420;
}

.qa-theme h6, .qa-theme h1, .qa-theme h2, .qa-theme h3, .qa-theme h4, .qa-theme h5 {
    color: var(--qa-text);
}

.qa-btn-accent {
    background: var(--qa-accent);
    color: var(--qa-accent-ink) !important;
    border: none;
    border-radius: 8px;
    padding: .5rem 1.1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}
.qa-btn-accent:hover { background: var(--qa-accent-dark); color: var(--qa-accent-ink); }

.qa-btn-outline {
    background: transparent;
    color: var(--qa-accent);
    border: 1px solid var(--qa-accent);
    border-radius: 8px;
    font-weight: 600;
}
.qa-btn-outline:hover { background: rgba(15,118,110,.08); color: var(--qa-accent-dark); }

.qa-pill-tabs {
    display: inline-flex;
    background: var(--qa-panel);
    border: 1px solid var(--qa-border);
    border-radius: 999px;
    padding: .2rem;
    gap: .2rem;
}
.qa-pill-tabs button, .qa-pill-tabs a {
    background: transparent;
    border: none;
    color: var(--qa-muted);
    border-radius: 999px;
    padding: .35rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.qa-pill-tabs button.active, .qa-pill-tabs a.active { background: var(--qa-accent); color: var(--qa-accent-ink); }

.qa-card {
    background: var(--qa-panel);
    border: 1px solid var(--qa-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}

.qa-card-title {
    color: var(--qa-text);
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: .6rem;
}

.qa-label-sm {
    display: block;
    color: var(--qa-muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .2rem;
}

/* Ticket System admin: a checkbox list of ticket types, grouped by department, used anywhere an
   outcome/CreatesOnClose picker needs to offer every type without turning into one long wrapped
   row of inline checkboxes. */
.qa-type-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    max-height: 260px;
    overflow-y: auto;
    padding: .5rem;
    border: 1px solid var(--qa-border);
    border-radius: 8px;
}

.qa-type-picker-col {
    min-width: 190px;
    flex: 0 0 auto;
}

.qa-type-picker-head {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--qa-muted);
    margin-bottom: .25rem;
}

.qa-type-picker .form-check {
    margin-bottom: .15rem;
}

.qa-type-picker .form-check-label {
    font-size: .85rem;
}

.qa-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .9rem;
}
@media (max-width: 900px) {
    .qa-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

.qa-kpi-tile {
    background: var(--qa-panel);
    border: 1px solid var(--qa-border);
    border-left: 4px solid var(--qa-accent);
    border-radius: 10px;
    padding: .9rem 1rem;
}
.qa-kpi-tile-warn { border-left-color: var(--qa-warn); background: var(--qa-warn-bg); }

.qa-kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--qa-text); line-height: 1.1; }
.qa-kpi-label { color: var(--qa-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem; }

.qa-pivot-table { font-size: .85rem; }
.qa-pivot-table th {
    color: var(--qa-muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--qa-border);
}
.qa-pivot-table td { border-bottom: 1px solid var(--qa-border); color: var(--qa-text); }

.qa-status-pill {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    border-radius: 999px;
    padding: .2rem .65rem;
}
.qa-status-submitted { background: var(--qa-status-submitted-bg); color: var(--qa-status-submitted-color); }
.qa-status-reviewed { background: var(--qa-status-reviewed-bg); color: var(--qa-status-reviewed-color); }
.qa-status-disputed { background: var(--qa-warn-bg); color: var(--qa-warn); }
.qa-status-complete { background: var(--qa-status-complete-bg); color: var(--qa-status-complete-color); }
.outage-timeline-item.done .outage-timeline-dot { background: var(--outage-done); }
.outage-timeline-item.skip .outage-timeline-dot { background: var(--outage-skip); }
/* ===== Meeting reminder toast (bottom-left, MainLayout) ===== */
.meeting-reminder-stack {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1150;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 320px;
}

.meeting-reminder-toast {
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-200);
    border-radius: 12px;
    box-shadow: var(--cx-card-shadow-hover, var(--cx-card-shadow));
    padding: 0.75rem 0.9rem;
    animation: meeting-reminder-in .18s ease-out;
}

@keyframes meeting-reminder-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.meeting-reminder-toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.meeting-reminder-toast-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--cx-accent);
}

.meeting-reminder-toast-title {
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.15rem;
}

.meeting-reminder-toast-time {
    font-size: 0.8rem;
    color: var(--cx-gray-500, #6b7280);
    margin-bottom: 0.55rem;
}

.meeting-reminder-toast-actions {
    display: flex;
    gap: 0.4rem;
}

/* ===== User menu (top bar username dropdown) ===== */
.app-user-menu-wrap {
    position: relative;
}

.app-user-trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0.25rem 0.1rem;
    cursor: pointer;
    color: inherit;
}

.app-user-trigger .app-user-name {
    font-weight: 500;
}

.app-user-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.app-user-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1041;
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-200);
    border-radius: 10px;
    box-shadow: var(--cx-card-shadow-hover, var(--cx-card-shadow));
    min-width: 220px;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
}

.app-user-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.5rem 0.65rem;
    border-radius: 7px;
    font-size: 0.88rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.app-user-menu-item:hover {
    background: var(--cx-surface-2);
}

/* ===== Ticket System =====
   Shared across Components/Pages/Tickets/*.razor and TicketsLayout — kept global (not per-component
   scoped CSS) since several pages reuse these same classes. Reuses the same --cx-* tokens as the
   rest of the app so this standalone module still "mantiene colores diseño". Modernization pass:
   bigger touch targets, a numbered step header on Submit (it genuinely is a 3-step sequence), card-
   based pickers instead of flat lists/tables, a consistent icon language (department icons, priority
   dots), inline field help captions, and a vertical timeline for ticket history — all theme-aware. */

/* Step header (Submit is a real 1-2-3 sequence: department, type, details — a numbered marker earns
   its place here, unlike most generic uses of "01/02/03"). */
.tix-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 14px;
    flex-wrap: wrap;
}

.tix-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cx-gray-600);
}

.tix-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 700;
    background: var(--cx-gray-200);
    color: var(--cx-gray-600);
    flex: 0 0 auto;
}

.tix-step.done .tix-step-num { background: var(--cx-good-soft); color: var(--cx-good); }
.tix-step.active { color: var(--cx-ink); }
.tix-step.active .tix-step-num { background: var(--cx-accent); color: var(--cx-white); }

.tix-step-sep {
    width: 24px;
    height: 1px;
    background: var(--cx-gray-300);
    flex: 0 0 auto;
}

/* Department cards: bigger touch targets, an icon, hover lift — the picker is the first impression
   of the whole module so it gets the most visual weight. */
.tix-dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 4px 0 20px;
}

.tix-dept-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--cx-gray-300);
    background: var(--cx-surface);
    box-shadow: var(--cx-card-shadow);
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.tix-dept-card:hover {
    box-shadow: var(--cx-card-shadow-hover);
    transform: translateY(-1px);
}

.tix-dept-card.on {
    border: 2px solid var(--cx-accent);
    background: var(--cx-accent-light);
    padding: 13px 15px; /* keep outer box the same size with the thicker border */
}

.tix-dept-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cx-accent-light);
    color: var(--cx-accent);
}

.tix-dept-card.on .tix-dept-icon { background: var(--cx-accent); color: var(--cx-white); }

.tix-dept-text { min-width: 0; }

.tix-dept-text b {
    display: block;
    font-size: 0.92rem;
}

.tix-dept-text span {
    display: block;
    color: var(--cx-gray-600);
    font-size: 0.78rem;
    line-height: 1.35;
    margin-top: 2px;
}

.tix-submit-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

/* Ticket type list: a scrollable card of rows, each row now a small information-dense card (name,
   priority dot, SLA text, confidential/urgent markers) instead of a bare label. */
.tix-type-list {
    flex: 1 1 300px;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    max-height: 640px;
    overflow-y: auto;
}

.tix-type-group {
    padding: 12px 16px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cx-gray-600);
    background: var(--cx-gray-100);
    border-bottom: 1px solid var(--cx-gray-200);
    position: sticky;
    top: 0;
    z-index: 1;
}

.tix-type-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 13px 16px;
    border: 0;
    border-bottom: 1px solid var(--cx-gray-200);
    background: var(--cx-surface);
    cursor: pointer;
}

.tix-type-item.on {
    background: var(--cx-accent-light);
    box-shadow: inset 4px 0 0 var(--cx-accent);
}

.tix-type-item b { font-size: 0.92rem; }

.tix-type-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.tix-type-item small {
    display: block;
    color: var(--cx-gray-600);
    font-size: 0.76rem;
}

.tix-form-area {
    flex: 2 1 480px;
    min-width: 0;
}

/* A field is label + optional helper caption (promoted out of the input's placeholder, so guidance
   stays visible even once the field is filled in) + a noticeably larger input. */
.tix-field {
    margin-bottom: 18px;
}

.tix-field-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cx-ink);
    margin-bottom: 2px;
}

.tix-field-required {
    color: var(--cx-bad);
    font-weight: 700;
}

.tix-field-help {
    font-size: 0.78rem;
    color: var(--cx-gray-600);
    margin-bottom: 7px;
    line-height: 1.4;
}

.tix-field .form-control,
.tix-field .form-select,
.tix-field textarea {
    font-size: 0.95rem;
    padding: 10px 13px;
    border-radius: 10px;
    border-color: var(--cx-gray-300);
}

.tix-field .form-control:focus,
.tix-field .form-select:focus {
    border-color: var(--cx-accent);
    box-shadow: 0 0 0 3px var(--cx-accent-light);
}

.tix-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.86rem;
    line-height: 1.4;
    margin-bottom: 14px;
}

.tix-banner svg { flex: 0 0 auto; margin-top: 1px; }
.tix-banner > span:last-child { flex: 1 1 auto; min-width: 0; }

.tix-banner-purple { background: var(--cx-accent-light); color: var(--cx-accent-2); border: 1px solid var(--cx-gray-300); }
.tix-banner-amber { background: var(--cx-warn-soft); color: var(--cx-warn); border: 1px solid var(--cx-gray-300); }
.tix-banner-red { background: var(--cx-bad-soft); color: var(--cx-bad); border: 1px solid var(--cx-gray-300); }
.tix-banner-green { background: var(--cx-good-soft); color: var(--cx-good); border: 1px solid var(--cx-gray-300); }

.tix-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tix-chip {
    border-radius: 999px;
    padding: 8px 14px;
    border: 1px solid var(--cx-gray-300);
    background: var(--cx-surface);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.tix-chip.on {
    background: var(--cx-accent);
    border-color: var(--cx-accent);
    color: var(--cx-white);
}

/* Reports hub charts (Volume & Trend line chart, inline <svg>). Plain, non-interactive — thin
   2px lines, recessive gridlines/axes, color only ever means the same series everywhere. */
.tix-chart-svg {
    width: 100%;
    height: auto;
    max-height: 260px;
}

.tix-chart-axis {
    stroke: var(--cx-gray-300);
    stroke-width: 1;
}

.tix-chart-grid {
    stroke: var(--cx-gray-200);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.tix-chart-label {
    font-size: 9px;
    fill: var(--cx-gray-600);
}

.tix-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
}

.tix-overdue {
    color: var(--cx-bad);
    font-weight: 700;
}

.tix-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.tix-status-submitted { background: var(--cx-accent-light); color: var(--cx-accent-dark); }
.tix-status-inprogress { background: var(--cx-warn-soft); color: var(--cx-warn); }
.tix-status-waitingonrequester { background: var(--cx-bad-soft); color: var(--cx-bad); }
.tix-status-closed { background: var(--cx-good-soft); color: var(--cx-good); }
.tix-status-confidential { background: var(--cx-accent-light); color: var(--cx-accent-2); }

/* Priority: a colored dot + label rather than bare enum text, so severity reads at a glance in every
   table/list (never color alone — the word is always there too). */
.tix-priority-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.tix-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.tix-priority-low .tix-priority-dot { background: var(--cx-gray-600); }
.tix-priority-medium .tix-priority-dot { background: var(--cx-accent); }
.tix-priority-high .tix-priority-dot { background: var(--cx-warn); }
.tix-priority-urgent .tix-priority-dot { background: var(--cx-bad); }
.tix-priority-urgent { color: var(--cx-bad); }

/* Initials avatar for a requester/assignee in a dense list — lets a row be scanned by face/color
   instead of parsing a name string every time. */
.tix-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--cx-accent-light);
    color: var(--cx-accent-dark);
    flex: 0 0 auto;
}

.tix-avatar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* List tables (My tickets / Queue): more breathing room than a dense admin grid, a soft hover, and a
   primary/secondary line stacked in the same cell instead of two separate columns. */
.tix-list-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.tix-list-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cx-gray-600);
    padding: 0 14px 10px;
    border-bottom: 1px solid var(--cx-gray-300);
}

.tix-list-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--cx-gray-200);
    vertical-align: middle;
    font-size: 0.9rem;
}

.tix-list-table tbody tr {
    transition: background .1s ease;
}

.tix-list-table tbody tr:hover {
    background: var(--cx-surface-2);
}

.tix-list-cell-primary {
    font-weight: 600;
    color: var(--cx-ink);
}

.tix-list-cell-sub {
    font-size: 0.78rem;
    color: var(--cx-gray-600);
    margin-top: 2px;
}

/* Ticket detail header: the request's title and its at-a-glance meta in one card. */
.tix-detail-header {
    background: var(--cx-surface);
    border-radius: 16px;
    box-shadow: var(--cx-card-shadow);
    padding: 20px 22px;
    margin-top: 10px;
}

.tix-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 0.8rem;
    color: var(--cx-gray-600);
    margin-bottom: 6px;
}

.tix-meta-chip {
    background: var(--cx-gray-100);
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
}

/* SLA clocks: an icon + label + value row above a thicker, rounder progress track than a plain
   browser default, color-coded by state (met/running/paused/overdue). */
.tix-sla-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.tix-sla-row:last-child { margin-bottom: 0; }

.tix-sla-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.tix-sla-body { flex: 1 1 auto; min-width: 0; }

.tix-sla-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.84rem;
    margin-bottom: 5px;
}

.tix-sla-head b { font-size: 0.84rem; }

.tix-sla-track {
    height: 8px;
    border-radius: 4px;
    background: var(--cx-gray-200);
    overflow: hidden;
}

.tix-sla-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .2s ease;
}

/* History as a vertical timeline — a connecting line + dots reads the sequence at a glance instead
   of a flat repeated block list. */
.tix-timeline {
    position: relative;
    padding-left: 22px;
}

.tix-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--cx-gray-200);
}

.tix-timeline-item {
    position: relative;
    padding-bottom: 16px;
}

.tix-timeline-item:last-child { padding-bottom: 0; }

.tix-timeline-item::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cx-accent);
    border: 2px solid var(--cx-surface);
}

.tix-timeline-item.internal::before { background: var(--cx-gray-600); }

/* Dashboard: the "By type" and "Aging" cards sit side by side on wide screens, stack on narrow ones. */
.tix-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* KPI tiles with colored icon chips, same recipe as the intranet home page's KPI cards
   (Components/Pages/Home.razor.css's .home-kpi-card/.tone-*) so the dashboard isn't flat/
   monochrome in dark mode — same theme-aware --cx-* tokens, just not scoped to Home.razor. */
.tix-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.tix-kpi-card {
    background: var(--cx-surface);
    border-radius: 14px;
    box-shadow: var(--cx-card-shadow);
    padding: 14px 16px;
}

.tix-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.tix-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.tix-kpi-label {
    font-size: 0.76rem;
    color: var(--cx-gray-600);
    margin-top: 2px;
}

.tix-tone-good   { background: var(--cx-good-soft);   color: var(--cx-good); }
.tix-tone-warn   { background: var(--cx-warn-soft);   color: var(--cx-warn); }
.tix-tone-bad    { background: var(--cx-bad-soft);    color: var(--cx-bad); }
.tix-tone-accent { background: var(--cx-accent-light); color: var(--cx-accent); }

.tix-kpi-value.tix-tone-text-good { color: var(--cx-good); }
.tix-kpi-value.tix-tone-text-warn { color: var(--cx-warn); }
.tix-kpi-value.tix-tone-text-bad  { color: var(--cx-bad); }

/* Reports (Phase 5) — generic labeled bar rows, used for the aging buckets, Pareto breakdowns and
   rating distribution. Deliberately separate from .tix-sla-* (which has its own icon+head layout
   built for exactly two SLA clocks) — this is the plain "label … value" + track/fill shape reused
   across several report tabs. */
.tix-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.tix-bar-row:last-child { margin-bottom: 0; }

.tix-bar-label {
    flex: 0 0 180px;
    font-size: 0.84rem;
    color: var(--cx-gray-600);
}

.tix-bar-track {
    flex: 1 1 auto;
    height: 10px;
    border-radius: 5px;
    background: var(--cx-gray-200);
    overflow: hidden;
    min-width: 40px;
}

.tix-bar-fill {
    height: 100%;
    border-radius: 5px;
    background: var(--cx-accent);
    transition: width .2s ease;
}

.tix-bar-value {
    flex: 0 0 auto;
    min-width: 54px;
    text-align: right;
    font-size: 0.84rem;
    font-weight: 600;
}

/* Reports hub/custom builder layout bits. */
.tix-report-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tix-report-filters .form-select,
.tix-report-filters .form-control {
    width: auto;
}

.tix-builder-grid {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 860px) {
    .tix-builder-grid { grid-template-columns: 1fr; }
}

.tix-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tix-chip-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--cx-gray-300);
    font-size: 0.82rem;
    cursor: pointer;
    user-select: none;
    background: var(--cx-surface);
}

.tix-chip-check.active {
    background: var(--cx-accent-light);
    border-color: var(--cx-accent);
    color: var(--cx-accent);
}

/* Custom report builder: date range as two labeled fields instead of two bare inputs, and a
   dropdown panel for long pick-lists (e.g. ticket types) instead of an unbounded chip flood. */
.tix-date-range {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tix-date-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 150px;
}

.tix-date-field input { width: 100%; }

.tix-dropdown { position: relative; }

.tix-dropdown-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--cx-gray-300);
    background: var(--cx-surface);
    font-size: 0.86rem;
    cursor: pointer;
}

.tix-dropdown-toggle svg { flex: 0 0 auto; color: var(--cx-gray-600); }

.tix-dropdown-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--cx-surface);
    border: 1px solid var(--cx-gray-300);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    padding: 6px;
}

.tix-dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.86rem;
    cursor: pointer;
}

.tix-dropdown-option:hover { background: var(--cx-gray-100); }
.tix-dropdown-option input { margin: 0; }

/* Hiring request's dedicated form (TicketsSubmitHiringRequest.razor): the day-by-day schedule grid.
   min-width is wide enough that the Client/Start date/Shift type columns don't get squeezed out by
   the 7 min-width-110px day columns under the table's default auto layout — without their own
   min-width, those leading <select>s (width:100% via .form-select) could collapse down to just
   their dropdown arrow, with the chosen value picked but not visible. */
.tix-schedule-table {
    min-width: 1550px;
}

.tix-lead-cell {
    min-width: 150px;
    vertical-align: top;
}

.tix-day-cell {
    min-width: 110px;
    vertical-align: top;
}

.tix-day-cell .form-select {
    font-size: 0.78rem;
    padding: 4px 6px;
}

/* TicketDetail.razor's "Details"/"Recruiter" tab switcher (Phase 6D-3) — only shown for ticket
   types with a Recruiter view (TicketDetailView.HasRecruiterView). */
.tix-detail-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--cx-gray-300);
    margin-top: 12px;
}

.tix-detail-tab {
    appearance: none;
    background: none;
    border: none;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--cx-gray-600);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.tix-detail-tab:hover { color: var(--cx-accent); }
.tix-detail-tab.active { color: var(--cx-accent); border-bottom-color: var(--cx-accent); }

/* Recruiter tab (TicketsRecruiterPanel.razor): one card per start-date group, with a wide,
   horizontally-scrolling table of editable per-seat FilledByTeam fields — same min-width-column
   reasoning as .tix-schedule-table above, just looser since there's no per-day grid here. */
.tix-recruiter-table {
    min-width: 760px;
}

.tix-recruiter-table th, .tix-recruiter-table td {
    vertical-align: middle;
}

.tix-recruiter-group-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}