:root{
  --bg-color:#f8fafc;
  --surface-color:#FFFFFF;
  --text-color:#1E1E1E;
  --muted-text-color:#4B5563;
  --primary-color:#2979FF;
  --primary-color-hover:#1f6af0;
  --border-color:#E0E0E0;
  --radius-sm:6px;
  --radius-md:8px;
  --shadow-sm:0 2px 6px rgba(0,0,0,0.05);
  --focus-ring:0 0 0 3px rgba(41,121,255,0.15);
  --section-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  --section-header-color:#1E293B;
  --section-accent:#6366f1;
  --section-accent-bg:rgba(99,102,241,.04);
  --section-divider:#E2E8F0;
}

/* Dark theme tokens — Linear-inspired */
:root.dark{
  --bg-color:#0b1120;
  --surface-color:#111827;
  --text-color:#F7F8F8;
  --muted-text-color:#8A8F98;
  --primary-color:#5E6AD2;
  --primary-color-hover:#7170FF;
  --border-color:rgba(255,255,255,.08);
  --shadow-sm:none;
  --section-shadow:none;
  --section-header-color:#F7F8F8;
  --section-accent:#818cf8;
  --section-accent-bg:rgba(129,140,248,.06);
  --section-divider:rgba(255,255,255,.06);
}

/* Native controls honor dark palettes */
.dark{ color-scheme: dark; }

/* Base */
body{background:var(--bg-color); color:var(--text-color)}
.container{padding:0 8px}
button, .btn, .ms-display, input, select, textarea{transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .06s ease}
button:active, .btn:active{transform:translateY(0.5px)}

