/*
 * Platform design system (base layer — themes override it).
 *
 * This is the Laravel platform's own visual language — deliberately not a copy
 * of the legacy stylesheet. It layers on Bootstrap's grid and JS components
 * (dropdowns, collapse) but overrides Bootstrap's entire look, so the markup
 * stays conventional while the result does not look like stock Bootstrap.
 *
 * Two rules:
 *
 *  1. The brand colour is never hardcoded. --primary and its variants are
 *     injected per request from site_settings, so the admin colour picker
 *     re-skins everything instantly.
 *
 *  2. Dark mode redefines tokens only. No component rule is duplicated per
 *     theme — that duplication is what left the legacy dark mode half-finished.
 */

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
    /* --primary, --primary-dark, --primary-light, --primary-shadow and
       --primary-rgb are injected by the layout. */

    --bg-body: #f7f8fb;
    --bg-card: #ffffff;
    --bg-subtle: #fbfbfd;
    --bg-inset: #f1f2f6;
    --bg-elevated: #ffffff;

    --text-heading: #1e2340;
    --text-body: #5a6382;
    --text-muted: #8b93ab;
    --text-inverse: #ffffff;

    --border-color: #e8eaf0;
    --border-strong: #d5d9e4;

    --success: #12b76a;
    --success-light: #e7f8f0;
    --success-text: #05784a;
    --danger: #f04438;
    --danger-light: #feeceb;
    --danger-text: #b42318;
    --warning: #f79009;
    --warning-light: #fff6e6;
    --warning-text: #b54708;
    --info: #2e90fa;
    --info-light: #e8f2fe;
    --info-text: #175cd3;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* Layered, low-alpha shadows read as depth rather than as a grey smear. */
    --shadow-xs: 0 1px 2px rgba(21, 25, 50, .04);
    --shadow-sm: 0 1px 3px rgba(21, 25, 50, .05), 0 1px 2px rgba(21, 25, 50, .03);
    --shadow: 0 4px 12px rgba(21, 25, 50, .06), 0 1px 3px rgba(21, 25, 50, .04);
    --shadow-lg: 0 12px 32px rgba(21, 25, 50, .10), 0 4px 8px rgba(21, 25, 50, .04);
    --shadow-primary: 0 6px 18px var(--primary-shadow);

    --font-sans: "Figtree", "Inter", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: var(--font-sans);

    /* Controls. 52px with 15px text: comfortably above the 44px touch target,
       and ≥16px on mobile keeps iOS Safari from zooming on focus. */
    --control-height: 52px;
    --control-height-sm: 42px;
    --control-radius: 12px;

    --sidebar-width: 264px;
    --sidebar-collapsed: 78px;
    --topbar-height: 68px;

    --transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

[data-theme="dark"] {
    --bg-body: #14161f;
    --bg-card: #1c1f2b;
    --bg-subtle: #21242f;
    --bg-inset: #262a37;
    --bg-elevated: #232733;

    --text-heading: #f0f2f8;
    --text-body: #a8b0c8;
    --text-muted: #6f7793;

    --border-color: #2c3040;
    --border-strong: #3b4054;

    /* Re-derived: the light tints are near-white and would glare on dark. */
    --success-light: rgba(18, 183, 106, .14);
    --success-text: #4ade9a;
    --danger-light: rgba(240, 68, 56, .14);
    --danger-text: #ff8577;
    --warning-light: rgba(247, 144, 9, .14);
    --warning-text: #fdb457;
    --info-light: rgba(46, 144, 250, .14);
    --info-text: #6cb2fb;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow: 0 4px 12px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-body);
    background: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }

/* Visible focus everywhere. The legacy stylesheet removed outlines globally,
   which made both portals unusable by keyboard. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--primary); color: #fff; }

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

/* ── Layout ───────────────────────────────────────────────────────────────── */

/* Clip any stray horizontal overflow (a wide table cell, a grid gutter, a
   dropdown) so mobile never gets blank scrollable space on the right. `clip`
   (not `hidden`) is deliberate: it does not create a scroll container, so the
   sticky top bar and the fixed off-canvas sidebar keep working. */
.layout-wrapper { min-height: 100vh; overflow-x: clip; }
.layout-container { display: flex; min-height: 100vh; }

