/* PracticeBooks — global responsive layer.
 *
 * Loaded last on every page. Most pages carry their own <style> block in the
 * body, so the mobile rules here use !important: they have to win over both
 * those later blocks and the inline style="" attributes used throughout the
 * report and panel markup. Desktop layout is untouched — everything below
 * lives inside a max-width media query.
 */

/* ─── Always-on guards ──────────────────────────────────────────────────── */
img, svg, video, canvas { max-width: 100%; }
body { overflow-x: hidden; }

/* .main-content is a flex item, so its default min-width:auto lets it size to
   its min-content (~1400px, the page-content max-width) and burst out of the
   shell on a narrow screen — the topbar and every panel stretch with it.
   Zeroing the floor lets it track the viewport and hands the overflow to the
   scroll containers below. */
.app-shell { min-width: 0; }
.main-content { min-width: 0; }

/* The hamburger injected into the topbar by initSidebar(). The sidebar's own
   btn-collapse is off-canvas on mobile, so it can't be the thing that opens
   the drawer. Hidden on desktop, where btn-collapse handles the rail. */
.btn-mobile-menu { display: none; }

/* ─── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .page-content { padding: 20px !important; }
  .content-grid { grid-template-columns: 1fr !important; }
}

/* ─── Phone / small tablet ──────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Shell ---------------------------------------------------------------- */
  .btn-mobile-menu {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    margin-right: 10px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-md); color: var(--text-secondary);
    cursor: pointer;
  }
  .btn-mobile-menu svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
  .topbar { gap: 8px; }
  /* Both halves must be allowed to shrink, or a long company name plus a
     "Print / PDF" action pushes the whole document wider than the viewport. */
  .topbar-left { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .topbar-right { gap: 8px !important; flex: 0 0 auto; }
  .topbar-title { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* dashboard.css stacks .topbar-left as a column. Pages that put a back
     button beside the title declare display:flex inline but inherit that
     column direction, so the button lands above the title and the block
     outgrows the 64px bar. Honour the inline intent and lay it out as a row. */
  .topbar-left[style*="display:flex"],
  .topbar-left[style*="display: flex"] {
    flex-direction: row !important;
    align-items: center !important;
  }
  .topbar-user { padding: 5px 8px !important; }
  /* Page actions living in the topbar shrink to icons-with-short-labels. */
  .topbar-right .btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .page-content { padding: 14px !important; }

  /* Grids collapse ------------------------------------------------------- */
  .field-grid,
  .form-grid,
  .kv-grid {
    grid-template-columns: 1fr !important;
  }
  /* Stat and summary tiles are short enough to pair up; one per row on a phone
     is mostly whitespace and pushes the real content below the fold. */
  .stats-grid,
  .summary-cards,
  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* 12-column span helpers stop meaning anything once the grid is 1 wide. */
  [class*="span-"] { grid-column: auto !important; }
  /* Any remaining multi-column grid declared inline on the page. */
  .page-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Panels & headers ----------------------------------------------------- */
  .panel-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }
  .panel-header > * { max-width: 100%; }
  .panel-body { padding: 14px 16px !important; }

  /* Toolbars / button rows: never let a row of buttons force a wide page. */
  .je-toolbar,
  .toolbar,
  .toolbar-card,
  .toolbar-group,
  .btn-row,
  .panel-header > div,
  .filter-bar {
    flex-wrap: wrap !important;
  }
  /* Any panel used as a flex toolbar rather than a container. */
  .panel[class*="toolbar"] { flex-wrap: wrap !important; }

  /* The class-based flex rows across these pages. CSS can't select "things
     that are display:flex", so this is the enumerated list — button groups,
     bars and header rows that would otherwise run off the side. Small
     centering flexboxes (icons, avatars) are deliberately left alone. */
  .tool-group,
  .actions-cell,
  .balance-bar,
  .balance-totals,
  .breadcrumb,
  .input-group,
  .method-toggle,
  .notif-row,
  .notice,
  .panel-note,
  .profile-hero,
  .recon-alert,
  .recon-layout,
  .report-letterhead,
  .report-signoff,
  .select-all-bar,
  .settings-actions,
  .stmt-bar,
  .stmt-field,
  .toggle-row,
  .wizard-footer {
    flex-wrap: wrap !important;
  }
  .btn { white-space: nowrap; }

  /* Most toolbars on these pages are inline `display:flex` rows with no
     wrap — tabs beside a search box, filters beside a date range. Let any of
     them break onto extra lines rather than run off the side. */
  .page-content div[style*="display:flex"],
  .page-content div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  /* Statement rows are label-on-left / amount-on-right pairs; wrapping those
     would put the figure on its own line and break the column. */
  .report-container div[style*="display:flex"],
  .report-container div[style*="display: flex"] {
    flex-wrap: nowrap !important;
  }

  /* Tabs scroll sideways instead of wrapping into a ragged block. */
  .filter-tabs,
  .settings-tabs,
  .tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar,
  .settings-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar { display: none; }
  .filter-tab, .settings-tab { flex-shrink: 0 !important; padding: 9px 14px !important; }

  /* Tables --------------------------------------------------------------- */
  /* Financial tables have too many columns to reflow honestly, so the panel
     becomes the scroll container and the table keeps its natural width.
     (Deliberately not `display:block` on the table itself — that detaches
     thead from tbody into separate anonymous tables and the columns stop
     lining up.) */
  .panel { overflow-x: auto !important; }
  /* Prefer scrolling just the table's own wrapper, so the panel heading and
     any toolbar above it stay put while the columns slide. The panel rule
     above is the fallback for tables with no wrapper of their own. */
  .panel > div:has(> table),
  .panel-body:has(> table),
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .data-table, .journal-table, .sched-table, .panel table {
    min-width: max-content;
  }
  /* The journal allocation grid is the exception: it's a data-entry form, and
     it's only four columns wide. Side-scrolling to reach the amount field
     would be worse than a cramped fit, so it stays inside the modal. */
  .alloc-table {
    min-width: 0 !important;
    width: 100% !important;
  }
  .alloc-table th, .alloc-table td { padding: 8px 5px !important; }
  /* Amount and Cr/Dr keep a legible floor; the account column takes whatever
     is left over. Fixed table-layout is avoided here — it scales specified
     widths down proportionally when space is tight, which squeezed the Cr/Dr
     select until its own value was clipped. */
  .alloc-table td:nth-child(2) input,
  .alloc-table td:nth-child(2) .amt-input {
    width: 100% !important;
    min-width: 68px !important;
    padding: 6px !important;
    text-align: right;
  }
  .alloc-table td:nth-child(3) select {
    width: 100% !important;
    min-width: 62px !important;
    padding: 6px 2px 6px 6px !important;
  }
  .alloc-table td:nth-child(1) select,
  .alloc-table td:nth-child(1) input {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 4px !important;
  }

  /* Modals --------------------------------------------------------------- */
  .modal-backdrop, .modal-overlay, .modal {
    padding: 10px !important;
    align-items: flex-start !important;
  }
  .je-modal, .modal-box, .modal-content, .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    margin: 10px 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .modal-body, .je-modal-body { overflow-y: auto !important; padding: 14px 16px !important; }
  .modal-header, .je-modal-header { padding: 14px 16px !important; }
  .modal-footer, .je-modal-footer {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .modal-footer .btn, .je-modal-footer .btn { flex: 1 1 auto; }

  /* Forms ---------------------------------------------------------------- */
  /* 16px is the threshold below which iOS Safari zooms on focus. */
  .form-control, .form-input, input, select, textarea { font-size: 16px !important; }
  .form-group { margin-bottom: 14px; }

  /* Reports -------------------------------------------------------------- */
  /* A statement's column alignment is the point of it, so the paper keeps its
     proportions and scrolls sideways instead of reflowing into nonsense. */
  .report-container {
    padding: 18px 16px !important;
    min-width: 520px;
  }
  .panel:has(.report-container) { overflow-x: auto !important; }

  /* Auth pages ----------------------------------------------------------- */
  .auth-card, .auth-form-panel { width: 100% !important; }

  /* Wizard --------------------------------------------------------------- */
  .wizard-progress { overflow-x: auto; }
  .step-label { font-size: 10px !important; }
}

/* ─── Small phone ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-content { padding: 10px !important; }
  /* Two tiles per row only works if a full currency figure fits inside one;
     at 480 a value like $78,000.00 overflows a 20px tile. */
  .stat-card { padding: 12px !important; }
  .stat-value { font-size: 17px !important; }
  .summary-card { padding: 14px !important; }
  .summary-card .value { font-size: 18px !important; }
  .topbar { padding: 0 10px !important; }
  .topbar-title { font-size: 14px !important; }
  .role-tag { display: none; }
  /* A long action label ("Print / PDF") eats the space the page title needs. */
  .topbar-right .btn { padding: 7px 10px !important; font-size: 11px !important; }
  .topbar-right .btn svg { width: 14px; height: 14px; }
  .report-container { font-size: 11px !important; min-width: 460px; }
  .modal-footer .btn, .je-modal-footer .btn { width: 100%; flex: 1 1 100%; }
  .panel-title { font-size: 13px !important; }
}

/* Injected chrome is screen-only. */
@media print { .btn-mobile-menu, .sidebar-backdrop { display: none !important; } }