/* ============================================================
   PioneersTicket — Design System & Stylesheet
   Mobile-first, accessible, responsive.
   ============================================================ */

/* ---- Design Tokens: see /STYLE_GUIDE.md ---- */
:root {
  color-scheme: light;

  /* Lion-gold brand palette */
  --color-primary: #b98516;
  --color-primary-hover: #9a6b0d;
  --color-primary-dark: #2d281d;
  --color-primary-light: #c99a31;
  --color-primary-soft: #f3e7c7;
  --color-primary-text: #76540e;
  --color-on-primary: #1b1a17;
  --color-accent: #8a620f;

  /* Warm neutral surfaces */
  --color-bg: #f6f4ee;
  --color-surface: #eeeae0;
  --color-surface-raised: #fffdf8;
  --color-surface-muted: #e4dfd2;
  --color-border: #d0c8b7;
  --color-border-strong: #aaa08c;
  --color-text: #1b1a17;
  --color-text-light: #575247;
  --color-header: #181817;
  --color-header-raised: #25231f;
  --color-on-dark: #fbf7ed;
  --color-on-dark-muted: #d8d1c2;
  --color-brand-border: #4b422d;
  --background-hero:
    radial-gradient(circle at 85% 15%, rgba(185, 133, 22, 0.22), transparent 34%),
    linear-gradient(135deg, #181817 0%, #322e25 100%);
  --background-brand: linear-gradient(135deg, #181817, #302b22);

  /* Feedback */
  --color-success: #27613d;
  --color-success-surface: #e8f3e9;
  --color-success-border: #8cb398;
  --color-success-text: #1e5032;
  --color-warning: #76540e;
  --color-warning-surface: #f6ecd4;
  --color-warning-text: #604408;
  --color-error: #a03232;
  --color-error-surface: #f8e8e6;
  --color-error-border: #d59b96;
  --color-error-text: #842828;

  /* Interaction colors */
  --color-row-hover: rgba(27, 26, 23, 0.045);
  --color-header-hover: rgba(255, 255, 255, 0.1);
  --color-header-active: rgba(185, 133, 22, 0.22);
  --color-header-border: rgba(255, 255, 255, 0.22);
  --color-header-control: rgba(255, 255, 255, 0.06);
  --focus-ring: rgba(185, 133, 22, 0.3);
  --error-ring: rgba(160, 50, 50, 0.18);

  /* Typography */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --fs-2xl: clamp(1.875rem, 1.59rem + 1.4vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.84rem + 2vw, 3.5rem);

  /* 4px-based spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Shape, elevation, dimensions */
  --radius-sm: 0.375rem;
  --radius: 0.625rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(28, 24, 16, 0.08);
  --shadow: 0 8px 24px rgba(28, 24, 16, 0.1);
  --shadow-lg: 0 18px 48px rgba(28, 24, 16, 0.16);
  --shadow-avatar: 0 3px 10px rgba(0, 0, 0, 0.2);
  --transition: 180ms ease;
  --control-height: 2.75rem;
  --control-height-sm: 2.25rem;
  --icon-button-size: 2.5rem;
  --avatar-size: 3rem;
  --max-width: 75rem;
  --max-width-reading: 45rem;
  --max-width-admin: 100rem;
  --header-height: 4.25rem;
}

/* Theme selection is exclusively controlled by the operating system. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-primary: #d7a93f;
    --color-primary-hover: #e4ba56;
    --color-primary-dark: #0b0b0a;
    --color-primary-light: #e0b64f;
    --color-primary-soft: #3b301c;
    --color-primary-text: #f0c96b;
    --color-on-primary: #111110;
    --color-accent: #d7a93f;

    --color-bg: #111110;
    --color-surface: #1a1917;
    --color-surface-raised: #23211e;
    --color-surface-muted: #2c2924;
    --color-border: #4a453b;
    --color-border-strong: #6b6354;
    --color-text: #f7f3e8;
    --color-text-light: #bdb6a7;
    --color-header: #0b0b0a;
    --color-header-raised: #1d1b18;
    --color-on-dark: #fbf7ed;
    --color-on-dark-muted: #cbc4b5;

    --color-success: #75bd8c;
    --color-success-surface: #1b3424;
    --color-success-border: #426d50;
    --color-success-text: #9ed4ad;
    --color-warning: #e1ba5c;
    --color-warning-surface: #3a301b;
    --color-warning-text: #efd078;
    --color-error: #ed8580;
    --color-error-surface: #3d2221;
    --color-error-border: #854d49;
    --color-error-text: #ffaaa4;

    --color-row-hover: rgba(255, 255, 255, 0.055);
    --color-header-hover: rgba(255, 255, 255, 0.1);
    --color-header-active: rgba(215, 169, 63, 0.2);
    --color-header-border: rgba(255, 255, 255, 0.2);
    --color-header-control: rgba(255, 255, 255, 0.07);
    --focus-ring: rgba(215, 169, 63, 0.34);
    --error-ring: rgba(237, 133, 128, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Skip Navigation (a11y) ---- */
.skip-nav {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--color-primary);
  color: var(--color-on-dark);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius);
  z-index: 9999;
  font-weight: 600;
  text-decoration: none;
}
.skip-nav:focus {
  top: var(--space-md);
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Focus Styles (a11y) ---- */
*:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  color: var(--color-text);
  font-weight: 700;
}
h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-lg); }
h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-xl); }
h3 { font-size: var(--fs-lg); margin-bottom: var(--space-md); }

p { margin-bottom: var(--space-md); }
small { font-size: var(--fs-sm); color: var(--color-text-light); }

a {
  color: var(--color-primary-light);
  text-decoration: underline;
  transition: color var(--transition);
}
a:hover { color: var(--color-primary-dark); }

/* ---- Layout Container ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* ---- Site Header ---- */
.site-header {
  background: var(--color-primary-dark);
  color: var(--color-on-dark);
  height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  color: var(--color-on-dark);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.5px;
}
.logo:hover { color: var(--color-on-dark-muted); }

/* ---- Navigation ---- */
.site-header nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.site-header nav a {
  color: var(--color-on-dark-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.site-header nav a:hover,
.site-header nav a:focus-visible {
  background: var(--color-header-hover);
  color: var(--color-on-dark);
}
.site-header nav a.active {
  background: var(--color-header-active);
  color: var(--color-on-dark);
  font-weight: 600;
}

/* Hamburger button (mobile) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--color-on-dark);
}
.nav-toggle svg { width: 24px; height: 24px; fill: currentColor; }

/* ---- Main Content ---- */
main.container { flex: 1; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }

 /* ---- Page Header Section (listing pages) ---- */
.page-header-section {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-on-dark);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2xl);
}
.page-header-section h1 { color: var(--color-on-dark); font-size: var(--fs-3xl); }
.page-header-section p { font-size: var(--fs-md); opacity: 0.9; max-width: 650px; margin-inline: auto; }

/* ---- Filters (category buttons) ---- */
.filters .btn-primary {
  box-shadow: var(--shadow-sm);
}

/* ---- Sections ---- */
.section { margin-bottom: var(--space-2xl); }
.section:last-child { margin-bottom: 0; }

/* ---- Buttons ---- */
.btn, .btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6875rem 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  border: 2px solid transparent;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-primary, .btn {
  background: var(--color-primary);
  color: var(--color-on-dark);
}
.btn-primary:hover, .btn:hover:not(.btn-secondary) {
  background: var(--color-primary-dark);
  color: var(--color-on-dark);
}

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

