/* ============================================================================
   DDPM-Portal · APP LAYOUT  — regions, responsive shell, utilities.
   Consumes tokens.css only.
   ============================================================================ */

/* ── App shell grid: sidebar + (topbar / main) ─────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100vh;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  background: var(--color-teal-800);
  color: var(--color-teal-100);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar__brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); height: var(--topbar-h);
  border-bottom: 1px solid var(--color-teal-700); flex-shrink: 0;
}
/* Logo on a light rounded chip so the artwork stays visible on the dark teal. */
.sidebar__brand-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-cream-100, #F6F0E6); border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
}
.sidebar__brand-chip img { height: 38px; width: auto; display: block; }

.sidebar__nav { padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.sidebar__section-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-teal-300); padding: var(--space-3) var(--space-3) var(--space-1); }
.nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--color-teal-100); font-weight: var(--fw-medium); font-size: var(--fs-base);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-link:hover { background: var(--color-teal-700); color: var(--color-white); text-decoration: none; }
.nav-link--active { background: var(--color-teal-600); color: var(--color-white); }
.nav-link__icon { width: 18px; text-align: center; flex-shrink: 0; }
.sidebar__footer { padding: var(--space-4); border-top: 1px solid var(--color-teal-700); font-size: var(--fs-xs); color: var(--color-teal-300); }
/* Link-styled button (e.g. the Sign out POST form in the sidebar/avatar menu). */
.linklike { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--color-teal-300); }
.linklike:hover { color: var(--color-white); }

/* ── Collapsible sidebar (desktop): ☰ toggles an icon-only rail; the choice is
   persisted in localStorage and restored pre-paint via a head script. Mobile
   (≤900px) keeps the existing off-canvas drawer behavior. ─────────────────── */
@media (min-width: 901px) {
  .app { transition: grid-template-columns var(--transition-fast); }
  html.sidebar-collapsed { --sidebar-w: 64px; }
  html.sidebar-collapsed .sidebar__brand { justify-content: center; padding-left: var(--space-1); padding-right: var(--space-1); }
  html.sidebar-collapsed .sidebar__brand-chip { padding: 2px var(--space-1); }
  html.sidebar-collapsed .sidebar__brand-chip img { height: 26px; }
  html.sidebar-collapsed .sidebar__footer { display: none; }
  html.sidebar-collapsed .nav-link { justify-content: center; padding-left: var(--space-2); padding-right: var(--space-2); }
  html.sidebar-collapsed .nav-link > span:not(.nav-link__icon) { display: none; }
  html.sidebar-collapsed .nav-link__icon { width: auto; font-size: var(--fs-lg); }
}

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6); gap: var(--space-4);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.topbar__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); }
.topbar__user { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.topbar__user-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.topbar__user-role { font-size: var(--fs-xs); color: var(--text-muted); }
.menu-toggle { display: inline-flex; background: none; border: none; cursor: pointer; padding: var(--space-2); color: var(--text); font-size: var(--fs-lg); }

/* ── Main content ──────────────────────────────────────────────────────── */
.main { grid-area: main; padding: var(--space-6); overflow-x: hidden; }
.page-container { max-width: var(--container-max); margin: 0 auto; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-header__title { font-size: var(--fs-2xl); }
.page-header__subtitle { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--space-1); }

/* Standalone (auth) layout: centered card on cream */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--color-teal-800); }
.auth-card { width: 100%; max-width: 24rem; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-8); }
.auth-card__brand { text-align: center; margin-bottom: var(--space-6); }
.auth-card__brand img { height: 56px; margin: 0 auto var(--space-3); }

/* ── Layout helpers / grid ─────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-4); }
.grid--kpi { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ── Utilities (spacing/text/color) ────────────────────────────────────── */
.mt-0{margin-top:0}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}
.text-muted{color:var(--text-muted)}.text-strong{color:var(--text-strong)}.text-primary{color:var(--primary)}.text-accent{color:var(--accent)}
.text-danger{color:var(--danger)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}
.text-sm{font-size:var(--fs-sm)}.text-xs{font-size:var(--fs-xs)}.text-lg{font-size:var(--fs-lg)}
.fw-medium{font-weight:var(--fw-medium)}.fw-semibold{font-weight:var(--fw-semibold)}.fw-bold{font-weight:var(--fw-bold)}
.text-center{text-align:center}.text-right{text-align:right}
.w-full{width:100%}.flex-1{flex:1}
.hidden{display:none}

/* ── Responsive: collapse sidebar to off-canvas on small screens ───────── */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .sidebar {
    position: fixed; left: 0; top: 0; width: var(--sidebar-w); height: 100vh;
    transform: translateX(-100%); transition: transform var(--transition-base); z-index: var(--z-modal);
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .menu-toggle { display: inline-flex; }
  .main { padding: var(--space-4); }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .topbar { padding: 0 var(--space-4); }
  .topbar__user-name, .topbar__user-role { display: none; }
  .page-header__title { font-size: var(--fs-xl); }
}

/* ── Print: used by the monthly report (Phase 8). Hide app chrome. ─────── */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .app { display: block; }
  .main { padding: 0; }
  body { background: var(--color-white); }
}