/* ==========================================================================
   Jeffrey Kuipers — Smartsoul thema
   Palet (afgeleid van de warme podiumverlichting in de hero-beelden):
   --paars-diep   #241230  achtergrond, als een donkere zaal
   --paars-zacht  #3a2249  panelen
   --amber        #e0a94e  spotlight-accent (CTA)
   --roze-warm    #c96f5a  tweede accent
   --creme        #f6e8d0  tekst op donker
   --inkt         #2a2030  tekst op licht
   ========================================================================== */

:root {
    --paars-diep: #241230;
    --paars-zacht: #3a2249;
    --amber: #e0a94e;
    --roze-warm: #c96f5a;
    --creme: #f6e8d0;
    --inkt: #2a2030;
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Outfit", "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .setlist-track { animation: none !important; }
}

body {
    font-family: var(--font-body);
    background: var(--paars-diep);
    color: var(--creme);
}

/* ===== Navigatie ===== */
.site-nav {
    background: rgba(36, 18, 48, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(224, 169, 78, 0.25);
}
.site-nav .navbar-item { color: var(--creme); background: transparent !important; }
.site-nav .navbar-item:hover { color: var(--amber); }
.site-nav .brand-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--amber);
}
.site-nav .navbar-burger { color: var(--creme); }
.site-nav .navbar-menu.is-active {
    background: var(--paars-diep);
    border-top: 1px solid rgba(224, 169, 78, 0.25);
}

/* ===== Knoppen ===== */
.cta-button {
    background: var(--amber);
    color: var(--paars-diep);
    border: none;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-button:hover {
    background: #eebb63;
    color: var(--paars-diep);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(224, 169, 78, 0.35);
}
.cta-button:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }

/* ===== Hero ===== */
.site-hero {
    position: relative;
    background:
        linear-gradient(180deg, rgba(36,18,48,0.55) 0%, rgba(36,18,48,0.35) 45%, rgba(36,18,48,0.92) 100%),
        url("../images/hero-achtergrond.jpg") center / cover no-repeat,
        radial-gradient(ellipse at 50% 20%, #4a2c5e 0%, var(--paars-diep) 70%);
}
.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-size: 0.8rem;
    color: var(--amber);
}
.hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(3.5rem, 12vw, 8rem);
    line-height: 0.95;
    color: var(--creme);
    margin: 1rem 0;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}
.hero-tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    color: var(--creme);
    opacity: 0.9;
}
.hero-actions { margin-top: 2.25rem; }

/* Setlist-strip: doorlopende songtitels als handtekening van de pagina */
.setlist-strip {
    overflow: hidden;
    border-top: 1px solid rgba(224, 169, 78, 0.35);
    border-bottom: 1px solid rgba(224, 169, 78, 0.35);
    background: rgba(36, 18, 48, 0.6);
    padding: 0.7rem 0;
}
.setlist-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    white-space: nowrap;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--amber);
    animation: setlist-scroll 40s linear infinite;
}
@keyframes setlist-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ===== Secties ===== */
.side-section { padding: 5rem 1.5rem; }
.alt-section { background: var(--paars-zacht); }

.side-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--roze-warm);
    margin-bottom: 0.75rem;
}
.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--creme);
    line-height: 1.1;
}
.section-body { color: rgba(246, 232, 208, 0.85); font-size: 1.05rem; }
.section-body a { color: var(--amber); text-decoration: underline; }
.section-body strong, .section-body em { color: var(--creme); }

