/* pages.css — app shell layout (sidebar, topbar, content), the login page,
   and shared page-level grid helpers. Page agents append their own section
   at the end of this file, opened with a comment "==== page: <name> ====". */

/* ---- app shell ---- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  min-height: 100vh;
}

.sidebar {
  grid-area: sidebar;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar-logo:hover {
  text-decoration: none;
}

.logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--accent-fill);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-text strong {
  font-size: var(--fs-14);
  font-weight: 650;
}

.logo-text span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav {
  padding: var(--sp-3) var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px var(--sp-3);
  border-radius: var(--radius-control);
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
  position: relative;
}

.nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--text);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.nav-item.active .icon {
  color: var(--accent);
}

.nav-section {
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  font-size: 11px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-user {
  border-top: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: var(--fs-12);
  color: var(--muted);
  text-transform: uppercase;
  flex-shrink: 0;
}

.sidebar-user-text {
  min-width: 0;
  line-height: 1.2;
  flex: 1 1 auto;
}

.sidebar-user-text strong {
  display: block;
  font-size: var(--fs-14);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-text span {
  font-size: var(--fs-12);
  color: var(--muted);
}

/* topbar */
.topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 var(--gutter);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.topbar-title {
  font-size: var(--fs-16);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.sidebar-toggle {
  display: none;
}

.tenant-switcher {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.tenant-switcher .select {
  min-width: 160px;
  max-width: 260px;
}

.tenant-switcher label {
  color: var(--muted);
  font-size: var(--fs-12);
}

.health-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: var(--fs-12);
  text-decoration: none;
}

.health-indicator:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.health-indicator .status-dot {
  width: 10px;
  height: 10px;
}

.menu-trigger.user {
  gap: var(--sp-2);
  padding-left: 6px;
}

.menu-trigger.user .avatar {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

/* content */
.content {
  grid-area: content;
  min-width: 0;
  padding: var(--gutter);
}

.outlet {
  max-width: var(--content-max);
  margin: 0 auto;
  min-width: 0;
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
  animation: fade-in 120ms ease;
}

.page > .page-header h1 {
  font-size: var(--fs-26);
}

/* two-column detail layout shared by pages */
.split {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
}

.split.even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split.aside-left {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

@media (max-width: 1100px) {
  .split,
  .split.even,
  .split.aside-left {
    grid-template-columns: 1fr;
  }
}

/* narrow screens: collapsible sidebar */
@media (max-width: 1023px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "content";
  }

  /* Closed drawer: visibility:hidden (not just the off-screen transform) takes
     the logo and nav links out of the tab order and the accessibility tree, so
     keyboard users don't land on nine invisible stops. The visibility change is
     delayed until the slide-out finishes; opening flips it immediately. */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    z-index: 40;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 180ms ease, visibility 0s linear 180ms;
    box-shadow: none;
  }

  .app-shell.sidebar-open .sidebar {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
    box-shadow: var(--shadow-pop);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 30;
    display: none;
  }

  .app-shell.sidebar-open .sidebar-backdrop {
    display: block;
  }

  .sidebar-toggle {
    display: inline-flex;
    flex-shrink: 0;
  }

  .topbar {
    padding: 0 var(--sp-4);
  }

  .content {
    padding: var(--sp-4);
  }

  .tenant-switcher label {
    display: none;
  }

  /* Hide the health text visually but keep it as the link's accessible name
     (the dot itself is aria-hidden), so status is never conveyed by colour
     alone to assistive tech. */
  .health-indicator span.label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* With the text hidden, give sighted users a shape cue in addition to the
     colour: good = filled circle, warning = diamond, critical = hollow ring. */
  .health-indicator .status-dot.warning {
    border-radius: 2px;
    transform: rotate(45deg) scale(0.9);
  }

  .health-indicator .status-dot.critical {
    background: transparent;
    box-shadow: inset 0 0 0 3px var(--critical);
  }
}

@media (max-width: 600px) {
  /* Phone topbar: the tenant switcher is the only flexible item and absorbs
     the remaining width; everything else keeps its natural size. */
  .topbar-left {
    flex: 0 0 auto;
  }

  .topbar-actions {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  .topbar-actions > :not(.tenant-switcher) {
    flex-shrink: 0;
  }

  .tenant-switcher {
    flex: 1 1 0;
    min-width: 0;
  }

  .tenant-switcher .select {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  /* Username stays in the button's accessible name; only the visual label goes. */
  .menu-trigger.user .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .menu-trigger.user {
    padding-right: 6px;
  }

  /* The page's own <h1> carries the title on phones. */
  .topbar-title {
    display: none;
  }
}

/* ---- login page ---- */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background:
    radial-gradient(60% 50% at 50% -10%, var(--accent-soft), transparent 70%),
    var(--ground);
}

.login-card {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.login-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.login-logo .logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 16px;
}

.login-title {
  font-size: var(--fs-20);
  font-weight: 650;
}

.login-subtitle {
  color: var(--muted);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.login-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  color: var(--faint);
  font-size: var(--fs-12);
}

/* boot screen shown before the session check resolves */
.boot {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--muted);
}

/* placeholder pages from the shell — page agents replace these */
.placeholder-page .empty-state {
  padding: var(--sp-6);
}

/* ==== page sections appended by page agents start below this line ==== */