@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,900&family=DM+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── Design Tokens ── */
:root {
  --red:    #DC2626;
  --orange: #EA580C;
  --amber:  #EAB308;
  --fire:   linear-gradient(135deg,#DC2626,#EA580C,#EAB308);
  --dark:   #0a0a0a;
  --dark2:  #141414;
  --dark3:  #1c1c1c;
  --bd:     rgba(255,255,255,.06);
  --bg:     #f0ede8;
  --surface:#fff;
  --border: #e5e3de;
  --txt:    #0a0a0a;
  --muted:  #6b6b6b;
  --subtle: #a0a0a0;
  --sidebar-w: 256px;
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg); color:var(--txt);
  display:flex; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
h1,h2,h3,h4 { font-family:'Playfair Display',serif; line-height:1.15; }

/* ══════════════════════════════════
   SIDEBAR
══════════════════════════════════ */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--dark);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0;
  z-index:100;
  border-right:1px solid var(--bd);
}

/* Brand */
.sidebar-logo {
  padding:1.6rem 1.5rem 1.4rem;
  font-family:'Playfair Display',serif;
  font-size:1.5rem; font-weight:900; font-style:italic;
  background:var(--fire);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  border-bottom:1px solid var(--bd);
  letter-spacing:-.01em;
}

.sidebar-nav { flex:1; padding:.75rem 0; overflow-y:auto; scrollbar-width:none; }
.sidebar-nav::-webkit-scrollbar { display:none; }

.nav-section-label {
  font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#383838; padding:.9rem 1.5rem .3rem;
}

.nav-item {
  display:flex; align-items:center; gap:.8rem;
  padding:.72rem 1.5rem;
  font-size:.84rem; font-weight:500; color:#626262;
  cursor:pointer; transition:all .14s;
  border-left:2px solid transparent;
  text-decoration:none;
}
.nav-item svg { flex-shrink:0; opacity:.45; transition:opacity .14s; }
.nav-item:hover { background:rgba(255,255,255,.04); color:#bbb; }
.nav-item:hover svg { opacity:.7; }
.nav-item.active { background:rgba(234,88,12,.09); color:var(--orange); border-left-color:var(--orange); }
.nav-item.active svg { opacity:1; }

/* User row */
.sidebar-bottom { padding:1.2rem 1.5rem; border-top:1px solid var(--bd); }
.sidebar-user { display:flex; align-items:center; gap:.75rem; }
.user-avatar {
  width:36px; height:36px; flex-shrink:0;
  background:var(--fire);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-weight:900;
  color:#fff; font-size:.82rem;
  /* square — no border-radius */
}
.user-name { font-size:.84rem; font-weight:700; color:#ccc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:.68rem; color:#484848; margin-top:.05rem; }

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

/* ── Topbar ── */
.topbar {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:.85rem 2.25rem;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:50;
  gap:1rem;
}
.topbar-left h1 {
  font-family:'Playfair Display',serif;
  font-size:1.5rem; font-weight:900; color:var(--txt); letter-spacing:-.02em;
}
.topbar-left p { font-size:.76rem; color:var(--muted); margin-top:.12rem; }
.topbar-right { display:flex; gap:.65rem; align-items:center; flex-shrink:0; }

/* Buttons — ALL SQUARE */
.btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1.25rem;
  font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:700;
  cursor:pointer; border:none;
  border-radius:0; /* SQUARE */
  transition:all .14s; white-space:nowrap;
}
.btn-fire { background:var(--txt); color:#fff; letter-spacing:.02em; }
.btn-fire:hover { background:#222; }
.btn-outline { background:transparent; border:1.5px solid var(--border); color:var(--txt); }
.btn-outline:hover { border-color:var(--txt); }
.btn-sm { padding:.42rem .95rem; font-size:.77rem; }

.topbar-search {
  display:flex; align-items:center; gap:.5rem;
  background:var(--bg); border:1px solid var(--border);
  padding:.48rem .9rem; font-size:.82rem; color:var(--muted);
  cursor:text; min-width:200px;
  /* square */
}
.topbar-search svg { flex-shrink:0; opacity:.6; }

/* ── Page body ── */
.page-body { width:100%; max-width:1550px; margin:0 auto; padding:2rem 2rem; flex:1; }

/* Partner banner */
.partner-banner {
  display:flex; align-items:center; gap:.75rem;
  background:#fffbeb; border:1px solid #fcd34d;
  border-left:3px solid #f59e0b;
  padding:.75rem 1rem; margin-bottom:1.75rem;
  font-size:.82rem; color:#92400e;
}

/* ══════════════════════════════════
   STAT CARDS
══════════════════════════════════ */
.stats-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; /* shows border through */
  border:1px solid var(--border);
  background:var(--border); /* hairline between cells */
  margin-bottom:2.25rem;
}
.stat-card {
  background:var(--surface);
  padding:1.65rem 1.75rem 1.4rem;
  position:relative;
  transition:background .14s;
  overflow:hidden;
}
/* Top gradient accent — appears on hover */
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--fire); opacity:0; transition:opacity .2s;
}
.stat-card:hover { background:#fdfcfb; }
.stat-card:hover::before { opacity:1; }

.stat-label {
  font-size:.6rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.75rem;
}
.stat-num {
  font-family:'Playfair Display',serif;
  font-size:2.75rem; font-weight:900; color:var(--txt);
  line-height:1; letter-spacing:-.03em;
}
.stat-num.fire {
  background:var(--fire);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-sub { font-size:.74rem; color:var(--muted); margin-top:.55rem; line-height:1.4; }

/* ══════════════════════════════════
   SECTION HEADER
══════════════════════════════════ */
.section-hd {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:1rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--border);
}
.section-hd h2 {
  font-family:'Playfair Display',serif;
  font-size:1.2rem; font-weight:900; color:var(--txt); letter-spacing:-.01em;
}
.section-hd p { font-size:.79rem; color:var(--muted); margin-top:.2rem; }

/* ══════════════════════════════════
   QUICK ACTIONS
══════════════════════════════════ */
.qa-slider-wrap { margin-bottom:2.25rem; }

.quick-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border);
}
.quick-card {
  background:var(--surface);
  padding:1.4rem 1.5rem;
  display:flex; align-items:center; gap:1.1rem;
  cursor:pointer; transition:background .14s;
  text-decoration:none;
}
.quick-card:hover { background:#fdfcfb; }
.quick-card:hover .quick-icon { background:rgba(234,88,12,.07); border-color:rgba(234,88,12,.2); }

.quick-icon {
  width:44px; height:44px; flex-shrink:0;
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--orange); transition:all .14s;
  /* SQUARE */
}
.quick-title { font-size:.88rem; font-weight:800; color:var(--txt); margin-bottom:.18rem; }
.quick-sub   { font-size:.76rem; color:var(--muted); }