.content-wrapper {
    flex: 1;
    /* Without this a wide table stretches the flex item and the whole page
       scrolls sideways instead of the table. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin var(--transition);
}

.container-xxl {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-5);
    flex: 1;
}

@media (max-width: 768px) {
    .container-xxl { padding: var(--space-4) var(--space-3); }
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.layout-menu {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
    transition: width var(--transition);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--topbar-height);
    padding: 0 var(--space-5);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
}

.app-brand-logo {
    width: 36px; height: 36px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.app-brand-text {
    font-weight: 800;
    font-size: 1.0625rem;
    color: var(--text-heading);
    letter-spacing: -.03em;
    white-space: nowrap;
    overflow: hidden;
}

.menu-inner {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4) var(--space-3);
    scrollbar-width: thin;
}
.menu-inner::-webkit-scrollbar { width: 4px; }
.menu-inner::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.menu-header {
    padding: var(--space-5) var(--space-3) var(--space-2);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}
.menu-header:first-child { padding-top: var(--space-2); }

.menu-item { list-style: none; margin-bottom: 2px; }

.menu-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: .6875rem var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
    position: relative;
}

.menu-link:hover { background: var(--bg-inset); color: var(--text-heading); }

/* Active state is a soft tint with a left accent bar rather than a solid fill:
   a full-bleed brand block on every active row overwhelms a long sidebar. */
.menu-link.active {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-weight: 600;
}
.menu-link.active::before {
    content: "";
    position: absolute;
    left: -var(--space-3);
    left: calc(var(--space-3) * -1);
    top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 20px;
    background: var(--primary);
    border-radius: 0 3px 3px 0;
}

.menu-icon { font-size: 1.25rem; flex-shrink: 0; line-height: 1; }
.menu-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Collapsed (icon-only) desktop state */
.layout-menu.collapsed { width: var(--sidebar-collapsed); }
.layout-menu.collapsed .app-brand { justify-content: center; padding: 0; }
.layout-menu.collapsed .app-brand-text,
.layout-menu.collapsed .menu-text,
.layout-menu.collapsed .menu-header,
.layout-menu.collapsed .sidebar-profile__meta { display: none; }
.layout-menu.collapsed .menu-link { justify-content: center; padding: .6875rem 0; }
.layout-menu.collapsed .menu-link .badge { display: none; }
.layout-menu.collapsed .sidebar-profile { justify-content: center; }

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    overflow: hidden;
}
.sidebar-profile__meta { min-width: 0; }
.sidebar-profile__name {
    font-size: .8125rem; font-weight: 600; color: var(--text-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-profile__role { font-size: .6875rem; color: var(--text-muted); }

.sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(12, 15, 30, .55);
    backdrop-filter: blur(2px);
    z-index: 99;
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}
.sidebar-overlay.active { opacity: 1; visibility: visible; }

@media (max-width: 991.98px) {
    .layout-menu {
        position: fixed;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    .layout-menu.mobile-open { transform: translateX(0); }
    /* Collapse is a desktop affordance; on mobile the drawer is always full width. */
    .layout-menu.collapsed { width: var(--sidebar-width); }
    .layout-menu.collapsed .app-brand-text,
    .layout-menu.collapsed .menu-text,
    .layout-menu.collapsed .menu-header,
    .layout-menu.collapsed .sidebar-profile__meta { display: block; }
    .layout-menu.collapsed .menu-link { justify-content: flex-start; padding: .6875rem var(--space-3); }
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */

.layout-navbar {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-5);
    background: color-mix(in srgb, var(--bg-card) 85%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 50;
}

.navbar-nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.icon-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-body);
    font-size: 1.25rem;
    cursor: pointer;
    position: relative;
    transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--bg-inset); color: var(--text-heading); }

.icon-btn__dot {
    position: absolute;
    top: 8px; right: 9px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid var(--bg-card);
}

.topbar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -.02em;
}

/* Theme switch — a segmented control, not a slider toggle. It states the
   current mode explicitly instead of leaving the user to infer it. */
