/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 - light-mode production preview branch.
   Loaded by real pages on codex-light-mode-production-preview.

   This file is the second iteration of light-mode visual styling,
   addressing the feedback on contrast, color overload, tab clarity,
   button consistency, and spacing.

   Activation: only applies when html[data-theme="light"] is set.
   When unset, dark mode wins and this file should not change layout.


   Light mode changes colors, surfaces, borders, shadows, and text contrast.
   It must not resize or restructure dark-mode UI.
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   1. SURFACE CONTRAST — clear separation between page, cards, headers
   Background hierarchy (light → dark):
     #FFFFFF (cards, modals)
     #F8FAFC (page background, subtle hover)
     #EEF2F6 (tab bar, footer)
     #E5E9EF (filter bar contrast strip)
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] body {
    background: #F8FAFC !important;
    color: #0F172A !important;
}

/* — Header — */
html[data-theme="light"] #app-container > header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #D1D9E2 !important;
    backdrop-filter: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] #app-container > header svg { color: #4338CA; }
html[data-theme="light"] #team-name-header {
    -webkit-text-fill-color: #0F172A !important;
    background: none !important;
    color: #0F172A !important;
}

/* — Sidebars: white surface with strong border — */
html[data-theme="light"] #sidebar,
html[data-theme="light"] #on-leave-sidebar {
    background: #FFFFFF !important;
    border-color: #D1D9E2 !important;
    backdrop-filter: none !important;
    color: #0F172A !important;
}

/* Inner sidebar cards: clear contrast against white sidebar bg */
html[data-theme="light"] #sidebar > div,
html[data-theme="light"] #on-leave-sidebar > div {
    background: #F8FAFC !important;
    border-color: #D1D9E2 !important;
}

/* Sidebar text uses a stronger secondary color for readability */
html[data-theme="light"] #sidebar .text-white,
html[data-theme="light"] #on-leave-sidebar .text-white { color: #0F172A !important; }
html[data-theme="light"] #sidebar .text-gray-300,
html[data-theme="light"] #on-leave-sidebar .text-gray-300 { color: #334155 !important; }
html[data-theme="light"] #sidebar .text-gray-400,
html[data-theme="light"] #sidebar .text-gray-500,
html[data-theme="light"] #on-leave-sidebar .text-gray-400,
html[data-theme="light"] #on-leave-sidebar .text-gray-500 { color: #475569 !important; }

/* — Main content area — */
html[data-theme="light"] #app-container main { background: #F8FAFC !important; }


/* ════════════════════════════════════════════════════════════════
   2. TAB BAR — clear active-tab indicator (#3 in feedback)
   Active state uses an underline + bold + slight elevation, not
   relying purely on color saturation.
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] #desktop-tab-bar {
    background: #EEF2F6 !important;
    border-bottom: 1px solid #D1D9E2 !important;
    backdrop-filter: none !important;
}

/* All tabs: muted by default, more contrast on hover */
html[data-theme="light"] #desktop-tab-bar button {
    color: #475569 !important;
    transition: color 0.15s, background 0.15s !important;
}
html[data-theme="light"] #desktop-tab-bar button:hover {
    color: #0F172A !important;
    background: rgba(15, 23, 42, 0.04) !important;
}

/* Active tab: white surface + brand-color underline + bold text + small lift */
html[data-theme="light"] #desktop-tab-bar button.active-tab {
    color: #4338CA !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}


/* ════════════════════════════════════════════════════════════════
   3. FILTER BAR — clearer separation, denser, more contrast
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] #tickets-filter-bar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #D1D9E2 !important;
    backdrop-filter: none !important;
}
html[data-theme="light"] #tickets-filter-bar input,
html[data-theme="light"] #tickets-filter-bar select {
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}
html[data-theme="light"] #tickets-filter-bar input::placeholder { color: #64748B !important; }
html[data-theme="light"] #tickets-filter-bar input:focus,
html[data-theme="light"] #tickets-filter-bar select:focus {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
    outline: none !important;
}


/* ════════════════════════════════════════════════════════════════
   4. TICKET CARDS — strong contrast, clear hierarchy (#1, #4)
   Cards: white surface, visible border, subtle shadow.
   Title: dominant (15px, weight 600, dark #0F172A).
   Metadata: secondary (12px, #475569 — NOT light gray).
   Hover: slight bg shift (no transform / no scale).
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] #ticket-list > div,
html[data-theme="light"] .ticket-card {
    background: #FFFFFF !important;
    border: 1px solid #D1D9E2 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    color: #0F172A !important;
    backdrop-filter: none !important;
    transition: box-shadow 0.15s, border-color 0.15s !important;
}
html[data-theme="light"] #ticket-list > div:hover,
html[data-theme="light"] .ticket-card:hover {
    border-color: #94A3B8 !important;
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08) !important;
}

/* Strong contrast for ticket text */
html[data-theme="light"] .ticket-card .text-white,
html[data-theme="light"] #ticket-list .text-white { color: #0F172A !important; }
html[data-theme="light"] .ticket-card .text-gray-200,
html[data-theme="light"] #ticket-list .text-gray-200 { color: #1E293B !important; }
html[data-theme="light"] .ticket-card .text-gray-300,
html[data-theme="light"] #ticket-list .text-gray-300 { color: #334155 !important; }
/* Metadata (timestamps, secondary info): #475569 — NOT a faint light gray */
html[data-theme="light"] .ticket-card .text-gray-400,
html[data-theme="light"] #ticket-list .text-gray-400 { color: #475569 !important; }
html[data-theme="light"] .ticket-card .text-gray-500,
html[data-theme="light"] #ticket-list .text-gray-500 { color: #64748B !important; }


/* ════════════════════════════════════════════════════════════════
   5. COLOR PALETTE DISCIPLINE — desaturate decorative noise (#2)
   Strict palette in light mode:
     - Primary action: indigo  #4F46E5
     - Success / open: emerald #059669
     - Warning:        amber   #D97706
     - Danger:         rose    #E11D48
   Decorative gamification badges (Speed Demon, Sniper, Client
   Hero, Lightning, Turtle) get desaturated pastel surfaces so they
   stay visible but stop screaming.
   ════════════════════════════════════════════════════════════════ */

/* Top achievement badges row — desaturated pastel set
   Targets the row that contains "Speed Demon / Sniper / Client Hero / Lightning / Turtle". */
html[data-theme="light"] #achievement-badges-container > div,
html[data-theme="light"] #top-badges-row > div,
html[data-theme="light"] [data-badge-tile] {
    background: #F8FAFC !important;
    border: 1px solid #D1D9E2 !important;
    box-shadow: none !important;
}

/* Status badges (URGENT / HIGH / MEDIUM / In Progress / Re-opened / Done)
   already use Tailwind color classes — make them readable on the white
   ticket cards. Each maps to its semantic color in the four-color system. */
html[data-theme="light"] .bg-red-500\/20,
html[data-theme="light"] .bg-red-600\/20,
html[data-theme="light"] .bg-rose-500\/20 {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
}
html[data-theme="light"] .bg-orange-500\/20,
html[data-theme="light"] .bg-amber-500\/20,
html[data-theme="light"] .bg-yellow-500\/20 {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
}
html[data-theme="light"] .bg-green-500\/20,
html[data-theme="light"] .bg-emerald-500\/20 {
    background-color: #D1FAE5 !important;
    color: #065F46 !important;
}
html[data-theme="light"] .bg-blue-500\/20,
html[data-theme="light"] .bg-indigo-500\/20 {
    background-color: #DBEAFE !important;
    color: #1E40AF !important;
}
html[data-theme="light"] .bg-purple-500\/20,
html[data-theme="light"] .bg-violet-500\/20 {
    background-color: #EDE9FE !important;
    color: #5B21B6 !important;
}
html[data-theme="light"] .bg-cyan-500\/20,
html[data-theme="light"] .bg-sky-500\/20 {
    background-color: #CFFAFE !important;
    color: #155E75 !important;
}
html[data-theme="light"] .bg-pink-500\/20,
html[data-theme="light"] .bg-fuchsia-500\/20 {
    background-color: #FCE7F3 !important;
    color: #9D174D !important;
}

/* — Tags inside ticket cards (MM, Prem, SAAS, AS, deployment) —
   Light, neutral pill instead of saturated colored fills. */
html[data-theme="light"] .ticket-tag,
html[data-theme="light"] [data-tag] {
    background: #EEF2F6 !important;
    color: #334155 !important;
    border: 1px solid #D1D9E2 !important;
}


/* ════════════════════════════════════════════════════════════════
   6. STANDARDIZE BUTTONS (#7) — single radius, single weight,
   consistent padding, predictable hover.
   Variants:
     .bg-indigo-*  → primary action  (Create, Save)
     .bg-red-*     → destructive     (Delete, End Shift)
     .bg-green-*   → success         (Save Defaults, confirm)
     .bg-gray-600  → secondary       (Cancel)
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] button:not(#ds-theme-toggle),
html[data-theme="light"] .modern-btn-primary,
html[data-theme="light"] .modern-btn-purple {
    border-radius: 8px !important;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s !important;
    letter-spacing: 0 !important;
}

/* Primary indigo */
html[data-theme="light"] .bg-indigo-600,
html[data-theme="light"] button.bg-indigo-600 {
    background: #4F46E5 !important;
    color: #FFFFFF !important;
    border: 1px solid #4338CA !important;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25) !important;
}
html[data-theme="light"] .hover\:bg-indigo-700:hover,
html[data-theme="light"] button.bg-indigo-600:hover {
    background: #4338CA !important;
}

/* Danger rose */
html[data-theme="light"] .bg-red-600 {
    background: #E11D48 !important;
    color: #FFFFFF !important;
    border: 1px solid #BE123C !important;
    box-shadow: 0 1px 2px rgba(225, 29, 72, 0.25) !important;
}
html[data-theme="light"] .hover\:bg-red-700:hover { background: #BE123C !important; }

/* Success emerald */
html[data-theme="light"] .bg-green-600 {
    background: #059669 !important;
    color: #FFFFFF !important;
    border: 1px solid #047857 !important;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25) !important;
}
html[data-theme="light"] .hover\:bg-green-700:hover { background: #047857 !important; }

/* Secondary gray */
html[data-theme="light"] .bg-gray-600 {
    background: #FFFFFF !important;
    color: #334155 !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] .hover\:bg-gray-700:hover {
    background: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}

/* Tame the rainbow gradient buttons (Clients / Guides / Training in header,
   Notifications / End Shift in right sidebar) — replace gradient with solid
   indigo/rose so the four-color palette is preserved.
   This affects only buttons with both .bg-gradient-to-r AND a colored class. */
html[data-theme="light"] header a.bg-gradient-to-r,
html[data-theme="light"] header button.bg-gradient-to-r {
    background: #4F46E5 !important;
    color: #FFFFFF !important;
    border: 1px solid #4338CA !important;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25) !important;
}
html[data-theme="light"] header a.bg-gradient-to-r:hover,
html[data-theme="light"] header button.bg-gradient-to-r:hover {
    background: #4338CA !important;
}

/* Right-sidebar quick-action gradients → calmer solids based on intent.
   Notifications (purple→pink) → indigo solid. End Shift (orange) → amber outline. */
html[data-theme="light"] #on-leave-sidebar button.bg-gradient-to-r {
    background: #4F46E5 !important;
    color: #FFFFFF !important;
    border: 1px solid #4338CA !important;
    box-shadow: none !important;
}
html[data-theme="light"] #on-leave-sidebar button.bg-gradient-to-r:hover {
    background: #4338CA !important;
}
/* End Shift specifically (orange→orange-500): rose for danger semantics */
html[data-theme="light"] #on-leave-sidebar button.from-orange-600,
html[data-theme="light"] #on-leave-sidebar button.from-orange-500 {
    background: #E11D48 !important;
    color: #FFFFFF !important;
    border: 1px solid #BE123C !important;
}
html[data-theme="light"] #on-leave-sidebar button.from-orange-600:hover,
html[data-theme="light"] #on-leave-sidebar button.from-orange-500:hover {
    background: #BE123C !important;
}


/* Spacing stays owned by the production layout. Light mode should not resize
   filter rows, side cards, ticket rows, or footer controls. */


/* ════════════════════════════════════════════════════════════════
   8. RIGHT PANEL DESATURATION (#6 partial — visual only here)
   Make it feel secondary instead of competing with main content.
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] #on-leave-sidebar {
    background: #F8FAFC !important;  /* slightly cooler than the white left sidebar */
}
html[data-theme="light"] #on-leave-sidebar > div {
    background: #FFFFFF !important;  /* inner cards remain white */
    border-color: #D1D9E2 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}


/* ════════════════════════════════════════════════════════════════
   9. FOOTER (ticket creation row)
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] #tickets-footer {
    background: #FFFFFF !important;
    border-top: 1px solid #D1D9E2 !important;
    backdrop-filter: none !important;
    box-shadow: 0 -1px 2px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] #tickets-footer input,
html[data-theme="light"] #tickets-footer select,
html[data-theme="light"] #tickets-footer textarea {
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}
html[data-theme="light"] #tickets-footer .text-white { color: #0F172A !important; }
html[data-theme="light"] #tickets-footer .text-gray-400 { color: #475569 !important; }
html[data-theme="light"] #tickets-footer .text-gray-500 { color: #64748B !important; }


/* ════════════════════════════════════════════════════════════════
   10. MODALS — strong card surface, clear borders, readable
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] .modal { background: rgba(15, 23, 42, 0.5) !important; }
html[data-theme="light"] .modal > div,
html[data-theme="light"] .glassmorphism {
    background: #FFFFFF !important;
    border: 1px solid #D1D9E2 !important;
    backdrop-filter: none !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18) !important;
    color: #0F172A !important;
}
html[data-theme="light"] .modal .text-white,
html[data-theme="light"] .glassmorphism .text-white { color: #0F172A !important; }
html[data-theme="light"] .modal .text-gray-200,
html[data-theme="light"] .modal .text-gray-300,
html[data-theme="light"] .glassmorphism .text-gray-200,
html[data-theme="light"] .glassmorphism .text-gray-300 { color: #1E293B !important; }
html[data-theme="light"] .modal .text-gray-400,
html[data-theme="light"] .glassmorphism .text-gray-400 { color: #475569 !important; }
html[data-theme="light"] .modal .text-gray-500,
html[data-theme="light"] .glassmorphism .text-gray-500 { color: #64748B !important; }
html[data-theme="light"] .modal input,
html[data-theme="light"] .modal textarea,
html[data-theme="light"] .modal select {
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}


/* ════════════════════════════════════════════════════════════════
   11. SUPPORTING SURFACES — loading overlay, notifications
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] #loading-overlay {
    background: rgba(248, 250, 252, 0.96) !important;
    backdrop-filter: none !important;
}
html[data-theme="light"] #loading-overlay p { color: #0F172A !important; }
html[data-theme="light"] #loading-overlay .border-indigo-500 { border-color: #4F46E5 !important; }

html[data-theme="light"] #notification-panel > div {
    background: #FFFFFF !important;
    border: 1px solid #D1D9E2 !important;
    color: #0F172A !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}


/* ════════════════════════════════════════════════════════════════
   12. THEME TOGGLE BUTTON — visible in both modes
   ════════════════════════════════════════════════════════════════ */

#ds-theme-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;

    /* Default (dark mode): sits inside the dark header */
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #C7D2FE;
}
#ds-theme-toggle:hover {
    background: rgba(99, 102, 241, 0.3);
    color: #FFFFFF;
}

/* Theme changes should be instant. The app has many broad transition-all rules,
   so temporarily suppress transitions only while the theme attribute flips. */
html.ds-theme-switching *,
html.ds-theme-switching *::before,
html.ds-theme-switching *::after {
    transition: none !important;
    transition-delay: 0s !important;
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
}

html[data-theme="light"] #ds-theme-toggle {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #334155;
}
html[data-theme="light"] #ds-theme-toggle:hover {
    background: #F1F5F9;
    color: #0F172A;
    border-color: #94A3B8;
}

/* =============================================================================
   13. LIGHT MODE STABILIZATION PASS
   Scoped to html[data-theme="light"] so the production preview branch can load
   this file on real pages without changing dark mode.
   ============================================================================= */

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="light"] #app-container {
    background: #F3F6FA !important;
}

html[data-theme="light"] #app-container > header .bg-gradient-to-r.from-indigo-600\/20,
html[data-theme="light"] #app-container > header .bg-gradient-to-r.from-indigo-600\/20.to-purple-600\/20 {
    background: #EEF2FF !important;
    border-color: #C7D2FE !important;
}

html[data-theme="light"] #app-container > header button:not(#ds-theme-toggle):not(.bg-gradient-to-r),
html[data-theme="light"] #app-container > header a#open-admin-panel-btn {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #4338CA !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] #app-container > header button:not(#ds-theme-toggle):hover,
html[data-theme="light"] #app-container > header a#open-admin-panel-btn:hover {
    background: #F1F5F9 !important;
    border-color: #A5B4FC !important;
}

html[data-theme="light"] #desktop-tab-bar > .relative {
    background: #E5EAF1 !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] #desktop-tab-bar .tab-btn {
    color: #475569 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme="light"] #desktop-tab-bar .tab-btn.text-white {
    color: #0F172A !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #follow-up-dot,
html[data-theme="light"] #mobile-followup-dot {
    border-color: #FFFFFF !important;
}