/* Mobile dots — hidden on desktop */
.qa-dots { display:none; }

/* ══════════════════════════════════
   EVENT GRID
══════════════════════════════════ */
.ev-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:1rem;
}

/* ── Event Card ── */
.ec {
  background:var(--surface);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  min-height:260px;
  transition:background .14s, box-shadow .14s;
  border-radius:0;
  border:1px solid var(--border);
  box-shadow:none;
  cursor:default;
}
.ec:hover { background:#fdfcfb; box-shadow:0 2px 12px rgba(0,0,0,.06); }

/* Top status strip */
.ec::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; z-index:2;
}
.ec--upcoming::before { background:linear-gradient(90deg,#6366f1,#8b5cf6); }
.ec--live::before     { background:linear-gradient(90deg,#22c55e,#10b981); }
.ec--ended::before    { background:#ddd; }
.ec::after { display:none; }

/* Mobile swipe — hidden on desktop */
.ec-swipe-tray { display:none; }
.ec-swipe-hint { display:none; }

/* Desktop-only extra date/status columns hidden */
.ec-cal--col   { display:none !important; }
.ec-status-col { display:none !important; }
/* Middle wrapper — transparent on dashboard (flex column layout) */
.ec-mid { display:contents; }

/* Inner */
.ec-swipe-inner { display:flex; flex-direction:column; height:100%; width:100%; position:relative; z-index:1; }

/* Head */
.ec-head { padding:1.25rem 1.4rem .85rem; flex-shrink:0; }
.ec-head-row {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:.65rem; margin-bottom:.65rem;
}

/* Cal badge — SQUARE */
.ec-cal {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--border);
  width:48px; height:52px; flex-shrink:0;
}
.ec-cal-mon { font-size:.52rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.ec-cal-day { font-size:1.35rem; font-weight:900; color:var(--txt); line-height:1.1; font-family:'Playfair Display',serif; margin-top:2px; }

/* Status pill — SQUARE */
.ec-status {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.26rem .7rem;
  border-radius:0;
  font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; flex-shrink:0;
}
.ec-status--live     { background:rgba(34,197,94,.1);  color:#15803d; border:1px solid rgba(34,197,94,.2); }
.ec-status--upcoming { background:rgba(99,102,241,.08); color:#4f46e5; border:1px solid rgba(99,102,241,.2); }
.ec-status--ended    { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }

.ec-live-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; animation:lv-pulse 1.5s infinite; }
@keyframes lv-pulse {
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.5); }
  70%  { box-shadow:0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* Event name */
.ec-name {
  font-family:'DM Sans',sans-serif;
  font-size:.97rem; font-weight:800; color:var(--txt);
  line-height:1.35; margin:0 0 .4rem;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;
}

/* Meta */
.ec-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .65rem; font-size:.74rem; color:#64748b; }
.ec-meta-item { display:flex; align-items:center; gap:.3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.ec-meta-item svg { flex-shrink:0; opacity:.6; }

/* Purge badge */
.ec-purge {
  display:inline-flex; align-items:center; gap:.3rem; margin-top:.4rem;
  background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.18);
  color:#dc2626; font-size:.64rem; font-weight:700; padding:.22rem .6rem;
  border-radius:0;
}

/* Stats strip */
.ec-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  padding:.7rem 1.4rem;
  background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.ec-stat { text-align:center; }
.ec-stat-num { font-size:1.25rem; font-weight:900; color:var(--txt); line-height:1; font-family:'Playfair Display',serif; }
.ec-stat-lbl { font-size:.55rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:.2rem; }

/* Progress */
.ec-progress-container { padding:.6rem 1.4rem; flex-grow:1; display:flex; flex-direction:column; justify-content:center; }
.ec-progress-bar { height:4px; background:var(--border); border-radius:0; overflow:hidden; margin-bottom:.3rem; }
.ec-progress-fill {
  height:100%; border-radius:0;
  background:linear-gradient(90deg,var(--red),var(--orange));
  transition:width 1s cubic-bezier(.25,1,.5,1);
}
.ec-progress-labels { display:flex; justify-content:space-between; font-size:.66rem; font-weight:600; color:var(--muted); }

/* Footer — single straight row, no wrapping */
.ec-footer {
  display:flex; align-items:center;
  gap:.4rem; padding:.65rem 1.1rem;
  background:var(--surface); border-top:1px solid var(--border);
  flex-shrink:0; flex-wrap:nowrap; overflow:hidden;
}

/* Pass badge — SQUARE */
.ec-pass-badge {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.62rem; font-weight:700; padding:.24rem .55rem;
  border-radius:0; text-decoration:none; transition:opacity .14s;
  white-space:nowrap; flex-shrink:0;
}
.ec-pass-badge:hover { opacity:.8; }
.ec-pass--set  { background:#eef2ff; color:#4f46e5; }
.ec-pass--none { background:#fef2f2; color:#dc2626; border:1px dashed rgba(220,38,38,.25); }

/* Action buttons — ALL SQUARE, single row */
.ec-actions {
  display:flex; align-items:center; gap:.35rem;
  flex-wrap:nowrap; margin-left:auto; flex-shrink:0;
}

.ec-btn-secondary {
  display:inline-flex; align-items:center; padding:.3rem .65rem;
  font-family:'DM Sans',sans-serif; font-size:.69rem; font-weight:700;
  color:var(--txt); background:var(--bg); border:1px solid var(--border);
  border-radius:0; text-decoration:none; transition:all .14s;
  white-space:nowrap;
}
.ec-btn-secondary:hover { border-color:var(--txt); background:var(--surface); }

.ec-btn-danger {
  display:inline-flex; align-items:center; padding:.3rem .65rem;
  font-family:'DM Sans',sans-serif; font-size:.69rem; font-weight:700;
  color:#dc2626; background:rgba(220,38,38,.06); border:1px solid rgba(220,38,38,.2);
  border-radius:0; text-decoration:none; transition:all .14s;
  white-space:nowrap;
}
.ec-btn-danger:hover { background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.4); }

.ec-btn-main {
  display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .85rem;
  font-family:'DM Sans',sans-serif; font-size:.69rem; font-weight:800;
  color:#fff; background:var(--txt); border:none; border-radius:0;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:all .14s; letter-spacing:.03em; text-transform:uppercase;
}
.ec-btn-main:hover { background:#222; }
.ec-btn-main--ended { background:#64748b; }
.ec-btn-main--ended:hover { background:#475569; }


/* Empty state */
.empty-state { text-align:center; padding:4rem 2rem; color:var(--muted); }
.empty-state svg { margin:0 auto 1rem; opacity:.2; display:block; }
.empty-state h3 { font-size:1.1rem; color:var(--txt); margin-bottom:.5rem; }

/* Purge countdown context */
.ec .purge-countdown { margin:0 !important; border:none !important; background:transparent !important; box-shadow:none !important; animation:none !important; padding:0 !important; }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media(max-width:1280px) {
  .ev-grid { grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); }
}
@media(max-width:1024px) {
  :root { --sidebar-w:220px; }
  .stat-num { font-size:2.25rem; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .quick-row { grid-template-columns:1fr 1fr; }
  .ev-grid   { grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:.85rem; }
}
@media(max-width:768px) {
  .sidebar { display:none; }
  .main    { margin-left:0; }
  .topbar  { display:none; }
  .page-body { padding:1rem 1rem 2rem; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .ev-grid   { grid-template-columns:1fr; gap:.75rem; }
  .ec { min-height:240px; }
  .ec-swipe-tray { display:flex; }
}
@media(max-width:480px) {
  .stats-row { grid-template-columns:1fr; }
  .quick-row { grid-template-columns:1fr; }
}