/* ── Settings split view ─────────────────────────────────────────────────────
 * A permanent column of sections beside the section you are in — the shape
 * macOS System Settings uses, and the answer to a settings area that was nine
 * pages linking back to a tenth.
 *
 * Two rules govern everything below:
 *   1. The column never moves. It is the same object on every settings URL, so
 *      the selection is the only thing that changes between them.
 *   2. Below the breakpoint there is no split. The column becomes the page and
 *      a section becomes the page you push to — the same drill-in the surface
 *      had before, rather than a squeezed sidebar nobody can read.
 *
 * Lives in components/ for the same reason list-group.css does: it frames every
 * settings page, and a page that forgot to include it would render as two
 * unstyled stacks.
 *
 * Markup: templates/tenant/settings/_shell.html + _sidebar.html.
 */

/* The page frame, owned here outright. It deliberately does *not* reuse
   `.catalog-select-page`: that class caps its container at 768px, loads from
   `extra_css` — after this sheet — and matches at the same (0,2,0) specificity,
   so it silently won and the pane rendered tablet-narrow no matter what width
   was asked for here. */
.cs-split-page {
  min-height: 100vh;
  padding: var(--cs-nav-height) 0 var(--cs-space-16);
}

/* 264 column + 32 gap + 1080 pane. */
.cs-split-page .container { max-width: min(1400px, 100%); }

.cs-split {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--cs-space-8);
  align-items: start;
  padding: var(--cs-space-8) 0 var(--cs-space-16);
}

/* minmax(0, 1fr) above and this together: without both, a wide table inside a
   pane blows the grid out and the whole page scrolls sideways. */
/* 1080 is in family with what these pages had as full-width pages before the
   split (`.settings-wide .container` was --cs-container-lg, 1024px), so no card
   interior needed re-tuning to sit in it. */
.cs-split__detail {
  min-width: 0;
  max-width: 1080px;
}

/* The pane owns the measure now, so the header block inside it must not also
   centre itself in a narrower one. */
.cs-split__detail .cs-settings { max-width: none; margin: 0; }

.cs-split__nav {
  position: sticky;
  top: calc(var(--cs-nav-height) + var(--cs-space-6));
  align-self: start;
}

/* ── The column ──────────────────────────────────────────────────────────── */

/* Same material as .cs-group__rows, so the two columns read as one surface
   rather than a panel next to a document. */
.cs-nav {
  padding: var(--cs-space-2);
  background: var(--cs-glass-bg-deep);
  backdrop-filter: var(--cs-glass-blur-sm);
  -webkit-backdrop-filter: var(--cs-glass-blur-sm);
  border: 1px solid var(--cs-glass-border);
  border-radius: 14px;
}

/* The step off the surface entirely — the only part of the old breadcrumb the
   column does not already replace. */
.cs-nav__out {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: var(--cs-space-1) var(--cs-space-2);
  font-size: 12px;
  font-weight: var(--cs-weight-medium);
  color: var(--cs-neutral-500);
  text-decoration: none;
}
.cs-nav__out:hover { color: var(--cs-blue-600); }
.cs-nav__out svg { width: 13px; height: 13px; }

/* The tenant this whole surface is about, above its sections. */
.cs-nav__identity {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2-5);
  padding: var(--cs-space-2-5);
  border-radius: var(--cs-radius-md);
  text-decoration: none;
  transition: background var(--cs-transition-fast);
}
.cs-nav__identity:hover { background: var(--cs-neutral-100); }

.cs-nav__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cs-neutral-100);
}
.cs-nav__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cs-nav__monogram {
  font-size: 17px;
  font-weight: var(--cs-weight-semibold);
  color: var(--cs-neutral-500);
}

.cs-nav__identity-body { min-width: 0; }
.cs-nav__identity-name,
.cs-nav__identity-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-nav__identity-name {
  font-size: 14px;
  font-weight: var(--cs-weight-semibold);
  color: var(--cs-neutral-900);
}
.cs-nav__identity-sub {
  font-size: 12px;
  color: var(--cs-neutral-500);
}

/* ── Filter ──────────────────────────────────────────────────────────────── */

.cs-nav__search {
  position: relative;
  margin: var(--cs-space-2) var(--cs-space-1) var(--cs-space-3);
}
.cs-nav__search-icon {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 15px;
  height: 15px;
  color: var(--cs-neutral-400);
  transform: translateY(-50%);
  pointer-events: none;
}
.cs-nav__search input {
  width: 100%;
  padding: 6px var(--cs-space-2) 6px 29px;
  font: inherit;
  font-size: 13px;
  color: var(--cs-neutral-800);
  background: var(--cs-neutral-100);
  border: 1px solid transparent;
  border-radius: 8px;
}
.cs-nav__search input:focus {
  outline: none;
  background: var(--cs-white, #fff);
  border-color: var(--cs-blue-500);
}
/* The UA's own clear affordance, which would sit beside ours. */
.cs-nav__search input::-webkit-search-decoration,
.cs-nav__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Groups and rows ─────────────────────────────────────────────────────── */

.cs-nav__group + .cs-nav__group { margin-top: var(--cs-space-4); }
.cs-nav__group[hidden] { display: none; }

.cs-nav__group-title {
  margin: 0 0 var(--cs-space-1);
  padding-left: var(--cs-space-2-5);
  font-size: 11px;
  font-weight: var(--cs-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-neutral-500);
}

.cs-nav__row {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2-5);
  min-height: 40px;
  padding: var(--cs-space-1-5) var(--cs-space-2-5);
  border-radius: var(--cs-radius-md);
  text-decoration: none;
  transition: background var(--cs-transition-fast), color var(--cs-transition-fast);
}
/* display:flex outranks the UA's [hidden] rule, so a filtered-out row would
   otherwise stay on screen — the same trap .cs-row documents. */
