/* ===================================================================
   RESPONSIVE.CSS — Tablet, mobile, foldable, landscape handling
=================================================================== */

/* ---------- Large monitors: cap width for readability ---------- */
@media (min-width: 1800px) {
  .workspace { grid-template-columns: 320px 34% 1fr; }
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1279px) {
  .workspace { grid-template-columns: 230px 34% 1fr; }
}

/* =====================================================================
   UNIFIED PANE SYSTEM (tablet + mobile)
   Below 1024px there isn't room for 3 panes side by side, so the form
   panel and preview panel share the same grid cell and are toggled via
   the `.is-pane-active` class (driven by App.showPane in app.js).
   The sidebar becomes an icon-only rail on tablet, and an off-canvas
   drawer on mobile.
===================================================================== */

/* ---------- Tablet (768px – 1023px): icon rail + one active pane ---------- */
@media (max-width: 1023px) {
  .workspace { grid-template-columns: 72px 1fr; }
  .sidebar { min-width: 72px; width: 72px; }
  .sidebar__group-title, .sidebar__item-label { display: none; }
  .sidebar__item { justify-content: center; padding: 12px; }
  .sidebar__item.is-active::before { left: 0; width: 3px; height: 60%; }
  .sidebar__item-ring { display: none; }
  .sidebar__footer span { display: none; }

  .topbar__search { display: none; }

  .form-panel, .preview-panel { grid-column: 2; grid-row: 1; display: none; min-width: 0; }
  .form-panel.is-pane-active, .preview-panel.is-pane-active { display: flex; }

  #zoom-out{
    margin-left: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tablet-preview-toggle { display: inline-flex !important; }
}

/* ---------- Mobile (≤767px): off-canvas drawer + bottom tab bar ---------- */
@media (max-width: 767px) {
  #app-root { grid-template-rows: 56px 1fr; }
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .topbar__brand span.brand-text { display: none; }
  .topbar__menu-toggle { display: inline-flex; }

  .workspace { grid-template-columns: 1fr; grid-template-rows: 1fr; }

  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 78vw; max-width: 320px;
    min-width: 0;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    z-index: 70;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar__group-title, .sidebar__item-label { display: revert; }
  .sidebar__item { justify-content: flex-start; }
  .sidebar__item-ring { display: inline-flex; }
  .sidebar__footer span { display: revert; }

  .form-panel, .preview-panel { grid-column: 1; grid-row: 1; }

  .mobile-tabbar {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
    background: var(--bg-surface); border-top: 1px solid var(--border-subtle);
    padding: 6px var(--space-3) calc(6px + env(safe-area-inset-bottom));
  }
  #app-root { padding-bottom: 54px; }
  .tablet-preview-toggle { display: none !important; }

  /* .field-row, .grid-2 { grid-template-columns: 1fr; } */
  @media (max-width: 900px) {
  .preview-panel__stage { align-items: flex-start; }
  .preview-panel__stage { padding: var(--space-4); }
  .ats-gauge-wrap { flex-direction: column; text-align: center; }
  .compare-cols { grid-template-columns: 1fr; }
  .modal { max-width: 94vw; }


}

.mobile-tabbar { display: none; }
.tablet-preview-toggle { display: none; }

/* ---------- Landscape phones ---------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  #app-root { grid-template-rows: 48px 1fr; }
  .form-panel__header, .preview-panel__toolbar { padding-top: 6px; padding-bottom: 6px; }
}

/* ---------- Print ---------- */
@media print {
  html, body { background: #fff !important; overflow: visible !important; height: auto !important; }
  body * { visibility: hidden !important; }
  #print-root, #print-root * { visibility: visible !important; }
  #print-root {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #print-root .resume-page {
    box-shadow: none !important;
    margin: 0 auto !important;
    page-break-after: always;
    min-height: 0 !important;
  }
  #print-root .resume-page:last-child { page-break-after: auto; }

  /* A section title landing right at the bottom of a page, with the rest of
     the section pushed to the next one, reads as a mistake — the title
     should move down and start together with its content instead. Likewise
     a single entry (one job, one degree, …) shouldn't get cut in half by a
     page break; let it move to the next page as a whole where possible. */
  .rp-section-title { break-after: avoid-page; page-break-after: avoid; }
  .rp-entry, .rp-entry-head { break-inside: avoid-page; page-break-inside: avoid; }
}
  #zoom-out{
    margin-left: 10px;
  }
}