/* ==========================================================================
   App theme layer — shared by every theme (Phase 2v, split in 2bw.2).

   Loaded after tabler.min.css (and theme-fluent.css when the theme is not
   `tabler`) in the app and auth layouts. Holds the structural rules every
   theme needs (top bar, detail pages, KPI cards…) and the satin overrides.
   The Fluent tokens / look live in theme-fluent.css.
   ========================================================================== */

/* Elevation (Phase 2ab) for the Tabler theme — Fluent / satin set their own. */
body[data-theme="tabler"] {
    --app-elevation: var(--tblr-shadow-card, 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .06));
    --app-elevation-overlay: var(--tblr-shadow-dropdown, 0 4px 12px rgba(0, 0, 0, .10), 0 14px 36px rgba(0, 0, 0, .14));
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tabler reserves scrollbar width with `:root { margin-left: calc(100vw - 100%) }`
   to stop pages jumping. With a fixed sidebar that margin only shifts the
   content, opening a ~15px gap between the sidebar and the page. Drop it. */
:root {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Sidebar scrollbar only when the nav actually overflows (Tabler forces
   `scroll`, which always steals ~16px from the sidebar's inner width). */
.navbar-vertical.navbar-expand-lg {
    overflow-y: auto;
}

/* Section labels — "Η ΔΟΥΛΕΙΑ ΜΟΥ" style. */
.section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--app-section-label, var(--tblr-body-color));
}

/* Grouped nav (Phase 2am.4) — labelled sections, same grouping the satin
   theme already used. `.nav-group-label` is overridden with satin's own
   colours below (higher specificity via the `[data-theme="satin"]` selector).
   Left padding matches the nav-link text indent below it (Phase 2ap.2 — the
   label was flush against the sidebar edge, out of line with its items). */
.nav-group-label {
    font-size: 11px;
    font-weight: 600;
    padding: 14px var(--tblr-navbar-nav-link-padding-x) 4px;
    color: var(--tblr-secondary);
    text-transform: uppercase;
    letter-spacing: .06em;
}
/* Desktop: a touch larger, like the sidebar links (Fluent). */
@media (min-width: 992px) {
    .nav-group-label {
        font-size: 12px;
    }
}

/* Topbar: thin, bordered, square-ish avatar; pinned (Fluent drops it under its ribbon). */
.page-wrapper > .navbar {
    position: sticky;
    top: var(--app-topbar-top, 0);  /* Fluent: 34px under its ribbon (desktop) */
    z-index: 1025;
    border-bottom: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
}
.navbar .page-title {
    font-size: 17px;
}
.navbar .avatar {
    border-radius: 3px;
}

.app-ribbon-dot {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--app-dot-bg, rgba(0, 0, 0, .22)); /* white «IT» on it ≥ 4.5:1 */
    color: var(--app-dot-color, inherit);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    text-transform: uppercase;
}
/* ---- «Μπάρα πλοήγησης: Πάνω» (Phase 2bw.1) --------------------------------
   No ribbon, no sidebar: the menu bar takes the ribbon's place and colour, and
   it is pinned together with the topbar (title, search, + Νέο) in `.app-top`. */
