/* =====================================================================
   admin.css  --  Haitham's own screens.

   Optimised for one thumb on a phone: big targets, few taps, and no tiny
   tables on small screens. Everything here is an operator's console, so
   the type leans on IBM Plex Mono wherever the content is a measurement
   rather than a sentence.
   ===================================================================== */

/* ---------- Section switching ---------------------------------------- */
.admin-section { display: none; }
.admin-section.is-active { display: block; }

/* Every admin section also carries .stack, but `.admin-section.is-active`
   outranks `.stack` and was forcing display:block - so the flex gap never
   applied and the sections relied entirely on their children's margins.
   This puts the gap back. */
.admin-section.is-active.stack { display: flex; flex-direction: column; gap: var(--gap); }
.admin-section > .stack { gap: var(--gap); }

/* ---------- Section head ----------------------------------------------
   The page title sits on a yellow plate with an ink edge, which is the
   strongest "you are here" marker available without extra chrome.
   -------------------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--accent);
  color: var(--accent-contrast);
  border: var(--bd) solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.section-head h1 {
  font-size: var(--t-h1);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.section-head p { font-size: 13px; font-weight: 500; opacity: .85; }

/* ---------- Desktop side navigation ---------------------------------- */
.admin-side { display: none; }

/* ---------- Current status strip ------------------------------------- */
.now-card {
  background: var(--surface);
  border: var(--bd) solid var(--border);
  border-inline-start: 14px solid var(--now-accent, var(--text-faint));
  box-shadow: var(--shadow-md);
  padding: var(--s-4);
}
.now-card[data-tone='ok']    { --now-accent: var(--ok-fill); }
.now-card[data-tone='warn']  { --now-accent: var(--warn-fill); }
.now-card[data-tone='info']  { --now-accent: var(--info-fill); }
.now-card[data-tone='muted'] { --now-accent: var(--muted-fill); }

.now-status {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.now-line { font-size: 16px; font-weight: 600; margin-top: var(--s-1); }
.now-time {
  margin-top: var(--s-2);
  display: inline-block;
  padding: 2px var(--s-2);
  background: var(--surface-2);
  border: var(--bd-thin) solid var(--border);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ---------- Duration picker ------------------------------------------ */
.duration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
}
.duration-grid .btn {
  padding: var(--s-2) var(--s-1);
  min-height: 54px;
  font-family: var(--mono);
  font-size: 15px;
  border-width: var(--bd-thin);
}
.duration-grid .btn[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-flat);
  transform: var(--press);
}

/* The computed "12:30 PM -> 12:40 PM" preview: a readout, so it is ink
   on yellow and entirely monospaced. */
.time-preview {
  margin-top: var(--s-1);
  padding: var(--s-3) var(--s-4);
  background: var(--accent);
  color: var(--accent-contrast);
  border: var(--bd) solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.time-preview .k {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.time-preview .v {
  font-family: var(--mono);
  font-size: 23px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.time-preview .sub { font-size: 13px; font-weight: 500; }

/* ---------- Queue cards ----------------------------------------------- */
.queue-card {
  background: var(--surface);
  border: var(--bd-thin) solid var(--border);
  border-inline-start: 12px solid var(--q-accent, var(--border-strong));
  box-shadow: var(--shadow-sm);
  padding: var(--s-4);
}
.queue-card[data-priority='life_death']  { --q-accent: var(--critical-fill); }
.queue-card[data-priority='very_urgent'] { --q-accent: var(--danger-fill); }
.queue-card[data-priority='urgent']      { --q-accent: var(--urgent-fill); }
.queue-card[data-priority='normal']      { --q-accent: var(--ok-fill); }

.queue-card .who { font-size: 18px; font-weight: 700; letter-spacing: var(--track-tight); }
.queue-card .where { font-size: 13px; color: var(--text-muted); }
.queue-card .what { margin-top: var(--s-1); font-size: 15px; font-weight: 600; }
.queue-card .desc {
  margin-top: var(--s-1);
  font-size: var(--t-small);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.queue-card .acts {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--bd-hair) solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--s-2);
}

.queue-group-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text);
  margin: var(--s-6) 0 var(--s-3);
}
.queue-group-title::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: var(--bd-hair) solid var(--border);
}

