:root{--disp:'Michroma',Verdana,sans-serif}

:root{--ink:#12263A;--bg:#F3F7F6;--card:#fff;--line:#d6e0df;--lagoon:#1E7F86;--sun:#F2A93B;--red:#C93C3C;--mut:#5d7078;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#E8F0F2;--bg:#0E1A24;--card:#162633;--line:#26394a;--mut:#93a7b0}}
:root[data-theme="dark"]{--ink:#E8F0F2;--bg:#0E1A24;--card:#162633;--line:#26394a;--mut:#93a7b0}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--disp)}
h2,h3{font-family:var(--disp);margin:0 0 .5rem}
header{padding:.75rem 1rem;background:#12263A;color:#fff}
header b{font:800 1.15rem var(--disp)}header i{font-style:normal;color:var(--sun)}
main{max-width:980px;margin:0 auto;padding:1rem}
button,input,select{font:inherit;color:inherit}
button{border:1px solid var(--line);background:transparent;border-radius:8px;padding:.5rem .9rem;cursor:pointer}
button.pri{background:var(--lagoon);color:#fff;border-color:var(--lagoon)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--sun);outline-offset:1px}
input,select{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--card)}
label{display:block;font-size:.85rem;color:var(--mut)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem;margin-bottom:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-bottom:1rem}
.stat{border-left:5px solid var(--lagoon);padding:.6rem .9rem;background:var(--card);border-radius:8px}
.stat.out{border-color:var(--red)}.stat.net{border-color:var(--sun)}
.stat b{display:block;font:800 1.45rem/1.1 var(--disp)}.stat span{color:var(--mut);font-size:.9rem}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line);white-space:nowrap}
td.n,th.n{text-align:right}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem;align-items:end}
.msg{margin-bottom:1rem;padding:.6rem .8rem;border-radius:8px;background:#1E7F8622}.msg.err{background:#C93C3C22}
.void{text-decoration:line-through;color:var(--mut)}
#toast{position:fixed;top:calc(env(safe-area-inset-top,0px) + .5rem);left:.5rem;right:.5rem;z-index:9;padding:.7rem 1rem;border-radius:10px;background:#1E7F86;color:#fff}#toast.err{background:#C93C3C}
.tabs{display:flex;gap:.25rem;overflow-x:auto;margin-bottom:1rem}.tabs button{white-space:nowrap}.tabs button.on,.roles button:hover{background:var(--lagoon);color:#fff;border-color:var(--lagoon)}.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem}.roles button{padding:.9rem;text-align:left}.roles small{display:block;color:inherit;opacity:.75}iframe{width:100%;height:calc(100vh - 150px);min-height:520px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}.top{display:flex;gap:.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:.8rem}.sub{color:var(--mut);font-size:.85rem;margin:.4rem 0 0}.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}


body{font:400 14.5px/1.5 var(--disp)}
h1,h2{font:600 26px/1.2 var(--disp);margin:0 0 .6rem}
h3{font:600 19px/1.25 var(--disp);margin:0 0 .6rem}
header b{font:600 18px/1.2 var(--disp)}
.top b,.top span{font:500 15px/1.3 var(--disp)}
nav button,.tabs button{font:500 13.5px/1.2 var(--disp)}
button{font:600 13.5px/1.2 var(--disp)}
.roles button b{font:600 15px/1.3 var(--disp)}
input,select,textarea{font:400 14.5px/1.4 var(--disp)}
label,small,.tag,.stat span{font:500 12px/1.35 var(--disp)}
.sub,.msg{font:400 14px/1.5 var(--disp)}
th{font:600 12.5px/1.3 var(--disp);text-transform:uppercase;letter-spacing:.04em}
td{font:400 13.5px/1.45 var(--disp)}
td b{font-weight:500}
td button{font-size:13px}
.stat b{font:600 24px/1.15 var(--disp);overflow-wrap:anywhere}
.clock{font:600 32px/1.1 var(--disp)}
.grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}


:root{--bg:#edf3f0}
header{background:linear-gradient(120deg,#0b4a3a,#14705a)}
.card,.stat{box-shadow:0 2px 8px rgba(18,38,58,.08);border-radius:14px}
button{color:#fff;border:1px solid #0f4f55;border-radius:10px;margin-bottom:3px;background:linear-gradient(#5cc0c8 0%,#1e7f86 48%,#16666d 52%,#1d7b83 100%);box-shadow:0 3px 0 #0d4a50,0 5px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.55);text-shadow:0 1px 1px rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s,filter .15s}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(3px);box-shadow:0 0 0 #0d4a50,inset 0 2px 5px rgba(0,0,0,.35)}
button.pri,.tabs button.on,nav button.on{background:linear-gradient(#86e096 0%,#34a853 48%,#248a3e 52%,#2f9d4b 100%);border-color:#1b6f31;box-shadow:0 3px 0 #145c28,0 5px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.6)}
button.pri:active,.tabs button.on:active,nav button.on:active{box-shadow:0 0 0 #145c28,inset 0 2px 5px rgba(0,0,0,.35)}
button[disabled]{opacity:.5;cursor:not-allowed}
nav,.tabs{padding-bottom:6px}


.fin-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;background:linear-gradient(120deg,#0b4a3a,#14705a);color:#fff;border-radius:14px;padding:1rem 1.2rem;margin-bottom:1rem}.fin-head h2{color:#fff;margin:0}.fin-head .per{text-align:right;font:500 12px var(--disp)}.fin-head .per b{display:block;font:600 15px var(--disp)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.75rem;margin-bottom:1rem}.kpi{display:flex;gap:.7rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.8rem;box-shadow:0 2px 8px rgba(18,38,58,.08)}.kpi .ico{width:44px;height:44px;flex:none;border-radius:12px;color:#fff;display:grid;place-items:center;font:600 16px var(--disp)}.kpi b{display:block;font:600 22px/1.15 var(--disp);overflow-wrap:anywhere}.kpi small{display:block}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.pill{display:inline-block;padding:.15rem .6rem;border-radius:6px;font:600 12px var(--disp)}.pill.green{background:#d7f2dc;color:#17692d}.pill.amber{background:#fde7a8;color:#7a5200}.pill.red{background:#f8d3d3;color:#8f1f1f}.pill.gray{background:#e3e8ea;color:#4d5d65}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.35rem}.lg{display:flex;gap:1rem;font:500 12px var(--disp);margin-bottom:.4rem}
.donutwrap{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.donutwrap ul{list-style:none;margin:0;padding:0;font:400 13px/1.9 var(--disp);flex:1;min-width:150px}.donutwrap li{display:flex;justify-content:space-between;gap:.5rem}
.tot th{background:rgba(52,168,83,.14)}

.ck{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .3rem;border-bottom:1px solid var(--line);font:400 14.5px/1.4 var(--disp);color:inherit;cursor:pointer}.ck input{width:24px;height:24px;padding:0;flex:none;accent-color:#2f9d4b}.ck.done span{opacity:.7}.ck small{color:var(--mut);margin-top:.15rem}.bar{height:12px;border-radius:99px;background:rgba(0,0,0,.12);overflow:hidden;margin-top:.5rem}.bar i{display:block;height:100%;background:linear-gradient(#86e096,#2f9d4b)}

:root{--navy:#1f3864;--stripe:#7ac142;--sidebg:#4f7f2d}
button{background:linear-gradient(#8fcb6b 0%,#70ad47 48%,#5e973a 52%,#68a443 100%);border-color:#4a7a2e;box-shadow:0 3px 0 #3d6626,0 5px 8px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.55)}
button:active{box-shadow:0 0 0 #3d6626,inset 0 2px 5px rgba(0,0,0,.35)}
button.pri,.tabs button.on,nav button.on{background:linear-gradient(#5fae78,#2f7d4f 48%,#256a40 52%,#2b744a);border-color:#1d5535;box-shadow:0 3px 0 #164428,0 5px 8px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.5)}
th{background:var(--navy);color:#fff;border-bottom:0}.tot th{background:#dbe5f1;color:var(--navy)}
.stat,.kpi{border:2px solid var(--ink);border-radius:16px}
.stat{display:flex;flex-direction:column-reverse;gap:.25rem;padding:.7rem .9rem}.stat span{font:600 13px/1.3 var(--disp)}
h2{text-transform:uppercase;letter-spacing:.02em}
.card h3{border-left:5px solid var(--stripe);padding-left:.6rem}
body.signed main{max-width:none;padding:0;margin:0}
body.signed header{display:none}
.layout{display:flex;align-items:flex-start;min-height:100vh}
.side{width:230px;flex:none;background:var(--sidebg);border-left:12px solid var(--stripe);color:#fff;padding:1rem .8rem;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.side hr{border:0;border-top:1px solid rgba(255,255,255,.35);margin:.7rem 0;width:100%}
.brand{display:flex;gap:.6rem;align-items:center}.brand .logo{font-size:30px}.brand b{font:600 15px/1.2 var(--disp);letter-spacing:.02em}.brand small{display:block;font:500 11px/1.3 var(--disp);opacity:.9;margin-top:.2rem}
.sidenav{display:flex;flex-direction:column;gap:.3rem;flex:1}
.nv{display:flex;align-items:center;gap:.6rem;text-align:left;width:100%;background:none;border:2px solid transparent;box-shadow:none;text-shadow:none;color:#fff;border-radius:12px;padding:.6rem .7rem;font:500 14px/1.2 var(--disp);margin:0}
.nv:hover{background:rgba(255,255,255,.14);filter:none}.nv:active{transform:none;box-shadow:none}
.nv.on{background:#3f6b24;border-color:#2c4a17}
.nv .ico{font-size:20px;width:26px;text-align:center;flex:none}
.who{margin-top:1rem}.who small{display:block;opacity:.85;font:500 12px var(--disp)}.who b{display:block;font:600 14px var(--disp);margin-bottom:.5rem}
.content{flex:1;min-width:0;padding:1rem 1.2rem;background:var(--card)}
.mbar{display:none}
@media(max-width:800px){body.signed header{display:block}.layout{flex-direction:column}.side{width:100%;height:auto;position:static;display:none;border-left:0;border-top:8px solid var(--stripe)}.side.open{display:flex}.content{width:100%;padding:.8rem}.mbar{display:flex;gap:.7rem;align-items:center;margin-bottom:.8rem}.mbar b{font:600 16px var(--disp)}}
iframe{height:calc(100vh - 40px)}


.content{padding-bottom:90px}
.cbar{position:fixed;bottom:0;left:242px;right:0;padding:.5rem .8rem;background:var(--card);border-top:2px solid var(--stripe);z-index:20;display:flex;justify-content:center}
.cpanel{position:fixed;bottom:62px;right:14px;width:min(600px,calc(100vw - 280px));max-height:72vh;overflow:auto;background:var(--card);border:2px solid var(--stripe);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.3);padding:1rem;z-index:30}
.cpanel[hidden]{display:none}
@media(max-width:800px){.cbar{left:0}.cpanel{left:10px;right:10px;width:auto}}
iframe{height:calc(100vh - 120px)}


:root{--disp:'Michroma',sans-serif}
*{font-synthesis:none}
h1,h2{font-size:21px;letter-spacing:.03em}
h3{font-size:15px}
button{font-size:12px;letter-spacing:.02em}
nav button,.tabs button{font-size:12px}
.nv{font-size:12px}
th{font-size:10.5px;letter-spacing:.03em}
.stat b{font-size:21px}.kpi b{font-size:19px}.clock{font-size:26px}
.stat span{font-size:11px}
.brand b{font-size:13px}.who b{font-size:12px}
.login{min-height:78vh;display:grid;place-items:center;padding:1rem}
.lcard{width:min(480px,100%);background:var(--card);border:2px solid var(--stripe);border-radius:22px;padding:1.4rem;box-shadow:0 12px 40px rgba(0,0,0,.2);text-align:left}
.lcard h2{text-align:center}.lcard .sub{text-align:center}
.avatar{width:84px;height:84px;border-radius:50%;margin:0 auto .8rem;display:grid;place-items:center;font-size:40px;background:linear-gradient(#8fcb6b,#4f7f2d);box-shadow:0 4px 0 #3d6626,0 8px 16px rgba(0,0,0,.25)}
.demo{margin:.6rem 0}.demo summary{cursor:pointer;font:500 12px var(--disp);color:var(--mut);padding:.4rem 0}
.circles{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:.6rem 0}
button.circ{background:none;border:0;box-shadow:none;text-shadow:none;color:inherit;display:flex;flex-direction:column;align-items:center;gap:.35rem;width:98px;padding:.3rem;margin:0}
button.circ:active{transform:none}
.circ .cb{width:62px;height:62px;border-radius:50%;background:linear-gradient(#8fcb6b,#4f7f2d);display:grid;place-items:center;font-size:27px;box-shadow:0 3px 0 #3d6626,0 5px 10px rgba(0,0,0,.25)}
.circ small{font:500 11px/1.3 var(--disp);text-align:center}


body{font-size:12px}
td{font:400 11.5px/1.5 var(--disp)}
input,select,textarea{font:400 12px/1.4 var(--disp)}
label,small,.tag,.stat span{font-size:10px}
.sub,.msg{font-size:11.5px;line-height:1.6}
.ck{font-size:12px}
.pill{font-size:10.5px}
h3{font-size:14px}


.side{background:transparent;color:var(--ink);border-left:5px solid var(--stripe);border-right:1px solid var(--line)}
.side hr{border-top-color:var(--line)}
.nv{color:var(--ink)}
.nv:hover{background:rgba(112,173,71,.14)}
.nv.on{background:rgba(112,173,71,.18);border-color:var(--stripe)}
.who{color:var(--ink)}
header{background:transparent;color:var(--ink);border-bottom:1px solid var(--line)}
header i{color:#4f7f2d}
.fin-head{background:transparent;color:var(--ink);border:2px solid var(--stripe)}
.fin-head h2,.fin-head .per,.fin-head .per b{color:var(--ink)}


/* ---- additions for the PHP version ---- */
.low{color:var(--red);font-weight:600}.warn{color:#b9770e}.mut{color:var(--mut)}
.stat.warn{border-color:var(--sun)}.stat.bad{border-color:var(--red)}
.kiosk{max-width:420px;margin:1rem auto;text-align:center}
.kiosk .ok{background:#1E7F8622;border-radius:10px;padding:.8rem;margin-top:1rem;text-align:left}
.kiosk .err{color:var(--red);margin-top:.75rem}
.letter{white-space:pre-wrap;font:14px/1.6 Georgia,serif;border:1px solid var(--line);padding:1.2rem;border-radius:8px;background:#fff;color:#111}
form.inline{display:inline}
textarea{width:100%;padding:.6rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:inherit;font:inherit}
.cpanel{position:fixed;right:1rem;bottom:4rem;width:min(460px,92vw);max-height:80vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem;z-index:20;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.cpanel[hidden]{display:none}
.cbar{position:fixed;right:1rem;bottom:1rem;z-index:20}
.flash{margin-bottom:1rem}
.login-wrap{min-height:90vh;display:grid;place-items:center;padding:1rem}
@media print{.side,.mbar,.cbar,.cpanel,.noprint,button,.tabs{display:none!important}.layout{display:block}.content{padding:0}}