/* ──────────────────────────────────────────────────────────────────────────
   Driv3 wallet — brand palette (deep indigo)
   Sourced from the MAUI app's brand resources so web + mobile feel the
   same. Variable names below are kept on the existing --c-accent-* axis
   so all rules from the previous theme keep working untouched.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    /* Cool neutrals — harmonise with the indigo brand */
    --c-bg:        #fafafd;
    --c-surface:   #ffffff;
    --c-border:    #ececf2;
    --c-divider:   #f3f3f8;

    /* Text */
    --c-ink:       #242424;     /* PrimaryDarkText */
    --c-ink-soft:  #5a5a64;
    --c-ink-muted: #8b8b94;

    /* Driv3 brand — deep indigo with lavender soft surfaces */
    --c-accent:        #1D0C67;     /* Primary — deep indigo */
    --c-accent-hover:  #6F5EB9;     /* LightPrimary100 — for button hover */
    --c-accent-soft:   #F0EDFF;     /* LightPrimary50 — soft tint for rings / pills */
    --c-accent-ink:    #1D0C67;     /* Text colour on accent-soft surfaces */
    --c-secondary:     #DFD8F7;     /* Secondary lavender — used sparingly */

    /* Status colours (unchanged — meaning trumps brand) */
    --c-pos:           #15803d;
    --c-pos-bg:        #ecfdf5;
    --c-pos-border:    #bbf7d0;

    --c-neg:           #b91c1c;
    --c-neg-bg:        #fef2f2;
    --c-neg-border:    #fecaca;

    --c-warn:          #92400e;
    --c-warn-bg:       #fef3c7;
    --c-warn-border:   #fde68a;

    --c-info:          #1e40af;
    --c-info-bg:       #eff6ff;
    --c-info-border:   #bfdbfe;

    /* Geometry */
    --r-card:    14px;
    --r-pill:    999px;
    --r-input:   8px;

    --gap:       20px;
    --gap-tight: 12px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mono { font-family: "SF Mono", "JetBrains Mono", "Menlo", monospace; }
.small { font-size: 11px; }

.wallet {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
}
.topbar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
}
.brand-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-accent);
}
.brand-dot-platform { background: #1f1d18; }
.brand-name { color: var(--c-ink); }

.ghost-link {
    color: var(--c-ink-soft);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--r-input);
    transition: background 120ms ease;
}
.ghost-link:hover {
    background: var(--c-divider);
    color: var(--c-ink);
}

/* ── Lookup row ──────────────────────────────────────────────────────────── */
.lookup {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 14px 16px;
    display: flex;
    align-items: end;
    gap: var(--gap-tight);
}
.lookup-hint {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
}
.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
}
.field-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
    font-weight: 500;
}
.field input {
    padding: 8px 12px;
    width: 140px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-surface);
    font-family: inherit;
    font-size: 14px;
    color: var(--c-ink);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--r-input);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}
.btn-primary {
    background: var(--c-accent);
    color: var(--c-surface);
}
.btn-primary:hover:not(:disabled) {
    background: var(--c-accent-hover);
}
.btn-primary:disabled {
    background: #c4c0d0;
    cursor: not-allowed;
}
.btn-ghost {
    background: var(--c-surface);
    color: var(--c-accent);
    border-color: var(--c-border);
}
.btn-ghost:hover:not(:disabled) {
    border-color: var(--c-accent);
    color: var(--c-accent-hover);
}
.btn-suffix {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    opacity: 0.7;
    margin-left: 4px;
}

/* ── Banners (info / error) ──────────────────────────────────────────────── */
.banner {
    padding: 12px 16px;
    border-radius: var(--r-card);
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}
.banner-title { font-weight: 600; }
.banner-body { color: inherit; opacity: 0.9; }
.banner-error {
    background: var(--c-neg-bg);
    border-color: var(--c-neg-border);
    color: var(--c-neg);
}
.banner-info {
    background: var(--c-info-bg);
    border-color: var(--c-info-border);
    color: var(--c-info);
}

/* ── Hero balance cards ──────────────────────────────────────────────────── */
.hero {
    display: grid;
    gap: var(--gap-tight);
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
    .hero { grid-template-columns: 1fr; }
}

