/* ============================================================
   NOX Panel — SPX theme port (visual clone of mgt-dashboard)
   Blue-charcoal palette, Cairo type, heavy-glass card hierarchy.
   Dark-first: applied via <html data-bs-theme="dark">.
   Loaded AFTER bootstrap.rtl.min.css — overrides its variables.
   Accent + opacities are overridden at runtime from the admin
   Appearance settings (inline <style> in the layouts).
   ============================================================ */

:root {
  /* NOX Smart night-ink indigo ramp (r g b triplets)
     ground #0B0D26 · night ink #1A1E4E · spark cyan accent */
  --gray-50: 244 246 252;
  --gray-100: 231 235 248;
  --gray-200: 210 216 238;
  --gray-300: 172 181 214;
  --gray-400: 138 148 186;
  --gray-500: 96 106 150;
  --gray-600: 60 68 128;
  --gray-700: 40 46 104;
  --gray-800: 26 30 78;
  --gray-900: 16 19 52;
  --gray-950: 11 13 38;

  --nox-accent: #22d3ee;
  --nox-accent-strong: #12b6d4;
  --nox-accent-soft: color-mix(in srgb, var(--nox-accent) 12%, transparent);

  /* Landing "liquid glass" parity (lux.css .glass) — night-ink → deep-night
     gradient at ~.78/.5, faint cyan edge + inner spark glow. Theme-driven so
     runtime brand-color changes still flow through. */
  --nox-glass-a: color-mix(in srgb, var(--nox-ink, #1a1e4e) 82%, transparent);
  --nox-glass-b: color-mix(in srgb, var(--nox-ground, #0b0d26) 55%, transparent);
  --nox-glass-bd: color-mix(in srgb, var(--nox-accent) 20%, transparent);
  --nox-glass-grad: linear-gradient(135deg, var(--nox-glass-a), var(--nox-glass-b));
  --nox-glass-glow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 34px rgba(34, 211, 238, 0.045);
  --nox-hero-glow: #2a2f8f;

  /* NOX Smart brand gradient (icon gradient #2A2F8F → #0E1030) — overridable via settings */
  --nox-ink: #1a1e4e;
  --nox-grad-from: #2a2f8f;
  --nox-grad-to: #0e1030;
  --nox-brand-grad: linear-gradient(160deg, var(--nox-grad-from), var(--nox-grad-to));

  /* Glass (mgt defaults: cards 35%, sidebar 50%) */
  --nox-card-alpha: 35%;
  --nox-sidebar-alpha: 50%;

  --nox-card: #1a1e4e;
  --nox-card-2: #131638;
  --nox-border: #2e356e;
  --nox-border-soft: #232a56;
  --nox-ground: rgb(var(--gray-950));
  --nox-ground-tint: color-mix(in srgb, var(--nox-accent) 9%, transparent);
  --nox-hero-tint: color-mix(in srgb, var(--nox-accent) 16%, transparent);
  --nox-hero-line: color-mix(in srgb, var(--nox-accent) 65%, white);
  --nox-chip-ink: color-mix(in srgb, var(--nox-accent) 65%, white);
  --nox-up: #3fc98a;
  --nox-up-ink: #3fc98a;
  --nox-up-soft: rgba(63, 201, 138, 0.14);
  --nox-down: #f26074;
  --nox-down-ink: #f26074;
  --nox-down-soft: rgba(242, 96, 116, 0.14);
  --nox-warn-ink: #f0b24c;
  --nox-warn-soft: rgba(240, 178, 76, 0.16);
  --nox-muted-ink: rgb(var(--gray-400));
  --nox-strong-ink: rgb(var(--gray-100));
  --nox-track: #262c60;
  --nox-seg-muted: #363d78;
  --nox-hover-row: rgba(255, 255, 255, 0.02);
  --nox-input-bg: rgba(11, 13, 38, 0.65);
  --nox-scroll-thumb: #2e356e;
  --nox-topbar: #0b0d26;

  --nox-card-grad: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nox-card) var(--nox-card-alpha), transparent),
    color-mix(in srgb, var(--nox-card-2) var(--nox-card-alpha), transparent)
  );
}

/* ---------- Bootstrap variable re-map (dark) ---------- */
[data-bs-theme="dark"] {
  --bs-body-bg: rgb(var(--gray-950));
  --bs-body-color: rgb(var(--gray-200));
  --bs-emphasis-color: rgb(var(--gray-100));
  --bs-secondary-color: rgb(var(--gray-400));
  --bs-tertiary-color: rgb(var(--gray-500));
  --bs-tertiary-bg: var(--nox-card-2);
  --bs-secondary-bg: var(--nox-card);
  --bs-border-color: var(--nox-border-soft);
  --bs-border-color-translucent: var(--nox-border-soft);
  --bs-link-color: var(--nox-hero-line);
  --bs-link-hover-color: color-mix(in srgb, var(--nox-accent) 45%, white);
  --bs-primary: var(--nox-accent);
  --bs-primary-rgb: 34, 211, 238;
  --bs-success-rgb: 63, 201, 138;
  --bs-danger-rgb: 242, 96, 116;
  --bs-warning-rgb: 240, 178, 76;
  --bs-info-rgb: 127, 163, 255;
  --bs-heading-color: var(--nox-strong-ink);
}

/* ---------- Page ground + type ---------- */
body {
  font-family: 'Cairo', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.003em;
  /* Landing hero glow (radial night-indigo bloom at top) layered over the
     deep-night ground so the portal reads as the same world as the site. */
  background:
    radial-gradient(70rem 40rem at 50% -22%, color-mix(in srgb, var(--nox-hero-glow) 55%, transparent), transparent 60%),
    radial-gradient(1100px 520px at 85% -8%, var(--nox-ground-tint), transparent 60%),
    radial-gradient(800px 480px at 0% 115%, color-mix(in srgb, var(--nox-accent) 6%, transparent), transparent 55%),
    var(--nox-ground) !important;
  background-attachment: fixed;
  color: rgb(var(--gray-200));
}

/* Landing uses Cairo 900 for display headings. */
h1, h2, h3 { color: var(--nox-strong-ink); font-weight: 900; letter-spacing: -0.01em; }
h4, h5, h6 { color: var(--nox-strong-ink); font-weight: 800; }
.text-muted { color: var(--nox-muted-ink) !important; }
.form-text { color: var(--nox-muted-ink); }
code { color: var(--nox-chip-ink); }

table td, table th, .fs-3, .fs-4, .fs-5 { font-variant-numeric: tabular-nums; }

/* Icon spacing fix for RTL: icons precede text, gap belongs inline-END */
.bi.ms-1, .bi.ms-2 {
  margin-inline-start: 0 !important;
  margin-inline-end: 0.45rem;
}

/* ---------- Page header (in-content, mgt style) ---------- */
.nox-breadcrumb {
  font-size: 0.78rem;
  color: var(--nox-muted-ink);
  font-weight: 600;
  margin-bottom: 2px;
}
.nox-breadcrumb .bi { font-size: 0.6rem; margin: 0 6px; }
.nox-page-title {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

/* ---------- Topbar band (glass, matches landing floating bar) ---------- */
.nox-topbar {
  background: color-mix(in srgb, var(--nox-ground) 68%, transparent);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--nox-glass-bd);
  min-height: 58px;
  position: sticky;
  top: 0;
  z-index: 1020;
}
.nox-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--nox-accent) 22%, #1a2334);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0;
}

/* ---------- Cards: gradient, soft border, glass blur ---------- */
.card {
  /* landing .glass — liquid glass: night-ink gradient, cyan edge, spark glow */
  background: var(--nox-glass-grad);
  border: 1px solid var(--nox-glass-bd);
  border-radius: 18px;
  box-shadow: var(--nox-glass-glow);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--nox-accent) 42%, transparent); }
.stat-card:hover, a > .card:hover { transform: translateY(-2px); }
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--nox-border-soft);
  color: var(--nox-strong-ink);
  font-weight: 700;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--nox-border-soft);
  border-bottom-left-radius: 18px !important;
  border-bottom-right-radius: 18px !important;
}

/* KPI stat cards */
.stat-card .fs-4, .stat-card .fs-3, .stat-card .fs-5 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--nox-strong-ink);
}
.stat-card .text-muted.small, .stat-card .small.text-muted {
  font-weight: 600;
  font-size: 0.85rem;
}
.stat-card .icon {
  width: 42px;
  height: 42px;
  font-size: 1.25rem;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, currentColor 13%, transparent);
  opacity: 1;
}

/* ---------- Hero card (revenue) ---------- */
.nox-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 100% 0%, var(--nox-hero-tint), transparent 55%),
    var(--nox-card-grad) !important;
  border-color: color-mix(in srgb, var(--nox-accent) 30%, transparent) !important;
}
.nox-hero-label { color: var(--nox-strong-ink); font-size: 0.95rem; font-weight: 700; }
.nox-hero-value {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 8px;
  color: var(--nox-strong-ink);
  font-variant-numeric: tabular-nums;
}
.nox-hero-cur { font-size: 0.8rem; color: var(--nox-muted-ink); font-weight: 600; margin-inline-start: 6px; }
.nox-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: rgb(var(--gray-500));
  font-size: 0.78rem;
  font-weight: 600;
}
.nox-hero-chip {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--nox-accent-soft);
  color: var(--nox-chip-ink);
  font-size: 1rem;
}
.nox-hero polyline { stroke: var(--nox-hero-line); }
.nox-hero circle { fill: var(--nox-hero-line); }

