:root {
  --bg: #0d0d10;
  --panel: #17171c;
  --panel-2: #1f1f27;
  --line: #2b2b35;
  --text: #f2f2f5;
  --muted: #9a9aa8;
  --accent: #ff3b3b;
  --accent-2: #ffcc00;
  --radius: 12px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
  padding-bottom: env(safe-area-inset-bottom);
}

/* --- Sticky kopbalk (topbar + dag-tabs samen) ----------------------------- */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* --- Topbar --------------------------------------------------------------- */
.topbar {
  background: linear-gradient(180deg, #14141a, #0d0d10);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-top));
  padding-top: max(10px, env(safe-area-inset-top));
}

.title {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.person-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-size: 0.8rem;
  color: var(--muted);
}

.person-pick select {
  flex: 1;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  font-size: 0.95rem;
  min-width: 0;
}

.mode-btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.mode-btn .mode-edit { display: none; }
body.edit-mode .mode-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
body.edit-mode .mode-btn .mode-view { display: none; }
body.edit-mode .mode-btn .mode-edit { display: inline; }

/* Zoekveld (bandnaam-filter), eigen rij onder de knoppen. */
.search-row { margin-top: 8px; }
#search-input {
  width: 100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.95rem;
}
#search-input::placeholder { color: var(--muted); }

.icon-btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1rem;
  line-height: 1;
}
.icon-btn.on { background: var(--accent-2); border-color: var(--accent-2); }

/* Sync-/offline-status onder de dag-tabs. */
.sync-status {
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  color: #0d0d10;
  background: var(--accent-2);
}
.sync-status[hidden] { display: none; }
.sync-status.offline { background: #f59e0b; }
.sync-status.syncing { background: #38bdf8; }

/* --- Dag-tabs ------------------------------------------------------------- */
.day-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.day-tab {
  flex: 1;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.day-tab.active {
  background: var(--accent-2);
  color: #111;
  border-color: var(--accent-2);
}

/* --- Acts ----------------------------------------------------------------- */
main { padding: 10px 12px 30px; }
.day-panel { display: none; }
.day-panel.active { display: block; }

.empty { color: var(--muted); padding: 24px 8px; text-align: center; }
.search-empty[hidden] { display: none; }

/* Dag-kopje: alleen zichtbaar tijdens het zoeken, als groepskop per dag. */
.day-heading {
  display: none;
  margin: 6px 2px 10px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-2);
}

/* Zoek-modus: dag-tabs verbergen, alle dagen met treffers tonen (met kopje),
   dagen en optredens zonder treffer verbergen. */
body.searching .day-tabs { display: none; }
body.searching .day-panel { display: block; }
body.searching .day-panel.no-match { display: none; }
body.searching .day-heading { display: block; }
.act.filter-hidden { display: none; }

.act {
  display: flex;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 8px;
}

/* Voorbije optredens: grijswaarden + iets doorzichtig. */
.act.past {
  filter: grayscale(1);
  opacity: 0.5;
}

.act-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  padding-top: 2px;
}
.act-time .start { font-weight: 800; font-size: 1rem; }
.act-time .end { font-size: 0.72rem; color: var(--muted); }

.act-body { flex: 1; min-width: 0; }

.act-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.artist { font-weight: 700; font-size: 1rem; }

.stage {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  background: #333;
  color: #fff;
}
.stage-eagle   { background: #c0392b; }
.stage-vulture { background: #2980b9; }
.stage-buzzard { background: #27ae60; }
.stage-hawk    { background: #8e44ad; }
.stage-sparrow { background: #d68910; }
.stage-raven   { background: #566573; }

/* Samenvatting van ieders mening */
.rating-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.rating-summary:empty { display: none; }

/* Chip = wat iemand vindt. Getinte pill met rand en icoon in de waarderingskleur
   (amber uitroepteken / groene vink / blauwgrijze min / rood kruis), plus een
   gekleurd initialen-bolletje voor wie. Vorm én kleur samen, zodat het ook klein
   en voor kleurenblinden duidelijk is. Kleur/tint worden in JS gezet. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  border: 1px solid currentColor;   /* currentColor = waarderingskleur */
}
.chip .ini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.chip .em { display: inline-flex; }
.chip .em .rate-icon { width: 1.05rem; height: 1.05rem; display: block; }

/* Waarderingsknoppen (wijzig-modus). Elke knop draagt zijn eigen kleur als
   bovenrand; de actieve knop is volledig in die kleur gevuld. */
.rating-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.rating-buttons:empty { display: none; }

.rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--line);   /* kleur wordt per knop in JS gezet */
  border-radius: 10px;
  padding: 9px 4px 8px;
  color: var(--text);
  cursor: pointer;
}
.rate .e { display: flex; color: var(--rc, var(--text)); }
.rate .e .rate-icon { width: 1.7rem; height: 1.7rem; }
.rate .l { font-size: 0.66rem; text-align: center; line-height: 1.1; }
.rate.active {
  color: #0d0d10;            /* achtergrondkleur wordt per knop in JS gezet */
  font-weight: 800;
}
.rate.active .e { color: #0d0d10; }   /* icoon donker op de gevulde knop */

/* --- Personen beheren ----------------------------------------------------- */
.manage { padding: 0 12px 40px; }
.manage details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.manage summary { cursor: pointer; font-weight: 600; color: var(--muted); }

.people-admin { margin-top: 10px; }
#add-person-form { display: flex; gap: 6px; }
#new-person {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 8px;
  font-size: 0.95rem;
}
#add-person-form button {
  background: var(--accent-2);
  color: #111;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
}

#people-list { list-style: none; margin: 12px 0 0; padding: 0; }
#people-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
#people-list .dot { width: 14px; height: 14px; border-radius: 50%; }
#people-list .pname { flex: 1; }
#people-list .del {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.78rem;
}

/* --- Plattegrond-overlay -------------------------------------------------- */
.map-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: #0d0d10;
}
.map-overlay[hidden] { display: none; }

.map-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #14141a, #0d0d10);
}
.map-title { font-weight: 800; font-size: 0.95rem; color: var(--accent); }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.map-scroll {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10px;
}
#map-img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  border-radius: 8px;
  background: #fff;        /* kaart is meestal licht; voorkomt flits op donker */
}
#map-img[hidden] { display: none; }

.map-fallback {
  color: var(--muted);
  text-align: center;
  padding: 40px 16px;
  line-height: 1.6;
}
.map-fallback a { color: var(--accent-2); display: block; margin-top: 8px; }

@media (min-width: 560px) {
  main, .manage { max-width: 640px; margin-inline: auto; }
}