/* ==========================================================================
   RUPEECO FINANCIAL INFRASTRUCTURE - DESIGN SYSTEM
   --------------------------------------------------------------------------
   Rupeeco is the parent infrastructure brand; QuickZaps is the reseller
   product that runs on it. This one stylesheet carries the whole visual
   language of all three portals (Admin, Partner, Employee): tokens,
   surfaces, typography, controls, tables, states and motion.

   Colour roles are taken from the Rupeeco mark and are NOT interchangeable:

       NAVY    structure, authority, navigation, headings, "enterprise" CTAs
       GREEN   money, success, the single primary action on a screen
       ORANGE  energy and attention - accents, pending states, highlights

   Glass is used for hierarchy only (cards, header, rail, popovers) and is
   always opaque enough that text contrast never depends on what is behind.

   It is deliberately ADDITIVE. Nothing in AdminCs.css / UserPannel.css or in
   any page level <style> block is deleted - this file restates those same
   class names in the Rupeeco language. A page that uses a class this file
   has never heard of keeps its old styling and still sits correctly on the
   new background, so no screen can end up unstyled.

   Several rules are written as `body .thing` rather than `.thing`. That is
   not decoration: the report views carry their own inline <style> blocks
   which the browser reads AFTER this file, so a bare `.thing` here would
   lose to them. The extra `body` buys one point of specificity.

   Everything resolves through the custom properties in :root. Dark mode is
   a matter of redefining that block - see section 19.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    /* -- Rupeeco brand primitives ---------------------------------------- */
    --rc-navy-950: #04112F;
    --rc-navy-900: #071B49;
    --rc-navy-800: #0B255C;
    --rc-navy-700: #102F6B;
    --rc-navy-600: #1D4188;
    --rc-navy-500: #3558A3;
    --rc-navy-300: #9FB2D6;
    --rc-navy-100: #E4EAF5;
    --rc-navy-50: #F1F4FA;

    --rc-green-700: #00733A;
    --rc-green-600: #008C45; /* primary buttons: white text passes AA */
    --rc-green-500: #00A651; /* the logo green - accents, charts, dots */
    --rc-green-400: #0BAE5B;
    --rc-green-300: #4CC98A;
    --rc-green-100: #D9F3E5;
    --rc-green-50: #EEFAF3;

    --rc-orange-700: #C2410C;
    --rc-orange-600: #EA580C;
    --rc-orange-500: #F97316;
    --rc-orange-400: #FF8A00;
    --rc-amber-500: #F59E0B;
    --rc-orange-100: #FFEDD5;
    --rc-orange-50: #FFF7ED;

    /* -- Semantic brand roles (names kept for every existing rule) ------- */
    --qz-primary: var(--rc-green-600);
    --qz-primary-hover: var(--rc-green-700);
    --qz-primary-deep: var(--rc-navy-800); /* deep surfaces are navy, not green */
    --qz-primary-darker: var(--rc-navy-900);
    --qz-primary-bright: var(--rc-green-500);
    --qz-mint: var(--rc-green-300);
    --qz-mint-soft: #BFEBD3;
    --qz-primary-tint: rgba(0, 166, 81, 0.08);
    --qz-primary-tint-2: rgba(0, 166, 81, 0.14);
    --qz-primary-ring: rgba(0, 166, 81, 0.20);

    --qz-navy: var(--rc-navy-800);
    --qz-navy-strong: var(--rc-navy-900);
    --qz-navy-tint: rgba(11, 37, 92, 0.06);
    --qz-navy-tint-2: rgba(11, 37, 92, 0.10);
    --qz-navy-ring: rgba(11, 37, 92, 0.16);

    --qz-accent: var(--rc-orange-500);
    --qz-accent-strong: var(--rc-orange-600);
    --qz-accent-ink: var(--rc-orange-700);
    --qz-accent-tint: rgba(249, 115, 22, 0.10);
    --qz-accent-ring: rgba(249, 115, 22, 0.22);

    /* -- Neutrals -------------------------------------------------------- */
    --qz-white: #FFFFFF;
    --qz-bg: #F6F9FC;
    --qz-bg-2: #EEF3F9;
    --qz-slate-50: #F8FAFC;
    --qz-slate-100: #F1F5F9;
    --qz-slate-200: #E2E8F0;
    --qz-slate-300: #CBD5E1;
    --qz-slate-400: #94A3B8;
    --qz-slate-500: #64748B;
    --qz-slate-600: #475569;
    --qz-slate-700: #334155;
    --qz-slate-800: #1E293B;
    --qz-slate-900: #0F172A;

    /* -- Semantic text --------------------------------------------------- */
    --qz-text: var(--rc-navy-900);
    --qz-text-2: #3A4A6B;
    --qz-muted: #64748B;
    --qz-muted-2: #94A3B8;

    /* -- Semantic status (subtle fills, never saturated) ----------------- */
    --qz-success: #00803F;
    --qz-success-bg: rgba(0, 166, 81, 0.10);
    --qz-success-line: rgba(0, 166, 81, 0.22);
    --qz-warning: var(--rc-orange-700);
    --qz-warning-bg: rgba(249, 115, 22, 0.10);
    --qz-warning-line: rgba(249, 115, 22, 0.24);
    --qz-danger: #D92D20;
    --qz-danger-bg: rgba(217, 45, 32, 0.08);
    --qz-danger-line: rgba(217, 45, 32, 0.20);
    --qz-info: #1F5BD8;
    --qz-info-bg: rgba(31, 91, 216, 0.08);
    --qz-info-line: rgba(31, 91, 216, 0.20);
    /* The old palette had a violet role. Rupeeco has no violet, so every
       place that used it now reads as a quiet navy instead. */
    --qz-violet: var(--rc-navy-600);
    --qz-violet-bg: rgba(29, 65, 136, 0.08);

    /* -- Surfaces (glass) ------------------------------------------------ */
    --qz-surface: rgba(255, 255, 255, 0.80);
    --qz-surface-strong: rgba(255, 255, 255, 0.94);
    --qz-surface-solid: #FFFFFF;
    --qz-surface-sunken: rgba(241, 245, 250, 0.78);
    --qz-surface-raised: rgba(255, 255, 255, 0.68);
    --qz-nav-surface: rgba(255, 255, 255, 0.84);
    --qz-nav-surface-2: #FFFFFF;

    /* -- Borders --------------------------------------------------------- */
    --qz-border: rgba(7, 27, 73, 0.07);
    --qz-border-strong: rgba(7, 27, 73, 0.13);
    --qz-border-glass: rgba(255, 255, 255, 0.65);
    --qz-border-nav: rgba(7, 27, 73, 0.07);

    /* -- Blur ------------------------------------------------------------ */
    --qz-blur: 14px;
    --qz-blur-lg: 18px;

    /* -- Shadows (navy-tinted, soft, layered) ---------------------------- */
    --qz-shadow-xs: 0 1px 2px rgba(7, 27, 73, 0.05);
    --qz-shadow-sm: 0 1px 2px rgba(7, 27, 73, 0.04), 0 4px 12px -6px rgba(7, 27, 73, 0.10);
    --qz-shadow: 0 1px 2px rgba(7, 27, 73, 0.04), 0 12px 28px -16px rgba(7, 27, 73, 0.16);
    --qz-shadow-md: 0 2px 4px rgba(7, 27, 73, 0.04), 0 20px 40px -22px rgba(7, 27, 73, 0.22);
    --qz-shadow-lg: 0 4px 8px rgba(7, 27, 73, 0.04), 0 32px 64px -28px rgba(7, 27, 73, 0.30);
    --qz-shadow-nav: 0 1px 2px rgba(7, 27, 73, 0.04), 0 24px 56px -30px rgba(7, 27, 73, 0.30);
    --qz-shadow-green: 0 1px 1px rgba(0, 90, 45, 0.18), 0 6px 14px -8px rgba(0, 140, 69, 0.55);
    --qz-shadow-navy: 0 1px 1px rgba(4, 17, 47, 0.25), 0 8px 18px -10px rgba(7, 27, 73, 0.60);

    /* -- Radii ----------------------------------------------------------- */
    --qz-r-xs: 6px;
    --qz-r-sm: 8px;
    --qz-r-md: 10px;  /* inputs, buttons */
    --qz-r-lg: 14px;  /* nested wells, menus */
    --qz-r-xl: 18px;  /* cards */
    --qz-r-2xl: 22px; /* modals, rail */
    --qz-r-pill: 999px;

    /* -- Spacing (8px rhythm with 4px half-steps) ------------------------ */
    --qz-space-1: 4px;
    --qz-space-2: 8px;
    --qz-space-3: 12px;
    --qz-space-4: 16px;
    --qz-space-5: 20px;
    --qz-space-6: 24px;
    --qz-space-8: 32px;
    --qz-space-10: 40px;
    --qz-space-12: 48px;
    --qz-space-16: 64px;
    --qz-gutter: 20px;

    /* -- Typography ------------------------------------------------------ */
    --qz-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --qz-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
    --qz-fs-display: clamp(1.6rem, 2.3vw, 2.1rem);
    --qz-fs-h1: clamp(1.3rem, 1.6vw, 1.55rem);
    --qz-fs-h2: 1.125rem;
    --qz-fs-h3: 1rem;
    --qz-fs-body: 0.875rem;
    --qz-fs-sm: 0.8125rem;
    --qz-fs-xs: 0.75rem;
    --qz-fs-label: 0.6875rem;
    --qz-track-label: 0.06em;
    --qz-track-tight: -0.018em;

    /* -- Motion (150-300ms, one easing) ---------------------------------- */
    --qz-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --qz-t-fast: 150ms;
    --qz-t: 220ms;
    --qz-t-slow: 300ms;

    /* -- Layout ---------------------------------------------------------- */
    --qz-sidebar-w: 264px;
    --qz-sidebar-w-collapsed: 84px;
    --qz-sidebar-inset: 14px;
    --qz-shell-pad: 28px;
    --qz-z-nav: 1045;
    --qz-z-topbar: 1030;
}

/*
   PAGE-LOCAL PALETTES

   Eight report screens declare their own :root palette (--clr-neft was a
   purple, --qz-cyber-cyan a teal, etc.) inside a <style> block that the
   browser reads after this file. html:root outranks a bare :root no matter
   the order, so this single block brings every one of those pages onto the
   Rupeeco palette without touching the pages themselves.
*/
html:root {
    --qz-cyber-cyan: var(--rc-green-600);
    --qz-bg-light: var(--qz-bg);
    --surface-card-base: var(--qz-surface);
    --text-primary: var(--qz-text);
    --text-secondary: var(--qz-text-2);
    --text-muted: var(--qz-muted);
    --text-dark: var(--qz-text);

    --clr-imps: var(--rc-green-600);
    --clr-imps-bg: rgba(0, 166, 81, 0.09);
    --clr-neft: var(--rc-navy-700);
    --clr-neft-bg: rgba(16, 47, 107, 0.08);
    --clr-rtgs: var(--rc-orange-700);
    --clr-rtgs-bg: rgba(249, 115, 22, 0.10);
    --clr-failed: var(--qz-danger);

    --rc-green: var(--rc-green-600);
    --rc-green-dark: var(--rc-green-700);
    --rc-blue: var(--rc-navy-600);
    --rc-purple: var(--rc-navy-500);
    --rc-amber: var(--rc-orange-600);
    --rc-red: var(--qz-danger);
    --rc-slate: var(--qz-text-2);
    --rc-muted: var(--qz-muted);
    --rc-line: var(--qz-border-strong);

    --brand-green: var(--rc-green-600);
    --brand-green-hover: var(--rc-green-700);
    --brand-green-light: var(--qz-primary-tint);
    --emerald-dark: var(--rc-navy-800);
    --card-dark: var(--rc-navy-800);
    --neon-green: var(--rc-green-500);
    --bg-main: var(--qz-bg);
    --bg-body: var(--qz-bg);
    --border-subtle: var(--qz-border);
    --border-color: var(--qz-border-strong);
}

/* The rail width the shell reserves. Toggled by qz-ui.js. */
body {
    --qz-rail: calc(var(--qz-sidebar-w) + var(--qz-sidebar-inset) * 2);
}

body.qz-nav-collapsed {
    --qz-rail: calc(var(--qz-sidebar-w-collapsed) + var(--qz-sidebar-inset) * 2);
}


/* ==========================================================================
   2. GLOBAL SHELL + AMBIENT BACKGROUND
   --------------------------------------------------------------------------
   The ambient wash lives on a fixed element rather than on <body>, because
   half the report views set their own body background in a page level
   <style> block. Painting it on our own layer means those pages inherit the
   new background without any of them having to be rewritten.
   ========================================================================== */

body {
    font-family: var(--qz-font);
    color: var(--qz-text);
    background-color: var(--qz-bg);
    font-size: var(--qz-fs-body);
    line-height: 1.5;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

.qz-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--qz-bg);
    background-image:
        /* paper-white core so the reading area stays neutral */
        radial-gradient(110% 80% at 50% 0%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 62%),
        /* green, top left - growth */
        radial-gradient(42% 38% at 4% 0%, rgba(0, 166, 81, 0.075) 0%, rgba(0, 166, 81, 0) 72%),
        /* orange, top right - energy, kept faint */
        radial-gradient(38% 34% at 100% 2%, rgba(249, 115, 22, 0.06) 0%, rgba(249, 115, 22, 0) 70%),
        /* navy anchor, centre-bottom - infrastructure */
        radial-gradient(70% 50% at 60% 110%, rgba(11, 37, 92, 0.07) 0%, rgba(11, 37, 92, 0) 70%),
        linear-gradient(180deg, #F8FAFD 0%, #F2F6FB 100%);
}

/* A very quiet dot grid - reads as "ledger paper", keeps flats from banding. */
.qz-ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-image: radial-gradient(rgba(7, 27, 73, 0.05) 0.6px, transparent 0.6px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}

/* The report pages ship their own mesh; ours already covers it. */
body .ambient-mesh {
    display: none;
}

/* --- Content shell -------------------------------------------------------- */
body .main-wrapper {
    margin-left: var(--qz-rail);
    padding: var(--qz-shell-pad) var(--qz-shell-pad) var(--qz-space-10);
    min-height: 100vh;
    transition: margin-left var(--qz-t-slow) var(--qz-ease);
}

/* Most report and settings views open with
   <div class="container-fluid py-4 py-lg-5 px-3 px-xl-5">, which was doing
   the job the shell now does. Left alone, that padding stacks on top of the
   shell's and every report sits in a differently sized well. Flattening the
   outermost one - and only the outermost one, so nested containers keep
   their own spacing - is what makes the screens line up with each other. */
body .main-wrapper > .container-fluid,
body .main-wrapper > .container,
body #qzMain > .container-fluid,
body #qzMain > .container {
    /* !important is unavoidable: the padding being cancelled comes from
       Bootstrap's spacing utilities, which are themselves !important. */
    padding: 0 !important;
    max-width: none;
}

