/* WIDE SCREENS (Hal 2026-11-04: "the page isn't scaling the content on wider screens; make sure all our screens do that").
   Every main screen is fluid: it fills the window between the sidebar and the page gutter (--wf-page-gutter), and only on a very
   wide monitor does it stop at --wf-page-max and sit in the middle. Lists and rows use the whole width. Loaded last (index.html). */
:root {
  --wf-page-max: 1760px;                              /* the one cap for list / home / accounting screens (detail pages keep --wf-detail-max) */
  --wf-check-max: clamp(1132px, 74vw, 1440px);        /* the Accounting check card + History: wider with the window */
}
html body :is(#page-dashboard, #page-inventory, #page-billing, #page-deals, #page-contacts, #page-payments, #page-settings,
  #page-accounting, #page-qb-bank, #page-qb-sync, #page-quickbooks, #page-qb-payments, #page-cards-register) > .page-content {
  max-width: var(--wf-page-max); margin-left: auto; margin-right: auto;
}

/* Accounting check card + History: the column grows with the window (was a fixed 1132px) */
.acs-ck-shell { --acs-pad: max(24px, calc((100% - var(--wf-check-max)) / 2)); }

/* Banks & cards rows: fluid columns (name, bar, balance, buttons, Open) instead of fixed widths; the whole row opens the register */
.acs-acl .acs-ac-row { grid-template-columns: 36px minmax(220px, 1.6fr) minmax(160px, 1.2fr) minmax(170px, auto) auto auto; column-gap: clamp(16px, 2vw, 32px);
  cursor: pointer; transition: background-color .12s; }
.acs-acl .acs-ac-row:hover { background: color-mix(in srgb, var(--wf-tint) 55%, transparent); }
.acs-acl .acs-ac-row:focus-visible { outline: 2px solid var(--wf-blue); outline-offset: -2px; border-radius: 13px; }
.acs-acl .acs-ac-row .acs-ac-a { cursor: default; }
.acs-ac-go { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 700; color: var(--wf-blue); white-space: nowrap; }
.acs-ac-go svg { width: 16px; height: 16px; transition: transform .12s; }
.acs-acl .acs-ac-row:hover .acs-ac-go svg { transform: translateX(2px); }
@media (max-width: 1240px) {
  .acs-acl .acs-ac-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; grid-template-areas: "ic n bal go" "ic prog prog go" "ic a a go"; }
  .acs-ac-go { grid-area: go; align-self: center; }
}
@media (max-width: 760px) {
  /* phone: the chevron sits at the end of the button line, so the name keeps the full width */
  .acs-acl .acs-ac-row { column-gap: 12px; grid-template-columns: 36px minmax(0, 1fr) auto 20px; grid-template-areas: "ic n bal bal" "ic prog prog prog" "ic a a go"; }
  .acs-ac-go > span { display: none; }
}