/* ============================================================
   themes.css — CSS custom-property theme definitions
   Classic · Classic Dark · Modern · Modern Dark
   ============================================================ */

/* ── Classic theme (default) ─────────────────────────────── */
:root,
html[data-theme="classic"] {
  --bg: #f5f1e8;
  --surface: #fffdf8;
  --ink: #1d2428;
  --muted: #5b666d;
  --brand: #00487f;
  --accent: #c55a11;
  --line: #d8d0c1;
  --tier-employee: #0f5ea8;
  --tier-department: #a14f06;
  --tier-restricted: #9a2a2a;
  --tier-policy: #16606b;
  --tier-public: #2f7a33;

  --org-text: #1d2428;
  --org-text-on-dark: #ffffff;
  --org-link: #00487f;
  --org-connector: #3d3d3d;

  --org-green-900: #274e13;
  --org-green-700: #38761d;
  --org-green-500: #6aa84f;
  --org-green-300: #93c47d;

  --org-blue-900: #0c343d;
  --org-blue-800: #134f5c;
  --org-blue-700: #1155cc;
  --org-blue-650: #1c4587;
  --org-blue-500: #45818e;
  --org-blue-450: #4a86e8;
  --org-blue-300: #76a5af;
  --org-blue-200: #a2c4c9;

  --org-red-900: #801f17;
  --org-red-850: #85200c;
  --org-red-800: #990000;
  --org-red-700: #a7291e;
  --org-red-650: #b02b20;
  --org-red-600: #be2f22;
  --org-red-500: #d83729;
  --org-red-200: #f4cccc;

  --org-alert-red: #ff0000;
  --org-orange: #ff9900;
}

/* ── Modern theme ─────────────────────────────────────────── */
html[data-theme="modern"] {
  --bg: #f0f4f8;
  --surface: #ffffff;
  --ink: #111827;
  --muted: #6b7280;
  --brand: #0056a8;
  --accent: #c75000;
  --line: #dde3ea;
  --tier-employee: #1059b0;
  --tier-department: #9a4800;
  --tier-restricted: #a31f1f;
  --tier-policy: #146070;
  --tier-public: #197a23;

  --org-text: #111827;
  --org-text-on-dark: #ffffff;
  --org-link: #0056a8;
  --org-connector: #425060;

  --org-green-900: #1f5a22;
  --org-green-700: #2f7a2f;
  --org-green-500: #5ea85c;
  --org-green-300: #9dd59f;

  --org-blue-900: #103a5a;
  --org-blue-800: #16557d;
  --org-blue-700: #1a66c7;
  --org-blue-650: #275197;
  --org-blue-500: #3e89ad;
  --org-blue-450: #4a8ff0;
  --org-blue-300: #77b2c2;
  --org-blue-200: #afd2db;

  --org-red-900: #7a1d14;
  --org-red-850: #8a2a15;
  --org-red-800: #a61f1f;
  --org-red-700: #ba3529;
  --org-red-650: #c54034;
  --org-red-600: #d34f40;
  --org-red-500: #df6958;
  --org-red-200: #f8d9d4;

  --org-alert-red: #d62828;
  --org-orange: #d98200;
}

html[data-theme="modern"] body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
}

html[data-theme="modern"] header h1 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.02em;
}

html[data-theme="modern"] aside,
html[data-theme="modern"] main {
  border-radius: 8px;
}

html[data-theme="modern"] .hub-card {
  border-radius: 6px;
}

html[data-theme="modern"] .badge {
  border-radius: 6px;
}

html[data-theme="modern"] code {
  background: #eef2f7;
}

html[data-theme="modern"] .ics-controls button {
  background: #f5f7fa;
}

html[data-theme="modern"] .ics-controls button:hover {
  background: #e8edf3;
}