/* Portret */
.portrait-frame {
    border-radius: 18px;
    overflow: hidden;
    background: radial-gradient(circle at 30% 20%, #55346b, var(--paars-zacht));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.portrait-frame img { display: block; width: 100%; }

/* Video's */
.video-frame {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.video-frame iframe { border: 0; }

/* Fotogrid */
.photo-tile {
    border-radius: 12px;
    overflow: hidden;
}
.photo-tile img {
    object-fit: cover;
    transition: transform 0.3s ease;
}
.photo-tile:hover img { transform: scale(1.04); }

/* Spotify */
.spotify-wrap iframe { border-radius: 14px; border: 0; }

/* ===== Boekingssectie ===== */
.booking-section {
    background:
        linear-gradient(180deg, var(--paars-diep) 0%, #1b0d24 100%);
}
/* Site bestaat alleen uit de boekingssectie */
.booking-only {
    min-height: 100vh;
    min-height: 100dvh; /* correcte hoogte op telefoons met adresbalk */
    display: flex;
    align-items: center;
    padding: 4rem 1.5rem;
    /* Sfeerfoto van Jeffrey live, onder een stevige donkerpaarse laag
       zodat de crème tekst en het formulier goed leesbaar blijven */
    background:
        linear-gradient(180deg, rgba(36, 18, 48, 0.92) 0%, rgba(36, 18, 48, 0.84) 45%, rgba(27, 13, 36, 0.95) 100%),
        url("../images/achtergrond.jpg") center / cover no-repeat,
        linear-gradient(180deg, var(--paars-diep) 0%, #1b0d24 100%);
}
.booking-only > .container { width: 100%; max-width: 1200px; }

/* Productkaarten met transparante prijzen */
.product-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    border: 2px solid rgba(246, 232, 208, 0.2);
    background: rgba(246, 232, 208, 0.04);
    cursor: pointer;
    height: 100%;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.product-card:hover { border-color: rgba(224, 169, 78, 0.6); }
.product-card.is-selected {
    border-color: var(--amber);
    background: rgba(224, 169, 78, 0.1);
}
.product-card input { position: absolute; opacity: 0; }
.product-duration {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--roze-warm);
}
.product-name { color: var(--creme); font-weight: 500; }
.product-price {
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: var(--amber);
    line-height: 1.1;
}
.product-vat { font-size: 0.75rem; color: rgba(246, 232, 208, 0.55); }

.deposit-note {
    background: rgba(224, 169, 78, 0.1);
    border: 1px dashed rgba(224, 169, 78, 0.5);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    color: var(--creme);
    margin-bottom: 1.25rem;
}

/* Bulma kleurt <strong> standaard donker; op onze donkere vlakken moet hij crème zijn */
.booking-section strong,
.decide-page strong,
.deposit-note strong {
    color: var(--creme);
}

.client-toggle .radio { color: var(--creme); margin-right: 1rem; }

/* Zakelijk gegevensblok in het boekingsformulier */
.business-block {
    border: 1px dashed rgba(224, 169, 78, 0.45);
    border-radius: 12px;
    padding: 1rem 1.1rem 0.75rem;
    background: rgba(224, 169, 78, 0.05);
}
.business-title {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--amber);
    margin-bottom: 0.75rem;
}

/* Toelichting onder een veld + legenda voor verplichte velden */
.field-hint { color: rgba(246, 232, 208, 0.55) !important; }
.required-legend {
    font-size: 0.8rem;
    color: rgba(246, 232, 208, 0.55);
    margin-bottom: 1rem;
}

.steps-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--creme);
    margin-bottom: 0.4rem !important;
}

/* Handtekening voor de persoonlijke touch */
.signature-block { margin-top: 1.75rem; }
.signature-img { max-width: 180px; display: block; margin-bottom: 0.25rem; }
.signature-line {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--amber);
    margin-bottom: 0 !important;
}
.signature-name { color: rgba(246, 232, 208, 0.7); }

/* Nette uitlijning van het formulierraster */
.booking-form .field { margin-bottom: 0; }
.booking-form .label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet (o.a. iPad portret): intro boven het formulier, ruimte ertussen */
@media (max-width: 1023px) {
    .booking-intro { margin-bottom: 1rem; }
    .booking-only { align-items: flex-start; padding: 3rem 1.25rem; }
}

/* Telefoon: compacter, grotere tikdoelen, geen zoom-inspring op iOS */
@media (max-width: 768px) {
    .booking-only { padding: 2rem 1rem 3rem; }
    .booking-form .input,
    .booking-form .textarea,
    .booking-form .select select { font-size: 16px; } /* voorkomt inzoomen op iPhone */
    .booking-form .button.is-large { font-size: 1.15rem; }
    .booking-steps { margin: 0.75rem 0; }
}
.booking-steps { display: flex; flex-direction: column; gap: 0.35rem; }
.booking-steps span { color: var(--amber); font-weight: 500; }

.booking-form .label { color: var(--creme); font-weight: 500; }
.booking-form .input,
.booking-form .textarea,
.booking-form .select select {
    background: rgba(246, 232, 208, 0.06);
    border-color: rgba(246, 232, 208, 0.25);
    color: var(--creme);
    border-radius: 10px;
}
.booking-form .input::placeholder,
.booking-form .textarea::placeholder { color: rgba(246, 232, 208, 0.4); }
.booking-form .input:focus,
.booking-form .textarea:focus,
.booking-form .select select:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 2px rgba(224, 169, 78, 0.3);
}
.booking-form input[type="date"],
.booking-form input[type="time"] { color-scheme: dark; }

