/* /Components/BoardArchive.razor.rz.scp.css */
/* Expanded, the archive takes the slack the folded live board gave up: it is a flex
   column whose columns row absorbs the leftover height and scrolls inside itself. The
   folded live strip above carries the gap between them (its own margin-bottom). */
.archive[b-7bltg2ix5i] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    animation: archive-open-b-7bltg2ix5i .18s ease-out;
}

@keyframes archive-open-b-7bltg2ix5i {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.archive-head[b-7bltg2ix5i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.archive-title h2[b-7bltg2ix5i] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.archive-title p[b-7bltg2ix5i] {
    margin: 4px 0 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.archive-hide[b-7bltg2ix5i] {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 15px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .2s ease, border-color .2s ease;
}

.archive-hide:hover[b-7bltg2ix5i] {
    background: #f3f4f6;
    border-color: #a3aec7;
}

.archive-error[b-7bltg2ix5i] {
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13.5px;
    font-weight: 600;
    flex-shrink: 0;
}

.archive-columns[b-7bltg2ix5i] {
    flex: 1;
    min-height: 0;
    /* Items size to their content, capped at the row height — see the column CSS. */
    align-items: start;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    transition: opacity .15s ease;
}

/* Re-windowing: the columns stay put and dim rather than flashing back to a spinner. */
.archive-columns.refreshing[b-7bltg2ix5i] {
    opacity: .55;
    pointer-events: none;
}

.archive-columns[b-7bltg2ix5i]  > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .archive-head[b-7bltg2ix5i] {
        flex-direction: column;
        align-items: stretch;
    }

    /* Stacked columns can't both fit, so the archive scrolls as one region instead. */
    .archive-columns[b-7bltg2ix5i] {
        grid-template-columns: 1fr;
        gap: 12px;
        overflow-y: auto;
    }
}
/* /Components/BoardSummaryStrip.razor.rz.scp.css */
.strip[b-ivot9bmnbr] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    cursor: pointer;
    text-align: left;
    flex-shrink: 0;
    margin-bottom: 16px;
    transition: box-shadow .2s ease, border-color .2s ease;
}

/* The folded archive's strip closes the page, so it drops its trailing margin. */
.strip:last-child[b-ivot9bmnbr] {
    margin-bottom: 0;
}

.strip:hover[b-ivot9bmnbr] {
    border-color: #d5dced;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.10);
}

.strip:focus-visible[b-ivot9bmnbr] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.strip-title[b-ivot9bmnbr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.strip-heading[b-ivot9bmnbr] {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.strip-sub[b-ivot9bmnbr] {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

/* Title left, chips and the call to action grouped right. */
.strip-buckets[b-ivot9bmnbr] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Each chip is a miniature of its column header: icon, name, count badge. */
.strip-bucket[b-ivot9bmnbr] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px 7px 8px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.strip-icon[b-ivot9bmnbr] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    flex-shrink: 0;
}

/* The same gradients the expanded column headers use. */
.icon-red[b-ivot9bmnbr] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}

.icon-orange[b-ivot9bmnbr] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
}

.icon-green[b-ivot9bmnbr] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2);
}

.icon-blue[b-ivot9bmnbr] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.icon-gray[b-ivot9bmnbr] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    box-shadow: 0 2px 6px rgba(107, 114, 128, 0.2);
}

.strip-label[b-ivot9bmnbr] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

.strip-badge[b-ivot9bmnbr] {
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    /* The badge shares the icon's colour class, so it takes the tint, not the gradient. */
    background: none;
    box-shadow: none;
}

.strip-badge.icon-red[b-ivot9bmnbr] {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(220, 38, 38, 0.15) 100%);
    color: #991b1b;
}

.strip-badge.icon-orange[b-ivot9bmnbr] {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
    color: #b45309;
}

.strip-badge.icon-green[b-ivot9bmnbr] {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
    color: #047857;
}

.strip-badge.icon-blue[b-ivot9bmnbr] {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
    color: #1d4ed8;
}

.strip-badge.icon-gray[b-ivot9bmnbr] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(107, 114, 128, 0.15) 100%);
    color: #4b5563;
}

.strip-action[b-ivot9bmnbr] {
    font-size: 13.5px;
    font-weight: 600;
    color: #2563eb;
    white-space: nowrap;
    transition: color .2s ease;
}

.strip:hover .strip-action[b-ivot9bmnbr] {
    color: #1d4ed8;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .strip[b-ivot9bmnbr] {
        gap: 14px;
    }

    .strip-buckets[b-ivot9bmnbr] {
        width: 100%;
        margin-left: 0;
    }
}
/* /Components/ClaimBuilder.razor.rz.scp.css */
.create-claim-page[b-sovz53g7un] {
    max-width: var(--mtl-form-max);
    margin: 0 auto;
    padding: 24px;
}

.page-header[b-sovz53g7un] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    background: #ffffff;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.page-header h1[b-sovz53g7un] {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
    font-weight: 750;
}

.page-header p[b-sovz53g7un] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

/* Expenses / Mileage segmented switch (employee claim builders). */
.claim-type-switch[b-sovz53g7un] {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    background: #eef2f8;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
}

.mode-tab[b-sovz53g7un] {
    appearance: none;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 14px;
    font-weight: 650;
    padding: 8px 20px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.mode-tab:hover:not(.active)[b-sovz53g7un] {
    color: #1e3a8a;
}

.mode-tab.active[b-sovz53g7un] {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    cursor: default;
}

.layout-grid[b-sovz53g7un] {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 18px;
}

.card[b-sovz53g7un] {
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    background: #fff;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    height: fit-content;
}

.card h2[b-sovz53g7un] {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.card label[b-sovz53g7un] {
    display: block;
    font-weight: 600;
    color: #334155;
    font-size: 14px;
    margin-bottom: 8px;
}

.card input[type="text"][b-sovz53g7un] {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 12px 13px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    background: #fbfcfe;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card input[type="text"]:focus[b-sovz53g7un] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);
}

.summary[b-sovz53g7un] {
    display: grid;
    gap: 8px;
    margin: 16px 0;
}

.summary div[b-sovz53g7un] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    background: #f8fafc;
}

.summary span[b-sovz53g7un] {
    color: #64748b;
    font-size: 13px;
}

.summary strong[b-sovz53g7un] {
    color: #0f172a;
    font-size: 15px;
}

.btn-primary[b-sovz53g7un],
.btn-secondary[b-sovz53g7un] {
    box-sizing: border-box;
    border-radius: 8px;
    padding: 10px 16px;
    min-height: 42px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.btn-primary[b-sovz53g7un] {
    color: #fff;
    background: #2563eb;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    width: 100%;
}

.btn-primary:hover:not(:disabled)[b-sovz53g7un] {
    background: #1d4ed8;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.26);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-sovz53g7un] {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-secondary[b-sovz53g7un] {
    background: #ffffff;
    color: #334155;
    border-color: #cbd5e1;
}

.btn-secondary:hover[b-sovz53g7un] {
    background: #f8fafc;
    border-color: #94a3b8;
}

.items-list[b-sovz53g7un] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 62vh;
    overflow-y: auto;
}

.item-row[b-sovz53g7un] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.item-row:hover[b-sovz53g7un] {
    border-color: #90b4e5;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}

.item-main[b-sovz53g7un] {
    min-width: 0; /* let the grid's 1fr track shrink below the text's natural width */
}

.item-main strong[b-sovz53g7un] {
    display: block;
    color: #0f172a;
    overflow-wrap: anywhere;
}

.item-main span[b-sovz53g7un] {
    color: #64748b;
    font-size: 12px;
}

.item-amount[b-sovz53g7un] {
    font-weight: 700;
    color: #0f172a;
}

.empty[b-sovz53g7un] {
    color: #94a3b8;
    font-style: italic;
}

.error-message[b-sovz53g7un] {
    margin-bottom: 16px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 650;
}

@media (max-width: 980px) {
    .layout-grid[b-sovz53g7un] {
        grid-template-columns: 1fr;
    }

    .create-claim-page[b-sovz53g7un] {
        padding: 16px;
    }

    .page-header[b-sovz53g7un] {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}
/* /Components/ClaimsColumn.razor.rz.scp.css */
.column[b-qgq2ic9dqf] {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: box-shadow .2s ease;
    /* The page owns the ceiling, the content owns the height: a half-empty column stays
       short, a full one grows to the space available and scrolls inside itself. (height:
       100% here made every column as tall as the tallest, which read as a bug.) Where the
       grid wraps to several rows the cell is content-sized, so this resolves to none and
       the breakpoint below caps it instead. */
    max-height: 100%;
    min-height: 0;
}

/* Wrapped to more than one row (see the owning page's grid): the columns region scrolls,
   so each column needs a readable cap of its own rather than a share of the viewport.
   1300 ≈ --mtl-page-max plus the shell padding; keep it in step with the owning pages. */
@media (max-width: 1300px) {
    .column[b-qgq2ic9dqf] {
        max-height: 460px;
    }
}

.column:hover[b-qgq2ic9dqf] {
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.10);
}

.column-fullscreen[b-qgq2ic9dqf] {
    max-height: none;
    height: 100%;
}

.column-header[b-qgq2ic9dqf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 10px;
    transition: background .2s ease;
}

.column-header:hover[b-qgq2ic9dqf] {
    background: rgba(0, 0, 0, 0.02);
}

.column:has(.icon-blue) .column-header[b-qgq2ic9dqf] {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.04) 100%);
}

.column:has(.icon-teal) .column-header[b-qgq2ic9dqf] {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.08) 0%, rgba(13, 148, 136, 0.04) 100%);
}

.column:has(.icon-green) .column-header[b-qgq2ic9dqf] {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.08) 0%, rgba(22, 163, 74, 0.04) 100%);
}

.column-icon[b-qgq2ic9dqf] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.icon-blue[b-qgq2ic9dqf] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.icon-teal[b-qgq2ic9dqf] {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 2px 6px rgba(13, 148, 136, 0.2);
}

.icon-green[b-qgq2ic9dqf] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.2);
}

.column-title[b-qgq2ic9dqf] {
    flex: 1;
}

.column-title h2[b-qgq2ic9dqf] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.column-title p[b-qgq2ic9dqf] {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.badge[b-qgq2ic9dqf] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.fullscreen-toggle[b-qgq2ic9dqf] {
    font-size: 18px;
    opacity: 0.6;
    transition: opacity .2s ease;
    margin-left: 8px;
}

.column-header:hover .fullscreen-toggle[b-qgq2ic9dqf] {
    opacity: 1;
}

.column .search-bar[b-qgq2ic9dqf] {
    margin-bottom: 14px;
}

.items-container[b-qgq2ic9dqf] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding-right: 4px;
}

.items-container[b-qgq2ic9dqf]::-webkit-scrollbar {
    width: 6px;
}

.items-container[b-qgq2ic9dqf]::-webkit-scrollbar-track {
    background: transparent;
}

.items-container[b-qgq2ic9dqf]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.items-container[b-qgq2ic9dqf]::-webkit-scrollbar-thumb:hover {
    background: #a3aec7;
}

.empty-state[b-qgq2ic9dqf] {
    margin: 24px 4px;
    color: #9ca3af;
    text-align: center;
    font-size: 14px;
    font-style: italic;
}

.item[b-qgq2ic9dqf] {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #93c5fd;
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.item:hover[b-qgq2ic9dqf] {
    transform: translateX(4px);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
    border-left-color: #2563eb;
}

.column:has(.icon-teal) .item[b-qgq2ic9dqf] {
    border-left-color: #14b8a6;
}

.column:has(.icon-green) .item[b-qgq2ic9dqf] {
    border-left-color: #22c55e;
}

.item-title[b-qgq2ic9dqf] {
    font-weight: 600;
    margin: 0 0 4px 0;
    font-size: 14px;
    color: #0f172a;
    /* Long free-text descriptions: wrap (even unbroken strings), then clamp to 2 lines with an ellipsis. */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.item-subtitle[b-qgq2ic9dqf] {
    font-size: 12px;
    color: #6b7280;
    margin: 2px 0;
    font-weight: 500;
}

.item-meta[b-qgq2ic9dqf] {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
}

.status-row[b-qgq2ic9dqf] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status-chip[b-qgq2ic9dqf] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 3px 9px;
}

/* Claims are pure (receipts OR mileage) — the kind chip says which this card is. */
.kind-chip[b-qgq2ic9dqf] {
    background: #eff6ff;
    color: #1e3a8a;
    border: 1px solid #bfdbfe;
}

/* "When do I get paid" — set by Accounts at close-out, shown once it exists. */
.expected-payment[b-qgq2ic9dqf] {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 650;
    color: #047857;
}
/* /Components/DateRangeFilter.razor.rz.scp.css */
.drf-shell[b-ugzzxy5omz] {
    border: 1px solid #d8e1ef;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    padding: 10px 14px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    /* Fixed chrome on a viewport-fitting page — never give up height to the list below. */
    flex-shrink: 0;
}

/* ── the pill bar ─────────────────────────────────────────────────────────── */

.drf-bar[b-ugzzxy5omz] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.drf-title[b-ugzzxy5omz] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
}

.drf-icon[b-ugzzxy5omz] {
    width: 15px;
    height: 15px;
    color: #2563eb;
}

.drf-pills[b-ugzzxy5omz] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid #dbe4f2;
    border-radius: 11px;
    background: #eef2f9;
}

.drf-pill[b-ugzzxy5omz] {
    border: none;
    border-radius: 8px;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.drf-pill:hover[b-ugzzxy5omz] {
    color: #1d4ed8;
    background: rgba(255, 255, 255, 0.75);
}

.drf-pill.active[b-ugzzxy5omz] {
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.drf-pill:focus-visible[b-ugzzxy5omz] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.drf-divider[b-ugzzxy5omz] {
    width: 1px;
    height: 18px;
    margin: 0 3px;
    background: #cfdaeb;
}

.drf-caption[b-ugzzxy5omz] {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── the custom row ───────────────────────────────────────────────────────── */

.drf-custom[b-ugzzxy5omz] {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed #dbe4f2;
    animation: drf-open-b-ugzzxy5omz 0.18s ease-out;
}

@keyframes drf-open-b-ugzzxy5omz {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.drf-field[b-ugzzxy5omz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drf-field span[b-ugzzxy5omz] {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.drf-field input[b-ugzzxy5omz] {
    border: 1px solid #c4d1e5;
    border-radius: 9px;
    padding: 8px 11px;
    min-width: 138px;
    font-size: 13.5px;
    color: #0f172a;
    background: #fff;
}

.drf-field input:focus[b-ugzzxy5omz] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.drf-apply[b-ugzzxy5omz] {
    border: none;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.drf-apply:hover[b-ugzzxy5omz] {
    filter: brightness(1.06);
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3);
}

.drf-hint[b-ugzzxy5omz] {
    font-size: 12px;
    color: #94a3b8;
    padding-bottom: 10px;
}

.drf-error[b-ugzzxy5omz] {
    font-size: 12px;
    font-weight: 600;
    color: #b91c1c;
    padding-bottom: 10px;
}

/* ── narrow screens ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .drf-caption[b-ugzzxy5omz] {
        margin-left: 0;
        flex-basis: 100%;
    }

    .drf-custom[b-ugzzxy5omz] {
        align-items: stretch;
    }

    .drf-field[b-ugzzxy5omz],
    .drf-field input[b-ugzzxy5omz],
    .drf-apply[b-ugzzxy5omz] {
        width: 100%;
    }
}
/* /Components/DigestToggles.razor.rz.scp.css */
/* Sits at the right end of the queue pages' tab row. */
.digest-toggles[b-7eupnf26s5] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.digest-label[b-7eupnf26s5] {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 2px;
}

.digest-chip[b-7eupnf26s5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
}

.digest-chip:hover:not(:disabled)[b-7eupnf26s5] {
    border-color: #93c5fd;
    color: #1d4ed8;
}

.digest-chip:disabled[b-7eupnf26s5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.digest-chip.on[b-7eupnf26s5] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.digest-state[b-7eupnf26s5] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}

.digest-chip.on .digest-state[b-7eupnf26s5] {
    background: #2563eb;
    color: #fff;
}

/* When the summary goes out — read-only, set on the Administration page. */
.digest-schedule[b-7eupnf26s5] {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
/* /Components/FullscreenModal.razor.rz.scp.css */
.fullscreen-modal[b-8nnpfrgjmz] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    backdrop-filter: blur(2px);
    animation: fadeIn-b-8nnpfrgjmz .2s ease;
}

@keyframes fadeIn-b-8nnpfrgjmz {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fullscreen-overlay[b-8nnpfrgjmz] {
    position: relative;
    background: #f9fafb;
    border-radius: 16px;
    width: 100%;
    max-width: 820px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-8nnpfrgjmz .3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp-b-8nnpfrgjmz {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fullscreen-close[b-8nnpfrgjmz] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all .2s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fullscreen-close:hover[b-8nnpfrgjmz] {
    background: #f3f4f6;
    border-color: #a3aec7;
    transform: scale(1.1);
}

.fullscreen-content[b-8nnpfrgjmz] {
    flex: 1;
    overflow: hidden;
    padding: 24px;
    padding-top: 0;
}

.fullscreen-content > *[b-8nnpfrgjmz] {
    height: 100%;
}

@media (max-width: 900px) {
    .fullscreen-overlay[b-8nnpfrgjmz] {
        max-width: 100%;
        height: calc(100vh - 40px);
    }
}

@media (max-width: 600px) {
    .fullscreen-modal[b-8nnpfrgjmz] {
        padding: 10px;
    }

    .fullscreen-overlay[b-8nnpfrgjmz] {
        height: calc(100vh - 20px);
        border-radius: 8px;
    }

    .fullscreen-close[b-8nnpfrgjmz] {
        width: 32px;
        height: 32px;
        font-size: 18px;
        top: 12px;
        right: 12px;
    }

    .fullscreen-content[b-8nnpfrgjmz] {
        padding: 16px;
    }
}
/* /Components/ImpersonationBanner.razor.rz.scp.css */
/* The same blue family as the header's "Acting as" chip and the nav's acting-as zone,
   so all three unmistakably describe the one state. */
.impersonation-banner[b-7pv2o6b6hs] {
    /* Hugs its text — a status chip above the content, not a page-wide strip. */
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    background-color: #eff6ff;
    color: #1e3a8a;
    font-size: 0.9rem;
}
/* /Components/ItemAttachments.razor.rz.scp.css */
.attachments-error[b-z7lvqdkesq] {
    margin: 8px 0 0;
    color: #b42318;
    font-size: 0.9rem;
}

/* Attachments without a viewable image sit behind this instead of broken tiles
   (docs/workflows/10 §6). The warn variant covers storage problems. */
.attachments-processing[b-z7lvqdkesq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 0;
    padding: 12px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
}

.attachments-processing.warn[b-z7lvqdkesq] {
    background: #fef7e0;
    border-color: #fde68a;
}

.attachments-processing.warn .processing-text strong[b-z7lvqdkesq] {
    color: #92400e;
}

/* The shared ring, recoloured to sit on the banner backgrounds. */
.attachments-processing[b-z7lvqdkesq]  .spin-ring {
    margin-top: 2px;
    border-color: #bfdbfe;
    border-top-color: #2563eb;
}

.attachments-processing.warn[b-z7lvqdkesq]  .spin-ring {
    border-color: #fde68a;
    border-top-color: #d97706;
}

.processing-text strong[b-z7lvqdkesq] {
    display: block;
    color: #1e40af;
    font-size: 13.5px;
}

.processing-text p[b-z7lvqdkesq] {
    margin: 3px 0 0;
    color: #475569;
    font-size: 12.5px;
}

/* /Components/ItemReviewPanel.razor.rz.scp.css */
.review-page[b-xpx9q49g7d] {
    min-height: calc(100vh - 4rem);
    /* Routed as a full screen (/admin/item, /cost/item), so it takes the shared cap
       rather than a width of its own. */
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
    background:
        radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.14), transparent 35%),
        radial-gradient(circle at 95% 5%, rgba(14, 165, 233, 0.1), transparent 32%),
        linear-gradient(180deg, #f8fafc 0%, #eef3fb 100%);
}

.review-content[b-xpx9q49g7d] {
    min-width: 0;
}

.review-top[b-xpx9q49g7d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 16px;
    border: 1px solid #d8e2f1;
    border-radius: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.review-top h1[b-xpx9q49g7d] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
}

.review-top p[b-xpx9q49g7d] {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.layout-grid[b-xpx9q49g7d] {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.4fr);
    gap: 16px;
    align-items: start;
}

.left-column[b-xpx9q49g7d],
.right-column[b-xpx9q49g7d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card[b-xpx9q49g7d] {
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    transition: box-shadow .2s ease, border-color .2s ease;
}

.card:hover[b-xpx9q49g7d] {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
    border-color: #cfd8e6;
}

.card h2[b-xpx9q49g7d] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.row[b-xpx9q49g7d] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    align-items: baseline;
}

.row span[b-xpx9q49g7d] {
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

.row strong[b-xpx9q49g7d] {
    color: #0f172a;
    font-weight: 600;
    font-size: 14px;
}

.action-card label[b-xpx9q49g7d] {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 14px;
}

.action-card textarea[b-xpx9q49g7d],
.field input[b-xpx9q49g7d],
.field select[b-xpx9q49g7d] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.action-card textarea:hover[b-xpx9q49g7d],
.field input:hover[b-xpx9q49g7d],
.field select:hover[b-xpx9q49g7d] {
    border-color: #a3aec7;
}

.action-card textarea:focus[b-xpx9q49g7d],
.field input:focus[b-xpx9q49g7d],
.field select:focus[b-xpx9q49g7d] {
    outline: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.action-card textarea[b-xpx9q49g7d] {
    min-height: 72px;
    resize: vertical;
}

.form-grid[b-xpx9q49g7d] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 14px;
    margin-bottom: 11px;
}

/* ---- collapsible sections ---------------------------------------------------------
   The form is five independently collapsible sections (smart collapse: anything still
   needing a field starts open). Closed headers stay informative: a live summary plus
   a pill — "N needed" (app blue: approval still wants these) or "Ready" (green:
   nothing blocks approval; optional fields may still be blank). Amber stays reserved
   for the genuine cautions (deduction warning, client-facing badge). */

.sections-toolbar[b-xpx9q49g7d] {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-bottom: 8px;
}

.sections-toolbar button[b-xpx9q49g7d] {
    border: 0;
    background: none;
    padding: 2px;
    color: #1d4ed8;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border-radius: 4px;
}

.sections-toolbar button:hover[b-xpx9q49g7d] {
    text-decoration: underline;
}

.sections-toolbar button:focus-visible[b-xpx9q49g7d] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.details-status[b-xpx9q49g7d] {
    margin: -2px 0 12px;
    font-size: 12.5px;
    font-weight: 600;
}

.details-status.ok[b-xpx9q49g7d] {
    color: #047857;
}

.details-status.warn[b-xpx9q49g7d] {
    color: #1d4ed8;
}

.review-sections[b-xpx9q49g7d] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.review-section[b-xpx9q49g7d] {
    border: 1px solid #dfe5ef;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.review-section.open[b-xpx9q49g7d] {
    border-color: #bfd3f7;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.08);
}

.section-header[b-xpx9q49g7d] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: linear-gradient(180deg, #fbfdff 0%, #f6f9fe 100%);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color .15s ease;
}

.section-header:hover[b-xpx9q49g7d] {
    background: #eef4fc;
}

.section-header:focus-visible[b-xpx9q49g7d] {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.review-section.open .section-header[b-xpx9q49g7d] {
    background: linear-gradient(135deg, #eff6ff 0%, #f2f8ff 100%);
    border-bottom: 1px solid #e3ecf9;
}

.section-index[b-xpx9q49g7d] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    transition: background-color .2s ease, color .2s ease;
}

.review-section.open .section-index[b-xpx9q49g7d] {
    background: #2563eb;
    color: #fff;
}

.section-title[b-xpx9q49g7d] {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.section-summary[b-xpx9q49g7d] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12.5px;
    color: #64748b;
}

.summary-text[b-xpx9q49g7d] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-missing[b-xpx9q49g7d] {
    color: #1d4ed8;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The fields are on screen while open — the header summary would just repeat them. */
.review-section.open .section-summary[b-xpx9q49g7d] {
    visibility: hidden;
}

.section-state[b-xpx9q49g7d] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.section-state.ok[b-xpx9q49g7d] {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.section-state.warn[b-xpx9q49g7d] {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.section-state svg[b-xpx9q49g7d] {
    width: 11px;
    height: 11px;
}

.section-state.ok svg path[b-xpx9q49g7d] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.section-chevron[b-xpx9q49g7d] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #64748b;
    transition: transform .25s ease;
}

.section-chevron path[b-xpx9q49g7d] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.review-section.open .section-chevron[b-xpx9q49g7d] {
    transform: rotate(180deg);
}

/* Collapse via the grid 0fr/1fr trick. Visibility flips only after the close animation,
   so collapsed fields stay in the DOM (their edits survive) but leave the tab order. */
.section-body[b-xpx9q49g7d] {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .28s ease, visibility 0s linear .28s;
}

.review-section.open .section-body[b-xpx9q49g7d] {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .28s ease;
}

.section-body-inner[b-xpx9q49g7d] {
    overflow: hidden;
    min-height: 0;
}

.section-body-inner .form-grid[b-xpx9q49g7d] {
    margin: 0;
    padding: 13px 14px 16px;
}

@media (prefers-reduced-motion: reduce) {
    .section-body[b-xpx9q49g7d],
    .review-section.open .section-body[b-xpx9q49g7d],
    .section-chevron[b-xpx9q49g7d],
    .review-section[b-xpx9q49g7d] {
        transition: none;
    }
}

@media (max-width: 700px) {
    /* Tight headers: keep the title, pill, and any missing-field callout; drop the prose summary. */
    .summary-text[b-xpx9q49g7d] {
        display: none;
    }
}

.field[b-xpx9q49g7d] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.input-hint[b-xpx9q49g7d] {
    margin-top: -1px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

/* Frankfurter exchange-rate suggestion: a subtle, clickable text line below the box. */
.rate-suggestion[b-xpx9q49g7d] {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 2px;
    padding: 3px 8px;
    border: 1px dashed #bfdbfe;
    border-radius: 8px;
    background: #f5f9ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.rate-suggestion:hover[b-xpx9q49g7d] {
    background: #eaf2ff;
    border-color: #93c5fd;
}

.rate-suggestion-src[b-xpx9q49g7d] {
    display: block;
    margin-top: 1px;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}

/* Advisory flag for an implausibly large deduction — amber, never blocking. */
.deduction-warning[b-xpx9q49g7d] {
    color: #92400e;
    background: #fef7e0;
    border: 1px solid #f9ab00;
    border-radius: 8px;
    padding: 6px 10px;
}

/* CLIENT-FACING marker on the Report Annotation — the deduction-warning amber family,
   so "the client sees this" reads in the same cautionary tone as the deduction checks.
   The hint shares the hue to pair unmistakably with the badge. */
.client-facing-badge[b-xpx9q49g7d] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid #f9ab00;
    border-radius: 999px;
    background: #fef7e0;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    vertical-align: middle;
}

.client-facing-hint[b-xpx9q49g7d] {
    color: #92400e;
}

.field-full[b-xpx9q49g7d] {
    grid-column: 1 / -1;
}

/* Forces a field to start a new grid row (e.g. Category, so it pairs with Subcategory). */
.field-newline[b-xpx9q49g7d] {
    grid-column: 1;
}

.field-label[b-xpx9q49g7d] {
    display: block;
    font-weight: 600;
    color: #0f172a;
    font-size: 14px;
}

.credit-card-field[b-xpx9q49g7d] {
    align-self: start;
}

.value-summary[b-xpx9q49g7d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border: 1px solid #d1dbe8;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
    padding: 10px 12px;
}

.value-summary.ready[b-xpx9q49g7d] {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #eff6ff 0%, #eaf2ff 100%);
}

.summary-label[b-xpx9q49g7d] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #475569;
}

.value-summary strong[b-xpx9q49g7d] {
    font-size: 13px;
    color: #0f172a;
}

.attachments-card[b-xpx9q49g7d] {
    max-height: 380px;
    overflow-y: auto;
}

.attachments-head[b-xpx9q49g7d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.attachments-head h2[b-xpx9q49g7d] {
    margin: 0;
}

.btn-attach-edit[b-xpx9q49g7d] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #334155;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.btn-attach-edit:hover[b-xpx9q49g7d] {
    background: #f3f4f6;
    border-color: #a3aec7;
}

.btn-attach-edit.is-on[b-xpx9q49g7d] {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.toggle-control[b-xpx9q49g7d] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 6px 10px 6px 6px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, background-color .2s ease;
    width: fit-content;
    min-width: 104px;
}

.toggle-control:hover[b-xpx9q49g7d] {
    border-color: #94a3b8;
}

.toggle-control.on[b-xpx9q49g7d] {
    border-color: #93c5fd;
    background: #eff6ff;
}

.toggle-input[b-xpx9q49g7d] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.toggle-slider[b-xpx9q49g7d] {
    position: relative;
    width: 40px;
    height: 24px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color .2s ease;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    flex: 0 0 auto;
}

.toggle-knob[b-xpx9q49g7d] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform .2s ease;
}

.toggle-input:checked + .toggle-slider[b-xpx9q49g7d] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.toggle-input:checked + .toggle-slider .toggle-knob[b-xpx9q49g7d] {
    transform: translateX(16px);
}

.toggle-input:focus-visible + .toggle-slider[b-xpx9q49g7d] {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.toggle-text[b-xpx9q49g7d] {
    margin-left: 0;
    flex: 0 0 auto;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}

.field label[b-xpx9q49g7d] {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 14px;
}

.credit-card-field label.toggle-control[b-xpx9q49g7d] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 700;
}

/* Approval buttons live in the left column under the attachments, stacked full-width. */
.actions[b-xpx9q49g7d] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.actions button[b-xpx9q49g7d] {
    width: 100%;
}

.actions button[b-xpx9q49g7d],
.btn-secondary[b-xpx9q49g7d] {
    border-radius: 10px;
    padding: 9px 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all .2s ease;
}

.btn-secondary[b-xpx9q49g7d] {
    border-color: #d1d5db;
    background: #fff;
    color: #0f172a;
}

.btn-secondary:hover[b-xpx9q49g7d] {
    background: #f3f4f6;
    border-color: #a3aec7;
}

.btn-secondary:disabled[b-xpx9q49g7d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-approve[b-xpx9q49g7d] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2);
}

.btn-save[b-xpx9q49g7d] {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

.btn-save:hover:not(:disabled)[b-xpx9q49g7d] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
}

.btn-approve:hover:not(:disabled)[b-xpx9q49g7d] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-sendback[b-xpx9q49g7d] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
}

.btn-sendback:hover:not(:disabled)[b-xpx9q49g7d] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.btn-reject[b-xpx9q49g7d] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}

.btn-reject:hover:not(:disabled)[b-xpx9q49g7d] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.error-message[b-xpx9q49g7d] {
    margin-bottom: 14px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fed7d7;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
}

.success-message[b-xpx9q49g7d] {
    margin-bottom: 14px;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
}

.navigation-rail[b-xpx9q49g7d] {
    position: sticky;
    top: calc(4rem + 10px);
    width: 234px;
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
    padding: 12px 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: calc(100vh - 150px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.09);
}

.navigation-rail h2[b-xpx9q49g7d] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.navigation-actions[b-xpx9q49g7d] {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.navigation-actions button[b-xpx9q49g7d] {
    flex: 1;
    border-radius: 8px;
    padding: 9px 11px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s ease;
    color: #0f172a;
}

.navigation-actions button:hover:not(:disabled)[b-xpx9q49g7d] {
    background: #f3f4f6;
    border-color: #a3aec7;
}

.navigation-actions button:disabled[b-xpx9q49g7d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.navigation-list[b-xpx9q49g7d] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.navigation-item[b-xpx9q49g7d] {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all .2s ease;
    color: #0f172a;
}

.navigation-item:hover[b-xpx9q49g7d] {
    background: #f9fafb;
    border-color: #a3aec7;
}

.navigation-item.active[b-xpx9q49g7d] {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 100%);
    box-shadow: inset 0 0 0 1.5px #2563eb;
    font-weight: 600;
}

.navigation-item span[b-xpx9q49g7d] {
    font-size: 13px;
}

.navigation-item span:first-child[b-xpx9q49g7d] {
    font-weight: 600;
    color: #0f172a;
}

.navigation-item span:last-child[b-xpx9q49g7d] {
    color: #6b7280;
    font-size: 12px;
    /* Wrap long descriptions in the rail, clamped to 2 lines. */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

@media (max-width: 1050px) {
    .review-page[b-xpx9q49g7d] {
        display: block;
        padding: 14px;
    }

    .navigation-rail[b-xpx9q49g7d] {
        position: static;
        width: auto;
        border-right: 1px solid #dfe5ef;
        border-bottom: 1px solid #dfe5ef;
        top: auto;
        max-height: 320px;
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    }

    .layout-grid[b-xpx9q49g7d] {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-grid[b-xpx9q49g7d] {
        grid-template-columns: minmax(0, 1fr);
    }

    .review-content[b-xpx9q49g7d] {
        padding: 0;
    }

    .navigation-list[b-xpx9q49g7d] {
        max-height: 180px;
    }
}
/* /Components/ItemsColumn.razor.rz.scp.css */
.column[b-pg9kzaeg2m] {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: box-shadow .2s ease;
    /* The page owns the ceiling, the content owns the height: a half-empty column stays
       short, a full one grows to the space available and scrolls inside itself. (height:
       100% here made every column as tall as the tallest, which read as a bug.) Where the
       grid wraps to several rows the cell is content-sized, so this resolves to none and
       the breakpoint below caps it instead. */
    max-height: 100%;
    min-height: 0;
}

/* Wrapped to more than one row (see the owning page's grid): the columns region scrolls,
   so each column needs a readable cap of its own rather than a share of the viewport.
   1300 ≈ --mtl-page-max plus the shell padding; keep it in step with the owning pages. */
@media (max-width: 1300px) {
    .column[b-pg9kzaeg2m] {
        max-height: 460px;
    }
}

.column:hover[b-pg9kzaeg2m] {
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.10);
}

.column-fullscreen[b-pg9kzaeg2m] {
    max-height: none;
    height: 100%;
    padding-top: 36px;
}

.column-header[b-pg9kzaeg2m] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 10px;
    transition: background .2s ease;
}

.column-header:hover[b-pg9kzaeg2m] {
    background: rgba(0, 0, 0, 0.02);
}

.column:has(.icon-red) .column-header[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.04) 100%);
}

.column:has(.icon-orange) .column-header[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%);
}

.column:has(.icon-green) .column-header[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(5, 150, 105, 0.04) 100%);
}

.column:has(.icon-gray) .column-header[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.08) 0%, rgba(107, 114, 128, 0.04) 100%);
}

.column-icon[b-pg9kzaeg2m] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.icon-red[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}

.icon-orange[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
}

.icon-green[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2);
}

.icon-blue[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.column:has(.icon-blue) .column-header[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.04) 100%);
}

