/* Shared reflow rules. Keep data tables readable inside their scroll containers.
   See docs/RESPONSIVE_UI.md before adding page-specific fixed dimensions. */

.shell { overflow-wrap:anywhere; }
.shell :where(section, article, div, form, fieldset, details, nav, dl, label) {
  min-width:0;
}
.shell :where(input, select, textarea) { max-width:100%; }
.shell :where(img, video, iframe, object, embed) { max-width:100%; }
.shell :where(img, video) { height:auto; }
.shell :where(pre) { max-width:100%; overflow:auto; }

/* Navigation stays available at every width, including browser zoom. */
.topbar { flex-wrap:wrap; gap:8px 20px; }
.topbar nav { flex:1 1 700px; min-width:0; flex-wrap:wrap; }
.topbar nav a,.topbar nav .nav-logout-button {
  max-width:100%; white-space:normal; overflow-wrap:anywhere;
}
.brand { max-width:100%; }

/* Titles and action groups grow vertically instead of colliding or clipping. */
.page-heading,.page-head,.panel-title,.panel-heading,.simple-hero,
.movement-summary-heading,.owner-summary-heading,.dialog-title,
.heading-actions,.quick-entry-actions,.ledger-bulk-actions,
.form-actions,.dialog-actions,.custom-period-form,.date-review-guard {
  flex-wrap:wrap;
}
.panel-title,.dialog-title { gap:12px; }
.shell :where(.primary,.secondary,.danger-button,.period-button),
.dialog-actions button {
  max-width:100%; white-space:normal; overflow-wrap:anywhere;
  text-align:center;
}
.shell :where(.primary,.secondary,.danger-button) { min-width:0; }
.simple-metrics article { flex-wrap:wrap; }

/* Content-sized columns also work when a component has less room than the page.
   min(100%, ...) keeps a single column within even a narrow parent. */
.metrics,.summary-cards,.unit-financial-metrics,.quality-summary {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));
}
.two-column,.records-grid,.form-grid,.mapping-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
}
.settings-grid,.task-cards {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
}
.property-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.unit-facts { grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.owner-summary-facts { grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr)); }
.ledger-filters { grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); }
.task-cards a { grid-template-columns:42px minmax(0,1fr); }
.summary-cards strong,.unit-financial-metrics strong,.metrics strong { line-height:1.25; }
.stack-form :where(input,select,textarea),
.inline-form :where(input,select,textarea),
.custom-period-form input { min-width:0; width:100%; }
.inline-form > label { flex:1 1 180px; }

/* Do not hide page overflow: contain genuinely wide tables where users can
   scroll them. Their column widths, numbers and resize handles stay intact. */
.table-wrap,.table-scroll,.bulk-grid-wrap {
  min-width:0; max-width:100%; overflow:auto; overscroll-behavior-inline:contain;
}
.ledger-page-numbers { flex-wrap:wrap; }
.ledger-pagination { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.ledger-pagination > a,.ledger-pagination > span { max-width:100%; }

/* Native dialogs remain usable in short windows and with the on-screen keyboard. */
dialog {
  max-width:calc(100% - 24px);
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  overflow:auto; overflow-wrap:anywhere;
}
dialog form,dialog label { min-width:0; }
dialog input,dialog select,dialog textarea { min-width:0; max-width:100%; }

@media (max-width:650px) {
  .topbar { align-items:center; }
  .topbar nav { justify-content:flex-start; gap:6px; }
  .topbar nav .mobile-optional { display:inline-flex; }
  .topbar nav a,.topbar nav .nav-logout-button { min-height:44px; }
  .balance-entry { grid-template-columns:minmax(0,1fr); }
  .summary-period-actions,.owner-year-selector { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .owner-section-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .owner-section-nav a { white-space:normal; }
  .ledger-pagination { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ledger-page-numbers { grid-column:1/-1; grid-row:1; }
  .ledger-bulk-actions { justify-content:flex-start; }
  .panel-title { align-items:flex-start; }
  .invoice-pdf-frame { min-height:320px; height:60vh; height:60dvh; }
}

@media (max-height:600px) {
  .bulk-save-bar,.owner-section-nav,.quality-nav { position:static; }
}

@media (pointer:coarse) {
  .shell :where(.primary,.secondary,.danger-button,.period-button),
  .dialog-actions button { min-height:44px; }
  .shell :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
  dialog input,dialog select,dialog textarea { font-size:16px; }
}