/* ============================================================
   Compliance / KYC onboarding wizard
   Scoped under .compliance-page so it never leaks to other views.
   ============================================================ */

:root {
    /* ---------- Brand ----------
       Navy is the primary colour: buttons, headings, body text and dark panels.
       Coral is the accent: fills, indicators, focus/hover borders and icons. Coral on
       white or cream is below AA for text, so coral text uses --brand-coral-ink.
       Cream is the page background and the soft surface behind lists and controls. */
    --brand-navy: #0B1B3B;
    --brand-navy-hover: #1C2E54;
    --brand-navy-deep: #071330;
    --brand-navy-muted: #4F576B; /* same as --afropin-text-mute2: one secondary grey */
    --brand-navy-soft: #E8EBF1;

    --brand-coral: #FF6B5B;
    --brand-coral-hover: #F2584A;
    --brand-coral-ink: #BE443A;        /* coral text: AA on white, cream and coral-soft */
    --brand-coral-strong: #EB6558;     /* coral borders that signal state: 3:1 on white */
    --brand-coral-soft: #FFF1EE;
    --brand-coral-tint: #FFE1DB;
    --brand-coral-border: #FFD0C8;

    --brand-cream: #FBF7F0;
    --brand-cream-deep: #F4EDE2;
    --brand-cream-line: #ECE5D8;

    /* ---------- Status (kept apart from the brand so "success" never reads as an accent) ---------- */
    --afropin-success: #2E8B4A;
    --afropin-success-ink: #23703A;
    --afropin-success-bg: #EEF7F0;
    --afropin-success-border: #CBE8D3;
    --afropin-error: #d92d20;
    --afropin-error-soft: #ffb3b3;
    --afropin-error-bg: #fef3f2;
    --afropin-error-hover: #b42318;
    --afropin-warning: #f59e0b;
    --afropin-warning-text: #92400e;
    --afropin-warning-bg: #fffbeb;
    --afropin-warning-border: #fce2b6;
    --afropin-error-border: #fad1cd;

    /* ---------- Legacy names, mapped onto the palette above ---------- */
    --afropin-green: var(--afropin-success);
    --afropin-green-hover: var(--afropin-success);
    --afropin-green-darkest: var(--afropin-success-ink);
    --afropin-green-eyebrow: var(--brand-coral-ink);
    --afropin-secondary: var(--brand-navy);
    --afropin-secondary-darkest: var(--brand-navy-deep);
    --afropin-secondary-soft: var(--brand-navy-soft);
    --afropin-lime: var(--afropin-success-bg);
    --afropin-lime-hover: var(--brand-navy);
    --afropin-lime-soft: var(--brand-coral-soft);
    --afropin-lime-bg-soft: var(--brand-cream);
    --afropin-progress-fill-light: var(--brand-coral);

    /* Surfaces & borders (warm neutrals so white cards sit cleanly on cream) */
    --afropin-white: #ffffff;
    --afropin-soft-bg: var(--brand-cream);
    --afropin-hairline: var(--brand-cream-line);
    --afropin-hairline-2: var(--brand-cream-line);
    --afropin-border: var(--brand-cream-line);
    --afropin-image-placeholder: #EFE8DC;
    --afropin-progress-track: #ECE5D8;
    --afropin-input-border: #DED6C8;
    --afropin-breadcrumb-sep: #CEC6B8;
    --afropin-dot-gray: #CBC4B7;

    /* Text (navy-based greys) */
    --afropin-text: var(--brand-navy);
    --rx-ink: var(--brand-navy); /* base.css's .text-dark ink was the old theme's #181C32; page titles are brand navy */
    --afropin-text-prose: #27324D;
    --afropin-text-muted: var(--afropin-text-mute2); /* one secondary grey: the two used to differ by a shade nobody could see */
    --afropin-text-mute2: #4F576B; /* secondary text, a step darker than placeholders: 7.2:1 on white, 6.8:1 on cream */
    --afropin-muted: var(--afropin-text-mute2);
    --afropin-text-placeholder: #5B6376; /* AA on every surface: 6.0:1 on white, 5.6:1 on cream (inputs), 5.2:1 on cream-deep */

    /* Text on dark (navy) backgrounds */
    --afropin-text-on-dark: #D6DCE8;
    --afropin-text-on-dark-2: var(--brand-cream);
    --afropin-text-on-dark-3: #8E9AB4;

    /* Misc */
    --afropin-black: #000;
    --afropin-shadow: #0B1B3B; /* shadows: navy on the light theme, black on the dark one (navy turns light there) */
}

/* .badge-light-danger {
    color: var(--afropin-green);
    background-color: var(--afropin-lime);
    border-width: 1px;
    border-style: solid;
    border-color: var(--afropin-green);
} */

.menu-state-primary .menu-item.here>.menu-link .menu-title,
.menu-state-primary .menu-item.show>.menu-link .menu-title {
    color: var(--brand-coral-ink);
}

a {
    color: var(--brand-coral-ink);
    text-decoration: none;
}

.alert-danger {
    color: var(--afropin-error);
    background-color: var(--afropin-error-bg);
    border-color: var(--afropin-error-soft);
}


.btn.btn-danger.active,
.btn.btn-danger.show,
.btn.btn-danger:active:not(.btn-active),
.btn.btn-danger:focus:not(.btn-active),
.btn.btn-danger:hover:not(.btn-active),
.show>.btn.btn-danger {
    color: var(--afropin-white);
    border-color: var(--brand-navy-hover);
    background-color: var(--brand-navy-hover)
}

.btn.btn-danger {
    color: var(--afropin-white);
    border-color: var(--brand-navy);
    background-color: var(--brand-navy);
}


.btn.btn-active-light-danger.active,
.btn.btn-active-light-danger.show,
.btn.btn-active-light-danger:active:not(.btn-active),
.btn.btn-active-light-danger:focus:not(.btn-active),
.btn.btn-active-light-danger:hover:not(.btn-active),
.show>.btn.btn-active-light-danger {
    color: var(--brand-coral-ink);
    border-color: var(--brand-coral-soft);
    background-color: var(--brand-coral-soft)
}

.btn-outline-danger {
    color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
}

.text-hover-danger:hover {
    transition: color .2s ease, background-color .2s ease;
    color: var(--brand-coral-ink) !important
}

.text-hover-danger:hover i {
    transition: color .2s ease, background-color .2s ease;
    color: var(--brand-coral-ink) !important
}

.text-hover-danger:hover .svg-icon svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: var(--brand-coral-ink)
}


.btn.btn-light-danger.active,
.btn.btn-light-danger.show,
.btn.btn-light-danger:active:not(.btn-active),
.btn.btn-light-danger:focus:not(.btn-active),
.btn.btn-light-danger:hover:not(.btn-active),
.show>.btn.btn-light-danger {
    color: var(--brand-navy);
    border-color: var(--brand-coral);
    background-color: var(--brand-coral)
}

.btn.btn-light-danger {
    color: var(--brand-coral-ink);
    border-color: var(--brand-coral-soft);
    background-color: var(--brand-coral-soft);
}

.bg-light-danger {
    background-color: var(--brand-coral-soft) !important;
}

.menu-state-icon-primary .menu-item .menu-link.active .menu-title {
    color: var(--afropin-text) !important;
}

code:not([class*=language-]) {
    font-weight: 400;
    color: var(--brand-coral-ink);
    line-height: inherit;
    font-size: inherit;
    background-color: var(--brand-cream-deep);
    padding: 1px .4rem;
    margin: 0 .5rem;
    box-shadow: 0 3px 9px rgba(0, 0, 0, .08);
    border-radius: .3rem;
}

/* ---------- Left aside (dark panel) ---------- */

/* Fixed on tablet/desktop so it stays put while the form scrolls.
   It overlays the col-md-3/col-lg-3 spacer, which keeps its 25% width. */

/* ---------- Progress bar ---------- */

/* ---------- Vertical step timeline ---------- */

/* connecting line between nodes */

/* ---------- Buttons: pill shaped everywhere ---------- */

/* ---------- Mobile top stepper ---------- */

/* ---------- Right form panel ---------- */

/* Inputs: softer corners + branded focus ring */

.form-label.required::after {
    color: var(--afropin-error) !important;
}

/* Section divider with label */

/* ---------- Uploaded file chips ---------- */

/* ---------- Directors card ---------- */

/* ---------- FilePond ---------- */

/* ---------- Submit / primary button ---------- */

/* ============================================================
   Wallet cards  (livewire/partner/wallet-options) and the strip that holds them (partner dashboard)
   ============================================================ */
.wcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    padding: 18px 18px 16px;
    border: 1px solid var(--brand-cream-line);
    border-radius: 16px;
    background: var(--afropin-white);
    container-type: inline-size;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.wcard:hover { border-color: var(--brand-coral-border); box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--afropin-shadow) 35%, transparent); }
/* short coral rule on the top edge: the brand accent */
.wcard::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 18px;
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--brand-coral);
}
.wcard-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wcard .wcard-flag {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px var(--brand-cream-line);
}
.wcard-cur { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.wcard-name { font-weight: 600; font-size: 14px; color: var(--brand-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard-code { font-size: 12px; color: var(--afropin-text-muted); }
.wcard-mode { flex: 0 0 auto; }
.wcard-eye { flex: 0 0 auto; }
.wcard-label { display: block; font-size: 12px; color: var(--afropin-text-muted); }
.wcard-balance { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* exact amounts can't be compacted, so the figure stays on one line and its size follows the card width */
.wcard-amount {
    font-size: clamp(1.15rem, 10cqi, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--brand-navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wcard-masked { letter-spacing: .2em; }
.wcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--brand-cream-line);
}
.wcard-meta { min-width: 0; }
.wcard-meta-value { display: block; font-weight: 600; font-size: 14px; color: var(--brand-navy); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard-add {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-navy);
    color: var(--afropin-white);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}
.wcard-add:hover { background: var(--brand-navy-hover); }
/* A brand's wallet: when the redemption balance is paid out, and two actions side by side */
.wcard-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--afropin-text-muted); }
.wcard-note i { color: var(--brand-coral-ink); }
.wcard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* A brand's two balances, each with its action beneath it */
.wcard-foot-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.wcard-foot-stack .wcard-meta-value { font-size: 16px; white-space: normal; }
.wcard-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wcard-foot-stack .wcard-actions-row { margin-top: 0; }
.wcard-add-line { background: var(--afropin-white); color: var(--brand-navy); box-shadow: inset 0 0 0 1px var(--afropin-hairline-2); }
.wcard-add-line:hover { background: var(--brand-cream); }
.wcard-add:focus-visible { outline: 2px solid var(--brand-coral); outline-offset: 2px; }

/* the strip scrolls sideways when the wallets don't fit; arrows appear only then */
.wl-rail { position: relative; }
.wl-rail-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 4px;
    scrollbar-width: none;
}
.wl-rail-track::-webkit-scrollbar { display: none; }
.wl-rail-item { scroll-snap-align: start; flex: 0 0 85%; max-width: 85%; }
@media (min-width: 576px) { .wl-rail-item { flex-basis: calc(50% - 8px); max-width: calc(50% - 8px); } }
@media (min-width: 992px) { .wl-rail-item { flex-basis: calc(33.333% - 11px); max-width: calc(33.333% - 11px); } }
@media (min-width: 1400px) { .wl-rail-item { flex-basis: calc(25% - 12px); max-width: calc(25% - 12px); } }
/* The only wallet: one wider card instead of a lone narrow one */
.wl-rail-track.is-single .wl-rail-item { flex-basis: 100%; max-width: 760px; }
/* A wide card puts its balances side by side: the main balance on the left, the second (a brand's issuing
   balance, a reseller's commission) on the right, each with its action under it */
.wcard-body { display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; min-width: 0; }
@container (min-width: 560px) {
    .wcard-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: stretch; }
    .wcard-body > .wcard-foot { margin-top: 0; padding-top: 0; padding-left: 28px; border-top: 0; border-left: 1px dashed var(--brand-cream-line); }
    .wcard-body > .wcard-foot-stack { justify-content: flex-start; }
    /* Side by side, the two balances are equals: the second one's label, amount and note match the first */
    .wcard-body > .wcard-foot .wcard-meta { display: flex; flex-direction: column; gap: 4px; }
    .wcard-body > .wcard-foot .wcard-meta-value { font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; }
    /* The same space above both actions (the left one sits in a 4px-gap column with a 10px margin) */
    .wcard-body > .wcard-foot-stack { gap: 0; }
    .wcard-body > .wcard-foot-stack .wcard-actions-row { margin-top: 14px; }
}
.wl-rail-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--brand-cream-line);
    border-radius: 10px;
    background: var(--afropin-white);
    color: var(--brand-navy);
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--afropin-shadow) 35%, transparent);
    transform: translateY(-50%);
    transition: border-color .2s ease;
}
.wl-rail-nav:hover { border-color: var(--brand-coral); }
.wl-rail-prev { left: -10px; }
.wl-rail-next { right: -10px; }

/* ============================================================
   Quick Action rows  (user dashboard)
   ============================================================ */

/* ============================================================
   API Keys — premium list  (user/settings/api-keys)
   ============================================================ */

/* status pill with pulse dot */

/* row actions */

/* premium empty state */

/* ============================================================
   API Request Log  (user/settings/api-log)
   ============================================================ */

/* HTTP status + method badges */

/* monospace URL chip */
.log-url {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: .78rem;
    color: var(--afropin-text-muted);
    background: var(--brand-cream);
    border: 1px solid var(--brand-cream-line);
    border-radius: .4rem;
    padding: .18rem .5rem;
}

.log-mono {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: .78rem;
    color: var(--afropin-text-mute2);
}

/* ===== Dashboard statistics cards ===== */

/* ============================================================
   Developer docs › Consistent code blocks (<pre><code>)
   Loaded after docs.css so it overrides the base Prism theme.
   Applies to every Prism block in resources/views/developer
   via the .code-toolbar wrapper the Prism toolbar plugin adds.
   ============================================================ */

/* Window frame around every code block */

/* macOS-style window chrome dots */

/* Header divider line */

/* The code surface itself — normalised across every page */

/* Premium scrollbar */

/* Copy button, sitting in the window header (works for <button> and <a>) */

/* Fallback: a Prism block that wasn't wrapped (JS disabled) still looks right */
pre[class*="language-"] {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.link-success {
    color: var(--brand-coral-ink);
}

.link-success:focus,
.link-success:hover {
    color: var(--brand-navy)
}

.btn.btn-secondary {
    color: var(--brand-navy);
    border-color: var(--brand-cream-line);
    background-color: var(--brand-cream-deep);
}


.btn.btn-secondary.active,
.btn.btn-secondary.show,
.btn.btn-secondary:active:not(.btn-active),
.btn.btn-secondary:focus:not(.btn-active),
.btn.btn-secondary:hover:not(.btn-active),
.show>.btn.btn-secondary {
    color: var(--afropin-white);
    border-color: var(--brand-navy);
    background-color: var(--brand-navy)
}

.content {
    background-color: var(--brand-cream);
}

.menu-state-icon-primary .menu-item .menu-link.active {
    background-color: var(--brand-coral-soft) !important;
    transition: color .2s ease, background-color .2s ease;
}

.badge-success {
    color: var(--afropin-success-ink);
}

.bg-warning {
    background-color: var(--brand-coral-tint) !important;
}

.bg-light-warning {
    background-color: var(--brand-coral-tint) !important;
}

.border-warning {
    border-color: var(--brand-coral-strong) !important;
}

/* .border-danger {
    border-color: var(--afropin-green) !important;
} */

.text-warning {
    color: var(--brand-coral-ink) !important;
}

.text-menu {
    color: var(--brand-navy-muted) !important;
}

.menu-link.active .text-menu,
.menu-link:hover .text-menu {
    color: var(--brand-coral) !important;
}

.text-danger {
    color: var(--afropin-error) !important;
}

.form-check.form-check-solid .form-check-input:checked {
    background-color: var(--brand-navy);
}

/* Every checkbox in the brand's colours (base.css ticks them in a stock blue): an outlined box, filled navy when ticked
   (coral in dark mode, below). Switches are checkboxes too, and keep their own shape */
.form-check-input[type=checkbox]:not([role=switch]):not(.form-switch .form-check-input) {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--afropin-input-border);
    border-radius: 6px;
    background-color: var(--afropin-white);
    background-size: 12px 10px;
    cursor: pointer;
}
.form-check-input[type=checkbox]:not([role=switch]):not(.form-switch .form-check-input):checked {
    border-color: var(--brand-navy);
    background-color: var(--brand-navy);
}
.form-check-input[type=checkbox]:not([role=switch]):not(.form-switch .form-check-input):focus {
    border-color: var(--brand-navy);
    box-shadow: 0 0 0 3px var(--brand-coral-soft);
}

.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled),
.nav-line-tabs .nav-item.show .nav-link {
    border-bottom: 2px solid var(--brand-coral-strong);
}

.border-success {
    border-color: var(--brand-coral-strong) !important;
}

.bg-success {
    background-color: var(--brand-coral) !important;
}

.bg-secondary {
    background-color: var(--brand-cream-deep) !important;
}

.bg-dark {
    background-color: var(--brand-navy) !important;
}

/* .bg-danger {
    background-color: var(--afropin-green) !important;
} */

.text-success {
    color: var(--brand-coral-ink) !important;
}


.btn.btn-active-light-success.active,
.btn.btn-active-light-success.show,
.btn.btn-active-light-success:active:not(.btn-active),
.btn.btn-active-light-success:focus:not(.btn-active),
.btn.btn-active-light-success:hover:not(.btn-active),
.show>.btn.btn-active-light-success {
    color: var(--brand-coral-ink);
    background-color: var(--brand-coral-soft);
}


.btn.btn-dark.active i,
.btn.btn-dark.show i,
.btn.btn-dark:active:not(.btn-active) i,
.btn.btn-dark:focus:not(.btn-active) i,
.btn.btn-dark:hover:not(.btn-active) i,
.show>.btn.btn-dark i {
    color: var(--afropin-white);
}


.btn.btn-dark.active,
.btn.btn-dark.show,
.btn.btn-dark:active:not(.btn-active),
.btn.btn-dark:focus:not(.btn-active),
.btn.btn-dark:hover:not(.btn-active),
.show>.btn.btn-dark {
    color: var(--afropin-white);
    background-color: var(--brand-navy-hover);
    border-color: var(--brand-navy-hover);
}

.bg-light-success {
    background-color: var(--brand-coral-soft) !important;
}

.btn.btn-success {
    color: var(--afropin-white);
    border-color: var(--brand-navy);
    background-color: var(--brand-navy);
}


.btn.btn-dark {
    color: var(--afropin-white);
    border-color: var(--brand-navy);
    background-color: var(--brand-navy);
}


.btn.btn-success.active,
.btn.btn-success.show,
.btn.btn-success:active:not(.btn-active),
.btn.btn-success:focus:not(.btn-active),
.btn.btn-success:hover:not(.btn-active),
.show>.btn.btn-success {
    color: var(--afropin-white);
    background-color: var(--brand-navy-hover);
    border-color: var(--brand-navy-hover);
}


.btn.btn-success.active i,
.btn.btn-success.show i,
.btn.btn-success:active:not(.btn-active) i,
.btn.btn-success:focus:not(.btn-active) i,
.btn.btn-success:hover:not(.btn-active) i,
.show>.btn.btn-success i {
    color: var(--afropin-white)
}

.text-hover-success:hover {
    transition: color .2s ease, background-color .2s ease;
    color: var(--brand-coral-ink) !important
}

.text-hover-success:hover i {
    transition: color .2s ease, background-color .2s ease;
    color: var(--brand-coral-ink) !important
}

.menu-state-primary .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title,
.menu-state-primary .menu-item.hover>.menu-link:not(.disabled):not(.active) .menu-title {
    color: var(--brand-coral-ink)
}

/* ==== Generic status callout (review / info / success / warning) ==== */

@keyframes sm-status-ping {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }

    80%,
    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

/* Review (in-progress) variant — amber accents */

/* Info variant — brand */

/* Success variant */

/* Danger variant */
/* Admin dashboard statistics (livewire/admin/revenue) */
.rev-stats .kpi-card {
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rev-stats .kpi-card:hover {
    border-color: var(--afropin-dot-gray) !important;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .05);
}

.rev-stats .kpi-value,
.rev-stats .tabular {
    font-variant-numeric: tabular-nums;
}

.rev-stats .kpi-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 17px;
    background: var(--afropin-lime-bg-soft);
    border: 1px solid var(--afropin-hairline-2);
    color: var(--afropin-text-prose);
}

.rev-stats .kpi-icon i {
    color: inherit;
}

.rev-stats .section-title {
    letter-spacing: .06em;
}

.rev-stats .share-bar {
    --share-bar-color: var(--afropin-secondary);
    display: block;
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--afropin-hairline-2);
    color: var(--share-bar-color);
    -webkit-appearance: none;
    appearance: none;
}

.rev-stats .share-bar::-webkit-progress-bar {
    background: var(--afropin-hairline-2);
    border-radius: 4px;
}

.rev-stats .share-bar::-webkit-progress-value {
    background: var(--share-bar-color);
    border-radius: 4px;
}

.rev-stats .share-bar::-moz-progress-bar {
    background: var(--share-bar-color);
    border-radius: 4px;
}

/* Same hues as the charts, so a bar matches its donut slice */
.rev-stats .share-bar-success {
    --share-bar-color: var(--afropin-green);
}

.rev-stats .share-bar-warning {
    --share-bar-color: var(--afropin-warning);
}

.rev-stats .share-bar-danger {
    --share-bar-color: var(--afropin-error);
}

.rev-stats .share-bar-secondary {
    --share-bar-color: var(--afropin-dot-gray);
}

/* Revenue header controls: one height and surface for segments, date and currency */
.rev-stats .rev-segment {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 4px;
    border-radius: 10px;
    background: var(--afropin-lime-bg-soft);
    border: 1px solid var(--afropin-hairline-2);
}

.rev-stats .rev-segment__btn {
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--afropin-text-muted);
    font-size: .8rem;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.rev-stats .rev-segment__btn:hover {
    color: var(--afropin-text);
}

.rev-stats .rev-segment__btn.active {
    background: var(--afropin-secondary);
    color: var(--afropin-white);
}

.rev-stats .rev-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--afropin-lime-bg-soft);
    border: 1px solid var(--afropin-hairline-2);
    color: var(--afropin-text);
    font-size: .8rem;
    font-weight: 600;
    transition: border-color .15s ease;
}

.rev-stats .rev-control:hover,
.rev-stats .rev-control[aria-expanded="true"] {
    border-color: var(--afropin-dot-gray);
}

.rev-stats .rev-control:focus {
    outline: 0;
    border-color: var(--afropin-text-placeholder);
}

.rev-stats .rev-control--input {
    display: block;
    cursor: pointer;
}

.rev-stats .rev-control--static:hover {
    border-color: var(--afropin-hairline-2);
}

.rev-stats .rev-currency-mark {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: var(--afropin-white);
    border: 1px solid var(--afropin-hairline-2);
    color: var(--afropin-text-prose);
    font-size: .75rem;
    font-weight: 700;
}

.rev-menu {
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 12px;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .08);
}

.rev-menu__heading {
    padding: 6px 10px 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--afropin-text-mute2);
}

.rev-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
}

.rev-menu__item:hover,
.rev-menu__item.active {
    background: var(--afropin-lime-bg-soft);
}

/* Label/value rows separated by a single hairline */
.rev-stats .rev-list__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
}

.rev-stats .rev-list__row + .rev-list__row {
    border-top: 1px dashed var(--afropin-input-border);
}

.rev-stats .rev-list {
    border-top: 1px solid var(--afropin-hairline-2);
}

/* Exported reports (livewire/user/exports) */
.rx-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--afropin-white);
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}

.rx-stat {
    padding: 18px 22px;
    border-left: 1px solid var(--afropin-hairline-2);
}

.rx-stat:first-child {
    border-left: 0;
}

.rx-stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--afropin-text-mute2);
    font-weight: 500;
}

.rx-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--afropin-text);
    margin-top: 6px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rx-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.rx-dot-all {
    background: var(--afropin-dot-gray);
}

.rx-dot-ready {
    background: var(--afropin-green);
}

.rx-dot-processing {
    background: var(--afropin-warning);
}

.rx-dot-failed {
    background: var(--afropin-error);
}

.rx-dot-expired {
    background: var(--afropin-text-placeholder);
}

.rx-card {
    background: var(--afropin-white);
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 14px;
    overflow: hidden;
}

.rx-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--afropin-hairline-2);
}

.rx-segment {
    display: inline-flex;
    background: var(--afropin-lime-bg-soft) !important;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    overflow-x: auto;
    max-width: 100%;
}

.rx-segment button {
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--afropin-text-mute2);
    white-space: nowrap;
    transition: all .15s;
}

.rx-segment button:hover {
    color: var(--afropin-text);
}

.rx-segment button.active {
    background: var(--afropin-white);
    color: var(--afropin-text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.rx-segment .rx-count {
    margin-left: 6px;
    color: var(--afropin-text-mute2);
    font-weight: 500;
}

.rx-note {
    font-size: 12px;
    color: var(--afropin-text-mute2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.rx-head,
.rx-row {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.2fr) 150px;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
}

.rx-head {
    height: 40px;
    background: var(--afropin-lime-bg-soft) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--afropin-text-mute2);
}

.rx-row {
    min-height: 72px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid var(--afropin-hairline-2);
    transition: background .15s;
}

.rx-row:first-of-type {
    border-top: 0;
}

.rx-row:hover {
    background: var(--afropin-lime-bg-soft) !important;
}

.rx-file {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.min-w-0 {
    min-width: 0 !important;
}

.rx-ext {
    width: 40px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    flex-shrink: 0;
    position: relative;
    border: 1px solid;
}

.rx-ext:before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    background: var(--afropin-white);
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-color: inherit;
    border-bottom-left-radius: 4px;
}

.rx-ext-csv {
    color: var(--afropin-secondary);
    background: var(--brand-navy-soft);
    border-color: var(--afropin-secondary-soft);
}

.rx-ext-xlsx {
    color: var(--afropin-success-ink);
    background: var(--afropin-success-bg);
    border-color: var(--afropin-success-border);
}

.rx-ext-pdf {
    color: var(--afropin-error);
    background: var(--afropin-error-bg);
    border-color: var(--afropin-error-soft);
}

.rx-ext-file {
    color: var(--afropin-text-mute2);
    background: var(--afropin-lime-bg-soft) !important;
    border-color: var(--afropin-input-border);
}

.rx-name {
    font-weight: 600;
    color: var(--afropin-text);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rx-sub {
    font-size: 12px;
    color: var(--afropin-text-mute2);
    margin-top: 2px;
}

.rx-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--afropin-hairline-2);
    background: var(--afropin-white);
    color: var(--afropin-text-prose);
}

.rx-pill-processing .rx-dot {
    animation: rx-pulse 1.2s ease-in-out infinite;
}

@keyframes rx-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}

.rx-expiry {
    font-size: 12px;
    color: var(--afropin-text-muted);
}

.rx-bar {
    --rx-bar-color: var(--afropin-text-prose);
    display: block;
    width: 100%;
    max-width: 140px;
    height: 4px;
    margin-top: 6px;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--afropin-hairline-2);
    color: var(--rx-bar-color);
    -webkit-appearance: none;
    appearance: none;
}

.rx-bar::-webkit-progress-bar {
    background: var(--afropin-hairline-2);
    border-radius: 4px;
}

.rx-bar::-webkit-progress-value {
    background: var(--rx-bar-color);
    border-radius: 4px;
}

.rx-bar::-moz-progress-bar {
    background: var(--rx-bar-color);
    border-radius: 4px;
}

.rx-bar.rx-bar-low {
    --rx-bar-color: var(--afropin-warning);
}

.rx-action {
    text-align: right;
}

.rx-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--brand-navy);
    background: var(--brand-navy);
    color: var(--afropin-white);
    transition: background-color .15s, border-color .15s;
    text-decoration: none;
}

.rx-btn:hover {
    background: var(--brand-navy-hover);
    border-color: var(--brand-navy-hover);
    color: var(--afropin-white);
}

.rx-btn:disabled {
    opacity: .6;
}

.rx-btn-outline {
    background: var(--afropin-white);
    color: var(--afropin-text-prose);
    border-color: var(--afropin-input-border);
}

.rx-btn-outline i {
    color: inherit;
}

.rx-btn-outline:hover {
    opacity: 1;
    color: var(--afropin-text);
    border-color: var(--afropin-text-placeholder);
    background: var(--afropin-lime-bg-soft) !important;
}

.rx-btn-sm {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
}

.rx-dot-info {
    background: var(--afropin-secondary);
}

.rx-pill-alert {
    border-color: var(--afropin-error-soft);
    background: var(--afropin-error-bg);
    color: var(--afropin-error);
}

.rx-muted {
    font-size: 12px;
    color: var(--afropin-text-mute2);
}

.rx-empty-filter {
    padding: 48px 20px;
    text-align: center;
    color: var(--afropin-text-mute2);
    font-size: 13px;
}

.rx-empty {
    background: var(--afropin-white);
    border: 1px dashed var(--afropin-input-border);
    border-radius: 14px;
    padding: 72px 24px;
    text-align: center;
}

.rx-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--afropin-lime-bg-soft) !important;
    border: 1px solid var(--afropin-hairline-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.rx-empty-icon-glyph {
    font-size: 26px;
}

.rx-spinner {
    width: .8rem;
    height: .8rem;
}

@media (max-width:991px) {
    .rx-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .rx-stat:nth-child(3) {
        border-left: 0;
    }

    .rx-stat:nth-child(n+3) {
        border-top: 1px solid var(--afropin-hairline-2);
    }

}


/* Invitations (livewire/admin/invitations), built on the rx-* list styles above */
.rx-head.inv-grid,
.rx-row.inv-grid {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, .9fr) minmax(0, 1.2fr) 250px;
}

.rx-toolbar-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rx-input {
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--afropin-hairline-2);
    background: var(--afropin-white);
    font-size: 12px;
    font-weight: 500;
    color: var(--afropin-text-prose);
    padding: 0 12px;
}

.rx-input:focus {
    outline: 0;
    border-color: var(--afropin-text-placeholder);
}

.rx-search {
    position: relative;
}

.rx-search i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--afropin-text-mute2);
}

.rx-search .rx-input {
    padding-left: 30px;
    width: 230px;
}

.rx-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid;
}

.rx-avatar-reseller {
    color: var(--brand-coral-ink);
    background: var(--brand-coral-soft);
    border-color: var(--brand-coral-border);
}

.rx-avatar-brand {
    color: var(--afropin-secondary);
    background: var(--brand-navy-soft);
    border-color: var(--afropin-secondary-soft);
}

.rx-avatar-other {
    color: var(--afropin-text-mute2);
    background: var(--afropin-lime-bg-soft);
    border-color: var(--afropin-input-border);
}

.rx-dot-pending {
    background: var(--afropin-warning);
}

.rx-dot-accepted {
    background: var(--afropin-green);
}

.rx-pill-pending .rx-dot {
    animation: rx-pulse 1.2s ease-in-out infinite;
}