.hero-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 132px;
}
.hero-primary {
    background: linear-gradient(180deg, #ffffff 0%, var(--c-accent-soft) 100%);
    border-color: #d8d2f0;
}

.hero-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.hero-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-feature-settings: "tnum" 1;
}
.hero-value {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    line-height: 1.1;
}
.hero-secondary .hero-value { color: var(--c-ink-soft); }

.hero-currency {
    font-size: 14px;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.hero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    font-size: 13px;
}

/* ── Pill row (small inline metrics) ─────────────────────────────────────── */
.pill-row {
    display: grid;
    gap: var(--gap-tight);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.info-pill {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}
.info-pill strong {
    font-size: 16px;
    font-weight: 600;
    font-feature-settings: "tnum" 1;
}
.info-pill.positive strong { color: var(--c-pos); }
.info-pill.negative strong { color: var(--c-neg); }

/* ── Hero cards as toggle filter ─────────────────────────────────────────── */
.hero-card {
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease,
                transform 120ms ease;
    position: relative;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
}
.hero-card:hover { transform: translateY(-1px); }
.hero-card.selected {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.hero-card.selected .hero-eyebrow { color: var(--c-accent); }
.hero-card .check {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    display: grid;
    place-items: center;
    font-size: 11px;
    color: transparent;
    transition: all 160ms ease;
}
.hero-card.selected .check {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: white;
}

/* ── Primary action row (Top up button) ──────────────────────────────────── */
.actions {
    display: flex;
    gap: 10px;
}
.action-btn {
    flex: 1;
    padding: 14px 18px;
    background: var(--c-accent);
    color: var(--c-surface);
    border: 1px solid var(--c-accent);
    border-radius: var(--r-card);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 120ms ease, border-color 120ms ease;
}
.action-btn:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.action-btn .plus {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
}

/* ── Activity card — title row layout ────────────────────────────────────── */
.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Hide the "tap a card" hint on narrow screens */
@media (max-width: 520px) {
    .lookup-hint-inline { display: none; }
}

/* ── Modal (top-up) ──────────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 13, 10, 0.42);
    display: none;
    place-items: center;
    z-index: 100;
    padding: 16px;
    animation: m-fade 160ms ease;
}
.modal-backdrop.open { display: grid; }

.modal {
    background: var(--c-surface);
    border-radius: 16px;
    border: 1px solid var(--c-border);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(15, 13, 10, 0.18);
    animation: m-pop 200ms cubic-bezier(.2, .9, .35, 1);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
@keyframes m-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes m-pop  { from { opacity: 0; transform: translateY(8px) scale(0.98) }
                    to   { opacity: 1; transform: translateY(0)   scale(1)    } }

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--c-divider);
}
.modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.modal-close {
    background: transparent;
    border: 0;
    color: var(--c-ink-muted);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: grid;
    place-items: center;
    transition: background 120ms ease, color 120ms ease;
}
.modal-close:hover { background: var(--c-divider); color: var(--c-ink); }

.modal-body {
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.modal-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.modal-helper {
    margin: 0;
    font-size: 13px;
    color: var(--c-ink-soft);
}

/* Amount input with currency prefix */
.amount-field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.amount-field:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
    background: var(--c-surface);
}
.amount-prefix {
    padding: 0 14px;
    display: grid;
    place-items: center;
    color: var(--c-ink-muted);
    font-weight: 600;
    border-right: 1px solid var(--c-divider);
    background: var(--c-bg);
}
.amount-input {
    flex: 1;
    padding: 12px 14px;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    background: transparent;
    color: var(--c-ink);
    font-feature-settings: "tnum" 1;
    width: 100%;
}

/* Quick amount chips */
.quick-amounts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.quick-chip {
    padding: 6px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
}
.quick-chip:hover { border-color: var(--c-accent); }
.quick-chip.active {
    background: var(--c-accent);
    color: var(--c-surface);
    border-color: var(--c-accent);
}

/* "or" divider */
.or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--c-ink-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.or-divider::before, .or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-divider);
}

/* "Soon" chip on the primary CTA inside the modal */
.soon-chip {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-left: 6px;
}

