/* =============================================================================
   CogniSuite Portal — app.css
   Single canonical stylesheet for all portal pages.
   ============================================================================= */

/* ===== BASE ===== */
* { font-family: 'Inter', sans-serif; }

/* ===== THEMES ===== */
:root,
html[data-theme="midnight"] {
  font-size: 14px;
  --ds-bg: #0a1628;
  --ds-sf: #0f2240;
  --ds-tx: #fff;
  --ds-tx2: #c0cdd6;
  --ds-tx3: #8899a6;
  --ds-ac: #c9a84c;
  --ds-ac2: #b8973f;
  --ds-act: #0a1628;
  --ds-bd: rgba(255,255,255,.16);
  --ds-hv: rgba(255,255,255,.08);
  --ds-inp: #0a1628;
  --ds-hf: 'Inter', sans-serif;
}

html[data-theme="light"] {
  font-size: 14px;
  --ds-bg: #f0f2f5;
  --ds-sf: #fff;
  --ds-tx: #1a202c;
  --ds-tx2: #8899a6;
  --ds-tx3: #b0bec5;
  --ds-ac: #2563eb;
  --ds-ac2: #1d4ed8;
  --ds-act: #fff;
  --ds-bd: rgba(0,0,0,.08);
  --ds-hv: rgba(0,0,0,.05);
  --ds-inp: #f8fafc;
  --ds-hf: 'Inter', sans-serif;
}

html[data-theme="slate"] {
  font-size: 14px;
  --ds-bg: #1e293b;
  --ds-sf: #334155;
  --ds-tx: #f1f5f9;
  --ds-tx2: #b0bec5;
  --ds-tx3: #8899a6;
  --ds-ac: #14b8a6;
  --ds-ac2: #0d9488;
  --ds-act: #0f172a;
  --ds-bd: rgba(148,163,184,.12);
  --ds-hv: rgba(255,255,255,.05);
  --ds-inp: #1e293b;
  --ds-hf: 'Inter', sans-serif;
}

html[data-theme="compact"] {
  font-size: 13px;
  --ds-bg: #0a1628;
  --ds-sf: #0d1f3c;
  --ds-tx: #fff;
  --ds-tx2: #b0bec5;
  --ds-tx3: #8899a6;
  --ds-ac: #c9a84c;
  --ds-ac2: #b8973f;
  --ds-act: #0a1628;
  --ds-bd: rgba(255,255,255,.08);
  --ds-hv: rgba(255,255,255,.04);
  --ds-inp: #0a1628;
  --ds-hf: 'Inter', sans-serif;
}

html[data-theme="executive"] {
  font-size: 17px;
  --ds-bg: #1a1410;
  --ds-sf: #2a2218;
  --ds-tx: #f5f0e8;
  --ds-tx2: #c4b8a4;
  --ds-tx3: #8a7e6e;
  --ds-ac: #d4a843;
  --ds-ac2: #c49835;
  --ds-act: #1a1410;
  --ds-bd: rgba(196,184,164,.12);
  --ds-hv: rgba(212,168,67,.06);
  --ds-inp: #1a1410;
  --ds-hf: 'Georgia', 'Times New Roman', serif;
}

/* ===== THEME OVERRIDES (Tailwind hardcoded → CSS vars) ===== */
body { background: var(--ds-bg) !important; }
h1, h2, h3 { font-family: var(--ds-hf) !important; }
html[data-theme="executive"] * { font-family: 'Georgia', 'Times New Roman', serif !important; }

