:root {
  --paper: #FFF7EA;
  --paper-raised: #FFFFFF;
  --ink: #2B2540;
  --ink-soft: #6E6788;
  --line: #F0E4CF;

  --accent-boodschappen: #FF5A36;
  --accent-boodschappen-soft: #FFE3DB;
  --accent-marieke: #FFFFFF;
  --accent-marieke-soft: #FFFFFF;
  --accent-huibert: #2E2B26;
  --accent-huibert-soft: #E7E4DE;
  --accent-juul: #2D8CFF;
  --accent-juul-soft: #DDEBFF;
  --accent-simon: #17B26A;
  --accent-simon-soft: #D5F4E4;
  --accent-eva: #FFC914;
  --accent-eva-soft: #FFF3B8;
  --accent-tot: #7B61FF;
  --accent-tot-soft: #E7E1FF;

  --accent: var(--accent-boodschappen);
  --accent-soft: var(--accent-boodschappen-soft);

  --radius: 20px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.board {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
}

.board-header {
  padding: 4px 4px 16px;
}

.board-header-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.logout-form {
  margin: 0;
}

.logout-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

.board-header h1 {
  font-family: inherit;
  font-size: 34px;
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.2px;
  color: var(--ink);
}

.board-date {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  text-transform: capitalize;
}

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: 0 0 auto;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 10px 12px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.tab:active {
  opacity: 0.7;
}

.priority-hint {
  margin: 14px 4px 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.panel {
  flex: 1;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 4px;
  min-height: 200px;
  margin-top: 8px;
}

.empty-state {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  padding: 32px 16px;
  margin: 0;
}

.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-raised);
  position: relative;
}

.item-assignees {
  flex-basis: 100%;
  display: flex;
  gap: 6px;
  padding-left: 60px;
}

.assignee-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink-soft);
  cursor: pointer;
}

.assignee-chip.assigned {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.assignee-chip:active {
  filter: brightness(0.95);
}

.item-row:last-child {
  border-bottom: none;
}

.item-number {
  flex-shrink: 0;
  min-width: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
}

.item-number:hover,
.item-number:focus {
  outline: none;
  filter: brightness(0.95);
}

.item-row.done .item-number {
  opacity: 0.5;
}

.item-number-edit-input {
  flex-shrink: 0;
  width: 40px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 3px 4px;
}

.item-number-edit-input:focus {
  outline: none;
}

.item-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid var(--accent);
  background: var(--paper-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.item-row.done .item-check {
  background: var(--accent);
}

.item-check svg {
  width: 14px;
  height: 14px;
  opacity: 0;
}

.item-row.done .item-check svg {
  opacity: 1;
}

.item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.item-text {
  font-size: 16px;
  line-height: 1.35;
  word-break: break-word;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.item-text:hover,
.item-text:focus {
  background: var(--accent-soft);
  outline: none;
}

.item-duration {
  align-self: flex-start;
  font-size: 12px;
  color: var(--ink-soft);
  border-radius: 5px;
  padding: 5px 4px;
  margin: -5px -4px -3px;
  cursor: pointer;
}

.item-duration:hover,
.item-duration:focus {
  background: var(--accent-soft);
  outline: none;
}

.item-duration-empty {
  opacity: 0.5;
}

.duration-wheel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 120px;
}

.duration-wheel-col {
  width: 40px;
  height: 120px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-soft);
}

.duration-wheel-col::-webkit-scrollbar {
  display: none;
}

.duration-wheel-track {
  padding: 40px 0;
}

.duration-wheel-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
  scroll-snap-align: center;
}

.duration-wheel-unit {
  font-size: 12px;
  color: var(--ink-soft);
}

.duration-wheel-highlight {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  height: 40px;
  border-top: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  pointer-events: none;
}

.item-edit-input {
  flex: 1;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.35;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
  background: var(--paper-raised);
  color: var(--ink);
}

.item-edit-input:focus {
  outline: none;
}

.item-row.done .item-text {
  color: var(--ink-soft);
  text-decoration: line-through;
}

.item-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}

.item-delete:active {
  opacity: 0.6;
}

.add-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.add-form[hidden] {
     display: none;
}

.add-form input[type="text"] {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
}

.add-form input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

.add-form input.duration-input {
  flex: 0 0 64px;
  width: 64px;
  min-width: 0;
  font-size: 16px;
  padding: 14px 8px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
}

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

.add-form button {
  width: 52px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
}

.add-form button:active {
  opacity: 0.85;
}

.clear-done {
  margin-top: 10px;
  align-self: center;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px;
}

/* Per-tab accent theming */
body[data-active="boodschappen"] {
  --accent: var(--accent-boodschappen);
  --accent-soft: var(--accent-boodschappen-soft);
}

