/* DigitalOceans v2 design system
   Same marine palette as v1 (navy / teal / blue + gold), rebuilt as a calm,
   phone-first wallet-app system. Loaded after Bootstrap 5.3 and Bootstrap Icons.
   Sections: 1 tokens · 2 base · 3 buttons · 4 forms · 5 surfaces · 6 status ·
   7 tables · 8 navigation shells · 9 page patterns · 10 admin shell · 11 utilities */

/* ───────────────────────── 1. Tokens ───────────────────────── */
:root {
    /* brand (pinned, unchanged from v1) */
    --navy: #0F3057;
    --navy-700: #0C2848;
    --navy-800: #091F38;
    --deep: #0B2543;
    --panel: #EAF5FB;
    --aqua: #22C1D6;
    --aqua-soft: #5FD3E0;
    --indigo: #3F51B5;
    --violet: #6A5ACD;
    --mint: #14B8A6;
    --ocean: linear-gradient(135deg, #0B2543 0%, #00587A 58%, #008891 100%);
    --ocean-flat: linear-gradient(100deg, #0B2543 0%, #0F3057 50%, #00587A 100%);
    --blue: #00587A;
    --teal: #008891;
    --teal-ink: #006B73;
    --sky: #00A8CC;
    --gold: #FCD116;
    --gold-600: #E6BB00;
    --red: #CE1126;
    --red-ink: #A30D1E;

    /* neutrals tinted toward the navy */
    --ink: #14263B;
    --ink-2: #3B4F66;
    --muted: #5B6F84;
    --line: #C5DEEC;
    --line-strong: #C9D5E1;
    --ground: #DDEFF8;
    --surface: #FFFFFF;
    --tint: #CFE7F4;

    /* semantic chips (tint + readable ink) */
    --ok-bg: #E0F3F4;      --ok-ink: #006B73;
    --warn-bg: #FFF6CC;    --warn-ink: #735800;
    --bad-bg: #FCE7EA;     --bad-ink: #A30D1E;
    --info-bg: #E0F4FA;    --info-ink: #00587A;
    --neutral-bg: #EAEFF4; --neutral-ink: #3B4F66;
    --refund-bg: #E8E4F5;  --refund-ink: #4A3B8C;

    /* legacy aliases so existing templates keep working */
    --primary: var(--navy);
    --secondary: var(--blue);
    --accent: var(--teal);
    --light-blue: var(--sky);
    --ghana-green: var(--navy);
    --ghana-red: var(--red);
    --ghana-gold: var(--gold);
    --ghana-black: #000;

    /* shape, depth, motion */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --shadow-1: 0 1px 2px rgba(15, 48, 87, .06), 0 2px 8px rgba(15, 48, 87, .05);
    --shadow-2: 0 2px 4px rgba(15, 48, 87, .06), 0 12px 28px rgba(15, 48, 87, .12);
    --ease: cubic-bezier(.22, 1, .36, 1);
    --focus: 0 0 0 3px rgba(0, 168, 204, .35);

    /* layout */
    --nav-h: 56px;
    --tabbar-h: 70px; /* the tab bar's exact height (plus the home-indicator inset); pages and floats reserve this much */
    --sidebar-w: 248px;
    --safe-b: env(safe-area-inset-bottom, 0px);

    /* map onto Bootstrap 5.3 so utilities (.text-primary, .bg-success, ...) follow the brand */
    --bs-body-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 20, 38, 59;
    --bs-body-bg: var(--ground);
    --bs-body-bg-rgb: 221, 239, 248;
    --bs-secondary-color: var(--muted);
    --bs-secondary-color-rgb: 91, 111, 132;
    --bs-border-color: var(--line);
    --bs-border-radius: var(--r-md);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);
    --bs-link-color: var(--blue);
    --bs-link-color-rgb: 0, 88, 122;
    --bs-link-hover-color: var(--navy);
    --bs-link-hover-color-rgb: 15, 48, 87;
    --bs-primary: #0F3057;   --bs-primary-rgb: 15, 48, 87;
    --bs-secondary: #5B6F84; --bs-secondary-rgb: 91, 111, 132;
    --bs-success: #008891;   --bs-success-rgb: 0, 136, 145;
    --bs-info: #00A8CC;      --bs-info-rgb: 0, 168, 204;
    --bs-warning: #FCD116;   --bs-warning-rgb: 252, 209, 22;
    --bs-danger: #CE1126;    --bs-danger-rgb: 206, 17, 38;
    --bs-light: #F4F7FA;     --bs-light-rgb: 244, 247, 250;
    --bs-dark: #14263B;      --bs-dark-rgb: 20, 38, 59;
    --bs-success-text-emphasis: #006B73; --bs-success-bg-subtle: #E0F3F4; --bs-success-border-subtle: #B3E0E3;
    --bs-warning-text-emphasis: #735800; --bs-warning-bg-subtle: #FFF6CC; --bs-warning-border-subtle: #FBE88A;
    --bs-danger-text-emphasis: #A30D1E;  --bs-danger-bg-subtle: #FCE7EA;  --bs-danger-border-subtle: #F4B8C0;
    --bs-info-text-emphasis: #00587A;    --bs-info-bg-subtle: #E0F4FA;    --bs-info-border-subtle: #A9E2F0;
    --bs-primary-text-emphasis: #0F3057; --bs-primary-bg-subtle: #EAF1F7; --bs-primary-border-subtle: #C9D5E1;
}

:root {
    /* floating surfaces stay white even though the page behind is tinted */
    --bs-modal-bg: #fff; --bs-dropdown-bg: #fff; --bs-list-group-bg: #fff; --bs-accordion-bg: #fff;
    --bs-offcanvas-bg: #fff; --bs-toast-bg: #fff; --bs-popover-bg: #fff; --bs-card-bg: #fff;
}
/* ───────────────────────── 2. Base ───────────────────────── */
html, body { max-width: 100%; overflow-x: clip; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #C6E4F3 0, #DDEFF8 360px, #E6F3FA 100%) no-repeat, #E6F3FA;
    color: var(--ink);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* no overflow-x here: it would make <body> the scroll container and the sticky sidebar would scroll away */
}
.main-content { flex: 1; min-width: 0; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--navy);
    font-weight: 700;
    letter-spacing: -.01em;
    text-wrap: balance;
}
h1, .h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.15; }
h2, .h2 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height: 1.2; }
h3, .h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.25; }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .9rem; }
p { text-wrap: pretty; }
a { text-underline-offset: .2em; }
small, .small { font-size: .8125rem; }
.text-muted { color: var(--muted) !important; }
.lead { font-size: 1.125rem; color: var(--ink-2); }

/* money and counts never jitter or crowd */
.amount, .num, .table td, .table th, .badge, .chip, .balance, .stat-value,
input[type="number"], .form-control[inputmode="decimal"] {
    font-variant-numeric: tabular-nums;
}

