/* PageShell — LittleLives design system
   Composition layer over existing components.

   Layout:
     ┌──────────────────────────────────────┐  60px  app-header (full width)
     ├──────────┬───────────────────────────┤
     │          │ ┌─────────────────────┐   │
     │ SideMenu │ │ container (40/24)   │   │  single container, scrolls
     │          │ │  - title            │   │  vertically; tabs use
     │          │ │  - tier-1 tabs ───→ extend full width via -mx
     │          │ │  - tier-2 tabs ───→ extend full width via -mx
     │          │ │  - content body     │   │
     │          │ └─────────────────────┘   │
     └──────────┴───────────────────────────┘

   Title, tab buttons, and content body all share the SAME left/right
   alignment (40 / 24). Tab strip + tier-1 divider extend past the
   container padding via symmetric negative horizontal margins, so the
   divider/strip span the full width of the container while tabs
   themselves remain aligned with the content.
*/

:root {
  --color-white:        #ffffff;
  --color-neutral-100:  #e6e6e6;
  --color-neutral-950:  #333333;

  --surface-default-white:        var(--color-white);
  --content-neutral-primary:      var(--color-neutral-950);
  --stroke-neutral-soft-secondary: var(--color-neutral-100);

  --ll-app-header-h: 60px;
  --ll-content-pad-l: 40px;
  --ll-content-pad-r: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ---------- Root grid ---------- */
.ll-page-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: var(--ll-app-header-h) 1fr;
  grid-template-areas:
    "header header"
    "side   main";
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--surface-default-white);
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: var(--content-neutral-primary);
}

/* ---------- App header (full-width strip, consumer-filled) ----------
   Bare positioning slot. Consumer fills it with TopBar (canonical) which
   provides its own padding, background, and bottom border. PageShell does
   not style the inside of this slot.
*/
.ll-page-shell__app-header {
  grid-area: header;
  display: block;
  height: var(--ll-app-header-h);
  z-index: 10;
}

.ll-page-shell:not([data-app-header="true"]) .ll-page-shell__app-header {
  display: none;
}

.ll-page-shell:not([data-app-header="true"]) {
  grid-template-rows: 1fr;
  grid-template-areas: "side main";
}

/* ---------- Side rail ---------- */
.ll-page-shell__side {
  grid-area: side;
  height: 100%;
  min-height: 0;
}

.ll-page-shell__side > .ll-sidemenu {
  height: 100%;
}

/* ---------- Main column ---------- */
.ll-page-shell__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-default-white);
}

/* ---------- Single content container — scroll lives here ---------- */
.ll-page-shell__inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px var(--ll-content-pad-r) 48px var(--ll-content-pad-l);
}

/* ---------- Page title ---------- */
.ll-page-shell__title-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ll-page-shell__title {
  font-family: 'Nunito', 'Nunito Sans', sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--content-neutral-primary);
  margin: 0;
}

.ll-page-shell__title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Tabs rows ----------
   Tab strip stays within the inner container's content edges (40 left,
   24 right). Divider and tier-2 background do NOT break out past the
   container padding — they align with title and content body.
*/
.ll-page-shell__tabs {
  flex-shrink: 0;
  position: relative;
  padding: 0;
}

/* Suppress the tab component's own divider when nested in the shell —
   the shell draws the divider on its own wrapper for consistency. */
.ll-page-shell__tabs > .ll-tabs[data-tier="tier-1"] {
  border-bottom: 0;
}

.ll-page-shell__tabs--tier-1 {
  border-bottom: 1px solid var(--stroke-neutral-soft-secondary);
}

.ll-page-shell__tabs--tier-2 {
  margin-top: 12px;
}

.ll-page-shell__tabs:empty { display: none; }

/* ---------- Content body ---------- */
.ll-page-shell__content {
  flex: 1 1 auto;
  margin-top: 24px;
}

.ll-page-shell__content:empty { display: none; }