:root, [data-theme="dark"] {
  --bg: #0a0e18;
  --bg-2: #080c14;
  --sidebar: #080c14;
  --sidebar-2: #080c14;
  --surface: #0e1422;
  --surface-2: #131a2c;
  --surface-3: #1a2238;
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);
  --border-soft: rgba(34, 211, 238, 0.1);
  --accent: #22d3ee;
  --accent-2: #06b6d4;
  --accent-bright: #67e8f9;
  --accent-glow: rgba(34, 211, 238, 0.4);
  --text: #cbd5e1;
  --text-strong: #ffffff;
  --text-muted: #64748b;
  --text-dim: #475569;
  --danger: #f87171;
  --warning: #fbbf24;
  --success: #34d399;
  --purple: #a78bfa;
}

[data-theme="light"] {
  --bg: #f7f8fb;
  --bg-2: #eef1f6;
  --sidebar: #ffffff;
  --sidebar-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --surface-3: #e9eef5;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --border-soft: rgba(6, 182, 212, 0.18);
  --accent: #0891b2;
  --accent-2: #06b6d4;
  --accent-bright: #0e7490;
  --accent-glow: rgba(6, 182, 212, 0.35);
  --text: #334155;
  --text-strong: #0f172a;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --danger: #dc2626;
  --warning: #d97706;
  --success: #059669;
  --purple: #7c3aed;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(circle at top left, rgba(0, 229, 255, 0.10), transparent 35%),
    radial-gradient(circle at bottom right, rgba(0, 140, 255, 0.06), transparent 45%),
    linear-gradient(135deg, #030814 0%, #061528 55%, #020511 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

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

.page-title { letter-spacing: -0.02em; }
h1, h2, h3, h4, h5, h6, .stat-value, .login-side-title, .login-brand-title {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* (grid pattern removed) */

.layout { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.sidebar {
  width: 260px;
  background: rgba(4, 15, 31, 0.85);
  backdrop-filter: blur(8px);
  color: var(--text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid rgba(0, 229, 255, 0.15);
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.08);
  overflow: hidden;
}
[data-theme="light"] .sidebar {
  background: var(--sidebar);
  border-right-color: var(--border);
  box-shadow: none;
}

.brand {
  padding: 22px 20px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.brand i {
  font-size: 28px;
  color: var(--accent);
}
.brand-title {
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.brand-sub {
  font-size: 11px;
  color: var(--accent-bright);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.sidebar .nav { padding: 12px 8px; flex: 1; }
.sidebar .nav-link {
  color: var(--text-muted);
  padding: 11px 14px;
  border-radius: 8px;
  margin: 2px 0;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.sidebar .nav-link i { width: 18px; text-align: center; font-size: 16px; }
.sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-strong);
}
.sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.22), rgba(20, 70, 130, 0.3));
  color: var(--accent-bright);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.18);
}
.sidebar .nav-link.active i { color: var(--accent-bright); }

/* ===========================================================================
   Customer sidebar nav — dedicated classes, fully isolated from admin .nav-link
   3 levels via <details>/<summary>:
     cnav-item (top)
       └─ cnav-mid (under Services)
            └─ cnav-leaf (under a service)
   =========================================================================== */

.cnav {
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  flex: 1;
}

/* base row */
.cnav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 1px 0;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.cnav-item > i { width: 18px; text-align: center; font-size: 16px; flex-shrink: 0; }
.cnav-item > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.cnav-item.is-active {
  background: rgba(34, 211, 238, 0.1);
  color: var(--accent-bright);
}
.cnav-item.is-active > i { color: var(--accent-bright); }

/* hide native details marker */
details.cnav-group, details.cnav-subgroup { list-style: none; }
details.cnav-group > summary,
details.cnav-subgroup > summary { list-style: none; }
details.cnav-group > summary::-webkit-details-marker,
details.cnav-subgroup > summary::-webkit-details-marker { display: none; }
details.cnav-group > summary::marker,
details.cnav-subgroup > summary::marker { content: ""; }

/* chevron on parent rows */
.cnav-chev {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  width: auto !important;
  transition: transform 0.2s ease;
}
details.cnav-group[open] > summary .cnav-chev,
details.cnav-subgroup[open] > summary .cnav-chev { transform: rotate(180deg); }
.cnav-parent:hover .cnav-chev { color: var(--text-muted); }

/* Level 2 (children of Services) — indented with a left guide line */
.cnav-children {
  margin: 4px 0 6px 19px;          /* aligns under the parent icon */
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.cnav-mid {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
}
.cnav-mid > i { font-size: 14px; width: 16px; color: var(--accent); }

/* Level 3 (leaves under E-commerce / Mail Automation) */
.cnav-leaves {
  margin: 2px 0 4px 22px;          /* under the level-2 icon column */
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.cnav-leaf {
  padding: 6px 12px 6px 10px;
  font-size: 12.5px;
  position: relative;
}
.cnav-leaf::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--border);
  transform: translateY(-50%);
}
.cnav-leaf.is-active::before {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
}
.me {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  color: var(--text);
  text-decoration: none;
  padding: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.me:hover, .me[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text-strong);
}
.me::after { display: none; }
.me i.bi-person-circle { font-size: 28px; color: var(--accent); }
.me-text { flex: 1; min-width: 0; text-align: left; }
.me-name { font-weight: 600; font-size: 13px; color: var(--text-strong); }
.me-email {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-caret { font-size: 12px; color: var(--text-muted); transition: transform 0.15s ease; }
.me[aria-expanded="true"] .me-caret { transform: rotate(180deg); }

.me-menu {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.me-menu .dropdown-item {
  color: var(--text);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.me-menu .dropdown-item i { color: var(--accent); width: 16px; }
.me-menu .dropdown-item:hover, .me-menu .dropdown-item:focus {
  background: rgba(34, 211, 238, 0.1);
  color: var(--text-strong);
}
.me-menu .dropdown-item.text-danger { color: var(--danger) !important; }
.me-menu .dropdown-item.text-danger i { color: var(--danger); }
.me-menu .dropdown-item.text-danger:hover { background: rgba(248, 113, 113, 0.1); }
.me-menu .dropdown-divider { border-color: var(--border); margin: 6px 0; }

.main { flex: 1; min-width: 0; }
.topbar {
  background: transparent;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--text-strong);
  letter-spacing: 0.01em;
}
.page-sub {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 2px;
}
.topbar-left { flex-shrink: 0; max-width: 36%; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }

/* Date range pill on dashboard */
.date-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.date-pill i { color: var(--accent); }

/* Topbar icon buttons */
.topbar-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topbar-btn:hover, .topbar-btn:focus, .topbar-btn[aria-expanded="true"] {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--accent);
  outline: none;
}
.topbar-btn i { font-size: 16px; }
.topbar-btn::after { display: none; }
.topbar-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  background: var(--accent);
  color: #07111d;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

/* Notification dropdown */
.notif-menu {
  width: 360px;
  max-height: 480px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-strong);
}
.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
}
.notif-item:hover { background: rgba(34, 211, 238, 0.05); color: var(--text-strong); }
.notif-item:last-of-type { border-bottom: none; }
.notif-dot {
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--accent-glow);
}
.notif-dot-warning { background: var(--warning); box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.notif-dot-error { background: var(--danger); box-shadow: 0 0 8px rgba(248, 113, 113, 0.5); }
.notif-body { flex: 1; min-width: 0; }
.notif-meta { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.notif-footer {
  display: block;
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}
.notif-footer:hover { background: rgba(34, 211, 238, 0.08); color: var(--accent-bright); }
.notif-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}
.notif-empty i { font-size: 28px; color: var(--success); display: block; margin-bottom: 8px; }

/* Welcome wave emoji */
.wave-emoji {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: wave 1.6s ease-in-out infinite;
  margin-left: 4px;
}
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

.messages { padding: 16px 32px 0; }

.alert {
  background: rgba(15, 31, 58, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
}
.alert-success, .alert-25 { border-color: rgba(52, 211, 153, 0.4); color: #6ee7b7; background: rgba(16, 185, 129, 0.08); }
.alert-info, .alert-20 { border-color: rgba(34, 211, 238, 0.4); color: var(--accent-bright); background: rgba(34, 211, 238, 0.08); }
.alert-warning, .alert-30 { border-color: rgba(251, 191, 36, 0.4); color: #fcd34d; background: rgba(245, 158, 11, 0.08); }
.alert-danger, .alert-40 { border-color: rgba(248, 113, 113, 0.4); color: #fca5a5; background: rgba(239, 68, 68, 0.08); }

.content { padding: 24px 32px; position: relative; z-index: 1; }

/* ======= Cards ======= */
.card {
  background: rgba(10, 22, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  color: var(--text);
}
[data-theme="light"] .card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 600;
  color: var(--text-strong);
  padding: 18px 22px;
  font-size: 14px;
}
[data-theme="light"] .card-header { border-bottom-color: var(--border); }
.card-header i { color: var(--accent); margin-right: 4px; }
.card-body { color: var(--text); }

/* ======= Hero banner ======= */
.hero-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  min-height: 180px;
  display: flex;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 60px rgba(34, 211, 238, 0.05);
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("ai-banner.png");
  background-size: cover;
  background-position: right center;
  opacity: 0.55;
  mix-blend-mode: lighten;
}
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--surface-2) 0%, rgba(15, 37, 64, 0.85) 40%, rgba(15, 37, 64, 0.2) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 28px 32px;
  max-width: 60%;
}
.hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
.hero-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.2;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}
.hero-title em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow);
}
.hero-sub {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 520px;
}

