/* =====================================================================
   style.css — Tampilan "playful" Rekap Order (tema penguin pastel)
   ---------------------------------------------------------------------
   File ini HANYA mengatur tampilan. Dimuat SETELAH <style> bawaan di
   tiap halaman, jadi aturan di sini yang menang. Tidak ada logika,
   ID, atau alur sistem yang diubah.
   Gambar maskot ada di folder assets/ — boleh ditimpa dengan gambar
   PNG Anda sendiri asal nama filenya sama.
   ===================================================================== */

:root{
  --bg:#EEF5FD; --card:#FFFFFF; --ink:#1B2A5E; --ink-soft:#4A5A85; --muted:#7D8AAA;
  --line:#DCE8F7; --teal:#22A97F; --teal-dark:#178A67;
  --amber:#E9961B; --amber-soft:#FFF4DE; --danger:#E5486C; --danger-soft:#FDEBF1;
  --radius:22px;
  --shadow:0 1px 0 rgba(27,42,94,.03),0 10px 26px rgba(70,125,200,.10);
  --shadow-lift:0 2px 0 rgba(27,42,94,.04),0 16px 34px rgba(70,125,200,.16);

  --blue:#2F7DE1;  --blue-soft:#EAF3FE;  --blue-line:#CFE3FB;
  --pink:#E8517A;  --pink-soft:#FFF0F5;  --pink-line:#F8D0DE;
  --mint:#1E9C74;  --mint-soft:#EBF8F2;  --mint-line:#C6EBD9;
  --yellow:#E59A1A;--yellow-soft:#FFF7E2;--yellow-line:#F8E3AE;
  --purple:#7A55C8;--purple-soft:#F2ECFC;

  --font-display:'Fredoka','Nunito',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
}

/* ---------- Dasar & latar belakang ---------- */
html{background:#EEF5FD}
body{
  font-family:var(--font-body);color:var(--ink);line-height:1.5;min-height:100vh;
  background:
    url("assets/cloud.png") no-repeat left -80px top 6px / 210px auto,
    url("assets/cloud.png") no-repeat right -120px top 64px / 230px auto,
    linear-gradient(180deg,#E6F1FD 0%,#F3F8FE 38%,#EEF5FD 100%);
  background-color:#EEF5FD;
  -webkit-font-smoothing:antialiased;
}
.wrap{padding-top:22px;padding-bottom:0;position:relative}
h1,h2,h3,.font-display{font-family:var(--font-display)}
b,strong{font-weight:800}
a{color:var(--blue)}

/* ---------- Navigasi atas (tombol pil) ---------- */
.top-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;position:relative;z-index:2}
.link-back,.link-rekap{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:#fff;color:var(--blue);border:1.5px solid var(--blue-line);
  padding:9px 17px;border-radius:99px;font-family:var(--font-display);font-weight:600;font-size:15px;
  box-shadow:0 6px 16px rgba(70,125,200,.12);transition:.18s;cursor:pointer}
.link-back:hover,.link-rekap:hover{border-color:#9EC6F5;color:var(--blue);transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(70,125,200,.18)}
.top-nav .link-back,.top-nav .link-rekap{margin:0}
/* tombol kembali di dalam konten (mis. "← Daftar Sesi") */
.wrap > .link-back{margin-bottom:16px}

/* ---------- Kepala halaman (judul + maskot) ---------- */
.hero{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:2px 0 20px;position:relative}
.hero-text{flex:1;min-width:0;position:relative;z-index:2}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:36px;line-height:1.08;
  margin:0 0 4px;letter-spacing:.2px;color:var(--ink);overflow-wrap:break-word}
.hero-sub{font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--ink-soft);
  margin:0 0 12px;line-height:1.3}
