/* =====================================================================
   "Still Water" display theme (LIB-SPEC render §"Display theme", locked
   2026-08-29). The full theme ships here; conf::$css stays a thin
   per-project overlay (accent hex, logo) — not a place to re-fork
   components. Phase A = tokens + palette (this block). Density, motion,
   busy/saved states, print and the small-screen floor land in later
   phases and are NOT in this block yet.
   ===================================================================== */

/* Noto Sans (+ Thai) — one family, self-hosted (SIL OFL), latin + thai
   subsets, weights 400/500/600/700. No Google Fonts <link>: offline
   deploys render fully. */
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url(font/NotoSans-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:500;font-display:swap;src:url(font/NotoSans-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:600;font-display:swap;src:url(font/NotoSans-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;src:url(font/NotoSans-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url(font/NotoSansThai-thai-400.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url(font/NotoSansThai-thai-500.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url(font/NotoSansThai-thai-600.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url(font/NotoSansThai-thai-700.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}

:root {
    /* --- neutrals & ground (faint blue bias, never pure black/white) --- */
    --bs-body-bg:            #F7F9FB;
    --bs-body-color:         #1C2733;
    --bs-secondary-color:    #566677;
    --bs-tertiary-bg:        #F1F5F9;
    --bs-border-color:       #E2E8EF;
    --bs-emphasis-color:     #1C2733;   /* one dark ink — Still Water has no near-black; BS tables/‹strong› default to this */

    /* --- one accent, two weights + an ink for 4.5:1 text --- */
    --lds-accent:        #4A93D1;   /* ambient: rings, active nav, chart fill */
    --lds-accent-strong: #2E7CC2;   /* the one primary button per view       */
    --lds-accent-ink:    #235E96;   /* accent-coloured text on light         */
    --lds-accent-weak:   #EAF2FA;   /* active-row / selected tint            */
    --bs-primary:        #2E7CC2;
    --bs-primary-rgb:    46, 124, 194;
    --bs-link-color:     #235E96;
    --bs-link-color-rgb: 35, 94, 150;
    --bs-link-hover-color: #1B4A78;

    /* --- state colours (meaning only) --- */
    --bs-success: #2F8F5B; --bs-success-rgb: 47, 143, 91;
    --bs-warning: #B8791C; --bs-warning-rgb: 184, 121, 28;
    --bs-danger:  #C0453C; --bs-danger-rgb:  192, 69, 60;

    /* --- topbar chrome tint --- */
    --lds-topbar-bg:     #CFE1F1;
    --lds-topbar-border: #B4CCE0;
    --lds-topbar-ink:    #3C5468;

    /* --- surface tokens (used by later phases) --- */
    --lds-ground:   #F7F9FB;
    --lds-surface:  #FFFFFF;
    --lds-ink:      #1C2733;
    --lds-ink-soft: #566677;
    --lds-line:     #E2E8EF;
    --lds-shadow:   0 1px 2px rgba(27, 58, 92, .06), 0 8px 24px rgba(27, 58, 92, .07);

    /* --- one radius scale, one font family --- */
    --bs-border-radius:    .3125rem;   /* 5px  */
    --bs-border-radius-sm: .25rem;     /* 4px  */
    --bs-border-radius-lg: .4375rem;   /* 7px  */
    --bs-font-sans-serif: "Noto Sans", "Noto Sans Thai", system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Palette overrides for the handful of BS5.3 components whose colours are
   compiled, not variable-driven. */
.btn-primary {
    --bs-btn-bg: var(--lds-accent-strong);
    --bs-btn-border-color: var(--lds-accent-strong);
    --bs-btn-hover-bg: #2A70B0;
    --bs-btn-hover-border-color: #2A70B0;
    --bs-btn-active-bg: #255F96;
    --bs-btn-active-border-color: #255F96;
    --bs-btn-disabled-bg: var(--lds-accent-strong);
    --bs-btn-disabled-border-color: var(--lds-accent-strong);
}
.btn-outline-primary {   /* segmented selectSet */
    --bs-btn-color: var(--lds-accent-ink);
    --bs-btn-border-color: var(--lds-accent);
    --bs-btn-hover-bg: var(--lds-accent-strong);
    --bs-btn-hover-border-color: var(--lds-accent-strong);
    --bs-btn-active-bg: var(--lds-accent-strong);
    --bs-btn-active-border-color: var(--lds-accent-strong);
}
.table {
    --bs-table-striped-bg: color-mix(in srgb, var(--lds-accent) 10%, transparent);
    --bs-table-hover-bg:   color-mix(in srgb, var(--lds-accent) 20%, transparent);
}

/* Topbar: soft-blue chrome tint, not the old dark bg-dark bar. Markup
   swapped navbar-dark/bg-dark → .lds-topbar in frame::pageTopbar(). */
.lds-topbar {
    background: var(--lds-topbar-bg);
    border-bottom: 1px solid var(--lds-topbar-border);
    --bs-navbar-color: var(--lds-topbar-ink);
    --bs-navbar-brand-color: var(--lds-ink);
    --bs-navbar-brand-hover-color: var(--lds-ink);
}
.lds-topbar .btn-outline-secondary {   /* the icon controls read as light chips on the tint */
    --bs-btn-color: var(--lds-topbar-ink);
    --bs-btn-bg: var(--lds-surface);
    --bs-btn-border-color: var(--lds-topbar-border);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-color: var(--lds-ink);
    --bs-btn-hover-border-color: var(--lds-accent);
}
/* topbar chips (icon buttons + the language select) read as one set — square
   28px icon buttons, all on the same white/topbar-line/5px-radius spec as the
   direction mockup's .tbtn / .u. The language <select> is a real control (not
   the mockup's static "EN" chip) but wears the same border and ground. */
.lds-topbar .btn {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius);
}
.lds-topbar .btn[data-nav="profile"] {   /* profile carries a name — not square */
    width: auto;
    padding: 0 .6rem;
    gap: .35rem;
}
.lds-topbar .form-select {
    height: 1.9rem;
    padding-top: 0;
    padding-bottom: 0;
    border-color: var(--lds-topbar-border);
    background-color: var(--lds-surface);
    border-radius: var(--bs-border-radius);
    color: var(--lds-topbar-ink);
}
.lds-topbar .navbar-brand {
    font-weight: 600;
    letter-spacing: -.01em;
}

/* =====================================================================
   Still Water Phase C — consistency audit. BS5 compiles the semantic
   button colours from hex, so a CSV `style` column of btn-success /
   btn-warning / btn-danger / btn-info renders in BS's loud defaults,
   not the theme's muted state tokens. Route every variant (and its
   outline) through the tokens so the whole button set reads as one
   system. The BA's semantic *choice* is respected — only the shade
   changes.
   ===================================================================== */
.btn-success {
    --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 88%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 78%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 78%, #000);
    --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success);
}
.btn-danger {
    --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 88%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 78%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 78%, #000);
    --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger);
}
.btn-warning {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 88%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 78%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 78%, #000);
    --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning);
}
.btn-info {   /* cyan Export etc. → the theme accent, not a second hue */
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: var(--lds-accent); --bs-btn-border-color: var(--lds-accent);
    --bs-btn-hover-bg: var(--lds-accent-strong); --bs-btn-hover-border-color: var(--lds-accent-strong);
    --bs-btn-active-bg: var(--lds-accent-ink); --bs-btn-active-border-color: var(--lds-accent-ink);
    --bs-btn-disabled-bg: var(--lds-accent); --bs-btn-disabled-border-color: var(--lds-accent);
}
.btn-outline-success { --bs-btn-color: var(--bs-success); --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); }
.btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); }
.btn-outline-warning { --bs-btn-color: var(--bs-warning); --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning); }
.btn-outline-info { --bs-btn-color: var(--lds-accent-ink); --bs-btn-border-color: var(--lds-accent);
    --bs-btn-hover-bg: var(--lds-accent-strong); --bs-btn-hover-border-color: var(--lds-accent-strong);
    --bs-btn-active-bg: var(--lds-accent-strong); --bs-btn-active-border-color: var(--lds-accent-strong); }