/* ---- Search Form ---- */
.search-form {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.search-form input[type="text"] {
  flex: 1;
  padding: 0.75rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-family: inherit;
}
.search-form input[type="text"]:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

/* ---- Filters ---- */
.filters {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

/* ---- Inline Form (admin) ---- */
.form-inline {
  display: inline;
}

/* ---- Dashed Separator ---- */
.text-muted {
  color: var(--color-text-light);
}

/* ---- Flash Messages (a11y: aria-live) ---- */
.flash {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  margin-bottom: var(--space-xl);
  font-weight: 500;
  border-left: 4px solid;
}
.flash-success {
  background: var(--color-success-surface); color: var(--color-success-text); border-color: var(--color-success);
}
.flash-error {
  background: var(--color-error-surface); color: var(--color-error-text); border-color: var(--color-error);
}

/* ---- Auth Form ---- */
.auth-form {
  max-width: 420px;
  width: 100%;
  margin: var(--space-3xl) auto;
  padding: var(--space-2xl);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.auth-form h1 { text-align: center; font-size: var(--fs-xl); }

/* ---- Forms ---- */
.form-group { margin-bottom: var(--space-md); }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  font-size: var(--fs-base);
  font-family: inherit;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-raised);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
.form-group input[disabled] {
  background: var(--color-surface);
  color: var(--color-text-light);
  cursor: not-allowed;
}
.form-group small { display: block; margin-top: var(--space-xs); }

/* ---- Cards (Business, Event) ---- */
.business-grid, .event-list {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.business-card, .event-card {
  display: block;
  padding: var(--space-xl);
  background: var(--color-surface-raised);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.business-card:hover, .event-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.business-card h3, .event-card h3 { color: var(--color-primary); margin-bottom: var(--space-xs); }
.business-card p, .event-card p { font-size: var(--fs-sm); color: var(--color-text-light); margin-bottom: 0; }

 /* ---- Event Date Badge ---- */
.event-date {
  display: block;
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--color-primary-light);
  font-weight: 600;
  margin-top: var(--space-sm);
}

 /* ---- Dashboard Layout ---- */
.dashboard {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 240px 1fr;
}
.dashboard-sidebar {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  height: fit-content;
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
}
.dashboard-sidebar h3 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}
.dashboard-sidebar ul { list-style: none; }
.dashboard-sidebar li a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: background var(--transition), color var(--transition);
}
.dashboard-sidebar li a:hover { background: var(--color-row-hover); }
.dashboard-sidebar li a.active {
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-weight: 600;
}

.dashboard-content h1 { margin-bottom: var(--space-xl); }

/* ---- Stats Grid ---- */
.stats-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat-card {
  background: var(--color-surface-raised);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.stat-card h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-xs); }

 /* ---- Page Header Row ---- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ---- Status Badge ---- */
.status-badge {
  text-transform: capitalize;
}

/* ---- Screen Reader Only (a11y) ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ---- User Filter Bar ---- */
.filter-bar {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}
.filter-bar input[type="text"] {
  flex: 1;
  min-width: 200px;
  padding: var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-family: inherit;
}
.filter-bar select {
  padding: var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-family: inherit;
  background: var(--color-surface-raised);
}

/* ---- Form Layout (wide) ---- */
.form-wide {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ---- Form Row ---- */
.form-row {
  display: flex;
  gap: var(--space-md);
}
.form-row.wrap {
  flex-wrap: wrap;
}
.form-row .form-group {
  flex: 1;
}

/* ---- Admin Tabs ---- */
.admin-tabs { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.admin-tab {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius) var(--radius) 0 0;
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-light);
  background: var(--color-surface);
  border-bottom: 3px solid transparent;
  transition: all var(--transition);
}
.admin-tab:hover { color: var(--color-primary); }
.admin-tab.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-surface-raised);
}

/* ---- Data Tables (a11y) ---- */
.data-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.data-table caption {
  text-align: left;
  font-weight: 700;
  padding: var(--space-md) 0;
  color: var(--color-text);
}
.data-table th, .data-table td {
  padding: var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.data-table thead th {
  background: var(--color-surface);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: var(--fs-xs);
}
.data-table tbody tr:hover { background: var(--color-row-hover); }

/* ---- Event Meta ---- */
.event-meta { margin-bottom: var(--space-xl); }
.event-meta p { margin-bottom: var(--space-sm); font-size: var(--fs-base); }

/* ---- Description Block ---- */
.description {
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius);
  line-height: 1.7;
}
.description h2 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-md);
}

/* ---- RSVP Section ---- */
.rsvp-section {
  margin-top: var(--space-xl);
}

/* ---- Footer ---- */
.site-footer {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  color: var(--color-text-light);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

/* ---- Responsive: Tablet (768px+) ---- */
@media (min-width: 768px) {
  .auth-form { padding: var(--space-2xl) var(--space-3xl); }
}

/* ---- Responsive: Mobile (< 768px) — compact layout ---- */
@media (max-width: 767px) {
  :root { --header-height: 52px; }

  /* Tighter container padding on mobile */
  .container { padding-inline: var(--space-md); }

  .nav-toggle { display: block; }

  /* Compact header nav */
  .site-header nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-primary-dark);
    flex-direction: column;
    padding: var(--space-md);
    gap: var(--space-xs);
    transform: translateY(-120%);
    transition: transform 0.3s ease;
    box-shadow: var(--shadow-lg);
    z-index: 99;
  }
  .site-header nav.open { transform: translateY(0); }
  .site-header nav a { font-size: var(--fs-sm); padding: var(--space-sm) var(--space-md); width: 100%; text-align: center; }

  /* Logo smaller on mobile */
  .logo { font-size: var(--fs-base); }

  /* Dashboard stacks on mobile — compact sidebar */
  .dashboard { grid-template-columns: 1fr; gap: var(--space-md); }
  .dashboard-sidebar { position: static; padding: var(--space-md); }
  .dashboard-sidebar h3 { font-size: var(--fs-xs); margin-bottom: var(--space-sm); }
  .dashboard-sidebar ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
  .dashboard-sidebar li a { padding: var(--space-xs) var(--space-sm); font-size: var(--fs-xs); white-space: nowrap; }

  /* Stats grid — tighter */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .stat-card { padding: var(--space-md); }
  .stat-card h2 { font-size: var(--fs-xl); margin-bottom: var(--space-xs); }

  /* Business/event cards stack — tighter padding */
  .business-grid, .event-list { grid-template-columns: 1fr; gap: var(--space-md); }
  .business-card, .event-card { padding: var(--space-lg); }


  /* Page header section — compact */
  .page-header-section { padding: var(--space-xl) var(--space-md); margin-bottom: var(--space-xl); border-radius: var(--radius); }
  .page-header-section h1 { font-size: var(--fs-2xl); }
  .page-header-section p { font-size: clamp(0.94rem, 0.88rem + 0.3vw, 1rem); }

  /* Search form — stack on mobile */
  .search-form { flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); }
  .search-form input[type="text"] { width: 100%; }
  .search-form button { width: 100%; }

  /* Filters — tighter wrapping */
  .filters { gap: var(--space-xs); margin-bottom: var(--space-lg); }
  .filters .btn, .filters a.btn { padding: var(--space-xs) var(--space-sm); font-size: var(--fs-xs); }

  /* Section spacing — reduced */
  .section { margin-bottom: var(--space-xl); }
  .section h2 { font-size: var(--fs-xl); margin-bottom: var(--space-md); }
  .section p { font-size: clamp(0.94rem, 0.88rem + 0.3vw, 1rem); margin-bottom: var(--space-sm); }


  /* Auth form — tighter */
  .auth-form { padding: var(--space-lg) var(--space-md); margin-top: var(--space-xl); }

  /* Forms — smaller inputs */
  .form-group input,
  .form-group select,
  .form-group textarea { padding: 0.6rem; font-size: clamp(0.94rem, 0.88rem + 0.3vw, 1rem); }

  /* Data tables — compact cells */
  .data-table th, .data-table td { padding: var(--space-sm) var(--space-xs); font-size: var(--fs-xs); }

  /* Page header row — stack */
  .page-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-lg); }

  /* Filter bar — compact */
  .filter-bar { gap: var(--space-sm); margin-bottom: var(--space-lg); }
  .filter-bar input[type="text"] { padding: var(--space-sm); font-size: clamp(0.94rem, 0.88rem + 0.3vw, 1rem); min-width: 0; }
  .filter-bar select { padding: var(--space-sm); font-size: clamp(0.94rem, 0.88rem + 0.3vw, 1rem); }

  /* Description block — compact */
  .description { padding: var(--space-md); }

  /* Event meta — tighter */
  .event-meta p { margin-bottom: var(--space-xs); font-size: clamp(0.94rem, 0.88rem + 0.3vw, 1rem); }

  /* Footer — smaller */
  .site-footer { padding: var(--space-lg) var(--space-md); font-size: var(--fs-sm); }

  /* Main content — less vertical breathing room */
  main.container { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

  /* Buttons — slightly smaller on mobile */
  .btn, .btn-primary, .btn-secondary { padding: 0.5rem 1.2rem; font-size: var(--fs-xs); }

  /* Flash messages — compact */
  .flash { padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-lg); font-size: clamp(0.94rem, 0.88rem + 0.3vw, 1rem); }


  /* Form row — stack on mobile */
  .form-row { flex-direction: column; }
}

