@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
            /* Brand palette — derived from the REAL Slimpay logo
               (uploaded directly by the user: a teal/charcoal diamond
               mark, public/dashboard/assets/img/slimpay-logo.png).
               #14afa9 and #2f2e2a were measured pixel-for-pixel from that
               file. Full 50-900 tint/shade ramps for both, generated with
               matched lightness steps (teal anchored at 500 = the exact
               brand color; charcoal anchored at 800, since the brand
               charcoal is already a dark near-black tone) — use these for
               anything needing a lighter tint or darker shade instead of
               opacity tricks on the base color. */
            --sp-teal-50:  #edfdfc;
            --sp-teal-100: #d6faf9;
            --sp-teal-200: #adf6f3;
            --sp-teal-300: #76efeb;
            --sp-teal-400: #3fe9e2;
            --sp-teal-500: #14afa9;
            --sp-teal-600: #129994;
            --sp-teal-700: #0c6c68;
            --sp-teal-800: #084745;
            --sp-teal-900: #052928;
            --sp-charcoal-50:  #f8f8f7;
            --sp-charcoal-100: #eeeeec;
            --sp-charcoal-200: #dbdad7;
            --sp-charcoal-300: #bcbab4;
            --sp-charcoal-400: #939086;
            --sp-charcoal-500: #6c6960;
            --sp-charcoal-600: #4b4a43;
            --sp-charcoal-700: #3b3a35;
            --sp-charcoal-800: #2f2e2a;
            --sp-charcoal-900: #1b1a18;

            --sp-primary-light: var(--sp-teal-400);
            --sp-primary: var(--sp-teal-500);
            --sp-primary-rgb: 20, 175, 169;
            --sp-primary-dark: var(--sp-teal-700);
            --sp-primary-light-rgb: 63, 233, 226;
            --sp-primary-dark-rgb: 12, 108, 104;
            --sp-brand-gradient: linear-gradient(135deg, var(--sp-primary-light) 0%, var(--sp-teal-900) 100%);
            --sp-charcoal: var(--sp-charcoal-800);
            --sp-charcoal-rgb: 47, 46, 42;
            --sp-success: #13a976;
            --sp-warning: #e99a16;
            --sp-danger: #e55353;
            --sp-info: #0d91d0;
            /* --sp-ink/muted/border/bg used to be a cool blue-slate
               (hue ~220°) with no relation to the brand at all — every
               piece of body text, every border, and the page background
               had the wrong color temperature. Now pulled from the
               correctly warm-toned charcoal ramp instead, matched by
               lightness so contrast/hierarchy stays identical. */
            --sp-ink: var(--sp-charcoal-800);
            --sp-muted: var(--sp-charcoal-400);
            --sp-bg: var(--sp-charcoal-50);
            --sp-surface: #ffffff;
            --sp-border: var(--sp-charcoal-100);
            --sp-sidebar-width: 272px;
            --sp-topbar-height: 76px;
            --sp-radius: 18px;
            --sp-shadow: 0 14px 40px rgba(33, 40, 66, .07);
            --bs-primary: var(--sp-primary);
            --bs-primary-rgb: var(--sp-primary-rgb);
            --bs-body-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        [data-bs-theme="dark"] {
            /* Same fix as the light-mode neutrals above — these were
               cool blue-slate (hue ~220°) with no relation to the real
               brand's warm charcoal. Same lightness levels, corrected hue
               and a modest saturation matching the brand's low-saturation
               charcoal character instead of the arbitrary blue-slate
               saturations that were here before. */
            --sp-ink: #f5f5f4;
            --sp-muted: #b0aea6;
            --sp-bg: #161612;
            --sp-surface: #21201c;
            --sp-border: #3a3831;
            --sp-shadow: 0 18px 46px rgba(0, 0, 0, .28);
        }

        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--sp-primary-rgb), .35) transparent;
        }

        body {
            min-height: 100vh;
            margin: 0;
            color: var(--sp-ink);
            background: var(--sp-bg);
            font-size: .925rem;
            -webkit-font-smoothing: antialiased;
        }

        a {
            text-decoration: none;
        }

        button,
        input,
        select {
            font-family: inherit;
        }

        .app-shell {
            min-height: 100vh;
        }

        .app-sidebar {
            --bs-offcanvas-width: var(--sp-sidebar-width);
            width: var(--sp-sidebar-width);
            flex: 0 0 var(--sp-sidebar-width);
            color: var(--sp-ink);
            background: var(--sp-surface);
            border-right: 1px solid var(--sp-border);
        }

        @media (min-width: 992px) {
            .app-sidebar {
                position: sticky;
                top: 0;
                height: 100vh;
                z-index: 1030;
            }
        }

        .sidebar-inner {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 20px 16px;
            overflow-y: auto;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            color: var(--sp-ink);
            font-size: 1.12rem;
            font-weight: 700;
            letter-spacing: -.02em;
        }
        .brand-wordmark {
            color: var(--sp-teal-600);
        }
        .brand-wordmark-light {
            color: var(--sp-ink);
            font-weight: 500;
        }

        .brand-mark {
            display: inline-grid;
            width: 38px;
            height: 38px;
            place-items: center;
        }
        .brand-mark img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .sidebar-section-label {
            margin: 24px 11px 8px;
            color: var(--sp-muted);
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .115em;
            text-transform: uppercase;
        }

        .sidebar-nav {
            gap: 4px;
        }

        .sidebar-nav .nav-link {
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 44px;
            padding: 10px 12px;
            color: var(--sp-muted);
            font-weight: 600;
            border-radius: 12px;
            transition: .2s ease;
        }

        .sidebar-nav .nav-link .heroicon {
            width: 20px;
            font-size: 1.05rem;
            text-align: center;
        }

        .sidebar-nav .nav-link:hover {
            color: var(--sp-primary);
            background: rgba(var(--sp-primary-rgb), .075);
        }

        .sidebar-nav .nav-link.active {
            color: var(--sp-primary);
            background: rgba(var(--sp-primary-rgb), .11);
            box-shadow: inset 3px 0 0 var(--sp-primary);
        }

        .security-card {
            position: relative;
            margin-top: auto;
            padding: 18px;
            overflow: hidden;
            background: linear-gradient(145deg, rgba(var(--sp-primary-rgb), .13), rgba(var(--sp-primary-rgb), .045));
            border: 1px solid rgba(var(--sp-primary-rgb), .17);
            border-radius: 17px;
        }

        .security-card::after {
            position: absolute;
            right: -18px;
            bottom: -28px;
            width: 90px;
            height: 90px;
            content: "";
            background: rgba(var(--sp-primary-rgb), .1);
            border-radius: 50%;
        }

        .security-icon {
            display: grid;
            width: 38px;
            height: 38px;
            margin-bottom: 14px;
            place-items: center;
            color: var(--sp-primary);
            background: rgba(var(--sp-primary-rgb), .13);
            border-radius: 12px;
        }

        .app-main {
            min-width: 0;
        }

        .app-topbar {
            position: sticky;
            top: 0;
            z-index: 1020;
            min-height: var(--sp-topbar-height);
            padding: 13px 26px;
            background: rgba(255, 255, 255, .88);
            border-bottom: 1px solid rgba(232, 234, 240, .88);
            backdrop-filter: blur(18px);
        }

        [data-bs-theme="dark"] .app-topbar {
            background: rgba(24, 28, 37, .88);
            border-bottom-color: rgba(42, 48, 64, .92);
        }

        .topbar-search {
            position: relative;
            width: min(460px, 42vw);
        }

        .topbar-search .form-control {
            min-height: 46px;
            padding-right: 72px;
            padding-left: 43px;
            color: var(--sp-ink);
            background: var(--sp-bg);
            border: 1px solid transparent;
            border-radius: 13px;
        }

        .topbar-search .form-control:focus {
            background: var(--sp-surface);
            border-color: rgba(var(--sp-primary-rgb), .35);
            box-shadow: 0 0 0 .22rem rgba(var(--sp-primary-rgb), .1);
        }

        .topbar-search > .heroicon {
            position: absolute;
            top: 50%;
            left: 16px;
            color: var(--sp-muted);
            transform: translateY(-50%);
        }

        .search-shortcut {
            position: absolute;
            top: 50%;
            right: 11px;
            padding: 3px 7px;
            color: var(--sp-muted);
            background: var(--sp-surface);
            border: 1px solid var(--sp-border);
            border-radius: 7px;
            transform: translateY(-50%);
            font-size: .69rem;
            font-weight: 700;
        }

        .icon-btn {
            position: relative;
            display: inline-grid;
            width: 43px;
            height: 43px;
            place-items: center;
            color: var(--sp-muted);
            background: transparent;
            border: 1px solid var(--sp-border);
            border-radius: 12px;
            transition: .2s ease;
        }

        .icon-btn:hover {
            color: var(--sp-primary);
            background: rgba(var(--sp-primary-rgb), .08);
            border-color: rgba(var(--sp-primary-rgb), .18);
        }

        .notification-dot {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 7px;
            height: 7px;
            background: var(--sp-danger);
            border: 2px solid var(--sp-surface);
            border-radius: 50%;
        }

        .avatar {
            display: inline-grid;
            width: 42px;
            height: 42px;
            place-items: center;
            color: #fff;
            background: linear-gradient(145deg, #172033, #364158);
            border-radius: 13px;
            font-size: .8rem;
            font-weight: 700;
        }

        .app-content {
            padding: 30px 26px 40px;
        }

        @media (max-width: 575.98px) {
            .app-topbar,
            .app-content {
                padding-right: 16px;
                padding-left: 16px;
            }
        }

        .eyebrow {
            color: var(--sp-muted);
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .07em;
            text-transform: uppercase;
        }

        .page-title {
            margin: 0;
            font-size: clamp(1.7rem, 3vw, 2.2rem);
            font-weight: 700;
            letter-spacing: -.045em;
        }

        .page-subtitle {
            max-width: 680px;
            margin: 7px 0 0;
            color: var(--sp-muted);
        }

        .btn {
            min-height: 42px;
            padding-right: 17px;
            padding-left: 17px;
            font-weight: 650;
            border-radius: 11px;
        }

        .btn-primary {
            background: var(--sp-primary);
            border-color: var(--sp-primary);
            box-shadow: 0 10px 22px rgba(var(--sp-primary-rgb), .18);
        }

        .btn-primary:hover,
        .btn-primary:focus {
            background: var(--sp-primary-dark);
            border-color: var(--sp-primary-dark);
        }

        .btn-soft-primary {
            color: var(--sp-primary);
            background: rgba(var(--sp-primary-rgb), .1);
            border: 1px solid rgba(var(--sp-primary-rgb), .13);
        }

        .btn-soft-primary:hover {
            color: #fff;
            background: var(--sp-primary);
            border-color: var(--sp-primary);
        }

        .dashboard-card {
            height: 100%;
            background: var(--sp-surface);
            border: 1px solid var(--sp-border);
            border-radius: var(--sp-radius);
            box-shadow: var(--sp-shadow);
        }

        .wallet-card {
            position: relative;
            min-height: 285px;
            padding: 25px;
            overflow: hidden;
            color: #fff;
            background:
                radial-gradient(circle at 86% 16%, rgba(255,255,255,.19) 0 2px, transparent 3px),
                radial-gradient(circle at 92% 22%, rgba(255,255,255,.1) 0 70px, transparent 71px),
                linear-gradient(140deg, #1a1917 0%, var(--sp-charcoal) 55%, var(--sp-primary-dark) 130%);
            border: 0;
            border-radius: var(--sp-radius);
            box-shadow: 0 20px 46px rgba(23, 32, 51, .23);
        }

        .wallet-card::before {
            position: absolute;
            top: -80px;
            right: -60px;
            width: 235px;
            height: 235px;
            content: "";
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 50%;
            box-shadow: 0 0 0 28px rgba(255,255,255,.035), 0 0 0 58px rgba(255,255,255,.025);
        }

        .wallet-card > * {
            position: relative;
            z-index: 1;
        }

        .wallet-balance {
            margin-top: 7px;
            margin-bottom: 24px;
            font-size: clamp(2rem, 4vw, 2.65rem);
            font-weight: 700;
            letter-spacing: -.045em;
        }

        .wallet-action {
            min-height: 43px;
            color: #fff;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.17);
            backdrop-filter: blur(8px);
        }

        .wallet-action:hover {
            color: #172033;
            background: #fff;
            border-color: #fff;
        }

        .account-strip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-top: 22px;
            padding-top: 18px;
            border-top: 1px solid rgba(255,255,255,.13);
        }

        .account-number {
            font-size: 1.13rem;
            font-weight: 700;
            letter-spacing: .12em;
        }

        .stat-card {
            position: relative;
            min-height: 132px;
            padding: 20px;
            overflow: hidden;
        }

        .stat-icon {
            display: grid;
            width: 43px;
            height: 43px;
            place-items: center;
            border-radius: 13px;
            font-size: 1.04rem;
        }

        .stat-icon.primary {
            color: var(--sp-primary);
            background: rgba(var(--sp-primary-rgb), .1);
        }

        .stat-icon.success {
            color: var(--sp-success);
            background: rgba(19, 169, 118, .1);
        }

        .stat-icon.warning {
            color: var(--sp-warning);
            background: rgba(233, 154, 22, .1);
        }

        .stat-icon.info {
            color: var(--sp-info);
            background: rgba(13, 145, 208, .1);
        }

        .stat-label {
            color: var(--sp-muted);
            font-size: .78rem;
            font-weight: 600;
        }

        .stat-value {
            margin: 8px 0 2px;
            color: var(--sp-ink);
            font-size: 1.42rem;
            font-weight: 700;
            letter-spacing: -.03em;
        }

        .metric-note {
            color: var(--sp-muted);
            font-size: .73rem;
        }

        .metric-note .positive {
            color: var(--sp-success);
            font-weight: 700;
        }

        .metric-note .negative {
            color: var(--sp-danger);
            font-weight: 700;
        }

        .card-heading {
            color: var(--sp-ink);
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: -.015em;
        }

        .card-subtitle {
            color: var(--sp-muted);
            font-size: .78rem;
        }

        .card-body-spacious {
            padding: 22px;
        }

        .range-tabs {
            display: flex;
            gap: 3px;
            padding: 4px;
            background: var(--sp-bg);
            border: 1px solid var(--sp-border);
            border-radius: 10px;
        }

        .range-tabs .btn {
            min-width: 45px;
            min-height: 32px;
            padding: 5px 10px;
            color: var(--sp-muted);
            background: transparent;
            border: 0;
            border-radius: 7px;
            font-size: .72rem;
        }

        .range-tabs .btn.active {
            color: var(--sp-primary);
            background: var(--sp-surface);
            box-shadow: 0 3px 10px rgba(33, 40, 66, .08);
        }

        .chart-wrap {
            position: relative;
            height: 280px;
            margin-top: 16px;
        }

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

        .quick-action {
            display: flex;
            min-height: 118px;
            padding: 16px;
            flex-direction: column;
            justify-content: space-between;
            color: var(--sp-ink);
            background: var(--sp-bg);
            border: 1px solid transparent;
            border-radius: 15px;
            transition: .2s ease;
        }

        .quick-action:hover {
            color: var(--sp-primary);
            background: rgba(var(--sp-primary-rgb), .065);
            border-color: rgba(var(--sp-primary-rgb), .16);
            transform: translateY(-2px);
        }

        .quick-action-icon {
            display: grid;
            width: 39px;
            height: 39px;
            place-items: center;
            color: var(--sp-primary);
            background: var(--sp-surface);
            border: 1px solid var(--sp-border);
            border-radius: 12px;
            font-size: 1rem;
        }

        .quick-action-title {
            display: block;
            margin-top: 11px;
            color: inherit;
            font-size: .83rem;
            font-weight: 700;
        }

        .quick-action-text {
            display: block;
            margin-top: 2px;
            color: var(--sp-muted);
            font-size: .7rem;
            line-height: 1.3;
        }

        .table-controls .form-control,
        .table-controls .form-select {
            min-height: 42px;
            color: var(--sp-ink);
            background-color: var(--sp-bg);
            border-color: var(--sp-border);
            border-radius: 10px;
            font-size: .79rem;
        }

        .table-search {
            position: relative;
            min-width: min(100%, 285px);
        }

        .table-search .heroicon {
            position: absolute;
            top: 50%;
            left: 13px;
            z-index: 3;
            color: var(--sp-muted);
            transform: translateY(-50%);
        }

        .table-search .form-control {
            padding-left: 38px;
        }

        .transactions-table {
            --bs-table-bg: transparent;
            --bs-table-color: var(--sp-ink);
            margin-bottom: 0;
            vertical-align: middle;
        }

        .transactions-table thead th {
            padding: 13px 18px;
            color: var(--sp-muted);
            background: var(--sp-bg);
            border-bottom-color: var(--sp-border);
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .transactions-table tbody td {
            padding: 16px 18px;
            border-bottom-color: var(--sp-border);
        }

        .transactions-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .transactions-table tbody tr:hover {
            background: rgba(var(--sp-primary-rgb), .027);
        }

        .transaction-icon {
            display: grid;
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            place-items: center;
            border-radius: 13px;
            font-size: 1rem;
        }

        .transaction-icon.airtime {
            color: #e15e67;
            background: rgba(225, 94, 103, .1);
        }

        .transaction-icon.funding {
            color: var(--sp-success);
            background: rgba(19, 169, 118, .1);
        }

        .transaction-icon.electricity {
            color: var(--sp-warning);
            background: rgba(233, 154, 22, .1);
        }

        .transaction-icon.cable {
            color: var(--sp-info);
            background: rgba(13, 145, 208, .1);
        }

        .transaction-icon.data {
            color: var(--sp-primary);
            background: rgba(var(--sp-primary-rgb), .1);
        }

        .transaction-icon.transfer {
            color: #6c7a91;
            background: rgba(108, 122, 145, .1);
        }

        .transaction-name {
            color: var(--sp-ink);
            font-size: .84rem;
            font-weight: 700;
        }

        .transaction-date {
            color: var(--sp-muted);
            font-size: .7rem;
        }

        .badge-status {
            padding: 6px 10px;
            border-radius: 999px;
            font-size: .67rem;
            font-weight: 700;
            text-transform: capitalize;
        }

        .badge-completed {
            color: var(--sp-success);
            background: rgba(19, 169, 118, .105);
        }

        .badge-pending {
            color: var(--sp-warning);
            background: rgba(233, 154, 22, .11);
        }

        .badge-failed {
            color: var(--sp-danger);
            background: rgba(229, 83, 83, .105);
        }

        .amount-credit {
            color: var(--sp-success);
            font-weight: 700;
        }

        .amount-debit {
            color: var(--sp-ink);
            font-weight: 700;
        }

        .pagination {
            --bs-pagination-color: var(--sp-muted);
            --bs-pagination-bg: var(--sp-surface);
            --bs-pagination-border-color: var(--sp-border);
            --bs-pagination-hover-color: var(--sp-primary);
            --bs-pagination-hover-bg: rgba(var(--sp-primary-rgb), .08);
            --bs-pagination-hover-border-color: rgba(var(--sp-primary-rgb), .18);
            --bs-pagination-active-color: #fff;
            --bs-pagination-active-bg: var(--sp-primary);
            --bs-pagination-active-border-color: var(--sp-primary);
            margin-bottom: 0;
        }

        .pagination .page-link {
            min-width: 34px;
            text-align: center;
            border-radius: 9px !important;
        }

        .empty-results {
            display: none;
            padding: 38px 20px;
            color: var(--sp-muted);
            text-align: center;
        }

        .dropdown-menu {
            color: var(--sp-ink);
            background: var(--sp-surface);
            border-color: var(--sp-border);
            border-radius: 13px;
            box-shadow: var(--sp-shadow);
        }

        .dropdown-item {
            color: var(--sp-ink);
            border-radius: 8px;
        }

        .dropdown-item:hover {
            color: var(--sp-primary);
            background: rgba(var(--sp-primary-rgb), .08);
        }

        .toast {
            color: var(--sp-ink);
            background: var(--sp-surface);
            border-color: var(--sp-border);
            border-radius: 13px;
            box-shadow: var(--sp-shadow);
        }

        .form-control::placeholder {
            color: #9ba3b3;
        }

        @media (max-width: 1199.98px) {
            .wallet-card {
                min-height: 260px;
            }
        }

        @media (max-width: 767.98px) {
            .topbar-search {
                width: 100%;
            }

            .header-actions {
                width: 100%;
            }

            .header-actions .btn {
                flex: 1;
            }

            .card-body-spacious {
                padding: 18px;
            }

            .chart-wrap {
                height: 240px;
            }
        }

        @media (max-width: 430px) {
            .action-grid {
                grid-template-columns: 1fr;
            }

            .wallet-card {
                padding: 21px;
            }

            .account-number {
                font-size: .98rem;
            }
        }

/* ==========================================================================\n   Full multi-page application additions\n   ========================================================================== */
:root {
    --sp-sidebar-soft: #ecfdf3;
    --sp-primary-soft: rgba(var(--sp-primary-rgb), .10);
    --sp-success-soft: rgba(19,169,118,.11);
    --sp-warning-soft: rgba(233,154,22,.12);
    --sp-danger-soft: rgba(229,83,83,.10);
    --sp-info-soft: rgba(13,145,208,.10);
}

.app-content { max-width: 1600px; }
.clickable { cursor: pointer; }
.min-w-0 { min-width: 0; }
.text-primary { color: var(--sp-primary) !important; }
.bg-primary { background-color: var(--sp-primary) !important; }
.border-primary { border-color: var(--sp-primary) !important; }
.btn-primary {
    --bs-btn-bg: var(--sp-primary);
    --bs-btn-border-color: var(--sp-primary);
    --bs-btn-hover-bg: var(--sp-primary-dark);
    --bs-btn-hover-border-color: var(--sp-primary-dark);
    --bs-btn-active-bg: var(--sp-primary-dark);
    --bs-btn-active-border-color: var(--sp-primary-dark);
}
.form-control, .form-select {
    min-height: 46px;
    color: var(--sp-ink);
    background-color: var(--sp-surface);
    border-color: var(--sp-border);
    border-radius: 12px;
}
.form-control:focus, .form-select:focus {
    border-color: rgba(var(--sp-primary-rgb), .42);
    box-shadow: 0 0 0 .22rem rgba(var(--sp-primary-rgb), .10);
}
.form-check-input:checked { background-color: var(--sp-primary); border-color: var(--sp-primary); }
.form-label { color: var(--sp-ink); font-weight: 700; font-size: .82rem; }
.input-group-text { color: var(--sp-muted); background: var(--sp-bg); border-color: var(--sp-border); }
.modal-content { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 20px; box-shadow: var(--sp-shadow); }
.modal-header, .modal-footer { border-color: var(--sp-border); }
.dropdown-menu { background: var(--sp-surface); border-color: var(--sp-border); border-radius: 14px; box-shadow: var(--sp-shadow); }
.dropdown-item { color: var(--sp-ink); border-radius: 9px; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--sp-primary); background: var(--sp-primary-soft); }

.search-results {
    position: absolute; z-index: 1060; top: calc(100% + 8px); left: 0; right: 0;
    max-height: 390px; overflow-y: auto; padding: 8px;
    background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 14px;
    box-shadow: var(--sp-shadow);
}
.search-result-item { display:flex; align-items:center; gap:12px; padding:10px 11px; color:var(--sp-ink); border-radius:10px; }
.search-result-item:hover { color:var(--sp-primary); background:var(--sp-primary-soft); }
.search-result-icon { display:grid; width:34px; height:34px; place-items:center; color:var(--sp-primary); background:var(--sp-primary-soft); border-radius:10px; }

.service-card, .option-card, .biller-card, .meter-card, .link-card {
    position: relative; height: 100%; padding: 20px; color: var(--sp-ink);
    background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius);
    box-shadow: 0 8px 24px rgba(33,40,66,.04); transition: .2s ease;
}
.service-card:hover, .biller-card:hover, .meter-card:hover, .link-card:hover {
    transform: translateY(-2px); border-color: rgba(var(--sp-primary-rgb),.30); box-shadow: var(--sp-shadow);
}
.biller-icon, .service-icon {
    display:grid; width:46px; height:46px; place-items:center; margin-bottom:17px;
    color:var(--sp-primary); background:var(--sp-primary-soft); border-radius:14px; font-size:1.15rem;
}
.option-card { cursor:pointer; padding:16px; box-shadow:none; }
.option-card:hover, .option-card.active { border-color:var(--sp-primary); background:var(--sp-primary-soft); }
.option-card.active::after { position:absolute; top:11px; right:11px; font-family:'Inter',sans-serif; font-weight:800; content:'✓'; color:var(--sp-primary); }

