/* ============================================================================
   «Η ΑΡΧΙΚΗ» — the home screen (BOSS_HOME_SPEC §4 / §9), from the approved
   mockup `scratchpad/mockup/shell-home.html`.

   NAMING. The mockup writes `.tile`, `.card`, `.dep`, `.money`, `.num`, and the
   bare element selectors `table/th/td`. Those names are NOT free in this app:
   `.card` is Bootstrap's and is used on ~110 places across the admin and
   management pages, and app.css loads AFTER bootstrap, so the mockup's
   `overflow:hidden` alone would clip every existing card. Every class here is
   therefore `lt-`-prefixed, the same answer `booking-editor.css` gives with
   `bk-`. Nothing here is home-only by intent: `.lt-tile` / `.lt-card` /
   `.lt-dep` / `.lt-money` / `.lt-num` are the approved visual language and the
   next screen restyled should reuse them rather than invent a third set.

   NO new colour, no new card shape, and NO chart — there is not one chart in
   the whole WPF app, so a chart here would be new language, not a port.
   ========================================================================= */

/* The page opts INTO the shell's type, exactly as `.bk-page` does — app-shell.css deliberately leaves `body`
   alone so the NavBar swap does not reflow every other page's text. */
.lt-home {
    /* Το ΣΤΑΘΕΡΟ ύψος της σειράς με τις δύο στήλες (ιδιοκτήτης, 20/09: «ας ειναι fixed το υψος σε ολα ωστε να εχει
       σταθερη δομή μην εχει τετοια κενα»). Ό,τι δεν χωράει κυλάει μέσα στη δική του κάρτα, οπότε η σελίδα δεν
       αλλάζει ύψος όταν ο πίνακας αναχωρήσεων πάει από 3 γραμμές (10 ημέρες) σε 20 (90 ημέρες), και ό,τι έρχεται
       από κάτω κάθεται πάντα στο ίδιο σημείο. Ορίζεται εδώ και όχι στο :root: είναι μέγεθος αυτής της σελίδας. */
    --lt-board: 30rem;
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-6);
    color: var(--lt-ink);
    font-family: var(--lt-font-ui);
    font-size: var(--lt-text-body);
    line-height: var(--lt-leading);
}

/* ── «Καλημέρα, nikos» ──────────────────────────────────────────────────── */
.lt-hello {
    display: flex;
    align-items: baseline;
    gap: var(--lt-space-5);
    flex-wrap: wrap;
}

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

    .lt-hello p {
        margin: 0;
        font-size: var(--lt-text-label);
        color: var(--lt-ink-2);
    }

/* ── Numbers ────────────────────────────────────────────────────────────── */
.lt-num {
    font-family: var(--lt-font-num);
    font-variant-numeric: tabular-nums;
}

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

.lt-money--due {
    color: var(--lt-due);
    font-weight: var(--lt-weight-semibold);
}

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

/* The same two inside a Bootstrap `.table` (Οφειλέτες, Οικονομικά «Ανά εκδρομή») — review 27/09/2026: Bootstrap 5.3 paints every cell
   with `.table>:not(caption)>*>*{color:var(--bs-table-color…)}` (0,1,1), which beats the plain class (0,1,0), so audit 7's colour
   never showed there (the old `text-danger` only won because Bootstrap's utilities are !important). This sheet loads after Bootstrap
   (App.razor) and these are (0,2,1). RemainingColourTests pins them. */
.table td.lt-money--due {
    color: var(--lt-due);
    font-weight: var(--lt-weight-semibold);
}

.table td.lt-money--paid {
    color: var(--lt-paid);
}

/* A whole CARD that carries a Υπόλοιπο (Οικονομικά «Υπόλοιπο» tile, Οφειλέτες «Σύνολο οφειλών») in the money tokens — audit 7
   (owner 27/09/2026 «7. ναι»: one rule and one colour for every Υπόλοιπο). The rule is RemainingRule.IsDue; these two only paint.
   Written for Bootstrap's `.card` / `.alert` boxes those pages use, so `border-color` needs the box to have a border already. */
.lt-card--due {
    background: var(--lt-due-soft);
    border-color: var(--lt-due-line);
    color: var(--lt-ink);
}

