/* ═══════════════════════════════════════════════════════════════
   STRATEGOS v5.0 — HUD + GLASSMORPHISM DESIGN SYSTEM
   Aesthetic: Sci-Fi Command Center × Frosted Glass Intelligence
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Share+Tech+Mono&family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* ── Backgrounds (Dar al Afkar layered system) ── */
  --bg-deep: #020810;
  --bg: #061020;
  --bg-panel: rgba(10,22,40,0.65);
  --bg-panel-solid: #0a1628;
  --bg-panel-hover: rgba(14,30,56,0.75);
  --bg-glass: rgba(10,22,40,0.45);
  --bg-glass-strong: rgba(10,22,40,0.72);
  --bg-hover: #12243e;

  /* ── Frame / Border ── */
  --frame: #1a3050;
  --frame-light: #2a4a70;
  --frame-bright: #3a6090;

  /* ── Primary: Cyan ── */
  --cyan: #00d4ff;
  --cyan-light: #80eaff;
  --cyan-dim: rgba(0,212,255,0.10);
  --border-cyan: rgba(0,191,255,0.4);
  --border-cyan-dim: rgba(0,191,255,0.2);
  --border-cyan-glow: rgba(0,191,255,0.25);

  /* ── Secondary: Gold ── */
  --gold: #C9A227;
  --gold-dim: rgba(201,162,39,0.10);
  --gold-glow: rgba(201,162,39,0.25);

  /* ── Accent: Blue ── */
  --blue: #0088fc;
  --blue-dim: rgba(0,136,252,0.10);
  --blue-deep: #004488;

  /* ── Semantic ── */
  --green: #00e88f;
  --green-dim: rgba(0,232,143,0.10);
  --red: #ff3040;
  --red-dim: rgba(255,48,64,0.10);
  --amber: #ffb830;
  --amber-dim: rgba(255,184,48,0.10);
  --purple: #a78bfa;
  --purple-dim: rgba(167,139,250,0.10);
  --teal: #00d4aa;

  /* ── Text (high-contrast hierarchy) ── */
  --text: #d0e8ff;
  --text-sec: #8aaad0;
  --text-muted: #5a7da8;

  /* ── Radius ── */
  --r: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* ── Easing ── */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-smooth: cubic-bezier(0.4,0,0.2,1);

  /* ── Fonts (DM Sans body like Dar al Afkar) ── */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'DM Sans', 'Noto Kufi Arabic', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;

  /* ── Layout ── */
  --sidebar-w: 230px;

  /* ── Shadows ── */
  --shadow-glow: 0 0 20px var(--border-cyan-glow);
  --shadow-card: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-float: 0 8px 32px rgba(0,0,0,0.6);
}

/* ══════════ RESET ══════════ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
::selection { background: rgba(0,212,255,0.2); }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--frame); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--frame-bright); }

/* CRT Scanlines */
body::after {
  content:""; position:fixed; inset:0; z-index:9999;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,10,30,0.06) 2px,rgba(0,10,30,0.06) 4px);
}

/* ══════════ APP LAYOUT ══════════ */
.app { display:flex; min-height:100vh; position:relative; }

/* ── SIDEBAR ── */
.sidebar {
  width:var(--sidebar-w); position:fixed; top:0; left:0; bottom:0;
  background: var(--bg-glass-strong);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--frame);
  display:flex; flex-direction:column; z-index:100;
  transition: width 0.3s var(--ease), transform 0.4s var(--ease);
  overflow:hidden;
}
.sidebar::before {
  content:""; position:absolute; top:0; right:0; width:1px; height:100%;
  background: linear-gradient(180deg, transparent, rgba(0,212,255,0.15), transparent);
}
.sidebar-brand {
  padding:20px 16px 20px 16px; border-bottom:1px solid var(--frame);
  display:flex; align-items:center; gap:12px;
  padding-right:42px; /* room for collapse button */
}
.brand-mark {
  width:42px; height:42px; border-radius:10px;
  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(200,164,78,0.15));
  border: 2px solid rgba(0,212,255,0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  box-shadow: 0 0 15px rgba(0,212,255,0.1);
  animation: corePulse 3s ease-in-out infinite alternate;
}
.brand-text-primary {
  font-family:var(--font-display); font-size:14px; font-weight:800;
  color:var(--cyan-light); letter-spacing:2px; text-transform:uppercase;
}
.brand-text-sub {
  font-family:var(--font-mono); font-size:8px; color:var(--gold);
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.sidebar-nav { flex:1; padding:10px 8px; overflow-y:auto; }
.nav-label {
  font-family:var(--font-mono); font-size:8px; font-weight:700;
  color:var(--text-muted); letter-spacing:2px; text-transform:uppercase;
  padding:14px 12px 6px;
}
.nav-btn {
  width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--r); border:1px solid transparent; background:transparent;
  color:var(--text-sec); font-size:12px; font-weight:600; cursor:pointer;
  font-family:var(--font-body); text-align:left;
  transition: all 0.2s var(--ease-smooth);
  border-left:2px solid transparent; position:relative;
}
.nav-btn:hover {
  background:rgba(0,212,255,0.05); color:var(--text);
  border-color:rgba(0,212,255,0.08);
}
.nav-btn.active {
  background: rgba(0,212,255,0.08);
  border-left-color:var(--cyan);
  color:var(--cyan); font-weight:700;
  box-shadow: inset 0 0 20px rgba(0,212,255,0.03);
}
.nav-btn.active::after {
  content:""; position:absolute; left:0; top:25%; height:50%; width:2px;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
}
.nav-btn .icon { width:22px; display:inline-flex; align-items:center; justify-content:center; opacity:0.8; flex-shrink:0; }
.nav-btn .icon svg { width:16px; height:16px; }
.nav-btn.active .icon { opacity:1; }
.nav-badge {
  margin-left:auto; background:rgba(0,212,255,0.15); color:var(--cyan);
  padding:1px 7px; border-radius:10px; font-size:9px; font-weight:700;
  font-family:var(--font-mono);
}
.sidebar-bottom {
  padding:14px; border-top:1px solid var(--frame);
  display:flex; flex-direction:column; gap:6px;
}
.sidebar-footer {
  padding:10px 14px 14px; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.sidebar-logo-divider {
  width:60%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0.25;
  margin:2px auto;
}
.sidebar-slc-logo {
  height:28px; width:auto; opacity:0.6;
  filter:brightness(0) invert(1);
  transition:opacity 0.3s;
}
.sidebar-footer:hover .sidebar-slc-logo { opacity:0.9; }
.sidebar-logos {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
}
.sidebar-logo-cli {
  height:70px; width:auto; opacity:0.85;
  filter:brightness(1.1);
  transition:all 0.3s;
}
.sidebar-logos:hover .sidebar-logo-cli {
  opacity:1; filter:brightness(1.2) drop-shadow(0 0 8px rgba(0,51,160,0.3));
}
.powered-by-cli {
  font-family:var(--font-mono); font-size:8px; color:var(--text-muted);
  letter-spacing:1.5px; text-transform:uppercase;
}
.sidebar-version {
  font-family:var(--font-mono); font-size:8px; color:var(--text-muted);
  opacity:0.5; text-align:center; padding:2px 0;
}
/* Light theme logo overrides */
[data-theme="light"] .sidebar-slc-logo { filter:none; opacity:0.45; }
[data-theme="light"] .sidebar-footer:hover .sidebar-slc-logo { opacity:0.7; }
[data-theme="light"] .sidebar-logo-cli { opacity:0.65; }
[data-theme="light"] .sidebar-logos:hover .sidebar-logo-cli { opacity:0.85; }

/* ── Sidebar Collapse Button ── */
.sidebar-collapse-btn {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:6px;
  background:transparent; border:1px solid var(--frame);
  color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.sidebar-collapse-btn:hover { color:var(--cyan); border-color:var(--cyan); background:var(--cyan-dim); }
.sidebar-brand { position:relative; }

/* ── Sidebar Profile ── */
.sidebar-profile {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--frame);
  margin-bottom:4px;
}
.sidebar-profile-avatar {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--cyan-dim), var(--gold-dim));
  border:2px solid var(--cyan);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:11px; font-weight:700;
  color:var(--cyan-light); flex-shrink:0;
  box-shadow:0 0 8px rgba(0,212,255,0.15);
}
.sidebar-profile-info { display:flex; flex-direction:column; overflow:hidden; }
.sidebar-profile-name {
  font-family:var(--font-body); font-size:12px; font-weight:600;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-profile-role {
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:8px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  padding:2px 6px; border-radius:4px; margin-top:3px; width:fit-content;
}
.sidebar.collapsed .sidebar-profile { justify-content:center; padding:10px 4px; }
.sidebar.collapsed .sidebar-profile-info { display:none; }
.sidebar.collapsed .sidebar-profile-avatar { width:30px; height:30px; font-size:10px; }

/* ── Mobile Hamburger ── */
.btn-hamburger-mobile {
  display:none; position:fixed; top:12px; left:12px; z-index:200;
  width:36px; height:36px; border-radius:8px;
  background:var(--bg-glass-strong); border:1px solid var(--frame);
  color:var(--cyan); cursor:pointer;
  align-items:center; justify-content:center;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.btn-hamburger-mobile:hover { border-color:var(--cyan); background:var(--cyan-dim); }
[data-theme="light"] .sidebar-profile-avatar { border-color:var(--blue); color:var(--blue); background:linear-gradient(135deg, rgba(0,136,252,0.08), rgba(201,162,39,0.06)); }
[data-theme="light"] .btn-hamburger-mobile { background:rgba(255,255,255,0.85); border-color:#d0d5dd; color:var(--blue); }

/* ── Sidebar Collapsed State ── */
.sidebar.collapsed { width:60px; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .brand-text-primary,
.sidebar.collapsed .brand-text-sub,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-btn span:not(.icon),
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .sidebar-footer .sidebar-logos,
.sidebar.collapsed .sidebar-footer .sidebar-logo-divider,
.sidebar.collapsed .sidebar-footer .powered-by-cli,
.sidebar.collapsed .sidebar-footer .sidebar-version,
.sidebar.collapsed .sidebar-footer .sidebar-slc-logo { display:none; }
.sidebar.collapsed .sidebar-brand { justify-content:center; padding:16px 8px; padding-right:8px; flex-direction:column; }
.sidebar.collapsed .brand-mark { width:36px; height:36px; margin:0 auto; }
.sidebar.collapsed .nav-btn { justify-content:center; padding:10px 0; gap:0; }
.sidebar.collapsed .nav-btn .icon { width:auto; }
.sidebar.collapsed .sidebar-nav { padding:6px 4px; }
.sidebar.collapsed .sidebar-footer { padding:8px 4px 10px; }
.sidebar.collapsed .sidebar-collapse-btn { position:static; transform:none; margin:6px auto 0; }

/* ── MAIN ── */
.main { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; height:100vh; max-height:100vh; transition:margin-left 0.3s var(--ease); overflow:hidden; }
.sidebar.collapsed + .main { margin-left:60px; }

/* ── GOV HEADER ── */
.gov-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 24px;
  background: linear-gradient(135deg, rgba(6,16,32,0.95), rgba(10,22,40,0.95));
  border-bottom:2px solid;
  border-image: linear-gradient(90deg, var(--gold), var(--cyan), var(--gold)) 1;
  backdrop-filter:blur(10px);
}
.gov-header-left,.gov-header-right { display:flex; align-items:center; gap:12px; }
.gov-logo {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-dim), var(--cyan-dim));
  border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow: 0 0 12px var(--gold-glow);
}
.gov-label { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--gold); letter-spacing:2px; }
.gov-label-sub { font-family:var(--font-mono); font-size:8px; color:var(--text-muted); letter-spacing:1px; }
.gov-vision {
  flex:1; text-align:center; padding:0 20px;
  font-size:12px; color:rgba(208,232,255,0.5); line-height:1.5;
  font-family:var(--font-body);
}

/* ── TOPBAR ── */
.topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 24px;
  background:var(--bg-glass-strong);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--frame);
  position:sticky; top:0; z-index:50;
}
.topbar-left { display:flex; align-items:center; gap:12px; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.breadcrumb { display:flex; align-items:center; gap:6px; }
.breadcrumb button {
  background:none; border:none; color:var(--cyan);
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  cursor:pointer; padding:0; transition: color 0.2s;
}
.breadcrumb button:hover { color:var(--cyan-light); text-shadow:0 0 8px rgba(0,212,255,0.3); }
.breadcrumb .sep { color:var(--text-muted); font-size:10px; }
.breadcrumb .current { color:var(--text-sec); font-family:var(--font-mono); font-size:11px; }
.role-badge {
  font-family:var(--font-mono); font-size:9px; padding:3px 10px; border-radius:var(--r);
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
}
.role-ADMIN { background:var(--gold-dim); color:var(--gold); border:1px solid rgba(200,164,78,0.3); }
.role-MANAGER { background:var(--blue-dim); color:var(--blue); border:1px solid rgba(68,136,255,0.3); }
.role-GEN_SECRETARY { background:var(--purple-dim); color:var(--purple); border:1px solid rgba(168,85,247,0.3); }
.user-info { display:flex; align-items:center; gap:8px; }
.user-avatar {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; font-family:var(--font-mono);
}
.user-name { font-size:12px; font-weight:600; color:var(--text); }
.readonly-banner {
  padding:8px 24px; background:var(--purple-dim);
  border-bottom:1px solid rgba(168,85,247,0.2);
  font-family:var(--font-mono); font-size:10px; color:var(--purple);
  font-weight:600; letter-spacing:1px;
}

/* ── CONTENT AREA ── */
.content-wrap { flex:1 1 0%; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.content-main {
  flex:1 1 0%; padding:20px 24px 80px; overflow-y:auto; min-height:0;
  position:relative; display:flex; flex-direction:column; align-items:stretch;
}

/* ── PAGES ── */
.page { display:none !important; height:0; overflow:hidden; visibility:hidden; margin:0; padding:0; border:0; flex:0 0 0; }
.page.on { display:block !important; height:auto; overflow:visible; visibility:visible; flex:1 0 auto; animation: pageReveal 0.5s var(--ease) both; }
@keyframes pageReveal {
  from { opacity:0; transform:translateY(8px); filter:brightness(1.3); }
  to { opacity:1; transform:translateY(0); filter:brightness(1); }
}
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* Translate button */
.btn-translate {
  background:none; border:1px solid var(--border-cyan); border-radius:4px;
  color:var(--cyan); font-size:9px; padding:2px 6px; cursor:pointer;
  font-family:var(--font-mono); white-space:nowrap; transition:all 0.2s;
  display:inline-flex; align-items:center; gap:2px; vertical-align:middle;
}
.btn-translate:hover { background:var(--cyan-dim); border-color:var(--cyan); }

/* ── VALUES BAR ── */
.values-bar {
  display:flex; justify-content:center; gap:32px; padding:10px 20px;
  background:linear-gradient(90deg, rgba(6,16,32,0.95), rgba(10,22,40,0.95));
  border-top:1px solid var(--frame);
}
.value-item {
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--gold); font-weight:600;
}
.value-item .vi { font-size:14px; opacity:0.6; }

/* ══════════ GLASSMORPHISM CARDS ══════════ */
.card {
  background: var(--bg-glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--frame);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  transition: all 0.3s var(--ease-smooth);
}
.card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:0; transition: opacity 0.3s;
}
.card:hover {
  border-color: var(--border-cyan-dim);
  box-shadow: 0 0 24px rgba(0,191,255,0.06), var(--shadow-card);
}
.card:hover::before { opacity:0.6; }
.card-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--frame);
}
.card-title {
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  color:var(--cyan); letter-spacing:1.5px; text-transform:uppercase;
}
.card-body { padding:16px; }
.card-body.flush { padding:0; }

