/* ============================================================
   Billing ISP — Modern UI
   Font: Inter · Palette: Indigo/Slate · Style: Soft SaaS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root,
[data-theme="indigo"] {
  --sidebar-w: 264px;
  --brand: #6366f1;
  --brand-2: #8b5cf6;
  --brand-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --brand-soft: rgba(99, 102, 241, .12);
  --brand-hover-a: #4f46e5;
  --brand-hover-b: #7c3aed;
  --ring-rgb: 99, 102, 241;
  --bg: #f1f5f9;
  --bg-card: #ffffff;
  --bg-elev: #f8fafc;
  --sidebar-bg: #0b1220;
  --sidebar-soft: #111827;
  --text: #0f172a;
  --text-mute: #64748b;
  --border: #e2e8f0;
  --border-soft: #f1f5f9;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #0ea5e9;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow: 0 4px 24px -6px rgba(15, 23, 42, .08), 0 2px 6px -2px rgba(15, 23, 42, .04);
  --shadow-lg: 0 20px 50px -20px rgba(15, 23, 42, .25);
  --ring: 0 0 0 4px rgba(99, 102, 241, .18);
}

/* ---- Tema terang: warna aksen ---- */
[data-theme="blue"] {
  --brand: #2563eb; --brand-2: #0ea5e9;
  --brand-grad: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  --brand-soft: rgba(37, 99, 235, .12);
  --brand-hover-a: #1d4ed8; --brand-hover-b: #0284c7;
  --ring-rgb: 37, 99, 235;
  --ring: 0 0 0 4px rgba(37, 99, 235, .18);
}
[data-theme="emerald"] {
  --brand: #059669; --brand-2: #10b981;
  --brand-grad: linear-gradient(135deg, #059669 0%, #34d399 100%);
  --brand-soft: rgba(5, 150, 105, .12);
  --brand-hover-a: #047857; --brand-hover-b: #059669;
  --ring-rgb: 5, 150, 105;
  --ring: 0 0 0 4px rgba(5, 150, 105, .18);
}
[data-theme="teal"] {
  --brand: #0d9488; --brand-2: #14b8a6;
  --brand-grad: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
  --brand-soft: rgba(13, 148, 136, .12);
  --brand-hover-a: #0f766e; --brand-hover-b: #14b8a6;
  --ring-rgb: 13, 148, 136;
  --ring: 0 0 0 4px rgba(13, 148, 136, .18);
}
[data-theme="rose"] {
  --brand: #e11d48; --brand-2: #f43f5e;
  --brand-grad: linear-gradient(135deg, #e11d48 0%, #fb7185 100%);
  --brand-soft: rgba(225, 29, 72, .12);
  --brand-hover-a: #be123c; --brand-hover-b: #e11d48;
  --ring-rgb: 225, 29, 72;
  --ring: 0 0 0 4px rgba(225, 29, 72, .18);
}
[data-theme="amber"] {
  --brand: #d97706; --brand-2: #f59e0b;
  --brand-grad: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
  --brand-soft: rgba(217, 119, 6, .12);
  --brand-hover-a: #b45309; --brand-hover-b: #d97706;
  --ring-rgb: 217, 119, 6;
  --ring: 0 0 0 4px rgba(217, 119, 6, .18);
}
[data-theme="violet"] {
  --brand: #7c3aed; --brand-2: #a78bfa;
  --brand-grad: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  --brand-soft: rgba(124, 58, 237, .12);
  --brand-hover-a: #6d28d9; --brand-hover-b: #8b5cf6;
  --ring-rgb: 124, 58, 237;
  --ring: 0 0 0 4px rgba(124, 58, 237, .18);
}
[data-theme="cyan"] {
  --brand: #0891b2; --brand-2: #06b6d4;
  --brand-grad: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%);
  --brand-soft: rgba(8, 145, 178, .12);
  --brand-hover-a: #0e7490; --brand-hover-b: #0891b2;
  --ring-rgb: 8, 145, 178;
  --ring: 0 0 0 4px rgba(8, 145, 178, .18);
}
[data-theme="pink"] {
  --brand: #db2777; --brand-2: #ec4899;
  --brand-grad: linear-gradient(135deg, #db2777 0%, #f472b6 100%);
  --brand-soft: rgba(219, 39, 119, .12);
  --brand-hover-a: #be185d; --brand-hover-b: #db2777;
  --ring-rgb: 219, 39, 119;
  --ring: 0 0 0 4px rgba(219, 39, 119, .18);
}

/* ---- Tema gelap ---- */
[data-theme="dark"] {
  --bg: #0b1220;
  --bg-card: #111827;
  --bg-elev: #1e293b;
  --text: #e2e8f0;
  --text-mute: #94a3b8;
  --border: #1f2a3d;
  --border-soft: #1a2333;
  --sidebar-bg: #070d18;
  --sidebar-soft: #0b1220;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 4px 24px -6px rgba(0, 0, 0, .45), 0 2px 6px -2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, .6);
}
[data-theme="dark-blue"] {
  --brand: #38bdf8; --brand-2: #60a5fa;
  --brand-grad: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  --brand-soft: rgba(56, 189, 248, .14);
  --brand-hover-a: #0284c7; --brand-hover-b: #2563eb;
  --ring-rgb: 56, 189, 248;
  --ring: 0 0 0 4px rgba(56, 189, 248, .2);
  --bg: #07101f;
  --bg-card: #0d1729;
  --bg-elev: #132036;
  --text: #e2e8f0;
  --text-mute: #94a3b8;
  --border: #1a2a44;
  --border-soft: #152238;
  --sidebar-bg: #050c16;
  --sidebar-soft: #0a1322;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 4px 24px -6px rgba(0, 0, 0, .5), 0 2px 6px -2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, .65);
}
[data-theme="dark-violet"] {
  --brand: #a78bfa; --brand-2: #c4b5fd;
  --brand-grad: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  --brand-soft: rgba(167, 139, 250, .14);
  --brand-hover-a: #7c3aed; --brand-hover-b: #8b5cf6;
  --ring-rgb: 167, 139, 250;
  --ring: 0 0 0 4px rgba(167, 139, 250, .2);
  --bg: #0c0a14;
  --bg-card: #141022;
  --bg-elev: #1c1730;
  --text: #e9e4ff;
  --text-mute: #a396c7;
  --border: #2a2245;
  --border-soft: #221c3a;
  --sidebar-bg: #080612;
  --sidebar-soft: #100c1e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 4px 24px -6px rgba(0, 0, 0, .5), 0 2px 6px -2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, .65);
}
[data-theme="dark-emerald"] {
  --brand: #34d399; --brand-2: #6ee7b7;
  --brand-grad: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  --brand-soft: rgba(52, 211, 153, .14);
  --brand-hover-a: #059669; --brand-hover-b: #10b981;
  --ring-rgb: 52, 211, 153;
  --ring: 0 0 0 4px rgba(52, 211, 153, .2);
  --bg: #06120e;
  --bg-card: #0c1a15;
  --bg-elev: #12261f;
  --text: #e2e8f0;
  --text-mute: #94a3b8;
  --border: #1a332a;
  --border-soft: #152b23;
  --sidebar-bg: #040d0a;
  --sidebar-soft: #0a1612;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 4px 24px -6px rgba(0, 0, 0, .5), 0 2px 6px -2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, .65);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--brand-soft), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--brand-soft), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

.app { display: flex; min-height: 100vh; }

::selection { background: var(--brand-soft); }

/* ================= SIDEBAR ================= */
.sidebar {
  width: var(--sidebar-w);
  background:
    linear-gradient(180deg, rgba(99, 102, 241, .12) 0%, transparent 18%),
    var(--sidebar-bg);
  color: #94a3b8;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  border-right: 1px solid rgba(255, 255, 255, .05);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem .65rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.02em;
}
.sidebar-brand .brand-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #fff;
  display: grid; place-items: center;
  padding: 5px;
  box-shadow: 0 8px 20px -6px rgba(245, 130, 31, .45);
  flex-shrink: 0;
}
.sidebar-brand .brand-icon img {
  width: 100%; height: 100%;
  display: block;
}
.sidebar-brand small {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  color: #64748b;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 1px;
}

.sidebar-nav {
  padding: .3rem .55rem .75rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #1e293b transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 8px; }

.nav-section {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #475569;
  padding: .7rem .65rem .2rem;
  margin-top: .15rem;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #94a3b8;
  padding: .48rem .65rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1px;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .18s ease;
  position: relative;
  border: 1px solid transparent;
}
.sidebar-nav .nav-link i {
  font-size: 1rem;
  width: 18px;
  text-align: center;
  opacity: .85;
}
.sidebar-nav .nav-link:hover {
  background: rgba(255, 255, 255, .05);
  color: #e2e8f0;
  transform: translateX(2px);
}
.sidebar-nav .nav-link.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, .95), rgba(139, 92, 246, .9));
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(99, 102, 241, .8);
  border-color: rgba(255, 255, 255, .12);
}
.sidebar-nav .nav-link.active i { opacity: 1; }
.sidebar-nav .nav-link.active::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: #a5b4fc;
  border-radius: 0 4px 4px 0;
}
.sidebar-divider {
  border-top: 1px solid rgba(255, 255, 255, .06);
  margin: .45rem .4rem;
}