.lt-card--paid {
    background: var(--lt-paid-soft);
    border-color: var(--lt-paid-line);
    color: var(--lt-ink);
}

/* ── Tiles ──────────────────────────────────────────────────────────────── */
.lt-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--lt-space-5);
}

/* White unless a .lt-tint--<role> class gives the tile a role (end of this file). */
.lt-tile {
    background: var(--lt-card-bg);
    border: var(--lt-border);
    border-radius: var(--lt-radius-md);
    padding: var(--lt-space-5) var(--lt-space-6);
}

    .lt-tile p {
        margin: 0;
    }

.lt-tile__cap {
    font-size: var(--lt-text-caption);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--lt-ink-2);
}

.lt-tile__val {
    font-family: var(--lt-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--lt-text-num-xl);
    font-weight: var(--lt-weight-semibold);
    line-height: 1.9rem;
}

.lt-tile__sub {
    font-size: var(--lt-text-label);
    color: var(--lt-ink-2);
}

    .lt-tile__sub b {
        font-family: var(--lt-font-num);
        font-weight: var(--lt-weight-semibold);
        color: var(--lt-ink);
    }

/* The small print «06:00 – 06:00» under the three office-band tiles (owner 23/10/2026: «sto plakidio na leei se shmeivsh oti
   afora 06-06») — the caption's size and ink, without its capitals: a note, not a second caption. No new colour. */
.lt-tile__note {
    font-family: var(--lt-font-num);
    font-size: var(--lt-text-caption);
    color: var(--lt-ink-2);
}

.lt-tile--due .lt-tile__val {
    color: var(--lt-due);
}

.lt-tile--paid .lt-tile__val {
    color: var(--lt-paid);
}

/* ── A tile that opens a page (owner 23/10/2026, on «Το γραφείο μου»: «εδώ δεν είχαμε πει να με πηγαίνει με έτοιμα φίλτρα
   στην αντίστοιχη σελίδα on click?»). The WHOLE tile is the target, through a stretched link: the caption is the <a>
   (.lt-tile__link), so its accessible name stays «Εισπράξεις σήμερα» and not the whole tile read aloud, and its ::after is laid
   over the tile. The link reads as one before the mouse arrives — the caption in .lt-card__link's blue — the tile answers the
   mouse like the shortcuts above (.lt-act:hover's border), and the keyboard gets the app's one ring around the whole tile.
   No new colour and no second breakpoint: every token below is already used on this page. ── */
.lt-tile--link {
    position: relative;
}

    .lt-tile--link:hover {
        border-color: var(--lt-accent-line);
    }

.lt-tile__link {
    color: var(--lt-accent-hover);
    text-decoration: none;
}

    .lt-tile--link:hover .lt-tile__link {
        text-decoration: underline;
    }

    .lt-tile__link::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: var(--lt-radius-md);
    }

    .lt-tile__link:focus-visible {
        outline: none;
    }

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

/* The office rule a figure was computed with, printed under the number instead of the reader guessing. */
.lt-rule {
    font-size: var(--lt-text-caption);
    color: var(--lt-ink-3);
}

/* A present block showing zero writes its zero in words — a zero is information, not an empty card. */
.lt-empty {
    font-size: var(--lt-text-label);
    color: var(--lt-ink-2);
    margin: 0;
}

/* ── Quick actions ──────────────────────────────────────────────────────── */
.lt-actions {
    display: flex;
    gap: var(--lt-space-5);
    flex-wrap: wrap;
}

.lt-act {
    display: flex;
    align-items: center;
    gap: var(--lt-space-5);
    padding: var(--lt-space-5) var(--lt-space-6);
    border-radius: var(--lt-radius-md);
    border: var(--lt-border);
    background: var(--lt-surface);
    text-decoration: none;
    color: var(--lt-ink);
    min-width: 13rem;
}

    .lt-act:hover {
        border-color: var(--lt-accent-line);
        background: var(--lt-accent-soft);
        color: var(--lt-ink);
    }

    /* UX 20/10/2026, X15: the app's one focus ring (--lt-focus-ring, as on .bk-control and the save button) instead of the
       browser's own — the shortcuts and the card links were the home's last controls without it (WCAG 2.4.7). */
    .lt-act:focus-visible {
        outline: var(--lt-focus-ring);
        outline-offset: 2px;
    }