/* ---- Responsive: Small Mobile (< 480px) — ultra compact ---- */
@media (max-width: 479px) {
  :root { --header-height: 48px; }
  .container { padding-inline: var(--space-sm); }
  .stats-grid { grid-template-columns: 1fr; }
  .admin-tabs { flex-direction: column; }
  .admin-tab { border-radius: var(--radius); border-bottom: 2px solid transparent; text-align: center; }
  .page-header-section h1 { font-size: var(--fs-xl); }
  .business-card, .event-card { padding: var(--space-md); }
}

/* ---- Print Styles ---- */
@media print {
  .site-header, .site-footer, .nav-toggle, .dashboard-sidebar, form { display: none; }
  body { color: #000; background: var(--color-surface-raised); }
  a { color: #000; text-decoration: underline; }
}

/* ---- Reduced Motion (a11y) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- High Contrast (a11y) ---- */
@media (forced-colors: active) {
  .btn, .btn-primary, .btn-secondary { border: 2px solid ButtonText; }
  .flash { border-left-width: 6px; }
  .dashboard-sidebar li a.active { background: Highlight; color: HighlightText; }
}

/* ---- Calendar and public profiles ---- */
.calendar-legend { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0 0 var(--space-lg); }
.calendar-list { display: grid; gap: var(--space-md); }
.calendar-card { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-lg); padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shadow-sm); }
.calendar-date { text-align: center; color: var(--color-primary); border-right: 1px solid var(--color-border); padding-right: var(--space-lg); }
.calendar-date strong, .calendar-date span, .profile-card small { display: block; }
.calendar-date strong { font-size: var(--fs-lg); }
.calendar-date span { color: var(--color-text-light); font-size: var(--fs-sm); }
.calendar-card h3 { margin: var(--space-sm) 0; }
.calendar-card-content p:last-child { margin-bottom: 0; }
.calendar-tag { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.calendar-tag-community { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.calendar-tag-offer { background: var(--color-warning-surface); color: var(--color-warning-text); }
.calendar-tag-city { background: var(--color-success-surface); color: var(--color-success-text); }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); }
.profile-card { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); color: var(--color-text); text-decoration: none; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shadow-sm); }
.profile-card:hover { color: var(--color-primary-dark); box-shadow: var(--shadow); }
.profile-card small { color: var(--color-text-light); }
.profile-avatar { display: inline-grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-dark); font-weight: 700; }
.profile-avatar-large { width: 92px; height: 92px; flex-basis: 92px; font-size: var(--fs-xl); }
.profile-detail { display: flex; align-items: center; gap: var(--space-xl); margin-bottom: var(--space-xl); padding: var(--space-xl); background: var(--color-surface); border-radius: var(--radius-lg); }
.empty-state { padding: var(--space-xl); text-align: center; background: var(--color-surface); border-radius: var(--radius-lg); }
@media (max-width: 600px) { .calendar-card { grid-template-columns: 1fr; gap: var(--space-md); } .calendar-date { text-align: left; border-right: 0; border-bottom: 1px solid var(--color-border); padding: 0 0 var(--space-sm); } .profile-detail { align-items: flex-start; gap: var(--space-md); } }
.account-dashboard { max-width: 760px; margin-inline: auto; }
.account-form { display: flex; flex-direction: column; gap: var(--space-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.password-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-md); }
.password-fieldset legend { padding-inline: var(--space-xs); font-weight: 600; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ---- Public one-page landing ---- */
.public-landing { max-width: 900px; margin-inline: auto; }
.landing-intro { text-align: center; padding: var(--space-xl) 0 var(--space-lg); }
.landing-intro h1 { margin-bottom: var(--space-sm); }
.landing-intro > p:last-child { color: var(--color-text-light); font-size: var(--fs-md); }
.calendar-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); max-width: 520px; margin: 0 auto var(--space-2xl); padding: var(--space-xs); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; }
.calendar-toggle a, .calendar-toggle button { border: 0; background: transparent; cursor: pointer; font: inherit;  padding: 0.75rem 1rem; border-radius: 999px; color: var(--color-text); text-align: center; text-decoration: none; font-weight: 700; }
.calendar-toggle a:hover, .calendar-toggle button:hover {  color: var(--color-primary-dark); }
.calendar-toggle a.active, .calendar-toggle button.active {  background: var(--color-primary); color: var(--color-on-dark); box-shadow: var(--shadow-sm); }
.calendar-section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.calendar-section-heading h2 { margin-bottom: 0; }
.calendar-section-heading > p { max-width: 360px; margin-bottom: 0; color: var(--color-text-light); text-align: right; }
.calendar-location { font-weight: 600; }
.social-section { margin-top: var(--space-2xl); padding: var(--space-2xl); border-radius: var(--radius-lg); background: var(--color-primary-dark); color: var(--color-on-dark); text-align: center; }
.social-section h2 { color: var(--color-on-dark); margin-bottom: var(--space-lg); }
.social-section .text-muted { color: var(--color-on-dark-muted); }
.social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-md); }
.social-links a { display: inline-flex; padding: 0.65rem 1.15rem; border: 1px solid var(--color-primary); border-radius: 999px; color: var(--color-on-dark); text-decoration: none; font-weight: 700; }
.social-links a:hover { background: var(--color-surface-raised); color: var(--color-primary-dark); }
@media (max-width: 600px) { .calendar-section-heading { display: block; } .calendar-section-heading > p { margin-top: var(--space-sm); text-align: left; } .social-section { padding: var(--space-xl) var(--space-lg); } }

/* ---- Shared alignment corrections ---- */
.auth-form {
  margin-block: var(--space-3xl);
  margin-inline: auto;
}
.auth-form > p { text-align: center; }
.auth-form form > .btn { width: 100%; }
.register-toggle { margin: var(--space-lg) auto; }
.business-registration-details { margin: 0 0 var(--space-lg); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); }
.business-registration-details legend { padding-inline: var(--space-xs); font-weight: 700; }
.auth-switch-question { margin-top: var(--space-lg); text-align: center; font-size: var(--fs-sm); }
.business-registration-card { margin: var(--space-xl) 0; padding: var(--space-xl); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.business-registration-card h2 { margin-bottom: var(--space-sm); }
.business-registration-status { border-left: 4px solid var(--color-primary); }
.dashboard-tabs { display: flex; gap: var(--space-xs); margin: var(--space-xl) 0; padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.dashboard-tabs button { flex: 0 0 auto; padding: var(--space-sm) var(--space-md); border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--color-text-light); font: inherit; font-weight: 700; cursor: pointer; }
.dashboard-tabs button:hover, .dashboard-tabs button:focus-visible { color: var(--color-primary-dark); background: var(--color-primary-soft); outline: none; }
.dashboard-tabs button.active { color: var(--color-primary-dark); border-color: var(--color-primary); }
.dashboard-tab-panel { padding: var(--space-md) 0; }
.account-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-xl) 0; }
.account-summary > div { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.account-summary span, .account-summary strong { display: block; }
.account-summary span { margin-bottom: var(--space-xs); color: var(--color-text-light); font-size: var(--fs-sm); }
.dashboard-explore-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-sm); }
.dashboard-explore-links a { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font-weight: 700; text-decoration: none; }
.dashboard-explore-links a:hover { color: var(--color-primary-dark); background: var(--color-primary-soft); }
@media (max-width: 600px) { .account-summary { grid-template-columns: 1fr; } }
.account-dashboard {
  display: block;
  width: 100%;
}
.account-dashboard .dashboard-content {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}
main.container > .page-header-section,
main.container > .profile-detail,
main.container > .section,
main.container > .public-landing {
  width: 100%;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .auth-form {
    margin-block: var(--space-xl);
    margin-inline: auto;
    width: 100%;
  }
}