.choice-group { display:flex; flex-wrap:wrap; gap:10px; }
.choice-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:9px 16px;
    color:var(--sp-muted); background:var(--sp-surface); border:1px solid var(--sp-border); border-radius:12px; font-weight:700;
}
.choice-btn:hover, .choice-btn.active { color:var(--sp-primary); background:var(--sp-primary-soft); border-color:rgba(var(--sp-primary-rgb),.40); }
.network-dot { width:10px; height:10px; border-radius:50%; }
.network-mtn { background:#ffcc00; } .network-airtel { background:#e60000; } .network-glo { background:#40a83b; } .network-9mobile { background:#006847; }

.summary-card { padding:24px; background:linear-gradient(145deg, rgba(var(--sp-primary-rgb),.10), rgba(var(--sp-primary-rgb),.025)); border:1px solid rgba(var(--sp-primary-rgb),.18); border-radius:var(--sp-radius); }
.summary-row { display:flex; align-items-start; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px dashed var(--sp-border); }
.summary-row:last-child { border-bottom:0; }
.summary-row .label { color:var(--sp-muted); }
.summary-total { font-size:1.25rem; font-weight:800; }

.section-tabs { gap:6px; padding:6px; background:var(--sp-bg); border-radius:14px; }
.section-tabs .nav-link { padding:9px 15px; color:var(--sp-muted); border-radius:10px; font-weight:700; }
.section-tabs .nav-link.active { color:var(--sp-primary); background:var(--sp-surface); box-shadow:0 5px 16px rgba(33,40,66,.07); }

.filter-chip { border:1px solid var(--sp-border); color:var(--sp-muted); background:var(--sp-surface); border-radius:999px; font-weight:700; }
.filter-chip.active, .filter-chip:hover { color:var(--sp-primary); border-color:rgba(var(--sp-primary-rgb),.35); background:var(--sp-primary-soft); }

.empty-state { padding:48px 20px; color:var(--sp-muted); text-align:center; }
.empty-state-icon { display:grid; width:62px; height:62px; margin:0 auto 16px; place-items:center; color:var(--sp-primary); background:var(--sp-primary-soft); border-radius:18px; font-size:1.45rem; }

.detail-list { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 25px; }
.detail-list dt { color:var(--sp-muted); font-weight:500; }
.detail-list dd { margin:0; color:var(--sp-ink); font-weight:700; text-align:right; }

.settings-panel { display:none; }
.settings-panel.active { display:block; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid var(--sp-border); }
.setting-row:last-child { border-bottom:0; }

.copy-field { display:flex; align-items:center; gap:8px; padding:8px 10px 8px 14px; background:var(--sp-bg); border:1px solid var(--sp-border); border-radius:11px; }
.copy-field code { color:var(--sp-ink); }

.provider-logo { display:grid; width:45px; height:45px; place-items:center; color:#fff; border-radius:14px; font-weight:800; }
.provider-dstv{background:#0b78cf}.provider-gotv{background:#2a438b}.provider-startimes{background:#f58220}.provider-showmax{background:#ea166d}

.progress-thin { height:8px; background:var(--sp-bg); }
.progress-thin .progress-bar { background:var(--sp-primary); }

.amount-positive { color:var(--sp-success); font-weight:800; }
.amount-negative { color:var(--sp-ink); font-weight:800; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; }
.status-dot.active, .status-dot.completed { background:var(--sp-success); }
.status-dot.pending, .status-dot.scheduled { background:var(--sp-warning); }
.status-dot.disabled, .status-dot.failed { background:var(--sp-danger); }

.table > :not(caption) > * > * { background:transparent; border-bottom-color:var(--sp-border); }
.table-hover > tbody > tr:hover > * { background:rgba(var(--sp-primary-rgb),.025); }
.table thead th { color:var(--sp-muted); font-size:.72rem; letter-spacing:.055em; text-transform:uppercase; }
.table-responsive { min-height:150px; }

.pagination { margin-bottom:0; }
.pagination .page-link { color:var(--sp-muted); background:var(--sp-surface); border-color:var(--sp-border); border-radius:9px !important; }
.pagination .page-item.active .page-link { color:#fff; background:var(--sp-primary); border-color:var(--sp-primary); }

.toast { color:var(--sp-ink); background:var(--sp-surface); border-color:var(--sp-border); border-radius:14px; box-shadow:var(--sp-shadow); }

.receipt-box { padding:22px; background:#fff; color:#172033; border:1px dashed #d8dce6; border-radius:16px; }
.token-code { padding:16px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:1.15rem; font-weight:800; letter-spacing:.12em; text-align:center; background:var(--sp-primary-soft); border:1px dashed rgba(var(--sp-primary-rgb),.4); border-radius:13px; }

@media (max-width: 767.98px) {
    .app-content { padding:22px 15px 40px; }
    .page-title { font-size:1.65rem; }
    .dashboard-card, .summary-card { border-radius:16px; }
    .setting-row { align-items:flex-start; }
}

.badge-active, .badge-paid { color: var(--sp-success); background: var(--sp-success-soft); }
.badge-disabled { color: var(--sp-danger); background: var(--sp-danger-soft); }
.badge-scheduled { color: var(--sp-warning); background: var(--sp-warning-soft); }


/* =========================================================
   Corrected shared behaviour, accessibility and responsiveness
   ========================================================= */
.heroicon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    vertical-align: -.125em;
    pointer-events: none;
}

.sidebar-nav .nav-link .heroicon {
    width: 20px;
    height: 20px;
    font-size: 1.05rem;
}

.topbar-search > .heroicon {
    width: 16px;
    height: 16px;
    font-size: .9rem;
}

.icon-btn .heroicon,
.stat-icon .heroicon,
.service-icon .heroicon,
.biller-icon .heroicon,
.search-result-icon .heroicon,
.empty-state-icon .heroicon,
.transaction-icon .heroicon,
.security-icon .heroicon,
.brand-mark .heroicon {
    width: 1.05em;
    height: 1.05em;
}

button:focus-visible,
a:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(var(--sp-primary-rgb), .28);
    outline-offset: 2px;
}

.choice-btn.active,
.filter-chip.active,
.option-card.active {
    box-shadow: 0 0 0 2px rgba(var(--sp-primary-rgb), .08);
}

.btn:disabled,
.form-control:disabled,
.form-select:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.search-result-item.active,
.search-result-item:focus {
    color: var(--sp-primary);
    background: var(--sp-primary-soft);
}

.search-results[aria-hidden="true"] {
    display: none !important;
}

.badge-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.badge-completed,
.badge-active,
.badge-paid {
    color: var(--sp-success);
    background: var(--sp-success-soft);
}

.badge-pending,
.badge-scheduled {
    color: var(--sp-warning);
    background: var(--sp-warning-soft);
}

.badge-failed,
.badge-disabled {
    color: var(--sp-danger);
    background: var(--sp-danger-soft);
}

.badge-status .status-dot {
    margin-right: 7px;
}

/* Bootstrap .badge + status-* modifiers used by the Vue pages/Blade views */
.badge.status-completed,
.badge.status-active {
    color: var(--sp-success);
    background: var(--sp-success-soft);
}

.badge.status-pending {
    color: var(--sp-warning);
    background: var(--sp-warning-soft);
}

.badge.status-failed {
    color: var(--sp-danger);
    background: var(--sp-danger-soft);
}

.table code {
    color: var(--sp-primary);
    white-space: nowrap;
}

.transaction-name {
    max-width: 240px;
}

.header-actions .btn {
    white-space: nowrap;
}

.settings-panel {
    animation: settingsPanelIn .18s ease-out;
}

@keyframes settingsPanelIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1199.98px) {
    .summary-card.position-sticky {
        position: static !important;
    }
}

@media (max-width: 767.98px) {
    .header-actions {
        width: 100%;
    }

    .header-actions .btn {
        flex: 1 1 150px;
    }

    .choice-group {
        gap: 8px;
    }

    .choice-btn {
        min-height: 42px;
        padding: 8px 13px;
    }

    .detail-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .detail-list dd {
        padding-bottom: 10px;
        text-align: left;
        border-bottom: 1px solid var(--sp-border);
        overflow-wrap: anywhere;
    }

    .setting-row {
        gap: 14px;
    }
}

@media (max-width: 575.98px) {
    .app-topbar {
        min-height: 68px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .app-content {
        padding-top: 20px;
    }

    .wallet-card {
        min-height: 270px;
        padding: 22px;
    }

    .wallet-action {
        padding-right: 12px;
        padding-left: 12px;
    }

    .section-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .section-tabs .nav-link {
        text-align: center;
    }

    .mobile-card-table {
        min-height: 0;
        overflow: visible;
    }

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

    .mobile-card-table table {
        padding: 0 14px 14px;
    }

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

    .mobile-card-table tbody tr {
        margin-bottom: 12px;
        padding: 10px 14px;
        background: var(--sp-surface);
        border: 1px solid var(--sp-border);
        border-radius: 14px;
        box-shadow: 0 7px 20px rgba(33, 40, 66, .04);
    }

    .mobile-card-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-height: 42px;
        padding: 9px 0 !important;
        text-align: right !important;
        border-bottom: 1px dashed var(--sp-border);
        overflow-wrap: anywhere;
    }

    .mobile-card-table tbody td:last-child {
        border-bottom: 0;
    }

    .mobile-card-table tbody td::before {
        flex: 0 0 auto;
        content: attr(data-label);
        color: var(--sp-muted);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .045em;
        text-align: left;
        text-transform: uppercase;
    }

    .mobile-card-table tbody td:first-child {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left !important;
    }

    .mobile-card-table tbody td:first-child::before {
        display: none;
    }

    .mobile-card-table .transaction-name {
        max-width: 205px;
    }

    .mobile-card-table .dropdown {
        margin-left: auto;
    }

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}

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

@media print {
    .app-sidebar,
    .app-topbar,
    .header-actions,
    .toast-container,
    .modal,
    .btn,
    .pagination {
        display: none !important;
    }

    body,
    .app-main,
    .app-content {
        background: #fff !important;
        color: #172033 !important;
    }

    .app-content {
        max-width: none;
        padding: 0;
    }

    .dashboard-card,
    .summary-card {
        box-shadow: none !important;
    }
}

/* Overview component corrections */
.chart-container {
    position: relative;
    width: 100%;
    height: 330px;
}

.chart-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.period-switch {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 3px;
    padding: 4px;
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: 10px;
}

.period-switch button {
    min-width: 38px;
    min-height: 32px;
    padding: 5px 9px;
    color: var(--sp-muted);
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

.period-switch button:hover,
.period-switch button:focus-visible {
    color: var(--sp-primary);
}

.period-switch button.active {
    color: var(--sp-primary);
    background: var(--sp-surface);
    box-shadow: 0 3px 10px rgba(33, 40, 66, .08);
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.quick-action-grid .quick-action {
    min-height: 126px;
}

@media (max-width: 575.98px) {
    .chart-container {
        height: 250px;
    }

    .period-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .period-switch button {
        min-width: 40px;
    }

    .quick-action-grid {
        gap: 10px;
    }

    .quick-action-grid .quick-action {
        min-height: 112px;
        padding: 13px;
    }
}

@media (max-width: 350px) {
    .quick-action-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Card spacing consistency corrections
   ========================================================= */
:root {
    --sp-card-padding-x: 24px;
    --sp-card-padding-y: 22px;
    --sp-card-padding-mobile-x: 16px;
    --sp-card-padding-mobile-y: 18px;
}

/* Shared header wrapper used by overview, directory and table cards. */
.card-section-header {
    width: 100%;
    padding: var(--sp-card-padding-y) var(--sp-card-padding-x) 18px;
}

/* Keep header controls from collapsing or touching card edges. */
.card-section-header > .row,
.card-section-header > .d-flex {
    width: 100%;
}

/* Match card footer and result-bar spacing with the card header. */
.dashboard-card > .border-top {
    border-top-color: var(--sp-border) !important;
}

.dashboard-card > .border-top.px-4,
.dashboard-card > .border-top[class*="px-"] {
    padding-right: var(--sp-card-padding-x) !important;
    padding-left: var(--sp-card-padding-x) !important;
}

/* Give reusable catalog cards a little more breathing room. */
.service-card,
.biller-card,
.meter-card,
.link-card {
    padding: 22px;
}

/* Preserve compact selectable plan cards. */
.option-card {
    padding: 16px;
}

@media (max-width: 767.98px) {
    .card-section-header {
        padding: var(--sp-card-padding-mobile-y) var(--sp-card-padding-mobile-x) 14px;
    }

    .dashboard-card > .border-top.px-4,
    .dashboard-card > .border-top[class*="px-"] {
        padding-right: var(--sp-card-padding-mobile-x) !important;
        padding-left: var(--sp-card-padding-mobile-x) !important;
    }

    .service-card,
    .biller-card,
    .meter-card,
    .link-card {
        padding: 18px;
    }
}

@media (max-width: 575.98px) {
    /* Bootstrap p-4 cards are slightly reduced on phones without changing markup. */
    .dashboard-card.p-4:not(.stat-card),
    form.dashboard-card.p-4 {
        padding: 20px !important;
    }

    .dashboard-card.p-3 {
        padding: 16px !important;
    }
}

/* =========================================================
   Fixed and organised application navigation
   ========================================================= */
body {
    overflow-x: hidden;
}

.sidebar-inner {
    min-height: 0;
    overflow: hidden;
}

.sidebar-brand-row {
    flex: 0 0 auto;
    min-height: 64px;
    padding: 0 10px 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--sp-border);
}

.sidebar-navigation {
    min-height: 0;
    padding: 4px 4px 12px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.sidebar-navigation::-webkit-scrollbar {
    width: 5px;
}

.sidebar-navigation::-webkit-scrollbar-thumb {
    background: rgba(var(--sp-primary-rgb), .24);
    border-radius: 999px;
}

.sidebar-navigation::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-navigation .sidebar-section-label {
    position: relative;
    margin: 20px 12px 7px;
    padding-left: 1px;
    line-height: 1.2;
}

.sidebar-navigation .sidebar-section-label:first-child {
    margin-top: 14px;
}

.sidebar-nav {
    gap: 5px;
}

.sidebar-nav .nav-link {
    position: relative;
    gap: 11px;
    min-height: 46px;
    padding: 7px 10px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 12px;
}

.sidebar-nav .nav-link .heroicon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 8px;
    color: currentColor;
    background: rgba(113, 128, 150, .08);
    border-radius: 10px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.sidebar-nav .nav-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav .nav-link:hover {
    border-color: rgba(var(--sp-primary-rgb), .1);
    transform: translateX(2px);
}

.sidebar-nav .nav-link:hover .heroicon {
    color: var(--sp-primary);
    background: rgba(var(--sp-primary-rgb), .11);
}

.sidebar-nav .nav-link.active {
    color: var(--sp-primary-dark);
    background: linear-gradient(90deg, rgba(var(--sp-primary-rgb), .15), rgba(var(--sp-primary-rgb), .07));
    border-color: rgba(var(--sp-primary-rgb), .14);
    box-shadow: none;
}

.sidebar-nav .nav-link.active::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    content: "";
    background: var(--sp-primary);
    border-radius: 0 999px 999px 0;
}

.sidebar-nav .nav-link.active::after {
    position: absolute;
    right: 12px;
    width: 6px;
    height: 6px;
    content: "";
    background: var(--sp-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(var(--sp-primary-rgb), .1);
}

.sidebar-nav .nav-link.active .heroicon {
    color: #fff;
    background: linear-gradient(145deg, var(--sp-primary), var(--sp-primary-dark));
    box-shadow: 0 7px 15px rgba(var(--sp-primary-rgb), .22);
}

.security-card {
    flex: 0 0 auto;
    margin-top: 12px;
    padding: 15px;
}

.security-card .security-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
}

@media (min-width: 992px) {
    .app-shell {
        display: block !important;
    }

    .app-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0;
        z-index: 1040;
        width: var(--sp-sidebar-width);
        height: 100dvh;
        visibility: visible !important;
        transform: none !important;
        box-shadow: 8px 0 30px rgba(33, 40, 66, .035);
    }

    .sidebar-inner {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        padding: 16px 14px 14px;
    }

    .app-main {
        width: calc(100% - var(--sp-sidebar-width));
        min-height: 100vh;
        margin-left: var(--sp-sidebar-width);
    }

    .app-topbar {
        left: var(--sp-sidebar-width);
    }
}

@media (max-width: 991.98px) {
    .app-sidebar {
        width: min(88vw, 310px);
        max-width: 310px;
        border-right: 0;
        box-shadow: 18px 0 44px rgba(23, 32, 51, .18);
    }

    .app-sidebar .offcanvas-header {
        min-height: 72px;
        padding: 14px 18px;
        background: var(--sp-surface);
    }

    .app-sidebar .sidebar-inner {
        height: calc(100dvh - 72px);
        padding: 4px 14px 16px;
    }

    .sidebar-navigation {
        padding-top: 0;
    }

    .sidebar-navigation .sidebar-section-label:first-child {
        margin-top: 10px;
    }

    .sidebar-nav .nav-link {
        min-height: 48px;
    }
}

@media (max-height: 720px) and (min-width: 992px) {
    .security-card {
        padding: 12px;
    }

    .security-card p,
    .security-card .security-icon {
        display: none;
    }

    .security-card h6 {
        margin-bottom: 9px !important;
        font-size: .82rem;
    }
}

@media print {
    .app-main {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

@media (min-width: 992px) {
    .security-card {
        padding: 13px 14px;
    }

    .security-card .security-icon {
        float: left;
        margin: 0 10px 8px 0;
    }

    .security-card h6 {
        min-height: 34px;
        margin-bottom: 4px !important;
        padding-top: 6px;
        font-size: .84rem;
    }

    .security-card p {
        clear: both;
        margin-bottom: 10px !important;
        font-size: .75rem;
        line-height: 1.4;
    }

    .security-card .btn {
        min-height: 36px;
        padding: 7px 14px;
        font-size: .78rem;
    }
}

@media (min-width: 992px) {
    .sidebar-navigation .sidebar-section-label {
        margin-top: 15px;
        margin-bottom: 5px;
    }

    .sidebar-navigation .sidebar-section-label:first-child {
        margin-top: 10px;
    }

    .sidebar-nav {
        gap: 3px;
    }

    .sidebar-nav .nav-link {
        min-height: 42px;
        padding: 5px 9px;
    }

    .sidebar-nav .nav-link .heroicon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        padding: 7px;
    }

    .sidebar-nav .nav-link.active::before {
        top: 7px;
        bottom: 7px;
    }

    .security-card {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 2px 10px;
        align-items: center;
        padding: 10px 12px;
    }

    .security-card .security-icon {
        float: none;
        grid-row: 1 / span 2;
        width: 34px;
        height: 34px;
        margin: 0;
    }

    .security-card h6 {
        min-height: 0;
        margin: 0 !important;
        padding: 0;
        font-size: .8rem;
    }

    .security-card p {
        display: none;
    }

    .security-card .btn {
        justify-self: start;
        min-height: 30px;
        padding: 4px 10px;
        margin-top: 3px;
        font-size: .7rem;
        border-radius: 8px;
    }
}

@media (max-width: 991.98px) {
    .app-sidebar {
        --bs-offcanvas-width: min(88vw, 310px);
        width: var(--bs-offcanvas-width);
    }

    .sidebar-navigation .sidebar-section-label {
        margin-top: 14px;
        margin-bottom: 5px;
    }

    .sidebar-nav {
        gap: 3px;
    }

    .sidebar-nav .nav-link {
        min-height: 44px;
        padding: 5px 9px;
    }

    .sidebar-nav .nav-link .heroicon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        padding: 7px;
    }

    .security-card {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 2px 10px;
        align-items: center;
        padding: 10px 12px;
    }

    .security-card .security-icon {
        grid-row: 1 / span 2;
        width: 34px;
        height: 34px;
        margin: 0;
    }

    .security-card h6 {
        min-height: 0;
        margin: 0 !important;
        padding: 0;
        font-size: .8rem;
    }

    .security-card p {
        display: none;
    }

    .security-card .btn {
        justify-self: start;
        min-height: 30px;
        padding: 4px 10px;
        margin-top: 3px;
        font-size: .7rem;
        border-radius: 8px;
    }
}

/* Provider and cable TV logo selectors */
.provider-choice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.provider-choice-grid .provider-choice {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 104px;
    padding: 12px 10px 11px;
    flex-direction: column;
    gap: 9px;
    overflow: hidden;
    line-height: 1.2;
}

.provider-choice-grid .provider-choice::after {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 19px;
    height: 19px;
    content: '';
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 50%;
    transition: .18s ease;
}

.provider-choice-grid .provider-choice.active::after {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    box-shadow: inset 0 0 0 5px var(--sp-surface);
}

.provider-choice-logo-wrap {
    display: grid;
    width: 70px;
    height: 48px;
    place-items: center;
    padding: 5px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(24, 39, 75, .10);
    border-radius: 12px;
    box-shadow: 0 5px 14px rgba(20, 32, 54, .07);
}

.tv-logo-wrap {
    width: 86px;
}

.provider-choice-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.provider-choice:hover .provider-choice-logo-wrap,
.provider-choice.active .provider-choice-logo-wrap {
    border-color: rgba(var(--sp-primary-rgb), .32);
    box-shadow: 0 7px 18px rgba(var(--sp-primary-rgb), .12);
}

.provider-choice.active {
    transform: translateY(-1px);
}

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

    .provider-choice-grid .provider-choice {
        min-height: 98px;
    }
}

@media (max-width: 359.98px) {
    .provider-choice-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================================================== 
   Icon-led form design language
   ========================================================================== */
:root {
    --sp-form-border: #dfe3e1;
    --sp-form-shadow: 0 2px 5px rgba(28, 39, 33, .04);
    --sp-form-label-icon: #737b77;
}

[data-bs-theme="dark"] {
    --sp-form-border: #343b49;
    --sp-form-shadow: 0 2px 7px rgba(0, 0, 0, .16);
    --sp-form-label-icon: #9da7a2;
}

.form-design-language .form-label.icon-form-label {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin-bottom: .58rem;
    color: var(--sp-ink);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.form-design-language .form-label-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-right: .62rem;
    color: var(--sp-form-label-icon);
    stroke-width: .35;
}

.form-design-language .required-mark {
    flex: 0 0 auto;
    margin-left: .3rem;
    color: #dc3545;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.form-design-language .form-control,
.form-design-language .form-select,
.form-design-language .input-group > .form-control,
.form-design-language .input-group > .form-select {
    min-height: 52px;
    padding: .72rem .95rem;
    color: var(--sp-ink);
    background-color: var(--sp-surface);
    border: 1px solid var(--sp-form-border);
    border-radius: 11px;
    box-shadow: var(--sp-form-shadow);
    font-size: .98rem;
    line-height: 1.35;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form-design-language textarea.form-control {
    min-height: 112px;
    resize: vertical;
}

.form-design-language .form-control:hover,
.form-design-language .form-select:hover {
    border-color: rgba(var(--sp-primary-rgb), .38);
}

.form-design-language .form-control:focus,
.form-design-language .form-select:focus {
    color: var(--sp-ink);
    background-color: var(--sp-surface);
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 .22rem rgba(var(--sp-primary-rgb), .11);
}

.form-design-language .form-control::placeholder {
    color: #929a96;
    opacity: 1;
}

.form-design-language .input-group {
    flex-wrap: nowrap;
    border-radius: 11px;
}

.form-design-language .input-group-text {
    min-width: 48px;
    justify-content: center;
    padding: .72rem .8rem;
    color: var(--sp-muted);
    background: var(--sp-bg);
    border-color: var(--sp-form-border);
    box-shadow: var(--sp-form-shadow);
    font-weight: 700;
}

.form-design-language .input-group > :first-child {
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
}

.form-design-language .input-group > :last-child {
    border-top-right-radius: 11px;
    border-bottom-right-radius: 11px;
}

.form-design-language .form-text {
    margin-top: .48rem;
    color: var(--sp-muted);
}

.form-design-language .row.g-3 {
    --bs-gutter-x: 1.45rem;
    --bs-gutter-y: 1.25rem;
}

.form-design-language .mb-3 {
    margin-bottom: 1.18rem !important;
}

.form-design-language .mb-4 {
    margin-bottom: 1.5rem !important;
}

.form-design-language .form-check-input {
    border-color: #cfd5d2;
    box-shadow: none;
}

.form-design-language .form-check-input:focus {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--sp-primary-rgb), .11);
}

.password-control-wrap {
    position: relative;
}

.password-control-wrap .form-control {
    padding-right: 3.2rem;
}

.password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: .65rem;
    z-index: 4;
    display: inline-grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    color: var(--sp-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    transform: translateY(-50%);
    transition: color .18s ease, background-color .18s ease;
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible {
    color: var(--sp-primary);
    background: rgba(var(--sp-primary-rgb), .08);
}

.password-visibility-toggle .heroicon {
    width: 18px;
    height: 18px;
    font-size: 1rem;
}

.form-design-language .was-validated .form-control:invalid,
.form-design-language .form-control.is-invalid {
    border-color: var(--sp-danger);
    box-shadow: 0 0 0 .2rem rgba(229, 83, 83, .09);
}

.form-design-language .was-validated .form-control:valid,
.form-design-language .form-control.is-valid {
    border-color: var(--sp-primary);
}

.modal .form-design-language .modal-body {
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;
}

.modal .form-design-language .modal-footer {
    gap: .55rem;
}

@media (max-width: 575.98px) {
    .form-design-language .form-label.icon-form-label {
        font-size: .94rem;
    }

    .form-design-language .form-control,
    .form-design-language .form-select,
    .form-design-language .input-group > .form-control,
    .form-design-language .input-group > .form-select {
        min-height: 50px;
        font-size: .94rem;
    }

    .form-design-language .row.g-3 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
}


/* Tailwind Heroicons alignment */
.heroicon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: -0.075em;
    flex: 0 0 auto;
}
.icon-form-label .heroicon,
.form-label-icon {
    color: var(--sp-muted);
    font-size: 1rem;
}


/* Tailwind Heroicons — local inline SVG system */
.heroicon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    overflow: visible;
    color: inherit;
    vertical-align: -0.125em;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    pointer-events: none;
}
.heroicon [fill="currentColor"] { fill: currentColor; stroke: none; }
.heroicon [fill="none"] { fill: none; }
.heroicon.form-label-icon { width: 18px; height: 18px; }

/* ========================================================================== 
   Compact controls, DataTable toolbars and buttons
   Matches the clean, equal-height control language from the supplied samples.
   ========================================================================== */
:root {
    --sp-control-height: 44px;
    --sp-control-height-sm: 40px;
    --sp-button-height: 38px;
    --sp-button-height-sm: 34px;
    --sp-control-radius: 9px;
    --sp-button-radius: 8px;
    --sp-compact-border: #dfe3e6;
    --sp-compact-shadow: 0 1px 3px rgba(23, 32, 51, .045);
}

[data-bs-theme="dark"] {
    --sp-compact-border: #343b49;
    --sp-compact-shadow: 0 1px 4px rgba(0, 0, 0, .16);
}

/* All standard form controls */
.form-control,
.form-select {
    min-height: var(--sp-control-height);
    padding: .52rem .78rem;
    border-color: var(--sp-compact-border);
    border-radius: var(--sp-control-radius);
    box-shadow: var(--sp-compact-shadow);
    font-size: .9rem;
    line-height: 1.25;
}

.form-select {
    padding-right: 2.25rem;
    background-position: right .75rem center;
    background-size: 13px 10px;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--sp-primary-rgb), .55);
    box-shadow: 0 0 0 .18rem rgba(var(--sp-primary-rgb), .09);
}

