/* ============================================================
   style.css — Payroll Reports Portal
   ============================================================ */
:root{
  --navy:#1e2a52; --gold:#c9a227;
  --purple:#5b2a86; --green:#79c143;
  --ink:#1f2430; --muted:#6b7280; --line:#e6e8ee; --bg:#f4f5f8;
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.45;}
a{color:inherit}

/* ---------- login ---------- */
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1e2a52 0%,#2a1a4a 55%,#5b2a86 100%);padding:24px;}
.login-card{background:#fff;border-radius:18px;padding:34px 30px;width:100%;max-width:380px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);text-align:center;}
.login-logo{display:flex;gap:14px;align-items:center;justify-content:center;margin-bottom:14px}
.login-logo img{height:34px;object-fit:contain}.login-logo .ll-bp{height:24px}
.login-card h1{font-size:1.35rem;margin:.2rem 0 .1rem}
.login-sub{color:var(--muted);font-size:.85rem;margin:0 0 18px}
.login-card form{display:flex;flex-direction:column;gap:12px;text-align:left}
.login-card label{font-size:.78rem;color:var(--muted);font-weight:600;display:flex;flex-direction:column;gap:5px}
.login-card input{padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:.95rem}
.login-card input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,42,82,.12)}
.login-error{background:#fde8e8;color:#b42318;border-radius:8px;padding:9px 12px;font-size:.83rem;margin-bottom:12px}
.btn-primary{background:var(--navy);color:#fff;border:0;border-radius:9px;padding:12px;font-weight:700;
  font-size:.95rem;cursor:pointer;margin-top:4px;transition:filter .15s}
.btn-primary:hover{filter:brightness(1.12)}

/* ---------- topbar ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:12px 22px;position:sticky;top:0;z-index:10}
.tb-left{display:flex;align-items:center;gap:11px}
.tb-logo{height:30px}
.tb-title{font-weight:800;letter-spacing:.2px}
.tb-right{display:flex;align-items:center;gap:16px}
.tb-user{color:var(--muted);font-size:.86rem}
.tb-logout{font-size:.84rem;font-weight:600;color:var(--navy);text-decoration:none}
.tb-logout:hover{text-decoration:underline}

.wrap{max-width:1000px;margin:0 auto;padding:22px 18px 60px}

/* ---------- flash ---------- */
.flash{border-radius:10px;padding:11px 14px;margin-bottom:16px;font-size:.88rem}
.flash.ok{background:#e7f6ec;color:#15803d;border:1px solid #b7e4c7}
.flash.error{background:#fde8e8;color:#b42318;border:1px solid #f4c7c3}

/* ---------- upload panel ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px;overflow:hidden}
.panel>summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.panel>summary::-webkit-details-marker{display:none}
.panel-h{font-weight:700}
.panel-sub{color:var(--muted);font-size:.8rem}
.upload-form{padding:4px 18px 18px}
.dropzones{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media(max-width:760px){.dropzones{grid-template-columns:repeat(2,1fr)}}
.dz{border:1.6px dashed #c8cdda;border-radius:10px;padding:14px 12px;display:flex;flex-direction:column;
  gap:6px;cursor:pointer;background:#fafbfd;transition:border-color .15s,background .15s;min-height:86px;position:relative}
.dz:hover{border-color:var(--navy)}
.dz.has{border-style:solid;border-color:var(--green);background:#f3fbef}
.dz-label{font-size:.8rem;font-weight:700;color:var(--navy)}
.dz input[type=file]{font-size:.72rem;color:var(--muted)}
.dz-file{font-size:.72rem;color:#15803d;font-weight:600;word-break:break-all}

/* ---------- week bar ---------- */
.weekbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.weeksel label{font-size:.78rem;color:var(--muted);font-weight:600;display:flex;gap:8px;align-items:center}
.weeksel select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:.88rem;background:#fff}
.btn-ghost{font-size:.82rem;font-weight:700;color:var(--navy);text-decoration:none;border:1px solid var(--navy);
  padding:8px 14px;border-radius:8px;transition:background .15s}
.btn-ghost:hover{background:var(--navy);color:#fff}

/* ---------- brand sections ---------- */
.brand-section{margin-bottom:26px}
.brand-title{font-size:1.02rem;font-weight:800;margin:0 0 11px;padding-left:11px;border-left:4px solid var(--navy)}
.brand-section.bp .brand-title{border-color:var(--purple)}
.brand-section.ms .brand-title{border-color:var(--gold)}
.brand-section.special .brand-title{border-color:#94a3b8}

/* ---------- drawers ---------- */
.drawer{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.drawer[open]{box-shadow:0 6px 20px rgba(20,30,60,.06)}
.drawer-head{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:14px 16px}
.drawer-head::-webkit-details-marker{display:none}
.drawer-head::before{content:"▸";color:var(--muted);font-size:.8rem;transition:transform .15s}
.drawer[open] .drawer-head::before{transform:rotate(90deg)}
.dh-name{font-weight:700;flex:1;min-width:0}
.dh-meta{color:var(--muted);font-size:.78rem;white-space:nowrap}
.dh-actions{display:flex;gap:8px}
.btn-bundle{background:var(--navy);color:#fff;font-size:.76rem;font-weight:700;padding:7px 13px;
  border-radius:7px;text-decoration:none;white-space:nowrap}
.bp .btn-bundle{background:var(--purple)} .ms .btn-bundle{background:var(--navy)}
.btn-bundle:hover{filter:brightness(1.12)}

.drawer-body{padding:6px 16px 16px;border-top:1px solid var(--line)}
.drawer-body.open{border-top:0;padding-top:0}
.report-row{display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:9px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.report-row:last-child{border-bottom:0}
.report-row.main{background:#fafbff;margin:8px -16px 0;padding:11px 16px;border-bottom:0}
.report-row.inhouse{background:#fff7ed;margin:0 -16px;padding:11px 16px;border-bottom:0;border-top:1px solid #fde3c6}
.report-row.inhouse .rr-label em{color:#c2620c;font-style:normal;font-size:.72rem;font-weight:600}
.rr-label{font-size:.86rem;font-weight:600;display:flex;flex-direction:column;gap:1px}
.rr-count{font-size:.72rem;color:var(--muted);font-weight:500}
.branch-head{font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  font-weight:700;margin:12px 0 2px}
.rr-links{display:flex;gap:8px;flex-wrap:wrap}
.rr-links a{font-size:.78rem;font-weight:600;color:var(--navy);text-decoration:none;
  border:1px solid var(--line);padding:5px 11px;border-radius:7px;background:#fff;transition:all .12s}
.rr-links a:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.rr-links a.stub{border-color:var(--gold);color:#8a6d12}
.rr-links a.stub:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.bp .rr-links a:hover{background:var(--purple);border-color:var(--purple)}
.rr-links a.bundle-sm{border-color:#c2620c;color:#c2620c}
.rr-links a.bundle-sm:hover{background:#c2620c;color:#fff}

.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:40px;
  text-align:center;color:var(--muted)}
.footer{text-align:center;color:var(--muted);font-size:.76rem;margin-top:36px}

/* ============================================================
   v2 additions: topbar, accordion, range bar, cards, forms,
   tables, chips, custom-report builder, search
   ============================================================ */
.wrap{max-width:1080px;margin:0 auto;padding:22px 20px 60px}
.wrap.narrow{max-width:640px}
.login-ok{background:#e7f6ec;color:#1a7f37;border-radius:8px;padding:9px 12px;font-size:.83rem;margin-bottom:12px}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:18px;background:#fff;border-bottom:1px solid var(--line);
  padding:10px 20px;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.tb-left{display:flex;align-items:center;gap:9px}
.tb-logo{height:26px}
.tb-title{font-weight:800;color:var(--navy);letter-spacing:.2px}
.tb-nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.tb-nav a{padding:7px 12px;border-radius:8px;font-size:.86rem;font-weight:600;color:var(--muted);text-decoration:none}
.tb-nav a:hover{background:var(--bg);color:var(--ink)}
.tb-nav a.active{background:var(--navy);color:#fff}
.tb-right{display:flex;align-items:center;gap:12px}
.tb-user{font-size:.84rem;font-weight:700;color:var(--ink);text-decoration:none}
.tb-logout{font-size:.8rem;color:var(--muted);text-decoration:none}
.tb-logout:hover{color:#b42318}

.page-h{font-size:1.4rem;margin:6px 0 14px;color:var(--navy)}
.card-h{font-size:1.02rem;margin:0 0 12px;color:var(--navy)}
.sub-h{font-size:.9rem;margin:18px 0 8px;color:var(--ink);text-transform:uppercase;letter-spacing:.4px}
.hint{color:var(--muted);font-size:.8rem}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px;
  box-shadow:0 1px 2px rgba(20,30,60,.04)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.cols{grid-template-columns:1fr}}

.flash{padding:10px 13px;border-radius:9px;font-size:.86rem;margin-bottom:14px;background:#eef1f7;color:var(--ink)}
.flash.error{background:#fde8e8;color:#b42318}
.flash.ok{background:#e7f6ec;color:#1a7f37}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:11px}
.form.inline{flex-direction:row;align-items:center;gap:9px;flex-wrap:wrap}
.form label{font-size:.78rem;color:var(--muted);font-weight:600;display:flex;flex-direction:column;gap:5px}
.form input,.form select{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:.9rem;background:#fff}
.form input:focus,.form select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,42,82,.1)}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:6px}
.perms{border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.perms legend{font-size:.78rem;color:var(--muted);font-weight:700;padding:0 6px}
.cb{flex-direction:row !important;align-items:center;gap:7px;font-size:.85rem !important;color:var(--ink) !important;font-weight:500 !important}
.cb input{width:auto}

.btn-primary{background:var(--navy);color:#fff;border:0;border-radius:9px;padding:10px 16px;font-weight:700;cursor:pointer;font-size:.88rem}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 14px;font-weight:600;cursor:pointer;font-size:.85rem;text-decoration:none;color:var(--ink)}
.btn-ghost:hover{background:var(--bg)}
.btn-sm{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 10px;font-size:.78rem;font-weight:600;text-decoration:none;color:var(--ink);cursor:pointer}
.btn-sm:hover{background:#e9ecf3}
.btn-sm.danger,.btn-danger{color:#b42318;border-color:#f3c9c5;background:#fdecea}
.btn-danger{padding:9px 14px;border-radius:9px;font-weight:700;cursor:pointer;margin-top:8px}
.x{border:0;background:none;color:#b42318;cursor:pointer;font-size:.95rem;padding:0 2px}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th{text-align:left;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;padding:7px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl.tbl-tight td{padding:5px 8px;font-size:.82rem;border-bottom:1px dashed var(--line)}
.flags{font-size:.8rem;color:var(--ink)}

/* ---------- chips ---------- */
.chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.74rem;font-weight:700;background:var(--bg);color:var(--ink)}
.chip-ms{background:rgba(30,42,82,.1);color:var(--navy)}
.chip-bp{background:rgba(91,42,134,.12);color:var(--purple)}

/* ---------- date range bar ---------- */
.range-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;margin-bottom:16px}
.range-form{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.range-label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.range-form input[type=date]{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:.86rem}
.range-note{font-size:.82rem;color:var(--muted)}

/* ---------- accordion ---------- */
.brand-accordion{display:flex;flex-direction:column;gap:12px}
.brand-drawer{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.brand-drawer>summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;font-weight:700}
.brand-drawer>summary::-webkit-details-marker{display:none}
.brand-drawer>summary::before{content:"▸";color:var(--muted);margin-right:4px;transition:transform .15s}
.brand-drawer[open]>summary::before{transform:rotate(90deg)}
.brand-stats{font-size:.82rem;color:var(--muted);font-weight:500}
.brand-body{padding:6px 14px 14px;display:flex;flex-direction:column;gap:8px}

.sup-drawer{border:1px solid var(--line);border-radius:10px;background:#fcfcfe}
.sup-drawer>summary{list-style:none;cursor:pointer;padding:11px 14px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;flex-wrap:wrap;font-weight:600;font-size:.92rem}
.sup-drawer>summary::-webkit-details-marker{display:none}
.sup-drawer>summary::before{content:"+";color:var(--muted);margin-right:6px;font-weight:700}
.sup-drawer[open]>summary::before{content:"–"}
.sup-stats{font-size:.8rem;color:var(--muted);font-weight:500}
.sup-body{padding:4px 14px 14px;display:flex;flex-direction:column;gap:11px}

.dl-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.84rem}
.dl-row.inhouse{background:rgba(201,162,39,.08);border-radius:8px;padding:8px 10px}
.dl-label{font-weight:700;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.3px}
.dl-row a{color:var(--navy);text-decoration:none;font-weight:600;border-bottom:1px solid transparent}
.dl-row a:hover{border-bottom-color:var(--navy)}
.dl-zip{background:var(--navy);color:#fff !important;padding:4px 10px;border-radius:7px}
.dl-zip:hover{filter:brightness(1.1);border-bottom-color:transparent !important}
.branch-list{border-top:1px dashed var(--line);padding-top:9px}
.rr-links{display:flex;gap:9px;flex-wrap:wrap}
.rr-links a{color:var(--navy);text-decoration:none;font-weight:600;font-size:.8rem;border-bottom:1px solid transparent}
.rr-links a:hover{border-bottom-color:var(--navy)}

/* ---------- upload ---------- */
.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.upload-grid label{font-size:.78rem;color:var(--muted);font-weight:600;display:flex;flex-direction:column;gap:5px}
.upload-grid input[type=file]{font-size:.82rem}
.upload-grid button{grid-column:1/-1;justify-self:start}
@media(max-width:620px){.upload-grid{grid-template-columns:1fr}}

/* ---------- custom report builder ---------- */
.builder{border:1px solid var(--line);border-radius:10px;padding:13px;background:#fcfcfe}
.builder-pick{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.member-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:6px}
.member-list li{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:7px 11px;font-size:.85rem}
.report-card{border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:11px;background:#fcfcfe}
.rc-head{font-size:.98rem;margin-bottom:3px}
.rc-members{margin-bottom:9px}
.rc-share{margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:9px}
.editor{border-color:var(--navy)}

/* ============ v3 dashboard ============ */
.page-h{font-size:1.4rem;margin:18px 0 14px}
.hero{background:linear-gradient(120deg,var(--navy) 0%,#27345f 60%,#33285c 100%);color:#fff;
  border-radius:var(--radius);padding:22px 24px;margin:18px 0 16px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;box-shadow:0 8px 24px rgba(30,42,82,.18)}
.hero-welcome{margin:0;font-size:1.7rem;font-weight:800;letter-spacing:.2px}
.hero-flavor{margin:6px 0 0;color:#dfe3f1;font-size:1rem}
.hero-client{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.hero-client-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:#aeb6d6}
.hero-client img{max-height:54px;max-width:200px;background:#fff;border-radius:8px;padding:6px 10px}
.announce-wrap{margin:0 0 18px}
.announce{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:10px;padding:13px 38px 13px 16px;box-shadow:0 2px 8px rgba(0,0,0,.03);
  position:relative;cursor:pointer}
.announce:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.announce-alert{border-left-color:#d9822b;background:#fff8ee}
.announce-icon{font-size:1.1rem;line-height:1.4;flex:0 0 auto}
.announce-body{font-size:.95rem;line-height:1.45;color:var(--ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.announce-body strong{color:var(--navy)}
/* teaser: unread + more than 3 lines -> red; once read -> green */
.announce-wrap:not(.is-read) .announce.has-more,
.announce-wrap:not(.is-read).is-open .announce{border-color:#e6b8b4;border-left-color:#d6453d}
.announce-wrap:not(.is-read):not(.is-open) .announce.has-more::after{content:"Tap to read \2014 unread";
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px 6px;text-align:right;font-size:11px;font-weight:700;
  color:#b3261e;background:linear-gradient(transparent,#fff 72%)}
.announce-alert.has-more::after{background:linear-gradient(transparent,#fff8ee 72%)!important}
.announce-wrap.is-read .announce{border-color:#bfe2c8;border-left-color:#1e7a3b}
/* the collapse-to-icon x — only when expanded */
.announce-x{display:none;position:absolute;top:6px;right:8px;border:none;background:none;font-size:21px;line-height:1;
  color:var(--muted);cursor:pointer;padding:2px 7px}
.announce-x:hover{color:var(--navy)}
.announce-wrap.is-open .announce{cursor:default}
.announce-wrap.is-open .announce-body{-webkit-line-clamp:unset;display:block;overflow:visible}
.announce-wrap.is-open .announce-x{display:block}
/* dismissed -> bell pill */
.announce-bell{display:none}
.announce-wrap.is-dismissed .announce{display:none}
.announce-wrap.is-dismissed .announce-bell{display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:600;
  color:var(--navy);cursor:pointer}
.announce-wrap.is-dismissed .announce-bell:hover{border-color:var(--gold)}
.dash-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
@media (max-width:860px){.dash-grid{grid-template-columns:1fr}}
.shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.shortcuts{grid-template-columns:1fr}}
.sc-card{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;text-decoration:none;color:var(--ink);transition:.15s;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.sc-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(30,42,82,.12);border-color:#cdd3e6}
.sc-ic{font-size:1.5rem}
.sc-t{font-weight:700;font-size:1.02rem}
.sc-d{color:var(--muted);font-size:.82rem}
.stat-row{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 20px;flex:1;min-width:120px;text-align:center}
.stat-n{display:block;font-size:1.6rem;font-weight:800;color:var(--navy)}
.stat-l{color:var(--muted);font-size:.76rem}
/* calendar */
.dash-side{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.cal-head{text-align:center;font-weight:700;color:var(--navy);margin-bottom:10px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{text-align:center;font-size:.66rem;color:var(--muted);font-weight:700;padding-bottom:4px}
.cal-cell{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:.82rem;color:var(--ink)}
.cal-empty{background:transparent}
.cal-weekend{color:var(--muted)}
.cal-today{background:var(--navy);color:#fff;font-weight:800}
.cal-holiday{background:#fbf3df;color:#8a6d12;font-weight:700}
.cal-today.cal-holiday{background:var(--navy);color:#fff}
.cal-dot{position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.cal-today .cal-dot{background:var(--gold)}
.cal-legend{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.74rem;margin:12px 0 0}
.lg-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);display:inline-block}
/* announcements editor + branding cards */
.ann-list td input[type=text]{width:100%}
.logo-thumb{max-height:40px;max-width:130px;background:#fafafe;border:1px solid var(--line);border-radius:6px;padding:3px 6px;vertical-align:middle}
.grant-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.grant-chip{background:#eef1f8;border:1px solid #dde2f0;border-radius:20px;padding:3px 10px;font-size:.78rem;display:inline-flex;gap:6px;align-items:center}
.grant-chip a{color:#b42318;text-decoration:none;font-weight:700}

/* ============================================================
   v3.1 — overall polish, employee page, calendar, grant editor
   ============================================================ */
:root{ --space:18px; --line2:#eef0f5; --shadow:0 1px 2px rgba(20,30,60,.05),0 6px 18px rgba(20,30,60,.04); }
.wrap{max-width:1120px;padding:26px 22px 72px}
.page-h{font-size:1.55rem;font-weight:800;margin:4px 0 20px;letter-spacing:-.01em}
.card{padding:22px 24px;margin-bottom:var(--space);box-shadow:var(--shadow);border-color:var(--line2)}
.card-h{font-size:1.08rem;font-weight:800;margin:0 0 16px;letter-spacing:-.01em}
.sub-h{font-size:.74rem;margin:22px 0 10px}
.tbl th{padding:9px 10px}
.tbl td{padding:11px 10px}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover{background:#fafbfe}
.btn-primary{padding:11px 18px;border-radius:10px}
.btn-sm{padding:6px 12px;border-radius:8px}
.flash{padding:12px 15px;border-radius:10px;margin-bottom:18px}
.chip-freq{background:#eaf1ff;color:#2c5cc5}

/* ---------- employee / search page ---------- */
.search-form{display:flex;flex-direction:column;gap:16px;padding:22px 24px}
.search-form .sf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.search-form .sf-row:last-of-type{grid-template-columns:1fr 1fr auto}
@media(max-width:680px){.search-form .sf-row,.search-form .sf-row:last-of-type{grid-template-columns:1fr}}
.search-form label{font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;flex-direction:column;gap:6px}
.search-form input,.search-form select{padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:.95rem;background:#fff;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink)}
.search-form input:focus,.search-form select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,42,82,.1)}
.search-form button{height:44px;white-space:nowrap}
.selected-emp{border:1px solid #cdd8f0;border-left:4px solid var(--navy);background:linear-gradient(180deg,#fbfcff,#fff)}
.selected-emp .dl-row{gap:12px;margin-top:6px}
.selected-emp .dl-row a{background:var(--navy);color:#fff !important;padding:9px 15px;border-radius:9px;font-size:.84rem;font-weight:700;border:0}
.selected-emp .dl-row a:hover{filter:brightness(1.1);border:0}
.dl-row a{padding:8px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;transition:all .12s}
.dl-row a:hover{border-color:var(--navy);background:var(--navy);color:#fff !important;border-bottom-color:var(--navy)}
.dl-zip{background:var(--navy);color:#fff !important;border-color:var(--navy)}

/* ---------- dashboard polish ---------- */
.dash-grid{grid-template-columns:1fr 380px;gap:22px}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}}
.hero{padding:26px 30px;border-radius:16px}
.hero-welcome{font-size:1.95rem}
.dash-side{padding:20px}
.sc-card{padding:20px 22px}

/* ---------- bigger calendar + pay-period colors ---------- */
.cal-head{font-size:1.05rem;margin-bottom:14px}
.cal-grid{gap:5px}
.cal-dow{font-size:.7rem;padding-bottom:7px}
.cal-cell{border-radius:10px;font-size:.95rem;font-weight:600}
.cal-cell .cal-n{position:relative;z-index:1}
.cal-spill{opacity:.4;font-weight:400}
.cal-weekend{color:var(--muted)}
.cal-last{background:#fdeecb}            /* last processed pay period */
.cal-next{background:#dde8fb}            /* upcoming pay period */
.cal-last.cal-weekend{background:#fbe7bd}
.cal-next.cal-weekend{background:#cfdcf6}
.cal-holiday{background:#fbf3df;color:#8a6d12;font-weight:700}
.cal-pay{box-shadow:inset 0 0 0 2px var(--green)}
.cal-pay-dot{position:absolute;bottom:5px;width:6px;height:6px;border-radius:50%;background:var(--green);right:6px}
.cal-today{background:var(--navy);color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(30,42,82,.3)}
.cal-today.cal-last,.cal-today.cal-next,.cal-today.cal-holiday{background:var(--navy);color:#fff}
.cal-today.cal-pay{box-shadow:0 2px 8px rgba(30,42,82,.3),inset 0 0 0 2px var(--green)}
/* dates that have passed: light-red X */
.cal-bygone .cal-n{opacity:.42}
.cal-bygone::after{content:"\00d7";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(214,69,69,.5);font-size:1.4rem;font-weight:700;line-height:1;pointer-events:none;z-index:2}
/* today: lifted "sticky note" corner */
.cal-today{box-shadow:1px 3px 9px rgba(30,42,82,.36);transform:rotate(-1.6deg);z-index:3}
.cal-today::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;border-style:solid;
  border-width:0 0 14px 14px;border-color:transparent transparent #ffffff transparent;opacity:.92;
  border-bottom-right-radius:4px;filter:drop-shadow(-1px -1px 1px rgba(0,0,0,.28))}
.cal-dot{bottom:5px;left:6px;width:6px;height:6px}
.cal-legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:16px;font-size:.73rem}
.lg-item{display:inline-flex;align-items:center;gap:6px}
.lg-sw{width:14px;height:14px;border-radius:4px;display:inline-block}
.lg-last{background:#fdeecb}.lg-next{background:#dde8fb}.lg-pay{box-shadow:inset 0 0 0 2px var(--green);background:#fff}
.cal-freq{margin:14px 0 0;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line2);padding-top:12px}
.cal-freq strong{color:var(--navy)}

/* ---------- grant editor (checkbox permissions) ---------- */
.grant-editor{gap:14px}
.grant-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grant-filter{flex:1;min-width:160px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:.88rem}
.grant-grid{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto;border:1px solid var(--line2);border-radius:10px;padding:10px;background:#fcfcfe}
.grant-sup{flex:0 0 auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.grant-sup>summary{min-height:44px}
.grant-sup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 13px;flex-wrap:wrap}
.grant-sup>summary::-webkit-details-marker{display:none}
.grant-sup>summary::before{content:"▸";color:var(--muted);font-size:.75rem;transition:transform .15s}
.grant-sup[open]>summary::before{transform:rotate(90deg)}
.whole-cb{margin:0}
.whole-cb strong{font-weight:700}
.grant-count{margin-left:auto;font-size:.74rem}
.grant-clients{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:10px 14px 14px;border-top:1px dashed var(--line);background:#fbfcff}
@media(max-width:620px){.grant-clients{grid-template-columns:1fr}}
.grant-clients .cb{font-size:.82rem !important}
.grant-clients input:disabled+*{opacity:.5}
.btn-sm.ghost{background:#fff;border:1px solid var(--line)}
.btn-sm.ghost:hover{background:var(--bg)}

/* uniform select sizing in inline forms */
.form.inline select,.form.inline input{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:.88rem}

/* ---- custom-report builder: client colour cues + per-drawer tools ---- */
.builder-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:2px 0 8px}
.builder-legend span{font-weight:600}
/* legend swatches (spans, no .cb) */
.cl-current{font-weight:700}
.cl-new{font-weight:700;color:#1a7f37}
.cl-missing{font-weight:700;color:#a06b00}
.builder-legend .cl-current::before{content:"●  ";color:#222}
.builder-legend .cl-new::before{content:"●  ";color:#1a7f37}
.builder-legend .cl-missing::before{content:"●  ";color:#a06b00}
/* client checkbox rows — must beat .cb{font-weight/color !important} */
.cb.cl-current{font-weight:800 !important}
.cb.cl-new{font-weight:800 !important;color:#1a7f37 !important}
.cb.cl-new input[type=checkbox]{accent-color:#1a7f37}
.cb.cl-missing{font-weight:800 !important;color:#a06b00 !important}
.cb.cl-missing input[type=checkbox]{accent-color:#a06b00}
.grant-subtools{display:flex;gap:8px;padding:4px 0 8px;border-bottom:1px solid #eee;margin-bottom:8px;grid-column:1/-1}
.grant-supname{flex:1 1 auto;cursor:pointer;font-weight:500}
.grant-supname.cl-current{font-weight:800}
.grant-supname.cl-new{font-weight:800;color:#1a7f37}
.grant-sup>summary{cursor:pointer}
.grant-rundate{color:#9aa0a6;font-size:.78rem;font-weight:400;padding-left:12px;white-space:nowrap;min-width:62px;text-align:right}
.cb .cl-date{margin-left:auto;color:#9aa0a6 !important;font-weight:400 !important;font-size:.74rem;padding-left:10px;white-space:nowrap}
.grant-clients .cb{display:flex}
.rr-edit{font-weight:600}
.dl-brandzip{font-weight:700}

/* ---- collapsible "inactive" groups in the report builder ---- */
.inactive-suppliers{margin-top:4px}
.inactive-suppliers>summary,.inactive-clients>summary{cursor:pointer;list-style:none;color:#6b7280;font-size:.82rem;font-weight:600;padding:8px 11px;background:#f3f4f6;border:1px dashed var(--line);border-radius:8px;user-select:none}
.inactive-suppliers>summary::-webkit-details-marker,.inactive-clients>summary::-webkit-details-marker{display:none}
.inactive-suppliers>summary::before,.inactive-clients>summary::before{content:"\25B8  ";color:#9aa0a6}
.inactive-suppliers[open]>summary::before,.inactive-clients[open]>summary::before{content:"\25BE  "}
.inactive-suppliers[open]>summary,.inactive-clients[open]>summary{margin-bottom:8px}
.inactive-sbody{display:flex;flex-direction:column;gap:8px}
.inactive-clients{grid-column:1/-1;margin-top:4px}
.inactive-cgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding-top:8px}
@media(max-width:620px){.inactive-cgrid{grid-template-columns:1fr}}

/* ---- responsive topbar (hamburger) ---- */
.topbar{position:relative}
.tb-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:38px;
  background:transparent;border:1px solid var(--line);border-radius:9px;cursor:pointer;padding:0 10px;margin-left:auto}
.tb-burger span{display:block;height:2px;width:100%;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s}
.tb-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tb-burger.open span:nth-child(2){opacity:0}
.tb-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.tb-collapse{display:none;position:absolute;top:100%;right:0;left:auto;width:min(320px,92vw);flex-direction:column;align-items:stretch;
  gap:0;background:#fff;border:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:0 14px 30px rgba(20,30,60,.16);
  padding:8px;z-index:50}
.tb-collapse.open{display:flex}
.tb-nav{display:flex;flex-direction:column;gap:2px;flex:none;flex-wrap:nowrap}
.tb-nav a{padding:11px 12px;border-radius:8px;font-size:.92rem;font-weight:600;color:var(--muted);text-decoration:none}
.tb-nav a:hover{background:var(--bg);color:var(--ink)}
.tb-nav a.active{background:var(--navy);color:#fff}
.tb-right{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
@media(max-width:760px){
  .topbar{flex-wrap:nowrap;gap:10px}
  .tb-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:38px;
    background:transparent;border:1px solid var(--line);border-radius:9px;cursor:pointer;padding:0 10px;margin-left:auto}
  .tb-burger span{display:block;height:2px;width:100%;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s}
  .tb-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .tb-burger.open span:nth-child(2){opacity:0}
  .tb-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .tb-collapse{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 26px rgba(20,30,60,.14);
    padding:8px;z-index:50}
  .tb-collapse.open{display:flex}
  .tb-nav{flex-direction:column;gap:2px;flex:none;flex-wrap:nowrap}
  .tb-nav a{padding:11px 12px;border-radius:8px;font-size:.95rem}
  .tb-right{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);justify-content:space-between}
}

/* ---------- pay calendar v2 (5-week window, nav, hover, holidays) ---------- */
.cal-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cal-title{font-weight:700;color:var(--navy);font-size:1.02rem;text-align:center;flex:1}
.cal-nav{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--navy);background:var(--line2);text-decoration:none;font-size:1.15rem;font-weight:700;line-height:1;flex:0 0 auto}
.cal-nav:hover{background:#e2e6f0}
.cal-nav-off{opacity:.3;pointer-events:none}
.cal-todaylink{text-align:center;margin:-4px 0 8px}
.cal-todaylink a{font-size:.72rem;color:#3f8f2e;text-decoration:none;font-weight:600}
.cal-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-weeks{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;border-radius:10px;transition:background .12s,box-shadow .12s}
.cal-week:hover{background:rgba(30,42,82,.06);box-shadow:0 0 0 4px rgba(30,42,82,.06)}
.cal-monthsep{display:flex;align-items:center;gap:8px;margin:6px 2px 2px;color:var(--muted);
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.cal-monthsep span{white-space:nowrap}
.cal-monthsep::after{content:"";flex:1;height:1px;background:var(--line2)}
/* period shading */
.cal-prevp{background:#fdeecb}                 /* previous period */
.cal-currp{background:#dde8fb}                 /* current period */
.cal-prevp.cal-weekend{background:#fbe7bd}
.cal-currp.cal-weekend{background:#cfdcf6}
/* observed holiday — light red */
.cal-hol{background:#fde5e5;color:#b3261e;font-weight:700}
.cal-dot{position:absolute;bottom:5px;left:6px;width:6px;height:6px;border-radius:50%;background:#e2574c}
/* pay dates — light green (past) / dark green (upcoming) */
.cal-pay-dot{position:absolute;bottom:5px;right:6px;width:6px;height:6px;border-radius:50%}
.cal-paypast{box-shadow:inset 0 0 0 2px #a8d98c}
.cal-paynext{box-shadow:inset 0 0 0 2px #3f8f2e}
.cal-paypast .cal-pay-dot{background:#a8d98c}
.cal-paynext .cal-pay-dot{background:#3f8f2e}
/* today + combinations */
.cal-today{background:var(--navy);color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(30,42,82,.3)}
.cal-today.cal-prevp,.cal-today.cal-currp,.cal-today.cal-hol{background:var(--navy);color:#fff}
.cal-today.cal-paypast{box-shadow:0 2px 8px rgba(30,42,82,.3),inset 0 0 0 2px #a8d98c}
.cal-today.cal-paynext{box-shadow:0 2px 8px rgba(30,42,82,.3),inset 0 0 0 2px #3f8f2e}
.cal-today .cal-dot{background:#ffd2d2}
/* legend swatches */
.lg-prevp{background:#fdeecb}
.lg-currp{background:#dde8fb}
.lg-paypast{box-shadow:inset 0 0 0 2px #a8d98c;background:#fff}
.lg-paynext{box-shadow:inset 0 0 0 2px #3f8f2e;background:#fff}
.lg-holdot{background:#e2574c;width:9px;height:9px;border-radius:50%;display:inline-block}

/* ---------- calendar weekly/biweekly toggle + biweekly client list ---------- */
.cal-freqbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 0;
  border-top:1px solid var(--line2);padding-top:12px;font-size:.8rem;color:var(--muted)}
.cal-freqlabel{font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.66rem}
.cal-pf{padding:4px 13px;border-radius:999px;border:1px solid var(--line2);text-decoration:none;
  color:var(--navy);font-weight:600;font-size:.78rem;background:#fff}
.cal-pf:hover{background:#f6f7fb}
.cal-pf.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.cal-freqclient{margin-left:auto;color:var(--navy);font-weight:600}
.cal-bw{margin:10px 0 0;font-size:.78rem}
.cal-bw summary{cursor:pointer;color:var(--navy);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px}
.cal-bw summary::-webkit-details-marker{display:none}
.cal-bw summary::before{content:"▸";font-size:.7rem;transition:transform .15s}
.cal-bw[open] summary::before{transform:rotate(90deg)}
.cal-bw-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.cal-bw-list span{background:#eef0f6;border-radius:7px;padding:3px 10px;font-size:.74rem;color:#27324c}
.cal-phase{margin:8px 0 0;font-size:.76rem;color:var(--muted)}
.cal-phase strong{color:var(--navy)}

/* ---------- calendar hover preview (light pay-context for any week) ---------- */
.cal-cell.cal-hl-curr::after,
.cal-cell.cal-hl-prev::after{ content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;z-index:0;pointer-events:none }
.cal-cell.cal-hl-prev::after{ background:rgba(201,150,30,.20) }   /* light tan — previous period */
.cal-cell.cal-hl-curr::after{ background:rgba(57,99,160,.16) }    /* light blue — the hovered week's period */
.cal-cell.cal-hl-paypast{ outline:2px dashed rgba(120,165,90,.85);outline-offset:-2px }   /* light green — past pay */
.cal-cell.cal-hl-paynext{ outline:2px dashed rgba(63,143,46,.9);outline-offset:-2px }      /* dark green — upcoming pay */
.cal-cell .cal-n{ z-index:2 }
.cal-cell .cal-dot,.cal-cell .cal-pay-dot{ z-index:2 }
.cal-today.cal-hl-curr::after,.cal-today.cal-hl-prev::after{ background:rgba(255,255,255,.16) } /* keep today readable */

/* ================= widget dashboard ================= */
.wg-section{margin-bottom:18px}
.wg-bar{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.wg-h{font-size:1rem;font-weight:750;color:var(--navy);margin:0}
.wg-add{border:1px solid rgba(30,42,82,.18);background:#fff;color:var(--navy);font-weight:650;font-size:.82rem;padding:7px 13px;border-radius:999px;cursor:pointer}
.wg-add:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.wg-board{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:158px;gap:14px}
.wg{background:#fff;border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.07),0 6px 20px rgba(0,0,0,.05);padding:14px 15px;position:relative;overflow:hidden;display:flex;flex-direction:column;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
.wg a,.wg button{-webkit-touch-callout:none}
.wg.sz-sm,.wg-ph.sz-sm{grid-column:span 1;grid-row:span 1}
.wg.sz-wd,.wg-ph.sz-wd{grid-column:span 2;grid-row:span 1}
.wg.sz-lg,.wg-ph.sz-lg{grid-column:span 2;grid-row:span 2}
.wg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.wg-title{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.wg-tools{display:flex;gap:2px;opacity:0;transition:opacity .12s}
.wg-tools button{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:3px;border-radius:6px}
.wg-tools button:hover{background:rgba(0,0,0,.06);color:var(--navy)}
.wg-tools-float{position:absolute;top:10px;right:10px}
.wg-body{flex:1;display:flex;flex-direction:column;min-height:0}
.wg-big{font-size:1.7rem;font-weight:760;color:var(--navy);line-height:1.05;letter-spacing:-.02em}
.sz-lg .wg-big{font-size:2rem}
.wg-sub{font-size:.74rem;color:var(--muted);margin-top:1px}
.wg-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.wg-row .wg-sub{text-align:right}
.wg-muted{color:var(--muted);font-size:.68rem}
.wg-delta{font-weight:700;font-size:.74rem}
.wg-up{color:var(--green,#1a7f37)} .wg-down{color:var(--red,#b3261e)} .wg-flat{color:var(--muted)}
.wg-svg{width:100%;flex:1;min-height:0;margin-top:6px}
.wg-spark{width:100%;height:34px;margin-top:auto}
.wg-chiprow{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.wg-rangerow{margin-top:auto;padding-top:8px}
.wg-chip{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:#fff;color:var(--muted);cursor:pointer;font-weight:600}
.wg-chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.wg-empty{color:var(--muted);font-size:.8rem;display:flex;align-items:center;justify-content:center;flex:1}
.wg-shortcut{display:flex;flex-direction:column;justify-content:center;height:100%;text-decoration:none;color:var(--navy)}
.wg-sc-ic{width:26px;height:26px;color:var(--gold);margin-bottom:8px}
.wg-sc-t{font-weight:750;font-size:1rem}
.wg-sc-d{font-size:.74rem;color:var(--muted);margin-top:2px}
/* empty state */
.wg-empty-state{text-align:center;padding:30px 20px;border:1.5px dashed rgba(30,42,82,.18);border-radius:18px;color:var(--muted)}
.wg-empty-ic{font-size:1.6rem;color:rgba(30,42,82,.35);margin-bottom:6px}
.wg-empty-state p{max-width:460px;margin:0 auto 14px;font-size:.88rem}
.wg-add-lg{padding:9px 16px;font-size:.9rem}
/* add picker */
.wg-picker{position:absolute;z-index:40;margin-top:8px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.16);padding:6px;min-width:240px}
.wg-bar{position:relative}
.wg-pick{display:block;width:100%;text-align:left;border:none;background:transparent;padding:9px 11px;border-radius:9px;font-size:.86rem;color:var(--navy);cursor:pointer}
.wg-pick:hover{background:rgba(30,42,82,.07)}
@media(max-width:760px){
  .wg-board{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:11px}
  .wg.sz-wd,.wg.sz-lg,.wg-ph.sz-wd,.wg-ph.sz-lg{grid-column:span 2}
}

/* ---- stage-2 insight widgets ---- */
.wg-kpigrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;margin-top:2px}
.wg-kpi{display:flex;flex-direction:column;line-height:1.15}
.wg-kpi-v{font-size:1.18rem;font-weight:740;color:var(--navy);letter-spacing:-.01em}
.sz-lg .wg-kpi-v{font-size:1.3rem}
.wg-kpi-l{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:650}
.wg-kpi-d{font-size:.7rem;margin-top:1px}
.wg-donut{width:100%;height:100%;max-height:118px}
.wg-donut-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.sz-sm .wg-donut{max-height:96px}
.wg-split{display:flex;align-items:center;gap:14px;flex:1;min-height:0}
.wg-split .wg-donut-wrap{flex:0 0 auto;width:118px}
.wg-legend{flex:1;font-size:.78rem;color:var(--ink,#1f2430)}
.wg-legend>div{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.wg-legend b{margin-left:auto;color:var(--navy);font-weight:730}
.wg-dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto}
.wg-flag{margin-top:6px;background:rgba(201,162,39,.13);color:#8a6d12;font-size:.72rem;font-weight:600;padding:5px 8px;border-radius:8px}
.wg-tri{display:flex;gap:10px;justify-content:space-between;text-align:center}
.wg-tri>div{flex:1;display:flex;flex-direction:column}
.wg-tri-v{font-size:1.45rem;font-weight:760;line-height:1}
.sz-lg .wg-tri-v{font-size:1.7rem}
.wg-tri-l{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:650;margin-top:2px}
.wg-prop{display:flex;height:9px;border-radius:5px;overflow:hidden;margin-top:12px;background:#e3e6ee}
.wg-prop span{display:block;height:100%}
.wg-foot{margin-top:auto}

/* ---- scorecard rework: KPI rows, hero, mini chips ---- */
.wg-kpirow{display:flex;justify-content:space-between;gap:12px}
.wg-kpirow .wg-kpi{flex:1;min-width:0}
.wg-hero{margin-bottom:8px}
.wg-hero-v{display:block;font-size:2.1rem;font-weight:770;color:var(--navy);line-height:1;letter-spacing:-.02em}
.wg-hero-l{display:block;font-size:.76rem;color:var(--muted);margin-top:3px}
.wg-chips-mini .wg-chip{font-size:10px;padding:2px 7px;font-weight:650}
.wg-mini-title{font-size:.7rem;color:var(--muted);font-weight:650;margin:9px 0 1px;display:flex;align-items:center;gap:4px}
.wg-mini-title .wg-dot{width:8px;height:8px}
.wg-ddtrend{margin-top:2px}

/* ---- board wiggle mode (rearrange / delete) ---- */
@keyframes wgjiggle{0%{transform:rotate(-.55deg)}50%{transform:rotate(.55deg)}100%{transform:rotate(-.55deg)}}
.wg-board.wg-wiggle .wg{overflow:visible;animation:wgjiggle .26s ease-in-out infinite}
.wg-board.wg-wiggle .wg:nth-child(2n){animation-delay:-.13s}
.wg-board.wg-wiggle .wg:nth-child(3n){animation-delay:-.07s}
.wg-board.wg-wiggle .wg .wg-tools{opacity:1}
.wg-board.wg-wiggle .wg .wg-remove{position:absolute;top:-9px;left:-9px;width:27px;height:27px;border-radius:50%;
  background:#b3261e;color:#fff;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.32);z-index:7;
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.wg-board.wg-wiggle .wg .wg-remove:hover{background:#9a1f18}
.wg-done{background:var(--navy);color:#fff;border:none;padding:9px 20px;border-radius:999px;font-weight:700;font-size:.92rem;cursor:pointer}

/* ---- per-widget edit (lifted, with drop-down menu) ---- */
.wg.wg-selected{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:18px;position:relative;z-index:6;
  box-shadow:0 12px 32px rgba(20,30,60,.18)}
.wg-menu{position:fixed;z-index:90;display:flex;flex-direction:column;gap:3px;min-width:188px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 16px 40px rgba(20,30,60,.24)}
.wg-menu-sizes{display:flex;gap:6px;justify-content:center;padding:2px 2px 8px;border-bottom:1px solid var(--line);margin-bottom:3px}
.wg-menu-sizes button{flex:1;height:40px;border:1px solid var(--line);background:#f6f7fa;border-radius:10px;color:var(--navy);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,color .12s}
.wg-menu-sizes button:hover{background:#eef0f5}
.wg-menu-sizes button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.wg-menu-sizes svg{width:18px;height:18px;fill:currentColor}
.wg-menu-item{border:none;background:transparent;text-align:left;padding:9px 11px;border-radius:9px;font-size:.92rem;
  font-weight:650;color:var(--navy);cursor:pointer}
.wg-menu-item:hover{background:rgba(30,42,82,.06)}
.wg-menu-del{color:#b3261e}
.wg-menu-del:hover{background:rgba(179,38,30,.08)}

/* ---- scorecard 2x2 + tap-to-cycle (only on the selected widget) + workforce month numbers ---- */
.wg-kpi2x2{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-top:2px}
.wg-cyc{border-radius:9px}
.wg-cyc-big{display:block}
.wg.wg-selected .wg-cyc{cursor:pointer;outline:1.5px dashed rgba(201,162,39,.7);outline-offset:3px}
.wg.wg-selected .wg-cyc:active{background:rgba(30,42,82,.05)}
.wg-monthnums{display:flex;justify-content:space-around;gap:8px;margin-top:4px}
.wg-mn{display:flex;flex-direction:column;align-items:center;line-height:1.25}
.wg-mn-m{color:var(--muted);font-weight:650;font-size:.64rem;text-transform:uppercase;letter-spacing:.03em}
.wg-mn-n{color:#8a6d12;font-weight:740;font-size:.82rem}
.wg-mn-d{color:#b3261e;font-weight:740;font-size:.82rem}

/* ===== mobile swipe-paged dashboard (dashpager.js) — desktop unaffected ===== */
@media (max-width: 820px){
  body.dpaged{overflow:hidden;height:100vh;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
  body.dpaged .topbar{position:fixed;top:0;left:0;right:0;z-index:60}
  body.dpaged .wrap{max-width:none;margin:0;padding:0}

  .dpager{position:fixed;left:0;right:0;bottom:0;top:var(--tbh,56px);overflow:hidden;
    background:var(--bg,#f4f5f8);touch-action:pan-y}
  .dpager-track{display:flex;height:100%;will-change:transform}
  .dpage{flex:0 0 100%;width:100%;height:100%;box-sizing:border-box;overflow:hidden;
    padding:14px 15px 26px;display:flex;flex-direction:column;gap:10px}
  .dpage > *{flex:0 0 auto}
  .dpage .wg-board{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;min-height:0}
  .dpage-home .hero{margin:0}
  .dpage-home .announce{margin:0}
  .dpage-home .wg-bar{margin:0}
  /* compact hero on the paged home -> frees room for a 3rd widget row when the announcement is minimized */
  .dpaged .dpage-home .hero{padding:13px 16px;gap:12px}
  .dpaged .dpage-home .hero-welcome{font-size:1.3rem;line-height:1.15}
  .dpaged .dpage-home .hero-flavor{display:none}
  .dpaged .dpage-home .hero-client-label{display:none}
  .dpaged .dpage-home .hero-client img{max-height:34px;padding:4px 8px}
  /* the calendar page is dense — allow it to scroll vertically (only page that does) */
  .dpage-cal{overflow:hidden}

  .dpager-dots{position:fixed;left:0;right:0;bottom:11px;z-index:55;display:flex;justify-content:center;
    gap:7px;pointer-events:none}
  .dpager-dot{width:7px;height:7px;border-radius:50%;background:rgba(30,42,82,.24);transition:width .2s,background .2s}
  .dpager-dot.on{width:22px;border-radius:4px;background:var(--navy)}
  .dpager-calhint{position:fixed;left:4px;top:50%;transform:translateY(-50%);z-index:55;pointer-events:none;
    color:var(--navy);opacity:.45;font-size:26px;font-weight:800;line-height:1;transition:opacity .2s}
}

/* ===== period-count stat widget (suppliers / clients / checks) ===== */
.wg-t-stat{align-items:center;justify-content:center;text-align:center}
.wg-stat{display:flex;flex-direction:column;align-items:center;gap:5px}
.wg-stat-n{font-weight:800;font-size:2.1rem;line-height:1;color:var(--navy)}
.wg-stat-l{color:var(--muted);font-size:.8rem}

/* ===== slide-up sheet (mobile: client lists open here so the calendar page never scrolls) ===== */
.dsheet-back{position:fixed;inset:0;background:rgba(20,28,50,.34);z-index:95;opacity:0;transition:opacity .22s;pointer-events:none}
.dsheet-back.on{opacity:1;pointer-events:auto}
.dsheet{position:fixed;left:0;right:0;bottom:0;z-index:96;background:#fff;border-radius:18px 18px 0 0;
  box-shadow:0 -10px 40px rgba(20,30,60,.22);transform:translateY(101%);transition:transform .27s cubic-bezier(.22,.61,.36,1);
  max-height:72vh;display:flex;flex-direction:column}
.dsheet.on{transform:translateY(0)}
.dsheet-grab{width:38px;height:4px;border-radius:2px;background:#d8dbe4;margin:9px auto 2px}
.dsheet-head{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 11px;border-bottom:1px solid var(--line)}
.dsheet-title{font-weight:800;color:var(--navy);font-size:1rem}
.dsheet-x{border:none;background:#f1f2f6;width:32px;height:32px;border-radius:50%;color:var(--navy);font-size:17px;line-height:1;cursor:pointer}
.dsheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 0 26px;display:flex;flex-direction:column;position:relative}
.dsheet-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line)}
.dsheet-row:last-child{border-bottom:none}
.dsr-client{color:var(--navy);font-size:.9rem;font-weight:600;min-width:0;overflow-wrap:anywhere}
.dsr-sup{color:var(--muted);font-size:.76rem;text-align:right;flex:0 0 auto;max-width:46%;overflow-wrap:anywhere}
.dsheet-body.mode-client .dsr-sup{cursor:pointer;text-decoration:underline;text-decoration-color:rgba(30,42,82,.3);text-underline-offset:2px}
.dsheet-body.mode-client .dsr-sup:active{color:var(--navy)}
.dsheet-body.mode-supplier .dsr-client{cursor:pointer;text-decoration:underline;text-decoration-color:rgba(30,42,82,.3);text-underline-offset:2px}
.dsheet-body.mode-supplier .dsr-sup{color:#6b7384}

/* on mobile the calendar's client lists become tappable rows that open the sheet (no inline expand) */
@media (max-width: 820px){
  .dpaged .dpage-cal .cal-bw{margin:8px 0 0}
  .dpaged .dpage-cal .cal-bw>.cal-bw-list{display:none !important}
  .dpaged .dpage-cal .cal-bw>summary{cursor:pointer}
}

.tb-home{text-decoration:none;color:inherit;cursor:pointer}
.tb-home:hover .tb-title{opacity:.85}

/* drag-to-move */
.wg-dragging{z-index:300;box-shadow:0 14px 34px rgba(20,26,48,.30);opacity:.97;transition:none !important;cursor:grabbing}
.wg-dragging .wg-tools,.wg-dragging::after{display:none !important}
.wg-ph{border:2px dashed var(--gold);border-radius:14px;background:rgba(201,162,39,.07);box-sizing:border-box}

/* ===== Add-widget button: only visible in edit/wiggle mode ===== */
.wg-bar .wg-add{display:none}   /* add lives in the wiggle edit bar now, on every page */

/* ===== Add-widget gallery (iOS-style, categorized) ===== */
.wg-gal-back{position:fixed;inset:0;background:rgba(18,26,48,.5);z-index:1200;opacity:0;transition:opacity .2s}
.wg-gal-back.on{opacity:1}
.wg-gal{position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);width:min(680px,100%);max-height:90vh;
  background:#f4f6fa;border-radius:18px 18px 0 0;z-index:1201;display:flex;flex-direction:column;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);box-shadow:0 -10px 40px rgba(10,20,50,.3)}
.wg-gal.on{transform:translate(-50%,0)}
@media(min-width:700px){
  .wg-gal{bottom:auto;top:50%;border-radius:18px;transform:translate(-50%,-46%) scale(.98);opacity:0;
    transition:opacity .2s ease,transform .2s ease}
  .wg-gal.on{transform:translate(-50%,-50%) scale(1);opacity:1}
}
.wg-gal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;flex:0 0 auto}
.wg-gal-title{font-size:1.15rem;font-weight:800;color:var(--navy)}
.wg-gal-done{border:none;background:none;color:var(--navy);font-weight:700;font-size:.95rem;cursor:pointer;padding:4px 6px}
.wg-gal-body{overflow-y:auto;padding:0 16px 26px;-webkit-overflow-scrolling:touch}
.wg-gal-cat{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 4px 8px}
.wg-gal-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:10px}
.wg-gal-name{font-weight:700;color:var(--navy);font-size:.98rem}
.wg-gal-desc{font-size:.82rem;color:var(--muted);margin:2px 0 11px;line-height:1.4}
.wg-gal-sizes{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.wg-gal-prev{border:none;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;-webkit-tap-highlight-color:transparent}
.wg-gal-render{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.05);
  overflow:hidden;display:flex;align-items:stretch;justify-content:stretch;transition:transform .1s,box-shadow .1s,border-color .1s}
.wg-gal-prev:active .wg-gal-render{transform:scale(.94)}
.wg-gal-prev:hover .wg-gal-render{box-shadow:0 5px 16px rgba(30,42,82,.16);border-color:var(--gold)}
.prev-sm .wg-gal-render{width:164px;height:150px}
.prev-wd .wg-gal-render{width:340px;max-width:100%;height:150px}
.prev-lg .wg-gal-render{width:340px;max-width:100%;height:311px}
.wg-gal-szlbl{font-size:.72rem;font-weight:600;color:var(--muted)}

/* mini-preview internals */
.pv{width:100%;height:100%;box-sizing:border-box;padding:9px 10px;color:var(--navy);display:flex;flex-direction:column}
.pv-center{align-items:center;justify-content:center;text-align:center}
.pv-cap{font-size:8px;font-weight:800;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;line-height:1.2}
.pv-big{font-size:19px;font-weight:800;line-height:1.05;margin-top:3px}
.pv-sub{font-size:9px;color:#b3261e;font-weight:700;margin-top:1px}
.pv-trend svg{width:100%;height:34px;margin-top:auto}
.pv-trend polyline{fill:none;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:auto}
.pv-grid i{height:26px;background:#eef1f7;border-radius:5px;display:block}
.pv-bars{display:flex;gap:6px;align-items:flex-end;height:64px;margin-top:auto}
.pv-bars b{flex:1;background:var(--navy);border-radius:3px 3px 0 0;display:block}
.pv-donut{width:50px;height:50px}
.pv-ring-bg{fill:none;stroke:#e6e9ef;stroke-width:4}
.pv-ring{fill:none;stroke:var(--navy);stroke-width:4;stroke-linecap:round}
.pv-ring-num{fill:var(--navy);font-size:9px;font-weight:800;text-anchor:middle}
.pv-statnum{font-size:30px;font-weight:800;line-height:1}
.pv-ic{font-size:24px;color:var(--gold);line-height:1}
.pv-shortlbl{font-size:11px;font-weight:700;margin-top:5px}

/* ===== real-widget previews in the gallery (scaled) ===== */
.wg-gal-stage{position:absolute;top:0;left:0;transform-origin:top left;pointer-events:none}
.wg-gal-stage > .wg{width:100%!important;height:100%!important;margin:0!important;box-shadow:none!important}
.wg-gal-stage .wg-remove,.wg-gal-stage .wg-tools,.wg-gal-stage .wg-cyc-hint{display:none!important}
.wg-gal-loading{position:relative}
.wg-gal-loading::after{content:"";position:absolute;inset:0;border-radius:12px;
  background:linear-gradient(100deg,#eef1f6 30%,#f7f9fc 50%,#eef1f6 70%);background-size:200% 100%;
  animation:wg-shimmer 1.1s linear infinite}
@keyframes wg-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== wiggle edit bar (fixed, every page): Add + Showcase + Done ===== */
.wg-editbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:10px;padding:8px 10px;background:#fff;border:1px solid var(--line);
  border-radius:999px;box-shadow:0 10px 30px rgba(20,30,60,.22)}
.wg-eb-add{display:inline-flex;align-items:center;gap:5px;background:var(--gold);color:#3a2e07;border:none;
  padding:9px 16px;border-radius:999px;font-weight:800;font-size:.9rem;cursor:pointer}
.wg-eb-add b{font-size:1.05rem;line-height:1}
.wg-eb-showcase{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:var(--navy);
  cursor:pointer;padding:0 4px;user-select:none}
.wg-eb-showcase input{width:16px;height:16px;accent-color:var(--navy);cursor:pointer}
@media(max-width:420px){ .wg-eb-add{padding:9px 13px;font-size:.84rem} .wg-eb-showcase{font-size:.8rem} .wg-done{padding:9px 16px} }

/* ===== dashboard "Edit" entry button (replaces the verbose Add-widget label) ===== */
.wg-editbtn{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--line);color:var(--navy);
  padding:7px 16px;border-radius:999px;font-weight:700;font-size:.88rem;cursor:pointer;transition:border-color .15s}
.wg-editbtn:hover{border-color:var(--gold)}
body.wg-editing .wg-editbtn{display:none}

/* --- v344: advanced accounting widgets --- */
.wg-t-acctnet .wg-acct-hero{display:flex;flex-direction:column;gap:2px;padding:6px 2px 2px}
.wg-acct-big{font-size:26px;font-weight:700;color:#1e2a52;letter-spacing:-.5px;line-height:1.05}
.wg-acct-sub{font-size:12px;color:#6b7280;font-weight:600}
.wg-t-accttax .wg-acct-top{display:flex;gap:10px;margin:2px 0 8px}
.wg-acct-fig{flex:1;background:#f6f7fb;border:1px solid #e6e9f2;border-radius:9px;padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.wg-acct-v{font-size:18px;font-weight:700;color:#1e2a52;letter-spacing:-.3px}
.wg-acct-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#8a93a6}
.wg-acct-states{border-top:1px solid #eef0f6;padding-top:6px}
.wg-acct-cap{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#8a93a6;margin-bottom:3px}
.wg-acct-row{display:flex;justify-content:space-between;align-items:center;padding:3px 2px;font-size:13px;border-bottom:1px solid #f4f5f9}
.wg-acct-row:last-child{border-bottom:none}
.wg-acct-st{color:#374151;font-weight:600}
.wg-acct-amt{color:#1e2a52;font-weight:700;font-variant-numeric:tabular-nums}
.wg-foot{margin-top:7px}

/* --- v345: accounting widget size variants + DD/live tabs --- */
.wg-acctnet-sm .wg-acct-big{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:clip;font-variant-numeric:tabular-nums}
.wg-acct-sect-b{margin-top:9px;border-top:1px solid #eef0f6;padding-top:7px}
.wg-acct-tabs .wg-tabr{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.wg-tabbar{display:flex;gap:4px;margin:0 0 7px}
.wg-tabbar label{flex:1;text-align:center;font-size:11px;font-weight:700;padding:4px 6px;border-radius:7px;background:#f0f2f7;color:#6b7280;cursor:pointer;user-select:none;transition:background .12s,color .12s}
.wg-pane.pane-lc{display:none}
.wg-acct-tabs .r-dd:checked ~ .wg-tabbar .t-dd{background:#1e2a52;color:#fff}
.wg-acct-tabs .r-lc:checked ~ .wg-tabbar .t-lc{background:#1e2a52;color:#fff}
.wg-acct-tabs .r-lc:checked ~ .pane-dd{display:none}
.wg-acct-tabs .r-lc:checked ~ .pane-lc{display:block}

/* --- v346: net breakdown rows, JS tabs, borderless small tax, smaller small-net amount --- */
.wg-net-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 2px;border-bottom:1px solid #f4f5f9}
.wg-net-row:last-child{border-bottom:none}
.wg-net-lbl{font-size:12.5px;color:#52607a;font-weight:600}
.wg-net-amt{font-size:17px;color:#1e2a52;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.wg-acctnet-sm .wg-acct-big{font-size:17px}            /* slightly smaller so the last digit fits */
.wg-tab{flex:1;text-align:center;font-size:11px;font-weight:700;padding:4px 6px;border-radius:7px;background:#f0f2f7;color:#6b7280;cursor:pointer;border:none;font-family:inherit;transition:background .12s,color .12s}
.wg-tab.on{background:#1e2a52;color:#fff}
.wg-tax-sm{display:flex;gap:12px}
.wg-tax-sm-item{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.wg-tax-sm-v{font-size:20px;font-weight:700;color:#1e2a52;letter-spacing:-.3px;white-space:nowrap}
.wg-tax-sm-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#8a93a6}

/* --- v347: fit medium net (3 rows), bump small net, stack small tax --- */
.wg-acctnet-sm .wg-acct-big{font-size:18px}          /* a little bigger, still fits */
.wg-acctnet-wd .wg-tabbar{margin-bottom:5px}
.wg-acctnet-wd .wg-tab{padding:3px 6px}
.wg-acctnet-wd .wg-net-row{padding:2px 2px}
.wg-acctnet-wd .wg-net-amt{font-size:16px}
.wg-acctnet-wd .wg-net-lbl{font-size:12px}
.wg-tax-sm{display:flex;flex-direction:column;gap:10px;justify-content:center;flex:1}
.wg-tax-sm-row{display:flex;justify-content:space-between;align-items:baseline}
.wg-tax-sm-v{font-size:22px;font-weight:700;color:#1e2a52;letter-spacing:-.3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wg-tax-sm-l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#8a93a6}