/* ── CORNER BRACKETS ── */
.card-corners { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 0.3s; }
.card:hover .card-corners { opacity:1; }
.c-line { position:absolute; background:var(--cyan); transition:all 0.3s; }
.c-tl-h { top:0;left:0;width:16px;height:1px; } .c-tl-v { top:0;left:0;width:1px;height:16px; }
.c-tr-h { top:0;right:0;width:16px;height:1px; } .c-tr-v { top:0;right:0;width:1px;height:16px; }
.c-bl-h { bottom:0;left:0;width:16px;height:1px; } .c-bl-v { bottom:0;left:0;width:1px;height:16px; }
.c-br-h { bottom:0;right:0;width:16px;height:1px; } .c-br-v { bottom:0;right:0;width:1px;height:16px; }

/* ══════════ STATS ══════════ */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.stat {
  background:var(--bg-glass); backdrop-filter:blur(12px);
  border:1px solid var(--frame); border-radius:var(--r-md);
  padding:16px; text-align:center; position:relative; overflow:hidden;
}
.stat::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--cyan); opacity:0.3;
}
.stat-label {
  font-family:var(--font-mono); font-size:8px; color:var(--text-muted);
  letter-spacing:2px; text-transform:uppercase; margin-bottom:6px;
}
.stat-val {
  font-family:var(--font-display); font-size:24px; font-weight:800;
  color:var(--cyan-light);
}
.stat-sub { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); margin-top:2px; }

/* ══════════ GRIDS ══════════ */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.g5 { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }

/* ══════════ BUTTONS ══════════ */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--r); border:1px solid var(--frame);
  background:var(--bg-glass); backdrop-filter:blur(8px);
  color:var(--text-sec); font-size:11px; font-weight:600; cursor:pointer;
  font-family:var(--font-mono); letter-spacing:0.5px;
  transition:all 0.2s var(--ease-smooth);
}
.btn:hover { background:rgba(0,212,255,0.06); border-color:var(--border-cyan-dim); color:var(--text); }
.btn-primary {
  background:linear-gradient(180deg, rgba(0,191,255,0.12), rgba(0,100,200,0.06));
  border:1px solid var(--border-cyan); color:var(--cyan);
}
.btn-primary:hover {
  background:linear-gradient(180deg, rgba(0,191,255,0.2), rgba(0,100,200,0.12));
  box-shadow:0 0 16px var(--border-cyan-dim);
}
.btn-gold {
  background:var(--gold-dim); border-color:rgba(200,164,78,0.3); color:var(--gold);
}
.btn-gold:hover { background:rgba(200,164,78,0.18); box-shadow:0 0 12px var(--gold-glow); }
.btn-danger { background:var(--red-dim); border-color:rgba(255,48,64,0.3); color:var(--red); }
.btn-success { background:var(--green-dim); border-color:rgba(0,232,112,0.3); color:var(--green); }
.btn-ghost { background:transparent; border-color:transparent; color:var(--text-muted); padding:4px 8px; }
.btn-ghost:hover { color:var(--cyan); }
.btn-sm { padding:5px 10px; font-size:10px; }
.btn-block { width:100%; justify-content:center; }
.btn:disabled { opacity:0.3; cursor:not-allowed; }

/* ══════════ FORMS ══════════ */
.fg { margin-bottom:14px; }
.fl {
  display:block; font-family:var(--font-mono); font-size:9px; font-weight:700;
  color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:5px;
}
.fi,.fs,.fta {
  width:100%; padding:10px 12px;
  background:var(--bg-panel); border:1px solid var(--frame);
  border-radius:var(--r); color:var(--text);
  font-family:var(--font-body); font-size:14px; font-weight:500;
  outline:none; transition:border-color 0.2s, box-shadow 0.2s;
}
.fi:focus,.fs:focus,.fta:focus {
  border-color:var(--border-cyan);
  box-shadow:0 0 0 2px var(--border-cyan-dim);
}
.fs { appearance:none; }
.fta { resize:vertical; min-height:50px; }
.fr { display:grid; gap:10px; }
.fr2 { grid-template-columns:1fr 1fr; }
.fr3 { grid-template-columns:1fr 1fr 1fr; }

/* ══════════ MODALS ══════════ */
.modal, .modal-bg {
  position:fixed; inset:0; z-index:1000;
  background:rgba(2,8,16,0.85); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center;
}
.modal.active, .modal-bg.on { display:flex; }
.modal-box, .modal-content {
  width:560px; max-width:92vw; max-height:88vh; overflow:auto;
  background:var(--bg-glass-strong); backdrop-filter:blur(20px);
  border:1px solid var(--frame-light); border-radius:var(--r-lg);
  position:relative;
  box-shadow:var(--shadow-float);
  animation: modalReveal 0.4s var(--ease) both;
}
.modal-content.modal-large { width:720px; }
@keyframes modalReveal {
  from { opacity:0; transform:scale(0.95) translateY(10px); filter:brightness(1.5); }
  to { opacity:1; transform:scale(1) translateY(0); filter:brightness(1); }
}
.modal-box::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--blue-deep), var(--cyan), var(--blue-deep));
}
.modal-head, .modal-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--frame);
}
.modal-header h2 {
  font-family:var(--font-display); font-size:14px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--cyan-light); margin:0;
}
.btn-close {
  background:rgba(255,255,255,0.05); border:1px solid var(--frame);
  border-radius:var(--r); color:var(--text-muted);
  width:28px; height:28px; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.btn-close:hover { background:var(--red-dim); color:var(--red); border-color:rgba(255,48,64,0.3); }
.modal-form { padding:0; }
.modal-title {
  font-family:var(--font-display); font-size:14px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--cyan-light);
}
.modal-x {
  background:rgba(255,255,255,0.05); border:1px solid var(--frame);
  border-radius:var(--r); color:var(--text-muted);
  width:28px; height:28px; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.modal-x:hover { background:var(--red-dim); color:var(--red); border-color:rgba(255,48,64,0.3); }
.modal-body { padding:20px; }
.modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:0 20px 20px; }

/* ══════════ TOAST ══════════ */
.toast-box { position:fixed; bottom:20px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:6px; }
.toast {
  background:var(--bg-glass-strong); backdrop-filter:blur(16px);
  border:1px solid rgba(0,232,112,0.4); border-radius:var(--r-md);
  padding:10px 18px; color:var(--green); font-weight:700;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.5px;
  box-shadow:0 0 16px rgba(0,232,112,0.1);
  animation: toastIn 0.4s var(--ease) both;
}
.toast.err { border-color:rgba(255,48,64,0.4); color:var(--red); box-shadow:0 0 16px rgba(255,48,64,0.1); }
.toast.warn { border-color:rgba(255,184,48,0.4); color:var(--amber); box-shadow:0 0 16px rgba(255,184,48,0.1); }
.toast.info-toast { border-color:rgba(0,212,255,0.4); color:var(--cyan); box-shadow:0 0 16px rgba(0,212,255,0.1); }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* ══════════ BADGES ══════════ */
.badge {
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  border-radius:var(--r); font-family:var(--font-mono);
  font-size:9px; font-weight:700; letter-spacing:1px;
}
.badge-dot { width:5px; height:5px; border-radius:50%; }
.badge-green { background:var(--green-dim); color:var(--green); }
.badge-green .badge-dot { background:var(--green); box-shadow:0 0 6px var(--green); }
.badge-amber { background:var(--amber-dim); color:var(--amber); }
.badge-amber .badge-dot { background:var(--amber); box-shadow:0 0 6px var(--amber); }
.badge-red { background:var(--red-dim); color:var(--red); }
.badge-red .badge-dot { background:var(--red); box-shadow:0 0 6px var(--red); }
.badge-blue { background:var(--blue-dim); color:var(--blue); }
.badge-blue .badge-dot { background:var(--blue); box-shadow:0 0 6px var(--blue); }
.badge-purple { background:var(--purple-dim); color:var(--purple); }
.badge-cyan { background:var(--cyan-dim); color:var(--cyan); }
.badge-teal { background:rgba(6,214,160,0.12); color:#06d6a0; }
.badge-gray { background:rgba(148,163,184,0.12); color:#94a3b8; }

/* ══════════ PROGRESS BAR ══════════ */
.prog-wrap { display:flex; align-items:center; gap:8px; }
.prog-bar {
  flex:1; height:6px; background:rgba(255,255,255,0.04);
  border-radius:3px; overflow:hidden;
}
.prog-fill { height:100%; border-radius:3px; transition:width 0.8s var(--ease); position:relative; }
.prog-fill.green { background:linear-gradient(90deg, rgba(0,232,112,0.4), var(--green)); box-shadow:0 0 8px rgba(0,232,112,0.2); }
.prog-fill.amber { background:linear-gradient(90deg, rgba(255,170,32,0.4), var(--amber)); box-shadow:0 0 8px rgba(255,170,32,0.2); }
.prog-fill.red { background:linear-gradient(90deg, rgba(255,48,64,0.4), var(--red)); box-shadow:0 0 8px rgba(255,48,64,0.2); }
.prog-fill.cyan { background:linear-gradient(90deg, rgba(0,212,255,0.4), var(--cyan)); box-shadow:0 0 8px rgba(0,212,255,0.2); }
.prog-label { font-family:var(--font-mono); font-size:10px; font-weight:700; min-width:32px; text-align:right; }

/* ══════════ GAUGES ══════════ */
.gauge-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.gauge-label { font-size:11px; font-weight:700; color:var(--text); text-align:center; }
.gauge-sublabel { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); text-align:center; }

/* ══════════ OBJECTIVES SIDEBAR ══════════ */
.obj-title {
  font-family:var(--font-display); font-size:12px; font-weight:800;
  color:var(--cyan); letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:14px; padding-bottom:8px;
  border-bottom:2px solid rgba(0,212,255,0.15);
}
.obj-item { display:flex; align-items:flex-start; gap:10px; padding:8px 0; }
.obj-dot { width:10px; height:10px; border-radius:50%; margin-top:3px; flex-shrink:0; }
.obj-line { width:1px; height:20px; background:rgba(0,212,255,0.1); margin:2px auto 0; }
.obj-text { font-size:11px; color:rgba(208,232,255,0.7); line-height:1.4; }

/* ══════════ DEPT CARDS ══════════ */
.dept-card {
  display:flex; align-items:center; gap:12px; padding:14px;
  background:var(--bg-glass); backdrop-filter:blur(10px);
  border:1px solid var(--frame); border-radius:var(--r-md);
  cursor:pointer; transition:all 0.25s var(--ease-smooth);
}
.dept-card:hover {
  background:rgba(0,212,255,0.05); border-color:var(--border-cyan-dim);
  box-shadow:0 0 16px rgba(0,191,255,0.05);
  transform:translateY(-1px);
}
.dept-icon { font-size:22px; }
.dept-name { font-size:12px; font-weight:700; color:var(--text); line-height:1.3; }
.dept-name-en { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); margin-top:2px; }
.dept-meta { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); margin-top:4px; }

/* ══════════ KPI CARD ══════════ */
.kpi-card {
  background:var(--bg-glass); backdrop-filter:blur(12px);
  border:1px solid var(--frame); border-radius:var(--r-md);
  padding:16px; position:relative; overflow:hidden;
  transition:all 0.25s var(--ease-smooth);
}
.kpi-card:hover { border-color:var(--border-cyan-dim); box-shadow:0 0 20px rgba(0,191,255,0.05); }
.kpi-name { font-size:13px; font-weight:700; color:var(--text); }
.kpi-name-en { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); margin-top:2px; }
.kpi-val { font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--cyan-light); }
.kpi-unit { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); }
.kpi-target { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); }
.kpi-actions { display:flex; gap:4px; margin-top:8px; }

/* ══════════ INITIATIVE CARD ══════════ */
.init-card {
  background:var(--bg-glass); backdrop-filter:blur(12px);
  border:1px solid var(--frame); border-radius:var(--r-md);
  padding:16px; margin-bottom:10px;
  transition:all 0.25s var(--ease-smooth);
}
.init-card:hover { border-color:var(--border-cyan-dim); }
.init-title { font-size:14px; font-weight:800; color:var(--text); }
.init-meta { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); margin-top:4px; }
.milestones { display:flex; gap:5px; flex-wrap:wrap; border-top:1px solid var(--frame); padding-top:10px; margin-top:10px; }
.ms-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--r);
  font-family:var(--font-mono); font-size:9px; cursor:pointer;
  transition:all 0.2s;
}
.ms-done { background:var(--green-dim); color:var(--green); border:1px solid rgba(0,232,112,0.2); }
.ms-prog { background:var(--blue-dim); color:var(--blue); border:1px solid rgba(68,136,255,0.2); }
.ms-plan { background:rgba(255,255,255,0.02); color:var(--text-muted); border:1px solid var(--frame); }

/* ══════════ DATA TABLE ══════════ */
.dtable { width:100%; }
.dtable-head {
  display:grid; gap:4px; padding:10px 14px;
  background:rgba(0,212,255,0.04); border-radius:var(--r);
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted);
  margin-bottom:4px;
}
.dtable-row {
  display:grid; gap:4px; padding:10px 14px;
  border-bottom:1px solid var(--frame); align-items:center;
  transition:background 0.15s;
}
.dtable-row:hover { background:rgba(0,212,255,0.03); }

/* ══════════ RISK MATRIX ══════════ */
.matrix { display:grid; grid-template-columns:30px repeat(5,1fr); gap:3px; }
.matrix-label { font-family:var(--font-mono); font-size:8px; color:var(--text-muted); display:flex; align-items:center; justify-content:center; }
.matrix-cell { border:1px solid var(--frame); border-radius:4px; padding:3px; min-height:40px; display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; }
.matrix-cell.critical { background:var(--red-dim); border-color:rgba(255,48,64,0.15); }
.matrix-cell.high { background:var(--amber-dim); border-color:rgba(255,170,32,0.1); }
.matrix-cell.medium { background:var(--blue-dim); border-color:rgba(68,136,255,0.08); }
.matrix-cell.low { background:var(--green-dim); border-color:rgba(0,232,112,0.08); }
.matrix-risk { font-family:var(--font-mono); font-size:7px; background:rgba(255,255,255,0.08); border-radius:2px; padding:1px 4px; color:var(--text); font-weight:600; }

/* ══════════ TABS ══════════ */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--frame); margin-bottom:16px; }
.tab-btn {
  padding:9px 16px; border:none; border-bottom:2px solid transparent;
  background:transparent; color:var(--text-muted);
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:1px; cursor:pointer; transition:all 0.2s;
}
.tab-btn:hover { color:var(--text-sec); }
.tab-btn.on {
  background:rgba(0,212,255,0.06); color:var(--cyan);
  border-bottom-color:var(--cyan);
}

/* ══════════ SECTION HEADER ══════════ */
.sec-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.sec-title { font-family:var(--font-display); font-size:16px; font-weight:800; color:var(--cyan-light); letter-spacing:1px; text-transform:uppercase; }
.sec-sub { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); margin-top:2px; letter-spacing:1px; }
.level-label { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }

/* ══════════ STRATEGY MAP PERSPECTIVES ══════════ */
.persp-card { border-left:3px solid; margin-bottom:12px; }

/* ══════════ CHART CONTAINER ══════════ */
.chart-wrap { position:relative; width:100%; }

