/* ============================================================
 * layout.css — application chrome
 *   .topbar  — fixed 56px global header (brand · search · user)
 *   .nav     — fixed 240px left sidebar
 *   .content — main scrollable region
 *   .page    — padded page container
 *   .page-head, .toolbar — common page anatomy
 * ============================================================ */

/* ---------- TOP BAR ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--top-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: grid;
  /* 3 cols: aside (sidebar-aligned, holds the brand logo) | brand (auto,
     wordmark + tagline) | flexible right cluster (1fr — flex children pin
     to the right edge via justify-content on .top-right). */
  grid-template-columns: var(--nav-w-current) auto 1fr;
  align-items: center;
  z-index: var(--z-nav);
  transition: grid-template-columns var(--dur-2) var(--ease-std);
}

/* Aside slot — sits over the sidebar column and holds the brand logo so the
   logo visually anchors the sidebar. The right border continues the sidebar's
   right edge into the topbar. Empty (no logo configured) → falls back to a
   plain bordered column, matching the previous spacer behavior. */
.topbar-aside {
  height: 100%;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background var(--dur-1);
}
.topbar-aside:hover { background: rgba(15, 23, 42, 0.04); }

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  height: 100%;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  min-width: 0;
}
.brand-logo {                   /* slot — receives <img> when logo configured, else <.brand-monogram> */
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-logo:empty { display: none; }

/* Monogram fallback — first letter of brand name in a small rounded square,
   tinted with the primary brand color. Renders when no logo is configured
   so the topbar-aside slot always has a visible home anchor. */
.brand-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: var(--primary-50);
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Stacked text: name on top, tagline below. Density-tuned so the two-line
   block sits inside the 56px topbar without crowding. */
.brand-text {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.brand .wordmark {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-tagline {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  /* Operator picks via Theme Studio. Empty default falls through to
     --text-3 which is theme-aware (works in light AND dark). */
  color: var(--brand-tagline-color, var(--text-3));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-1);
}
/* When the tagline is empty, the wordmark visually re-centers in the
   topbar (no awkward top-bias from the now-orphaned 2-line stack). */
.brand-tagline:empty { display: none; }
.brand-text:has(.brand-tagline:empty) { gap: 0; }

/* When sidebar is collapsed, drop the tagline so the wordmark stays
   readable in the narrower main column. */
.is-nav-collapsed .brand-tagline { display: none; }
.is-nav-collapsed .brand { padding: 0 var(--space-3); gap: var(--space-2); }

.top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;       /* pin search / bell / profile to the right edge */
  gap: 6px;
  padding: 0 var(--space-3) 0 var(--space-2);
}

/* partner-company chip — sits left of the search box. Hidden via [hidden]
   when the user has no company link (super_users without an org, etc.). */
.topbar-co {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px 0 4px;
  margin-right: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: 500;
  max-width: 240px;
}
.topbar-co-mark {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.topbar-co-mark.has-logo { padding: 0; }
.topbar-co-mark img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.topbar-co-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* keep the chip out of the way when the search is wide / window is narrow */
@media (max-width: 1024px) {
  .topbar-co-name { display: none; }
  .topbar-co { padding: 0 4px; }
}

/* topbar search */
.search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 280px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-3);
  transition: background var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-1);
}
.search:focus-within {
  background: var(--bg);
  border-color: var(--primary);
  box-shadow: var(--ring-focus-soft);
  color: var(--text);
}
.search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--fs-base);
}
.search input::placeholder { color: var(--text-4); }

.kbd {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
}

/* topbar user chip */
.user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 6px 0 4px;
  margin-left: var(--space-1);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
}
.user:hover { background: var(--bg-alt); border-color: var(--border); }
.user .chev { color: var(--text-3); }

/* ---------- LEFT NAV ---------- */
.nav {
  position: fixed;
  top: var(--top-h);
  bottom: 0;
  left: 0;
  width: var(--nav-w-current);
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  padding: var(--space-2) var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--dur-2) var(--ease-std);
}

.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-spacer { flex: 1; }

.nav-label {
  padding: 14px 10px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- COLLAPSIBLE SECTION HEADERS ----------
 * `.nav-group.is-collapsible` wraps a labeled group whose label is a
 * <button> the user can click to fold/unfold the items beneath. The
 * chevron rotates 90° when collapsed. Items live in `.nav-group-items`
 * so we can hide the whole block with a single rule.
 * --------------------------------------------------- */
.nav-group.is-collapsible > .nav-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: background var(--dur-1), color var(--dur-1);
}
.nav-group.is-collapsible > .nav-label:hover { color: var(--text-2); background: rgba(15, 23, 42, 0.04); }
.nav-label-chev {
  opacity: 0.6;
  transition: transform var(--dur-1);
}
.nav-group.is-collapsible.is-collapsed > .nav-label .nav-label-chev {
  transform: rotate(-90deg);
}
.nav-group.is-collapsible.is-collapsed > .nav-group-items { display: none; }

/* Collapsed sidebar mode — section headers (and their toggles) hide
 * entirely; the items underneath always show as icons regardless of
 * the per-section collapsed state. */
