/* =====================================================
   Panic Booking — Dark Rock Booking App Stylesheet
   ===================================================== */

/* --- CSS Variables --- */
:root {
  --bg:           #0f0f13;
  --bg-card:      #1a1a22;
  --bg-card-hover:#202030;
  --bg-input:     #12121a;
  --border:       #2a2a38;
  --border-focus: #e63946;
  --accent:       #e63946;
  --accent-hover: #c1121f;
  --accent-2:     #f4a261;
  --text:         #e8e8f0;
  --text-muted:   #888899;
  --text-dim:     #555568;
  --sidebar-w:    240px;
  --topbar-h:     56px;
  --radius:       8px;
  --radius-lg:    12px;
  --shadow:       0 2px 12px rgba(0,0,0,0.4);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.5);
  --font-body:    'Inter', system-ui, sans-serif;
  --font-head:    'Barlow Condensed', 'Inter', sans-serif;
  --transition:   0.18s ease;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

code {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.85em;
  color: var(--accent-2);
}

/* =====================================================
   AUTH PAGES
   ===================================================== */

.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  padding: 1rem;
}

.auth-container {
  width: 100%;
  max-width: 420px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.logo-icon { font-size: 2rem; }

.logo-text {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* .logo-sf removed — Panic Booking branding uses plain logo-text */

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

.auth-title {
  font-size: 1.8rem;
  margin-bottom: 0.25rem;
  color: var(--text);
}

.auth-subtitle {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.auth-switch {
  text-align: center;
  margin-top: 1.25rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.auth-demo {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.demo-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.demo-accounts { display: flex; flex-direction: column; gap: 0.25rem; }

.demo-item {
  font-size: 0.78rem;
  color: var(--accent-2);
  font-family: monospace;
}

/* Type Selector */
.type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--bg-input);
}

.type-option input[type="radio"] { display: none; }

.type-option:hover { border-color: var(--accent); }
.type-option.selected { border-color: var(--accent); background: rgba(230,57,70,0.08); }

.type-icon { font-size: 1.5rem; }

.type-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
}

.type-desc { font-size: 0.75rem; color: var(--text-muted); text-align: center; }

/* =====================================================
   APP LAYOUT
   ===================================================== */

.app-layout {
  /* Contains fixed sidebar and fixed topbar chrome only */
}

/* Topbar (mobile) */
.topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 200;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.topbar-logo .logo-text { font-size: 1.3rem; color: var(--text); }
.topbar-logo .logo-icon { font-size: 1.3rem; }

.topbar-user { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* Sidebar */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
  transition: transform var(--transition);
}

.sidebar-logo {
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.logo-link .logo-text { font-size: 1.25rem; color: var(--text); }
.logo-link .logo-icon { font-size: 1.25rem; }

.sidebar-user {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.sidebar-user-email {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}

.role-switcher-form {
  margin-top: 0.25rem;
}

.role-switcher-label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text-dim);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.role-switcher-select {
  width: 100%;
  font-size: 0.8rem;
  padding: 0.4rem 0.55rem;
}

.sidebar-nav {
  list-style: none;
  padding: 0.5rem 0 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.nav-item { }

.nav-section-title {
  padding: 0.35rem 1.25rem;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-quick-start {
  padding: 0.15rem 0 0.45rem;
  border-bottom: 1px solid var(--border);
}

.nav-group {
  padding-top: 0.05rem;
}

.nav-group-toggle {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 1.25rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-group.primary .nav-group-toggle {
  color: var(--text);
}

.nav-group-title {
  pointer-events: none;
}

.nav-group-chevron {
  font-size: 0.88rem;
  transform: rotate(-90deg);
  transition: transform var(--transition);
}

.nav-group.expanded .nav-group-chevron {
  transform: rotate(0deg);
}

.nav-group-items {
  list-style: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
}

.nav-group.expanded .nav-group-items {
  max-height: 600px;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.25rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
  font-size: 0.9rem;
  font-weight: 500;
  border-left: 3px solid transparent;
}

.nav-link-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.nav-label-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.nav-label {
  line-height: 1.2;
}

.nav-hint {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.15;
}

.nav-lock {
  font-size: 0.86rem;
  color: var(--text-dim);
  margin-left: 0.55rem;
}

.nav-link:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}

.nav-link.active {
  color: var(--accent);
  background: rgba(230,57,70,0.08);
  border-left-color: var(--accent);
}

.nav-link.active .nav-hint {
  color: rgba(230,57,70,0.8);
}

.nav-link-quickstart {
  color: var(--accent-2);
  background: rgba(244,162,97,0.08);
  border-left-color: var(--accent-2);
}

.nav-link-quickstart:hover {
  color: #ffd8a5;
  background: rgba(244,162,97,0.15);
}

.nav-link-disabled {
  color: var(--text-dim);
  opacity: 0.75;
  cursor: not-allowed;
  background: transparent;
  pointer-events: none;
}

.nav-link-disabled:hover {
  color: var(--text-dim);
  background: transparent;
}

.nav-link-disabled .nav-hint {
  color: var(--text-muted);
}

.nav-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; }

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 0.45rem 0 0.55rem;
  margin-top: auto;
}

.nav-logout { color: var(--text-dim); }
.nav-logout:hover { color: var(--accent); background: rgba(230,57,70,0.06); }

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99;
}

/* Main content */
.main-content {
  margin-left: var(--sidebar-w);
  padding: 2rem;
  min-height: 100vh;
  max-width: 1200px;
}

/* =====================================================
   PAGE COMPONENTS
   ===================================================== */

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.page-title {
  font-size: 2rem;
  color: var(--text);
}

.page-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Alerts */
.alert {
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  border: 1px solid;
}

.alert-error   { background: rgba(230,57,70,0.1);  border-color: rgba(230,57,70,0.3);  color: #ff9999; }
.alert-warning { background: rgba(244,162,97,0.1); border-color: rgba(244,162,97,0.3); color: #f4a261; }
.alert-info    { background: rgba(100,160,255,0.1);border-color: rgba(100,160,255,0.3);color: #aaccff; }
.alert-success { background: rgba(56,193,114,0.1); border-color: rgba(56,193,114,0.3); color: #5eebb8; }

.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-band   { background: rgba(230,57,70,0.15);  color: var(--accent);   border: 1px solid rgba(230,57,70,0.3); }
.badge-venue  { background: rgba(244,162,97,0.15); color: var(--accent-2); border: 1px solid rgba(244,162,97,0.3); }
.badge-agent { background: rgba(111,230,168,0.15); color: #86eac0; border: 1px solid rgba(111,230,168,0.3); }
.badge-promoter { background: rgba(255,210,90,0.15); color: #ffd980; border: 1px solid rgba(255,210,90,0.3); }
.badge-admin { background: rgba(188,110,255,0.18); color: #d8b7ff; border: 1px solid rgba(188,110,255,0.34); }
.badge-recording_label { background: rgba(100,160,255,0.15); color: #8fb3ff; border: 1px solid rgba(100,160,255,0.3); }
.badge-unclaimed {
  background: rgba(150,150,150,0.1);
  color: #888;
  border: 1px solid rgba(150,150,150,0.25);
  font-size: 0.65rem;
}
.badge-claimed {
  background: rgba(56,193,114,0.12);
  color: #5eebb8;
  border: 1px solid rgba(56,193,114,0.25);
  font-size: 0.65rem;
}
.badge-lastminute {
  background: rgba(56,193,114,0.15);
  color: #5eebb8;
  border: 1px solid rgba(56,193,114,0.3);
  font-size: 0.68rem;
  white-space: nowrap;
}

.user-type-badge {
  font-size: 0.6rem;
  padding: 0.15rem 0.45rem;
}

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.tag-venue {
  background: rgba(244,162,97,0.1);
  border-color: rgba(244,162,97,0.25);
  color: var(--accent-2);
}

.tag-exp {
  background: rgba(100,160,255,0.1);
  border-color: rgba(100,160,255,0.25);
  color: #aaccff;
}

/* =====================================================
   STATS GRID
   ===================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.stat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(230,57,70,0.1);
}

.stat-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }

.stat-number {
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =====================================================
   DASHBOARD SECTIONS
   ===================================================== */

.dashboard-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.dashboard-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.section-title {
  font-size: 1.1rem;
  color: var(--text);
}

.section-link {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.section-link:hover { color: var(--accent); }

.cards-list { display: flex; flex-direction: column; gap: 0.5rem; }

.list-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}

.list-card:hover {
  border-color: var(--accent);
  background: rgba(230,57,70,0.04);
}

.list-card-main { flex: 1; min-width: 0; }

.list-card-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.3rem;
  align-items: center;
}

.meta-location, .meta-cap {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.empty-state {
  color: var(--text-dim);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem;
}

/* =====================================================
   SEARCH BAR
   ===================================================== */

.search-bar-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.search-input-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: border-color var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.search-select {
  padding: 0.65rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--transition);
  min-width: 180px;
}

.search-select:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* Filter chips row (score/draw/genre/capacity) */
.filter-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: -0.75rem;
  margin-bottom: 1.5rem;
  align-items: center;
}
.filter-chip {
  padding: 0.4rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 1.75rem;
}
.filter-chip:focus { outline: none; border-color: var(--border-focus); }
.filter-chip:not([value=""]):not([value="0"]) {
  border-color: var(--accent);
  color: var(--text);
}
.filter-chip-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  background: rgba(230,57,70,0.1);
  border: 1px solid rgba(230,57,70,0.35);
  border-radius: 100px;
  color: var(--accent);
  font-size: 0.82rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background var(--transition);
  background-image: none;
  padding-right: 0.85rem;
}
.filter-chip-reset:hover { background: rgba(230,57,70,0.2); }

/* Capacity tier pills */
.cap-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  border: 1px solid;
}
.cap-xs { background: rgba(100,200,100,0.1);  color: #6cc97a;  border-color: rgba(100,200,100,0.25); }
.cap-sm { background: rgba(100,180,220,0.1);  color: #6ab4dc;  border-color: rgba(100,180,220,0.25); }
.cap-md { background: rgba(244,162,97,0.12);  color: #f4a261;  border-color: rgba(244,162,97,0.3);  }
.cap-lg { background: rgba(220,100,50,0.12);  color: #dc6432;  border-color: rgba(220,100,50,0.3);  }
.cap-xl { background: rgba(220,50,50,0.12);   color: #e04040;  border-color: rgba(220,50,50,0.3);   }

/* Toggle (seeking gigs) */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  padding: 0.65rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.toggle-label:hover { border-color: var(--border-focus); }
.toggle-label input[type="checkbox"] { display: none; }
.toggle-track {
  width: 34px;
  height: 18px;
  background: var(--border);
  border-radius: 100px;
  position: relative;
  transition: background var(--transition);
  flex-shrink: 0;
}
.toggle-label input:checked ~ .toggle-track { background: var(--accent); }
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: left var(--transition);
}
.toggle-label input:checked ~ .toggle-track .toggle-thumb { left: 18px; }
.toggle-text { font-size: 0.88rem; color: var(--text-muted); }
.toggle-label:has(input:checked) .toggle-text { color: var(--text); }

/* Infinite scroll sentinel */
.scroll-sentinel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  min-height: 60px;
}
.sentinel-spinner { display: flex; }
.sentinel-end { color: var(--text-muted); font-size: 0.85rem; text-align: center; }

/* Card CTA link */
.card-cta {
  font-size: 0.8rem;
  color: var(--accent);
  margin-top: auto;
  align-self: flex-start;
}
.card-cta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
}
.card-inline-claim {
  margin-left: auto;
  flex-shrink: 0;
}

/* Seeking gigs badge */
.badge-seeking {
  background: rgba(244,162,97,0.15);
  color: var(--accent-2, #f4a261);
  border: 1px solid rgba(244,162,97,0.3);
  font-size: 0.65rem;
}

/* =====================================================
   CARDS GRID
   ===================================================== */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.card-title {
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.3;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}
.card-score-line { font-size: 0.78rem; opacity: 0.75; }
.card-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; flex-shrink: 0; }

.card-btn {
  align-self: flex-start;
  margin-top: auto;
}

.load-more-row {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.loading-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--text-muted);
}

/* =====================================================
   MODAL
   ===================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  animation: slideUp 0.18s ease;
}

@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  margin: 0.75rem 0.75rem 0 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color var(--transition), border-color var(--transition);
  z-index: 10;
}

.modal-close:hover { color: var(--text); border-color: var(--accent); }

.modal-content { padding: 1.5rem; }

/* Modal detail styles */
.claim-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(230,57,70,0.08);
  border: 1px solid rgba(230,57,70,0.25);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.claim-banner-text { display: flex; flex-direction: column; gap: 0.2rem; }
.claim-banner-text strong { color: var(--text); font-size: 0.95rem; }
.claim-banner-text span { color: var(--text-muted); font-size: 0.82rem; }

.claim-page-card {
  cursor: default;
  gap: 1rem;
}
.claim-page-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}
.claim-page-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.claim-page-title {
  font-size: 1.35rem;
  color: var(--text);
}
.claim-page-subtitle {
  color: var(--text-muted);
  margin-top: 0.15rem;
  font-size: 0.88rem;
}
.claim-page-help {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.claim-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.form-group-full {
  grid-column: 1 / -1;
}

.modal-title {
  font-size: 1.75rem;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.modal-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.modal-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }

.modal-section { margin: 1.25rem 0; }

.modal-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

.modal-detail-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.modal-detail-label {
  color: var(--text-muted);
  min-width: 130px;
  font-size: 0.82rem;
}

.modal-detail-value { color: var(--text); }

.modal-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.modal-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--text-muted);
  transition: color var(--transition), border-color var(--transition);
}

.modal-link:hover { color: var(--accent); border-color: var(--accent); }

.modal-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* =====================================================
   FORMS
   ===================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
  font-family: var(--font-body);
  padding: 0.6rem 0.875rem;
  width: 100%;
  transition: border-color var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(230,57,70,0.12);
}

.form-group textarea { resize: vertical; min-height: 100px; }

.form-group select { cursor: pointer; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Card form wrapper */
.card-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.profile-form { }

.form-section {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-section:last-of-type { border-bottom: none; }

.form-section-title {
  font-size: 1.1rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

/* Checkbox grid */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
  font-size: 0.9rem;
}

.checkbox-option:hover { border-color: var(--accent); }
.checkbox-option input:checked + .checkbox-label { color: var(--accent); }
.checkbox-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(230,57,70,0.07);
}

.checkbox-option input { accent-color: var(--accent); }
.checkbox-label { color: var(--text-muted); }

/* Toggle switches */
.checkbox-group-inline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkbox-toggle {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.checkbox-toggle input { display: none; }

.toggle-track {
  width: 42px;
  height: 24px;
  background: var(--border);
  border-radius: 100px;
  position: relative;
  transition: background var(--transition);
  flex-shrink: 0;
}

.toggle-track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform var(--transition);
}

.checkbox-toggle input:checked ~ .toggle-track {
  background: var(--accent);
}

.checkbox-toggle input:checked ~ .toggle-track::after {
  transform: translateX(18px);
}

.checkbox-toggle-highlight .toggle-label {
  color: var(--text);
  font-weight: 600;
}

/* Members */
.member-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.member-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9rem;
  font-family: var(--font-body);
  padding: 0.5rem 0.75rem;
  transition: border-color var(--transition);
}

.member-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Form actions */
.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
}

.form-save-status { font-size: 0.85rem; color: var(--text-muted); }

/* =====================================================
   BUTTONS
   ===================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: white;
}

.btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-secondary:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.btn-danger {
  background: rgba(230,57,70,0.12);
  color: var(--accent);
  border-color: rgba(230,57,70,0.3);
}
.btn-danger:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-admin {
  background: rgba(156,39,176,0.12);
  color: #9c27b0;
  border-color: rgba(156,39,176,0.3);
}
.btn-admin:hover {
  background: #9c27b0;
  color: white;
  border-color: #9c27b0;
}
.badge-admin {
  background: #9c27b0;
  color: #fff;
  border: 1px solid rgba(156,39,176,0.35);
}

.modal-admin-actions {
  display: flex;
  gap: .6rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  margin-top: .5rem;
}

.modal-admin-actions a,
.modal-admin-actions button {
  opacity: 0;
  transition: opacity .15s;
}

.modal-admin-actions:hover a,
.modal-admin-actions:hover button {
  opacity: 1;
}

.btn-full { width: 100%; }

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
}

.btn-lg {
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* =====================================================
   SETTINGS PAGE
   ===================================================== */

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.settings-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-current {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.settings-current strong { color: var(--text); }

.settings-card-danger {
  border-color: rgba(230,57,70,0.25);
  grid-column: 1 / -1;
}

.danger-title { color: var(--accent); }

.settings-warning {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* =====================================================
   SPINNER
   ===================================================== */

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================
   TOAST NOTIFICATIONS
   ===================================================== */

.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 9999;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  max-width: 340px;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.toast-success {
  border-color: rgba(56,193,114,0.4);
  background: rgba(56,193,114,0.1);
  color: #5eebb8;
}

.toast.toast-error {
  border-color: rgba(230,57,70,0.4);
  background: rgba(230,57,70,0.1);
  color: #ff9999;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {
  .dashboard-sections { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-card-danger { grid-column: auto; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .topbar { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    top: var(--topbar-h);
  }

  .sidebar.open { transform: translateX(0); }

  .sidebar-overlay.show { display: block; }

  .main-content {
    margin-left: 0;
    padding: 1rem;
    padding-top: calc(var(--topbar-h) + 1rem);
  }

  .form-row { grid-template-columns: 1fr; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card:last-child { grid-column: 1 / -1; }

  .cards-grid { grid-template-columns: 1fr; }

  .modal-box { max-height: 95vh; }

  .search-bar-row { flex-direction: column; }
  .search-select { width: 100%; }

  .cta-banner { flex-direction: column; align-items: flex-start; }

  .type-selector { grid-template-columns: 1fr; }
  .claim-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card:last-child { grid-column: auto; }
  .page-title { font-size: 1.5rem; }
  .auth-card { padding: 1.25rem; }
}

/* =====================================================
   CALENDAR / SHOWS PAGE
   ===================================================== */

/* Header area */
.calendar-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Week navigation */
.week-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.week-label {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  min-width: 220px;
  text-align: center;
}

/* Controls row: tabs + search + sf-only */
.cal-controls-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* View tab toggles */
.view-tabs {
  display: flex;
  gap: 0.35rem;
}

.view-tab {
  padding: 0.45rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.view-tab:hover {
  color: var(--text);
  border-color: var(--accent);
}

.view-tab.active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(230,57,70,0.1);
}

/* Search inside calendar header */
.cal-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 180px;
  max-width: 340px;
}

.cal-search-wrap .search-icon {
  position: absolute;
  left: 0.7rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  pointer-events: none;
}

.cal-search-wrap .search-input {
  padding-left: 2.2rem;
  width: 100%;
}

/* SF Only toggle */
.sf-only-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.sf-only-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ---- List View ---- */

.day-section {
  margin-bottom: 2rem;
}

.day-heading {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 0.875rem;
  display: inline-block;
}

.day-shows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.show-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.show-card:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  box-shadow: 0 2px 12px rgba(230,57,70,0.1);
}

.show-venue {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.3rem;
  letter-spacing: 0.02em;
}

.show-bands {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.show-bands .tag {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.15);
  padding: 0.2rem 0.65rem;
}

.show-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

/* Badges */
.badge-age {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(136,136,153,0.15);
  color: var(--text-muted);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-time {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(244,162,97,0.12);
  color: var(--accent-2);
  border: 1px solid rgba(244,162,97,0.25);
}

.badge-price {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(56,193,114,0.1);
  color: #5eebb8;
  border: 1px solid rgba(56,193,114,0.2);
}

.badge-soldout {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(230,57,70,0.18);
  color: var(--accent);
  border: 1px solid rgba(230,57,70,0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-ticketed {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--bg-input);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.no-shows {
  color: var(--text-dim);
  font-size: 0.88rem;
  font-style: italic;
  padding: 0.5rem 0;
}

/* ---- Calendar Grid View ---- */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.cal-day {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cal-day-head {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}

.cal-day-dow {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cal-day-num {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.cal-day.cal-today .cal-day-num {
  color: var(--accent);
}

.cal-day-body {
  padding: 0.4rem 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow: hidden;
}

.cal-show-item {
  font-size: 0.75rem;
  padding: 0.25rem 0.4rem;
  border-radius: 3px;
  background: rgba(230,57,70,0.08);
  border-left: 2px solid var(--accent);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.cal-show-item:hover {
  background: rgba(230,57,70,0.18);
}

.cal-show-venue {
  font-weight: 600;
  color: var(--accent);
  display: block;
}

.cal-show-band {
  color: var(--text-muted);
  display: block;
}

.cal-more {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 0.1rem 0.4rem;
  font-style: italic;
}

/* ---- Venue Stats View ---- */

.stats-shows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card-venue {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}

.stat-venue-name {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.stat-venue-count {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.stat-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 0.4rem;
}

.stat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  title: attr(data-date);
}

.dot-show {
  background: #3abc71;
  box-shadow: 0 0 4px rgba(58,188,113,0.5);
}

.dot-dark {
  background: var(--border);
}

/* Calendar responsive */
@media (max-width: 900px) {
  .cal-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .cal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cal-controls-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .cal-search-wrap {
    max-width: 100%;
    width: 100%;
  }
  .view-tabs {
    flex-wrap: wrap;
  }
}

/* Source badges */
.badge-source { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 3px; vertical-align: middle; margin-left: 6px; text-transform: uppercase; }
.badge-source-gamh         { background: #1a3a5c; color: #7ec8e3; }
.badge-source-warfield     { background: #3a1a1a; color: #e38c7e; }
.badge-source-regency      { background: #1a2e1a; color: #7ec87e; }
.badge-source-ticketmaster { background: #2a1a3a; color: #c87ee3; }

/* =====================================================
   SHARED TABLES (Ticketing/Admin-like)
   ===================================================== */

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.admin-table th {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.admin-table tr:hover td {
  background: rgba(255,255,255,0.03);
}

/* =====================================================
   DARK NIGHTS PAGE
   ===================================================== */

.dn-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dn-days-toggle {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.dn-days-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.dn-stats-bar {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.dn-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
}

.dn-grid {
  display: grid;
  grid-template-columns: 180px repeat(var(--dn-cols, 30), minmax(32px, 1fr));
  gap: 2px;
  min-width: max-content;
}

.dn-venue-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  max-width: 180px;
}

.dn-header-venue {
  color: transparent;
}

.dn-header-cell {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: center;
  padding: 3px 1px;
  line-height: 1.2;
  white-space: nowrap;
}

.dn-header-cell.dn-today {
  color: var(--accent);
  font-weight: 700;
}

.dn-cell {
  font-size: 0.72rem;
  border-radius: 4px;
  text-align: center;
  padding: 4px 2px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  transition: filter var(--transition), transform var(--transition);
}

.dn-dark {
  background: #2a1010;
  color: #e63946;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}

.dn-dark:hover {
  filter: brightness(1.4);
  transform: scale(1.1);
  z-index: 2;
  position: relative;
}

.dn-booked {
  background: #0f2a10;
  color: #4caf50;
  font-size: 0.7rem;
}

.dn-cell.dn-today {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

/* Interest Modal */
#interestModal .modal-box {
  max-width: 500px;
  width: 100%;
}

.interest-form .form-group {
  margin-bottom: 1rem;
}

.interest-form label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.interest-form input[type="text"],
.interest-form input[type="email"],
.interest-form textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: border-color var(--transition);
}

.interest-form input:focus,
.interest-form textarea:focus {
  outline: none;
  border-color: var(--border-focus);
}

.radio-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
}

.radio-option input[type="radio"] {
  accent-color: var(--accent);
}

/* Available days checkboxes on profile */
.day-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.day-check-group .checkbox-option {
  min-width: 56px;
}

@media (max-width: 600px) {
  .dn-grid {
    grid-template-columns: 130px repeat(var(--dn-cols, 30), minmax(28px, 1fr));
  }
  .dn-venue-name {
    max-width: 130px;
    font-size: 0.72rem;
  }
  .dn-controls {
    flex-direction: column;
    align-items: flex-start;
  }
  .dn-controls .search-input-wrap {
    width: 100%;
    max-width: 100%;
  }
}

/* =====================================================
   PERFORMER SCORES
   ===================================================== */

.score-panel-wrap:empty { display: none; }

.score-panel {
  margin-top: 1rem;
}

.score-meters {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

.score-meter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.score-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 72px;
  flex-shrink: 0;
}

.score-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.score-draw {
  background: var(--accent);
}

.score-revenue {
  background: var(--accent-2);
}

.score-reliability {
  background: #4caf50;
}

.score-momentum {
  background: #42a5f5;
}

.score-val {
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 44px;
  text-align: right;
  flex-shrink: 0;
}

.score-insights {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}

.insight-line {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.score-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 0.4rem;
}

/* Composite score badge on band cards */
.composite-badge {
  display: inline-block;
  background: var(--bg-card);
  color: var(--accent-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 7px;
  margin-left: 0.4rem;
  vertical-align: middle;
  line-height: 1.6;
  white-space: nowrap;
}

/* =====================================================
   EVENT CREATION / EDIT FORM
   ===================================================== */

/* Two-column layout: sticky nav sidebar + form body */
.event-form-layout {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 2rem;
  align-items: start;
  max-width: 1000px;
}

/* ── Section nav (left sidebar) ── */
.event-form-nav {
  position: sticky;
  top: calc(var(--topbar-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.efn-link {
  display: block;
  padding: .45rem .75rem;
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
  border-left: 2px solid transparent;
  text-decoration: none;
}
.efn-link:hover   { background: var(--bg-card); color: var(--text); }
.efn-link.active  { color: var(--accent); border-left-color: var(--accent); background: var(--bg-card); }

/* ── Form sections ── */
.event-form-body {
  min-width: 0;
}

.event-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}

.event-section-title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.event-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.event-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  margin-left: auto;
  color: var(--text-muted);
}
.event-type-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 1rem;
  height: 1rem;
}

.field-hint {
  display: block;
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .3rem;
  line-height: 1.4;
}

.req { color: var(--accent); }

/* ── Save bar (sticky bottom) ── */
.event-save-bar {
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 -4px 24px rgba(0,0,0,.4);
  z-index: 10;
}

/* ── Lineup builder ── */
.lineup-search-wrap {
  position: relative;
  margin-bottom: 1rem;
}

.lineup-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  z-index: 100;
}
.lineup-results.hidden { display: none; }

.lineup-result-item {
  padding: .6rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9rem;
  transition: background var(--transition);
}
.lineup-result-item:hover     { background: var(--bg-card-hover); }
.lineup-result-item strong    { color: var(--text); }
.lineup-result-genre          { font-size: .75rem; color: var(--text-muted); }
.lineup-result-empty          { padding: .75rem 1rem; color: var(--text-muted); font-size: .85rem; }

/* Lineup rows */
.lineup-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .5rem;
}

.lineup-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  transition: border-color var(--transition);
}
.lineup-item:hover            { border-color: var(--border-focus); }
.lineup-item.dragging         { opacity: .4; }

.lineup-handle {
  cursor: grab;
  color: var(--text-dim);
  font-size: 1.1rem;
  user-select: none;
  flex-shrink: 0;
}
.lineup-handle:active         { cursor: grabbing; }

.lineup-act-name {
  font-weight: 600;
  font-size: .9rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineup-billing {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .8rem;
  padding: .25rem .4rem;
  flex-shrink: 0;
}

.lineup-time {
  width: 96px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .8rem;
  padding: .25rem .4rem;
  flex-shrink: 0;
}

.lineup-time-sep {
  color: var(--text-dim);
  flex-shrink: 0;
}

.lineup-remove.btn-icon {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  padding: .1rem .3rem;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
  flex-shrink: 0;
}
.lineup-remove.btn-icon:hover { color: var(--accent); background: rgba(230,57,70,.12); }

/* ── Ticket type builder (inline new-event form) ── */
.ticket-summary {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  margin-bottom: .75rem;
}

.ticket-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.ticket-summary-row:last-child { border-bottom: none; }
.ticket-summary-name           { font-weight: 600; }
.ticket-summary-meta           { color: var(--text-muted); font-size: .82rem; }

.ticket-builder-row {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: .5rem;
}

.ticket-builder-fields {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.ticket-builder-fields .form-group {
  flex: 1;
  min-width: 120px;
}

/* ── Mobile overrides ── */
@media (max-width: 768px) {
  .event-form-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .event-form-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: .5rem;
  }

  .efn-link {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: .3rem .6rem;
    font-size: .78rem;
  }
  .efn-link.active { border-left: none; border-bottom-color: var(--accent); }

  .lineup-item {
    flex-wrap: wrap;
  }
  .lineup-act-name { width: 100%; }

  .event-save-bar {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 0 -1rem;
  }
}

/* =====================================================
   VENUE DARK NIGHTS — calendar + band browser
   ===================================================== */

/* ── Controls bar ── */
.vdn-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.vdn-nav-btns {
  display: flex;
  gap: .4rem;
}
.vdn-stats {
  font-size: .85rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Month grid layout ── */
.vdn-months-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 700px) {
  .vdn-months-wrap { grid-template-columns: 1fr; }
}

.vdn-month {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.vdn-month-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
  margin-bottom: 1rem;
}

/* 7-column day grid */
.vdn-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.vdn-dow {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
  padding: .25rem 0;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Day cells ── */
.vdn-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 500;
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
  user-select: none;
}
.vdn-day.empty { background: none; }
.vdn-day.past  { color: var(--text-dim); opacity: .45; }

.vdn-day.today {
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.vdn-day.booked {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.vdn-day.booked:hover {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

.vdn-day.dark {
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  border: 1px dashed var(--border);
}
.vdn-day.dark:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.vdn-day.dark:hover .vdn-day-plus { opacity: 1; }

/* Booked dot */
.vdn-day-dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* Dark night plus icon */
.vdn-day-plus {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: .65rem;
  color: var(--accent);
  opacity: .5;
  transition: opacity var(--transition);
  line-height: 1;
}

/* ── Legend ── */
.vdn-legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .5rem;
}
.vdn-legend-item { display: flex; align-items: center; gap: .4rem; }
.vdn-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.vdn-legend-dot.booked { background: color-mix(in srgb, var(--accent) 25%, transparent); border: 1.5px solid var(--accent); }
.vdn-legend-dot.dark   { background: var(--bg); border: 1px dashed var(--border); }
.vdn-legend-dot.past   { background: var(--bg); opacity: .4; border: 1px solid var(--border); }

/* ── Band Browser Modal ── */
.vdn-browser-box {
  width: min(900px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.vdn-browser-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.vdn-browser-date {
  font-size: .9rem;
  color: var(--accent);
  font-weight: 600;
  margin-top: .25rem;
}
.vdn-browser-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.vdn-genre-chips {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.vdn-browser-summary {
  font-size: .8rem;
  color: var(--text-dim);
  margin-bottom: .75rem;
}

/* ── Band Cards Grid ── */
.vdn-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .85rem;
  flex: 1;
}
@media (max-width: 600px) {
  .vdn-band-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .vdn-band-grid { grid-template-columns: 1fr; }
}

.vdn-band-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.vdn-band-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

.vdn-band-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .4rem;
}
.vdn-band-name {
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
  line-height: 1.25;
}
.vdn-score {
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .4rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.vdn-score.score-high { background: #1a3d2b; color: #4ade80; }
.vdn-score.score-med  { background: #2d2a1a; color: #facc15; }
.vdn-score.score-low  { background: var(--bg-card); color: var(--text-muted); }

.vdn-band-genres {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.vdn-genre-tag {
  font-size: .68rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.vdn-genre-tag.matched {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.vdn-band-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.badge-played-here {
  background: #1a3020;
  color: #4ade80;
  font-size: .68rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-weight: 600;
}
.badge-last-minute {
  background: #2d1f0a;
  color: #fb923c;
  font-size: .68rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-weight: 600;
}

.vdn-band-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .72rem;
  color: var(--text-dim);
}
.vdn-match-score {
  color: var(--accent);
  font-weight: 600;
}
.vdn-meta-item { white-space: nowrap; }

.vdn-band-actions {
  margin-top: auto;
  padding-top: .4rem;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.vdn-load-more-wrap {
  text-align: center;
  padding: 1rem 0 .5rem;
}
.vdn-back-btn { margin-bottom: .5rem; }

/* ── Invite form ── */
.vdn-invite-subtitle {
  font-size: .9rem;
  color: var(--text-muted);
  margin: .35rem 0 1.25rem;
}
.vdn-invite-form textarea {
  width: 100%;
  resize: vertical;
}


/* ── Notification Bell ── */
.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--text-muted);
  padding: 0 .25rem;
  transition: color .15s;
}
.notif-bell:hover { color: var(--text); }
.notif-count {
  position: absolute;
  top: -5px;
  right: -6px;
  background: var(--accent);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}