.hero-art{position:relative;flex:none;width:150px;isolation:isolate}
.hero-art::before{ /* gundukan salju di bawah maskot */
  content:'';position:absolute;left:-14%;right:-14%;bottom:-8px;height:34%;
  background:radial-gradient(ellipse at 50% 60%,#FFFFFF 0%,#FFFFFF 52%,rgba(255,255,255,0) 72%);
  z-index:-1}
.hero-art::after{ /* hati kecil */
  content:'';position:absolute;right:-4px;top:2px;width:22px;height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21s-9-5.6-10.6-11C.3 5.2 3.4 1.5 7.2 2.2 9.4 2.6 11 4.4 12 6c1-1.6 2.6-3.4 4.8-3.8 3.8-.7 6.9 3 5.8 7.8C21 15.4 12 21 12 21z' fill='%23FF7A9C'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-mascot{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 10px rgba(40,70,140,.14))}
.hero-art.has-note{padding-top:20px}
.hero-note{position:absolute;top:-6px;left:-26px;font-family:var(--font-display);font-weight:600;
  color:var(--blue);font-size:16px;line-height:1.05;transform:rotate(-14deg);white-space:nowrap;z-index:3}
.hero-note::after{content:'';display:block;width:60%;height:6px;margin-top:3px;
  border-bottom:2.5px solid #9EC6F5;border-radius:0 0 50% 50%}

/* versi menu utama: maskot besar di kiri */
.hero-home{justify-content:flex-start;gap:14px;margin-bottom:26px}
.hero-home .hero-art{width:190px;order:-1}
.hero-home .hero-art::after{display:none}
.hero-home .hero-sparkle{position:absolute;left:-6px;top:-6px;width:40px;height:40px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23F7C948' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M20 4v8M6 12l6 5M4 26h8'/%3E%3C/svg%3E") center/contain no-repeat;z-index:2}

@media(max-width:560px){
  .hero h1{font-size:28px}
  .hero-sub{font-size:15.5px;margin-bottom:10px}
  .hero-art{width:116px}
  .hero-note{font-size:14px;left:-18px;top:-6px}
  .hero-art.has-note{padding-top:22px}
  .hero-home .hero-art{width:136px}
}
@media(max-width:370px){
  .hero h1{font-size:25px}
  .hero-art{width:100px}
  .hero-home .hero-art{width:118px}
}

/* ---------- Badge user & tombol Ganti User ---------- */
#userBadge{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:14.5px;
  color:var(--ink-soft);font-weight:600;margin:0 0 18px;text-align:left}
.hero #userBadge{margin:0}
#userBadge b{color:var(--ink);font-weight:800}
.ub-ava{width:26px;height:26px;border-radius:50%;background:var(--purple-soft);
  display:inline-grid;place-items:center;flex:none}
.ub-ava svg{width:16px;height:16px}
.ub-toko{color:var(--muted)}
.ganti-user{display:inline-flex;align-items:center;gap:6px;background:#DDF5EA;color:var(--mint);
  border:1.5px solid #BFE9D5;border-radius:99px;padding:4px 12px 4px 10px;font-weight:800;font-size:12.5px;
  text-decoration:none;margin-left:2px;transition:.15s}
.ganti-user::before{content:'';width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E9C74' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13l-3.5-3.5M20 15H7l3.5 3.5'/%3E%3C/svg%3E") center/contain no-repeat}
.ganti-user:hover{background:#CDEFDF;text-decoration:none}

/* ---------- Kartu, form, label ---------- */
.card{background:#fff;border:2px solid #D7E7FA;border-radius:26px;box-shadow:var(--shadow);padding:22px}
@media(max-width:520px){.card{padding:18px}}
label{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink);margin-bottom:8px}
label .req{color:var(--danger)}
input,select{font-family:var(--font-body);font-weight:600;font-size:15.5px;color:var(--ink);
  background:#FBFDFF;border:1.5px solid #D5E3F5;border-radius:16px;padding:13px 15px;transition:.15s}
input::placeholder{color:#A6B2CB;font-weight:500}
input:focus,select:focus{border-color:#7DB7F2;box-shadow:0 0 0 4px rgba(125,183,242,.2);background:#fff;outline:none}
input[type="file"]{padding:10px 12px;font-size:14px;color:var(--muted)}
input[type="file"]::file-selector-button{font-family:var(--font-display);font-weight:600;font-size:14px;
  border:none;background:var(--blue-soft);color:var(--blue);border-radius:99px;padding:7px 15px;
  margin-right:10px;cursor:pointer}

/* ikon di depan kolom isian */
#namaSesi,#namaProduk,#editNamaProduk,#maxProduk,#editMaxProduk,#pelanggan,#editNama{
  padding-left:48px;background-repeat:no-repeat;background-position:15px center;background-size:21px}
#namaSesi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A86E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 17h.01M12 17h.01' stroke-width='3'/%3E%3C/svg%3E")}
#namaProduk,#editNamaProduk{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A86E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1.5 1.5 0 0 1 0 2.1l-6.1 6.1a1.5 1.5 0 0 1-2.1 0z'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3C/svg%3E")}
#maxProduk,#editMaxProduk{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A86E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5 12 3.5l8.5 4v9L12 20.5l-8.5-4z'/%3E%3Cpath d='M3.5 7.5 12 11.5l8.5-4M12 11.5v9'/%3E%3C/svg%3E")}
#pelanggan,#editNama{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A86E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c.8-3.8 3.9-5.5 7.5-5.5s6.7 1.7 7.5 5.5'/%3E%3C/svg%3E")}
#qty{padding-left:40px;background:#FBFDFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A86E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5 12 3.5l8.5 4v9L12 20.5l-8.5-4z'/%3E%3Cpath d='M3.5 7.5 12 11.5l8.5-4M12 11.5v9'/%3E%3C/svg%3E") no-repeat 13px center / 19px}
#qty:focus{background-color:#fff}
.row2:has(#qty){grid-template-columns:1fr 128px}
@media(max-width:520px){.row2:has(#qty){grid-template-columns:1fr 112px}}

/* kolom Toko (otomatis, tidak bisa diubah) */
.toko-auto{background:#FBFDFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A86E0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5V20h16v-9.5'/%3E%3Cpath d='M2.8 6.5 4.5 3.5h15l1.7 3v1.3a2.7 2.7 0 0 1-5.4 0 2.7 2.7 0 0 1-5.4 0 2.7 2.7 0 0 1-5.4 0 2.7 2.7 0 0 1-2.2-1.3z'/%3E%3Cpath d='M9.5 20v-5h5v5'/%3E%3C/svg%3E") no-repeat 14px center / 24px;border:1.5px solid #D5E3F5;
  border-radius:16px;padding:13px 15px 13px 50px;font-size:15.5px;font-weight:800;color:var(--ink)}

/* ---------- Tombol ---------- */
.btn{font-family:var(--font-display);font-weight:600;border-radius:99px;letter-spacing:.2px}
.btn-primary,.lock-form .btn-primary,.filters .btn,.pw-ok{
  background:linear-gradient(180deg,#36C291 0%,#1F9D75 100%);color:#fff;border:none;
  border-radius:99px;font-family:var(--font-display);font-weight:600;font-size:17px;
  box-shadow:0 8px 18px rgba(34,169,127,.28),inset 0 -3px 0 rgba(0,0,0,.08);transition:.18s}
.btn-primary:hover:not(:disabled),.lock-form .btn-primary:hover,.filters .btn:hover,.pw-ok:hover:not(:disabled){
  background:linear-gradient(180deg,#3DCB99 0%,#1A9670 100%);transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(34,169,127,.32),inset 0 -3px 0 rgba(0,0,0,.08)}
.btn-primary:active,.filters .btn:active{transform:translateY(1px)}
.filters .btn{font-size:15px;padding:11px 24px}
.pw-ok{background:linear-gradient(180deg,#3B4C86 0%,#25336A 100%);box-shadow:0 8px 18px rgba(37,51,106,.25)}
.pw-ok:hover:not(:disabled){background:linear-gradient(180deg,#4558A0 0%,#25336A 100%)}

/* tombol aksi utama: ikon penguin + panah */
#btnBuatSesi,#btnBuatProduk,#btnSubmit{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;font-size:18px}
#btnBuatSesi::before,#btnBuatProduk::before,#btnSubmit::before{content:'';flex:none;width:38px;height:36px;
  margin:-8px 0 -8px -6px;background:url("assets/penguin-head.png") center/contain no-repeat;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
#btnBuatSesi::after,#btnBuatProduk::after,#btnSubmit::after{content:'';flex:none;width:19px;height:19px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}

.btn-cancel,.pw-cancel{font-family:var(--font-display);font-weight:600;border-radius:99px;
  background:#fff;color:var(--ink-soft);border:2px solid var(--line)}
.btn-cancel:hover,.pw-cancel:hover{background:#F4F8FE;border-color:#C9DCF3}

#btnInstall{font-family:var(--font-display);font-weight:600;font-size:15px;background:#fff;color:var(--blue);
  border:1.5px solid var(--blue-line);border-radius:99px;padding:10px 20px;box-shadow:0 6px 16px rgba(70,125,200,.12)}
#btnInstall:hover{border-color:#9EC6F5}

/* ---------- Judul bagian ---------- */
h2.section,.result h2,h2.day{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--ink);
  letter-spacing:.2px}
h2.section{margin-top:24px}
.card + h2.section{margin-top:28px}
.result h2 .count{font-family:var(--font-body)}
.path-info,.sesi-info{font-size:14px;color:var(--muted)}
.chip-toko{background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue-line);font-weight:800}

/* ---------- Menu utama (kartu pastel) ---------- */
.menu{gap:16px}
.menu-item{gap:12px;border-radius:26px;border:2px solid var(--blue-line);padding:12px 16px 12px 8px;
  box-shadow:var(--shadow);transition:.18s;background:var(--blue-soft)}
.menu-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.menu-item.a{background:#EEF6FF;border-color:var(--blue-line)}
.menu-item.b{background:var(--pink-soft);border-color:var(--pink-line)}
.menu-item.c{background:var(--mint-soft);border-color:var(--mint-line)}
.menu-item.d{background:var(--yellow-soft);border-color:var(--yellow-line)}
.menu-item.a:hover{border-color:#A9CDF6}.menu-item.b:hover{border-color:#F2B2C8}
.menu-item.c:hover{border-color:#A3DDC2}.menu-item.d:hover{border-color:#F1D186}
.menu-mascot{width:96px;height:96px;object-fit:contain;flex:none;
  filter:drop-shadow(0 6px 8px rgba(40,70,140,.12))}
.menu-text h2{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.15;margin:0 0 4px}
.menu-text p{font-size:14.5px;color:var(--ink-soft);line-height:1.4}
.menu-arrow{width:46px;height:46px;border-radius:50%;font-size:0;color:transparent;flex:none;
  background:#D6E8FD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7DE1' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/21px no-repeat;transition:.18s}
.menu-item.b .menu-arrow{background-color:#FBD7E3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8517A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.menu-item.c .menu-arrow{background-color:#CFF0E0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E9C74' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.menu-item.d .menu-arrow{background-color:#FCE7AE;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E08A12' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.menu-item:hover .menu-arrow{transform:translateX(3px)}
@media(max-width:520px){
  .menu-mascot{width:78px;height:78px}
  .menu-text h2{font-size:19px}
  .menu-text p{font-size:13.5px}
  .menu-arrow{width:40px;height:40px;background-size:18px}
  .menu-item{padding:10px 12px 10px 4px;gap:8px}
}

/* ---------- Daftar sesi (kartu dengan ikon kalender) ---------- */
.item{gap:14px;border-radius:24px;border:1.5px solid var(--line);padding:14px 14px 14px 14px;
  margin-bottom:12px;box-shadow:var(--shadow);background:#fff;min-height:86px}
.item::before{content:'';flex:none;width:58px;height:58px;border-radius:18px;
  background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7DE1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 17h.01M12 17h.01' stroke-width='3'/%3E%3C/svg%3E") center/30px no-repeat;box-shadow:inset 0 0 0 1.5px var(--blue-line)}
.item:nth-child(even)::before{background-color:var(--pink-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8517A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 17h.01M12 17h.01' stroke-width='3'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1.5px var(--pink-line)}
.item:hover{border-color:#B9D6F7;transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.item-main h3{font-family:var(--font-display);font-weight:600;font-size:19px;margin:0 0 2px}
.item-main p{font-size:13px;color:var(--muted);line-height:1.45}
.item-badge{background:var(--mint-soft);color:var(--mint)}
.item-arrow{width:42px;height:42px;border-radius:50%;font-size:0;color:transparent;flex:none;
  background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7DE1' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/19px no-repeat;transition:.18s}
.item:hover .item-arrow{transform:translateX(3px)}
/* sesi terkunci (lewat 24 jam): tetap tidak bisa diklik */
.item.expired{cursor:default}
.item.expired:hover{transform:none;border-color:var(--line);box-shadow:var(--shadow)}
.item.expired::before{filter:blur(2px);opacity:.55}
.item.expired::after{content:'';flex:none;width:42px;height:42px;border-radius:50%;margin-left:auto;
  background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7DE1' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/19px no-repeat;position:relative;z-index:1;opacity:.8}
.item-main.blurred{filter:blur(4px)}
.expired-msg{background:rgba(255,255,255,.55);font-size:13px;font-weight:700;color:var(--ink-soft);
  padding:0 66px 0 84px;justify-content:center;gap:6px;flex-wrap:wrap;line-height:1.35}
.expired-msg a{color:var(--mint);font-weight:800}
@media(max-width:520px){
  .item{gap:12px;padding:12px}
  .item::before{width:50px;height:50px;border-radius:16px;background-size:26px}
  .item-main h3{font-size:17px}
  .expired-msg{padding:0 58px 0 70px;font-size:12px}
}

/* ---------- Kartu produk bergambar ---------- */
.produk-grid{gap:14px}
.produk-card{border-radius:24px;border:1.5px solid var(--line);box-shadow:var(--shadow);padding:10px;gap:4px;background:#fff}
.produk-card:hover{border-color:#B9D6F7;box-shadow:var(--shadow-lift)}
.produk-photo{border-radius:18px;background:var(--blue-soft)}
.produk-photo-empty{color:#A9C3E6}
.produk-info{padding:8px 10px 8px 14px}
.produk-info h3{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.2}
.produk-info p{font-size:13.5px}
.produk-info .warn{color:#C9790F}
.produk-edit-btn,.produk-del-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);font-size:14px}
.produk-card-acts{top:12px;right:12px}
@media(max-width:420px){.produk-info h3{font-size:16.5px}.produk-info{padding:6px 6px 6px 10px}}

/* meteran stok */
.meter{height:10px;border-radius:99px;background:#E4EEF9}
.meter span{background:linear-gradient(90deg,#4FD1A5,#22A97F)}
.foto-preview img{border-radius:16px;border:2px solid var(--line)}
.foto-clear{background:var(--danger)}

/* kotak stok di Input Rekap & Laporan */
.stock,.stockbar{border-radius:20px;border-width:1.5px;padding:14px 16px}
.stock.ok,.stockbar.ok{background:var(--mint-soft);border-color:var(--mint-line)}
.stock.low,.stockbar.low{background:var(--yellow-soft);border-color:var(--yellow-line)}
.stock.full,.stockbar.full{background:var(--danger-soft);border-color:var(--pink-line)}
.stock .meter,.stockbar .meter{height:12px;background:rgba(255,255,255,.85)}
.stock.ok .meter span,.stockbar.ok .meter span{background:linear-gradient(90deg,#4FD1A5,#22A97F)}
.stock.low .meter span,.stockbar.low .meter span{background:linear-gradient(90deg,#FFCB5C,#E9961B)}
.stock.full .meter span,.stockbar.full .meter span{background:linear-gradient(90deg,#FF8FAB,#E5486C)}
.stock-top .val,.stockbar-top .val{font-family:var(--font-display);font-weight:600;font-size:17px}
.stockbar.low .val{color:#C9790F}
.wait-notice{border-radius:18px;background:var(--danger-soft);border:1.5px solid var(--pink-line);color:#A8324F}

/* ---------- Tabel order di Input Rekap ---------- */
.orow-section{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--mint)}
.orow-section.wait{color:#C9790F}
.orow-section .cap{font-family:var(--font-body);background:var(--mint-soft);color:var(--mint)}
.orow-section.wait .cap{background:var(--yellow-soft);color:#C9790F}
.orow-head{background:#F3F8FE;border:1.5px solid var(--line);border-bottom:none;border-radius:20px 20px 0 0;color:var(--ink-soft)}
.orow-list{border-radius:0 0 20px 20px;border:1.5px solid var(--line);box-shadow:var(--shadow)}
.orow-name{font-weight:700}
.orow:hover{background:#FAFCFF}
@media(max-width:520px){.orow-list{border-radius:20px}}

/* badge */
.badge-tunggu{background:var(--yellow-soft);color:#C9790F;border-color:var(--yellow-line)}
.badge-partial{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-line)}

/* tombol kecil bulat (edit / hapus) */
.del,.edit{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:13px}
.del:hover:not(:disabled){background:var(--danger-soft);border-color:var(--pink-line);color:var(--danger)}
.edit:hover:not(:disabled),.produk-edit-btn:hover{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue)}
.ganti{font-weight:800;border-color:var(--teal);color:var(--mint);border-radius:99px}
td .del{width:28px;height:28px}

/* ---------- Laporan Rekap ---------- */
.bar{border-radius:24px;border:2px solid #D7E7FA;box-shadow:var(--shadow);padding:16px 18px}
.fld label{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink)}
.fld select,.fld input{border-radius:14px;border:1.5px solid #D5E3F5;background:#FBFDFF;font-weight:700;padding:9px 12px}
.fld select:focus,.fld input:focus{border-color:#7DB7F2;box-shadow:0 0 0 4px rgba(125,183,242,.2)}

.btn-wa{border-radius:99px;font-family:var(--font-display);font-weight:600;font-size:17px;
  background:linear-gradient(180deg,#34DA75,#1DB85A);box-shadow:0 8px 18px rgba(37,211,102,.28),inset 0 -3px 0 rgba(0,0,0,.08)}
.btn-wa:hover{background:linear-gradient(180deg,#3BE07C,#19AD54);transform:translateY(-1px)}

.stats{gap:12px}
.stat{border-radius:22px;border:1.5px solid var(--blue-line);background:var(--blue-soft);box-shadow:var(--shadow);text-align:center}
.stat:nth-child(2){background:var(--pink-soft);border-color:var(--pink-line)}
.stat:nth-child(3){background:var(--mint-soft);border-color:var(--mint-line)}
.stat .num{font-family:var(--font-display);font-weight:600;font-size:32px;line-height:1.1;color:var(--blue)}
.stat:nth-child(2) .num{color:var(--pink)}
.stat:nth-child(3) .num{color:var(--mint)}
.stat .cap{color:var(--ink-soft);font-weight:800}
@media(max-width:520px){
  .stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat{padding:12px 6px}
  .stat .num{font-size:26px}
  .stat .cap{font-size:10px;letter-spacing:.02em}
}

.produk-foto-box{border-radius:24px;border:2px solid #fff;box-shadow:var(--shadow-lift)}

h2.section.wait{color:#C9790F}
.adm{border-radius:22px;border:1.5px solid var(--line);box-shadow:var(--shadow)}
.adm.wait{border-color:var(--yellow-line)}
th{background:#F3F8FE;color:var(--ink-soft);font-weight:800}
.adm.wait th{background:var(--yellow-soft);color:#A9690C}
.adm th.adm-col,.adm th.jam{font-weight:800;color:var(--ink-soft)}
.adm.wait th.adm-col,.adm.wait th.jam{color:#A9690C}
tbody tr:hover td{background:#FAFCFF}
.pill{font-weight:800}
td.qty b{font-family:var(--font-display);font-weight:600;font-size:17px}
@media(max-width:520px){ /* tabel muat di layar HP tanpa geser */
  .adm th,.adm td{padding:9px 6px}
  .adm th:first-child,.adm td:first-child{padding-left:12px}
  .adm td.act,.adm th.act{padding-right:8px}
  .adm table{table-layout:fixed}
  .adm td{overflow-wrap:break-word}
  .adm td.jam{white-space:nowrap;font-size:12.5px;overflow:visible}
  td.adm-col,th.adm-col{width:54px}
  td.qty,th.qty{width:46px}
  td.jam,th.jam{width:48px}
  .adm th{overflow-wrap:normal;hyphens:none}
  th.act,td.act{width:42px}
  th.act-wide,td.act-wide{width:98px}
  .adm td.act-wide{padding-right:10px}
  .adm th{font-size:10px;letter-spacing:.02em}
  .ganti{padding:5px 8px}
  .act-wide-inner{flex-direction:column;align-items:flex-end;gap:6px}
  .badge-partial{margin-left:0;margin-top:4px}
  .pill{padding:4px 9px}
}

/* ---------- Kosong / info ---------- */
.empty{border-radius:22px;border:2px dashed #C9DDF5;background:rgba(255,255,255,.85);color:var(--ink-soft);font-weight:600}
.empty a{color:var(--mint);font-weight:800}

/* ---------- Modal ---------- */
.modal-bg{background:rgba(27,42,94,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal{border-radius:28px;border:2px solid #D7E7FA;box-shadow:0 24px 60px rgba(27,42,94,.28)}
.modal label{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink)}
.modal h3{font-family:var(--font-display);font-weight:600;font-size:21px}
.modal input{border-radius:16px;border:1.5px solid #D5E3F5;background:#FBFDFF}
#pwModalBg .modal{position:relative;padding-top:40px;margin-top:40px}
#pwModalBg .modal::before{content:'';position:absolute;left:50%;top:-50px;width:84px;height:78px;transform:translateX(-50%);
  background:url("assets/penguin-head.png") center/contain no-repeat;filter:drop-shadow(0 6px 8px rgba(27,42,94,.18))}
#pwModalBg .modal h3{text-align:center}
.pw-desc{text-align:center}
.pw-error,.lock-error{border-radius:14px}

/* ---------- Toast ---------- */
.toast{border-radius:99px;font-family:var(--font-display);font-weight:500;font-size:15px;padding:12px 22px;
  background:var(--ink);box-shadow:0 12px 30px rgba(27,42,94,.3);text-align:center}
.toast.err{background:var(--danger)}
.toast.warn{background:var(--amber)}

/* ---------- Halaman Pilih User ---------- */
.current{background:#DDF5EA;border:1.5px solid #BFE9D5;color:var(--mint);border-radius:99px;font-size:14px}
.toko-label{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink);text-transform:none;letter-spacing:.2px}
.toko-chip{font-family:var(--font-body);font-size:12px;font-weight:800;padding:3px 12px;
  background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue-line)}
.toko-group.decembers .toko-chip{background:var(--pink-soft);color:var(--pink);border-color:var(--pink-line)}
.toko-group.z-studio .toko-chip{background:var(--purple-soft);color:var(--purple);border-color:#DCCDF5}
.admin-chip,.toko-group.admin .toko-chip{background:#2A3A6A;color:#fff;border-color:#2A3A6A}
.user-grid{gap:12px}
.user-btn{border-radius:24px;border:2px solid var(--line);background:#fff;box-shadow:var(--shadow);padding:20px 12px 16px}
.user-btn:hover{border-color:#B9D6F7;transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.user-avatar{width:58px;height:58px;font-family:var(--font-display);font-weight:600;font-size:24px;
  background:var(--blue-soft);color:var(--blue);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--blue-line)}
.toko-group.decembers .user-avatar{background:var(--pink-soft);color:var(--pink);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--pink-line)}
.toko-group.z-studio .user-avatar{background:var(--purple-soft);color:var(--purple);box-shadow:0 0 0 4px #fff,0 0 0 6px #DCCDF5}
.user-btn-admin .user-avatar{background:#2A3A6A;color:#fff;box-shadow:0 0 0 4px #fff,0 0 0 6px #C3CAE0}
.user-name{font-family:var(--font-display);font-weight:600;font-size:17px}
.user-btn.active{border-color:#7FD3B4;background:#F0FBF6}
.user-btn.active .user-avatar{background:var(--teal);color:#fff;box-shadow:0 0 0 4px #fff,0 0 0 6px #BFE9D5}
.user-btn-admin.active{border-color:#2A3A6A;background:#F3F5FA}
.user-btn-admin.active .user-avatar{background:#1B2A5E}

/* ---------- Log Aktivitas ---------- */
.lock-card{border-radius:28px;border:2px solid #D7E7FA;box-shadow:var(--shadow-lift);padding:30px 26px;position:relative;margin-top:70px}
.lock-card::before{content:'';position:absolute;left:50%;top:-58px;width:96px;height:88px;transform:translateX(-50%);
  background:url("assets/penguin-head.png") center/contain no-repeat;filter:drop-shadow(0 6px 8px rgba(27,42,94,.18))}
.lock-card h2{font-family:var(--font-display);font-weight:600;font-size:22px}
.lock-form input{border-radius:16px;border:1.5px solid #D5E3F5;background:#FBFDFF}
.log-list{border-radius:22px;border:1.5px solid var(--line)}
.log-user{font-family:var(--font-display);font-weight:600;font-size:15px}
.ringkas-chip{border-radius:99px;border:1.5px solid var(--line)}
h2.day b{color:var(--mint)}
.link-keluar{font-weight:800;color:var(--ink-soft)}

/* ---------- Hiasan bawah halaman ---------- */
.foot-deco{position:relative;height:170px;margin-top:22px;pointer-events:none;overflow:hidden}
.foot-mascot{position:absolute;left:-6px;bottom:0;width:230px;height:auto}
.foot-note{position:absolute;left:236px;top:26px;font-family:var(--font-display);font-weight:600;font-size:21px;
  line-height:1.15;color:var(--blue);transform:rotate(-8deg);text-align:center}
.foot-note::after{content:'';display:block;width:70%;margin:4px auto 0;height:7px;border-bottom:3px solid #9EC6F5;border-radius:0 0 50% 50%}
.foot-ice{position:absolute;right:-16px;bottom:-4px;width:160px;height:auto}
@media(max-width:520px){
  .foot-deco{height:140px}
  .foot-mascot{width:170px}
  .foot-note{left:166px;top:8px;font-size:17px}
  .foot-ice{width:118px;right:-22px}
}
@media(max-width:370px){.foot-note{left:150px;font-size:15px}.foot-ice{width:96px}}

.page-foot{position:relative;height:100px;margin-top:28px;pointer-events:none;overflow:hidden}
.pf-ice{position:absolute;left:-26px;bottom:-12px;width:140px;height:auto;opacity:.95}
.pf-peek{position:absolute;right:14px;bottom:-30px;width:96px;height:auto;transform:rotate(-6deg)}
.pf-heart{position:absolute;right:104px;bottom:52px;width:20px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21s-9-5.6-10.6-11C.3 5.2 3.4 1.5 7.2 2.2 9.4 2.6 11 4.4 12 6c1-1.6 2.6-3.4 4.8-3.8 3.8-.7 6.9 3 5.8 7.8C21 15.4 12 21 12 21z' fill='%23FF7A9C'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- Foto profil user ---------- */
.user-card{position:relative;display:flex}
.user-card .user-btn{width:100%}
.user-avatar{overflow:hidden}
.user-avatar img,.ub-ava img,.foto-prev img{width:100%;height:100%;object-fit:cover;display:block}
.user-avatar.has-foto{background:#fff}
.avatar-edit{position:absolute;top:58px;left:50%;margin-left:12px;width:30px;height:30px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7DE1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5a2 2 0 0 1 2-2h1.6l1.5-2.2h5.8l1.5 2.2H18a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3C/svg%3E") center/16px no-repeat;border:2px solid var(--blue-line);
  box-shadow:0 4px 10px rgba(70,125,200,.18);cursor:pointer;padding:0;transition:.15s;z-index:2}
.avatar-edit:hover{background-color:var(--blue-soft);border-color:#9EC6F5;transform:scale(1.08)}
.ub-ava{width:30px;height:30px;overflow:hidden}
.ub-ava.has-foto{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--blue-line)}

.foto-modal{text-align:left}
.foto-modal h3{text-align:center;margin-bottom:14px}
.foto-prev-wrap{display:flex;justify-content:center;margin-bottom:14px}
.foto-prev{width:112px;height:112px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);font-family:var(--font-display);font-weight:600;font-size:44px;
  box-shadow:0 0 0 5px #fff,0 0 0 7px var(--blue-line)}
.foto-modal label{display:block;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink);margin:0 0 7px}
.foto-modal label.foto-pilih{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 6px;
  width:max-content;background:var(--blue-soft);color:var(--blue);border:1.5px solid var(--blue-line);border-radius:99px;
  padding:9px 20px;cursor:pointer;transition:.15s}
.foto-modal label.foto-pilih::before{content:'';width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7DE1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5a2 2 0 0 1 2-2h1.6l1.5-2.2h5.8l1.5 2.2H18a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3C/svg%3E") center/contain no-repeat}
.foto-modal label.foto-pilih:hover{border-color:#9EC6F5;background-color:#DDEBFC}
#fotoInput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.foto-hint{text-align:center;font-size:12.5px;margin:0 0 14px}
.foto-simpan{background:linear-gradient(180deg,#36C291 0%,#1F9D75 100%);box-shadow:0 8px 18px rgba(34,169,127,.28),inset 0 -3px 0 rgba(0,0,0,.08)}
.foto-simpan:hover:not(:disabled){background:linear-gradient(180deg,#3DCB99 0%,#1A9670 100%)}
.foto-hapus{display:block;margin:14px auto 0;background:none;border:none;color:var(--danger);font:inherit;
  font-weight:800;font-size:13.5px;cursor:pointer;padding:6px 10px;border-radius:99px}
.foto-hapus:hover{background:var(--danger-soft)}
.foto-hapus:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Modal PIN masuk user ---------- */
.pin-modal{position:relative;text-align:center;padding-top:58px;margin-top:50px;max-width:330px}
.pin-ava{position:absolute;left:50%;top:-46px;transform:translateX(-50%);width:92px;height:92px;border-radius:50%;
  overflow:hidden;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);
  font-family:var(--font-display);font-weight:600;font-size:38px;
  box-shadow:0 0 0 5px #fff,0 0 0 7px var(--blue-line),0 12px 24px rgba(27,42,94,.18)}
.pin-ava img{width:100%;height:100%;object-fit:cover;display:block}
.pin-ava.has-foto{background:#fff}
.pin-modal h3{margin:0 0 4px;font-size:22px}
.pin-modal .pw-desc{margin:0 0 16px}
.modal #pinInput{text-align:center;font-family:var(--font-display);font-weight:600;font-size:28px;
  letter-spacing:.55em;padding:12px 10px 12px calc(10px + .55em);border-radius:18px;background:#FBFDFF}
#pinInput::placeholder{color:#C3CFE3;letter-spacing:.55em}
.pin-modal .pw-error{text-align:center}
.pin-ok{background:linear-gradient(180deg,#36C291 0%,#1F9D75 100%);box-shadow:0 8px 18px rgba(34,169,127,.28),inset 0 -3px 0 rgba(0,0,0,.08)}
.pin-ok:hover:not(:disabled){background:linear-gradient(180deg,#3DCB99 0%,#1A9670 100%)}
.goyang{animation:goyang .4s}
@keyframes goyang{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* ---------- Profil Tamu (gudang, hanya lihat) ---------- */
.tamu-chip{background:var(--mint-soft);color:var(--mint);border-color:var(--mint-line)}
.tamu-btn{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;font:inherit;color:var(--ink);
  background:#fff;border:2px dashed #BFD6F3;border-radius:24px;box-shadow:var(--shadow);padding:20px 12px 16px;
  cursor:pointer;transition:.15s}
.tamu-btn:hover{border-color:#9EC6F5;transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.tamu-btn.active{border-style:solid;border-color:#7FD3B4;background:#F0FBF6}
.tamu-btn .user-avatar{background:var(--blue-soft);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--mint-line)}
.tamu-btn .user-avatar img{object-fit:contain;padding:7px 5px 3px}
.tamu-ket{font-size:12px;font-weight:700;color:var(--muted);margin-top:-6px}
.ub-ava img[src*="penguin-head"]{object-fit:contain;padding:3px 2px 1px;background:var(--blue-soft)}

/* Mode Tamu di Laporan Rekap: sembunyikan semua tombol aksi & navigasi ke halaman lain */
.mode-tamu .top-nav,.mode-tamu .btn-wa,
.mode-tamu th.act,.mode-tamu td.act,.mode-tamu .del,.mode-tamu .ganti{display:none !important}

/* ---------- Pencarian kode produk (Laporan Rekap) ---------- */
.cari-box{position:relative;margin:0 0 14px;z-index:20}
#cariProduk{width:100%;font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--ink);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A86E0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 18px center / 22px;border:2px solid #D7E7FA;border-radius:99px;
  padding:14px 20px 14px 52px;box-shadow:var(--shadow);outline:none;transition:.15s;-webkit-appearance:none;appearance:none}
#cariProduk::placeholder{color:#A6B2CB;font-weight:600}
#cariProduk:focus{border-color:#7DB7F2;box-shadow:0 0 0 4px rgba(125,183,242,.2),var(--shadow)}
.cari-hasil{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:2px solid #D7E7FA;
  border-radius:22px;box-shadow:0 18px 40px rgba(27,42,94,.18);max-height:min(62vh,460px);overflow-y:auto;padding:6px}
.cari-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:16px;text-decoration:none;color:var(--ink);transition:.12s}
.cari-item:hover,.cari-item:focus{background:var(--blue-soft);outline:none}
.cari-item + .cari-item{border-top:1px solid #EEF3FA}
.cari-foto{width:48px;height:48px;flex:none;border-radius:14px;overflow:hidden;background:var(--blue-soft);
  display:grid;place-items:center;font-size:22px}
.cari-foto img{width:100%;height:100%;object-fit:cover;display:block}
.cari-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cari-info b{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.cari-info b mark{background:#FFE58F;color:inherit;border-radius:4px;padding:0 2px}
.cari-info small{font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.3}
.cari-stat{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:12px;font-weight:800}
.cs-dapat{background:var(--mint-soft);color:var(--mint);border-radius:99px;padding:2px 9px;white-space:nowrap}
.cs-tunggu{background:var(--yellow-soft);color:#C9790F;border-radius:99px;padding:2px 9px;white-space:nowrap}
.cari-kosong{padding:14px 12px;text-align:center;font-size:13.5px;font-weight:600;color:var(--muted)}
@media(max-width:520px){
  .cari-foto{width:42px;height:42px}
  .cari-info b{font-size:15px}
}

/* ---------- Pilihan Semua / Masih Sisa / Habis + daftar per sesi ---------- */
.lap-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.lap-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:15px;
  color:var(--ink-soft);background:#fff;border:2px solid var(--line);border-radius:99px;padding:8px 16px 8px 10px;
  cursor:pointer;box-shadow:0 4px 12px rgba(70,125,200,.08);transition:.15s}
.lap-chip::before{content:'';width:20px;height:20px;border-radius:7px;border:2px solid #C9DAF0;background:#fff;
  flex:none;transition:.15s}
.lap-chip:hover{border-color:#B9D6F7}
.lap-chip.active{color:var(--blue);background:var(--blue-soft);border-color:#9EC6F5}
.lap-chip.active::before{border-color:var(--blue);background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.lap-chip.sisa.active{color:var(--mint);background:var(--mint-soft);border-color:#A3DDC2}
.lap-chip.sisa.active::before{border-color:var(--mint);background-color:var(--mint)}
.lap-chip.habis.active{color:var(--danger);background:var(--danger-soft);border-color:#F2B2C8}
.lap-chip.habis.active::before{border-color:var(--danger);background-color:var(--danger)}

.lap-panel{margin:0 0 18px}
.lap-head{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink);margin:0 4px 10px}
.lap-head span{color:var(--muted);font-weight:500}
.lap-list{display:flex;flex-direction:column;gap:10px}
.lap-sesi{background:#fff;border:1.5px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.lap-sesi[open]{border-color:#B9D6F7}
.lap-sesi summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.lap-sesi summary::-webkit-details-marker{display:none}
.lap-sesi summary:hover{background:#FAFCFF}
.lap-cal{width:46px;height:46px;flex:none;border-radius:15px;background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7DE1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 17h.01M12 17h.01' stroke-width='3'/%3E%3C/svg%3E") center/24px no-repeat;
  box-shadow:inset 0 0 0 1.5px var(--blue-line)}
.lap-sesi:nth-child(even) .lap-cal{background-color:var(--pink-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8517A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 17h.01M12 17h.01' stroke-width='3'/%3E%3C/svg%3E");box-shadow:inset 0 0 0 1.5px var(--pink-line)}
.lap-count{flex:none;font-size:12px;font-weight:800;border-radius:99px;padding:3px 10px;background:var(--blue-soft);color:var(--blue);white-space:nowrap}
.lap-count.sisa{background:var(--mint-soft);color:var(--mint)}
.lap-count.habis{background:var(--danger-soft);color:var(--danger)}
.lap-chev{flex:none;width:30px;height:30px;border-radius:50%;background:var(--blue-soft);position:relative;transition:.2s}
.lap-chev::after{content:'';position:absolute;left:50%;top:45%;width:8px;height:8px;border-right:2.5px solid var(--blue);
  border-bottom:2.5px solid var(--blue);transform:translate(-50%,-50%) rotate(45deg);transition:.2s}
.lap-sesi[open] .lap-chev::after{top:55%;transform:translate(-50%,-50%) rotate(-135deg)}
.lap-produk{border-top:1.5px solid #EEF3FA;padding:6px;background:#FBFDFF}
.lap-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:16px;text-decoration:none;color:var(--ink);transition:.12s}
.lap-item:hover{background:var(--blue-soft)}
.lap-item + .lap-item{border-top:1px solid #EEF3FA}
.lp-pill{flex:none;font-size:12px;font-weight:800;border-radius:99px;padding:3px 10px;white-space:nowrap}
.lp-pill.sisa{background:var(--mint-soft);color:var(--mint)}
.lp-pill.habis{background:var(--danger-soft);color:var(--danger)}
.lp-tunggu{color:#C9790F !important}
.lap-more{display:block;margin:12px auto 0;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--blue);
  background:#fff;border:1.5px solid var(--blue-line);border-radius:99px;padding:9px 20px;cursor:pointer}
.lap-more:hover{border-color:#9EC6F5}
@media(max-width:520px){
  .lap-chip{font-size:14px;padding:7px 13px 7px 9px}
  .lap-cal{width:40px;height:40px;background-size:21px}
  .lap-sesi summary{gap:9px;padding:11px 12px}
  .lap-count{font-size:11px;padding:3px 8px}
  .lap-chev{width:26px;height:26px}
}

/* Rentang tanggal Dari – Sampai untuk daftar laporan */
.lap-tgl{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:-2px 0 14px;padding:10px 14px;
  background:#fff;border:1.5px solid var(--line);border-radius:20px;box-shadow:0 4px 12px rgba(70,125,200,.08)}
.lap-tgl label{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink);margin:0}
.lap-tgl input[type="date"]{font-size:14.5px;padding:8px 12px;border-radius:14px;min-width:0;width:auto}
.lap-tgl-reset{font:inherit;font-size:13px;font-weight:800;color:var(--danger);background:var(--danger-soft);
  border:none;border-radius:99px;padding:6px 12px;cursor:pointer;margin-left:auto}
@media(max-width:520px){
  .lap-tgl{display:grid;grid-template-columns:auto 1fr;gap:8px 10px}
  .lap-tgl input[type="date"]{width:100%}
  .lap-tgl-reset{grid-column:1 / -1;margin:0;justify-self:start}
}