/**
 * Admin chrome, on the site's own system.
 * =======================================
 *
 * The admin section is thirty templates, about 11,900 lines, and 1,324 inline
 * `style="..."` attributes. It is Bootstrap underneath - form-control,
 * form-label, btn, row, col-md-*, badge, alert - with the visual decisions
 * made inline, one panel at a time. So the same box is written out with a
 * slightly different padding, radius and border on every page that has one,
 * and none of them agree with the public pages next door.
 *
 * This file is the vocabulary those pages will be converted onto. It is the
 * admin counterpart of page-refined.css, and deliberately reuses its
 * decisions rather than inventing a second set: the same hairline
 * (--page-rule), the same display face for titles, Silkscreen for small caps
 * labels only, the --re-brand ramp for accent.
 *
 *
 * IT CHANGES NOTHING ON ITS OWN, AND THAT IS DELIBERATE
 *
 * Every selector here is new. Nothing overrides .btn, .form-control, .card,
 * .admin-header or any other class the existing templates already use, so
 * linking this file cannot alter a page that has not been converted. A
 * template adopts it by replacing its inline styles with these classes, one
 * page at a time, and a page half-converted is not a page half-broken.
 *
 * That constraint is the whole point. Restyling Bootstrap primitives under
 * `.admin-page` would have been faster and would have changed thirty pages at
 * once, sight unseen - including the ones whose inline styles happen to be
 * load-bearing.
 *
 *
 * CONVERTING A PAGE
 *
 *   1. The masthead block at the top becomes .adm-head, with .adm-title,
 *      .adm-sub and .adm-actions inside it.
 *   2. Each boxed section becomes .adm-panel, with .adm-panel-head +
 *      .adm-panel-title where it has a heading.
 *   3. Tables become .adm-table (wrap in .adm-table-wrap so they scroll
 *      rather than push the page wide).
 *   4. Forms: .adm-field wraps a label and control; .adm-label and
 *      .adm-input carry the type.
 *   5. Buttons become .adm-btn, plus .adm-btn-primary / .adm-btn-danger.
 *   6. Delete the inline style attributes as you go. A page is converted when
 *      it has none left.
 *
 * SILKSCREEN. Anything here that asks for --re-font-ui is registered in
 * silkscreen-pixel-grid.css, which owns the 8px size, the smoothing and the
 * whole-pixel tracking. Do not put a font-size on a Silkscreen run in this
 * file - see that file's header.
 */

/* ------------------------------------------------------------------ *
 * Shell
 * ------------------------------------------------------------------ */

.adm {
    --adm-rule: var(--page-rule, rgba(130, 107, 125, 0.22));
    --adm-gap: clamp(18px, 2.4vw, 28px);
    --adm-pad: clamp(16px, 2vw, 24px);
}

/* ------------------------------------------------------------------ *
 * Page masthead
 * ------------------------------------------------------------------ */

/*
 * The same shape as .page-head on the public side: title and supporting line
 * on the left, actions on the right, one hairline underneath. Every admin
 * page currently builds this by hand with a flex div and six inline
 * properties, which is why no two of them have the same bottom margin.
 */
.adm-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: end;
    padding-bottom: 16px;
    margin-bottom: var(--adm-gap, 24px);
    border-bottom: 1px solid var(--adm-rule, rgba(130, 107, 125, 0.22));
}

.adm-title {
    font-family: var(--re-font-display);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.1;
    margin: 0;
    color: var(--re-text-color);
}

/* Small caps supporting line. No font-size - see the header. */
.adm-sub {
    display: block;
    margin: 8px 0 0;
    font-family: var(--re-font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--re-text-color);
    opacity: 0.6;
}

.adm-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .adm-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .adm-actions { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ *
 * Panel
 * ------------------------------------------------------------------ */

/*
 * The box every admin page repeats. Written inline today as
 * `background: rgba(130,107,125,0.1); padding: 24px; border-radius: ...;
 * border: 1px solid rgba(130,107,125,0.2)` - with the numbers drifting
 * between pages.
 *
 * The ground is the palette's, not a baked plum, so it follows the theme the
 * way the rest of the site does.
 */
.adm-panel {
    padding: var(--adm-pad, 20px);
    border: 1px solid var(--adm-rule, rgba(130, 107, 125, 0.22));
    border-radius: var(--re-radius-md, 8px);
    background: rgba(var(--re-brand-400-rgb, 130 107 125), 0.08);
}

.adm-panel + .adm-panel { margin-top: var(--adm-gap, 24px); }

.adm-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--adm-rule, rgba(130, 107, 125, 0.22));
}