.column:has(.icon-blue) .badge[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
    color: #1d4ed8;
}

.column:has(.icon-blue) .item[b-pg9kzaeg2m] {
    border-left-color: #2563eb;
}

.icon-gray[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    box-shadow: 0 2px 6px rgba(107, 114, 128, 0.2);
}

.column-title[b-pg9kzaeg2m] {
    flex: 1;
}

.column-title h2[b-pg9kzaeg2m] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.column-title p[b-pg9kzaeg2m] {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.badge[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.column:has(.icon-orange) .badge[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
    color: #b45309;
}

.column:has(.icon-green) .badge[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
    color: #047857;
}

.column:has(.icon-gray) .badge[b-pg9kzaeg2m] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(107, 114, 128, 0.15) 100%);
    color: #4b5563;
}

.fullscreen-toggle[b-pg9kzaeg2m] {
    font-size: 18px;
    opacity: 0.6;
    transition: opacity .2s ease;
    margin-left: 8px;
}

.column-header:hover .fullscreen-toggle[b-pg9kzaeg2m] {
    opacity: 1;
}

.column .search-bar[b-pg9kzaeg2m] {
    margin-bottom: 14px;
}

.items-container[b-pg9kzaeg2m] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding-right: 4px;
}

.items-container[b-pg9kzaeg2m]::-webkit-scrollbar {
    width: 6px;
}

.items-container[b-pg9kzaeg2m]::-webkit-scrollbar-track {
    background: transparent;
}

.items-container[b-pg9kzaeg2m]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.items-container[b-pg9kzaeg2m]::-webkit-scrollbar-thumb:hover {
    background: #a3aec7;
}

.empty-state[b-pg9kzaeg2m] {
    margin: 24px 4px;
    color: #9ca3af;
    text-align: center;
    font-size: 14px;
    font-style: italic;
}

.item[b-pg9kzaeg2m] {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    border-left: 4px solid #ddd;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.item:hover[b-pg9kzaeg2m] {
    transform: translateX(4px);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
    border-left-color: #a3aec7;
}

.column:has(.icon-red) .item[b-pg9kzaeg2m] {
    border-left-color: #dc2626;
}

.column:has(.icon-orange) .item[b-pg9kzaeg2m] {
    border-left-color: #d97706;
}

.column:has(.icon-green) .item[b-pg9kzaeg2m] {
    border-left-color: #059669;
}

.column:has(.icon-gray) .item[b-pg9kzaeg2m] {
    border-left-color: #6b7280;
}

.item-title[b-pg9kzaeg2m] {
    font-weight: 600;
    margin: 0 0 4px 0;
    font-size: 14px;
    color: #0f172a;
    /* Long free-text descriptions: wrap (even unbroken strings), then clamp to 2 lines with an ellipsis. */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.item-subtitle[b-pg9kzaeg2m] {
    font-size: 12px;
    color: #6b7280;
    margin: 2px 0;
    font-weight: 500;
    /* Comments can be any length: clamp to 3 lines in the card; the detail view shows the full text. */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.item-subtitle span[b-pg9kzaeg2m] {
    color: #374151;
    font-weight: 700;
}

.item-meta[b-pg9kzaeg2m] {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
}

.item-amount[b-pg9kzaeg2m] {
    display: inline-flex;
    align-items: center;
    float: right;
    font-weight: 600;
    color: #059669;
    font-size: 14px;
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ecfdf5;
}
/* /Components/LoadingIndicator.razor.rz.scp.css */
.spin-wrap[b-jf1p09ubzw] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--mtl-text-muted);
    font-size: 14px;
}

.spin-ring[b-jf1p09ubzw] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--mtl-border);
    border-top-color: var(--mtl-accent);
    border-radius: 50%;
    animation: mtl-spin-b-jf1p09ubzw .8s linear infinite;
}

.small[b-jf1p09ubzw] {
    gap: 8px;
    font-size: 13px;
}

.small .spin-ring[b-jf1p09ubzw] {
    width: 15px;
    height: 15px;
    border-width: 2px;
}

.large .spin-ring[b-jf1p09ubzw] {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.spin-label[b-jf1p09ubzw] {
    font-weight: 500;
}

@keyframes mtl-spin-b-jf1p09ubzw {
    to { transform: rotate(360deg); }
}

/* A spinner is essential status, so it stays under reduced motion — just gentler. */
@media (prefers-reduced-motion: reduce) {
    .spin-ring[b-jf1p09ubzw] {
        animation-duration: 2s;
    }
}
/* /Components/MileageColumn.razor.rz.scp.css */
.column[b-7hbnwizdqz] {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: box-shadow .2s ease;
    /* The page owns the ceiling, the content owns the height: a half-empty column stays
       short, a full one grows to the space available and scrolls inside itself. (height:
       100% here made every column as tall as the tallest, which read as a bug.) Where the
       grid wraps to several rows the cell is content-sized, so this resolves to none and
       the breakpoint below caps it instead. */
    max-height: 100%;
    min-height: 0;
}

/* Wrapped to more than one row (see the owning page's grid): the columns region scrolls,
   so each column needs a readable cap of its own rather than a share of the viewport.
   1300 ≈ --mtl-page-max plus the shell padding; keep it in step with the owning pages. */
@media (max-width: 1300px) {
    .column[b-7hbnwizdqz] {
        max-height: 460px;
    }
}

.column:hover[b-7hbnwizdqz] {
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.10);
}

.column-fullscreen[b-7hbnwizdqz] {
    max-height: none;
    height: 100%;
    padding-top: 36px;
}

.column-header[b-7hbnwizdqz] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 10px;
    transition: background .2s ease;
}

.column-header:hover[b-7hbnwizdqz] {
    background: rgba(0, 0, 0, 0.02);
}

.column:has(.icon-red) .column-header[b-7hbnwizdqz] {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.04) 100%);
}

.column:has(.icon-orange) .column-header[b-7hbnwizdqz] {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%);
}

.column:has(.icon-green) .column-header[b-7hbnwizdqz] {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(5, 150, 105, 0.04) 100%);
}

.column:has(.icon-gray) .column-header[b-7hbnwizdqz] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.08) 0%, rgba(107, 114, 128, 0.04) 100%);
}

.column-icon[b-7hbnwizdqz] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.icon-red[b-7hbnwizdqz] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}

.icon-orange[b-7hbnwizdqz] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
}

.icon-green[b-7hbnwizdqz] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2);
}

.icon-blue[b-7hbnwizdqz] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.column:has(.icon-blue) .column-header[b-7hbnwizdqz] {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.04) 100%);
}

.column:has(.icon-blue) .badge[b-7hbnwizdqz] {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
    color: #1d4ed8;
}

.column:has(.icon-blue) .item[b-7hbnwizdqz] {
    border-left-color: #2563eb;
}

.icon-gray[b-7hbnwizdqz] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    box-shadow: 0 2px 6px rgba(107, 114, 128, 0.2);
}

.column-title[b-7hbnwizdqz] {
    flex: 1;
}

.column-title h2[b-7hbnwizdqz] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.column-title p[b-7hbnwizdqz] {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.badge[b-7hbnwizdqz] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.column:has(.icon-orange) .badge[b-7hbnwizdqz] {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
    color: #b45309;
}

.column:has(.icon-green) .badge[b-7hbnwizdqz] {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
    color: #047857;
}

.column:has(.icon-gray) .badge[b-7hbnwizdqz] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(107, 114, 128, 0.15) 100%);
    color: #4b5563;
}

.fullscreen-toggle[b-7hbnwizdqz] {
    font-size: 18px;
    opacity: 0.6;
    transition: opacity .2s ease;
    margin-left: 8px;
}

.column-header:hover .fullscreen-toggle[b-7hbnwizdqz] {
    opacity: 1;
}

.column .search-bar[b-7hbnwizdqz] {
    margin-bottom: 14px;
}

.items-container[b-7hbnwizdqz] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding-right: 4px;
}

.items-container[b-7hbnwizdqz]::-webkit-scrollbar {
    width: 6px;
}

.items-container[b-7hbnwizdqz]::-webkit-scrollbar-track {
    background: transparent;
}

.items-container[b-7hbnwizdqz]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.items-container[b-7hbnwizdqz]::-webkit-scrollbar-thumb:hover {
    background: #a3aec7;
}

.empty-state[b-7hbnwizdqz] {
    margin: 24px 4px;
    color: #9ca3af;
    text-align: center;
    font-size: 14px;
    font-style: italic;
}

.item[b-7hbnwizdqz] {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    border-left: 4px solid #ddd;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.item:hover[b-7hbnwizdqz] {
    transform: translateX(4px);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
    border-left-color: #a3aec7;
}

.column:has(.icon-red) .item[b-7hbnwizdqz] {
    border-left-color: #dc2626;
}

.column:has(.icon-orange) .item[b-7hbnwizdqz] {
    border-left-color: #d97706;
}

.column:has(.icon-green) .item[b-7hbnwizdqz] {
    border-left-color: #059669;
}

.column:has(.icon-gray) .item[b-7hbnwizdqz] {
    border-left-color: #6b7280;
}

