/* ===================================================================
   Digi Tech — admin
   Ported from the Figma design system. Deep blue carries the interface,
   red punctuates it. Borders do the work, shadows stay almost invisible.
   =================================================================== */

/* Self-hosted so no guest's browser calls Google, the CSP stays at
   'self', and the scanner still has its typeface offline at the gate. */
@font-face {
  font-family: 'InterVar';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue-900:#0B1F3A; --blue-700:#123A6B; --blue-500:#2B5CB8; --blue-100:#E8EEFB;
  --red-600:#C8102E; --red-50:#FDF0F2;
  --danger:#B4241F; --success:#1D7A4F; --success-50:#ECFAF3;
  --warning:#9A6B00; --warning-50:#FEF9EC;
  --n-0:#FFFFFF; --n-50:#F7F8FA; --n-100:#F0F2F5; --n-200:#E4E6EB;
  --n-300:#CDD1D8; --n-400:#9CA3AF; --n-500:#6B7280; --n-700:#374151; --n-900:#111827;
  --r-input:6px; --r-card:10px; --r-pill:9999px;
  --shadow-card:0 1px 2px rgba(0,0,0,.04);
  --shadow-dropdown:0 4px 16px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.06);
  --sidebar-w:232px;
}

*,*::before,*::after{box-sizing:border-box}
html{font-family:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;font-size:14px;line-height:1.5;color:var(--n-900);background:var(--n-50);font-variant-numeric:tabular-nums}
a{color:var(--blue-700)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:3px}

/* ---------- Shell ---------- */
.has-admin-nav{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--blue-900);color:var(--n-0);padding:20px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.sidebar__brand{font-size:15px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;padding:0 8px}
.sidebar__brand::before{content:'';width:22px;height:22px;border-radius:6px;background:var(--red-600);flex-shrink:0}
.sidebar__nav{display:flex;flex-direction:column;gap:1px}
.nav-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-input);color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px;font-weight:500;transition:background .12s,color .12s}
.nav-link:hover{background:rgba(255,255,255,.07);color:var(--n-0)}
.nav-link.is-active{background:rgba(255,255,255,.13);color:var(--n-0);font-weight:600}
.nav-link svg{width:16px;height:16px;flex-shrink:0}
.nav-link.is-soon{color:rgba(255,255,255,.32);cursor:default;pointer-events:none}
.nav-link.is-soon:hover{background:transparent}
.nav-soon{margin-left:auto;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.10);color:rgba(255,255,255,.55);padding:2px 6px;border-radius:var(--r-pill);font-weight:600}
.sidebar__footer{margin-top:auto;padding:14px 8px 0;border-top:1px solid rgba(255,255,255,.10);display:flex;flex-direction:column;gap:2px}
.sidebar__user{font-size:13px;font-weight:600}
.sidebar__role{font-size:11.5px;color:rgba(255,255,255,.55);text-transform:capitalize}
.admin-main{flex:1;padding:26px 28px 64px;max-width:1180px;min-width:0}
.mobile-nav{display:none}

/* ---------- Headers ---------- */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.page-header h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:4px 0 0}
h2{font-size:15px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
.breadcrumb{font-size:12.5px;color:var(--n-500);text-decoration:none;font-weight:500}
.breadcrumb:hover{color:var(--blue-700)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r-input);font-size:13px;font-weight:600;font-family:inherit;border:1px solid var(--n-200);background:var(--n-0);color:var(--n-900);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:var(--n-50)}
.btn--primary{background:var(--blue-700);border-color:var(--blue-700);color:var(--n-0)}
.btn--primary:hover{background:var(--blue-900)}
.btn--accent{background:var(--red-600);border-color:var(--red-600);color:var(--n-0)}
.btn--accent:hover{background:#A50E26}
.btn--danger{background:var(--n-0);border-color:var(--n-200);color:var(--danger)}
.btn--danger:hover{background:var(--red-50);border-color:var(--danger)}
.btn--lg{height:44px;padding:0 20px;font-size:14px}
.btn--link{height:auto;padding:4px 0;border:0;background:none;color:var(--blue-700);font-size:13px;text-decoration:underline}
.btn--link:hover{background:none;color:var(--blue-500)}
.btn--link.btn--danger{color:var(--danger);background:none;border:0}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Cards ---------- */
.panel{background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-card);padding:20px;margin-bottom:16px;box-shadow:var(--shadow-card)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}
.event-card{display:block;background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-card);padding:18px;text-decoration:none;color:var(--n-900);box-shadow:var(--shadow-card);transition:border-color .12s,box-shadow .12s}
.event-card:hover{border-color:var(--n-300);box-shadow:var(--shadow-dropdown)}
.event-card h2{font-size:16px;margin:10px 0 6px}
.event-card__meta{font-size:13px;color:var(--n-500);margin:2px 0}

