/* Responsive system shared by every legacy CRM module. */
:root { --mobile-gutter: 14px; }

html, body { max-width: 100%; overflow-x: clip; }
.main, .page-shell, .card, .top, .next-header, .grid, .two, .split, .formgrid,
.list-toolbar, .simple-row, .row, .line { min-width: 0; }
.page-shell > * { min-width: 0; }

/* Preserve real table layout on wide screens; tables get a deliberate scroller on small screens. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > table { display: table !important; width: max-content; min-width: 700px; margin: 0; }
.card > table { display: table; width: 100%; }
/* Older CRM styles promoted table sections to independent tables, creating tall empty rows. */
.card table thead { display: table-header-group; width: auto; }
.card table tbody { display: table-row-group; width: auto; }
.card table tr { display: table-row; }
.card table th, .card table td { display: table-cell; }

@media (max-width: 900px) {
  body { background: #f3f6fa; }
  .main { width: 100%; padding: 72px var(--mobile-gutter) 28px !important; }
  .page-shell { width: 100%; max-width: none; margin: 0; }
  .desktop-menu-btn { display: none !important; }

  .next-header, .top { align-items: flex-start !important; gap: 12px; }
  .next-header > div:first-child, .top > div:first-child { min-width: 0; padding-right: 42px; }
  .next-header h2, .top h2 { overflow-wrap: anywhere; }
  .next-header > div:last-child, .top > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .next-header > div:last-child .btn, .top > div:last-child .btn { flex: 1 1 150px; text-align: center; }

  .card { width: 100%; max-width: 100%; }
  .grid, .two, .split, .formgrid { grid-template-columns: minmax(0, 1fr) !important; }
  div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .row, .simple-row, .line { flex-wrap: wrap; }
  .row > *, .simple-row > *, .line > * { min-width: 0; }

  .list-toolbar { align-items: stretch; }
  .list-toolbar .search-field { flex: 1 1 100%; }
  .list-toolbar .btn { flex: 1 1 120px; text-align: center; }

  input:not([type="checkbox"]):not([type="radio"]), select, textarea { max-width: 100%; min-height: 42px; }
  textarea { min-height: 96px; }
  button, .btn { min-height: 42px; }
  .table-wrap { margin-inline: calc(var(--mobile-gutter) * -0.25); width: calc(100% + (var(--mobile-gutter) * 0.5)); }
  .table-wrap > table { min-width: 640px; }
  .table-wrap th, .table-wrap td { white-space: nowrap; }
  .table-wrap input, .table-wrap select { min-width: 120px; }
}

@media (max-width: 640px) {
  :root { --mobile-gutter: 12px; }
  .main { padding-top: 68px !important; }
  .mobile-menu-btn { top: 12px !important; left: 12px !important; }
  .side { width: min(86vw, 340px) !important; }
  .next-header h2, .top h2 { font-size: 24px !important; line-height: 1.15; }
  .next-header > div:last-child .btn, .top > div:last-child .btn { flex-basis: 100%; }
  .card { padding: 16px !important; border-radius: 8px !important; }
  .card .card { padding: 0 !important; border: 0 !important; box-shadow: none !important; }
  .btn { width: 100%; }
  form[style*="display:inline"] .btn, td .btn, .table-wrap .btn { width: auto; }
  .list-toolbar .btn { width: auto; }
  .table-wrap > table { min-width: 580px; font-size: 13px; }
  .table-wrap th, .table-wrap td { padding: 10px 9px; }
  .mobile-budget-list { display: grid; gap: 10px; }
  .table-wrap.budget-mobile-source { display: none; }
  .mobile-budget-record { padding: 14px; border: 1px solid #dce5ee; border-radius: 8px; background: #fff; }
  .mobile-budget-record__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .mobile-budget-record__number { color: #163e66; font-size: 17px; font-weight: 750; }
  .mobile-budget-record__status { text-align: right; }
  .mobile-budget-record__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mobile-budget-record__details div { min-width: 0; }
  .mobile-budget-record__details span { display: block; color: #6b7e93; font-size: 11px; font-weight: 700; text-transform: uppercase; }
  .mobile-budget-record__details b { display: block; margin-top: 2px; color: #1d344d; font-size: 14px; overflow-wrap: anywhere; }
  .mobile-budget-record__actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
  .mobile-budget-record__actions .btn { width: auto; margin: 0; }
  .table-wrap.mobile-table-source { display: none; }
  .mobile-table-list { display: grid; gap: 10px; }
  .mobile-table-record { padding: 14px; border: 1px solid #dce5ee; border-radius: 8px; background: #fff; }
  .mobile-table-record__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mobile-table-record__details div { min-width: 0; }
  .mobile-table-record__details span { display: block; color: #6b7e93; font-size: 11px; font-weight: 700; text-transform: uppercase; }
  .mobile-table-record__details b { display: block; margin-top: 2px; color: #1d344d; font-size: 14px; overflow-wrap: anywhere; }
  .mobile-table-record__actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
  .mobile-table-record__actions .btn { width: auto; margin: 0; }
}

@media (min-width: 641px) { .mobile-budget-list, .mobile-table-list { display: none; } }