body { font-family: 'Inter', 'Prompt', sans-serif; -webkit-tap-highlight-color: transparent; }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 20px); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.sidebar-label { transition: opacity 150ms ease-in-out; }

/* ========================================================================= */
/* Warm Charcoal & Amber Theme Tokens & Overrides (WCAG AAA Compliant)      */
/* ========================================================================= */
:root.dark {
  --bg-canvas: #171513;        /* Warm Dark Charcoal */
  --bg-surface: #201d1a;       /* Elevated Surface / Card */
  --bg-elevated: #26221e;      /* Popovers / Floating Panels */
  --bg-subtle: #2b2723;        /* Inputs / Badges / Hover */
  --border-subtle: #332e29;    /* Card & Table Borders */
  --border-strong: #484139;    /* Focus / Active Borders */
  --text-primary: #f5f0e8;     /* Warm Cream (14.2:1 contrast) */
  --text-muted: #a89f91;       /* Warm Sand Gray */
  --text-faint: #797165;       /* Subtext / Timestamps */
  --accent-amber: #f59e0b;     /* Warm Amber */
  --accent-amber-hover: #d97706;
}

/* Scrollbars in Warm Charcoal Theme */
.dark ::-webkit-scrollbar-track { background: #171513 !important; }
.dark ::-webkit-scrollbar-thumb { background: #484139 !important; border-radius: 9999px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #5e544a !important; }

/* Global Base in Dark Mode */
.dark body {
  background-color: #171513 !important;
  color: #f5f0e8 !important;
}
.dark table {
  color: #f5f0e8 !important;
}

/* Workload Table: Solid crisp borders and readable typography */
#workloadTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
}
.dark #workloadTable {
  background-color: #171513 !important;
  border-color: #484139 !important;
}
#workloadTable th,
#workloadTable td {
  background-clip: padding-box;
  border-bottom: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-top: none !important;
  border-left: none !important;
}
.dark #workloadTable th,
.dark #workloadTable td {
  border-bottom-color: #332e29 !important;
  border-right-color: #332e29 !important;
}

