/* ==========================================================================
   Dashboard design system
   ==========================================================================
   Authenticated app-shell theme (sidebar + topbar + cards) for the Customer/
   Dealer/Sub Dealer portal. Reuses the --wv2-* custom properties from
   web-v2.css for color/radius/shadow consistency with the public site.
   Scoped with a dash- prefix to avoid collisions with other stylesheets.
   ========================================================================== */

.dash-scope {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--wv2-bg);
    color: var(--wv2-text);
}

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

.dash-scope a {
    text-decoration: none;
}

.dash-shell {
    display: flex;
    min-height: 100vh;
}

/* ---------- Sidebar ---------- */

.dash-sidebar {
    flex: 0 0 260px;
    width: 260px;
    background: var(--wv2-surface);
    border-right: 1px solid var(--wv2-border);
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.dash-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 20px 6px;
}

.dash-logo img {
    /* Bumped from 26px - the logo was reading too small in the sidebar, and the source PNG
       (see logo-transparent.png) had a baked-in background patch that isn't there anymore,
       so there's no visual box constraining its size now either. */
    height: 38px;
}

.dash-profile-card {
    background: var(--wv2-accent-soft);
    border-radius: var(--wv2-radius-md);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.dash-profile-card .dash-profile-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--wv2-radius-sm);
    background: var(--wv2-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 42px;
}

.dash-profile-card .dash-profile-role {
    font-size: 11px;
    color: var(--wv2-text-muted);
    font-weight: 600;
}

.dash-profile-card .dash-profile-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--wv2-text);
}

.dash-profile-card .dash-profile-badge {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--wv2-accent-dark);
    background: #fff;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.dash-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Dealer sidebar's Logout link - a deliberate destructive-action color, distinct from the rest
   of the nav, so it doesn't read as just another page link. */
.dash-nav-link.dash-nav-link-danger {
    color: #B91C1C;
}

.dash-nav-link.dash-nav-link-danger:hover {
    background: #FEF2F2;
    color: #991B1B;
}

.dash-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--wv2-radius-sm);
    color: var(--wv2-text-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.dash-nav-link i:first-child {
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex: 0 0 18px;
}

.dash-nav-link .dash-chevron {
    margin-left: auto;
    font-size: 11px;
    transition: transform 0.15s ease;
}

.dash-nav-link:hover {
    background: var(--wv2-bg);
    color: var(--wv2-text);
    text-decoration: none;
}

.dash-nav-link.active {
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
}

.dash-nav-group.open > .dash-nav-link .dash-chevron {
    transform: rotate(180deg);
}

.dash-nav-sub {
    list-style: none;
    margin: 2px 0 4px 0;
    padding: 0 0 0 30px;
    display: none;
    flex-direction: column;
    gap: 1px;
}

.dash-nav-group.open > .dash-nav-sub {
    display: flex;
}

.dash-nav-sub a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--wv2-text-muted);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
}

.dash-nav-sub a.active {
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
    font-weight: 700;
}

.dash-nav-sub a:hover {
    background: var(--wv2-bg);
    color: var(--wv2-text);
    text-decoration: none;
}

.dash-promo-card {
    margin-top: auto;
    background: var(--wv2-accent-soft);
    border-radius: var(--wv2-radius-md);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.dash-promo-card h6 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--wv2-text);
}

.dash-promo-card p {
    font-size: 11.5px;
    color: var(--wv2-text-muted);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.dash-promo-card .dash-btn {
    font-size: 12px;
    padding: 8px 14px;
}

/* ---------- Main column ---------- */

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

.dash-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 28px;
    border-bottom: 1px solid var(--wv2-border);
    background: var(--wv2-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.dash-topbar-toggle {
    width: 38px;
    height: 38px;
    border-radius: var(--wv2-radius-sm);
    border: 1px solid var(--wv2-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wv2-text);
    cursor: pointer;
    flex: 0 0 auto;
}

.dash-search {
    flex: 1 1 auto;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--wv2-bg);
    border-radius: 999px;
    padding: 9px 16px;
    color: var(--wv2-text-faint);
}

.dash-search input {
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    flex: 1 1 auto;
    color: var(--wv2-text);
}

.dash-search kbd {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--wv2-text-faint);
    background: #fff;
    border: 1px solid var(--wv2-border);
    border-radius: 6px;
    padding: 2px 6px;
}

.dash-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--wv2-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wv2-text-muted);
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
}

.dash-icon-btn .dash-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #E63946;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.dash-user {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.dash-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--wv2-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 38px;
}

.dash-user-greeting {
    font-size: 11.5px;
    color: var(--wv2-text-muted);
    line-height: 1.3;
}

.dash-user-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wv2-text);
    line-height: 1.3;
}

.dash-content {
    padding: 24px 28px 40px 28px;
    /* Grows to fill leftover vertical space so .dash-footer sits pinned at the bottom of the
       viewport on short pages (e.g. Create Virtual Account) instead of floating mid-page,
       while still flowing naturally after long content on taller pages. */
    flex: 1 1 auto;
}

/* ---------- Page header row ---------- */

.dash-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

.dash-page-head h1 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 2px 0;
    color: var(--wv2-text);
}

.dash-page-head p {
    font-size: 13px;
    color: var(--wv2-text-muted);
    margin: 0;
}

/* Decorative service icon shown on the right of a Reports page head - a soft
   layered badge (two translucent rings behind a solid glyph circle) built from
   CSS alone, standing in for a bespoke illustration per service so every
   Summary Reports page gets the same visual treatment without needing 9
   separate custom graphics. */
.dash-report-header-icon-wrap {
    position: relative;
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-report-header-icon-wrap::before,
.dash-report-header-icon-wrap::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--wv2-accent-soft);
}

.dash-report-header-icon-wrap::before {
    width: 92px;
    height: 92px;
    opacity: 0.55;
}

.dash-report-header-icon-wrap::after {
    width: 68px;
    height: 68px;
    opacity: 0.85;
}

.dash-report-header-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    z-index: 1;
    box-shadow: var(--wv2-shadow-card);
}

.dash-balance-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dash-balance-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--wv2-surface);
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-sm);
    padding: 10px 16px;
    box-shadow: var(--wv2-shadow-card);
}

