/**
 * shell.css — Navigation chrome, layout grid, page structure
 * Depends on: tokens.css
 */

/* ─── App shell ─────────────────────────────────────────────────────────── */
.app { display: flex; flex-direction: column; min-height: 100dvh; }

/* ─── Top navigation bar ─────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--surf);
  border-bottom: 1px solid var(--brd);
  padding: var(--sp3) var(--sp6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp4);
  box-shadow: var(--shsm);
  height: 57px;
}

.brand { display: flex; align-items: center; gap: var(--sp3); }
.brand h1 {
  font-size: var(--text-lg); font-weight: 800; letter-spacing: -.02em;
}
.brand span { color: var(--pri); }

.topbar-r { display: flex; align-items: center; gap: var(--sp3); }

/* Nav link pill (role badge in topbar) */
.nav-role {
  font-size: var(--text-xs);
  background: var(--sOff); color: var(--txtM);
  padding: var(--sp1) var(--sp3);
  border-radius: var(--rfull);
  font-weight: 600;
  border: 1px solid var(--brd);
}
.nav-role[data-role="admin"]       { background: var(--blueHi); color: var(--blue); }
.nav-role[data-role="owner"]       { background: var(--goldHi); color: var(--gold); }
.nav-role[data-role="reviewer"]    { background: var(--purpHi); color: var(--purp); }
.nav-role[data-role="practitioner"]{ background: var(--okHi);   color: var(--ok);   }

/* Icon buttons in topbar */
.btic {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rmd); color: var(--txtM);
}
.btic:hover { background: var(--sOff); color: var(--txt); }

/* Language toggle */
.lang-btn { font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; min-width: 36px; }

/* Pending badge on nav */
.nav-pending {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: 700;
  background: var(--warnHi); color: var(--warn);
  padding: 2px 8px; border-radius: var(--rfull);
  cursor: pointer; border: none;
  text-decoration: none;
}
.nav-pending:hover { background: color-mix(in oklab, var(--warnHi) 80%, var(--warn) 20%); }

/* Sign-out link */
.nav-signout {
  font-size: var(--text-sm); font-weight: 600; color: var(--txtM);
  background: none; border: none; cursor: pointer; padding: var(--sp1) var(--sp2);
  border-radius: var(--rsm);
}
.nav-signout:hover { color: var(--err); background: var(--errHi); }

/* ─── Status dot indicator ───────────────────────────────────────────────── */
.status-dot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-weight: 600;
}
.status-dot::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.ok::before     { background: var(--ok); box-shadow: 0 0 0 2px var(--okHi); }
.status-dot.warn::before   { background: var(--warn); box-shadow: 0 0 0 2px var(--warnHi); }
.status-dot.unknown::before{ background: var(--txtF); box-shadow: 0 0 0 2px var(--sOff2); }

/* ─── Body grid (sidebar + main) ────────────────────────────────────────── */
.body {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--surf);
  border-right: 1px solid var(--brd);
  padding: var(--sp6) 0;
  position: sticky;
  top: 57px;
  height: calc(100dvh - 57px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}

.snl {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txtF);
  padding: var(--sp4) var(--sp5) var(--sp2);
}

.sni {
  display: flex; align-items: center; gap: var(--sp3);
  padding: var(--sp2) var(--sp5);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--txtM); cursor: pointer;
  border: none; background: none; text-align: left; width: 100%;
  text-decoration: none;
  border-radius: 0;
}
.sni:hover { background: var(--sOff); color: var(--txt); }
.sni.active { background: var(--priHi); color: var(--pri); font-weight: 600; }
.sni[data-admin-only] { display: none; }
.sni[data-admin-only].visible { display: flex; }

/* ─── Main content area ──────────────────────────────────────────────────── */
.main { padding: var(--sp8); display: flex; flex-direction: column; gap: var(--sp8); }

/* ─── Page title ─────────────────────────────────────────────────────────── */
.pgt { font-size: var(--text-xl); font-weight: 800; letter-spacing: -.02em; }
.pgt small {
  font-size: var(--text-sm); font-weight: 400;
  color: var(--txtM); display: block; margin-top: var(--sp1);
}

/* ─── Page sections (shown/hidden by router) ─────────────────────────────── */
.pg { display: none; flex-direction: column; gap: var(--sp8); }
.pg.active { display: flex; }

