/* REFERENCE ONLY — Onboarding chrome layout (PLAN.MD A0.15 / DESIGN.MD §5, §7.5, §7.8)
   Authored once here, then every onboarding/*.html page atom (§B) links this file
   verbatim alongside tokens.css + components.css. Do not edit per-page — a page
   atom that needs a chrome change reports the need; this file gets amended instead
   (§A.3, R22). Colour values are var(--token) only (R18); pixel dimensions below
   are the exact numbers PLAN.MD specifies for this shell and are not tokens. */

/* ==========================================================================
   1. App shell — SideNav (220px / 60px collapsed) + TopBar (60px)
   ========================================================================== */

.app-shell {
  --sidenav-w: 220px;
  --sidenav-w-collapsed: 60px;
  --topbar-h: 60px;
  min-height: 100vh;
}

.sidenav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  width: var(--sidenav-w);
  display: flex;
  flex-direction: column;
  background: var(--card-solid);
  border-right: 1px solid var(--border);
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.2s ease;
}

.sidenav.is-collapsed {
  width: var(--sidenav-w-collapsed);
}

.sidenav-brand {
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidenav-nav {
  flex: 1;
  padding: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.sidenav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.sidenav-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidenav-link:hover {
  background: var(--secondary);
  color: var(--foreground);
}

.sidenav-link.is-active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  /* text darkened toward --foreground to clear 4.5:1 on the tinted background
     (measured 4.01:1 light / 4.06:1 dark as pure --primary) without touching
     the --primary brand token itself; one mix ratio works in both themes since
     --foreground already flips to the correct dark/light extreme per theme. */
  color: color-mix(in srgb, var(--primary) 75%, var(--foreground) 25%);
}

.sidenav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 4px var(--ring);
}

.sidenav-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidenav-footer {
  border-top: 1px solid var(--border);
  padding: 0.625rem;
  flex-shrink: 0;
}

.sidenav-collapse-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.sidenav-collapse-btn:hover {
  background: var(--secondary);
  color: var(--foreground);
}

.sidenav-collapse-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

.sidenav-collapse-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sidenav.is-collapsed .sidenav-collapse-btn svg {
  transform: rotate(180deg);
}

/* Collapsed rail: icons only, centred. Each link/button also carries its
   own aria-label (snippet markup), so the accessible name already
   survives independent of this rule — but the label is visually hidden
   (clipped, not display:none) rather than removed from the accessibility
   tree, so the visible label and the announced name never fall out of
   sync. */
.sidenav.is-collapsed .sidenav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.sidenav.is-collapsed .sidenav-link,
.sidenav.is-collapsed .sidenav-collapse-btn {
  justify-content: center;
}

/* app-main sits to the right of the fixed sidenav; the sibling combinator
   keeps a single class toggle on .sidenav in charge of both widths. */
.app-main {
  margin-left: var(--sidenav-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.2s ease;
}

.sidenav.is-collapsed ~ .app-main {
  margin-left: var(--sidenav-w-collapsed);
}

/* ==========================================================================
   2. TopBar
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.25rem;
  background: var(--card-solid);
  border-bottom: 1px solid var(--border);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}

.topbar-menu-btn {
  all: unset;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  color: var(--foreground);
  cursor: pointer;
  flex-shrink: 0;
}

.topbar-menu-btn:hover {
  background: var(--secondary);
}

.topbar-menu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

.topbar-menu-btn svg {
  width: 20px;
  height: 20px;
}

.topbar-title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.theme-toggle-btn,
.icon-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  color: var(--foreground);
  cursor: pointer;
}

.theme-toggle-btn:hover,
.icon-btn:hover {
  background: var(--secondary);
}

.theme-toggle-btn:focus-visible,
.icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

/* User menu — CSS-only hover-card (DESIGN §7.8), reusing .hovercard /
   .hovercard-panel from components.css. */
.user-menu-trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  border-radius: 999px;
  cursor: pointer;
}

.user-menu-trigger:hover {
  background: var(--secondary);
}

.user-menu-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

.user-menu-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.user-menu-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--foreground);
  white-space: nowrap;
}

.user-menu-panel {
  right: 0;
  min-width: 12rem;
  padding: 0.375rem;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  font-size: var(--text-sm);
  color: var(--foreground);
  text-decoration: none;
}

.user-menu-item:hover {
  background: var(--secondary);
}

.user-menu-item svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

/* ==========================================================================
   3. Content wrapper — 1440px max-width
   ========================================================================== */

.content-wrap {
  flex: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* ==========================================================================
   4. Reference pattern — inline confirm-row (DESIGN §7.5 note: Onboarding
   never uses <dialog> for destructive actions — an inline "Are you sure?"
   row replaces the default row's actions instead). Markup only; a page
   atom wires the [hidden] swap in its own page-specific <script> block.
   ========================================================================== */

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-solid);
}

.list-row[hidden] {
  display: none;
}

.list-row + .list-row {
  margin-top: 0.625rem;
}

.list-row-label {
  font-size: var(--text-sm);
  color: var(--foreground);
}

.list-row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.list-row--confirm {
  border-color: color-mix(in srgb, var(--destructive) 35%, var(--border));
  background: color-mix(in srgb, var(--destructive) 6%, var(--card-solid));
}

.list-row--confirm .list-row-label {
  color: var(--destructive);
  font-weight: 500;
}

/* ==========================================================================
   5. Reference pattern — FilterBar (debounced search + optional filters)
   ========================================================================== */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.filterbar-search {
  position: relative;
  flex: 1 1 16rem;
  min-width: 12rem;
}

.filterbar-search svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.filterbar-search input {
  padding-left: 2.25rem;
}

.filterbar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.filterbar-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
}

.filterbar-field select {
  width: auto;
  min-width: 9rem;
}

/* ==========================================================================
   6. Responsive — sidenav becomes an icon-only rail below 768px so the
   demo stays fully usable on mobile without a second, off-canvas pattern.
   ========================================================================== */

@media (max-width: 768px) {
  .app-shell {
    --sidenav-w: var(--sidenav-w-collapsed);
  }

  .sidenav {
    width: var(--sidenav-w-collapsed) !important;
  }

  /* Same visually-hidden clip as the desktop collapsed rail (line ~148) —
     mobile forces the icon-only rail below this width regardless of the
     desktop collapse state, so the label must stay clipped here too. */
  .sidenav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
  }

  .sidenav-link {
    justify-content: center;
  }

  /* Collapse is meaningless once the viewport forces the icon rail below —
     drop the control entirely rather than leave an empty, non-functional
     footer button. */
  .sidenav-footer {
    display: none;
  }

  .app-main {
    margin-left: var(--sidenav-w-collapsed) !important;
  }

  .topbar-left .trnkey-wordmark__text {
    display: none;
  }

  .content-wrap {
    padding: 1rem;
  }

  .filterbar {
    flex-direction: column;
    align-items: stretch;
  }

  .filterbar-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filterbar-field select {
    width: 100%;
  }

  .list-row {
    flex-direction: column;
    align-items: stretch;
  }

  .list-row-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .user-menu-name {
    display: none;
  }
}