/* platform.css — the ONE platform stylesheet (PLATFORM.md §5a).
   Light only. Bootstrap 5.3 does components; this file does the chrome
   (topbar, footer), the 3-panel shell, and the small idioms the estate
   repeats (status chip, item rows, quiet tables). Keep it small — a new
   rule here must be an idiom every app shares, never an app tweak. */

:root {
  --pf-border: #dee2e6;
  --pf-muted: #6c757d;
  --pf-accent: #2a6cdf;      /* links, selection, primary — one blue */
  --pf-bg: #ffffff;
  --pf-bg-soft: #f8f9fa;
}

html, body { height: 100%; }
body {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--pf-bg);
  font-size: 15px;
}

/* ── Topbar ──────────────────────────────────────────────────────────── */
.pf-topbar {
  background: var(--pf-bg);
  border-bottom: 1px solid var(--pf-border);
  padding: .35rem .75rem;
}
.pf-topbar .navbar-brand { font-weight: 600; font-size: 1.05rem; }
.pf-topbar .nav-link { color: #333; border-radius: 6px; padding: .35rem .65rem; }
.pf-topbar .nav-link:hover { background: rgba(0,0,0,.06); }
.pf-topbar .nav-link.active { color: var(--pf-accent); font-weight: 600; }
.pf-topbar .dropdown-menu { font-size: .95rem; }

/* Save-status chip (pages set textContent + className = saving|saved|error) */
#status { font-size: 12px; padding: 2px 8px; border-radius: 10px; align-self: center; }
#status.saving { background: #fff4cc; color: #6b5400; }
#status.saved  { background: #d6f5d6; color: #1f5b1f; }
#status.error  { background: #ffd6d6; color: #6b0000; }

/* ── Footer ──────────────────────────────────────────────────────────── */
/* margin-top:auto pins the footer to the viewport bottom on short pages
   (body is a flex column); the container rule below keeps a gap above it
   on pages tall enough to reach it. */
.pf-footer {
  border-top: 1px solid var(--pf-border);
  padding: .5rem .75rem;
  font-size: .8rem; color: var(--pf-muted);
  flex-shrink: 0;
  margin-top: auto;
}
body > .container { margin-bottom: 40px; }
.pf-footer a { color: var(--pf-muted); }

/* ── 3-panel shell ───────────────────────────────────────────────────── */
/* <div class="pf-panes"> <aside class="pf-pane">…</aside> ×2 <main class="pf-main">…</main> </div> */
.pf-panes { flex: 1; display: flex; min-height: 0; }
.pf-pane {
  width: 260px; flex-shrink: 0;
  border-right: 1px solid var(--pf-border);
  display: flex; flex-direction: column; min-height: 0;
}
.pf-pane-head { flex-shrink: 0; border-bottom: 1px solid var(--pf-border); padding: 10px 12px; }
.pf-pane-head .t { font-size: 14px; font-weight: 600; }
.pf-pane-head .s { font-size: 11px; color: var(--pf-muted); }
.pf-pane-head .btns { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.pf-pane-list { flex: 1; overflow-y: auto; min-height: 0; }
.pf-pane-foot { flex-shrink: 0; border-top: 1px solid var(--pf-border); padding: 6px 12px; font-size: 11px; color: var(--pf-muted); }
.pf-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; padding: 18px 22px 40px; }
.pf-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--pf-muted); padding: 20px; text-align: center; }

/* Item rows inside a pane list (col1/col2 entries). Selected = accent tint. */
.pf-item {
  display: block; padding: 9px 14px;
  border-bottom: 1px solid #eee;
  color: inherit; text-decoration: none;
}
.pf-item:hover { background: rgba(0,0,0,.04); color: inherit; }
.pf-item.selected { background: rgba(42,108,223,.12); }
.pf-item .row1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pf-item .name { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-item .count { color: var(--pf-muted); font-size: 12px; flex-shrink: 0; }
.pf-item .sub { color: var(--pf-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Expiry tint idiom (dates within 30 days) — server adds .hl-soon */
.pf-item.hl-soon, table.pf-grid tbody tr.hl-soon td { background: rgba(255,166,0,.16); }

/* Quiet read-only grid (overview tables, report tables) */
table.pf-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-grid th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--pf-muted);
              border-bottom: 1px solid #aaa; padding: 6px 8px; }
.pf-grid td { border-bottom: 1px solid #eee; padding: 6px 8px; vertical-align: top; }
.pf-grid td.num { text-align: right; }
.pf-grid tfoot td { border-top: 1.5px solid #888; border-bottom: none; font-weight: 600; }

/* CRUD engine grid (crud/tcrud.php) — quiet chrome per PLATFORM.md §5a/5b */
.tcrud-grid th.tcrud-th { font-size: 11px; text-transform: uppercase; color: var(--pf-muted);
                          border-bottom: 1px solid #aaa; background: none; }
.tcrud-grid th.tcrud-th a { color: inherit; }
.tcrud-grid td { border-bottom: 1px solid #eee; vertical-align: middle; }