.dash-balance-pill .dash-pill-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: 0 0 32px;
}

.dash-balance-pill .dash-pill-icon.is-green { background: var(--wv2-accent-soft); color: var(--wv2-accent-dark); }
.dash-balance-pill .dash-pill-icon.is-purple { background: #EDE9FE; color: #7C3AED; }

.dash-balance-pill .dash-pill-label {
    font-size: 10.5px;
    color: var(--wv2-text-muted);
    font-weight: 600;
    display: block;
}

.dash-balance-pill .dash-pill-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--wv2-text);
    display: block;
}

/* ---------- KPI cards ---------- */

.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* Report pages: the KPI row sits directly after the filter .dash-panel in the
   markup with no element between them, so margin-bottom alone (above) left them
   flush against each other with no visible gap. Only fires when a .dash-kpi-grid
   immediately follows a .dash-panel, so it doesn't affect pages where the KPI
   grid is the first thing on the page. */
.dash-panel + .dash-kpi-grid {
    margin-top: 20px;
}

.dash-kpi-grid.dash-kpi-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.dash-kpi-grid.dash-kpi-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.dash-kpi-grid.dash-kpi-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.dash-kpi-card {
    background: var(--wv2-surface);
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-md);
    padding: 16px;
}

.dash-kpi-card .dash-kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 10px;
}

.dash-kpi-card .dash-kpi-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wv2-text-muted);
    margin-bottom: 2px;
}

.dash-kpi-card .dash-kpi-value {
    font-size: 19px;
    font-weight: 800;
    color: var(--wv2-text);
}

.dash-kpi-card .dash-kpi-trend {
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
}

.dash-kpi-card .dash-kpi-trend.is-up { color: var(--wv2-accent-dark); }
.dash-kpi-card .dash-kpi-trend.is-muted { color: var(--wv2-text-faint); }

.dash-icon-bg-green  { background: var(--wv2-accent-soft); color: var(--wv2-accent-dark); }
.dash-icon-bg-purple { background: #EDE9FE; color: #7C3AED; }
.dash-icon-bg-blue   { background: #DBEAFE; color: #2563EB; }
.dash-icon-bg-amber  { background: #FEF3C7; color: #B45309; }
.dash-icon-bg-red    { background: #FEE2E2; color: #DC2626; }

/* ---------- Panels ---------- */

.dash-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.9fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}

.dash-row.dash-row-2 {
    grid-template-columns: 1.5fr 1fr;
}

/* Dealer Dashboard's Quick Services + Service Breakdown + Pending Transactions row - Quick
   Services is just an icon grid (no chart/table to fill space), so at the generic 1.5fr:1fr
   split above it was much wider than it is tall. Fixed to ~2x the card's own height (~220px
   tall with its 2-row icon grid). Service Breakdown (a chart + legend) gets more of the
   remaining space than Pending Transactions (just a count + link). */
.dash-row-2.dash-row-2-quick {
    grid-template-columns: 440px 1.3fr 1fr;
}

.dash-pending-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    text-align: center;
}

.dash-pending-count {
    font-size: 36px;
    font-weight: 800;
    color: var(--wv2-text);
    line-height: 1.1;
}

.dash-pending-sub {
    font-size: 12px;
    color: var(--wv2-text-faint);
    margin-top: 6px;
}

/* Wallet page top row only - narrower hero balance card so the bank-transfer /
   no-virtual-account card next to it gets more visible width. */
.dash-row.dash-row-2.dash-row-2-wallet-hero {
    grid-template-columns: 1.05fr 1fr;
}

.dash-panel {
    background: var(--wv2-surface);
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-md);
    padding: 18px;
}

.dash-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
}

.dash-panel-head h3 {
    font-size: 14.5px;
    font-weight: 700;
    margin: 0;
    color: var(--wv2-text);
}

.dash-panel-head a {
    font-size: 12px;
    font-weight: 600;
    color: var(--wv2-accent-dark);
    text-decoration: none;
}

.dash-tab-group {
    display: inline-flex;
    background: var(--wv2-bg);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.dash-tab-group button {
    border: none;
    background: none;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wv2-text-muted);
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.dash-tab-group button.active {
    background: var(--wv2-accent);
    color: #fff;
}

.dash-chart-wrap {
    height: 230px;
    position: relative;
}

/* Quick actions grid - 4 columns so 7 items wrap to 2 rows instead of 3, and the
   card doesn't run tall with a big empty gap under a lone last-row item. */
.dash-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.dash-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-radius: var(--wv2-radius-sm);
    text-decoration: none;
    color: var(--wv2-text);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
}

.dash-quick-item:hover {
    background: var(--wv2-bg);
    text-decoration: none;
    color: var(--wv2-text);
}

.dash-quick-item .dash-quick-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Recent transactions table */
.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.dash-table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--wv2-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0 10px 10px 10px;
    border-bottom: 1px solid var(--wv2-border);
}

.dash-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--wv2-border);
    vertical-align: middle;
    color: var(--wv2-text);
}

.dash-table tr:last-child td {
    border-bottom: none;
}

.dash-table .dash-tx-desc {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-table .dash-tx-desc .dash-tx-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: 0 0 30px;
}

.dash-table .dash-tx-title {
    font-weight: 600;
}

.dash-table .dash-tx-sub {
    font-size: 11px;
    color: var(--wv2-text-faint);
}

.dash-status-pill {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
}

.dash-view-all-row {
    text-align: center;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--wv2-border);
}

.dash-view-all-row a {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wv2-accent-dark);
    text-decoration: none;
}

/* Commission summary panel */
.dash-comm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.dash-comm-stat {
    background: var(--wv2-bg);
    border-radius: var(--wv2-radius-sm);
    padding: 12px;
}

.dash-comm-stat .dash-comm-label {
    font-size: 10.5px;
    color: var(--wv2-text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.dash-comm-stat .dash-comm-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--wv2-text);
}

.dash-comm-stat .dash-comm-trend {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--wv2-accent-dark);
    margin-top: 2px;
}

.dash-comm-breakdown-label {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--wv2-text-muted);
    margin-bottom: 6px;
}

.dash-comm-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--wv2-border);
    overflow: hidden;
    margin-bottom: 16px;
}

