/* =================================================================
   admin.css  -- Global admin styles
   Loaded by: admin/partials/header.php
   ================================================================= */

/* === Reset & base === */
html,
body,
div,
span,
h1, h2, h3, h4, h5, h6,
p, a, button, input, select, textarea, label,
table, thead, tbody, tr, th, td,
nav, main, header, footer, section, article {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:         #0d0f14;
  --surface:    #13161e;
  --surface2:   #1a1e28;
  --border:     #232839;
  --accent:     #e8a020;
  --accent-dim: rgba(232,160,32,.12);
  --text:       #dde1ee;
  --muted:      #6b7394;
  --green:      #2dbd87;
  --red:        #e05252;
  --blue:       #4b9eff;
  --yellow:     #f5c518;
  --sidebar-w:  230px;
  --topbar-h:   56px;
  --radius:     10px;
  --font:       'Plus Jakarta Sans', sans-serif;
  --mono:       'JetBrains Mono', monospace;
}

body {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--text);
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
  font-size:   14px;
}

a              { text-decoration: none; color: inherit; }
button         { font-family: var(--font); }
textarea.frm-ctrl { resize: vertical; }

/* === Layout === */
.adm-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px; gap: 16px; z-index: 999;
}
.adm-brand     { display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; }
.adm-brand-dot { width:28px; height:28px; background:var(--accent); border-radius:7px; display:grid; place-items:center; flex-shrink:0; }
.adm-brand-dot svg { width:14px; height:14px; fill:#000; }
.adm-topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.adm-avatar { width:30px; height:30px; border-radius:50%; background:var(--accent-dim); border:1.5px solid var(--accent); display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--accent); }

.adm-sidebar {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 20px 10px; gap: 2px;
  z-index: 900; overflow-y: auto;
}
.adm-sidebar-section { font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); padding:14px 12px 6px; }
.adm-nav-link        { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--muted); transition:background .15s, color .15s; }
.adm-nav-link i      { font-size:16px; width:18px; text-align:center; flex-shrink:0; }
.adm-nav-link:hover  { background:var(--surface2); color:var(--text); }
.adm-nav-link.active { background:var(--accent-dim); color:var(--accent); }
.adm-sidebar-foot    { margin-top:auto; padding-top:12px; border-top:1px solid var(--border); }

.adm-main { margin-left:var(--sidebar-w); margin-top:var(--topbar-h); padding:28px; min-height:calc(100vh - var(--topbar-h)); flex:1; }

.adm-bottom-nav    { display:none; position:fixed; bottom:0; left:0; right:0; height:60px; background:var(--surface); border-top:1px solid var(--border); align-items:stretch; z-index:999; }
.adm-bottom-nav a  { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:9.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); transition:color .15s; }
.adm-bottom-nav a i { font-size:19px; }
.adm-bottom-nav a.active,
.adm-bottom-nav a:hover { color:var(--accent); }

/* === Cards === */
.adm-card        { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.adm-card-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); font-size:13.5px; font-weight:600; }
.stat-card       { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; transition:border-color .2s; }
.stat-card:hover { border-color:var(--accent); }
.stat-icon { font-size:20px; margin-bottom:10px; }
.stat-val  { font-family:var(--mono); font-size:26px; font-weight:600; line-height:1; }
.stat-lbl  { font-size:11px; font-weight:600; letter-spacing:.9px; text-transform:uppercase; color:var(--muted); margin-top:5px; }

