/* ============================================================================
   LaTravel design tokens (NEW_BOOKING_SPEC §5.2 «One stylesheet»).
   Verbatim from the approved mockup's :root (scratchpad mockup/new-booking.html,
   artifact «Μακέτα Νέας Κράτησης», approved §0.2). ONLY custom properties live
   here: the mockup's base resets (* box-sizing, body margin 0, ul list-style)
   are NOT copied — app.css is global and they would change every other page.
   Screen styles: wwwroot/css/booking-editor.css (bk- prefix), linked after this.
   ========================================================================= */
:root {
    /* ---------- colour: ground, surfaces, ink, lines ---------- */
    --lt-ground: #EEF1F4;
    --lt-surface: #FFFFFF;
    --lt-sunken: #F6F8FA;
    --lt-ink: #16212B;
    --lt-ink-2: #4E5A66;
    --lt-ink-3: #66727E;
    --lt-line: #D5DBE1;
    --lt-line-soft: #E8ECEF;
    --lt-line-strong: #B7C0C9;
    /* ---------- colour: the one accent ---------- */
    --lt-accent: #1B5FD1;
    --lt-accent-hover: #164FB0;
    --lt-accent-soft: #E8F0FC;
    --lt-accent-line: #A8C3EE;
    --lt-on-accent: #FFFFFF;
    --lt-on-accent-line: rgba(255,255,255,.45);
    /* ---------- colour: the dark palette (named for the booking ledger it was made for) ----------
       Since 25/09/2026 the ledger is a soft money card (booking-editor.css `.bk-ledger`, owner «αυτο το μαυρο ειναι
       περιεργο … πιο απαλο χρωμα»); the side rail below is the only reader of these four. */
    --lt-ledger-bg: #16212B;
    --lt-ledger-line: #2E3C49;
    --lt-ledger-ink: #F4F7FA;
    --lt-ledger-muted: #A3B1BE;
    /* ---------- colour: the side rail (approved shell mockup, mockup/shell-home.html) ----------
       The mockup's rail palette is BYTE-IDENTICAL to the ledger's four colours above, so the rail
       ALIASES them rather than restating them: one dark surface in the app, defined once. Only the
       hover tint is genuinely new — the ledger has no hover state to borrow. */
    --lt-rail-bg: var(--lt-ledger-bg);
    --lt-rail-line: var(--lt-ledger-line);
    --lt-rail-ink: var(--lt-ledger-ink);
    --lt-rail-muted: var(--lt-ledger-muted);
    --lt-rail-hover: #1F2D3A;
    /* The three daily entries get their own colour on the dark rail (owner 25/09/2026: «νεα κρατηση πρασινό αναζητηση
       κίτρινο και πλάνο ενα φιλικο κοκκινο»; 27/09/2026: «ας το κανουμε μπλέ το πλάνο αντι για κόκκινο»). Light enough to read
       on --lt-rail-bg; the glyph takes the colour, the row a soft wash of it. */
    --lt-rail-hot-new: #4ADE80;
    --lt-rail-hot-search: #FACC15;
    --lt-rail-hot-plan: #60A5FA;
    /* ---------- colour: money states ---------- */
    --lt-due: #B3261E;
    --lt-due-soft: #FCEBEA;
    --lt-due-line: #EBB2AD;
    --lt-due-on-dark: #FFB4A9; /* no reader since 25/09/2026 (the dark ledger's Υπόλοιπο) */
    --lt-paid: #1E7B4A;
    --lt-paid-soft: #E5F3EA;
    --lt-paid-line: #A9D8BC;
    /* Round 10 (owner 28/09/2026: «το αποθηκευση να ειναι πρασινο οταν εινα clickable»): the green «Αποθήκευση» (booking-editor.css
       `.bk-btn--save`) is --lt-paid with white text, 5.27:1; this is its hover, 7.48:1 (WCAG 1.4.3, ActionBarRound10Tests). The staff app has
       one (light) theme — no dark values exist for any token. */
    --lt-paid-hover: #17613A;
    /* ---------- colour: notices ---------- */
    --lt-notice-ink: #5F4700;
    --lt-notice-soft: #FFF7D9;
    --lt-notice-line: #E6CB66;
    --lt-notice-dot: #D19E00;
    /* ---------- colour: placement kinds (chips always carry a text code) ---------- */
    --lt-pl-room-ink: #26313C;
    --lt-pl-room-bg: #EDF0F3;
    --lt-pl-room-line: #A9B3BD;
    --lt-pl-nn-ink: #6E4300;
    --lt-pl-nn-bg: #FFEFD3;
    --lt-pl-nn-line: #D98A1C;
    --lt-pl-ob-ink: #8E1F17;
    --lt-pl-ob-bg: #FFFFFF;
    --lt-pl-ob-line: #C8453B;
    --lt-pl-trns-ink: #2F3E4E;
    --lt-pl-trns-bg: #E4EAF1;
    --lt-pl-trns-line: #7F90A3;
    --lt-pl-none-ink: #B3261E;
    --lt-pl-none-bg: #FFFFFF;
    --lt-pl-none-line: #B3261E;
    --lt-row-a: #FDF0F3;
    --lt-row-b: #EDF5FD;
    /* ---------- status bar (NB-80); colour is never the only signal ---------- */
    --lt-status-dirty: var(--lt-due-soft);
    --lt-status-saved: var(--lt-paid-soft);
    /* ---------- shadow (dialogs, sticky column edge) ---------- */
    --lt-shadow-dialog: 0 .5rem 1.5rem rgba(22,33,43,.14);
    --lt-shadow-edge: .375rem 0 .375rem -.25rem rgba(22,33,43,.18);
    /* ---------- type ---------- */
    --lt-font-ui: "Commissioner", "Segoe UI", "Noto Sans", Arial, sans-serif;
    --lt-font-num: "JetBrains Mono", Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace;
    --lt-text-caption: .6875rem; /* 11: captions, hints, ledger labels, kbd */
    --lt-text-label: .75rem; /* 12: labels, table heads, meta, messages */
    --lt-text-control: .8125rem; /* 13: controls, cells, buttons, card titles */
    --lt-text-body: .875rem; /* 14: body, brand, dialog titles */
    --lt-text-title: 1.125rem; /* 18: page title */
    --lt-text-num: .75rem; /* 12 mono: amounts and dates in cells */
    --lt-text-num-md: .875rem; /* 14 mono: ledger figures (both, since 25/09/2026) */
    --lt-text-num-lg: 1.25rem; /* 20 mono: the dark ledger's Υπόλοιπο until 25/09/2026; no reader now */
    --lt-text-num-xl: 1.5rem; /* 24 mono: the headline figure of a .lt-tile (approved shell mockup's --lt-num-lg) */
    --lt-leading: 1.4;
    --lt-leading-caption: .875rem;
    --lt-leading-label: 1rem;
    --lt-weight-regular: 400;
    --lt-weight-medium: 500;
    --lt-weight-semibold: 600;
    --lt-weight-bold: 700;
    /* ---------- space ---------- */
    --lt-space-1: .125rem;
    --lt-space-2: .25rem;
    --lt-space-3: .375rem;
    --lt-space-4: .5rem;
    --lt-space-5: .75rem;
    --lt-space-6: 1rem;
    --lt-space-7: 1.5rem;
    --lt-space-8: 2rem;
    --lt-region-gap: .625rem;
    /* ---------- sizes ---------- */
    --lt-appnav-h: 2.5rem;
    /* The app shell (approved mockup mockup/shell-home.html). --lt-rail-cur is the rail's CURRENT width and is
       the only one the content column reads, so collapsing the rail is a single custom-property flip on <html>
       (see :root[data-lt-rail] below) instead of a class on every layout. */
    --lt-rail-w: 13.5rem;
    --lt-rail-w-min: 3.25rem;
    --lt-rail-cur: var(--lt-rail-w);
    --lt-topbar-h: 2.75rem;
    /* The ordinary page's reading width (the mockup's .page max-width). The booking editor opts out with
       .lt-main--wide, which falls back to --lt-page-max (120rem) further down — the width WideLayout already had. */
    --lt-shell-page-max: 96rem;
    /* The booking screen's sticky block, measured against its own rules in booking-editor.css:
       padding-block 2x --lt-space-3 (12) + .bk-statusbar 28 + row-gap 6 + .bk-ab-row1 --lt-control-h (30)
       + row-gap 6 + .bk-ab-row2 (30) + the 1px border = 113px. It used to read 4.9375rem (79px), i.e. every row
       EXCEPT the status bar — a 34px shortfall, more than a whole grid row (--lt-row-h 32px), so anything scrolled
       to with it landed behind the bar. The edit page adds the NB-90 meta row (--lt-control-h-sm 24 + 6 gap) = 143px.
       Two tokens rather than one override, because booking-editor.css needs the edit height on `html` — where
       `.bk-page--edit`'s own value cannot reach, custom properties inheriting downward.
       These two numbers hold only while every row is ONE line. Since 25/09/2026 row 1 can wrap (Πωλητής + the ledger), so
       the bar measures itself: booking.js `ltTrackActionBar` writes its real height into both as inline style on <html>
       while it exists. These values are the fallback (no JS, before the first measurement). */
    --lt-actionbar-h: 7.0625rem;
    --lt-actionbar-h-edit: 8.9375rem;
    --lt-control-h: 1.875rem;
    --lt-control-h-sm: 1.5rem;
    --lt-card-head-h: 2.25rem;
    --lt-row-h: 2rem;
    --lt-list-row-h: 1.625rem;
    --lt-check-row-h: 1.125rem;
    /* §5.1's region table wins over the mockup's flat 26rem: the mockup is a static page at one width,
       and the band must stay usable at 1366x768 as well as 1920x1080. Same token, one definition. */
    --lt-band-h: clamp(18rem, 38vh, 30rem);
    --lt-pane-w: 9rem;
    --lt-page-max: 120rem;
    /* ---------- radius ---------- */
    --lt-radius-xs: 3px;
    --lt-radius-sm: 4px;
    --lt-radius-md: 6px;
    --lt-radius-lg: 8px;
    /* ---------- borders ---------- */
    --lt-border: 1px solid var(--lt-line);
    --lt-border-soft: 1px solid var(--lt-line-soft);
    --lt-border-strong: 1px solid var(--lt-line-strong);
    --lt-focus-ring: 2px solid var(--lt-accent);
    /* ---------- colour: card tints by ROLE (owner, 23/09/2026, on «Νέα κράτηση»: «και εδω να βάζαμε καποια απαλα
       χρωματα ως φοντο στις κάρτες να βοηθάει το ματι. ισως και σε ολη την εφαρμογη») ----------
       One tint per KIND of card, never per position, so the same thing is the same colour on every screen:
       rooms / availability, money, people, extras. A card of no particular role stays --lt-surface (white).
       Each role has a BODY tint and a slightly stronger BAND for its heading. Measured before they were chosen
       (NEW_BOOKING_SPEC §7): every text colour used inside the cards keeps 4.5:1 on every BODY, ink-3 included, and
       on every BAND except ink-3 (4.2–4.4:1 there, so ink-3 is never painted on a heading or a hover — pinned by
       CardTintTests); none sits near a status-bar ground (idle / dirty / blocked / saved) or the accent-soft selection. A fifth
       «neutral grey» tint was measured and REJECTED: it lands 0.6 ΔE00 from the idle bar and --lt-sunken, i.e. a
       grey card reads as a disabled one. The role CLASSES that hand these to a card are .lt-tint--<role> in
       css/home.css. */
    --lt-tint-rooms: #EFF8FC;
    --lt-tint-rooms-band: #E3F1F9;
    --lt-tint-money: #F3FAF5;
    --lt-tint-money-band: #EBF6EF;
    --lt-tint-people: #FBF7F0;
    --lt-tint-people-band: #F4EDE1;
    --lt-tint-extras: #F8F6FC;
    --lt-tint-extras-band: #F0ECFA;
    /* The card's CURRENT tint, read by every card family (.bk-bandcard, .bk-panel, .bk-strip, .lt-card, .lt-tile)
       and by the few surfaces inside a card that paint a background of their own (a sticky table head, a hover, a
       table head band). White by default, so a card with no role class looks exactly as it did; a .lt-tint--<role>
       class on the card re-points all three for that card's subtree. Controls never read them: an input stays
       --lt-surface on every card, because a tinted input reads as a disabled one. */
    --lt-card-bg: var(--lt-surface);
    --lt-card-band: var(--lt-surface);
    --lt-card-shade: var(--lt-sunken);
    /* ---------- Bootstrap pointed at the tokens (UX 20/10/2026, X5) ----------
       Bootstrap's own custom properties, overridden HERE because Bootstrap declares them on :root too and this sheet loads after
       it (and because app.css keeps ONE :root — CardTintTests and others read it as a single rule). Measured on the sign-in page
       20/10: four blues on one screen — the template's button #1b6ec2 and links #006bb7, stock Bootstrap #0d6efd on every state
       the template never set, and --lt-accent on the bk pages (NEW_BOOKING_SPEC §4.5 «one blue»). The -rgb pair has to be a
       literal triplet (Bootstrap feeds it to rgba()): 27, 95, 209 IS --lt-accent #1B5FD1, 22, 79, 176 IS --lt-accent-hover
       #164FB0. The alert / -subtle families take the money and notice tokens: due on due-soft 5.67:1, notice 8.19:1, paid on
       paid-soft 4.60:1. */
    --bs-link-color: var(--lt-accent);
    --bs-link-color-rgb: 27, 95, 209;
    --bs-link-hover-color: var(--lt-accent-hover);
    --bs-link-hover-color-rgb: 22, 79, 176;
    --bs-danger-text-emphasis: var(--lt-due);
    --bs-danger-bg-subtle: var(--lt-due-soft);
    --bs-danger-border-subtle: var(--lt-due-line);
    --bs-warning-text-emphasis: var(--lt-notice-ink);
    --bs-warning-bg-subtle: var(--lt-notice-soft);
    --bs-warning-border-subtle: var(--lt-notice-line);
    --bs-success-text-emphasis: var(--lt-paid);
    --bs-success-bg-subtle: var(--lt-paid-soft);
    --bs-success-border-subtle: var(--lt-paid-line);
    /* Wave-1 review: `bg-primary` / `text-primary` (AdminUsers' «εσείς» badge) read Bootstrap's primary — the same triplet as above. */
    --bs-primary: var(--lt-accent);
    --bs-primary-rgb: 27, 95, 209;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* UX 20/10/2026, X5 — the Blazor template's leftovers that stood here (links #006bb7, a #1b6ec2 .btn-primary that set only its
   resting colours, and a #258cfb glow on :focus that also lit up after every mouse click) are replaced by Bootstrap's own
   variables pointed at the tokens — no markup changes, and every state of the button follows: hover and active in
   --lt-accent-hover, disabled grey like a disabled .bk-btn (booking-editor.css), not a 65% faded blue. Links: the :root block. */
.btn-primary {
    --bs-btn-bg: var(--lt-accent);
    --bs-btn-border-color: var(--lt-accent);
    --bs-btn-hover-bg: var(--lt-accent-hover);
    --bs-btn-hover-border-color: var(--lt-accent-hover);
    --bs-btn-active-bg: var(--lt-accent-hover);
    --bs-btn-active-border-color: var(--lt-accent-hover);
    --bs-btn-focus-shadow-rgb: 27, 95, 209;
    --bs-btn-disabled-bg: var(--lt-sunken);
    --bs-btn-disabled-color: var(--lt-ink-3);
    --bs-btn-disabled-border-color: var(--lt-line);
    --bs-btn-disabled-opacity: 1;
}

/* Wave-1 review: the outline twin — AdminRoles' role chips (the chosen one is .btn-primary, the rest were stock #0d6efd outlines with a
   #0d6efd hover), BookingSearch «Φίλτρα ▾», Πλάνο, ComingSoon, MultiDatePicker. Bootstrap writes these as literals, so they are restated. */
.btn-outline-primary {
    --bs-btn-color: var(--lt-accent);
    --bs-btn-border-color: var(--lt-accent);
    --bs-btn-hover-bg: var(--lt-accent);
    --bs-btn-hover-border-color: var(--lt-accent);
    --bs-btn-active-bg: var(--lt-accent-hover);
    --bs-btn-active-border-color: var(--lt-accent-hover);
    --bs-btn-disabled-color: var(--lt-accent);
    --bs-btn-disabled-border-color: var(--lt-accent);
    --bs-btn-focus-shadow-rgb: 27, 95, 209;
}

.form-check-input:checked {
    background-color: var(--lt-accent);
    border-color: var(--lt-accent);
}

/* X5 + X15: a focused box gets the accent border instead of Bootstrap's stock #86b7fe and its .25rem glow (literal colours in
   bootstrap.min.css, so they are restated, not re-pointed) … */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--lt-accent);
    box-shadow: none;
}

/* … and the KEYBOARD gets the app's one ring (--lt-focus-ring, as .bk-control has), on :focus-visible — a mouse click on a button
   no longer lights it up. A text field matches :focus-visible on any focus, exactly as .bk-control:focus-visible does. Wave-1 review:
   every `.nav-link` too — Bootstrap's own ring there is stock #0d6efd at 25 % (~1.4:1 on white, under WCAG 1.4.11's 3:1), on the very
   tab strips OP-20 made tabs (Πληρωμές, Λίστες); same weight as Bootstrap's rule and later, so it wins. */
.btn:focus-visible,
.btn-link.nav-link:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 1px;
    box-shadow: none;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}