/* native colour input: a small swatch, not a full-width bar. .lds-field's
   `flex:1 1 auto` on every non-label child would otherwise grow it to the
   full row; `input.form-control-color` (specificity 0,2,1) beats that and
   pins the flex basis. */
.form-control-color {
    padding: .25rem;
}
.lds-field > input.form-control-color {
    flex: 0 0 3rem;
    max-width: 3rem;
}

/* icons: one box width so they line up down a menu / across a button row
   regardless of glyph (fa-pencil vs fa-trash vs fa-cubes). */
.btn > .fa, .nav-link > .fa, .nav-head > .fa {
    width: 1.15em;
    text-align: center;
}

/* topbar language select: don't let it collapse to a sliver on a narrow
   viewport next to the other topbar controls. */
.lds-topbar select[name="lang"] {
    min-width: 4.5rem;
}

/* sidebar/content row: stretch to at least the viewport height, not just
   the shorter of the two children's own content height — otherwise the
   sidebar's border-end (the visual divider) stops wherever the shorter
   side ends instead of running the full page. body becomes the flex
   column (topbar's natural height, then this row grows to fill the
   rest); the row's own internal stretch (sidebar vs content) is
   untouched and still handles content taller than the viewport normally. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.lds-shell {
    flex: 1 0 auto;
}
/* sidebar reads as a white panel against the off-white content ground
   (matches the direction mockup's .dev-side) — the .border-end divider only
   shows if the two sides differ. #content keeps --lds-ground from the body. */