.rx-action-group {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Stack list rows on small screens instead of squeezing four columns */
@media (max-width: 767px) {
    .rx-head.inv-grid {
        display: none;
    }

    .rx-row.inv-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .rx-row.inv-grid .rx-action {
        text-align: left;
    }

    .rx-search,
    .rx-search .rx-input,
    .rx-toolbar-filters,
    .rx-toolbar-filters select {
        width: 100%;
    }
}

/* Status tones from the afropin palette, for icon tiles and dots on rev/rx pages */
.tone-success { color: var(--afropin-green) !important; }
.tone-warning { color: var(--afropin-warning) !important; }
.tone-danger { color: var(--afropin-error) !important; }
.tone-muted { color: var(--afropin-text-mute2) !important; }

.tone-bg-success { background: var(--afropin-green) !important; }
.tone-bg-warning { background: var(--afropin-warning) !important; }
.tone-bg-danger { background: var(--afropin-error) !important; }
.tone-bg-muted { background: var(--afropin-dot-gray) !important; }

/* Soft status badge, same shape as rx-pill */
.tone-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--afropin-hairline-2);
    background: var(--afropin-white);
    color: var(--afropin-text-prose);
}

.tone-badge .rx-dot {
    width: 6px;
    height: 6px;
}

/* Text colours from the afropin palette (in place of Bootstrap text-gray-*) */
.afropin-text { color: var(--afropin-text) !important; }
.afropin-prose { color: var(--afropin-text-prose) !important; }
.afropin-muted { color: var(--afropin-text-mute2) !important; }
.afropin-subtle { color: var(--afropin-text-mute2) !important; } /* secondary text; the placeholder grey is for placeholders */

.rx-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-top: 1px solid var(--afropin-hairline-2);
}

/* Card shell matching rx-card, for .card based panels */
.rx-panel {
    background: var(--afropin-white);
    border: 1px solid var(--afropin-hairline-2) !important;
    border-radius: 14px !important;
}

/* ============================================================
   PIN templates & categories (livewire/admin/voucher/*)
   Built on the rx-* list language and the brand tokens.
   ============================================================ */
.rx-head.tpl-grid,
.rx-row.tpl-grid {
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.4fr) minmax(0, .8fr) 120px;
}

.rx-head.cat-grid,
.rx-row.cat-grid {
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) 200px;
}

.rx-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--brand-cream) center / cover no-repeat;
    border: 1px solid var(--afropin-hairline-2);
}

.rx-thumb-icon {
    display: grid;
    place-items: center;
    font-size: 17px;
    color: var(--brand-coral-ink);
    background: var(--brand-coral-soft);
    border-color: var(--brand-coral-border);
}

.rx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.rx-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--afropin-text-prose);
    background: var(--brand-cream);
    border: 1px solid var(--afropin-hairline-2);
    white-space: nowrap;
}

.rx-chip i {
    font-size: 11px;
    color: var(--afropin-text-mute2);
}

.rx-chip-off {
    color: var(--afropin-text-mute2);
    background: var(--afropin-white);
    text-decoration: line-through;
}

.rx-dot-active {
    background: var(--afropin-success);
}

.rx-dot-draft {
    background: var(--afropin-dot-gray);
}

.rx-filter-select {
    min-width: 140px;
}

.rx-icon-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid var(--afropin-hairline-2);
    background: var(--afropin-white);
    color: var(--afropin-text-prose);
    transition: border-color .15s;
}

.rx-icon-btn:hover {
    border-color: var(--afropin-text-placeholder);
    color: var(--afropin-text);
}

/* Header notification bell (livewire/partner/notifications/bell) */
.rx-notify-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--brand-cream-line);
    background: var(--afropin-white);
    color: var(--brand-navy);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.rx-notify-btn:hover {
    border-color: var(--brand-coral-strong);
    background: var(--brand-coral-soft);
}

.rx-notify-btn:focus-visible {
    outline: 2px solid var(--brand-coral-strong);
    outline-offset: 2px;
}

.rx-notify-btn i {
    color: inherit;
    font-size: inherit;
}

.rx-notify-btn.has-unread i {
    color: var(--brand-coral-ink);
}

.rx-notify-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 2px solid var(--afropin-white);
    background: var(--brand-coral-ink);
    color: var(--afropin-white);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Notifications drawer (livewire/partner/notifications/panel) */
.rx-notify-group {
    padding: 16px 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--afropin-text-mute2);
}

.rx-notify-group .rx-link-btn {
    text-transform: none;
    letter-spacing: 0;
}

.rx-notify-item {
    display: flex;
    gap: 14px;
    padding: 14px;
    margin-bottom: 8px;
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 14px;
    background: var(--afropin-white);
}

.rx-notify-item.is-unread {
    background: var(--brand-cream);
}

.rx-notify-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: var(--brand-cream);
    border: 1px solid var(--afropin-hairline-2);
    color: var(--brand-navy);
    font-size: 16px;
}

/* Unread: the coral tile and dot are the signal, on the cream surface */
.rx-notify-item.is-unread .rx-notify-icon {
    background: var(--brand-coral-soft);
    border-color: var(--brand-coral-border);
    color: var(--brand-coral-ink);
}

.rx-notify-icon i {
    color: inherit;
}

.rx-notify-icon.is-important,
.rx-notify-item.is-unread .rx-notify-icon.is-important {
    border-color: transparent;
    background: var(--afropin-warning-bg);
    color: var(--afropin-warning-text);
}

.rx-notify-icon.is-feature {
    background: var(--brand-coral-tint);
    color: var(--brand-coral-ink);
}

.rx-notify-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--afropin-text);
    line-height: 1.4;
}

.rx-notify-unread-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--brand-coral);
}

.rx-notify-body {
    margin-top: 4px;
    font-size: 13px;
    color: var(--afropin-text-prose);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rx-notify-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--afropin-text-mute2);
}

.rx-notify-tag {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--brand-navy-soft);
    color: var(--brand-navy);
}

.rx-notify-tag.is-important {
    background: var(--afropin-warning-bg);
    color: var(--afropin-warning-text);
}

.rx-notify-tag.is-feature {
    background: var(--brand-coral-tint);
    color: var(--brand-coral-ink);
}

.rx-notify-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.rx-notify-empty {
    padding: 64px 12px;
    text-align: center;
}

@media (max-width: 767px) {
    .rx-notify-btn {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 16px;
    }
}

.rx-btn-danger {
    background: var(--afropin-white);
    border-color: var(--afropin-error-soft);
    color: var(--afropin-error);
}

.rx-btn-danger i {
    color: inherit;
}

.rx-btn-danger:hover {
    background: var(--afropin-error-bg);
    border-color: var(--afropin-error);
    color: var(--afropin-error);
}

.rx-btn-block {
    width: 100%;
    justify-content: center;
    height: 42px;
    font-size: 13px;
}

/* Drawers: header, sections, footer */
.rx-drawer {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--afropin-white);
}

.rx-drawer-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--afropin-hairline-2);
}

.rx-drawer-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--afropin-text);
    line-height: 1.3;
}

.rx-drawer-sub {
    font-size: 12px;
    color: var(--afropin-text-mute2);
    margin-top: 2px;
}

.rx-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px 24px;
}

.rx-drawer-foot {
    padding: 16px 24px;
    border-top: 1px solid var(--afropin-hairline-2);
    background: var(--brand-cream);
}

.rx-section {
    padding: 20px 0;
    border-bottom: 1px solid var(--afropin-hairline-2);
}

.rx-section:last-child {
    border-bottom: 0;
}

/* A field straight after a section (the authenticator code under a form's sections) gets the same space below the rule */
.rx-section + .rx-field { padding-top: 20px; }

.rx-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--afropin-text-mute2);
    margin-bottom: 14px;
}

.rx-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--afropin-text);
    margin-bottom: 6px;
}

.rx-hint {
    display: block;
    font-size: 11px;
    color: var(--afropin-text-mute2);
    margin-top: 6px;
}

.rx-error {
    display: block;
    font-size: 11px;
    color: var(--afropin-error);
    margin-top: 6px;
}

.rx-field {
    margin-bottom: 16px;
}

.rx-field:last-child {
    margin-bottom: 0;
}

.rx-field .form-control,
.rx-field .form-select {
    border: 1px solid var(--afropin-hairline-2);
    background-color: var(--brand-cream);
    border-radius: 9px;
    font-size: 13px;
    color: var(--afropin-text);
}

.rx-field .form-control:focus,
.rx-field .form-select:focus {
    border-color: var(--brand-coral-strong);
    background-color: var(--afropin-white);
    box-shadow: 0 0 0 3px rgba(255, 107, 91, .15);
}

.rx-field .form-control[readonly] {
    color: var(--afropin-text-mute2);
    background-color: var(--brand-cream-deep);
}

/* Yes / No and single-choice toggle groups (radio inputs) */
.rx-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}

.rx-option + .rx-option {
    border-top: 1px dashed var(--afropin-hairline-2);
}

.rx-option-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--afropin-text);
}

.rx-option-desc {
    font-size: 11px;
    color: var(--afropin-text-mute2);
    margin-top: 2px;
}

.rx-choice {
    /* Containing block for the hidden radios, so focusing one never scrolls the page to an outside spot */
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    padding: 3px;
    gap: 2px;
    border-radius: 9px;
    background: var(--brand-cream-deep);
}

.rx-choice input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rx-choice label {
    margin: 0;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--afropin-text-mute2);
    cursor: pointer;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
}

.rx-choice input:checked + label {
    background: var(--brand-navy);
    color: var(--afropin-white);
}

.rx-choice input:focus-visible + label {
    outline: 2px solid var(--brand-coral-strong);
    outline-offset: 1px;
}

/* Multi-select as checkbox chips */
.rx-check-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rx-check-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rx-check-chip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--afropin-text-prose);
    background: var(--afropin-white);
    border: 1px solid var(--afropin-input-border);
    cursor: pointer;
    transition: all .15s;
}

.rx-check-chip span:hover {
    border-color: var(--afropin-text-placeholder);
}

.rx-check-chip input:checked + span {
    color: var(--brand-coral-ink);
    background: var(--brand-coral-soft);
    border-color: var(--brand-coral-strong);
}

.rx-check-chip input:checked + span::before {
    content: "\F26E";
    font-family: bootstrap-icons;
    font-size: 13px;
    line-height: 1;
}

.rx-check-chip input:focus-visible + span {
    outline: 2px solid var(--brand-coral-strong);
    outline-offset: 1px;
}

/* Upload tiles */
.rx-upload {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rx-upload .image-input-wrapper {
    border-radius: 12px !important;
}

.rx-file-input {
    font-size: 12px;
}

/* The browser's "Choose file" button on every file field, in the brand's tokens so it follows light and dark mode
   (base.css only sizes it) */
.form-control::file-selector-button,
.form-control::-webkit-file-upload-button {
    color: var(--brand-navy);
    background-color: var(--brand-cream-deep);
    border: 0;
    border-inline-end: 1px solid var(--brand-cream-line);
    font-weight: 600;
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button,
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: var(--brand-cream-line);
}

/* Denomination rows */
.rx-denom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.rx-denom-index {
    width: 28px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--afropin-text-mute2);
    text-align: center;
}

.rx-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-coral-ink);
}

.rx-link-btn:hover {
    color: var(--brand-navy);
}

/* Key / value rows and action list in the template drawer */
.rx-kv {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    font-size: 12px;
}

.rx-kv + .rx-kv {
    border-top: 1px dashed var(--afropin-hairline-2);
}

.rx-kv-label {
    color: var(--afropin-text-mute2);
}

.rx-kv-value {
    font-weight: 600;
    color: var(--afropin-text);
    text-align: right;
    word-break: break-all;
}

.rx-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.rx-metric {
    padding: 14px;
    border-radius: 12px;
    background: var(--brand-cream);
    border: 1px solid var(--afropin-hairline-2);
}

.rx-metric-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--afropin-text-mute2);
}

.rx-metric-value {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--afropin-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.rx-metric-sub {
    font-size: 11px;
    color: var(--afropin-text-mute2);
    margin-top: 2px;
}

.rx-hero {
    padding: 20px;
    border-radius: 14px;
    background: var(--brand-navy);
    color: var(--afropin-white);
    display: flex;
    align-items: center;
    gap: 14px;
}

.rx-hero .rx-thumb {
    width: 52px;
    height: 52px;
    border-color: rgba(255, 255, 255, .12);
}

.rx-hero-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--afropin-white);
}

.rx-hero-sub {
    font-size: 12px;
    color: var(--afropin-text-on-dark);
    margin-top: 2px;
}

.rx-art {
    display: block;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--afropin-hairline-2);
}

.rx-actions {
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 12px;
    overflow: hidden;
}

.rx-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    background: var(--afropin-white);
    font-size: 13px;
    font-weight: 600;
    color: var(--afropin-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s;
}

.rx-action-item + .rx-action-item {
    border-top: 1px solid var(--afropin-hairline-2);
}

.rx-action-item:hover {
    background: var(--brand-cream);
    color: var(--afropin-text);
}

.rx-action-item > i:first-child {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 14px;
    color: var(--afropin-text-prose);
    background: var(--brand-cream-deep);
}

.rx-action-item .rx-action-arrow {
    margin-left: auto;
    font-size: 12px;
    color: var(--afropin-text-mute2);
}

.rx-action-item.is-danger,
.rx-action-item.is-danger > i:first-child {
    color: var(--afropin-error);
}

.rx-action-item.is-danger > i:first-child {
    background: var(--afropin-error-bg);
}

/* Confirmation modals */
.rx-confirm {
    text-align: center;
    padding: 8px 8px 4px;
}

.rx-confirm-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 22px;
    color: var(--afropin-error);
    background: var(--afropin-error-bg);
}

.rx-confirm-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--afropin-text);
    margin-bottom: 6px;
}

.rx-confirm-text {
    font-size: 13px;
    color: var(--afropin-text-mute2);
    margin-bottom: 20px;
}

.rx-confirm-actions {
    display: flex;
    gap: 8px;
}

.rx-confirm-actions > * {
    flex: 1;
    justify-content: center;
    height: 40px;
}

.rx-btn-solid-danger {
    background: var(--afropin-error);
    border-color: var(--afropin-error);
    color: var(--afropin-white);
}

.rx-btn-solid-danger:hover {
    background: var(--afropin-error-hover);
    border-color: var(--afropin-error-hover);
}

@media (max-width: 767px) {
    .rx-head.tpl-grid,
    .rx-head.cat-grid {
        display: none;
    }

    .rx-row.tpl-grid,
    .rx-row.cat-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .rx-row.tpl-grid .rx-action,
    .rx-row.cat-grid .rx-action {
        text-align: left;
    }
}

/* Revenue: customer cards (brands / resellers) */
.rev-stats .cust-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 19px;
    /* One neutral tile for every account type, like the KPI icons: colour is kept for status */
    color: var(--brand-navy);
    background: var(--brand-cream);
    border: 1px solid var(--afropin-hairline-2);
}

.rev-stats .cust-stack {
    display: flex;
    gap: 2px;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--brand-cream-deep);
}

.rev-stats .cust-stack span {
    display: block;
    height: 100%;
}

.rev-stats .cust-key {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* Verified reads as success, review as warning, unverified stays neutral */
.rev-stats .is-verified {
    background: var(--afropin-success);
}

.rev-stats .is-review {
    background: var(--afropin-warning);
}

.rev-stats .is-none {
    background: var(--afropin-dot-gray);
}

.rev-stats .cust-foot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--afropin-hairline-2);
}

.rev-stats .cust-foot-label {
    display: block;
    font-size: 11px;
    color: var(--afropin-text-mute2);
    margin-bottom: 4px;
    white-space: nowrap;
}

.rev-stats .cust-foot-label i {
    font-size: 11px;
    margin-right: 2px;
}

.rev-stats .cust-foot-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--afropin-text);
    font-variant-numeric: tabular-nums;
}

.rev-stats .cust-foot-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-coral-ink);
    white-space: nowrap;
}

.rev-stats .cust-foot-link:hover {
    color: var(--brand-navy);
}

@media (max-width: 575.98px) {
    .rev-stats .cust-foot {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rev-stats .cust-foot-link {
        grid-column: 1 / -1;
    }
}

/* rx-segment items that navigate (links) look like the button items */
.rx-segment a {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--afropin-text-mute2);
    white-space: nowrap;
    text-decoration: none;
    transition: all .15s;
}

.rx-segment a:hover {
    color: var(--afropin-text);
}

.rx-segment a.active {
    background: var(--afropin-white);
    color: var(--afropin-text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

/* ============================================================
   Countries & currencies (livewire/admin/country, livewire/admin/currency)
   ============================================================ */
.rx-head.country-grid,
.rx-row.country-grid {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, .8fr) 230px;
}

.rx-head.cur-grid,
.rx-row.cur-grid {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) minmax(0, .8fr) 290px;
}

.rx-head.bal-grid,
.rx-row.bal-grid {
    grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) 210px;
}

.rx-head.trx-grid,
.rx-row.trx-grid {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1.2fr) 100px;
}

.rx-flag,
.rx-flag.fi {
    /* .fi from flag-icons (loaded after this file) sets a 4:3 width; force a true circle */
    display: block;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    line-height: 1;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--afropin-hairline-2);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--afropin-shadow) 6%, transparent);
}

.rx-flag.fi::before {
    content: none;
}

.rx-flag-lg,
.rx-flag.fi.rx-flag-lg {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
}

.rx-cell-label {
    display: none;
    font-size: 11px;
    color: var(--afropin-text-mute2);
    margin-bottom: 2px;
}

.rx-amount {
    font-size: 13px;
    font-weight: 700;
    color: var(--afropin-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rx-amount small {
    font-size: 11px;
    font-weight: 600;
    color: var(--afropin-text-mute2);
}

.rx-amount-credit {
    color: var(--afropin-success-ink);
}

.rx-amount-muted {
    color: var(--afropin-text-mute2);
    font-weight: 600;
}

.rx-dir {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 15px;
}

.rx-dir-credit {
    color: var(--afropin-success-ink);
    background: var(--afropin-success-bg);
}

.rx-dir-debit {
    color: var(--afropin-text-prose);
    background: var(--brand-cream-deep);
}

.rx-dot-success {
    background: var(--afropin-success);
}

.rx-pill-failed {
    border-color: var(--afropin-error-soft);
    background: var(--afropin-error-bg);
    color: var(--afropin-error);
}

.rx-pill-alert .rx-dot,
.rx-pill-failed .rx-dot {
    background: var(--afropin-error);
}

.rx-date {
    font-size: 12px;
    color: var(--afropin-text-prose);
    white-space: nowrap;
}

.rx-date small {
    display: block;
    font-size: 11px;
    color: var(--afropin-text-mute2);
}

.rx-input-date {
    min-width: 210px;
    cursor: pointer;
}

/* Page header card for a single currency */
.rx-profile {
    background: var(--afropin-white);
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 14px;
    margin-bottom: 20px;
    overflow: hidden;
}

.rx-profile-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 22px;
}

.rx-profile-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--afropin-text);
    line-height: 1.2;
}

.rx-profile-sub {
    font-size: 12px;
    color: var(--afropin-text-mute2);
    margin-top: 3px;
}

.rx-profile .rx-stats {
    border: 0;
    border-top: 1px solid var(--afropin-hairline-2);
    border-radius: 0;
    margin-bottom: 0;
}

.rx-profile-nav {
    padding: 10px 16px;
    border-top: 1px solid var(--afropin-hairline-2);
    background: var(--brand-cream);
}

/* Settings form card */
.rx-form-card {
    background: var(--afropin-white);
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 14px;
    overflow: hidden;
}

.rx-form-card .rx-section {
    padding: 22px 24px;
}

.rx-form-card .rx-section-desc {
    font-size: 12px;
    color: var(--afropin-text-mute2);
    margin: -8px 0 16px;
}

.rx-form-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--afropin-hairline-2);
    background: var(--brand-cream);
}

.rx-field .input-group-text {
    border: 1px solid var(--afropin-hairline-2);
    background: var(--brand-cream-deep);
    color: var(--afropin-text-mute2);
    font-size: 12px;
    font-weight: 600;
}

.rx-switch {
    flex-shrink: 0;
    margin: 0;
}

.rx-switch .form-check-input {
    width: 40px;
    height: 22px;
    cursor: pointer;
}

@media (max-width: 1199px) {
    .rx-head.cur-grid,
    .rx-head.bal-grid,
    .rx-head.trx-grid {
        display: none;
    }

    .rx-row.cur-grid,
    .rx-row.bal-grid,
    .rx-row.trx-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .rx-row.cur-grid > :first-child,
    .rx-row.bal-grid > :first-child,
    .rx-row.trx-grid > :first-child,
    .rx-row.cur-grid .rx-action,
    .rx-row.bal-grid .rx-action,
    .rx-row.trx-grid .rx-action {
        grid-column: 1 / -1;
        text-align: left;
    }

    .rx-row.cur-grid .rx-cell-label,
    .rx-row.bal-grid .rx-cell-label,
    .rx-row.trx-grid .rx-cell-label {
        display: block;
    }
}

@media (max-width: 767px) {
    .rx-head.country-grid {
        display: none;
    }

    .rx-row.country-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .rx-row.country-grid .rx-action {
        text-align: left;
    }
}

/* ============================================================
   Brand / reseller accounts (livewire/admin/users/*)
   ============================================================ */
.rx-avatar.rx-avatar-lg {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 19px;
}

/* Many account tabs: keep them on one line and scroll sideways */
.rx-tabs-scroll .rx-segment {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.rx-tabs-scroll .rx-segment a {
    flex-shrink: 0;
}

.rx-dropdown {
    min-width: 230px;
}

.rx-dropdown .rev-menu__item {
    font-size: 13px;
    font-weight: 600;
    color: var(--afropin-text);
}

.rx-dropdown .rev-menu__item.tone-danger,
.rx-dropdown .rev-menu__item.tone-danger i {
    color: var(--afropin-error) !important;
}

.rx-dropdown .rev-menu__item i {
    width: 18px;
    font-size: 14px;
}

.rx-head.acct-grid,
.rx-row.acct-grid {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr) 150px;
}

@media (max-width: 1199px) {
    .rx-head.acct-grid {
        display: none;
    }

    .rx-row.acct-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .rx-row.acct-grid > :first-child,
    .rx-row.acct-grid .rx-action {
        grid-column: 1 / -1;
        text-align: left;
    }

    .rx-row.acct-grid .rx-cell-label {
        display: block;
    }
}

/* ============================================================
   Select controls (rx-input / rev-control used as <select>)
   The chevron is an inline SVG; data URIs can't read CSS variables, so its
   stroke is --afropin-text-mute2 (#4F576B) written out.
   ============================================================ */
select.rx-input,
select.rev-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 34px;
    min-width: 0;
    padding: 0 32px 0 12px;
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 9px;
    background-color: var(--afropin-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234F576B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--afropin-text);
    line-height: 32px;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

select.rev-control {
    height: 40px;
    line-height: 38px;
    border-radius: 10px;
    background-color: var(--brand-cream);
}

select.rx-input:hover,
select.rev-control:hover {
    border-color: var(--afropin-dot-gray);
}

select.rx-input:focus,
select.rev-control:focus {
    outline: 0;
    border-color: var(--brand-coral-strong);
    box-shadow: 0 0 0 3px rgba(255, 107, 91, .15);
}

/* Resting on its empty "Any …" option: read as a placeholder */
select.rx-input:has(option[value=""]:checked),
select.rev-control:has(option[value=""]:checked) {
    color: var(--afropin-text-mute2);
    font-weight: 500;
}

/* A filter that is switched on: tinted so active filters are easy to spot */
select.rx-input:has(option[value=""]):not(:has(option[value=""]:checked)),
select.rev-control:has(option[value=""]):not(:has(option[value=""]:checked)) {
    color: var(--brand-navy);
    border-color: var(--brand-navy);
    background-color: var(--brand-navy-soft);
}

select.rx-input option,
select.rev-control option {
    color: var(--afropin-text);
    font-weight: 500;
    background: var(--afropin-white);
}

select.rx-input::-ms-expand,
select.rev-control::-ms-expand {
    display: none;
}

/* Keep long option labels from stretching the toolbar */
.rx-toolbar-filters select.rx-input {
    max-width: 220px;
}

@media (max-width: 767px) {
    .rx-toolbar-filters select.rx-input {
        max-width: none;
    }
}

/* ============================================================
   Settings pages (admin/settings/*, partials/admin/*)
   Section = intro column (title + description) beside its form card.
   ============================================================ */
.set-section {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 32px;
    padding: 28px 0;
    border-top: 1px solid var(--afropin-hairline-2);
}

.set-section:first-child {
    border-top: 0;
    padding-top: 4px;
}

.set-intro-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--afropin-text);
    margin-bottom: 6px;
}

.set-intro-desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--afropin-text-mute2);
    margin: 0;
}

.set-intro-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--brand-coral-ink);
    background: var(--brand-coral-soft);
    border: 1px solid var(--brand-coral-border);
}

.set-section .rx-form-card + .rx-form-card {
    margin-top: 16px;
}

/* Settings sections post plain HTML forms: style the native controls the same as rx fields */
.rx-form-card .rx-field .form-control,
.rx-form-card .rx-field .form-select {
    min-height: 40px;
}

.rx-form-card .rx-field textarea.form-control {
    min-height: 0;
}

.rx-form-card .rx-field .select2-container .select2-selection {
    border: 1px solid var(--afropin-hairline-2);
    background-color: var(--brand-cream);
    border-radius: 9px;
    min-height: 40px;
}

.rx-code {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px !important;
}

.rx-copy-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    border-radius: 9px;
    background: var(--brand-cream);
    border: 1px dashed var(--afropin-input-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--afropin-text);
    word-break: break-all;
}

.rx-copy-field .rx-icon-btn {
    flex-shrink: 0;
    margin-left: auto;
    width: 30px;
    height: 30px;
}

.rx-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: rx-step;
}

.rx-steps li {
    position: relative;
    padding: 0 0 12px 34px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--afropin-text-prose);
    counter-increment: rx-step;
}

.rx-steps li::before {
    content: counter(rx-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--afropin-white);
    background: var(--brand-navy);
}

.rx-qr {
    display: inline-block;
    padding: 10px;
    border-radius: 12px;
    background: var(--afropin-white);
    border: 1px solid var(--afropin-hairline-2);
}

.rx-qr img {
    display: block;
    width: 140px;
    height: 140px;
}

/* Callouts: the colour says what kind of message it is, the same everywhere.
   rx-callout          info: how something works, a status, a tip (cream, navy icon)
   rx-callout-success  something is done or confirmed (delivered, code sent)
   rx-callout-warning  needs attention: blocked, missing setup, shown once, can't be undone
   rx-callout-danger   an error or a security alert: failed, declined, suspended, locked, watch list */
.rx-callout {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--afropin-text-prose);
    background: var(--brand-cream);
    border: 1px solid var(--afropin-hairline-2);
}

.rx-callout i {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--brand-navy);
}

.rx-callout-success {
    color: var(--afropin-success-ink);
    background: var(--afropin-success-bg);
    border-color: var(--afropin-success-border);
}

.rx-callout-success i {
    color: var(--afropin-success);
}

.rx-callout-warning {
    color: var(--afropin-warning-text);
    background: var(--afropin-warning-bg);
    border-color: var(--afropin-warning-border);
}

.rx-callout-warning i {
    color: var(--afropin-warning);
}

.rx-callout-danger {
    color: var(--afropin-error-hover);
    background: var(--afropin-error-bg);
    border-color: var(--afropin-error-border);
}

.rx-callout-danger i {
    color: var(--afropin-error);
}

.rx-callout a:not([class*="btn"]) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 991px) {
    .set-section {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px 0;
    }
}

/* Ticket conversation (livewire/admin/ticket/admin-reply) */
.rx-thread { display: flex; flex-direction: column; gap: 14px; max-height: 420px; overflow-y: auto; padding: 4px 2px 8px; }
.rx-msg { display: flex; flex-direction: column; max-width: 88%; }
.rx-msg-customer { align-self: flex-start; align-items: flex-start; }
.rx-msg-staff { align-self: flex-end; align-items: flex-end; }
.rx-msg-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; }
.rx-msg-staff .rx-msg-meta { flex-direction: row-reverse; }
.rx-msg-avatar { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--brand-coral-ink); background: var(--brand-coral-soft); border: 1px solid var(--brand-coral-border); }
.rx-msg-staff .rx-msg-avatar { color: var(--afropin-white); background: var(--brand-navy); border-color: var(--brand-navy); }
.rx-msg-author { font-weight: 700; color: var(--afropin-text); }
.rx-msg-time { color: var(--afropin-text-mute2); }
.rx-msg-bubble { padding: 10px 14px; font-size: 13px; line-height: 1.55; color: var(--afropin-text); border-radius: 12px; border: 1px solid var(--afropin-hairline-2); word-break: break-word; }
.rx-msg-customer .rx-msg-bubble { background: var(--brand-cream); border-top-left-radius: 4px; }
.rx-msg-staff .rx-msg-bubble { background: var(--brand-navy-soft); border-color: var(--brand-navy-soft); border-top-right-radius: 4px; }

/* Messages: unread marker (coral = brand accent for "needs attention") */
.rx-dot-unread { background: var(--brand-coral); }
.rx-row-unread .rx-name { font-weight: 700; color: var(--afropin-text); }
.rx-row-unread { background: var(--afropin-white); box-shadow: inset 3px 0 0 var(--brand-coral); }
/* Sent HTML email preview */
.rx-email-frame { display: block; width: 100%; min-height: 420px; border: 1px solid var(--afropin-hairline-2); border-radius: 12px; background: var(--afropin-white); }

/* Tabs on pages without a list card (settings): a slim white card bar so the
   segment reads exactly as it does inside a list toolbar (Staff, Countries…) */
.rx-card-tabs {
    margin-bottom: 20px;
}

.rx-card-tabs .rx-toolbar {
    border-bottom: 0;
}

/* Profile card tab strip (account, currency, PIN headers): white like a list toolbar */
.rx-profile-nav {
    background: var(--afropin-white);
    padding: 14px 20px;
}

/* Dashboard: "Needs attention" action tiles */
.att-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.att-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--afropin-white);
    border: 1px solid var(--afropin-hairline-2);
    color: var(--afropin-text);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.att-tile:hover {
    color: var(--afropin-text);
    border-color: var(--afropin-dot-gray);
    box-shadow: 0 .5rem 1.25rem color-mix(in srgb, var(--afropin-shadow) 5%, transparent);
}

.att-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 17px;
    color: var(--afropin-text-prose);
    background: var(--brand-cream-deep);
}

.att-body {
    flex: 1;
    min-width: 0;
}

.att-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--afropin-text);
}

.att-desc {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--afropin-text-mute2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-count {
    flex-shrink: 0;
    min-width: 34px;
    padding: 4px 10px;
    border-radius: 999px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--afropin-text-mute2);
    background: var(--brand-cream);
}

.att-arrow {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--afropin-text-mute2);
}

