/* ==========================================================================
   MoniYes Business App — logged-in shell on Bootstrap 5
   "Ledger-grade fintech": deep navy chrome, gold accents, hairline panels.

   NOTE: the --biz-* tokens below MUST stay in sync with
   web/theme/landing/assets/css/landing-business.css (body.landing-theme-blue).
   ========================================================================== */

/* ---------- Tokens ---------- */
body.biz-app {
    --biz-navy: #070f3f;
    --biz-navy-2: #0d1a6b;
    --biz-blue: #0b1ae9;
    --biz-blue-2: #4a6cf7;
    --biz-gold: #f5c542;
    --biz-gold-deep: #c99a1d;
    --biz-green: #0fbf72;
    --biz-green-text: #0a8f56;
    --biz-green-bright: #19e68c;
    --biz-canvas: #f4f6ff;
    --biz-surface: #ffffff;
    --biz-border: rgba(13, 18, 64, 0.08);
    --biz-border-dark: rgba(255, 255, 255, 0.12);
    --biz-heading: #0d1240;
    --biz-text: #3f4866;
    --biz-muted: #6b7590;
    --biz-muted-dark: #aab4d9;
    --biz-display: "Sora", "Nunito", sans-serif;
    --biz-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* App-only tokens */
    --biz-red: #e5484d;
    --biz-red-text: #c2262c;
    --biz-radius: 14px;
    --biz-radius-sm: 10px;
    --biz-shadow: 0 1px 2px rgba(7, 15, 63, 0.04), 0 8px 24px -12px rgba(7, 15, 63, 0.18);
    --biz-shadow-lg: 0 24px 48px -24px rgba(7, 15, 63, 0.35);
    --biz-sidebar-w: 268px;
    --biz-rail-w: 76px;
    --biz-topbar-h: 68px;
    --biz-focus: 0 0 0 3px rgba(245, 197, 66, 0.55);

    /* Re-map Bootstrap 5 tokens */
    --bs-primary: var(--biz-blue);
    --bs-primary-rgb: 11, 26, 233;
    --bs-success: var(--biz-green);
    --bs-success-rgb: 15, 191, 114;
    --bs-warning: var(--biz-gold);
    --bs-warning-rgb: 245, 197, 66;
    --bs-danger: var(--biz-red);
    --bs-danger-rgb: 229, 72, 77;
    --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--biz-text);
    --bs-body-bg: var(--biz-canvas);
    --bs-border-color: var(--biz-border);
    --bs-link-color: var(--biz-blue);
    --bs-link-color-rgb: 11, 26, 233;
    --bs-link-hover-color: var(--biz-navy-2);
    --bs-link-hover-color-rgb: 13, 26, 107;
    --bs-heading-color: var(--biz-heading);
    --bs-border-radius: var(--biz-radius-sm);
    --bs-border-radius-lg: var(--biz-radius);

    margin: 0;
    min-height: 100vh;
    font-family: var(--bs-body-font-family);
    font-size: 0.95rem;
    color: var(--biz-text);
    background:
        radial-gradient(1200px 400px at 100% -10%, rgba(74, 108, 247, 0.08), transparent 60%),
        var(--biz-canvas);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Typography ---------- */
.biz-app h1, .biz-app h2, .biz-app h3, .biz-app h4, .biz-app h5, .biz-app h6,
.biz-app .h1, .biz-app .h2, .biz-app .h3, .biz-app .h4, .biz-app .h5, .biz-app .h6 {
    font-family: var(--biz-display);
    color: var(--biz-heading);
    letter-spacing: -0.015em;
    font-weight: 700;
}

.biz-app .text-primary { color: var(--biz-blue) !important; }
.biz-app .text-success { color: var(--biz-green-text) !important; }
.biz-app .text-warning { color: var(--biz-gold-deep) !important; }
.biz-app .text-danger { color: var(--biz-red-text) !important; }
.biz-app .text-muted { color: var(--biz-muted) !important; }

.biz-mono,
.biz-app .font-monospace {
    font-family: var(--biz-mono) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.biz-eyebrow {
    font-family: var(--biz-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--biz-muted);
}

/* ---------- Focus & accessibility ---------- */
.biz-app a:focus-visible,
.biz-app button:focus-visible,
.biz-app .btn:focus-visible,
.biz-app input:focus-visible,
.biz-app select:focus-visible,
.biz-app textarea:focus-visible,
.biz-app [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--biz-focus) !important;
}

