/* mobile.css - Mobile Overrides for Clima-Lab
   Breakpoint Strategy:
   - 768px: Tablet (sidebar collapse)
   - 480px: Mobile-first (primary focus)
   - 390px: Small phones
*/

@media (max-width: 480px) {
  /* Container fixes */
  .lab-bench,
  .constructora-layout {
    min-width: 100% !important;
    width: 100% !important;
    padding: 8px !important;
  }

  /* Card stacking */
  #thermal-cards-grid,
  .thermal-cards-grid,
  .envelope-grid,
  .chart-grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* Touch targets (44px minimum) */
  .btn,
  .nav-item,
  .tab-btn,
  .btn-ghost,
  .btn-ghost-magic {
    min-height: 44px !important;
    padding: 12px 16px !important;
  }

  /* Typography scaling */
  .value-lg {
    font-size: 28px !important;
  }
  .value-md {
    font-size: 18px !important;
  }

  /* Table horizontal scroll wrapper */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Condensation cards */
  .condensation-results.mobile-stack {
    display: block;
  }

  /* Canvas */
  canvas {
    max-width: 100%;
  }
}

@media (max-width: 390px) {
  .value-lg {
    font-size: 24px !important;
  }
  .value-md {
    font-size: 16px !important;
  }
}