body[data-nav="top"] {
    padding-top: 0 !important;
}
.app-top {
    position: sticky;
    top: 0;
    z-index: 1030;
}
.app-top > header.navbar:not(.app-navtop) {
    border-bottom: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
}
.app-navtop {
    --app-navtop-strong: #fff;
    --app-navtop-hover: rgba(255, 255, 255, .12);
    /* darker, not lighter: white on the lightened blue read 3.8:1 */
    --app-navtop-active: rgba(0, 0, 0, .2);
    --app-navtop-active-color: #fff;
    --tblr-navbar-bg: var(--tblr-primary);
    --tblr-navbar-color: rgba(255, 255, 255, .86);
    --tblr-navbar-hover-color: var(--app-navtop-strong);
    --tblr-navbar-active-color: var(--app-navtop-strong);
    --tblr-navbar-brand-color: var(--app-navtop-strong);
    --tblr-navbar-brand-hover-color: var(--app-navtop-strong);
    --tblr-navbar-border-color: transparent;
    background: var(--tblr-navbar-bg);
    color: var(--tblr-navbar-color);
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.app-navtop .navbar-toggler {
    color: var(--app-navtop-strong);
    min-width: 40px;
    min-height: 40px;
}
.app-navtop-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--app-navtop-strong);
    padding: 0;
}
.app-navtop .navbar-nav .nav-link {
    color: var(--tblr-navbar-color);
    border-radius: 4px;
    min-height: 40px;
    padding: .375rem .7rem;
}
.app-navtop .navbar-nav .nav-link:hover,
.app-navtop .navbar-nav .nav-link.show {
    color: var(--app-navtop-strong);
    background: var(--app-navtop-hover);
}
.app-navtop .navbar-nav .nav-item.active > .nav-link {
    color: var(--app-navtop-active-color);
    background: var(--app-navtop-active);
    font-weight: 600;
}
/* Tabler draws an underline under the active item of a horizontal navbar — the chip is enough. */
.app-navtop .navbar-nav .nav-item.active::after {
    display: none;
}
.app-navtop .nav-link-icon {
    color: inherit;
}
.app-navtop .dropdown-item.active,
.app-navtop .dropdown-item:active {
    background: var(--tblr-primary-lt, #e1eafb);
    color: var(--tblr-primary);
    font-weight: 600;
}
/* Below lg the groups fold under the ☰ — their items list inline on the bar's colour. */
@media (max-width: 991.98px) {
    .app-navtop .navbar-collapse {
        padding-bottom: .5rem;
    }
    .app-navtop .dropdown-menu {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 .25rem 1.25rem;
    }
    .app-navtop .dropdown-item {
        color: var(--tblr-navbar-color);
        min-height: 40px;
        display: flex;
        align-items: center;
    }
    .app-navtop .dropdown-item:hover,
    .app-navtop .dropdown-item.active {
        color: var(--app-navtop-strong);
        background: var(--app-navtop-hover);
    }
}
@media print {
    .app-top { position: static; }
}

/* Badges / pills: soft radius, semibold, no ALL-CAPS shouting. */
.badge {
    border-radius: 6px;
    font-weight: 600;
    text-transform: none;
}

/* KPI cards — colour moves to a 3px top accent stripe. */
.card-kpi {
    border-top: 3px solid var(--kpi-accent, var(--tblr-primary));
}
/* Πίνακας: a stripe only where it means a state that needs you (late cash,
   overdue renewals, things to invoice); the rest keep a plain edge. */
.card-kpi.is-neutral {
    border-top-width: 1px;
    border-top-color: var(--tblr-border-color);
}
.card-kpi-icon {
    font-size: 1.25rem;
    color: var(--tblr-secondary);
    margin-bottom: .35rem;
    display: block;
}

/* Phones: «Σήμερα» first, then the numbers (user's pick 2026-10-26) — the
   day's work is what the phone is opened for. DOM order stays as on desktop
   for everything else; only the card moves. */
@media (max-width: 767.98px) {
    .dash-main { display: flex; flex-direction: column; }
    .dash-main > #w-today { order: -1; }
}

/* Phones: KPI tiles two a row, no icon row, a smaller number. */
@media (max-width: 575.98px) {
    .kpi-strip .card-kpi .card-kpi-icon { display: none; } /* outranks satin's icon tile */
    .kpi-strip .card-kpi > .card-body { padding: .75rem; }
    .kpi-strip .card-kpi .h1 { font-size: 1.25rem; }
}

/* Πίνακας «Σήμερα» items: the whole card opens the item (stretched link);
   the actions under it (▶ timer, call, map, installation) sit above it. */
.today-item {
    background: var(--tblr-bg-surface-secondary, #fafbfc);
}
.today-item:has(.stretched-link:hover) {
    --tblr-border-color: var(--tblr-primary);
}
.today-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .5rem;
}
.today-act {
    --tblr-btn-padding-y: .2rem;
    --tblr-btn-padding-x: .55rem;
    font-size: .8125rem;
}
.today-act-note {
    align-self: center;
}
/* «Επανέλεγχος όλων» on a ×N group: date + button on one line, wrapping on a phone. */
.today-group-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}
.today-group-form .form-control {
    width: auto;
    min-width: 9.5rem;
}
@media (pointer: coarse) {
    .today-group-form .form-control { min-height: 2.5rem; }
}
@media (pointer: coarse) {
    .today-act { min-height: 2.5rem; }
}