/* ===== STEEL THEME ===== */
html[data-theme="steel"] {
  font-size: 14px;
  --ds-bg: #09090b;
  --ds-sf: #1c1c22;
  --ds-tx: #fafafa;
  --ds-tx2: #b4bcc8;
  --ds-tx3: #8892a0;
  --ds-ac: #3b82f6;
  --ds-ac2: #2563eb;
  --ds-act: #fff;
  --ds-bd: rgba(255,255,255,.18);
  --ds-hv: rgba(59,130,246,.10);
  --ds-inp: #111115;
  --ds-hf: 'DM Sans', sans-serif;
}
html[data-theme="steel"] * { font-family: 'DM Sans', sans-serif !important; }
html[data-theme="steel"] [class*="text-[#c9a84c]"] { color: #3b82f6 !important; }
html[data-theme="steel"] [class*="bg-[#c9a84c]"] { background: #3b82f6 !important; color: #fff !important; }
html[data-theme="steel"] [class*="border-[#c9a84c]"] { border-color: #3b82f6 !important; }
html[data-theme="steel"] .sidebar-link.active { background: rgba(59,130,246,.12) !important; color: #3b82f6 !important; }
html[data-theme="steel"] #ds-theme-bar button.active { background: #3b82f6 !important; color: #fff !important; }

/* ===== BRUTALIST THEME ===== */
html[data-theme="brutalist"] {
  font-size: 14px;
  --ds-bg: #111111;
  --ds-sf: #1c1c1c;
  --ds-tx: #ffffff;
  --ds-tx2: #999999;
  --ds-tx3: #666666;
  --ds-ac: #ff6600;
  --ds-ac2: #e05500;
  --ds-act: #fff;
  --ds-bd: rgba(255,255,255,.09);
  --ds-hv: rgba(255,102,0,.06);
  --ds-inp: #111111;
  --ds-hf: 'Space Mono', monospace;
}
html[data-theme="brutalist"] * { font-family: 'Space Mono', monospace !important; }
html[data-theme="brutalist"] [class*="text-[#c9a84c]"] { color: #ff6600 !important; }
html[data-theme="brutalist"] [class*="bg-[#c9a84c]"] { background: #ff6600 !important; color: #fff !important; }
html[data-theme="brutalist"] [class*="border-[#c9a84c]"] { border-color: #ff6600 !important; }
html[data-theme="brutalist"] .sidebar-link.active { background: rgba(255,102,0,.1) !important; color: #ff6600 !important; }
html[data-theme="brutalist"] #ds-theme-bar button.active { background: #ff6600 !important; color: #fff !important; }
header { background: var(--ds-sf) !important; border-color: var(--ds-bd) !important; }
nav { background: var(--ds-sf) !important; border-color: var(--ds-bd) !important; }
.text-white { color: var(--ds-tx) !important; }
[class*="text-white/"] { color: var(--ds-tx3) !important; }
[class*="bg-[#0d1f3c]"] { background-color: var(--ds-sf) !important; }
[class*="bg-[#0a1628]"] { background-color: var(--ds-bg) !important; }
[class*="text-[#c9a84c]"] { color: var(--ds-ac) !important; }
[class*="text-[#b0bec5]"] { color: var(--ds-tx2) !important; }
[class*="text-[#8899a6]"] { color: var(--ds-tx3) !important; }
[class*="text-[#0a1628]"] { color: var(--ds-act) !important; }
[class*="bg-[#c9a84c]"] { background-color: var(--ds-ac) !important; }
[class*="hover:bg-[#b8973f]"]:hover { background-color: var(--ds-ac2) !important; }
[class*="border-white"] { border-color: var(--ds-bd) !important; }
[class*="bg-white/"] { background-color: var(--ds-hv) !important; }
[class*="hover:bg-white/"]:hover { background-color: var(--ds-hv) !important; }
input, textarea, select { background-color: var(--ds-inp) !important; color: var(--ds-tx) !important; border-color: var(--ds-bd) !important; }
input:focus, textarea:focus, select:focus { border-color: var(--ds-ac) !important; }
input.field-error, textarea.field-error, select.field-error { border-color: #ef4444 !important; }
[class*="bg-black/"] { background-color: rgba(0,0,0,.6) !important; }

/* ===== SIDEBAR ===== */
.sidebar-link.active {
  background: color-mix(in srgb, var(--ds-ac) 10%, transparent) !important;
  color: var(--ds-ac) !important;
  border-left-color: var(--ds-ac) !important;
  border-left: 3px solid var(--ds-ac);
}
.sidebar-link { color: var(--ds-tx2) !important; }
.sidebar-link:hover:not(.active) { background: var(--ds-hv) !important; color: var(--ds-tx) !important; }

/* ===== TABS ===== */
.tab { border-bottom: 2px solid transparent; }
.tab.active { color: var(--ds-ac) !important; border-bottom-color: var(--ds-ac) !important; }

/* ===== BADGES ===== */
.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
}
.priority-high { background: #ef4444; }
.priority-normal { background: #c9a84c; }
.priority-low { background: #22c55e; }

/* ===== CARDS ===== */
.card:hover { border-color: rgba(201,168,76,0.3); transform: translateY(-1px); }
.task-card:hover { border-color: rgba(201,168,76,0.3); transform: translateY(-1px); }

/* ===== ACTIONS MENU ===== */
.actions-menu {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--ds-sf, #0d1f3c);
  border: 1px solid var(--ds-bd);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 160px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.actions-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ds-tx2, #b0bec5);
  background: none;
  border: none;
  cursor: pointer;
}
.actions-menu button:hover { background: var(--ds-hv); color: var(--ds-tx, #fff); }

/* ===== TREE TABLE ===== */
#reqTree { border-collapse: collapse; width: 100%; font-size: 13px; }

/* ===== TYPE HIERARCHY ===== */
/* Level 1 — Logo / Page title : 2xl (19.5px) — set inline */
/* Level 2 — Project name in header : xl (16.25px) — set inline */
/* Level 3 — Section / group labels : 13px bold — set inline in renderTree */
/* Level 4 — Body / table rows : 13px — base */
/* Level 5 — Metadata / counts / dates : 11px — set inline */
/* Tabs, sidebar links : text-base (13px) */
/* Badges, labels, pill text : 11px */
.tab { font-size: 13px; }
.sidebar-link { font-size: 13px; }
#reqTree th { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
#reqTree td { font-size: 13px; }
#reqTree th {
  text-align: left;
  padding: 6px 10px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-tx3, #8899a6);
  border-bottom: 1px solid var(--ds-bd, rgba(255,255,255,.08));
  user-select: none;
  white-space: nowrap;
}
#reqTree td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--ds-bd, rgba(255,255,255,.08));
  vertical-align: middle;
  white-space: nowrap;
}
#reqTree tbody tr { transition: background .1s; }
#reqTree tbody tr:hover { background: var(--ds-hv, rgba(255,255,255,.04)); }
#reqTree tbody tr.row-list { background: var(--ds-sf, #0d1f3c); }
#reqTree tbody tr.row-list:hover { background: color-mix(in srgb, var(--ds-sf, #0d1f3c) 85%, var(--ds-tx, white)); }
#reqTree tbody tr.row-section { background: rgba(255,255,255,.02); }
#reqTree .row-num { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ds-tx3, #8899a6); }

/* ===== DRAG & DROP ===== */
#reqTree .drag-handle { cursor: grab; opacity: 0.3; transition: opacity .15s; }
#reqTree tr:hover .drag-handle { opacity: 0.8; }
#reqTree .collapse-btn {
  cursor: pointer;
  user-select: none;
  display: inline-block;
  width: 16px;
  text-align: center;
  font-size: 10px;
  color: var(--ds-tx3, #8899a6);
  transition: transform .15s;
}
#reqTree .collapse-btn.collapsed { transform: rotate(-90deg); }
.drop-above { box-shadow: 0 -2px 0 var(--ds-ac, #c9a84c) inset; }
.drop-below { box-shadow: 0 2px 0 var(--ds-ac, #c9a84c) inset; }
.drop-into  { box-shadow: inset 0 0 0 1px var(--ds-ac, #c9a84c); }

/* ===== THEME BAR ===== */
#ds-theme-bar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  gap: 3px;
  padding: 4px;
  background: var(--ds-sf);
  border: 1px solid var(--ds-bd);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
#ds-theme-bar button {
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--ds-tx2);
  white-space: nowrap;
  transition: all .15s;
  font-size: 12px;
}
#ds-theme-bar button:hover { background: var(--ds-hv); }
#ds-theme-bar button.active { background: var(--ds-ac); color: var(--ds-act); font-weight: 600; }
#ds-theme-bar, #ds-theme-bar * { font-family: 'Inter', sans-serif !important; }

/* ===== AUTH PAGES ===== */
.code-input {
  letter-spacing: 0.5em;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
}