/* ---------- Filters ---------------------------------------------------- */
.filters {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter-pill {
  flex: none;
  min-height: 42px;
  padding: var(--s-2) var(--s-3);
  border: var(--bd-thin) solid var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .05s ease, box-shadow .05s ease, background .12s ease;
}
.filter-pill:hover { background: var(--accent-soft); }
.filter-pill[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-contrast);
  transform: var(--press);
  box-shadow: var(--shadow-flat);
}

/* ---------- Report cards -----------------------------------------------
   The instrument panel: a grid of flat readouts, each one a figure and
   the name of the figure, nothing else.
   -------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.stat {
  padding: var(--s-3);
  background: var(--surface);
  border: var(--bd-thin) solid var(--border);
  box-shadow: var(--shadow-sm);
}
.stat .n {
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat .l {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat .sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

/* ---------- Breakdown bars --------------------------------------------- */
.bars { display: flex; flex-direction: column; gap: var(--s-3); }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); align-items: center; }
.bar-label { font-size: var(--t-small); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.bar-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.bar-track {
  display: block;
  grid-column: 1 / -1;
  height: 16px;
  background: var(--surface);
  border: var(--bd-thin) solid var(--ink);
  overflow: hidden;
}
.bar-fill {
  display: block;            /* a bare inline span ignores width/height */
  height: 100%;
  background: var(--accent);
  min-width: 3px;
  transition: width .25s steps(12, end);
}
.bar-row[data-tone='ok']     .bar-fill { background: var(--ok-fill); }
.bar-row[data-tone='warn']   .bar-fill { background: var(--warn-fill); }
.bar-row[data-tone='urgent'] .bar-fill { background: var(--urgent-fill); }
.bar-row[data-tone='danger'] .bar-fill { background: var(--danger-fill); }
.bar-row[data-tone='info']   .bar-fill { background: var(--info-fill); }

/* ---------- Charts (inline SVG) ---------------------------------------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--border); stroke-width: 2; }
.chart .axis-text { fill: var(--text-muted); font-size: 10px; font-family: var(--mono); font-weight: 600; }
.chart .val-text  { fill: var(--text); font-size: 10px; font-weight: 700; font-family: var(--mono); }
/* Every bar is outlined, so the chart matches the rest of the system. */
.chart .bar       { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.chart .bar.alt   { fill: var(--ok-fill); }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}
.chart-legend .sw {
  display: inline-block;
  width: 12px; height: 12px;
  border: var(--bd-thin) solid var(--ink);
  margin-inline-end: 6px;
  vertical-align: -2px;
}

/* ---------- History list ------------------------------------------------ */
.day-head {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  background: var(--accent);
  color: var(--accent-contrast);
  border: var(--bd-thin) solid var(--ink);
  padding: var(--s-2) var(--s-3);
  margin-block-start: var(--gap);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.hist-item {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: var(--bd-hair) solid var(--border);
}
.hist-item:last-child { border-bottom: 0; }
.hist-time {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.hist-what { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.hist-where { font-size: 13px; color: var(--text-muted); }
.hist-dur { font-family: var(--mono); font-size: 12px; color: var(--text-faint); margin-top: 2px; }

/* ---------- Config rows (buildings / tasks / users) --------------------- */
.cfg-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: var(--bd-thin) solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.cfg-row.is-off { opacity: .55; background: var(--muted-soft); }
.cfg-name { display: block; font-weight: 700; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.cfg-sub  { display: block; font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.cfg-move { display: flex; flex-direction: column; gap: 3px; flex: none; }
.cfg-move button {
  width: 36px; height: 27px;
  border: var(--bd-thin) solid var(--ink);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.cfg-move button:hover { background: var(--accent); }
.cfg-move button[disabled] { opacity: .35; cursor: not-allowed; background: var(--muted-soft); }