/* Bootstrap's default gutter is tighter than the new grid rhythm. */
body .main-wrapper .row > * {
    --bs-gutter-x: var(--qz-gutter);
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--qz-font);
    letter-spacing: var(--qz-track-tight);
    color: var(--qz-text);
}

body h1, body .h1 { font-size: var(--qz-fs-h1); font-weight: 700; }
body h2, body .h2 { font-size: 1.3rem; font-weight: 700; }
body h3, body .h3 { font-size: 1.125rem; font-weight: 650; }
body h4, body .h4 { font-size: 1.05rem; font-weight: 700; }
body h5, body .h5 { font-size: 0.98rem; font-weight: 700; }
body h6, body .h6 { font-size: 0.88rem; font-weight: 700; }

body .text-muted { color: var(--qz-muted) !important; }

/* Numbers are the subject of a fintech dashboard: give them their own
   voice - tight tracking, tabular figures so columns never jitter. */
.qz-num,
body .metric-main-value,
body .amount-value,
body .rc-amt,
body .text-num,
body .mp-stat-value,
body .wallet-balance {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv11' 1;
    letter-spacing: -0.025em;
    font-weight: 700;
}

.qz-mono,
body .rc-mono,
body .bank-meta-text,
body .txn-id,
body .font-monospace {
    font-family: var(--qz-font-mono);
    font-size: 0.8em;
    letter-spacing: -0.01em;
}

/* Small uppercase category labels used across cards, filters and tables. */
.qz-label,
body .filter-tag-label,
body .metric-label-text,
body .mp-stat-label,
body .rc-label,
body .field-label,
body .crypto-label {
    font-size: var(--qz-fs-label);
    font-weight: 700;
    letter-spacing: var(--qz-track-label);
    text-transform: uppercase;
    color: var(--qz-muted);
    line-height: 1.4;
}

/* --- Page header ---------------------------------------------------------- */
.qz-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--qz-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--qz-space-6);
}

.qz-page-title {
    font-size: var(--qz-fs-h1);
    font-weight: 700;
    letter-spacing: var(--qz-track-tight);
    margin: 0;
}

.qz-page-sub {
    font-size: var(--qz-fs-sm);
    color: var(--qz-muted);
    margin: 2px 0 0;
}

/* The report pages title their screens with .main-logo-title / .page-title. */
body .main-logo-title,
body .page-title {
    font-size: var(--qz-fs-h1);
    font-weight: 700;
    letter-spacing: var(--qz-track-tight);
    color: var(--qz-text);
    background: none;
    -webkit-text-fill-color: currentColor;
}

body .page-subtitle {
    color: var(--qz-muted);
    font-weight: 500;
    font-size: var(--qz-fs-sm);
}

body .config-title {
    color: var(--qz-text);
    font-weight: 700;
}

/* A section header with a small green rule, used by .section-title. */
body .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--qz-fs-h3);
    font-weight: 700;
    color: var(--qz-text);
    margin-bottom: var(--qz-space-5);
    border: 0;
    padding: 0;
}

body .section-title::before {
    content: "";
    width: 3px;
    height: 18px;
    border-radius: var(--qz-r-pill);
    background: var(--rc-green-500);
    flex: 0 0 auto;
}


/* ==========================================================================
   4. GLASS SURFACES
   --------------------------------------------------------------------------
   One surface recipe, applied to every card class already in the codebase so
   that a settings page, a report page and the dashboard all read as the same
   material.
   ========================================================================== */

.qz-card,
body .glass-card,
body .glass-form-card,
body .dashboard-container,
body .report-container,
body .table-container,
body .filter-card,
body .filter-section,
body .filter-panel,
body .rc-panel,
body .rc-card,
body .rc-wrap,
body .workspace-card,
body .user-selector-card,
body .permission-card,
body .ledger-container,
body .loader-card,
body .table-deck-light,
body .modal-content-custom {
    position: relative;
    background: var(--qz-surface);
    -webkit-backdrop-filter: blur(var(--qz-blur)) saturate(140%);
    backdrop-filter: blur(var(--qz-blur)) saturate(140%);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-xl);
    box-shadow: var(--qz-shadow);
    color: var(--qz-text);
}

/* The hairline of light along the top edge is what makes a glass panel read
   as a physical sheet rather than a flat rectangle. */
.qz-card::before,
body .glass-card::before,
body .dashboard-container::before,
body .report-container::before,
body .rc-panel::before,
body .filter-card::before,
body .workspace-card::before,
body .table-container::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 22%, rgba(255, 255, 255, 0.9) 78%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Padding: the older cards relied on Bootstrap p-4 utilities, so only fill
   in where the class is used bare. */
.qz-card { padding: var(--qz-space-6); }

body .rc-panel,
body .rc-card,
body .filter-panel,
body .workspace-card {
    padding: var(--qz-space-5);
}

/* Interactive lift - fast, small, professional. */
.qz-card--hover,
body .glass-card,
body .permission-card,
body .rc-card,
body .mp-stat-box,
body .metric-mini-card {
    transition: transform var(--qz-t) var(--qz-ease), box-shadow var(--qz-t) var(--qz-ease), border-color var(--qz-t) var(--qz-ease);
}

.qz-card--hover:hover,
body .glass-card:hover,
body .permission-card:hover,
body .rc-card:hover,
body .metric-mini-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--qz-shadow-md);
    border-color: var(--qz-border-strong);
}

/*
   NESTED SURFACES

   The report screens nest a filter dock and a table deck inside an outer
   .dashboard-container, and all three match the glass recipe above. Stacked,
   three translucent blurred sheets read as fog and the text on the innermost
   one loses contrast. A surface inside another surface therefore drops its
   blur and shadow and becomes a quiet inset instead - the depth stays in the
   outer sheet, where it belongs.
*/
body .glass-card .filter-card,
body .glass-card .filter-section,
body .glass-card .table-container,
body .dashboard-container .filter-glass-dock,
body .dashboard-container .table-deck-light,
body .dashboard-container .filter-card,
body .report-container .filter-section,
body .report-container .table-container,
body .rc-panel .rc-card,
body .rc-wrap .rc-panel,
body .workspace-card .filter-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--qz-surface-sunken);
    box-shadow: none;
    border-radius: var(--qz-r-lg);
}

body .glass-card .filter-card::before,
body .dashboard-container .filter-glass-dock::before,
body .dashboard-container .table-deck-light::before,
body .rc-panel .rc-card::before { display: none; }

/* A table deck sitting directly inside a card needs no second frame at all. */
body .dashboard-container .table-deck-light {
    background: transparent;
    border-color: var(--qz-border);
}

/* A sunken well for nested content: legends, payload boxes, sub-lists. */
.qz-well,
body .payload-box,
body .api-key-box,
body .input-group-stack,
body .rc-chart-box {
    background: var(--qz-surface-sunken);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-md);
}

/* Card header row: title left, meta/action right. */
.qz-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qz-space-3);
    margin-bottom: var(--qz-space-5);
}

.qz-card-title {
    font-size: var(--qz-fs-h3);
    font-weight: 700;
    letter-spacing: var(--qz-track-tight);
    margin: 0;
}

.qz-card-meta {
    font-size: var(--qz-fs-xs);
    color: var(--qz-muted);
    font-weight: 600;
}


/* ==========================================================================
   5. SIDEBAR
   --------------------------------------------------------------------------
   Shared verbatim by the admin menu (_AdminTopNavbar), the partner menu
   (PartnerNavbar) and the permission driven employee menu (EmployeeSidebar)
   - all three render the same class names, so all three get this rail.

   The rail is a light glass sheet with navy structure. It is light on
   purpose: the Rupeeco mark has a navy centre, and it must sit on a clean
   ground at its true colours - never on a plate, glow or tinted panel.
   ========================================================================== */

body .sidebar-container {
    position: fixed;
    left: var(--qz-sidebar-inset);
    top: var(--qz-sidebar-inset);
    bottom: var(--qz-sidebar-inset);
    width: var(--qz-sidebar-w);
    display: flex;
    flex-direction: column;
    align-items: stretch; /* AdminCs.css sets flex-start on phones */
    z-index: var(--qz-z-nav);
    padding: 0;
    overflow: hidden;
    border-radius: var(--qz-r-2xl);
    border: 1px solid var(--qz-border-nav);
    background: var(--qz-nav-surface);
    -webkit-backdrop-filter: blur(var(--qz-blur-lg)) saturate(160%);
    backdrop-filter: blur(var(--qz-blur-lg)) saturate(160%);
    box-shadow: var(--qz-shadow-nav);
    transition: width var(--qz-t-slow) var(--qz-ease), left var(--qz-t-slow) var(--qz-ease);
}

/* One hairline of light along the top edge, and a whisper of the brand
   green at the head of the rail - nothing more. */
body .sidebar-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 1px),
        radial-gradient(90% 22% at 0% 0%, rgba(0, 166, 81, 0.06) 0%, rgba(0, 166, 81, 0) 70%);
}

body .sidebar-container:hover { width: var(--qz-sidebar-w); }

body.qz-nav-collapsed .sidebar-container,
body.qz-nav-collapsed .sidebar-container:hover {
    width: var(--qz-sidebar-w-collapsed);
}

/* --- Brand ---------------------------------------------------------------- */
body .sidebar-container .logo-section {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Right padding reserves the corner the collapse button sits in. */
    padding: 20px 46px 14px 20px;
    text-align: left;
    flex: 0 0 auto;
}

/* The logo is shown exactly as supplied: no plate, no glow, no recolour,
   aspect ratio untouched - only its height is set. */
body .sidebar-container .logo-section img,
.qz-logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    object-fit: contain;
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.qz-brand-text {
    min-width: 0;
    overflow: hidden;
    padding-left: 12px;
    border-left: 1px solid var(--qz-border-strong);
    transition: opacity var(--qz-t) var(--qz-ease);
}

.qz-brand-name {
    display: block;
    color: var(--qz-navy-strong);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
    white-space: nowrap;
}

.qz-brand-role {
    display: block;
    margin-top: 2px;
    color: var(--qz-muted);
    font-size: var(--qz-fs-label);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* --- Workspace ------------------------------------------------------------
   Which business this console is operating. A label, not a switcher: the
   platform has one workspace per login, so it never pretends otherwise. */
.qz-workspace {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 14px 6px;
    padding: 9px 11px;
    border-radius: var(--qz-r-lg);
    background: var(--qz-navy-tint);
    border: 1px solid var(--qz-border);
    min-width: 0;
    flex: 0 0 auto;
}

.qz-workspace-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: var(--qz-r-sm);
    background: var(--qz-navy);
    color: #fff;
    font-size: 12px;
}

.qz-workspace-meta { min-width: 0; overflow: hidden; line-height: 1.2; }

.qz-workspace-name {
    display: block;
    font-size: var(--qz-fs-sm);
    font-weight: 700;
    color: var(--qz-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qz-workspace-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: var(--qz-fs-label);
    font-weight: 600;
    color: var(--qz-muted);
    white-space: nowrap;
}

.qz-workspace-status i { color: var(--rc-green-500); font-size: 9px; }

/* --- Collapse control ----------------------------------------------------- */
.qz-nav-collapse {
    position: absolute;
    top: 24px;
    right: 12px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid var(--qz-border-strong);
    background: var(--qz-white);
    color: var(--qz-muted);
    border-radius: var(--qz-r-sm);
    cursor: pointer;
    font-size: 11px;
    z-index: 2;
    box-shadow: var(--qz-shadow-xs);
    transition: background var(--qz-t) var(--qz-ease), color var(--qz-t) var(--qz-ease), border-color var(--qz-t) var(--qz-ease);
}

.qz-nav-collapse:hover {
    color: var(--qz-navy);
    border-color: var(--qz-navy-ring);
}

.qz-nav-collapse i { transition: transform var(--qz-t-slow) var(--qz-ease); }
body.qz-nav-collapsed .qz-nav-collapse i { transform: rotate(180deg); }

/* --- Scroll area ---------------------------------------------------------- */
body .sidebar-container .menu-wrapper {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(7, 27, 73, 0.14) transparent;
}

/* Items must scroll, never squash: without this, a menu taller than the
   screen shrinks its labels and links instead of scrolling. */
body .sidebar-container .menu-wrapper > * { flex-shrink: 0; }

body .sidebar-container .menu-wrapper::-webkit-scrollbar { width: 4px; }
body .sidebar-container .menu-wrapper::-webkit-scrollbar-track { background: transparent; }
body .sidebar-container .menu-wrapper::-webkit-scrollbar-thumb {
    background: rgba(7, 27, 73, 0.14);
    border-radius: var(--qz-r-pill);
}

.qz-nav-group-label {
    padding: 16px 12px 6px;
    font-size: var(--qz-fs-label);
    font-weight: 600;
    letter-spacing: var(--qz-track-label);
    text-transform: uppercase;
    color: var(--qz-muted-2);
    white-space: nowrap;
    overflow: hidden;
}

/* --- Nav item ------------------------------------------------------------- */
body .sidebar-container .sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--qz-r-md);
    color: var(--qz-text-2);
    font-size: var(--qz-fs-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 1px solid transparent;
    transition: background var(--qz-t-fast) var(--qz-ease), color var(--qz-t-fast) var(--qz-ease), border-color var(--qz-t-fast) var(--qz-ease);
}

body .sidebar-container .sidebar-link i {
    min-width: 18px;
    width: 18px;
    font-size: 14px;
    text-align: center;
    flex: 0 0 18px;
    color: var(--qz-muted-2);
    transition: color var(--qz-t-fast) var(--qz-ease);
}

body .sidebar-container .sidebar-link span {
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
    transition: opacity var(--qz-t) var(--qz-ease);
}

body .sidebar-container .sidebar-link:hover {
    background: var(--qz-navy-tint);
    color: var(--qz-navy-strong);
}

body .sidebar-container .sidebar-link:hover i { color: var(--qz-navy); }

body .sidebar-container .sidebar-link:focus-visible {
    outline: 2px solid var(--qz-primary);
    outline-offset: 1px;
}

/* ACTIVE: a quiet green plate, navy label, green icon and a short green
   indicator against the rail edge. No gradient, no glow. */
body .sidebar-container .sidebar-link.active {
    background: rgba(0, 166, 81, 0.09);
    border-color: rgba(0, 166, 81, 0.14);
    color: var(--qz-navy-strong);
    font-weight: 600;
}

body .sidebar-container .sidebar-link.active i { color: var(--rc-green-600); }

body .sidebar-container .sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 var(--qz-r-pill) var(--qz-r-pill) 0;
    background: var(--rc-green-500);
}

