/* Store Operations Manager — authenticated-app theme layer.

   This is the app-wide re-skin (PR18). It takes the Bootstrap 5 admin/
   teller/manager UI and dresses it in the Store Operations Manager brand established
   by the marketing landing page — WITHOUT touching layout structure,
   routes, form fields, or the classes the e2e suite asserts on.

   How it works:
     • brand.css (loaded FIRST in the layouts) supplies the design tokens
       (--ink, --paper, --copper, --vault, --serif/--sans/--mono, .btn …).
     • This file re-maps Bootstrap's own CSS custom properties (--bs-*) to
       those tokens so every component Bootstrap renders — buttons, links,
       cards, tables, forms, badges, dropdowns — inherits the brand with
       almost no per-component overrides.
     • A thin layer of targeted rules finishes the pieces Bootstrap's
       variables don't reach (serif headings, monospace figures, sidebar,
       auth frame, receipt slips).

   Copper is the ONE bold accent (primary actions, links, active nav,
   focus). Semantic colour (success/warning/danger) stays SEPARATE from
   the accent and is reserved for status — over/short, deposit state, etc.

   Loaded AFTER Bootstrap and brand.css; @import pulls tokens even when a
   page links this file alone. */

@import url("/static/css/brand.css");

/* ─────────────────────────────────────────────────────────────────────
   1. Re-map Bootstrap's global tokens to the brand palette.
   Bootstrap 5.3 drives almost everything from these :root variables, so
   overriding them here rebrands components we never name explicitly.
   ───────────────────────────────────────────────────────────────────── */
:root {
    /* Primary → copper. RGB triplet kept in step for the *-rgb() uses
       (alpha backgrounds, subtle bg, focus shadow). */
    --bs-primary: var(--copper);
    --bs-primary-rgb: 193, 121, 62;
    --bs-primary-text-emphasis: var(--copper-deep);
    --bs-primary-bg-subtle: #f0e3d5;
    --bs-primary-border-subtle: #e0c3a4;

    /* Secondary → vault green (calm, used for muted/neutral chrome). */
    --bs-secondary: var(--vault);
    --bs-secondary-rgb: 35, 86, 74;

    /* Body + surfaces on warm paper / ink text. */
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--text);
    --bs-body-color-rgb: 22, 33, 29;
    --bs-body-font-family: var(--sans);
    --bs-emphasis-color: var(--ink);

    --bs-secondary-color: var(--muted);
    --bs-tertiary-color: var(--muted);
    --bs-secondary-bg: var(--paper-2);
    --bs-tertiary-bg: var(--paper-2);

    --bs-border-color: var(--line);
    --bs-border-color-translucent: var(--line);

    /* Links → copper, no underline until hover. */
    --bs-link-color: var(--copper-deep);
    --bs-link-color-rgb: 138, 83, 38;
    --bs-link-hover-color: var(--copper);
    --bs-link-hover-color-rgb: 193, 121, 62;

    /* Code inline → copper-deep on paper. */
    --bs-code-color: var(--copper-deep);

    /* Semantic tokens — reused across chips/alerts. Kept close to the
       brand's own --ok green and a warm amber warning so status colour
       harmonises with copper without competing with it. */
    --bs-success: #4C8A64;
    --bs-success-rgb: 76, 138, 100;
    --bs-success-text-emphasis: #2f6b47;
    --bs-warning: #C79A3A;
    --bs-warning-rgb: 199, 154, 58;
    --bs-warning-text-emphasis: #8a6a15;
    --bs-danger: #b4462f;
    --bs-danger-rgb: 180, 70, 47;
    --bs-danger-text-emphasis: #8a3020;

    /* Component-level defaults. */
    --bs-border-radius: 6px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 8px;

    /* Focus ring → copper. */
    --bs-focus-ring-color: rgba(193, 121, 62, .35);

    /* App-shell locals. */
    --pm-sidebar-w: 244px;
    --pm-ink-grad:
        radial-gradient(120% 90% at 12% -10%, rgba(193, 121, 62, .16), transparent 55%),
        radial-gradient(90% 80% at 110% 110%, rgba(35, 86, 74, .30), transparent 60%);
}

