/* ==========================================================================
   Responsive layout — tablet, mobile, landscape, foldable
   Strategy: the side panel becomes an off-canvas drawer below 1024px,
   the app bar search collapses to an icon, and the tool dock migrates
   to a bottom bar on narrow/short viewports.
   ========================================================================== */

/* ---------- Tablet (<=1024px) ---------- */
@media (max-width: 1024px){
  :root{ --panel-w: 320px; }
  .side-panel{ position:fixed; z-index:1300; box-shadow: var(--shadow-deep); transform:translateX(-100%); }
  .side-panel.open{ transform:translateX(0); }
  .side-panel.collapsed{ transform:translateX(-100%); }
  #map{ left:0 !important; }
  .status-strip{ left:16px !important; }
}

/* ---------- Mobile (<=720px) ---------- */
@media (max-width: 720px){
  .brand-text span{ display:none; }
  .app-bar{ gap:10px; padding:0 10px; }
  .app-bar__search{ position:fixed; left:10px; right:10px; top:74px; max-width:none; z-index:950; }
  .app-bar__search input{ font-size:13px; }
  .app-bar__actions .icon-btn:nth-child(1){ } /* keep stats visible */

  .tool-dock{
    top:auto; bottom:80px; right:12px; flex-direction:row;
  }
  .status-strip{ display:none; }

  .stats-panel{ width:100%; right:-100%; }
  .stats-panel.open{ right:0; }

  .side-panel{ width:86vw; max-width:360px; }

  .stat-cards{ grid-template-columns:1fr 1fr; }
}

/* ---------- Small phones ---------- */
@media (max-width: 400px){
  .brand-mark{ width:32px; height:32px; font-size:13px; }
  .icon-btn{ width:34px; height:34px; font-size:13px; }
  .tool-dock button{ width:36px; height:36px; }
}

/* ---------- Landscape phones (short height) ---------- */
@media (max-height: 480px) and (orientation: landscape){
  .app-bar{ height:52px; }
  :root{ --bar-h: 52px; }
  .app-bar__search{ top:58px; }
  .side-panel__tabs{ width:52px; }
  .tab-btn i{ font-size:14px; }
}

/* ---------- Foldable / narrow-wide (e.g. Z Fold cover screen) ---------- */
@media (max-width: 340px){
  .app-bar__brand .brand-text{ display:none; }
  .basemap-grid{ grid-template-columns:1fr; }
}

/* ---------- Print (prints the real, live map — not a screenshot — so
   every basemap tile and overlay/uploaded layer that's currently visible
   on screen is guaranteed to show up on paper too) ---------- */
@media print{
  .app-bar, .side-panel, .tool-dock, .status-strip, .stats-panel, .toast-stack,
  .search-results, .export-menu{ display:none !important; }
  html, body{ height:auto !important; }
  #map{ position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; }
  .leaflet-control-container{ display:none !important; }

  .print-template{
    display:block !important; position:fixed !important; inset:0 !important;
    left:0 !important; top:0 !important; width:100vw !important; height:100vh !important;
    background:transparent !important; padding:0 !important; z-index:10000; pointer-events:none;
  }
  .print-template .print-header,
  .print-template .print-footer{
    position:absolute; left:0; right:0; background:rgba(255,255,255,.92);
    padding:10px 20px; margin:0; border:none;
  }
  .print-template .print-header{ top:0; border-bottom:2px solid #111 !important; }
  .print-template .print-footer{ bottom:0; border-top:2px solid #111 !important; margin-top:0 !important; }
  #printMapArea{ display:none !important; } /* the live #map shows through instead */
}