.dash-comm-bar-fill {
    height: 100%;
    background: var(--wv2-accent);
    border-radius: 999px;
}

.dash-comm-source-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dash-comm-source {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--wv2-bg);
    border-radius: var(--wv2-radius-sm);
    padding: 10px 12px;
}

.dash-comm-source .dash-comm-source-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: 0 0 32px;
}

.dash-comm-source .dash-comm-source-label {
    font-size: 10.5px;
    color: var(--wv2-text-muted);
    font-weight: 600;
}

.dash-comm-source .dash-comm-source-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--wv2-text);
}

.dash-comm-source .dash-comm-source-pct {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--wv2-text-muted);
}

/* Per-product accordion on Agent/AgentComission - groups a long flat service list under
   collapsible product headers so a dealer sets one product's rates at a time instead of
   scrolling a huge table. Purely presentational: every row/input still renders in the DOM
   regardless of expanded state, so form submission and JS validation are unaffected. */
.dash-agc-product-group {
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-md);
    margin-bottom: 10px;
    overflow: hidden;
}

.dash-agc-product-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    background: var(--wv2-bg);
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--wv2-text);
}

.dash-agc-product-header:hover {
    background: var(--wv2-accent-soft);
}

.dash-agc-product-name {
    font-weight: 700;
    font-size: 13.5px;
}

.dash-agc-product-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-agc-product-count {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wv2-text-muted);
}

.dash-agc-product-header .dash-chevron {
    font-size: 11px;
    transition: transform 0.15s ease;
    color: var(--wv2-text-muted);
}

.dash-agc-product-group.open .dash-agc-product-header .dash-chevron {
    transform: rotate(180deg);
}

.dash-agc-product-body {
    display: none;
    padding: 14px 16px 16px 16px;
    border-top: 1px solid var(--wv2-border);
}

.dash-agc-product-group.open .dash-agc-product-body {
    display: block;
}

.dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--wv2-accent);
    color: #fff;
    border: none;
    border-radius: var(--wv2-radius-sm);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.dash-btn:hover {
    background: var(--wv2-accent-dark);
    color: #fff;
    text-decoration: none;
}

.dash-footer {
    text-align: center;
    font-size: 12px;
    color: var(--wv2-text-muted);
    padding: 18px 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.dash-footer a {
    color: var(--wv2-text-muted);
    text-decoration: none;
}

/* Placeholder data note - visually subtle, only meaningful in dev */
[data-dash-placeholder] {
    position: relative;
}

/* ---------- Dealer-specific components ---------- */

.dash-account-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--wv2-text-muted);
}

.dash-balance-pill.is-outline-green {
    background: #fff;
    border: 1.5px solid var(--wv2-accent);
    box-shadow: none;
}

/* Slimmer variant used in the topbar (_DashboardLayout.cshtml) so it doesn't blow out the
   header's height the way the full-size page-head pill would. */
.dash-topbar-balance {
    padding: 6px 14px;
}

.dash-topbar-balance .dash-pill-icon {
    width: 26px;
    height: 26px;
    font-size: 11px;
    flex: 0 0 26px;
}

.dash-topbar-balance .dash-pill-value {
    font-size: 12.5px;
}

.dash-balance-pill.is-outline-purple {
    background: #fff;
    border: 1.5px solid #7C3AED;
    box-shadow: none;
}

/* Show/hide toggle on a topbar balance pill - purely a client-side mask (localStorage-remembered),
   no re-fetch involved; the real formatted value is stashed on the pill via a data attribute the
   moment it's fetched, and the eye just swaps the visible text between that and a masked string. */
.dash-pill-eye {
    border: none;
    background: none;
    padding: 2px;
    margin-left: 2px;
    cursor: pointer;
    color: var(--wv2-text-faint);
    font-size: 12px;
    flex: 0 0 auto;
}

.dash-pill-eye:hover {
    color: var(--wv2-text-muted);
}

/* Account dropdown trigger + menu, replacing the old plain "DEALER'S ACCOUNT" text tag. */
.dash-account-menu {
    position: relative;
}

.dash-account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wv2-surface);
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-sm);
    padding: 7px 12px 7px 7px;
    cursor: pointer;
    font: inherit;
}

.dash-account-avatar {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--wv2-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: 0 0 26px;
}

.dash-account-avatar.is-lg {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 14px;
    flex: 0 0 36px;
}

.dash-account-trigger .dash-chevron {
    font-size: 10px;
    color: var(--wv2-text-faint);
    transition: transform 0.15s ease;
}

.dash-account-menu.open .dash-account-trigger .dash-chevron {
    transform: rotate(180deg);
}

.dash-account-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--wv2-surface);
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-md);
    box-shadow: var(--wv2-shadow-card);
    padding: 8px;
    z-index: 40;
}

.dash-account-menu.open .dash-account-dropdown {
    display: block;
}

.dash-account-dropdown-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 10px 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--wv2-border);
}

.dash-account-dropdown-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wv2-text);
}

.dash-account-dropdown-role {
    font-size: 11px;
    color: var(--wv2-text-muted);
}

.dash-account-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--wv2-text);
    text-decoration: none;
}

.dash-account-dropdown-item i {
    width: 14px;
    text-align: center;
    color: var(--wv2-text-faint);
}

.dash-account-dropdown-item:hover {
    background: var(--wv2-bg);
    text-decoration: none;
    color: var(--wv2-text);
}

.dash-account-dropdown-item.is-disabled {
    color: var(--wv2-text-faint);
    cursor: default;
}

.dash-account-dropdown-item.is-disabled:hover {
    background: none;
}

.dash-account-dropdown-item.is-danger {
    color: #DC2626;
}

.dash-account-dropdown-item.is-danger i {
    color: #DC2626;
}

.dash-kpi-card.is-filled {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border: none;
}

.dash-kpi-card.is-filled .dash-kpi-icon {
    margin-bottom: 14px;
}

.dash-kpi-card.is-filled .dash-kpi-arrow {
    font-size: 12px;
    color: var(--wv2-text-faint);
    margin-top: 2px;
}

.dash-kpi-card.is-filled .dash-kpi-spark-wrap {
    position: relative;
    width: 64px;
    height: 34px;
    flex: 0 0 64px;
    align-self: flex-end;
}

