/* 11-pos-look.css — v1.19.197: dropdowns on top, drafts, and the calmer sales invoice screen (only inside #pg-pos). */

/* ── drop-down lists: solid, and above everything ── */
:root{ --pop-bg:#10231d; }
html.light{ --pop-bg:#ffffff; }
.csel-dd{ background:var(--pop-bg); z-index:200000; overflow-y:auto; box-shadow:0 14px 38px rgba(0,0,0,.45); }
.prod-pick-dd{ background:var(--pop-bg); box-shadow:0 14px 38px rgba(0,0,0,.45); }
html.light .csel-dd, html.light .prod-pick-dd{ box-shadow:0 14px 34px rgba(10,60,40,.18); }

/* ── drafts ── */
.dft-chip{ position:fixed; top:8px; left:118px; z-index:100001; padding:3px 11px; min-height:0; border-radius:20px; background:var(--bg3); color:var(--gold2); font-weight:800; }
.dft-chip.with-perm{ left:236px; }
.dft-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 2px; border-bottom:1px solid var(--border); }
.dft-row:last-child{ border-bottom:none; }
.dft-main{ min-width:0; }
.dft-main .fs11{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:380px; }
.dft-acts{ display:flex; gap:6px; flex-shrink:0; }
.dft-tag{ font-size:10px; font-weight:800; padding:1px 7px; border-radius:20px; color:#f4b860; background:rgba(244,184,96,.13); }
.dft-ask-btns{ display:flex; flex-direction:column; gap:8px; }
.dft-ask-btns .btn{ width:100%; justify-content:center; padding:11px; }
@media (max-width:768px){ .dft-chip{ top:auto; bottom:92px; left:16px; } .dft-chip.with-perm{ left:16px; } .dft-row{ flex-wrap:wrap; } }

/* ── sales invoice: the app's own green and glass, lifted so it doesn't feel heavy (v1.19.199) ── */
#pg-pos{ --pc-tone:var(--gold2); }
#pg-pos .pos-left, #pg-pos .inv-panel{ border-radius:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 38px rgba(0,0,0,.28); }
html.light #pg-pos .pos-left, html.light #pg-pos .inv-panel{ box-shadow:0 10px 28px rgba(10,60,40,.1); }
#pg-pos .pos-search{ border-bottom:none; padding:14px 14px 10px; }
#pg-pos .pos-search .fc{ border-radius:12px; padding:11px 14px; }
#pg-pos .pos-filters{ padding:0 14px 10px; }
#pg-pos #pos-type-filter-bar .cbtn{ border-radius:10px; }

/* cards: the top band says the type, the name and the price lead below it */
#pg-pos .pos-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; padding:4px 14px 14px; }
#pg-pos .pos-card{ display:flex; flex-direction:column; border-radius:14px; border-color:color-mix(in srgb,var(--pc-tone) 22%, var(--border));
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); transition:transform .16s cubic-bezier(.2,.9,.3,1), border-color .16s, box-shadow .16s; }
html.light #pg-pos .pos-card{ background:rgba(255,255,255,.72); }
#pg-pos .pos-card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--pc-tone) 65%, transparent); box-shadow:0 10px 24px rgba(0,0,0,.25), 0 0 0 1px color-mix(in srgb,var(--pc-tone) 25%, transparent); }
html.light #pg-pos .pos-card:hover{ box-shadow:0 10px 22px rgba(10,60,40,.14); }
#pg-pos .pos-card:active{ transform:scale(.98); }
#pg-pos .pos-card.pi-low{ border-color:color-mix(in srgb,var(--pc-tone) 22%, var(--border)); }
.pc-art{ height:74px; display:grid; place-items:center; flex-shrink:0; color:var(--pc-tone,var(--gold2)); background:radial-gradient(90px 60px at 50% 40%, color-mix(in srgb,var(--pc-tone,var(--gold2)) 26%, transparent), color-mix(in srgb,var(--pc-tone,var(--gold2)) 7%, transparent)); }
.pc-art svg{ width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mv-fly.pc-art{ background:var(--bg3); }
#pg-pos .pos-card-img-wrap{ height:74px; aspect-ratio:auto; flex-shrink:0; }
#pg-pos .pos-card-body{ padding:9px 11px 11px; display:flex; flex-direction:column; flex:1; }
#pg-pos .pos-card-name{ font-size:13.5px; }
#pg-pos .pos-card-qty{ font-size:11px; font-weight:600; color:var(--cream2); margin-top:3px; }
#pg-pos .pos-card-qty.pc-out{ align-self:flex-start; color:#eab35e; background:rgba(234,179,94,.13); padding:1px 8px; border-radius:20px; font-weight:700; }
html.light #pg-pos .pos-card-qty.pc-out{ color:#a8650f; }
#pg-pos .pos-card-price{ font-size:16px; margin-top:auto; padding-top:8px; font-variant-numeric:tabular-nums; }
#pg-pos .pos-card-price small{ font-size:10.5px; font-weight:600; color:var(--cream2); margin-inline-start:2px; }
#pg-pos .pc-orig{ font-size:10px; color:var(--muted); font-weight:500; }

/* invoice side */
#pg-pos .inv-head{ padding:14px 16px; gap:8px; flex-wrap:wrap; }
#pg-pos .inv-foot{ padding:14px 16px; }
#pg-pos .inv-row{ border-radius:12px; padding:10px 12px; margin:0 8px 6px; }
#pg-pos .inv-grand{ color:var(--cream); align-items:baseline; }
#pg-pos #inv-total{ font-size:26px; color:var(--gold2); font-variant-numeric:tabular-nums; }

/* empty invoice: friendly, not a dark hole */
.pos-empty{ height:100%; min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; padding:24px; color:var(--cream2); }
.pos-empty-ico{ width:78px; height:78px; border-radius:50%; display:grid; place-items:center; margin-bottom:8px; color:var(--gold2); background:radial-gradient(circle at 35% 30%, color-mix(in srgb,var(--gold2) 28%, transparent), color-mix(in srgb,var(--gold2) 7%, transparent)); box-shadow:0 0 34px color-mix(in srgb,var(--gold2) 16%, transparent); }
.pos-empty-ico svg{ width:36px; height:36px; }
.pos-empty b{ font-size:15px; color:var(--cream); }
.pos-empty span{ font-size:12.5px; }

@media (max-width:768px){
  #pg-pos .pos-grid{ grid-template-columns:repeat(2,1fr); gap:8px; padding:4px 10px 10px; }
  #pg-pos #inv-total{ font-size:22px; }
  .pc-art, #pg-pos .pos-card-img-wrap{ height:62px; }
}
@media (prefers-reduced-motion:reduce){ #pg-pos .pos-card{ transition:none; } }

/* v1.19.198: production order plan and packaging (js/src/05e) */
.mp-plan-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 12px; }
.spi-pack-tog{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; cursor:pointer; margin-bottom:2px; }
.spi-pack-tog input{ width:15px; height:15px; accent-color:var(--gold); }