#lds-sidebar {
    background: var(--lds-surface);
    font-size: 13px;   /* one notch under the 14px body — mockup's .dev-side is 12.5 on a 13.5 base */
}

/* Data density (Still Water Phase B). Text size held at 14px (one root cut,
   2026-07-20 benchmark) — readability is not the thing to trade. Spacing is
   loosened one notch from the original build and split two tiers: table
   cells stay tight for scanning; form controls get a little more room since
   accuracy matters more there than fitting one extra row. Keyboard +
   barcode-wedge tool, not touch — no 44px target minimum on desktop (the
   small-screen block below lifts targets only under 768px). */
html {
    font-size: 87.5%;
}
.table > :not(caption) > * > * {
    padding: .42rem .55rem;   /* ~32px rows */
}

.btn {
    padding: .3rem .6rem;
    margin-right: 5px;
}
.form-control {
    padding: .38rem .55rem;
    font-size: .875rem;
}
.form-select {
    /* right side stays Bootstrap's own reserved caret space (2.25rem) —
       .form-control's symmetric shorthand overwrote it, overlapping the
       ▾ icon with the selected text */
    padding-top: .38rem;
    padding-bottom: .38rem;
    padding-left: .55rem;
    font-size: .875rem;
}

/* control-set (label + control): side by side by default. Override per
   field with disp::set()'s $opt['stacked'] — see disp.php. */