/* Audit 20 (26/09/2026; owner 27/09/2026 «20. οκ»): the three daily shortcuts carry the RAIL's colours (owner 25/09/2026: «νεα
   κρατηση πρασινό αναζητηση κίτρινο και πλάνο ενα φιλικο κοκκινο») — the same --lt-rail-hot-* tokens app-shell.css reads, as a
   soft wash on the white surface and the full colour on the glyph. The TEXT stays --lt-ink: the rail pastels are dark-surface
   colours (they read on --lt-rail-bg) and none of the three passes AA on white. The key → colour map is ShellNav.HotSuffix,
   shared with AppShell.Hot; the old `.lt-act--primary` (one blue card beside two white ones) is gone with it. */
.lt-act--hot {
    background: color-mix(in srgb, var(--lt-hot) 16%, var(--lt-surface));
    border-color: color-mix(in srgb, var(--lt-hot) 50%, var(--lt-line));
}

    /* The glyph in the colour, darkened towards the ink so the yellow still reads on its own pale wash. */
    .lt-act--hot .lt-act__ic {
        color: color-mix(in srgb, var(--lt-hot) 60%, var(--lt-ink));
    }

    .lt-act--hot:hover {
        background: color-mix(in srgb, var(--lt-hot) 28%, var(--lt-surface));
        border-color: var(--lt-hot);
        color: var(--lt-ink);
    }

.lt-act--new { --lt-hot: var(--lt-rail-hot-new); }
.lt-act--search { --lt-hot: var(--lt-rail-hot-search); }
.lt-act--plan { --lt-hot: var(--lt-rail-hot-plan); }

.lt-act__ic {
    font-size: 1.125rem;
    line-height: 1;
}

.lt-act__tx {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

    .lt-act__tx b {
        font-size: var(--lt-text-body);
        font-weight: var(--lt-weight-semibold);
    }

    .lt-act__tx span {
        font-size: var(--lt-text-caption);
        opacity: .85;
    }

/* ── Columns and cards ──────────────────────────────────────────────────── */
/* ΣΤΑΘΕΡΟ ΥΨΟΣ ΣΕΙΡΑΣ, κύλιση μέσα στην κάρτα (ιδιοκτήτης, 20/09: «βαλε ενα μεγιστο υψος στο αριστερο που φερνει
   τις εκδρομές και μετα ας εχει σκρολ. οπως και στα δεξια. ας ειναι fixed το υψος σε ολα ωστε να εχει σταθερη δομή
   μην εχει τετοια κενα»). Οι δύο στήλες τελειώνουν ΠΑΝΤΑ στο ίδιο σημείο, είτε ο πίνακας έχει 3 γραμμές (10 ημέρες)
   είτε 20 (90 ημέρες), οπότε ό,τι έρχεται από κάτω δεν μετακινείται ποτέ.
   Γραμμένο ως ΒΑΣΗ και ξηλωμένο μέσα στο ένα breakpoint του κελύφους, όχι σε δικό του `min-width`: το
   ShellStyleGuardTests καρφώνει ότι αυτά τα δύο φύλλα έχουν ΕΝΑ breakpoint και είναι `max-width`. */
.lt-cols {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--lt-space-6);
    align-items: stretch;
    height: var(--lt-board);
}

    /* min-height:0 σε κάθε κρίκο της αλυσίδας: χωρίς αυτό ένα flex/grid παιδί δεν συρρικνώνεται κάτω από το
       περιεχόμενό του, και ο πίνακας σπρώχνει την κάρτα έξω από το ύψος αντί να κυλήσει μέσα της. */
    .lt-cols > .lt-card,
    .lt-cols > .lt-stack {
        min-height: 0;
    }

    .lt-cols .lt-card {
        display: flex;
        flex-direction: column;
    }

    /* Η κύλιση γίνεται στο κουτί του πίνακα, όχι στην κάρτα: η κεφαλίδα της κάρτας και η γραμμή «Άτομα από τις
       κρατήσεις…» από κάτω μένουν στη θέση τους. Μόνο μέσα στο .lt-cols — οι πίνακες του πωλητή πιο κάτω στη
       σελίδα δεν είναι σε σειρά σταθερού ύψους και οφείλουν να μεγαλώνουν ελεύθερα. */
    .lt-cols .lt-tablewrap {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        /* Since the rows became links (GS-47) the keyboard walks down this box, and the browser scrolls a focused
           link only as far as the box's EDGE — which is under the sticky column header and the sticky totals row.
           Measured: a focused link fully covered, and elementFromPoint at its centre returning the totals row
           (WCAG 2.4.11). The padding tells the scroll to stop clear of both. */
        scroll-padding-block: 2rem 2.25rem;
    }