/* Delta chips */
.nox-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  direction: ltr;
}
.nox-delta.up { color: var(--nox-up-ink); background: var(--nox-up-soft); }
.nox-delta.down { color: var(--nox-down-ink); background: var(--nox-down-soft); }

/* Numbers isolate LTR */
.nox-num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Health card */
.nox-health-big { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.nox-health-big .n { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--nox-strong-ink); }
.nox-health-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--nox-track);
  overflow: hidden;
  display: flex;
  margin-top: 14px;
}
.nox-health-bar i { display: block; height: 100%; }
.nox-health-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--nox-muted-ink);
  font-weight: 600;
}
.nox-health-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-inline-end: 7px; }
.nox-note {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--nox-warn-ink);
  background: var(--nox-warn-soft);
  padding: 9px 12px;
  border-radius: 10px;
  line-height: 1.6;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-weight: 600;
}

/* Status pill (نشطة الآن style) */
.nox-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.nox-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nox-pill.on { color: var(--nox-up-ink); background: var(--nox-up-soft); }
.nox-pill.off { color: var(--nox-warn-ink); background: var(--nox-warn-soft); }
.nox-pill.err { color: var(--nox-down-ink); background: var(--nox-down-soft); }

/* ---------- Sidebar ---------- */
.nox-sidebar {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--nox-grad-from) var(--nox-sidebar-alpha), transparent),
    color-mix(in srgb, var(--nox-grad-to) var(--nox-sidebar-alpha), transparent)
  ) !important;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-inline-end: 1px solid var(--nox-glass-bd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.nox-sidebar .nav-link {
  color: rgb(var(--gray-300));
  border-radius: 10px;
  padding: 0.52rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.nox-sidebar .nav-link .bi { font-size: 1.02rem; color: rgb(var(--gray-400)); }
.nox-sidebar .nav-link:hover { color: var(--nox-strong-ink); background: color-mix(in srgb, var(--nox-accent) 6%, transparent); }
.nox-sidebar .nav-link:hover .bi { color: var(--nox-strong-ink); }
.nox-sidebar .nav-link.active {
  color: var(--nox-hero-line);
  background: var(--nox-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nox-accent) 25%, transparent);
}
.nox-sidebar .nav-link.active .bi { color: var(--nox-hero-line); }

/* Collapsible group header strips (mgt style) */
.nox-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: rgb(var(--gray-200));
  background: color-mix(in srgb, var(--nox-accent) 9%, rgba(20, 29, 46, 0.7));
  border-radius: 10px;
  padding: 7px 13px;
  margin: 0.95rem 0 0.4rem;
  transition: background 0.12s ease;
}
.nox-group-toggle:hover { background: color-mix(in srgb, var(--nox-accent) 14%, rgba(20, 29, 46, 0.7)); }
.nox-group-toggle .bi {
  font-size: 0.72rem;
  color: var(--nox-muted-ink);
  transition: transform 0.15s ease;
}
.nox-group-toggle.collapsed .bi { transform: rotate(180deg); }
.nox-brand { color: var(--nox-strong-ink) !important; }
.nox-brand .bi { color: var(--nox-accent); }

/* NOX Smart brand lockup (mark + wordmark) */
.nox-brand-lockup { display: inline-flex; align-items: center; gap: 0.5rem; }
.nox-brand-mark { display: block; flex: 0 0 auto; }
.nox-brand-word {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--nox-strong-ink);
}

/* ---------- Portal navbar ---------- */
.navbar.bg-white {
  background: var(--nox-card-grad) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nox-border-soft);
}
.navbar .navbar-brand { color: var(--nox-strong-ink); }
.navbar .nav-link { color: rgb(var(--gray-300)); font-weight: 600; }
.navbar .nav-link.active { color: var(--nox-hero-line); }

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: rgb(var(--gray-200));
  --bs-table-border-color: var(--nox-border-soft);
  --bs-table-hover-bg: var(--nox-hover-row);
  --bs-table-hover-color: rgb(var(--gray-100));
  --bs-table-striped-bg: rgba(255, 255, 255, 0.015);
}
.table thead th {
  background: transparent;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: rgb(var(--gray-400));
  font-weight: 700;
  border-bottom: 1px solid var(--nox-border);
  white-space: nowrap;
}
.table > :not(caption) > * > * { padding: 0.66rem 0.75rem; background: transparent; }
.table td { font-size: 0.9rem; }
.table-light, .table .table-light > * {
  --bs-table-bg: color-mix(in srgb, var(--nox-accent) 7%, transparent);
  color: var(--nox-strong-ink);
}
.table-dark, .table .table-dark > * {
  --bs-table-bg: var(--nox-card-2);
  color: var(--nox-strong-ink);
}

/* ---------- Badges: outlined pills (mgt table style) ---------- */
.badge {
  font-weight: 700;
  font-size: 0.72rem;
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: 0;
  border: 1px solid transparent;
}
.badge.text-bg-success { background: rgba(63, 201, 138, 0.08) !important; color: var(--nox-up-ink) !important; border-color: rgba(63, 201, 138, 0.45); }
.badge.text-bg-danger { background: rgba(242, 96, 116, 0.08) !important; color: var(--nox-down-ink) !important; border-color: rgba(242, 96, 116, 0.45); }
.badge.text-bg-warning { background: rgba(240, 178, 76, 0.1) !important; color: var(--nox-warn-ink) !important; border-color: rgba(240, 178, 76, 0.45); }
.badge.text-bg-info { background: color-mix(in srgb, var(--nox-accent) 8%, transparent) !important; color: var(--nox-chip-ink) !important; border-color: color-mix(in srgb, var(--nox-accent) 45%, transparent); }
.badge.text-bg-secondary { background: rgba(140, 153, 170, 0.08) !important; color: rgb(var(--gray-300)) !important; border-color: rgba(140, 153, 170, 0.35); }
.badge.text-bg-light {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgb(var(--gray-300)) !important;
  border-color: var(--nox-border) !important;
}

/* ---------- Buttons (landing style-guide match) ---------- */
/* NOX Smart landing uses 14px radius pills; the primary CTA is cyan with
   dark night-ink text (#06202A) and lifts with a cyan glow on hover. */
.btn {
  border-radius: 14px;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-sm { border-radius: 11px; }
.btn-primary {
  --bs-btn-bg: var(--nox-accent);
  --bs-btn-border-color: var(--nox-accent);
  --bs-btn-hover-bg: #1cb9d1;
  --bs-btn-hover-border-color: #1cb9d1;
  --bs-btn-active-bg: var(--nox-accent-strong);
  --bs-btn-active-border-color: var(--nox-accent-strong);
  --bs-btn-color: #06202a;
  --bs-btn-hover-color: #06202a;
  --bs-btn-active-color: #06202a;
  font-weight: 800;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(34, 211, 238, 0.3); }
.btn-primary:active { transform: none; }
.btn-success {
  --bs-btn-bg: #23a267; --bs-btn-border-color: #23a267;
  --bs-btn-hover-bg: #1e8d59; --bs-btn-hover-border-color: #1e8d59;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-warning {
  --bs-btn-bg: #d9982f; --bs-btn-border-color: #d9982f;
  --bs-btn-hover-bg: #c2871f; --bs-btn-hover-border-color: #c2871f;
  --bs-btn-color: #171207; --bs-btn-hover-color: #171207;
}
.btn-light {
  --bs-btn-bg: rgba(255, 255, 255, 0.06);
  --bs-btn-border-color: transparent;
  --bs-btn-color: rgb(var(--gray-200));
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--nox-strong-ink);
}
.btn-outline-primary {
  --bs-btn-color: var(--nox-hero-line);
  --bs-btn-border-color: color-mix(in srgb, var(--nox-accent) 45%, transparent);
  --bs-btn-hover-bg: var(--nox-accent-soft);
  --bs-btn-hover-border-color: var(--nox-accent);
  --bs-btn-hover-color: var(--nox-hero-line);
  --bs-btn-active-bg: var(--nox-accent);
  --bs-btn-active-border-color: var(--nox-accent);
}
.btn-outline-secondary {
  --bs-btn-color: rgb(var(--gray-300));
  --bs-btn-border-color: var(--nox-border);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-btn-hover-border-color: var(--nox-border);
  --bs-btn-hover-color: var(--nox-strong-ink);
  --bs-btn-active-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-active-border-color: var(--nox-border);
}
.btn-outline-success {
  --bs-btn-color: var(--nox-up-ink);
  --bs-btn-border-color: rgba(63, 201, 138, 0.4);
  --bs-btn-hover-bg: var(--nox-up-soft);
  --bs-btn-hover-border-color: var(--nox-up);
  --bs-btn-hover-color: var(--nox-up-ink);
}
.btn-outline-danger {
  --bs-btn-color: var(--nox-down-ink);
  --bs-btn-border-color: rgba(242, 96, 116, 0.4);
  --bs-btn-hover-bg: var(--nox-down-soft);
  --bs-btn-hover-border-color: var(--nox-down);
  --bs-btn-hover-color: var(--nox-down-ink);
}
.btn-outline-warning {
  --bs-btn-color: var(--nox-warn-ink);
  --bs-btn-border-color: rgba(240, 178, 76, 0.4);
  --bs-btn-hover-bg: var(--nox-warn-soft);
  --bs-btn-hover-border-color: var(--nox-warn-ink);
  --bs-btn-hover-color: var(--nox-warn-ink);
}
.btn-outline-info {
  --bs-btn-color: var(--nox-chip-ink);
  --bs-btn-border-color: color-mix(in srgb, var(--nox-accent) 40%, transparent);
  --bs-btn-hover-bg: var(--nox-accent-soft);
  --bs-btn-hover-border-color: var(--nox-chip-ink);
  --bs-btn-hover-color: var(--nox-chip-ink);
}
.btn-outline-dark {
  --bs-btn-color: rgb(var(--gray-300));
  --bs-btn-border-color: var(--nox-border);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-btn-hover-border-color: var(--nox-border);
  --bs-btn-hover-color: var(--nox-strong-ink);
}

