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

/* ============================================================
   Bollero UI — "Midnight" design system  (shared across apps)
   Activated by  <html data-ui="midnight">  +  this stylesheet
   loaded AFTER each app's inline <style> so it wins the cascade.
   Re-themes the core tokens + adds a premium component layer.
   Remove the data-ui attribute to fall back to the old look.
   ============================================================ */

/* ---- Tokens : dark (default) ------------------------------- */
html[data-ui="midnight"]{
  --bg:#0a0b0e;
  --surface:#131419;
  --surface2:#1b1d24;
  --border:rgba(255,255,255,.07);
  --text:#f3f4f6;
  --muted:#9499a5;
  --accent:#f97316;
  --accent-hover:#fb8c3c;
  --green:#34d399; --yellow:#fbbf24; --red:#f87171;
  --header-bg:rgba(10,11,14,.72);

  --hair:rgba(255,255,255,.07);
  --hair-strong:rgba(255,255,255,.12);
  --ring:inset 0 1px 0 rgba(255,255,255,.05);
  --elev-1:0 1px 2px rgba(0,0,0,.40),0 1px 1px rgba(0,0,0,.30);
  --elev-2:0 10px 26px rgba(0,0,0,.42),0 3px 8px rgba(0,0,0,.30);
  --elev-3:0 28px 64px rgba(0,0,0,.62),0 10px 22px rgba(0,0,0,.42);
  --glow-warm:0 8px 22px rgba(249,115,22,.32);
  --accent-soft:rgba(249,115,22,.13);
  --r-sm:9px; --r-md:12px; --r-lg:16px;
  --brand-grad:linear-gradient(135deg,#f97316,#ef4444);
  --page-glow:radial-gradient(1000px 560px at 88% -8%,rgba(249,115,22,.10),transparent 60%),
              radial-gradient(820px 520px at 4% 2%,rgba(59,130,246,.06),transparent 60%);
  /* reservation.html token aliases (it uses a different vocabulary) */
  --bg-primary:#0a0b0e; --bg-secondary:#131419; --bg-tertiary:#1b1d24; --bg-hover:#22252e;
  --text-primary:#f3f4f6; --text-secondary:#9499a5; --text-muted:#6b7280;
  --accent-dim:rgba(249,115,22,.15);
  --shadow:0 10px 26px rgba(0,0,0,.42),0 3px 8px rgba(0,0,0,.30);
}

/* ---- Tokens : light --------------------------------------- */
html[data-ui="midnight"][data-theme="light"]{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface2:#f0f1f4;
  --border:rgba(12,14,22,.10);
  --text:#14161c;
  --muted:#646b78;
  --accent:#ea6a0c;
  --accent-hover:#d65f08;
  --green:#059669; --yellow:#d97706; --red:#dc2626;
  --header-bg:rgba(255,255,255,.80);

  --hair:rgba(12,14,22,.09);
  --hair-strong:rgba(12,14,22,.16);
  --ring:inset 0 1px 0 rgba(255,255,255,.85);
  --elev-1:0 1px 2px rgba(15,23,42,.06),0 1px 1px rgba(15,23,42,.04);
  --elev-2:0 10px 30px rgba(15,23,42,.10),0 3px 8px rgba(15,23,42,.06);
  --elev-3:0 26px 60px rgba(15,23,42,.16),0 9px 22px rgba(15,23,42,.08);
  --glow-warm:0 8px 22px rgba(234,106,12,.24);
  --accent-soft:rgba(234,106,12,.10);
  --page-glow:radial-gradient(1000px 560px at 88% -8%,rgba(249,115,22,.07),transparent 60%),
              radial-gradient(820px 520px at 4% 2%,rgba(59,130,246,.05),transparent 60%);
  /* reservation.html token aliases (light) */
  --bg-primary:#f6f7f9; --bg-secondary:#ffffff; --bg-tertiary:#f0f1f4; --bg-hover:#e9eaee;
  --text-primary:#14161c; --text-secondary:#646b78; --text-muted:#8b909c;
  --accent-dim:rgba(234,106,12,.12);
  --shadow:0 10px 30px rgba(15,23,42,.10),0 3px 8px rgba(15,23,42,.06);
}

/* ---- Base ------------------------------------------------- */
[data-ui="midnight"]{
  font-family:'Vazirmatn','Segoe UI',Tahoma,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
[data-ui="midnight"] body{
  background:var(--bg);
  background-image:var(--page-glow);
  background-attachment:fixed;
}
[data-ui="midnight"] ::selection{background:rgba(249,115,22,.30);color:#fff}
[data-ui="midnight"] ::placeholder{color:var(--muted);opacity:.65}
[data-ui="midnight"] *::-webkit-scrollbar{width:11px;height:11px}
[data-ui="midnight"] *::-webkit-scrollbar-thumb{
  background:var(--hair-strong);border-radius:10px;
  border:3px solid transparent;background-clip:padding-box;
}
[data-ui="midnight"] *::-webkit-scrollbar-thumb:hover{background:rgba(148,153,165,.45)}
[data-ui="midnight"] *::-webkit-scrollbar-track{background:transparent}

/* ---- Header (frosted glass) ------------------------------- */
[data-ui="midnight"] header{
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--hair);
}
[data-ui="midnight"] .logo-icon{
  background:var(--brand-grad);
  box-shadow:0 4px 12px rgba(249,115,22,.35);
}
[data-ui="midnight"] .logo-name{letter-spacing:-.2px}
[data-ui="midnight"] .back-link,
[data-ui="midnight"] .theme-btn{
  border:1px solid var(--hair);background:var(--surface2);border-radius:var(--r-sm);
  transition:border-color .15s,color .15s,background .15s;
}
[data-ui="midnight"] .back-link:hover,
[data-ui="midnight"] .theme-btn:hover{border-color:var(--hair-strong);color:var(--accent)}

/* ---- Sidebar + nav ---------------------------------------- */
[data-ui="midnight"] .sidebar{
  background:var(--surface);
  border-left:1px solid var(--hair);
}
[data-ui="midnight"] .nav-item{
  border-radius:var(--r-sm);border:1px solid transparent;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
[data-ui="midnight"] .nav-item:hover{background:var(--surface2);color:var(--text)}
[data-ui="midnight"] .nav-item.active{
  background:var(--accent-soft);color:var(--accent);
  border-color:transparent;font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(249,115,22,.20);
}
[data-ui="midnight"] .nav-item.active:hover{background:var(--accent-soft);color:var(--accent)}
[data-ui="midnight"] .nav-item.active .nav-icon{color:var(--accent)}

/* ---- Surfaces : cards, panels, table shell ---------------- */
[data-ui="midnight"] .stat-card,
[data-ui="midnight"] .card,
[data-ui="midnight"] .settings-card,
[data-ui="midnight"] .table-wrap{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-1),var(--ring);
}
[data-ui="midnight"] .stat-card{
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s ease,border-color .18s ease;
}
[data-ui="midnight"] .stat-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--elev-2),var(--ring);
  border-color:var(--hair-strong);
}
[data-ui="midnight"] .stat-value{letter-spacing:-.5px;font-variant-numeric:tabular-nums}
[data-ui="midnight"] .page-title{letter-spacing:-.4px;font-weight:900}