:focus { outline: none; }
:focus-visible {
    outline: 3px solid rgba(0, 168, 204, .6);
    outline-offset: 2px;
    border-radius: 6px;
}
::selection { background: rgba(252, 209, 22, .55); color: var(--ink); }
input, textarea, select { caret-color: var(--teal); }
input[type="checkbox"], input[type="radio"], progress { accent-color: var(--navy); }
hr { border-color: var(--line); opacity: 1; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

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

@media (max-width: 575.98px) { .container { --bs-gutter-x: 1.5rem; } }

/* ───────────────────────── 3. Buttons ───────────────────────── */
.btn {
    --bs-btn-border-radius: var(--r-md);
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: .6rem;
    --bs-btn-font-weight: 600;
    --bs-btn-focus-box-shadow: var(--focus);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    line-height: 1.2;
    transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.btn:active:not(:disabled):not(.disabled) { transform: scale(.98); }
.btn-sm { --bs-btn-padding-x: .8rem; --bs-btn-padding-y: .35rem; --bs-btn-font-size: .85rem; min-height: 36px; --bs-btn-border-radius: var(--r-sm); }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .8rem; --bs-btn-font-size: 1.05rem; min-height: 52px; }
.btn.disabled, .btn:disabled { opacity: .55; }
.btn-close:focus { box-shadow: var(--focus); }

.btn-primary, .btn-ghana-green, .btn-primary-blue {
    --bs-btn-color: #fff; --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--navy); --bs-btn-hover-border-color: var(--navy);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--navy-700); --bs-btn-active-border-color: var(--navy-700);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--blue); --bs-btn-disabled-border-color: var(--blue);
    background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color);
}
.btn-ghana-green:hover, .btn-primary-blue:hover { background-color: var(--navy); border-color: var(--navy); color: #fff; }
.btn-outline-primary {
    --bs-btn-color: var(--navy); --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: var(--tint); --bs-btn-hover-border-color: var(--navy);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--navy); --bs-btn-active-border-color: var(--navy);
    --bs-btn-disabled-color: var(--navy); --bs-btn-disabled-border-color: var(--line-strong);
}
.btn-secondary {
    --bs-btn-color: var(--navy); --bs-btn-bg: var(--tint); --bs-btn-border-color: var(--tint);
    --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: #DCE8F2; --bs-btn-hover-border-color: #DCE8F2;
    --bs-btn-active-color: var(--navy); --bs-btn-active-bg: #CFDFEC; --bs-btn-active-border-color: #CFDFEC;
    --bs-btn-disabled-color: var(--navy); --bs-btn-disabled-bg: var(--tint); --bs-btn-disabled-border-color: var(--tint);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: var(--tint); --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-active-color: var(--navy); --bs-btn-active-bg: #DCE8F2; --bs-btn-active-border-color: var(--line-strong);
    --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-border-color: var(--line);
}
.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--teal-ink); --bs-btn-border-color: var(--teal-ink);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #00565C; --bs-btn-hover-border-color: #00565C;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #004A50; --bs-btn-active-border-color: #004A50;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--teal-ink); --bs-btn-disabled-border-color: var(--teal-ink);
}
.btn-outline-success {
    --bs-btn-color: var(--teal-ink); --bs-btn-border-color: #8CCDD1;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--teal-ink); --bs-btn-hover-border-color: var(--teal-ink);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #00565C; --bs-btn-active-border-color: #00565C;
    --bs-btn-disabled-color: var(--teal-ink); --bs-btn-disabled-border-color: #8CCDD1;
}
.btn-warning, .btn-ghana-gold {
    --bs-btn-color: var(--navy); --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold);
    --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: var(--gold-600); --bs-btn-hover-border-color: var(--gold-600);
    --bs-btn-active-color: var(--navy); --bs-btn-active-bg: #D1A900; --bs-btn-active-border-color: #D1A900;
    --bs-btn-disabled-color: var(--navy); --bs-btn-disabled-bg: var(--gold); --bs-btn-disabled-border-color: var(--gold);
    background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color); font-weight: 700;
}
.btn-ghana-gold:hover { background-color: var(--gold-600); border-color: var(--gold-600); color: var(--navy); }
.btn-outline-warning {
    --bs-btn-color: #735800; --bs-btn-border-color: #E6C63A;
    --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: var(--gold); --bs-btn-hover-border-color: var(--gold);
    --bs-btn-active-color: var(--navy); --bs-btn-active-bg: var(--gold-600); --bs-btn-active-border-color: var(--gold-600);
    --bs-btn-disabled-color: #735800; --bs-btn-disabled-border-color: #E6C63A;
}
.btn-danger, .btn-ghana-red {
    --bs-btn-color: #fff; --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--red-ink); --bs-btn-hover-border-color: var(--red-ink);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #8A0B19; --bs-btn-active-border-color: #8A0B19;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--red); --bs-btn-disabled-border-color: var(--red);
    background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color);
}
.btn-outline-danger {
    --bs-btn-color: var(--red-ink); --bs-btn-border-color: #F0A9B2;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--red); --bs-btn-hover-border-color: var(--red);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--red-ink); --bs-btn-active-border-color: var(--red-ink);
    --bs-btn-disabled-color: var(--red-ink); --bs-btn-disabled-border-color: #F0A9B2;
}
.btn-info {
    --bs-btn-color: var(--navy); --bs-btn-bg: var(--sky); --bs-btn-border-color: var(--sky);
    --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: #00BCE6; --bs-btn-hover-border-color: #00BCE6;
    --bs-btn-active-color: var(--navy); --bs-btn-active-bg: #0092B1; --bs-btn-active-border-color: #0092B1;
    --bs-btn-disabled-color: var(--navy); --bs-btn-disabled-bg: var(--sky); --bs-btn-disabled-border-color: var(--sky);
}
.btn-outline-info {
    --bs-btn-color: var(--blue); --bs-btn-border-color: #8FD3E4;
    --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: var(--sky); --bs-btn-hover-border-color: var(--sky);
    --bs-btn-active-color: var(--navy); --bs-btn-active-bg: #0092B1; --bs-btn-active-border-color: #0092B1;
    --bs-btn-disabled-color: var(--blue); --bs-btn-disabled-border-color: #8FD3E4;
}
.btn-light {
    --bs-btn-color: var(--navy); --bs-btn-bg: #fff; --bs-btn-border-color: var(--line);
    --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: var(--tint); --bs-btn-hover-border-color: var(--line-strong);
}
.btn-dark {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0E1B2B; --bs-btn-hover-border-color: #0E1B2B;
}
.btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .5); --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; }
.btn-link { --bs-btn-color: var(--blue); --bs-btn-hover-color: var(--navy); min-height: 0; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* ───────────────────────── 4. Forms ───────────────────────── */
.form-label { font-weight: 600; font-size: .875rem; color: var(--ink); margin-bottom: .35rem; }
.form-control, .form-select {
    min-height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background-color: #fff;
    color: var(--ink);
    font-size: 1rem; /* 16px stops iOS zooming into fields */
    padding: .6rem .85rem;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-control-sm, .form-select-sm { min-height: 36px; font-size: .9rem; padding: .3rem .65rem; border-radius: var(--r-sm); }
.form-control-lg, .form-select-lg { min-height: 54px; font-size: 1.1rem; }
.form-control::placeholder { color: #64768A; opacity: 1; }
.form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) { border-color: #A9BACB; }
.form-control:focus, .form-select:focus { border-color: var(--teal); box-shadow: var(--focus); background-color: #fff; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--panel); color: var(--muted); }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { border-color: var(--red); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(206, 17, 38, .2); }
.invalid-feedback, .errorlist { color: var(--red-ink); font-size: .85rem; }
.errorlist { list-style: none; padding: 0; margin: .25rem 0 0; }
.form-text { color: var(--muted); font-size: .8125rem; }
textarea.form-control { min-height: 96px; }
.input-group > .form-control, .input-group > .form-select { min-height: 46px; }
.input-group-text { background: var(--tint); border: 1px solid var(--line-strong); color: var(--ink-2); border-radius: var(--r-md); }
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.form-check-input { width: 1.2em; height: 1.2em; border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }
.form-check-input:focus { border-color: var(--teal); box-shadow: var(--focus); }
.form-switch .form-check-input:checked { background-color: var(--teal-ink); border-color: var(--teal-ink); }
.form-check-label { padding-top: .05em; }
.form-range::-webkit-slider-thumb { background: var(--navy); }
.form-range::-moz-range-thumb { background: var(--navy); }
input[type="file"].form-control { padding: .5rem .75rem; }
input, select, textarea { max-width: 100%; }
.form-control, .form-select { min-width: 0; }

/* ───────────────────────── 5. Surfaces ───────────────────────── */
.card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--r-lg);
    --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-bg: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    background: var(--surface);
}
.card.border-0 { border: 1px solid var(--line) !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 700; padding: .9rem 1.1rem; color: var(--navy); }
.card-header.bg-white, .card-header.bg-light { background: transparent !important; }
.card-footer { background: transparent; border-top: 1px solid var(--line); }
.card-body { padding: 1.1rem; }
@media (max-width: 575.98px) { .card-body { padding: 1rem; } }
.stat-card { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }

.alert {
    --bs-alert-border-radius: var(--r-md);
    border-radius: var(--r-md);
    border-width: 1px;
    padding: .8rem 1rem;
    font-size: .95rem;
}
.alert-dismissible { padding-right: 3rem; } /* .alert's padding shorthand above would otherwise let text run under the close button */
.alert-success { background: var(--ok-bg); color: var(--ok-ink); border-color: #B3E0E3; }
.alert-warning { background: var(--warn-bg); color: var(--warn-ink); border-color: #F3DF84; }
.alert-danger  { background: var(--bad-bg); color: var(--bad-ink); border-color: #F4B8C0; }
.alert-info    { background: var(--info-bg); color: var(--info-ink); border-color: #A9E2F0; }
.alert-primary { background: var(--tint); color: var(--navy); border-color: var(--line-strong); }
.floating-messages { position: fixed; top: calc(var(--nav-h) + 10px); left: 50%; transform: translateX(-50%); width: min(94vw, 640px); z-index: 1080; pointer-events: none; }
.floating-messages .alert { pointer-events: auto; box-shadow: var(--shadow-2); animation: toast-in .28s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.dropdown-menu {
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-border-radius: var(--r-md);
    --bs-dropdown-link-active-bg: var(--tint);
    --bs-dropdown-link-active-color: var(--navy);
    --bs-dropdown-link-hover-bg: var(--panel);
    box-shadow: var(--shadow-2);
    padding: .4rem;
}
.dropdown-item { border-radius: var(--r-sm); padding: .55rem .75rem; min-height: 40px; display: flex; align-items: center; gap: .55rem; }
.modal-content { border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.modal-header, .modal-footer { border-color: var(--line); }
.toast { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.list-group { --bs-list-group-border-color: var(--line); --bs-list-group-border-radius: var(--r-md); --bs-list-group-active-bg: var(--navy); --bs-list-group-active-border-color: var(--navy); }
.list-group-item-action { min-height: 44px; }
.progress { background: var(--tint); border-radius: 8px; }
.progress-bar { background: var(--teal); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--muted); font-size: .875rem; }
.accordion { --bs-accordion-border-color: var(--line); --bs-accordion-border-radius: var(--r-md); --bs-accordion-active-bg: var(--tint); --bs-accordion-active-color: var(--navy); --bs-accordion-btn-focus-box-shadow: var(--focus); }

/* ───────────────────────── 6. Status chips & badges ───────────────────────── */
.chip, .badge:not(.rounded-pill):not(.position-absolute) {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28em .65em;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
    white-space: nowrap;
    background: var(--neutral-bg);
    color: var(--neutral-ink);
    border: 0;
}
.chip-success, .badge.bg-success:not(.rounded-pill) { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
.chip-warning, .badge.bg-warning:not(.rounded-pill) { background: var(--warn-bg) !important; color: var(--warn-ink) !important; }
.chip-danger,  .badge.bg-danger:not(.rounded-pill)  { background: var(--bad-bg) !important; color: var(--bad-ink) !important; }
.chip-info,    .badge.bg-info:not(.rounded-pill)    { background: var(--info-bg) !important; color: var(--info-ink) !important; }
.chip-neutral, .badge.bg-secondary:not(.rounded-pill), .badge.bg-light:not(.rounded-pill) { background: var(--neutral-bg) !important; color: var(--neutral-ink) !important; }
.chip-primary, .badge.bg-primary:not(.rounded-pill) { background: var(--tint) !important; color: var(--navy) !important; }
.chip-refunded, .badge.bg-dark:not(.rounded-pill) { background: var(--refund-bg) !important; color: var(--refund-ink) !important; }
/* status is never colour alone: each state carries a glyph (skipped when the markup already has an icon) */
.chip:not(:has(.bi))::before, .badge:not(.rounded-pill):not(.position-absolute):not(:has(.bi))::before {
    font-family: bootstrap-icons; font-weight: 400; font-size: .9em; line-height: 1; content: "\f430"; /* info */
}
.chip-success:not(:has(.bi))::before, .badge.bg-success:not(.rounded-pill):not(:has(.bi))::before { content: "\f26a"; }
.chip-warning:not(:has(.bi))::before, .badge.bg-warning:not(.rounded-pill):not(:has(.bi))::before { content: "\f41f"; }
.chip-danger:not(:has(.bi))::before, .badge.bg-danger:not(.rounded-pill):not(:has(.bi))::before { content: "\f622"; }
.chip-info:not(:has(.bi))::before, .badge.bg-info:not(.rounded-pill):not(:has(.bi))::before { content: "\f130"; }
.chip-refunded:not(:has(.bi))::before, .badge.bg-dark:not(.rounded-pill):not(:has(.bi))::before { content: "\f117"; }
.chip-neutral:not(:has(.bi))::before, .badge.bg-secondary:not(.rounded-pill):not(:has(.bi))::before, .badge.bg-light:not(.rounded-pill):not(:has(.bi))::before { content: "\f2e5"; }
.badge.text-dark, .badge.text-white { color: inherit; }
.badge.rounded-pill { font-weight: 700; font-variant-numeric: tabular-nums; }
.status-pending { background: var(--warn-bg); color: var(--warn-ink); }
.status-completed { background: var(--ok-bg); color: var(--ok-ink); }
.status-failed { background: var(--bad-bg); color: var(--bad-ink); }

/* ───────────────────────── 7. Tables ───────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--line);
    --bs-table-hover-bg: #F1F6FA;
    --bs-table-striped-bg: #F8FAFC;
    --bs-table-active-bg: var(--tint);
    color: var(--ink);
    margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: .75rem .9rem; vertical-align: middle; }
.table > thead > tr > th, .table-light, .table-light > th, .table > :not(caption) > .table-light > * {
    background: var(--panel) !important;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}
.table-success > th, .table-dark > th { background: var(--navy) !important; color: #fff !important; }
.table-hover > tbody > tr:hover > * { cursor: default; }
.table-sm > :not(caption) > * > * { padding: .55rem .7rem; }
.table-responsive { -webkit-overflow-scrolling: touch; border-radius: inherit; position: relative; } /* positioned so visually-hidden cells are clipped, not page-wide */
.card > .table-responsive:last-child, .card > .table:last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
/* text-break lets a cell shrink to nothing under auto table layout; keep a readable floor */
.table td.text-break, .table th.text-break { min-width: 6.5rem; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* On phones, customer/agent tables become one card per row (labels added from the header by main.js). */
@media (max-width: 639.98px) {
    .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack > tbody > tr {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-1);
        padding: .35rem 1rem;
        margin-bottom: .75rem;
    }
    .table-stack > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .55rem 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--line) !important;
        text-align: right;
        min-height: 40px;
        background: transparent !important;
    }
    .table-stack > tbody > tr > td:last-child { border-bottom: 0 !important; }
    .table-stack > tbody > tr > td::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        color: var(--muted);
        font-size: .8rem;
        font-weight: 700;
        text-align: left;
    }
    .table-stack > tbody > tr > td[data-label=""]::before { display: none; }
    .table-stack > tbody > tr > td[colspan] { display: block; text-align: center; }
    .table-stack > tbody > tr > td[colspan]::before { display: none; }
    .table-stack.table-hover > tbody > tr:hover > * { background: transparent; }
    .table-responsive:has(> .table-stack) { overflow: visible; }

    /* wide tables (6+ columns, all admin lists): label above value, two per row, so a row stays short */
    .table-stack.table-stack-grid > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .9rem; row-gap: 0; padding: .6rem .9rem; }
    .table-stack.table-stack-grid > tbody > tr > td {
        display: block;
        text-align: left !important;
        padding: .3rem 0 !important;
        border: 0 !important;
        min-height: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .table-stack.table-stack-grid > tbody > tr > td::before { display: block; max-width: none; margin-bottom: 1px; font-size: .72rem; }
    .table-stack.table-stack-grid > tbody > tr > td[data-label=""] { grid-column: 1 / -1; }
    .table-stack.table-stack-grid > tbody > tr > td[data-label=""]:last-child { border-top: 1px solid var(--line) !important; margin-top: .3rem; padding-top: .55rem !important; }
    .table-stack.table-stack-grid > tbody > tr > td.text-nowrap { white-space: normal !important; }
    .table-stack.table-stack-grid .btn-group, .table-stack.table-stack-grid .row-actions, .table-stack.table-stack-grid td .d-flex { flex-wrap: wrap; }
    .table-stack td.text-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; }
    .table-stack td form { max-width: 100%; }
    .table-stack td.text-break, .table-stack td { min-width: 0 !important; }
    .table-stack td .badge, .table-stack td .chip { white-space: normal !important; text-align: left; max-width: 100%; }
    .table-stack:not(.table-stack-grid) > tbody > tr > td { flex-wrap: wrap; }
}

/* data-flat tables: one continuous list with hairlines instead of a card per row */
@media (max-width: 639.98px) {
    .table-stack[data-flat] > tbody > tr { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: 0; padding: .7rem 1rem; }
    .table-stack[data-flat] > tbody > tr:last-child { border-bottom: 0; }
}

/* a table that would scroll sideways is shown as cards instead (class added by ux.js) */

.table-stack.force thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table-stack.force, .table-stack.force tbody, .table-stack.force tr, .table-stack.force td { display: block; width: 100%; }
.table-stack.force > tbody > tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: .35rem 1rem;
    margin-bottom: .75rem;
}
.table-stack.force > tbody > tr > td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    text-align: right;
    min-height: 40px;
    background: transparent !important;
}
.table-stack.force > tbody > tr > td:last-child { border-bottom: 0 !important; }
.table-stack.force > tbody > tr > td::before {
    content: attr(data-label);
    flex: none;
    max-width: 45%;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
    text-align: left;
}
.table-stack.force > tbody > tr > td[data-label=""]::before { display: none; }
.table-stack.force > tbody > tr > td[colspan] { display: block; text-align: center; }
.table-stack.force > tbody > tr > td[colspan]::before { display: none; }
.table-stack.force.table-hover > tbody > tr:hover > * { background: transparent; }
.table-responsive:has(> .table-stack.force) { overflow: visible; }

/* wide tables (6+ columns, all admin lists): label above value, two per row, so a row stays short */
.table-stack.force.table-stack-grid > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .9rem; row-gap: 0; padding: .6rem .9rem; }
.table-stack.force.table-stack-grid > tbody > tr > td {
    display: block;
    text-align: left !important;
    padding: .3rem 0 !important;
    border: 0 !important;
    min-height: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
.table-stack.force.table-stack-grid > tbody > tr > td::before { display: block; max-width: none; margin-bottom: 1px; font-size: .72rem; }
.table-stack.force.table-stack-grid > tbody > tr > td[data-label=""] { grid-column: 1 / -1; }
.table-stack.force.table-stack-grid > tbody > tr > td[data-label=""]:last-child { border-top: 1px solid var(--line) !important; margin-top: .3rem; padding-top: .55rem !important; }
.table-stack.force.table-stack-grid > tbody > tr > td.text-nowrap { white-space: normal !important; }
.table-stack.force.table-stack-grid .btn-group, .table-stack.force.table-stack-grid .row-actions, .table-stack.force.table-stack-grid td .d-flex { flex-wrap: wrap; }
.table-stack.force td.text-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; }
.table-stack.force td form { max-width: 100%; }
.table-stack.force td.text-break, .table-stack.force td { min-width: 0 !important; }
.table-stack.force td .badge, .table-stack.force td .chip { white-space: normal !important; text-align: left; max-width: 100%; }
.table-stack.force:not(.table-stack-grid) > tbody > tr > td { flex-wrap: wrap; }

@media (min-width: 992px) {
    .table-stack.force.table-stack-grid > tbody > tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ───────────────────────── 8. Navigation shells ───────────────────────── */
/* top bar (public + signed-in) */
nav.navbar {
    --bs-navbar-padding-y: 0;
    background: var(--ocean-flat) !important;
    min-height: var(--nav-h);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 22px rgba(11, 37, 67, .22);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff !important;
    padding: .45rem 0;
}
.navbar-brand .brand-mark, .sidebar-brand .brand-mark, .admin-sidebar .brand .brand-mark { width: 34px; height: 34px; flex: none; display: block; border-radius: 50%; }
.navbar-brand .brand-mark, .admin-sidebar .brand .brand-mark { box-shadow: 0 0 0 2px rgba(255, 255, 255, .28); }
.brand-word b { color: var(--aqua-soft); font-weight: 800; }
.sidebar-brand .brand-word b, .auth-card .brand-word b { color: var(--teal-ink); }
.navbar .nav-link { color: rgba(255, 255, 255, .9) !important; font-weight: 600; padding: .6rem .85rem !important; border-radius: var(--r-sm); min-height: 44px; display: flex; align-items: center; gap: .4rem; }
.navbar .nav-link:hover, .navbar .nav-link.show { color: #fff !important; background: rgba(255, 255, 255, .14); }
.navbar .btn-ghana-gold { min-height: 40px; }
.navbar-toggler { border: 0; padding: .4rem .55rem; border-radius: var(--r-sm); }
.navbar-toggler:focus { box-shadow: var(--focus); }
.navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e"); }
.navbar .badge.position-absolute { font-size: .65rem; }
@media (max-width: 991.98px) {
    .navbar-collapse { background: #0F3057; margin: 0 -1.5rem; padding: .5rem 1.25rem 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
    .navbar-collapse .nav-link { min-height: 48px; }
    .navbar-collapse .btn-ghana-gold { width: 100%; margin: .5rem 0 0 !important; min-height: 48px; }
}
.navbar-app .navbar-nav-main { display: none; }
@media (min-width: 992px) { .navbar-app .navbar-nav-main { display: flex; } }

/* signed in: the top bar spans the whole screen so the brand lines up with the sidebar */
body[data-shell="app"] nav.navbar > .container { max-width: none; padding-left: 1rem; padding-right: 1rem; }

/* signed-in customer + agent shell */
.site-wrapper { display: flex; flex: 1; min-width: 0; }
.site-sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    padding: .75rem .65rem 1.5rem;
}
.site-sidebar .sidebar-brand { padding: .6rem .75rem .9rem; color: var(--navy); font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: .55rem; }
.site-sidebar .sidebar-brand .bi { color: var(--teal); }
.site-sidebar .nav-section { padding: .9rem .75rem .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.site-sidebar a.sidebar-link {
    color: var(--ink-2);
    padding: .55rem .75rem;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    border-radius: var(--r-md);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.site-sidebar a.sidebar-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; color: var(--muted); transition: color .15s; }
.site-sidebar a.sidebar-link:hover { background: var(--panel); color: var(--navy); }
.site-sidebar a.sidebar-link.active { background: var(--tint); color: var(--navy); font-weight: 700; }
.site-sidebar a.sidebar-link.active i { color: var(--navy); }
.site-sidebar .sub-links a.sidebar-link { padding-left: .75rem; }
.site-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: transparent; }
.site-topbar { display: none; }
.site-overlay { display: none; position: fixed; inset: 0; background: rgba(9, 31, 56, .5); z-index: 1040; }
.site-overlay.show { display: block; animation: fade-in .2s var(--ease); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* bottom tab bar (phones, signed-in) */
.tabbar { display: none; }
@media (max-width: 767.98px) {
    body[data-shell="app"] .site-main { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); }
    body[data-shell="app"] footer.footer { display: none; }
    .tabbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1035;
        background: var(--surface);
        border-top: 1px solid var(--line);
        height: calc(var(--tabbar-h) + var(--safe-b));
        padding: 6px 4px calc(6px + var(--safe-b));
        box-shadow: 0 -4px 18px rgba(15, 48, 87, .08);
    }
    .tabbar .tab {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 52px;
        padding: 4px 2px;
        border: 0;
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-size: .75rem;
        font-weight: 700;
        text-decoration: none;
        border-radius: var(--r-md);
        -webkit-tap-highlight-color: transparent;
    }
    .tabbar .tab i { font-size: 1.35rem; line-height: 1; display: block; padding: 3px 16px; border-radius: 999px; transition: background .2s var(--ease), color .2s var(--ease); }
    .tabbar .tab.active { color: var(--navy); }
    .tabbar .tab.active i { background: var(--gold); color: var(--navy); }
    .tabbar .tab:active i { transform: scale(.94); }
    .site-sidebar {
        display: none;
        position: fixed;
        top: 0; right: 0; left: auto;
        width: min(86vw, 320px);
        height: 100vh;
        z-index: 1050;
        box-shadow: var(--shadow-2);
        padding-bottom: 2rem;
    }
    .site-sidebar.show { display: flex; animation: drawer-in .28s var(--ease); }
    @keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
    .site-sidebar a.sidebar-link { min-height: 48px; font-size: 1rem; }
}

/* footer */
.footer { background: var(--ocean); color: rgba(255, 255, 255, .9); }
.footer a { color: rgba(255, 255, 255, .85); text-decoration: none; transition: color .15s; }
.footer a:hover { color: #fff !important; text-decoration: underline; }
.footer h5, .footer h6 { color: #fff; }
.footer .text-white-50 { color: rgba(255, 255, 255, .82) !important; }
.footer hr { border-color: rgba(255, 255, 255, .18); opacity: 1; }

/* ───────────────────────── 9. Page patterns ───────────────────────── */
.page { padding-top: .9rem; padding-bottom: 1.5rem; }
@media (max-width: 575.98px) {
    .page .mb-4 { margin-bottom: 1rem !important; }
    .page .mb-3 { margin-bottom: .75rem !important; }
    .page-head { margin-bottom: .85rem; }
    .page h2.h5 { margin-bottom: .6rem !important; }
}
@media (min-width: 768px) { .page { padding-top: 1.75rem; padding-bottom: 3rem; } }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.page-head h1, .page-head h2 { margin: 0; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.section-y { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 992px) { .section-y { padding-top: 4.5rem; padding-bottom: 4.5rem; } }
.bg-off-white { background: var(--panel); }
.section-heading { color: var(--navy); }
.section-label { display: none; } /* v1 eyebrow labels are retired; headings carry their own weight */

.wallet-card {
    background: var(--ocean);
    color: #fff;
    border: 0;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
    position: relative;
    overflow: hidden;
}
.wallet-card .balance { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.wallet-card .balance small { font-size: .5em; font-weight: 600; opacity: .8; margin-right: .3em; }
.wallet-card .label { font-size: .85rem; font-weight: 700; color: #fff; }

.service-card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
    background: var(--surface);
}
.service-card:hover { border-color: var(--teal); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.service-icon { font-size: 2.2rem; color: var(--teal); display: block; }

.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
@media (min-width: 576px) { .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; } }
@media (min-width: 992px) { .service-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.service-tile {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: .9rem .4rem .75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 700;
    min-height: 92px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease);
}
.service-tile:hover { border-color: var(--teal); box-shadow: var(--shadow-1); color: var(--navy); }
.service-tile:active { transform: scale(.97); }
.service-tile .ico { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; background: #DDF1FA; color: var(--blue); font-size: 1.25rem; transition: transform .25s var(--ease); }
.service-tile:hover .ico { transform: scale(1.08) rotate(-4deg); }
.service-tile:nth-child(6n+2) .ico { background: #DCF7F4; color: #0E7C70; }
.service-tile:nth-child(6n+3) .ico { background: #E4E8FB; color: var(--indigo); }
.service-tile:nth-child(6n+4) .ico { background: #E2F6FB; color: #00799A; }
.service-tile:nth-child(6n+5) .ico { background: #ECE8FA; color: #5143B8; }
.service-tile:nth-child(6n+6) .ico { background: #E7F0FA; color: var(--navy); }
.service-tile .ico img { width: 26px; height: 26px; object-fit: contain; }

.row-list { display: flex; flex-direction: column; gap: .5rem; }
.row-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .8rem .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: inherit; text-decoration: none;
}
a.row-item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.row-item .ico { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--tint); color: var(--navy); font-size: 1.1rem; }
.row-item .main { flex: 1; min-width: 0; }
.row-item .title { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } /* wraps rather than cutting a name, email or amount short */
.row-item .meta, .service-tile .meta { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.row-item .meta.text-truncate, .row-item .title.text-truncate, .service-tile .meta.text-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.row-item .end { flex: none; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }

.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-row .stat { padding: .95rem 1.05rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.stat-row .stat:nth-child(2n) { border-right: 0; }
@media (min-width: 768px) { .stat-row .stat:nth-child(2n) { border-right: 1px solid var(--line); } .stat-row .stat:nth-child(4n) { border-right: 0; } }
.stat-row .stat:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 768px) { .stat-row .stat:nth-last-child(-n+4) { border-bottom: 0; } }
.stat .stat-label { color: var(--muted); font-size: .78rem; font-weight: 700; }
.stat .stat-value { font-size: clamp(1.05rem, 4.8vw, 1.3rem); font-weight: 800; color: var(--navy); line-height: 1.2; white-space: nowrap; }
@media (min-width: 576px) { .stat .stat-value { font-size: 1.3rem; } }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty-state .bi { font-size: 2.2rem; color: var(--line-strong); display: block; margin-bottom: .5rem; }

.auth-wrap { min-height: calc(100vh - var(--nav-h) - 1px); display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem 2.5rem; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card .card-body { padding: 1.5rem; }
@media (min-width: 576px) { .auth-card .card-body { padding: 2rem; } }

.hero-subtitle { color: rgba(255, 255, 255, .82); }
.hero-subtitle-dim { color: rgba(255, 255, 255, .64); }
.hero-section { padding: 3rem 0; }
.landing-hero { background: var(--ocean); color: #fff; }
.hero-stat { border-right: 1px solid rgba(255, 255, 255, .15); }
@media (max-width: 767.98px) {
    .hero-stat { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .hero-stat:last-child { border-bottom: none; }
    .landing-hero { padding: 2.5rem 0 2rem !important; }
}

.nav-tabs { flex-wrap: wrap; border-bottom-color: var(--line); --bs-nav-tabs-link-active-color: var(--navy); --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--ground); --bs-nav-tabs-link-active-bg: var(--ground); --bs-nav-link-color: var(--muted); --bs-nav-link-hover-color: var(--navy); }
.nav-tabs .nav-link { min-height: 44px; font-weight: 700; display: flex; align-items: center; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--navy); --bs-nav-pills-link-active-color: #fff; --bs-nav-link-color: var(--ink-2); --bs-nav-link-hover-color: var(--navy); }
.nav-pills .nav-link { border-radius: 999px; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.pagination { --bs-pagination-color: var(--navy); --bs-pagination-hover-color: var(--navy); --bs-pagination-hover-bg: var(--tint); --bs-pagination-active-bg: var(--navy); --bs-pagination-active-border-color: var(--navy); --bs-pagination-border-color: var(--line); --bs-pagination-border-radius: var(--r-sm); --bs-pagination-focus-box-shadow: var(--focus); gap: 4px; flex-wrap: wrap; }
.pagination .page-link { min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: var(--r-sm) !important; }

.store-link-section { background: var(--ok-bg); border: 1px solid #B3E0E3; border-radius: var(--r-md); }
.icon-color-accent { color: var(--teal); } .icon-color-primary { color: var(--navy); } .icon-color-gold { color: #8A6D00; }
.icon-color-red { color: var(--red); } .icon-color-green { color: var(--teal-ink); } .icon-color-purple { color: var(--refund-ink); }
.icon-bg-accent { background: rgba(0, 136, 145, .12); } .icon-bg-primary { background: rgba(15, 48, 87, .08); }
.icon-bg-gold { background: rgba(252, 209, 22, .22); } .icon-bg-red { background: rgba(206, 17, 38, .1); }
.icon-bg-green { background: rgba(0, 136, 145, .12); } .icon-bg-purple { background: var(--refund-bg); }
.bg-primary-custom { background: var(--ocean); }
.dot-xs { font-size: .6rem; }

/* ───────────────────────── 10. Admin shell ───────────────────────── */
body[data-shell="admin"] { background: #E6F3FA; display: block; }
.admin-wrapper { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: linear-gradient(180deg, #0B2543 0%, #0F3057 60%, #0A3F63 100%);
    color: rgba(255, 255, 255, .8);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding-bottom: 1rem;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); }
.admin-sidebar .brand {
    display: flex; align-items: center; gap: .6rem;
    padding: .9rem 1.15rem;
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    position: sticky; top: 0; background: #0B2543; z-index: 2;
}
.admin-sidebar .nav-section { padding: 1rem 1.15rem .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .6); }
.admin-sidebar .nav-section-toggle {
    padding: .65rem 1.15rem;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
    font-size: .8rem; font-weight: 700; letter-spacing: .02em;
    color: rgba(255, 255, 255, .78);
    border: 0; background: none; width: 100%;
    margin-top: .1rem;
    min-height: 44px;
    transition: color .15s, background .15s;
}
.admin-sidebar .nav-section-toggle:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.admin-sidebar .section-chevron { transition: transform .2s var(--ease); font-size: .65rem; }
.admin-sidebar .nav-section-toggle.collapsed .section-chevron { transform: rotate(-90deg); }
.admin-sidebar a.nav-link {
    color: rgba(255, 255, 255, .86);
    padding: .5rem 1.15rem;
    margin: 1px .55rem;
    min-height: 40px;
    display: flex; align-items: center; gap: .65rem;
    border-radius: var(--r-md);
    font-size: .9rem; font-weight: 600;
    transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.admin-sidebar a.nav-link i { font-size: 1rem; width: 1.15rem; text-align: center; color: var(--aqua-soft); }
.admin-sidebar a.nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: translateX(2px); }
.admin-sidebar a.nav-link.active { background: #fff; color: var(--navy); font-weight: 700; }
.admin-sidebar a.nav-link.active i { color: var(--blue); }
.admin-sidebar .nav-link.text-danger { color: #FFB3BC !important; }
.admin-sidebar .admin-logout { margin-top: auto; padding: .75rem .55rem .25rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.admin-sidebar .logout-btn { color: #FFB3BC; margin: 0; }
.admin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.admin-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: .65rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: sticky; top: 0; z-index: 1020;
    min-height: 56px;
}
.admin-topbar .fw-semibold { color: var(--navy); font-size: 1.05rem; font-weight: 800 !important; letter-spacing: -.01em; }
.admin-content { padding: 1.5rem; flex: 1; min-width: 0; }
.admin-content .card { box-shadow: var(--shadow-1); }
.admin-content .table > :not(caption) > * > * { padding: .55rem .55rem; }
/* laptop widths: let cells wrap rather than scroll the table sideways */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .admin-content .table th, .admin-content .table td.text-nowrap, .admin-content .table td .text-nowrap { white-space: normal !important; }
    .admin-content .table td .btn-group, .admin-content .table td .d-flex { flex-wrap: wrap; }
    .admin-content .table .amount, .admin-content .table td.text-end { white-space: nowrap; }
}
.admin-overlay { display: none; position: fixed; inset: 0; background: rgba(9, 31, 56, .5); z-index: 1040; }
.admin-overlay.show { display: block; animation: fade-in .2s var(--ease); }
.admin-sidebar-toggle { display: none; min-height: 40px; border-color: var(--line-strong); }
@media (max-width: 991.98px) {
    .admin-sidebar { display: none; position: fixed; top: 0; left: 0; height: 100vh; z-index: 1050; box-shadow: var(--shadow-2); }
    .admin-sidebar.show { display: flex; animation: drawer-left .28s var(--ease); }
    @keyframes drawer-left { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
    .admin-sidebar-toggle { display: inline-flex; }
    .admin-content { padding: 1rem; }
    .admin-topbar { padding: .5rem .85rem; }
    .admin-topbar .text-muted.small { display: none; }
}
@media (max-width: 575.98px) { .admin-content { padding: .75rem; } }

/* admin filter bars and button rows wrap instead of overflowing on phones */
.admin-content form.d-flex { flex-wrap: wrap; }
.admin-content .btn-group { flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .admin-content .btn-group > .btn { flex: 1 1 auto; }
    .admin-content form.d-flex > * { max-width: 100%; }
    .admin-content form.d-flex .form-control, .admin-content form.d-flex .form-select { width: 100% !important; }
}

/* ───────────────────────── 10b. Seamless-buying components & motion ───────────────────────── */
/* password show / hide */
.pw-wrap { position: relative; }
.pw-wrap > .form-control { padding-right: 3rem; }
.pw-toggle { position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); width: 44px; height: 40px; border: 0; background: transparent; color: var(--muted); border-radius: var(--r-sm); display: grid; place-items: center; font-size: 1.15rem; cursor: pointer; transition: color .15s, background .15s; }
.pw-toggle:hover { color: var(--navy); background: var(--tint); }
.pw-toggle.pw-in-group { position: static; transform: none; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0; background: #fff; }

/* search this page + status chips */
.filter-bar-lite { display: flex; align-items: center; gap: .75rem; margin: 0 0 .65rem; flex-wrap: wrap; }
.fl-search { position: relative; flex: 1 1 220px; max-width: 420px; }
.fl-search > .bi { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.fl-search > .form-control { padding-left: 2.4rem; min-height: 42px; border-radius: 999px; background: var(--panel); border-color: var(--line); }
.fl-search > .form-control:focus { background: #fff; }
.fl-count { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.fl-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.fl-chip { border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2); border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; font-weight: 700; min-height: 34px; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .12s; }
.fl-chip:hover { border-color: var(--blue); color: var(--navy); }
.fl-chip:active { transform: scale(.96); }
.fl-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.fl-empty { padding: 1.25rem; text-align: center; color: var(--muted); }
tr[hidden] { display: none !important; }
/* when the search bar sits inside a card, keep it inside the card's padding */
.card > .filter-bar-lite { padding: .8rem 1rem 0; margin: 0 0 .55rem; }
.card > .fl-chips { padding: 0 1rem; margin-bottom: .7rem; }
.card > .fl-empty { padding: 1rem; }
@media (max-width: 575.98px) {
    .admin-content form .form-control, .admin-content form .form-select { max-width: none !important; }
}

/* admin menu search */
.menu-search { position: relative; padding: .6rem .75rem .25rem; }
.menu-search > .bi { position: absolute; left: 1.4rem; top: 50%; transform: translateY(-30%); color: rgba(255, 255, 255, .6); pointer-events: none; }
.menu-search input { width: 100%; min-height: 40px; padding: .4rem .8rem .4rem 2.2rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; font-size: .9rem; }
.menu-search input::placeholder { color: rgba(255, 255, 255, .6); }
.menu-search input:focus { outline: none; background: rgba(255, 255, 255, .14); border-color: var(--aqua-soft); box-shadow: 0 0 0 3px rgba(95, 211, 224, .25); }

/* bundle picker */
.bundle-picker { margin-top: .25rem; }
.bundle-picker[hidden] { display: none; }
.bp-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .75rem; }
.bp-tools .fl-search { flex: 1 1 200px; max-width: none; }
.bp-sort.seg { width: auto; }
.bp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
@media (min-width: 576px) { .bp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bp-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 72px; padding: .55rem .35rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: #fff; color: var(--ink); cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease), background .15s; }
.bp-tile:hover { border-color: var(--blue); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.bp-tile:active { transform: scale(.97); }
.bp-tile .bp-size { font-weight: 800; font-size: 1.05rem; color: var(--navy); line-height: 1.1; }
.bp-tile .bp-price { font-size: .8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.bp-tile.on { background: var(--ocean); border-color: transparent; box-shadow: var(--shadow-2); }
.bp-tile.on .bp-size, .bp-tile.on .bp-price { color: #fff; }
.bp-empty { padding: 1rem; text-align: center; color: var(--muted); }

/* recent numbers + quick amounts */
.recent-nums, .quick-amts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; }
.rn-label { font-size: .78rem; font-weight: 700; color: var(--muted); margin-right: .15rem; }
.rn-chip, .qa-chip { border: 1px solid var(--line-strong); background: #fff; color: var(--navy); border-radius: 999px; padding: .3rem .8rem; min-height: 36px; font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .12s; }
.rn-chip:hover, .qa-chip:hover { background: var(--tint); border-color: var(--blue); }
.rn-chip:active, .qa-chip:active { transform: scale(.96); }
.qa-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.rn-clear { border: 0; background: transparent; color: var(--muted); font-size: .78rem; text-decoration: underline; padding: .3rem; min-height: 32px; cursor: pointer; }

.notice-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: .85rem; box-shadow: var(--shadow-1); }
.notice-panel h2 .bi { color: var(--blue); }

.benef-hint { margin-top: .45rem; padding: .4rem .7rem; border-radius: var(--r-sm); font-size: .85rem; font-weight: 600; display: flex; gap: .45rem; align-items: flex-start; }
.benef-hint[hidden] { display: none; }
.benef-hint.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.benef-hint.is-bad { background: var(--bad-bg); color: var(--bad-ink); }
.benef-hint.is-loading { background: var(--neutral-bg); color: var(--neutral-ink); }

.row-list.flat { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.row-list.flat .row-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
.row-list.flat .row-item:last-child { border-bottom: 0; }
.row-list.flat .row-item .ico { background: transparent; width: auto; height: auto; color: var(--blue); }
a.row-item:hover { transform: none; }

/* a plain list menu (one card, hairline rows) used instead of tile grids */
.menu-list { display: grid; grid-template-columns: 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
@media (min-width: 768px) { .menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.menu-item { display: flex; align-items: center; gap: .8rem; min-height: 52px; padding: .65rem 1rem; color: var(--ink); text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--line); transition: background .15s var(--ease); }
.menu-item > i:first-child { width: 1.4rem; text-align: center; font-size: 1.15rem; color: var(--blue); flex: none; }
.menu-item > span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.menu-item .chev { color: var(--muted); font-size: .85rem; flex: none; }
.menu-item:hover { background: var(--panel); color: var(--navy); }
.menu-list > .menu-item:last-child { border-bottom: 0; }
@media (min-width: 768px) { .menu-list > .menu-item:nth-child(odd) { border-right: 1px solid var(--line); } .menu-list > .menu-item:nth-last-child(-n+2):nth-child(odd), .menu-list > .menu-item:last-child { border-bottom: 0; } }

/* motion */
.reveal { opacity: 0; transform: translateY(10px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.card, .row-item, .service-tile, .btn, .form-control, .form-select { transition-property: background-color, border-color, color, box-shadow, transform, opacity; transition-duration: .18s; transition-timing-function: var(--ease); }
.card:hover, a.row-item:hover { box-shadow: var(--shadow-2); }
a.row-item:hover { transform: translateY(-1px); }
.btn-ghana-gold { position: relative; overflow: hidden; }
.btn-ghana-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); }
.btn-ghana-gold:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }
.tabbar .tab.active i { animation: tab-pop .35s var(--ease); }
@keyframes tab-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.badge, .chip { animation: chip-in .3s var(--ease) both; }
@keyframes chip-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.alert { animation: toast-in .3s var(--ease); }
.wallet-card .btn { box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* sticky buy button above the tab bar on phones, so the action is always in reach */
@media (max-width: 767.98px) {
    body[data-shell="app"] form #submitBtn,
    body[data-shell="app"] form .btn-lg.w-100[type="submit"] {
        position: sticky;
        bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--dock-h, 0px) + 10px);
        z-index: 6;
        box-shadow: 0 10px 24px rgba(11, 37, 67, .28);
    }
    .fl-chip { text-transform: capitalize; }
}
.fl-chip { text-transform: capitalize; }

/* floating WhatsApp help on agent stores.
   Wide screens: a round button parked in the empty gutter beside the 960px store column, so it never sits on content.
   Narrower screens: a slim dock docked to the bottom edge; the page reserves the same height (--dock-h), so
   nothing (prices, Buy buttons, last row) can ever be hidden behind it. */
.whatsapp-float {
    position: fixed; right: 16px; bottom: 20px; z-index: 1034;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 52px; height: 52px; border-radius: 50%;
    background: #25D366; color: #0B2543; text-decoration: none; font-weight: 700; font-size: .95rem;
    box-shadow: var(--shadow-2);
}
.whatsapp-float:hover { color: #0B2543; filter: brightness(.95); }
.whatsapp-float i { font-size: 1.4rem; line-height: 1; }
.whatsapp-float span { display: none; }
@media (min-width: 1360px) { .whatsapp-float { width: auto; padding: 0 1.1rem; border-radius: 999px; } .whatsapp-float span { display: inline; } }
/* dock: everywhere under 1160px; in the signed-in shell the sidebar eats 248px, so the round button only fits from 1408px */
@media (max-width: 1159.98px) {
    body:has(.whatsapp-float) { --dock-h: 48px; }
    .whatsapp-float { left: 0; right: 0; bottom: 0; width: auto; height: auto; min-height: var(--dock-h); padding: 0 1rem var(--safe-b); border-radius: 0; box-shadow: 0 -4px 18px rgba(15, 48, 87, .12); }
    .whatsapp-float span { display: inline; }
    .main-content { padding-bottom: calc(var(--dock-h, 0px) + var(--safe-b)); }
}
@media (min-width: 1160px) and (max-width: 1407.98px) {
    body[data-shell="app"]:has(.whatsapp-float) { --dock-h: 48px; }
    body[data-shell="app"] .whatsapp-float { left: 0; right: 0; bottom: 0; width: auto; height: auto; min-height: var(--dock-h); padding: 0 1rem var(--safe-b); border-radius: 0; box-shadow: 0 -4px 18px rgba(15, 48, 87, .12); }
    body[data-shell="app"] .whatsapp-float span { display: inline; }
    body[data-shell="app"] .main-content { padding-bottom: calc(var(--dock-h, 0px) + var(--safe-b)); }
}
@media (min-width: 768px) and (max-width: 1407.98px) {
    body[data-shell="app"] .whatsapp-float { left: var(--sidebar-w); }
    body[data-shell="app"] .site-sidebar { padding-bottom: calc(1.5rem + var(--dock-h, 0px)); }
}
@media (max-width: 767.98px) {
    body[data-shell="app"] .whatsapp-float { left: 0; bottom: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: 0; }
}

/* ───────────────────────── 11. Utilities ───────────────────────── */
.text-balance { text-wrap: balance; }
.min-w-0 { min-width: 0; }
.nowrap { white-space: nowrap; }
.safe-bottom { padding-bottom: calc(1rem + var(--safe-b)); }
img { max-width: 100%; height: auto; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: var(--gold); color: var(--navy); padding: .6rem 1rem; border-radius: 0 0 var(--r-md) 0; font-weight: 700; }
.skip-link:focus { left: 0; }

@media print {
    nav.navbar, .site-sidebar, .tabbar, .admin-sidebar, .admin-topbar, footer, .floating-messages { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; }
}