/* Keukenstudio van 't Hoff - house style, taken from the studio's new website
   (darkslategrey-sparrow-530722.hostingersite.com, measured 21 Oct 2026): near-black ink on off-white paper, gold accents,
   1px gold outlines with 4px corners. Fonts: the Chain IT Karting Manager stack (Public Sans, Roboto, Arial).
   MudBlazor palette lives in Theming/KvhTheme.cs; keep these variables in sync with it.
   Control sizing follows Chain IT Karting Manager (block further down).
   The Bootstrap overrides style the static pages (public booking /afspraak, Identity Account pages). */

:root {
    --kvh-ink: #201F1D;           /* text, headings */
    --kvh-ink-muted: #5C5955;     /* secondary text */
    --kvh-ink-16: rgba(32, 31, 29, 0.16);
    --kvh-gold: #B68235;          /* links, outlined buttons, icons */
    --kvh-gold-dark: #7D5411;     /* emphasis, filled buttons */
    --kvh-gold-darker: #5E3F0C;
    --kvh-paper: #F3F2F2;         /* page background */
    --kvh-paper-dark: #EAE9E9;    /* alternate blocks */
    --kvh-border: #DCDAD8;
    --kvh-white: #FFFFFF;
    --kvh-radius: 4px;
    --kvh-font: 'Public Sans', 'Roboto', Arial, sans-serif;          /* as Chain IT Karting Manager */
    --kvh-font-display: var(--kvh-font);

    /* Bootstrap 5.3 theme hooks */
    --bs-font-sans-serif: var(--kvh-font);
    --bs-body-font-family: var(--kvh-font);
    --bs-body-font-size: 0.875rem;
    --bs-body-color: var(--kvh-ink);
    --bs-body-bg: var(--kvh-paper);
    --bs-primary: var(--kvh-gold-dark);
    --bs-primary-rgb: 125, 84, 17;
    --bs-secondary: var(--kvh-ink);
    --bs-secondary-rgb: 32, 31, 29;
    --bs-danger: #A63D2F;
    --bs-danger-rgb: 166, 61, 47;
    --bs-link-color: var(--kvh-gold-dark);
    --bs-link-color-rgb: 125, 84, 17;
    --bs-link-hover-color: var(--kvh-gold-darker);
    --bs-link-hover-color-rgb: 94, 63, 12;
    --bs-border-color: var(--kvh-border);
    --bs-border-radius: var(--kvh-radius);
    --bs-border-radius-sm: var(--kvh-radius);
    --bs-border-radius-lg: var(--kvh-radius);
    --bs-secondary-color: var(--kvh-ink-muted);
}

html, body, .mud-typography { font-family: var(--kvh-font); }
body { color: var(--kvh-ink); background-color: var(--kvh-paper); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--kvh-ink);
    font-family: var(--kvh-font);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
h1, .h1 { font-size: 2.125rem; line-height: 1.235; }
h2, .h2 { font-size: 1.6rem; line-height: 1.3; }
h3, .h3 { font-size: 1.25rem; }
p, .text-muted { color: var(--kvh-ink-muted); }
strong, b { font-weight: 600; }
.kvh-accent { color: var(--kvh-gold-dark); }

/* ---- App bar / navigation (MudBlazor layout) ---- */
.kvh-logo { height: 30px; width: auto; margin-right: 10px; display: block; }
.kvh-brand { font-family: var(--kvh-font); font-weight: 500; letter-spacing: 0; font-size: 1.2rem; text-transform: none; }
.mud-appbar { border-bottom: 1px solid var(--kvh-ink-16); }
.mud-appbar .mud-typography { color: var(--kvh-ink); }
.mud-appbar .kvh-brand span { color: var(--kvh-gold-dark) !important; font-weight: 600; }
.mud-appbar .mud-button-root { font-family: var(--kvh-font-display); }
.mud-appbar .appbar-user { display: flex; align-items: center; gap: 4px; margin-left: 16px; white-space: nowrap; }
.mud-appbar .appbar-user-icon { opacity: 0.85; }
.mud-appbar .appbar-user-name { font-size: 0.875rem; margin-right: 4px; }
.mud-nav-link, .mud-nav-group { font-family: var(--kvh-font); font-size: 0.9rem; }
.mud-drawer { border-right: 1px solid var(--kvh-ink-16); }

/* ---- Controls: sizing and density as in Chain IT Karting Manager (ChainIT.KartingManager/wwwroot/app.css + kartmanager.css).
   Every single-line field (text, numeric, date, time, select, autocomplete) is Variant.Outlined + Margin.Dense and ~34px tall
   with 0.875rem text; every text button is 34px tall with a one-line label; chips are rectangles with 6px corners.
   This stylesheet loads AFTER MudBlazor.min.css, so plain selectors win. The public Bootstrap pages keep the website pills. */