/* ---- Buttons ---------------------------------------------- */
[data-ui="midnight"] .btn{
  border-radius:var(--r-sm);font-weight:600;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s,color .14s;
}
[data-ui="midnight"] .btn:active{transform:translateY(1px)}
[data-ui="midnight"] .btn-primary{
  background:var(--brand-grad);color:#fff;border:none;box-shadow:var(--glow-warm);
}
[data-ui="midnight"] .btn-primary:hover{
  background:linear-gradient(135deg,#fb8c3c,#f1574c);
  box-shadow:0 10px 28px rgba(249,115,22,.42);
}
[data-ui="midnight"] .btn-outline,
[data-ui="midnight"] .btn-secondary,
[data-ui="midnight"] .btn-ghost{
  background:var(--surface2);border:1px solid var(--hair);color:var(--text);
}
[data-ui="midnight"] .btn-outline:hover,
[data-ui="midnight"] .btn-secondary:hover,
[data-ui="midnight"] .btn-ghost:hover{
  border-color:var(--hair-strong);color:var(--accent);background:var(--surface2);
}
[data-ui="midnight"] .btn-icon{
  border:1px solid var(--hair);background:var(--surface2);border-radius:var(--r-sm);
}

/* ---- Inputs + focus ring ---------------------------------- */
[data-ui="midnight"] .search-wrap input,
[data-ui="midnight"] select.filter-select,
[data-ui="midnight"] .form-row input,
[data-ui="midnight"] .form-row select,
[data-ui="midnight"] .form-row textarea,
[data-ui="midnight"] .batch-table input[type=number]{
  background:var(--surface2);border:1px solid var(--hair);border-radius:var(--r-sm);
  transition:border-color .15s ease,box-shadow .15s ease;
}
[data-ui="midnight"] .search-wrap input:focus,
[data-ui="midnight"] select.filter-select:focus,
[data-ui="midnight"] .form-row input:focus,
[data-ui="midnight"] .form-row select:focus,
[data-ui="midnight"] .form-row textarea:focus,
[data-ui="midnight"] .batch-table input[type=number]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  outline:none;
}

/* ---- Table ------------------------------------------------ */
[data-ui="midnight"] thead tr{background:transparent}
[data-ui="midnight"] th{
  color:var(--muted);font-weight:600;letter-spacing:.2px;
  border-bottom:1px solid var(--hair);
}
[data-ui="midnight"] td{border-bottom:1px solid var(--hair)}
[data-ui="midnight"] tbody tr{transition:background .12s ease}
[data-ui="midnight"] tbody tr:hover{background:var(--surface2)}

/* ---- Badges / pills --------------------------------------- */
[data-ui="midnight"] .badge,
[data-ui="midnight"] .stock-badge,
[data-ui="midnight"] .type-badge{border-radius:999px;font-weight:600}

/* ---- Modal (glassy) --------------------------------------- */
[data-ui="midnight"] .modal-overlay,
[data-ui="midnight"] .modal-backdrop{
  background:rgba(5,6,10,.55);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
  backdrop-filter:blur(8px) saturate(160%);
}
[data-ui="midnight"] .modal{
  background:var(--surface);
  border:1px solid var(--hair-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-3),var(--ring);
}

/* ---- Empty states ----------------------------------------- */
[data-ui="midnight"] .empty-state{color:var(--muted)}
[data-ui="midnight"] .empty-icon{opacity:.6}
