/* ============================================================
   BASE / RESET
   ============================================================ */
* , *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--on-surface);
  background: var(--surface-dim);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, dl, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--primary-200);
  border-radius: var(--radius-xs);
}

/* Typography helpers */
.text-display { font-size: var(--fs-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.25px; }
.text-headline { font-size: var(--fs-headline); font-weight: 500; line-height: var(--lh-tight); }
.text-title-lg { font-size: var(--fs-title-lg); font-weight: 500; }
.text-title { font-size: var(--fs-title); font-weight: 500; }
.text-title-sm { font-size: var(--fs-title-sm); font-weight: 500; }
.text-body { font-size: var(--fs-body); font-weight: 400; }
.text-body-lg { font-size: var(--fs-body-lg); font-weight: 400; }
.text-label { font-size: var(--fs-label); font-weight: 500; letter-spacing: .3px; text-transform: uppercase; }
.text-muted { color: var(--on-surface-muted); }
.text-disabled { color: var(--on-surface-disabled); }

/* ============================================================
   APP SHELL
   ============================================================ */
#app { min-height: 100%; }

.shell {
  display: grid;
  grid-template-columns: var(--nav-rail-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  grid-template-areas:
    "rail topbar"
    "rail main";
  min-height: 100vh;
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.topbar-title { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.topbar-title h1 { font-size: var(--fs-title-lg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.breadcrumbs { display: flex; align-items: center; gap: 2px; min-width: 0; flex-wrap: wrap; }
.crumb-sep { display: flex; color: var(--on-surface-disabled); margin: 0 2px; }
.crumb { font-size: var(--fs-title-sm); white-space: nowrap; }
.crumb-link {
  background: none; border: none; padding: 4px 6px; margin: 0 -6px;
  color: var(--on-surface-variant); font-weight: 500; border-radius: var(--radius-xs);
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.crumb-link:hover { color: var(--primary); background: var(--primary-container); }
.crumb-current { color: var(--on-surface); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }

.main {
  grid-area: main;
  padding: var(--sp-6);
  overflow-x: hidden;
}

.screen { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-6); }

/* Login screen is shell-less, centered */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 15% 12%, var(--primary-100), transparent 45%),
    radial-gradient(circle at 88% 85%, var(--primary-50), transparent 50%),
    var(--surface-dim);
  padding: var(--sp-6);
}