.item-title[b-7hbnwizdqz] {
    font-weight: 600;
    margin: 0 0 4px 0;
    font-size: 14px;
    color: #0f172a;
    /* From → To can hit the 200-char cap each: wrap, then clamp to 2 lines with an ellipsis. */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.item-subtitle[b-7hbnwizdqz] {
    font-size: 12px;
    color: #6b7280;
    margin: 2px 0;
    font-weight: 500;
    /* Description can be any length: clamp to 3 lines in the card; the detail view shows the full text. */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.item-subtitle span[b-7hbnwizdqz] {
    color: #374151;
    font-weight: 700;
}

.item-meta[b-7hbnwizdqz] {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
}

.item-amount[b-7hbnwizdqz] {
    display: inline-flex;
    align-items: center;
    float: right;
    font-weight: 600;
    color: #059669;
    font-size: 14px;
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ecfdf5;
}
/* /Components/MileageReviewPanel.razor.rz.scp.css */
/* Skinned to match the receipt item review screen (ItemReviewPanel) — same page
   gradient, gradient top bar, cards, inputs, toggles, value box and buttons. */
.mileage-review[b-j987d2t4p4] {
    min-height: calc(100vh - 4rem);
    padding: 24px;
    background:
        radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.14), transparent 35%),
        radial-gradient(circle at 95% 5%, rgba(14, 165, 233, 0.1), transparent 32%),
        linear-gradient(180deg, #f8fafc 0%, #eef3fb 100%);
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.review-header[b-j987d2t4p4] {
    max-width: var(--mtl-form-max);
    margin: 0 auto 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border: 1px solid #d8e2f1;
    border-radius: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.review-header h1[b-j987d2t4p4] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
}

.review-header p[b-j987d2t4p4] {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 14px;
}

/* ── Banners ──────────────────────────────────────────────────────────────── */
.error-message[b-j987d2t4p4],
.success-message[b-j987d2t4p4] {
    max-width: var(--mtl-form-max);
    margin: 0 auto 14px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
}

.error-message[b-j987d2t4p4] {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fed7d7;
}

.success-message[b-j987d2t4p4] {
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.review-grid[b-j987d2t4p4] {
    max-width: var(--mtl-form-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .review-grid[b-j987d2t4p4] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.card[b-j987d2t4p4] {
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    transition: box-shadow .2s ease, border-color .2s ease;
}

.card:hover[b-j987d2t4p4] {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
    border-color: #cfd8e6;
}

.card h2[b-j987d2t4p4] {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

/* ── Fields ───────────────────────────────────────────────────────────────── */
.field[b-j987d2t4p4] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}

.field label[b-j987d2t4p4],
.field-label[b-j987d2t4p4] {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 14px;
}

.field input[type="text"][b-j987d2t4p4],
.field input[type="date"][b-j987d2t4p4],
.field select[b-j987d2t4p4],
.field textarea[b-j987d2t4p4] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.field input[type="text"]:hover[b-j987d2t4p4],
.field input[type="date"]:hover[b-j987d2t4p4],
.field select:hover[b-j987d2t4p4],
.field textarea:hover[b-j987d2t4p4] {
    border-color: #a3aec7;
}

.field input[type="text"]:focus[b-j987d2t4p4],
.field input[type="date"]:focus[b-j987d2t4p4],
.field select:focus[b-j987d2t4p4],
.field textarea:focus[b-j987d2t4p4] {
    outline: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.field select[b-j987d2t4p4] {
    cursor: pointer;
}

.field select:disabled[b-j987d2t4p4] {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.field textarea[b-j987d2t4p4] {
    min-height: 72px;
    resize: vertical;
}

.input-hint[b-j987d2t4p4] {
    margin-top: -1px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.readonly-comment[b-j987d2t4p4] {
    margin: 0;
    color: #334155;
    font-size: 13px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 9px 11px;
}

/* ── Toggle pill (matches the item review toggles) ────────────────────────── */
.field label.toggle-control[b-j987d2t4p4] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 6px 10px 6px 6px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, background-color .2s ease;
    width: fit-content;
    min-width: 104px;
    font-weight: 700;
    font-size: 12px;
}

.field label.toggle-control:hover[b-j987d2t4p4] {
    border-color: #94a3b8;
}

.field label.toggle-control.on[b-j987d2t4p4] {
    border-color: #93c5fd;
    background: #eff6ff;
}

.toggle-input[b-j987d2t4p4] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.toggle-slider[b-j987d2t4p4] {
    position: relative;
    width: 40px;
    height: 24px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color .2s ease;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    flex: 0 0 auto;
}

.toggle-knob[b-j987d2t4p4] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform .2s ease;
}

.toggle-input:checked + .toggle-slider[b-j987d2t4p4] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.toggle-input:checked + .toggle-slider .toggle-knob[b-j987d2t4p4] {
    transform: translateX(16px);
}

.toggle-input:focus-visible + .toggle-slider[b-j987d2t4p4] {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.toggle-text[b-j987d2t4p4] {
    flex: 0 0 auto;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}

/* ── Value summary box (matches the item review value summary) ────────────── */
.value-readout[b-j987d2t4p4] {
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: linear-gradient(180deg, #eff6ff 0%, #eaf2ff 100%);
    padding: 12px 14px;
}

.value-readout .value-total[b-j987d2t4p4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.value-readout .value-total span[b-j987d2t4p4] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #475569;
}

.value-readout .value-total strong[b-j987d2t4p4] {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.value-readout .input-hint[b-j987d2t4p4] {
    display: block;
    margin-top: 8px;
}

/* ── Actions (stacked full-width gradient buttons, like the item screen) ───── */
.actions[b-j987d2t4p4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.actions button[b-j987d2t4p4],
.btn-secondary[b-j987d2t4p4] {
    border-radius: 10px;
    padding: 9px 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all .2s ease;
}

.actions button[b-j987d2t4p4] {
    width: 100%;
}

.actions button:disabled[b-j987d2t4p4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-save[b-j987d2t4p4] {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

.btn-save:hover:not(:disabled)[b-j987d2t4p4] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
}

.btn-approve[b-j987d2t4p4] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2);
}

.btn-approve:hover:not(:disabled)[b-j987d2t4p4] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-sendback[b-j987d2t4p4] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
}

.btn-sendback:hover:not(:disabled)[b-j987d2t4p4] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.btn-reject[b-j987d2t4p4] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}

.btn-reject:hover:not(:disabled)[b-j987d2t4p4] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Back to Queue */
.btn-secondary[b-j987d2t4p4] {
    flex: 0 0 auto;
    border-color: #d1d5db;
    background: #fff;
    color: #0f172a;
    white-space: nowrap;
}

.btn-secondary:hover[b-j987d2t4p4] {
    background: #f3f4f6;
    border-color: #a3aec7;
}
/* /Components/PageLoading.razor.rz.scp.css */
.page-loading[b-2jdl3ocyy6] {
    display: flex;
    justify-content: center;
    padding: 56px 16px;
}

.page-loading[b-2jdl3ocyy6]  .spin-wrap {
    flex-direction: column;
    gap: 14px;
}
/* /Components/Pagination.razor.rz.scp.css */
.pager[b-zpuhqehy6i] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.35rem 0.5rem 0.1rem;
}

.pager-btn[b-zpuhqehy6i] {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.pager-btn:hover:not(:disabled)[b-zpuhqehy6i] {
    background: #f2f4f7;
}

.pager-btn:disabled[b-zpuhqehy6i] {
    opacity: 0.45;
    cursor: default;
}

.pager-status[b-zpuhqehy6i] {
    font-size: 0.8rem;
    color: #667085;
    min-width: 7rem;
    text-align: center;
    white-space: nowrap;
}
/* /Components/ReceiptUploader.razor.rz.scp.css */
.receipt-uploader[b-2y6u8oz9o0] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---- Dropzone ---- */
.rz-dropzone[b-2y6u8oz9o0] {
    position: relative;
    border: 2px dashed #c7d2e3;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rz-dropzone:hover[b-2y6u8oz9o0],
.rz-dropzone.drag-over[b-2y6u8oz9o0] {
    border-color: #2563eb;
    background: #eef4ff;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.14);
}

.rz-dropzone.drag-over[b-2y6u8oz9o0] {
    transform: translateY(-1px);
}

.rz-dropzone.is-disabled[b-2y6u8oz9o0] {
    opacity: 0.55;
    pointer-events: none;
}

.rz-dropzone-inner[b-2y6u8oz9o0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
}

.rz-input[b-2y6u8oz9o0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.rz-up-icon[b-2y6u8oz9o0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    margin-bottom: 6px;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}

.rz-up-title[b-2y6u8oz9o0] {
    font-weight: 700;
    color: #0f172a;
    font-size: 14px;
}

.rz-up-sub[b-2y6u8oz9o0] {
    color: #64748b;
    font-size: 13px;
}

.rz-up-browse[b-2y6u8oz9o0] {
    color: #2563eb;
    font-weight: 700;
    text-decoration: underline;
}

/* ---- Preview grid ---- */
.rz-grid[b-2y6u8oz9o0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.rz-card[b-2y6u8oz9o0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rz-thumb[b-2y6u8oz9o0] {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid #dbe5f2;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.rz-thumb:hover[b-2y6u8oz9o0] {
    border-color: #90b4e5;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
    transform: translateY(-2px);
}

.rz-thumb.is-file[b-2y6u8oz9o0] {
    cursor: default;
}

.rz-thumb img[b-2y6u8oz9o0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rz-file-glyph[b-2y6u8oz9o0],
.rz-file-glyph a[b-2y6u8oz9o0] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

/* shown when a receipt's preview can't be loaded from storage */
.rz-unavailable[b-2y6u8oz9o0] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    text-align: center;
    color: #94a3b8;
}

.rz-unavailable-text[b-2y6u8oz9o0] {
    font-size: 11px;
    font-weight: 600;
}

/* zoom badge over images */
.rz-zoom[b-2y6u8oz9o0] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
    backdrop-filter: blur(2px);
}

.rz-thumb.is-image:hover .rz-zoom[b-2y6u8oz9o0] {
    opacity: 1;
}

.rz-remove[b-2y6u8oz9o0] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}

.rz-thumb:hover .rz-remove[b-2y6u8oz9o0] {
    opacity: 1;
}

.rz-remove:hover[b-2y6u8oz9o0] {
    background: #dc2626;
}

.rz-remove:disabled[b-2y6u8oz9o0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rz-meta[b-2y6u8oz9o0] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rz-name[b-2y6u8oz9o0] {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rz-size[b-2y6u8oz9o0] {
    font-size: 11px;
    color: #94a3b8;
}

.rz-empty[b-2y6u8oz9o0] {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
}

/* ---- Storage-failure states ---- */
.rz-storage-warning[b-2y6u8oz9o0] {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
}

/* ---- Lightbox ---- */
.rz-lightbox[b-2y6u8oz9o0] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: rz-fade-b-2y6u8oz9o0 .15s ease;
    overflow: hidden; /* pan/zoom moves the image by transform, never by scrolling */
}

@keyframes rz-fade-b-2y6u8oz9o0 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rz-lightbox img[b-2y6u8oz9o0] {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    cursor: zoom-in;
    user-select: none;
    touch-action: none; /* pointer events drive the pan */
    will-change: transform;
}

/* ---- Lightbox zoom controls (wired by initReceiptLightbox) ---- */
.rz-zoom-controls[b-2y6u8oz9o0] {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 4px;
    z-index: 2001;
}

.rz-zoom-controls button[b-2y6u8oz9o0] {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    min-width: 34px;
    height: 30px;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.85;
}

.rz-zoom-controls button:hover[b-2y6u8oz9o0] {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

.rz-zoom-controls .rz-zoom-level[b-2y6u8oz9o0] {
    font-size: 12.5px;
    min-width: 54px;
    font-variant-numeric: tabular-nums;
}

.rz-zoom-hint[b-2y6u8oz9o0] {
    position: fixed;
    bottom: 62px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    pointer-events: none;
}

.rz-lightbox-close[b-2y6u8oz9o0] {
    position: fixed;
    top: 18px;
    right: 26px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
}

.rz-lightbox-close:hover[b-2y6u8oz9o0] {
    opacity: 1;
}
/* /Components/ReviewQueueView.razor.rz.scp.css */
.admin-page[b-m5ydvp4mex] {
    padding: 28px 24px;
    max-width: var(--mtl-page-max);
    margin: 0 auto;
}

.admin-header[b-m5ydvp4mex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    gap: 16px;
}

.admin-header h1[b-m5ydvp4mex] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.admin-header p[b-m5ydvp4mex] {
    margin: 6px 0 0 0;
    color: #667085;
    font-size: 14px;
}

.queue-count[b-m5ydvp4mex] {
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, #0b57d0 0%, #0a4ba8 100%);
    border-radius: 10px;
    min-width: 48px;
    text-align: center;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(11, 87, 208, 0.2);
    flex-shrink: 0;
}

.queue-columns[b-m5ydvp4mex] {
    /* Takes the slack the fixed chrome above it leaves. */
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(120px, 1fr);
    justify-content: center;
    gap: 12px;
}

.queue-column[b-m5ydvp4mex] {
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    /* Height comes from the page's flex chain now, not a hand-counted
       reserve: the card fills the row and .column-body scrolls inside it. */
    min-height: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: box-shadow .2s ease;
}

.queue-column:hover[b-m5ydvp4mex] {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.column-header[b-m5ydvp4mex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #dfe5ef;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.05) 0%, rgba(2, 132, 199, 0.02) 100%);
}

.column-header.pending[b-m5ydvp4mex] {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, rgba(2, 132, 199, 0.02) 100%);
}

.column-title h2[b-m5ydvp4mex] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.column-title p[b-m5ydvp4mex] {
    margin: 4px 0 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 500;
}

.badge[b-m5ydvp4mex] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 1px solid #d1d5db;
    min-width: 36px;
    text-align: center;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.column-body[b-m5ydvp4mex] {
    padding: 14px 16px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.queue-item[b-m5ydvp4mex] {
    width: 100%;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    text-align: left;
    padding: 13px 14px;
    cursor: pointer;
    transition: all .18s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.item-row[b-m5ydvp4mex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.queue-item:hover[b-m5ydvp4mex] {
    border-color: #a3aec7;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
    transform: translateY(-2px);
}

.queue-item:active[b-m5ydvp4mex] {
    transform: translateY(0);
}

.queue-item:focus-visible[b-m5ydvp4mex] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Let the text column shrink inside the flex row so long values wrap instead of pushing the date off. */
.item-row > div:first-child[b-m5ydvp4mex] {
    min-width: 0;
}

.item-title[b-m5ydvp4mex] {
    font-weight: 600;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 14px;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.item-meta[b-m5ydvp4mex] {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.item-date[b-m5ydvp4mex] {
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    white-space: nowrap;
}

.empty-message[b-m5ydvp4mex] {
    margin: 24px 4px;
    color: #9ca3af;
    text-align: center;
    font-size: 14px;
    font-style: italic;
}

.error-message[b-m5ydvp4mex] {
    margin-bottom: 12px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 10px 12px;
    border-radius: 8px;
}

@media (max-width: 900px) {
    .admin-page[b-m5ydvp4mex] {
        padding: 16px;
    }

    .queue-column[b-m5ydvp4mex] {
        min-height: 380px;
        max-height: none;
    }
}
/* /Components/RollbackDialogs.razor.rz.scp.css */
/* Moved verbatim from Rollback.razor.css when the dialogs became a shared component. */

.rb-overlay[b-i2ebpcmmzx] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.rb-dialog[b-i2ebpcmmzx] {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
}

.rb-dialog-wide[b-i2ebpcmmzx] {
    max-width: 640px;
}

.rb-dialog h2[b-i2ebpcmmzx] {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.rb-dialog-item[b-i2ebpcmmzx] {
    margin: 0 0 10px 0;
    color: #667085;
    font-size: 13px;
    font-weight: 600;
}

.rb-dialog-text[b-i2ebpcmmzx] {
    margin: 0 0 14px 0;
    color: #334155;
    font-size: 14px;
}

.rb-dialog label[b-i2ebpcmmzx] {
    display: block;
    margin: 10px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.rb-dialog textarea[b-i2ebpcmmzx] {
    width: 100%;
    min-height: 84px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.rb-dialog-actions[b-i2ebpcmmzx] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-end;
}

.rb-fix-grid[b-i2ebpcmmzx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
}

.rb-field[b-i2ebpcmmzx] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* let grid tracks shrink inputs instead of overflowing the dialog */
}

.rb-field-full[b-i2ebpcmmzx] {
    grid-column: 1 / -1;
}

.rb-field input[type="text"][b-i2ebpcmmzx],
.rb-field select[b-i2ebpcmmzx] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    background: #fff;
}

.rb-field select:disabled[b-i2ebpcmmzx] {
    background: #f8fafc;
    color: #94a3b8;
}

.rb-field-label[b-i2ebpcmmzx] {
    display: block;
    margin: 10px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* CLIENT-FACING marker on the Report Annotation — same amber treatment as the
   Admin/Cost review screens; permanent, unlike the placeholder it replaces. */
.client-facing-badge[b-i2ebpcmmzx] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid #f9ab00;
    border-radius: 999px;
    background: #fef7e0;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    vertical-align: middle;
}

.client-facing-hint[b-i2ebpcmmzx] {
    display: block;
    margin-top: 4px;
    color: #92400e;
    font-size: 12px;
    line-height: 1.35;
}

/* Same yes/no toggle treatment as the Admin/Cost review screens.
   The .rb-dialog label rule outranks a bare class, so pin the toggle explicitly. */
.rb-dialog label.toggle-control[b-i2ebpcmmzx] {
    display: inline-flex;
    margin: 0;
}

.toggle-control[b-i2ebpcmmzx] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 6px 10px 6px 6px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, background-color .2s ease;
    width: fit-content;
    min-width: 104px;
    margin: 0;
}

.toggle-control:hover[b-i2ebpcmmzx] {
    border-color: #94a3b8;
}

.toggle-control.on[b-i2ebpcmmzx] {
    border-color: #93c5fd;
    background: #eff6ff;
}

.toggle-input[b-i2ebpcmmzx] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.toggle-slider[b-i2ebpcmmzx] {
    position: relative;
    width: 40px;
    height: 24px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color .2s ease;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    flex: 0 0 auto;
}

.toggle-knob[b-i2ebpcmmzx] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform .2s ease;
}

.toggle-input:checked + .toggle-slider[b-i2ebpcmmzx] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.toggle-input:checked + .toggle-slider .toggle-knob[b-i2ebpcmmzx] {
    transform: translateX(16px);
}

.toggle-input:focus-visible + .toggle-slider[b-i2ebpcmmzx] {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.toggle-text[b-i2ebpcmmzx] {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}

/* The dialogs render their own buttons and error strip, so the styles live here too. */
.btn-primary[b-i2ebpcmmzx] {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary:disabled[b-i2ebpcmmzx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-i2ebpcmmzx] {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    color: #334155;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.btn-secondary:disabled[b-i2ebpcmmzx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.error-message[b-i2ebpcmmzx] {
    margin-bottom: 12px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 10px 12px;
    border-radius: 8px;
}

@media (max-width: 900px) {
    .rb-fix-grid[b-i2ebpcmmzx] {
        grid-template-columns: 1fr;
    }
}
/* /Components/RollbackItemActions.razor.rz.scp.css */
/* Sits directly under the detail pages' top bar, so it follows the same notice idiom as
   their .fix-notice band: same 14px gap, same 12px radius. Kept white with the header
   card's border rather than a tint of its own — the container and top bar are already
   two washes of colour, and a third read as noise. */

.rollback-panel[b-55vh13ul0v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 14px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #d9e3f2;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.rollback-panel-text[b-55vh13ul0v] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.rollback-panel-title[b-55vh13ul0v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

/* The stage carries the only colour — enough to identify the band without shouting. */
.rollback-stage[b-55vh13ul0v] {
    padding: 3px 10px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
}

.rollback-panel-subtitle[b-55vh13ul0v] {
    font-size: 13px;
    color: #64748b;
    overflow-wrap: anywhere;
}

.rollback-panel-actions[b-55vh13ul0v] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Matches the host pages' own .btn-submit / .btn-cancel so the rollback action carries
   no more weight than the item's own buttons. */
.btn-primary[b-55vh13ul0v] {
    background: #2563eb;
    color: #ffffff;
    border: 1px solid transparent;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    transition: all 0.2s ease;
}

.btn-primary:hover[b-55vh13ul0v] {
    background: #1d4ed8;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.26);
    transform: translateY(-1px);
}

.btn-secondary[b-55vh13ul0v] {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-55vh13ul0v] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.success-message[b-55vh13ul0v] {
    margin-top: 14px;
    color: #0d652d;
    background: #e6f4ea;
    border: 1px solid #b7dfc2;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
}

.error-message[b-55vh13ul0v] {
    margin-top: 14px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
}

@media (max-width: 768px) {
    .rollback-panel-actions[b-55vh13ul0v] {
        width: 100%;
    }

    .rollback-panel-actions button[b-55vh13ul0v] {
        flex: 1;
    }
}
/* /Components/SessionExpiredNotice.razor.rz.scp.css */
/* Lifted verbatim from the four mobile pages this component replaced, so the notice looks
   exactly as it did when each page carried its own copy. */

.session-expired[b-75bw5i242k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--mtl-radius);
    color: #b45309;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.signin-button[b-75bw5i242k] {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #fde68a;
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
    color: #b45309;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
/* /Components/StatusScreen.razor.rz.scp.css */
.status-screen[b-yfx8x7ef88] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 460px;
    margin: 0 auto;
    padding: 48px 24px;
}

.status-icon[b-yfx8x7ef88] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 18px;
}

.status-icon svg[b-yfx8x7ef88] {
    width: 26px;
    height: 26px;
}

.icon-slate[b-yfx8x7ef88] {
    background: #f1f5f9;
    color: var(--mtl-text-secondary);
}

.icon-amber[b-yfx8x7ef88] {
    background: #fef7e0;
    color: #b45309;
}

.icon-red[b-yfx8x7ef88] {
    background: var(--mtl-danger-bg);
    color: var(--mtl-danger);
}

.icon-green[b-yfx8x7ef88] {
    background: #ecfdf3;
    color: #067647;
}

h1[b-yfx8x7ef88] {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mtl-text);
}

.status-message[b-yfx8x7ef88] {
    margin: 0;
    color: var(--mtl-text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}

.status-action[b-yfx8x7ef88] {
    display: inline-block;
    margin-top: 22px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    background: var(--mtl-accent);
    color: #ffffff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease;
}

.status-action:hover[b-yfx8x7ef88] {
    background: var(--mtl-accent-strong);
    color: #ffffff;
}
/* /Components/SweepOptInToggle.razor.rz.scp.css */
/* Sits under the My Claims header, right-aligned — same chip language as the
   queue pages' digest toggles. */
.sweep-toggle[b-16t6y1nnww] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 2px 0 10px;
}

.sweep-label[b-16t6y1nnww] {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 2px;
}

.sweep-chip[b-16t6y1nnww] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
}

.sweep-chip:hover:not(:disabled)[b-16t6y1nnww] {
    border-color: #93c5fd;
    color: #1d4ed8;
}

.sweep-chip:disabled[b-16t6y1nnww] {
    opacity: 0.6;
    cursor: not-allowed;
}

.sweep-chip.on[b-16t6y1nnww] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.sweep-state[b-16t6y1nnww] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}

.sweep-chip.on .sweep-state[b-16t6y1nnww] {
    background: #2563eb;
    color: #fff;
}
/* /Layout/AccountMenu.razor.rz.scp.css */
/* Compact identity for the narrow desktop header. MainLayout shows this only below
   700px (the .compact-account gate), so nothing here can leak into the wide header or
   the mobile layout's own use of LoginDisplay. */
.account-menu[b-lin482p601] {
    position: relative;
    display: inline-flex;
}

/* Same face as LoginDisplay's .avatar, sized as a tap target — the chip must read as
   "that avatar, now a button". */
.account-chip[b-lin482p601] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: var(--mtl-accent-soft);
    color: var(--mtl-accent-strong);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.account-chip:hover[b-lin482p601] {
    border-color: #a3aec7;
}

.account-chip[aria-expanded="true"][b-lin482p601] {
    box-shadow: 0 0 0 3px #dbeafe;
}

/* Impersonation must stay visible with the acting-as chrome folded into the panel —
   the ring is the collapsed header's only always-on "this session wears another hat".
   position: relative anchors the corner badge below, the ring's non-color twin. */
.account-chip.acting[b-lin482p601] {
    position: relative;
    border: 2px solid #2563eb;
}

/* WCAG 1.4.1: the ring alone is a color-only cue, and the title needs a hover — the
   filled corner glyph marks the acting state for touch users too. */
.acting-badge[b-lin482p601] {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    /* The asterisk glyph sits high in its em box — nudge it optically centered. */
    padding-top: 3px;
}

/* Anchored under the chip; z-index must beat the header's other children (same reason
   as NavMenu's .menu-panel). Width is viewport-guarded so the right-anchored card can
   never spill past the screen edge. No align-items: the reused cluster pieces stretch
   full width, which keeps the impersonation picker's own right-anchored panel inside
   the viewport. */
.account-panel[b-lin482p601] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 30;
    width: min(17rem, calc(100vw - 1.5rem));
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem;
    background-color: #ffffff;
    border: 1px solid #dbe3ee;
    border-radius: 0.75rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    text-align: left;
}

/* The reused controls arrive styled for one wide row; in the card they wrap instead of
   forcing the card wider than the guard above allows. */
.account-panel[b-lin482p601]  .login-display {
    display: flex;
    flex-wrap: wrap;
}

.account-panel[b-lin482p601]  .user-label {
    white-space: normal;
}

.account-panel[b-lin482p601]  .impersonation {
    display: flex;
    flex-wrap: wrap;
}

/* Same quiet doorway as MainLayout's .mobile-link, restyled for the card. */
.account-mobile-link[b-lin482p601] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
}

.account-mobile-link:hover[b-lin482p601] {
    color: #2563eb;
    text-decoration: underline;
}

/* Signed out there is no cluster to fold — the plain link is the whole control. */
.sign-in[b-lin482p601] {
    color: var(--mtl-accent);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.sign-in:hover[b-lin482p601] {
    text-decoration: underline;
}
/* /Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-z1c3e52eot] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1100px 550px at 50% -10%, #e8effc 0%, rgba(232, 239, 252, 0) 60%),
        var(--mtl-bg);
}

.auth-card[b-z1c3e52eot] {
    width: min(430px, 100%);
    padding: 40px 36px 44px;
    background: var(--mtl-surface);
    border: 1px solid var(--mtl-border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    text-align: center;
}

/* Sized by width against the mark's 742 × 640 ratio — a square box would letterbox the
   tail and shrink the disc below the old PNG's optical size. */
.auth-logo[b-z1c3e52eot] {
    display: block;
    width: 104px;
    aspect-ratio: 742 / 640;
    margin: 0 auto 10px;
}

.auth-brand[b-z1c3e52eot] {
    margin-bottom: 28px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--mtl-text);
}
/* /Layout/ImpersonationPicker.razor.rz.scp.css */
/* Two homes: the sidebar's bottom berth (MainLayout restyles it to a stacked column via
   ::deep) and the compact AccountMenu card below 700px, which uses the row layout here.
   The toggle is deliberately prominent — a filled button in the same blue family as the
   nav's acting-as zone, so it reads as a primary action at a glance — while the Exit
   chip and acting-as pill stay quiet chrome. */
.impersonation[b-4d9ykhuhi0] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

.acting-as[b-4d9ykhuhi0] {
    padding: 0.25rem 0.6rem;
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    background-color: #eff6ff;
    color: #1e3a8a;
    font-size: 0.8rem;
    white-space: nowrap;
}

.impersonate-toggle[b-4d9ykhuhi0] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid #2563eb;
    border-radius: 9999px;
    background-color: #2563eb;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.impersonate-toggle:hover[b-4d9ykhuhi0] {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.impersonate-icon[b-4d9ykhuhi0] {
    display: inline-flex;
    width: 1em;
    height: 1em;
}

.impersonate-icon svg[b-4d9ykhuhi0] {
    width: 100%;
    height: 100%;
}

.exit-button[b-4d9ykhuhi0] {
    padding: 0.25rem 0.6rem;
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    background-color: #ffffff;
    color: #1e3a8a;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.exit-button:hover[b-4d9ykhuhi0] {
    background-color: #eff6ff;
    color: #1e3a8a;
}

/* Anchored under the control; the header is sticky at z-index 10, so the panel needs its
   own stacking to float over the page content below. Width is viewport-guarded so the
   right-anchored panel can never spill past the screen edge. The right anchor holds in
   BOTH homes: the wide header's right corner, and the compact AccountMenu card — which
   stretches this control full-width precisely so right:0 stays near the screen edge. */
.picker-panel[b-4d9ykhuhi0] {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 20;
    width: min(24rem, calc(100vw - 2rem));
    padding: 0.5rem;
    border: 1px solid #dbe3ee;
    border-radius: 0.5rem;
    background-color: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    text-align: left;
}

.picker-search[b-4d9ykhuhi0] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    font-size: 0.9rem;
}

.picker-list[b-4d9ykhuhi0] {
    max-height: min(60vh, 30rem);
    margin: 0.4rem 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.picker-candidate[b-4d9ykhuhi0] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: none;
    border-radius: 0.375rem;
    background: none;
    text-align: left;
    cursor: pointer;
}

.picker-candidate:hover[b-4d9ykhuhi0] {
    background-color: #e9f1ff;
}

.picker-name[b-4d9ykhuhi0] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
}

.picker-email[b-4d9ykhuhi0] {
    font-size: 0.8rem;
    font-weight: 400;
    color: #64748b;
}

.picker-loading[b-4d9ykhuhi0],
.picker-error[b-4d9ykhuhi0] {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: #64748b;
}

.picker-error[b-4d9ykhuhi0] {
    color: #b91c1c;
}
/* /Layout/LoginDisplay.razor.rz.scp.css */
.login-display[b-84h7sojr6y] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.avatar[b-84h7sojr6y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--mtl-accent-soft);
    color: var(--mtl-accent-strong);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.user-label[b-84h7sojr6y] {
    font-size: 0.95rem;
    color: #4b5563;
    font-weight: 600;
    white-space: nowrap;
}

.sign-out[b-84h7sojr6y] {
    border: 1px solid #d1d5db;
    background: var(--mtl-surface);
    color: var(--mtl-text);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.sign-out:hover[b-84h7sojr6y] {
    background: #f3f4f6;
    border-color: #a3aec7;
}

.sign-in[b-84h7sojr6y] {
    color: var(--mtl-accent);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.sign-in:hover[b-84h7sojr6y] {
    text-decoration: underline;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Exactly the viewport, not "at least" it. min-height would let a tall page stretch the
   shell, which is precisely what a fitting page must not be able to do — the leftover
   height it is handed has to be a real number. Scrolling pages still scroll: .content
   below is the one scroll container, so the scrollbar simply sits on the content area
   instead of the document, and the sidebar + header stay put either way.
   Below 640px of viewport height (heavy browser zoom, short laptops) this contract
   stands down — the media query at the bottom lets the shell grow with its content and
   the whole document scroll, sidebar and all. */
.app-shell[b-xzsz5k7oh1] {
    height: 100vh;
    height: 100dvh;
    display: flex;
    overflow: hidden;
    background-color: #f8fafc;
}

/* The sidebar column: brand on top, the vertical nav (NavMenu) filling the rest.
   Fixed-basis, never shrinking — the content column owns all the flexible width.
   Below 900px it narrows to an icon-only rail (the width var is what NavMenu's own
   scoped rules key off, indirectly, via the same breakpoint). */
.side-nav[b-xzsz5k7oh1] {
    flex: 0 0 15rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-right: 1px solid #dbe3ee;
}

/* Mark beside the wordmark, on one 4rem row. The height is not decorative: .top-menu is
   also 4rem, so this is what lines the sidebar's bottom border up with the header's. */
.brand[b-xzsz5k7oh1] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 4rem;
    flex: none;
    padding: 0 1.1rem;
    border-bottom: 1px solid #e8eef7;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
}

/* The MTL piggy bank (teal disc + pixel-scatter ship as the bank's body), animated —
   the coin drop is the sidebar's one bit of life. Width-sized against the mark's
   742 × 640 ratio so the tail never letterboxes: 3.25rem wide lands at 2.8rem tall,
   which clears the 4rem row, and leaves the wordmark its width in the 15rem column. */
.brand-logo[b-xzsz5k7oh1] {
    flex: none;
    width: 3.25rem;
    aspect-ratio: 742 / 640;
}

/* The impersonation picker's sidebar berth, pinned under the nav. */
.side-actions[b-xzsz5k7oh1] {
    flex: none;
    padding: 0.75rem;
    border-top: 1px solid #e8eef7;
}

/* In the sidebar the picker stacks: acting-as chip, Exit, then the toggle, each full
   width. The component's own scoped CSS keeps its header-era row layout for the
   AccountMenu card; this home restyles via ::deep instead. */
.side-actions[b-xzsz5k7oh1]  .impersonation {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
}

.side-actions[b-xzsz5k7oh1]  .acting-as {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-actions[b-xzsz5k7oh1]  .impersonate-toggle {
    justify-content: center;
}

/* The candidate panel can't drop below the toggle here — the toggle sits at the bottom
   of the viewport — so it flies out to the right of the sidebar, bottom-aligned with
   the control. z-index 20 already beats the header's 10 (root stacking context; the
   sidebar itself creates none). */
.side-actions[b-xzsz5k7oh1]  .picker-panel {
    top: auto;
    right: auto;
    bottom: 0;
    left: calc(100% + 0.75rem);
}

/* Everything right of the sidebar: slim identity header over the routed page. */
.app-main[b-xzsz5k7oh1] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.top-menu[b-xzsz5k7oh1] {
    height: 4rem;
    flex: none;
    padding: 0 1.5rem;
    border-bottom: 1px solid #dbe3ee;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* The compact chip's .account-panel is absolutely positioned; the header must stay
       its containing block so the right-anchored card hugs the header corner. */
    position: relative;
    z-index: 10;
}

.user-name[b-xzsz5k7oh1] {
    text-align: right;
    font-size: 0.95rem;
    color: #4b5563;
    font-weight: 600;
}

/* The compact avatar-chip menu (AccountMenu) exists in the DOM at every width; the
   700px query below swaps which cluster shows. CSS does the swapping — not C# — so the
   header never needs to measure itself. */
.compact-account[b-xzsz5k7oh1] {
    display: none;
}

/* Low-key doorway to the phone-first surface — deliberately quieter than the account controls. */
.mobile-link[b-xzsz5k7oh1] {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
}

.mobile-link:hover[b-xzsz5k7oh1] {
    color: #2563eb;
    text-decoration: underline;
}

/* The shell passes its leftover height straight down to the page. A page that wants to
   fit the viewport claims it with the global .page-fit utility (see wwwroot/css/app.css)
   instead of subtracting a hand-counted number of pixels from 100vh; a page that wants to
   grow and scroll just doesn't, and behaves exactly as before. min-height: 0 at every link
   in the chain is what lets a fitting page shrink below its content instead of pushing the
   document taller. */
.main-content[b-xzsz5k7oh1] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The one scroll container in the app. A page that doesn't fit scrolls here; a .page-fit
   page sizes itself to exactly this box, so there is nothing to scroll and no scrollbar. */
.content[b-xzsz5k7oh1] {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Below 900px the sidebar folds to an icon-only rail: the labels go (NavMenu's scoped
   CSS hides them at the same breakpoint), the brand text goes, and the logo mark plus
   the icon column carry the nav. This replaces the old priority-plus "More" fold — a
   vertical nav never runs out of row, so narrow widths only cost label text. */
@media (max-width: 900px) {
    .side-nav[b-xzsz5k7oh1] {
        flex-basis: 4.25rem;
    }

    .brand[b-xzsz5k7oh1] {
        justify-content: center;
        padding: 0;
    }

    /* With the wordmark gone the mark is the only thing left to say which app this is —
       and at 3.25rem it already clears the 4.25rem rail, so it needs no rail-only size. */
    .brand-text[b-xzsz5k7oh1] {
        display: none;
    }

    /* Rail form of the picker: the toggle folds to its icon (title carries the label),
       and the acting-as chip goes — the nav's tinted capsule and the Exit chip still
       say "another hat" without text that can't fit. */
    .side-actions[b-xzsz5k7oh1] {
        padding: 0.6rem 0.5rem;
    }

    .side-actions[b-xzsz5k7oh1]  .impersonate-label {
        display: none;
    }

    .side-actions[b-xzsz5k7oh1]  .impersonate-toggle {
        padding: 0.55rem 0;
    }

    .side-actions[b-xzsz5k7oh1]  .acting-as {
        display: none;
    }
}

/* Narrow header: the wide identity cluster folds into the avatar-chip menu, which keeps
   sign-out, the impersonation picker and the mobile link reachable behind one 34px
   control — the header holds its single fixed-height row at every width. */
@media (max-width: 700px) {
    .top-menu[b-xzsz5k7oh1] {
        padding: 0 1rem;
    }

    .user-cluster[b-xzsz5k7oh1] {
        display: none;
    }

    .compact-account[b-xzsz5k7oh1] {
        display: block;
    }

    /* The chip's panel carries the picker below 700px — one visible home per width. */
    .side-actions[b-xzsz5k7oh1] {
        display: none;
    }
}

/* Short viewports: an exact-height shell would leave the pages almost nothing, so the
   shell stops owning the height — the document grows and scrolls as one, and the whole
   chrome (sidebar included, stretched by the flex row) scrolls with it instead of
   keeping a slice of an already-short screen. Pairs with the same query in
   wwwroot/css/app.css, which switches .page-fit pages back to ordinary flow. */
@media (max-height: 640px) {
    .app-shell[b-xzsz5k7oh1] {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .content[b-xzsz5k7oh1] {
        overflow-y: visible;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* The sidebar's vertical link list. The nav fills the sidebar column under the brand;
   .nav-scroll inside is the (rarely needed) scroll container, so a viewport shorter
   than the tab list scrolls the links, never the whole sidebar chrome. */
.side-tabs[b-rmpz1agvk5] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.75rem;
}

.nav-scroll[b-rmpz1agvk5] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.side-tabs[b-rmpz1agvk5]  .tab-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #334155;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.6rem 0.7rem;
    border-radius: 0.55rem;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.side-tabs[b-rmpz1agvk5]  .tab-link + .tab-link {
    margin-top: 0.2rem;
}

.side-tabs[b-rmpz1agvk5]  .tab-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    color: #64748b;
    transition: color 120ms ease;
}

.side-tabs[b-rmpz1agvk5]  .tab-icon svg {
    display: block;
}

/* The label must never widen the sidebar — it gives way and ellipsizes instead. */
.side-tabs[b-rmpz1agvk5]  .tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-tabs[b-rmpz1agvk5]  .tab-link:hover {
    background-color: #e9f1ff;
    color: #0f172a;
}

.side-tabs[b-rmpz1agvk5]  .tab-link:hover .tab-icon {
    color: #2563eb;
}

.side-tabs[b-rmpz1agvk5]  .tab-link.active {
    background-color: #dbeafe;
    color: #1e3a8a;
}

.side-tabs[b-rmpz1agvk5]  .tab-link.active .tab-icon {
    color: #1d4ed8;
}

/* Split nav while impersonating: the effective user's base-user tabs sit in a visibly
   distinct "Acting as ⟨name⟩" capsule; the actor's role tabs sit apart, unstyled.
   Idle, neither zone class is present and the divider below is all that separates
   "my stuff" from the role screens. */
.nav-zone[b-rmpz1agvk5] {
    display: flex;
    flex-direction: column;
}

.nav-zone + .nav-zone[b-rmpz1agvk5] {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid #e2e8f0;
}

.acting-as-zone[b-rmpz1agvk5] {
    padding: 0.45rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.75rem;
    background-color: #eff6ff;
}

.zone-label[b-rmpz1agvk5] {
    color: #1e3a8a;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.3rem 0.4rem;
    white-space: nowrap;
    /* A long impersonation name must not widen the sidebar — the cap plus the title
       attribute (full name on hover) keeps the capsule honest at any name. */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The icon-only rail (same 900px breakpoint as MainLayout's .side-nav fold): labels
   and the zone caption go, icons center in square links, and each link's title
   attribute takes over as tooltip + accessible name. The acting-as capsule keeps its
   tinted border/background, so "this session wears another hat" still reads without
   its caption; the header chip's blue ring (AccountMenu) carries the name. */
@media (max-width: 900px) {
    .side-tabs[b-rmpz1agvk5] {
        padding: 0.85rem 0.5rem;
    }

    .side-tabs[b-rmpz1agvk5]  .tab-link {
        justify-content: center;
        padding: 0.6rem 0;
    }

    .side-tabs[b-rmpz1agvk5]  .tab-label {
        display: none;
    }

    .zone-label[b-rmpz1agvk5] {
        display: none;
    }

    .acting-as-zone[b-rmpz1agvk5] {
        padding: 0.3rem;
    }
}
/* /Mobile/Components/MobileConfirmSheet.razor.rz.scp.css */
.m-sheet-scrim[b-jmupu5ygz1] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15, 23, 42, 0.45);
    animation: m-sheet-scrim-in-b-jmupu5ygz1 150ms ease;
}

.m-sheet[b-jmupu5ygz1] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 201;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--mtl-surface);
    border-radius: var(--mtl-radius-lg) var(--mtl-radius-lg) 0 0;
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.18);
    animation: m-sheet-in-b-jmupu5ygz1 200ms ease;
}

.m-sheet-title[b-jmupu5ygz1] {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--mtl-text);
}

.m-sheet-message[b-jmupu5ygz1] {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mtl-text-secondary);
}

.m-sheet-actions[b-jmupu5ygz1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.m-sheet-actions button[b-jmupu5ygz1] {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--mtl-radius);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.m-sheet-actions button:disabled[b-jmupu5ygz1] {
    cursor: not-allowed;
    opacity: 0.55;
}

.m-sheet-confirm[b-jmupu5ygz1] {
    border: none;
    background: var(--mtl-accent);
    color: #ffffff;
}

.m-sheet-confirm:hover:not(:disabled)[b-jmupu5ygz1] {
    background: var(--mtl-accent-strong);
}

.m-sheet-cancel[b-jmupu5ygz1] {
    border: 1px solid var(--mtl-border-strong);
    background: var(--mtl-surface);
    color: var(--mtl-text);
}

.m-sheet-cancel:hover:not(:disabled)[b-jmupu5ygz1] {
    background: var(--mtl-bg);
}

@keyframes m-sheet-scrim-in-b-jmupu5ygz1 {
    from { opacity: 0; }
}

@keyframes m-sheet-in-b-jmupu5ygz1 {
    from { transform: translateY(24px); opacity: 0; }
}
/* /Mobile/Components/MobileListRow.razor.rz.scp.css */
.m-row[b-b2gbzjwslx] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mtl-border);
}

.m-row:last-child[b-b2gbzjwslx] {
    border-bottom: none;
}

.m-row.is-link[b-b2gbzjwslx] {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.m-row.is-link:active[b-b2gbzjwslx] {
    background: var(--mtl-bg);
}

.m-row-main[b-b2gbzjwslx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.m-row-badge[b-b2gbzjwslx] {
    align-self: flex-start;
    margin-bottom: 1px;
    /* The slot can hold two chips (e.g. "Mileage" + the rejecting stage) — flex keeps
       them on one line with a readable gap instead of butting together. */
    display: inline-flex;
    gap: 6px;
}

.m-row-title[b-b2gbzjwslx] {
    font-size: 15px;
    font-weight: 600;
    color: var(--mtl-text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Two lines, not one: the subtitle often carries the reviewer's fix request, which the
   claimant must be able to actually read from the list. */
.m-row-subtitle[b-b2gbzjwslx] {
    font-size: 13px;
    color: var(--mtl-text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.m-row-side[b-b2gbzjwslx] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.m-row-amount[b-b2gbzjwslx] {
    font-size: 15px;
    font-weight: 600;
    color: var(--mtl-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.m-row-meta[b-b2gbzjwslx] {
    font-size: 12px;
    color: var(--mtl-text-muted);
    white-space: nowrap;
}

.m-row-chevron[b-b2gbzjwslx] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--mtl-text-faint);
}
/* /Mobile/Components/MobileSection.razor.rz.scp.css */
.m-section[b-e1ejwzcm0n] {
    background: var(--mtl-surface);
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-lg);
    box-shadow: var(--mtl-shadow-card);
    margin-bottom: 16px;
}

.m-section-header[b-e1ejwzcm0n] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.m-section-title[b-e1ejwzcm0n] {
    font-size: 15px;
    font-weight: 700;
    color: var(--mtl-text);
}

.m-section-dot[b-e1ejwzcm0n] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tone-attention .m-section-dot[b-e1ejwzcm0n] { background: #f59e0b; }
.tone-progress .m-section-dot[b-e1ejwzcm0n] { background: var(--mtl-accent); }
.tone-positive .m-section-dot[b-e1ejwzcm0n] { background: #16a34a; }
.tone-negative .m-section-dot[b-e1ejwzcm0n] { background: var(--mtl-danger); }

.m-section-count[b-e1ejwzcm0n] {
    min-width: 22px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: #f1f5f9;
    color: var(--mtl-text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.tone-attention .m-section-count[b-e1ejwzcm0n] { background: #fffbeb; color: #b45309; }
.tone-progress .m-section-count[b-e1ejwzcm0n] { background: var(--mtl-accent-soft); color: var(--mtl-accent-strong); }
.tone-positive .m-section-count[b-e1ejwzcm0n] { background: #f0fdf4; color: #15803d; }
.tone-negative .m-section-count[b-e1ejwzcm0n] { background: var(--mtl-danger-bg); color: var(--mtl-danger); }

.m-section-caret[b-e1ejwzcm0n] {
    display: flex;
    align-items: center;
    margin-left: auto;
    color: var(--mtl-text-muted);
    transition: transform 150ms ease;
}

.m-section-caret.is-collapsed[b-e1ejwzcm0n] {
    transform: rotate(-90deg);
}

.m-section-body[b-e1ejwzcm0n] {
    padding: 0 16px 4px;
}

.m-section-empty[b-e1ejwzcm0n] {
    margin: 0;
    padding: 0 0 14px;
    font-size: 13px;
    color: var(--mtl-text-muted);
}
/* /Mobile/Components/MobileStatusChip.razor.rz.scp.css */
.m-chip[b-t0chjlsudn] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.tone-neutral[b-t0chjlsudn] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: var(--mtl-text-muted);
}

.tone-attention[b-t0chjlsudn] {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.tone-progress[b-t0chjlsudn] {
    background: var(--mtl-accent-soft);
    border-color: #bfdbfe;
    color: var(--mtl-accent);
}

.tone-positive[b-t0chjlsudn] {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.tone-negative[b-t0chjlsudn] {
    background: var(--mtl-danger-bg);
    border-color: var(--mtl-danger-border);
    color: var(--mtl-danger);
}
/* /Mobile/Components/MobileToast.razor.rz.scp.css */
.m-toast[b-40bwteqci6] {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(var(--m-nav-h, 58px) + 18px + env(safe-area-inset-bottom, 0px));
    z-index: 150;
    max-width: 608px;
    margin: 0 auto;
    padding: 12px 16px;
    border-radius: var(--mtl-radius);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    animation: m-toast-in-b-40bwteqci6 200ms ease;
}

.m-toast.is-success[b-40bwteqci6] {
    background: var(--mtl-text);
    color: #ffffff;
}

.m-toast.is-error[b-40bwteqci6] {
    background: var(--mtl-danger-bg);
    border: 1px solid var(--mtl-danger-border);
    color: var(--mtl-danger);
}

@keyframes m-toast-in-b-40bwteqci6 {
    from { transform: translateY(8px); opacity: 0; }
}
/* /Mobile/Layout/MobileLayout.razor.rz.scp.css */
.m-shell[b-an9e7xto4h] {
    /* Single source of truth for the fixed bottom bar's height — the layout's body
       padding, the toast offset and every page's sticky action bar derive from it,
       so they can never disagree about where "above the nav" is. */
    --m-nav-h: 58px;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--mtl-bg);
}

.m-topbar[b-an9e7xto4h] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--mtl-surface);
    border-bottom: 1px solid var(--mtl-border);
}

.m-topbar-inner[b-an9e7xto4h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 640px;
    margin: 0 auto;
    min-height: 52px;
    padding: 6px 16px;
}

.m-brand[b-an9e7xto4h] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mtl-text);
    white-space: nowrap;
}

/* Still mark, sized against the 742 × 640 ratio — the top bar is sticky, so an animated
   one would loop behind every scroll. */
.m-brand-logo[b-an9e7xto4h] {
    flex: none;
    width: 30px;
    aspect-ratio: 742 / 640;
}

/* Avatar + sign-out is enough on a phone-width bar; the full name comes back on wider screens. */
@media (max-width: 480px) {
    .m-topbar[b-an9e7xto4h]  .user-label {
        display: none;
    }
}

.m-body[b-an9e7xto4h] {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 16px 16px calc(var(--m-nav-h) + 30px + env(safe-area-inset-bottom, 0px));
}

.m-fullsite[b-an9e7xto4h] {
    display: block;
    width: fit-content;
    margin: 28px auto 0;
    min-height: 44px;
    line-height: 44px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mtl-text-muted);
    text-decoration: none;
}

.m-fullsite:hover[b-an9e7xto4h] {
    color: var(--mtl-accent);
    text-decoration: underline;
}
/* /Mobile/Layout/MobileNavBar.razor.rz.scp.css */
.m-navbar[b-2rrg8j6b32] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--mtl-surface);
    border-top: 1px solid var(--mtl-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.m-navbar-inner[b-2rrg8j6b32] {
    display: flex;
    align-items: stretch;
    max-width: 640px;
    margin: 0 auto;
    height: var(--m-nav-h, 58px);
}

.m-navbar[b-2rrg8j6b32]  .m-nav-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    padding: 7px 0 6px;
    color: var(--mtl-text-muted);
    text-decoration: none;
    transition: color 120ms ease;
}

.m-navbar[b-2rrg8j6b32]  .m-nav-link.active {
    color: var(--mtl-accent);
}

.m-navbar[b-2rrg8j6b32]  .m-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.m-navbar[b-2rrg8j6b32]  .m-nav-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* The raised centre action — pokes above the bar, so no overflow clipping here. It is a
   button now (it opens the add chooser rather than navigating), hence the border/padding
   reset. */
.m-nav-add[b-2rrg8j6b32] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 48px;
    height: 48px;
    margin-top: -16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--mtl-accent);
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.30);
    transition: background 120ms ease;
}

.m-nav-add:hover[b-2rrg8j6b32] {
    background: var(--mtl-accent-strong);
    color: #ffffff;
}

/* The add chooser sits above the whole bar (z-index over the navbar's 100) so the scrim
   really does catch every stray tap — including one on the "+" that opened it. */
.m-add-scrim[b-2rrg8j6b32] {
    position: fixed;
    inset: 0;
    z-index: 101;
    background: rgba(15, 23, 42, 0.35);
}

.m-add-menu[b-2rrg8j6b32] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* Floats just above the fixed bottom nav, clear of the iOS home indicator. */
    bottom: calc(var(--m-nav-h, 58px) + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 102;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    background: var(--mtl-surface);
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-lg);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.m-add-choice[b-2rrg8j6b32] {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 18px;
    color: var(--mtl-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.m-add-choice + .m-add-choice[b-2rrg8j6b32] {
    border-top: 1px solid var(--mtl-border);
}

.m-add-choice:active[b-2rrg8j6b32] {
    background: var(--mtl-bg);
}
/* /Mobile/Pages/MobileAddClaim.razor.rz.scp.css */
.add-claim-page[b-nxkxvjnd8z] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 24px;
}

h1[b-nxkxvjnd8z] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--mtl-text);
}

/* Segmented Expenses | Mileage switch — desktop's two builder pages collapse into one
   URL on mobile, so the kind swaps in place instead of navigating away. */
.kind-toggle[b-nxkxvjnd8z] {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
}

.kind-tab[b-nxkxvjnd8z] {
    flex: 1;
    min-height: 44px;
    border: none;
    border-radius: calc(var(--mtl-radius) - 2px);
    background: transparent;
    color: var(--mtl-text-secondary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.kind-tab.active[b-nxkxvjnd8z] {
    background: var(--mtl-accent);
    color: #ffffff;
    cursor: default;
}

.kind-tab:focus-visible[b-nxkxvjnd8z] {
    outline: none;
    box-shadow: var(--mtl-focus-ring);
}

.kind-tab:disabled[b-nxkxvjnd8z] {
    opacity: 0.5;
    cursor: default;
}

.error-message[b-nxkxvjnd8z] {
    padding: 10px 12px;
    border: 1px solid var(--mtl-danger-border);
    border-radius: var(--mtl-radius);
    background: var(--mtl-danger-bg);
    color: var(--mtl-danger);
    font-size: 14px;
}

.empty-state[b-nxkxvjnd8z] {
    background: var(--mtl-surface);
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-lg);
    box-shadow: var(--mtl-shadow-card);
    padding: 24px 16px;
    text-align: center;
}

.empty-state p[b-nxkxvjnd8z] {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--mtl-text-secondary);
}

.empty-state a[b-nxkxvjnd8z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    color: var(--mtl-accent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.purpose-field[b-nxkxvjnd8z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.purpose-field label[b-nxkxvjnd8z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mtl-text-secondary);
}

.purpose-field input[b-nxkxvjnd8z] {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
    color: var(--mtl-text);
    font-size: 15px;
}

.purpose-field input:focus[b-nxkxvjnd8z] {
    outline: none;
    border-color: var(--mtl-accent);
    box-shadow: var(--mtl-focus-ring);
}

.lines-list[b-nxkxvjnd8z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.line-row[b-nxkxvjnd8z] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
    text-align: left;
    cursor: pointer;
}

.line-row.selected[b-nxkxvjnd8z] {
    border-color: var(--mtl-accent);
    background: var(--mtl-accent-soft);
}

.line-row:focus-visible[b-nxkxvjnd8z] {
    outline: none;
    border-color: var(--mtl-accent);
    box-shadow: var(--mtl-focus-ring);
}

.line-check[b-nxkxvjnd8z] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--mtl-border-strong);
    border-radius: 6px;
    background: var(--mtl-surface);
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
}

.line-row.selected .line-check[b-nxkxvjnd8z] {
    border-color: var(--mtl-accent);
    background: var(--mtl-accent);
}

.line-main[b-nxkxvjnd8z] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.line-desc[b-nxkxvjnd8z] {
    font-size: 15px;
    font-weight: 600;
    color: var(--mtl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-date[b-nxkxvjnd8z] {
    font-size: 13px;
    color: var(--mtl-text-muted);
}

.line-amount[b-nxkxvjnd8z] {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--mtl-text);
    font-variant-numeric: tabular-nums;
}

/* Pinned above the fixed bottom nav (viewport-relative, so bottom: 0 would tuck under it)
   to keep the running total in thumb reach; the negative margins let the bar span the
   page's own gutters. */
.submit-bar[b-nxkxvjnd8z] {
    position: sticky;
    bottom: calc(var(--m-nav-h, 58px) + env(safe-area-inset-bottom, 0px));
    margin: 4px -16px 0;
    padding: 12px 16px;
    background: var(--mtl-bg);
    border-top: 1px solid var(--mtl-border);
}

.submit-button[b-nxkxvjnd8z] {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: var(--mtl-radius);
    background: var(--mtl-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.submit-button:active[b-nxkxvjnd8z] {
    background: var(--mtl-accent-strong);
}

.submit-button:disabled[b-nxkxvjnd8z] {
    opacity: 0.5;
    cursor: default;
}

.submit-note[b-nxkxvjnd8z] {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--mtl-text-muted);
    text-align: center;
}
/* /Mobile/Pages/MobileAddItem.razor.rz.scp.css */
.page-title[b-3h2lyerav1] {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: var(--mtl-text);
}

.form-card[b-3h2lyerav1] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--mtl-surface);
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-lg);
    box-shadow: var(--mtl-shadow-card);
    padding: 16px;
    margin-bottom: 14px;
}

.card-title[b-3h2lyerav1] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--mtl-text);
}

.form-field[b-3h2lyerav1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label[b-3h2lyerav1] {
    font-size: 13px;
    font-weight: 650;
    color: var(--mtl-text-secondary);
}

.optional[b-3h2lyerav1] {
    font-weight: 500;
    color: var(--mtl-text-muted);
}

/* 16px stops iOS Safari auto-zooming the field on focus. */
.form-field input[b-3h2lyerav1],
.form-field textarea[b-3h2lyerav1] {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--mtl-border-strong);
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
    color: var(--mtl-text);
    font-size: 16px;
    font-family: inherit;
}

.form-field textarea[b-3h2lyerav1] {
    min-height: 88px;
    resize: vertical;
}

.form-field input:focus[b-3h2lyerav1],
.form-field textarea:focus[b-3h2lyerav1] {
    outline: none;
    border-color: var(--mtl-accent);
    box-shadow: var(--mtl-focus-ring);
}

.error-message[b-3h2lyerav1] {
    background: var(--mtl-danger-bg);
    border: 1px solid var(--mtl-danger-border);
    border-radius: var(--mtl-radius);
    color: var(--mtl-danger);
    font-size: 14px;
    font-weight: 650;
    padding: 12px 14px;
    margin-bottom: 14px;
}

/* The expired-session notice moved to Components/SessionExpiredNotice.razor and took its
   styles with it — scoped CSS follows the markup. */

.upload-progress[b-3h2lyerav1] {
    background: var(--mtl-surface);
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-lg);
    box-shadow: var(--mtl-shadow-card);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.upload-progress-label[b-3h2lyerav1] {
    display: block;
    margin-bottom: 8px;
    color: var(--mtl-text-secondary);
    font-size: 13px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-progress-track[b-3h2lyerav1] {
    background: var(--mtl-border);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.upload-progress-fill[b-3h2lyerav1] {
    background: var(--mtl-accent);
    border-radius: 999px;
    height: 100%;
    width: 40%;
    animation: upload-sweep-b-3h2lyerav1 1.2s ease-in-out infinite alternate;
}

@keyframes upload-sweep-b-3h2lyerav1 {
    from { margin-left: 0; }
    to { margin-left: 60%; }
}

/* Sticks just above the fixed bottom nav (viewport-relative, so bottom: 0 would tuck under it). */
.action-bar[b-3h2lyerav1] {
    position: sticky;
    bottom: calc(var(--m-nav-h, 58px) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 8px;
    background: var(--mtl-bg);
}

.btn-primary[b-3h2lyerav1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: none;
    border-radius: var(--mtl-radius);
    background: var(--mtl-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.btn-primary:active:not(:disabled)[b-3h2lyerav1] {
    background: var(--mtl-accent-strong);
}

.btn-primary:disabled[b-3h2lyerav1] {
    cursor: not-allowed;
    opacity: 0.65;
}

.btn-plain[b-3h2lyerav1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: none;
    background: none;
    color: var(--mtl-text-secondary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
/* /Mobile/Pages/MobileAddMileage.razor.rz.scp.css */
.page-title[b-ewfceac5v9] {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: var(--mtl-text);
}

.form-card[b-ewfceac5v9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--mtl-surface);
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-lg);
    box-shadow: var(--mtl-shadow-card);
    padding: 16px;
    margin-bottom: 14px;
}

.card-title[b-ewfceac5v9] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--mtl-text);
}

.form-field[b-ewfceac5v9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label[b-ewfceac5v9],
.field-label[b-ewfceac5v9] {
    font-size: 13px;
    font-weight: 650;
    color: var(--mtl-text-secondary);
}

/* 16px stops iOS Safari auto-zooming the field on focus. */
.form-field input[b-ewfceac5v9] {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--mtl-border-strong);
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
    color: var(--mtl-text);
    font-size: 16px;
    font-family: inherit;
}

.form-field input:focus[b-ewfceac5v9] {
    outline: none;
    border-color: var(--mtl-accent);
    box-shadow: var(--mtl-focus-ring);
}

.form-field input.input-invalid[b-ewfceac5v9] {
    border-color: var(--mtl-danger);
    background: var(--mtl-danger-bg);
}

.field-error[b-ewfceac5v9] {
    display: block;
    color: var(--mtl-danger);
    font-size: 12px;
    font-weight: 600;
}

/* The desktop switch shrunk-for-mouse doesn't survive thumbs — the whole control is a
   single 44px-tall button so the toggle can't be missed mid-stride. */
.mileage-toggle[b-ewfceac5v9] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 4px 16px 4px 6px;
    border: 1px solid var(--mtl-border-strong);
    border-radius: 999px;
    background: var(--mtl-surface);
    cursor: pointer;
}

.mileage-toggle.on[b-ewfceac5v9] {
    border-color: var(--mtl-accent);
    background: var(--mtl-accent-soft);
}

.mileage-toggle:focus-visible[b-ewfceac5v9] {
    outline: none;
    box-shadow: var(--mtl-focus-ring);
}

.mileage-toggle-track[b-ewfceac5v9] {
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--mtl-border-strong);
    transition: background .2s ease;
    flex: 0 0 auto;
}

.mileage-toggle.on .mileage-toggle-track[b-ewfceac5v9] {
    background: var(--mtl-accent);
}

.mileage-toggle-knob[b-ewfceac5v9] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform .2s ease;
}

.mileage-toggle.on .mileage-toggle-knob[b-ewfceac5v9] {
    transform: translateX(18px);
}

.mileage-toggle-text[b-ewfceac5v9] {
    color: var(--mtl-text);
    font-size: 14px;
    font-weight: 600;
    flex: 0 0 auto;
}

.toggle-hint[b-ewfceac5v9] {
    font-size: 12px;
    color: var(--mtl-text-muted);
}

.value-row[b-ewfceac5v9] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
}

.value-row span[b-ewfceac5v9] {
    color: var(--mtl-text-secondary);
}

.value-row strong[b-ewfceac5v9] {
    color: var(--mtl-text);
    font-weight: 650;
}

.value-total span[b-ewfceac5v9],
.value-total strong[b-ewfceac5v9] {
    color: var(--mtl-accent-strong);
    font-weight: 750;
}

.value-note[b-ewfceac5v9] {
    margin: 0;
    font-size: 12px;
    color: var(--mtl-text-muted);
}

.cross-link a[b-ewfceac5v9] {
    color: var(--mtl-accent);
    font-weight: 600;
}

.error-message[b-ewfceac5v9] {
    background: var(--mtl-danger-bg);
    border: 1px solid var(--mtl-danger-border);
    border-radius: var(--mtl-radius);
    color: var(--mtl-danger);
    font-size: 14px;
    font-weight: 650;
    padding: 12px 14px;
    margin-bottom: 14px;
}

/* The expired-session notice moved to Components/SessionExpiredNotice.razor and took its
   styles with it — scoped CSS follows the markup. */

/* Sticks just above the fixed bottom nav (viewport-relative, so bottom: 0 would tuck under it). */
.action-bar[b-ewfceac5v9] {
    position: sticky;
    bottom: calc(var(--m-nav-h, 58px) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 8px;
    background: var(--mtl-bg);
}

.btn-primary[b-ewfceac5v9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: none;
    border-radius: var(--mtl-radius);
    background: var(--mtl-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.btn-primary:active:not(:disabled)[b-ewfceac5v9] {
    background: var(--mtl-accent-strong);
}

.btn-primary:disabled[b-ewfceac5v9] {
    cursor: not-allowed;
    opacity: 0.65;
}

.btn-plain[b-ewfceac5v9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: none;
    background: none;
    color: var(--mtl-text-secondary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
/* /Mobile/Pages/MobileClaimDetail.razor.rz.scp.css */
.claim-page[b-bcob3gap3g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 24px;
}

.back-link[b-bcob3gap3g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 44px;
    color: var(--mtl-accent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.summary-card[b-bcob3gap3g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--mtl-surface);
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-lg);
    box-shadow: var(--mtl-shadow-card);
}

.summary-head[b-bcob3gap3g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

h1[b-bcob3gap3g] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--mtl-text);
    overflow-wrap: anywhere;
}

.summary-rows[b-bcob3gap3g] {
    display: flex;
    flex-direction: column;
}

.row[b-bcob3gap3g] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 15px;
}

.row span[b-bcob3gap3g] {
    color: var(--mtl-text-secondary);
}

.row strong[b-bcob3gap3g] {
    color: var(--mtl-text);
    font-weight: 600;
    text-align: right;
}

.totals-row[b-bcob3gap3g] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--mtl-border);
}

.total[b-bcob3gap3g] {
    font-size: 22px;
    font-weight: 700;
    color: var(--mtl-text);
    font-variant-numeric: tabular-nums;
}

.vat[b-bcob3gap3g] {
    font-size: 13px;
    color: var(--mtl-text-muted);
}

.error-message[b-bcob3gap3g] {
    padding: 10px 12px;
    border: 1px solid var(--mtl-danger-border);
    border-radius: var(--mtl-radius);
    background: var(--mtl-danger-bg);
    color: var(--mtl-danger);
    font-size: 14px;
}

.success-message[b-bcob3gap3g] {
    padding: 10px 12px;
    border: 1px solid #bbf7d0;
    border-radius: var(--mtl-radius);
    background: #f0fdf4;
    color: #15803d;
    font-size: 14px;
}

.download-button[b-bcob3gap3g] {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: var(--mtl-radius);
    background: var(--mtl-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.download-button:active[b-bcob3gap3g] {
    background: var(--mtl-accent-strong);
}

.download-button:disabled[b-bcob3gap3g] {
    opacity: 0.5;
    cursor: default;
}
/* /Mobile/Pages/MobileClaims.razor.rz.scp.css */
.claims-page[b-jh7yj00k5q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 24px;
}

.page-head[b-jh7yj00k5q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

h1[b-jh7yj00k5q] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--mtl-text);
}

.range-select[b-jh7yj00k5q] {
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
    color: var(--mtl-text);
    font-size: 15px;
    font-weight: 600;
}

.range-select:focus[b-jh7yj00k5q] {
    outline: none;
    border-color: var(--mtl-accent);
    box-shadow: var(--mtl-focus-ring);
}

/* The sweep chip is the shared desktop component, hence ::deep (anchored so the page
   outranks the component's own scoped rules). The page's flex gap already spaces it —
   its own margins would double up — the pill must grow to the 44px tap target, and
   wrapping keeps the label and chip on-screen under 360px. */
.claims-page[b-jh7yj00k5q]  .sweep-toggle {
    margin: 0;
    flex-wrap: wrap;
}

.claims-page[b-jh7yj00k5q]  .sweep-chip {
    min-height: 44px;
    padding: 0 14px;
}

.create-button[b-jh7yj00k5q] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: var(--mtl-radius);
    background: var(--mtl-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.create-button:active[b-jh7yj00k5q] {
    background: var(--mtl-accent-strong);
}

.error-message[b-jh7yj00k5q] {
    padding: 10px 12px;
    border: 1px solid var(--mtl-danger-border);
    border-radius: var(--mtl-radius);
    background: var(--mtl-danger-bg);
    color: var(--mtl-danger);
    font-size: 14px;
}
/* /Mobile/Pages/MobileHistory.razor.rz.scp.css */
.history-page[b-mpv3ewg3gi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 24px;
}

.back-link[b-mpv3ewg3gi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 44px;
    color: var(--mtl-accent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.page-head[b-mpv3ewg3gi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

h1[b-mpv3ewg3gi] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--mtl-text);
}

.range-select[b-mpv3ewg3gi] {
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
    color: var(--mtl-text);
    font-size: 15px;
    font-weight: 600;
}

.range-select:focus[b-mpv3ewg3gi] {
    outline: none;
    border-color: var(--mtl-accent);
    box-shadow: var(--mtl-focus-ring);
}

.error-message[b-mpv3ewg3gi] {
    padding: 10px 12px;
    border: 1px solid var(--mtl-danger-border);
    border-radius: var(--mtl-radius);
    background: var(--mtl-danger-bg);
    color: var(--mtl-danger);
    font-size: 14px;
}
/* /Mobile/Pages/MobileItemDetail.razor.rz.scp.css */
.back-link[b-cbpq7eppe3] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: var(--mtl-text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.back-link:active[b-cbpq7eppe3] {
    color: var(--mtl-text);
}

.title-row[b-cbpq7eppe3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
}

.page-title[b-cbpq7eppe3] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--mtl-text);
    overflow-wrap: anywhere;
}

.fix-notice[b-cbpq7eppe3] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--mtl-radius-lg);
    color: #b45309;
    padding: 14px;
    margin-bottom: 14px;
}

.fix-notice strong[b-cbpq7eppe3] {
    font-size: 14px;
}

.fix-reason[b-cbpq7eppe3] {
    font-size: 14px;
    color: #7c2d12;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #fde68a;
    border-radius: var(--mtl-radius);
    padding: 8px 10px;
}

.fix-hint[b-cbpq7eppe3] {
    font-size: 13px;
    opacity: 0.85;
}

/* The expired-session notice moved to Components/SessionExpiredNotice.razor and took its
   styles with it — scoped CSS follows the markup. */

.error-message[b-cbpq7eppe3] {
    background: var(--mtl-danger-bg);
    border: 1px solid var(--mtl-danger-border);
    border-radius: var(--mtl-radius);
    color: var(--mtl-danger);
    font-size: 14px;
    font-weight: 650;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.detail-card[b-cbpq7eppe3] {
    background: var(--mtl-surface);
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-lg);
    box-shadow: var(--mtl-shadow-card);
    padding: 16px;
    margin-bottom: 14px;
}

.detail-card h2[b-cbpq7eppe3] {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mtl-text);
}

.detail-field[b-cbpq7eppe3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mtl-border);
}

.detail-field:first-child[b-cbpq7eppe3] {
    padding-top: 0;
}

.detail-field:last-child[b-cbpq7eppe3] {
    padding-bottom: 0;
    border-bottom: none;
}

.field-label[b-cbpq7eppe3] {
    font-size: 12px;
    font-weight: 650;
    color: var(--mtl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.detail-field p[b-cbpq7eppe3] {
    margin: 0;
    font-size: 15px;
    color: var(--mtl-text);
    overflow-wrap: anywhere;
}

.form-field[b-cbpq7eppe3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-field:last-child[b-cbpq7eppe3] {
    margin-bottom: 0;
}

.form-field label[b-cbpq7eppe3] {
    font-size: 13px;
    font-weight: 650;
    color: var(--mtl-text-secondary);
}

/* 16px stops iOS Safari auto-zooming the field on focus. */
.form-field input[b-cbpq7eppe3],
.form-field textarea[b-cbpq7eppe3] {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--mtl-border-strong);
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
    color: var(--mtl-text);
    font-size: 16px;
    font-family: inherit;
}

.form-field textarea[b-cbpq7eppe3] {
    min-height: 88px;
    resize: vertical;
}

.form-field input:focus[b-cbpq7eppe3],
.form-field textarea:focus[b-cbpq7eppe3] {
    outline: none;
    border-color: var(--mtl-accent);
    box-shadow: var(--mtl-focus-ring);
}

.financial-rows[b-cbpq7eppe3] {
    display: flex;
    flex-direction: column;
}

.financial-row[b-cbpq7eppe3] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mtl-border);
    font-size: 15px;
}

.financial-row span[b-cbpq7eppe3] {
    color: var(--mtl-text-secondary);
}

.financial-row strong[b-cbpq7eppe3] {
    color: var(--mtl-text);
    font-weight: 650;
}

.total-row[b-cbpq7eppe3] {
    border-bottom: none;
}

.total-row span[b-cbpq7eppe3],
.total-row strong[b-cbpq7eppe3] {
    color: var(--mtl-accent-strong);
    font-weight: 750;
}

.financial-note[b-cbpq7eppe3] {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--mtl-text-muted);
}

.rejection-card[b-cbpq7eppe3] {
    background: var(--mtl-danger-bg);
    border-color: var(--mtl-danger-border);
}

.rejection-card h2[b-cbpq7eppe3] {
    color: var(--mtl-danger);
}

.rejection-card .field-label[b-cbpq7eppe3] {
    color: var(--mtl-danger);
}

.rejection-text[b-cbpq7eppe3] {
    margin: 2px 0 0;
    font-size: 15px;
    color: var(--mtl-text);
    overflow-wrap: anywhere;
}

.claim-link[b-cbpq7eppe3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-bottom: 14px;
    border: 1px solid var(--mtl-border-strong);
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
    color: var(--mtl-accent);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--mtl-shadow-card);
}