/* ══════════ AI COMMAND CENTER ══════════ */
.ai-panel {
  background:var(--bg-glass); backdrop-filter:blur(16px);
  border:1px solid var(--frame); border-radius:var(--r-md);
  overflow:hidden;
}
.ai-header {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--frame);
  background:linear-gradient(90deg, rgba(0,212,255,0.05), transparent);
}
.ai-orb {
  width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle, var(--cyan), var(--blue-deep));
  box-shadow:0 0 16px rgba(0,212,255,0.3);
  animation:orbPulse 2s ease-in-out infinite alternate;
}
@keyframes orbPulse { 0%{transform:scale(1);box-shadow:0 0 16px rgba(0,212,255,0.3)} 100%{transform:scale(1.1);box-shadow:0 0 24px rgba(0,212,255,0.5)} }
.ai-title { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--cyan); letter-spacing:2px; text-transform:uppercase; }
.ai-status { font-family:var(--font-mono); font-size:9px; color:var(--green); letter-spacing:1px; }
.ai-chat { padding:16px; max-height:300px; overflow-y:auto; }
.ai-msg {
  padding:10px 14px; margin-bottom:8px; border-radius:var(--r-md);
  font-size:12px; line-height:1.6;
}
.ai-msg.system {
  background:rgba(0,212,255,0.06); border:1px solid rgba(0,212,255,0.12);
  color:var(--cyan-light);
}
.ai-msg.user { background:rgba(200,164,78,0.06); border:1px solid rgba(200,164,78,0.12); color:var(--gold); }
.ai-msg.insight {
  background:rgba(0,232,112,0.06); border:1px solid rgba(0,232,112,0.12);
  color:var(--green); border-left:3px solid var(--green);
}
.ai-msg.warning {
  background:var(--amber-dim); border:1px solid rgba(255,170,32,0.12);
  color:var(--amber); border-left:3px solid var(--amber);
}
.ai-msg.alert {
  background:var(--red-dim); border:1px solid rgba(255,48,64,0.12);
  color:var(--red); border-left:3px solid var(--red);
}
.ai-input-wrap {
  display:flex; gap:8px; padding:12px 16px;
  border-top:1px solid var(--frame);
}
.ai-input {
  flex:1; padding:8px 12px; background:var(--bg-panel);
  border:1px solid var(--frame); border-radius:var(--r);
  color:var(--text); font-family:var(--font-body); font-size:13px;
  outline:none;
}
.ai-input:focus { border-color:var(--border-cyan); box-shadow:0 0 8px var(--border-cyan-dim); }
.ai-input::placeholder { color:var(--text-muted); }

/* ══════════ WORKFLOW / GOVERNANCE ══════════ */
.workflow-step {
  display:flex; align-items:center; gap:12px; padding:12px;
  background:var(--bg-glass); border:1px solid var(--frame);
  border-radius:var(--r-md); margin-bottom:8px;
  transition:all 0.2s;
}
.workflow-step.active { border-color:var(--cyan); background:rgba(0,212,255,0.04); }
.workflow-step.completed { border-color:var(--green); background:rgba(0,232,112,0.03); }
.wf-num {
  width:28px; height:28px; border-radius:50%; font-family:var(--font-display);
  font-size:11px; font-weight:700; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
.wf-num.pending { background:var(--frame); color:var(--text-muted); }
.wf-num.active { background:var(--cyan-dim); color:var(--cyan); border:1px solid var(--border-cyan); box-shadow:0 0 8px var(--border-cyan-dim); }
.wf-num.done { background:var(--green-dim); color:var(--green); border:1px solid rgba(0,232,112,0.3); }
.wf-title { font-size:12px; font-weight:700; color:var(--text); }
.wf-sub { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); margin-top:2px; }
.wf-connector { width:1px; height:12px; background:var(--frame); margin:0 auto; }

/* ══════════ HEATMAP ══════════ */
.heatmap-grid { display:grid; gap:2px; }
.hm-cell {
  border-radius:3px; padding:6px; text-align:center;
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  transition:all 0.2s; cursor:pointer;
}
.hm-cell:hover { transform:scale(1.05); z-index:1; }

/* ══════════ SCENARIO SIMULATOR ══════════ */
.sim-slider-wrap { margin-bottom:14px; }
.sim-label { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); letter-spacing:1px; margin-bottom:4px; display:flex; justify-content:space-between; }
.sim-slider {
  width:100%; -webkit-appearance:none; height:4px;
  background:var(--frame); border-radius:2px; outline:none;
}
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--cyan); border:2px solid var(--bg);
  box-shadow:0 0 10px rgba(0,212,255,0.3); cursor:pointer;
}

/* ══════════ LOGIN — RASED-style Cinematic ══════════ */
.login-wrap {
  min-height:100vh; display:flex; flex-direction:column;
  background:#0a0e1a;
  position:relative; overflow:hidden;
  align-items:center; justify-content:center;
}
.login-wrap::before {
  content:''; position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(0,212,255,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 90%, rgba(200,164,78,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(0,212,255,0.03) 0%, transparent 80%);
  animation:loginBgPulse 8s ease-in-out infinite alternate;
}
@keyframes loginBgPulse{0%{opacity:0.7;transform:scale(1)}100%{opacity:1;transform:scale(1.05)}}
.login-wrap::after {
  content:''; position:fixed; inset:0; z-index:3; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,212,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.025) 1px, transparent 1px);
  background-size:60px 60px;
  animation:loginGridDrift 20s linear infinite;
}
@keyframes loginGridDrift{0%{transform:translate(0,0)}100%{transform:translate(60px,60px)}}

/* Faded Dubai wallpaper */
.login-bg-photo {
  position:fixed; inset:0; z-index:0;
  background-size:cover; background-position:center 60%; background-repeat:no-repeat;
  opacity:0; filter:saturate(0.5) brightness(0.55);
  animation:loginPhotoIn 2s ease-out forwards;
}
@keyframes loginPhotoIn{from{opacity:0;transform:scale(1.04)}to{opacity:0.4;transform:scale(1)}}
.login-bg-overlay {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,14,26,0.70) 0%, rgba(10,14,26,0.35) 45%, rgba(10,14,26,0.65) 100%);
}

/* Floating particles */
.login-particles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.login-particle{
  position:absolute; width:3px; height:3px;
  background:rgba(0,212,255,0.4); border-radius:50%;
  animation:loginFloat linear infinite;
}
@keyframes loginFloat{
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:1}90%{opacity:1}
  100%{transform:translateY(-10vh) scale(1);opacity:0}
}