.biz-app .form-control:focus,
.biz-app .form-select:focus,
.biz-app .form-check-input:focus {
    border-color: var(--biz-blue-2);
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2);
}

.biz-skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 2000;
    padding: 0.5rem 1rem;
    border-radius: var(--biz-radius-sm);
    background: var(--biz-gold);
    color: var(--biz-navy);
    font-weight: 700;
}

.biz-skip-link:focus { top: 1rem; }

/* ---------- Shell grid ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1 0 auto;
}

.app-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--biz-border);
    color: var(--biz-muted);
    font-size: 0.8rem;
}

/* ---------- Avatars & pills ---------- */
.biz-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--biz-blue) 0%, var(--biz-navy-2) 100%);
    color: #fff;
    font-family: var(--biz-display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.biz-avatar--gold {
    background: linear-gradient(135deg, var(--biz-gold) 0%, var(--biz-gold-deep) 100%);
    color: var(--biz-navy);
}

.biz-avatar--lg { width: 44px; height: 44px; font-size: 0.95rem; border-radius: 13px; }

.biz-role-pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(245, 197, 66, 0.45);
    color: var(--biz-gold);
    font-family: var(--biz-display);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.biz-role-pill--light {
    border-color: rgba(11, 26, 233, 0.2);
    color: var(--biz-blue);
    background: rgba(11, 26, 233, 0.05);
}

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

/* ---------- Sidebar ---------- */
.app-sidebar {
    --bs-offcanvas-width: 288px;
    --bs-offcanvas-bg: var(--biz-navy);
    --bs-offcanvas-color: #fff;
    color: #fff;
}

.app-sidebar__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(420px 260px at 0% 0%, rgba(11, 26, 233, 0.45), transparent 70%),
        radial-gradient(300px 300px at 120% 100%, rgba(74, 108, 247, 0.18), transparent 70%),
        var(--biz-navy);
}

/* faint ledger lines */
.app-sidebar__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 28px);
    mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}

@media (min-width: 992px) {
    .app-sidebar {
        position: sticky;
        top: 0;
        flex: 0 0 var(--biz-sidebar-w);
        width: var(--biz-sidebar-w);
        height: 100vh;
        z-index: 1030;
        transition: flex-basis .22s ease, width .22s ease;
    }
}

.app-sidebar__brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: var(--biz-topbar-h);
    padding: 0 1rem 0 1.25rem;
    border-bottom: 1px solid var(--biz-border-dark);
}

.app-sidebar__logo { display: inline-flex; align-items: center; }
.app-sidebar__logo-full { height: 34px; width: auto; }
.app-sidebar__logo-mark { display: none; height: 30px; width: 30px; }

.app-sidebar__icon-btn {
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--biz-border-dark);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--biz-muted-dark);
    transition: color .15s ease, background-color .15s ease;
}

.app-sidebar__icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.app-sidebar__icon-btn i { transition: transform .22s ease; }

.app-sidebar__identity {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 1rem 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--biz-border-dark);
    border-radius: var(--biz-radius);
    background: rgba(255, 255, 255, 0.04);
}

.app-sidebar__identity-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; align-items: flex-start; }

.app-sidebar__identity-name {
    max-width: 100%;
    font-family: var(--biz-display);
    font-weight: 600;
    font-size: 0.88rem;
    color: #fff;
}

.app-sidebar__nav {
    position: relative;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0.75rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.app-nav__primary { padding: 0.5rem 0.25rem 0.25rem; }

.app-nav__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: var(--biz-gold);
    color: var(--biz-navy);
    font-family: var(--biz-display);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(245, 197, 66, 0.8), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
    transition: transform .15s ease, background-color .15s ease;
}

.app-nav__cta:hover { background: #ffd463; color: var(--biz-navy); transform: translateY(-1px); }
.app-nav__cta.is-active { box-shadow: 0 0 0 2px var(--biz-navy), 0 0 0 4px var(--biz-gold); }

.app-nav__section { margin-top: 1.1rem; }

.app-nav__heading {
    padding: 0 0.75rem 0.4rem;
    font-family: var(--biz-display);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--biz-muted-dark);
    white-space: nowrap;
}

