/* ==================== MODERN DESIGN SYSTEM ==================== */

/*
 * Metric-matched fallback for Inter.
 *
 * Before this @font-face existed, body text rendered with the system
 * `sans-serif` until Inter arrived from fonts.gstatic.com, then re-rendered
 * with Inter. Inter's x-height and ascent/descent differ from system
 * sans-serif fonts, so the swap reflowed every text node on the page —
 * showing up in the Chrome DevTools "Layout shift culprits" panel as
 * "Web font" (the single largest remaining CLS contributor after Phase G).
 *
 * The override values below were computed by Capsize for Inter -> Arial.
 * With these in place, text rendered in 'Inter Fallback' takes up the same
 * vertical space and the same advance width as text rendered in Inter, so
 * when the real Inter file finishes downloading the swap is metrically
 * invisible: no reflow, no CLS.
 *
 * Source: https://web.dev/articles/css-size-adjust + Capsize for Inter.
 */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    ascent-override: 90.20%;
    descent-override: 22.48%;
    line-gap-override: 0%;
    size-adjust: 107.40%;
}

/* General Body & Font Styling */
html {
    scroll-behavior: auto; /* Disable smooth scroll for instant scrolling */
}

body {
    /* 'Inter Fallback' sits between the real Inter and the generic
       sans-serif so the metric override is what's used during the brief
       window before Inter loads. See the @font-face above for details. */
    font-family: 'Inter', 'Inter Fallback', sans-serif;
    font-size: 14px;
    /* NEVER put transform/filter/perspective on body: any of them (even a
       no-op translateZ(0), removed 2026-07) makes body the containing block
       for every position:fixed descendant, so on pages where the body
       scrolls (clients.html etc.) modals and toasts anchor to the document
       instead of the viewport. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --ops-card-radius: 8px;
    --ops-control-radius: 8px;
    --ops-control-padding-y: 8px;
    --ops-control-padding-x: 14px;
    --ops-control-font-size: 0.84rem;
    --ops-side-panel-width: 264px;
    --compose-bar-height: 80px;
}

/* ============================================================
   DESIGN SYSTEM TOKENS — Phase 3.5
   Light mode is the default. Dark mode overrides via [data-theme="dark"].
   These tokens are PURELY ADDITIVE: existing styles are untouched.
   New components and refactors should consume these tokens instead of raw hex.
   ============================================================ */

:root {
    /* === Surfaces === */
    --bg-app: #F8FAFC;            /* page background */
    --bg-card: #FFFFFF;           /* primary card / panel surface */
    --bg-subtle: #F1F5F9;         /* hover row, header strip */
    --bg-muted: #E2E8F0;          /* disabled fields, subtle dividers */
    --bg-overlay: rgba(15, 23, 42, 0.5);  /* modal backdrop */

    /* === Text === */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --text-inverse: #FFFFFF;
    --text-link: #4F46E5;

    /* === Borders === */
    --border-default: #E2E8F0;
    --border-strong: #CBD5E1;
    --border-subtle: #F1F5F9;

    /* === Brand / Primary action (indigo) === */
    --color-brand: #4F46E5;
    --color-brand-hover: #4338CA;
    --color-brand-fg: #FFFFFF;
    --color-brand-bg: #EEF2FF;
    --color-brand-border: #C7D2FE;

    /* === Selected / Active state (cyan) === */
    --color-selected: #06B6D4;
    --color-selected-fg: #FFFFFF;
    --color-selected-bg: #ECFEFF;
    --color-selected-border: #A5F3FC;

    /* === Success / Open status (emerald) === */
    --color-success: #059669;
    --color-success-fg: #065F46;
    --color-success-bg: #D1FAE5;
    --color-success-border: #A7F3D0;

    /* === Warning / Attention (amber) === */
    --color-warning: #D97706;
    --color-warning-fg: #92400E;
    --color-warning-bg: #FEF3C7;
    --color-warning-border: #FDE68A;

    /* === Danger / Destructive (rose) === */
    --color-danger: #E11D48;
    --color-danger-hover: #BE123C;
    --color-danger-fg: #881337;
    --color-danger-bg: #FFE4E6;
    --color-danger-border: #FECDD3;

    /* === Effects === */
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-overlay: 0 16px 40px rgba(15, 23, 42, 0.18);
    --ring-focus: 0 0 0 3px rgba(79, 70, 229, 0.35);

    /* === Typography === */
    --font-numeric: "Inter", "Inter Fallback", sans-serif;
    --font-feature-numeric: "tnum" 1, "lnum" 1;  /* tabular numerals for tables */
}

[data-theme="dark"] {
    /* === Surfaces === */
    --bg-app: #0B1120;
    --bg-card: #111827;
    --bg-subtle: #1F2937;
    --bg-muted: #374151;
    --bg-overlay: rgba(0, 0, 0, 0.65);

    /* === Text === */
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --text-inverse: #0F172A;
    --text-link: #818CF8;

    /* === Borders === */
    --border-default: #1F2937;
    --border-strong: #374151;
    --border-subtle: #111827;

    /* === Brand (lighter for contrast on dark) === */
    --color-brand: #818CF8;
    --color-brand-hover: #6366F1;
    --color-brand-fg: #0F172A;
    --color-brand-bg: #1E1B4B;
    --color-brand-border: #3730A3;

    /* === Selected (lighter cyan on dark) === */
    --color-selected: #22D3EE;
    --color-selected-fg: #0F172A;
    --color-selected-bg: #164E63;
    --color-selected-border: #0E7490;

    /* === Success === */
    --color-success: #34D399;
    --color-success-fg: #ECFDF5;
    --color-success-bg: #064E3B;
    --color-success-border: #047857;

    /* === Warning === */
    --color-warning: #FBBF24;
    --color-warning-fg: #FFFBEB;
    --color-warning-bg: #78350F;
    --color-warning-border: #B45309;

    /* === Danger === */
    --color-danger: #FB7185;
    --color-danger-hover: #F43F5E;
    --color-danger-fg: #FFF1F2;
    --color-danger-bg: #881337;
    --color-danger-border: #BE123C;

    /* === Effects === */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.6);
    --ring-focus: 0 0 0 3px rgba(129, 140, 248, 0.4);
}


/* Desktop layout containment:
   prevent window-level scroll into empty space and keep scrolling inside panels.
   Scoped to pages with #app-container (index.html) so other pages can scroll normally. */
@media (min-width: 768px) {
    body:has(#app-container) {
        overflow: hidden;
    }

    #app-container {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden;
    }

    #app-container > .flex.flex-grow.overflow-hidden.relative,
    #app-container .flex-grow.flex.flex-col.overflow-hidden.min-w-0 {
        min-height: 0;
    }

    #app-container main,
    #sidebar,
    #on-leave-sidebar {
        min-height: 0;
        overscroll-behavior: contain;
    }

    #team-management-view,
    #team-management-content,
    #team-management-content section,
    #team-management-content .grid {
        min-width: 0;
        max-width: 100%;
    }

    #team-management-content {
        overflow-x: hidden;
    }
}

body.leader-workspace-active #sidebar,
body.leader-workspace-active #on-leave-sidebar,
body.leader-workspace-active #desktop-tab-bar,
body.leader-workspace-active #mobile-subtabs,
body.leader-workspace-active #tickets-filter-bar,
body.leader-workspace-active #badges-header {
    display: none !important;
}

body.leader-workspace-active #app-container main {
    padding: 0 !important;
}

body.leader-workspace-active #team-management-view {
    display: block;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

body.leader-workspace-active #team-management-content {
    max-width: none !important;
    overflow-x: hidden;
    padding-right: 0 !important;
}

/* ── Leader Workspace shell (2026-07 redesign) ─────────────────────────────
   Collapsible grouped sidebar + content pane, replacing the horizontal tab
   rail. Everything is variable-driven so a future light theme is a
   variables-only change (Phase D). Zero hex literals in shell rules — colors
   live in the custom properties below. */
.lw-shell {
    --lw-sidebar-w: 256px;
    --lw-sidebar-w-collapsed: 64px;
    /* Surface/border/text values mirror the dashboard's v2 design tokens
       (css/v2-tokens.css --v2-surface/-soft/--v2-border/--v2-text/--v2-muted,
       dark block) so the standalone shell reads as the same product even
       though v2-tokens.css itself is not loaded on this page. */
    --lw-surface: rgba(24, 27, 32, 0.94);
    --lw-surface-2: rgba(31, 36, 43, 0.9);
    --lw-border: rgba(176, 184, 194, 0.16);
    --lw-text: #F5F7FA;
    --lw-text-muted: #A8B1BD;
    --lw-text-faint: #64748B;
    --lw-accent: #6366F1;
    --lw-badge-bg: color-mix(in srgb, var(--lw-accent) 18%, transparent);
    --lw-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    display: grid;
    gap: 16px;
    grid-template-columns: var(--lw-sidebar-w) minmax(0, 1fr);
    transition: grid-template-columns 220ms ease;
}

.lw-shell--collapsed {
    grid-template-columns: var(--lw-sidebar-w-collapsed) minmax(0, 1fr);
}