.claim-link:active[b-cbpq7eppe3] {
    background: var(--mtl-accent-soft);
}

/* Sticks just above the fixed bottom nav (viewport-relative, so bottom: 0 would tuck under it). */
.action-bar[b-cbpq7eppe3] {
    position: sticky;
    bottom: calc(var(--m-nav-h, 58px) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 8px;
    background: var(--mtl-bg);
}

.btn-primary[b-cbpq7eppe3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: none;
    border-radius: var(--mtl-radius);
    background: var(--mtl-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.btn-primary:active:not(:disabled)[b-cbpq7eppe3] {
    background: var(--mtl-accent-strong);
}

.btn-primary:disabled[b-cbpq7eppe3] {
    cursor: not-allowed;
    opacity: 0.65;
}
/* /Mobile/Pages/MobileItems.razor.rz.scp.css */
.page-title[b-ne8e3hlu97] {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: var(--mtl-text);
}

.sections[b-ne8e3hlu97] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.error-message[b-ne8e3hlu97] {
    background: var(--mtl-danger-bg);
    border: 1px solid var(--mtl-danger-border);
    border-radius: var(--mtl-radius);
    color: var(--mtl-danger);
    font-size: 14px;
    font-weight: 650;
    padding: 12px 14px;
    /* The items and mileage boards fail independently, so two banners can stack — and a
       banner now renders above a surviving board rather than instead of everything. */
    margin: 0 0 12px;
}

.create-claim-cta[b-ne8e3hlu97] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    background: var(--mtl-accent);
    border-radius: var(--mtl-radius);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.create-claim-cta:active[b-ne8e3hlu97] {
    background: var(--mtl-accent-strong);
}

.board-welcome[b-ne8e3hlu97] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 24px;
    background: var(--mtl-surface);
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-lg);
    box-shadow: var(--mtl-shadow-card);
    text-align: center;
}

.welcome-title[b-ne8e3hlu97] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--mtl-text);
}