.lds-field {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.lds-field > .form-label {
    flex: 0 0 8.5rem;
    margin-bottom: 0;
    text-align: right;
}
.lds-field > *:not(.form-label) {
    flex: 1 1 auto;
    min-width: 0;
}
.lds-field-stacked {
    display: block;
}
.lds-field-stacked > .form-label {
    display: block;
    flex: none;
    width: auto;
    text-align: left;
    margin-bottom: .25rem;
}

/* search row: fields sit inline with the Search button — each field's own
   mb-3 would otherwise push it up off the button's baseline. Bootstrap's
   own .mb-3 utility is !important, so cancelling it needs !important too. */
.lds-search > .lds-field {
    margin-bottom: 0 !important;
}

/* footer buttons (Save/Back/...) centered by default — see interp.php's
   render() footer case for the wrapping div */

/* sidebar menu group: collapsed by default, .show expands it, each group
   toggles independently — runtime.js's [data-toggle-group] handler owns
   the toggle, frame.php marks the group containing the active page with
   .show server-side */
.lds-menu-group .nav-head {
    cursor: pointer;
    user-select: none;
    font-weight: 600;   /* mockup's .gh is 600, not fw-bold's 700 */
}
/* leading menu icons sit quiet, like the mockup's .ico */
.lds-menu .nav-head > .fa,
.lds-menu .nav-link > .fa {
    opacity: .7;
}
.lds-menu-group .lds-menu-body {
    display: none;
}
.lds-menu-group.show .lds-menu-body {
    display: flex;
}
.lds-menu-caret {
    font-size: .65em;        /* mockup's .cv is a small hint, not text-sized */
    opacity: .6;
    transition: transform .15s;
}
.lds-menu-group.show .lds-menu-caret {
    transform: rotate(180deg);
}
/* menu colour, per the direction mockup:
   - top level (group headers + flat pages) = dark ink, 600 — the spine
   - sub-menu links = quiet ink-soft, 400 — indented detail
   - active page (either level) = accent, handled below
   BS5's own .nav re-sets --bs-nav-link-color on the wrapper, so the
   sub-links need it re-set on .nav specifically. Hover tints, doesn't
   recolour. */
.lds-menu .nav {
    --bs-nav-link-color: var(--lds-ink-soft);
    --bs-nav-link-hover-color: var(--lds-accent-ink);
}
.lds-menu > a.nav-link {
    color: var(--lds-ink);
    font-weight: 600;   /* reads like a collapsed group header */
    margin-bottom: 7px;
}
.lds-menu .nav-link:hover {
    background: var(--lds-accent-weak);
    color: var(--lds-accent-ink);
}

.lds-combobox .lds-combobox-list {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 16rem;
    overflow-y: auto;
}
.lds-menu .nav-link.active {
    font-weight: 600;
    color: var(--lds-accent-ink);
    background: var(--lds-accent-weak);
    border-radius: var(--bs-border-radius);
    box-shadow: inset 2px 0 0 var(--lds-accent-strong);
}

.lds-datepicker {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .15);
    padding: 0.375rem;
    width: 16rem;
}
.lds-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}
.lds-datepicker-dow {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    padding: 0.25rem 0;
}
.lds-datepicker-day {
    border: none;
    background: none;
    border-radius: var(--bs-border-radius);
    padding: 0.25rem 0;
}
.lds-datepicker-day:hover {
    background: var(--bs-tertiary-bg);
}
.lds-datepicker-day.today {
    font-weight: 600;
}
.lds-datepicker-day.selected {
    background: var(--bs-primary);
    color: var(--bs-body-bg);
}

/* =====================================================================
   Still Water Phase B — focus / active-row / busy / saved cues.
   CSS-only motion, ≈130ms, "where am I / what changed" only. All of it
   goes still under prefers-reduced-motion (block at the very bottom).
   ===================================================================== */

/* Focus: unmistakable. BS5 already rings form controls off --bs-primary-rgb;
   this widens the net (segmented buttons, combobox, switches) and lifts the
   ring a touch so "which field am I in" reads instantly during Enter-to-next
   keyboard flow. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.lds-combobox input:focus,
.btn-check:focus-visible + .btn {
    border-color: var(--lds-accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--lds-accent) 38%, transparent);
    transition: box-shadow .13s ease, border-color .13s ease;
}

/* Active / just-edited data row (addTable click-to-edit toggles tr.active) */
.table tbody tr.active {
    --bs-table-bg: var(--lds-accent-weak);
}
.table tbody tr.active > *:first-child {
    box-shadow: inset 2px 0 0 var(--lds-accent-strong);
}

/* Busy bar: a 2px indeterminate accent sweep along the top of the content
   zone. Rides #lds-lock's exact lifecycle (runtime.js loadLock/loadUnlock)
   with zero JS — the lock was already an invisible interaction shield;
   this just lets people see it. */
#lds-lock::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--lds-accent) 50%, transparent 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: lds-busy 1s linear infinite;
}
@keyframes lds-busy {
    from { background-position: -45% 0; }
    to   { background-position: 145% 0; }
}

/* Saved / notice: a non-blocking toast, replaces msgPopup's alert().
   runtime.js appends #lds-toasts once and drops .lds-toast children in. */