.cs-nav__row[hidden] { display: none; }

.cs-nav__row:hover { background: var(--cs-neutral-100); }

/* The lit row. The bar is a second, non-colour cue: colour alone would be the
   only signal for anyone who cannot separate these two. */
.cs-nav__row[aria-current="page"] {
  background: var(--cs-blue-50);
  box-shadow: inset 2px 0 0 var(--cs-blue-500);
}
.cs-nav__row[aria-current="page"] .cs-nav__row-label {
  font-weight: var(--cs-weight-semibold);
  color: var(--cs-blue-700);
}

/* A section this role cannot open. The status still shows — it was never the
   restricted part — but nothing here invites a click into a 403. */
.cs-nav__row--inert { cursor: default; }
.cs-nav__row--inert:hover { background: none; }
.cs-nav__row--inert .cs-nav__row-label { color: var(--cs-neutral-400); }
.cs-nav__row--inert .cs-row__icon { opacity: 0.45; filter: saturate(0.25); }

.cs-nav__row .cs-row__icon { width: 26px; height: 26px; border-radius: 7px; }
.cs-nav__row .cs-row__icon svg { width: 15px; height: 15px; }

.cs-nav__row-body { min-width: 0; }
.cs-nav__row-label,
.cs-nav__row-status {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-nav__row-label {
  font-size: 14px;
  font-weight: var(--cs-weight-medium);
  color: var(--cs-neutral-800);
}
.cs-nav__row-status {
  font-size: 12px;
  color: var(--cs-neutral-500);
}

.cs-nav__empty {
  margin: 0;
  padding: var(--cs-space-4) var(--cs-space-2-5);
  font-size: 13px;
  color: var(--cs-neutral-500);
}

/* ── Overview pane ───────────────────────────────────────────────────────────
 * The root pane is the widest view on the surface and the only one that is pure
 * summary, so it leads with figures rather than with a list of facts.
 */

.cs-overview__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--cs-space-4);
  margin-bottom: var(--cs-space-8);
}

.cs-overview__stat {
  padding: var(--cs-space-4) var(--cs-space-5);
  background: var(--cs-glass-bg-deep);
  backdrop-filter: var(--cs-glass-blur-sm);
  -webkit-backdrop-filter: var(--cs-glass-blur-sm);
  border: 1px solid var(--cs-glass-border);
  border-radius: 14px;
}

.cs-overview__stat-figure {
  display: block;
  font-size: 26px;
  font-weight: var(--cs-weight-semibold);
  line-height: 1.15;
  color: var(--cs-neutral-900);
  letter-spacing: var(--cs-tracking-tight);
}

/* A figure that is a word ("Audit", "Enforced") next to ones that are numbers:
   set smaller so the row of tiles still reads as a row. */
.cs-overview__stat-figure--word { font-size: 19px; padding-block: 3px; }

.cs-overview__stat-label {
  display: block;
  margin-top: var(--cs-space-1);
  font-size: 12px;
  font-weight: var(--cs-weight-medium);
  color: var(--cs-neutral-500);
}

/* ── Swap ────────────────────────────────────────────────────────────────── */

/* The pane fades through a navigation rather than blinking. Short enough that a
   fast section still feels instant, long enough that the change is legible. */
.cs-split__detail { transition: opacity 120ms ease; }
.cs-split__detail[data-loading] { opacity: 0.45; }

/* Only shown below the breakpoint, where the column is off screen. */
.cs-split__back {
  display: none;
  align-items: center;
  gap: 2px;
  margin: 0 0 var(--cs-space-4);
  font-size: 14px;
  font-weight: var(--cs-weight-medium);
  color: var(--cs-blue-600);
  text-decoration: none;
}
.cs-split__back svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .cs-split__detail { transition: none; }
  .cs-split__detail[data-loading] { opacity: 1; }
  .cs-nav__identity,
  .cs-nav__row { transition: none; }
}

/* ── Narrow: no split, a drill-in stack ──────────────────────────────────────
 * 900px is where this portal collapses a sidebar (.aconsole, .et-tiles).
 *
 * The two states are decided by markup, not script: the shell root carries
 * data-settings-root, so /edit is the list and a section URL is the detail.
 */
@media (max-width: 900px) {
  .cs-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: var(--cs-space-6);
  }

  .cs-split__nav { position: static; }
  .cs-split__detail { max-width: none; }

  /* The list is the page you are on… */
  .cs-split[data-settings-root] .cs-split__detail { display: none; }

  /* …and a section is the page you pushed to. */
  .cs-split:not([data-settings-root]) .cs-split__nav { display: none; }
  .cs-split:not([data-settings-root]) .cs-split__back { display: inline-flex; }

  /* Nothing to keep the column narrow against, so let it use the width. */
  .cs-nav__row { min-height: 48px; }
}