/* 20-r227.css — v1.19.227: POS sections, parcel unit, Arvix date picker, calm windows, red close X */

/* ── invoice date: the Arvix picker in place of the browser one ── */
.idt-wrap .dp-wrap{flex:0 1 170px;min-width:140px}
.dp-day.dp-dis{opacity:.35;cursor:not-allowed;pointer-events:none}

/* ── POS tabs bar: one line, scrolls sideways (wheel or finger) ── */
#pos-type-filter-bar{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:smooth}
#pos-type-filter-bar::-webkit-scrollbar{display:none}
#pos-type-filter-bar > *{flex-shrink:0}
.psec-tab{display:inline-flex;align-items:center;gap:6px}
.psec-dot{width:9px;height:9px;border-radius:50%;background:var(--psec-c,#0d9e6e);box-shadow:0 0 0 2px color-mix(in srgb,var(--psec-c,#0d9e6e) 30%,transparent);flex:none}
.psec-tab.on,.psec-tab.active{background:var(--psec-c,#0d9e6e)!important;border-color:var(--psec-c,#0d9e6e)!important;color:#fff!important}
.psec-tab.on .psec-dot,.psec-tab.active .psec-dot{background:#fff}
html.silk .psec-tab.on,html.silk .psec-tab.active{background:transparent!important;border-color:transparent!important;color:var(--psec-c,#0d9e6e)!important}
html.silk .psec-tab.on .psec-dot,html.silk .psec-tab.active .psec-dot{background:var(--psec-c,#0d9e6e)}
.psec-tool{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:20px;border:1px dashed var(--gold2,#12c887);background:transparent;color:var(--gold2,#12c887);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .15s}
.psec-tool:hover{background:rgba(18,200,135,.12)}
.psec-tool.psec-ord{border-style:solid;border-color:var(--border);color:var(--cream2);padding:6px 10px}
[draggable=true].cbtn{cursor:grab}
.psec-drag{opacity:.45}
.psec-over{box-shadow:0 0 0 2px var(--gold2,#12c887)!important}

/* ── section window ── */
.psec-sw{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.psec-c{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;position:relative;transition:transform .12s}
.psec-c:hover{transform:scale(1.1)}
.psec-c.on{box-shadow:0 0 0 2px var(--modal-bg,#151c1f),0 0 0 4px currentColor}
.psec-own{overflow:hidden;background:conic-gradient(#e5484d,#f5a623,#f2d34b,#30a46c,#0d9e6e,#3e8ee8,#8e4ec6,#e5484d)}
.psec-own input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.psec-ih{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}
.psec-items{max-height:42vh;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:4px;border-radius:10px;border:1px solid var(--border);background:var(--bg3)}
.psec-it{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;user-select:none;font-size:13px}
.psec-it:hover{background:var(--bg4)}
.psec-it input{accent-color:var(--gold2,#12c887);width:16px;height:16px}
.psec-it .psec-k{margin-inline-start:auto;font-size:11px;color:var(--muted)}
.psec-or{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;border:1px solid var(--border);background:var(--bg4);margin-bottom:6px}
.psec-or .psec-on{flex:1;min-width:0;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psec-or button{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--cream);cursor:pointer;font-size:14px}
.psec-or button:hover:not(:disabled){border-color:var(--gold2,#12c887);color:var(--gold2,#12c887)}
.psec-or button:disabled{opacity:.3;cursor:default}
.psec-pk{display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;margin-bottom:6px;border-radius:10px;border:1px solid var(--border);background:var(--bg4);color:var(--cream);font:inherit;font-weight:800;cursor:pointer;text-align:start}
.psec-pk:hover{border-color:var(--psec-c,var(--gold2))}
.psec-pk-new{border-style:dashed;color:var(--gold2,#12c887);background:transparent}

/* ── products: pick several, then add them to a section ── */
.psec-cb{display:inline-grid;place-items:center;width:18px;height:18px;margin-inline-end:8px;border-radius:5px;border:2px solid var(--muted);vertical-align:middle;transition:background .12s,border-color .12s}
.psec-row-on .psec-cb{background:var(--gold2,#12c887);border-color:var(--gold2,#12c887)}
.psec-row-on .psec-cb::after{content:'';width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
table.psec-selmode tbody tr{cursor:pointer}
.psec-row-on > td{background:rgba(18,200,135,.1)!important}
#btn-psec-sel.on{background:var(--gold);color:#fff;border-color:var(--gold)}
#psec-selbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:150;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--modal-bg,#151c1f);border:1px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.4);font-weight:800;font-size:13px;color:var(--cream);white-space:nowrap;max-width:calc(100vw - 24px)}
#psec-selbar .btn{padding:7px 12px;font-size:12.5px}

/* ── parcel: how many pieces one parcel holds ── */
.spi-pcs{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:11px;font-weight:700;color:var(--cream2);white-space:nowrap}
.spi-pcs input{width:80px;padding:4px 6px;border-radius:7px;border:1px solid var(--gold);background:var(--bg3);color:var(--cream);font:inherit;font-size:12px;text-align:center}

/* ── close X on every window: red and glowing, like the title-bar X ── */
.r8-x,html.silk .r8-x,html.silk.light .r8-x,html.light .r8-x{
  background:rgba(255,64,64,.14)!important;border:1px solid #ff4d4d!important;color:#ff5c5c!important;
  box-shadow:0 0 10px rgba(255,64,64,.65),inset 0 0 6px rgba(255,64,64,.25)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:box-shadow .15s,background .15s,transform .15s}
.r8-x:hover,.r8-x:focus-visible,html.silk .r8-x:hover,html.light .r8-x:hover{background:#ff3b3b!important;color:#fff!important;box-shadow:0 0 16px rgba(255,64,64,.95)!important;transform:scale(1.08);outline:none}
.r8-x svg{width:14px;height:14px}
html.light .r8-x,html.silk.light .r8-x{background:rgba(255,64,64,.08)!important;box-shadow:0 0 8px rgba(255,64,64,.45)!important}

/* ── calm windows: night-green glass that matches the app background (owner's pick, v1.19.227) ──
   Same deep green-black as the page, a soft green glow at the top, a faint grid and a glowing edge.
   Tokens are set on the window itself, so everything inside it (cards, inputs, rows, tables) follows. */
:root{--modal-bg:#08110e}
html:not(.silk):not(.light) .modal,
html:not(.silk):not(.light) .ax-panel{
  --modal-bg:#08110e;--bg2:rgba(18,200,135,.05);--bg3:rgba(0,0,0,.28);--bg4:rgba(18,200,135,.08);
  --card:rgba(18,200,135,.04);--surface:rgba(18,200,135,.04);
  --border:rgba(18,200,135,.14);--cream2:#b9cfc6;--muted:#7f9890;
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(13,158,110,.20),transparent 60%),
    radial-gradient(60% 50% at 100% 100%,rgba(13,158,110,.10),transparent 70%),
    linear-gradient(rgba(18,200,135,.035) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(18,200,135,.035) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(180deg,#0a1612,#060c0a)!important;
  border:1px solid rgba(18,200,135,.22)!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 30px 80px rgba(0,0,0,.65),0 0 60px rgba(13,158,110,.10),inset 0 1px 0 rgba(18,200,135,.25)!important}
html:not(.silk):not(.light) .modal > .ov-bar{background:rgba(6,14,11,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:rgba(18,200,135,.14)}
html:not(.silk):not(.light) .modal .modal-title{color:#eafff6}
html:not(.silk):not(.light) .ov{background:rgba(2,8,6,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
html:not(.silk):not(.light) .ax-ov{background:rgba(2,8,6,.62)!important}

html.light:not(.silk) .modal,
html.light:not(.silk) .ax-panel{
  --modal-bg:#fbfcfb;--bg2:#f3f6f4;--bg3:#f6f8f7;--bg4:#eef3f0;--card:#ffffff;--surface:#ffffff;
  --border:#dbe5e0;--cream2:#3b5a4e;
  background:#fbfcfb!important;border:1px solid #dbe5e0!important;box-shadow:0 20px 50px rgba(20,40,32,.16)!important}
html.light:not(.silk) .modal > .ov-bar{background:#f3f6f4;border-bottom-color:#e2eae6}
html.light:not(.silk) .ov{background:rgba(30,45,40,.35)}
html.light:not(.silk) .ax-ov{background:rgba(30,45,40,.35)!important}

/* inputs inside windows: one quiet look */
html:not(.silk):not(.light) .modal .fc,
html:not(.silk):not(.light) .ax-panel .fc,
html:not(.silk):not(.light) .modal input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
html:not(.silk):not(.light) .modal select,
html:not(.silk):not(.light) .modal textarea{background:rgba(0,0,0,.35);border-color:rgba(18,200,135,.16)}
html.light:not(.silk) .modal .fc,
html.light:not(.silk) .ax-panel .fc,
html.light:not(.silk) .modal input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
html.light:not(.silk) .modal select,
html.light:not(.silk) .modal textarea{background:#ffffff;border-color:#d3dfd9}
.modal .fc:focus,.ax-panel .fc:focus,.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--gold2,#12c887)!important;box-shadow:0 0 0 3px rgba(18,200,135,.14);outline:none}

/* routine window: fixed amount / percentage switch (v1.19.227) */
.pd-mode{display:flex;gap:4px;padding:4px;margin-bottom:14px;border-radius:12px;background:var(--bg3,rgba(0,0,0,.28));border:1px solid var(--border)}
.pd-mode-b{flex:1;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-weight:800;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
.pd-mode-b.on{background:var(--gold,#0d9e6e);color:#fff;box-shadow:0 2px 8px rgba(13,158,110,.25)}
.pd-mode-b:not(.on):hover{color:var(--cream2)}
.pd-prev{margin-top:4px}
.pd-card{border-inline-start:3px solid var(--gold,#0d9e6e)}
.pd-pct{min-width:48px;height:48px;padding:0 6px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;background:rgba(13,158,110,.12);color:var(--gold2,#12c887)}
html.silk .pd-mode{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
html.silk .pd-mode-b{font-weight:400}
html.silk .pd-mode-b.on{background:rgba(255,255,255,.1);color:#f2f2f2;box-shadow:none}
html.silk .pd-card{border-inline-start-color:#a9d977}
html.silk .pd-pct{background:rgba(169,217,119,.1);color:#a9d977;font-weight:400}