/* === Table === */
.adm-table               { width:100%; border-collapse:collapse; font-size:13.5px; }
.adm-table th            { font-size:10.5px; text-transform:uppercase; letter-spacing:.9px; font-weight:700; color:var(--muted); padding:10px 16px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.adm-table td            { padding:13px 16px; border-bottom:1px solid rgba(35,40,57,.6); vertical-align:middle; }
.adm-table tr:last-child td { border-bottom:none; }
.adm-table tbody tr:hover td { background:rgba(26,30,40,.7); }

/* === Badges === */
.badge-active,
.badge-public,
.badge-redeemed { display:inline-flex; align-items:center; gap:4px; background:rgba(45,189,135,.12); color:#2dbd87; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.badge-expired  { display:inline-flex; align-items:center; gap:4px; background:rgba(224,82,82,.12); color:#e05252; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.badge-upcoming { display:inline-flex; align-items:center; gap:4px; background:rgba(75,158,255,.12); color:#4b9eff; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.badge-private  { display:inline-flex; align-items:center; gap:4px; background:rgba(107,115,148,.12); color:#6b7394; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.badge-pending  { display:inline-flex; align-items:center; gap:4px; background:rgba(245,197,24,.12); color:#f5c518; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }

/* === Buttons === */
.btn-accent  { background:var(--accent); color:#000; border:none; padding:9px 18px; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:opacity .15s; font-family:var(--font); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.btn-accent:hover { opacity:.88; color:#000; }
.btn-ghost   { background:transparent; color:var(--muted); border:1px solid var(--border); padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:500; cursor:pointer; transition:border-color .15s, color .15s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.btn-ghost:hover { border-color:var(--text); color:var(--text); }
.btn-danger  { background:transparent; color:var(--red); border:1px solid rgba(224,82,82,.3); padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:500; cursor:pointer; transition:background .15s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn-danger:hover { background:rgba(224,82,82,.1); }
.btn-success { background:transparent; color:var(--green); border:1px solid rgba(45,189,135,.3); padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:500; cursor:pointer; transition:background .15s; display:inline-flex; align-items:center; gap:6px; }
.btn-success:hover { background:rgba(45,189,135,.1); }
.btn-warning { background:transparent; color:var(--yellow); border:1px solid rgba(245,197,24,.3); padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:500; cursor:pointer; transition:background .15s; display:inline-flex; align-items:center; gap:6px; }
.btn-warning:hover { background:rgba(245,197,24,.1); }

/* === Forms === */
.frm-label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); margin-bottom:6px; }
.frm-ctrl  { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 13px; font-size:14px; font-family:var(--font); transition:border-color .15s; }
.frm-ctrl:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.frm-ctrl::placeholder { color:var(--muted); }

/* === Page headings === */
.pg-title { font-size:20px; font-weight:700; margin-bottom:3px; }
.pg-sub   { font-size:13px; color:var(--muted); margin-bottom:22px; }

/* === Alert banners === */
.adm-alert         { padding:12px 16px; border-radius:8px; font-size:13px; font-weight:500; display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.adm-alert-success { background:rgba(45,189,135,.1); border:1px solid rgba(45,189,135,.3); color:var(--green); }
.adm-alert-danger  { background:rgba(224,82,82,.1); border:1px solid rgba(224,82,82,.3); color:var(--red); }

/* === Pagination === */
.pg-bar  { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); flex-wrap:wrap; gap:8px; }
.pg-nums { display:flex; gap:3px; align-items:center; }
.pg-num  { min-width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; font-size:12.5px; font-weight:500; color:var(--muted); border:1px solid transparent; cursor:pointer; text-decoration:none; transition:border-color .15s, color .15s; padding:0 6px; }
.pg-num:hover    { border-color:var(--border); color:var(--text); }
.pg-num.active   { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); font-weight:700; pointer-events:none; }
.pg-num.disabled { opacity:.3; pointer-events:none; }
.pg-ellipsis     { color:var(--muted); padding:0 4px; line-height:30px; font-size:12px; }

/* === Toggle switch === */
.tgl       { display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:none; border:none; padding:3px 0; }
.tgl-track { width:36px; height:20px; border-radius:10px; background:var(--surface2); border:1px solid var(--border); position:relative; transition:background .2s, border-color .2s; flex-shrink:0; }
.tgl-track.on { background:rgba(45,189,135,.2); border-color:rgba(45,189,135,.5); }
.tgl-thumb { position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:var(--muted); transition:transform .2s, background .2s; }
.tgl-track.on .tgl-thumb   { transform:translateX(16px); background:var(--green); }
.tgl-track.busy .tgl-thumb { background:var(--accent); animation:tpulse .5s ease-in-out infinite alternate; }
@keyframes tpulse { from { opacity:1; } to { opacity:.3; } }
.tgl-lbl         { font-size:12px; font-weight:600; color:var(--muted); min-width:38px; transition:color .15s; }
.tgl-track.on ~ .tgl-lbl { color:var(--green); }

/* === Toast notification === */
#adm-toast { position:fixed; bottom:74px; right:20px; background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:11px 16px; border-radius:10px; font-size:13px; font-weight:500; z-index:9999; pointer-events:none; display:flex; align-items:center; gap:9px; min-width:200px; box-shadow:0 6px 20px rgba(0,0,0,.3); opacity:0; transform:translateY(8px) scale(.97); transition:opacity .2s ease, transform .2s ease; }
#adm-toast.show { opacity:1; transform:translateY(0) scale(1); }
#adm-toast .ti  { font-size:15px; }

/* =====================================================
   manage_vouchers.php — Tabs, cards, drawer, pills
   ===================================================== */

/* Info box */
.info-box { background:var(--accent-dim); border:1px solid rgba(232,160,32,.3); border-radius:8px; padding:10px 14px; font-size:12px; display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.mb-3     { margin-bottom:14px; }

/* Tabs */
.mv-tabs { display:flex; gap:4px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:4px; margin:16px 0 20px; overflow-x:auto; scrollbar-width:none; }
.mv-tabs::-webkit-scrollbar { display:none; }
.mv-tab  { flex-shrink:0; text-align:center; padding:7px 14px; border-radius:7px; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; text-decoration:none; transition:background .15s, color .15s; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.mv-tab:hover       { color:var(--text); }
.mv-tab.active      { background:var(--surface); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.25); }
.mv-tab.active i    { color:var(--accent); }
.mv-tab .tab-cnt    { display:inline-flex; align-items:center; justify-content:center; background:var(--surface2); min-width:18px; height:17px; border-radius:10px; font-size:10px; font-weight:700; padding:0 5px; }
.mv-tab.active .tab-cnt { background:var(--accent-dim); color:var(--accent); }

/* Create form */
.create-panel      { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:20px; display:none; }
.create-panel.open { display:block; }
.create-grid       { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* Date input with icon */
.date-wrap { position:relative; }
.date-wrap .bi-calendar3 { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; font-size:14px; }
.date-wrap input[type="date"] { padding-left:34px; }

/* Mode selector cards */
.mode-cards     { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mode-card      { border:2px solid var(--border); border-radius:10px; padding:12px 14px; cursor:pointer; transition:border-color .15s, background .15s; display:flex; align-items:flex-start; gap:10px; }
.mode-card:hover { border-color:var(--accent); }
.mode-card input[type="radio"] { display:none; }
.mode-card.selected { border-color:var(--accent); background:var(--accent-dim); }
.mode-card-icon  { font-size:20px; flex-shrink:0; margin-top:1px; }
.mode-card-title { font-size:13px; font-weight:700; line-height:1.3; }
.mode-card-desc  { font-size:11px; color:var(--muted); margin-top:3px; line-height:1.4; }

/* Voucher row typography */
.mv-name { font-size:13.5px; font-weight:700; line-height:1.3; }
.mv-type { font-size:11.5px; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:4px; }
.mv-desc { font-size:11.5px; color:var(--muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* Status pills */
.pill           { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.pill-live      { background:rgba(45,189,135,.12); color:#2dbd87; border:1px solid rgba(45,189,135,.3); }
.pill-hidden    { background:rgba(107,115,148,.12); color:#6b7394; border:1px solid rgba(107,115,148,.25); }
.pill-expired   { background:rgba(224,82,82,.12); color:#e05252; border:1px solid rgba(224,82,82,.25); }
.pill-private   { background:rgba(147,112,219,.12); color:#9370db; border:1px solid rgba(147,112,219,.3); }
.pill-public-mode { background:rgba(56,152,255,.12); color:#3898ff; border:1px solid rgba(56,152,255,.3); }

/* Voucher toggle switch (checkbox style) */
.tog-sw        { position:relative; width:36px; height:20px; flex-shrink:0; }
.tog-sw input  { opacity:0; width:0; height:0; position:absolute; }
.tog-sw .sl    { position:absolute; inset:0; border-radius:20px; background:var(--surface2); border:1px solid var(--border); cursor:pointer; transition:background .2s, border-color .2s; }
.tog-sw .sl::before { content:''; position:absolute; height:12px; width:12px; left:3px; bottom:3px; border-radius:50%; background:var(--muted); transition:transform .2s, background .2s; }
.tog-sw input:checked + .sl { background:rgba(45,189,135,.2); border-color:#2dbd87; }
.tog-sw input:checked + .sl::before { transform:translateX(16px); background:#2dbd87; }
.tog-sw input:disabled + .sl { opacity:.4; cursor:not-allowed; }

/* Edit button */
.btn-sm-edit       { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border-radius:7px; font-size:11px; font-weight:600; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:border-color .15s, color .15s; font-family:var(--font); }
.btn-sm-edit:hover { border-color:var(--accent); color:var(--accent); }

/* Edit drawer */
.edit-drawer      { position:fixed; top:0; right:-100%; width:min(400px,100vw); height:100%; background:var(--surface); border-left:1px solid var(--border); z-index:9999; display:flex; flex-direction:column; box-shadow:-4px 0 24px rgba(0,0,0,.3); transition:right .25s ease; }
.edit-drawer.open { right:0; }
.edit-drawer-head { padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.edit-drawer-body { flex:1; overflow-y:auto; padding:20px; }
.edit-drawer-foot { padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px; flex-shrink:0; }

/* Overlay backdrop */
.overlay      { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9998; }
.overlay.show { display:block; }

/* Desktop table layout */
.mv-thead { display:none; }

/* === Responsive === */
@media (min-width: 768px) {
  .mv-thead {
    display: grid;
    grid-template-columns: 1fr 100px 105px 110px 70px 150px;
    gap: 12px; padding: 9px 16px;
    border-bottom: 2px solid var(--border);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .7px; color: var(--muted);
  }
  .mv-card {
    display: grid;
    grid-template-columns: 1fr 100px 105px 110px 70px 150px;
    gap: 12px; align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
  }
  .mv-card:hover    { background: var(--surface2); }
  .mv-mobile-meta   { display: none; }
  .mv-actions       { display: flex; gap: 6px; align-items: center; }
  .create-grid      { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .adm-sidebar     { display: none !important; }
  .adm-main        { margin-left: 0; padding: 16px 14px 80px; }
  .adm-bottom-nav  { display: flex !important; }
  #adm-toast       { right: 12px; left: 12px; bottom: 68px; min-width: unset; }
  .mv-card         { padding: 14px 16px; border-bottom: 1px solid var(--border); display: block; }
  .mv-card-top     { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .mv-mobile-meta  { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .mv-actions      { display: flex; gap: 8px; align-items: center; }
  .mv-col-vis,
  .mv-col-dates,
  .mv-col-claims,
  .mv-col-uses     { display: none; }
  .create-grid     { grid-template-columns: 1fr; }
  .mode-cards      { grid-template-columns: 1fr; }
}

/* ── Migrated from admin_css.php ── */
/* ══════════════════════════════════════════════
   RESET & TOKENS
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette */
  --bg:          #080b10;
  --surface:     #0d1117;
  --surface2:    #141920;
  --surface3:    #1a2030;
  --border:      rgba(255,255,255,.07);
  --border-hi:   rgba(255,255,255,.13);

  /* Accent — electric blue */
  --accent:      #3b82f6;
  --accent-dim:  rgba(59,130,246,.12);
  --accent-glow: rgba(59,130,246,.25);

  /* Status */
  --green:  #10b981;
  --red:    #ef4444;
  --yellow: #f59e0b;
  --purple: #8b5cf6;

  --green-dim:  rgba(16,185,129,.12);
  --red-dim:    rgba(239,68,68,.12);
  --yellow-dim: rgba(245,158,11,.12);
  --purple-dim: rgba(139,92,246,.12);

  /* Text */
  --text:  #cbd5e1;
  --text-h: #f1f5f9;
  --muted: #4b5563;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h:  58px;
  --radius:    10px;
  --radius-lg: 16px;

  /* Fonts */
  --font:  'Inter', sans-serif;
  --mono:  'JetBrains Mono', monospace;
}

html, body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { font-family: var(--font); }

/* ══════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════ */
.adm-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  z-index: 999;
}

.adm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-h);
}

.adm-brand-dot {
  width: 30px;
  height: 30px;
  background: var(--accent);
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--accent-glow);
}

.adm-brand-dot i { font-size: 14px; color: #fff; }

.adm-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.adm-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1.5px solid rgba(59,130,246,.35);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.adm-topbar-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
}

/* ══════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════ */
.adm-sidebar {
  position: fixed;
  top: var(--topbar-h);
  left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 10px 20px;
  gap: 2px;
  z-index: 900;
  overflow-y: auto;
}

.adm-sidebar-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 12px 6px;
}

.adm-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  transition: all .15s;
  position: relative;
}

.adm-nav-link i {
  font-size: 16px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.adm-nav-link:hover {
  background: var(--surface2);
  color: var(--text);
}

.adm-nav-link.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.adm-nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.adm-sidebar-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════ */
.adm-main {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  padding: 28px;
  min-height: calc(100vh - var(--topbar-h));
}

/* ── Page heading ── */
.pg-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-h);
  margin-bottom: 3px;
}

.pg-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
}

/* ══════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════ */
.adm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.adm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-h);
}

/* ── Stat cards ── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color .2s;
  position: relative;
  overflow: hidden;
}

.stat-card:hover { border-color: var(--border-hi); }

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
}

.stat-icon {
  font-size: 20px;
  margin-bottom: 14px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface2);
}

.stat-val {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-h);
  line-height: 1;
}

.stat-lbl {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

.stat-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 400;
}

/* ══════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════ */
.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.adm-table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 700;
  color: var(--muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.adm-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.adm-table tr:last-child td { border-bottom: none; }
.adm-table tbody tr:hover td { background: rgba(255,255,255,.02); }

/* ══════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════ */
.badge-active   { display:inline-flex;align-items:center;gap:4px;background:var(--green-dim);color:var(--green);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700; }
.badge-expired  { display:inline-flex;align-items:center;gap:4px;background:var(--red-dim);color:var(--red);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700; }
.badge-upcoming { display:inline-flex;align-items:center;gap:4px;background:var(--accent-dim);color:var(--accent);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700; }
.badge-public   { display:inline-flex;align-items:center;gap:4px;background:var(--green-dim);color:var(--green);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700; }
.badge-private  { display:inline-flex;align-items:center;gap:4px;background:rgba(75,85,99,.15);color:var(--muted);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700; }
.badge-redeemed { display:inline-flex;align-items:center;gap:4px;background:var(--green-dim);color:var(--green);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700; }
.badge-pending  { display:inline-flex;align-items:center;gap:4px;background:var(--yellow-dim);color:var(--yellow);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700; }

/* ══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn-accent {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.btn-accent:hover { opacity: .88; color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--font);
}

.btn-ghost:hover { border-color: var(--border-hi); color: var(--text); }

.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1px solid rgba(239,68,68,.25);
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
}

.btn-danger:hover { background: var(--red-dim); }

.btn-success {
  background: transparent;
  color: var(--green);
  border: 1px solid rgba(16,185,129,.25);
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
}

.btn-success:hover { background: var(--green-dim); }

.btn-warning {
  background: transparent;
  color: var(--yellow);
  border: 1px solid rgba(245,158,11,.25);
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
}

.btn-warning:hover { background: var(--yellow-dim); }

/* ══════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════ */
.frm-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muted);
  margin-bottom: 7px;
}

.frm-ctrl {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 10px 13px;
  font-size: 14px;
  font-family: var(--font);
  transition: border-color .15s;
}

.frm-ctrl:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.frm-ctrl::placeholder { color: var(--muted); }
textarea.frm-ctrl { resize: vertical; }

/* ══════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════ */
.adm-alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.adm-alert-success {
  background: var(--green-dim);
  border: 1px solid rgba(16,185,129,.25);
  color: var(--green);
}

.adm-alert-danger {
  background: var(--red-dim);
  border: 1px solid rgba(239,68,68,.25);
  color: var(--red);
}

.adm-alert-info {
  background: var(--accent-dim);
  border: 1px solid rgba(59,130,246,.25);
  color: var(--accent);
}

/* ══════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════ */
.pg-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 8px;
}

.pg-nums { display: flex; gap: 3px; align-items: center; }

.pg-num {
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  padding: 0 6px;
}

.pg-num:hover { border-color: var(--border); color: var(--text); }
.pg-num.active { background: var(--accent-dim); border-color: rgba(59,130,246,.35); color: var(--accent); font-weight: 700; pointer-events: none; }
.pg-num.disabled { opacity: .3; pointer-events: none; }
.pg-ellipsis { color: var(--muted); padding: 0 4px; font-size: 12px; }

/* ══════════════════════════════════════════════
   TOGGLE SWITCH
═══════════════════════════════════════════════ */
.tgl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 3px 0;
}

.tgl-track {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--surface3);
  border: 1px solid var(--border);
  position: relative;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}

.tgl-track.on {
  background: rgba(16,185,129,.2);
  border-color: rgba(16,185,129,.4);
}

.tgl-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .2s, background .2s;
}

.tgl-track.on .tgl-thumb {
  transform: translateX(16px);
  background: var(--green);
}

/* ══════════════════════════════════════════════
   MOBILE BOTTOM NAV
═══════════════════════════════════════════════ */
.adm-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 62px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  align-items: stretch;
  z-index: 999;
}

.adm-bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .15s;
}

.adm-bottom-nav a i { font-size: 19px; }
.adm-bottom-nav a.active, .adm-bottom-nav a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .adm-sidebar { display: none; }
  .adm-main { margin-left: 0; padding: 18px 14px calc(62px + 18px); }
  .adm-bottom-nav { display: flex; }
}