/* ================= MAIN / TOPBAR ================= */
.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

.topbar {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226, 232, 240, .8);
  padding: .8rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 1020;
}
.topbar h1 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text);
}
.topbar .crumb {
  font-size: .72rem;
  color: var(--text-mute);
  font-weight: 500;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .3rem .3rem .7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .8rem;
}
.user-chip .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: .75rem;
}
.user-chip .who { line-height: 1.15; }
.user-chip .who b { display: block; font-size: .8rem; color: var(--text); }
.user-chip .who span { font-size: .68rem; color: var(--text-mute); text-transform: capitalize; }

.content { flex: 1; padding: 1.5rem; animation: fadeUp .35s ease both; }

.app-footer {
  padding: .85rem 1.5rem;
  background: rgba(255, 255, 255, .7);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--text-mute);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================= STAT CARDS ================= */
.stat-card {
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
  height: 100%;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.stat-card .card-body { padding: 1.15rem 1.25rem; }
.stat-card .icon-box {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .35);
}
.stat-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-mute);
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1.2;
}
.stat-value small { font-weight: 600; opacity: .55; }

/* gradien ikon ( dipakai via class / inline ) */
.icon-blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.icon-red    { background: linear-gradient(135deg, #f87171, #ef4444); }
.icon-green  { background: linear-gradient(135deg, #34d399, #059669); }
.icon-purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.icon-amber  { background: linear-gradient(135deg, #fbbf24, #d97706); }
.icon-cyan   { background: linear-gradient(135deg, #22d3ee, #0891b2); }

/* ================= PANELS ================= */
.panel {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(226, 232, 240, .9);
  height: 100%;
}
.panel-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-weight: 650;
  font-size: .92rem;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.panel-header i { color: var(--brand); }
.panel-body { padding: 1.25rem; }

/* ================= TABLE ================= */
.table-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(226, 232, 240, .9);
  overflow: hidden;
}
.table { margin-bottom: 0; }
.table thead th {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-mute);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border) !important;
  padding: .75rem .9rem;
  white-space: nowrap;
}
.table td {
  vertical-align: middle;
  font-size: .875rem;
  padding: .75rem .9rem;
  border-color: var(--border-soft);
}
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--brand-soft); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ================= BUTTONS ================= */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .875rem;
  padding: .45rem .95rem;
  transition: all .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { box-shadow: var(--ring); outline: none; }

.btn-primary {
  background: var(--brand-grad);
  border: none;
  box-shadow: 0 6px 16px -6px rgba(var(--ring-rgb), .55);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, var(--brand-hover-a), var(--brand-hover-b));
  border: none;
  box-shadow: 0 8px 20px -6px rgba(var(--ring-rgb), .65);
}
.btn-outline-primary { border-color: rgba(var(--ring-rgb), .45); color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.btn-outline-secondary { border-color: var(--border); color: var(--text-mute); }
.btn-outline-secondary:hover { background: var(--bg-elev); color: var(--text); border-color: var(--text-mute); }
.btn-sm { padding: .3rem .55rem; font-size: .78rem; border-radius: 8px; }

/* ================= FORMS ================= */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-size: .9rem;
  padding: .5rem .8rem;
  background-color: var(--bg-card);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: var(--ring);
  background-color: var(--bg-card);
  color: var(--text);
}
.form-control::placeholder { color: var(--text-mute); opacity: .75; }
.form-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .3rem;
}
.form-text { font-size: .74rem; color: var(--text-mute); }
.input-group-text {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border: 1.5px solid var(--border);
  border-right: 0;
  background: var(--bg-elev);
  color: var(--text-mute);
}
.input-group .form-control {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* ================= BADGES ================= */
.badge {
  font-weight: 600;
  font-size: .7rem;
 padding: .32em .65em;
  border-radius: 8px;
  letter-spacing: .01em;
}
.badge.text-bg-success { background: rgba(16, 185, 129, .13) !important; color: #047857 !important; }
.badge.text-bg-danger  { background: rgba(239, 68, 68, .13)  !important; color: #b91c1c !important; }
.badge.text-bg-warning { background: rgba(245, 158, 11, .15) !important; color: #b45309 !important; }
.badge.text-bg-info    { background: rgba(14, 165, 233, .13)  !important; color: #0369a1 !important; }
.badge.text-bg-primary { background: rgba(99, 102, 241, .13)  !important; color: #4338ca !important; }
.badge.text-bg-secondary { background: #f1f5f9 !important; color: #475569 !important; }
.badge.text-bg-light   { background: #f1f5f9 !important; color: #334155 !important; }

/* ================= ALERTS / FLASH ================= */
.alert {
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: .875rem;
  box-shadow: var(--shadow-sm);
}
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* ================= PROGRESS ================= */
.progress {
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  border-radius: 999px;
  background: var(--brand-grad);
}

/* ================= LIST GROUP ================= */
.list-group-item {
  border-color: var(--border-soft);
  font-size: .875rem;
  color: var(--text);
  background: var(--bg-card);
  transition: background .12s;
}
.list-group-item:hover { background: var(--brand-soft); }

/* ================= LOGIN ================= */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #0b1220 0%, #1e1b4b 45%, #312e81 100%);
}
.login-page .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .45;
  pointer-events: none;
  animation: float 12s ease-in-out infinite;
}
.login-page .orb-1 { width: 340px; height: 340px; background: #6366f1; top: -80px; left: -60px; }
.login-page .orb-2 { width: 280px; height: 280px; background: #a855f7; bottom: -60px; right: -40px; animation-delay: -4s; }
.login-page .orb-3 { width: 200px; height: 200px; background: #06b6d4; top: 40%; right: 18%; opacity: .3; animation-delay: -7s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(18px, -22px) scale(1.05); }
}

.login-card {
  width: 100%;
  max-width: 420px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}
.login-card .card-body { padding: 2.25rem 2rem; }
.login-logo {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 12px 28px -8px rgba(245, 130, 31, .55);
}
.login-logo img { display: block; }
.login-card h4 { color: #fff; letter-spacing: -.03em; }
.login-card .subtitle { color: #a5b4fc; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.login-card .form-label { color: #cbd5e1; }
.login-card .form-control {
  background: rgba(15, 23, 42, .45);
  border-color: rgba(255, 255, 255, .12);
  color: #f1f5f9;
}
.login-card .form-control:focus {
  background: rgba(15, 23, 42, .6);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .25);
}
.login-card .form-control::placeholder { color: #64748b; }
.login-card .input-group-text {
  background: rgba(15, 23, 42, .45);
  border-color: rgba(255, 255, 255, .12);
  border-right: 0;
  color: #94a3b8;
}
.login-card .btn-primary { padding: .65rem; font-size: .95rem; }
.login-card .alert-danger {
  background: rgba(239, 68, 68, .15);
  border-color: rgba(239, 68, 68, .35);
  color: #fecaca;
}

/* ================= UTILITIES ================= */
.cursor-pointer { cursor: pointer; }
.text-xs { font-size: .78rem; }
.text-sm { font-size: .87rem; }
.mono { font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace; }
.table-op { display: flex; gap: .3rem; align-items: center; }

/* month pager (btn-group) */
.btn-group .btn { border-color: var(--border); background: var(--bg-card); color: var(--text-mute); }
.btn-group .btn:hover { background: var(--bg-elev); color: var(--text); }
.btn-group .btn.fw-semibold {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: rgba(99, 102, 241, .25);
  pointer-events: none;
}

/* cron / code block */
pre.bg-dark { border-radius: var(--radius-sm); font-size: .8rem; }

.online-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.online-dot.on {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .2);
  animation: pulse 2s infinite;
}
.online-dot.off { background: #cbd5e1; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, .08); }
}

code {
  background: #f1f5f9;
  color: #4338ca;
  padding: .1em .4em;
  border-radius: 6px;
  font-size: .85em;
}
pre code { background: none; color: inherit; padding: 0; }

kbd {
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-size: .8em;
}

/* overlay sidebar (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  z-index: 1035;
}
.sidebar-overlay.show { display: block; }

/* sidebar toggle desktop: shrink (opsional via JS class) */
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .main { margin-left: 0; }

/* ================= RESPONSIVE ================= */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  .sidebar.show {
    transform: translateX(0);
    box-shadow: 20px 0 60px rgba(0, 0, 0, .35);
  }
  .main { margin-left: 0; }
  .content { padding: 1rem; }
  .topbar { padding: .7rem 1rem; }
}

@media (max-width: 575.98px) {
  .stat-value { font-size: 1.25rem; }
  .topbar h1 { font-size: .98rem; }
  .user-chip .who { display: none; }
}

/* print: struk */
@media print {
  .sidebar, .topbar, .app-footer, .btn, .theme-picker { display: none !important; }
  .main { margin: 0; }
  body { background: #fff; }
}

/* ================= THEME PICKER ================= */
.theme-menu {
  min-width: 220px;
  padding: .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}
.theme-menu .theme-group-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: .35rem .25rem .3rem;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
}
.theme-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  background: var(--sw, #6366f1);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.theme-swatch:hover { transform: scale(1.08); }
.theme-swatch.active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--brand);
}
.theme-swatch .swatch-check {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: #fff;
  font-size: .75rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.theme-swatch.active .swatch-check { display: grid; }
.theme-swatch[data-kind="dark"] {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* ---- dark surfaces (topbar/footer/alerts/code) ---- */
[data-theme="dark"] .topbar,
[data-theme="dark-blue"] .topbar,
[data-theme="dark-violet"] .topbar,
[data-theme="dark-emerald"] .topbar {
  background: rgba(17, 24, 39, .88);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .app-footer,
[data-theme="dark-blue"] .app-footer,
[data-theme="dark-violet"] .app-footer,
[data-theme="dark-emerald"] .app-footer {
  background: rgba(17, 24, 39, .88);
  border-top-color: var(--border);
}
[data-theme="dark"] code,
[data-theme="dark-blue"] code,
[data-theme="dark-violet"] code,
[data-theme="dark-emerald"] code {
  background: var(--bg-elev);
  color: var(--brand);
}
[data-theme="dark"] .alert-success,
[data-theme="dark-blue"] .alert-success,
[data-theme="dark-violet"] .alert-success,
[data-theme="dark-emerald"] .alert-success {
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .35);
  color: #6ee7b7;
}
[data-theme="dark"] .alert-danger,
[data-theme="dark-blue"] .alert-danger,
[data-theme="dark-violet"] .alert-danger,
[data-theme="dark-emerald"] .alert-danger {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .35);
  color: #fca5a5;
}
[data-theme="dark"] .alert-warning,
[data-theme="dark-blue"] .alert-warning,
[data-theme="dark-violet"] .alert-warning,
[data-theme="dark-emerald"] .alert-warning {
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .35);
  color: #fcd34d;
}
[data-theme="dark"] .alert-info,
[data-theme="dark-blue"] .alert-info,
[data-theme="dark-violet"] .alert-info,
[data-theme="dark-emerald"] .alert-info {
  background: rgba(14, 165, 233, .12);
  border-color: rgba(14, 165, 233, .35);
  color: #7dd3fc;
}
[data-theme="dark"] .progress,
[data-theme="dark-blue"] .progress,
[data-theme="dark-violet"] .progress,
[data-theme="dark-emerald"] .progress {
  background: var(--bg-elev);
}
[data-theme="dark"] .badge.text-bg-secondary,
[data-theme="dark-blue"] .badge.text-bg-secondary,
[data-theme="dark-violet"] .badge.text-bg-secondary,
[data-theme="dark-emerald"] .badge.text-bg-secondary,
[data-theme="dark"] .badge.text-bg-light,
[data-theme="dark-blue"] .badge.text-bg-light,
[data-theme="dark-violet"] .badge.text-bg-light,
[data-theme="dark-emerald"] .badge.text-bg-light {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark-blue"] .form-control,
[data-theme="dark-blue"] .form-select,
[data-theme="dark-violet"] .form-control,
[data-theme="dark-violet"] .form-select,
[data-theme="dark-emerald"] .form-control,
[data-theme="dark-emerald"] .form-select {
  background-color: var(--bg);
  color: var(--text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark-blue"] .form-control:focus,
[data-theme="dark-blue"] .form-select:focus,
[data-theme="dark-violet"] .form-control:focus,
[data-theme="dark-violet"] .form-select:focus,
[data-theme="dark-emerald"] .form-control:focus,
[data-theme="dark-emerald"] .form-select:focus {
  background-color: var(--bg);
  color: var(--text);
}
[data-theme="dark"] .table-light,
[data-theme="dark-blue"] .table-light,
[data-theme="dark-violet"] .table-light,
[data-theme="dark-emerald"] .table-light,
[data-theme="dark"] .table thead.table-light,
[data-theme="dark-blue"] .table thead.table-light,
[data-theme="dark-violet"] .table thead.table-light,
[data-theme="dark-emerald"] .table thead.table-light {
  background: var(--bg-elev) !important;
}
[data-theme="dark"] .table thead.table-light th,
[data-theme="dark-blue"] .table thead.table-light th,
[data-theme="dark-violet"] .table thead.table-light th,
[data-theme="dark-emerald"] .table thead.table-light th {
  background: var(--bg-elev) !important;
  color: var(--text-mute);
}

/* ================= TOPBAR META + ACCOUNT ================= */
.topbar-meta {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-mute);
  gap: .65rem;
}
.topbar-meta .meta-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.topbar-meta .meta-pill i { font-size: .95rem; color: var(--brand); }
.user-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.avatar-sm {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: .65rem;
  font-weight: 700;
}
.dropdown-header-text { font-weight: 700; font-size: .85rem; color: var(--text); }

/* ================= DASHBOARD RINGKASAN (ala screenshot) ================= */
.dash-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}
.dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 1rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}
.dash-section-head .head-left {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.dash-section-head .head-left i { color: var(--brand); }
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--success);
}
.live-dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .5);
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); }
  70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}
.summary-card {
  background: var(--bg-card);
  padding: 1.15rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 110px;
}
.summary-card .sum-label {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .35rem;
}
.summary-card .sum-value {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--brand);
}
.summary-card .sum-value.is-green { color: var(--success); }
.summary-card .sum-value.is-amber { color: var(--warning); }
.summary-card .sum-value.is-red { color: var(--danger); }
.summary-card .sum-value.is-slate { color: var(--text); }
.summary-card .sum-sub {
  font-size: .72rem;
  color: var(--text-mute);
  margin-top: .3rem;
}
.summary-card .sum-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  color: var(--brand);
  background: var(--brand-soft);
}
.summary-card .sum-icon.is-green { color: var(--success); background: rgba(16,185,129,.14); }
.summary-card .sum-icon.is-amber { color: var(--warning); background: rgba(245,158,11,.16); }
.summary-card .sum-icon.is-red { color: var(--danger); background: rgba(239,68,68,.14); }
.summary-card .sum-icon.is-slate { color: var(--text-mute); background: var(--bg-elev); }

@media (max-width: 1199.98px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .summary-grid { grid-template-columns: 1fr; }
}

/* Log aplikasi list */
.log-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}
.log-item:last-child { border-bottom: 0; }
.log-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
}
.log-body { flex: 1; min-width: 0; }
.log-user {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
}
.log-msg {
  font-size: .84rem;
  color: var(--text-mute);
  margin-top: .1rem;
}
.log-meta {
  font-size: .68rem;
  color: var(--text-mute);
  text-align: right;
  white-space: nowrap;
}

/* Info / lisensi style panel */
.meter-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: .65rem;
}
.meter-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  background: var(--brand-soft);
  color: var(--brand);
  flex-shrink: 0;
}
.meter-body { flex: 1; min-width: 0; }
.meter-title {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .35rem;
}
.meter-title .pct { color: var(--brand); font-weight: 800; }
.meter-card .progress { height: 7px; }
.meter-card .progress-bar { background: var(--brand-grad); }

.info-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 1rem 1.1rem;
  margin-top: .75rem;
}
.info-box .info-title {
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .65rem;
}
.info-box dl {
  margin: 0;
  font-size: .8rem;
}
.info-box dt { color: var(--text-mute); font-weight: 600; float: left; clear: left; width: 42%; }
.info-box dd { margin-left: 44%; margin-bottom: .35rem; font-weight: 600; color: var(--text); }

.badge-plan {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35em .7em;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
}