/* Icon-led forms: smaller and more balanced than the previous 52px controls */
.form-design-language .form-label.icon-form-label {
    min-height: 20px;
    margin-bottom: .42rem;
    font-size: .86rem;
    line-height: 1.3;
}

.form-design-language .form-label-icon,
.icon-form-label .heroicon {
    width: 16px;
    height: 16px;
    margin-right: .48rem;
}

.form-design-language .required-mark {
    margin-left: .22rem;
    font-size: .9rem;
}

.form-design-language .form-control,
.form-design-language .form-select,
.form-design-language .input-group > .form-control,
.form-design-language .input-group > .form-select {
    min-height: var(--sp-control-height);
    padding: .52rem .78rem;
    border-radius: var(--sp-control-radius);
    font-size: .9rem;
    line-height: 1.25;
}

.form-design-language textarea.form-control {
    min-height: 92px;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.form-design-language .input-group {
    border-radius: var(--sp-control-radius);
}

.form-design-language .input-group-text {
    min-width: 42px;
    min-height: var(--sp-control-height);
    padding: .5rem .68rem;
    border-color: var(--sp-compact-border);
    border-radius: var(--sp-control-radius);
    box-shadow: var(--sp-compact-shadow);
    font-size: .88rem;
}

.form-design-language .input-group > :first-child {
    border-top-left-radius: var(--sp-control-radius);
    border-bottom-left-radius: var(--sp-control-radius);
}

.form-design-language .input-group > :last-child {
    border-top-right-radius: var(--sp-control-radius);
    border-bottom-right-radius: var(--sp-control-radius);
}

.form-design-language .form-text {
    margin-top: .35rem;
    font-size: .76rem;
}

.form-design-language .row.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: .9rem;
}