/* Something is waiting: coral accent so it stands out from the all-clear tiles */
.att-tile.is-waiting {
    border-color: var(--brand-coral-border);
    box-shadow: inset 3px 0 0 var(--brand-coral);
}

.att-tile.is-waiting .att-icon {
    color: var(--brand-coral-ink);
    background: var(--brand-coral-soft);
}

.att-tile.is-waiting .att-count {
    color: var(--afropin-white);
    background: var(--brand-navy);
}

@media (max-width: 1199px) {
    .att-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .att-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   Admin sidebar (livewire/admin/menu)
   ============================================================ */
.side-nav-section + .side-nav-section {
    margin-top: 14px;
}

.side-nav-heading {
    padding: 0 14px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--afropin-text-mute2);
}

.side-nav .menu-item {
    padding: 0;
}

.side-nav .side-nav-link {
    position: relative;
    gap: 2px;
    padding: 10px 12px;
    margin: 1px 0;
    border-radius: 10px;
    transition: background-color .15s ease, color .15s ease;
}

.side-nav .side-nav-link .menu-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-navy);
}

.side-nav .side-nav-link .menu-icon {
    width: 26px;
    margin-right: 6px;
}

.side-nav .side-nav-link:hover:not(.active) {
    background: var(--brand-cream);
}

.side-nav .side-nav-link:hover:not(.active) .menu-title {
    color: var(--afropin-text);
}

/* Active: a cream surface on the white sidebar and a bold title; icons stay navy (the id beats the base layer's
   coral-soft .menu-state-icon-primary rule and the coral .text-menu hover rule, both !important) */
#app-sidebar .side-nav .side-nav-link.active {
    background: var(--brand-cream) !important;
}

.side-nav .side-nav-link.active .menu-title {
    color: var(--brand-navy) !important;
    font-weight: 700;
}

#app-sidebar .side-nav .text-menu {
    color: var(--brand-navy) !important;
    font-size: 18px !important;
    line-height: 1;
}

/* The admin sidebar has no account row: no divider over an empty footer */
#app-sidebar-foot:empty {
    display: none;
}

.side-nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--afropin-white);
    background: var(--brand-navy);
}

.side-nav .side-nav-link.active .side-nav-badge {
    background: var(--brand-coral-ink);
}

/* Admin sidebar: collapsible groups (native <details>) */
.side-nav-group {
    margin-top: 4px;
}

.side-nav-summary {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color .15s ease;
}

.side-nav-summary::-webkit-details-marker {
    display: none;
}

.side-nav-summary .menu-icon {
    width: 26px;
    margin-right: 6px;
    display: inline-flex;
}

.side-nav-summary-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-navy);
}

.side-nav-summary:hover {
    background: var(--brand-cream);
}

.side-nav-summary:focus-visible {
    outline: 2px solid var(--brand-coral-strong);
    outline-offset: 1px;
}

.side-nav-chevron {
    margin-left: 6px;
    font-size: 11px;
    color: var(--afropin-text-mute2);
    transition: transform .2s ease;
}

.side-nav-group[open] > .side-nav-summary .side-nav-chevron {
    transform: rotate(180deg);
}

/* The group holding the current page: bold title, even when collapsed */
.side-nav-group.has-active > .side-nav-summary .side-nav-summary-title {
    color: var(--brand-navy);
    font-weight: 700;
}

/* The group total only matters while the group is closed; open groups show per-link badges */
.side-nav-group[open] > .side-nav-summary .side-nav-badge-group {
    display: none;
}

.side-nav-children {
    position: relative;
    margin: 2px 0 6px 25px;
    padding-left: 12px;
    border-left: 1px solid var(--afropin-hairline-2);
}

.side-nav .side-nav-link.side-nav-child {
    padding: 7px 10px;
}

.side-nav .side-nav-link.side-nav-child .menu-title {
    font-size: 12.5px;
    font-weight: 500;
}

.side-nav .side-nav-link.side-nav-child.active .menu-title {
    font-weight: 700;
}

/* ============================================================
   Auth pages (resources/views/auth/*, livewire/auth/*)
   Ported from moneygraph's rm-* flow, on the afropin brand tokens:
   white page, sticky top bar, one centred form column, navy actions.
   ============================================================ */
body.rm-body {
    background: var(--afropin-white) !important;
}

.rm-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--afropin-white);
    overflow-x: clip;
}

.rm-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 14px 28px;
    background: var(--afropin-white);
    border-bottom: 1px solid var(--afropin-hairline-2);
}

.rm-logo {
    display: flex;
    align-items: center;
    justify-self: start;
}

/* !important overrides the admin logo CSS applied inline, which can size the logo per page */
.rm-logo img {
    height: 40px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
}

.rm-close {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--afropin-text-mute2);
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.rm-close:hover {
    background: var(--brand-cream);
    color: var(--afropin-text);
}

.rm-close i {
    color: inherit;
}

.rm-main {
    flex: 1;
    padding: 56px 24px 0;
}

.rm-form {
    max-width: 460px;
    margin: 0 auto;
}

.rm-form-wide {
    max-width: 620px;
}

.rm-head {
    margin-bottom: 28px;
}

.rm-head-center {
    text-align: center;
}

.rm-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    font-size: 22px;
    color: var(--brand-coral-ink);
    background: var(--brand-coral-soft);
    border: 1px solid var(--brand-coral-border);
}

.rm-icon-success {
    color: var(--afropin-success-ink);
    background: var(--afropin-success-bg);
    border-color: var(--afropin-success-border);
}

.rm-icon-danger {
    color: var(--afropin-error);
    background: var(--afropin-error-bg);
    border-color: var(--afropin-error-soft);
}

.rm-icon-navy {
    color: var(--afropin-white);
    background: var(--brand-navy);
    border-color: var(--brand-navy);
}

.rm-eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--afropin-text-mute2);
    margin-bottom: 6px;
}

.rm-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--afropin-text-mute2);
    text-decoration: none;
    cursor: pointer;
}

.rm-back:hover {
    color: var(--afropin-text);
}

.rm-back i {
    color: inherit;
}

.rm-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--afropin-text);
    margin-bottom: 8px;
}

.rm-subtitle {
    font-size: 14px;
    line-height: 1.55;
    color: var(--afropin-text-mute2);
    margin: 0;
}

.rm-subtitle strong {
    color: var(--afropin-text);
}

.rm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
}

.rm-grid-full {
    grid-column: 1 / -1;
}

.rm-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--afropin-text-prose);
    margin-bottom: 7px;
}

.rm-input,
.rm-input.form-control,
.rm-input.form-select {
    height: 46px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--afropin-text);
    background-color: var(--afropin-white);
    border: 1px solid var(--afropin-input-border);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

.rm-input:focus {
    border-color: var(--brand-navy);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--afropin-shadow) 10%, transparent);
    outline: 0;
}

.rm-input::placeholder {
    color: var(--afropin-text-placeholder);
}

.rm-input.is-invalid,
.rm-field-invalid .rm-input {
    border-color: var(--afropin-error);
}

/* One-time code: big, spaced digits */
.rm-input-code {
    height: 58px !important;
    text-align: center;
    font-size: 24px !important;
    font-weight: 700;
    letter-spacing: .5em;
    padding-left: calc(14px + .5em) !important;
    font-variant-numeric: tabular-nums;
}

.rm-input-icon {
    position: relative;
}

.rm-input-icon > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--afropin-text-mute2);
    pointer-events: none;
}

.rm-input-icon > .rm-input {
    padding-left: 40px;
}

.rm-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--afropin-text-mute2);
    cursor: pointer;
}

.rm-password-toggle:hover {
    background: var(--brand-cream);
    color: var(--afropin-text);
}

.rm-hint {
    display: block;
    font-size: 12px;
    color: var(--afropin-text-mute2);
    margin-top: 6px;
}

.rm-error {
    display: block;
    font-size: 12px;
    color: var(--afropin-error);
    margin-top: 6px;
}

.rm-link {
    font-weight: 600;
    color: var(--brand-coral-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rm-link:hover {
    color: var(--brand-navy);
}

.rm-link[disabled],
.rm-link.is-disabled {
    opacity: .5;
    pointer-events: none;
}

.rm-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 12px;
    background: var(--brand-cream);
    cursor: pointer;
    margin: 0;
}

.rm-toggle .form-check-input {
    margin: 2px 0 0;
}

.rm-toggle-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--afropin-text);
}

.rm-toggle-desc {
    display: block;
    font-size: 12px;
    color: var(--afropin-text-mute2);
    margin-top: 2px;
}

.rm-note {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--afropin-text-prose);
    background: var(--brand-cream);
    border: 1px solid var(--afropin-hairline-2);
}

.rm-note i {
    flex-shrink: 0;
    font-size: 15px;
    color: var(--afropin-text-mute2);
}

.rm-note-warning {
    color: var(--afropin-warning-text);
    background: var(--afropin-warning-bg);
    border-color: rgba(245, 158, 11, .35);
}

.rm-note-warning i {
    color: var(--afropin-warning);
}

.rm-note-danger {
    color: var(--afropin-error);
    background: var(--afropin-error-bg);
    border-color: var(--afropin-error-soft);
}

.rm-note-danger i {
    color: var(--afropin-error);
}

/* Open signup: choosing reseller or corporate */
.rm-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.rm-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 12px;
    background: var(--brand-cream);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.rm-choice:hover,
.rm-choice:focus-visible {
    border-color: var(--brand-coral-strong);
    background: var(--brand-coral-soft);
    outline: none;
}

.rm-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brand-navy);
    color: var(--afropin-white);
    font-size: 18px;
}

.rm-choice-body {
    flex: 1 1 auto;
    min-width: 0;
}

.rm-choice-arrow {
    color: var(--afropin-text-mute2);
}

.rm-footer {
    margin-top: 28px;
    padding-bottom: 24px;
}

.rm-submit,
.rm-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

.rm-submit {
    border: 1px solid var(--brand-navy);
    background: var(--brand-navy);
    color: var(--afropin-white);
}

.rm-submit:hover {
    background: var(--brand-navy-hover);
    border-color: var(--brand-navy-hover);
    color: var(--afropin-white);
}

.rm-submit:disabled {
    opacity: .6;
}

.rm-submit i {
    color: inherit;
}

.rm-secondary {
    margin-top: 10px;
    border: 1px solid var(--afropin-input-border);
    background: var(--afropin-white);
    color: var(--afropin-text-prose);
}

.rm-secondary:hover {
    border-color: var(--afropin-text-placeholder);
    color: var(--afropin-text);
}

.rm-secondary i {
    color: inherit;
}

.rm-meta {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--afropin-text-mute2);
}

.rm-bottom {
    padding: 20px 24px 28px;
    text-align: center;
    font-size: 12px;
    color: var(--afropin-text-mute2);
}

.rm-bottom a {
    color: var(--afropin-text-mute2);
}

.rm-form .iti {
    width: 100%;
}

.rm-form .iti input.rm-input {
    padding-left: 52px;
}

.rm-qr {
    display: inline-block;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--afropin-hairline-2);
    background: var(--afropin-white);
}

.rm-qr img {
    display: block;
    width: 160px;
    height: 160px;
}

.rm-secret {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed var(--afropin-input-border);
    background: var(--brand-cream);
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--afropin-text);
    word-break: break-all;
}

.rm-secret button {
    flex-shrink: 0;
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .rm-topbar {
        grid-template-columns: auto 1fr auto;
        padding: 12px 16px;
    }

    .rm-logo img {
        height: 28px !important;
    }

    .rm-main {
        padding: 32px 16px 0;
    }

    .rm-title {
        font-size: 22px;
    }

    .rm-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Developer docs (resources/views/developer/layout.blade.php)
   Ported from moneygraph's dx-* docs and themed with the brand tokens above.
   ========================================================================== */
.dx {
    --dx-bg: white;
    --dx-subtle: var(--brand-cream);
    --dx-border: var(--brand-cream-line);
    --dx-border-strong: color-mix(in srgb, var(--brand-navy) 22%, white);
    --dx-text: var(--brand-navy);
    --dx-body: color-mix(in srgb, var(--brand-navy) 82%, white);
    --dx-muted: var(--brand-navy-muted);
    --dx-faint: color-mix(in srgb, var(--brand-navy) 40%, white);
    --dx-accent: var(--brand-navy);
    --dx-link: var(--brand-coral-ink);
    --dx-active: var(--brand-navy-soft);
    --dx-code-bg: var(--brand-navy-deep);
    --dx-code-head: var(--brand-navy);
    --dx-code-line: color-mix(in srgb, white 10%, var(--brand-navy));
    --dx-code-text: color-mix(in srgb, white 88%, var(--brand-navy));
    --dx-code-mute: color-mix(in srgb, white 55%, var(--brand-navy));
    --dx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --dx-topbar-h: 60px;
    background: var(--dx-bg) !important;
    color: var(--dx-text);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

.dx a { color: var(--dx-link); }
.dx a:hover { color: var(--brand-navy); }

/* Top bar */
.dx-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--dx-topbar-h);
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    background: color-mix(in srgb, white 92%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--dx-border);
}

.dx-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
.dx-brand img { height: 28px !important; width: auto !important; }
.dx-brand-label { padding-left: 12px; border-left: 1px solid var(--dx-border); font-size: 14px; font-weight: 600; color: var(--dx-text); }

.dx-tabs { display: flex; align-items: stretch; height: 100%; gap: 4px; }
.dx-tab {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dx-muted) !important;
    border-bottom: 2px solid transparent;
    text-decoration: none;
}
.dx-tab:hover { color: var(--dx-text) !important; }
.dx-tab.active { color: var(--dx-text) !important; border-bottom-color: var(--brand-coral); }

.dx-topbar-spacer { flex: 1; }

.dx-search { position: relative; width: 260px; }
.dx-search input {
    width: 100%;
    height: 36px;
    padding: 0 44px 0 34px;
    font-size: 13px;
    color: var(--dx-text);
    background: var(--dx-subtle);
    border: 1px solid var(--dx-border);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, background .15s;
}
.dx-search input:focus { background: var(--dx-bg); border-color: var(--dx-border-strong); }
.dx-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dx-faint); font-size: 13px; }

.dx-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 1px 6px;
    font-family: var(--dx-mono);
    font-size: 11px;
    color: var(--dx-muted);
    background: var(--afropin-white);
    border: 1px solid var(--dx-border);
    border-radius: 4px;
}

.dx-topbar-actions { display: flex; align-items: center; gap: 8px; }

.dx-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--dx-border);
    color: var(--dx-text) !important;
    background: var(--afropin-white);
    text-decoration: none;
    white-space: nowrap;
}
.dx-btn:hover { border-color: var(--dx-border-strong); background: var(--dx-subtle); }
.dx-btn-dark { background: var(--brand-navy); border-color: var(--brand-navy); color: white !important; }
/* Which version a signed-in partner is reading, beside the logo */
.dx-audience { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 4px 10px; border-radius: 999px; background: var(--brand-coral-soft); font-size: 12.5px; font-weight: 600; color: var(--brand-coral-ink); white-space: nowrap; }
/* A visitor's choice of version, reseller or brand (DocsAudience) */
.dx-switch { display: inline-flex; padding: 3px; border: 1px solid var(--dx-border, var(--afropin-hairline-2)); border-radius: 10px; }
.dx-switch a { padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--dx-muted, var(--afropin-text-muted)) !important; text-decoration: none; }
.dx-switch a.active { background: var(--brand-navy); color: var(--afropin-white) !important; }
.dx-btn-dark:hover { background: var(--brand-navy-hover); border-color: var(--brand-navy-hover); }
.dx-btn i { color: inherit; }

.dx-topbar .dx-menu-toggle { display: none; }

/* Shell */
.dx-shell { display: flex; align-items: flex-start; }

.dx-sidebar {
    position: sticky;
    top: var(--dx-topbar-h);
    flex: 0 0 272px;
    width: 272px;
    height: calc(100vh - var(--dx-topbar-h));
    overflow-y: auto;
    padding: 20px 12px 40px 20px;
    border-right: 1px solid var(--dx-border);
    background: var(--afropin-white);
    scrollbar-width: thin;
}

.dx-nav-group + .dx-nav-group { margin-top: 22px; }
.dx-nav-label { padding: 0 0 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dx-muted); }
/* Pages hang off a thin rail down each section; the current one is a coral segment on it, with coral text, no pill */
.dx-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 2px;
    padding: 7px 12px;
    border-left: 1px solid var(--dx-border);
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--dx-body) !important;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}
.dx-nav-link:hover { color: var(--dx-text) !important; border-left-color: var(--dx-border-strong); text-decoration: none; }
.dx-nav-link.active { margin-left: 1px; border-left: 2px solid var(--brand-coral); font-weight: 600; color: var(--brand-coral-ink) !important; }
.dx-nav-link i { font-size: 14px; color: var(--dx-muted); width: 16px; text-align: center; }
.dx-nav-link.active i { color: var(--brand-coral-ink); }
.dx-nav-link[hidden], .dx-nav-group[hidden] { display: none !important; }
.dx-nav-empty { display: none; padding: 8px 10px; font-size: 13px; color: var(--dx-muted); }

/* HTTP methods */
.dx-method {
    display: inline-block;
    flex: 0 0 auto;
    min-width: 46px;
    font-family: var(--dx-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.dx-method-get { color: var(--brand-navy); }
.dx-method-post { color: var(--afropin-success-ink); }
.dx-method-put, .dx-method-patch { color: var(--afropin-warning-text); }
.dx-method-delete { color: var(--afropin-error-hover); }
.dx-method-pill { min-width: 0; padding: 3px 8px; border-radius: 5px; font-size: 11px; }
.dx-method-pill.dx-method-get { background: var(--brand-navy-soft); }
.dx-method-pill.dx-method-post { background: var(--afropin-success-bg); }
.dx-method-pill.dx-method-put, .dx-method-pill.dx-method-patch { background: var(--afropin-warning-bg); }
.dx-method-pill.dx-method-delete { background: var(--afropin-error-bg); }

/* Content */
.dx-main { flex: 1; min-width: 0; }
.dx-main-inner { display: flex; gap: 48px; max-width: 1240px; padding: 40px 48px 64px; }
.dx-content { flex: 1; min-width: 0; }
.dx-area-guide .dx-content { max-width: 780px; }

.dx-toc {
    position: sticky;
    top: calc(var(--dx-topbar-h) + 40px);
    flex: 0 0 200px;
    max-height: calc(100vh - var(--dx-topbar-h) - 80px);
    overflow-y: auto;
    font-size: 13px;
}
.dx-toc-title { margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--dx-text); }
.dx-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--dx-border); }
.dx-toc li a {
    display: block;
    margin-left: -1px;
    padding: 4px 0 4px 12px;
    color: var(--dx-muted) !important;
    border-left: 1px solid transparent;
    text-decoration: none;
    line-height: 1.4;
}
.dx-toc li.dx-toc-sub a { padding-left: 24px; font-size: 12.5px; }
.dx-toc li a:hover { color: var(--dx-text) !important; }
.dx-toc li a.active { color: var(--dx-text) !important; border-left-color: var(--brand-coral); }

.dx-page-header { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--dx-border); }
.dx-eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--brand-coral-ink); }
.dx-page-header h1 { margin: 0 0 10px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--dx-text); }
.dx-lead { margin: 0; max-width: 720px; font-size: 16px; line-height: 1.65; color: var(--dx-muted); }

.dx-page { font-size: 15px; line-height: 1.7; color: var(--dx-body); }
.dx-page p { margin-bottom: 1em; }
.dx-page ul, .dx-page ol { padding-left: 1.25em; margin-bottom: 1.25em; }
.dx-page li { margin-bottom: .4em; }
.dx-page strong { color: var(--dx-text); }

.dx-page h2 {
    margin: 48px 0 12px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--dx-text);
    scroll-margin-top: calc(var(--dx-topbar-h) + 24px);
}
.dx-page h3 {
    margin: 32px 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dx-text);
    scroll-margin-top: calc(var(--dx-topbar-h) + 24px);
}
.dx-page > :first-child,
.dx-page > .row:first-child h3:first-child,
.dx-page .col-xl-7 > h3:first-child,
.dx-page .col-xl-5 > h3:first-child { margin-top: 0; }

.dx :not(pre) > code {
    padding: .1em .35em;
    font-family: var(--dx-mono);
    font-size: .84em;
    line-height: 1.4;
    font-weight: 500;
    color: var(--dx-text);
    background: var(--brand-cream-deep);
    border: 1px solid var(--brand-cream-line);
    border-radius: 5px;
    margin: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    box-shadow: none;
}

/* Code blocks */
.dx-code { margin: 0 0 24px; overflow: hidden; background: var(--dx-code-bg); border: 1px solid var(--dx-code-line); border-radius: 10px; }
.dx-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 8px 0 14px;
    background: var(--dx-code-head);
    border-bottom: 1px solid var(--dx-code-line);
}
.dx-code-lang { font-family: var(--dx-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dx-code-mute); }
/* Docs code blocks have their own copy button in the header: hide Prism's toolbar copy button there */
.dx-code div.code-toolbar > .toolbar { display: none; }
.dx-code-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    color: var(--dx-code-mute);
    background: transparent;
    border: 0;
    border-radius: 6px;
}
.dx-code-copy:hover { color: var(--dx-code-text); background: color-mix(in srgb, white 6%, transparent); }
.dx-code-copy i { color: inherit; font-size: 12px; }

.dx pre[class*=language-],
.dx-code pre {
    margin: 0 !important;
    padding: 16px 18px !important;
    max-height: 560px;
    overflow: auto;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.dx code[class*=language-],
.dx pre[class*=language-],
.dx-code pre > code {
    font-family: var(--dx-mono) !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    color: var(--dx-code-text) !important;
    background: transparent !important;
    text-shadow: none !important;
    white-space: pre !important;
    word-break: normal !important;
}
.dx .token.property { color: var(--brand-coral-tint); }
.dx .token.string { color: var(--afropin-success-border); }
.dx .token.number, .dx .token.boolean { color: var(--afropin-warning); }
.dx .token.null, .dx .token.keyword { color: var(--brand-coral); }
 .dx .token.operator { color: var(--dx-code-mute); }
.dx .token.comment { color: var(--brand-navy-muted); }
.dx .token.function { color: var(--brand-coral-border); }

.dx-code-group { margin-bottom: 24px; }
.dx-code-tabs { display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: none; }
.dx-code-tabs::-webkit-scrollbar { display: none; }
.dx-code-tab { background: none; border: 0; padding: 10px 0 9px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 12.5px; font-weight: 500; color: var(--dx-code-mute); white-space: nowrap; cursor: pointer; }
.dx-code-tab:hover { color: var(--dx-code-text); }
.dx-code-tab.active { color: white; border-bottom-color: var(--brand-coral); }
.dx-code-group > .dx-code-head { align-items: stretch; }
.dx-code-group > .dx-code-head .dx-code-copy { align-self: center; flex-shrink: 0; }
.dx-code-group pre[hidden] { display: none !important; }
.dx-page .row.dx-row-stack > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

/* Endpoint header */
.dx-endpoint {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 10px 10px 14px;
    background: var(--dx-subtle);
    border: 1px solid var(--dx-border);
    border-radius: 10px;
}
.dx-endpoint-url { flex: 1; min-width: 0; font-family: var(--dx-mono); font-size: 13.5px; color: var(--dx-text); word-break: break-all; }
.dx-endpoint-url span { color: var(--dx-faint); }

.dx-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--dx-muted);
    background: var(--afropin-white);
    border: 1px solid var(--dx-border);
    border-radius: 7px;
}
.dx-icon-btn:hover { color: var(--dx-text); border-color: var(--dx-border-strong); }
.dx-icon-btn i { color: inherit; font-size: 13px; }

.dx-auth-note { margin: 0 0 36px; font-size: 13px; color: var(--dx-muted); }
.dx-auth-note i { color: var(--dx-faint); margin-right: 4px; }
.dx-auth-note:has(+ .dx-sdk-calls) { margin-bottom: 16px; }

/* The same call through each SDK, under the endpoint */
.dx-sdk-calls { margin: 0 0 36px; border: 1px solid var(--dx-border); border-radius: 10px; overflow: hidden; }
.dx-sdk-calls-head { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--dx-border); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dx-muted); text-decoration: none; }
.dx-sdk-calls-head:hover { color: var(--dx-text); }
.dx-sdk-call { display: flex; align-items: baseline; gap: 14px; padding: 8px 14px; font-size: 13px; }
.dx-sdk-call + .dx-sdk-call { border-top: 1px solid var(--dx-border); }
.dx-sdk-call span { flex: 0 0 64px; color: var(--dx-muted); }
.dx-sdk-call code { min-width: 0; overflow-wrap: anywhere; background: none; padding: 0; color: var(--dx-text); }
.dx-sdk-install { margin: 0 0 24px; }
.dx-sdk-install td:first-child { white-space: nowrap; }

/* Parameters */
.dx-section-title { margin: 0 0 4px !important; font-size: 15px; font-weight: 600; color: var(--dx-text); }
.dx-params { margin: 0 0 36px; border-top: 1px solid var(--dx-border); }
.dx-param { padding: 14px 0; border-bottom: 1px solid var(--dx-border); }
.dx-param-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.dx-param-name { font-family: var(--dx-mono); font-size: 13.5px; font-weight: 600; color: var(--dx-text); }
.dx-param-type { font-family: var(--dx-mono); font-size: 12px; color: var(--dx-muted); }
.dx-param-req { font-size: 11.5px; font-weight: 600; color: var(--brand-coral-ink); }
.dx-param-cond { font-size: 11.5px; font-weight: 600; color: var(--afropin-warning-text); }
.dx-param-opt { font-size: 11.5px; color: var(--dx-faint); }
.dx-param-chip { padding: 0 6px; font-family: var(--dx-mono); font-size: 11.5px; color: var(--dx-muted); background: var(--dx-subtle); border: 1px solid var(--dx-border); border-radius: 4px; }
.dx-page .dx-param-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dx-muted); }

/* Notes (rm-note from the auth pages, restyled for long-form reading) */
.dx-page .rm-note {
    gap: 12px;
    margin: 0 0 28px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--dx-body);
    background: var(--dx-subtle);
    border: 1px solid var(--dx-border);
    border-left: 3px solid var(--brand-navy-muted);
    border-radius: 8px;
}
.dx-page .rm-note i { margin-top: 3px; color: var(--dx-muted); }
.dx-page .rm-note-title { font-weight: 600; color: var(--dx-text); }
.dx-page .rm-note-tip { background: var(--brand-coral-soft); border-color: var(--brand-coral-border); border-left-color: var(--brand-coral); }
.dx-page .rm-note-tip i { color: var(--brand-coral-ink); }
.dx-page .rm-note-warning { color: var(--afropin-warning-text); background: var(--afropin-warning-bg); border-left-color: var(--afropin-warning); }
.dx-page .rm-note-warning i { color: var(--afropin-warning-text); }
.dx-page .rm-note-danger { color: var(--afropin-error-hover); background: var(--afropin-error-bg); border-color: var(--afropin-error-soft); border-left-color: var(--afropin-error); }
.dx-page .rm-note-danger i { color: var(--afropin-error); }

/* Tables */
.dx-table-wrap { border: 1px solid var(--dx-border); border-radius: 10px; margin-bottom: 28px; overflow-x: auto; }
.dx-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; }
.dx-table th, .dx-table td { padding: 10px 12px; vertical-align: top; text-align: left; border-top: 1px solid var(--dx-border); }
.dx-table thead th { border-top: 0; background: var(--dx-subtle); font-size: 12px; font-weight: 600; color: var(--dx-muted); }
.dx-table td:first-child, .dx-table th:first-child { white-space: nowrap; }
.dx-table td:first-child code { white-space: nowrap; }
.dx-table td { color: var(--dx-body); }

/* Definition lists (headers, fields, statuses) */
.dx-defs { border: 1px solid var(--dx-border); border-radius: 8px; margin: 0 0 24px; }
.dx-def { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; column-gap: 24px; padding: 12px 16px; font-size: 14px; line-height: 1.6; }
.dx-def + .dx-def { border-top: 1px solid var(--dx-border); }
.dx-defs-wide .dx-def { grid-template-columns: 190px 1fr; }
.dx-def-term { font-weight: 600; color: var(--dx-text); white-space: nowrap; }
.dx-def-term code { white-space: nowrap; }
.dx-def-desc { color: var(--dx-muted); min-width: 0; }

/* Status badges inside docs */
.dx-badge { display: inline-block; padding: 2px 7px; font-family: var(--dx-mono); font-size: 11px; font-weight: 600; border-radius: 5px; color: var(--dx-muted); background: var(--dx-subtle); border: 1px solid var(--dx-border); }
.dx-badge-success { color: var(--afropin-success-ink); background: var(--afropin-success-bg); border-color: var(--afropin-success-border); }
.dx-badge-warning { color: var(--afropin-warning-text); background: var(--afropin-warning-bg); border-color: color-mix(in srgb, var(--afropin-warning) 35%, white); }
.dx-badge-danger { color: var(--afropin-error-hover); background: var(--afropin-error-bg); border-color: var(--afropin-error-soft); }

/* Numbered steps in tutorials */
.dx-steps { list-style: none; counter-reset: dx-step; padding: 0 !important; margin: 0 0 32px; }
.dx-steps > li { position: relative; counter-increment: dx-step; padding: 0 0 4px 44px; margin: 0 0 20px; }
.dx-steps > li::before {
    content: counter(dx-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dx-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-navy);
    background: var(--brand-cream);
    border: 1px solid var(--brand-cream-line);
    border-radius: 50%;
}
.dx-steps > li > h3:first-child { margin-top: 3px; }

/* Errors */
.dx-page .dx-errors-intro { font-size: 13px; color: var(--dx-muted); margin-bottom: 12px; }
.dx-errors { border: 1px solid var(--dx-border); border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.dx-error-row { display: grid; grid-template-columns: 44px minmax(0, auto) 1fr; gap: 12px; align-items: baseline; padding: 10px 14px; font-size: 13px; }
.dx-error-row + .dx-error-row { border-top: 1px solid var(--dx-border); }
.dx-error-status { font-family: var(--dx-mono); font-size: 12px; font-weight: 600; color: var(--afropin-warning-text); }
.dx-error-status.dx-error-5xx { color: var(--afropin-error-hover); }
.dx-error-row .dx-error-code { background: none !important; border: 0 !important; padding: 0 !important; color: var(--dx-text) !important; font-weight: 600; }
.dx-error-msg { color: var(--dx-muted); }
.dx-link-more { display: inline-block; font-size: 13px; font-weight: 600; margin-top: 4px; }
.dx-link-more:hover { text-decoration: underline; }

/* Product cards on the introduction */
.dx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 40px; }
.dx-card { display: flex; flex-direction: column; border: 1px solid var(--dx-border); border-radius: 10px; padding: 16px 18px; transition: border-color .15s; }
.dx-card:hover { border-color: var(--dx-border-strong); }
.dx-card-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--dx-text); margin-bottom: 6px; }
.dx-card-title i { font-size: 15px; color: var(--brand-coral-ink); }
.dx-page p.dx-card-desc { font-size: 13px; line-height: 1.55; color: var(--dx-muted); margin-bottom: 12px; flex-grow: 1; }
.dx-card-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dx-card-links a { font-size: 13px; font-weight: 500; }

