/* Studio app (demo build) */
:root{--espresso:#2B211A;--mocha:#4A3728;--brun:#755942;--taupe:#9D836F;--sand:#D3BFA6;--beige:#C7AF94;--creme:#F1E8DB;--lin:#FAF5EC;--flamme:#C6A15B;--flamme-hover:#A98546;--hair:rgba(74,55,40,.14);--hair-gold:rgba(198,161,91,.55);--serif:"Cormorant Garamond",Georgia,serif;--sans:"Manrope","Segoe UI",sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--creme);color:var(--mocha);font-family:var(--sans);font-weight:300;font-size:13.5px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:var(--espresso)}
.boot{display:grid;place-items:center;height:100vh;color:var(--taupe);font-family:var(--serif);font-size:22px}

/* ------------------------------------------------------------ shell */
.app{min-height:100vh}
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.side{background:var(--espresso);color:var(--sand);padding:28px 22px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .wm{font-family:var(--serif);font-size:22px;letter-spacing:.3em;color:var(--creme);font-weight:400}
.side .wm small{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.22em;color:var(--taupe);margin-top:2px}
.side nav{margin-top:36px;display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;font-size:12.5px;letter-spacing:.04em;color:var(--sand);transition:background .25s}
.side nav a:hover{background:rgba(250,245,236,.05)}
.side nav a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.side nav a.on{background:rgba(250,245,236,.08);color:var(--creme)}
.side nav a.on svg{stroke:var(--flamme);opacity:1}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--sand)}
.side .me i{width:34px;height:34px;border-radius:50%;background:var(--mocha);display:grid;place-items:center;font-family:var(--serif);font-style:normal;color:var(--creme);font-size:15px;flex:none}
.side .me small{display:block;font-size:10.5px;color:var(--taupe)}
.side .me button{margin-left:auto;color:var(--taupe);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.side .me button:hover{color:var(--creme)}
.main{display:flex;flex-direction:column;min-width:0}
.top{height:64px;display:flex;align-items:center;gap:18px;padding:0 32px;border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--creme);z-index:5}
.top .search{flex:1;max-width:380px;height:36px;border-radius:999px;background:var(--lin);border:1px solid var(--hair);display:flex;align-items:center;padding:0 16px;color:var(--taupe);font-size:12.5px;gap:10px}
.top .search input{border:0;background:transparent;flex:1;outline:0;font-size:12.5px;color:var(--espresso)}
.top .date{margin-left:auto;font-family:var(--serif);font-size:18px;color:var(--espresso)}
.top .live{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--taupe)}
.top .live i{width:8px;height:8px;border-radius:50%;background:var(--flamme)}
.cnt{flex:1;padding:26px 32px 40px;display:flex;flex-direction:column;gap:16px;min-height:0}

