/* Platform console — layout on top of the Modernist system.
 *
 * Implements "Admin Portal.dc.html" from the Claude Design project. Loaded only
 * at the admin origin; the portal keeps static/css/main.css.
 *
 * Two vocabularies live here on purpose. The pc-* classes are the console's own
 * layout — sidebar, header, full-bleed sections. The rest re-declare the class
 * names the 28 platform templates already use (.card, .muted, .status-badge,
 * .stat-card, .empty-state, form bits), because main.css is deliberately not
 * loaded here and without them those screens would render unstyled. Restyling
 * the class restyles every template that uses it, including the ones not
 * rewritten to the mockup's layout yet.
 */

/* ── shell ───────────────────────────────────────────────────────────────── */

html, body { margin: 0; height: 100%; }

.pc-shell {
  display: grid;
  grid-template-columns: 238px 1fr;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* The sidebar is the brand navy, not accent: it is present on every screen, and
   an accent panel that never changes stops meaning anything. The accent is
   spent on the one mark at the top and on whatever is currently selected.
   Navy is also the ground the logo is drawn for, so the mark can sit here
   untiled — see .nilsaro-mark--bare in modernist.css. */
.pc-side {
  background: var(--color-brand-navy);
  color: #f3f2f2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pc-side__head { padding: 16px 18px 14px; border-bottom: 2px solid rgba(243, 242, 242, 0.2); }
.pc-side__brand { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.pc-side__word {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: 0.04em;
}
.pc-side__sub {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(243, 242, 242, 0.5); margin-top: 5px;
}

.pc-nav { flex: 1; overflow-y: auto; padding: 10px 0 16px; }
.pc-nav__group { margin-bottom: 2px; }
.pc-nav__label {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(243, 242, 242, 0.38); padding: 12px 18px 6px;
}
.pc-nav__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 18px; font-size: 13px; color: rgba(243, 242, 242, 0.82);
  text-decoration: none; border-left: 3px solid transparent;
}
.pc-nav__item:hover { background: rgba(243, 242, 242, 0.07); color: #f3f2f2; }
.pc-nav__item[aria-current="page"] {
  background: rgba(243, 242, 242, 0.1); color: #f3f2f2;
  /* The bright brand blue, not --color-accent: against the navy the light-ground
     accent nearly disappears (3.3:1) while this reads at 6.1:1. */
  border-left-color: var(--color-brand-blue); font-weight: 600;
}

.pc-side__foot {
  border-top: 2px solid rgba(243, 242, 242, 0.2);
  padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 10px;
}
.pc-side__actor { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-side__role {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-400); margin-top: 3px;
}
.pc-side__links { display: flex; gap: 14px; font-size: 11px; }
.pc-side__links a { color: rgba(243, 242, 242, 0.6); text-underline-offset: 3px; }
.pc-side__links a:hover { color: #f3f2f2; }

/* ── main column ─────────────────────────────────────────────────────────── */

.pc-main { display: flex; flex-direction: column; overflow: hidden; }
.pc-head {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 12px 22px; border-bottom: 2px solid var(--color-divider); flex: none;
}
.pc-head__titles { flex: 1; min-width: 0; }
.pc-head__kicker {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.pc-head h1 { font-size: 22px; margin: 2px 0 0; letter-spacing: -0.02em; }
.pc-head .input { width: 250px; height: 32px; min-height: 32px; }
.pc-head__env { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }

/* The scroll lives here, not on the page, so the sidebar and header stay put
   while a thousand audit rows go past. */
.pc-body { flex: 1; overflow-y: auto; }

/* Sections run to the edges and are separated by rules rather than gaps: the
   console is a dense working surface, and cards floating on a background would
   waste a third of it. 22px is the gutter every table cell aligns to. */
.pc-section { padding: 20px 22px 22px; border-bottom: 2px solid var(--color-divider); }
.pc-section:last-child { border-bottom: 0; }
.pc-section__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.pc-section__head h2 { font-size: 17px; margin: 0; }
.pc-section__note { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.pc-section__more { margin-left: auto; font-size: 12px; }

.pc-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-bottom: 2px solid var(--color-divider);
}
.pc-bar__spacer { flex: 1; }
.pc-bar__count { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* Stat strip: one hairline between cells, none on the outside. */
.pc-stats {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-bottom: 2px solid var(--color-divider);
  list-style: none; margin: 0; padding: 0;
}
.pc-stats--4 { grid-template-columns: repeat(4, 1fr); }
.pc-stats > * { padding: 16px 20px; border-right: 1px solid var(--color-divider); }
.pc-stats > *:last-child { border-right: 0; }
.pc-stat__value {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: 30px; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pc-stat__label {
  display: block; font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: 7px;
}

/* Tables sit flush in a section, so the outer cells carry the gutter. */
.pc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pc-table th {
  text-align: left; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  padding: 6px 10px; border-bottom: 2px solid var(--color-divider); white-space: nowrap;
}
.pc-table td { padding: 7px 10px; border-bottom: 1px solid var(--color-divider); }
.pc-table th:first-child, .pc-table td:first-child { padding-left: 22px; }
.pc-table th:last-child, .pc-table td:last-child { padding-right: 22px; }
.pc-table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.pc-num { font-variant-numeric: tabular-nums; }
.pc-right { text-align: right; }

/* Queue row: what needs a platform decision. */
.pc-queue { display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); }
.pc-queue__row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 11px 0; border-bottom: 1px solid var(--color-divider);
}
.pc-queue__kind { width: 104px; justify-content: center; flex: none; }
.pc-queue__text { flex: 1; min-width: 0; }
.pc-queue__headline { font-size: 14px; font-weight: 600; }
.pc-queue__detail { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: 2px; }
.pc-queue__when {
  font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent);
  width: 120px; text-align: right; flex: none;
}

.pc-detail-head { padding: 14px 22px 16px; border-bottom: 2px solid var(--color-divider); }
.pc-detail-head__row { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.pc-detail-head__row h2 { font-size: 26px; margin: 0; letter-spacing: -0.02em; }
.pc-lede {
  font-size: 12px; max-width: 78ch; margin: 0;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* ── unauthenticated surface ─────────────────────────────────────────────── */

/* Split down the middle: a statement on the left, the one thing to do on the
   right. The brand navy fills half the screen here and nowhere else in the
   console apart from the sidebar, because this is the only screen with a single
   purpose — and it is the largest surface the logo ever gets to sit on in its
   own colours. */
.pc-auth {
  min-height: 100vh; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);
}
.pc-auth__brand {
  background: var(--color-brand-navy); color: var(--color-bg);
  padding: 44px 46px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8);
}
.pc-auth__mark { display: flex; align-items: center; gap: 10px; }
.pc-auth__word {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: 0.05em;
}
.pc-auth__title {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(38px, 5vw, 64px); line-height: 0.96; letter-spacing: -0.03em;
}
.pc-auth__blurb { margin: 20px 0 0; max-width: 34ch; font-size: 14px; opacity: 0.9; }
.pc-auth__host { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }

.pc-auth__panel { display: flex; align-items: center; justify-content: center; padding: 44px; }
.pc-auth__form { width: 100%; max-width: 360px; }
.pc-auth__form h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -0.02em; }
.pc-auth__lede {
  font-size: 13px; margin: 0 0 22px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.pc-auth__fields { display: flex; flex-direction: column; gap: 14px; }
.pc-auth__fields .btn-block { justify-content: flex-start; height: 40px; margin-top: 0; }
.pc-auth__note {
  border-top: 2px solid var(--color-divider); margin-top: 8px; padding-top: 12px;
  font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.pc-auth__steps { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 10px; }

@media (max-width: 820px) {
  /* The panel carries the task, so it leads on a phone and the statement
     follows rather than pushing the form below the fold. */
  .pc-auth { grid-template-columns: 1fr; }
  .pc-auth__brand { order: 2; padding: 28px 24px; gap: var(--space-4); }
  .pc-auth__panel { order: 1; padding: 28px 24px; }
  .pc-auth__title { font-size: 34px; }
}

/* ── the vocabulary the existing platform templates already use ──────────── */

code { font-family: var(--font-mono); font-size: 0.92em; }
fieldset { border: 0; margin: 0; padding: 0; }

.muted, .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.card {
  display: block; background: var(--color-surface);
  border: 1px solid var(--color-divider); padding: var(--space-4);
  margin-bottom: var(--space-4); border-radius: 0;
}
.card h2, .card h3 { margin-top: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-left: 1px solid var(--color-divider); }
.stat-card { padding: 16px 20px; border-right: 1px solid var(--color-divider); background: none; }
.stat-card strong { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1; }

.empty-state {
  padding: 26px 22px; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* Same hairline as .tag in modernist.css, for the same measured reason: a 100
   step sits within ΔL 1 of this console's own ground, so the fill alone gives a
   badge no edge at all. See the comment on .tag. */
.status-badge {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 2px 9px;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-200); color: var(--color-neutral-800);
}
.status-badge--success {
  background: var(--color-neutral-200); border-color: var(--color-neutral-400);
  color: var(--color-neutral-900);
}
.status-badge--warning {
  background: var(--color-warning-200); border-color: var(--color-warning-300);
  color: var(--color-warning-800);
}
.status-badge--danger {
  background: var(--color-danger-200); border-color: var(--color-danger-300);
  color: var(--color-danger-800);
}

.filter-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; margin-bottom: var(--space-4); }
.form-stack { display: grid; gap: var(--space-3); max-width: 60ch; }
.form-input { width: 100%; }
.form-errors { border-left: 3px solid var(--color-danger); background: var(--color-danger-100); padding: 10px 14px; margin-bottom: var(--space-3); }
.form-error { color: var(--color-danger-700); font-size: 12px; }
.detail-list { display: grid; grid-template-columns: 200px 1fr; gap: 0; margin: 0; font-size: 14px; }
.detail-list dt { padding: 9px 0; border-top: 1px solid var(--color-divider); color: color-mix(in srgb, var(--color-text) 65%, transparent); font-size: 13px; }
.detail-list dd { padding: 9px 0; border-top: 1px solid var(--color-divider); margin: 0; }
.shortcut-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.setup-link { font-size: 13px; }

/* Django's own form rendering, which several screens still use as-is. */
.pc-body form p { margin: 0 0 var(--space-3); }
.pc-body form label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.pc-body .helptext { display: block; font-size: 11px; margin-top: 4px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.pc-body ul.errorlist { list-style: none; margin: 0 0 6px; padding: 0; color: var(--color-danger-700); font-size: 12px; }

.messages { list-style: none; margin: 0; padding: 14px 22px 0; display: grid; gap: var(--space-2); }
.message {
  display: flex; gap: 10px; padding: 10px 14px; font-size: 13px;
  background: var(--color-accent-100); border-left: 3px solid var(--color-accent);
}
.message-error { background: var(--color-danger-100); border-left-color: var(--color-danger); }
.message-warning { background: var(--color-warning-100); border-left-color: var(--color-warning); }

.context-banner {
  padding: 8px 22px; font-size: 12px;
  font-family: var(--font-heading); font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--color-neutral-900); color: var(--color-neutral-100);
}
/* Warning amber, not the accent: this banner means someone is working inside a
   customer's organisation, and it has to stay uncomfortable to look at. */
.context-banner--support { background: var(--color-warning-700); color: var(--color-bg); }

/* ── narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .pc-shell { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .pc-side { position: static; }
  .pc-nav { max-height: 260px; }
  .pc-main { overflow: visible; }
  .pc-body { overflow: visible; }
  .pc-head { flex-wrap: wrap; }
  .pc-head .input { width: 100%; }
  .pc-stats, .pc-stats--4 { grid-template-columns: repeat(2, 1fr); }
  .pc-queue__row { flex-wrap: wrap; }
  .pc-queue__when { width: auto; text-align: left; }
}