/* Tab bar and webhook events */

.dx-events { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.dx-events-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; position: sticky; top: calc(var(--dx-topbar-h) + 24px); }
.dx-events-link { display: block; padding: 7px 10px; border-radius: 6px; font-family: var(--dx-mono); font-size: 12.5px; color: var(--dx-muted) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.dx-events-link:hover { color: var(--dx-text) !important; background: var(--dx-subtle); }
.dx-events-link.active { color: var(--dx-text) !important; background: var(--dx-active); font-weight: 600; }
.dx-events-panel > .tab-pane { min-width: 0; }
.dx-event-name { font-family: var(--dx-mono); font-size: 15px; font-weight: 600; color: var(--dx-text); margin-bottom: 4px; }
.dx-page p.dx-event-when { margin-bottom: 14px; }
.dx-page p.dx-event-note { font-size: 13px; color: var(--dx-muted); margin-top: -4px; }
.dx-page p.dx-event-variant { margin: 20px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dx-text); }

.dx-separator { height: 0; margin: 40px 0; border-top: 1px solid var(--dx-border); }

/* Pager and footer */
.dx-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
.dx-pager a { display: block; padding: 14px 16px; border: 1px solid var(--dx-border); border-radius: 10px; text-decoration: none; transition: border-color .15s; }
.dx-pager a:hover { border-color: var(--brand-coral-strong); }
.dx-pager span { display: block; font-size: 12px; color: var(--dx-muted); }
.dx-pager strong { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--dx-text); }
.dx-pager .dx-pager-next { grid-column: 2; text-align: right; }

.dx-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 48px;
    padding-top: 20px;
    font-size: 13px;
    color: var(--dx-muted);
    border-top: 1px solid var(--dx-border);
}
.dx-footer a { color: var(--dx-muted) !important; }

.dx-sidebar-mobile { display: none; margin-bottom: 16px; }

@media (max-width: 1279.98px) {
    .dx-toc { display: none; }
}

@media (max-width: 1199px) {
    .dx-topbar .dx-btn-postman { display: none; }
}

@media (max-width: 991.98px) {
    .dx-topbar { gap: 12px; padding: 0 16px; }
    .dx-tabs, .dx-search, .dx-topbar-actions .dx-btn:not(.dx-btn-dark) { display: none; }
    .dx-topbar .dx-menu-toggle { display: inline-flex; }
    .dx-sidebar {
        position: fixed;
        z-index: 99;
        left: 0;
        top: var(--dx-topbar-h);
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 10px 30px color-mix(in srgb, var(--afropin-shadow) 12%, transparent);
    }
    .dx-sidebar.open { transform: none; }
    .dx-sidebar-mobile { display: block; }
    .dx-main-inner { padding: 28px 16px 48px; }
    .dx-page-header h1 { font-size: 26px; }
    .dx-events { grid-template-columns: 1fr; gap: 12px; }
    .dx-events-list { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .dx-events-link { flex-shrink: 0; }
}

@media (max-width: 767px) {
    .dx-cards { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .dx-error-row { grid-template-columns: 44px 1fr; }
    .dx-error-msg { grid-column: 2; }
    .dx-def, .dx-defs-wide .dx-def { grid-template-columns: 1fr; row-gap: 2px; }
    .dx-pager { grid-template-columns: 1fr; }
    .dx-pager .dx-pager-next { grid-column: 1; }
}

/* Docs code blocks: .dx-code is the frame. Undo the generic "window" frame that custom.css puts on every
   Prism .code-toolbar wrapper (dots, 44px header, border), which otherwise nests a second frame inside it
   and shows hidden tabs as empty boxes. */

.dx .dx-code pre {
    margin: 0 !important;
    padding: 16px 18px !important;
    max-height: 560px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.dx .dx-code pre[hidden] { display: none !important; }


/* ==========================================================================
   User › Developers (resources/views/user/developers.blade.php)
   ========================================================================== */
/* The tab bar scrolls sideways on small screens; overflow clips anything outside it, so the tabs sit
   inside the bar instead of overlapping its bottom border by 2px, which would hide the coral underline */
.nav-line-tabs.nav-line-tabs-2x.dev-tabs .nav-item { margin-bottom: 0; }
.dev-tabs .nav-link.active { font-weight: 600; }

/* --- Statistics tab (livewire/user/developers/statistics) --- */
/* Developers › Statistics (livewire/user/developers/statistics). Brand tokens come from custom.css :root. */
.dev-stats {
    --ds-line: var(--brand-cream-line);
    --ds-muted: var(--brand-navy-muted);
    --ds-text: var(--brand-navy);
}

.dev-stats .tabular,
.dev-stats .ds-kpi-value {
    font-variant-numeric: tabular-nums;
}

/* Range controls */

.dev-stats .spin {
    display: inline-block;
    animation: dev-stats-spin .8s linear infinite;
}

@keyframes dev-stats-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Cards */
.dev-stats .ds-card {
    height: 100%;
    background: var(--afropin-white);
    border: 1px solid var(--ds-line);
    border-radius: 14px;
}

.dev-stats .ds-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 0;
}

.dev-stats .ds-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-text);
}

.dev-stats .ds-card-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ds-muted);
}

.dev-stats .ds-card-body {
    padding: 16px 22px 20px;
}

/* Section header */
.dev-stats .ds-section-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ds-text);
}

.dev-stats .ds-section-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-coral-ink);
}

.dev-stats .ds-section-link:hover {
    color: var(--brand-navy);
}

/* KPI cards */
.dev-stats .ds-kpi {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 22px;
    background: var(--afropin-white);
    border: 1px solid var(--ds-line);
    border-radius: 14px;
    transition: border-color .15s ease;
}

.dev-stats .ds-kpi:hover {
    border-color: var(--brand-navy-muted);
}

.dev-stats .ds-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-muted);
}

.dev-stats .ds-kpi-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: var(--ds-text);
    background: var(--brand-cream);
    border: 1px solid var(--ds-line);
    border-radius: 10px;
}

.dev-stats .ds-kpi-icon i {
    color: inherit;
}

.dev-stats .ds-kpi-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--ds-text);
}

.dev-stats .ds-kpi-foot {
    margin-top: auto;
    padding-top: 10px;
    font-size: 12px;
    color: var(--ds-muted);
}

/* Chips: status, method, change */
.dev-stats .ds-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    border-radius: 6px;
    color: var(--ds-muted);
    background: var(--brand-cream);
    border: 1px solid var(--ds-line);
}

.dev-stats .ds-chip i {
    color: inherit;
}

.dev-stats .ds-chip-code {
    min-width: 48px;
    justify-content: center;
    font-family: var(--bs-font-monospace);
}

.dev-stats .ds-chip-method {
    min-width: 58px;
    justify-content: center;
    font-family: var(--bs-font-monospace);
}

.dev-stats .ds-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.dev-stats .ds-tone-success { color: var(--afropin-success-ink); background: var(--afropin-success-bg); border-color: var(--afropin-success-border); }
.dev-stats .ds-tone-warning { color: var(--afropin-warning-text); background: var(--afropin-warning-bg); border-color: color-mix(in srgb, var(--afropin-warning) 35%, white); }
.dev-stats .ds-tone-danger { color: var(--afropin-error-hover); background: var(--afropin-error-bg); border-color: var(--afropin-error-soft); }
.dev-stats .ds-tone-navy { color: var(--brand-navy); background: var(--brand-navy-soft); border-color: color-mix(in srgb, var(--brand-navy) 15%, white); }
.dev-stats .ds-tone-coral { color: var(--brand-coral-ink); background: var(--brand-coral-soft); border-color: var(--brand-coral-border); }

.dev-stats .ds-text-success { color: var(--afropin-success-ink); }
.dev-stats .ds-text-warning { color: var(--afropin-warning-text); }
.dev-stats .ds-text-danger { color: var(--afropin-error-hover); }
.dev-stats .ds-text-muted { color: var(--ds-muted); }

/* Share bars */
.dev-stats .share-bar {
    --share-bar-color: var(--brand-navy);
    display: block;
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--brand-cream-deep);
    color: var(--share-bar-color);
    -webkit-appearance: none;
    appearance: none;
}

.dev-stats .share-bar.ds-bar-sm {
    width: 60px;
}

.dev-stats .share-bar::-webkit-progress-bar {
    background: var(--brand-cream-deep);
    border-radius: 4px;
}

.dev-stats .share-bar::-webkit-progress-value {
    background: var(--share-bar-color);
    border-radius: 4px;
}

.dev-stats .share-bar::-moz-progress-bar {
    background: var(--share-bar-color);
    border-radius: 4px;
}

.dev-stats .share-bar-navy { --share-bar-color: var(--brand-navy); }
.dev-stats .share-bar-coral { --share-bar-color: var(--brand-coral); }
.dev-stats .share-bar-success { --share-bar-color: var(--afropin-success); }
.dev-stats .share-bar-warning { --share-bar-color: var(--afropin-warning); }
.dev-stats .share-bar-danger { --share-bar-color: var(--afropin-error); }
.dev-stats .share-bar-muted { --share-bar-color: var(--brand-navy-muted); }

/* Lists and tables */
.dev-stats .ds-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.dev-stats .ds-row:last-child {
    margin-bottom: 0;
}

.dev-stats .ds-row-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-text);
}

.dev-stats .ds-row-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-text);
}

.dev-stats .ds-table {
    width: 100%;
    margin: 0;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 13px;
}

.dev-stats .ds-table th {
    padding: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ds-muted);
    border-bottom: 1px solid var(--ds-line);
}

.dev-stats .ds-table td {
    padding: 11px 0;
    color: var(--ds-text);
    border-bottom: 1px dashed var(--ds-line);
}

.dev-stats .ds-table tr:last-child td {
    border-bottom: 0;
}

.dev-stats .ds-table .ds-col-num {
    width: 90px;
    text-align: right;
}

.dev-stats .ds-table .ds-col-rate {
    width: 150px;
    text-align: right;
}

.dev-stats .endpoint-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dev-stats .endpoint-path {
    min-width: 0;
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ds-text);
}

.dev-stats .ds-endpoint {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--ds-line);
}

.dev-stats .ds-endpoint:last-child {
    border-bottom: 0;
}

.dev-stats .ds-separator {
    margin: 16px 0;
    border-top: 1px dashed var(--ds-line);
}

.dev-stats .ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 0;
    text-align: center;
    font-size: 13px;
    color: var(--ds-muted);
}

.dev-stats .ds-empty-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    font-size: 18px;
    color: var(--brand-navy-muted);
    background: var(--brand-cream);
    border-radius: 50%;
}

.dev-stats .ds-empty-icon i {
    color: inherit;
}

.dev-stats .ds-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin: 28px 0 40px;
    font-size: 12px;
    color: var(--ds-muted);
}

.dev-stats .ds-skeleton {
    display: block;
    height: 12px;
    background: var(--brand-cream-deep);
    border-radius: 6px;
}

.dev-stats-legend-count {
    color: var(--brand-navy-muted);
}

@media (max-width: 575.98px) {
    .dev-stats .ds-table .ds-col-num { width: 64px; }
    .dev-stats .ds-table .ds-col-rate { width: 64px; }
}

/* --- API keys, webhooks and logs tabs (partials/developer-logs) --- */
/* ==========================================================================
   Developers dashboard: request history and webhook log viewers
   (resources/views/partials/developer-logs). Ported from moneygraph and
   themed with the brand tokens in custom.css.
   ========================================================================== */

/* The detail panel reuses the docs code block (.dx-code), whose colours come from
   --dx-* variables that the docs set on body.dx; set them here for the dashboard */
.lg-panel {
    --dx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --dx-code-bg: var(--brand-navy-deep);
    --dx-code-head: var(--brand-navy);
    --dx-code-line: color-mix(in srgb, white 10%, var(--brand-navy));
    --dx-code-text: color-mix(in srgb, white 88%, var(--brand-navy));
    --dx-code-mute: color-mix(in srgb, white 55%, var(--brand-navy));
}

.trx-feed, .lg-panel { --dx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }

.lg-panel .dx-code pre,
.lg-panel .dx-code pre[class*=language-] {
    margin: 0 !important;
    padding: 16px 18px !important;
    overflow: auto;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.lg-panel .dx-code code[class*=language-],
.lg-panel .dx-code pre > code {
    font-family: var(--dx-mono) !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: var(--dx-code-text) !important;
    background: transparent !important;
    text-shadow: none !important;
    white-space: pre !important;
    word-break: normal !important;
}

.lg-panel .token.property { color: var(--brand-coral-tint); }
.lg-panel .token.string { color: var(--afropin-success-border); }
.lg-panel .token.number, .lg-panel .token.boolean { color: var(--afropin-warning); }
.lg-panel .token.null, .lg-panel .token.keyword { color: var(--brand-coral); }
 .lg-panel .token.operator { color: var(--dx-code-mute); }

/* Undo the generic Prism "window" frame from custom.css inside the panel (dots, 44px header) */

.trx-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.trx-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 14px;
    background: var(--afropin-white);
    border: 1px solid var(--brand-cream-line);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}

.trx-search:focus-within {
    border-color: color-mix(in srgb, var(--brand-navy) 30%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--afropin-shadow) 5%, transparent);
}

.trx-search i {
    color: var(--afropin-text-mute2);
}

.trx-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
    color: var(--brand-navy);
}

.trx-search input::placeholder {
    color: var(--afropin-text-placeholder);
}

.trx-toolbar-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.trx-toolbar-actions .rx-btn {
    height: 42px;
    border-radius: 10px;
}

.trx-filter-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-navy);
    color: white;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trx-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.trx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 4px 0 10px;
    background: var(--afropin-white);
    border: 1px solid var(--brand-cream-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-navy);
}

.trx-chip-key {
    font-weight: 500;
    color: var(--afropin-text-mute2);
}

.trx-chip button {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--afropin-text-mute2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.trx-chip button:hover {
    background: var(--brand-cream) !important;
    color: var(--brand-navy);
}

.trx-chip-clear {
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-navy-muted);
    padding: 0 6px;
}

.trx-chip-clear:hover {
    color: var(--brand-navy);
    text-decoration: underline;
}

.trx-feed {
    background: var(--afropin-white);
    border: 1px solid var(--brand-cream-line);
    border-radius: 14px;
    overflow: clip;
    transition: opacity .2s ease;
}

.trx-feed-head,
.trx-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 170px 170px 110px;
    align-items: center;
    column-gap: 20px;
    padding: 0 20px;
}

.trx-feed-head {
    height: 40px;
    background: var(--brand-cream) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--afropin-text-mute2);
    border-bottom: 1px solid var(--brand-cream-line);
}

.trx-day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-navy-muted);
    background: var(--brand-cream);
    border-bottom: 1px solid var(--brand-cream-line);
    position: sticky;
    top: 0;
    z-index: 1;
}

.trx-day-count {
    font-weight: 500;
    color: var(--afropin-text-mute2);
}

.trx-row {
    min-height: 68px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--brand-cream-line);
    transition: background-color .15s ease;
}

.trx-row:hover {
    background: var(--brand-cream) !important;
}

.trx-col-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.trx-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trx-sub {
    font-size: 12px;
    color: var(--afropin-text-mute2);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trx-col-action {
    text-align: right;
}

.trx-feed-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    font-size: 12px;
    color: var(--afropin-text-mute2);
}

@media (max-width: 575.98px) {
    .trx-toolbar {flex-wrap: wrap;}
    .trx-search {flex-basis: 100%;}
    .trx-toolbar-actions {width: 100%;}
    .trx-toolbar-actions .rx-btn {flex: 1;
        justify-content: center;}
}

.td-list {
    margin: 0;
}

.td-row {
    display: grid;
    grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--brand-cream) !important;
    font-size: 13px;
    line-height: 1.5;
}

.td-row:last-child {
    border-bottom: 0;
}

.td-row dt {
    font-weight: 400;
    color: var(--brand-navy-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-row dd {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    font-weight: 500;
    color: var(--brand-navy);
    text-align: right;
}

.td-value {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-mono {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

@media (max-width: 767.98px) {
    .td-row {grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 12px 16px;}
    .td-row dd {justify-content: flex-start;
        text-align: left;}
}

.trx-feed-head.lg-grid,
.trx-row.lg-grid {
    grid-template-columns: 96px minmax(0, 1fr) minmax(0, 220px) 110px 96px;
}

.lg-path {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.lg-path-text {
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--dx-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--brand-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trx-row.lg-grid .trx-col-main > div {
    flex: 1 1 auto;
    min-width: 0;
}

.trx-row.lg-grid .lg-path,
.lg-col-source,
.lg-panel-head > div {
    min-width: 0;
}

.lg-col-source .trx-title,
.lg-col-source .trx-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lg-time {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--brand-navy-muted);
}

.lg-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: color-mix(in srgb, var(--brand-navy) 35%, transparent);
}

.lg-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1051;
    display: flex;
    flex-direction: column;
    width: 640px;
    max-width: 100%;
    background: var(--afropin-white);
    border-left: 1px solid var(--brand-cream-line);
    transform: translateX(100%);
    transition: transform .2s ease;
}

.lg-overlay.show {
    display: block;
}

.lg-panel.show {
    transform: none;
}

.lg-panel-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lg-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--brand-cream-line);
}

.lg-panel-title {
    font-family: var(--dx-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-navy);
    overflow-wrap: anywhere;
}

.lg-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px 24px;
}

.lg-panel .td-row {
    padding: 10px 0;
    font-size: 13px;
}

.lg-panel .dx-code {
    margin: 20px 0 16px;
}

.lg-panel .dx-code pre {
    max-height: 420px;
}

.trx-feed,
.rx-card {
    container-type: inline-size;
}

/* ==========================================================================
   User › Settings (livewire/user/settings/index)
   ========================================================================== */
.st-groups { display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.st-group-title { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-navy-muted); }
.st-list { background: var(--afropin-white); border: 1px solid var(--brand-cream-line); border-radius: 14px; overflow: hidden; }
.st-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    text-align: left;
    color: var(--brand-navy);
    background: var(--afropin-white);
    border: 0;
    text-decoration: none;
    transition: background-color .15s ease;
}
.st-item + .st-item { border-top: 1px solid var(--brand-cream-line); }
.st-item:hover, .st-item:focus-visible { background: var(--brand-cream); color: var(--brand-navy); }
.st-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--brand-coral-soft);
    color: var(--brand-coral-ink);
    font-size: 17px;
}
.st-icon i { color: inherit; }
.st-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-title { font-size: 14px; font-weight: 600; color: var(--brand-navy); }
.st-desc { font-size: 12.5px; color: var(--brand-navy-muted); }
.st-meta { flex-shrink: 0; font-size: 12.5px; font-weight: 500; color: var(--brand-navy-muted); }
.st-meta-todo { color: var(--brand-coral-ink); }
.st-thumb { flex-shrink: 0; width: 32px; height: 32px; object-fit: cover; border-radius: 8px; border: 1px solid var(--brand-cream-line); }
.st-arrow { flex-shrink: 0; font-size: 14px; color: var(--brand-navy-muted); transition: transform .15s ease, color .15s ease; }
.st-item:hover .st-arrow { color: var(--brand-coral-ink); transform: translateX(2px); }
.st-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 2px 0; font-size: 12.5px; color: var(--brand-navy-muted); }
.st-note i { color: inherit; margin-top: 2px; }


@media (max-width: 575px) {
    .st-item { flex-wrap: wrap; row-gap: 6px; }
    .st-meta { order: 3; flex-basis: 100%; padding-left: 54px; }
    .st-arrow { display: none; }
}

/* ==========================================================================
   User › Retail stores (livewire/user/settings/retail-stores, rx-* list) and the address picker
   ========================================================================== */
.ap { display: flex; flex-direction: column; gap: 10px; }
.ap-search { position: relative; }
.ap-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--brand-navy-muted); z-index: 2; }
.ap-input { padding-left: 38px !important; padding-right: 38px !important; }
.ap-spinner { position: absolute; right: 14px; top: 50%; margin-top: -.5rem; color: var(--brand-navy-muted); }
.ap-results {
    position: absolute;
    z-index: 1060;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--afropin-white);
    border: 1px solid var(--brand-cream-line);
    border-radius: 12px;
    box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--afropin-shadow) 35%, transparent);
}
.ap-result { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; font-size: 13px; line-height: 1.45; color: var(--brand-navy); cursor: pointer; }
.ap-result i { margin-top: 2px; color: var(--brand-coral-ink); }
.ap-result.is-active { background: var(--brand-cream); }
.ap-empty { padding: 10px; font-size: 13px; color: var(--brand-navy-muted); }
/* Credit Google asks for when its results are shown without a Google map */
.ap-attribution { padding: 6px 10px 4px; border-top: 1px solid var(--afropin-border); text-align: right; font-size: 11.5px; font-weight: 600; color: var(--brand-navy-muted); }
.bank-picker .ap-input { cursor: pointer; }
.bank-picker .ap-input:focus { cursor: text; }
.bank-picker-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--brand-navy-muted); pointer-events: none; transition: transform .15s; }
.bank-picker-chevron.is-open { transform: translateY(-50%) rotate(180deg); }
.bank-picker .ap-results { max-height: 280px; overflow-y: auto; }
.bank-picker-option { align-items: center; }
.bank-picker-name { flex: 1 1 auto; min-width: 0; }
.bank-picker-option.is-selected .bank-picker-name { font-weight: 700; color: var(--brand-coral-ink); }
.bank-picker-option i { margin-top: 0; }
.ap-map { height: 240px; border-radius: 12px; border: 1px solid var(--brand-cream-line); overflow: hidden; z-index: 0; background: var(--brand-cream); }
.ap-map .leaflet-control-attribution { font-size: 10px; }
.ap-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 12px; color: var(--brand-navy-muted); }
.ap-manual-toggle { margin-left: auto; }
.ap-manual { padding: 12px; background: var(--brand-cream); border: 1px solid var(--brand-cream-line); border-radius: 10px; }
.ap-manual-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 8px; }
.ap-manual .form-control { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Same height as the inputs beside it */
.ap-manual-set { height: 48px; justify-content: center; }
@media (max-width: 575px) {
    .ap-manual-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ap-manual-set { grid-column: 1 / -1; justify-content: center; }
}
.ap-coords { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ap-coords i { color: var(--brand-coral-ink); }
.ap-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--brand-navy); background: var(--brand-cream); border: 1px solid var(--brand-cream-line); border-radius: 10px; }
.ap-pin { background: none; border: 0; }
.ap-pin span {
    position: absolute;
    left: 2px;
    top: 0;
    width: 24px;
    height: 24px;
    background: var(--brand-coral);
    border: 3px solid white;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--afropin-shadow) 35%, transparent);
}
.ap-pin span::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: white; }

/* Retail stores list columns (same rx-row / rx-head pattern as the admin lists) */
.rx-head.store-grid,
.rx-row.store-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, .8fr) 200px; }
.store-copy { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--afropin-text-mute2); flex-shrink: 0; }
.store-copy:hover { color: var(--brand-coral-ink); background: var(--brand-cream); }
.store-map-link { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-coral-ink) !important; text-decoration: none; }
.store-map-link:hover { text-decoration: underline; }
@media (max-width: 767px) {
    .rx-head.store-grid { display: none; }
    .rx-row.store-grid { grid-template-columns: 1fr; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
    .rx-row.store-grid .rx-action { text-align: left; }
}
.rx-section-divider { height: 0; margin: 24px 0; border-top: 1px dashed var(--afropin-hairline-2); }
.lb-list { display: flex; flex-direction: column; gap: 12px; }
/* Settings › Low balance alerts: one card per wallet */
.lb-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--afropin-white); border: 1px solid var(--afropin-hairline-2); border-radius: 14px; }
.lb-head { display: flex; align-items: center; gap: 10px; }
.lb-head .rx-flag { flex: 0 0 28px; width: 28px; height: 28px; }
.lb-code { font-size: 14px; font-weight: 700; color: var(--brand-navy); }
.lb-name { font-size: 12px; color: var(--afropin-text-mute2); }
.lb-balance { margin-left: auto; text-align: right; }
.lb-balance span { display: block; font-size: 11px; color: var(--afropin-text-mute2); }
.lb-balance strong { font-size: 14px; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.lb-input { display: flex; gap: 8px; align-items: stretch; }
.lb-input .input-group { flex: 1 1 auto; min-width: 0; }
.lb-input .rx-btn { height: auto; padding-inline: 18px; }
.lb-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; }
.lb-status.is-below { color: var(--afropin-warning-text); }

/* ==========================================================================
   User › Developers on admin rx-* components (api-keys, webhook, developer-logs)
   ========================================================================== */
.rx-head.devkey-grid,
.rx-row.devkey-grid { grid-template-columns: minmax(0, 2.4fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, .8fr) 270px; }
.rx-head.devhook-grid,
.rx-row.devhook-grid { grid-template-columns: minmax(0, 2.6fr) minmax(0, .8fr) minmax(0, .8fr) 270px; }
.rx-row.devkey-grid .rx-link-btn,
.rx-row.devhook-grid .rx-link-btn { font-size: 11px; }

/* The log feed sits inside an rx-card, which already draws the frame */
.rx-card > .trx-feed { border: 0; border-radius: 0; }
.rx-card > .trx-feed .trx-feed-foot { border-top: 1px solid var(--afropin-hairline-2); }
/* An empty state inside a card: the card already draws the frame, so no second (dashed) border */
.rx-card .rx-empty { border: 0; border-radius: 0; background: transparent; }
.rx-toolbar .rx-search .lg-search-input { width: 300px; }

@media (max-width: 767px) {
    .rx-head.devkey-grid,
    .rx-head.devhook-grid { display: none; }
    .rx-row.devkey-grid,
    .rx-row.devhook-grid { grid-template-columns: 1fr; gap: 10px; padding-top: 16px; padding-bottom: 16px; }
    .rx-row.devkey-grid .rx-cell-label { display: block; }
    .rx-row.devkey-grid .rx-action,
    .rx-row.devhook-grid .rx-action { text-align: left; }
    .rx-toolbar .rx-search .lg-search-input { width: 100%; }
}
@media (max-width: 767px) {
    .rx-row.devhook-grid .rx-cell-label { display: block; }
}

/* ==========================================================================
   User › Support tickets (livewire/user/ticket/*): admin's rx-thread seen from the
   account holder's side, so your messages sit on the right and support on the left
   ========================================================================== */
.rx-thread-user .rx-msg-customer { align-self: flex-end; align-items: flex-end; }
.rx-thread-user .rx-msg-customer .rx-msg-meta { flex-direction: row-reverse; }
.rx-thread-user .rx-msg-customer .rx-msg-bubble { border-top-left-radius: 12px; border-top-right-radius: 4px; }
.rx-thread-user .rx-msg-staff { align-self: flex-start; align-items: flex-start; }
.rx-thread-user .rx-msg-staff .rx-msg-meta { flex-direction: row; }
.rx-thread-user .rx-msg-staff .rx-msg-bubble { border-top-right-radius: 12px; border-top-left-radius: 4px; }

/* ==========================================================================
   User › Transaction details (livewire/user/transactions/details) — rx-card with rx-section / rx-kv
   ========================================================================== */
.trxd-card { max-width: 760px; }
.trxd-summary { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--afropin-hairline-2); background: var(--brand-cream); }
.trxd-amount { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--afropin-text); line-height: 1.25; }
.trxd-amount.rx-amount-credit { color: var(--afropin-success-ink); }
.trxd-body { padding: 0 24px; }
.trxd-card .rx-section-title .rx-link-btn { text-transform: none; letter-spacing: 0; }
@media (max-width: 575px) {
    .trxd-summary { flex-wrap: wrap; padding: 16px; }
    .trxd-body { padding: 0 16px; }
}

/* ==========================================================================
   Business verification (livewire/auth/compliance): step progress in the rm-topbar, document cards
   ========================================================================== */
.rm-progress { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.rm-progress-step { display: flex; align-items: center; gap: 8px; }
.rm-progress-step:not(:last-child)::after { content: ""; width: 40px; height: 2px; margin-left: 2px; border-radius: 2px; background: var(--afropin-hairline-2); }
.rm-progress-step.rm-step-done:not(:last-child)::after { background: var(--brand-navy); }
.rm-step-marker {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: var(--afropin-text-mute2);
    background: var(--afropin-white);
    border: 1px solid var(--afropin-hairline-2);
}
.rm-step-marker i { color: inherit; font-size: 13px; }
.rm-step-active .rm-step-marker { color: var(--brand-navy); border-color: var(--brand-coral-strong); box-shadow: 0 0 0 4px var(--brand-coral-soft); }
.rm-step-done .rm-step-marker { color: var(--afropin-white); background: var(--brand-navy); border-color: var(--brand-navy); }
.rm-progress-title { font-size: 13px; font-weight: 600; color: var(--afropin-text-mute2); white-space: nowrap; }
.rm-step-active .rm-progress-title, .rm-step-done .rm-progress-title { color: var(--brand-navy); }

.cmp-docs { display: flex; flex-direction: column; gap: 12px; }
.cmp-doc { padding: 16px; background: var(--afropin-white); border: 1px solid var(--afropin-hairline-2); border-radius: 12px; }
.cmp-doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cmp-doc .filepond--root { margin-bottom: 0; }
.cmp-doc .filepond--panel-root { background: var(--brand-cream); border: 1px dashed var(--afropin-input-border); }
.cmp-doc .filepond--drop-label { color: var(--afropin-text-mute2); font-size: 13px; }
.cmp-doc .filepond--label-action { color: var(--brand-coral-ink); text-decoration-color: var(--brand-coral-border); }
.cmp-directors { padding: 8px 20px 16px; }
.cmp-loader { min-height: 60vh; }

@media (max-width: 767px) {
    .rm-progress { gap: 6px; }
    .rm-progress-step:not(:last-child)::after { width: 16px; }
    .rm-progress-title { display: none; }
    .rm-step-active .rm-progress-title { display: inline; }
    .rm-close span { display: none; }
}

/* Compliance › directors list (livewire/user/directors/index) */
.rx-row.director-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; padding-top: 12px; padding-bottom: 12px; }
.rx-row.director-row + .rx-row.director-row { border-top: 1px solid var(--afropin-hairline-2); }
@media (max-width: 767px) { .rx-row.director-row { grid-template-columns: 1fr; gap: 8px; } .rx-row.director-row .rx-action { text-align: left; } }

/* User › Products (livewire/user/products) */
.rx-head.product-grid,
.rx-row.product-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, .8fr) 110px; }
.product-art { aspect-ratio: 16 / 9; border-radius: 12px; background: var(--brand-cream) center / cover no-repeat; border: 1px solid var(--afropin-hairline-2); }
@media (max-width: 767px) {
    .rx-head.product-grid { display: none; }
    .rx-row.product-grid { grid-template-columns: 1fr; gap: 8px; padding-top: 14px; padding-bottom: 14px; }
    .rx-row.product-grid .rx-action { text-align: left; }
}

/* ==========================================================================
   User › Dashboard analytics (livewire/user/dashboard, prefix bd-)
   ========================================================================== */
