@import url("themes.css");
:root[data-theme="midnight"] .ok{background:#0f3d2a;color:#b7f0d0}:root[data-theme="midnight"] .er,:root[data-theme="midnight"] .info.no{background:#4a1616;color:#fecaca}
:root[data-theme="midnight"] .av.ok{background:#14532d;color:#bbf7d0}:root[data-theme="midnight"] .av.lo{background:#5a3a07;color:#fde68a}:root[data-theme="midnight"] .av.z{background:#5b1a1a;color:#fecaca}
:root[data-theme="midnight"] .bd.s{background:#5a3a07;color:#fde68a}:root[data-theme="midnight"] .bd.x{background:#2a3550;color:#a9b6cf}
*{box-sizing:border-box}body{margin:0;font-family:Inter,"Segoe UI",system-ui,Arial,sans-serif;background:var(--bg);color:var(--tx);font-size:14px}
a{color:var(--link)}small{color:var(--mu);font-weight:400}.mu{color:var(--mu)}
/* sidebar */
.side{position:fixed;inset:0 auto 0 0;width:var(--sw);background:linear-gradient(180deg,var(--side1),var(--side2));padding:20px 14px;transition:transform .25s;z-index:20;overflow-y:auto;color:#fff}
.side h2{color:#fff;font-size:21px;margin:0 0 2px;letter-spacing:.5px}.side small{color:var(--sidemu)}.side hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:14px 0}
.grp{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--sidemu);margin:16px 6px 4px}
.side a{display:block;padding:9px 12px;margin:2px 0;border-radius:10px;color:var(--sidetx);text-decoration:none;font-size:14px;transition:.15s}
.side a:hover{background:rgba(255,255,255,.1);color:#fff}.side a.on{background:var(--onbg);color:var(--ontx);font-weight:700}
.main{margin-left:var(--sw);padding:22px 26px;transition:margin .25s}
body.c .side{transform:translateX(-100%)}body.c .main{margin-left:0}
.top{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--bd);border-left:5px solid var(--g);border-radius:14px;padding:12px 16px;margin-bottom:18px}
.top h2{margin:0;font-size:18px;flex:1;color:var(--hd)}.top>span{color:var(--mu);font-size:13px}
.burger{background:var(--g);color:#fff;border:0;border-radius:10px;width:38px;height:38px;font-size:18px;cursor:pointer}
/* cards */
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:18px;margin-bottom:16px;box-shadow:0 2px 6px rgba(6,78,48,.05)}
.card h3{margin:0 0 12px;color:var(--hd)}.card h3 small{font-size:12px;margin-left:6px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}.cols .card{margin:0}
/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:16px}.card .kpis{margin-bottom:0}
.kpi{background:var(--card);border:1px solid var(--bd);border-top:4px solid var(--g);border-radius:14px;padding:14px 16px;box-shadow:0 2px 6px rgba(6,78,48,.05);transition:.3s}
.kpi span{display:block;color:var(--mu);font-size:12.5px}.kpi b{display:block;font-size:26px;color:var(--hd);margin-top:4px}
.kpi.hi{background:linear-gradient(135deg,var(--hi1),var(--hi2));border-color:var(--hd)}.kpi.hi span{color:var(--hitx)}.kpi.hi b{color:#fff}
.kpi.warn{border-top-color:var(--warn)}.kpi.warn b{color:var(--warn)}
.kpis.sm .kpi b{font-size:20px}.kpi.bump{box-shadow:0 0 0 3px var(--gm)}
/* tables */
table{width:100%;border-collapse:collapse;font-size:13px}th{background:var(--g);color:#fff;text-align:left;white-space:nowrap}th,td{padding:9px 10px;border-bottom:1px solid var(--bd);vertical-align:top}
tr:hover td{background:var(--hov)}.n{text-align:right}td.em{text-align:center;color:var(--mu);padding:22px}.em{color:var(--mu)}.bad{color:var(--bad)}.old{color:var(--bad);font-weight:600}
.tw{overflow-x:auto}table.sm td{vertical-align:middle}tr.tot td{background:var(--gl);font-weight:700;color:var(--hd);border-top:2px solid var(--g)}
.av{display:inline-block;min-width:34px;text-align:center;padding:3px 10px;border-radius:99px;font-weight:700}.av.ok{background:var(--g2);color:var(--hd)}.av.lo{background:#fde9c8;color:#8a5a00}.av.z{background:#fee2e2;color:#991b1b}
.bar{height:8px;background:var(--g2);border-radius:99px;overflow:hidden;width:90px;display:inline-block;vertical-align:middle;margin-right:6px}.bar i{display:block;height:100%;background:var(--g)}
/* forms */
input,select,textarea{padding:10px 12px;border:1px solid var(--ib);border-radius:10px;font-size:14px;max-width:100%;background:var(--inp);color:var(--tx);outline:0;font-family:inherit}
input:focus,select:focus{border-color:var(--link);box-shadow:0 0 0 3px var(--g2)}
.btn{background:var(--g);color:#fff;border:1px solid var(--g);padding:10px 18px;border-radius:10px;cursor:pointer;text-decoration:none;font-size:14px;display:inline-block;font-weight:600;transition:.15s;font-family:inherit}
.btn:hover{background:var(--gh)}.btn.o{background:var(--card);color:var(--link)}.btn.o:hover{background:var(--gl)}
.f{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
.ok{background:#dcfce7;color:#14532d;padding:12px;border-radius:10px;margin-bottom:14px;border-left:4px solid var(--g)}.er{background:#fee2e2;color:#991b1b;padding:12px;border-radius:10px;margin-bottom:14px;border-left:4px solid #dc2626}
.info{background:var(--gl);border:1px solid var(--g2);border-left:4px solid var(--g);border-radius:10px;padding:10px 14px;margin-top:6px}.info.no{background:#fee2e2;border-color:#fecaca;border-left-color:#dc2626;color:#991b1b}
.bd{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--g2);color:var(--hd)}.bd.x{background:#e7e7e7;color:#666}.bd.s{background:#fde9c8;color:#8a5a00}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chips a{padding:7px 14px;border:1px solid var(--g);border-radius:99px;text-decoration:none;color:var(--link);font-weight:600;font-size:13px}.chips a.on,.chips a:hover{background:var(--g);color:#fff}
.chip{display:inline-block;background:var(--gl);border:1px solid var(--g2);color:var(--hd);padding:6px 12px;border-radius:99px}
.live{display:inline-block;background:var(--gl);color:var(--hd);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:700}.live:before{content:"● ";color:var(--gm);animation:bl 1.6s infinite}@keyframes bl{50%{opacity:.25}}
.login{max-width:380px;margin:9vh auto;padding:28px}
.pg a,.pg span{padding:6px 11px;border:1px solid var(--bd);border-radius:8px;text-decoration:none;color:var(--link);margin:0 4px 4px 0;display:inline-block}.pg span{border:0}.pg a.on{background:var(--g);color:#fff}
.hero{background:linear-gradient(135deg,var(--hero1),var(--hero2) 60%,var(--hero3));min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}.hero .login{margin:0;width:100%}
@media(max-width:900px){.side{transform:translateX(-100%)}.main{margin-left:0;padding:12px}body.o .side{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35)}body.c .side{transform:translateX(-100%)}.cols{grid-template-columns:1fr}}

/* theme switcher (admin) */
.thm{position:relative}.thm summary{list-style:none;cursor:pointer;background:var(--gl);border:1px solid var(--g2);color:var(--hd);padding:8px 14px;border-radius:10px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px;user-select:none}
.thm summary::-webkit-details-marker{display:none}.thm[open] summary{background:var(--g);color:#fff;border-color:var(--link)}
.thm .menu{position:absolute;right:0;top:calc(100% + 8px);max-height:72vh;overflow:auto;background:var(--card);border:1px solid var(--bd);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:8px;min-width:270px;white-space:nowrap;z-index:30}
.thm .menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:10px 12px;border-radius:8px;cursor:pointer;font:inherit;color:var(--tx);text-align:left}
.thm .menu button:hover{background:var(--gl)}.thm .menu button.on{background:var(--gl);font-weight:700;color:var(--hd)}
.sw{display:inline-block;width:26px;height:18px;border-radius:5px;border:1px solid rgba(0,0,0,.15);flex:none}
.chk{margin-left:auto;color:var(--link)}
.cnt{display:inline-block;background:#dc2626;color:#fff;border-radius:99px;font-size:11px;font-weight:700;padding:1px 7px;margin-left:6px}
.st{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700}.st.PENDING{background:#fde9c8;color:#8a5a00}.st.APPROVED{background:#dcfce7;color:#14532d}.st.REJECTED,.st.CANCELLED{background:#fee2e2;color:#991b1b}.st.CANCELLED{background:#e7e7e7;color:#555}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.bcode{display:inline-block;background:var(--g);color:#fff;border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700;letter-spacing:.4px}
.thm .menu button .nm{flex:1}
.note{font-size:12px;color:var(--mu)}

.f.v{flex-direction:column;align-items:stretch;gap:6px;min-width:150px}.f.v .btn{width:100%;text-align:center}

/* ===== unified login / hub / module toggle ===== */
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.login.lg{max-width:420px;padding:30px 28px}
.brand{text-align:center;margin-bottom:14px}.brand h2{margin:8px 0 0;color:var(--hd);letter-spacing:.5px;font-size:24px}.brand p{margin:2px 0 0;color:var(--mu);font-size:13px}
.logo{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--hi1),var(--hi2));color:#fff;font-weight:800;font-size:19px;letter-spacing:.5px;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.brand.row{display:flex;align-items:center;gap:12px;text-align:left;margin:0;color:#fff}.brand.row .logo{width:44px;height:44px;font-size:16px;background:rgba(255,255,255,.16);box-shadow:none;border:1px solid rgba(255,255,255,.3)}
.brand.row b{display:block;font-size:18px;letter-spacing:.5px}.brand.row small{color:rgba(255,255,255,.78)}
/* role toggle (login) */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--gl);border:1px solid var(--g2);border-radius:14px;padding:4px;margin:6px 0 4px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px 9px;border-radius:11px;cursor:pointer;color:var(--mu);font-size:12.5px;font-weight:600;transition:.2s;text-align:center;line-height:1.15}
.seg label svg{font-size:22px}.seg label:hover{color:var(--hd)}
.seg input:checked+label{background:var(--g);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.seg input:focus-visible+label{outline:2px solid var(--link);outline-offset:2px}
.login .who{text-align:center;color:var(--mu);margin:10px 0 14px;font-size:13px}.login .who b{color:var(--hd)}
/* hub */
.hero.hub{display:block;padding:0;position:relative}
.hubtop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 28px;flex-wrap:wrap}
.hubr{display:flex;align-items:center;gap:10px}.hubr .out{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}.hubr .out:hover{background:rgba(255,255,255,.22)}
.hub main{max-width:880px;margin:0 auto;padding:6vh 20px 40px;color:#fff;text-align:center}
.hub h1{margin:0;font-size:clamp(26px,4.5vw,38px)}.hub .sub{color:rgba(255,255,255,.82);margin:8px 0 34px}.hub .sub .bcode{background:rgba(255,255,255,.2)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;text-align:left}
.tile{display:block;background:var(--card);color:var(--tx);border-radius:20px;padding:28px 26px;text-decoration:none;box-shadow:0 14px 40px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s;border:1px solid transparent;position:relative;overflow:hidden}
.tile:hover,.tile:focus-visible{transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.34);border-color:var(--gm);outline:0}
.tile .ti{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:linear-gradient(135deg,var(--hi1),var(--hi2));color:#fff;font-size:30px;margin-bottom:16px}
.tile h3{margin:0 0 6px;font-size:21px;color:var(--hd)}.tile p{margin:0 0 18px;color:var(--mu);line-height:1.5;font-size:14px}
.tile .go{font-weight:700;color:var(--link)}
.hub .thm summary{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}.hub .thm[open] summary{background:#fff;color:var(--hd)}
.hub .thm .menu{text-align:left}
/* Stock | Complaints toggle (top bar of both modules) */
.mod{display:inline-flex;align-items:center;gap:3px;background:var(--gl);border:1px solid var(--g2);border-radius:12px;padding:3px}
.mod a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;text-decoration:none;color:var(--mu);font-weight:700;font-size:13px;transition:.18s;white-space:nowrap}
.mod a svg{font-size:16px}.mod a:hover{color:var(--hd);background:rgba(0,0,0,.05)}
.mod a.on{background:var(--g);color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.mod a.home{padding:7px 9px}
.top .who{white-space:nowrap}
@media(max-width:900px){.top{flex-wrap:wrap}.top h2{flex:1 1 40%}.top .who{display:none}.mod a span{display:none}.mod a{padding:8px 11px}.hubtop{padding:14px}}
.tiles.one{grid-template-columns:minmax(290px,460px);justify-content:center}