.theme-switch {
    display: inline-flex;
    padding: 3px;
    background: var(--bg-inset);
    border-radius: var(--radius-pill);
    gap: 2px;
}
.theme-switch__btn {
    width: 32px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.theme-switch__btn:hover { color: var(--text-heading); }
.theme-switch__btn.is-active {
    background: var(--bg-card);
    color: var(--primary);
    box-shadow: var(--shadow-xs);
}

/* ── Avatar ───────────────────────────────────────────────────────────────── */

.avatar {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: .8125rem;
    flex-shrink: 0;
    overflow: hidden;
    letter-spacing: -.02em;
}
.avatar-sm { width: 34px; height: 34px; font-size: .75rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.125rem; border-radius: var(--radius); }
.avatar--soft { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    background: transparent;
}

.card-title {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -.01em;
}

.card-body { padding: var(--space-5); }

.card-subtitle { font-size: .8125rem; color: var(--text-muted); margin: 0; }

/* ── Forms ────────────────────────────────────────────────────────────────── */

/*
 * One input style across the whole app — the same one used on the sign-in
 * screen. No leading icon adornments: on a form with eight fields a column of
 * coloured icon blocks competes with the labels and the data, and it forces
 * every input into an input-group wrapper for no functional gain.
 */

.form-label {
    display: block;
    margin-bottom: .4375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-heading);
    letter-spacing: -.01em;
}

.form-control,
.form-select,
textarea.form-control {
    display: block;
    width: 100%;
    height: var(--control-height);
    padding: 0 var(--space-4);
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--text-heading);
    background-color: var(--bg-card);
    background-clip: padding-box;
    border: 1.5px solid var(--border-color);
    border-radius: var(--control-radius);
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
    appearance: none;
}

textarea.form-control {
    height: auto;
    min-height: 108px;
    padding: var(--space-3) var(--space-4);
    line-height: 1.6;
    resize: vertical;
}

.form-select {
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b93ab' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
}

.form-control::placeholder { color: var(--text-muted); font-weight: 400; }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--border-strong); }

.form-control:focus,
.form-select:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
    background-color: var(--bg-card);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--bg-inset);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 12%, transparent);
}

.form-text {
    margin-top: .4375rem;
    font-size: .78125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.invalid-feedback,
.form-error {
    display: block;
    margin-top: .4375rem;
    font-size: .78125rem;
    font-weight: 500;
    color: var(--danger-text);
}

/*
 * Identifier fields (NIN, BVN, phone). Agents copy these off a physical
 * document, so the digits get monospace, generous tracking and a larger size —
 * a misread digit costs a paid lookup.
 */
.form-control--identifier {
    height: 60px;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.field-counter {
    display: block;
    margin-top: .4375rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.field-counter.is-complete { color: var(--success-text); }

/* File input */
.form-control[type="file"] {
    height: auto;
    padding: var(--space-3) var(--space-4);
    font-weight: 400;
}
.form-control[type="file"]::file-selector-button {
    margin: -.25rem var(--space-3) -.25rem -.5rem;
    padding: .5rem .875rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--bg-inset);
    color: var(--text-heading);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

/* Checkbox + radio */
.form-check { padding-left: 1.85rem; position: relative; min-height: 1.5rem; }
.form-check-input {
    width: 1.25rem; height: 1.25rem;
    margin-left: -1.85rem;
    margin-top: .125rem;
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    background-color: var(--bg-card);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    appearance: none;
    float: left;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3E%3Cpath d='M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0l-3.5-3.5a1 1 0 111.4-1.4l2.8 2.8 6.8-6.8a1 1 0 011.4 0z'/%3E%3C/svg%3E");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.form-check-input:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }
.form-check-label { font-size: .875rem; color: var(--text-body); cursor: pointer; }

/* Consent block */
.consent-box {
    padding: var(--space-4);
    border: 1.5px solid color-mix(in srgb, var(--primary) 22%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

/* ── Option tiles (search type / slip picker) ─────────────────────────────── */

.option-grid { display: grid; gap: var(--space-3); }
.option-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Auto-fitting tiles, for pickers that now sit in a full-width column. The
   track minimum is wide enough to hold a slip thumbnail plus its price without
   the label wrapping mid-word. */
.option-grid--auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.option-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 560px) {
    /* Two tiles per row on phones so the slip picker is not one long column. */
    .option-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .option-grid--auto { grid-template-columns: repeat(2, 1fr); }
    .option-grid { gap: var(--space-2); }
    .option-tile--slip .option-tile__body { padding: .55rem; gap: .2rem; }
    .slip-sample { max-width: 84px; margin-bottom: .15rem; }
    .option-tile__label { font-size: .75rem; }
}

.option-tile { position: relative; display: block; }
.option-tile input {
    position: absolute; opacity: 0; width: 0; height: 0;
}

.option-tile__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3125rem;
    padding: var(--space-4) var(--space-3);
    height: 100%;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-card);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition), background var(--transition), transform 100ms;
}

.option-tile:hover .option-tile__body { border-color: var(--border-strong); }
.option-tile__body:active { transform: scale(.985); }

/* Slip-type tiles show a sample of the actual slip so the agent sees what they
   are printing before choosing. */
.slip-sample {
    display: block;
    width: 100%;
    max-width: 84px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--border-color);
    margin-bottom: .15rem;
    background: var(--bg-inset);
}
.option-tile--slip .option-tile__body { padding: var(--space-2) var(--space-3); gap: .15rem; }
.option-tile input:checked + .option-tile__body .slip-sample { border-color: var(--primary); }

.option-tile input:checked + .option-tile__body {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-card));
    box-shadow: 0 0 0 1px var(--primary);
}