/* Per-section accents carried over from the old rail. */
.lw-shell [data-tab-key="overview"] { --lw-accent: #34D399; }
.lw-shell [data-tab-key="today"] { --lw-accent: #6366F1; }
.lw-shell [data-tab-key="reports"] { --lw-accent: #60A5FA; }
.lw-shell [data-tab-key="scores"] { --lw-accent: #FBBF24; }
.lw-shell [data-tab-key="attendance"] { --lw-accent: #818CF8; }
.lw-shell [data-tab-key="broadcasts"] { --lw-accent: #FB7185; }
.lw-shell [data-tab-key="macros"] { --lw-accent: #F59E0B; }
.lw-shell [data-tab-key="sla"] { --lw-accent: #F87171; }
.lw-shell [data-tab-key="rules"] { --lw-accent: #A3E635; }
.lw-shell [data-tab-key="email"] { --lw-accent: #38BDF8; }
.lw-shell [data-tab-key="kpi"] { --lw-accent: #818cf8; }
.lw-shell [data-tab-key="mailbox"] { --lw-accent: #C084FC; }
.lw-shell [data-tab-key="settings"] { --lw-accent: #A78BFA; }

.lw-sidebar {
    align-self: start;
    backdrop-filter: blur(14px) saturate(160%);
    background: var(--lw-surface);
    border: 1px solid var(--lw-border);
    border-radius: 14px;
    box-shadow: var(--lw-shadow);
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 96px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    position: sticky;
    scrollbar-width: none;
    top: 12px;
    z-index: 30;
}

.lw-sidebar::-webkit-scrollbar {
    display: none;
}

.lw-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.lw-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
}

.lw-nav-group:first-child {
    padding-top: 4px;
}

.lw-nav-group--bottom {
    border-top: 1px solid var(--lw-border);
    margin-top: auto;
    padding-top: 10px;
}

.lw-nav-group-label {
    color: var(--lw-text-faint);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 0 10px 4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.lw-nav-divider {
    border: 0;
    border-top: 1px solid var(--lw-border);
    display: none;
    margin: 0 8px 6px;
}

.lw-sidebar [data-lw-nav],
.lw-sidebar-toggle {
    align-items: center;
    border-radius: 9px;
    color: var(--lw-text-muted);
    display: flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 9px;
    min-height: 40px;
    padding: 8px 10px;
    position: relative;
    text-align: left;
    transition: background-color 140ms ease, color 140ms ease;
    white-space: nowrap;
    width: 100%;
}

.lw-sidebar [data-lw-nav] .lw-tab-icon,
.lw-sidebar-toggle .lw-tab-icon {
    flex: 0 0 auto;
    height: 16px;
    opacity: 0.8;
    transition: opacity 140ms ease, transform 180ms ease;
    width: 16px;
}

.lw-sidebar [data-lw-nav]:hover,
.lw-sidebar-toggle:hover {
    background: var(--lw-surface-2);
    color: var(--lw-text);
}

.lw-sidebar [data-lw-nav][aria-selected="true"] {
    background: color-mix(in srgb, var(--lw-accent) 13%, transparent);
    box-shadow: inset 2px 0 0 var(--lw-accent);
    color: color-mix(in srgb, var(--lw-accent) 72%, var(--lw-text));
}

.lw-sidebar [data-lw-nav][aria-selected="true"] .lw-tab-icon {
    opacity: 1;
    transform: scale(1.08);
}

.lw-sidebar [data-lw-nav]:focus-visible,
.lw-sidebar-toggle:focus-visible {
    outline: 2px solid var(--lw-accent);
    outline-offset: -2px;
}

.lw-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lw-nav-badge {
    background: var(--lw-badge-bg);
    border: 1px solid color-mix(in srgb, var(--lw-accent) 45%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--lw-accent) 80%, var(--lw-text));
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
    min-width: 20px;
    padding: 4px 6px;
    text-align: center;
}

.lw-nav-badge--dot {
    border-radius: 999px;
    height: 8px;
    min-width: 8px;
    padding: 0;
    width: 8px;
}

.lw-sidebar-toggle {
    border-bottom: 1px solid var(--lw-border);
    border-radius: 9px 9px 0 0;
    margin-bottom: 4px;
}

/* Collapsed: icon-only column; labels/group headings hide, badges become
   corner dots, tooltips (title attr) carry the text. */
.lw-sidebar--collapsed .lw-nav-label,
.lw-sidebar--collapsed .lw-nav-group-label {
    display: none;
}

.lw-sidebar--collapsed .lw-nav-divider {
    display: block;
}

.lw-sidebar--collapsed [data-lw-nav],
.lw-sidebar--collapsed .lw-sidebar-toggle {
    justify-content: center;
    padding: 8px 0;
}

.lw-sidebar--collapsed .lw-collapse-icon {
    transform: rotate(180deg);
}

.lw-sidebar--collapsed .lw-nav-badge {
    font-size: 0;
    height: 8px;
    min-width: 8px;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 8px;
    width: 8px;
}

.lw-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Content header — the pane's title band (NOT a page header; the standalone
   page keeps .leader-page-topbar). */
.lw-content-header {
    align-items: center;
    backdrop-filter: blur(14px) saturate(160%);
    background: var(--lw-surface, rgba(24, 27, 32, 0.94));
    border: 1px solid var(--lw-border, rgba(176, 184, 194, 0.16));
    border-radius: 14px;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
}

.lw-content-title {
    flex: 1 1 auto;
    min-width: 0;
}

.lw-content-heading {
    color: var(--lw-text, #F5F7FA);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lw-content-meta {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.lw-meta-chip {
    background: var(--lw-surface-2, rgba(31, 36, 43, 0.9));
    border: 1px solid var(--lw-border, rgba(176, 184, 194, 0.16));
    border-radius: 999px;
    color: var(--lw-text-muted, #A8B1BD);
    font-size: 0.7rem;
    font-weight: 800;
    max-width: 180px;
    overflow: hidden;
    padding: 4px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lw-meta-chip--online {
    border-color: rgba(52, 211, 153, 0.4);
    color: #6EE7B7;
}

.lw-hamburger {
    align-items: center;
    border: 1px solid var(--lw-border, rgba(176, 184, 194, 0.16));
    border-radius: 9px;
    color: var(--lw-text-muted, #A8B1BD);
    display: none;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.lw-drawer-backdrop {
    background: rgba(2, 6, 23, 0.6);
    inset: 0;
    position: fixed;
    z-index: 55;
}

/* Overview dashboard */
.lw-stat-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .lw-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .lw-stat-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.lw-stat-card {
    background: var(--lw-surface, rgba(24, 27, 32, 0.94));
    border: 1px solid var(--lw-border, rgba(176, 184, 194, 0.16));
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    text-align: left;
    transition: border-color 140ms ease, transform 140ms ease;
}

.lw-stat-card:hover {
    border-color: color-mix(in srgb, var(--lw-accent) 45%, transparent);
    transform: translateY(-1px);
}

.lw-stat-icon {
    align-items: center;
    background: color-mix(in srgb, var(--lw-accent) 14%, transparent);
    border-radius: 9px;
    color: var(--lw-accent);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    margin-bottom: 4px;
    width: 28px;
}

.lw-stat-icon .lw-tab-icon {
    height: 15px;
    width: 15px;
}

.lw-stat-value {
    color: var(--lw-text, #F5F7FA);
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1.1;
}

.lw-stat-label {
    color: var(--lw-text-muted, #A8B1BD);
    font-size: 0.74rem;
    font-weight: 800;
}

.lw-stat-sub {
    color: var(--lw-text-faint, #64748B);
    font-size: 0.68rem;
}

.lw-overview-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
    .lw-overview-grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

.lw-panel {
    background: var(--lw-surface, rgba(24, 27, 32, 0.94));
    border: 1px solid var(--lw-border, rgba(176, 184, 194, 0.16));
    border-radius: 14px;
    padding: 16px;
}

.lw-panel-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.lw-panel-head h3 {
    color: var(--lw-text, #F5F7FA);
    font-size: 0.9rem;
    font-weight: 900;
}

.lw-panel-link {
    color: var(--lw-text-muted, #A8B1BD);
    font-size: 0.72rem;
    font-weight: 800;
}

.lw-panel-link:hover {
    color: var(--lw-text, #F5F7FA);
}

.lw-feed {
    display: flex;
    flex-direction: column;
}

.lw-feed-row {
    align-items: center;
    border-top: 1px solid var(--lw-border, rgba(176, 184, 194, 0.16));
    display: flex;
    gap: 10px;
    padding: 8px 0;
}

.lw-feed-row:first-child {
    border-top: 0;
}

.lw-feed-dot {
    background: var(--lw-accent, #6366F1);
    border-radius: 999px;
    flex: 0 0 auto;
    height: 7px;
    opacity: 0.8;
    width: 7px;
}

.lw-feed-text {
    color: var(--lw-text-muted, #A8B1BD);
    flex: 1 1 auto;
    font-size: 0.78rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lw-feed-text strong {
    color: var(--lw-text, #F5F7FA);
    font-weight: 800;
}

.lw-feed-link {
    color: #818CF8;
    font-weight: 800;
}

.lw-feed-age {
    color: var(--lw-text-faint, #64748B);
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

.lw-feed-empty {
    color: var(--lw-text-faint, #64748B);
    font-size: 0.78rem;
    padding: 12px 0;
}

.lw-progress-head {
    color: var(--lw-text-muted, #A8B1BD);
    display: flex;
    font-size: 0.74rem;
    font-weight: 800;
    justify-content: space-between;
    margin-bottom: 4px;
}

.lw-progress-detail {
    color: var(--lw-text-faint, #64748B);
    font-variant-numeric: tabular-nums;
}

.lw-progress-track {
    background: var(--lw-surface-2, rgba(31, 36, 43, 0.9));
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}

.lw-progress-fill {
    border-radius: 999px;
    height: 100%;
    transition: width 400ms ease;
}

.lw-skel--stat {
    border-radius: 14px;
    height: 104px;
}

/* Mobile / tablet: sidebar becomes a slide-over drawer. */
@media (max-width: 1023.98px) {
    .lw-shell,
    .lw-shell--collapsed {
        display: block;
    }

    .lw-hamburger {
        display: inline-flex;
    }

    .lw-sidebar {
        bottom: 0;
        border-radius: 0 14px 14px 0;
        left: 0;
        max-height: none;
        position: fixed;
        top: 0;
        transform: translateX(-105%);
        transition: transform 220ms ease;
        -webkit-overflow-scrolling: touch;
        width: min(280px, 85vw);
        z-index: 60;
    }

    /* Collapse is a desktop concept — the drawer always shows labels. */
    .lw-sidebar--collapsed .lw-nav-label {
        display: block;
    }

    .lw-sidebar--collapsed .lw-nav-group-label {
        display: block;
    }

    .lw-sidebar--collapsed [data-lw-nav],
    .lw-sidebar--collapsed .lw-sidebar-toggle {
        justify-content: flex-start;
        padding: 8px 10px;
    }

    .lw-sidebar--collapsed .lw-nav-badge {
        font-size: 0.66rem;
        height: auto;
        min-width: 20px;
        padding: 4px 6px;
        position: static;
        width: auto;
    }

    .lw-sidebar--drawer-open {
        transform: translateX(0);
    }

    .lw-sidebar-toggle {
        display: none;
    }
}

/* KPI hub sub-navigation — a compact segmented control under the main rail. */
.lw-subtabs {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(129, 140, 248, 0.16);
    border-radius: 10px;
    display: inline-flex;
    gap: 4px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: none;
}

.lw-subtabs::-webkit-scrollbar {
    display: none;
}

.lw-subtabs button {
    border-radius: 7px;
    color: #A8B1BD;
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 800;
    min-height: 32px;
    padding: 6px 12px;
    transition: background-color 140ms ease, color 140ms ease;
    white-space: nowrap;
}

.lw-subtabs button[aria-selected="true"] {
    background: rgba(129, 140, 248, 0.15);
    color: #c7d2fe;
}

.lw-subtabs button:hover {
    background: rgba(30, 41, 59, 0.88);
    color: #F5F7FA;
}

.leader-workspace-eyebrow {
    color: #A5B4FC;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    body.leader-workspace-active #team-management-view {
        padding: 10px;
    }
}

/* ── Leader Workspace — light theme (follows the dashboard's stored choice) ──
   The shell is variable-driven, so light mode is mostly a --lw-* remap on
   .lw-shell (surfaces flip to white/slate, text to dark ink). This block also
   themes the embedded shell inside index.html light mode without touching that
   file. A few shell bits use literal colors (subtabs, online chip, feed link)
   and are overridden explicitly. Page chrome (topbar/body/status/buttons) is
   scoped to .leader-workspace-standalone so it only affects the standalone
   page. Palette matches the existing light overrides: white/slate surfaces,
   #111827 ink, #526173 muted, indigo/teal accents — same values as
   css/v2-tokens.css's html[data-theme="light"] --v2-surface/-soft/--v2-border/
   --v2-text/--v2-muted block. */
html[data-theme="light"] .lw-shell {
    --lw-surface: rgba(255, 255, 255, 0.96);
    --lw-surface-2: rgba(241, 245, 249, 0.94);
    --lw-border: rgba(71, 85, 105, 0.18);
    --lw-text: #111827;
    --lw-text-muted: #526173;
    --lw-text-faint: #64748b;
    --lw-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 22px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .lw-meta-chip--online {
    border-color: rgba(5, 150, 105, 0.4);
    color: #047857;
}

html[data-theme="light"] .lw-feed-link {
    color: #4f46e5;
}

html[data-theme="light"] .lw-subtabs {
    background: rgba(241, 245, 249, 0.9);
    border-color: rgba(79, 70, 229, 0.22);
}

html[data-theme="light"] .lw-subtabs button {
    color: #475569;
}

html[data-theme="light"] .lw-subtabs button[aria-selected="true"] {
    background: rgba(204, 251, 241, 0.9);
    color: #4338ca;
}

html[data-theme="light"] .lw-subtabs button:hover {
    background: rgba(226, 232, 240, 0.9);
    color: #0f172a;
}

/* Standalone leader-workspace page chrome (only this page carries
   .leader-workspace-standalone; index.html embeds the shell without it). */
html[data-theme="light"] body.leader-workspace-standalone {
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 50%, #eef2ff 100%);
    background-attachment: fixed;
    color: #0f172a;
}

html[data-theme="light"] .leader-page-topbar {
    background: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] #leader-page-title {
    color: #0f172a;
}

html[data-theme="light"] .leader-workspace-eyebrow {
    color: #4338ca;
}

html[data-theme="light"] #leader-page-status {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}

html[data-theme="light"] #leader-page-refresh {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.15);
    color: #1e293b;
}

html[data-theme="light"] #leader-page-back {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(217, 119, 6, 0.4);
    color: #b45309;
}

html[data-theme="light"] #leader-page-signout {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(220, 38, 38, 0.35);
    color: #b91c1c;
}

/* Tab-body text safety net: tab content rendered by team-management.js uses
   Tailwind utilities. Opaque dark cards keep their own text-* utilities
   (readable on dark); text WITHOUT an explicit utility inherits a dark ink so it
   stays legible on the light page. Tailwind bg-* utilities are intentionally NOT
   overridden here to avoid recoloring purposeful accents. */
html[data-theme="light"] #leader-workspace-tab-body {
    color: #1e293b;
}

/* ── Leader Workspace tab CONTENT — light-theme utility remap ───────────────
   The tab bodies (Overview / Today / Macros / SLA / Rules / Scores /
   Attendance / Broadcasts / Email / Mailbox / Reports / KPI / Settings) are
   rendered by js/team-management.js with HARDCODED dark Tailwind utilities
   (bg-gray-950, text-gray-100, border-gray-700, amber tints, etc.). In light
   mode those dark surfaces persist and their light text turns unreadable
   (dark-on-dark cards, light-on-light labels). This block remaps the dark
   utilities to a light palette.

   SCOPE — every rule below is triple-scoped to:
     html[data-theme="light"]                 → light theme ONLY (dark mode is
                                                 never matched → stays identical)
     body.leader-workspace-standalone         → the standalone page ONLY. This
                                                 class exists ONLY on
                                                 leader-workspace.html; index.html
                                                 loads style.css but never carries
                                                 it, so these overrides CANNOT leak
                                                 to the dashboard.
     #team-management-content                 → the tab-content container ONLY
                                                 (the topbar/status live outside it
                                                 and keep their own tuned styles).

   Semi-transparent ACCENT backgrounds (red/emerald/cyan/indigo/... at /10–/40)
   are intentionally NOT recolored: over the light page they render as pleasant
   pale tints. Only their light TEXT is darkened for contrast. !important is
   required to beat the utility classes. Hover: variants that share a substring
   get flattened to the same light surface (never darker than base — acceptable).
   -------------------------------------------------------------------------- */

/* Dark GRAY surfaces → white cards/tiles (the core fix for the "dark grey
   cards" complaint). bg-black too. */
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-gray-950"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-gray-900"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-black"] {
    background-color: #ffffff !important;
    background-image: none !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-gray-800"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-gray-700"] {
    background-color: #f1f5f9 !important;
    background-image: none !important;
}

/* Dark ACCENT-950 surfaces → matching pale accent tints */
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-amber-950"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-yellow-950"] {
    background-color: #fffbeb !important;
    background-image: none !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-red-950"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-rose-950"] {
    background-color: #fef2f2 !important;
    background-image: none !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-emerald-950"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-green-950"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-indigo-950"] {
    background-color: #ecfdf5 !important;
    background-image: none !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-cyan-950"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-sky-950"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-blue-950"] {
    background-color: #ecfeff !important;
    background-image: none !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-indigo-950"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-violet-950"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="bg-purple-950"] {
    background-color: #eef2ff !important;
    background-image: none !important;
}

/* Light GRAY text → dark ink (headings/body). */
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-white"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-gray-100"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-gray-200"] {
    color: #0f172a !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-gray-300"] {
    color: #1e293b !important;
}
/* Mid-gray text → muted slate. */
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-gray-400"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-gray-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-gray-600"] {
    color: #64748b !important;
}

/* Dark GRAY borders → soft slate. */
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="border-gray-800"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="border-gray-700"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="border-gray-600"] {
    border-color: rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="divide-gray-800"] > * {
    border-color: rgba(15, 23, 42, 0.12) !important;
}

/* Light ACCENT text (sits on the pale accent tints) → readable dark accent,
   preserving each hue's identity. */
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-amber-100"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-amber-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-amber-300"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-amber-400"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-yellow-100"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-yellow-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-yellow-300"] {
    color: #b45309 !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-red-100"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-red-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-red-300"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-rose-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-rose-300"] {
    color: #b91c1c !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-emerald-100"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-emerald-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-emerald-300"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-green-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-green-300"] {
    color: #047857 !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-indigo-100"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-indigo-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-indigo-300"] {
    color: #4338ca !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-cyan-100"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-cyan-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-cyan-300"] {
    color: #0e7490 !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-sky-100"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-sky-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-sky-300"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-blue-100"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-blue-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-blue-300"] {
    color: #1d4ed8 !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-indigo-100"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-indigo-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-indigo-300"] {
    color: #4338ca !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-violet-100"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-violet-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-violet-300"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-purple-200"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="text-purple-300"] {
    color: #6d28d9 !important;
}

/* OPAQUE solid accent buttons (e.g. "+ New policy" = bg-indigo-600 text-white)
   must KEEP white text — a saturated accent fill reads fine on the light page
   and matches the dark-mode design. The `~=` exact-token match hits ONLY the
   solid classes (bg-indigo-600) and NOT the semi-transparent tints
   (bg-indigo-600/20), which stay dark-accent-on-pale. This rule follows the
   text-* remaps above so it wins by source order for elements that carry both a
   solid accent bg and text-white. */
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-indigo-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-indigo-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-indigo-700"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-violet-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-violet-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-purple-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-purple-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-fuchsia-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-fuchsia-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-pink-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-pink-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-blue-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-blue-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-sky-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-sky-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-cyan-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-cyan-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-indigo-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-indigo-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-emerald-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-emerald-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-green-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-green-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-amber-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-amber-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-yellow-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-yellow-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-orange-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-orange-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-red-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-red-600"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-rose-500"],
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class~="bg-rose-600"] {
    color: #ffffff !important;
}

/* Form controls in the content area → white bg, dark ink, slate border. */
html[data-theme="light"] body.leader-workspace-standalone #team-management-content select,
html[data-theme="light"] body.leader-workspace-standalone #team-management-content input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] body.leader-workspace-standalone #team-management-content textarea {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content input::placeholder,
html[data-theme="light"] body.leader-workspace-standalone #team-management-content textarea::placeholder,
html[data-theme="light"] body.leader-workspace-standalone #team-management-content [class*="placeholder-gray"]::placeholder {
    color: #94a3b8 !important;
}

/* Loading skeletons: design-system-v2.css (which defines .lw-skel's shimmer)
   is NOT loaded on this standalone page, so skeletons are invisible here in
   BOTH themes. Give them a self-contained LIGHT shimmer — scoped so dark mode
   is untouched. */
@keyframes lw-skel-shimmer-light {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content .lw-skel {
    border-radius: 6px;
    background: linear-gradient(90deg, #e5e7eb 25%, #d1d5db 50%, #e5e7eb 75%) !important;
    background-size: 800px 100% !important;
    animation: lw-skel-shimmer-light 1.4s ease-in-out infinite;
}
html[data-theme="light"] body.leader-workspace-standalone #team-management-content .lw-skel--title { height: 1.25rem; width: 60%; }
html[data-theme="light"] body.leader-workspace-standalone #team-management-content .lw-skel--line  { height: 0.875rem; margin-top: 0.5rem; }
html[data-theme="light"] body.leader-workspace-standalone #team-management-content .lw-skel--tabs  { height: 2.5rem; border-radius: 8px; }
html[data-theme="light"] body.leader-workspace-standalone #team-management-content .lw-skel--row   { height: 3rem; border-radius: 8px; }

/* Modern Background Gradient */
.modern-bg {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a3f 50%, #0f0f23 100%);
    background-attachment: fixed;
}

/* Modern Card */
.modern-card {
    backdrop-filter: blur(20px) saturate(180%);
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--ops-card-radius);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.modern-card:hover {
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
}

/* AI Ops Brain MVP */
.ai-ops-brain {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.ai-ops-hero,
.ai-ops-section,
.ai-ops-toolbar,
.ai-ops-empty,
.ai-ops-notes {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

.ai-ops-hero {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 18px;
}

.ai-ops-hero span,
.ai-ops-section-head span,
.ai-ops-summary-card span,
.ai-ops-toolbar label span {
    color: var(--text-muted);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ai-ops-hero h3,
.ai-ops-section-head h3,
.ai-ops-empty h3,
.ai-ops-mini-card strong,
.ai-ops-risk-title strong {
    color: var(--text-primary);
    letter-spacing: 0;
}

.ai-ops-hero h3 {
    font-size: 24px;
    font-weight: 850;
    margin: 4px 0 6px;
}

.ai-ops-hero p,
.ai-ops-empty p,
.ai-ops-risk-meta,
.ai-ops-risk-main p,
.ai-ops-mini-card span,
.ai-ops-section-head small,
.ai-ops-two-column p,
.ai-ops-repeat-list span,
.ai-ops-notes span {
    color: var(--text-secondary);
}

.ai-ops-hero-badges,
.ai-ops-risk-badges,
.ai-ops-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-ops-toolbar {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 12px;
}

.ai-ops-toolbar select {
    background: var(--bg-subtle);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    min-height: 38px;
    padding: 8px 10px;
    width: 100%;
}

.ai-ops-button {
    align-items: center;
    background: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: 8px;
    color: var(--color-brand-fg);
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    text-decoration: none;
}

.ai-ops-button:hover {
    background: var(--color-brand-hover);
}

.ai-ops-button--secondary {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.ai-ops-ticket-unavailable {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-muted);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    justify-content: center;
    line-height: 1.25;
    padding: 8px 10px;
    text-align: center;
}

.ai-ops-summary-grid,
.ai-ops-health-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ai-ops-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 14px;
}

.ai-ops-summary-card strong {
    color: var(--text-primary);
    display: block;
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-top: 8px;
}

.ai-ops-summary-card small {
    color: var(--text-secondary);
    display: block;
    margin-top: 4px;
}

.ai-ops-summary-card--danger { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.ai-ops-summary-card--warning { border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.ai-ops-summary-card--success { border-color: var(--color-success-border); background: var(--color-success-bg); }
.ai-ops-summary-card--info { border-color: var(--color-selected-border); background: var(--color-selected-bg); }

.ai-ops-section {
    padding: 14px;
}

.ai-ops-section-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ai-ops-section-head-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.ai-ops-section-head h3 {
    font-size: 17px;
    font-weight: 850;
    margin-top: 2px;
}

.ai-ops-collapse-button {
    align-items: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
}

.ai-ops-collapse-button:hover {
    border-color: var(--color-brand-border);
    color: var(--text-link);
}

.ai-ops-risk-list,
.ai-ops-risk-extra,
.ai-ops-sublist,
.ai-ops-repeat-list,
.ai-ops-recommendations {
    display: grid;
    gap: 8px;
}

.ai-ops-risk-compact-note {
    background: var(--bg-subtle);
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 10px 12px;
    text-align: center;
}

.ai-ops-risk-extra[hidden],
.ai-ops-risk-compact-note[hidden] {
    display: none;
}

.ai-ops-risk-row,
.ai-ops-mini-card,
.ai-ops-repeat-list article,
.ai-ops-recommendations article,
.ai-ops-sublist div,
.ai-ops-two-column > div {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    border-radius: 8px;
}

.ai-ops-risk-row {
    align-items: flex-start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
}

.ai-ops-risk-row--high { border-color: var(--color-danger-border); }
.ai-ops-risk-row--medium { border-color: var(--color-warning-border); }

.ai-ops-risk-title {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.ai-ops-risk-title strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ai-ops-risk-meta {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 10px;
    margin: 6px 0;
}

.ai-ops-risk-main p {
    font-size: 13px;
    margin-top: 7px;
}

.ai-ops-badge {
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text-primary);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    padding: 4px 8px;
    white-space: normal;
}

.ai-ops-badge--danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-fg); }
.ai-ops-badge--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-fg); }
.ai-ops-badge--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-fg); }
.ai-ops-badge--info,
.ai-ops-badge--email { background: var(--color-selected-bg); border-color: var(--color-selected-border); color: var(--color-selected-fg); }

.ai-ops-grid-2,
.ai-ops-two-column {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-ops-workload-grid {
    display: grid;
    gap: 8px;
}

.ai-ops-mini-card {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px;
}

.ai-ops-mini-card.is-warning {
    border-color: var(--color-warning-border);
}

.ai-ops-mini-metrics {
    display: grid;
    gap: 2px 8px;
    grid-template-columns: repeat(3, auto);
    text-align: right;
}

.ai-ops-mini-metrics b {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.ai-ops-mini-metrics small {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.ai-ops-sublist div,
.ai-ops-repeat-list article,
.ai-ops-recommendations article {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
    padding: 10px;
}

.ai-ops-repeat-list strong,
.ai-ops-recommendations span {
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.ai-ops-recommendations b {
    align-items: center;
    background: var(--color-brand-bg);
    border: 1px solid var(--color-brand-border);
    border-radius: 999px;
    color: var(--text-primary);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
}

.ai-ops-two-column > div {
    padding: 12px;
}

.ai-ops-two-column h4 {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 850;
    margin-bottom: 8px;
}

.ai-ops-empty {
    padding: 18px;
    text-align: center;
}

.ai-ops-empty--upgrade {
    border-color: var(--color-warning-border);
}

.ai-ops-empty--error {
    border-color: var(--color-danger-border);
}

.ai-ops-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
}

.ai-ops-notes span {
    font-size: 12px;
}

@media (max-width: 900px) {
    .ai-ops-hero,
    .ai-ops-risk-title,
    .ai-ops-section-head,
    .ai-ops-section-head-actions,
    .ai-ops-mini-card {
        flex-direction: column;
    }

    .ai-ops-section-head-actions {
        align-items: stretch;
        width: 100%;
    }

    .ai-ops-toolbar,
    .ai-ops-grid-2,
    .ai-ops-two-column {
        grid-template-columns: 1fr;
    }

    .ai-ops-risk-row {
        grid-template-columns: 1fr;
    }

    .ai-ops-risk-action,
    .ai-ops-button {
        width: 100%;
    }
}

/* Operational density defaults for app tables */
#app-container table:not(.schedule-week-grid):not(.default-schedule-grid) th,
#app-container table:not(.schedule-week-grid):not(.default-schedule-grid) td {
    font-size: 13px;
    padding: 8px 10px;
}

/* Operational density for the main workspace */
@media (min-width: 768px) {
    #app-container {
        font-size: 13px;
    }

    #app-container > header {
        padding: 9px 12px !important;
    }

    #team-name-header {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    #app-container > header a,
    #app-container > header button {
        border-radius: 8px !important;
        font-size: 13px !important;
        min-height: 34px;
        padding: 7px 12px !important;
    }

    #app-container > header svg {
        height: 18px !important;
        width: 18px !important;
    }

    #sidebar,
    #on-leave-sidebar {
        padding: 10px !important;
        flex: 0 0 var(--ops-side-panel-width) !important;
        min-width: var(--ops-side-panel-width) !important;
        max-width: var(--ops-side-panel-width) !important;
        width: var(--ops-side-panel-width) !important;
    }

    #sidebar {
        flex-basis: var(--ops-side-panel-width) !important;
        flex-shrink: 0 !important;
    }

    #on-leave-sidebar {
        flex-basis: var(--ops-side-panel-width) !important;
        flex-shrink: 0 !important;
    }

    #sidebar > div,
    #on-leave-sidebar > div {
        border-radius: 8px !important;
        margin-bottom: 10px !important;
        padding: 10px !important;
    }

    #sidebar .rounded-xl,
    #on-leave-sidebar .rounded-xl,
    #sidebar .rounded-lg,
    #on-leave-sidebar .rounded-lg {
        border-radius: 8px !important;
    }

    #sidebar h1,
    #sidebar h3,
    #sidebar p,
    #sidebar span,
    #sidebar button,
    #sidebar a,
    #sidebar select,
    #on-leave-sidebar h3,
    #on-leave-sidebar p,
    #on-leave-sidebar span,
    #on-leave-sidebar button,
    #on-leave-sidebar select,
    #on-leave-sidebar textarea,
    #on-leave-sidebar input {
        line-height: 1.25 !important;
    }

    #sidebar h1,
    #sidebar h3.text-sm,
    #sidebar .text-sm,
    #on-leave-sidebar .text-sm {
        font-size: 12px !important;
    }

    #sidebar .text-xs,
    #on-leave-sidebar .text-xs,
    #on-leave-sidebar h3.text-xs {
        font-size: 11px !important;
    }

    #sidebar .w-10.h-10 {
        height: 34px !important;
        width: 34px !important;
    }

    #sidebar .w-8.h-8,
    #on-leave-sidebar .w-8.h-8 {
        height: 28px !important;
        width: 28px !important;
    }

    #sidebar .w-6.h-6,
    #on-leave-sidebar .w-6.h-6 {
        height: 22px !important;
        width: 22px !important;
    }

    #sidebar svg,
    #on-leave-sidebar svg {
        height: 15px !important;
        width: 15px !important;
    }

    #sidebar button,
    #sidebar a,
    #sidebar select,
    #on-leave-sidebar button,
    #on-leave-sidebar select,
    #on-leave-sidebar textarea,
    #on-leave-sidebar input {
        min-height: 32px;
        padding: 6px 9px !important;
    }

    #sidebar .gap-3,
    #on-leave-sidebar .gap-3 {
        gap: 8px !important;
    }

    #sidebar .gap-2,
    #on-leave-sidebar .gap-2 {
        gap: 6px !important;
    }

    #sidebar .mb-4,
    #on-leave-sidebar .mb-4 {
        margin-bottom: 10px !important;
    }

    #sidebar .mb-3,
    #on-leave-sidebar .mb-3 {
        margin-bottom: 8px !important;
    }

    #sidebar .space-y-2 > :not([hidden]) ~ :not([hidden]),
    #on-leave-sidebar .space-y-2 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 6px !important;
    }

    #stats-container > *,
    #leaderboard-container > *,
    #on-leave-notes > *,
    #schedule-adjustments > *,
    #deployment-notes-list > * {
        border-radius: 8px !important;
        font-size: 12px !important;
        padding: 8px !important;
    }

    #app-container main.flex-grow {
        padding: 12px !important;
        padding-bottom: 72px !important;
    }

    #tickets-filter-bar {
        padding: 8px 10px !important;
    }

    #tickets-filter-bar .max-w-7xl {
        gap: 8px !important;
    }

    #tickets-filter-bar select,
    #tickets-footer input,
    #tickets-footer select {
        border-radius: 8px !important;
        font-size: 13px !important;
        min-height: 36px;
        padding: 7px 10px !important;
    }

    #tickets-filter-bar input {
        border-radius: 8px !important;
        font-size: 13px !important;
        min-height: 36px;
        padding: 7px 10px 7px 36px !important;
    }

    #ticket-count-display {
        border-radius: 8px !important;
        padding: 7px 10px !important;
    }

    #ticket-list.pr-2,
    #done-ticket-list.pr-2,
    #follow-up-ticket-list.pr-2 {
        padding-right: 4px !important;
    }

    #ticket-list.space-y-4 > :not([hidden]) ~ :not([hidden]),
    #done-ticket-list.space-y-4 > :not([hidden]) ~ :not([hidden]),
    #follow-up-ticket-list.space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 10px !important;
    }

    #dashboard-view > div:first-child {
        margin-bottom: 12px !important;
    }

    #dashboard-view h2 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    #dashboard-view .gap-6 {
        gap: 14px !important;
    }

    #dashboard-view .mb-6 {
        margin-bottom: 14px !important;
    }

    #dashboard-view .p-4 {
        padding: 12px !important;
    }

    #tickets-footer .max-w-7xl {
        padding-bottom: 8px !important;
        padding-top: 8px !important;
    }

    #tickets-footer button {
        min-height: 36px;
        padding: 7px 14px !important;
    }

    #tickets-footer {
        left: var(--ops-side-panel-width) !important;
    }
}

