/*
 * Application shell: header, nav, main, footer, and the full-page overlays
 * (boot splash, page loader, toast region). Reusable component styling
 * (buttons, cards, dropdown panels, badges, ...) lives in components.css --
 * this file only lays out the classes in the shell's own contract.
 */

/* The page scrolls, not an inner region: browser find, anchor links and scroll
   restoration all keep working, and no content can end up clipped out of reach.
   The chrome is pinned instead, so it still behaves like the fixed bars in the
   reference. */
.app-shell {
  --header-h: 64px;
  --nav-h: 50px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
}

/* ---------- header ---------- */

.app-header {
  flex: none;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  height: var(--header-h, 64px);
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 70;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  color: var(--ink);
}

.app-brand:hover {
  color: var(--ink);
}

.app-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-accent);
  font: 800 15px/1 var(--font);
  color: #fff;
  letter-spacing: -.5px;
  flex: none;
}

.app-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-brand-copy strong {
  font: 800 15.5px/1 var(--font);
  color: var(--ink);
  letter-spacing: -.3px;
  white-space: nowrap;
}

.app-brand-copy small {
  font: 500 9.5px/1 var(--mono);
  color: var(--muted);
  letter-spacing: .06em;
  white-space: nowrap;
}

.app-search {
  flex: 1;
  max-width: 420px;
  margin-left: 16px;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--muted-4);
}

.app-search svg {
  position: absolute;
  left: 12px;
  pointer-events: none;
}

.app-search input {
  width: 100%;
  height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--sunken);
  padding: 0 12px 0 34px;
  font: 500 13px var(--font);
  color: var(--ink);
  outline: none;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}

.app-search input:hover {
  border-color: var(--accent-line-hover);
  background: var(--paper);
}

.app-search input:focus {
  border-color: var(--accent-line-strong);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.app-search input:disabled {
  cursor: not-allowed;
}

.app-header-spacer {
  flex: 1;
}

.app-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.app-status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  border-radius: var(--r);
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  flex: none;
}

.app-status-pill span:last-child {
  font: 600 11px/1 var(--mono);
  color: var(--ok-dark);
  letter-spacing: .04em;
  white-space: nowrap;
}

.app-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: oltPulse 2.4s ease-in-out infinite;
}

.app-icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.app-icon-btn:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.app-icon-btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-md);
  background: var(--sev-crit);
  color: #fff;
  font: 700 10px/17px var(--font);
  text-align: center;
  border: 2px solid var(--paper);
}

.app-header-divider {
  width: 1px;
  height: 28px;
  background: var(--line);
  margin: 0 4px;
}

.app-profile-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 8px;
  border-radius: var(--r);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}

.app-profile-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-line);
}

.app-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r);
  background: var(--accent-avatar);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 var(--font);
  color: var(--accent-dark);
  flex: none;
}

.app-avatar--lg {
  width: 38px;
  height: 38px;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--accent-avatar), var(--accent-bright));
  font: 800 13px/1 var(--font);
  color: var(--accent-deep);
}

.app-profile-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: nowrap;
}

.app-profile-copy strong {
  font: 700 12.5px/1 var(--font);
  color: var(--ink);
}

.app-profile-copy small {
  font: 500 10.5px/1 var(--font);
  color: var(--muted);
}

.app-profile-caret {
  color: var(--muted);
  transition: transform var(--t);
}

/* Open/closed is shell behaviour (ui/dropdown.js toggles .is-open on
   [data-dropdown]); components.css owns how an open panel looks. */
[data-dropdown-panel] {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  z-index: 80;
}

[data-dropdown] {
  position: relative;
}

[data-dropdown].is-open [data-dropdown-panel] {
  display: block;
  animation: oltDrop .16s ease-out;
}

/* dropdown panels that belong specifically to the header/nav shell -- their
   base look (.dropdown-panel, .dropdown-opt, ...) is components.css's job;
   these are only the width variants unique to each panel. */
.dropdown-panel--alarms { width: 322px; }
.dropdown-panel--tools { width: 230px; }
.dropdown-panel--profile { width: 252px; }

.dropdown-head-title {
  font: 800 12.5px/1 var(--font);
  color: var(--ink);
}

.dropdown-opt--alarm {
  align-items: flex-start;
  gap: 9px;
}

.app-alarm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 3px;
  flex: none;
}

.app-alarm-dot.is-critical { background: var(--sev-crit); }
.app-alarm-dot.is-warning { background: var(--sev-warn); }
.app-alarm-dot.is-info { background: var(--sev-info); }

.dropdown-opt-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dropdown-opt-title {
  font: 700 12px/1.25 var(--font);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-opt-meta {
  font: 500 10.5px/1.3 var(--mono);
  color: var(--muted);
}

.dropdown-opt-time {
  font: 500 10px/1 var(--mono);
  color: var(--muted-2);
  white-space: nowrap;
  align-self: flex-start;
  padding-top: 2px;
  margin-left: auto;
}

.dropdown-view-all {
  display: block;
  width: 100%;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: var(--r-md);
  font: 700 11.5px var(--font);
  color: var(--accent-dark);
}

.dropdown-view-all:hover {
  background: var(--accent-soft);
}

.dropdown-head-label {
  display: block;
  padding: 7px 10px 8px;
  font: 700 9.5px/1 var(--mono);
  color: var(--muted-2);
  letter-spacing: .1em;
}

.dropdown-profile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 11px;
}