/* DISABLED: an entry that exists in the product but is not live yet. */
body .sidebar-container .sidebar-link.is-disabled,
body .sidebar-container .sidebar-link[aria-disabled="true"] {
    color: var(--qz-muted-2);
    cursor: not-allowed;
    background: transparent;
}

body .sidebar-container .sidebar-link.is-disabled:hover i,
body .sidebar-container .sidebar-link.is-disabled i { color: var(--qz-slate-300); }

.qz-nav-tag {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: var(--qz-r-pill);
    background: var(--qz-slate-100);
    border: 1px solid var(--qz-border);
    color: var(--qz-muted);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Caret on a group toggle. */
body .sidebar-container .sidebar-link.dropdown-toggle::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    border: 0;
    margin: 0;
    font-size: 11px;
    color: var(--qz-muted-2);
    transition: transform var(--qz-t) var(--qz-ease);
    flex: 0 0 auto;
}

body .sidebar-container .dropdown.qz-open > .sidebar-link.dropdown-toggle::after {
    transform: rotate(180deg);
    color: var(--qz-navy);
}

body .sidebar-container .dropdown.qz-open > .sidebar-link {
    color: var(--qz-navy-strong);
    font-weight: 600;
}

body .sidebar-container .dropdown.qz-open > .sidebar-link i { color: var(--qz-navy); }

/* A group that holds the current page keeps its icon green even closed. */
body .sidebar-container .dropdown:has(.dropdown-item.active) > .sidebar-link i { color: var(--rc-green-600); }

/* --- Submenu: inline accordion, never a floating popup -------------------- */
body .sidebar-container .dropdown { position: relative; }

body .sidebar-container .dropdown-menu {
    position: static !important;
    display: none;
    float: none;
    transform: none !important;
    inset: auto !important;
    width: auto;
    min-width: 0;
    margin: 2px 0 6px;
    padding: 2px 0 2px 30px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    list-style: none;
}

/* The thread that ties a group's children back to its parent. */
body .sidebar-container .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 20px;
    width: 1px;
    top: 44px;
    bottom: 10px;
    background: var(--qz-border-strong);
}

body .sidebar-container .dropdown.qz-open > .dropdown-menu {
    display: block;
    animation: qz-fade var(--qz-t) var(--qz-ease);
}

body .sidebar-container .dropdown-item {
    position: relative;
    display: block;
    padding: 7px 10px;
    margin-bottom: 1px;
    border-radius: var(--qz-r-sm);
    color: var(--qz-muted);
    font-size: var(--qz-fs-sm);
    font-weight: 500;
    white-space: normal;
    line-height: 1.35;
    background: transparent;
    transition: background var(--qz-t-fast) var(--qz-ease), color var(--qz-t-fast) var(--qz-ease);
}

body .sidebar-container .dropdown-item:hover,
body .sidebar-container .dropdown-item:focus {
    background: var(--qz-navy-tint);
    color: var(--qz-navy-strong);
}

body .sidebar-container .dropdown-item.active {
    background: rgba(0, 166, 81, 0.08);
    color: var(--qz-navy-strong);
    font-weight: 600;
}

body .sidebar-container .dropdown-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rc-green-500);
    box-shadow: 0 0 0 3px var(--qz-white);
}

/* --- Footer: profile + logout -------------------------------------------- */
body .sidebar-container .logout-section {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--qz-border);
    background: var(--qz-surface-sunken);
    position: relative;
}

.qz-nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: var(--qz-r-lg);
    background: var(--qz-white);
    border: 1px solid var(--qz-border);
    box-shadow: var(--qz-shadow-xs);
    min-width: 0;
}

.qz-nav-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--qz-r-md);
    display: grid;
    place-items: center;
    background: var(--qz-navy);
    color: #fff;
    font-weight: 700;
    font-size: var(--qz-fs-xs);
    letter-spacing: 0.02em;
}

.qz-nav-user-meta {
    min-width: 0;
    overflow: hidden;
}

.qz-nav-user-name {
    display: block;
    color: var(--qz-text);
    font-size: var(--qz-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qz-nav-user-role {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--qz-muted);
    font-size: var(--qz-fs-label);
    font-weight: 500;
    white-space: nowrap;
}

.qz-nav-user-role::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rc-green-500);
    flex: 0 0 6px;
}

body .sidebar-container .logout-link {
    background: transparent;
    border: 1px solid transparent;
    color: var(--qz-muted);
    min-height: 38px;
    justify-content: flex-start;
}

body .sidebar-container .logout-link i { color: var(--qz-muted-2); }

body .sidebar-container .logout-link:hover {
    background: var(--qz-danger-bg);
    border-color: var(--qz-danger-line);
    color: var(--qz-danger);
}

body .sidebar-container .logout-link:hover i { color: var(--qz-danger); }
body .sidebar-container .logout-link.active::before { display: none; }

/* --- Collapsed (icon rail) ------------------------------------------------ */
@media (min-width: 1200px) {
    body.qz-nav-collapsed .sidebar-container .sidebar-link {
        justify-content: center;
        padding: 0 10px;
        gap: 0;
    }

    body.qz-nav-collapsed .sidebar-container .sidebar-link span,
    body.qz-nav-collapsed .sidebar-container .qz-nav-tag,
    body.qz-nav-collapsed .qz-brand-text,
    body.qz-nav-collapsed .qz-workspace-meta,
    body.qz-nav-collapsed .qz-nav-user-meta,
    body.qz-nav-collapsed .qz-nav-group-label {
        opacity: 0;
        width: 0;
        padding: 0;
        border: 0;
        visibility: hidden;
        pointer-events: none;
    }

    body.qz-nav-collapsed .sidebar-container .sidebar-link.dropdown-toggle::after { display: none; }

    body.qz-nav-collapsed .sidebar-container .logo-section {
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        padding: 18px 0 10px;
    }

    body.qz-nav-collapsed .sidebar-container .logo-section img { height: auto; width: 52px; }

    body.qz-nav-collapsed .qz-nav-collapse {
        position: static;
        transform: none;
        margin: 0 auto;
    }

    body.qz-nav-collapsed .qz-workspace { justify-content: center; margin: 4px 12px 6px; padding: 8px 0; gap: 0; }
    body.qz-nav-collapsed .qz-nav-group-label { padding: 6px 0 0; height: 10px; }
    body.qz-nav-collapsed .qz-nav-user { justify-content: center; padding: 8px 0; gap: 0; }
    body.qz-nav-collapsed .sidebar-container .logout-link { justify-content: center; }

    /* The rail clips for its rounded corners and scrolls its menu. An icon
       rail is short enough to need neither, and both would clip the
       floating group cards and tooltips below - so both are released. */
    body.qz-nav-collapsed .sidebar-container,
    body.qz-nav-collapsed .sidebar-container .menu-wrapper { overflow: visible; }

    /* A collapsed group opens as a floating card off the rail. */
    body.qz-nav-collapsed .sidebar-container .dropdown.qz-open > .dropdown-menu {
        position: absolute !important;
        left: calc(100% + 14px) !important;
        top: 0 !important;
        width: 240px;
        margin: 0;
        padding: 6px;
        background: var(--qz-nav-surface-2);
        border: 1px solid var(--qz-border);
        border-radius: var(--qz-r-lg);
        box-shadow: var(--qz-shadow-lg);
        z-index: 40;
        animation: qz-pop var(--qz-t) var(--qz-ease);
    }

    body.qz-nav-collapsed .sidebar-container .dropdown-menu::before,
    body.qz-nav-collapsed .sidebar-container .dropdown-item.active::before { display: none; }

    /* Tooltips stand in for the labels the rail no longer shows. */
    body.qz-nav-collapsed .sidebar-container [data-qz-tip]::after {
        content: attr(data-qz-tip);
        position: absolute;
        left: calc(100% + 16px);
        top: 50%;
        padding: 6px 10px;
        background: var(--qz-navy-strong);
        color: #fff;
        font-size: var(--qz-fs-xs);
        font-weight: 600;
        white-space: nowrap;
        border-radius: var(--qz-r-sm);
        box-shadow: var(--qz-shadow-md);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%) translateX(-4px);
        transition: opacity var(--qz-t-fast) var(--qz-ease), transform var(--qz-t-fast) var(--qz-ease);
        z-index: 45;
    }

    body.qz-nav-collapsed .sidebar-container [data-qz-tip]:hover::after,
    body.qz-nav-collapsed .sidebar-container [data-qz-tip]:focus-visible::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    /* An open group card already names itself; its tooltip would cover it. */
    body.qz-nav-collapsed .sidebar-container .dropdown.qz-open > [data-qz-tip]::after { display: none; }
}

/* --- Mobile drawer -------------------------------------------------------- */
@media (max-width: 991px) {
    body,
    body.qz-nav-collapsed { --qz-rail: 0px; }

    body .sidebar-container {
        left: calc(-1 * var(--qz-sidebar-w) - 40px);
        top: 0;
        bottom: 0;
        width: min(var(--qz-sidebar-w), 86vw);
        border-radius: 0 var(--qz-r-2xl) var(--qz-r-2xl) 0;
        background: var(--qz-nav-surface-2);
        z-index: 1060;
    }

    body .sidebar-container.active { left: 0; box-shadow: var(--qz-shadow-lg); }
    body .sidebar-container:hover { width: min(var(--qz-sidebar-w), 86vw); }

    body .main-wrapper {
        margin-left: 0;
        padding: 16px 14px 40px;
        padding-top: 80px;
    }

    body .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(4, 17, 47, 0.38);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        z-index: 1055;
    }

    body .sidebar-overlay.active { display: block; animation: qz-fade var(--qz-t) var(--qz-ease); }

    .qz-nav-collapse { display: none; }
}


/* ==========================================================================
   6. TOP HEADER
   ========================================================================== */

.qz-topbar {
    position: sticky;
    top: 0;
    z-index: var(--qz-z-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qz-space-4);
    margin: calc(-1 * var(--qz-shell-pad)) calc(-1 * var(--qz-shell-pad)) var(--qz-space-6);
    padding: 14px var(--qz-shell-pad);
    background: rgba(255, 255, 255, 0.74);
    -webkit-backdrop-filter: blur(var(--qz-blur-lg)) saturate(160%);
    backdrop-filter: blur(var(--qz-blur-lg)) saturate(160%);
    border-bottom: 1px solid var(--qz-border);
}

.qz-topbar-greeting { min-width: 0; }

.qz-topbar-hello {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: var(--qz-track-tight);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qz-topbar-sub {
    font-size: var(--qz-fs-xs);
    color: var(--qz-muted);
    margin: 1px 0 0;
    font-weight: 500;
}

.qz-topbar-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* --- Clock ---------------------------------------------------------------- */
body .portal-clock,
.qz-clock {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 13px;
    background: var(--qz-surface-strong);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-md);
    box-shadow: var(--qz-shadow-xs);
    line-height: 1.15;
}

body .portal-clock i,
.qz-clock i { color: var(--qz-navy); font-size: 13px; }

body .portal-clock-time,
.qz-clock-time {
    display: block;
    font-size: var(--qz-fs-sm);
    font-weight: 700;
    color: var(--qz-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

body .portal-clock-date,
.qz-clock-date {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--qz-muted);
    white-space: nowrap;
}

/* --- Wallet chip (partner header) ---------------------------------------- */
/* Visually important, never oversized: a white chip whose only colour is
   the green "funds" mark beside the figure. */
.qz-wallet-chip {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 6px 14px 6px 7px;
    border-radius: var(--qz-r-md);
    background: var(--qz-surface-strong);
    border: 1px solid var(--qz-border-strong);
    box-shadow: var(--qz-shadow-xs);
    line-height: 1.15;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}

.qz-wallet-chip::before {
    content: "\f555";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--qz-r-sm);
    background: var(--qz-success-bg);
    color: var(--rc-green-600);
    font-size: 12px;
}

.qz-wallet-label {
    font-size: var(--qz-fs-label);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--qz-muted);
}

.qz-wallet-value {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--qz-text);
    font-variant-numeric: tabular-nums;
}

/* --- Search / command component ------------------------------------------ */
.qz-search {
    position: relative;
    width: clamp(200px, 24vw, 330px);
}

.qz-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--qz-muted-2);
    font-size: 13px;
    pointer-events: none;
}

body .qz-search-input,
body .search-box {
    width: 100%;
    height: 42px;
    padding: 0 62px 0 36px;
    background: var(--qz-surface-strong);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-md);
    font-family: var(--qz-font);
    font-size: var(--qz-fs-sm);
    font-weight: 500;
    color: var(--qz-text);
    box-shadow: var(--qz-shadow-xs);
    transition: border-color var(--qz-t) var(--qz-ease), box-shadow var(--qz-t) var(--qz-ease), background var(--qz-t) var(--qz-ease);
}

body .qz-search-input::placeholder { color: var(--qz-muted-2); font-weight: 500; }

body .qz-search-input:focus,
body .search-box:focus {
    outline: none;
    background: var(--qz-white);
    border-color: var(--qz-primary);
    box-shadow: 0 0 0 4px var(--qz-primary-ring);
}

.qz-search-kbd {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 3px 7px;
    font-family: var(--qz-font);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--qz-muted);
    background: var(--qz-slate-100);
    border: 1px solid var(--qz-border);
    border-radius: 6px;
    pointer-events: none;
}

/* Results panel */
.qz-search-panel {
    position: absolute;
    top: calc(100% + 8px);
    /* Anchored to the input's right edge so that when the panel is wider
       than a narrowed search box it grows inward, never off-screen past the
       notification and avatar buttons beside it. */
    right: 0;
    left: auto;
    width: max(320px, 100%);
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--qz-surface-strong);
    -webkit-backdrop-filter: blur(var(--qz-blur-lg));
    backdrop-filter: blur(var(--qz-blur-lg));
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-lg);
    box-shadow: var(--qz-shadow-lg);
    display: none;
    z-index: 60;
}

.qz-search-panel.qz-visible { display: block; animation: qz-pop var(--qz-t) var(--qz-ease); }

.qz-search-section {
    padding: 9px 12px 5px;
    font-size: var(--qz-fs-label);
    font-weight: 700;
    letter-spacing: var(--qz-track-label);
    text-transform: uppercase;
    color: var(--qz-muted-2);
}

.qz-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    border-radius: var(--qz-r-sm);
    color: var(--qz-text);
    font-size: var(--qz-fs-sm);
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--qz-t-fast) var(--qz-ease);
}

.qz-search-item i { color: var(--qz-muted-2); font-size: 12px; width: 16px; text-align: center; flex: 0 0 16px; }
.qz-search-item small { color: var(--qz-muted); font-weight: 500; margin-left: auto; font-size: var(--qz-fs-xs); }
.qz-search-item:hover,
.qz-search-item.qz-active { background: var(--qz-navy-tint); color: var(--qz-navy-strong); }
.qz-search-empty { padding: 18px 12px; text-align: center; color: var(--qz-muted); font-size: var(--qz-fs-sm); }