/* Filter bar: reduce the washed-out strip and make counters readable. */
html[data-theme="light"] #tickets-filter-bar svg {
    color: #64748B !important;
}

html[data-theme="light"] #ticket-count-display {
    background: #EEF2FF !important;
    border: 1px solid #C7D2FE !important;
    color: #334155 !important;
    box-shadow: none !important;
}

html[data-theme="light"] #ticket-count-display .text-white,
html[data-theme="light"] #ticket-count {
    color: #4F46E5 !important;
}

html[data-theme="light"] .badges-header-container {
    background: #E5EAF1 !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .badge-card {
    background: #FFFFFF !important;
    border: 1px solid #D1D9E2 !important;
    color: #0F172A !important;
    box-shadow: none !important;
}

html[data-theme="light"] .badge-card.badge-negative {
    background: #FFF1F2 !important;
    border-color: #FDA4AF !important;
}

html[data-theme="light"] .badge-name {
    color: #334155 !important;
}

html[data-theme="light"] .badge-holders,
html[data-theme="light"] .no-holders {
    color: #64748B !important;
}

html[data-theme="light"] .badge-count {
    color: #64748B !important;
}

html[data-theme="light"] .badge-count.has-holders {
    color: #2563EB !important;
}

/* Ticket list: cover all ticket containers, including done and follow-up. */
html[data-theme="light"] #ticket-list > div,
html[data-theme="light"] #done-ticket-list > div,
html[data-theme="light"] #follow-up-ticket-list > div,
html[data-theme="light"] .ticket-card {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .ticket-card.opacity-60 {
    opacity: 0.82 !important;
}

html[data-theme="light"] #ticket-list > div:hover,
html[data-theme="light"] #done-ticket-list > div:hover,
html[data-theme="light"] #follow-up-ticket-list > div:hover,
html[data-theme="light"] .ticket-card:hover {
    border-color: #94A3B8 !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .ticket-card .border-t,
html[data-theme="light"] .ticket-card .border-gray-700\/30 {
    border-color: #D1D9E2 !important;
}

html[data-theme="light"] .ticket-header .font-bold.text-indigo-400 {
    color: #4F46E5 !important;
}

html[data-theme="light"] .ticket-header p.text-white.text-sm {
    color: #0F172A !important;
}

html[data-theme="light"] .ticket-card .bg-gray-800\/30 {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
}

html[data-theme="light"] .ticket-card .bg-gray-700\/40,
html[data-theme="light"] .ticket-card .bg-gray-600\/50 {
    background: #EEF2F6 !important;
    color: #334155 !important;
    border-color: #CBD5E1 !important;
}

html[data-theme="light"] .ticket-card .text-gray-600 {
    color: #94A3B8 !important;
}

html[data-theme="light"] .ticket-card button,
html[data-theme="light"] .ticket-card label[for^="add-attachment-"],
html[data-theme="light"] .kb-button {
    color: #64748B !important;
}

html[data-theme="light"] .ticket-card button:hover,
html[data-theme="light"] .ticket-card label[for^="add-attachment-"]:hover,
html[data-theme="light"] .kb-button:hover {
    background: #EEF2FF !important;
    color: #4338CA !important;
}

html[data-theme="light"] .ticket-card button[title="Delete Ticket"]:hover {
    background: #FFE4E6 !important;
    color: #BE123C !important;
}

html[data-theme="light"] .priority-badge {
    border: 1px solid transparent !important;
}

html[data-theme="light"] .priority-badge.bg-red-600\/90 {
    background: #FFE4E6 !important;
    color: #BE123C !important;
    border-color: #FDA4AF !important;
}

html[data-theme="light"] .priority-badge.bg-orange-600\/90 {
    background: #FFEDD5 !important;
    color: #9A3412 !important;
    border-color: #FDBA74 !important;
}

html[data-theme="light"] .priority-badge.bg-yellow-600\/85 {
    background: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #FCD34D !important;
}

html[data-theme="light"] .priority-badge.bg-green-600\/90 {
    background: #D1FAE5 !important;
    color: #065F46 !important;
    border-color: #6EE7B7 !important;
}

/* Left sidebar: generated stats and leaderboard rows need their own light treatment. */
html[data-theme="light"] #stats-container > div,
html[data-theme="light"] #leaderboard-container > div {
    background: #FFFFFF !important;
    border: 1px solid #D1D9E2 !important;
    box-shadow: none !important;
}

html[data-theme="light"] #stats-container .text-white,
html[data-theme="light"] #leaderboard-container .text-gray-200 {
    color: #0F172A !important;
}

html[data-theme="light"] #stats-container .bg-gray-500\/60 {
    background: #94A3B8 !important;
    border-color: #64748B !important;
}

html[data-theme="light"] #leaderboard-container .bg-black\/30 {
    background: #EEF2F6 !important;
    color: #334155 !important;
    border-color: #CBD5E1 !important;
}

html[data-theme="light"] #open-history-btn {
    background: #F8FAFC !important;
    border: 1px solid #D1D9E2 !important;
}

html[data-theme="light"] #open-history-btn span:last-child {
    color: #7C3AED !important;
}

/* Right panel: secondary content should not compete with the ticket stream. */
html[data-theme="light"] #on-leave-sidebar h3 {
    color: #64748B !important;
}

html[data-theme="light"] #on-leave-sidebar h3.text-purple-300,
html[data-theme="light"] #on-leave-sidebar h3.text-teal-300 {
    color: #475569 !important;
}

html[data-theme="light"] #on-leave-notes > div,
html[data-theme="light"] #schedule-adjustments > div,
html[data-theme="light"] #deployment-notes-list > div {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: #334155 !important;
}

html[data-theme="light"] #deployment-form {
    background: #F8FAFC !important;
    border-color: #D1D9E2 !important;
}

html[data-theme="light"] #tickets-footer .source-btn {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    box-shadow: none !important;
}

html[data-theme="light"] #tickets-footer .source-btn:hover {
    background: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}

html[data-theme="light"] #tickets-footer .source-btn[data-selected="true"] {
    background: #EEF2FF !important;
    border-color: #818CF8 !important;
    color: #3730A3 !important;
}

html[data-theme="light"] #tickets-footer .h-8.w-px {
    background: #CBD5E1 !important;
}

html[data-theme="light"] #tickets-footer button[onclick="tickets.createTicket()"],
html[data-theme="light"] #export-btn {
    background: #4F46E5 !important;
    border: 1px solid #4338CA !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25) !important;
}

html[data-theme="light"] #export-btn {
    background: #059669 !important;
    border-color: #047857 !important;
}

/* =============================================================================
   14. COHESIVE LIGHT PALETTE PASS
   The first stabilization pass fixed contrast. This pass reduces color noise:
   neutral surfaces, one primary action color, semantic-only status colors,
   and subdued identity/gamification colors.
   ============================================================================= */

html[data-theme="light"] {
    --ds-page: #F5F7FA;
    --ds-panel: #FFFFFF;
    --ds-panel-soft: #F8FAFC;
    --ds-panel-muted: #EEF2F7;
    --ds-border: #D8E0EA;
    --ds-border-strong: #C3CEDB;
    --ds-text: #111827;
    --ds-text-muted: #475569;
    --ds-text-soft: #64748B;
    --ds-primary: #4F46E5;
    --ds-primary-strong: #4338CA;
    --ds-selected: #0891B2;
    --ds-success: #047857;
    --ds-warning: #B45309;
    --ds-danger: #BE123C;
}

html[data-theme="light"] body,
html[data-theme="light"] #app-container,
html[data-theme="light"] #app-container main {
    background: var(--ds-page) !important;
    color: var(--ds-text) !important;
}

/* Stop utility gradients from creating accidental themes in content panels. */
html[data-theme="light"] #sidebar > div,
html[data-theme="light"] #on-leave-sidebar > div,
html[data-theme="light"] #desktop-tab-bar,
html[data-theme="light"] #tickets-filter-bar,
html[data-theme="light"] #tickets-footer,
html[data-theme="light"] .badges-header-container {
    background-image: none !important;
}

/* Header and global navigation. */
html[data-theme="light"] #app-container > header {
    background: var(--ds-panel) !important;
    border-bottom-color: var(--ds-border) !important;
}

html[data-theme="light"] #team-name-header {
    color: var(--ds-text) !important;
}

html[data-theme="light"] header a.bg-gradient-to-r,
html[data-theme="light"] header button.bg-gradient-to-r {
    background: var(--ds-primary) !important;
    border-color: var(--ds-primary-strong) !important;
    box-shadow: none !important;
}

/* Side panels: same family as the page, with white section cards. */
html[data-theme="light"] #sidebar,
html[data-theme="light"] #on-leave-sidebar {
    background: #F1F5F9 !important;
    border-color: var(--ds-border) !important;
}

html[data-theme="light"] #sidebar > div,
html[data-theme="light"] #on-leave-sidebar > div {
    background: var(--ds-panel) !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] #sidebar > div:first-of-type {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
}

html[data-theme="light"] #sidebar .text-indigo-300,
html[data-theme="light"] #sidebar .text-purple-300,
html[data-theme="light"] #sidebar .text-teal-300,
html[data-theme="light"] #on-leave-sidebar .text-indigo-300,
html[data-theme="light"] #on-leave-sidebar .text-purple-300,
html[data-theme="light"] #on-leave-sidebar .text-teal-300 {
    color: var(--ds-text-muted) !important;
}

/* Ticket rows stay neutral in light mode; sidebar identity rows keep
   the original assigned user colors for quick recognition. */
html[data-theme="light"] .ticket-header span[style*="color"] {
    color: var(--ds-text) !important;
}

html[data-theme="light"] .ticket-header span[style*="color"]:first-of-type {
    color: #2563EB !important;
}

html[data-theme="light"] #current-user {
    color: #2563EB !important;
}

/* Tabs: one selected treatment, no per-tab color meaning. */
html[data-theme="light"] #desktop-tab-bar {
    background: var(--ds-panel-soft) !important;
}

html[data-theme="light"] #desktop-tab-bar > .relative {
    background: var(--ds-panel-muted) !important;
    border-color: var(--ds-border) !important;
}

html[data-theme="light"] #desktop-tab-bar .tab-btn.text-white {
    color: var(--ds-text) !important;
    border-color: var(--ds-border-strong) !important;
}

/* Filter and count strip. */
html[data-theme="light"] #tickets-filter-bar {
    background: var(--ds-panel) !important;
    border-bottom-color: var(--ds-border) !important;
}

html[data-theme="light"] #tickets-filter-bar input,
html[data-theme="light"] #tickets-filter-bar select,
html[data-theme="light"] #tickets-footer input,
html[data-theme="light"] #tickets-footer select,
html[data-theme="light"] #tickets-footer textarea {
    background: var(--ds-panel-soft) !important;
    border-color: var(--ds-border-strong) !important;
    color: var(--ds-text) !important;
}

html[data-theme="light"] #ticket-count-display {
    background: #F1F5F9 !important;
    border-color: var(--ds-border) !important;
}

html[data-theme="light"] #ticket-count-display span {
    color: var(--ds-text-muted) !important;
}

html[data-theme="light"] #ticket-count {
    color: var(--ds-primary) !important;
}

/* Achievement strip: make gamification secondary. */
html[data-theme="light"] .badges-header-container {
    background: var(--ds-panel-muted) !important;
    border-color: var(--ds-border) !important;
}

html[data-theme="light"] .badge-card {
    background: var(--ds-panel) !important;
    border-color: var(--ds-border) !important;
}

html[data-theme="light"] .badge-card.badge-positive,
html[data-theme="light"] .badge-card.badge-negative {
    background: var(--ds-panel) !important;
}

html[data-theme="light"] .badge-emoji {
    filter: saturate(0.78);
    opacity: 0.85;
}

html[data-theme="light"] .badge-holder {
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
}

/* Ticket cards: use one clean card system, then reserve color for badges. */
html[data-theme="light"] .ticket-card,
html[data-theme="light"] #ticket-list > div,
html[data-theme="light"] #done-ticket-list > div,
html[data-theme="light"] #follow-up-ticket-list > div {
    background: var(--ds-panel) !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .ticket-card.border-indigo-500 {
    border-left-color: var(--ds-primary) !important;
}

html[data-theme="light"] .ticket-card.border-purple-500 {
    border-left-color: var(--ds-selected) !important;
}

html[data-theme="light"] .ticket-card .ticket-header {
    color: var(--ds-text) !important;
}

html[data-theme="light"] .ticket-card .text-gray-300,
html[data-theme="light"] .ticket-card .text-gray-400,
html[data-theme="light"] .ticket-card .text-gray-500 {
    color: var(--ds-text-muted) !important;
}

html[data-theme="light"] .ticket-card .flex.items-center.gap-2.text-xs.text-gray-400 {
    color: var(--ds-text-soft) !important;
}

html[data-theme="light"] .ticket-card .bg-blue-500\/15,
html[data-theme="light"] .ticket-card .bg-purple-500\/15 {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #BFDBFE !important;
}

html[data-theme="light"] .ticket-card .bg-amber-500\/15 {
    background: #FEF3C7 !important;
    color: var(--ds-warning) !important;
    border-color: #FCD34D !important;
}

html[data-theme="light"] .ticket-card .bg-green-500\/15 {
    background: #D1FAE5 !important;
    color: var(--ds-success) !important;
    border-color: #6EE7B7 !important;
}

html[data-theme="light"] .ticket-card .bg-cyan-500\/15 {
    background: #CFFAFE !important;
    color: #0E7490 !important;
    border-color: #67E8F9 !important;
}

html[data-theme="light"] .ticket-card .priority-badge,
html[data-theme="light"] .ticket-card [class*="bg-"][class*="border-"].text-\[10px\] {
    box-shadow: none !important;
}

/* Form buttons and right-side actions: primary, secondary, danger. */
html[data-theme="light"] #notif-bell-btn,
html[data-theme="light"] #schedule-btn,
html[data-theme="light"] #tickets-footer button[onclick="tickets.createTicket()"] {
    background: var(--ds-primary) !important;
    border-color: var(--ds-primary-strong) !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] #shift-btn {
    background: var(--ds-danger) !important;
    border-color: #9F1239 !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] #add-deployment-btn,
html[data-theme="light"] #on-leave-sidebar button.bg-indigo-600\/80 {
    background: var(--ds-primary) !important;
    border: 1px solid var(--ds-primary-strong) !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] #on-leave-sidebar button.bg-teal-600\/80 {
    background: #0F766E !important;
    border: 1px solid #0F766E !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] #tickets-footer .source-btn {
    background: var(--ds-panel) !important;
    border-color: var(--ds-border-strong) !important;
    color: var(--ds-text-muted) !important;
}

html[data-theme="light"] #tickets-footer .source-btn[data-selected="true"] {
    background: #EEF2FF !important;
    border-color: #A5B4FC !important;
    color: var(--ds-primary-strong) !important;
}

/* Empty states and subtle right-panel cards. */
html[data-theme="light"] #on-leave-notes > div,
html[data-theme="light"] #schedule-adjustments > div,
html[data-theme="light"] #deployment-notes-list > div {
    background: var(--ds-panel-soft) !important;
    border-color: var(--ds-border) !important;
}

html[data-theme="light"] #on-leave-sidebar .bg-red-500\/10,
html[data-theme="light"] #on-leave-sidebar .bg-red-500\/20 {
    background: #FFF1F2 !important;
    color: var(--ds-danger) !important;
    border-color: #FECDD3 !important;
}

/* =============================================================================
   15. REVIEW POLISH PASS
   Remaining screenshot issues: cards too tall, side panels too heavy, and
   action colors still not clearly separated by intent.
   ============================================================================= */

html[data-theme="light"] {
    --ds-page: #F6F8FB;
    --ds-side: #F3F6FA;
    --ds-panel-muted: #EDF2F7;
}

/* Make the side columns lighter so the ticket stream stays primary. */
html[data-theme="light"] #sidebar,
html[data-theme="light"] #on-leave-sidebar {
    background: var(--ds-side) !important;
}

html[data-theme="light"] #sidebar > div,
html[data-theme="light"] #on-leave-sidebar > div {
    border-radius: 8px !important;
    border-color: #D9E2EC !important;
    box-shadow: none !important;
}

html[data-theme="light"] #stats-container > div,
html[data-theme="light"] #leaderboard-container > div,
html[data-theme="light"] #on-leave-notes > div,
html[data-theme="light"] #schedule-adjustments > div,
html[data-theme="light"] #deployment-notes-list > div {
    border-radius: 7px !important;
    background: #FFFFFF !important;
}

/* Keep section icons present, but stop them adding extra color themes. */
html[data-theme="light"] #sidebar .w-8.h-8,
html[data-theme="light"] #on-leave-sidebar .w-6.h-6,
html[data-theme="light"] #on-leave-sidebar .w-8.h-8 {
    background: #EEF2F7 !important;
    border-color: #D9E2EC !important;
    color: #52657A !important;
}

html[data-theme="light"] #sidebar h3,
html[data-theme="light"] #on-leave-sidebar h3 {
    color: #52657A !important;
}

/* Ticket stream keeps the production dark-mode geometry; light mode only recolors it. */
html[data-theme="light"] .ticket-header > .flex-shrink-0 {
    filter: saturate(0.86);
}

html[data-theme="light"] .ticket-card > .mt-3 .flex.items-center.justify-between {
    align-items: center !important;
}

