/* Usage Dry Run — go-to-market shortlist §3.3.
   Supplements the standard list/card/table classes; only the bits unique to this
   section (window controls, summary chips, delta emphasis) live here. */

/* ── Blurb + inline message ───────────────────────────────── */
.udr-blurb {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
    max-width: 780px;
}

.udr-message {
    display: none;
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
}

.udr-message--error {
    color: var(--accent-danger);
}

.udr-note {
    margin: var(--spacing-xs) 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-body-xs);
}

/* ── Window controls ──────────────────────────────────────── */
.udr-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.udr-label {
    color: var(--text-secondary);
    font-size: var(--font-size-body-xs);
}

/* datetime-local is NOT covered by main.css's input[type=…] list, so it needs styling here to
   match the other inputs rather than falling back to the browser default. */
.udr-input {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-lg, 8px);
    color: var(--text-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-body-sm);
    font-family: inherit;
    color-scheme: dark;
}

.udr-input:focus {
    outline: none;
    border-color: var(--accent-main);
}

.udr-utc {
    color: var(--text-muted);
    font-size: var(--font-size-body-xs);
    font-variant-numeric: tabular-nums;
}

.udr-utc--bad {
    color: var(--accent-caution);
}

.udr-search {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-lg, 8px);
    color: var(--text-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-body-sm);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.udr-search:focus {
    outline: none;
    border-color: var(--accent-main);
}

/* ── Summary chips ────────────────────────────────────────── */
.udr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.udr-chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-lg, 8px);
    font-size: var(--font-size-body-xs);
}

.udr-chip__label {
    color: var(--text-secondary);
}

.udr-chip__value {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Table ────────────────────────────────────────────────── */
.udr-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.udr-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--spacing-xs);
    vertical-align: middle;
}

/* A positive delta is the one state that wants attention: usage a run would send and has not. */
.udr-delta--up {
    color: var(--accent-caution);
    font-weight: 600;
}

/* Negative deltas are informational, not errors — a carry flush or aged-out ledger rows. */
.udr-delta--down {
    color: var(--accent-main);
}

/* Only the "a run would send this" state gets a rail; the rest are informational. */
.udr-row[data-status="unreported"] td:first-child {
    box-shadow: inset 2px 0 0 var(--accent-caution);
}

.udr-absent {
    color: var(--text-muted);
}

/* The carry-forward columns hide wholesale when the backend does not report them yet. */
.udr--no-accum .udr-accum {
    display: none;
}

/* ── Under-construction shell (backend not deployed here) ── */
.udr-under-construction {
    margin-top: var(--spacing-md);
}