/* Πίνακας «Σήμερα»: the late items fold under one «Εκπρόθεσμα» line. */
.today-late > summary {
    cursor: pointer;
    list-style: none;
    /* 40px touch target without moving the line. */
    margin-block: -.625rem;
    padding-block: .625rem;
}
.today-late > summary::-webkit-details-marker {
    display: none;
}
.today-late-chev {
    transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
.today-late[open] .today-late-chev {
    transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
    .today-late-chev { transition: none; }
}

/* ==========================================================================
   Detail-page shell (Phase 2ac) — header / tabs / "Στοιχεία" panels.
   The partials (partials/detail_header, detail_tabs, field_list) are plain
   Tabler cards; only the tab bar and the zebra list need extra rules.
   ========================================================================== */

/* Tab bar living directly inside its own card. */
.card > .nav-tabs {
    margin: 0;
    padding: .25rem .5rem 0;
    border-bottom: 0;
    /* Narrow screens: scroll the tab strip sideways instead of wrapping it
       into 3-4 ragged rows (ticket / customer / asset detail have 6-9 tabs). */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.card > .nav-tabs::-webkit-scrollbar {
    display: none;
}
.card > .nav-tabs .nav-item {
    flex: 0 0 auto;
}
.card > .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .625rem .9rem;
    color: var(--tblr-secondary);
    font-weight: 500;
}
.card > .nav-tabs .nav-link:hover {
    color: var(--tblr-body-color);
    background: var(--tblr-bg-surface-secondary);
    border-bottom-color: transparent;
}
.card > .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--tblr-primary);
    font-weight: 600;
    border-bottom-color: var(--tblr-primary);
}

/* Zebra label/value list — the "Στοιχεία" panel. */
.field-list .field-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .55rem .9rem;
    font-size: .8125rem;
}
.field-list .field-row:nth-child(odd) {
    background: var(--tblr-bg-surface-secondary);
}
.field-list .field-row .k {
    flex-shrink: 0;
    color: var(--tblr-secondary);
    font-weight: 500;
}
.field-list .field-row .v-group {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}
.field-list .field-row .v {
    text-align: right;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.field-list .field-row .v.muted {
    color: var(--tblr-secondary);
    font-weight: 400;
}
.field-list .field-row .copy-value-btn {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 0 .1rem;
    line-height: 1;
    color: var(--tblr-secondary);
    opacity: .55;
    cursor: pointer;
}
.field-list .field-row .copy-value-btn:hover {
    opacity: 1;
    color: var(--tblr-primary);
}

/* Detail-page header action cluster (partials/detail_header.php). Holds its
   width on desktop; on a phone it drops to its own full-width row so a busy
   .btn-list (e.g. the periodic-inspection page: 6 buttons + inline forms)
   wraps cleanly instead of forcing the page to scroll sideways. */
.detail-header-actions {
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .detail-header-actions {
        flex: 1 1 100%;
    }
    .detail-header-actions > .btn-list {
        width: 100%;
    }
}

/* Tabler's .alert is `display:flex`, so an alert whose direct children are bare
   text + inline elements (<strong>, <code>) lays them out as row flex items and
   overflows sideways on a phone. Alerts that actually want the flex/icon layout
   add `.d-flex` in markup (e.g. the ticket "locked" banner) — everything else
   should just flow. */
.alert:not(.d-flex) {
    display: block;
}
.alert code {
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Satin theme — everything below is scoped to body[data-theme="satin"]
   (Phase 2w). The default (Outlook) theme is untouched.
   ========================================================================== */

body[data-theme="satin"] {
    padding-top: 0;
    --tblr-primary: #2b5cd6;
    --tblr-primary-rgb: 43, 92, 214;
    --tblr-link-color: #2b5cd6;
    --tblr-link-color-rgb: 43, 92, 214;
    --tblr-body-bg: #eef0f3;

    /* Deeper, cooler shadows so boxes read against the darker satin ground
       and next to the dark sidebar (Phase 2ab). */
    --app-elevation: 0 1px 2px rgba(16, 21, 38, .10), 0 6px 20px rgba(16, 21, 38, .16);
    --app-elevation-overlay: 0 6px 18px rgba(16, 21, 38, .22), 0 18px 44px rgba(16, 21, 38, .28);
}
/* Match the active-nav-chip glow already in use on satin. */
body[data-theme="satin"] .btn-primary,
body[data-theme="satin"] .btn-primary:hover,
body[data-theme="satin"] .btn-primary:focus,
body[data-theme="satin"] .btn-primary:active {
    box-shadow: 0 2px 8px rgba(var(--tblr-primary-rgb), .4);
}
body[data-theme="satin"] .app-ribbon {
    display: none;
}

/* ---- Satin content ------------------------------------------------------- */
body[data-theme="satin"] .card {
    border-radius: 12px;
}
/* section labels read as normal headings in satin, not tiny uppercase */
body[data-theme="satin"] .section-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    color: #1a2036;
}
/* KPI: the top accent stripe becomes a tinted icon chip */
body[data-theme="satin"] .card-kpi {
    border-top: 1px solid var(--tblr-border-color);
}
body[data-theme="satin"] .card-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: .6rem;
    background: color-mix(in srgb, var(--kpi-accent, var(--tblr-primary)) 14%, transparent);
    color: var(--kpi-accent, var(--tblr-primary));
}