/* ---------- Forms ---------- */
.form-control, .form-select {
  background-color: var(--nox-input-bg);
  border-color: var(--nox-border);
  color: rgb(var(--gray-100));
  border-radius: 12px;
}
.form-control:focus, .form-select:focus {
  background-color: var(--nox-input-bg);
  border-color: var(--nox-accent);
  color: rgb(var(--gray-100));
  box-shadow: 0 0 0 0.2rem var(--nox-accent-soft);
}
.form-control::placeholder { color: rgb(var(--gray-500)); }
.form-control:disabled, .form-control[readonly] {
  background-color: rgba(18, 28, 41, 0.6);
  color: var(--nox-muted-ink);
}
.form-check-input { background-color: var(--nox-input-bg); border-color: var(--nox-border); }
.form-check-input:checked { background-color: var(--nox-accent); border-color: var(--nox-accent); }
.input-group-text { background: rgba(18, 28, 41, 0.7); border-color: var(--nox-border); color: var(--nox-muted-ink); }
.form-label { font-weight: 600; color: rgb(var(--gray-300)); }
input[type="color"].form-control { padding: 4px; height: 38px; }

/* ---------- Alerts (soft fills) ---------- */
.alert { border-radius: 12px; border: 1px solid transparent; font-weight: 600; }
.alert-success { background: var(--nox-up-soft); color: var(--nox-up-ink); border-color: rgba(63, 201, 138, 0.25); }
.alert-danger { background: var(--nox-down-soft); color: var(--nox-down-ink); border-color: rgba(242, 96, 116, 0.25); }
.alert-warning { background: var(--nox-warn-soft); color: var(--nox-warn-ink); border-color: rgba(240, 178, 76, 0.25); }
.alert-info { background: var(--nox-accent-soft); color: var(--nox-chip-ink); border-color: color-mix(in srgb, var(--nox-accent) 25%, transparent); }
.alert-light { background: rgba(255, 255, 255, 0.03); color: rgb(var(--gray-300)); border-color: var(--nox-border-soft); }
.alert .btn-close { filter: invert(1) grayscale(100%); }

/* ---------- Tabs: pill style (mgt settings tabs) ---------- */
.nav-tabs { border-bottom: 0; gap: 6px; margin-bottom: 1rem !important; }
.nav-tabs .nav-link {
  color: var(--nox-muted-ink);
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid transparent;
  border-radius: 10px;
}
.nav-tabs .nav-link:hover {
  color: var(--nox-strong-ink);
  border-color: transparent;
  background: color-mix(in srgb, var(--nox-accent) 6%, transparent);
}
.nav-tabs .nav-link.active {
  color: var(--nox-hero-line);
  background: var(--nox-accent-soft);
  border-color: color-mix(in srgb, var(--nox-accent) 25%, transparent);
}

/* ---------- Dropdowns / modals ---------- */
.dropdown-menu {
  background: #131d2b;
  border: 1px solid var(--nox-border);
  border-radius: 12px;
  --bs-dropdown-link-color: rgb(var(--gray-200));
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--nox-accent) 10%, transparent);
  --bs-dropdown-link-hover-color: var(--nox-strong-ink);
}
.dropdown-divider { border-color: var(--nox-border-soft); }
.modal-content {
  background: linear-gradient(180deg, #16222f, #121c29);
  border: 1px solid var(--nox-border);
  border-radius: 16px;
}
.modal-header, .modal-footer { border-color: var(--nox-border-soft); }
/* Softer, tinted backdrop so the page reads through instead of going black. */
.modal-backdrop { --bs-backdrop-bg: #0a0c22; }
.modal-backdrop.show { opacity: 0.55; }
.btn-close { filter: invert(1) grayscale(100%) brightness(1.4); }

/* ---------- Pagination ---------- */
.pagination {
  --bs-pagination-bg: transparent;
  --bs-pagination-color: rgb(var(--gray-300));
  --bs-pagination-border-color: var(--nox-border-soft);
  --bs-pagination-hover-bg: color-mix(in srgb, var(--nox-accent) 8%, transparent);
  --bs-pagination-hover-color: var(--nox-strong-ink);
  --bs-pagination-hover-border-color: var(--nox-border);
  --bs-pagination-focus-bg: color-mix(in srgb, var(--nox-accent) 8%, transparent);
  --bs-pagination-focus-color: var(--nox-strong-ink);
  --bs-pagination-active-bg: var(--nox-accent);
  --bs-pagination-active-border-color: var(--nox-accent);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-color: rgb(var(--gray-600));
  --bs-pagination-disabled-border-color: var(--nox-border-soft);
}

/* ---------- List groups ---------- */
.list-group-item { background: #131d2b; border-color: var(--nox-border-soft); color: rgb(var(--gray-200)); }
.list-group-item-action:hover { background: color-mix(in srgb, var(--nox-accent) 8%, transparent); color: var(--nox-strong-ink); }
.list-group-flush .list-group-item { background: transparent; }

/* ---------- Progress ---------- */
.progress { background: var(--nox-track); border-radius: 999px; }
.progress-bar { background-color: var(--nox-accent); font-weight: 700; }

/* ---------- Misc surfaces ---------- */
.bg-light, .bg-white { background: rgba(18, 28, 41, 0.55) !important; color: rgb(var(--gray-200)); }
.border, .border-bottom, .border-top { border-color: var(--nox-border-soft) !important; }
.bg-warning.text-dark {
  background: var(--nox-warn-soft) !important;
  color: var(--nox-warn-ink) !important;
  border-bottom: 1px solid rgba(240, 178, 76, 0.3);
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--nox-scroll-thumb);
  border-radius: 999px;
  border: 2px solid var(--nox-ground);
}
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Auth (guest) card ---------- */
.nox-auth-ground {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(900px 460px at 80% -10%, color-mix(in srgb, var(--nox-accent) 16%, transparent), transparent 60%),
    radial-gradient(700px 420px at 0% 110%, color-mix(in srgb, var(--nox-accent) 8%, transparent), transparent 55%),
    var(--nox-brand-grad);
}

/* ---------- Boxed content container (mgt style) ---------- */
.nox-container { max-width: 1220px; margin-inline: auto; }

/* ---------- Section cards (settings style) ---------- */
.nox-section-head { padding: 1.1rem 1.25rem 0.4rem; }
.nox-section-head h6 { margin-bottom: 2px; font-weight: 800; }
.nox-section-head .small { color: var(--nox-muted-ink); }

/* ---------- Report preset buttons ---------- */
.nox-presets .btn { font-size: 0.78rem; padding: 4px 12px; }

/* ---------- Timeline summary strip ---------- */
.nox-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.nox-strip .cell {
  border: 1px solid var(--nox-border-soft);
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.015);
}
.nox-strip .cell .k { font-size: 0.75rem; color: var(--nox-muted-ink); font-weight: 700; }
.nox-strip .cell .v { font-size: 1.05rem; font-weight: 800; color: var(--nox-strong-ink); font-variant-numeric: tabular-nums; direction: ltr; }
.nox-strip .cell.hi .v { color: var(--nox-hero-line); }

/* ================================================================
   Portal polish pass — empty states, list rows, mobile data cards
   ================================================================ */

/* Friendly empty state (x-portal.empty) */
.nox-empty { padding: 2.5rem 1rem; }
.nox-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 1.5rem;
  margin-bottom: 0.85rem;
  color: var(--nox-chip-ink);
  background: color-mix(in srgb, var(--nox-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nox-accent) 22%, transparent);
}
.nox-empty-title { font-weight: 700; color: var(--nox-strong-ink); }

/* Dashboard / card list rows */
.nox-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.15rem;
  border-bottom: 1px solid var(--nox-border-soft);
}
.card-body > .nox-list-row:first-child { padding-top: 0.15rem; }
.nox-list-row:last-child { border-bottom: 0; padding-bottom: 0.15rem; }
.nox-list-row .title { font-weight: 600; color: var(--nox-strong-ink); }
a.nox-list-row { transition: background 0.15s ease; border-radius: 10px; }
a.nox-list-row:hover { background: color-mix(in srgb, var(--nox-accent) 6%, transparent); }
a.nox-list-row .title { color: var(--nox-strong-ink); }

