:root {
    --bg: #f7f5f0;
    --panel: #ffffff;
    --ink: #2b2620;
    --muted: #7a7368;
    --border: #e3ddd0;
    --weekend-bg: #efe9db;
    --today-bg: #fff4d6;
    --accent: #3d9a8b;
    --accent-dark: #2c7368;
    --danger: #c0392b;
    --name-col-width: 260px;
    --day-col-width: 42px;
    --month-row-h: 26px;
    --day-row-h: 46px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    max-width: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
    flex: 0 0 auto;
}

.toolbar h1 {
    font-size: 1.4rem;
    margin: 0;
}

.toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn {
    font: inherit;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.btn:hover { background: #f0ece2; }

a.btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.btn-small {
    padding: 4px 10px;
    font-size: 0.78rem;
    margin: -4px 0 10px;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent-dark);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-danger {
    background: #fdecea;
    border-color: var(--danger);
    color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: #fff; }

.lock-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.lock-btn[data-unlocked="1"] {
    background: #e7f5f0;
    border-color: var(--accent-dark);
    color: var(--accent-dark);
}

.unknown-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
}

.calendar-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
}

table.calendar {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

/* Kolombreedtes staan op <col>, niet op de cellen: met een rowspan-cel
   (naamkolom) gecombineerd met colspan-cellen (maandlabels) in de eerste
   rij bepalen browsers kolombreedtes uit celbreedtes onbetrouwbaar.
   Zowel min-width als max-width zijn nodig: zonder min-width knijpt de
   layout lege dagcellen (nauwelijks inhoud) samen zodra de tabel niet in
   de zichtbare breedte past, ook al is er expliciet width/max-width gezet. */
.col-name { width: var(--name-col-width); min-width: var(--name-col-width); }
.col-day { width: var(--day-col-width); min-width: var(--day-col-width); }

table.calendar th,
table.calendar td {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0;
    white-space: nowrap;
}

/* --- Sticky headers --- */
thead th {
    position: -webkit-sticky;
    position: sticky;
    background: var(--panel);
    z-index: 3;
}
.month-row th { top: 0; height: var(--month-row-h); }
.day-row th { top: var(--month-row-h); height: var(--day-row-h); }

.month-head {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-align: left;
    padding-left: 8px;
    border-bottom: 1px solid var(--border);
}

.day-head {
    min-width: var(--day-col-width);
    max-width: var(--day-col-width);
    text-align: center;
    vertical-align: bottom;
    font-size: 0.72rem;
    line-height: 1.1;
    color: var(--muted);
}
/* Hogere specificiteit nodig dan "table.calendar th" (dat padding:0 zet). */
table.calendar th.day-head {
    padding-bottom: 4px;
}
.day-head .dow { display: block; }
.day-head .dom { display: block; font-weight: 700; color: var(--ink); }
.day-head.weekend { background: var(--weekend-bg); }
.day-head.today { background: var(--today-bg); color: var(--accent-dark); }
.day-head.feast {
    background: #ffd166;
    color: #7a4b00;
}
.day-head.feast .dom { color: #7a4b00; }
.feast-icon {
    display: block;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* --- Sticky name column --- */
.corner {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 5;
    text-align: left;
    background: var(--panel);
    /* min-width èn max-width nodig: table-layout:fixed knijpt kolommen met
       weinig inhoud alsnog samen zonder min-width, en blijft breder dan
       nodig zonder max-width. */
    min-width: var(--name-col-width);
    max-width: var(--name-col-width);
}
/* Hogere specificiteit nodig dan "table.calendar th" (dat padding:0 zet)
   om de linker marge van de "Naam"-kop te laten gelden. */
table.calendar th.corner {
    padding-left: 12px;
}

.name-cell {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--panel);
    font-weight: 400;
    text-align: left;
    box-shadow: 2px 0 0 var(--border);
    min-width: var(--name-col-width);
    max-width: var(--name-col-width);
}

/* Flexbox zit op een wrapper-div binnen de <th>, niet op de tabelcel zelf:
   WebKit (alle browsers op iOS) berekent rijhoogte en `position: sticky`
   verkeerd wanneer `display: flex` rechtstreeks op een table-cell staat. */
.name-cell-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    height: 100%;
    box-sizing: border-box;
}

.person-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 1px;
}

.person-name {
    position: relative;
    display: inline-block;
    max-width: 100%;
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Toont de volledige naam zolang er met een vinger/muis op wordt gedrukt
   ("houden"), voor namen die zijn afgekapt met "...". Werkt op desktop
   (title-tooltip via hover) én mobiel (via :active bij het vasthouden). */
.person-name:active::after {
    content: attr(title);
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--ink);
    color: #fff;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 400;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.row-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.icon-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0.55;
}
.icon-btn:hover { opacity: 1; background: var(--weekend-bg); }

/* --- Day cells / bars --- */
.day-cell {
    position: relative;
    min-width: var(--day-col-width);
    max-width: var(--day-col-width);
    height: 34px;
}
.day-cell.weekend { background: var(--weekend-bg); }
.day-cell.today { box-shadow: inset 0 0 0 1px var(--today-bg); }
.day-cell.feast { background: #fff1cc; }

/* De balk is een los laagje bovenop de cel (i.p.v. de celachtergrond zelf
   te vervangen), zodat de weekend/vandaag/feest-tint van de cel intact
   blijft zichtbaar rond de afgeronde uiteinden van de balk. */
.day-cell.bar::after {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--bar-color) 75%, white);
    pointer-events: none;
}
.day-cell.bar.feast::after {
    box-shadow: inset 0 0 0 2px #ffd166;
}
.day-cell.bar-start::after { left: 3px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.day-cell.bar-end::after { right: 3px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

tbody tr:hover .name-cell,
tbody tr:hover .day-cell:not(.bar) {
    background: #faf8f3;
}

/* --- Modal --- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(30, 26, 20, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 16px;
}
.modal[hidden] { display: none; }

.modal-content {
    background: var(--panel);
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.modal-content h2 { margin-top: 0; font-size: 1.1rem; }

.modal-content form label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 10px;
}
.modal-content input[type="text"],
.modal-content input[type="date"],
.modal-content input[type="password"] {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    color: var(--ink);
}

.field-row { display: flex; gap: 10px; }
.field-row label { flex: 1; }

.hint { font-size: 0.78rem; color: var(--muted); margin: -4px 0 10px; }
.hint-inline { font-weight: 400; color: var(--muted); }

.form-error {
    color: var(--danger);
    font-size: 0.85rem;
    background: #fdecea;
    padding: 6px 10px;
    border-radius: 6px;
}
.form-error[hidden] { display: none; }

.modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.spacer { flex: 1; }

/* --- Kaartweergave --- */
.map-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--panel);
}