/* ---- Hidden calendar admin dashboard ---- */
.admin-calendar-dashboard { width: 100%; max-width: 1180px; margin-inline: auto; }
.admin-calendar-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-xl); }
.admin-calendar-header h1 { margin-bottom: var(--space-sm); }
.admin-calendar-header p:last-child { color: var(--color-text-light); }
.admin-calendar-stats { margin-bottom: var(--space-2xl); }
.admin-calendar-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr); align-items: start; gap: var(--space-xl); }
.calendar-composer, .calendar-agenda { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-sm); }
.calendar-composer { padding: var(--space-xl); }
.calendar-agenda { position: sticky; top: calc(var(--header-height) + var(--space-lg)); padding: var(--space-lg); }
.composer-heading h2, .calendar-agenda h2 { margin-bottom: var(--space-lg); }
.calendar-admin-form { display: flex; flex-direction: column; gap: var(--space-md); }
.calendar-kind-picker { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); border: 0; }
.calendar-kind-picker legend { grid-column: 1 / -1; margin-bottom: var(--space-xs); font-weight: 700; }
.calendar-kind-picker label { position: relative; display: block; cursor: pointer; }
.calendar-kind-picker input { position: absolute; opacity: 0; pointer-events: none; }
.calendar-kind-picker label span { display: block; height: 100%; padding: var(--space-md); border: 2px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.calendar-kind-picker label strong, .calendar-kind-picker label small { display: block; }
.calendar-kind-picker label small { margin-top: var(--space-xs); color: var(--color-text-light); }
.calendar-kind-picker input:checked + span { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 0 0 2px var(--focus-ring); }
.calendar-kind-picker input:focus-visible + span { outline: 3px solid var(--color-primary-light); outline-offset: 2px; }
.calendar-date-row { grid-template-columns: 1.25fr 0.85fr 1.25fr 0.85fr; }
.all-day-control { display: inline-flex; align-items: center; gap: var(--space-sm); width: fit-content; cursor: pointer; font-weight: 600; }
.all-day-control input { width: 1.1rem; height: 1.1rem; }
.admin-agenda-list { display: grid; gap: var(--space-sm); }
.admin-agenda-item { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
.admin-agenda-item:last-child { border-bottom: 0; }
.admin-agenda-item time strong, .admin-agenda-item time span { display: block; }
.admin-agenda-item time strong { color: var(--color-primary); }
.admin-agenda-item time span, .admin-agenda-item p { color: var(--color-text-light); font-size: var(--fs-xs); }
.admin-agenda-item h3 { margin: var(--space-xs) 0; font-size: var(--fs-base); }
.admin-agenda-item p { margin: 0; }
@media (max-width: 900px) { .admin-calendar-grid { grid-template-columns: 1fr; } .calendar-agenda { position: static; } }
@media (max-width: 700px) { .admin-calendar-header { display: block; } .admin-calendar-header .btn { margin-top: var(--space-sm); } .calendar-kind-picker, .calendar-date-row { grid-template-columns: 1fr; } .calendar-composer { padding: var(--space-lg); } }
.field-error { min-height: 1.2em; color: var(--color-error); font-weight: 600; }
.form-group input[aria-invalid="true"], .form-group select[aria-invalid="true"], .form-group textarea[aria-invalid="true"] { border-color: var(--color-error); background: var(--color-error-surface); box-shadow: 0 0 0 2px var(--error-ring); }
.calendar-kind-picker.has-error { border-radius: var(--radius); outline: 2px solid var(--color-error); outline-offset: 3px; }
.calendar-kind-picker.has-error .field-error { grid-column: 1 / -1; }
.calendar-form-error { padding: var(--space-sm) var(--space-md); border-left: 4px solid var(--color-error); background: var(--color-error-surface); color: var(--color-error); font-weight: 600; }
.nav-logout-form { display: inline; margin: 0; }
.site-header nav .nav-logout-form button { appearance: none; border: 0; background: transparent; color: var(--color-on-dark-muted); font: inherit; font-size: var(--fs-sm); font-weight: 500; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); cursor: pointer; }
.site-header nav .nav-logout-form button:hover, .site-header nav .nav-logout-form button:focus-visible { background: var(--color-header-hover); color: var(--color-on-dark); }
@media (max-width: 767px) { .nav-logout-form, .site-header nav .nav-logout-form button { width: 100%; } .site-header nav .nav-logout-form button { padding: var(--space-sm) var(--space-md); } }

/* ---- Compact header menu and profile control ---- */
.site-header .container { position: relative; }
.header-actions { position: relative; display: flex; align-items: center; gap: var(--space-xs); }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 7px;
  border: 1px solid var(--color-header-border);
  border-radius: 50%;
  background: var(--color-header-control);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.nav-toggle:hover, .nav-toggle:focus-visible, .nav-toggle[aria-expanded="true"] { background: var(--color-header-hover); border-color: var(--color-primary); }
.nav-toggle:active { transform: scale(0.96); }
.site-header nav {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 110;
  display: grid;
  width: min(210px, calc(100vw - 2rem));
  gap: 3px;
  padding: var(--space-sm);
  border: 1px solid var(--color-header-hover);
  border-radius: var(--radius);
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}
.site-header nav.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.site-header nav a, .site-header nav .nav-logout-form button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border-radius: var(--radius-sm);
}
.nav-logout-form { display: block; width: 100%; }
.site-header .profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 2px solid var(--color-primary-light);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-avatar);
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.site-header .profile-avatar:hover, .site-header .profile-avatar:focus-visible { color: var(--color-on-dark); background: var(--color-primary-light); border-color: var(--color-on-dark); transform: translateY(-1px); }
@media (max-width: 767px) {
  .site-header nav { position: absolute; top: calc(100% + 12px); left: auto; right: 0; padding: var(--space-sm); transform: translateY(-8px) scale(0.98); }
  .site-header nav.open { transform: translateY(0) scale(1); }
  .site-header nav a, .site-header nav .nav-logout-form button { width: 100%; padding: 10px 12px; text-align: left; }
  .logo { max-width: calc(100vw - 130px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---- Seven-day landing calendar ---- */
.calendar-week {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.calendar-day {
  display: grid;
  grid-template-columns: minmax(170px, 205px) 1fr;
  min-height: 92px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.calendar-day:last-child { border-bottom: 0; }
.calendar-day.is-today { box-shadow: inset 4px 0 0 var(--color-primary); }
.calendar-day-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}
.calendar-day.is-today .calendar-day-header { background: var(--color-primary-soft); }
.calendar-day-header strong { color: var(--color-primary-dark); font-size: var(--fs-base); line-height: 1.35; }
.calendar-today-label {
  flex: 0 0 auto;
  padding: 0.18rem 0.52rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.status-badge--success {
  color: var(--color-success-text);
  background: var(--color-success-surface);
  border-color: var(--color-success-border);
}
.status-badge--warning {
  color: var(--color-warning-text);
  background: var(--color-warning-surface);
  border-color: var(--color-primary);
}
.status-badge--neutral {
  color: var(--color-text-light);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}
.admin-bulk-actions .btn.btn-danger,
.admin-confirm-card .btn.btn-danger {
  border-color: var(--color-error);
  background: var(--color-error);
  color: var(--color-on-dark);
}
.admin-bulk-actions .btn.btn-danger:hover,
.admin-bulk-actions .btn.btn-danger:focus-visible,
.admin-confirm-card .btn.btn-danger:hover,
.admin-confirm-card .btn.btn-danger:focus-visible {
  border-color: var(--color-error-text);
  background: var(--color-error-text);
  color: var(--color-on-dark);
  outline-color: var(--color-error);
}
.business-info,
.calendar-import-duplicates { margin-top: var(--space-lg); }
.landing-calendar { width: 100%; }
.end-field,
.time-field { min-width: 0; }
.calendar-day-empty {
  display: flex;
  align-items: center;
  min-height: 92px;
  margin: 0;
  padding: var(--space-lg);
  color: var(--color-text-light);
  font-size: var(--fs-sm);
}
.calendar-day-items { display: grid; align-content: start; }
.calendar-day-item { padding: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.calendar-day-item:last-child { border-bottom: 0; }
.calendar-day-item h3 { margin: var(--space-sm) 0; font-size: var(--fs-lg); }
.calendar-day-item p { margin-bottom: var(--space-sm); }
.calendar-day-item p:last-child { margin-bottom: 0; }
.calendar-item-heading { display: flex; align-items: center; gap: var(--space-sm); }
.calendar-item-time { margin-left: auto; }
.calendar-item-time { color: var(--color-primary-dark); font-size: var(--fs-sm); font-weight: 800; }
.calendar-item-duration { color: var(--color-text-light); font-size: var(--fs-xs); font-weight: 600; }
@media (max-width: 680px) {
  .calendar-day { grid-template-columns: 1fr; min-height: 0; }
  .calendar-day-header {
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .calendar-day-empty { min-height: 58px; padding: var(--space-md); }
  .calendar-day-item { padding: var(--space-md); }
  .calendar-item-heading { align-items: flex-start; }
}

/* ---- City calendar importer ---- */
.admin-calendar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); }
.calendar-import-page { max-width: 980px; }
.calendar-import-page .btn-primary, .calendar-import-page .btn-primary:hover, .calendar-import-page .btn-primary:focus-visible { color: var(--color-on-dark); }
.calendar-import-panel { margin-bottom: var(--space-xl); padding: var(--space-xl); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-sm); }
.calendar-import-panel h2 { margin-bottom: var(--space-xs); }
.calendar-import-panel p { color: var(--color-text-light); }
.calendar-import-range-form { display: flex; align-items: end; gap: var(--space-md); margin-top: var(--space-lg); }
.calendar-import-range-form .form-group { flex: 1; margin: 0; }
.calendar-import-notice { margin-bottom: var(--space-lg); padding: var(--space-md); border-left: 4px solid var(--color-success); border-radius: var(--radius-sm); background: var(--color-success-surface); color: var(--color-success-text); font-weight: 700; }
.calendar-import-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.calendar-import-list { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); }
.calendar-import-event { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-md); padding: var(--space-lg); border-bottom: 1px solid var(--color-border); cursor: pointer; }
.calendar-import-event:last-child { border-bottom: 0; }
.calendar-import-event:hover { background: var(--color-row-hover); }
.calendar-import-event.is-duplicate { background: var(--color-surface); cursor: default; opacity: 1; }
.calendar-import-event > input { position: absolute; opacity: 0; pointer-events: none; }
.calendar-import-check { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--color-border); border-radius: 6px; background: var(--color-surface-raised); }
.calendar-import-event > input:checked + .calendar-import-check { border-color: var(--color-primary); background: var(--color-primary); }
.calendar-import-event > input:checked + .calendar-import-check::after { content: '✓'; color: var(--color-on-dark); font-size: 0.9rem; font-weight: 900; line-height: 1; }
.calendar-import-event > input:focus-visible + .calendar-import-check { outline: 3px solid var(--color-primary-light); outline-offset: 2px; }
.calendar-import-event-details, .calendar-import-event-details time, .calendar-import-event-details small { display: block; }
.calendar-import-event-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.calendar-import-event-topline strong { color: var(--color-text); }
.calendar-import-event-topline em { flex: 0 0 auto; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--color-surface-muted); color: var(--color-text-light); font-size: var(--fs-xs); font-style: normal; font-weight: 700; }
.calendar-import-event-details time { margin-top: var(--space-xs); color: var(--color-primary-dark); font-weight: 700; }
.calendar-import-event-details small { margin: var(--space-xs) 0; color: var(--color-text-light); }
.calendar-import-event-details a { font-size: var(--fs-sm); }
.calendar-import-submit { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-lg); }
.calendar-import-submit p { margin: 0; }
@media (max-width: 700px) { .admin-calendar-actions, .calendar-import-range-form, .calendar-import-preview-heading, .calendar-import-submit { align-items: stretch; flex-direction: column; } .admin-calendar-actions { margin-top: var(--space-md); } .calendar-import-panel { padding: var(--space-lg); } .calendar-import-event { padding: var(--space-md); } .calendar-import-event-topline { display: block; } .calendar-import-event-topline em { display: inline-block; margin-top: var(--space-xs); } }

