/*
 * Administration — the workspace shell and the Ivory ground, matching the CRM.
 *
 * The CRM proved this shell first: a full-bleed workspace whose left column is
 * the dark Portico rail (crm-guest-360.css) sitting on an ivory content ground
 * (crm-guest-360-ivory.css). Equipment adopted it next (equipment-shell.css).
 * Administration is the third surface to speak it, so the Portal's own control
 * centre reads as part of the same product rather than a settings screen
 * bolted onto it.
 *
 * The ground is declared twice, deliberately, exactly as Equipment declares it:
 *
 *   - as `--admin-ivory-*`, for the rules in this sheet that name a surface
 *     explicitly;
 *   - by re-pointing the Portal's own `--surface` / `--surface-soft` /
 *     `--line` / `--text` / `--muted` / `--strong` / `--shadow` inside
 *     `.admin-view`.
 *
 * The second half is what carries the theme into the six administration
 * sections without rewriting the panels, tables and metrics they already
 * render with: those tokens are substituted where they are declared, so every
 * derived token (`--surface-soft`, `--line`, `--accent-soft`, `--ok-soft`) is
 * restated here rather than left to inherit a value already computed against
 * white at `:root`.
 *
 * Like the CRM's, these are pinned colours rather than theme tokens: the ivory
 * pane, the near-white card and the warm hairlines between them are the
 * identity of these surfaces, not a coat theme.js should repaint. That is why
 * `--heading-color`, `--brand-gold` and `--action` are deliberately NOT
 * shadowed — the rail, the gold and the primary button stay on the appearance
 * settings an administrator controls from the Look & feel section itself.
 *
 * The values are the CRM's ground verbatim (crm-guest-360-ivory.css); the
 * three sets are identical on purpose and any change must move all of them.
 */

/* ------------------------------------------------------------- the ground */

.admin-view {
  --admin-ivory-ground: #f6f4ee;
  --admin-ivory-card: #fffdf9;
  --admin-ivory-hair: #e9e4d6;
  --admin-ivory-hair-strong: #e6e1d4;
  --admin-ivory-hair-soft: #f0ece0;
  --admin-ivory-ink: #221f18;
  --admin-ivory-ink-soft: #6d6552;

  /* The Portal tokens, re-pointed for this subtree only. */
  --surface: var(--admin-ivory-card);
  --surface-soft: var(--admin-ivory-ground);
  --line: var(--admin-ivory-hair);
  --text: var(--admin-ivory-ink);
  --muted: var(--admin-ivory-ink-soft);
  --strong: var(--admin-ivory-ink);
  --accent-soft: color-mix(in srgb, var(--brand-gold) 15%, var(--admin-ivory-card));
  --ok-soft: color-mix(in srgb, var(--brand-gold) 14%, var(--admin-ivory-card));
  --action-secondary: var(--admin-ivory-ground);
  --action-secondary-hover: color-mix(in srgb, var(--brand-gold) 14%, var(--admin-ivory-card));
  --shadow: 0 2px 8px rgba(34, 31, 24, 0.08);

  /* Full bleed, matching .crm-guest-360-view, .equipment-view and
     .portal-home-view: cancel the app-shell padding so the rail reaches the
     left and bottom edges of the viewport. The shared top bar and context nav
     are hidden on the administration route (app.js), so the rail alone carries
     brand, session and the way back to the portal. */
  min-width: 0;
  max-width: none;
  margin: 0 -22px -40px;
  padding: 0;
}

/* ---------------------------------------------------------- the workspace */

.admin-workspace {
  --admin-navigation-width: 232px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--admin-navigation-width) minmax(0, 1fr);
  /* clip, not hidden: a hidden box is still a scroll container, so focusing
     content that overflows the grid drags the whole workspace sideways and
     parks the navigation rail off the viewport edge. clip cannot scroll —
     which also keeps it out of the sticky rail's containing scrollport. */
  overflow: clip;
  background: var(--admin-ivory-card);
  transition: grid-template-columns 160ms ease;
}