.app-nav__list { list-style: none; margin: 0; padding: 0; }

.app-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    margin: 1px 0;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--biz-display);
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.app-nav__link i { width: 1.1rem; text-align: center; color: var(--biz-muted-dark); transition: color .15s ease; }
.app-nav__link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.app-nav__link:hover i { color: #fff; }

.app-nav__link.is-active {
    background: linear-gradient(90deg, rgba(245, 197, 66, 0.16) 0%, rgba(245, 197, 66, 0.02) 100%);
    color: #fff;
    font-weight: 600;
}

.app-nav__link.is-active i { color: var(--biz-gold); }

.app-nav__link.is-active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--biz-gold);
    box-shadow: 0 0 12px rgba(245, 197, 66, 0.7);
}

.app-sidebar__foot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--biz-border-dark);
    color: var(--biz-muted-dark);
    font-size: 0.74rem;
    white-space: nowrap;
}

.app-sidebar__foot i { color: var(--biz-green-bright); }

.app-sidebar a:focus-visible,
.app-sidebar button:focus-visible { box-shadow: var(--biz-focus) !important; outline: none; }

/* ---------- Desktop icon rail ---------- */
@media (min-width: 992px) {
    body.biz-rail .app-sidebar { flex-basis: var(--biz-rail-w); width: var(--biz-rail-w); }
    body.biz-rail .app-sidebar__brand { flex-direction: column; justify-content: center; height: auto; padding: 0.9rem 0 0.6rem; gap: 0.6rem; }
    body.biz-rail .app-sidebar__logo-full { display: none; }
    body.biz-rail .app-sidebar__logo-mark { display: block; }
    body.biz-rail .app-sidebar__icon-btn i { transform: rotate(180deg); }
    body.biz-rail .app-sidebar__identity { justify-content: center; margin: 0.75rem 0.6rem 0.25rem; padding: 0.5rem; border-color: transparent; background: transparent; }
    body.biz-rail .app-sidebar__identity-text,
    body.biz-rail .app-nav__label { display: none; }
    body.biz-rail .app-sidebar__nav { padding: 0.25rem 0.6rem 1rem; }
    body.biz-rail .app-nav__primary { padding: 0.25rem 0; }
    body.biz-rail .app-nav__cta { padding: 0.7rem 0; }
    body.biz-rail .app-nav__section { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--biz-border-dark); }
    body.biz-rail .app-nav__heading { display: none; }
    body.biz-rail .app-nav__link { justify-content: center; padding: 0.65rem 0; }
    body.biz-rail .app-nav__link.is-active::before { left: -0.6rem; }
    body.biz-rail .app-sidebar__foot { justify-content: center; padding: 0.9rem 0; }
}

/* ---------- Top bar ---------- */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--biz-topbar-h);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    background: rgba(244, 246, 255, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--biz-border);
}

@media (min-width: 768px) {
    .app-topbar { padding: 0 1.5rem; }
}

.app-topbar__title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.app-topbar__title .biz-eyebrow { font-size: 0.62rem; }

.app-topbar__page {
    font-family: var(--biz-display);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--biz-heading);
    letter-spacing: -0.01em;
}

.app-topbar__user {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 240px;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
    border: 1px solid var(--biz-border);
    border-radius: 14px;
    background: var(--biz-surface);
    color: var(--biz-heading);
    font-family: var(--biz-display);
    font-weight: 600;
    font-size: 0.82rem;
}

.app-topbar__user:hover { border-color: rgba(13, 18, 64, 0.18); }

.app-topbar__menu { min-width: 260px; }

.app-topbar__menu-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
}

/* ---------- Panels (cards) ---------- */
.biz-app .card,
.biz-panel {
    background: var(--biz-surface);
    border: 1px solid var(--biz-border);
    border-radius: var(--biz-radius);
    box-shadow: var(--biz-shadow);
}

