/* ============================================================================
   «Νέα Κράτηση» / «Επεξεργασία κράτησης» — the one screen stylesheet
   (NEW_BOOKING_SPEC §5.2). Tokens live on :root in app.css; this file only uses
   them. Every class keeps the bk- prefix (§5.2), so nothing here can collide
   with Bootstrap or Blazorise, which both load around app.css.

   Shipped in this stage: the wide layout (§5.6 WideLayout), the sticky action
   bar + the ONE status bar (NB-80) and the ledger. The rules that used to
   sit in the <style> blocks of BookingEditor.razor and CustomersGrid.razor were
   moved here unchanged (§5.2 «replaces the <style> blocks in BE and CG»); the
   rest of the page is still Bootstrap and is restyled in the later UI steps.
   ========================================================================= */

/* ---------- wide layout ----------
   §5.1's `.bk-wide` / `.bk-wide-footer` and the `nav.navbar` margin reset are GONE with the app-shell package:
   WideLayout is now the shell's `<main class="lt-main lt-main--wide">` (app-shell.css), which already caps at
   --lt-page-max with 16px gutters, and there is no `nav.navbar` left to un-margin. The only rule that had to
   survive is the sticky-offset arithmetic further down — see `html:has(.bk-actionbar)` (UX 20/10/2026, X16). */

/* ---------- page shell ---------- */
.bk-page {
    font-family: var(--lt-font-ui);
    font-size: var(--lt-text-body);
    line-height: var(--lt-leading);
    color: var(--lt-ink);
}

    .bk-page .bk-num {
        font-family: var(--lt-font-num);
        font-variant-numeric: tabular-nums;
    }

/* ---------- sticky block: status bar + action-bar rows + ledger ---------- */
/* Sticks BELOW the shell's top bar, not at 0. The old NavBar scrolled away, so `top: 0` was right; the shell's
   top bar is `position: sticky; top: 0` itself, and this bar's z-index (40) is higher than its (20) — at `top: 0`
   it would park ON TOP of the page title and the quick search. */
.bk-actionbar {
    position: sticky;
    top: calc(var(--lt-topbar-h) + env(safe-area-inset-top, 0px));
    z-index: 40;
    background: var(--lt-surface);
    border-bottom: var(--lt-border);
    margin-inline: calc(-1 * var(--lt-space-6));
    padding-inline: var(--lt-space-6);
}

/* One column since 25/09/2026: the ledger used to be a second column spanning rows 1-2; it is now inside row 1's actions.
   Round 10 (owner 28/09/2026: «το ακύρωση και ο πωλητής να πανε πανω δεξια κατω απο το νετ τιμη και υπολοιπο»): a second, content-wide
   column again — NOT for the ledger (it stays in row 1) but for `.bk-ab-under` (Πωλητής · Ακύρωση κράτησης… / Επαναφορά), right under
   the ledger at the content's right edge. The rows are placed EXPLICITLY (the status bar is always row 1, row 1 is row 2, the block
   row 3), never left to the auto-placement cursor: in edit the block shares the NB-90 meta row's line and row 2 spans both columns
   below (so its dateinfo — the nights and NB-05's lock hint — keeps the full width); on a new booking (no meta row, `bk-abwrap--meta`
   absent) it shares row 2's line. So no line is added (the fallback tokens of app.css stay true while row 1 is one line) — and row 1
   lost ~330 px to the block, so in edit at 1366 it IS one line now, rail open or folded. Measured in a static harness (headless Chrome,
   these stylesheets, 29/09/2026): the edit bar is 144 px at 1600 / 1267 / 1103 px of content (it was 144 / 174 / 212 — row 1 on two and
   three lines), a new booking 113 px; MANUAL_TESTS §52 checks it on the live page. */
.bk-abwrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--lt-space-5);
    row-gap: var(--lt-space-3);
    padding-block: var(--lt-space-3);
    align-items: center;
}

.bk-ab-row1 {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: var(--lt-space-4);
    min-width: 0;
    min-height: var(--lt-control-h);
    flex-wrap: wrap;
}

.bk-ab-title {
    flex: none;
    margin: 0;
    font-size: var(--lt-text-title);
    font-weight: var(--lt-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
}

.bk-ab-spacer {
    flex: 1 1 auto;
    min-width: 0;
}

/* UX 20/10/2026, MOBILE P2: «Περισσότερα» is the PHONE's toggle (the 60rem block below draws it and hides the rest of the bar behind
   it). On a desktop every action is on the bar already, so the button is not there — this one declaration is all the desktop sees.
   Two classes: `.bk-btn { display: inline-flex }` comes later in this sheet at one class's weight and would draw it. */
.bk-ab-row1 > .bk-ab-toggle {
    display: none;
}

/* 25/09/2026: the actions carry «Πωλητής» (owner, item 6) and the ledger (item 1) too, ~1000px in edit, so `flex: none`
   would scroll the page sideways below that. They take the next line when the title's line is full and wrap inside it when
   even that is not enough — always right-aligned, so the ledger stays at the content's right edge beside «Αποθήκευση». This
   replaces the two phone-only copies of the same rule the Τρίτων and Ατομικά blocks had (their 375 px measurement of
   24/09/2026: «Ακύρωση κράτησης…» + «Καθαρισμός» + «Αποθήκευση» were 382 px in a 351 px column). */
.bk-ab-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lt-space-4);
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

/* Review fix 25/09/2026: «Αποθήκευση» and the ledger are ONE item of the actions. Its max-content width (~440 px) is what the
   actions' line-breaking sees, so when they wrap (edit mode at 1366 / 1280 — arithmetic, not a browser measurement) the pair
   moves to the next line together and the ledger is never left alone on a line of its own. It wraps INSIDE itself only when
   the pair alone is wider than its line — a phone column (351 px) — so the page never scrolls sideways. Same gap as the
   actions, so nothing moves on a width where nothing wraps. The bar's height when anything wraps: booking.js
   `ltTrackActionBar` keeps --lt-actionbar-h / --lt-actionbar-h-edit true. */
.bk-ab-savegroup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lt-space-4);
    flex: 0 1 auto;
    min-width: 0;
}

.bk-ab-metarow {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: var(--lt-space-3);
    min-width: 0;
    min-height: var(--lt-control-h-sm);
    flex-wrap: wrap;
    margin: 0;
}

/* A new booking: row 2 shares its line with `.bk-ab-under` (the seller alone). In edit it is the line under the meta row, full width. */
.bk-ab-row2 {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: var(--lt-space-5);
    min-width: 0;
    min-height: var(--lt-control-h);
    flex-wrap: wrap;
}

    .bk-abwrap--meta > .bk-ab-row2 {
        grid-column: 1 / -1;
        grid-row: 4;
    }

/* Round 10: Πωλητής · Ακύρωση κράτησης… / Επαναφορά — right-aligned right under the ledger (its right edge is the ledger's). Markup
   order = Tab order: after row 1's actions, before row 2. One height per row (audit 18, owner 27/09/2026 «δεν είναι στοιχισμένο
   σωστα»): on the meta row's line the combo and the button take its --lt-control-h-sm (24 px, the bar stays 143 px); on row 2's line
   (new booking) they keep --lt-control-h like row 2's own controls. */
.bk-ab-under {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lt-space-4);
    min-width: 0;
}

    .bk-abwrap--meta .bk-ab-under .bk-control,
    .bk-abwrap--meta .bk-ab-under .bk-btn {
        height: var(--lt-control-h-sm);
    }

.bk-ab-field {
    display: flex;
    align-items: center;
    gap: var(--lt-space-3);
    flex: none;
}

    .bk-ab-field--excursion .bk-control {
        width: 13rem;
    }

    /* 19rem, not 13.5 (owner, 23/09/2026: «εχουμε χωρο δωσε λιγο ακομα να μην κόβεται η ημερομηνια»): the label is
       «όνομα + εύρος», e.g. «17 Νοέμβρη 3νυχτο 13-17/11/26», and at 13.5rem the year and the closing date were cut —
       the one part of the label that tells two departures of the same trip apart. */
    .bk-ab-field--date .bk-control {
        width: 19rem;
    }

    .bk-ab-field--free .bk-control {
        width: 9rem;
    }

    /* «Πωλητής» under the ledger (owner 25/09/2026, item 6 — SellerPicker; round 10, `.bk-ab-under`, owner 28/09/2026). Narrow on
       purpose: the label is the WPF UserName, 3-12 characters (User.cs:84-86), and the block (Πωλητής · «Ακύρωση κράτησης…») shares
       the meta row's line in edit, which must stay one line at 1103 px. The read-only text (a plain seller's own name) gets the same box. */
    .bk-ab-field--seller .bk-control {
        width: 8rem;
    }

.bk-ab-dateinfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

    .bk-ab-dateinfo p {
        margin: 0;
        font-size: var(--lt-text-label);
        line-height: .9375rem;
        color: var(--lt-ink-2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bk-ab-dateinfo b {
        font-weight: var(--lt-weight-semibold);
        color: var(--lt-ink);
    }

.bk-badge-cancel {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 1.25rem;
    padding: 0 var(--lt-space-3);
    border-radius: var(--lt-radius-xs);
    background: var(--lt-due);
    color: var(--lt-on-accent);
    font-size: var(--lt-text-caption);
    font-weight: var(--lt-weight-bold);
    letter-spacing: .02em;
}

/* ---------- NB-80: THE status bar — the only save-state element on the page ---------- */
.bk-statusbar {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lt-space-2) var(--lt-space-5);
    /* A one-line FLOOR, so an empty bar does not collapse and the common state changes (grey → red → green) move
       nothing. It is not a ceiling: the Blocked state carries up to three problem items with a «Μετάβαση» button
       each, and «+N ακόμη» deliberately expands to the full list, so enough content still grows the bar and pushes
       the page down. Capping it would fight «+N ακόμη», which exists to be expandable — the honest rule is the
       floor, and §6.2's manual pass is where the three-problem state is looked at (M26). */
    min-height: 1.75rem;
    padding: var(--lt-space-2) var(--lt-space-4);
    border: 1px solid;
    border-radius: var(--lt-radius-sm);
    font-size: var(--lt-text-label);
    line-height: var(--lt-leading-label);
}

.bk-statusbar__text {
    flex: none;
    font-weight: var(--lt-weight-semibold);
}

.bk-statusbar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lt-space-2) var(--lt-space-5);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .bk-statusbar__list li {
        display: flex;
        align-items: center;
        gap: var(--lt-space-3);
        min-width: 0;
    }

        .bk-statusbar__list li::before {
            content: "\00B7";
            opacity: .55;
        }

/* No `opacity`: the note is where NB-02's one-off messages land, so it is content, not decoration. The four state
   colours all pass 4.5:1 on their own grounds (saved is the tightest at 4.60:1), and .85 of them dropped saved to
   3.54:1 and dirty to 4.46:1 at --lt-text-label (12px, below the large-text threshold) — WCAG 1.4.3. It was not
   mockup fidelity either: the mockup's statusbar block has no `__note` rule at all. Secondary-ness comes from the
   regular weight next to the semibold headline. */
.bk-statusbar__note {
    color: inherit;
    font-weight: var(--lt-weight-regular);
}

.bk-statusbar .bk-link {
    color: inherit;
    text-decoration: underline;
}

.bk-statusbar--idle {
    border-color: var(--lt-line);
    background: var(--lt-sunken);
    color: var(--lt-ink-2);
}

.bk-statusbar--dirty,
.bk-statusbar--error {
    border-color: var(--lt-due-line);
    background: var(--lt-status-dirty);
    color: var(--lt-due);
}

.bk-statusbar--blocked {
    border-color: var(--lt-notice-line);
    background: var(--lt-notice-soft);
    color: var(--lt-notice-ink);
}

.bk-statusbar--saved {
    border-color: var(--lt-paid-line);
    background: var(--lt-status-saved);
    color: var(--lt-paid);
}

/* NB-40, the WARNING line (owner, 18/09/2026). It is a self-contained chip on its own full-width row INSIDE the
   bar, never a fifth bar state: the bar's own colour keeps meaning «can I save», and a warning must not change
   that answer. Its own background + border is also what keeps the contrast honest — notice-ink on notice-soft is
   the pairing --blocked already uses, whereas notice-ink laid straight over the saved (green) or dirty (red)
   ground would be an untested pair on whichever state the bar happens to be in. The heading says
   «η αποθήκευση επιτρέπεται» in words, so colour is not the only signal that this one does not block (§5.2). */
.bk-statusbar__warn {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lt-space-2) var(--lt-space-5);
    min-width: 0;
    padding: var(--lt-space-2) var(--lt-space-3);
    border: 1px dashed var(--lt-notice-line);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-notice-soft);
    color: var(--lt-notice-ink);
}

.bk-statusbar__warnhead {
    flex: none;
    font-weight: var(--lt-weight-semibold);
}

/* ---------- the money ledger: Net τιμή · Υπόλοιπο, the last item of the actions ----------
   Owner 25/09/2026: «αυτο το μαυρο ειναι περιεργο δεν ταιριάζει και ειναι λιγο τρομακτικο. ισως να το καναμε πιο απαλο
   χρωμα?» and «επισης δεν ειναι στοιχισμενο σωστα με τα υπόλοιπα». It was the dark --lt-ledger-* box in a second grid column,
   label over figure, spanning row 1 and row 2 — so taller than the buttons and centred lower. Now a card of the MONEY role
   (the `lt-tint--money` class on it re-points --lt-card-bg, exactly as on the Κράτηση / Πληρωμές cards, CardTintTests) on ONE
   line, exactly --lt-control-h tall, inside `.bk-ab-actions`: the buttons' height and centre, the content's right edge, and
   row 1 keeps its 30px, so --lt-actionbar-h stays true. Υπόλοιπο takes the search's two colours (BookingSearch.razor gs-due /
   gs-paid, > 0,009 €); ink, ink-2, due and paid all keep 4.5:1 on the money tint (CardTintTests). */
.bk-ledger {
    display: flex;
    align-items: center;
    flex: none;
    height: var(--lt-control-h);
    border: var(--lt-border);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-card-bg);
    color: var(--lt-ink);
}

.bk-ledger__cell {
    display: flex;
    align-items: baseline;
    gap: var(--lt-space-3);
    min-width: 0;
    padding: 0 var(--lt-space-5);
    white-space: nowrap;
}

    .bk-ledger__cell + .bk-ledger__cell {
        border-left: var(--lt-border);
    }

.bk-ledger__label {
    font-size: var(--lt-text-caption);
    line-height: var(--lt-leading-caption);
    color: var(--lt-ink-2);
}

.bk-ledger__value {
    font-family: var(--lt-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--lt-text-num-md);
    font-weight: var(--lt-weight-semibold);
    line-height: 1.25rem;
}

.bk-ledger__value--due {
    color: var(--lt-due);
}

.bk-ledger__value--paid {
    color: var(--lt-paid);
}

/* ---------- shell primitives (mockup .btn / .control / .label / .link) ---------- */
.bk-label {
    font-size: var(--lt-text-label);
    font-weight: var(--lt-weight-medium);
    line-height: var(--lt-leading-label);
    color: var(--lt-ink-2);
    white-space: nowrap;
}

/* A WPF label too long for its column (owner 25/09/2026, item 10 — «#Θέση μετά την πίσω πόρτα», which WPF itself breaks onto
   two lines, BusesManagement_Window.xaml:83): it wraps instead of running past a phone's edge. */
.bk-label--wrap {
    white-space: normal;
}

.bk-control {
    display: block;
    min-width: 0;
    height: var(--lt-control-h);
    padding: 0 var(--lt-space-4);
    border: var(--lt-border-strong);
    border-radius: var(--lt-radius-sm);
    background-color: var(--lt-surface);
    font-size: var(--lt-text-control);
    color: var(--lt-ink);
}

.bk-control--sm {
    height: var(--lt-control-h-sm);
    font-size: var(--lt-text-label);
}

.bk-control:disabled,
.bk-control[readonly] {
    background-color: var(--lt-sunken);
    border-color: var(--lt-line);
    color: var(--lt-ink-2);
}

/* The mockup's own select (new-booking.html:232-234). The arrow is ours, not the browser's: the right padding
   both rules reserve is the space THIS glyph sits in, so without the `appearance` reset every select kept the
   native arrow and reserved a second, empty slot beside it — worst in the narrow grid cells. */
select.bk-control,
select.bk-cell {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234E5A66' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
}

select.bk-control {
    padding-right: 1.5rem;
}

select.bk-control:disabled {
    background-image: none;
}