/* Boodschappenlijst heeft geen tijdsduur of prioriteit-uitleg nodig */
body[data-active="boodschappen"] .item-duration,
body[data-active="boodschappen"] .duration-input,
body[data-active="boodschappen"] .priority-hint {
  display: none;
}
body[data-active="marieke"] {
  --accent: var(--accent-marieke);
  --accent-soft: var(--accent-marieke-soft);
}
body[data-active="huibert"] {
  --accent: var(--accent-huibert);
  --accent-soft: var(--accent-huibert-soft);
}
body[data-active="juul"] {
  --accent: var(--accent-juul);
  --accent-soft: var(--accent-juul-soft);
}
body[data-active="simon"] {
  --accent: var(--accent-simon);
  --accent-soft: var(--accent-simon-soft);
}
body[data-active="eva"] {
  --accent: var(--accent-eva);
  --accent-soft: var(--accent-eva-soft);
}
body[data-active="tot"] {
  --accent: var(--accent-tot);
  --accent-soft: var(--accent-tot-soft);
}


/* Weekagenda */
:root { --accent-agenda:#FF9F1C; --accent-agenda-soft:#FFEBCB; }
body[data-active="agenda"] { --accent:var(--accent-agenda); --accent-soft:var(--accent-agenda-soft); }
.agenda-tools { margin:4px 0 12px; }
.agenda-form { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); }
.agenda-form input,.agenda-form select { min-width:0; font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px; }
#agenda-activity { grid-column:1/-1; }
.agenda-time-row { grid-column:1/-1; display:flex; align-items:end; gap:8px; }
.agenda-time-row label { flex:1; font-size:12px; color:var(--ink-soft); }
.agenda-time-row input { display:block; width:100%; margin-top:3px; }
.agenda-time-row button { align-self:stretch; border:0; border-radius:10px; padding:0 12px; color:#fff; background:var(--accent); font-weight:600; }
.agenda-panel { flex:1; }
.week-nav { display:flex; align-items:center; justify-content:space-between; margin:4px 0 10px; }
.week-nav button { width:40px; height:36px; border:1px solid var(--line); border-radius:10px; background:var(--paper-raised); color:var(--ink); font-size:24px; }
.week-grid { display:grid; gap:8px; }
.week-day { overflow:hidden; background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; }
.week-day.today { border:2px solid var(--accent); }
.week-day-head { display:flex; justify-content:space-between; padding:9px 11px; background:var(--accent-soft); text-transform:capitalize; }
.week-day-head span { color:var(--ink-soft); font-size:13px; }
.agenda-entry { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:7px; padding:8px 9px; border-left:5px solid var(--accent); border-radius:8px; background:#FFFBF4; }
.agenda-entry>div { display:grid; grid-template-columns:75px 70px 1fr; align-items:center; gap:6px; width:100%; }
.agenda-entry span,.agenda-entry strong { font-size:13px; }
.agenda-time { color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.agenda-entry button { border:0; background:none; color:var(--ink-soft); font-size:20px; padding:4px; }
.person-huibert{border-left-color:var(--accent-huibert)} .person-marieke{border-left-color:var(--accent-marieke)} .person-juul{border-left-color:var(--accent-juul)} .person-simon{border-left-color:var(--accent-simon)} .person-eva{border-left-color:var(--accent-eva)}
.agenda-empty { margin:0; padding:10px 12px; color:var(--ink-soft); font-size:13px; }
@media (min-width:800px){ .board{max-width:1100px}.week-grid{grid-template-columns:repeat(7,1fr)}.week-day{min-height:220px}.agenda-entry>div{grid-template-columns:1fr}.agenda-time-row button{padding:0 22px} }


/* ===== Winkelvolgorde-knop (boodschappen) ===== */
.list-tools { display:flex; justify-content:flex-end; margin:12px 0 10px; }
.list-tools[hidden] { display:none; }
.sort-store-btn { border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); border-radius:999px; padding:8px 14px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.sort-store-btn:active { background:var(--accent-soft); border-color:var(--accent); }

/* ===== Passen ===== */
:root { --accent-passen:#00A9C2; --accent-passen-soft:#D2F3F8; }
body[data-active="passen"] { --accent:var(--accent-passen); --accent-soft:var(--accent-passen-soft); }
.passen-panel { flex:1; }
.passen-panel[hidden], .passen-sheet-bg[hidden], .passen-scan-bg[hidden],
.passen-logo-preview[hidden], .passen-photo-preview[hidden], .passen-link-btn[hidden] { display:none; }
.passen-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 4px 12px; }
.passen-count { font-size:13px; color:var(--ink-soft); }
.passen-add { border:none; background:var(--accent); color:#fff; border-radius:999px; padding:9px 16px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.passen-add:active { opacity:.85; }
.passen-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.passen-card { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1.55/1; padding:12px; border:none; border-radius:var(--radius); color:#fff; font:inherit; text-align:left; cursor:pointer; overflow:hidden; box-shadow:0 3px 9px rgba(46,43,38,.18); transition:transform .15s ease; }
.passen-card:active { transform:scale(.97); }
.passen-stamp { position:absolute; top:9px; right:9px; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.passen-card-header { display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; min-width:0; }
.passen-card-store { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:16px; line-height:1.2; }
.passen-logo-badge { width:52px; height:52px; border-radius:50%; background:var(--paper-raised); object-fit:contain; padding:7px; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.passen-logo-fallback { width:52px; height:52px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-family:inherit; font-weight:800; font-size:24px; color:inherit; }
.passen-empty { text-align:center; margin-top:48px; color:var(--ink-soft); }
.passen-empty h3 { margin:0 0 6px; font-weight:800; font-size:20px; color:var(--ink); }
.passen-empty p { margin:0; font-size:14px; }

.passen-sheet-bg, .passen-scan-bg { position:fixed; inset:0; z-index:50; display:flex; justify-content:center; }
.passen-sheet-bg { align-items:flex-end; background:rgba(46,43,38,.5); }
.passen-scan-bg { align-items:center; padding:20px; background:rgba(20,18,14,.92); z-index:60; }
.passen-sheet { width:100%; max-width:480px; max-height:90vh; overflow-y:auto; padding:20px 18px calc(24px + env(safe-area-inset-bottom)); background:var(--paper); border-radius:20px 20px 0 0; }
.passen-sheet h2 { margin:0 0 6px; font-weight:800; font-size:24px; }
.passen-sheet label { display:block; margin:14px 0 6px; font-size:13px; color:var(--ink-soft); }
.passen-sheet input[type=text], .passen-sheet select { width:100%; padding:11px 12px; font:inherit; font-size:16px; color:var(--ink); background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; }
.passen-sheet input[type=text]:focus, .passen-sheet select:focus { outline:none; border-color:var(--accent); }
.passen-hint { margin-top:6px; font-size:12px; color:var(--ink-soft); }
.passen-logo-row { display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; }
.passen-logo-preview { width:56px; height:56px; border-radius:50%; background:var(--paper-raised); object-fit:contain; padding:6px; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.passen-photo-preview { width:56px; height:38px; border-radius:6px; object-fit:cover; }
.passen-ghost-btn { border:1px dashed var(--line); background:var(--paper-raised); color:var(--ink-soft); border-radius:10px; padding:10px 14px; font:inherit; font-size:14px; cursor:pointer; }
.passen-link-btn { background:none; border:none; padding:4px; color:var(--ink-soft); font:inherit; font-size:13px; text-decoration:underline; cursor:pointer; }
.passen-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.passen-swatch { width:34px; height:34px; border-radius:50%; border:3px solid transparent; cursor:pointer; padding:0; }
.passen-swatch.selected { border-color:var(--ink); }
.passen-sheet-actions { display:flex; gap:10px; margin-top:22px; }
.passen-primary { flex:1; border:none; border-radius:var(--radius); padding:13px; background:var(--accent); color:#fff; font:inherit; font-size:16px; font-weight:600; cursor:pointer; }
.passen-secondary { border:1px solid var(--line); border-radius:var(--radius); padding:13px 18px; background:transparent; color:var(--ink-soft); font:inherit; font-size:16px; cursor:pointer; }

.passen-scan-card { width:100%; max-width:380px; padding:22px; text-align:center; background:var(--paper-raised); border-radius:18px; }
.passen-scan-store-row { display:flex; align-items:center; justify-content:center; gap:10px; }
.passen-scan-logo { width:40px; height:40px; border-radius:50%; object-fit:contain; padding:4px; background:var(--paper-raised); box-shadow:0 1px 4px rgba(0,0,0,.15); }
.passen-scan-card .passen-logo-fallback { width:40px; height:40px; font-size:18px; background:var(--accent-soft); color:var(--ink); }
.passen-scan-store { font-weight:800; font-size:24px; color:var(--ink); }
.passen-scan-cat { margin-top:2px; font-size:12px; color:var(--ink-soft); }
.passen-barcode-wrap { margin:16px 0 6px; padding:10px 6px 4px; background:#fff; border-radius:10px; }
.passen-barcode-wrap svg { display:block; width:100%; height:auto; }
.passen-scan-code { margin:16px 0 10px; padding:14px 10px; background:var(--paper); border-radius:10px; font-family:inherit; font-weight:700; font-size:24px; letter-spacing:.06em; word-break:break-all; }
.passen-scan-actions { display:flex; gap:10px; margin-top:16px; }
.passen-scan-actions button { flex:1; padding:11px; font:inherit; font-size:14px; color:var(--ink); background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.passen-scan-actions .del { color:#E03B47; border-color:#F8C9CB; }
.passen-scan-close { margin-top:12px; }