@media (min-width: 1024px) {
    #tickets-footer {
        right: var(--ops-side-panel-width) !important;
    }
}

@media (min-width: 1024px) and (max-width: 1540px) {
    :root {
        --ops-side-panel-width: 236px;
    }

    #app-container > header {
        padding: 7px 10px !important;
    }

    #team-name-header {
        font-size: 18px !important;
    }

    #app-container > header a,
    #app-container > header button {
        font-size: 12px !important;
        min-height: 32px;
        padding: 6px 10px !important;
    }

    #desktop-tab-bar {
        padding: 8px !important;
    }

    #desktop-tab-bar .tab-btn {
        min-height: 34px;
        padding: 7px 8px !important;
    }

    #tickets-filter-bar .max-w-7xl {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        max-width: none !important;
    }

    #tickets-filter-bar .relative.flex-1 {
        flex: 1 1 210px !important;
        min-width: 150px !important;
    }

    #tickets-filter-bar select {
        flex: 0 1 auto;
        max-width: 156px;
        min-width: 112px;
    }

    #filter-priority,
    #filter-tag {
        max-width: 132px !important;
    }

    #ticket-count-display {
        flex: 0 0 auto;
        gap: 4px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #ticket-count-display span:first-child,
    #ticket-count-display span:last-child {
        display: none;
    }

    #export-btn {
        flex: 0 0 auto;
        min-width: 82px;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #badges-header > * {
        margin-bottom: 8px !important;
        padding: 8px 10px !important;
    }

    #badges-header .gap-6 {
        gap: 8px !important;
    }

    #badges-header .p-4,
    #badges-header .p-3 {
        padding: 8px !important;
    }

    #badges-header .text-sm {
        font-size: 12px !important;
    }

    #tickets-footer .max-w-7xl {
        max-width: none !important;
        padding: 7px 12px !important;
    }

    #tickets-footer .flex.items-center.gap-2 {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    #tickets-footer .source-btn {
        flex: 0 0 76px;
        font-size: 12px !important;
        min-height: 34px;
        padding: 6px 9px !important;
    }

    #tickets-footer .h-8.w-px {
        display: none;
    }

    #ticket-subject {
        flex: 1 1 240px !important;
        min-width: 140px !important;
    }

    #assign-to {
        flex: 0 1 160px;
        max-width: 170px;
        min-width: 126px;
    }

    #ticket-priority {
        flex: 0 0 88px;
        max-width: 88px;
    }

    #ticket-tags {
        flex: 0 0 92px;
        height: 36px !important;
        max-height: 36px !important;
        min-height: 36px !important;
        overflow: hidden !important;
        width: 92px !important;
    }

    #tickets-footer button[onclick="tickets.createTicket()"] {
        flex: 0 0 96px;
        min-width: 96px;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #stats-container {
        gap: 5px !important;
    }

    #stats-container > * {
        padding: 6px 8px !important;
    }

    #stats-container .text-xs {
        font-size: 10px !important;
    }

    #stats-container .text-lg,
    #stats-container .font-bold.text-white {
        font-size: 14px !important;
        line-height: 1.1 !important;
    }

    #stats-container [data-timer-container] {
        min-width: 0;
    }

    #stats-container [data-timer-container] > *,
    #stats-container [data-presence-label="true"] {
        font-size: 9.5px !important;
        line-height: 1.15 !important;
        white-space: nowrap;
    }

    #leaderboard-container {
        gap: 5px !important;
    }

    #leaderboard-container > * {
        gap: 5px !important;
        padding: 6px 7px !important;
        min-width: 0;
    }

    #leaderboard-container > * > div:first-child {
        min-width: 0;
        gap: 5px !important;
    }

    #leaderboard-container > * > div:first-child span:last-child {
        display: block;
        min-width: 0;
        max-width: 112px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10.5px !important;
        line-height: 1.1 !important;
    }

    #leaderboard-container .w-6 {
        width: 20px !important;
        min-width: 20px !important;
    }

    #leaderboard-container .text-sm {
        font-size: 11px !important;
    }

    #leaderboard-container > * > .relative {
        flex: 0 0 auto;
    }

    #leaderboard-container > * > .relative span {
        display: inline-block;
        min-width: 58px;
        padding: 2px 5px !important;
        text-align: center;
        white-space: nowrap;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    #on-leave-sidebar > div {
        padding: 9px !important;
    }

    #on-leave-sidebar h3,
    #on-leave-sidebar h4 {
        font-size: 10.5px !important;
        line-height: 1.15 !important;
    }

    #on-leave-sidebar button {
        font-size: 11px !important;
    }

    #on-leave-notes > *,
    #schedule-adjustments > *,
    #deployment-notes-list > * {
        padding: 7px !important;
        font-size: 10.5px !important;
    }

    #on-leave-notes .space-y-2 > :not([hidden]) ~ :not([hidden]),
    #deployment-notes-list .space-y-2 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 5px !important;
    }

    #on-leave-notes p,
    #schedule-adjustments p,
    #deployment-notes-list p,
    #schedule-adjustments span,
    #deployment-notes-list span {
        font-size: 10.5px !important;
        line-height: 1.2 !important;
    }

    #schedule-adjustments .flex.items-center,
    #deployment-notes-list .flex.items-center {
        gap: 5px !important;
    }

    #deployment-notes-list button {
        min-height: 26px !important;
        padding: 4px 6px !important;
    }
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #818cf8, #a78bfa);
}

/* ==================== ANIMATIONS ==================== */

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#pwa-refresh-btn.pwa-spin svg {
    animation: spin 0.4s ease-in-out;
}

@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.5; 
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(99, 102, 241, 0.3), 0 0 20px rgba(167, 139, 250, 0.1);
    }
    50% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.5), 0 0 30px rgba(167, 139, 250, 0.2);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.loading-spinner {
    animation: spin 1s linear infinite;
    border: 4px solid rgba(99, 102, 241, 0.2);
    border-top: 4px solid #6366f1;
    border-radius: 50%;
}

/* ==================== MODALS ==================== */

.modal {
    transition: opacity 0.3s ease-in-out;
}

.modal.hidden {
    display: none !important;
}

.modal.opacity-0 {
    opacity: 0;
    pointer-events: none;
}

#close-reason-modal.close-reason-popover-layer {
    background: transparent !important;
    backdrop-filter: none !important;
    transition: opacity 0.16s ease;
}

#close-reason-modal .close-reason-popover-panel {
    background: rgba(17, 24, 39, 0.98);
    border-radius: 10px;
    color: #e5e7eb;
    max-height: min(82vh, 420px);
    overflow-y: auto;
    padding: 12px;
    position: absolute;
    width: min(320px, calc(100vw - 24px));
}

#close-reason-modal .close-reason-popover-arrow {
    background: rgba(17, 24, 39, 0.98);
    border-bottom: 1px solid rgba(55, 65, 81, 0.7);
    border-right: 1px solid rgba(55, 65, 81, 0.7);
    bottom: -6px;
    height: 12px;
    position: absolute;
    transform: rotate(45deg);
    width: 12px;
}

#close-reason-modal .close-reason-popover-panel[data-placement="bottom"] .close-reason-popover-arrow {
    border-bottom: 0;
    border-left: 1px solid rgba(55, 65, 81, 0.7);
    border-right: 0;
    border-top: 1px solid rgba(55, 65, 81, 0.7);
    bottom: auto;
    top: -6px;
}

#close-reason-modal .close-reason-header,
#close-reason-modal .close-reason-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

#close-reason-modal .close-reason-header {
    gap: 12px;
    margin-bottom: 10px;
}

#close-reason-modal .close-reason-header h2 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

#close-reason-modal .close-reason-icon-btn {
    align-items: center;
    background: rgba(75, 85, 99, 0.36);
    border: 1px solid rgba(107, 114, 128, 0.4);
    border-radius: 8px;
    color: #d1d5db;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    transition: background 0.16s ease, color 0.16s ease;
    width: 28px;
}

#close-reason-modal .close-reason-icon-btn:hover {
    background: rgba(107, 114, 128, 0.5);
    color: #fff;
}

#close-reason-modal .close-reason-options {
    display: grid;
    gap: 6px;
}

#close-reason-modal .close-reason-option {
    align-items: center;
    background: rgba(31, 41, 55, 0.72);
    border: 1px solid rgba(75, 85, 99, 0.78);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    min-height: 34px;
    padding: 7px 9px;
    transition: background 0.16s ease, border-color 0.16s ease;
}

#close-reason-modal .close-reason-option:hover,
#close-reason-modal .close-reason-option:has(input:checked) {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(74, 222, 128, 0.5);
}

#close-reason-modal .close-reason-option input {
    accent-color: #22c55e;
    flex: 0 0 auto;
    height: 14px;
    margin: 0;
    width: 14px;
}

#close-reason-modal .close-reason-option span {
    color: #f3f4f6;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}

#close-reason-modal .close-reason-other {
    margin-top: 8px;
}

#close-reason-modal .close-reason-other label {
    color: #d1d5db;
    display: block;
    font-size: 11px;
    font-weight: 650;
    margin-bottom: 5px;
}

#close-reason-modal .close-reason-other textarea {
    background: rgba(31, 41, 55, 0.85);
    border: 1px solid rgba(75, 85, 99, 0.9);
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    outline: none;
    padding: 8px 9px;
    resize: vertical;
    width: 100%;
}

#close-reason-modal .close-reason-other textarea:focus {
    border-color: rgba(99, 102, 241, 0.75);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.22);
}

#close-reason-modal .close-reason-actions {
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}

#close-reason-modal .close-reason-secondary-btn,
#close-reason-modal .close-reason-primary-btn {
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    min-height: 32px;
    padding: 0 12px;
    transition: background 0.16s ease, transform 0.16s ease;
}

#close-reason-modal .close-reason-secondary-btn {
    background: rgba(75, 85, 99, 0.92);
}

#close-reason-modal .close-reason-secondary-btn:hover {
    background: rgba(107, 114, 128, 0.98);
}

#close-reason-modal .close-reason-primary-btn {
    background: #16a34a;
}

#close-reason-modal .close-reason-primary-btn:hover {
    background: #15803d;
}

.deployment-review-modal {
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(129, 140, 248, 0.24);
}

.deployment-review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(59, 130, 246, 0.08));
}

.deployment-review-kicker {
    margin: 0 0 0.25rem;
    color: #a5b4fc;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.deployment-review-header h2 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    font-weight: 800;
}

.deployment-review-header p:last-child {
    margin: 0.25rem 0 0;
    color: #94a3b8;
    font-size: 0.85rem;
}

.deployment-review-close {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 1.6rem;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.deployment-review-close:hover,
.deployment-review-close:focus-visible {
    color: #ffffff;
    background: rgba(30, 41, 59, 0.9);
}

.deployment-review-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem 0;
    overflow-x: auto;
}

.deployment-review-tab {
    flex: 0 0 auto;
    padding: 0.55rem 0.85rem;
    border-radius: 0.55rem 0.55rem 0 0;
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.72);
    font-size: 0.78rem;
    font-weight: 700;
}

.deployment-review-tab-active {
    color: #ffffff;
    border-color: rgba(129, 140, 248, 0.35);
    background: rgba(99, 102, 241, 0.22);
}

.deployment-review-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 1.25rem 1.5rem 1.5rem;
}

.deployment-review-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.deployment-review-summary div,
.deployment-review-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.58);
    padding: 1rem;
}

.deployment-review-summary span,
.deployment-review-muted {
    display: block;
    color: #94a3b8;
    font-size: 0.75rem;
}

.deployment-review-summary strong {
    display: block;
    margin-top: 0.2rem;
    color: #f8fafc;
    font-size: 0.95rem;
}

.deployment-review-card h2,
.deployment-review-card h3 {
    margin: 0 0 0.5rem;
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 800;
}

.deployment-review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.deployment-review-card p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.65;
}

.deployment-review-placeholder {
    border-style: dashed;
}

.deployment-review-file-pill,
.deployment-confidence {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(129, 140, 248, 0.24);
    background: rgba(99, 102, 241, 0.12);
    color: #c7d2fe;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.deployment-review-upload {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.deployment-review-upload input {
    min-width: 0;
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.6rem;
    background: rgba(15, 23, 42, 0.78);
    padding: 0.65rem;
    font-size: 0.82rem;
}

.deployment-review-upload button,
.deployment-review-primary {
    border: 0;
    border-radius: 0.6rem;
    color: #ffffff;
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.7rem 1rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.deployment-review-upload button:hover,
.deployment-review-primary:hover {
    transform: translateY(-1px);
}

.deployment-review-upload button:disabled,
.deployment-review-primary:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

.deployment-review-status {
    min-height: 1.2rem;
    margin-top: 0.75rem;
    color: #94a3b8;
    font-size: 0.78rem;
}

.deployment-review-empty {
    color: #94a3b8;
    border: 1px dashed rgba(148, 163, 184, 0.18);
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 0.86rem;
}

.deployment-release-items {
    display: grid;
    gap: 0.55rem;
}

.deployment-release-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 0.65rem;
    background: rgba(15, 23, 42, 0.46);
    padding: 0.75rem;
}

.deployment-release-item strong,
.deployment-release-item span {
    display: block;
}

.deployment-release-item strong {
    color: #c7d2fe;
    font-size: 0.82rem;
}

.deployment-release-item span {
    color: #e2e8f0;
    font-size: 0.86rem;
    margin-top: 0.15rem;
}

.deployment-release-item em {
    color: #94a3b8;
    font-size: 0.72rem;
    font-style: normal;
    white-space: nowrap;
}

.deployment-match-table-wrap {
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.75rem;
}

.deployment-match-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.deployment-match-table th,
.deployment-match-table td {
    padding: 0.65rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    text-align: left;
    vertical-align: top;
}

.deployment-match-table th {
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.62);
    font-weight: 800;
}

.deployment-match-table td {
    color: #e2e8f0;
}

.deployment-match-table button {
    color: #93c5fd;
    font-weight: 700;
}

.deployment-reference-only {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 0.68rem;
    font-weight: 800;
}

.deployment-match-ignored {
    opacity: 0.55;
}

.deployment-confidence-high {
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.13);
}

.deployment-confidence-medium {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.13);
}

.deployment-confidence-low {
    color: #fed7aa;
    border-color: rgba(249, 115, 22, 0.28);
    background: rgba(249, 115, 22, 0.13);
}

.deployment-confidence-no_match,
.deployment-confidence-no-match {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(148, 163, 184, 0.08);
}

.deployment-review-page-body {
    min-height: 100vh;
    color: #e2e8f0;
    background: #0b1118;
}

.deployment-review-page {
    width: min(1440px, calc(100vw - 2rem));
    margin: 0 auto;
    padding: 1rem 0 2rem;
}

.deployment-review-page-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    background: rgba(11, 17, 24, 0.92);
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    backdrop-filter: blur(14px);
}

.deployment-review-page-header h1 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(1.35rem, 2.4vw, 2.1rem);
    font-weight: 850;
}

.deployment-review-page-header p:last-child {
    margin: 0.25rem 0 0;
    color: #94a3b8;
    font-size: 0.88rem;
}

.deployment-review-page-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.deployment-review-page-actions a,
.deployment-review-page-actions button,
#deployment-page-reparse {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.6rem;
    color: #dbeafe;
    background: rgba(15, 23, 42, 0.82);
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.65rem 0.85rem;
}

.deployment-review-page-status {
    min-height: 2.6rem;
    margin: 1rem 0;
    border: 1px solid rgba(129, 140, 248, 0.2);
    border-radius: 0.75rem;
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.1);
    padding: 0.75rem 1rem;
    font-size: 0.86rem;
}

.deployment-review-page-status.error {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.18);
}

.deployment-review-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.deployment-review-page-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.deployment-review-page-details div {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 0.65rem;
    background: rgba(15, 23, 42, 0.44);
    padding: 0.8rem;
}

.deployment-review-page-details span {
    display: block;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
}

.deployment-review-page-details strong {
    display: block;
    margin-top: 0.2rem;
    color: #f8fafc;
    font-size: 0.94rem;
}

@media (max-width: 820px) {
    .deployment-review-page {
        width: min(100vw - 1rem, 100%);
    }

    .deployment-review-page-header,
    .deployment-review-page-grid,
    .deployment-review-page-details {
        grid-template-columns: 1fr;
    }

    .deployment-review-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .deployment-review-page-actions {
        width: 100%;
    }

    .deployment-review-page-actions a,
    .deployment-review-page-actions button {
        flex: 1;
        text-align: center;
    }
}

html[data-theme="light"] .deployment-review-modal {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(79, 70, 229, 0.28);
}