.bk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lt-space-3);
    flex: none;
    height: var(--lt-control-h);
    padding: 0 var(--lt-space-5);
    border: var(--lt-border-strong);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-surface);
    color: var(--lt-ink);
    font-size: var(--lt-text-control);
    font-weight: var(--lt-weight-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

    .bk-btn:not(:disabled):hover {
        background: var(--lt-sunken);
        border-color: var(--lt-ink-3);
    }

.bk-btn--primary {
    background: var(--lt-accent);
    border-color: var(--lt-accent);
    color: var(--lt-on-accent);
    font-weight: var(--lt-weight-semibold);
    padding: 0 var(--lt-space-6);
}

    .bk-btn--primary:not(:disabled):hover {
        background: var(--lt-accent-hover);
        border-color: var(--lt-accent-hover);
    }

.bk-btn--danger {
    color: var(--lt-due);
    border-color: var(--lt-due-line);
}

    .bk-btn--danger:not(:disabled):hover {
        background: var(--lt-due-soft);
        border-color: var(--lt-due);
    }

/* Round 10 (owner 28/09/2026: «το αποθηκευση να ειναι πρασινο οταν εινα clickable και να εχει λιγο κενό απο το απόρριψη αλλαγών»):
   «Αποθήκευση» (#bk-save) is SOLID GREEN while it can be pressed — white on --lt-paid 5.27:1, on --lt-paid-hover 7.48:1 — and the grey
   of every disabled button otherwise (`.bk-btn:disabled` below outranks this class). The gap: a --lt-space-6 margin before it inside
   the save group (with the actions' own --lt-space-4 gap, 24 px from «Απόρριψη αλλαγών»), a space and not a divider line; on the
   button, not the group, so a phone's ledger line keeps its full 351 px. */
.bk-btn--save {
    background: var(--lt-paid);
    border-color: var(--lt-paid);
    color: var(--lt-on-accent);
    font-weight: var(--lt-weight-semibold);
    padding: 0 var(--lt-space-6);
}

    .bk-btn--save:not(:disabled):hover {
        background: var(--lt-paid-hover);
        border-color: var(--lt-paid-hover);
    }

    .bk-btn--save:focus-visible {
        outline: var(--lt-focus-ring);
        outline-offset: 2px;
    }

.bk-ab-savegroup > .bk-btn--save {
    margin-inline-start: var(--lt-space-6);
}

/* Round 10 (owner 28/09/2026: «προσθήκη πελατη με απαλο πρασινο»): «Προσθήκη πελάτη [Insert]» on the soft green of the money states —
   --lt-paid text on --lt-paid-soft is 4.60:1; the hover darkens the BORDER only (a darker ground would take the text under 4.5:1). */
.bk-btn--add {
    background: var(--lt-paid-soft);
    border-color: var(--lt-paid-line);
    color: var(--lt-paid);
}

    .bk-btn--add:not(:disabled):hover {
        background: var(--lt-paid-soft);
        border-color: var(--lt-paid);
        box-shadow: inset 0 0 0 1px var(--lt-paid);
    }

    .bk-btn--add:focus-visible {
        outline: var(--lt-focus-ring);
        outline-offset: 2px;
    }

    /* Review 29/09/2026: the «Insert» chip's border is --lt-on-accent-line (white 45 %, made for a dark button) — on the soft green it
       vanished (~1.06:1). The button's own green line instead; a disabled button keeps the plain chip (no green outline on grey). */
    .bk-btn--add:not(:disabled) .bk-kbd {
        border-color: var(--lt-paid-line);
    }

/* disabled wins over every variant and every hover */
.bk-btn:disabled,
.bk-btn:disabled:hover {
    background: var(--lt-sunken);
    border-color: var(--lt-line);
    color: var(--lt-ink-3);
    cursor: not-allowed;
}

.bk-link {
    background: none;
    border: 0;
    padding: 0;
    font-size: var(--lt-text-label);
    font-weight: var(--lt-weight-semibold);
    color: var(--lt-accent-hover);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .bk-link:hover {
        text-decoration: underline;
    }

/* UX 20/10/2026, X15 — ONE focus look (WCAG 2.4.7): only «Αποθήκευση» and «Προσθήκη πελάτη» drew the app's accent ring, every other
   .bk-btn and .bk-link fell back to the browser's own. `:focus-visible`, so a mouse click draws nothing. The two variant rules below
   (`.bk-btn--save` / `.bk-btn--add`) say the same and stay: CustomersHeadTests / ActionBarRound10Tests pin them by name. */
.bk-btn:focus-visible,
.bk-link:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
}

.bk-kbd {
    font-family: var(--lt-font-num);
    font-size: var(--lt-text-caption);
    line-height: .875rem;
    padding: 0 .25rem;
    border: 1px solid var(--lt-on-accent-line);
    border-radius: var(--lt-radius-xs);
    background: transparent;
    color: inherit;
}

/* «Μετάβαση» target: clear the sticky block before the row is revealed. Edit mode adds the NB-90 meta row, so
   the bar is taller there (the mockup switches --lt-actionbar-h on data-mode="edit"); the page sets bk-page--edit. */
.bk-jump-target {
    scroll-margin-top: calc(var(--lt-topbar-h) + var(--lt-actionbar-h) + var(--lt-space-7));
}

/* 12 + 28 + 6 + 30 + 6 + 24 + 6 + 30 + 1 = 143px — see the token's own note in app.css. Keeps .bk-jump-target's
   scroll-margin-top correct inside the edit page. */
.bk-page--edit {
    --lt-actionbar-h: var(--lt-actionbar-h-edit);
}

/* The mockup's `html { scroll-padding-top: … }` (new-booking.html:179). Without it nothing tells the browser to
   clear the sticky bar when SEQUENTIAL FOCUS NAVIGATION scrolls a control into view, so Shift+Tab onto a control
   just above the fold left it behind the bar — WCAG 2.4.11 Focus Not Obscured.

   On `html`, and it has to be: the DOCUMENT VIEWPORT takes its scroll-padding from the ROOT element. `body` is not
   the scroll container here, so the same declaration on `body` is simply inert — that pattern does not transfer to
   a property that has to land on the scroller itself. Still scoped with :has, so no other page is affected.

   Both now add --lt-topbar-h: the app shell's top bar is sticky above the action bar, so the space to clear is
   BOTH bars. The selector moved from `main.bk-wide` (deleted with the old wide layout) to `main.lt-main--wide`,
   which is what WideLayout renders today — left on the dead class it would simply never match, and focus would
   land behind the bar again with nothing failing.

   The edit variant needs its OWN selector rather than riding on --lt-actionbar-h: custom properties inherit
   DOWNWARD, and `.bk-page--edit` is a descendant of `html`, so a declaration up here resolves the :root value and
   would pad 113px against a real 143px bar — the same shortfall, just smaller. Both read the two tokens, so the
   numbers live in exactly one place.

   UX 20/10/2026, X16: since 20/09 seven grid pages WITHOUT an action bar use WideLayout too (Αναζήτηση, Πλάνο, Οφειλέτες, Οικονομικά,
   Πληρωμές, Σύνολα, Online πληρωμές), and the wide rule padded them for a bar they do not have — Tab parked the target ~113 px low.
   So: a wide page clears the top bar only, a page WITH the action bar clears both, an edit page its taller bar. The three are of
   equal weight (0,1,1 — `.lt-main--wide`, not `main.lt-main--wide`, which outweighed the edit rule) and the order decides: the
   more specific situation comes later. */
html:has(.lt-main--wide) {
    scroll-padding-top: calc(var(--lt-topbar-h) + var(--lt-space-4));
}

html:has(.bk-actionbar) {
    scroll-padding-top: calc(var(--lt-topbar-h) + var(--lt-actionbar-h) + var(--lt-space-4));
}

html:has(.bk-page--edit) {
    scroll-padding-top: calc(var(--lt-topbar-h) + var(--lt-actionbar-h-edit) + var(--lt-space-4));
}

/* UX 20/10/2026, X17 — the print BASE for the report pages printed with Ctrl+P (Οφειλέτες, Οικονομικά, Σύνολα, Πλάνο, Αναζήτηση). The
   only print sheet was the documents' (DocStyles.razor), so any other page printed the dark rail's margin, the top bar with the quick
   search and the footer. Here, not in app-shell.css (the shell sheet allows its ONE 60rem query only — ShellStyleGuardTests): the
   shell's chrome by its current names, the content column without the rail's margin, a white ground (the body's painted rail strip
   is a background image). Each page with an inner scroll box (`.gs-scroll`, `.plan-wrap`) opens it in its own print rule — that is
   the page's file. The documents keep their own stricter block; the two agree. */
@media print {
    nav.lt-rail,
    header.lt-topbar,
    footer.lt-shell-footer,
    .lt-skip,
    .lt-imp,
    #blazor-error-ui {
        display: none;
    }

    main.lt-main {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    body:has(main.lt-main) {
        background: var(--lt-surface);
    }
}

/* UX 20/10/2026, G-4 (critic; wave-2 review) — the shell's chrome by its current name, like the print block above (and here, not after the
   calendar section, whose selectors are all bk-: GreekDateInputMarkupTests). While «Βλέπετε ως … · Προβολή μόνο» shows, the phone's top bar
   is taller than --lt-topbar-h (the strip takes a line of its own, app-shell.css), and the z-40 action bar stuck at that token covered the
   strip and its «Επιστροφή» on every scrolled editor (measured at 375: the hit test landed on the status bar). Impersonation is view only
   («δεν επιτρέπονται αλλαγές», ViewAs), so the bar has nothing to keep in reach: on a phone screen it scrolls with the page instead. Never
   the token itself — it is also the top bar's min-height and the drawer's rows. */
@media screen and (max-width: 60rem) {
    html:has(.lt-imp) .bk-actionbar {
        position: relative;
        top: auto;
    }
}

/* ============================================================================
   Moved verbatim out of BookingEditor.razor's <style> block (§5.2).
   ========================================================================= */
.bk-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 992px) {
    .bk-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    }
}

.bk-card > .card-header {
    font-size: .85rem;
    padding: .3rem .6rem;
}

.bk-totals {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .75rem;
    font-size: .9rem;
    margin: 0;
}

    .bk-totals dt {
        font-weight: 500;
        color: #555;
    }

    .bk-totals dd {
        margin: 0;
        text-align: right;
        font-weight: 600;
    }

.bk-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    overflow: auto;
}

/* ConfirmDialog's key scope (owner correction 27/09/2026): stops a question's keydown from bubbling to the page behind it
   (Ctrl+Enter / F2 / F4 of the editors' PageKey). No box of its own — the fixed .bk-modal inside it is the whole dialog. */
.bk-dlg-scope {
    display: contents;
}

/* ConfirmDialog's answers (owner 28/09/2026, a deleted customer's «Εξτρά»: «να ρωταει τον χρήστη»): one right-aligned row that WRAPS
   when a third answer does not fit — measured at 375 px, «Άκυρο» · «Κράτα τα εξτρά» · «Διαγραφή και των εξτρά» pushed «Άκυρο» 12 px
   past the dialog's left edge; wrapped, the red answer takes a line of its own. Only the question's own buttons: every other dialog
   footer (a status line beside «Κλείσιμο») keeps the one row it had. */
.bk-dlg-answers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--lt-space-4);
}

/* ============================================================================
   STAGE «top band + placement» (§5.1 / §5.2). Ported from the approved mockup's
   .band / .card / .avail / .trow / .prow / .strip / .totals / .flags rules, with
   the bk- prefix so nothing here can meet Bootstrap or Blazorise. The mockup's
   own .card is NOT reused as .bk-card: that class is already a Bootstrap-card
   modifier on the six cards this stage leaves alone (tabs, Ανάλυση, Έγγραφα,
   Ακύρωση, Ιστορικό, Πελάτες). The band's cards are .bk-bandcard.
   ========================================================================= */

/* ---------- shared primitives the band and the strip need ---------- */
.bk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.bk-page .bk-caption,
.bk-page .bk-colcap,
.bk-page .bk-hint,
.bk-page .bk-legend,
.bk-page .bk-state {
    font-size: var(--lt-text-caption);
    font-weight: var(--lt-weight-regular);
    line-height: var(--lt-leading-caption);
    color: var(--lt-ink-2);
    margin: 0;
}

.bk-page .bk-legend {
    display: block;
    margin-bottom: var(--lt-space-1);
    font-weight: var(--lt-weight-medium);
}