/* Header */
/* (old site-header removed — now using sidebar+topbar layout) */
.icon-btn{background:#F1F3F5; color:var(--text-color); border:1px solid var(--border-color); border-radius:6px}
.icon-btn svg{ display:inline-block; vertical-align:middle }
.icon-btn#themeToggle svg{ display:none }

/* Notification bell light mode */
.topbar-bell:hover{background:#F1F3F5}
.topbar-bell svg{color:var(--muted-text-color)}
.bell-dot{border-color:var(--surface-color)}
.dark .topbar-bell:hover{background:rgba(255,255,255,.08)}
.dark .topbar-bell svg{color:var(--muted-text-color)}
.dark .bell-dot{border-color:var(--surface-color)}

/* Theme toggle as iOS-style switch */
#themeToggle{ width:44px; height:24px; padding:2px; border-radius:999px; position:relative; background:linear-gradient(180deg,#7FB0FF,#5797FF); border:1px solid rgba(0,0,0,0.06); box-shadow:none; margin-top:0 }
#themeToggle::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#FFFFFF; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .18s ease }
#themeToggle:hover{ filter:brightness(1.02) }
#themeToggle:focus-visible{ outline:none; box-shadow:var(--focus-ring) }
.dark #themeToggle{ background:linear-gradient(180deg,#7FB0FF,#5797FF); border-color:rgba(0,0,0,0.06) }
.dark #themeToggle:hover{ filter:brightness(1.04) }
.dark #themeToggle::after{ transform:translateX(20px) }
/* (old icon-btn#notifBtn removed — now using .topbar-bell) */
/* Notification dropdown — light mode */
.notif-dropdown{ background:var(--surface-color); border-color:var(--border-color); box-shadow:0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) }
.notif-header{ border-bottom-color:var(--border-color) }
.notif-header-title{ color:var(--text-color) }
.notif-item-title{ color:var(--text-color) }
.notif-item-desc,.notif-item-time{ color:var(--muted-text-color) }
.notif-item:hover{ background:rgba(0,0,0,.04) }
.notif-item--unread{ background:rgba(41,121,255,.06) }
.notif-item--unread:hover{ background:rgba(41,121,255,.1) }
.notif-item-icon{ background:rgba(0,0,0,.05) }
.notif-item-icon svg{ color:var(--primary-color) }
.notif-item-dot{ background:var(--primary-color) }
.notif-empty{ color:var(--muted-text-color) }
/* Dark mode — inherits app.css defaults */
.dark .notif-dropdown{ background:var(--surface-color); border-color:rgba(255,255,255,.08) }

/* Theme switch cluster */
.theme-switch{ display:inline-flex; align-items:center; gap:8px; margin-left:0; height:36px }
.theme-label{ font-weight:600; font-size:13px; color:#111827; display:inline-flex; align-items:center; height:24px }
.label-dark{ color:#9AA4B2 }
.dark .label-dark{ color:#e5e7eb }

/* Sidebar user menu popup */
.sidebar-user-menu{background:var(--surface-color); border:1px solid var(--border-color); box-shadow:var(--shadow-sm)}
.user-menu-name{color:var(--text-color)}
.user-menu-email{color:var(--muted-text-color)}
.user-menu-sep{background:var(--border-color)}
.user-menu-action{color:var(--muted-text-color)}
.dark .sidebar-user-menu{background:#1a2235; border-color:rgba(255,255,255,.09)}

/* Layout */
.sidebar{background:var(--surface-color); border-right:1px solid var(--border-color)}
.sidebar-header{border-bottom:1px solid var(--border-color)}
.sidebar-brand{color:var(--text-color)}
.sidebar-brand span{color:inherit}
/* sidebar-logo is now an <img>, no background needed */
.sidebar-toggle{background:var(--surface-color); border:1px solid var(--border-color); color:var(--muted-text-color)}
.sidebar-toggle:hover{background:#F1F3F5; color:var(--text-color)}
.nav-group-label{color:var(--muted-text-color)}
.nav-item{color:var(--muted-text-color)}
.nav-item:hover{background:#EFF4FF; color:var(--text-color)}
.nav-item.active{background:#EAF2FF; color:var(--primary-color); font-weight:600}
.sidebar-settings-wrap{padding:4px 8px 0}
.sidebar-footer{border-top:1px solid var(--border-color); color:var(--muted-text-color)}
.avatar{background:linear-gradient(135deg, var(--primary-color), #a78bfa)}
.user-name{color:var(--text-color)}
.user-role{color:var(--muted-text-color)}

/* Topbar */
.topbar{background:var(--surface-color); border-bottom:1px solid var(--border-color)}
.topbar-left h1{color:var(--text-color)}
.topbar-hamburger{border:1px solid var(--border-color); color:var(--text-color)}

/* Cards */
.card{background:var(--surface-color); border:1px solid var(--border-color); border-radius:8px; box-shadow:var(--shadow-sm)}
.card-header{border-bottom:1px solid var(--border-color)}
/* Editor – light */
#editor .card-header{background:var(--surface-color); border-bottom:none}
#editor{background:var(--bg-color)}
.editor-section{background:var(--surface-color); border-color:var(--border-color); box-shadow:var(--section-shadow)}
.editor-section:hover{box-shadow:0 2px 6px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.06)}
.editor-section-title{color:var(--section-header-color); border-bottom-color:var(--section-divider)}
.editor-section-title::before{background:var(--section-accent)}
.section-icon{color:var(--section-accent)}
.editor-label{color:var(--muted-text-color)}
#editor input, #editor select, #editor textarea, #noticeEditor input, #noticeEditor select, #noticeEditor textarea{background-color:#fff; color:var(--text-color); border-color:var(--border-color)}
#editor input:focus, #editor select:focus, #editor textarea:focus, #noticeEditor input:focus, #noticeEditor select:focus, #noticeEditor textarea:focus{border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(41,121,255,.12)}
#editor .ss-display, #noticeEditor .ss-display{background-color:#fff; color:var(--text-color); border-color:var(--border-color)}
.editor-dropzone{border-color:var(--border-color)}
.editor-dropzone:hover{border-color:var(--primary-color); background:rgba(41,121,255,.03)}
.editor-dropzone span{color:var(--text-color)}
.editor-dropzone small{color:var(--muted-text-color)}
.note-file-label{color:var(--primary-color)}
.note-file-label:hover{background:rgba(41,121,255,.06)}
/* Export page */
.export-desc{color:var(--muted-text-color)}
#panelExport, #panelImport{background:transparent; border:none; box-shadow:none}
.export-page .editor-section{box-shadow:var(--section-shadow)}
/* Compliance Builder — light */
#panelStandards{background:transparent; border:none; box-shadow:none}
.builder-heading{color:var(--text-color)}
.builder-body .table-wrap{border-color:var(--border-color); box-shadow:var(--shadow-sm)}
.builder-add-row{background:var(--surface-color); border-color:var(--border-color)}
.builder-add-row input, .builder-add-row select{background-color:var(--surface-color); color:var(--text-color); border-color:var(--border-color); border-radius:8px; padding:7px 10px; font-size:13px}
.builder-add-row .ss-display{background-color:var(--surface-color); color:var(--text-color); border-color:var(--border-color)}
.builder-search{background:var(--surface-color); border-color:var(--border-color)}
.builder-search input{color:var(--text-color)}
#panelStandards .table thead th{background:#fafbfc; color:#64748b; border-bottom:2px solid var(--border-color)}
#panelStandards .table tbody tr:nth-child(even){background:#f1f5f9}
#panelStandards .table tbody tr:hover{background:#eef2ff}
#panelHrBuilder .table thead th, #panelHrSiteBuilder .table thead th{background:#fafbfc; color:#64748b; border-bottom:2px solid var(--border-color)}
#panelHrBuilder .table tbody tr:nth-child(even), #panelHrSiteBuilder .table tbody tr:nth-child(even){background:#f1f5f9}
#panelHrBuilder .table tbody tr:hover, #panelHrSiteBuilder .table tbody tr:hover{background:#eef2ff}
#panelExport .editor-label{color:var(--muted-text-color)}
#panelExport input, #panelExport select{background-color:var(--surface-color); color:var(--text-color); border-color:var(--border-color)}
#panelExport .ms-display{background-color:var(--surface-color); border-color:var(--border-color)}
/* Activity — light */
.activity-filter .editor-label{color:var(--muted-text-color)}
.activity-filter select{background-color:var(--surface-color); color:var(--text-color); border-color:var(--border-color)}
.activity-filter .ms-display{background-color:var(--surface-color); color:var(--text-color); border-color:var(--border-color)}
.activity-charts-grid .chart-card{background:var(--surface-color); border:1px solid var(--border-color); box-shadow:var(--shadow-sm)}
.activity-charts-grid .chart-card-header h3{color:var(--text-color)}
.activity-charts-grid .chart-subtitle{color:var(--muted-text-color)}
.note-form{background:#f8fafc; border-color:#e2e8f0}
.note-form:focus-within{border-color:var(--primary-color)}
.note-form-bottom{border-top-color:#e2e8f0}
.comment-item{border-bottom-color:#f1f5f9}
.comment-author{color:var(--text-color)}
.comment-body{color:var(--text-color)}

/* Editor – dark (Linear-inspired) */
.dark #editor, .dark #noticeEditor{background:var(--bg-color)}
.dark .editor-bar{background:var(--surface-color); border-color:rgba(255,255,255,.08); box-shadow:none}
.dark .editor-bar__back{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); color:#8A8F98}
.dark .editor-bar__back:hover{background:rgba(255,255,255,.1); color:#F7F8F8}
.dark .editor-bar__title{color:#F7F8F8}
.dark .editor-bar__sep{background:rgba(255,255,255,.08)}
.dark .task-status-chip{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); color:#8A8F98}
.dark .editor-bar__btn--primary{background:#5E6AD2; color:#fff}
.dark .editor-bar__btn--primary:hover{background:#7170FF}
.dark .editor-bar__btn--complete{background:#27A644; color:#fff}
.dark .editor-bar__btn--complete:hover{background:#22c55e}
.dark .editor-bar__btn--reject{background:rgba(235,87,87,.08); color:#EB5757; border-color:rgba(235,87,87,.15)}
.dark .editor-bar__btn--reject:hover{background:rgba(235,87,87,.14)}
.dark .editor-bar__btn--neutral{background:rgba(255,255,255,.05); color:#D0D6E0; border-color:rgba(255,255,255,.08)}
.dark .editor-bar__btn--neutral:hover{background:rgba(255,255,255,.1)}
.dark .editor-bar__btn--request-edit{background:rgba(249,115,22,.14); color:#FDBA74; border-color:rgba(249,115,22,.28); box-shadow:none}
.dark .editor-bar__btn--request-edit:hover{background:rgba(249,115,22,.22); color:#FED7AA}
.dark .editor-bar__btn--delete{background:rgba(255,255,255,.05); color:#EB5757; border-color:rgba(235,87,87,.15)}
.dark .editor-bar__btn--delete:hover{background:rgba(235,87,87,.08)}
.dark .editor-section{background:var(--surface-color); border-color:var(--border-color); box-shadow:none}
.dark .editor-section:hover{box-shadow:none; border-color:rgba(255,255,255,.12)}
.dark .editor-section-title{color:var(--section-header-color); border-bottom-color:var(--section-divider)}
.dark .editor-section-title::before{background:var(--section-accent)}
.dark .section-icon{color:var(--section-accent)}
.dark .editor-label{color:#8A8F98}
.dark #editor input, .dark #editor select, .dark #editor textarea, .dark #noticeEditor input, .dark #noticeEditor select, .dark #noticeEditor textarea{background-color:#0f1a2e; color:var(--text-color); border-color:rgba(148,163,184,.18)}
.dark #editor input:focus, .dark #editor select:focus, .dark #editor textarea:focus, .dark #noticeEditor input:focus, .dark #noticeEditor select:focus, .dark #noticeEditor textarea:focus{border-color:#5E6AD2; box-shadow:0 0 0 2px rgba(94,106,210,.2)}
.dark #editor .ss-display, .dark #noticeEditor .ss-display{background-color:#0f1a2e; color:var(--text-color); border-color:rgba(148,163,184,.18)}
.dark #editor input::placeholder, .dark #editor textarea::placeholder, .dark #noticeEditor input::placeholder, .dark #noticeEditor textarea::placeholder{color:#62666D}
.dark .editor-dropzone{border-color:rgba(148,163,184,.18); background:#0c1525}
.dark .fc-image-dropzone{border-color:rgba(148,163,184,.18); background:#0c1525}
.dark .fc-image-dropzone:hover{border-color:#5E6AD2; background:rgba(94,106,210,.06)}
.dark .fc-image-dropzone span{color:#D0D6E0}
.dark .fc-image-dropzone small{color:#62666D}
.dark .fc-image-dropzone svg{color:#62666D}
.dark .fc-image-preview{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08)}
.dark .fc-image-preview .fc-image-name{color:#F7F8F8}
.dark .fc-image-preview .fc-image-remove:hover{background:rgba(239,68,68,.1)}
.dark .editor-dropzone:hover{border-color:#5E6AD2; background:rgba(94,106,210,.06)}
.dark .editor-dropzone span{color:#D0D6E0}
.dark .editor-dropzone small{color:#62666D}
.dark .editor-dropzone svg{color:#62666D}
/* Dark: Export page */
.dark #panelExport input, .dark #panelExport select, .dark #panelImport input, .dark #panelImport select{background-color:#0f1a2e; border-color:rgba(148,163,184,.18)}
.dark #panelExport .ms-display, .dark #panelImport .ms-display{background-color:#0f1a2e; border-color:rgba(148,163,184,.18)}
/* Activity — dark */
.dark .activity-filter select{background-color:#0f1a2e; color:var(--text-color); border-color:rgba(148,163,184,.18)}
.dark .activity-filter .ms-display{background-color:#0f1a2e; color:var(--text-color); border-color:rgba(148,163,184,.18)}
.dark .activity-charts-grid .chart-card{background:var(--surface-color); border-color:rgba(255,255,255,.08); box-shadow:none}
.dark .activity-charts-grid .chart-card-header h3{color:#F7F8F8}
.dark .activity-charts-grid .chart-subtitle{color:#8A8F98}
.dark .series-label{color:#D0D6E0}
.dark .toggle-switch .toggle-slider{background:rgba(255,255,255,.15)}
.dark .toggle-switch input:checked + .toggle-slider{background:#5E6AD2}
.dark .export-desc{color:#8A8F98}
/* Dark: Compliance Builder */
.dark .builder-heading{color:#F7F8F8}
.dark .builder-body .table-wrap{border-color:rgba(255,255,255,.08); box-shadow:none}
.dark .builder-add-row{background:var(--surface-color); border-color:rgba(255,255,255,.08); box-shadow:none}
.dark .builder-add-row input, .dark .builder-add-row select{background-color:#0f1a2e; color:var(--text-color); border-color:rgba(148,163,184,.18)}
.dark .builder-add-row .ss-display{background-color:#0f1a2e; color:var(--text-color); border-color:rgba(148,163,184,.18)}
.dark .builder-search{background:#0f1a2e; border-color:rgba(148,163,184,.18)}
.dark .builder-search:focus-within{border-color:#5E6AD2; box-shadow:0 0 0 2px rgba(94,106,210,.15)}
.dark .builder-search input{color:var(--text-color)}
.dark .builder-search input::placeholder{color:#62666D}
.dark #panelStandards .table thead th{background:var(--surface-color); color:#b0b8c4; border-bottom:1px solid rgba(255,255,255,.08)}
.dark #panelStandards .table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.dark #panelStandards .table tbody tr:hover{background:rgba(94,106,210,.08)}
.dark #panelHrBuilder .table thead th, .dark #panelHrSiteBuilder .table thead th{background:var(--surface-color); color:#b0b8c4; border-bottom:1px solid rgba(255,255,255,.08)}
.dark #panelHrBuilder .table tbody tr:nth-child(even), .dark #panelHrSiteBuilder .table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.dark #panelHrBuilder .table tbody tr:hover, .dark #panelHrSiteBuilder .table tbody tr:hover{background:rgba(94,106,210,.08)}
.dark .note-form{background:#0c1525; border-color:rgba(148,163,184,.18)}
.dark .note-form:focus-within{border-color:#5E6AD2}
.dark .note-form-input textarea{color:var(--text-color)}
.dark .note-form-input textarea::placeholder{color:#64748b}
.dark .note-form-bottom{border-top-color:var(--border-color)}
.dark .note-file-label{color:#818cf8}
.dark .note-file-label:hover{background:rgba(99,102,241,.1)}
.dark .note-file-chip{background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.25); color:#a5b4fc}
.dark .note-file-chip button{color:#a5b4fc}
.dark .btn.logs-btn{background:var(--bg-color); border-color:var(--border-color); color:#94a3b8}
.dark .btn.logs-btn:hover{background:rgba(255,255,255,.04); color:#e2e8f0; border-color:rgba(255,255,255,.12)}
.dark .comment-item{border-bottom-color:var(--border-color)}
.dark .comment-author{color:#e2e8f0}
.dark .comment-body{color:#D0D6E0}
.dark .comment-time{color:#8A8F98; background:rgba(255,255,255,.06)}
.dark .comment-right-info{color:#62666D}
.dark .comment-attachment-col .attachment-link{color:#818cf8}
.dark .note-list-empty{color:#62666D}

/* Site Builder footer bar (light and dark) */
/* Site Builder — light */
#panelSiteBuilder{background:transparent; border:none; box-shadow:none}
.site-builder-table-wrap{border-color:var(--border-color); box-shadow:var(--shadow-sm); background:var(--surface-color)}
#stdHeaderRow{background:#fafbfc; border-bottom-color:var(--border-color)}
.site-builder-footer{background:var(--surface-color); border-color:var(--border-color)}
.site-builder-fc select{background-color:var(--surface-color); color:var(--text-color); border-color:var(--border-color)}
.site-builder-count{color:var(--muted-text-color)}
.site-builder-fc .ss-display{background-color:var(--surface-color); color:var(--text-color); border-color:var(--border-color)}
#stdApplyRows .ss-display{background-color:var(--surface-color); color:var(--text-color); border-color:var(--border-color)}
/* Site Builder — dark */
.dark .site-builder-table-wrap{border-color:rgba(255,255,255,.08); box-shadow:none}
.dark #stdHeaderRow{background:var(--surface-color); border-bottom-color:rgba(255,255,255,.08)}
.dark #stdHeaderRow .grid{color:#b0b8c4}
.dark .site-builder-table-wrap .grid{border-bottom-color:rgba(255,255,255,.06)}
#stdApplyRows > .grid:nth-child(even){background:#f1f5f9}
#stdApplyRows .grid:hover,
#stdApplyRows > .grid:nth-child(even):hover{background:#eef2ff}
.dark #stdApplyRows > .grid:nth-child(even){background:rgba(255,255,255,.02)}
.dark #stdApplyRows .grid:hover,
.dark #stdApplyRows > .grid:nth-child(even):hover{background:rgba(94,106,210,.08)}
.dark #stdApplyRows .ss-display{background-color:#0f1a2e; color:var(--text-color); border-color:rgba(148,163,184,.18)}
.dark .site-builder-fc .ss-display{background-color:#0f1a2e; color:var(--text-color); border-color:rgba(148,163,184,.18)}
.dark .site-builder-footer{background:var(--surface-color); border-color:rgba(255,255,255,.08); box-shadow:none}
.dark .site-builder-fc select{background-color:#0f1a2e; color:var(--text-color); border-color:rgba(148,163,184,.18)}
.dark .site-builder-count{color:#8A8F98}

/* Buttons */
.btn{background:#F1F3F5; color:var(--text-color); border:1px solid var(--border-color); border-radius:6px}
.btn:hover{filter:none; background:#E9ECEF}
.btn:disabled,
.btn[disabled],
button:disabled{
  opacity:0.55;
  cursor:not-allowed;
  filter:none;
  box-shadow:none;
}
.btn:disabled:hover,
.btn[disabled]:hover,
button:disabled:hover{
  filter:none;
}
.btn.primary{background:var(--primary-color); color:#fff; border-color:var(--primary-color); transition:transform 0.1s, box-shadow 0.1s, background 0.2s}
.btn.primary:hover{background:var(--primary-color-hover); border-color:var(--primary-color-hover)}
.btn.primary:active{background:var(--primary-color-hover); transform:scale(0.95); box-shadow:inset 0 2px 4px rgba(0,0,0,0.2)}
.btn.success{background:#10B981; color:#fff; border-color:#10B981; transition:transform 0.1s, box-shadow 0.1s, background 0.2s; display:inline-flex; align-items:center; gap:6px}
.btn.success:hover{background:#059669; border-color:#059669}
.btn.success:active{background:#059669; transform:scale(0.95); box-shadow:inset 0 2px 4px rgba(0,0,0,0.2)}
.btn-icon{display:inline-flex; align-items:center; justify-content:center; font-size:14px}
.btn.success .btn-icon{width:18px; height:18px; border-radius:50%; background:#34D399; color:#fff; font-weight:600}
.muted{color:var(--muted-text-color); font-size:12px}
.btn.danger{background:#F3F4F6; color:#1E1E1E; border-color:#EF4444; display:inline-flex; align-items:center; gap:6px; transition:transform 0.1s, box-shadow 0.1s, background 0.2s}
.btn.danger:hover{background:#E5E7EB; border-color:#EF4444}
.btn.danger:active{background:#E5E7EB; transform:scale(0.95); box-shadow:inset 0 2px 4px rgba(0,0,0,0.2)}
.btn.danger .btn-icon{color:#EF4444}
.btn.icon{padding:4px 6px; font-size:12px; background:#FFFFFF; border-color:var(--border-color)}
.btn.icon.success{border-color:#10B981; color:#10B981; background:#FFFFFF}
.btn.icon.reject{border-color:#EF4444; color:#EF4444; background:#FFFFFF}
.btn.icon.edit{border-color:var(--primary-color); color:var(--primary-color); background:#FFFFFF}
.btn.icon.eye{border-color:var(--border-color); color:var(--text-color); background:#FFFFFF}
/* Status chip inside dark editor bar — keep dark styling in both themes */

/* Forms */
label span{color:var(--muted-text-color)}
input, select, textarea{background-color:#FFFFFF; color:var(--text-color); border:1px solid var(--border-color); border-radius:8px}
select{background-color:#fff}
select:hover{border-color:#94a3b8}
select option{padding:6px 10px}
select option:checked{background:#eef2ff; color:#4f46e5}
input:focus, select:focus, textarea:focus{outline:none; box-shadow:var(--focus-ring); border-color:var(--primary-color); background:#FFFFFF}

/* Tabs */
.tabs{border-bottom:1px solid var(--border-color)}
.tabs [role=tab]{background:#FFFFFF; color:var(--muted-text-color); border:1px solid var(--border-color); border-radius:999px; padding:8px 14px}
.tabs [aria-selected=true]{background:#EAF2FF; border-color:#D5E3FF; color:var(--primary-color)}
.tabs [role=tab]:focus-visible{outline:none; box-shadow:var(--focus-ring)}
/* Dashboard filters - light */
#panelDashboard .grid.two-line label > span{color:var(--muted-text-color)}
#panelDashboard .grid.two-line .ms-display{background-color:#FFFFFF; border-color:var(--border-color); border-radius:8px; color:var(--text-color)}
#panelDashboard .grid.two-line input{background-color:#FFFFFF; border-color:var(--border-color); border-radius:8px; color:var(--text-color)}
#panelDashboard .grid.two-line select{background-color:#FFFFFF; border-color:var(--border-color); border-radius:8px; color:var(--text-color)}
#panelDashboard .grid.two-line .filter-reset{background:transparent; color:var(--muted-text-color); border:1px solid var(--border-color)}
#panelDashboard .grid.two-line .filter-reset:hover{background:var(--hover-bg); color:var(--text-color)}
#panelDashboard .grid.two-line .filter-reset.secondary{background:#fbbf24; border-color:#f59e0b; color:#1f2937}
#panelDashboard .grid.two-line .filter-reset.secondary:hover{background:#f59e0b; border-color:#d97706; color:#111827}

/* Dashboard tab group - light */
.tab-group{background:#f1f5f9}
.tab-item{color:var(--muted-text-color)}
.tab-item:hover{color:var(--text-color)}
.tab-item.active, .tab-item[aria-selected="true"]{background:#FFFFFF; color:var(--text-color); box-shadow:var(--shadow-sm)}

/* Dashboard KPI cards - light */
.kpi-card{background:#FFFFFF; border:1px solid var(--border-color); box-shadow:var(--shadow-sm)}
.kpi-label{color:var(--muted-text-color)}
.kpi-icon.green{background:#dcfce7; color:#16a34a}
.kpi-icon.red{background:#fee2e2; color:#dc2626}
.kpi-icon.blue{background:#dbeafe; color:#2563eb}
.kpi-icon.amber{background:#fef3c7; color:#d97706}
.kpi-value{color:var(--text-color)}
.kpi-sub{color:var(--muted-text-color)}
.kpi-bar{background:#f1f5f9}
.chart-subtitle{color:var(--muted-text-color)}

/* Search panel */
.search-panel{border-bottom:1px solid var(--border-color); padding:8px 6px; background:var(--surface-color)}
.search-panel input, .search-panel select{background-color:#FFFFFF; border:1px solid var(--border-color)}
.filter-bar{border:none; background:transparent; padding:0}
.filter-bar .grid{border:none; background:transparent; padding:0}

/* Multi-select */
.ms-display{background-color:#fff; border:1px solid var(--border-color); border-radius:8px; color:var(--text-color)}
.ms-display:hover{border-color:#94a3b8}
.ms-display.open{box-shadow:0 0 0 3px rgba(99,102,241,.12); border-color:var(--primary-color)}
.ms-menu{background:#fff; border:1px solid var(--border-color); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.1)}
.ms-search input{background-color:#fff; border:1px solid var(--border-color); color:var(--text-color)}
.ms-search input:focus{border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(41,121,255,.12)}
.ms-item{color:var(--text-color)}
.ms-item:hover{background:#f8fafc}
.ms-item input{accent-color:var(--primary-color)}
.ms-actions{border-top:1px solid var(--border-color)}
.ms-actions .btn{background:#f8fafc; border:1px solid var(--border-color); color:var(--text-color)}
.ms-actions .btn:hover{background:#f1f5f9}
.ms-actions .btn.primary{background:var(--primary-color); color:#fff; border-color:var(--primary-color)}
.ms-actions .btn.primary:hover{background:var(--primary-color-hover); border-color:var(--primary-color-hover)}

/* Searchable single-select – light */
.ss-display{background-color:#fff; border:1px solid var(--border-color); color:var(--text-color)}
.ss-display:hover{border-color:#94a3b8}
.ss-display.open{border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(41,121,255,.12)}
.ss-display.ss-placeholder{color:#94a3b8}
.ss-menu{background:#fff; border:1px solid var(--border-color); box-shadow:0 8px 24px rgba(0,0,0,.1)}
.ss-search input{background-color:#fff; border:1px solid var(--border-color); color:var(--text-color)}
.ss-search input:focus{border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(41,121,255,.12)}
.ss-item{color:var(--text-color)}
.ss-item:hover{background:#f8fafc}
.ss-item.selected{background:#eef2ff; color:#4f46e5; font-weight:600}
.ss-item--add{color:var(--primary-color); border-color:#f1f5f9}

/* Tables */
.table{background:#FFFFFF}
.table th, .table td{border-bottom:1px solid var(--border-color); color:var(--text-color)}
.table tbody tr:hover{background:#F6F8FC}
.th-sort{color:var(--muted-text-color)}
.th-sort:hover{color:var(--primary-color)}

/* Compliance tracker: outer panel transparent, table area is the card */
#panelTasks.tracker-panel{background:transparent; border:none; box-shadow:none}
#panelForMe .table-wrap, #panelByMe .table-wrap{border:1px solid var(--border-color); box-shadow:var(--shadow-sm)}

/* Compliance tracker: card-header, filter labels, reset button */
#panelTasks .card-header{border-bottom:none}
#panelTasks .search-panel label > span{color:var(--muted-text-color)}
#panelTasks .search-panel input, #panelTasks .search-panel .ms-display{background-color:#FFFFFF; border:1px solid var(--border-color); border-radius:8px}
#panelTasks .search-panel .filter-reset{background:transparent; border:1px solid var(--border-color); color:var(--muted-text-color)}
#panelTasks .search-panel .filter-reset.secondary{background:#fbbf24; border-color:#f59e0b; color:#1f2937}
#panelHrReturns .search-panel input, #panelHrReturns .search-panel select, #panelHrReturns .search-panel .ms-display{background-color:#FFFFFF; border:1px solid var(--border-color); border-radius:8px}
#panelHrReturns .search-panel .filter-reset{background:transparent; border:1px solid var(--border-color); color:var(--muted-text-color)}

/* Badges — light */
.badge-success{background:#dcfce7; color:#16a34a}
.badge-warning{background:#fef3c7; color:#d97706}
.badge-danger{background:#fee2e2; color:#dc2626}
.badge-info{background:#dbeafe; color:#2563eb}
.badge-neutral{background:#f1f5f9; color:#64748b}
.badge-purple{background:#ede9fe; color:#7c3aed}

/* Act buttons — light */
.act-approve{background:#dcfce7; color:#16a34a}
.act-reject{background:#fee2e2; color:#dc2626}
.act-edit{background:#dbeafe; color:#2563eb}

/* Task list sticky headers */
#panelForMe .table thead th,
#panelByMe .table thead th{background:#fafbfc; color:#64748b; border-bottom:2px solid var(--border-color)}
/* Zebra striping */
#panelForMe .table tbody tr:nth-child(even):not(.virtual-spacer),
#panelByMe .table tbody tr:nth-child(even):not(.virtual-spacer){background:#f1f5f9}
/* Hover: indigo tint — distinct from both odd (#fff) and even (#f1f5f9) rows */
#panelForMe .table tbody tr:hover,
#panelForMe .table tbody tr:nth-child(even):hover,
#panelByMe .table tbody tr:hover,
#panelByMe .table tbody tr:nth-child(even):hover{background:#eef2ff}

/* HR Returns tracker — match Compliance tracker (light) */
#panelHrReturns.tracker-panel{background:transparent; border:none; box-shadow:none}
#panelHrReturns .card-header{border-bottom:none}
#panelHrReturns .search-panel label > span{color:var(--muted-text-color)}
#hrPanelForMe .table-wrap, #hrPanelOthers .table-wrap{border:1px solid var(--border-color); box-shadow:var(--shadow-sm)}
#hrPanelForMe .table thead th,
#hrPanelOthers .table thead th{background:#fafbfc; color:#64748b; border-bottom:2px solid var(--border-color)}
#hrPanelForMe .table tbody tr:nth-child(even):not(.virtual-spacer),
#hrPanelOthers .table tbody tr:nth-child(even):not(.virtual-spacer){background:#f1f5f9}
#hrPanelForMe .table tbody tr:hover,
#hrPanelForMe .table tbody tr:nth-child(even):hover,
#hrPanelOthers .table tbody tr:hover,
#hrPanelOthers .table tbody tr:nth-child(even):hover{background:#eef2ff}

/* Notices tracker: outer panel transparent, table area is the card */
#panelNotices.tracker-panel{background:transparent; border:none; box-shadow:none}
#panelNoticesForMe .table-wrap, #panelNoticesOthers .table-wrap{border:1px solid var(--border-color); box-shadow:var(--shadow-sm)}
/* Notices tracker: card-header, filter labels, reset button */
#panelNotices .card-header{border-bottom:none}
#panelNotices .search-panel label > span{color:var(--muted-text-color)}
#panelNotices .search-panel .ms-display{background-color:#FFFFFF; border:1px solid var(--border-color); border-radius:8px}
#panelNotices .search-panel .filter-reset{background:transparent; border:1px solid var(--border-color); color:var(--muted-text-color)}
#panelNotices .search-panel .filter-reset.secondary{background:#fbbf24; border-color:#f59e0b; color:#1f2937}
/* Notice list sticky headers */
#panelNoticesForMe .table thead th,
#panelNoticesOthers .table thead th{background:#fafbfc; color:#64748b; border-bottom:2px solid var(--border-color)}
/* Zebra striping */
#panelNoticesForMe .table tbody tr:nth-child(even):not(.virtual-spacer),
#panelNoticesOthers .table tbody tr:nth-child(even):not(.virtual-spacer){background:#f1f5f9}
/* Hover: indigo tint */
#panelNoticesForMe .table tbody tr:hover,
#panelNoticesForMe .table tbody tr:nth-child(even):hover,
#panelNoticesOthers .table tbody tr:hover,
#panelNoticesOthers .table tbody tr:nth-child(even):hover{background:#eef2ff}

/* Due tag only */
.due--overdue{color:#B91C1C; font-weight:600}

/* Attachments column center */
.attachments-cell{ text-align:center }

/* Chips – light overrides handled by app.css defaults */

/* Add Stakeholder Button */
.add-stakeholder-btn{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px dashed #D1D5DB; border-radius:999px; background:transparent; cursor:pointer; transition:all 0.2s; font-family:inherit}
.add-stakeholder-btn:hover{border-color:#9CA3AF; background:rgba(41,121,255,0.05)}
.add-stakeholder-btn:active{transform:scale(0.98)}
.add-stakeholder-icon{width:20px; height:20px; border-radius:50%; background:#2979FF; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; flex-shrink:0}
.add-stakeholder-label{color:#2979FF; font-size:14px; font-weight:500}

/* Alerts / Toasts */
.alert.info{background:#FFFFFF; border:1px solid var(--border-color); color:var(--text-color)}
.toast{background:#FFFFFF; border:1px solid var(--border-color); color:var(--text-color)}

/* Notes */
.note{background:#FFFFFF; border:1px solid var(--border-color)}
.note .meta{color:var(--muted-text-color)}

/* Charts */
.chart-card{background:#FFFFFF; border:1px solid var(--border-color); border-radius:12px; box-shadow:var(--shadow-sm)}
.chart-card-header{border-bottom:none}
.chart-max{background:#FFFFFF}
:root:not(.dark) .chart-card-header h3{font-weight:700; color:var(--text-color)}

/* Light skeleton placeholders (loading rows) */
.skeleton{background:linear-gradient(90deg, #F3F6FA, #FFFFFF, #F3F6FA); background-size:200% 100%; animation:shimmer 1.2s infinite}
.skeleton.text{height:12px; border-radius:6px}
.skeleton.row{height:36px; border-bottom:1px solid var(--border-color)}
@keyframes shimmer{0%{background-position:200% 0} 100%{background-position:-200% 0}}

/* Dark skeleton placeholders (loading rows) */
.dark .skeleton{background:linear-gradient(90deg, var(--bg-color), var(--surface-color), var(--bg-color)); background-size:200% 100%; animation:shimmer 1.2s infinite}
.dark .skeleton.text{background:var(--surface-color)}
.dark .skeleton.row{height:36px; border-bottom:1px solid var(--border-color)}
.dark .table .skeleton td{background:transparent}
.dark .table tbody tr.skeleton:hover{background:inherit}

/* Date picker visibility in light theme */
input[type="date"]{ color: var(--text-color); background: var(--surface-color); }
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 1;
  filter: invert(31%) sepia(79%) saturate(2068%) hue-rotate(202deg) brightness(98%) contrast(101%);
  cursor: pointer;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator{
  filter: invert(26%) sepia(85%) saturate(2570%) hue-rotate(203deg) brightness(95%) contrast(104%);
}
input[type="date"]:focus::-webkit-calendar-picker-indicator{
  filter: invert(20%) sepia(94%) saturate(2960%) hue-rotate(204deg) brightness(92%) contrast(108%);
}
/* Improve inner text visibility in some browsers */
input[type="date"]::-webkit-datetime-edit, 
input[type="date"]::-webkit-datetime-edit-text, 
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field{ color: var(--text-color); }

/* Dark date input: indicator legibility */
.dark input[type="date"]{ color: var(--text-color); background: rgba(255,255,255,.05); border:1px solid var(--border-color) }
.dark input[type="date"]::-webkit-calendar-picker-indicator{ opacity: 1; filter: none }
.dark input[type="date"]{ 
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.dark input[type="date"]:focus{ border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(41,121,255,0.25) }
.dark input[type="date"]::-webkit-datetime-edit, 
.dark input[type="date"]::-webkit-datetime-edit-text, 
.dark input[type="date"]::-webkit-datetime-edit-month-field,
.dark input[type="date"]::-webkit-datetime-edit-day-field,
.dark input[type="date"]::-webkit-datetime-edit-year-field{ color: var(--text-color) }
.dark input[type="date"]::-webkit-calendar-picker-indicator{
  background: transparent;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--primary-color);
  filter: hue-rotate(0deg) saturate(100%) brightness(100%);
}

/* Calendar icon for custom date inputs */
.date-input{
  padding-right: 36px;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232979FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
.dark .date-input{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232979FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}

/* Custom date picker (DD-MM-YYYY) */
.date-picker{
  position:absolute;
  z-index:3000;
  width:260px;
  background:var(--surface-color);
  border:1px solid var(--border-color);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,0.2);
  padding:8px;
  font-size:13px;
}
.date-picker[hidden]{ display:none; }
.dp-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:6px;
}
.dp-title{
  display:flex;
  gap:6px;
  align-items:center;
}
.dp-select{
  background:var(--surface-color);
  color:var(--text-color);
  border:1px solid var(--border-color);
  border-radius:6px;
  padding:4px 6px;
  font-size:13px;
}
.dp-nav{
  background:transparent;
  border:1px solid var(--border-color);
  color:var(--text-color);
  width:28px;
  height:28px;
  border-radius:6px;
  cursor:pointer;
}
.dp-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-bottom:4px;
  color:var(--muted-text-color);
  font-size:12px;
  text-align:center;
}
.dp-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
}
.dp-day{
  border:1px solid transparent;
  background:transparent;
  color:var(--text-color);
  border-radius:6px;
  height:28px;
  cursor:pointer;
}
.dp-day:hover{ border-color:var(--primary-color); }
.dp-day--muted{ opacity:0.45; }
.dp-day--today{ border-color:var(--primary-color); }
.dp-day--selected{
  background:var(--primary-color);
  color:#fff;
  border-color:var(--primary-color);
}
.dp-footer{
  display:flex;
  justify-content:space-between;
  gap:6px;
  margin-top:8px;
}
.dp-footer button{
  background:transparent;
  border:1px solid var(--border-color);
  color:var(--text-color);
  padding:4px 8px;
  border-radius:6px;
  cursor:pointer;
}
.dp-footer button:hover{ border-color:var(--primary-color); }

/* Dark mode component overrides */
.dark .card, .dark .panel, .dark .widget, .dark .box, .dark .content-card{
  background: var(--surface-color);
  border: 1px solid var(--border-color);
}
.dark .search-panel, .dark .filters, .dark form#searchForm, .dark #dashboardFilters, .dark #noticeDashboardFilters, .dark #exportFilters{
  background: transparent;
  border: none;
}
.dark .search-panel label,
.dark .filters label,
.dark label span{ color: var(--text-color) }
.dark input[type="text"],
.dark input[type="date"],
.dark input[type="email"],
.dark input[type="tel"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="file"],
.dark textarea{
  background-color: #0f1a2e;
  color: var(--text-color);
  border: 1px solid rgba(148,163,184,.18);
}
.dark select{
  background-color: #0f1a2e;
  color: var(--text-color);
  border: 1px solid rgba(148,163,184,.18);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.dark select:hover{border-color:rgba(148,163,184,.3)}
.dark .ms-display{
  background-color: #0f1a2e;
  color: var(--text-color);
  border: 1px solid rgba(148,163,184,.18);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.dark .ms-display:hover{border-color:rgba(148,163,184,.3)}
.dark .ms-display.open{border-color:#5E6AD2; box-shadow:0 0 0 2px rgba(94,106,210,.2)}
.dark .ms-menu{
  background: var(--surface-color);
  color: var(--text-color);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.dark input.date-input{
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232979FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark select:focus,
.dark textarea:focus{
  background-color: #0f1a2e;
  border-color: #5E6AD2;
  box-shadow: 0 0 0 2px rgba(94,106,210,.2);
}
.dark select option,
.dark option{ background:var(--surface-color); color: var(--text-color) }
.dark datalist,
.dark datalist option{ background:var(--surface-color); color: var(--text-color) }
.dark .ms-search input{ background-color:#0f1a2e; border:1px solid rgba(148,163,184,.18); color: var(--text-color); }
.dark .ms-search input:focus{border-color:#5E6AD2; box-shadow:0 0 0 2px rgba(94,106,210,.2)}
.dark .ms-item{color:var(--text-color)}
.dark .ms-item:hover{ background:rgba(255,255,255,.05) }
.dark .ms-actions{border-color:rgba(255,255,255,.08)}
.dark .ms-actions .btn{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color: var(--text-color) }
.dark .ms-actions .btn:hover{background:rgba(255,255,255,.1)}

/* Searchable single-select – dark */
.dark .ss-display{background-color:#0f1a2e; border-color:rgba(148,163,184,.18); color:var(--text-color); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}
.dark .ss-display:hover{border-color:rgba(148,163,184,.3)}
.dark .ss-display.open{border-color:#5E6AD2; box-shadow:0 0 0 2px rgba(94,106,210,.2)}
.dark .ss-display.ss-placeholder{color:#62666D}
.dark .ss-menu{background:var(--surface-color); border-color:rgba(255,255,255,.1); box-shadow:0 8px 32px rgba(0,0,0,.5)}
.dark .ss-search input{background-color:#0f1a2e; border-color:rgba(148,163,184,.18); color:var(--text-color)}
.dark .ss-search input:focus{border-color:#5E6AD2; box-shadow:0 0 0 2px rgba(94,106,210,.2)}
.dark .ss-item{color:#D0D6E0}
.dark .ss-item:hover{background:rgba(255,255,255,.05)}
.dark .ss-item.selected{background:rgba(94,106,210,.12); color:#818cf8}
.dark .ss-item--add{color:#818cf8; border-color:rgba(255,255,255,.08)}

.dark .tabs{ border-bottom: 1px solid rgba(255,255,255,.08) }
.dark .tabs [role=tab]{ background:rgba(255,255,255,.05); color: #D0D6E0; border:1px solid rgba(255,255,255,.08) }
.dark .tabs [aria-selected=true]{ background:var(--surface-color); border-color: rgba(255,255,255,.1); color: #F7F8F8; box-shadow: inset 0 -2px 0 #5E6AD2 }

/* Dark: Dashboard filters */
.dark #panelDashboard .grid.two-line label > span{color:#94a3b8}
.dark #panelDashboard .grid.two-line .ms-display{background-color:#0f1a2e; border-color:rgba(148,163,184,.18); color:var(--text-color)}
.dark #panelDashboard .grid.two-line input{background-color:#0f1a2e; border-color:rgba(148,163,184,.18); color:var(--text-color)}
.dark #panelDashboard .grid.two-line select{background-color:#0f1a2e; border-color:rgba(148,163,184,.18); color:var(--text-color)}
.dark #panelDashboard .grid.two-line .filter-reset{background:transparent; color:#8A8F98; border:1px solid rgba(255,255,255,.1)}
.dark #panelDashboard .grid.two-line .filter-reset:hover{background:rgba(255,255,255,.05); color:#D0D6E0}
.dark #panelDashboard .grid.two-line .filter-reset.secondary{background:#d97706; border-color:#b45309; color:#0a0b0d}
.dark #panelDashboard .grid.two-line .filter-reset.secondary:hover{background:#b45309; border-color:#92400e}

/* Dark: Compliance tracker outer panel + table card */
.dark #panelTasks.tracker-panel{background:transparent; border:none; box-shadow:none}
.dark #panelForMe .table-wrap, .dark #panelByMe .table-wrap{border:1px solid rgba(255,255,255,.08)}
.dark #panelForMe .table, .dark #panelByMe .table{border:none}
.dark #panelForMe .table-wrap::-webkit-scrollbar-thumb,
.dark #panelByMe .table-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
/* Dark: bulk action bar */
.dark .bulk-bar__pill{background:var(--surface-color); border:1px solid rgba(255,255,255,.1); box-shadow:0 8px 32px rgba(0,0,0,.6)}

/* Dark: Compliance tracker filter, badges, act-buttons */
.dark #panelTasks .card-header{border-bottom:none}
.dark #panelTasks .search-panel .grid label > span{color:#94a3b8}
.dark #panelTasks .search-panel input, .dark #panelTasks .search-panel .ms-display{background-color:#0f1a2e; border:1px solid rgba(148,163,184,.18)}
.dark #panelTasks .search-panel .filter-reset{background:transparent; border:1px solid rgba(255,255,255,.1); color:#8A8F98}
.dark #panelHrReturns .search-panel input, .dark #panelHrReturns .search-panel select, .dark #panelHrReturns .search-panel .ms-display{background-color:#0f1a2e; border:1px solid rgba(148,163,184,.18)}
.dark #panelHrReturns .search-panel .filter-reset{background:transparent; border:1px solid rgba(255,255,255,.1); color:#8A8F98}
.dark #panelTasks .search-panel .filter-reset.secondary{background:#fbbf24; border-color:#f59e0b; color:#0a0b0d}
.dark .badge-success{background:rgba(39,166,68,.12); color:#27A644}
.dark .badge-warning{background:rgba(240,191,0,.12); color:#F0BF00}
.dark .badge-danger{background:rgba(235,87,87,.12); color:#EB5757}
.dark .badge-info{background:rgba(78,167,252,.12); color:#4EA7FC}
.dark .badge-neutral{background:rgba(255,255,255,.06); color:#8A8F98}
.dark .badge-purple{background:rgba(167,139,250,.12); color:#a78bfa}
.dark .act-approve{background:rgba(39,166,68,.12); color:#27A644}
.dark .act-reject{background:rgba(235,87,87,.12); color:#EB5757}
.dark .act-edit{background:rgba(78,167,252,.12); color:#4EA7FC}
.dark #panelForMe .table thead th, .dark #panelByMe .table thead th{background:var(--surface-color); color:#b0b8c4}
/* HR Returns tracker — match Compliance tracker (dark) */
.dark #panelHrReturns.tracker-panel{background:transparent; border:none; box-shadow:none}
.dark #panelHrReturns .card-header{border-bottom:none}
.dark #panelHrReturns .search-panel .grid label > span{color:#94a3b8}
.dark #hrPanelForMe .table-wrap, .dark #hrPanelOthers .table-wrap{border:1px solid rgba(255,255,255,.08)}
.dark #hrPanelForMe .table, .dark #hrPanelOthers .table{border:none}
.dark #hrPanelForMe .table thead th, .dark #hrPanelOthers .table thead th{background:var(--surface-color); color:#b0b8c4; border-bottom:1px solid rgba(255,255,255,.08)}
.dark #hrPanelForMe .table tbody tr:nth-child(even):not(.virtual-spacer),
.dark #hrPanelOthers .table tbody tr:nth-child(even):not(.virtual-spacer){background:rgba(255,255,255,.02)}
.dark #hrPanelForMe .table tbody tr:hover,
.dark #hrPanelForMe .table tbody tr:nth-child(even):hover,
.dark #hrPanelOthers .table tbody tr:hover,
.dark #hrPanelOthers .table tbody tr:nth-child(even):hover{background:rgba(94,106,210,.08)}

/* Dark: Dashboard tab group & KPI cards */
.dark .tab-group{background:rgba(255,255,255,.06)}
.dark .tab-item{color:#8A8F98}
.dark .tab-item:hover{color:#D0D6E0}
.dark .tab-item.active, .dark .tab-item[aria-selected="true"]{background:var(--surface-color); color:#F7F8F8; box-shadow:0 1px 2px rgba(0,0,0,.3)}
.dark .kpi-card{background:var(--surface-color); border:1px solid rgba(255,255,255,.08)}
.dark .kpi-label{color:#8A8F98}
.dark .kpi-icon.green{background:rgba(39,166,68,.12); color:#27A644}
.dark .kpi-icon.red{background:rgba(235,87,87,.12); color:#EB5757}
.dark .kpi-icon.blue{background:rgba(78,167,252,.12); color:#4EA7FC}
.dark .kpi-icon.amber{background:rgba(240,191,0,.12); color:#F0BF00}
.dark .kpi-value{color:var(--text-color)}
.dark .kpi-sub{color:var(--muted-text-color)}
.dark .kpi-bar{background:rgba(255,255,255,.06)}
.dark .chart-subtitle{color:var(--muted-text-color)}

/* Dark: Sidebar */
.dark .sidebar{ background: var(--surface-color); border-right:1px solid rgba(255,255,255,.06) }
.dark .sidebar-header{ border-bottom:1px solid rgba(255,255,255,.06) }
.dark .sidebar-brand{ color: #F7F8F8 }
.dark .sidebar-brand span{ color: inherit }
.dark .sidebar-toggle{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color: #8A8F98 }
.dark .sidebar-toggle:hover{ background:rgba(255,255,255,.1); color: #F7F8F8 }
.dark .nav-group-label{ color: #62666D }
.dark .nav-item{ color: #8A8F98 }
.dark .nav-item:hover{ background:rgba(255,255,255,.05); color: #F7F8F8 }
.dark .nav-item.active{ background:rgba(94,106,210,.12); color: #5E6AD2 }
.dark .sidebar-footer{ border-top:1px solid rgba(255,255,255,.06) }
.dark .user-name{ color: #F7F8F8 }
.dark .user-role{ color: #62666D }
/* Dark: Topbar */
.dark .topbar{ background: rgba(11,17,32,.88); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.06) }
.dark .topbar-left h1{ color: #F7F8F8 }
.dark .topbar-hamburger{ border:1px solid rgba(255,255,255,.08); color: #D0D6E0 }
.dark .tabs [role=tab]:focus-visible{ outline:none; box-shadow: 0 0 0 2px rgba(94,106,210,.3) }

.dark .table{ background: var(--surface-color); border:1px solid rgba(255,255,255,.06) }
.dark .table td{ color: #D0D6E0; border-bottom:1px solid rgba(255,255,255,.06) }
.dark .table th{ color: #b0b8c4; border-bottom:1px solid rgba(255,255,255,.06) }
.dark .table thead th{ background:var(--surface-color); color: #b0b8c4 }
.dark #panelForMe .table thead th,
.dark #panelByMe .table thead th{ background:var(--surface-color); color:#b0b8c4; border-bottom:1px solid rgba(255,255,255,.08) }
/* Dark zebra striping */
.dark #panelForMe .table tbody tr:nth-child(even):not(.virtual-spacer),
.dark #panelByMe .table tbody tr:nth-child(even):not(.virtual-spacer){background:rgba(255,255,255,.02)}
/* Dark hover */
.dark #panelForMe .table tbody tr:hover,
.dark #panelForMe .table tbody tr:nth-child(even):hover,
.dark #panelByMe .table tbody tr:hover,
.dark #panelByMe .table tbody tr:nth-child(even):hover{background:rgba(94,106,210,.08)}
/* Dark: Notices tracker outer panel + table card */
.dark #panelNotices.tracker-panel{background:transparent; border:none; box-shadow:none}
.dark #panelNoticesForMe .table-wrap, .dark #panelNoticesOthers .table-wrap{border:1px solid rgba(255,255,255,.08)}
.dark #panelNoticesForMe .table, .dark #panelNoticesOthers .table{border:none}
.dark #panelNoticesForMe .table-wrap::-webkit-scrollbar-thumb,
.dark #panelNoticesOthers .table-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
/* Dark: Notices tracker filter */
.dark #panelNotices .card-header{border-bottom:none}
.dark #panelNotices .search-panel .grid label > span{color:#94a3b8}
.dark #panelNotices .search-panel .ms-display{background-color:#0f1a2e; border:1px solid rgba(148,163,184,.18)}
.dark #panelNotices .search-panel .filter-reset{background:transparent; border:1px solid rgba(255,255,255,.1); color:#8A8F98}
.dark #panelNotices .search-panel .filter-reset.secondary{background:#fbbf24; border-color:#f59e0b; color:#0a0b0d}
/* Dark: Notices tracker table headers */
.dark #panelNoticesForMe .table thead th,
.dark #panelNoticesOthers .table thead th{background:var(--surface-color); color:#b0b8c4; border-bottom:1px solid rgba(255,255,255,.08)}
/* Dark: Notices zebra striping */
.dark #panelNoticesForMe .table tbody tr:nth-child(even):not(.virtual-spacer),
.dark #panelNoticesOthers .table tbody tr:nth-child(even):not(.virtual-spacer){background:rgba(255,255,255,.02)}
/* Dark: Notices hover */
.dark #panelNoticesForMe .table tbody tr:hover,
.dark #panelNoticesForMe .table tbody tr:nth-child(even):hover,
.dark #panelNoticesOthers .table tbody tr:hover,
.dark #panelNoticesOthers .table tbody tr:nth-child(even):hover{background:rgba(94,106,210,.08)}
.dark .table tbody tr:hover{ background: rgba(255,255,255,.03) }

.dark .alert.info,
.dark .toast,
.dark .note,
.dark .file-chip,
.dark .chart-card{
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

/* Dark buttons and controls */
.dark .btn{ background:rgba(255,255,255,.05); color: #D0D6E0; border:1px solid rgba(255,255,255,.1) }
.dark .btn:hover{ background:rgba(255,255,255,.1); border-color: rgba(255,255,255,.12) }
.dark .btn.primary{ background: #5E6AD2; color:#fff; border-color: #5E6AD2 }
.dark .btn.primary:hover{ background: #7170FF; border-color: #7170FF }
.dark .btn.primary:active{background: #5E6AD2; transform:scale(0.97); box-shadow:inset 0 2px 4px rgba(0,0,0,0.3)}
.dark .btn.success{ background:#27A644; color:#fff; border-color:#27A644; display:inline-flex; align-items:center; gap:6px }
.dark .btn.success:hover{ background:#22c55e; border-color:#22c55e }
.dark .btn.success:active{background:#27A644; transform:scale(0.97)}
.dark .btn.success .btn-icon{width:18px; height:18px; border-radius:50%; background:#34D399; color:#fff; font-weight:600}
.dark .btn.danger{ background:rgba(235,87,87,.08); color:#EB5757; border-color:rgba(235,87,87,.2); display:inline-flex; align-items:center; gap:6px }
.dark .btn.danger:hover{ background:rgba(235,87,87,.14) }
.dark .btn.danger:active{transform:scale(0.97)}
.dark .btn.danger .btn-icon{color:#8A8F98}
.dark .btn.icon{ background:rgba(255,255,255,.05); color: #D0D6E0; border:1px solid rgba(255,255,255,.1) }
.dark .btn.icon:hover{ background:rgba(255,255,255,.1) }
.dark .btn.icon.success{ border-color:rgba(39,166,68,.3); color:#27A644; background:rgba(39,166,68,.08) }
.dark .btn.icon.reject{ border-color:rgba(235,87,87,.3); color:#EB5757; background:rgba(235,87,87,.08) }
.dark .btn.icon.edit{ border-color:rgba(94,106,210,.3); color:#5E6AD2; background:rgba(94,106,210,.08) }
.dark .icon-btn{ background:rgba(255,255,255,.05); color: #D0D6E0; border:1px solid rgba(255,255,255,.1); border-radius:6px }
.dark .icon-btn:hover{ background:rgba(255,255,255,.1) }

/* Dark card headers and active tab card feel */
.dark .card-header{ background: var(--surface-color); border-bottom:1px solid rgba(255,255,255,.06) }
.dark #panelTasks .tabs,
.dark #panelNotices .tabs{border-bottom:0}

/* Dark inline NA toggle */
.dark .inline-na .na-toggle{background:var(--bg-color); color:#94a3b8; border-color:var(--border-color)}
.dark .inline-na .na-toggle:hover{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12)}
.dark .inline-na.na-selected .na-toggle{background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.3); color:#a5b4fc}

/* Dark attachments section */
.dark .attachment small{ color: var(--muted-text-color) }
.dark #filePreview, .dark #fileList{ background: transparent }
.dark .attachment{ background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px }
.dark .file-chip{background:var(--bg-color); border-color:var(--border-color); color:var(--text-color)}
.dark .file-chip:hover{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12)}
.dark .file-chip a{color:#818cf8}
.dark .file-chip .file-name{color:#e2e8f0}
.dark .file-chip button{color:#64748b}
.dark .file-chip button:hover{color:#f87171}
.dark .add-stakeholder-btn{border-color:#4B5563}
.dark .add-stakeholder-btn:hover{border-color:#6B7280; background:rgba(41,121,255,0.1)}
.dark .add-stakeholder-icon{background:#2979FF}
.dark .add-stakeholder-label{color:#2979FF}
.dark .btn.icon.eye{ background:rgba(255,255,255,.05); color: var(--text-color); border:1px solid var(--border-color) }
/* Dark: notice meta */
.dark .notice-meta{border-top-color:var(--border-color); color:#94a3b8}
.dark .notice-meta .meta-item{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); color:#D0D6E0}

/* Dark th-sort buttons */
.dark .th-sort{ color: #b0b8c4 }
.dark .th-sort:hover{ color: var(--primary-color) }

/* Dark chart headings and stat card labels */
.dark .chart-card-header h3{ color: var(--text-color) }

/* Dark maximize icon on charts */
.dark .chart-max{ background:var(--surface-color); color: var(--text-color); border:1px solid var(--border-color) }
.dark .chart-max:hover{ background:rgba(255,255,255,.06) }

/* Dark reset buttons, back buttons, run reminder, download template */
.dark #backToList.btn,
.dark #backFromExport.btn,
.dark #backFromImport.btn,
.dark #backFromDashboard.btn,
.dark #backFromSettings.btn,
.dark #downloadImportTemplate.btn,
.dark #runRemindersNow.btn{ background:rgba(255,255,255,.05); color: var(--text-color); border:1px solid var(--border-color) }
.dark #backToList.btn:hover,
.dark #backFromExport.btn:hover,
.dark #backFromImport.btn:hover,
.dark #backFromDashboard.btn:hover,
.dark #backFromSettings.btn:hover,
.dark #downloadImportTemplate.btn:hover,
.dark #runRemindersNow.btn:hover{ background:rgba(255,255,255,.06) }

.notice-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--border-color); color:var(--muted-text-color); font-size:12px}
.notice-meta .meta-item{background:var(--surface-color); border:1px solid var(--border-color); border-radius:8px; padding:6px 8px}
.notice-meta #showLogsBtn{margin-left:auto}
.notice-meta #showLogsBtn:active{transform:scale(0.95); box-shadow:inset 0 2px 4px rgba(0,0,0,0.2); transition:transform 0.1s, box-shadow 0.1s}
.notice-meta #showLogsBtn{transition:transform 0.1s, box-shadow 0.1s}
.notice-section{padding:12px 16px; border-top:1px solid var(--border-color)}
.section-title{margin:0 0 8px; font-size:14px}
.notice-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.notice-list li{padding:8px 10px; border:1px solid var(--border-color); border-radius:10px; background:var(--surface-color)}
.notice-actions{display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap}
.notice-comment-form{display:flex; gap:8px; align-items:flex-end; padding-bottom:12px}
.notice-comment-form textarea{flex:1; max-width:400px; min-width:200px; resize:vertical}
.notice-comment-file-wrap{display:flex; flex-direction:column; gap:2px}
.notice-comment-file-wrap .file-label{font-size:11px; text-align:left; padding-left:2px}
.notice-comment-form input[type="file"]{font-size:13px; padding:6px 8px; min-width:200px}
.notice-comment-form button{white-space:nowrap}
.timeline{display:flex; flex-direction:column; gap:8px}
.timeline .timeline-item{padding:8px 10px; border:1px solid var(--border-color); border-radius:10px; background:var(--surface-color)}
.timeline .timeline-time{font-size:11px; color:var(--muted-text-color)}

/* Comment items — light defaults now in app.css */

/* Force amber secondary buttons on dark theme for all reset/back buttons */
.dark #backToList.btn,
.dark #backFromExport.btn,
.dark #backFromImport.btn,
.dark #backFromDashboard.btn,
.dark #backFromSettings.btn,
.dark #downloadImportTemplate.btn,
.dark #runRemindersNow.btn{
  background:#d97706;
  border:1px solid #b45309;
  color:#0b0f1a;
}
.dark #backToList.btn:hover,
.dark #backFromExport.btn:hover,
.dark #backFromImport.btn:hover,
.dark #backFromDashboard.btn:hover,
.dark #backFromSettings.btn:hover,
.dark #downloadImportTemplate.btn:hover,
.dark #runRemindersNow.btn:hover{
  background:#b45309;
  border-color:#92400e;
  color:#000;
}

/* Auth — overrides handled in app.css */
.auth-overlay{background:none}
.auth-card{background:none; border:none; border-radius:0}
.dark .auth-card{background:none; border:none}
.auth-hint{display:none}

/* Utilities */
input[type="checkbox"], input[type="radio"]{accent-color:var(--primary-color)}


/* Attachments eye menu */
.eye-menu{background:#FFFFFF; border:1px solid var(--border-color); border-radius:10px; padding:4px; box-shadow:var(--shadow-sm)}
.eye-menu-item{color:var(--text-color)}
.eye-menu-item:hover{background:var(--hover-bg)}

/* Dark: attachments eye menu */
.dark .eye-menu{background:var(--surface-color); border:1px solid var(--border-color); box-shadow:0 8px 24px rgba(0,0,0,.4)}
.dark .eye-menu-item{color:var(--text-color)}
.dark .eye-menu-item:hover{background:var(--hover-bg)}

/* Modal – light */
.modal-box{background:#ffffff;color:var(--text-color)}
.modal-header-subtitle{color:var(--muted-text-color)}
.modal-close{color:var(--muted-text-color)}
.modal-close:hover{background:var(--hover-bg)}
.modal-ctrl-hint{color:var(--muted-text-color)}
.modal-input,.modal-select,.modal-textarea{background:#ffffff;color:var(--text-color)}
.modal-input:focus,.modal-select:focus,.modal-textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)}

/* Modal – dark */
.dark .modal-box{background:var(--surface-color);color:var(--text-color)}
.dark .modal-input,.dark .modal-select,.dark .modal-textarea{background:var(--bg-color);color:var(--text-color);border-color:var(--border-color)}
.dark .modal-close:hover{background:rgba(255,255,255,.08)}

/* Logs timeline – light */
.log-item{border-bottom-color:#f1f5f9}
.log-item:hover{background:#f8fafc}
.log-text{color:var(--text-color)}
.log-line{background:#e2e8f0}

/* Logs timeline – dark */
.dark .log-item{border-bottom-color:rgba(255,255,255,.06)}
.dark .log-item:hover{background:rgba(255,255,255,.02)}
.dark .log-dot{background:#818cf8}
.dark .log-line{background:rgba(255,255,255,.06)}
.dark .log-text{color:#D0D6E0}
.dark .log-meta{color:#62666D}
.dark .logs-empty{color:#62666D}

/* Chart modal should follow theme surface colors */
.chart-modal-card{background:var(--surface-color); border:1px solid var(--border-color); box-shadow:var(--shadow-sm)}
.chart-modal-card header{border-bottom:1px solid var(--border-color)}

/* Settings tables sticky headers and add-new bar */
#panelCategories .table thead th,
#panelNoticeTypes .table thead th,
#panelNotifications .table thead th,
#panelCompanies .table thead th,
#panelUsers .table thead th{background:#F3F6FA; color:var(--muted-text-color); border-bottom:1px solid var(--border-color)}
#panelSettings #panelCategories:not([hidden]) .form-actions,
#panelSettings #panelNoticeTypes:not([hidden]) .form-actions,
#panelSettings #panelNotifications:not([hidden]) .form-actions,
#panelSettings #panelCompanies:not([hidden]) .form-actions,
#panelSettings #panelUsers:not([hidden]) .form-actions{background:#FFFFFF; border-top:1px solid var(--border-color)}

/* Dark: Settings headers and add-new rows */
.dark #panelCategories .table thead th,
.dark #panelNoticeTypes .table thead th,
.dark #panelNotifications .table thead th,
.dark #panelCompanies .table thead th,
.dark #panelUsers .table thead th{background:rgba(255,255,255,.06); color:var(--text-color); border-bottom:1px solid var(--border-color)}
.dark #panelSettings #panelCategories:not([hidden]) .form-actions,
.dark #panelSettings #panelNoticeTypes:not([hidden]) .form-actions,
.dark #panelSettings #panelNotifications:not([hidden]) .form-actions,
.dark #panelSettings #panelCompanies:not([hidden]) .form-actions,
.dark #panelSettings #panelUsers:not([hidden]) .form-actions{background:var(--surface-color); border-top:1px solid var(--border-color)}

/* Redesigned Settings shell */
#panelSettings .settings-row:nth-child(even){background:#f1f5f9}
#panelSettings .settings-row:hover{background:#eef2ff}
#panelSettings .settings-users-table thead th,
#panelSettings .settings-policy-table thead th{background:#F3F6FA; color:var(--muted-text-color); border-bottom:1px solid var(--border-color)}
#panelSettings .settings-users-table tbody tr:hover,
#panelSettings .settings-policy-table tbody tr:hover,
#panelSettings .settings-users-table tbody tr:nth-child(even):hover,
#panelSettings .settings-policy-table tbody tr:nth-child(even):hover{background:#EEF2FF}
#panelSettings .settings-users-table tbody tr:nth-child(even),
#panelSettings .settings-policy-table tbody tr:nth-child(even){background:#F8FAFC}
#panelSettings .settings-inline-btn:hover{filter:brightness(.98)}
#panelSettings .settings-add-bar input,
#panelSettings .settings-add-bar select{background:#FFFFFF; border:1px solid var(--border-color); color:var(--text-color)}
#panelSettings .settings-add-bar input:focus,
#panelSettings .settings-add-bar select:focus{outline:none; border-color:var(--primary-color); box-shadow:var(--focus-ring)}
#panelSettings .settings-panel-toolbar__hint{color:var(--muted-text-color)}
#panelSettings .settings-utility-btn{background:#F8FAFC; color:var(--text-color); border:1px solid var(--border-color)}
#panelSettings .settings-utility-btn:hover{background:#EEF2FF; border-color:#D5E3FF; color:var(--primary-color)}
#panelSettings .settings-add-submit-btn,
#panelSettings .settings-add-user-btn{box-shadow:0 8px 18px rgba(41,121,255,.18)}
#panelSettings .settings-add-submit-btn:hover,
#panelSettings .settings-add-user-btn:hover{box-shadow:0 10px 22px rgba(41,121,255,.24)}

.dark #panelSettings .settings-row:nth-child(even){background:rgba(255,255,255,.02)}
.dark #panelSettings .settings-row:hover{background:rgba(255,255,255,.04)}
.dark #panelSettings .settings-delete-btn{color:#62666D}
.dark #panelSettings .settings-delete-btn:hover{background:rgba(235,87,87,.12); color:#EB5757}
.dark #panelSettings .settings-panel-toolbar__hint{color:#AAB1BB}
.dark #panelSettings .settings-utility-btn,
.dark #panelSettings #runRemindersNow.settings-utility-btn{background:rgba(255,255,255,.05); color:#D0D6E0; border:1px solid rgba(255,255,255,.1); box-shadow:none}
.dark #panelSettings .settings-utility-btn:hover,
.dark #panelSettings #runRemindersNow.settings-utility-btn:hover{background:rgba(94,106,210,.14); color:#F7F8F8; border-color:rgba(94,106,210,.35)}
.dark #panelSettings .settings-inline-btn.is-active{background:rgba(235,87,87,.12); color:#EB5757; border-color:rgba(235,87,87,.22)}
.dark #panelSettings .settings-inline-btn.is-inactive{background:rgba(39,166,68,.16); color:#7CE38B; border-color:rgba(39,166,68,.22)}
.dark #panelSettings .settings-status-pill.is-active{background:rgba(39,166,68,.16); color:#7CE38B}
.dark #panelSettings .settings-status-pill.is-inactive{background:rgba(255,255,255,.06); color:#AAB1BB}
.dark #panelSettings .settings-users-table thead th,
.dark #panelSettings .settings-policy-table thead th{background:rgba(255,255,255,.06); color:var(--text-color); border-bottom:1px solid var(--border-color)}
.dark #panelSettings .settings-users-table tbody tr:nth-child(even),
.dark #panelSettings .settings-policy-table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.dark #panelSettings .settings-users-table tbody tr:hover,
.dark #panelSettings .settings-policy-table tbody tr:hover,
.dark #panelSettings .settings-users-table tbody tr:nth-child(even):hover,
.dark #panelSettings .settings-policy-table tbody tr:nth-child(even):hover{background:rgba(94,106,210,.08)}
.dark #panelSettings .settings-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
.dark #panelSettings .settings-add-bar input,
.dark #panelSettings .settings-add-bar select{background:#0f1a2e; border-color:rgba(148,163,184,.18); color:var(--text-color)}
.dark #panelSettings .settings-add-bar input:focus,
.dark #panelSettings .settings-add-bar select:focus{box-shadow:0 0 0 3px rgba(94,106,210,.24)}
.dark #panelSettings .settings-add-submit-btn,
.dark #panelSettings .settings-add-user-btn{box-shadow:none}

/* Users table column sizing */
#panelUsers .table th:nth-child(1),
#panelUsers .table td:nth-child(1){ width:150px; max-width:150px; }
#panelUsers .table td:nth-child(1) input{ width:140px; max-width:140px; }
#panelUsers .table th:nth-child(2),
#panelUsers .table td:nth-child(2){ width:200px; max-width:200px; }
#panelUsers .table th:nth-child(3),
#panelUsers .table td:nth-child(3){ width:150px; max-width:150px; }
#panelUsers .table th:nth-child(4),
#panelUsers .table td:nth-child(4),
#panelUsers .table th:nth-child(5),
#panelUsers .table td:nth-child(5){ width:170px; max-width:170px; }
#panelUsers .table th:nth-child(6),
#panelUsers .table td:nth-child(6){ width:120px; max-width:120px; white-space:nowrap; }
#panelUsers .settings-user-ms{min-width:160px; width:100%}
#panelUsers .settings-user-ms .ms-display{width:100%; min-width:0}
#panelUsers .settings-user-ms[data-readonly="true"] .ms-display{background-color:var(--surface-color); cursor:pointer}

/* Dark: replace calendar icon with blue SVG for visibility */
.dark input[type="date"]::-webkit-calendar-picker-indicator{
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  box-shadow: none;
  opacity: 1;
  filter: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232979FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
}

/* Override secondary button to amber across themes */
.btn.secondary{background:#fbbf24; border:1px solid #f59e0b; color:#1f2937;}
.btn.secondary:hover{background:#f59e0b; border-color:#d97706; color:#111827;}
.dark .btn.secondary{background:#d97706; border:1px solid #b45309; color:#0b0f1a;}
.dark .btn.secondary:hover{background:#b45309; border-color:#92400e; color:#000;}

/* Modal light mode */
.modal-content{background:#FFFFFF; border-color:var(--border-color)}
.modal-header{border-bottom-color:var(--border-color)}
.modal-header h2{color:var(--text-color)}
.modal-close{color:var(--text-color)}
.modal-close:hover{background:rgba(0,0,0,0.05)}

/* Modal dark mode */
.dark .modal{background:rgba(0,0,0,0.85)}
.dark .modal-content{background:var(--surface-color); border-color:rgba(255,255,255,.08)}
.dark .modal-header{border-bottom-color:rgba(255,255,255,.06)}
.dark .modal-header h2{color:var(--text-color)}
.dark .modal-close{color:var(--text-color)}
.dark .modal-close:hover{background:rgba(255,255,255,0.1)}

/* Add Stakeholder Dialog Dark Theme */
.dark #addStakeholderDialog{background:rgba(0,0,0,0.85)}
.dark .stakeholder-dialog-box{background:var(--surface-color) !important; color:var(--text-color) !important}
.dark .stakeholder-dialog-title{color:var(--text-color) !important}
.dark .stakeholder-dialog-hint{color:var(--muted-text-color) !important}
.dark .stakeholder-select{border-color:var(--border-color) !important; background:var(--surface-color) !important; color:var(--text-color) !important}
.dark .stakeholder-select option{background:var(--surface-color); color:var(--text-color); padding:8px}
.dark .stakeholder-select option:checked,
.dark .stakeholder-select option:hover{background:rgba(255,255,255,.06); color:var(--text-color)}