.submit-btn {
    width: 100%;
    padding: 14px 18px;
    background: var(--c-accent);
    color: var(--c-surface);
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.submit-btn:hover:not(:disabled) {
    background: var(--c-accent-hover);
}
.submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Generic card ────────────────────────────────────────────────────────── */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 20px 22px;
}
.card-header {
    margin-bottom: 14px;
}
.card-title {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-ink);
}
.card-sub {
    margin: 0;
    font-size: 13px;
    color: var(--c-ink-soft);
    line-height: 1.5;
}
.card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.card-cta > div { flex: 1; min-width: 240px; }

/* ── Key-value list (IBAN block) ─────────────────────────────────────────── */
.kv-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--c-bg);
    border: 1px solid var(--c-divider);
    border-radius: 10px;
}
.kv-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.kv-value {
    font-size: 14px;
    color: var(--c-ink);
    font-weight: 600;
    word-break: break-all;
}
.kv-value.mono { font-size: 13px; letter-spacing: 0.02em; }

/* ── Status pills ────────────────────────────────────────────────────────── */
.status-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    text-transform: lowercase;
    background: var(--c-divider);
    color: var(--c-ink-soft);
    border: 1px solid var(--c-divider);
    line-height: 1.6;
}
.status-open,
.status-succeeded,
.status-active,
.status-posted     { background: var(--c-pos-bg); color: var(--c-pos); border-color: var(--c-pos-border); }
.status-pending,
.status-processing { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-border); }
.status-failed,
.status-canceled,
.status-closed     { background: var(--c-neg-bg); color: var(--c-neg); border-color: var(--c-neg-border); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap {
    margin: 0 -22px -20px;
    overflow-x: auto;
}
.ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-feature-settings: "tnum" 1;
}
.ledger thead th {
    text-align: left;
    padding: 10px 22px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
    border-bottom: 1px solid var(--c-divider);
    background: transparent;
}
.ledger tbody td {
    padding: 12px 22px;
    border-bottom: 1px solid var(--c-divider);
    vertical-align: middle;
}
.ledger tbody tr:last-child td { border-bottom: none; }
.ledger tbody tr:hover td { background: var(--c-bg); }
.ledger td.right, .ledger th.right { text-align: right; }
.ledger td.positive { color: var(--c-pos); font-weight: 600; }
.ledger td.negative { color: var(--c-neg); font-weight: 600; }
.muted { color: var(--c-ink-muted); }
.muted-cur { color: var(--c-ink-muted); font-weight: 500; margin-left: 3px; }

/* Description column — long Stripe IDs / Checkout names get truncated with
   an ellipsis. Native `title` attribute on the cell shows the full string
   on hover; that's accessible and copy-paste friendly. */
.ledger td.desc {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile ledger transformation

   At narrow widths the 4–5 column table can't breathe — the description
   gets crushed and the amount column wraps to a second line. We collapse
   each row into a small card with a 2-column grid:

     ┌──────────────────────────────────────────┐
     │ 05 May 17:16              [posted]       │
     │ Dispatch escrow reserve trip 8009 (P…    │
     │                              −91.00 EUR  │
     └──────────────────────────────────────────┘

   The thead is hidden because every cell carries its own context. Cells
   are tagged by class (.td-date / .td-desc / .td-status / .td-type /
   .td-amount) so we can grid-area-place them regardless of column
   count (FA ledger has 4 cols, acquiring has 5).
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .table-wrap {
        margin: 0;
        overflow-x: visible;
        padding: 0 12px 12px;
    }
    .ledger,
    .ledger thead,
    .ledger tbody,
    .ledger tr,
    .ledger td {
        display: block;
        width: 100%;
    }
    .ledger thead { display: none; }   /* labels are baked into each row */

    .ledger tbody tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--c-divider);
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date   status"
            "desc   desc"
            "type   amount";
        grid-row-gap: 4px;
        grid-column-gap: 10px;
        align-items: baseline;
    }
    .ledger tbody tr:last-child { border-bottom: none; }
    .ledger tbody tr:hover td { background: transparent; }

    .ledger tbody td {
        padding: 0;
        border: 0;
    }

    .td-date   { grid-area: date;   font-size: 12px; }
    .td-desc   {
        grid-area: desc;
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        cursor: default;
        font-size: 14px;
        line-height: 1.4;
        color: var(--c-ink);
    }
    .td-status { grid-area: status; justify-self: end; }
    .td-type   {
        grid-area: type;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--c-ink-muted);
    }
    .td-amount {
        grid-area: amount;
        text-align: right;
        font-weight: 700;
        font-size: 14px;
    }

    /* When the row has no .td-type cell (FA ledger), the "type" grid
       area sits empty — that's fine, the amount still anchors right. */
}

