:root{--pine:#0f3d33;--pine2:#165445;--jade:#1f8a6b;--saffron:#f2a900;--chili:#e4572e;--bg:#f1f5f2;--card:#fff;--ink:#14201c;--mut:#5b6b64;--line:#e1e9e4;--r:16px}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;min-height:100vh;display:flex}
h1,h2,h3,.brand b,.hk-amount,.stat b{font-family:'Fraunces','DM Sans',sans-serif}
a{color:inherit;text-decoration:none}
.ic{width:20px;height:20px;flex:none}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}

/* sidebar */
.side{width:250px;background:var(--pine);color:#d8ebe3;padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex:none}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.brand b{display:block;color:#fff;font-size:18px;line-height:1.1}.brand small{color:#8fb7a8;font-size:12px}
.logo{width:40px;height:40px;border-radius:12px;background:var(--saffron);color:var(--pine);display:grid;place-items:center;font:800 20px 'Fraunces',Georgia,serif;flex:none}
.side nav{display:flex;flex-direction:column;gap:4px;flex:1}
.side nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font-weight:500;transition:background .2s}
.side nav a:hover{background:rgba(255,255,255,.07)}
.side nav a.on{background:var(--saffron);color:var(--pine);font-weight:600}
.me{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-radius:12px;background:rgba(0,0,0,.18)}
.me b{display:block;color:#fff;font-size:14px}.me small{color:#8fb7a8}
.logout{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;transition:background .2s}.logout:hover{background:rgba(255,255,255,.12)}
.shell{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 32px 6px}
.top h1{font-size:26px;font-weight:800;letter-spacing:-.02em}
.m-only{display:none}
.content{padding:14px 32px 36px;flex:1}
.bottom{display:none}

/* kartu & ui */
.card{background:var(--card);border-radius:var(--r);padding:20px;border:1px solid var(--line)}
.card h3{font-size:17px;font-weight:700;margin-bottom:12px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}.card-h h3{margin:0}
.link{color:var(--jade);font-weight:600;font-size:14px}
.muted,.empty{color:var(--mut)}.empty{padding:22px 4px}
.alert{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-weight:500}
.alert.ok{background:#dff4ea;color:#0b5a3f}.alert.err{background:#fde6df;color:#9b2c10}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:12px;border:0;font:600 14px 'DM Sans',system-ui,sans-serif;cursor:pointer;transition:transform .15s,filter .2s}
.btn:active{transform:scale(.97)}.btn:hover{filter:brightness(1.06)}.btn[disabled]{opacity:.45;pointer-events:none}
.btn.primary{background:var(--pine);color:#fff}.btn.amber{background:var(--saffron);color:var(--pine)}
.btn.soft{background:#e6eee9;color:var(--pine)}.btn.ghost-w{background:rgba(255,255,255,.14);color:#fff}.btn.block{width:100%;padding:14px}
label{display:block;font-weight:600;font-size:13px;color:var(--mut)}
input,select,textarea{width:100%;margin-top:6px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font:500 15px 'DM Sans',system-ui,sans-serif;color:var(--ink);background:#fbfdfc}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px rgba(31,138,107,.18)}

/* hero kas */
.hero-kas{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--pine) 0%,var(--pine2) 100%);color:#fff;border-radius:22px;padding:30px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hk-label{color:#a9d3c3;font-weight:500}
.hk-amount{font-size:clamp(34px,6vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:4px 0}
.hk-amount.neg{color:#ffb9a6}.hk-sub{color:#8fb7a8;font-size:13px}
.hk-actions{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.steam{position:absolute;inset:0;pointer-events:none}
.steam i{position:absolute;bottom:-40px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);animation:rise 7s infinite ease-in}
.steam i:nth-child(1){left:12%}.steam i:nth-child(2){left:46%;animation-delay:2s}.steam i:nth-child(3){left:78%;animation-delay:4s}.steam i:nth-child(4){left:30%;animation-delay:1s}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}25%{opacity:1}100%{transform:translateY(-240px) scale(1.8);opacity:0}}

.period{margin:18px 0 12px}.period label{display:inline-flex;align-items:center;gap:10px}.period input{margin:0;width:auto}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.stats.three{grid-template-columns:repeat(3,1fr);margin-top:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;border-left:5px solid var(--mut)}
.stat span{color:var(--mut);font-size:13px;font-weight:500}.stat b{display:block;font-size:22px;font-weight:700;margin-top:2px}
.stat.in{border-left-color:var(--jade)}.stat.out{border-left-color:var(--chili)}.stat.net{border-left-color:var(--saffron)}
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:16px}
.grid2.rev{grid-template-columns:1fr 1.3fr}
.chart-box{position:relative;height:300px}.chart-box.sm{height:270px}
.recent{list-style:none;padding:0}
.recent li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.recent li:last-child{border:0}
.recent div{flex:1;min-width:0}.recent small{display:block;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent strong.in,.pos{color:var(--jade)}.recent strong.out,.neg{color:var(--chili)}
.dot{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none}.dot.in{background:#dff4ea;color:var(--jade)}.dot.out{background:#fde6df;color:var(--chili)}

/* laporan */
.filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.filters label{flex:1 1 140px}.filters .grow{flex:2 1 200px}.filters .btn{height:46px}
.export{display:flex;gap:8px}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--mut);font-size:13px;font-weight:600;padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl .r{text-align:right;white-space:nowrap;font-weight:600}.ket{max-width:280px}
.pill{padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600}.pill.in{background:#dff4ea;color:#0b5a3f}.pill.out{background:#fde6df;color:#9b2c10}
.thumb{border:0;padding:0;border-radius:8px;overflow:hidden;width:44px;height:44px;cursor:zoom-in;background:#e6eee9}.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.act{white-space:nowrap}.act form{display:inline}
.ib{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:0;background:#e6eee9;color:var(--pine);cursor:pointer;margin-left:4px}.ib.danger{background:#fde6df;color:var(--chili)}
.lightbox{position:fixed;inset:0;background:rgba(10,25,20,.88);display:none;place-items:center;z-index:99;padding:20px}.lightbox.open{display:grid;animation:fade .2s}
.lightbox img{max-width:100%;max-height:90vh;border-radius:12px}
@keyframes fade{from{opacity:0}}

/* form: gaya baru ada di bagian bawah file */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lbl{display:block;font-weight:600;font-size:13px;color:var(--mut);margin-bottom:6px}
.lbl em{font-style:normal;font-weight:500;opacity:.75}

/* login */
.login-body{display:block}
.login-wrap{min-height:calc(100vh - 190px);display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:32px;max-width:1080px;margin:0 auto;padding:40px 24px 60px}
.login-hero{position:relative;background:var(--pine);color:#fff;border-radius:28px;padding:48px 40px;overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:center}
.login-hero h1{font-size:clamp(34px,5vw,52px);line-height:1.05;font-weight:800;letter-spacing:-.03em;position:relative}
.login-hero .lead{color:#a9d3c3;margin-top:16px;max-width:360px;position:relative}.kicker-plain{color:var(--saffron);font-weight:600;margin-bottom:10px;position:relative}
.login-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:16px}
.login-card h2{font-size:28px}.pw{position:relative;display:block}.pw input{padding-right:70px}
.pw-btn{position:absolute;right:8px;top:12px;border:0;background:#e6eee9;border-radius:8px;padding:6px 10px;font:600 12px 'DM Sans',system-ui,sans-serif;cursor:pointer;color:var(--pine)}


/* mobile */
@media(max-width:900px){
  .side{display:none}.m-only{display:flex}
  .top{padding:14px 16px 4px;position:sticky;top:0;background:var(--bg);z-index:5}.top .brand{margin:0}.top .brand b{color:var(--pine);font-size:16px}.top .logo{width:32px;height:32px;font-size:16px;border-radius:9px}
  .top h1{display:none}.top .logout{color:var(--pine)}
  .content{padding:10px 14px 96px}
  .hero-kas{padding:22px 20px;border-radius:20px}.hk-actions{width:100%}.hk-actions .btn{flex:1}
  .stats,.stats.three{grid-template-columns:1fr 1fr}.stats.three .stat:last-child{grid-column:1/-1}
  .grid2,.grid2.rev{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .bottom{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:20;justify-content:space-around}
  .bottom a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--mut);padding:6px 10px;border-radius:12px;flex:1}
  .bottom a.on{color:var(--pine);background:#fdf1cf}
  /* tabel jadi kartu */
  .tbl thead{display:none}.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border:1px solid var(--line);border-radius:14px;padding:6px 12px;margin-bottom:10px}
  .tbl td{display:flex;justify-content:space-between;gap:14px;border:0;padding:6px 0;text-align:right}
  .tbl td::before{content:attr(data-l);color:var(--mut);font-weight:600;font-size:12.5px;text-align:left}
  .tbl td.act{justify-content:flex-end}.tbl td.act::before{content:none}.ket{max-width:none}
  .login-wrap{grid-template-columns:1fr;padding:18px 16px 40px}.login-hero{padding:32px 26px;min-height:250px;border-radius:22px}
}

/* sentuhan elegan */
:root{--saffron:#e3b04b;--bg:#f3f6f3;--r:20px}
.card,.stat{box-shadow:0 1px 2px rgba(15,61,51,.05),0 18px 40px -24px rgba(15,61,51,.3);border-color:#e8eee9}
.side{background:linear-gradient(180deg,#0f3d33,#0a2d26)}
.side nav a.on{background:linear-gradient(135deg,#efc766,#d9a438);box-shadow:0 10px 22px -12px rgba(227,176,75,.95)}
.hero-kas{background:radial-gradient(90% 140% at 100% 0%,rgba(227,176,75,.28),transparent 55%),linear-gradient(135deg,#0f3d33,#0a2d26);box-shadow:0 26px 50px -28px rgba(10,45,38,.85)}
.hero-kas::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 30px rgba(255,255,255,.03),0 0 0 60px rgba(255,255,255,.02);pointer-events:none}
.btn.primary{background:linear-gradient(135deg,#165445,#0f3d33);box-shadow:0 10px 22px -12px rgba(15,61,51,.9)}
.btn.amber{background:linear-gradient(135deg,#f2cd70,#dba93f)}
.tbl tbody tr:hover td{background:#f7faf8}
.top{backdrop-filter:blur(12px)}
.top h1{font-weight:700}
.bottom{backdrop-filter:blur(14px);background:rgba(255,255,255,.93);box-shadow:0 -12px 30px -20px rgba(15,61,51,.5)}
.link.small{display:inline-block;margin-top:6px;font-size:12.5px}
.stat b,.hk-amount{font-variant-numeric:lining-nums}

/* kategori */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cat-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.cat-head h3{margin:0}
.cat-add{display:flex;gap:8px;margin-bottom:12px}.cat-add input{margin:0}.cat-add .btn{flex:none}
.cat-list{list-style:none;padding:0}
.cat-list li{display:flex;align-items:center;gap:6px;padding:8px 0;border-bottom:1px solid var(--line)}.cat-list li:last-child{border:0}
.cat-list form.rn{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.cat-list input{margin:0;padding:9px 12px;background:transparent;border-color:transparent;font-weight:600;min-width:0}
.cat-list input:hover{border-color:var(--line)}
.used{font-size:12px;color:var(--mut);background:#eef3f0;padding:2px 10px;border-radius:99px;white-space:nowrap}
.ib[disabled]{opacity:.35;cursor:not-allowed}
@media(max-width:900px){.cat-grid{grid-template-columns:1fr}.used{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* ====== select lebih rapi ====== */
select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b64' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

/* ====== form transaksi gabungan ====== */
.form{display:flex;flex-direction:column;--acc:#1f8a6b;--acc-grad:linear-gradient(135deg,#27a07d,#1b7a5e);--acc-glow:rgba(31,138,107,.45);max-width:720px;gap:20px;padding:28px;position:relative;overflow:hidden}
.form::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--acc);transition:background .25s}
.form[data-type=out]{--acc:#e4572e;--acc-grad:linear-gradient(135deg,#ef6c43,#d4491f);--acc-glow:rgba(228,87,46,.45)}
.form label{display:block}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-glow)}
.form input:focus,.form select:focus,.form textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}

.seg{border:0;padding:0;margin:0;min-width:0}
.seg legend{padding:0;margin-bottom:8px}
.seg-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;pointer-events:none}
.seg label{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:16px;background:#fbfdfc;cursor:pointer;color:var(--mut);transition:border-color .2s,background .2s,box-shadow .2s,transform .15s}
.seg label:active{transform:scale(.98)}
.seg label:hover{border-color:#c7d6cd}
.seg b{display:block;color:var(--ink);font-size:15px;line-height:1.2}
.seg small{font-weight:500;font-size:12.5px}
.seg-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;transition:background .2s,color .2s}
.seg-in .seg-ic{background:#dff4ea;color:#1f8a6b}.seg-out .seg-ic{background:#fde6df;color:#e4572e}
#t_in:checked+label{border-color:#1f8a6b;background:#eaf7f1;box-shadow:0 0 0 3px rgba(31,138,107,.16)}
#t_in:checked+label .seg-ic{background:#1f8a6b;color:#fff}
#t_out:checked+label{border-color:#e4572e;background:#fdefea;box-shadow:0 0 0 3px rgba(228,87,46,.16)}
#t_out:checked+label .seg-ic{background:#e4572e;color:#fff}
.seg input:focus-visible+label{outline:3px solid var(--saffron);outline-offset:2px}

.amt{display:block;position:relative;margin-top:6px}
.amt i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font:700 18px 'Fraunces',serif;font-style:normal;color:var(--acc);pointer-events:none}
.amt .money{margin:0;padding:16px 16px 16px 52px;font:700 28px 'Fraunces',serif;letter-spacing:-.01em;font-variant-numeric:lining-nums}
.form textarea{resize:vertical;min-height:88px}

.upload .drop{margin:0;flex-direction:column;align-items:center;gap:6px;padding:24px 18px;border:2px dashed #b9cdc4;border-radius:16px;background:#fbfdfc;text-align:center;cursor:pointer;color:var(--mut);font-weight:500;font-size:14px;transition:background .2s,border-color .2s}
.upload .drop:hover{background:#eef5f1;border-color:var(--acc)}
.upload .drop .ic{width:30px;height:30px;color:var(--acc)}
.prev{display:block;margin-top:12px;max-width:260px;width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 10px 24px -16px rgba(15,61,51,.5)}
.chk{display:flex;gap:8px;align-items:center;margin-top:10px;font-weight:500;font-size:14px;color:var(--ink)}.chk input{width:auto;margin:0}
.btns{display:flex;gap:10px;justify-content:flex-end;padding-top:6px;border-top:1px solid var(--line);margin-top:2px;padding-top:20px}
.btn.save{background:var(--acc-grad,linear-gradient(135deg,#27a07d,#1b7a5e));color:#fff;padding:12px 26px;box-shadow:0 12px 24px -14px var(--acc-glow,rgba(31,138,107,.6))}
.btn.save[disabled]{opacity:.7}

/* ====== footer elegan ====== */
.site-footer{position:relative;margin-top:48px;width:100%;color:#a9c9bc;isolation:isolate;
  background:radial-gradient(60% 140% at 88% 0%,rgba(227,176,75,.14),transparent 60%),linear-gradient(180deg,#0f3d33 0%,#09271f 100%)}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#d9a438 22%,#f6dc95 50%,#d9a438 78%,transparent)}
.sf-inner{max-width:1120px;margin:0 auto;padding:40px 32px 28px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.sf-brand{display:flex;align-items:center;gap:14px}
.sf-brand b{display:block;color:#fff;font:700 19px/1.15 'Fraunces',serif}
.sf-brand small{color:#8fb7a8;font-size:13px}
.sf-credit{text-align:right}
.sf-credit span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7fa596}
.sf-name{display:inline-block;margin-top:6px;font:italic 700 32px/1.1 'Fraunces',serif;letter-spacing:.005em;
  background:linear-gradient(100deg,#d9a438 25%,#fff1c2 50%,#d9a438 75%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sfshine 8s ease-in-out infinite}
@keyframes sfshine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.sf-base{border-top:1px solid rgba(255,255,255,.09)}
.sf-base div{max-width:1120px;margin:0 auto;padding:15px 32px;display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;font-size:12.5px;color:#7fa596}
.login-body .site-footer{margin-top:0}

/* ====== lain-lain ====== */
@media(max-width:1100px){.stats{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .top{flex-wrap:wrap}
  .top h1{display:block;order:3;width:100%;font-size:22px;margin:10px 0 2px}
  .site-footer{margin-top:32px}
  body:not(.login-body) .site-footer{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .sf-inner{flex-direction:column;align-items:flex-start;gap:22px;padding:32px 22px 22px}
  .sf-credit{text-align:left}
  .sf-base div{padding:14px 22px}
  .form{padding:20px 18px;gap:18px}
  .amt .money{font-size:24px}
  .btns .btn{flex:1}
  .btn.save{flex:2}
  /* tombol "Catat" menonjol di navigasi bawah */
  .bottom a.add{background:none}
  .bottom a.add .ic{box-sizing:content-box;width:24px;height:24px;padding:11px;border-radius:50%;margin-top:-26px;border:4px solid #fff;color:var(--pine);background:linear-gradient(135deg,#efc766,#d9a438);box-shadow:0 10px 20px -8px rgba(217,164,56,.95)}
  .bottom a.add.on{color:var(--pine)}
}
@media(max-width:420px){.seg-ic{display:none}.seg label{padding:13px 14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

.prev[hidden]{display:none}

/* filter laporan: tinggi seragam & tombol tidak turun baris */
.filters label{flex:1 1 130px}.filters .grow{flex:2 1 170px}
.filters input,.filters select{height:46px;margin-top:6px}
.filters .btn{flex:none}

/* ====== PO, penerimaan & barang masuk ====== */
.nm{text-transform:capitalize}
.pill{display:inline-block;white-space:nowrap}
.pill.pas,.pill.ok{background:#dff4ea;color:#0b5a3f}
.pill.kurang{background:#fde6df;color:#9b2c10}
.pill.lebih{background:#e2edf8;color:#1d4f7a}
.pill.none{background:#eef3f0;color:#5b6b64}
.pill.bad{background:#fbd9d2;color:#8a1f0a}
.pill.part{background:#fff0cc;color:#855400}
.btn.sm{padding:8px 14px;font-size:13px;border-radius:10px}
.btn.sm .ic{width:16px;height:16px}
.btn.danger-soft{background:#fde6df;color:#9b2c10}
.stats.five{grid-template-columns:repeat(5,1fr);margin-top:14px}
.stat.bad{border-left-color:#c0392b}
.of{font:500 14px 'DM Sans',system-ui,sans-serif;color:var(--mut)}
.small-t{font-size:13px}
.err-pill{background:#fde6df;color:#9b2c10}
.hint{display:block;margin-top:6px;font-size:13px;font-weight:600;color:var(--mut);min-height:18px}
.hint.pas{color:#0b7a55}.hint.kurang{color:#c2410c}.hint.lebih{color:#1d5f95}
.opt{font-style:normal;font-weight:500;opacity:.75}

.prog{height:7px;border-radius:99px;background:#e6eee9;overflow:hidden;margin-bottom:4px;min-width:90px}
.prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#27a07d,#1b7a5e)}
.prog.big{height:9px;margin:2px 0 6px}
.sum-pills .pill{margin:0 4px 4px 0}

/* detail PO */
.po-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.po-no{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:2px 0}
.po-acts{display:flex;gap:8px;flex-wrap:wrap}.po-acts form{display:inline}

/* pilih tanggal & daftar item penerimaan */
.dpick{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.dpick-f{flex:0 0 220px}
.chips{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.chip{padding:9px 15px;border-radius:99px;background:#e6eee9;color:var(--pine);font-weight:600;font-size:13.5px;transition:background .2s}
.chip:hover{background:#d8e6df}
.chip.on{background:linear-gradient(135deg,#165445,#0f3d33);color:#fff;box-shadow:0 8px 18px -10px rgba(15,61,51,.9)}
.find{margin:14px 0 12px}.find input{margin:0;background:#fff}
.po-block{margin-bottom:16px}
.ritems{list-style:none;padding:0;margin-top:6px}
.ri{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line);scroll-margin-top:90px}
.ri:target{background:#fffaea;margin:0 -12px;padding:14px 12px;border-radius:12px}
.ri[hidden]{display:none}
.ri-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ri-main small{color:var(--mut)}.ri-main small b{color:var(--ink)}
.ri-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.rc{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;align-self:flex-start;margin-top:5px;padding:5px 10px;border-radius:10px;font-size:12.5px;background:#eef6f2;color:#0b5a3f;border:1px solid #d6eadf}
.rc.bad{background:#fdeee9;color:#9b2c10;border-color:#f7d5cb}
.rc b{font-weight:700}.rc i{font-style:normal;font-weight:600}
.rc em{font-style:normal;display:inline-flex;align-items:center;gap:3px}
.rc .ic{width:14px;height:14px}

/* form penerimaan */
.rcv-head{margin-bottom:14px;max-width:720px}
.rcv-head h2{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:2px 0 14px}
.rcv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rcv-stats div{background:#f3f7f4;border-radius:14px;padding:10px 14px}
.rcv-stats span{display:block;font-size:12px;color:var(--mut);font-weight:600}
.rcv-stats b{font:700 20px 'Fraunces',Georgia,serif}.rcv-stats small{font:500 12px 'DM Sans',system-ui,sans-serif;color:var(--mut)}
.amt.suf .money{padding:16px 96px 16px 18px}
.amt.suf i{left:auto;right:18px;font:600 15px 'DM Sans',system-ui,sans-serif;color:var(--mut)}
.money::-webkit-outer-spin-button,.money::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.money[type=number]{-moz-appearance:textfield}

.sw{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--line);border-radius:16px;background:#fbfdfc;cursor:pointer;transition:border-color .2s,background .2s}
.sw input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sw-track{position:relative;width:50px;height:30px;border-radius:99px;background:#d4a79a;flex:none;transition:background .2s}
.sw-track::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s}
.sw input:checked+.sw-track{background:#1f8a6b}
.sw input:checked+.sw-track::after{transform:translateX(20px)}
.sw input:focus-visible+.sw-track{outline:3px solid var(--saffron);outline-offset:3px}
.sw:has(input:checked){background:#eaf7f1;border-color:#9fd3bf}
.sw-txt b{display:block;color:var(--ink);font-size:15px}
.sw-txt small{font-weight:500;font-size:12.5px;color:var(--mut);line-height:1.35;display:block}

.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-bottom:10px}
.thumbs:empty{display:none}
.ph{position:relative;display:block;margin:0;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#e6eee9;border:1px solid var(--line);cursor:pointer}
.ph img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.ph input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ph-del{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(10,25,20,.78))}
.ph-del .ic{width:14px;height:14px}
.ph.old:has(input:checked) img{opacity:.3;filter:grayscale(1)}
.ph.old:has(input:checked) .ph-del{background:#c0392b;color:#fff}
.ph.old:has(input:checked) .ph-del::after{content:" — dibatalkan klik lagi"}
.ph.new{cursor:default}
.ph-x{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(10,25,20,.7);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center}
.ph-sz{position:absolute;inset:auto 0 0 0;padding:14px 6px 5px;font-size:11px;font-weight:600;color:#fff;text-align:center;background:linear-gradient(transparent,rgba(10,25,20,.8))}

/* import */
.imp h3{font-size:19px;margin-bottom:6px}.imp .muted{max-width:600px}
.imp-head{margin-bottom:14px}.imp-head h3{margin-bottom:4px}
.pv{margin-bottom:12px;padding:16px 18px}
.pv.off{background:#f7f9f8}
.pv-h{display:flex;align-items:center;gap:14px;cursor:pointer;color:var(--ink)}
.pv-h input{width:20px;height:20px;margin:0;flex:none;accent-color:#1f8a6b}
.pv-t{flex:1;min-width:0}.pv-t b{display:block;font:700 17px 'Fraunces',Georgia,serif}.pv-t small{color:var(--mut);font-weight:500;font-size:13px}
.pv-err{margin-top:10px;color:#9b2c10;font-weight:600;font-size:13.5px}
.pv-warn{margin-top:8px;color:#855400;font-size:13px}
.pv details{margin-top:12px}.pv summary{cursor:pointer;color:var(--jade);font-weight:600;font-size:14px}
.pv-tbl{margin-top:8px}
.sticky-actions{position:sticky;bottom:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 14px 30px -18px rgba(15,61,51,.6);margin-top:6px}

/* laporan barang masuk */
.bm .grp td{background:#eef4f0;padding:9px 12px;font-size:13.5px;border-bottom:1px solid var(--line)}
.bm .po-ref{display:none}
.bm td small{color:var(--mut);font-weight:500}
.when{min-width:170px}.wl{padding:2px 0}.wl>span{font-weight:600}
.wl small{display:block}.wl .wn{font-style:italic}
.gthumb{position:relative;border:0;padding:0;width:52px;height:52px;border-radius:12px;overflow:hidden;cursor:zoom-in;background:#e6eee9}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.gthumb span{position:absolute;right:0;bottom:0;padding:1px 6px;border-radius:8px 0 0 0;font-size:11px;font-weight:700;color:#fff;background:rgba(10,25,20,.78)}
.lightbox.gal{grid-auto-flow:column;grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
.lightbox.gal img{justify-self:center;cursor:zoom-out}
.gal-n,.gal-x{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:50%;width:46px;height:46px;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center}
.gal-n:hover,.gal-x:hover{background:rgba(255,255,255,.28)}
.gal-x{position:absolute;top:14px;right:14px;font-size:28px;z-index:2}
.gal-c{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#d8ebe3;font-weight:600;font-size:14px}
.lightbox.gal.single .gal-n{visibility:hidden}

/* menu "Lainnya" (HP) */
.more-btn{border:0;background:none;font:inherit}
.more-sheet{position:fixed;left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:30;background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px;box-shadow:0 24px 50px -16px rgba(15,61,51,.55);animation:fade .18s}
.more-sheet[hidden]{display:none}
.more-sheet a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;font-weight:600;color:var(--ink)}
.more-sheet a.on{background:#fdf1cf;color:var(--pine)}
.more-sheet a .ic{color:var(--pine)}

@media(max-width:1100px){.stats.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .stats.five{grid-template-columns:1fr 1fr}.stats.five .stat:last-child{grid-column:1/-1}
  .dpick-f{flex:1 1 100%}
  .po-no{font-size:24px}.po-acts{width:100%}.po-acts .btn,.po-acts form{flex:1}.po-acts form .btn{width:100%}
  .ri{flex-direction:column;gap:10px}.ri-side{flex-direction:row;justify-content:space-between;align-items:center;width:100%}
  .rcv-stats{gap:8px}.rcv-stats div{padding:9px 10px}.rcv-stats b{font-size:17px}
  .tbl.bm tr.grp{background:none;border:0;box-shadow:none;padding:0;margin:16px 0 6px}
  .tbl.bm tr.grp td{display:block;background:none;border:0;padding:0 2px;text-align:left;font-size:14px}
  .tbl.bm tr.grp td::before{content:none}
  .tbl td.when,.tbl td .wl{text-align:right}
  .sticky-actions{bottom:calc(84px + env(safe-area-inset-bottom))}
  .lightbox.gal{grid-template-columns:minmax(0,1fr)}
  .gal-n{position:absolute;top:50%;transform:translateY(-50%);background:rgba(10,25,20,.55)}.gal-n.prev{left:8px}.gal-n.next{right:8px}
}
.form label.sw{display:flex}
.form label.ph{display:block}
.hint:empty{min-height:0;margin:0}
@media(max-width:900px){
  .bottom a,.bottom .more-btn{display:flex;flex-direction:column;align-items:center;gap:2px;font:600 11px 'DM Sans',system-ui,sans-serif;color:var(--mut);padding:6px 4px;border-radius:12px;flex:1;min-width:0;cursor:pointer}
  .bottom a span,.bottom .more-btn span{white-space:nowrap}
  .bottom .more-btn.on,.bottom .more-btn[aria-expanded=true]{color:var(--pine);background:#fdf1cf}
}

.btn.save[disabled]{background:#9db8ad;box-shadow:none;cursor:not-allowed;opacity:1}

/* ====== per hari, tambahan PO, petty cash ====== */
.dpick-l{flex:1;width:100%}.dpick-l .lbl{margin-bottom:10px}
.stats.six{grid-template-columns:repeat(6,1fr);margin-top:14px}
.stat.xtra{border-left-color:#c98f1a}
.extra-block{margin-top:16px;border-top:3px solid #e3b04b}
.form[data-type=extra]{--acc:#c98f1a;--acc-grad:linear-gradient(135deg,#dcab3c,#b97d0c);--acc-glow:rgba(201,143,26,.45)}
.auto-time{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#fff7e0;border:1.5px solid #f0d58b;color:#7a5200}
.auto-time .ic{width:26px;height:26px;flex:none;color:#b97d0c}
.auto-time b{display:block;color:var(--ink);font-size:15px}.auto-time small{font-size:14px;font-weight:600;color:#7a5200}
.row-side{flex-direction:row;align-items:center}
.wn{font-style:italic}
.ri-main .wn{color:var(--mut)}
@media(max-width:1100px){.stats.six{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.stats.six{grid-template-columns:1fr 1fr}.row-side{justify-content:space-between}}
.dpick{margin-bottom:14px}.filters+.stats{margin-top:14px}

/* petty cash: subtotal & total */
.card-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bm .grp .gl{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bm .grp .sub{color:#7a5200;font-size:13.5px}
.bm tfoot .tot td{padding:14px 12px;font-size:15px;border-top:2px solid var(--line);background:#fff8e4}
.bm tfoot .tot td:first-child{font-weight:700;color:var(--pine)}
@media(max-width:900px){
  .bm tfoot,.bm tfoot tr{display:block}
  .bm tfoot .tot{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:#fff8e4;margin-top:6px}
  .bm tfoot .tot td{display:block;padding:0;border:0;background:none}
  .bm tfoot .tot td:empty{display:none}
  .bm tfoot .tot td::before{content:none}
  .card-acts{width:100%}.card-acts .btn{flex:1}
}

/* ====== menu bergrup (sidebar) ====== */
.side nav{overflow-y:auto;overflow-x:hidden;padding-right:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.nav-group>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font-weight:600;cursor:pointer;color:#d8ebe3;user-select:none;transition:background .2s}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary:hover{background:rgba(255,255,255,.07)}
.nav-group>summary .chev{margin-left:auto;display:grid;place-items:center;opacity:.65;transition:transform .22s}
.nav-group>summary .chev .ic{width:16px;height:16px}
.nav-group[open]>summary .chev{transform:rotate(180deg)}
.nav-group.has-on>summary{color:#fff;background:rgba(255,255,255,.06)}
.side nav .sub{display:flex;flex-direction:column;gap:2px;margin:3px 0 8px 25px;padding-left:12px;border-left:1.5px solid rgba(255,255,255,.14)}
.side nav .sub a{padding:9px 12px;font-size:14px;gap:10px;border-radius:10px;font-weight:500}
.side nav .sub a::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;flex:none}
.side nav .sub a.on{font-weight:600}.side nav .sub a.on::before{opacity:1}
.more-sheet .mh{padding:10px 16px 2px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.more-sheet .mh:not(:first-child){margin-top:4px;border-top:1px solid var(--line);padding-top:12px}

/* ====== dashboard: bagian PO & petty cash ====== */
.sec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:19px;font-weight:800;letter-spacing:-.01em;margin:26px 0 12px}
.sec-h small{font:500 13px 'DM Sans',system-ui,sans-serif;color:var(--mut);margin-top:3px}
.sec-h>.link,.sec-acts{margin-left:auto;font:600 14px 'DM Sans',system-ui,sans-serif}
.sec-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sec-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#dff4ea;color:#1f8a6b;flex:none}
.sec-ic .ic{width:19px;height:19px}.sec-ic.po{background:#e2edf8;color:#1d4f7a}.sec-ic.pty{background:#fff0cc;color:#855400}
a.stat.lnk{display:block;color:inherit;transition:transform .15s,box-shadow .2s}
a.stat.lnk:hover{transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(15,61,51,.55)}
.stat .sub-s{display:block;margin-top:2px;font-size:12.5px;color:var(--mut)}
.stat .prog{margin:8px 0 0}
.rlist{list-style:none;padding:0}
.rlist li{border-bottom:1px solid var(--line)}.rlist li:last-child{border:0}
.rlist li a{display:flex;align-items:center;gap:12px;padding:11px 0;color:inherit}
.rlist li a:hover b{color:var(--jade)}
.rlist div{flex:1;min-width:0}.rlist small{display:block;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlist .prog{margin-top:6px}
.rlist strong{white-space:nowrap;font-size:14px}.rlist strong.in{color:var(--jade)}.rlist strong.out{color:var(--chili)}
.rlist strong.pct{color:var(--pine);font-size:15px}.rlist strong.pty-amt{color:#855400}
.dot.po{background:#e2edf8;color:#1d4f7a}.dot.pty{background:#fff0cc;color:#855400}
@media(max-width:900px){.sec-h{font-size:17px;margin-top:22px}.sec-h>.link{margin-left:auto}.sec-acts{width:100%;margin-left:0}}

/* ====== Distribusi penerima manfaat ====== */
.dist{margin-bottom:8px}
.dist-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:24px 26px;border-radius:24px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(70% 140% at 95% 0%,rgba(227,176,75,.28),transparent 60%),linear-gradient(135deg,#165445,#0b2e26);box-shadow:0 24px 44px -26px rgba(11,46,38,.8)}
.dist-hero .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#f0d58b}
.dist-hero h2{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:4px 0 6px;color:#fff}
.dist-hero p{font-size:12.5px;letter-spacing:.06em;color:#bfdccf;max-width:560px}
.dh-ctl{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.dh-ctl label{margin:0;font-size:11.5px;font-weight:600;color:#cfe6dc}
.dh-ctl input,.dh-ctl select{margin:4px 0 0;padding:9px 12px;font-size:14px;border-radius:11px;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.95);color:var(--ink);min-width:0;width:auto}
.dh-ctl select{padding-right:34px}
.dist-line{margin:14px 2px 0;font-size:14px;color:var(--mut);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.dist-line b{color:var(--ink)}.dist-line .warn{color:#c2410c;font-weight:600}
.dl-acts{margin-left:auto;display:flex;gap:14px;font-weight:600}.dl-acts+.dl-acts{margin-left:14px}
.dist-h{font:700 13px 'DM Sans',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);margin:22px 0 10px;display:flex;align-items:center;gap:10px}
.dist-h::after{content:"";flex:1;height:1px;background:var(--line)}
.dist-h small{font:600 12.5px 'DM Sans',system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--mut);order:2}
.dstats{margin-top:0}
.dstats .stat b{font-size:25px}.dstats .stat b.st-t{font-size:19px;letter-spacing:.02em}
.sub-s.up{color:#0b7a55;font-weight:600}.sub-s.dn{color:#c2410c;font-weight:600}
.chart-box{position:relative;height:260px}.chart-box.tall{height:340px}
.dloc .tot td,tfoot .tot td{font-weight:700}
tfoot .tot td{padding:13px 12px;border-top:2px solid var(--line);background:#fff8e4}
.tbl tr.off td{opacity:.55}

/* input harian */
.dist-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.mnav{display:flex;align-items:center;gap:8px}.mnav form{margin:0}.mnav input{margin:0;width:auto;padding:9px 12px}
.mnav .ib{font-size:22px;line-height:1;font-weight:700;text-decoration:none}
.dist-acts{display:flex;gap:8px;flex-wrap:wrap}
.help{margin:0 2px 12px;font-size:13.5px;line-height:1.5}
.dtbl td{vertical-align:middle}
.dtbl tr.wk td{background:#fbf7ec}.dtbl tr.today td{box-shadow:inset 3px 0 0 var(--saffron)}.dtbl tr.lib td{color:var(--mut)}
.dtbl select.mode{margin:0;min-width:130px;padding:8px 34px 8px 12px;font-weight:600;border-radius:10px}
.dtbl select.m-semua{background-color:#e4f5ee;border-color:#9fd3bf;color:#0b5a3f}
.dtbl select.m-manual{background-color:#fff3d6;border-color:#f0d58b;color:#7a5200}
.dtbl select.m-libur{background-color:#eef3f0;color:#5b6b64}
.dtbl .lc{white-space:nowrap}.dtbl .lc .lsum{color:var(--mut);font-size:13.5px;margin-right:6px}
.dtbl tr.dl td{background:#fffdf5;padding:0}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 14px;padding:14px 16px}
.lg-h{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px}
.lg-h .link{background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer;color:var(--jade)}
.lchk{display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-weight:500;font-size:14px;color:var(--ink)}
.lchk input{width:18px;height:18px;margin:0;flex:none;accent-color:#1f8a6b}
.lchk:has(input:checked){background:#eaf7f1;border-color:#9fd3bf}
.sticky-actions #sumInfo{margin-right:auto;font-size:13.5px;align-self:center}

/* master & koreksi */
.mtbl input.nm-in{margin:0;min-width:240px;padding:8px 10px}
.mtbl input.n{margin:0;width:84px;padding:8px 8px;text-align:right}
.mtbl select{margin:0;padding:8px 30px 8px 10px;min-width:100px}
.mtbl th{white-space:nowrap}
.dgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.dgrid input{text-align:right}
td.neg{color:#c2410c;font-weight:600}td.pos{color:#0b7a55;font-weight:600}td.z{color:#aab6b0}
.ib.dng{color:#9b2c10;background:#fde6df;border:0;cursor:pointer}
.rtbl td,.rtbl th{white-space:nowrap}.rtbl td.nm{white-space:normal}

@media(max-width:1100px){.dgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .dist-hero{padding:20px 18px;border-radius:20px}.dist-hero h2{font-size:23px}
  .dh-ctl{width:100%}.dh-ctl label{flex:1 1 44%}.dh-ctl input,.dh-ctl select{width:100%}.dh-ctl .btn{flex:1 1 100%}
  .dl-acts,.dl-acts+.dl-acts{margin-left:0;width:100%}
  .dstats .stat b{font-size:22px}
  .chart-box{height:230px}.chart-box.tall{height:300px}
  .dtbl select.mode{width:100%}.dtbl tr.dl td{display:block}
  .dtbl tr.dl{display:block;margin:-8px 0 12px;border-radius:14px;overflow:hidden}
  .lgrid{grid-template-columns:1fr}
  .mtbl input.nm-in,.mtbl input.n,.mtbl select{width:100%;min-width:0}
  .dgrid{grid-template-columns:repeat(2,1fr)}
  .rtbl td,.rtbl th{white-space:normal}
}
.dh-ctl label{display:flex;flex-direction:column}
.dh-ctl label input,.dh-ctl label select{margin-top:5px}
.dloc td.nm{white-space:normal}

/* perbaikan: atribut hidden harus selalu menyembunyikan; chip tidak melar */
[hidden]{display:none!important}
.chip{white-space:nowrap;flex:none}
.mnav{flex-wrap:wrap}
@media(max-width:900px){
  .dtbl tr.wk{background:#fbf7ec}.dtbl tr.wk td{background:none}
  .dtbl tr.dr td[data-l="Tanggal"] b{font-size:16px}
  .dh-ctl select{font-size:13.5px;padding-right:28px}
}

/* ====== akun & peran ====== */
.me-l{display:block;min-width:0;flex:1;color:inherit}.me-l:hover b{color:#f0d58b}.me-l b,.me-l small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill.r-aslap{background:#dff4ea;color:#0b5a3f}.pill.r-staff{background:#e2edf8;color:#1d4f7a}
.pill.r-viewer{background:#eef3f0;color:#44554d}.pill.r-supplier{background:#fff0cc;color:#7a5200}
.acct-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.acct-head>div:nth-child(2){flex:1;min-width:200px}
.avatar{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;flex:none;font:800 28px 'Fraunces',Georgia,serif;color:var(--pine);background:linear-gradient(135deg,#efc766,#d9a438);box-shadow:0 12px 22px -12px rgba(217,164,56,.9)}
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.form .pw{margin-top:6px}.pw input{padding-right:96px;margin:0}
.sup-hero{margin-top:0}
.sup-hero .dh-ctl input{min-width:170px}
@media(max-width:900px){.acct-grid{grid-template-columns:1fr}.avatar{width:54px;height:54px;font-size:24px}}
.rlist strong.pct .ic{transform:rotate(-90deg);width:18px;height:18px;color:var(--mut)}

/* ====== Inventaris ====== */
.ivt-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.ivt-bar .search-in{flex:1;min-width:220px;max-width:460px}.ivt-bar .search-in input{margin:0}
.ivt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.ivt-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .2s}
.ivt-card:hover{transform:translateY(-2px);box-shadow:0 18px 32px -22px rgba(15,61,51,.6)}
.ivt-ph{position:relative;display:block;width:100%;aspect-ratio:4/3;border:0;padding:0;background:#e6eee9;cursor:zoom-in;overflow:hidden}
div.ivt-ph{cursor:default}
.ivt-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ivt-ph .pill{position:absolute;top:10px;left:10px;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.noimg{width:100%;height:100%;display:grid;place-items:center;font:800 28px 'Fraunces',Georgia,serif;color:#7fa596;background:linear-gradient(135deg,#eaf3ee,#d7e7df)}
.gthumb .noimg{font-size:16px}
.ivt-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:2px}
.ivt-body h3{font-size:16px;line-height:1.25}.ivt-body .muted{font-size:12.5px}
.ivt-qty{margin-top:6px;font-size:14px}.ivt-qty b{font:700 22px 'Fraunces',Georgia,serif;color:var(--pine)}
.ivt-rusak{font-size:13px;color:var(--mut)}.ivt-rusak.has{color:#c2410c;font-weight:600}
.ivt-edit{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--pine);box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.ivt-edit .ic{width:17px;height:17px}
.ivt-new>summary{cursor:pointer;font:700 16px 'DM Sans',system-ui,sans-serif;color:var(--pine);display:flex;align-items:center;gap:8px;list-style:none}
.ivt-new>summary::-webkit-details-marker{display:none}.ivt-new>summary .ic{width:20px;height:20px}
.ivt-form{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.ivt-form label{margin:0}.ivt-form .w2{grid-column:span 2}.ivt-form .w3{grid-column:1/-1}
.ivt-cell{display:flex;align-items:center;gap:12px;min-width:240px}
.ivt-cell .gthumb{width:56px;height:56px;flex:none}
.ivt-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ivt-inline select,.ivt-inline input{margin:0;width:auto;min-width:0;padding:8px 10px;font-size:14px}
.ivt-inline input[type=number]{width:88px}.ivt-inline.ivt-col{flex-direction:column;align-items:stretch}
.ivt-more{position:relative}.ivt-more>summary{list-style:none;cursor:pointer}.ivt-more>summary::-webkit-details-marker{display:none}
.ivt-more-body{margin-top:10px;display:flex;flex-direction:column;gap:12px;min-width:230px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fbfdfc}
.ivt-tbl td{vertical-align:middle}.ivt-tbl tr:target td{background:#fffaea}
.chk{display:flex;align-items:flex-start;gap:10px;font-weight:500;color:var(--ink);line-height:1.45}.chk input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:#1f8a6b}
code{background:#eef3f0;padding:2px 6px;border-radius:6px;font-size:13px}
.sec-ic.ivt,.dot.ivt{background:#e9e4f7;color:#5b3fa0}
@media(max-width:900px){
  .ivt-grid{grid-template-columns:repeat(2,1fr);gap:12px}.ivt-body{padding:11px 12px 13px}.ivt-body h3{font-size:14.5px}.ivt-qty b{font-size:19px}
  .ivt-form{grid-template-columns:1fr 1fr}.ivt-form .w2,.ivt-form .w3{grid-column:1/-1}
  .ivt-inline input[type=number]{width:100%}.ivt-inline select{width:100%}.ivt-more-body{min-width:0}
  .ivt-cell{min-width:0}
}
.ivt-inline select{min-width:190px;padding-right:34px}
@media(min-width:901px){.ivt-tbl td[data-l="Ubah stok"] .ivt-inline{flex-wrap:nowrap}.ivt-tbl td[data-l="Stok"]{min-width:200px}}
@media(max-width:900px){.ivt-inline select{min-width:0}}
@media(max-width:900px){.ivt-tbl td[data-l="Stok"]{flex-wrap:wrap;justify-content:flex-end;gap:4px}}