@media (max-width: 60rem) {
    .lt-cols {
        grid-template-columns: minmax(0, 1fr);
        /* Στο κινητό οι κάρτες μπαίνουν η μία κάτω από την άλλη και παίρνουν το φυσικό τους ύψος: ένα κουτί που
           κυλάει μέσα σε σελίδα που ήδη κυλάει είναι παγίδα, όχι διευκόλυνση. */
        height: auto;
        align-items: start;
    }

    /* UX 20/10/2026, MOB-P16 — η αρχική στο κινητό. Οι τρεις συντομεύσεις της ημέρας («Νέα κράτηση / Γενική Αναζήτηση / Πλάνο»,
       με τα χρώματα του μενού — audit 20, ιδιοκτήτης 27/09 «20. οκ») έπεφταν κάτω από ΟΛΕΣ τις κάρτες, μία ανά γραμμή
       (min-width 13rem). Ανεβαίνουν αμέσως κάτω από το «Καλημέρα» (και τα δύο είναι άμεσα παιδιά της στήλης flex .lt-home) και
       μπαίνουν σε μία σειρά, με το εικονίδιο πάνω από τη λέξη. Τα «10 / 30 / 90 / Πλάνο» ήταν στόχοι 25x25 — γίνονται 2.5rem, και
       η κεφαλίδα της κάρτας τυλίγει όταν δεν χωράνε δίπλα στον τίτλο. Με το `.lt-home` μπροστά: ίσο βάρος με το `.lt-act` και το
       `button.lt-card__link` πιο κάτω δεν θα αρκούσε, γιατί εκείνα έρχονται ΜΕΤΑ από αυτό το μπλοκ. Το desktop δεν αλλάζει. */
    .lt-home .lt-hello {
        order: -2;
    }

    .lt-home .lt-actions {
        order: -1;
    }

    .lt-home .lt-act {
        flex: 1 1 0;
        flex-direction: column;
        justify-content: center;
        gap: var(--lt-space-2);
        min-width: 0;
        min-height: 2.75rem;
        padding: var(--lt-space-4) var(--lt-space-3);
        text-align: center;
    }

    .lt-home .lt-card__head {
        flex-wrap: wrap;
    }

    .lt-home .lt-card__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    /* The sort headers of «Πωλητές του μήνα» (23/10/2026) are thumb targets too: as tall as «10 / 30 / 90» above (2.5rem). Not a
       min-width: the label plus its glyph is already wider than a thumb, and a wider box would pull the right-aligned money
       headers off their column's edge. */
    .lt-home .lt-sort {
        min-height: 2.5rem;
    }
}

.lt-stack {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-6);
}

    /* Η πρώτη κάρτα της δεξιάς στοίβας («Πωλητές του μήνα») παίρνει το περίσσευμα και κυλάει· οι από κάτω
       («Ακυρώσεις») κρατούν το φυσικό τους ύψος — δύο γραμμές, δεν έχουν τι να κυλήσουν. */
    .lt-stack > .lt-card {
        flex: 0 0 auto;
        min-height: 0;
    }

        .lt-stack > .lt-card:first-child {
            flex: 1 1 auto;
        }

/* The card body and its heading band read the card's current tint (app.css --lt-card-*): white, or the role's tint
   when the card carries a .lt-tint--<role> class. The border stays --lt-line on every card. No radius on the head:
   `overflow: hidden` already clips the band to the card's corners. */
.lt-card {
    background: var(--lt-card-bg);
    border: var(--lt-border);
    border-radius: var(--lt-radius-md);
    overflow: hidden;
}

.lt-card__head {
    display: flex;
    align-items: center;
    gap: var(--lt-space-5);
    padding: var(--lt-space-5) var(--lt-space-6);
    border-bottom: var(--lt-border-soft);
    background: var(--lt-card-band);
}

