/* Design tokens and base styles. Mobile-first; dark mode follows the system unless the person
   chose a theme in their profile (brief §7, screen 14). The venue's accent colour comes as an
   inline custom property on <html>. */
:root {
  color-scheme: light dark;
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-line: #d1d5db;
  --color-accent: #1f2937;
  --color-accent-text: #ffffff;
  --color-free: #e5f6e8;
  --color-busy: #fde2e1;
  --color-unreservable: #e5e7eb;
  --color-danger: #b91c1c;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #111827;
    --color-text: #f3f4f6;
    --color-muted: #9ca3af;
    --color-line: #374151;
    --color-accent: #f3f4f6;
    --color-accent-text: #111827;
    --color-free: #14532d;
    --color-busy: #7f1d1d;
    --color-unreservable: #374151;
    --color-danger: #fca5a5;
  }
}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #111827;
  --color-text: #f3f4f6;
  --color-muted: #9ca3af;
  --color-line: #374151;
  --color-accent: #f3f4f6;
  --color-accent-text: #111827;
  --color-free: #14532d;
  --color-busy: #7f1d1d;
  --color-unreservable: #374151;
  --color-danger: #fca5a5;
}

body {
  margin: 0;
  padding: 1rem 1rem 5rem;
  font-family: system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

a { color: var(--color-accent); }

button, input[type="submit"], a.button {
  min-height: var(--tap);
  font-size: 1rem;
}

/* Forms: labels above fields, fields never wider than the screen, checkboxes beside their label. */
label:not(:has(input)) { display: block; margin: .5rem 0 .25rem; }
input:not([type="checkbox"], [type="radio"], [type="submit"], [type="range"]), select, textarea {
  min-height: var(--tap); font-size: 1rem; max-width: 100%; box-sizing: border-box;
}
input[type="checkbox"] + label { display: inline; margin-left: .25rem; }
label:has(> input[type="checkbox"], > input[type="radio"]) { display: flex; align-items: center; gap: .5rem; min-height: var(--tap); }

.flash--alert { color: var(--color-danger); }

.legal { max-width: 40rem; line-height: 1.5; }
.legal h2 { font-size: 1.1rem; margin-top: 1.5rem; }

.errors { color: var(--color-danger); }

/* Header with the venue's logo and the toolbar (brief §7, screen 14) */
.app-header { display: flex; justify-content: center; margin: 0 0 .75rem; }
.app-header__logo { max-height: 48px; max-width: 160px; height: auto; width: auto; }
.app-nav {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: .25rem; overflow-x: auto; padding: .4rem .75rem;
  padding-bottom: calc(.4rem + env(safe-area-inset-bottom)); background: var(--color-bg); border-top: 1px solid var(--color-line);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
/* The floor plan editor wants the whole screen: its toolbar scrolls with the page instead of floating */
body.editing { padding-bottom: 1rem; }
body.editing .app-nav { position: static; margin-top: 1rem; }
.app-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .7rem; border-radius: .5rem; color: inherit; text-decoration: none; white-space: nowrap; }
.app-nav a.is-current { background: var(--color-accent); color: var(--color-accent-text); }
.nav-items { list-style: none; padding: 0; margin: 0 0 1rem; }
.nav-item { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--color-line); }
.nav-item__name { flex: 1; }
.nav-item.is-hidden .nav-item__name { color: var(--color-muted); }
.nav-item form { display: inline; }