.dash-kpi-fill-green  { background: var(--wv2-accent-soft); }
.dash-kpi-fill-purple { background: #EDE9FE; }
.dash-kpi-fill-blue   { background: #DBEAFE; }
.dash-kpi-fill-amber  { background: #FEF3C7; }

.dash-kpi-fill-green  .dash-kpi-icon { background: #fff; color: var(--wv2-accent-dark); }
.dash-kpi-fill-purple .dash-kpi-icon { background: #fff; color: #7C3AED; }
.dash-kpi-fill-blue   .dash-kpi-icon { background: #fff; color: #2563EB; }
.dash-kpi-fill-amber  .dash-kpi-icon { background: #fff; color: #B45309; }

/* Sales summary list panel */
.dash-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-summary-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--wv2-border);
    font-size: 12.5px;
}

.dash-summary-list li:last-child {
    border-bottom: none;
}

.dash-summary-list .dash-summary-label {
    color: var(--wv2-text-muted);
    font-weight: 600;
}

.dash-summary-list .dash-summary-value {
    color: var(--wv2-text);
    font-weight: 800;
}

/* Small side cards (Wallet Funding / Active Agents) */
.dash-mini-card {
    background: var(--wv2-surface);
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-md);
    padding: 16px;
    margin-bottom: 16px;
}

/* Dealer Dashboard's Recent Transactions row - the two mini-cards next to it (Wallet Top-Ups,
   Active Agents) used to just stack at their natural height, leaving empty space at the bottom
   once the row stretched to match the taller Recent Transactions table. Each card now grows to
   fill exactly half the row's full height instead. */
.dash-mini-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 16px;
}

.dash-mini-stack .dash-mini-card {
    flex: 1 1 50%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* With more height to work with in the stack, give the content a bit more presence/spacing
   than the compact default (label / value / sub all bunched tight at the top). */
.dash-mini-stack .dash-mini-label {
    margin-bottom: 8px;
}

.dash-mini-stack .dash-mini-value {
    font-size: 28px;
    margin-bottom: 6px;
}

.dash-mini-stack .dash-mini-sub {
    font-size: 12px;
}

.dash-mini-stack .dash-mini-link {
    margin-top: 12px;
}

.dash-mini-card:last-child {
    margin-bottom: 0;
}

.dash-mini-card .dash-mini-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wv2-text-muted);
    margin-bottom: 6px;
}

.dash-mini-card .dash-mini-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--wv2-text);
    margin-bottom: 4px;
}

.dash-mini-card .dash-mini-sub {
    font-size: 11px;
    color: var(--wv2-text-faint);
}

.dash-mini-card .dash-mini-trend {
    font-size: 11px;
    font-weight: 600;
    color: var(--wv2-accent-dark);
}

.dash-mini-card .dash-mini-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wv2-accent-dark);
    text-decoration: none;
}

/* ---------- Customer-specific components ---------- */

.dash-greeting-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 6px 18px 6px;
}

.dash-greeting-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--wv2-text);
}

.dash-greeting-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--wv2-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 36px;
    text-decoration: none;
}

.dash-greeting-btn:hover {
    background: var(--wv2-accent-dark);
    color: #fff;
    text-decoration: none;
}

/* Stat-style KPI card (colored tint + icon circle + underline bar) */
.dash-kpi-card.is-stat .dash-kpi-stat-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.dash-kpi-card.is-stat .dash-kpi-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 12px;
}

.dash-kpi-card.is-stat .dash-kpi-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--wv2-text);
    margin-bottom: 10px;
}

.dash-kpi-card.is-stat .dash-kpi-stat-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(0,0,0,0.08);
    margin-bottom: 10px;
    overflow: hidden;
}

.dash-kpi-card.is-stat .dash-kpi-stat-bar-fill {
    height: 100%;
    width: 70%;
    border-radius: 999px;
}

.dash-kpi-card.is-stat .dash-kpi-stat-sub {
    font-size: 11px;
    color: var(--wv2-text-muted);
}

.dash-kpi-fill-purple .dash-kpi-stat-label,
.dash-kpi-fill-purple .dash-kpi-stat-icon { color: #7C3AED; }
.dash-kpi-fill-purple .dash-kpi-stat-bar-fill { background: #7C3AED; }

.dash-kpi-fill-amber .dash-kpi-stat-label,
.dash-kpi-fill-amber .dash-kpi-stat-icon { color: #B45309; }
.dash-kpi-fill-amber .dash-kpi-stat-bar-fill { background: #B45309; }

.dash-kpi-fill-red { background: #FEE2E2; }
.dash-kpi-fill-red .dash-kpi-stat-label,
.dash-kpi-fill-red .dash-kpi-stat-icon { color: #DC2626; }
.dash-kpi-fill-red .dash-kpi-stat-bar-fill { background: #DC2626; }

.dash-kpi-fill-green .dash-kpi-stat-label,
.dash-kpi-fill-green .dash-kpi-stat-icon { color: var(--wv2-accent-dark); }
.dash-kpi-fill-green .dash-kpi-stat-bar-fill { background: var(--wv2-accent); }

/* Wallet overview card */
.dash-row-2.dash-row-2-reverse {
    grid-template-columns: 1fr 1.5fr;
}

.dash-wallet-card {
    background: var(--wv2-accent-soft);
    border-radius: var(--wv2-radius-md);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.dash-wallet-card .dash-wallet-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--wv2-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 46px;
}

.dash-wallet-card .dash-wallet-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wv2-text-muted);
    margin-bottom: 2px;
}

.dash-wallet-card .dash-wallet-value {
    font-size: 19px;
    font-weight: 800;
    color: var(--wv2-text);
    margin-bottom: 10px;
}

.dash-wallet-mini-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.dash-wallet-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wv2-border);
}

.dash-wallet-mini-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dash-wallet-mini-row .dash-wallet-mini-label {
    color: var(--wv2-text-muted);
    font-weight: 600;
}

.dash-wallet-mini-row .dash-wallet-mini-value {
    color: var(--wv2-text);
    font-weight: 700;
}

.dash-info-banner-soft {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
    border-radius: var(--wv2-radius-sm);
    padding: 12px 14px;
    font-size: 12.5px;
    font-weight: 600;
}

/* ---------- Product & Services page ---------- */

.dash-breadcrumb {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wv2-text-muted);
    margin-bottom: 10px;
}

.dash-svc-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    align-items: start;
}

.dash-svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.dash-svc-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--wv2-surface);
    border: 1.5px solid var(--wv2-border);
    border-radius: var(--wv2-radius-md);
    padding: 16px;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.dash-svc-card:hover {
    border-color: var(--wv2-accent);
}