.bk-field {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-1);
    min-width: 0;
}

    .bk-field > label {
        font-size: var(--lt-text-caption);
        line-height: var(--lt-leading-caption);
        color: var(--lt-ink-2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* The note of the group «Κράτηση» card (ReservationPanel). It grows into the card's spare height but NEVER shrinks
   below its own content (25/09/2026, owner item 6, images/27.png): with `flex-shrink: 1; min-height: 0` a full card squeezed
   it, and `.bk-field > label` (overflow: hidden) shrank to zero — the «Σημείωση κράτησης» label vanished. The box itself takes
   the grown height, so a spare 100px is more room to write, not a gap under a three-line box. The Ατομικά (round 9) and Τρίτων
   (UX 20/10/2026, TP-2) cards are as tall as their content, so their notes have no spare height to grow into and do not carry it. */
.bk-field--grow {
    flex: 1 0 auto;
}

    .bk-field--grow > .bk-control--area {
        flex: 1 1 auto;
    }

/* An amount box on its label's line, as WPF's narrow GroupBoxes have it (owner 28/09/2026, round 9, for the Ατομικά «Ποσά»: «τα ποσα
   το ιδιο»; UX 20/10/2026, TP-2: the Τρίτων «Κράτηση» — «Net τιμή *» and «Προμήθεια», WPF's 195 px box with each label beside its box,
   NewReservation_ThirdParty_UserControl.xaml:662-800). The label at the dt's size, left; the box right, 7rem with its € (or the static
   figure that takes its place). Per FIELD, not per card: the same cards hold a note whose label stays above its box. The ids, the
   validation, aria and the red text are the markup's. */
.bk-field--inline {
    flex-direction: row;
    align-items: center;
    column-gap: var(--lt-space-4);
}

    .bk-field--inline > label {
        flex: 1 1 auto;
        min-width: 0;
        font-size: var(--lt-text-control);
        line-height: var(--lt-leading);
    }

    .bk-field--inline > .bk-withunit,
    .bk-field--inline > .bk-control--static {
        flex: 0 0 7rem;
        width: 7rem;
    }

/* The shell gave .bk-control fixed widths per action-bar field; inside a .bk-field it fills the column,
   exactly as the mockup's .control does. The action bar's own rules are more specific and still win. */
.bk-control {
    width: 100%;
}

.bk-control--num {
    text-align: right;
    font-family: var(--lt-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--lt-text-num);
}

.bk-control--static {
    display: flex;
    align-items: center;
    background: var(--lt-sunken);
    border-color: var(--lt-line);
    color: var(--lt-ink-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
}

.bk-control--area {
    height: auto;
    padding: var(--lt-space-3) var(--lt-space-4);
    line-height: var(--lt-leading);
    resize: vertical;
}

.bk-check {
    display: inline-flex;
    align-items: center;
    gap: var(--lt-space-3);
    min-height: var(--lt-check-row-h);
    font-size: var(--lt-text-control);
    line-height: var(--lt-check-row-h);
    color: var(--lt-ink);
    white-space: nowrap;
    cursor: pointer;
}

.bk-withunit {
    display: flex;
    align-items: center;
    gap: var(--lt-space-2);
    min-width: 0;
}

    .bk-withunit .bk-control {
        flex: 1 1 auto;
    }

    .bk-withunit .bk-control--pct {
        flex: 0 0 3.25rem;
    }

.bk-unit {
    flex: none;
    font-size: var(--lt-text-label);
    color: var(--lt-ink-2);
}

.bk-btn--key {
    border-color: var(--lt-accent);
    color: var(--lt-accent-hover);
    font-weight: var(--lt-weight-semibold);
}

    .bk-btn--key:not(:disabled):hover {
        background: var(--lt-accent-soft);
        border-color: var(--lt-accent-hover);
    }

    .bk-btn--key:disabled,
    .bk-btn--key:disabled:hover {
        border-color: var(--lt-accent-line);
    }

.bk-btn--sm {
    height: var(--lt-control-h-sm);
    padding: 0 var(--lt-space-3);
    font-size: var(--lt-text-label);
}

.bk-btn:disabled .bk-chip {
    opacity: .7;
}

.bk-divider {
    flex: none;
    width: 1px;
    height: 1.25rem;
    background: var(--lt-line);
}

.bk-push {
    margin-left: auto;
}

/* ---------- chips: the placement code, always next to its text ---------- */
.bk-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 1.25rem;
    height: 1.125rem;
    padding: 0 .3125rem;
    border: 1px solid;
    border-radius: var(--lt-radius-xs);
    font-family: var(--lt-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--lt-text-caption);
    font-weight: var(--lt-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.bk-chip--room {
    color: var(--lt-pl-room-ink);
    background: var(--lt-pl-room-bg);
    border-color: var(--lt-pl-room-line);
}

.bk-chip--nn {
    color: var(--lt-pl-nn-ink);
    background: var(--lt-pl-nn-bg);
    border-color: var(--lt-pl-nn-line);
}

.bk-chip--ob {
    color: var(--lt-pl-ob-ink);
    background: var(--lt-pl-ob-bg);
    border-color: var(--lt-pl-ob-line);
}

.bk-chip--trns {
    color: var(--lt-pl-trns-ink);
    background: var(--lt-pl-trns-bg);
    border-color: var(--lt-pl-trns-line);
}

.bk-chip--od {
    color: var(--lt-pl-trns-ink);
    background: var(--lt-surface);
    border-color: var(--lt-pl-trns-line);
}

.bk-state {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 1.125rem;
    padding: 0 var(--lt-space-3);
    border-radius: var(--lt-radius-xs);
    font-family: var(--lt-font-ui);
    font-weight: var(--lt-weight-semibold);
    white-space: nowrap;
}

.bk-state--due {
    background: var(--lt-due-soft);
    color: var(--lt-due);
}

.bk-state--paid {
    background: var(--lt-paid-soft);
    color: var(--lt-paid);
}

/* ---------- messages and notices (§5.2: exactly three message places) ---------- */
.bk-page .bk-msg {
    min-height: var(--lt-leading-label);
    margin: 0;
    font-size: var(--lt-text-label);
    line-height: var(--lt-leading-label);
}

.bk-msg--error {
    color: var(--lt-due);
}

    .bk-msg--error::before {
        content: "";
        display: inline-block;
        width: .375rem;
        height: .375rem;
        margin-right: var(--lt-space-3);
        border-radius: 1px;
        background: currentColor;
        vertical-align: .08em;
    }

    .bk-msg--error:empty::before {
        content: none;
    }

.bk-msg--ok {
    color: var(--lt-paid);
}

.bk-msg--muted {
    color: var(--lt-ink-2);
    font-weight: var(--lt-weight-regular);
}

/* Owner 28/09/2026 («να σε αφήνει αλλα να βγάζει προειδοποίηση»): the placement strip's single-use line («Μονόκλινη χρήση: … Χρεώστε
   επιπλέον.», PlacementStrip MainClass). A warning, never a refusal: the notice ink of the NB-40 chip (4.5:1 on every card tint,
   CardTintTests), not the red of a blocker and not the grey of the «… έχει μπεί ήδη …» note. Colour only — same size and weight as
   .bk-msg--muted, so the one-line slot does not move. */
.bk-msg--warn {
    color: var(--lt-notice-ink);
    font-weight: var(--lt-weight-regular);
}

.bk-page .bk-notice {
    margin: 0;
    padding: var(--lt-space-2) var(--lt-space-4);
    border: 1px solid var(--lt-notice-line);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-notice-soft);
    color: var(--lt-notice-ink);
    font-size: var(--lt-text-label);
    line-height: var(--lt-leading-label);
}

.bk-notice--flat {
    margin-block: var(--lt-region-gap) 0;
}

.bk-availwarn {
    flex: none;
}

    .bk-availwarn summary {
        cursor: pointer;
        font-weight: var(--lt-weight-semibold);
    }

    /* NB-17 emits one warning per roomless reservation, so an opened notice can be long. It scrolls inside
       itself: the band height is fixed, and a warning the seller has to read must never be clipped away with
       the tree's footer. */
    .bk-availwarn ul {
        margin: var(--lt-space-2) 0 0;
        padding-left: var(--lt-space-7);
        list-style: disc;
        max-height: 7rem;
        overflow: auto;
    }

/* ---------- the band: Διαθέσιμα · Κράτηση · Πληρωμές, equal height (§5.1) ---------- */
/* 25/09/2026 — --lt-band-h is the row's FLOOR, no longer its ceiling. Owner (item 6, images/27.png vs 28.png): «οταν ανοιξω
   συνεργατη δεν χωραει. χαλαει τη σημείωση κράτησης». At 1366×768 the clamp resolves to ~292px, while the Κράτηση card wants
   ~313px with «Συνεργάτης» ticked and ~380px in edit (the «Έγγραφα και λίστες» group): the fixed row squeezed the note until
   its label vanished and the Πωλητής label sat on the box. The row now grows to the Κράτηση card when that is taller. The two
   other cards are `.bk-bandcard--fill`: size containment keeps their content (a hotel tree, a payment history — both can be
   hundreds of rows) out of the row's height, and they fill whatever height the row has and scroll inside, as §5.1 wants.
   `contain: size` and nothing stronger: layout / paint containment would clip or re-anchor what pops out of those cards. */
.bk-band {
    display: grid;
    grid-template-columns: minmax(0, 14fr) minmax(28.5rem, 12fr) minmax(0, 10fr);
    grid-template-rows: minmax(var(--lt-band-h), auto);
    gap: var(--lt-region-gap);
    margin-top: var(--lt-region-gap);
}

    .bk-band > .bk-bandcard--fill {
        contain: size;
    }

/* Desktop is the spec's scope (§5.1, from 1280px), but nothing may scroll sideways at any width:
   below the band's natural minimum the three cards stack instead of overflowing — each as tall as its content, as before. */
@media (max-width: 1279px) {
    .bk-band {
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 1fr);
        grid-template-rows: none;
    }

        .bk-band > .bk-bandcard--fill {
            contain: none;
        }
}

@media (max-width: 860px) {
    .bk-band {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ΑΠΟΧΡΩΣΗ ΑΝΑ ΡΟΛΟ (ιδιοκτήτης, 23/09/2026: «να βάζαμε καποια απαλα χρωματα ως φοντο στις κάρτες να βοηθάει το
   ματι»). Every card family on this screen — .bk-bandcard, .bk-panel, .bk-strip — paints the card's CURRENT tint,
   app.css --lt-card-bg, and its heading the --lt-card-band. Both are white until a .lt-tint--<role> class on the card
   (css/home.css) re-points them, so an untinted card, including every management screen's .bk-panel, looks exactly as
   before. The role map is NEW_BOOKING_SPEC §7. The heading gets the card's inner radius on its top corners: these
   cards have no `overflow: hidden`, and a square band would poke past the 6px border. */
.bk-bandcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--lt-card-bg);
    border: var(--lt-border);
    border-radius: var(--lt-radius-md);
}

/* Wraps as a last resort: at 1366px the Διαθέσιμα column is ~500px and «Διαθέσιμα δωμάτια» + two filters +
   «Προβολή» would otherwise push past its edge. The filters shrink first (below), the header wraps only if that
   is still not enough — the band must never scroll sideways. */
.bk-bandcard__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lt-space-3) var(--lt-space-5);
    flex: none;
    min-height: var(--lt-card-head-h);
    padding: var(--lt-space-2) var(--lt-space-5);
    border-bottom: var(--lt-border-soft);
    border-radius: calc(var(--lt-radius-md) - 1px) calc(var(--lt-radius-md) - 1px) 0 0;
    background: var(--lt-card-band);
}

.bk-bandcard__title {
    flex: none;
    margin: 0;
    font-size: var(--lt-text-control);
    font-weight: var(--lt-weight-semibold);
    white-space: nowrap;
}

.bk-bandcard__meta {
    min-width: 0;
    font-size: var(--lt-text-caption);
    color: var(--lt-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-bandcard__tools {
    display: flex;
    align-items: center;
    gap: var(--lt-space-4);
    min-width: 0;
}

.bk-bandcard__tools--end {
    margin-left: auto;
}

/* §5.1: «the tree, the Κράτηση card body and the payment history scroll inside it». Since 25/09/2026 the band's row
   grows to the Κράτηση card (see `.bk-band`), so that body no longer needs to scroll; the tree and the payment history
   (`.bk-bandcard--fill`) still do, inside whatever height the row has. `overflow: auto` stays as the last resort. */
.bk-bandcard__body {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-4);
    flex: 1;
    min-height: 0;
    padding: var(--lt-space-4) var(--lt-space-5);
    overflow: auto;
}

/* The availability card scrolls through its own children instead (.bk-list for the tree and the pane,
   .bk-availwarn ul for the warnings), so the NB-16 note and the warning notice stay in place around them.
   `auto` and not `hidden`: the two non-shrinking siblings are capped, but a clipped warning would be worse
   than a last-resort scrollbar. */
.bk-bandcard__body--avail {
    padding-bottom: 0;
}

.bk-filters {
    display: flex;
    align-items: center;
    gap: var(--lt-space-4);
    margin-left: auto;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

    /* Elastic, not fixed: the two combos give up width before the header wraps. 5rem still shows «Όλα τα …»
       truncated rather than overflowing, and the full option text is in the open list. */
    .bk-filters .bk-control {
        flex: 1 1 6rem;
        width: auto;
        min-width: 5rem;
        max-width: 11rem;
    }

/* ---------- Διαθέσιμα: the tree and the «# / Τύπος» pane ---------- */
.bk-avail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lt-pane-w);
    flex: 1;
    min-height: 0;
}

.bk-avail__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

    .bk-avail__col + .bk-avail__col {
        border-left: var(--lt-border-soft);
    }

.bk-avail__empty {
    display: flex;
    align-items: center;
    gap: var(--lt-space-4);
    padding: var(--lt-space-4);
    font-size: var(--lt-text-label);
    color: var(--lt-ink-2);
}

.bk-colcap {
    display: flex;
    align-items: center;
    gap: var(--lt-space-3);
    flex: none;
    min-height: var(--lt-control-h-sm);
    margin-bottom: var(--lt-space-2);
    padding: 0 var(--lt-space-4);
    font-weight: var(--lt-weight-medium);
    white-space: nowrap;
}

.bk-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

    .bk-list ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

.bk-tree {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bk-trow {
    display: grid;
    grid-template-columns: .875rem 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--lt-space-3);
    width: 100%;
    height: var(--lt-list-row-h);
    padding: 0 var(--lt-space-4);
    border: 0;
    background: transparent;
    text-align: left;
    font-size: var(--lt-text-control);
    color: var(--lt-ink);
    cursor: pointer;
    /* UX 20/10/2026, MOB-P8: a double TAP on a type row is the double-click that places (NB-13), never a page zoom. */
    touch-action: manipulation;
}

    /* --lt-card-shade: --lt-sunken on a white card, the role's band on a tinted one — sunken over a tint of the same
       lightness would make the hover disappear. */
    .bk-trow:hover {
        background: var(--lt-card-shade);
    }

    .bk-trow:focus-visible {
        outline: var(--lt-focus-ring);
        outline-offset: -2px;
    }

.bk-trow--type {
    padding-left: 1.5rem;
}

.bk-tcaret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .875rem;
    height: .875rem;
}

    .bk-tcaret::before {
        content: "";
        width: .3125rem;
        height: .3125rem;
        border-right: 1.5px solid var(--lt-ink-2);
        border-bottom: 1.5px solid var(--lt-ink-2);
        transform: rotate(-45deg);
        transition: transform .12s ease;
    }

.bk-trow--hotel[aria-expanded="true"] .bk-tcaret::before {
    transform: rotate(45deg);
}

.bk-tcount {
    text-align: right;
    font-family: var(--lt-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--lt-text-num);
    font-weight: var(--lt-weight-semibold);
}

.bk-trow--type .bk-tcount {
    font-weight: var(--lt-weight-regular);
}

.bk-tname {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-trow--hotel .bk-tname {
    font-weight: var(--lt-weight-semibold);
}

.bk-tcap {
    color: var(--lt-ink-2);
    font-weight: var(--lt-weight-regular);
}

.bk-tnote {
    color: var(--lt-notice-ink);
    font-weight: var(--lt-weight-regular);
}

.bk-trow.is-target {
    box-shadow: inset 3px 0 0 var(--lt-accent);
}

    .bk-trow.is-target .bk-tname,
    .bk-trow.is-target .bk-tcount {
        font-weight: var(--lt-weight-bold);
    }

.bk-prow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--lt-space-4);
    width: 100%;
    height: var(--lt-list-row-h);
    padding: 0 var(--lt-space-4);
    border: 0;
    background: transparent;
    text-align: left;
    font-size: var(--lt-text-control);
    color: var(--lt-ink);
    cursor: pointer;
}

    .bk-prow:hover {
        background: var(--lt-card-shade);
    }

    .bk-prow:focus-visible {
        outline: var(--lt-focus-ring);
        outline-offset: -2px;
    }

.bk-prow.is-target {
    box-shadow: inset 3px 0 0 var(--lt-accent);
}

.bk-prow__count {
    font-family: var(--lt-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--lt-text-num);
    font-weight: var(--lt-weight-semibold);
    white-space: nowrap;
}

.bk-prow__name {
    min-width: 0;
    font-weight: var(--lt-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-pane-hint {
    padding: var(--lt-space-3) var(--lt-space-4) 0;
    white-space: normal;
}

/* ---------- Κράτηση: partner block, totals, flags ---------- */
.bk-partner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 9.5rem;
    gap: var(--lt-space-4);
    flex: none;
}

.bk-mid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--lt-space-5);
    align-items: start;
    flex: none;
}

.bk-totals {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
}

.bk-totals__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1.25rem;
    align-items: center;
    column-gap: var(--lt-space-4);
    min-width: 0;
}

/* Audit A7 (26/09/2026): the sub-line («εκ των οποίων Εξτρά …») WRAPS when the totals column narrows (≤ 860 px) instead of a
   fixed caption row that clipped it — `auto`, and the dd below drops nowrap / overflow hidden. */
.bk-totals__row--withsub {
    grid-template-rows: 1.25rem auto;
}

.bk-totals__row dt {
    min-width: 0;
    font-size: var(--lt-text-control);
    color: var(--lt-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-totals__row dd {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lt-space-3);
    margin: 0;
    font-family: var(--lt-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--lt-text-num);
    color: var(--lt-ink);
    white-space: nowrap;
}

    .bk-totals__row dd.bk-totals__sub {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
        font-family: var(--lt-font-ui);
        font-size: var(--lt-text-caption);
        line-height: var(--lt-leading-caption);
        color: var(--lt-ink-2);
        white-space: normal;
        overflow: visible;
    }

.bk-totals__row--rule {
    margin-top: 3px;
    padding-top: 3px;
    border-top: var(--lt-border-soft);
}

.bk-totals__row--strong dt,
.bk-totals__row--strong dd {
    color: var(--lt-ink);
    font-weight: var(--lt-weight-semibold);
}

.bk-totals__row--due,
.bk-totals__row--paid {
    grid-template-rows: 1.5rem;
}

    .bk-totals__row--due dt,
    .bk-totals__row--paid dt {
        color: var(--lt-ink);
        font-weight: var(--lt-weight-semibold);
    }

    .bk-totals__row--due dd {
        font-weight: var(--lt-weight-semibold);
        color: var(--lt-due);
    }

    .bk-totals__row--paid dd {
        font-weight: var(--lt-weight-semibold);
        color: var(--lt-paid);
    }

.bk-totals__row--neutral dd {
    color: var(--lt-ink-2);
}

.bk-flags {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bk-flags__grid {
    display: grid;
    grid-template-columns: max-content;
    row-gap: 2px;
}

.bk-flags__grid--docs {
    grid-template-columns: max-content max-content;
    column-gap: var(--lt-space-6);
}

.bk-flaghint {
    margin-top: var(--lt-space-2);
    white-space: normal;
}

/* ---------- Τοποθέτηση: the one placement strip ---------- */
/* Audit 5 (26/09/2026; owner 27/09/2026): the second row is `auto` — the message line grows with its content (two sentences,
   one line per skipped customer) instead of a fixed label height that clipped the second sentence with an ellipsis nobody
   could read. MessageCap caps it at three lines + «και N ακόμη», so it never grows past four. */
.bk-strip {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    grid-template-rows: var(--lt-control-h) auto;
    column-gap: var(--lt-space-6);
    row-gap: var(--lt-space-2);
    align-items: center;
    margin-top: var(--lt-region-gap);
    padding: var(--lt-space-3) var(--lt-space-5);
    background: var(--lt-card-bg);
    border: var(--lt-border);
    border-radius: var(--lt-radius-md);
}

.bk-strip__status {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--lt-space-1);
    min-width: 0;
    font-size: var(--lt-text-control);
}

.bk-kv {
    display: flex;
    align-items: center;
    gap: var(--lt-space-3);
    min-width: 0;
    margin: 0;
    color: var(--lt-ink-2);
    white-space: nowrap;
}

    .bk-kv b {
        font-weight: var(--lt-weight-semibold);
        color: var(--lt-ink);
    }

.bk-target {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--lt-weight-semibold);
    color: var(--lt-ink);
}

.bk-target--none {
    font-weight: var(--lt-weight-regular);
    color: var(--lt-ink-2);
}

.bk-strip__actions {
    display: flex;
    align-items: center;
    gap: var(--lt-space-4);
    min-width: 0;
}

/* Owner, 25/09/2026, item 2: «αυτες τις επεξηγησεις καλύτερα βαλτες ως hover στο κουμπι». Each button's reason is the
   `title` of its wrapper .bk-tip, never of the button: a DISABLED button fires no hover in Firefox and shows no tooltip
   there. `pointer-events: none` on the disabled button makes the pointer land on the wrapper in every browser, so the
   wrapper's title shows; the button keeps `disabled`, so Tab still skips it and a click still does nothing. The
   not-allowed cursor moves to the wrapper with it (the button's own `cursor` no longer applies without pointer events). */
.bk-tip {
    display: inline-flex;
    flex: none;
}

    .bk-tip > .bk-btn:disabled {
        pointer-events: none;
    }

    .bk-tip:has(> .bk-btn:disabled) {
        cursor: not-allowed;
    }

    /* UX 20/10/2026, wave-1 review: a greyed BOX swallows the hover the same way — Online χρήστες' own role select in «Επεξεργασία». */
    .bk-tip > .bk-control:disabled {
        pointer-events: none;
    }

    .bk-tip:has(> .bk-control:disabled) {
        cursor: not-allowed;
    }