/* ─────────────────────────────────────────────────────────────────────
   2. Base surface + typography.
   ───────────────────────────────────────────────────────────────────── */
body {
    background-color: var(--paper);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[x-cloak] { display: none !important; }

/* Serif for page/section headings — the brand voice. Bootstrap utility
   sizes (h1..h6, .h3 …) keep working; we only swap the family/weight so
   nothing about the layout shifts. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .modal-title, .display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
}

/* Small "eyebrow" heading utility — mono uppercase kicker (available to
   templates that opt in; also used by the shell). brand.css defines
   .eyebrow; here we just make sure it sits well above a page title. */
.page-eyebrow {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--copper-deep);
    font-weight: 600;
    display: block;
    margin-bottom: .35rem;
}

/* text-teal is used across the domain templates for section-heading icons
   but was never defined. Map it to the brand vault green so those icons
   read as an intentional accent rather than default black. */
.text-teal { color: var(--vault) !important; }

/* Money / figures / codes / IDs render in the monospace stack with
   tabular figures so columns of numbers line up. These are opt-in
   utilities the templates apply; Bootstrap's own <code> and <pre> also
   pick up the brand mono. */
.mono, .tnum,
code, kbd, pre, samp {
    font-family: var(--mono);
}
.tnum, .mono { font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────────────
   3. Buttons.  Bootstrap builds each variant from --bs-btn-*; we only
   need to nudge the primary (copper) and outline-primary. Everything
   else (success/warning/danger/secondary) inherits the remapped
   semantic tokens above.
   ───────────────────────────────────────────────────────────────────── */
.btn {
    --bs-btn-font-family: var(--sans);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 4px;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(193, 121, 62, .3);
}
.btn-primary {
    --bs-btn-bg: var(--copper);
    --bs-btn-border-color: var(--copper);
    --bs-btn-color: #faf6ee;
    --bs-btn-hover-bg: var(--copper-bright);
    --bs-btn-hover-border-color: var(--copper-bright);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--copper-deep);
    --bs-btn-active-border-color: var(--copper-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--copper);
    --bs-btn-disabled-border-color: var(--copper);
    --bs-btn-disabled-color: #faf6ee;
}
.btn-outline-primary {
    --bs-btn-color: var(--copper-deep);
    --bs-btn-border-color: var(--copper);
    --bs-btn-hover-bg: var(--copper);
    --bs-btn-hover-border-color: var(--copper);
    --bs-btn-hover-color: #faf6ee;
    --bs-btn-active-bg: var(--copper-deep);
    --bs-btn-active-border-color: var(--copper-deep);
    --bs-btn-focus-shadow-rgb: 193, 121, 62;
}
/* Secondary outline is the app's workhorse "ghost"/neutral button. Make
   it calm ink-on-paper with a hairline, not Bootstrap's grey. */