/* Mobile stacked cards for data tables (paired with a d-md-none wrapper) */
.nox-mobile-list { display: flex; flex-direction: column; gap: 0.7rem; }
.nox-mobile-card {
  border: 1px solid var(--nox-border-soft);
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
  background: color-mix(in srgb, var(--nox-card) 35%, transparent);
}
.nox-mobile-card .mc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.nox-mobile-card .mc-title { font-weight: 700; color: var(--nox-strong-ink); }
.nox-mc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 3px 0;
  font-size: 0.85rem;
}
.nox-mc-row .k { color: var(--nox-muted-ink); }
.nox-mc-row .v { color: var(--nox-strong-ink); font-weight: 600; }

/* Service detail key/value tables */
.nox-kv th { color: var(--nox-muted-ink); font-weight: 600; }
.nox-kv td { color: var(--nox-strong-ink); }
.w-40 { width: 40%; }

/* Access information rows */
.nox-access-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--nox-border-soft);
}
.nox-access-row:last-child { border-bottom: 0; }
.nox-access-row .k { color: var(--nox-muted-ink); font-size: 0.85rem; }
.nox-access-row .v { color: var(--nox-strong-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }

/* Copy button */
.nox-copy {
  border: 1px solid var(--nox-border-soft);
  background: transparent;
  color: var(--nox-muted-ink);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  font-size: 0.8rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nox-copy:hover { color: var(--nox-strong-ink); border-color: var(--nox-border); }
.nox-copy.ok { color: var(--nox-up-ink); border-color: rgba(63, 201, 138, 0.45); }

/* Dashboard greeting tip callout */
.nox-tip {
  background: color-mix(in srgb, var(--nox-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--nox-accent) 22%, transparent);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  color: var(--nox-chip-ink);
}

/* ================================================================
   LANDING PARITY — starfield ambiance, reveal-on-scroll, glass polish
   Makes the client portal read as one continuous world with the public
   NOX Smart landing page (base.css / lux.css / sections.css).
   ================================================================ */

/* Fixed animated starfield behind all portal content (echoes hero .sky).
   Injected once in layouts/portal.blade.php. pointer-events:none, sits
   under the content layer so cards/sidebar glass float above it. */
.nox-sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  --orbit: color-mix(in srgb, var(--nox-accent) 14%, transparent);
  --star: rgb(var(--gray-200));
}
.nox-sky .orb circle { fill: none; stroke: var(--orbit); stroke-width: 1.5; }
.nox-sky .o2 circle { stroke-dasharray: 3 11; }
.nox-sky .orb { transform-origin: 720px 90px; animation: nox-spin 95s linear infinite; }
.nox-sky .o2 { animation-duration: 160s; animation-direction: reverse; }
.nox-sky .sat { fill: var(--nox-accent); opacity: 0.9; }
.nox-sky .s2 { opacity: 0.55; }
.nox-sky .tw { fill: var(--star); opacity: 0.2; animation: nox-tw 4s ease-in-out infinite; }
.nox-sky .sp { fill: var(--nox-accent); transform-box: fill-box; transform-origin: center; animation: nox-spk 3.2s ease-in-out infinite; }
@keyframes nox-spin { to { transform: rotate(360deg); } }
@keyframes nox-tw { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.6; } }
@keyframes nox-spk { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 0.9; transform: scale(1.12); } }

/* Content must float above the starfield. */
.nox-app-shell { position: relative; z-index: 1; }

/* Reveal-on-scroll: JS tags main .card elements with .nox-reveal and adds
   .in when they enter the viewport (matches landing .reveal fade-up). */
@media (prefers-reduced-motion: no-preference) {
  .nox-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .nox-reveal.in { opacity: 1; transform: none; }
}

/* Hover glint sweep on stat cards + interactive cards (landing .glint).
   Only applied where cards don't host escaping popovers/dropdowns. */
.stat-card, .nox-hero, a > .card {
  position: relative;
  overflow: hidden;
}
.stat-card::after, .nox-hero::after, a > .card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.08) 50%, transparent 58%);
  transform: translateX(130%);
  pointer-events: none;
  transition: transform 0s;
}
.stat-card:hover::after, .nox-hero:hover::after, a > .card:hover::after {
  transition: transform 0.8s ease;
  transform: translateX(-130%);
}

/* Primary CTA glow + dark-ink already set above; give the wordmark the
   landing's heavy Cairo weight. */
.nox-brand-word { font-weight: 900; letter-spacing: -0.01em; }

/* Buttons: match the landing's springy hover on the filled success/CTA. */
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(35, 162, 103, 0.28); }
.btn-success:active { transform: none; }

/* Nav pills: active state gets the cyan glass ring + a subtle diamond, like
   the landing's accent markers. */
.nox-sidebar .nav-link.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nox-accent) 32%, transparent);
}

/* Section eyebrow + page title flourish (landing .eyebrow / diamond tick). */
.nox-page-title { position: relative; }

/* Modals & dropdowns: adopt the same liquid-glass as cards for continuity. */
.dropdown-menu {
  /* Opaque ground under the glass tint so page content behind never bleeds
     through the menu (the glass gradient alone is see-through). */
  background: var(--nox-glass-grad), var(--nox-ground);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--nox-glass-bd);
  box-shadow: var(--nox-glass-glow), 0 18px 44px rgba(0, 0, 0, 0.4);
}
.modal-content {
  background: var(--nox-glass-grad);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--nox-glass-bd);
  box-shadow: var(--nox-glass-glow), 0 30px 80px rgba(0, 0, 0, 0.5);
}

/* List-group + inner surfaces pick up the glass tint too. */
.list-group-item { background: color-mix(in srgb, var(--nox-ink) 40%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .nox-sky .orb, .nox-sky .tw, .nox-sky .sp { animation: none; }
  .stat-card::after, .nox-hero::after, a > .card::after { display: none; }
  .btn-primary:hover, .btn-success:hover { transform: none; box-shadow: none; }
}

/* ================================================================
   NEW PORTAL SHELL v5 — landing-matched dashboard chrome.
   Fully nx--namespaced so nothing collides with Bootstrap content.
   Right-hand glass sidebar, glass topbar, dashboard components.
   ================================================================ */
.nx-shell{position:relative;z-index:1;display:grid;grid-template-columns:290px 1fr;gap:20px;padding:20px;max-width:1560px;margin:0 auto}

/* ---- sidebar (right in RTL) ---- */
.nx-side{grid-column:1;grid-row:1;position:sticky;top:20px;height:calc(100vh - 40px);border-radius:26px;
  background:var(--nox-glass-grad);backdrop-filter:blur(34px);-webkit-backdrop-filter:blur(34px);
  border:1px solid var(--nox-glass-bd);box-shadow:var(--nox-glass-glow),0 30px 60px rgba(0,0,0,.35);
  padding:20px 14px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.nx-side::before{content:"";position:absolute;top:0;inset-inline:0;height:140px;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0,color-mix(in srgb,var(--nox-accent) 13%,transparent),transparent 70%)}
.nx-brand{display:flex;align-items:center;gap:11px;padding:4px 6px 12px;position:relative}
.nx-brand .mk{width:42px;height:42px;border-radius:13px;background:var(--nox-brand-grad);
  display:grid;place-items:center;box-shadow:0 0 0 1px color-mix(in srgb,var(--nox-accent) 30%,transparent),0 8px 20px rgba(42,47,143,.5);flex-shrink:0}
.nx-brand .mk img{width:25px;height:25px;display:block}
.nx-brand .wm img{height:19px;width:auto;display:block;max-width:150px}
.nx-brand .wm small{display:block;font-size:9px;color:var(--nox-muted-ink);font-weight:700;letter-spacing:.2em;margin-top:5px}
.nx-side-search{display:flex;align-items:center;gap:8px;width:100%;text-align:start;background:color-mix(in srgb,var(--nox-ground) 45%,transparent);
  border:1px solid var(--nox-border-soft);border-radius:13px;padding:10px 13px;color:var(--nox-muted-ink);font-size:12.5px;margin:2px 3px 6px}
.nx-side-search .bi{font-size:14px}
.nx-side-search kbd{margin-inline-start:auto;font-size:10px;background:rgba(255,255,255,.06);border-radius:5px;padding:2px 6px;color:var(--nox-muted-ink)}
.nx-nav{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-inline:2px;scrollbar-width:thin}
.nx-navgrp{font-size:10.5px;font-weight:800;letter-spacing:.09em;color:var(--nox-chip-ink);
  display:flex;align-items:center;gap:7px;
  padding:8px 12px;margin:13px 2px 6px;border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--nox-accent) 13%,transparent),color-mix(in srgb,var(--nox-ground) 25%,transparent));
  border:1px solid var(--nox-glass-bd);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nx-navgrp:first-of-type{margin-top:2px}
.nx-navitem{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:13px;color:var(--nox-muted-ink);
  font-weight:600;font-size:13.5px;position:relative;text-decoration:none;transition:.16s}