.admin-workspace.is-navigation-collapsed {
  --admin-navigation-width: 66px;
}

/* ------------------------------------------------------- the Portico rail */

.admin-navigation {
  /* The lock screen's dark brand panel carried into the app shell. Ink and
     gold resolve from the appearance tokens so admin palette overrides keep
     working; the ivory constants match auth.css. */
  --admin-rail-ivory: #f2efe9;
  --admin-rail-text: rgba(242, 239, 233, 0.72);
  --admin-rail-faint: rgba(242, 239, 233, 0.45);
  --admin-rail-line: rgba(242, 239, 233, 0.16);
  min-width: 0;
  /* Pinned to the viewport while the page scrolls: the workspace column
     stretches with the content, the rail itself stays put. The page (window)
     remains the only scroll container. */
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid color-mix(in srgb, var(--heading-color) 88%, var(--admin-ivory-card));
  background: var(--heading-color);
  color: var(--admin-rail-text);
  scrollbar-color: rgba(242, 239, 233, 0.3) transparent;
}

.admin-navigation-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  border-bottom: 1px solid var(--admin-rail-line);
}

.admin-navigation-toggle {
  width: 38px;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0;
  color: var(--admin-rail-ivory);
  background: transparent;
  box-shadow: none;
}

.admin-navigation-toggle:hover,
.admin-navigation-toggle:focus-visible {
  border-color: var(--admin-rail-line);
  background: rgba(242, 239, 233, 0.08);
}

.admin-navigation-toggle > span {
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.admin-navigation-brand {
  min-width: 0;
  display: grid;
  line-height: 1.15;
  white-space: nowrap;
}

/* One word longer than CRM and EQUIPMENT, so the wordmark is set a size down
   to keep the whole name on the rail rather than abbreviating it. */
.admin-navigation-brand strong {
  color: var(--brand-gold-light);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* The way back to the portal replaces the hidden top bar's context nav. */
.admin-navigation-portal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 8px 0;
  padding: 7px 11px;
  border-radius: 6px;
  color: var(--admin-rail-faint);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.admin-navigation-portal:hover,
.admin-navigation-portal:focus-visible {
  color: var(--brand-gold-light);
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
}

.admin-navigation-portal svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.admin-navigation-body {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 8px 18px;
}

.admin-navigation-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 6px;
  padding: 0 11px;
  color: var(--admin-rail-text);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
}

.admin-navigation-item:hover,
.admin-navigation-item:focus-visible {
  color: var(--brand-gold-light);
  border-color: transparent;
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
}

.admin-navigation-item.active {
  position: relative;
  color: var(--brand-gold-light);
  background: color-mix(in srgb, var(--brand-gold) 16%, transparent);
}

.admin-navigation-item.active::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px -8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-gold);
}

.admin-navigation-group {
  display: grid;
  gap: 2px;
}

.admin-navigation-group-toggle {
  justify-content: flex-start;
}

