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

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary:       #1565C0;
  --primary-dark:  #0D47A1;
  --primary-light: #1E88E5;
  --primary-pale:  #EFF6FF;
  --gold:          #F9A825;
  --gold-dark:     #F57F17;
  --gold-pale:     #FFFDE7;
  --bg:            #F0F4F8;
  --card:          #FFFFFF;
  --border:        #E2E8F0;
  --border-light:  #F1F5F9;
  --txt-dark:      #0F172A;
  --txt-mid:       #334155;
  --txt-light:     #64748B;
  --txt-muted:     #94A3B8;
  --success:       #059669;
  --success-bg:    #ECFDF5;
  --success-bd:    #A7F3D0;
  --danger:        #DC2626;
  --danger-bg:     #FEF2F2;
  --danger-bd:     #FECACA;
  --warning:       #D97706;
  --warning-bg:    #FFFBEB;
  --warning-bd:    #FDE68A;
  --info:          #0284C7;
  --info-bg:       #F0F9FF;
  --info-bd:       #BAE6FD;
  --sh-xs: 0 1px 2px rgba(0,0,0,.05);
  --sh-sm: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --sh:    0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
  --sh-md: 0 10px 15px rgba(0,0,0,.08),0 4px 6px rgba(0,0,0,.04);
  --sh-lg: 0 20px 40px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.06);
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px;
  --sw: 255px;
  --hh: 64px;
  --tr: 0.2s ease;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--txt-dark);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.app { display: flex; min-height: 100vh; }

/* ═══════════════════════════════════════
   SIDEBAR — Dark Premium Theme
═══════════════════════════════════════ */
.sidebar {
  width: var(--sw);
  background: #0F172A;
  border-right: 1px solid rgba(255,255,255,.05);
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,.25);
  overflow-y: auto;
  transition: transform var(--tr);
}

.sb-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  height: 108px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
  overflow: hidden;
}
.sb-logo img {
  width: 88%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 12px rgba(255,255,255,.15));
  transition: transform 0.3s ease;
}
.sb-logo img:hover {
  transform: scale(1.04);
}

.sb-nav { padding: 6px 12px; flex: 1; }

.nav-label {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255,255,255,.25);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 10px 6px;
  display: block;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  font-size: 13.5px;
  transition: all var(--tr);
  margin-bottom: 4px;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05); /* light thin border after each section link */
}
.nav-item:hover {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.9);
}
.nav-item.active {
  background: rgba(21,101,192,.35);
  color: #FFFFFF;
  font-weight: 600;
  border: 1px solid rgba(21,101,192,.5);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 55%;
  background: #60A5FA;
  border-radius: 0 3px 3px 0;
}
.nav-icon {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  opacity: 0.8;
}
.nav-item.active .nav-icon { opacity: 1; }
.nav-item:hover .nav-icon { opacity: 1; }
.nav-icon svg { width: 16px; height: 16px; }

/* Individual icon colors inside sidebar links */
.nav-item-dashboard .nav-icon { color: #3B82F6; }
.nav-item-iptv .nav-icon { color: #EF4444; }
.nav-item-restream .nav-icon { color: #F59E0B; }
.nav-item-payment .nav-icon { color: #10B981; }
.nav-item-settings .nav-icon { color: #8B5CF6; }

.nav-item > span:not(.nav-icon):not(.nav-sub) { flex: 1; line-height: 1.3; }
.nav-sub {
  font-size: 10.5px;
  color: rgba(255,255,255,.35);
  display: block;
  margin-top: 1px;
}
.nav-item.active .nav-sub { color: rgba(255,255,255,.5); }

.sb-bottom {
  padding: 12px 12px 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.sb-user {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
}
.sb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #60A5FA);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 14px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(21,101,192,.4);
}
.sb-uname { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.9); }
.sb-urole { font-size: 10.5px; color: rgba(255,255,255,.35); margin-top: 1px; }
.sb-logout {
  margin-left: auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(220,38,38,.15);
  color: #FCA5A5;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid rgba(220,38,38,.2);
  transition: all var(--tr);
  flex-shrink: 0;
}
.sb-logout:hover { background: rgba(220,38,38,.8); color: white; }

/* ═══════════════════════════════════════
   HEADER — Dark Navy Theme
═══════════════════════════════════════ */
.header {
  position: fixed;
  top: 0; left: var(--sw); right: 0;
  height: var(--hh);
  background: #0F172A; /* Dark navy */
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 90;
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.hdr-left { display: flex; align-items: center; gap: 16px; }
.hdr-branding { font-size: 17px; font-weight: 900; color: #FFFFFF; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }
.hdr-page { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.8); }
.hdr-right { display: flex; align-items: center; gap: 14px; }

/* Header Search / Invoice checker */
.hdr-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 0 40px; /* shift left-center */
}
.hdr-search-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  color: #FFFFFF;
  font-size: 13px;
  width: 220px;
  outline: none;
  transition: all var(--tr);
}
.hdr-search-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--primary-light);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}
.hdr-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.hdr-balance {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  padding: 6px 14px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 13px;
  color: #FBBF24; /* Amber/Gold text */
}

.hdr-notif {
  position: relative;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px;
  transition: all var(--tr);
  color: white;
}
.hdr-notif:hover { background: rgba(255,255,255,0.1); }
.notif-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 16px; height: 16px;
  background: var(--danger);
  color: white; font-size: 9px; font-weight: 700;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #0F172A;
}