.map-canvas {
    width: 100%;
    height: 100%;
    min-height: 320px;
}

.map-empty {
    padding: 24px;
    color: var(--muted);
}

/* --- Party --- */
.party-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    overflow: auto;
}

.party-details {
    margin: 0;
    font-size: 1.1rem;
}

.party-details dt {
    font-weight: 600;
    color: var(--muted);
    margin-top: 12px;
}

.party-details dt:first-child {
    margin-top: 0;
}

.party-details dd {
    margin: 2px 0 0;
}

.party-dresscode-img {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* AdvancedMarkerElement ankert standaard op het bottom-center punt van de
   hele content-box. .map-pin's eigen box (16x8px) is daarom precies zo groot
   dat dat ankerpunt in het midden van het oranje bolletje valt, niet ergens
   tussen bolletje en label — de dot en het label hangen daaromheen los
   gepositioneerd (position: absolute), zodat ze de box niet vergroten. */
.map-pin {
    position: relative;
    width: 16px;
    height: 8px;
    cursor: pointer;
}

.map-pin-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e8842a;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Meerdere personen op dezelfde locatie krijgen één bolletje met hun namen
   onder elkaar gestapeld, in plaats van overlappende losse markers. Het
   bovenste label ligt verticaal in het midden van het bolletje (top: 8px
   samen met margin-top: -9px, de helft van een label's vaste hoogte van
   18px), en de rest loopt daaronder naar beneden. */
.map-pin-labels {
    position: absolute;
    left: 20px;
    top: 8px;
    margin-top: -9px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.map-pin-label {
    background: #fff;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 14px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.map-infowindow { font-size: 0.85rem; }
.map-infowindow strong { display: block; margin-bottom: 2px; }
.map-infowindow p { margin: 2px 0; color: var(--muted); }
.map-infowindow-person + .map-infowindow-person {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.map-infowindow-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--accent-dark);
    font-weight: 600;
    text-decoration: none;
}

/* Locatie-popup in de agendaweergave: zelfde inhoud/opmaak (.map-infowindow*
   klassen) als de InfoWindow op de kaartweergave, maar als los bolletje
   i.p.v. via de Google Maps InfoWindow-widget (die pas werkt met een
   geladen kaart eronder). */
.location-popup {
    position: absolute;
    z-index: 60;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    max-width: 240px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.map-infowindow-link:hover { text-decoration: underline; }

#placePickerWrap gmp-place-autocomplete {
    display: block;
    margin-top: 4px;
}

@media (max-width: 640px) {
    :root { --name-col-width: 155px; --day-col-width: 32px; }
    .toolbar h1 { font-size: 1.1rem; }
    table.calendar th.corner { padding-left: 6px; }
    .name-cell-inner { padding-left: 6px; }
    body { padding-left: 0; padding-right: 0; }
    .toolbar { padding-left: 16px; padding-right: 16px; }
    .calendar-wrapper { border-left: none; border-right: none; border-radius: 0; }
}