.form-design-language .mb-3 {
    margin-bottom: .9rem !important;
}

.form-design-language .mb-4 {
    margin-bottom: 1.15rem !important;
}

.password-control-wrap .form-control {
    padding-right: 2.8rem;
}

.password-visibility-toggle {
    right: .4rem;
    width: 34px;
    height: 34px;
    border-radius: 7px;
}

.password-visibility-toggle .heroicon {
    width: 17px;
    height: 17px;
}

/* Searchable Select2 controls stay exactly the same height as text inputs. */
.select2-container--slimpay .select2-selection--single {
    height: var(--sp-control-height);
    min-height: var(--sp-control-height);
    padding: .52rem 2.55rem .52rem .78rem;
    border-color: var(--sp-compact-border);
    border-radius: var(--sp-control-radius);
    box-shadow: var(--sp-compact-shadow);
}

.select2-container--slimpay .select2-selection__rendered {
    font-size: .9rem;
    line-height: 1.25;
}

.select2-container--slimpay .select2-selection__arrow {
    right: 12px;
    width: 16px;
    height: 16px;
}

.select2-container--slimpay .select2-selection__arrow b {
    width: 7px;
    height: 7px;
}

.select2-container--slimpay.select2-container--open .select2-selection--single,
.select2-container--slimpay .select2-selection--single:focus-visible {
    box-shadow: 0 0 0 .18rem rgba(var(--sp-primary-rgb), .09);
}

.select2-container--slimpay .select2-dropdown {
    border-radius: 10px;
}

.select2-search--dropdown {
    padding: 8px;
}

.select2-search__field {
    min-height: var(--sp-control-height-sm);
    padding: .48rem .72rem .48rem 2.15rem;
    background-position: .68rem 50%;
    border-radius: 8px;
    font-size: .88rem;
}

.select2-results__options {
    padding: 6px;
}

.select2-results__option {
    padding: .56rem .68rem;
    border-radius: 7px;
    font-size: .88rem;
}

/* DataTable and list filter toolbars */
.datatable-filter-row {
    align-items: stretch;
    --bs-gutter-x: .65rem;
    --bs-gutter-y: .65rem;
}

.datatable-filter-row > [class*="col-"] {
    display: flex;
    min-width: 0;
}

.datatable-filter-row .form-control,
.datatable-filter-row .form-select,
.datatable-filter-row .select2-container,
.table-controls .form-control,
.table-controls .form-select,
.table-controls .select2-container {
    width: 100% !important;
}

.datatable-filter-row .form-control,
.datatable-filter-row .form-select,
.datatable-filter-row .select2-container--slimpay .select2-selection--single,
.table-controls .form-control,
.table-controls .form-select,
.table-controls .select2-container--slimpay .select2-selection--single {
    height: var(--sp-control-height);
    min-height: var(--sp-control-height);
    color: var(--sp-ink);
    background-color: var(--sp-surface);
    border-color: var(--sp-compact-border);
    border-radius: var(--sp-control-radius);
    box-shadow: var(--sp-compact-shadow);
    font-size: .88rem;
}

.datatable-filter-search {
    position: relative;
    width: 100%;
}

.datatable-filter-search .datatable-filter-search-icon {
    position: absolute;
    top: 50%;
    left: .82rem;
    z-index: 4;
    width: 17px;
    height: 17px;
    color: var(--sp-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.datatable-filter-search .form-control {
    padding-left: 2.45rem;
}

.datatable-filter-search .form-control::placeholder {
    color: var(--sp-muted);
    opacity: .92;
}

/* Compact, clean buttons */
.btn {
    min-height: var(--sp-button-height);
    padding: .44rem .84rem;
    border-radius: var(--sp-button-radius);
    box-shadow: none;
    font-size: .84rem;
    font-weight: 650;
    line-height: 1.2;
}

.btn:hover {
    transform: none;
}

.btn-primary {
    box-shadow: 0 4px 10px rgba(var(--sp-primary-rgb), .14);
}

.btn-sm {
    min-height: var(--sp-button-height-sm);
    padding: .34rem .68rem;
    border-radius: 7px;
    font-size: .79rem;
}

.btn-lg {
    min-height: 42px;
    padding: .52rem .95rem;
    border-radius: 9px;
    font-size: .9rem;
}

.btn.p-0,
.btn.border-0.p-0 {
    min-height: auto;
}

.btn .heroicon {
    width: 16px;
    height: 16px;
}

.btn-sm .heroicon {
    width: 14px;
    height: 14px;
}

.header-actions {
    gap: .5rem !important;
}

.header-actions .btn {
    min-height: var(--sp-button-height);
    padding-right: .82rem;
    padding-left: .82rem;
}

.icon-btn {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 9px;
}

.topbar-search .form-control {
    min-height: var(--sp-control-height);
    border-radius: var(--sp-control-radius);
}

.modal-footer {
    gap: .45rem;
}

.modal-footer .btn {
    min-width: 84px;
}

@media (max-width: 575.98px) {
    :root {
        --sp-control-height: 42px;
        --sp-button-height: 37px;
    }

    .form-design-language .form-label.icon-form-label {
        font-size: .84rem;
    }

    .form-design-language .form-control,
    .form-design-language .form-select,
    .form-design-language .input-group > .form-control,
    .form-design-language .input-group > .form-select,
    .select2-container--slimpay .select2-selection--single {
        min-height: var(--sp-control-height);
        height: var(--sp-control-height);
        font-size: .88rem;
    }

    .datatable-filter-row > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
    }

    .header-actions .btn {
        flex: 0 0 auto;
        width: auto;
    }
}


/* =========================================================
   Unified card emphasis, padding, actions and Inter typography
   ========================================================= */
:root {
    --sp-card-padding: 22px;
    --sp-card-padding-mobile: 18px;
}

html,
body,
button,
input,
select,
textarea,
.tooltip,
.popover,
.dropdown-menu,
.modal,
.toast,
.token-code,
code,
kbd,
pre,
samp {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* One spacing token for every primary dashboard card. */
.wallet-card,
.summary-card,
.stat-card,
.service-card,
.biller-card,
.meter-card,
.link-card,
.dashboard-card.p-3,
.dashboard-card.p-4,
.dashboard-card.p-5,
.dashboard-card.p-lg-5,
.dashboard-card.p-md-4,
form.dashboard-card.p-4,
form.dashboard-card.p-lg-5 {
    padding: var(--sp-card-padding) !important;
}

.card-section-header {
    padding: var(--sp-card-padding) var(--sp-card-padding) 18px !important;
}

.dashboard-card > .px-3.px-md-4,
.dashboard-card > .px-4,
.dashboard-card > [class*="px-"][class*="pb-"],
.dashboard-card > .quick-action-grid {
    padding-right: var(--sp-card-padding) !important;
    padding-left: var(--sp-card-padding) !important;
}

.dashboard-card > .pb-3,
.dashboard-card > .pb-4,
.dashboard-card > [class*="px-"][class*="pb-"] {
    padding-bottom: var(--sp-card-padding) !important;
}

.dashboard-card > .border-top.px-4,
.dashboard-card > .border-top[class*="px-"] {
    padding-right: var(--sp-card-padding) !important;
    padding-left: var(--sp-card-padding) !important;
}

/* Summary and token-preview cards share the Available Balance treatment. */
.summary-card {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 86% 16%, rgba(255,255,255,.20) 0 2px, transparent 3px),
        radial-gradient(circle at 92% 22%, rgba(255,255,255,.10) 0 72px, transparent 73px),
        linear-gradient(140deg, #1a1917 0%, var(--sp-charcoal) 55%, var(--sp-primary-dark) 130%);
    border: 0;
    box-shadow: 0 20px 46px rgba(23, 32, 51, .23);
}

.summary-card::before {
    position: absolute;
    top: -82px;
    right: -62px;
    width: 235px;
    height: 235px;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255,255,255,.035), 0 0 0 58px rgba(255,255,255,.025);
}

.summary-card > * {
    position: relative;
    z-index: 1;
}

.summary-card .eyebrow,
.summary-card .label,
.summary-card .text-body-secondary,
.summary-card .small.text-body-secondary {
    color: rgba(255,255,255,.68) !important;
}

.summary-card .summary-row {
    border-bottom-color: rgba(255,255,255,.14);
}

.summary-card .summary-total,
.summary-card strong,
.summary-card h1,
.summary-card h2,
.summary-card h3,
.summary-card h4,
.summary-card h5,
.summary-card h6 {
    color: #fff;
}

.summary-card .stat-icon {
    color: #fff !important;
    background: rgba(255,255,255,.13) !important;
    border: 1px solid rgba(255,255,255,.12);
}

.summary-card .btn-primary,
.summary-card .btn-soft-primary {
    color: #17351f;
    background: #fff;
    border-color: rgba(255,255,255,.92);
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

.summary-card .btn-primary:hover,
.summary-card .btn-primary:focus,
.summary-card .btn-soft-primary:hover,
.summary-card .btn-soft-primary:focus {
    color: #fff;
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.28);
}

/* The generated token is also presented as a clear feature card. */
.token-code {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(140deg, #1a1917 0%, var(--sp-charcoal) 60%, var(--sp-primary-dark) 130%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 30px rgba(23,32,51,.20);
}

/* Compact invoice actions on the Overview recent-transactions table. */
.transaction-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.table-action-btn {
    display: inline-grid;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    place-items: center;
    color: var(--sp-muted);
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(33,40,66,.05);
}

.table-action-btn:hover,
.table-action-btn:focus {
    color: #fff;
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    box-shadow: 0 6px 14px rgba(var(--sp-primary-rgb),.18);
}

.table-action-btn .heroicon {
    width: 15px;
    height: 15px;
}

@media (max-width: 767.98px) {
    .wallet-card,
    .summary-card,
    .stat-card,
    .service-card,
    .biller-card,
    .meter-card,
    .link-card,
    .dashboard-card.p-3,
    .dashboard-card.p-4,
    .dashboard-card.p-5,
    .dashboard-card.p-lg-5,
    .dashboard-card.p-md-4,
    form.dashboard-card.p-4,
    form.dashboard-card.p-lg-5 {
        padding: var(--sp-card-padding-mobile) !important;
    }

    .card-section-header {
        padding: var(--sp-card-padding-mobile) var(--sp-card-padding-mobile) 14px !important;
    }

    .dashboard-card > .px-3.px-md-4,
    .dashboard-card > .px-4,
    .dashboard-card > [class*="px-"][class*="pb-"],
    .dashboard-card > .quick-action-grid,
    .dashboard-card > .border-top.px-4,
    .dashboard-card > .border-top[class*="px-"] {
        padding-right: var(--sp-card-padding-mobile) !important;
        padding-left: var(--sp-card-padding-mobile) !important;
    }

    .dashboard-card > .pb-3,
    .dashboard-card > .pb-4,
    .dashboard-card > [class*="px-"][class*="pb-"] {
        padding-bottom: var(--sp-card-padding-mobile) !important;
    }

    .mobile-card-table td[data-label="Action"] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* =========================================================
   Transaction date, payment-link reports and QR invoices
   ========================================================= */
input[type="date"].form-control {
    color-scheme: light;
}

[data-bs-theme="dark"] input[type="date"].form-control {
    color-scheme: dark;
}

.recent-transactions-header > div:first-child {
    min-width: 0;
}

.recent-transactions-header .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.recent-transactions-header .btn .heroicon {
    width: 14px;
    height: 14px;
}

.transaction-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(var(--sp-primary-rgb), .08), rgba(var(--sp-primary-rgb), .02));
    border: 1px solid rgba(var(--sp-primary-rgb), .15);
    border-radius: 16px;
}

.transaction-detail-main {
    min-width: 0;
}

.transaction-detail-qr {
    flex: 0 0 112px;
    padding: 9px;
    color: var(--sp-muted);
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(33, 40, 66, .08);
    text-align: center;
}

.transaction-detail-qr svg,
.link-report-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.transaction-detail-qr small,
.link-report-qr small {
    display: block;
    margin-top: 7px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.link-report-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 24px;
    color: #fff;
    background: linear-gradient(140deg, #1a1917 0%, var(--sp-charcoal) 58%, var(--sp-primary-dark) 130%);
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(23, 53, 31, .18);
}

.link-report-hero::before,
.link-report-hero::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}

.link-report-hero::before {
    top: -90px;
    right: 80px;
    width: 180px;
    height: 180px;
}

.link-report-hero::after {
    right: -55px;
    bottom: -80px;
    width: 145px;
    height: 145px;
}

.link-report-copy,
.link-report-qr {
    position: relative;
    z-index: 1;
}

.link-report-copy {
    min-width: 0;
}

.link-report-copy .eyebrow,
.link-report-copy .text-body-secondary {
    color: rgba(255, 255, 255, .72) !important;
}

.link-report-copy .btn-soft-primary {
    color: #17351f;
    background: #fff;
    border-color: #fff;
}

.link-report-qr {
    flex: 0 0 132px;
    padding: 10px;
    color: #5d6f63;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
}

.link-report-metrics .report-metric {
    height: 100%;
    padding: 16px;
    background: var(--sp-surface-soft, rgba(var(--sp-primary-rgb), .04));
    border: 1px solid var(--sp-border);
    border-radius: 13px;
}

.report-metric span {
    display: block;
    margin-bottom: 7px;
    color: var(--sp-muted);
    font-size: .72rem;
    font-weight: 650;
}

.report-metric strong {
    display: block;
    color: var(--sp-ink);
    font-size: 1.02rem;
    line-height: 1.2;
}

.link-report-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    margin-top: 18px;
    border: 1px solid var(--sp-border);
    border-radius: 14px;
}

.link-report-details > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--sp-border);
}

.link-report-details > div:nth-child(odd) {
    border-right: 1px solid var(--sp-border);
}

.link-report-details > div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.link-report-details span {
    color: var(--sp-muted);
    font-size: .76rem;
}

.link-report-details strong {
    color: var(--sp-ink);
    font-size: .78rem;
    text-align: right;
}

.report-collection-table thead th {
    color: var(--sp-muted);
    background: rgba(var(--sp-primary-rgb), .035);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.report-collection-table td,
.report-collection-table th {
    padding: .75rem .8rem;
}

@media (max-width: 767.98px) {
    .recent-transactions-header {
        align-items: center !important;
    }

    .transaction-detail-hero,
    .link-report-hero {
        align-items: flex-start;
    }

    .transaction-detail-qr {
        flex-basis: 96px;
    }

    .link-report-qr {
        flex-basis: 108px;
    }

    .link-report-details {
        grid-template-columns: 1fr;
    }

    .link-report-details > div,
    .link-report-details > div:nth-child(odd),
    .link-report-details > div:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--sp-border);
    }

    .link-report-details > div:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 480px) {
    .transaction-detail-hero,
    .link-report-hero {
        display: block;
    }

    .transaction-detail-qr,
    .link-report-qr {
        width: 112px;
        margin-top: 18px;
    }
}

/* --------------------------------------------------------------------------
   OPay-inspired payment authentication screen
   -------------------------------------------------------------------------- */
body[data-page="payment-auth"] {
    min-height: 100vh;
    overflow-x: hidden;
    color: #162319;
    background:
        radial-gradient(circle at 10% 5%, rgba(34, 197, 94, .14), transparent 34%),
        radial-gradient(circle at 94% 92%, rgba(21, 128, 61, .11), transparent 35%),
        #f4f8f5;
}

.payment-auth-topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    padding: 12px clamp(16px, 4vw, 48px);
    border-bottom: 1px solid rgba(22, 101, 52, .09);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(18px);
}

.payment-auth-topbar .brand {
    color: #17351f;
    text-decoration: none;
}

.auth-back-button,
.auth-close-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    color: #293c2e;
    border: 1px solid #dfe8e1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(23, 53, 31, .05);
}

.auth-back-button:hover,
.auth-close-button:hover {
    color: var(--sp-primary);
    border-color: rgba(22, 163, 74, .35);
    background: #f0fbf3;
}

.payment-auth-page {
    display: grid;
    min-height: calc(100vh - 70px);
    padding: 34px 18px 50px;
    place-items: start center;
}

.payment-auth-card {
    width: min(100%, 492px);
    overflow: hidden;
    border: 1px solid rgba(22, 101, 52, .12);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(23, 53, 31, .12);
}

.auth-card-main {
    padding: 30px 32px 28px;
}

.auth-secure-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.auth-secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    color: #18733a;
    border: 1px solid #cdebd5;
    border-radius: 999px;
    background: #effbf2;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
}

.auth-request-reference {
    color: #849087;
    font-size: 10px;
    font-weight: 650;
}

