/* ============================================================================
   admin.css — THE admin-shell component layer.

   WHY THIS FILE EXISTS (owner 2026-10-21: "mobile admin menu not styled for
   money platform assistant ... CSS is supposed to go ... organize css its our
   saving point on code easy find easy seek easy link easy for you and easy for
   humans").

   THE BUG IT FIXES: the admin rail's group styles lived in `css/eos-app.css`,
   which base.html DOES NOT LOAD. Loaded stack on every page is:
       tokens.css  ->  clajama.unified.css  ->  clajama.public.css
   eos-app.css is only a source file that was merged INTO unified.css long ago —
   anything added to it after that merge is dead CSS. The rail rendered as an
   unstyled <details> list (default marker, 13px, no padding) while the page
   returned 200. A stylesheet nobody loads cannot style anything.

   RULE: admin-shell components go HERE (loaded last on admin pages only, via
   templates/pages/admin/dashboard.html). Base components stay in
   clajama.unified.css. Page-specific one-offs stay in that page's <style>.
   See docs/CSS_MAP.md for the full ownership map.

   All values are design tokens — no raw hex, no inline styles (P64).
   ========================================================================== */

/* ── the rail itself ─────────────────────────────────────────────────────── */
.admin-rail { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.admin-rail-note {
  margin: 0 6px 8px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.admin-rail-note strong { color: var(--color-text-primary); font-weight: 600; }

/* ── a group: native <details>, so it works with no JavaScript ───────────── */
.admin-group { border: 0; margin: 0; padding: 0; min-width: 0; }

.admin-group > summary {
  list-style: none;                 /* Chromium/Safari */
  cursor: pointer;
  display: flex;                    /* the rule that was missing on the phone */
  align-items: center;
  gap: 8px;
  margin: 2px 4px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.admin-group > summary::-webkit-details-marker { display: none; }   /* WebKit */
.admin-group > summary::marker { content: ""; }                     /* standard */
.admin-group > summary:hover {
  color: var(--color-text-primary);
  background: var(--color-raised);
  border-color: var(--color-border);
}
.admin-group[open] > summary { color: var(--accent); }

.admin-group > summary::after {
  content: "⌄";
  font-size: 12px;
  line-height: 1;
  margin-left: 6px;
  transition: transform .15s ease;
}
.admin-group[open] > summary::after { transform: rotate(180deg); }

.admin-group-count {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--color-accent-tint);
  color: var(--accent);
}

.admin-group .eos-nav-item { margin: 2px 0; }
.admin-group .eos-nav-item .n-icon { font-size: 17px; width: 30px; height: 30px; }

/* ── admin -> Sites row: a site's own data opens from the site, not the menu ─ */
.site-data-links { white-space: nowrap; }
.site-data-links a { margin-right: 10px; font-size: 12px; }

/* ── phones: same rail is the ☰ sheet; give thumbs real targets ──────────── */
@media (max-width: 920px) {
  .admin-rail-note { margin: 0 10px 10px; font-size: 11px; }
  .admin-group > summary { padding: 11px 12px; font-size: 11px; }
  .admin-group .eos-nav-item { padding: 12px 14px; }
}

/* ── desktop: the rail scrolls itself, 24 destinations never push the page ── */
@media (min-width: 921px) {
  .admin-eos .eos-nav {
    position: sticky;
    top: calc(var(--head-h) + 8px);
    max-height: calc(100vh - var(--head-h) - 16px);
    overflow-y: auto;
    padding-right: 2px;
  }
}