/* Guided city-event review queue */
.import-review-status { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-sm); margin-bottom:var(--space-md); padding:var(--space-md); border-radius:var(--radius); background:var(--color-primary-soft); color:var(--color-primary-dark); }
.import-review-status strong { color:var(--color-primary-dark); }
.import-review-status [data-review-all] { margin-left:auto; }
.import-review-mode-toggle { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-left:auto; }
.import-review-status .import-review-mode-toggle [data-review-all] { margin-left:0; }
.import-review-mode-toggle .btn.is-selected { border-color:var(--color-primary); background:var(--color-primary); color:var(--color-on-primary); }
.import-review-stage { overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-raised); }
.import-review-track { display:flex; transition:transform .35s ease; }
.import-review-card { display:flex; flex:0 0 100%; flex-direction:column; min-width:0; padding:clamp(var(--space-lg), 5vw, var(--space-2xl)); }
.import-review-content { margin-bottom:var(--space-lg); }
.import-review-card[aria-hidden="true"] { visibility:hidden; }
.import-review-card-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); }
.import-review-card h3 { margin:var(--space-sm) 0; font-size:clamp(1.35rem, 3vw, 2rem); }
.import-review-card p { max-width:70ch; }
.import-review-date { color:var(--color-primary-dark) !important; font-weight:700; }
.import-review-description { white-space:normal; }
.import-review-choice { display:flex; align-items:center; gap:var(--space-xs); color:var(--color-text); font-weight:700; }
.import-review-choice input, .import-review-summary-item input { width:1.15rem; height:1.15rem; accent-color:var(--color-primary); }
.import-review-actions { display:flex; align-items:stretch; justify-content:space-between; gap:var(--space-lg); margin-top:auto; padding-top:var(--space-lg); border-top:1px solid var(--color-border); }
.import-review-navigation, .import-review-decisions { display:flex; flex-direction:column; gap:var(--space-xs); }
.import-review-decisions { align-items:flex-end; padding-left:var(--space-lg); border-left:3px solid var(--color-primary); }
.import-review-action-label { color:var(--color-text-light); font-size:var(--fs-xs); font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.import-review-navigation .btn + .btn, .import-review-decisions .btn + .btn { margin-left:var(--space-xs); }
.import-review-decisions .btn.is-selected, .import-review-summary-actions .btn.is-selected { box-shadow:0 0 0 3px var(--focus-ring); }
[data-review-deny].is-selected, [data-review-summary-deny].is-selected { border-color:var(--color-error); background:var(--color-error); color:var(--color-on-dark); box-shadow:0 0 0 3px var(--error-ring); }
[data-review-approve].is-selected, [data-review-summary-approve].is-selected { border-color:var(--color-primary-dark); background:var(--color-primary-dark); color:var(--color-on-dark); }
@media (max-width: 600px) { .import-review-actions { align-items:stretch; flex-direction:column; } .import-review-decisions { align-items:flex-start; padding:var(--space-md) 0 0; border-top:3px solid var(--color-primary); border-left:0; } }
.import-review-summary { margin-top:var(--space-lg); padding:var(--space-lg); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-raised); }
.import-review-summary h3 { margin-bottom:var(--space-xs); }
.import-review-summary-list { display:grid; gap:var(--space-xs); margin-top:var(--space-md); }
.import-review-summary-item { display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-sm) var(--space-md); border:1px solid var(--color-border); border-radius:var(--radius); }
.import-review-summary-actions { display:flex; flex-wrap:wrap; gap:var(--space-xs); }
.import-review-decisions .btn,
.import-review-summary-actions .btn { gap:0.35rem; }
.import-review-decisions .btn svg,
.import-review-summary-actions .btn svg { width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.5; }
.import-review-summary-item span { flex:1; }
.import-review-summary-item em { color:var(--color-text-light); font-size:var(--fs-xs); font-style:normal; font-weight:700; }
.import-review-summary-item.is-confirmed { border-color:var(--color-success-border); background:var(--color-success-surface); }
.import-review-summary-item.is-confirmed em { color:var(--color-success); }
.import-review-summary-item.is-denied { border-color:var(--color-error); background:var(--color-error-surface); }
.import-review-summary-item.is-unreviewed { border-color:var(--color-border); background:var(--color-surface); }
.import-review-summary-item input:focus-visible, .import-review-choice input:focus-visible { outline:3px solid var(--color-primary-light); outline-offset:2px; }
.import-review-summary [data-review-submit]:disabled { cursor:not-allowed; opacity:.6; }
.calendar-import-empty { padding:var(--space-md); border:1px dashed var(--color-border); border-radius:var(--radius); }
.admin-agenda-edit { display:inline-block; margin-top:var(--space-sm); padding:.35rem .65rem; font-size:var(--fs-xs); }
@media (prefers-reduced-motion: reduce) { .import-review-track { transition:none; } }