html[data-theme="light"] .ticket-card .ticket-collapse-btn {
    background: transparent !important;
}

/* Right action intent: notification secondary, schedule primary, end shift danger. */
html[data-theme="light"] #on-leave-sidebar #notif-bell-btn {
    background: #FFFFFF !important;
    border: 1px solid #C7D2FE !important;
    color: var(--ds-primary-strong) !important;
    box-shadow: none !important;
}

html[data-theme="light"] #on-leave-sidebar #notif-bell-btn svg,
html[data-theme="light"] #on-leave-sidebar #notif-bell-btn span {
    color: var(--ds-primary-strong) !important;
}

html[data-theme="light"] #on-leave-sidebar #shift-btn {
    background: #BE123C !important;
    border: 1px solid #9F1239 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

html[data-theme="light"] #on-leave-sidebar #schedule-btn {
    background: #4F46E5 !important;
    border: 1px solid #4338CA !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

html[data-theme="light"] #ticket-tags {
    overflow: hidden !important;
}

/* =============================================================================
   16. LAYERED LIGHT MODE PASS
   Light mode should be bright, not all-white. This pass introduces a proper
   depth system: cool app background, tinted side panels/toolbars, near-white
   content cards, and colored/outlined controls by purpose.
   ============================================================================= */

html[data-theme="light"] {
    --ds-page: #EAF0F7;
    --ds-app-shell: #EEF4FA;
    --ds-toolbar: #DFE8F2;
    --ds-toolbar-soft: #E7EEF6;
    --ds-panel: #F8FBFE;
    --ds-card: #FEFFFF;
    --ds-card-subtle: #F3F7FB;
    --ds-border: #C7D3E1;
    --ds-border-strong: #AEBBCC;
    --ds-text: #102033;
    --ds-text-muted: #44566C;
    --ds-text-soft: #66788D;
    --ds-primary: #4F46E5;
    --ds-primary-strong: #4338CA;
    --ds-primary-soft: #E8E9FF;
    --ds-selected: #0891B2;
    --ds-selected-soft: #DDF7FC;
    --ds-success: #047857;
    --ds-success-soft: #DCFCE7;
    --ds-warning: #B45309;
    --ds-warning-soft: #FEF3C7;
    --ds-danger: #BE123C;
    --ds-danger-soft: #FFE4E6;
}

html[data-theme="light"] body,
html[data-theme="light"] #app-container,
html[data-theme="light"] #app-container main {
    background: var(--ds-page) !important;
}

html[data-theme="light"] #app-container > header {
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FC 100%) !important;
    border-bottom-color: var(--ds-border) !important;
}

/* App shell columns should feel like panels, not blank white walls. */
html[data-theme="light"] #sidebar,
html[data-theme="light"] #on-leave-sidebar {
    background: linear-gradient(180deg, #E8EEF6 0%, #F2F6FA 100%) !important;
}

html[data-theme="light"] #sidebar > div,
html[data-theme="light"] #on-leave-sidebar > div {
    background: var(--ds-panel) !important;
    border-color: var(--ds-border) !important;
}

html[data-theme="light"] #sidebar > div:first-of-type {
    background: linear-gradient(180deg, #F4F8FD 0%, #EAF3FF 100%) !important;
}

/* Restore intentional color to key navigation/action controls. */
html[data-theme="light"] #my-performance-btn {
    background: linear-gradient(180deg, #14B8A6 0%, #0D9488 100%) !important;
    border: 1px solid #0F766E !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.2) !important;
}

html[data-theme="light"] #sidebar a[href="settings.html"] {
    background: #64748B !important;
    border: 1px solid #475569 !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] #desktop-tab-bar {
    background: var(--ds-toolbar) !important;
}

html[data-theme="light"] #desktop-tab-bar > .relative {
    background: #D6E0EC !important;
    border-color: var(--ds-border-strong) !important;
}

html[data-theme="light"] #desktop-tab-bar .tab-btn {
    color: #34465C !important;
}

html[data-theme="light"] #desktop-tab-bar .tab-btn.text-white {
    background: linear-gradient(180deg, #F8FBFE 0%, #E9F6FB 100%) !important;
    border-color: #9FCADB !important;
    color: #0E5363 !important;
}

html[data-theme="light"] #tickets-filter-bar,
html[data-theme="light"] #tickets-footer {
    background: var(--ds-toolbar-soft) !important;
    border-color: var(--ds-border) !important;
}

html[data-theme="light"] #tickets-filter-bar input,
html[data-theme="light"] #tickets-filter-bar select,
html[data-theme="light"] #tickets-footer input,
html[data-theme="light"] #tickets-footer select,
html[data-theme="light"] #tickets-footer textarea {
    background: #F8FBFE !important;
    border-color: var(--ds-border-strong) !important;
}

html[data-theme="light"] #ticket-count-display {
    background: #E8E9FF !important;
    border-color: #C7D2FE !important;
}

/* Badge strip is a toolbar-like area, not another white section. */
html[data-theme="light"] .badges-header-container {
    background: #DDE7F2 !important;
    border-color: var(--ds-border) !important;
}

html[data-theme="light"] .badge-card {
    background: #F6FAFE !important;
    border-color: #BFD0E2 !important;
}

html[data-theme="light"] .badge-card.badge-negative {
    background: #FFF1F3 !important;
    border-color: #FDA4AF !important;
}

/* Tickets remain the brightest surface, but not identical to the whole app. */
html[data-theme="light"] .ticket-card,
html[data-theme="light"] #ticket-list > div,
html[data-theme="light"] #done-ticket-list > div,
html[data-theme="light"] #follow-up-ticket-list > div {
    background: linear-gradient(180deg, var(--ds-card) 0%, #F8FBFE 100%) !important;
    border-color: #BFD0E2 !important;
    box-shadow: 0 1px 2px rgba(16, 32, 51, 0.06), 0 8px 22px rgba(16, 32, 51, 0.04) !important;
}

html[data-theme="light"] .ticket-card:hover {
    border-color: #91A6BC !important;
    box-shadow: 0 2px 4px rgba(16, 32, 51, 0.08), 0 12px 26px rgba(16, 32, 51, 0.07) !important;
}

html[data-theme="light"] .ticket-card .bg-gray-800\/30,
html[data-theme="light"] .ticket-card .bg-gray-700\/40,
html[data-theme="light"] .ticket-card .bg-gray-600\/50 {
    background: #EAF1F8 !important;
    border-color: #C7D3E1 !important;
}

html[data-theme="light"] .ticket-card .bg-blue-500\/15,
html[data-theme="light"] .ticket-card .bg-purple-500\/15 {
    background: #E6F0FF !important;
    color: #1D4ED8 !important;
    border-color: #AFCBFF !important;
}

/* Footer controls should look like a tool, not a row of plain white boxes. */
html[data-theme="light"] #tickets-footer .source-btn {
    background: #EEF4FA !important;
    border-color: #AEBBCC !important;
    color: #334155 !important;
    cursor: pointer !important;
    user-select: none !important;
    pointer-events: auto !important;
}

html[data-theme="light"] #tickets-footer .source-btn:hover {
    background: #E3ECF6 !important;
}

html[data-theme="light"] #tickets-footer .source-btn[data-selected="true"]:first-of-type,
html[data-theme="light"] #tickets-footer .source-btn:first-of-type {
    background: #E8F0FF !important;
    border-color: #AFCBFF !important;
    color: #1D4ED8 !important;
}

html[data-theme="light"] #tickets-footer .source-btn[data-selected="true"]:nth-of-type(2),
html[data-theme="light"] #tickets-footer .source-btn:nth-of-type(2) {
    background: #F1ECFF !important;
    border-color: #C4B5FD !important;
    color: #6D28D9 !important;
}

html[data-theme="light"] #tickets-footer .source-btn[data-selected="true"] {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 2px 6px rgba(30, 64, 175, 0.12) !important;
}

html[data-theme="light"] #tickets-footer button[onclick="tickets.createTicket()"] {
    background: linear-gradient(180deg, #5B55F0 0%, #4F46E5 100%) !important;
    border-color: #4338CA !important;
    box-shadow: 0 5px 12px rgba(79, 70, 229, 0.22) !important;
}

/* Right panel cards need subtle tinting, especially empty states. */
html[data-theme="light"] #on-leave-notes > div,
html[data-theme="light"] #schedule-adjustments > div,
html[data-theme="light"] #deployment-notes-list > div {
    background: #F2F7FC !important;
    border-color: #D2DEEA !important;
}

html[data-theme="light"] #on-leave-sidebar #notif-bell-btn {
    background: #E8E9FF !important;
    border-color: #C7D2FE !important;
}

html[data-theme="light"] #on-leave-sidebar #schedule-btn {
    background: linear-gradient(180deg, #5B55F0 0%, #4F46E5 100%) !important;
}

html[data-theme="light"] #on-leave-sidebar #shift-btn {
    background: linear-gradient(180deg, #E11D48 0%, #BE123C 100%) !important;
}

html[data-theme="light"] #on-leave-sidebar button.bg-teal-600\/80 {
    background: linear-gradient(180deg, #14B8A6 0%, #0D9488 100%) !important;
}

html[data-theme="light"] #add-deployment-btn,
html[data-theme="light"] #on-leave-sidebar button.bg-indigo-600\/80 {
    background: linear-gradient(180deg, #6D5DF6 0%, #4F46E5 100%) !important;
}

/* =============================================================================
   17. TICKET COLOR PARITY
   The ticket markup must stay identical between dark and light modes. This
   section intentionally avoids padding, grid, order, size, or visibility changes.
   ============================================================================= */

html[data-theme="light"] .ds-ticket-card-v2 {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFE 100%) !important;
}

html[data-theme="light"] .ds-ticket-card-v2.email-pending-claim-card {
    border-color: rgba(5, 150, 105, 0.42) !important;
    background:
        linear-gradient(90deg, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0.05) 40%, rgba(255, 255, 255, 0.96) 100%),
        #FFFFFF !important;
    box-shadow: 0 12px 28px rgba(5, 150, 105, 0.12) !important;
}