.biz-app .card > .card-header,
.biz-panel__head {
    background: transparent;
    border-bottom: 1px solid var(--biz-border);
    padding: 1rem 1.25rem;
    font-family: var(--biz-display);
    font-weight: 600;
    color: var(--biz-heading);
}

.biz-app .card > .card-header:first-child {
    border-radius: var(--biz-radius) var(--biz-radius) 0 0;
}

.biz-app .card > .card-footer {
    background: rgba(244, 246, 255, 0.6);
    border-top: 1px solid var(--biz-border);
}

.biz-panel__body { padding: 1.25rem; }

/* ---------- Buttons ---------- */
.biz-app .btn {
    font-family: var(--biz-display);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--biz-radius-sm);
    letter-spacing: -0.005em;
}

.biz-app .btn-sm { font-size: 0.78rem; }

.biz-app .btn-primary {
    --bs-btn-bg: var(--biz-blue);
    --bs-btn-border-color: var(--biz-blue);
    --bs-btn-hover-bg: var(--biz-navy-2);
    --bs-btn-hover-border-color: var(--biz-navy-2);
    --bs-btn-active-bg: var(--biz-navy);
    --bs-btn-active-border-color: var(--biz-navy);
    --bs-btn-disabled-bg: var(--biz-blue);
    --bs-btn-disabled-border-color: var(--biz-blue);
    box-shadow: 0 6px 16px -8px rgba(11, 26, 233, 0.6);
}

.biz-app .btn-outline-primary {
    --bs-btn-color: var(--biz-blue);
    --bs-btn-border-color: rgba(11, 26, 233, 0.35);
    --bs-btn-hover-bg: var(--biz-blue);
    --bs-btn-hover-border-color: var(--biz-blue);
    --bs-btn-active-bg: var(--biz-navy-2);
    --bs-btn-active-border-color: var(--biz-navy-2);
}

.biz-app .btn-success {
    --bs-btn-bg: var(--biz-green);
    --bs-btn-border-color: var(--biz-green);
    --bs-btn-hover-bg: var(--biz-green-text);
    --bs-btn-hover-border-color: var(--biz-green-text);
    --bs-btn-active-bg: var(--biz-green-text);
    --bs-btn-active-border-color: var(--biz-green-text);
}

.biz-app .btn-warning,
.btn-biz-gold {
    --bs-btn-color: var(--biz-navy);
    --bs-btn-bg: var(--biz-gold);
    --bs-btn-border-color: var(--biz-gold);
    --bs-btn-hover-color: var(--biz-navy);
    --bs-btn-hover-bg: #ffd463;
    --bs-btn-hover-border-color: #ffd463;
    --bs-btn-active-color: var(--biz-navy);
    --bs-btn-active-bg: var(--biz-gold-deep);
    --bs-btn-active-border-color: var(--biz-gold-deep);
}

.biz-app .btn-light {
    --bs-btn-bg: var(--biz-surface);
    --bs-btn-border-color: var(--biz-border);
    --bs-btn-hover-bg: var(--biz-canvas);
    --bs-btn-hover-border-color: rgba(13, 18, 64, 0.16);
}

.biz-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--biz-border);
    background: var(--biz-surface);
    color: var(--biz-heading);
    transition: background-color .15s ease, color .15s ease;
}

.biz-icon-btn:hover { background: var(--biz-navy); color: #fff; }

/* ---------- Forms ---------- */
.biz-app .form-control,
.biz-app .form-select {
    border-color: rgba(13, 18, 64, 0.14);
    border-radius: var(--biz-radius-sm);
}

.biz-app .form-label,
.biz-app label.control-label {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--biz-heading);
}

.biz-app .form-check-input:checked {
    background-color: var(--biz-blue);
    border-color: var(--biz-blue);
}

/* ---------- Badges ---------- */
.biz-app .badge {
    font-family: var(--biz-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
    padding: 0.35em 0.7em;
}

.biz-app .bg-warning { color: var(--biz-navy) !important; }

/* ---------- Tables ---------- */
.biz-app .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(74, 108, 247, 0.04);
    --bs-table-striped-bg: rgba(244, 246, 255, 0.7);
    color: var(--biz-text);
    margin-bottom: 0;
}