.btn-outline-secondary {
    --bs-btn-color: var(--text);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-hover-color: var(--on-ink);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-active-color: var(--on-ink);
    --bs-btn-focus-shadow-rgb: 35, 86, 74;
}
.btn-light {
    --bs-btn-bg: var(--paper-2);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: #e5dfd0;
    --bs-btn-hover-border-color: var(--line);
    --bs-btn-color: var(--text);
    --bs-btn-hover-color: var(--text);
}
.btn-link {
    --bs-btn-color: var(--copper-deep);
    --bs-btn-hover-color: var(--copper);
    --bs-btn-font-weight: 600;
    text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────
   4. Links.
   ───────────────────────────────────────────────────────────────────── */
a { text-decoration: none; }
a:hover { text-decoration: none; }
.card a:not(.btn):hover,
.dropdown-item:hover { color: var(--copper); }

/* ─────────────────────────────────────────────────────────────────────
   5. Cards — soft paper panels with a hairline and a serene shadow.
   ───────────────────────────────────────────────────────────────────── */
.card {
    --bs-card-bg: #fff;
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: 8px;
    --bs-card-cap-bg: var(--paper);
    --bs-card-color: var(--text);
    box-shadow: 0 1px 2px rgba(14, 26, 23, .04);
}
.card-header {
    font-family: var(--sans);
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .01em;
    color: var(--ink);
    border-bottom-color: var(--line);
}
/* Utility already used in the register/vault cards. */
.shadow-sm { box-shadow: 0 2px 10px -6px rgba(14, 26, 23, .22) !important; }

/* Report / store cards are clickable — copper hairline lift on hover. */
.report-card, .store-card { transition: box-shadow .15s ease, border-color .15s ease; }
.report-card:hover, .store-card:hover {
    box-shadow: 0 10px 24px -14px rgba(14, 26, 23, .35);
    border-color: var(--copper);
}

/* ─────────────────────────────────────────────────────────────────────
   6. Tables — brand header row, hairline rules, monospace/right-aligned
   figures. We DON'T change Bootstrap's structural classes (the e2e suite
   reads `table thead th`, `tbody tr`, `tfoot`); we only re-skin.
   ───────────────────────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--line);
    --bs-table-hover-bg: rgba(35, 86, 74, .045);
    --bs-table-striped-bg: rgba(22, 33, 29, .025);
    margin-bottom: 0;
}
.table > thead th {
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table > tbody td { border-bottom-color: var(--line); vertical-align: middle; }
/* Right-aligned numeric cells + any explicit money cell → tabular mono.
   The templates already tag money columns with .text-end; align the
   figures and give them tabular numerals so they stack cleanly. */
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }
.table tfoot td, .table .table-group-divider + tbody tr:first-child td,
.table tfoot { font-weight: 700; border-top: 2px solid var(--line); }
.table tfoot td { color: var(--ink); font-variant-numeric: tabular-nums; }
/* Report detail rows / bg-light zebra in a warmer tone. */
.bg-light { background-color: var(--paper-2) !important; }
.table code, td code, th code {
    font-family: var(--mono);
    color: var(--copper-deep);
    background: rgba(193, 121, 62, .08);
    padding: .1em .4em;
    border-radius: 3px;
    font-size: .86em;
}

/* Semantic figure colouring the templates use for over/short. Keep the
   meaning; align the greens/reds with the brand semantics. */
.text-success { color: #2f6b47 !important; }
.text-danger { color: #a53a24 !important; }

/* ─────────────────────────────────────────────────────────────────────
   7. Forms — branded controls, copper focus ring, calm labels.
   ───────────────────────────────────────────────────────────────────── */
.form-control, .form-select {
    --bs-body-bg: #fff;
    background-color: #fff;
    border-color: var(--line);
    color: var(--text);
    border-radius: 5px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--copper);
    box-shadow: 0 0 0 .2rem rgba(193, 121, 62, .22);
}
.form-control::placeholder { color: #a39d8f; }
.form-label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--ink);
    margin-bottom: .35rem;
}
.form-text, .form-check-label .text-muted { color: var(--muted); }
.input-group-text {
    background: var(--paper-2);
    border-color: var(--line);
    color: var(--muted);
}
.form-check-input:checked {
    background-color: var(--copper);
    border-color: var(--copper);
}
.form-check-input:focus {
    border-color: var(--copper);
    box-shadow: 0 0 0 .2rem rgba(193, 121, 62, .22);
}
/* Numeric inputs (denomination counts, amounts) → tabular mono so a
   long column of quantities aligns. */