.is-nav-collapsed .nav-group.is-collapsible > .nav-label { display: none; }
.is-nav-collapsed .nav-group.is-collapsible.is-collapsed > .nav-group-items { display: block; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  height: 30px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}
.nav-item:hover { background: rgba(15, 23, 42, 0.04); color: var(--text); }
.nav-item .nav-icon { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.85; }
.nav-item .nav-text { flex: 1; }

.nav-item .nav-badge {
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nav-item.is-active {
  background: var(--primary-50);
  color: var(--primary);
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px; bottom: 6px;
  width: 2px;
  background: var(--primary);
  border-radius: 2px;
}
.nav-item.is-active .nav-icon { opacity: 1; }

/* ---------- COLLAPSED NAV ----------
 * Toggled by adding `is-nav-collapsed` to <html>. Width drops to 56px,
 * labels and badges hide, items become squares. Tooltips (data-tip)
 * surface labels on hover.
 * ---------------------------------- */
.is-nav-collapsed { --nav-w-current: var(--nav-w-collapsed); }
.is-nav-collapsed .nav-item .nav-text,
.is-nav-collapsed .nav-item .nav-badge,
.is-nav-collapsed .nav-label { display: none; }
.is-nav-collapsed .nav-item {
  justify-content: center;
  padding: 0;
  width: 36px;
  height: 36px;
  margin: 0 auto;
}
.is-nav-collapsed .nav-item.is-active::before {
  left: -4px;
  top: 8px; bottom: 8px;
}

/* nav footer — version chip (left) + collapse toggle button (right) */
.nav-foot {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.is-nav-collapsed .nav-foot { justify-content: center; }
/* nav-version is now a clickable link to the Release notes page. The icon
 * is the only visible affordance when the sidebar is collapsed; the
 * version text shows in the expanded state. */
/* nav-version aligns with .nav-item: same 10px left padding so the icon
 * sits in the same column as menu icons above, same 10px gap between
 * icon and text, same 16px icon. The font is monospaced + smaller to
 * keep the version chip distinct from real navigation. */
.nav-version {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-4);
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  user-select: text;
  text-decoration: none;
  transition: color var(--dur-1), background var(--dur-1);
}
.nav-version:hover {
  color: var(--primary);
  background: var(--primary-50);
}
.nav-version-icon { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.85; }
.nav-version:hover .nav-version-icon { opacity: 1; }
.is-nav-collapsed .nav-version-text { display: none; }
.is-nav-collapsed .nav-version { padding: 6px; }
.nav-collapse-btn {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-1), color var(--dur-1), transform var(--dur-2);
  flex-shrink: 0;
}
.nav-collapse-btn:hover { background: var(--bg); border-color: var(--border); color: var(--text); }
.is-nav-collapsed .nav-collapse-btn { transform: rotate(180deg); }

/* ---------- CONTENT REGION ---------- */
.content {
  margin-top: var(--top-h);
  margin-left: var(--nav-w-current);
  background: var(--bg-alt);
  min-height: calc(100vh - var(--top-h));
  transition: margin-left var(--dur-2) var(--ease-std);
}

.page {
  max-width: var(--page-max);
  padding: var(--page-pad-y) var(--page-pad-x) var(--space-10);
}
/* Width modifier — never inline `style="max-width:…"` on .page; use this.
   .page is fluid by default (caps at 2000px); --narrow is for forms and nav hubs. */
.page--narrow { max-width: var(--page-max-narrow); }

/* ---------- PAGE HEAD ---------- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.page-head-left { min-width: 0; }
/* Right slot for action buttons. Wraps to a new row instead of crushing
   the title when buttons don't fit. Buttons inside also wrap if even
   the full row can't hold them. */
.page-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: auto;
}
.page-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.page-title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.page-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.page-desc {
  margin: 6px 0 0;
  font-size: var(--fs-base);
  color: var(--text-2);
}

/* breadcrumb sits above page-head when present */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-3);
}
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { color: var(--text-4); }
.breadcrumb .current { color: var(--text); font-weight: 500; }

/* ---------- TABS ---------- */
.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.tab {
  height: 34px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-1);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.tab .tab-count {
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tab.is-active .tab-count {
  background: var(--primary-50);
  border-color: var(--primary-100);
  color: var(--primary);
}

/* ---------- TOOLBAR ---------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.toolbar-spacer { flex: 1; }

/* ---------- SECTION (general grouping inside a page) ---------- */
.section { margin-bottom: var(--space-8); }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.section-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.section-sub {
  margin-top: 2px;
  font-size: var(--fs-md);
  color: var(--text-3);
}

/* ---------- SECTION CARD ---------- */
/* Framed, padded card for grouping related fields/content. Stack
   multiple .section-card siblings on a form-heavy page to break it
   into scannable chunks separated by visible gutters (instead of one
   large panel with internal divider lines). The header pair —
   .section-title and optional .section-sub — sits at the top of each
   card and adopts card-internal margins via the scoped rules below
   (the bare .section-title above stays unopinionated for non-card use). */
.section-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.section-card:last-child { margin-bottom: 0; }
.section-card .section-title { margin: 0 0 14px; }
.section-card .section-sub {
  margin: -10px 0 14px;
  font-size: 11.5px;
  color: var(--text-3);
}