.auth-payment-hero {
    text-align: center;
}

.auth-provider-logo {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e2e9e4;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(23, 53, 31, .09);
}

.auth-provider-logo img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.auth-provider-logo .heroicon {
    width: 29px;
    height: 29px;
    color: var(--sp-primary);
}

.auth-payment-label {
    margin-bottom: 7px;
    color: #7c8980;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-payment-amount {
    margin: 0;
    color: #112418;
    font-size: clamp(34px, 8vw, 43px);
    font-weight: 800;
    letter-spacing: -1.8px;
}

.auth-payment-title {
    margin: 7px 0 0;
    color: #68776d;
    font-size: 13px;
}

.auth-wallet-source {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 14px;
    padding: 14px 15px;
    border: 1px solid #dfe8e1;
    border-radius: 16px;
    background: #f9fbf9;
}

.auth-wallet-icon {
    display: grid;
    flex: 0 0 40px;
    height: 40px;
    place-items: center;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(145deg, #146c35, #20a54e);
}

.auth-wallet-icon .heroicon {
    width: 20px;
    height: 20px;
}

.auth-wallet-source strong,
.auth-wallet-source small {
    display: block;
}

.auth-wallet-source strong {
    margin-bottom: 2px;
    font-size: 13px;
}

.auth-wallet-source small {
    color: #7d8a81;
    font-size: 11px;
}

.auth-wallet-check {
    display: grid;
    width: 24px;
    height: 24px;
    margin-left: auto;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: var(--sp-primary);
}

.auth-wallet-check .heroicon {
    width: 15px;
    height: 15px;
}

.auth-detail-list {
    overflow: hidden;
    border: 1px solid #e6ece7;
    border-radius: 16px;
}

.auth-detail-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 11px 14px;
    border-bottom: 1px solid #edf1ee;
    font-size: 11.5px;
}

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

.auth-detail-row span {
    color: #7d8a81;
}

.auth-detail-row strong {
    max-width: 62%;
    color: #26362a;
    text-align: right;
    overflow-wrap: anywhere;
}

.auth-pin-panel {
    margin-top: 24px;
    padding-top: 23px;
    border-top: 1px solid #edf1ee;
    text-align: center;
}

.auth-pin-panel h2 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 780;
}

.auth-pin-panel > p {
    margin-bottom: 18px;
    color: #7a887f;
    font-size: 11.5px;
}

.auth-pin-cells {
    display: flex;
    justify-content: center;
    gap: 12px;
    cursor: text;
}

.auth-pin-cell {
    display: grid;
    width: 48px;
    height: 50px;
    place-items: center;
    color: #17351f;
    border: 1.5px solid #d8e2da;
    border-radius: 13px;
    background: #fbfcfb;
    font-size: 29px;
    font-weight: 800;
    line-height: 1;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-pin-cell.active {
    border-color: #55b971;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .11);
}

.auth-pin-cell.filled {
    border-color: #a8d8b4;
    background: #f0faf3;
}

.auth-pin-cell.is-invalid {
    border-color: #ef9a9a;
    background: #fff7f7;
}

.auth-pin-native {
    position: fixed;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.auth-pin-error {
    min-height: 18px;
    margin: 9px 0 0;
    color: #cf3f3f;
    font-size: 10.5px;
    font-weight: 650;
    opacity: 0;
}

.auth-pin-error.is-visible {
    opacity: 1;
}

.auth-keypad {
    display: grid;
    max-width: 310px;
    margin: 6px auto 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px 12px;
}

.auth-key {
    display: grid;
    min-height: 49px;
    padding: 0;
    place-items: center;
    color: #17271c;
    border: 0;
    border-radius: 14px;
    background: transparent;
    font-size: 20px;
    font-weight: 650;
    transition: background .15s ease, transform .15s ease;
}

.auth-key:hover {
    background: #f0f7f2;
}

.auth-key:active {
    transform: scale(.94);
    background: #e4f3e8;
}

.auth-key .heroicon {
    width: 23px;
    height: 23px;
}

.auth-key.biometric {
    color: var(--sp-primary);
}

.auth-forgot-button {
    margin-top: 11px;
    padding: 4px 8px;
    color: #13843c;
    border: 0;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
}

.auth-demo-note {
    margin-top: 12px;
    padding: 9px 12px;
    color: #5f7164;
    border: 1px dashed #b9d7c1;
    border-radius: 12px;
    background: #f5fbf6;
    font-size: 10px;
}

.auth-demo-note strong {
    color: #126f32;
    letter-spacing: .13em;
}

.auth-processing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    color: #147c38;
    font-size: 11px;
    font-weight: 700;
}

.auth-content-muted {
    pointer-events: none;
    opacity: .4;
}

.auth-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 18px;
    color: #748178;
    border-top: 1px solid #edf1ee;
    background: #fafcfb;
    font-size: 10px;
}

.auth-card-footer .heroicon {
    width: 14px;
    height: 14px;
    color: #388a50;
}

.auth-success-card,
.auth-unavailable-card {
    padding: 44px 34px 36px;
    text-align: center;
}

.auth-success-icon,
.auth-unavailable-icon {
    display: grid;
    width: 82px;
    height: 82px;
    margin: 0 auto 22px;
    place-items: center;
    border-radius: 26px;
}

.auth-success-icon {
    color: #fff;
    background: linear-gradient(145deg, #128238, #24b354);
    box-shadow: 0 18px 40px rgba(22, 163, 74, .24);
}

.auth-unavailable-icon {
    color: #208a43;
    border: 1px solid #cde7d3;
    background: #effaf2;
}

.auth-success-icon .heroicon,
.auth-unavailable-icon .heroicon {
    width: 40px;
    height: 40px;
}

.auth-success-card h1,
.auth-unavailable-card h1 {
    margin-bottom: 7px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.45px;
}

.auth-success-amount {
    margin: 20px 0 4px;
    color: #123d23;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.auth-success-message,
.auth-unavailable-card p {
    color: #758178;
    font-size: 12px;
    line-height: 1.65;
}

.auth-success-meta {
    margin: 22px 0;
    padding: 14px 15px;
    border: 1px solid #e2e9e4;
    border-radius: 15px;
    background: #f9fbf9;
    text-align: left;
}

.auth-success-meta .auth-detail-row {
    padding-right: 0;
    padding-left: 0;
}

.auth-success-actions {
    display: grid;
    gap: 9px;
}

.auth-shake {
    animation: auth-shake .32s ease;
}

@keyframes auth-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (max-width: 575.98px) {
    .payment-auth-topbar {
        min-height: 62px;
        padding: 10px 14px;
    }

    .payment-auth-topbar .brand span:last-child {
        display: none;
    }

    .payment-auth-page {
        min-height: calc(100vh - 62px);
        padding: 0;
        background: #fff;
    }

    .payment-auth-card {
        min-height: calc(100vh - 62px);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-card-main {
        padding: 24px 20px 20px;
    }

    .auth-secure-row {
        margin-bottom: 20px;
    }

    .auth-pin-cell {
        width: 45px;
        height: 47px;
    }

    .auth-keypad {
        max-width: 330px;
    }

    .auth-key {
        min-height: 48px;
    }
}

html[data-bs-theme="dark"] body[data-page="payment-auth"] {
    color: #eef8f0;
    background: #0c1510;
}

[data-bs-theme="dark"] .payment-auth-topbar,
[data-bs-theme="dark"] .payment-auth-card {
    border-color: #26362b;
    background: #142018;
}

[data-bs-theme="dark"] .auth-payment-amount,
[data-bs-theme="dark"] .auth-pin-panel h2,
[data-bs-theme="dark"] .auth-detail-row strong,
[data-bs-theme="dark"] .auth-key {
    color: #f2faf4;
}

[data-bs-theme="dark"] .auth-wallet-source,
[data-bs-theme="dark"] .auth-detail-list,
[data-bs-theme="dark"] .auth-pin-cell,
[data-bs-theme="dark"] .auth-success-meta {
    border-color: #2b3c30;
    background: #17251b;
}



/* --------------------------------------------------------------------------
   Reusable payment authentication modal
   -------------------------------------------------------------------------- */
.payment-auth-modal {
    --bs-modal-zindex: 1090;
    background: rgba(7, 25, 13, .18);
    backdrop-filter: blur(7px);
}

.payment-auth-modal-dialog {
    max-width: 520px;
}

.payment-auth-modal-content {
    overflow: hidden;
    border: 1px solid rgba(22, 101, 52, .12);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 34px 90px rgba(9, 42, 20, .24);
}

.payment-auth-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid #edf1ee;
    background: linear-gradient(135deg, #fbfefc, #f2faf4);
}

.payment-auth-modal-title {
    margin: 7px 0 0;
    color: #17271c;
    font-size: 16px;
    font-weight: 800;
}

.payment-auth-modal .auth-card-main {
    padding: 22px 26px 20px;
}

.payment-auth-modal .auth-modal-reference-row {
    margin-bottom: 17px;
}

.payment-auth-modal .auth-provider-logo {
    width: 56px;
    height: 56px;
    margin-bottom: 11px;
    border-radius: 17px;
}

.payment-auth-modal .auth-provider-logo img {
    width: 39px;
    height: 39px;
}

.payment-auth-modal .auth-payment-amount {
    font-size: clamp(31px, 7vw, 39px);
}

.payment-auth-modal .auth-wallet-source {
    margin: 19px 0 12px;
    padding: 12px 14px;
}

.payment-auth-modal .auth-detail-row {
    padding: 9px 13px;
}

.payment-auth-modal .auth-pin-panel {
    margin-top: 18px;
    padding-top: 18px;
}

.payment-auth-modal .auth-pin-panel > p {
    margin-bottom: 14px;
}

.payment-auth-modal .auth-pin-cell {
    width: 45px;
    height: 46px;
    border-radius: 12px;
}

.payment-auth-modal .auth-keypad {
    max-width: 290px;
    gap: 4px 11px;
}

.payment-auth-modal .auth-key {
    min-height: 42px;
}

.payment-auth-modal .auth-success-card {
    padding: 34px 28px 30px;
}

.payment-auth-modal .auth-success-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    border-radius: 22px;
}

.payment-auth-modal .auth-success-icon .heroicon {
    width: 34px;
    height: 34px;
}

.payment-auth-modal .auth-success-card h2 {
    margin-bottom: 7px;
    font-size: 22px;
    font-weight: 800;
}

.payment-auth-modal .auth-success-actions .btn {
    min-height: 40px;
}

@media (max-width: 575.98px) {
    .payment-auth-modal-dialog {
        align-items: flex-end;
        min-height: 100%;
        margin: 0;
    }

    .payment-auth-modal-content {
        max-height: 94vh;
        border: 0;
        border-radius: 24px 24px 0 0;
    }

    .payment-auth-modal-header {
        padding: 15px 18px;
    }

    .payment-auth-modal .auth-card-main {
        padding: 18px 18px 16px;
    }

    .payment-auth-modal .auth-secure-row {
        margin-bottom: 14px;
    }

    .payment-auth-modal .auth-wallet-source {
        margin-top: 15px;
    }

    .payment-auth-modal .auth-pin-panel {
        margin-top: 15px;
        padding-top: 15px;
    }

    .payment-auth-modal .auth-key {
        min-height: 39px;
    }
}

[data-bs-theme="dark"] .payment-auth-modal-content {
    border-color: #26362b;
    background: #142018;
}

[data-bs-theme="dark"] .payment-auth-modal-header {
    border-color: #26362b;
    background: linear-gradient(135deg, #17251b, #132018);
}

[data-bs-theme="dark"] .payment-auth-modal-title {
    color: #f2faf4;
}

/* --------------------------------------------------------------------------
   Modern transaction date picker
   -------------------------------------------------------------------------- */
.modern-datepicker-shell {
    position: relative;
    width: 100%;
}

.modern-datepicker-input {
    padding-right: 34px !important;
    padding-left: 40px !important;
    cursor: pointer;
    caret-color: transparent;
}

.modern-datepicker-leading {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 13px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: #718096;
    pointer-events: none;
    transform: translateY(-50%);
}

.modern-datepicker-leading .heroicon {
    width: 17px;
    height: 17px;
}

.modern-datepicker-clear {
    position: absolute;
    z-index: 4;
    top: 50%;
    right: 9px;
    display: grid;
    width: 24px;
    height: 24px;
    padding: 0;
    place-items: center;
    color: #7a887f;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 19px;
    line-height: 1;
    transform: translateY(-50%);
}

.modern-datepicker-clear:hover {
    color: #185d31;
    background: #eaf7ed;
}

.modern-datepicker-popover {
    position: fixed;
    z-index: 1110;
    padding: 14px;
    border: 1px solid #dfe8e1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(20, 54, 29, .2);
    animation: datepicker-enter .16s ease-out;
}

.modern-datepicker-popover[hidden] {
    display: none !important;
}

@keyframes datepicker-enter {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modern-datepicker-header {
    display: grid;
    align-items: center;
    margin-bottom: 12px;
    grid-template-columns: 36px 1fr 36px;
    gap: 8px;
}

.modern-datepicker-header strong {
    color: #243329;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
}

.modern-datepicker-nav {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: #58675c;
    border: 1px solid #e1e8e3;
    border-radius: 10px;
    background: #fff;
}

.modern-datepicker-nav:hover {
    color: var(--sp-primary);
    border-color: #b8dfc1;
    background: #f0faf2;
}

.modern-datepicker-nav .heroicon {
    width: 17px;
    height: 17px;
}

.modern-datepicker-weekdays,
.modern-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.modern-datepicker-weekdays {
    margin-bottom: 5px;
}

.modern-datepicker-weekdays span {
    padding: 4px 0;
    color: #99a39c;
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.modern-datepicker-day {
    position: relative;
    display: grid;
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    place-items: center;
    color: #33453a;
    border: 0;
    border-radius: 11px;
    background: transparent;
    font-size: 11px;
    font-weight: 650;
}

.modern-datepicker-day:hover {
    color: #126f32;
    background: #edf9f0;
}

.modern-datepicker-day.is-outside {
    color: #bdc5bf;
}

.modern-datepicker-day.is-today::after {
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sp-primary);
    content: '';
}

.modern-datepicker-day.is-selected {
    color: #fff;
    background: linear-gradient(145deg, #16813c, #22a951);
    box-shadow: 0 7px 16px rgba(22, 163, 74, .23);
}

.modern-datepicker-day.is-selected::after {
    background: #fff;
}

.modern-datepicker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #edf1ee;
}

.modern-datepicker-footer .btn {
    min-height: 32px;
    padding: 5px 12px;
    border-radius: 9px;
    font-size: 10px;
}

[data-bs-theme="dark"] .modern-datepicker-popover {
    color: #eef8f0;
    border-color: #2c3d31;
    background: #142018;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

[data-bs-theme="dark"] .modern-datepicker-header strong,
[data-bs-theme="dark"] .modern-datepicker-day {
    color: #edf7ef;
}

[data-bs-theme="dark"] .modern-datepicker-nav {
    color: #c3d0c6;
    border-color: #314536;
    background: #18271c;
}

[data-bs-theme="dark"] .modern-datepicker-day.is-outside {
    color: #637067;
}

[data-bs-theme="dark"] .modern-datepicker-day:hover {
    background: #203526;
}

[data-bs-theme="dark"] .modern-datepicker-footer {
    border-color: #293b2f;
}

/* --------------------------------------------------------------------------
   Recurring-payment beneficiaries
   -------------------------------------------------------------------------- */
.saved-beneficiary-block {
    padding: 14px;
    border: 1px solid #dbe7df;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfefc 0%, #f5fbf7 100%);
}

.saved-beneficiary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.saved-beneficiary-heading .form-label {
    margin-bottom: 0;
}

.saved-beneficiary-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 4px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #66756c;
    font-size: .75rem;
    font-weight: 700;
}

.saved-beneficiary-remove:hover {
    background: #eaf5ed;
    color: #166534;
}

.saved-beneficiary-remove .heroicon {
    width: 15px;
    height: 15px;
}

.saved-beneficiary-save {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #d8e7dc;
    cursor: pointer;
}

.saved-beneficiary-save .form-check-input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.saved-beneficiary-save span {
    display: grid;
    gap: 1px;
    line-height: 1.25;
}

.saved-beneficiary-save strong {
    color: #23342a;
    font-size: .78rem;
}

.saved-beneficiary-save small {
    color: #77847c;
    font-size: .7rem;
}

[data-bs-theme="dark"] .saved-beneficiary-block {
    border-color: #2c4133;
    background: linear-gradient(180deg, #18251d 0%, #152019 100%);
}

[data-bs-theme="dark"] .saved-beneficiary-save {
    border-color: #304537;
}

[data-bs-theme="dark"] .saved-beneficiary-save strong {
    color: #e7f1e9;
}

[data-bs-theme="dark"] .saved-beneficiary-remove {
    color: #aab8af;
}

[data-bs-theme="dark"] .saved-beneficiary-remove:hover {
    background: #203528;
    color: #9be8ae;
}

/* --------------------------------------------------------------------------
   Data plan categories and search
   -------------------------------------------------------------------------- */
.data-plan-filter-panel {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #dce8df;
    border-radius: 15px;
    background: #f8fcf9;
}

.data-plan-filter-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.data-plan-filter-title {
    display: block;
    color: #1f3426;
    font-size: .82rem;
    font-weight: 800;
}

.data-plan-filter-copy {
    display: block;
    margin-top: 2px;
    color: #78867e;
    font-size: .71rem;
}

.data-plan-result-count {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: #e5f5e9;
    color: #16723a;
    font-size: .7rem;
    font-weight: 800;
}

.data-plan-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 11px;
}

.data-plan-category {
    min-height: 32px;
    padding: 5px 11px;
    border: 1px solid #d6e4da;
    border-radius: 999px;
    background: #fff;
    color: #536159;
    font-size: .72rem;
    font-weight: 700;
    transition: .18s ease;
}

.data-plan-category:hover,
.data-plan-category.active {
    border-color: #198754;
    background: #198754;
    color: #fff;
    box-shadow: 0 6px 14px rgba(25, 135, 84, .18);
}

.data-plan-search-wrap {
    position: relative;
}

.data-plan-search-wrap .data-plan-search {
    height: 40px !important;
    min-height: 40px !important;
    padding-left: 38px !important;
    padding-right: 34px !important;
    border-radius: 11px !important;
    background: #fff;
    font-size: .78rem;
}

.data-plan-search-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    width: 17px;
    height: 17px;
    color: #6d7b73;
    transform: translateY(-50%);
    pointer-events: none;
}

.data-plan-search-clear {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 9px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #76827b;
    font-size: 1.1rem;
    line-height: 1;
    transform: translateY(-50%);
}

.data-plan-search-clear:hover {
    background: #eef5f0;
    color: #198754;
}

.data-plan-card {
    position: relative;
    display: flex;
    min-height: 182px;
    flex-direction: column;
    align-items: stretch;
    padding: 15px;
    border-radius: 15px;
}

.data-plan-card-top,
.data-plan-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.data-plan-category-badge,
.data-plan-featured-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 800;
}

.data-plan-category-badge {
    background: #eef6f0;
    color: #39724b;
}

.data-plan-featured-badge {
    background: #fff2cc;
    color: #8a6300;
}

.data-plan-size {
    margin-top: 15px;
    color: #162d1e;
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -.03em;
}

.data-plan-validity {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    color: #54645a;
    font-size: .75rem;
    font-weight: 700;
}

.data-plan-validity .heroicon {
    width: 15px;
    height: 15px;
}

.data-plan-note {
    margin-top: 8px;
    color: #7c8981;
    font-size: .7rem;
}

.data-plan-card-bottom {
    margin-top: auto;
    padding-top: 13px;
}

.data-plan-card-bottom strong {
    color: #166534;
    font-size: .95rem;
}

.data-plan-select-mark {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 50%;
    background: #e7f5ea;
    color: #198754;
    opacity: .6;
}

.data-plan-select-mark .heroicon {
    width: 14px;
    height: 14px;
}

.data-plan-card.active .data-plan-select-mark {
    background: #198754;
    color: #fff;
    opacity: 1;
}

.data-plan-empty {
    display: grid;
    min-height: 160px;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 24px;
    border: 1px dashed #cfded3;
    border-radius: 15px;
    color: #748178;
    text-align: center;
}

.data-plan-empty .heroicon {
    width: 28px;
    height: 28px;
    color: #4d8f89;
}

.data-plan-empty strong {
    color: #2b3b3a;
}

.data-plan-empty span:not(.heroicon) {
    font-size: .75rem;
}

[data-bs-theme="dark"] .data-plan-filter-panel {
    border-color: #2d4240;
    background: #1a1917;
}

[data-bs-theme="dark"] .data-plan-filter-title,
[data-bs-theme="dark"] .data-plan-size,
[data-bs-theme="dark"] .data-plan-empty strong {
    color: #e6f0e8;
}

[data-bs-theme="dark"] .data-plan-category {
    border-color: #34493a;
    background: #1c2a21;
    color: #b7c4bb;
}

[data-bs-theme="dark"] .data-plan-search-wrap .data-plan-search {
    background: #1a2820;
}

[data-bs-theme="dark"] .data-plan-category-badge {
    background: #20382a;
    color: #a4ddb2;
}

/* --------------------------------------------------------------------------
   Meter and cable number verification
   -------------------------------------------------------------------------- */
.meter-verification-input-group .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.meter-verify-button {
    display: inline-flex;
    min-width: 104px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    font-size: .76rem;
    font-weight: 800;
}

.meter-verify-button .heroicon {
    width: 17px;
    height: 17px;
}

.meter-verification-feedback {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 8px;
    color: #6f7c74;
    font-size: .7rem;
    line-height: 1.45;
}

.meter-verification-feedback .heroicon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.meter-verification-feedback.is-loading {
    color: #7d6500;
}

.meter-verification-feedback.is-loading .heroicon {
    animation: meter-verification-spin 1s linear infinite;
}

.meter-verification-feedback.is-success {
    color: #18713b;
    font-weight: 650;
}

.meter-verification-feedback.is-danger {
    color: #b42318;
    font-weight: 650;
}

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

.meter-verification-card {
    margin-top: 11px;
    overflow: hidden;
    border: 1px solid #bfe1c8;
    border-radius: 14px;
    background: linear-gradient(180deg, #f1fbf4 0%, #fbfefc 100%);
    box-shadow: 0 9px 24px rgba(22, 101, 52, .08);
}

.meter-verification-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #d8ebdd;
}

.meter-verification-success-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #198754;
    color: #fff;
}

.meter-verification-success-icon .heroicon {
    width: 18px;
    height: 18px;
}

.meter-verification-card-head strong {
    display: block;
    color: #14532d;
    font-size: .82rem;
}

.meter-verification-card-head small {
    display: block;
    margin-top: 1px;
    color: #718078;
    font-size: .68rem;
}

.meter-verification-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 4px 14px 10px;
}