html[data-theme="modern"] .tier-badge.tier-employee  { background: #e8f0fc; }
html[data-theme="modern"] .tier-badge.tier-department { background: #fff2e6; }
html[data-theme="modern"] .tier-badge.tier-restricted { background: #fce8e8; }
html[data-theme="modern"] .tier-badge.tier-policy     { background: #e4f4f6; }

html[data-theme="modern"] .hub-action {
  background: #f5f7fa;
}

html[data-theme="modern"] .hub-action:hover {
  background: #e8edf3;
}

html[data-theme="modern"] button.tier-btn-employee:hover   { background: rgba(16,89,176,0.08); }
html[data-theme="modern"] button.tier-btn-department:hover { background: rgba(154,72,0,0.08); }
html[data-theme="modern"] button.tier-btn-restricted:hover { background: #fce8e8; }

html[data-theme="modern"] span.tier-btn-active.tier-btn-employee   { background: rgba(16,89,176,0.08); }
html[data-theme="modern"] span.tier-btn-active.tier-btn-department { background: rgba(154,72,0,0.08); }
html[data-theme="modern"] span.tier-btn-active.tier-btn-restricted { background: #fce8e8; }

/* ── Classic Dark theme ───────────────────────────────────── */
html[data-theme="classic-dark"] {
  --bg: #1c1813;
  --surface: #251f16;
  --ink: #ede6d5;
  --muted: #9a8f80;
  --brand: #5fa8e0;
  --accent: #e8854a;
  --line: #3c342a;
  --tier-employee: #5fa8e0;
  --tier-department: #e07840;
  --tier-restricted: #e06060;
  --tier-policy: #40b0be;
  --tier-public: #5abf60;

  --org-text: #f0eadf;
  --org-text-on-dark: #ffffff;
  --org-link: #8dc7ff;
  --org-connector: #c3b8a7;

  --org-green-900: #5aa15a;
  --org-green-700: #6fbb6f;
  --org-green-500: #86ca83;
  --org-green-300: #aee0ae;

  --org-blue-900: #4d8cad;
  --org-blue-800: #5aa0bf;
  --org-blue-700: #6baeff;
  --org-blue-650: #76a6e3;
  --org-blue-500: #7bc5da;
  --org-blue-450: #82baff;
  --org-blue-300: #9ccfdc;
  --org-blue-200: #bdddE6;

  --org-red-900: #cf6b5f;
  --org-red-850: #d47661;
  --org-red-800: #dd7b7b;
  --org-red-700: #e2877c;
  --org-red-650: #e89488;
  --org-red-600: #eda195;
  --org-red-500: #f2b1a6;
  --org-red-200: #f6cdcd;

  --org-alert-red: #ff8d8d;
  --org-orange: #ffb86b;
}

html[data-theme="classic-dark"] body {
  background: var(--bg);
}

html[data-theme="classic-dark"] code {
  background: #2e2719;
}

html[data-theme="classic-dark"] .hub-card {
  background: var(--surface);
}

html[data-theme="classic-dark"] .hub-action {
  background: #2e2719;
}

html[data-theme="classic-dark"] .hub-action:hover {
  background: #38301e;
}

html[data-theme="classic-dark"] .ics-controls button {
  background: #2e2719;
}

html[data-theme="classic-dark"] .ics-controls button:hover {
  background: #38301e;
}

html[data-theme="classic-dark"] .badge {
  background: #1e2e40;
}

html[data-theme="classic-dark"] .tier-badge.tier-employee  { background: #1e2e40; }
html[data-theme="classic-dark"] .tier-badge.tier-department { background: #3a2010; }
html[data-theme="classic-dark"] .tier-badge.tier-restricted { background: #3a1515; }
html[data-theme="classic-dark"] .tier-badge.tier-policy     { background: #103030; }

html[data-theme="classic-dark"] #sidebarOffcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="classic-dark"] button.tier-btn-employee:hover   { background: rgba(95,168,224,0.15); }
html[data-theme="classic-dark"] button.tier-btn-department:hover { background: rgba(224,120,64,0.15); }
html[data-theme="classic-dark"] button.tier-btn-restricted:hover { background: rgba(224,96,96,0.15); }

html[data-theme="classic-dark"] span.tier-btn-active.tier-btn-employee   { background: rgba(95,168,224,0.15); }
html[data-theme="classic-dark"] span.tier-btn-active.tier-btn-department { background: rgba(224,120,64,0.15); }
html[data-theme="classic-dark"] span.tier-btn-active.tier-btn-restricted { background: rgba(224,96,96,0.15); }

/* ── Modern Dark theme ────────────────────────────────────── */
html[data-theme="modern-dark"] {
  --bg: #0f1117;
  --surface: #1a1d27;
  --ink: #f0f4f8;
  --muted: #8b96a8;
  --brand: #4a9eff;
  --accent: #f59e0b;
  --line: #282d3a;
  --tier-employee: #4a9eff;
  --tier-department: #f08030;
  --tier-restricted: #f06060;
  --tier-policy: #30c0d0;
  --tier-public: #40c060;

  --org-text: #f0f4f8;
  --org-text-on-dark: #ffffff;
  --org-link: #8fc3ff;
  --org-connector: #b5c0d3;

  --org-green-900: #4e9f62;
  --org-green-700: #63b877;
  --org-green-500: #7ecd91;
  --org-green-300: #a4e1b5;

  --org-blue-900: #3e7ea5;
  --org-blue-800: #4e93bb;
  --org-blue-700: #62a7ff;
  --org-blue-650: #6f97da;
  --org-blue-500: #67b7ce;
  --org-blue-450: #73adff;
  --org-blue-300: #8fc8d7;
  --org-blue-200: #b4dce5;

  --org-red-900: #c86767;
  --org-red-850: #d3746b;
  --org-red-800: #de7b7b;
  --org-red-700: #e5877e;
  --org-red-650: #ea9288;
  --org-red-600: #f09e94;
  --org-red-500: #f5ada3;
  --org-red-200: #f6ceca;

  --org-alert-red: #ff8a8a;
  --org-orange: #ffbc6d;
}

html[data-theme="modern-dark"] body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
}

html[data-theme="modern-dark"] header h1 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.02em;
}

html[data-theme="modern-dark"] aside,
html[data-theme="modern-dark"] main {
  border-radius: 8px;
}

html[data-theme="modern-dark"] .hub-card {
  background: var(--surface);
  border-radius: 6px;
}

html[data-theme="modern-dark"] .hub-action {
  background: #242836;
}

html[data-theme="modern-dark"] .hub-action:hover {
  background: #2e3344;
}

html[data-theme="modern-dark"] code {
  background: #242836;
}

html[data-theme="modern-dark"] .ics-controls button {
  background: #242836;
}

html[data-theme="modern-dark"] .ics-controls button:hover {
  background: #2e3344;
}

html[data-theme="modern-dark"] .badge {
  background: #1e2a3a;
  border-radius: 6px;
}

html[data-theme="modern-dark"] .tier-badge.tier-employee  { background: #1a2a40; }
html[data-theme="modern-dark"] .tier-badge.tier-department { background: #2e1800; }
html[data-theme="modern-dark"] .tier-badge.tier-restricted { background: #2e1010; }
html[data-theme="modern-dark"] .tier-badge.tier-policy     { background: #0e2428; }

html[data-theme="modern-dark"] #sidebarOffcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="modern-dark"] button.tier-btn-employee:hover   { background: rgba(74,158,255,0.15); }
html[data-theme="modern-dark"] button.tier-btn-department:hover { background: rgba(240,128,48,0.15); }
html[data-theme="modern-dark"] button.tier-btn-restricted:hover { background: rgba(240,96,96,0.15); }

html[data-theme="modern-dark"] span.tier-btn-active.tier-btn-employee   { background: rgba(74,158,255,0.15); }
html[data-theme="modern-dark"] span.tier-btn-active.tier-btn-department { background: rgba(240,128,48,0.15); }
html[data-theme="modern-dark"] span.tier-btn-active.tier-btn-restricted { background: rgba(240,96,96,0.15); }

/* ── Theme switcher UI ────────────────────────────────────── */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 0;
}

.theme-switcher-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.theme-select {
  min-width: 165px;
  border-color: var(--line);
  background-color: var(--surface);
  color: var(--ink);
}

.theme-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand) 25%, transparent);
}

.footer-theme-bar .theme-switcher {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
}

.footer-theme-bar .theme-switcher-label {
  flex: 0 0 auto;
}

.footer-theme-bar .theme-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}