/* ============================================================
   RESPONSIVE.CSS — Breakpoints & Mobile App Layout
   ============================================================ */

/* ── Desktop default: hide mobile-only elements ─────────── */
/* MUST be at the TOP so mobile media queries below override */
#mobile-nav            { display: none; }
#mobile-preview-toggle { display: none !important; }

/* ── Tablet (≤ 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  #editor-content { padding: 20px 22px; }
  .form-grid      { grid-template-columns: 1fr; }
  .form-grid-3    { grid-template-columns: 1fr 1fr; }
  .tpl-modern     { grid-template-columns: 175px 1fr; }
  .template-grid  { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   MOBILE (≤ 768px) — Full-screen app-like layout
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  body { overflow: hidden; }

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

  /* ── Top bar ──────────────────────────────────────────── */
  #top-bar { height: 52px; padding: 0 16px; flex-shrink: 0; }
  .mode-tabs { display: none !important; }
  .top-bar-actions .autosave-indicator { display: none; }

  /* ── Main — fills between top bar and bottom nav ──────── */
  #main {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  /* Row becomes a positioned container — this lets the cols
     use position:absolute so they fill 100% width/height
     without fighting Bootstrap's col-6 width:50% */
  #main > .row {
    position: relative !important;
    flex: 1 1 0 !important;
    min-height: 0;
    flex-direction: row !important; /* keep row direction; absolute children ignore it */
  }

  /* Both cols: absolutely fill the row area */
  #left-col,
  #right-col {
    position: absolute !important;
    inset: 0 !important;          /* top/right/bottom/left all 0 */
    width: 100% !important;
    height: 100% !important;
    border-right: none !important;
  }

  /* Default view: show editor/customize, hide preview */
  #left-col  { display: flex !important; flex-direction: column; }
  #right-col { display: none !important; }

  /* Preview tab: swap */
  body[data-mobile-view="preview"] #left-col  { display: none  !important; }
  body[data-mobile-view="preview"] #right-col { display: flex  !important; flex-direction: column; }

  /* ── Mobile bottom nav ────────────────────────────────── */
  /* position:static — real flex child of #app, not overlapping */
  #mobile-nav {
    display: flex;
    flex-shrink: 0;
    position: static;
    min-height: 56px;
    height: auto;
    padding: 2px 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-nav-tab {
    flex: 1;
    min-width: unset;
    padding: 6px 4px;
    font-size: 0.6rem;
    border-radius: 0;
  }

  .mobile-nav-tab svg { width: 22px; height: 22px; }

  /* ── Panels fill their column ─────────────────────────── */
  #editor-panel,
  #customize-panel,
  #preview-panel {
    flex: 1 1 0;
    min-height: 0;
  }

  #editor-panel { border-right: none; }

  /* ── Editor content ───────────────────────────────────── */
  #editor-content {
    padding: 20px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Bottom step nav ──────────────────────────────────── */
  #bottom-nav { padding: 10px 16px; flex-shrink: 0; }
  #bottom-nav .btn { min-height: 44px; }
  .bottom-nav-left .step-dots { display: none; }

  /* ── Customize tabs horizontal scroll ─────────────────── */
  .customize-tabs { overflow-x: auto; scrollbar-width: none; }
  .customize-tabs::-webkit-scrollbar { display: none; }
  .customize-tab { white-space: nowrap; flex-shrink: 0; }

  #customize-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Preview ──────────────────────────────────────────── */
  #preview-toolbar { padding: 8px 12px; }
  .page-format-toggle { display: none; }
  #preview-viewport { padding: 12px 8px; }

  /* ── Forms ────────────────────────────────────────────── */
  .form-grid                { grid-template-columns: 1fr; }
  .form-grid-3              { grid-template-columns: 1fr; }
  .additional-sections-grid { grid-template-columns: 1fr; }
  .date-range               { grid-template-columns: 1fr; }
  .form-control { padding: 11px 12px; font-size: 1rem; } /* 16px prevents iOS zoom */
  textarea.form-control { min-height: 90px; }
  .form-group { margin-bottom: 14px; }

  /* ── Entry cards ──────────────────────────────────────── */
  .entry-card-header { padding: 14px 12px; }
  .entry-card-body   { padding: 12px; }

  /* ── Templates ────────────────────────────────────────── */
  .template-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Modal: bottom sheet ──────────────────────────────── */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 88vh;
    width: 100%;
    max-width: 100%;
    animation: slideUpSheet 250ms var(--ease-out) forwards;
  }


  /* ── ATS widget above bottom nav ─────────────────────── */
  .ats-score-widget {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 12px);
    left: 12px;
    right: 12px;
    min-width: auto;
  }
}

/* ── Small mobile (≤ 480px) ─────────────────────────────── */
@media (max-width: 480px) {
  #top-bar { padding: 0 12px; }
  #top-bar .logo-text { display: none; }
  #editor-content { padding: 16px 12px; }
  .step-header h2 { font-size: 1.25rem; }
  .review-grid   { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: 1fr; }
  .color-presets { gap: 6px; }
  .btn-lg { padding: 12px 20px; font-size: 0.9375rem; }
  .mobile-nav-tab { font-size: 0.5625rem; gap: 3px; }
  .mobile-nav-tab svg { width: 20px; height: 20px; }
  .modal { max-height: 92vh; }
}

/* ── Large desktop (≥ 1400px) ───────────────────────────── */
@media (min-width: 1400px) {
  #editor-content { padding: 32px 40px; }
  .template-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes slideUpSheet {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── RTL ─────────────────────────────────────────────────── */
[dir="rtl"] .mode-tabs { transform: translateX(50%); }
[dir="rtl"] .step-header,
[dir="rtl"] .form-group,
[dir="rtl"] .entry-card-header-left { direction: rtl; text-align: right; }
[dir="rtl"] .form-label         { text-align: right; }
[dir="rtl"] .bottom-nav-left    { margin-left: auto; margin-right: 0; }
[dir="rtl"] .add-entry-btn      { flex-direction: row-reverse; }
[dir="rtl"] .entry-card-actions { flex-direction: row-reverse; }
[dir="rtl"] select.form-control { background-position: left 12px center; padding-right: 12px; padding-left: 36px; }
[dir="rtl"] .drag-handle        { order: 3; }
[dir="rtl"] .sidebar-item       { direction: rtl; }
[dir="rtl"] #toast-container    { right: auto; left: 24px; }
[dir="rtl"] .toast              { animation: toastInRtl 250ms var(--ease-out) forwards; }

@keyframes toastInRtl {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .score-bar-fill    { transition: none; }
  #preview-container { transition: none; }
}