/* ═══════════════════════════════════════
   FIELD SQUARE — responsive.css
   Tablet and mobile breakpoints
═══════════════════════════════════════ */

/* ── TABLET (768px–1100px) ── */
@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr 300px;
  }
}

/* ── MOBILE (≤768px) ── */
@media (max-width: 768px) {

  /* App shell stacks vertically */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: calc(100vh - 52px);
  }

  /* Canvas side is one panel, panel side another */
  .canvas-side {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .canvas-wrap {
    height: 55vw;
    min-height: 240px;
    max-height: 360px;
  }

  /* Panel side hidden by default on mobile — tabs control visibility */
  .panel-side {
    display: none;
  }

  .panel-side.mob-visible {
    display: flex;
  }

  /* Mobile tab bar shown */
  .mob-tabbar {
    display: block;
  }

  /* Desktop tools hidden in topbar */
  .topbar-tools-desktop {
    display: none;
  }

  /* Topbar compact */
  .topbar {
    padding: 0 10px;
  }

  .brand-sub {
    display: none;
  }

  /* Projects grid single column */
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .projects-content {
    padding: 16px;
  }

  .projects-header {
    flex-direction: column;
    align-items: stretch;
  }

  .projects-search {
    width: 100%;
  }

  /* Auth card fills screen */
  #screen-auth {
    padding: 16px;
    align-items: flex-start;
    padding-top: 40px;
  }

  /* Metrics row on mobile — 2 cols */
  .metrics-row {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* fgrid collapse to single col on mobile */
  .fgrid.c3 {
    grid-template-columns: 1fr 1fr;
  }

  /* Direction grid 2×2 on mobile */
  .direction-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Overlay takes full width */
  .overlay-bg {
    padding: 0;
    align-items: flex-end;
  }

  .overlay-box {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* Room tabs always visible at bottom of canvas */
  .room-tabs-bar {
    flex-wrap: nowrap;
  }

  /* Scale badge hidden on mobile */
  .scale-badge {
    display: none;
  }

  /* Larger touch targets for buttons */
  .btn-icon {
    width: 36px;
    height: 36px;
  }

  /* Tool btn compact on mobile */
  .tool-btn span.tool-label {
    display: none;
  }
}

/* ── SMALL MOBILE (≤400px) ── */
@media (max-width: 400px) {
  .fgrid.c2 {
    grid-template-columns: 1fr;
  }

  .rect-dims {
    grid-template-columns: 1fr auto 1fr;
  }

  .metrics-row {
    grid-template-columns: 1fr 1fr;
  }

  .metrics-row .metric-card:last-child {
    grid-column: 1 / -1;
  }
}


/* ═══════════════════════════════════════
   FIELD SQUARE — print.css
   Print / PDF styles
   (included at end of responsive.css to
    keep file count minimal)
═══════════════════════════════════════ */

@media print {

  /* Hide all app chrome */
  .topbar,
  .room-tabs-bar,
  .canvas-side,
  .mob-tabbar,
  .overlay-footer,
  .overlay-bg > * > .overlay-header > .modal-close,
  #screen-auth,
  #screen-projects,
  .panel-side,
  .est-contractor-inputs,
  .toast {
    display: none !important;
  }

  /* Show the estimate document only */
  body {
    background: white !important;
  }

  .overlay-bg {
    position: static !important;
    background: none !important;
    padding: 0 !important;
    display: block !important;
  }

  .overlay-box {
    box-shadow: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
  }

  .est-doc-header {
    border-radius: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .est-table {
    page-break-inside: avoid;
  }

  .total-row {
    page-break-before: avoid;
  }

  /* Page margins */
  @page {
    margin: 15mm;
  }
}