/* =============================================================================
   compact-b.css · 28 Sep 2026
   Joe: "review entire dashboard and make it all more compact and easier to use
   like you just did the roadmap."  Jobs, Business, Customers, Invoices, Setup.

   Loaded by dashboard.php AFTER look2.css. Layout and spacing only: no colour
   token, word or button job changes. Every tap target stays at least 44px.
   Pairs with compact-b.js, which moves the pieces already on the page into
   tap-to-open bars (details.rmgrp.cb-g). Delete both files' tags and the page
   is as it was.
   ========================================================================== */

/* ------------------------------------------------------------ the bar ---- */
/* Same bar as the roadmap: name, amount, count pill, chevron. 44px or taller. */
#main details.cb-g{margin:.4rem 0}
#main details.cb-g>summary.cb-s{list-style:none;display:flex;align-items:center;gap:.6rem;
  min-height:44px;box-sizing:border-box;cursor:pointer;padding:.2rem .75rem;border-radius:10px;
  background:var(--panel2,#0B1220);box-shadow:inset 0 0 0 1px var(--line,#243449);
  -webkit-tap-highlight-color:transparent;user-select:none}
#main details.cb-g>summary.cb-s::-webkit-details-marker{display:none}
#main details.cb-g>summary.cb-s::marker{content:""}
#main details.cb-g>summary .cb-nm{flex:1 1 auto;min-width:0;font-weight:700;font-size:.92rem;
  line-height:1.25;color:#FF8A2E;overflow-wrap:anywhere}
#main details.cb-g>summary .cb-nm .gh,#main details.cb-g>summary .cb-nm h2{all:unset}
#main details.cb-g>summary .cb-amt{flex:0 0 auto;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.04em;color:var(--muted,#8FA6BD);white-space:nowrap}
#main details.cb-g>summary .cb-n{flex:0 0 auto;min-width:1.8rem;box-sizing:border-box;text-align:center;
  font-size:.8rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;background:rgba(255,255,255,.07);
  color:var(--ink,#E8F0F8)}
#main details.cb-g>summary .cb-ch{flex:0 0 auto;color:var(--muted,#8FA6BD);font-size:.9rem;width:1rem;text-align:center}
#main details.cb-g>summary .cb-ch::before{content:"\25BE"}
#main details.cb-g[open]>summary .cb-ch::before{content:"\25B4"}
#main details.cb-g[open]>summary.cb-s{box-shadow:inset 0 0 0 1px rgba(255,106,26,.4)}
#main details.cb-g>.cb-body{padding:.4rem 0 .2rem}
#main details.cb-g>.cb-body>.jobs,#main details.cb-g>.cb-body>.people{margin-top:0}
#main details.cb-g>.cb-body>p.note{margin:.1rem .1rem .45rem !important;font-size:.76rem;line-height:1.4}

/* page titles: less air */
html body #main>.h{margin-top:.8rem !important;margin-bottom:.4rem}
html body #main>p.note{margin:.25rem 0 .3rem !important;font-size:.76rem;line-height:1.4}

/* ---------------------------------------------------------------- Jobs ---- */
/* one row: the date is a slim column, the name and status share a line,
   the buttons sit under. Every button keeps its 44px. */
#main .jobs{gap:.35rem}
#main .jobs .job{padding:.5rem .65rem;gap:.55rem}
#main .jobs .job>.when:first-child{width:2.1rem;font-size:.66rem;line-height:1.2;padding-top:.1rem;text-shadow:none}
#main .jobs .job>.when:first-child~.bd{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:.5rem;row-gap:.05rem}
#main .jobs .job>.when:first-child~.bd .nm{flex:1 1 auto;min-width:0;font-size:.9rem;overflow-wrap:anywhere}
#main .jobs .job>.when:first-child~.bd .sv{flex:0 0 auto;margin:0;font-size:.56rem;letter-spacing:.06em;text-align:right;max-width:100%}
#main .jobs .job>.when:first-child~.bd .ad{order:2;flex:1 1 100%;font-size:.76rem;margin:0}
#main .jobs .job>.when:first-child~.bd .jdoc-rowacts{order:3;flex:1 1 100%;margin-top:.2rem;gap:.3rem}
#main .jobs .job .jdoc-rowacts .b{flex:1 1 0;min-width:0;padding:.2rem .3rem;font-size:.74rem}

/* Invoices: name and amount share the top line; late/finished text on one
   line; Call, Ask, Invoice share one row of buttons */
#main .jobs .job>.bd+.when{font-family:var(--mono);font-size:.8rem;text-shadow:none;min-width:0 !important;
  width:auto;flex:0 0 auto;padding-top:.05rem}
#main .jobs .job>.bd:first-child{display:block}
#main .jobs .job>.bd:first-child .nm,#main .jobs .job>.bd:first-child .ad{display:block}
#main .jobs .job:has(>.bd:first-child+.when){position:relative;display:block}
#main .jobs .job>.bd:first-child+.when{position:absolute;top:.5rem;right:.65rem}
#main .jobs .job>.bd:first-child .nm{padding-right:4.6rem}
#main .jobs .job>.bd:first-child .sv:has(+ .inv-st){display:none}
#main .jobs .job .bd .sv,#main .jobs .job .bd .inv-st{display:inline;margin:0}
#main .jobs .job .bd .inv-st{font-size:.74rem}
#main .jobs .job .bd .acts{display:flex !important;margin-top:.35rem !important;gap:.3rem !important;flex-wrap:nowrap !important}
#main .jobs .job .bd .acts .b{flex:1 1 0;min-width:0;padding:.2rem .3rem;font-size:.74rem;white-space:nowrap;gap:.25rem}
#main .jobs .job .bd .acts .b svg{width:12px;height:12px}
#main .ipr-list .job{padding:.5rem .65rem}
#main .ipr-paid{margin:.4rem 0 .2rem}
#main .ipr-paid .note{margin:0 0 .3rem;font-size:.76rem}