.lt-card__title {
    margin: 0;
    font-size: var(--lt-text-control);
    font-weight: var(--lt-weight-semibold);
}

.lt-card__link {
    margin-left: auto;
    font-size: var(--lt-text-label);
    color: var(--lt-accent-hover);
    text-decoration: none;
    white-space: nowrap;
}

    .lt-card__link:hover {
        text-decoration: underline;
    }

    /* UX 20/10/2026, X15: the same ring as the shortcuts above. */
    .lt-card__link:focus-visible {
        outline: var(--lt-focus-ring);
        outline-offset: 2px;
    }

/* Η ομάδα συνδέσμων της κεφαλίδας: το 10 / 30 / 90 των αναχωρήσεων δίπλα στο «Πλάνο». Το margin-left:auto που
   σπρώχνει τον έναν σύνδεσμο δεξιά περνάει στην ομάδα, αλλιώς κάθε κουμπί θα έσπρωχνε το επόμενο. */
.lt-card__links {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: var(--lt-space-4);
}

    .lt-card__links .lt-card__link {
        margin-left: 0;
    }

/* Τα 10 / 30 / 90 ΔΕΝ πάνε πουθενά — ξαναρωτούν την ίδια σελίδα — άρα είναι <button>. Εδώ ξεγυμνώνονται από το
   chrome του browser ώστε να διαβάζονται σαν τα ίδια μπλε γράμματα με τον σύνδεσμο δίπλα τους (ιδιοκτήτης, 20/09:
   «με μπλε γράμματα όπως έχεις κάνει τα οικονομικά»). */
button.lt-card__link {
    background: none;
    border: 0;
    /* A 24 px target at least (WCAG 2.5.8): as bare glyphs «10 / 30 / 90» were 13x17 px with 8 px gaps, so a thumb
       aiming at «30» re-queried the home page for 10 or 90 days, and a miss on «90» could land on «Πλάνο». The
       padding grows the target without growing the text. */
    padding: .25rem .375rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    font: inherit;
    font-size: var(--lt-text-label);
    cursor: pointer;
}

    button.lt-card__link[disabled] {
        cursor: default;
        opacity: .55;
    }

/* Το πατημένο δεν είναι σύνδεσμος πια: μαύρο και έντονο, ώστε να φαίνεται ποιο παράθυρο δείχνει ο πίνακας. */
.lt-card__link--on {
    color: var(--lt-ink);
    font-weight: var(--lt-weight-semibold);
}

.lt-card__body {
    padding: var(--lt-space-5) var(--lt-space-6);
}

/* ── Tables (class-scoped: the mockup's bare table/th/td would restyle every grid in the app) ── */
/* Every .lt-tablewrap in the markup carries tabindex="0" + role="region": a horizontally scrolling box whose
   contents are plain text cannot be scrolled by keyboard otherwise, which an automated audit flagged as serious.
   The focus ring here is what tells that user the box took focus. */
.lt-tablewrap {
    overflow-x: auto;
}

    .lt-tablewrap:focus-visible {
        outline: 2px solid var(--lt-accent);
        outline-offset: -2px;
    }

.lt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lt-text-control);
}

    /* Κολλημένη κεφαλίδα: μέσα σε κουτί που κυλάει κάθετα, οι τίτλοι των στηλών πρέπει να μένουν ορατοί, αλλιώς
       στη δέκατη γραμμή δεν ξέρεις ποια στήλη είναι τα άτομα και ποια τα χρήματα. Το background είναι υποχρεωτικό —
       χωρίς αυτό οι γραμμές περνούν από πίσω. Το χρώμα της κάρτας και όχι λευκό: σε κάρτα με απόχρωση ένα λευκό
       --lt-surface θα ήταν λωρίδα που δεν ανήκει πουθενά. */
    .lt-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--lt-card-bg);
    }

    .lt-table th {
        text-align: left;
        font-size: var(--lt-text-label);
        font-weight: var(--lt-weight-medium);
        color: var(--lt-ink-2);
        padding: var(--lt-space-3) var(--lt-space-6);
        border-bottom: var(--lt-border-soft);
        white-space: nowrap;
    }

    .lt-table td {
        padding: var(--lt-space-4) var(--lt-space-6);
        border-bottom: var(--lt-border-soft);
        white-space: nowrap;
    }

    .lt-table tr:last-child td {
        border-bottom: 0;
    }

    /* --lt-card-shade is --lt-sunken on a white card (as before) and the role's band on a tinted one: sunken over a
       tint is the same lightness as the tint, and the hover would vanish. */
    .lt-table tbody tr:hover {
        background: var(--lt-card-shade);
    }

    .lt-table th.lt-money {
        text-align: right;
    }