.nx-navitem .bi{width:20px;font-size:17px;text-align:center;color:rgb(var(--gray-400));flex-shrink:0;transition:.16s}
.nx-navitem:hover{color:var(--nox-strong-ink);background:color-mix(in srgb,var(--nox-accent) 6%,transparent)}
.nx-navitem:hover .bi{color:var(--nox-strong-ink)}
.nx-navitem .nx-bdg{margin-inline-start:auto;font-size:10.5px;font-weight:800;padding:1px 8px;border-radius:99px;
  background:var(--nox-down-soft);color:var(--nox-down-ink)}
.nx-navitem .nx-bdg.cy{background:var(--nox-accent-soft);color:var(--nox-chip-ink)}
.nx-navitem.active{color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--nox-accent) 20%,transparent),color-mix(in srgb,var(--nox-accent) 4%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nox-accent) 28%,transparent),0 6px 18px color-mix(in srgb,var(--nox-accent) 10%,transparent)}
.nx-navitem.active .bi{color:var(--nox-accent)}
.nx-navitem.active::before{content:"";position:absolute;inset-inline-start:-14px;top:50%;transform:translateY(-50%);
  width:4px;height:24px;border-radius:99px;background:linear-gradient(var(--nox-accent),#7fe9f5);box-shadow:0 0 16px var(--nox-accent)}
.nx-plan{margin-top:8px;border-radius:18px;padding:12px;display:flex;align-items:center;gap:11px;text-decoration:none;
  background:linear-gradient(155deg,color-mix(in srgb,var(--nox-grad-from) 45%,transparent),color-mix(in srgb,var(--nox-ground) 35%,transparent));
  border:1px solid var(--nox-glass-bd)}
.nx-plan .nx-av{width:38px;height:38px;border-radius:11px;background:var(--nox-brand-grad);display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;flex-shrink:0}
.nx-plan .nx-nm{font-weight:800;color:#fff;font-size:12.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.nx-plan .nx-pl{font-size:10.5px;color:var(--nox-chip-ink);font-weight:700}

/* ---- main + topbar ---- */
.nx-main{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:20px;min-width:0}
.nx-topbar{display:flex;align-items:center;gap:12px;border-radius:20px;padding:11px 16px;position:relative;z-index:1030;
  background:var(--nox-glass-grad);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border:1px solid var(--nox-glass-bd);box-shadow:var(--nox-glass-glow)}
.nx-crumb{font-size:11px;color:var(--nox-muted-ink);font-weight:700}
.nx-crumb b{color:rgb(var(--gray-300))}
.nx-topbar h1{font-size:15px;line-height:1.2;margin:1px 0 0;font-weight:800}
.nx-tools{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.nx-wallet{display:flex;align-items:center;gap:8px;background:var(--nox-accent-soft);border:1px solid color-mix(in srgb,var(--nox-accent) 30%,transparent);
  border-radius:13px;padding:8px 14px;color:var(--nox-chip-ink);font-weight:800;font-size:13px;text-decoration:none}
.nx-wallet .nx-num{direction:ltr}
.nx-tbtn{width:40px;height:40px;border-radius:13px;background:color-mix(in srgb,var(--nox-ground) 40%,transparent);border:1px solid var(--nox-border-soft);
  display:grid;place-items:center;color:var(--nox-muted-ink);position:relative;transition:.16s;text-decoration:none;font-size:17px}
.nx-tbtn:hover{color:#fff;border-color:var(--nox-glass-bd)}
.nx-tbtn .nx-dot{position:absolute;top:7px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;background:var(--nox-down);box-shadow:0 0 8px var(--nox-down);border:1.5px solid var(--nox-ground)}
.nx-avatar-btn{border:0;padding:0;background:none}

/* mobile: sidebar becomes an off-canvas drawer */
.nx-sky-svg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.6;--orbit:color-mix(in srgb,var(--nox-accent) 14%,transparent);--star:rgb(var(--gray-200))}
.nx-sky-svg .orb circle{fill:none;stroke:var(--orbit);stroke-width:1.4}
.nx-sky-svg .o2 circle{stroke-dasharray:3 11}
.nx-sky-svg .orb{transform-origin:720px 96px;animation:nx-skyspin 120s linear infinite}
.nx-sky-svg .o2{animation-duration:180s;animation-direction:reverse}
.nx-sky-svg .sat{fill:var(--nox-accent)}
.nx-sky-svg .tw{fill:var(--star);animation:nx-twinkle 5s ease-in-out infinite}
@keyframes nx-skyspin{to{transform:rotate(360deg)}}
@keyframes nx-twinkle{0%,100%{opacity:.12}50%{opacity:.6}}
@media (max-width:991px){
  .nx-shell{grid-template-columns:1fr;padding:14px}
  .nx-side{position:fixed;top:0;bottom:0;inset-inline-end:0;height:100vh;border-radius:0;z-index:1045;transform:translateX(100%);transition:transform .22s;width:290px}
  [dir="rtl"] .nx-side{transform:translateX(-100%)}
  .nx-side.show{transform:none !important}
  .nx-main{grid-column:1}
}
@media (min-width:992px){ .nx-menu-btn{display:none} }

/* ================= DASHBOARD ================= */
.nx-eyebrow{display:flex;align-items:center;gap:10px;color:var(--nox-chip-ink);font-weight:800;font-size:12px;margin:0}
.nx-tick{width:24px;height:4px;border-radius:3px;background:var(--nox-accent);display:inline-block;flex-shrink:0}
.nx-dash-hero{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:center;padding:26px 28px;border-radius:22px;overflow:hidden;position:relative;
  background:radial-gradient(130% 130% at 100% 0,color-mix(in srgb,var(--nox-accent) 14%,transparent),transparent 52%),var(--nox-glass-grad);
  border:1px solid color-mix(in srgb,var(--nox-accent) 26%,transparent);backdrop-filter:blur(30px);box-shadow:var(--nox-glass-glow)}
.nx-dash-hero h1{font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.5px;margin:12px 0 8px;font-weight:900}
.nx-dash-hero .lead{color:var(--nox-muted-ink);font-size:14px;max-width:420px;line-height:1.7}
.nx-dlist{list-style:none;display:grid;gap:9px;margin:16px 0 0;padding:0}
.nx-dlist li{position:relative;padding-inline-start:20px;color:rgb(var(--gray-200));font-size:13.5px}
.nx-dlist li::before{content:"";position:absolute;top:8px;inset-inline-start:0;width:8px;height:8px;background:var(--nox-accent);transform:rotate(45deg);border-radius:2px}
.nx-hero-acts{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.nx-ctax{display:inline-flex;align-items:center;gap:12px;background:var(--nox-accent);color:#06202a;font-weight:900;font-size:14px;
  padding:8px 8px 8px 22px;padding-inline-start:22px;border-radius:15px;box-shadow:0 0 22px color-mix(in srgb,var(--nox-accent) 32%,transparent);text-decoration:none;transition:.2s}
.nx-ctax:hover{transform:scale(1.02);color:#06202a}
.nx-ctax .nx-cbead{width:32px;height:32px;border-radius:50%;background:var(--nox-ground);display:grid;place-items:center;color:var(--nox-accent);font-size:15px}
.nx-ghostlink{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;color:var(--nox-muted-ink);text-decoration:none;transition:.2s}
.nx-ghostlink:hover{color:var(--nox-strong-ink)}

/* hero core visual */
.nx-corebox{position:relative;display:flex;align-items:center;justify-content:center;min-height:280px}
.nx-core-wrap{position:relative;width:min(100%,210px);aspect-ratio:1;display:grid;place-items:center}
.nx-core-glow{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--nox-accent) 28%,transparent),transparent 62%);animation:nx-breath 4.5s ease-in-out infinite}
.nx-core-rings{position:absolute;inset:0;width:100%;height:100%}
.nx-cr circle{fill:none;stroke:var(--nox-glass-bd);stroke-width:1.4}
.nx-c2 circle{stroke-dasharray:4 10}
.nx-cr{transform-origin:230px 230px;animation:nx-skyspin 60s linear infinite}
.nx-c2{animation-duration:40s;animation-direction:reverse}
.nx-csat{fill:var(--nox-accent)}.nx-csat.s2{opacity:.6}
.nx-monolith{position:relative;width:124px;height:190px;border-radius:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:11px;padding:16px 14px 18px;
  background:var(--nox-glass-grad);border:1px solid var(--nox-glass-bd);backdrop-filter:blur(24px)}
.nx-slot{height:26px;border-radius:10px;background:color-mix(in srgb,var(--nox-ground) 50%,transparent);border:1px solid color-mix(in srgb,var(--nox-accent) 14%,transparent);display:flex;align-items:center;gap:8px;padding:0 12px}
.nx-led{width:7px;height:7px;border-radius:50%;background:var(--nox-accent);animation:nx-blink 1.8s ease-in-out infinite}
.nx-led.d2{animation-delay:.6s}.nx-led.d3{animation-delay:1.2s}
.nx-cspark{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:32px;height:32px;fill:var(--nox-accent);filter:drop-shadow(0 0 12px color-mix(in srgb,var(--nox-accent) 70%,transparent));animation:nx-sparkp 3.2s ease-in-out infinite}
.nx-fbadge{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;z-index:3;
  background:var(--nox-glass-grad);border:1px solid var(--nox-glass-bd);backdrop-filter:blur(24px);box-shadow:var(--nox-glass-glow)}
.nx-fbadge b{display:block;color:var(--nox-strong-ink);font-size:12px;font-weight:900}
.nx-fbadge i{display:block;font-style:normal;color:var(--nox-chip-ink);font-size:10px;font-weight:700;margin-top:2px}
.nx-ibead{width:30px;height:30px;border-radius:9px;background:var(--nox-accent-soft);display:grid;place-items:center;flex-shrink:0;color:var(--nox-accent);font-size:15px}
.nx-fb1{top:2%;inset-inline-start:-4px;animation:nx-floaty 5s ease-in-out infinite}
.nx-fb2{bottom:4%;inset-inline-end:-8px;animation:nx-floatyr 5.5s ease-in-out infinite}
.nx-fb3{top:46%;inset-inline-start:-12px;animation:nx-floaty 4.8s ease-in-out .8s infinite}
@keyframes nx-breath{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes nx-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes nx-sparkp{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.18)}}
@keyframes nx-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes nx-floatyr{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* stat cards */
.nx-statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nx-statcard{border-radius:18px;padding:18px;position:relative;overflow:hidden;transition:.22s;min-height:156px;display:flex;flex-direction:column;
  background:var(--nox-glass-grad);border:1px solid var(--nox-glass-bd);box-shadow:var(--nox-glass-glow);backdrop-filter:blur(24px);text-decoration:none}
.nx-statcard::after{content:"";position:absolute;top:0;inset-inline:0;height:2px;background:linear-gradient(90deg,transparent,var(--nox-accent),transparent);opacity:.5}
.nx-statcard:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--nox-accent) 55%,transparent)}
.nx-statcard .nx-sc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.nx-statcard .nx-sc-bead{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--nox-accent-soft);color:var(--nox-accent);border:1px solid color-mix(in srgb,var(--nox-accent) 20%,transparent);font-size:20px}
.nx-statcard .nx-sc-delta{font-size:11px;font-weight:800;padding:4px 10px;border-radius:99px;direction:ltr}
.nx-sc-delta.u{color:var(--nox-up-ink);background:var(--nox-up-soft)}
.nx-sc-delta.d{color:var(--nox-warn-ink);background:var(--nox-warn-soft)}
.nx-statcard .nx-sc-n{font-size:30px;font-weight:900;color:var(--nox-strong-ink);letter-spacing:-.02em;direction:ltr;line-height:1}
.nx-statcard .nx-sc-k{color:var(--nox-muted-ink);font-size:12.5px;font-weight:600;margin-top:4px}
.nx-statcard .nx-spark{height:28px;margin-top:auto;width:100%}