/* UX 20/10/2026, MOB-P5 — a phone has no hover, so a grey «Τοποθέτηση», «Ίδια τιμή στους επιλεγμένους» or «Απόρριψη αλλαγών» never said
   why (owner 25/09 and 27/09/2026: the reason is the hover «οπου εχει νόημα»). A TAP on such a button shows the SAME title text in this
   bubble under it (booking.js, one shared element, touch only): the notice palette, never wider than the screen, above every dialog
   (1080) and calendar (1090 / 1091) layer. No new words. */
.bk-tapnote {
    position: fixed;
    z-index: 1095;
    max-width: calc(100vw - 1.5rem);
    margin: 0;
    padding: var(--lt-space-3) var(--lt-space-4);
    border: 1px solid var(--lt-notice-line);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-notice-soft);
    box-shadow: var(--lt-shadow-dialog);
    color: var(--lt-notice-ink);
    font-family: var(--lt-font-ui);
    font-size: var(--lt-text-label);
    line-height: var(--lt-leading-label);
    white-space: pre-line;
    overflow-wrap: anywhere;
    pointer-events: none;
}

/* One slot since 25/09/2026 (item 2): the grey line of the other buttons' reasons is gone — those are tooltips now. This
   slot keeps Τοποθέτηση's red reason (WPF's visible ErrorsInCanAddReservationToRoom), the last press's result or NB-27's
   green line, so it takes the whole width and keeps its reserved MINIMUM height (an empty slot does not collapse the row).
   Since audit 5 (27/09/2026) it WRAPS: `pre-line` keeps the one-line-per-customer breaks the page writes, `anywhere` breaks a
   long surname rather than overflowing the card, and nothing is clipped — MessageCap caps the lines instead. */
.bk-strip__reason {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: var(--lt-leading-label);
}

.bk-slot-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Below the desktop target the six buttons would push past the viewport; let them wrap instead. */
@media (max-width: 1279px) {
    .bk-strip {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    .bk-strip__status {
        grid-row: auto;
    }

    .bk-strip__actions {
        flex-wrap: wrap;
    }

    .bk-push {
        margin-left: 0;
    }
}

/* ---------- the bottom row: tabs + Ανάλυση δωματίων (§5.1) ---------- */
.bk-bottom {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--lt-region-gap);
    align-items: start;
}

@media (max-width: 992px) {
    .bk-bottom {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================================
   STAGE «lower half» (§5.1 / §5.2): the Πελάτες grid, the tab strip with «Έξοδα»,
   Ανάλυση δωματίων, the staged PaymentsPanel and the dialogs. Ported from the
   approved mockup's .card / .cust / .tabs / .simple / .dialog rules with the bk-
   prefix. A plain screen card is .bk-panel, NOT .bk-card: that class is still a
   Bootstrap-card modifier on the two cards this stage leaves to the action-bar
   step (Έγγραφα, Ακύρωση κράτησης), and rewriting it would half-restyle them.
   ========================================================================= */

/* ---------- the plain screen card (mockup .card) ---------- */
.bk-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-top: var(--lt-region-gap);
    background: var(--lt-card-bg);
    border: var(--lt-border);
    border-radius: var(--lt-radius-md);
}

.bk-panel__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lt-space-3) var(--lt-space-4);
    flex: none;
    min-height: var(--lt-card-head-h);
    padding: var(--lt-space-2) var(--lt-space-5);
    border-bottom: var(--lt-border-soft);
    border-radius: calc(var(--lt-radius-md) - 1px) calc(var(--lt-radius-md) - 1px) 0 0;
    background: var(--lt-card-band);
}

.bk-panel__title {
    flex: none;
    margin: 0 var(--lt-space-4) 0 0;
    font-size: var(--lt-text-control);
    font-weight: var(--lt-weight-semibold);
    white-space: nowrap;
}

.bk-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-4);
    min-width: 0;
    padding: var(--lt-space-4) var(--lt-space-5) var(--lt-space-5);
}

.bk-tools {
    display: flex;
    align-items: center;
    gap: var(--lt-space-4);
    min-width: 0;
    flex-wrap: wrap;
}

.bk-tools--end {
    margin-left: auto;
}

.bk-count {
    font-weight: var(--lt-weight-regular);
    color: var(--lt-ink-2);
}

/* Round 10 — the «Πελάτες» head of the three editors (owner 28/09/2026: «εδω το πελατες υπογραμιση»). Every card head draws the same
   --lt-border-soft rule, but on this card's warm people band it measures 1.02:1 against the band (1.12 against the grid's head row
   under it) — invisible — where the money cards' (Κράτηση / Ποσά / Πληρωμές) show theirs at 1.07 / 1.12 over a band and a body that
   differ in hue. The full --lt-line rule reads as a line here: 1.20:1 on the band, 1.31 on the grid head. One row that wraps: the
   title, the tools (`.bk-tools`, wrapping inside at a phone's 325 px), and «+ Δοκιμαστικός» pushed to the far right of whatever line
   it lands on — `.bk-push` is NOT used, its max-width 1279px reset would drop the push on a laptop. */
.bk-custhead {
    border-bottom: var(--lt-border);
}

.bk-custhead__end {
    margin-left: auto;
}

.bk-control--find {
    width: 13rem;
    height: var(--lt-control-h-sm);
    font-size: var(--lt-text-label);
}

    /* Audit 18 (26/09/2026; owner 27/09/2026 «18. … ακουγεται οκ»; Q3 «δεν είναι στοιχισμένο σωστα»): in the Πελάτες header the
       «Εύρεση» box sits on the SAME row as the .bk-btn buttons (--lt-control-h, 30 px), so it takes their height — one height per
       row. The 24 px form stays for the .bk-filters rows of Ξενοδοχεία / Εκδρομές, where every control is small. */
    /* Review 29/09/2026: 15rem, not 13rem — with no visible «Εύρεση» label since round 10 the placeholder is the box's only text, and
       «Εύρεση: όνομα, επίθετο ή τηλέφωνο» (CustomerFind.Placeholder) measures ~212 px at 13 px against 190 px inside a 13rem box (cut
       at «τηλέφ…»); 15rem leaves 222 px. Only the three editors put a find box under .bk-tools (the management pages' sit in .bk-filters). */
    .bk-tools .bk-control--find {
        width: 15rem;
        height: var(--lt-control-h);
        font-size: var(--lt-text-control);
    }

.bk-muted {
    color: var(--lt-ink-2);
}

.bk-tag {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 1.125rem;
    padding: 0 var(--lt-space-3);
    border: var(--lt-border);
    border-radius: var(--lt-radius-xs);
    background: var(--lt-sunken);
    font-size: var(--lt-text-caption);
    line-height: 1;
    color: var(--lt-ink-2);
    white-space: nowrap;
}

/* ---------- Πελάτες grid (NB-30 … NB-46) ---------- */
/* ~11 rows visible (header + 10), then it scrolls inside itself, so the tabs below stay reachable. */
.bk-gridwrap {
    overflow: auto;
}

.bk-gridwrap--tall {
    max-height: calc(var(--lt-row-h) * 11);
}

/* min-width is set per render by the component (--bk-cust-min): the conditional columns of NB-30 change it, and
   a flat value would either squash the default set or scroll a grid that fits. The wrapper scrolls, not the page. */
.bk-cust {
    table-layout: fixed;
    width: 100%;
    min-width: var(--bk-cust-min, 97rem);
    border-collapse: collapse;
    font-size: var(--lt-text-control);
}

.bk-w-n, .bk-w-sel { width: 1.875rem; }
.bk-w-room { width: 11rem; }
.bk-w-name { width: 7.5rem; }
.bk-w-surname { width: 8.5rem; }
.bk-w-phone { width: 6.25rem; }
.bk-w-place { width: 7.5rem; }
.bk-w-price { width: 5.5rem; }
.bk-w-board { width: 4rem; }
.bk-w-age { width: 4rem; }
.bk-w-email { width: 8rem; }
.bk-w-father { width: 7rem; }
.bk-w-note { width: auto; }
.bk-w-badges { width: 7rem; }
.bk-w-passport { width: 7.5rem; }
.bk-w-date { width: 6.5rem; }
.bk-w-discount { width: 6.5rem; }
/* NB-37 transports: the mockup's own .w-bus. Wide enough for «ΜΟΝΟ ΕΠΙΣΤΡΟΦΗ», which 4rem ellipsises. */
.bk-w-bus { width: 8.5rem; }

.bk-cust th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: var(--lt-row-h);
    padding: 0 var(--lt-space-3);
    border-bottom: var(--lt-border);
    background: var(--lt-sunken);
    text-align: left;
    font-size: var(--lt-text-label);
    font-weight: var(--lt-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-cust th.bk-r,
.bk-cust td.bk-r {
    text-align: right;
}

.bk-cust td {
    height: var(--lt-row-h);
    padding: 0;
    border-bottom: var(--lt-border-soft);
    background: var(--bk-row-bg, var(--lt-surface));
    white-space: nowrap;
}

/* NB-31: the tint alternates per RESERVATION (WPF LightPink / LightBlue), through the tokens of §5.2. */
.bk-cust tr.bk-g-a { --bk-row-bg: var(--lt-row-a); }
.bk-cust tr.bk-g-b { --bk-row-bg: var(--lt-row-b); }
.bk-cust tr.bk-g-end td { border-bottom: var(--lt-border); }

/* NB-95 «Εύρεση»: highlight, never hide — a hidden row could not be ticked, and ticking is how placement works. */
.bk-cust tr.bk-is-hit { --bk-row-bg: var(--lt-notice-soft); }

.bk-cust .bk-stk {
    position: sticky;
    z-index: 1;
}

.bk-cust th.bk-stk { z-index: 3; }
.bk-cust .bk-s1 { left: 0; }
.bk-cust .bk-s2 { left: 1.875rem; }
.bk-cust .bk-s3 { left: 3.75rem; }
.bk-cust .bk-s4 { left: 14.75rem; }
.bk-cust .bk-s5 { left: 22.25rem; box-shadow: inset -1px 0 0 var(--lt-line); }

.bk-cust .bk-c-n {
    padding-right: var(--lt-space-3);
    text-align: right;
    font-family: var(--lt-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--lt-text-caption);
    color: var(--lt-ink-2);
}

.bk-cust th.bk-c-n {
    font-family: var(--lt-font-ui);
}

/* §5.2 «Selection: one accent overlay» — the approved mockup puts it on the row NUMBER (`tr.is-sel td.c-n`) and
   nowhere else, so the reservation tint keeps saying which room a row belongs to. The ticked checkbox is the
   other signal; a full-row background would have to be translucent to avoid hiding the pink / blue, and the
   mockup defines no such token. Deliberately mockup-exact. */
.bk-cust tr.bk-is-sel td.bk-c-n {
    box-shadow: inset 3px 0 0 var(--lt-accent);
    color: var(--lt-accent-hover);
    font-weight: var(--lt-weight-semibold);
}

.bk-cust .bk-c-sel {
    text-align: center;
}

.bk-cust__empty {
    padding: var(--lt-space-4) var(--lt-space-5);
    font-size: var(--lt-text-label);
    color: var(--lt-ink-2);
    white-space: normal;
}

/* The editable cell: borderless until it has focus, so 20 columns do not read as 20 boxes. */
.bk-cell {
    display: block;
    width: 100%;
    min-width: 0;
    height: calc(var(--lt-row-h) - 1px);
    padding: 0 .3125rem;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    font-family: inherit;
    font-size: var(--lt-text-control);
    color: var(--lt-ink);
}

/* The cell's tighter arrow inset (new-booking.html:496); the reset and the glyph come from the rule by .bk-control. */
select.bk-cell {
    padding-right: 1.125rem;
    background-position: right .375rem center;
}

.bk-cell:focus-visible,
.bk-cell:focus {
    outline: var(--lt-focus-ring);
    outline-offset: -2px;
    background-color: var(--lt-surface);
}

.bk-cell:disabled {
    color: var(--lt-ink-2);
}

.bk-cell--caps {
    text-transform: uppercase;
}

.bk-cell--num {
    text-align: right;
    font-family: var(--lt-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--lt-text-num);
}

/* NB-35: «A value under 18 uses the accent text colour». */
.bk-cell--minor {
    color: var(--lt-accent-hover);
    font-weight: var(--lt-weight-semibold);
}

/* §5.3: an unparsable amount or date keeps what was typed and says so, instead of silently reverting.
   The error mark is an INSET BOX-SHADOW, not an outline, and deliberately so: `outline` is the focus indicator, and
   an author `outline` on .is-invalid beat both the UA ring (.bk-control had no focus rule of its own) and the
   .bk-cell rule below it at equal specificity — so an invalid field looked identical focused and unfocused, on
   exactly the fields a keyboard user has to reach in order to FIX the error (WCAG 2.4.7). Two properties, two
   signals, both visible at once. */
.bk-cell.is-invalid,
.bk-control.is-invalid {
    box-shadow: inset 0 0 0 2px var(--lt-due);
    color: var(--lt-due);
}

/* NB-40, the non-blocking cell mark (owner, 18/09/2026). Same inset-shadow technique as .is-invalid and for the
   same reason — it must not fight the focus outline — but in the notice colour and DASHED underneath, so «this is
   odd» and «this is refused» are told apart without relying on the two colours alone (§5.2). The text keeps the
   normal ink: the value is accepted and will be saved. Never set together with .is-invalid (RowIssues.Mark picks
   one), so there is no specificity race between them. */
.bk-cell.bk-cell--warn,
.bk-control.bk-cell--warn {
    box-shadow: inset 0 0 0 2px var(--lt-notice-line);
    border-bottom: 2px dashed var(--lt-notice-dot);
}

/* .bk-control had no focus rule at all and relied on the UA ring, which is what let .is-invalid replace it.
   A token ring of its own, matching .bk-cell's. */
.bk-control:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 1px;
}

.bk-cellunit {
    display: flex;
    align-items: center;
    padding-right: var(--lt-space-3);
}

    .bk-cellunit .bk-cell {
        flex: 1 1 auto;
    }

.bk-roomcell {
    display: flex;
    align-items: center;
    gap: var(--lt-space-3);
    min-width: 0;
    height: calc(var(--lt-row-h) - 1px);
    padding: 0 var(--lt-space-3);
    overflow: hidden;
}

.bk-roomcell__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--lt-text-label);
    font-weight: var(--lt-weight-medium);
}

.bk-chip--none {
    color: var(--lt-pl-none-ink);
    background: var(--lt-pl-none-bg);
    border-color: var(--lt-pl-none-line);
}

.bk-badgecell {
    display: flex;
    align-items: center;
    gap: var(--lt-space-2);
    height: calc(var(--lt-row-h) - 1px);
    padding: 0 var(--lt-space-3);
    overflow: hidden;
    color: var(--lt-ink-2);
}

/* §5.2 «Messages: exactly three places» — the grid's own line, plus the muted reason slot of NB-41 / NB-42. */
.bk-gridfoot {
    display: flex;
    align-items: center;
    gap: var(--lt-space-7);
    min-width: 0;
    padding: var(--lt-space-3) var(--lt-space-5);
    border-top: var(--lt-border-soft);
}

    .bk-gridfoot .bk-msg {
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ---------- the tab strip: Εξτρά · Έξοδα · Προαιρετικές · Ιστορικό (NB-70 … NB-72, NB-93) ---------- */
.bk-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--lt-space-6);
    flex: none;
    height: var(--lt-card-head-h);
    padding: 0 var(--lt-space-5);
    border-bottom: var(--lt-border-soft);
    /* The tab strip IS the heading of its card (the Εξτρά · Έξοδα · Προαιρετικές panel has no __head), so it wears
       the card's band exactly as a __head does. */
    border-radius: calc(var(--lt-radius-md) - 1px) calc(var(--lt-radius-md) - 1px) 0 0;
    background: var(--lt-card-band);
    overflow-x: auto;
}

    .bk-tabs [role="tab"] {
        display: inline-flex;
        align-items: center;
        gap: var(--lt-space-2);
        padding: 2px 0 0;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        font-size: var(--lt-text-control);
        font-weight: var(--lt-weight-medium);
        color: var(--lt-ink-2);
        white-space: nowrap;
        cursor: pointer;
    }

    .bk-tabs [role="tab"][aria-selected="true"] {
        border-bottom-color: var(--lt-accent);
        color: var(--lt-ink);
        font-weight: var(--lt-weight-semibold);
    }

.bk-tabpanel {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-4);
    min-width: 0;
    padding: var(--lt-space-4) var(--lt-space-5) var(--lt-space-5);
}

.bk-xform {
    display: grid;
    gap: var(--lt-space-4);
    align-items: end;
}

/* Audit 8 (27/09/2026): «Προσθήκη» sits in a .bk-tip wrapper (its reason on hover). The wrapper is the grid item now, so the
   button fills it — on a phone (one column) it keeps the full width it had as the grid item itself. */
.bk-xform > .bk-tip {
    display: flex;
}

    .bk-xform > .bk-tip > .bk-btn {
        flex: 1 1 auto;
    }

.bk-xform--extras {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 7rem auto;
}

.bk-xform--expenses {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.8fr) 7rem auto;
}

.bk-xform--optionals {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.8fr) 7rem auto auto;
}