/* --- Icon buttons in the header ------------------------------------------ */
.qz-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--qz-surface-strong);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-md);
    color: var(--qz-text-2);
    box-shadow: var(--qz-shadow-xs);
    cursor: pointer;
    transition: transform var(--qz-t) var(--qz-ease), color var(--qz-t) var(--qz-ease), border-color var(--qz-t) var(--qz-ease);
}

.qz-icon-btn:hover { color: var(--qz-navy); border-color: var(--qz-navy-ring); transform: translateY(-1px); }
.qz-icon-btn:focus-visible { outline: 2px solid var(--qz-primary); outline-offset: 2px; }

.qz-icon-btn .qz-dot {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rc-orange-500);
    border: 2px solid var(--qz-white);
}

/* --- Avatar + menu -------------------------------------------------------- */
.qz-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--qz-r-md);
    display: grid;
    place-items: center;
    background: var(--qz-navy);
    color: #fff;
    font-weight: 700;
    font-size: var(--qz-fs-sm);
    letter-spacing: 0.02em;
    border: 0;
    cursor: pointer;
    box-shadow: var(--qz-shadow-navy);
    transition: transform var(--qz-t) var(--qz-ease);
}

.qz-avatar:hover { transform: translateY(-1px); }
.qz-avatar:focus-visible { outline: 2px solid var(--qz-primary); outline-offset: 2px; }

.qz-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 244px;
    padding: 6px;
    background: var(--qz-surface-strong);
    -webkit-backdrop-filter: blur(var(--qz-blur-lg));
    backdrop-filter: blur(var(--qz-blur-lg));
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-lg);
    box-shadow: var(--qz-shadow-lg);
    display: none;
    z-index: 70;
}

.qz-menu.qz-visible { display: block; animation: qz-pop var(--qz-t) var(--qz-ease); }

.qz-menu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--qz-border);
    margin-bottom: 5px;
}

.qz-menu-name { font-size: var(--qz-fs-sm); font-weight: 700; line-height: 1.2; }
.qz-menu-mail { font-size: var(--qz-fs-xs); color: var(--qz-muted); }

.qz-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    border-radius: var(--qz-r-sm);
    color: var(--qz-text-2);
    font-size: var(--qz-fs-sm);
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--qz-t-fast) var(--qz-ease), color var(--qz-t-fast) var(--qz-ease);
}

.qz-menu-item i { width: 16px; text-align: center; font-size: 12px; color: var(--qz-muted); }
.qz-menu-item:hover { background: var(--qz-navy-tint); color: var(--qz-navy-strong); }
.qz-menu-item:hover i { color: var(--qz-navy); }
.qz-menu-item.qz-danger { color: var(--qz-danger); }
.qz-menu-item.qz-danger i { color: var(--qz-danger); }
.qz-menu-item.qz-danger:hover { background: var(--qz-danger-bg); color: var(--qz-danger); }

/* --- Mobile top bar ------------------------------------------------------- */
@media (max-width: 991px) {
    body .fixed-top.border-bottom,
    .qz-mobilebar {
        background: var(--qz-surface-strong) !important;
        -webkit-backdrop-filter: blur(var(--qz-blur-lg)) saturate(160%);
        backdrop-filter: blur(var(--qz-blur-lg)) saturate(160%);
        border-bottom: 1px solid var(--qz-border) !important;
        box-shadow: var(--qz-shadow-sm);
        z-index: 1050;
    }

    body .mobile-toggle {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0;
        background: var(--qz-white);
        border: 1px solid var(--qz-border-strong);
        border-radius: var(--qz-r-md);
        color: var(--qz-navy);
        box-shadow: var(--qz-shadow-xs);
    }

    body .mobile-toggle i { font-size: 15px; }

    .qz-topbar { display: none; }
}


/* ==========================================================================
   7. KPI / STAT CARDS
   ========================================================================== */

.qz-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 18px 20px 16px;
    background: var(--qz-surface);
    -webkit-backdrop-filter: blur(var(--qz-blur)) saturate(140%);
    backdrop-filter: blur(var(--qz-blur)) saturate(140%);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-xl);
    box-shadow: var(--qz-shadow);
    overflow: hidden;
    transition: transform var(--qz-t) var(--qz-ease), box-shadow var(--qz-t) var(--qz-ease), border-color var(--qz-t) var(--qz-ease);
}

.qz-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--qz-shadow-md);
    border-color: var(--qz-border-strong);
}

/* Each card carries its own accent, set via --accent, as a quiet wash in
   the top right corner rather than a full colour fill. */
.qz-kpi::before {
    content: "";
    position: absolute;
    top: -46px;
    right: -46px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent, rgba(11, 37, 92, 0.08)) 0%, transparent 70%);
    opacity: 0.7;
    pointer-events: none;
}

.qz-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    position: relative;
}

.qz-kpi-label {
    font-size: var(--qz-fs-sm);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--qz-muted);
}

.qz-kpi-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: var(--qz-r-md);
    background: var(--icon-bg, var(--qz-primary-tint));
    color: var(--icon-fg, var(--qz-primary));
    font-size: 14px;
    border: 1px solid var(--qz-border);
}

.qz-kpi-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: clamp(1.3rem, 1.8vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--qz-text);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    position: relative;
}

.qz-kpi-cur {
    font-size: 0.72em;
    font-weight: 700;
    color: var(--qz-muted);
    flex: 0 0 auto;
}

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

.qz-kpi-desc {
    font-size: var(--qz-fs-xs);
    color: var(--qz-muted);
    margin-top: 3px;
    font-weight: 500;
}

.qz-kpi-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid var(--qz-border);
    position: relative;
}

.qz-kpi-spark { width: 78px; height: 26px; flex: 0 0 78px; opacity: 0.9; }

/* --- Trend chip ----------------------------------------------------------- */
.qz-trend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--qz-r-pill);
    font-size: var(--qz-fs-xs);
    font-weight: 700;
    letter-spacing: -0.01em;
    background: var(--qz-slate-100);
    color: var(--qz-muted);
    border: 1px solid var(--qz-border);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qz-trend i { font-size: 9px; }
.qz-trend.qz-up { background: var(--qz-success-bg); color: var(--qz-success); border-color: var(--qz-success-line); }
.qz-trend.qz-down { background: var(--qz-danger-bg); color: var(--qz-danger); border-color: var(--qz-danger-line); }
.qz-trend.qz-flat { background: var(--qz-slate-100); color: var(--qz-muted); }

.qz-trend-note {
    font-size: var(--qz-fs-xs);
    color: var(--qz-muted-2);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Legacy metric cards on other pages ---------------------------------- */
body .premium-metric-card,
body .metric-mini-card,
body .mp-stat-box {
    background: var(--qz-surface);
    -webkit-backdrop-filter: blur(var(--qz-blur));
    backdrop-filter: blur(var(--qz-blur));
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-xl);
    box-shadow: var(--qz-shadow);
    overflow: hidden;
}

body .premium-metric-card.bg-card-dark {
    background: linear-gradient(150deg, var(--rc-navy-700), var(--rc-navy-900));
    border-color: rgba(255, 255, 255, 0.08);
}

body .premium-metric-card.bg-card-cream,
body .premium-metric-card.bg-card-mint,
body .premium-metric-card.bg-card-white { background: var(--qz-surface); }

body .metric-main-value {
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    letter-spacing: -0.035em;
}

body .metric-icon-circle {
    border-radius: var(--qz-r-md);
    background: var(--qz-primary-tint);
    color: var(--qz-primary);
    box-shadow: none;
    border: 1px solid var(--qz-border);
}

body .premium-metric-card.bg-card-dark .metric-icon-circle {
    background: rgba(255, 255, 255, 0.1);
    color: var(--qz-mint);
    border-color: rgba(255, 255, 255, 0.14);
}

body .metric-bottom-bar {
    background: var(--qz-surface-sunken);
    border-top: 1px solid var(--qz-border);
    color: var(--qz-muted);
    font-weight: 600;
}

body .mp-stat-icon {
    border-radius: var(--qz-r-md);
    background: var(--qz-primary-tint);
    color: var(--qz-primary);
}

body .mp-stat-value {
    font-size: 1.3rem;
    letter-spacing: -0.03em;
    color: var(--qz-text);
}

body .text-green-indicator { color: var(--qz-success) !important; }
body .text-neon-indicator { color: var(--qz-mint) !important; }


/* ==========================================================================
   8. BUTTONS
   ========================================================================== */

body .btn {
    --bs-btn-focus-box-shadow: 0 0 0 4px var(--qz-primary-ring);
    font-family: var(--qz-font);
    font-size: var(--qz-fs-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: var(--qz-r-md);
    padding: 9px 16px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-width: 1px;
    transition: transform var(--qz-t-fast) var(--qz-ease), box-shadow var(--qz-t) var(--qz-ease), filter var(--qz-t) var(--qz-ease), background var(--qz-t) var(--qz-ease);
}

body .btn:active { transform: translateY(1px); }
body .btn:focus-visible { outline: 2px solid var(--qz-primary); outline-offset: 2px; }
body .btn-sm { padding: 6px 12px; min-height: 32px; font-size: var(--qz-fs-xs); border-radius: var(--qz-r-sm); gap: 6px; }
body .btn-lg { padding: 12px 22px; min-height: 46px; font-size: var(--qz-fs-body); border-radius: var(--qz-r-md); }

/* Primary - the one green button on the screen. */
.qz-btn-primary,
body .btn-primary,
body .btn-success,
body .approve-btn,
body .btn-search,
body .btn-submit,
body .btn-save-changes,
body .btn-save-master,
body .btn-bulk-save,
body .btn-payet-next,
body .btn-update,
body .btn-approve,
body .rc-btn:not(.rc-btn-ghost),
body .btn-row-update {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0)) var(--rc-green-600);
    border: 1px solid rgba(0, 96, 48, 0.55);
    color: #fff;
    box-shadow: var(--qz-shadow-green);
    border-radius: var(--qz-r-md);
    font-weight: 600;
}

.qz-btn-primary:hover,
body .btn-primary:hover,
body .btn-success:hover,
body .approve-btn:hover,
body .btn-search:hover,
body .btn-submit:hover,
body .btn-save-changes:hover,
body .btn-save-master:hover,
body .btn-bulk-save:hover,
body .btn-payet-next:hover,
body .btn-update:hover,
body .btn-approve:hover,
body .rc-btn:not(.rc-btn-ghost):hover,
body .btn-row-update:hover {
    color: #fff;
    background-color: var(--rc-green-700);
    box-shadow: 0 1px 1px rgba(0, 90, 45, 0.2), 0 10px 20px -10px rgba(0, 140, 69, 0.6);
    transform: translateY(-1px);
}

/* .approve-btn doubles as a pill CTA in a few views; keep it legible. */
body .approve-btn {
    padding: 9px 18px;
    transition: transform var(--qz-t-fast) var(--qz-ease), filter var(--qz-t) var(--qz-ease), box-shadow var(--qz-t) var(--qz-ease);
}

/* Secondary - neutral glass outline. */
.qz-btn-ghost,
body .btn-secondary,
body .btn-outline-secondary,
body .btn-light,
body .btn-reset,
body .rc-btn-ghost,
body .btn-export,
body .btn-peek,
body .btn-proof,
body .btn-action {
    background: var(--qz-white);
    border: 1px solid var(--qz-border-strong);
    color: var(--qz-navy-strong);
    box-shadow: var(--qz-shadow-xs);
    font-weight: 600;
    border-radius: var(--qz-r-md);
}

.qz-btn-ghost:hover,
body .btn-secondary:hover,
body .btn-outline-secondary:hover,
body .btn-light:hover,
body .btn-reset:hover,
body .rc-btn-ghost:hover,
body .btn-export:hover,
body .btn-peek:hover,
body .btn-proof:hover,
body .btn-action:hover {
    background: var(--qz-white);
    border-color: var(--qz-navy-ring);
    color: var(--qz-navy-strong);
    transform: translateY(-1px);
    box-shadow: var(--qz-shadow-sm);
}

/* Danger. */
body .btn-danger,
body .reject-btn,
body .btn-reject {
    background: var(--qz-danger);
    border: 1px solid rgba(153, 27, 27, 0.45);
    color: #fff;
    box-shadow: 0 1px 1px rgba(120, 20, 15, 0.2), 0 6px 14px -8px rgba(217, 45, 32, 0.55);
    border-radius: var(--qz-r-md);
}

body .btn-danger:hover,
body .reject-btn:hover,
body .btn-reject:hover {
    color: #fff;
    background-color: #B42318;
    transform: translateY(-1px);
}

/* Dark / neutral solid. */
body .btn-dark {
    background: var(--rc-navy-800);
    border: 1px solid var(--rc-navy-900);
    box-shadow: var(--qz-shadow-navy);
    color: #fff;
    border-radius: var(--qz-r-md);
}

body .btn-warning {
    background: var(--rc-orange-500);
    border: 1px solid var(--rc-orange-600);
    color: #fff;
}

body .btn-warning:hover { background: var(--rc-orange-600); color: #fff; }

body .btn-info {
    background: var(--rc-navy-600);
    border: 1px solid var(--rc-navy-700);
    color: #fff;
}

body .btn-info:hover { background: var(--rc-navy-700); color: #fff; }

body .btn:disabled,
body .btn.disabled {
    opacity: 0.5;
    box-shadow: none;
    transform: none;
    filter: none;
}

/* Compact action button used inside table rows. */
body .btn-action {
    min-width: 34px;
    padding: 6px 10px;
    font-size: var(--qz-fs-xs);
}

/* --- Segmented control (chart period filters) ---------------------------- */
.qz-segment {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--qz-surface-sunken);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-md);
}

.qz-segment button {
    border: 0;
    background: transparent;
    color: var(--qz-muted);
    font-size: var(--qz-fs-xs);
    font-weight: 700;
    padding: 5px 11px;
    border-radius: var(--qz-r-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--qz-t) var(--qz-ease), color var(--qz-t) var(--qz-ease), box-shadow var(--qz-t) var(--qz-ease);
}

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

.qz-segment button[aria-pressed="true"] {
    background: var(--qz-white);
    color: var(--qz-navy-strong);
    box-shadow: var(--qz-shadow-xs);
}

.qz-segment button:focus-visible { outline: 2px solid var(--qz-primary); outline-offset: 1px; }


/* ==========================================================================
   9. FORMS
   ========================================================================== */

body .form-label,
body .field-label {
    font-size: var(--qz-fs-sm);
    font-weight: 600;
    color: var(--qz-text);
    margin-bottom: 6px;
    letter-spacing: 0;
    text-transform: none;
}