.option-tile input:focus-visible + .option-tile__body {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.option-tile input:disabled + .option-tile__body {
    opacity: .5;
    cursor: not-allowed;
    background: var(--bg-inset);
}

.option-tile__label { font-size: .8125rem; font-weight: 600; color: var(--text-heading); }
.option-tile__hint { font-size: .6875rem; color: var(--text-muted); line-height: 1.4; }
.option-tile__price {
    font-size: .8125rem; font-weight: 700; color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.option-tile input:checked + .option-tile__body .option-tile__label { color: var(--primary); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: var(--control-height);
    padding: 0 var(--space-5);
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    border: 1.5px solid transparent;
    border-radius: var(--control-radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition),
                box-shadow var(--transition), transform 100ms, opacity var(--transition);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }

.btn-sm { height: var(--control-height-sm); padding: 0 var(--space-3); font-size: .8125rem; border-radius: var(--radius-sm); }
.btn-lg { height: 58px; padding: 0 var(--space-6); font-size: 1rem; }
.btn-icon { width: var(--control-height-sm); padding: 0; }

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-primary);
}
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

.btn-secondary,
.btn-outline-secondary {
    background: var(--bg-card);
    border-color: var(--border-strong);
    color: var(--text-heading);
}
.btn-secondary:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled) { background: var(--bg-inset); color: var(--text-heading); }

.btn-outline-primary {
    background: transparent;
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    color: var(--primary);
}
.btn-outline-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
}

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger-text); border-color: var(--danger-text); color: #fff; }

.btn-ghost { background: transparent; color: var(--text-body); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-inset); color: var(--text-heading); }

.btn-block, .w-100.btn { width: 100%; }

/* ── Badges ───────────────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .3125rem .625rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.badge-success, .bg-label-success { background: var(--success-light); color: var(--success-text); }
.badge-danger,  .bg-label-danger,  .bg-danger { background: var(--danger-light); color: var(--danger-text); }
.badge-warning, .bg-label-warning { background: var(--warning-light); color: var(--warning-text); }
.badge-info,    .bg-label-info    { background: var(--info-light); color: var(--info-text); }
.badge-primary, .bg-label-primary { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.badge-neutral, .bg-label-secondary { background: var(--bg-inset); color: var(--text-muted); }

/* ── Alerts ───────────────────────────────────────────────────────────────── */

.alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: .875rem;
    margin-bottom: var(--space-4);
}
.alert-success { background: var(--success-light); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.alert-danger  { background: var(--danger-light);  color: var(--danger-text);  border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.alert-warning { background: var(--warning-light); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.alert-info    { background: var(--info-light);    color: var(--info-text);    border-color: color-mix(in srgb, var(--info) 22%, transparent); }

/* ── Tables ───────────────────────────────────────────────────────────────── */

/* Every data table is wrapped in .table-wrap, but the class was never styled —
   so wide tables overflowed the viewport on mobile instead of scrolling inside
   their card. Give it the same scroll behaviour as .table-responsive. */
.table-responsive,
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

.table { width: 100%; margin: 0; border-collapse: collapse; }

.table thead th {
    padding: .75rem var(--space-5);
    text-align: left;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.table tbody td {
    padding: .875rem var(--space-5);
    font-size: .875rem;
    color: var(--text-body);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover td { background: var(--bg-subtle); }

/* Money and identifiers align on the digit so columns compare at a glance. */
.table .text-end, .table .numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Empty state ──────────────────────────────────────────────────────────── */

.empty-state { padding: var(--space-7) var(--space-5); text-align: center; }
.empty-state__icon {
    width: 64px; height: 64px;
    margin: 0 auto var(--space-4);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--bg-inset);
    color: var(--text-muted);
    font-size: 1.75rem;
}
.empty-state__title { font-size: .9375rem; font-weight: 700; color: var(--text-heading); margin-bottom: .375rem; }
.empty-state__text { font-size: .8125rem; color: var(--text-muted); max-width: 42ch; margin: 0 auto; line-height: 1.6; }

/* ── Stat cards ───────────────────────────────────────────────────────────── */

.stat-card {
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    height: 100%;
    transition: box-shadow var(--transition), transform var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.stat-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.stat-card__icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    font-size: 1.375rem;
}
.stat-card__label { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.stat-card__value {
    font-size: 1.75rem; font-weight: 800; color: var(--text-heading);
    letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat-card__meta { margin-top: .375rem; font-size: .75rem; color: var(--text-muted); }

/* ── Balance panel ────────────────────────────────────────────────────────── */

.balance-panel {
    position: relative;
    overflow: hidden;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--primary) 55%, #000) 0%, transparent 55%),
        linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    box-shadow: var(--shadow-lg);
}

/* A single soft highlight rather than decorative orbs — it reads as material
   depth instead of ornament. */
.balance-panel::after {
    content: "";
    position: absolute;
    top: -40%; right: -10%;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.balance-panel__label {
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; opacity: .85;
}
.balance-panel__amount {
    margin: .625rem 0 var(--space-4);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 800; letter-spacing: -.04em; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.balance-panel__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.balance-panel__chip {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .375rem .75rem;
    background: rgba(255, 255, 255, .16);
    border-radius: var(--radius-pill);
    font-size: .78125rem; font-weight: 600;
    backdrop-filter: blur(4px);
}
.balance-panel__chip--warn { background: rgba(255, 255, 255, .95); color: var(--warning-text); }
.balance-panel__actions { display: flex; flex-wrap: wrap; gap: .625rem; position: relative; z-index: 1; }
.balance-panel__btn {
    display: inline-flex; align-items: center; gap: .4375rem;
    padding: .6875rem 1.125rem;
    border-radius: var(--radius);
    background: #fff; color: var(--primary);
    font-size: .875rem; font-weight: 700;
    transition: transform var(--transition), box-shadow var(--transition);
}
.balance-panel__btn:hover { color: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.16); }
.balance-panel__btn--ghost {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    backdrop-filter: blur(4px);
}
.balance-panel__btn--ghost:hover { background: rgba(255, 255, 255, .26); color: #fff; }

/* ── Service tiles ────────────────────────────────────────────────────────── */

.service-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    padding: var(--space-4) var(--space-2);
    height: 100%;
    min-height: 112px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-card);
    text-align: center;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.service-tile:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.service-tile__icon {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 1.375rem;
    transition: background var(--transition);
}
.service-tile:hover .service-tile__icon { background: var(--primary); color: #fff; }
.service-tile__name {
    font-size: .78125rem; font-weight: 600; color: var(--text-heading); line-height: 1.35;
}
.service-tile--off { opacity: .5; pointer-events: none; }
.service-tile--off .service-tile__icon { background: var(--bg-inset); color: var(--text-muted); }

/* ── Page header ──────────────────────────────────────────────────────────── */

/* .page-header/.page-title/.page-subtitle are the names used across ~14 views;
   they were never styled (the CSS only had .page-head*). Alias them here so every
   page header renders and wraps consistently on mobile. */
.page-head,
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.page-head__title,
.page-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.page-head__sub,
.page-subtitle { margin: .25rem 0 0; font-size: .875rem; color: var(--text-muted); }

/* .stack is the vertical layout wrapper used across ~12 views — for page
   sections and for form fields + submit button alike — always with a `gap` set
   (often inline). It was never styled, so gap did nothing: sections butted
   together and submit buttons hugged the field/card above. Defining it as a
   flex column makes every `gap` (inline overrides included) take effect, with a
   sensible default where none is set. */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* WhatsApp support floating button (agent portal). */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover { transform: scale(1.06); color: #fff; box-shadow: 0 10px 28px rgba(37, 211, 102, .55); }
.whatsapp-float svg { width: 30px; height: 30px; }
.wa-tooltip {
    position: absolute;
    right: 68px;
    white-space: nowrap;
    background: #111827;
    color: #fff;
    padding: .4rem .7rem;
    border-radius: var(--radius, .5rem);
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.whatsapp-float:hover .wa-tooltip { opacity: 1; transform: translateX(0); }
@media (max-width: 640px) {
    .whatsapp-float { right: 16px; bottom: 16px; }
    .wa-tooltip { display: none; }
}

/* ── Dropdowns (Bootstrap override) ───────────────────────────────────────── */

.dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-lg);
    padding: .375rem;
    font-size: .875rem;
    min-width: 220px;
}
.dropdown-item {
    display: flex; align-items: center; gap: .625rem;
    padding: .5625rem .75rem;
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-weight: 500;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-inset); color: var(--text-heading); }
.dropdown-item i { font-size: 1.0625rem; color: var(--text-muted); }
.dropdown-item.text-danger, .dropdown-item.text-danger i { color: var(--danger-text); }
.dropdown-item.text-danger:hover { background: var(--danger-light); }
.dropdown-divider { margin: .375rem 0; border-color: var(--border-color); }
.dropdown-header {
    padding: .5rem .75rem; font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.tab-strip {
    display: flex;
    gap: .25rem;
    padding: .3125rem;
    background: var(--bg-inset);
    border-radius: var(--radius);
    overflow-x: auto;
    scrollbar-width: none;
}
.tab-strip::-webkit-scrollbar { display: none; }

.tab-strip__btn {
    display: inline-flex; align-items: center; gap: .4375rem;
    padding: .5625rem .875rem;
    border: 0; border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-body);
    font-family: inherit; font-size: .8125rem; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.tab-strip__btn:hover { color: var(--text-heading); }
.tab-strip__btn.is-active {
    background: var(--bg-card);
    color: var(--primary);
    box-shadow: var(--shadow-xs);
}

/* ── Guided form (verification pages) ─────────────────────────────────────── */

/*
 * A single vertical flow: branded header, then numbered steps. Replaces the
 * side-by-side arrangement, where the form was squeezed into a third of the
 * viewport while the panel beside it sat mostly empty.
 */

.verify-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.verify-hero {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    /* Follows the admin-chosen brand colour, never a hardcoded hue. */
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}

.verify-hero__icon {
    width: 46px; height: 46px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .18);
    font-size: 1.5rem;
}

.verify-hero__title {
    margin: 0;
    font-size: 1.25rem; font-weight: 800;
    color: #fff; letter-spacing: -.03em; line-height: 1.2;
}
.verify-hero__sub { margin: .1875rem 0 0; font-size: .9375rem; opacity: .9; line-height: 1.4; }

/* Simplified service headers: show only the service name — the description and
   the agent balance are hidden here (the balance still lives in the top bar). */
.verify-hero__sub,
.verify-hero__balance { display: none; }

.verify-hero__balance { margin-left: auto; text-align: right; flex-shrink: 0; }
.verify-hero__balance-label { display: block; font-size: .8125rem; opacity: .85; font-weight: 500; }
.verify-hero__balance-value {
    display: block; font-size: 1.375rem; font-weight: 800;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .verify-hero { flex-wrap: wrap; padding: var(--space-4); }
    .verify-hero__balance { margin-left: 0; width: 100%; text-align: left; }
}

.verify-body { padding: var(--space-5); }

@media (max-width: 768px) {
    .verify-body { padding: var(--space-4); }
}

.verify-step { margin-bottom: var(--space-5); }
.verify-step:last-child { margin-bottom: 0; }

.step-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }

.step-head__num {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: .875rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.step-head__title { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.025em; }

/* Search-type tiles: icon badge above the label. */
.option-tile__badge {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 1.125rem;
    transition: background var(--transition), color var(--transition);
}
.option-tile input:checked + .option-tile__body .option-tile__badge {
    background: var(--primary); color: #fff;
}

.option-tile--tall .option-tile__body { padding: var(--space-4) var(--space-3); gap: var(--space-2); }

/* Inputs that carry a leading glyph — used where the field is the whole step and
   the icon reinforces what is being asked for. */
.field-icon { position: relative; }
.field-icon > i {
    position: absolute;
    left: var(--space-4); top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: var(--text-muted);
    pointer-events: none;
}
.field-icon .form-control { padding-left: 3.25rem; }

/* ── Code blocks & API docs ───────────────────────────────────────────────── */

.code-block {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-inset);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--text-heading);
    overflow: hidden;
}
.code-block code { color: inherit; word-break: break-all; }

.code-block--multiline { align-items: flex-start; padding: 0; }
.code-block--multiline pre {
    flex: 1;
    margin: 0;
    padding: var(--space-4);
    /* Long JSON scrolls inside the block; the page must never scroll sideways. */
    overflow-x: auto;
    max-height: 380px;
    overflow-y: auto;
    font-size: .78125rem;
    line-height: 1.65;
}
.code-block--multiline pre code { word-break: normal; white-space: pre; }
.code-block--multiline .btn { margin: var(--space-2) var(--space-2) 0 0; flex-shrink: 0; }

.endpoint { padding: var(--space-5) 0; border-bottom: 1px solid var(--border-color); }
.endpoint:last-child { border-bottom: 0; padding-bottom: 0; }
.endpoint:first-child { padding-top: var(--space-2); }

.endpoint__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.endpoint__method {
    padding: .3125rem .625rem;
    background: var(--success-light); color: var(--success-text);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
}
.endpoint__path {
    font-family: var(--font-mono); font-size: .875rem; font-weight: 600;
    color: var(--text-heading); word-break: break-all;
}
.endpoint__title { font-size: 1rem; font-weight: 700; margin: 0 0 .375rem; }
.endpoint__desc { font-size: .875rem; color: var(--text-muted); line-height: 1.65; margin: 0 0 var(--space-4); }
.endpoint__label {
    display: block; margin-bottom: .5rem;
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted);
}

/* ── Ranked list (provider failover order) ────────────────────────────────── */

.rank-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.rank-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.rank-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }

.rank-item__num {
    width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bg-inset); color: var(--text-muted);
    font-size: .8125rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* The first provider that can serve a request is the one that will, so the top
   of the list is highlighted — it is the effective default. */
.rank-item:first-child .rank-item__num { background: var(--primary); color: #fff; }

.rank-item__name { font-weight: 700; color: var(--text-heading); font-size: .9375rem; }
.rank-item__meta { font-size: .75rem; color: var(--text-muted); }
.rank-item__actions { display: flex; gap: .25rem; margin-left: auto; flex-shrink: 0; }

/* ── Queue tabs ───────────────────────────────────────────────────────────── */

.queue-tab {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%; text-align: left;
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.queue-tab:hover { border-color: var(--border-strong); }
.queue-tab.is-active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, var(--bg-card));
    box-shadow: 0 0 0 1px var(--primary);
}
.queue-tab__icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bg-inset); color: var(--text-muted);
    font-size: 1.25rem;
}
.queue-tab.is-active .queue-tab__icon {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}
.queue-tab__label { font-size: .875rem; font-weight: 700; color: var(--text-heading); line-height: 1.3; }
.queue-tab__count { font-size: .75rem; color: var(--text-muted); margin-top: .125rem; }

