/* Herenburen — a thin layer on top of Bootstrap 5.3. No external fonts or scripts. */
:root {
  --hb-green: #2e6b3d;
  --hb-green-dark: #1f4d2b;
  --hb-green-soft: #e4f0e3;
  --hb-carrot: #e8772e;
  --hb-cream: #faf7ef;
  --hb-ink: #1f2a22;
  --hb-muted: #66726a;
  --hb-line: #e6e1d3;
  --hb-radius: 1rem;
  --hb-shadow: 0 1px 2px rgba(31, 42, 34, .06), 0 8px 24px rgba(31, 42, 34, .06);

  --bs-primary: var(--hb-green);
  --bs-primary-rgb: 46, 107, 61;
  --bs-link-color: var(--hb-green);
  --bs-link-color-rgb: 46, 107, 61;
  --bs-link-hover-color: var(--hb-green-dark);
  --bs-body-bg: var(--hb-cream);
  --bs-body-color: var(--hb-ink);
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-border-color: var(--hb-line);
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: var(--hb-radius);
  --bs-focus-ring-color: rgba(46, 107, 61, .25);
}

body { background: var(--hb-cream); min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 4.75rem; }
@media (min-width: 768px) { body { padding-bottom: 0; } }
main { flex: 1; }
h1, h2, h3, .display-5 { letter-spacing: -.02em; font-weight: 700; }
.text-muted, .text-secondary { color: var(--hb-muted) !important; }

/* Buttons */
.btn { font-weight: 600; border-radius: .75rem; padding: .6rem 1.1rem; }
.btn-lg { padding: .8rem 1.5rem; border-radius: .9rem; }
.btn-sm { padding: .35rem .75rem; border-radius: .6rem; }
.btn-primary { --bs-btn-bg: var(--hb-green); --bs-btn-border-color: var(--hb-green); --bs-btn-hover-bg: var(--hb-green-dark); --bs-btn-hover-border-color: var(--hb-green-dark); --bs-btn-active-bg: var(--hb-green-dark); --bs-btn-active-border-color: var(--hb-green-dark); --bs-btn-disabled-bg: var(--hb-green); --bs-btn-disabled-border-color: var(--hb-green); }
.btn-outline-primary { --bs-btn-color: var(--hb-green); --bs-btn-border-color: var(--hb-green); --bs-btn-hover-bg: var(--hb-green); --bs-btn-hover-border-color: var(--hb-green); --bs-btn-active-bg: var(--hb-green-dark); --bs-btn-active-border-color: var(--hb-green-dark); }
.btn-carrot { --bs-btn-color: #fff; --bs-btn-bg: var(--hb-carrot); --bs-btn-border-color: var(--hb-carrot); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #cf6420; --bs-btn-hover-border-color: #cf6420; }
.btn-soft { --bs-btn-color: var(--hb-green-dark); --bs-btn-bg: var(--hb-green-soft); --bs-btn-border-color: transparent; --bs-btn-hover-bg: #d4e7d2; --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--hb-green-dark); }

/* Forms */
.form-control, .form-select { border-radius: .7rem; padding: .65rem .9rem; border-color: #d9d3c1; background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--hb-green); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.field-narrow { width: 7rem; }
.form-text { color: var(--hb-muted); }
.form-check-input:checked { background-color: var(--hb-green); border-color: var(--hb-green); }

/* Cards */
.card { border: 1px solid var(--hb-line); border-radius: var(--hb-radius); box-shadow: var(--hb-shadow); background: #fff; }
.card-flat { box-shadow: none; }

/* Header and navigation */
.site-header { background: rgba(250, 247, 239, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hb-line); position: sticky; top: 0; z-index: 20; }
.site-header .inner { display: flex; align-items: center; gap: 1rem; min-height: 3.75rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--hb-green-dark); text-decoration: none; }
.brand svg { width: 1.9rem; height: 1.9rem; }
.brand:hover { color: var(--hb-green); }
.appnav { display: flex; gap: .25rem; }
.appnav a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .5rem; border-radius: .8rem; color: var(--hb-muted); text-decoration: none; font-size: .72rem; font-weight: 600; flex: 1; }
.appnav a svg { width: 1.45rem; height: 1.45rem; }
.appnav a.active { color: var(--hb-green-dark); background: var(--hb-green-soft); }
@media (max-width: 767.98px) {
  .appnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--hb-line); padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(31, 42, 34, .06); }
}
@media (min-width: 768px) {
  .appnav { margin-left: 1.5rem; }
  .appnav a { flex-direction: row; gap: .45rem; font-size: .92rem; padding: .5rem .9rem; flex: none; }
  .appnav a svg { width: 1.15rem; height: 1.15rem; }
}
.header-user { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--hb-muted); }

