/* =============================================================================
   Connected Haarlem — huurdersportaal
   Kleuren uit www.connectedhaarlem.nl: turquoise #13b4c6 (donker #0c7580),
   antraciet #242424, grijs #767676. Font Rubik (zelfde als de website).
   Zakelijk maar zacht: veel wit, ronde kaarten, turquoise accenten.
   ============================================================================= */
:root {
    --ch-teal: #13b4c6;
    --ch-teal-dark: #0c7580;
    --ch-teal-soft: #e6f7f9;
    --ch-teal-softer: #f2fafb;
    --ch-ink: #242424;
    --ch-muted: #767676;
    --ch-line: #e3eef0;
    --ch-bg: #f6fbfc;
    --ch-warn: #f4a531;
    --ch-danger: #d64545;
    --ch-radius: 14px;
    --ch-shadow: 0 2px 12px rgba(19, 180, 198, .08), 0 1px 3px rgba(0, 0, 0, .04);
}

html, body.portal { background: var(--ch-bg); color: var(--ch-ink); font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
body.portal { display: flex; flex-direction: column; min-height: 100vh; }
.portal-main { flex: 1; padding: 1.6rem 1rem 2.5rem; }
a { color: var(--ch-teal-dark); }
a:hover { color: var(--ch-teal); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.55rem; margin-bottom: 1rem; }
h2 { font-size: 1.15rem; }

/* Header */
.portal-header { background: #fff; border-bottom: 1px solid var(--ch-line); padding: .55rem 0; position: sticky; top: 0; z-index: 1030; }
.portal-brand img { height: 42px; width: auto; display: block; }
.portal-nav { display: flex; gap: .25rem; margin-left: 1.25rem; }
.portal-nav a, .portal-mobile-nav a { color: var(--ch-ink); text-decoration: none; padding: .45rem .8rem; border-radius: 999px; font-weight: 500; font-size: .93rem; display: inline-flex; align-items: center; gap: .4rem; }
.portal-nav a:hover { background: var(--ch-teal-softer); color: var(--ch-teal-dark); }
.portal-nav a.active { background: var(--ch-teal-soft); color: var(--ch-teal-dark); }
.portal-mobile-nav a { display: flex; padding: .7rem .9rem; font-size: 1.02rem; }
.portal-mobile-nav a.active { background: var(--ch-teal-soft); color: var(--ch-teal-dark); }
.portal-burger { font-size: 1.5rem; color: var(--ch-ink); padding: 0 .25rem; }
.lang-toggle { text-decoration: none; font-size: .78rem; letter-spacing: .06em; color: var(--ch-muted); border: 1px solid var(--ch-line); border-radius: 999px; padding: .25rem .6rem; }
.lang-toggle .on { color: var(--ch-teal-dark); font-weight: 600; }
.lang-toggle .sep { margin: 0 .3rem; opacity: .4; }
.lang-toggle:hover { border-color: var(--ch-teal); }

/* Footer */
.portal-footer { border-top: 1px solid var(--ch-line); padding: 1.2rem 1rem; font-size: .88rem; color: var(--ch-muted); background: #fff; }

/* Cards */
.pcard { background: #fff; border-radius: var(--ch-radius); box-shadow: var(--ch-shadow); padding: 1.25rem 1.35rem; border: 1px solid rgba(19,180,198,.06); }
.pcard + .pcard { margin-top: 1rem; }
.pcard-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ch-muted); font-weight: 600; margin-bottom: .75rem; }
.pcard-hero { background: linear-gradient(135deg, #ffffff 0%, var(--ch-teal-softer) 100%); }

/* Buttons */
.btn-teal { background: var(--ch-teal); border-color: var(--ch-teal); color: #fff; border-radius: 999px; padding: .5rem 1.25rem; font-weight: 500; }
.btn-teal:hover, .btn-teal:focus { background: var(--ch-teal-dark); border-color: var(--ch-teal-dark); color: #fff; }
.btn-teal:disabled { background: #a9dfe6; border-color: #a9dfe6; }
.btn-outline-teal { border: 1px solid var(--ch-teal); color: var(--ch-teal-dark); border-radius: 999px; padding: .45rem 1.1rem; background: #fff; font-weight: 500; }
.btn-outline-teal:hover { background: var(--ch-teal-soft); color: var(--ch-teal-dark); border-color: var(--ch-teal-dark); }
.btn-soft { background: var(--ch-teal-softer); border: 1px solid var(--ch-line); color: var(--ch-ink); border-radius: 999px; }
.btn-soft:hover { background: var(--ch-teal-soft); }
.btn-outline-danger { border-radius: 999px; }
.btn-danger { border-radius: 999px; }
.btn-sm { border-radius: 999px; }

/* Forms */
.form-control, .form-select { border-radius: 10px; border-color: var(--ch-line); padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--ch-teal); box-shadow: 0 0 0 .2rem rgba(19,180,198,.15); }
.form-label { font-weight: 500; font-size: .9rem; }
.form-text { color: var(--ch-muted); }
.form-check-input:checked { background-color: var(--ch-teal); border-color: var(--ch-teal); }

/* Alerts / badges */
.alert-teal { background: var(--ch-teal-soft); border: 1px solid rgba(19,180,198,.3); color: var(--ch-teal-dark); border-radius: 12px; }
.alert { border-radius: 12px; }
.badge-soft { background: var(--ch-teal-soft); color: var(--ch-teal-dark); font-weight: 500; border-radius: 999px; padding: .3em .7em; }
.badge-warn { background: #fff3df; color: #8a5a00; font-weight: 500; border-radius: 999px; padding: .3em .7em; }
.badge-muted { background: #eef1f2; color: var(--ch-muted); font-weight: 500; border-radius: 999px; padding: .3em .7em; }
.badge-danger { background: #fde8e8; color: #9b2c2c; font-weight: 500; border-radius: 999px; padding: .3em .7em; }
.badge-ok { background: #e6f6ee; color: #1f6f43; font-weight: 500; border-radius: 999px; padding: .3em .7em; }

/* Auth pages */
.auth-wrap { max-width: 460px; margin: 2rem auto; }
.auth-wrap .pcard { padding: 2rem; }
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-logo img { height: 64px; }

/* Booking list */
.booking-row { display: grid; grid-template-columns: 62px 1fr auto; gap: .9rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--ch-line); }
.booking-row:last-child { border-bottom: none; }
.booking-date { text-align: center; background: var(--ch-teal-softer); border-radius: 10px; padding: .4rem .2rem; line-height: 1.1; }
.booking-date .d { font-size: 1.35rem; font-weight: 600; color: var(--ch-teal-dark); }
.booking-date .m { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ch-muted); }
.booking-row.cancelled .booking-main { text-decoration: line-through; opacity: .55; }
.booking-main { font-weight: 500; }
.booking-sub { font-size: .85rem; color: var(--ch-muted); }

/* Stats */
.stat { display: flex; align-items: baseline; gap: .5rem; }
.stat .n { font-size: 1.8rem; font-weight: 600; color: var(--ch-teal-dark); }
.stat .l { color: var(--ch-muted); font-size: .9rem; }

/* Timeline of changes */
.change-row { display: flex; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--ch-line); align-items: flex-start; }
.change-row:last-child { border-bottom: none; }
.change-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ch-teal-soft); color: var(--ch-teal-dark); flex-shrink: 0; }
.change-ico.undone { background: #eef1f2; color: var(--ch-muted); }

/* Door display preview */
.door-preview { background: #0d1b1e; color: #fff; border-radius: 16px; padding: 1.1rem 1.2rem; max-width: 420px; font-family: 'Rubik', sans-serif; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.door-preview .room { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #7fd7e2; }
.door-preview .time { font-size: 1.05rem; color: #cfe9ed; margin-top: .25rem; }
.door-preview .name { font-size: 1.6rem; font-weight: 600; line-height: 1.15; margin-top: .3rem; word-break: break-word; }
.door-preview .title { font-size: 1rem; color: #b8dde3; margin-top: .15rem; min-height: 1.4em; }
.door-preview .next { border-top: 1px solid rgba(255,255,255,.1); margin-top: .9rem; padding-top: .7rem; font-size: .85rem; color: #9fc6cc; }
.door-preview.day { background: #f4fbfc; color: var(--ch-ink); box-shadow: inset 0 0 0 1px var(--ch-line); }
.door-preview.day .room { color: var(--ch-teal-dark); }
.door-preview.day .time { color: var(--ch-muted); }
.door-preview.day .title { color: #4d6a6f; }
.door-preview.day .next { border-color: var(--ch-line); color: var(--ch-muted); }

/* Calendar */
.pcal-layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; min-height: 70vh; }
.pcal-side { display: flex; flex-direction: column; gap: 1rem; }
.pcal-main { min-width: 0; }
.pcal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.pcal-toolbar .title { font-weight: 600; font-size: 1.05rem; margin: 0 .5rem; }
.view-switch { display: inline-flex; border: 1px solid var(--ch-line); border-radius: 999px; overflow: hidden; background: #fff; }
.view-switch button { border: none; background: #fff; padding: .35rem .85rem; font-size: .85rem; color: var(--ch-ink); }
.view-switch button.active { background: var(--ch-teal); color: #fff; }
.room-toggle { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; cursor: pointer; font-size: .92rem; }
.room-toggle input { accent-color: var(--ch-teal); }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend { font-size: .85rem; color: var(--ch-muted); display: flex; flex-direction: column; gap: .35rem; }
.legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: .4rem; }
.fc { --fc-border-color: var(--ch-line); --fc-today-bg-color: var(--ch-teal-softer); --fc-now-indicator-color: var(--ch-teal); font-size: .88rem; }
.fc .fc-timegrid-slot { height: 1.55em; }
.fc .fc-col-header-cell-cushion { color: var(--ch-ink); text-decoration: none; font-weight: 500; padding: 6px 4px; }
.fc .fc-timegrid-slot-label-cushion { color: var(--ch-muted); font-size: .75rem; }
.fc-event { border: none !important; border-radius: 6px !important; padding: 2px 5px !important; font-size: .78rem; cursor: pointer; }
.fc-event.ev-busy { background: var(--room-tint, #d9dfe1) !important; border-left: 4px solid var(--room, #9fb0b5) !important; cursor: default; }
/* FullCalendar zet de tekstkleur op .fc-event-main (default wit) — voor de lichte tint moet die donker */
.fc-event.ev-busy, .fc-event.ev-busy .fc-event-main { color: #3c4b4f !important; }
.legend .sw-busy { background: var(--room-tint); border-left: 4px solid var(--room); border-radius: 3px 4px 4px 3px; }
.fc-event.ev-mine { color: #fff !important; }
.fc-event.ev-sub { }
.fc-event .fc-event-title { font-weight: 500; }
.fc .fc-highlight { background: rgba(19,180,198,.18); }
.pcal-hint { font-size: .85rem; color: var(--ch-muted); }

/* Modals */
.modal-content { border-radius: 16px; border: none; }
.modal-header { border-bottom: 1px solid var(--ch-line); }
.modal-footer { border-top: 1px solid var(--ch-line); }
.preview-box { background: var(--ch-teal-softer); border-left: 4px solid var(--ch-teal); border-radius: 10px; padding: .8rem 1rem; font-size: .92rem; }
.preview-box.warn { background: #fff8ec; border-left-color: var(--ch-warn); }
.preview-box.bad { background: #fdf0f0; border-left-color: var(--ch-danger); }
.preview-box .cost { font-weight: 600; font-size: 1.05rem; }
.slot-buttons .btn { border-radius: 999px; }
.pay-options { display: flex; flex-direction: column; gap: .4rem; }
.pay-option { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--ch-line); border-radius: 10px; padding: .55rem .75rem; cursor: pointer; font-size: .9rem; background: #fff; }
.pay-option:hover { border-color: var(--ch-teal); }
/* Twee losse regels: een selector-lijst met :has() wordt in oudere browsers in z'n geheel genegeerd. */
.pay-option.active { border-color: var(--ch-teal); background: var(--ch-teal-softer); }
.pay-option:has(input:checked) { border-color: var(--ch-teal); background: var(--ch-teal-softer); }
.pay-option input { margin-top: .2rem; accent-color: var(--ch-teal); flex-shrink: 0; }

/* Tables */
.ptable { width: 100%; }
.ptable th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ch-muted); font-weight: 600; border-bottom: 1px solid var(--ch-line); padding: .5rem .6rem; }
.ptable td { padding: .65rem .6rem; border-bottom: 1px solid var(--ch-line); vertical-align: middle; }
.ptable tr:last-child td { border-bottom: none; }

@media (max-width: 991px) {
    .pcal-layout { grid-template-columns: 1fr; }
    .pcal-side { order: 2; }
    .portal-brand img { height: 36px; }
}
@media (max-width: 575px) {
    .portal-main { padding: 1rem .75rem 2rem; }
    .pcard { padding: 1rem; }
    .booking-row { grid-template-columns: 54px 1fr; }
    .booking-row .booking-actions { grid-column: 1 / -1; }
}