.bd-eyebrow { letter-spacing: .06em; }
.bd-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.bd-kpis .kpi-value { white-space: nowrap; }
.bd-delta {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px 1px 3px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    background: var(--brand-cream);
    border: 1px solid var(--afropin-hairline-2);
}
.bd-delta i { font-size: 15px; line-height: 1; color: inherit !important; }
.bd-delta.tone-success { background: var(--afropin-success-bg); border-color: var(--afropin-success-border); color: var(--afropin-success-ink) !important; }
.bd-delta.tone-danger { background: var(--afropin-error-bg); border-color: var(--afropin-error-soft); color: var(--afropin-error-hover) !important; }
.bd-delta.tone-muted { color: var(--afropin-text-mute2) !important; }

/* Segmented meter for "Where PIN value went" */
.bd-meter { display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--brand-cream-deep); gap: 2px; }
.bd-meter__seg { display: block; height: 100%; min-width: 3px; }
.bd-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.bd-tone-success { background: var(--afropin-success); }
.bd-tone-navy { background: var(--brand-navy); }
.bd-tone-muted { background: var(--brand-navy-soft); }

/* Ranked lists (top products, top stores, your products) */
.bd-rank { display: flex; flex-direction: column; gap: 14px; }
.bd-rank__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bd-rank__row--metric { align-items: flex-start; }
.bd-rank__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--afropin-text); }
.bd-thumb {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid var(--afropin-hairline-2);
    background: var(--brand-cream) center / cover no-repeat;
    color: var(--brand-navy-muted);
    font-size: 15px;
}
.bd-thumb i { color: inherit; }

/* Wallet runway */
.bd-runway { padding-top: 16px; border-top: 1px solid var(--afropin-hairline-2); }

/* Recent activity */
.bd-activity { display: flex; flex-direction: column; }
.bd-activity__row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 120px 100px 120px;
    align-items: center;
    gap: 14px;
    padding: 10px 6px;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color .15s;
}
.bd-activity__row + .bd-activity__row { border-top: 1px solid var(--afropin-hairline-2); }
.bd-activity__row:hover { background: var(--brand-cream); }
.bd-activity__amount, .bd-activity__time { text-align: right; white-space: nowrap; }
/* Same scale as the other dashboard lists (rx-name 13px, rx-sub 12px), so rows sit below the card title */
.bd-activity__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--afropin-text); }
.bd-activity__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; font-family: var(--bs-font-monospace); font-size: 11.5px; color: var(--afropin-text-mute2); }
.bd-activity__time { font-size: 12px; color: var(--afropin-text-mute2); }
.bd-activity__amount { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-activity__row .kpi-icon { width: 34px; height: 34px; }

@media (max-width: 1399.98px) {
    .bd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .bd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .bd-activity__row { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 4px; }
    .bd-activity__status, .bd-activity__time { display: none; }
}
@media (max-width: 359.98px) {
    .bd-kpis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .bd-kpis .card-body { padding: 16px !important; }
    .bd-kpis .kpi-value { font-size: 1.45rem !important; }
}

/* Sidebar rhythm (admin + user side-nav): the base layer's aside rules add a 14.4px bottom margin to every
   menu item and a 14.4px left margin to link icons only, which made gaps uneven and pushed link icons
   out of line with the group headers' icons. One spacing scale and one icon column for every row. */
.side-nav .menu-item { margin: 0 !important; }
.side-nav .side-nav-link .menu-icon,
.side-nav-summary .menu-icon { margin-left: 0 !important; justify-content: flex-start; flex: 0 0 26px; }
.side-nav .side-nav-link { margin: 2px 0; }
.side-nav-group { margin-top: 2px; }
.side-nav-group + .side-nav-section { margin-top: 2px; }
.side-nav-section + .side-nav-section { margin-top: 2px; }
.side-nav-section:has(> .side-nav-heading) { margin-top: 20px; }
.side-nav-heading { padding: 0 12px 6px; }

/* User sidebar account card (livewire/user/settings/menu): business logo when set, initials otherwise */
.acct-card { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.acct-card-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; }
.acct-card-logo, .acct-card-initials { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; }
.acct-card-logo { object-fit: cover; background: var(--brand-cream); border: 1px solid var(--afropin-hairline-2); }
.acct-card-initials { display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--brand-coral-ink); background: var(--brand-coral-soft); }
.acct-card-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--brand-navy); }
.acct-card-id { display: block; font-size: 11.5px; color: var(--afropin-text-mute2); font-variant-numeric: tabular-nums; }
.acct-card-main:hover .acct-card-name { color: var(--brand-coral-ink); }
.acct-card-logout { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--afropin-text-mute2); font-size: 16px; }
.acct-card-logout:hover { color: var(--afropin-error); background: var(--afropin-error-bg); }

/* Topbar Test / Live switch (livewire/user/settings/sandbox), replacing the env-toggle switch */
.env-switch { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--brand-cream); border: 1px solid var(--afropin-hairline-2); }
.env-switch-option { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; font-size: 12px; font-weight: 600; color: var(--afropin-text-mute2); transition: background-color .15s, color .15s, box-shadow .15s; }
.env-switch-option:hover:not(.active) { color: var(--brand-navy); }
.env-switch-option.active { background: var(--afropin-white); color: var(--brand-navy); box-shadow: 0 1px 2px color-mix(in srgb, var(--afropin-shadow) 14%, transparent); cursor: default; }
.env-switch-option i { font-size: 10px; }
.env-switch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--afropin-hairline-2); flex-shrink: 0; }
.env-switch.is-test .env-switch-option.active .env-switch-dot { background: var(--afropin-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--afropin-warning) 22%, transparent); }
.env-switch.is-test .env-switch-option.active { color: var(--afropin-warning-text); }
.env-switch.is-live .env-switch-option.active .env-switch-dot { background: var(--afropin-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--afropin-success) 22%, transparent); }
.env-switch.is-live .env-switch-option.active { color: var(--afropin-success-ink); }
.env-switch-option.is-locked:not(.active) { color: var(--afropin-text-placeholder); }
.env-switch.is-busy .env-switch-option { opacity: .55; pointer-events: none; }
.env-switch-spinner { position: absolute; left: -22px; top: 50%; margin-top: -.5rem; color: var(--afropin-text-mute2); }

/* Dashboard KPI cards: sized by the card, not the viewport, so long figures never break the row.
   Values are already compacted (₦12.3M) with the exact amount in the title; labels stay on one line. */
.bd-kpis .kpi-card { container-type: inline-size; min-width: 0; }
.bd-kpis .kpi-value { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(1.3rem, 15cqi, 1.9rem) !important; letter-spacing: -.01em; }
.bd-kpis .d-flex.align-items-end { min-width: 0; }
.bd-kpi-label { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.bd-kpi-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-kpi-label i { flex-shrink: 0; }
.bd-kpis .kpi-icon { flex-shrink: 0; }
.bd-kpis .card-body > span.mt-auto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Narrow KPI cards: the corner icon is decoration, the label is information, so the icon gives way */
@container (max-width: 230px) {
    .bd-kpis .kpi-icon { display: none; }
}


/* User › Products performance (livewire/user/products) */
.rx-head.product-grid,
.rx-row.product-grid { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, .8fr) 100px; }
.pf-value { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.pf-panel { padding: 14px 16px 10px; border: 1px solid var(--afropin-hairline-2); border-radius: 12px; background: var(--brand-cream); }
.pf-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pf-panel-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--afropin-text-mute2); }
.pf-panel-value { font-size: 20px; font-weight: 800; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.pf-panel-foot { margin-top: 4px; font-size: 11.5px; color: var(--afropin-text-mute2); }
.pf-spark { display: block; width: 100%; height: 48px; }
.pf-spark polyline { stroke: var(--brand-coral); }
.pf-store { padding: 10px 0; }
.pf-store + .pf-store { border-top: 1px solid var(--afropin-hairline-2); }
.pf-bar { height: 6px; margin: 6px 0 4px; border-radius: 999px; background: var(--brand-cream-deep); overflow: hidden; }
.pf-bar span { display: block; height: 100%; border-radius: inherit; background: var(--brand-navy); }
@media (max-width: 767px) {
    .rx-row.product-grid .pf-value { align-items: flex-start; }
    .rx-row.product-grid > .text-end { text-align: left !important; }
}

/* Retail stores performance columns (store, sales, count, status, actions) */
.rx-head.store-grid,
.rx-row.store-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr) 190px; }
.pf-bar-sm { width: 100%; max-width: 140px; height: 4px; margin: 0; }
.rx-row.store-grid .pf-value { gap: 6px; }
.pin-chip-clear { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 2px; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; }
.pin-chip-clear:hover { background: var(--brand-cream-deep); }
.rx-head.product-grid,
.rx-row.product-grid { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, .8fr) 150px; }

/* Wallet top-up drawer (livewire/user/wallet-options) */
.topup-quick { border: 1px solid var(--afropin-hairline-2); cursor: pointer; }
.topup-quick:hover { border-color: var(--brand-coral-strong); color: var(--brand-coral-ink); }
.topup-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: var(--brand-cream); border: 1px solid var(--afropin-hairline-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--afropin-text-mute2); }
.topup-preview strong { font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
/* Flag in the top-up drawer head: a round crop like the wallet card, not a stretched square */
.topup-flag { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid var(--afropin-hairline-2); box-shadow: 0 0 0 3px var(--brand-cream); }
/* flag-icons' .fi sets background-size: contain and its own width, which beat the rule above */
.topup-flag.fi { display: inline-block; width: 44px !important; height: 44px !important; line-height: 44px; background-size: cover !important; background-position: center !important; overflow: hidden; }
.topup-flag.fi::before { content: none; }
.topup-breakdown { margin: 4px 0 6px; padding: 4px 14px; border: 1px solid var(--afropin-hairline-2); border-radius: 12px; }
.topup-breakdown .rx-kv { font-variant-numeric: tabular-nums; }
.topup-fee { color: var(--afropin-text-mute2) !important; }
.topup-credit .rx-kv-label, .topup-credit .rx-kv-value { font-weight: 700; color: var(--brand-navy) !important; }

/* ==========================================================================
   Admin › Transaction details (livewire/admin/transactions/details) — trxd-card plus an aside of accounts, PIN, review
   ========================================================================== */
.trxd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.trxd-layout .trxd-card { max-width: none; }
.trxd-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.trxd-panel { padding: 18px 20px; }
.trxd-panel .rx-section-title { margin-bottom: 12px; }
.trxd-entity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trxd-entity + .rx-kv { margin-top: 12px; }
@media (max-width: 991px) {
    .trxd-layout { grid-template-columns: minmax(0, 1fr); }
}
.trxd-layout .rx-kv-label { flex-shrink: 0; }
.trxd-layout .rx-kv-value { min-width: 0; text-align: right; overflow-wrap: anywhere; }

/* ==========================================================================
   Brand store page (livewire/user/retail/*): terminals, redemptions, terminal sign-ins
   ========================================================================== */
.store-link { display: block; color: var(--afropin-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-link:hover { color: var(--brand-coral-ink); }
.rx-head.term-grid,
.rx-row.term-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .7fr) 320px; }
.rx-head.rdm-grid,
.rx-row.rdm-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) 90px; }
.rx-head.sgn-grid,
.rx-row.sgn-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 1fr); }
.term-login { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.term-portal { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--brand-navy-muted); }
.term-portal i.bi-box-arrow-in-right { color: var(--brand-coral-ink); }
.term-portal a { color: var(--brand-navy); font-weight: 600; overflow-wrap: anywhere; }
/* Terminal app download (Terminals page, brands) */
.term-app { display: flex; align-items: center; gap: 20px; padding: 20px 24px; }
.term-app-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px; align-self: flex-start; }
.term-app-body { flex: 1 1 auto; min-width: 0; }
.term-app-title { font-size: 15px; font-weight: 700; color: var(--brand-navy); }
.term-app-text { margin: 4px 0 0; max-width: 620px; font-size: 12.5px; line-height: 1.55; color: var(--afropin-text-prose); }
.term-app-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--brand-navy-muted); }
.term-app-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.term-app-qr { flex-shrink: 0; margin: 0; text-align: center; }
.term-app-qr img { display: block; width: 112px; height: 112px; padding: 6px; border-radius: 10px; background: #fff; border: 1px solid var(--afropin-hairline-2); image-rendering: pixelated; }
.term-app-qr figcaption { margin-top: 6px; font-size: 11px; color: var(--afropin-text-mute2); }
@media (max-width: 767px) {
    .term-app { flex-wrap: wrap; padding: 16px; }
    .term-app-qr { display: none; }
}
.term-pw { display: flex; gap: 8px; align-items: center; }
.term-pw .form-control { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.term-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .3em; }
@media (max-width: 1199px) {
    .rx-head.term-grid, .rx-head.rdm-grid, .rx-head.sgn-grid { display: none; }
    .rx-row.term-grid, .rx-row.rdm-grid, .rx-row.sgn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 16px; padding-bottom: 16px; }
    .rx-row.term-grid > :first-child, .rx-row.rdm-grid > :first-child,
    .rx-row.term-grid .rx-action, .rx-row.rdm-grid .rx-action { grid-column: 1 / -1; text-align: left; }
    .rx-row.term-grid .rx-cell-label, .rx-row.rdm-grid .rx-cell-label, .rx-row.sgn-grid .rx-cell-label { display: block; }
    .rx-row.term-grid .text-md-end, .rx-row.rdm-grid .text-xl-end { text-align: left !important; }
}

/* ==========================================================================
   Terminal portal (terminal/*, livewire/terminal/*): a till's sign-in and redeem screen
   ========================================================================== */
.tm-login-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--brand-coral-ink); background: var(--brand-coral-soft); border: 1px solid var(--brand-coral-border); }
.tm-login-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.tm-password { position: relative; }
.tm-password .rm-input { padding-right: 46px; }
.tm-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--brand-navy-muted); }
.tm-eye:hover { background: var(--brand-cream); color: var(--brand-navy); }

.tm-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--brand-cream); color: var(--afropin-text); }
.tm-top { display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: var(--afropin-white); border-bottom: 1px solid var(--afropin-hairline-2); }
/* The logo carries an inline height:auto (getUi()->light_css), so size it as .rm-logo does */
.tm-logo { flex-shrink: 0; }
.tm-logo img { height: 32px !important; width: auto !important; max-width: none !important; }
.tm-where { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--brand-navy); }
.tm-where i { color: var(--brand-coral-ink); margin-right: 4px; }
.tm-where-terminal { color: var(--brand-navy-muted); }
.tm-test { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--afropin-warning-text); background: var(--afropin-warning-bg); }
/* A brand till that both redeems and sells: which one it's doing */
.tm-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--brand-cream); flex-shrink: 0; }
.tm-switch a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--brand-navy-muted); }
.tm-switch a.active { background: var(--afropin-white); color: var(--brand-navy); box-shadow: 0 1px 3px color-mix(in srgb, var(--afropin-shadow) 12%, transparent); }
.tm-switch a:hover { color: var(--brand-navy); }
@media (max-width: 575px) { .tm-switch a { padding: 7px 10px; } .tm-switch a i { display: none; } }
.tm-signout { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--afropin-hairline-2); font-size: 13px; font-weight: 600; color: var(--brand-navy); }
.tm-signout:hover { background: var(--brand-cream); color: var(--brand-navy); }

.tm-main { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px; }
.tm-card { background: var(--afropin-white); border: 1px solid var(--afropin-hairline-2); border-radius: 18px; padding: 24px; }
.tm-stage .tm-card { padding: 32px; }
.tm-card-head { margin-bottom: 22px; }
.tm-card-title { font-size: 22px; font-weight: 700; color: var(--brand-navy); letter-spacing: -.01em; }
.tm-card-sub { margin-top: 4px; font-size: 13px; color: var(--brand-navy-muted); }
.tm-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-navy-muted); }
.tm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }

.tm-code-wrap { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 18px; border: 2px solid var(--afropin-input-border); border-radius: 14px; background: var(--brand-cream); transition: border-color .15s, background .15s; }
.tm-code-wrap:focus-within { border-color: var(--brand-navy); background: var(--afropin-white); }
.tm-code-wrap.is-ok { border-color: var(--afropin-success); background: var(--afropin-white); }
.tm-code-wrap.is-error, .tm-code-wrap.is-blocked { border-color: var(--afropin-error); background: var(--afropin-white); }
.tm-code-wrap > i { font-size: 22px; color: var(--brand-navy-muted); }
.tm-code { flex: 1 1 auto; min-width: 0; height: 72px; border: 0; outline: 0; background: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 30px; font-weight: 600; letter-spacing: .08em; color: var(--brand-navy); }
.tm-code::placeholder { color: var(--afropin-text-placeholder); }
.tm-code-state { flex-shrink: 0; font-size: 22px; }
.tm-count { font-size: 12px; font-weight: 700; color: var(--brand-navy-muted); font-variant-numeric: tabular-nums; }
.tone-success { color: var(--afropin-success); }

.tm-msg { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--afropin-text-prose); background: var(--brand-cream); }
.tm-msg-error { color: var(--afropin-error); background: var(--afropin-error-bg); }
.tm-msg-ok { color: var(--afropin-success-ink); background: var(--afropin-success-bg); }
/* A brand's running promotion at the till: brand coral, not the success green */
.tm-msg-promo { color: var(--brand-coral-ink); background: var(--brand-coral-soft); }
/* Cash-out: the customer's 6-digit confirmation code, typed by staff */
.tm-otp { display: block; width: 100%; height: 64px; margin-bottom: 4px; padding: 0 16px; border: 1.5px solid var(--afropin-border); border-radius: 14px; background: var(--afropin-white); text-align: center; letter-spacing: .4em; }
.tm-otp:focus { border-color: var(--brand-navy); }

.tm-pin { margin-top: 20px; padding: 18px 20px; border-radius: 14px; background: var(--brand-navy); color: var(--afropin-text-on-dark); }
.tm-pin.is-blocked { background: var(--brand-navy-deep); }
.tm-pin-main { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.tm-pin-name { font-size: 16px; font-weight: 700; color: var(--afropin-white); }
.tm-pin-mask { margin-top: 4px; font-size: 13px; color: var(--afropin-text-on-dark-2); }
.tm-pin-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--afropin-text-on-dark-3); }
.tm-pin-balance { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--afropin-white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-pin-balance span { font-size: 13px; color: var(--afropin-text-on-dark-2); }
.tm-pin-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--afropin-white) 14%, transparent); font-size: 12.5px; color: var(--afropin-text-on-dark-2); }
.tm-pin-meta i { margin-right: 4px; color: var(--brand-coral); }
.tm-pin .tm-msg-error { margin-top: 14px; }

.tm-amount-form { margin-top: 22px; }
.tm-amount-wrap { display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 2px solid var(--afropin-input-border); border-radius: 14px; }
.tm-amount-wrap:focus-within { border-color: var(--brand-navy); }
.tm-amount-wrap > span { font-size: 22px; font-weight: 700; color: var(--brand-navy-muted); }
.tm-amount { flex: 1 1 auto; min-width: 0; height: 64px; border: 0; outline: 0; background: none; font-size: 28px; font-weight: 700; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.tm-amount[readonly] { color: var(--brand-navy-muted); }
.tm-chip { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--brand-coral-border); background: var(--brand-coral-soft); font-size: 12px; font-weight: 700; color: var(--brand-coral-ink); }

.tm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 22px; border-radius: 14px; border: 1px solid transparent; font-size: 15px; font-weight: 700; transition: background .15s; }
.tm-btn-primary { background: var(--brand-navy); color: var(--afropin-white); }
.tm-btn-primary:hover { background: var(--brand-navy-hover); color: var(--afropin-white); }
.tm-btn-primary:disabled { opacity: .6; }
.tm-btn-ghost { background: var(--afropin-white); border-color: var(--afropin-hairline-2); color: var(--brand-navy); }
.tm-btn-ghost:hover { background: var(--brand-cream); }
.tm-btn-block { width: 100%; margin-top: 16px; }
.tm-actions { display: flex; gap: 10px; margin-top: 20px; }
.tm-actions .tm-btn { flex: 1 1 0; }

.tm-confirm { margin-top: 20px; padding: 20px; border-radius: 14px; border: 2px solid var(--brand-navy); }
.tm-confirm-text { font-size: 17px; color: var(--brand-navy); }
.tm-confirm-sub { margin-top: 4px; font-size: 13px; color: var(--brand-navy-muted); }

.tm-done { text-align: center; }
.tm-done-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; font-size: 32px; color: var(--afropin-success-ink); background: var(--afropin-success-bg); }
.tm-done-title { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--afropin-success-ink); }
.tm-done-amount { margin-top: 4px; font-size: 40px; font-weight: 800; color: var(--brand-navy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tm-done-amount span { font-size: 16px; color: var(--brand-navy-muted); }
.tm-kv { margin: 20px 0 0; text-align: left; }
.tm-kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 13px; border-top: 1px dashed var(--afropin-hairline-2); }
.tm-kv dt { font-weight: 500; color: var(--brand-navy-muted); }
.tm-kv dd { margin: 0; font-weight: 600; color: var(--brand-navy); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.tm-ref { font-size: 11.5px; }
.tm-newcode { margin-top: 20px; padding: 18px; border-radius: 14px; text-align: left; background: var(--brand-coral-soft); border: 2px solid var(--brand-coral); }
.tm-newcode-head { font-size: 14px; font-weight: 700; color: var(--brand-coral-ink); }
.tm-newcode-head i { margin-right: 6px; }
.tm-newcode-value { margin: 10px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 30px; font-weight: 700; letter-spacing: .06em; text-align: center; color: var(--brand-navy); overflow-wrap: anywhere; }
.tm-newcode p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--afropin-text-prose); }
.tm-newcode .tm-btn { height: 40px; width: 100%; }

.tm-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tm-stat { padding: 16px; border-radius: 16px; background: var(--afropin-white); border: 1px solid var(--afropin-hairline-2); min-width: 0; }
.tm-stat-hero { grid-column: 1 / -1; background: var(--brand-navy); border-color: var(--brand-navy); }
.tm-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-navy-muted); }
.tm-stat-value { margin-top: 6px; font-size: 22px; font-weight: 700; color: var(--brand-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tm-stat-sub { margin-top: 2px; font-size: 12px; color: var(--brand-navy-muted); }
.tm-stat-hero .tm-stat-label { color: var(--afropin-text-on-dark-3); }
.tm-stat-hero .tm-stat-value { font-size: 34px; color: var(--afropin-white); }
.tm-stat-hero .tm-stat-sub { color: var(--afropin-text-on-dark-2); }
.tm-side-title { margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--brand-navy); }
.tm-side-meta { font-size: 12px; font-weight: 500; color: var(--brand-navy-muted); }
.tm-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 110px; align-items: end; }
.tm-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.tm-bar span { width: 100%; max-width: 28px; border-radius: 6px 6px 3px 3px; background: var(--brand-coral); min-height: 0; }
.tm-bar:last-child span { background: var(--brand-navy); }
.tm-bar small { font-size: 10.5px; font-weight: 600; color: var(--brand-navy-muted); }
.tm-recent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px dashed var(--afropin-hairline-2); font-size: 13px; }
.tm-recent-row:first-of-type { border-top: 0; padding-top: 0; }
.tm-recent-row .tm-mono { color: var(--brand-navy); }
.tm-recent-amount { font-weight: 700; color: var(--afropin-success-ink); text-align: right; font-variant-numeric: tabular-nums; }
.tm-recent-time { grid-column: 1 / -1; font-size: 11.5px; color: var(--brand-navy-muted); }
.tm-empty { font-size: 13px; color: var(--brand-navy-muted); }

@media (max-width: 991px) {
    .tm-main { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .tm-top { padding: 12px 16px; }
}
@media (max-width: 575px) {
    .tm-stage .tm-card { padding: 20px; }
    .tm-code { font-size: 22px; height: 60px; }
    .tm-signout span { display: none; }
    .tm-where { font-size: 12px; }
    .tm-pin-main { flex-direction: column; align-items: flex-start; }
    .tm-pin-main .text-end { text-align: left !important; }
    .tm-actions { flex-direction: column-reverse; }
    .tm-actions .tm-btn { flex: none; width: 100%; }
}
@media print {
    .tm-top, .tm-no-print, .tm-newcode .tm-btn { display: none !important; }
    .tm-app, .tm-main { background: none; padding: 0; display: block; }
    .tm-card { border: 0; }
}
/* Brand store rows carry a third action (Terminals) */
.rx-head.store-grid.store-grid-brand,
.rx-row.store-grid.store-grid-brand { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .7fr) 290px; }
.rx-row.store-grid .rx-action-group { flex-wrap: nowrap; }
@media (max-width: 1199px) {
    .rx-row.store-grid .rx-action-group { flex-wrap: wrap; }
}
@media (max-width: 767px) {
    .rx-head.store-grid.store-grid-brand { display: none; }
    .rx-row.store-grid.store-grid-brand { grid-template-columns: 1fr; }
}

/* Terminal portal: "customer pays the fee" switch and the fee split on the confirm step */
.tm-feeswitch { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--afropin-hairline-2); background: var(--brand-cream); cursor: pointer; }
.tm-feeswitch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tm-feeswitch-ui { position: relative; flex-shrink: 0; width: 42px; height: 24px; margin-top: 2px; border-radius: 999px; background: var(--afropin-input-border); transition: background .15s; }
.tm-feeswitch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--afropin-white); transition: transform .15s; }
.tm-feeswitch input:checked + .tm-feeswitch-ui { background: var(--brand-navy); }
.tm-feeswitch input:checked + .tm-feeswitch-ui::after { transform: translateX(18px); }
.tm-feeswitch input:focus-visible + .tm-feeswitch-ui { outline: 2px solid var(--brand-coral-strong); outline-offset: 2px; }
.tm-feeswitch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-feeswitch-text strong { font-size: 14px; color: var(--brand-navy); }
.tm-feeswitch-text small { font-size: 12.5px; color: var(--brand-navy-muted); }
.tm-split { margin-top: 14px; }

/* Reseller till (livewire/terminal/sell): sell / top-up tabs, sale form, "code emailed" notice */
.tm-tabs { display: flex; gap: 4px; margin-bottom: 22px; padding: 4px; border-radius: 14px; background: var(--brand-cream); }
.tm-tabs button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: 11px; background: none; font-size: 14px; font-weight: 700; color: var(--brand-navy-muted); }
.tm-tabs button.active { background: var(--afropin-white); color: var(--brand-navy); box-shadow: 0 1px 3px color-mix(in srgb, var(--afropin-shadow) 12%, transparent); }
.tm-select, .tm-input { height: 52px; border-radius: 12px; font-size: 15px; }
.tm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.tm-grid-full { grid-column: 1 / -1; }
.tm-hint { margin-top: 6px; font-size: 12.5px; color: var(--brand-navy-muted); }
.tm-field-error { margin-top: 6px; font-size: 12.5px; color: var(--afropin-error); }
/* Staff PIN on the till's confirm step */
.tm-staff-pin { margin: 18px 0 4px; }
.tm-staff-pin .tm-pin-input { max-width: 220px; font-size: 22px; letter-spacing: .5em; text-align: center; font-family: var(--dx-mono, ui-monospace, monospace); }
.tm-phone { display: flex; gap: 8px; }
/* intl-tel-input wraps every phone field in .iti (inline-block by default): make it fill its column like any other input */
.iti { display: block; }
/* intl-tel-input wraps the field in .iti: let it fill the row like the other till inputs */
.tm-phone .iti { display: block; width: 100%; }
.tm-phone .iti .tm-input { width: 100%; }
/* Same for dashboard forms: the phone field fills its column like the inputs beside it */
.rx-field .iti { display: block; width: 100%; }
.tm-denoms { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-denom { min-width: 96px; height: 48px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--afropin-input-border); background: var(--afropin-white); font-size: 15px; font-weight: 700; color: var(--brand-navy); }
.tm-denom.active { border-color: var(--brand-navy); background: var(--brand-navy); color: var(--afropin-white); }
.tm-mailed { display: flex; gap: 12px; margin-top: 20px; padding: 16px; border-radius: 14px; text-align: left; background: var(--afropin-success-bg); border: 1px solid var(--afropin-success-border); }
.tm-mailed > i { font-size: 22px; color: var(--afropin-success-ink); }
.tm-mailed strong { display: block; font-size: 14px; color: var(--afropin-success-ink); }
.tm-mailed span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--afropin-text-prose); }
@media (max-width: 575px) {
    .tm-grid { grid-template-columns: 1fr; }
    .tm-tabs button { font-size: 13px; }
}