.meter-verification-details > div {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 9px 8px 7px 0;
}

.meter-verification-details span {
    color: #7c8981;
    font-size: .62rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.meter-verification-details strong {
    overflow-wrap: anywhere;
    color: #23372a;
    font-size: .75rem;
}

.meter-verification-details .meter-account-active {
    color: #16813e;
}

[data-bs-theme="dark"] .meter-verification-card {
    border-color: #31523b;
    background: linear-gradient(180deg, #17291d 0%, #142119 100%);
}

[data-bs-theme="dark"] .meter-verification-card-head {
    border-color: #2e4735;
}

[data-bs-theme="dark"] .meter-verification-card-head strong,
[data-bs-theme="dark"] .meter-verification-details strong {
    color: #e5f1e8;
}

@media (max-width: 575.98px) {
    .saved-beneficiary-block,
    .data-plan-filter-panel {
        padding: 12px;
        border-radius: 12px;
    }

    .data-plan-filter-top {
        align-items: center;
    }

    .data-plan-filter-copy {
        display: none;
    }

    .data-plan-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

    .data-plan-categories::-webkit-scrollbar {
        display: none;
    }

    .data-plan-category {
        flex: 0 0 auto;
    }

    .data-plan-card {
        min-height: 164px;
    }

    .meter-verify-button {
        min-width: 88px;
        padding-inline: 10px;
    }

    .meter-verification-details {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Compact authentication modal and attached beneficiary-save controls
   -------------------------------------------------------------------------- */
.payment-auth-modal-dialog {
    max-width: 430px;
}

.payment-auth-modal-content {
    max-height: min(92vh, 760px);
    border-radius: 20px;
}

.payment-auth-modal-header {
    padding: 13px 17px;
}

.payment-auth-modal-header .auth-secure-badge {
    padding: 5px 8px;
    font-size: 9.5px;
}

.payment-auth-modal-title {
    margin-top: 4px;
    font-size: 14px;
}

.payment-auth-modal .auth-card-main {
    padding: 15px 19px 13px;
}

.payment-auth-modal .auth-modal-reference-row {
    margin-bottom: 10px;
}

.payment-auth-modal .auth-modal-reference-row .small {
    font-size: 9.5px;
}

.payment-auth-modal .auth-provider-logo {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 13px;
}

.payment-auth-modal .auth-provider-logo img {
    width: 31px;
    height: 31px;
}

.payment-auth-modal .auth-provider-logo .heroicon {
    width: 23px;
    height: 23px;
}

.payment-auth-modal .auth-payment-label {
    margin-bottom: 3px;
    font-size: 9px;
}

.payment-auth-modal .auth-payment-amount {
    font-size: clamp(27px, 6vw, 33px);
    letter-spacing: -1.1px;
}

.payment-auth-modal .auth-payment-title {
    margin-top: 3px;
    font-size: 11px;
}

.payment-auth-modal .auth-wallet-source {
    gap: 9px;
    margin: 12px 0 9px;
    padding: 9px 10px;
    border-radius: 12px;
}

.payment-auth-modal .auth-wallet-icon {
    flex-basis: 32px;
    height: 32px;
    border-radius: 9px;
}

.payment-auth-modal .auth-wallet-icon .heroicon {
    width: 16px;
    height: 16px;
}

.payment-auth-modal .auth-wallet-source strong {
    font-size: 11.5px;
}

.payment-auth-modal .auth-wallet-source small {
    font-size: 9.5px;
}

.payment-auth-modal .auth-wallet-check {
    width: 20px;
    height: 20px;
}

.payment-auth-modal .auth-wallet-check .heroicon {
    width: 12px;
    height: 12px;
}

.payment-auth-modal .auth-detail-list {
    max-height: 116px;
    overflow-y: auto;
    border-radius: 12px;
    scrollbar-width: thin;
}

.payment-auth-modal .auth-detail-row {
    gap: 14px;
    padding: 7px 10px;
    font-size: 10px;
}

.payment-auth-modal .auth-pin-panel {
    margin-top: 11px;
    padding-top: 11px;
}

.payment-auth-modal .auth-pin-panel h2 {
    margin-bottom: 3px;
    font-size: 14px;
}

.payment-auth-modal .auth-pin-panel > p {
    margin-bottom: 9px;
    font-size: 9.5px;
}

.payment-auth-modal .auth-pin-cells {
    gap: 8px;
}

.payment-auth-modal .auth-pin-cell {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 23px;
}

.payment-auth-modal .auth-pin-error {
    min-height: 14px;
    margin-top: 5px;
    font-size: 9px;
}

.payment-auth-modal .auth-keypad {
    max-width: 230px;
    margin-top: 1px;
    gap: 1px 8px;
}

.payment-auth-modal .auth-key {
    min-height: 31px;
    border-radius: 10px;
    font-size: 16px;
}

.payment-auth-modal .auth-key .heroicon {
    width: 19px;
    height: 19px;
}

.payment-auth-modal .auth-forgot-button {
    margin-top: 5px;
    font-size: 9.5px;
}

.payment-auth-modal .auth-demo-note {
    margin-top: 5px;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: 8.5px;
}

.payment-auth-modal .auth-processing {
    margin-top: 8px;
    font-size: 9.5px;
}

.payment-auth-modal .auth-card-footer {
    padding: 9px 14px;
    font-size: 8.5px;
}

.payment-auth-modal .auth-success-card {
    padding: 27px 24px 24px;
}

.payment-auth-modal .auth-success-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 13px;
    border-radius: 18px;
}

.payment-auth-modal .auth-success-icon .heroicon {
    width: 28px;
    height: 28px;
}

.payment-auth-modal .auth-success-amount {
    margin-top: 13px;
    font-size: 31px;
}

.payment-auth-modal .auth-success-card h2 {
    font-size: 18px;
}

.payment-auth-modal .auth-success-message {
    font-size: 10.5px;
}

.payment-auth-modal .auth-success-meta {
    margin: 14px 0;
    padding: 10px 12px;
}

.beneficiary-inline-save {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin-top: -1px;
    padding: 7px 10px;
    color: #526158;
    border: 1px solid #dbe7df;
    border-radius: 0 0 10px 10px;
    background: #f7fbf8;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.beneficiary-inline-save:hover {
    border-color: #b9dcc2;
    background: #eff9f2;
}

.beneficiary-inline-save .form-check-input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
}

.beneficiary-inline-save > span {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 5px;
    line-height: 1.2;
}

.beneficiary-inline-save strong {
    color: #26372c;
    font-size: .72rem;
    font-weight: 750;
}

.beneficiary-inline-save small {
    color: #7b8980;
    font-size: .65rem;
}

.form-control:has(+ .beneficiary-inline-save) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group:has(+ .beneficiary-inline-save) > .form-control,
.input-group:has(+ .beneficiary-inline-save) > .form-select,
.input-group:has(+ .beneficiary-inline-save) > .btn:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

[data-bs-theme="dark"] .beneficiary-inline-save {
    color: #adbbb1;
    border-color: #304537;
    background: #17251b;
}

[data-bs-theme="dark"] .beneficiary-inline-save:hover {
    border-color: #3d684a;
    background: #1c3022;
}

[data-bs-theme="dark"] .beneficiary-inline-save strong {
    color: #edf7ef;
}

@media (max-width: 575.98px) {
    .payment-auth-modal-content {
        max-height: 91vh;
        border-radius: 20px 20px 0 0;
    }

    .payment-auth-modal-header {
        padding: 12px 15px;
    }

    .payment-auth-modal .auth-card-main {
        padding: 13px 16px 12px;
    }

    .payment-auth-modal .auth-detail-list {
        max-height: 96px;
    }

    .payment-auth-modal .auth-key {
        min-height: 30px;
    }

    .beneficiary-inline-save > span {
        display: grid;
        gap: 1px;
    }
}


/* Settings, compact invoices and verified-meter UX */
body[data-page="settings"] .app-content > section.dashboard-card{overflow:hidden;padding:18px!important}
.settings-tabs{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;overscroll-behavior-inline:contain;padding:5px;scrollbar-width:none;scroll-snap-type:inline proximity}.settings-tabs::-webkit-scrollbar{display:none}.settings-tabs .nav-link{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 13px;scroll-snap-align:center;white-space:nowrap}.settings-tabs .nav-link .heroicon{width:16px;height:16px}
.settings-panel{max-width:900px;margin-inline:auto;padding:12px 14px 18px}.settings-section-heading{display:flex;align-items:center;gap:14px;margin-bottom:24px}.settings-section-icon{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;color:var(--sp-primary);background:var(--sp-primary-soft);border:1px solid rgba(var(--sp-primary-rgb),.16);border-radius:13px}.settings-section-icon .heroicon{width:20px;height:20px}.settings-form{padding:22px;background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:16px}.settings-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}.settlement-account-input .btn,.meter-verification-input-group .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:102px}
.account-verification-feedback{display:flex;align-items:flex-start;gap:9px;min-height:24px;margin-top:2px;color:var(--sp-muted);font-size:.79rem;line-height:1.45}.account-verification-feedback .heroicon{flex:0 0 16px;width:16px;height:16px;margin-top:1px}.account-verification-feedback.is-success{color:var(--sp-success)}.account-verification-feedback.is-danger{color:var(--sp-danger)}.account-verification-feedback.is-loading .heroicon{animation:spin .9s linear infinite}.account-verification-card{display:flex;align-items:center;gap:13px;margin-top:12px;padding:14px 15px;background:rgba(var(--sp-primary-rgb),.07);border:1px solid rgba(var(--sp-primary-rgb),.20);border-radius:13px}.account-verification-check{display:grid;flex:0 0 34px;width:34px;height:34px;place-items:center;color:#fff;background:var(--sp-primary);border-radius:50%}.account-verification-card small,.account-verification-card strong,.account-verification-card span{display:block}.account-verification-card small{margin-bottom:2px;color:var(--sp-muted)}.account-verification-card strong{overflow:hidden;color:var(--sp-ink);text-overflow:ellipsis;white-space:nowrap}.account-verification-card span{margin-top:2px;color:var(--sp-muted);font-size:.76rem}.min-w-0{min-width:0}
.transaction-pin-status{display:flex;align-items:center;gap:13px;padding:15px 17px;background:rgba(var(--sp-primary-rgb),.065);border:1px solid rgba(var(--sp-primary-rgb),.16);border-radius:14px}.transaction-pin-status-icon{display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;color:var(--sp-primary);background:var(--sp-surface);border-radius:12px;box-shadow:0 5px 14px rgba(33,40,66,.06)}.pin-field{letter-spacing:.35em;font-size:1.05rem;font-weight:800}.pin-guidance{display:flex;align-items:flex-start;gap:8px;color:var(--sp-muted);font-size:.79rem}.pin-guidance .heroicon{flex:0 0 16px;width:16px;height:16px}
.meter-setup-modal-dialog{max-width:620px}.meter-card-meta{display:flex;flex-wrap:wrap;gap:7px}.meter-card-meta span,.meter-verified-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;color:var(--sp-muted);background:var(--sp-bg);border:1px solid var(--sp-border);border-radius:999px;font-size:.68rem;font-weight:700}.meter-verified-badge{color:var(--sp-success);background:var(--sp-success-soft);border-color:rgba(22,163,74,.24)}
#transactionModal .modal-dialog{max-width:500px}#transactionModal .modal-header,#transactionModal .modal-footer{padding:15px 18px}#transactionModal .modal-body{max-height:min(68vh,610px);overflow-y:auto;padding:16px 18px}#transactionModal .transaction-detail-hero{gap:16px;margin-bottom:17px!important;padding:15px;border-radius:14px}#transactionModal .transaction-icon{width:44px!important;height:44px!important;margin-bottom:10px!important}#transactionModal .transaction-detail-main h4{margin-bottom:6px!important;font-size:1.35rem}#transactionModal .transaction-detail-qr{flex-basis:88px;padding:7px;border-radius:11px}#transactionModal .transaction-detail-qr small{display:block;margin-top:4px;font-size:.6rem}#transactionModal .detail-list{gap:9px 18px;margin-bottom:0;font-size:.79rem}
@media(max-width:767.98px){body[data-page="settings"] .app-content>section.dashboard-card{padding:12px!important}.settings-panel{padding:8px 2px 12px}.settings-tabs{margin-inline:-2px}.settings-tabs .nav-link{min-height:38px;padding:7px 11px;font-size:.78rem}.settings-form{padding:16px}.settings-section-heading{align-items:flex-start;margin-bottom:18px}.transaction-pin-status{align-items:flex-start;flex-wrap:wrap}.transaction-pin-status .badge{margin-left:51px}.settlement-account-input,.meter-verification-input-group{flex-wrap:nowrap}.settlement-account-input .btn,.meter-verification-input-group .btn{min-width:88px;padding-inline:10px}#transactionModal .modal-dialog{margin:12px}#transactionModal .modal-body{max-height:70vh;padding:14px}}


/* Virtual meter identity, account-number and token-delivery refinements */
.summary-card .summary-contact {
    max-width: 62%;
    text-align: right;
    overflow-wrap: anywhere;
    font-size: .76rem;
}

.virtual-account-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    color: #31563b;
    background: rgba(var(--sp-primary-rgb), .065);
    border: 1px solid rgba(var(--sp-primary-rgb), .18);
    border-radius: 13px;
}

