/* ══════════════════════════════════════════════════════════════
   Port Elysium — Admin shell
   ══════════════════════════════════════════════════════════════
   The console grew feature by feature, so everything landed in one
   column: nine stat cards, then the AI settings card, then the
   traces card, then the investor table — with the other four views
   reachable only from buttons buried inside them. Seventeen
   hand-written `style.display` assignments and no router.

   This adds the two things it never had: a side nav that names
   every view in one place, and an Overview that opens on the work
   waiting to be done rather than on a table of everyone.

   TWO RULES, THE SAME ONES THE APP SHELL FOLLOWS
   ----------------------------------------------
   1. Nothing here is load-bearing. Everything is gated behind
      `html.pe-admin`, a class admin-shell.js adds only once the
      nav is built. If that script fails, the console renders
      exactly as it does today.

   2. It mirrors, never sources. The Overview counts are read from
      the stat elements the page already fills from its own API
      calls. This file adds no fetch of its own and cannot show a
      number the console did not already have.

   Brand values come from custom properties, not literals, so the
   same stylesheet serves a differently branded build.
   ══════════════════════════════════════════════════════════════ */

:root {
  --adm-nav-w: 208px;
  --adm-gap: 1.1rem;
  /* Fall back to the Port Elysium palette when a brand has not set
     these, so this file carries no company's colours of its own. */
  --adm-ink: var(--navy, #0a1628);
  --adm-accent: var(--gold, #c9a96e);
  --adm-card: var(--card, #fff);
  --adm-line: var(--border, #e8e8e4);
  --adm-muted: var(--text-light, #888);
}

/* ── Desktop: a column of destinations, then the work ────────── */
@media (min-width: 900px) {

  html.pe-admin .admin-main {
    display: grid;
    grid-template-columns: var(--adm-nav-w) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    max-width: 1320px;
  }

  /* The nav owns column one for the whole page; the body column
     holds everything else, whatever order it arrived in. */
  html.pe-admin .pe-adm-nav {
    grid-column: 1; grid-row: 1;
    position: sticky; top: 5rem;
    display: flex; flex-direction: column; gap: 2px;
  }
  html.pe-admin .pe-adm-navgroup {
    font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--adm-muted); margin: 1.1rem 0 0.4rem 0.7rem;
  }
  html.pe-admin .pe-adm-navgroup:first-child { margin-top: 0; }

  html.pe-admin .pe-adm-link {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.7rem; border-radius: 7px;
    font-family: 'Inter', sans-serif; font-size: 0.78rem;
    color: #46505e; text-decoration: none; background: none; border: 0;
    cursor: pointer; text-align: left; width: 100%;
    transition: background 0.15s, color 0.15s;
  }
  html.pe-admin .pe-adm-link:hover { background: rgba(10,22,40,0.05); color: var(--adm-ink); }
  html.pe-admin .pe-adm-link.is-active {
    background: var(--adm-ink); color: #fff; font-weight: 500;
  }
  /* ── The icon is a tinted tile, like the Explore launcher ────
     Each destination is drawn in its own hue and sits on a wash of
     that same hue, so the column is scannable by colour before it is
     read. The hue arrives as --hue, set per link by admin-shell.js
     from the shared icon set; a link with no hue keeps the old grey
     glyph on no tile, so nothing breaks if a new row is added
     without one. */
  html.pe-admin .pe-adm-ico {
    flex: 0 0 auto; width: 17px; height: 17px; color: var(--adm-muted);
  }
  html.pe-admin .pe-adm-ico svg { width: 17px; height: 17px; }
  html.pe-admin .pe-adm-ico[style*="--hue"] {
    width: 27px; height: 27px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--hue) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--hue) 24%, transparent);
    transition: background 0.15s, border-color 0.15s;
  }
  html.pe-admin .pe-adm-ico[style*="--hue"] svg { width: 19px; height: 19px; }
  /* Safari 15 and anything else without color-mix keeps a neutral
     tile and still gets the coloured glyph — a floor, not a break. */
  @supports not (background: color-mix(in srgb, red 10%, transparent)) {
    html.pe-admin .pe-adm-ico[style*="--hue"] {
      background: rgba(10,22,40,0.05); border-color: rgba(10,22,40,0.09);
    }
  }
  /* The active row is a solid navy bar. A 13% wash of the hue
     disappears into it, so on that row the tile lifts to a light
     scrim and the glyph keeps its own colour. */
  html.pe-admin .pe-adm-link.is-active .pe-adm-ico { color: var(--adm-accent); }
  html.pe-admin .pe-adm-link.is-active .pe-adm-ico[style*="--hue"] {
    background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.2);
  }
  html.pe-admin .pe-adm-link:hover .pe-adm-ico[style*="--hue"] {
    background: color-mix(in srgb, var(--hue) 20%, transparent);
    border-color: color-mix(in srgb, var(--hue) 34%, transparent);
  }

  /* A count sits on the link that owns it, so the nav itself says
     where the work is. */
  html.pe-admin .pe-adm-count {
    margin-left: auto; min-width: 19px; padding: 0 5px;
    font-size: 0.62rem; line-height: 18px; text-align: center;
    border-radius: 9px; background: rgba(10,22,40,0.08); color: #46505e;
  }
  html.pe-admin .pe-adm-link.is-active .pe-adm-count { background: rgba(255,255,255,0.18); color: #fff; }
  html.pe-admin .pe-adm-count.is-urgent { background: #e74c3c; color: #fff; }
}

/* ── Phones and tablets: the nav becomes a chip strip ────────── */
@media (max-width: 899px) {
  html.pe-admin .pe-adm-nav {
    display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none;
    margin: 0 -0.9rem 1rem; padding: 0 0.9rem 0.5rem;
    scroll-snap-type: x proximity;
  }
  html.pe-admin .pe-adm-nav::-webkit-scrollbar { display: none; }
  html.pe-admin .pe-adm-navgroup { display: none; }
  html.pe-admin .pe-adm-link {
    flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 38px; padding: 0.5rem 0.9rem; border-radius: 19px;
    border: 1px solid var(--adm-line); background: var(--adm-card);
    font-family: 'Inter', sans-serif; font-size: 0.7rem; color: #46505e;
    cursor: pointer; white-space: nowrap;
  }
  html.pe-admin .pe-adm-link.is-active {
    background: var(--adm-accent); color: var(--adm-ink);
    border-color: var(--adm-accent); font-weight: 500;
  }
  /* The chips used to hide the icon entirely — nine near-identical
     pills, told apart only by reading each label. Now the glyph
     leads each chip in its own hue, which is what makes the strip
     scannable while it scrolls. No tile here: at 38px the chip is
     already the container. */
  html.pe-admin .pe-adm-ico {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 17px; height: 17px; color: var(--adm-muted);
  }
  html.pe-admin .pe-adm-ico svg { width: 17px; height: 17px; }
  html.pe-admin .pe-adm-link.is-active .pe-adm-ico { color: var(--adm-ink); }
  /* The active chip is a solid gold fill; a coloured glyph on it
     reads as a smudge, so on that one chip the hue is dropped and
     the glyph goes to the chip's own ink. */
  html.pe-admin .pe-adm-link.is-active .pe-adm-ico[style*="--hue"] { --hue: var(--adm-ink); }
  html.pe-admin .pe-adm-count {
    min-width: 17px; padding: 0 5px; border-radius: 9px;
    background: rgba(10,22,40,0.08); font-size: 0.6rem; line-height: 17px; text-align: center;
  }
  html.pe-admin .pe-adm-link.is-active .pe-adm-count { background: rgba(255,255,255,0.2); }
  html.pe-admin .pe-adm-count.is-urgent { background: #e74c3c; color: #fff; }
}

/* ── Overview: what needs you, not who exists ────────────────── */
html.pe-admin .pe-adm-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
html.pe-admin .pe-adm-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem; font-weight: 400; color: var(--adm-ink); margin: 0;
}
html.pe-admin .pe-adm-sub { font-size: 0.72rem; color: var(--adm-muted); }

html.pe-admin .pe-adm-queue {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--adm-gap); margin-bottom: 2rem;
}
@media (max-width: 899px) {
  /* App-icon scale: the whole queue readable at a glance instead of
     one card per screen. */
  html.pe-admin .pe-adm-queue {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content; align-items: start;
    gap: 0.55rem; margin-bottom: 1.4rem;
  }
  html.pe-admin .pe-adm-task { padding: 0.75rem 0.8rem; gap: 0.25rem; border-radius: 12px; }
  html.pe-admin .pe-adm-task .n { font-size: 1.5rem; }
  html.pe-admin .pe-adm-task .t { font-size: 0.52rem; letter-spacing: 0.1em; line-height: 1.3; }
  html.pe-admin .pe-adm-task .go { font-size: 0.55rem; letter-spacing: 0.06em; }
}
html.pe-admin .pe-adm-task {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--adm-card); border: 1px solid var(--adm-line);
  border-left: 3px solid var(--adm-line);
  border-radius: 10px; padding: 1rem 1.1rem;
  text-align: left; cursor: pointer; font-family: 'Inter', sans-serif;
  transition: border-color 0.15s, transform 0.12s;
}
html.pe-admin .pe-adm-task:hover { transform: translateY(-1px); border-left-color: var(--adm-accent); }
html.pe-admin .pe-adm-task .n {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem; line-height: 1; color: var(--adm-ink);
}
html.pe-admin .pe-adm-task .t {
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--adm-muted);
}
html.pe-admin .pe-adm-task .go {
  font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--adm-accent); margin-top: 0.1rem;
}
/* Something waiting on a person turns the card, not just a number. */
html.pe-admin .pe-adm-task.is-live { border-left-color: var(--adm-accent); }
html.pe-admin .pe-adm-task.is-urgent { border-left-color: #e74c3c; }
html.pe-admin .pe-adm-task.is-urgent .n { color: #b8341f; }
/* Nothing to do is worth saying plainly rather than showing a zero. */
html.pe-admin .pe-adm-clear {
  grid-column: 1 / -1; padding: 1.6rem; text-align: center;
  border: 1px dashed var(--adm-line); border-radius: 10px;
  color: var(--adm-muted); font-size: 0.78rem;
}

/* The nine headline figures still belong on Overview, but below the
   work and at a size that says "reference", not "dashboard". */
html.pe-admin #stats-bar { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }

/* ── The views themselves ────────────────────────────────────── */
@media (min-width: 900px) {
  html.pe-admin .pe-adm-body { grid-column: 2; grid-row: 1; min-width: 0; }
}
html.pe-admin .pe-adm-body > .pe-adm-view { display: none; }
html.pe-admin .pe-adm-body > .pe-adm-view.is-shown { display: block; }