/* Till product picker (livewire/terminal/sell): logo, name and currency, chosen in the browser */
.tm-picker { position: relative; }
.tm-picker-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 16px 8px 10px; border: 1px solid var(--afropin-input-border); border-radius: 14px; background: var(--afropin-white); text-align: left; color: var(--brand-navy); transition: border-color .15s; }
.tm-picker-btn:hover, .tm-picker-btn.is-open, .tm-picker-btn:focus-visible { border-color: var(--brand-navy); outline: 0; }
.tm-picker-value { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.tm-picker-placeholder { flex: 1 1 auto; padding-left: 6px; font-size: 15px; color: var(--brand-navy-muted); }
.tm-picker-chevron { flex-shrink: 0; color: var(--brand-navy-muted); transition: transform .15s; }
.tm-picker-btn.is-open .tm-picker-chevron { transform: rotate(180deg); }
.tm-picker-logo { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--afropin-hairline-2); background: var(--brand-cream) center / cover no-repeat; color: var(--brand-coral-ink); }
.tm-picker-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.tm-picker-currency { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--brand-navy-muted); background: var(--brand-cream); }
.tm-picker-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; border: 1px solid var(--afropin-hairline-2); border-radius: 14px; background: var(--afropin-white); box-shadow: 0 12px 32px color-mix(in srgb, var(--afropin-shadow) 14%, transparent); }
.tm-picker-menu ul { max-height: 320px; margin: 0; padding: 0; overflow-y: auto; list-style: none; outline: 0; }
.tm-picker-search { position: relative; margin-bottom: 6px; }
.tm-picker-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--brand-navy-muted); }
.tm-picker-search input { width: 100%; height: 42px; padding: 0 12px 0 36px; border: 1px solid var(--afropin-input-border); border-radius: 10px; font-size: 14px; outline: 0; }
.tm-picker-search input:focus { border-color: var(--brand-navy); }
.tm-picker-option { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.tm-picker-option.is-active { background: var(--brand-cream); }
.tm-picker-option.is-selected .tm-picker-name { color: var(--brand-coral-ink); }
.tm-picker-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.tm-picker-sub { font-size: 12px; color: var(--brand-navy-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-picker-check { color: var(--brand-coral-ink); font-size: 18px; }
.tm-picker-empty { padding: 12px; font-size: 13px; color: var(--brand-navy-muted); }

/* Till fields share the PIN code field's look: 2px border, 14px radius, cream until focused, navy when focused,
   red when invalid. Scoped under .tm-app to beat the theme's .form-control. */
.tm-app .tm-input,
.tm-app .tm-amount-wrap,
.tm-app .tm-picker-btn {
    border: 2px solid var(--afropin-input-border);
    border-radius: 14px;
    background: var(--brand-cream);
    box-shadow: none;
    transition: border-color .15s, background .15s;
}
.tm-app .tm-input { height: 58px; padding: 0 18px; font-size: 16px; font-weight: 500; color: var(--brand-navy); }
.tm-app .tm-input::placeholder { color: var(--afropin-text-placeholder); font-weight: 400; }
.tm-app .tm-input:focus,
.tm-app .tm-amount-wrap:focus-within,
.tm-app .tm-picker-btn:focus-visible,
.tm-app .tm-picker-btn.is-open { border-color: var(--brand-navy); background: var(--afropin-white); outline: 0; box-shadow: none; }
.tm-app .tm-picker-btn:hover { border-color: var(--brand-navy-muted); }
.tm-app .tm-input.is-invalid,
.tm-app .tm-amount-wrap.is-invalid,
.tm-app .tm-picker-btn.is-invalid { border-color: var(--afropin-error); background: var(--afropin-white); }
.tm-app .tm-amount { background: none; }
/* intl-tel-input: room for the flag inside the padded field */
.tm-app .tm-phone .iti .tm-input { padding-left: 58px; }

/* Template picker (admin › user › allowed PINs): multi-select with search and select all */
.tp { border: 1px solid var(--afropin-hairline-2); border-radius: 12px; overflow: hidden; }
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--brand-cream); border-bottom: 1px solid var(--afropin-hairline-2); }
.tp-all { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 600; color: var(--brand-navy); cursor: pointer; }
.tp-count { font-size: 12px; color: var(--brand-navy-muted); white-space: nowrap; }
.tp-search { margin: 10px 14px 4px; }
.tp-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.tp-item { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.tp-item:hover { background: var(--brand-cream); }
.tp-item.is-on { background: var(--brand-coral-soft); }
.tp-thumb { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--afropin-hairline-2); background: var(--brand-cream) center / cover no-repeat; }
.tp-text { display: flex; flex-direction: column; min-width: 0; }
.tp-name { font-size: 13.5px; font-weight: 600; color: var(--brand-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-sub { font-size: 12px; color: var(--brand-navy-muted); }
.tp-none { padding: 16px; text-align: center; font-size: 13px; color: var(--brand-navy-muted); }
.tp .form-check-input { flex-shrink: 0; margin: 0; }

/* Shipping fees per state (admin › currency › Shipping) */
.rx-head.ship-grid, .rx-row.ship-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 16px; align-items: center; }
.ship-input { max-width: 260px; }

/* Physical voucher orders (admin) */
.rx-head.po-grid, .rx-row.po-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 80px 140px 130px 110px; gap: 16px; align-items: center; }
@media (max-width: 1199px) { .rx-head.po-grid { display: none; } .rx-row.po-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rx-row.po-grid .text-end { text-align: left !important; } }
.po-overlay { position: fixed; inset: 0; z-index: 1055; display: flex; justify-content: flex-end; background: rgba(11, 27, 59, .35); }
.po-panel { width: min(520px, 100%); height: 100%; overflow-y: auto; background: var(--afropin-white, #fff); box-shadow: -24px 0 48px -24px color-mix(in srgb, var(--afropin-shadow) 40%, transparent); }
.rx-head.pvo-grid, .rx-row.pvo-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) 80px 90px 130px minmax(0, 1.2fr) 130px; gap: 16px; align-items: center; }
@media (max-width: 1199px) { .rx-head.pvo-grid { display: none; } .rx-row.pvo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rx-row.pvo-grid .text-end { text-align: left !important; } }

/* Terminals page: a reseller terminal's spend controls at a glance */
.term-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.term-flag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--afropin-soft-bg); font-size: 11.5px; color: var(--afropin-text-muted); white-space: nowrap; }
.term-flag-danger { background: var(--afropin-error-bg); color: var(--afropin-error-hover); }

/* Bulk send (partner/bulk-sends, partner/bulk-send) */
.bks-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.bks-main { display: grid; gap: 20px; min-width: 0; }
.bks-side { position: sticky; top: 90px; display: grid; gap: 20px; }
.bks-step { padding: 22px 24px; overflow: visible; }
.bks-step-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.bks-step-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--brand-navy); }
.bks-step-head p { margin: 2px 0 0; font-size: 13px; color: var(--afropin-text-mute2); }
.bks-step-no { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-coral-soft); color: var(--brand-coral-ink); font-size: 13px; font-weight: 700; }
.bks-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 16px; }
.bks-tabs { margin-bottom: 16px; }
.bks-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; }
.bks-pane { display: block; }
.bks-drop { display: flex; align-items: center; gap: 16px; margin: 0; padding: 22px; border: 1.5px dashed var(--afropin-hairline-2); border-radius: 14px; background: var(--brand-cream); cursor: pointer; transition: border-color .15s, background .15s; }
.bks-drop:hover, .bks-drop:focus-within { border-color: var(--brand-navy); background: var(--afropin-white); }
.bks-drop-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--afropin-white); color: var(--brand-coral-ink); font-size: 24px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.bks-drop strong { display: block; font-size: 14px; color: var(--brand-navy); }
.bks-drop small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--afropin-text-mute2); }
.bks-pane-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 13px; color: var(--brand-navy); }
.bks-add-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
/* First name, last name, email on one row; phone and product on the next; amount and the button last. Labels line up along the top,
   and the button carries an empty label so it sits level with the fields, at their height. */
.bks-add-grid .bks-add-wide { grid-column: span 2; }
.bks-add-go .rx-btn { height: 46px; justify-content: center; font-size: 13px; }
@media (max-width: 991.98px) { .bks-add-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bks-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--afropin-warning-bg); color: var(--afropin-warning-text); font-size: 13px; line-height: 1.5; }
.bks-alert i { margin-top: 1px; }
.bks-table { border: 1px solid var(--afropin-hairline-2); border-radius: 12px; overflow: hidden; }
.bks-tr { display: grid; grid-template-columns: 56px minmax(0, 1.5fr) minmax(0, 1.2fr) 120px 36px; gap: 12px; align-items: center; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--afropin-hairline-2); background: var(--afropin-white); text-align: left; font-size: 13px; color: var(--brand-navy); }
.bks-tr:first-child { border-top: 0; }
.bks-tr.has-error { background: var(--afropin-error-bg); }
.bks-th { background: var(--brand-cream); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--afropin-text-mute2); }
.bks-person { font-weight: 600; }
.bks-tr small { color: var(--afropin-text-mute2); }
.bks-tr .bks-error { display: block; margin-top: 2px; color: var(--afropin-error); font-weight: 600; }
.bks-more { display: block; font-weight: 600; color: var(--brand-navy); cursor: pointer; }
.bks-more:hover { background: var(--brand-cream); }
.bks-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--brand-coral-soft); color: var(--brand-coral-ink); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.bks-x { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border: 0; border-radius: 8px; background: transparent; color: var(--afropin-text-mute2); }
.bks-x:hover { background: var(--afropin-error-bg); color: var(--afropin-error); }
.bks-empty { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 12px; background: var(--brand-cream); color: var(--afropin-text-mute2); }
.bks-empty i { font-size: 22px; color: var(--brand-coral-ink); }
.bks-summary { padding: 22px; }
.bks-codes { padding: 20px 22px; }
.bks-codes-intro { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--afropin-text-prose); }
.bks-codes-example { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: var(--brand-cream); border: 1px solid var(--afropin-hairline-2); }
.bks-codes-example span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--afropin-text-mute2); }
.bks-codes .bks-codes-example code { display: block; letter-spacing: 0; border-radius: 0; box-shadow: none; font-size: 11.5px !important; overflow-x: auto; padding: 0; background: none; font-family: var(--bs-font-monospace); font-size: 12px; color: var(--afropin-text-prose); white-space: nowrap; }
.bks-codes-example code b { color: var(--brand-coral-ink); }
.bks-codes ul { margin: 0; padding: 0; list-style: none; }
.bks-codes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--afropin-hairline-2); }
.bks-codes li strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--brand-navy); }
.bks-codes li small { display: block; margin-top: 2px; font-size: 12px; color: var(--afropin-text-mute2); }
/* The code is the copy button: mono code, then a copy icon that turns into a tick once copied */
.bks-copy { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--afropin-hairline-2); border-radius: 9px; background: var(--afropin-white); color: var(--brand-navy); transition: background-color .15s, border-color .15s, color .15s; }
.bks-copy:hover { border-color: var(--brand-navy); background: var(--brand-cream); }
.bks-copy:focus-visible { outline: 2px solid var(--brand-coral-strong); outline-offset: 2px; }
.bks-copy i { font-size: 13px; color: var(--afropin-text-mute2); }
.bks-copy .bks-code { font-family: var(--bs-font-monospace); font-size: 13.5px; font-weight: 700; letter-spacing: .08em; }
.bks-copy[data-copied] { border-color: var(--afropin-success-border); background: var(--afropin-success-bg); color: var(--afropin-success-ink); }
.bks-copy[data-copied] i { color: var(--afropin-success); }
.bks-copy[data-copied] i::before { content: "\f272"; } /* bi-check2 */
.bks-summary h2, .bks-codes h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--brand-navy); }
.bks-summary dl { display: grid; gap: 10px; margin: 0 0 16px; font-size: 13px; }
.bks-summary dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--afropin-hairline-2); }
.bks-summary dt { font-weight: 500; color: var(--afropin-text-mute2); }
.bks-summary dd { margin: 0; text-align: right; font-weight: 700; color: var(--brand-navy); }
.bks-summary .bks-big { font-size: 18px; }
.bks-summary-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px; border-radius: 10px; background: var(--brand-cream); font-size: 13px; color: var(--afropin-text-mute2); }
.bks-summary-empty i { font-size: 16px; color: var(--brand-navy); }
.bks-send .form-control { text-align: center; letter-spacing: .3em; font-size: 16px; }
.rx-code-chip { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--brand-cream); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--brand-navy); vertical-align: 1px; }
[data-clipboard-text].rx-code-chip { cursor: copy; }
.rx-head.bks-list, .rx-row.bks-list { display: grid; grid-template-columns: minmax(0, 1fr) 90px 150px 150px 120px; gap: 16px; align-items: center; text-decoration: none; color: inherit; }
.rx-head.bks-list, .rx-head.bks-rows { padding: 0 20px; }
a.rx-row.bks-list:hover { background: var(--brand-cream); }
.bks-progress { padding: 22px 24px; }
.bks-progress-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.bks-bar { width: 100%; max-width: none; height: 10px; --rx-bar-color: var(--afropin-success); }
.bks-progress-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; color: var(--afropin-text-mute2); }
.bks-progress-facts b { color: var(--brand-navy); }
.bks-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 4px; }
.bks-chip { padding: 6px 14px; border: 1px solid var(--afropin-hairline-2); border-radius: 999px; background: var(--afropin-white); font-size: 12.5px; font-weight: 600; color: var(--afropin-text-mute2); }
.bks-chip.active { border-color: var(--brand-navy); background: var(--brand-navy); color: var(--afropin-white); }
.rx-head.bks-rows, .rx-row.bks-rows { display: grid; grid-template-columns: 56px minmax(0, 1.4fr) 120px minmax(0, 1.4fr) 110px; gap: 16px; align-items: center; }
@media (max-width: 1199px) {
    .bks-layout { grid-template-columns: 1fr; }
    .bks-side { position: static; }
}
@media (max-width: 767px) {
    .bks-grid { grid-template-columns: 1fr; }
    .bks-add-grid { grid-template-columns: 1fr; }
    .bks-add-grid .bks-add-wide { grid-column: auto; }
    .bks-add-go .rx-label { display: none; }
    .bks-tr { grid-template-columns: 40px minmax(0, 1fr) 90px 32px; }
    .bks-tr > :nth-child(3) { display: none; }
    .bks-step { padding: 18px; }
    .rx-head.bks-list, .rx-head.bks-rows { display: none; }
    .rx-row.bks-list { grid-template-columns: minmax(0, 1fr) 110px; }
    .rx-row.bks-list > :nth-child(2), .rx-row.bks-list > :nth-child(3), .rx-row.bks-list > :nth-child(4) { display: none; }
    .rx-row.bks-rows { grid-template-columns: minmax(0, 1fr) 110px; }
    .rx-row.bks-rows > :first-child, .rx-row.bks-rows > :nth-child(3), .rx-row.bks-rows > :nth-child(4) { display: none; }
}

/* Web till: how many PINs to sell (terminal/sell) */
.tm-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tm-qty-btn { display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid var(--afropin-border); border-radius: 14px; background: var(--afropin-white); color: var(--brand-navy); font-size: 18px; }
.tm-qty-btn:hover { border-color: var(--brand-navy); }
.tm-qty-input { width: 80px; height: 52px; border: 1.5px solid var(--afropin-border); border-radius: 14px; background: var(--afropin-white); text-align: center; font-size: 20px; font-weight: 700; color: var(--brand-navy); }
.tm-qty-input:focus { border-color: var(--brand-navy); outline: 0; }
.tm-done-sub { margin-top: -4px; margin-bottom: 8px; color: var(--afropin-text-mute2); font-size: 14px; }
.tm-masks { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }


/* Partner sidebar: the menu scrolls between the logo and the account card, which stays in view below it */
#app-sidebar .aside-menu { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#app-sidebar .aside-footer { padding: 12px 0 20px; border-top: 1px solid var(--afropin-hairline-2); }


/* Dashboard shell (admin + user): two full-height halves, Claude style. The white sidebar meets the cream workspace
   at one hairline; the workspace runs to the window's right and bottom edges, with no inset rounded box.
   Overrides the base layer's .wrapper right padding, the rounded .content and the white sticky header. */
body.aside-default-enabled { background: var(--brand-cream); }
body.aside-default-enabled #app-sidebar { border-right: 1px solid var(--afropin-hairline-2); }
body.aside-default-enabled #app-main { min-height: 100vh; background: var(--brand-cream); }
body.aside-default-enabled #app-topbar { background: var(--brand-cream); border-bottom: 1px solid var(--afropin-hairline-2); }
body.aside-default-enabled #app-content { background: transparent; border-radius: 0; }
body.aside-default-enabled #app-footer { background: var(--brand-cream); border-top: 1px solid var(--afropin-hairline-2); }
.app-footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.app-footer-links a { font-size: 13px; color: var(--afropin-text-muted); text-decoration: none; }
.app-footer-links a:hover, .app-footer-links a:focus-visible { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 3px; }
body.aside-default-enabled[data-rx-sticky-header=on] #app-topbar { background: var(--brand-cream); box-shadow: none; }
@media (min-width: 992px) {
    body.aside-default-enabled #app-sidebar { width: 272px; padding: 0 18px; }
    body.aside-default-enabled #app-sidebar .aside-menu { width: auto; }
    body.aside-default-enabled #app-sidebar-brand { padding: 28px 10px 22px !important; }
    body.aside-default-enabled #app-main { padding-left: 272px; padding-right: 0; }
    body.aside-default-enabled[data-rx-sticky-header=on] #app-topbar { left: 272px; }
    body.aside-default-enabled #app-topbar { height: 72px; }
    body.aside-default-enabled #app-topbar > .container-fluid,
    body.aside-default-enabled #app-footer > .container-fluid { padding: 0 40px; }
    body.aside-default-enabled #app-content { padding: 32px 10px 40px; }
    /* Nothing for the top bar (the console): no empty strip, the page starts at the top like the sidebar */
    body.app-frame-bare #app-topbar { display: none; }
    body.app-frame-bare[data-rx-sticky-header=on] .wrapper { padding-top: 0; }
    body.app-frame-bare #app-content { padding-top: 28px; }
}
/* Top bar: logo on the left below lg, the page's controls (test mode, bell, staff menu, drawer button) on the right */
.app-topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; }
.app-topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
#app-sidebar-brand { display: block; }
[x-cloak] { display: none !important; }

/* Input groups (₦ + amount, https:// + URL…) focus and fail as one field: the addon's border follows the input's,
   and the input drops its own ring, which would otherwise wrap only half the control */
.input-group:focus-within > .input-group-text { border-color: var(--brand-coral-strong); background-color: var(--afropin-white); }
.input-group:focus-within > .form-control:focus,
.input-group:focus-within > .form-select:focus { box-shadow: none; }
.input-group:has(> .is-invalid) > .input-group-text { border-color: var(--afropin-error); }
.input-group > .form-control.is-invalid { border-color: var(--afropin-error); }

/* Select2 (timezone, language, country pickers…) in the house style: the closed field matches rx-field inputs and
   the dropdown, which Select2 mounts on <body>, gets the brand font, cream highlight and coral-soft selection
   instead of the base layer's blue. Same selectors as plugins-skin.css, loaded later, so these win. */
.select2-container--bootstrap5 .select2-selection.form-select {
    min-height: 40px;
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 9px;
    background-color: var(--brand-cream);
    font-size: 13px;
    color: var(--afropin-text);
}
.select2-container--bootstrap5 .select2-selection__rendered { color: var(--afropin-text) !important; }
.select2-container--bootstrap5 .select2-selection__placeholder { color: var(--afropin-text-placeholder); }
.select2-container--bootstrap5.select2-container--focus .form-select:not(.form-select-solid):not(.form-select-white),
.select2-container--bootstrap5.select2-container--open .form-select:not(.form-select-solid):not(.form-select-white) {
    border-color: var(--brand-coral-strong);
    background-color: var(--afropin-white);
    box-shadow: 0 0 0 3px rgba(255, 107, 91, .15) !important;
}
.select2-container--bootstrap5 .select2-dropdown {
    margin-top: 4px;
    padding: 6px;
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 12px;
    background: var(--afropin-white);
    box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--afropin-shadow) 25%, transparent);
    font-family: var(--bs-font-sans-serif);
}
.select2-container--bootstrap5 .select2-dropdown--above { margin-top: 0; margin-bottom: 4px; }
.select2-container--bootstrap5 .select2-dropdown .select2-search { padding: 2px 0 6px; margin: 0; }
.select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 9px;
    background: var(--brand-cream);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--afropin-text);
}
.select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--brand-coral-strong);
    background: var(--afropin-white);
}
.select2-container--bootstrap5 .select2-dropdown .select2-results__options { max-height: 260px; scrollbar-width: thin; }
.select2-container--bootstrap5 .select2-dropdown .select2-results__option {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--afropin-text-prose);
}
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    background-color: var(--brand-cream);
    color: var(--brand-navy);
}
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected {
    background-color: var(--brand-coral-soft);
    color: var(--brand-navy);
    font-weight: 600;
}
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__message { color: var(--afropin-text-mute2); }

/* Date range picker (every "Any date" / "Last 6 months" filter) in the house style: brand font, cream hover,
   navy selection and a coral-soft range instead of the base layer's blue. Same selectors as plugins-skin.css (the two
   !important ones match its own), loaded later, so these win. */
.daterangepicker {
    margin-top: 6px;
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 12px;
    box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--afropin-shadow) 25%, transparent);
    font-family: var(--bs-font-sans-serif);
    color: var(--afropin-text);
}
.daterangepicker.drop-up { margin-top: 0; margin-bottom: 6px; }
.daterangepicker .ranges ul { width: 180px; padding: 6px; }
.daterangepicker .ranges li {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--afropin-text-prose);
}
.daterangepicker .ranges li:hover { background-color: var(--brand-cream); color: var(--brand-navy); }
.daterangepicker .ranges li.active { background-color: var(--brand-coral-soft); color: var(--brand-navy); font-weight: 600; }
.daterangepicker.show-calendar .ranges { border-right: 1px solid var(--afropin-hairline-2); }
.daterangepicker .drp-calendar td,
.daterangepicker .drp-calendar th { font-size: 12.5px; width: 34px; height: 34px; border-radius: 8px; }
.daterangepicker .drp-calendar th,
.daterangepicker .drp-calendar th.month { font-weight: 600; color: var(--brand-navy); }
.daterangepicker .drp-calendar thead tr:last-child th { font-size: 11px; font-weight: 600; color: var(--afropin-text-mute2); }
.daterangepicker .drp-calendar td { color: var(--afropin-text-prose); font-variant-numeric: tabular-nums; }
.daterangepicker .drp-calendar td.available.off { color: var(--afropin-text-placeholder); }
.daterangepicker .drp-calendar td:hover,
.daterangepicker .drp-calendar td.available:hover,
.daterangepicker .drp-calendar th.available:hover { background-color: var(--brand-cream); color: var(--brand-navy); }
.daterangepicker .drp-calendar th.next span,
.daterangepicker .drp-calendar th.prev span { border-color: var(--afropin-text-mute2); }
.daterangepicker .drp-calendar th.next.available:hover span,
.daterangepicker .drp-calendar th.prev.available:hover span { border-color: var(--brand-coral-ink); }
.daterangepicker .drp-calendar td.today,
.daterangepicker .drp-calendar td.today.active { background: transparent !important; color: var(--brand-coral-ink) !important; font-weight: 700; }
.daterangepicker .drp-calendar td.in-range.available:not(.active):not(.off):not(.today) { background-color: var(--brand-coral-soft); color: var(--brand-navy); border-radius: 0; }
.daterangepicker .drp-calendar td.active,
.daterangepicker .drp-calendar td.today.active.start-date,
.daterangepicker .drp-calendar td.today.active.end-date { background-color: var(--brand-navy) !important; color: var(--afropin-white) !important; font-weight: 600; }
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    border: 1px solid var(--afropin-hairline-2);
    border-radius: 8px;
    background: var(--brand-cream);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-navy);
}
.daterangepicker .drp-buttons { padding: 12px 16px; border-top: 1px solid var(--afropin-hairline-2); }
.daterangepicker .drp-selected { font-size: 12px; color: var(--afropin-text-mute2); }
.daterangepicker .drp-buttons .btn { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 12px; font-weight: 600; }
.daterangepicker .drp-buttons .applyBtn { border: 1px solid var(--brand-navy); background: var(--brand-navy); color: var(--afropin-white); }
.daterangepicker .drp-buttons .applyBtn:hover { background: color-mix(in srgb, var(--brand-navy) 88%, white); }
.daterangepicker .drp-buttons .cancelBtn,
.daterangepicker .drp-buttons .cancelBtn:hover:not(.btn-active),
.daterangepicker .drp-buttons .cancelBtn:focus:not(.btn-active) { border: 1px solid var(--afropin-hairline-2); background: var(--afropin-white); color: var(--brand-navy); }
.daterangepicker .drp-buttons .cancelBtn:hover:not(.btn-active) { background: var(--brand-cream); }

/* Native date fields (compliance dates, API key expiry) look the same in Safari, Chrome and on phones:
   Safari centres the value with its own margin and line height, iOS collapses an empty field, and only Chrome draws
   a calendar icon. One icon for every browser (stroke = --afropin-text-mute2); in Chrome the native indicator is
   made invisible and stretched over the whole field, so a click anywhere still opens the picker. */
input[type="date"].form-control {
    position: relative;
    min-height: 40px;
    padding-right: 40px;
    line-height: 1.4;
    text-align: left;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234F576B' stroke-width='1.3'%3e%3crect x='2' y='3' width='12' height='11' rx='2'/%3e%3cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}
input[type="date"].form-control::-webkit-date-and-time-value { margin: 0; text-align: left; min-height: 1.4em; }
input[type="date"].form-control::-webkit-datetime-edit { padding: 0; line-height: 1.4; }
input[type="date"].form-control::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type="date"].form-control::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; }

/* Every placeholder uses the one token (the base layer's own is #a1a5b7, too faint on cream) */
.form-control::placeholder,
.form-select::placeholder,
.rx-input::placeholder,
textarea::placeholder { color: var(--afropin-text-placeholder); opacity: 1; }

/* Partner dashboard side cards (Where PIN value went, Expiring soon, Payouts): one small type scale, label over value */
.bd-card { display: flex; flex-direction: column; gap: 18px; }
.bd-label { display: block; font-size: 12px; color: var(--afropin-text-mute2); }
.bd-note { display: block; margin-top: 2px; font-size: 12px; color: var(--afropin-text-mute2); }
.bd-big { display: block; margin-top: 2px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--brand-navy); }
.bd-next { display: flex; flex-direction: column; gap: 6px; }
.bd-date { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bd-date strong { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--brand-navy); }
.bd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 16px; border-top: 1px solid var(--afropin-hairline-2); }
.bd-stats > div { min-width: 0; }
.bd-stats strong, .bd-runway strong { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-navy); }
.bd-stats strong.tone-success { color: var(--afropin-success-ink); }
.bd-stats strong.tone-warning-ink { color: var(--afropin-warning-text); }
.bd-legend { display: flex; flex-direction: column; gap: 8px; }
.bd-legend__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.bd-legend__label { display: inline-flex; align-items: center; gap: 8px; color: var(--afropin-text); }
.bd-legend__value { font-size: 12px; color: var(--afropin-text-mute2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-legend__value strong { font-size: 13px; color: var(--brand-navy); }
.bd-legend__row.is-zero .bd-legend__label, .bd-legend__row.is-zero .bd-legend__value strong { color: var(--afropin-text-mute2); font-weight: 500; }
.bd-quiet { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 16px; border-top: 1px solid var(--afropin-hairline-2); font-size: 13px; color: var(--afropin-text-mute2); }
.bd-quiet i { color: var(--afropin-success); }
.bd-expiry { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--afropin-hairline-2); }
.bd-expiry .bd-legend__value strong.tone-warning-ink { color: var(--afropin-warning-text); }
.bd-expiry-none { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--brand-navy); }
.bd-expiry-none i { color: var(--afropin-success); }
.bd-quiet--note { align-items: flex-start; font-size: 12px; line-height: 1.5; }
.bd-quiet--note i { margin-top: 1px; color: var(--afropin-text-mute2); }
/* Admin account overview: the wallet's balances, two to a row */
.acct-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 16px; border-top: 1px solid var(--afropin-hairline-2); }
.acct-balances > div { min-width: 0; }
.acct-balances .bd-big.tone-success { color: var(--afropin-success-ink); }
.acct-balances .bd-big { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .acct-balances { grid-template-columns: minmax(0, 1fr); } }

/* Page tabs (partials/page-tabs): switch a whole page between views, on a full-width rule */
.rx-pagetabs { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; border-bottom: 1px solid var(--afropin-hairline-2); }
.rx-pagetabs__list { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.rx-pagetabs__list button, .rx-pagetabs__list a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 0 12px; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--afropin-text-mute2); white-space: nowrap; transition: color .15s; }
.rx-pagetabs__list button:hover, .rx-pagetabs__list a:hover { color: var(--brand-navy); }
.rx-pagetabs__list a { text-decoration: none; }
.rx-pagetabs__list button.active, .rx-pagetabs__list a.active { color: var(--brand-navy); }
.rx-pagetabs__list button.active::after, .rx-pagetabs__list a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand-coral); }
.rx-pagetabs__list button:focus-visible, .rx-pagetabs__list a:focus-visible { outline: 2px solid var(--brand-coral-strong); outline-offset: 2px; border-radius: 4px; }
.rx-pagetabs__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 10px; }

/* Breadcrumbs (every dashboard page): readable links that turn navy on hover, the current page in bold navy, and a
   small chevron between them instead of the base layer's faint "/". Overrides the text-muted / text-hover-danger the
   views put on the links (both !important in the theme). */
.breadcrumb { gap: 4px; margin-top: 4px; font-size: 13px !important; font-weight: 500 !important; }
.breadcrumb .breadcrumb-item { padding-right: 0; color: var(--brand-navy) !important; }
.breadcrumb .breadcrumb-item:last-child { font-weight: 600; }
.breadcrumb .breadcrumb-item:after {
    content: "\f285"; /* bi-chevron-right */
    padding: 0 0 0 4px;
    font-family: bootstrap-icons;
    font-size: 10px;
    line-height: 1;
    color: var(--afropin-text-mute2);
}
.breadcrumb .breadcrumb-item a,
.breadcrumb .breadcrumb-item.text-muted,
.breadcrumb .breadcrumb-item .text-muted { color: var(--afropin-text-mute2) !important; }
.breadcrumb .breadcrumb-item a { padding: 2px 4px; margin: 0 -4px; border-radius: 6px; text-decoration: none; transition: color .15s, background-color .15s; }
.breadcrumb .breadcrumb-item a:hover { color: var(--brand-navy) !important; background: color-mix(in srgb, var(--brand-navy) 6%, transparent); }
.breadcrumb .breadcrumb-item a:focus-visible { outline: 2px solid var(--brand-coral-strong); outline-offset: 1px; }

/* Date fields on the branded calendar (partials/date-input): the calendar icon of the native fields, a pointer, and
   a clear button on optional ones */
