/* ---------------------------------------------------------------------------
 * Supplement to the mockup design system — Ops Admin Utility.
 *
 * Everything else in theme.css and app.css is the mockups' own file, byte for
 * byte, so a change there lands here without translation. This file holds only
 * what a working app needs and a static mockup never showed:
 *
 *   - a success counterpart to .auth-error-banner, which the mockups only ever
 *     needed in its failure form
 *   - the empty-state card, which the mockups wrote as inline styles on .card
 *     in four separate screens; naming it stops the fifth from drifting
 *   - horizontal scroll for wide tables, which a fixed-width mockup never hits
 *   - the sortable-header anchor and the monospace identifier cell, both of
 *     which are static text in a mockup and a real control here
 *
 * Anything added here should be a candidate for the mockups themselves.
 * ------------------------------------------------------------------------- */

.auth-ok-banner {
    background: var(--ok2);
    border: 1px solid rgba(5, 150, 105, .25);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--txt);
}

/* The neutral third case the two banners above do not cover: a statement of
 * fact that is neither a success nor a failure — "this recording passed its
 * retention window", which is the system working as specified. */
.auth-mute-banner {
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--txt2);
}

/* The mockups' own empty state: card, 32px, centred, muted, 12px. */
.empty-state {
    padding: 32px;
    text-align: center;
    color: var(--txt3);
    font-size: 12px;
}

/* A mockup is a fixed width; a real catalog is not. */
.table-scroll { overflow-x: auto; }

/* The mockups' sortable column headers are static text — nothing to click, so
 * app.css never had to say what a link inside one looks like. Here they are
 * real links carrying the sort into the query string, and without this the
 * browser default paints every header blue and underlined. The header keeps
 * .data-table th's own colour and weight; only the anchor stops asserting
 * itself. The whole cell is the target, which is what a sortable header is. */
.sortable-th a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.sortable-th a:hover { color: var(--txt); }

/* Inside a table cell a hint is a second line under the value, never a
 * continuation of it. Every mockup writes these as <div class="field-hint"
 * style="margin-top:2px"> for exactly that reason; reaching the same cells
 * with a <span> runs the hint straight on from the text before it. Scoped to
 * .data-table so hints under form fields keep their own spacing. */
.data-table .field-hint {
    display: block;
    margin-top: 2px;
}

/* Identifiers an operator reads character by character — schema names, phone
 * numbers, timestamps, agent ids. theme.css already carries the --mono token
 * for exactly this; the mockups only ever needed it inside a <textarea>, so
 * there was never a class to reach it from a table cell. */
.mono {
    font-family: var(--mono);
    font-size: 12px;
}

/* Numeric columns line up on the right, in both the header and the body, so a
 * minutes-used figure can be compared down the column at a glance. */
.data-table th.num, .data-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A form that reads as one row rather than a stack: side-by-side fields, and
 * the submit button aligned to their inputs rather than to their labels. */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-row-inline {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* A form wrapping a single button inside a table cell, so the row's actions sit
 * on the row rather than forcing their own line. */
form.inline { display: inline; }