.dash-svc-card.active {
    background: var(--wv2-accent-soft);
    border-color: var(--wv2-accent);
}

.dash-svc-card .dash-svc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: 0 0 44px;
}

.dash-svc-card .dash-svc-text {
    flex: 1 1 auto;
    min-width: 0;
}

.dash-svc-card .dash-svc-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--wv2-text);
    margin-bottom: 2px;
}

.dash-svc-card .dash-svc-desc {
    font-size: 11.5px;
    color: var(--wv2-text-muted);
    line-height: 1.4;
}

.dash-svc-card .dash-svc-indicator {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--wv2-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wv2-text-faint);
    font-size: 11px;
    flex: 0 0 26px;
}

.dash-svc-card.active .dash-svc-indicator {
    background: var(--wv2-accent);
    border-color: var(--wv2-accent);
    color: #fff;
}

.dash-svc-panel {
    background: var(--wv2-surface);
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-md);
    padding: 22px;
    position: sticky;
    top: 84px;
    /* Below 1200px this panel goes position:static and RouteModule() (Services/Index.cshtml)
       scrollIntoView()s it when a service card is tapped - without this, the sticky topbar
       would land flush against (partially covering) the top of the panel it just scrolled to. */
    scroll-margin-top: 88px;
}

.dash-svc-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.dash-svc-panel-head h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--wv2-text);
    margin: 0 0 4px 0;
}

.dash-svc-panel-head p {
    font-size: 12px;
    color: var(--wv2-text-muted);
    margin: 0;
}

.dash-svc-panel-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: 0 0 42px;
}

.dash-field {
    margin-bottom: 18px;
}

.dash-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.dash-field-row .dash-field {
    min-width: 0;
}

@media (max-width: 640px) {
    .dash-field-row {
        grid-template-columns: 1fr;
    }
}

.dash-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wv2-text);
    margin-bottom: 7px;
}

.dash-field .form-control,
.dash-field select,
.dash-field input[type="text"],
.dash-field input[type="number"],
.dash-field input[type="tel"],
.dash-field input[type="email"],
.dash-field input[type="password"] {
    width: 100%;
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-sm);
    padding: 11px 14px;
    font-size: 13.5px;
    color: var(--wv2-text);
    background: #fff;
}

.dash-field .form-control:focus,
.dash-field select:focus,
.dash-field input:focus {
    outline: none;
    border-color: var(--wv2-accent);
}

.dash-field input[type="file"] {
    width: 100%;
    border: 1px dashed var(--wv2-border);
    border-radius: var(--wv2-radius-sm);
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--wv2-text-muted);
    background: var(--wv2-bg);
}

.dash-field input[readonly] {
    background: var(--wv2-bg);
    color: var(--wv2-text-muted);
}

.dash-amount-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.dash-amount-pill {
    border: 1px solid var(--wv2-border);
    background: var(--wv2-bg);
    color: var(--wv2-text-muted);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
}

.dash-amount-pill:hover,
.dash-amount-pill.active {
    background: var(--wv2-accent);
    border-color: var(--wv2-accent);
    color: #fff;
}

.dash-tip-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--wv2-accent-soft);
    border-radius: var(--wv2-radius-sm);
    padding: 13px 14px;
    margin-bottom: 20px;
}

.dash-tip-banner .dash-tip-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: var(--wv2-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: 0 0 30px;
}

.dash-tip-banner strong {
    display: block;
    font-size: 12.5px;
    color: var(--wv2-accent-dark);
    margin-bottom: 2px;
}

.dash-tip-banner span {
    font-size: 12px;
    color: var(--wv2-text-muted);
    line-height: 1.4;
}

.dash-total-payable {
    background: var(--wv2-bg);
    border-radius: var(--wv2-radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.dash-total-payable .dash-total-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wv2-text-muted);
    margin-bottom: 4px;
}

.dash-total-payable .dash-total-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--wv2-text);
}

.dash-btn-block {
    display: block;
    width: 100%;
    text-align: center;
    padding: 13px 18px;
    font-size: 14px;
}

.dash-svc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    color: var(--wv2-text-faint);
}

.dash-svc-empty i {
    font-size: 34px;
    margin-bottom: 14px;
    color: var(--wv2-text-faint);
}

/* ---------- Product & Services: blurred placeholder form ---------- */
/* Shown instead of a real, functional form until the customer picks a service - looks like
   a generic purchase form (title/fields/quick-amount chips/button) but is decorative only:
   blurred, dimmed and non-interactive, with a prompt overlaid on top. */
.dash-svc-skeleton-wrap {
    position: relative;
    min-height: 480px;
}

.dash-svc-skeleton {
    filter: blur(5px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.dash-svc-skeleton-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 22px;
}

.dash-svc-skeleton-title {
    height: 18px;
    width: 150px;
    background: var(--wv2-text-faint);
    border-radius: 6px;
    margin-bottom: 10px;
}

.dash-svc-skeleton-sub {
    height: 11px;
    width: 200px;
    background: var(--wv2-border);
    border-radius: 6px;
}

.dash-svc-skeleton-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--wv2-accent-soft);
    flex: 0 0 40px;
}

.dash-svc-skeleton-label {
    height: 11px;
    width: 90px;
    background: var(--wv2-border);
    border-radius: 6px;
    margin-bottom: 8px;
}

.dash-svc-skeleton-field {
    height: 44px;
    background: var(--wv2-bg);
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-sm);
    margin-bottom: 18px;
}