.dropdown-profile-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dropdown-profile-copy strong {
  font: 800 13px/1 var(--font);
  color: var(--ink);
}

.dropdown-profile-copy small {
  font: 500 10.5px/1 var(--mono);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.dropdown-opt--danger {
  color: var(--crit);
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.app-nav-actions-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ---------- nav ---------- */

.app-nav {
  flex: none;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  height: var(--nav-h, 50px);
  position: sticky;
  top: var(--header-h, 64px);
  display: flex;
  align-items: stretch;
  gap: 16px;
  box-shadow: var(--sh-1);
  z-index: 60;
}

.app-nav-list {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-nav-list::-webkit-scrollbar {
  display: none;
}

.app-nav-item-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

.app-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  font: 700 12px var(--font);
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}

.app-nav-item:hover {
  color: var(--accent-ink);
  background: var(--accent-hover);
}

.app-nav-item.is-active {
  color: var(--accent-ink);
}

.app-nav-item.is-disabled {
  color: var(--muted-3);
  cursor: not-allowed;
}

.app-nav-caret {
  transition: transform var(--t-fast);
}

.app-nav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font: 700 10px/18px var(--font);
  text-align: center;
}

.app-nav-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2.5px;
  border-radius: var(--r-pill) var(--r-pill) 0 0;
  background: linear-gradient(90deg, var(--accent-lift), var(--accent));
}

.app-nav-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- main ---------- */

.app-main {
  flex: 1;
  padding: 20px 24px 28px;
  min-width: 0;
}

.app-main--guest {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.page-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.page-head-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-xl);
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: var(--sh-2);
  color: var(--accent);
}

.page-head-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.page-head-copy h1 {
  font: 800 21px/1 var(--font);
  color: var(--ink);
  letter-spacing: -.5px;
  white-space: nowrap;
}

.page-head-copy span {
  font: 500 12px/1 var(--font);
  color: var(--muted);
  white-space: nowrap;
}

.breadcrumb {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  flex: none;
  box-shadow: var(--sh-1);
}

.breadcrumb a {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 12px/1 var(--font);
  color: var(--ink-3);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb-current {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 800 12px/1 var(--font);
  color: var(--ink);
}

.breadcrumb-sep {
  transform: rotate(-90deg);
  color: var(--muted-3);
}

/* ---------- footer ---------- */

.app-foot {
  flex: none;
  background: var(--paper);
  border-top: 1px solid var(--line);
  height: 38px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: 0 -1px 3px rgba(15, 23, 42, .04);
  position: relative;
  z-index: 60;
}

.app-foot::-webkit-scrollbar {
  display: none;
}

.app-foot-item {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font: 500 11px/1 var(--mono);
  color: var(--ink-3);
  white-space: nowrap;
}

.app-foot-item strong.is-crit {
  color: var(--sev-crit);
  font-weight: 700;
}

.app-foot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sev-info);
  flex: none;
}

.app-foot-dot.is-degraded {
  background: var(--sev-warn);
}

.app-foot-sep {
  width: 1px;
  height: 16px;
  background: var(--line);
  flex: none;
}

.app-foot-spacer {
  flex: 1;
}

.app-foot-clock {
  font: 500 11px/1 var(--mono);
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- overlays ---------- */

.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity var(--t-slow), visibility var(--t-slow);
}

.boot-splash.is-done,
.boot-splash.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none !important;
}

.boot-splash-rings {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boot-splash-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

.boot-splash-ring--track {
  border-color: var(--accent-soft);
}

.boot-splash-ring--spin {
  border-top-color: var(--accent);
  border-right-color: var(--accent-lift);
  animation: oltSpin2 1s linear infinite;
}

.boot-splash-ring--spin-rev {
  inset: 12px;
  border-bottom-color: var(--accent-line);
  animation: oltSpin2 1.6s linear reverse infinite;
}

.boot-splash-mark {
  width: 52px;
  height: 52px;
  border-radius: var(--r-3xl);
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-accent-lift);
  font: 800 19px/1 var(--font);
  color: #fff;
  letter-spacing: -.6px;
}

.boot-splash-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.boot-splash-title {
  font: 800 18px/1 var(--font);
  color: var(--ink);
  letter-spacing: -.5px;
}

.boot-splash-sub {
  font: 500 11px/1 var(--mono);
  color: var(--muted);
  letter-spacing: .1em;
}

.boot-splash-status {
  font: 500 11.5px/1 var(--font);
  color: var(--muted-2);
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(241, 245, 249, .72);
  backdrop-filter: blur(2px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  animation: oltFade .18s ease-out;
}

.page-loader.is-active {
  display: flex;
}

.page-loader-spinner {
  position: relative;
  width: 54px;
  height: 54px;
}

.page-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.page-loader-ring--track {
  border-color: var(--accent-line);
}

.page-loader-ring--spin {
  border-top-color: var(--accent);
  border-right-color: var(--accent-lift);
  animation: oltSpin2 .8s linear infinite;
}

.page-loader-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.page-loader-title {
  font: 800 13px/1 var(--font);
  color: var(--ink);
}

.page-loader-sub {
  font: 500 11px/1 var(--mono);
  color: var(--muted);
}

.toast-region {
  position: fixed;
  top: 78px;
  right: 20px;
  z-index: 240;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 308px;
  pointer-events: none;
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
}

@media (max-width: 960px) {
  .app-search { display: none; }
  .breadcrumb { display: none; }
}