/* ============================================================
   Prime Mobile EU — Design System
   Dark enterprise SaaS theme · shared across all pages
   ============================================================ */

:root {
  color-scheme: dark;
  --ink-950: #070A12;
  --ink-900: #0B0F1A;
  --ink-800: #121A2B;
  --ink-700: #1B2438;
  --line: rgba(255, 255, 255, 0.07);
  --brand: #5B7CFA;
  --violet: #A78BFA;
  --mint: #2DC98A;
  --amber: #F5B14C;
  --rose: #F4738F;
  --chart-border: #0B0F1A;
}

html.light {
  --chart-border: #FFFFFF;
}

* { -webkit-font-smoothing: antialiased; }

html, body { background: var(--ink-950); }

body {
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(91, 124, 250, 0.10), transparent 60%),
    radial-gradient(900px 480px at -10% 0%, rgba(167, 139, 250, 0.07), transparent 55%),
    var(--ink-950);
  font-family: 'Inter', system-ui, sans-serif;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #26314A; border-radius: 8px; border: 2px solid var(--ink-950); }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(91, 124, 250, 0.35); }

/* ---------- Surfaces ---------- */
.glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}

.card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 124, 250, 0.35);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.07) inset, 0 16px 40px -12px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(91, 124, 250, 0.18);
}

