/* ---- Heartcry — professionele laag bovenop MudBlazor ----
   Officiële huisstijl: donkerblauw #041c5b, tussenblauw #3c447b, lichtblauw #747ba3, oranje #db5c14. */
:root {
    --hc-navy: #041c5b;
    --hc-navy-2: #3c447b;
    --hc-blue-light: #747ba3;
    --hc-accent: #db5c14;
    --hc-accent-2: #e8792f;

    /* MudBlazor-lettertype overschrijven (raakt de icon-fonts niet) */
    --mud-typography-default-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --mud-typography-h1-family: 'Plus Jakarta Sans', sans-serif;
    --mud-typography-h2-family: 'Plus Jakarta Sans', sans-serif;
    --mud-typography-h3-family: 'Plus Jakarta Sans', sans-serif;
    --mud-typography-h4-family: 'Plus Jakarta Sans', sans-serif;
    --mud-typography-h5-family: 'Plus Jakarta Sans', sans-serif;
    --mud-typography-h6-family: 'Plus Jakarta Sans', sans-serif;
    --mud-typography-subtitle1-family: 'Plus Jakarta Sans', sans-serif;
    --mud-typography-subtitle2-family: 'Plus Jakarta Sans', sans-serif;
    --mud-typography-body1-family: 'Plus Jakarta Sans', sans-serif;
    --mud-typography-body2-family: 'Plus Jakarta Sans', sans-serif;
    --mud-typography-button-family: 'Plus Jakarta Sans', sans-serif;
    --mud-typography-caption-family: 'Plus Jakarta Sans', sans-serif;
}

/* Eén lettertype overal: MudBlazor-componenten krijgen Jakarta via de --mud-typography-*-variabelen,
   maar plain HTML (body-tekst, links) en form-elementen (input/button/select) erven dat niet vanzelf.
   Daarom hier expliciet op body + form-controls, zodat de topbalk en alles eromheen gelijk oogt. */