@media (max-width: 992px) {
    .bk-xform--extras,
    .bk-xform--expenses,
    .bk-xform--optionals {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- the plain list table shared by every tab, Ανάλυση and the dialogs ---------- */
.bk-simple {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lt-text-control);
}

    /* The head row's shade follows the card (--lt-sunken on white, the role's band on a tint): plain sunken on a
       tinted card is the tint's own lightness and the head row would lose its band. */
    .bk-simple th {
        height: var(--lt-list-row-h);
        padding: 0 var(--lt-space-4);
        border-bottom: var(--lt-border);
        background: var(--lt-card-shade);
        text-align: left;
        font-size: var(--lt-text-label);
        font-weight: var(--lt-weight-semibold);
        white-space: nowrap;
    }

    .bk-simple th.bk-r,
    .bk-simple td.bk-r {
        text-align: right;
    }

    .bk-simple td {
        height: var(--lt-control-h);
        padding: var(--lt-space-2) var(--lt-space-4);
        border-bottom: var(--lt-border-soft);
        vertical-align: middle;
    }

    .bk-simple td.bk-num {
        font-family: var(--lt-font-num);
        font-variant-numeric: tabular-nums;
        font-size: var(--lt-text-num);
    }

    .bk-simple .bk-empty-cell {
        font-size: var(--lt-text-label);
        color: var(--lt-ink-2);
    }

    .bk-simple tfoot td {
        border-bottom: 0;
        font-size: var(--lt-text-label);
        color: var(--lt-ink-2);
    }

.bk-w-qty { width: 5.5rem; }
.bk-w-when { width: 8.5rem; }
.bk-w-user { width: 6rem; }

.bk-simple--compact th,
.bk-simple--compact td {
    padding-inline: var(--lt-space-3);
    white-space: nowrap;
}

/* NB-64 / NB-72: a stored row marked «θα διαγραφεί», and a staged row that is not saved yet. */
.bk-simple tr.bk-is-deleting td {
    text-decoration: line-through;
    color: var(--lt-ink-2);
}

/* Audit A2 / A3 (owner 27/09/2026): an «Εξτρά» or «Έξοδο» with a staged edit — the payment history's «θα αλλάξει» look
   (.bk-hist tr.bk-is-changing): the notice family, never the red of a blocker. */
.bk-simple tr.bk-is-changing > td {
    background: var(--lt-notice-soft);
}

.bk-tablewrap {
    max-width: 100%;
    overflow-x: auto;
}

.bk-acts {
    display: flex;
    gap: var(--lt-space-2);
    justify-content: flex-end;
}

.bk-btn--text {
    height: var(--lt-control-h-sm);
    padding: 0 var(--lt-space-2);
    border-color: transparent;
    background: transparent;
    font-size: var(--lt-text-label);
    color: var(--lt-accent-hover);
}

.bk-btn--text-danger {
    color: var(--lt-due);
}

/* ---------- Πληρωμές, staged (NB-60 … NB-64) ---------- */
/* The panel draws only its own contents: the band's third card is its shell on the editor, a Bootstrap card is
   its shell on BookingDetail. It fills whichever it is given, so the history can scroll inside the band. */
.bk-payments {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-4);
    min-height: 0;
    flex: 1;
}

.bk-pay-lines {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-1);
    flex: none;
}

.bk-pay-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--lt-space-4);
    flex: none;
}

/* UX 20/10/2026, PAY-1 — the new payment's form on ONE line where its card is wide enough (owner 28/09/2026 for Ατομικά: «στις πληρωμες
   η φορμα να ειναι σε μια γραμμη ωστε να εχει πιο πολύ υψος η λιστα»; 20/10/2026, Q1: «Ναι, και στα δύο» — Συνεργατών and Σκιάθος /
   Οργανωμένες / Μπάνσκο too). `.bk-pay-new` is PaymentsPanel's wrapper around the staged Ποσό · Μέθοδος (`.bk-pay-row`) and Σημείωση
   πληρωμής: no box of its own (`display: contents` — every caller lays out exactly as before), and a row that wraps in a card body
   that carries `.bk-payline` (the three editors' «Πληρωμές»). The two share a line once the card holds both bases (15.5rem + 8rem + gap:
   ~384 px of card body); narrower — the group band's card at 1366 — the note wraps under them, the two lines of before. The wrapper
   and not `.bk-payments` itself: the group band's history fills the card's height and scrolls inside it (`.bk-bandcard--fill`,
   `contain: size`; `.bk-histwrap { flex: 1 }` in the column), which a wrapping row would turn into a line as tall as its rows.
   «Out.» (Τρίτων) stays outside the wrapper, a line of its own. CHILD combinators from the card's `.bk-payments`: PaymentsPanel draws
   its edit modal (`.bk-payedit .bk-pay-row`) and its delete question after that section, and BookingDetail carries no `.bk-payline`. */
.bk-pay-new {
    display: contents;
}

.bk-payline .bk-payments > .bk-pay-new {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    gap: var(--lt-space-4);
    flex: none;
}

    .bk-payline .bk-payments > .bk-pay-new > .bk-pay-row {
        flex: 1 1 15.5rem;
        min-width: 0;
    }

    .bk-payline .bk-payments > .bk-pay-new > .bk-field {
        flex: 2 1 8rem;
        min-width: 0;
    }

.bk-histwrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

    .bk-histwrap .bk-list {
        border-block: var(--lt-border-soft);
    }

.bk-hist {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lt-text-label);
}

    .bk-hist th {
        position: sticky;
        top: 0;
        z-index: 1;
        height: var(--lt-list-row-h);
        padding: 0 var(--lt-space-3);
        background: var(--lt-card-shade);
        text-align: left;
        font-weight: var(--lt-weight-semibold);
        white-space: nowrap;
    }

    .bk-hist th.bk-r,
    .bk-hist td.bk-r {
        text-align: right;
    }

    .bk-hist td {
        padding: var(--lt-space-2) var(--lt-space-3);
        vertical-align: middle;
    }

    .bk-hist tr.bk-hist__main > td {
        border-top: var(--lt-border-soft);
    }

    .bk-hist tbody tr:first-child.bk-hist__main > td {
        border-top: 0;
    }

.bk-hist__subrow {
    display: flex;
    align-items: center;
    gap: var(--lt-space-4);
    min-width: 0;
    padding-bottom: var(--lt-space-2);
}

.bk-hist__names {
    min-width: 0;
    font-size: var(--lt-text-caption);
    color: var(--lt-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-hist__note {
    font-weight: var(--lt-weight-semibold);
    color: var(--lt-ink);
}

.bk-hist__acts {
    display: flex;
    align-items: center;
    gap: var(--lt-space-3);
    margin-left: auto;
    flex: none;
}

.bk-hist__empty {
    padding: var(--lt-space-4) var(--lt-space-3);
    font-size: var(--lt-text-label);
    color: var(--lt-ink-2);
}

/* UX 20/10/2026, M05 — the ONE «selected row» look of the app (the payment history's), now also for the Διαχείριση lists: the row whose
   copy is in the form above (`.bk-simple`, e.g. «Επεξεργασία: ΛΑΡΙΣΑ») and the picked excursion of Εκδρομές (`.bk-list`). The pages put
   `bk-is-selected` + aria-current on that row (MANAGEMENT_SPEC §4.2 «the selected row marked»; WPF's DataGrid shows it, MG-09). */
.bk-hist tr.bk-is-selected > td,
.bk-simple tr.bk-is-selected > td,
.bk-list .bk-is-selected {
    background: var(--lt-accent-soft);
}

.bk-hist tr.bk-is-deleting td {
    text-decoration: line-through;
    color: var(--lt-ink-2);
}

/* NB-66 (owner item 9, 25/09/2026): a stored payment with a staged edit — the notice family (the same soft yellow the
   status bar's «saving is allowed» warning uses), never the red of a blocker; the stored figures stay readable. */
.bk-hist tr.bk-is-changing > td {
    background: var(--lt-notice-soft);
}

.bk-tag--change {
    border-color: var(--lt-notice-line);
    background: var(--lt-notice-soft);
    color: var(--lt-notice-ink);
}

/* Audit item 17 (owner 27/09/2026, «να ανοιγει νεο modal»): the edit form is the body of the shared Modal (.bk-dialog--md), no
   longer a row under the payment — so no border of its own; the dialog is the card. The fields reuse .bk-pay-row, which already
   stacks below 700px, so at phone width nothing scrolls sideways. */
.bk-payedit {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-3);
    min-width: 0;
}

.bk-payedit__date {
    margin: 0;
    font-size: var(--lt-text-caption);
    color: var(--lt-ink-2);
}

    .bk-payedit__date b {
        color: var(--lt-ink);
        font-weight: var(--lt-weight-semibold);
    }

.bk-payedit__who {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

    .bk-payedit__who legend {
        margin-bottom: var(--lt-space-1);
        font-size: var(--lt-text-label);
        color: var(--lt-ink-2);
    }

/* «Design for the big case»: a group of 20+ customers scrolls INSIDE the list, never the panel; each name keeps one line
   with the full text in its title. */
.bk-payedit__list {
    display: flex;
    flex-direction: column;
    max-height: 9rem;
    overflow-y: auto;
    padding-inline: var(--lt-space-2);
    border: var(--lt-border-soft);
    border-radius: var(--lt-radius-xs);
}

    .bk-payedit__list .bk-check {
        min-width: 0;
    }

.bk-payedit__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- dialogs: the mockup's three widths and nothing else (§5.1) ---------- */
/* A dialog is a white card of its own, wherever in the DOM it is rendered: a Modal opened from inside a tinted card
   (the Πληρωμές or Εξτρά panels) would otherwise inherit that card's --lt-card-* slots and paint its tables' head rows
   in the card's band. The three slots go back to their :root values here. */
.bk-dialog {
    --lt-card-bg: var(--lt-surface);
    --lt-card-band: var(--lt-surface);
    --lt-card-shade: var(--lt-sunken);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 92vh;
    margin: var(--lt-space-7) auto;
    background: var(--lt-surface);
    border: var(--lt-border);
    border-radius: var(--lt-radius-lg);
    box-shadow: var(--lt-shadow-dialog);
    font-family: var(--lt-font-ui);
    font-size: var(--lt-text-control);
    color: var(--lt-ink);
}

.bk-dialog--sm { width: 28rem; }
.bk-dialog--md { width: 40rem; }
.bk-dialog--lg { width: 56rem; }

.bk-dialog__head {
    display: flex;
    align-items: center;
    gap: var(--lt-space-4);
    flex: none;
    padding: var(--lt-space-4) var(--lt-space-6);
    border-bottom: var(--lt-border-soft);
}

.bk-dialog__title {
    margin: 0;
    font-size: var(--lt-text-body);
    font-weight: var(--lt-weight-semibold);
}

.bk-dialog__close {
    margin-left: auto;
}

.bk-dialog__body {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-4);
    min-height: 0;
    padding: var(--lt-space-5) var(--lt-space-6);
    overflow: auto;
}

.bk-dialog__foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--lt-space-4);
    flex: none;
    padding: var(--lt-space-4) var(--lt-space-6);
    border-top: var(--lt-border-soft);
    background: var(--lt-sunken);
    border-radius: 0 0 var(--lt-radius-lg) var(--lt-radius-lg);
}

    .bk-dialog__foot .bk-msg {
        margin-right: auto;
    }

.bk-field--search {
    max-width: 30rem;
}

.bk-searchrow {
    display: flex;
    align-items: center;
    gap: var(--lt-space-4);
    min-width: 0;
}

    .bk-searchrow .bk-control {
        flex: 1 1 auto;
    }

.bk-dlg-list {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-2);
    margin: 0;
    font-size: var(--lt-text-label);
    color: var(--lt-ink-2);
}

    .bk-dlg-list b {
        color: var(--lt-ink);
        font-weight: var(--lt-weight-semibold);
    }

/* NB-98 «Μεταφορά» (owner 27/09/2026): the optionals the move deletes, said plainly inside the dialog — the notice tokens of
   .bk-notice (the dialog renders outside .bk-page, so that rule does not reach it). Wraps; no fixed width. */
.bk-dlg-warn {
    margin: 0 0 var(--lt-space-3);
    padding: var(--lt-space-2) var(--lt-space-4);
    border: 1px solid var(--lt-notice-line);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-notice-soft);
    color: var(--lt-notice-ink);
    font-size: var(--lt-text-label);
    line-height: var(--lt-leading-label);
    overflow-wrap: anywhere;
}

/* NB-98 «Μεταφορά» (owner 27/09/2026: «Του συνοδού να μένουν. Αλλά να στο λέει πάλι.»): the leader's optionals that STAY — said
   every time, but as information, not the warning above: the accent's soft tint, the page's ink. Same box shape as .bk-dlg-warn. */
.bk-dlg-note {
    margin: 0 0 var(--lt-space-3);
    padding: var(--lt-space-2) var(--lt-space-4);
    border: 1px solid var(--lt-line);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-accent-soft);
    color: var(--lt-ink);
    font-size: var(--lt-text-label);
    line-height: var(--lt-leading-label);
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .bk-pay-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================================
   Action-bar extras (NB-91 «Έγγραφα ▾», NB-92 «Ακύρωση κράτησης…», NB-87 «Συντομεύσεις»)
   These three replace the two always-open Bootstrap cards that used to sit at the foot of the bottom band,
   which were the last Bootstrap markup on the screen (§5.2 «one stylesheet»).
   ========================================================================= */
.bk-menu {
    position: relative;
    flex: none;
}

    /* The <summary> IS the button: a native disclosure opens on click, Enter and Space and closes on Esc, with no
       handler and no JS (the same reasoning §5.6 records for not writing shortcuts.js). */
    .bk-menu > summary {
        list-style: none;
    }

        .bk-menu > summary::-webkit-details-marker {
            display: none;
        }

.bk-menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + var(--lt-space-2));
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 11rem;
    padding: var(--lt-space-2);
    border: var(--lt-border-strong);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-surface);
    box-shadow: var(--lt-shadow-dialog);
}

    .bk-menu__list .bk-msg {
        padding: var(--lt-space-2) var(--lt-space-3);
    }

.bk-menu__item {
    display: block;
    padding: var(--lt-space-3) var(--lt-space-4);
    border-radius: var(--lt-radius-xs);
    color: var(--lt-ink);
    font-size: var(--lt-text-control);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

    a.bk-menu__item:hover {
        background: var(--lt-sunken);
    }

    /* NB-91 / §0.2: a document must never be printable from a dirty screen. Not `pointer-events: none` alone —
       the item stays in the accessibility tree with aria-disabled so the reason above it is discoverable. */
    .bk-menu__item.bk-is-off {
        color: var(--lt-ink-3);
        cursor: not-allowed;
    }

.bk-shortcuts {
    flex: none;
    font-size: var(--lt-text-label);
    color: var(--lt-ink-2);
    border-bottom: 1px dotted var(--lt-ink-3);
    cursor: help;
}

    .bk-shortcuts:focus-visible {
        outline: var(--lt-focus-ring);
        outline-offset: 2px;
    }

/* UX 20/10/2026, MOB-T1 — «μην το μπουκώνεις» (owner 23/09/2026): a touch screen has no keyboard, so the «Insert» / «F2» / «F4» / «Esc»
   chips and the «Συντομεύσεις» hint only take room on the busiest buttons and bars there. Hidden where the primary pointer is a finger
   with no hover (a phone or a tablet); a laptop with a touch screen still reports a mouse and keeps them. The keys keep working. */
@media (hover: none) and (pointer: coarse) {
    .bk-kbd,
    .bk-shortcuts {
        display: none;
    }
}

/* NB-92 / §4.11: the cancellation banner — «Ακυρώθηκε 12/08/2026 19:32 από Nikos — Λόγος: …». Red rather than the
   yellow notice ground, because it states a terminal fact about the booking, not a warning about the save. */
.bk-page .bk-notice--cancelled {
    border-color: var(--lt-due-line);
    background: var(--lt-due-soft);
    color: var(--lt-due);
}

/* NB-01: «Επιλέξτε εκδρομή» beside the combo while nothing else on the page takes input. */
.bk-hint--pick {
    flex: none;
    font-weight: var(--lt-weight-semibold);
    color: var(--lt-accent);
}

/* NB-04: a past «Από» is a warning, not a refusal (WPF lets a past booking be typed). */
.bk-hint--warn {
    flex: none;
    color: var(--lt-due);
}

/* Owner item 3, 25/09/2026 («αλλιώς να βγαζει προειδοποίηση?»): the Σκιάθος weekday warnings beside «Από» / «Έως» — WPF's
   «Προσοχή: …!» sentences (BookingEditor.razor, SkiathosDays.StaffWarnings). A warning, never a refusal, so it wears the
   NB-40 chip's look — notice tokens + DASHED border, the «η αποθήκευση επιτρέπεται» chip of the status bar — and not the red
   of a blocker. Its own class under .bk-page, NOT .bk-hint: `.bk-page .bk-hint` (0,2,0) would repaint it ink-2. Caption type
   and no vertical padding keep one line inside row 2's control height; `min-width: 0` + wrapping inside the chip keep a
   narrow column from scrolling sideways (the sentence is ~85 characters). */
.bk-page .bk-dayrule {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0 var(--lt-space-3);
    border: 1px dashed var(--lt-notice-line);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-notice-soft);
    color: var(--lt-notice-ink);
    font-size: var(--lt-text-caption);
    font-weight: var(--lt-weight-medium);
    line-height: var(--lt-leading-caption);
    overflow-wrap: anywhere;
}

