/* Hair Clinic Stockroom. Palette and type follow the clinic's recovery guide and walkthrough. */
:root {
  --bg:#f5f7fc; --card:#fff; --sunk:#edf1fa; --ink:#0e1a40; --mute:#55618a; --line:#d9e0f2;
  --blue:#1b3fd0; --on:#fff; --link:#1b3fd0; --band:#1b3fd0; --band-ink:#fff; --band-mute:#d3dcff; --band-line:rgba(255,255,255,.28);
  --bar-soft:#a9b8f0;
  --ok:#17734f; --okbg:#dff3ea; --wait:#8a5a00; --waitbg:#fdf0d4; --bad:#b3261e; --badbg:#fbe6e3; --info:#1b3fd0; --infobg:#e4e9fb;
  --head:Newsreader,Georgia,"Times New Roman",serif; --body:Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b1126; --card:#131b38; --sunk:#0f1730; --ink:#e6ebfb; --mute:#9aa6cf; --line:#26305a;
  --blue:#3a5cf0; --link:#a3b5ff; --band:#1c339f; --band-mute:#c5d0fb;
  --bar-soft:#3a4a8f;
  --ok:#6fdcae; --okbg:#12382b; --wait:#f0c36a; --waitbg:#3a2d0d; --bad:#ff9a90; --badbg:#3a1a18; --info:#a3b5ff; --infobg:#1b2650;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:2rem} h2{font-size:1.3rem} h3{font-size:1.08rem}
p{margin:0}
a{color:var(--link)}
[hidden]{display:none!important}
.mute{color:var(--mute)} .small{font-size:.85rem} .num{font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:14px}
.label{font-size:.82rem;color:var(--mute);font-weight:500}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--link);outline-offset:2px}

/* Controls */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 .88rem var(--body);padding:7px 13px;border-radius:8px;cursor:pointer;min-height:38px;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--link)}
.btn.primary{background:var(--blue);color:var(--on);border-color:var(--blue)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{background:var(--bad);color:var(--card);border-color:var(--bad)}
.btn.quiet{border-color:transparent;background:none;color:var(--link);padding-inline:8px}
.btn.big{min-height:46px;font-size:1rem;width:100%}
.btn[disabled]{opacity:.5;cursor:default}
.tap{width:38px;padding:0;font-size:1.1rem}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 11px;min-height:40px;width:100%;min-width:0}
textarea{font-size:.88rem;line-height:1.5}
label.f{display:flex;flex-direction:column;gap:5px;font-size:.84rem;font-weight:600;color:var(--mute);min-width:0}
label.check{display:flex;gap:9px;align-items:center;font-weight:500}
label.check input{width:18px;min-height:18px;height:18px}
input.sm{width:82px;min-height:36px;padding:5px 8px;text-align:right;font-variant-numeric:tabular-nums}
.err{color:var(--bad);font-size:.88rem;font-weight:500;min-height:1.3em}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:62px}
.pw-toggle{position:absolute;right:4px;top:4px;bottom:4px;border:0;background:none;color:var(--link);font:600 .82rem var(--body);padding:0 10px;cursor:pointer;border-radius:6px}