html[data-theme="light"] .ds-ticket-card-v2.email-pending-claim-card:hover {
    border-color: rgba(5, 150, 105, 0.62) !important;
    box-shadow: 0 14px 32px rgba(5, 150, 105, 0.16) !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-pending-claim-badge {
    border-color: rgba(5, 150, 105, 0.52) !important;
    background: rgba(16, 185, 129, 0.15) !important;
    color: #047857 !important;
}

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

html[data-theme="light"] .ds-ticket-card-v2 .email-customer-summary {
    color: #334155 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-customer-label,
html[data-theme="light"] .ds-ticket-card-v2 .email-customer-cc {
    color: #64748B !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-customer-name {
    color: #0F172A !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-customer-address {
    color: #0369A1 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-thread-panel {
    border-color: #BFD0E2 !important;
    background: #FFFFFF !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-thread-header {
    border-bottom-color: #D7E3EF !important;
    background: #F2F7FC !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-thread-title,
html[data-theme="light"] .ds-ticket-card-v2 .email-message-name,
html[data-theme="light"] .ds-ticket-card-v2 .email-message-subject {
    color: #0F172A !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-thread-subtitle,
html[data-theme="light"] .ds-ticket-card-v2 .email-message-address,
html[data-theme="light"] .ds-ticket-card-v2 .email-message-time,
html[data-theme="light"] .ds-ticket-card-v2 .email-message-recipients,
html[data-theme="light"] .ds-ticket-card-v2 .email-thread-loading,
html[data-theme="light"] .ds-ticket-card-v2 .email-thread-empty,
html[data-theme="light"] .ds-ticket-card-v2 .email-message-empty {
    color: #52657A !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-thread-refresh,
html[data-theme="light"] .ds-ticket-card-v2 .email-thread-toggle {
    border-color: rgba(3, 105, 161, 0.32) !important;
    background: rgba(14, 165, 233, 0.1) !important;
    color: #0369A1 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-thread-message {
    border-color: #D7E3EF !important;
    background: #F8FBFE !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-reply-composer {
    border-top-color: #D7E3EF !important;
    background: #F2F7FC !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-reply-label {
    color: #334155 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-reply-textarea {
    border-color: #BFD0E2 !important;
    background: #FFFFFF !important;
    color: #0F172A !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-reply-recipient-fields {
    border-color: #D7E3EF !important;
    background: #FFFFFF !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-reply-recipient-row span {
    color: #334155 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-reply-recipient-row input {
    border-color: #BFD0E2 !important;
    background: #F8FBFE !important;
    color: #0F172A !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-reply-recipient-actions button {
    color: #0369A1 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-reply-recipient-error {
    color: #B42318 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-reply-status {
    color: #52657A !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-reply-send {
    border-color: rgba(3, 105, 161, 0.32) !important;
    background: #0E7490 !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-message-direction,
html[data-theme="light"] .ds-ticket-card-v2 .email-message-status,
html[data-theme="light"] .ds-ticket-card-v2 .email-message-auto,
html[data-theme="light"] .ds-ticket-card-v2 .email-message-remote-images {
    border-color: #CBD5E1 !important;
    background: #EEF5FB !important;
    color: #334155 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-message-remote-images {
    border-color: #F59E0B !important;
    background: #FFF7ED !important;
    color: #92400E !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-message-body {
    color: #1E293B !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-message-send-error {
    border-color: rgba(220, 38, 38, 0.24) !important;
    background: #FEE2E2 !important;
    color: #991B1B !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-thread-error {
    color: #B91C1C !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .email-thread-error button {
    color: #991B1B !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .ticket-header p.text-white.text-sm {
    color: #071427 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .ticket-header .font-bold.text-indigo-400 {
    color: #2563EB !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .ticket-collapse-btn {
    color: #52657A !important;
}

html[data-theme="light"] .ds-ticket-card-v2 > div[onclick*="stopPropagation"]:not(.ticket-body) {
    border-top-color: #D8E3EF !important;
}

html[data-theme="light"] .ds-ticket-card-v2 > div[onclick*="stopPropagation"]:not(.ticket-body) .text-xs.text-gray-400,
html[data-theme="light"] .ds-ticket-card-v2 > div[onclick*="stopPropagation"]:not(.ticket-body) .flex.items-center.gap-2.text-xs {
    color: #52657A !important;
}

html[data-theme="light"] .ds-ticket-card-v2 > div[onclick*="stopPropagation"]:not(.ticket-body) .kb-button {
    color: #334155 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .ticket-body > .relative {
    background: #F2F7FC !important;
    border-color: #D7E3EF !important;
}

/* Expanded ticket notes in light mode. The old note styles were dark-editor
   defaults, which is why expanded cards looked gray and heavy. */
html[data-theme="light"] .ds-ticket-card-v2 .ticket-body .note-container {
    background: #FFFFFF !important;
    border: 1px solid #CAD8E7 !important;
    color: #102033 !important;
    box-shadow: 0 1px 2px rgba(16, 32, 51, 0.04) !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .ticket-body .note-container .text-gray-300,
html[data-theme="light"] .ds-ticket-card-v2 .ticket-body .note-container .text-gray-400,
html[data-theme="light"] .ds-ticket-card-v2 .ticket-body .note-container .text-gray-500 {
    color: #52657A !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .ticket-body .note-text-display,
html[data-theme="light"] .ds-ticket-card-v2 .ticket-body .note-text-display p,
html[data-theme="light"] .ds-ticket-card-v2 .ticket-body .ql-editor {
    color: #102033 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .note-editor {
    background: #F8FBFE !important;
    border: 1px solid #BFD0E2 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .note-editor .ql-toolbar {
    background: #EAF1F8 !important;
    border-bottom: 1px solid #C7D3E1 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .note-editor .ql-container {
    background: #FFFFFF !important;
    color: #102033 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .note-editor .ql-editor::before {
    color: #738196 !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .note-editor .ql-snow .ql-stroke {
    stroke: #52657A !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .note-editor .ql-snow .ql-fill {
    fill: #52657A !important;
}

html[data-theme="light"] .ds-ticket-card-v2 .note-editor + .flex button,
html[data-theme="light"] .ds-ticket-card-v2 .ticket-body button[onclick*="addNote"] {
    background: #4F46E5 !important;
    border: 1px solid #4338CA !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.18) !important;
}

/* Final source selector override: unselected is neutral, selected carries
   the source color. This makes Outlook/Teams visibly change on click. */
html[data-theme="light"] #tickets-footer .source-btn {
    background: #EDF3F9 !important;
    border: 1px solid #AEBBCC !important;
    color: #44566C !important;
    box-shadow: none !important;
}

html[data-theme="light"] #tickets-footer .source-btn:hover {
    background: #E4EDF6 !important;
    border-color: #8FA3B8 !important;
}

html[data-theme="light"] #tickets-footer .source-btn[data-source-id="outlook"][data-selected="true"] {
    background: #DDEBFF !important;
    border-color: #3B82F6 !important;
    color: #1D4ED8 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18) !important;
}

html[data-theme="light"] #tickets-footer .source-btn[data-source-id="teams"][data-selected="true"] {
    background: #EEE7FF !important;
    border-color: #8B5CF6 !important;
    color: #6D28D9 !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.18) !important;
}

/* =============================================================================
   18. ALL-PAGE LIGHT MODE COMPLETION
   Page-scoped color/surface rules only. Layout, spacing, and sizing stay owned
   by each page's existing dark-mode implementation.
   ============================================================================= */

html[data-theme="light"] body[data-page] {
    background: #EAF0F7 !important;
    color: #102033 !important;
}

html[data-theme="light"] body[data-theme-floating="true"] #ds-theme-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 60;
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #334155;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] body[data-page] .text-white,
html[data-theme="light"] body[data-page] .text-gray-100,
html[data-theme="light"] body[data-page] .text-gray-200 {
    color: #102033 !important;
}

html[data-theme="light"] body[data-page] .text-gray-300,
html[data-theme="light"] body[data-page] .text-gray-400,
html[data-theme="light"] body[data-page] .text-gray-500 {
    color: #52657A !important;
}

html[data-theme="light"] body[data-page] .bg-gray-900,
html[data-theme="light"] body[data-page] .bg-slate-900,
html[data-theme="light"] body[data-page] .bg-gray-800,
html[data-theme="light"] body[data-page] .bg-gray-800\/50,
html[data-theme="light"] body[data-page] .bg-gray-800\/80,
html[data-theme="light"] body[data-page] .bg-gray-700,
html[data-theme="light"] body[data-page] .bg-gray-700\/30,
html[data-theme="light"] body[data-page] .bg-gray-700\/50,
html[data-theme="light"] body[data-page] .bg-gray-700\/60 {
    background: #F8FBFE !important;
}

html[data-theme="light"] body[data-page] .border-gray-700,
html[data-theme="light"] body[data-page] .border-gray-700\/50,
html[data-theme="light"] body[data-page] .border-gray-600,
html[data-theme="light"] body[data-page] .border-gray-600\/50 {
    border-color: #C7D3E1 !important;
}

html[data-theme="light"] body[data-page] input,
html[data-theme="light"] body[data-page] select,
html[data-theme="light"] body[data-page] textarea {
    background: #FFFFFF !important;
    border-color: #AEBBCC !important;
    color: #102033 !important;
}

html[data-theme="light"] body[data-page] input::placeholder,
html[data-theme="light"] body[data-page] textarea::placeholder {
    color: #738196 !important;
}

html[data-theme="light"] body[data-page] button.bg-indigo-600,
html[data-theme="light"] body[data-page] .bg-indigo-600,
html[data-theme="light"] body[data-page] .bg-blue-600,
html[data-theme="light"] body[data-page] .bg-green-600,
html[data-theme="light"] body[data-page] .bg-red-600,
html[data-theme="light"] body[data-page] .bg-gradient-to-r,
html[data-theme="light"] body[data-page] .back-button,
html[data-theme="light"] body[data-page] .guides-action-btn,
html[data-theme="light"] body[data-page] .training-primary-btn,
html[data-theme="light"] body[data-page] .modal-btn-primary {
    color: #FFFFFF !important;
}

html[data-theme="light"] body[data-page="clients"] .clients-header,
html[data-theme="light"] body[data-page="clients"] .filters-section,
html[data-theme="light"] body[data-page="clients"] .stat-card,
html[data-theme="light"] body[data-page="clients"] .client-card,
html[data-theme="light"] body[data-page="clients"] .modal-content,
html[data-theme="light"] body[data-page="clients"] .client-detail-card,
html[data-theme="light"] body[data-page="guides"] .glass,
html[data-theme="light"] body[data-page="guides"] .glass-light,
html[data-theme="light"] body[data-page="guides"] .guide-card,
html[data-theme="light"] body[data-page="training"] .glassmorphism,
html[data-theme="light"] body[data-page="training"] .session-card,
html[data-theme="light"] body[data-page="settings"] .glassmorphism,
html[data-theme="light"] body[data-page="settings"] .settings-card,
html[data-theme="light"] body[data-page="announcement"] .page-header,
html[data-theme="light"] body[data-page="announcement"] .announcement-panel,
html[data-theme="light"] body[data-page="announcement"] .card,
html[data-theme="light"] body[data-page="announcement"] .template-row {
    background: #F8FBFE !important;
    border-color: #C7D3E1 !important;
    color: #102033 !important;
    box-shadow: 0 1px 2px rgba(16, 32, 51, 0.06), 0 8px 22px rgba(16, 32, 51, 0.04) !important;
}

html[data-theme="light"] body[data-page="clients"] .client-card:hover,
html[data-theme="light"] body[data-page="guides"] .guide-card:hover,
html[data-theme="light"] body[data-page="training"] .session-card:hover {
    background: #FFFFFF !important;
    border-color: #91A6BC !important;
}

html[data-theme="light"] body[data-page="clients"] .header-title h1,
html[data-theme="light"] body[data-page="clients"] .section-title h2,
html[data-theme="light"] body[data-page="guides"] h1,
html[data-theme="light"] body[data-page="training"] h1,
html[data-theme="light"] body[data-page="settings"] h1,
html[data-theme="light"] body[data-page="settings"] h2,
html[data-theme="light"] body[data-page="announcement"] .page-title,
html[data-theme="light"] body[data-page="announcement"] .card-title {
    color: #102033 !important;
    background: none !important;
    -webkit-text-fill-color: #102033 !important;
}

html[data-theme="light"] body[data-page="clients"] .stat-value,
html[data-theme="light"] body[data-page="clients"] .client-name,
html[data-theme="light"] body[data-page="guides"] .guide-title,
html[data-theme="light"] body[data-page="training"] .session-title {
    color: #102033 !important;
}

html[data-theme="light"] body[data-page="clients"] .stat-label,
html[data-theme="light"] body[data-page="clients"] .client-meta,
html[data-theme="light"] body[data-page="guides"] .guides-subtitle,
html[data-theme="light"] body[data-page="training"] .training-subtitle {
    color: #52657A !important;
}

html[data-theme="light"] body[data-page="announcement"] .announcement-tabs {
    background: #DFE8F2 !important;
    border-color: #C7D3E1 !important;
}

html[data-theme="light"] body[data-page="announcement"] .announcement-tab {
    background: transparent !important;
    border-color: #C7D3E1 !important;
    color: #44566C !important;
}

html[data-theme="light"] body[data-page="announcement"] .announcement-tab.active {
    background: #FFFFFF !important;
    color: #0E5363 !important;
    border-color: #9FCADB !important;
}

html[data-theme="light"] body[data-page="announcement"] #announcement-body-editor,
html[data-theme="light"] body[data-page="announcement"] .ql-toolbar,
html[data-theme="light"] body[data-page="announcement"] .ql-container {
    background: #FFFFFF !important;
    border-color: #C7D3E1 !important;
    color: #102033 !important;
}

html[data-theme="light"] body[data-page="reset-password"] > .w-full > div:last-child {
    background: #F8FBFE !important;
    border-color: #C7D3E1 !important;
    color: #102033 !important;
}

html[data-theme="light"] body[data-page="reset-password"] h1,
html[data-theme="light"] body[data-page="reset-password"] label {
    color: #102033 !important;
}

html[data-theme="light"] body[data-page="admin"] #loading-screen,
html[data-theme="light"] body[data-page="admin"] #admin-container,
html[data-theme="light"] body[data-page="admin"] main {
    background: #EAF0F7 !important;
    color: #102033 !important;
}

html[data-theme="light"] body[data-page="admin"] header,
html[data-theme="light"] body[data-page="admin"] aside {
    background: #F3F7FC !important;
    border-color: #C7D3E1 !important;
}

html[data-theme="light"] body[data-page="admin"] .nav-link:hover,
html[data-theme="light"] body[data-page="admin"] .nav-link.active {
    background: #E8E9FF !important;
    color: #3730A3 !important;
}

html[data-theme="light"] body[data-page="admin"] .section-content > div.bg-gray-800,
html[data-theme="light"] body[data-page="admin"] div.bg-gray-800.rounded-lg,
html[data-theme="light"] body[data-page="admin"] div.bg-gray-800\/50,
html[data-theme="light"] body[data-page="admin"] table,
html[data-theme="light"] body[data-page="admin"] .modal-content {
    background: #F8FBFE !important;
    border-color: #C7D3E1 !important;
    color: #102033 !important;
}

html[data-theme="light"] body[data-page="admin"] th,
html[data-theme="light"] body[data-page="admin"] td {
    border-color: #D8E0EA !important;
}

/* =============================================================================
   19. LIGHT MODE POLISH PASS
   Final scoped color corrections from branch QA. Keep geometry untouched.
   ============================================================================= */

:root {
    --lm-shell: #E7EEF6;
    --lm-shell-strong: #DCE7F2;
    --lm-panel: #F3F7FC;
    --lm-card: #FBFDFF;
    --lm-card-soft: #F6FAFE;
    --lm-border: #B9C8D9;
    --lm-border-soft: #D5E0EB;
    --lm-text: #0F1D2E;
    --lm-muted: #4E6078;
    --lm-faint: #75859A;
    --lm-primary: #4F46E5;
    --lm-primary-dark: #3730A3;
    --lm-cyan: #0E7490;
    --lm-teal: #0F766E;
    --lm-danger: #BE123C;
    --lm-warning: #B45309;
    --lm-success: #047857;
}

#ds-theme-toggle {
    gap: 4px !important;
    min-height: 28px !important;
    padding: 3px 8px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
}

#ds-theme-toggle svg {
    width: 12px !important;
    height: 12px !important;
}

html[data-theme="light"] body[data-page] {
    background: var(--lm-shell) !important;
    color: var(--lm-text) !important;
}

/* Shared supporting-page header controls */
.support-page-utility {
    display: flex;
    align-items: center;
    gap: 6px;
}

.support-header-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: rgba(71, 85, 105, 0.35);
    border: 1px solid rgba(99, 102, 241, 0.28);
    color: #CBD5E1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.support-page-titlebar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.support-page-titlebar #ds-theme-toggle {
    min-height: 28px !important;
    padding: 3px 8px !important;
}

.support-header-btn:hover {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(129, 140, 248, 0.55);
    color: #FFFFFF;
}

html[data-theme="light"] .support-header-btn {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #334155;
}

html[data-theme="light"] .support-header-btn:hover {
    background: #F1F5F9;
    border-color: #94A3B8;
    color: #0F172A;
}

@media (max-width: 640px) {
    .support-page-utility {
        display: flex;
        width: auto;
    }

    .support-page-titlebar {
        gap: 8px;
    }

    .support-header-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }
}

@media (pointer: coarse), (max-width: 768px) {
    #ds-theme-toggle,
    .support-page-titlebar #ds-theme-toggle,
    .support-header-btn,
    .header-action-btn,
    .header-account-trigger {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .support-header-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .header-account-menu-item {
        min-height: 44px !important;
    }
}

html[data-theme="light"] #team-name-header {
    background: linear-gradient(90deg, #818CF8 0%, #A78BFA 52%, #F472B6 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

html[data-theme="light"] #app-container > header,
html[data-theme="light"] #sidebar,
html[data-theme="light"] #on-leave-sidebar,
html[data-theme="light"] #app-container main {
    background: var(--lm-shell) !important;
    border-color: var(--lm-border) !important;
}

html[data-theme="light"] #desktop-tab-bar,
html[data-theme="light"] #tickets-filter-bar,
html[data-theme="light"] .badges-header-container,
html[data-theme="light"] #tickets-footer {
    background: var(--lm-shell-strong) !important;
    border-color: var(--lm-border) !important;
    box-shadow: 0 1px 2px rgba(15, 29, 46, 0.05) !important;
}

html[data-theme="light"] #desktop-tab-bar .tab-btn {
    color: #21324A !important;
}

html[data-theme="light"] #desktop-tab-bar .tab-btn.text-white,
html[data-theme="light"] #desktop-tab-bar .tab-btn[aria-selected="true"] {
    background: var(--lm-card) !important;
    border-color: #8FB8CC !important;
    color: #083344 !important;
    box-shadow: inset 0 -2px 0 #0EA5E9, 0 1px 2px rgba(15, 29, 46, 0.08) !important;
}

html[data-theme="light"] #desktop-tab-bar {
    background: #DCE7F2 !important;
}

html[data-theme="light"] #desktop-tab-bar > .relative {
    background: #D0DCE9 !important;
    border-color: #AEBFD2 !important;
}

html[data-theme="light"] #desktop-tab-bar #tab-indicator {
    top: 4px !important;
    bottom: 4px !important;
    height: auto !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF8FC 100%) !important;
    border: 1px solid #8FB8CC !important;
    box-shadow: inset 0 -2px 0 #0EA5E9, 0 1px 3px rgba(15, 29, 46, 0.10) !important;
}

html[data-theme="light"] #desktop-tab-bar .tab-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #38506A !important;
    box-shadow: none !important;
}

html[data-theme="light"] #desktop-tab-bar .tab-btn:hover {
    background: rgba(255, 255, 255, 0.42) !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] #desktop-tab-bar .tab-btn.text-white {
    background: transparent !important;
    border-color: transparent !important;
    color: #0B3A4A !important;
    box-shadow: none !important;
}

html[data-theme="light"] .ticket-card,
html[data-theme="light"] .ds-ticket-card-v2,
html[data-theme="light"] #ticket-list > div,
html[data-theme="light"] .sidebar-card,
html[data-theme="light"] .compact-card,
html[data-theme="light"] .right-sidebar-card,
html[data-theme="light"] #quick-actions-card,
html[data-theme="light"] #upcoming-absences-card,
html[data-theme="light"] #schedule-adjustments-card,
html[data-theme="light"] #deployments-meetings-card {
    background: var(--lm-card) !important;
    border-color: var(--lm-border) !important;
    color: var(--lm-text) !important;
    box-shadow: 0 1px 2px rgba(15, 29, 46, 0.06), 0 8px 18px rgba(15, 29, 46, 0.035) !important;
}

html[data-theme="light"] .team-member-card,
html[data-theme="light"] #leaderboard-card,
html[data-theme="light"] #team-stats-card {
    background: var(--lm-card-soft) !important;
    border-color: var(--lm-border) !important;
    color: var(--lm-text) !important;
}

html[data-theme="light"] #sidebar > div,
html[data-theme="light"] #on-leave-sidebar > div {
    background: var(--lm-card-soft) !important;
    border-color: var(--lm-border) !important;
    color: var(--lm-text) !important;
}

html[data-theme="light"] #on-leave-sidebar h3 {
    color: #405269 !important;
}

html[data-theme="light"] #notif-bell-btn {
    background: #E7EAFF !important;
    border: 1px solid #B8C1FF !important;
    color: var(--lm-primary-dark) !important;
}

html[data-theme="light"] #notif-bell-btn svg,
html[data-theme="light"] #notif-bell-btn span:not(#notif-count-badge) {
    color: var(--lm-primary-dark) !important;
}

html[data-theme="light"] #shift-btn {
    background: linear-gradient(180deg, #E11D48 0%, #BE123C 100%) !important;
    border: 1px solid #A70F34 !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] #schedule-btn,
html[data-theme="light"] #add-deployment-btn {
    background: linear-gradient(180deg, #5B50F0 0%, #4738D1 100%) !important;
    border: 1px solid #3B2FB3 !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] #on-leave-sidebar button[onclick*="openCompletedItemsModal"] {
    background: linear-gradient(180deg, #14B8A6 0%, #0F766E 100%) !important;
    border: 1px solid #0B5E58 !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] #tickets-footer input,
html[data-theme="light"] #tickets-footer select,
html[data-theme="light"] #tickets-filter-bar input,
html[data-theme="light"] #tickets-filter-bar select {
    background: #FFFFFF !important;
    border-color: #9FB1C6 !important;
    color: var(--lm-text) !important;
}

html[data-theme="light"] #tickets-footer .source-btn {
    background: #F3F7FC !important;
    border-color: #AFC0D2 !important;
    color: #34465D !important;
}

html[data-theme="light"] #tickets-footer .source-btn[data-source-id="outlook"][data-selected="true"] {
    background: #E0ECFF !important;
    border-color: #2563EB !important;
    color: #1D4ED8 !important;
}

html[data-theme="light"] #tickets-footer .source-btn[data-source-id="teams"][data-selected="true"] {
    background: #EFE7FF !important;
    border-color: #7C3AED !important;
    color: #6D28D9 !important;
}

html[data-theme="light"] #ticket-form button[type="submit"],
html[data-theme="light"] #quick-actions-card .bg-indigo-600,
html[data-theme="light"] #quick-actions-card .bg-gradient-to-r {
    color: #FFFFFF !important;
}

html[data-theme="light"] #quick-actions-card .bg-red-600,
html[data-theme="light"] #quick-actions-card .bg-rose-600,
html[data-theme="light"] button[onclick*="endShift"] {
    background: linear-gradient(180deg, #E11D48 0%, #BE123C 100%) !important;
    border-color: #A70F34 !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] #notification-center {
    background: #F7FAFE !important;
    border-color: #AFC0D2 !important;
    color: var(--lm-text) !important;
    box-shadow: 0 18px 44px rgba(15, 29, 46, 0.20) !important;
    backdrop-filter: blur(12px) !important;
}

html[data-theme="light"] #notification-center > div {
    border-color: var(--lm-border-soft) !important;
}

html[data-theme="light"] #notification-center h3,
html[data-theme="light"] #notification-center .notif-item .text-white {
    color: var(--lm-text) !important;
}

html[data-theme="light"] #notification-center .text-gray-400,
html[data-theme="light"] #notification-center .text-gray-500 {
    color: var(--lm-muted) !important;
}

