/* =============================================================================
   PlotPDFPro — Administration console

   Every colour and length here is a var(--token). tokens.css is the only file
   permitted to hold literal values, and the Portal test suite enforces that.

   Light and dark both come free: the tokens already resolve per theme, so this
   sheet defines no palette of its own and there is no separate admin theme to
   drift out of step with the site.
   ============================================================================= */

.pp-admin {
  display: grid;
  grid-template-columns: var(--container-choice-basis) 1fr;
  min-height: 100vh;
  background: var(--surface-canvas);
  color: var(--text-primary);
}

/* ------------------------------------------------------------------ sidebar */

.pp-admin__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  background: var(--surface-sunken);
  border-right: var(--border-width-hairline) solid var(--border-subtle);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.pp-admin__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.pp-admin__logo { width: var(--icon-xl); height: var(--icon-xl); }

.pp-admin__brandtext { display: flex; flex-direction: column; }

.pp-admin__wordmark {
  font-weight: var(--weight-strong);
  font-size: var(--type-title3-size);
  letter-spacing: var(--tracking-title3);
}

.pp-admin__panel {
  font-size: var(--type-caption-size);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-caption-strong);
  text-transform: uppercase;
}

/* Which system am I looking at. Production takes the accent; local stays quiet
   so the loud state is the one that should make an operator pause. */
.pp-admin__env {
  font-size: var(--type-caption-size);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-caption-strong);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-align: center;
  border: var(--border-width-hairline) solid var(--border-default);
}

.pp-admin__env--local {
  background: var(--surface-raised);
  color: var(--text-secondary);
}

.pp-admin__env--production {
  background: var(--accent-subtle);
  color: var(--accent-default);
  border-color: var(--accent-border);
}

.pp-admin__nav { display: flex; flex-direction: column; gap: var(--space-1); }

.pp-admin__navgroup {
  margin-top: var(--space-4);
  padding: 0 var(--space-3);
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-caption-strong);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pp-admin__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--type-body-size);
  border-left: var(--border-width-emphasis) solid transparent;
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}

.pp-admin__link:hover { background: var(--surface-raised); color: var(--text-primary); }

.pp-admin__link.active {
  background: var(--surface-raised);
  color: var(--accent-default);
  border-left-color: var(--accent-default);
  font-weight: var(--weight-strong);
}

.pp-admin__sidebarfoot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}

.pp-admin__return {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--type-caption-size);
}

.pp-admin__return:hover { color: var(--accent-default); }

/* --------------------------------------------------------------------- main */

/* min-width:0 on the 1fr track too, so a wide table scrolls inside its own container instead of
   stretching the whole two-column shell and pushing the sidebar off-screen. */
.pp-admin__main {
  padding: var(--space-7) var(--space-7) var(--space-9);
  max-width: var(--container-ultrawide);
  width: 100%;
  min-width: 0;
}

.pp-admin__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}

.pp-admin__eyebrow {
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-caption-strong);
  text-transform: uppercase;
}

.pp-admin__title { margin: var(--space-1) 0 0; }

.pp-admin__lede { color: var(--text-secondary); margin: var(--space-2) 0 0; }

.pp-admin__back { margin-bottom: var(--space-4); }

.pp-admin__back a { color: var(--text-secondary); text-decoration: none; }

.pp-admin__back a:hover { color: var(--accent-default); }

.pp-admin__sectiontitle { margin: var(--space-7) 0 var(--space-4); }

.pp-admin__footnote {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
}

/* -------------------------------------------------------------------- cards */

/* auto-fit rather than auto-fill: with auto-fill a wide viewport keeps empty phantom tracks and the
   real cards stay narrow, which is the opposite of what a roomy screen should buy. */
.pp-admin__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--container-admin-card-min)), 1fr));
  gap: var(--space-4);
}

/* A grid item defaults to min-width:auto, meaning "never shrink below my content". That default is
   what let an over-long status row push its card past the track and draw on top of the next one.
   min-width:0 makes the card obey its column; everything inside then has to wrap rather than spill. */
.pp-admin__card {
  padding: var(--space-5);
  min-width: 0;
}

.pp-admin__cardlabel {
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-caption-strong);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-3);
}

.pp-admin__metric {
  font-size: var(--type-display-size);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-display);
  margin: 0;
  line-height: var(--opacity-full);
  /* Display-sized text must not widen its own card: some metrics are badges, not short numbers. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pp-admin__metricnote {
  font-size: var(--type-caption-size);
  color: var(--text-tertiary);
  margin: var(--space-1) 0 var(--space-3);
}

.pp-admin__cardlink {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--accent-default);
  text-decoration: none;
  font-size: var(--type-body-size);
}

.pp-admin__consentok {
  font-size: var(--type-title3-size);
  font-weight: var(--weight-strong);
  color: var(--success-default);
  margin: 0 0 var(--space-3);
}

.pp-admin__consentnone {
  font-size: var(--type-title3-size);
  font-weight: var(--weight-strong);
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

/* ---------------------------------------------------------- definition lists */