/* ─── Login page layout ──────────────────────────────────────────────────── */
.login-shell {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: var(--sp6);
}

.login-card {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: var(--rxl);
  padding: var(--sp10) var(--sp8);
  width: 100%; max-width: 420px;
  box-shadow: var(--shlg);
  display: flex; flex-direction: column; gap: var(--sp6);
  animation: fadeUp .22s cubic-bezier(.16, 1, .3, 1);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-brand { display: flex; align-items: center; gap: var(--sp3); margin-bottom: var(--sp2); }
.login-brand h1 { font-size: var(--text-lg); font-weight: 800; letter-spacing: -.02em; }
.login-brand span { color: var(--pri); }

/* ─── Session page layout (dashboard iframe host) ────────────────────────── */
.session-shell {
  display: flex; flex-direction: column;
  height: calc(100dvh - 57px);      /* subtract topbar */
  overflow: hidden;                  /* prevent iframe from bleeding outside bounds */
}

.session-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 0;                    /* allow children to shrink */
}

.dashboard-frame-wrap {
  position: relative;
  overflow: hidden;
}

.dashboard-frame {
  width: 100%; height: 100%;
  border: none;
  display: block;
}

.ai-panel {
  background: var(--surf);
  border-left: 1px solid var(--brd);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.ai-panel-header {
  padding: var(--sp4) var(--sp5);
  border-bottom: 1px solid var(--brd);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}

.ai-panel-title {
  font-size: var(--text-sm); font-weight: 700;
  display: flex; align-items: center; gap: var(--sp2);
}

.ai-panel-body {
  flex: 1; overflow-y: auto;
  padding: var(--sp4) var(--sp5);
  display: flex; flex-direction: column; gap: var(--sp4);
}

.ai-panel-controls {
  padding: var(--sp4) var(--sp5);
  border-top: 1px solid var(--brd);
  display: flex; flex-direction: column; gap: var(--sp3);
  flex-shrink: 0;
  background: var(--surf2);
}

/* ─── System banners (degraded AI, persistence alert) ────────────────────── */
.system-banner {
  padding: var(--sp3) var(--sp5);
  display: flex; align-items: flex-start; gap: var(--sp3);
  font-size: var(--text-sm);
  border-bottom: 1px solid transparent;
}
.system-banner.warn {
  background: var(--warnHi); color: var(--warn);
  border-color: color-mix(in oklab, var(--warn) 25%, transparent);
}
.system-banner.err {
  background: var(--errHi); color: var(--err);
  border-color: color-mix(in oklab, var(--err) 25%, transparent);
}
.system-banner p { font-size: var(--text-sm); color: inherit; max-width: none; margin: 0; }

/* ─── Mobile nav bar ─────────────────────────────────────────────────────── */
.mnav {
  display: none;
  background: var(--surf); border-top: 1px solid var(--brd);
  padding: var(--sp2) var(--sp4);
  overflow-x: auto; gap: var(--sp1);
}

.mtab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp2) var(--sp3);
  border-radius: var(--rmd); font-size: 10px; font-weight: 500;
  color: var(--txtM); white-space: nowrap; cursor: pointer;
  border: none; background: none;
  text-decoration: none;
}
.mtab.active { background: var(--priHi); color: var(--pri); }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .body { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: var(--sp4); }
  .mnav { display: flex !important; }
  .session-body { grid-template-columns: 1fr; }
  .ai-panel { border-left: none; border-top: 1px solid var(--brd); max-height: 50dvh; }
}

@media (max-width: 600px) {
  .topbar { padding: var(--sp2) var(--sp4); }
  .brand h1 { font-size: var(--text-base); }
}

/* ─── Print Mode ─────────────────────────────────────────────────────────── */
@media print {
  body.report-print-mode .topbar,
  body.report-print-mode .sidebar,
  body.report-print-mode .mnav,
  body.report-print-mode .no-print {
    display: none !important;
  }
  body.report-print-mode .body {
    display: block;
    padding: 0;
    margin: 0;
  }
  body.report-print-mode .main {
    padding: 0;
    margin: 0;
    max-width: 100%;
  }
  body.report-print-mode #app {
    padding: 0;
    margin: 0;
  }
  /* Force background colors on print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  @page {
    margin: 1.5cm;
  }
}