/* ══════════════════════════════════════════════
   LOGIN PAGE (admin)
═══════════════════════════════════════════════ */
.adm-login-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 25% 40%, rgba(59,130,246,.06) 0%, transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(139,92,246,.04) 0%, transparent 50%),
    var(--bg);
}

.adm-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}

.adm-login-card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--purple));
}

.adm-login-inner { padding: 32px; }

.adm-login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.adm-login-icon {
  width: 52px; height: 52px;
  background: var(--accent-dim);
  border: 1.5px solid rgba(59,130,246,.3);
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 14px;
}

.adm-login-icon i { font-size: 22px; color: var(--accent); }

.adm-login-title { font-size: 19px; font-weight: 700; color: var(--text-h); }
.adm-login-sub   { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.adm-login-input-wrap { position: relative; margin-bottom: 14px; }
.adm-login-input-wrap i {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 15px;
  pointer-events: none;
}

.adm-login-input-wrap input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 12px 13px 12px 40px;
  font-size: 14px;
  font-family: var(--font);
  transition: border-color .15s;
}

.adm-login-input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.adm-login-input-wrap input::placeholder { color: var(--muted); }

.adm-login-btn {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  margin-top: 6px;
  transition: opacity .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 20px var(--accent-glow);
}

.adm-login-btn:hover { opacity: .88; }

.adm-login-error {
  background: var(--red-dim);
  border: 1px solid rgba(239,68,68,.25);
  color: var(--red);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}