.biz-app .table > thead th,
.biz-app .table > thead td {
    font-family: var(--biz-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--biz-muted);
    background: rgba(244, 246, 255, 0.7);
    border-bottom: 1px solid var(--biz-border);
    white-space: nowrap;
}

.biz-app .table > :not(caption) > * > * {
    border-bottom-color: var(--biz-border);
    padding: 0.85rem 1rem;
    vertical-align: middle;
}

/* ---------- Modals, dropdowns, toasts ---------- */
.biz-app .modal-content {
    border: 1px solid var(--biz-border);
    border-radius: var(--biz-radius);
    box-shadow: var(--biz-shadow-lg);
}

.biz-app .modal-header,
.biz-app .modal-footer { border-color: var(--biz-border); }

.biz-app .modal-title { font-family: var(--biz-display); font-weight: 700; color: var(--biz-heading); }

.biz-app .dropdown-menu {
    border: 1px solid var(--biz-border);
    border-radius: var(--biz-radius-sm);
    box-shadow: var(--biz-shadow-lg);
    padding: 0.4rem;
}

.biz-app .dropdown-item {
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: var(--biz-heading);
}

.biz-app .dropdown-item:hover,
.biz-app .dropdown-item:focus { background: var(--biz-canvas); }

.biz-toast-stack {
    position: fixed;
    top: calc(var(--biz-topbar-h) + 0.5rem);
    right: 0;
    z-index: 1090;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 100%;
}

.biz-toast {
    width: 360px;
    max-width: calc(100vw - 1.5rem);
    background: var(--biz-surface);
    border: 1px solid var(--biz-border);
    border-left: 4px solid var(--biz-blue);
    border-radius: var(--biz-radius-sm);
    box-shadow: var(--biz-shadow-lg);
}

.biz-toast .toast-header {
    background: transparent;
    border-bottom: 0;
    font-family: var(--biz-display);
    color: var(--biz-heading);
    gap: 0.5rem;
}

.biz-toast .toast-body { padding-top: 0; color: var(--biz-text); }
.biz-toast .toast-body ul { margin: 0; padding-left: 1.1rem; }
.biz-toast--success { border-left-color: var(--biz-green); }
.biz-toast--success .biz-toast__icon { color: var(--biz-green-text); }
.biz-toast--error { border-left-color: var(--biz-red); }
.biz-toast--error .biz-toast__icon { color: var(--biz-red-text); }
.biz-toast--info { border-left-color: var(--biz-blue-2); }
.biz-toast--info .biz-toast__icon { color: var(--biz-blue); }
.biz-toast--warning { border-left-color: var(--biz-gold); }
.biz-toast--warning .biz-toast__icon { color: var(--biz-gold-deep); }

/* ---------- Pagination (LinkPager) ---------- */
.biz-app .pagination { gap: 0.25rem; flex-wrap: wrap; }

.biz-app .pagination .page-link,
.biz-app .pagination li > span {
    border-radius: 8px !important;
    border: 1px solid var(--biz-border);
    color: var(--biz-heading);
    font-family: var(--biz-mono);
    font-size: 0.8rem;
    padding: 0.4rem 0.7rem;
    display: block;
}

.biz-app .pagination .active .page-link,
.biz-app .pagination .active > a,
.biz-app .pagination .active > span {
    background: var(--biz-navy);
    border-color: var(--biz-navy);
    color: #fff;
}

.biz-app .pagination li > a {
    display: block;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--biz-border);
    border-radius: 8px;
    font-family: var(--biz-mono);
    font-size: 0.8rem;
    color: var(--biz-heading);
    text-decoration: none;
}

/* ==========================================================================
   Page building blocks (views/layouts/partials/ui/*)
   ========================================================================== */

/* ---------- Page header ---------- */
.biz-page-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.biz-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--biz-navy);
    color: var(--biz-gold);
    font-size: 1rem;
    box-shadow: 0 10px 20px -12px rgba(7, 15, 63, 0.7);
}

.biz-page-subtitle {
    margin-top: 0.4rem;
    color: var(--biz-muted);
    max-width: 62ch;
}