/* chart + panels */
.nx-chartrow{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}
.nx-cols{display:grid;grid-template-columns:1.55fr 1fr;gap:20px}
.nx-panel{border-radius:20px;overflow:hidden;background:var(--nox-glass-grad);border:1px solid var(--nox-glass-bd);box-shadow:var(--nox-glass-glow);backdrop-filter:blur(24px)}
.nx-panel-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--nox-border-soft)}
.nx-panel-h b{font-weight:800;color:var(--nox-strong-ink);font-size:14.5px;display:flex;align-items:center;gap:10px}
.nx-panel-h a{color:var(--nox-chip-ink);font-size:12px;font-weight:700;text-decoration:none}
.nx-chart{padding:20px 22px}
.nx-chart .nx-chart-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.nx-chart .nx-chart-h b{font-weight:800;color:var(--nox-strong-ink);font-size:14px;display:flex;align-items:center;gap:9px}
.nx-chart .nx-chart-big{font-size:22px;font-weight:900;color:#fff;direction:ltr}
.nx-chart .nx-chart-big small{font-size:11px;color:var(--nox-up-ink);font-weight:800;margin-inline-start:6px}
.nx-dtable{width:100%;border-collapse:collapse}
.nx-dtable th{text-align:start;font-size:10.5px;color:var(--nox-muted-ink);font-weight:800;letter-spacing:.04em;padding:11px 20px}
.nx-dtable td{padding:12px 20px;border-top:1px solid var(--nox-border-soft);font-size:13px;color:rgb(var(--gray-200))}
.nx-dtable tr:hover td{background:color-mix(in srgb,var(--nox-accent) 3%,transparent)}
.nx-srv{padding:13px 20px;border-top:1px solid var(--nox-border-soft);display:flex;align-items:center;gap:12px}
.nx-srv:first-of-type{border-top:0}
.nx-srv .nx-si{width:38px;height:38px;border-radius:11px;background:var(--nox-accent-soft);display:grid;place-items:center;color:var(--nox-accent);flex-shrink:0;border:1px solid color-mix(in srgb,var(--nox-accent) 18%,transparent);font-size:17px}
.nx-srv .nx-srv-nm{font-weight:700;color:#fff;font-size:13px}
.nx-srv .nx-srv-mt{color:var(--nox-muted-ink);font-size:11.5px;direction:ltr}
.nx-srv .nx-srv-st{margin-inline-start:auto;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--nox-up-ink)}
.nx-srv .nx-srv-st i{width:7px;height:7px;border-radius:50%;background:var(--nox-up);box-shadow:0 0 8px var(--nox-up)}
.nx-meter{padding:18px 20px}
.nx-meter .nx-mr{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:8px}
.nx-meter .nx-mr b{color:#fff;font-weight:800;direction:ltr}
.nx-meter .nx-mr span{color:var(--nox-muted-ink)}
.nx-mbar{height:9px;border-radius:99px;background:var(--nox-track);overflow:hidden;margin-bottom:16px}
.nx-mbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--nox-accent),#7fe9f5)}
.nx-renew{border-radius:20px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--nox-grad-from),var(--nox-grad-to));border:1px solid color-mix(in srgb,var(--nox-accent) 40%,transparent)}
.nx-renew .nx-badge{position:absolute;top:-1px;inset-inline-start:20px;background:var(--nox-accent);color:#06202a;font-weight:800;font-size:11.5px;padding:4px 13px;border-radius:0 0 10px 10px}
.nx-renew .nx-ring{position:relative;width:120px;height:120px;margin:14px 0 4px}
.nx-renew .nx-ring .nx-ring-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.nx-renew .nx-ring-c b{font-size:28px;font-weight:900;color:#fff;direction:ltr;line-height:1}
.nx-renew .nx-ring-c small{font-size:10.5px;color:#B9C0E6;font-weight:700}
.nx-renew h4{color:#fff;font-size:14px;font-weight:800;margin:2px 0 0}
.nx-renew p{color:#B9C0E6;font-size:12px;margin-bottom:6px}
@media (max-width:1100px){.nx-statgrid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.nx-dash-hero,.nx-chartrow,.nx-cols{grid-template-columns:1fr}.nx-corebox{min-height:220px}}

/* ================= PORTAL SHELL — punch-list fixes ================= */
/* Consistent vertical rhythm between content blocks (dashboard + pages). */
.nx-content { display: flex; flex-direction: column; gap: 20px; padding-bottom: 8px; }

/* Sidebar nav scrollbar — thin, on-brand (was the default chunky bar). */
.nx-nav { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--nox-accent) 35%, transparent) transparent; }
.nx-nav::-webkit-scrollbar { width: 5px; }
.nx-nav::-webkit-scrollbar-track { background: transparent; }
.nx-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--nox-accent) 28%, transparent); border-radius: 99px; border: 0; }
.nx-nav::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--nox-accent) 50%, transparent); }

/* Encouraging empty/upsell card (shown instead of dummy usage bars). */
.nx-upsell { border-radius: 20px; padding: 24px 20px; text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0, color-mix(in srgb, var(--nox-accent) 12%, transparent), transparent 60%), var(--nox-glass-grad);
  border: 1px solid var(--nox-glass-bd); box-shadow: var(--nox-glass-glow); backdrop-filter: blur(24px); }
.nx-upsell .nx-up-ic { width: 54px; height: 54px; border-radius: 16px; display: inline-grid; place-items: center; font-size: 26px;
  color: var(--nox-accent); background: var(--nox-accent-soft); border: 1px solid color-mix(in srgb, var(--nox-accent) 25%, transparent); margin-bottom: 12px; }
.nx-upsell h4 { color: var(--nox-strong-ink); font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.nx-upsell p { color: var(--nox-muted-ink); font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; }

/* Usage card skeleton + rows (real WHM data, loaded async). */
.nx-usage-skel .nx-mbar i { width: 40%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nox-accent) 30%, transparent), transparent); background-size: 200% 100%; animation: nx-shimmer 1.2s linear infinite; }
@keyframes nx-shimmer { to { background-position: -200% 0; } }