/* ------------------------------------------------------------ type + atoms */
.eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--flamme-hover)}
h1,h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05;color:var(--espresso);margin:4px 0 0}
h2 em{font-style:italic;font-weight:300}
h3{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--espresso);line-height:1.15}
.muted{color:var(--taupe);font-size:12px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.head .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.head.stack{flex-direction:column;align-items:flex-start;gap:14px}
.head.stack .acts{width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--flamme);color:var(--espresso);font-weight:600;font-size:11.5px;letter-spacing:.06em;box-shadow:0 8px 20px rgba(198,161,91,.25);white-space:nowrap;transition:background .25s,transform .25s}
.btn:hover{background:var(--flamme-hover)}
.btn:disabled{opacity:.5;cursor:default}
.btn.dark{background:var(--mocha);color:var(--creme);box-shadow:none}.btn.dark:hover{background:var(--espresso)}
.btn.line{background:transparent;color:var(--mocha);box-shadow:none;border:1px solid var(--hair)}.btn.line:hover{background:var(--lin)}
.btn.sm{padding:8px 14px;font-size:10.5px}
.btn.xs{padding:5px 10px;font-size:9.5px;box-shadow:none}
.btn.danger{color:var(--taupe)}.btn.danger:hover{color:#8a3b2f;border-color:#8a3b2f;background:transparent}
.pill{display:inline-block;padding:4px 9px;border-radius:999px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;background:var(--flamme);color:var(--espresso);white-space:nowrap}
.pill.soft{background:var(--creme);color:var(--brun);border:1px solid var(--hair)}
.pill.wait{background:var(--sand);color:var(--espresso)}
.pill.dark{background:var(--mocha);color:var(--creme)}
.pill.off{background:transparent;color:var(--taupe);border:1px solid var(--hair)}
.card{background:var(--lin);border:1px solid var(--hair);border-radius:12px;padding:20px}
.card .eyebrow{display:block;margin-bottom:8px}
.grid{display:grid;gap:16px}
.kpi{grid-template-columns:repeat(4,1fr)}
.kpi .card b{display:block;font-family:var(--serif);font-weight:300;font-size:38px;line-height:1;color:var(--espresso)}
.kpi .card small{display:block;color:var(--taupe);font-size:11.5px;margin-top:8px}
.two{grid-template-columns:2.1fr 1fr;align-items:start}
.wrapw{display:flex;gap:20px;align-items:flex-start}
.wrapw>.card:first-child{flex:1;min-width:0}
.panel{width:320px;flex:none;display:flex;flex-direction:column;gap:6px;position:sticky;top:90px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--taupe);padding:0 10px 10px;border-bottom:1px solid var(--hair);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--hair);color:var(--mocha);vertical-align:middle;white-space:nowrap}
td.n{font-family:var(--serif);font-size:16px;color:var(--espresso)}
td.t{font-family:var(--serif);font-size:17px;color:var(--mocha)}
td.r{text-align:right}
tr.on td{background:var(--creme)}
tr.click{cursor:pointer}tr.click:hover td{background:rgba(241,232,219,.6)}
.sico{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair-gold);background:var(--creme);display:inline-grid;place-items:center;vertical-align:middle;margin-right:10px}
.sico img{width:23px;height:23px}
.av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mocha);color:var(--creme);font-family:var(--serif);font-size:12px;letter-spacing:.04em;margin-right:10px;vertical-align:middle;flex:none}
.av.lg{width:46px;height:46px;font-size:18px}
.cap{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cap .bar{width:48px;height:4px;border-radius:2px;background:var(--sand);overflow:hidden}
.cap .bar i{display:block;height:100%;background:var(--flamme)}
.tog{display:inline-block;width:36px;height:20px;border-radius:10px;background:var(--sand);position:relative;vertical-align:middle;cursor:pointer;transition:background .25s}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--lin);transition:left .25s}
.tog.on{background:var(--flamme)}.tog.on::after{left:19px;background:var(--espresso)}
.note{font-size:11.5px;color:var(--taupe);line-height:1.5;padding:12px 14px;background:var(--lin);border:1px solid var(--hair);border-radius:10px}
.alert{display:flex;align-items:center;gap:12px;padding:12px 16px;border-left:2px solid var(--flamme);background:var(--lin);border-radius:0 10px 10px 0;font-size:12.5px}
.alert b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--espresso)}
.alert .btn{margin-left:auto}
.seg{display:inline-flex;gap:4px;background:var(--lin);border:1px solid var(--hair);border-radius:999px;padding:4px}
.seg button{padding:7px 16px;border-radius:999px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--taupe)}
.seg button.on{background:var(--mocha);color:var(--creme)}
.empty{padding:30px;text-align:center;color:var(--taupe);font-family:var(--serif);font-size:18px}
.err{color:#8a3b2f;font-size:12px}

/* ------------------------------------------------------------ forms */
.field{border-bottom:1px solid var(--hair);padding:10px 0 8px;display:flex;flex-direction:column;gap:3px}
.field label{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--taupe)}
.field span,.field .v{font-family:var(--serif);font-size:17px;color:var(--espresso)}
.field .v.sm{font-family:var(--sans);font-size:12.5px}
.field input,.field select,.field textarea{border:0;background:transparent;outline:0;font-family:var(--serif);font-size:17px;padding:2px 0;width:100%}
.field input.sm,.field select.sm{font-family:var(--sans);font-size:12.5px}
.field textarea{font-family:var(--sans);font-size:12.5px;resize:vertical;min-height:54px}
.field:focus-within{border-bottom-color:var(--flamme)}
.field .pill{font-family:var(--sans)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}
.lvl{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.lvl label{display:grid;grid-template-columns:14px 1fr;gap:1px 10px;padding:6px 10px;border:1px solid var(--hair);border-radius:8px;font-size:11px;color:var(--taupe);align-items:start;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:300}
.lvl label input{display:none}
.lvl label i{width:12px;height:12px;border-radius:50%;border:1px solid var(--taupe);margin-top:2px}
.lvl label b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--espresso);line-height:1.1}
.lvl label small{grid-column:2;line-height:1.35}
.lvl label.on{border-color:var(--flamme);background:var(--creme)}.lvl label.on i{background:var(--flamme);border-color:var(--flamme)}
.acts-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ------------------------------------------------------------ dialogs + toasts */
dialog{margin:auto;position:fixed;inset:0;max-height:92vh;overflow:auto;border:0;border-radius:14px;background:var(--lin);color:var(--mocha);padding:26px 28px;width:min(520px,92vw);box-shadow:0 40px 80px -30px rgba(43,33,26,.5)}
dialog::backdrop{background:rgba(43,33,26,.35);backdrop-filter:blur(2px)}
dialog h3{font-size:26px;margin-bottom:4px}
dialog .muted{margin-bottom:10px}
dialog form{display:flex;flex-direction:column}
.toasts{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{background:var(--espresso);color:var(--creme);padding:12px 18px;border-radius:10px;font-size:12.5px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);animation:up .3s var(--ease)}
.toast.bad{background:#8a3b2f}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login .box{width:min(400px,100%);background:var(--lin);border:1px solid var(--hair);border-radius:16px;padding:40px 36px;text-align:center}
.login img{width:150px;margin-bottom:12px}
.login form{text-align:left;margin-top:18px}
.login .btn{width:100%;margin-top:22px}
.login .foot{margin-top:18px;font-size:12px;color:var(--brun)}
.login .foot button{color:var(--espresso);font-weight:600;border-bottom:1px solid var(--flamme)}

/* ------------------------------------------------------------ schedule week */
.week{display:grid;grid-template-columns:repeat(7,1fr);background:var(--lin);border:1px solid var(--hair);border-radius:12px;overflow:hidden;flex:1}
.day{border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:6px;padding:0 6px 8px;min-width:0}
.day:first-child{border-left:0}
.day.on{background:rgba(241,232,219,.6)}
.hd{margin:0 -6px 6px;padding:12px 8px 10px;text-align:center;border-bottom:1px solid var(--hair);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--taupe)}
.hd b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--mocha);letter-spacing:0}
.day.on .hd b{color:var(--espresso)}
.ev{border-radius:8px;padding:8px 9px 9px;background:var(--creme);border:1px solid var(--hair-gold);font-size:10.5px;line-height:1.3;min-width:0;cursor:pointer;transition:transform .2s}
.ev:hover{transform:translateY(-1px)}
.ev .tm{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--serif);font-size:15px;color:var(--espresso)}
.ev b{display:block;font-family:var(--serif);font-weight:400;font-size:13.5px;color:var(--espresso);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev small{display:block;color:var(--brun);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev small.cp{color:var(--taupe);margin-top:2px}
.ev small.cp em{font-style:normal;font-size:8px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--flamme-hover)}
.ev.aer{background:var(--sand);border-color:var(--sand)}
.ev.sel{background:var(--mocha);border-color:var(--mocha)}.ev.sel .tm,.ev.sel b{color:var(--creme)}.ev.sel small{color:var(--sand)}
.ev.off{opacity:.45;text-decoration:line-through}

/* ------------------------------------------------------------ POS + catalogue */
.pos{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start}
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.prod{background:var(--lin);border:1px solid var(--hair);border-radius:12px;padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px;min-width:0;cursor:pointer;transition:transform .2s,border-color .2s}
.prod:hover{transform:translateY(-1px);border-color:var(--hair-gold)}
.prod .ph{aspect-ratio:2/1;border-radius:8px;background:linear-gradient(160deg,var(--creme),var(--sand));display:grid;place-items:center;margin-bottom:8px;overflow:hidden}
.prod .ph img{width:100%;height:100%;object-fit:cover}
.prod .ph span{font-family:var(--serif);font-size:19px;letter-spacing:.12em;color:var(--brun);opacity:.55}
.prod b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--espresso);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod small{color:var(--taupe);font-size:11px}
.prod .pr{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-family:var(--serif);font-size:17px;color:var(--mocha);white-space:nowrap}
.prod .pr em{font-style:normal;font-family:var(--sans);font-size:11px;color:var(--taupe)}
.prod .pr .pill{font-size:8px;padding:3px 7px;letter-spacing:.1em}
.prod.sel{border-color:var(--flamme);box-shadow:0 0 0 1px var(--flamme) inset}
.prod.out .ph{opacity:.5}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{background:var(--lin);border:1px solid var(--hair);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px;min-height:96px;cursor:pointer;transition:transform .2s,border-color .2s}
.tile:hover{transform:translateY(-1px);border-color:var(--hair-gold)}
.tile b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--espresso)}
.tile small{color:var(--taupe);font-size:11px}
.tile .p{margin-top:auto;font-family:var(--serif);font-size:20px;color:var(--mocha)}
.cart{display:flex;flex-direction:column;position:sticky;top:90px}
.cart .cl{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:13px}
.cart .cl b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--espresso)}
.cart .cl .q{display:inline-flex;align-items:center;gap:6px}
.cart .cl .q button{width:22px;height:22px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;font-size:13px}
.cart .tot{display:flex;justify-content:space-between;font-size:12px;color:var(--taupe);padding:5px 0}
.cart .tot.big{font-family:var(--serif);font-size:26px;color:var(--espresso);padding-top:12px;margin-top:6px;border-top:1px solid var(--hair-gold)}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.stk{display:flex;align-items:center;gap:8px}
.stk b{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--espresso);margin-right:6px}
.mv div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--hair);font-size:11.5px;color:var(--brun)}
.mv b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--espresso)}