@media (min-width: 992px) {
    /* No ribbon in satin — the sidebar's own brand box sits on top. */
    body[data-theme="satin"] .navbar-vertical.navbar-expand-lg {
        top: 0;
    }
    body[data-theme="satin"] .navbar-vertical .navbar-brand {
        display: block;
    }
    /* Topbar pins to the very top (no ribbon to clear). */
    body[data-theme="satin"] .page-wrapper > .navbar {
        top: 0;
    }
}

/* ---- Satin sidebar ------------------------------------------------------- */
body[data-theme="satin"] .navbar-vertical {
    --tblr-navbar-bg: transparent;
    --tblr-navbar-color: #a8b2cc;
    --tblr-navbar-hover-color: #dfe4f2;
    --tblr-navbar-active-color: #ffffff;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, .04) 0%, transparent 28%, rgba(255, 255, 255, .02) 65%, transparent 100%),
        linear-gradient(165deg, #131a2c 0%, #161d30 45%, #10151f 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
}
body[data-theme="satin"] .navbar-vertical .container-fluid {
    padding: 0;
}
body[data-theme="satin"] .navbar-vertical .navbar-collapse {
    padding: 10px;
}
/* Grouped nav sits compactly at the top — no per-group flex-grow that
   spreads the sections down the whole sidebar. */
body[data-theme="satin"] .navbar-vertical .navbar-nav {
    flex-grow: 0;
}

body[data-theme="satin"] .navbar-vertical .satin-brand {
    margin: 0;
    padding: 16px;
    justify-content: flex-start;
    background: linear-gradient(135deg, #1c2740 0%, #222f4d 45%, #1a2338 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
body[data-theme="satin"] .navbar-vertical .satin-brand a {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

body[data-theme="satin"] .navbar-vertical .satin-context {
    padding: 12px 16px;
    background: linear-gradient(135deg, #212c47 0%, #283656 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
/* Κουτί «Επιχείρηση» → one-click Quick launcher (πρώην name + «Αλλαγή»). */
body[data-theme="satin"] .navbar-vertical .satin-context-quick {
    padding: 10px 16px;
}
body[data-theme="satin"] .satin-quick-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 7px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f59f00 0%, #f76707 100%);
    color: #231400; /* white read 2.5:1 on the orange; dark ink 5.9:1+ */
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
body[data-theme="satin"] .satin-quick-btn:hover {
    filter: brightness(1.08);
    color: #231400;
}

body[data-theme="satin"] .nav-group-label {
    font-size: 10.5px;
    font-weight: 600;
    padding: 12px var(--tblr-navbar-nav-link-padding-x) 6px;
    color: #8a97b4; /* 5.5:1 on the sidebar (was 2.9:1) */
    text-transform: uppercase;
    letter-spacing: .06em;
}
/* Match the desktop group-label bump in the default theme (declared before this
   rule, so it needs restating here to win the source-order tie). */
@media (min-width: 992px) {
    body[data-theme="satin"] .nav-group-label {
        font-size: 12px;
    }
}
body[data-theme="satin"] .navbar-vertical .navbar-nav .nav-link {
    border-radius: 7px;
    border-left: 0;
    color: #a8b2cc;
    font-weight: 500;
    margin-bottom: 1px;
}
body[data-theme="satin"] .navbar-vertical .navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .045);
    color: #dfe4f2;
}
body[data-theme="satin"] .navbar-vertical .navbar-nav .nav-item.active::after {
    display: none;
}
body[data-theme="satin"] .navbar-vertical .navbar-nav .nav-item.active .nav-link,
body[data-theme="satin"] .navbar-vertical .navbar-nav .nav-link.active {
    background: linear-gradient(135deg, #2b5cd6, #3b6fed);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(43, 92, 214, .4);
}
body[data-theme="satin"] .navbar-vertical .navbar-nav .nav-item.active .nav-link .nav-link-icon,
body[data-theme="satin"] .navbar-vertical .navbar-nav .nav-link.active .nav-link-icon {
    color: #fff;
}

/* ---- Satin top bar (Phase 2bw.1) — the sidebar's dark ground and blue chip, laid flat. */
body[data-theme="satin"] .app-navtop {
    --tblr-navbar-bg: #151c2e;
    --tblr-navbar-color: #a8b2cc;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, .04) 0%, transparent 28%, rgba(255, 255, 255, .02) 65%, transparent 100%),
        linear-gradient(165deg, #131a2c 0%, #161d30 45%, #10151f 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
body[data-theme="satin"] .app-navtop .navbar-nav .nav-link {
    border-radius: 7px;
    font-weight: 500;
}
body[data-theme="satin"] .app-navtop .navbar-nav .nav-item.active > .nav-link {
    background: linear-gradient(135deg, #2b5cd6, #3b6fed);
    box-shadow: 0 2px 8px rgba(43, 92, 214, .4);
}
body[data-theme="satin"] .app-navtop-quick .satin-quick-btn {
    width: auto;
    min-height: 34px;
    padding: 6px 14px;
}

/* ==========================================================================
   «Tabler» theme (Phase 2bw.2, Εξέλιξη #11) — Tabler 1.4's own tokens: the
   layouts skip theme-fluent.css, so colours, radius, cards, buttons and the
   light sidebar are Tabler's. Only the app's own chrome needs a word here.
   ========================================================================== */
/* Menu bar «Πάνω» and side menu: dark navy (user, 2026-10-02), in light and dark alike. */
body[data-theme="tabler"] {
    --app-navy: #0b1626;          /* girolix.eu page ground (user, 2026-10-02) */
    --app-navy-active: #3d6bab;   /* girolix.eu button blue */
}
body[data-theme="tabler"] .app-navtop {
    --app-navtop-strong: #ffffff;
    --app-navtop-hover: rgba(255, 255, 255, .1);
    --app-navtop-active: var(--app-navy-active);
    --app-navtop-active-color: #ffffff;
    --tblr-navbar-bg: var(--app-navy);
    --tblr-navbar-color: rgba(255, 255, 255, .8);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}
body[data-theme="tabler"] .navbar-vertical {
    --tblr-navbar-bg: var(--app-navy);
    --tblr-navbar-border-color: rgba(0, 0, 0, .2);
    --tblr-navbar-color: rgba(255, 255, 255, .8);
    --tblr-navbar-hover-color: #ffffff;
    --tblr-navbar-active-color: #ffffff;
    --tblr-navbar-brand-color: #ffffff;
    background: var(--app-navy);
    color: rgba(255, 255, 255, .8);
}
body[data-theme="tabler"] .navbar-vertical .navbar-brand a,
body[data-theme="tabler"] .navbar-vertical .navbar-toggler {
    color: #ffffff;
}
body[data-theme="tabler"] .navbar-vertical .nav-group-label {
    color: rgba(255, 255, 255, .5);
}
body[data-theme="tabler"] .navbar-vertical .navbar-nav .nav-link {
    border-radius: var(--tblr-border-radius);
    color: rgba(255, 255, 255, .8);
}
body[data-theme="tabler"] .navbar-vertical .navbar-nav .nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
}
body[data-theme="tabler"] .navbar-vertical .navbar-nav .nav-item.active .nav-link {
    color: #ffffff;
    background: var(--app-navy-active);
    font-weight: 600;
}
body[data-theme="tabler"] .navbar-vertical .navbar-nav .nav-item.active::after {
    display: none;
}

/* ---- Satin, dark (Phase 2bw.3) — the sidebar's navy carried into the page. */
[data-bs-theme="dark"] body[data-theme="satin"] {
    --tblr-body-bg: #0f1420;
    --tblr-body-bg-rgb: 15, 20, 32;
    --tblr-bg-surface: #171e2e;
    --tblr-bg-surface-primary: #171e2e;
    --tblr-bg-surface-secondary: #1c2436;
    --tblr-bg-surface-tertiary: #222b3f;
    --tblr-bg-forms: #121826;
    --tblr-border-color: #2a3550;
    --tblr-link-color: #7da2f0;
    --tblr-link-color-rgb: 125, 162, 240;
    --app-elevation: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 20px rgba(0, 0, 0, .4);
    --app-elevation-overlay: 0 6px 18px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .55);
}
[data-bs-theme="dark"] body[data-theme="satin"] .section-label {
    color: #dfe4f2;
}

/* ---- Dark, every theme (Phase 2bw.3) ------------------------------------
   Bootstrap's .bg-light stays light in dark mode; in this app it always means
   «a quieter row / box», so read it as the secondary surface. */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--tblr-bg-surface-secondary) !important;
}
.when-dark { display: none; }
[data-bs-theme="dark"] .when-dark { display: inline; }
[data-bs-theme="dark"] .when-light { display: none; }

/* Toast UI editor (comments, KB, email templates) ships light only — dark surfaces,
   lines and text; its toolbar icon sprite is dark-on-light, so it is inverted. */
[data-bs-theme="dark"] .toastui-editor-defaultUI {
    border-color: var(--tblr-border-color);
    color: var(--tblr-body-color);
}
[data-bs-theme="dark"] .toastui-editor-defaultUI-toolbar,
[data-bs-theme="dark"] .toastui-editor-md-tab-container,
[data-bs-theme="dark"] .toastui-editor-dropdown-toolbar,
[data-bs-theme="dark"] .toastui-editor-close-button,
[data-bs-theme="dark"] .toastui-editor-file-select-button {
    background-color: var(--tblr-bg-surface-secondary);
    border-color: var(--tblr-border-color);
}
[data-bs-theme="dark"] .toastui-editor-ww-container,
[data-bs-theme="dark"] .toastui-editor-md-container,
[data-bs-theme="dark"] .toastui-editor-mode-switch,
[data-bs-theme="dark"] .toastui-editor-popup,
[data-bs-theme="dark"] .toastui-editor-context-menu,
[data-bs-theme="dark"] .toastui-editor-table-cell,
[data-bs-theme="dark"] .toastui-editor-ww-code-block-language {
    background-color: var(--tblr-bg-forms);
    border-color: var(--tblr-border-color);
    color: var(--tblr-body-color);
}
[data-bs-theme="dark"] .toastui-editor-contents,
[data-bs-theme="dark"] .toastui-editor-contents p,
[data-bs-theme="dark"] .toastui-editor-md-container .toastui-editor,
[data-bs-theme="dark"] .toastui-editor .ProseMirror {
    color: var(--tblr-body-color);
}
[data-bs-theme="dark"] .toastui-editor-mode-switch .tab-item {
    background: var(--tblr-bg-surface-secondary);
    border-color: var(--tblr-border-color);
    color: var(--tblr-secondary);
}
[data-bs-theme="dark"] .toastui-editor-mode-switch .tab-item.active {
    background: var(--tblr-bg-forms);
    color: var(--tblr-body-color);
}
[data-bs-theme="dark"] .toastui-editor-toolbar-icons {
    filter: invert(.85);
}
[data-bs-theme="dark"] .toastui-editor-toolbar-divider,
[data-bs-theme="dark"] .toastui-editor-md-splitter {
    background-color: var(--tblr-border-color);
}

/* ---- «Tabler», light: more contrast (user, 2026-10-02: «too light») ----------
   Tabler's own light is white cards on #f9fafb with a 4% shadow — nothing stood
   apart. A greyer ground, visible edges and shadow, darker text. Dark untouched. */
:root:not([data-bs-theme="dark"]) body[data-theme="tabler"] {
    --tblr-body-bg: #e6eaf0;
    --tblr-body-bg-rgb: 230, 234, 240;
    --tblr-bg-surface-secondary: #f3f5f8;
    --tblr-border-color: #cdd4de;
    --tblr-border-color-translucent: rgba(16, 24, 40, .2);
    --tblr-body-color: #111827;
    --tblr-body-color-rgb: 17, 24, 39;
    --tblr-secondary: #4b5563;
    --tblr-secondary-color: #4b5563;
    --tblr-muted: #4b5563;
    --app-elevation: 0 1px 2px rgba(16, 24, 40, .08), 0 3px 8px rgba(16, 24, 40, .10);
    --app-control-edge: #aab3c0;
}
:root:not([data-bs-theme="dark"]) body[data-theme="tabler"] .card {
    box-shadow: var(--app-elevation);
}
/* the page-title bar a shade off white, under the dark-blue menu bar */
:root:not([data-bs-theme="dark"]) body[data-theme="tabler"] .app-top > header.navbar:not(.app-navtop),
:root:not([data-bs-theme="dark"]) body[data-theme="tabler"] .page-wrapper > .navbar {
    background: #f6f8fa;
}

/* ==========================================================================
   Readable colour text (critique of the Πίνακας, 2026-10-26).
   Tabler's tinted «-lt» badges print the full-strength hue on a 10% tint of
   itself: yellow 1.9:1, orange / teal 2.7:1, green 2.9:1 against the 4.5:1
   text needs. The ink goes darker in light mode and lighter in dark mode;
   the tint behind it stays, so every badge keeps its colour.
   ========================================================================== */
:root:not([data-bs-theme="dark"]) :is(.bg-blue-lt, .bg-azure-lt, .bg-indigo-lt, .bg-purple-lt, .bg-pink-lt, .bg-red-lt, .bg-cyan-lt) {
    --app-lt-ink-mix: 72%;
}
:root:not([data-bs-theme="dark"]) :is(.bg-orange-lt, .bg-teal-lt, .bg-green-lt, .bg-lime-lt) {
    --app-lt-ink-mix: 58%;
}
:root:not([data-bs-theme="dark"]) .bg-yellow-lt {
    --app-lt-ink-mix: 50%;
}
:root:not([data-bs-theme="dark"]) .bg-blue-lt   { color: color-mix(in oklab, var(--tblr-blue) var(--app-lt-ink-mix), #000) !important; }
:root:not([data-bs-theme="dark"]) .bg-azure-lt  { color: color-mix(in oklab, var(--tblr-azure) var(--app-lt-ink-mix), #000) !important; }
:root:not([data-bs-theme="dark"]) .bg-indigo-lt { color: color-mix(in oklab, var(--tblr-indigo) var(--app-lt-ink-mix), #000) !important; }
:root:not([data-bs-theme="dark"]) .bg-purple-lt { color: color-mix(in oklab, var(--tblr-purple) var(--app-lt-ink-mix), #000) !important; }
:root:not([data-bs-theme="dark"]) .bg-pink-lt   { color: color-mix(in oklab, var(--tblr-pink) var(--app-lt-ink-mix), #000) !important; }
:root:not([data-bs-theme="dark"]) .bg-red-lt    { color: color-mix(in oklab, var(--tblr-red) var(--app-lt-ink-mix), #000) !important; }
:root:not([data-bs-theme="dark"]) .bg-cyan-lt   { color: color-mix(in oklab, var(--tblr-cyan) var(--app-lt-ink-mix), #000) !important; }
:root:not([data-bs-theme="dark"]) .bg-orange-lt { color: color-mix(in oklab, var(--tblr-orange) var(--app-lt-ink-mix), #000) !important; }
:root:not([data-bs-theme="dark"]) .bg-teal-lt   { color: color-mix(in oklab, var(--tblr-teal) var(--app-lt-ink-mix), #000) !important; }
:root:not([data-bs-theme="dark"]) .bg-green-lt  { color: color-mix(in oklab, var(--tblr-green) var(--app-lt-ink-mix), #000) !important; }
:root:not([data-bs-theme="dark"]) .bg-lime-lt   { color: color-mix(in oklab, var(--tblr-lime) var(--app-lt-ink-mix), #000) !important; }
:root:not([data-bs-theme="dark"]) .bg-yellow-lt { color: color-mix(in oklab, var(--tblr-yellow) var(--app-lt-ink-mix), #000) !important; }

/* Dark mode: the hues as text on dark cards (red 3.2:1, blue 3.0:1) are
   lifted toward white — text and its badges alike. */
:root[data-bs-theme="dark"] :is(.text-blue, .bg-blue-lt)     { color: color-mix(in oklab, var(--tblr-blue) 55%, #fff) !important; }
:root[data-bs-theme="dark"] :is(.text-azure, .bg-azure-lt)   { color: color-mix(in oklab, var(--tblr-azure) 60%, #fff) !important; }
:root[data-bs-theme="dark"] :is(.text-indigo, .bg-indigo-lt) { color: color-mix(in oklab, var(--tblr-indigo) 55%, #fff) !important; }
:root[data-bs-theme="dark"] :is(.text-purple, .bg-purple-lt) { color: color-mix(in oklab, var(--tblr-purple) 60%, #fff) !important; }
:root[data-bs-theme="dark"] :is(.text-pink, .bg-pink-lt)     { color: color-mix(in oklab, var(--tblr-pink) 60%, #fff) !important; }
:root[data-bs-theme="dark"] :is(.text-red, .bg-red-lt)       { color: color-mix(in oklab, var(--tblr-red) 60%, #fff) !important; }
:root[data-bs-theme="dark"] :is(.text-orange, .bg-orange-lt) { color: color-mix(in oklab, var(--tblr-orange) 75%, #fff) !important; }
:root[data-bs-theme="dark"] :is(.text-teal, .bg-teal-lt)     { color: color-mix(in oklab, var(--tblr-teal) 75%, #fff) !important; }
:root[data-bs-theme="dark"] :is(.text-green, .bg-green-lt)   { color: color-mix(in oklab, var(--tblr-green) 75%, #fff) !important; }

/* Solid count badges: white on Tabler orange is 3.0:1; a deeper orange keeps the alarm and reads. */
.badge.bg-orange.text-white {
    background-color: color-mix(in oklab, var(--tblr-orange), #000 20%) !important;
}

/* Placeholders read as hints, not as disabled ink (2.5:1 → secondary text). */
.form-control::placeholder {
    color: var(--tblr-secondary);
    opacity: 1;
}

/* «Μετάβαση στο περιεχόμενο»: hidden until a keyboard user tabs onto it. */
.app-skip:focus {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem .75rem;
    border-radius: 6px;
    background: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
main.page-body:focus { outline: none; } /* focus target of the skip link, not a control */