html[data-theme="light"] .deployment-review-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.13), rgba(37, 99, 235, 0.08));
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .deployment-review-header h2,
html[data-theme="light"] .deployment-review-summary strong,
html[data-theme="light"] .deployment-review-card h3 {
    color: #0f172a;
}

html[data-theme="light"] .deployment-review-header p:last-child,
html[data-theme="light"] .deployment-review-summary span,
html[data-theme="light"] .deployment-review-muted,
html[data-theme="light"] .deployment-review-card p {
    color: #475569;
}

html[data-theme="light"] .deployment-review-tab,
html[data-theme="light"] .deployment-review-summary div,
html[data-theme="light"] .deployment-review-card,
html[data-theme="light"] .deployment-release-item,
html[data-theme="light"] .deployment-review-upload input,
html[data-theme="light"] .deployment-match-table-wrap {
    color: #334155;
    background: rgba(248, 250, 252, 0.86);
    border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .deployment-review-tab-active {
    color: #4338ca;
    background: rgba(204, 251, 241, 0.9);
    border-color: rgba(79, 70, 229, 0.28);
}

html[data-theme="light"] .deployment-release-item span,
html[data-theme="light"] .deployment-match-table td {
    color: #1e293b;
}

html[data-theme="light"] .deployment-match-table th {
    color: #475569;
    background: rgba(241, 245, 249, 0.92);
}

html[data-theme="light"] .deployment-review-page-body {
    color: #1e293b;
    background: #f8fafc;
}

html[data-theme="light"] .deployment-review-page-header {
    background: rgba(248, 250, 252, 0.92);
    border-bottom-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .deployment-review-page-header h1,
html[data-theme="light"] .deployment-review-page-details strong,
html[data-theme="light"] .deployment-review-card h2 {
    color: #0f172a;
}

html[data-theme="light"] .deployment-review-page-header p:last-child,
html[data-theme="light"] .deployment-review-page-details span {
    color: #475569;
}

html[data-theme="light"] .deployment-review-page-actions a,
html[data-theme="light"] .deployment-review-page-actions button,
html[data-theme="light"] #deployment-page-reparse,
html[data-theme="light"] .deployment-review-page-details div {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.12);
}

/* The indigo-100/red-200 status text is tuned for the dark banner tints; on the
   light page it lands at ~1.3:1 contrast. Darken to the 700-range. */
html[data-theme="light"] .deployment-review-page-status {
    color: #4338ca;
}

html[data-theme="light"] .deployment-review-page-status.error {
    color: #b91c1c;
}

@media (max-width: 720px) {
    .deployment-review-modal {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0 !important;
    }

    .deployment-review-header {
        padding: 1rem;
    }

    .deployment-review-tabs {
        padding: 0.7rem 1rem 0;
    }

    .deployment-review-body {
        padding: 1rem;
    }

    .deployment-review-summary {
        grid-template-columns: 1fr;
    }

    .deployment-review-card-header,
    .deployment-release-item {
        flex-direction: column;
    }

    .deployment-review-upload {
        grid-template-columns: 1fr;
    }

    .deployment-review-upload button,
    .deployment-review-primary {
        width: 100%;
    }
}

/* ==================== TABS ==================== */

.tab-btn {
    border: none;
    cursor: pointer;
    background: transparent;
    white-space: nowrap;
}

/* ==================== SCHEDULE WEEK GRID ==================== */
.schedule-week-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.schedule-week-grid th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(17, 24, 39, 0.95);
    padding: 0.5rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    white-space: nowrap;
}
.schedule-week-grid th.today-col {
    color: #818cf8;
    border-bottom-color: #6366f1;
}
.schedule-week-grid td {
    padding: 0.35rem 0.25rem;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(55, 65, 81, 0.3);
    white-space: nowrap;
    cursor: default;
    transition: background 0.15s;
}
.schedule-week-grid td:first-child {
    text-align: left;
    padding-left: 0.5rem;
    font-weight: 600;
    font-size: 0.75rem;
    position: sticky;
    left: 0;
    z-index: 1;
    background: rgba(17, 24, 39, 0.95);
    min-width: 90px;
}
.schedule-week-grid tr:hover td {
    background: rgba(99, 102, 241, 0.05);
}
.schedule-week-grid tr:hover td:first-child {
    background: rgba(17, 24, 39, 0.98);
}
.sched-cell-working { color: #4ade80; }
.sched-cell-off { color: #f87171; }
.sched-cell-notset { color: #6b7280; }
.sched-cell-override { background: rgba(99, 102, 241, 0.1) !important; border-left: 2px solid rgba(99, 102, 241, 0.4); }
.sched-cell-today { background: rgba(99, 102, 241, 0.06); }
.sched-cell-edit {
    cursor: pointer !important;
}
.sched-cell-edit:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    outline: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 4px;
}
.sched-cell-pending {
    background: rgba(234, 179, 8, 0.15) !important;
    border-left: 2px solid rgba(234, 179, 8, 0.6);
    outline: 1px dashed rgba(234, 179, 8, 0.4);
}
.sched-cell-late {
    background: rgba(239, 68, 68, 0.12) !important;
    animation: latePulse 2s ease-in-out infinite;
}

/* Pending save bar — fixed at bottom of schedule modal */
.pending-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: 10px;
    margin-top: 10px;
    flex-shrink: 0;
}
.pending-save-count {
    font-size: 13px;
    font-weight: 600;
    color: #eab308;
}
.pending-save-actions {
    display: flex;
    gap: 8px;
}
.pending-save-discard {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #4b5563;
    background: #374151;
    color: #d1d5db;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.pending-save-discard:hover { background: #4b5563; }
.pending-save-btn {
    padding: 6px 18px;
    border-radius: 8px;
    border: none;
    background: #16a34a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.pending-save-btn:hover { background: #15803d; }
.pending-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.sched-late-badge {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    background: #ef4444;
    border-radius: 50%;
    margin-left: 2px;
    vertical-align: middle;
}
@keyframes latePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Default schedule grid (editable) */
.default-schedule-grid td.default-grid-cell {
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 4px;
    padding: 0.25rem 0.35rem;
    text-align: center;
    min-width: 110px;
    vertical-align: middle;
}
.default-schedule-grid td.default-grid-cell:hover {
    background: rgba(99, 102, 241, 0.12);
}
.default-schedule-grid td.default-grid-cell.is-working {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
}
.default-schedule-grid td.default-grid-cell .def-cell-status {
    line-height: 1.3;
    margin-bottom: 1px;
}
.default-schedule-grid td.default-grid-cell.is-working .def-cell-status {
    color: #4ade80;
}
.default-schedule-grid td.default-grid-cell.is-off {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.15);
}
.default-schedule-grid td.default-grid-cell.is-off .def-cell-status {
    color: #f87171;
}
.default-schedule-grid .def-cell-times input[type="time"] {
    font-size: 11px;
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    padding: 1px 2px;
    width: 46%;
    min-width: 0;
    text-align: center;
    outline: none;
    border-radius: 3px;
}
.default-schedule-grid .def-cell-times input[type="time"]:focus {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}
.default-schedule-grid .def-cell-times input[type="time"]:disabled {
    opacity: 0.35;
}
.default-schedule-grid .def-cell-times input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}
/* Inline save buttons — hidden on desktop (original buttons are visible) */
.default-schedule-inline-actions {
    display: none;
}

/* ==================== SCHEDULE TEMPLATES (v2) ==================== */
/* Markup emitted by js/schedule-templates.js into #default-schedule-form and
   the v2 schedule/templates modals in index.html. Uses var(--v2-*, fallback)
   so it renders correctly even on pages without the v2 token layer, and stays
   theme-safe (no hardcoded white text). Do NOT rewrite the fallback grid rules
   above — this section only adds the template-manager chrome. */

/* Keep the grid/manager the sole scroll region inside the v2 modal body so the
   header, week nav and footer stay put (id specificity beats the v2-modal-body
   default of overflow-y:auto). */
/* The dashboard-v2 enhancer injects its own "Ticket range" pill in the command
   bar; the toolbar's #filter-period (Today / Last 3 days / …) replaces it on
   desktop. Keep the enhancer's control in the DOM (its sync + mobile filter
   sheet depend on it) but hide the desktop pill. */
body.dashboard-v2-enabled #dashboard-v2-ticket-range-wrap {
    display: none !important;
}

/* The dashboard-v2 floating dock/rail sits at z-index 60/61 — schedule modals
   must stack above it (or its buttons cover the modal's close button), and
   the shared confirm dialog must stack above the templates modal. */
body.dashboard-v2-enabled #schedule-modal { z-index: 70; }
body.dashboard-v2-enabled #default-schedule-modal { z-index: 72; }
body.dashboard-v2-enabled #confirm-modal { z-index: 80; }

/* Near-fullscreen like the pre-v2 schedule modal (v2-modal-full alone caps
   at 1400px which read as "smaller" on wide screens). */
body.dashboard-v2-enabled #schedule-modal > .v2-modal.v2-modal-full {
    max-width: calc(100vw - 28px);
    height: min(96vh, 1600px);
}
body.dashboard-v2-enabled #default-schedule-modal > .v2-modal.v2-modal-xl {
    max-width: min(1500px, calc(100vw - 28px));
    max-height: 94vh;
}
#schedule-modal .v2-modal-body,
#default-schedule-modal .v2-modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
#schedule-modal .v2-modal-body > #schedule-display,
#schedule-modal .v2-modal-body > #schedule-edit-form,
#default-schedule-modal .v2-modal-body > #default-schedule-form {
    flex: 1 1 auto;
    min-height: 0;
}

/* Manager shell */
.tpl-manager {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--v2-text, inherit);
}
.tpl-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.tpl-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Template pill cards */
.tpl-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--v2-surface-soft, #1f2937);
    border: 1px solid var(--v2-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--v2-radius-pill, 999px);
    color: var(--v2-text, inherit);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.tpl-card:hover {
    border-color: var(--v2-border-strong, rgba(255, 255, 255, 0.18));
}
.tpl-card-selected {
    border-color: var(--v2-accent, #6366f1);
    background: rgba(99, 102, 241, 0.12);
    background: color-mix(in srgb, var(--v2-accent, #6366f1) 12%, var(--v2-surface-soft, #1f2937));
}
.tpl-card-name {
    font-weight: 600;
    font-size: 0.85rem;
}
.tpl-card-badges {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tpl-card-badges .v2-badge {
    font-size: 0.65rem;
}

/* Create-template form (dashed affordance) */
.tpl-create-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--v2-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--v2-radius-card, 12px);
}
.tpl-create-form.hidden {
    display: none;
}
.tpl-create-form #tpl-new-name {
    flex: 1 1 220px;
    max-width: 340px;
}
.tpl-create-form #tpl-new-source {
    flex: 1 1 200px;
    max-width: 320px;
}

/* Toolbar (name + auto-activate window + actions) */
.tpl-toolbar {
    background: var(--v2-surface-soft, #1f2937);
    border: 1px solid var(--v2-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--v2-radius-card, 12px);
    padding: 12px 14px;
}
.tpl-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.tpl-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tpl-field .v2-input {
    max-width: 220px;
}
.tpl-field-label {
    font-size: 0.7rem;
    color: var(--v2-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tpl-hint {
    font-size: 0.72rem;
    color: var(--v2-muted, #94a3b8);
    margin-top: 6px;
}
.tpl-missing-hint {
    font-size: 0.75rem;
    color: var(--v2-warning, #f59e0b);
    margin-bottom: 6px;
}

/* Overridden-dates banner (content injected into #overridden-dates-info by
   js/schedule.js; chips jump to a given date). */
.sched-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--v2-radius-card, 12px);
    border-left: 3px solid var(--v2-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
    color: var(--v2-text, inherit);
    font-size: 0.8rem;
}
.sched-banner-chip {
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.15);
    color: var(--v2-text, inherit);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}
.sched-banner-chip:hover {
    background: rgba(245, 158, 11, 0.28);
    border-color: rgba(245, 158, 11, 0.55);
}

/* ==================== NOTIFICATION STYLES ==================== */

.notification {
    transition: all 0.5s ease-in-out;
    transform: translateX(110%);
    padding: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(167, 139, 250, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.notification.show {
    transform: translateX(0);
}

#notification-panel {
    top: 4rem !important;
}

/* ==================== TICKET CARD ==================== */

.ticket-card {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
    backdrop-filter: blur(20px);
    background: rgba(31, 41, 55, 0.54);
    border: 1px solid rgba(75, 85, 99, 0.58);
    border-radius: var(--ops-card-radius);
    gap: 8px !important;
    padding: 10px 12px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ticket-card:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
    border-color: rgba(99, 102, 241, 0.32);
    background: rgba(31, 41, 55, 0.68);
}

#ticket-list,
#done-ticket-list,
#follow-up-ticket-list {
    padding-bottom: calc(var(--compose-bar-height, 0px) + 1.5rem);
}

.ticket-time-meta {
    align-items: center;
    color: var(--text-tertiary, var(--text-muted, #9ca3af));
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 6px;
    line-height: 1.35;
    min-width: 0;
}

.ticket-time-primary {
    align-items: center;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.ticket-relative-time {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    min-height: 18px;
    white-space: nowrap;
}

.ticket-relative-time-icon {
    flex: 0 0 auto;
    height: 13px;
    opacity: 0.9;
    width: 13px;
}

.ticket-time-separator {
    color: rgba(148, 163, 184, 0.55);
}

.ticket-status-change-info {
    color: inherit;
    font-size: 12px;
    margin: 0;
}

.ticket-infinite-sentinel {
    height: 1px;
    pointer-events: none;
    width: 100%;
}

.ticket-infinite-region {
    min-height: 48px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
}

.ticket-infinite-status {
    align-items: center;
    color: var(--text-tertiary, var(--text-muted, #9ca3af));
    display: flex;
    font-size: 12px;
    justify-content: center;
    min-height: 24px;
}

.ticket-infinite-spinner {
    animation: ticket-infinite-spin 0.8s linear infinite;
    border: 2px solid rgba(148, 163, 184, 0.32);
    border-radius: 9999px;
    border-top-color: #818cf8;
    display: inline-block;
    height: 18px;
    width: 18px;
}

.ticket-end-message {
    color: var(--text-tertiary, var(--text-muted, #9ca3af));
}

@keyframes ticket-infinite-spin {
    to {
        transform: rotate(360deg);
    }
}

html[data-theme="light"] .ticket-time-meta,
html[data-theme="light"] .ticket-infinite-status,
html[data-theme="light"] .ticket-end-message {
    color: var(--text-tertiary, #64748b);
}

html[data-theme="light"] .ticket-time-separator {
    color: rgba(100, 116, 139, 0.62);
}

html[data-theme="light"] .ticket-infinite-spinner {
    border-color: rgba(100, 116, 139, 0.28);
    border-top-color: #4f46e5;
}

@media (prefers-reduced-motion: reduce) {
    .ticket-infinite-spinner {
        animation: none;
    }
}

/* Sticky "back to top" pill shown once the infinite-scroll hard-cap has pruned
   off-screen cards (see pruneTicketListCards). Sits above the first visible card
   and follows the scroll so it stays reachable while deep in the list. */
.ticket-list-pruned-notice {
    position: sticky;
    top: 4px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 6px 14px;
    border: 1px solid rgba(129, 140, 248, 0.35);
    border-radius: 9999px;
    background: rgba(30, 41, 59, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    color: var(--text-secondary, #cbd5e1);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ticket-list-pruned-notice:hover {
    background: rgba(49, 46, 129, 0.9);
    border-color: rgba(129, 140, 248, 0.6);
}

.ticket-list-pruned-notice .ticket-list-pruned-count {
    color: var(--text-tertiary, #94a3b8);
    font-weight: 500;
}

html[data-theme="light"] .ticket-list-pruned-notice {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(79, 70, 229, 0.3);
    color: #334155;
}

html[data-theme="light"] .ticket-list-pruned-notice .ticket-list-pruned-count {
    color: #64748b;
}

.ticket-card.email-pending-claim-card {
    border-color: rgba(52, 211, 153, 0.56) !important;
    background:
        linear-gradient(90deg, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0.04) 38%, rgba(31, 41, 55, 0.58) 100%),
        rgba(31, 41, 55, 0.62) !important;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.1);
}

.ticket-card.email-pending-claim-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #34d399, #22d3ee);
    border-radius: var(--ops-card-radius) 0 0 var(--ops-card-radius);
}

.ticket-card.email-pending-claim-card:hover {
    border-color: rgba(52, 211, 153, 0.78) !important;
    box-shadow: 0 14px 32px rgba(16, 185, 129, 0.16);
}

.email-unread-reply-badge {
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.12), 0 0 14px rgba(34, 211, 238, 0.14);
}

.ticket-card.email-has-new-reply-card {
    border-color: rgba(34, 211, 238, 0.72) !important;
    background:
        linear-gradient(90deg, rgba(34, 211, 238, 0.18) 0%, rgba(34, 211, 238, 0.06) 34%, rgba(31, 41, 55, 0.58) 100%),
        rgba(31, 41, 55, 0.62) !important;
    box-shadow: 0 14px 30px rgba(34, 211, 238, 0.13);
}

.ticket-card.email-has-new-reply-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #22d3ee, #818cf8);
    border-radius: var(--ops-card-radius) 0 0 var(--ops-card-radius);
}

html[data-theme="light"] .ticket-card.email-has-new-reply-card {
    border-color: rgba(8, 145, 178, 0.62) !important;
    background:
        linear-gradient(90deg, rgba(6, 182, 212, 0.16) 0%, rgba(6, 182, 212, 0.05) 38%, rgba(255, 255, 255, 0.96) 100%),
        #ffffff !important;
    box-shadow: 0 12px 26px rgba(8, 145, 178, 0.14);
}

/* Team-wide "New reply" flag (tickets.email_new_reply_at): amber, distinct
   from the cyan per-browser unread accent above. Cleared when anyone opens
   the ticket. Amber wins when both classes are present (flag is stronger). */
.ticket-card.email-new-reply-flag-card {
    border-color: rgba(251, 191, 36, 0.72) !important;
    background:
        linear-gradient(90deg, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.06) 34%, rgba(31, 41, 55, 0.58) 100%),
        rgba(31, 41, 55, 0.62) !important;
    box-shadow: 0 14px 30px rgba(251, 191, 36, 0.13);
}

.ticket-card.email-new-reply-flag-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #fbbf24, #f97316);
    border-radius: var(--ops-card-radius) 0 0 var(--ops-card-radius);
}

html[data-theme="light"] .ticket-card.email-new-reply-flag-card {
    border-color: rgba(217, 119, 6, 0.62) !important;
    background:
        linear-gradient(90deg, rgba(251, 191, 36, 0.16) 0%, rgba(251, 191, 36, 0.05) 38%, rgba(255, 255, 255, 0.96) 100%),
        #ffffff !important;
    box-shadow: 0 12px 26px rgba(217, 119, 6, 0.14);
}

html[data-theme="light"] .email-new-reply-flag {
    border-color: rgba(217, 119, 6, 0.5) !important;
    background: rgba(251, 191, 36, 0.16) !important;
    color: #92400e !important;
}

/* Overlay ladder (root stacking context) — keep these relationships:
     ticket cards (z-auto) < toolbar 30 < header 35 < modals 40
       < notification toasts 50 < top-level popovers 60+
   The toolbar only needs to beat the ticket list so its Filters dropdown
   isn't covered; the header must beat the toolbar so its account/
   notification dropdowns hang over it; modals must beat the header so
   their backdrop covers the whole page. dashboard-v2.css keeps the same
   35 on the v2 shell header. */
#tickets-filter-bar {
    position: relative;
    z-index: 30;
}

#app-container > header {
    position: relative;
    z-index: 35;
}

/* Leader-workspace settings cards: a save button with unsaved changes glows
   amber until its card is saved (cleared in _saveTeamEmailConfigPatch). */
.lw-save-dirty {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.85), rgba(180, 83, 9, 0.85)) !important;
    border-color: rgba(251, 191, 36, 0.9) !important;
    color: #fffbeb !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25), 0 0 18px rgba(251, 191, 36, 0.4);
    animation: lw-save-dirty-pulse 1.6s ease-in-out infinite;
}
.lw-save-dirty::after {
    content: " •";
    font-weight: 800;
}
@keyframes lw-save-dirty-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25), 0 0 18px rgba(251, 191, 36, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12), 0 0 8px rgba(251, 191, 36, 0.22); }
}