/* Full-width admin workspace and shared section tabs */
.admin-main { max-width: none; padding-inline: clamp(var(--space-lg), 4vw, var(--space-3xl)); background: var(--color-bg); }
.admin-workspace { width: 100%; max-width: 1600px; margin-inline: auto; }
.admin-global-tabs { display:flex; align-items:flex-end; gap:var(--space-xs); margin:calc(var(--space-md) * -1) 0 var(--space-2xl); padding:0 var(--space-xs); border-bottom:1px solid var(--color-border); overflow-x:auto; }
.admin-global-tab { flex:0 0 auto; padding:var(--space-md) var(--space-lg); border-bottom:4px solid transparent; color:var(--color-text-light); text-decoration:none; font-weight:700; white-space:nowrap; }
.admin-global-tab:hover { color:var(--color-primary); background:var(--color-primary-soft); }
.admin-global-tab.active { border-color:var(--color-primary); color:var(--color-primary-dark); background:var(--color-surface-raised); }
.admin-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-xl); margin-bottom:var(--space-xl); }
.admin-page-header h1 { margin-bottom:var(--space-sm); }
.admin-page-header p:last-child { color:var(--color-text-light); }
.admin-page-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-sm); }
.admin-panel { border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-raised); box-shadow:var(--shadow-sm); }
.admin-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-lg); margin-bottom:var(--space-lg); }
.admin-panel-heading h2 { margin-bottom:var(--space-xs); }
.admin-dashboard-agenda { padding:var(--space-xl); }
.admin-agenda-list-wide { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); column-gap:var(--space-xl); }
.admin-event-list { margin-top:var(--space-xl); padding:var(--space-xl); }
.admin-event-filters { margin-bottom:var(--space-lg); }
.admin-action-buttons { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-sm); min-width:max-content; }
.admin-action-buttons form { margin:0; }
.admin-action-buttons .btn { display:inline-flex; align-items:center; justify-content:center; min-height:2.4rem; margin:0; white-space:nowrap; }
.admin-delete-button { width:2.4rem; padding:0; }
.admin-delete-button svg { width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.admin-action-buttons .btn-danger { border-color:var(--color-error); background:var(--color-error); color:var(--color-on-dark); }
.admin-action-buttons .btn-danger:hover, .admin-action-buttons .btn-danger:focus-visible { border-color:var(--color-error); background:var(--color-error); color:var(--color-on-dark); filter:brightness(.9); }
.admin-bulk-actions { display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-lg); padding:var(--space-sm) var(--space-md); border:1px solid var(--color-primary); border-radius:var(--radius); background:var(--color-primary-soft); }
.admin-confirm-card { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:var(--space-lg); background:rgba(0,0,0,.45); }
.admin-confirm-card-content { width:min(100%, 28rem); padding:var(--space-xl); border:1px solid var(--color-border-strong); border-radius:var(--radius-lg); background:var(--color-surface-raised); box-shadow:var(--shadow-lg); }
.admin-confirm-card-content h2 { margin-bottom:var(--space-sm); }
.admin-confirm-actions { display:flex; justify-content:flex-end; gap:var(--space-sm); margin-top:var(--space-lg); }
.admin-confirm-actions [data-cancel-delete] { order:2; }
details.calendar-composer,
details.calendar-agenda { padding:0; }
.calendar-accordion-summary { display:flex; align-items:center; justify-content:space-between; min-height:5.75rem; padding:var(--space-md) var(--space-lg); cursor:pointer; list-style:none; }
.calendar-accordion-summary::-webkit-details-marker { display:none; }
.calendar-accordion-summary::after { content:"+"; color:var(--color-primary-text); font-size:1.5rem; font-weight:800; }
details[open] > .calendar-accordion-summary { border-bottom:1px solid var(--color-border); }
details[open] > .calendar-accordion-summary::after { content:"−"; }
.calendar-accordion-summary h2 { margin:0 !important; }
.calendar-composer > .calendar-admin-form,
.calendar-composer > .calendar-form-error,
.calendar-composer > .admin-edit-note { margin-inline:var(--space-lg); }
.calendar-composer > .calendar-admin-form { padding:var(--space-lg) 0; }
.calendar-agenda > .empty-state,
.calendar-agenda > .admin-agenda-list { margin:0 var(--space-lg) var(--space-lg); }
.admin-list-count { color:var(--color-text-light); font-size:var(--fs-sm); font-weight:700; }
.admin-content { width:100%; }
.admin-content > h1 { margin-bottom:var(--space-xl); }
.admin-content .form-wide { max-width:760px; }
.calendar-import-page .calendar-import-panel { box-shadow:var(--shadow-sm); }
@media (max-width: 700px) {
  .admin-main { padding-inline:var(--space-md); }
  .admin-global-tabs { margin-bottom:var(--space-xl); }
  .admin-global-tab { padding-inline:var(--space-md); }
  .admin-page-header { display:block; }
  .admin-page-actions { justify-content:flex-start; margin-top:var(--space-md); }
  .admin-dashboard-agenda, .admin-event-list { padding:var(--space-lg); }
  .admin-panel-heading { display:block; }
  .admin-panel-heading .btn { margin-top:var(--space-sm); }
  .admin-agenda-list-wide { grid-template-columns:1fr; }
}
.admin-edit-note { margin-bottom:var(--space-md); padding:var(--space-sm) var(--space-md); border-left:4px solid var(--color-primary); background:var(--color-primary-soft); color:var(--color-primary-dark); font-weight:700; }
.composer-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-md); }
.admin-edit-close { display:grid; place-items:center; width:2rem; height:2rem; flex:0 0 auto; border:1px solid var(--color-border); border-radius:50%; color:var(--color-text-light); text-decoration:none; font-size:1.5rem; font-weight:700; line-height:1; }
.admin-edit-close:hover, .admin-edit-close:focus-visible { border-color:var(--color-primary); background:var(--color-primary-soft); color:var(--color-primary-dark); }
/* Compact agenda and precisely centered edit close control */
.admin-edit-close { display:inline-flex; align-items:center; justify-content:center; padding:0; }
.admin-edit-close svg { width:1rem; height:1rem; stroke:currentColor; stroke-width:2.75; stroke-linecap:round; fill:none; }
.calendar-agenda { padding:var(--space-md); }
.calendar-agenda .admin-panel-heading { margin-bottom:var(--space-sm); }
.calendar-agenda h2 { margin-bottom:var(--space-sm); }
.calendar-agenda .admin-agenda-list { gap:0; padding-top:var(--space-md); }
.calendar-agenda .admin-agenda-item { grid-template-columns:56px minmax(0, 1fr); gap:var(--space-md); padding:var(--space-md) 0; }
.calendar-agenda .admin-agenda-item h3 { margin:.1rem 0; font-size:var(--fs-sm); line-height:1.25; }
.calendar-agenda .admin-agenda-item time strong { font-size:var(--fs-sm); }
.calendar-agenda .admin-agenda-item time span, .calendar-agenda .admin-agenda-item p { font-size:var(--fs-xs); line-height:1.3; }
.calendar-agenda .calendar-tag { padding:.1rem .45rem; font-size:.72rem; line-height:1.25; }
.calendar-agenda .admin-agenda-edit { margin-top:.25rem; padding:.2rem .5rem; font-size:var(--fs-xs); line-height:1.25; }
/* Keep the desktop agenda aligned with the editor and scroll only its entries. */
@media (min-width: 901px) {
  .calendar-agenda { box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; }
  .calendar-agenda .admin-agenda-list { flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:var(--space-xs); scrollbar-gutter:stable; }
}