/* ---------- Stat tiles ---------- */
.biz-stat {
    --tone: var(--biz-blue);
    --tone-soft: rgba(11, 26, 233, 0.08);
    position: relative;
    display: block;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--biz-border);
    border-radius: var(--biz-radius);
    background: var(--biz-surface);
    box-shadow: var(--biz-shadow);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    animation: biz-rise .5s cubic-bezier(.2, .7, .2, 1) both;
}

.biz-stat::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tone), transparent 85%);
}

a.biz-stat:hover { border-color: var(--tone-soft); transform: translateY(-2px); transition: transform .15s ease; color: inherit; }

.biz-stat--green { --tone: var(--biz-green); --tone-soft: rgba(15, 191, 114, 0.12); }
.biz-stat--gold { --tone: var(--biz-gold-deep); --tone-soft: rgba(245, 197, 66, 0.18); }
.biz-stat--navy { --tone: var(--biz-navy-2); --tone-soft: rgba(13, 26, 107, 0.1); }
.biz-stat--red { --tone: var(--biz-red); --tone-soft: rgba(229, 72, 77, 0.1); }

.biz-stat__label {
    font-family: var(--biz-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--biz-muted);
}

.biz-stat__value {
    margin-top: 0.4rem;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 600;
    color: var(--biz-heading);
    line-height: 1.15;
}

.biz-stat__hint { margin-top: 0.3rem; font-size: 0.78rem; color: var(--biz-muted); }

.biz-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--tone-soft);
    color: var(--tone);
}

.biz-stagger > *:nth-child(1) .biz-stat { animation-delay: .00s; }
.biz-stagger > *:nth-child(2) .biz-stat { animation-delay: .06s; }
.biz-stagger > *:nth-child(3) .biz-stat { animation-delay: .12s; }
.biz-stagger > *:nth-child(4) .biz-stat { animation-delay: .18s; }
.biz-stagger > *:nth-child(5) .biz-stat { animation-delay: .24s; }
.biz-stagger > *:nth-child(6) .biz-stat { animation-delay: .30s; }

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

/* ---------- Empty state ---------- */
.biz-empty { padding: 3rem 1.5rem; }

.biz-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 20px;
    background: var(--biz-canvas);
    border: 1px dashed rgba(11, 26, 233, 0.25);
    color: var(--biz-blue);
    font-size: 1.5rem;
}

.biz-empty__title { font-size: 1.05rem; margin-bottom: 0.35rem; }
.biz-empty__text { color: var(--biz-muted); max-width: 44ch; margin: 0 auto 1.25rem; }

/* ---------- Status pills ---------- */
.biz-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-family: var(--biz-display);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.biz-pill i { font-size: 0.68rem; }
.biz-pill--paid { background: rgba(15, 191, 114, 0.1); color: var(--biz-green-text); border-color: rgba(15, 191, 114, 0.25); }
.biz-pill--pending { background: rgba(245, 197, 66, 0.16); color: #8a6510; border-color: rgba(245, 197, 66, 0.4); }
.biz-pill--failed { background: rgba(229, 72, 77, 0.08); color: var(--biz-red-text); border-color: rgba(229, 72, 77, 0.25); }
.biz-pill--neutral { background: var(--biz-canvas); color: var(--biz-text); border-color: var(--biz-border); }

/* ---------- Tables that stack into cards below md ---------- */
.biz-table td.biz-num,
.biz-table th.biz-num { text-align: right; }

.biz-table .biz-token {
    font-family: var(--biz-mono);
    font-size: 0.8rem;
    color: var(--biz-blue);
    text-decoration: none;
}

.biz-table .biz-token:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    .biz-table--stack thead { display: none; }

    .biz-table--stack,
    .biz-table--stack tbody,
    .biz-table--stack tr,
    .biz-table--stack td { display: block; width: 100%; }

    .biz-table--stack tr {
        margin: 0 0 0.75rem;
        padding: 0.5rem 0.25rem;
        border: 1px solid var(--biz-border);
        border-radius: var(--biz-radius-sm);
        background: var(--biz-surface);
    }

    .biz-table--stack > :not(caption) > * > * { border-bottom: 0; padding: 0.4rem 0.75rem; }

    .biz-table--stack td[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
    }

    .biz-table--stack td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-family: var(--biz-display);
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--biz-muted);
        text-align: left;
    }

    .biz-table--stack td.biz-num { text-align: right; }
    .biz-table--stack td.biz-cell-actions { justify-content: flex-end; }
    .biz-table--stack td.biz-cell-actions::before { content: none; }

    .biz-table-wrap--stack { padding: 0.75rem; background: var(--biz-canvas); }
}