.welcome-hint[b-ne8e3hlu97] {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--mtl-text-muted);
}

.welcome-cta[b-ne8e3hlu97] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    background: var(--mtl-accent);
    border-radius: var(--mtl-radius);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.welcome-cta:active[b-ne8e3hlu97] {
    background: var(--mtl-accent-strong);
}

.history-row[b-ne8e3hlu97] {
    display: flex;
    justify-content: center;
    padding: 10px 0 6px;
}

.history-link[b-ne8e3hlu97] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    color: var(--mtl-text-muted);
    font-size: 13px;
    text-decoration: none;
}

.history-link:active[b-ne8e3hlu97] {
    color: var(--mtl-text-secondary);
}
/* /Mobile/Pages/MobileMileageDetail.razor.rz.scp.css */
.back-link[b-ujsphaxoyj] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: var(--mtl-text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.back-link:active[b-ujsphaxoyj] {
    color: var(--mtl-text);
}

.title-row[b-ujsphaxoyj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
}

.page-title[b-ujsphaxoyj] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--mtl-text);
    overflow-wrap: anywhere;
}

.fix-notice[b-ujsphaxoyj] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--mtl-radius-lg);
    color: #b45309;
    padding: 14px;
    margin-bottom: 14px;
}

.fix-notice strong[b-ujsphaxoyj] {
    font-size: 14px;
}

.fix-reason[b-ujsphaxoyj] {
    font-size: 14px;
    color: #7c2d12;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #fde68a;
    border-radius: var(--mtl-radius);
    padding: 8px 10px;
}

.fix-hint[b-ujsphaxoyj] {
    font-size: 13px;
    opacity: 0.85;
}

/* The expired-session notice moved to Components/SessionExpiredNotice.razor and took its
   styles with it — scoped CSS follows the markup. */

.error-message[b-ujsphaxoyj] {
    background: var(--mtl-danger-bg);
    border: 1px solid var(--mtl-danger-border);
    border-radius: var(--mtl-radius);
    color: var(--mtl-danger);
    font-size: 14px;
    font-weight: 650;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.detail-card[b-ujsphaxoyj] {
    background: var(--mtl-surface);
    border: 1px solid var(--mtl-border);
    border-radius: var(--mtl-radius-lg);
    box-shadow: var(--mtl-shadow-card);
    padding: 16px;
    margin-bottom: 14px;
}

.detail-card h2[b-ujsphaxoyj] {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mtl-text);
}

.detail-field[b-ujsphaxoyj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mtl-border);
}

.detail-field:first-child[b-ujsphaxoyj] {
    padding-top: 0;
}

.detail-field:last-child[b-ujsphaxoyj] {
    padding-bottom: 0;
    border-bottom: none;
}

.field-label[b-ujsphaxoyj] {
    font-size: 12px;
    font-weight: 650;
    color: var(--mtl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.detail-field p[b-ujsphaxoyj] {
    margin: 0;
    font-size: 15px;
    color: var(--mtl-text);
    overflow-wrap: anywhere;
}

.form-field[b-ujsphaxoyj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-field:last-child[b-ujsphaxoyj] {
    margin-bottom: 0;
}

.form-field label[b-ujsphaxoyj] {
    font-size: 13px;
    font-weight: 650;
    color: var(--mtl-text-secondary);
}

/* The toggle row borrows .field-label for its caption, but inside the edit form it must
   read like the other form labels — not the read-only card's uppercase ones. */
.form-field .field-label[b-ujsphaxoyj] {
    font-size: 13px;
    text-transform: none;
    letter-spacing: normal;
    color: var(--mtl-text-secondary);
}

/* 16px stops iOS Safari auto-zooming the field on focus. */
.form-field input[b-ujsphaxoyj] {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--mtl-border-strong);
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
    color: var(--mtl-text);
    font-size: 16px;
    font-family: inherit;
}

.form-field input:focus[b-ujsphaxoyj] {
    outline: none;
    border-color: var(--mtl-accent);
    box-shadow: var(--mtl-focus-ring);
}

.form-field input.input-invalid[b-ujsphaxoyj] {
    border-color: var(--mtl-danger);
    background: var(--mtl-danger-bg);
}

.field-error[b-ujsphaxoyj] {
    display: block;
    color: var(--mtl-danger);
    font-size: 12px;
    font-weight: 600;
}

/* The desktop switch shrunk-for-mouse doesn't survive thumbs — the whole control is a
   single 44px-tall button so the toggle can't be missed mid-stride. */
.mileage-toggle[b-ujsphaxoyj] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 4px 16px 4px 6px;
    border: 1px solid var(--mtl-border-strong);
    border-radius: 999px;
    background: var(--mtl-surface);
    cursor: pointer;
}

.mileage-toggle.on[b-ujsphaxoyj] {
    border-color: var(--mtl-accent);
    background: var(--mtl-accent-soft);
}

.mileage-toggle:focus-visible[b-ujsphaxoyj] {
    outline: none;
    box-shadow: var(--mtl-focus-ring);
}

.mileage-toggle-track[b-ujsphaxoyj] {
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--mtl-border-strong);
    transition: background .2s ease;
    flex: 0 0 auto;
}

.mileage-toggle.on .mileage-toggle-track[b-ujsphaxoyj] {
    background: var(--mtl-accent);
}

.mileage-toggle-knob[b-ujsphaxoyj] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform .2s ease;
}

.mileage-toggle.on .mileage-toggle-knob[b-ujsphaxoyj] {
    transform: translateX(18px);
}

.mileage-toggle-text[b-ujsphaxoyj] {
    color: var(--mtl-text);
    font-size: 14px;
    font-weight: 600;
    flex: 0 0 auto;
}

.toggle-hint[b-ujsphaxoyj] {
    font-size: 12px;
    color: var(--mtl-text-muted);
}

.value-rows[b-ujsphaxoyj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.value-row[b-ujsphaxoyj] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
}

.value-row span[b-ujsphaxoyj] {
    color: var(--mtl-text-secondary);
}

.value-row strong[b-ujsphaxoyj] {
    color: var(--mtl-text);
    font-weight: 650;
}

.value-total span[b-ujsphaxoyj],
.value-total strong[b-ujsphaxoyj] {
    color: var(--mtl-accent-strong);
    font-weight: 750;
}

.value-note[b-ujsphaxoyj] {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--mtl-text-muted);
}

.rejection-card[b-ujsphaxoyj] {
    background: var(--mtl-danger-bg);
    border-color: var(--mtl-danger-border);
}

.rejection-card h2[b-ujsphaxoyj] {
    color: var(--mtl-danger);
}

.rejection-card .field-label[b-ujsphaxoyj] {
    color: var(--mtl-danger);
}

.rejection-text[b-ujsphaxoyj] {
    margin: 2px 0 0;
    font-size: 15px;
    color: var(--mtl-text);
    overflow-wrap: anywhere;
}

.claim-link[b-ujsphaxoyj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-bottom: 14px;
    border: 1px solid var(--mtl-border-strong);
    border-radius: var(--mtl-radius);
    background: var(--mtl-surface);
    color: var(--mtl-accent);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--mtl-shadow-card);
}

.claim-link:active[b-ujsphaxoyj] {
    background: var(--mtl-accent-soft);
}