/* ======= Stats ======= */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stat {
  background: rgba(10, 22, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 22px 22px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.stat:hover {
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
[data-theme="light"] .stat {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .stat:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.stat-label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}
.stat-value {
  font-size: 32px;
  font-weight: 700;
  margin-top: 8px;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.stat-foot { color: var(--text-muted); font-size: 12px; margin-top: 6px; }
.stat-icon {
  float: right;
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34, 211, 238, 0.1);
  color: var(--accent);
  font-size: 18px;
  border: none;
}

/* Variant accent colors per stat card */
.stat-cyan   .stat-icon { background: rgba(34, 211, 238, 0.12);  color: #22d3ee; }
.stat-purple .stat-icon { background: rgba(167, 139, 250, 0.14); color: #a78bfa; }
.stat-amber  .stat-icon { background: rgba(251, 191, 36, 0.14);  color: #fbbf24; }
.stat-emerald .stat-icon { background: rgba(52, 211, 153, 0.14); color: #34d399; }

/* Sidebar mascot */
.sidebar-mascot {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px 4px;
}
.sidebar-mascot img {
  display: block;
  width: 130px;
  height: 130px;
  max-width: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 24px rgba(34, 211, 238, 0.18));
}

.section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 24px 0 12px;
  letter-spacing: 0.1em;
}

/* ======= Tables ======= */
.table {
  background: transparent;
  color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: rgba(34, 211, 238, 0.02);
  --bs-table-hover-bg: rgba(34, 211, 238, 0.05);
  --bs-table-hover-color: var(--text-strong);
}
.table thead th {
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  padding: 14px 16px;
}
.table tbody td { padding: 14px 16px; border-color: var(--border); vertical-align: middle; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.table tbody tr.row-link { cursor: pointer; }
.table tbody tr.row-link:hover { background: rgba(34, 211, 238, 0.06); }
[data-theme="light"] .table tbody tr.row-link:hover { background: rgba(6, 182, 212, 0.06); }
.table-card {
  background: rgba(10, 22, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .table-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.text-muted { color: var(--text-muted) !important; }

code, .kbd {
  background: rgba(34, 211, 238, 0.08);
  color: var(--accent-bright);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  font-size: 12px;
}

/* ======= Pills / Badges ======= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid;
  line-height: 1.5;
}
.pill i { font-size: 11px; }
.badge-on, .badge-active { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.35); }
.badge-off, .badge-canceled { background: rgba(248, 113, 113, 0.12); color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }
.badge-trial { background: rgba(251, 191, 36, 0.12); color: #fcd34d; border-color: rgba(251, 191, 36, 0.35); }
.badge-past_due { background: rgba(251, 146, 60, 0.12); color: #fdba74; border-color: rgba(251, 146, 60, 0.35); }

.list-group { background: transparent; }
.list-group-item {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  padding: 14px 22px;
}
.list-group-item:hover { background: rgba(255, 255, 255, 0.02); }
.list-group-flush > .list-group-item { border-color: var(--border); }

dl dt, dl dd { color: var(--text); }
dl .text-muted { color: var(--text-muted) !important; }

/* ======= Forms ======= */
.form-card {
  background: rgba(10, 22, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 28px;
  max-width: 720px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .form-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.form-label { font-weight: 600; font-size: 13px; color: var(--text-strong); }
.form-help { color: var(--text-muted); font-size: 12px; }

.form-control, .form-select {
  background-color: rgba(2, 6, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-strong);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  cursor: pointer;
}
.form-select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
}
.form-control:hover, .form-select:hover {
  border-color: rgba(255, 255, 255, 0.14);
}
.form-control:focus, .form-select:focus {
  background-color: rgba(2, 6, 15, 0.85);
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
  color: var(--text-strong);
}
.form-control::placeholder { color: var(--text-dim); }
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background-color: #fff;
  border-color: var(--border);
}
[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
}
[data-theme="light"] .form-select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230891b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
}
[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
  background-color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
.form-control::placeholder { color: var(--text-dim); }
.form-check-input {
  background-color: rgba(10, 22, 40, 0.6);
  border-color: var(--border);
}
.form-check-input:checked {
  background-color: var(--accent-2);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.form-check-label { color: var(--text); }

/* ======= Buttons ======= */
.btn {
  font-weight: 500;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 8px;
  letter-spacing: -0.005em;
  transition: background 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 7px;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #07111d;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: #07111d;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 4px 16px rgba(34, 211, 238, 0.25);
}
.btn-primary:focus { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.25); }

.btn-outline-primary {
  border-color: rgba(34, 211, 238, 0.4);
  color: var(--accent-bright);
  background: transparent;
}
.btn-outline-primary:hover {
  background: rgba(34, 211, 238, 0.1);
  color: var(--accent-bright);
  border-color: var(--accent);
}

.btn-outline-secondary {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-strong);
  border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .btn-outline-secondary {
  border-color: var(--border-strong);
  color: var(--text);
}
[data-theme="light"] .btn-outline-secondary:hover {
  background: var(--surface-2);
  border-color: var(--text-muted);
}
.btn-outline-danger {
  border-color: rgba(248, 113, 113, 0.4);
  color: var(--danger);
  background: rgba(239, 68, 68, 0.05);
}
.btn-outline-danger:hover { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.btn-outline-warning {
  border-color: rgba(251, 191, 36, 0.4);
  color: var(--warning);
  background: rgba(245, 158, 11, 0.05);
}
.btn-outline-warning:hover { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.btn-outline-success {
  border-color: rgba(52, 211, 153, 0.4);
  color: var(--success);
  background: rgba(16, 185, 129, 0.05);
}
.btn-outline-success:hover { background: rgba(16, 185, 129, 0.15); color: var(--success); }

.btn-success {
  background: linear-gradient(135deg, #059669, #10b981);
  border-color: #10b981;
  color: #fff;
}

a { color: var(--accent-bright); text-decoration: none; }
a:hover { color: var(--accent); }

.bg-primary-subtle { background: rgba(34, 211, 238, 0.1) !important; }
.text-primary { color: var(--accent-bright) !important; }

/* ======= Login page ======= */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background:
    radial-gradient(ellipse 720px 520px at 12% 22%, rgba(34, 211, 238, 0.14), transparent 65%),
    radial-gradient(ellipse 620px 430px at 88% 78%, rgba(139, 92, 246, 0.11), transparent 65%),
    radial-gradient(ellipse 520px 360px at 78% 12%, rgba(59, 130, 246, 0.09), transparent 70%),
    radial-gradient(ellipse 420px 320px at 22% 90%, rgba(34, 211, 238, 0.07), transparent 70%),
    var(--bg);
  position: relative;
  overflow: hidden;
}

/* Twinkling starfield */
.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 7%  18%, rgba(255,255,255,0.85) 0, rgba(255,255,255,0.85) 1px, transparent 2px),
    radial-gradient(circle at 13% 72%, rgba(34,211,238,0.75)  0, rgba(34,211,238,0.75)  1px, transparent 2px),
    radial-gradient(circle at 22% 33%, rgba(255,255,255,0.7)  0, rgba(255,255,255,0.7)  1px, transparent 2px),
    radial-gradient(circle at 31% 88%, rgba(34,211,238,0.65)  0, rgba(34,211,238,0.65)  1.4px, transparent 2.4px),
    radial-gradient(circle at 41% 12%, rgba(255,255,255,0.6)  0, rgba(255,255,255,0.6)  1px, transparent 2px),
    radial-gradient(circle at 47% 55%, rgba(34,211,238,0.7)   0, rgba(34,211,238,0.7)   1px, transparent 2px),
    radial-gradient(circle at 56% 27%, rgba(255,255,255,0.7)  0, rgba(255,255,255,0.7)  1.3px, transparent 2.3px),
    radial-gradient(circle at 63% 80%, rgba(34,211,238,0.6)   0, rgba(34,211,238,0.6)   1px, transparent 2px),
    radial-gradient(circle at 71% 45%, rgba(255,255,255,0.55) 0, rgba(255,255,255,0.55) 1px, transparent 2px),
    radial-gradient(circle at 78% 15%, rgba(34,211,238,0.65)  0, rgba(34,211,238,0.65)  1px, transparent 2px),
    radial-gradient(circle at 85% 62%, rgba(255,255,255,0.7)  0, rgba(255,255,255,0.7)  1.2px, transparent 2.2px),
    radial-gradient(circle at 93% 30%, rgba(34,211,238,0.7)   0, rgba(34,211,238,0.7)   1px, transparent 2px),
    radial-gradient(circle at 96% 85%, rgba(255,255,255,0.5)  0, rgba(255,255,255,0.5)  1px, transparent 2px);
  animation: twinkle 5s ease-in-out infinite;
}

/* Drifting cyan glow orb */
.login-page > .login-side::after {
  content: "";
  position: absolute;
  width: 460px; height: 460px;
  top: 55%; right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  animation: drift 14s ease-in-out infinite;
  z-index: 0;
}

/* Decoration layer (circuit traces, hexagons, scan line) */
.bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background-image: url("circuit-traces.svg");
  background-size: 600px 600px;
  background-repeat: repeat;
  opacity: 0.7;
}

/* Floating hexagons */
.hex {
  position: absolute;
  color: rgba(34, 211, 238, 0.32);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.4));
}
.hex-1 { top: 12%; left: 6%;   width: 90px;  animation: floathex 14s ease-in-out infinite; }
.hex-2 { top: 65%; left: 12%;  width: 130px; animation: floathex 18s ease-in-out infinite -3s; }
.hex-3 { top: 30%; right: 8%;  width: 70px;  animation: floathex 12s ease-in-out infinite -6s; opacity: 0.7; }
.hex-4 { top: 78%; right: 14%; width: 110px; animation: floathex 16s ease-in-out infinite -2s; }
.hex-5 { top: 8%;  left: 48%;  width: 60px;  animation: floathex 11s ease-in-out infinite -4s; opacity: 0.5; }
.hex-6 { top: 50%; left: 42%;  width: 50px;  animation: floathex 13s ease-in-out infinite -5s; opacity: 0.45; }

@keyframes floathex {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-28px) rotate(180deg); }
}


@keyframes twinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-60px, -40px); }
}
.login-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  gap: 28px;
  overflow: hidden;
}
.login-side-img {
  display: block;
  max-width: min(440px, 75%);
  width: auto;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 40px rgba(34, 211, 238, 0.18));
}
.login-side-content {
  position: relative;
  z-index: 2;
  color: var(--text-strong);
  text-align: center;
  max-width: 420px;
}
.login-side-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.login-side-eyebrow::before,
.login-side-eyebrow::after {
  content: "";
  width: 36px; height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.login-side-title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.login-side-title em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 24px var(--accent-glow);
}
.login-side-sub {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 420px;
  line-height: 1.6;
}
.login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  position: relative;
  z-index: 2;
}
.login-card {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(10, 22, 40, 0.85) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(34, 211, 238, 0.1),
    0 0 0 1px var(--border-soft);
  position: relative;
}
.login-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.login-brand i {
  font-size: 36px;
  color: var(--accent);
  filter: drop-shadow(0 0 12px var(--accent-glow));
}
.login-brand-title {
  font-weight: 800;
  font-size: 20px;
  color: var(--text-strong);
  letter-spacing: 0.01em;
}
.login-brand-sub {
  color: var(--accent-bright);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }
  .login-side { display: none; }
}