/* «Πωλητές του μήνα» sorts by its headers (owner 23/10/2026: «θελω να δουλευει η ταξινόμηση πατόντας το τιτλο»). The control is a
   real <button> in the <th> — Enter / Space and a screen reader's «button» for free — stripped to read as the heading it is, so the
   money headers stay right-aligned (inline, under the <th>'s text-align). Under the mouse it takes the links' blue; the column the
   rows follow is in ink with its ▲ / ▼; the glyph of the other two is drawn but hidden, so a sort never shifts the columns. The ring
   is the app's one ring, inside the <th>'s own padding (.lt-tablewrap clips nothing there). No new colour. */
.lt-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--lt-space-2);
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

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

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

.lt-table th[aria-sort="ascending"],
.lt-table th[aria-sort="descending"] {
    color: var(--lt-ink);
}

.lt-sort__dir {
    font-size: var(--lt-text-caption);
}

.lt-sort__dir--off {
    visibility: hidden;
}

/* Η γραμμή συνόλων του πίνακα αναχωρήσεων — εκεί μετακόμισαν τα δύο πλακίδια που έφυγαν από τη ζώνη. Χωριστή
   γραμμή πάνω της, ώστε να μη διαβάζεται ως άλλη μια αναχώρηση. */
.lt-table tfoot .lt-total th,
.lt-table tfoot .lt-total td {
    border-top: var(--lt-border);
    border-bottom: 0;
    font-weight: var(--lt-weight-semibold);
    color: var(--lt-ink);
    white-space: nowrap;
}

.lt-table tfoot .lt-total th {
    text-align: left;
}

/* Audit 7 (owner 27/09/2026 «7. ναι»: one rule and one colour for every Υπόλοιπο) on the TOTAL cell too — the Αρχική's «Υπόλοιπο να
   εισπραχθεί» Σύνολο: the ink rule just above (0,2,2) beat `.lt-money--due` (0,1,0), so red rows sat over a black total of the same
   figure (review 27/09/2026). These win by specificity (0,3,2). */
.lt-table tfoot .lt-total td.lt-money--due {
    color: var(--lt-due);
}

.lt-table tfoot .lt-total td.lt-money--paid {
    color: var(--lt-paid);
}

/* Τα σύνολα κολλάνε στο κάτω μέρος του κουτιού που κυλάει: αντικατέστησαν δύο πλακίδια που ήταν ΠΑΝΤΑ ορατά, οπότε
   δεν επιτρέπεται να χρειάζεται κύλιση για να τα δεις. */
.lt-table tfoot .lt-total th,
.lt-table tfoot .lt-total td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--lt-card-bg);
}

/* ── List rows ──────────────────────────────────────────────────────────── */
.lt-dep {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lt-space-5);
    padding: var(--lt-space-4) 0;
    border-bottom: var(--lt-border-soft);
    font-size: var(--lt-text-control);
}

    .lt-dep:last-child {
        border-bottom: 0;
    }

.lt-dep__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lt-dep__when {
    font-family: var(--lt-font-num);
    font-size: var(--lt-text-label);
    color: var(--lt-ink-2);
    white-space: nowrap;
}

.lt-dep__n {
    font-family: var(--lt-font-num);
    font-weight: var(--lt-weight-semibold);
    white-space: nowrap;
}