/* ------------------------------------------------------------ reports */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px}
.bars i{flex:1;background:var(--sand);border-radius:4px 4px 0 0;position:relative;min-height:2px}
.bars i.hi{background:var(--flamme)}
.bars i::after{content:attr(data-l);position:absolute;top:100%;left:0;right:0;text-align:center;font-size:9.5px;color:var(--taupe);margin-top:6px;letter-spacing:.08em}
.bars i b{position:absolute;bottom:100%;left:0;right:0;text-align:center;font-family:var(--serif);font-size:12px;color:var(--mocha);margin-bottom:4px;font-weight:400}
.don{display:flex;align-items:center;gap:18px}
.don .ring{width:110px;height:110px;border-radius:50%;position:relative;flex:none}
.don .ring::after{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--lin)}
.leg div{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0}
.leg i{width:10px;height:10px;border-radius:50%}
.leg b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--espresso);margin-left:auto;padding-left:14px}

@media(max-width:1100px){.kpi{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}.pos{grid-template-columns:1fr}.prods{grid-template-columns:repeat(3,1fr)}.panel{width:100%;position:static}.wrapw{flex-direction:column}}
@media(max-width:820px){.shell{grid-template-columns:1fr}.side{position:static;height:auto;padding:16px 18px}.side nav{flex-direction:row;flex-wrap:wrap;margin-top:12px}.side .me{margin-top:12px}.top{padding:0 16px}.cnt{padding:18px 16px 30px}.week{grid-template-columns:1fr}.day{border-left:0;border-top:1px solid var(--hair)}.prods{grid-template-columns:repeat(2,1fr)}.tiles{grid-template-columns:1fr 1fr}}