html[data-theme="light"] .email-unread-reply-badge {
    border-color: rgba(8, 145, 178, 0.42) !important;
    background: rgba(6, 182, 212, 0.14) !important;
    color: #0E7490 !important;
}

#search-input.ticket-search-input-loading {
    padding-right: 2.55rem !important;
}

.ticket-search-loading-spinner {
    animation: spin 0.8s linear infinite;
    border: 2px solid rgba(34, 211, 238, 0.24);
    border-radius: 9999px;
    border-top-color: #22D3EE;
    display: none;
    height: 16px;
    margin-top: -8px;
    pointer-events: none;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 16px;
    z-index: 2;
}

html[data-theme="light"] .ticket-search-loading-spinner {
    border-color: rgba(8, 145, 178, 0.22);
    border-top-color: #0891B2;
}

.email-customer-summary {
    color: #9CA3AF;
}

.email-customer-label,
.email-customer-cc {
    color: #6B7280;
}

.email-customer-name {
    color: #E5E7EB;
}

.email-customer-address {
    color: #67E8F9;
    font-weight: 600;
}

.ticket-search-match-debug {
    align-items: center;
    background: rgba(8, 145, 178, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 8px;
    color: #A5F3FC;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    line-height: 1.35;
    margin-top: 0.35rem;
    max-width: 100%;
    padding: 0.35rem 0.5rem;
}

.ticket-search-match-debug span {
    color: #22D3EE;
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ticket-search-match-debug strong {
    color: #E0F2FE;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}

html[data-theme="light"] .ticket-search-match-debug {
    background: rgba(8, 145, 178, 0.08);
    border-color: rgba(8, 145, 178, 0.22);
    color: #0E7490;
}

html[data-theme="light"] .ticket-search-match-debug span {
    color: #4338ca;
}

html[data-theme="light"] .ticket-search-match-debug strong {
    color: #0F172A;
}

.ticket-detail-workspace {
    background: rgba(15, 23, 42, 0.38);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.ticket-detail-tabs {
    align-items: center;
    background: rgba(2, 6, 23, 0.18);
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 6px;
    scrollbar-width: thin;
}

.ticket-detail-tab {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #9CA3AF;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 800;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.ticket-detail-tab:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(129, 140, 248, 0.24);
    color: #E0E7FF;
}

.ticket-detail-tab.is-active {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(129, 140, 248, 0.42);
    color: #FFFFFF;
}

.ticket-detail-tab.has-new:not(.is-active) {
    border-color: rgba(34, 211, 238, 0.28);
    color: #A5F3FC;
}

.ticket-detail-tab-badge {
    background: rgba(34, 211, 238, 0.14);
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 999px;
    color: #CFFAFE;
    font-size: 0.6rem;
    font-weight: 900;
    line-height: 1;
    padding: 3px 6px;
}

.ticket-detail-tab-panels {
    padding: 10px;
}

.ticket-detail-tab-panel[hidden] {
    display: none !important;
}

.ticket-detail-panel-heading {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ticket-detail-panel-heading h4 {
    color: #E5E7EB;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 2px;
}

.ticket-detail-panel-heading p {
    color: #94A3B8;
    font-size: 0.68rem;
    line-height: 1.35;
    margin: 0;
}

.ticket-detail-secondary-button,
.email-thread-reply-button {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(129, 140, 248, 0.3);
    border-radius: 7px;
    color: #C7D2FE;
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px 9px;
}

.ticket-detail-secondary-button:hover,
.email-thread-reply-button:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(165, 180, 252, 0.45);
    color: #EEF2FF;
}

.ticket-notes-panel,
.ticket-reply-panel,
.ticket-ai-panel,
.ticket-activity-panel {
    min-width: 0;
}

.ticket-notes-context {
    margin-bottom: 10px;
}

.ticket-notes-scroll {
    margin-bottom: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
}

.ticket-email-thread-panel {
    margin: 0;
}

.ticket-reply-panel .email-reply-composer {
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 9px;
}

.ticket-activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ticket-activity-row {
    background: rgba(15, 23, 42, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: 10px minmax(0, 1fr);
    padding: 9px 10px;
}

.ticket-activity-dot {
    background: #818CF8;
    border-radius: 999px;
    height: 7px;
    margin-top: 6px;
    width: 7px;
}

.ticket-activity-copy p {
    color: #E5E7EB;
    font-size: 0.76rem;
    line-height: 1.35;
    margin: 0;
}

.ticket-activity-copy span,
.ticket-activity-loading,
.ticket-activity-empty {
    color: #94A3B8;
    font-size: 0.68rem;
}

.ticket-activity-loading,
.ticket-activity-empty {
    background: rgba(15, 23, 42, 0.22);
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}

.ticket-activity-error {
    color: #FCA5A5;
}

.ticket-activity-error button {
    color: #FECACA;
    font-weight: 800;
    margin-left: 6px;
}

.email-thread-panel {
    position: relative;
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(12, 20, 34, 0.76), rgba(15, 23, 42, 0.52));
    overflow: hidden;
}

.email-thread-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.28);
}

.email-thread-title {
    color: #E5E7EB;
    font-size: 0.78rem;
    font-weight: 700;
}

.email-thread-subtitle {
    color: #9CA3AF;
    font-size: 0.68rem;
}

.email-thread-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.email-thread-new-count {
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 999px;
    color: #A5F3FC;
    background: rgba(34, 211, 238, 0.1);
    font-size: 0.66rem;
    font-weight: 800;
    padding: 4px 8px;
}

.email-thread-refresh,
.email-thread-toggle {
    border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: 7px;
    color: #67E8F9;
    background: rgba(34, 211, 238, 0.1);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 9px;
}

.email-thread-toggle {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.email-thread-chevron {
    font-size: 0.68rem;
    line-height: 1;
}

.email-thread-refresh:hover,
.email-thread-toggle:hover {
    background: rgba(34, 211, 238, 0.16);
}

.ai-ticket-summary-panel {
    border: 1px solid rgba(129, 140, 248, 0.28);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.66), rgba(15, 23, 42, 0.48));
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.12);
    overflow: hidden;
}

.ai-summary-header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 12px;
}

.ai-summary-kicker {
    color: #A5B4FC;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin: 0 0 2px;
    text-transform: uppercase;
}

.ai-summary-header h4 {
    color: #F8FAFC;
    font-size: 0.88rem;
    font-weight: 850;
    margin: 0;
}

.ai-summary-header p:not(.ai-summary-kicker) {
    color: #94A3B8;
    font-size: 0.7rem;
    margin: 2px 0 0;
}

.ai-summary-header-actions,
.ai-summary-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}

.ai-summary-check-button,
.ai-summary-generate-button,
.ai-summary-actions button {
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 850;
    min-height: 30px;
    padding: 6px 10px;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.ai-summary-check-button,
.ai-summary-actions button {
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #CBD5E1;
}

.ai-summary-generate-button,
.ai-summary-actions .ai-summary-save {
    background: rgba(79, 70, 229, 0.74);
    border: 1px solid rgba(129, 140, 248, 0.46);
    color: #EEF2FF;
}

.ai-summary-check-button:hover:not(:disabled),
.ai-summary-actions button:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(129, 140, 248, 0.42);
}

.ai-summary-generate-button:hover:not(:disabled),
.ai-summary-actions .ai-summary-save:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.82);
    border-color: rgba(165, 180, 252, 0.58);
}

.ai-summary-check-button:disabled,
.ai-summary-generate-button:disabled,
.ai-summary-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.ai-summary-content {
    padding: 11px 12px 12px;
}

.ai-summary-empty,
.ai-summary-loading,
.ai-summary-error {
    border: 1px dashed rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    color: #CBD5E1;
    font-size: 0.75rem;
    line-height: 1.45;
    padding: 10px;
}

.ai-summary-ok {
    border-color: rgba(16, 185, 129, 0.28);
    color: #A7F3D0;
}

.ai-summary-loading {
    align-items: center;
    display: flex;
    gap: 9px;
}

.ai-summary-spinner {
    animation: ai-summary-spin 0.8s linear infinite;
    border: 2px solid rgba(129, 140, 248, 0.24);
    border-radius: 999px;
    border-top-color: #A5B4FC;
    display: inline-block;
    height: 16px;
    width: 16px;
}

@keyframes ai-summary-spin {
    to { transform: rotate(360deg); }
}

.ai-summary-error {
    background: rgba(127, 29, 29, 0.18);
    border-color: rgba(248, 113, 113, 0.26);
    color: #FCA5A5;
}

.ai-summary-error strong {
    display: block;
    margin-bottom: 3px;
}

.ai-summary-result {
    display: grid;
    gap: 10px;
}

.ai-summary-result-top {
    align-items: center;
    color: #94A3B8;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.68rem;
    font-weight: 750;
    gap: 6px;
}

.ai-summary-status-pill,
.ai-summary-risk {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    padding: 3px 8px;
}

.ai-summary-status-pill {
    background: rgba(99, 102, 241, 0.12);
    color: #C7D2FE;
}

.ai-summary-risk-low {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.28);
    color: #A7F3D0;
}

.ai-summary-risk-medium {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.28);
    color: #FCD34D;
}

.ai-summary-risk-high {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
    color: #FCA5A5;
}

.ai-summary-main {
    color: #E5E7EB;
    font-size: 0.8rem;
    line-height: 1.55;
    margin: 0;
}

.ai-summary-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-summary-grid > div {
    background: rgba(15, 23, 42, 0.36);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 9px;
    padding: 9px;
}

.ai-summary-grid h5 {
    color: #A5B4FC;
    font-size: 0.68rem;
    font-weight: 900;
    margin: 0 0 5px;
    text-transform: uppercase;
}

.ai-summary-grid p,
.ai-summary-grid li {
    color: #D1D5DB;
    font-size: 0.74rem;
    line-height: 1.45;
}

.ai-summary-grid ul {
    margin: 0;
    padding-left: 16px;
}

.ai-summary-muted {
    color: #94A3B8 !important;
}

.ai-ticket-summary-note {
    border-left: 3px solid #818CF8;
    padding-left: 10px;
}

.ai-reply-header-controls {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.ai-reply-tone-label {
    color: #94A3B8;
    display: grid;
    font-size: 0.66rem;
    font-weight: 850;
    gap: 4px;
    text-transform: uppercase;
}

.ai-reply-tone-select {
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    color: #E5E7EB;
    font-size: 0.74rem;
    font-weight: 750;
    min-height: 30px;
    min-width: 132px;
    outline: none;
    padding: 5px 9px;
}

.ai-reply-result {
    display: grid;
    gap: 9px;
}

.ai-reply-meta {
    align-items: center;
    color: #94A3B8;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.68rem;
    font-weight: 750;
    gap: 6px;
}

.ai-reply-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.26);
    border-radius: 9px;
    color: #FCD34D;
    font-size: 0.72rem;
    padding: 8px 9px;
}

.ai-reply-warning strong {
    display: block;
    margin-bottom: 4px;
}

.ai-reply-warning ul {
    margin: 0;
    padding-left: 16px;
}

.ai-reply-textarea {
    background: rgba(15, 23, 42, 0.46);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    color: #E5E7EB;
    font-size: 0.78rem;
    line-height: 1.55;
    min-height: 132px;
    outline: none;
    padding: 10px;
    resize: vertical;
    width: 100%;
}

.ai-reply-textarea:focus,
.ai-reply-tone-select:focus {
    border-color: rgba(129, 140, 248, 0.58);
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.13);
}

.ticket-ai-compact {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.42));
}

.ticket-ai-header {
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.13);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 9px 11px 7px;
}

.ticket-ai-header h4 {
    color: #F8FAFC;
    font-size: 0.86rem;
    font-weight: 900;
    margin: 0;
}

.ticket-ai-header p:not(.ai-summary-kicker) {
    color: #94A3B8;
    font-size: 0.7rem;
    margin: 1px 0 0;
}

.ticket-ai-header-note,
.ticket-ai-credit-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.66rem;
    font-weight: 850;
    justify-content: center;
    white-space: nowrap;
}

.ticket-ai-header-note {
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.22);
    color: #A5F3FC;
    padding: 4px 8px;
}

.ticket-ai-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 10px 0;
}

.ticket-ai-tab {
    background: rgba(15, 23, 42, 0.36);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px 8px 0 0;
    color: #CBD5E1;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 850;
    min-height: 28px;
    padding: 5px 11px;
}

.ticket-ai-tab.active {
    background: rgba(79, 70, 229, 0.28);
    border-color: rgba(129, 140, 248, 0.42);
    color: #EEF2FF;
}

.ticket-ai-panel .ai-summary-content {
    padding: 9px 10px 10px;
}

.ticket-ai-action-row {
    align-items: center;
    background: rgba(15, 23, 42, 0.32);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 9px;
    color: #CBD5E1;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 9px;
}

.ticket-ai-action-row > span {
    font-size: 0.75rem;
    line-height: 1.35;
}

.ticket-ai-action-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}

.ticket-ai-credit-badge {
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(129, 140, 248, 0.28);
    color: #C7D2FE;
    min-height: 28px;
    padding: 4px 8px;
}

.ticket-ai-result .ai-summary-grid {
    gap: 7px;
}

.ticket-ai-result .ai-summary-grid > div {
    padding: 8px;
}

.ticket-ai-result .ai-summary-main {
    font-size: 0.78rem;
}

.ticket-ai-warning {
    border-style: solid;
}

.ticket-ai-reply-row {
    align-items: flex-end;
}

.ticket-ai-reply-row .ai-reply-tone-label {
    min-width: 160px;
}

.ticket-ai-reply-editor {
    min-height: 108px;
}

.ai-kb-builder-panel {
    border-color: rgba(34, 211, 238, 0.26);
}

.ai-kb-ready {
    display: grid;
    gap: 9px;
}

.ai-kb-draft-modal-backdrop {
    align-items: center;
    background: rgba(2, 6, 23, 0.72);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 90;
}

html.ai-kb-modal-open,
body.ai-kb-modal-open {
    overflow: hidden;
}

.ai-kb-draft-modal {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.98));
    border: 1px solid rgba(129, 140, 248, 0.3);
    border-radius: 14px;
    box-shadow: 0 28px 70px rgba(2, 6, 23, 0.52);
    color: #E5E7EB;
    display: flex;
    flex-direction: column;
    max-height: min(92vh, 980px);
    max-width: 980px;
    overflow: hidden;
    width: min(980px, 100%);
}

.ai-kb-draft-header,
.ai-kb-draft-footer {
    align-items: center;
    background: rgba(15, 23, 42, 0.72);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 16px;
}

.ai-kb-draft-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.ai-kb-draft-header h3 {
    color: #F8FAFC;
    font-size: 1rem;
    font-weight: 850;
    margin: 0;
}

.ai-kb-draft-header p:not(.ai-summary-kicker) {
    color: #94A3B8;
    font-size: 0.76rem;
    margin: 2px 0 0;
}

.ai-kb-draft-body {
    display: grid;
    gap: 12px;
    overflow-y: auto;
    padding: 14px 16px 16px;
}

.ai-kb-two-col {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-kb-field {
    display: grid;
    gap: 5px;
}

.ai-kb-field label {
    color: #A5B4FC;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ai-kb-field input,
.ai-kb-field select,
.ai-kb-field textarea {
    background: rgba(15, 23, 42, 0.46);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    color: #E5E7EB;
    font-size: 0.78rem;
    line-height: 1.5;
    outline: none;
    padding: 9px 10px;
    resize: vertical;
    width: 100%;
}

.ai-kb-field input:focus,
.ai-kb-field select:focus,
.ai-kb-field textarea:focus {
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

.ai-kb-source-note {
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 10px;
    color: #A5F3FC;
    font-size: 0.74rem;
    line-height: 1.45;
    padding: 9px 10px;
}

.ai-kb-draft-footer {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ai-kb-draft-footer button {
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    color: #CBD5E1;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 850;
    min-height: 32px;
    padding: 7px 11px;
}

.ai-kb-draft-footer .ai-summary-save {
    background: rgba(14, 165, 233, 0.78);
    border-color: rgba(56, 189, 248, 0.5);
    color: #F0F9FF;
}

.ai-kb-draft-footer button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.ai-kb-article h3 {
    color: #93C5FD;
    font-size: 0.9rem;
    margin: 1rem 0 0.35rem;
}

.ai-kb-article ul,
.ai-kb-article ol {
    margin: 0.35rem 0 0.75rem;
    padding-left: 1.25rem;
}

.email-thread-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    max-height: 420px;
    overflow-y: auto;
}

.email-reply-composer {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding: 10px;
    background: #0B2230;
}

.email-reply-label {
    display: block;
    color: #D1D5DB;
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.email-reply-recipient-picker,
.email-reply-recipient-fields {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.32);
    margin-bottom: 8px;
    padding: 8px;
}

.email-reply-recipient-row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 44px minmax(0, 1fr);
    margin-bottom: 7px;
}

.email-reply-recipient-row span {
    color: #67E8F9;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.email-reply-recipient-row input {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 7px;
    background: rgba(2, 6, 23, 0.34);
    color: #E5E7EB;
    font-size: 0.74rem;
    min-width: 0;
    outline: none;
    padding: 6px 8px;
}

.email-reply-recipient-row input:focus {
    border-color: rgba(34, 211, 238, 0.55);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.1);
}

.email-reply-recipient-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -1px 0 7px 52px;
}

.email-reply-recipient-actions button {
    color: #A5F3FC;
    font-size: 0.68rem;
    font-weight: 800;
}

.email-reply-recipient-error {
    color: #FCA5A5;
    font-size: 0.68rem;
    font-weight: 700;
    margin: 2px 0 0 52px;
}

.email-reply-textarea {
    width: 100%;
    min-height: 88px;
    resize: vertical;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: #0B2230;
    color: #E5E7EB;
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 9px 10px;
    outline: none;
}

.email-reply-textarea:focus {
    border-color: rgba(34, 211, 238, 0.55);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}

.email-reply-attachments {
    margin-top: 8px;
}

.email-reply-attachment-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.email-reply-attachment-input {
    display: none;
}

.email-reply-attachment-button {
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 8px;
    color: #A5F3FC;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px 9px;
}

.email-reply-attachment-hint {
    color: #94A3B8;
    font-size: 0.66rem;
    font-weight: 600;
}

.email-reply-attachment-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.email-reply-attachment-pill {
    align-items: center;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.24);
    border-radius: 999px;
    color: #CFFAFE;
    display: inline-flex;
    gap: 6px;
    max-width: 320px;
    padding: 4px 8px;
}

.email-reply-attachment-name {
    font-size: 0.7rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-reply-attachment-size {
    color: #94A3B8;
    font-size: 0.64rem;
}

.email-reply-attachment-pill button {
    color: #FCA5A5;
    font-size: 0.64rem;
    font-weight: 800;
}

.email-reply-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.email-reply-status {
    color: #94A3B8;
    font-size: 0.7rem;
    font-weight: 700;
}

.email-reply-status[data-type="success"] {
    color: #86EFAC;
}

.email-reply-status[data-type="error"] {
    color: #FCA5A5;
}

.email-reply-status[data-type="sending"] {
    color: #67E8F9;
}

.email-reply-send {
    border: 1px solid rgba(34, 211, 238, 0.38);
    border-radius: 8px;
    color: #ECFEFF;
    background: rgba(8, 145, 178, 0.75);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 7px 12px;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.email-reply-send:hover:not(:disabled) {
    background: rgba(6, 182, 212, 0.78);
    border-color: rgba(103, 232, 249, 0.58);
}

.email-reply-send:disabled {
    cursor: wait;
    opacity: 0.65;
}

.email-thread-message {
    border: 1px solid rgba(71, 85, 105, 0.54);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.16);
    padding: 12px;
    background: #0F1A2A;
}

.email-thread-message-inbound {
    border-left: 4px solid #22D3EE;
}

.email-thread-message-outbound {
    border-left: 4px solid #A78BFA;
}

.email-thread-message-selected {
    border-color: rgba(34, 211, 238, 0.72);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.28), 0 18px 34px rgba(8, 145, 178, 0.18);
}