.site-footer { color: var(--hb-muted); font-size: .85rem; padding: 2rem 0 1.5rem; }
.site-footer a { color: inherit; }

/* Hero */
.hero { padding: 3rem 0 2.5rem; background: radial-gradient(1200px 400px at 85% -10%, #f6e2c8 0%, transparent 60%), radial-gradient(900px 380px at 0% 0%, #dcebd5 0%, transparent 60%); }
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.08; }
.hero .lead { font-size: 1.2rem; color: #3d4a41; max-width: 36rem; }
.pill { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--hb-line); border-radius: 99px; padding: .3rem .8rem; font-size: .85rem; font-weight: 600; color: var(--hb-green-dark); }
.step-num { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--hb-green); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; }
.feature-icon { width: 2.8rem; height: 2.8rem; border-radius: .9rem; background: var(--hb-green-soft); color: var(--hb-green-dark); display: grid; place-items: center; }
.feature-icon svg { width: 1.4rem; height: 1.4rem; }

/* Member colours (one per member, like the old spreadsheet) */
.mc-0 { --mc-bg: #f4d3b8; --mc-fg: #7a3d10; } .mc-1 { --mc-bg: #cfe0f4; --mc-fg: #1d4672; }
.mc-2 { --mc-bg: #d3e8cb; --mc-fg: #2b5a21; } .mc-3 { --mc-bg: #f8e7a8; --mc-fg: #6b5400; }
.mc-4 { --mc-bg: #d9dde3; --mc-fg: #37404c; } .mc-5 { --mc-bg: #ecd0ea; --mc-fg: #6a2f66; }
.mc-6 { --mc-bg: #cdeae6; --mc-fg: #1d5a52; } .mc-7 { --mc-bg: #f2cfd2; --mc-fg: #7a2530; }
.chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--mc-bg, #eee); color: var(--mc-fg, #333); border-radius: 99px; padding: .25rem .8rem; font-weight: 700; font-size: .92rem; white-space: nowrap; }
.chip-empty { background: #f1eee4; color: var(--hb-muted); font-weight: 600; }
.dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--mc-fg, #999); display: inline-block; }

/* Schedule */
.next-card { background: linear-gradient(135deg, var(--hb-green) 0%, #3f8a50 100%); color: #fff; border: 0; }
.next-card .chip { background: #fff; color: var(--hb-green-dark); font-size: 1.15rem; padding: .35rem 1rem; }
.next-card .small, .next-card .text-muted { color: rgba(255, 255, 255, .85) !important; }
.slot { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; border-bottom: 1px solid var(--hb-line); }
.slot:last-child { border-bottom: 0; }
.slot-date { width: 4.3rem; flex: none; line-height: 1.15; }
.slot-date .d { font-weight: 800; font-size: 1.05rem; }
.slot-date .w { font-size: .78rem; color: var(--hb-muted); text-transform: uppercase; letter-spacing: .04em; }
.slot-body { flex: 1; min-width: 0; }
.slot.past { opacity: .6; }
.slot.today { background: #fff8e6; }
.month-head { padding: .55rem 1rem; background: #f4f1e6; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hb-muted); border-bottom: 1px solid var(--hb-line); }
.slot details summary { list-style: none; cursor: pointer; }
.slot details summary::-webkit-details-marker { display: none; }
.slot .edit-link { color: var(--hb-muted); font-size: .8rem; }
.lock { color: var(--hb-carrot); }

/* Wishes: four radio buttons per day, usable with one thumb and without JavaScript */
.wish-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: .7rem 0; border-bottom: 1px solid var(--hb-line); }
.wish-row:last-child { border-bottom: 0; }
.wish-row .when { width: 6.2rem; font-weight: 700; }
.wish-row .btn-group { flex: 1; min-width: 17rem; }
.wish-row .btn { padding: .45rem .3rem; font-size: .85rem; }
.btn-check:checked + .btn-wish-none { background: #e9e6da; color: var(--hb-ink); border-color: #cfc9b6; }
.btn-check:checked + .btn-wish-prefer { background: var(--hb-green); color: #fff; border-color: var(--hb-green); }
.btn-check:checked + .btn-wish-avoid { background: #f3c58b; color: #6b3c05; border-color: #e0a95e; }
.btn-check:checked + .btn-wish-absent { background: #c8453b; color: #fff; border-color: #c8453b; }
.btn-wish { background: #fff; border: 1px solid #d9d3c1; color: var(--hb-muted); }

.stat { text-align: center; padding: .7rem .4rem; }
.stat .n { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.stat .l { font-size: .75rem; color: var(--hb-muted); }
.alert { border-radius: .9rem; border: 0; }
.qr svg { width: 100%; max-width: 15rem; height: auto; border-radius: .75rem; background: #fff; padding: .5rem; border: 1px solid var(--hb-line); }
.recovery { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .04em; columns: 2; }
.auth-wrap { max-width: 26rem; margin: 2.5rem auto; }
details.confirm > summary { list-style: none; }
details.confirm > summary::-webkit-details-marker { display: none; }
.dl-tight dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--hb-muted); font-weight: 700; margin-top: .6rem; }
.dl-tight dd { margin: 0; }
.container-narrow { max-width: 60rem; }
.text-green { color: var(--hb-green); }
.flex-none { flex: none; }
.form-narrow { max-width: 26rem; }
.next-label { opacity: .85; }

/* Planning-as-picture dialog */
.image-dialog { width: min(94vw, 62rem); max-height: 92vh; overflow: auto; border: 0; border-radius: 1rem; padding: 1rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25); }
.image-dialog::backdrop { background: rgba(20, 30, 24, .55); }

/* Marks after a name: heart = preferred day, sad face = rather not, planned anyway */
.wish { font-weight: 400; font-size: 1em; line-height: 1; }
.wish-prefer { color: #c2410c; opacity: .45; } /* faint on purpose */
.wish-avoid { color: #6b7280; }

/* Wishes per day: compact tiles, no empty calendar space */
.cal-month { font-weight: 800; margin: 1rem 0 .4rem; }
.cal-month:first-of-type { margin-top: .2rem; }
.cal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .5rem; }
.cal-day { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; padding: .4rem .65rem; border: 1px solid var(--hb-line); border-radius: .6rem; background: #faf8f0; }
.cal-date { font-weight: 700; font-size: .92rem; white-space: nowrap; }
.cal-marks { display: inline-flex; flex: none; gap: .3rem; }
.cal-mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .45rem; border: 1px solid var(--hb-line); background: #fff; cursor: pointer; line-height: 1; font-size: 1rem; user-select: none; }
.cal-mark-absent { color: #b3261e; } .cal-mark-avoid { color: #b26a00; } .cal-mark-prefer { color: #c2410c; }
.btn-check:checked + .cal-mark-absent { background: #b3261e; color: #fff; border-color: #b3261e; }
.btn-check:checked + .cal-mark-avoid { background: #f0a92e; color: #fff; border-color: #f0a92e; }
.btn-check:checked + .cal-mark-prefer { background: #f4c7b4; color: #9a3412; border-color: #f4c7b4; }
.btn-check:focus-visible + .cal-mark { outline: 2px solid var(--hb-green-dark); outline-offset: 2px; }
.cal-skipped { opacity: .65; }
.cal-key { display: inline-flex; width: 1.4rem; height: 1.4rem; align-items: center; justify-content: center; border-radius: .4rem; color: #fff; margin: 0 .2rem 0 .8rem; }
.cal-key:first-child { margin-left: 0; }
.cal-key-absent { background: #b3261e; } .cal-key-avoid { background: #f0a92e; } .cal-key-prefer { background: #f4c7b4; color: #9a3412; }
@media (max-width: 575.98px) {
  .cal-list { grid-template-columns: 1fr; }
  .cal-mark { width: 2.4rem; height: 2.4rem; font-size: 1.15rem; }
}
/* A request waiting for the admin */
.cal-pending { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 2px #fff; }

/* Mijn planning: the date leads, a small heading says which one is next */
.mine-slot .mine-date { width: auto; min-width: 9.5rem; }
.mine-slot .mine-date .d { font-size: 1.55rem; font-weight: 800; line-height: 1.1; }
.mine-first { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--hb-green-dark); margin-bottom: .1rem; }
@media (max-width: 575.98px) { .mine-slot .mine-date { min-width: 7.4rem; } .mine-slot .mine-date .d { font-size: 1.3rem; } }

/* Who is logged in, and "jij" next to your own name */
.header-user { flex: none; }
.appnav { min-width: 0; }
.header-who { display: inline-flex; align-items: center; gap: .35rem; color: var(--hb-ink, #1d2a22); font-weight: 700; }
.header-who svg { width: 1.1rem; height: 1.1rem; flex: none; }
.header-who .who-short { display: inline; max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-who .who-full { display: none; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1200px) { .header-who .who-full { display: inline; } .header-who .who-short { display: none; } }
/* Room for the menu on medium screens: smaller items, no icons */
@media (min-width: 576px) and (max-width: 1199.98px) { .appnav a { padding: .45rem .6rem; font-size: .85rem; } .appnav a svg { display: none; } }
.me-tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: rgba(255,255,255,.75); border-radius: 99px; padding: .02rem .4rem; margin-left: .25rem; }

/* Icon-only menu items (Instellingen, Beheer): the name shows on hover or focus */
.appnav a.icon-only { position: relative; flex: none; }
@media (min-width: 576px) {
  .appnav a.icon-only { padding: .5rem .6rem; }
  .appnav a.icon-only svg { display: block; width: 1.25rem; height: 1.25rem; }
  .appnav a.icon-only::after { content: attr(data-tip); position: absolute; top: calc(100% + .3rem); left: 50%; transform: translateX(-50%); background: #1d2a22; color: #fff; font-size: .75rem; font-weight: 600; padding: .2rem .5rem; border-radius: .4rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
  .appnav a.icon-only:hover::after, .appnav a.icon-only:focus-visible::after { opacity: 1; }
}
@media (max-width: 575.98px) { .appnav a.icon-only { flex: 0 0 3rem; } }

/* "Omdat Bram niet kon" */
.swap-note { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--hb-muted); font-weight: 600; }
.swap-note [aria-hidden] { color: var(--hb-green-dark); font-weight: 800; }

/* Rollback button top right in a history card; the open panel floats above the cards below. */
.rb-pad { padding-right: 6.5rem; }
.rb-box { z-index: 1; }
.rb-box[open] { z-index: 5; }
.rb-panel { width: 18rem; max-width: calc(100vw - 4rem); }
.rb-date { max-width: 11rem; }

/* Planner-only count info per day on the schedule; the panel floats over the rows below. */
.slots .slot:last-child { border-radius: 0 0 var(--hb-radius) var(--hb-radius); }
.info { position: relative; flex: none; }
.info[open] { z-index: 6; }
.info > summary { list-style: none; cursor: pointer; }
.info > summary::-webkit-details-marker { display: none; }
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--hb-line); border-radius: 50%; color: var(--hb-muted); font: italic 700 .8rem/1 Georgia, serif; background: #fff; }
.info[open] > .info-btn { color: #fff; background: var(--hb-muted); }
.info-panel { position: absolute; right: 0; bottom: calc(100% + .35rem); width: 17rem; max-width: calc(100vw - 3rem); text-align: left; }

.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.rb-wide { max-width: 22rem; }

.inbox-box > summary { cursor: pointer; }

/* A link to a part of the page (#verzoeken, #email) must not end up under the sticky header. */
:target { scroll-margin-top: 7rem; }

/* The swap choice list: one flat line per day: date, who holds it, her choice. */
.swap-row { display: grid; grid-template-columns: 6rem 1fr auto; align-items: center; gap: .9rem; padding: .45rem 1rem; border-bottom: 1px solid var(--hb-line); }
.swap-row:last-child { border-bottom: 0; }
.swap-date { font-weight: 800; white-space: nowrap; }
.swap-choice { display: flex; justify-content: flex-end; }

/* Heart and cross in red like in the calendars, the middle one neutral and green when chosen. */
.swap-pick { background: #fff; border: 1px solid #cfc9b6; min-width: 2.4rem; }
.swap-prefer { color: #c2410c; } .swap-cannot { color: #b3261e; } .swap-neutral { color: var(--hb-muted); }
.btn-check:checked + .swap-prefer { background: #c2410c; border-color: #c2410c; color: #fff; }
.btn-check:checked + .swap-cannot { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn-check:checked + .swap-neutral { background: var(--hb-green); border-color: var(--hb-green); color: #fff; }
.btn-check:focus-visible + .swap-pick { box-shadow: 0 0 0 .2rem rgba(46, 107, 61, .35); }

.cal-key-ok { background: var(--hb-green); }

/* The key to the buttons sits in the first month bar, on the right, in normal letters. */
.month-head.has-legend { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .9rem; }
.swap-legend { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--hb-ink); font-size: .85rem; white-space: nowrap; }

/* The page behind a swap link: no login-page spacing above it. */
.swap-wrap { max-width: 32rem; margin: .5rem auto 2rem; }

/* The lock next to a field that is stored encrypted. */
.lock-note { display: inline-flex; vertical-align: -.1em; margin-left: .25rem; color: var(--hb-green); cursor: help; }

/* Bootstrap Icons (MIT), drawn inline: nothing is loaded from elsewhere. */
.bi-inline { vertical-align: -.125em; }

/* The explanation of the calendar opens as a panel under its button instead of pushing the page down. */
.info-down > .info-panel { top: calc(100% + .35rem); bottom: auto; }
.info-wide { width: 30rem; max-width: calc(100vw - 3rem); }

/* A card that folds open and closed: its heading is the button. */
.card-summary { cursor: pointer; }

/* The day and time of the group reminder: wide enough that the text clears the arrow. */
.rem-select-dag { min-width: 8.25rem; padding-right: 2rem; }
.rem-select-tijd { min-width: 6rem; padding-right: 2rem; }