body .form-control,
body .form-select,
body .custom-input,
body .custom-select,
body .panel-input-node,
body .rc-input,
body .filter-control,
body .vendor-input,
body .payet-input,
body .node-field-input,
body .node-select {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--qz-white);
    border: 1px solid var(--qz-border-strong);
    border-radius: var(--qz-r-md);
    font-family: var(--qz-font);
    font-size: var(--qz-fs-sm);
    font-weight: 500;
    color: var(--qz-text);
    box-shadow: var(--qz-shadow-xs);
    transition: border-color var(--qz-t) var(--qz-ease), box-shadow var(--qz-t) var(--qz-ease), background var(--qz-t) var(--qz-ease);
}

body textarea.form-control { min-height: 90px; }

body .form-control::placeholder,
body .custom-input::placeholder,
body .panel-input-node::placeholder,
body .rc-input::placeholder {
    color: var(--qz-muted-2);
    font-weight: 500;
}

body .form-control:focus,
body .form-select:focus,
body .custom-input:focus,
body .custom-select:focus,
body .panel-input-node:focus,
body .rc-input:focus,
body .filter-control:focus,
body .vendor-input:focus,
body .payet-input:focus,
body .node-field-input:focus,
body .node-select:focus {
    outline: none;
    background: var(--qz-white);
    border-color: var(--qz-primary);
    box-shadow: 0 0 0 4px var(--qz-primary-ring);
    color: var(--qz-text);
}

body .form-control:disabled,
body .form-select:disabled,
body .custom-input:disabled,
body .form-control[readonly] {
    background: var(--qz-slate-100);
    color: var(--qz-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* Validation. */
body .form-control.is-invalid,
body .form-select.is-invalid,
body .custom-input.is-invalid {
    border-color: var(--qz-danger);
    box-shadow: 0 0 0 4px var(--qz-danger-bg);
}

body .form-control.is-valid,
body .form-select.is-valid {
    border-color: var(--qz-success);
    box-shadow: 0 0 0 4px var(--qz-success-bg);
}

body .invalid-feedback,
body .field-validation-error {
    font-size: var(--qz-fs-xs);
    font-weight: 600;
    color: var(--qz-danger);
}

body .form-text,
body .field-sub-title {
    font-size: var(--qz-fs-xs);
    color: var(--qz-muted);
    font-weight: 500;
}

/* Native select caret. */
body .form-select,
body .custom-select,
body select.panel-input-node,
body select.filter-control,
body select.rc-input,
body .node-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 34px;
}

/* Date inputs: keep the picker icon quiet until hovered. */
body input[type="date"]::-webkit-calendar-picker-indicator,
body input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0.55;
    cursor: pointer;
    filter: grayscale(1);
    transition: opacity var(--qz-t) var(--qz-ease);
}

body input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Input groups. */
body .input-group-text,
body .node-addon {
    background: var(--qz-slate-100);
    border: 1px solid var(--qz-border-strong);
    color: var(--qz-muted);
    font-size: var(--qz-fs-sm);
    font-weight: 700;
    border-radius: var(--qz-r-md);
}

/* Switches. */
body .form-switch .form-check-input {
    width: 42px;
    height: 23px;
    background-color: var(--qz-slate-300);
    border: 0;
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--qz-t) var(--qz-ease);
}

body .form-switch .form-check-input:checked { background-color: var(--qz-primary); }

body .form-check-input:focus {
    box-shadow: 0 0 0 4px var(--qz-primary-ring);
    border-color: var(--qz-primary);
}

body .form-check-input:checked {
    background-color: var(--qz-primary);
    border-color: var(--qz-primary);
}

/* Filter dock: the row of controls above every report grid. */
body .filter-glass-dock,
body .filter-card,
body .filter-section,
body .filter-panel,
body .perm-toolbar,
body .rc-tabs {
    background: var(--qz-surface-raised);
    -webkit-backdrop-filter: blur(var(--qz-blur));
    backdrop-filter: blur(var(--qz-blur));
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-lg);
    box-shadow: var(--qz-shadow-xs);
    padding: var(--qz-space-4);
}

/* Dropzones. */
body .dropzone {
    background: var(--qz-surface-sunken);
    border: 1.5px dashed var(--qz-border-strong);
    border-radius: var(--qz-r-lg);
    color: var(--qz-muted);
    transition: border-color var(--qz-t) var(--qz-ease), background var(--qz-t) var(--qz-ease);
}

body .dropzone:hover {
    border-color: var(--qz-primary);
    background: var(--qz-primary-tint);
    color: var(--qz-primary);
}


/* ==========================================================================
   10. TABLES
   ========================================================================== */

body .table-container,
body .table-deck-light {
    overflow: hidden;
    padding: 0;
}

body .table,
body .bootstrap-custom-table,
body .rc-table,
body .commission-table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--qz-fs-sm);
    color: var(--qz-text);
}

/* Header: light, quiet, sticky-ready - not a heavy coloured band. */
body .table thead th,
body .bootstrap-custom-table th,
body .rc-table thead th,
body .commission-table thead th {
    /* Fully opaque on purpose. qz-report-tables.css pins these headers while
       the body scrolls underneath, so any transparency here would show the
       rows sliding through the header - and a blur on a sticky element that
       repaints on every scroll frame is the most expensive thing on the page. */
    background: #F8FAFC;
    color: var(--qz-muted);
    font-size: var(--qz-fs-label);
    font-weight: 700;
    letter-spacing: var(--qz-track-label);
    text-transform: uppercase;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--qz-border-strong);
    white-space: nowrap;
    vertical-align: middle;
}

body .table tbody td,
body .bootstrap-custom-table td,
body .rc-table tbody td,
body .commission-table tbody td {
    padding: 13px 16px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    color: var(--qz-text);
    font-size: var(--qz-fs-sm);
    font-weight: 500;
    vertical-align: middle;
}

body .table tbody tr:last-child td,
body .bootstrap-custom-table tbody tr:last-child td,
body .rc-table tbody tr:last-child td { border-bottom: 0; }

body .table tbody tr,
body .bootstrap-custom-table tbody tr,
body .rc-table tbody tr {
    transition: background var(--qz-t-fast) var(--qz-ease);
}

body .table tbody tr:hover td,
body .bootstrap-custom-table tbody tr:hover td,
body .rc-table tbody tr:hover td {
    background: rgba(11, 37, 92, 0.03) !important;
}

body .table-light,
body .table > thead.table-light th { background: var(--qz-slate-50); }

/* The scroll frame from qz-report-tables.css keeps working; just soften it. */
body .qz-table-scroll::-webkit-scrollbar-track { background: transparent; }
body .qz-table-scroll::-webkit-scrollbar-thumb { background: var(--qz-slate-300); border-radius: var(--qz-r-pill); }
body .qz-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--qz-slate-400); }

/* Cell content helpers already present in the views. */
body .bank-title-text { font-weight: 700; color: var(--qz-text); font-size: var(--qz-fs-sm); }
body .bank-meta-text { color: var(--qz-muted); }
body .date-text { font-weight: 600; color: var(--qz-text-2); font-size: var(--qz-fs-sm); }
body .time-text { color: var(--qz-muted-2); font-size: var(--qz-fs-xs); }
body .vivid-price-tag { font-weight: 700; letter-spacing: -0.02em; color: var(--qz-text); }
body .price-breakdown-text { font-size: var(--qz-fs-xs); color: var(--qz-muted); }

body .holder-identity,
body .code-pill {
    background: var(--qz-slate-100);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-xs);
    color: var(--qz-text-2);
    font-weight: 600;
    font-size: var(--qz-fs-xs);
    padding: 3px 8px;
}

body .user-avatar {
    border-radius: var(--qz-r-md);
    background: var(--qz-navy);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: var(--qz-shadow-xs);
}


/* ==========================================================================
   11. BADGES, PILLS, STATUS
   ========================================================================== */

.qz-badge,
body .badge,
body .status-badge,
body .status-pill,
body .role-badge,
body .channel-badge,
body .api-status,
body .route-pill-tag,
body .rc-pill,
body .matrix-badge,
body .perm-badge-role,
body .bank-badge,
body .live-node-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--qz-r-pill);
    font-size: var(--qz-fs-xs);
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.35;
    border: 1px solid transparent;
    background: var(--qz-slate-100);
    color: var(--qz-text-2);
    white-space: nowrap;
}

/* Semantic variants, mapped onto every status class already in use. */
body .status-active,
body .status-success,
body .pill-active,
body .badge.bg-success,
body .badge-credit,
body .p-success,
body .s-success,
body .chan-payout {
    background: var(--qz-success-bg) !important;
    color: var(--qz-success) !important;
    border-color: var(--qz-success-line) !important;
}

body .status-inactive,
body .status-failed,
body .status-blocked,
body .pill-suspended,
body .badge.bg-danger,
body .badge-debit,
body .p-failed,
body .s-failed {
    background: var(--qz-danger-bg) !important;
    color: var(--qz-danger) !important;
    border-color: var(--qz-danger-line) !important;
}

body .badge.bg-warning,
body .p-pending,
body .s-pending,
body .chan-dmt {
    background: var(--qz-warning-bg) !important;
    color: var(--qz-warning) !important;
    border-color: var(--qz-warning-line) !important;
}

body .badge.bg-info,
body .p-info,
body .chan-bbps,
body .badge.bg-primary {
    background: var(--qz-info-bg) !important;
    color: var(--qz-info) !important;
    border-color: var(--qz-info-line) !important;
}

body .p-muted,
body .s-muted,
body .badge.bg-secondary,
body .p-reversed,
body .s-reversed {
    background: var(--qz-slate-100) !important;
    color: var(--qz-muted) !important;
    border-color: var(--qz-border-strong) !important;
}

body .bg-retailer,
body .chan-aeps {
    background: var(--qz-violet-bg) !important;
    color: var(--qz-violet) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
}

body .bg-distributor {
    background: var(--qz-info-bg) !important;
    color: var(--qz-info) !important;
    border-color: var(--qz-info-line) !important;
}

/* A live status dot for "connected" style indicators. */
body .live-node-status::before,
.qz-dot-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: qz-pulse 2.4s var(--qz-ease) infinite;
}

body .perm-count-pill {
    background: var(--qz-primary-tint);
    color: var(--qz-primary);
    border-radius: var(--qz-r-pill);
    font-weight: 700;
    font-size: var(--qz-fs-xs);
    padding: 3px 9px;
}


/* ==========================================================================
   12. PAGINATION
   ========================================================================== */

body .pagination,
body .custom-pagination,
body .ledger-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0;
}

body .page-link {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    background: var(--qz-surface-strong);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-sm) !important;
    color: var(--qz-text-2);
    font-size: var(--qz-fs-sm);
    font-weight: 700;
    box-shadow: none;
    transition: background var(--qz-t-fast) var(--qz-ease), color var(--qz-t-fast) var(--qz-ease), border-color var(--qz-t-fast) var(--qz-ease);
}

body .page-link:hover {
    background: var(--qz-navy-tint);
    color: var(--qz-navy-strong);
    border-color: var(--qz-navy-ring);
}

body .page-link:focus {
    box-shadow: 0 0 0 4px var(--qz-primary-ring);
    z-index: 3;
}

body .page-item.active .page-link {
    background: var(--qz-navy);
    border-color: var(--qz-navy);
    color: #fff;
    box-shadow: var(--qz-shadow-navy);
}

body .page-item.disabled .page-link {
    background: transparent;
    color: var(--qz-muted-2);
    border-color: var(--qz-border);
    opacity: 0.6;
}


/* ==========================================================================
   13. MODALS, ALERTS, TABS
   ========================================================================== */

body .modal-backdrop.show {
    background: rgba(4, 17, 47, 0.40);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 1;
}

body .modal-content,
body .modal-content-custom {
    background: var(--qz-surface-strong);
    -webkit-backdrop-filter: blur(var(--qz-blur-lg)) saturate(150%);
    backdrop-filter: blur(var(--qz-blur-lg)) saturate(150%);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-2xl);
    box-shadow: var(--qz-shadow-lg);
    overflow: hidden;
}

body .modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--qz-border);
    background: transparent;
    color: var(--qz-text);
}

body .modal-header::after { display: none; }

body .modal-header.bg-danger,
body .modal-header.bg-success,
body .modal-header.bg-primary,
body .modal-header.bg-dark { color: #fff; }

body .modal-title {
    font-size: var(--qz-fs-h3);
    font-weight: 700;
    letter-spacing: var(--qz-track-tight);
}

body .modal-body { padding: 22px; }

body .modal-footer {
    padding: 16px 22px;
    border-top: 1px solid var(--qz-border);
    background: var(--qz-surface-sunken);
    gap: 8px;
}

body .btn-close {
    border-radius: var(--qz-r-sm);
    opacity: 0.5;
    transition: opacity var(--qz-t) var(--qz-ease);
}

body .btn-close:hover { opacity: 1; }

body .alert {
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-md);
    font-size: var(--qz-fs-sm);
    font-weight: 600;
    padding: 12px 16px;
    box-shadow: var(--qz-shadow-xs);
}

body .alert-success { background: var(--qz-success-bg); color: var(--qz-success); border-color: var(--qz-success-line); }
body .alert-danger { background: var(--qz-danger-bg); color: var(--qz-danger); border-color: var(--qz-danger-line); }
body .alert-warning { background: var(--qz-warning-bg); color: var(--qz-warning); border-color: var(--qz-warning-line); }
body .alert-info { background: var(--qz-info-bg); color: var(--qz-info); border-color: var(--qz-info-line); }

body .nav-tabs {
    border-bottom: 1px solid var(--qz-border);
    gap: 4px;
}

body .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--qz-r-sm) var(--qz-r-sm) 0 0;
    color: var(--qz-muted);
    font-size: var(--qz-fs-sm);
    font-weight: 700;
    padding: 10px 15px;
    transition: color var(--qz-t) var(--qz-ease), border-color var(--qz-t) var(--qz-ease), background var(--qz-t) var(--qz-ease);
}

body .nav-tabs .nav-link:hover { color: var(--qz-navy-strong); background: var(--qz-navy-tint); }

body .nav-tabs .nav-link.active {
    color: var(--qz-navy-strong);
    background: transparent;
    border-bottom-color: var(--rc-green-500);
}

body .breadcrumb {
    font-size: var(--qz-fs-xs);
    font-weight: 600;
    margin: 0;
}

body .breadcrumb-item a { color: var(--qz-muted); text-decoration: none; }
body .breadcrumb-item a:hover { color: var(--qz-primary); }
body .breadcrumb-item.active { color: var(--qz-text); }

/* SweetAlert, used for every confirm in the panel. */
body .swal2-popup {
    border-radius: var(--qz-r-xl) !important;
    font-family: var(--qz-font) !important;
    box-shadow: var(--qz-shadow-lg) !important;
}