.mud-input, .mud-link, .mud-treeview-item-label, .mud-input-label-inputcontrol,
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol { font-size: 0.875rem; }
.mud-input.mud-input-outlined { background-color: #fff; }
.mud-input-control { margin: 4px 0; }
.mud-input-control.mud-input-outlined-with-label { margin-top: 8px; margin-bottom: 4px; }
.mud-select .mud-input-control { margin-top: 8px; margin-bottom: 4px; }
div.mud-input-slot.mud-input-root-outlined { padding-top: 10.5px; padding-bottom: 10.5px; }
.mud-input.mud-input-outlined > input.mud-input-slot.mud-input-root-outlined,
.mud-select .mud-input.mud-input-outlined .mud-input-slot { padding-top: 6px; padding-bottom: 6px; font-size: 0.875rem; }
.mud-input.mud-input-outlined .mud-input-adornment .mud-icon-root { font-size: 1.25rem; }
.mud-input-label.mud-input-label-outlined.mud-input-label-margin-dense { transform: translate(14px, 8px) scale(1); }
.mud-button-root.mud-button { min-height: 34px; padding-top: 0; padding-bottom: 0; white-space: nowrap; border-radius: var(--kvh-radius); font-family: var(--kvh-font-display); }
.mud-button-outlined { border-width: 1px; }
.mud-table-head .mud-table-cell { font-family: var(--kvh-font); font-weight: 600; color: var(--kvh-ink); }
.mud-chip { border-radius: 6px; }
.mud-table-head .column-options .sort-direction-icon { display: none; }
.compact-select .mud-list-item-icon { min-width: 35px; }

/* Phone / small-tablet layout (MudBlazor: Xs < 600px, Sm < 960px), as in Karting Manager. */
@media (max-width: 959.98px) {
    .mud-layout .mud-drawer.mud-drawer-mini { display: none; }
    .mud-layout .mud-main-content { margin-left: 0 !important; margin-right: 0 !important; }
    .mud-layout .mud-appbar { margin-left: 0 !important; width: 100% !important; }
    .mud-sm-table .mud-table-cell-hide { display: none !important; }
    .mud-table .mud-table-container { height: auto !important; max-height: none !important; }
    .mud-main-content .d-flex.flex-row:not(.flex-nowrap), .mud-main-content .mud-grid-item.d-flex { flex-wrap: wrap; }
    .mud-appbar .kvh-logo { display: none !important; }
    .mud-appbar .mud-typography-h6 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
}
@media (max-width: 599.98px) {
    .mud-appbar .appbar-user-icon, .mud-appbar .appbar-user-name { display: none !important; }
    .mud-appbar .appbar-user { margin-left: 4px; }
    .mud-dialog:not(.mud-dialog-fullscreen) { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; margin: 8px; }
    .mud-dialog-title { padding: 12px 16px; }
    .mud-dialog-content { padding: 8px 12px; }
    .mud-dialog-actions { flex-wrap: wrap; row-gap: 8px; }
    .mud-dialog-actions .mud-button-root { flex: 1 1 auto; }
    .mud-xs-table .mud-table-cell-hide { display: none !important; }
    .mud-main-content .mud-alert-message { min-width: 0; overflow-wrap: anywhere; }
    .hide-xs { display: none !important; }
    .mud-container--gutters { padding-left: 8px; padding-right: 8px; }
    .mud-main-content.px-2 { padding-left: 4px !important; padding-right: 4px !important; }
    .mud-table-pagination .mud-table-page-number-information { display: none; }
    .mud-xs-table .mud-table-cell .mud-icon-button { padding: 8px; }
}

/* ---- Buttons (Bootstrap, static pages): the website's outline button, 1px gold, 4px corners, Roboto 500 uppercase ---- */
.btn { --bs-btn-font-weight: 500; --bs-btn-border-radius: var(--kvh-radius); --bs-btn-border-width: 1px; --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: 0.5rem; --bs-btn-font-size: 0.875rem; font-family: var(--kvh-font); text-transform: uppercase; letter-spacing: .02857em; }
.btn-lg { --bs-btn-border-radius: var(--kvh-radius); --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1.1rem; }
.btn-sm { --bs-btn-border-radius: var(--kvh-radius); --bs-btn-padding-x: 0.8rem; --bs-btn-padding-y: 0.35rem; --bs-btn-font-size: 0.9rem; }
.btn-primary {
    --bs-btn-bg: var(--kvh-gold-dark);
    --bs-btn-border-color: var(--kvh-gold-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--kvh-gold-darker);
    --bs-btn-hover-border-color: var(--kvh-gold-darker);
    --bs-btn-active-bg: var(--kvh-gold-darker);
    --bs-btn-active-border-color: var(--kvh-gold-darker);
    --bs-btn-focus-shadow-rgb: 182, 130, 53;
}
.btn-outline-primary {
    --bs-btn-color: var(--kvh-gold-dark);
    --bs-btn-border-color: var(--kvh-gold);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kvh-gold-dark);
    --bs-btn-hover-border-color: var(--kvh-gold-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kvh-gold-darker);
    --bs-btn-active-border-color: var(--kvh-gold-darker);
    --bs-btn-focus-shadow-rgb: 182, 130, 53;
}
.btn-secondary {
    --bs-btn-bg: var(--kvh-ink);
    --bs-btn-border-color: var(--kvh-ink);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
}
.btn-outline-secondary {
    --bs-btn-color: var(--kvh-ink);
    --bs-btn-border-color: var(--kvh-gold);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--kvh-ink);
    --bs-btn-hover-bg: var(--kvh-paper-dark);
    --bs-btn-hover-border-color: var(--kvh-gold-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kvh-ink);
    --bs-btn-active-border-color: var(--kvh-ink);
}
.btn-kvh-cta {
    --bs-btn-bg: var(--kvh-ink);
    --bs-btn-border-color: var(--kvh-ink);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--kvh-gold-dark);
    --bs-btn-hover-border-color: var(--kvh-gold-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--kvh-gold-darker);
    --bs-btn-active-border-color: var(--kvh-gold-darker);
    --bs-btn-active-color: #fff;
}