.login-container {
  width:100%; max-width:440px; padding:24px;
  position:relative; z-index:10;
  flex:1; display:flex; align-items:center; justify-content:center;
}
.login-box {
  width:100%;
  background:rgba(14,19,36,0.88);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:48px 40px 36px;
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
  backdrop-filter:blur(40px);
  animation:loginCardIn 0.6s ease-out;
  position:relative; overflow:hidden;
}
.login-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan,#00d4ff), var(--gold,#C8A44E), transparent);
}
@keyframes loginCardIn{from{opacity:0;transform:translateY(24px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Logo area */
.login-logo-area{text-align:center;margin-bottom:32px}
.login-title {
  font-family:var(--font-display,'Segoe UI'); font-size:2.2rem; font-weight:800;
  color:#f0f2f7; letter-spacing:8px; margin-bottom:2px;
  text-align:center;
}
.login-title-ar {
  font-size:1.3rem; font-weight:700; color:var(--gold,#C8A44E);
  letter-spacing:3px; margin-bottom:14px; text-align:center;
}
.login-powered {
  font-size:0.7rem; font-weight:600; color:var(--cyan-light,#60d4ff);
  letter-spacing:2.5px; text-transform:uppercase; line-height:1.8; text-align:center;
}
.login-powered-sub {
  font-size:0.6rem; color:#64748b; letter-spacing:1.5px;
  text-transform:uppercase; line-height:1.6; text-align:center;
}
.login-powered-sub span{color:var(--gold,#C8A44E);font-weight:600}

.login-divider {
  height:1px; margin:24px 0 20px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

/* Form */
.login-form-rased{display:flex;flex-direction:column;gap:0}
.login-fg{margin-bottom:18px}
.login-fl {
  display:block; font-size:0.7rem; font-weight:600; color:#94a3b8;
  text-transform:uppercase; letter-spacing:1px; margin-bottom:7px;
}
.login-input-wrap{position:relative}
.login-input-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:#64748b; pointer-events:none;
}
.login-fi {
  width:100%; padding:13px 16px 13px 42px; font-size:0.88rem;
  background:rgba(255,255,255,0.06); border:1.5px solid rgba(255,255,255,0.08);
  border-radius:12px; color:#f0f2f7; transition:all 0.25s; outline:none;
  font-family:inherit;
}
.login-fi:focus {
  border-color:#3b82f6; background:rgba(255,255,255,0.08);
  box-shadow:0 0 0 3px rgba(59,130,246,0.12);
}
.login-fi::placeholder{color:#64748b}

/* Button */
.login-btn-rased {
  width:100%; padding:14px; font-size:0.88rem; font-weight:700;
  background:linear-gradient(135deg, #3b82f6, #2563eb);
  color:#fff; border:none; border-radius:12px; cursor:pointer;
  letter-spacing:1px; transition:all 0.25s; margin-top:8px;
  font-family:inherit; text-transform:uppercase;
  position:relative; overflow:hidden;
}
.login-btn-rased:hover{box-shadow:0 4px 24px rgba(59,130,246,0.4);transform:translateY(-1px)}
.login-btn-rased:active{transform:translateY(0);box-shadow:none}
.login-btn-rased:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}

/* Error */
.login-error-msg {
  padding:11px 16px; margin-bottom:16px;
  background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2);
  border-radius:10px; font-size:0.8rem; color:#ef4444; text-align:center;
}
.login-error-msg.show{display:block;animation:loginShake 0.35s ease-out}
@keyframes loginShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* Demo accounts */
.login-demos-rased {
  margin-top:20px; padding:12px;
  background:rgba(0,212,255,0.03); border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
}
.login-demos-title-rased {
  font-family:var(--font-mono,monospace); font-size:0.55rem; color:#64748b;
  letter-spacing:2px; margin-bottom:8px;
}
.login-demo-row-rased {
  display:flex; justify-content:space-between; padding:3px 0;
  font-family:var(--font-mono,monospace); font-size:0.65rem;
}
.login-demo-role{color:var(--cyan,#00d4ff);font-weight:600}
.login-demo-cred{color:#64748b}

/* Footer */
.login-footer-rased {
  text-align:center; margin-top:24px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.login-footer-text{font-size:0.6rem;color:#64748b;line-height:1.7;letter-spacing:0.5px}
.login-cli-logo{margin-top:16px;text-align:center}
.login-cli-img {
  width:auto; height:60px; max-width:280px; object-fit:contain;
  opacity:0.5; filter:brightness(2); transition:opacity 0.3s;
}
.login-cli-img:hover{opacity:0.8}

/* Mobile */
@media(max-width:480px){
  .login-box{padding:36px 24px 28px;border-radius:16px}
  .login-title{font-size:1.8rem;letter-spacing:5px}
}

/* Legacy compat — keep old class names working */
.login-err, .login-error { color:var(--red); font-family:var(--font-mono); font-size:11px; margin-bottom:10px; }
.login-form { display:flex; flex-direction:column; gap:2px; }
.login-subtitle { font-family:var(--font-body); font-size:12px; color:var(--text-sec); text-align:center; margin-bottom:28px; }
.gov-banner {
  padding:10px 28px; border-bottom:2px solid;
  border-image:linear-gradient(90deg, var(--gold), var(--cyan), var(--gold)) 1;
  text-align:center; position:relative; z-index:1;
}
.gov-banner span { font-family:var(--font-mono); font-size:9px; color:var(--gold); letter-spacing:4px; }
.demo-accounts {
  margin-top:18px; padding:12px;
  background:rgba(0,212,255,0.03); border-radius:var(--r-md);
  border:1px solid var(--frame);
}
.demo-title { font-family:var(--font-mono); font-size:8px; color:var(--text-muted); letter-spacing:2px; margin-bottom:6px; text-transform:uppercase; }
.demo-list { display:flex; flex-direction:column; gap:4px; }
.demo-item { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); padding:2px 0; }
.demo-item strong { color:var(--cyan); }
.brand-icon {
  width:42px; height:42px; border-radius:10px;
  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(200,164,78,0.15));
  border: 2px solid rgba(0,212,255,0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow: 0 0 15px rgba(0,212,255,0.1);
}
.brand-text { display:flex; flex-direction:column; }
.brand-main {
  font-family:var(--font-display); font-size:14px; font-weight:800;
  color:var(--cyan-light); letter-spacing:2px; text-transform:uppercase;
}
.brand-sub {
  font-family:var(--font-body); font-size:10px; color:var(--gold); margin-top:2px;
}
.btn-text { background:transparent; border:none; color:var(--text-muted); font-family:var(--font-mono); font-size:10px; cursor:pointer; padding:6px 10px; }
.btn-text:hover { color:var(--red); }
.btn-hamburger { background:none; border:none; color:var(--cyan); cursor:pointer; padding:4px; display:flex; align-items:center; }
.btn-notif { background:none; border:none; color:var(--gold); cursor:pointer; position:relative; padding:4px; display:flex; align-items:center; }
.notif-badge {
  position:absolute; top:-5px; right:-8px; background:var(--red); color:white;
  border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-family:var(--font-mono);
}
.gov-logo-s { width:24px; height:24px; font-size:12px; display:flex; align-items:center; justify-content:center; }
.gov-header-center { flex:1; text-align:center; }
.gov-header-center p { font-size:11px; color:var(--text-sec); margin:0; font-family:var(--font-body); }
.ai-panel { display:flex; flex-direction:column; height:100%; }
.ai-chat-body { flex:1; overflow-y:auto; max-height:400px; }
.ai-chat-area { display:flex; flex-direction:column; gap:8px; padding:10px; }
.ai-chat-footer { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--frame); }
.ai-header-title { display:flex; align-items:center; gap:10px; }
.ai-header-title h2 { font-family:var(--font-display); font-size:14px; color:var(--cyan); margin:0; }
.ai-header-title .ai-orb { font-size:20px; }
.workflow-details { font-size:12px; color:var(--text); }

/* ══════════ AUDIT ROW ══════════ */
.audit-row { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--frame); }
.audit-avatar {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; flex-shrink:0;
}
.audit-text { font-size:11px; color:var(--text); }
.audit-meta { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); margin-top:1px; }

/* ══════════ KAHLOUT-STYLE KPI CARDS ══════════ */
.kpi-kahlout {
  background:var(--bg-panel); border:1px solid var(--frame); border-radius:10px;
  overflow:hidden; transition:all 0.3s var(--ease);
}
.kpi-kahlout:hover { border-color:var(--frame-light); }
.kpi-kahlout-head {
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  cursor:pointer; user-select:none; transition:background 0.2s;
}
.kpi-kahlout-head:hover { background:var(--bg-hover); }
.kpi-kahlout-name {
  flex:1; min-width:0;
}
.kpi-kahlout-name h4 {
  margin:0; font-family:var(--font-body); font-size:14px; font-weight:600;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kpi-kahlout-name p {
  margin:2px 0 0; font-family:var(--font-mono); font-size:9px; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kpi-kahlout-stats {
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.kpi-kahlout-val {
  text-align:right;
}
.kpi-kahlout-val .current {
  font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--cyan);
}
.kpi-kahlout-val .target {
  font-family:var(--font-mono); font-size:9px; color:var(--text-muted);
}
.kpi-kahlout-chevron {
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:transform 0.3s var(--ease);
  flex-shrink:0;
}
.kpi-kahlout.expanded .kpi-kahlout-chevron { transform:rotate(180deg); }
.kpi-kahlout-body {
  max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease);
}
.kpi-kahlout.expanded .kpi-kahlout-body { max-height:600px; }
.kpi-kahlout-inner {
  padding:0 16px 16px; border-top:1px solid var(--frame);
}

/* KPI Section Card containers */
.kpi-section-card {
  background:rgba(10,24,50,0.45); border:1px solid var(--frame); border-radius:10px;
  padding:14px 16px; margin-bottom:0;
}
.kpi-section-card .kpi-section-title {
  font-family:var(--font-mono); font-size:10px; color:var(--gold);
  letter-spacing:1px; font-weight:600; margin-bottom:8px;
}
.kpi-cards-row {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;
}
@media(max-width:700px) { .kpi-cards-row { grid-template-columns:1fr; } }
.kpi-cards-single { margin-bottom:12px; }

/* KPI meta grid */
.kpi-meta-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:0;
}
.kpi-meta-item label {
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  color:var(--text-muted); letter-spacing:0.5px; text-transform:uppercase;
  display:block; margin-bottom:2px;
}
.kpi-meta-item span {
  font-family:var(--font-body); font-size:12px; color:var(--text);
}

/* KPI history table */
.kpi-history-table {
  width:100%; border-collapse:collapse; margin:4px 0 0;
}
.kpi-history-table th {
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  color:var(--text-muted); letter-spacing:0.5px; text-transform:uppercase;
  padding:6px 6px; text-align:center; border-bottom:1px solid var(--frame);
}
.kpi-history-table td {
  font-family:var(--font-display); font-size:12px; font-weight:600;
  color:var(--text); padding:6px 6px; text-align:center;
  border-bottom:1px solid rgba(26,48,80,0.3);
}

/* Score band pills */
.kpi-score-bands {
  display:flex; gap:6px; flex-wrap:wrap; margin:0;
}
.kpi-score-band {
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  padding:4px 10px; border-radius:10px; letter-spacing:0.3px;
}
.kpi-score-band.red { background:var(--red-dim); color:var(--red); border:1px solid rgba(255,48,64,0.2); }
.kpi-score-band.amber { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(255,184,48,0.2); }
.kpi-score-band.green { background:var(--green-dim); color:var(--green); border:1px solid rgba(0,232,143,0.2); }
.kpi-score-band.active { box-shadow:0 0 8px currentColor; }

/* KPI bar chart (inline SVG) */
.kpi-bars {
  display:flex; align-items:flex-end; gap:4px; height:80px; padding:4px 0;
  justify-content:center;
}
.kpi-bar {
  border-radius:4px 4px 0 0; min-width:10px;
  transition:height 0.4s var(--ease);
  position:relative;
}
.kpi-bar::after {
  content:attr(data-val); position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:7px; color:var(--text-muted); white-space:nowrap;
}

/* KPI actions row */
.kpi-actions {
  display:flex; gap:6px; padding-top:10px; border-top:1px solid var(--frame);
}

/* Light theme KPI section cards */
[data-theme="light"] .kpi-section-card { background:rgba(240,242,245,0.6); border-color:#e0e5ec; }

/* Light theme overrides */
[data-theme="light"] .kpi-kahlout { background:rgba(255,255,255,0.75); border-color:#e0e5ec; }
[data-theme="light"] .kpi-kahlout:hover { border-color:#c0c8d4; }
[data-theme="light"] .kpi-kahlout-head:hover { background:rgba(0,0,0,0.03); }
[data-theme="light"] .kpi-kahlout-inner { border-top-color:#e0e5ec; }
[data-theme="light"] .kpi-history-table th { border-bottom-color:#e0e5ec; }
[data-theme="light"] .kpi-history-table td { border-bottom-color:#f0f2f5; }
[data-theme="light"] .kpi-kahlout-val .current { color:var(--blue); }

/* ══════════ EMPTY STATE ══════════ */
.empty { padding:48px; text-align:center; color:var(--text-muted); }
.empty-icon { font-size:36px; margin-bottom:10px; opacity:0.4; }
.empty-text { font-family:var(--font-mono); font-size:12px; letter-spacing:1px; }

/* ══════════ ANIMATIONS ══════════ */
@keyframes corePulse { 0%{box-shadow:0 0 10px rgba(0,212,255,0.15)} 100%{box-shadow:0 0 20px rgba(0,212,255,0.3)} }
.anim { animation:panelBoot 0.5s var(--ease) both; }
.d1 { animation-delay:0.08s; } .d2 { animation-delay:0.16s; } .d3 { animation-delay:0.24s; } .d4 { animation-delay:0.32s; }
@keyframes panelBoot {
  0% { opacity:0; transform:translateY(12px); filter:brightness(1.4) saturate(0.5); }
  60% { filter:brightness(1.1) saturate(1); }
  100% { opacity:1; transform:translateY(0); filter:brightness(1) saturate(1); }
}

/* Notification ping */
@keyframes ping { 0%{transform:scale(1);opacity:1} 75%{transform:scale(2);opacity:0} 100%{transform:scale(2);opacity:0} }
.ping { position:relative; }
.ping::after {
  content:""; position:absolute; top:-2px; right:-2px;
  width:8px; height:8px; border-radius:50%;
  background:var(--red); animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite;
}

/* ══════════ LIGHT THEME (Dar al Afkar system) ══════════ */
/* ═══════════════════════════════════════════════════════════════
   READING THEME — Warm Parchment (light-based, golden brown)
   Inspired by: aged paper, warm lamplight, library serenity
   ═══════════════════════════════════════════════════════════════ */
[data-theme="reading"] {
  /* Backgrounds: warm parchment / cream / linen tones */
  --bg-deep: #f2e8d5;
  --bg: #faf5eb;
  --bg-panel: rgba(255,250,240,0.92);
  --bg-panel-solid: #faf5eb;
  --bg-panel-hover: rgba(242,232,213,0.95);
  --bg-glass: rgba(255,250,240,0.75);
  --bg-glass-strong: rgba(255,250,240,0.95);
  --bg-hover: #ede2cf;

  /* Frames: warm tan borders */
  --frame: #d4c4a8;
  --frame-light: #c2ae8e;
  --frame-bright: #a89470;

  /* Primary: Deep Burnt Amber (replaces cyan) — AA compliant */
  --cyan: #7a5518;
  --cyan-light: #5e4010;
  --cyan-dim: rgba(122,85,24,0.08);
  --border-cyan: rgba(122,85,24,0.35);
  --border-cyan-dim: rgba(122,85,24,0.15);
  --border-cyan-glow: rgba(122,85,24,0.12);

  /* Secondary: Deep Gold */
  --gold: #6b5010;
  --gold-dim: rgba(107,80,16,0.08);
  --gold-glow: rgba(107,80,16,0.12);

  /* Accent: Dark Terracotta */
  --blue: #8a5518;
  --blue-dim: rgba(138,85,24,0.08);
  --blue-deep: #6b4010;

  /* Semantic (deeper for contrast) */
  --green: #2a6e2a;
  --green-dim: rgba(42,110,42,0.08);
  --red: #a52d22;
  --red-dim: rgba(165,45,34,0.08);
  --amber: #9a6a10;
  --amber-dim: rgba(154,106,16,0.08);
  --purple: #5e4090;
  --purple-dim: rgba(94,64,144,0.08);
  --teal: #1e6e58;

  /* Text: dark brown ink hierarchy — high contrast for reading */
  --text: #2c1e0e;
  --text-sec: #4a3820;
  --text-muted: #706050;

  /* Shadows: warm & subtle */
  --shadow-glow: 0 0 12px rgba(122,85,24,0.08);
  --shadow-card: 0 2px 8px rgba(80,60,30,0.08);
  --shadow-float: 0 6px 20px rgba(80,60,30,0.12);
}
[data-theme="reading"] body::after { opacity:0; }
[data-theme="reading"] ::selection { background: rgba(122,85,24,0.18); }
[data-theme="reading"] ::-webkit-scrollbar-thumb { background: rgba(122,85,24,0.2); }
[data-theme="reading"] ::-webkit-scrollbar-thumb:hover { background: rgba(122,85,24,0.35); }
[data-theme="reading"] .sidebar { box-shadow: 2px 0 12px rgba(80,60,30,0.08); }
[data-theme="reading"] .sidebar::before { background: linear-gradient(180deg, transparent, rgba(122,85,24,0.06), transparent); }
[data-theme="reading"] .brand-mark { background: linear-gradient(135deg, rgba(122,85,24,0.15), rgba(139,105,20,0.1)); border-color: rgba(122,85,24,0.3); }
[data-theme="reading"] .brand-text-primary { color: #5e4010; }
[data-theme="reading"] .brand-text-sub { color: #7a5518; }
[data-theme="reading"] .gov-header { background: linear-gradient(135deg, rgba(250,245,235,0.98), rgba(242,232,213,0.98)); }
[data-theme="reading"] .topbar { background: rgba(250,245,235,0.96); box-shadow: 0 1px 3px rgba(80,60,30,0.06); }
[data-theme="reading"] .login-wrap { background: #f2e8d5; }
[data-theme="reading"] .login-wrap::before { background:radial-gradient(ellipse at 50% 50%, rgba(122,85,24,0.06) 0%, transparent 70%); }
[data-theme="reading"] .login-box { background: rgba(250,245,235,0.97); box-shadow: 0 8px 32px rgba(80,60,30,0.12); }
[data-theme="reading"] .login-title { color:#2c1e0e; }
[data-theme="reading"] .login-title-ar { color:#7a5518; }
[data-theme="reading"] .login-fi { background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.12); color:#2c1e0e; }
[data-theme="reading"] .login-bg-photo { display:none; }
[data-theme="reading"] .login-bg-overlay { display:none; }
[data-theme="reading"] .modal, [data-theme="reading"] .modal-bg { background:rgba(44,30,14,0.3); backdrop-filter:blur(4px); }
[data-theme="reading"] .modal-box, [data-theme="reading"] .modal-content { background:rgba(250,245,235,0.98); box-shadow: 0 8px 40px rgba(80,60,30,0.18); }
[data-theme="reading"] .modal-box::before { background:linear-gradient(90deg, #6b4010, #7a5518, #6b4010); }
[data-theme="reading"] .fi, [data-theme="reading"] .fs, [data-theme="reading"] .fta { background: #fff; border-color: #d4c4a8; color: #2c1e0e; }
[data-theme="reading"] .fi:focus, [data-theme="reading"] .fs:focus, [data-theme="reading"] .fta:focus { border-color: #7a5518; box-shadow: 0 0 0 2px rgba(122,85,24,0.1); }
[data-theme="reading"] .toast { background:rgba(250,245,235,0.97); border-color:rgba(61,139,61,0.3); box-shadow:0 2px 10px rgba(80,60,30,0.1); }
[data-theme="reading"] .card { background: #fff; border: 1px solid #d4c4a8; box-shadow: 0 1px 4px rgba(80,60,30,0.05); backdrop-filter:none; }
[data-theme="reading"] .card:hover { border-color: #c2ae8e; box-shadow: 0 4px 12px rgba(80,60,30,0.08); }
[data-theme="reading"] .card-head { border-bottom-color: #e6dac4; }
[data-theme="reading"] .stat-grid .card, [data-theme="reading"] .g2 .card, [data-theme="reading"] .g3 .card, [data-theme="reading"] .g4 .card { background:#fff; border:1px solid #d4c4a8; box-shadow:0 1px 4px rgba(80,60,30,0.05); }
[data-theme="reading"] .nav-btn { color: #5a4630; }
[data-theme="reading"] .nav-btn:hover { background: rgba(122,85,24,0.06); color: #2c1e0e; }
[data-theme="reading"] .nav-btn.active { background: rgba(122,85,24,0.1); color: #7a5518; }
[data-theme="reading"] .nav-label { color: #8a7660; }
[data-theme="reading"] .content-main { background: #f2e8d5; }
[data-theme="reading"] .page-title, [data-theme="reading"] .sec-title, [data-theme="reading"] h2, [data-theme="reading"] h3 { color: #2c1e0e; }
[data-theme="reading"] .stat-label { color: #5a4630; }
[data-theme="reading"] .stat-value { color: #2c1e0e; }
[data-theme="reading"] .btn { color: #5a4630; }
[data-theme="reading"] .btn-primary { background: linear-gradient(135deg, #7a5518, #6b4010); color: #fff; border-color: #7a5518; }
[data-theme="reading"] .btn-primary:hover { background: linear-gradient(135deg, #b47530, #7a5518); box-shadow: 0 0 10px rgba(122,85,24,0.2); }
[data-theme="reading"] .kpi-section-card { background:rgba(255,250,240,0.6); border-color:#d4c4a8; }
[data-theme="reading"] .kpi-kahlout { background:rgba(255,255,255,0.8); border-color:#d4c4a8; }
[data-theme="reading"] .kpi-kahlout:hover { border-color:#c2ae8e; }
[data-theme="reading"] .kpi-kahlout-inner { border-top-color:#e6dac4; }
[data-theme="reading"] .kpi-history-table th { border-bottom-color:#e6dac4; }
[data-theme="reading"] .kpi-history-table td { border-bottom-color:#f2e8d5; }
[data-theme="reading"] .kpi-kahlout-val .current { color:#7a5518; }
[data-theme="reading"] .org-node { background: #fff; border: 1px solid #d4c4a8; box-shadow: 0 1px 4px rgba(80,60,30,0.06); }
[data-theme="reading"] .org-node:hover { border-color: #7a5518; box-shadow: 0 4px 12px rgba(122,85,24,0.1); }
[data-theme="reading"] .org-node.root { background: linear-gradient(135deg, rgba(139,105,20,0.06), #fff); border-color: #6b5010; }
[data-theme="reading"] .pm-column { background: #fff; border: 1px solid #d4c4a8; }
[data-theme="reading"] .pm-task { background: #faf5eb; border: 1px solid #e6dac4; }
[data-theme="reading"] .pm-task:hover { border-color: #7a5518; background: #fff; }
[data-theme="reading"] .kpi-builder-step { background:#fff; border:1px solid #d4c4a8; }
[data-theme="reading"] .kpi-builder-step.active { border-color:#7a5518; background:rgba(122,85,24,0.04); }
[data-theme="reading"] .dock { background: rgba(250,245,235,0.92); border-color: rgba(122,85,24,0.12); box-shadow: 0 -4px 16px rgba(80,60,30,0.08); }
[data-theme="reading"] .dock-item { color: #8a7660; }
[data-theme="reading"] .dock-item:hover { color: #7a5518; }
[data-theme="reading"] .dock-item::before { background:rgba(44,30,14,0.88); color:#faf5eb; border-color:rgba(122,85,24,0.25); }
[data-theme="reading"] .dock-divider { background: #d4c4a8; }
[data-theme="reading"] .dock-accent { color: #7a5518; }
[data-theme="reading"] .dock-accent:hover { color: #5e4010; }
[data-theme="reading"] .dock-badge { background: #c0392b; }
[data-theme="reading"] .notif-panel { background: #faf5eb; border-color: #d4c4a8; box-shadow:-4px 0 24px rgba(80,60,30,0.1); }
[data-theme="reading"] .notif-item { border-color: #e6dac4; }
[data-theme="reading"] .notif-panel-header { border-color: #e6dac4; }
[data-theme="reading"] .notif-panel-footer { border-color: #e6dac4; }
[data-theme="reading"] .search-box { background: #faf5eb; border-color: #d4c4a8; box-shadow: 0 12px 48px rgba(80,60,30,0.15); }
[data-theme="reading"] .search-input { color: #2c1e0e; }
[data-theme="reading"] .search-result-item:hover { background: rgba(122,85,24,0.06); }
[data-theme="reading"] .a11y-panel { background: #faf5eb; border-color: #d4c4a8; }
[data-theme="reading"] .a11y-btn { background: #ede2cf; }
[data-theme="reading"] .a11y-section { border-color: #e6dac4; }
[data-theme="reading"] .a11y-panel-header { border-color: #e6dac4; }
[data-theme="reading"] .sidebar-profile-avatar { border-color: #7a5518; color: #7a5518; background: linear-gradient(135deg, rgba(122,85,24,0.08), rgba(139,105,20,0.05)); }
[data-theme="reading"] .sidebar-slc-logo { filter:none; opacity:0.5; }
[data-theme="reading"] .sidebar-footer:hover .sidebar-slc-logo { opacity:0.7; }
[data-theme="reading"] .sidebar-logo-cli { opacity:0.6; }
[data-theme="reading"] .sidebar-logos:hover .sidebar-logo-cli { opacity:0.8; }
[data-theme="reading"] .btn-hamburger-mobile { background:rgba(250,245,235,0.9); border-color:#d4c4a8; color:#7a5518; }
[data-theme="reading"] .org-list-dept:hover td { background:rgba(122,85,24,0.05); }
[data-theme="reading"] .org-hier-dept:hover { transform:translateX(3px); box-shadow:0 2px 8px rgba(80,60,30,0.08); }
[data-theme="reading"] .values-bar { background:linear-gradient(90deg, rgba(250,245,235,0.98), rgba(242,232,213,0.98)); }
[data-theme="reading"] .value-item { color: #6b5010; }

[data-theme="light"] {
  --bg-deep: #f0f2f5;
  --bg: #ffffff;
  --bg-panel: rgba(255,255,255,0.88);
  --bg-panel-solid: #ffffff;
  --bg-panel-hover: rgba(238,241,245,0.9);
  --bg-glass: rgba(255,255,255,0.7);
  --bg-glass-strong: rgba(255,255,255,0.92);
  --bg-hover: #e8ecf2;
  --frame: #d0d6e0;
  --frame-light: #b8c2d2;
  --frame-bright: #a0aec0;
  --cyan: #0077aa;
  --cyan-light: #005577;
  --cyan-dim: rgba(0,119,170,0.08);
  --border-cyan: rgba(0,119,170,0.35);
  --border-cyan-dim: rgba(0,119,170,0.15);
  --border-cyan-glow: rgba(0,119,170,0.15);
  --gold: #92702e;
  --gold-dim: rgba(146,112,46,0.08);
  --gold-glow: rgba(146,112,46,0.12);
  --blue: #2563eb;
  --blue-dim: rgba(37,99,235,0.08);
  --blue-deep: #1e40af;
  --green: #059669;
  --green-dim: rgba(5,150,105,0.08);
  --red: #dc2626;
  --red-dim: rgba(220,38,38,0.08);
  --amber: #d97706;
  --amber-dim: rgba(217,119,6,0.08);
  --purple: #7c3aed;
  --purple-dim: rgba(124,58,237,0.08);
  --teal: #0a9e80;
  --text: #0a0e18;
  --text-sec: #374151;
  --text-muted: #5a657a;
  --shadow-glow: 0 0 12px rgba(0,119,170,0.1);
  --shadow-card: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-float: 0 8px 24px rgba(0,0,0,0.12);
}
[data-theme="light"] body::after { opacity:0; }
[data-theme="light"] ::selection { background: rgba(0,119,170,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.25); }
[data-theme="light"] .sidebar { box-shadow: 2px 0 12px rgba(0,0,0,0.06); }
[data-theme="light"] .sidebar::before { background: linear-gradient(180deg, transparent, rgba(0,119,170,0.06), transparent); }
[data-theme="light"] .gov-header { background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(240,242,245,0.98)); }
[data-theme="light"] .topbar { background: rgba(255,255,255,0.95); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
[data-theme="light"] .login-wrap { background: #f0f2f5; }
[data-theme="light"] .login-wrap::before { background:radial-gradient(ellipse at 50% 50%, rgba(0,119,170,0.04) 0%, transparent 70%); }
[data-theme="light"] .login-box { background: rgba(255,255,255,0.95); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
[data-theme="light"] .login-title { color:#0a0e18; }
[data-theme="light"] .login-title-ar { color:#0077aa; }
[data-theme="light"] .login-fi { background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.1); color:#0a0e18; }
[data-theme="light"] .login-bg-photo { display:none; }
[data-theme="light"] .login-bg-overlay { display:none; }
[data-theme="light"] .login-title { color:#0a0e18; }
[data-theme="light"] .modal, [data-theme="light"] .modal-bg { background:rgba(0,0,0,0.4); backdrop-filter:blur(4px); }
[data-theme="light"] .modal-box, [data-theme="light"] .modal-content { background:rgba(255,255,255,0.98); box-shadow: 0 8px 40px rgba(0,0,0,0.15); }
[data-theme="light"] .modal-box::before { background:linear-gradient(90deg, #1e40af, #0077aa, #1e40af); }
[data-theme="light"] .fi, [data-theme="light"] .fs, [data-theme="light"] .fta { background: #ffffff; border-color: #d0d6e0; color: #0a0e18; }
[data-theme="light"] .fi:focus, [data-theme="light"] .fs:focus, [data-theme="light"] .fta:focus { border-color: #0077aa; box-shadow: 0 0 0 2px rgba(0,119,170,0.1); }
[data-theme="light"] .toast { background:rgba(255,255,255,0.95); border-color:rgba(5,150,105,0.3); box-shadow:0 2px 12px rgba(0,0,0,0.1); }
[data-theme="light"] .values-bar { background:linear-gradient(90deg, rgba(255,255,255,0.98), rgba(240,242,245,0.98)); }
[data-theme="light"] .value-item { color: #92702e; }

/* ── Light theme: card/panel clarity ── */
[data-theme="light"] .card {
  background: #ffffff;
  border: 1px solid #d0d6e0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
  backdrop-filter: none;
}
[data-theme="light"] .card:hover {
  border-color: #b8c2d2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
[data-theme="light"] .card-head { border-bottom-color: #e2e8f0; }
[data-theme="light"] .stat-grid .card,
[data-theme="light"] .g2 .card,
[data-theme="light"] .g3 .card,
[data-theme="light"] .g4 .card {
  background: #ffffff;
  border: 1px solid #d0d6e0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .nav-btn {
  color: #374151;
}
[data-theme="light"] .nav-btn:hover {
  background: rgba(0,119,170,0.06);
  color: #0a0e18;
}
[data-theme="light"] .nav-btn.active {
  background: rgba(0,119,170,0.08);
  color: #0077aa;
}
[data-theme="light"] .nav-label {
  color: #5a657a;
}
[data-theme="light"] .content-main {
  background: #f0f2f5;
}
[data-theme="light"] .page-title,
[data-theme="light"] .sec-title,
[data-theme="light"] h2, [data-theme="light"] h3 {
  color: #0a0e18;
}
[data-theme="light"] .stat-label {
  color: #374151;
}
[data-theme="light"] .stat-value {
  color: #0a0e18;
}
[data-theme="light"] .org-node {
  background: #ffffff;
  border: 1px solid #d0d6e0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .org-node:hover {
  border-color: #0077aa;
  box-shadow: 0 4px 12px rgba(0,119,170,0.1);
}
[data-theme="light"] .org-node.root {
  background: linear-gradient(135deg, rgba(146,112,46,0.06), #ffffff);
  border-color: #92702e;
}
[data-theme="light"] .pm-column {
  background: #ffffff;
  border: 1px solid #d0d6e0;
}
[data-theme="light"] .pm-task {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
[data-theme="light"] .pm-task:hover {
  border-color: #0077aa;
  background: #ffffff;
}
[data-theme="light"] .kpi-builder-step {
  background: #ffffff;
  border: 1px solid #d0d6e0;
}
[data-theme="light"] .kpi-builder-step.active {
  border-color: #0077aa;
  background: rgba(0,119,170,0.03);
}
[data-theme="light"] .btn {
  color: #374151;
}
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #0077aa, #005577);
  color: #ffffff;
  border-color: #0077aa;
}
[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #005577, #003d5c);
}

/* ══════════ ORG CHART TREE ══════════ */
.org-tree { display:flex; flex-direction:column; align-items:center; gap:0; padding:20px 0; overflow-x:auto; }
.org-node {
  background:var(--bg-glass); border:1px solid var(--frame); border-radius:var(--r-md);
  padding:14px 16px; text-align:center; position:relative;
  transition:all 0.25s var(--ease-smooth); cursor:pointer;
}
.org-node:hover { border-color:var(--border-cyan-dim); box-shadow:var(--shadow-glow); transform:translateY(-2px); }
.org-node.root { border-color:var(--gold); background:linear-gradient(135deg,var(--gold-dim),var(--bg-glass)); width:280px; }
/* Uniform sizes: dept/office = 220px, section = 180px, subsection = 156px */
.org-node.org-dept { width:220px; min-width:220px; max-width:220px; }
.org-node.org-section { width:180px; min-width:180px; max-width:180px; padding:8px 10px; }
.org-node.org-subsection { width:156px; min-width:156px; max-width:156px; padding:5px 8px; }
.org-node .node-icon { margin-bottom:6px; display:flex; justify-content:center; }
.org-node .node-icon svg { width:22px; height:22px; }
.org-node .node-name { font-size:11px; font-weight:700; color:var(--text); line-height:1.4; }
.org-node .node-name-en { font-family:var(--font-mono); font-size:8px; color:var(--text-muted); margin-top:2px; }
.org-node .node-meta { font-family:var(--font-mono); font-size:8px; color:var(--text-muted); margin-top:4px; }
.org-node.org-section .node-name { font-size:10px; }
.org-node.org-section .node-name-en { font-size:7px; }
.org-node.org-subsection .node-name { font-size:9px; }
.org-node.org-subsection .node-name-en { font-size:7px; }
.org-children { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding-top:12px; position:relative; }
.org-children::before { content:''; position:absolute; top:0; left:50%; width:1px; height:12px; background:var(--frame); }
.org-connector { width:100%; height:16px; position:relative; }
.org-connector::after { content:''; position:absolute; top:50%; left:10%; right:10%; height:1px; background:var(--frame); }
.org-sections { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.org-section-chip {
  padding:4px 10px; background:var(--cyan-dim); border:1px solid var(--border-cyan-dim);
  border-radius:12px; font-size:9px; color:var(--cyan); font-family:var(--font-mono);
}
.org-sub-chip {
  padding:3px 8px; background:var(--bg-glass); border:1px solid var(--frame);
  border-radius:8px; font-size:8px; color:var(--text-muted); font-family:var(--font-mono);
}
.org-builder-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }

/* ── Org Hierarchy View ── */
.org-hier-wrap { padding:10px 0; }
.org-hier-sg { }
.org-hier-sg-node {
  display:flex; align-items:center; gap:14px; padding:14px 18px;
  background:linear-gradient(135deg,var(--gold-dim),var(--bg-glass));
  border:1px solid var(--gold); border-radius:var(--r-md); margin-bottom:20px;
}
.org-hier-dept {
  padding:10px 14px; background:var(--bg-glass); border:1px solid var(--frame);
  border-radius:var(--r-sm); cursor:pointer; transition:all 0.2s;
}
.org-hier-dept:hover { border-color:var(--border-cyan-dim); box-shadow:var(--shadow-glow); transform:translateX(3px); }

/* ── Org List View ── */
.org-list-dept td { border-bottom:1px solid var(--frame); }
.org-list-dept:hover td { background:var(--cyan-dim); }
.org-list-sec td { border-bottom:1px solid rgba(255,255,255,0.03); }
.org-list-sec:hover td { background:rgba(255,255,255,0.02); }
.org-list-sub td { }
.org-list-sub:hover td { background:rgba(255,255,255,0.01); }
[data-theme="light"] .org-list-dept:hover td { background:rgba(0,212,255,0.06); }
[data-theme="light"] .org-list-sec:hover td { background:rgba(0,0,0,0.02); }
[data-theme="light"] .org-hier-dept:hover { transform:translateX(3px); box-shadow:0 2px 8px rgba(0,0,0,0.08); }

/* ══════════ ORG TREE VIEW ══════════ */
.org-tree-wrapper {
  padding:20px; overflow-x:auto;
}
.org-tree-level { display:flex; flex-direction:column; align-items:center; }
.org-tree-root { margin-bottom:0; }
.org-tree-leaders { width:100%; }
.org-tree-h-group {
  display:grid; grid-template-columns:1fr 1fr; gap:24px; width:100%;
}
.org-tree-branch {
  display:flex; flex-direction:column; align-items:center;
}
.org-tree-connector-v {
  width:2px; height:20px; background:var(--frame); margin:0 auto;
}
.org-tree-connector-h {
  width:20px; height:2px; background:var(--frame);
  position:absolute; left:-20px; top:50%;
}
.org-tree-children {
  display:flex; flex-direction:column; gap:6px;
  margin-left:24px; padding-left:16px;
  border-left:2px solid var(--frame);
  position:relative;
}
.org-tree-children-inner { margin-left:16px; padding-left:12px; }
.org-tree-children-deep { margin-left:12px; padding-left:10px; border-left-style:dashed; }
.org-tree-child {
  position:relative; padding-left:4px;
}
.org-tree-node {
  background:var(--bg-glass); border:1px solid var(--frame);
  border-radius:10px; padding:10px 14px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:all 0.25s var(--ease-smooth);
  cursor:default; overflow:visible; position:relative;
}
.org-tree-node[onclick] { cursor:pointer; }
.org-tree-node:hover {
  border-color:var(--border-cyan-dim);
  box-shadow:0 2px 12px rgba(0,212,255,0.08);
  transform:translateY(-1px);
}
.org-tree-node-root {
  background:linear-gradient(135deg, var(--gold-dim), var(--bg-glass));
  border:1px solid var(--gold); text-align:center;
  max-width:500px; margin:0 auto;
}
.org-tree-node-leader {
  background:var(--bg-glass); border:1px solid var(--frame);
  max-width:400px; margin:0 auto 4px auto;
}
.org-tree-node-section { padding:6px 10px; }
.org-tree-node-sub { padding:4px 8px; background:var(--bg-panel); border-color:transparent; }
.org-tree-node-sub:hover { background:var(--bg-glass); }
.org-tree-node-head {
  display:flex; align-items:center; gap:10px;
}
.org-tree-node-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.org-tree-node-section .org-tree-node-icon,
.org-tree-node-sub .org-tree-node-icon { display:none; }
.org-tree-node-info { flex:1; min-width:0; }
.org-tree-node-name {
  font-size:12px; font-weight:700; color:var(--text); line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.org-tree-node-nameen {
  font-size:9px; color:var(--text-muted); font-family:var(--font-mono);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.org-tree-node-badge {
  display:inline-block; padding:1px 6px; border-radius:4px;
  font-size:8px; font-family:var(--font-mono); font-weight:600;
  margin-top:2px;
}
/* Light theme */
[data-theme="light"] .org-tree-node { background:#fff; border-color:#e2e8f0; }
[data-theme="light"] .org-tree-node:hover { box-shadow:0 2px 12px rgba(0,0,0,0.06); }
[data-theme="light"] .org-tree-node-root { background:linear-gradient(135deg, #fef3c7, #fff); border-color:#d4a017; }
[data-theme="light"] .org-tree-connector-v { background:#cbd5e1; }
[data-theme="light"] .org-tree-children { border-left-color:#cbd5e1; }
[data-theme="light"] .org-tree-connector-h { background:#cbd5e1; }
/* Reading theme */
[data-theme="reading"] .org-tree-node { background:#faf6ef; border-color:#d4c4a8; }
[data-theme="reading"] .org-tree-node-root { background:linear-gradient(135deg, #f5ecd4, #faf6ef); border-color:#a68b4b; }
[data-theme="reading"] .org-tree-connector-v { background:#d4c4a8; }
[data-theme="reading"] .org-tree-children { border-left-color:#d4c4a8; }

/* ── Org Tree Edit Buttons ── */
.org-tree-edit-btns {
  display:flex; gap:2px; padding:4px 6px 2px 6px;
  opacity:0; transition:opacity 0.2s;
}
.org-tree-node:hover > .org-tree-edit-btns { opacity:1; }
.ote-btn {
  width:22px; height:22px; border:none; border-radius:4px;
  background:var(--bg-panel); cursor:pointer; display:flex;
  align-items:center; justify-content:center; padding:0;
  transition:all 0.15s;
}
.ote-btn:hover { background:var(--frame); transform:scale(1.1); }
.ote-btn svg { width:12px; height:12px; }
.ote-add:hover { background:var(--green-dim); }
.ote-del:hover { background:var(--red-dim); }
[data-theme="light"] .ote-btn { background:#f1f5f9; }
[data-theme="light"] .ote-btn:hover { background:#e2e8f0; }
[data-theme="reading"] .ote-btn { background:#f0e8d6; }
[data-theme="reading"] .ote-btn:hover { background:#e5d9c1; }

/* ══════════ Interactive Org Canvas ══════════ */

/* ── Toolbar ── */
.otc-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px; padding:8px 14px;
  background:var(--bg-glass); border:1px solid var(--frame); border-radius:10px;
  flex-wrap:wrap;
}
.otc-toolbar-left { display:flex; flex-direction:column; gap:2px; }
.otc-toolbar-title {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:11px; font-weight:600;
  color:var(--text); letter-spacing:0.5px; text-transform:uppercase;
}
.otc-toolbar-title svg { width:16px; height:16px; }
.otc-toolbar-hint {
  display:flex; align-items:center; gap:4px;
  font-size:10px; color:var(--text-muted); line-height:1.3;
}
.otc-toolbar-hint svg { width:12px; height:12px; flex-shrink:0; }
.otc-toolbar-actions { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.otc-action-btn { display:flex; align-items:center; gap:5px; font-size:10px !important; }
.otc-action-btn span { font-weight:500; }
.otc-action-warn { opacity:0.6; }
.otc-action-warn:hover { opacity:1; }

/* ── Canvas ── */
.org-canvas-wrap {
  background:var(--bg-deep); border:1px solid var(--frame); border-radius:12px;
  box-shadow:inset 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Nodes — shared base ── */
.otc-node {
  cursor:grab; user-select:none; z-index:2;
  border-radius:10px; padding:10px 12px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:box-shadow 0.25s var(--ease), transform 0.15s var(--ease), outline 0.15s;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.otc-node:hover {
  box-shadow:0 6px 28px rgba(0,0,0,0.4), 0 0 0 1px var(--node-color, var(--frame));
  z-index:20 !important;
}
.otc-node:active { cursor:grabbing; transform:scale(1.02); }

/* ── Node inner layout ── */
.otc-node-inner { display:flex; align-items:center; gap:10px; }
.otc-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.otc-icon svg { width:16px; height:16px; }
.otc-text { flex:1; min-width:0; }
.otc-name {
  font-weight:700; color:var(--text); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.otc-name-en {
  font-family:var(--font-mono); color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
}
.otc-count {
  display:inline-block; margin-top:3px; padding:1px 6px;
  font-size:8px; font-family:var(--font-mono); font-weight:500;
  color:var(--text-muted); background:var(--frame); border-radius:8px;
  letter-spacing:0.3px;
}

/* ── Root node ── */
.otc-root {
  background:linear-gradient(145deg, rgba(201,162,39,0.12) 0%, var(--bg-glass-strong) 100%);
  border:2px solid rgba(201,162,39,0.5);
  box-shadow:0 4px 20px rgba(201,162,39,0.12), 0 2px 8px rgba(0,0,0,0.3);
  text-align:center;
}
.otc-root .otc-node-inner { justify-content:center; }
.otc-root .otc-name { font-size:14px; font-family:var(--font-display); letter-spacing:0.3px; }
.otc-root .otc-name-en { font-size:9px; text-align:center; }
.otc-root .otc-icon { width:36px; height:36px; border-radius:10px; }
.otc-root .otc-icon svg { width:18px; height:18px; }

/* ── Leader nodes ── */
.otc-leader {
  background:linear-gradient(145deg, var(--bg-glass-strong) 0%, var(--bg-glass) 100%);
  border:1.5px solid var(--node-color, var(--frame));
}
.otc-leader .otc-name { font-size:12px; }
.otc-leader .otc-name-en { font-size:8.5px; }
.otc-tier-label {
  position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-size:8px; font-weight:600;
  letter-spacing:1.5px; opacity:0.5; white-space:nowrap;
}

/* ── Department nodes ── */
.otc-dept {
  background:var(--bg-glass-strong);
  border:1px solid var(--frame);
  border-top:3px solid var(--node-color, var(--cyan));
}
.otc-dept .otc-name { font-size:11.5px; }
.otc-dept .otc-name-en { font-size:8px; }

/* ── Section nodes ── */
.otc-sec {
  background:var(--bg-glass);
  border:1px solid var(--frame);
  border-left:3px solid var(--node-color, var(--cyan));
}
.otc-sec .otc-name { font-size:10.5px; font-weight:600; }
.otc-sec .otc-name-en { font-size:7.5px; }

/* ── Sub/Division nodes ── */
.otc-sub {
  background:rgba(10,22,40,0.35);
  border:1px solid rgba(26,48,80,0.6);
  border-left:2px solid var(--node-color, var(--cyan));
}
.otc-sub .otc-name { font-size:10px; font-weight:500; }
.otc-sub .otc-name-en { font-size:7px; }

/* ── Performance radial ring ── */
.otc-perf-ring {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  flex-shrink:0; margin-left:auto; padding-left:6px;
}
.otc-ring { flex-shrink:0; filter:drop-shadow(0 0 4px rgba(0,0,0,0.25)); }
.otc-perf-kpis {
  font-family:var(--font-mono); font-size:7px; font-weight:600;
  letter-spacing:0.3px; opacity:0.75; white-space:nowrap; line-height:1;
}
/* Hide KPI label on smaller node types */
.otc-sec .otc-perf-ring .otc-perf-kpis,
.otc-sub .otc-perf-ring .otc-perf-kpis { display:none; }

/* ── Collapse toggle ── */
.otc-toggle {
  position:absolute; bottom:5px; left:8px;
  cursor:pointer; border:none; background:rgba(90,125,168,0.15);
  color:var(--text-muted); padding:3px 5px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.otc-toggle:hover { background:var(--frame); color:var(--cyan); }

/* ── Edit buttons ── */
.otc-edit-btns {
  position:absolute; bottom:-1px; right:6px;
  display:flex; gap:2px;
  opacity:0; transition:opacity 0.15s;
}
.otc-node:hover .otc-edit-btns { opacity:1; }

/* ── Theme variants ── */
[data-theme="light"] .org-canvas-wrap { background:#f1f5f9; border-color:#d1d9e6; box-shadow:inset 0 2px 8px rgba(0,0,0,0.06); }
[data-theme="light"] .otc-toolbar { background:#f8fafc; border-color:#e2e8f0; }
[data-theme="light"] .otc-node { backdrop-filter:blur(8px); box-shadow:0 2px 8px rgba(0,0,0,0.08); }
[data-theme="light"] .otc-node:hover { box-shadow:0 4px 16px rgba(0,0,0,0.12), 0 0 0 1px var(--node-color); }
[data-theme="light"] .otc-root { background:linear-gradient(145deg, rgba(201,162,39,0.08) 0%, rgba(255,255,255,0.9) 100%); border-color:rgba(201,162,39,0.4); }
[data-theme="light"] .otc-leader { background:rgba(255,255,255,0.85); }
[data-theme="light"] .otc-dept { background:rgba(255,255,255,0.8); }
[data-theme="light"] .otc-sec { background:rgba(255,255,255,0.65); }
[data-theme="light"] .otc-sub { background:rgba(255,255,255,0.5); border-color:#d1d9e6; }
[data-theme="light"] .otc-toggle { background:rgba(0,0,0,0.06); }
[data-theme="light"] .otc-count { background:#e2e8f0; color:#64748b; }

[data-theme="reading"] .org-canvas-wrap { background:#f5f0e3; border-color:#d9ccb0; box-shadow:inset 0 2px 8px rgba(0,0,0,0.06); }
[data-theme="reading"] .otc-toolbar { background:#faf6ed; border-color:#e5d9c1; }
[data-theme="reading"] .otc-node { box-shadow:0 2px 8px rgba(0,0,0,0.06); }
[data-theme="reading"] .otc-root { background:linear-gradient(145deg, rgba(201,162,39,0.06) 0%, #faf6ed 100%); }
[data-theme="reading"] .otc-leader { background:#faf6ed; }
[data-theme="reading"] .otc-dept { background:rgba(250,246,237,0.9); }
[data-theme="reading"] .otc-sec { background:rgba(250,246,237,0.7); }
[data-theme="reading"] .otc-sub { background:rgba(250,246,237,0.5); border-color:#d9ccb0; }
[data-theme="reading"] .otc-toggle { background:rgba(0,0,0,0.05); }
[data-theme="reading"] .otc-count { background:#e5d9c1; color:#8b7355; }

/* ══════════ KPI BUILDER ══════════ */
.kpi-builder-step {
  padding:16px; background:var(--bg-glass); border:1px solid var(--frame);
  border-radius:var(--r-md); margin-bottom:12px;
}
.kpi-builder-step.active { border-color:var(--border-cyan); background:rgba(0,212,255,0.04); }
.kpi-builder-step .step-num {
  width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:10px; font-weight:700; margin-right:8px;
}
.kpi-builder-step .step-num.done { background:var(--green-dim); color:var(--green); border:1px solid rgba(0,232,112,0.3); }
.kpi-builder-step .step-num.current { background:var(--cyan-dim); color:var(--cyan); border:1px solid var(--border-cyan); }
.kpi-builder-step .step-num.pending { background:var(--frame); color:var(--text-muted); }

/* ══════════ PROJECT MANAGEMENT ══════════ */
.pm-kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; min-height:300px; }
.pm-column {
  min-width:240px; flex:1; background:var(--bg-glass); border:1px solid var(--frame);
  border-radius:var(--r-md); display:flex; flex-direction:column;
}
.pm-col-head {
  padding:10px 14px; border-bottom:1px solid var(--frame);
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1px;
  color:var(--cyan); text-transform:uppercase; display:flex; justify-content:space-between; align-items:center;
}
.pm-col-body { padding:8px; flex:1; display:flex; flex-direction:column; gap:8px; min-height:50px; }
.pm-task {
  padding:10px; background:var(--bg-panel); border:1px solid var(--frame);
  border-radius:var(--r); cursor:pointer; transition:all 0.2s;
}
.pm-task:hover { border-color:var(--border-cyan-dim); box-shadow:0 2px 8px rgba(0,191,255,0.06); }
.pm-task-title { font-size:11px; font-weight:700; color:var(--text); margin-bottom:4px; }
.pm-task-meta { font-family:var(--font-mono); font-size:8px; color:var(--text-muted); }
.pm-task-priority { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; }
.pm-gantt { width:100%; overflow-x:auto; }
.pm-gantt-row { display:flex; align-items:center; padding:6px 0; border-bottom:1px solid var(--frame); }
.pm-gantt-label { width:180px; flex-shrink:0; font-size:10px; color:var(--text); padding-right:10px; }
.pm-gantt-bar { height:16px; border-radius:3px; position:relative; min-width:4px; }
.pm-gantt-timeline { flex:1; position:relative; height:16px; }

/* Theme toggle button */
.theme-toggle {
  background: var(--bg-glass); border: 1px solid var(--frame); border-radius: var(--r);
  color: var(--text-sec); cursor: pointer; padding: 5px 10px; font-size: 14px;
  display: flex; align-items: center; gap: 4px; transition: all 0.2s;
}
.theme-toggle:hover { border-color: var(--border-cyan-dim); color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════
   BOTTOM DOCK — macOS-style floating quick-action bar (from Dar al Afkar)
   ═══════════════════════════════════════════════════════════════ */
.dock-wrap {
  position:fixed; bottom:12px; left:50%; transform:translateX(-50%);
  z-index:8000; display:none;
  pointer-events:none;
}
.dock {
  display:flex; align-items:flex-end; gap:3px;
  padding:6px 10px 8px;
  background:linear-gradient(180deg, rgba(6,16,32,0.65) 0%, rgba(6,16,32,0.85) 100%);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(0,212,255,0.12);
  border-radius:18px;
  box-shadow:0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 -1px 0 rgba(0,212,255,0.08) inset;
  pointer-events:auto;
}
.dock-item {
  position:relative;
  width:40px; height:40px;
  border:none; border-radius:11px;
  background:rgba(255,255,255,0.04);
  color:var(--text-sec);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.18s cubic-bezier(.16,1,.3,1), background 0.15s, color 0.15s, box-shadow 0.2s;
  transform-origin:bottom center;
  font-size:16px;
}
.dock-item svg { width:18px; height:18px; }
.dock-item:hover {
  background:rgba(0,212,255,0.12);
  box-shadow:0 0 16px rgba(0,212,255,0.15);
  filter:brightness(1.3);
}
.dock-accent {
  background:linear-gradient(135deg, rgba(0,212,255,0.15), rgba(0,232,143,0.12)) !important;
  border:1px solid rgba(0,212,255,0.25);
  color:var(--cyan) !important;
}
.dock-accent:hover {
  background:linear-gradient(135deg, rgba(0,212,255,0.28), rgba(0,232,143,0.2)) !important;
  box-shadow:0 0 20px rgba(0,212,255,0.25), 0 0 40px rgba(0,212,255,0.08) !important;
}
.dock-divider {
  width:1px; height:26px;
  background:linear-gradient(180deg, transparent, rgba(0,212,255,0.2), transparent);
  margin:0 3px; align-self:center;
}
.dock-item::before {
  content:attr(data-label);
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) scale(0.8);
  background:rgba(2,8,16,0.92);
  color:#d0e8ff;
  font-family:var(--font-body); font-size:0.65rem; font-weight:600;
  letter-spacing:0.3px;
  padding:4px 10px; border-radius:6px;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity 0.15s, transform 0.15s;
  border:1px solid rgba(0,212,255,0.15);
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.dock-item:hover::before {
  opacity:1; transform:translateX(-50%) scale(1);
}
.dock-badge {
  position:absolute; top:-3px; right:-3px;
  min-width:16px; height:16px; line-height:16px;
  border-radius:8px; padding:0 4px;
  background:linear-gradient(135deg, #ff4d6a, #ff2d55);
  color:#fff; font-size:0.45rem; font-weight:700;
  font-family:var(--font-mono); text-align:center;
  box-shadow:0 2px 8px rgba(255,45,85,0.4);
  pointer-events:none;
}

/* ── Dock light theme ── */
[data-theme="light"] .dock {
  background:linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(240,242,245,0.88) 100%);
  border-color:rgba(0,0,0,0.1);
  box-shadow:0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04) inset;
}
[data-theme="light"] .dock-item {
  background:rgba(0,0,0,0.03); color:var(--text-sec);
}
[data-theme="light"] .dock-item:hover {
  background:rgba(0,119,170,0.1); color:var(--cyan);
  box-shadow:0 0 12px rgba(0,119,170,0.1);
}
[data-theme="light"] .dock-item::before {
  background:rgba(0,0,0,0.8); color:#fff;
  border-color:rgba(0,0,0,0.2);
}
[data-theme="light"] .dock-divider {
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.12), transparent);
}
[data-theme="light"] .dock-accent {
  background:linear-gradient(135deg, rgba(0,140,180,0.1), rgba(0,180,120,0.08)) !important;
  border:1px solid rgba(0,140,180,0.25);
}
[data-theme="light"] .dock-accent:hover {
  background:linear-gradient(135deg, rgba(0,140,180,0.18), rgba(0,180,120,0.14)) !important;
}
[data-theme="light"] .dock-badge {
  box-shadow:0 2px 8px rgba(255,45,85,0.25);
}

/* ── Dock responsive ── */
@media (max-width:700px) {
  .dock-wrap { bottom:8px; }
  .dock { gap:2px; padding:4px 8px 6px; border-radius:14px; }
  .dock-item { width:34px; height:34px; border-radius:9px; font-size:14px; }
  .dock-divider { height:20px; }
}
@media (max-width:500px) {
  .dock-item::before { display:none; }
  .dock-item { width:30px; height:30px; font-size:12px; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY (a11y) — Skip Links, Focus, Font Scaling, Controls
   ═══════════════════════════════════════════════════════════════ */

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.a11y-skip-links { position:fixed; top:0; left:0; z-index:100000; }
.a11y-skip-link {
  position:absolute; left:-9999px; top:4px;
  background:var(--cyan); color:#000; font-weight:700;
  padding:8px 18px; border-radius:0 0 8px 0;
  font-size:0.85rem; text-decoration:none;
  z-index:100001; box-shadow:0 2px 8px rgba(0,0,0,0.4);
  transition:left 0.1s;
}
.a11y-skip-link:focus { left:0; outline:3px solid #fff; }

.a11y-controls { position:relative; display:flex; align-items:center; }
.a11y-btn {
  width:34px; height:34px; border-radius:8px; border:1px solid var(--frame);
  background:var(--bg-panel); color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.a11y-btn:hover, .a11y-btn:focus-visible {
  border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim);
}

.a11y-panel {
  position:absolute; top:42px; right:0; z-index:9000;
  width:280px; background:var(--bg-panel-solid); border:1px solid var(--frame);
  border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.5);
  flex-direction:column; padding:0; overflow:hidden;
}
.a11y-panel-header {
  padding:12px 16px 8px; border-bottom:1px solid var(--frame);
  display:flex; justify-content:space-between; align-items:baseline;
}
.a11y-panel-title { font-family:'Orbitron',monospace; font-size:0.7rem; font-weight:600; color:var(--cyan); letter-spacing:1px; text-transform:uppercase; }
.a11y-panel-title-ar { font-family:'Noto Kufi Arabic',sans-serif; font-size:0.65rem; color:var(--text-dim); }
.a11y-section {
  padding:10px 16px; border-bottom:1px solid var(--frame);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.a11y-section:last-child { border-bottom:none; }
.a11y-label { font-size:0.65rem; color:var(--text-main); flex:1; }

.a11y-font-controls { display:flex; align-items:center; gap:4px; }
.a11y-font-btn {
  width:30px; height:28px; border-radius:6px; border:1px solid var(--frame);
  background:var(--bg-hover); color:var(--text-main); cursor:pointer; font-size:0.65rem;
  font-weight:700; display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.a11y-font-btn:hover, .a11y-font-btn:focus-visible {
  border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim);
}
.a11y-reset-btn { font-size:0.75rem; }
.a11y-font-value {
  font-family:'Share Tech Mono',monospace; font-size:0.6rem; color:var(--cyan);
  min-width:36px; text-align:center;
}

.a11y-toggle { background:none; border:none; cursor:pointer; padding:2px; }
.a11y-toggle-track {
  display:block; width:36px; height:20px; border-radius:10px;
  background:var(--bg-hover); border:1px solid var(--frame);
  position:relative; transition:all .2s;
}
.a11y-toggle-track.a11y-on {
  background:rgba(0,212,255,0.2); border-color:var(--cyan);
}
.a11y-toggle-thumb {
  display:block; width:14px; height:14px; border-radius:50%;
  background:var(--text-dim); position:absolute; top:2px; left:2px;
  transition:all .2s;
}
.a11y-toggle-track.a11y-on .a11y-toggle-thumb {
  left:18px; background:var(--cyan);
}

.a11y-focus-highlight *:focus-visible {
  outline:3px solid var(--cyan) !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 5px rgba(0,212,255,0.15) !important;
}
.a11y-focus-highlight button:focus-visible,
.a11y-focus-highlight a:focus-visible,
.a11y-focus-highlight input:focus-visible,
.a11y-focus-highlight select:focus-visible,
.a11y-focus-highlight textarea:focus-visible,
.a11y-focus-highlight [tabindex]:focus-visible {
  outline:3px solid var(--cyan) !important;
  outline-offset:2px !important;
  border-radius:6px;
}

.a11y-high-contrast {
  --text-main: #ffffff;
  --text-dim: #c0d0e8;
  --frame: #3a5a80;
  --frame-light: #5080b0;
  --cyan: #00e8ff;
}
.a11y-high-contrast[data-theme="light"] {
  --text-main: #000000;
  --text-dim: #1a1a2e;
  --frame: #666;
  --frame-light: #444;
  --cyan: #005588;
}
.a11y-high-contrast .card { border-width:2px; }
.a11y-high-contrast .nav-btn.active { border-color:var(--cyan); }
.a11y-high-contrast .stat-card { border-width:2px; }
.a11y-high-contrast .btn { border-width:2px; font-weight:700; }

.a11y-reduce-motion,
.a11y-reduce-motion *,
.a11y-reduce-motion *::before,
.a11y-reduce-motion *::after {
  animation-duration:0.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.01ms !important;
  scroll-behavior:auto !important;
}

[data-theme="light"] .a11y-panel {
  background:#fff; border-color:#d0d5dd;
  box-shadow:0 4px 24px rgba(0,0,0,0.12);
}
[data-theme="light"] .a11y-btn { background:var(--bg-hover); }
[data-theme="light"] .a11y-section { border-color:#e5e7eb; }
[data-theme="light"] .a11y-panel-header { border-color:#e5e7eb; }

@media (max-width:600px) {
  .a11y-panel { width:260px; right:-8px; }
  .a11y-section { padding:8px 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION PANEL (enhanced)
   ═══════════════════════════════════════════════════════════════ */

.notif-panel {
  position:fixed; top:0; right:-380px; width:370px; height:100vh;
  background:var(--bg-panel-solid); border-left:1px solid var(--frame);
  box-shadow:-4px 0 24px rgba(0,0,0,0.4); z-index:10000;
  display:flex; flex-direction:column; transition:right 0.3s ease;
}
.notif-panel.open { right:0; }
.notif-panel-header {
  padding:16px 20px; border-bottom:1px solid var(--frame);
  display:flex; justify-content:space-between; align-items:center;
}
.notif-panel-title { font-family:'Orbitron',monospace; font-size:0.75rem; font-weight:600; color:var(--cyan); letter-spacing:1px; text-transform:uppercase; }
.notif-panel-close {
  width:28px; height:28px; border-radius:6px; border:1px solid var(--frame);
  background:none; color:var(--text-dim); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:1rem; transition:all .2s;
}
.notif-panel-close:hover { border-color:var(--red); color:var(--red); }
.notif-panel-body { flex:1; overflow-y:auto; padding:8px 0; }
.notif-item {
  padding:12px 20px; border-bottom:1px solid var(--frame);
  cursor:pointer; transition:background .2s;
}
.notif-item:hover { background:var(--bg-hover); }
.notif-item.unread { border-left:3px solid var(--cyan); }
.notif-item-title { font-size:0.72rem; font-weight:600; color:var(--text-main); margin-bottom:3px; }
.notif-item-msg { font-size:0.65rem; color:var(--text-dim); line-height:1.4; }
.notif-item-time { font-family:'Share Tech Mono',monospace; font-size:0.55rem; color:var(--text-dim); margin-top:4px; opacity:0.6; }
.notif-panel-footer {
  padding:12px 20px; border-top:1px solid var(--frame);
  display:flex; justify-content:space-between;
}
.notif-panel-footer button {
  background:none; border:1px solid var(--frame); color:var(--text-dim);
  padding:6px 14px; border-radius:6px; font-size:0.65rem; cursor:pointer; transition:all .2s;
}
.notif-panel-footer button:hover { border-color:var(--cyan); color:var(--cyan); }
.notif-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:9999; display:none; }
.notif-overlay.open { display:block; }

[data-theme="light"] .notif-panel { background:#fff; border-color:#d0d5dd; box-shadow:-4px 0 24px rgba(0,0,0,0.1); }
[data-theme="light"] .notif-item { border-color:#e5e7eb; }
[data-theme="light"] .notif-panel-header { border-color:#e5e7eb; }
[data-theme="light"] .notif-panel-footer { border-color:#e5e7eb; }

/* ═══════════════════════════════════════════════════════════════
   GLOBAL SEARCH
   ═══════════════════════════════════════════════════════════════ */

.search-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:15000;
  display:none; align-items:flex-start; justify-content:center; padding-top:15vh;
}
.search-overlay.open { display:flex; }
.search-box {
  width:560px; max-width:90vw; background:var(--bg-panel-solid);
  border:1px solid var(--frame-light); border-radius:14px;
  box-shadow:0 12px 48px rgba(0,0,0,0.5); overflow:hidden;
}
.search-input-wrap {
  display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--frame);
}
.search-input-wrap svg { color:var(--cyan); flex-shrink:0; }
.search-input {
  flex:1; background:none; border:none; color:var(--text-main);
  font-size:0.9rem; font-family:'DM Sans',sans-serif; outline:none;
}
.search-input::placeholder { color:var(--text-dim); opacity:0.5; }
.search-hint {
  padding:6px 18px; font-family:'Share Tech Mono',monospace;
  font-size:0.55rem; color:var(--text-dim); opacity:0.5;
  border-top:1px solid var(--frame);
}
.search-results { max-height:340px; overflow-y:auto; }
.search-result-item {
  padding:10px 18px; display:flex; align-items:center; gap:10px;
  cursor:pointer; transition:background .15s; border-bottom:1px solid rgba(255,255,255,0.03);
}
.search-result-item:hover, .search-result-item.selected { background:var(--cyan-dim); }
.search-result-icon { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:0.75rem; flex-shrink:0; }
.search-result-text { flex:1; }
.search-result-name { font-size:0.78rem; font-weight:500; color:var(--text-main); }
.search-result-meta { font-size:0.6rem; color:var(--text-dim); margin-top:1px; }
.search-result-badge { font-family:'Share Tech Mono',monospace; font-size:0.55rem; color:var(--text-dim); padding:2px 8px; border-radius:4px; background:var(--bg-hover); }

[data-theme="light"] .search-box { background:#fff; border-color:#d0d5dd; box-shadow:0 12px 48px rgba(0,0,0,0.15); }
[data-theme="light"] .search-input { color:#1a1a2e; }
[data-theme="light"] .search-result-item:hover { background:rgba(0,136,252,0.06); }

/* ═══════════════════════════════════════════════════════════════
   EXPORT TOOLBAR
   ═══════════════════════════════════════════════════════════════ */

.export-toolbar {
  display:flex; gap:6px; align-items:center;
}
.export-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 12px; border-radius:6px; border:1px solid var(--frame);
  background:var(--bg-panel); color:var(--text-dim); font-size:0.62rem;
  font-family:'Share Tech Mono',monospace; text-transform:uppercase;
  letter-spacing:0.5px; cursor:pointer; transition:all .2s;
}
.export-btn:hover { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim); }
.export-btn svg { width:13px; height:13px; }

/* ═══════════════════════════════════════════════════════════════
   COMMAND PALETTE
   ═══════════════════════════════════════════════════════════════ */
.cmd-palette-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
}
.cmd-palette {
  width: 520px; max-height: 60vh;
  background: var(--bg-panel); border: 1px solid var(--frame);
  border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; overflow: hidden;
}
.cmd-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 0.82rem; color: var(--text-main); padding: 0;
  font-family: inherit;
}
.cmd-input::placeholder { color: var(--text-muted); }
.cmd-results {
  overflow-y: auto; max-height: calc(60vh - 60px); padding: 6px 0;
}
.cmd-category {
  padding: 8px 16px 4px; font-size: 0.58rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.cmd-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; cursor: pointer; transition: background 0.1s;
  border-radius: 0;
}
.cmd-item:hover, .cmd-item.active {
  background: rgba(0,212,255,0.06);
}
.cmd-item.active {
  border-left: 2px solid var(--cyan);
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1024px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main, .sidebar.collapsed + .main { margin-left:0; }
  .sidebar-collapse-btn { display:none; }
  .btn-hamburger-mobile { display:flex; }
  .g4 { grid-template-columns:1fr 1fr; }
  .g3 { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .g2,.g3,.g4,.g5 { grid-template-columns:1fr; }
  .gov-vision { display:none; }
  .stat-grid { grid-template-columns:1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   NOOR AI ASSISTANT
   ═══════════════════════════════════════════════════════════════ */
.noor-orb{position:fixed;bottom:24px;right:24px;z-index:10000;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;background:rgba(0,20,40,0.85);backdrop-filter:blur(12px);box-shadow:0 2px 16px rgba(0,212,255,0.18),0 0 0 1px rgba(0,212,255,0.10);transition:box-shadow 0.3s,transform 0.2s;padding:0;outline:none}
.noor-orb-visible{display:flex !important}
.noor-orb:hover{box-shadow:0 2px 24px rgba(0,212,255,0.35),0 0 0 1px rgba(0,212,255,0.2);transform:scale(1.08)}
.noor-quit{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:rgba(255,80,80,0.85);color:#fff;font-size:12px;line-height:18px;text-align:center;cursor:pointer;opacity:0;transition:opacity 0.15s,transform 0.15s;z-index:3;pointer-events:none;border:1px solid rgba(255,255,255,0.15);font-family:sans-serif}
.noor-orb:hover .noor-quit{opacity:1;pointer-events:auto}
.noor-quit:hover{transform:scale(1.2);background:rgba(255,50,50,1)}
.noor-orb-ring{position:absolute;inset:-4px;border-radius:50%;border:1.5px dashed rgba(0,212,255,0.35);animation:none;pointer-events:none}
.noor-orb-core{display:flex;align-items:center;justify-content:center;width:28px;height:28px;position:relative;z-index:2}
.noor-orb-core svg{width:24px;height:24px}
.noor-orb-thinking{animation:noorThink 0.6s ease}
.noor-orb-speaking .noor-orb-ring{border-color:rgba(0,212,255,0.6);box-shadow:0 0 12px rgba(0,212,255,0.3)}
.noor-scanning{box-shadow:0 0 32px rgba(0,212,255,0.6),0 0 64px rgba(0,180,220,0.35),0 0 96px rgba(0,212,255,0.15) !important}
.noor-orb-active{box-shadow:0 2px 24px rgba(0,212,255,0.4),0 0 0 1px rgba(0,212,255,0.3)}

/* Scan rings */
.noor-scan-ring-inner{position:absolute;top:-18px;left:-18px;right:-18px;bottom:-18px;border-radius:50%;border:2.5px solid transparent;border-top-color:#00d4ff;border-right-color:rgba(0,212,255,0.5);box-shadow:0 0 12px rgba(0,212,255,0.3),inset 0 0 8px rgba(0,212,255,0.1);animation:noorScanSpin 1s cubic-bezier(0.4,0,0.2,1) infinite;pointer-events:none}
.noor-scan-ring-mid{position:absolute;top:-30px;left:-30px;right:-30px;bottom:-30px;border-radius:50%;border:1.5px solid transparent;border-bottom-color:rgba(16,185,129,0.7);border-left-color:rgba(16,185,129,0.3);box-shadow:0 0 18px rgba(16,185,129,0.2);animation:noorScanSpin 1.8s linear infinite reverse;pointer-events:none}
.noor-scan-ring-outer{position:absolute;top:-44px;left:-44px;right:-44px;bottom:-44px;border-radius:50%;border:1px solid transparent;border-top-color:rgba(0,212,255,0.3);border-right-color:rgba(0,212,255,0.15);box-shadow:0 0 24px rgba(0,212,255,0.1);animation:noorScanSpin 3s linear infinite;pointer-events:none}
.noor-scan-pulse{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(0,212,255,0.15),transparent 70%);animation:noorScanPulse 2s ease-out infinite;pointer-events:none}
.noor-scan-pulse2{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(0,212,255,0.2);animation:noorScanPulse2 2s ease-out infinite 0.4s;pointer-events:none}
.noor-scan-sweep{position:absolute;top:50%;left:50%;width:120px;height:2px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(0,212,255,0.6),transparent);animation:noorScanSweep 2s linear infinite;pointer-events:none}
.noor-scan-crosshair{position:absolute;top:50%;left:50%;width:60px;height:60px;transform:translate(-50%,-50%);border:1px solid rgba(0,212,255,0.2);border-radius:50%;pointer-events:none}
.noor-scan-crosshair::before,.noor-scan-crosshair::after{content:'';position:absolute;background:rgba(0,212,255,0.3)}
.noor-scan-crosshair::before{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.noor-scan-crosshair::after{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}

/* Stream */
.noor-stream{position:fixed;bottom:86px;right:16px;width:310px;max-height:420px;border-radius:16px 16px 12px 12px;background:rgba(10,18,30,0.97);border:1px solid rgba(0,212,255,0.13);box-shadow:0 4px 32px rgba(0,0,0,0.5),0 0 0 1px rgba(0,212,255,0.08);z-index:10001;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(16px) scale(0.97);transition:opacity 0.35s,transform 0.35s;overflow:hidden}
.noor-stream-show{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.noor-stream-header{display:flex;align-items:center;gap:7px;padding:9px 12px 7px;border-bottom:1px solid rgba(0,212,255,0.08);min-height:32px}
.noor-bubble-dot{width:7px;height:7px;border-radius:50%;background:#00d4ff;box-shadow:0 0 6px #00d4ff;animation:noorDotPulse 2s infinite}
.noor-stream-name{font-weight:600;font-size:12.5px;color:#00d4ff;letter-spacing:0.5px;flex:1}
.noor-stream-clear{background:none;border:1px solid rgba(0,212,255,0.15);color:rgba(0,212,255,0.5);font-size:10px;padding:2px 8px;border-radius:8px;cursor:pointer;transition:all 0.2s}
.noor-stream-clear:hover{border-color:rgba(0,212,255,0.4);color:#00d4ff}
.noor-stream-close{background:none;border:none;color:rgba(255,255,255,0.35);font-size:18px;cursor:pointer;padding:0 2px;line-height:1}
.noor-stream-close:hover{color:#fff}
.noor-stream-body{padding:10px 12px 6px;display:flex;flex-direction:column;gap:7px;max-height:320px;overflow-y:auto;scroll-behavior:smooth}
.noor-stream-body::-webkit-scrollbar{width:4px}
.noor-stream-body::-webkit-scrollbar-track{background:transparent}
.noor-stream-body::-webkit-scrollbar-thumb{background:rgba(0,212,255,0.15);border-radius:4px}
.noor-stream-body::-webkit-scrollbar-thumb:hover{background:rgba(0,212,255,0.3)}
.noor-msg{font-size:12.5px;color:rgba(255,255,255,0.88);line-height:1.55;padding:6px 0 2px;border-bottom:1px solid rgba(255,255,255,0.04);word-break:break-word}
.noor-msg strong{color:#00d4ff}
.noor-insight-badge{display:inline-block;font-size:9.5px;font-weight:700;padding:1.5px 7px;border-radius:6px;margin-right:4px;vertical-align:middle;letter-spacing:0.3px;text-transform:uppercase}
.insight-warn{background:rgba(255,152,0,0.18);color:#FFB74D}
.insight-good{background:rgba(0,200,83,0.15);color:#69F0AE}
.insight-tip{background:rgba(0,212,255,0.12);color:#00d4ff}
.insight-action{background:rgba(59,130,246,0.18);color:#64B5F6}
.insight-milestone{background:rgba(255,215,0,0.18);color:#FFD700}
.noor-typing-indicator{display:flex;gap:4px;padding:6px 0}
.noor-typing-indicator span{width:5px;height:5px;border-radius:50%;background:rgba(0,212,255,0.4);animation:noorBounce 1.2s infinite}
.noor-typing-indicator span:nth-child(2){animation-delay:0.15s}
.noor-typing-indicator span:nth-child(3){animation-delay:0.3s}
.noor-action-btn{font-size:10.5px;font-weight:600;padding:5px 12px;border-radius:8px;border:none;cursor:pointer;background:linear-gradient(135deg,#0078D7,#00d4ff);color:#fff;letter-spacing:0.3px;transition:transform 0.15s,box-shadow 0.15s;display:inline-flex;align-items:center;gap:4px}
.noor-action-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,212,255,0.3)}
.noor-chat-input-wrap{display:flex;gap:6px;padding:8px 10px;border-top:1px solid rgba(0,212,255,0.08);background:rgba(0,10,20,0.5)}
.noor-chat-input{flex:1;background:rgba(0,212,255,0.06);border:1px solid rgba(0,212,255,0.12);border-radius:8px;padding:6px 10px;font-size:11.5px;color:#e0e0e0;outline:none;transition:border-color 0.2s}
.noor-chat-input:focus{border-color:rgba(0,212,255,0.35)}
.noor-chat-input::placeholder{color:rgba(255,255,255,0.25)}
.noor-chat-send{background:linear-gradient(135deg,#0078D7,#00d4ff);border:none;border-radius:8px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:transform 0.15s}
.noor-chat-send:hover{transform:scale(1.1)}
.noor-session-sep{display:flex;align-items:center;gap:8px;padding:4px 0;margin:4px 0}
.noor-session-sep::before,.noor-session-sep::after{content:'';flex:1;height:1px;background:rgba(0,212,255,0.1)}
.noor-session-sep span{font-size:9px;color:rgba(0,212,255,0.35);letter-spacing:0.5px}
.noor-spotlight{position:relative;z-index:100;box-shadow:0 0 0 3px rgba(0,212,255,0.3),0 0 16px rgba(0,212,255,0.15);border-radius:8px;transition:box-shadow 0.3s}
.noor-spotlight-warn{box-shadow:0 0 0 3px rgba(255,152,0,0.3),0 0 16px rgba(255,152,0,0.15)}
.noor-spotlight-good{box-shadow:0 0 0 3px rgba(0,200,83,0.3),0 0 16px rgba(0,200,83,0.15)}
.noor-milestone-overlay{position:fixed;inset:0;z-index:10003;pointer-events:none}
.noor-cursor{display:inline;animation:noorBlink 0.8s step-end infinite;color:#00d4ff;font-weight:100}
.noor-cursor::after{content:'▋'}

@keyframes noorThink{0%{transform:scale(1)}30%{transform:scale(0.88)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes noorScanSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes noorScanPulse{0%{width:0;height:0;opacity:0.6}100%{width:320px;height:320px;opacity:0}}
@keyframes noorScanPulse2{0%{width:0;height:0;opacity:0.5}100%{width:280px;height:280px;opacity:0}}
@keyframes noorScanSweep{from{transform:rotate(0deg)}to{transform:rotate(720deg)}}
@keyframes noorBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
@keyframes noorDotPulse{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes noorBlink{50%{opacity:0}}
@keyframes noorRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:0.6}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ═══ DOCK QUICK-ACTION ITEMS ═══ */
/* Minimized dock — shows only essential items */
.dock.dock-minimized .dock-item { display:none; }
.dock.dock-minimized .dock-divider { display:none; }
.dock.dock-minimized #dockHome,
.dock.dock-minimized #dockCmdPal,
.dock.dock-minimized #dockNoor,
.dock.dock-minimized #dockMinimize,
.dock.dock-minimized #dockLogout { display:flex; }
.dock.dock-minimized { gap:2px; padding:4px 8px 6px; }

.dock-item.dock-qa {
  border:1px dashed rgba(0,212,255,0.2);
  background:rgba(0,212,255,0.04);
}
.dock-item.dock-qa:hover {
  border-style:solid;
  background:rgba(0,212,255,0.12);
  box-shadow:0 0 14px rgba(0,212,255,0.15);
}

/* ═══ DEPARTMENT CHAT ═══ */
#chatEditorArea:empty:before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  opacity: 0.5;
  pointer-events: none;
}
#chatEditorArea blockquote {
  border-left: 3px solid var(--cyan);
  margin: 4px 0;
  padding: 4px 12px;
  background: rgba(0,212,255,0.04);
  border-radius: 0 4px 4px 0;
}
#chatEditorArea h3 {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  margin: 4px 0;
}
#chatEditorArea ul, #chatEditorArea ol {
  margin: 4px 0;
  padding-left: 20px;
}
#chatEditorArea a {
  color: var(--cyan);
  text-decoration: underline;
}

/* ═══ ROLE PREVIEW BANNER ═══ */
#rolePreviewBanner {
  font-family:var(--font-display);
}


/* ═══ DATA COLLECTION CALLS ═══ */
#p-data_calls {
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--bg);
  overflow:hidden;
}

.dc-tab-button {
  padding:8px 16px;
  background:none;
  border:none;
  color:var(--text-muted);
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  border-bottom:2px solid transparent;
  cursor:pointer;
  transition:all 0.15s;
}

.dc-tab-button.active {
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}

.dc-tab-button:hover {
  color:var(--text);
}

.dc-call-card {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  background:var(--bg-panel);
  border:1px solid var(--frame);
  border-radius:10px;
  transition:all 0.2s;
}

.dc-call-card:hover {
  background:var(--bg-panel-hover);
  border-color:var(--frame-light);
  box-shadow:0 8px 24px rgba(0,212,255,0.1);
}

.dc-type-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  background:var(--green-dim);
  color:var(--green);
  border:1px solid var(--green);
  border-radius:4px;
  font-size:9px;
  font-weight:700;
}

.dc-progress-bar {
  background:var(--bg-panel);
  border-radius:6px;
  height:6px;
  overflow:hidden;
}

.dc-progress-fill {
  background:linear-gradient(90deg, var(--cyan), var(--green));
  height:100%;
  transition:width 0.3s ease-out;
}

.dc-status-submitted {
  color:var(--green);
  font-weight:700;
}

.dc-status-pending {
  color:var(--amber);
  font-weight:700;
}

.dc-status-late {
  color:var(--red);
  font-weight:700;
}

.dc-modal-overlay {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.8);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  backdrop-filter:blur(4px);
}

.dc-modal-content {
  background:var(--bg-panel-solid);
  border:1px solid var(--frame);
  border-radius:12px;
  max-width:700px;
  max-height:90vh;
  overflow-y:auto;
  width:90%;
  box-shadow:0 8px 32px rgba(0,0,0,0.8);
}

.dc-modal-header {
  padding:20px;
  border-bottom:1px solid var(--frame);
  background:linear-gradient(135deg, var(--cyan-dim), var(--blue-dim));
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:10001;
}

.dc-modal-body {
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.dc-modal-footer {
  padding:16px;
  border-top:1px solid var(--frame);
  display:flex;
  gap:8px;
  justify-content:flex-end;
  background:var(--bg-panel);
  position:sticky;
  bottom:0;
}

.dc-form-group {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.dc-form-label {
  display:block;
  font-weight:700;
  color:var(--text);
  font-size:12px;
}

.dc-form-input,
.dc-form-textarea,
.dc-form-select {
  padding:10px 12px;
  background:var(--bg-panel);
  border:1px solid var(--frame);
  border-radius:8px;
  color:var(--text);
  font-size:12px;
  font-family:var(--font-body);
  transition:all 0.15s;
}

.dc-form-input:focus,
.dc-form-textarea:focus,
.dc-form-select:focus {
  outline:none;
  border-color:var(--cyan);
  background:var(--bg-panel-hover);
  box-shadow:0 0 12px rgba(0,212,255,0.2);
}

.dc-form-textarea {
  min-height:80px;
  resize:vertical;
}

.dc-checkbox-group {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dc-checkbox-label {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:12px;
  transition:all 0.15s;
}

.dc-checkbox-label:hover {
  color:var(--cyan);
}

.dc-department-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:8px;
}

.dc-tracking-container {
  display:grid;
  grid-template-columns:250px 1fr;
  gap:16px;
  height:100%;
}

.dc-tracking-sidebar {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:12px;
  border-right:1px solid var(--frame);
  overflow-y:auto;
}

.dc-tracking-call-btn {
  padding:10px 12px;
  background:var(--bg-panel);
  border:1px solid var(--frame);
  border-radius:8px;
  text-align:left;
  cursor:pointer;
  color:var(--text);
  font-size:11px;
  transition:all 0.15s;
  font-family:var(--font-display);
}

.dc-tracking-call-btn:hover {
  background:var(--bg-panel-hover);
  border-color:var(--frame-light);
}

.dc-tracking-call-btn.active {
  background:var(--cyan-dim);
  border-color:var(--cyan);
}

.dc-tracking-table {
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}

.dc-tracking-table thead {
  position:sticky;
  top:0;
  background:var(--bg-panel);
  border-bottom:1px solid var(--frame);
}

.dc-tracking-table th {
  text-align:left;
  padding:8px;
  color:var(--cyan);
  font-weight:700;
  font-size:10px;
}

.dc-tracking-table td {
  padding:8px;
  border-bottom:1px solid var(--frame);
  height:36px;
}

.dc-tracking-table tr:hover {
  background:var(--bg-panel-hover);
}

.dc-submission-item {
  padding:12px;
  background:var(--bg-panel);
  border-radius:8px;
  border:1px solid var(--frame);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dc-kpi-input-group,
.dc-init-input-group,
.dc-plan-input-group {
  padding:12px;
  background:var(--bg-panel);
  border-radius:8px;
  border:1px solid var(--frame);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dc-progress-slider {
  flex:1;
  cursor:pointer;
}

.dc-progress-label {
  color:var(--cyan);
  font-weight:700;
  width:35px;
  text-align:right;
  font-size:11px;
}

.dc-action-button {
  padding:4px 8px;
  font-size:9px;
  border-radius:4px;
  cursor:pointer;
  transition:all 0.15s;
}

/* Azure Sync pulse animation */
@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}