/* Sticks just above the fixed bottom nav (viewport-relative, so bottom: 0 would tuck under it). */
.action-bar[b-ujsphaxoyj] {
    position: sticky;
    bottom: calc(var(--m-nav-h, 58px) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 8px;
    background: var(--mtl-bg);
}

.btn-primary[b-ujsphaxoyj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: none;
    border-radius: var(--mtl-radius);
    background: var(--mtl-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.btn-primary:active:not(:disabled)[b-ujsphaxoyj] {
    background: var(--mtl-accent-strong);
}

.btn-primary:disabled[b-ujsphaxoyj] {
    cursor: not-allowed;
    opacity: 0.65;
}
/* /Pages/AccountsClaims.razor.rz.scp.css */
.accounts-claims-page[b-l79tzu0hr6] {
    padding: 28px 24px;
    max-width: var(--mtl-page-max);
    margin: 0 auto;
}

.admin-header[b-l79tzu0hr6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    gap: 16px;
}

.admin-header h1[b-l79tzu0hr6] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.admin-header p[b-l79tzu0hr6] {
    margin: 6px 0 0 0;
    color: #667085;
    font-size: 14px;
}

.queue-count[b-l79tzu0hr6] {
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, #0b57d0 0%, #0a4ba8 100%);
    border-radius: 10px;
    min-width: 48px;
    text-align: center;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(11, 87, 208, 0.2);
    flex-shrink: 0;
}

.queue-mode-toggle[b-l79tzu0hr6] {
    display: inline-flex;
    gap: 4px;
    background: #edf2fb;
    border: 1px solid #d7e0ef;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 12px;
}

.mode-pill[b-l79tzu0hr6] {
    border: none;
    background: transparent;
    color: #334155;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .18s ease;
}

.mode-pill.active[b-l79tzu0hr6] {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.queue-columns[b-l79tzu0hr6] {
    /* Takes the slack the fixed chrome above it leaves. */
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(120px, 1fr);
    justify-content: center;
    gap: 12px;
}

.queue-column[b-l79tzu0hr6] {
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    /* Height comes from the page's flex chain now, not a hand-counted
       reserve: the card fills the row and .column-body scrolls inside it. */
    min-height: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: box-shadow .2s ease;
}

.queue-column:hover[b-l79tzu0hr6] {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.column-header[b-l79tzu0hr6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #dfe5ef;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, rgba(2, 132, 199, 0.02) 100%);
}

.column-title h2[b-l79tzu0hr6] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.column-title p[b-l79tzu0hr6] {
    margin: 4px 0 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 500;
}

.badge[b-l79tzu0hr6] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 1px solid #d1d5db;
    min-width: 36px;
    text-align: center;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.column-body[b-l79tzu0hr6] {
    padding: 14px 16px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.claim-row[b-l79tzu0hr6] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
}

/* Rows with no date input / no action button just collapse the empty tracks. */
.claim-row > :only-child[b-l79tzu0hr6] {
    grid-column: 1 / -1;
}

.claim-main[b-l79tzu0hr6] {
    border: 0;
    background: transparent;
    text-align: left;
    width: 100%;
    cursor: pointer;
    padding: 0;
    min-width: 0; /* let the grid's 1fr track shrink below the text's natural width */
}

.queue-item[b-l79tzu0hr6] {
    width: 100%;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    text-align: left;
    padding: 13px 14px;
    cursor: pointer;
    transition: all .18s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.queue-item:hover[b-l79tzu0hr6] {
    border-color: #a3aec7;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
    transform: translateY(-2px);
}

.queue-item:active[b-l79tzu0hr6] {
    transform: translateY(0);
}

.queue-item:focus-visible[b-l79tzu0hr6] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.item-row[b-l79tzu0hr6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

/* Let the text column shrink inside the flex row so long values wrap instead of pushing the date off. */
.item-row > div:first-child[b-l79tzu0hr6] {
    min-width: 0;
}

.item-title[b-l79tzu0hr6] {
    font-weight: 600;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 14px;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.item-meta[b-l79tzu0hr6] {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.item-date[b-l79tzu0hr6] {
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    white-space: nowrap;
}

.btn-primary[b-l79tzu0hr6] {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary:disabled[b-l79tzu0hr6] {
    opacity: 0.6;
    cursor: not-allowed;
}

.empty-message[b-l79tzu0hr6] {
    margin: 24px 4px;
    color: #9ca3af;
    text-align: center;
    font-size: 14px;
    font-style: italic;
}

.error-message[b-l79tzu0hr6] {
    margin-bottom: 12px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 10px 12px;
    border-radius: 8px;
}

@media (max-width: 900px) {
    .accounts-claims-page[b-l79tzu0hr6] {
        padding: 16px;
    }

    .queue-mode-toggle[b-l79tzu0hr6] {
        width: 100%;
    }

    .mode-pill[b-l79tzu0hr6] {
        flex: 1;
        text-align: center;
    }

    .queue-column[b-l79tzu0hr6] {
        min-height: 380px;
        max-height: none;
    }

    .claim-row[b-l79tzu0hr6] {
        grid-template-columns: 1fr;
    }

    .btn-primary[b-l79tzu0hr6] {
        width: 100%;
    }
}

/* ── Three-pile queue additions (docs/workflows/06 §3) ─────────────────────── */

.pill-count[b-l79tzu0hr6] {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    font-size: 11px;
}

.mode-pill.active .pill-count[b-l79tzu0hr6] {
    background: rgba(255, 255, 255, 0.22);
}

/* Journey badge — which settlement journey the row belongs to. */
.journey-badge[b-l79tzu0hr6] {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: 1px;
}

.journey-badge.employee[b-l79tzu0hr6] { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.journey-badge.contractor[b-l79tzu0hr6] { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.journey-badge.credit-card[b-l79tzu0hr6] { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }
.journey-badge.kind[b-l79tzu0hr6] { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }

.row-right[b-l79tzu0hr6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* The aging cue — how long the claim has waited in its pile: amber at two weeks, red at a month. */
.wait-chip[b-l79tzu0hr6] {
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}

.wait-chip.age-amber[b-l79tzu0hr6] {
    color: #92400e;
    background: #fef7e0;
    border-color: #fbbf24;
}

.wait-chip.age-red[b-l79tzu0hr6] {
    color: #b42318;
    background: #fef3f2;
    border-color: #f97066;
}

/* Subheading for the contractor pile's visibility-only "awaiting invoice" group. */
.group-heading[b-l79tzu0hr6] {
    margin-top: 18px;
    padding: 10px 4px 2px;
    border-top: 1px dashed #d1dae7;
}

.group-heading h3[b-l79tzu0hr6] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #475569;
}

.group-heading p[b-l79tzu0hr6] {
    margin: 4px 0 8px;
    font-size: 12.5px;
    color: #667085;
}

/* ── Two-queue contractor pile + straight-through actions (2026-07-09) ─────── */

/* The contractor pill shows two separate queues side by side. */
.queue-columns.two[b-l79tzu0hr6] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .queue-columns.two[b-l79tzu0hr6] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The page-level search sits above the queues and filters the active pile. */
.page-search[b-l79tzu0hr6] {
    margin-bottom: 12px;
}

/* Two-click confirm: the armed button asks for the second click. */
.btn-primary.armed[b-l79tzu0hr6] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

/* Expected payment date, entered inline before an employee close-out. */
.expected-date[b-l79tzu0hr6] {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 12px 13px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    background: #fbfcfe;
}

.expected-date:focus[b-l79tzu0hr6] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);
}

/* ── Close Out dialog: the expected payment date doubles as the confirmation ── */

.co-overlay[b-l79tzu0hr6] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.co-dialog[b-l79tzu0hr6] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #dfe5ef;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    padding: 22px 24px;
    width: min(420px, calc(100vw - 32px));
}

.co-dialog h2[b-l79tzu0hr6] {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.co-claim[b-l79tzu0hr6] {
    margin: 0 0 4px;
    font-size: 13.5px;
    font-weight: 650;
    color: #334155;
}

.co-text[b-l79tzu0hr6] {
    margin: 0 0 14px;
    font-size: 13px;
    color: #64748b;
}

.co-dialog label[b-l79tzu0hr6] {
    display: block;
    font-size: 13px;
    font-weight: 650;
    color: #334155;
    margin-bottom: 6px;
}

.co-dialog .expected-date[b-l79tzu0hr6] {
    width: 100%;
    box-sizing: border-box;
}

.co-actions[b-l79tzu0hr6] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.btn-cancel[b-l79tzu0hr6] {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
}

.btn-cancel:hover:not(:disabled)[b-l79tzu0hr6] {
    background: #f8fafc;
    border-color: #94a3b8;
}

/* ── Section bar: pills on the left, the Closed toggle prominent on the right ── */
.section-bar[b-l79tzu0hr6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.section-bar .queue-mode-toggle[b-l79tzu0hr6] {
    margin-bottom: 0;
}

/* Deliberately eye-catching (2026-07-10) — a filled accent button, not a faint outline. */
.btn-closed-toggle[b-l79tzu0hr6] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(51, 65, 85, 0.22);
    transition: all .18s ease;
}

.btn-closed-toggle:hover[b-l79tzu0hr6] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(51, 65, 85, 0.3);
}

/* In closed mode the button turns blue — the way back to open work. */
.btn-closed-toggle.on[b-l79tzu0hr6] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
/* /Pages/AddClaim.razor.rz.scp.css */
.impersonation-banner[b-4fwysr16tk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
}

.impersonation-banner strong[b-4fwysr16tk] {
    font-size: 13px;
}

.impersonation-banner span[b-4fwysr16tk] {
    font-size: 12px;
}
/* /Pages/AddExpenseItem.razor.rz.scp.css */
.detail-container[b-g387v7b0xp] {
    min-height: calc(100vh - 6.5rem);
    background: #f8fafc;
}

.top-bar[b-g387v7b0xp] {
    background: #ffffff;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    margin: 0 auto 18px;
    max-width: var(--mtl-form-max);
    padding: 20px 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.impersonation-banner[b-g387v7b0xp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 auto 14px;
    max-width: var(--mtl-form-max);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
    padding: 10px 12px;
}

.impersonation-banner strong[b-g387v7b0xp] {
    font-size: 13px;
}

.impersonation-banner span[b-g387v7b0xp] {
    font-size: 12px;
}

.top-bar-content[b-g387v7b0xp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.top-bar-left h1[b-g387v7b0xp] {
    margin: 0;
    font-size: 28px;
    font-weight: 750;
    color: #0f172a;
}

.top-bar-left p[b-g387v7b0xp] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.top-bar-right[b-g387v7b0xp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-submit[b-g387v7b0xp],
.btn-cancel[b-g387v7b0xp] {
    align-items: center;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-submit[b-g387v7b0xp] {
    background: #2563eb;
    color: white;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.btn-submit:hover:not(:disabled)[b-g387v7b0xp] {
    background: #1d4ed8;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.26);
    transform: translateY(-1px);
}

.btn-submit:disabled[b-g387v7b0xp] {
    cursor: not-allowed;
    opacity: .65;
}

.btn-cancel[b-g387v7b0xp] {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
}

.btn-cancel:hover[b-g387v7b0xp] {
    background: #f8fafc;
    border-color: #94a3b8;
}

.upload-progress[b-g387v7b0xp] {
    background: #ffffff;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    margin: 0 auto 14px;
    max-width: var(--mtl-form-max);
    padding: 14px 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.upload-progress-label[b-g387v7b0xp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 650;
    min-width: 0;
}

.upload-progress-label span:first-child[b-g387v7b0xp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-progress-count[b-g387v7b0xp] {
    color: #64748b;
    font-weight: 700;
    white-space: nowrap;
}

.upload-progress-track[b-g387v7b0xp] {
    background: #e2e8f0;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.upload-progress-fill[b-g387v7b0xp] {
    background: #2563eb;
    border-radius: 999px;
    height: 100%;
    transition: width 0.25s ease;
}

.content-wrapper[b-g387v7b0xp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 18px;
    max-width: var(--mtl-form-max);
    margin: 0 auto;
    width: 100%;
}

.details-section[b-g387v7b0xp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.details-card[b-g387v7b0xp] {
    background: #ffffff;
    border-radius: 12px;
    padding: 22px;
    border: 1px solid #dbe3ee;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.card-heading[b-g387v7b0xp] {
    margin-bottom: 18px;
}

.card-heading h2[b-g387v7b0xp] {
    margin: 4px 0 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
}

.section-kicker[b-g387v7b0xp] {
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.detail-field[b-g387v7b0xp] {
    margin: 0;
}

.detail-field label[b-g387v7b0xp] {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #334155;
    font-size: 14px;
}

.detail-field input[b-g387v7b0xp],
.detail-field textarea[b-g387v7b0xp] {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    background: #fbfcfe;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.detail-field input:focus[b-g387v7b0xp],
.detail-field textarea:focus[b-g387v7b0xp] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);
}

.detail-field textarea[b-g387v7b0xp] {
    resize: vertical;
    min-height: 180px;
}

.attachments-section[b-g387v7b0xp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.attachments-card[b-g387v7b0xp] {
    background: #ffffff;
    border-radius: 12px;
    padding: 22px;
    border: 1px solid #dbe3ee;
    height: fit-content;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.error-message[b-g387v7b0xp] {
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 10px;
    color: #b42318;
    font-size: 14px;
    font-weight: 650;
    padding: 12px 14px;
}

@media (max-width: 1024px) {
    .content-wrapper[b-g387v7b0xp] {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .detail-container[b-g387v7b0xp] {
        min-height: auto;
    }

    .top-bar[b-g387v7b0xp] {
        margin-bottom: 14px;
        padding: 16px;
    }

    .top-bar-content[b-g387v7b0xp] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .top-bar-right[b-g387v7b0xp] {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-submit[b-g387v7b0xp],
    .btn-cancel[b-g387v7b0xp] {
        flex: 1;
        min-width: 100px;
    }

    .details-card[b-g387v7b0xp] {
        padding: 18px;
    }

    .attachments-card[b-g387v7b0xp] {
        padding: 18px;
    }
}
.cross-link[b-g387v7b0xp] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 12.5px;
}

.cross-link a[b-g387v7b0xp] {
    color: #1d4ed8;
}

/* WASM submits everything as one request, so the bar sweeps rather than counts. */
.upload-progress-indeterminate[b-g387v7b0xp] {
    width: 40% !important;
    animation: upload-sweep-b-g387v7b0xp 1.2s ease-in-out infinite alternate;
}

@keyframes upload-sweep-b-g387v7b0xp {
    from { margin-left: 0; }
    to { margin-left: 60%; }
}
/* /Pages/AddMileage.razor.rz.scp.css */
.detail-container[b-bkiu58cy7r] {
    min-height: calc(100vh - 6.5rem);
    background: #f8fafc;
}

.top-bar[b-bkiu58cy7r] {
    background: #ffffff;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    margin: 0 auto 18px;
    max-width: var(--mtl-form-max);
    padding: 20px 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.impersonation-banner[b-bkiu58cy7r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 auto 14px;
    max-width: var(--mtl-form-max);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
    padding: 10px 12px;
}

.impersonation-banner strong[b-bkiu58cy7r] {
    font-size: 13px;
}

.impersonation-banner span[b-bkiu58cy7r] {
    font-size: 12px;
}

.top-bar-content[b-bkiu58cy7r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.top-bar-left h1[b-bkiu58cy7r] {
    margin: 0;
    font-size: 28px;
    font-weight: 750;
    color: #0f172a;
}

.top-bar-left p[b-bkiu58cy7r] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.top-bar-right[b-bkiu58cy7r] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-submit[b-bkiu58cy7r],
.btn-cancel[b-bkiu58cy7r] {
    align-items: center;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-submit[b-bkiu58cy7r] {
    background: #2563eb;
    color: white;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.btn-submit:hover:not(:disabled)[b-bkiu58cy7r] {
    background: #1d4ed8;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.26);
    transform: translateY(-1px);
}

.btn-submit:disabled[b-bkiu58cy7r] {
    cursor: not-allowed;
    opacity: .65;
}

.btn-cancel[b-bkiu58cy7r] {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
}

.btn-cancel:hover[b-bkiu58cy7r] {
    background: #f8fafc;
    border-color: #94a3b8;
}

.upload-progress[b-bkiu58cy7r] {
    background: #ffffff;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    margin: 0 auto 14px;
    max-width: var(--mtl-form-max);
    padding: 14px 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.upload-progress-label[b-bkiu58cy7r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 650;
    min-width: 0;
}

.upload-progress-label span:first-child[b-bkiu58cy7r] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-progress-count[b-bkiu58cy7r] {
    color: #64748b;
    font-weight: 700;
    white-space: nowrap;
}

.upload-progress-track[b-bkiu58cy7r] {
    background: #e2e8f0;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.upload-progress-fill[b-bkiu58cy7r] {
    background: #2563eb;
    border-radius: 999px;
    height: 100%;
    transition: width 0.25s ease;
}

.content-wrapper[b-bkiu58cy7r] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 18px;
    max-width: var(--mtl-form-max);
    margin: 0 auto;
    width: 100%;
}

.details-section[b-bkiu58cy7r] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.details-card[b-bkiu58cy7r] {
    background: #ffffff;
    border-radius: 12px;
    padding: 22px;
    border: 1px solid #dbe3ee;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.card-heading[b-bkiu58cy7r] {
    margin-bottom: 18px;
}

.card-heading h2[b-bkiu58cy7r] {
    margin: 4px 0 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
}

.section-kicker[b-bkiu58cy7r] {
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.detail-field[b-bkiu58cy7r] {
    margin: 0;
}

.detail-field label[b-bkiu58cy7r] {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #334155;
    font-size: 14px;
}

.detail-field input[b-bkiu58cy7r],
.detail-field textarea[b-bkiu58cy7r] {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    background: #fbfcfe;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.detail-field input:focus[b-bkiu58cy7r],
.detail-field textarea:focus[b-bkiu58cy7r] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);
}

.detail-field textarea[b-bkiu58cy7r] {
    resize: vertical;
    min-height: 180px;
}

.attachments-section[b-bkiu58cy7r] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.attachments-card[b-bkiu58cy7r] {
    background: #ffffff;
    border-radius: 12px;
    padding: 22px;
    border: 1px solid #dbe3ee;
    height: fit-content;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.error-message[b-bkiu58cy7r] {
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 10px;
    color: #b42318;
    font-size: 14px;
    font-weight: 650;
    padding: 12px 14px;
}

@media (max-width: 1024px) {
    .content-wrapper[b-bkiu58cy7r] {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .detail-container[b-bkiu58cy7r] {
        min-height: auto;
    }

    .top-bar[b-bkiu58cy7r] {
        margin-bottom: 14px;
        padding: 16px;
    }

    .top-bar-content[b-bkiu58cy7r] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .top-bar-right[b-bkiu58cy7r] {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-submit[b-bkiu58cy7r],
    .btn-cancel[b-bkiu58cy7r] {
        flex: 1;
        min-width: 100px;
    }

    .details-card[b-bkiu58cy7r] {
        padding: 18px;
    }

    .attachments-card[b-bkiu58cy7r] {
        padding: 18px;
    }
}
/* ── Mileage-specific: the live value card and the return toggle ── */
.value-card .value-row[b-bkiu58cy7r] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}

.value-card .value-total[b-bkiu58cy7r] {
    border-bottom: none;
    font-size: 16px;
}

.value-card .value-total strong[b-bkiu58cy7r] {
    color: #1e3a8a;
    font-size: 20px;
}

.value-note[b-bkiu58cy7r] {
    margin-top: 10px;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.4;
}

.cross-link a[b-bkiu58cy7r] {
    color: #1d4ed8;
}

.toggle-field[b-bkiu58cy7r] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    /* The other fields get their visual separation from a stacked block label above the
       input; this one's label is inline with the switch, so it needs explicit top space. */
    margin-top: 20px;
}

.toggle-field .field-label[b-bkiu58cy7r] {
    font-weight: 600;
    color: #334155;
    font-size: 14px;
}

.toggle-field .toggle-hint[b-bkiu58cy7r] {
    flex-basis: 100%;
    color: #64748b;
    font-size: 12px;
}

/* A pill switch, driven by a plain button (no checkbox) so the page's global
   `.detail-field input` styling can't touch it. Matches the review-screen toggles. */
.mileage-toggle[b-bkiu58cy7r] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 3px 12px 3px 4px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, background-color .2s ease;
    min-width: 84px;
}

.mileage-toggle:hover[b-bkiu58cy7r] {
    border-color: #94a3b8;
}

.mileage-toggle.on[b-bkiu58cy7r] {
    border-color: #93c5fd;
    background: #eff6ff;
}

.mileage-toggle:focus-visible[b-bkiu58cy7r] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.mileage-toggle-track[b-bkiu58cy7r] {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .2s ease;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    flex: 0 0 auto;
}

.mileage-toggle.on .mileage-toggle-track[b-bkiu58cy7r] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.mileage-toggle-knob[b-bkiu58cy7r] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform .2s ease;
}

.mileage-toggle.on .mileage-toggle-knob[b-bkiu58cy7r] {
    transform: translateX(14px);
}

.mileage-toggle-text[b-bkiu58cy7r] {
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    flex: 0 0 auto;
}

/* Inline validation for the miles field. */
.detail-field input.input-invalid[b-bkiu58cy7r] {
    border-color: #dc2626;
    background: #fff7f7;
}

.field-error[b-bkiu58cy7r] {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
}
/* /Pages/AddMileageClaim.razor.rz.scp.css */
.impersonation-banner[b-elsn9qcpue] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
}

.impersonation-banner strong[b-elsn9qcpue] {
    font-size: 13px;
}

.impersonation-banner span[b-elsn9qcpue] {
    font-size: 12px;
}
/* /Pages/Administration.razor.rz.scp.css */
.administration-page[b-3qtxs9gnpy] {
    padding: 28px 24px;
    max-width: var(--mtl-page-max);
    margin: 0 auto;
}

.admin-header[b-3qtxs9gnpy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    gap: 16px;
}

.admin-header h1[b-3qtxs9gnpy] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.admin-header p[b-3qtxs9gnpy] {
    margin: 6px 0 0 0;
    color: #667085;
    font-size: 14px;
}

/* ── section pills (same treatment as the queue pages) ───────────────────── */

.queue-mode-toggle[b-3qtxs9gnpy] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #edf2fb;
    border: 1px solid #d7e0ef;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 12px;
}

.mode-pill[b-3qtxs9gnpy] {
    border: none;
    background: transparent;
    color: #334155;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .18s ease;
}

.mode-pill.active[b-3qtxs9gnpy] {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.pill-count[b-3qtxs9gnpy] {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    font-size: 11px;
}

.mode-pill.active .pill-count[b-3qtxs9gnpy] {
    background: rgba(255, 255, 255, 0.25);
}

/* ── section cards ───────────────────────────────────────────────────────── */

.section-card[b-3qtxs9gnpy] {
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    /* Takes the slack the fixed chrome above it leaves. */
    flex: 1;
    min-height: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.section-head[b-3qtxs9gnpy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #dfe5ef;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, rgba(2, 132, 199, 0.02) 100%);
    border-radius: 14px 14px 0 0;
}

.section-head h2[b-3qtxs9gnpy] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.section-head p[b-3qtxs9gnpy] {
    margin: 4px 0 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 500;
}

.badge[b-3qtxs9gnpy] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 1px solid #d1d5db;
    min-width: 36px;
    text-align: center;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.section-body[b-3qtxs9gnpy] {
    padding: 14px 16px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Height comes from the page's flex chain now, not a hand-counted
       reserve: the card fills the row and .column-body scrolls inside it. */
    min-height: 0;
    flex: 1;
}

/* ── search (Roles) ──────────────────────────────────────────────────────── */

.search-bar[b-3qtxs9gnpy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid #eef2f7;
}

.search-icon[b-3qtxs9gnpy] {
    font-size: 13px;
}

.search-input[b-3qtxs9gnpy] {
    flex: 1;
    border: 1px solid #dbe2ee;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
}

.search-clear[b-3qtxs9gnpy] {
    border: none;
    background: #eef2f7;
    color: #475569;
    border-radius: 999px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

/* Archived people are hidden by default — this reveals them (revoke-only). */
.archived-toggle[b-3qtxs9gnpy] {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
}

.archived-toggle:hover[b-3qtxs9gnpy] {
    border-color: #94a3b8;
    color: #334155;
}

.archived-toggle.on[b-3qtxs9gnpy] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #334155;
}

/* ── Roles rows ──────────────────────────────────────────────────────────── */

.user-row[b-3qtxs9gnpy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px;
}

.user-row.archived[b-3qtxs9gnpy] {
    background: #f8fafc;
}

.user-row.archived .user-name[b-3qtxs9gnpy] {
    color: #94a3b8;
}

.user-ident[b-3qtxs9gnpy] {
    min-width: 0;
}

.user-name[b-3qtxs9gnpy] {
    font-weight: 600;
    color: #0f172a;
    font-size: 14px;
}

.user-email[b-3qtxs9gnpy] {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-chips[b-3qtxs9gnpy] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Held = filled; not held = outline. One click grants or revokes. */
.role-chip[b-3qtxs9gnpy] {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
}

.role-chip:hover:not(:disabled)[b-3qtxs9gnpy] {
    border-color: #93c5fd;
    color: #1d4ed8;
}

.role-chip.on[b-3qtxs9gnpy] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.role-chip:disabled[b-3qtxs9gnpy] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── flag chips ──────────────────────────────────────────────────────────── */

.flag-chip[b-3qtxs9gnpy] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: 1px;
}

.archived-chip[b-3qtxs9gnpy]  { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.default-chip[b-3qtxs9gnpy]   { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.iso-chip[b-3qtxs9gnpy]       { background: #f0fdfa; color: #0f766e; border: 1px solid #99f6e4; }
.retired-chip[b-3qtxs9gnpy]   { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.superuser-chip[b-3qtxs9gnpy] { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.you-chip[b-3qtxs9gnpy]       { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

/* ── digest sub-tabs (Admin queue / Cost queue) ──────────────────────────── */

.digest-queue-tabs[b-3qtxs9gnpy] {
    display: flex;
    gap: 6px;
    padding: 12px 16px 0;
}

.sub-pill[b-3qtxs9gnpy] {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
}

.sub-pill:hover[b-3qtxs9gnpy] {
    border-color: #93c5fd;
    color: #1d4ed8;
}

.sub-pill.active[b-3qtxs9gnpy] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* ── entity rows (Currencies / Aliases) ──────────────────────────────────── */

.entity-row[b-3qtxs9gnpy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px;
}

.entity-ident[b-3qtxs9gnpy] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.entity-name[b-3qtxs9gnpy] {
    font-weight: 600;
    color: #0f172a;
    font-size: 14px;
}

.entity-sub[b-3qtxs9gnpy] {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}

.alias-arrow[b-3qtxs9gnpy] {
    color: #94a3b8;
    font-weight: 700;
}

.row-actions[b-3qtxs9gnpy] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── add rows ────────────────────────────────────────────────────────────── */

.add-row[b-3qtxs9gnpy] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f7;
    flex-wrap: wrap;
}

.add-row input[type="text"][b-3qtxs9gnpy],
.add-row select[b-3qtxs9gnpy] {
    flex: 1;
    min-width: 160px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    background: #fff;
}

.add-row .input-short[b-3qtxs9gnpy] {
    flex: 0 1 140px;
    min-width: 100px;
}

.section-hint[b-3qtxs9gnpy] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12.5px;
}

.label-optional[b-3qtxs9gnpy] {
    color: #94a3b8;
    font-weight: 400;
    font-size: 12px;
}

.field-label[b-3qtxs9gnpy] {
    display: block;
    margin: 8px 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* ── mileage rate ────────────────────────────────────────────────────────── */

.rate-body[b-3qtxs9gnpy] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rate-current[b-3qtxs9gnpy] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rate-figure[b-3qtxs9gnpy] {
    font-size: 34px;
    font-weight: 700;
    color: #0f172a;
}

.rate-unit[b-3qtxs9gnpy] {
    color: #667085;
    font-size: 14px;
    font-weight: 600;
}

.rate-edit[b-3qtxs9gnpy] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.rate-edit .field-label[b-3qtxs9gnpy] {
    flex-basis: 100%;
    margin: 0 0 2px;
}

.rate-edit input[b-3qtxs9gnpy] {
    width: 140px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
}

.rate-hint[b-3qtxs9gnpy] {
    margin: 0;
    color: #667085;
    font-size: 13px;
}

/* ── shared bits (same vocabulary as the other pages) ────────────────────── */

.btn-primary[b-3qtxs9gnpy] {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary:disabled[b-3qtxs9gnpy] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-3qtxs9gnpy] {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 13px;
    color: #334155;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.btn-secondary:disabled[b-3qtxs9gnpy] {
    opacity: 0.6;
    cursor: not-allowed;
}

.empty-message[b-3qtxs9gnpy] {
    margin: 24px 4px;
    color: #9ca3af;
    text-align: center;
    font-size: 14px;
    font-style: italic;
}

.error-message[b-3qtxs9gnpy] {
    margin-bottom: 12px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 10px 12px;
    border-radius: 8px;
}

.success-message[b-3qtxs9gnpy] {
    margin-bottom: 12px;
    color: #0d652d;
    background: #e6f4ea;
    border: 1px solid #b7dfc2;
    padding: 10px 12px;
    border-radius: 8px;
}

/* ── dialog (same rb- vocabulary as the Rollback page) ───────────────────── */

.rb-overlay[b-3qtxs9gnpy] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.rb-dialog[b-3qtxs9gnpy] {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
}

.rb-dialog h2[b-3qtxs9gnpy] {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.rb-dialog-text[b-3qtxs9gnpy] {
    margin: 0 0 14px 0;
    color: #334155;
    font-size: 14px;
}

.rb-dialog label[b-3qtxs9gnpy] {
    display: block;
    margin: 10px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.rb-dialog input[type="text"][b-3qtxs9gnpy] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
}

.rb-dialog-actions[b-3qtxs9gnpy] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .administration-page[b-3qtxs9gnpy] {
        padding: 16px;
    }

    .user-row[b-3qtxs9gnpy] {
        flex-direction: column;
        align-items: flex-start;
    }

    .role-chips[b-3qtxs9gnpy] {
        justify-content: flex-start;
    }

    .section-body[b-3qtxs9gnpy] {
        max-height: none;
    }
}
/* /Pages/AdminItems.razor.rz.scp.css */
/* Expenses | Mileage tab pills — the Mileage tab keeps its own list (docs/workflows/13 §4). */
.queue-tabs[b-y43nrzefyf] {
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    padding: 24px 24px 0;
    display: flex;
    gap: 8px;
}

.queue-tab-pill[b-y43nrzefyf] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.queue-tab-pill:hover[b-y43nrzefyf] {
    border-color: #94a3b8;
    background: #f8fafc;
}

.queue-tab-pill.active[b-y43nrzefyf] {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: #ffffff;
}
/* /Pages/Authentication.razor.rz.scp.css */
.auth-status[b-avnbb6bkng] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-status h1[b-avnbb6bkng] {
    margin: 18px 0 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mtl-text);
}

.auth-status p[b-avnbb6bkng] {
    margin: 8px 0 0;
    color: var(--mtl-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* The card already pads and centers; strip the status screen's page-level spacing. */
.auth-result[b-avnbb6bkng]  .status-screen {
    padding: 0;
}

.auth-error-detail[b-avnbb6bkng] {
    margin: 14px 0 0;
    padding: 10px 12px;
    background: var(--mtl-bg);
    border: 1px solid var(--mtl-border);
    border-radius: 8px;
    color: var(--mtl-text-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8rem;
    word-break: break-word;
}
/* /Pages/ClaimData.razor.rz.scp.css */
.claim-page-shell[b-22c4bz1d09] {
    min-height: calc(100vh - 4rem);
}

.claim-page-shell.with-rail[b-22c4bz1d09] {
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    padding: 18px;
    display: grid;
    grid-template-columns: 234px minmax(0, 1fr);
    gap: 16px;
}

.claim-page-shell.with-rail .claim-detail-page[b-22c4bz1d09] {
    margin: 0;
    max-width: none;
    border-radius: 16px;
}

.claim-detail-page[b-22c4bz1d09] {
    padding: 22px 18px;
    /* Without the rail this IS the screen, so it takes the shared cap (with the rail the
       shell above owns it and this resolves to none). */
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    min-height: calc(100vh - 110px);
    background:
        radial-gradient(circle at 92% 8%, rgba(16, 185, 129, 0.08), transparent 35%),
        radial-gradient(circle at 4% 94%, rgba(59, 130, 246, 0.09), transparent 42%),
        #f8fbff;
    border-radius: 20px;
}

.navigation-rail[b-22c4bz1d09] {
    position: sticky;
    top: calc(4rem + 10px);
    width: 234px;
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    background: #ffffff;
    padding: 12px 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: calc(100vh - 150px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.09);
}

.navigation-rail h2[b-22c4bz1d09] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.navigation-actions[b-22c4bz1d09] {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.navigation-actions button[b-22c4bz1d09] {
    flex: 1;
    border-radius: 8px;
    padding: 9px 11px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s ease;
    color: #0f172a;
}

.navigation-actions button:hover:not(:disabled)[b-22c4bz1d09] {
    background: #f3f4f6;
    border-color: #a3aec7;
}

.navigation-actions button:disabled[b-22c4bz1d09] {
    opacity: 0.5;
    cursor: not-allowed;
}

.navigation-list[b-22c4bz1d09] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.navigation-item[b-22c4bz1d09] {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all .2s ease;
    color: #0f172a;
}

.navigation-item:hover[b-22c4bz1d09] {
    background: #f9fafb;
    border-color: #a3aec7;
}

.navigation-item.active[b-22c4bz1d09] {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 100%);
    box-shadow: inset 0 0 0 1.5px #2563eb;
    font-weight: 600;
}

.top-bar[b-22c4bz1d09] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 14px;
    border: 1px solid #d9e3f2;
    border-radius: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.11) 0%, rgba(16, 185, 129, 0.07) 100%);
}

.top-actions[b-22c4bz1d09] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.top-bar h1[b-22c4bz1d09] {
    margin: 0;
    color: #0f172a;
    font-size: 29px;
}

.top-bar p[b-22c4bz1d09] {
    margin: 6px 0 0;
    color: #64748b;
}

.detail-grid[b-22c4bz1d09] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.card[b-22c4bz1d09] {
    border: 1px solid #d9e3f2;
    border-radius: 14px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.card h2[b-22c4bz1d09] {
    margin: 0 0 12px;
    color: #0f172a;
}

.row[b-22c4bz1d09] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #eef2f7;
    padding: 8px 0;
}

.row span[b-22c4bz1d09] {
    color: #64748b;
}

.row strong[b-22c4bz1d09] {
    color: #0f172a;
}

.items-list[b-22c4bz1d09] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-row[b-22c4bz1d09] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all .15s ease;
}

.item-row:hover[b-22c4bz1d09] {
    border-color: #90b4e5;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.16);
}

.item-row strong[b-22c4bz1d09] {
    display: block;
    color: #0f172a;
}

.item-row span[b-22c4bz1d09] {
    color: #64748b;
    font-size: 12px;
}

.amount[b-22c4bz1d09] {
    font-weight: 700;
    color: #0f172a;
}

.btn-secondary[b-22c4bz1d09] {
    border: 1px solid #d1d5db;
    background: #f8fafc;
    color: #0f172a;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
}

.btn-primary[b-22c4bz1d09] {
    border: none;
    background: linear-gradient(135deg, #0b63ce 0%, #0d9488 100%);
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
}

.btn-primary:disabled[b-22c4bz1d09] {
    opacity: 0.6;
    cursor: not-allowed;
}

.error-message[b-22c4bz1d09] {
    margin-bottom: 12px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 10px 12px;
    border-radius: 8px;
}

.success-message[b-22c4bz1d09] {
    margin-bottom: 12px;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 10px 12px;
    border-radius: 8px;
}

.empty[b-22c4bz1d09] {
    color: #64748b;
    font-style: italic;
}

@media (max-width: 980px) {
    .claim-page-shell.with-rail .claim-detail-page[b-22c4bz1d09] {
        margin: 0;
    }

    .navigation-rail[b-22c4bz1d09] {
        display: none;
    }

    .claim-page-shell.with-rail[b-22c4bz1d09] {
        display: block;
        padding: 0;
    }

    .detail-grid[b-22c4bz1d09] {
        grid-template-columns: 1fr;
    }

    .top-actions[b-22c4bz1d09] {
        width: 100%;
    }

    .btn-primary[b-22c4bz1d09],
    .btn-secondary[b-22c4bz1d09] {
        width: 100%;
    }

    .claim-detail-page[b-22c4bz1d09] {
        padding: 16px;
        border-radius: 0;
        min-height: auto;
    }
}

/* ── Accounts actions: two-click confirm + the close-out's expected payment date ── */

.btn-primary.armed[b-22c4bz1d09] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.expected-date[b-22c4bz1d09] {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 12px 13px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    background: #fbfcfe;
}

.expected-date:focus[b-22c4bz1d09] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);
}

/* Value (ex. VAT) | VAT | Total columns on claim lines, and the card's totals footer. */
.amount-cols[b-22c4bz1d09] {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
    align-items: flex-end;
}

.amount-col[b-22c4bz1d09] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 76px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

.amount-col small[b-22c4bz1d09] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: 1px;
}

.amount-col.total[b-22c4bz1d09] {
    color: #0f172a;
    font-weight: 700;
}

.items-totals[b-22c4bz1d09] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    margin-top: 12px;
    padding: 12px 12px 10px;
    border-top: 2px solid #dbe3ee;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
    border-radius: 0 0 10px 10px;
}

.items-totals .totals-label[b-22c4bz1d09] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #475569;
}

.items-totals .amount-col.total[b-22c4bz1d09] {
    color: #1e3a8a;
}

/* The items card matches the Claim Summary's height: the list scrolls inside and the
   totals footer stays pinned at the bottom. (height: 0 stops this card driving the grid
   row's height, so the summary card defines it; min-height: 100% then stretches to it.) */
.items-card[b-22c4bz1d09] {
    height: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.items-card .items-list[b-22c4bz1d09] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.items-card .items-list[b-22c4bz1d09]::-webkit-scrollbar {
    width: 6px;
}

.items-card .items-list[b-22c4bz1d09]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.items-card .items-totals[b-22c4bz1d09] {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    /* Single-column layout: no summary card beside it to match — flow naturally. */
    .items-card[b-22c4bz1d09] {
        height: auto;
        min-height: 0;
    }

    .items-card .items-list[b-22c4bz1d09] {
        overflow-y: visible;
        max-height: none;
    }
}

/* The phone-width entry bridge to /m — hidden everywhere else. */
.mobile-suggest[b-22c4bz1d09] {
    display: none;
}

@media (max-width: 720px) {
    .mobile-suggest[b-22c4bz1d09] {
        display: block;
        margin-bottom: 12px;
        padding: 10px 12px;
        border-radius: var(--mtl-radius);
        background: var(--mtl-accent-soft);
        color: var(--mtl-accent);
        font-size: 13px;
    }

    .mobile-suggest a[b-22c4bz1d09] {
        color: var(--mtl-accent);
        font-weight: 600;
    }
}
/* /Pages/Claims.razor.rz.scp.css */
:host[b-up74ofanbp] {
    display: contents;
}

.claims-page[b-up74ofanbp] {
    padding: 32px 24px;
    width: 100%;
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.claims-header[b-up74ofanbp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 16px;
}

.claims-header h1[b-up74ofanbp] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.claims-header p[b-up74ofanbp] {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.btn-primary[b-up74ofanbp] {
    padding: 11px 16px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
    transition: all .2s ease;
}

.btn-primary:hover[b-up74ofanbp] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.impersonation-banner[b-up74ofanbp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
}

.impersonation-banner strong[b-up74ofanbp] {
    font-size: 13px;
}

.impersonation-banner span[b-up74ofanbp] {
    font-size: 12px;
}

.claims-columns[b-up74ofanbp] {
    /* Takes the slack: the columns fill it and scroll inside themselves. */
    flex: 1;
    min-height: 0;
    /* Items size to their content, capped at the row height — see the column CSS. */
    align-items: start;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Staff view: two journey stages, so two full-width tracks (mirrors CreditCards.razor.css). */
.claims-columns.two-columns[b-up74ofanbp] {
    grid-template-columns: repeat(2, 1fr);
}

.error-message[b-up74ofanbp] {
    margin-bottom: 12px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 10px 12px;
    border-radius: 8px;
}

/* 1300 ≈ the shared page cap (--mtl-page-max) plus the shell padding — the point where
   the viewport starts squeezing the capped page. Media queries can't read the token, so
   keep this literal in step with it (and with the column CSS). */
@media (max-width: 1300px) {
    .claims-columns[b-up74ofanbp] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .claims-page[b-up74ofanbp] {
        padding: 24px 16px;
    }

    .claims-header[b-up74ofanbp] {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 22px;
    }

    .btn-primary[b-up74ofanbp] {
        width: 100%;
    }

    .claims-columns[b-up74ofanbp] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.claims-header-actions[b-up74ofanbp] {
    display: flex;
    gap: 8px;
}

.btn-secondary[b-up74ofanbp] {
    background: #eff6ff;
    color: #1e3a8a;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Wrapped to more than one row: squeezing them into the viewport would leave each too
   short to read, so the region scrolls as one instead (the columns cap themselves). */
@media (max-width: 1300px) {
    .claims-columns[b-up74ofanbp] {
        overflow-y: auto;
        grid-auto-rows: minmax(320px, auto);
    }
}
/* /Pages/CostItems.razor.rz.scp.css */
.bypass-toggle[b-6nhieaqz25] {
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    padding: 24px 24px 0;
    display: flex;
    gap: 8px;
}

.bypass-pill[b-6nhieaqz25] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bypass-pill:hover[b-6nhieaqz25] {
    border-color: #94a3b8;
    background: #f8fafc;
}

.bypass-pill.active[b-6nhieaqz25] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
}

.bypass-sub[b-6nhieaqz25] {
    font-weight: 600;
    opacity: 0.85;
    font-size: 12px;
}

/* Expenses | Mileage tab pills — the Mileage tab keeps its own list (docs/workflows/13 §4). */
.queue-tabs[b-6nhieaqz25] {
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    padding: 24px 24px 0;
    display: flex;
    gap: 8px;
}

.queue-tab-pill[b-6nhieaqz25] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.queue-tab-pill:hover[b-6nhieaqz25] {
    border-color: #94a3b8;
    background: #f8fafc;
}

.queue-tab-pill.active[b-6nhieaqz25] {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: #ffffff;
}
/* /Pages/InvoiceDetail.razor.rz.scp.css */
.review-page[b-qrrcprv7fy] {
    min-height: calc(100vh - 4rem);
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    padding: 24px;
    background:
        radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.14), transparent 35%),
        radial-gradient(circle at 95% 5%, rgba(14, 165, 233, 0.1), transparent 32%),
        linear-gradient(180deg, #f8fafc 0%, #eef3fb 100%);
}

.review-content[b-qrrcprv7fy] {
    min-width: 0;
}

.review-top[b-qrrcprv7fy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 16px;
    border: 1px solid #d8e2f1;
    border-radius: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.review-top h1[b-qrrcprv7fy] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-top p[b-qrrcprv7fy] {
    margin: 4px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.status-pill[b-qrrcprv7fy] {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.status-pill.draft[b-qrrcprv7fy] {
    border: 1px solid #fbd38d;
    background: #fff7ed;
    color: #92400e;
}

.status-pill.ready[b-qrrcprv7fy] {
    border: 1px solid #86efac;
    background: #ecfdf5;
    color: #166534;
}

/* Actions run across the top in a horizontal bar. */
.action-bar[b-qrrcprv7fy] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    padding: 14px 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    margin-bottom: 20px;
}

.action-bar button[b-qrrcprv7fy] {
    width: auto;
}

.action-right[b-qrrcprv7fy] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Summary + Invoice details side by side, stretched to equal height. */
.info-grid[b-qrrcprv7fy] {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.4fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
}

/* The two item tables side by side. */
.items-grid[b-qrrcprv7fy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

.items-grid.single[b-qrrcprv7fy] {
    grid-template-columns: minmax(0, 1fr);
}

.card[b-qrrcprv7fy] {
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    transition: box-shadow .2s ease, border-color .2s ease;
}

.card:hover[b-qrrcprv7fy] {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
    border-color: #cfd8e6;
}

.card h2[b-qrrcprv7fy] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.row[b-qrrcprv7fy] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    align-items: baseline;
}

.row span[b-qrrcprv7fy] {
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

.row strong[b-qrrcprv7fy] {
    color: #0f172a;
    font-weight: 600;
    font-size: 14px;
    text-align: right;
}

.form-grid[b-qrrcprv7fy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.form-section[b-qrrcprv7fy] {
    grid-column: 1 / -1;
    margin-top: 4px;
    margin-bottom: -4px;
    padding-top: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #475569;
    border-top: 1px dashed #d1dae7;
}

.field[b-qrrcprv7fy] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-full[b-qrrcprv7fy] {
    grid-column: 1 / -1;
}

.field label[b-qrrcprv7fy] {
    display: block;
    font-weight: 600;
    margin-bottom: 0;
    color: #0f172a;
    font-size: 14px;
}

.field input[b-qrrcprv7fy],
.field select[b-qrrcprv7fy] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 11px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.field input:hover[b-qrrcprv7fy],
.field select:hover[b-qrrcprv7fy] {
    border-color: #a3aec7;
}

.field input:focus[b-qrrcprv7fy],
.field select:focus[b-qrrcprv7fy] {
    outline: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.field select:disabled[b-qrrcprv7fy] {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.action-bar button[b-qrrcprv7fy],
.btn-secondary[b-qrrcprv7fy] {
    border-radius: 10px;
    padding: 9px 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all .2s ease;
}

.btn-secondary[b-qrrcprv7fy] {
    border-color: #d1d5db;
    background: #fff;
    color: #0f172a;
}

.btn-secondary:hover:not(:disabled)[b-qrrcprv7fy] {
    background: #f3f4f6;
    border-color: #a3aec7;
}

.btn-secondary:disabled[b-qrrcprv7fy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-save[b-qrrcprv7fy] {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

.btn-save:hover:not(:disabled)[b-qrrcprv7fy] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
}

.btn-approve[b-qrrcprv7fy] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2);
}

.btn-approve:hover:not(:disabled)[b-qrrcprv7fy] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-reject[b-qrrcprv7fy] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}

.btn-reject:hover:not(:disabled)[b-qrrcprv7fy] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-save:disabled[b-qrrcprv7fy],
.btn-approve:disabled[b-qrrcprv7fy],
.btn-reject:disabled[b-qrrcprv7fy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.delete-warning[b-qrrcprv7fy] {
    margin: 4px 0 0 0;
    color: #92400e;
    font-size: 13px;
    font-weight: 600;
}

/* Full-width item tables below the two-column grid. */
.items-card[b-qrrcprv7fy] {
    margin-bottom: 20px;
}

.invoice-items-table[b-qrrcprv7fy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.card-head[b-qrrcprv7fy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background .2s ease;
}

.card-head.clickable[b-qrrcprv7fy] {
    cursor: pointer;
}

.card-head.clickable:hover[b-qrrcprv7fy] {
    background: rgba(37, 99, 235, 0.06);
}

.card-head h2[b-qrrcprv7fy] {
    margin: 0;
}

/* Subtle fullscreen affordance; the whole header is the click target (like My Items). */
.fullscreen-toggle[b-qrrcprv7fy] {
    font-size: 20px;
    line-height: 1;
    color: #64748b;
    opacity: 0.55;
    flex-shrink: 0;
    transition: opacity .2s ease, color .2s ease;
}

.card-head.clickable:hover .fullscreen-toggle[b-qrrcprv7fy] {
    opacity: 1;
    color: #2563eb;
}

.items-scroll[b-qrrcprv7fy] {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid #eef2f7;
    border-radius: 10px;
}

/* Fullscreen items view (inside the shared FullscreenModal). */
.fs-panel[b-qrrcprv7fy] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;
}

.fs-panel h2[b-qrrcprv7fy] {
    margin: 0;
    font-size: 18px;
    color: #0f172a;
}

.fs-panel .search-bar[b-qrrcprv7fy] {
    margin: 0;
}

.fs-body[b-qrrcprv7fy] {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #eef2f7;
    border-radius: 10px;
}

/* Widen the shared fullscreen modal for the data tables (this page only). */
[b-qrrcprv7fy] .fullscreen-modal .fullscreen-overlay {
    max-width: 1200px;
}

/* Buffer at the top so the title/search clear the close button. */
[b-qrrcprv7fy] .fullscreen-modal .fullscreen-content {
    padding-top: 20px;
}

.invoice-items-table th[b-qrrcprv7fy] {
    text-align: left;
    padding: 10px 12px;
    color: #475569;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid #e2e8f0;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 1;
}

.invoice-items-table td[b-qrrcprv7fy] {
    padding: 12px;
    border-bottom: 1px solid #eef2f7;
    color: #0f172a;
}

/* Clickable item rows: colored left accent + gradient sweep on hover. */
.clickable-row[b-qrrcprv7fy] {
    cursor: pointer;
    transition: background .15s ease;
}

.clickable-row td:first-child[b-qrrcprv7fy] {
    border-left: 3px solid transparent;
    transition: border-color .15s ease;
}

.invoice-items-table tbody tr.clickable-row:hover[b-qrrcprv7fy] {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.10) 0%, rgba(37, 99, 235, 0.02) 100%);
}

.clickable-row:hover td:first-child[b-qrrcprv7fy] {
    border-left-color: #2563eb;
}

.clickable-row:active[b-qrrcprv7fy] {
    background: rgba(37, 99, 235, 0.14);
}

.item-name[b-qrrcprv7fy] {
    color: #2563eb;
    font-weight: 600;
}

.clickable-row:hover .item-name[b-qrrcprv7fy] {
    text-decoration: underline;
}

.clickable-row:hover .item-name[b-qrrcprv7fy]::after {
    content: " ›";
    color: #2563eb;
    font-weight: 700;
}

.btn-sm[b-qrrcprv7fy] {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-secondary.btn-sm[b-qrrcprv7fy] {
    border-color: #d1d5db;
    background: #fff;
    color: #0f172a;
}

.btn-secondary.btn-sm:hover:not(:disabled)[b-qrrcprv7fy] {
    background: #f3f4f6;
    border-color: #a3aec7;
}

.muted[b-qrrcprv7fy] {
    color: #9ca3af;
    font-size: 14px;
    font-style: italic;
    margin: 8px 2px;
}

.error-message[b-qrrcprv7fy] {
    margin-bottom: 14px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fed7d7;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
}

@media (max-width: 1050px) {
    .review-page[b-qrrcprv7fy] {
        padding: 14px;
    }

    .layout-grid[b-qrrcprv7fy] {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-grid[b-qrrcprv7fy] {
        grid-template-columns: minmax(0, 1fr);
    }

    .invoice-items-table[b-qrrcprv7fy] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Sub-section head for the mileage lists inside the item cards. */
.sub-head[b-qrrcprv7fy] {
    margin: 14px 0 6px;
    font-size: 13px;
    color: #475569;
}
/* /Pages/Invoices.razor.rz.scp.css */
.invoicing-page[b-a219ivnerh] {
    padding: 28px 24px;
    max-width: var(--mtl-page-max);
    margin: 0 auto;
}

.admin-header[b-a219ivnerh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    gap: 16px;
}

.admin-header h1[b-a219ivnerh] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.admin-header p[b-a219ivnerh] {
    margin: 6px 0 0 0;
    color: #667085;
    font-size: 14px;
}

.queue-columns[b-a219ivnerh] {
    /* Takes the slack the fixed chrome above it leaves. */
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.queue-column[b-a219ivnerh] {
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    /* Height comes from the page's flex chain now, not a hand-counted
       reserve: the card fills the row and .column-body scrolls inside it. */
    min-height: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* Per-bucket search sits between the header and the scrolling body. */
.search-bar[b-a219ivnerh] {
    margin: 12px 16px 2px;
}

.column-header[b-a219ivnerh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #dfe5ef;
    border-radius: 14px 14px 0 0;
}

.column-header.pending[b-a219ivnerh] {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10) 0%, rgba(37, 99, 235, 0.03) 100%);
}

.column-header.approved[b-a219ivnerh] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.03) 100%);
}

.column-title h2[b-a219ivnerh] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.column-title p[b-a219ivnerh] {
    margin: 4px 0 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 500;
}

.badge[b-a219ivnerh] {
    background: #eef2f7;
    color: #374151;
    border: 1px solid #d1d5db;
    min-width: 34px;
    text-align: center;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.column-body[b-a219ivnerh] {
    padding: 14px 16px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.claim-row[b-a219ivnerh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.claim-main[b-a219ivnerh] {
    flex: 1;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0;
    cursor: pointer;
    min-width: 0;
}

.queue-item[b-a219ivnerh] {
    width: 100%;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    text-align: left;
    padding: 13px 14px;
    cursor: pointer;
    transition: all .18s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.queue-item:hover[b-a219ivnerh] {
    border-color: #a3aec7;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
    transform: translateY(-2px);
}

.queue-item:focus-visible[b-a219ivnerh] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.item-title[b-a219ivnerh] {
    font-weight: 600;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 14px;
    /* Long free-text descriptions: wrap (even unbroken strings), then clamp to 2 lines with an ellipsis. */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.item-meta[b-a219ivnerh] {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.btn-primary[b-a219ivnerh] {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary:hover:not(:disabled)[b-a219ivnerh] {
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-a219ivnerh] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-a219ivnerh] {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    color: #334155;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.btn-secondary:hover:not(:disabled)[b-a219ivnerh] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn-secondary:disabled[b-a219ivnerh] {
    opacity: 0.6;
    cursor: not-allowed;
}

.empty-message[b-a219ivnerh] {
    margin: 24px 4px;
    color: #9ca3af;
    text-align: center;
    font-size: 14px;
    font-style: italic;
}

.error-message[b-a219ivnerh] {
    margin-bottom: 12px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 10px 12px;
    border-radius: 8px;
}

@media (max-width: 900px) {
    .invoicing-page[b-a219ivnerh] {
        padding: 16px;
    }

    .queue-columns[b-a219ivnerh] {
        grid-template-columns: 1fr;
    }

    .queue-column[b-a219ivnerh] {
        min-height: 320px;
        max-height: none;
    }

    .claim-row[b-a219ivnerh] {
        flex-wrap: wrap;
    }

    .btn-primary[b-a219ivnerh],
    .btn-secondary[b-a219ivnerh] {
        flex: 1;
    }
}
/* /Pages/ItemData.razor.rz.scp.css */
.detail-container[b-u9bpuhuxcf] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 110px);
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    padding: 28px 24px;
    background:
        radial-gradient(circle at 6% 8%, rgba(59, 130, 246, 0.09), transparent 34%),
        radial-gradient(circle at 95% 90%, rgba(16, 185, 129, 0.08), transparent 40%),
        #f8fbff;
    border-radius: 20px;
}

.top-bar[b-u9bpuhuxcf] {
    border: 1px solid #d9e3f2;
    border-radius: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.top-bar-content[b-u9bpuhuxcf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.top-bar-left h1[b-u9bpuhuxcf] {
    margin: 0;
    font-size: 30px;
    margin-bottom: 10px;
    color: #0f172a;
    /* The full description is the heading here — show all of it, wrapping even unbroken strings. */
    overflow-wrap: anywhere;
}

.top-bar-left .description[b-u9bpuhuxcf] {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.top-bar-right[b-u9bpuhuxcf] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.status-badge[b-u9bpuhuxcf] {
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid #fbd38d;
    background: #fff7ed;
    color: #92400e;
}

.status-approved[b-u9bpuhuxcf] {
    border-color: #86efac;
    background: #ecfdf5;
    color: #166534;
}

.btn-cancel[b-u9bpuhuxcf] {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cancel:hover[b-u9bpuhuxcf] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn-cancel:active[b-u9bpuhuxcf] {
    background: #e2e8f0;
}

.content-wrapper[b-u9bpuhuxcf] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 22px 2px 0;
    width: 100%;
}

.hero-grid[b-u9bpuhuxcf] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 0.95fr);
    gap: 24px;
    align-items: start;
}

.details-grid[b-u9bpuhuxcf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.details-card[b-u9bpuhuxcf] {
    background: white;
    border-radius: 14px;
    padding: 24px;
    border: 1px solid #d9e3f2;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.details-card h2[b-u9bpuhuxcf] {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.financial-panel[b-u9bpuhuxcf] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.financial-panel h3[b-u9bpuhuxcf] {
    margin: 0 0 14px 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
}

.financial-grid[b-u9bpuhuxcf] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.financial-tile[b-u9bpuhuxcf] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.financial-tile span[b-u9bpuhuxcf] {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.financial-tile strong[b-u9bpuhuxcf] {
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
}

.total-tile[b-u9bpuhuxcf] {
    border-color: #93c5fd;
    background: #eff6ff;
}

.total-tile strong[b-u9bpuhuxcf] {
    color: #1d4ed8;
}

.financial-note[b-u9bpuhuxcf] {
    margin: 12px 0 0 0;
    color: #64748b;
    font-size: 13px;
}

.detail-field[b-u9bpuhuxcf] {
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
    padding-bottom: 12px;
}

.detail-field:last-child[b-u9bpuhuxcf] {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.detail-field label[b-u9bpuhuxcf] {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: #475569;
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.detail-field p[b-u9bpuhuxcf] {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 500;
    /* Description/comment shown in full on the detail view; wrap long unbroken strings. */
    overflow-wrap: anywhere;
}

.detail-field input[b-u9bpuhuxcf],
.detail-field textarea[b-u9bpuhuxcf] {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.detail-field input:focus[b-u9bpuhuxcf],
.detail-field textarea:focus[b-u9bpuhuxcf] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);
}

.detail-field textarea[b-u9bpuhuxcf] {
    resize: vertical;
    min-height: 110px;
}

.btn-submit[b-u9bpuhuxcf] {
    background: #2563eb;
    color: #ffffff;
    border: 1px solid transparent;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    transition: all 0.2s ease;
}

.btn-submit:hover:not(:disabled)[b-u9bpuhuxcf] {
    background: #1d4ed8;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.26);
    transform: translateY(-1px);
}

.btn-submit:disabled[b-u9bpuhuxcf] {
    opacity: 0.65;
    cursor: not-allowed;
}

.fix-notice[b-u9bpuhuxcf] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 14px;
    border: 1px solid #fbd38d;
    background: #fff7ed;
    color: #92400e;
    border-radius: 12px;
    padding: 14px 16px;
}

.fix-notice strong[b-u9bpuhuxcf] {
    font-size: 14px;
}

.fix-notice span[b-u9bpuhuxcf] {
    font-size: 13px;
}

.fix-reason[b-u9bpuhuxcf] {
    font-size: 14px !important;
    color: #7c2d12;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #fcd9b6;
    border-radius: 8px;
    padding: 8px 10px;
}

.fix-reason-from[b-u9bpuhuxcf] {
    font-weight: 700;
    margin-right: 4px;
}

.fix-hint[b-u9bpuhuxcf] {
    opacity: 0.85;
}

.error-message[b-u9bpuhuxcf] {
    margin-top: 14px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 650;
}

.timeline[b-u9bpuhuxcf] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    padding-left: 30px;
}

.timeline[b-u9bpuhuxcf]::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #cbd5e1;
}

.timeline-item[b-u9bpuhuxcf] {
    display: flex;
    gap: 16px;
    position: relative;
}

.timeline-dot[b-u9bpuhuxcf] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2563eb;
    position: absolute;
    left: -16px;
    top: 4px;
    border: 3px solid #f8fbff;
}

.timeline-content p[b-u9bpuhuxcf] {
    margin: 0;
}

.timeline-label[b-u9bpuhuxcf] {
    font-weight: 600;
    color: #0f172a;
    font-size: 14px;
}

.timeline-date[b-u9bpuhuxcf] {
    color: #64748b;
    font-size: 13px;
    margin-top: 4px;
}

.attachments-card[b-u9bpuhuxcf] {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 14px;
    padding: 24px;
    border: 1px solid #d9e3f2;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    max-height: var(--item-details-card-height, none);
    min-height: 0;
    overflow: hidden;
}

.attachments-card h2[b-u9bpuhuxcf] {
    flex: 0 0 auto;
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 700;
}

.attachments-card[b-u9bpuhuxcf]  .receipt-uploader {
    min-height: 0;
    overflow-y: auto;
}

.attachment-error[b-u9bpuhuxcf] {
    margin: 8px 0 0;
    color: #b42318;
    font-size: 13px;
}

@media (max-width: 1024px) {
    .detail-container[b-u9bpuhuxcf] {
        padding: 20px 16px;
        border-radius: 0;
        min-height: auto;
    }

    .hero-grid[b-u9bpuhuxcf],
    .details-grid[b-u9bpuhuxcf] {
        grid-template-columns: 1fr;
    }

    .attachments-card[b-u9bpuhuxcf] {
        max-height: none;
        overflow: visible;
    }

    .attachments-card[b-u9bpuhuxcf]  .receipt-uploader {
        overflow-y: visible;
    }
}

@media (max-width: 768px) {
    .top-bar-content[b-u9bpuhuxcf] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .top-bar-right[b-u9bpuhuxcf] {
        width: 100%;
        justify-content: space-between;
    }

    .details-card[b-u9bpuhuxcf] {
        padding: 16px;
    }

    .financial-grid[b-u9bpuhuxcf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .top-bar-left h1[b-u9bpuhuxcf] {
        font-size: 24px;
    }
}

@media (max-width: 520px) {
    .financial-grid[b-u9bpuhuxcf] {
        grid-template-columns: 1fr;
    }
}

/* The phone-width entry bridge to /m — hidden everywhere else. */
.mobile-suggest[b-u9bpuhuxcf] {
    display: none;
}

@media (max-width: 720px) {
    .mobile-suggest[b-u9bpuhuxcf] {
        display: block;
        margin-bottom: 12px;
        padding: 10px 12px;
        border-radius: var(--mtl-radius);
        background: var(--mtl-accent-soft);
        color: var(--mtl-accent);
        font-size: 13px;
    }

    .mobile-suggest a[b-u9bpuhuxcf] {
        color: var(--mtl-accent);
        font-weight: 600;
    }
}
/* /Pages/Items.razor.rz.scp.css */
:host[b-a888vssm9z] {
    display: contents;
}

/* .page-fit (app.css) takes the height the shell hands down; everything below is a flex
   column so the columns row can absorb the slack and scroll inside itself. */
.container[b-a888vssm9z] {
    padding: 24px 24px 20px;
    width: 100%;
    /* Same cap as every other screen so the content width doesn't jump between pages. */
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    box-sizing: border-box;
}

.header[b-a888vssm9z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 16px;
    flex-shrink: 0;
}

.header-content h1[b-a888vssm9z] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.header-content p[b-a888vssm9z] {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 14px;
}

.header-buttons[b-a888vssm9z] {
    display: flex;
    gap: 12px;
}

.impersonation-banner[b-a888vssm9z] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
}

.impersonation-banner strong[b-a888vssm9z] {
    font-size: 13px;
}

.impersonation-banner span[b-a888vssm9z] {
    font-size: 12px;
}

.btn[b-a888vssm9z] {
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .2s ease;
}

.btn-secondary[b-a888vssm9z] {
    background: white;
    color: #0f172a;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover[b-a888vssm9z] {
    background: #f3f4f6;
    border-color: #a3aec7;
}

.btn-primary[b-a888vssm9z] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    border: none;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.btn-primary:hover[b-a888vssm9z] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* The three live columns. The settled two live in BoardArchive; only one of the two
   sections is expanded at a time, and whichever it is takes the leftover height. */
.columns[b-a888vssm9z] {
    flex: 1;
    min-height: 0;
    /* Items size to their content, capped at the row height — see the column CSS. */
    align-items: start;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    /* Breathing room above the archive strip that now closes the page. */
    margin-bottom: 16px;
}

.view-all[b-a888vssm9z] {
    color: #2563eb;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color .2s ease;
}

.view-all:hover[b-a888vssm9z] {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Narrow enough to wrap: three columns no longer share one row, and squeezing two rows
   into the viewport would leave each too short to read. The columns region scrolls as one
   instead — the honest trade when the layout can't fit. 1300 ≈ --mtl-page-max plus the
   shell padding; keep it in step with the column CSS. */
@media (max-width: 1300px) {
    .columns[b-a888vssm9z] {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(320px, auto);
        overflow-y: auto;
    }
}

@media (max-width: 900px) {
    .container[b-a888vssm9z] {
        padding: 20px 16px;
    }

    .header[b-a888vssm9z] {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 18px;
    }

    .header-buttons[b-a888vssm9z] {
        width: 100%;
    }

    .btn[b-a888vssm9z] {
        flex: 1;
        justify-content: center;
    }

    .columns[b-a888vssm9z] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }
}

/* Expenses | Mileage board tabs (mileage folded into My Items, not a separate page). */
.queue-tabs[b-a888vssm9z] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.queue-tab-pill[b-a888vssm9z] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.queue-tab-pill:hover[b-a888vssm9z] {
    border-color: #94a3b8;
    background: #f8fafc;
}

.queue-tab-pill.active[b-a888vssm9z] {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: #ffffff;
}
/* /Pages/MileageData.razor.rz.scp.css */
.detail-container[b-1g9i1kevtj] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 110px);
    max-width: var(--mtl-page-max);
    margin: 0 auto;
    padding: 28px 24px;
    background:
        radial-gradient(circle at 6% 8%, rgba(59, 130, 246, 0.09), transparent 34%),
        radial-gradient(circle at 95% 90%, rgba(16, 185, 129, 0.08), transparent 40%),
        #f8fbff;
    border-radius: 20px;
}

.top-bar[b-1g9i1kevtj] {
    border: 1px solid #d9e3f2;
    border-radius: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.top-bar-content[b-1g9i1kevtj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.top-bar-left h1[b-1g9i1kevtj] {
    margin: 0;
    font-size: 30px;
    margin-bottom: 10px;
    color: #0f172a;
    /* From → To (up to 200 chars each) is the heading — wrap rather than overflow. */
    overflow-wrap: anywhere;
}

.top-bar-left .description[b-1g9i1kevtj] {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.top-bar-right[b-1g9i1kevtj] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.status-badge[b-1g9i1kevtj] {
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid #fbd38d;
    background: #fff7ed;
    color: #92400e;
}

.status-approved[b-1g9i1kevtj] {
    border-color: #86efac;
    background: #ecfdf5;
    color: #166534;
}

.btn-cancel[b-1g9i1kevtj] {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cancel:hover[b-1g9i1kevtj] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn-cancel:active[b-1g9i1kevtj] {
    background: #e2e8f0;
}

.content-wrapper[b-1g9i1kevtj] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 22px 2px 0;
    width: 100%;
}

.hero-grid[b-1g9i1kevtj] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 0.95fr);
    gap: 24px;
    align-items: start;
}

/* Read-only journey: a compact two-column key/value grid — no sparse full-width dividers. */
.info-grid[b-1g9i1kevtj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
    margin: 0;
}

.info-item[b-1g9i1kevtj] {
    min-width: 0;
}

.info-wide[b-1g9i1kevtj] {
    grid-column: 1 / -1;
}

.info-item dt[b-1g9i1kevtj] {
    margin: 0 0 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.info-item dd[b-1g9i1kevtj] {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 500;
    word-break: break-word;
}

/* Value card: rate + live value rows (matches the Add Mileage value card). */
.value-row[b-1g9i1kevtj] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
    color: #334155;
}

.value-row span[b-1g9i1kevtj] {
    color: #64748b;
}

.value-total[b-1g9i1kevtj] {
    border-bottom: none;
    padding-top: 12px;
}

.value-total span[b-1g9i1kevtj] {
    color: #0f172a;
    font-weight: 700;
}

.value-total strong[b-1g9i1kevtj] {
    color: #1e3a8a;
    font-size: 22px;
}

.value-note[b-1g9i1kevtj] {
    margin: 10px 0 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .info-grid[b-1g9i1kevtj] {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.details-grid[b-1g9i1kevtj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.details-card[b-1g9i1kevtj] {
    background: white;
    border-radius: 14px;
    padding: 24px;
    border: 1px solid #d9e3f2;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.details-card h2[b-1g9i1kevtj] {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.financial-panel[b-1g9i1kevtj] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.financial-panel h3[b-1g9i1kevtj] {
    margin: 0 0 14px 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
}

.financial-grid[b-1g9i1kevtj] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.financial-tile[b-1g9i1kevtj] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.financial-tile span[b-1g9i1kevtj] {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.financial-tile strong[b-1g9i1kevtj] {
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
}

.total-tile[b-1g9i1kevtj] {
    border-color: #93c5fd;
    background: #eff6ff;
}

.total-tile strong[b-1g9i1kevtj] {
    color: #1d4ed8;
}

.financial-note[b-1g9i1kevtj] {
    margin: 12px 0 0 0;
    color: #64748b;
    font-size: 13px;
}

.detail-field[b-1g9i1kevtj] {
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
    padding-bottom: 12px;
}

.detail-field:last-child[b-1g9i1kevtj] {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.detail-field label[b-1g9i1kevtj] {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: #475569;
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.detail-field p[b-1g9i1kevtj] {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 500;
    /* Reviewer comments shown in full on the detail view; wrap long unbroken strings. */
    overflow-wrap: anywhere;
}

.detail-field input[b-1g9i1kevtj],
.detail-field textarea[b-1g9i1kevtj] {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.detail-field input:focus[b-1g9i1kevtj],
.detail-field textarea:focus[b-1g9i1kevtj] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);
}

.detail-field textarea[b-1g9i1kevtj] {
    resize: vertical;
    min-height: 110px;
}

.btn-submit[b-1g9i1kevtj] {
    background: #2563eb;
    color: #ffffff;
    border: 1px solid transparent;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    transition: all 0.2s ease;
}

.btn-submit:hover:not(:disabled)[b-1g9i1kevtj] {
    background: #1d4ed8;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.26);
    transform: translateY(-1px);
}

.btn-submit:disabled[b-1g9i1kevtj] {
    opacity: 0.65;
    cursor: not-allowed;
}

.fix-notice[b-1g9i1kevtj] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 14px;
    border: 1px solid #fbd38d;
    background: #fff7ed;
    color: #92400e;
    border-radius: 12px;
    padding: 14px 16px;
}

.fix-notice strong[b-1g9i1kevtj] {
    font-size: 14px;
}

.fix-notice span[b-1g9i1kevtj] {
    font-size: 13px;
}

.fix-reason[b-1g9i1kevtj] {
    font-size: 14px !important;
    color: #7c2d12;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #fcd9b6;
    border-radius: 8px;
    padding: 8px 10px;
}

.fix-reason-from[b-1g9i1kevtj] {
    font-weight: 700;
    margin-right: 4px;
}

.fix-hint[b-1g9i1kevtj] {
    opacity: 0.85;
}

.error-message[b-1g9i1kevtj] {
    margin-top: 14px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 650;
}

.timeline[b-1g9i1kevtj] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    padding-left: 30px;
}

.timeline[b-1g9i1kevtj]::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #cbd5e1;
}

.timeline-item[b-1g9i1kevtj] {
    display: flex;
    gap: 16px;
    position: relative;
}

.timeline-dot[b-1g9i1kevtj] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2563eb;
    position: absolute;
    left: -16px;
    top: 4px;
    border: 3px solid #f8fbff;
}

.timeline-content p[b-1g9i1kevtj] {
    margin: 0;
}

.timeline-label[b-1g9i1kevtj] {
    font-weight: 600;
    color: #0f172a;
    font-size: 14px;
}

.timeline-date[b-1g9i1kevtj] {
    color: #64748b;
    font-size: 13px;
    margin-top: 4px;
}

.attachments-card[b-1g9i1kevtj] {
    background: white;
    border-radius: 14px;
    padding: 24px;
    border: 1px solid #d9e3f2;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    height: 100%;
}

.attachments-card h2[b-1g9i1kevtj] {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 700;
}

.attachment-error[b-1g9i1kevtj] {
    margin: 8px 0 0;
    color: #b42318;
    font-size: 13px;
}

@media (max-width: 1024px) {
    .detail-container[b-1g9i1kevtj] {
        padding: 20px 16px;
        border-radius: 0;
        min-height: auto;
    }

    .hero-grid[b-1g9i1kevtj],
    .details-grid[b-1g9i1kevtj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .top-bar-content[b-1g9i1kevtj] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .top-bar-right[b-1g9i1kevtj] {
        width: 100%;
        justify-content: space-between;
    }

    .details-card[b-1g9i1kevtj] {
        padding: 16px;
    }

    .financial-grid[b-1g9i1kevtj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .top-bar-left h1[b-1g9i1kevtj] {
        font-size: 24px;
    }
}

@media (max-width: 520px) {
    .financial-grid[b-1g9i1kevtj] {
        grid-template-columns: 1fr;
    }
}
/* ── Fix-page (edit mode) controls: return-journey pill switch + miles validation ── */
.toggle-field[b-1g9i1kevtj] {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.toggle-field label[b-1g9i1kevtj] {
    margin-bottom: 0 !important;
}

.mileage-toggle[b-1g9i1kevtj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 3px 12px 3px 4px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, background-color .2s ease;
    min-width: 84px;
}

.mileage-toggle:hover[b-1g9i1kevtj] {
    border-color: #94a3b8;
}

.mileage-toggle.on[b-1g9i1kevtj] {
    border-color: #93c5fd;
    background: #eff6ff;
}

.mileage-toggle:focus-visible[b-1g9i1kevtj] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.mileage-toggle-track[b-1g9i1kevtj] {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .2s ease;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    flex: 0 0 auto;
}

.mileage-toggle.on .mileage-toggle-track[b-1g9i1kevtj] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.mileage-toggle-knob[b-1g9i1kevtj] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform .2s ease;
}

.mileage-toggle.on .mileage-toggle-knob[b-1g9i1kevtj] {
    transform: translateX(14px);
}

.mileage-toggle-text[b-1g9i1kevtj] {
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    flex: 0 0 auto;
}

.toggle-field .field-label[b-1g9i1kevtj] {
    font-weight: 700;
    color: #475569;
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.toggle-field .toggle-hint[b-1g9i1kevtj] {
    flex-basis: 100%;
    color: #64748b;
    font-size: 12px;
}

.detail-field input.input-invalid[b-1g9i1kevtj] {
    border-color: #dc2626;
    background: #fff7f7;
}

.field-error[b-1g9i1kevtj] {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
}
/* /Pages/Rollback.razor.rz.scp.css */
.rollback-page[b-l4pe9uvgfy] {
    padding: 28px 24px;
    max-width: var(--mtl-page-max);
    margin: 0 auto;
}

.admin-header[b-l4pe9uvgfy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    gap: 16px;
}

.admin-header h1[b-l4pe9uvgfy] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.admin-header p[b-l4pe9uvgfy] {
    margin: 6px 0 0 0;
    color: #667085;
    font-size: 14px;
}

.queue-count[b-l4pe9uvgfy] {
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, #0b57d0 0%, #0a4ba8 100%);
    border-radius: 10px;
    min-width: 48px;
    text-align: center;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(11, 87, 208, 0.2);
    flex-shrink: 0;
}

.queue-mode-toggle[b-l4pe9uvgfy] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #edf2fb;
    border: 1px solid #d7e0ef;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 12px;
}

.mode-pill[b-l4pe9uvgfy] {
    border: none;
    background: transparent;
    color: #334155;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .18s ease;
}

.mode-pill.active[b-l4pe9uvgfy] {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.pill-count[b-l4pe9uvgfy] {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    font-size: 11px;
}

.mode-pill.active .pill-count[b-l4pe9uvgfy] {
    background: rgba(255, 255, 255, 0.25);
}

.queue-columns[b-l4pe9uvgfy] {
    /* Takes the slack the fixed chrome above it leaves. */
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(120px, 1fr);
    justify-content: center;
    gap: 12px;
}

.queue-column[b-l4pe9uvgfy] {
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    /* Height comes from the page's flex chain now, not a hand-counted
       reserve: the card fills the row and .column-body scrolls inside it. */
    min-height: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.column-header[b-l4pe9uvgfy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #dfe5ef;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, rgba(2, 132, 199, 0.02) 100%);
}

.column-title h2[b-l4pe9uvgfy] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.column-title p[b-l4pe9uvgfy] {
    margin: 4px 0 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 500;
}

.badge[b-l4pe9uvgfy] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 1px solid #d1d5db;
    min-width: 36px;
    text-align: center;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.column-body[b-l4pe9uvgfy] {
    padding: 14px 16px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.claim-row[b-l4pe9uvgfy] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
}

.claim-main[b-l4pe9uvgfy] {
    border: 0;
    background: transparent;
    text-align: left;
    width: 100%;
    cursor: pointer;
    padding: 0;
    min-width: 0; /* let the grid's 1fr track shrink below the text's natural width */
}

.queue-item[b-l4pe9uvgfy] {
    width: 100%;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    text-align: left;
    padding: 13px 14px;
    cursor: pointer;
    transition: all .18s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.queue-item:hover[b-l4pe9uvgfy] {
    border-color: #a3aec7;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
    transform: translateY(-2px);
}

.item-row[b-l4pe9uvgfy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

/* Let the text column shrink inside the flex row so long values wrap instead of pushing the date off. */
.item-row > div:first-child[b-l4pe9uvgfy] {
    min-width: 0;
}

.item-title[b-l4pe9uvgfy] {
    font-weight: 600;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 14px;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.item-meta[b-l4pe9uvgfy] {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.item-date[b-l4pe9uvgfy] {
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    white-space: nowrap;
}

.stage-chip[b-l4pe9uvgfy] {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

/* Same pill as the Accounts page's journey badges — one look for row flags everywhere. */
.journey-badge[b-l4pe9uvgfy] {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: 1px;
}

.journey-badge.credit-card[b-l4pe9uvgfy] { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }
.journey-badge.kind[b-l4pe9uvgfy] { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }

.btn-primary[b-l4pe9uvgfy] {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary:disabled[b-l4pe9uvgfy] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-l4pe9uvgfy] {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    color: #334155;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.btn-secondary:disabled[b-l4pe9uvgfy] {
    opacity: 0.6;
    cursor: not-allowed;
}

.empty-message[b-l4pe9uvgfy] {
    margin: 24px 4px;
    color: #9ca3af;
    text-align: center;
    font-size: 14px;
    font-style: italic;
}

.error-message[b-l4pe9uvgfy] {
    margin-bottom: 12px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    padding: 10px 12px;
    border-radius: 8px;
}

.success-message[b-l4pe9uvgfy] {
    margin-bottom: 12px;
    color: #0d652d;
    background: #e6f4ea;
    border: 1px solid #b7dfc2;
    padding: 10px 12px;
    border-radius: 8px;
}

/* The restore/reopen and billing-fix dialogs live in RollbackDialogs (shared with the
   detail pages' action panel) and carry their own styles. */

@media (max-width: 900px) {
    .rollback-page[b-l4pe9uvgfy] {
        padding: 16px;
    }

    .queue-column[b-l4pe9uvgfy] {
        min-height: 380px;
        max-height: none;
    }

    .claim-row[b-l4pe9uvgfy] {
        grid-template-columns: 1fr;
    }
}