.adm-panel-title {
    font-family: var(--re-font-display);
    font-size: 1.05rem;
    line-height: 1.2;
    margin: 0;
    color: var(--re-text-color);
}

/* The count or status that sits opposite a panel title. */
.adm-panel-note {
    font-family: var(--re-font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--re-text-color);
    opacity: 0.55;
}

/* ------------------------------------------------------------------ *
 * Table
 * ------------------------------------------------------------------ */

/*
 * The wrapper is not optional. Admin tables carry six to nine columns and
 * overflow a phone by a wide margin; without a scroll container of their own
 * they widen the page instead, which is how the admin section came to scroll
 * sideways as a whole.
 */
.adm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.adm-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--adm-rule, rgba(130, 107, 125, 0.22));
    font-family: var(--re-font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--re-text-color);
    opacity: 0.6;
    white-space: nowrap;
}

.adm-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--adm-rule, rgba(130, 107, 125, 0.22));
    color: var(--re-text-color);
    vertical-align: middle;
}

.adm-table tbody tr:hover { background: rgba(var(--re-brand-400-rgb, 130 107 125), 0.10); }
.adm-table tbody tr:last-child td { border-bottom: 0; }

/*
 * Cell classes for the tables that are not (yet) .adm-table.
 *
 * Several dashboard tables set their cell colour and padding inline on every
 * single `<th>` and `<td>`. These carry the same treatment as .adm-table's
 * own cells so those tables can be converted a cell at a time, without having
 * to restructure the whole table in one go.
 */
.adm-th {
    padding: 8px 5px;
    text-align: left;
    color: var(--re-brand-200);
}

.adm-td {
    padding: 8px 5px;
    color: var(--re-text-color);
}

/* Numbers line up when they are tabular; ids and counts read as columns. */
.adm-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Form
 * ------------------------------------------------------------------ */

.adm-field {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.adm-label {
    font-family: var(--re-font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--re-text-color);
    opacity: 0.7;
}

/* The hint under a control - why the field exists, or what it accepts. */
.adm-hint {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--re-text-color);
    opacity: 0.55;
}

.adm-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--adm-rule, rgba(130, 107, 125, 0.22));
    border-radius: var(--re-radius-sm, 6px);
    background: rgba(0, 0, 0, 0.18);
    color: var(--re-text-color);
    font-family: var(--re-font-body, inherit);
    font-size: 0.9rem;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.adm-input:focus {
    outline: none;
    border-color: var(--re-brand-200);
    background: rgba(0, 0, 0, 0.28);
}

.adm-input::placeholder { color: var(--re-text-color); opacity: 0.35; }

textarea.adm-input { min-height: 120px; resize: vertical; }

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */

.adm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--adm-rule, rgba(130, 107, 125, 0.45));
    border-radius: var(--re-radius-md, 8px);
    background: rgba(var(--re-brand-400-rgb, 130 107 125), 0.22);
    color: var(--re-text-color);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--re-font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.adm-btn:hover {
    background: rgba(var(--re-brand-400-rgb, 130 107 125), 0.38);
    color: var(--re-text-color);
}

.adm-btn:disabled,
.adm-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }

.adm-btn-primary {
    background: var(--re-brand-600, #5d4b60);
    border-color: var(--re-brand-600, #5d4b60);
    color: #fff;
}

.adm-btn-primary:hover {
    background: var(--re-brand-500, #6f5a72);
    border-color: var(--re-brand-500, #6f5a72);
    color: #fff;
}

.adm-btn-danger {
    background: rgba(224, 106, 90, 0.16);
    border-color: rgba(224, 106, 90, 0.5);
    color: #ffb4a8;
}

.adm-btn-danger:hover { background: rgba(224, 106, 90, 0.28); color: #ffb4a8; }

/* ------------------------------------------------------------------ *
 * Metric tile
 * ------------------------------------------------------------------ */

/*
 * The small figure-and-caption block the dashboard repeats a dozen times:
 * an icon, a number, a label under it. Written inline today as
 * `background: rgba(0,0,0,0.2); padding: 15px; border-radius: ...;
 * text-align: center` - with the padding varying between 15 and 16px from
 * one row of tiles to the next.
 *
 * The accent is a variable rather than six near-identical rules, because
 * these numbers are colour-coded by meaning - active is green, errors are
 * red - and that coding is information, not decoration. A tile sets
 * --adm-accent and the icon and figure follow it.
 */
.adm-tile {
    --adm-accent: var(--re-brand-200);
    height: 100%;
    padding: 16px;
    border-radius: var(--re-radius-md, 8px);
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}

.adm-tile i { font-size: 1.75rem; color: var(--adm-accent); }

.adm-tile-value {
    margin: 8px 0 4px;
    font-family: var(--re-font-display);
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--adm-accent);
}

.adm-tile-label {
    color: var(--re-text-color);
    opacity: 0.75;
    font-size: 0.85rem;
}

.adm-tile-note {
    display: block;
    margin-top: 6px;
    font-size: 0.74rem;
    opacity: 0.8;
}

/* The meanings, so a template names the state rather than a hex value. */
.adm-accent-live    { --adm-accent: #4fbf6a; }
.adm-accent-info    { --adm-accent: #4aa8bf; }
.adm-accent-warn    { --adm-accent: #e0a13a; }
.adm-accent-brand   { --adm-accent: var(--re-brand-200); }
.adm-accent-people  { --adm-accent: #9b7fd4; }
.adm-accent-traffic { --adm-accent: #e08a4a; }

/* ------------------------------------------------------------------ *
 * Text
 * ------------------------------------------------------------------ */

/* Secondary body text inside a panel - the caption under a figure, the
   explanation under a heading. */
.adm-muted {
    color: var(--re-text-color);
    opacity: 0.8;
}

.adm-muted-sm {
    color: var(--re-text-color);
    opacity: 0.7;
    font-size: 0.78rem;
}

/* ------------------------------------------------------------------ *
 * Status
 * ------------------------------------------------------------------ */

.adm-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--adm-rule, rgba(130, 107, 125, 0.35));
    border-radius: 999px;
    font-family: var(--re-font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--re-text-color);
    opacity: 0.75;
    white-space: nowrap;
}

.adm-tag-ok    { border-color: rgba(95, 191, 114, 0.5);  color: #7fd18c; opacity: 1; }
.adm-tag-warn  { border-color: rgba(224, 161, 58, 0.5);  color: #e0a13a; opacity: 1; }
.adm-tag-error { border-color: rgba(224, 106, 90, 0.55); color: #ffb4a8; opacity: 1; }

/* A message across the top of a page - saved, failed, nothing to do. */
.adm-msg {
    padding: 12px 16px;
    margin-bottom: var(--adm-gap, 24px);
    border: 1px solid var(--adm-rule, rgba(130, 107, 125, 0.35));
    border-left-width: 3px;
    border-radius: var(--re-radius-sm, 6px);
    font-size: 0.88rem;
    color: var(--re-text-color);
    background: rgba(var(--re-brand-400-rgb, 130 107 125), 0.08);
}

.adm-msg-ok    { border-left-color: rgba(95, 191, 114, 0.75); }
.adm-msg-error { border-left-color: rgba(224, 106, 90, 0.85); }

/* ------------------------------------------------------------------ *
 * Empty state
 * ------------------------------------------------------------------ */

.adm-empty {
    padding: clamp(32px, 6vw, 60px) 20px;
    text-align: center;
    border: 1px dashed var(--adm-rule, rgba(130, 107, 125, 0.22));
    border-radius: var(--re-radius-md, 8px);
    color: var(--re-text-color);
}

.adm-empty i {
    display: block;
    margin-bottom: 12px;
    font-size: 2rem;
    opacity: 0.35;
}

.adm-empty p {
    margin: 0 0 16px;
    opacity: 0.6;
}

/* ------------------------------------------------------------------ *
 * Layout helpers
 * ------------------------------------------------------------------ */

/*
 * Enough to replace the Bootstrap row/col pairs the admin pages use for
 * simple two- and three-up arrangements. Anything genuinely tabular keeps
 * using a table.
 */
.adm-grid {
    display: grid;
    gap: var(--adm-gap, 20px);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.adm-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

@media (max-width: 720px) {
    .adm-grid,
    .adm-grid-2 { grid-template-columns: minmax(0, 1fr); }
}