/* ── Drill-down: οι τρεις σύνδεσμοι των καρτών προς τη «Γενική Αναζήτηση» (GS-47) ──────────────────
   Ιδιοκτήτης, 22/09/2026: «αυτα ιδανικά θα ήθελα να ειναι clickable και αν σε πηγαίνει στην αναζήτηση
   με προκαθορισμένα φιλτρα αυτα που πρέπει».

   ΓΙΑΤΙ ΕΙΝΑΙ <a> ΚΑΙ ΟΧΙ ΚΛΙΚ ΠΑΝΩ ΣΤΗ ΓΡΑΜΜΗ. Μεσαίο κλικ και Ctrl+κλικ ανοίγουν νέα καρτέλα, η
   μπάρα κατάστασης δείχνει πού πάει, το Tab το φτάνει και το Enter το πατάει. Μια γραμμή με @onclick
   δεν κάνει κανένα από τα τέσσερα, και ένα <tr> ΔΕΝ μπορεί να γίνει <a> (ούτε το HTML το επιτρέπει
   ούτε ο πίνακας θα επιβίωνε ως πίνακας). Άρα: ο σύνδεσμος πιάνει ΟΛΟΚΛΗΡΟ το κελί που ονομάζει το
   πράγμα (τον πωλητή, την εκδρομή, το νούμερο των ακυρώσεων) και τα υπόλοιπα κελιά μένουν κείμενο.

   ΓΙΑΤΙ ΓΕΜΙΖΕΙ ΤΟ ΚΕΛΙ. Η γραμμή είναι ~34 px και δεν επιτρέπεται να μεγαλώσει (ιδιοκτήτης, 20/09:
   «ας ειναι fixed το υψος σε ολα»). Μια λέξη 12 px ύψος δεν πατιέται με δάχτυλο· ολόκληρο το κελί
   πατιέται. Τα ΑΡΝΗΤΙΚΑ ΠΕΡΙΘΩΡΙΑ ακυρώνουν ΑΚΡΙΒΩΣ το padding του <td> και το ξαναβάζουν μέσα στον
   σύνδεσμο: το κουτί του γίνεται όσο το κελί ΧΩΡΙΣ να αλλάξει ούτε ένα pixel το ύψος της γραμμής.

   ΧΡΩΜΑ: κανένα καινούργιο. Το ίδιο --lt-accent-hover με το .lt-card__link της κεφαλίδας, και η
   υπογράμμιση ηρεμίας στο υπάρχον --lt-accent-line ώστε να ΦΑΙΝΕΤΑΙ σύνδεσμος πριν περάσει από πάνω
   το ποντίκι — σε πίνακα με μπλε νούμερα το χρώμα μόνο του δεν αρκεί. Στο hover η υπογράμμιση
   δυναμώνει (currentColor) πάνω από το .lt-table tbody tr:hover που ήδη φωτίζει τη γραμμή. */
.lt-drill {
    color: var(--lt-accent-hover);
    text-decoration: underline;
    text-decoration-color: var(--lt-accent-line);
    text-underline-offset: 2px;
}

    .lt-drill:hover {
        text-decoration-color: currentColor;
    }

    /* Το outline είναι ΜΕΣΑ (offset αρνητικό): το .lt-tablewrap είναι overflow-x:auto και θα έκοβε
       δαχτυλίδι που βγαίνει προς τα έξω στην πρώτη και στην τελευταία στήλη. Ίδιο δαχτυλίδι με το
       .lt-tablewrap:focus-visible παραπάνω. */
    .lt-drill:focus-visible {
        outline: 2px solid var(--lt-accent);
        outline-offset: -2px;
    }

/* Μέσα σε κελί πίνακα: γεμίζει το κελί. Τα -space-4 / -space-6 είναι ΤΟ ΙΔΙΟ padding του .lt-table td
   παραπάνω με το πρόσημο αντεστραμμένο — αν αλλάξει εκεί, αλλάζει κι εδώ. */
.lt-table td .lt-drill {
    display: block;
    margin: calc(var(--lt-space-4) * -1) calc(var(--lt-space-6) * -1);
    padding: var(--lt-space-4) var(--lt-space-6);
}

/* Μέσα σε γραμμή .lt-dep: το ίδιο κόλπο μόνο κατακόρυφα (η γραμμή δεν έχει οριζόντιο padding), και
   flex:1 ώστε ο στόχος να φτάνει ως το νούμερο — η υπογράμμιση ακολουθεί μόνο τα γράμματα. */