/* Zero-lag theme switch: disable sluggish transitions globally during switch */
body, table, thead, tbody, tr, td, th,
.disable-transitions,
.disable-transitions * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.cell-plan { background-color: #f3e8ff; color: #6b21a8; font-weight: 700; border-radius: 3px; }
.cell-actual { background-color: #dcfce7; color: #15803d; font-weight: 700; border-radius: 3px; }

/* Warm Charcoal & Amber Cells in Workload Matrix */
.dark .cell-plan { background-color: #3a2817 !important; color: #fbbf24 !important; font-weight: 700; border-radius: 3px; }
.dark .cell-actual { background-color: #0f3024 !important; color: #6ee7b7 !important; font-weight: 700; border-radius: 3px; }
.header-green-accent { background-color: #22c55e; color: #ffffff; font-weight: bold; border-radius: 4px; padding: 2px 8px; }

/* Tailwind Utility Class Overrides for Warm Charcoal & Amber */
.dark .dark\:bg-slate-950 { background-color: #171513 !important; }
.dark .dark\:bg-slate-900 { background-color: #201d1a !important; }
.dark .dark\:bg-slate-900\/60 { background-color: rgba(32, 29, 26, 0.6) !important; }
.dark .dark\:bg-slate-900\/80 { background-color: rgba(32, 29, 26, 0.8) !important; }
.dark .dark\:bg-slate-900\/90 { background-color: rgba(32, 29, 26, 0.9) !important; }
.dark .dark\:bg-slate-850 { background-color: #26221e !important; }
.dark .dark\:bg-slate-800 { background-color: #2b2723 !important; }
.dark .dark\:bg-slate-800\/60 { background-color: rgba(43, 39, 35, 0.6) !important; }
.dark .dark\:bg-slate-800\/80 { background-color: rgba(43, 39, 35, 0.8) !important; }
.dark .dark\:bg-slate-700 { background-color: #332e29 !important; }

.dark .dark\:border-slate-900 { border-color: #201d1a !important; }
.dark .dark\:border-slate-800 { border-color: #332e29 !important; }
.dark .dark\:border-slate-700 { border-color: #484139 !important; }
.dark .dark\:border-slate-600 { border-color: #5e544a !important; }

.dark .dark\:text-white { color: #f5f0e8 !important; }
.dark .dark\:text-slate-100 { color: #f5f0e8 !important; }
.dark .dark\:text-slate-200 { color: #ece4d8 !important; }
.dark .dark\:text-slate-300 { color: #d1c7ba !important; }
.dark .dark\:text-slate-400 { color: #a89f91 !important; }
.dark .dark\:text-slate-500 { color: #797165 !important; }

.dark .dark\:hover\:bg-slate-800:hover { background-color: #2b2723 !important; }
.dark .dark\:hover\:bg-slate-700:hover { background-color: #332e29 !important; }

.dark tr:hover { background-color: #26221e !important; }
.dark tr:hover td { background-color: #26221e !important; }

/* Amber Tone Enhancements */
.dark .dark\:text-amber-300 { color: #fbbf24 !important; }
.dark .dark\:text-amber-200 { color: #fde68a !important; }
.dark .dark\:bg-amber-950\/60 { background-color: rgba(245, 158, 11, 0.12) !important; }
.dark .dark\:bg-amber-950\/70 { background-color: rgba(245, 158, 11, 0.15) !important; }
.dark .dark\:border-amber-700 { border-color: #b45309 !important; }

/* Timeline Gantt Grid: Consistent crisp 1px borders across DPI scaling */
.timeline-grid-col {
  box-sizing: border-box !important;
  border-right: 1px solid #cbd5e1 !important;
}
.dark .timeline-grid-col {
  border-right: 1px solid #332e29 !important;
}
.timeline-grid-line {
  box-sizing: border-box !important;
  border-right: 1px solid rgba(203, 213, 225, 0.75) !important;
}
.dark .timeline-grid-line {
  border-right: 1px solid rgba(51, 46, 41, 0.75) !important;
}

/* CSS-based Timeline Gantt Row Grid: Replaces 100,000+ DOM elements with a single lightweight gradient */
.timeline-row-grid {
  background-image: repeating-linear-gradient(to right, transparent, transparent calc(var(--col-width, 24px) - 1px), rgba(203, 213, 225, 0.75) calc(var(--col-width, 24px) - 1px), rgba(203, 213, 225, 0.75) var(--col-width, 24px));
  background-size: var(--col-width, 24px) 100%;
}
.dark .timeline-row-grid {
  background-image: repeating-linear-gradient(to right, transparent, transparent calc(var(--col-width, 24px) - 1px), rgba(51, 46, 41, 0.75) calc(var(--col-width, 24px) - 1px), rgba(51, 46, 41, 0.75) var(--col-width, 24px));
  background-size: var(--col-width, 24px) 100%;
}
/* Entry page: scoped to the existing authentication overlay. */
.auth-page { z-index: 90000; padding: 40px; overflow-y: auto; align-items: safe center; background: #edf1ed; background-image: radial-gradient(ellipse at 12% 18%, #dde8df 0, transparent 52%), radial-gradient(ellipse at 95% 90%, #e0e7e3 0, transparent 45%); }
.auth-shell { display: grid; grid-template-columns: 1.08fr 1fr; width: min(1080px, 100%); min-height: 650px; border: 1px solid #d8e1da; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 24px 80px #243b2c12; }
.auth-story { padding: 46px; background: #153f35; color: #edf5ee; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-story::before { content: ''; position: absolute; width: 450px; height: 450px; border: 1px solid #ffffff0a; border-radius: 50%; right: -200px; top: -190px; box-shadow: 0 0 0 65px #ffffff03, 0 0 0 130px #ffffff03; pointer-events: none; }
.auth-brand { display: flex; align-items: center; gap: 12px; font: 700 23px Inter, sans-serif; letter-spacing: 1px; }
.auth-brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #afc8b44d; border-radius: 13px; color: #c4dbb7; }
.auth-brand-mark svg { width: 24px; height: 24px; }
.auth-brand-sub { display: block; font-size: 9px; letter-spacing: 2.7px; margin-top: 5px; color: #abc4b7; }
.auth-story-copy { margin-top: 65px; position: relative; }
.auth-eyebrow { display: block; font: 600 10px Inter, sans-serif; letter-spacing: 2px; color: #91b7a4; }
.auth-story h1 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 500; line-height: 1.5; letter-spacing: -.8px; margin: 16px 0; white-space: pre-line; }
.auth-story-copy p { font-size: 13px; line-height: 1.95; color: #b5cbbf; white-space: pre-line; }
.auth-plan-art { margin-top: 38px; border: 1px solid #92b7a433; border-radius: 16px; background: #ffffff06; padding: 18px; }
.auth-art-top, .auth-art-footer { display: flex; align-items: center; justify-content: space-between; font: 500 9px Inter, sans-serif; letter-spacing: 1px; color: #a8c3b5; }
.auth-art-top > span, .auth-art-footer > span { display: flex; align-items: center; gap: 7px; }
.auth-art-top svg, .auth-art-footer svg { width: 13px; height: 13px; }
.auth-art-dots b { width: 4px; height: 4px; border-radius: 50%; background: #88a99a; }
.auth-art-grid { position: relative; height: 132px; margin: 18px 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(16.666% - 1px), #a3c5b513 calc(16.666% - 1px), #a3c5b513 16.666%); border-top: 1px solid #a3c5b513; border-bottom: 1px solid #a3c5b513; }
.auth-art-line { position: absolute; height: 13px; border-radius: 4px; }
.line-a { top: 16px; left: 3%; width: 32%; background: #b3ccba; }
.line-b { top: 45px; left: 23%; width: 43%; background: #82aa99; }
.line-c { top: 74px; left: 43%; width: 32%; background: #c9c6a7; }
.line-d { top: 103px; left: 64%; width: 29%; background: #679585; }
.auth-art-today { position: absolute; left: 56%; top: -6px; bottom: -6px; border-left: 1px dashed #d7e6da66; }
.auth-story-footer { display: flex; justify-content: space-between; margin-top: auto; padding-top: 34px; font: 500 8px Inter, sans-serif; letter-spacing: 1.4px; color: #8eaf9d; }
.auth-form-panel { display: flex; flex-direction: column; padding: 28px 48px 24px; }
.auth-controls { display: flex; justify-content: flex-end; align-items: center; gap: 18px; color: #7c8a82; }
.auth-language { display: flex; gap: 10px; align-items: center; font: 600 11px Inter, sans-serif; }
.auth-language button { padding: 8px 2px; cursor: pointer; }
.auth-language button:hover { color: #153f35; }
.auth-theme { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #e4e9e5; border-radius: 9px; cursor: pointer; }
.auth-theme svg { width: 16px; height: 16px; }
.auth-form-content { margin: auto 0; padding: 35px 0; }
.auth-form-heading { margin-bottom: 28px; }
.auth-form-heading .auth-eyebrow { color: #567a66; font-size: 9px; }
.auth-form-heading h2 { font-size: 28px; font-weight: 500; color: #243b30; margin: 12px 0 9px; letter-spacing: -.5px; }
.auth-form-heading p { font-size: 12px; color: #819087; line-height: 1.8; }
.auth-tabs { margin-bottom: 26px; }
.auth-tabs button { min-height: 38px; font-size: 12px; }
#loginModalOverlay form { display: grid; gap: 20px; }
#loginModalOverlay label { font-size: 12px; margin-bottom: 9px; }
#loginModalOverlay input { min-height: 48px; font-size: 14px; border-color: #dce4de; border-radius: 10px; background: #f9fbf9; }
#loginModalOverlay input:focus { border-color: #638a73; box-shadow: 0 0 0 3px #638a731a; }
#loginModalOverlay input::placeholder { color: #a2ada6; }
#loginModalOverlay button[type="submit"] { min-height: 48px; background: #244e3d; font-size: 13px; border-radius: 10px; box-shadow: 0 4px 10px #244e3d14; }
#loginModalOverlay button[type="submit"]:hover { background: #193c2d; }
#loginModalOverlay button:focus-visible { outline: 2px solid #759b82; outline-offset: 3px; }
.auth-help { text-align: center; color: #8b978f; font-size: 10px; line-height: 1.9; margin-top: 22px; }
.auth-form-footer { display: flex; justify-content: center; align-items: center; gap: 7px; color: #a0aaa4; font: 400 9px Inter, sans-serif; }
.auth-form-footer svg { width: 12px; height: 12px; }
.dark .auth-page { background: #161c18; background-image: radial-gradient(ellipse at 10% 10%, #26372b 0, transparent 60%); }
.dark .auth-shell { background: #202722; border-color: #344238; }
.dark .auth-story { background: #15372e; }
.dark .auth-form-heading h2 { color: #e3ebe4; }
.dark .auth-form-heading .auth-eyebrow { color: #96b7a0; }
.dark #loginModalOverlay input { background: #262f28 !important; border-color: #435046 !important; color: #e3ebe4; }
.dark #loginModalOverlay button[type="submit"] { background: #72977a; color: #102618; }
.dark .auth-theme { border-color: #435046; }
.dark .auth-language button:hover { color: #d4e4d8; }
@media (max-width: 760px) {
  .auth-page { padding: 20px; align-items: flex-start; }
  .auth-shell { grid-template-columns: 1fr; min-height: 0; max-width: 480px; border-radius: 22px; margin: auto; }
  .auth-story { padding: 25px 28px; }
  .auth-brand { font-size: 20px; }
  .auth-story-copy { margin-top: 24px; }
  .auth-story h1 { font-size: 25px; line-height: 1.45; margin: 10px 0 0; }
  .auth-story-copy p, .auth-plan-art, .auth-story-footer, .auth-story-copy .auth-eyebrow { display: none; }
  .auth-form-panel { padding: 20px 28px 24px; }
  .auth-form-content { padding: 22px 0; }
  .auth-form-heading h2 { font-size: 24px; }
  .auth-form-heading { margin-bottom: 22px; }
}
@media (max-width: 380px) { .auth-page { padding: 10px; } .auth-form-panel { padding: 18px 22px; } }
/* Desktop navigation: identity, workspace tools, then task filters. */
.desktop-topbar { height: auto; min-height: 44px; gap: 16px; padding: 5px 14px; }
.desktop-topbar > div:first-child { flex-shrink: 0; min-width: 185px; }
.desktop-header-actions { flex: 1; gap: 8px; justify-content: flex-end; min-width: 0; }
.desktop-header-actions > * { margin-left: 0 !important; flex-shrink: 0; }
.desktop-header-actions > div:first-child { flex: 1; max-width: 440px; margin-right: auto; min-width: 120px; }
#desktopGlobalSearch { width: 100%; height: 34px; border-radius: 8px; }
.desktop-header-actions > button { min-height: 34px; border-radius: 8px; }
#btnHeaderUserMenu { min-height: 34px; }
.workspace-toolbar { padding: 5px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.workspace-heading { display: contents; }
.workspace-context, .workspace-actions, .workspace-filters, .workspace-view-options { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.workspace-context { gap: 14px; }
#viewTitleBadge { background: transparent !important; border: 0; box-shadow: none; padding: 0; font-size: 12px; gap: 6px; white-space: nowrap; }
#viewTitleIcon { width: 15px; height: 15px; }
.workspace-actions { gap: 8px; }
.workspace-actions > button, #workloadToolbarCutoff, #toolbarScopeBadge { min-height: 32px; border-radius: 7px; white-space: nowrap; }
.workspace-filterbar { display: contents; }
.workspace-context { order: 0; gap: 8px; }
.workspace-filters { order: 1; gap: 6px; }
.workspace-view-options { order: 2; }
.workspace-actions { order: 3; margin-left: auto; gap: 6px; }
.workspace-filters > div { min-height: 30px; border-radius: 6px; padding: 3px 7px; gap: 5px; }
.workspace-filters select { min-width: 85px; max-width: 130px !important; }
.workspace-view-options { margin-left: 0; gap: 8px; }
#tableRowsCountText { display: inline; font-size: 11px; }
#btnShowAllJobs { min-height: 30px; border-radius: 6px; white-space: nowrap; }
.workspace-actions > button, #workloadToolbarCutoff, #toolbarScopeBadge { min-height: 30px; }
@media (min-width: 1101px) and (max-width: 1650px) {
  .workspace-toolbar { gap: 8px; }
  .workspace-context { flex-basis: auto; }
  #tableRowsCountText { display: none; }
  .workspace-filters > div > span { display: none; }
}
.dark .workspace-filterbar { border-top-color: #38342f; }
@media (min-width: 768px) and (max-width: 1100px) {
  .desktop-topbar { gap: 10px; padding: 5px 12px; flex-wrap: wrap; }
  .desktop-topbar > div:first-child { min-width: 150px; }
  .desktop-header-actions { flex-wrap: wrap; }
  #headerUserName, #headerUserRoleBadge { display: none; }
  .desktop-header-actions > div.h-4 { display: none; }
  .desktop-header-actions > div:first-child { max-width: none; }
  .workspace-toolbar { padding: 5px 12px; gap: 6px 10px; }
  .workspace-context { order: 0; }
  .workspace-actions { order: 1; }
  .workspace-filters { order: 2; }
  .workspace-view-options { order: 3; }
  .workspace-actions { margin-left: auto; }
  .workspace-filters { flex: 1; }
  .workspace-filters > div { flex: 1; }
  .workspace-filters select { min-width: 85px; }
}