/* Het uitgeklapte keuzemenu van de browser heeft een lichte achtergrond;
   opties moeten daar donker zijn, anders zijn ze onleesbaar */
.booking-form .select select option,
.decide-form .select select option {
    color: var(--inkt);
    background: #fff;
}
.booking-success { border-radius: 12px; }

/* ===== Beslispagina (Jeffrey, mobiel) ===== */
.decide-page { min-height: 100vh; padding-top: 4rem; }
.decide-container { max-width: 640px; }
.decide-box, .propose-box {
    display: block;
    width: 100%;
    background: var(--paars-zacht);
    color: var(--creme);
    border-radius: 14px;
    box-shadow: none;
    padding: 1.5rem;
    margin-left: 0;
    margin-right: 0;
}
.decide-table th { color: var(--roze-warm); border: none; width: 34%; }
.decide-table td { color: var(--creme); border-color: rgba(246, 232, 208, 0.12); }
.decide-table { background: transparent; }
.decide-form .label { color: var(--creme); }
.decide-form .textarea, .decide-form .input {
    background: rgba(246, 232, 208, 0.06);
    border-color: rgba(246, 232, 208, 0.25);
    color: var(--creme);
}
.decide-form input[type="date"],
.decide-form input[type="time"] { color-scheme: dark; }
.decide-buttons { flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; }
.propose-box { border: 1px dashed rgba(224, 169, 78, 0.5); }
.propose-box p { color: var(--creme); }