/* period navigation */
.navbtn{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;border:1px solid var(--hair);background:var(--lin);color:var(--mocha);font-size:20px;line-height:1;vertical-align:middle;margin:0 6px;letter-spacing:0;text-transform:none;font-weight:400;transition:background .2s}
.navbtn:hover{background:var(--creme);border-color:var(--hair-gold)}
.navbtn.today{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--flamme-hover)}

/* ------------------------------------------------------------ dropdowns (same look as the site) */
.dd{position:relative;display:block}
.dd-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font:inherit;color:var(--espresso);background:transparent;border:0;border-bottom:1px solid var(--hair);padding:4px 0;cursor:pointer;text-align:left;transition:border-color .3s}
.field .dd-btn span{font-family:var(--serif);font-size:17px}
.field select.sm+.dd-btn span,.dd.sm .dd-btn span{font-family:var(--sans);font-size:12.5px}
.dd-btn i{width:8px;height:8px;border-right:1.5px solid var(--mocha);border-bottom:1.5px solid var(--mocha);transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease);flex:none}
.dd.open .dd-btn,.dd-btn:focus-visible{border-bottom-color:var(--flamme);outline:none}
.dd.open .dd-btn i{transform:translateY(2px) rotate(225deg)}
.dd-list{position:absolute;left:-14px;right:-14px;top:calc(100% + 8px);z-index:40;margin:0;padding:6px 0;list-style:none;background:var(--lin);border:1px solid var(--hair);border-radius:8px;box-shadow:0 30px 60px -24px rgba(43,33,26,.4);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);max-height:300px;overflow:auto}
.dd.open .dd-list{opacity:1;transform:none;pointer-events:auto}
.dd-list li{position:relative;padding:11px 16px;font-size:13px;color:var(--mocha);cursor:pointer;transition:padding .3s var(--ease),background .3s var(--ease);white-space:nowrap}
.dd-list li::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;background:var(--flamme);border-radius:2px;transform:scaleY(0);transition:transform .3s var(--ease)}
.dd-list li:hover{background:var(--creme);padding-left:24px}
.dd-list li:hover::before{transform:scaleY(1)}
.dd-list li[aria-selected="true"]{color:var(--flamme-hover);font-weight:500}
.dd-list li[aria-selected="true"]::after{content:"";position:absolute;right:16px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--flamme);transform:translateY(-50%)}
/* toolbar (pill) variant */
.dd-pill{display:inline-block;vertical-align:middle}
.dd-pill .dd-btn{border:1px solid var(--hair);border-radius:999px;padding:9px 16px;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--mocha);background:transparent}
.dd-pill .dd-btn:hover{background:var(--lin)}
.dd-pill.open .dd-btn{border-color:var(--flamme)}
.dd-pill .dd-list{left:0;right:auto;min-width:100%}
.dd-pill .dd-list li{font-size:12.5px}
/* icon picker */
.icopick{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 2px}
.icopick button{width:46px;height:46px;border-radius:50%;border:1px solid var(--hair);background:var(--creme);display:grid;place-items:center;transition:border-color .2s,background .2s,transform .2s}
.icopick button img{width:30px;height:30px}
.icopick button:hover{border-color:var(--hair-gold);transform:translateY(-1px)}
.icopick button.on{background:var(--flamme);border-color:var(--flamme)}
/* class-type checklist */
.checks{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border:1px solid var(--hair);border-radius:999px;background:var(--creme);cursor:pointer;font-size:12.5px;color:var(--mocha);transition:border-color .2s,background .2s}
.chk input{display:none}
.chk .sico{margin:0;width:30px;height:30px}.chk .sico img{width:20px;height:20px}
.chk.on{border-color:var(--flamme);background:var(--lin);color:var(--espresso)}
.chk.on .sico{background:var(--flamme);border-color:var(--flamme)}
/* timesheets */
.clock{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--lin);border:1px solid var(--hair);border-radius:12px}
.clock .big{font-family:var(--serif);font-size:26px;color:var(--espresso);line-height:1}
.clock .muted{flex:1}
.tot-row td{font-weight:600;color:var(--espresso);border-top:1px solid var(--hair-gold)}