body .swal2-title { font-weight: 700 !important; letter-spacing: var(--qz-track-tight); color: var(--qz-text) !important; }
body .swal2-html-container { color: var(--qz-text-2) !important; }
body .swal2-styled { border-radius: var(--qz-r-md) !important; font-weight: 600 !important; font-family: var(--qz-font) !important; }

/* SweetAlert defaults to a purple confirm. Views that pass confirmButtonColor
   set it inline and still win; every other dialog gets Rupeeco navy. */
body .swal2-styled.swal2-confirm { background-color: var(--rc-navy-800); }
body .swal2-styled.swal2-cancel { background-color: var(--qz-slate-400); }
body .swal2-styled:focus { box-shadow: 0 0 0 3px var(--qz-navy-ring) !important; }
body .swal2-icon.swal2-success { border-color: var(--qz-success-line) !important; color: var(--rc-green-500) !important; }
body .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--rc-green-500) !important; }
body .swal2-icon.swal2-question, body .swal2-icon.swal2-info { border-color: var(--qz-navy-ring) !important; color: var(--qz-navy) !important; }
body .swal2-icon.swal2-warning { border-color: var(--qz-warning-line) !important; color: var(--rc-orange-500) !important; }


/* ==========================================================================
   14. STATES: EMPTY / LOADING / ERROR
   ========================================================================== */

.qz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 40px 24px;
}

.qz-empty-art {
    position: relative;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: var(--qz-r-lg);
    background: linear-gradient(150deg, var(--qz-primary-tint-2), rgba(255, 255, 255, 0));
    border: 1px solid var(--qz-border);
    color: var(--qz-primary);
    font-size: 24px;
}

/* The soft halo is what turns a bare icon into an illustration. */
.qz-empty-art::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: var(--qz-r-xl);
    border: 1px dashed var(--qz-border-strong);
    opacity: 0.7;
}

.qz-empty-title {
    font-size: var(--qz-fs-body);
    font-weight: 700;
    color: var(--qz-text);
    margin: 0;
}

.qz-empty-text {
    font-size: var(--qz-fs-sm);
    color: var(--qz-muted);
    max-width: 34ch;
    margin: 0 0 8px;
    line-height: 1.55;
}

/* --- Skeletons ------------------------------------------------------------ */
.qz-skel {
    position: relative;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.055);
    border-radius: var(--qz-r-sm);
}

.qz-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: qz-shimmer 1.5s infinite;
}

.qz-skel-line { height: 11px; margin-bottom: 8px; }
.qz-skel-line.qz-w-40 { width: 40%; }
.qz-skel-line.qz-w-60 { width: 60%; }
.qz-skel-line.qz-w-80 { width: 80%; }
.qz-skel-title { height: 20px; width: 45%; margin-bottom: 14px; }
.qz-skel-block { height: 120px; border-radius: var(--qz-r-md); }
.qz-skel-circle { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; }

/* --- Spinner -------------------------------------------------------------- */
body .spinner-border { color: var(--qz-primary); border-width: 2.5px; }

.qz-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 34px;
    color: var(--qz-muted);
    font-size: var(--qz-fs-sm);
    font-weight: 600;
}

.qz-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid var(--qz-primary-tint-2);
    border-top-color: var(--qz-primary);
    animation: qz-spin 0.7s linear infinite;
}


/* ==========================================================================
   15. MOTION
   ========================================================================== */

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

@keyframes qz-shimmer { 100% { transform: translateX(100%); } }

@keyframes qz-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes qz-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes qz-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes qz-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Page entrance. */
.qz-reveal { animation: qz-rise var(--qz-t-slow) var(--qz-ease) both; }
.qz-reveal-1 { animation-delay: 40ms; }
.qz-reveal-2 { animation-delay: 80ms; }
.qz-reveal-3 { animation-delay: 120ms; }
.qz-reveal-4 { animation-delay: 160ms; }

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


/* ==========================================================================
   16. ACCESSIBILITY + UTILITIES
   ========================================================================== */

:focus-visible { outline: 2px solid var(--qz-primary); outline-offset: 2px; }

body a { color: var(--rc-green-700); text-decoration: none; transition: color var(--qz-t-fast) var(--qz-ease); }
body a:hover { color: var(--qz-primary-hover); }

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

/* Skip link - first tab stop on every admin page. */
.qz-skip {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--qz-primary);
    color: #fff;
    font-weight: 700;
    font-size: var(--qz-fs-sm);
    border-radius: var(--qz-r-md);
    transition: top var(--qz-t) var(--qz-ease);
}

.qz-skip:focus { top: 12px; color: #fff; }

/* Flex/grid children need this before text-overflow: ellipsis can bite. */
.min-w-0,
.qz-kpi-top > div,
.qz-top-retailer-id > div { min-width: 0; }

.qz-divider { height: 1px; background: var(--qz-border); border: 0; margin: var(--qz-space-5) 0; }
.qz-stack-2 { display: flex; flex-direction: column; gap: var(--qz-space-2); }
.qz-stack-3 { display: flex; flex-direction: column; gap: var(--qz-space-3); }
.qz-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--qz-space-3); }

body .text-success { color: var(--qz-success) !important; }
body .text-danger { color: var(--qz-danger) !important; }
body .text-warning { color: var(--qz-warning) !important; }
body .shadow-sm { box-shadow: var(--qz-shadow-sm) !important; }
body .rounded-4 { border-radius: var(--qz-r-lg) !important; }
body .rounded-3 { border-radius: var(--qz-r-md) !important; }


/* ==========================================================================
   16b. PARTNER PANEL VOCABULARY
   --------------------------------------------------------------------------
   The partner screens were built before this system and name their pieces
   differently (.form-card, .report-card, .canvas-panel, .custom-table,
   .clean-input...). Mapping those names onto the same recipes here is what
   makes the partner panel the same product as the admin panel without
   rewriting six report views.

   userpannel.css still owns the partner-only components this does not touch
   (wallet cards, ticker, news strip), so nothing loses its styling.
   ========================================================================== */

/* --- Surfaces ------------------------------------------------------------- */
/* .content-container is deliberately absent: it is FundRequestReport's page
   wrapper and already holds a .report-card, so treating it as a surface too
   would put a card inside a card. It is flattened below instead. */
body .form-card,
body .report-card,
body .canvas-panel {
    position: relative;
    background: var(--qz-surface);
    -webkit-backdrop-filter: blur(var(--qz-blur)) saturate(140%);
    backdrop-filter: blur(var(--qz-blur)) saturate(140%);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-r-xl);
    box-shadow: var(--qz-shadow);
    color: var(--qz-text);
}

/* 3rem of padding on a card is a page's worth of air, not a card's. */
body .form-card { padding: var(--qz-space-6); }
body .report-card,
body .canvas-panel { padding: var(--qz-space-5); }

/* Page wrapper, not a surface - the shell already provides its margins. */
body .content-container {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

body .form-card::before,
body .report-card::before,
body .canvas-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 22%, rgba(255, 255, 255, 0.9) 78%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

body .panel-header-icon {
    border-radius: var(--qz-r-md);
    background: var(--qz-primary-tint);
    color: var(--qz-primary);
    border: 1px solid var(--qz-border);
}

/* --- Controls ------------------------------------------------------------- */
body .clean-input,
body .input-code-field {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--qz-white);
    border: 1px solid var(--qz-border-strong);
    border-radius: var(--qz-r-md);
    font-family: var(--qz-font);
    font-size: var(--qz-fs-sm);
    font-weight: 500;
    color: var(--qz-text);
    box-shadow: var(--qz-shadow-xs);
    transition: border-color var(--qz-t) var(--qz-ease), box-shadow var(--qz-t) var(--qz-ease), background var(--qz-t) var(--qz-ease);
}

body .clean-input:focus,
body .input-code-field:focus {
    outline: none;
    background: var(--qz-white);
    border-color: var(--qz-primary);
    box-shadow: 0 0 0 4px var(--qz-primary-ring);
}

body .btn-generate-key,
body .copy-badge-btn,
body .view-all-btn {
    background: var(--rc-green-600);
    border: 1px solid rgba(0, 96, 48, 0.55);
    color: #fff;
    border-radius: var(--qz-r-md);
    font-size: var(--qz-fs-xs);
    font-weight: 700;
    padding: 8px 15px;
    box-shadow: var(--qz-shadow-green);
    transition: transform var(--qz-t-fast) var(--qz-ease), filter var(--qz-t) var(--qz-ease);
}

body .btn-generate-key:hover,
body .copy-badge-btn:hover,
body .view-all-btn:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }

body .badge-green {
    background: var(--qz-success-bg);
    color: var(--qz-success);
    border: 1px solid var(--qz-success-line);
    border-radius: var(--qz-r-pill);
    font-size: var(--qz-fs-xs);
    font-weight: 700;
    padding: 4px 10px;
}

/* --- Tables --------------------------------------------------------------- */
body .custom-table,
body .matrix-table,
body .data-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--qz-fs-sm);
    color: var(--qz-text);
}

body .custom-table thead th,
body .matrix-table thead th,
body .data-table thead th {
    background: #F8FAFC;
    color: var(--qz-muted);
    font-size: var(--qz-fs-label);
    font-weight: 700;
    letter-spacing: var(--qz-track-label);
    text-transform: uppercase;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--qz-border-strong);
    white-space: nowrap;
    vertical-align: middle;
}

body .custom-table tbody td,
body .matrix-table tbody td,
body .data-table tbody td {
    padding: 13px 16px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    color: var(--qz-text);
    font-weight: 500;
    vertical-align: middle;
}

body .custom-table tbody tr:hover td,
body .matrix-table tbody tr:hover td,
body .data-table tbody tr:hover td { background: rgba(11, 37, 92, 0.03); }

body .amount-cell { font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* --- Scroll frames -------------------------------------------------------- */
/* These pages define their own max-height, which is kept; only the rails are
   restyled so the box matches every other scroller in the product. */
body .fund-scroll::-webkit-scrollbar,
body .ledger-scroll::-webkit-scrollbar,
body .qz-latest-scroll::-webkit-scrollbar { width: 8px; height: 8px; }

body .fund-scroll::-webkit-scrollbar-track,
body .ledger-scroll::-webkit-scrollbar-track { background: transparent; }

body .fund-scroll::-webkit-scrollbar-thumb,
body .ledger-scroll::-webkit-scrollbar-thumb {
    background: var(--qz-slate-300);
    border-radius: var(--qz-r-pill);
}

/* Only the boxes that actually cap their own height get a pinned header.
   Sticking one inside a plain .table-responsive would pin it to the page
   scroll instead, floating it over the header bar. */
body .fund-scroll thead th,
body .ledger-scroll thead th { position: sticky; top: 0; z-index: 5; }

/*
   A wide grid must scroll inside its own box, never widen the page. In the
   old partner shell the content sat in a CSS grid track whose default
   min-width:auto refused to shrink below the table's min-width, so a wide
   report - CMS above all - pushed the layout past the viewport where
   body{overflow:hidden} then cut it off with no scrollbar to get it back.

   The shell is a block now, but these guards make that failure mode
   impossible to reintroduce.
*/
body .main-wrapper,
body #qzMain,
body #qzMain > * { min-width: 0; }

body .qz-table-scroll,
body .table-responsive,
body .fund-scroll,
body .ledger-scroll { max-width: 100%; }


/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

/*
   The header carries greeting, clock, wallet, search, notifications and
   avatar. All of it fits on a wide desktop and none of it may overflow on a
   laptop, so the secondary pieces drop out in order of importance rather
   than everything shrinking together until nothing is readable.

   The greeting is allowed to truncate (it already ellipses); the wallet
   balance and the avatar never go, because those are the two things a
   partner looks at the header for.
*/
.qz-topbar { flex-wrap: wrap; }
.qz-topbar-greeting { flex: 1 1 180px; }

@media (max-width: 1499px) {
    /* Date under the clock is the first thing that can go. */
    .qz-topbar .portal-clock-date { display: none; }
}

@media (max-width: 1399px) {
    :root { --qz-sidebar-w: 244px; }
}

@media (max-width: 1299px) {
    .qz-topbar .portal-clock { display: none; }
    .qz-search-kbd { display: none; }
    body .qz-search-input { padding-right: 14px; }
}

@media (max-width: 1199px) {
    :root { --qz-shell-pad: 20px; --qz-gutter: 16px; }
}

/*
    TABLET ONLY - the rail goes icon-only so content keeps its width.

    Bounded at the bottom on purpose. Written as a bare max-width:1199px this
    block sits later in the file than the mobile drawer rules in section 5,
    so on a phone it silently won: the drawer was clamped to the 88px icon
    rail it never shows, and every page carried 120px of dead left margin
    against a sidebar that was off-canvas. The range is the whole fix.
*/
@media (min-width: 992px) and (max-width: 1199px) {
    body,
    body.qz-nav-collapsed { --qz-rail: calc(var(--qz-sidebar-w-collapsed) + var(--qz-sidebar-inset) * 2); }

    body .sidebar-container,
    body .sidebar-container:hover { width: var(--qz-sidebar-w-collapsed); }
    body .sidebar-container .sidebar-link { justify-content: center; padding: 0 10px; gap: 0; }

    body .sidebar-container .sidebar-link span,
    body .qz-brand-text,
    body .qz-nav-user-meta,
    body .qz-nav-group-label { opacity: 0; width: 0; visibility: hidden; pointer-events: none; }

    body .sidebar-container .sidebar-link.dropdown-toggle::after { display: none; }
    body .sidebar-container .logo-section { justify-content: center; padding: 20px 0 12px; }
    body .sidebar-container .logo-section img { height: auto; width: 52px; }
    body .sidebar-container,
    body .sidebar-container .menu-wrapper { overflow: visible; }
    body .qz-workspace-meta, body .sidebar-container .qz-nav-tag { display: none; }
    body .qz-workspace { justify-content: center; margin: 4px 12px 6px; padding: 8px 0; }
    body .qz-nav-collapse { display: none; }
    body .qz-nav-user { justify-content: center; padding: 8px 0; }
    body .sidebar-container .logout-link { justify-content: center; }
    body .qz-nav-group-label { padding: 8px 0 0; height: 10px; }

    /* Sub-menus become floating cards off the rail. */
    body .sidebar-container .dropdown.qz-open > .dropdown-menu {
        position: absolute !important;
        left: calc(100% + 10px) !important;
        top: 0 !important;
        width: 232px;
        padding: 6px;
        background: var(--qz-nav-surface-2);
        -webkit-backdrop-filter: blur(var(--qz-blur-lg));
        backdrop-filter: blur(var(--qz-blur-lg));
        border: 1px solid var(--qz-border-nav);
        border-radius: var(--qz-r-lg);
        box-shadow: var(--qz-shadow-lg);
        z-index: 40;
    }

    body .sidebar-container .dropdown-menu::before { display: none; }

    /* Tooltips replace the hidden labels. */
    body .sidebar-container [data-qz-tip]::after {
        content: attr(data-qz-tip);
        position: absolute;
        left: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        padding: 7px 11px;
        background: var(--qz-navy-strong);
        color: #fff;
        font-size: var(--qz-fs-xs);
        font-weight: 600;
        white-space: nowrap;
        border-radius: var(--qz-r-sm);
        box-shadow: var(--qz-shadow-md);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--qz-t-fast) var(--qz-ease), transform var(--qz-t-fast) var(--qz-ease);
        z-index: 45;
    }

    body .sidebar-container [data-qz-tip]:hover::after,
    body .sidebar-container [data-qz-tip]:focus-visible::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    .qz-search { width: 200px; }
}

