/* ===== JEKUNRL POS · Tema Retail hangat =====
   Dimuat paling akhir. Mode gelap/terang dipilih lewat <html data-theme="dark|light">.
   Tanpa atribut itu, tema mengikuti sistem perangkat. */

:root[data-theme="dark"]{
  --bg:#1A1411;--text:#FBF3EA;--muted:#BFA892;--accent-text:#FDBA74;--accent:#FB923C;--accent2:#F59E0B;
  --primary:#FB923C;--on-primary:#2A1606;--danger:#FF8A7A;--ok:#86EFAC;--r:18px;
  --card:#2A211C;--card2:#241C18;--border:rgba(255,220,180,.12);--glass-border:rgba(255,220,180,.14);
  --g1:#2E241E;--g2:#221A16;--gb1:#2E241E;--gb2:#221A16;--panel1:#2E241E;--panel2:#221A16;--top1:#2E241E;--top2:#221A16;
  --field:#241C18;--field-hi:#2E241E;--field-shadow:rgba(0,0,0,.3);--ph:#8F7866;
  --hi:inset 0 1px 0 rgba(255,220,180,.08);--shadow:0 10px 28px rgba(0,0,0,.35);--shadow-lg:0 24px 60px rgba(0,0,0,.5);
  --ring:rgba(251,146,60,.25);--ring-border:rgba(251,146,60,.85);
  --btn-a:#FDBA74;--btn-b:#F97316;--btn-glow:rgba(249,115,22,.3);
  --pill-a:rgba(251,146,60,.28);--pill-b:rgba(255,255,255,.06);--pill-border:rgba(251,146,60,.35);
  --ico-bg:rgba(255,220,180,.08);--ico-on:rgba(251,146,60,.3);--scrim:rgba(10,6,4,.55);--bd:rgba(0,0,0,.4);
  --option-bg:#2A211C;--skel1:#2A211C;--skel2:#3A2E27;--solid:#2A211C;--mascot-sh:rgba(0,0,0,.4);--door-glow:#FFE2C2;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#FFF4E6;--text:#2B1A0E;--muted:#7A5C44;--accent-text:#C2410C;--accent:#F97316;--accent2:#EA580C;
  --primary:#F97316;--on-primary:#FFF7ED;--danger:#B91C1C;--ok:#15803D;--r:18px;
  --card:rgba(255,255,255,.78);--card2:rgba(255,255,255,.6);--border:rgba(124,58,12,.12);--glass-border:rgba(255,255,255,.9);
  --g1:#FFFFFF;--g2:#FFF1DE;--gb1:#FFFFFF;--gb2:#FFF1DE;--panel1:#FFFFFF;--panel2:#FFF1DE;--top1:#FFFFFF;--top2:#FFF1DE;
  --field:rgba(255,255,255,.9);--field-hi:#FFFFFF;--field-shadow:rgba(124,58,12,.1);--ph:#A8876F;
  --hi:inset 0 1px 0 #FFFFFF;--shadow:0 10px 28px rgba(124,58,12,.14);--shadow-lg:0 24px 60px rgba(124,58,12,.2);
  --ring:rgba(249,115,22,.25);--ring-border:rgba(234,88,12,.85);
  --btn-a:#FDBA74;--btn-b:#F97316;--btn-glow:rgba(234,88,12,.28);
  --pill-a:rgba(249,115,22,.22);--pill-b:rgba(255,255,255,.8);--pill-border:rgba(234,88,12,.35);
  --ico-bg:rgba(255,255,255,.8);--ico-on:rgba(249,115,22,.25);--scrim:rgba(120,60,20,.25);--bd:rgba(124,58,12,.2);
  --option-bg:#FFFFFF;--skel1:rgba(255,255,255,.5);--skel2:#FFFFFF;--solid:#FFF8EF;--mascot-sh:rgba(124,58,12,.25);--door-glow:#FFFFFF;
  color-scheme:light;
}
/* Latar belakang dekoratif ikut tema yang dipilih */
:root[data-theme="dark"] body::before{background:radial-gradient(ellipse at 8% 0%,rgba(251,146,60,.14),transparent 48%),radial-gradient(ellipse at 100% 100%,rgba(245,158,11,.10),transparent 45%)}
:root[data-theme="light"] body::before{background:radial-gradient(ellipse at 8% 0%,rgba(251,146,60,.22),transparent 48%),radial-gradient(ellipse at 100% 100%,rgba(245,158,11,.16),transparent 45%)}