.virtual-account-note > .heroicon {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    color: var(--sp-primary);
}

.virtual-account-note strong,
.virtual-account-note span {
    display: block;
}

.virtual-account-note strong {
    margin-bottom: 2px;
    color: var(--sp-ink);
    font-size: .78rem;
}

.virtual-account-note span {
    color: var(--sp-muted);
    font-size: .7rem;
    line-height: 1.45;
}

.meter-card {
    display: flex;
    flex-direction: column;
}

.meter-account-number {
    padding: 11px 12px;
    background: linear-gradient(135deg, rgba(var(--sp-primary-rgb), .08), rgba(var(--sp-primary-rgb), .025));
    border: 1px solid rgba(var(--sp-primary-rgb), .16);
    border-radius: 12px;
}

.meter-account-number > span {
    display: block;
    margin-bottom: 4px;
    color: var(--sp-muted);
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.meter-account-number > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.meter-account-number strong {
    color: var(--sp-ink);
    font-size: .9rem;
    letter-spacing: .035em;
}

.meter-account-copy {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    color: var(--sp-primary);
    background: var(--sp-surface);
    border: 1px solid rgba(var(--sp-primary-rgb), .20);
    border-radius: 9px;
}

.meter-account-copy:hover,
.meter-account-copy:focus-visible {
    color: #fff;
    background: var(--sp-primary);
    outline: none;
}

.meter-account-copy .heroicon {
    width: 15px;
    height: 15px;
}

.identity-verification-card .meter-verification-success-icon {
    background: #0f766e;
}

[data-bs-theme="dark"] .virtual-account-note,
[data-bs-theme="dark"] .meter-account-number {
    color: #c7ded0;
    background: rgba(var(--sp-primary-rgb), .11);
    border-color: rgba(var(--sp-primary-rgb), .26);
}

[data-bs-theme="dark"] .meter-account-number strong,
[data-bs-theme="dark"] .virtual-account-note strong {
    color: #eef6f0;
}

@media (max-width: 575.98px) {
    .summary-card .summary-contact {
        max-width: 58%;
        font-size: .7rem;
    }

    .meter-account-number strong {
        font-size: .82rem;
    }
}


/* Subscribed schools directory and service selection */
.school-directory-card,
.school-payment-card {
    padding: 24px;
}

.school-directory-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.school-directory-count,
.service-result-count {
    flex: 0 0 auto;
    padding: 6px 10px;
    color: var(--sp-primary);
    background: rgba(var(--sp-primary-rgb), .08);
    border: 1px solid rgba(var(--sp-primary-rgb), .16);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 750;
}

.school-search-wrap {
    position: relative;
    margin-bottom: 18px;
}

.school-search-wrap > .heroicon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--sp-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.school-search-wrap .form-control {
    padding-left: 42px;
    padding-right: 42px;
}

.school-search-clear {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 9px;
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    color: var(--sp-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    transform: translateY(-50%) rotate(45deg);
}

.school-search-clear:hover,
.school-search-clear:focus-visible {
    color: var(--sp-primary);
    background: rgba(var(--sp-primary-rgb), .08);
    outline: none;
}

.school-search-clear .heroicon {
    width: 16px;
    height: 16px;
}

.school-directory-item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 104px;
    align-items: center;
    gap: 13px;
    padding: 14px;
    text-align: left;
    color: var(--sp-ink);
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 15px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.school-directory-item:hover {
    border-color: rgba(var(--sp-primary-rgb), .34);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

.school-directory-item.active {
    background: linear-gradient(135deg, rgba(var(--sp-primary-rgb), .10), rgba(var(--sp-primary-rgb), .025));
    border-color: rgba(var(--sp-primary-rgb), .58);
    box-shadow: 0 12px 30px rgba(var(--sp-primary-rgb), .10);
}

.school-monogram {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--sp-primary), #0e5634);
    border-radius: 13px;
    box-shadow: 0 8px 18px rgba(var(--sp-primary-rgb), .18);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .035em;
}

.school-monogram-lg {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: .82rem;
}

.school-directory-copy {
    display: block;
    min-width: 0;
    padding-right: 20px;
}

.school-directory-name,
.school-directory-meta,
.school-directory-type {
    display: block;
}

.school-directory-name {
    overflow: hidden;
    margin-bottom: 3px;
    font-size: .79rem;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-directory-meta {
    margin-bottom: 4px;
    color: var(--sp-muted);
    font-size: .68rem;
}

.school-directory-type {
    color: var(--sp-primary);
    font-size: .64rem;
    font-weight: 700;
}

.school-directory-check {
    position: absolute;
    top: 11px;
    right: 11px;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    color: transparent;
    background: rgba(var(--sp-primary-rgb), .06);
    border: 1px solid rgba(var(--sp-primary-rgb), .13);
    border-radius: 50%;
}

.school-directory-item.active .school-directory-check {
    color: #fff;
    background: var(--sp-primary);
    border-color: var(--sp-primary);
}

.school-directory-check .heroicon {
    width: 13px;
    height: 13px;
}

.school-directory-empty {
    padding: 34px 20px;
    text-align: center;
    color: var(--sp-muted);
    border: 1px dashed var(--sp-border);
    border-radius: 15px;
}

.school-directory-empty h6 {
    margin: 10px 0 4px;
    color: var(--sp-ink);
    font-weight: 780;
}

.selected-school-panel {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(var(--sp-primary-rgb), .085), rgba(var(--sp-primary-rgb), .025));
    border: 1px solid rgba(var(--sp-primary-rgb), .17);
    border-radius: 16px;
}

.school-connected-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    color: #087443;
    background: rgba(18, 183, 106, .10);
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 800;
}

.school-connected-badge .heroicon {
    width: 12px;
    height: 12px;
}

.school-form-section {
    padding-top: 2px;
}

.school-form-divider {
    margin: 24px 0;
    border-color: var(--sp-border);
    opacity: 1;
}

.school-service-card {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 112px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
    text-align: left;
    color: var(--sp-ink);
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.school-service-card:hover {
    border-color: rgba(var(--sp-primary-rgb), .34);
}

.school-service-card.active {
    background: rgba(var(--sp-primary-rgb), .055);
    border-color: rgba(var(--sp-primary-rgb), .62);
    box-shadow: inset 0 0 0 1px rgba(var(--sp-primary-rgb), .08);
}

.school-service-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--sp-primary);
    background: rgba(var(--sp-primary-rgb), .10);
    border-radius: 11px;
}

.school-service-icon .heroicon {
    width: 19px;
    height: 19px;
}

.school-service-copy {
    display: block;
    min-width: 0;
    padding-right: 20px;
}

.school-service-copy strong,
.school-service-copy small {
    display: block;
}

.school-service-copy strong {
    margin-bottom: 4px;
    font-size: .76rem;
}

.school-service-copy small {
    color: var(--sp-muted);
    font-size: .65rem;
    line-height: 1.42;
}

.school-service-price {
    grid-column: 2;
    color: var(--sp-primary);
    font-size: .76rem;
    font-weight: 800;
}

.school-service-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    color: transparent;
    background: var(--sp-surface-soft);
    border: 1px solid var(--sp-border);
    border-radius: 50%;
}

.school-service-card.active .school-service-check {
    color: #fff;
    background: var(--sp-primary);
    border-color: var(--sp-primary);
}

.school-service-check .heroicon {
    width: 12px;
    height: 12px;
}

.school-summary-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px;
    color: #dff7e8;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 12px;
}

.school-summary-note > .heroicon {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin-top: 1px;
}

.school-summary-note strong,
.school-summary-note span {
    display: block;
}

.school-summary-note strong {
    margin-bottom: 2px;
    font-size: .68rem;
}

.school-summary-note span {
    color: rgba(255, 255, 255, .72);
    font-size: .61rem;
    line-height: 1.45;
}

[data-bs-theme="dark"] .school-directory-item,
[data-bs-theme="dark"] .school-service-card {
    background: var(--sp-surface);
}

[data-bs-theme="dark"] .school-directory-item.active,
[data-bs-theme="dark"] .selected-school-panel,
[data-bs-theme="dark"] .school-service-card.active {
    background: rgba(var(--sp-primary-rgb), .12);
}

@media (max-width: 767.98px) {
    .school-directory-card,
    .school-payment-card {
        padding: 18px;
    }

    .school-directory-header {
        align-items: center;
    }

    .selected-school-panel {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .selected-school-panel #changeSchoolButton {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .school-directory-header {
        align-items: flex-start;
    }

    .school-directory-item {
        min-height: 96px;
    }

    .school-service-card {
        min-height: 104px;
    }
}


/* Categorized schools, biller directory and Nigerian service providers */
.school-category-filters { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.school-category-filters::-webkit-scrollbar { display: none; }
.school-directory-link { text-decoration: none; }
.school-directory-link:hover { color: var(--sp-ink); }
.school-directory-arrow { color: var(--sp-primary); background: rgba(var(--sp-primary-rgb), .08); }
.school-directory-arrow .heroicon { width: 14px; height: 14px; }
.school-type-pill { display: inline-flex; padding: 4px 8px; color: var(--sp-primary); background: rgba(var(--sp-primary-rgb), .08); border-radius: 999px; font-size: .62rem; font-weight: 750; }
.page-back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--sp-primary); font-size: .72rem; font-weight: 750; text-decoration: none; }
.page-back-link:hover { color: var(--sp-primary-dark); }
.page-back-link .heroicon { width: 16px; height: 16px; }
.biller-directory-card { min-height: 160px; padding-top: 48px; }
.biller-category-badge { position: absolute; top: 14px; left: 14px; padding: 4px 8px; color: var(--sp-primary); background: rgba(var(--sp-primary-rgb), .08); border-radius: 999px; font-size: .6rem; font-weight: 800; }
.provider-directory-card .card-section-header { align-items: flex-start; }
.provider-category-select { max-width: 260px; }
.service-provider-card { position: relative; display: flex; width: 100%; min-height: 104px; align-items: center; gap: 12px; padding: 14px; text-align: left; color: var(--sp-ink); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 14px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
button.service-provider-card { appearance: none; }
.service-provider-card:hover, .service-provider-card:focus-visible { color: var(--sp-ink); border-color: rgba(var(--sp-primary-rgb), .4); box-shadow: 0 10px 24px rgba(15,23,42,.07); transform: translateY(-1px); outline: none; }
.service-provider-icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; padding: 7px; color: var(--sp-primary); background: rgba(var(--sp-primary-rgb), .09); border-radius: 12px; }
.service-provider-icon img { width: 100%; height: 100%; object-fit: contain; }
.service-provider-icon .heroicon { width: 22px; height: 22px; }
.service-provider-copy { display: block; min-width: 0; padding-right: 14px; }
.service-provider-copy strong, .service-provider-copy small, .service-provider-copy span { display: block; }
.service-provider-copy strong { margin-bottom: 3px; font-size: .75rem; }
.service-provider-copy small { overflow: hidden; margin-bottom: 5px; color: var(--sp-muted); font-size: .63rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.service-provider-copy span { color: var(--sp-primary); font-size: .58rem; font-weight: 750; }
.service-provider-arrow { position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; color: var(--sp-primary); }
@media (max-width: 991.98px) { .provider-category-select { max-width: none; } }
@media (max-width: 575.98px) {
  .school-category-summary .stat-card { min-height: 118px; }
  .school-category-filters { justify-content: flex-start !important; padding-bottom: 3px; }
  .school-category-filters .filter-chip { flex: 0 0 auto; }
  .biller-directory-card { min-height: 145px; }
  .service-provider-card { min-height: 96px; }
}


/* =========================================================
   Directory card visual polish and toolbar alignment
   ========================================================= */
.directory-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(135deg, rgba(var(--sp-primary-rgb), .055), transparent 68%);
    border-bottom: 1px solid rgba(var(--sp-primary-rgb), .08);
}

.directory-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.directory-search {
    flex: 1 1 340px;
    min-width: 240px;
}

.directory-filter-rail {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    max-width: 100%;
    overflow-x: auto;
    padding: 2px 1px 4px;
    scrollbar-width: none;
}

.directory-filter-rail::-webkit-scrollbar {
    display: none;
}

.directory-filter-rail .filter-chip {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 14px;
    white-space: nowrap;
}

.directory-category-select {
    flex: 0 0 250px;
    max-width: 250px;
}

.directory-card {
    --directory-accent: var(--sp-primary);
    --directory-accent-rgb: var(--sp-primary-rgb);
    position: relative;
    display: flex;
    width: 100%;
    min-height: 210px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    padding: 18px !important;
    text-align: left;
    color: var(--sp-ink);
    background:
        linear-gradient(160deg, rgba(var(--directory-accent-rgb), .075), transparent 47%),
        var(--sp-surface);
    border: 1px solid rgba(var(--directory-accent-rgb), .17);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .055);
    text-decoration: none;
    isolation: isolate;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

button.directory-card {
    appearance: none;
    font: inherit;
}

.directory-card::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, var(--directory-accent), rgba(var(--directory-accent-rgb), .18));
}

.directory-card-glow {
    position: absolute;
    z-index: -1;
    top: -55px;
    right: -52px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(var(--directory-accent-rgb), .15), transparent 68%);
    border-radius: 50%;
    pointer-events: none;
}

.directory-card:hover,
.directory-card:focus-visible {
    color: var(--sp-ink);
    border-color: rgba(var(--directory-accent-rgb), .42);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .10);
    outline: none;
    transform: translateY(-3px);
}

.directory-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 31px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.directory-category-pill,
.biller-category-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: calc(100% - 42px);
    min-height: 26px;
    padding: 5px 10px;
    overflow: hidden;
    color: var(--directory-accent);
    background: rgba(var(--directory-accent-rgb), .10);
    border: 1px solid rgba(var(--directory-accent-rgb), .14);
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory-card-arrow {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--directory-accent);
    background: var(--sp-surface);
    border: 1px solid rgba(var(--directory-accent-rgb), .18);
    border-radius: 10px;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .05);
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.directory-card:hover .directory-card-arrow {
    color: #fff;
    background: var(--directory-accent);
    transform: translate(1px, -1px);
}

.directory-card-arrow .heroicon {
    width: 14px;
    height: 14px;
}

.directory-card-icon,
.directory-card .biller-icon,
.directory-card .service-provider-icon,
.directory-card .school-monogram {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    margin: 0 0 17px;
    place-items: center;
    padding: 10px;
    color: var(--directory-accent);
    background: linear-gradient(145deg, rgba(var(--directory-accent-rgb), .14), rgba(var(--directory-accent-rgb), .055));
    border: 1px solid rgba(var(--directory-accent-rgb), .14);
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(var(--directory-accent-rgb), .10);
}

.directory-card .school-monogram {
    padding: 0;
    color: #fff;
    background: linear-gradient(145deg, var(--directory-accent), rgba(var(--directory-accent-rgb), .72));
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .04em;
}

.directory-card-icon .heroicon,
.directory-card .biller-icon .heroicon,
.directory-card .service-provider-icon .heroicon {
    width: 24px;
    height: 24px;
}

.directory-card .service-provider-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.directory-card-copy,
.directory-card .service-provider-copy,
.directory-card .school-directory-copy {
    display: block;
    min-width: 0;
    padding: 0;
}

.directory-card-copy strong,
.directory-card .service-provider-copy strong,
.directory-card .school-directory-name {
    display: block;
    overflow: visible;
    margin: 0 0 6px;
    color: var(--sp-ink);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: initial;
    white-space: normal;
}

.directory-card-copy small,
.directory-card .service-provider-copy small,
.directory-card .school-directory-meta {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 8px;
    color: var(--sp-muted);
    font-size: .7rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.directory-card .school-directory-type {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: 4px 8px;
    color: var(--directory-accent);
    background: rgba(var(--directory-accent-rgb), .08);
    border-radius: 999px;
    font-size: .61rem;
    font-weight: 750;
}

.directory-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 13px;
    color: var(--directory-accent);
    border-top: 1px solid rgba(var(--directory-accent-rgb), .12);
    font-size: .65rem;
    font-weight: 800;
}

.directory-card-footer .heroicon {
    width: 14px;
    height: 14px;
    transition: transform .18s ease;
}

.directory-card:hover .directory-card-footer .heroicon {
    transform: translateX(3px);
}

.directory-stat-card {
    --directory-accent: var(--sp-primary);
    --directory-accent-rgb: var(--sp-primary-rgb);
    position: relative;
    display: flex;
    min-height: 132px;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(var(--directory-accent-rgb), .09), var(--sp-surface) 64%);
    border-color: rgba(var(--directory-accent-rgb), .17);
}

.directory-stat-card::after {
    position: absolute;
    right: -24px;
    bottom: -35px;
    width: 92px;
    height: 92px;
    content: "";
    background: rgba(var(--directory-accent-rgb), .06);
    border-radius: 50%;
}