/* Sign-in page */
.landing{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100dvh}
.landing-art{background:var(--band);color:var(--band-ink);padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:40px;overflow:hidden}
.landing-copy{max-width:30rem;display:flex;flex-direction:column;gap:14px}
.landing-copy h1{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.012em}
.landing-copy p{font-size:1.1rem;color:var(--band-mute);max-width:26rem}
.shelf{display:flex;flex-direction:column;gap:15px;max-width:34rem;width:100%}
.shelf span{display:block;position:relative;height:9px;border-radius:5px;background:rgba(255,255,255,.16)}
.shelf span::before{content:"";position:absolute;inset:0;width:var(--level);border-radius:5px;background:#fff;transform-origin:left;animation:fill 1s cubic-bezier(.2,.7,.2,1) calc(var(--i)*70ms) backwards}
.shelf span::after{content:"";position:absolute;top:-4px;bottom:-4px;width:2px;left:var(--tick);background:var(--band-mute)}
@keyframes fill{from{transform:scaleX(0)}}
.landing-form{display:grid;place-items:center;padding:32px max(20px,env(safe-area-inset-right,0px)) 32px max(20px,env(safe-area-inset-left,0px))}
.form-box{width:min(380px,100%)}
.form-box h2{font-size:1.9rem;margin-bottom:4px}

/* App frame */
.shell{display:grid;grid-template-columns:96px minmax(0,1fr);min-height:100dvh}
.rail{position:sticky;top:0;height:100dvh;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:14px 8px}
.rail-logo{display:block;width:36px;height:36px;margin:0 auto 12px}
.rail-spacer{flex:1}
.rail button{appearance:none;border:0;background:none;color:var(--mute);font:600 .76rem var(--body);display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:10px;cursor:pointer;position:relative}
.rail button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail button:hover{color:var(--ink);background:var(--sunk)}
.rail button[aria-current="page"]{background:var(--blue);color:var(--on)}
.badge{position:absolute;top:3px;right:16px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font:700 .68rem/18px var(--body);text-align:center;background:var(--bad);color:var(--card)}
.rail button[aria-current="page"] .badge{background:var(--card);color:var(--blue)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--infobg);color:var(--info);display:grid;place-items:center;font:700 .8rem var(--body)}
.topbar{display:none}
.page{padding:28px clamp(20px,3.5vw,40px) 64px;display:flex;flex-direction:column;gap:20px;min-width:0;max-width:1240px;width:100%}
.pagehead{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between}
.pagehead>div:first-child{flex:1 1 280px;min-width:0}
.pagehead p{color:var(--mute);margin-top:3px;max-width:62ch}
.acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{appearance:none;border:0;background:none;color:var(--mute);font:600 .95rem var(--body);padding:9px 12px;border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;display:flex;gap:7px;align-items:center}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blue)}
.count{font:600 .72rem var(--body);font-variant-numeric:tabular-nums;padding:1px 7px;border-radius:9px;background:var(--sunk);color:var(--mute)}
.count.bad{background:var(--badbg);color:var(--bad)} .count.warn{background:var(--waitbg);color:var(--wait)}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tools .search{flex:1 1 240px}
.tools select{flex:0 1 190px;width:auto}
.note{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;background:var(--infobg);color:var(--info);padding:10px 14px;border-radius:10px;font-size:.9rem}
.note p{flex:1 1 280px;min-width:0}