.dash-svc-skeleton-row {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.dash-svc-skeleton-chip {
    flex: 1;
    height: 30px;
    background: var(--wv2-bg);
    border: 1px solid var(--wv2-border);
    border-radius: 999px;
}

.dash-svc-skeleton-box {
    height: 56px;
    background: var(--wv2-accent-soft);
    border-radius: var(--wv2-radius-sm);
    margin-bottom: 18px;
}

.dash-svc-skeleton-total {
    height: 32px;
    width: 55%;
    background: var(--wv2-bg);
    border-radius: var(--wv2-radius-sm);
    margin-bottom: 18px;
}

.dash-svc-skeleton-btn {
    height: 46px;
    background: var(--wv2-accent);
    border-radius: var(--wv2-radius-sm);
    opacity: 0.6;
}

/* Receipt/summary table - real <table> markup kept (not a styled <ul>) so
   downloadReceiptPdf()'s row-scraping keeps working. */
.dash-receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.dash-receipt-table tr {
    border-bottom: 1px solid var(--wv2-border);
}

.dash-receipt-table tr:last-child {
    border-bottom: none;
}

.dash-receipt-table th,
.dash-receipt-table td {
    text-align: left;
    padding: 10px 0;
    font-size: 12.5px;
    font-weight: 400;
    vertical-align: middle;
}

.dash-receipt-table th {
    color: var(--wv2-text-muted);
    font-weight: 600;
    width: 42%;
}

.dash-receipt-table td {
    color: var(--wv2-text);
    font-weight: 700;
}

.dash-receipt-table td input {
    width: 100%;
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-sm);
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--wv2-text);
}

.dash-btn-row {
    display: flex;
    gap: 10px;
}

.dash-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    color: var(--wv2-accent-dark);
    border: 1.5px solid var(--wv2-accent);
    border-radius: var(--wv2-radius-sm);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex: 1 1 0;
    text-decoration: none;
}

.dash-btn-outline:hover {
    background: var(--wv2-accent-soft);
    text-decoration: none;
    color: var(--wv2-accent-dark);
}

.dash-svc-panel-icon.is-loading {
    animation: dashSpin 0.8s linear infinite;
}

@@keyframes dashSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Reports (filter form + results table) ---------- */

.dash-field input[type="date"] {
    width: 100%;
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-sm);
    padding: 10.5px 14px;
    font-size: 13.5px;
    color: var(--wv2-text);
    background: #fff;
}

.dash-field input[type="date"]:focus {
    outline: none;
    border-color: var(--wv2-accent);
}

.dash-report-filter-grid {
    /* FIXED (2026-08-19): the previous grid(auto-fit) layout put
       .dash-report-filter-actions on its own full-width row below the fields
       (grid-column: 1/-1), which lined its right edge up correctly but left a big
       empty gap and pushed Search well below the filters instead of sitting inline
       with them like the report mockup. Flex-wrap keeps Search on the same row as
       the fields (right-aligned via margin-left:auto below) whenever there's room,
       and only drops to its own line if the row genuinely runs out of width. */
    display: flex;
    flex-wrap: wrap;
    gap: 16px 18px;
    align-items: end;
}

.dash-report-filter-grid .dash-field {
    flex: 1 1 180px;
    min-width: 160px;
    margin-bottom: 0;
}

.dash-report-filter-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

.dash-report-filter-actions .dash-btn {
    white-space: nowrap;
}

.dash-report-table-wrap {
    overflow-x: auto;
    margin-top: 22px;
}

.dash-report-table-wrap .dash-table {
    min-width: 760px;
}

.dash-status-pill.is-success {
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
}

.dash-status-pill.is-failed {
    background: #FEE4E2;
    color: #B42318;
}

.dash-status-pill.is-pending {
    background: #EDE9FE;
    color: #7C3AED;
}

/* Search + Export toolbar sitting next to the "Transaction List" panel title
   on Summary Reports pages. The actual search/show-entries controls are
   DataTables' own auto-rendered markup (already styled via .dataTables_wrapper
   below) - this row just adds the Export action beside the panel title. */
.dash-report-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.dash-report-export {
    position: relative;
}

.dash-report-export-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 150px;
    background: #fff;
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-sm);
    box-shadow: var(--wv2-shadow-lift);
    padding: 6px;
    z-index: 5;
}

.dash-report-export-menu.open {
    display: block;
}

.dash-report-export-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 8px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wv2-text);
    border-radius: 8px;
    cursor: pointer;
}

.dash-report-export-menu button:hover {
    background: var(--wv2-bg);
}

.dash-report-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--wv2-text-faint);
    font-size: 13px;
}

.dash-report-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-sm);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wv2-accent-dark);
    cursor: pointer;
}

.dash-report-print-btn:hover {
    background: var(--wv2-accent-soft);
}

.dash-table-input {
    width: 100%;
    min-width: 120px;
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-sm);
    padding: 7px 10px;
    font-size: 12.5px;
    color: var(--wv2-text);
    background: #fff;
}

.dash-table-input[readonly] {
    background: var(--wv2-bg);
    color: var(--wv2-text-muted);
}

.dash-table-input:focus {
    outline: none;
    border-color: var(--wv2-accent);
}

.dash-table .dash-table-group-row td {
    background: var(--wv2-bg);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wv2-text-muted);
}

.dash-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--wv2-radius-sm);
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
    margin-right: 6px;
    text-decoration: none;
}

.dash-icon-link:hover {
    background: var(--wv2-accent);
    color: #fff;
    text-decoration: none;
}

/* ---------- Wallet: 2-up row where the two cards should match height ---------- */
.dash-row-2.dash-row-2-even {
    grid-template-columns: 1fr 1fr;
}

/* ---------- Wallet: hero balance card ---------- */
.dash-hero-balance {
    position: relative;
    overflow: hidden;
    border-radius: var(--wv2-radius-lg);
    background: linear-gradient(135deg, var(--wv2-dark-2) 0%, var(--wv2-accent-dark) 55%, var(--wv2-accent) 100%);
    color: #fff;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dash-hero-balance::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.dash-hero-balance-icon {
    position: absolute;
    right: 14px;
    bottom: 70px;
    font-size: 90px;
    color: rgba(255, 255, 255, 0.10);
    pointer-events: none;
}

.dash-hero-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.dash-hero-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--wv2-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 44px;
}

.dash-hero-balance-figures {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dash-hero-balance-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
}

.dash-hero-balance-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

.dash-hero-balance-value.is-secondary {
    font-size: 20px;
}

