/* Thread: AZL Dashboard Build — AZ Lemonade Stand dashboards (styles from the TM International build) */
:root{
  --ink:#15202B; --muted:#4A5563; --line:#DDE2E8; --line2:#EEF0F3; --axis:#B8C0CC;
  --ground:#F4F6F8; --card:#FFFFFF; --navy:#1F3864; --act:#2A4E8F; --act-soft:#8FA6CF;
  --bud:#7C8696; --ly:#C46A1B; --pos:#1E6B45; --neg:#B3261E;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:14px;line-height:1.4}
a{color:var(--act)} a:hover{color:var(--navy)}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--act);outline-offset:2px}
h1{margin:0;font-size:22px;font-weight:600}
h2{margin:0;font-size:15px;font-weight:600}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pos{color:var(--pos)!important} .neg{color:var(--neg)!important}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;box-sizing:border-box;padding:24px 16px;display:flex;align-items:center;justify-content:center}
.login{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field>span{font-weight:500}
.field input{height:44px;border:1px solid var(--axis);border-radius:8px;padding:0 12px;font:inherit;color:var(--ink)}
.btn{height:44px;padding:0 16px;border:0;border-radius:8px;background:var(--navy);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.err{color:var(--neg);font-size:13px}
.demo{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.demo a{min-height:50px;text-decoration:none;background:#F7F8FA;border:1px solid var(--line);border-radius:8px;padding:6px 12px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.demo a:hover{border-color:var(--act-soft);color:var(--ink)}
.demo small{font-size:12px;color:var(--muted)}

/* ---------- App frame: everything fits the window, no vertical scroll ---------- */
body.app{overflow:hidden}
#app.frame{height:100vh;height:100dvh;display:flex;flex-direction:column}
.topbar{flex:none;background:var(--navy);color:#fff;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand b{font-size:18px;letter-spacing:.02em}
.brand span,.who small{color:#C9D4EA}
.who{display:flex;align-items:center;gap:12px}
.who .me{display:flex;flex-direction:column;text-align:right}
.who small{font-size:12px}
.btn-ghost{height:40px;padding:0 14px;display:inline-flex;align-items:center;color:#fff;border:1px solid #6F86B5;border-radius:8px;text-decoration:none;white-space:nowrap}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.08)}
.mnav{display:none;flex:1;min-width:0;max-width:260px;height:40px;border-radius:8px;border:1px solid #6F86B5;background:#2A447A;color:#fff;font:inherit;padding:0 8px}
.shell{flex:1;min-height:0;display:flex}
nav{flex:0 0 216px;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:2px}
nav .eyebrow{padding:0 10px 6px}
nav .eyebrow.gap{padding-top:14px}
nav a{min-height:42px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 10px;border-radius:8px;border:1px solid transparent;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
nav a:hover{background:#EAEEF4;color:var(--ink);border-color:#7FB8F5;box-shadow:0 0 0 1px #7FB8F5}
nav a.credit:hover{box-shadow:none}
nav a.on{background:#E4EAF5;border-color:#C2CFE6;color:var(--navy);font-weight:600}
.badge{font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px}
.badge.flash{background:#FFF1DB;color:#7A4300}
.badge.live{background:#DCEBFF;color:#123E7A}
.badge.forecast{background:#E8E6F7;color:#3B2F86}
.badge.closed{background:#E3F1EA;color:var(--pos)}
.key{margin:14px 10px 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;padding:14px 20px 14px;overflow:hidden}
#page,#live,#wh{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}

/* Page header + pager */
.pg-head{flex:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px}
.pg-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0}
.pg-sub{color:var(--muted)}
.pg-right{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tag{padding:3px 9px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap}
.tag.flash{background:#FFF1DB;color:#7A4300}
.tag.forecast{background:#E8E6F7;color:#3B2F86}
.tag.closed{background:#E3F1EA;color:var(--pos)}
.tag.sample{background:#EEF0F3;color:#3A4452}
.source{flex:none;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pager{display:flex;align-items:center;gap:6px}
.pager[hidden]{display:none}
.pg-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--axis);background:#fff;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pg-btn:disabled{opacity:.35;cursor:default}
.dots{display:flex;gap:6px;align-items:center}
.dots button{width:28px;height:28px;border:0;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dots button span{width:9px;height:9px;border-radius:50%;background:#B8C0CC;display:block}
.dots button[aria-current="true"] span{background:var(--act);width:22px;border-radius:5px}
.pg-count{font-size:12px;color:var(--muted);min-width:60px;text-align:center}

/* Swipe deck: one screen per page of content */
.deck{position:relative;flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.deck::-webkit-scrollbar{display:none}
.screen{flex:0 0 100%;min-width:0;min-height:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;gap:10px;overflow:hidden;padding:0 1px}
.screen + .screen{margin-left:24px}
.screen.split{flex-direction:row}
.screen.split > .card{flex:1 1 0;min-width:0}

/* Cards, tiles */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}
.card.grow{flex:1}
.tiles{flex:none;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px}
.tile{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.tile .lbl{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .val{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.tile .sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row{flex:1;min-height:0;display:flex;gap:10px}
.row > .card.chart{flex:2 1 0}
.row > .card.side{flex:1 1 0}
.row > .card.post{flex:2 1 0}
.chart-head{flex:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:#3A4452}
.legend span{display:flex;align-items:center;gap:6px}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px}
.sw.dash{width:16px;height:0;border-top:2px dashed var(--bud);border-radius:0}

/* Bar chart (heights set by script to fill the space) */
.cbox{flex:1;min-height:120px;display:flex;flex-direction:column}
.bars{flex:1;min-height:0;display:flex;align-items:stretch;gap:6px;border-bottom:1px solid var(--axis)}
.grp{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}
.grp .v{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.grp.hl .v{color:var(--ink);font-weight:600}
.cols{display:flex;align-items:flex-end;justify-content:center;gap:2px;width:100%}
.cols div{border-radius:4px 4px 0 0;height:2px;transition:height .4s ease-out}
.xl{flex:none;display:flex;gap:6px;padding-top:5px}
.xl span{flex:1 1 0;min-width:0;text-align:center;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xl span.hl{color:var(--ink);font-weight:600}

/* Line chart */
.line{flex:1;min-height:0;display:flex;gap:8px}
.yt{flex:none;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:20px;font-size:11px;color:var(--muted);text-align:right;width:52px;font-variant-numeric:tabular-nums}
.plot{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.plot svg{flex:1;min-height:0;width:100%;display:block;border-bottom:1px solid var(--axis)}
.xt{flex:none;display:flex;justify-content:space-between;font-size:11px;color:var(--muted);height:16px}

/* Key-value side list */
.kvs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start}
.card.grow .kv{padding:10px 0}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--line2)}
.kv:last-child{border-bottom:0}
.kv.strong{font-weight:600}
.kv .k{display:flex;flex-direction:column;min-width:0}
.kv .k small{font-size:12px;color:var(--muted);font-weight:400}
.kv .n{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Tables */
.tbl{font-variant-numeric:tabular-nums}
.tr{display:grid;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line2);align-items:center}
.tr.th{border-bottom:1px solid var(--axis);font-size:12px;font-weight:600;color:var(--muted)}
.tr.total{border-top:1px solid var(--axis);border-bottom:0;font-weight:600}
.tr.subrow{color:var(--muted);font-size:13px}
.tr span{text-align:right;min-width:0;overflow-wrap:anywhere}
.tr span:first-child{text-align:left}
.tr.left span{text-align:left}

/* Users / admin */
.users .tr{grid-template-columns:1.3fr 1.6fr .7fr 1.9fr 140px}
.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.settings select,.settings input{height:42px;border:1px solid var(--axis);border-radius:8px;padding:0 10px;font:inherit;color:var(--ink);background:#fff;width:100%}
.settings .ro{min-height:42px;display:flex;align-items:center;color:var(--muted)}
.tr.src{grid-template-columns:minmax(0,1.5fr) 150px minmax(0,1.1fr) 72px minmax(0,1fr) 64px 176px}
.type-sel{width:100%;font:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:#fff}
.t-sm{display:none}
.tr.bt{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 64px}
.acts{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.sw-t{display:inline-flex;align-items:center;gap:4px;min-height:36px;cursor:pointer}
.sw-t input{width:18px;height:18px}
.pill{font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pill.wait{background:#EEF0F3;color:#3A4452}
.pill.ok{background:#E3F1EA;color:#1E6B45}
.pill.warn{background:#FFF1DB;color:#7A4300}
.chip{min-height:36px;padding:0 12px;border:1px solid var(--axis);border-radius:18px;background:#fff;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap}
.chip.on{background:#E4EAF5;border-color:#C2CFE6;color:var(--navy);font-weight:600}
.chip:disabled{opacity:.5;cursor:default}

/* ---------- Live ---------- */
.tag.livetag{background:#DCEBFF;color:#123E7A;display:inline-flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:#2A6FDB;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(42,111,219,.55)}70%{box-shadow:0 0 0 7px rgba(42,111,219,0)}100%{box-shadow:0 0 0 0 rgba(42,111,219,0)}}
.ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lh-next{font-size:13px;color:var(--muted)}
.prog{flex:none;height:4px;background:#EEF0F3;border-radius:2px;overflow:hidden}
.prog div{height:100%;width:0;background:var(--act);transition:width 1s linear}
.tile.bump{animation:bump 1.4s ease-out}
@keyframes bump{0%{background:#DCEBFF;border-color:#8FA6CF}100%{background:#fff;border-color:var(--line)}}
@keyframes fresh{0%{background:#DCEBFF}100%{background:transparent}}
.vb{flex:1;min-height:0;display:flex;align-items:stretch;gap:12px;border-bottom:1px solid var(--axis);overflow:hidden}
.vcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.vbar{position:relative;width:62%;max-width:64px;height:2px;background:var(--act);border-radius:4px 4px 0 0;transition:height .6s ease-out}
.vbar.bumpbar{animation:barflash 2.5s ease-out}
@keyframes barflash{0%{filter:brightness(1.4)}100%{filter:none}}
.vl{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:3px;font-size:12px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.vx{flex:none;display:flex;gap:12px;padding-top:5px}
.vx span{flex:1 1 0;min-width:0;text-align:center;font-size:12px;color:var(--muted);line-height:1.3}
.vx b{display:block;font-weight:500;color:var(--ink)}
.vx .sn{display:none}
.vs{display:block}
.plist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.pitem{padding:8px;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:1px;border-radius:6px}
.pitem.fresh{animation:fresh 3s ease-out}
.pitem.big{box-shadow:inset 3px 0 0 #C46A1B}
.ptop{display:flex;align-items:center;gap:8px;font-size:12px}
.pamt{margin-left:auto;font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.flag{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px;background:#FCE7D4;color:#8A3E00}
.chip-src{font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;background:#E4EAF5;color:var(--navy);white-space:nowrap}
.toasts{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:10px;width:320px;max-width:calc(100vw - 32px)}
.toast{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:0 8px 24px rgba(21,32,43,.16);display:flex;flex-direction:column;gap:2px;animation:in .25s ease-out}
.toast{border:3px solid var(--src,#2A6FDB)!important;box-shadow:0 8px 24px rgba(21,32,43,.18),0 0 0 3px color-mix(in srgb,var(--src,#2A6FDB) 18%,transparent)}
.toast.big{border-width:4px!important}
.toast.out{opacity:0;transform:translateX(16px);transition:all .25s}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.toast-top{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.toast .x{margin-left:auto;width:32px;height:32px;border:0;background:transparent;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;border-radius:6px}
.toast .x:hover{background:#EEF0F3}
.toast-title{font-weight:600}
.toast-amt{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.tdl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:4px 0 2px;font-size:13px}
.tdl dt{color:var(--muted)}
.tdl dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* ---------- Short screens: tighten spacing ---------- */
@media (max-height:940px){ .key{display:none} }
@media (max-height:700px){ nav a{min-height:36px} nav{padding-top:10px} }
@media (max-height:760px){
  main{gap:8px;padding-top:10px;padding-bottom:10px}
  #page,.screen{gap:8px}
  .tile{padding:8px 12px}
  .tile .val{font-size:21px}
  .tr{padding:5px 4px}
  .card{padding:10px 12px;gap:6px}
}

/* ---------- Tablets and phones ---------- */
@media (max-width:899px){
  nav{display:none}
  .mnav{display:block}
  .brand span,.who .me{display:none}
  .topbar{padding:8px 12px}
  main{padding:10px 12px}
  .tiles{--n:2 !important}
  .row{flex-direction:column}
  .screen.split{flex-direction:column}
  .source{white-space:normal}
  .tr.src{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 64px 120px}
  .tr.src .c-conn,.tr.src .c-off,.tr.src .c-type{display:none}
  .tr.src .t-sm{display:inline}
  .users .tr{grid-template-columns:1.2fr .7fr 1.3fr 118px}
  .users .tr .c-email{display:none}
  .settings{grid-template-columns:1fr}
  .vx .ln{display:none}.vx .sn{display:block}.vb,.vx{gap:6px}.vl{font-size:11px}
  .pg-count{display:none}
}
@media (max-width:480px){
  h1{font-size:19px}
  .tile .val{font-size:20px}
  .tr{gap:6px;font-size:13px}
  .tr.th{font-size:11px}
  .toasts{right:8px;left:8px;width:auto;bottom:8px}
}
@media (prefers-reduced-motion:reduce){
  .deck{scroll-behavior:auto}
  .dot,.tile.bump,.pitem.fresh,.toast,.vbar.bumpbar{animation:none}
}

.pg-auto{height:36px;padding:0 10px;border:1px solid var(--axis);border-radius:18px;background:#fff;color:var(--ink);font:inherit;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pg-auto .pa-ic{font-size:10px;width:12px;text-align:center}
.pg-auto .pa-t{font-variant-numeric:tabular-nums;min-width:62px;text-align:left}
.pg-auto[aria-pressed="true"]{background:#FFF1DB;border-color:#E8C48A}
@media (max-width:480px){.pg-auto .pa-t{display:none}}

/* Stacked bars (sales by channel) */
.cols .stk{display:flex;flex-direction:column-reverse;gap:2px;width:70%;max-width:46px;height:auto;border-radius:0;transition:none}
.cols .stk div{width:100%;border-radius:0}
.cols .stk div:last-child{border-radius:4px 4px 0 0}

/* Live: totals at the left of the channel chart */
.vb .vcol.vsep,.vx span.vsep{margin-right:14px;padding-right:14px;border-right:1px dashed var(--axis)}
.vbar.bumptot{animation:totflash 2s ease-out}
@keyframes totflash{0%{filter:brightness(1.35)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.vbar.bumptot{animation:none}}
.vx.narrow .ln{display:none}.vx.narrow .sn{display:block}

/* Live: expense bar split into COGS, selling, G&A */
.vbar.vexp{display:flex;flex-direction:column;overflow:visible;gap:0}
.vbar.vexp .seg{display:block;width:100%;flex:none}
.vbar.vexp .seg:first-of-type{border-radius:4px 4px 0 0}
.vbar.vexp .seg + .seg{border-top:2px solid #fff}
.lv-key{width:100%;font-size:12px}

.lv-key b{font-weight:600;color:var(--ink)}
.lv-key .lk-exp{margin-left:8px}
.chdot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:-1px}
.tr span.chcell{display:flex;align-items:center;gap:0;text-align:left}
.chcell .chdot{flex:none}
.chcell span{text-align:left}
@media (max-width:899px){ .cbox{min-height:90px} .lv-key{gap:4px 10px} }

/* ---------- Drill-down panel ---------- */
.dd-able{cursor:pointer}
.tile.dd-able:hover,.kv.dd-able:hover{box-shadow:inset 0 0 0 2px #C2CFE6}
.tr > span.dd-able:hover{text-decoration:underline;text-decoration-color:var(--act);text-underline-offset:3px;color:var(--act)}
.cols [data-v].dd-able:hover,.stk [data-v].dd-able:hover,.vbar.dd-able:hover,.vbar .seg.dd-able:hover{filter:brightness(1.15);outline:2px solid #15202B;outline-offset:1px}
.dd-wrap{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end}
.dd-wrap[hidden]{display:none}
.dd-back{position:absolute;inset:0;background:rgba(21,32,43,.35)}
.dd{position:relative;width:min(980px,100vw);height:100%;background:#fff;box-shadow:-12px 0 32px rgba(21,32,43,.2);display:flex;flex-direction:column;padding:16px 20px;gap:10px;animation:ddin .2s ease-out}
@keyframes ddin{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.dd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dd-kicker{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.dd-head h2{font-size:20px;margin:2px 0}
.dd-sub{font-size:13px;color:var(--muted)}
.dd-x{width:40px;height:40px;border:1px solid var(--axis);border-radius:8px;background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
.dd-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dd-sum div{border:1px solid var(--line);border-radius:8px;padding:8px 12px;display:flex;flex-direction:column}
.dd-sum span{font-size:12px}
.dd-sum b{font-size:18px;font-variant-numeric:tabular-nums}
.dd-tbl{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;font-variant-numeric:tabular-nums;overscroll-behavior:contain}
.dd-tr{display:grid;grid-template-columns:110px 130px 120px minmax(0,1.2fr) minmax(0,1.6fr) 130px;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line2);font-size:13px;align-items:center}
.dd-tr span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-tr span:last-child{text-align:right;font-weight:600}
.dd-th{font-size:12px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--axis)}
.dd-th span:last-child{font-weight:600}
.dd-roll{background:#F7F8FA;color:var(--muted);font-style:italic}
.dd-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.dd-pg{display:flex;align-items:center;gap:8px}
body.dd-open .toasts{display:none}
@media (max-width:899px){
  .dd{padding:12px}
  .dd-sum{grid-template-columns:1fr 1fr 1fr}
  .dd-sum b{font-size:14px}
  .dd-tr{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 118px;row-gap:0;column-gap:8px}
  .dd-tr span:last-child{font-size:12px}
  .dd-tr span:nth-child(3),.dd-tr span:nth-child(5){display:none}
  .dd-tr span:nth-child(2){order:3;grid-column:1 / 3;font-size:12px;color:var(--muted)}
  .dd-tr span:nth-child(4){order:2}
  .dd-tr span:last-child{order:2}
}

/* Paired stacked bars (this week vs last week) */
.cols .stk.stk-pair{width:40%;max-width:34px}
.cols .stk.stk-prior{opacity:.42}
.cols .stk.stk-empty{height:0}
.grp .v small{font-size:10px;color:var(--muted);font-weight:400}
.sw.sw-prior{background:linear-gradient(90deg,rgba(27,94,32,.42) 50%,#1B5E20 50%)}
.lv-key{display:flex;flex-direction:column;gap:4px}
.lv-key .legend b{min-width:64px}

/* Budget marker on stacked bars */
.cols{position:relative}
.bmark{position:absolute;left:50%;transform:translateX(-50%);width:min(90%,64px);height:0;border-top:2px dashed #4A5563;z-index:2}

/* popup sizes (admin: Popup size) */
.toasts{max-height:calc(100vh - 32px);overflow:visible}
.tstat{display:none;font-size:12px}
.toasts[data-size=small]{width:260px}
.toasts[data-size=small] .tdl{display:none}
.toasts[data-size=small] .tstat{display:block}
.toasts[data-size=small] .toast{padding:8px 10px}
.toasts[data-size=large]{width:440px}
.toasts[data-size=large] .toast{padding:14px 16px;font-size:16px}
.toasts[data-size=large] .toast-title{font-size:18px}
.toasts[data-size=large] .toast-amt{font-size:24px}
.toasts[data-size=large] .tdl{font-size:15px}
.snd-test{display:flex;flex-wrap:wrap;gap:6px}
.snd-test .chdot{margin-right:4px}

.snd-up{grid-column:1/-1;border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.snd-up-h{font-weight:600}
.snd-up-h small{font-weight:400;margin-left:6px}
.snd-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.snd-row b{min-width:90px}
.snd-name{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snd-file{cursor:pointer;display:inline-flex;align-items:center}
.snd-msg{font-size:12px;color:#B3261E}

.t-icon{width:30px;height:30px;flex:none}
.toasts[data-size=small] .t-icon{width:22px;height:22px}
.toasts[data-size=large] .t-icon{width:40px;height:40px}
nav a.credit{display:block;margin-top:8px;font-size:11px;color:var(--muted);text-decoration:underline;padding:0;background:none;border:0}
.f-icon{width:20px;height:20px;flex:none;vertical-align:middle;margin-right:2px}
.ic-rows{display:flex;flex-direction:column;gap:6px}
.ic-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ic-row b{min-width:200px}
.ic-prev{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;font-size:10px}
.ic-img{width:28px;height:28px;object-fit:contain}
.ic-name{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.conn-sm{display:none}
@media (min-width:900px) and (max-width:1249px){
  .tr.src{grid-template-columns:minmax(0,1.6fr) 140px 64px minmax(0,1fr) 60px 168px}
  .tr.src .c-conn{display:none}
  .tr.src .conn-sm{display:inline}
}

.cols .stk.stk-tri{width:30%;max-width:22px}
.cols .stk.stk-tri.stk-empty{height:0}

.grp .v.vbud{font-style:italic;color:#7C8696}
.lg-note{font-size:11px}
@media (min-width:900px){ .ic-rows{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px} .ic-row b{min-width:0;flex:1} .ic-name{flex:0 1 auto;max-width:150px} }
/* warehouse activity board */
.wh-board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px}
.wh-act{border:1px solid var(--line);border-top:4px solid var(--ac);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:1px;min-height:0;min-width:0;overflow:hidden}
.wh-act.bump{animation:fresh 3s ease-out}
.wh-top{display:flex;align-items:center;gap:6px;font-size:13px;min-width:0}
.wh-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-dot{width:10px;height:10px;border-radius:50%;background:var(--ac);flex:none}
.wh-n{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px}
.wh-u,.wh-v,.wh-last{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-v{font-variant-numeric:tabular-nums}
.wh-last{font-size:11px;margin-top:auto}
@media (max-width:1599px){ .wh-board{grid-template-columns:repeat(2,minmax(0,1fr))} .wh-act{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 6px;padding:5px 8px} .wh-top{flex:1 0 100%} .wh-n{font-size:16px;margin:0} .wh-last{display:none} }
@media (max-width:899px){ .wh-board{flex:0 0 auto;grid-auto-rows:auto} .wh-act{overflow:visible;min-height:auto} }
#wh-q,#wh-adj{flex:0 0 auto}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-sub{display:block;font-size:10px;color:var(--muted);font-weight:400}
.grp .v .pctb{display:block;font-size:10px;font-weight:600;line-height:1.2}
.forgot{font-size:13px;text-align:center;color:var(--ink2,#2A4E8F)}
.ok-note{font-size:13px;background:#EAF5EC;border:1px solid #CFE6D3;border-radius:6px;padding:10px 12px}
.mock-note{font-size:12px;color:var(--muted);border:1px dashed var(--line);border-radius:6px;padding:8px 10px;margin-top:8px}
.toast.fly{animation:none}
.vbar.popsrc{animation:popsrc 2.2s ease-out}
@keyframes popsrc{0%{box-shadow:0 0 0 0 rgba(21,32,43,.45);filter:brightness(1.35)}100%{box-shadow:0 0 0 14px rgba(21,32,43,0);filter:none}}
.pop-chip{position:fixed;z-index:60;transform:translate(-50%,-100%);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:12px;white-space:nowrap;pointer-events:none;box-shadow:0 4px 12px rgba(21,32,43,.25);animation:chipup 3s ease-out forwards}
@keyframes chipup{0%{opacity:0;transform:translate(-50%,-60%) scale(.6)}15%{opacity:1;transform:translate(-50%,-110%) scale(1.1)}70%{opacity:1;transform:translate(-50%,-190%) scale(1)}100%{opacity:0;transform:translate(-50%,-240%) scale(1)}}
.toast.fly-wait{opacity:0;animation:none}
.wh-act.popsrc{position:relative;z-index:2;animation:whpop 2.6s ease-out}
@keyframes whpop{0%{transform:scale(1.08);filter:brightness(1.12);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ac)}60%{transform:scale(1.03);box-shadow:0 0 0 3px #fff,0 0 0 10px transparent}100%{transform:none;filter:none;box-shadow:none}}
.vbar .seg.popsrc{position:relative;z-index:2;animation:segpop 2.6s ease-out}
@keyframes segpop{0%{transform:scaleX(1.35);filter:brightness(1.45);box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(21,32,43,.55)}60%{transform:scaleX(1.12);box-shadow:0 0 0 3px #fff,0 0 0 9px rgba(21,32,43,0)}100%{transform:none;filter:none;box-shadow:none}}
.log-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.log-f select{font:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;margin-left:4px}

.bmark.cf-min{width:100%;border-top:2px dashed #7C8696;z-index:1}
.grp .v .cf-line{color:#3B2F86}

/* warehouse documents panel */
.wh-act[data-a]{cursor:pointer}
.wh-act[data-a]:focus-visible{box-shadow:0 0 0 2px #7FB8F5;outline:none}
#wh-feed .pitem[data-no],#wh-toasts .toast[data-no],#lv-feed .pitem[data-id],#lv-toasts .toast[data-id]{cursor:pointer}
#lv-feed .pitem[data-id]:hover,#lv-feed .pitem[data-id]:focus-visible,#wh-feed .pitem[data-no]:hover,#wh-feed .pitem[data-no]:focus-visible{box-shadow:0 0 0 1px #7FB8F5;outline:none}
.wd-body{flex:1;min-height:0;overflow:auto}
.wd-tbl{height:100%;overflow:hidden}
.wd-row{cursor:pointer}
.wd-row:hover,.wd-row:focus-visible{background:#F2F5FA;outline:none}
.wd-row span:last-child{text-align:right}
.wd .dd-tr span.r{text-align:right}
.wd .dd-tr span:last-child{font-weight:400}
.wd .dd-tr.wd-l span:last-child{text-align:left}
.wd .dd-tr.wd-l span.r:last-child{text-align:right}
.wd .wd-row span:last-child{font-weight:600}
.wd-head{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 16px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#FAFBFC}
.wd-head dt{font-size:12px;color:var(--muted)}
.wd-head dd{margin:2px 0 0;font-size:14px;font-weight:500}
.wd-h3{font-size:14px;margin:0 0 6px}
.wd-lines .dd-tr{white-space:nowrap}
.wd-tot{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-top:10px;font-variant-numeric:tabular-nums;font-size:14px}
.wd-tot div{display:flex;gap:24px;min-width:260px;justify-content:space-between}
.wd-tot div.b{font-weight:700;border-top:1px solid var(--axis);padding-top:4px}
#wd-title .t-icon{width:24px;height:24px;vertical-align:-4px}
@media (max-width:899px){ .wd .wd-tbl .dd-tr{grid-template-columns:62px minmax(0,1fr) 96px!important} .wd .wd-tbl .dd-tr > span:nth-child(3),.wd .wd-tbl .dd-tr > span:nth-child(4),.wd .wd-tbl .dd-tr > span:nth-child(5){display:none} .wd .wd-tbl .dd-tr > span{order:0!important;grid-column:auto!important;font-size:13px;color:inherit} .wd-head{grid-template-columns:1fr 1fr} }
.wd .dd-kicker{flex-wrap:wrap}
.wd-cards{display:flex;flex-direction:column;gap:8px}
.wd-card{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px}
.wd-card div{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.wd-card div span:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* dashboard downloads */
.dl-wrap{position:relative;z-index:60}
.dl-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:95;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(21,32,43,.16);padding:6px;min-width:230px;display:flex;flex-direction:column}
.dl-menu[hidden]{display:none}
.dl-menu button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;border:0;background:none;padding:8px 10px;border-radius:6px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.dl-menu button small{font-size:12px;font-weight:400;color:var(--muted)}
.dl-menu button:hover,.dl-menu button:focus-visible{background:#F2F5FA;outline:none}
.dl-busy{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;background:#15202B;color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;box-shadow:0 8px 24px rgba(21,32,43,.3)}

/* light blue outline on any container under the mouse */
.card,.tile,.wh-act{transition:border-color .15s,box-shadow .15s}
.card:hover,.tile:hover,.wh-act:hover{border-color:#7FB8F5;box-shadow:0 0 0 1px #7FB8F5}
.wh-act:hover{border-top-color:var(--ac)}

/* "Just in" on popups: red badge with a pulsing dot, posting age, and one light sweep when the popup lands */
.justin{display:inline-flex;align-items:center;gap:5px;flex:none;background:#C62828;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px 2px 6px;border-radius:4px;line-height:1.5}
.justin i{width:7px;height:7px;border-radius:50%;background:#fff;animation:jpulse 1s ease-in-out infinite}
@keyframes jpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.7)}}
.toast .tage{font-size:11px;color:var(--muted);white-space:nowrap}
.toast.jnew{position:relative;overflow:hidden}
.toast.jnew::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);transform:translateX(-120%);animation:jsweep 1.1s .5s ease-out 2}
@keyframes jsweep{to{transform:translateX(120%)}}
.toasts[data-size="small"] .toast .tage{display:none}
@media (prefers-reduced-motion:reduce){.justin i,.toast.jnew::after{animation:none}}
/* period selector (Monthly, Quarterly, Year to date) */
.per-wrap{display:inline-flex;align-items:center}
.per-wrap .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.per-sel{max-width:240px;padding-right:26px;cursor:pointer;font:inherit;font-size:13px}
/* AZ Lemonade Stand logo */
.brand{align-items:center}
.brand img{height:40px;width:auto;display:block;margin:-6px 0}
.login-logo{display:block;height:110px;width:auto;margin:0 auto 10px}

/* drill-down: click a GL line to open its whole transaction */
.dd-go{cursor:pointer}
.dd-go:hover{background:#EEF5EE}
.dd-btns{display:flex;gap:8px;align-items:flex-start}
.dd-tr.dd-tx{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.5fr) 120px 120px}
.dd-tr.dd-tx span:nth-last-child(2){text-align:right;font-weight:600}
.dd-tr.dd-hit{background:#FFF6D6}
@media (max-width:700px){
  .dd-tr.dd-tx{grid-template-columns:minmax(0,1fr) 96px 96px}
  .dd-tr.dd-tx span:nth-child(2),.dd-tr.dd-tx span:nth-child(3){display:none}
  .dd-tr.dd-tx span:nth-child(1){order:0;grid-column:auto;font-size:13px;color:inherit}
}

/* drill-down list scrolls; header pinned at top, total pinned at bottom; no paging */
.dd-tbl .dd-th{position:sticky;top:0;background:#fff;z-index:1}
.dd-tbl .dd-tot{position:sticky;bottom:0;background:#F4F6F8;font-weight:700;border-top:1px solid var(--axis);border-bottom:0}
.dd-tbl .dd-tot span{font-weight:700}
.dd-pg{display:none}