input[type="number"], input[inputmode="decimal"] {
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   8. Badges as semantic chips. Bootstrap's `text-bg-*` set the colour;
   we round them into pills and calm the palette so status reads clearly
   and stays distinct from the copper accent.
   ───────────────────────────────────────────────────────────────────── */
.badge {
    font-family: var(--mono);
    font-weight: 600;
    letter-spacing: .03em;
    font-size: .7rem;
    padding: .34em .6em;
    border-radius: 20px;
    text-transform: none;
}
.badge.text-bg-success { background-color: rgba(76, 138, 100, .16) !important; color: #2f6b47 !important; }
.badge.text-bg-warning { background-color: rgba(199, 154, 58, .18) !important; color: #8a6a15 !important; }
.badge.text-bg-danger  { background-color: rgba(180, 70, 47, .15) !important; color: #a53a24 !important; }
.badge.text-bg-info    { background-color: rgba(35, 86, 74, .12) !important; color: var(--vault) !important; }
.badge.text-bg-secondary { background-color: rgba(22, 33, 29, .08) !important; color: var(--muted) !important; }
.badge.text-bg-light   { background-color: var(--paper-2) !important; color: var(--muted) !important; border: 1px solid var(--line); }

/* ─────────────────────────────────────────────────────────────────────
   9. Alerts — kept as Bootstrap `.alert-*` (the e2e suite asserts on
   `.alert-danger` / `.alert-warning`); re-skinned to warm, low-chroma
   panels with a copper-family accent border.
   ───────────────────────────────────────────────────────────────────── */
.alert { border-radius: 6px; border-width: 1px; }
.alert-success { --bs-alert-bg: rgba(76, 138, 100, .1); --bs-alert-border-color: rgba(76, 138, 100, .3); --bs-alert-color: #2f6b47; }
.alert-warning { --bs-alert-bg: rgba(199, 154, 58, .12); --bs-alert-border-color: rgba(199, 154, 58, .35); --bs-alert-color: #7a5c12; }
.alert-danger  { --bs-alert-bg: rgba(180, 70, 47, .1); --bs-alert-border-color: rgba(180, 70, 47, .3); --bs-alert-color: #8a3020; }
.alert-info    { --bs-alert-bg: rgba(35, 86, 74, .08); --bs-alert-border-color: rgba(35, 86, 74, .25); --bs-alert-color: var(--vault); }

/* ─────────────────────────────────────────────────────────────────────
   10. Dropdowns / list groups.
   ───────────────────────────────────────────────────────────────────── */
.dropdown-menu {
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-border-radius: 8px;
    --bs-dropdown-link-active-bg: var(--copper);
    --bs-dropdown-link-active-color: #fff;
    box-shadow: 0 12px 30px -12px rgba(14, 26, 23, .3);
}
.dropdown-header { color: var(--muted); font-family: var(--sans); }
.list-group {
    --bs-list-group-border-color: var(--line);
    --bs-list-group-active-bg: var(--copper);
    --bs-list-group-active-border-color: var(--copper);
    --bs-list-group-action-hover-bg: var(--paper-2);
}

/* ─────────────────────────────────────────────────────────────────────
   11. App shell — sidebar, top nav, brand marks.
   The base layout renders <aside class="sidebar"> + <nav class="topnav">;
   the sidebar partial keeps its .sidebar-brand / .sidebar-nav structure.
   We ground the sidebar in ink with copper active state.
   ───────────────────────────────────────────────────────────────────── */
.sidebar {
    width: var(--pm-sidebar-w);
    min-height: 100vh;
    background: var(--ink);
    background-image: var(--pm-ink-grad);
    color: var(--on-ink-muted);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform .2s ease;
    border-right: 1px solid rgba(0, 0, 0, .3);
}
.sidebar.open { transform: translateX(0); }
/* Flex-item min-width:auto lets a wide child (e.g. a many-column report
   table) push .main-content — and thus the whole page — wider than the
   viewport. min-width:0 must apply at ALL widths so .table-responsive can
   scroll internally instead of overflowing the window; scoping it to the
   desktop breakpoint left tablet/phone widths with a horizontally
   mis-sized main area. */
.main-content { min-width: 0; }
@media (min-width: 992px) {
    .sidebar { position: sticky; transform: none; }
}

.sidebar-brand {
    border-bottom: 1px solid var(--line-ink);
    gap: .55rem !important;
}
.sidebar-brand .brand-mark { width: 28px; height: 28px; flex: none; }
.sidebar-brand .brand-text {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.12rem;
    letter-spacing: -.01em;
    color: var(--on-ink);
}
/* Legacy square "V" icon (kept as a fallback if brand mark absent). */
.sidebar-brand .brand-icon {
    width: 30px; height: 30px;
    background: radial-gradient(circle at 35% 30%, var(--copper-bright), var(--copper-deep));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #2a1608;
}

.sidebar-nav .nav-link {
    color: var(--on-ink-muted);
    border-radius: 6px;
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .92rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.sidebar-nav .nav-link i { width: 1.1rem; text-align: center; opacity: .85; }
.sidebar-nav .nav-link:hover { color: var(--on-ink); background: rgba(241, 238, 230, .07); }
.sidebar-nav .nav-link:focus-visible {
    outline: 2px solid var(--copper-bright);
    outline-offset: -2px;
}
.sidebar-nav .nav-link.active {
    color: #fff;
    background: var(--copper);
    box-shadow: 0 6px 16px -8px rgba(193, 121, 62, .8);
}
.sidebar-nav .nav-link.active i { opacity: 1; }
.sidebar-nav .nav-link.disabled { color: rgba(241, 238, 230, .32); cursor: default; }
.sidebar-heading {
    font-family: var(--mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(241, 238, 230, .4);
    font-weight: 600;
}
.sidebar-footer {
    border-top: 1px solid var(--line-ink);
    color: rgba(241, 238, 230, .5) !important;
    font-family: var(--mono);
    font-size: .74rem;
}
.sidebar-footer .text-muted { color: rgba(241, 238, 230, .5) !important; }
.sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(14, 26, 23, .5);
    z-index: 1035;
}

/* Top nav bar — paper with a hairline; matches the landing nav's calm. */
.topnav {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(247, 245, 239, .9) !important;
    backdrop-filter: saturate(1.3) blur(8px);
    border-bottom: 1px solid var(--line) !important;
}
.topnav .btn-link { color: var(--ink) !important; }
.topnav .dropdown-toggle { font-weight: 600; }

/* Avatar chip → copper coin. */
.avatar-badge {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--copper-bright), var(--copper-deep));
    color: #2a1608;
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Assume-company banner uses .alert-warning already — themed above. */

/* Dashboard stat tiles. */
.stat-icon {
    width: 48px; height: 48px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.stat-icon.bg-primary-subtle { background: rgba(193, 121, 62, .14) !important; }
.stat-icon.text-primary { color: var(--copper-deep) !important; }
.stat-icon.bg-success-subtle { background: rgba(35, 86, 74, .12) !important; }
.stat-icon.text-success { color: var(--vault) !important; }
/* Big dashboard figures → tabular. */
.fs-3.fw-bold, .display-6, .display-5 { font-variant-numeric: tabular-nums; }

/* HTMX progress bar → copper. */
#global-loader .progress-bar { background: linear-gradient(90deg, var(--copper-deep), var(--copper-bright)) !important; }

/* ─────────────────────────────────────────────────────────────────────
   12. Teller shell — top bar in ink with the coin mark, big touch targets.
   ───────────────────────────────────────────────────────────────────── */
.teller-topbar {
    background: var(--ink) !important;
    background-image: var(--pm-ink-grad);
    color: var(--on-ink) !important;
    border-bottom: 1px solid var(--line-ink);
}
.teller-topbar .brand-mark { width: 26px; height: 26px; flex: none; }
.teller-topbar .logo {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    color: var(--on-ink);
}
.teller-topbar .btn-outline-light {
    --bs-btn-color: var(--on-ink);
    --bs-btn-border-color: var(--line-ink);
    --bs-btn-hover-bg: rgba(241, 238, 230, .12);
    --bs-btn-hover-border-color: var(--on-ink);
    --bs-btn-hover-color: #fff;
}
.teller-actionbtn {
    min-height: 56px;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────
   13. Auth frame — paper card on an ink/vault backdrop with the coin mark.
   The auth layout keeps its inline <style> for the container; here we
   re-skin the ground + card + brand block to the Store Operations Manager look and
   supersede the old teal gradient.
   ───────────────────────────────────────────────────────────────────── */
body.pm-auth {
    background: var(--ink) !important;
    background-image:
        radial-gradient(120% 90% at 85% -10%, rgba(193, 121, 62, .22), transparent 55%),
        radial-gradient(90% 80% at -10% 110%, rgba(35, 86, 74, .34), transparent 60%) !important;
}
.pm-auth .auth-card {
    background: var(--paper) !important;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px !important;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6) !important;
}
.pm-auth .auth-logo { gap: .55rem; }
.pm-auth .auth-logo .brand-mark { width: 40px; height: 40px; flex: none; }
.pm-auth .auth-logo-text {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--on-ink);
    letter-spacing: -.01em;
}
.pm-auth .auth-logo-text span { color: var(--copper-bright); }
/* Old gradient square icon → copper coin, in case a page keeps it. */
.pm-auth .auth-logo-icon {
    background: radial-gradient(circle at 35% 30%, var(--copper-bright), var(--copper-deep)) !important;
    border-radius: 50% !important;
    color: #2a1608 !important;
}
.pm-auth .text-white-50 { color: var(--on-ink-muted) !important; }
.pm-auth .auth-card h4 { font-family: var(--serif); color: var(--ink); }

/* ─────────────────────────────────────────────────────────────────────
   14. Receipts / slips / count grids — the monospace "paper slip" look
   from the landing hero, applied to the register receipt, X/Z output,
   and deposit slip.
   ───────────────────────────────────────────────────────────────────── */
.receipt-text {
    font-family: var(--mono);
    font-size: .9rem;
    line-height: 1.4;
    white-space: pre;
    background: var(--paper);
    color: var(--ink);
    border: 1px dashed var(--line);
    border-radius: 4px;
    padding: 1rem 1.15rem;
    display: block;
    overflow-x: auto;
}

/* Denomination count grid: compact mono qty inputs, aligned. */
.count-grid .card-header { text-transform: none; }
.count-grid input[type="number"] { font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────────────
   15. Accessibility — visible keyboard focus everywhere; reduced motion.
   ───────────────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--copper);
    outline-offset: 2px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible,
.list-group-item:focus-visible {
    outline: 2px solid var(--copper);
    outline-offset: 2px;
}
/* Bootstrap components manage their own :focus box-shadow; don't let the
   generic outline double up where the ring already reads. */
.btn:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   16. SweetAlert2 — the confirm/toast layer. ui.js sets confirmButtonColor
   at runtime (copper); these rules polish the popup chrome to match the
   brand (serif title, paper surface, rounded).
   ───────────────────────────────────────────────────────────────────── */
.swal2-popup {
    font-family: var(--sans);
    border-radius: 10px;
    background: var(--paper);
    color: var(--text);
}
.swal2-title { font-family: var(--serif); color: var(--ink); }
/* Default confirm colour → copper for bare Swal.fire() calls that don't
   pass confirmButtonColor. No !important, so calls that DO set an inline
   background (ui.js destructive red / any explicit confirmColor) win. */
.swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--copper);
    color: #faf6ee;
    border-radius: 4px !important;
    font-weight: 600;
}
.swal2-styled.swal2-cancel { color: #fff; }
.swal2-styled.swal2-cancel { border-radius: 4px !important; font-weight: 600; }
.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(193, 121, 62, .4) !important; }
.swal2-toast { border-radius: 8px; }