/* ---- Forms (Bootstrap, static pages) ---- */
.form-control, .form-select { background-color: #fff; border-color: var(--kvh-border); border-radius: var(--kvh-radius); color: var(--kvh-ink); font-family: var(--kvh-font); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--kvh-gold);
    box-shadow: 0 0 0 0.2rem rgba(182, 130, 53, 0.25);
}
.form-check-input:checked { background-color: var(--kvh-gold-dark); border-color: var(--kvh-gold-dark); }
.form-label { font-weight: 500; color: var(--kvh-ink); }
.text-muted, .form-text { color: var(--kvh-ink-muted) !important; }
.validation-message, .text-danger { color: #A63D2F !important; }
.alert { border-radius: var(--kvh-radius); font-family: var(--kvh-font); }
.alert-info { --bs-alert-bg: #FBF6EE; --bs-alert-border-color: #E8D5B5; --bs-alert-color: var(--kvh-ink); }
.alert-success { --bs-alert-bg: #F0F6F0; --bs-alert-border-color: #C9DFC9; --bs-alert-color: var(--kvh-ink); }

/* ---- Public page building blocks (booking /afspraak): light, like the website's white text boxes ---- */
.kvh-page { max-width: 860px; }
.kvh-hero {
    background: var(--kvh-white);
    color: var(--kvh-ink);
    border: 1px solid var(--kvh-border);
    border-left: 4px solid var(--kvh-gold);
    border-radius: var(--kvh-radius);
    padding: 2rem 2rem 1.75rem;
    margin-bottom: 1.5rem;
}
.kvh-hero h1 { color: var(--kvh-ink); margin-bottom: 0.5rem; }
.kvh-hero h1 .kvh-accent { color: var(--kvh-gold-dark); }
.kvh-hero p { color: var(--kvh-ink-muted); margin-bottom: 0; }
.kvh-card {
    background: var(--kvh-white);
    border: 1px solid var(--kvh-border);
    border-radius: var(--kvh-radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.kvh-step-title { font-family: var(--kvh-font); font-size: 1.2rem; font-weight: 500; color: var(--kvh-ink); margin-bottom: 0.9rem; display: flex; align-items: center; }
.kvh-step-title .kvh-step-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; margin-right: 0.6rem;
    border-radius: 50%; border: 1px solid var(--kvh-gold); color: var(--kvh-gold-dark); font-size: 0.85rem; font-weight: 600; font-family: var(--kvh-font);
}
.kvh-check { color: var(--kvh-gold-dark); font-weight: 600; }
.kvh-selected { background: var(--kvh-paper-dark); border-left: 4px solid var(--kvh-gold); border-radius: var(--kvh-radius); padding: 0.75rem 1rem; color: var(--kvh-ink); }