/* ----- Gaya umum ----- */
h3{font-weight:800;letter-spacing:-.2px}
.card{border-radius:18px}
.btn.primary{font-weight:700;letter-spacing:.2px}
.nav a.on{box-shadow:inset 4px 0 0 var(--accent)}
.view>*{animation:retailIn .45s var(--ease) both}
.view>*:nth-child(2){animation-delay:.05s}.view>*:nth-child(3){animation-delay:.1s}
@keyframes retailIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ----- Tampilan Desktop (layar lebar) ----- */
@media (min-width:821px){
  .shell{grid-template-columns:260px 1fr}
  .side{margin:14px 0 14px 14px}
  .top{margin:14px 16px 0 14px}
  .view{padding:96px 36px 32px}
  .view>*{max-width:1100px;margin-left:auto;margin-right:auto}
}

/* ----- Tampilan HP: navigasi bawah lebih besar dan mudah disentuh ----- */
@media (max-width:820px){
  .view{padding:84px 14px 112px}
  .bottom{box-shadow:var(--shadow-lg)}
  .bottom a,.bottom button{min-height:60px;font-size:12px}
  .bottom a span,.bottom button span{font-size:19px}
  .btn{min-height:46px}
  .top h2{font-size:17px}
}

/* ----- Kartu tema di pengaturan ----- */
.theme-card{margin-bottom:12px}
.theme-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.theme-opts .btn{min-height:48px}

@media (prefers-reduced-motion:reduce){.view>*{animation:none}}

/* ----- Tombol keranjang bayar nanti (kasir) ----- */
.openbar{display:flex;justify-content:flex-end;margin:0 0 10px}
.open-btn{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px}
.open-btn .badge{min-width:22px;text-align:center}
.open-list{display:grid;gap:8px;margin-top:12px}

/* ----- Perbaikan kasir HP -----
   Animasi .view>* di HP hanya memakai opacity. Animasi transform membuat kontainer
   kasir menjadi acuan posisi untuk keranjang fixed, sehingga keranjang tidak penuh layar. */
@keyframes retailFade{from{opacity:0}to{opacity:1}}
@media (max-width:820px){
  .view>*{animation:retailFade .45s var(--ease) both}
  #cart{position:fixed!important;top:0!important;right:0;bottom:0;left:0;margin:0!important;height:100vh;height:100dvh;max-height:none!important;
    overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px calc(120px + env(safe-area-inset-bottom));
    visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
  #cart.open{visibility:visible;transition:transform .5s var(--ease),visibility 0s}
  #cart.open + #cartbar{display:none!important}
  #grid{padding-bottom:150px}
}

/* ----- Tombol Bayar nanti sejajar dengan filter kategori ----- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.toolbar #q{flex:1 1 100%;width:100%}
.toolbar #fc{flex:0 1 auto;width:auto;min-width:0;max-width:60%}
.toolbar .openbar{display:flex;justify-content:flex-end;flex:1 1 auto;margin:0}
.toolbar .open-btn{margin:0}

/* ----- Presisi layout desktop (termasuk mode "Desktop site" di HP) -----
   Kolom kasir dibuat fleksibel supaya keranjang tidak terpotong pada lebar sekitar 900-1100 px. */
@media (min-width:821px){
  .shell{grid-template-columns:240px minmax(0,1fr)}
  .view{padding:96px 24px 32px}
  .view>*{max-width:100%;min-width:0}
  .pos{grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:16px}
  .pos>*{min-width:0}
}
@media (min-width:821px) and (max-width:1100px){
  .shell{grid-template-columns:220px minmax(0,1fr)}
  .view{padding:92px 16px 24px}
  .pos{grid-template-columns:minmax(0,1fr) minmax(280px,320px);gap:12px}
}

/* ----- Ikon keranjang saja, sejajar tepat di sebelah filter kategori ----- */
.toolbar #fc{flex:1 1 0;min-width:0;max-width:none;width:auto;min-height:44px}
.toolbar .openbar{flex:0 0 auto;margin:0;display:flex}
.toolbar .open-btn{width:44px;height:44px;min-height:44px;padding:0;gap:0;justify-content:center;margin:0}
.toolbar .open-btn svg{display:block}
.toolbar .open-btn .badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;line-height:20px;font-size:11px}

/* ----- QR pembayaran statis di kasir ----- */
.qrbox{text-align:center;margin:10px 0}
.qrbox img{width:min(220px,70vw);height:auto;border-radius:12px;background:#fff;padding:8px}

/* ----- Nama karyawan yang login, di bawah nama toko (sidebar) ----- */
.side-user{margin:-12px 0 14px;padding:0 10px;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ----- Grup yang bisa dilipat (Riwayat: Belum bayar / Sudah selesai) ----- */
details.grp{margin:8px 0}
details.grp > summary{cursor:pointer;list-style:none;font-weight:700;padding:8px 4px;display:flex;align-items:center;justify-content:space-between;user-select:none}
details.grp > summary::-webkit-details-marker{display:none}
details.grp > summary::after{content:'▾';font-size:14px;color:var(--muted);transition:transform .2s}
details.grp:not([open]) > summary::after{transform:rotate(-90deg)}