.services-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.service-check {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.service-check:hover { border-color: var(--accent); }
.service-check input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.service-check input[type="checkbox"]:checked + span { color: var(--accent-bright); font-weight: 600; }

.empty {
  text-align: center;
  padding: 56px 16px;
  color: var(--text-muted);
  background: rgba(15, 31, 58, 0.4);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

/* Lockable card: form fields visible but disabled-looking when locked.
   Click Edit to enable; Cancel re-locks and resets values. */
.card-title-h {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
  letter-spacing: -0.01em;
}
.lock-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}

/* When a card is part of an equal-height grid (h-100 d-flex flex-column),
   the form fills available space and the action row sticks to the bottom. */
.form-card.lockable .lock-form {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lock-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: auto;     /* push to bottom of form */
  padding-top: 16px;
}
.lock-test {
  margin-top: auto;     /* push to bottom of card when in locked view */
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

/* Locked state — fields visible but un-editable */
.form-card.lockable.locked input:not([type="hidden"]):not([type="checkbox"]),
.form-card.lockable.locked select,
.form-card.lockable.locked textarea {
  background: var(--bg-2) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  cursor: not-allowed;
  pointer-events: none;
}
.form-card.lockable.locked .form-check-input {
  pointer-events: none;
  opacity: 0.6;
}
.form-card.lockable.locked .form-check-label,
.form-card.lockable.locked .form-help { opacity: 0.7; }

/* Show the Edit button only when locked */
.form-card.lockable.locked .lock-edit { display: inline-block; }
.form-card.lockable:not(.locked) .lock-edit { display: none; }

/* Hide Cancel + Save when locked; show only when editing */
.form-card.lockable.locked .lock-actions { display: none; }
.form-card.lockable:not(.locked) .lock-actions { display: flex; }

/* The Test button group only makes sense once data is saved (i.e. locked) */
.form-card.lockable:not(.locked) .lock-test { display: none; }

.test-output {
  white-space: pre-wrap;
  margin: 8px 0 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Confirmation modal */
.confirm-modal .modal-content {
  background: linear-gradient(145deg, rgba(8, 25, 48, 0.96), rgba(5, 14, 29, 0.96));
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 18px;
  color: var(--text);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .confirm-modal .modal-content {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.confirm-modal .modal-body {
  padding: 32px 32px 12px;
  text-align: center;
}
.confirm-modal .modal-footer {
  border-top: 1px solid rgba(0, 229, 255, 0.1);
  padding: 16px 24px;
  justify-content: center;
  gap: 8px;
}
[data-theme="light"] .confirm-modal .modal-footer { border-top-color: var(--border); }
.confirm-modal .confirm-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: var(--danger);
  font-size: 28px;
  box-shadow: 0 0 24px rgba(248, 113, 113, 0.18);
}
.confirm-modal .confirm-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.confirm-modal .confirm-message {
  font-size: 14px;
  margin: 0;
}
.confirm-modal .btn-danger {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  border-color: #ef4444;
  color: #fff;
  font-weight: 600;
}
.confirm-modal .btn-danger:hover {
  background: linear-gradient(135deg, #b91c1c, #dc2626);
  border-color: #dc2626;
}
.empty i { font-size: 36px; color: var(--accent); filter: drop-shadow(0 0 8px var(--accent-glow)); }

.btn-close {
  filter: invert(1) opacity(0.6);
}
.btn-close:hover { filter: invert(1) opacity(1); }

/* Password show/hide toggle */
.password-wrap {
  position: relative;
}
.password-wrap .form-control { padding-right: 44px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.password-toggle:hover, .password-toggle:focus {
  color: var(--accent-bright);
  background: rgba(34, 211, 238, 0.08);
  outline: none;
}
.password-toggle i { font-size: 16px; }

/* Bootstrap overrides for dark scheme */
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
hr { border-color: var(--border); }

/* ===========================================================================
   White theme refinements
   The customer area AND the super-admin panel are locked to the light theme.
   These rules finish off the few elements whose dark styling was hardcoded
   outside the variable system so the white theme reads cleanly. Everything
   here is scoped to [data-theme="light"], so the login page — the only screen
   that stays on the dark theme — is left exactly as it was.
   =========================================================================== */
[data-theme="light"] {
  /* A light-grey canvas so the white cards read as distinct, raised surfaces. */
  --bg: #eef1f7;
  /* Solid, clearly-visible borders so card edges and table rules read crisply. */
  --border: #e4e8f0;
  --border-strong: #ccd5e3;
  --border-soft: rgba(6, 182, 212, 0.18);
  /* Cyan / teal accent (matches the reference mockup), readable on a light canvas. */
  --accent: #0891b2;
  --accent-2: #06b6d4;
  --accent-bright: #0e7490;
  --accent-glow: rgba(6, 182, 212, 0.30);
}

/* Flash messages — the dark theme used a navy fill that washed out on white. */
[data-theme="light"] .alert {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .alert-success, [data-theme="light"] .alert-25 {
  background: rgba(5, 150, 105, 0.08); border-color: rgba(5, 150, 105, 0.30); color: #047857;
}
[data-theme="light"] .alert-info, [data-theme="light"] .alert-20 {
  background: rgba(6, 182, 212, 0.08); border-color: rgba(6, 182, 212, 0.30); color: #0e7490;
}
[data-theme="light"] .alert-warning, [data-theme="light"] .alert-30 {
  background: rgba(217, 119, 6, 0.08); border-color: rgba(217, 119, 6, 0.30); color: #b45309;
}
[data-theme="light"] .alert-danger, [data-theme="light"] .alert-40 {
  background: rgba(220, 38, 38, 0.07); border-color: rgba(220, 38, 38, 0.30); color: #b91c1c;
}
/* The close (×) is inverted to white for dark alerts — undo that on white. */
[data-theme="light"] .btn-close { filter: none; }

/* Empty-state panels */
[data-theme="light"] .empty {
  background: var(--surface-2);
  border-color: var(--border);
}

/* Content hover feedback — faint dark tint (the dark theme used translucent
   white, invisible on a white surface). Sidebar hovers are handled below,
   since the sidebar itself is dark. */
[data-theme="light"] .list-group-item:hover,
[data-theme="light"] .table tbody tr:hover {
  background: rgba(15, 23, 42, 0.04);
}

/* Raised surfaces — give cards / panels a real (but soft) shadow so they lift
   off the grey page the way they do in a typical light dashboard. */
[data-theme="light"] .card,
[data-theme="light"] .stat,
[data-theme="light"] .table-card,
[data-theme="light"] .form-card {
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 4px 14px rgba(16, 24, 40, 0.05);
}
[data-theme="light"] .topbar-btn,
[data-theme="light"] .date-pill {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* ---------------------------------------------------------------------------
   Dark sidebar rail (both the admin and the customer areas).
   The content area stays light; only the sidebar is a deep navy that matches
   the login page. Re-pointing the colour variables *on* .sidebar recolours
   every child in one place — brand, nav links, the profile button and its
   pop-up menu — so nothing inside the rail needs styling individually.
   --------------------------------------------------------------------------- */
[data-theme="light"] .sidebar {
  background: #0a0e1a;          /* the deep navy from the login page */
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 6px 0 26px rgba(8, 12, 22, 0.18);

  --surface: #111a2e;          /* profile pop-up menu background */
  --surface-2: #0d1526;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #cbd5e1;
  --text-strong: #ffffff;
  --text-muted: #8597b1;
  --text-dim: #5b6b85;
  --accent: #22d3ee;
  --accent-bright: #67e8f9;
  --accent-glow: rgba(34, 211, 238, 0.45);
  --danger: #f87171;
}

/* Sidebar hover — a light tint that actually shows on the dark rail. */
[data-theme="light"] .sidebar .nav-link:hover,
[data-theme="light"] .cnav-item:hover,
[data-theme="light"] .me:hover,
[data-theme="light"] .me[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-strong);
}

/* Active nav item — accent at full intensity on the dark rail. */
[data-theme="light"] .sidebar .nav-link.active,
[data-theme="light"] .cnav-item.is-active {
  background: rgba(34, 211, 238, 0.16);
  color: #67e8f9;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.30);
}
[data-theme="light"] .sidebar .nav-link.active i,
[data-theme="light"] .cnav-item.is-active > i {
  color: #67e8f9;
}

/* ===========================================================================
   Page header — a plain title on the light canvas (no coloured band), matching
   the reference design. The title is dark; its leading icon takes the accent.
   =========================================================================== */
[data-theme="light"] .page-title i { color: var(--accent); margin-right: 8px; }

/* Status pills — the dark theme used pale text that washed out on white. */
[data-theme="light"] .badge-on, [data-theme="light"] .badge-active {
  background: rgba(5, 150, 105, 0.12); color: #047857; border-color: rgba(5, 150, 105, 0.30);
}
[data-theme="light"] .badge-off, [data-theme="light"] .badge-canceled {
  background: rgba(220, 38, 38, 0.10); color: #b91c1c; border-color: rgba(220, 38, 38, 0.28);
}
[data-theme="light"] .badge-trial {
  background: rgba(217, 119, 6, 0.12); color: #b45309; border-color: rgba(217, 119, 6, 0.30);
}
[data-theme="light"] .badge-past_due {
  background: rgba(234, 88, 12, 0.12); color: #c2410c; border-color: rgba(234, 88, 12, 0.30);
}

/* Primary button — white label on the teal fill. */
[data-theme="light"] .btn-primary {
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(8, 145, 178, 0.30);
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-primary:focus { color: #ffffff; }

/* ===========================================================================
   Accent details on the light canvas (cyan / teal, matching the mockup).
   Stat-card icon chips are colour-coded: cyan, purple, green, amber.
   =========================================================================== */
[data-theme="light"] .stat-cyan .stat-icon    { background: rgba(8, 145, 178, 0.12);  color: #0891b2; }
[data-theme="light"] .stat-purple .stat-icon  { background: rgba(124, 58, 237, 0.13); color: #7c3aed; }
[data-theme="light"] .stat-amber .stat-icon   { background: rgba(217, 119, 6, 0.14);  color: #b45309; }
[data-theme="light"] .stat-emerald .stat-icon { background: rgba(5, 150, 105, 0.13);  color: #047857; }
/* Code / action chips — soft cyan tint (like the activity-log pills). */
[data-theme="light"] code,
[data-theme="light"] .kbd {
  background: rgba(6, 182, 212, 0.10);
  color: #0e7490;
  border-color: rgba(6, 182, 212, 0.22);
}
[data-theme="light"] .table tbody tr.row-link:hover,
[data-theme="light"] .notif-item:hover {
  background: rgba(15, 23, 42, 0.04);
}

/* ===========================================================================
   Professional polish — colour-coded stat accents, hover lift, refined tables.
   =========================================================================== */
/* A thin colour-coded accent strip across the top of each stat card. */
[data-theme="light"] .stat::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #22d3ee, #0891b2);
}
[data-theme="light"] .stat-purple::after  { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
[data-theme="light"] .stat-amber::after   { background: linear-gradient(90deg, #fbbf24, #d97706); }
[data-theme="light"] .stat-emerald::after { background: linear-gradient(90deg, #34d399, #059669); }
[data-theme="light"] .stat-icon { width: 44px; height: 44px; border-radius: 12px; }
[data-theme="light"] .stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08), 0 14px 26px rgba(16, 24, 40, 0.10);
}

/* Refined tables — a defined header strip and lighter row rules. */
[data-theme="light"] .table thead th {
  background: #f7f9fc;
  color: #64748b;
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .table tbody td { border-color: #eef1f6; }
[data-theme="light"] .table tbody tr:hover > td { background: rgba(8, 145, 178, 0.045); }

/* Crisper card headers. */
[data-theme="light"] .card-header { border-bottom: 1px solid var(--border); }