.grad-text {
  background: linear-gradient(92deg, #E7ECFF 0%, #9DB8FF 60%, #A78BFA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Animations ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .5s ease both; }
.d1 { animation-delay: .05s } .d2 { animation-delay: .1s } .d3 { animation-delay: .15s }
.d4 { animation-delay: .2s } .d5 { animation-delay: .25s } .d6 { animation-delay: .3s }

@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
.skeleton {
  background: linear-gradient(90deg, #131A2B 25%, #1C2640 50%, #131A2B 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: .5rem;
}

@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(45, 201, 138, .5); } 50% { box-shadow: 0 0 0 6px rgba(45, 201, 138, 0); } }
.pulse-dot { animation: pulseDot 2s infinite; }

/* ---------- Components ---------- */
.progress-track { background: rgba(255, 255, 255, 0.06); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; transition: width 1.2s cubic-bezier(.22, .8, .3, 1); }

.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: 10.5px; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.badge-mint  { background: rgba(45, 201, 138, .10); color: #4ADE9D; border-color: rgba(45, 201, 138, .25); }
.badge-amber { background: rgba(245, 177, 76, .10); color: #F5B14C; border-color: rgba(245, 177, 76, .25); }
.badge-rose  { background: rgba(244, 115, 143, .10); color: #F4738F; border-color: rgba(244, 115, 143, .25); }
.badge-brand { background: rgba(91, 124, 250, .12); color: #9DB8FF; border-color: rgba(91, 124, 250, .28); }
.badge-slate { background: rgba(255, 255, 255, .05); color: #94A3B8; border-color: rgba(255, 255, 255, .10); }
.badge-violet{ background: rgba(167, 139, 250, .12); color: #C4B5FD; border-color: rgba(167, 139, 250, .28); }

.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: .75rem;
  font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(92deg, #5B7CFA, #4761E6);
  box-shadow: 0 0 24px -4px rgba(91, 124, 250, 0.45);
  transition: opacity .18s ease, transform .18s ease;
  text-decoration: none;
}
.btn-primary:hover { opacity: .9; transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: .75rem;
  font-size: 13px; font-weight: 500; color: #CBD5E1;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background .18s ease;
  text-decoration: none;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: .75rem;
  padding: .5rem .85rem;
  font-size: 13px; color: #E2E8F0;
  transition: border-color .18s ease, box-shadow .18s ease;
  width: 100%;
}
.input::placeholder { color: #475569; }
.input:focus { outline: none; border-color: rgba(91, 124, 250, 0.5); box-shadow: 0 0 0 3px rgba(91, 124, 250, 0.15); }
select.input { color-scheme: dark; }
select.input option { background: #0F172A; color: #E2E8F0; }
html.light select.input { color-scheme: light; }
html.light select.input option { background: #FFFFFF; color: #1E293B; }

.seg-btn { transition: all .18s ease; padding: .25rem .8rem; border-radius: .5rem; font-size: 12px; font-weight: 500; color: #94A3B8; text-decoration: none; }
.seg-btn.active { background: var(--ink-700); color: #fff; box-shadow: 0 0 0 1px rgba(91, 124, 250, 0.4), 0 4px 12px -4px rgba(0, 0, 0, .5); }
.seg-wrap { display: inline-flex; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: .65rem; padding: 2px; }

/* tabs */
.tab-btn { padding: .55rem .25rem; margin-right: 1.4rem; font-size: 13px; font-weight: 500; color: #64748B; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.tab-btn:hover { color: #CBD5E1; }
.tab-btn.active { color: #fff; border-color: var(--brand); }

/* ---------- Tables ---------- */
.table-pro { width: 100%; text-align: left; font-size: 13px; }
.table-pro thead tr { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #475569; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.table-pro thead th { font-weight: 600; padding: .7rem 1rem; }
.table-pro tbody td { padding: .85rem 1rem; }
.table-pro tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background .15s ease; }
.table-pro tbody tr:hover { background: rgba(91, 124, 250, 0.05); }

/* ---------- Navigation ---------- */
.nav-item { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: .5rem; font-size: 13.5px; font-weight: 500; color: #94A3B8; border: 1px solid transparent; transition: background .15s ease, color .15s ease; text-decoration: none; }
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #E7ECFF; }
.nav-item.active { background: linear-gradient(90deg, rgba(91, 124, 250, 0.18), rgba(91, 124, 250, 0.05)); color: #fff; border-color: rgba(91, 124, 250, 0.28); }

#sidebar { transition: width .25s cubic-bezier(.4, 0, .2, 1); }
#sidebar.collapsed { width: 76px; }
#sidebar.collapsed .nav-label, #sidebar.collapsed .side-section,
#sidebar.collapsed .brand-text, #sidebar.collapsed .plan-card,
#sidebar.collapsed .nav-pill { display: none; }
#sidebar.collapsed .nav-item { justify-content: center; }

@media (max-width: 1024px) {
  #sidebar { position: fixed; z-index: 50; transform: translateX(-100%); transition: transform .25s ease; height: 100dvh; }
  #sidebar.mobile-open { transform: translateX(0); }
  #sidebar.collapsed { width: 264px; }
  #sidebar.collapsed .nav-label, #sidebar.collapsed .side-section,
  #sidebar.collapsed .brand-text, #sidebar.collapsed .plan-card,
  #sidebar.collapsed .nav-pill { display: revert; }
  #sidebar.collapsed .nav-item { justify-content: flex-start; }
}

/* ---------- Misc ---------- */
.ring-svg { transform: rotate(-90deg); }
.ring-svg circle { transition: stroke-dashoffset 1.4s cubic-bezier(.22, .8, .3, 1); }

.kbd { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #475569; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: .3rem; padding: .1rem .35rem; }

.toggle { position: relative; width: 38px; height: 21px; border-radius: 999px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.10); cursor: pointer; transition: background .2s ease; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 999px; background: #94A3B8; transition: transform .2s ease, background .2s ease; }
.toggle.on { background: linear-gradient(92deg, #5B7CFA, #4761E6); border-color: rgba(91, 124, 250, .5); }
.toggle.on::after { transform: translateX(17px); background: #fff; }

/* ---------- Empty states ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4rem 1.5rem; color: #64748B;
}
.empty-state .empty-icon {
  width: 56px; height: 56px; border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: #475569;
  margin-bottom: 1rem;
}
.empty-state .empty-icon svg { width: 26px; height: 26px; }
.empty-state h3 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: .25rem; }
.empty-state p { font-size: 13px; max-width: 320px; }

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(3, 6, 14, 0.65); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-overlay .modal-panel {
  transform: translateY(12px) scale(.98); transition: transform .2s ease;
}
.modal-overlay.open .modal-panel { transform: translateY(0) scale(1); }
html.light .modal-overlay { background: rgba(15, 23, 42, 0.35); }

/* ---------- KPI cards ---------- */
.kpi-icon { width: 2.25rem; height: 2.25rem; border-radius: .75rem; border: 1px solid; display: flex; align-items: center; justify-content: center; }
.kpi-delta { display: inline-flex; align-items: center; gap: .15rem; font-size: 11px; font-weight: 700; }
.kpi-delta.up { color: #4ADE9D; }
.kpi-delta.down { color: #F4738F; }

/* ============================================================
   Light theme — toggled via <html class="light">
   ============================================================ */
html.light {
  color-scheme: light;
}
html.light body {
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(91, 124, 250, 0.06), transparent 60%),
    radial-gradient(900px 480px at -10% 0%, rgba(167, 139, 250, 0.05), transparent 55%),
    #F4F6FB;
}
html.light ::-webkit-scrollbar-thumb { background: #CBD5E1; border: 2px solid #F4F6FB; }

html.light .glass,
html.light .card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.65) 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px -12px rgba(15, 23, 42, 0.12);
}
html.light .card-hover:hover {
  border-color: rgba(91, 124, 250, 0.35);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 16px 40px -16px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(91, 124, 250, 0.15);
}
html.light .grad-text {
  background: linear-gradient(92deg, #1B2438 0%, #4761E6 60%, #7C3AED 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Text colors */
html.light .text-white { color: #0F172A; }
html.light .text-slate-200 { color: #1E293B; }
html.light .text-slate-300 { color: #334155; }
html.light .text-slate-400 { color: #64748B; }
html.light .text-slate-500 { color: #7C8AA5; }
html.light .text-slate-600 { color: #94A3B8; }
html.light .text-ink-900 { color: #F4F6FB; }

/* Borders & subtle fills */
html.light .border-white\/5,
html.light .border-white\/8,
html.light .border-white\/10 { border-color: rgba(15, 23, 42, 0.08); }
html.light .bg-white\/5,
html.light .bg-white\/\[0\.025\],
html.light .bg-white\/\[0\.04\] { background-color: rgba(15, 23, 42, 0.035); }
html.light .hover\:bg-white\/5:hover { background-color: rgba(15, 23, 42, 0.05); }

/* Components */
html.light .btn-ghost { color: #334155; background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); }
html.light .btn-ghost:hover { background: rgba(15, 23, 42, 0.08); }
html.light .input { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.1); color: #1E293B; }
html.light .input::placeholder { color: #94A3B8; }
html.light .seg-wrap { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); }
html.light .seg-btn { color: #64748B; }
html.light .seg-btn.active { background: #fff; color: #1E293B; box-shadow: 0 0 0 1px rgba(91, 124, 250, 0.3), 0 4px 12px -4px rgba(15, 23, 42, 0.2); }
html.light .table-pro thead tr { border-color: rgba(15, 23, 42, 0.08); color: #94A3B8; }
html.light .table-pro tbody tr { border-color: rgba(15, 23, 42, 0.06); }
html.light .table-pro tbody tr:hover { background: rgba(91, 124, 250, 0.04); }
html.light .nav-item { color: #64748B; }
html.light .nav-item:hover { background: rgba(15, 23, 42, 0.04); color: #1E293B; }
html.light .nav-item.active { background: linear-gradient(90deg, rgba(91, 124, 250, 0.14), rgba(91, 124, 250, 0.03)); color: #1E293B; border-color: rgba(91, 124, 250, 0.25); }
html.light .kbd { color: #94A3B8; background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); }
html.light .progress-track { background: rgba(15, 23, 42, 0.07); }
html.light .toggle { background: rgba(15, 23, 42, 0.1); border-color: rgba(15, 23, 42, 0.1); }
html.light .toggle::after { background: #94A3B8; }
html.light .tab-btn { color: #94A3B8; }
html.light .tab-btn:hover { color: #1E293B; }
html.light .tab-btn.active { color: #1E293B; }
html.light .empty-state .empty-icon { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); color: #94A3B8; }
html.light .empty-state h3 { color: #1E293B; }