.admin-navigation-chevron {
  margin-inline-start: auto;
  color: var(--admin-rail-faint);
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.admin-navigation-group-toggle[aria-expanded="false"] .admin-navigation-chevron {
  transform: rotate(-90deg);
}

.admin-navigation-subitems {
  display: grid;
  gap: 2px;
  padding-inline-start: 18px;
}

.admin-navigation-subitem {
  min-height: 38px;
  padding-inline-start: 15px;
  font-size: 0.73rem;
  font-weight: 400;
}

.admin-navigation-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.admin-navigation-section {
  margin-top: 19px;
}

.admin-navigation-section h3 {
  margin: 0 10px 7px;
  color: var(--admin-rail-faint);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-workspace.is-navigation-collapsed .admin-navigation-brand,
.admin-workspace.is-navigation-collapsed .admin-navigation-section h3,
.admin-workspace.is-navigation-collapsed .admin-navigation-item > span,
.admin-workspace.is-navigation-collapsed .admin-navigation-subitems,
.admin-workspace.is-navigation-collapsed .admin-navigation-portal,
.admin-workspace.is-navigation-collapsed .admin-navigation-foot {
  display: none;
}

.admin-workspace.is-navigation-collapsed .admin-navigation-header,
.admin-workspace.is-navigation-collapsed .admin-navigation-item {
  justify-content: center;
}

.admin-workspace.is-navigation-collapsed .admin-navigation-item.active::before,
.admin-workspace.is-navigation-collapsed .admin-navigation-group-toggle.is-open::before {
  inset-inline-start: -8px;
}

/* Collapsed, the open group's sub-items are hidden, so the group icon carries
   the current-view mark on their behalf. Expanded, the sub-item carries it and
   this rule does not apply. */
.admin-workspace.is-navigation-collapsed .admin-navigation-group-toggle.is-open {
  position: relative;
  color: var(--brand-gold-light);
  background: color-mix(in srgb, var(--brand-gold) 16%, transparent);
}

.admin-workspace.is-navigation-collapsed .admin-navigation-group-toggle.is-open::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px -8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-gold);
}

/* The house line closes the rail the way it closes the lock screen's brand
   panel: a ticked hairline over the Cormorant flourish. */
.admin-navigation-foot {
  display: grid;
  gap: 10px;
  padding: 12px 16px 15px;
}

.admin-navigation-session {
  display: grid;
  gap: 2px;
  margin-bottom: 2px;
}

.admin-navigation-session span {
  overflow: hidden;
  color: rgba(242, 239, 233, 0.9);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-navigation-session button {
  width: auto;
  min-height: 30px;
  justify-self: start;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: rgba(242, 239, 233, 0.55);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.admin-navigation-session button:hover,
.admin-navigation-session button:focus-visible {
  color: var(--brand-gold-light);
  background: transparent;
  text-decoration: underline;
}

.admin-navigation-foot-rule {
  position: relative;
  height: 1px;
  background: var(--admin-rail-line);
}

.admin-navigation-foot-rule::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: var(--brand-gold);
}

.admin-navigation-foot p {
  margin: 0;
  color: var(--brand-gold-light);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-style: italic;
  white-space: nowrap;
}

/* Only the phone drawer (max-width: 767px block) ever shows the scrim. */
.admin-navigation-scrim {
  display: none;
}

/* -------------------------------------------------- the workspace surface */

.admin-workspace-main {
  min-width: 0;
  background: color-mix(in srgb, var(--admin-ivory-ground) 38%, var(--admin-ivory-card));
}

.admin-workspace-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--admin-ivory-hair);
  padding: 14px clamp(18px, 2.4vw, 30px);
  background: var(--admin-ivory-card);
}

