/* =========================================================================
 * responsive.css — desktop first; tablet and phone remain usable.
 * Density is preserved on desktop; small screens stack and scroll.
 * ========================================================================= */

/* ---- large desktop ---- */
@media (min-width: 1800px) {
  :root { --fs: 13px; }
  .doc-head-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .doc-foot { grid-template-columns: minmax(0, 1fr) 400px; }
  .list-main.has-preview { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* ---- short desktop screens (1366×768, 1280×720): keep more order lines visible ---- */
@media (min-width: 992px) and (max-height: 820px) {
  :root { --h-title: 38px; --h-menu: 32px; }
  .doc-head-grid { padding: 6px 10px; }
  .doc-foot { grid-template-columns: minmax(0, 1fr) min(620px, 50%); padding: 6px 8px; }
  .totals tbody { display: grid; grid-template-columns: 1fr 1fr; }
  .totals tr { display: flex; min-width: 0; }
  .totals th { flex: 1 1 52%; width: auto; display: flex; align-items: center; }
  .totals td { flex: 1 1 48%; display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 26px; }
  .totals tr.remain { order: 9; }
  .totals tr.grand { order: 10; }
  .totals tr.grand th, .totals tr.grand td { height: 28px; font-size: 14px; }
  .notes-ff textarea { height: 28px; min-height: 28px; resize: vertical; }
  .foot-summary { gap: 5px; }
  .ret-hint { display: none; }
  .ret-ws .doc-head-grid, .doc-ws .doc-head-grid:has(.ret-hint) { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 1366 / 1280 laptops ---- */
@media (max-width: 1440px) {
  .mb-link { padding: 0 8px; font-size: 12.3px; }
  .doc-fields { --lw: 88px; column-gap: 10px; }
  .doc-head-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .list-main.has-preview { grid-template-columns: minmax(0, 1fr) 290px; }
  .tb-btn { padding: 0 6px; }
}
@media (max-width: 1366px) {
  .mb-link .bi { display: none; }
  .tbar-btn.lang span { display: none; }
  .rn-btn span { display: none; }
  .brand-text small { max-width: 170px; }
}
@media (max-width: 1280px) {
  .doc-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .list-main.has-preview { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 1fr) auto; }
  .list-main.has-preview .list-preview { max-height: 230px; }
  .tb-btn .tb-text { display: none; }
  .tb-btn.tb-primary .tb-text, .tb-dd .tb-text { display: inline; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .lk-d-grid { grid-template-columns: 1fr 1fr; }
  .lk-d-wide { grid-column: 1 / -1; }
}

/* ---- tablet (≤ 1024) ---- */
@media (max-width: 1100px) {
  .mb-link { padding: 0 7px; }
  .gsearch { flex-basis: 260px; }
  .brand-text small { display: none; }
}
@media (max-width: 991.98px) {
  body { overflow: auto; height: auto; min-height: 100vh; }
  .view { overflow: visible; }
  .ws { height: auto; min-height: 0; }
  #app-header { position: sticky; top: 0; }
  .menubar {
    display: none; position: absolute; top: var(--h-title); inset-inline: 0; height: auto; max-height: calc(100vh - var(--h-title)); overflow: auto;
    flex-direction: column; padding: 4px; background: var(--surface); border-bottom: 2px solid var(--primary); box-shadow: var(--shadow-3);
  }
  body.menu-open .menubar { display: flex; }
  .mb-item { display: block; }
  .mb-link { height: 38px; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; }
  .mb-link .bi { display: inline; }
  .mb-item.active > .mb-link::before { inset-inline: 0 auto; width: 3px; height: auto; bottom: 0; top: 0; }
  .menubar .dropdown-menu { position: static !important; border: 0; box-shadow: none; padding-inline-start: 16px; background: var(--surface-2); }
  .mega-cols { flex-direction: column; }
  .mega-col + .mega-col { border: 0; padding: 0; }
  .window-tabs { position: sticky; top: var(--h-title); z-index: 1020; }
  .doc-body { min-height: 0; }
  .doc-head-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-lines { min-height: 260px; max-height: 60vh; }
  .doc-foot { grid-template-columns: minmax(0, 1fr); }
  .list-main { min-height: 420px; }
  .list-grid .dg { min-height: 420px; max-height: 70vh; }
  .tree-layout { grid-template-columns: minmax(0, 1fr); }
  .tree-panel { max-height: 320px; }
  .card-sections { grid-template-columns: minmax(0, 1fr); }
  .card-head { flex-direction: column; }
  .ch-stats { border-inline-start: 0; border-top: 1px solid var(--line); }
  .card-pane.pane-grid .dg { min-height: 360px; max-height: 65vh; }
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { border-bottom: 1px solid var(--line-soft); }
  .rpt-paper { min-height: 520px; }
  .rpt-grid .dg { min-height: 420px; max-height: 70vh; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .statusbar { position: sticky; bottom: 0; }
  .sb-hide-md { display: none; }
}

/* ---- phone (≤ 575) ---- */
@media (max-width: 767.98px) {
  :root { --gap: 5px; }
  .gsearch { position: static; flex: 1 1 auto; }
  .gsearch > kbd { display: none; }
  .gsearch input { padding-inline-end: 8px; }
  .gs-panel { inset-inline: 6px; min-width: 0; top: var(--h-title); position: fixed; }
  .gs-item { grid-template-columns: 90px 1fr; }
  .gs-item .st-badge, .gs-meta { display: none; }
  .brand-text { display: none; }
  .btn-new { padding: 0 8px; }
  .tbar-user span { display: none; }
  .sb-hide-sm { display: none; }
  .sb-msg { min-width: 0; flex: 1; }
  .erp-toolbar { gap: 2px; }
  .tb-group { padding-inline-end: 2px; }
  .tb-spacer { flex-basis: 100%; height: 0; }
  .rec-nav { width: 100%; }
  .rn-pos { flex: 1; justify-content: center; }
  .doc-fields { grid-template-columns: minmax(0, 1fr); --lw: 100px; }
  .doc-fields .ff.span-2 { grid-column: auto; }
  .ff-grid.cols-2, .ff-grid.cols-3, .ff-grid.cols-4 { --cols: 1; }
  .ff.span-2, .ff.span-3 { grid-column: auto; }
  .ff { grid-template-columns: 100px minmax(0, 1fr); }
  .sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-title .doc-meta { display: none; }
  .list-head { align-items: stretch; flex-direction: column; gap: 4px; }
  .fn-tabs { margin-inline-start: 0; max-width: 100%; }
  .list-head > * { min-width: 0; max-width: 100%; }
  .fb-item { flex: 1 1 45%; }
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shortcuts { margin-inline-start: 0; }
  .sc { min-width: 68px; }
  .lk-filters .lk-f { flex-basis: 45% !important; }
  .lk-main { flex-basis: 100% !important; }
  .lk-d-grid { grid-template-columns: minmax(0, 1fr); }
  .win-lookup .modal-dialog { height: auto; }
  .pv-stage { padding: 0; }
  .pv-paper { transform-origin: top center; zoom: .5; }
  .dg-search { flex-basis: 100%; }
  .rpt-head .rh-meta { margin-inline-start: 0; text-align: start; }
  .timeline li { grid-template-columns: 100px 22px 1fr; }
}