.pp-admin__facts { margin: 0; display: grid; gap: var(--space-2); }

/* The label/value row is the whole defect in one selector.
   flex-wrap lets the value drop BELOW its label when the card is too narrow to hold both, instead of
   the row staying one line and overflowing. The row-gap is what keeps a wrapped value legible. */
.pp-admin__facts > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}

.pp-admin__facts dt {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  min-width: 0;
}

/* max-width:100% is the backstop: once the value is alone on its line it may use the full card, and
   overflow-wrap breaks a single unbroken token rather than letting it escape. */
.pp-admin__facts dd {
  margin: 0;
  margin-inline-start: auto;
  text-align: right;
  font-size: var(--type-body-size);
  color: var(--text-primary);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pp-admin__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.pp-admin__list li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
}

/* ------------------------------------------------------------------- pills */

/* white-space:nowrap was here and was the second half of the defect: a badge that can neither wrap nor
   shrink makes its row unshrinkable too, so the card had no way to fit it.
   The badge still prefers one line — the row wraps first and drops it below the label — but a badge
   wider than the card itself now breaks inside its own border instead of crossing it. */
.pp-admin__pill {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--type-caption-size);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-caption-strong);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: var(--border-width-hairline) solid var(--border-subtle);
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: right;
}

.pp-admin__pill--ok {
  background: var(--success-subtle);
  color: var(--success-default);
  border-color: var(--success-default);
}

.pp-admin__pill--bad {
  background: var(--accent-subtle);
  color: var(--danger-default);
  border-color: var(--accent-border);
}

.pp-admin__pill--off { color: var(--text-tertiary); }

.pp-admin__pill--busy { color: var(--info-default); border-color: var(--info-default); }

.pp-admin__pill--none { color: var(--text-tertiary); border-style: dashed; }

/* ------------------------------------------------------------------ tables */

.pp-admin__tablewrap {
  overflow-x: auto;
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-default);
}

.pp-admin__table { width: 100%; border-collapse: collapse; font-size: var(--type-body-size); }

.pp-admin__table th,
.pp-admin__table td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  text-align: left;
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
  vertical-align: middle;
}

.pp-admin__table thead th {
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-caption-strong);
  text-transform: uppercase;
  font-weight: var(--weight-strong);
  position: sticky;
  top: 0;
}

.pp-admin__table tbody tr:hover { background: var(--surface-raised); }

.pp-admin__table tbody tr:last-child td { border-bottom: none; }

.pp-admin__num { text-align: right; font-variant-numeric: tabular-nums; }

.pp-admin__pos { color: var(--success-default); }

.pp-admin__neg { color: var(--danger-default); }

/* Backup filenames, snapshot ids and account guids have no spaces, so a normal wrap cannot break them
   and they run straight out of the card. anywhere lets them break at any character.
   Kept as wrapping rather than an ellipsis on purpose: these values exist to be read and copied, and a
   truncated snapshot id is worse than a two-line one. Where a value IS shortened for density — the
   table id columns — the full value is already carried in a title attribute. */
.pp-admin__mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
  min-width: 0;
}


.pp-admin__muted { color: var(--text-tertiary); }

.pp-admin__rowlink {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: var(--weight-strong);
  margin-right: var(--space-2);
}

.pp-admin__rowlink:hover { color: var(--accent-default); text-decoration: underline; }

/* --------------------------------------------------------- search & paging */

.pp-admin__search {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.pp-admin__searchinput {
  flex: 1 1 var(--container-text);
  min-width: 0;
  height: var(--control-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-width-hairline) solid var(--border-default);
  background: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--type-body-size);
}

.pp-admin__searchinput:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent-default);
  outline-offset: var(--focus-ring-offset);
}

.pp-admin__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pp-admin__pagerstate { margin: 0; font-size: var(--type-body-size); color: var(--text-secondary); }

.pp-admin__headeractions { display: flex; gap: var(--space-2); }

/* -------------------------------------------------------------- responsive

   Desktop is the intended surface. Narrow viewports collapse the sidebar to a
   horizontal strip rather than trying to become a phone layout: the tables
   scroll inside their own container, which is the honest behaviour for dense
   operational data. */

@media (max-width: 1024px) {
  .pp-admin { grid-template-columns: 1fr; }

  .pp-admin__sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: var(--border-width-hairline) solid var(--border-subtle);
  }

  .pp-admin__nav { flex-direction: row; flex-wrap: wrap; }

  .pp-admin__navgroup { margin-top: 0; width: 100%; }

  .pp-admin__main { padding: var(--space-5) var(--page-margin-tablet) var(--space-8); }

  .pp-admin__header { flex-direction: column; align-items: flex-start; }
}