/* ── Meter (provider success rate) ────────────────────────────────────────── */

.meter { height: 6px; border-radius: var(--radius-pill); background: var(--bg-inset); overflow: hidden; }
.meter__fill { height: 100%; border-radius: var(--radius-pill); transition: width var(--transition); }

/* ── Misc ─────────────────────────────────────────────────────────────────── */

.divider { height: 1px; background: var(--border-color); border: 0; margin: var(--space-5) 0; }
.text-muted { color: var(--text-muted) !important; }
.mono { font-family: var(--font-mono); font-size: .875em; }
.numeric { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.spinner-border { border-width: .15em; }

/* Content footer */
.content-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-color);
    font-size: .78125rem;
    color: var(--text-muted);
}

/* ------------------------------------------------------------------ *
 * Request-queue type tabs (admin). These class names are used by the
 * request queue but were never defined, so the 12 tabs rendered as bare
 * buttons. Style them as a horizontally scrollable tab strip so they
 * never overflow the viewport on mobile.
 * ------------------------------------------------------------------ */
.req-tabs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
    max-width: 100%;
}
.req-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    white-space: nowrap;
    padding: .5rem .875rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-body);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.req-tab i { font-size: 1rem; }
.req-tab .badge { font-size: .6875rem; }
.req-tab:hover { background: var(--bg-inset); color: var(--text-heading); }
.req-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.req-tab.is-active i { color: #fff; }
.req-tab.is-active .badge { background: rgba(255, 255, 255, .25); color: #fff; }

/* ------------------------------------------------------------------ *
 * Missing design tokens & class aliases.
 * These names are used across ~13 views (funding, history, profile,
 * complaints, empty states…) but were never defined, so those elements
 * rendered unstyled — the "not designed properly" pages. Defining them
 * here fixes every page that uses them at once.
 * ------------------------------------------------------------------ */
:root {
    --text-xs:  .75rem;
    --text-sm:  .8125rem;
    --text-base: .9375rem;
    --text-md:  1rem;
    --text-lg:  1.0625rem;
    --text-xl:  1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
}

/* Text / weight utilities */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Responsive key/value row (funding account details, summaries) */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4) var(--space-5);
}

