/*
 * layout.css — Page shell: topnav, sidebar, page-header pattern, stats row
 *
 * Phase B of design system architecture refactor (2026-05-20).
 * Governing SOW: ThomOS/Merlin/Scopes/SOW_design_system_architecture_2026-05-20.md
 *
 * Loaded AFTER tokens.css, mpower.css, and base.css. Owns the structural
 * chrome that surrounds every page:
 *   - Top navigation bar (brand wordmark, env badge, avatar)
 *   - Sidebar (section labels, nav items, footer, chevron, child items)
 *   - Page-header pattern (.page-header-pro with eyebrow, title, subtitle, crumbs)
 *   - Stats row (label + value strip for above-the-fold metrics)
 *
 * Component-level patterns (cards, pills, charts, filter bars) live in
 * pro-t.css today and migrate to components.css in Phase C.
 *
 * Note on: declarations are marked transitionally to
 * override mpower.css's chrome rules until mpower.css is deleted in Phase E.
 * Once that happens, here can be dropped — the cascade alone
 * will be authoritative.
 */

/* =================================================================
 * TOP NAV
 * ================================================================= */
.topnav {
  background: #fefdfa;
  border-bottom: 1px solid var(--pro-border);
  padding: 14px 28px;
}

.topnav .merlin-logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pro-primary), var(--pro-primary-light));
  box-shadow: 0 2px 6px rgba(26, 58, 82, 0.25);
  /* Inner-content layout — required for the SVG inside to center + render in white.
     Restored 2026-05-21 after the topnav inline-strip (commit 8f3a0a3) removed these
     properties from the markup; the SVG was misaligned and the wrong color without them. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pro-card-bg);
  flex-shrink: 0;
}

.topnav .topnav-brand > span.topnav-wordmark {
  font-family: var(--pro-sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.018em;
  text-transform: none;
  color: var(--pro-text);
}

.topnav-env {
  color: var(--pro-text-secondary);
  font-size: 12.5px;
  font-weight: 500;
}

.account-avatar {
  background: linear-gradient(135deg, var(--pro-primary), var(--pro-primary-light));
}

/* =================================================================
 * SIDEBAR
 * ================================================================= */
.sidebar {
  background: var(--pro-sidebar-bg);
  border-right: 1px solid var(--pro-border);
}

.nav-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #757065;
  font-weight: 600;
}

.nav-item {
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: #2a3344;
  gap: 11px;
}

.nav-item:hover {
  background: rgba(26, 58, 82, 0.06);
}

.nav-item.active {
  background: var(--pro-primary);
  color: var(--pro-bg);
  border-left-color: transparent; /* override mpower.css's bright-blue legacy stripe */
}

.nav-item svg {
  color: #8a8674;
  flex-shrink: 0;
}

.nav-item:hover svg {
  color: var(--pro-primary);
}

.nav-item.active svg {
  color: var(--pro-bg);
}

.sidebar-footer {
  border-top: 1px solid var(--pro-border);
  color: var(--pro-text-muted);
}

/* Chevron rotation — CSS-class driven, no inline style in JS */
.nav-chevron {
  margin-left: auto;
  transition: transform 0.2s;
}

.nav-chevron.collapsed {
  transform: rotate(-90deg);
}

/* Sub-item styling (was inline style on each child link) */
.nav-item-child {
  padding-left: 36px;
  font-size: 13px;
  opacity: 0.9;
}

.nav-item-child.active {
  opacity: 1;
}

/* =================================================================
 * PAGE HEADER (with eyebrow)
 * Pattern used at the top of every page: eyebrow breadcrumb → title
 * → subtitle, with a border separator below.
 * ================================================================= */
.page-header-pro {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pro-border-strong);
  margin-bottom: 24px;
}

/* Variant for pages with right-aligned controls next to the title
 * (e.g., Daily Reports has a "Refresh Data" button) */
.page-header-pro.with-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

/* Breadcrumb harmonization — when crumbs sit inside .page-header-pro, style
 * them to read like an eyebrow (uppercase, letter-spaced, muted) while
 * preserving their clickable links. Dashboards with existing crumbs trails
 * don't need a separate eyebrow. */
.page-header-pro .crumbs {
  font-family: var(--pro-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--pro-text-muted);
  margin-bottom: 10px;
  font-weight: 500;
}

.page-header-pro .crumbs a {
  color: inherit;
  text-decoration: none;
}

.page-header-pro .crumbs a:hover {
  color: var(--pro-text);
}

.page-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pro-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--pro-text-muted);
  margin-bottom: 10px;
  font-weight: 500;
}

.page-eyebrow .sep {
  color: #b9b3a0;
}

.page-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: var(--pro-text);
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 1.2;
}

@media (max-width: 600px) {
  .page-title { font-size: 22px; letter-spacing: -0.01em; }
}

.page-subtitle {
  font-family: var(--pro-sans);
  font-size: 14px;
  color: var(--pro-text-secondary);
  margin: 0;
}

/* =================================================================
 * STATS ROW
 * Strip of label/value pairs above the fold on landing pages and
 * dashboard summaries. Distinct from dashboard metric tiles (page-local).
 * ================================================================= */
.stats-row {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--pro-border);
}

.stat .label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--pro-text-muted);
  font-weight: 500;
  margin-bottom: 4px;
}

.stat .value {
  font-family: var(--pro-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--pro-text);
  line-height: 1;
}

.stat .value .unit {
  font-size: 12px;
  color: var(--pro-text-muted);
  margin-left: 3px;
  font-family: var(--pro-sans);
  font-weight: 500;
}

/* =================================================================
 * APP SHELL — structural rules migrated from mpower.css (Phase E-2)
 * These rules ESTABLISH the layout (positioning, dimensions, flex).
 * The PRO-T rules above PAINT the chrome (colors, padding, typography).
 * After mpower.css is deleted in Phase E-4, these structural rules
 * provide the foundation; PRO-T rules layer on top via cascade.
 * ================================================================= */

/* Topnav — structural */
.topnav {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

.topnav-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.topnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}

.brand-mpower  { color: var(--pro-primary); }
.brand-analytics { color: var(--pro-text); font-weight: 500; }

.topnav-center {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.topnav-link {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pro-text-secondary);
  text-decoration: none;
  transition: all 0.15s;
}
.topnav-link:hover {
  background: rgba(46, 86, 135, 0.06);
  color: var(--pro-text);
}
.topnav-link.active {
  background: var(--pro-info-bg);
  color: var(--pro-primary);
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* App layout — structural */
.app {
  display: flex;
  min-height: 100vh;
  padding-top: var(--header-height);
  position: relative;
  z-index: 1;
}

/* Sidebar — structural */
.sidebar {
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  z-index: 10;
  transition: width 0.2s ease;
  overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-collapsed); }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm);
}

.nav-section { margin-bottom: var(--space-lg); }

.sidebar.collapsed .nav-section-label { display: none; }

/* Base .nav-item (structural — PRO-T overrides above paint colors) */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  color: var(--pro-text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  border-left: 3px solid transparent;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar.collapsed .nav-item span { display: none; }

/* ── Collapsed-sidebar rules for sidebar_3level component classes ──
   The legacy `.nav-item span` rule above doesn't catch the new Tabler-style
   classes used in templates/components/sidebar_3level.html. These rules
   hide the text labels + chevrons + section headers + submenus so the
   collapsed sidebar shows icon-only L1 items. */
.sidebar.collapsed .nav-link-title  { display: none; }
.sidebar.collapsed .nav-category    { display: none; }
.sidebar.collapsed .nav-link-toggle { display: none; }
.sidebar.collapsed .nav-submenu     { display: none; }
.sidebar.collapsed .nav-link        { justify-content: center; padding-left: 12px; padding-right: 12px; }
.sidebar.collapsed .nav-item-row    { justify-content: center; }

/* Nested nav items */
.nav-children { margin-left: 0; }
.nav-children.collapsed { display: none; }
.nav-children .nav-item {
  font-size: 13px;
  padding: 6px var(--space-md);
}

.nav-toggle {
  margin-left: auto;
  transition: transform 0.2s;
}
.nav-toggle.open { transform: rotate(90deg); }

/* Sidebar footer */
.sidebar-footer {
  padding: var(--space-md) var(--space-lg);
  flex-shrink: 0;
}
.sidebar-footer p {
  font-size: 11px;
  color: var(--pro-text-muted);
  white-space: nowrap;
}
.sidebar-footer .brand {
  color: var(--pro-primary);
  font-weight: 600;
}

/* Main + Content */
.main {
  flex: 1;
  margin-left: var(--sidebar-width);
  transition: margin-left 0.2s ease;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.sidebar.collapsed ~ .main { margin-left: var(--sidebar-collapsed); }

.content {
  flex: 1;
  padding: var(--space-xl);
}

/* ────────────────────────────────────────────────────────────────────
   MOBILE CHASSIS — responsive layout at <=768px viewports.
   Per BLK_merlin_mobile_chassis_2026-06-06.md.

   Pattern: off-canvas drawer with hamburger trigger (the canonical mobile
   nav pattern). On mobile:
   - Sidebar slides OFF-CANVAS by default (transform: translateX(-100%))
   - .main has ZERO margin-left (content takes full viewport width)
   - When user taps hamburger (existing toggleSidebar() in app.js), the
     .collapsed class toggles OFF and sidebar slides into view as overlay
   - Sidebar shows at full width over the content as a drawer
   - Box-shadow gives drawer edge depth so the overlay reads as drawer
   - Tap outside (handled via backdrop pseudo-element)

   The existing JS in app.js already adds .collapsed by default on mobile load
   (line ~111 — matchMedia '(max-width: 768px)'). This CSS interprets that
   class as "off-canvas" rather than "narrow" on mobile.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Safety net: nothing on the page can push beyond viewport width.
     Stops auto-zoom-out that makes everything look 2x size when content
     overflows. If something IS still too wide, it gets clipped, not scrolled. */
  html, body { overflow-x: clip; max-width: 100vw; }

  .content { padding: var(--space-md); min-width: 0; max-width: 100vw; }

  .sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 100;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18);
  }
  .sidebar.collapsed { width: var(--sidebar-width); }
  .sidebar:not(.collapsed) { transform: translateX(0); }

  .main,
  .sidebar.collapsed ~ .main { margin-left: 0; }

  /* Backdrop overlay when sidebar is open — dimming hint that the
     content area is behind the drawer. Sits behind the sidebar (z-index 99). */
  .sidebar:not(.collapsed)::before {
    content: '';
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: -1;
    pointer-events: auto;
  }
}

/* Collapse button (toggle sidebar) */
.collapse-btn {
  background: none;
  border: 1px solid var(--pro-border);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  cursor: pointer;
  color: var(--pro-text-secondary);
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.collapse-btn:hover {
  background: rgba(46, 86, 135, 0.06);
  color: var(--pro-text);
}

/* =================================================================
 * ACCOUNT MENU — topnav account dropdown (migrated from mpower.css)
 * ================================================================= */
.account-menu { position: relative; }

.account-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  transition: box-shadow 0.15s;
}
.account-btn:hover {
  box-shadow: 0 0 0 2px rgba(46, 86, 135, 0.08);
}

.account-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pro-card-bg);
  font-size: 13px;
  font-weight: 600;
  background-size: cover;
  background-position: center;
}

.account-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-sm);
  background: var(--pro-card-bg);
  border: 1px solid var(--pro-border);
  border-radius: var(--radius-lg);
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 30;
  overflow: hidden;
}
.account-dropdown.open { display: block; }

.account-info { padding: var(--space-lg); }
.account-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--pro-text);
}
.account-email {
  font-size: 12px;
  color: var(--pro-text-muted);
  margin-top: 2px;
}
.account-divider {
  height: 1px;
  background: var(--pro-border);
}
.account-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: none;
  background: none;
  font-family: var(--pro-sans);
  font-size: 13px;
  color: var(--pro-text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.account-option:hover {
  background: rgba(46, 86, 135, 0.06);
  color: var(--pro-text);
}

/* Theme toggle button (in account dropdown) */
.theme-toggle {
  background: none;
  border: 1px solid var(--pro-border);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  cursor: pointer;
  color: var(--pro-text-secondary);
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.theme-toggle:hover {
  background: rgba(46, 86, 135, 0.06);
  color: var(--pro-text);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 18px;
  height: 18px;
}
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: inline; }
:root .theme-toggle .icon-sun { display: none; }
:root .theme-toggle .icon-moon { display: inline; }