/* Accounting hub (Money → Accounting, 2026-11-02; v2 visual pass the same day, Hal: "not visually appealing, just a bunch of text").
   public/js/accounting-hub.js. One sidebar item in place of the six accounting entries; a segmented tab control on top of every hub page
   (overflow to "More" on a desktop that cannot fit it, sideways scroll on a phone); the Overview: KPI tiles (Home's thin tile), one visual card
   per bank (.wfb-card, public/css/qb-bank.css), compact work tiles. App font (Absans via var(--font-body)), theme tokens only, 44px targets. */

/* the six entries fold into "Accounting" (the phone menu is the same sidebar) */
html.wf-acct-hub-on #nav-bookkeeping-item,
html.wf-acct-hub-on #nav-statement-lines-item,
html.wf-acct-hub-on #nav-quickbooks-item,
html.wf-acct-hub-on #nav-qb-payments-item,
html.wf-acct-hub-on #nav-qb-bank-item,
html.wf-acct-hub-on #nav-qb-sync-item,
html.wf-acct-hub-on #nav-accounting-label { display: none !important; }
html:not(.wf-acct-hub-on) #nav-accounting-item { display: none !important; }

/* ── the tab strip: one segmented control ── */
.acct-tabs { position: relative; display: inline-flex; align-items: center; gap: 2px; max-width: 100%; box-sizing: border-box; margin: 0 0 22px; padding: 4px; border-radius: 14px;
  background: color-mix(in srgb, var(--muted) 11%, transparent); font-family: var(--font-body); }
.acct-tabs-in { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
.acct-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none;
  color: var(--off-white); font-family: var(--font-body); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.acct-tab[hidden] { display: none; }
.acct-tab:hover { color: var(--white); }
.acct-tab.active { background: var(--bg-raised); color: var(--white); box-shadow: 0 1px 2px rgba(15, 24, 34, .08), 0 2px 8px rgba(15, 24, 34, .06); }
.acct-tab:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 1px; }
.acct-more { position: relative; flex: 0 0 auto; }
.acct-more[hidden] { display: none; }
.acct-more-btn svg { width: 16px; height: 16px; }
.acct-more-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 220px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel, var(--bg-raised));
  box-shadow: 0 10px 30px rgba(15, 24, 34, .14); }
.acct-more-menu[hidden] { display: none; }
.acct-more-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--white); font-size: 14px; font-weight: 600; text-decoration: none; }
.acct-more-menu a:hover { background: var(--bg-hover); }
body:has(.modal-overlay.open) .acct-more-menu { display: none; }

/* ── Overview ── */
#page-accounting, #page-accounting button, #page-accounting a { font-family: var(--font-body); }
#page-accounting .inv-header-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-accounting .acct-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 30px; }
#page-accounting .acct-kpis > .pay-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; min-width: 0; min-height: 0; padding: 14px 16px; border-radius: 14px;
  background: var(--bg-raised); border: 1px solid var(--border-light, var(--border)); box-shadow: 0 1px 2px rgba(15, 24, 34, .04); }
#page-accounting .acct-kpis > .pay-kpi::after { content: none; }
#page-accounting .acct-kpis .wf-kpi-body, #page-accounting .acct-kpis .pay-kpi-footer { min-width: 0; max-width: 100%; }
#page-accounting .acct-kpis .pay-kpi-value { font-family: var(--font-body); font-size: 22px; line-height: 28px; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#page-accounting .acct-kpis .pay-kpi-label { font-size: 10.5px; line-height: 16px; letter-spacing: 1.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-accounting .acct-kpis .pay-kpi-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-accounting .acct-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 14px; }
#page-accounting .acct-sec-h .wfb-legend { margin: 0; }
#page-accounting .acct-sec-t { margin: 0; font-size: 15px; font-weight: 700; color: var(--white); }
#page-accounting .acct-banks { margin: 0 0 32px; }
#page-accounting .acct-work { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
#page-accounting .acct-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 20px; border: 1px solid var(--border-light, var(--border)); border-radius: 16px; background: var(--bg-raised);
  box-shadow: 0 1px 2px rgba(15, 24, 34, .04), 0 6px 18px rgba(15, 24, 34, .05); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
#page-accounting .acct-tile:hover { border-color: color-mix(in srgb, var(--accent, var(--gold)) 45%, var(--border)); }
#page-accounting .acct-tile:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 2px; }
#page-accounting .acct-tile-top { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
#page-accounting .acct-tile-t { font-size: 14.5px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-accounting .acct-tile-v { font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
#page-accounting .acct-tile-v.is-alert { color: var(--accent, var(--gold)); }
#page-accounting .acct-tile-v.is-ok { color: var(--wfs-in, var(--green)); }
#page-accounting .acct-tile-l { font-size: 13px; color: var(--muted); }
#page-accounting .acct-tile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#page-accounting .acct-tile-chips span { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 11%, transparent);
  font-size: 12px; font-weight: 600; color: var(--off-white); white-space: nowrap; }
#page-accounting .acct-empty { padding: 28px 18px; text-align: center; font-size: 14px; color: var(--muted); border: 1px dashed var(--border); border-radius: 16px; }

@media (max-width: 1100px) { #page-accounting .acct-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  /* the tabs scroll sideways on a phone; the active one is scrolled into view (fit()) */
  .acct-tabs { display: flex; width: 100%; margin-bottom: 16px; }
  .acct-tabs-in { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .acct-tabs-in::-webkit-scrollbar { display: none; }
  .acct-tab { height: 40px; padding: 0 14px; scroll-snap-align: start; }
  #page-accounting .inv-header-sub { white-space: normal; }
  #page-accounting .acct-kpis { gap: 10px; margin-bottom: 24px; }
  #page-accounting .acct-kpis > .pay-kpi { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  #page-accounting .acct-kpis > .pay-kpi > .wf-kpi-ic { display: none; }
  #page-accounting .acct-kpis .pay-kpi-value { font-size: 19px; line-height: 24px; }
  #page-accounting .acct-kpis .pay-kpi-label { white-space: normal; line-height: 14px; letter-spacing: 1px; }
  #page-accounting .acct-work { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}