body { background: #e6ebf6; font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; }
input, button, textarea, select, .mud-input-slot, .mud-button-root {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

/* Achtergrond met duidelijke diepte: een warme oranje gloed rechtsboven + koele navy-gloed linksboven
   over een licht verloop, plus een héél fijne stip-textuur. Rustig maar niet vlak meer. */
.mud-main-content {
    background-color: #eaf0fa;
    background-image:
        radial-gradient(60% 55% at 100% 0%, rgba(232,72,43,.30), transparent 62%),
        radial-gradient(58% 60% at 0% 6%, rgba(23,35,63,.30), transparent 60%),
        radial-gradient(55% 55% at 50% 118%, rgba(88,113,224,.26), transparent 62%),
        linear-gradient(180deg, #e6ecf8 0%, #f3f6fc 48%, #e4ebf7 100%);
    background-attachment: fixed, fixed, fixed, scroll;
}

/* AppBar: duidelijk rijkere navy-gradient + een gradient-accentlijn (oranje) + stevigere schaduw. */
.mud-appbar {
    background: linear-gradient(120deg, #03123f 0%, #16265f 52%, #3a3576 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 10px 30px rgba(3,15,60,.38) !important;
}
.mud-appbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--hc-accent), #f7a86a 45%, var(--hc-accent));
}
.mud-appbar .mud-button-root { font-weight: 600; letter-spacing: .2px; }

/* Kaarten: zachtere hoeken, subtiele schaduw, nette rand */
.mud-paper, .mud-card {
    border-radius: 16px !important;
    border: 1px solid rgba(23,35,63,.08);
    box-shadow: 0 6px 22px rgba(23,35,63,.06) !important;
}

/* Knoppen wat steviger */
.mud-button-root { border-radius: 10px; text-transform: none; font-weight: 600; }
.mud-button-filled { box-shadow: 0 6px 16px rgba(232,72,43,.25); }

/* ---- Inschrijf-stepper ---- pillen met lucht; actieve stap een zachte gloed, gedane stappen groen. */
.hc-stepper .mud-chip { border-radius: 999px; font-weight: 600; padding: 6px 15px; }
.hc-stepper .mud-chip.mud-chip-filled.mud-chip-color-primary { box-shadow: 0 6px 16px rgba(4,28,91,.32); }
.hc-stepper .mud-chip.mud-chip-filled.mud-chip-color-success { background-color: #2e9e6b; }

/* ---- Inschrijf-hoofdkaart ---- oranje accentstreep bovenaan + iets meer diepte. */
.hc-flowcard { position: relative; overflow: hidden; box-shadow: 0 16px 44px rgba(23,35,63,.11) !important; }
.hc-flowcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--hc-accent), #f7a86a); }
.hc-flowcard > .mud-card-content { padding: 28px 30px; }

/* ---- Betaaloverzicht ---- consistente label/waarde-regels (contact + per deelnemer) + totaalbalk. */
.hc-summary .hc-sumrow, .hc-pcard .hc-sumrow {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 9px 2px; border-bottom: 1px solid rgba(23,35,63,.07);
}
.hc-summary .hc-sumrow:last-child, .hc-pcard .hc-sumrow:last-child { border-bottom: none; }
.hc-suml { font-weight: 600; color: var(--hc-navy); flex: 0 0 auto; }
.hc-sumv { color: #5b6478; text-align: right; }
.hc-pcard-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding-bottom: 12px;
    border-bottom: 2px solid rgba(23,35,63,.08); }
.hc-avatar { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: inline-flex;
    align-items: center; justify-content: center; background: linear-gradient(135deg, #041c5b, #3c447b);
    color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: .5px; }
.hc-pcard-name { font-weight: 700; font-size: 1.05rem; color: var(--hc-navy); flex: 1 1 auto; }
.hc-pcard-price { font-weight: 700; color: var(--hc-navy); white-space: nowrap; }
.hc-total { display: flex; justify-content: space-between; align-items: center; margin-top: 4px;
    padding: 15px 18px; border-radius: 12px; font-weight: 800; font-size: 1.12rem; color: var(--hc-navy);
    background: linear-gradient(90deg, rgba(232,72,43,.12), rgba(247,168,106,.08));
    border: 1px solid rgba(232,72,43,.30); }

/* ---- Hero ---- Meerlaags: kleurverloop + zachte gloed + fijn dennenpatroon + heuvel-silhouet onderaan
   (outdoor-sfeer van De Kroeze Danne). De content zit in .hc-hero-inner bovenop alle lagen. */
.hc-hero {
    position: relative; overflow: hidden; color: #fff; border: none;
    border-radius: 24px !important; background-color: #071f5e;
    background-image:
      radial-gradient(900px 420px at 88% -12%, rgba(247,128,58,.50), transparent 60%),
      radial-gradient(760px 520px at -5% 118%, rgba(96,120,230,.40), transparent 55%),
      linear-gradient(135deg, #041c5b 0%, #23306e 55%, #3c447b 100%);
    box-shadow: 0 26px 64px rgba(23,35,63,.38) !important;
}
.hc-hero-inner { position: relative; z-index: 2; padding: 64px 52px 78px; animation: hcRise .6s ease both; }
/* fijn dennenpatroon (subtiel) */
.hc-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 6l6 14h-12zM30 20l8 18H22z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 88px 88px;
}
/* heuvel-silhouet onderaan (twee lagen = diepte) */
.hc-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 1; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='130' preserveAspectRatio='none'%3E%3Cpath d='M0 130 L0 74 C180 44 360 96 540 78 C760 56 900 104 1200 66 L1200 130 Z' fill='%23ffffff' opacity='0.06'/%3E%3Cpath d='M0 130 L0 98 C220 72 420 114 640 98 C860 82 1020 118 1200 94 L1200 130 Z' fill='%23000000' opacity='0.16'/%3E%3C/svg%3E") no-repeat bottom / 100% 130px;
}
.hc-hero-title { color: #fff; font-weight: 800; letter-spacing: -1px; line-height: 1.05;
    font-size: clamp(2.3rem, 5vw, 3.9rem); margin: 16px 0 0;
    /* Nooit MIDDEN in een woord afbreken (bv. "Pinksterconferenti-e"); wél nette NL-afbreking op smal. */
    overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
/* De titel wordt bij navigatie geprogrammeerd gefocust (FocusOnNavigate, a11y); geen zichtbare focusrand
   op deze niet-interactieve kop. */
.hc-hero-title:focus, .hc-hero-title:focus-visible { outline: none; }
.hc-hero-theme { color: #f7a86a; font-size: 1.3rem; font-weight: 600; margin-top: 10px; }
.hc-hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; max-width: 840px; }
.hc-fact { display: inline-flex; align-items: center; gap: 8px; color: #dbe4ff;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
    padding: 8px 14px; border-radius: 999px; font-size: .92rem; backdrop-filter: blur(6px); }
.hc-fact .mud-icon-root { font-size: 1.1rem; color: #f7a86a; }
.hc-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25);
    padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; margin-bottom: 18px;
    backdrop-filter: blur(4px);
}
.hc-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #58e08b; box-shadow: 0 0 0 4px rgba(88,224,139,.25); }

/* ---- Beheer-topnavigatie ---- De knoppen/menu's mogen NIET krimpen (anders worden labels als
   "Dashboard"/"Opzetten" afgekapt); past het niet, dan scrollt de balk horizontaal. */
.hc-adminnav > * { flex-shrink: 0; }
.hc-adminnav .mud-button-root { white-space: nowrap; }

/* ---- Stat-cards (tellers) ---- */
.hc-stat { text-align: center; padding: 20px 12px; transition: transform .15s, box-shadow .15s; }
.hc-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(23,35,63,.12) !important; }
.hc-stat .hc-stat-num { font-size: 2rem; font-weight: 800; color: var(--hc-navy); line-height: 1.1; }
.hc-stat .hc-stat-lbl { color: #6b7386; font-size: .82rem; margin-top: 4px; }
.hc-stat .hc-stat-ico { color: var(--hc-accent); margin-bottom: 6px; }

/* ===== Voorpagina — entrance-animatie + call-to-action (CSS-only, raakt de flow niet) ===== */
.hc-hero-cta { margin-top: 30px; }
@keyframes hcRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Prominente, zacht pulserende primaire call-to-action. */
.hc-hero-cta .mud-button-root {
    padding: 12px 28px; font-size: 1.05rem; border-radius: 999px;
    box-shadow: 0 10px 28px rgba(232,72,43,.45); animation: hcPulse 2.8s ease-in-out infinite;
}
.hc-hero-cta .mud-button-root:hover { transform: translateY(-2px); }
@keyframes hcPulse {
    0%, 100% { box-shadow: 0 10px 28px rgba(232,72,43,.40); }
    50%      { box-shadow: 0 14px 44px rgba(232,72,43,.66); }
}
@media (prefers-reduced-motion: reduce) {
    .hc-hero-inner, .hc-hero-cta .mud-button-root { animation: none; }
}
@media (max-width: 600px) { .hc-hero-inner { padding: 36px 22px 56px; } .hc-hero-title { font-size: clamp(1.7rem, 7.2vw, 2.2rem); } }

/* ---- Keuze-tegels (accommodatie/corvee) ---- */
.hc-tile { transition: transform .12s, box-shadow .12s, border-color .12s; }
.hc-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(23,35,63,.12) !important; }
.hc-tile-selected { border: 2px solid var(--hc-accent) !important; background:
    linear-gradient(0deg, rgba(232,72,43,.05), rgba(232,72,43,.05)) !important; }
.hc-tile-disabled { opacity: .5; }
.hc-tile-ico {
    width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center;
    justify-content: center; background: rgba(23,35,63,.06); color: var(--hc-navy); flex: 0 0 auto;
}

#blazor-error-ui {
    color-scheme: light only; background: lightyellow; bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2); box-sizing: border-box; display: none;
    left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: var(--hc-accent); padding: 1rem; color: white; }