/* ── Pagination footer (under each ledger table) ─────────────────────────── */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px;
    border-top: 1px solid var(--c-divider);
    font-size: 12px;
    color: var(--c-ink-muted);
}
.pager-info { font-feature-settings: "tnum" 1; }
.pager-controls { display: flex; gap: 6px; }
.pager-btn {
    background: var(--c-surface);
    color: var(--c-ink);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}
.pager-btn:hover:not(:disabled) {
    border-color: var(--c-accent);
    color: var(--c-accent);
}
.pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.empty-state {
    margin: 0;
    padding: 14px 0 4px;
    color: var(--c-ink-muted);
    font-size: 13px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footnote {
    text-align: center;
    color: var(--c-ink-muted);
    font-size: 12px;
    padding: 12px 0;
}
.footnote code { background: transparent; }

/* ──────────────────────────────────────────────────────────────────────────
   Reserved-funds chip (inside the Available hero card)

   Sits at the bottom of the primary hero, separated by a soft divider.
   Shows the total amount of the driver's money locked on the platform FA
   for in-flight dispatched trips. Hidden when the driver has nothing
   reserved (handled in the Razor template).
   ────────────────────────────────────────────────────────────────────────── */
.reserved-chip {
    /* Pulled out from the rest of the hero by a hairline divider */
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--c-border);

    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;

    font-size: 12px;
    color: var(--c-ink-soft);
}
.reserved-icon { font-size: 13px; line-height: 1; }
.reserved-label {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: var(--c-ink-muted);
}
.reserved-value {
    margin-left: auto;
    font-weight: 700;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}
.reserved-currency {
    font-weight: 600;
    color: var(--c-ink-soft);
    font-size: 11px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Activity card tabs (Wallet activity / Recent rides / Pending invoices)

   Promoted from a static filter-chip into a proper segmented tab strip
   so all three buckets have an equal-weight selector. The hero cards
   above keep their click-to-filter behaviour for "fa" and "acquiring";
   the third bucket ("invoices") is reachable only from these tabs.

   Pattern: a single rounded pill containing three tabs. The active tab
   gets a soft brand-tint background and a subtle inner border, matching
   the hero-card "selected" treatment. Badge is a small accent-soft pill
   that disappears when the count is zero.
   ────────────────────────────────────────────────────────────────────────── */
.activity-card { padding: 0; }    /* tabs sit flush; section already provides surface + border */
.activity-card > .activity-header,
.activity-card > .table-wrap,
.activity-card > .invoice-list,
.activity-card > .empty-state,
.activity-card > .banner { /* keep existing inner spacing */ }

.tabs {
    display: flex;
    gap: 4px;
    padding: 6px;
    margin: 14px 16px 4px;

    background: var(--c-divider);
    border-radius: var(--r-pill);

    /* horizontal scroll for narrow screens, hide native scrollbar */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
    flex: 1;
    min-width: 0;            /* allow truncation on narrow screens */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 8px 14px;
    border: 0;
    border-radius: calc(var(--r-pill) - 4px);
    background: transparent;
    color: var(--c-ink-soft);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;

    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.tab:hover { color: var(--c-ink); }
.tab:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}
.tab.is-active {
    background: var(--c-surface);
    color: var(--c-accent-ink);
    box-shadow: 0 1px 3px rgba(29, 12, 103, 0.08);
}
.tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;

    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.tab.has-badge:not(.is-active) .tab-badge {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}

/* The activity-header sits directly under the tab strip. Restore the
   spacing the original .card-header had so titles don't crowd the tabs.
   Refresh button anchors to the right; titles flex-shrink to leave room. */
.activity-header {
    padding: 14px 16px 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.activity-header-meta { flex: 1; min-width: 0; }
.activity-header .card-title { margin: 0 0 4px; }
.activity-header .card-sub { margin: 0; }

/* The base .table-wrap rule below uses `margin: 0 -22px -20px` to bleed
   the table into a parent card's 22px padding. The activity-card has
   `padding: 0` (so the tab strip can sit flush), so that negative margin
   would pull the table 22px to the LEFT of the card edge — leaving the
   date column with no left margin. Reset it here and bring the cell
   padding back to 16px so the date column aligns with the activity
   header's title and tabs above it. */
.activity-card .table-wrap { margin: 0; padding: 0 0 12px; }
.activity-card .ledger thead th,
.activity-card .ledger tbody td {
    padding-left: 16px;
    padding-right: 16px;
}

/* Compact icon button for "Refresh this view". Spins while a load is in
   flight (uses prefers-reduced-motion to disable for users with motion
   sensitivity). */
.refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;

    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-surface);
    color: var(--c-ink-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.refresh-btn:hover:not(:disabled) {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}
.refresh-btn:active:not(:disabled) { transform: scale(0.96); }
.refresh-btn:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}
.refresh-btn:disabled { opacity: 0.6; cursor: progress; }
.refresh-btn svg { display: block; }
.refresh-btn.is-spinning svg {
    animation: refresh-spin 0.9s linear infinite;
}
@keyframes refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .refresh-btn.is-spinning svg { animation: none; }
}