/* ===== Footer ===== */
.site-footer {
    background: #170a1f;
    padding: 3rem 1.5rem 2rem;
    border-top: 1px solid rgba(224, 169, 78, 0.2);
}
.footer-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--amber);
}
.footer-socials { margin: 1rem 0; display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.footer-socials a { color: var(--creme); }
.footer-socials a:hover { color: var(--amber); }
.footer-contact, .footer-contact a { color: rgba(246, 232, 208, 0.7); }
.footer-contact a { text-decoration: underline; }
.footer-copy { margin-top: 1rem; font-size: 0.8rem; color: rgba(246, 232, 208, 0.4); }

/* ===== Chatbot (Jeffreys AI-assistent) ===== */
.chat-widget {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}
.chat-toggle {
    background: var(--amber);
    color: var(--paars-diep);
    border: none;
    border-radius: 999px;
    padding: 0.8rem 1.4rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease;
}
.chat-toggle:hover { transform: translateY(-2px); }
.chat-panel {
    width: min(360px, calc(100vw - 2.5rem));
    background: var(--paars-zacht);
    border: 1px solid rgba(246, 232, 208, 0.15);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.chat-head {
    padding: 0.9rem 1.1rem 0.75rem;
    border-bottom: 1px solid rgba(246, 232, 208, 0.12);
}
.chat-title {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--amber);
    font-size: 1.1rem;
}
.chat-sub { font-size: 0.72rem; color: rgba(246, 232, 208, 0.6); }
.chat-log {
    padding: 0.9rem 1rem;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.chat-msg {
    max-width: 85%;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.45;
    white-space: pre-line;
}
.chat-msg-bot {
    background: rgba(246, 232, 208, 0.08);
    color: var(--creme);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.chat-msg-user {
    background: var(--amber);
    color: var(--paars-diep);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.chat-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid rgba(246, 232, 208, 0.12);
}
.chat-form .input {
    background: rgba(246, 232, 208, 0.06);
    border-color: rgba(246, 232, 208, 0.25);
    color: var(--creme);
    font-size: 16px;
}
.chat-form .button { flex-shrink: 0; }
@media (max-width: 768px) {
    .chat-widget { left: 0.75rem; bottom: 0.75rem; }
    .chat-log { max-height: 45vh; }
}


/* ===== Admin-agenda met pendel-kleuren ===== */
.agenda-month {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--cream);
}
.agenda-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.agenda-dow {
    text-align: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(246, 232, 208, 0.55);
    padding-bottom: 4px;
}
.agenda-day {
    min-height: 92px;
    background: rgba(58, 34, 73, 0.55);
    border: 1px solid rgba(246, 232, 208, 0.08);
    border-radius: 8px;
    padding: 6px;
}
.agenda-day.is-other-month { opacity: 0.35; }
.agenda-day.is-today { border-color: var(--amber); }
.agenda-day.is-blocked { background: rgba(201, 111, 90, 0.18); }
.agenda-daynum {
    font-size: 0.75rem;
    color: rgba(246, 232, 208, 0.6);
    margin-bottom: 4px;
}
.agenda-blocked-label {
    font-size: 0.68rem;
    color: var(--rose);
    margin-bottom: 4px;
}
.agenda-chip {
    display: block;
    font-size: 0.7rem;
    line-height: 1.3;
    border-radius: 6px;
    padding: 3px 6px;
    margin-bottom: 3px;
    color: #1d0f26;
    text-decoration: none;
}
.agenda-chip:hover { filter: brightness(1.1); color: #1d0f26; }
.chip-green, .chip-free { background: #79c98d; }
.chip-orange { background: #e0a94e; }
.chip-red { background: #d96a5a; }
.chip-unknown { background: #b6a8c4; }
.chip-pending { background: rgba(246, 232, 208, 0.45); }
.pendel-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: baseline;
    margin-right: 4px;
}
.dot-green { background: #79c98d; }
.dot-orange { background: #e0a94e; }
.dot-red { background: #d96a5a; }
.dot-unknown { background: #b6a8c4; }
.dot-pending { background: rgba(246, 232, 208, 0.45); }

/* Pendel-analyse op de beslispagina */
.pendel-box {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 1.25rem 0;
    border: 1px solid transparent;
}
.pendel-box.p-green { background: rgba(121, 201, 141, 0.12); border-color: rgba(121, 201, 141, 0.4); }
.pendel-box.p-orange { background: rgba(224, 169, 78, 0.12); border-color: rgba(224, 169, 78, 0.45); }
.pendel-box.p-red { background: rgba(217, 106, 90, 0.14); border-color: rgba(217, 106, 90, 0.5); }
.pendel-box.p-unknown { background: rgba(182, 168, 196, 0.12); border-color: rgba(182, 168, 196, 0.4); }
.pendel-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}
.p-green .pendel-title { color: #79c98d; }
.p-orange .pendel-title { color: var(--amber); }
.p-red .pendel-title { color: #d96a5a; }
.p-unknown .pendel-title { color: #b6a8c4; }


/* ===== Contrast-vangnet — leesbaarheid op alle vlakken ===== */

/* Bulma zet labels, titels en hulpteksten standaard donkergrijs;
   op onze donkere vlakken (agenda, admin-login, dashboard) is dat onleesbaar */
.decide-page .label,
.booking-section .label { color: var(--creme); }
.decide-page .help:not(.is-danger):not(.is-success):not(.is-warning):not(.is-info) {
    color: rgba(246, 232, 208, 0.65);
}
.has-text-grey { color: rgba(246, 232, 208, 0.65) !important; }

/* Kale invoervelden op admin- en portaalpagina's in dezelfde donkere stijl
   als het boekingsformulier (voorheen witte Bulma-velden) */
.decide-page .input,
.decide-page .textarea,
.decide-page .select select {
    background: rgba(246, 232, 208, 0.06);
    border-color: rgba(246, 232, 208, 0.25);
    color: var(--creme);
}
.decide-page .input::placeholder,
.decide-page .textarea::placeholder { color: rgba(246, 232, 208, 0.4); }
.decide-page input[type="date"],
.decide-page input[type="time"] { color-scheme: dark; }

/* Chrome/Safari-autofill kleurde velden lichtgeel terwijl de tekst crème
   bleef: beige op (bijna) wit. Dit dwingt donkere vulling + crème tekst af. */
.booking-form .input:-webkit-autofill,
.booking-form .textarea:-webkit-autofill,
.decide-page .input:-webkit-autofill,
.decide-page .textarea:-webkit-autofill,
.chat-form .input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #35204a inset;
    -webkit-text-fill-color: var(--creme);
    caret-color: var(--creme);
}

/* Het witte factuurvel: dáár moet juist alles donker zijn, ook <strong>
   (die kreeg via .decide-page strong de crèmekleur: beige op wit) */
.invoice-sheet { background: #fff; color: #2a2030; border-radius: 14px; }
.invoice-sheet strong,
.invoice-sheet p,
.invoice-sheet .table,
.invoice-sheet .table th,
.invoice-sheet .table td { color: #2a2030 !important; }
.invoice-sheet .table { background: transparent; }
.invoice-sheet .table th,
.invoice-sheet .table td { border-color: #e3dcd2; }

/* Afdrukken (factuur "Afdrukken / PDF"): achtergronden printen niet mee,
   dus alles zwart op wit en de sierelementen verbergen */
@media print {
    body { background: #fff !important; color: #1d1d1d !important; }
    .site-nav, .site-footer, .chat-widget, .buttons, .side-label { display: none !important; }
    .decide-page { padding-top: 0 !important; }
    .invoice-sheet { box-shadow: none !important; }
    .decide-page .label, .section-title, .section-body,
    .decide-table th, .decide-table td { color: #1d1d1d !important; }
}


/* Eigen afspraken van de artiest in de agenda */
.chip-eigen {
    background: rgba(246, 232, 208, 0.1);
    border: 1px dashed rgba(224, 169, 78, 0.6);
    color: var(--creme);
    cursor: default;
}
.chip-eigen strong { color: var(--amber); }
.chip-eigen-dag { border-style: solid; background: rgba(224, 169, 78, 0.16); }
.dot-eigen {
    background: rgba(246, 232, 208, 0.1);
    border: 1px dashed rgba(224, 169, 78, 0.8);
}
.agenda-chip.chip-blocked { background: #d96a5a; }


/* ===== Huisstijl als standaard voor ALLE onderdelen (fase 4.5.1) =====
   Referentie: het notitieveld in de agenda — donker vlak, crème letters,
   gedempte placeholder. Dat geldt nu overal; alleen het witte factuurvel
   (.invoice-sheet) houdt bewust donkere tekst op wit. */

.input, .textarea, .select select {
    background: rgba(246, 232, 208, 0.06);
    border-color: rgba(246, 232, 208, 0.25);
    color: var(--creme);
}
.input::placeholder, .textarea::placeholder { color: rgba(246, 232, 208, 0.4); }
.input:focus, .textarea:focus, .select select:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 2px rgba(224, 169, 78, 0.25);
}
input[type="date"], input[type="time"] { color-scheme: dark; }
.select select option { background: #fff; color: #241230; }
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--amber); }

.label { color: var(--creme); }
.checkbox, .radio { color: rgba(246, 232, 208, 0.8); }
.checkbox:hover, .radio:hover { color: var(--creme); }
.help:not(.is-danger):not(.is-success):not(.is-warning):not(.is-info) {
    color: rgba(246, 232, 208, 0.65);
}

/* Alle tabellen in de donkere stijl (zoals decide-table) */
.table { background: transparent; color: var(--creme); }
.table th { color: var(--amber); border-color: rgba(246, 232, 208, 0.15); }
.table td { color: var(--creme); border-color: rgba(246, 232, 208, 0.12); vertical-align: middle; }
.table thead th { color: var(--amber); }

/* Codeblokjes (zoals API-sleutels) */
code { background: rgba(246, 232, 208, 0.08); color: var(--creme); border-radius: 6px; }

/* Autofill overal afdwingen, niet alleen op formulierpagina's */
.input:-webkit-autofill, .textarea:-webkit-autofill, .select select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #35204a inset;
    -webkit-text-fill-color: var(--creme);
    caret-color: var(--creme);
}

/* Uitzondering: het witte factuurvel houdt donkere tekst op wit */
.invoice-sheet .table th { color: #6a5a45 !important; }


/* ===== Fase 4.5.2 — Bulma 1.x dark-mode-botsing opgelost =====
   data-theme="light" op <html> legt Bulma's automatische dark mode stil
   (die botste met onze eigen donkere huisstijl op apparaten in donkere modus).
   Daarnaast de twee betrapte componenten expliciet in huisstijl: */

.tag.is-light {
    background: rgba(246, 232, 208, 0.12);
    color: var(--creme);
}
.button.is-outlined.is-light {
    background: transparent;
    border-color: rgba(246, 232, 208, 0.45);
    color: var(--creme);
}
.button.is-outlined.is-light:hover,
.button.is-outlined.is-light:focus {
    background: rgba(246, 232, 208, 0.12);
    border-color: var(--creme);
    color: var(--creme);
}