/* propane — admin dashboard. Dense, monochrome telemetry on the shared brand
   system. Only adds layout/structure that brand.css doesn't already ship. */

/* ── nav extras (admin title + links) ──────────────────────────────────────── */
.nav-left  { display:flex; align-items:center; gap:.85em; min-width:0; }
.nav-right { display:flex; align-items:center; gap:.65em; }
.nav-tag {
  font-family: var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--ink-3); padding:.32em .6em; border:1px solid var(--line); border-radius: var(--r-pill);
}
.navlink { color: var(--ink-2); font-size:.9rem; font-weight:550; padding:.4em .2em; transition: color var(--t-fast) var(--ease); }
.navlink:hover { color: var(--ink); }

/* ── page shell ────────────────────────────────────────────────────────────── */
.admin { padding-top: 30px; padding-bottom: 80px; }
.boot { display:flex; align-items:center; gap:.7em; color: var(--ink-3); padding: 80px 0; justify-content:center; }
.boot-text { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; }

.head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom: 22px; }
.head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.head .sub { color: var(--ink-3); font-size:.9rem; margin-top:6px; }

/* ── tabs ──────────────────────────────────────────────────────────────────── */
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom: 26px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab {
  appearance:none; background:none; border:0; cursor:pointer; font: inherit;
  color: var(--ink-3); font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  padding:.7em 1.05em; position:relative; white-space:nowrap;
  transition: color var(--t-fast) var(--ease);
}
.tab:hover { color: var(--ink-2); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after {
  content:""; position:absolute; left:.55em; right:.55em; bottom:-1px; height:2px;
  background: var(--ink); border-radius: var(--r-pill);
}

/* ── panels ────────────────────────────────────────────────────────────────── */
.panel[hidden] { display:none; }
.panel-loading { display:flex; align-items:center; gap:.6em; color: var(--ink-3); padding: 36px 4px; font-size:.85rem; }
.panel-error {
  border:1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px 24px;
  color: var(--bad); font-family: var(--mono); font-size:.85rem; background: var(--bg-2);
}

/* ── overview stat grid ────────────────────────────────────────────────────── */
.stat-grid {
  display:grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.stat {
  padding: 20px 20px 18px; display:flex; flex-direction:column; gap:10px;
  position:relative; overflow:hidden;
}
.stat .kicker { font-size:.66rem; letter-spacing:.2em; }
.stat-num {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 600; letter-spacing:-.04em;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat-num .unit { color: var(--ink-3); font-size: .55em; font-weight:500; margin-right:.05em; }
.stat-sub { font-family: var(--mono); font-size:.7rem; color: var(--ink-3); letter-spacing:.02em; line-height:1.4; }
.stat-sub b { color: var(--ink-2); font-weight:600; }
.stat--wide { grid-column: 1 / -1; }

/* split bar (fresh vs cached) */
.split { display:flex; flex-direction:column; gap:8px; }
.split-bar { height:6px; border-radius: var(--r-pill); overflow:hidden; display:flex; background: var(--bg-3); }
.split-bar > i { display:block; height:100%; }
.split-bar > .seg-fresh  { background: var(--ink); }
.split-bar > .seg-cached { background: var(--ink-4); }
.split-legend { display:flex; gap:16px; flex-wrap:wrap; font-family: var(--mono); font-size:.68rem; color: var(--ink-3); }
.split-legend span { display:inline-flex; align-items:center; gap:.5em; }
.dotk { width:8px; height:8px; border-radius:2px; display:inline-block; }
.dotk.fresh  { background: var(--ink); }
.dotk.cached { background: var(--ink-4); }

.note {
  margin-top: 18px; padding: 14px 16px; border:1px dashed var(--line-2); border-radius: var(--r);
  color: var(--ink-3); font-size:.82rem; line-height:1.5; background: var(--bg-1);
}
.note b { color: var(--ink-2); font-weight:600; }

/* ── tables ────────────────────────────────────────────────────────────────── */
.tbl-wrap { border:1px solid var(--line); border-radius: var(--r-lg); overflow:auto; background: var(--bg-2); box-shadow: var(--shadow); }
.tbl-wrap .tbl { font-size:.85rem; min-width: 760px; }
.tbl-wrap .tbl th { white-space:nowrap; background: var(--bg-2); position:sticky; top:0; z-index:1; }
.tbl-wrap .tbl td { white-space:nowrap; }
.tbl .num { text-align:right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.tbl td.num { color: var(--ink-2); }
.tbl td.num.zero { color: var(--ink-4); }
.tbl .email { color: var(--ink); font-weight:550; }
.tbl .email .you { color: var(--ink-4); font-family: var(--mono); font-size:.7rem; margin-left:.4em; }
.tbl .when { font-family: var(--mono); font-size:.78rem; color: var(--ink-3); }
.tbl .title-cell { max-width: 280px; overflow:hidden; text-overflow:ellipsis; }
.tbl .badge { vertical-align: middle; }
.admin-flag { margin-left:.5em; }

/* sortable header affordance */
.tbl th.sortable { cursor:pointer; user-select:none; }
.tbl th.sortable:hover { color: var(--ink); }
.tbl th .arrow { opacity:0; margin-left:.35em; font-size:.85em; }
.tbl th[aria-sort] .arrow { opacity:1; }

.empty { padding: 40px 20px; text-align:center; color: var(--ink-3); font-size:.9rem; }

/* ── catalog health ────────────────────────────────────────────────────────── */
.health-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.health-grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.health-cell { padding: 16px 18px; }
.health-cell .kicker { font-size:.64rem; }
.health-cell .val { font-size:1.4rem; font-weight:600; letter-spacing:-.03em; margin-top:8px; color: var(--ink); }
.health-cell .val.mono { font-family: var(--mono); font-size:1.05rem; }
.cats { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.cats .chip { font-size:.74rem; padding:.32em .7em; cursor:default; }

/* clickable user rows */
.tbl tr.row-clickable { cursor:pointer; }
.tbl tr.row-clickable:hover td { background: var(--bg-3); }
.tbl tr.row-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset:-2px; }

/* ── user detail drawer ────────────────────────────────────────────────────── */
.drawer-backdrop {
  position:fixed; inset:0; z-index:80; background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px); opacity:0; transition: opacity .24s var(--ease);
  display:flex; justify-content:flex-end;
}
.drawer-backdrop.open { opacity:1; }
.drawer {
  width: min(560px, 100%); height:100%; background: var(--bg-1);
  border-left:1px solid var(--line); box-shadow: var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
  transform: translateX(100%); transition: transform .28s var(--ease-out);
}
.drawer-backdrop.open .drawer { transform:none; }

.drawer-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding: 22px 24px 18px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.drawer-head-main { min-width:0; }
.drawer-head h3 { margin-top:6px; word-break:break-word; display:flex; align-items:center; gap:.5em; flex-wrap:wrap; }
.drawer-sub { color: var(--ink-3); font-size:.82rem; margin-top:8px; font-family: var(--mono); letter-spacing:.02em; }
.drawer-close {
  appearance:none; background:none; border:1px solid var(--line); color: var(--ink-3);
  width:34px; height:34px; border-radius: var(--r-pill); cursor:pointer; flex-shrink:0;
  font-size:1rem; line-height:1; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.drawer-close:hover { color: var(--ink); border-color: var(--line-2); }

.drawer-body { padding: 22px 24px 40px; overflow-y:auto; display:flex; flex-direction:column; gap: 22px; }

.d-stats { display:grid; gap:10px; grid-template-columns: repeat(3, 1fr); }
.d-stat { background: var(--bg-2); border:1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.d-stat .kicker { font-size:.6rem; letter-spacing:.18em; }
.d-stat-num { font-size:1.4rem; font-weight:600; letter-spacing:-.03em; margin-top:7px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* grant free credits */
.grant-card { padding: 20px; }
.grant-hint { color: var(--ink-3); font-size:.82rem; line-height:1.5; margin: 8px 0 16px; }
.grant-form { display:flex; flex-direction:column; gap:12px; }
.grant-fields { display:grid; gap:10px; grid-template-columns: 130px 1fr; }
.grant-fields .input { padding:.65em .8em; }
.grant-quick { display:flex; gap:7px; flex-wrap:wrap; }
.grant-quick .chip { padding:.4em .8em; font-size:.82rem; font-family: var(--mono); }
.grant-form .btn { align-self:flex-start; }

.drawer-section { display:flex; flex-direction:column; gap:12px; }
.drawer-section .tbl-wrap { box-shadow:none; }
.drawer-section .tbl-wrap .tbl { min-width: 0; }
.drawer-section .tbl td.num.pos { color: var(--good); }
.drawer-section .empty { padding: 24px; }

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .nav-tag { display:none; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .d-stats { grid-template-columns: repeat(2, 1fr); }
  .grant-fields { grid-template-columns: 1fr; }
}