html[data-theme="light"] #notification-center .notif-tab-btn {
    color: var(--lm-muted) !important;
    background: transparent !important;
}

html[data-theme="light"] #notification-center .notif-tab-btn.border-indigo-500 {
    color: var(--lm-primary-dark) !important;
    background: #EEF2FF !important;
    border-color: var(--lm-primary) !important;
}

html[data-theme="light"] #notification-center .notif-filter-btn {
    background: #FFFFFF !important;
    border-color: #C4D0DE !important;
    color: var(--lm-muted) !important;
}

html[data-theme="light"] #notification-center .notif-filter-btn.bg-indigo-600\/50,
html[data-theme="light"] #notification-center .notif-filter-btn.text-white {
    background: #E6E9FF !important;
    border-color: #A5B4FC !important;
    color: var(--lm-primary-dark) !important;
}

html[data-theme="light"] #notification-center #notif-list {
    background: #F3F7FC !important;
}

html[data-theme="light"] #notification-center .notif-item {
    background: #FFFFFF !important;
    border-color: #C8D5E4 !important;
    color: var(--lm-text) !important;
    opacity: 1 !important;
}

html[data-theme="light"] #notification-center .notif-item:hover {
    background: #F8FBFE !important;
}

html[data-theme="light"] #notification-center .notif-item .text-gray-600 {
    color: #8A99AA !important;
}

html[data-theme="light"] body[data-page="clients"] .clients-header,
html[data-theme="light"] body[data-page="clients"] .filters-section,
html[data-theme="light"] body[data-page="clients"] .stat-card {
    background: var(--lm-card) !important;
    border-color: var(--lm-border) !important;
}

html[data-theme="light"] body[data-page="clients"] .type-toggle {
    background: #CDD8E6 !important;
    border: 1px solid #AFC0D2 !important;
}

html[data-theme="light"] body[data-page="clients"] .type-toggle-btn {
    color: #3F5066 !important;
}

html[data-theme="light"] body[data-page="clients"] .type-toggle-btn.active {
    background: linear-gradient(180deg, #6D5DF6 0%, #5143D9 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.20) !important;
}

html[data-theme="light"] body[data-page="clients"] .filter-btn {
    background: #FFFFFF !important;
    border-color: #BCCBDD !important;
    color: #3E5066 !important;
}

html[data-theme="light"] body[data-page="clients"] .filter-btn.active {
    background: #E7EAFF !important;
    border-color: #8B91F5 !important;
    color: var(--lm-primary-dark) !important;
}

html[data-theme="light"] body[data-page="clients"] .client-card {
    background: #F9FCFF !important;
    border-color: #ACBDD0 !important;
}

html[data-theme="light"] body[data-page="clients"] .client-card::before {
    background: linear-gradient(90deg, #4F46E5 0%, #0EA5E9 50%, #14B8A6 100%) !important;
}

html[data-theme="light"] body[data-page="clients"] .client-name,
html[data-theme="light"] body[data-page="clients"] .client-card h3 {
    color: var(--lm-text) !important;
}

html[data-theme="light"] body[data-page="clients"] .client-created-date,
html[data-theme="light"] body[data-page="clients"] .client-info,
html[data-theme="light"] body[data-page="clients"] .info-label {
    color: var(--lm-muted) !important;
}

html[data-theme="light"] body[data-page="clients"] .copyable,
html[data-theme="light"] body[data-page="clients"] .domain-link,
html[data-theme="light"] body[data-page="clients"] .email-badge {
    background: #E9ECFF !important;
    border-color: #C4CAFF !important;
    color: #3942B7 !important;
    opacity: 1 !important;
}

html[data-theme="light"] body[data-page="clients"] .port-badge.smpp {
    background: #DDFBEA !important;
    border-color: #8CE7B5 !important;
    color: #047857 !important;
}

html[data-theme="light"] body[data-page="clients"] .port-badge.http {
    background: #E0EEFF !important;
    border-color: #9DC5FF !important;
    color: #1D4ED8 !important;
}

html[data-theme="light"] body[data-page="clients"] .port-badge.dlr {
    background: #EFE6FF !important;
    border-color: #C9B4FF !important;
    color: #6D28D9 !important;
}

html[data-theme="light"] body[data-page="clients"] .client-icon-btn,
html[data-theme="light"] body[data-page="clients"] .action-btn {
    background: #E6EEFF !important;
    border-color: #AFC5FF !important;
    color: #1D4ED8 !important;
    opacity: 1 !important;
}

html[data-theme="light"] body[data-page="clients"] .action-btn.doc-exists {
    background: #DDFBEA !important;
    border-color: #8CE7B5 !important;
    color: #047857 !important;
}

html[data-theme="light"] body[data-page="clients"] .status-badge.active {
    background: #DDFBEA !important;
    border-color: #86E7B3 !important;
    color: #047857 !important;
}

html[data-theme="light"] body[data-page="clients"] .status-badge.inactive {
    background: #EEF2F7 !important;
    border-color: #CBD5E1 !important;
    color: #52657A !important;
}

html[data-theme="light"] body[data-page="guides"] header,
html[data-theme="light"] body[data-page="guides"] .guide-card,
html[data-theme="light"] body[data-page="guides"] #upload-panel > div,
html[data-theme="light"] body[data-page="guides"] #delete-modal > div,
html[data-theme="light"] body[data-page="guides"] #edit-modal > div {
    background: var(--lm-card) !important;
    border-color: var(--lm-border) !important;
}

html[data-theme="light"] body[data-page="guides"] .guide-action-btn {
    background: #FFFFFF !important;
    border-color: #B7C5D6 !important;
    color: #3E5066 !important;
}

html[data-theme="light"] body[data-page="guides"] .guide-action-btn:not(:disabled):hover {
    background: #EAF1FF !important;
    border-color: #8CAEF0 !important;
    color: #1D4ED8 !important;
}

html[data-theme="light"] body[data-page="guides"] .guide-action-btn:disabled,
html[data-theme="light"] body[data-page="guides"] button:disabled {
    background: #E8ECFF !important;
    border-color: #C9D0FF !important;
    color: #7281C8 !important;
    opacity: 1 !important;
}

html[data-theme="light"] body[data-page="guides"] .guide-icon-btn {
    opacity: 1 !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-hero,
html[data-theme="light"] body[data-page="admin"] .admin-users-panel,
html[data-theme="light"] body[data-page="admin"] .admin-users-stat,
html[data-theme="light"] body[data-page="admin"] .admin-users-modal,
html[data-theme="light"] body[data-page="admin"] .admin-users-check,
html[data-theme="light"] body[data-page="admin"] .admin-users-history-item,
html[data-theme="light"] body[data-page="admin"] .admin-users-password-option {
    background: var(--lm-card) !important;
    border-color: var(--lm-border) !important;
    color: var(--lm-text) !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-panel-header,
html[data-theme="light"] body[data-page="admin"] .admin-users-action-block,
html[data-theme="light"] body[data-page="admin"] .admin-users-modal-header {
    border-color: var(--lm-border-soft) !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-toolbar,
html[data-theme="light"] body[data-page="admin"] .admin-users-table th {
    background: #EEF4FA !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-table tr:hover {
    background: #F2F6FB !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-hero h2,
html[data-theme="light"] body[data-page="admin"] .admin-users-panel-header h3,
html[data-theme="light"] body[data-page="admin"] .admin-users-stat strong,
html[data-theme="light"] body[data-page="admin"] .admin-users-person p,
html[data-theme="light"] body[data-page="admin"] .admin-users-action-block h4,
html[data-theme="light"] body[data-page="admin"] .admin-users-modal-header h3,
html[data-theme="light"] body[data-page="admin"] .admin-users-check strong,
html[data-theme="light"] body[data-page="admin"] .admin-users-history-item strong,
html[data-theme="light"] body[data-page="admin"] .admin-users-password-option strong,
html[data-theme="light"] body[data-page="admin"] .admin-users-color-row span {
    color: var(--lm-text) !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-hero p:last-child,
html[data-theme="light"] body[data-page="admin"] .admin-users-panel-header p,
html[data-theme="light"] body[data-page="admin"] .admin-users-count-line,
html[data-theme="light"] body[data-page="admin"] .admin-users-stat span,
html[data-theme="light"] body[data-page="admin"] .admin-users-person span,
html[data-theme="light"] body[data-page="admin"] .admin-users-person small,
html[data-theme="light"] body[data-page="admin"] .admin-users-action-block p,
html[data-theme="light"] body[data-page="admin"] .admin-users-empty,
html[data-theme="light"] body[data-page="admin"] .admin-users-empty span,
html[data-theme="light"] body[data-page="admin"] .admin-users-modal-header span,
html[data-theme="light"] body[data-page="admin"] .admin-users-field p,
html[data-theme="light"] body[data-page="admin"] .admin-users-check small,
html[data-theme="light"] body[data-page="admin"] .admin-users-history-item span,
html[data-theme="light"] body[data-page="admin"] .admin-users-history-item p,
html[data-theme="light"] body[data-page="admin"] .admin-users-history-empty,
html[data-theme="light"] body[data-page="admin"] .admin-users-password-option span {
    color: var(--lm-muted) !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-history-item p {
    background: #EEF4FA !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-password-option:disabled {
    background: #E8EEF5 !important;
    border-color: #CBD5E1 !important;
    opacity: 0.72 !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-toolbar input,
html[data-theme="light"] body[data-page="admin"] .admin-users-toolbar select,
html[data-theme="light"] body[data-page="admin"] .admin-users-action-block input,
html[data-theme="light"] body[data-page="admin"] .admin-users-action-block select,
html[data-theme="light"] body[data-page="admin"] .admin-users-field input,
html[data-theme="light"] body[data-page="admin"] .admin-users-field select,
html[data-theme="light"] body[data-page="admin"] .admin-users-field textarea {
    background: #FFFFFF !important;
    border-color: #AFC0D2 !important;
    color: var(--lm-text) !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-secondary-action,
html[data-theme="light"] body[data-page="admin"] .admin-users-row-action,
html[data-theme="light"] body[data-page="admin"] .admin-users-modal-secondary,
html[data-theme="light"] body[data-page="admin"] .admin-users-modal-close {
    background: #FFFFFF !important;
    border-color: #B7C5D6 !important;
    color: #34465D !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-row-action:hover,
html[data-theme="light"] body[data-page="admin"] .admin-users-secondary-action:hover,
html[data-theme="light"] body[data-page="admin"] .admin-users-modal-secondary:hover,
html[data-theme="light"] body[data-page="admin"] .admin-users-modal-close:hover {
    background: #EAF1FF !important;
    border-color: #8CAEF0 !important;
    color: #1D4ED8 !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-role.neutral,
html[data-theme="light"] body[data-page="admin"] .admin-users-team {
    background: #E9EEF5 !important;
    color: #405269 !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-role.info {
    background: #E0EEFF !important;
    color: #1D4ED8 !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-role.warning {
    background: #FFF3D7 !important;
    color: var(--lm-warning) !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-role.danger,
html[data-theme="light"] body[data-page="admin"] .admin-users-status.blocked {
    background: #FFE4E8 !important;
    color: var(--lm-danger) !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-status.active {
    background: #DDFBEA !important;
    color: var(--lm-success) !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-modal-note {
    background: #EAF1FF !important;
    border-color: #AAC3FF !important;
    color: #1D4ED8 !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-danger-note {
    background: #FFE4E8 !important;
    border-color: #FDA4AF !important;
    color: var(--lm-danger) !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-safety-note {
    background: #FFF7E6 !important;
    border-color: #F7D48A !important;
}

html[data-theme="light"] body[data-page="admin"] .admin-users-safety-note strong {
    color: var(--lm-warning) !important;
}

/* Sidebar identity polish: neutral surfaces, assigned user colors on names. */
html[data-theme="light"] #stats-container > div,
html[data-theme="light"] #leaderboard-container > div {
    background: #FBFDFF !important;
    border-color: #CBD8E6 !important;
    box-shadow: 0 1px 2px rgba(15, 29, 46, 0.05) !important;
}

html[data-theme="light"] #stats-container > div:hover,
html[data-theme="light"] #leaderboard-container > div:hover {
    background: #FFFFFF !important;
    border-color: #AFC0D2 !important;
}

html[data-theme="light"] #leaderboard-container .bg-black\/30 {
    background: #EAF1F8 !important;
    border-color: #B9C8D9 !important;
    color: #20324A !important;
}

html[data-theme="light"] #on-leave-notes .space-y-2 > div,
html[data-theme="light"] #on-leave-notes .hidden > div,
html[data-theme="light"] #schedule-adjustments .space-y-1 > div {
    background: #FBFDFF !important;
    border: 1px solid #CBD8E6 !important;
    border-left: 3px solid #AFC0D2 !important;
    color: #0F1D2E !important;
    box-shadow: 0 1px 2px rgba(15, 29, 46, 0.05) !important;
}

html[data-theme="light"] #on-leave-notes .border-red-500,
html[data-theme="light"] #on-leave-notes .space-y-2 > div.border-red-500,
html[data-theme="light"] #on-leave-notes .hidden > div.border-red-500 {
    background: #FFF1F2 !important;
    border-color: #F9C9D3 !important;
    border-left-color: #E11D48 !important;
}

html[data-theme="light"] #on-leave-notes .border-amber-500,
html[data-theme="light"] #on-leave-notes .space-y-2 > div.border-amber-500,
html[data-theme="light"] #on-leave-notes .hidden > div.border-amber-500 {
    background: #FFFBEB !important;
    border-color: #F7D48A !important;
    border-left-color: #D97706 !important;
}

html[data-theme="light"] #on-leave-notes .text-red-300 {
    color: #BE123C !important;
}

html[data-theme="light"] #on-leave-notes .text-amber-300 {
    color: #B45309 !important;
}

html[data-theme="light"] #on-leave-notes .text-gray-300,
html[data-theme="light"] #schedule-adjustments .text-indigo-300 {
    color: #34465D !important;
}

html[data-theme="light"] #on-leave-notes h4,
html[data-theme="light"] #schedule-adjustments h4,
html[data-theme="light"] #on-leave-notes button span,
html[data-theme="light"] #schedule-adjustments button span {
    color: #405269 !important;
}

html[data-theme="light"] #on-leave-notes .bg-purple-500\/30,
html[data-theme="light"] #schedule-adjustments .bg-indigo-500\/30,
html[data-theme="light"] #schedule-adjustments .bg-amber-500\/30,
html[data-theme="light"] #schedule-adjustments .bg-red-500\/30 {
    background: #B8C8DA !important;
}

html[data-theme="light"] #schedule-adjustments .space-y-1 > div {
    border-left-color: #8BA6C2 !important;
}

html[data-theme="light"] #schedule-adjustments .schedule-adj-username {
    font-weight: 750 !important;
}

html[data-theme="light"] #schedule-adjustments .schedule-adj-username + span {
    color: #34465D !important;
    font-weight: 600 !important;
}

/* Final dashboard light QA: keep hierarchy crisp without changing layout. */
html[data-theme="light"] #team-name-header {
    background: linear-gradient(90deg, #4F46E5 0%, #7C3AED 52%, #DB2777 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

html[data-theme="light"] #sidebar > div:has(#stats-container),
html[data-theme="light"] #sidebar > div:has(#leaderboard-container) {
    background: #EFF5FB !important;
    border-color: #B9C8D9 !important;
}

html[data-theme="light"] #stats-container > div,
html[data-theme="light"] #leaderboard-container > div {
    background: #FFFFFF !important;
    border-color: #C3D0DF !important;
}

html[data-theme="light"] #next-up-badge {
    background: #DDF7EE !important;
    border-color: #84DCC2 !important;
    color: #047857 !important;
    box-shadow: 0 1px 2px rgba(15, 118, 110, 0.08) !important;
}

html[data-theme="light"] #next-up-badge span,
html[data-theme="light"] #next-up-badge strong {
    color: #047857 !important;
    opacity: 1 !important;
}

html[data-theme="light"] #schedule-adjustments .space-y-1 > div {
    background: #F9FCFF !important;
    border-color: #C8D6E5 !important;
    border-left-color: #9DB4CC !important;
}

html[data-theme="light"] #schedule-adjustments .schedule-adj-username + span {
    color: #26384F !important;
}

html[data-theme="light"] #on-leave-notes .space-y-2 > div,
html[data-theme="light"] #on-leave-notes .hidden > div {
    background: #F9FCFF !important;
    border-color: #C8D6E5 !important;
}

html[data-theme="light"] #on-leave-notes .space-y-2 > div.border-red-500,
html[data-theme="light"] #on-leave-notes .hidden > div.border-red-500 {
    background: #FFF5F7 !important;
    border-color: #F5B8C5 !important;
    border-left-color: #E11D48 !important;
}

/* =============================================================================
   20. MOBILE LIGHT MODE
   Mobile has a separate dark-first stylesheet. These overrides are scoped to
   light theme + mobile device only, and avoid layout/size changes.
   ============================================================================= */