.lt-dep .lt-drill {
    flex: 1;
    margin-top: calc(var(--lt-space-4) * -1);
    margin-bottom: calc(var(--lt-space-4) * -1);
    padding-top: var(--lt-space-4);
    padding-bottom: var(--lt-space-4);
}

/* ── The office band ────────────────────────────────────────────────────── */
.lt-band {
    display: flex;
    flex-direction: column;
    gap: var(--lt-space-5);
    padding: var(--lt-space-5) var(--lt-space-6);
    background: var(--lt-card-bg);
    border: var(--lt-border);
    border-radius: var(--lt-radius-md);
}

.lt-band__head {
    display: flex;
    align-items: baseline;
    gap: var(--lt-space-5);
    flex-wrap: wrap;
}

    .lt-band__head h2 {
        margin: 0;
        font-size: var(--lt-text-control);
        font-weight: var(--lt-weight-semibold);
    }

.lt-band__scope {
    font-size: var(--lt-text-caption);
    color: var(--lt-ink-2);
}

.lt-trend {
    font-size: var(--lt-text-label);
    font-weight: var(--lt-weight-semibold);
}

.lt-trend--up {
    color: var(--lt-paid);
}

.lt-trend--down {
    color: var(--lt-due);
}

/* The anonymous splash that stood here is gone (owner, 22/09/2026, «ίδιο site, διαδρομή /company»): the root of the
   host is the customer Site now, and an anonymous visitor to the staff app is sent straight to the sign-in. */

/* ── Card tints by ROLE ─────────────────────────────────────────────────────
   Ιδιοκτήτης, 23/09/2026, πάνω στη «Νέα κράτηση»: «και εδω να βάζαμε καποια απαλα χρωματα ως φοντο στις κάρτες να
   βοηθάει το ματι. ισως και σε ολη την εφαρμογη». Χρώμα ανά ΕΙΔΟΣ κάρτας, ποτέ ανά θέση: ό,τι είναι χρήματα έχει το
   ίδιο χρώμα σε κάθε οθόνη, ό,τι είναι δωμάτια το δικό του. Ο πλήρης χάρτης ρόλων και οι μετρήσεις αντίθεσης:
   docs/NEW_BOOKING_SPEC.md §7.

   A role class goes on the CARD element — .bk-bandcard, .bk-panel, .bk-strip, .lt-card, .lt-tile or a Bootstrap
   .card — and does nothing but re-point the card's three slots (app.css --lt-card-bg / -band / -shade) at one pair
   of app.css tints. Every card family reads those slots, so no card rule anywhere needs a colour of its own and a
   new screen gets the same colours by adding a class. The two --bs-card-* lines are the same hand-off for a Bootstrap
   card: this sheet loads after bootstrap.min.css, so on the same element they win over `.card`'s own defaults.
   What a role class never touches: inputs and buttons (they keep --lt-surface: a tinted input reads as disabled),
   the grids' rows (the Πελάτες zebra, Bootstrap's --bs-table-bg), the status bar, and the border. */
.lt-tint--rooms {
    --lt-card-bg: var(--lt-tint-rooms);
    --lt-card-band: var(--lt-tint-rooms-band);
    --lt-card-shade: var(--lt-tint-rooms-band);
    --bs-card-bg: var(--lt-tint-rooms);
    --bs-card-cap-bg: var(--lt-tint-rooms-band);
}

.lt-tint--money {
    --lt-card-bg: var(--lt-tint-money);
    --lt-card-band: var(--lt-tint-money-band);
    --lt-card-shade: var(--lt-tint-money-band);
    --bs-card-bg: var(--lt-tint-money);
    --bs-card-cap-bg: var(--lt-tint-money-band);
}

.lt-tint--people {
    --lt-card-bg: var(--lt-tint-people);
    --lt-card-band: var(--lt-tint-people-band);
    --lt-card-shade: var(--lt-tint-people-band);
    --bs-card-bg: var(--lt-tint-people);
    --bs-card-cap-bg: var(--lt-tint-people-band);
}

.lt-tint--extras {
    --lt-card-bg: var(--lt-tint-extras);
    --lt-card-band: var(--lt-tint-extras-band);
    --lt-card-shade: var(--lt-tint-extras-band);
    --bs-card-bg: var(--lt-tint-extras);
    --bs-card-cap-bg: var(--lt-tint-extras-band);
}