/* ---------- Event hero ---------- */
.event-hero{background:var(--blue-900);color:var(--n-0);border-radius:var(--r-card);padding:26px 28px;margin-bottom:20px}
.event-hero h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:8px 0 6px;color:var(--n-0)}
.event-hero__meta{font-size:14px;color:rgba(255,255,255,.78);margin:0}
.event-hero__actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.event-hero .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:var(--n-0)}
.event-hero .btn:hover{background:rgba(255,255,255,.2)}
.event-hero .btn--accent{background:var(--red-600);border-color:var(--red-600)}

/* ---------- Badges ---------- */
.badge,.pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-pill);font-size:12px;font-weight:500;line-height:18px;border:1px solid transparent;white-space:nowrap}
.badge--draft,.pill{background:var(--n-100);color:var(--n-700);border-color:var(--n-300)}
.badge--published,.pill--ok{background:var(--success-50);color:var(--success);border-color:#86EFAC}
.badge--cancelled{background:var(--red-50);color:var(--danger);border-color:#FCA5A5}
.badge--completed{background:var(--blue-100);color:var(--blue-700);border-color:#BFDBFE}
.pill--warn{background:var(--warning-50);color:var(--warning);border-color:#FCD34D}
.pill--vip{background:var(--red-50);color:var(--red-600);border-color:#FCA5A5;font-weight:600}

/* ---------- Stats ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-card);padding:14px 16px;box-shadow:var(--shadow-card)}
.stat__value{display:block;font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.stat__label{display:block;font-size:12px;color:var(--n-500);margin-top:3px;font-weight:500}
.stat--ok .stat__value{color:var(--success)}
.stat--warn .stat__value{color:var(--warning)}
.stat--fail .stat__value{color:var(--danger)}

/* ---------- Forms ---------- */
.form{display:flex;flex-direction:column;gap:6px}
.form label{font-size:12.5px;font-weight:600;color:var(--n-700);margin-top:10px}
.form input,.form select,.form textarea{height:38px;padding:0 11px;font-size:14px;font-family:inherit;border:1px solid var(--n-200);border-radius:var(--r-input);background:var(--n-0);color:var(--n-900);width:100%}
.form textarea{height:auto;padding:10px 11px;resize:vertical;line-height:1.55}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(43,92,184,.12)}
.form input[type="file"]{height:auto;padding:9px 11px}
.form input[type="color"]{width:42px;padding:3px;height:38px;cursor:pointer}
.form--inline{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
.form--inline label{margin-top:0}
.form--inline input,.form--inline select{width:auto;min-width:150px}
.form--stacked{max-width:580px}
.form--stacked fieldset{border:1px solid var(--n-200);border-radius:var(--r-card);padding:16px 18px;margin:0 0 14px;background:var(--n-0)}
.form--stacked legend{font-size:12px;font-weight:700;padding:0 6px;text-transform:uppercase;letter-spacing:.05em;color:var(--n-500)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-row label{display:block}
.hint{font-size:12.5px;color:var(--n-500);margin:5px 0 0;line-height:1.55}
code{background:var(--n-100);padding:1px 6px;border-radius:4px;font-size:12.5px;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace}
.checkbox-row{display:flex;align-items:center;gap:9px;font-size:13.5px;margin:12px 0}
.checkbox-row input{width:17px;height:17px}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;padding:10px 14px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--n-500);background:var(--n-50);border-bottom:1px solid var(--n-200);white-space:nowrap}
.table td{padding:11px 14px;border-bottom:1px solid var(--n-100);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--n-50)}
.table--compact th,.table--compact td{padding:8px 12px;font-size:13px}
.cell-muted{color:var(--n-500);font-size:13px}
.row--fail{background:#FDF7F7}
.row--warn{background:#FEFBF3}
.error-text{font-size:12px;color:var(--danger)}
.text-warn{color:var(--warning)}

/* ---------- Filters ---------- */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filter-bar input[type="search"]{flex:1;min-width:210px;height:38px;padding:0 12px;font-size:13.5px;border:1px solid var(--n-200);border-radius:var(--r-input);background:var(--n-0)}
.filter-bar select{height:38px;padding:0 10px;font-size:13.5px;border:1px solid var(--n-200);border-radius:var(--r-input);background:var(--n-0)}
.result-count{font-size:12.5px;color:var(--n-500);margin:0 0 8px}

/* ---------- Alerts ---------- */
.alert,.notice{padding:11px 14px;border-radius:var(--r-input);font-size:13.5px;margin-bottom:14px;border:1px solid transparent}
.alert p,.notice p{margin:0 0 5px}
.alert p:last-child,.notice p:last-child{margin-bottom:0}
.alert--ok{background:var(--success-50);color:var(--success);border-color:#86EFAC}
.alert--error{background:var(--red-50);color:var(--danger);border-color:#FCA5A5}
.alert--warn,.notice--warn{background:var(--warning-50);color:var(--warning);border-color:#FCD34D}
.notice--done{background:var(--blue-100);color:var(--blue-700);border-color:#BFDBFE}
.empty-state{background:var(--n-0);border:1px dashed var(--n-300);border-radius:var(--r-card);padding:44px 24px;text-align:center}
.empty-state p{color:var(--n-500);margin:0 0 14px}

/* ---------- Misc ---------- */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.detail-list{display:grid;grid-template-columns:132px 1fr;gap:9px 14px;margin:0;font-size:13.5px}
.detail-list dt{color:var(--n-500);font-size:12.5px}
.detail-list dd{margin:0}
.action-stack{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.action-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pagination{display:flex;gap:5px;margin-top:18px;flex-wrap:wrap}
.pagination__link{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0 9px;border:1px solid var(--n-200);border-radius:var(--r-input);text-decoration:none;color:var(--n-700);font-size:13px;background:var(--n-0)}
.pagination__link:hover{background:var(--n-50)}
.pagination__link.is-current{background:var(--blue-700);border-color:var(--blue-700);color:var(--n-0);font-weight:600}
.disclosure{background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-card);padding:14px 18px;margin-bottom:14px}
.disclosure summary{cursor:pointer;font-weight:600;font-size:13.5px}
.disclosure[open] summary{margin-bottom:12px}
.swatch{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:-1px;border:1px solid var(--n-200)}
.token-list{display:flex;flex-wrap:wrap;gap:6px}
.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px}
.image-grid__item{margin:0;background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-card);overflow:hidden}
.image-grid__item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.image-grid__item figcaption{padding:8px 10px;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}

/* ---------- Auth ---------- */
.app-shell{max-width:440px;margin:0 auto;padding:56px 18px}
.panel--narrow{max-width:420px;margin:0 auto}
.panel--centered{text-align:center}
.form-link{font-size:13px;margin-top:14px}
.trace{text-align:left;font-size:11.5px;overflow-x:auto;background:var(--n-100);padding:12px;border-radius:var(--r-input)}
.checklist{list-style:none;margin:0;padding:0;font-size:13.5px}
.checklist li{padding:7px 0 7px 24px;position:relative;border-bottom:1px solid var(--n-100)}
.checklist li:last-child{border-bottom:0}
.checklist li::before{position:absolute;left:0;font-weight:700}
.checklist li.ok::before{content:"\2713";color:var(--success)}
.checklist li.warn::before{content:"\2013";color:var(--warning)}
.checklist li.fail::before{content:"\2717";color:var(--danger)}
.status{margin:0;font-size:13.5px;font-weight:600}
.status--ok{color:var(--success)}
.status--fail{color:var(--danger)}
.panel__header{border-bottom:1px solid var(--n-200);padding-bottom:14px;margin-bottom:6px}

/* ---------- Mobile ---------- */
@media (max-width:860px){
  .has-admin-nav{flex-direction:column}
  .sidebar{display:none}
  .admin-main{padding:16px 14px 84px;max-width:100%}
  .page-header{flex-direction:column;align-items:stretch}
  .field-row{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .filter-bar input[type="search"]{min-width:100%}
  .detail-list{grid-template-columns:1fr;gap:2px 0}
  .detail-list dd{margin-bottom:10px}
  .mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--blue-900);padding:7px 8px calc(7px + env(safe-area-inset-bottom));gap:5px;border-top:1px solid rgba(255,255,255,.10)}
  .mobile-nav__link{flex:1;text-align:center;padding:9px 6px;border-radius:var(--r-input);text-decoration:none;color:rgba(255,255,255,.7);font-size:12px;font-weight:600}
  .mobile-nav__link.is-active{background:rgba(255,255,255,.14);color:var(--n-0)}
}