/* =============================================
   RESPONSIVE FIXES — responsive-fixes.css
   Add this <link> AFTER styles.css on all pages
   ============================================= */

/* =============================================
   SHARED / GLOBAL FIXES
   ============================================= */

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Fix: absolute-positioned warning tags clipping outside containers */
.problem-visual,
.simulated-warehouse {
  position: relative;
  overflow: hidden;
}

/* Fix: warning tags that use absolute positioning inside .problem-visual
   Reposition them to stay within bounds at all sizes */
#tag-1 { top: 12%; left: 10%; }
#tag-2 { top: 38%; left: 48%; }
#tag-3 { top: 62%; left: 10%; }
#tag-4 { top: 78%; left: 52%; }

/* Fix: section padding too large on very small screens */
@media (max-width: 480px) {
  section {
    padding: 32px 0;
  }
}

/* =============================================
   FEATURES PAGE — features.html
   ============================================= */

/* Fix: showcase-nav horizontal scroll tabs — hide scrollbar cleanly */
.showcase-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.showcase-nav::-webkit-scrollbar {
  display: none;
}

/* Fix: dashboard-grid nested — stack on mobile */
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  /* Fix: fixed heights are the main mobile culprit */
  .dashboard-feed-wrapper {
    height: 220px;
  }

  .dashboard-sidebar-panel {
    height: auto;
    max-height: none;
    border-left: none;
    border-top: 1px solid rgba(255, 30, 39, 0.15);
    overflow-y: visible;
    padding: 16px;
    gap: 14px;
  }

  /* Fix: dashboard bottom stat bar — 2 cols instead of 4 */
  .dashboard-bottom-bar {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px;
  }

  /* Fix: feature-bullets — single column on mobile */
  .feature-bullets {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Fix: feature-info-block padding */
  .feature-info-block {
    padding: 20px 0 10px 0;
  }

  /* Fix: forklift SVG overlapping on small screens */
  .forklift-mock-svg {
    width: 60%;
    left: 5%;
  }

  /* Fix: worker bounding box positions — too far right on narrow screens */
  .worker-bounding-box {
    max-width: calc(100% - 20px);
  }

  /* Fix: intrusion polygon text clipping */
  .intrusion-polygon text {
    font-size: 8px;
  }

  /* Fix: siren pole container scaling */
  .siren-pole-container {
    width: 160px;
    height: 160px;
  }

  /* Fix: showcase-tab-btn text truncation on very small screens */
  .showcase-tab-btn span {
    font-size: 0.78rem;
    white-space: nowrap;
  }

  /* Fix: compliance gauge widget layout on narrow sidebar */
  .compliance-circle-widget {
    padding: 10px;
  }

  .compliance-gauge-svg {
    width: 80px;
    height: 80px;
  }
}

/* Extra small mobile fixes for features */
@media (max-width: 480px) {
  .dashboard-feed-wrapper {
    height: 180px;
  }

  .dashboard-bottom-bar {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .db-stat-num {
    font-size: 0.95rem;
  }

  .db-stat-lbl {
    font-size: 0.58rem;
  }

  /* Fix: mock dashboard border radius on small screens */
  .mock-dashboard {
    border-radius: 8px;
  }

  /* Fix: PPE bounding boxes overlap on very narrow screens */
  #telemetry-ppe-worker-2 {
    right: 10%;
  }
}

/* =============================================
   ANALYTICS PAGE — analytics.html
   ============================================= */

/*
 * CHART RESPONSIVENESS CORE FIX
 * Chart.js needs its parent containers to have explicit,
 * flexible heights — not fixed px values that don't shrink.
 * The chart-canvas-wrapper must be position:relative with
 * a defined height so Chart.js can size itself correctly.
 */

/* Make the analytics dashboard panel width-safe */
.analytics-dashboard-panel {
  width: 100%;
  min-width: 0; /* Prevent grid blowout */
  box-sizing: border-box;
}

/* chart-box: fluid, prevent grid overflow */
.chart-box {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* The canvas wrapper must be position:relative + have a height
   so Chart.js (which uses position:absolute internally) can render */
.chart-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 180px; /* Base desktop height — overridden per breakpoint below */
}

/* Canvas itself should fill the wrapper */
.chart-canvas-wrapper canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── Risk Zones & Heatmap — base fixes (all sizes) ────────────────────
   Both boxes must not overflow their grid column. */