@media (max-width: 991px) {
    :root { --qz-shell-pad: 16px; }

    /*
        Nothing else is needed here. The icon-rail styling is scoped to the
        tablet range above, so below 992 the base rail rules in section 5
        already apply unchanged: labels visible, links left aligned, submenus
        inline, no tooltips. This block used to restate all of that to undo
        an unbounded tablet block that should never have matched a phone.
    */
}

@media (max-width: 767px) {
    :root { --qz-gutter: 14px; --qz-r-xl: 18px; --qz-r-2xl: 20px; }

    body .main-wrapper { padding: 14px 12px 32px; padding-top: 78px; }

    .qz-kpi { padding: 15px 16px 13px; }
    .qz-kpi-value { font-size: 1.3rem; }

    body .table thead th,
    body .bootstrap-custom-table th { padding: 10px 12px; }

    body .table tbody td,
    body .bootstrap-custom-table td { padding: 11px 12px; }

    body .modal-body { padding: 16px; }
    body .modal-header, body .modal-footer { padding: 14px 16px; }

    /* Filter docks stack rather than squeeze. */
    body .filter-glass-dock .row > [class*="col-"],
    body .filter-card .row > [class*="col-"] { margin-bottom: 10px; }

    .qz-empty { padding: 30px 16px; }
}

@media (max-width: 575px) {
    .qz-kpi-value { font-size: 1.2rem; }
    body .btn { padding: 9px 14px; }
}


/* ==========================================================================
   18. PRINT
   ========================================================================== */

@media print {
    .qz-ambient,
    .qz-topbar,
    .sidebar-container,
    .sidebar-overlay,
    .qz-mobilebar,
    .fixed-top,
    .rc-noprint { display: none !important; }

    body { background: #fff; }
    body .main-wrapper { margin-left: 0; padding: 0; }

    .qz-card,
    body .glass-card,
    body .dashboard-container,
    body .report-container,
    body .table-container {
        background: #fff;
        box-shadow: none;
        border: 1px solid #e2e8f0;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}


/* ==========================================================================
   19. DARK MODE
   --------------------------------------------------------------------------
   Not an inversion: a deep navy ground with slightly lifted navy surfaces,
   the same green for money/success and orange for attention, and text
   tuned for WCAG AA on those surfaces.

   Activated by data-theme="dark" on <html>. It is deliberately NOT switched
   on by default: roughly forty report and settings views still carry
   hard-coded white surfaces in their own page <style> blocks, and those must
   be moved onto tokens before dark can be offered to users without some
   screens rendering white-on-white.
   ========================================================================== */

[data-theme="dark"] {
    --qz-bg: #050E24;
    --qz-bg-2: #030A1B;

    --qz-text: #E8EDF7;
    --qz-text-2: #B6C1D6;
    --qz-muted: #8C9AB5;
    --qz-muted-2: #6B7A97;

    --qz-surface: rgba(13, 29, 64, 0.72);
    --qz-surface-strong: rgba(15, 33, 72, 0.92);
    --qz-surface-solid: #0D1D40;
    --qz-surface-sunken: rgba(5, 14, 36, 0.60);
    --qz-surface-raised: rgba(17, 37, 80, 0.60);
    --qz-nav-surface: rgba(9, 22, 52, 0.86);
    --qz-nav-surface-2: #0B1C44;
    --qz-white: #0F2148;

    --qz-border: rgba(255, 255, 255, 0.07);
    --qz-border-strong: rgba(255, 255, 255, 0.13);
    --qz-border-glass: rgba(255, 255, 255, 0.10);
    --qz-border-nav: rgba(255, 255, 255, 0.07);

    --qz-slate-50: #0C1B3D;
    --qz-slate-100: #102247;
    --qz-slate-200: #172C57;
    --qz-slate-300: #233A6B;

    --qz-navy: #3E64B8;
    --qz-navy-strong: #E8EDF7;
    --qz-navy-tint: rgba(159, 178, 214, 0.08);
    --qz-navy-tint-2: rgba(159, 178, 214, 0.14);
    --qz-navy-ring: rgba(159, 178, 214, 0.26);

    --qz-primary-tint: rgba(0, 166, 81, 0.14);
    --qz-primary-tint-2: rgba(0, 166, 81, 0.22);
    --qz-primary-ring: rgba(0, 166, 81, 0.32);

    --qz-success: #3DD68C;
    --qz-warning: #FDA160;
    --qz-danger: #F97066;
    --qz-info: #84ADFF;

    --qz-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --qz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --qz-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.75);
    --qz-shadow-md: 0 20px 40px -22px rgba(0, 0, 0, 0.8);
    --qz-shadow-lg: 0 32px 64px -28px rgba(0, 0, 0, 0.85);
    --qz-shadow-nav: 0 24px 56px -30px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .qz-ambient {
    background-image:
        radial-gradient(42% 38% at 4% 0%, rgba(0, 166, 81, 0.10) 0%, rgba(0, 166, 81, 0) 72%),
        radial-gradient(38% 34% at 100% 2%, rgba(249, 115, 22, 0.07) 0%, rgba(249, 115, 22, 0) 70%),
        radial-gradient(70% 50% at 60% 110%, rgba(53, 88, 163, 0.20) 0%, rgba(53, 88, 163, 0) 70%),
        linear-gradient(180deg, #06112B 0%, #040B1F 100%);
}

[data-theme="dark"] .qz-ambient::after { opacity: 0.15; }

/* The navy centre of the mark would vanish on navy, so in dark the logo -
   and only the logo - sits on a small white plate at its true colours. */
[data-theme="dark"] .sidebar-container .logo-section img,
[data-theme="dark"] .qz-logo {
    background: #fff;
    padding: 4px 6px;
    border-radius: var(--qz-r-sm);
}

[data-theme="dark"] body .table thead th,
[data-theme="dark"] body .custom-table thead th { background: #0C1B3D; }


/* ==========================================================================
   20. RUPEECO COMPONENTS
   --------------------------------------------------------------------------
   The pieces the design brief adds on top of the restated legacy classes.
   Every one resolves through the tokens in section 1.
   ========================================================================== */

/* --- 20.1 Topbar: page title + breadcrumb -------------------------------- */
.qz-topbar-context { min-width: 0; flex: 1 1 220px; }

.qz-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 0 3px;
    padding: 0;
    list-style: none;
    font-size: var(--qz-fs-xs);
    font-weight: 500;
    color: var(--qz-muted);
    white-space: nowrap;
    overflow: hidden;
}

.qz-crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.qz-crumbs li + li::before { content: "/"; color: var(--qz-muted-2); }
.qz-crumbs a { color: var(--qz-muted); }
.qz-crumbs a:hover { color: var(--qz-navy-strong); }
.qz-crumbs [aria-current] { color: var(--qz-text-2); overflow: hidden; text-overflow: ellipsis; }

.qz-topbar-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: var(--qz-track-tight);
    color: var(--qz-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qz-topbar-divider {
    width: 1px;
    height: 26px;
    background: var(--qz-border-strong);
    flex: 0 0 1px;
}

/* Mobile header brand: the real mark, small, never stretched. */
.qz-mobile-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.qz-mobile-brand img { height: 26px; width: auto; display: block; }
.qz-mobile-brand span { font-weight: 700; color: var(--qz-navy-strong); font-size: var(--qz-fs-body); letter-spacing: -0.01em; }

/* --- 20.2 Buttons: navy, accent, outline, loading ------------------------ */
.qz-btn-navy,
body .btn-navy,
body .btn-primary.qz-navy {
    background: var(--rc-navy-800);
    border: 1px solid var(--rc-navy-900);
    color: #fff;
    box-shadow: var(--qz-shadow-navy);
}

.qz-btn-navy:hover,
body .btn-navy:hover { background: var(--rc-navy-900); color: #fff; transform: translateY(-1px); }

.qz-btn-accent,
body .btn-accent {
    background: var(--rc-orange-500);
    border: 1px solid var(--rc-orange-600);
    color: #fff;
    box-shadow: 0 1px 1px rgba(154, 52, 18, 0.2), 0 6px 14px -8px rgba(249, 115, 22, 0.6);
}

.qz-btn-accent:hover,
body .btn-accent:hover { background: var(--rc-orange-600); color: #fff; transform: translateY(-1px); }

body .btn-outline-primary,
body .btn-outline-dark {
    background: var(--qz-white);
    border: 1px solid var(--qz-navy-ring);
    color: var(--qz-navy-strong);
}

body .btn-outline-primary:hover,
body .btn-outline-dark:hover { background: var(--qz-navy); border-color: var(--qz-navy); color: #fff; }

body .btn-outline-success {
    background: var(--qz-white);
    border: 1px solid var(--qz-success-line);
    color: var(--qz-success);
}

body .btn-outline-success:hover { background: var(--rc-green-600); border-color: var(--rc-green-600); color: #fff; }

body .btn-outline-danger {
    background: var(--qz-white);
    border: 1px solid var(--qz-danger-line);
    color: var(--qz-danger);
}

body .btn-outline-danger:hover { background: var(--qz-danger); border-color: var(--qz-danger); color: #fff; }

/* Loading: add .is-loading (or call QZ.busy(btn, true)). The label stays in
   the DOM for width, hidden behind a spinner, so the button never jumps. */
body .btn.is-loading,
.qz-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

body .btn.is-loading > *,
.qz-btn.is-loading > * { visibility: hidden; }

body .btn.is-loading::after,
.qz-btn.is-loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: qz-spin 0.7s linear infinite;
}

body .btn-secondary.is-loading::after,
body .btn-light.is-loading::after,
body .btn-outline-primary.is-loading::after {
    border-color: var(--qz-navy-tint-2);
    border-top-color: var(--qz-navy);
}

/* --- 20.3 Status pills (transaction states) ------------------------------ */
.qz-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: var(--qz-r-pill);
    font-size: var(--qz-fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid var(--qz-border-strong);
    background: var(--qz-slate-100);
    color: var(--qz-text-2);
}

.qz-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
}

.qz-status--success { background: var(--qz-success-bg); color: var(--qz-success); border-color: var(--qz-success-line); }
.qz-status--pending { background: var(--qz-warning-bg); color: var(--qz-warning); border-color: var(--qz-warning-line); }
.qz-status--failed { background: var(--qz-danger-bg); color: var(--qz-danger); border-color: var(--qz-danger-line); }
.qz-status--processing { background: var(--qz-info-bg); color: var(--qz-info); border-color: var(--qz-info-line); }
.qz-status--processing::before { animation: qz-pulse 1.6s var(--qz-ease) infinite; }
.qz-status--refunded { background: var(--qz-navy-tint); color: var(--rc-navy-600); border-color: var(--qz-navy-ring); }

/* --- 20.4 Security indicators --------------------------------------------- */
.qz-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--qz-fs-xs);
    font-weight: 500;
    color: var(--qz-muted);
    white-space: nowrap;
}

.qz-secure i { color: var(--rc-green-600); font-size: 11px; }

.qz-secure-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }

/* --- 20.5 Dashboard hero --------------------------------------------------- */
.qz-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: var(--qz-space-6);
}

.qz-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: var(--qz-fs-xs);
    font-weight: 500;
    color: var(--qz-muted);
}

.qz-hero-title {
    margin: 0;
    font-size: var(--qz-fs-display);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.15;
    color: var(--qz-text);
}

.qz-hero-sub {
    margin: 6px 0 0;
    font-size: var(--qz-fs-body);
    color: var(--qz-muted);
}

.qz-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- 20.6 Wallet card (banking style, navy) ------------------------------- */
.qz-wallet-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    padding: 22px 22px 20px;
    border-radius: var(--qz-r-xl);
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(53, 88, 163, 0.55) 0%, rgba(53, 88, 163, 0) 55%),
        linear-gradient(155deg, var(--rc-navy-700) 0%, var(--rc-navy-800) 45%, var(--rc-navy-950) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 4px rgba(4, 17, 47, 0.2), 0 24px 48px -24px rgba(4, 17, 47, 0.7);
}

/* Two quiet arcs echo the loops of the mark: green bottom-left, orange
   top-right. Decoration only, well under the text. */
.qz-wallet-card::before,
.qz-wallet-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.qz-wallet-card::before {
    width: 260px;
    height: 260px;
    right: -110px;
    top: -140px;
    border: 26px solid rgba(249, 115, 22, 0.16);
}

.qz-wallet-card::after {
    width: 220px;
    height: 220px;
    left: -120px;
    bottom: -150px;
    border: 26px solid rgba(0, 166, 81, 0.20);
}

.qz-wallet-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.qz-wallet-name {
    font-size: var(--qz-fs-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
}

.qz-wallet-chipmark {
    width: 34px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, #E9D8A6, #C9A95C);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    position: relative;
    flex: 0 0 34px;
}

.qz-wallet-chipmark::after {
    content: "";
    position: absolute;
    inset: 6px 8px;
    border: 1px solid rgba(90, 70, 20, 0.35);
    border-radius: 3px;
}

.qz-wallet-amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: #fff;
    min-width: 0;
}

.qz-wallet-amount .qz-cur { font-size: 0.62em; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.qz-wallet-amount .amount-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qz-wallet-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: var(--qz-fs-xs);
    color: rgba(255, 255, 255, 0.65);
}

.qz-wallet-meta .qz-live { display: inline-flex; align-items: center; gap: 6px; color: #7BE2AE; font-weight: 600; }
.qz-wallet-meta .qz-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rc-green-500); box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.25); }

.qz-wallet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.qz-wallet-actions .btn {
    flex: 1 1 auto;
    min-height: 38px;
    font-size: var(--qz-fs-xs);
}

body .qz-wallet-card .btn-glass {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: none;
}

body .qz-wallet-card .btn-glass:hover { background: rgba(255, 255, 255, 0.18); color: #fff; transform: translateY(-1px); }

/* --- 20.7 Quick actions ----------------------------------------------------- */
.qz-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}

.qz-quick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: var(--qz-r-lg);
    background: var(--qz-surface-strong);
    border: 1px solid var(--qz-border);
    color: var(--qz-text);
    font-size: var(--qz-fs-sm);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.25;
    transition: transform var(--qz-t) var(--qz-ease), border-color var(--qz-t) var(--qz-ease), box-shadow var(--qz-t) var(--qz-ease);
}