.email-message-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.email-message-sender {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.email-message-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    margin-left: auto;
    max-width: min(520px, 48%);
}

.email-message-open {
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.34);
    border-radius: 999px;
    color: #67E8F9;
    cursor: pointer;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 3px 8px;
}

.email-message-direction,
.email-thread-sequence,
.email-message-status,
.email-message-auto,
.email-message-remote-images,
.email-message-selected-label {
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 0.62rem;
    font-weight: 800;
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #CBD5E1;
    background: rgba(148, 163, 184, 0.1);
}

.email-thread-sequence {
    border-color: rgba(34, 211, 238, 0.34);
    color: #A5F3FC;
    background: rgba(8, 145, 178, 0.16);
}

.email-message-status {
    text-transform: capitalize;
}

.email-message-selected-label {
    border-color: rgba(34, 211, 238, 0.44);
    color: #67E8F9;
    background: rgba(8, 145, 178, 0.18);
}

.email-message-remote-images {
    border-color: rgba(245, 158, 11, 0.32);
    color: #FCD34D;
    background: rgba(245, 158, 11, 0.12);
}

.email-message-name {
    color: #F3F4F6;
    font-size: 0.78rem;
    font-weight: 700;
}

.email-message-address,
.email-message-time,
.email-message-recipients {
    color: #9CA3AF;
    font-size: 0.7rem;
}

.email-message-subject {
    color: #F8FAFC;
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1.35;
    margin-top: 10px;
}

.email-message-recipients {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    margin-top: 5px;
    padding-bottom: 9px;
}

.email-message-body {
    background: #0B2230;
    border: 1px solid rgba(34, 211, 238, 0.12);
    border-radius: 10px;
    margin-top: 9px;
    padding: 12px;
    color: #D1D5DB;
    cursor: zoom-in;
    font-size: 0.78rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.email-message-body-preview {
    max-height: 280px;
    overflow: auto;
}

.email-signature-separator {
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    height: 1px;
    margin: 16px 0 10px;
    max-width: 520px;
}

.email-signature-collapsed {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    margin-top: 12px;
    padding-top: 8px;
}

.email-signature-collapsed summary {
    color: #67E8F9;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 800;
    list-style-position: inside;
}

.email-signature-content {
    color: #94A3B8;
    font-size: 0.72rem;
    line-height: 1.45;
    margin-top: 8px;
}

.email-message-html,
.email-message-text {
    max-width: 100%;
}

.email-message-html {
    color: #CBD5E1;
}

.email-message-body a,
.email-message-modal-body a {
    color: #67E8F9;
    font-weight: 750;
    text-decoration: underline;
    text-decoration-color: rgba(103, 232, 249, 0.45);
    text-underline-offset: 2px;
}

.email-message-body a:hover,
.email-message-modal-body a:hover {
    color: #A5F3FC;
    text-decoration-color: rgba(165, 243, 252, 0.75);
}

.email-message-html * {
    background: transparent !important;
}

.email-message-html table,
.email-message-html tbody,
.email-message-html tr,
.email-message-html td {
    max-width: 100% !important;
}

.email-message-html img {
    max-width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
}

.email-message-html img:not([src]),
.email-message-html img[src=""] {
    display: none;
}

.email-message-send-error {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-top: 8px;
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.1);
    color: #FCA5A5;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 7px 9px;
}

.email-message-send-error button {
    border: 1px solid rgba(248, 113, 113, 0.38);
    border-radius: 7px;
    color: #FECACA;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 4px 8px;
}

.email-attachments {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.email-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.email-message-top-attachments {
    justify-content: flex-end;
    max-width: 100%;
}

.email-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 260px;
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 8px;
    background: rgba(34, 211, 238, 0.1);
    color: #A5F3FC;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 8px;
}

.email-message-top-attachments .email-attachment-chip {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(56, 189, 248, 0.32);
}

.email-attachment-chip:hover {
    border-color: rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.16);
}

.email-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-attachment-size,
.email-attachment-note {
    color: #94A3B8;
    font-size: 0.66rem;
    font-weight: 600;
}

.email-attachment-skips {
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.08);
    color: #FCD34D;
    font-size: 0.7rem;
    padding: 7px 9px;
}

.email-attachment-skips summary {
    cursor: pointer;
    font-weight: 800;
    list-style-position: inside;
}

.email-attachment-skips[open] summary {
    margin-bottom: 4px;
}

.email-attachment-skips ul {
    margin: 0;
    padding-left: 16px;
}

html[data-theme="light"] .email-attachment-chip {
    border-color: rgba(8, 145, 178, 0.34);
    background: rgba(6, 182, 212, 0.12);
    color: #0E7490;
}

html[data-theme="light"] .email-thread-panel {
    border-color: #BFD0E2;
    background: #F8FBFE;
}

html[data-theme="light"] .ticket-detail-workspace {
    background: #FFFFFF;
    border-color: #D7E3EF;
}

html[data-theme="light"] .ticket-detail-tabs {
    background: #F8FAFC;
    border-bottom-color: #D7E3EF;
}

html[data-theme="light"] .ticket-detail-tab {
    color: #64748B;
}

html[data-theme="light"] .ticket-detail-tab:hover {
    background: #EEF2FF;
    border-color: #C7D2FE;
    color: #3730A3;
}

html[data-theme="light"] .ticket-detail-tab.is-active {
    background: #EEF2FF;
    border-color: #A5B4FC;
    color: #3730A3;
}

html[data-theme="light"] .ticket-detail-tab.has-new:not(.is-active) {
    border-color: #67E8F9;
    color: #0E7490;
}

html[data-theme="light"] .ticket-detail-tab-badge {
    background: #ECFEFF;
    border-color: #A5F3FC;
    color: #155E75;
}

html[data-theme="light"] .ticket-detail-panel-heading h4 {
    color: #0F172A;
}

html[data-theme="light"] .ticket-detail-panel-heading p {
    color: #64748B;
}

html[data-theme="light"] .ticket-detail-secondary-button,
html[data-theme="light"] .email-thread-reply-button {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #334155;
}

html[data-theme="light"] .ticket-detail-secondary-button:hover,
html[data-theme="light"] .email-thread-reply-button:hover {
    background: #EEF2FF;
    border-color: #A5B4FC;
    color: #3730A3;
}

html[data-theme="light"] .ticket-reply-panel .email-reply-composer,
html[data-theme="light"] .ticket-activity-row {
    background: #F8FAFC;
    border-color: #D7E3EF;
}

html[data-theme="light"] .ticket-activity-copy p {
    color: #0F172A;
}

html[data-theme="light"] .ticket-activity-copy span,
html[data-theme="light"] .ticket-activity-loading,
html[data-theme="light"] .ticket-activity-empty {
    color: #64748B;
}

html[data-theme="light"] .ticket-activity-loading,
html[data-theme="light"] .ticket-activity-empty {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

html[data-theme="light"] .ai-ticket-summary-panel {
    border-color: #CBD5E1;
    background: linear-gradient(180deg, #F8FAFC, #EEF6FF);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
}

html[data-theme="light"] .ticket-ai-compact {
    background: linear-gradient(180deg, #FFFFFF, #F5FAFF);
}

html[data-theme="light"] .ticket-ai-header {
    border-bottom-color: #D7E3EF;
}

html[data-theme="light"] .ticket-ai-header h4 {
    color: #0F172A;
}

html[data-theme="light"] .ticket-ai-header p:not(.ai-summary-kicker) {
    color: #64748B;
}

html[data-theme="light"] .ticket-ai-header-note {
    background: #ECFEFF;
    border-color: #A5F3FC;
    color: #155E75;
}

html[data-theme="light"] .ticket-ai-tab {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #334155;
}

html[data-theme="light"] .ticket-ai-tab.active {
    background: #EEF2FF;
    border-color: #A5B4FC;
    color: #3730A3;
}

html[data-theme="light"] .ticket-ai-action-row {
    background: #FFFFFF;
    border-color: #D7E3EF;
    color: #334155;
}

html[data-theme="light"] .ticket-ai-credit-badge {
    background: #EEF2FF;
    border-color: #C7D2FE;
    color: #3730A3;
}

html[data-theme="light"] .ai-summary-header {
    border-bottom-color: #D7E3EF;
}

html[data-theme="light"] .ai-summary-kicker,
html[data-theme="light"] .ai-summary-grid h5 {
    color: #4F46E5;
}

html[data-theme="light"] .ai-summary-header h4,
html[data-theme="light"] .ai-summary-main {
    color: #0F172A;
}

html[data-theme="light"] .ai-summary-header p:not(.ai-summary-kicker),
html[data-theme="light"] .ai-summary-result-top,
html[data-theme="light"] .ai-summary-muted {
    color: #64748B !important;
}

html[data-theme="light"] .ai-summary-check-button,
html[data-theme="light"] .ai-summary-actions button {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #334155;
}

html[data-theme="light"] .ai-summary-generate-button,
html[data-theme="light"] .ai-summary-actions .ai-summary-save {
    background: #4F46E5;
    border-color: #6366F1;
    color: #FFFFFF;
}

html[data-theme="light"] .ai-summary-empty,
html[data-theme="light"] .ai-summary-loading {
    border-color: #CBD5E1;
    color: #334155;
}

html[data-theme="light"] .ai-summary-ok {
    border-color: rgba(5, 150, 105, 0.32);
    color: #047857;
}

html[data-theme="light"] .ai-summary-error {
    background: #FEF2F2;
    border-color: rgba(220, 38, 38, 0.28);
    color: #B91C1C;
}

html[data-theme="light"] .ai-summary-status-pill {
    background: #EEF2FF;
    border-color: #C7D2FE;
    color: #3730A3;
}

html[data-theme="light"] .ai-summary-risk-low {
    background: #ECFDF5;
    border-color: #A7F3D0;
    color: #047857;
}

html[data-theme="light"] .ai-summary-risk-medium {
    background: #FFFBEB;
    border-color: #FCD34D;
    color: #92400E;
}

html[data-theme="light"] .ai-summary-risk-high {
    background: #FEF2F2;
    border-color: #FCA5A5;
    color: #B91C1C;
}

html[data-theme="light"] .ai-summary-grid > div {
    background: #FFFFFF;
    border-color: #D7E3EF;
}

html[data-theme="light"] .ai-summary-grid p,
html[data-theme="light"] .ai-summary-grid li {
    color: #334155;
}

html[data-theme="light"] .ai-reply-tone-label,
html[data-theme="light"] .ai-reply-meta {
    color: #64748B;
}

html[data-theme="light"] .ai-reply-tone-select,
html[data-theme="light"] .ai-reply-textarea {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #0F172A;
}

html[data-theme="light"] .ai-reply-warning {
    background: #FFFBEB;
    border-color: #FCD34D;
    color: #92400E;
}

html[data-theme="light"] .ai-kb-draft-modal {
    background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
    border-color: #CBD5E1;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.2);
    color: #0F172A;
}

html[data-theme="light"] .ai-kb-draft-header,
html[data-theme="light"] .ai-kb-draft-footer {
    background: #F8FAFC;
    border-color: #D7E3EF;
}

html[data-theme="light"] .ai-kb-draft-header h3 {
    color: #0F172A;
}

html[data-theme="light"] .ai-kb-draft-header p:not(.ai-summary-kicker) {
    color: #64748B;
}

html[data-theme="light"] .ai-kb-field label {
    color: #4F46E5;
}

html[data-theme="light"] .ai-kb-field input,
html[data-theme="light"] .ai-kb-field select,
html[data-theme="light"] .ai-kb-field textarea {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #0F172A;
}

html[data-theme="light"] .ai-kb-source-note {
    background: #ECFEFF;
    border-color: #A5F3FC;
    color: #155E75;
}

html[data-theme="light"] .ai-kb-draft-footer button {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #334155;
}

html[data-theme="light"] .ai-kb-draft-footer .ai-summary-save {
    background: #0284C7;
    border-color: #0EA5E9;
    color: #FFFFFF;
}

html[data-theme="light"] .ai-kb-article h3 {
    color: #1D4ED8;
}

html[data-theme="light"] .email-thread-message {
    border-color: #D7E3EF;
    background: #FFFFFF;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .email-message-subject {
    color: #0F172A;
}

html[data-theme="light"] .email-message-recipients {
    border-bottom-color: #D7E3EF;
}

html[data-theme="light"] .email-thread-sequence {
    background: #ECFEFF;
    border-color: #BAE6FD;
    color: #0E7490;
}

html[data-theme="light"] .email-signature-separator {
    border-top-color: #CBD5E1;
}

html[data-theme="light"] .email-signature-collapsed {
    border-top-color: #D7E3EF;
}

html[data-theme="light"] .email-signature-collapsed summary {
    color: #0E7490;
}

html[data-theme="light"] .email-signature-content {
    color: #64748B;
}

html[data-theme="light"] .email-attachment-size,
html[data-theme="light"] .email-attachment-note {
    color: #64748B;
}

html[data-theme="light"] .email-attachment-skips {
    border-color: rgba(217, 119, 6, 0.28);
    background: rgba(245, 158, 11, 0.12);
    color: #92400E;
}

html[data-theme="light"] .email-reply-composer {
    border-top-color: rgba(71, 85, 105, 0.16);
    background: #EAF6FB;
}

html[data-theme="light"] .email-reply-label {
    color: #334155;
}

html[data-theme="light"] .email-reply-recipient-picker,
html[data-theme="light"] .email-reply-recipient-fields {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

html[data-theme="light"] .email-reply-recipient-title,
html[data-theme="light"] .email-reply-recipient-option small,
html[data-theme="light"] .email-reply-recipient-actions button {
    color: #64748B;
}

html[data-theme="light"] .email-reply-recipient-row span {
    color: #0E7490;
}

html[data-theme="light"] .email-reply-recipient-row input {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #0F172A;
}

html[data-theme="light"] .email-reply-recipient-error {
    color: #B91C1C;
}

html[data-theme="light"] .email-reply-textarea {
    border-color: rgba(100, 116, 139, 0.3);
    background: #EAF6FB;
    color: #0F172A;
}

html[data-theme="light"] .email-reply-attachment-button {
    border-color: #BAE6FD;
    color: #0E7490;
}

html[data-theme="light"] .email-reply-attachment-hint,
html[data-theme="light"] .email-reply-attachment-size {
    color: #64748B;
}

html[data-theme="light"] .email-reply-attachment-pill {
    background: #ECFEFF;
    border-color: #BAE6FD;
    color: #0F172A;
}

html[data-theme="light"] .email-reply-status {
    color: #64748B;
}

html[data-theme="light"] .email-reply-status[data-type="success"] {
    color: #047857;
}

html[data-theme="light"] .email-reply-status[data-type="error"] {
    color: #B91C1C;
}

html[data-theme="light"] .email-reply-status[data-type="sending"] {
    color: #0E7490;
}

html[data-theme="light"] .email-reply-send {
    border-color: rgba(8, 145, 178, 0.3);
    color: #FFFFFF;
    background: #0891B2;
}

html[data-theme="light"] .email-message-send-error {
    border-color: rgba(220, 38, 38, 0.24);
    background: rgba(254, 226, 226, 0.88);
    color: #991B1B;
}

html[data-theme="light"] .email-message-send-error button {
    border-color: rgba(220, 38, 38, 0.24);
    color: #991B1B;
}

html[data-theme="light"] .email-message-html {
    color: #334155;
}

html[data-theme="light"] .email-message-body {
    background: #EAF6FB;
    border-color: #BAE6FD;
    color: #334155;
}

html[data-theme="light"] .email-message-body a,
html[data-theme="light"] .email-message-modal-body a {
    color: #0369A1;
    text-decoration-color: rgba(3, 105, 161, 0.45);
}

html[data-theme="light"] .email-message-body a:hover,
html[data-theme="light"] .email-message-modal-body a:hover {
    color: #075985;
    text-decoration-color: rgba(7, 89, 133, 0.75);
}

html[data-theme="light"] .email-message-open {
    background: #ECFEFF;
    border-color: #67E8F9;
    color: #0E7490;
}

.email-thread-loading,
.email-thread-empty,
.email-thread-error,
.email-message-empty {
    color: #9CA3AF;
    font-size: 0.75rem;
    text-align: center;
    padding: 12px;
}

.email-thread-error {
    color: #FCA5A5;
}

.email-thread-error button {
    color: #FECACA;
    text-decoration: underline;
    font-weight: 700;
}

.email-message-modal-backdrop {
    align-items: center;
    background: rgba(2, 6, 23, 0.78);
    display: flex;
    inset: 0;
    justify-content: center;
    overflow-y: auto;
    padding: 18px;
    position: fixed;
    z-index: 2147483000;
}

html.email-message-modal-open,
body.email-message-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.email-message-modal {
    background: #111827;
    border: 1px solid rgba(99, 102, 241, 0.36);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(2, 6, 23, 0.45);
    color: #E5E7EB;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    max-height: min(88vh, 920px);
    max-width: 980px;
    min-height: 0;
    overflow: hidden;
    width: min(100%, 980px);
}

.email-message-modal-header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 16px;
}

.email-message-modal-kicker {
    color: #67E8F9;
    font-size: 0.68rem;
    font-weight: 800;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.email-message-modal h3 {
    color: #F8FAFC;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.email-message-modal-meta,
.email-message-modal-recipients {
    color: #94A3B8;
    font-size: 0.78rem;
}

.email-message-modal-close {
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    color: #CBD5E1;
    padding: 7px 10px;
}

.email-message-modal-recipients {
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    display: grid;
    gap: 5px;
    padding: 10px 16px;
}

.email-message-modal-body {
    background: #0B2230;
    border: 1px solid rgba(34, 211, 238, 0.12);
    border-radius: 10px;
    margin: 12px;
    min-height: 0;
    overscroll-behavior: contain;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    touch-action: pan-y;
}

.email-thread-list-modal {
    max-height: none;
    overflow: visible;
    padding: 0;
}

.email-message-modal-thread .email-message-body {
    cursor: default;
    max-height: none;
}

.email-message-modal-reply {
    background: #0B2230;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding: 10px 12px;
}

.email-message-modal .email-reply-recipient-picker {
    background: rgba(15, 23, 42, 0.42);
    margin-bottom: 6px;
    padding: 6px;
}

.email-message-modal .email-reply-recipient-list {
    gap: 5px;
}

.email-message-modal .email-reply-recipient-option {
    padding: 5px 7px;
}

.email-message-modal .email-reply-textarea {
    background: #0B2230;
    min-height: 72px;
}

html[data-theme="light"] .email-message-modal {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #0F172A;
}

html[data-theme="light"] .email-message-modal h3 {
    color: #0F172A;
}

html[data-theme="light"] .email-message-modal-meta,
html[data-theme="light"] .email-message-modal-recipients {
    color: #475569;
}

html[data-theme="light"] .email-message-modal-reply {
    background: #EAF6FB;
}

html[data-theme="light"] .email-message-modal-body {
    background: #EAF6FB;
    border-color: #BAE6FD;
}

html[data-theme="light"] .email-message-modal .email-reply-recipient-picker {
    background: #F8FAFC;
}

html[data-theme="light"] .email-message-modal .email-reply-textarea {
    background: #EAF6FB;
}

.ticket-card .ticket-body {
    /* Remove slow transitions for instant expand/collapse */
    opacity: 1;
    cursor: default;
    will-change: auto;
}

.ticket-card .ticket-header {
    gap: 8px !important;
}

.ticket-card .ticket-header .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 3px !important;
}

.ticket-card .ticket-header .flex-wrap {
    row-gap: 3px !important;
}

.ticket-card .ticket-header p.text-white.text-sm {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.ticket-card .ticket-header .text-xs {
    font-size: 11px !important;
}

.ticket-card .ticket-header .text-\[10px\],
.ticket-card .ticket-header .priority-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
}

.ticket-card .ticket-collapse-btn {
    padding: 2px !important;
}

.ticket-card .ticket-body > .relative {
    margin-top: 10px !important;
    padding-top: 10px !important;
}

.ticket-card > [onclick*="stopPropagation"] {
    margin-top: 6px !important;
    padding-top: 7px !important;
}

.ticket-card > [onclick*="stopPropagation"] .text-xs {
    font-size: 11px !important;
}

.ticket-card > [onclick*="stopPropagation"] svg {
    height: 13px !important;
    width: 13px !important;
}

.ticket-card > [onclick*="stopPropagation"] button,
.ticket-card > [onclick*="stopPropagation"] label,
.ticket-card > [onclick*="stopPropagation"] .kb-button {
    padding: 4px !important;
}

.ticket-card > [onclick*="stopPropagation"] .gap-2 {
    gap: 5px !important;
}

.ticket-card .ticket-body.hidden {
    display: none; /* Use display:none for instant toggle instead of slow animations */
    margin-top: 0;
}

.ticket-card.reminded-yellow {
    background: rgba(120, 93, 33, 0.22);
    border-left: 3px solid #f59e0b;
}

/* ==================== NOTE STYLES ==================== */

.note-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
}

.note-text-display, .note-text-display p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.note-text-collapsible.collapsed {
    max-height: 3.5rem;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* ==================== QUILL EDITOR STYLES ==================== */

.note-editor {
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.3);
}

.note-editor:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.note-editor .ql-toolbar {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(167, 139, 250, 0.05));
    border: none !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
    padding: 10px;
}

.note-editor .ql-container {
    background: rgba(0, 0, 0, 0.2);
    border: none !important;
    color: #d1d5db;
    min-height: 100px;
    font-size: 0.875rem;
}

.note-editor .ql-editor::before {
    color: #6b7280 !important;
    font-style: normal !important;
    padding-left: 12px;
}

.note-editor .ql-editor {
    padding: 12px;
}

.note-editor .ql-snow .ql-stroke {
    stroke: #9ca3af;
}

.note-editor .ql-snow .ql-fill {
    fill: #9ca3af;
}

.note-editor .ql-snow .ql-picker-label {
    color: #9ca3af;
}

.note-editor .ql-snow .ql-active .ql-stroke {
    stroke: #818cf8;
}

.note-editor .ql-snow .ql-active .ql-fill {
    fill: #818cf8;
}

.note-editor .ql-snow.ql-toolbar button:hover .ql-stroke {
    stroke: #c7d2fe;
}

.note-editor .ql-snow.ql-toolbar button:hover .ql-fill {
    fill: #c7d2fe;
}

.note-paste-upload-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 8px;
    background: rgba(8, 47, 73, 0.45);
    color: #bae6fd;
    font-size: 0.75rem;
    line-height: 1.35;
}

.note-paste-upload-status.hidden {
    display: none;
}

.note-paste-upload-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(186, 230, 253, 0.35);
    border-top-color: #22d3ee;
    border-radius: 999px;
    animation: spin 0.8s linear infinite;
    flex: 0 0 auto;
}