/* NB-20: the row-number cell toggles the row, so it has to look like a target. */
.bk-c-n--click {
    cursor: pointer;
    user-select: none;
}

    .bk-c-n--click:hover {
        background: var(--lt-sunken);
    }

/* ============================================================================
   ΤΟ ΗΜΕΡΟΛΟΓΙΟ ΤΟΥ ΠΕΔΙΟΥ ΗΜΕΡΟΜΗΝΙΑΣ — Components/GreekDateInput.razor
   (owner 20/09/2026: «τελος οι ημερομηνιοες απο εως να εχουν calendar date
   picker»). The component is shared, not part of this screen, but its CSS is
   here for the reason ManagementPage.razor already gives for using this sheet
   off-screen: App.razor links it on EVERY page, so it is the one stylesheet all
   four callers (the booking bar, the customers grid, Αναζήτηση, the documents
   toolbar) already load. bk- prefix like everything else in this file.
   ========================================================================= */

/* The wrapper adds no layout: block, so it fills a grid cell exactly as the
   bare <input> used to, and sizes to the input inside a flex .bk-ab-field. */
.bk-cal {
    position: relative;
    display: block;
    min-width: 0;
}

/* The glyph's lane. Declared here, AFTER .bk-cell / .bk-control (and after
   Bootstrap's .form-control, which App.razor links first), so it wins on the
   caller's own class without that caller being edited. */
.bk-cal__field {
    padding-right: 1.375rem;
}

/* Two glyphs in the lane: the «×» of a clearable filter date sits left of the calendar one. */
.bk-cal__field--clear {
    padding-right: 2.625rem;
}

.bk-cal__clear {
    position: absolute;
    top: 50%;
    right: 1.375rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 0;
    border-radius: var(--lt-radius-xs);
    background: transparent;
    color: var(--lt-ink-2);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

    .bk-cal__clear--alone {
        right: .125rem;
    }

    .bk-cal__clear:hover {
        background: var(--lt-accent-soft);
        color: var(--lt-ink);
    }

    .bk-cal__clear:focus-visible {
        outline: var(--lt-focus-ring);
        outline-offset: 1px;
    }

.bk-cal__btn {
    position: absolute;
    top: 50%;
    right: .125rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 0;
    border-radius: var(--lt-radius-xs);
    background: transparent;
    font-size: .75rem;
    line-height: 1;
    cursor: pointer;
}

    .bk-cal__btn:hover:not(:disabled) {
        background: var(--lt-accent-soft);
    }

    .bk-cal__btn:disabled {
        opacity: .4;
        cursor: default;
    }

    .bk-cal__btn:focus-visible {
        outline: var(--lt-focus-ring);
        outline-offset: 1px;
    }

/* Above .bk-modal (1080): the field is used inside dialogs, and a calendar that
   opens behind the dialog it was opened from is worse than no calendar. */
.bk-cal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
}

.bk-cal__pop {
    position: absolute;
    top: calc(100% + .125rem);
    left: 0;
    z-index: 1091;
    width: 16rem;
    /* 400px viewport, the width this has to survive: never wider than the screen. */
    max-width: calc(100vw - 2rem);
    padding: var(--lt-space-4);
    border: var(--lt-border);
    border-radius: var(--lt-radius-md);
    background: var(--lt-surface);
    box-shadow: var(--lt-shadow-dialog);
    font-family: var(--lt-font-ui);
    font-size: var(--lt-text-control);
    line-height: var(--lt-leading);
    color: var(--lt-ink);
    text-align: left; /* .bk-cell--num right-aligns the date cells this opens under */
}

.bk-cal__head {
    display: flex;
    align-items: center;
    gap: var(--lt-space-2);
    margin-bottom: var(--lt-space-3);
}

.bk-cal__title {
    flex: 1;
    text-align: center;
    font-weight: var(--lt-weight-semibold);
    white-space: nowrap;
}

.bk-cal__nav {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: var(--lt-border);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-surface);
    line-height: 1;
    color: var(--lt-ink-2);
    cursor: pointer;
}

    .bk-cal__nav:hover {
        background: var(--lt-sunken);
        color: var(--lt-ink);
    }

.bk-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    /* Six rows' worth even in a 28-day February that starts on a Monday: the grid is whole weeks, not a fixed
       42 cells (GreekCalendar.Cells), so without this the popup would change height as the months are paged. */
    min-height: 12.5rem;
    align-content: start;
}

    /* The focused DAY carries the ring; a second one around the whole box only says «something in here». */
    .bk-cal__grid:focus-visible {
        outline: none;
    }

.bk-cal__dow {
    padding-bottom: var(--lt-space-2);
    text-align: center;
    font-size: var(--lt-text-caption);
    color: var(--lt-ink-3);
}

.bk-cal__day {
    height: 1.875rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--lt-radius-sm);
    background: transparent;
    font-family: var(--lt-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--lt-text-num);
    color: var(--lt-ink);
    cursor: pointer;
}

    .bk-cal__day:hover {
        background: var(--lt-sunken);
    }

    .bk-cal__day:focus-visible {
        outline: var(--lt-focus-ring);
        outline-offset: -2px;
    }

/* Σαββατοκύριακο, the way the WPF calendar reads. */
.bk-cal__day--we {
    color: var(--lt-due);
}

/* Σήμερα: an outline, never a fill — the fill means «this is the value». */
.bk-cal__day--today {
    border-color: var(--lt-accent-line);
    font-weight: var(--lt-weight-semibold);
}

.bk-cal__day--on {
    background: var(--lt-accent);
    border-color: var(--lt-accent);
    color: var(--lt-on-accent);
    font-weight: var(--lt-weight-semibold);
}

/* The customers grid is a scroll box (.bk-gridwrap { overflow: auto }), and an absolutely positioned popup inside
   one is clipped by it — the calendar of a Γέννηση or a passport cell would open into the scrollbar. Inside that
   wrapper it becomes the same centred sheet the phone gets, which no ancestor can clip. */
.bk-gridwrap .bk-cal__pop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bk-gridwrap .bk-cal__backdrop {
    background: rgba(22,33,43,.35);
}

/* 400px: a popup hanging under a field in the right-hand column would run off the screen, so below the phone
   breakpoint it is a centred sheet with bigger tap targets. `position: fixed` keeps it inside the viewport
   whatever the page does, and it pushes nothing either way. */
@media (max-width: 575.98px) {
    .bk-cal__pop {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(20rem, calc(100vw - 1.5rem));
    }

    .bk-cal__backdrop {
        background: rgba(22,33,43,.35);
    }

    .bk-cal__grid {
        min-height: 16rem;
    }

    .bk-cal__day {
        height: 2.5rem;
        font-size: var(--lt-text-control);
    }

    .bk-cal__nav {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* ============================================================================
   Η ΛΙΣΤΑ ΠΡΟΤΑΣΕΩΝ ΕΝΟΣ ΠΕΔΙΟΥ — Components/SuggestInput.razor (owner 25/09/2026:
   «πάλι δεν μου βγάζει την λημνο στην λιστα»). Our own combobox in place of the
   browser's <datalist>: the Αεροπορικό «Από» / «Πρός», and since audit 15 the
   customers grid's «Αναχώρηση» / «Επιστροφή» and the partner's «Email». Shared,
   so here beside `bk-cal` for the same reason: App.razor links this sheet on
   every page.
   AUDIT 15 (owner 27/09/2026: «να μοιαζει λιγο με το dropdown sto wpf … τωρα
   μοιαζει με το autocomplete των windows … ισως ενα περίγραμμα η πιο ξεκάθαρο
   φοντο και παντα να ανοιγει απο κατω»): WPF's drop-down — a DARK frame
   (--lt-ink-2, not the soft card line), a solid surface, a shadow, rows edge to
   edge, the highlighted row filled with the accent (white text, like WPF's
   selection), the pointer's row a soft accent. ALWAYS BELOW the box: the rules
   here are the no-JS fallback (absolute, the field's width, under it); with JS,
   booking.js pins the open list `position: fixed` under the box's rectangle —
   out of the customers grid's scroll box, which clips anything absolute — and
   never above it (short room: the page scrolls, the list does not flip).
   `max-width` keeps even the pinned list inside a 375 px screen. Tokens only, no
   tint token and no media query. z-index 50 is `.bk-menu__list`'s layer: over
   the editor and the sticky action bar (40), under the phone drawer's scrim /
   rail (55 / 60); nothing between the grid and <body> opens a stacking context.
   ========================================================================= */
.bk-suggest {
    position: relative;
    display: block;
    min-width: 0;
}

.bk-suggest__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 1rem);
    max-height: 18rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    border: 1px solid var(--lt-ink-2);
    border-radius: 0 0 var(--lt-radius-xs) var(--lt-radius-xs);
    background: var(--lt-surface);
    box-shadow: var(--lt-shadow-dialog);
    font-family: var(--lt-font-ui);
    line-height: 1.25;
    text-align: left;
    text-transform: none;
    white-space: normal;
}

    /* `display: flex` above would beat the browser's own [hidden] rule and leave an empty box under the field. */
    .bk-suggest__list[hidden] {
        display: none;
    }

.bk-suggest__opt {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-1);
    min-width: 0;
    padding: var(--lt-space-2) var(--lt-space-4);
    border-bottom: 1px solid var(--lt-line-soft);
    color: var(--lt-ink);
    cursor: pointer;
}

    .bk-suggest__opt:last-child {
        border-bottom: 0;
    }

    .bk-suggest__opt:hover {
        background: var(--lt-accent-soft);
    }

    /* The keyboard's row: WPF's selection — the accent, white text — so the row Enter will take is unmistakable. */
    .bk-suggest__opt.bk-is-active,
    .bk-suggest__opt.bk-is-active .bk-suggest__value,
    .bk-suggest__opt.bk-is-active .bk-suggest__note {
        background: var(--lt-accent);
        color: var(--lt-on-accent);
    }

/* Long names wrap inside the list's width instead of pushing the page sideways. */
.bk-suggest__value {
    font-size: var(--lt-text-control);
    color: var(--lt-ink);
    overflow-wrap: anywhere;
}

.bk-suggest__note {
    font-size: var(--lt-text-caption);
    color: var(--lt-ink-2);
    overflow-wrap: anywhere;
}

/* WPF's ▾ (`ShowAll`: the grid cells and the partner's Email are editable ComboBoxes in WPF). The box keeps a lane for it on
   the right; the chevron is drawn from the text colour, so it follows the theme (the select's arrow is a fixed-colour image). */
.bk-suggest--all > input {
    padding-right: 1.5rem;
}

.bk-suggest__all {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lt-ink-2);
    cursor: pointer;
}

    .bk-suggest__all::before {
        content: "";
        width: .375rem;
        height: .375rem;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-25%) rotate(45deg);
    }

    .bk-suggest__all:hover {
        color: var(--lt-accent);
    }

    /* A read-only box drops its arrow, as `select.bk-control:disabled` does. */
    .bk-suggest__all:disabled {
        visibility: hidden;
    }

/* ---------- THE MODE BAR (owner 23/09/2026, NEW_BOOKING_SPEC §8) ----------
   WPF's top tabs «Σκιάθος | Οργανωμένες | Ατομικά | Συνεργατών | Μπάνσκο» on «Νέα κράτηση» (new booking only) and
   «Πλάνο» — Components/ExcursionModeBar.razor. Here and not in a page <style>: two pages draw it, and this is the sheet
   App.razor links on every page (the argument GreekDateInput's `bk-cal` and ManagementPage already make).
   It sits ABOVE the editor's sticky BookingActionBar, never inside it: inside, it would change --lt-actionbar-h and
   break the scroll-margin / scroll-padding arithmetic the NB-90 meta row already had to account for.
   Tokens only (ShellStyleGuardTests checks every --lt-* read here is defined) and no z-index: nothing here layers. */
.bk-modebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lt-space-4) var(--lt-space-6);
    min-width: 0;
    margin-bottom: var(--lt-space-5);
    font-family: var(--lt-font-ui);
    font-size: var(--lt-text-body);
    line-height: var(--lt-leading);
    color: var(--lt-ink);
}

/* The editor's column has no top padding (app-shell.css `.lt-main--wide`: the sticky action bar is meant to touch the
   top bar), so the bar, which now comes first, brings its own; the phone column already has 12px and gets none. */
.bk-page > .bk-modebar {
    padding-top: var(--lt-space-5);
}

.bk-modebar__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lt-space-2);
    min-width: 0;
    max-width: 100%;
}

/* A segmented control: the selected mode is the filled accent button, the others outline. --lt-control-h (30px) is the
   height of every control on the page and clears the 24px touch-target minimum. */