/* Stat label / value pairs */
.stat-label {
    margin: 0 0 .25rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.stat-value { margin: 0; font-weight: 700; color: var(--text-heading); }

/* Wallet balance pill in page headers */
.wallet-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-weight: 700;
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* Hyphenated empty-state aliases (the BEM __ versions already exist) */
.empty-state-icon {
    width: 64px; height: 64px;
    margin: 0 auto var(--space-4);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--bg-inset);
    color: var(--text-muted);
    font-size: 1.75rem;
}
.empty-state-title { font-size: .9375rem; font-weight: 700; color: var(--text-heading); margin-bottom: .375rem; }
.empty-state-text { font-size: .8125rem; color: var(--text-muted); max-width: 42ch; margin: 0 auto; line-height: 1.6; }

/* Generic inline spinner (distinct from Bootstrap's .spinner-border) */
.spinner {
    display: inline-block;
    width: 1em; height: 1em;
    border: .15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: fv-spin .6s linear infinite;
    vertical-align: -.125em;
}
@keyframes fv-spin { to { transform: rotate(360deg); } }

/* ── Centred pop-up modals ────────────────────────────────────────────────
   Detail / decision / edit panels that used to render inline at the foot of
   a page now appear as a centred overlay, so the admin never scrolls to find
   them. The panel keeps its existing .card markup inside .ui-modal__dialog. */