.note-paste-upload-done {
    color: #34d399;
    font-weight: 800;
}

.note-attachment-reference {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 2px 3px;
    padding: 3px 8px;
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 999px;
    background: rgba(8, 145, 178, 0.16);
    color: #67e8f9;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    vertical-align: baseline;
    white-space: normal;
    overflow-wrap: anywhere;
}

.note-attachment-reference-cleaned {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.13);
    color: #facc15;
}

.note-attachment-reference.is-loading {
    opacity: 0.75;
}

.note-attachment-reference-button,
.note-attachment-reference-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.note-attachment-reference-button:hover,
.note-attachment-reference-link:hover {
    color: #a5f3fc;
    text-decoration: underline;
}

.note-attachment-reference-thumb {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(15, 23, 42, 0.65);
    flex: 0 0 auto;
}

.note-attachment-reference-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="light"] .note-paste-upload-status {
    background: rgba(224, 242, 254, 0.85);
    border-color: rgba(14, 165, 233, 0.35);
    color: #075985;
}

html[data-theme="light"] .note-attachment-reference {
    background: rgba(236, 254, 255, 0.95);
    border-color: rgba(8, 145, 178, 0.35);
    color: #0e7490;
}

html[data-theme="light"] .note-attachment-reference-cleaned {
    background: rgba(254, 243, 199, 0.9);
    border-color: rgba(217, 119, 6, 0.35);
    color: #92400e;
}

html[data-theme="light"] .note-attachment-reference-button:hover,
html[data-theme="light"] .note-attachment-reference-link:hover {
    color: #155e75;
}

html[data-theme="light"] .note-attachment-reference-thumb {
    background: #fff;
    border-color: rgba(8, 145, 178, 0.35);
}

.ql-snow .ql-editor pre.ql-syntax {
    background-color: #111827;
    color: #e5e7eb;
    padding: 12px;
    border-radius: 6px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ==================== ATTACHMENTS ==================== */

.attachment-thumbnail {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid rgba(99, 102, 241, 0.3);
    transition: all 0.2s ease;
}

.attachment-thumbnail:hover {
    transform: scale(1.05);
    border-color: #6366f1;
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.2);
}

.attachment-delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ef4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #1f2937;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.group:hover .attachment-delete-btn {
    opacity: 1;
    transform: scale(1);
}

.char-counter.warning {
    color: #f59e0b;
}

.char-counter.danger {
    color: #ef4444;
}

/* ==================== MENTION DROPDOWN ==================== */

.mention-dropdown {
    display: none;
    position: absolute;
    background: rgba(31, 41, 55, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    min-width: 200px;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
}

.mention-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #d1d5db;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mention-item:hover,
.mention-item.selected {
    background: rgba(99, 102, 241, 0.3);
    color: #ffffff;
}

.mention-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.mention-name {
    flex-grow: 1;
}

/* ==================== MENTION NOTIFICATIONS ==================== */

.mention-notification {
    animation: slideInRight 0.3s ease-out, mentionPulse 2s ease-in-out infinite;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
}

.mention-notification:hover {
    transform: translateX(-4px);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4);
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
    animation: slideInRight 0.3s ease-out; /* Stop pulse on hover */
}

/* Pulse animation for mention notifications */
@keyframes mentionPulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(220, 38, 38, 0.6);
    }
}

/* ==================== MILESTONE NOTIFICATIONS ==================== */

.milestone-notification {
    animation: slideInRight 0.3s ease-out;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #78350f 0%, #a16207 100%) !important;
    backdrop-filter: none !important;
}

.milestone-notification:hover {
    transform: translateX(-4px);
    box-shadow: 0 8px 24px rgba(234, 179, 8, 0.3);
    background: linear-gradient(135deg, #a16207 0%, #ca8a04 100%) !important;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Notification center mobile responsive */
@media (max-width: 640px) {
    #notification-center {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        overflow: hidden;
    }
    #notif-list {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* Schedule modals fullscreen on small screens */
    #schedule-modal > div,
    #default-schedule-modal > div {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        padding: 8px !important;
    }
    .schedule-week-grid th {
        font-size: 9px;
        padding: 4px 2px;
        letter-spacing: 0;
    }
    .schedule-week-grid td {
        font-size: 9px;
        padding: 4px 1px;
    }
    .schedule-week-grid td:first-child {
        min-width: 55px;
        max-width: 70px;
        font-size: 9px;
        padding-left: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sched-cell-working,
    .sched-cell-off {
        font-size: 8px;
    }
    .default-schedule-grid td.default-grid-cell {
        min-width: 0 !important;
        padding: 3px 1px;
    }
    .default-schedule-grid .def-cell-times {
        flex-direction: column;
        gap: 0;
    }
    .default-schedule-grid .def-cell-times span {
        display: none;
    }
    .default-schedule-grid .def-cell-times input[type="time"] {
        font-size: 9px;
        width: 100%;
    }
}

/* ==================== UTILITY CLASSES ==================== */

.hidden {
    display: none !important;
}

.unread-activity p {
    color: #a5b4fc !important;
}

.kudos-btn.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.slide-in {
    animation: slideInUp 0.3s ease-out;
}

#tickets-footer.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
}

/* ==================== MODAL CONSISTENCY ==================== */

.modal .glassmorphism {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.95) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.modal input[type="text"],
.modal input[type="number"],
.modal input[type="date"],
.modal input[type="time"],
.modal select,
.modal textarea {
    background: rgba(55, 65, 81, 0.7) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #e5e7eb !important;
}

.modal input[type="text"]:focus,
.modal input[type="number"]:focus,
.modal input[type="date"]:focus,
.modal input[type="time"]:focus,
.modal select:focus,
.modal textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* ==================== THREADED NOTES ==================== */

.note-container.ml-6 {
    background: rgba(67, 56, 202, 0.05);
    border-left: 3px solid rgba(99, 102, 241, 0.5);
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.note-container.ml-6 .ql-editor {
    font-size: 0.85rem;
}

/* ==================== STARRED TAB ==================== */

#tab-starred {
    font-size: 1.2rem;
}
/* Add highlight effect for navigated tickets */
.ticket-card {
    transition: all 0.3s ease;
}

.ticket-card.ring-2 {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
}
/* Note action buttons hover effects */
.note-container button {
    transition: all 0.2s ease;
}

.note-container button:hover {
    transform: translateY(-1px);
}

.note-container button:active {
    transform: translateY(0);
}

/* Remove default padding from Quill editor in notes */
.note-text-display.ql-editor {
    padding: 0 !important;
}
/* Kudos button animation when liked */
@keyframes kudos-pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.kudos-animation {
    animation: kudos-pop 0.3s ease;
}

/* Thumbs up scale transition */
.note-container button span.text-base {
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Button hover effects */
.note-container button:hover span.text-base {
    transform: scale(1.1);
}

/* Smooth transitions for all button states */
.note-container button {
    transition: all 0.2s ease;
}
/* Custom scrollbar for notes section */
.max-h-96.overflow-y-auto::-webkit-scrollbar {
    width: 8px;
}

.max-h-96.overflow-y-auto::-webkit-scrollbar-track {
    background: rgba(55, 65, 81, 0.3);
    border-radius: 4px;
}

.max-h-96.overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5);
    border-radius: 4px;
}

.max-h-96.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
}

/* Firefox scrollbar */
.max-h-96.overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.5) rgba(55, 65, 81, 0.3);
}

/* Smooth scroll behavior */
.max-h-96.overflow-y-auto {
    scroll-behavior: smooth;
}
/* Solid glassmorphism for popups that need better readability */
.glassmorphism-solid {
    background: rgba(31, 41, 55, 0.98); /* Much less transparent - almost solid */
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* Activity log specific styles */
#activity-log {
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Activity items styling */
#activity-list {
    overflow-y: scroll;
}

#activity-list > div {
    background: rgba(55, 65, 81, 0.5);
    border: 1px solid rgba(75, 85, 99, 0.5);
    border-radius: 0.5rem;
    padding: 0.75rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

#activity-list > div:hover {
    background: rgba(55, 65, 81, 0.8);
    border-color: rgba(99, 102, 241, 0.5);
}

/* Activity text contrast */
#activity-list .activity-username {
    color: #a5b4fc; /* Indigo 300 */
    font-weight: 600;
}

#activity-list .activity-action {
    color: #e5e7eb; /* Gray 200 */
}

#activity-list .activity-time {
    color: #9ca3af; /* Gray 400 */
    font-size: 0.75rem;
}

/* Custom scrollbar for activity log */
#activity-log::-webkit-scrollbar {
    width: 6px;
}

#activity-log::-webkit-scrollbar-track {
    background: rgba(55, 65, 81, 0.3);
    border-radius: 3px;
}

#activity-log::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5);
    border-radius: 3px;
}

#activity-log::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
}
/* Glassmorphism for modals */
.glassmorphism-solid {
    background: rgba(31, 41, 55, 0.98);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==================== STATUS/BREAK SYSTEM ==================== */

.status-option-card.selected {
    border-color: currentColor;
    background: rgba(99, 102, 241, 0.1);
}

.status-option-card:focus-visible {
    outline: 2px solid rgba(129, 140, 248, 0.9);
    outline-offset: 3px;
}

.duration-option {
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    background: rgba(55, 65, 81, 0.5);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    font-weight: 600;
}

.duration-option:hover {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.1);
}

.duration-option.selected {
    border-color: rgb(99, 102, 241);
    background: rgba(99, 102, 241, 0.2);
    color: rgb(167, 139, 250);
}