html[data-theme="light"] body[data-device="mobile"] {
    background: #E7EEF6 !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] #app-container,
html[data-theme="light"] body[data-device="mobile"] main,
html[data-theme="light"] body[data-device="mobile"] .flex-grow.flex.flex-col.overflow-hidden {
    background: #E7EEF6 !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] header {
    background: #F8FBFE !important;
    border-color: #B9C8D9 !important;
    box-shadow: 0 1px 2px rgba(15, 29, 46, 0.08) !important;
}

html[data-theme="light"] body[data-device="mobile"] header button,
html[data-theme="light"] body[data-device="mobile"] header a {
    background: #FFFFFF !important;
    border-color: #CBD8E6 !important;
    color: #26384F !important;
}

html[data-theme="light"] body[data-device="mobile"] header a.bg-gradient-to-r,
html[data-theme="light"] body[data-device="mobile"] header button.bg-gradient-to-r,
html[data-theme="light"] body[data-device="mobile"] header a[href="clients.html"]:not(.header-account-menu-item),
html[data-theme="light"] body[data-device="mobile"] header a[href="guides.html"]:not(.header-account-menu-item),
html[data-theme="light"] body[data-device="mobile"] header a[href="training.html"]:not(.header-account-menu-item) {
    background: linear-gradient(180deg, #5B50F0 0%, #4738D1 100%) !important;
    border-color: #3B2FB3 !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] body[data-device="mobile"] #mobile-subtabs {
    background: #DCE7F2 !important;
    border-color: #B9C8D9 !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-subtab-btn {
    background: #F8FBFE !important;
    border-color: #C3D0DF !important;
    color: #405269 !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-subtab-btn.active {
    background: #FFFFFF !important;
    border-color: #5B8FB0 !important;
    color: #0B3A4A !important;
    box-shadow: inset 0 -2px 0 #0EA5E9, 0 1px 2px rgba(15, 29, 46, 0.08) !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-subtab-dot,
html[data-theme="light"] body[data-device="mobile"] .mobile-nav-dot {
    border-color: #F8FBFE !important;
}

html[data-theme="light"] body[data-device="mobile"] #tickets-filter-bar {
    background: #DCE7F2 !important;
    border-color: #B9C8D9 !important;
}

html[data-theme="light"] body[data-device="mobile"] #tickets-filter-bar input,
html[data-theme="light"] body[data-device="mobile"] #tickets-filter-bar select,
html[data-theme="light"] body[data-device="mobile"] #search-input,
html[data-theme="light"] body[data-device="mobile"] #filter-user,
html[data-theme="light"] body[data-device="mobile"] #filter-source,
html[data-theme="light"] body[data-device="mobile"] #filter-priority,
html[data-theme="light"] body[data-device="mobile"] #filter-tag {
    background: #FFFFFF !important;
    border-color: #AFC0D2 !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] #tickets-filter-bar input::placeholder {
    color: #6B7D93 !important;
}

html[data-theme="light"] body[data-device="mobile"] .ticket-card,
html[data-theme="light"] body[data-device="mobile"] .ds-ticket-card-v2 {
    background: #FBFDFF !important;
    border-color: #B9C8D9 !important;
    color: #0F1D2E !important;
    box-shadow: 0 1px 2px rgba(15, 29, 46, 0.06), 0 8px 18px rgba(15, 29, 46, 0.035) !important;
}

html[data-theme="light"] body[data-device="mobile"] .ticket-card p,
html[data-theme="light"] body[data-device="mobile"] .ticket-card .text-white,
html[data-theme="light"] body[data-device="mobile"] .ticket-header p.text-white.text-sm {
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] .ticket-card .text-gray-300,
html[data-theme="light"] body[data-device="mobile"] .ticket-card .text-gray-400,
html[data-theme="light"] body[data-device="mobile"] .ticket-card .text-gray-500,
html[data-theme="light"] body[data-device="mobile"] .ticket-header .text-xs {
    color: #52657A !important;
}

html[data-theme="light"] body[data-device="mobile"] .ticket-card span[class*="bg-gray-700"],
html[data-theme="light"] body[data-device="mobile"] .ticket-card .bg-gray-700,
html[data-theme="light"] body[data-device="mobile"] .ticket-card .bg-gray-800 {
    background: #EAF1F8 !important;
    border-color: #C3D0DF !important;
    color: #34465D !important;
}

html[data-theme="light"] body[data-device="mobile"] .ticket-card > .mt-2.pt-3.border-t,
html[data-theme="light"] body[data-device="mobile"] .ticket-card > .mt-3.pt-3.border-t,
html[data-theme="light"] body[data-device="mobile"] .ticket-body {
    border-color: #D3DFEB !important;
}

html[data-theme="light"] body[data-device="mobile"] .ticket-body .note-container,
html[data-theme="light"] body[data-device="mobile"] .ticket-body .ql-toolbar,
html[data-theme="light"] body[data-device="mobile"] .ticket-body .ql-container {
    background: #FFFFFF !important;
    border-color: #C3D0DF !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] #mobile-bottom-nav {
    background: #F8FBFE !important;
    border-color: #B9C8D9 !important;
    box-shadow: 0 -4px 18px rgba(15, 29, 46, 0.14) !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-nav-tab {
    color: #52657A !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-nav-tab.active {
    color: #4F46E5 !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-nav-tab.active::before {
    background: #4F46E5 !important;
}

html[data-theme="light"] body[data-device="mobile"] #mobile-fab,
html[data-theme="light"] body[data-device="mobile"] .mobile-create-btn {
    background: linear-gradient(180deg, #5B50F0 0%, #4738D1 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(79, 70, 229, 0.25) !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-sheet {
    background: #F8FBFE !important;
    border-color: #B9C8D9 !important;
    color: #0F1D2E !important;
    box-shadow: 0 -10px 34px rgba(15, 29, 46, 0.18) !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-sheet-backdrop {
    background: rgba(15, 29, 46, 0.32) !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-sheet-handle {
    background: #AFC0D2 !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-sheet-header {
    border-color: #D5E0EB !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-sheet-header h3 {
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-sheet-section-title {
    color: #52657A !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-sheet-close {
    background: #EAF1F8 !important;
    border: 1px solid #CBD8E6 !important;
    color: #405269 !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-field-label {
    color: #52657A !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-input,
html[data-theme="light"] body[data-device="mobile"] .mobile-select,
html[data-theme="light"] body[data-device="mobile"] .mobile-sheet input,
html[data-theme="light"] body[data-device="mobile"] .mobile-sheet select,
html[data-theme="light"] body[data-device="mobile"] .mobile-sheet textarea {
    background: #FFFFFF !important;
    border-color: #AFC0D2 !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-input::placeholder,
html[data-theme="light"] body[data-device="mobile"] .mobile-sheet textarea::placeholder {
    color: #738196 !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-source-btn,
html[data-theme="light"] body[data-device="mobile"] .mobile-tag-btn {
    background: #FFFFFF !important;
    border-color: #B9C8D9 !important;
    color: #34465D !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-source-btn.selected,
html[data-theme="light"] body[data-device="mobile"] .mobile-tag-btn.selected {
    background: #E8E9FF !important;
    border-color: #8B91F5 !important;
    color: #3730A3 !important;
}

html[data-theme="light"] body[data-device="mobile"] #mobile-next-up-badge {
    background: #DDF7EE !important;
    border-color: #84DCC2 !important;
    color: #047857 !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-more-item,
html[data-theme="light"] body[data-device="mobile"] .mobile-shift-btn {
    background: #FFFFFF !important;
    border: 1px solid #CBD8E6 !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-more-section-title {
    color: #64748B !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-more-item svg,
html[data-theme="light"] body[data-device="mobile"] .mobile-shift-btn svg {
    color: #4F46E5 !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-more-item.danger,
html[data-theme="light"] body[data-device="mobile"] .mobile-shift-btn.shift-end {
    background: #FFF1F2 !important;
    border-color: #FDA4AF !important;
    color: #BE123C !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-more-item.danger svg,
html[data-theme="light"] body[data-device="mobile"] .mobile-shift-btn.shift-end svg {
    color: #BE123C !important;
}

html[data-theme="light"] body[data-device="mobile"] #mobile-leaderboard-clone > div,
html[data-theme="light"] body[data-device="mobile"] #mobile-team-stats-clone > div,
html[data-theme="light"] body[data-device="mobile"] #mobile-team-clone > div,
html[data-theme="light"] body[data-device="mobile"] #mobile-deployment-clone > div,
html[data-theme="light"] body[data-device="mobile"] #mobile-deployment-clone > p,
html[data-theme="light"] body[data-device="mobile"] #mobile-badges-section > div {
    background: #FFFFFF !important;
    border-color: #C3D0DF !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] #mobile-leaderboard-clone .bg-black\/30,
html[data-theme="light"] body[data-device="mobile"] #mobile-team-stats-clone .bg-black\/30 {
    background: #EAF1F8 !important;
    border-color: #B9C8D9 !important;
    color: #20324A !important;
}

html[data-theme="light"] body[data-device="mobile"] #knowledge-base-view .bg-gray-800\/40,
html[data-theme="light"] body[data-device="mobile"] #kb-entries-container .p-4,
html[data-theme="light"] body[data-device="mobile"] #dashboard-view .glassmorphism {
    background: #FBFDFF !important;
    border-color: #B9C8D9 !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] #kb-search-input,
html[data-theme="light"] body[data-device="mobile"] #kb-creator-filter,
html[data-theme="light"] body[data-device="mobile"] #kb-sort-select {
    background: #FFFFFF !important;
    border-color: #AFC0D2 !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] #notification-center {
    background: #F8FBFE !important;
    border-color: #AFC0D2 !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] #notification-center .notif-item,
html[data-theme="light"] body[data-device="mobile"] #notification-panel .notification,
html[data-theme="light"] body[data-device="mobile"] .status-notification-toast,
html[data-theme="light"] body[data-device="mobile"] [id^="reminder-"] > div {
    background: #FFFFFF !important;
    border-color: #C3D0DF !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] #notification-center .text-white,
html[data-theme="light"] body[data-device="mobile"] #notification-panel .font-bold,
html[data-theme="light"] body[data-device="mobile"] .status-notification-toast .font-semibold,
html[data-theme="light"] body[data-device="mobile"] [id^="reminder-"] .text-lg {
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] #notification-center .text-gray-400,
html[data-theme="light"] body[data-device="mobile"] #notification-panel .text-sm,
html[data-theme="light"] body[data-device="mobile"] .status-notification-toast .text-xs {
    color: #52657A !important;
}

html[data-theme="light"] body[data-device="mobile"] .modal > div,
html[data-theme="light"] body[data-device="mobile"] #schedule-modal > div,
html[data-theme="light"] body[data-device="mobile"] #default-schedule-modal > div,
html[data-theme="light"] body[data-device="mobile"] #cell-edit-popup {
    background: #F8FBFE !important;
    border-color: #B9C8D9 !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] .modal h2,
html[data-theme="light"] body[data-device="mobile"] #schedule-modal h2,
html[data-theme="light"] body[data-device="mobile"] #default-schedule-modal h2 {
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] #schedule-week-label,
html[data-theme="light"] body[data-device="mobile"] .mobile-sched-day-label,
html[data-theme="light"] body[data-device="mobile"] .mobile-sched-nav-btn,
html[data-theme="light"] body[data-device="mobile"] .mobile-sched-toggle {
    background: #FFFFFF !important;
    border-color: #B9C8D9 !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-sched-toggle-btn {
    color: #52657A !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-sched-toggle-btn.active {
    background: #E8E9FF !important;
    color: #3730A3 !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-sched-card,
html[data-theme="light"] body[data-device="mobile"] .schedule-week-grid td,
html[data-theme="light"] body[data-device="mobile"] .default-schedule-grid td.default-grid-cell {
    background: #FFFFFF !important;
    border-color: #C3D0DF !important;
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-card-name,
html[data-theme="light"] body[data-device="mobile"] .sched-time-start,
html[data-theme="light"] body[data-device="mobile"] .sched-time-end,
html[data-theme="light"] body[data-device="mobile"] .def-cell-status {
    color: #0F1D2E !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-card-status,
html[data-theme="light"] body[data-device="mobile"] .mobile-sched-weekday,
html[data-theme="light"] body[data-device="mobile"] .def-cell-times,
html[data-theme="light"] body[data-device="mobile"] .sched-time-sep {
    color: #52657A !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-card-working,
html[data-theme="light"] body[data-device="mobile"] .sched-cell-working {
    background: #F0FDF4 !important;
    border-left-color: #16A34A !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-card-off,
html[data-theme="light"] body[data-device="mobile"] .sched-cell-off {
    background: #FFF1F2 !important;
    border-left-color: #E11D48 !important;
}

html[data-theme="light"] body[data-device="mobile"] .mobile-card-pending,
html[data-theme="light"] body[data-device="mobile"] .mobile-card-late {
    background: #FFFBEB !important;
    border-left-color: #D97706 !important;
}

/* ----------------------------------------------------------------------- */
/* Hall of Fame — light-mode readability                                   */
/* ----------------------------------------------------------------------- */
/* Default chip styling (js/main.js renderLeaderboardHistory) uses         */
/* text-yellow-300 / text-amber-300 / text-white — fine on the dark        */
/* glassmorphism panel but invisible on a light card. Re-color the        */
/* winner chip's text and the "Week of" date so the data is readable.    */

html[data-theme="light"] .hall-of-fame-week {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

html[data-theme="light"] .hall-of-fame-week > p {
    /* "Week of MM/DD/YYYY" header — was text-amber-300, near-white in light */
    color: #B45309 !important; /* amber-700 */
}

html[data-theme="light"] .hall-of-fame-chip {
    /* Non-winner chip: gray pill with darker text */
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

html[data-theme="light"] .hall-of-fame-chip span {
    color: #475569 !important; /* slate-600 — username + dot + score */
}

html[data-theme="light"] .hall-of-fame-chip.is-winner {
    /* Winner chip keeps the gold gradient identity, but text is dark */
    background: #FEF3C7 !important; /* amber-100 */
    border-color: #F59E0B !important; /* amber-500 */
}

html[data-theme="light"] .hall-of-fame-chip.is-winner span {
    color: #78350F !important; /* amber-900 — readable on amber-100 */
}

/* ----------------------------------------------------------------------- */
/* Leader Workspace identity strip (Phase 6.10)                            */
/* ----------------------------------------------------------------------- */
/* A 4 px violet/purple strip under the workspace header so team leaders   */
/* always know the context they are in (parallel to the amber strip the    */
/* admin panel uses). Color choice: violet-500 in dark, violet-600 in     */
/* light — distinct from indigo (primary actions) and amber (admin).      */

.leader-workspace-header {
    position: relative;
    padding-bottom: 1rem;
}

.leader-workspace-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, #8B5CF6 0%, #A78BFA 50%, #C4B5FD 100%);
    border-radius: 2px;
}

html[data-theme="light"] .leader-workspace-header::after {
    background: linear-gradient(90deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%);
}

.leader-workspace-header .leader-workspace-eyebrow {
    color: #C4B5FD; /* violet-300 — readable on the dark gradient */
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html[data-theme="light"] .leader-workspace-header .leader-workspace-eyebrow {
    color: #7C3AED; /* violet-600 — readable on white */
}

/* ----------------------------------------------------------------------- */
/* Leader Workspace tabs (Phase 6.10 part 3)                               */
/* ----------------------------------------------------------------------- */
/* Horizontal tab strip below the workspace header. On phone the strip is */
/* scrollable so 6 tabs fit without wrapping; on desktop the tabs sit     */
/* inline in the natural flow.                                            */

.leader-workspace-tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
    padding-bottom: 2px; /* leaves room for the active underline */
    border-bottom: 1px solid rgba(75, 85, 99, 0.4); /* gray-600/40 */
    margin-bottom: 1rem;
}

.leader-workspace-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.leader-workspace-tabs button {
    flex-shrink: 0;
    padding: 0.5rem 0.875rem;
    border: 0;
    background: transparent;
    color: #9CA3AF; /* gray-400 */
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.leader-workspace-tabs button:hover {
    color: #E5E7EB; /* gray-200 */
}

.leader-workspace-tabs button[aria-selected="true"] {
    color: #C4B5FD; /* violet-300 */
    border-bottom-color: #8B5CF6; /* violet-500 */
}

html[data-theme="light"] .leader-workspace-tabs {
    border-bottom-color: rgba(209, 213, 219, 0.8); /* gray-300 */
}

html[data-theme="light"] .leader-workspace-tabs button {
    color: #6B7280; /* gray-500 */
}

html[data-theme="light"] .leader-workspace-tabs button:hover {
    color: #1F2937; /* gray-800 */
}

html[data-theme="light"] .leader-workspace-tabs button[aria-selected="true"] {
    color: #7C3AED; /* violet-600 */
    border-bottom-color: #7C3AED;
}

/* ----------------------------------------------------------------------- */
/* Leader Workspace — mobile pass (Phase 6.8 Slice 5)                      */
/* ----------------------------------------------------------------------- */
/* 360 px and 414 px breakpoints.  All rules use max-width so they apply   */
/* on small viewports only and don't interfere with the tablet/desktop      */
/* layouts above.                                                           */

@media (max-width: 479px) {
    /* Header: shrink title and let action buttons wrap below title */
    .leader-workspace-header {
        padding: 0.875rem 0.875rem 1rem;
    }

    .leader-workspace-header h2 {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    /* Stat grid inside Today tab: keep 2-col on very small screens */
    .leader-workspace-header + nav ~ div .grid.grid-cols-2 {
        /* already 2-col — no override needed */
    }

    /* Ticket member workload pills: 4-col is too tight at 360 px — go 2-col */
    .lw-workload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Training stat row: 3-col is tight at 360 px — stack to 2+1 via auto */
    .lw-training-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Leader Workspace section cards: reduce internal padding */
    #team-management-content section.rounded-lg {
        padding: 0.75rem;
    }

    /* Tab buttons: tighten padding so all 6 tabs are reachable */
    .leader-workspace-tabs button {
        padding: 0.4rem 0.65rem;
        font-size: 0.8125rem;
    }
}

/* ----------------------------------------------------------------------- */
/* Leader Workspace skeleton loading placeholders (Phase 6.10)              */
/* ----------------------------------------------------------------------- */
/* Animated shimmer blocks that match the final card shapes so the first    */
/* paint doesn't feel like a blank page.                                    */

@keyframes lw-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.lw-skel {
    border-radius: 6px;
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
    background-size: 800px 100%;
    animation: lw-shimmer 1.4s ease-in-out infinite;
}

html[data-theme="light"] .lw-skel {
    background: linear-gradient(90deg, #e5e7eb 25%, #d1d5db 50%, #e5e7eb 75%);
    background-size: 800px 100%;
}

.lw-skel--title  { height: 1.25rem; width: 60%; }
.lw-skel--line   { height: 0.875rem; margin-top: 0.5rem; }
.lw-skel--tabs   { height: 2.5rem; border-radius: 8px; }
.lw-skel--stat   { height: 5rem; border-radius: 8px; }
.lw-skel--row    { height: 3rem; border-radius: 8px; }

/* Dashboard header action cluster */
.header-action-btn,
.header-account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    color: #DDE7FF;
    background: rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.header-action-btn:hover,
.header-action-btn:focus-visible,
.header-account-trigger:hover,
.header-account-trigger:focus-visible,
.header-account-trigger[aria-expanded="true"] {
    color: #FFFFFF;
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(129, 140, 248, 0.42);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    outline: 2px solid rgba(129, 140, 248, 0.22);
    outline-offset: 2px;
    transform: translateY(-1px);
}

.header-action-icon,
#ds-theme-icon svg,
.header-account-chevron {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.header-action-label {
    margin-left: 5px;
}

.header-account-menu {
    position: relative;
    flex: 0 0 auto;
}

.header-account-trigger {
    gap: 7px;
    padding: 0 8px 0 6px;
}

.header-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    overflow: hidden;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    background: linear-gradient(135deg, #4F46E5, #14B8A6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}

.header-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-account-name {
    max-width: 92px;
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 80;
    display: grid;
    gap: 4px;
    width: min(248px, calc(100vw - 18px));
    padding: 10px;
    color: #F8FAFC;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(18px);
}

.header-account-menu-panel[hidden],
.header-account-menu-section[hidden],
.header-account-menu-divider[hidden] {
    display: none !important;
}

.header-action-btn.hidden,
.header-account-menu-item.hidden {
    display: none !important;
}

.header-account-summary {
    display: grid;
    gap: 2px;
    padding: 4px 8px 8px;
}

.header-account-summary span {
    overflow: hidden;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account-summary small {
    overflow: hidden;
    color: #A8B1BD;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account-menu-section {
    display: grid;
    gap: 4px;
}

.header-account-menu-divider {
    height: 1px;
    margin: 5px 2px;
    background: rgba(148, 163, 184, 0.18);
}

.header-account-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    color: #E5E7EB;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 11px;
}

.header-account-menu-item:hover,
.header-account-menu-item:focus-visible {
    color: #FFFFFF;
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(129, 140, 248, 0.24);
    outline: 2px solid rgba(129, 140, 248, 0.22);
    outline-offset: 2px;
}

.header-account-menu-item--danger {
    color: #FCA5A5;
}

.header-account-menu-item--danger:hover,
.header-account-menu-item--danger:focus-visible {
    color: #FEE2E2;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(248, 113, 113, 0.28);
}

#notif-dot,
#schedule-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    background: #EF4444;
    border: 2px solid #0F172A;
    border-radius: 999px;
}

#notif-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    background: #EF4444;
    border: 2px solid #0F172A;
    border-radius: 999px;
}

#notif-count-badge:not(.hidden) {
    display: inline-flex;
}

html[data-theme="light"] .header-action-btn,
html[data-theme="light"] .header-account-trigger {
    color: #334155;
    background: #FFFFFF;
    border-color: #CBD5E1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .header-action-btn:hover,
html[data-theme="light"] .header-action-btn:focus-visible,
html[data-theme="light"] .header-account-trigger:hover,
html[data-theme="light"] .header-account-trigger:focus-visible,
html[data-theme="light"] .header-account-trigger[aria-expanded="true"] {
    color: #0F172A;
    background: #F1F5F9;
    border-color: #A5B4FC;
}

html[data-theme="light"] .header-account-menu-panel {
    color: #0F172A;
    background: rgba(255, 255, 255, 0.98);
    border-color: #D1D9E2;
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .header-account-summary span,
html[data-theme="light"] .header-account-menu-item {
    color: #0F172A;
}

html[data-theme="light"] .header-account-summary small {
    color: #64748B;
}

html[data-theme="light"] .header-account-menu-item:hover,
html[data-theme="light"] .header-account-menu-item:focus-visible {
    color: #0F172A;
    background: #EEF2FF;
    border-color: #C7D2FE;
}

html[data-theme="light"] .header-account-menu-item--danger {
    color: #B91C1C;
}

html[data-theme="light"] .header-account-menu-item--danger:hover,
html[data-theme="light"] .header-account-menu-item--danger:focus-visible {
    color: #991B1B;
    background: #FEF2F2;
    border-color: #FECACA;
}

html[data-theme="light"] #notif-dot,
html[data-theme="light"] #schedule-dot,
html[data-theme="light"] #notif-count-badge {
    border-color: #FFFFFF;
}

html[data-theme="light"] #header-actions-cluster #notif-bell-btn,
html[data-theme="light"] #header-actions-cluster #schedule-btn,
html[data-theme="light"] #header-actions-cluster #ds-theme-toggle {
    color: #334155 !important;
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] #header-actions-cluster #notif-bell-btn:hover,
html[data-theme="light"] #header-actions-cluster #schedule-btn:hover,
html[data-theme="light"] #header-actions-cluster #ds-theme-toggle:hover {
    color: #0F172A !important;
    background: #F1F5F9 !important;
    border-color: #A5B4FC !important;
}

html[data-theme="light"] #app-container > header .header-account-menu-panel .header-account-menu-item {
    color: #0F172A !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="light"] #app-container > header .header-account-menu-panel .header-account-menu-item:hover,
html[data-theme="light"] #app-container > header .header-account-menu-panel .header-account-menu-item:focus-visible {
    color: #0F172A !important;
    background: #EEF2FF !important;
    border-color: #C7D2FE !important;
}

html[data-theme="light"] #app-container > header .header-account-menu-panel .header-account-menu-item--danger {
    color: #B91C1C !important;
}

html[data-theme="light"] #app-container > header .header-account-menu-panel .header-account-menu-item--danger:hover,
html[data-theme="light"] #app-container > header .header-account-menu-panel .header-account-menu-item--danger:focus-visible {
    color: #991B1B !important;
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
}


/* ═══════════════════════════════════════════════════════════════
   AUDIT — Section 50. LOGIN OVERLAY + MFA + "More Info" MODAL
   The login page shipped with its own scoped <style> block in
   index.html that only painted a dark theme. These overrides apply
   when the saved theme is light so the login screen matches the
   rest of the app on first load (no "always dark login -> light
   dashboard" jump after sign-in).
   =============================================================== */

/* Page background — replace the dark navy radial with a near-white
   surface plus very subtle brand-tinted gradients. Keeps the depth
   of the original without the heavy contrast. */
html[data-theme="light"] .login-bg {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(99, 102, 241, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(139, 92, 246, 0.07) 0%, transparent 50%),
        #F8FAFC !important;
}

/* Floating orbs — much lighter so they read as soft accent washes
   on a light surface, not as dark blobs. */
html[data-theme="light"] .login-orb-1 { background: rgba(99, 102, 241, 0.06) !important; }
html[data-theme="light"] .login-orb-2 { background: rgba(139, 92, 246, 0.05) !important; }
html[data-theme="light"] .login-orb-3 { background: rgba(59, 130, 246, 0.04) !important; }

/* Card — white surface, neutral border, soft elevation. */
html[data-theme="light"] .login-card {
    background: #FFFFFF !important;
    border: 1px solid #D1D9E2 !important;
    backdrop-filter: none !important;
    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.10),
        0 1px 3px rgba(15, 23, 42, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
}

/* The login logo PNG (assets/icons/nobackground.png) has the "Team"
   word rendered in WHITE text on a transparent background. On the dark
   login card it showed via mix-blend-mode: screen against the dark
   card. Removing the blend mode for light mode (the first attempt)
   left the white "Team" text invisible on the white card — only the
   shield icon and "Ops" rendered, because those have actual colours
   in the PNG. The fix is to give the IMG itself a dark gradient
   backdrop: the img's background-color paints behind the transparent
   pixels of the PNG so the white text reads against it. We keep
   mix-blend-mode disabled because the dark backdrop on the IMG
   wraps the PNG content directly — blending is not needed. */
html[data-theme="light"] .login-logo {
    mix-blend-mode: normal !important;
    filter: drop-shadow(0 4px 16px rgba(99, 102, 241, 0.30)) !important;
    background: linear-gradient(135deg, #0d0d1f 0%, #1a1a3e 100%) !important;
    padding: 12px 18px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12) !important;
}

/* The "More Info" modal has a smaller brand logo (.login-more-logo)
   with the same white-text-on-transparent issue. Apply the same
   fix at a smaller scale. */
html[data-theme="light"] .login-more-logo {
    background: linear-gradient(135deg, #0d0d1f 0%, #1a1a3e 100%) !important;
    padding: 6px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .login-tagline { color: #64748B !important; }
html[data-theme="light"] .login-divider { background: #E2E8F0 !important; }
html[data-theme="light"] .login-welcome { color: #0F172A !important; }

/* Form inputs — same pattern as the rest of the design system. */
html[data-theme="light"] .login-input {
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}
html[data-theme="light"] .login-input::placeholder { color: #94A3B8 !important; }
html[data-theme="light"] .login-input:focus {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

html[data-theme="light"] .login-password-toggle { color: #64748B !important; }
html[data-theme="light"] .login-password-toggle:hover,
html[data-theme="light"] .login-password-toggle:focus-visible {
    color: #0F172A !important;
    background: rgba(79, 70, 229, 0.08) !important;
}

html[data-theme="light"] .login-caps-hint { color: #B45309 !important; }

/* Submit button — keep indigo gradient (it reads well on white too),
   only soften the box-shadow. */
html[data-theme="light"] .login-submit-btn {
    box-shadow:
        0 4px 12px rgba(79, 70, 229, 0.25),
        0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

/* Footer / "More Info" link. */
html[data-theme="light"] .login-footer { color: #64748B !important; }
html[data-theme="light"] .login-sep { color: #CBD5E1 !important; }
html[data-theme="light"] .login-more-link { color: #4F46E5 !important; }
html[data-theme="light"] .login-more-link:hover { color: #4338CA !important; }

/* MFA step uses .login-input for the code field (already covered).
   The surrounding decoration needs its own light-mode color. */
html[data-theme="light"] .mfa-shield-icon { color: #4F46E5 !important; }
html[data-theme="light"] .mfa-title { color: #0F172A !important; }
html[data-theme="light"] .mfa-sub { color: #475569 !important; }
html[data-theme="light"] .mfa-back-btn { color: #64748B !important; }
html[data-theme="light"] .mfa-back-btn:hover { color: #0F172A !important; }

/* The "More Info" modal — uses its own .login-more-* classes, not
   the generic .modal pattern, so we override piece-by-piece. */
html[data-theme="light"] #login-more-modal {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(6px) !important;
}

html[data-theme="light"] .login-more-card {
    background: #FFFFFF !important;
    border: 1px solid #D1D9E2 !important;
    backdrop-filter: none !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
    color: #0F172A !important;
}

html[data-theme="light"] .login-more-close {
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    color: #475569 !important;
}
html[data-theme="light"] .login-more-close:hover {
    background: #E2E8F0 !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
}

html[data-theme="light"] .login-more-appname { color: #0F172A !important; }
html[data-theme="light"] .login-more-version { color: #4F46E5 !important; }
html[data-theme="light"] .login-more-section-title { color: #4F46E5 !important; }
html[data-theme="light"] .login-more-text { color: #475569 !important; }

html[data-theme="light"] .login-more-pill {
    background: rgba(79, 70, 229, 0.08) !important;
    border: 1px solid rgba(79, 70, 229, 0.20) !important;
    color: #4338CA !important;
}

html[data-theme="light"] .login-more-divider { background: #E2E8F0 !important; }

html[data-theme="light"] .login-more-contact-item {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
}
html[data-theme="light"] .login-more-contact-label { color: #64748B !important; }
html[data-theme="light"] .login-more-contact-value { color: #0F172A !important; }
html[data-theme="light"] .login-more-email { color: #4F46E5 !important; }
html[data-theme="light"] .login-more-email:hover { color: #4338CA !important; }


/* ═══════════════════════════════════════════════════════════════
   AUDIT — Section 51. DASHBOARD POLISH (light mode)
   Spot fixes for surfaces the existing light-mode block did not
   reach. The main .modal/.glassmorphism rules already handle most
   dashboard popups, so this section targets the remaining bespoke
   surfaces.
   =============================================================== */

/* Loading overlay — when the app shows "Loading your workspace..."
   the user should see a white-tinted scrim, not the dark navy one.
   Spinner border stays indigo so the brand colour reads. */
html[data-theme="light"] #loading-overlay {
    background: rgba(248, 250, 252, 0.92) !important;
    backdrop-filter: blur(8px) !important;
}
html[data-theme="light"] #loading-overlay p { color: #475569 !important; }
html[data-theme="light"] #loading-overlay .loading-spinner {
    border-color: rgba(79, 70, 229, 0.20) !important;
    border-top-color: #4F46E5 !important;
}

/* Status notification toast stack (top-right under the header).
   The toasts themselves use Tailwind colour utilities for state
   (bg-green-600, bg-red-600 etc.) which are already covered by the
   section-9 button overrides. This rule just guards against any
   inherited backdrop-filter blur over a light page background. */
html[data-theme="light"] #status-notifications-container .status-notification-toast {
    backdrop-filter: none !important;
}

/* Notification slide-in toasts inserted into #notification-panel
   (fixed top-right). Same logic as the status stack above. */
html[data-theme="light"] #notification-panel > div {
    background: #FFFFFF !important;
    border: 1px solid #D1D9E2 !important;
    color: #0F172A !important;
    backdrop-filter: none !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] #notification-panel .text-white { color: #0F172A !important; }
html[data-theme="light"] #notification-panel .text-white\/80,
html[data-theme="light"] #notification-panel .text-white\/90 { color: #334155 !important; }

/* The persistent "Dismiss All" pill above the toast stack reads
   black-on-black in dark; needs a quiet light treatment. */
html[data-theme="light"] #dismiss-all-btn button {
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
}
html[data-theme="light"] #dismiss-all-btn button:hover {
    background: #E2E8F0 !important;
    color: #0F172A !important;
}

/* Close-ticket reason modal — the radio rows use inline border /
   hover classes that don't fall under .modal text overrides. */
html[data-theme="light"] #close-reason-modal label {
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
html[data-theme="light"] #close-reason-modal label:hover {
    background: #F1F5F9 !important;
}
html[data-theme="light"] #close-reason-modal label .text-white { color: #0F172A !important; }
html[data-theme="light"] #close-reason-modal .close-reason-popover-panel {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
    color: #0F172A !important;
}
html[data-theme="light"] #close-reason-modal .close-reason-popover-arrow {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
}
html[data-theme="light"] #close-reason-modal .close-reason-header h2,
html[data-theme="light"] #close-reason-modal .close-reason-option span,
html[data-theme="light"] #close-reason-modal .close-reason-other label {
    color: #0F172A !important;
}
html[data-theme="light"] #close-reason-modal .close-reason-icon-btn,
html[data-theme="light"] #close-reason-modal .close-reason-secondary-btn {
    background: #E2E8F0 !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}
html[data-theme="light"] #close-reason-modal .close-reason-icon-btn:hover,
html[data-theme="light"] #close-reason-modal .close-reason-secondary-btn:hover {
    background: #CBD5E1 !important;
    color: #0F172A !important;
}
html[data-theme="light"] #close-reason-modal .close-reason-option {
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}
html[data-theme="light"] #close-reason-modal .close-reason-option:hover,
html[data-theme="light"] #close-reason-modal .close-reason-option:has(input:checked) {
    background: #ECFDF5 !important;
    border-color: #86EFAC !important;
}
html[data-theme="light"] #close-reason-modal .close-reason-other textarea {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

/* Completed-history filter buttons (deployments/meetings modal).
   They use a custom border-+-background combination that the
   generic .modal text-white rule won't fully cover. */
html[data-theme="light"] #completed-history-filters button {
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}
html[data-theme="light"] #completed-history-filters button:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
}
html[data-theme="light"] #completed-history-filters button .text-gray-400 { color: #64748B !important; }

/* Meeting/deployment completion modals use coloured kicker text
   ("Meeting Completion", "Deployment Review") that sits on the
   white card; the existing .text-cyan-300 / .text-teal-300 utility
   classes are still readable on white but a touch too pale. */
html[data-theme="light"] .modal .text-cyan-300,
html[data-theme="light"] .modal .text-cyan-200,
html[data-theme="light"] .modal .text-teal-300,
html[data-theme="light"] .modal .text-teal-200,
html[data-theme="light"] .modal .text-purple-300,
html[data-theme="light"] .modal .text-purple-200,
html[data-theme="light"] .modal .text-indigo-300,
html[data-theme="light"] .modal .text-indigo-200,
html[data-theme="light"] .modal .text-amber-300,
html[data-theme="light"] .modal .text-amber-200 {
    /* Pull the kicker / accent text to a saturated brand mid-tone
       so it stays visible on a white card. */
    filter: brightness(0.55) saturate(1.4) !important;
}

/* Deployment review modal tabs — the active tab uses an inline
   underline + tinted background that defaults to dark colours. */
html[data-theme="light"] .deployment-review-tab {
    color: #475569 !important;
}
html[data-theme="light"] .deployment-review-tab:hover {
    color: #0F172A !important;
    background: #F1F5F9 !important;
}
html[data-theme="light"] .deployment-review-tab.deployment-review-tab-active {
    color: #4F46E5 !important;
    background: #EEF2FF !important;
}

/* Activity-log mini cards inside the schedule modal — these are
   built by JS so they don't pick up any .glassmorphism light
   overrides automatically. */
html[data-theme="light"] #overridden-dates-info {
    background: #EEF2FF !important;
    border: 1px solid #C7D2FE !important;
    color: #4338CA !important;
    backdrop-filter: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   AUDIT — Section 52. MOBILE LIGHT MODE
   css/mobile.css originally contained zero light-mode rules — every
   mobile-only surface (the subtab strip, the bottom sheets, the
   creation form fields, mobile ticket cards' bottom action rows)
   shipped with hardcoded dark colours. This block scopes light-mode
   overrides to body[data-device="mobile"] so the dashboard's mobile
   layout matches the rest of the design system when light theme is
   active. Selectors mirror the structure used in css/mobile.css.
   =============================================================== */

/* Page background — replace the dark navy gradient on the body with
   the same near-white canvas used elsewhere in the design system. */
html[data-theme="light"] body[data-device="mobile"] {
    background: linear-gradient(to bottom right, #F8FAFC, #FFFFFF, #F8FAFC) !important;
    color: #0F172A !important;
}

/* Mobile sub-tab strip (Active / Done / Follow / KB / Dash). */
html[data-theme="light"] #mobile-subtabs {
    background: #FFFFFF !important;
    border-bottom: 1px solid #D1D9E2 !important;
}
html[data-theme="light"] .mobile-subtab-btn {
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    color: #475569 !important;
}
html[data-theme="light"] .mobile-subtab-btn.active {
    background: #EEF2FF !important;
    border-color: #C7D2FE !important;
    color: #4338CA !important;
}

/* Notification dots on the subtab strip — their dark-mode border was
   the page background colour so the dot read as a stamped pill.
   Mirror that effect against the new white tab strip. */
html[data-theme="light"] .mobile-subtab-dot,
html[data-theme="light"] .mobile-nav-dot { border-color: #FFFFFF !important; }

/* Bottom sheet (Create / Scores / Team / Deployments) — the surface
   on which most of the mobile interaction happens. */
html[data-theme="light"] .mobile-sheet-backdrop {
    background: rgba(15, 23, 42, 0.35) !important;
}
html[data-theme="light"] .mobile-sheet {
    background: linear-gradient(to bottom, #FFFFFF, #F8FAFC) !important;
    border-top: 1px solid #D1D9E2 !important;
    box-shadow: 0 -10px 36px rgba(15, 23, 42, 0.15) !important;
}
html[data-theme="light"] .mobile-sheet-handle {
    background: #CBD5E1 !important;
}
html[data-theme="light"] .mobile-sheet-header {
    border-bottom: 1px solid #E2E8F0 !important;
}
html[data-theme="light"] .mobile-sheet-header h3 {
    color: #0F172A !important;
}
html[data-theme="light"] .mobile-sheet-close {
    background: #F1F5F9 !important;
    color: #475569 !important;
}
html[data-theme="light"] .mobile-sheet-close:active {
    background: #E2E8F0 !important;
    color: #0F172A !important;
}
html[data-theme="light"] .mobile-sheet-section-title {
    color: #475569 !important;
}

/* Create-ticket sheet form controls. */
html[data-theme="light"] .mobile-source-btn {
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
}
html[data-theme="light"] .mobile-source-btn.selected {
    background: #EEF2FF !important;
    border-color: #4F46E5 !important;
    color: #4338CA !important;
}
html[data-theme="light"] .mobile-field-label {
    color: #475569 !important;
}
html[data-theme="light"] .mobile-input {
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}
html[data-theme="light"] .mobile-input::placeholder { color: #94A3B8 !important; }
html[data-theme="light"] .mobile-input:focus {
    border-color: #4F46E5 !important;
}

/* Mobile source badges shown on each ticket card (m-src-* tokens). */
html[data-theme="light"] .m-src-o {
    background: rgba(59, 130, 246, 0.10) !important;
    color: #1D4ED8 !important;
    border-color: rgba(59, 130, 246, 0.30) !important;
}
html[data-theme="light"] .m-src-t {
    background: rgba(168, 85, 247, 0.10) !important;
    color: #6D28D9 !important;
    border-color: rgba(168, 85, 247, 0.30) !important;
}

/* Mobile filter bar (compact horizontal scroll under the header). */
html[data-theme="light"] [data-device="mobile"] #tickets-filter-bar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #D1D9E2 !important;
}
html[data-theme="light"] [data-device="mobile"] #tickets-filter-bar input,
html[data-theme="light"] [data-device="mobile"] #tickets-filter-bar select {
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}
html[data-theme="light"] [data-device="mobile"] #tickets-filter-bar .relative.flex-1 svg {
    color: #64748B !important;
}

/* Header on mobile — match the dashboard header treatment. */
html[data-theme="light"] [data-device="mobile"] header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #D1D9E2 !important;
    backdrop-filter: none !important;
}

/* Mobile ticket-card bottom action row — Tailwind gives it
   border-top using a translucent-white token that disappears on
   light surfaces. */
html[data-theme="light"] [data-device="mobile"] .ticket-card > .mt-2.pt-3.border-t,
html[data-theme="light"] [data-device="mobile"] .ticket-card > .mt-3.pt-3.border-t {
    border-top-color: #E2E8F0 !important;
}

/* Mobile sheet contents — when JS clones desktop sidebar content
   into the mobile sheet, the cloned markup keeps its dark Tailwind
   classes. The .modal / .glassmorphism light overrides above DO NOT
   apply because the parent is .mobile-sheet (not .modal), so we
   restate the most common neutralisations here. */
html[data-theme="light"] .mobile-sheet .text-white,
html[data-theme="light"] .mobile-sheet .text-gray-200,
html[data-theme="light"] .mobile-sheet .text-gray-300 { color: #1E293B !important; }
html[data-theme="light"] .mobile-sheet .text-gray-400 { color: #475569 !important; }
html[data-theme="light"] .mobile-sheet .text-gray-500 { color: #64748B !important; }
html[data-theme="light"] .mobile-sheet .bg-gray-800\/40,
html[data-theme="light"] .mobile-sheet .bg-gray-700\/50,
html[data-theme="light"] .mobile-sheet .bg-gray-600\/50 {
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   AUDIT — Section 53. LIGHT-MODE POLISH ROUND 2
   User feedback after the previous theme PRs landed:
     1) Login logo "Team" word reads dark on dark backdrop.
     2) Right-side floating dock buttons not fully circular in light.
     3) Team Schedule table headers + first column still dark navy.
     4) Add-note input needs more contrast against the white card.
     5) An empty rounded-rect "button" appears bottom-left of a
        ticket card (the [data-ticket-actions] container renders even
        when none of its conditional children are populated).
   =============================================================== */

/* 1) Login logo — drop the dark backdrop framing and recolor the PNG
      with a CSS filter instead.
   The assets/icons/nobackground.png has the "Team" word in pure
   white pixels on a transparent canvas, with the shield and "Ops"
   carrying actual colours. invert(1) hue-rotate(180deg) is the
   standard "dark mode filter" trick: white pixels become black
   (now visible on the white card) while sufficiently saturated
   coloured pixels round-trip back to approximately their original
   hue. The result is a flat, professional logo rendering on the
   white card — no dark frame around it.
   Use the same recipe at a smaller scale on the "More Info" modal's
   .login-more-logo. */
html[data-theme="light"] .login-logo {
    mix-blend-mode: normal !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter:
        invert(1) hue-rotate(180deg)
        drop-shadow(0 4px 16px rgba(79, 70, 229, 0.18)) !important;
}
html[data-theme="light"] .login-more-logo {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: invert(1) hue-rotate(180deg) !important;
}

/* 2) Floating dock buttons — pin border-radius back to fully circular
      regardless of any light-mode override that may have lost it. The
      buttons are 42x42 in the dock so 50% gives perfect circles, and
      the dock-group wrapper is pinned to fully-rounded pill. */
html[data-theme="light"] .dashboard-v2-floating-button,
html[data-theme="light"] .dashboard-v2-floating-expand,
html[data-theme="light"] .dashboard-v2-rail-toggle,
html[data-theme="light"] .dashboard-v2-shift-action,
html[data-theme="light"] .dashboard-v2-mobile-drawer-close,
html[data-theme="light"] .dashboard-v2-virtual-popover-close {
    border-radius: 50% !important;
}
html[data-theme="light"] .dashboard-v2-floating-dock-group {
    border-radius: 999px !important;
}

/* 3) Team Schedule modal — the .schedule-week-grid table styles in
      style.css hardcode dark backgrounds for the day-of-week header
      row and the first column (member names). On a white modal those
      read as dark navy strips against an otherwise white card.
      Recolour for light theme. */
html[data-theme="light"] .schedule-week-grid th {
    background: #EEF2F6 !important;
    color: #475569 !important;
    border-bottom: 1px solid #D1D9E2 !important;
}
html[data-theme="light"] .schedule-week-grid th.today-col {
    color: #4338CA !important;
    border-bottom-color: #4F46E5 !important;
}
html[data-theme="light"] .schedule-week-grid td {
    border-bottom: 1px solid #E2E8F0 !important;
    color: #1E293B !important;
}
html[data-theme="light"] .schedule-week-grid td:first-child {
    background: #EEF2F6 !important;
    color: #0F172A !important;
}
html[data-theme="light"] .schedule-week-grid tr:hover td {
    background: rgba(79, 70, 229, 0.05) !important;
}
html[data-theme="light"] .schedule-week-grid tr:hover td:first-child {
    background: #E2E8F0 !important;
}

/* Cell state colours — the green/red/gray defaults are very light
   variants tuned for a dark background. Pull them to higher-contrast
   shades that read on white. */
html[data-theme="light"] .sched-cell-working { color: #15803D !important; }
html[data-theme="light"] .sched-cell-off { color: #B91C1C !important; }
html[data-theme="light"] .sched-cell-notset { color: #94A3B8 !important; }
html[data-theme="light"] .sched-cell-override {
    background: rgba(79, 70, 229, 0.07) !important;
    border-left-color: rgba(79, 70, 229, 0.4) !important;
}
html[data-theme="light"] .sched-cell-today {
    background: rgba(79, 70, 229, 0.04) !important;
}
html[data-theme="light"] .sched-cell-pending {
    background: rgba(245, 158, 11, 0.10) !important;
    border-left-color: rgba(245, 158, 11, 0.6) !important;
    outline-color: rgba(245, 158, 11, 0.35) !important;
}
html[data-theme="light"] .sched-cell-late {
    background: rgba(239, 68, 68, 0.10) !important;
}

/* The "Note: The schedule for May has overrides..." banner inside
   the schedule modal carries the .glassmorphism class, so the
   generic .glassmorphism light override gives it a white background.
   But on top of THAT, the inline Tailwind colour classes
   (text-indigo-300) read too light on white. Pin a strong indigo
   tint here so the banner stands out as informational. */
html[data-theme="light"] #overridden-dates-info {
    background: #EEF2FF !important;
    border: 1px solid #C7D2FE !important;
    color: #3730A3 !important;
    backdrop-filter: none !important;
}
html[data-theme="light"] #overridden-dates-info,
html[data-theme="light"] #overridden-dates-info * { color: #3730A3 !important; }

/* 4) Add-note input — the previous round set the editor border to
      #BFD0E2 which is barely visible against the white card. Push
      to a stronger slate value so the editor pops as a discrete
      input. Toolbar background also goes one step darker so the
      icon strip reads as a distinct band. */
html[data-theme="light"] .note-editor,
html[data-theme="light"] .ds-ticket-card-v2 .note-editor {
    border-color: #94A3B8 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] .note-editor .ql-toolbar,
html[data-theme="light"] .ds-ticket-card-v2 .note-editor .ql-toolbar {
    background: #E2E8F0 !important;
    border-color: #94A3B8 !important;
}
html[data-theme="light"] .note-editor .ql-container,
html[data-theme="light"] .ds-ticket-card-v2 .note-editor .ql-container {
    background: #FFFFFF !important;
    border-color: #94A3B8 !important;
}
html[data-theme="light"] .note-editor .ql-editor::before {
    color: #64748B !important;
}

/* 5) Hide the empty [data-ticket-actions] container.
      The container in tickets.js always renders with bg-gray-800/30 +
      rounded-lg + padding even when none of its conditional children
      (claim/accept/remind buttons) is populated, producing the small
      empty pill at the bottom-left of a ticket card the user
      flagged.
      :empty alone fails here because the template literal leaves
      whitespace text nodes between the ${...} interpolations, so
      the element has children — just no element children.
      :not(:has(> *)) catches that case: it's true when there is no
      *element* child (text nodes don't count). :has() is supported
      in Chrome 105+ / Safari 15.4+ / Firefox 121+ — every browser
      the dashboard targets. The :empty rule is kept as a fallback
      for the rare case where the template literal does collapse
      whitespace. */
[data-ticket-actions]:empty,
[data-ticket-actions]:not(:has(> *)) {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   AUDIT — Section 54. DOCK BUTTON RADIUS — TAKE 2
   Round 2 added `border-radius: 50% !important` for the dock
   buttons in light mode, but user testing showed they still
   rendered with a rectangular look. There are no higher-
   specificity rules in dashboard-v2.css that lower the radius, so
   the likely root cause is either a stale SW cache (CSS not
   fetched) OR aspect-ratio leakage if a flex parent stretches the
   button taller than wide. Defensive fix:
     - aspect-ratio: 1/1 forces the button to be a square box, so
       border-radius: 50% gives a perfect circle (not an oval).
     - High specificity (body.dashboard-v2-enabled +
       .dashboard-v2-floating-dock-group descendant) wins against
       any future rule that lowers the radius.
     - Pin .dashboard-v2-floating-dock-group itself to a full pill.
   The SW CACHE_VERSION bump in this PR forces a fresh CSS fetch.
   =============================================================== */

html[data-theme="light"] body.dashboard-v2-enabled .dashboard-v2-floating-dock-group .dashboard-v2-floating-button,
html[data-theme="light"] body.dashboard-v2-enabled .dashboard-v2-floating-dock-group .dashboard-v2-floating-expand,
html[data-theme="light"] body.dashboard-v2-enabled .dashboard-v2-floating-dock .dashboard-v2-floating-button,
html[data-theme="light"] body.dashboard-v2-enabled .dashboard-v2-floating-dock .dashboard-v2-floating-expand,
html[data-theme="light"] body.dashboard-v2-enabled .dashboard-v2-floating-dock button {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
}

html[data-theme="light"] body.dashboard-v2-enabled .dashboard-v2-floating-dock-group {
    border-radius: 999px !important;
}


/* ═══════════════════════════════════════════════════════════════
   AUDIT — Section 55. DOCK BUTTONS — FINAL APPROACH
   Take-3 used clip-path: circle() to force circular shape — that
   worked, but clip-path slices ALL descendants of the element,
   including the .dashboard-v2-floating-badge (the small counter
   pill that sits at top: -4px; right: -4px outside the button).
   The badge ends up clipped to the button's circle and you only
   see a sliver of the "12 notifications" / "3 schedule items"
   counters.
   This take drops clip-path and relies on the simpler
   border-radius: 50% + aspect-ratio: 1/1 combo to produce a
   circular shape — which the previous round-2 PR's selectors
   also did, but on stale CDN cache that finally cleared by the
   time the user re-tested. The badge is now free to overflow
   outside the button's bounding box.
   =============================================================== */

html[data-theme="light"] #dashboard-v2-floating-dock .dashboard-v2-floating-button,
html[data-theme="light"] #dashboard-v2-floating-dock .dashboard-v2-floating-expand,
html[data-theme="light"] #dashboard-v2-floating-dock button {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    /* Explicit overflow:visible so the absolutely-positioned badge
       counter at top: -4px right: -4px is not clipped to the
       button's box. The button itself is still painted as a circle
       via border-radius, but children that escape the box (the
       badge) remain visible. */
    overflow: visible !important;
}

html[data-theme="light"] #dashboard-v2-floating-dock .dashboard-v2-floating-dock-group {
    border-radius: 999px !important;
}

[data-ticket-actions]:empty,
[data-ticket-actions]:not(:has(> *)) {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
}