:root {
  color-scheme: light;
  --bg: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #faf9f7;
  --ink: #171717;
  --muted: #6e6c68;
  --line: #e2ded7;
  --line-soft: #efede9;
  --accent: #1d1d1d;
  --accent-ink: #ffffff;
  --accent-soft: #eae6de;
  --good: #1d6a42;
  --good-soft: #e7f3ec;
  --warn: #8d6510;
  --warn-soft: #fff5d8;
  --danger: #a13731;
  --danger-soft: #fbecea;
  --input-bg: #ffffff;
  --disabled-bg: #f3f2ef;
  --disabled-ink: #777;
  --hover-bg: #f5f3ef;
  --row-bg: #ffffff;
  --progress-bg: #e9e6e0;
  --progress-fill: #222222;
  --topbar-bg: rgba(244,242,238,.92);
  --topbar-line: rgba(220,216,208,.8);
  --hero-bg: #1b1b1b;
  --hero-ink: #ffffff;
  --hero-muted: #d0d0d0;
  --hero-eyebrow: #cfcfcf;
  --focus-border: #999;
  --focus-ring: rgba(0,0,0,.045);
  --upload-bg: #faf9f6;
  --upload-line: #bab5ac;
  --welcome-bg: #f4f1ec;
  --welcome-line: #e6ded3;
  --admin-bg: #ebe8ff;
  --admin-ink: #44318b;
  --lock-ink: #684a0b;
  --radius: 18px;
  --shadow: 0 14px 36px rgba(0,0,0,.06);
  --shadow-soft: 0 8px 26px rgba(0,0,0,.035);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f100f;
  --surface: #181918;
  --surface-2: #20211f;
  --ink: #f1efea;
  --muted: #aaa7a0;
  --line: #32332f;
  --line-soft: #2a2b28;
  --accent: #f0ede6;
  --accent-ink: #171817;
  --accent-soft: #2c2d2a;
  --good: #7bd1a0;
  --good-soft: #172a20;
  --warn: #e3b75d;
  --warn-soft: #302613;
  --danger: #ff918a;
  --danger-soft: #321b1a;
  --input-bg: #141514;
  --disabled-bg: #222320;
  --disabled-ink: #777a74;
  --hover-bg: #242522;
  --row-bg: #1a1b1a;
  --progress-bg: #2b2c29;
  --progress-fill: #ece9e2;
  --topbar-bg: rgba(15,16,15,.90);
  --topbar-line: rgba(58,59,55,.88);
  --hero-bg: #070807;
  --hero-ink: #ffffff;
  --hero-muted: #b9b9b7;
  --hero-eyebrow: #c7c7c4;
  --focus-border: #777a74;
  --focus-ring: rgba(255,255,255,.07);
  --upload-bg: #151614;
  --upload-line: #494a45;
  --welcome-bg: #20211f;
  --welcome-line: #343530;
  --admin-bg: #24213b;
  --admin-ink: #c7bbff;
  --lock-ink: #efc66f;
  --shadow: 0 14px 36px rgba(0,0,0,.30);
  --shadow-soft: 0 8px 26px rgba(0,0,0,.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  line-height: 1.45;
  transition: background-color .18s ease, color .18s ease;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }

/* Dark-mode switch */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 7px 11px;
  min-height: 34px;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle:active { transform: translateY(1px); }
.theme-icon { width: 16px; text-align: center; font-size: 15px; line-height: 1; }
.theme-toggle-floating { position: fixed; z-index: 50; right: 20px; top: 20px; }

/* Auth */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}
.auth-card {
  width: min(470px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 34px;
  box-shadow: var(--shadow);
}
.brand-logo { width: 210px; height: auto; display: block; margin-bottom: 28px; transition: filter .18s ease; }
:root[data-theme="dark"] .brand-logo { filter: invert(1) brightness(1.16); }
.auth-card h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -.04em; }
.auth-card p { color: var(--muted); margin: 0 0 24px; }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .06em;
}
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--input-bg);
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--ink);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .78; }
input:focus, textarea:focus, select:focus { border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); }
textarea { min-height: 96px; resize: vertical; }
input:disabled, textarea:disabled, select:disabled { background: var(--disabled-bg); color: var(--disabled-ink); }

