/* ============================================================ Dark Theme — applies when Loaded after styles.css on every page. ============================================================ */ :root[data-theme="dark"]{ --primary:#5b9dff; --bg:#0b1020; --card:#131a2c; --border:#2a3349; --text:#e6e9f5; --text-secondary:#9aa3bd; --success:#34d27a; --warning:#fbbf24; --danger:#f87171; --surface-2:#1a2238; --surface-3:#222b44; --hover:#1c2540; color-scheme:dark; } /* ---------- base ---------- */ :root[data-theme="dark"] body{background:var(--bg);color:var(--text);} :root[data-theme="dark"] body.bg-gray-50{background:var(--bg)!important;color:var(--text)!important;} /* ---------- styles.css surfaces ---------- */ :root[data-theme="dark"] .hero{background:linear-gradient(135deg,#0f172a 0%,#1e2a4a 50%,#0f172a 100%);color:#e6e9f5;border-bottom-color:#2a3349;} :root[data-theme="dark"] .hero h1, :root[data-theme="dark"] .hero-customer .hc-name, :root[data-theme="dark"] .hero-meta-item .value{color:#f1f5f9;} :root[data-theme="dark"] .hero p, :root[data-theme="dark"] .hero-customer .hc-code{color:#94a3b8;} :root[data-theme="dark"] .hero-customer .hc-label, :root[data-theme="dark"] .hero-meta-item .label{color:#7c8aa6;} :root[data-theme="dark"] .hero-meta{border-left-color:#2a3349;} :root[data-theme="dark"] .fixed-header{background:var(--bg);box-shadow:0 2px 8px rgba(0,0,0,0.4);} /* tabs */ :root[data-theme="dark"] .tabs{background:#1a2238;} :root[data-theme="dark"] .tab-btn{color:var(--text-secondary);} :root[data-theme="dark"] .tab-btn.active{background:#222b44;color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,0.4);} :root[data-theme="dark"] .tab-btn:hover:not(.active){color:var(--text);} :root[data-theme="dark"] .tabs-cog-btn{background:var(--card);border-color:var(--border);color:var(--text-secondary);} :root[data-theme="dark"] .tabs-cog-btn:hover{background:var(--hover);color:var(--text);} :root[data-theme="dark"] .tabs-cog-popover{background:var(--card);border-color:var(--border);box-shadow:0 8px 24px rgba(0,0,0,0.55);} :root[data-theme="dark"] .tabs-cog-row{color:var(--text);} :root[data-theme="dark"] .tabs-cog-row:hover{background:var(--hover);} /* stat cards */ :root[data-theme="dark"] .stat-card{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] .stat-card.sc-progress{background:linear-gradient(180deg,#0f3023,#0d3b2a);border-color:#1f6b48;} :root[data-theme="dark"] .stat-card.sc-progress .stat-value{color:#6ee7b7;} :root[data-theme="dark"] .stat-card.sc-progress .stat-label{color:#86d4af;} :root[data-theme="dark"] .stat-card.sc-milestones{background:linear-gradient(180deg,#3a2a08,#43330a);border-color:#a16207;} :root[data-theme="dark"] .stat-card.sc-milestones .stat-value{color:#fcd34d;} :root[data-theme="dark"] .stat-card.sc-milestones .stat-label{color:#fbbf24;} :root[data-theme="dark"] .stat-card.sc-phases{background:#15233f;border-color:#1d4ed8;} :root[data-theme="dark"] .stat-card.sc-phases .stat-value{color:#93c5fd;} :root[data-theme="dark"] .stat-card.sc-phases .stat-label{color:#bfdbfe;} :root[data-theme="dark"] .stat-card.sc-duration{background:#0c2d2a;border-color:#0f766e;} :root[data-theme="dark"] .stat-card.sc-duration .stat-value{color:#5eead4;} :root[data-theme="dark"] .stat-card.sc-duration .stat-label{color:#99f6e4;} :root[data-theme="dark"] .stat-card.sc-scope{background:#1a2238;border-color:var(--border);} :root[data-theme="dark"] .stat-card.sc-scope .stat-value{color:#cbd5e1;} :root[data-theme="dark"] .stat-card.sc-scope .stat-label{color:#94a3b8;} :root[data-theme="dark"] .progress-bar-bg{background:#222b44;} /* gantt */ :root[data-theme="dark"] .gantt-wrap{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] .gantt-header-label, :root[data-theme="dark"] .gantt-month{color:var(--text-secondary);border-bottom-color:var(--border);} :root[data-theme="dark"] .gantt-row-label, :root[data-theme="dark"] .gantt-row-bars{border-bottom-color:#1f2740;} :root[data-theme="dark"] .gantt-tip{background:#0a0f1f;color:#e6e9f5;box-shadow:0 8px 30px rgba(0,0,0,0.7);} :root[data-theme="dark"] .gantt-fullscreen{background:var(--bg);} :root[data-theme="dark"] .gantt-gear, :root[data-theme="dark"] .gantt-fs{background:var(--card);border-color:var(--border);color:var(--text-secondary);} :root[data-theme="dark"] .gantt-gear:hover, :root[data-theme="dark"] .gantt-fs:hover{background:var(--hover);border-color:var(--primary);color:var(--primary);} :root[data-theme="dark"] .ms-grid-wrap{background:var(--surface-2);border-color:var(--border);} :root[data-theme="dark"] .ms-grid-corner, :root[data-theme="dark"] .ms-grid-phase{background:var(--surface-3);color:var(--text);border-color:var(--border);} :root[data-theme="dark"] .ms-grid-wk{background:var(--surface-2);color:var(--text-secondary);border-color:var(--border);} :root[data-theme="dark"] .ms-grid-cell{border-color:#1f2740;} :root[data-theme="dark"] .ms-grid-cell:hover{background:#1f2a48;} :root[data-theme="dark"] .ms-grid-cell.in-range{background:#142244;} :root[data-theme="dark"] .ms-edit-form{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] .ms-edit-row input, :root[data-theme="dark"] .ms-edit-row select{background:var(--surface-2);color:var(--text);border-color:var(--border);} /* phase / cards / rows */ :root[data-theme="dark"] .phase-card, :root[data-theme="dark"] .del-card, :root[data-theme="dark"] .setup-card, :root[data-theme="dark"] .save-bar, :root[data-theme="dark"] .team-card, :root[data-theme="dark"] .report-card, :root[data-theme="dark"] .tpl-card, :root[data-theme="dark"] .activity-item, :root[data-theme="dark"] .note-form, :root[data-theme="dark"] .ts-week-nav, :root[data-theme="dark"] .sow-card{background:var(--card);border-color:var(--border);box-shadow:0 1px 3px rgba(0,0,0,0.3);} :root[data-theme="dark"] .phase-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.5);} :root[data-theme="dark"] .phase-duration-badge{background:var(--surface-3);color:var(--text-secondary);} :root[data-theme="dark"] .task-item{background:var(--surface-2);border-color:#27314c;} :root[data-theme="dark"] .task-text strong{color:var(--text);} :root[data-theme="dark"] .task-check{border-color:#445273;} :root[data-theme="dark"] .task-check.checked{background:var(--success);border-color:var(--success);} /* tables */ :root[data-theme="dark"] .del-table, :root[data-theme="dark"] .module-table, :root[data-theme="dark"] .perm-matrix, :root[data-theme="dark"] .web-perm-table, :root[data-theme="dark"] .task-table, :root[data-theme="dark"] .ts-grid{border-color:var(--border);} :root[data-theme="dark"] .del-table thead, :root[data-theme="dark"] .module-table thead, :root[data-theme="dark"] .perm-matrix thead, :root[data-theme="dark"] .web-perm-table thead, :root[data-theme="dark"] .task-table thead, :root[data-theme="dark"] .ts-grid thead{background:var(--surface-3);} :root[data-theme="dark"] .del-table th, :root[data-theme="dark"] .module-table th, :root[data-theme="dark"] .perm-matrix th, :root[data-theme="dark"] .web-perm-table th, :root[data-theme="dark"] .task-table th, :root[data-theme="dark"] .ts-grid th{color:var(--text-secondary);} :root[data-theme="dark"] .del-table td, :root[data-theme="dark"] .module-table td, :root[data-theme="dark"] .perm-matrix td, :root[data-theme="dark"] .web-perm-table td, :root[data-theme="dark"] .task-table td, :root[data-theme="dark"] .ts-grid td{border-top-color:var(--border);} :root[data-theme="dark"] .del-table tr:hover td, :root[data-theme="dark"] .module-table tr:hover td, :root[data-theme="dark"] .perm-matrix tr:hover td, :root[data-theme="dark"] .web-perm-table tr:hover td, :root[data-theme="dark"] .task-table tr:hover td{background:var(--hover);} :root[data-theme="dark"] .perm-matrix th:first-child{background:var(--surface-3);} :root[data-theme="dark"] .perm-matrix td:first-child{background:var(--card);} :root[data-theme="dark"] .ts-grid .ts-total-row td{background:var(--surface-3);} :root[data-theme="dark"] .ts-grid .ts-grand-total td{background:#152044;color:var(--primary);} /* inputs */ :root[data-theme="dark"] .form-input, :root[data-theme="dark"] .form-select, :root[data-theme="dark"] .form-textarea, :root[data-theme="dark"] .ts-input, :root[data-theme="dark"] .auth-input, :root[data-theme="dark"] .del-edit-input, :root[data-theme="dark"] .del-edit-select, :root[data-theme="dark"] .ge-row input, :root[data-theme="dark"] .ge-row select, :root[data-theme="dark"] .pt-add-form input, :root[data-theme="dark"] .tb-toolbar input, :root[data-theme="dark"] .tb-toolbar select, :root[data-theme="dark"] .ts-add-row input, :root[data-theme="dark"] .ts-add-row select{background:var(--surface-2);color:var(--text);border-color:var(--border);} :root[data-theme="dark"] .form-input:focus, :root[data-theme="dark"] .form-select:focus, :root[data-theme="dark"] .form-textarea:focus, :root[data-theme="dark"] .auth-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,157,255,0.2);} :root[data-theme="dark"] .form-input::placeholder, :root[data-theme="dark"] .form-textarea::placeholder, :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder{color:#5d6884;} :root[data-theme="dark"] .note-form textarea{background:var(--surface-2);color:var(--text);border-color:var(--border);} /* module toggles */ :root[data-theme="dark"] .module-toggle{background:var(--surface-2);border-color:var(--border);} :root[data-theme="dark"] .module-toggle:hover{border-color:#5b6786;} :root[data-theme="dark"] .module-toggle.active{background:#152044;border-color:var(--primary);} :root[data-theme="dark"] .module-toggle .mt-dot{border-color:#445273;} /* gantt editor / modals */ :root[data-theme="dark"] .gantt-editor, :root[data-theme="dark"] .modal-box, :root[data-theme="dark"] .tpl-editor-box{background:var(--card);color:var(--text);box-shadow:0 25px 70px rgba(0,0,0,0.7);} :root[data-theme="dark"] .gantt-editor h3, :root[data-theme="dark"] .modal-box h3{color:var(--text);} :root[data-theme="dark"] .gantt-editor .hint{color:var(--text-secondary);} :root[data-theme="dark"] .ge-tabs{border-bottom-color:var(--border);} :root[data-theme="dark"] .ge-tab{color:var(--text-secondary);} :root[data-theme="dark"] .ge-tab.active{color:var(--primary);} :root[data-theme="dark"] .ge-section{background:var(--surface-2);border-color:var(--border);} :root[data-theme="dark"] .ge-row{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] .ge-actions{border-top-color:var(--border);} :root[data-theme="dark"] .ge-btn{background:var(--surface-2);color:var(--text);border-color:var(--border);} :root[data-theme="dark"] .ge-btn-add{background:var(--surface-2);color:var(--text-secondary);border-color:var(--border);} :root[data-theme="dark"] .ge-btn-add:hover{background:#152044;border-color:var(--primary);color:var(--primary);} /* buttons / pills */ :root[data-theme="dark"] .btn-outline, :root[data-theme="dark"] .pc-btn, :root[data-theme="dark"] .ai-btn, :root[data-theme="dark"] .ts-nav-btn, :root[data-theme="dark"] .tpl-btn{background:var(--card);color:var(--text);border-color:var(--border);} :root[data-theme="dark"] .pc-btn:hover, :root[data-theme="dark"] .ai-btn:hover, :root[data-theme="dark"] .ts-nav-btn:hover, :root[data-theme="dark"] .tpl-btn:hover{background:var(--hover);border-color:var(--primary);color:var(--primary);} :root[data-theme="dark"] .activity-filter{background:var(--surface-3);} :root[data-theme="dark"] .af-btn{color:var(--text-secondary);} :root[data-theme="dark"] .af-btn.active{background:var(--card);color:var(--primary);} /* dashboard / settings */ :root[data-theme="dark"] .view-dashboard, :root[data-theme="dark"] .settings-view, :root[data-theme="dark"] #viewProject, :root[data-theme="dark"] #viewSettings{background:var(--bg);} :root[data-theme="dark"] .dash-hero, :root[data-theme="dark"] .settings-hero, :root[data-theme="dark"] .project-bar{background:linear-gradient(135deg,#080d1c 0%,#13213d 50%,#080d1c 100%);box-shadow:0 2px 14px rgba(0,0,0,0.6);} :root[data-theme="dark"] .dash-stat, :root[data-theme="dark"] .project-card, :root[data-theme="dark"] .project-row{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] .project-card:hover, :root[data-theme="dark"] .project-row:hover{box-shadow:0 8px 24px rgba(0,0,0,0.5);border-color:var(--primary);} :root[data-theme="dark"] .project-card .pc-progress-bar, :root[data-theme="dark"] .project-row .pr-prog-bar{background:#222b44;} :root[data-theme="dark"] .dash-view-toggle{background:var(--surface-2);border-color:var(--border);} :root[data-theme="dark"] .dash-view-toggle button{color:var(--text-secondary);} :root[data-theme="dark"] .dash-view-toggle button:hover:not(.active){background:#152044;color:var(--primary);} :root[data-theme="dark"] .dash-group-header{border-bottom-color:var(--border);} :root[data-theme="dark"] .dash-group-body.empty{border-color:var(--border);color:var(--text-secondary);} :root[data-theme="dark"] .dash-group-body.dash-group-drop{background:rgba(91,157,255,0.08);outline-color:var(--primary);} :root[data-theme="dark"] .status-pill.active{background:#0d3b2a;color:#6ee7b7;} :root[data-theme="dark"] .status-pill.on-hold{background:#3a2a08;color:#fcd34d;} :root[data-theme="dark"] .status-pill.completed{background:#152044;color:#93c5fd;} :root[data-theme="dark"] .settings-card{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] .settings-nav{background:var(--card);box-shadow:0 2px 8px rgba(0,0,0,0.5);} :root[data-theme="dark"] .settings-nav-btn{color:var(--text-secondary);} :root[data-theme="dark"] .settings-nav-btn:hover:not(.active){background:var(--hover);color:var(--text);} :root[data-theme="dark"] .settings-row{border-bottom-color:#1f2740;} :root[data-theme="dark"] .settings-toggle{background:#445273;} :root[data-theme="dark"] .settings-toggle.on{background:var(--primary);} :root[data-theme="dark"] .settings-danger-zone{background:#2a1414;border-color:#7f1d1d;} /* kanban / tasks */ :root[data-theme="dark"] .kanban-col{background:var(--surface-2);border-color:var(--border);} :root[data-theme="dark"] .kanban-col-header .kc-count{background:var(--surface-3);color:var(--text-secondary);} :root[data-theme="dark"] .task-card-kb{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] .task-card-kb:hover{box-shadow:0 4px 12px rgba(0,0,0,0.5);} :root[data-theme="dark"] .kanban-col.drag-over{background:#152044;border-color:var(--primary);} :root[data-theme="dark"] .tb-view-toggle{background:var(--surface-3);} :root[data-theme="dark"] .tb-view-btn{color:var(--text-secondary);} :root[data-theme="dark"] .tb-view-btn.active{background:var(--card);color:var(--primary);} :root[data-theme="dark"] .phase-task-item{background:var(--surface-2);border-color:#27314c;} :root[data-theme="dark"] .phase-task-item.done{background:#0d2a1c;border-color:#175238;opacity:0.65;} :root[data-theme="dark"] .phase-task-item.milestone{background:#2a2008;border-left-color:#fbbf24;} :root[data-theme="dark"] .phase-task-item .pt-status select{background:var(--card);color:var(--text);border-color:var(--border);} :root[data-theme="dark"] .phase-task-item .pt-status select.st-notstart{background:var(--surface-3);color:var(--text-secondary);} :root[data-theme="dark"] .phase-task-item .pt-status select.st-progress{background:#152044;color:#93c5fd;} :root[data-theme="dark"] .phase-task-item .pt-status select.st-done{background:#0d3b2a;color:#6ee7b7;} :root[data-theme="dark"] .pt-add-btn{background:var(--card);color:var(--text-secondary);border-color:var(--border);} :root[data-theme="dark"] .pt-add-btn:hover{background:#152044;border-color:var(--primary);color:var(--primary);} :root[data-theme="dark"] .priority-badge.critical{background:#3a1414;color:#fca5a5;} :root[data-theme="dark"] .priority-badge.high{background:#3a200a;color:#fdba74;} :root[data-theme="dark"] .priority-badge.medium{background:#3a2a08;color:#fcd34d;} :root[data-theme="dark"] .priority-badge.low{background:#0d3b2a;color:#86efac;} /* status badges */ :root[data-theme="dark"] .status-pending{background:var(--surface-3);color:var(--text-secondary);} :root[data-theme="dark"] .status-required{background:#3a1414;color:#fca5a5;} :root[data-theme="dark"] .status-signoff{background:#3a2a08;color:#fcd34d;} /* sub-section / deliverables */ :root[data-theme="dark"] .sub-section-title{color:var(--text);} :root[data-theme="dark"] .sub-section-title .week-badge{background:var(--surface-3);color:var(--text-secondary);} :root[data-theme="dark"] .deliverables-row{border-top-color:var(--border);} :root[data-theme="dark"] .deliverables-label{color:var(--text-secondary);} /* milestone bars */ :root[data-theme="dark"] .milestone-bar{background:linear-gradient(90deg,#3a2a08,#43330a);border-color:#a16207;} :root[data-theme="dark"] .milestone-bar .ms-text{color:#fcd34d;} :root[data-theme="dark"] .milestone-bar .ms-week{color:#fbbf24;} :root[data-theme="dark"] .milestone-bar.critical{background:linear-gradient(90deg,#3a1414,#4d1a1a);border-color:#7f1d1d;} :root[data-theme="dark"] .milestone-bar.critical .ms-text{color:#fca5a5;} :root[data-theme="dark"] .milestone-bar.critical .ms-week{color:#f87171;} :root[data-theme="dark"] .milestone-bar.green{background:linear-gradient(90deg,#0d3b2a,#0f4a35);border-color:#175238;} :root[data-theme="dark"] .milestone-bar.green .ms-text{color:#6ee7b7;} :root[data-theme="dark"] .milestone-bar.green .ms-week{color:#34d27a;} /* SOW preview */ :root[data-theme="dark"] .sow-preview{background:#080d1c;color:#cbd5e1;} :root[data-theme="dark"] .sow-step-dot{background:var(--surface-2);color:var(--text-secondary);border-color:var(--border);} :root[data-theme="dark"] .sow-step-dot.completed{background:#0d3b2a;color:#6ee7b7;border-color:#175238;} :root[data-theme="dark"] .sow-check-item{background:var(--surface-2);border-color:var(--border);} :root[data-theme="dark"] .sow-check-item:hover, :root[data-theme="dark"] .sow-check-item.checked{background:#152044;border-color:var(--primary);} :root[data-theme="dark"] .sow-sub-fields{background:var(--surface-2);border-color:var(--border);} :root[data-theme="dark"] .sow-review-item.ok{background:#0d3b2a;color:#6ee7b7;} :root[data-theme="dark"] .sow-review-item.warn{background:#3a2a08;color:#fcd34d;} :root[data-theme="dark"] .sow-manday-row{background:var(--surface-2);} :root[data-theme="dark"] .sap-tree .mod-header:hover, :root[data-theme="dark"] .sap-tree .sub-folder-header:hover, :root[data-theme="dark"] .sap-tree .sub-item:hover{background:var(--surface-3);} :root[data-theme="dark"] .sap-tree .mod-children, :root[data-theme="dark"] .sap-tree .sub-folder-children{border-left-color:var(--border);} :root[data-theme="dark"] .sap-tree .mod-name{color:var(--text);} :root[data-theme="dark"] .sap-tree .sub-item{color:var(--text-secondary);} :root[data-theme="dark"] .sap-tree .sub-folder-header{color:var(--text);} :root[data-theme="dark"] .phase-section-divider{border-top-color:var(--border);} /* template editor */ :root[data-theme="dark"] .tpl-phase-card{background:var(--surface-2);border-color:var(--border);} :root[data-theme="dark"] .tpl-task-row, :root[data-theme="dark"] .tpl-del-row, :root[data-theme="dark"] .tpl-ms-row, :root[data-theme="dark"] .tpl-version-item{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] .tpl-task-row input, :root[data-theme="dark"] .tpl-del-row input, :root[data-theme="dark"] .tpl-del-row select, :root[data-theme="dark"] .tpl-ms-row input{color:var(--text);} :root[data-theme="dark"] .tpl-version-item.active{background:#152044;border-color:var(--primary);} :root[data-theme="dark"] .tpl-version-badge{background:var(--surface-3);color:var(--text-secondary);} :root[data-theme="dark"] .tpl-version-badge.latest{background:#152044;color:#93c5fd;} :root[data-theme="dark"] .tpl-add-small{background:var(--card);color:var(--text-secondary);border-color:var(--border);} :root[data-theme="dark"] .tpl-sub-section{border-top-color:var(--border);} :root[data-theme="dark"] .tpl-sub-title{color:var(--text-secondary);} /* coin view */ :root[data-theme="dark"] #viewCoin{background:var(--bg);} :root[data-theme="dark"] #viewCoin .c-tabs{background:var(--card);border-bottom-color:var(--border);} :root[data-theme="dark"] #viewCoin .c-tab{color:var(--text-secondary);} :root[data-theme="dark"] #viewCoin .c-tab.active{color:var(--primary);} :root[data-theme="dark"] #viewCoin .c-card{background:var(--card);border-color:var(--border);box-shadow:0 1px 3px rgba(0,0,0,0.4);} :root[data-theme="dark"] #viewCoin .c-cal-cell{background:var(--surface-2);} :root[data-theme="dark"] #viewCoin .c-cal-cell.c-future{background:var(--surface-3);color:#5d6884;} :root[data-theme="dark"] #viewCoin .c-ledger-row{border-bottom-color:#1f2740;} :root[data-theme="dark"] #viewCoin .c-shop-item, :root[data-theme="dark"] #viewCoin .c-thank{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] #viewCoin .c-lb-row{background:var(--surface-2);} :root[data-theme="dark"] #viewCoin .c-alert{background:#3a2a08;} :root[data-theme="dark"] #viewCoin .c-alert.c-danger{background:#3a1414;} :root[data-theme="dark"] #viewCoin .c-alert.c-success{background:#0d3b2a;} :root[data-theme="dark"] #viewCoin .c-alert.c-info{background:#152044;} :root[data-theme="dark"] #viewCoin .c-gauge{background:var(--surface-3);} :root[data-theme="dark"] #viewCoin table.c-std th{background:var(--surface-3);color:var(--text-secondary);} :root[data-theme="dark"] #viewCoin table.c-std td{border-top-color:var(--border);} :root[data-theme="dark"] #viewCoin table.c-std input{background:var(--surface-2);color:var(--text);border-color:var(--border);} :root[data-theme="dark"] #viewCoin .c-btn-ghost{background:var(--surface-2);color:var(--text);} :root[data-theme="dark"] #coinModalBg .c-modal{background:var(--card);color:var(--text);} /* auth */ :root[data-theme="dark"] .auth-view{background:linear-gradient(135deg,#050810 0%,#0d1830 50%,#050810 100%);} :root[data-theme="dark"] .auth-box{background:var(--card);box-shadow:0 25px 60px rgba(0,0,0,0.8);} :root[data-theme="dark"] .auth-box .auth-logo h2, :root[data-theme="dark"] .auth-box .auth-form .form-label{color:var(--text);} :root[data-theme="dark"] .auth-error{background:#3a1414;color:#fca5a5;} :root[data-theme="dark"] .auth-success{background:#0d3b2a;color:#6ee7b7;} :root[data-theme="dark"] .auth-user-bar .aub-name{color:var(--text);} :root[data-theme="dark"] .auth-user-bar .aub-logout{background:var(--card);color:var(--text-secondary);border-color:var(--border);} /* permission badges */ :root[data-theme="dark"] .web-role-badge.consultant{background:#0a2c33;color:#67e8f9;} :root[data-theme="dark"] .web-role-badge.admin{background:#3a1414;color:#fca5a5;} :root[data-theme="dark"] .web-role-badge.dept_manager{background:#3a200a;color:#fdba74;} :root[data-theme="dark"] .web-role-badge.project_manager, :root[data-theme="dark"] .web-role-badge.manager{background:#3a2a08;color:#fcd34d;} :root[data-theme="dark"] .web-role-badge.senior_consultant, :root[data-theme="dark"] .web-role-badge.member{background:#152044;color:#93c5fd;} :root[data-theme="dark"] .web-role-badge.intern{background:#26143a;color:#c4b5fd;} :root[data-theme="dark"] .web-role-badge.viewer{background:#0d3b2a;color:#86efac;} :root[data-theme="dark"] .user-badge-active{background:#0d3b2a;color:#6ee7b7;} :root[data-theme="dark"] .user-badge-inactive{background:var(--surface-3);color:#7c8aa6;} :root[data-theme="dark"] .perm-none{background:var(--surface-2);} :root[data-theme="dark"] .perm-view{background:#152044;} :root[data-theme="dark"] .perm-edit{background:#3a2a08;} :root[data-theme="dark"] .perm-full{background:#0d3b2a;} :root[data-theme="dark"] .cr-status-badge.pending{background:#3a2a08;color:#fcd34d;} :root[data-theme="dark"] .cr-status-badge.approved{background:#0d3b2a;color:#86efac;} :root[data-theme="dark"] .cr-status-badge.rejected{background:#3a1414;color:#fca5a5;} :root[data-theme="dark"] .cr-status-badge.implemented{background:#152044;color:#93c5fd;} /* misc */ :root[data-theme="dark"] .activity-item.pinned{background:#3a2a08;border-color:#a16207;} :root[data-theme="dark"] .saved-toast{background:#0d3b2a;color:#6ee7b7;} :root[data-theme="dark"] .bar-track{background:#222b44;} :root[data-theme="dark"] .team-card .tc-person{background:#152044;border-color:#1d4ed8;color:#93c5fd;} :root[data-theme="dark"] .ra-user-item{border-color:var(--border);} :root[data-theme="dark"] .ra-user-item:hover{background:var(--hover);} :root[data-theme="dark"] .ra-user-item.selected{background:#152044;border-color:var(--primary);} :root[data-theme="dark"] .ra-user-item .ra-detail{color:var(--text-secondary);} /* ============================================================ Tailwind utility overrides — for vat-dashboard.html ============================================================ */ :root[data-theme="dark"] .bg-white{background-color:#131a2c!important;} :root[data-theme="dark"] .bg-gray-50{background-color:#0b1020!important;} :root[data-theme="dark"] .bg-gray-100{background-color:#1a2238!important;} :root[data-theme="dark"] .bg-gray-200{background-color:#222b44!important;} :root[data-theme="dark"] .bg-gray-300{background-color:#2a3349!important;} :root[data-theme="dark"] .bg-blue-50{background-color:#0f1a36!important;} :root[data-theme="dark"] .bg-blue-100{background-color:#152044!important;} :root[data-theme="dark"] .bg-green-50{background-color:#0d2a1c!important;} :root[data-theme="dark"] .bg-green-100{background-color:#0d3b2a!important;} :root[data-theme="dark"] .bg-yellow-50{background-color:#2a2008!important;} :root[data-theme="dark"] .bg-yellow-100{background-color:#3a2a08!important;} :root[data-theme="dark"] .bg-red-50{background-color:#2a1414!important;} :root[data-theme="dark"] .bg-red-100{background-color:#3a1414!important;} :root[data-theme="dark"] .bg-purple-50{background-color:#1a1133!important;} :root[data-theme="dark"] .bg-purple-100{background-color:#26143a!important;} :root[data-theme="dark"] .bg-indigo-50{background-color:#121a3a!important;} :root[data-theme="dark"] .text-gray-400{color:#7c8aa6!important;} :root[data-theme="dark"] .text-gray-500{color:#9aa3bd!important;} :root[data-theme="dark"] .text-gray-600{color:#b3bcd4!important;} :root[data-theme="dark"] .text-gray-700{color:#cbd5e1!important;} :root[data-theme="dark"] .text-gray-800{color:#e6e9f5!important;} :root[data-theme="dark"] .text-gray-900{color:#f1f5f9!important;} :root[data-theme="dark"] .text-black{color:#f1f5f9!important;} :root[data-theme="dark"] .border-gray-100{border-color:#1f2740!important;} :root[data-theme="dark"] .border-gray-200{border-color:#2a3349!important;} :root[data-theme="dark"] .border-gray-300{border-color:#374060!important;} :root[data-theme="dark"] .divide-gray-100>:not([hidden])~:not([hidden]){border-color:#1f2740!important;} :root[data-theme="dark"] .divide-gray-200>:not([hidden])~:not([hidden]){border-color:#2a3349!important;} :root[data-theme="dark"] .shadow, :root[data-theme="dark"] .shadow-md, :root[data-theme="dark"] .shadow-lg, :root[data-theme="dark"] .shadow-xl{box-shadow:0 4px 14px rgba(0,0,0,0.55)!important;} :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea{color-scheme:dark;} :root[data-theme="dark"] .hover\:bg-gray-50:hover{background-color:#1a2238!important;} :root[data-theme="dark"] .hover\:bg-gray-100:hover{background-color:#222b44!important;} :root[data-theme="dark"] .hover\:bg-blue-50:hover{background-color:#152044!important;} /* ============================================================ vat-workflow.html / addon-checklist.html — header strip ============================================================ */ :root[data-theme="dark"] .header{background:linear-gradient(135deg,#0f172a 0%,#13213d 100%)!important;border-bottom-color:#2a3349!important;color:#e6e9f5;} :root[data-theme="dark"] .header h1{color:#f1f5f9!important;} :root[data-theme="dark"] .header p{color:#9aa3bd!important;} /* ============================================================ Floating theme-toggle button (defined here so all pages get it) ============================================================ */ .theme-toggle-btn{ position:fixed;bottom:24px;left:24px;right:auto; width:48px;height:48px;border-radius:50%; background:var(--primary,#0070f3);color:#fff; border:2px solid #fff; font-size:1.15rem;font-weight:700;cursor:pointer; z-index:9998; box-shadow:0 4px 14px rgba(0,0,0,0.25); display:flex;align-items:center;justify-content:center; transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; font-family:inherit;line-height:1;padding:0; } .theme-toggle-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,0.35);} .theme-toggle-btn:active{transform:scale(0.95);} :root[data-theme="dark"] .theme-toggle-btn{ background:#1a2238;color:#fbbf24;border-color:#2a3349; box-shadow:0 4px 14px rgba(0,0,0,0.55); } :root[data-theme="dark"] .theme-toggle-btn:hover{background:#222b44;} /* ============================================================ USER MENU — dark ============================================================ */ :root[data-theme="dark"] .um-trigger{border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);box-shadow:0 2px 8px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.04);} :root[data-theme="dark"] .um-trigger:hover{background:rgba(255,255,255,0.12);border-color:rgba(91,157,255,0.45);} :root[data-theme="dark"] .um-panel{background:var(--card);border-color:var(--border);box-shadow:0 16px 50px rgba(0,0,0,0.7),0 4px 12px rgba(0,0,0,0.4);color:var(--text);} :root[data-theme="dark"] .um-panel::before{background:var(--card);border-left-color:var(--border);border-top-color:var(--border);} :root[data-theme="dark"] .um-header{background:linear-gradient(135deg,rgba(91,157,255,0.1),rgba(139,92,246,0.08));} :root[data-theme="dark"] .um-h-name{color:var(--text);} :root[data-theme="dark"] .um-h-sub{color:var(--text-secondary);} :root[data-theme="dark"] .um-divider{background:var(--border);} :root[data-theme="dark"] .um-item{color:var(--text);} :root[data-theme="dark"] .um-item:hover{background:var(--hover);} :root[data-theme="dark"] .um-item .um-i-icon{background:var(--surface-2);color:var(--primary);} :root[data-theme="dark"] .um-item:hover .um-i-icon{background:rgba(91,157,255,0.18);} :root[data-theme="dark"] .um-item.um-danger{color:var(--danger);} :root[data-theme="dark"] .um-item.um-danger .um-i-icon{background:#3a1414;color:var(--danger);} :root[data-theme="dark"] .um-item.um-danger:hover{background:#2a1414;} :root[data-theme="dark"] .um-item.um-danger:hover .um-i-icon{background:#4a1818;} /* ============================================================ INVENTORY — dark ============================================================ */ :root[data-theme="dark"] .view-inventory{background:var(--bg);} :root[data-theme="dark"] .inv-hero{background:linear-gradient(135deg,#080d1c 0%,#1e1b4b 50%,#080d1c 100%);} :root[data-theme="dark"] .inv-back{border-color:rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);} :root[data-theme="dark"] .inv-back:hover{background:rgba(255,255,255,0.12);} :root[data-theme="dark"] .inv-stat{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1);} :root[data-theme="dark"] .inv-stat:hover{background:rgba(255,255,255,0.08);} :root[data-theme="dark"] .inv-toolbar{background:var(--card);border-color:var(--border);box-shadow:0 8px 24px rgba(0,0,0,0.5);} :root[data-theme="dark"] .inv-search{background:var(--surface-2);border-color:var(--border);color:var(--text);} :root[data-theme="dark"] .inv-search::placeholder{color:var(--text-secondary);} :root[data-theme="dark"] .inv-search:focus{background:var(--card);border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,157,255,0.18);} :root[data-theme="dark"] .inv-filter{background:var(--surface-2);} :root[data-theme="dark"] .inv-fbtn{color:var(--text-secondary);} :root[data-theme="dark"] .inv-fbtn:hover:not(.active){background:var(--hover);color:var(--text);} :root[data-theme="dark"] .inv-fbtn.active{background:var(--card);color:var(--primary);} :root[data-theme="dark"] .inv-sort-sel{background:var(--surface-2);border-color:var(--border);color:var(--text);} :root[data-theme="dark"] .inv-sort-sel:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,157,255,0.18);} :root[data-theme="dark"] .inv-card{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] .inv-card:hover{box-shadow:0 18px 40px rgba(0,0,0,0.6);border-color:var(--primary);} :root[data-theme="dark"] .inv-card .ic-img{background:linear-gradient(135deg,#1a2238,#222b44);} :root[data-theme="dark"] .inv-card .ic-rarity{background:rgba(19,26,44,0.92);color:#cbd5e1;} :root[data-theme="dark"] .inv-card.rarity-rare .ic-rarity, :root[data-theme="dark"] .inv-card.rarity-epic .ic-rarity, :root[data-theme="dark"] .inv-card.rarity-legendary .ic-rarity{color:#fff;} :root[data-theme="dark"] .inv-card .ic-foot{border-top-color:#27314c;} :root[data-theme="dark"] .inv-card .ic-name{color:var(--text);} :root[data-theme="dark"] .inv-card .ic-desc, :root[data-theme="dark"] .inv-card .ic-date{color:var(--text-secondary);} :root[data-theme="dark"] .inv-empty{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] .inv-empty-title{color:var(--text);} :root[data-theme="dark"] .inv-empty-desc{color:var(--text-secondary);} /* ============================================================ NOTIFY POPUP — dark ============================================================ */ :root[data-theme="dark"] .notify-pop-bg{background:rgba(0,0,0,0.6);} :root[data-theme="dark"] .notify-pop{background:var(--card);box-shadow:0 24px 70px rgba(0,0,0,0.7),0 4px 14px rgba(0,0,0,0.4);} :root[data-theme="dark"] .np-title{color:var(--text);} :root[data-theme="dark"] .np-msg{color:var(--text-secondary);} :root[data-theme="dark"] .np-btn.np-btn-cancel{background:var(--surface-2);color:var(--text);border-color:var(--border);} :root[data-theme="dark"] .np-btn.np-btn-cancel:hover{background:#222b44;} :root[data-theme="dark"] .np-input{background:var(--surface-2);color:var(--text);border-color:var(--border);} :root[data-theme="dark"] .np-input:focus{border-color:var(--primary);} /* My Tasks view (mw-*) */ :root[data-theme="dark"] .mw-section{background:var(--card);border-color:var(--border);box-shadow:0 1px 3px rgba(0,0,0,0.4);} :root[data-theme="dark"] .mw-count-pill{background:#152044;color:#a5b4fc;} :root[data-theme="dark"] .mw-section.overdue .mw-count-pill{background:#3a1010;color:#fca5a5;} :root[data-theme="dark"] .mw-section.waiting .mw-count-pill{background:#3a2410;color:#fdba74;} :root[data-theme="dark"] .mw-section.nodate .mw-count-pill{background:#251a3a;color:#c4b5fd;} :root[data-theme="dark"] .mw-task-row{border-bottom-color:var(--border);} :root[data-theme="dark"] .mw-task-row:hover{background:var(--hover);} :root[data-theme="dark"] .mw-cr-row, :root[data-theme="dark"] .mw-mention-row{border-bottom-color:var(--border);} :root[data-theme="dark"] .mw-cr-row:hover, :root[data-theme="dark"] .mw-mention-row:hover{background:var(--hover);} :root[data-theme="dark"] .mw-cr-number{background:#152044;color:#a5b4fc;} :root[data-theme="dark"] .mw-task-due.future{background:var(--surface-2);color:var(--text-secondary);} :root[data-theme="dark"] .mw-pri-chip.medium{background:#152044;color:#a5b4fc;} :root[data-theme="dark"] .mw-pri-chip.low{background:var(--surface-2);color:var(--text-secondary);} :root[data-theme="dark"] .mw-pri-chip.critical{background:#3a1010;color:#fca5a5;} :root[data-theme="dark"] .mw-pri-chip.high{background:#3a2410;color:#fdba74;} :root[data-theme="dark"] .mw-day{background:var(--surface-2);border-color:var(--border);} :root[data-theme="dark"] .mw-day.today{background:#152044;border-color:#3b82f6;} :root[data-theme="dark"] .mw-day-item{background:var(--card);} :root[data-theme="dark"] .mw-day-item.gcal{background:#0f2a20;} :root[data-theme="dark"] .mw-day-item:hover{background:var(--hover);} :root[data-theme="dark"] .mw-day-item.gcal:hover{background:#143a2b;} :root[data-theme="dark"] .mw-mode-btn{background:var(--card);color:var(--text-secondary);border-color:var(--border);} :root[data-theme="dark"] .mw-mode-btn:hover{color:var(--text);} :root[data-theme="dark"] .mw-month-cell{background:var(--surface-2);border-color:var(--border);} :root[data-theme="dark"] .mw-month-cell.today{background:#152044;border-color:#3b82f6;} :root[data-theme="dark"] .mw-month-task{background:var(--card);} :root[data-theme="dark"] .mw-month-task.gcal{background:#0f2a20;} :root[data-theme="dark"] .mw-proj-card{background:var(--card);border-color:var(--border);} :root[data-theme="dark"] .mw-proj-tag{background:var(--surface-2);color:var(--text-secondary);}