/*
 * Application shell: sidebar + topbar + main content grid.
 * Source: UI-001 §5 (Layout System).
 */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width-expanded) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--transition-slow);
}

.shell--collapsed {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* Sidebar */
.sidebar {
  grid-row: 1 / -1;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--topbar-height);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar__logo-mark {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--accent-primary);
}

/* Animated alpha logo — inline SVG children rendered by
   partials/sidebar.html. Kept inside the sidebar so the styles
   cascade only where the mark exists. */
.sidebar__logo-mark .qhq-logo__shield {
  filter: drop-shadow(0 0 2px rgba(119, 186, 100, 0.35));
}

/* Orbit rotation center is baked into the animateTransform's
   `from`/`to` values (rotate cx cy) so no CSS transform-origin
   is needed. The old 60px/58px value was a leftover from a
   previous version where the ellipse center was 60,58 and is
   now off-by-three from the current (60,55) ellipse center. */

.sidebar__logo-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.shell--collapsed .sidebar__logo-text {
  opacity: 0;
  pointer-events: none;
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.sidebar__group-label {
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.shell--collapsed .sidebar__group-label {
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.sidebar__item:hover {
  background: var(--hover-overlay);
  color: var(--text-primary);
}

.sidebar__item--active {
  background: var(--accent-primary-muted);
  color: var(--text-primary);
  border-left-color: var(--accent-primary);
}

.sidebar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar__label {
  transition: opacity var(--transition-fast);
}

.shell--collapsed .sidebar__label {
  opacity: 0;
  pointer-events: none;
}

.sidebar__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-3) var(--space-4);
}

.sidebar__badge {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--status-critical);
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  flex-shrink: 0;
}
.shell--collapsed .sidebar__badge {
  position: absolute;
  top: 4px;
  right: 4px;
}

.sidebar__spacer {
  flex: 1;
}

/* Parent rows (expandable groups). Visually identical to a leaf
   .sidebar__item but with an extra chevron on the right and an
   open-state rotation. */
.sidebar__parent {
  width: 100%;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.sidebar__chev {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  transition: transform 120ms ease;
}
.sidebar__parent--open .sidebar__chev { transform: rotate(90deg); }

.sidebar__sub {
  display: none;
  padding: 4px 0 8px var(--space-4);
  border-left: 1px dashed var(--border-subtle);
  margin-left: calc(var(--space-4) + 10px);
}
.sidebar__parent--open + .sidebar__sub { display: block; }

.sidebar__subitem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-4);
  color: var(--text-secondary);
  font-size: 12px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background-color var(--transition-fast);
}
.sidebar__subitem:hover {
  color: var(--text-primary);
  background: var(--hover-overlay);
}
.sidebar__subitem--active {
  color: var(--accent-primary);
  border-left-color: var(--accent-primary);
}
.sidebar__sub-arrow {
  font-size: 11px;
  opacity: 0.5;
  flex-shrink: 0;
}
.sidebar__subitem:hover .sidebar__sub-arrow,
.sidebar__subitem--active .sidebar__sub-arrow {
  opacity: 1;
}

/* Topbar */
.topbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}

.topbar__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 20px;
  color: var(--text-secondary);
}

.topbar__breadcrumb a {
  color: var(--text-secondary);
}

.topbar__breadcrumb a:hover {
  color: var(--text-primary);
}

.topbar__breadcrumb-sep {
  color: var(--text-tertiary);
  font-size: 15px;
}

.topbar__breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
}

