/* Admin pages (#/admin/<tab>, #/admin-pricing, #/admin-costs) — UI1, 21 Oct 2026.
   Each room has its own colour: .adm-sec-<room> sets --sec (lines, text) and --sec-soft (tints).
   Dark themes (aurora, sunset, ocean, emerald) use the bright set; light themes (ivory, cotton) the deep set,
   every one at 4.5:1 or better against its background. */
:root {
  --adm-overview: #93a4ff; --adm-users: #3fd0b6; --adm-pricing: #f2b84b; --adm-costs: #ff8a73;
  --adm-ai: #b99bff; --adm-promotions: #f27fb8; --adm-materials: #86d46f;
  --adm-panel-bg: var(--bg-surface); --adm-drawer-bg: var(--bg-base);
}
[data-theme="ivory"], [data-theme="cotton"] {
  --adm-overview: #4555d1; --adm-users: #0d7a69; --adm-pricing: #946000; --adm-costs: #bf4129;
  --adm-ai: #6a43d4; --adm-promotions: #ad2a6c; --adm-materials: #3c7a2a;
}
.adm-sec-overview { --sec: var(--adm-overview); } .adm-sec-users { --sec: var(--adm-users); }
.adm-sec-pricing { --sec: var(--adm-pricing); } .adm-sec-costs { --sec: var(--adm-costs); }
.adm-sec-ai { --sec: var(--adm-ai); } .adm-sec-promotions { --sec: var(--adm-promotions); }
.adm-sec-materials { --sec: var(--adm-materials); }
[class*="adm-sec-"] { --sec-soft: color-mix(in srgb, var(--sec) 13%, transparent); --sec-line: color-mix(in srgb, var(--sec) 45%, transparent); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.adm { min-width: 0; }
.adm label { text-transform: none; letter-spacing: 0; font-size: 0.84rem; } /* sentence case, not shouted form labels */
.adm-top { margin-bottom: 1.75rem; }
.adm-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.9rem; }

/* Tab bar: scrolls sideways on a phone (the bar, never the page). */
.adm-tabs { display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--border-strong); -webkit-overflow-scrolling: touch; }
.adm-tab { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; padding: 0.65rem 0.95rem 0.7rem; color: var(--text-secondary);
  font-size: 0.9rem; font-weight: 500; white-space: nowrap; border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.adm-tab:hover { color: var(--text-primary); background: var(--sec-soft); }
.adm-tab:focus-visible { outline: 2px solid var(--sec); outline-offset: -2px; }
.adm-tab.is-on { color: var(--text-primary); font-weight: 650; border-bottom-color: var(--sec); background: var(--sec-soft); }
.adm-tab-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sec); opacity: 0.55; }
.adm-tab.is-on .adm-tab-dot { opacity: 1; }

/* Section header: the room's colour rule, name, one line on what it is for. */
.adm-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem;
  padding: 0.15rem 0 0.15rem 1rem; border-left: 4px solid var(--sec); margin-bottom: 1.5rem; }
.adm-head-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.adm-head-blurb { margin-top: 0.3rem; color: var(--text-secondary); font-size: 0.92rem; max-width: 62ch; }
.adm-note { color: var(--text-secondary); font-size: 0.86rem; margin: 0 0 0.85rem; max-width: 72ch; }
.adm-note.is-error, .lg-state.is-error { color: var(--error); }
.adm-warnings:empty { display: none; }
.adm-warnings { margin-bottom: 1.25rem; }

/* Overview */
.adm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; margin-bottom: 2rem; }
.adm-stat { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.15rem 1rem; border-radius: var(--radius-sm); background: var(--adm-panel-bg);
  border: 1px solid var(--border-color); border-top: 3px solid var(--sec); color: var(--text-primary); }
.adm-stat:hover { border-color: var(--sec-line); border-top-color: var(--sec); color: var(--text-primary); }
.adm-stat:focus-visible, .adm-room:focus-visible { outline: 2px solid var(--sec); outline-offset: 2px; }
.adm-stat-num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.adm-stat-label { color: var(--text-secondary); font-size: 0.84rem; }
.adm-stats[aria-busy] .adm-stat-num { color: var(--text-tertiary); }
.adm-rooms { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.adm-room { display: block; height: 100%; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); border-left: 3px solid var(--sec); background: var(--adm-panel-bg); }
.adm-room:hover { background: var(--sec-soft); }
.adm-room-name { display: block; color: var(--sec); font-weight: 650; font-size: 0.95rem; }
.adm-room-blurb { display: block; color: var(--text-secondary); font-size: 0.84rem; margin-top: 0.15rem; }

/* Blocks inside a room */
.adm-block { margin-top: 1.25rem; padding: 1.25rem 1.35rem; border-radius: var(--radius); background: var(--adm-panel-bg); border: 1px solid var(--border-color); min-width: 0; }
.adm-block:first-of-type { margin-top: 0; }
.adm-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.4rem; }
.adm-block-title { font-size: 1.02rem; font-weight: 650; color: var(--text-primary); margin-bottom: 0.6rem; }
.adm-block-head .adm-block-title { margin-bottom: 0; }
.adm-panel > .adm-block-title { margin: 0 0 0.75rem; }
.adm-scroll { overflow-x: auto; }
.adm-block .form-card { max-width: none; }
.adm-inline-label { text-transform: none; letter-spacing: 0; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.3rem; }
.adm-field { min-width: 0; }
.adm-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.75rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.adm-form-row .adm-field { flex: 1 1 130px; }
.adm-chip { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.72rem; color: var(--text-secondary); border: 1px solid var(--border-strong); }
.adm-pill { display: inline-block; padding: 0.12rem 0.6rem; border-radius: 999px; font-size: 0.76rem; font-weight: 600; background: var(--bg-elevated); color: var(--text-secondary); white-space: nowrap; }
.adm-pill.is-on, .adm-pill.is-role-admin { background: var(--sec-soft); color: var(--sec); }
.adm-pill.is-role-team { box-shadow: inset 0 0 0 1px var(--sec-line); color: var(--text-primary); }
.adm-pill.is-off { color: var(--text-tertiary); }
.adm-list { list-style: none; }
.adm-list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border-color); }
.adm-list-row:last-child { border-bottom: 0; }
.adm-list-row > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; min-width: 0; }
.adm-list-sub { color: var(--text-secondary); font-size: 0.84rem; }
.adm-code { font-family: var(--font-body); letter-spacing: 0.04em; color: var(--sec); }
.adm-settings { display: grid; gap: 0.1rem; }
.adm-setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border-color); }
.adm-setting-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.adm-setting-edit { display: flex; gap: 0.5rem; align-items: center; }
.adm-setting-edit input { width: 12rem; max-width: 52vw; padding: 0.4rem 0.6rem; }

@media (max-width: 760px) {
  .adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-stat-num { font-size: 1.55rem; }
  .adm-block { padding: 1rem; }
  .adm-title { font-size: 1.5rem; }
}