/* White quick-action bar embedded at the bottom of the hero card */
.dash-hero-quickbar {
    position: relative;
    z-index: 1;
    margin-top: auto;
    background: rgba(255, 255, 255, 0.96);
    border-radius: var(--wv2-radius-sm);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dash-hero-quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    text-decoration: none;
    cursor: pointer;
}

.dash-hero-quick-item:hover {
    text-decoration: none;
}

.dash-hero-quick-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--wv2-radius-sm);
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 34px;
}

.dash-hero-quick-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wv2-text);
    white-space: nowrap;
}

.dash-hero-quick-sub {
    display: block;
    font-size: 10.5px;
    color: var(--wv2-text-muted);
    white-space: nowrap;
}

/* ---------- Wallet: fund by bank transfer card ---------- */
.dash-fund-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.dash-fund-card-head .dash-fund-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--wv2-radius-sm);
    background: #fff;
    border: 1.5px solid var(--wv2-accent);
    color: var(--wv2-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 34px;
}

.dash-fund-inset {
    background: var(--wv2-accent-soft);
    border: 1px solid #BBF7D0;
    border-radius: var(--wv2-radius-sm);
    padding: 14px 16px;
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.dash-fund-inset-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wv2-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.dash-fund-inset-account {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--wv2-text);
    margin-bottom: 6px;
    word-break: break-all;
}

.dash-fund-inset-name {
    font-size: 13px;
    color: var(--wv2-text-muted);
}

.dash-fund-inset .dash-btn-outline {
    flex: 0 0 auto;
    white-space: nowrap;
}

.dash-fund-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
    border-radius: var(--wv2-radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}

.dash-fund-banner i {
    margin-top: 1px;
}

/* ---------- Wallet: no virtual account yet (empty state) ---------- */
.dash-va-empty {
    border: 1.5px dashed var(--wv2-border);
    border-radius: var(--wv2-radius-md);
    padding: 30px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
}

.dash-va-empty-icon-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--wv2-border) 1.4px, transparent 1.6px) 0 0 / 14px 14px,
        var(--wv2-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.dash-va-empty-icon-wrap i {
    font-size: 30px;
    color: var(--wv2-accent);
}

.dash-va-empty-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wv2-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 3px solid #fff;
}

.dash-va-empty-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--wv2-text);
    margin: 0;
}

.dash-va-empty-desc {
    font-size: 13px;
    color: var(--wv2-text-faint);
    max-width: 320px;
    margin: 4px 0 16px;
    line-height: 1.5;
}

.dash-va-empty-btn {
    display: inline-flex;
}

.dash-va-empty-secure {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wv2-accent-dark);
}

/* ---------- Wallet: InFlow/OutFlow donut ---------- */
.dash-donut-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.dash-donut-chart-box {
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
}

.dash-donut-chart-box #chartdiv {
    width: 150px;
    height: 150px;
}

.dash-donut-legend {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-donut-legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dash-donut-legend-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wv2-text);
}

.dash-donut-legend-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-donut-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
}

.dash-donut-amount {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wv2-text);
}

.dash-pct-pill {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--wv2-accent-dark);
    background: var(--wv2-accent-soft);
    padding: 2px 8px;
    border-radius: 999px;
}

.dash-donut-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #EFF6FF;
    color: #1D4ED8;
    border-radius: var(--wv2-radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 14px;
}

.dash-donut-banner i {
    margin-top: 1px;
}

.dash-donut-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.dash-donut-stat {
    flex: 1 1 120px;
    background: var(--wv2-bg);
    border-radius: var(--wv2-radius-sm);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dash-donut-stat-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: 0 0 26px;
}

.dash-donut-stat-icon.is-out {
    background: #FEE2E2;
    color: #DC2626;
}

.dash-donut-stat-icon.is-in {
    background: var(--wv2-accent-soft);
    color: var(--wv2-accent-dark);
}

.dash-donut-stat-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--wv2-text-muted);
    margin-bottom: 2px;
}

.dash-donut-stat-value-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-donut-stat-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--wv2-text);
}

/* ---------- Empty state ---------- */
.dash-empty-state td {
    border-bottom: none !important;
}

.dash-empty-state-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 34px 16px;
    text-align: center;
    color: var(--wv2-text-faint);
}

.dash-empty-state-inner i {
    font-size: 32px;
    color: var(--wv2-border);
    margin-bottom: 4px;
}

.dash-empty-state-inner strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--wv2-text-muted);
}

.dash-empty-state-inner span {
    font-size: 12px;
    font-weight: 500;
}

/* ---------- Sidebar trust badge ---------- */
.dash-sidebar-trust {
    margin-top: auto;
    background: var(--wv2-accent-soft);
    border-radius: var(--wv2-radius-md);
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.dash-sidebar-trust i {
    color: var(--wv2-accent-dark);
    font-size: 16px;
    margin-top: 2px;
}

.dash-sidebar-trust strong {
    display: block;
    font-size: 12.5px;
    color: var(--wv2-text);
    margin-bottom: 2px;
}

.dash-sidebar-trust p {
    margin: 0;
    font-size: 11px;
    color: var(--wv2-text-muted);
    line-height: 1.4;
}

/* Lightweight modal overlay used to display printed receipts loaded via AJAX
   (jQuery .show()/.hide() toggles the default display:none below - kept block-level
   rather than flex so that toggling keeps working). */
.dash-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 46, 28, 0.45);
    z-index: 200;
    padding: 3vh 20px;
    overflow-y: auto;
}

.dash-modal-box {
    background: var(--wv2-surface);
    border-radius: var(--wv2-radius-md);
    max-width: 560px;
    min-height: 640px;
    margin: 0 auto;
    padding: 28px;
    box-shadow: var(--wv2-shadow-lift);
    position: relative;
}

/* ---------- Responsive ----------
   Tiers: 1200px (small laptop/tablet landscape) -> 900px (tablet portrait,
   sidebar goes off-canvas) -> 640px (large phone) -> 420px (small phone).
   Each tier only adds what changes at that width; earlier-tier rules keep
   applying downward unless overridden again. */