/* User header info in old panel */
.hdr-user {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
}
.hdr-username {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.hdr-logout-btn {
  background: rgba(220,38,38,0.2);
  border: none;
  color: #FCA5A5;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--tr);
}
.hdr-logout-btn:hover {
  background: var(--danger);
  color: white;
}

.hdr-notif {
  position: relative;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px;
  transition: all var(--tr);
}
.hdr-notif:hover { background: var(--border-light); }
.notif-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 16px; height: 16px;
  background: var(--danger);
  color: white; font-size: 9px; font-weight: 700;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid white;
}

/* ═══════════════════════════════════════
   MAIN
═══════════════════════════════════════ */
.main {
  margin-left: var(--sw);
  padding-top: var(--hh);
  min-height: 100vh;
  flex: 1;
}
.page { padding: 24px; }

/* ═══════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
  transition: all var(--tr);
  cursor: default;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.stat-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; width: 100%; height: 3px;
  background: var(--c-accent, var(--primary));
}
.stat-ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
  background: var(--c-ico-bg, var(--primary-pale));
}
.stat-val {
  font-size: 28px; font-weight: 900;
  color: var(--txt-dark);
  letter-spacing: -1px; line-height: 1;
}
.stat-lbl {
  font-size: 11.5px; color: var(--txt-light);
  font-weight: 600; margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.stat-sub { font-size: 11px; color: var(--txt-muted); margin-top: 2px; }

/* Solid Color Stat Cards overrides */
.stat-card.sc-red { background: linear-gradient(135deg, #EF4444, #DC2626); color: white; border: none; }
.stat-card.sc-blue { background: linear-gradient(135deg, #3B82F6, #2563EB); color: white; border: none; }
.stat-card.sc-orange { background: linear-gradient(135deg, #F59E0B, #D97706); color: white; border: none; }
.stat-card.sc-purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED); color: white; border: none; }
.stat-card.sc-pink { background: linear-gradient(135deg, #EC4899, #DB2777); color: white; border: none; }
.stat-card.sc-teal { background: linear-gradient(135deg, #14B8A6, #0D9488); color: white; border: none; }
.stat-card.sc-yellow { background: linear-gradient(135deg, #FBBF24, #D97706); color: white; border: none; }
.stat-card.sc-green { background: linear-gradient(135deg, #10B981, #059669); color: white; border: none; }

.stat-card[class*="sc-"]::before { display: none; }
.stat-card[class*="sc-"] .stat-val { color: #FFFFFF; }
.stat-card[class*="sc-"] .stat-lbl { color: rgba(255, 255, 255, 0.85); }
.stat-card[class*="sc-"] .stat-sub { color: rgba(255, 255, 255, 0.7); }
.stat-card[class*="sc-"] .stat-ico { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }


/* ═══════════════════════════════════════
   CARD
═══════════════════════════════════════ */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  margin-bottom: 20px;
}
.card-hdr {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-light);
}
.card-title {
  font-size: 14px; font-weight: 700;
  color: var(--txt-dark);
  display: flex; align-items: center; gap: 8px;
}
.card-title-ico {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--primary-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.card-body { padding: 20px; }

/* ═══════════════════════════════════════
   TABLE
═══════════════════════════════════════ */
.tbl-wrap { overflow-x: auto; }
.tbl-toolbar {
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 14px 20px;
}
.export-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.search-box {
  display: flex; align-items: center; gap: 8px;
}
.search-inp {
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px; width: 200px;
  outline: none; transition: all var(--tr);
  background: var(--bg);
}
.search-inp:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(21,101,192,.1); }

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead tr {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.data-table thead th {
  padding: 11px 14px;
  color: white; font-weight: 600;
  text-align: left; font-size: 11.5px;
  letter-spacing: 0.4px; white-space: nowrap;
}
.data-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background var(--tr);
}
.data-table tbody tr:hover { background: #F8FAFC; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody td {
  padding: 11px 14px;
  color: var(--txt-mid);
  vertical-align: middle;
}

.tbl-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-top: 1px solid var(--border-light);
  font-size: 12.5px; color: var(--txt-light);
}
.pagination { display: flex; gap: 4px; }
.pg-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: white; font-size: 12.5px;
  cursor: pointer; color: var(--txt-mid);
  font-weight: 600; transition: all var(--tr);
}
.pg-btn:hover { background: var(--primary-pale); color: var(--primary); border-color: #BFDBFE; }
.pg-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

/* ═══════════════════════════════════════
   BADGES
═══════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
}
.badge-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-bd); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger-bd);  }
.badge-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-bd); }
.badge-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid var(--info-bd);    }
.badge-gray    { background: #F1F5F9; color: var(--txt-light); border: 1px solid var(--border); }
.badge-primary { background: var(--primary-pale); color: var(--primary); border: 1px solid #BFDBFE; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600;
  cursor: pointer; border: none;
  transition: all var(--tr);
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: scale(.98); }
.btn-xs { padding: 4px 9px; font-size: 11.5px; border-radius: 5px; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-lg { padding: 11px 22px; font-size: 14px; border-radius: var(--r); }

.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(21,101,192,.4); }

.btn-success { background: linear-gradient(135deg, #059669, #047857); color: white; }
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(5,150,105,.35); }

.btn-danger { background: linear-gradient(135deg, #DC2626, #B91C1C); color: white; }
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(220,38,38,.3); }

.btn-warning { background: linear-gradient(135deg, #D97706, #B45309); color: white; }
.btn-warning:hover { transform: translateY(-1px); }

.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: white; }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(249,168,37,.4); }

.btn-outline {
  background: transparent; color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-outline:hover { background: var(--primary-pale); }

.btn-ghost {
  background: var(--bg); color: var(--txt-mid);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--border-light); }

/* ═══════════════════════════════════════
   FORMS
═══════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 12.5px;
  font-weight: 700; color: var(--txt-mid); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.form-ctrl {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--txt-dark);
  background: white; outline: none;
  transition: all var(--tr);
}
.form-ctrl:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,101,192,.1); }
.form-ctrl:disabled { background: var(--bg); color: var(--txt-light); cursor: not-allowed; }
.form-ctrl.mono { font-family: 'Courier New', monospace; font-size: 12.5px; }
.form-hint { font-size: 11.5px; color: var(--txt-muted); margin-top: 4px; }
.form-row { display: flex; gap: 12px; align-items: flex-end; }

/* ═══════════════════════════════════════
   ALERTS / NOTICES
═══════════════════════════════════════ */
.alert {
  padding: 11px 15px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 14px;
}
.alert-info    { background: var(--info-bg);    color: #1E40AF; border: 1px solid var(--info-bd); }
.alert-warning { background: var(--warning-bg); color: #92400E; border: 1px solid var(--warning-bd); }
.alert-danger  { background: var(--danger-bg);  color: #991B1B; border: 1px solid var(--danger-bd); }
.alert-success { background: var(--success-bg); color: #065F46; border: 1px solid var(--success-bd); }

/* ═══════════════════════════════════════
   LINE DETAILS CELL
═══════════════════════════════════════ */
.cred-block { display: flex; flex-direction: column; gap: 3px; }
.cred-url {
  font-family: 'Courier New', monospace;
  font-size: 10.5px; color: var(--txt-mid);
  background: var(--bg); padding: 3px 7px;
  border-radius: 4px; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; cursor: pointer; border: 1px solid var(--border);
}
.cred-url:hover { background: var(--primary-pale); color: var(--primary); }
.cred-line { font-size: 12px; color: var(--txt-mid); }
.cred-line strong { color: var(--primary); font-weight: 700; }

/* ═══════════════════════════════════════
   INFO STRIP
═══════════════════════════════════════ */
.info-strip {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--primary-pale), #DBEAFE);
  border: 1px solid #BFDBFE;
  border-radius: var(--r);
  margin-bottom: 16px;
  font-size: 13px; color: #1E40AF; font-weight: 600;
}

/* ═══════════════════════════════════════
   COST CALCULATOR
═══════════════════════════════════════ */
.cost-calc {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #F8FAFC, var(--primary-pale));
  border: 1px solid #BFDBFE; border-radius: var(--r);
  margin: 16px 0;
  flex-wrap: wrap;
}
.cc-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cc-num { font-size: 22px; font-weight: 900; color: var(--primary); }
.cc-lbl { font-size: 10px; color: var(--txt-light); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.cc-sep { font-size: 22px; color: var(--txt-muted); font-weight: 300; }
.cc-total { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cc-total-num { font-size: 28px; font-weight: 900; color: var(--gold-dark); }
.cc-total-lbl { font-size: 10px; color: var(--txt-light); font-weight: 700; text-transform: uppercase; }

/* ═══════════════════════════════════════
   MODAL
═══════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(5px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all var(--tr);
  padding: 16px;
}
.overlay.open { opacity: 1; visibility: visible; }
.modal {
  background: white; border-radius: var(--r-lg);
  width: 100%; max-width: 500px;
  box-shadow: var(--sh-lg);
  transform: translateY(-16px) scale(.98);
  transition: all var(--tr);
}
.overlay.open .modal { transform: translateY(0) scale(1); }
.modal-hdr {
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 16px; font-weight: 800; color: var(--txt-dark); }
.modal-close {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--txt-light); transition: all var(--tr);
}
.modal-close:hover { background: var(--danger-bg); color: var(--danger); }
.modal-body { padding: 22px; }
.modal-ftr {
  padding: 16px 22px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ═══════════════════════════════════════
   GENERATE SECTION
═══════════════════════════════════════ */
.gen-section {
  background: var(--card); border-radius: var(--r-lg);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  overflow: hidden; margin-top: 20px;
}
.gen-hdr {
  padding: 15px 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
.gen-body { padding: 24px; }

/* ═══════════════════════════════════════
   SUBSCRIPTION TABS
═══════════════════════════════════════ */
.sub-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px; }
.sub-tab {
  padding: 6px 15px; border-radius: 20px;
  font-size: 12.5px; font-weight: 700;
  cursor: pointer; border: 1.5px solid var(--border);
  background: white; color: var(--txt-mid);
  transition: all var(--tr);
}
.sub-tab:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-pale); }
.sub-tab.st-active { background: var(--primary); color: white; border-color: var(--primary); }
.sub-tab.st-expiring { border-color: var(--warning); color: var(--warning); }
.sub-tab.st-expiring:hover,.sub-tab.st-expiring.st-active { background: var(--warning); color: white; }
.sub-tab.st-expired { border-color: var(--danger); color: var(--danger); }
.sub-tab.st-expired:hover,.sub-tab.st-expired.st-active { background: var(--danger); color: white; }

/* ═══════════════════════════════════════
   SETTINGS
═══════════════════════════════════════ */
.settings-group { margin-bottom: 28px; }
.sg-title {
  font-size: 11px; font-weight: 800;
  color: var(--txt-muted); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-light);
}
.settings-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--border-light);
}
.settings-row:last-child { border-bottom: none; }
.sr-info { flex: 1; }
.sr-label { font-size: 14px; font-weight: 600; color: var(--txt-dark); }
.sr-desc { font-size: 12px; color: var(--txt-light); margin-top: 2px; }

/* Toggle switch */
.toggle { position: relative; width: 42px; height: 23px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.tgl-slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #CBD5E1; border-radius: 23px;
  transition: var(--tr);
}
.tgl-slider:before {
  content: ''; position: absolute;
  height: 17px; width: 17px;
  left: 3px; bottom: 3px;
  background: white; border-radius: 50%;
  transition: var(--tr);
  box-shadow: var(--sh-sm);
}
.toggle input:checked + .tgl-slider { background: var(--primary); }
.toggle input:checked + .tgl-slider:before { transform: translateX(19px); }

/* Avatar */
.avatar-wrap { display: flex; align-items: center; gap: 16px; }
.avatar-big {
  width: 70px; height: 70px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 26px; font-weight: 900;
  border: 3px solid white; box-shadow: var(--sh);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   LOGIN PAGE — Premium Redesign
═══════════════════════════════════════ */
.login-bg {
  min-height: 100vh;
  background: #0A0F1E;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
}
/* Animated background orbs */
.login-bg::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(21,101,192,.3) 0%, transparent 70%);
  top: -150px; left: -150px;
  border-radius: 50%;
  animation: orb1 8s ease-in-out infinite alternate;
}
.login-bg::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(249,168,37,.15) 0%, transparent 70%);
  bottom: -100px; right: -100px;
  border-radius: 50%;
  animation: orb2 10s ease-in-out infinite alternate;
}
@keyframes orb1 { to { transform: translate(60px, 60px) scale(1.1); } }
@keyframes orb2 { to { transform: translate(-60px, -40px) scale(1.15); } }

.login-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 48px 44px;
  width: 100%; max-width: 440px;
  box-shadow: 0 40px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  position: relative; z-index: 1;
}
.login-logo {
  text-align: center;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.login-logo img {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(249,168,37,.35));
}
.login-logo-name {
  font-size: 28px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  line-height: 1;
}
.login-logo-sub {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.login-tagline { font-size: 12px; color: rgba(255,255,255,.4); font-weight: 500; margin-top: 8px; }
.login-heading {
  font-size: 20px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
  margin-bottom: 6px;
  text-align: center;
}
.login-sub {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  margin-bottom: 28px;
  text-align: center;
}

/* Dark form controls inside login card */
.login-card .form-label {
  color: rgba(255,255,255,.6);
}
.login-card .form-ctrl {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
  border-radius: 10px;
  padding: 11px 14px;
}
.login-card .form-ctrl::placeholder { color: rgba(255,255,255,.25); }
.login-card .form-ctrl:focus {
  background: rgba(255,255,255,.09);
  border-color: rgba(21,101,192,.7);
  box-shadow: 0 0 0 3px rgba(21,101,192,.2);
  color: white;
}
.login-card .form-hint { color: rgba(255,255,255,.3); }

.pw-wrap { position: relative; }
.pw-wrap .form-ctrl { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: rgba(255,255,255,.35);
  cursor: pointer; font-size: 16px;
  transition: color var(--tr);
}
.pw-toggle:hover { color: rgba(255,255,255,.8); }

.login-btn {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--primary) 0%, #1E88E5 100%);
  color: white; border: none; border-radius: 10px;
  font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: all var(--tr); font-family: inherit;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 20px rgba(21,101,192,.4);
  margin-top: 8px;
}
.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(21,101,192,.55);
}
.login-btn:active { transform: translateY(0); }
.login-footer {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.25);
  margin-top: 24px;
}

/* ═══════════════════════════════════════
   UTILITIES
═══════════════════════════════════════ */
.d-flex { display: flex; }
.ai-center { align-items: center; }
.jc-between { justify-content: space-between; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mb-4{margin-bottom:4px;}.mb-8{margin-bottom:8px;}.mb-12{margin-bottom:12px;}
.mb-16{margin-bottom:16px;}.mb-20{margin-bottom:20px;}.mb-24{margin-bottom:24px;}
.mt-4{margin-top:4px;}.mt-8{margin-top:8px;}.mt-12{margin-top:12px;}
.mt-16{margin-top:16px;}.mt-20{margin-top:20px;}
.w-full{width:100%;} .text-center{text-align:center;} .text-right{text-align:right;}
.text-sm{font-size:12px;} .text-xs{font-size:11px;}
.text-muted{color:var(--txt-muted);} .text-light{color:var(--txt-light);}
.text-primary{color:var(--primary);} .text-success{color:var(--success);}
.text-danger{color:var(--danger);} .text-warning{color:var(--warning);}
.fw-600{font-weight:600;} .fw-700{font-weight:700;} .fw-800{font-weight:800;}
.mono{font-family:'Courier New',monospace;}
.divider{height:1px;background:var(--border-light);margin:16px 0;}
.nowrap{white-space:nowrap;}

/* Payment colors */
.pay-plus{color:var(--success);font-weight:700;}
.pay-minus{color:var(--danger);font-weight:700;}

/* Show-entries */
.show-entries{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt-light);}
.show-entries select{
  padding:5px 8px;border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:13px;
  outline:none;background:white;cursor:pointer;
}

/* Copy micro-btn */
.copy-tiny{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 7px;border:1px solid var(--border);
  border-radius:4px;background:white;font-size:11px;
  cursor:pointer;color:var(--txt-light);transition:all var(--tr);
}
.copy-tiny:hover{background:var(--primary-pale);color:var(--primary);border-color:#BFDBFE;}

/* Quick action icon btn */
.icon-btn{
  width:30px;height:30px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--bg);
  font-size:14px;cursor:pointer;color:var(--txt-mid);
  transition:all var(--tr);
}
.icon-btn:hover{background:var(--primary-pale);color:var(--primary);border-color:#BFDBFE;}
.icon-btn.danger:hover{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd);}

/* Status pulse dot */
.pulse-dot{
  display:inline-block;width:8px;height:8px;
  border-radius:50%;margin-right:5px;
}
.pd-green{background:var(--success);box-shadow:0 0 0 3px rgba(5,150,105,.2);}
.pd-red{background:var(--danger);}
.pd-gray{background:var(--txt-muted);}

/* Breadcrumb */
.breadcrumb{
  display:flex;align-items:center;gap:5px;
  font-size:12.5px;color:var(--txt-light);margin-bottom:18px;
}
.breadcrumb a{color:var(--primary);}
.bc-sep{color:var(--txt-muted);}

/* Toast */
.toast-container{
  position:fixed;bottom:24px;right:24px;z-index:999;
  display:flex;flex-direction:column;gap:8px;
}
.toast{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:var(--r);
  background:var(--txt-dark);color:white;
  font-size:13px;font-weight:600;
  box-shadow:var(--sh-lg);min-width:240px;
  transform:translateX(120%);transition:all var(--tr);
}
.toast.show{transform:translateX(0);}
.toast.t-success{background:#065F46;border-left:3px solid var(--success);}
.toast.t-error{background:#7F1D1D;border-left:3px solid var(--danger);}
.toast.t-info{background:#1E3A5F;border-left:3px solid var(--info);}

/* Page Header */
.page-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:22px;flex-wrap:wrap;gap:12px;
}
.page-hdr-left h1{font-size:20px;font-weight:900;color:var(--txt-dark);}
.page-hdr-left p{font-size:13px;color:var(--txt-light);margin-top:2px;}
.page-hdr-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* Section title */
.sec-title{
  font-size:13px;font-weight:800;color:var(--txt-dark);
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.sb-open{transform:translateX(0);}
  .header,.main{margin-left:0!important;left:0!important;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .page{padding:16px;}
  .login-card{padding:32px 24px;}
  .settings-wrap{grid-template-columns:1fr!important;}
  .gen-grid{grid-template-columns:1fr!important;}
  .tbl-toolbar{flex-direction:column;align-items:flex-start;}
  .welcome-banner{flex-direction:column;gap:12px;}
}

/* ── Extra missing utilities ── */
.pulse-anim{animation:pulse-anim 2s cubic-bezier(.4,0,.6,1) infinite;}
@keyframes pulse-anim{0%,100%{opacity:1;}50%{opacity:.5;}}

.skeleton{
  background:linear-gradient(90deg,#F1F5F9 25%,#E2E8F0 50%,#F1F5F9 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--r-sm);
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* Loading spinner in buttons */
.btn-loading::after{
  content:'';width:14px;height:14px;border:2px solid rgba(255,255,255,.4);
  border-top-color:white;border-radius:50%;
  animation:btn-spin .6s linear infinite;
  display:inline-block;margin-left:6px;
}
@keyframes btn-spin{to{transform:rotate(360deg);}}

/* Show entries select */
.show-entries select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(21,101,192,.1);}

/* Restream page specific */
.gen-section .form-row{display:flex;gap:12px;}
.gen-section .form-row .form-group{flex:1;}

/* Payment page */
.bal-card .bal-actions .btn{text-align:center;justify-content:center;}

/* Settings columns */
.settings-wrap > div:first-child{min-width:0;}
.settings-wrap > div:last-child{min-width:0;}

/* Icon button active */
.icon-btn:active{transform:scale(.95);}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important;}

/* Table row selected */
tr.selected td{background:var(--primary-pale)!important;}

/* Fade in animation for content */
.page{animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* Input number without arrows */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}

/* Last login notice style (gold/yellow accent left border) */
.last-login-notice {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: #FFFDF5; /* Soft light yellow background */
  border: 1px solid #FDE68A;
  border-left: 4px solid #F59E0B; /* Strong yellow/gold left border */
  border-radius: var(--r-sm);
  font-size: 13px;
  color: #78350F;
  font-weight: 600;
  margin-bottom: 24px;
}

/* Red/Coral Footer Bar */
.footer-bar {
  background: linear-gradient(90deg, #EF4444, #DC2626); /* Red/coral gradient */
  color: #FFFFFF;
  padding: 12px 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 40px;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 10;
}