/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 700px) {
  :root { --sb-width: 220px; }

  #app-shell {
    grid-template-columns: 1fr;
    height: 100vh;
    overflow: hidden;
  }

  /* Sidebar slides in over content */
  #sidebar {
    position:   fixed;
    top:        0;
    left:       0;
    height:     100vh;
    z-index:    100;
    transform:  translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  #sidebar.mob-open { transform: translateX(0); }

  #mob-menu-btn { display: flex; align-items: center; }

  #main {
    height:   100vh;
    overflow: hidden;
    display:  flex;
    flex-direction: column;
  }

  #hdr {
    flex-shrink: 0;
    gap: 8px;
  }

  #panels {
    flex:       1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body { overflow: hidden; }

  /* Grids collapse to single column */
  .g2, .g3     { grid-template-columns: 1fr; }
  .jcols       { grid-template-columns: 1fr; }
  #svgws       { grid-template-columns: 1fr; }
  .export-grid { grid-template-columns: 1fr; }
  .metrics     { grid-template-columns: 1fr 1fr; }

  /* Invoice line items */
  .inv-line {
    grid-template-columns: 1fr auto auto auto;
    font-size: 12px;
  }

  /* Cards and sections */
  .sc   { padding: .6rem .75rem; }
  .card { padding: .5rem .65rem; }

  /* CRM cards stack vertically */
  .crm-card { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .crm-av   { align-self: flex-start; }

  /* Modals take full width on mobile */
  .modal-box { width: 95vw; max-width: 95vw; padding: 1.1rem 1rem; }

  /* Hero banners reduce padding */
  .hero-banner { padding: .75rem 1rem; }
  .hb-title    { font-size: 15px; }
  .hb-sub      { font-size: 11px; }

  /* Button rows wrap */
  .btn-row { flex-wrap: wrap; gap: 5px; }

  /* Tab pane padding */
  .panel { padding-bottom: 2rem; }

  /* Hide decorative sidebar elements on desktop that we don't need */
  #sb-machine-pills { display: none; }

  /* Proof portal iframe */
  #proof-frame { height: 60vh; }

  /* Onboarding machine grid */
  #ob-machine-list { grid-template-columns: 1fr; }

  /* Job card actions wrap */
  .jca { gap: 4px; }
  .jca .btn { font-size: 10px; padding: 3px 7px; }

  /* Ledger/expense cards stack on mobile */
  .exp-card { flex-wrap: wrap; }
  .exp-card > strong { margin-left: auto; }

  /* Metric values slightly smaller in 2-col grid */
  .mc-v { font-size: 18px; }
  .mc-l { font-size: 8px; }

  /* Quick prompts: 2-col on small screens */
  .qg { grid-template-columns: 1fr 1fr; gap: 5px; }
  .qg button { font-size: 10px; padding: 5px 7px; }

  /* Chat: fill height so input isn't buried by keyboard */
  #chat-panel {
    display:        flex;
    flex-direction: column;
    min-height:     calc(100dvh - var(--hdr-h) - 1rem);
    padding-bottom: 0;
  }
  #msgs { flex: 1; overflow-y: auto; min-height: 120px; }
  #ir   { flex-shrink: 0; position: sticky; bottom: 0; background: var(--bg); z-index: 2; }

  /* Verify email banner wraps */
  #verify-banner { flex-wrap: wrap; }
  #verify-banner span { width: 100%; }

  /* Sync pill: hide label text, show dot only */
  #sync-pill .sp-label { display: none; }
  #sync-pill { padding: 4px 6px; gap: 4px; min-width: 0; }

  /* Table overflow scroll */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; }

  /* Invoice line: tighter on very small screens */
  .inv-line { grid-template-columns: 1fr 45px 70px auto; gap: 4px; }

  /* Hdr upgrade button smaller on mobile */
  #hdr-upgrade-btn { font-size: 10px !important; padding: 4px 8px !important; }

  /* Panel headings slightly smaller */
  .sl { font-size: 13px; }

}

/* ── VERY SMALL PHONES (≤400px) ───────────────────────────────── */
@media (max-width: 400px) {
  .sc      { padding: .4rem .5rem; }
  .btn     { font-size: 11px; }
  .metrics { grid-template-columns: 1fr; }
  .mc-v    { font-size: 20px; }
}