.ui-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: fv-fade .12s ease-out;
}
.ui-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    cursor: pointer;
}
.ui-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 760px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    animation: fv-modal-in .16s ease-out;
}
/* The panel's own card fills the dialog and loses its bottom margin. */
.ui-modal__dialog > .card { margin-bottom: 0; }
@keyframes fv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fv-modal-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 575.98px) {
    .ui-modal { padding: .75rem; align-items: flex-start; }
    .ui-modal__dialog { max-height: 94vh; }
}

/* ── History cards ────────────────────────────────────────────────────────
   Request & verification history as one card per record (label: value, line
   by line) instead of a wide table agents had to scroll sideways through.
   The grid stacks to one column on phones and fans out on wider screens. */
.hist-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
    padding: var(--space-5);
}
.hist-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-subtle);
    padding: .9rem 1.05rem;
}
.hist-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .9rem;
    padding: .36rem 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: .85rem;
}
.hist-card__row:last-of-type { border-bottom: 0; }
.hist-card__row--stack {
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
}
.hist-card__label {
    flex-shrink: 0;
    color: var(--text-muted);
    font-weight: 500;
}
.hist-card__value {
    min-width: 0;
    text-align: right;
    font-weight: 600;
    color: var(--text-heading);
    word-break: break-word;
}
.hist-card__row--stack .hist-card__value {
    text-align: left;
    font-weight: 500;
    white-space: normal;
}
.hist-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--border-color);
}
@media (max-width: 575.98px) {
    .hist-cards { grid-template-columns: 1fr; gap: .75rem; padding: var(--space-4); }
}

/* ── "Viewing as agent" bar ───────────────────────────────────────────────
   Shown across the agent portal while an admin is impersonating an agent, so
   it is always obvious whose account is being acted on and how to get out. */
.impersonation-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .75rem 1rem 0;
    padding: .6rem 1rem;
    border-radius: var(--radius);
    background: #7a4d00;
    color: #fff;
    font-size: .85rem;
    font-weight: 500;
}
.impersonation-bar strong { font-weight: 700; }
.impersonation-bar__exit {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #fff;
    color: #7a4d00;
    padding: .35rem .8rem;
    border-radius: 7px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.impersonation-bar__exit:hover { opacity: .92; }