@media (max-width: 1200px) {
    .dash-kpi-grid, .dash-kpi-grid.dash-kpi-grid-5 { grid-template-columns: repeat(3, 1fr); }
    .dash-report-header-icon-wrap { display: none; }
    .dash-row, .dash-row.dash-row-2 { grid-template-columns: 1fr; }
    /* .dash-row-2-wallet-hero carries 3 classes vs. the 2 on the rule above, so
       without this it would out-specificity the collapse-to-1fr rule and the
       Wallet hero/virtual-account row would stay side-by-side (and overflow)
       all the way down to phone width. */
    .dash-row.dash-row-2.dash-row-2-wallet-hero { grid-template-columns: 1fr; }
    .dash-svc-layout { grid-template-columns: 1fr; }
    .dash-svc-panel { position: static; }
}

@media (max-width: 900px) {
    .dash-sidebar { position: fixed; left: -280px; z-index: 30; transition: left 0.2s ease; box-shadow: var(--wv2-shadow-lift); }
    .dash-sidebar.open { left: 0; }
    /* Dims/blocks the page behind the off-canvas sidebar and gives a tap target
       to close it, instead of the sidebar just floating over live content. */
    .dash-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(11, 46, 28, 0.45); z-index: 29; }
    .dash-sidebar-backdrop.open { display: block; }
    .dash-kpi-grid, .dash-kpi-grid.dash-kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .dash-search { display: none; }
    .dash-svc-grid { grid-template-columns: 1fr; }
    .dash-hero-balance-figures { gap: 10px; }
    .dash-hero-balance-icon { display: none; }
    .dash-hero-quickbar { flex-wrap: wrap; }
    /* Fund Wallet / Transaction History labels are wider than their flex item
       at phone widths (title span is nowrap by default) - the excess used to
       spill past the hero card's overflow:hidden edge and get clipped
       mid-word. Let the title wrap to a second line instead of cutting off. */
    .dash-hero-quick-title { white-space: normal; }
    .dash-hero-quick-sub { display: none; }
    .dash-row-2.dash-row-2-even { grid-template-columns: 1fr; }
    .dash-donut-row { flex-direction: column; align-items: flex-start; }
    .dash-comm-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-quick-grid { grid-template-columns: repeat(2, 1fr); }
    /* Tables aren't individually wrapped in every page (Reports pages already
       wrap theirs in .dash-report-table-wrap), so give every panel the ability
       to scroll horizontally instead of letting a wide table blow out the
       layout or squash itself unreadably. Harmless when nothing overflows. */
    .dash-panel { overflow-x: auto; }
    .dash-table { min-width: 560px; }
    .dash-report-table-wrap .dash-table { min-width: 640px; }
    .dash-topbar { padding: 14px 16px; gap: 10px; }
    .dash-content { padding: 18px 16px 32px 16px; }
    .dash-footer { flex-direction: column; gap: 6px; padding: 16px 16px 26px 16px; }
}

@media (max-width: 640px) {
    .dash-kpi-grid, .dash-kpi-grid.dash-kpi-grid-4 { grid-template-columns: 1fr; }
    .dash-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-comm-grid, .dash-comm-source-grid { grid-template-columns: 1fr; }
    .dash-svc-card { padding: 12px; }
    .dash-page-head { align-items: stretch; }
    .dash-page-head h1 { font-size: 19px; }
    /* Account tag/user-greeting text is the first thing to get squeezed on a
       narrow topbar - drop the decorative tag before anything wraps oddly. */
    .dash-account-tag { display: none; }
    .dash-user-greeting { display: none; }
    .dash-topbar-actions { gap: 6px; }
    .dash-topbar-balance .dash-pill-label { display: none; }
    /* Report/summary filter Search button and any full-row action buttons
       reach comfortably across a phone screen instead of staying icon-sized. */
    .dash-report-filter-actions { justify-content: stretch; margin-left: 0; width: 100%; }
    .dash-report-filter-actions .dash-btn { width: 100%; }
    .dash-modal-box { max-width: 100%; min-height: 0; padding: 18px; }
}

/* DataTables' own default CSS (loaded from cdnjs on _DashboardLayout.cshtml, used by the
   Reports pages' filter-result tables) ships with no phone-width handling of its own -
   length/filter/info/paginate controls float and can overflow a narrow screen. Scoped to
   .dash-scope so it can't affect any other DataTables usage (e.g. VatPay.Admin). */
.dash-scope .dataTables_wrapper { font-size: 12.5px; }
.dash-scope .dataTables_length select {
    border: 1px solid var(--wv2-border);
    border-radius: var(--wv2-radius-sm);
    padding: 6px 10px;
    margin-left: 6px;
}

/* Report page search box: DataTables renders "Search: <input>" inside one <label> -
   the label's own text can't be targeted directly, so it's collapsed to font-size:0
   and the input's own size/placeholder (set in datatables.init.js) carry the visible
   text instead, giving the single rounded pill-with-icon box the report mockup uses. */
.dash-scope .dataTables_filter { position: relative; }
.dash-scope .dataTables_filter label { font-size: 0; }
.dash-scope .dataTables_filter input {
    font-size: 12.5px;
    border: 1px solid var(--wv2-border);
    border-radius: 999px;
    padding: 8px 14px 8px 32px;
    margin-left: 0;
    width: 220px;
    background: #fff;
}
.dash-scope .dataTables_filter input:focus {
    outline: none;
    border-color: var(--wv2-accent);
}
.dash-scope .dataTables_filter::before {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--wv2-text-faint);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

@media (max-width: 640px) {
    .dash-scope .dataTables_wrapper .dataTables_length,
    .dash-scope .dataTables_wrapper .dataTables_filter,
    .dash-scope .dataTables_wrapper .dataTables_info,
    .dash-scope .dataTables_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
        text-align: left;
        margin: 0 0 8px 0;
    }
    .dash-scope .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; margin-top: 4px; }
    .dash-scope .dataTables_wrapper .dataTables_paginate { display: flex; flex-wrap: wrap; gap: 4px; }
}

@media (max-width: 420px) {
    .dash-hero-balance-value { font-size: 22px; }
    .dash-hero-balance { padding: 18px 16px; }
    .dash-kpi-card { padding: 12px; }
    .dash-panel { padding: 14px; }
    .dash-topbar { padding: 12px; }
    .dash-logo img { height: 30px; } /* bumped alongside the desktop size above */
}