.status-notification-toast {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.status-notification-toast.removing {
    animation: slideOutRight 0.3s ease-in forwards;
}

@keyframes slideOutRight {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Status indicator colors */
.status-coffee { color: #F59E0B; border-color: #F59E0B; }
.status-lunch { color: #F97316; border-color: #F97316; }
.status-meeting { color: #3B82F6; border-color: #3B82F6; }
.status-away { color: #A855F7; border-color: #A855F7; }
.status-personal { color: #10B981; border-color: #10B981; }
.status-other { color: #6B7280; border-color: #6B7280; }

.hover-scale {
    transition: transform 0.2s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* User on break distinctive styles */
.user-on-break {
    position: relative;
    border-width: 2px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    animation: break-pulse 2s ease-in-out infinite;
}

.user-on-break.status-coffee_break {
    border-color: rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

.user-on-break.status-lunch {
    border-color: rgba(249, 115, 22, 0.6) !important;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}

.user-on-break.status-meeting {
    border-color: rgba(59, 130, 246, 0.6) !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.user-on-break.status-away {
    border-color: rgba(168, 85, 247, 0.6) !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.user-on-break.status-personal {
    border-color: rgba(16, 185, 129, 0.6) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.user-on-break.status-other {
    border-color: rgba(107, 114, 128, 0.6) !important;
    box-shadow: 0 0 20px rgba(107, 114, 128, 0.3);
}

@keyframes break-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px currentColor;
    }
    50% {
        opacity: 0.85;
        box-shadow: 0 0 30px currentColor;
    }
}

/* Break status badge overlay */
.user-on-break::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(135deg, transparent 0%, currentColor 100%);
    opacity: 0.05;
    pointer-events: none;
    border-radius: inherit;
}

/* ==================== EMOJI REACTIONS ==================== */

.reaction-btn {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.reaction-btn:hover {
    transform: scale(1.1);
}

.reaction-btn.reaction-active {
    box-shadow: 0 0 0 2px currentColor;
}

.reaction-picker {
    animation: slideUpReaction 0.2s ease-out;
}

@keyframes slideUpReaction {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reaction-picker-btn {
    transition: all 0.2s ease;
}

.reaction-picker-btn:hover {
    transform: scale(1.25);
}

.reaction-add-btn {
    position: relative;
}

.reaction-add-btn:hover span {
    transform: scale(1.2);
    display: inline-block;
}

.reaction-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -100%);
    transition: opacity 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.reaction-tooltip.show {
    opacity: 1;
}

.reaction-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

/* Reaction animations */
@keyframes reactionPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.reaction-btn.just-added {
    animation: reactionPop 0.3s ease;
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */

/* Content visibility for tickets - DISABLED for perf (was the scroll-jank cause).
   content-visibility:auto skips painting off-screen cards, then renders each
   one on the fly as it scrolls in. Because real card height rarely matches the
   contain-intrinsic-size estimate, content below shifts and the scrollbar
   re-anchors on every reveal -- the "jumpy/laggy while scrolling" symptom.
   Mobile already disabled it for the same reason (broken touch scroll).
   contain:layout style paint is kept below, which still isolates each cards
   layout/paint without the render-in jank. Off-screen work is instead bounded
   by infinite-scroll pagination (setupTicketInfiniteScroll in js/tickets.js).
   If in-DOM card count ever grows large, switch to true list virtualization. */
.ticket-item,
[id^="ticket-"],
.ticket-card {
    content-visibility: visible;
}

/* GPU acceleration for animations.
   NOTE: .ticket-item is intentionally NOT promoted here. A permanent
   will-change/translateZ on every list item forces one compositor layer per
   card, so a long ticket list explodes into hundreds of GPU layers -- that
   costs compositor memory and per-frame layer management and was a scroll-lag
   contributor. The adjacent contain: layout style paint rule below already
   gives each card its own stacking context + containing block (what translateZ
   provided), so card dropdowns/menus keep working without the permanent layer.
   Modals/notifications stay promoted: few of them, and they actually animate. */
.modern-card,
.modal,
.notification {
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize image rendering */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Optimize font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Reduce paint on scroll */
.ticket-list,
.notes-container,
.activity-list {
    -webkit-overflow-scrolling: touch;
}

/* Optimize backdrop filters on lower-end devices */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Contain layout changes */
.ticket-item,
.ticket-card {
    contain: layout style paint;
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */

/* Keep native momentum scrolling without forcing every scroll pane into a stacking context */
main,
.overflow-y-auto,
[style*="overflow-y"] {
    -webkit-overflow-scrolling: touch;
}

/* Optimize ticket cards for fast rendering - removed content-visibility as it causes issues on mobile */

/* Fast click response - remove tap delay on mobile */
a, button, .ticket-card, [onclick] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Optimize animations for 60fps */
@media (prefers-reduced-motion: no-preference) {
    * {
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Force GPU compositing for smooth transforms - REMOVED for ticket-card to prevent text blur */
.badge-card,
.badge-holder {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Keep ticket cards crisp without GPU acceleration */
.ticket-card {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

/* Phase 3: Professional ticket separators */
.ticket-card {
    border-bottom: 1px solid rgba(107, 114, 128, 0.15);
}

.ticket-card:last-child {
    border-bottom: none;
}

/* Phase 5: Sidebar section backgrounds for better visual separation */
#sidebar > div[class*="bg-"] {
    background-color: rgba(31, 41, 55, 0.25) !important;
    border-color: rgba(75, 85, 99, 0.3) !important;
}

/* Enhanced background for Team Stats section */
#sidebar > div:has(#stats-container) {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.4) 0%, rgba(17, 24, 39, 0.3) 100%) !important;
    border-color: rgba(99, 102, 241, 0.15) !important;
}

.team-device-indicator {
    align-items: center;
    border-radius: 5px;
    cursor: help;
    display: inline-flex;
    line-height: 1;
    outline: none;
    padding: 1px 2px;
    position: relative;
}

.team-device-indicator:focus-visible {
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.28);
}

.team-device-tooltip {
    background: #0B1220;
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 8px;
    bottom: calc(100% + 8px);
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.36);
    color: #CBD5E1;
    display: grid;
    font-size: 10px;
    gap: 2px;
    left: 50%;
    line-height: 1.25;
    max-width: 190px;
    min-width: 148px;
    opacity: 0;
    padding: 7px 8px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    transform: translate(-50%, 4px);
    transition: opacity 120ms ease, transform 120ms ease;
    visibility: hidden;
    white-space: normal;
    z-index: 50;
}

.team-device-tooltip strong {
    color: #67E8F9;
    font-size: 10px;
}

.team-device-tooltip::after {
    border: 6px solid transparent;
    border-top-color: rgba(34, 211, 238, 0.28);
    content: "";
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
}

.team-device-indicator:hover .team-device-tooltip,
.team-device-indicator:focus .team-device-tooltip,
.team-device-indicator:focus-within .team-device-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
}

html[data-theme="light"] .team-device-tooltip {
    background: #FFFFFF;
    border-color: #BAE6FD;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
    color: #334155;
}

html[data-theme="light"] .team-device-tooltip strong {
    color: #0369A1;
}

/* Enhanced background for Leaderboard section */
#sidebar > div:has(#leaderboard-container) {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%) !important;
    border-color: rgba(147, 51, 234, 0.25) !important;
}

/* Phase 6: Professional typography adjustments */

/* Improved ticket subject readability */
.ticket-header p.text-white.text-sm {
    font-size: 0.875rem !important; /* 14px - slightly reduced */
    line-height: 1.5 !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important; /* Slight tightening for modern look */
}

/* Refined ticket metadata text */
.ticket-header .text-xs {
    font-size: 0.6875rem !important; /* 11px instead of 12px */
    letter-spacing: 0.01em !important;
    font-weight: 500 !important;
}

/* Badge text refinement - slightly smaller, more consistent */
.ticket-header .text-\[10px\] {
    font-size: 0.625rem !important; /* Keep at 10px but ensure consistency */
    font-weight: 600 !important;
    letter-spacing: 0.02em !important; /* Better readability at small size */
}

/* Priority badge specific adjustments */
.priority-badge {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* Ticket ID styling - more prominent */
.ticket-header .font-bold.text-indigo-400 {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

/* Note text refinement */
.note-text-display p {
    line-height: 1.6 !important;
    letter-spacing: -0.005em !important;
}

/* Sidebar section headings */
#sidebar h3.text-sm {
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    font-size: 0.8125rem !important; /* 13px */
}

/* Modal headings refinement */
.text-2xl.font-bold {
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.3 !important;
}

/* Button text consistency */
button.font-bold,
button.font-semibold {
    letter-spacing: -0.005em !important;
}

/* Phase 3 density: compact collapsed ticket cards */
.ticket-card .ticket-header p.text-white.text-sm {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.ticket-card .ticket-header .text-xs {
    font-size: 11px !important;
}

.ticket-card .ticket-header .text-\[10px\],
.ticket-card .ticket-header .priority-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
}

/* Knowledge Base page */
.kb-page-shell {
    display: grid;
    gap: 14px;
}

.kb-page-header,
.kb-filter-panel,
.kb-category-section,
.kb-empty-state {
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    box-shadow: 0 16px 42px rgba(2, 6, 23, 0.18);
}

.kb-page-header {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 16px 18px;
}

.kb-eyebrow,
.kb-ai-builder-kicker {
    color: #67E8F9;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.kb-page-header h2 {
    color: #F8FAFC;
    font-size: 1.35rem;
    font-weight: 900;
    margin: 0;
}

.kb-page-header p:not(.kb-eyebrow) {
    color: #AFC2D8;
    font-size: 0.82rem;
    margin: 4px 0 0;
}

.kb-refresh-button,
.kb-clear-button,
.kb-card-actions button,
.kb-empty-state button,
.kb-ai-builder-inline button {
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(34, 211, 238, 0.32);
    border-radius: 8px;
    color: #CFFAFE;
    cursor: pointer;
    font-size: 0.73rem;
    font-weight: 850;
    min-height: 34px;
    padding: 7px 11px;
}

.kb-refresh-button,
.kb-ai-builder-inline button {
    background: rgba(14, 165, 233, 0.18);
}

.kb-refresh-button:disabled,
.kb-ai-builder-inline button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.kb-stats-row {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kb-stat-card {
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 11px;
    display: grid;
    gap: 3px;
    padding: 12px;
}

.kb-stat-card span,
.kb-stat-card small {
    color: #8EA4BE;
    font-size: 0.68rem;
    font-weight: 700;
}

.kb-stat-card strong {
    color: #F8FAFC;
    font-size: 1.05rem;
}

.kb-filter-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.kb-client-chips,
.kb-card-meta,
.kb-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kb-client-chip {
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    color: #CBD5E1;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 850;
    padding: 6px 11px;
}

.kb-client-chip.active {
    background: rgba(34, 211, 238, 0.16);
    border-color: rgba(34, 211, 238, 0.42);
    color: #A5F3FC;
}

.kb-filter-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.35fr) minmax(130px, 0.25fr) auto;
}

.kb-search-wrap {
    align-items: center;
    background: rgba(15, 23, 42, 0.38);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 9px;
    display: flex;
    gap: 9px;
    padding: 0 10px;
}

.kb-search-wrap span {
    color: #67E8F9;
    font-size: 0.7rem;
    font-weight: 850;
}

.kb-search-wrap input,
.kb-filter-grid select {
    background: rgba(15, 23, 42, 0.38);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 9px;
    color: #E5E7EB;
    font-size: 0.78rem;
    min-height: 36px;
    outline: none;
    padding: 8px 10px;
    width: 100%;
}

.kb-search-wrap input {
    background: transparent;
    border: 0;
    padding-left: 0;
}

.kb-entries-container {
    display: grid;
    gap: 12px;
}

.kb-category-section {
    overflow: hidden;
}

.kb-category-header {
    align-items: center;
    background: transparent;
    border: 0;
    color: #BAE6FD;
    cursor: pointer;
    display: flex;
    font-weight: 900;
    justify-content: space-between;
    padding: 12px 14px;
    text-align: left;
    width: 100%;
}

.kb-category-header strong {
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 999px;
    color: #67E8F9;
    font-size: 0.68rem;
    padding: 2px 7px;
}

.kb-category-header svg {
    height: 18px;
    transition: transform 0.16s ease;
    width: 18px;
}

.kb-category-header svg.collapsed {
    transform: rotate(-90deg);
}

.kb-card-grid {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
}

.kb-solution-card {
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(30, 41, 59, 0.58));
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 11px;
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 13px;
}

.kb-solution-card:hover {
    border-color: rgba(34, 211, 238, 0.36);
}

.kb-card-title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kb-card-title-row h4 {
    color: #F8FAFC;
    font-size: 0.92rem;
    font-weight: 900;
    margin: 0;
}

.kb-client-badge {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: 999px;
    color: #BFDBFE;
    font-size: 0.64rem;
    font-weight: 900;
    padding: 2px 7px;
}

.kb-public-badge {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.24);
    border-radius: 999px;
    color: #BBF7D0;
    font-size: 0.64rem;
    font-weight: 900;
    padding: 2px 7px;
}

.kb-card-preview {
    color: #AFC2D8;
    font-size: 0.76rem;
    line-height: 1.45;
    margin: 6px 0 0;
}

.kb-card-meta {
    margin-top: 8px;
}

.kb-card-meta span {
    color: #94A3B8;
    font-size: 0.68rem;
}

.kb-card-actions {
    justify-content: flex-end;
    max-width: 280px;
}

.kb-empty-state,
.kb-skeleton-list {
    display: grid;
    gap: 10px;
    padding: 18px;
    text-align: center;
}

.kb-empty-state strong {
    color: #F8FAFC;
}

.kb-empty-state span {
    color: #AFC2D8;
    font-size: 0.8rem;
}

.kb-empty-state button {
    justify-self: center;
}

.kb-skeleton-card {
    background: rgba(15, 23, 42, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 11px;
    display: grid;
    gap: 8px;
    padding: 14px;
}

.kb-skeleton-line {
    animation: kb-skeleton-pulse 1.2s ease-in-out infinite;
    background: rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    height: 9px;
    width: 50%;
}

.kb-skeleton-line.wide {
    width: 75%;
}

.kb-skeleton-line.short {
    width: 30%;
}

@keyframes kb-skeleton-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

.kb-ai-builder-inline {
    background: rgba(8, 47, 73, 0.36);
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 12px;
    display: grid;
    gap: 10px;
    padding: 13px;
}

.kb-ai-builder-inline h3 {
    color: #F8FAFC;
    font-size: 0.94rem;
    font-weight: 900;
    margin: 0;
}

.kb-ai-builder-inline p:not(.kb-ai-builder-kicker) {
    color: #AFC2D8;
    font-size: 0.76rem;
    margin: 3px 0 0;
}

.kb-ai-draft-status {
    align-items: center;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 9px;
    color: #CBD5E1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.72rem;
    line-height: 1.45;
    padding: 8px 10px;
}

.kb-ai-draft-status-success {
    background: rgba(6, 78, 59, 0.24);
    border-color: rgba(16, 185, 129, 0.3);
    color: #A7F3D0;
}

.kb-ai-draft-status-error,
.kb-ai-draft-status-warning {
    background: rgba(120, 53, 15, 0.23);
    border-color: rgba(245, 158, 11, 0.3);
    color: #FDE68A;
}

.kb-ai-review-notes {
    flex-basis: 100%;
}

html[data-theme="light"] .kb-page-header,
html[data-theme="light"] .kb-filter-panel,
html[data-theme="light"] .kb-category-section,
html[data-theme="light"] .kb-empty-state,
html[data-theme="light"] .kb-stat-card,
html[data-theme="light"] .kb-skeleton-card {
    background: #FFFFFF;
    border-color: #D7E3EF;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .kb-page-header h2,
html[data-theme="light"] .kb-stat-card strong,
html[data-theme="light"] .kb-card-title-row h4,
html[data-theme="light"] .kb-empty-state strong,
html[data-theme="light"] .kb-ai-builder-inline h3 {
    color: #0F172A;
}

html[data-theme="light"] .kb-page-header p:not(.kb-eyebrow),
html[data-theme="light"] .kb-card-preview,
html[data-theme="light"] .kb-empty-state span,
html[data-theme="light"] .kb-ai-builder-inline p:not(.kb-ai-builder-kicker) {
    color: #475569;
}

html[data-theme="light"] .kb-client-chip,
html[data-theme="light"] .kb-search-wrap,
html[data-theme="light"] .kb-filter-grid select,
html[data-theme="light"] .kb-card-actions button,
html[data-theme="light"] .kb-clear-button,
html[data-theme="light"] .kb-solution-card {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #0F172A;
}

html[data-theme="light"] .kb-search-wrap input {
    color: #0F172A;
}

html[data-theme="light"] .kb-client-chip.active {
    background: #ECFEFF;
    border-color: #67E8F9;
    color: #155E75;
}

html[data-theme="light"] .kb-category-header {
    color: #0369A1;
}

html[data-theme="light"] .kb-card-meta span,
html[data-theme="light"] .kb-stat-card span,
html[data-theme="light"] .kb-stat-card small {
    color: #64748B;
}

html[data-theme="light"] .kb-ai-builder-inline {
    background: #ECFEFF;
    border-color: #A5F3FC;
}

html[data-theme="light"] .kb-ai-draft-status {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #334155;
}

html[data-theme="light"] .kb-ai-draft-status-success {
    background: #ECFDF5;
    border-color: #A7F3D0;
    color: #065F46;
}

html[data-theme="light"] .kb-ai-draft-status-error,
html[data-theme="light"] .kb-ai-draft-status-warning {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}

/* KB Tab Glow Effect - Special notification when new KB entry is added */
.kb-new-entry-glow {
    position: relative;
    animation: kb-glow-pulse 2s ease-in-out infinite !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%) !important;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.6), 0 0 30px rgba(139, 92, 246, 0.4) !important;
}

.kb-new-entry-glow::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 50%;
    animation: kb-dot-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
}

@keyframes kb-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.6), 0 0 30px rgba(139, 92, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.8), 0 0 40px rgba(139, 92, 246, 0.6);
    }
}

@keyframes kb-dot-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* ── Inline image previews in notes (pasted screenshots etc.) ──
   Image attachment references render as a real preview instead of a
   30px chip; non-image files keep the compact chip look. */
.note-attachment-reference--image {
    display: block;
    max-width: 100%;
    background: transparent;
    border: 0;
    padding: 2px 0;
}
.note-attachment-reference--image .note-attachment-reference-button {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.note-attachment-reference--image .note-attachment-reference-thumb {
    width: auto;
    height: auto;
    max-width: min(340px, 100%);
    max-height: 260px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(15, 23, 42, 0.65);
    cursor: zoom-in;
    transition: filter 0.15s ease;
}
.note-attachment-reference--image .note-attachment-reference-button:hover .note-attachment-reference-thumb {
    filter: brightness(1.08);
}
.note-attachment-reference--image .note-attachment-reference-label {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
}
html[data-theme="light"] .note-attachment-reference--image {
    background: transparent;
    border: 0;
}
[data-device="mobile"] .note-attachment-reference--image .note-attachment-reference-thumb {
    max-width: 100%;
    max-height: 200px;
}

/* ── Ticket macros picker (parity plan Phase 1) ─────────────────── */
.macro-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(129, 140, 248, 0.35);
    background: rgba(99, 102, 241, 0.12);
    color: #A5B4FC;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.macro-picker-trigger:hover {
    background: rgba(99, 102, 241, 0.22);
    color: #C7D2FE;
}

.email-reply-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.macro-picker-popover {
    position: fixed;
    z-index: 1200;
    width: min(360px, calc(100vw - 24px));
    max-height: 380px;
    display: flex;
    flex-direction: column;
    background: #111827;
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.macro-picker-popover.hidden {
    display: none;
}

.macro-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(75, 85, 99, 0.4);
    color: #C7D2FE;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.macro-picker-close {
    background: none;
    border: none;
    color: #9CA3AF;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}

.macro-picker-close:hover {
    color: #E5E7EB;
    background: rgba(75, 85, 99, 0.4);
}

.macro-picker-search {
    margin: 8px 10px 0;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(75, 85, 99, 0.6);
    background: #1F2937;
    color: #E5E7EB;
    font-size: 0.78rem;
}

.macro-picker-search:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.7);
}

.macro-picker-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.macro-picker-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}

.macro-picker-item:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
}

.macro-picker-item-name {
    color: #E5E7EB;
    font-size: 0.8rem;
    font-weight: 700;
}

.macro-picker-item-preview {
    color: #9CA3AF;
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.macro-picker-empty {
    padding: 18px 14px;
    color: #9CA3AF;
    font-size: 0.78rem;
    text-align: center;
}

@media (max-width: 767px) {
    /* Phones: the picker becomes a bottom sheet (same interaction as the
       mobile ticket action menu). positionMacroPicker() skips inline coords
       at this width so these rules win. */
    .macro-picker-popover {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0;
        width: 100%;
        max-height: 65vh;
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* ── SLA chips (parity plan Phase 2) ────────────────────────────── */
.ticket-sla-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.ticket-sla-chip--ok {
    color: #6EE7B7;
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.35);
}

.ticket-sla-chip--warning {
    color: #FCD34D;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.45);
}

.ticket-sla-chip--breached {
    color: #FCA5A5;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.5);
    animation: sla-breach-pulse 2.4s ease-in-out infinite;
}

.ticket-sla-chip--paused {
    color: #7DD3FC;
    background: rgba(14, 165, 233, 0.10);
    border-color: rgba(14, 165, 233, 0.35);
}

@keyframes sla-breach-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.25); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ticket-sla-chip--breached { animation: none; }
}

/* Inline images from customer emails (cid: references resolved to signed
   URLs in resolveInlineEmailImages) — never overflow the thread column. */
.email-message-html img[data-email-inline-image] {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 4px 0;
}

/* ── Filters dropdown panel: self-contained styling for BOTH themes ──────
   The panel inherits global filter-bar select rules (width caps from the
   1024-1540px media query, light-mode control skins) that were designed for
   the inline toolbar, not a grid panel — every rule here re-asserts the
   panel's own layout with enough specificity to win. */
#filters-panel {
    background: rgba(17, 24, 39, 0.97);
    width: min(92vw, 560px) !important;
}

/* #filters-panel-wrap doubles the id specificity so the dashboard-v2
   command-bar select skins can never win here. `flex: 0 0 auto` is load-
   bearing: the toolbar skin sets `flex: 0 1 126px`, and inside the panel's
   COLUMN-flex labels that flex-basis becomes a 126px HEIGHT. `display:
   block` defeats the narrow-viewport rule that display:nones toolbar
   selects (the panel needs its selects at every width). */
#filters-panel-wrap #filters-panel select {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 38px;
    max-height: 44px;
    padding: 8px 30px 8px 10px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    border-radius: 8px !important;
}
#filters-panel label {
    min-width: 0;
    font-size: 10px;
    letter-spacing: 0.08em;
}

html[data-theme="light"] #filters-panel {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.28) !important;
}
html[data-theme="light"] #filters-panel label { color: #64748b; }
html[data-theme="light"] #filters-panel-wrap #filters-panel select {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    box-shadow: none !important;
}
html[data-theme="light"] #filters-panel .border-t,
html[data-theme="light"] #filters-panel .border-b {
    border-color: rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] #filters-panel button[onclick*="clearAllTicketFilters"] {
    color: #64748b;
}
/* Compact trigger: metrics pinned so toolbar-wide select/button skins
   (both themes) can never inflate it. */
#tickets-filter-bar #filters-panel-btn {
    height: 32px !important;
    min-height: 0 !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 8px !important;
    white-space: nowrap;
}
#filters-active-count {
    line-height: 1.1;
    min-width: 18px;
    text-align: center;
}
html[data-theme="light"] #filters-panel-btn {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] #filters-panel-btn svg { color: #64748b; }
html[data-theme="light"] #filters-active-count {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
}

/* Note replies render threaded directly under their parent note
   (renderNotesNewestFirst) — style them as compact children: tighter
   padding, smaller type, softer surface, and pulled up against the parent. */
.note-container.note-reply-child {
    padding: 8px 10px;
    margin-top: -4px;
    background: rgba(55, 65, 81, 0.18);
}
.note-container.note-reply-child .note-username {
    font-size: 12px;
}
.note-container.note-reply-child .note-text-display {
    font-size: 12.5px;
    line-height: 1.45;
}
.note-container.note-reply-child .note-text-display p {
    font-size: 12.5px;
}
html[data-theme="light"] .note-container.note-reply-child {
    background: #f8fafc;
}

/* Inline note editing: the editor markup carries dark-theme inline colors
   (pale text on translucent white) — in light mode that text is invisible
   on the white card, so re-assert readable colors here. */
html[data-theme="light"] .note-inline-editor {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
}

/* ── Expanded ticket in the list: roomier reading ─────────────────────────
   When a card is open its detail workspace gets more generous type and
   padding; collapsed cards are untouched. */
.ticket-card:has(.ticket-body:not(.hidden)) {
    padding: 18px 20px;
}
.ticket-card:has(.ticket-body:not(.hidden)) .tc-ticket-subject {
    font-size: 15px;
}
.ticket-card:has(.ticket-body:not(.hidden)) .email-message-html {
    font-size: 13.5px;
    line-height: 1.55;
}


/* ── Broadcast banner sender levels (saas_205) ────────────────────────────
   ui.js swaps these on #broadcast-message-container per sender_role so a
   platform announcement (super admin — may carry critical info) is
   unmistakable next to an org or team one. -team mirrors the banner's
   historical indigo/purple look. */
.broadcast-banner-platform {
    background-image: linear-gradient(to right, rgba(190, 18, 60, 0.96), rgba(220, 38, 38, 0.96), rgba(217, 119, 6, 0.96));
    border: 1px solid rgba(252, 211, 77, 0.55);
    box-shadow: 0 25px 50px -12px rgba(239, 68, 68, 0.4);
}
.broadcast-banner-org {
    background-image: linear-gradient(to right, rgba(162, 28, 175, 0.95), rgba(147, 51, 234, 0.95), rgba(162, 28, 175, 0.95));
    border: 1px solid rgba(232, 121, 249, 0.4);
    box-shadow: 0 25px 50px -12px rgba(192, 38, 211, 0.3);
}
.broadcast-banner-team {
    background-image: linear-gradient(to right, rgba(79, 70, 229, 0.95), rgba(147, 51, 234, 0.95), rgba(79, 70, 229, 0.95));
    border: 1px solid rgba(129, 140, 248, 0.3);
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.2);
}

/* Reaction chips inside the banner (like / heart / celebrate / clap). */
.broadcast-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12px;
    line-height: 1.4;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.broadcast-reaction-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.06);
}
.broadcast-reaction-btn span {
    font-weight: 700;
    font-size: 11px;
}
.broadcast-reaction-mine {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Team Stats + Weekly Leaderboard: large teams (25+ members) — show roughly
   the top 10 rows and scroll for the rest. Row order puts the busiest/highest
   scorers on top (see renderStats/renderLeaderboard). */
#stats-container,
#leaderboard-container {
    max-height: 540px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 4px;
}