/* ============================================================
   layout.css — the application shell: login, sidebar, header,
   content column. Phase 3 adds the shell's JavaScript behaviour;
   the styles it needs (collapsed sidebar, mobile drawer) are
   already defined here.
   ============================================================ */

/* ---------------- login / password screens ---------------- */
#login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 50% -20%, var(--color-primary-soft), transparent 70%),
    var(--color-bg);
  padding: var(--space-lg);
}
#login .card {
  width: 100%; max-width: 380px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
#login h1 { font-size: 22px; margin-bottom: var(--space-xs); }
#login p  { color: var(--text-secondary); margin-bottom: var(--space-xl); }
.login-brand { display: flex; margin-bottom: var(--space-lg); }
.brandmark.lg {
  width: 44px; height: 44px;
  border-radius: var(--radius-lg);
  font-size: 22px;
  box-shadow: var(--shadow-md);
}

#pwscreen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg);
  padding: var(--space-lg);
}
#pwscreen .card { width: 100%; max-width: 420px; }

/* first-run setup shares the sign-in card (consolidation update) */
#setup {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 50% -20%, var(--color-primary-soft), transparent 70%),
    var(--color-bg);
  padding: var(--space-lg);
}
#setup .card { width: 100%; max-width: 440px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); text-align: left; }
#setup h1 { font-size: 22px; margin-bottom: var(--space-xs); }
#setup p  { color: var(--text-secondary); margin-bottom: var(--space-lg); }
#setup.hidden { display: none; }

.err {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin-top: var(--space-sm);
  min-height: 18px;
}

/* ---------------- app shell ---------------- */
#app {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* ---------------- sidebar ---------------- */
#side {
  width: var(--sidebar-w);
  flex: none;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-sm) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: width var(--dur-base) var(--ease);
}

#side h2 {
  font-size: var(--text-subhead);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin: var(--space-xs) var(--space-sm) var(--space-lg);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  white-space: nowrap;
}

.nav { display: flex; flex-direction: column; gap: 1px; }

.nav a {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 7px var(--space-md);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.nav a:hover {
  background: var(--color-surface-2);
  color: var(--text-primary);
  text-decoration: none;
}
.nav a.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  box-shadow: inset 2px 0 0 var(--color-primary);
}

/* icon slot — populated in Phase 3; reserves space so labels align now */
.nav a .ico {
  flex: none;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor;
  opacity: .85;
}
.nav a .ico svg { width: 16px; height: 16px; stroke-width: 1.75; }

.nav .grouplabel {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  margin: var(--space-lg) var(--space-md) var(--space-xs);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.nav .grouplabel:first-child { margin-top: var(--space-xs); }
.grouplabel::after { content: '▾'; font-size: 9px; opacity: .5; }
.grouplabel.collapsed::after { content: '▸'; }

/* collapsed sidebar (icon only) — behaviour wired in Phase 3 */
#app.side-collapsed #side { width: var(--sidebar-w-collapsed); padding-inline: var(--space-xs); }
#app.side-collapsed #side h2 span,
#app.side-collapsed .nav a span.label,
#app.side-collapsed .nav .grouplabel { display: none; }
#app.side-collapsed .nav a { justify-content: center; padding-inline: 0; }

/* ---------------- main column ---------------- */
#main {
  flex: 1;
  min-width: 0;             /* lets wide tables scroll instead of pushing layout */
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-xl) var(--space-3xl);
  max-width: var(--content-max);
}

/* ---------------- top bar ---------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  min-height: var(--header-h);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.topbar h1 {
  font-size: var(--text-page-title);
  margin: 0;
  margin-right: auto;
}

.company-pick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;              /* must reflow, or the top bar overflows the page */
  gap: var(--space-sm);
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
/* the global search is inline-styled flex:1 in the markup; allow it to shrink
   below its intrinsic width so it never forces horizontal page scroll */
#globalSearch {
  min-width: 0;
  height: var(--control-h-md);
  padding: 0 var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
#globalSearch::placeholder { color: var(--text-tertiary); }
#globalSearch:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.company-pick select {
  height: var(--control-h-md);
  padding: 0 var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  max-width: 260px;
}
.company-pick select:hover { border-color: var(--color-border-strong); }

/* ---------------- content ---------------- */
#content { display: flex; flex-direction: column; gap: var(--space-lg); }

/* The existing markup relies on .section having its own top margin.
   Keep it working, but zero the first one so it sits under the header. */
.section + .section { margin-top: 0; }