/* ---------- Sticky bulk action bar ---------- */
.biz-action-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 1010;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--biz-radius);
    background: var(--biz-navy);
    color: #fff;
    box-shadow: var(--biz-shadow-lg);
}

.biz-action-bar .biz-mono { color: var(--biz-gold); }

/* ---------- Dashboard ---------- */
.biz-hero {
    position: relative;
    padding: 1.5rem;
    border-radius: calc(var(--biz-radius) + 4px);
    color: #fff;
    background:
        radial-gradient(500px 220px at 100% 0%, rgba(74, 108, 247, 0.55), transparent 65%),
        radial-gradient(300px 200px at 0% 120%, rgba(245, 197, 66, 0.18), transparent 70%),
        linear-gradient(135deg, var(--biz-navy) 0%, var(--biz-navy-2) 100%);
    overflow: hidden;
    box-shadow: var(--biz-shadow-lg);
}

.biz-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 26px);
    pointer-events: none;
}

.biz-hero > * { position: relative; }
.biz-hero .biz-eyebrow { color: var(--biz-gold); }
.biz-hero__title { color: #fff !important; font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); font-weight: 800; margin: 0.25rem 0 0.35rem; }
.biz-hero__text { color: var(--biz-muted-dark); margin: 0; }
.biz-hero__figure { font-family: var(--biz-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); color: #fff; }

@media (min-width: 768px) {
    .biz-hero { padding: 2rem 2.25rem; }
}

.biz-quick {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--biz-border);
    border-radius: var(--biz-radius);
    background: var(--biz-surface);
    color: var(--biz-heading);
    font-family: var(--biz-display);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    box-shadow: var(--biz-shadow);
    transition: transform .15s ease, border-color .15s ease;
}

.biz-quick:hover { transform: translateY(-2px); border-color: rgba(11, 26, 233, 0.25); color: var(--biz-heading); }

.biz-quick__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--biz-canvas);
    color: var(--biz-blue);
}

.biz-quick--primary { background: var(--biz-gold); border-color: var(--biz-gold); color: var(--biz-navy); }
.biz-quick--primary:hover { color: var(--biz-navy); border-color: var(--biz-gold-deep); }
.biz-quick--primary .biz-quick__icon { background: rgba(7, 15, 63, 0.1); color: var(--biz-navy); }

.biz-split-card {
    position: relative;
    height: 100%;
    padding: 1.4rem;
    border-radius: var(--biz-radius);
    background:
        radial-gradient(260px 160px at 100% 0%, rgba(245, 197, 66, 0.22), transparent 70%),
        linear-gradient(160deg, var(--biz-navy-2) 0%, var(--biz-navy) 100%);
    color: #fff;
    box-shadow: var(--biz-shadow-lg);
    overflow: hidden;
}

.biz-split-card .biz-eyebrow { color: var(--biz-muted-dark); }
.biz-split-card__number { font-family: var(--biz-mono); font-size: 1.6rem; letter-spacing: 0.08em; color: #fff; word-break: break-all; }
.biz-split-card__meta { color: var(--biz-muted-dark); font-size: 0.85rem; }

.biz-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--biz-border-dark);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.biz-copy-btn:hover { background: rgba(255, 255, 255, 0.14); }
.biz-copy-btn.is-copied { border-color: var(--biz-green-bright); color: var(--biz-green-bright); }

.biz-chart { position: relative; height: 280px; }

.biz-vendor-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--biz-border);
}

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

/* ---------- "What is next?" guide: keep it clear of the sidebar ---------- */
@media (min-width: 992px) {
    .biz-app .guide-container { left: var(--biz-sidebar-w); width: auto; }
    body.biz-rail .guide-container { left: var(--biz-rail-w); }
}

/* ---------- Misc ---------- */
.img-account-profile {
    height: 10rem;
    width: 10rem;
    object-fit: cover;
}

@media (min-width: 576px) {
    .w-sm-auto { width: auto !important; }
}

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