/* ---- Statement (كشف الحساب) — clean financial ledger ---- */
.nx-statement { border-radius: 20px; overflow: hidden; background: var(--nox-glass-grad); border: 1px solid var(--nox-glass-bd); box-shadow: var(--nox-glass-glow); backdrop-filter: blur(24px); }
.nx-statement table { width: 100%; border-collapse: collapse; margin: 0; }
.nx-statement thead th { text-align: start; font-size: 11px; letter-spacing: .03em; color: var(--nox-muted-ink); font-weight: 800; padding: 13px 18px; border-bottom: 1px solid var(--nox-border); white-space: nowrap; background: color-mix(in srgb, var(--nox-accent) 4%, transparent); }
.nx-statement tbody td { padding: 12px 18px; border-top: 1px solid var(--nox-border-soft); font-size: 13px; color: rgb(var(--gray-200)); vertical-align: middle; }
.nx-statement tbody tr:hover td { background: color-mix(in srgb, var(--nox-accent) 3%, transparent); }
.nx-statement .st-num { direction: ltr; unicode-bidi: isolate; text-align: start; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; min-width: 96px; }
.nx-statement .st-debit { color: var(--nox-warn-ink); }
.nx-statement .st-credit { color: var(--nox-up-ink); }
.nx-statement .st-bal { color: var(--nox-strong-ink); font-weight: 800; }
.nx-statement .st-open td, .nx-statement tfoot td { background: color-mix(in srgb, var(--nox-accent) 6%, transparent); font-weight: 800; color: var(--nox-strong-ink); }
.nx-statement tfoot td { border-top: 2px solid var(--nox-border); }
.nx-statement a { color: var(--nox-chip-ink); text-decoration: none; font-weight: 600; }
.nx-statement a:hover { text-decoration: underline; }
.nx-stmt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Topbar search (replaces the redundant page-title in the topbar). */
.nx-topbar-search { display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--nox-ground) 40%, transparent);
  border: 1px solid var(--nox-border-soft); border-radius: 13px; padding: 9px 14px; color: var(--nox-muted-ink); font-size: 12.5px; min-width: 240px; }
.nx-topbar-search:hover { border-color: var(--nox-glass-bd); color: var(--nox-strong-ink); }
.nx-topbar-search .bi { font-size: 14px; }
.nx-topbar-search kbd { margin-inline-start: auto; font-size: 10px; background: rgba(255,255,255,.06); border-radius: 5px; padding: 2px 6px; color: var(--nox-muted-ink); }

/* ================================================================
   ADMIN CONTENT REDESIGN — lifts every admin page at once.
   Scoped to .nx-admin so the client portal is untouched.
   ================================================================ */

/* Sidebar nav scrollbar — thin, on-brand cyan (matches the design). */
.nx-nav { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--nox-accent) 34%, transparent) transparent; }
.nx-nav::-webkit-scrollbar { width: 6px; }
.nx-nav::-webkit-scrollbar-track { background: transparent; }
.nx-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--nox-accent) 32%, transparent); border-radius: 99px; }
.nx-nav::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--nox-accent) 55%, transparent); }

/* Roomier vertical rhythm between content blocks. */
.nx-admin .nx-content { gap: 22px; }

/* Cards: bigger radius, more generous padding, real presence. */
.nx-admin .nx-content .card { border-radius: 20px; }
.nx-admin .nx-content .card-header {
  padding: 1.05rem 1.4rem; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.nx-admin .nx-content .card-body { padding: 1.4rem; }
.nx-admin .nx-content .card-footer { padding: 0.9rem 1.4rem; }
.nx-admin .nx-content .row { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }

/* Equal-height cards in a row → no ragged empty space.
   Only columns whose direct child is a card become flex (safe via :has). */
.nx-admin .nx-content .row > [class*="col-"]:has(> .card),
.nx-admin .nx-content .row > [class*="col-"]:has(> a > .card) { display: flex; }
.nx-admin .nx-content .row > [class*="col-"] > .card,
.nx-admin .nx-content .row > [class*="col-"] > a > .card { width: 100%; }

/* Bootstrap tables → the same glass ledger as the dashboard panels. */
.nx-admin .nx-content .table { margin: 0; --bs-table-bg: transparent; }
.nx-admin .nx-content .table thead th {
  font-size: 0.72rem; letter-spacing: 0.04em; color: var(--nox-muted-ink); font-weight: 800;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--nox-border); white-space: nowrap;
  background: color-mix(in srgb, var(--nox-accent) 4%, transparent);
}
.nx-admin .nx-content .table tbody td { padding: 0.8rem 1rem; border-top: 1px solid var(--nox-border-soft); vertical-align: middle; }
.nx-admin .nx-content .table tbody tr:hover td { background: color-mix(in srgb, var(--nox-accent) 4%, transparent); }
.nx-admin .nx-content .card > .table-responsive:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }

/* Filter / toolbar forms: consistent control heights + tidy wrapping. */
.nx-admin .nx-content .form-control, .nx-admin .nx-content .form-select { min-height: 42px; font-size: 0.9rem; }
.nx-admin .nx-content .form-control-sm, .nx-admin .nx-content .form-select-sm { min-height: 34px; }
.nx-admin .nx-content .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.nx-admin .nx-content form.row.g-2 > [class*="col-"] { min-width: 0; }

/* A filter bar built from a form gets card-like breathing room. */
.nx-admin .nx-content .card-body > form.row { row-gap: 0.75rem; }

/* ================= DASHBOARD CHARTS + ANIMATED VISUALS ================= */
.nx-analytics { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; }
.nx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .nx-analytics, .nx-duo { grid-template-columns: 1fr; } }

/* chart month labels */
.nx-chart-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--nox-muted-ink); font-variant-numeric: tabular-nums; direction: ltr; }
.nx-chart-x span { flex: 1; text-align: center; }

/* line/area draw-in animation (JS sets dash length) */
@media (prefers-reduced-motion: no-preference) {
  .nx-draw { transition: stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1); }
  .nx-area-fill { opacity: 0; transition: opacity 1s ease .3s; }
  .nx-area-fill.in { opacity: 1; }
  .nx-ring-draw { transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1) .2s; }
}

