/* Direction: fibre-optic control room — cool paper, deep navy sidebar, electric blue signal, Bangla-ready type */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f2f6fb;
  --surface: #ffffff;
  --surface-2: #e6eaf0;
  --border: #d0d6dc;
  --border-strong: #aab0b8;
  --ink: #0e1b2e;
  --muted: #55657c;
  --accent: #0b63d1;
  --accent-hover: #0954b2;
  --accent-ink: #ffffff;
  --accent-text: #0a56b4;
  --accent-strong: #0a5bc0;
  --accent-soft: #d2e1f5;
  --accent-border: #8ab4e8;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d7e8e4;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ebe2de;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #ebdce0;
  --danger-strong: #b91c1c;
  --chart-1: #0b63d1;
  --chart-2: #b057ca;
  --chart-3: #9b0a2c;
  --chart-4: #a57302;
  --chart-5: #236000;
  --chart-6: #1e9195;

  --font-display: "Plus Jakarta Sans", "Hind Siliguri", system-ui, sans-serif;
  --font-body: "Hind Siliguri", "Plus Jakarta Sans", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.02em;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --shadow-card: 0 1px 2px rgba(14, 27, 46, 0.06), 0 8px 24px -12px rgba(14, 27, 46, 0.12);
  --x-side: #0a1628;
  --x-side-dim: #9db1cc;
  --x-side-active: rgba(255, 255, 255, 0.09);
  --x-on-photo: #ffffff;
  --x-expense: #e0793a;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Hind Siliguri", "Plus Jakarta Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
  --gradient-teal: linear-gradient(135deg, #0a8f9e, #0b6f86);
  --gradient-blue: linear-gradient(135deg, #1d6fd6, #0f4aa8);
  --gradient-green: linear-gradient(135deg, #3d8f1c, #276e12);
  --gradient-amber: linear-gradient(135deg, #b85e00, #94430a);
  --gradient-red: linear-gradient(135deg, #cf2a3e, #a01a2c);
  --gradient-grey: linear-gradient(135deg, #6b6560, #4b4642);
  --gradient-slate: linear-gradient(135deg, #5a7596, #425b7a);
  --gradient-sky: linear-gradient(135deg, #3b7aa1, #2a5f82);
  --gradient-steel: linear-gradient(135deg, #2f7a80, #234f5f);
  --gradient-olive: linear-gradient(135deg, #5a6d2a, #3d4f1f);
  --gradient-cyan: linear-gradient(135deg, #0b8fa8, #09708c);
}

html[data-theme="dark"] {
  --canvas: #02080f;
  --surface: #1b2127;
  --surface-2: #0f141b;
  --border: #252b31;
  --border-strong: #4e5257;
  --ink: #f2f6fb;
  --muted: #92979d;
  --accent: #0b63d1;
  --accent-hover: #307ad8;
  --accent-ink: #ffffff;
  --accent-text: #5090de;
  --accent-strong: #4186db;
  --accent-soft: #041c3a;
  --accent-border: #063166;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #062219;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #29190e;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2a0c12;
  --danger-strong: #cd5c5c;
  --chart-1: #1569d8;
  --chart-2: #b65dd1;
  --chart-3: #d94254;
  --chart-4: #ab7810;
  --chart-5: #44971d;
  --chart-6: #09999d;
}

.sidebar {
  background: var(--x-side);
  color: var(--x-on-photo);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
@media (min-width: 1024px) {
  .sidebar { transform: none; }
}
body.nav-open .sidebar { transform: none; }
.nav-scrim { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 30; }
@media (max-width: 1023px) {
  body.nav-open .nav-scrim { display: block; }
}
.nav-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.85rem; border-radius: 0.7rem;
  color: var(--x-side-dim);
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--x-side-active); color: var(--x-on-photo); }
.nav-link:focus-visible { outline: 2px solid var(--x-on-photo); outline-offset: 2px; }
.nav-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.nav-link small { display: block; font-size: 0.7rem; opacity: 0.75; line-height: 1; margin-top: 2px; }

.nav-group { border-radius: 0.7rem; }
.nav-sum {
  display: flex; align-items: center; gap: 0.75rem; cursor: pointer; list-style: none;
  padding: 0.6rem 0.85rem; border-radius: 0.7rem; color: var(--x-side-dim);
  transition: background 0.15s, color 0.15s;
}
.nav-sum::-webkit-details-marker { display: none; }
.nav-sum:hover { background: var(--x-side-active); color: var(--x-on-photo); }
.nav-sum:focus-visible { outline: 2px solid var(--x-on-photo); outline-offset: 2px; }
.nav-chev { transition: transform 0.2s; }
.nav-group[open] > .nav-sum { color: var(--x-on-photo); }
.nav-group[open] > .nav-sum .nav-chev { transform: rotate(180deg); }
.nav-sub { margin-left: 1.1rem; padding: 0.45rem 0.75rem; border-left: 1px solid var(--x-side-active); border-radius: 0 0.6rem 0.6rem 0; }
html.reduced-motion .nav-chev { transition: none; }

.pill-ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success-strong, var(--success)); }
.pill-warn { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning-strong, var(--warning)); }
.pill-bad { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger-strong, var(--danger)); }
.pill-mute { background: var(--surface-2); color: var(--muted); }

.stat-icon { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 0.8rem; background: var(--accent-soft); color: var(--accent-strong, var(--accent-text)); }

.dash-tile { display: grid; align-content: space-between; gap: 0.6rem; min-height: 7.5rem; padding: 0.9rem 1rem; border-radius: var(--radius-card); color: var(--x-on-photo); box-shadow: var(--shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.dash-tile:hover { transform: translateY(-2px); filter: brightness(1.06); }
.dash-tile:active { transform: translateY(0); }
.dash-tile:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.dash-ico { display: grid; place-items: center; height: 2.4rem; width: 2.4rem; flex: none; border-radius: 0.7rem; background: rgba(255, 255, 255, 0.2); }
.tone-teal { background: var(--gradient-teal); }
.tone-blue { background: var(--gradient-blue); }
.tone-green { background: var(--gradient-green); }
.tone-amber { background: var(--gradient-amber); }
.tone-red { background: var(--gradient-red); }
.tone-grey { background: var(--gradient-grey); }
.tone-slate { background: var(--gradient-slate); }
.tone-sky { background: var(--gradient-sky); }
.tone-steel { background: var(--gradient-steel); }
.tone-olive { background: var(--gradient-olive); }
.tone-cyan { background: var(--gradient-cyan); }
.ring-track { stroke: var(--surface-2); }
.ring-fill { stroke: var(--accent); transition: stroke-dasharray 0.8s ease; }
html.reduced-motion .dash-tile, html.reduced-motion .ring-fill { transition: none; }
.bar { transform-origin: bottom; animation: bar-grow 0.7s ease-out both; }
@keyframes bar-grow { from { transform: scaleY(0.15); } }
.hbar { height: 0.5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hbar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
html.reduced-motion .bar { animation: none; }
html.reduced-motion .sidebar { transition: none; }

.login-bg {
  background:
    radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%),
    var(--x-side);
  color: var(--x-on-photo);
}
.signal { position: relative; width: 4.5rem; height: 4.5rem; }
.signal i { position: absolute; inset: 0; border: 2px solid var(--x-on-photo); border-radius: 50%; opacity: 0.5; animation: ping-out 2.8s ease-out infinite; }
.signal i:nth-child(2) { animation-delay: 0.9s; }
.signal i:nth-child(3) { animation-delay: 1.8s; }
@keyframes ping-out { from { transform: scale(0.4); opacity: 0.6; } to { transform: scale(1.3); opacity: 0; } }
html.reduced-motion .signal i { animation: none; }

.msg-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.print-only { display: none; }
@media print {
  .sidebar, .topbar, .no-print, .nav-scrim { display: none !important; }
  .shell { padding-left: 0 !important; }
  .print-only { display: block; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card, .dash-tile, section, tr { break-inside: avoid; }
  .dash-tile { transition: none; transform: none !important; filter: none !important; }
  .bar { animation: none; }
  @page { size: A4; margin: 12mm; }
}