.bk-modebar__tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: var(--lt-control-h);
    padding: 0 var(--lt-space-6);
    border: var(--lt-border-strong);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-surface);
    color: var(--lt-ink);
    font-family: inherit;
    font-size: var(--lt-text-control);
    font-weight: var(--lt-weight-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

    .bk-modebar__tab:not(.bk-modebar__tab--on):not(.bk-is-off):hover {
        background: var(--lt-sunken);
        border-color: var(--lt-ink-3);
    }

    .bk-modebar__tab:focus-visible {
        outline: var(--lt-focus-ring);
        outline-offset: 1px;
    }

.bk-modebar__tab--on {
    background: var(--lt-accent);
    border-color: var(--lt-accent);
    color: var(--lt-on-accent);
    font-weight: var(--lt-weight-semibold);
    cursor: default;
}

/* aria-disabled, not `disabled` (the tooltip must stay reachable) — so the look is this class, not :disabled. */
.bk-modebar__tab.bk-is-off {
    background: var(--lt-sunken);
    border-color: var(--lt-line);
    color: var(--lt-ink-3);
    cursor: not-allowed;
}

.bk-modebar__group {
    display: flex;
    align-items: center;
    gap: var(--lt-space-3);
    min-width: 0;
    flex: 0 1 auto;
}

    /* Wide enough for a 30-character Excursion.Name (varchar(30)). The global `.bk-control { width: 100% }` would
       otherwise stretch it across the whole bar. */
    .bk-modebar__group .bk-control {
        width: 22rem;
        max-width: 100%;
    }

.bk-modebar__hint,
.bk-modebar__msg {
    flex: none;
    margin: 0;
    font-size: var(--lt-text-caption);
    line-height: var(--lt-leading-caption);
}

/* NB-01's «Επιλέξτε εκδρομή», in the same accent the editor's old hint used (.bk-hint--pick). */
.bk-modebar__hint {
    font-weight: var(--lt-weight-semibold);
    color: var(--lt-accent);
}

.bk-modebar__msg {
    color: var(--lt-ink-2);
}

/* PHONE — the shell's ONE breakpoint (60rem, app-shell.css), not a new one. The mode buttons WRAP (UX 20/10/2026, MOB-P7: on one
   scrolling line the selected mode could sit off-screen to the right, and the owner's 23/09/2026 rule is that one mode is always
   selected — so it must be seen); the page never scrolls sideways. The combo takes the next line at full width. */
@media (max-width: 60rem) {
    .bk-page > .bk-modebar {
        padding-top: 0;
    }

    /* 23/09/2026: the sticky action bar bleeds to the column's edges by the column's OWN gutter. On a phone that gutter
       is --lt-space-5 (12px: app-shell.css, `.lt-main` inside the same 60rem query), not the desktop --lt-space-6
       (16px) — the 4px difference scrolled the whole editor sideways at 375px (§8.7). Same token as the shell, so the
       two cannot drift apart. */
    .bk-actionbar {
        margin-inline: calc(-1 * var(--lt-space-5));
        padding-inline: var(--lt-space-5);
    }

    /* The ledger is one unbreakable line (25/09/2026): two «12.345,00 €» figures with their labels are ~343 px, and the phone
       column is 351 px (375 − 2 × 12). The phone's own 8px cell padding keeps it inside with room to spare. (MOBILE P2's full-width
       ledger is in the SCREEN block after this one.) */
    .bk-ledger__cell {
        padding: 0 var(--lt-space-4);
    }

    /* Round 10: one column again on a phone — Πωλητής · Ακύρωση get a line of their own, right-aligned right under the ledger (the
       markup puts them straight after row 1), wrapping inside if the pair is wider than 351 px; the meta row and row 2 follow. Their
       own line, so they keep the full --lt-control-h (a touch target) in edit too. */
    .bk-abwrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-ab-row1,
    .bk-ab-under,
    .bk-ab-metarow,
    .bk-ab-row2,
    .bk-abwrap--meta > .bk-ab-row2 {
        grid-column: 1;
        grid-row: auto;
    }

    .bk-abwrap--meta .bk-ab-under .bk-control,
    .bk-abwrap--meta .bk-ab-under .bk-btn {
        height: var(--lt-control-h);
    }

    /* MOB-P7: the base rule's `flex-wrap: wrap` is no longer overridden — five tabs take two lines once (the bar is not sticky). */
    .bk-modebar__tabs {
        width: 100%;
        padding-bottom: var(--lt-space-2);
    }

    .bk-modebar__group {
        width: 100%;
    }

        .bk-modebar__group .bk-control {
            flex: 1 1 auto;
            width: auto;
        }

    /* UX 20/10/2026, MOB-P1 — the «Πελάτες» grid of all three editors: the five pinned columns (#, ☐, Δωμάτιο, Όνομα, Επίθετο) were
       30 + 30 + 176 + 120 + 136 = 492 px in a 351 px box, so Επίθετο, Τηλέφωνο and Τιμή never came into view. On a phone only # · ☐ ·
       Όνομα stay pinned (180 px — NB-30 «scrolling right never loses who a row is»), Δωμάτιο and Επίθετο scroll with the rest. The two
       cells are made STATIC, not `left: auto`: a sticky z-1 cell that no longer sticks would still paint OVER the pinned Όνομα as it
       scrolls under it. Their header cells keep the head row's vertical stick (top: 0) at the head row's own z-index. */
    .bk-cust td.bk-s3,
    .bk-cust td.bk-s5 {
        position: static;
        box-shadow: none;
    }

    .bk-cust th.bk-s3,
    .bk-cust th.bk-s5 {
        left: auto;
        z-index: 2;
        box-shadow: none;
    }

    .bk-cust .bk-s4 {
        left: 3.75rem;
        box-shadow: inset -1px 0 0 var(--lt-line);
    }

    /* UX 20/10/2026, MOB-P6 — the group editor scrolled the whole page sideways at 375 px: row 2's «Ημερομηνίες» is `flex: none` with a
       19rem combo (label ~84 + 6 + 304 = 394 px in 351). Scoped to row 2, because SellerPicker uses `.bk-ab-field` too and must not take a
       line of its own under the ledger. Each field takes the full line (Εκδρομή, Ημερομηνίες, Check In, Check Out): at half width a
       16 px date box keeps ~115 px for the ~129 px it needs. The control is the field's non-label child — the select itself, or
       GreekDateInput's `.bk-cal` wrapper (whose input then fills it). */
    .bk-ab-row2 .bk-ab-field {
        flex: 1 1 100%;
        min-width: 0;
    }

        .bk-ab-row2 .bk-ab-field > :not(.bk-label) {
            flex: 1 1 0;
            min-width: 0;
        }

        .bk-ab-row2 .bk-ab-field .bk-control {
            width: 100%;
        }

    /* MOB-P6: the «Κράτηση» card in one column (round 9's narrow card, on the phone only — the desktop band stays as GRP-1 left it):
       the partner block and the totals / flags pair stack, the ticks wrap in two columns. */
    .bk-partner,
    .bk-mid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-mid {
        row-gap: var(--lt-space-4);
    }

    .bk-flags__grid,
    .bk-flags__grid--docs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* MOBILE P4 (UX 20/10/2026): the row is 32 px (--lt-check-row-h, app-shell's phone :root) as its FLOOR; the text keeps the page's
       leading, so a label that wraps («Διαφορετικές ημερομηνίες») takes 2 × ~18 px, not 2 × 32 (measured 36 vs 64). */
    .bk-page .bk-check {
        white-space: normal;
        line-height: var(--lt-leading);
    }

    /* MOB-P6: a payment's «Αφορά» names took the rest of a nowrap line and were cut to nothing — they take their own line, two lines
       at most, the whole list in the title as before. */
    .bk-hist__subrow {
        flex-wrap: wrap;
    }

    .bk-hist__names {
        flex: 1 1 100%;
        white-space: normal;
        text-align: left;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* MOB-P6: the «Εύρεση» box (shown above five customers) takes its own line — at 16 px the 15rem box cut its own placeholder. The
       strip's divider has nothing to divide once its buttons wrap. */
    .bk-tools .bk-control--find {
        flex: 1 1 100%;
        width: auto;
    }

    .bk-strip .bk-divider {
        display: none;
    }

    /* UX 20/10/2026, MOB-P3 (grid knock-on): the shell's phone rule sets every staff field to 16 px (app-shell.css — so iOS stops
       zooming the page on each tap). A 16 px «dd/mm/yyyy» plus the calendar lane needs ~8rem and a price ~6.5rem, so those columns
       widen here, and the table's floor grows by the sum (up to five date columns + the price), or the auto «Σημείωση» column would
       give its width away. */
    .bk-w-date {
        width: 8rem;
    }

    .bk-w-price {
        width: 6.5rem;
    }

    .bk-cust {
        min-width: calc(var(--bk-cust-min, 97rem) + 8.5rem);
    }

    /* UX 20/10/2026, MOB-P8 (reduced — no second «Τοποθέτηση»: NB-21 / NB-80, each button exactly once on the page): the tree takes the
       card's whole width (beside the 9rem pane it kept ~180 px and cut every room name), and the «# / Τύπος» pane goes under it, short,
       so the way back up to the strip's «Τοποθέτηση» is short too. A double TAP on a type row places (NB-13's double-click), see
       `.bk-trow { touch-action }`. */
    .bk-avail {
        grid-template-columns: minmax(0, 1fr);
    }

        .bk-avail__col + .bk-avail__col {
            border-left: 0;
            border-top: var(--lt-border-soft);
        }

            .bk-avail__col + .bk-avail__col .bk-list {
                max-height: 10rem;
            }

    /* UX 20/10/2026, MOB-P9 (+ M12 / M13) — the row actions («+ Προσθήκη», «Επεξεργασία», ✕) were the LAST column of a nowrap table
       that scrolls sideways inside its box, so on every row they sat off the phone's screen. A table that carries `.bk-simple--acts`
       keeps that column pinned to the box's right edge, on the card's own ground (a dialog's white, a tinted card's tint), with the
       edge shadow the pinned grid columns use; the head cell keeps the head row's shade and rides above the other head cells (the
       customer search's head is sticky at z 1). Callers: CustomerSearchModal, the Εξτρά / Έξοδα / Προαιρετικές tabs and the Διαχείριση
       lists. A staged or selected row keeps its own colour (those rules are heavier). Row heights do not change. */
    .bk-simple--acts th:last-child,
    .bk-simple--acts td:last-child {
        position: sticky;
        right: 0;
        box-shadow: -.375rem 0 .375rem -.25rem rgba(22, 33, 43, .18);
    }

    .bk-simple--acts th:last-child {
        z-index: 2;
        background: var(--lt-card-shade);
    }

    .bk-simple--acts td:last-child {
        background: var(--lt-card-bg);
    }

    /* M13: a filter row (Πρ. Δωματίων: «Από» date · «Έως» date · «Και δωμάτια χωρίς ημερομηνίες» · combo ≈ 370 px in ~320) takes a
       line of its own under the card's title and wraps inside it instead of scrolling the page. */
    .bk-filters {
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    /* UX 20/10/2026, MOB-P10 — every edit is a modal (owner 27/09/2026), so dialogs are daily work on a phone too: a tall one was centred
       with 24 px margins and 92vh, so its title could sit above the fold, the keyboard covered the footer, and the page behind kept
       scrolling. Here it starts at the top with the gutter on all sides and is never taller than the VISIBLE screen (dvh where the
       browser has it), its body scrolls inside, the footer's buttons wrap (on a phone only: a desktop footer keeps its one row), and the
       page behind holds still while a dialog is open. */
    .bk-modal {
        align-items: flex-start;
        padding: var(--lt-space-4);
        overscroll-behavior: contain;
    }

    .bk-dialog {
        margin: 0 auto;
        max-height: calc(100vh - 2 * var(--lt-space-4));
        max-height: calc(100dvh - 2 * var(--lt-space-4));
    }

    .bk-dialog__body {
        overscroll-behavior: contain;
    }

    .bk-dialog__foot {
        flex-wrap: wrap;
    }

    :root:has(.bk-modal),
    :root:has(.bk-modal) body {
        overflow: hidden;
    }

    /* UX 20/10/2026, PAY-1: the new payment's form stacks again on a phone, as before (below 700 px `.bk-pay-row` itself puts Ποσό
       over Μέθοδος, and a note beside it would sit bottom-aligned with a hole beside Ποσό — round 9 review, 640 px). Both children by
       name: the base rules are (0,4,0), which a `> *` here would not beat. */
    .bk-payline .bk-payments > .bk-pay-new > .bk-pay-row,
    .bk-payline .bk-payments > .bk-pay-new > .bk-field {
        flex-basis: 100%;
    }

    /* UX 20/10/2026, MOBILE P4 — the targets a thumb cannot hit (owner 20/10 «Αποφάσισε εσύ»): the shell's phone tokens make every
       button, box and list row 36-40 px (app-shell.css, the 60rem :root); these are the editors' own glyphs, which read no token. The
       checkbox 20 px, an «Έγγραφα ▾» item 10 px of padding. The calendar's 📅 (no «×» in the editors) and the partner Email's ▾ get a
       32 / 36 px lane — only in the editors' own full-width boxes (row 2's dates, the «Υπηρεσία» editor — inline since round 11,
       `.bk-pbsvc__ed`, the same `.bk-pbsvced` form — the «Κράτηση» card): the
       customers grid keeps today's lanes (a 32 px row, --lt-row-h, and MOB-P3's widths are built on them), and the date boxes of the
       other pages are their pages' (a narrower box would lose the date's digits to a wider lane). Not here: the suggestion list's
       rows — its rules take no media query by design (SuggestInputMarkupTests), and a token-driven row would move the desktop. */
    .bk-check input[type="checkbox"] {
        flex: none;
        width: 1.25rem;
        height: 1.25rem;
    }

    .bk-menu__item {
        padding: .625rem var(--lt-space-4);
    }

    .bk-ab-row2 .bk-cal__field,
    .bk-pbsvced .bk-cal__field {
        padding-right: 2.25rem;
    }

    .bk-ab-row2 .bk-cal__btn,
    .bk-pbsvced .bk-cal__btn {
        width: 2rem;
        height: 2rem;
    }

    .bk-partner .bk-suggest--all > input {
        padding-right: 2.5rem;
    }

    .bk-partner .bk-suggest__all {
        width: 2.25rem;
    }
}

/* UX 20/10/2026, MOBILE P2 + P4 — the editors' PHONE bar. A SCREEN-only block (wave-2 review): an A4 / Letter portrait page is
   ~718-740 CSS px, under 60rem too, and with the bare query above the PRINTED booking lost its Κωδικός · Προστέθηκε line, its dates
   line and Πωλητής behind a «Περισσότερα» nobody can press on paper (measured: bar 317 px before, 165 after, at 702 px) — the trap the
   money pages' cards fell into (wave-1 fixer, item 1). Paper keeps the bar as it was before wave 2; the rules above print as before.
   The sticky bar took about half a phone's screen (~390 px of 812 in edit, ~450 with P4's 40 px targets). It keeps what NB-80 needs
   from anywhere on the page: the status bar (its list already capped «+N ακόμη»), the title — on a line of its own, wrapping if it
   must, never cut, so the booking number stays whole — then «Περισσότερα» at the left and «Αποθήκευση» at the right of one line, and
   the ledger (Net τιμή · Υπόλοιπο, critic C6) on the next. The actions' two wrappers stop being boxes (`display: contents`), so their
   buttons line up in row 1 in markup order; the spacer pushes «Αποθήκευση» right. Everything else of the bar — «Νέα κράτηση», «Έγγραφα»,
   «Απόρριψη αλλαγών», Πωλητής · Ακύρωση, the meta row, row 2's controls — shows only while the panel is open (`bk-abwrap--more`,
   BookingActionBar: the toggle, a new booking, a cancelled one, a «Μετάβαση» into it). Desktop: nothing here applies — the toggle is
   `display: none` outside this block. */
@media screen and (max-width: 60rem) {
    .bk-ab-row1 > .bk-ab-toggle {
        display: inline-flex;
    }

    .bk-ab-row1 {
        justify-content: flex-end;
    }

    /* The bar's title only: ManagementPage's h1 wears `.bk-ab-title` too, in its own tool row. */
    .bk-ab-row1 > .bk-ab-title {
        flex: 1 1 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .bk-ab-actions,
    .bk-ab-savegroup {
        display: contents;
    }

    /* The ledger has a line of its own, so its two cells share it — each label at its cell's left, its figure at the right. */
    .bk-ledger {
        flex: 1 1 100%;
    }

    .bk-ledger__cell {
        flex: 1 1 auto;
        justify-content: space-between;
    }

    /* Row 2 hides its CONTROLS, not itself (wave-2 review): the free dates' «Η ημερομηνία έχει περάσει» (§5.2: the reason is visible
       text) and Σκιάθος' «Προσοχή: …!» weekday sentences (owner item 3, 25/09/2026) are direct children of row 2 and are repeated
       nowhere — the status bar never carries them (they never enter SaveNow). A new Σκιάθος booking warns about its default Check In. */
    .bk-abwrap:not(.bk-abwrap--more) .bk-ab-under,
    .bk-abwrap:not(.bk-abwrap--more) .bk-ab-metarow,
    .bk-abwrap:not(.bk-abwrap--more) .bk-ab-row2 > .bk-ab-field,
    .bk-abwrap:not(.bk-abwrap--more) .bk-ab-row2 > .bk-ab-dateinfo,
    .bk-abwrap:not(.bk-abwrap--more) .bk-ab-actions > :not(.bk-ab-savegroup) {
        display: none;
    }

    /* …and the row itself only while it holds no warning (so no empty gap line). A rule of its own: a browser without `:has` drops
       just this one, and row 2 then shows whole, as at the end of wave 1. No comma inside `:has` (the test reader splits on commas). */
    .bk-abwrap:not(.bk-abwrap--more) .bk-ab-row2:not(:has(.bk-dayrule)):not(:has(.bk-hint--warn)) {
        display: none;
    }
}

/* ---------- Motion (round 11, 31/10/2026) ----------
   Owner 29/09/2026, for the Ατομικά «Υπηρεσία» editor, ordered 31/10/2026 («atomika nai kanto»): «αλλιώς θα μπορούσε να ανοιγει στο πάνω
   μερος της λίστας, να τα σπρωχνει ολα προς τα κατω και κατα την αποθηκευση με ενα ωραιο animation να μικραινει και να φαινεται το
   αποτελεσμα». Four domain-free pieces — any box may wear them — each a short transform / opacity / colour change, and NONE under
   prefers-reduced-motion (the block at the end of this section):
     .bk-rise       a box that has just been inserted rises into place (200 ms). No fill mode: at rest it carries NO transform, which
                    would make it the containing block of the `position: fixed` popups inside it (the calendar sheet, a SuggestInput
                    list) — only the first 200 ms of its life could misplace one, and nothing opens that fast.
     .bk-ghost      booking.js ltGhost's picture of a box that is about to go: fixed exactly over it on <body>, under the sticky top bar
                    and action bar (z-index 10), never a target.
     .bk-ghost--go  booking.js ltGhostInto: the picture shrinks onto its result's rectangle (the four --bk-ghost-* variables it sets) and
                    fades (260 ms), then booking.js removes it.
     .bk-arrive     the result glows once — the accent ring and ground, held from the click (backwards fill), fade back to the box's
                    own over 300 ms after a 100 ms wait, while the picture lands (a colour, not a movement).
   Here, before the page blocks, on purpose: the Τρίτων and Ατομικά blocks' queries are their layout steps only (ThirdPartyEditorPageGuardTests,
   PersonalEditorPageGuardTests), and a reduced-motion rule must come after the rules it turns off — inside this section it does. */
.bk-rise {
    animation: bk-rise 200ms ease-out;
}

.bk-ghost {
    position: fixed;
    z-index: 10;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    transform-origin: 0 0;
}

.bk-ghost--go {
    animation: bk-ghost 260ms cubic-bezier(.4, 0, .2, 1) forwards;
}

.bk-arrive {
    animation: bk-arrive 300ms ease-out 100ms backwards;
}

@keyframes bk-rise {
    from {
        opacity: 0;
        transform: translateY(-.5rem);
    }
}

@keyframes bk-ghost {
    40% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate(var(--bk-ghost-x), var(--bk-ghost-y)) scale(var(--bk-ghost-sx), var(--bk-ghost-sy));
    }
}

@keyframes bk-arrive {
    from {
        background-color: var(--lt-accent-soft);
        box-shadow: 0 0 0 3px var(--lt-accent-line);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-rise,
    .bk-ghost--go,
    .bk-arrive {
        animation: none;
    }
}

/* ---------- Εκδρομές Τρίτων editor (24/09/2026; owner 23/09: «για ατομικα και τρίτων όμως πρεπει να φτιαχτει ολοκαίνουρια») ----------
   The band of ThirdPartyBookingEditor.razor: «Περιγραφή Πακέτου» · «Κράτηση» · «Πληρωμές», the same bk-bandcard cards and role tints
   as the group band (rooms / money / money). No fixed band height: a Τρίτων booking has no availability tree to fill it.
   UX 20/10/2026, TP-2 — round 9's shape, as on Ατομικά (owner 28/09/2026: «δεν χρειαζεται αν ειναι ιδιο υψος. το κρατηση μπορει να
   γινει πολυ πιο στενο … τα ποσα το ιδιο» and «οταν ειναι πολλά ιδια κουτακια δεν βοηθάει το μάτι»; 20/10/2026, Q1 «Ναι, και στα δύο»):
   three equal 1fr boxes stretched to one height (~415 px each at 1267 px of content, the notes swelling into the spare height) are
   now a package column, a NARROW «Κράτηση» — WPF's own 195 px GroupBox, each amount box on its label's line (`.bk-field--inline`,
   NewReservation_ThirdParty_UserControl.xaml:662-800) — and «Πληρωμές» with the most room for its history; every card as tall as its
   content (`align-items: start`; the two notes lost `bk-field--grow`). Markup order = Tab order = the phone's order, unchanged.
   ONE middle step (76rem): below it, with the rail open, «Πληρωμές» would drop under its history's ~320 px; the package card then
   takes a full-width row and «Κράτηση» · «Πληρωμές» share the next. The shell's ONE breakpoint (60rem) stacks them. */
.bk-tpband {
    display: grid;
    grid-template-columns: minmax(20rem, 1fr) 15.5rem minmax(0, 1.3fr);
    gap: var(--lt-region-gap);
    align-items: start;
    margin-top: var(--lt-region-gap);
}

    .bk-tpband .bk-bandcard__body {
        overflow: visible;
    }

.bk-tpfile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lt-space-3);
    min-width: 0;
}

    .bk-tpfile .bk-link {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.bk-tpcount {
    margin: 0;
    text-align: right;
    font-size: var(--lt-text-caption);
    color: var(--lt-ink-2);
}

/* UX 20/10/2026, TP-1 — «Use the screen … No gaps» (skill; round 9, 28/09/2026: «πιάνουν πολύ χωρο χωρις λόγο»): this page's bottom row
   has ONE child (Εξτρά · Ιστορικό), but `.bk-bottom` is the group editor's 8fr / 4fr pair (tabs + «Ανάλυση δωματίων»), so the card
   stopped at two thirds of the width beside an empty third (~838 + ~419 px at 1267 px of content). Here it takes the whole row;
   the markup stays (CustomersFirstOrderTests pins `<div class="bk-bottom">` on this page), the group editor is untouched. */
.bk-page--tp .bk-bottom {
    grid-template-columns: minmax(0, 1fr);
}

/* TP-2's middle step: the package card (the band's first) over the full row, «Κράτηση» narrow beside «Πληρωμές» under it. */
@media (max-width: 76rem) {
    .bk-tpband {
        grid-template-columns: 15.5rem minmax(0, 1fr);
    }

        .bk-tpband > :first-child {
            grid-column: 1 / -1;
        }
}

@media (max-width: 60rem) {
    .bk-tpband {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The 24/09/2026 phone rule for this page's action buttons (375 px: 382 px of buttons in a 351 px column) is now the base
       `.bk-ab-actions` rule of every editor (25/09/2026), so it is not repeated here. */
}

/* ---------- Ατομικά editor (24/09/2026; owner 23/09: «για ατομικα και τρίτων όμως πρεπει να φτιαχτει ολοκαίνουρια») ----------
   PersonalBookingEditor.razor: the customers grid (first since 27/09/2026, audit 19 — WPF's Grid.Row 0), then ONE grid (round 9, owner
   28/09/2026: «στα ατομικα οι υπηρεσιες να πάνε πανω, δλδ κατω απο τους πελάτες. και οι 3 κάρτες στη μέση πιάνουν πολύ χωρο χωρις λόγο .
   δεν χρειαζεται αν ειναι ιδιο υψος … αλλη μια στηλη που θα ειναι η λίστα καθετα στην πρωτη στηλη με τις υπηρεσιες. και θα πιανει 2
   γραμμες ωστε διπλα της να παει το παραστατικα και ιστορικο»; «γενικα οταν ειναι πολλά ιδια κουτακια δεν βοηθάει το μα΄τι»):

       Υπηρεσίες | Κράτηση | Ποσά | Πληρωμές
       (a column |----------------------------------------
        over two | Παραστατικά · Ιστορικό επεξεργασίας
        rows)    |

   Tints extras / neutral / money / money / money (NEW_BOOKING_SPEC §7). The cards are NOT stretched to one height: each is as tall
   as its content (align-items: start), so no card is an empty box beside a fuller one. Rows `auto 1fr`: the services column spans the
   flexible second row, so a long list grows THAT row (under the tabs) and never pushes the three cards' row apart. «Κράτηση» (its
   widest line «Γραφείο (συνεργάτη)» 145 px) and «Ποσά» («Σύνολο Πακέτου» 99 px + its 7rem box) are fixed narrow columns. Measured in a
   harness with these sheets (28/09/2026), against the EXPANDED rail too (13.5rem: 1366 px leaves 1103 px of page, not 1267): the
   services' floor, 16.5rem, is a card's nowrap dates line («04/10 21:53 – 04/10 21:53», 210 px) + the card's, the list's and its
   scrollbar's 51 px; «Πληρωμές» takes 1.3 parts to 1. Its history table (320 px plain, ~400 px with a staged edit's «θα αλλάξει» +
   «Αναίρεση») fits at 1267 px; narrower, it scrolls inside its own list, never the page (the group band's payment card does the same).
   ONE middle step (84.5rem: below it those floors no longer fit with the rail expanded — the page would scroll sideways): the
   services go full width above the three cards, the tabs full width below. The shell's ONE breakpoint (60rem) stacks everything in
   markup order — customers, Υπηρεσίες, Κράτηση, Ποσά, Πληρωμές, tabs (the tab order). Round 11 (31/10/2026): the «Υπηρεσία» editor is
   INLINE, the first thing of the services column (`.bk-pbsvc__ed`, below), and while it is open the grid takes the middle step's shape
   at every desktop width (the `:has` rule after `.bk-pbgrid`). */
.bk-pbgrid {
    display: grid;
    grid-template-columns: minmax(16.5rem, 1fr) 12.5rem 15.5rem minmax(0, 1.3fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "svc res money pay"
        "svc tabs tabs tabs";
    gap: var(--lt-region-gap);
    align-items: start;
    margin-top: var(--lt-region-gap);
}

    .bk-pbgrid > .bk-pbsvc { grid-area: svc; }
    .bk-pbgrid > .bk-pbres { grid-area: res; }
    .bk-pbgrid > .bk-pbmoney { grid-area: money; }
    .bk-pbgrid > .bk-pbpay { grid-area: pay; }
    .bk-pbgrid > .bk-pbtabs { grid-area: tabs; }

    /* The grid's gap is the only space between its cards (a .bk-panel brings a top margin of its own). */
    .bk-pbgrid > .bk-panel {
        margin-top: 0;
    }

    .bk-pbgrid .bk-bandcard__body {
        overflow: visible;
    }

/* Round 11 — while the «Υπηρεσία» editor is open (owner 29/09/2026 «να ανοιγει στο πάνω μερος της λίστας, να τα σπρωχνει ολα προς τα
   κατω», ordered 31/10/2026) the services take the WHOLE width: the middle step's shape (84.5rem, below — services over the three
   cards, the tabs under them) and its card columns, at every desktop width. MEASURED 31/10/2026 (harness, these sheets): in the narrow
   column the editor was unusable — 343 px at 1366 with the rail folded, 272 px with it open: its form one field per row, 851 / 901 px
   tall, «Κόστος(ΝΕΤ)» · «Official» · «Κέρδος» 92 / 68 px wide (no room for «1.234,50»), its buttons on two lines; at ~1700 px 488 px,
   two fields per row, 555 px. With the whole width: see `.bk-pbsvc__ed`. The three cards drop under the services while it is open and
   come back beside them when it closes — the editor's own prices replace «Ποσά» meanwhile, and the card it produces is where it was.
   `:where()` keeps this at the specificity of `.bk-pbgrid` (0,1,0): written after the base rule it wins over it, and the 60rem rule,
   written after it, still stacks the phone. A browser without `:has` keeps the narrow column (the editor still works there). */
:where(.bk-pbgrid):has(.bk-pbsvc__ed) {
    grid-template-columns: minmax(0, 12.5rem) minmax(0, 15.5rem) minmax(14rem, 1fr);
    grid-template-rows: none;
    grid-template-areas:
        "svc svc svc"
        "res money pay"
        "tabs tabs tabs";
}

    :where(.bk-pbgrid):has(.bk-pbsvc__ed) .bk-pbsvc__list {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    }

/* «Κράτηση» — «πολυ πιο στενο με τα checkboxes το ενα κατω απο το αλλο»: Γραφείο (συνεργάτη), then Group · Απόδειξη · Insurance, one per
   line; the partner combo and its red note (when Γραφείο is ticked) take the narrow column's width. */
.bk-pb-flags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lt-space-2);
}

/* WPF shows the partner's Note in a red box (NewReservation_Personal_UserControl.xaml:1026-1038). A partner may carry a long
   note: four lines, the whole text in the title. */
.bk-pb-partnernote {
    margin: 0;
    padding: var(--lt-space-2) var(--lt-space-3);
    border: 1px solid var(--lt-due-line);
    border-radius: var(--lt-radius-sm);
    background: var(--lt-due-soft);
    color: var(--lt-due);
    font-size: var(--lt-text-caption);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* «Ποσά» — «τα ποσα το ιδιο»: a narrow card, ONE tidy column. The figures sit right beside their labels (the dt/dd rows of
   .bk-totals in a 15.5rem card), and the two boxes — Extra Κέρδος, Σύνολο Πακέτου — are rows like them: since UX 20/10/2026 (TP-2,
   its second caller, the Τρίτων «Κράτηση») through the shared `.bk-field--inline` (the field rules, above), this card keeps only its
   tighter gap. «Πληρωμές» — «η φορμα να ειναι σε μια γραμμη» — is the shared `.bk-payline` since the same day (PAY-1, owner Q1 «Ναι,
   και στα δύο»: the three editors' «Πληρωμές» cards; the rules sit with PaymentsPanel's, `.bk-pay-new`). */
.bk-pbmoney .bk-bandcard__body {
    gap: var(--lt-space-2);
}

/* PD4 (owner 24/09/2026 evening «να του λεει με ομορφο τροπο να επιλεξει ποιους αφορα»): the line above the service's customer
   ticks. Quiet once somebody is ticked; the accent colour and weight while nobody is (a new service starts that way). */
.bk-pbsvced__hint {
    margin: 0 0 var(--lt-space-1);
    font-size: var(--lt-text-label);
    color: var(--lt-ink-2);
}

.bk-pbsvced__hint--todo {
    color: var(--lt-accent);
    font-weight: var(--lt-weight-semibold);
}

.bk-pbsvc__body {
    padding: var(--lt-space-4);
}

/* Round 11 — the «Υπηρεσία» editor's frame, the first thing of the services column, ABOVE the list (not in it: the list's 42rem box
   would scroll the editor itself), so it pushes the cards down. The card the round-9 dialog was: a white surface inside the extras-tinted
   panel (the dialog's white-slot reset no longer reaches it), the accent edge of the card being edited, its heading (the kind, no id).
   It rises in (`bk-rise`, «Motion»). NOTHING here — nor on .bk-pbsvc__body / .bk-pbsvc / .bk-pbgrid / .bk-page — carries a transform,
   filter, contain, will-change or container-type at rest: any of them would become the containing block of the `position: fixed`
   calendar sheet and SuggestInput lists inside (Round11BTests). Below the 60rem stack it is simply the column's first box. */
.bk-pbsvc__ed {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-3);
    margin-bottom: var(--lt-space-3);
    padding: var(--lt-space-4);
    background: var(--lt-surface);
    border: 1px solid var(--lt-accent-line);
    border-radius: var(--lt-radius-md);
    box-shadow: inset 3px 0 0 var(--lt-accent);
}

.bk-pbsvc__edtitle {
    margin: 0;
    font-size: var(--lt-text-title);
    font-weight: var(--lt-weight-semibold);
}

/* One card per row, the column's full width («η λίστα καθετα»); the list scrolls INSIDE its own box past 42rem (owner 25/09/2026:
   «να κάνουμε σκρολ μετα απο καποιο υψος» — design for the big case: 10+ services), never the page — on a desktop; a phone lets the
   page scroll it (MOB-L6, the 60rem block below). A card's lines wrap in the
   narrow column (the money line may take two), each capped at three with the whole text in its title. */
.bk-pbsvc__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lt-space-3);
    align-content: start;
    max-height: 42rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-width: 0;
}

.bk-pbcard {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-2);
    min-width: 0;
    padding: var(--lt-space-4);
    background: var(--lt-surface);
    border: var(--lt-border);
    border-radius: var(--lt-radius-md);
}

.bk-pbcard--hit {
    border-color: var(--lt-accent-line);
    box-shadow: inset 3px 0 0 var(--lt-accent);
}

/* The card whose copy is open in the editor (above the list since round 11). */
.bk-pbcard--editing {
    outline: 2px solid var(--lt-accent);
    outline-offset: -2px;
}

.bk-pbcard__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--lt-space-2);
}