.topbar__spacer {
  flex: 1;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Tenant switcher (T0/T1 only). Restyled 2026-05-25 to match the
   canonical form-field__select look (dark bg, light text, 13px,
   rounded border) so the topbar stops looking like a stray native
   browser <select> on the dark theme. The wrapper holds a small
   uppercase "Tenant:" prefix label so the control reads as labelled
   at a glance without dominating the topbar height. */
.topbar__tenant-form {
  display: inline-flex;
  align-items: center;
}
.topbar__tenant {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  background: transparent;
  border: none;
  cursor: default;
}
.topbar__tenant:hover {
  background: transparent;
}
.topbar__tenant-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.topbar__tenant-select {
  background-color: var(--bg-subtle, #0a1628);
  border: 1px solid var(--border-default, #1e3a5f);
  color: var(--text-primary, #e2e8f0);
  padding: 6px 28px 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  /* Strip native select chrome and supply our own chevron so the
     control looks identical across browsers and matches the rest of
     the dark theme. The chevron is an inline SVG data-URI in the
     site's text-secondary colour. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  max-width: 280px;
}
.topbar__tenant-select:hover {
  border-color: var(--accent-primary, #77BA64);
}
.topbar__tenant-select:focus {
  outline: none;
  border-color: var(--accent-primary, #77BA64);
  box-shadow: 0 0 0 2px rgba(119, 186, 100, 0.15);
}
.topbar__tenant-select option {
  background-color: var(--bg-surface, #122035);
  color: var(--text-primary, #e2e8f0);
}

/* Static tenant label — non-interactive placeholder used when the
   user has no tenant-switch permission (single-tenant view). Keeps
   the same dark pill look as the active select so the topbar height
   doesn't jump. */
.topbar__tenant--static {
  padding: 6px 10px;
  background-color: var(--bg-subtle, #0a1628);
  border: 1px solid var(--border-default, #1e3a5f);
  border-radius: 6px;
  color: var(--text-primary, #e2e8f0);
  font-size: 13px;
  font-weight: 500;
  cursor: default;
}
.topbar__tenant--static:hover {
  background-color: var(--bg-subtle, #0a1628);
  border-color: var(--border-default, #1e3a5f);
}
.topbar__tenant-caret {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 2;
}
.topbar__sep {
  color: var(--text-tertiary);
  font-size: 18px;
  margin: 0 4px;
}

/* Global org/site scope selector (fleet redesign, 2026-08-08). Two
   labelled dark pills that sit left of the topbar actions and scope every
   page to the picked organization / site. Mirrors the tenant-switcher
   look so the topbar stays visually consistent. The Site select greys out
   (native :disabled) while "All Organizations" is selected. */
.topbar__context {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.topbar__context-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.topbar__context-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.topbar__context-select {
  background-color: var(--bg-subtle, #0a1628);
  border: 1px solid var(--border-default, #1e3a5f);
  color: var(--text-primary, #e2e8f0);
  padding: 6px 28px 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  max-width: 220px;
}
.topbar__context-select:hover {
  border-color: var(--accent-primary, #77BA64);
}
.topbar__context-select:focus {
  outline: none;
  border-color: var(--accent-primary, #77BA64);
  box-shadow: 0 0 0 2px rgba(119, 186, 100, 0.15);
}
.topbar__context-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}
.topbar__context-select:disabled:hover {
  border-color: var(--border-default, #1e3a5f);
}
.topbar__context-select option {
  background-color: var(--bg-surface, #122035);
  color: var(--text-primary, #e2e8f0);
}

/* Action buttons in the topbar (search, bell) */
.topbar__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.topbar__action:hover {
  background: var(--hover-overlay);
  color: var(--text-primary);
}
.topbar__action svg {
  width: 26px;
  height: 26px;
}

/* Disabled variant — rendered for the Cmd+K placeholder until the
   search palette lands. No hover effect, cursor:not-allowed, and
   the browser skips click events because of the :disabled pseudo. */
.topbar__action--disabled,
.topbar__action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.topbar__action--disabled:hover,
.topbar__action:disabled:hover {
  background: transparent;
  color: var(--text-secondary);
}

.topbar__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--status-critical);
  color: var(--text-inverse);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* User avatar + dropdown */
.topbar__user {
  position: relative;
  margin-left: var(--space-2);
}
.topbar__user-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-primary-muted);
  border: 1px solid var(--border-default);
  color: var(--accent-primary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
.topbar__user-btn:hover {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

.topbar__user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  z-index: 50;
}

.topbar__user-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.topbar__user-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.topbar__user-role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
  margin-top: 2px;
}
.topbar__user-email {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  font-family: var(--font-mono);
}

.topbar__user-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.topbar__user-item:hover {
  background: var(--hover-overlay);
  color: var(--text-primary);
}
.topbar__user-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.topbar__user-item--danger {
  color: var(--status-critical);
}
.topbar__user-item--danger:hover {
  background: var(--status-critical-muted);
  color: var(--status-critical);
}
.topbar__user-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-2) 0;
}

/* shell__content wraps the platform-health banner + main so that the
   .shell grid only sees three direct children (sidebar, topbar, this).
   Without the wrapper the banner occupied col-2/row-2 and <main>
   spilled into col-1/row-3 underneath the sidebar. */
.shell__content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Main content */
.main {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.page-layout {
  display: grid;
  gap: var(--panel-gap);
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* --full unpins the shared max-width cap so the dashboard and any
   other true full-bleed page uses the entire main-area width. The
   ancestor layouts still center content for narrower page types. */
.page-layout--full {
  grid-template-columns: 1fr;
  max-width: none;
}

.page-layout--split {
  grid-template-columns: 1fr 1fr;
}

.page-layout--master-detail {
  grid-template-columns: 1fr 400px;
}

.page-layout--dashboard {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

@media (max-width: 1024px) {
  .page-layout--master-detail,
  .page-layout--split {
    grid-template-columns: 1fr;
  }
}