/* Logo in de AppBar: klein wit vlak zodat het op de donkere balk altijd leesbaar is */
.hc-logo-badge { background:#fff; border-radius:10px; padding:5px 10px; display:inline-flex; align-items:center; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.hc-logo-badge img { height:30px; display:block; }

/* Lange woorden in de hero (bv. "Pinksterconferentie") netjes laten afbreken i.p.v. afgekapt
   worden door de overflow:hidden van de hero. */
.hc-hero { overflow-wrap: anywhere; }

/* ---- Mobiel (telefoon) ---- Compactere layout zodat alles past en niets afgekapt wordt. */
@media (max-width: 600px) {
    /* AppBar-titel "Conferenties" verbergen: logo + Home/Inschrijven passen dan zonder botsen. */
    .hc-appbar-title { display: none !important; }
    /* Hero: minder padding + iets kleinere titel zodat de conferentienaam volledig past. */
    .hc-hero { border-radius: 18px !important; }
    /* Minder witruimte boven/onder de hoofdinhoud op een klein scherm. */
    .mud-main-content > .mud-container { margin-top: 24px !important; margin-bottom: 24px !important; }
}

/* ---- Kosten-per-deelnemer als kaartjes (ALTIJD, niet alleen mobiel) ----
   De tabel heeft veel kolommen (slaapplek, aankomst/vertrek, leeftijd, programma, corvee, prijs) en past
   met lange teksten niet in de 900px-inhoudscontainer → op desktop zou 'ie horizontaal scrollen en het
   totaalbedrag afbreken. Daarom tonen we elke deelnemer als een kaartje met "label: waarde"-regels; het
   totaal staat als eigen regel op één lijn. !important omdat MudBlazor's tabel-CSS de display overschrijft. */
.hc-resptable thead { display: none !important; }
.hc-resptable tr { display: block !important; border: 1px solid rgba(23,35,63,.12); border-radius: 10px;
    margin: 0 0 10px; padding: 6px 14px 10px; }
.hc-resptable td { display: flex !important; justify-content: space-between; align-items: baseline; gap: 16px;
    border: none !important; padding: 5px 0 !important; text-align: right !important; }
.hc-resptable td::before { content: attr(data-label); font-weight: 600; color: #6b7386;
    text-align: left; white-space: nowrap; }
/* Naam als kaart-titel (volle breedte, geen label). */
.hc-resptable td.hc-card-title { display: block !important; text-align: left !important; font-size: 1rem;
    border-bottom: 1px solid rgba(23,35,63,.10) !important; margin-bottom: 4px; padding-bottom: 6px !important; }
.hc-resptable td.hc-card-title::before { content: none; }
.hc-resptable td.hc-hide-mobile { display: none !important; }
.hc-resptable td[data-label="Totaal"] { font-size: 1.05rem; }
.hc-resptable tfoot tr { border-color: rgba(219,92,20,.4); background: rgba(219,92,20,.06); }

/* ---- Beheertabellen op MOBIEL als kaartjes (label boven, invoer eronder op volle breedte) ----
   Op desktop blijft het een gewone (bewerkbare) tabel; ≤600px wordt elke rij een kaartje zodat je niet
   horizontaal hoeft te scrollen. Gebruik: class "hc-admtable" op de <MudSimpleTable>, een data-label op
   elke <td>, en class "hc-adm-title" op de eerste (titel-)cel. De lege actie-cel (verwijderknop) krijgt
   data-label="" (dan staat er geen kop boven de knop). */
@media (max-width: 600px) {
    .hc-admtable { min-width: 0 !important; }
    .hc-admtable thead { display: none !important; }
    .hc-admtable tr { display: block !important; border: 1px solid rgba(23,35,63,.12); border-radius: 10px;
        margin: 0 0 10px; padding: 8px 12px; }
    .hc-admtable td { display: block !important; border: none !important; padding: 5px 0 !important;
        text-align: left !important; }
    .hc-admtable td::before { content: attr(data-label); display: block; font-weight: 600; font-size: .75rem;
        color: #6b7386; margin-bottom: 2px; }
    .hc-admtable td[data-label=""]::before { content: none; }
    .hc-admtable td.hc-adm-title { font-size: 1rem; font-weight: 700;
        border-bottom: 1px solid rgba(23,35,63,.10); margin-bottom: 4px; padding-bottom: 6px !important; }
    .hc-admtable td.hc-adm-title::before { content: none; }
    .hc-admtable td.hc-hide-mobile { display: none !important; }
    /* Invoervelden vullen de kaartbreedte. */
    .hc-admtable td .mud-input-control { width: 100% !important; }
    /* Sticky-kolommen (AccommodatieTypen) uitschakelen in kaartmodus — geen zin op één kolom breed. */
    .hc-admtable td.hc-pin-l, .hc-admtable td.hc-pin-r { position: static !important; box-shadow: none !important; }
}