/* Dashboard status band: the one loud thing in the app */
.status{background:var(--band);color:var(--band-ink);border-radius:16px;padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:22px}
.status-top{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:flex-start}
.status-date{color:var(--band-mute);font-size:.92rem;margin-bottom:6px}
.status h1{font-size:clamp(1.65rem,3vw,2.5rem);line-height:1.12;max-width:26em}
.status .btn{background:transparent;color:var(--band-ink);border-color:var(--band-line)}
.status .btn:hover{border-color:var(--band-ink)}
.status .btn.primary{background:var(--band-ink);color:#14309f;border-color:var(--band-ink)}
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.stat{appearance:none;font:inherit;color:inherit;text-align:left;background:rgba(255,255,255,.1);border:0;border-radius:10px;padding:11px 13px;cursor:pointer;min-width:0;display:flex;flex-direction:column;gap:1px}
.stat:hover{background:rgba(255,255,255,.2)}
.stat strong{font:600 2.1rem/1.1 var(--head);font-variant-numeric:tabular-nums}
.stat span{font-size:.82rem;color:var(--band-mute);line-height:1.25}
.stat.bad,.stat.warn{background:#fff}
.stat.bad:hover,.stat.warn:hover{background:#f1f4ff}
.stat.bad strong{color:#b3261e} .stat.warn strong{color:#8a5a00}
.stat.bad span,.stat.warn span{color:#3a4670}
.status button:focus-visible{outline-color:var(--band-ink)}

/* Panels */
.grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
.col{display:flex;flex-direction:column;gap:20px;min-width:0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0}
.panel-head{min-height:58px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.panel-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.li{display:flex;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);min-width:0}
.li:last-child{border-bottom:0}
.li>.grow{flex:1;min-width:0}
.none{padding:16px;color:var(--mute);font-size:.92rem}
.cases{font:600 1.5rem/1 var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.cases small{font:500 .78rem var(--body);color:var(--mute);margin-left:3px}
.cases.bad{color:var(--bad)} .cases.warn{color:var(--wait)}

/* Charts */
.chart{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;height:148px;align-items:end;border-bottom:1px solid var(--line);position:relative;padding-top:18px}
.bar{appearance:none;border:0;background:none;padding:0 12%;height:100%;display:flex;align-items:flex-end;position:relative;cursor:default}
.bar i{display:block;width:100%;background:var(--bar-soft);border-radius:4px 4px 0 0;min-height:0}
.bar.now i{background:var(--blue)}
.bar b{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--h) + 4px);font:600 .84rem var(--body);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.bar .tip{display:none;position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:calc(var(--h) + 8px);background:var(--ink);color:var(--card);padding:4px 9px;border-radius:6px;font:500 .8rem var(--body);white-space:nowrap}
.bar:hover .tip,.bar:focus-visible .tip{display:block}
.bar:hover b,.bar:focus-visible b{visibility:hidden}
.axis{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;font-size:.76rem;color:var(--mute);text-align:center;margin-top:5px}
.hbar{display:grid;grid-template-columns:7.2em minmax(0,1fr) 4.2em;gap:10px;align-items:center;font-size:.88rem}
.hbar .track{height:8px;background:var(--sunk);border-radius:4px;overflow:hidden}
.hbar .track i{display:block;height:100%;background:var(--blue);border-radius:4px}
.hbar .v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}

/* Tables and lists */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th{font-size:.8rem;color:var(--mute);text-align:left;font-weight:600;padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
tr.group td{background:var(--sunk);padding:0}
.groupbtn{appearance:none;border:0;background:none;color:var(--ink);width:100%;display:flex;align-items:center;gap:8px;padding:8px 14px;font:600 1.02rem var(--head);cursor:pointer;text-align:left}
.groupbtn svg{width:14px;height:14px;fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .12s}
.groupbtn[aria-expanded="true"] svg{transform:rotate(90deg)}
.groupbtn .meta{margin-left:auto;display:flex;gap:7px;align-items:center;font:500 .78rem var(--body);color:var(--mute);white-space:nowrap}
.name{appearance:none;background:none;border:0;padding:0;color:var(--ink);font:600 .95rem var(--body);text-align:left;cursor:pointer}
.name:hover{color:var(--link);text-decoration:underline}
.sub{display:flex;flex-wrap:wrap;gap:3px 8px;align-items:center;font-size:.82rem;color:var(--mute);margin-top:1px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{display:inline-block;font:600 .73rem var(--body);padding:2px 8px;border-radius:12px;background:var(--sunk);color:var(--mute);white-space:nowrap}
.chip.bad{background:var(--badbg);color:var(--bad)} .chip.warn{background:var(--waitbg);color:var(--wait)} .chip.ok{background:var(--okbg);color:var(--ok)} .chip.info{background:var(--infobg);color:var(--info)}
.lot{display:inline-block;font:600 .75rem var(--body);font-variant-numeric:tabular-nums;padding:0 6px;border:1px dashed var(--mute);border-radius:4px;color:var(--mute);white-space:nowrap}
.level{display:flex;flex-direction:column;gap:5px;min-width:110px}
.qty{font:600 1rem var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.qty small{font:400 .78rem var(--body);color:var(--mute);margin-left:3px}
.gauge{display:block;position:relative;height:6px;background:var(--sunk);border-radius:3px;min-width:80px}
.gauge i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--blue)}
.gauge.new{opacity:.5}
.gauge.low i{background:var(--wait)} .gauge.out i{background:var(--bad)}
.gauge b{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);transform:translateX(-1px)}
.adj{display:flex;gap:6px;justify-content:flex-end}
.foot{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between;color:var(--mute);font-size:.85rem}
.savebar{position:sticky;bottom:12px;z-index:4;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:var(--ink);color:var(--card);padding:10px 14px;border-radius:10px}
.savebar .btn{background:var(--card);color:var(--ink);border-color:var(--card)}
.diff-bad{color:var(--bad);font-weight:600} .diff-ok{color:var(--ok);font-weight:600}
.kits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:start}
.kit-add{padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;background:var(--sunk)}
.kit-add select{flex:1 1 180px;width:auto}
.day{font:600 1.02rem var(--head);padding:7px 16px;background:var(--sunk)}
.entry{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:4px 12px;padding:10px 16px;border-bottom:1px solid var(--line);align-items:start}
.entry:last-child{border-bottom:0}
.entry.undone .main{opacity:.55;text-decoration:line-through}
.entry ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:3px 14px;font-size:.85rem}
.minus{color:var(--bad);font-weight:600;font-variant-numeric:tabular-nums} .plus{color:var(--ok);font-weight:600;font-variant-numeric:tabular-nums}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:30px 22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.empty p{max-width:62ch}

/* Dialogs */
dialog{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:0;width:min(640px,calc(100vw - 24px));max-height:88dvh;overflow:auto}
dialog::backdrop{background:rgba(7,12,29,.6)}
.dh{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:18px 20px 8px}
.db{padding:6px 20px 18px;display:flex;flex-direction:column;gap:18px}
.df{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--card)}
.df .spacer{flex:1}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.span{grid-column:1/-1}
.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.meta-grid>div{min-width:0;overflow-wrap:anywhere}
.warnbox{background:var(--waitbg);color:var(--wait);padding:8px 12px;border-radius:8px;font-size:.88rem}
.lines{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:6px}
.lines>div{display:flex;gap:10px;align-items:center;padding:7px 11px;border-bottom:1px solid var(--line)}
.lines>div:last-child{border-bottom:0}
.lines .n{flex:1;min-width:0}
.secret{font:600 1.15rem ui-monospace,Menlo,Consolas,monospace;background:var(--sunk);padding:10px 14px;border-radius:8px;overflow-wrap:anywhere;user-select:all}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--ink);color:var(--card);padding:9px 15px;border-radius:9px;display:flex;gap:12px;align-items:center;width:max-content;max-width:calc(100vw - 32px);font-size:.92rem;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#toast button{appearance:none;background:none;border:0;color:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:4px}
dialog.cam{width:min(560px,calc(100vw - 24px))}
.cam-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.cam-head strong{font:600 1.2rem var(--head)}
.cam-view{position:relative;background:#070c1d;aspect-ratio:4/3;overflow:hidden}
.cam-view video{width:100%;height:100%;object-fit:cover;display:block}
.cam-target{position:absolute;inset:18% 12%;border:3px solid #fff;border-radius:12px;box-shadow:0 0 0 999px rgba(7,12,29,.35)}
.cam-view.label .cam-target{inset:27% 8%}
.cam-status{padding:12px 16px 4px;font-weight:500}
.cam-actions{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px}
.cam-actions .btn{flex:1}
.cam-type{padding:4px 16px 8px}
.cam-row{display:flex;gap:8px}
.cam-note{padding:4px 16px 14px}
.fill-row{display:flex;flex-wrap:wrap;gap:8px}
.fill-row .btn{flex:1 1 150px}
.code{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.name-picks{display:flex;flex-wrap:wrap;gap:6px}
.name-picks button{appearance:none;border:1px solid var(--line);background:var(--sunk);color:var(--ink);font:500 .85rem var(--body);padding:5px 10px;border-radius:14px;cursor:pointer;text-align:left}
.name-picks button:hover{border-color:var(--link)}
.ro .w{display:none!important}
.not-admin .adm{display:none!important}

@media (max-width:1080px){.grid{grid-template-columns:minmax(0,1fr)}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .landing{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100dvh}
  .landing-art{padding:28px 20px 24px;gap:22px}
  .landing-copy h1{font-size:2.5rem}
  .landing-copy p{font-size:1rem}
  .shelf{gap:10px}
  .shelf span:nth-child(n+5){display:none}
  .shell{display:block;padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .rail{position:fixed;inset:auto 0 0 0;height:auto;z-index:20;flex-direction:row;justify-content:space-around;gap:0;border-right:0;border-top:1px solid var(--line);padding:5px max(4px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))}
  .rail-logo,.rail-spacer{display:none}
  .avatar{width:23px;height:23px;font-size:.66rem}
  .rail button{flex:1;min-width:0;font-size:.7rem;padding:5px 0}
  .badge{right:calc(50% - 22px)}
  .page{padding:18px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
  h1{font-size:1.7rem}
  .status{border-radius:14px;padding:18px}
  .status-top .acts{width:100%}
  .status-top .acts .btn{flex:1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat strong{font-size:1.8rem}
  table.stock thead{display:none}
  table.stock tr.it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:10px 14px;border-bottom:1px solid var(--line)}
  table.stock tr.it td{display:block;padding:0;border:0;min-width:0}
  table.stock tr.group,table.stock tr.group td{display:block}
  table.stock td.c-name{grid-column:1/-1}
  table.stock td.c-status{order:3}
  table.stock td.c-exp{order:4;grid-column:1/-1;font-size:.85rem}
  table.stock td.c-status{grid-column:1/-1}
  .tools select{flex:1 1 40%}
  #toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .savebar{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .entry{grid-template-columns:60px minmax(0,1fr)}
  .entry>.acts{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.shelf span::before{animation:none}.groupbtn svg{transition:none}}