/* services donut */
.nx-donut-card { display: flex; flex-direction: column; }
.nx-donut-wrap { display: flex; align-items: center; gap: 18px; padding: 4px 20px 8px; }
.nx-donut { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.nx-donut .nx-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.nx-donut .nx-donut-center b { font-size: 30px; font-weight: 900; color: var(--nox-strong-ink); line-height: 1; direction: ltr; }
.nx-donut .nx-donut-center small { font-size: 11px; color: var(--nox-muted-ink); font-weight: 700; }
.nx-donut-seg { transition: stroke-dasharray 1.1s cubic-bezier(.4,0,.2,1); }
.nx-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nx-donut-legend .lg { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.nx-donut-legend .lg .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.nx-donut-legend .lg .lb { color: var(--nox-muted-ink); }
.nx-donut-legend .lg .ct { margin-inline-start: auto; color: var(--nox-strong-ink); font-weight: 800; direction: ltr; }
.nx-donut-empty { padding: 24px; text-align: center; color: var(--nox-muted-ink); }

/* stat sparkline gets a subtle end-dot pulse */
.nx-spark .nx-dot-end { animation: nx-dotpulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes nx-dotpulse { 0%,100% { opacity: .5; r: 2.2px; } 50% { opacity: 1; r: 3.2px; } }
@media (prefers-reduced-motion: reduce) { .nx-draw, .nx-area-fill, .nx-ring-draw, .nx-donut-seg { transition: none !important; } .nx-spark .nx-dot-end { animation: none; } }

/* ================================================================
   LIGHT THEME — activated by :root[data-theme="light"], synced with
   the landing page via the shared localStorage key 'nox-theme'.
   Achieved by (1) inverting the gray ramp, (2) light nox tokens +
   frosted-white glass, (3) Bootstrap var remap. Brand-gradient
   "night anchor" cards (renewal, brand mark, avatar) intentionally
   stay dark in both themes, exactly like the landing's .plan.hot/.band.
   ================================================================ */
:root[data-theme="light"] {
  color-scheme: light;
  /* inverted ramp: high index → darker (text), low index → lighter (surface) */
  --gray-50: 26 30 78;
  --gray-100: 23 26 69;
  --gray-200: 46 52 100;
  --gray-300: 74 82 130;
  --gray-400: 110 118 162;
  --gray-500: 138 146 184;
  --gray-600: 176 183 212;
  --gray-700: 205 210 232;
  --gray-800: 224 228 244;
  --gray-900: 238 240 250;
  --gray-950: 245 246 252;

  --nox-accent-strong: #0891b2;
  --nox-accent-soft: color-mix(in srgb, var(--nox-accent) 14%, transparent);

  --nox-ink: #ffffff;
  --nox-card: #ffffff;
  --nox-card-2: #eef1fb;
  --nox-border: #d3d9ef;
  --nox-border-soft: #e5e8f6;
  --nox-ground: #f4f6fc;
  --nox-ground-tint: color-mix(in srgb, var(--nox-accent) 8%, transparent);
  --nox-topbar: #ffffff;
  --nox-input-bg: rgba(255, 255, 255, 0.92);
  --nox-hero-glow: #d9dffb;
  --nox-track: #e4e8f6;
  --nox-seg-muted: #c9cfe8;
  --nox-scroll-thumb: #c3c9e6;
  --nox-hover-row: rgba(26, 30, 78, 0.03);

  --nox-strong-ink: #171a45;
  --nox-muted-ink: #5f6694;
  --nox-chip-ink: #0e7490;
  --nox-hero-line: #0891b2;

  --nox-glass-a: rgba(255, 255, 255, 0.86);
  --nox-glass-b: rgba(255, 255, 255, 0.56);
  --nox-glass-bd: rgba(8, 145, 178, 0.20);
  --nox-glass-glow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 30px rgba(20, 26, 70, 0.07);

  /* Bootstrap remap (data-bs-theme is also switched to light on <html>) */
  --bs-body-bg: var(--nox-ground);
  --bs-body-color: #2e3460;
  --bs-emphasis-color: var(--nox-strong-ink);
  --bs-secondary-color: var(--nox-muted-ink);
  --bs-tertiary-color: rgb(var(--gray-500));
  --bs-secondary-bg: #eef1fb;
  --bs-tertiary-bg: #f4f6fc;
  --bs-border-color: var(--nox-border);
  --bs-border-color-translucent: var(--nox-border);
  --bs-heading-color: var(--nox-strong-ink);
  --bs-link-color: #0891b2;
  --bs-link-hover-color: #0e7490;
}
:root[data-theme="light"] body {
  color: #2e3460;
  background:
    radial-gradient(70rem 40rem at 50% -22%, var(--nox-hero-glow), transparent 60%),
    radial-gradient(60rem 40rem at 100% 6%, rgba(109, 93, 246, 0.06), transparent 55%),
    radial-gradient(46rem 34rem at 0% 118%, color-mix(in srgb, var(--nox-accent) 6%, transparent), transparent 55%),
    var(--nox-ground) !important;
}
:root[data-theme="light"] .nx-sky-svg { opacity: 0.35; }
:root[data-theme="light"] .bg-light,
:root[data-theme="light"] .bg-white { background: #ffffff !important; color: #2e3460; }
:root[data-theme="light"] .input-group-text,
:root[data-theme="light"] .form-control:disabled,
:root[data-theme="light"] .form-control[readonly] { background: #eef1fb; color: var(--nox-muted-ink); }
:root[data-theme="light"] .btn-light {
  --bs-btn-bg: #eef1fb; --bs-btn-border-color: #dfe4f5; --bs-btn-color: #2e3460;
  --bs-btn-hover-bg: #e3e8f7; --bs-btn-hover-border-color: #d3d9ef; --bs-btn-hover-color: #171a45;
}
:root[data-theme="light"] .btn-close { filter: none; }
:root[data-theme="light"] .modal-backdrop { --bs-backdrop-bg: #1a1e4e; }
:root[data-theme="light"] .modal-backdrop.show { opacity: 0.4; }
/* keep the sidebar user card readable on white */
:root[data-theme="light"] .nx-plan {
  background: linear-gradient(155deg, color-mix(in srgb, var(--nox-accent) 12%, #fff), #f3f5fd);
}
:root[data-theme="light"] .nx-plan .nx-nm { color: var(--nox-strong-ink); }
/* alerts a touch stronger on white */
:root[data-theme="light"] .alert-warning { border-color: rgba(240, 178, 76, 0.4); }

/* Theme-toggle icon swap (sun in dark, moon in light) + light auth ground */
.nx-i-moon { display: none; }
:root[data-theme="light"] .nx-i-sun { display: none; }
:root[data-theme="light"] .nx-i-moon { display: inline-block; }
#nx-theme-toggle .bi { transition: transform .3s ease; }
#nx-theme-toggle:hover .bi { transform: rotate(25deg); }
:root[data-theme="light"] .nox-auth-ground {
  background:
    radial-gradient(900px 460px at 80% -10%, color-mix(in srgb, var(--nox-accent) 12%, transparent), transparent 60%),
    radial-gradient(700px 420px at 0% 110%, rgba(109, 93, 246, 0.08), transparent 55%),
    linear-gradient(160deg, #eef1fb, #f6f7fc);
}

/* Theme-aware brand logo swap (white on dark, colored on light) */
.nx-logo-light { display: none !important; }
:root[data-theme="light"] .nx-logo-dark { display: none !important; }
:root[data-theme="light"] .nx-logo-light { display: inline-block !important; }
:root[data-theme="light"] .nox-sky { opacity: 0.4; }

/* ================================================================
   Compact stat cards (client profile) + tidy quick-action tiles
   ================================================================ */
.nox-kpi-sm .stat-card .card-body { padding-top: .65rem; padding-bottom: .65rem; }
.nox-kpi-sm .stat-card .fs-4 { font-size: 1.05rem !important; line-height: 1.2; }
.nox-kpi-sm .stat-card .text-muted.small { font-size: .72rem; }
.nox-kpi-sm .stat-card .icon { font-size: 1.05rem; }

/* Quick actions: one uniform tile grid instead of a jumble of button colours */
.nox-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nox-quick form { display: contents; }
.nox-qa {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border-radius: 12px; text-align: start; cursor: pointer;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: var(--nox-strong-ink);
  background: color-mix(in srgb, var(--nox-accent) 6%, transparent);
  border: 1px solid var(--nox-border-soft);
  transition: background .15s, border-color .15s, transform .15s;
}
.nox-qa:hover {
  color: var(--nox-strong-ink);
  background: color-mix(in srgb, var(--nox-accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--nox-accent) 55%, transparent);
  transform: translateY(-1px);
}
.nox-qa i { font-size: 15px; color: var(--nox-accent); flex-shrink: 0; }
.nox-qa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) { .nox-quick { grid-template-columns: 1fr; } }

/* ---- Mobile polish (portal + admin), 2026-07-18 ---- */
@media (max-width: 767.98px) {
  /* Trim the page heading so it doesn't dominate the first screen. */
  .nox-page-title { font-size: 1.34rem; }
  /* Slightly calmer dashboard KPI numerals on small screens. */
  .nox-hero-value { font-size: clamp(1.5rem, 6vw, 1.85rem); }
}
@media (max-width: 575.98px) {
  /* The top bar had too many fixed-width tools for a phone: it overflowed,
     and in RTL that pushed the avatar off the left edge and shoved the whole
     page off-centre. Compact the tools so everything fits within the
     viewport — no clipping, no horizontal scroll. */
  .nx-shell { padding: 12px; }
  .nx-topbar { gap: 8px; padding: 8px 12px; }
  .nx-topbar .nx-menu-btn { flex: 0 0 auto; }
  .nx-tools { gap: 7px; min-width: 0; }
  .nx-tbtn { width: 38px; height: 38px; font-size: 16px; }
  .nx-lang-btn { width: auto; min-width: 38px; padding-inline: 8px; }
  /* Wallet becomes an icon-only button; the balance lives on the wallet page. */
  .nx-wallet { padding: 0; width: 38px; height: 38px; justify-content: center; gap: 0; border-radius: 12px; }
  .nx-wallet .nx-num { display: none; }
  /* Admin quick-create is icon-only on phones (label hidden via .d-sm-inline);
     drop its dropdown caret so it reads as a clean + button. */
  .nx-tools .btn-primary.dropdown-toggle::after { display: none; }
  .nx-tools .btn-primary.dropdown-toggle { padding-inline: 10px; }

  /* App-wide: KPI summary cards render two-per-row on phones (was one —
     too tall). Any grid column that wraps a .stat-card is halved; the cards
     are compacted so the icon + number + label read cleanly at half width.
     Columns already set to col-6 (admin pages) are unaffected. */
  .row > [class*="col-"]:has(> .stat-card),
  .row > [class*="col-"]:has(> a.stat-card),
  .row > [class*="col-"]:has(> a > .stat-card) { flex: 0 0 auto; width: 50%; }
  .stat-card .card-body { padding: .75rem .8rem; gap: .55rem !important; }
  .stat-card .icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 9px; }
  .stat-card .fs-4 { font-size: 1.12rem; }
  .stat-card .text-muted.small { font-size: .72rem; }
}

/* ---- Keyboard accessibility (2026-07-19) ----
   The custom interactive elements (nx-*, sbtn, adm-tile, bottom-nav, stat
   cards, quick-action tiles) had no visible focus indicator, so keyboard
   users couldn't tell where they were. Give them a clear focus-visible ring.
   Native Bootstrap controls keep their own focus rings. */
.nx-tbtn:focus-visible, .nx-navitem:focus-visible, .nx-lang-btn:focus-visible,
.nx-wallet:focus-visible, .nx-avatar-btn:focus-visible, .nx-side-search:focus-visible,
.nx-menu-btn:focus-visible, .adm-tile:focus-visible, .sbtn:focus-visible,
.bn-item:focus-visible, .nx-brand:focus-visible, .nx-tbtn.nx-lang-btn:focus-visible,
a.stat-card:focus-visible, a.nox-hero:focus-visible, a.card:focus-visible,
.nox-qa:focus-visible, .nx-quick a:focus-visible {
  outline: 2px solid var(--nox-accent);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Skip-to-content link: visible only when focused (first Tab on any page). */
.nx-skip {
  position: fixed; inset-inline-start: 12px; top: -60px; z-index: 2000;
  background: var(--nox-accent); color: #06202a; font-weight: 800;
  padding: 10px 16px; border-radius: 12px; text-decoration: none;
  transition: top .15s ease;
}
.nx-skip:focus { top: 12px; color: #06202a; }