/* ============================================================
   Governed component layer
   These shared rules normalize every legacy page to the tokens
   documented in /STYLE_GUIDE.md.
   ============================================================ */

[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection { color: var(--color-on-primary); background: var(--color-primary); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-wrap: balance;
}
h1 { letter-spacing: -0.025em; }
h2 { margin-bottom: var(--space-lg); letter-spacing: -0.015em; }
h3 { margin-bottom: var(--space-md); }
h4, h5, h6 { margin-bottom: var(--space-sm); }
code { font-family: var(--font-mono); overflow-wrap: anywhere; }

a { color: var(--color-primary-text); text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; }
a:hover { color: var(--color-primary-hover); }

/* Global chrome */
.site-header {
  min-height: var(--header-height);
  height: auto;
  color: var(--color-on-dark);
  background: var(--color-header);
  border-bottom: 3px solid var(--color-primary);
}
.site-header .container { min-height: var(--header-height); }
.logo {
  color: var(--color-on-dark);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.logo::first-letter { color: var(--color-primary-light); }
.logo:hover { color: var(--color-primary-light); }
.site-header nav {
  width: min(14rem, calc(100vw - var(--space-xl)));
  border-color: var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-header-raised);
}
.site-header nav a,
.site-header nav .nav-logout-form button {
  min-height: var(--control-height-sm);
  display: flex;
  align-items: center;
  color: var(--color-on-dark-muted);
  font-weight: 650;
}
.site-header nav a:hover,
.site-header nav a:focus-visible,
.site-header nav .nav-logout-form button:hover,
.site-header nav .nav-logout-form button:focus-visible {
  color: var(--color-on-dark);
  background: var(--color-header-hover);
}
.site-header nav a.active { color: var(--color-primary-light); background: var(--color-header-active); }
.nav-toggle {
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  padding: var(--space-sm);
  border-color: var(--color-header-border);
  color: var(--color-on-dark);
  background: var(--color-header-control);
}
.nav-toggle:hover,
.nav-toggle:focus-visible,
.nav-toggle[aria-expanded="true"] { border-color: var(--color-primary); background: var(--color-header-hover); }
.site-header .profile-avatar {
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  flex-basis: var(--icon-button-size);
  border-color: var(--color-primary-light);
  color: var(--color-on-primary);
  background: var(--color-primary);
}
.site-header .profile-avatar:hover,
.site-header .profile-avatar:focus-visible {
  border-color: var(--color-primary-light);
  color: var(--color-on-primary);
  background: var(--color-primary-hover);
}

main.container { padding-block: var(--space-2xl); }
.site-footer { background: var(--color-surface); }

/* Headings and actions */
.page-header-section {
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl) var(--space-xl);
  border: 1px solid var(--color-brand-border);
  border-top: 0.375rem solid var(--color-primary);
  color: var(--color-on-dark);
  background: var(--background-hero);
  box-shadow: var(--shadow);
}
.page-header-section h1,
.page-header-section h1 a { color: var(--color-on-dark); }
.page-header-section p { color: var(--color-on-dark-muted); }

.btn,
.btn-primary,
.btn-secondary {
  min-height: var(--control-height);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius);
  font-weight: 800;
  line-height: 1.15;
}
.btn,
.btn-primary,
.calendar-import-page .btn-primary {
  color: var(--color-on-primary);
  background: var(--color-primary);
}
.btn:hover:not(.btn-secondary),
.btn-primary:hover,
.btn-primary:focus-visible,
.calendar-import-page .btn-primary:hover,
.calendar-import-page .btn-primary:focus-visible {
  color: var(--color-on-primary);
  background: var(--color-primary-hover);
}
.btn-secondary {
  color: var(--color-text);
  background: var(--color-surface-raised);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  color: var(--color-primary-text);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled { cursor: not-allowed; opacity: 0.55; transform: none; box-shadow: none; }

/* Feedback */
.flash,
.calendar-form-error,
.calendar-import-notice,
.admin-edit-note {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid;
  border-left-width: 0.25rem;
  border-radius: var(--radius);
}
.flash-success,
.calendar-import-notice {
  color: var(--color-success-text);
  background: var(--color-success-surface);
  border-color: var(--color-success-border);
}
.flash-error,
.calendar-form-error {
  color: var(--color-error-text);
  background: var(--color-error-surface);
  border-color: var(--color-error-border);
}
.admin-edit-note {
  color: var(--color-warning-text);
  background: var(--color-warning-surface);
  border-color: var(--color-primary);
}
.field-error { color: var(--color-error-text); }
.empty-state,
.calendar-import-empty {
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-light);
  background: var(--color-surface);
}

/* Forms */
.auth-form,
.calendar-composer,
.calendar-agenda,
.calendar-import-panel,
.import-review-stage,
.import-review-summary,
.admin-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
}
.auth-form {
  max-width: 28rem;
  border-top: 0.25rem solid var(--color-primary);
}
.auth-form h1 { font-size: var(--fs-xl); }

.form-group label { margin-bottom: var(--space-sm); font-weight: 750; }
.form-group input,
.form-group select,
.form-group textarea,
.search-form input[type="text"],
.filter-bar input[type="text"],
.filter-bar select {
  min-height: var(--control-height);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  background: var(--color-surface-raised);
  border-color: var(--color-border);
  border-radius: var(--radius);
}
.form-group textarea { min-height: 7rem; resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.search-form input[type="text"]:focus,
.filter-bar input[type="text"]:focus,
.filter-bar select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-group input[disabled] { background: var(--color-surface-muted); }
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  background: var(--color-error-surface);
  box-shadow: 0 0 0 3px var(--error-ring);
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.form-row.wrap { display: flex; }
.password-fieldset { padding: var(--space-lg); background: var(--color-surface); }
.filter-bar select { background: var(--color-surface-raised); }

/* Cards, details, and navigation surfaces */
.business-card,
.event-card,
.stat-card,
.calendar-card,
.profile-card,
.calendar-week {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
}
.business-card:hover,
.event-card:hover,
.profile-card:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
  box-shadow: var(--shadow);
}
.business-card h3,
.event-card h3,
.event-date,
.calendar-date,
.admin-agenda-item time strong { color: var(--color-primary-text); }
.description,
.profile-detail {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
}
.description { line-height: 1.75; }
.category { color: var(--color-primary-text); font-weight: 800; }
.rsvp-section { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.profile-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex-basis: var(--avatar-size);
  color: var(--color-on-primary);
  background: var(--color-primary);
}
.profile-avatar-large { width: 5.75rem; height: 5.75rem; flex-basis: 5.75rem; }