.bk-pbcard__head strong {
    font-size: var(--lt-text-title);
}

.bk-pbcard__dates {
    margin-left: auto;
    color: var(--lt-ink-2);
    font-size: var(--lt-text-body);
    white-space: nowrap;
}

/* Every text line capped at three lines with the whole text in the title (design for the big case). Body size, not
   caption (owner 25/09/2026: «καντα μεγαλύτερα»). */
.bk-pbcard__what,
.bk-pbcard__who,
.bk-pbcard__money {
    margin: 0;
    font-size: var(--lt-text-body);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.bk-pbcard__who {
    color: var(--lt-ink-2);
}

.bk-pbcard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lt-space-2);
    margin-top: var(--lt-space-1);
}

/* The «Υπηρεσία» editor (PersonalServiceEditor) — inside the page's frame `.bk-pbsvc__ed` since round 11 (the shared Modal's body in
   round 9): the frame is the card, so no border, padding or ground of its own. Its calendars: below. */
.bk-pbsvced {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-3);
    min-width: 0;
}

.bk-pbsvced__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--lt-space-3);
    align-items: end;
}

.bk-pbsvced__check {
    align-self: center;
}

/* The price triad on the fields' own columns (round 11): with the editor's whole width its three boxes are the first three of the
   form's columns above (~195 px at 1366), not three thirds of a 1217 px row (400 px boxes holding «1.234,50 €», measured). */
.bk-pbsvced__prices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--lt-space-3);
}

.bk-pbsvced__who {
    margin: 0;
    padding: var(--lt-space-2) var(--lt-space-3);
    border: var(--lt-border);
    border-radius: var(--lt-radius-sm);
    min-width: 0;
}

    .bk-pbsvced__who legend {
        float: none;
        width: auto;
        margin: 0;
        padding: 0 var(--lt-space-1);
        font-size: var(--lt-text-label);
        font-weight: var(--lt-weight-semibold);
    }

.bk-pbsvced__people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
    gap: var(--lt-space-1) var(--lt-space-3);
    max-height: 10rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bk-pbsvced__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-pbsvced__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--lt-space-2);
}

/* The editor's calendars: the same centred sheet the customers grid's cells get (.bk-gridwrap .bk-cal__pop, the phone's too), which
   no ancestor can clip; the SuggestInput lists are pinned `position: fixed` by booking.js already. Round 9 needed it because the dialog
   body scrolled; round 11 keeps it inline — a Check Out box low on the screen still opens its calendar where it can be seen, and the
   frame's `bk-rise` leaves no transform behind (`.bk-pbsvc__ed`). */
.bk-pbsvced .bk-cal__pop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bk-pbsvced .bk-cal__backdrop {
    background: rgba(22,33,43,.35);
}

/* The middle step: the four columns no longer fit (the rail expanded, below ~1352 px). «Υπηρεσίες» a full-width row above the three
   cards, whose two narrow columns give a little before «Πληρωμές» drops under 14rem; the tabs a full-width row below; rows auto.
   With the whole width the cards sit side by side again (the 25/09 «1 η 2 ανα σειρα»). */
@media (max-width: 84.5rem) {
    .bk-pbgrid {
        grid-template-columns: minmax(0, 12.5rem) minmax(0, 15.5rem) minmax(14rem, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "svc svc svc"
            "res money pay"
            "tabs tabs tabs";
    }

    .bk-pbsvc__list {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    }
}

/* The shell's one breakpoint: everything in one column, in markup order. */
@media (max-width: 60rem) {
    .bk-pbgrid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "svc"
            "res"
            "money"
            "pay"
            "tabs";
    }

    .bk-pbsvced__prices {
        grid-template-columns: minmax(0, 1fr);
    }

    /* UX 20/10/2026, MOB-L6: the 42rem inner scroller was for the desktop column (owner 25/09/2026 «να κάνουμε σκρολ μετα απο καποιο
       υψος»); on a phone it was a 672 px box scrolling inside a page that already scrolls, where a thumb swipe got stuck or slid past
       («ένα κουτί που κυλάει μέσα σε σελίδα που ήδη κυλάει είναι παγίδα», home.css). One column of cards, as tall as they are. */
    .bk-pbsvc__list {
        max-height: none;
        overflow: visible;
    }

    /* The new payment's form stacks again on a phone (round 9 review): the shared `.bk-payline` rule of the general 60rem block. */

    /* The action buttons' phone wrap is the base `.bk-ab-actions` rule of every editor since 25/09/2026 (see there). */
}