/* timesheets: custom period bar */
.custom-range{margin-bottom:18px;padding:16px 20px}
.custom-range .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:8px}
.custom-range label{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--taupe)}
.custom-range input[type=date]{width:auto;padding:8px 12px;font-size:13px}
.custom-range .seg{margin-left:auto}

/* décharge + contrat: reading and finger signature */
.docs-read{max-height:34vh;overflow:auto;background:var(--creme);border-radius:10px;padding:12px 14px;margin:8px 0;font-size:12.5px;line-height:1.6}
.docs-read b{display:block;font-family:var(--serif);font-weight:400;font-size:18px;color:var(--espresso);margin:6px 0 2px}
.docs-read p{white-space:pre-line;color:var(--brun)}
.docs-read img.sig{display:block;max-height:110px;max-width:260px;margin:10px 0 2px}
.docs-read small{display:block;color:var(--taupe);font-size:11px}
.signpad{position:relative;width:min(100%,340px);aspect-ratio:1/1;background:#fffdf9;border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.signpad canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:2}
.signpad .hint{position:absolute;left:0;right:0;top:44%;text-align:center;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--sand);pointer-events:none}
.signpad.inked .hint{opacity:0}
.signpad .base{position:absolute;left:12%;right:12%;bottom:24%;border-bottom:1px solid var(--sand);pointer-events:none}
.docs-read:focus,.docs-read:focus-visible{outline:none}
.signed-doc{margin:6px 0 18px}
.signed-doc>b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;color:var(--espresso)}
.signed-doc .docs-read{max-height:22vh}
.sigline{display:flex;align-items:flex-end;gap:16px;border-bottom:1px solid var(--hair);padding:4px 0 10px}
.sigline img.sig{max-height:90px;max-width:220px}
.sigline small{color:var(--taupe);font-size:11.5px;padding-bottom:6px}