.btn {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-danger { color: var(--danger); background: var(--danger-soft); }
.btn-small { padding: 7px 10px; border-radius: 10px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.alert { padding: 12px 14px; border-radius: 12px; font-size: 14px; margin-top: 14px; }
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-success { background: var(--good-soft); color: var(--good); }

/* App shell */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--topbar-line);
}
.topbar-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.topbar .brand-logo { width: 172px; margin: 0; }
.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-chip { font-size: 13px; color: var(--muted); }

.portal-shell { max-width: 1260px; margin: 0 auto; padding: 22px; }
.hero {
  border-radius: 26px;
  padding: 30px;
  background: var(--hero-bg);
  color: var(--hero-ink);
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.hero-eyebrow { color: var(--hero-eyebrow); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.hero h1 { font-size: clamp(30px, 4vw, 48px); margin: 7px 0 4px; letter-spacing: -.045em; line-height: 1.02; }
.hero p { margin: 0; color: var(--hero-muted); }
.hero-row { display: flex; align-items: end; gap: 18px; }
.hero-row > :first-child { flex: 1; }
.progress-number { font-size: 32px; font-weight: 800; letter-spacing: -.04em; }

.layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 18px; align-items: start; }
.sidebar {
  position: sticky;
  top: 84px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow-soft);
}
.sidebar button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 12px;
  padding: 11px 12px;
  font-weight: 650;
  color: var(--muted);
}
.sidebar button:hover { background: var(--hover-bg); color: var(--ink); }
.sidebar button.active { background: var(--accent); color: var(--accent-ink); }
.sidebar-divider { height: 1px; background: var(--line); margin: 7px 6px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 18px;
}
.panel h2 { margin: 0 0 5px; font-size: 24px; letter-spacing: -.035em; }
.panel h3 { font-size: 16px; margin: 24px 0 10px; }
.panel-subtitle { margin: 0 0 20px; color: var(--muted); }
.section-title { display:flex; align-items:center; gap:9px; margin-top:28px; margin-bottom:10px; }
.section-title h3 { margin:0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.info-card {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px;
}
.info-label { color: var(--muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.info-value { margin-top: 5px; font-weight: 700; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.progress-wrap { margin: 18px 0; }
.progress-bar { height: 12px; background: var(--progress-bg); overflow: hidden; border-radius: 999px; }
.progress-fill { height: 100%; background: var(--progress-fill); width: 0; transition: width .35s ease; }
.progress-caption { display: flex; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: 13px; }

.status-list { display: grid; gap: 8px; }
.status-row, .timeline-row, .doc-row, .playlist-row, .song-row {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--row-bg);
}
.status-icon { width: 28px; height: 28px; display:grid; place-items:center; border-radius: 9px; background: var(--accent-soft); font-size: 13px; font-weight:800; }
.status-row.done .status-icon { background: var(--good-soft); color: var(--good); }
.status-row.open .status-icon { background: var(--warn-soft); color: var(--warn); }
.row-grow { flex:1; min-width:0; }
.row-title { font-weight: 700; }
.row-note { color: var(--muted); font-size: 13px; margin-top: 2px; overflow-wrap:anywhere; }

.lock-banner { background: var(--warn-soft); color: var(--lock-ink); border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; font-size: 14px; }

/* music */
.music-section { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 22px; }
.music-section:first-of-type { border-top:0; margin-top:0; padding-top:0; }
.option-grid { display: grid; gap: 8px; }
.preference-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 330px;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.preference-label { font-weight: 650; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.segmented button {
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  padding: 8px 7px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
}
.segmented button:hover { background: var(--surface-2); }
.segmented button.selected { background: var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.checkbox-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.check-option { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:11px; padding:10px; background: var(--surface-2); }
.check-option input { width:auto; }

.form-actions { display:flex; align-items:center; gap:10px; margin-top:20px; flex-wrap:wrap; }
.save-state { font-size:13px; color:var(--muted); }

.tag { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 9px; background:var(--accent-soft); font-size:12px; font-weight:700; }
.tag-good { background:var(--good-soft); color:var(--good); }
.tag-warn { background:var(--warn-soft); color:var(--warn); }

.playlist-row, .song-row { align-items:flex-start; }
.playlist-row { padding:0; overflow:hidden; }
.playlist-card-main { flex:1; display:grid; gap:10px; padding:18px; min-width:0; }
.playlist-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.playlist-kicker { font-weight:800; font-size:16px; color:var(--ink); }
.playlist-help { margin-top:4px; color:var(--muted); font-size:13px; line-height:1.4; }
.playlist-core { border-color:var(--line); }
.playlist-additional { border-style:dashed; }
.playlist-row input { width:100%; }
.song-row .fields { display:grid; grid-template-columns: 1fr 1fr; gap:8px; flex:1; }
.row-actions { display:flex; gap:6px; }

.timeline-time { width: 74px; font-weight:800; }
.timeline-row { align-items:flex-start; }
.timeline-main { flex:1; }
.timeline-main strong { display:block; }

.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-total { font-size:20px; }

.upload-box { border: 1px dashed var(--upload-line); border-radius: 14px; padding: 16px; background:var(--upload-bg); }
.doc-row .doc-icon { font-size: 20px; }

.admin-preview { background:var(--admin-bg); color:var(--admin-ink); padding:10px 13px; border-radius:12px; margin-bottom:15px; font-size:13px; }
.event-picker { display:flex; gap:8px; align-items:center; }
.event-picker select { min-width:260px; }

.loading { min-height: 50vh; display:grid; place-items:center; color:var(--muted); }
.spinner { width:26px; height:26px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--ink); animation:spin .8s linear infinite; margin:0 auto 10px; }
@keyframes spin { to { transform:rotate(360deg); } }

.welcome-card{margin:18px 0;padding:18px 20px;border-radius:18px;background:var(--welcome-bg);border:1px solid var(--welcome-line);line-height:1.55}
.welcome-label{font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; display:flex; overflow:auto; gap:3px; }
  .sidebar button { width:auto; min-width:max-content; }
  .sidebar-divider { display:none; }
  .grid-3 { grid-template-columns:1fr; }
  .preference-row { grid-template-columns:1fr; gap:7px; }
}
@media (max-width: 650px) {
  .portal-shell, .topbar-inner { padding-left:13px; padding-right:13px; }
  .hero { padding:23px; }
  .hero-row { align-items:flex-start; flex-direction:column; }
  .grid-2, .card-grid, .checkbox-grid { grid-template-columns:1fr; }
  .panel { padding:18px; }
  .song-row .fields { grid-template-columns:1fr; }
  .playlist-row, .song-row { flex-direction:column; }
  .row-actions { width:100%; }
  .topbar .brand-logo { width:145px; }
  .user-chip { display:none; }
  .theme-toggle-header .theme-label { display:none; }
  .theme-toggle-header { width:34px; padding:7px; }
  .theme-toggle-floating { right:13px; top:13px; }
}

/* ==========================================================
   EventDesk Portal V1.8 – Mobile-first polish
   ========================================================== */
@media (max-width: 650px) {
  html { scroll-padding-top: 126px; }
  body { overflow-x: hidden; }

  /* iPhone safe areas + compact chrome */
  .topbar-inner {
    min-height: 62px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 9px;
  }
  .topbar .brand-logo { width: 126px; }
  .topbar-meta { gap: 7px; }
  .theme-toggle-header,
  .topbar .btn-small {
    min-width: 44px;
    min-height: 44px;
  }
  .topbar .btn-small { padding: 9px 12px; }

  .portal-shell {
    padding-top: 12px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* Hero: useful, but not half the phone screen */
  .hero {
    border-radius: 20px;
    padding: 20px 18px;
    margin-bottom: 10px;
  }
  .hero h1 {
    font-size: clamp(28px, 9vw, 38px);
    line-height: 1.04;
  }
  .hero p { font-size: 14px; }
  .hero-row { gap: 14px; }
  .progress-number { font-size: 26px; }

  /* Main navigation becomes a sticky swipeable tab bar */
  .layout { gap: 10px; }
  .sidebar {
    position: sticky;
    top: 62px;
    z-index: 15;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -12px;
    padding: 9px 12px 10px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    background: var(--topbar-bg);
    backdrop-filter: blur(14px);
    box-shadow: none;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar button {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    scroll-snap-align: center;
    white-space: nowrap;
  }
  .sidebar button.active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
  }

  /* Cards/panels */
  .panel {
    padding: 17px 15px;
    border-radius: 17px;
    margin-bottom: 12px;
  }
  .panel h2 { font-size: 23px; }
  .panel h3 { margin-top: 22px; }
  .panel-subtitle { font-size: 14px; margin-bottom: 17px; }
  .info-card { padding: 13px; }

  /* No iOS auto-zoom on form focus */
  input, textarea, select { font-size: 16px; min-height: 46px; }
  textarea { min-height: 112px; }
  .field label { font-size: 11px; }

  /* Touch targets */
  .btn { min-height: 44px; }
  .btn-small { min-height: 40px; }
  .check-option { min-height: 46px; padding: 11px 12px; }
  .check-option input { min-height: auto; }

  /* Music questionnaire remains fast to fill with one thumb */
  .preference-row { padding: 12px 0; }
  .segmented { gap: 5px; }
  .segmented button {
    min-height: 44px;
    padding: 8px 5px;
    font-size: 12px;
    line-height: 1.15;
  }
  .music-section { margin-top: 20px; padding-top: 18px; }

  /* Forms/actions use the whole phone width */
  .form-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }
  .form-actions .btn { width: 100%; }
  .save-state { text-align: center; min-height: 18px; }

  /* Rows don't squeeze buttons/text off-screen */
  .status-row,
  .timeline-row,
  .doc-row,
  .song-row {
    align-items: flex-start;
    padding: 12px;
    gap: 10px;
  }
  .doc-row,
  .status-row { flex-wrap: wrap; }
  .doc-row .btn,
  .status-row .btn { margin-left: auto; }
  .timeline-time { width: 62px; flex: 0 0 62px; }
  .row-note { font-size: 12.5px; }

  .playlist-card-main { padding: 14px; }
  .playlist-card-head { gap: 10px; }
  .row-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .row-actions .btn { width: 100%; }

  .upload-box { padding: 14px; }
  .upload-box .btn { width: 100%; }
  #uploadState { display:block; margin:8px 0 0 !important; text-align:center; }

  /* Login is comfortable on smaller phones */
  .auth-shell {
    padding: max(20px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom));
    align-items: center;
  }
  .auth-card {
    border-radius: 22px;
    padding: 26px 20px;
  }
  .auth-card .brand-logo { width: 180px; margin-bottom: 22px; }
  .auth-card h1 { font-size: 27px; }
  .theme-toggle-floating {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    min-height: 44px;
  }

  /* Admin picker also remains usable if Fabian previews on phone */
  .event-picker { width: 100%; flex-wrap: wrap; }
  .event-picker select { min-width: 0; flex: 1 1 180px; }
}

@media (max-width: 390px) {
  .topbar .brand-logo { width: 112px; }
  .topbar-inner { gap: 6px; }
  .topbar .btn-small { padding-left: 10px; padding-right: 10px; }
  .hero { padding: 18px 16px; }
  .panel { padding-left: 14px; padding-right: 14px; }
  .segmented button { font-size: 11.5px; }
}