#lds-toasts {
    position: fixed;
    top: 3.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2100;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: center;
    pointer-events: none;
}
.lds-toast {
    pointer-events: auto;
    cursor: pointer;
    max-width: min(90vw, 30rem);
    padding: .45rem .8rem;
    border-radius: var(--bs-border-radius);
    background: var(--lds-surface);
    color: var(--lds-ink);
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--lds-accent-strong);
    box-shadow: var(--lds-shadow);
    font-size: .875rem;
    animation: lds-toast-in .15s ease;
}
.lds-toast--error {
    border-left-color: var(--bs-danger);
}
.lds-toast.is-leaving {
    animation: lds-toast-out .2s ease forwards;
}
@keyframes lds-toast-in {
    from { opacity: 0; transform: translateY(-.4rem); }
}
@keyframes lds-toast-out {
    to { opacity: 0; transform: translateY(-.4rem); }
}

/* Small screens — desktop-first, "workable, not broken" floor.
   (The sidebar drawer is handled in its own block below.) */
@media (max-width: 767.98px) {
    /* (wide tables already scroll in their own lane — disp::table() wraps
       them in BS5's .table-responsive) */
    /* touch-sized targets at this breakpoint only */
    .btn { padding: .5rem .8rem; }
    .form-control, .form-select { padding: .5rem .6rem; }
    .lds-menu .nav-link, .lds-menu .nav-head { padding: .55rem .75rem; }
    /* topbar sheds the non-essential controls */
    .lds-topbar [data-duplicate], .lds-topbar [data-fullscreen] { display: none; }
}
@media (max-width: 575.98px) {
    /* label spine unstacks — label above the input, full width */
    .lds-field {
        display: block;
    }
    .lds-field > .form-label {
        flex: none;
        width: auto;
        text-align: left;
        margin-bottom: .15rem;
    }
    .lds-search > .lds-field { margin-bottom: .5rem !important; }
}

/* sidebar toggle: one class, opposite default per breakpoint —
   narrow screens start hidden (button reveals as overlay), wide
   screens start shown (button collapses for more content room). */
@media (max-width: 767.98px) {
    #lds-sidebar { display: none; }
    #lds-sidebar.lds-menu-open {
        display: block;
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        z-index: 1030;
        background: var(--bs-body-bg);
        overflow-y: auto;
    }
}
@media (min-width: 768px) {
    #lds-sidebar.lds-menu-open { display: none; }
}

/* every Still Water transition/animation is a cue, not decoration — honour
   the OS setting and drop all of it. The busy bar stays visible, just still. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    #lds-lock::after {
        background: var(--lds-accent);
        background-size: 100% 100%;
    }
}

/* =====================================================================
   Still Water Phase D — print. Ctrl+P on any live page (the callPopup
   document view already ships chrome-free from index.php). Strip the
   runtime chrome, go black-on-white, show every row. printPdf is a
   separate mPDF pipeline and not styled here.
   ===================================================================== */
@media print {
    .lds-topbar,
    #lds-sidebar,
    .lds-search,
    #lds-toasts,
    #lds-lock,
    .btn,
    .lds-list .d-flex.justify-content-between,   /* quick-filter + toolbar bar */
    .alert-warning {                             /* "showing first 500" — export/print is never row-limited */
        display: none !important;
    }
    /* the trailing action-button column in a list */
    .lds-list table > thead > tr > :last-child,
    .lds-list table > tbody > tr > :last-child {
        display: none;
    }

    body {
        display: block !important;
        background: #fff;
        color: #000;
        font-size: 11pt;
    }
    .lds-shell, #content, .flex-grow-1, .container {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: none !important;
    }

    .table-responsive { overflow: visible !important; }
    .table {
        --bs-table-bg: #fff;
        --bs-table-striped-bg: #fff;
        --bs-table-hover-bg: #fff;
    }
    .table > :not(caption) > * > * { border-color: #999; }
    thead { display: table-header-group; }       /* repeat the header on each page */
    tr, .card, .lds-dash-widget { page-break-inside: avoid; }
    .card { border: 1px solid #999; box-shadow: none; }

    /* form spine stays legible, minus the input chrome */
    .form-control, .form-select, .form-control-plaintext {
        border: 0 !important;
        padding: 0 !important;
        background: none !important;
    }
    a { color: #000; text-decoration: none; }
    @page { margin: 14mm; }
}