.rx-datefield { position: relative; }
.rx-date-input.form-control {
    min-height: 40px;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234F576B' stroke-width='1.3'%3e%3crect x='2' y='3' width='12' height='11' rx='2'/%3e%3cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}
.rx-date-input.form-control[readonly] { color: var(--afropin-text); background-color: var(--brand-cream); }
.rx-date-input.form-control:focus { background-color: var(--afropin-white); }
.rx-date-clear { position: absolute; top: 50%; right: 38px; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; font-size: 11px; color: var(--afropin-text-mute2); }
.rx-date-clear:hover { background: var(--brand-cream-deep); color: var(--brand-navy); }
/* The calendar for one date: no range shading, a single navy day */
.daterangepicker.single .drp-calendar td.in-range.available:not(.active):not(.off):not(.today) { background: transparent; color: var(--afropin-text-prose); }
/* One shape for the chosen day on every calendar, whether or not it is today: the library squares off range ends
   (and rounds a one-day range by 4px), which made the same calendar look different from form to form */
.daterangepicker .drp-calendar td.start-date { border-radius: 8px 0 0 8px; }
.daterangepicker .drp-calendar td.end-date { border-radius: 0 8px 8px 0; }
.daterangepicker .drp-calendar td.start-date.end-date,
.daterangepicker.single .drp-calendar td.active,
.daterangepicker.single .drp-calendar td.in-range { border-radius: 8px; }
.daterangepicker.single .drp-calendar.left { padding: 12px; }
/* Days outside the allowed range: faint, not crossed out */
.daterangepicker .drp-calendar td.disabled,
.daterangepicker .drp-calendar td.disabled.today { text-decoration: none; color: var(--afropin-hairline-2) !important; color: color-mix(in srgb, var(--afropin-text-mute2) 40%, transparent) !important; background: transparent !important; font-weight: 400; cursor: not-allowed; }

/* ==========================================================================
   Dark mode for the dashboards (admin + partner layouts, <html class="rx-auto-dark">), following the device's own
   setting only: there is no switch. Most of the UI is drawn from the tokens above, so the tokens get dark values:
   cream (the workspace) and white (cards, sidebar, inputs) turn into deep navy surfaces, and navy (text, primary
   buttons) turns light, so a primary button becomes light with dark text. The second half covers the base layer's own
   hard-coded colours. Logos switch to the admin's "dark logo" in the layouts (<picture>).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    html.rx-auto-dark {
        color-scheme: dark;

        /* Neutral near-black surfaces (as in Claude's dark mode), warm off-white text and light fills, coral for actions
           and active states */
        --brand-navy: #F3F1EC;
        --brand-navy-hover: #FFFFFF;
        --brand-navy-deep: #FAF9F6;
        --brand-navy-muted: #AEAAA2;
        --brand-navy-soft: #2C2C2A;

        --brand-coral-ink: #FF8C7F;
        --brand-coral-strong: #FF7A6B;
        --brand-coral-soft: #3B2723;
        --brand-coral-tint: #48302A;
        --brand-coral-border: #66392F;

        --brand-cream: #1A1A19;
        --brand-cream-deep: #2C2C2A;
        --brand-cream-line: #363634;

        --afropin-success: #4CC27A;
        --afropin-success-ink: #7AD39C;
        --afropin-success-bg: #1A2B21;
        --afropin-success-border: #284733;
        --afropin-error: #F2685B;
        --afropin-error-soft: #5C2B27;
        --afropin-error-bg: #2F1C1A;
        --afropin-error-hover: #FF968B;
        --afropin-error-border: #4D2A26;
        --afropin-warning: #F5B23B;
        --afropin-warning-text: #F5C46A;
        --afropin-warning-bg: #2D2618;
        --afropin-warning-border: #4B3D1F;

        --afropin-white: #242423;
        --afropin-shadow: #000000;
        --afropin-image-placeholder: #2C2C2A;
        --afropin-progress-track: #363634;
        --afropin-input-border: #41403D;
        --afropin-breadcrumb-sep: #5A5853;
        --afropin-dot-gray: #5A5853;

        --afropin-text-prose: #DAD7D0;
        --afropin-text-muted: #AEAAA2;
        --afropin-text-mute2: #AEAAA2;
        --afropin-text-placeholder: #9A968F;

        /* Text on a navy fill: the fill is off-white now, so this text goes dark */
        --afropin-text-on-dark: #1A1A19;
        --afropin-text-on-dark-3: #5A5853;

        /* Code stays a dark panel in both themes (its tokens are built from navy, which is light here) */
        --dx-code-bg: #141413;
        --dx-code-head: #1C1C1B;
        --dx-code-line: #2E2E2C;
        --dx-code-text: #ECEAE5;
        --dx-code-mute: #9A968F;
        --dx-bg: var(--afropin-white);
        --dx-border-strong: #4A4945;
        --dx-body: var(--afropin-text-prose);
        --dx-faint: #7E7A74;

        /* the base layer's own variables */
        --bs-body-bg: #1A1A19;
        --bs-body-color: #DAD7D0;
    }

    /* The docs (.dx) and the API log panel (.lg-panel) set their own code and surface tokens from navy and white:
       set the dark ones at the same level, or theirs win */
    html.rx-auto-dark .dx,
    html.rx-auto-dark .lg-panel {
        --dx-code-bg: #141413;
        --dx-code-head: #1C1C1B;
        --dx-code-line: #2E2E2C;
        --dx-code-text: #ECEAE5;
        --dx-code-mute: #9A968F;
        --dx-bg: var(--afropin-white);
        --dx-subtle: var(--brand-cream-deep);
        --dx-border: var(--brand-cream-line);
        --dx-border-strong: #4A4945;
        --dx-text: var(--brand-navy);
        --dx-body: var(--afropin-text-prose);
        --dx-muted: var(--afropin-text-mute2);
        --dx-faint: #7E7A74;
        --dx-accent: var(--brand-navy);
        --dx-active: var(--brand-cream-deep);
    }

    /* Docs top bar: its frosted white is a literal; API keys is the one coral action, like the dashboard's CTAs */
    html.rx-auto-dark .dx-topbar { background: color-mix(in srgb, var(--afropin-white) 92%, transparent); }
    html.rx-auto-dark .dx-btn-dark { background: var(--brand-coral); border-color: var(--brand-coral); color: #1A1A19 !important; }
    html.rx-auto-dark .dx-btn-dark:hover { background: var(--brand-coral-hover, #FF8476); border-color: var(--brand-coral-hover, #FF8476); }

    /* The current page in coral, as on the dashboard sidebar, so it can't be mistaken for the hovered one */
    html.rx-auto-dark .dx-nav-link.active { background: transparent; }

    /* Code syntax reuses light tints as text on the dark code panel; keep the light versions */
    html.rx-auto-dark .dx .token.property, html.rx-auto-dark .lg-panel .token.property { color: #FFD0C8; }
    html.rx-auto-dark .dx .token.string, html.rx-auto-dark .lg-panel .token.string { color: #BFE5CB; }

    html.rx-auto-dark body { background-color: var(--brand-cream); color: var(--afropin-text-prose); }

    /* Sidebar a shade off the workspace, as in Claude's dark mode */
    html.rx-auto-dark #app-sidebar { background-color: #1F1F1E !important; }
    html.rx-auto-dark #app-sidebar .side-nav .side-nav-link:hover:not(.active),
    html.rx-auto-dark .side-nav-summary:hover { background: var(--brand-cream-deep) !important; }
    /* The current page in coral: a coral-tinted row and a coral icon */
    html.rx-auto-dark #app-sidebar .side-nav .side-nav-link.active { background: var(--brand-coral-soft) !important; }
    html.rx-auto-dark #app-sidebar .side-nav .side-nav-link.active .text-menu,
    html.rx-auto-dark #app-sidebar .side-nav-group.has-active > .side-nav-summary .text-menu { color: var(--brand-coral) !important; }

    /* The main action on a screen is coral, with near-black text (6.2:1) */
    html.rx-auto-dark .rx-btn:not(.rx-btn-outline):not(.rx-btn-danger):not(.rx-btn-solid-danger),
    html.rx-auto-dark .btn.btn-dark,
    html.rx-auto-dark .btn.btn-primary,
    html.rx-auto-dark .btn.btn-success,
    html.rx-auto-dark .rm-submit,
    html.rx-auto-dark .wcard-add:not(.wcard-add-line),
    html.rx-auto-dark .tm-btn-primary { background: var(--brand-coral) !important; border-color: var(--brand-coral) !important; color: #1A1A19 !important; }
    html.rx-auto-dark .rx-btn:not(.rx-btn-outline):not(.rx-btn-danger):not(.rx-btn-solid-danger):hover,
    html.rx-auto-dark .btn.btn-dark:hover,
    html.rx-auto-dark .btn.btn-primary:hover,
    html.rx-auto-dark .btn.btn-success:hover,
    html.rx-auto-dark .rm-submit:hover,
    html.rx-auto-dark .wcard-add:not(.wcard-add-line):hover,
    html.rx-auto-dark .tm-btn-primary:hover { background: var(--brand-coral-hover) !important; border-color: var(--brand-coral-hover) !important; }
    html.rx-auto-dark .rx-btn:not(.rx-btn-outline):not(.rx-btn-danger):not(.rx-btn-solid-danger) *,
    html.rx-auto-dark .btn.btn-dark *, html.rx-auto-dark .btn.btn-primary *, html.rx-auto-dark .btn.btn-success *,
    html.rx-auto-dark .rm-submit *, html.rx-auto-dark .wcard-add:not(.wcard-add-line) *, html.rx-auto-dark .tm-btn-primary * { color: inherit !important; }

    /* Navy panels and tiles would become large off-white blocks: a raised surface and a coral tile instead */
    html.rx-auto-dark .rx-hero { background: var(--brand-cream-deep); color: var(--brand-navy); }
    html.rx-auto-dark .rx-hero-title { color: var(--brand-navy); }
    html.rx-auto-dark .rx-hero-sub { color: var(--afropin-text-mute2); }
    html.rx-auto-dark .symbol-label.bg-dark { background: var(--brand-cream-deep) !important; color: var(--brand-navy) !important; }
    html.rx-auto-dark .rm-icon-navy { background: var(--brand-coral-soft); border-color: var(--brand-coral-border); color: var(--brand-coral); }

    /* Base-layer surfaces and text that are hard-coded white / near-black */
    html.rx-auto-dark .bg-white,
    html.rx-auto-dark .bg-body,
    html.rx-auto-dark .card,
    html.rx-auto-dark .modal-content,
    html.rx-auto-dark .dropdown-menu,
    html.rx-auto-dark .menu-sub-dropdown,
    html.rx-auto-dark .popover,
    html.rx-auto-dark .drawer,
    html.rx-auto-dark .daterangepicker,
    html.rx-auto-dark .daterangepicker .calendar-table,
    html.rx-auto-dark .select2-container--bootstrap5 .select2-dropdown { background-color: var(--afropin-white) !important; }
    html.rx-auto-dark .card,
    html.rx-auto-dark .modal-content,
    html.rx-auto-dark .modal-header,
    html.rx-auto-dark .modal-footer,
    html.rx-auto-dark .daterangepicker .calendar-table { border-color: var(--afropin-hairline-2); }
    html.rx-auto-dark h1, html.rx-auto-dark h2, html.rx-auto-dark h3,
    html.rx-auto-dark h4, html.rx-auto-dark h5, html.rx-auto-dark h6,
    html.rx-auto-dark .text-dark,
    html.rx-auto-dark .text-gray-900,
    html.rx-auto-dark .text-gray-800,
    html.rx-auto-dark .text-body,
    html.rx-auto-dark .card-title,
    html.rx-auto-dark .modal-title { color: var(--brand-navy) !important; }
    html.rx-auto-dark .text-gray-700,
    html.rx-auto-dark .text-gray-600,
    html.rx-auto-dark .text-muted { color: var(--afropin-text-mute2) !important; }
    /* White text sits on navy fills (buttons, badges), which are light now */
    html.rx-auto-dark .text-white { color: var(--afropin-white) !important; }
    html.rx-auto-dark .form-control,
    html.rx-auto-dark .form-select,
    html.rx-auto-dark .input-group-text { background-color: var(--brand-cream); border-color: var(--afropin-hairline-2); color: var(--afropin-text); }
    html.rx-auto-dark .form-control:focus,
    html.rx-auto-dark .form-select:focus { background-color: var(--afropin-white); }
    html.rx-auto-dark .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A0A9BC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
    html.rx-auto-dark .form-check-input { background-color: var(--brand-cream-deep); border-color: var(--afropin-input-border); }
    /* Checked radios and checkboxes: navy turns light here, so coral (the dark-mode action colour) with the white mark */
    html.rx-auto-dark .form-check-input:checked,
    html.rx-auto-dark .rm-toggle .form-check-input:checked { background-color: var(--brand-coral); border-color: var(--brand-coral); }
    html.rx-auto-dark .form-check-input[type=checkbox]:not([role=switch]):not(.form-switch .form-check-input):checked { background-color: var(--brand-coral); border-color: var(--brand-coral); }
    /* Switches: navy turns light here, so "on" is coral (the dark-mode action colour) and "off" a dark track with a grey knob */
    html.rx-auto-dark .form-switch .form-check-input,
    html.rx-auto-dark .form-check.form-check-solid.form-switch .form-check-input { background-color: #454542; border-color: transparent; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23A8A8A2'/%3e%3c/svg%3e"); }
    html.rx-auto-dark .form-switch .form-check-input:checked,
    html.rx-auto-dark .form-check.form-check-solid.form-switch .form-check-input:checked { background-color: var(--brand-coral); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e"); }
    html.rx-auto-dark .separator,
    html.rx-auto-dark .border-gray-200,
    html.rx-auto-dark .border-gray-300,
    html.rx-auto-dark .table > :not(caption) > * > * { border-color: var(--afropin-hairline-2) !important; }
    html.rx-auto-dark .table { color: var(--afropin-text-prose); }
    html.rx-auto-dark .dropdown-item { color: var(--afropin-text-prose); }
    html.rx-auto-dark .dropdown-item:hover,
    html.rx-auto-dark .dropdown-item:focus { background-color: var(--brand-cream-deep); color: var(--brand-navy); }
    html.rx-auto-dark .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
    html.rx-auto-dark .modal-backdrop.show,
    html.rx-auto-dark .drawer-overlay { background-color: #000; opacity: .6; }
    html.rx-auto-dark .drawer.drawer-on { border-color: rgba(255, 255, 255, .08); box-shadow: -24px 0 56px -8px rgba(0, 0, 0, .55); }
    html.rx-auto-dark .drawer.drawer-start.drawer-on { box-shadow: 24px 0 56px -8px rgba(0, 0, 0, .55); }
    html.rx-auto-dark .lg-overlay,
    html.rx-auto-dark .po-overlay { background: rgba(0, 0, 0, .6); }
    /* The saved logo is painted on .image-input itself, so the fill goes there; filling the wrapper would cover it */
    html.rx-auto-dark .image-input { background-color: var(--brand-cream-deep); }
    html.rx-auto-dark .image-input.image-input-outline .image-input-wrapper { border-color: var(--afropin-hairline-2); }
    html.rx-auto-dark .tooltip-inner { background-color: #F3F1EC; color: #1A1A19; }

    /* Charts: ApexCharts' own tooltip and labels */
    html.rx-auto-dark .apexcharts-tooltip.apexcharts-theme-light { background: var(--afropin-white) !important; border-color: var(--afropin-hairline-2) !important; color: var(--afropin-text-prose); }
    html.rx-auto-dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: var(--brand-cream-deep) !important; border-color: var(--afropin-hairline-2) !important; }
    html.rx-auto-dark .apexcharts-xaxistooltip { background: var(--afropin-white); border-color: var(--afropin-hairline-2); color: var(--afropin-text-prose); }
    html.rx-auto-dark .apexcharts-legend-text { color: var(--afropin-text-prose) !important; }

    /* Shadows built for a light page read as smudges on a dark one */
    html.rx-auto-dark .shadow-sm, html.rx-auto-dark .shadow { box-shadow: none !important; }
}

/* Sidebar link titles: the id beats the base layer's .menu-title-dark rule, which hard-codes a near-black (invisible in
   dark mode) */
#app-sidebar .side-nav .menu-link .menu-title { color: var(--brand-navy); }

/* Rich text fields (partials/rich-editor, Tiptap): toolbar and page are one field, drawn from the tokens, so they
   follow dark mode with no skin of their own */
.rx-editor { overflow: hidden; border: 1px solid var(--afropin-hairline-2); border-radius: 10px; background: var(--brand-cream); transition: border-color .15s, box-shadow .15s; }
.rx-editor.is-focused { border-color: var(--brand-coral-strong); box-shadow: 0 0 0 3px rgba(255, 107, 91, .15); }
.rx-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--afropin-hairline-2); background: var(--afropin-white); }
.rx-editor-btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; font-size: 13px; font-weight: 700; color: var(--afropin-text-mute2); transition: background-color .15s, color .15s; }
.rx-editor-btn i { font-size: 15px; }
.rx-editor-btn:hover:not(:disabled) { background: var(--brand-cream-deep); color: var(--brand-navy); }
.rx-editor-btn.is-active { background: var(--brand-coral-soft); color: var(--brand-coral-ink); }
.rx-editor-btn:disabled { opacity: .35; cursor: default; }
.rx-editor-btn:focus-visible { outline: 2px solid var(--brand-coral-strong); outline-offset: 1px; }
.rx-editor-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--afropin-hairline-2); }
.rx-editor-linkbar { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--afropin-hairline-2); background: var(--afropin-white); }
.rx-editor-linkbar .form-control { height: 32px; min-height: 0; font-size: 13px; }
.rx-editor-doc { min-height: 220px; max-height: 560px; overflow-y: auto; padding: 14px 16px; outline: 0; font-size: 14px; line-height: 1.65; color: var(--afropin-text-prose); }
.rx-editor-doc > * + * { margin-top: .75em; }
.rx-editor-doc p { margin-bottom: 0; }
.rx-editor-doc h2 { margin: 1.1em 0 .3em; font-size: 18px; font-weight: 700; color: var(--brand-navy); }
.rx-editor-doc h3 { margin: 1em 0 .25em; font-size: 15px; font-weight: 700; color: var(--brand-navy); }
.rx-editor-doc > :first-child { margin-top: 0; }
.rx-editor-doc ul, .rx-editor-doc ol { margin-bottom: 0; padding-left: 1.4em; }
.rx-editor-doc li > p { margin: 0; }
.rx-editor-doc a { color: var(--brand-coral-ink); text-decoration: underline; }
.rx-editor-doc strong { color: var(--brand-navy); }
.rx-editor-doc blockquote { margin-left: 0; padding-left: 12px; border-left: 3px solid var(--brand-coral-border); color: var(--afropin-text-mute2); }
.rx-editor-doc code { padding: 1px 5px; border-radius: 5px; background: var(--brand-cream-deep); font-family: var(--bs-font-monospace); font-size: 12.5px; color: var(--brand-navy); }
.rx-editor-doc p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; pointer-events: none; color: var(--afropin-text-placeholder); }
/* Text with its own line breaks (PIN type instructions and terms, as plain text) */
.rx-pre-line { white-space: pre-line; }
/* Rich text people wrote (ticket messages), printed through Text::safeHtml */
.rx-rich > * + * { margin-top: .6em; }
.rx-rich p { margin: 0; }
.rx-rich ul, .rx-rich ol { margin: 0; padding-left: 1.3em; }
.rx-rich a { color: var(--brand-coral-ink); text-decoration: underline; }
.rx-rich code { padding: 1px 5px; border-radius: 5px; background: var(--brand-cream-deep); font-family: var(--bs-font-monospace); font-size: .9em; }
.rx-rich blockquote { margin: 0; padding-left: 10px; border-left: 3px solid var(--brand-coral-border); }

/* Tagify (file types, IP allow-lists): field, chips and dropdown from the tokens, so light and dark both follow the
   brand. "html .tagify" outranks both the base layer's skin and the CDN tagify.css the partner layout loads after us. */
html .tagify {
    --tags-border-color: var(--afropin-hairline-2);
    --tags-hover-border-color: var(--afropin-input-border);
    --tags-focus-border-color: var(--brand-coral-strong);
    --tag-bg: var(--afropin-white);
    --tag-hover: var(--brand-cream-deep);
    --tag-text-color: var(--brand-navy);
    --tag-text-color--edit: var(--brand-navy);
    --tag-pad: .25rem .55rem;
    --tag-border-radius: 8px;
    --tag-inset-shadow-size: 1.4rem;
    --tag-invalid-color: var(--afropin-error);
    --tag-invalid-bg: var(--afropin-error-bg);
    --tag-remove-bg: var(--afropin-error-bg);
    --tag-remove-btn-color: var(--afropin-text-mute2);
    --tag-remove-btn-bg: transparent;
    --tag-remove-btn-bg--hover: transparent;
    --input-color: var(--brand-navy);
    --placeholder-color: var(--afropin-text-placeholder) !important;
    --placeholder-color-focus: var(--afropin-text-placeholder) !important;
    min-height: 44px;
    padding: 4px 6px;
    border: 1px solid var(--tags-border-color);
    border-radius: 10px;
    background-color: var(--brand-cream);
    font-size: 13px;
}
html .tagify.tagify--focus { border-color: var(--brand-coral-strong); background-color: var(--afropin-white); box-shadow: 0 0 0 3px rgba(255, 107, 91, .15); }
html .tagify .tagify__tag { margin: 3px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--afropin-hairline-2); background-color: var(--tag-bg); }
html .tagify .tagify__tag > div { padding: var(--tag-pad); border-radius: 8px; }
html .tagify .tagify__tag-text { font-weight: 600; color: var(--brand-navy); }
html .tagify .tagify__tag:hover:not([readonly]) { background-color: var(--tag-hover); }
/* The remove button: a plain "×" in the text colour, red on hover (the base skin draws it as a grey image) */
html .tagify .tagify__tag .tagify__tag__removeBtn { width: 18px; height: 18px; margin-right: 6px; border-radius: 5px; background: none !important; color: var(--afropin-text-mute2); font: 14px/18px var(--bs-font-sans-serif); }
html .tagify .tagify__tag .tagify__tag__removeBtn::after { display: block; content: "×"; text-align: center; }
html .tagify .tagify__tag .tagify__tag__removeBtn:hover { background: var(--afropin-error-bg) !important; color: var(--afropin-error); }
html .tagify .tagify__tag.tagify--notAllowed div .tagify__tag-text { color: var(--afropin-error); opacity: 1; }
html .tagify__dropdown { --tagify-dd-bg-color: var(--afropin-white); --tagify-dd-text-color: var(--afropin-text-prose); --tagify-dd-color-primary: var(--brand-coral); }
html .tagify__dropdown__wrapper { border: 1px solid var(--afropin-hairline-2); border-radius: 10px; background: var(--afropin-white); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--afropin-shadow) 25%, transparent); }
html .tagify__dropdown__item--active { background: var(--brand-cream-deep); color: var(--brand-navy); }
/* Logos are wrapped in <picture> for the dark-mode logo; the wrapper must not change how the image sizes itself
   (the admin header logo's max-width: 50% is measured against the header) */
#app-topbar picture, #app-sidebar-brand picture, .rm-brand picture, .tm-logo picture, .dx-brand picture { display: contents; }
/* Customer cards sit three across: the three figures get the row, "View all" goes on its own line at the right */
.rev-stats .cust-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
.rev-stats .cust-foot-label { white-space: normal; line-height: 1.3; }
.rev-stats .cust-foot-link { grid-column: 1 / -1; justify-self: end; }

/* Date picker: days from the next or previous month sit on the plugin's hard-coded white; make them faint text on the
   calendar's own surface in both themes */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date,
.daterangepicker .drp-calendar td.available.off { background-color: transparent !important; color: var(--afropin-text-placeholder) !important; border-radius: 8px; }
.daterangepicker td.off.available:hover { background-color: var(--brand-cream-deep) !important; color: var(--brand-navy) !important; }
@media (prefers-color-scheme: dark) {
    /* The chosen day in coral, like the other main actions in dark mode */
    html.rx-auto-dark .daterangepicker .drp-calendar td.active,
    html.rx-auto-dark .daterangepicker .drp-calendar td.today.active.start-date,
    html.rx-auto-dark .daterangepicker .drp-calendar td.today.active.end-date { background-color: var(--brand-coral) !important; color: #1A1A19 !important; }
}

/* Dashboard type scale (partner and admin dashboards). Seven steps, one secondary grey:
   page title 24/600 · figure 28/700 · figure-sm 22/700 · card title 16/600 · body 13/600 navy or 13/400 grey
   · label 13/500 grey · meta 12/400 grey · eyebrow 12/700 caps */
.rx-page-title { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--brand-navy); }
.rx-card-title { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--brand-navy); }
.rx-page-sub { font-size: 14px; line-height: 1.45; color: var(--afropin-text-mute2); }
.rx-text-row { font-size: 13px; line-height: 1.4; }
.rx-card-sub { display: block; font-size: 13px; line-height: 1.45; color: var(--afropin-text-mute2); }
.rx-eyebrow { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-navy); }
.rx-stat-label { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--afropin-text-mute2); }
.rx-meta { font-size: 12px; line-height: 1.45; color: var(--afropin-text-mute2); }
.rx-strong { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--brand-navy); }
.kpi-value { font-size: 28px !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -.02em; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.bd-kpis .kpi-value { font-size: clamp(22px, 15cqi, 28px) !important; }
.wcard-amount { font-weight: 700; letter-spacing: -.02em; }
.wcard-name { font-size: 13px; }
.wcard-code, .wcard-label, .wcard-note, .bd-label, .bd-note, .bd-activity__time, .bd-legend__value, .att-desc, .cust-foot-label { font-size: 12px; color: var(--afropin-text-mute2); }
.wcard-label, .bd-label { font-size: 13px; font-weight: 500; }
.bd-big { font-size: 22px; letter-spacing: -.02em; }
.bd-activity__sub { font-size: 12px; }
.bd-activity__amount, .bd-legend__value strong { font-weight: 600; }
.bd-legend__row, .bd-legend__value strong { font-size: 13px; }
.bd-legend__label { color: var(--brand-navy); }
.rev-segment__btn { font-size: 12px !important; }
.rx-card-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--afropin-text-mute2); white-space: nowrap; }
.rx-card-link:hover { color: var(--brand-navy); }
.rx-card-link i { font-size: 11px; }
.cust-foot-label { font-size: 12px; }
.rev-stats .cust-foot-value, .bd-stats strong, .bd-runway strong { font-size: 16px; }
.att-count { font-size: 12px; }
.bd-date strong { font-size: 22px; letter-spacing: -.02em; }
.rev-stats .rev-control { font-size: 13px; }
.att-count { color: var(--afropin-text-mute2); }

/* App-wide additions to the type scale: heading 18/700 (detail headers, empty states), empty-state text 14 grey */
.rx-empty-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--brand-navy); }
.rx-empty-text { font-size: 14px; line-height: 1.55; color: var(--afropin-text-mute2); }
.rx-amount small, .rx-date small { font-size: 12px; }
.rx-metric-value, .rx-stat-value.fs-6 { font-size: 16px !important; }
.lg-path-text, .st-desc { font-size: 12px; }
/* Helper text and small notes sit on the 12px meta step; form-section captions match the dashboard eyebrow size */
.rx-hint, .rx-option-desc, .rx-metric-sub, .rev-stats .cust-foot-label, .st-meta { font-size: 12px; }
.rx-section-title { font-size: 12px; }

/* ---------- Gift card requests (partner/product-requests): a numbered form with explained, recommended options ---------- */
.gcr-form { display: grid; gap: 20px; padding-bottom: 40px; }
.gcr-step { padding: 28px; }
.gcr-step-head { display: flex; gap: 16px; margin-bottom: 22px; }
.gcr-step-head h2 { margin: 2px 0 4px; font-size: 17px; font-weight: 700; color: var(--brand-navy); }
.gcr-step-head p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--afropin-text-muted); }
.gcr-step-n { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-navy); color: var(--afropin-white); font-size: 13px; font-weight: 700; }
.gcr-grid { display: grid; gap: 0 20px; }
@media (min-width: 768px) { .gcr-grid { grid-template-columns: 1fr 1fr; } }
.gcr-narrow { max-width: 300px; }
.gcr-options + .rx-field, .gcr-options + .gcr-grid { margin-top: 20px; }
.gcr-q { margin: 26px 0 12px; font-size: 14px; font-weight: 600; color: var(--brand-navy); }

/* Option tiles: a radio or checkbox card, the chosen one outlined in coral */
.gcr-options { display: grid; gap: 12px; }
@media (min-width: 768px) { .gcr-options { grid-template-columns: 1fr 1fr; } .gcr-options-3 { grid-template-columns: repeat(3, 1fr); } }
.gcr-option { position: relative; display: block; padding: 16px 18px; border: 1.5px solid var(--afropin-hairline-2); border-radius: 12px; background: var(--afropin-white); cursor: pointer; transition: border-color .15s, background-color .15s; }
.gcr-option:hover { border-color: var(--brand-navy-muted); }
/* The tile is the control: hide its own radio or checkbox, never a field asked inside it */
label.gcr-option > input, .gcr-option-hit > input { position: absolute; opacity: 0; pointer-events: none; }
.gcr-option.is-on { border-color: var(--brand-coral); background: var(--brand-cream); }
/* Keyboard focus only (not after a click): a soft glow that hugs the border rather than a second ring */
label.gcr-option:has(> input:focus-visible), .gcr-option:has(> .gcr-option-hit > input:focus-visible) { box-shadow: 0 0 0 4px var(--brand-coral-soft); }
.gcr-option-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--brand-navy); }
.gcr-option-desc { display: block; font-size: 13px; line-height: 1.55; color: var(--afropin-text-muted); }
.gcr-rec { padding: 2px 8px; border-radius: 999px; background: var(--brand-coral-soft, rgba(255, 107, 91, .14)); color: var(--brand-coral-ink); font-size: 11px; font-weight: 700; letter-spacing: .02em; }

.gcr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gcr-chip input { position: absolute; opacity: 0; pointer-events: none; }
.gcr-chip span { display: inline-block; padding: 7px 14px; border: 1px solid var(--afropin-hairline-2); border-radius: 999px; font-size: 13px; color: var(--brand-navy); cursor: pointer; }
.gcr-chip input:checked + span { border-color: var(--brand-coral); background: var(--brand-cream); font-weight: 600; }
.gcr-chip input:focus-visible + span { outline: 2px solid var(--brand-coral); outline-offset: 2px; }

.gcr-amounts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gcr-amount { display: flex; align-items: center; gap: 4px; }
.gcr-amount .form-control { width: 130px; }

/* Artwork: a preview at the right shape beside its spec */
.gcr-art { display: grid; gap: 24px; }
.gcr-art-item { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; }
@media (max-width: 575px) { .gcr-art-item { grid-template-columns: 1fr; } }
.gcr-art-item h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--brand-navy); }
.gcr-art-preview { display: grid; place-items: center; overflow: hidden; border: 1.5px dashed var(--afropin-hairline-2); border-radius: 12px; background: var(--brand-cream); color: var(--afropin-text-muted); font-size: 13px; font-weight: 600; }
.gcr-art-preview img { width: 100%; height: 100%; object-fit: contain; }
.gcr-art-square { width: 150px; aspect-ratio: 1; }
.gcr-art-card { width: 150px; aspect-ratio: 3 / 2; }
.gcr-spec { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--afropin-text-prose); }
.gcr-spec li { display: grid; grid-template-columns: 84px 1fr; gap: 8px; }
.gcr-spec b { font-weight: 600; color: var(--brand-navy); }

.gcr-colour { display: flex; gap: 8px; align-items: center; }
.gcr-colour input[type="color"] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--afropin-hairline-2); border-radius: 8px; background: var(--afropin-white); cursor: pointer; }

.gcr-submit { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0; background: linear-gradient(to top, var(--afropin-page, var(--brand-cream)) 70%, transparent); }

/* Request list */
.gcr-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; }
.gcr-note { display: flex; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--brand-cream); font-size: 13px; line-height: 1.5; color: var(--afropin-text-prose); }
.gcr-note i { color: var(--brand-coral-ink); }
.gcr-review-art { display: flex; gap: 12px; align-items: flex-start; }
.gcr-art-wide { width: 210px; }
.gcr-swatch { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border-radius: 4px; vertical-align: -2px; border: 1px solid var(--afropin-hairline-2); }
.gcr-text { margin-bottom: 12px; font-size: 13px; line-height: 1.6; color: var(--afropin-text-prose); }
.gcr-text b { display: block; margin-bottom: 2px; color: var(--brand-navy); }
/* A failed send: the count beside the send button, and a brief coral outline on the step with the first problem */
.gcr-submit { align-items: center; }
.gcr-submit-errors { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; font-weight: 600; color: var(--afropin-error); }
.gcr-flag { animation: gcr-flag 1.6s ease-out 1; }
@keyframes gcr-flag { 0%, 40% { box-shadow: 0 0 0 3px var(--brand-coral); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .gcr-flag { animation: none; outline: 2px solid var(--brand-coral); } }
/* A tile that asks a follow-up question once chosen: only its top part toggles the choice */
div.gcr-option { cursor: default; }
.gcr-option-hit { display: block; cursor: pointer; }
.gcr-option-more { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--afropin-hairline-2); }
.gcr-option-more .form-control { max-width: 220px; background: var(--afropin-white); }
.gcr-option-more .rx-hint, .gcr-option-more .rx-error { display: block; }