.qz-quick:hover {
    transform: translateY(-2px);
    border-color: var(--qz-navy-ring);
    box-shadow: var(--qz-shadow-sm);
    color: var(--qz-navy-strong);
}

.qz-quick-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--qz-r-md);
    background: var(--qz-navy-tint);
    color: var(--qz-navy);
    font-size: 14px;
    transition: background var(--qz-t) var(--qz-ease), color var(--qz-t) var(--qz-ease);
}

.qz-quick:hover .qz-quick-icon { background: var(--qz-navy); color: #fff; }
.qz-quick--money .qz-quick-icon { background: var(--qz-success-bg); color: var(--rc-green-600); }
.qz-quick--money:hover .qz-quick-icon { background: var(--rc-green-600); color: #fff; }
.qz-quick small { display: block; font-size: var(--qz-fs-xs); font-weight: 500; color: var(--qz-muted); margin-top: 2px; }

/* --- 20.8 Service cards ------------------------------------------------------ */
.qz-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.qz-service {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--qz-r-xl);
    background: var(--qz-surface);
    -webkit-backdrop-filter: blur(var(--qz-blur));
    backdrop-filter: blur(var(--qz-blur));
    border: 1px solid var(--qz-border);
    box-shadow: var(--qz-shadow-sm);
    color: var(--qz-text);
    text-decoration: none;
    transition: transform var(--qz-t) var(--qz-ease), box-shadow var(--qz-t) var(--qz-ease), border-color var(--qz-t) var(--qz-ease);
}

.qz-service:hover {
    transform: translateY(-2px);
    box-shadow: var(--qz-shadow-md);
    border-color: var(--qz-border-strong);
    color: var(--qz-text);
}

.qz-service-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.qz-service-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--qz-r-md);
    background: var(--qz-navy-tint);
    border: 1px solid var(--qz-border);
    color: var(--qz-navy);
    font-size: 15px;
}

.qz-service-name { margin: 0; font-size: var(--qz-fs-body); font-weight: 700; letter-spacing: -0.01em; }
.qz-service-desc { margin: 2px 0 0; font-size: var(--qz-fs-xs); color: var(--qz-muted); line-height: 1.45; }

.qz-service-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--qz-fs-xs);
    font-weight: 600;
    color: var(--qz-muted);
}

.qz-service-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--qz-slate-300); }
.qz-service-state.is-live { color: var(--qz-success); }
.qz-service-state.is-live::before { background: var(--rc-green-500); box-shadow: 0 0 0 3px var(--qz-success-bg); }
.qz-service-state.is-idle::before { background: var(--rc-amber-500); }

.qz-service-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid var(--qz-border);
    font-size: var(--qz-fs-xs);
}

.qz-service-foot strong { font-size: var(--qz-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

.qz-service-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--qz-navy);
    white-space: nowrap;
}

.qz-service-go i { font-size: 10px; transition: transform var(--qz-t) var(--qz-ease); }
.qz-service:hover .qz-service-go i { transform: translateX(3px); }

/* --- 20.9 Transaction stat strip ------------------------------------------- */
.qz-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.qz-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--qz-r-lg);
    background: var(--qz-surface-strong);
    border: 1px solid var(--qz-border);
    box-shadow: var(--qz-shadow-xs);
    border-left: 3px solid var(--tone, var(--qz-navy));
}

.qz-stat-label { font-size: var(--qz-fs-xs); font-weight: 500; color: var(--qz-muted); }
.qz-stat-value { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--qz-text); }

/*
   Report pages lay out their Success / Pending / Failed totals as a row of
   Bootstrap .alert boxes with centred text. Restated as stat tiles: a white
   card with a coloured left rule instead of a flooded background.
*/
body .main-wrapper .row > [class*="col-"] > .alert.text-center {
    background: var(--qz-surface-strong);
    color: var(--qz-text);
    border: 1px solid var(--qz-border);
    border-left: 3px solid var(--qz-navy);
    border-radius: var(--qz-r-lg);
    box-shadow: var(--qz-shadow-xs);
    text-align: left !important;
    padding: 14px 16px;
    font-weight: 500;
}

body .main-wrapper .row > [class*="col-"] > .alert-success.text-center { border-left-color: var(--rc-green-500); }
body .main-wrapper .row > [class*="col-"] > .alert-warning.text-center { border-left-color: var(--rc-orange-500); }
body .main-wrapper .row > [class*="col-"] > .alert-danger.text-center { border-left-color: var(--qz-danger); }
body .main-wrapper .row > [class*="col-"] > .alert-info.text-center { border-left-color: var(--qz-info); }

/* --- 20.10 KYC / verification stepper -------------------------------------- */
.qz-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.qz-stepper::-webkit-scrollbar { display: none; }

.qz-step {
    position: relative;
    flex: 1 0 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: var(--qz-fs-xs);
    font-weight: 500;
    color: var(--qz-muted);
}

.qz-step::before {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(-50% + 20px);
    right: calc(50% + 20px);
    height: 2px;
    border-radius: 2px;
    background: var(--qz-slate-200);
}

.qz-step:first-child::before { display: none; }

.qz-step-dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--qz-white);
    border: 2px solid var(--qz-slate-200);
    color: var(--qz-muted);
    font-size: 12px;
    font-weight: 700;
}

.qz-step.is-done { color: var(--qz-text-2); }
.qz-step.is-done::before { background: var(--rc-green-500); }
.qz-step.is-done .qz-step-dot { background: var(--rc-green-600); border-color: var(--rc-green-600); color: #fff; }
.qz-step.is-current { color: var(--qz-text); font-weight: 600; }
.qz-step.is-current::before { background: linear-gradient(90deg, var(--rc-green-500), var(--qz-slate-200)); }
.qz-step.is-current .qz-step-dot { border-color: var(--qz-navy); color: var(--qz-navy); box-shadow: 0 0 0 4px var(--qz-navy-tint-2); }
.qz-step.is-rejected .qz-step-dot { border-color: var(--qz-danger); color: var(--qz-danger); background: var(--qz-danger-bg); }
.qz-step.is-pending .qz-step-dot { border-color: var(--rc-orange-500); color: var(--rc-orange-600); background: var(--qz-warning-bg); }

/* Document / upload row with its state. */
.qz-doc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--qz-r-lg);
    background: var(--qz-surface-strong);
    border: 1px solid var(--qz-border);
}

.qz-doc + .qz-doc { margin-top: 8px; }

.qz-doc-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: var(--qz-r-md);
    background: var(--qz-navy-tint);
    color: var(--qz-navy);
}

.qz-doc-name { font-size: var(--qz-fs-sm); font-weight: 600; color: var(--qz-text); }
.qz-doc-meta { font-size: var(--qz-fs-xs); color: var(--qz-muted); }
.qz-doc .qz-status { margin-left: auto; }

/* --- 20.11 Notifications ------------------------------------------------------ */
.qz-notice {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--qz-r-md);
    color: var(--qz-text);
    text-decoration: none;
    transition: background var(--qz-t-fast) var(--qz-ease);
}

.qz-notice:hover { background: var(--qz-navy-tint); color: var(--qz-text); }

.qz-notice-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: var(--qz-r-md);
    background: var(--qz-navy-tint);
    color: var(--qz-navy);
    font-size: 12px;
}

.qz-notice--money .qz-notice-icon { background: var(--qz-success-bg); color: var(--rc-green-600); }
.qz-notice--attention .qz-notice-icon { background: var(--qz-warning-bg); color: var(--rc-orange-600); }
.qz-notice--security .qz-notice-icon { background: var(--qz-navy); color: #fff; }

.qz-notice-title { display: block; font-size: var(--qz-fs-sm); font-weight: 600; line-height: 1.3; }
.qz-notice-text { display: block; font-size: var(--qz-fs-xs); color: var(--qz-muted); line-height: 1.4; margin-top: 1px; }
.qz-notice-time { display: block; font-size: 0.6875rem; color: var(--qz-muted-2); margin-top: 3px; }

.qz-notice.is-unread::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rc-orange-500);
}

.qz-menu--wide { min-width: 330px; }
.qz-menu-foot { padding: 8px 12px 6px; margin-top: 4px; border-top: 1px solid var(--qz-border); font-size: var(--qz-fs-xs); }

/* --- 20.12 Toasts --------------------------------------------------------------- */
.qz-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.qz-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--qz-r-lg);
    background: var(--qz-surface-strong);
    -webkit-backdrop-filter: blur(var(--qz-blur-lg));
    backdrop-filter: blur(var(--qz-blur-lg));
    border: 1px solid var(--qz-border);
    border-left: 3px solid var(--qz-navy);
    box-shadow: var(--qz-shadow-lg);
    color: var(--qz-text);
    pointer-events: auto;
    animation: qz-toast-in var(--qz-t-slow) var(--qz-ease) both;
}

.qz-toast.is-leaving { animation: qz-toast-out var(--qz-t) var(--qz-ease) both; }
.qz-toast--success { border-left-color: var(--rc-green-500); }
.qz-toast--error { border-left-color: var(--qz-danger); }
.qz-toast--warning { border-left-color: var(--rc-orange-500); }
.qz-toast-icon { font-size: 15px; margin-top: 1px; color: var(--qz-navy); }
.qz-toast--success .qz-toast-icon { color: var(--rc-green-600); }
.qz-toast--error .qz-toast-icon { color: var(--qz-danger); }
.qz-toast--warning .qz-toast-icon { color: var(--rc-orange-600); }
.qz-toast-title { font-size: var(--qz-fs-sm); font-weight: 600; }
.qz-toast-text { font-size: var(--qz-fs-xs); color: var(--qz-muted); margin-top: 1px; }
.qz-toast-close { margin-left: auto; border: 0; background: none; color: var(--qz-muted-2); padding: 0 2px; cursor: pointer; }
.qz-toast-close:hover { color: var(--qz-text); }

@keyframes qz-toast-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes qz-toast-out {
    to { opacity: 0; transform: translateX(16px); }
}

/* --- 20.13 Error / connection states ------------------------------------------ */
.qz-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 40px 24px;
}

.qz-state-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: var(--qz-r-lg);
    background: var(--qz-navy-tint);
    border: 1px solid var(--qz-border);
    color: var(--qz-navy);
    font-size: 20px;
}

.qz-state--error .qz-state-icon { background: var(--qz-danger-bg); color: var(--qz-danger); border-color: var(--qz-danger-line); }
.qz-state--warning .qz-state-icon { background: var(--qz-warning-bg); color: var(--rc-orange-600); border-color: var(--qz-warning-line); }
.qz-state-title { margin: 0; font-size: var(--qz-fs-body); font-weight: 700; color: var(--qz-text); }
.qz-state-text { margin: 0 0 10px; max-width: 42ch; font-size: var(--qz-fs-sm); color: var(--qz-muted); line-height: 1.55; }
.qz-state-code { font-family: var(--qz-font-mono); font-size: var(--qz-fs-xs); color: var(--qz-muted-2); }

/* Connection banner, shown by qz-ui.js when the browser goes offline. */
.qz-offline {
    position: fixed;
    left: 50%;
    top: 14px;
    z-index: 2200;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    transform: translateX(-50%);
    border-radius: var(--qz-r-pill);
    background: var(--rc-navy-900);
    color: #fff;
    font-size: var(--qz-fs-sm);
    font-weight: 500;
    box-shadow: var(--qz-shadow-lg);
}

.qz-offline.is-visible { display: inline-flex; animation: qz-pop var(--qz-t) var(--qz-ease); }
.qz-offline i { color: var(--rc-orange-400); }

/* --- 20.14 Skeleton presets ----------------------------------------------------- */
.qz-skel-kpi { height: 132px; border-radius: var(--qz-r-xl); }
.qz-skel-chart { height: 220px; border-radius: var(--qz-r-lg); }
.qz-skel-row { height: 44px; border-radius: var(--qz-r-sm); margin-bottom: 8px; }

.qz-skel-table td { padding: 14px 16px !important; }
.qz-skel-table .qz-skel { height: 10px; }

/* --- 20.15 Chart card ------------------------------------------------------------ */
.qz-chart-card { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.qz-chart-area { position: relative; flex: 1 1 auto; min-height: 180px; }
.qz-chart-area canvas { animation: qz-fade var(--qz-t-slow) var(--qz-ease); }

/* --- 20.16 Section header in page body ------------------------------------------ */
.qz-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.qz-section-title {
    margin: 0;
    font-size: var(--qz-fs-h3);
    font-weight: 700;
    letter-spacing: var(--qz-track-tight);
    color: var(--qz-text);
}

.qz-section-link { font-size: var(--qz-fs-sm); font-weight: 600; color: var(--qz-navy); }
.qz-section-link:hover { color: var(--rc-green-700); }

/* --- 20.17 Page transition --------------------------------------------------------- */
/* backwards, not both: nothing may persist on #qzMain once the entrance ends -
   a lingering transform would trap Bootstrap modals under the rail. */
#qzMain { animation: qz-page-in var(--qz-t-slow) var(--qz-ease) backwards; }

@keyframes qz-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* --- 20.18 Responsive for the components above ----------------------------------- */
@media (max-width: 767px) {
    .qz-hero { align-items: flex-start; margin-bottom: var(--qz-space-5); }
    .qz-hero-actions { width: 100%; }
    .qz-hero-actions .btn { flex: 1 1 0; }
    .qz-wallet-card { padding: 18px; }
    .qz-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .qz-quick { padding: 12px 10px; align-items: center; text-align: center; font-size: var(--qz-fs-xs); }
    .qz-quick small { display: none; }
    .qz-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .qz-service { padding: 13px; }
    .qz-service-desc { display: none; }
    .qz-toasts { right: 16px; left: 16px; bottom: 16px; width: auto; }
    .qz-menu--wide { min-width: 0; width: calc(100vw - 32px); }
}

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

/* Horizontal KPI carousel on phones: add .qz-kpi-rail to a .row of KPIs. */
@media (max-width: 575px) {
    /* A scroller clips on both axes, so the row drops its h-100 and the
       vertical gutter margins, and keeps room below for the card shadow. */
    .qz-kpi-rail {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        height: auto !important;
        margin-top: 0 !important;
        padding: 2px 12px 12px 0;
        margin-right: -12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .qz-kpi-rail > [class*="col"] { margin-top: 0 !important; }

    .qz-kpi-rail::-webkit-scrollbar { display: none; }
    .qz-kpi-rail > [class*="col"] { flex: 0 0 78%; max-width: 78%; scroll-snap-align: start; }
}

@media print {
    .qz-toasts, .qz-offline, .qz-hero-actions, .qz-quick-grid { display: none !important; }
    .qz-wallet-card { color: #000; background: #fff; border: 1px solid #ccc; }
}