.directory-stat-icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--directory-accent);
    background: rgba(var(--directory-accent-rgb), .11);
    border: 1px solid rgba(var(--directory-accent-rgb), .13);
    border-radius: 13px;
}

.directory-stat-icon .heroicon {
    width: 21px;
    height: 21px;
}

.directory-stat-card .stat-value {
    margin-top: 3px;
    font-size: 1.35rem;
}

/* Category colour cues remain subtle so the primary green brand still leads. */
[data-directory-category="Schools"],
[data-directory-category="Education"],
[data-directory-category="University"] {
    --directory-accent: #159455;
    --directory-accent-rgb: 21, 148, 85;
}
[data-directory-category="Polytechnic"] {
    --directory-accent: #0f8b6d;
    --directory-accent-rgb: 15, 139, 109;
}
[data-directory-category="Secondary School"] {
    --directory-accent: #2f8f46;
    --directory-accent-rgb: 47, 143, 70;
}
[data-directory-category="NGOs"] {
    --directory-accent: #0f8c87;
    --directory-accent-rgb: 15, 140, 135;
}
[data-directory-category="Government"] {
    --directory-accent: #5367c8;
    --directory-accent-rgb: 83, 103, 200;
}
[data-directory-category="Utilities"],
[data-directory-category="Electricity"] {
    --directory-accent: #c88716;
    --directory-accent-rgb: 200, 135, 22;
}
[data-directory-category="Airtime"] {
    --directory-accent: #d45a52;
    --directory-accent-rgb: 212, 90, 82;
}
[data-directory-category="Data & Internet"] {
    --directory-accent: #3180c8;
    --directory-accent-rgb: 49, 128, 200;
}
[data-directory-category="Cable TV"] {
    --directory-accent: #775ac8;
    --directory-accent-rgb: 119, 90, 200;
}
[data-directory-category="Other"] {
    --directory-accent: #667085;
    --directory-accent-rgb: 102, 112, 133;
}

/* Remove old card constraints that made the directory feel sparse or uneven. */
.biller-directory-card,
.service-provider-card,
.school-directory-item {
    min-height: 210px;
    padding-top: 18px !important;
}

.service-provider-arrow,
.school-directory-check,
.biller-category-badge + h6 {
    /* Legacy elements are no longer used by the updated templates. */
}

.provider-directory-card,
.school-directory-card {
    overflow: hidden;
}

.school-directory-card {
    padding: 0 !important;
}

.school-directory-card .school-directory-header {
    margin: 0;
    padding: var(--sp-card-padding) var(--sp-card-padding) 17px;
    background: linear-gradient(135deg, rgba(var(--sp-primary-rgb), .055), transparent 68%);
    border-bottom: 1px solid rgba(var(--sp-primary-rgb), .08);
}

.school-directory-card > .directory-toolbar,
.school-directory-card > #schoolDirectory,
.school-directory-card > .school-directory-empty {
    margin-right: var(--sp-card-padding);
    margin-left: var(--sp-card-padding);
}

.school-directory-card > #schoolDirectory {
    padding-bottom: var(--sp-card-padding);
}

.school-directory-card > .school-directory-empty {
    margin-bottom: var(--sp-card-padding);
}

[data-bs-theme="dark"] .directory-card {
    background: linear-gradient(160deg, rgba(var(--directory-accent-rgb), .12), transparent 48%), var(--sp-surface);
    border-color: rgba(var(--directory-accent-rgb), .24);
}

[data-bs-theme="dark"] .directory-card-arrow {
    background: rgba(255, 255, 255, .04);
}

@media (max-width: 1199.98px) {
    .directory-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .directory-filter-rail {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .directory-section-header {
        align-items: center;
    }

    .directory-card {
        min-height: 196px;
        padding: 16px !important;
        border-radius: 16px;
    }

    .biller-directory-card,
    .service-provider-card,
    .school-directory-item {
        min-height: 196px;
        padding-top: 16px !important;
    }

    .directory-category-select {
        flex: 1 1 100%;
        max-width: none;
    }

    .school-directory-card .school-directory-header {
        padding: var(--sp-card-padding-mobile);
    }

    .school-directory-card > .directory-toolbar,
    .school-directory-card > #schoolDirectory,
    .school-directory-card > .school-directory-empty {
        margin-right: var(--sp-card-padding-mobile);
        margin-left: var(--sp-card-padding-mobile);
    }

    .school-directory-card > #schoolDirectory {
        padding-bottom: var(--sp-card-padding-mobile);
    }
}

@media (max-width: 575.98px) {
    .directory-search {
        min-width: 100%;
    }

    .directory-stat-card {
        min-height: 124px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .directory-stat-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .directory-stat-card .stat-value {
        font-size: 1.2rem;
    }
}


/* =========================================================
   Final directory consistency, spacing and filter alignment
   ========================================================= */
.directory-shell-card,
.provider-directory-card,
.school-directory-card {
    overflow: hidden;
    padding: 0 !important;
}

.directory-shell-card .directory-section-header,
.provider-directory-card .directory-section-header,
.school-directory-card .school-directory-header {
    padding: 24px 24px 20px !important;
}

.directory-shell-card > .directory-toolbar,
.provider-directory-card .directory-provider-body > .directory-toolbar,
.school-directory-card > .directory-toolbar {
    margin: 0 !important;
    padding: 18px 24px 20px !important;
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border);
}

.directory-shell-card > .directory-grid-body,
.provider-directory-card > .directory-provider-body,
.school-directory-card > #schoolDirectory {
    margin: 0 !important;
    padding: 24px !important;
}

.provider-directory-card > .directory-provider-body {
    padding-top: 0 !important;
}

.provider-directory-card .directory-provider-body > .directory-toolbar {
    margin-right: -24px !important;
    margin-left: -24px !important;
}

.provider-directory-card .directory-provider-body > #providerGrid {
    padding-top: 24px;
}

.directory-toolbar {
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.directory-toolbar > * {
    min-width: 0;
}

.directory-search {
    flex: 0 1 520px;
    width: 100%;
    max-width: 520px;
    min-width: 260px;
}

.directory-search .form-control,
.school-search-wrap .form-control {
    min-height: 44px;
    font-size: .78rem;
    font-weight: 500;
}

.directory-filter-rail {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    padding: 2px 2px 5px;
}

.directory-filter-rail .filter-chip {
    min-height: 40px;
    padding: 8px 13px;
    font-size: .72rem;
    font-weight: 700;
}

.school-directory-card .directory-search {
    flex: 0 1 430px;
    max-width: 430px;
}

.school-directory-card .school-category-filters {
    flex: 1 1 590px;
}

.provider-category-filters {
    flex: 1 1 650px;
}

/* One card language for Biller, Bills Service and Schools. */
.directory-card,
.biller-directory-card,
.service-provider-card,
.school-directory-item {
    min-height: 205px;
    padding: 20px !important;
    border-radius: 20px;
}

.directory-card-top {
    margin-bottom: 14px;
}

.directory-card-icon,
.directory-card .biller-icon,
.directory-card .service-provider-icon,
.directory-card .school-category-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 15px;
}

.directory-card .school-category-icon .heroicon {
    width: 25px;
    height: 25px;
}

.directory-card-copy strong,
.directory-card .service-provider-copy strong,
.directory-card .school-directory-name {
    font-size: .88rem;
    line-height: 1.35;
}

.directory-card-copy small,
.directory-card .service-provider-copy small,
.directory-card .school-directory-meta {
    font-size: .68rem;
}

.directory-card-footer {
    padding-top: 14px;
    font-size: .66rem;
}

/* Summary cards follow the compact illustrated style in the supplied reference. */
.directory-stat-card {
    display: grid;
    min-height: 132px;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 20px !important;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--directory-accent-rgb), .10), var(--sp-surface) 68%);
    border-color: rgba(var(--directory-accent-rgb), .18);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
}

.directory-stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
}

.directory-stat-icon .heroicon {
    width: 24px;
    height: 24px;
}

.directory-stat-card .stat-label {
    margin-bottom: 5px;
    font-size: .72rem;
    font-weight: 700;
}

.directory-stat-card .stat-value {
    margin: 0 0 4px;
    font-size: 1.25rem;
    line-height: 1.15;
}

.directory-stat-card .metric-note {
    font-size: .65rem;
    line-height: 1.35;
}

.school-category-summary .directory-stat-card {
    height: 100%;
}

@media (max-width: 1399.98px) {
    .school-directory-card > .directory-toolbar,
    .provider-directory-card .directory-provider-body > .directory-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .school-directory-card .directory-search,
    .provider-directory-card .directory-search {
        flex: 1 1 430px;
        max-width: none;
    }

    .school-directory-card .school-category-filters,
    .provider-category-filters {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 991.98px) {
    .directory-shell-card > .directory-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .directory-search {
        flex: 1 1 100%;
        max-width: none;
    }

    .directory-filter-rail {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .directory-shell-card .directory-section-header,
    .provider-directory-card .directory-section-header,
    .school-directory-card .school-directory-header {
        padding: 20px 18px 16px !important;
    }

    .directory-shell-card > .directory-toolbar,
    .provider-directory-card .directory-provider-body > .directory-toolbar,
    .school-directory-card > .directory-toolbar {
        padding: 14px 18px 16px !important;
    }

    .directory-shell-card > .directory-grid-body,
    .provider-directory-card > .directory-provider-body,
    .school-directory-card > #schoolDirectory {
        padding: 18px !important;
    }

    .provider-directory-card .directory-provider-body > .directory-toolbar {
        margin-right: -18px !important;
        margin-left: -18px !important;
    }

    .provider-directory-card .directory-provider-body > #providerGrid {
        padding-top: 18px;
    }

    .directory-card,
    .biller-directory-card,
    .service-provider-card,
    .school-directory-item {
        min-height: 194px;
        padding: 18px !important;
    }

    .directory-stat-card {
        min-height: 124px;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 13px;
        padding: 16px !important;
    }

    .directory-stat-icon {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 575.98px) {
    .directory-search {
        min-width: 0;
    }

    .directory-filter-rail .filter-chip {
        min-height: 38px;
        padding: 7px 11px;
        font-size: .69rem;
    }

    .directory-stat-card {
        display: flex;
        min-height: 126px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}


/* Authentication PIN UX: use the device keyboard instead of an on-screen number pad. */
.payment-auth-modal .auth-pin-help {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    max-width: 280px;
    margin: 9px auto 0;
    color: #718078;
    font-size: 9.5px;
    line-height: 1.45;
    text-align: left;
}

.payment-auth-modal .auth-pin-help .heroicon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    color: var(--sp-primary);
}

.payment-auth-modal .auth-alternative-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 250px;
    margin: 11px auto 8px;
    color: #95a29a;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.payment-auth-modal .auth-alternative-divider::before,
.payment-auth-modal .auth-alternative-divider::after {
    height: 1px;
    flex: 1;
    content: "";
    background: #e0e8e2;
}

.payment-auth-modal .auth-biometric-button {
    display: inline-flex;
    min-height: 36px;
    padding: 7px 13px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #137438;
    border: 1px solid #b9ddc3;
    border-radius: 10px;
    background: #f3faf5;
    font-size: 10px;
    font-weight: 750;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.payment-auth-modal .auth-biometric-button:hover {
    border-color: #83c595;
    background: #eaf7ed;
}

.payment-auth-modal .auth-biometric-button:active {
    transform: translateY(1px);
}

.payment-auth-modal .auth-biometric-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.payment-auth-modal .auth-biometric-button .heroicon {
    width: 17px;
    height: 17px;
}

[data-bs-theme="dark"] .payment-auth-modal .auth-pin-help {
    color: #9eafa3;
}

[data-bs-theme="dark"] .payment-auth-modal .auth-alternative-divider::before,
[data-bs-theme="dark"] .payment-auth-modal .auth-alternative-divider::after {
    background: #314238;
}

[data-bs-theme="dark"] .payment-auth-modal .auth-biometric-button {
    color: #86d99c;
    border-color: #365d42;
    background: #1a2b20;
}

[data-bs-theme="dark"] .payment-auth-modal .auth-biometric-button:hover {
    border-color: #4b805a;
    background: #203527;
}

@media (max-width: 575.98px) {
    .payment-auth-modal .auth-pin-help {
        max-width: 250px;
        font-size: 9px;
    }

    .payment-auth-modal .auth-biometric-button {
        min-height: 38px;
        padding-inline: 15px;
    }
}


/* Authentication identity: provider/service logo only (no generic icon fallback). */
.payment-auth-modal .auth-provider-logo {
    padding: 5px;
}
.payment-auth-modal .auth-provider-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 9px;
}
.payment-auth-modal #authProviderFallback {
    display: none !important;
}

/* Show the brand artwork itself instead of an icon-style tile. */
.payment-auth-modal .auth-provider-logo {
    width: 76px;
    height: 48px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.payment-auth-modal .auth-provider-logo img {
    width: 100%;
    height: 100%;
    max-width: 76px;
    max-height: 48px;
    border-radius: 0;
    object-fit: contain;
}


/* =========================================================
   Design polish layer — additive refinements to the shared look
   (cards, tables, badges, forms, buttons, nav, motion).
   Uses existing --sp-* tokens so light/dark themes both apply.
   ========================================================= */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
.page-title { text-wrap: balance; }
.stat-value, .amount-positive, .amount-negative, .table td.fw-semibold, .table td.fw-bold { font-variant-numeric: tabular-nums; }

/* Cards: calmer resting shadow, lift only when interactive */
.dashboard-card { box-shadow: 0 1px 2px rgba(33,40,66,.04), 0 8px 24px rgba(33,40,66,.045); transition: box-shadow .2s ease, border-color .2s ease; }
a.dashboard-card:hover, .dashboard-card.clickable:hover { border-color: rgba(var(--sp-primary-rgb), .30); box-shadow: 0 1px 2px rgba(33,40,66,.05), 0 14px 34px rgba(33,40,66,.09); }
.card-section-header { padding: 16px 22px; border-bottom: 1px solid var(--sp-border); }
.card-section-header h6 { font-size: .95rem; letter-spacing: -.01em; }
.stat-card { transition: transform .2s ease, box-shadow .2s ease; }
.stat-card:hover { transform: translateY(-2px); }
.stat-value { letter-spacing: -.03em; }

/* Badges: one consistent pill for every status, including Bootstrap .badge + status-* */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: .72rem; font-weight: 700; line-height: 1.1; letter-spacing: .01em; border-radius: 999px; }
.badge.status-completed::before, .badge.status-active::before, .badge.status-pending::before, .badge.status-failed::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
}
.badge.status-completed, .badge.status-active { box-shadow: inset 0 0 0 1px rgba(19,169,118,.18); }
.badge.status-pending { box-shadow: inset 0 0 0 1px rgba(233,154,22,.22); }
.badge.status-failed { box-shadow: inset 0 0 0 1px rgba(229,83,83,.20); }

/* Tables: roomier rows, sticky-feeling header, clearer hover */
.table { --bs-table-bg: transparent; }
.table thead th { padding-top: 13px; padding-bottom: 13px; font-weight: 700; background: color-mix(in srgb, var(--sp-bg) 70%, transparent); border-bottom: 1px solid var(--sp-border); white-space: nowrap; }
.table > :not(caption) > * > * { padding: 14px 12px; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background: rgba(var(--sp-primary-rgb), .04); }

/* Buttons: tactile press + clearer secondary/light variants */
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 12px 26px rgba(var(--sp-primary-rgb), .26); }
.btn-light { color: var(--sp-ink); background: var(--sp-surface); border: 1px solid var(--sp-border); }
.btn-light:hover { color: var(--sp-primary); background: var(--sp-primary-soft); border-color: rgba(var(--sp-primary-rgb), .30); }
.btn-sm { min-height: 34px; padding-right: 12px; padding-left: 12px; border-radius: 9px; }

/* Forms */
.form-control, .form-select { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: var(--sp-charcoal-300); }
.form-control::placeholder { color: var(--sp-charcoal-300); }
.form-label { margin-bottom: 6px; }
.form-check-input { cursor: pointer; }
.form-check-input:focus { box-shadow: 0 0 0 .22rem rgba(var(--sp-primary-rgb), .15); border-color: var(--sp-primary); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }

/* Sidebar nav: clear active indicator */
.sidebar-nav .nav-link { position: relative; transition: background-color .15s ease, color .15s ease; }
.sidebar-nav .nav-link.active::before { content: ""; position: absolute; left: -2px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--sp-primary); }

/* Modals, dropdowns, toasts */
.modal-content { box-shadow: 0 30px 80px rgba(23,32,51,.22); }
.modal-title { font-weight: 700; letter-spacing: -.02em; }
.dropdown-menu { padding: 6px; }
.toast { overflow: hidden; }

/* Empty state, pagination, tabs */
.empty-state { padding: 56px 20px; }
.empty-state h6 { color: var(--sp-ink); font-weight: 700; }
.pagination .page-link { min-width: 36px; text-align: center; font-weight: 600; transition: all .15s ease; }
.pagination .page-link:hover { color: var(--sp-primary); background: var(--sp-primary-soft); }
.section-tabs .nav-link { transition: color .15s ease, background-color .15s ease; }

/* Subtle page-enter motion, disabled for reduced-motion users */
@keyframes sp-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.app-content > * { animation: sp-fade-up .28s ease both; }

@media (prefers-reduced-motion: reduce) {
    .app-content > *, .stat-card, .btn, .dashboard-card { animation: none !important; transition: none !important; transform: none !important; }
}

/* Mobile: tighter table cells, full-width primary actions in page headers */
@media (max-width: 767.98px) {
    .card-section-header { padding: 14px 16px; }
    .table > :not(caption) > * > * { padding: 11px 10px; }
    .header-actions { width: 100%; }
    .header-actions .btn { flex: 1 1 auto; }
}