.risk-zones-box,
.heatmap-box {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Risk bar label: allow the zone name to wrap on narrow containers
   so it never pushes the count value off-screen */
.risk-bar-label {
  flex-wrap: wrap;
  gap: 2px 8px;
}

.risk-bar-label span:first-child {
  flex: 1 1 60%;        /* Name takes most space and can wrap */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;  /* Ellipsis on very tight widths */
}

.risk-bar-label span:last-child {
  flex-shrink: 0;       /* Count never wraps — stays on the right */
}

/* Heatmap: prevent cells from forcing the row wider than the container.
   The 24 cells use flex:1 + aspect-ratio:1 which can overflow on mobile.
   We cap each cell with min-width:0 and let them shrink freely. */
.heatmap-cells-container {
  min-width: 0;
  overflow: hidden;
}

.heatmap-row-cells {
  min-width: 0;
  overflow: hidden;
}

.heatmap-cell {
  min-width: 0;         /* Allow cells to shrink below content size */
  flex-shrink: 1;
}

/* Fix: analytics-section-grid already collapses at 1200px in base CSS —
   but closing-container needs internal fixes */

@media (max-width: 992px) {
  /* Fix: closing container gap */
  .closing-container {
    gap: 24px;
  }

  /* Fix: device-showcase-box — readable on tablet */
  .device-showcase-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Fix: contact section padding on tablet */
  .contact-section {
    padding: 40px 30px !important;
  }

  /* Charts: slightly reduce height on tablet */
  .chart-box {
    height: 220px;
  }

  .chart-canvas-wrapper {
    height: 160px;
  }
}

@media (max-width: 768px) {
  /* Fix: analytics stats row — 2 cols */
  .analytics-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Fix: charts grid — stack vertically */
  .charts-grid-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Fix: chart-box height on mobile */
  .chart-box {
    height: 200px;
  }

  .chart-canvas-wrapper {
    height: 140px;
  }

  /* Fix: risk-heatmap-row — stack vertically */
  .risk-heatmap-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Fix: risk bar label — allow wrapping on mobile */
  .risk-bar-label span:first-child {
    white-space: normal; /* Let long names like "Construction Area A" wrap */
  }

  /* Fix: heatmap day labels column — tighter on mobile */
  .heatmap-grid {
    grid-template-columns: 28px 1fr;
    gap: 6px;
  }

  .heatmap-days-labels {
    font-size: 0.52rem;
    padding: 8px 0;
  }

  /* Fix: heatmap cells — drop aspect-ratio, use fixed row height
     so 24 cells can actually shrink to fit the container width */
  .heatmap-row-cells {
    gap: 3px;
    height: 16px; /* Fixed row height instead of relying on aspect-ratio */
  }

  .heatmap-cell {
    aspect-ratio: unset; /* Remove square constraint on mobile */
    height: 100%;        /* Fill the fixed row height */
    border-radius: 2px;
  }

  .heatmap-cells-container {
    gap: 3px;
  }

  /* Fix: value-props-grid — 2 col on tablet */
  .value-props-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* Fix: device-capabilities-list */
  .device-capabilities-list {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Fix: contact section */
  .contact-section {
    padding: 30px 20px !important;
    margin-top: 40px !important;
  }

  /* Fix: analytics dashboard panel padding */
  .analytics-dashboard-panel {
    padding: 16px;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  /* Fix: analytics stats — single column */
  .analytics-stats-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Fix: stat card numbers */
  .analytics-stat-card .num {
    font-size: 1.2rem;
  }

  /* Fix: value props — single column */
  .value-props-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Fix: device-capabilities-list — single column */
  .device-capabilities-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Fix: closing container heading size */
  .closing-container > div:first-child {
    font-size: 1.7rem !important;
  }

  /* Fix: contact form padding */
  .contact-section {
    padding: 24px 16px !important;
  }

  /* Fix: contact info block */
  .contact-info-block {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
    padding-top: 22px;
  }

  /* Fix: chart box on very small screens */
  .chart-box {
    height: auto;
    min-height: 180px;
  }

  .chart-canvas-wrapper {
    height: 130px;
  }

  /* Fix: heatmap — tighter day label column, smaller row height */
  .heatmap-grid {
    grid-template-columns: 22px 1fr;
    gap: 4px;
  }

  .heatmap-days-labels {
    font-size: 0.48rem;
  }

  .heatmap-row-cells {
    gap: 2px;
    height: 13px;
  }

  .heatmap-cells-container {
    gap: 2px;
  }

  /* Fix: risk bar label — smaller text on very narrow screens */
  .risk-bar-label {
    font-size: 0.65rem;
  }
}

/* =============================================
   PROBLEM / CHALLENGE PAGE — problem.html
   ============================================= */

@media (max-width: 768px) {
  /* Fix: problem-visual height too tall on mobile */
  .problem-visual {
    height: 300px;
  }

  /* Fix: simulated-warehouse inside */
  .simulated-warehouse {
    height: 100%;
  }

  /* Fix: problem-callout padding */
  .problem-callout {
    padding: 16px 20px;
    font-size: 1rem;
  }

  /* Fix: problem-item layout — tighten on mobile */
  .problem-item {
    padding: 16px;
    gap: 14px;
  }

  .problem-icon-wrapper {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .problem-info h3 {
    font-size: 0.95rem;
  }

  .problem-info p {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  /* Fix: problem-visual further reduced */
  .problem-visual {
    height: 240px;
  }

  /* Fix: warning tags — reposition for very small screens */
  #tag-1 { top: 10%; left: 8%; font-size: 0.65rem; padding: 7px 10px; }
  #tag-2 { top: 35%; left: 42%; font-size: 0.65rem; padding: 7px 10px; }
  #tag-3 { top: 58%; left: 8%; font-size: 0.65rem; padding: 7px 10px; }
  #tag-4 { top: 76%; left: 46%; font-size: 0.65rem; padding: 7px 10px; }

  /* Fix: problem-callout font size */
  .problem-callout {
    font-size: 0.9rem;
    padding: 14px 16px;
  }
}

/* =============================================
   SOLVE PAGE — solve.html (if separate)
   ============================================= */

@media (max-width: 768px) {
  /* Fix: node satellite positions need recalculating when container shrinks */
  .solve-visual {
    height: 320px;
  }

  /* Scale down satellite nodes more aggressively */
  .satellite-node {
    width: 58px;
    height: 58px;
    padding: 4px;
  }

  .satellite-node i {
    font-size: 0.8rem;
    margin-bottom: 2px;
  }

  .satellite-node span {
    font-size: 0.38rem;
  }

  /* Fix: central node size */
  .central-node {
    width: 85px;
    height: 85px;
    font-size: 0.58rem;
  }

  .central-node i {
    font-size: 1.2rem;
    margin-bottom: 4px;
  }

  /* Fix: solve-features grid */
  .solve-features {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .home-page .problem-visual,
  .home-page .solve-visual,
  .home-page .mission-visual {
    height: auto;
    min-height: 0;
  }

  .home-page .teaser-card {
    min-height: 0;
  }
}

/* =============================================
   HOW IT WORKS — how-it-works.html
   ============================================= */

@media (max-width: 768px) {
  /* Fix: outcome badges wrap properly */
  .outcome-badges-bar {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .outcome-badge {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* Fix: step-card size on mobile */
  .step-card {
    width: 80px;
    height: 80px;
    font-size: 1.4rem;
  }

  .step-title {
    font-size: 0.78rem;
  }

  .step-desc {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .step-card {
    width: 68px;
    height: 68px;
    font-size: 1.2rem;
  }

  .outcome-badge {
    max-width: 240px;
    font-size: 0.72rem;
    padding: 10px 16px;
  }
}

/* =============================================
   SUBPAGE HERO — shared across pages
   ============================================= */

@media (max-width: 480px) {
  .subpage-hero {
    padding: 100px 0 40px;
  }

  .subpage-hero h1 {
    font-size: 1.8rem;
  }

  .subpage-hero p {
    font-size: 0.88rem;
    padding: 0 8px;
  }

  .breadcrumbs {
    font-size: 0.68rem;
  }
}

/* =============================================
   MISSION PAGE — mission.html
   ============================================= */

@media (max-width: 768px) {
  /* Fix: mission text paragraphs */
  .mission-text p {
    font-size: 1rem;
    line-height: 1.7;
  }

  /* Fix: mission SVG container height */
  .mission-svg-container {
    height: 260px;
  }

  /* Fix: section-title size */
  .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .mission-text p {
    font-size: 0.95rem;
  }

  .mission-svg-container {
    height: 200px;
  }

  .section-title {
    font-size: 1.7rem;
  }
}

@media (max-width: 480px) {
  .home-page .problem-visual,
  .home-page .solve-visual {
    height: auto;
  }

  .home-page .section-header {
    margin-bottom: 24px;
  }
}

/* =============================================
   HEADER / MOBILE NAV — shared
   ============================================= */

/* Fix: ensure nav overlay doesn't break layout on iOS Safari */
@supports (-webkit-touch-callout: none) {
  nav {
    height: -webkit-fill-available;
  }
}

/* Fix: header z-index stacking with mobile overlay */
@media (max-width: 768px) {
  header {
    z-index: 1001;
  }

  /* Fix: mobile nav padding bottom for safe area on notched phones */
  nav {
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  /* Fix: nav links shouldn't shrink below readable size */
  nav a {
    font-size: 1.2rem;
  }
}

/* =============================================
   FOOTER — shared
   ============================================= */

@media (max-width: 480px) {
  footer {
    padding: 40px 0;
  }

  .footer-bottom {
    font-size: 0.68rem;
    gap: 6px;
  }

  /* Fix: footer-nav links too close together on very small */
  .footer-nav {
    gap: 12px;
  }

  .footer-nav a {
    font-size: 0.8rem;
  }

  /* Fix: footer social icons */
  .footer-socials a {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
}