/* © 2026 William C. Chesher. All Rights Reserved.
   admin.css - bench's /admin (admin_home.py): the settings cards, their rows, the flash and the meter.
   Hues come from tokens.css; nothing new is introduced here. The chip is shell.css's, shared by every page. */

.adm-card { margin: 22px 0 0; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.adm-card h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 18px; font-weight: 600; }
.adm-card h3 { margin: 18px 0 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.adm-label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.adm-row input, .adm-row select { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 14px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; }
.adm-row input[type="number"] { flex: 0 1 120px; font-family: var(--mono); }
.adm-row input:focus-visible, .adm-row select:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.adm-row select option { background: var(--panel); }
.adm-unit { font-family: var(--mono); color: var(--ink-dim); }
.adm-note { margin: 4px 0 10px; font-size: 13px; line-height: 1.55; color: var(--ink-dim); }
.adm-note .adm-row { display: inline-flex; margin: 0 0 0 8px; vertical-align: middle; }
.adm-note a { color: var(--blue-lt); }
.adm-card code, .lead code { font-family: var(--mono); font-size: 12.5px; color: var(--orange-lt); }


.flash { margin: 18px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; }
.flash.ok { color: var(--mint); background: color-mix(in srgb, var(--mint) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mint) 35%, transparent); }
.flash.err { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); }

.adm-meter { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 8px; }
.adm-meter div { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel-2); }
.adm-meter dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.adm-meter dd { margin: 4px 0 0; font-family: var(--mono); font-size: 15px; color: var(--ink); }

.adm-card .btn:not(.primary) { color: var(--ink-2); background: rgba(255, 255, 255, .04); border-color: var(--line); }
.adm-card .btn:not(.primary):hover { color: var(--ink); border-color: color-mix(in srgb, var(--orange) 50%, var(--line)); }

/* the ask log (/admin/asks): the roster table, one student's rounds */
a.chip { text-decoration: none; }
a.chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--orange) 50%, var(--line)); }
.adm-scroll { overflow-x: auto; margin: 0 0 10px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th { text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.adm-table td .chip { display: inline-block; margin: 0 4px 4px 0; }
.adm-table a { color: var(--blue-lt); }
.adm-round { padding: 14px 0; border-top: 1px solid var(--line); }
.adm-round:first-of-type { border-top: 0; padding-top: 0; }
.adm-round.crisis { border-left: 3px solid var(--bad); padding-left: 12px; }
.adm-said { margin: 0 0 8px; color: var(--ink); font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-pre { margin: 0 0 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel-2); font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }