/* Mobile + tighter-desktop overrides for the 13 entry/landing pages.
 * Targets the EXISTING class names already on those pages — does NOT
 * change body markup, inline scripts, or any data wiring. Pure additive
 * styling to fix:
 *   - "messy on desktop" (squeezed content under shell rail)
 *   - "unreadable on phone" (no media queries on entry pages before now)
 *
 * Linked from: index.html, executive-cockpit.html, dashboards.html,
 *              admin-index.html + all 9 *-index.html pages.
 */

/* ---------- Subtle desktop tightening (always applied) ---------- */

/* All entry pages have the W2 shell injecting a 220px left rail and
 * 40-44px top header. Their body has its own padding too — combined,
 * content gets squeezed. Reclaim some breathing room. */
body[data-system="enterprise"] .wrap,
body[data-system="enterprise"] .panel-grid,
body[data-system="enterprise"] .panel-bar,
body[data-system="enterprise"] .system-strip,
body[data-system="enterprise"] .footer {
  max-width: 1280px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tighter card hover so things don't feel jumpy on the squeezed layout */
body[data-system="enterprise"] .panel:hover,
body[data-system="enterprise"] .ns-mod:hover,
body[data-system="enterprise"] .role-card:hover {
  transform: translateY(-1px) !important;
}


/* ============================================================
 * BREAKPOINT 1 — 1280px and below (the W2 shell rail eats 240px,
 * so on a 1440px viewport content area is only ~1200px. Below this
 * the 4-panel flow-row gets cramped and middle panels become
 * unreadable. Collapse to 2-col earlier.)
 * ============================================================ */

@media (max-width: 1280px) {
  /* index.html flow-row: collapse 4-panel + 3-arrow row → 2-col grid
   * with arrows hidden (they only make sense in horizontal layout) */
  .flow-row {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 14px !important;
    row-gap: 16px !important;
  }
  .flow-row > .panel { grid-column: span 1 !important; min-height: auto !important; padding: 18px !important; }
  .flow-row > .arrow { display: none !important; }
  .ns-bracket { grid-column: span 2 !important; padding: 10px 0 !important; }

  /* Tighter panel internals so descriptions stay readable */
  .panel h2 { font-size: 17px !important; }
  .panel .features { font-size: 12px !important; line-height: 1.5 !important; }
  .panel .features li { padding-left: 12px !important; }

  /* Tighten body padding under shell rail */
  body[data-system="enterprise"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* executive-cockpit + dashboards card grids 1-2 cols */
  .panel-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; }
  .panel-bar { gap: 8px !important; flex-wrap: wrap !important; }
  .panel-stat { min-width: 160px !important; flex: 1 1 calc(33% - 8px) !important; }

  /* Integration flow 2-col → 1-col */
  .integration-flow { grid-template-columns: 1fr !important; }
}


/* ============================================================
 * MOBILE BREAKPOINT 2 — 768px and below (large phone / small tablet)
 * ============================================================ */

@media (max-width: 768px) {
  /* Body padding tighter on phones */
  body { padding: 24px 16px !important; }
  body[data-system="enterprise"] {
    padding-top: 56px !important;   /* clear shell header (44px) + 12 */
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Shell rail is hidden on small screens — claim full width */
  body[data-system="enterprise"] .shell-rail { display: none !important; }

  /* === index.html === */
  .wrap { padding: 0 !important; }
  .header { padding-bottom: 24px !important; margin-bottom: 24px !important; }
  .eyebrow { font-size: 10px !important; margin-bottom: 8px !important; }

  /* Hero font scales: 42px desktop → 28px phone */
  h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .lead {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    padding: 0 4px;
  }

  /* Flow row: collapse to single column, hide horizontal arrows */
  .flow-row {
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
  }
  .flow-row > .arrow {
    display: none !important;   /* horizontal arrows make no sense vertically */
  }
  .flow-row > .panel {
    grid-column: span 1 !important;
    min-height: auto !important;
    padding: 16px !important;
  }
  .ns-bracket {
    grid-column: span 1 !important;
    padding: 8px 0 !important;
  }
  .panel h2 { font-size: 17px !important; }
  .panel .features { font-size: 12.5px !important; }
  .panel .cta { font-size: 12.5px !important; padding: 9px 14px !important; }

  /* Section spacing tighter */
  .section {
    margin-top: 28px !important;
    padding-top: 24px !important;
  }
  .section h3 { margin-bottom: 16px !important; }

  /* Flow cards stack */
  .integration-flow {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .flow-card { padding: 16px !important; }

  /* NS module grid: single column on phone */
  .ns-module-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ns-mod {
    min-height: auto !important;
    padding: 16px !important;
  }

  /* Stat row wraps tightly */
  .stat-row {
    gap: 20px !important;
    margin-top: 20px !important;
  }
  .stat-item .num { font-size: 24px !important; }

  /* === executive-cockpit.html === */
  .top-bar {
    flex-wrap: wrap !important;
    padding: 10px 16px !important;
    font-size: 11px !important;
  }
  .top-bar .meta-right { display: none !important; }
  .hero { padding: 32px 16px 24px !important; }
  .hero h1 { font-size: 30px !important; }
  .hero .lead { font-size: 14px !important; }
  .hero .meeting-tag {
    font-size: 11.5px !important;
    padding: 6px 12px !important;
  }
  .panel-bar {
    padding: 0 16px 20px !important;
    gap: 8px !important;
  }
  .panel-stat {
    min-width: 0 !important;
    padding: 11px 13px !important;
    flex: 1 1 calc(50% - 4px) !important;
  }
  .panel-stat .val { font-size: 19px !important; }
  .panel-stat .lab { font-size: 9px !important; }
  .panel-stat .sub { font-size: 10px !important; }
  .panel-grid {
    padding: 0 16px 30px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .role-card {
    padding: 18px !important;
    min-height: auto !important;
  }
  .role-card .role { font-size: 18px !important; }
  .role-card .desc { font-size: 12px !important; min-height: 0 !important; }
  .mini-kpis { gap: 6px !important; }
  .mini-kpi { padding: 7px 10px !important; }
  .mini-kpi .mk-value { font-size: 14px !important; }
  .system-strip { padding: 0 16px 30px !important; }

  /* === dashboards.html === */
  .dashboards-grid {
    grid-template-columns: 1fr !important;
  }

  /* === all *-index.html pages: dashboard-shared.css + module-grid pattern === */
  .module-page { padding: 16px !important; }
  .mp-hero h1 { font-size: 26px !important; }
  .mp-hero .lead { font-size: 14px !important; }
  .module-grid,
  .mp-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .mp-card,
  .module-card {
    padding: 14px 16px !important;
  }

  /* Tables overflow scroll-x on small screens (don't break layout) */
  table { display: block !important; overflow-x: auto !important; max-width: 100% !important; }

  /* Anti-hallucination footer (legacy) wraps tightly */
  .anti-h { padding: 14px 16px !important; font-size: 12px !important; }
  .footer { font-size: 11.5px !important; }
}


/* ============================================================
 * MOBILE BREAKPOINT 3 — 420px and below (small phones)
 * ============================================================ */

@media (max-width: 420px) {
  body { padding: 20px 12px !important; }
  body[data-system="enterprise"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  h1 { font-size: 24px !important; }
  .hero h1 { font-size: 26px !important; }
  .lead, .hero .lead { font-size: 13.5px !important; }
  .panel-stat {
    flex: 1 1 100% !important;
    padding: 10px 12px !important;
  }
  .stat-row { gap: 14px !important; }
  .stat-item { flex: 1 1 calc(50% - 7px) !important; }
}


/* ============================================================
 * Reduced motion respect
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .panel, .ns-mod, .role-card, .mp-card, .module-card {
    transition: none !important;
  }
  .panel:hover, .ns-mod:hover, .role-card:hover {
    transform: none !important;
  }
}