.admin-workspace-header h2 {
  margin: 2px 0 3px;
  color: var(--heading-color);
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* The section lede moved up from the panes: every section used to repeat its
   own title in an <h1> the rail and this header now carry between them, so
   only the sentence of explanation survives, beside the title it explains. */
.admin-workspace-header p:not(.eyebrow) {
  max-width: 62ch;
  margin: 0;
  color: var(--admin-ivory-ink-soft);
  font-size: 0.84rem;
}

/* The month and period pickers the toolbar used to hold. */
.admin-workspace-actions {
  display: flex;
  align-items: end;
  flex: 0 0 auto;
  gap: 12px;
}

/* Portico eyebrows: the sign-in panel's letter-spaced Tenor Sans label in the
   gold-ink mix, matching the CRM and Equipment workspaces. */
.admin-view .eyebrow {
  color: var(--ok);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.admin-workspace-page {
  padding: clamp(14px, 2vw, 24px);
}

/* --------------------------------------------------- content in the theme */

/* The shared surfaces the six sections render with — panels, tables, metrics
   and the Portal's own controls — already read the re-pointed tokens above.
   What is restated here is the handful of places the Portal sheet pins a raw
   cool value, plus the house voice the CRM gives the same elements. */

.admin-view .panel,
.admin-view .metric {
  border-color: var(--admin-ivory-hair);
  background: var(--admin-ivory-card);
}

.admin-view .panel-heading {
  border-bottom-color: var(--admin-ivory-hair);
  background: var(--admin-ivory-card);
}

.admin-view .panel-heading h2,
.admin-view .panel-heading h3 {
  color: var(--admin-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.admin-view th {
  background: var(--admin-ivory-ground);
  color: var(--admin-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.admin-view th,
.admin-view td {
  border-bottom-color: var(--admin-ivory-hair-soft);
}

.admin-view tbody tr:hover {
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--admin-ivory-card));
}

.admin-view .field input,
.admin-view .field select,
.admin-view .field textarea {
  border-color: var(--admin-ivory-hair);
  background: var(--admin-ivory-card);
  color: var(--admin-ivory-ink);
}

/* The shared secondary button arrives as a cool grey slab with `border: 0`,
   so the hairline is named explicitly — same treatment, same reasoning, as
   the CRM directory sheet and the Equipment shell. */
.admin-view .secondary-button {
  border: 1px solid var(--admin-ivory-hair);
  background: var(--admin-ivory-ground);
  color: var(--admin-ivory-ink-soft);
}

.admin-view .secondary-button:hover,
.admin-view .secondary-button:focus-visible {
  background: var(--accent-soft);
  color: var(--admin-ivory-ink);
}

/* The collector charts and the source registry pin cool greys and a cool
   white inline; on ivory those read as holes in the pane, so each is answered
   with its warm counterpart. */
.admin-view .collector-svg-chart {
  background: var(--admin-ivory-card);
}

.admin-view .collector-chart-gridline {
  stroke: var(--admin-ivory-hair);
}

.admin-view .collector-chart-axis {
  fill: var(--admin-ivory-ink-soft);
}

.admin-view .collector-chart-key i.running,
.admin-view .collector-rate-track {
  background: var(--admin-ivory-hair-strong);
}

.admin-view .collector-methodology {
  border-color: var(--admin-ivory-hair);
  background: var(--admin-ivory-ground);
}

.admin-view .source-registry-readonly,
.admin-view .source-system-card,
.admin-view .source-registry-pilot-flow span {
  border-color: var(--admin-ivory-hair);
  background: var(--admin-ivory-ground);
}

/* ------------------------------------------------------------ narrow rail */

@media (max-width: 1180px) {
  .admin-workspace {
    --admin-navigation-width: 205px;
  }

  .admin-workspace.is-navigation-collapsed {
    --admin-navigation-width: 62px;
  }
}

@media (max-width: 900px) {
  .admin-workspace-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}

/* ------------------------------------------------------------- the drawer */

/* Below 767px the expanded rail overlays the workspace instead of sharing its
   row, exactly as the CRM's and Equipment's do; the scrim closes it, and so
   does Escape. */
@media (max-width: 767px) {
  .admin-view {
    margin: 0 -12px -24px;
  }

  .admin-workspace,
  .admin-workspace.is-navigation-collapsed {
    --admin-navigation-width: 58px;
    grid-template-columns: var(--admin-navigation-width) minmax(0, 1fr);
  }

  .admin-workspace-main {
    min-width: 0;
  }

  .admin-navigation-header {
    padding: 0 9px;
  }

  .admin-navigation-body {
    padding: 8px 6px 14px;
  }

  .admin-navigation-item {
    padding: 0 8px;
  }

  .admin-workspace:not(.is-navigation-collapsed) .admin-navigation {
    position: fixed;
    z-index: 40;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(268px, 84vw);
    box-shadow: 0 0 40px rgba(23, 26, 32, 0.4);
    animation: admin-navigation-drawer-in 180ms ease;
  }

  .admin-workspace:not(.is-navigation-collapsed) .admin-navigation-scrim {
    position: fixed;
    z-index: 39;
    inset: 0;
    display: block;
    background: rgba(23, 26, 32, 0.44);
  }
}

@keyframes admin-navigation-drawer-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}