/* Artwork: two upload cards, the preview is the button (and a drop target), then a strip of optional extras */
.gcr-uploads { display: grid; gap: 16px; }
@media (min-width: 992px) { .gcr-uploads { grid-template-columns: 1fr 1fr; } }
.gcr-upload { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--afropin-hairline-2); border-radius: 14px; background: var(--afropin-white); }
.gcr-upload.has-error { border-color: var(--afropin-error); }
.gcr-upload-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gcr-upload-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--brand-navy); }
.gcr-upload-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--afropin-success); }

.gcr-drop { position: relative; display: grid; place-items: center; overflow: hidden; border: 1.5px dashed var(--afropin-hairline-2); border-radius: 12px; background: var(--brand-cream); cursor: pointer; transition: border-color .15s, background-color .15s; }
/* Both previews the same height, each in its own shape, so the two cards line up */
.gcr-drop-square, .gcr-drop-card { height: 210px; width: auto; max-width: 100%; margin: 0 auto; }
.gcr-drop-square { aspect-ratio: 1; }
.gcr-drop-card { aspect-ratio: 3 / 2; }
.gcr-drop:hover, .gcr-drop.is-over { border-color: var(--brand-coral); background: var(--brand-coral-tint, var(--brand-cream)); }
.gcr-drop img { width: 100%; height: 100%; object-fit: contain; }
.gcr-drop-empty { display: grid; justify-items: center; gap: 2px; padding: 16px; text-align: center; color: var(--afropin-text-muted); }
.gcr-drop-empty i { font-size: 28px; color: var(--brand-coral-ink); margin-bottom: 4px; }
.gcr-drop-empty strong { font-size: 14px; color: var(--brand-navy); }
.gcr-drop-empty small { font-size: 12.5px; }
.gcr-drop-replace { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(11, 27, 59, .78); color: #fff; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .15s; }
.gcr-drop:hover .gcr-drop-replace, .gcr-drop:focus-within .gcr-drop-replace { opacity: 1; }
.gcr-drop-busy { position: absolute; inset: 0; align-items: center; justify-content: center; gap: 8px; background: rgba(255, 255, 255, .75); font-size: 13px; font-weight: 600; color: var(--brand-navy); }
.gcr-drop:focus-within { box-shadow: 0 0 0 4px var(--brand-coral-soft); }

.gcr-chips-spec { display: flex; flex-wrap: wrap; gap: 6px; }
.gcr-chips-spec span { padding: 4px 10px; border-radius: 999px; background: var(--brand-cream); font-size: 12px; font-weight: 600; color: var(--brand-navy); }
.gcr-upload-tip { margin: 0; font-size: 13px; line-height: 1.55; color: var(--afropin-text-muted); }

.gcr-extras { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 992px) { .gcr-extras { grid-template-columns: 1fr 1fr; } }
.gcr-extra { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--afropin-hairline-2); border-radius: 14px; }
.gcr-extra-ic { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--brand-cream); color: var(--brand-coral-ink); font-size: 17px; }
.gcr-extra-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-navy); }
.gcr-extra-title .tone-danger { font-size: 12px; font-weight: 600; }
.gcr-extra-opt { padding: 2px 8px; border-radius: 999px; background: var(--brand-cream); font-size: 11px; font-weight: 600; color: var(--afropin-text-muted); }
.gcr-extra-desc { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--afropin-text-muted); }
.gcr-extra .gcr-colour .form-control { width: 110px; }
@media (max-width: 575px) { .gcr-extra { flex-wrap: wrap; } }

/* Hidden until Livewire shows it while a file uploads */
.gcr-drop-busy { display: none; }

/* Catalog drawer: download the product's logo and card art */
.cat-assets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cat-assets-label { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--brand-navy); }

/* Brand dashboard: "Get live" checklist (App\Support\BrandLaunch) */
.gl-card { padding: 24px; border: 1px solid var(--afropin-hairline-2); border-radius: 16px; background: var(--afropin-white); }
.gl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.gl-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--brand-navy); }
.gl-sub { margin: 0; max-width: 560px; font-size: 13.5px; line-height: 1.55; color: var(--afropin-text-muted); }
.gl-progress-wrap { display: grid; gap: 6px; min-width: 220px; }
.gl-count { font-size: 13px; font-weight: 600; color: var(--brand-navy); text-align: right; }
.gl-progress { display: block; height: 6px; border-radius: 999px; background: var(--brand-cream-deep); overflow: hidden; }
.gl-progress span { display: block; height: 100%; border-radius: inherit; background: var(--brand-coral); transition: width .4s ease; }
.gl-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.gl-step { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--afropin-hairline-2); }
.gl-mark { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--afropin-hairline-2); font-size: 13px; font-weight: 700; color: var(--afropin-text-muted); }
.gl-body { display: grid; flex: 1; min-width: 0; gap: 2px; }
.gl-label { font-size: 14px; font-weight: 600; color: var(--brand-navy); }
.gl-desc { font-size: 13px; line-height: 1.5; color: var(--afropin-text-muted); }
.gl-state { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: var(--brand-cream); font-size: 12px; font-weight: 600; color: var(--afropin-text-muted); }
/* Done: the green tick says it; the text just steps back (no strike-through) */
.gl-step.is-done .gl-mark { border-color: var(--afropin-success); background: var(--afropin-success); color: var(--afropin-white); }
.gl-step.is-done .gl-label { color: var(--afropin-text-muted); font-weight: 500; }
.gl-step.is-waiting .gl-mark { border-color: var(--brand-coral); color: var(--brand-coral-ink); }
.gl-step.is-locked { opacity: .55; }
.gl-step.is-next { margin: 0 -12px; padding: 14px 16px; border-radius: 12px; border-top-color: transparent; background: var(--brand-cream); }
.gl-step.is-next + .gl-step { border-top-color: transparent; }
/* --afropin-white is the page surface in either theme, so the number always contrasts with the navy (light in dark mode) */
.gl-step.is-next .gl-mark { border-color: var(--brand-navy); background: var(--brand-navy); color: var(--afropin-white); }
/* Staff view of the checklist (Compliance): anchored sections leave room for the sticky header when jumped to */
#gl-verification, #gl-agreement, #gl-flags { scroll-margin-top: 96px; }
@media (max-width: 575px) { .gl-step { flex-wrap: wrap; } .gl-step > .rx-btn, .gl-state { margin-left: 46px; } }

/* Partner payouts: two summary figures, the list, and each payout's statement */
.pyo-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pyo-summary > div { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--afropin-hairline-2); border-radius: 14px; background: var(--afropin-white); }
.pyo-summary span { font-size: 12.5px; font-weight: 600; color: var(--afropin-text-muted); }
.pyo-summary strong { font-size: 22px; font-weight: 700; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.pyo-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px 130px 130px; gap: 16px; align-items: center; }
@media (max-width: 767px) { .pyo-row { grid-template-columns: 1fr auto; } }
.pyo-sum { display: grid; margin-bottom: 12px; padding: 14px 16px; border-radius: 12px; background: var(--brand-cream); }
.pyo-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; color: var(--afropin-text-prose); }
.pyo-sum b { color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.pyo-sum .is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--afropin-hairline-2); font-weight: 600; color: var(--brand-navy); }
.pyo-sum .is-total b { font-size: 17px; }
.pyo-when { display: flex; gap: 8px; align-items: center; margin: 0 0 18px; font-size: 13px; color: var(--afropin-text-muted); }
.pyo-lines { display: grid; }
.pyo-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--afropin-hairline-2); }
.pyo-line b { font-size: 13.5px; color: var(--brand-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pyo-line-type { font-size: 13.5px; font-weight: 600; color: var(--brand-navy); }
.pyo-ref { margin-left: 6px; font-family: var(--afropin-mono, ui-monospace, monospace); font-size: 12px; font-weight: 500; color: var(--afropin-text-muted); }
.pyo-line-sub { font-size: 12.5px; color: var(--afropin-text-muted); }
/* Payouts page: next payout and each currency's totals, side by side */
.pyo-schedule { display: grid; gap: 12px; }
@media (min-width: 992px) { .pyo-schedule { grid-template-columns: minmax(260px, 1fr) 2fr; } }
.pyo-next, .pyo-wallet { padding: 18px 20px; border: 1px solid var(--afropin-hairline-2); border-radius: 14px; background: var(--afropin-white); }
.pyo-next { display: grid; gap: 4px; }
.pyo-wallet-code { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; background: var(--brand-cream); font-size: 12px; font-weight: 700; color: var(--brand-navy); }
.pyo-wallet-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pyo-wallet-figures > div { display: grid; gap: 2px; }
.pyo-wallet-figures strong { font-size: 20px; font-weight: 700; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.pyo-line-grid { display: grid; grid-template-columns: 1fr auto 72px; gap: 16px; align-items: center; }
.pyo-line-grid .rx-action { text-align: right; }
.pyo-search .rx-input { width: 320px; }
@media (max-width: 767.98px) {
    .pyo-search, .pyo-search .rx-input { width: 100%; }
    .pyo-line-grid { grid-template-columns: 1fr auto; }
    .pyo-line-grid .rx-action { grid-column: 1 / -1; text-align: left; }
}

/* Brand > Resellers: who sells the brand's gift cards */
.rx-stats.rsl-stats { grid-template-columns: repeat(3, 1fr); }
.rsl-stats .rx-meta { margin-top: 4px; }
@media (max-width: 991px) {
    .rx-stats.rsl-stats { grid-template-columns: 1fr; }
    .rsl-stats .rx-stat { border-left: 0; border-top: 1px solid var(--afropin-hairline-2); }
    .rsl-stats .rx-stat:first-child { border-top: 0; }
}
.rx-head.rsl-grid,
.rx-row.rsl-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
@media (max-width: 1199px) {
    .rx-head.rsl-grid { display: none; }
    .rx-row.rsl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 16px; padding-bottom: 16px; }
    .rx-row.rsl-grid > :first-child { grid-column: 1 / -1; }
    .rx-row.rsl-grid .rx-cell-label { display: block; }
}

/* A brand's quote, as the paying business sees it (Site\QuotePay) */
.qt-sum { display: grid; margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: var(--brand-cream); }
.qt-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; color: var(--afropin-text-prose); }
.qt-sum dt { font-weight: 500; }
.qt-sum dd { margin: 0; color: var(--brand-navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.qt-sum .is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--afropin-hairline-2); font-weight: 600; color: var(--brand-navy); }
.qt-sum .is-total dd { font-size: 17px; }

/* Brand > Campaigns: promotions and quotes */
.rx-row.cmp-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .9fr) 180px; gap: 16px; align-items: center; }
@media (max-width: 1199px) {
    .rx-row.cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 16px; padding-bottom: 16px; }
    .rx-row.cmp-grid > :first-child, .rx-row.cmp-grid .rx-action { grid-column: 1 / -1; justify-content: flex-start !important; }
    .rx-row.cmp-grid .rx-cell-label { display: block; }
}

/* Campaign empty states: a coral icon tile and the three steps of how it works */
.cmp-empty .rx-empty-icon { background: var(--brand-coral-soft) !important; border-color: var(--brand-coral-border); }
.cmp-empty .rx-empty-icon-glyph { color: var(--brand-coral-ink); }
.cmp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 28px auto 28px; text-align: left; }
.cmp-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--brand-cream); border: 1px solid var(--afropin-hairline-2); }
.cmp-step-no { flex: 0 0 26px; height: 26px; line-height: 1; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--brand-coral-ink); background: var(--brand-coral-soft); border: 1px solid var(--brand-coral-border); }
.cmp-step > div > b { display: block; font-size: 13px; font-weight: 600; color: var(--brand-navy); }
.cmp-step > div > span { display: block; margin-top: 2px; font-size: 12px; color: var(--afropin-text-mute2); line-height: 1.45; }
@media (max-width: 767.98px) { .cmp-steps { grid-template-columns: 1fr; } }

/* Radios and checkboxes in the sign-in style cards (rm-toggle): brand navy, never the browser's blue */
.rm-toggle .form-check-input:checked { background-color: var(--brand-navy); border-color: var(--brand-navy); }
.rm-toggle .form-check-input:focus { border-color: var(--brand-navy); box-shadow: 0 0 0 3px var(--brand-coral-soft); }
.bks-drop.is-invalid { border-color: var(--afropin-error); }


/* intl-tel-input (every phone field: sign-up, verification, settings, tills, quote pages): its country list drawn with
   the theme tokens, so it follows light and dark mode like the rest of the app, instead of the library's fixed white */
.iti, .iti--container {
    --iti-dropdown-bg: var(--afropin-white);
    --iti-border-color: var(--afropin-hairline-2);
    --iti-hover-color: var(--brand-cream);
    --iti-dialcode-color: var(--afropin-text-mute2);
    --iti-arrow-color: var(--afropin-text-mute2);
}
.iti__dropdown-content { background-color: var(--afropin-white); border: 1px solid var(--afropin-hairline-2) !important; border-radius: 12px; box-shadow: 0 20px 50px -18px rgba(11, 27, 59, .28); overflow: hidden; }
.iti__search-input { height: 42px; padding: 0 14px; background-color: var(--afropin-white); color: var(--afropin-text); border: 0; border-bottom: 1px solid var(--afropin-hairline-2); border-radius: 0; font-size: 14px; outline: none; box-shadow: none; }
.iti__search-input:focus { outline: none; box-shadow: none; background-color: var(--brand-cream); }
.iti__search-input::placeholder { color: var(--afropin-text-mute2); }
.iti__search-input + .iti__country-list { border-top: 0; }
.iti__country { padding: 9px 14px; font-size: 14px; color: var(--afropin-text); }
.iti__country-name { color: var(--afropin-text); }
.iti__dial-code { color: var(--afropin-text-mute2); }
.iti__country.iti__highlight { background-color: var(--brand-cream); }
.iti__selected-dial-code { color: var(--afropin-text); }
.iti__arrow { border-top-color: var(--afropin-text-mute2); }
.iti__arrow--up { border-bottom-color: var(--afropin-text-mute2); border-top-color: transparent; }

/* Team members (partner Team page and the console's account page) */
.rx-row.team-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 150px; gap: 16px; align-items: center; }
.rx-row.team-grid .rx-action { display: flex; justify-content: flex-end; }
.rx-row.team-grid select.rx-input { width: 100%; max-width: 160px; }
@media (max-width: 1199px) {
    .rx-row.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 16px; padding-bottom: 16px; }
    .rx-row.team-grid > :first-child { grid-column: 1 / -1; }
    .rx-row.team-grid .rx-action { justify-content: flex-start; }
    .rx-row.team-grid .rx-cell-label { display: block; }
}
.rx-head.team-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 150px; gap: 16px; }
@media (max-width: 1199px) { .rx-head.team-grid { display: none; } }
/* Only the owner so far: a short invite prompt at the foot of the list */
.team-invite { display: flex; align-items: center; gap: 14px; margin: 12px 16px 16px; padding: 16px 18px; border: 1px dashed var(--afropin-hairline-2); border-radius: 12px; background: var(--brand-cream); }
.team-invite-icon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-coral-soft); border: 1px solid var(--brand-coral-border); color: var(--brand-coral-ink); font-size: 18px; }
@media (max-width: 575.98px) { .team-invite { flex-wrap: wrap; } }
/* The roles beside the list */
.team-roles-list { list-style: none; margin: 0; padding: 4px 0; }
.team-roles-list li { display: grid; gap: 2px; padding: 12px 20px; border-bottom: 1px solid var(--afropin-hairline-2); }
.team-roles-list li:last-child { border-bottom: 0; }
.team-role-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--brand-navy); }
.team-roles-foot { display: flex; gap: 8px; align-items: flex-start; padding: 14px 20px; border-top: 1px solid var(--afropin-hairline-2); background: var(--brand-cream); border-radius: 0 0 14px 14px; font-size: 12px; line-height: 1.5; color: var(--afropin-text-mute2); }

/* The currency filter (partials.currency-menu): the dashboard's currency menu on every list */
.cur-trigger { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 6px; border: 1px solid var(--afropin-hairline-2); border-radius: 9px; background: var(--afropin-white); font-size: 12px; font-weight: 600; color: var(--afropin-text); white-space: nowrap; transition: border-color .15s ease; }
.cur-trigger:hover, .cur-trigger[aria-expanded="true"] { border-color: var(--afropin-dot-gray); }
.cur-filter .cur-mark, .rev-menu .cur-mark { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; display: grid; place-items: center; background: var(--afropin-white); border: 1px solid var(--afropin-hairline-2); color: var(--afropin-text-prose); font-size: 11px; font-weight: 700; }
.rev-menu .cur-mark { width: 28px; height: 28px; flex-basis: 28px; font-size: 12px; }
.cur-chevron { margin-left: 2px; font-size: 10px; color: var(--afropin-text-mute2); }
/* Dashboard-style filter bars (40px controls on the cream surface) */
.cur-filter.is-lg .cur-trigger { height: 40px; padding: 0 14px 0 8px; border-radius: 10px; background: var(--afropin-lime-bg-soft); font-size: .8rem; }
.cur-filter.is-lg .cur-mark { width: 24px; height: 24px; flex-basis: 24px; }
@media (max-width: 991px) { .rx-toolbar-filters .cur-filter, .rx-toolbar-filters .cur-trigger { width: 100%; } }

/* Payouts: one card of balances, a row per currency, beside the next payout */
.pyo-schedule { align-items: stretch; }
.pyo-next { align-content: center; }
.pyo-balances { margin: 0; }
.rx-head.pyo-bal-grid, .rx-row.pyo-bal-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.pyo-bal-grid .pyo-wallet-code { margin-bottom: 0; }
.pyo-figure { display: block; font-size: 18px; font-weight: 700; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.pyo-missing { display: block; margin-top: 6px; font-size: 12px; color: var(--afropin-warning-text); }
.pyo-missing a { font-weight: 600; color: inherit; text-decoration: underline; }
.rx-head.pyo-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px 130px 130px; gap: 16px; }
@media (max-width: 767px) {
    .rx-head.pyo-bal-grid, .rx-head.pyo-row { display: none; }
    .rx-row.pyo-bal-grid { grid-template-columns: 1fr 1fr; }
    .rx-row.pyo-bal-grid > :first-child { grid-column: 1 / -1; }
    .rx-row.pyo-bal-grid .text-end { text-align: left !important; }
    .rx-row.pyo-bal-grid .rx-cell-label { display: block; }
}
.rev-menu__item.is-waiting, .rev-menu__item:disabled { opacity: .55; cursor: not-allowed; background: transparent; }
/* Room for the longest role name in the team list's role picker */
.rx-head.team-grid, .rx-row.team-grid { grid-template-columns: minmax(0, 2fr) minmax(150px, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) 64px; }
.rx-row.team-grid select.rx-input { max-width: none; min-width: 140px; }


/* The date range filter (components/date-range): one look on every page */
.rx-daterange .rx-input-date { min-width: 230px; cursor: pointer; }
.rx-daterange.is-lg .rx-input-date { height: 40px; min-width: 260px; padding-left: 34px; border-radius: 10px; background: var(--afropin-lime-bg-soft); font-size: .8rem; font-weight: 600; color: var(--afropin-text); }
.rx-daterange.is-lg i { left: 13px; font-size: 13px; }
/* The presets list beside the calendar, in brand colours */
.daterangepicker .ranges li { border-radius: 8px; margin: 2px 6px; font-size: 12.5px; }
@media (max-width: 991px) { .rx-daterange, .rx-daterange .rx-input-date { width: 100%; min-width: 0; } }
/* Dashboard side column: cards stacked with a gap; only the last one stretches, and never on phones */
.bd-stack > .rx-panel.h-100 { height: auto !important; }
@media (min-width: 1200px) { .bd-stack > .rx-panel:last-child { flex: 1 1 auto; } }


/* Developer log feed on phones: each row a compact card (status + path, then source + View, then the time) */
@media (max-width: 767px) {
    .trx-feed-head { display: none; }
    .trx-row:not(.lg-grid) { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding-left: 16px; padding-right: 16px; }
    .trx-row.lg-grid { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; column-gap: 12px; padding-left: 16px; padding-right: 16px; }
    .trx-row.lg-grid .trx-col-status { grid-column: 1; grid-row: 1; }
    .trx-row.lg-grid .trx-col-main { grid-column: 2 / 4; grid-row: 1; }
    .trx-row.lg-grid .lg-col-source { grid-column: 1 / 3; grid-row: 2; }
    .trx-row.lg-grid .trx-col-action { grid-column: 3; grid-row: 2; }
    .trx-row.lg-grid .lg-col-time { grid-column: 1 / 4; grid-row: 3; font-size: 12px; color: var(--afropin-text-mute2); }
}
/* Gift card requests on small phones: the status and action drop under the request */
@media (max-width: 575.98px) {
    .gcr-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
    .gcr-row > :last-child { grid-column: 1 / -1; justify-self: start; }
}

/* Payouts: the next payout as a full-width bar, the balances card full width beneath (any number of currencies) */
@media (min-width: 992px) { .pyo-schedule { grid-template-columns: 1fr; } }
.pyo-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.pyo-next-when { display: grid; gap: 4px; }
.pyo-next-rule { display: inline-flex; align-items: center; gap: 6px; margin: 0; }


/* Page tours (rx-tour.js): the lit-up part of the page, and the card that explains it */
.rxt-blocker { position: fixed; inset: 0; z-index: 1090; }
.rxt-spot { position: fixed; z-index: 1091; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(11, 27, 59, .55), 0 0 0 3px var(--brand-coral); pointer-events: none; transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.rxt-pop { position: fixed; z-index: 1092; width: 340px; max-width: calc(100vw - 24px); padding: 18px 20px 16px; border-radius: 16px; background: var(--afropin-white); border: 1px solid var(--afropin-hairline-2); box-shadow: 0 24px 60px -20px rgba(11, 27, 59, .45); transition: top .25s ease, left .25s ease; }
.rxt-pop.is-sheet { left: 12px !important; right: 12px; bottom: 12px; top: auto !important; width: auto; }
.rxt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rxt-count { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-coral-ink); }
.rxt-close { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--afropin-text-mute2); }
.rxt-close:hover { background: var(--brand-cream); color: var(--brand-navy); }
.rxt-title { font-size: 16px; font-weight: 700; color: var(--brand-navy); }
.rxt-text { margin: 6px 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--afropin-text-prose); }
.rxt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rxt-skip { padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--afropin-text-mute2); }
.rxt-skip:hover { color: var(--brand-navy); }
.rxt-nav { display: flex; gap: 8px; }
html.rxt-open { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { .rxt-spot, .rxt-pop { transition: none; } }
.rxt-pop button:focus { outline: none; }
.rxt-pop button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-coral-soft), 0 0 0 4px var(--brand-coral-border); }
.acct-card-tour { border: 0; background: transparent; }
.acct-card-tour:hover { color: var(--brand-navy); background: var(--brand-cream); }


/* ---------- Pinholder account (holder.*): a holder's gift cards, from the links in their emails and wallet passes ---------- */
/* The card itself: navy with a coral edge, rounded like the panels under it; the dark palette turns it light */
.hd-card { margin-bottom: 16px; padding: 20px 22px 18px; border-radius: 16px; border-bottom: 4px solid var(--brand-coral); background: var(--brand-navy); color: var(--afropin-white); }
.hd-card-top { display: flex; align-items: center; gap: 12px; }
.hd-logo { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px; object-fit: contain; }
.rm-choice .hd-logo { width: 40px; height: 40px; }
.hd-card-name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.hd-card-sub, .hd-card-label { font-size: 12px; letter-spacing: .4px; text-transform: uppercase; opacity: .72; }
.hd-card-label { margin-top: 18px; }
.hd-card-amount { font-size: 30px; font-weight: 700; line-height: 1.25; }
.hd-card-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; opacity: .8; }
.hd-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 600; white-space: nowrap; }
.hd-status.is-frozen { background: var(--brand-coral); color: var(--afropin-white); }

/* Each part of the card page is its own panel; rows inside it are divided only between them */
.hd-panel { margin-top: 16px; padding: 20px; border: 1px solid var(--afropin-hairline-2); border-radius: 16px; background: var(--afropin-white); }
.hd-panel-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.hd-panel-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--brand-navy); }
.hd-panel-head p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--afropin-text-muted); }
.hd-panel-icon { display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center; height: 36px; border-radius: 10px; background: var(--brand-cream); color: var(--brand-navy); font-size: 16px; }
.hd-list > * + * { border-top: 1px solid var(--afropin-hairline-2); }
.hd-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.hd-list > .hd-item:first-child { padding-top: 0; }
.hd-list > .hd-item:last-child { padding-bottom: 0; }
.hd-item-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; font-size: 14px; color: var(--brand-navy); }
.hd-item-text strong { font-weight: 600; }
.hd-item-text small { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--afropin-text-muted); }
.hd-item-value { font-weight: 700; color: var(--brand-navy); white-space: nowrap; }
.hd-act-icon { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; height: 32px; border-radius: 50%; background: var(--brand-cream); color: var(--brand-navy); }
.hd-list > .rm-error { padding: 8px 0; border-top: 0; }
/* What opens under a row: the warning before keeping a code, the field to change the limit */
.hd-confirm { padding: 14px 16px; border-radius: 12px; background: var(--brand-cream); font-size: 14px; color: var(--afropin-text-prose); }
.hd-list > .hd-confirm { margin-bottom: 14px; border-top: 0; }
.hd-confirm p { margin: 0 0 12px; line-height: 1.5; }
.hd-confirm .bi-exclamation-triangle { color: var(--brand-coral-ink); }
.hd-inline { display: flex; gap: 8px; }
/* A link-styled action under a field, such as filling in the full amount */
.hd-link { display: inline-block; padding: 0; border: 0; background: none; color: var(--brand-navy); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* A family card in its main card's list: who and the balance, then what can be done with it, under the name */
.hd-fam { padding: 14px 0; }
.hd-list > .hd-fam:first-child { padding-top: 0; }
.hd-fam-top { display: flex; align-items: center; gap: 12px; }
.hd-fam-main { display: flex; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.hd-fam-main:hover strong { text-decoration: underline; }
.hd-avatar { display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center; height: 36px; border-radius: 50%; background: var(--brand-cream); color: var(--brand-navy); font-weight: 700; }
.hd-fam-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-left: 48px; }
.hd-mini { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--brand-cream); color: var(--brand-navy); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.hd-mini:hover { background: var(--brand-cream-deep); }
.hd-mini.is-on { background: var(--brand-navy); color: var(--afropin-white); }
.hd-mini:disabled { opacity: .6; cursor: default; }
.hd-mini .spinner-border { width: 14px; height: 14px; border-width: 2px; }
.hd-btn-sm { height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; gap: 4px; }
.hd-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border: 1.5px dashed var(--afropin-input-border); border-radius: 12px; background: transparent; color: var(--brand-navy); font-size: 14px; font-weight: 600; cursor: pointer; }
.hd-add:hover { border-color: var(--brand-navy); }
@media (max-width: 575px) {
    .hd-fam-actions { padding-left: 0; }
}

.hd-sum { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--brand-cream); font-size: 14px; color: var(--afropin-text-prose); }
.hd-sum > div { display: flex; justify-content: space-between; padding: 3px 0; }
.hd-sum-total { margin-top: 4px; padding-top: 8px !important; border-top: 1px solid var(--afropin-hairline-2); font-weight: 700; color: var(--brand-navy); }
.hd-fine { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--afropin-text-muted); }
.hd-btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1px solid var(--afropin-input-border); border-radius: 10px; background: var(--afropin-white); color: var(--brand-navy); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.hd-btn:hover { border-color: var(--brand-navy); }
.hd-btn .spinner-border { width: 16px; height: 16px; border-width: 2px; }
.hd-btn:disabled { opacity: .7; cursor: default; }
.hd-inline .hd-btn { height: auto; }
.hd-btn-primary { border-color: var(--brand-navy); background: var(--brand-navy); color: var(--afropin-white); }
.hd-btn-primary:hover { opacity: .92; }
.hd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-chip { padding: 10px 16px; border: 1px solid var(--afropin-input-border); border-radius: 10px; background: var(--afropin-white); font-weight: 600; color: var(--brand-navy); cursor: pointer; }
.hd-chip.is-on { border-color: var(--brand-coral); background: var(--brand-coral-soft); color: var(--brand-coral-ink); }
.hd-amount { margin-left: auto; font-weight: 700; color: var(--brand-navy); white-space: nowrap; }
.hd-pill { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--brand-cream-deep); font-size: 11px; font-weight: 600; color: var(--afropin-text-muted); }
.hd-state.is-frozen { color: var(--brand-coral-ink); font-weight: 600; }
.hd-state.is-off { color: var(--afropin-text-muted); }

/* Waitlist (livewire/console/waitlist), on the rx-* list styles */
.rx-head.wl-grid,
.rx-row.wl-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, .8fr) 150px; }
.wl-founding { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--brand-coral, #FF6B5B); color: #fff; font-size: 11px; font-weight: 700; }
.wl-status { width: 100%; max-width: 150px; margin-left: auto; height: 34px; padding: 0 10px; font-weight: 600; }
.wl-status-new { color: var(--afropin-warning-ink, #9A5B00); }
.wl-status-invited { color: var(--afropin-green, #1F8A4C); }
.wl-status-declined { color: var(--afropin-muted, #6B7280); }
@media (max-width: 767px) {
    .rx-head.wl-grid { display: none; }
    .rx-row.wl-grid { grid-template-columns: 1fr; gap: 10px; padding-top: 16px; padding-bottom: 16px; }
    .wl-status { margin-left: 0; }
}
.wl-type { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--afropin-hairline-2, #EEF0F4); color: var(--afropin-muted, #5B6376); }
.wl-type-reseller { background: rgba(31, 138, 76, .12); color: var(--afropin-green, #1F8A4C); }

/* Prepared brands (livewire/console/brand-prospects), on the rx-* list styles */
.rx-head.bp-grid,
.rx-row.bp-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) 190px; }
.rx-head.bp-req-grid,
.rx-row.bp-req-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, .8fr) 150px; }
.bp-logo { object-fit: contain; background: #fff; border: 1px solid var(--afropin-hairline-2, #EEF0F4); }
.bp-message { white-space: normal; overflow-wrap: anywhere; }
.bp-kind-remove { background: var(--brand-coral-soft, #FFECE9); color: var(--brand-coral-ink, #C2412F); }
@media (max-width: 767px) {
    .rx-head.bp-grid, .rx-head.bp-req-grid { display: none; }
    .rx-row.bp-grid, .rx-row.bp-req-grid { grid-template-columns: 1fr; gap: 10px; padding-top: 16px; padding-bottom: 16px; }
    .rx-row.bp-grid .rx-action-group { justify-content: flex-start; }
    .rx-row.bp-grid .rx-action .text-end { text-align: left !important; }
}

/* Prepared brands: the row menu, grouped (claim link / brand / delete) */
.bp-menu { max-height: none; min-width: 250px; }
.bp-menu .rev-menu__item { flex-wrap: wrap; row-gap: 0; }
.bp-menu-meta { flex-basis: 100%; padding-left: 28px; margin-top: -1px; font-size: 11.5px; font-weight: 500; color: var(--afropin-text-mute2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-menu-sep { height: 1px; margin: 6px 4px; background: var(--afropin-hairline-2); }