/* Empty state with icon — used for the "no invoices waiting" view so
   the screen doesn't feel broken when there's nothing to act on. */
.empty-state-rich {
    text-align: center;
    padding: 40px 24px 48px;
}
.empty-state-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.6;
}
.empty-state-title {
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: 4px;
}
.empty-state-body {
    color: var(--c-ink-muted);
    font-size: 13px;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}

/* On narrow screens, shrink tabs further so all three labels still
   fit before the horizontal-scroll fallback kicks in. */
@media (max-width: 480px) {
    .tabs { margin: 12px 12px 4px; }
    .tab {
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Pending invoices list (rendered inside the activity card when the
   "invoices" tab is active)
   ────────────────────────────────────────────────────────────────────────── */
.invoice-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.invoice-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-gap: 12px;
    align-items: center;

    padding: 14px 16px;
    border-top: 1px solid var(--c-divider);
    transition: background 0.15s ease;
}
.invoice-row:first-child { border-top: 1px solid var(--c-border); }
.invoice-row.is-busy { background: var(--c-accent-soft); }

.invoice-meta { min-width: 0; } /* allow children to truncate */
.invoice-meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.invoice-trip {
    font-weight: 600;
    color: var(--c-ink);
}
.invoice-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.tag-dispatched {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}
.tag-self {
    background: var(--c-info-bg);
    color: var(--c-info);
    border: 1px solid var(--c-info-border);
}
.invoice-date {
    font-size: 12px;
    color: var(--c-ink-muted);
}

.invoice-amount {
    text-align: right;
    white-space: nowrap;
}
.invoice-amount-value {
    font-weight: 700;
    font-size: 16px;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}
.invoice-amount-currency {
    margin-left: 4px;
    font-size: 11px;
    color: var(--c-ink-muted);
    font-weight: 600;
}

.invoice-actions {
    display: inline-flex;
    gap: 6px;
}
.btn-approve {
    background: var(--c-pos);
    color: #fff;
    border: 1px solid var(--c-pos);
    padding: 7px 14px;
    border-radius: var(--r-input);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.btn-approve:hover:not(:disabled) { filter: brightness(0.95); transform: translateY(-1px); }
.btn-approve:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.btn-cancel {
    background: var(--c-surface);
    color: var(--c-neg);
    border: 1px solid var(--c-neg-border);
    padding: 7px 14px;
    border-radius: var(--r-input);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-cancel:hover:not(:disabled) {
    background: var(--c-neg-bg);
}
.btn-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile: stack the row contents vertically so the buttons don't squeeze
   the trip / amount columns to nothing on narrow screens. */
@media (max-width: 560px) {
    .invoice-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "meta amount"
            "actions actions";
        grid-row-gap: 10px;
    }
    .invoice-meta { grid-area: meta; }
    .invoice-amount { grid-area: amount; }
    .invoice-actions {
        grid-area: actions;
        justify-content: stretch;
    }
    .invoice-actions .btn-approve,
    .invoice-actions .btn-cancel {
        flex: 1;
    }
}

/* ── Blazor error UI ─────────────────────────────────────────────────────── */
#blazor-error-ui {
    background: var(--c-warn-bg);
    color: var(--c-warn);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.08);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}