/* QuickBooks card inside its bar: no second card around it */
#main details.cb-g>.cb-body>.card{padding:.6rem .7rem !important;border-radius:12px !important}

/* ----------------------------------------------------------- Customers ---- */
#main .people{gap:.3rem;margin-top:.3rem}
#main .person.cp-row{padding:.15rem .45rem .15rem .5rem;min-height:48px;gap:.4rem}
#main .cp-row .cp-open{display:grid;grid-template-columns:32px minmax(0,1fr) auto;column-gap:.6rem;row-gap:0;
  align-items:center;flex:1 1 auto;min-width:0;min-height:44px;padding:.1rem .2rem;gap:0}
#main .cp-row .cp-open .av{grid-row:1/3;grid-column:1;width:32px;height:32px;font-size:.66rem}
#main .cp-row .cp-open>.bd{display:contents}
#main .cp-row .cp-open .nm{grid-column:2;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
#main .cp-row .cp-open .m{grid-column:2/4;grid-row:2;font-size:.74rem}
#main .cp-row .cp-open>.t{grid-column:3;grid-row:1;font-size:.56rem;justify-self:end}
#main .filters{gap:.4rem;margin:.35rem 0}
#main .search{margin:.4rem 0 .2rem}

/* -------------------------------------------------------------- Setup ---- */
#main .set{gap:.35rem}
#main details.cb-set>.cb-body{padding:.25rem 0 .1rem}
#main details.cb-set>.cb-body>.grp{background:none;box-shadow:none;border-radius:0;overflow:visible}
#main details.cb-set>.cb-body>.grp::before,#main details.cb-set>.cb-body>.grp::after{content:none}
#main .set .r{padding:.5rem .6rem;gap:.55rem}
/* the grey explanation under each setting: one line; tap the setting to read it all */
#main .set .r .lb .d{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.72rem;line-height:1.35;cursor:pointer}
#main .set .r .lb.cb-x .d{-webkit-line-clamp:unset;display:block}
#main .set .r .lb .d#pushWhy{-webkit-line-clamp:2}
#main .set input:not([type=checkbox]):not([type=radio]),#main .set select{min-height:44px;box-sizing:border-box}
#main .set .whoOpt{padding:.4rem .55rem !important}
#main .set .grp>p.note{margin:.2rem .5rem .5rem !important;font-size:.72rem}

/* ------------------------------------------------------------ Business ---- */
/* the drawer: tile groups fold; tiles are shorter */
#main #lx.lx{margin:.5rem 0}
#main #lx details.cb-lx{margin:.35rem 0}
#main #lx details.cb-lx>summary .cb-nm{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
#main #lx details.cb-lx>.cb-body{padding:.45rem 0 .25rem}
#main #lx .lx-grid{gap:.4rem}
#main #lx .lx-t{min-height:64px;padding-top:.85rem;padding-bottom:.6rem;gap:.15rem}
#main #lx .lx-m{font-size:.92rem}
#main #lx .lx-n{font-size:.6rem}
#main #lx .lx-b{top:.2rem}
#main #lxbar.lx-bar{margin:.5rem 0 .1rem}

/* open drawers: tighter cards and rows */
#main section.bc{margin-bottom:.6rem}
#main section.bc>.bc-hd{padding-top:.7rem;padding-bottom:.45rem}
#main section.bc>.bc-bd{padding-bottom:.7rem}
#main section.bc .bnote{margin:.3rem 0;font-size:.76rem;line-height:1.4}

/* Get paid: one line per person (name, amount, late); tap for the buttons */
#main .owed{gap:.3rem}
#main .owed>.ow.gp-row{padding:0;background:none;box-shadow:none;border:0}
#main details.cb-row{border-radius:10px;background:var(--panel2,#0B1220);box-shadow:inset 0 0 0 1px var(--line,#243449)}
#main details.cb-row>summary.cb-s{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 1.2rem;align-items:center;
  column-gap:.5rem;row-gap:0;min-height:44px;box-sizing:border-box;padding:.3rem .7rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
#main details.cb-row>summary.cb-s::-webkit-details-marker{display:none}
#main details.cb-row>summary.cb-s::marker{content:""}
#main details.cb-row>summary .ow-t{grid-column:1;grid-row:1;display:flex;justify-content:space-between;gap:.5rem;margin:0}
#main details.cb-row>summary .ow-t b{font-size:.9rem;min-width:0;overflow-wrap:anywhere}
#main details.cb-row>summary .gp-st{grid-column:1;grid-row:2;font-size:.72rem;margin:0;padding:0}
#main details.cb-row>summary .cb-ch{grid-column:2;grid-row:1/3;text-align:center;color:var(--muted,#8FA6BD)}
#main details.cb-row>summary .cb-ch::before{content:"\25BE"}
#main details.cb-row[open]>summary .cb-ch::before{content:"\25B4"}
#main details.cb-row>.cb-body{padding:0 .7rem .6rem}
#main details.cb-row .ow-d{font-size:.72rem;margin:0 0 .3rem}
#main details.cb-row .ow-a{display:flex;flex-wrap:wrap;gap:.3rem}
#main details.cb-row .ow-a .b{flex:1 1 calc(33% - .3rem);min-width:0;min-height:44px;padding:.2rem .35rem;font-size:.74rem;white-space:nowrap}
#main .gp-age{gap:.3rem}

/* never a sideways scroll */
#main details.cb-g,#main details.cb-row{max-width:100%;box-sizing:border-box}