/* Reports (Administrator reports and the Sales Report) on Trip Desk UI: what the shared report
   parts (ReportCard, KpiTile) and the content inside them use. The page frame - header, filter
   chips - is td-ui.css. Built on the --td-* tokens, so light and dark follow the theme.
   Bump ?v= in Head-css.razor whenever this file changes. */

/* ── Section panel (ReportCard) ───────────────────────────────────────── */
.rpt-card {
    background: var(--td-surface);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius-lg);
    overflow: hidden;
    margin-bottom: 1rem;
}

.rpt-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.1rem .25rem;
}

.rpt-card-meta {
    font-size: .8125rem;
    white-space: nowrap;
}

.rpt-card-body {
    padding: .75rem 1.1rem 1rem;
    /* The card clips (rounded corners), so a table wider than a phone scrolls here instead of being cut off. */
    overflow-x: auto;
}

.rpt-card-body.rpt-flush {
    padding: .5rem 0 0;
}

.rpt-section {
    padding: .85rem 1.1rem;
}

.rpt-section + .rpt-section {
    border-top: 1px solid var(--td-border);
}

.rpt-section-title {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--td-muted);
    margin-bottom: .5rem;
}

/* ── Figures (KpiTile) ────────────────────────────────────────────────── */
.rpt-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    height: 100%;
    min-width: 0;
    padding: .75rem 1rem;
    border-radius: .6rem;
    background: var(--td-surface-2);
    color: inherit;
    text-decoration: none;
}

a.rpt-stat:hover {
    box-shadow: inset 0 0 0 1px var(--td-border);
    color: inherit;
}

a.rpt-stat:focus-visible {
    outline: none;
    box-shadow: var(--td-shadow-ring);
}

.rpt-stat-label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--td-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt-stat-value {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--td-emphasis);
}

.rpt-stat-meta {
    font-size: .75rem;
    line-height: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpt-change {
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.rpt-table {
    width: 100%;
    margin-bottom: 0;
    font-size: .8125rem;
    color: var(--td-text);
    --osen-table-bg: transparent;
    --osen-table-hover-bg: var(--td-surface-2);
}

.rpt-table > :not(caption) > * > * {
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--td-border);
    background: transparent;
    vertical-align: middle;
}

.rpt-table thead th {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--td-muted);
    white-space: nowrap;
}

.rpt-table tbody td:first-child a {
    font-weight: 500;
}

.rpt-table .rpt-num,
.rpt-table td.text-end,
.rpt-table th.text-end {
    font-variant-numeric: tabular-nums;
}

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

/* ── Key and value list ───────────────────────────────────────────────── */
.rpt-kv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .4rem .75rem;
    font-size: .8125rem;
    margin: 0;
}

.rpt-kv dt {
    font-weight: 400;
    color: var(--td-muted);
    min-width: 0;
}

.rpt-kv dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--td-emphasis);
    white-space: nowrap;
}

/* ── Share bars ───────────────────────────────────────────────────────── */
.rpt-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--td-surface-2);
    overflow: hidden;
}

.rpt-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--td-primary);
}

/* ── Small counts in a row ────────────────────────────────────────────── */
.rpt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.rpt-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .6rem;
    border-radius: var(--td-radius-sm);
    background: var(--td-surface-2);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--td-muted);
    text-decoration: none;
}

.rpt-chip strong {
    font-variant-numeric: tabular-nums;
    color: var(--td-emphasis);
}

/* Something waiting: amber ground with the readable amber ink. */
.rpt-chip.rpt-chip-warn {
    background: var(--td-warning-soft);
    color: var(--td-warning-ink);
}

.rpt-chip.rpt-chip-warn strong {
    color: var(--td-warning-ink);
}

a.rpt-chip:hover {
    box-shadow: inset 0 0 0 1px var(--td-border);
}

/* The theme's plain hues are fills, too light as text: inside reports they read as -ink. */
.rpt-card .text-success, .rpt-stat .text-success, .rpt-chip .text-success { color: var(--td-success-ink) !important; }
.rpt-card .text-warning, .rpt-stat .text-warning, .rpt-chip .text-warning { color: var(--td-warning-ink) !important; }
.rpt-card .text-danger, .rpt-stat .text-danger, .rpt-chip .text-danger { color: var(--td-danger-ink) !important; }
.rpt-card .text-info, .rpt-stat .text-info, .rpt-chip .text-info { color: var(--td-info-ink) !important; }
.rpt-card .text-muted, .rpt-stat .text-muted { color: var(--td-muted) !important; }

.rpt-note {
    font-size: .8125rem;
}

.rpt-empty {
    padding: 1.25rem 1rem;
    font-size: .8125rem;
    text-align: center;
    color: var(--td-muted);
}

/* Pick-one lists in a filter chip's popover; the picked one in the accent. */
.rpt-pick-menu { padding: 0; min-width: 14rem; }
.rpt-pick-menu button.is-on { font-weight: 600; color: var(--td-primary); }

/* Figures in a row: four across on a wide screen, two on a narrow one. */
.rpt-figures { display: grid; grid-template-columns: repeat(var(--rpt-cols, 4), minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
@media (max-width: 1199.98px) { .rpt-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .rpt-figures { grid-template-columns: minmax(0, 1fr); } }

/* Phone: the card's title and its note share the line only when they fit. */
@media (max-width: 575.98px) {
    .rpt-card-header { flex-wrap: wrap; row-gap: .15rem; }
    .rpt-card-meta { white-space: normal; }
    .rpt-card-body { padding: .75rem .85rem 1rem; }
    .rpt-card-body.rpt-flush { padding: .5rem 0 0; }
}