/* ============================================================
   DARK MODE — html[data-theme="dark"]
   ============================================================ */

html[data-theme="dark"] {
  --c-bg:              #0D1117;
  --c-surface:         #161B22;
  --c-surface-raised:  #21262D;
  --c-surface-sunken:  #0D1117;
  --c-border:          #30363D;
  --c-border-subtle:   #30363D;
  --c-text:            #E6EDF3;
  --c-text-muted:      #8B949E;
  --c-text-subtle:     #8B949E;
  --c-text-secondary:  #8B949E;
  --c-shadow:          rgba(0,0,0,0.4);
}

/* Lozenge dark overrides (semantic colours — not covered by variables) */
html[data-theme="dark"] .lozenge-success { background: #0D3320; color: #3FB950; }
html[data-theme="dark"] .lozenge-moved   { background: #2D1F00; color: #D29922; }
html[data-theme="dark"] .lozenge-removed { background: #3D0C00; color: #F85149; }
html[data-theme="dark"] .lozenge-new     { background: #3D0C00; color: #F85149; }
html[data-theme="dark"] .lozenge-default { background: #21262D; color: #8B949E; }
html[data-theme="dark"] .lozenge-purple  { background: #1E1535; color: #A371F7; }
html[data-theme="dark"] .lozenge-teal    { background: #0A2535; color: #39C5CF; }
html[data-theme="dark"] .lozenge-red     { background: #3D0C00; color: #F85149; }
html[data-theme="dark"] .lozenge-orange  { background: #2E1800; color: #F0883E; }
html[data-theme="dark"] .lozenge-green   { background: #0D3320; color: #3FB950; }

/* Stat card trend colours */
html[data-theme="dark"] .stat-card .stat-trend.up   { color: #3FB950; }
html[data-theme="dark"] .stat-card .stat-trend.down { color: #F85149; }

/* Void / overdue banners */
html[data-theme="dark"] .void-confirm-banner  { background: #3D0C00; border-bottom-color: #6B0000; }
html[data-theme="dark"] .void-confirm-banner .banner-text { color: #F85149; }
html[data-theme="dark"] .overdue-banner       { background: #3D0C00; border-bottom-color: #6B0000; }
html[data-theme="dark"] .overdue-banner .banner-text { color: #F85149; }

/* Attachment state badges */
html[data-theme="dark"] .attachment-state-processing { background: #2E1800; color: #F0883E; }
html[data-theme="dark"] .attachment-state-ready      { background: #0D3320; color: #3FB950; }
html[data-theme="dark"] .attachment-state-archived   { background: #21262D; color: #8B949E; }

/* Pill button active states */
html[data-theme="dark"] .pill-btn.active-green  { background: #0D3320; border-color: #3FB950; color: #3FB950; }
html[data-theme="dark"] .pill-btn.active-red    { background: #3D0C00; border-color: #F85149; color: #F85149; }
html[data-theme="dark"] .pill-btn.active-orange { background: #2E1800; border-color: #F0883E; color: #F0883E; }

/* Wordmark: render white in dark mode */
html[data-theme="dark"] .centra-brand-wordmark-image { filter: brightness(0) invert(1); }

/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-thumb       { background: #30363D; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #484F58; }

/* Modal overlay backdrop */
html[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7); }

/* Shadow and borders on dropdowns / kanban cards */
html[data-theme="dark"] .dropdown-menu {
  border-color: var(--c-border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 1px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .grid-actions-menu {
  border-color: var(--c-border);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .grid-actions-toggle {
  border-color: var(--c-border);
}
html[data-theme="dark"] .detail-action-menu-panel {
  border-color: var(--c-border);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
html[data-theme="dark"] .flag { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
html[data-theme="dark"] .task-panel { box-shadow: -4px 0 24px rgba(0,0,0,0.4); }

/* Dropdown dividers */
html[data-theme="dark"] .dropdown-divider { background: var(--c-border); }

/* Active nav item */
html[data-theme="dark"] .nav-item.active { background: rgba(231, 70, 47, 0.23); }

/* ============================================================
   CONDENSED DENSITY — html[data-density="condensed"]
   ============================================================ */

html[data-density="condensed"] { font-size: 13px; }

html[data-density="condensed"] .sidebar {
  width: 56px;
  min-width: 56px;
}
html[data-density="condensed"] .sidebar.expanded {
  width: 220px;
  min-width: 220px;
}
html[data-density="condensed"] .sidebar-header { height: 44px; }
html[data-density="condensed"] .sidebar-logo {
  width: 28px;
  height: 28px;
}
html[data-density="condensed"] .nav-item {
  padding: 5px 10px;
  margin: 1px 0;
}
html[data-density="condensed"] .sidebar:not(.expanded) .nav-item {
  padding: 5px 0;
  margin: 1px auto;
}
html[data-density="condensed"] .nav-item .nav-icon svg {
  width: 16px;
  height: 16px;
}

html[data-density="condensed"] .top-bar { height: 44px; }

html[data-density="condensed"] .lozenge { padding: 2px 6px; }

html[data-density="condensed"] .btn {
  padding: 5px 12px;
  font-size: 13px;
}
html[data-density="condensed"] .btn-sm { padding: 3px 8px; }

html[data-density="condensed"] .data-table thead th { padding: 6px 10px; }
html[data-density="condensed"] .data-table tbody td {
  padding: 6px 10px;
  font-size: 13px;
}

html[data-density="condensed"] .page-toolbar { padding: 10px 24px; }

html[data-density="condensed"] .tab-item { padding: 8px 12px; }

html[data-density="condensed"] .stat-card { padding: 12px; }

html[data-density="condensed"] .section-header { padding: 10px 16px; }
html[data-density="condensed"] .section-header h3 { font-size: 13px; }

html[data-density="condensed"] .detail-layout {
  grid-template-columns: 1fr 280px;
  gap: 12px;
  padding: 12px 18px;
}

html[data-density="condensed"] .page-header { padding: 14px 24px; }
html[data-density="condensed"] .page-header h1 { font-size: 18px; }

html[data-density="condensed"] .detail-header { padding: 12px 20px; }
html[data-density="condensed"] .detail-icon {
  width: 38px;
  height: 38px;
}
html[data-density="condensed"] .detail-meta h1 { font-size: 16px; }

html[data-density="condensed"] .search-overlay-backdrop {
  top: 44px;
}
html[data-density="condensed"] .search-overlay { top: 44px; }