.calendar-toggle { border-color: var(--color-border); background: var(--color-surface); }
.calendar-toggle a.active, .calendar-toggle button.active { color: var(--color-on-primary); background: var(--color-primary); }
.calendar-toggle a:hover, .calendar-toggle button:hover { color: var(--color-primary-text); }
.calendar-day { border-color: var(--color-border); background: var(--color-surface-raised); }
.calendar-day.is-today { box-shadow: inset 0.25rem 0 0 var(--color-primary); }
.calendar-day-header { background: var(--color-surface); }
.calendar-day.is-today .calendar-day-header { background: var(--color-primary-soft); }
.calendar-day-header strong,
.calendar-item-time { color: var(--color-primary-text); }
.calendar-today-label { color: var(--color-on-primary); background: var(--color-primary); }
.calendar-tag {
  padding: var(--space-xs) 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
}
.calendar-tag-community {
  color: var(--color-primary-text);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}
.calendar-tag-offer {
  color: var(--color-warning-text);
  background: var(--color-warning-surface);
  border-color: var(--color-primary);
}
.calendar-tag-city {
  color: var(--color-success-text);
  background: var(--color-success-surface);
  border-color: var(--color-success-border);
}
.social-section {
  border: 1px solid var(--color-brand-border);
  border-top: 0.25rem solid var(--color-primary);
  color: var(--color-on-dark);
  background: var(--background-brand);
}
.social-section h2 { color: var(--color-on-dark); }
.social-section .text-muted { color: var(--color-on-dark-muted); }
.social-links a { min-height: var(--control-height); border-color: var(--color-primary); color: var(--color-on-dark); }
.social-links a:hover { color: var(--color-on-primary); background: var(--color-primary); }

/* Dashboard, tabs, tables */
.dashboard-sidebar { border: 1px solid var(--color-border); background: var(--color-surface); }
.dashboard-sidebar li a:hover { background: var(--color-row-hover); }
.dashboard-sidebar li a.active {
  color: var(--color-on-primary);
  background: var(--color-primary);
}
.stat-card { border-top: 0.25rem solid var(--color-primary); }
.stat-card h2 { color: var(--color-primary-text); }
.admin-tab,
.admin-global-tab { color: var(--color-text-light); }
.admin-tab:hover,
.admin-global-tab:hover { color: var(--color-primary-text); background: var(--color-row-hover); }
.admin-tab.active,
.admin-global-tab.active {
  color: var(--color-primary-text);
  border-color: var(--color-primary);
  background: var(--color-surface-raised);
}
.data-table-wrapper {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
}
.data-table thead th { background: var(--color-surface); }
.data-table tbody tr:hover { background: var(--color-row-hover); }
.data-table .btn { min-height: var(--control-height-sm); padding: var(--space-xs) var(--space-md); }
.status-badge {
  padding: var(--space-xs) var(--space-sm);
  display: inline-flex;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.admin-main { background: var(--color-bg); }
.admin-workspace { max-width: var(--max-width-admin); }
.admin-edit-close:hover,
.admin-edit-close:focus-visible {
  color: var(--color-primary-text);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.calendar-kind-picker label span { background: var(--color-surface-raised); }
.calendar-kind-picker input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Import and review */
.calendar-import-event:hover { background: var(--color-row-hover); }
.calendar-import-event.is-duplicate { background: var(--color-surface); }
.calendar-import-check { border-color: var(--color-border-strong); background: var(--color-surface-raised); }
.calendar-import-event > input:checked + .calendar-import-check {
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  background: var(--color-primary);
}
.calendar-import-event-topline em { background: var(--color-surface-muted); }
.calendar-import-event-details time { color: var(--color-primary-text); }
.import-review-status {
  border: 1px solid var(--color-border);
  color: var(--color-warning-text);
  background: var(--color-warning-surface);
}
.import-review-status strong,
.import-review-date { color: var(--color-primary-text) !important; }
.import-review-decisions .btn.is-selected,
.import-review-summary-actions .btn.is-selected { box-shadow: 0 0 0 3px var(--focus-ring); }

/* Keep destructive table actions distinct from the primary (gold) button state. */
.data-table .admin-delete-button {
  box-sizing: border-box;
  width: 2.6rem;
  min-width: 2.6rem;
  height: 2.6rem;
  min-height: 2.6rem;
  padding: 0;
  border-color: var(--color-error);
  background: var(--color-error);
  color: var(--color-on-dark);
}
.data-table .admin-delete-button svg {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  stroke: currentColor;
}
.data-table .admin-delete-button:hover,
.data-table .admin-delete-button:focus-visible {
  border-color: var(--color-error-text);
  background: var(--color-error-text);
  color: var(--color-on-dark);
  outline-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(160, 50, 50, 0.3);
}

/* Upcoming-items controls remain compact despite the shared button minimum height. */
.calendar-agenda .admin-agenda-edit,
.admin-dashboard-agenda .admin-agenda-edit {
  display: inline-flex;
  min-height: 0;
  padding: 0.2rem 0.5rem;
  line-height: 1.2;
}
[data-review-deny].is-selected,
[data-review-summary-deny].is-selected {
  color: var(--color-on-dark);
  background: var(--color-error);
  box-shadow: 0 0 0 3px var(--error-ring);
}
[data-review-approve].is-selected,
[data-review-summary-approve].is-selected {
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  background: var(--color-primary);
}
.import-review-summary-item.is-confirmed {
  border-color: var(--color-success-border);
  background: var(--color-success-surface);
}
.import-review-summary-item.is-confirmed em { color: var(--color-success-text); }
.import-review-summary-item.is-denied {
  border-color: var(--color-error-border);
  background: var(--color-error-surface);
}
.import-review-summary-item.is-unreviewed {
  border-color: var(--color-border);
  background: var(--color-surface);
}

@media (max-width: 767px) {
  :root { --header-height: 3.75rem; }
  main.container { padding-block: var(--space-xl); }
  .page-header-section { padding: var(--space-2xl) var(--space-lg); }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .profile-avatar-large { width: 4.5rem; height: 4.5rem; flex-basis: 4.5rem; }
}

.skip-nav { color: var(--color-on-primary); }
.calendar-import-event > input:checked + .calendar-import-check::after { color: var(--color-on-primary); }
.status-badge--success {
  color: var(--color-success-text);
  background: var(--color-success-surface);
  border-color: var(--color-success-border);
}
.status-badge--warning {
  color: var(--color-warning-text);
  background: var(--color-warning-surface);
  border-color: var(--color-primary);
}
.status-badge--neutral {
  color: var(--color-text-light);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

@media print {
  body { color: #000; background: #fff; }
  a { color: #000; }
  .page-header-section { color: #000; background: #fff; border-color: #000; }
  .page-header-section h1,
  .page-header-section h1 a,
  .page-header-section p { color: #000; }
}
.account-menu-wrapper { position: relative; } .site-header .profile-toggle { appearance: none; cursor: pointer; font: inherit; } .account-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 110; display: grid; width: min(14rem, calc(100vw - var(--space-xl))); gap: 3px; padding: var(--space-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-header-raised); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right; transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease; } .account-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .account-menu a, .account-menu .nav-logout-form button { display: flex; align-items: center; width: 100%; min-height: var(--control-height-sm); padding: 10px 12px; border-radius: var(--radius-sm); color: var(--color-on-dark-muted); font-size: var(--fs-sm); font-weight: 650; text-align: left; text-decoration: none; } .account-menu a:hover, .account-menu a:focus-visible, .account-menu .nav-logout-form button:hover, .account-menu .nav-logout-form button:focus-visible { color: var(--color-on-dark); background: var(--color-header-hover); } .account-menu a.active { color: var(--color-primary-light); background: var(--color-header-active); } .account-menu .nav-logout-form { display: block; width: 100%; margin: 0; } .account-menu .nav-logout-form button { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 650; }


/* Dashboard tab contrast — explicit colors work in both light and dark themes. */
.dashboard-tabs button { color: var(--color-text-light) !important; }
.dashboard-tabs button:hover,
.dashboard-tabs button:focus-visible,
.dashboard-tabs button.active {
  color: var(--color-on-primary) !important;
  background: var(--color-primary);
}
.dashboard-tabs button:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 2px; }