/*
 * 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) — live when the dropdown lands. */
.topbar__tenant {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.topbar__tenant:hover {
  background: var(--hover-overlay);
  border-color: var(--border-default);
}

/* Static tenant label — non-interactive placeholder until a real
   tenant-switch dropdown is wired. Strips the button affordances
   (cursor, hover, caret) so it doesn't read as clickable. */
.topbar__tenant--static {
  cursor: default;
}
.topbar__tenant--static:hover {
  background: transparent;
  border-color: var(--border-subtle);
}
.topbar__tenant-caret {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 2;
}
.topbar__sep {
  color: var(--text-tertiary);
  font-size: 18px;
  margin: 0 4px;
}

/* 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;
  }
}