/* POS system additions – login, staff wizard, data pages, datatables + sweetalert to match the theme.
   The theme files (theme.css, pos.css, products.css) are left as they came. */

/* ---------- Login: cover + form, with floating effects ---------- */
.lg-body{background:var(--g9);margin:0}
.lg{display:flex;min-height:100vh;min-height:100dvh}
.lg-cover{position:relative;flex:1 1 56%;overflow:hidden;background:radial-gradient(circle at 30% 30%,#1f6b3a,#0c2a18 62%);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 30px;color:#fff}
.lg-cover .blob{opacity:.8}
.lg-grid{position:absolute;inset:0;background:linear-gradient(#ffffff0a 1px,#0000 1px) 0 0/34px 34px,linear-gradient(90deg,#ffffff0a 1px,#0000 1px) 0 0/34px 34px;-webkit-mask:radial-gradient(circle at 50% 45%,#000 30%,#0000 75%);mask:radial-gradient(circle at 50% 45%,#000 30%,#0000 75%)}
.lg-hero{position:relative;z-index:2;text-align:center;max-width:520px}
.lg-logo-wrap{position:relative;display:inline-block;animation:lgfloat 5s ease-in-out infinite}
.lg-glow{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,#b4e62e66,#0000 65%);filter:blur(18px);animation:lgpulse 3.2s ease-in-out infinite}
.lg-logo-big{position:relative;display:block;width:min(400px,72vw);height:auto;background:#fff;border-radius:28px;padding:18px 22px;box-shadow:0 30px 70px #0008,0 0 0 6px #ffffff14}
.lg-tag{font-weight:800;font-size:clamp(26px,3.4vw,40px);margin:30px 0 6px;letter-spacing:-.5px}.lg-tag span{color:var(--lime)}
.lg-sub{color:#cfe0d4;margin:0 auto 18px;max-width:420px}
.lg-chips{gap:10px;justify-content:center;flex-wrap:wrap}
.lg-chips span{background:#ffffff14;border:1px solid #ffffff22;border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600;backdrop-filter:blur(4px);animation:lgfloat 4s ease-in-out infinite}
.lg-chips span:nth-child(2){animation-delay:.5s}.lg-chips span:nth-child(3){animation-delay:1s}
.lg-chips i{color:var(--lime);margin-right:4px}
.lg-foot{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#9fb8a8;font-size:12px;z-index:2}
/* floating icons */
.fl{position:absolute;z-index:1;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:24px;color:var(--lime);background:#ffffff12;border:1px solid #ffffff1f;backdrop-filter:blur(3px);animation:lgdrift 9s ease-in-out infinite}
.fl.f1{top:9%;left:9%}.fl.f2{top:16%;right:10%;animation-delay:-2s;animation-duration:11s}.fl.f3{bottom:20%;left:7%;animation-delay:-4s;color:#ffc93c}
.fl.f4{bottom:12%;right:13%;animation-delay:-1s;animation-duration:10s}.fl.f5{top:46%;left:4%;width:42px;height:42px;font-size:18px;animation-delay:-5s}
.fl.f6{top:52%;right:5%;width:42px;height:42px;font-size:18px;animation-delay:-3s}.fl.f7{top:4%;left:46%;width:40px;height:40px;font-size:17px;animation-delay:-6s;animation-duration:12s}
.fl.f8{bottom:5%;left:38%;width:40px;height:40px;font-size:17px;animation-delay:-7s}
.fl.f5 i,.fl.f7 i{animation:lgspin 8s linear infinite;display:inline-block}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px 3px #b4e62e88;animation:lgspark 4s ease-in-out infinite;z-index:1}
.spark.s1{top:28%;left:24%}.spark.s2{top:22%;right:28%;animation-delay:1s}.spark.s3{bottom:30%;right:24%;animation-delay:2s}.spark.s4{bottom:26%;left:30%;animation-delay:3s}
@keyframes lgfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes lgdrift{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(14px,-18px) rotate(6deg)}66%{transform:translate(-10px,12px) rotate(-5deg)}}
@keyframes lgpulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes lgspark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.3)}}
@keyframes lgspin{to{transform:rotate(360deg)}}
/* form side */
.lg-side{flex:0 0 44%;max-width:560px;background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px;position:relative}
.lg-card{width:100%;max-width:420px;background:#fff;border-radius:24px;padding:32px 28px;box-shadow:0 24px 60px #0b2a1a22;animation:vin .6s var(--ease)}
.lg-pane{display:none}.lg-pane.active{display:block;animation:wzf .45s var(--ease)}
.lg-mini{display:block;max-width:150px;max-height:70px;margin:0 auto 14px}
.lg-card h4{font-weight:800;text-align:center;margin-bottom:4px}
.lg-card p.sub-t{text-align:center;color:var(--mut);margin-bottom:22px}
.lg-card .input-group-text{background:#fff;border-color:var(--line);border-radius:10px 0 0 10px}
.lg-card .input-group .form-control{border-left:0}
.lg-card .eye{cursor:pointer;border-left:0;border-radius:0 10px 10px 0!important}
.lg-card .btn-lime{width:100%;padding:12px}
.lg-card .pill button{padding:9px 12px;font-size:13px}
.lg-link{color:#3d7a50;font-weight:700;font-size:13px;text-decoration:none}.lg-link:hover{color:var(--g9);text-decoration:underline}
.lg-back{display:inline-flex;gap:6px;align-items:center;color:var(--mut);font-size:13px;font-weight:600;text-decoration:none;margin-bottom:8px}.lg-back:hover{color:var(--g9)}
.lg-ico{width:62px;height:62px;border-radius:18px;background:#eaf7c4;color:var(--g9);display:grid;place-items:center;font-size:28px;margin:6px auto 12px;animation:lgfloat 3.5s ease-in-out infinite}
.lg-copy{color:var(--mut);font-size:12px;margin-top:18px;text-align:center}
.otp{display:flex;gap:8px;justify-content:center}
.otp input{width:46px;height:54px;text-align:center;font-size:22px;font-weight:800;border:1px solid var(--line);border-radius:12px;font-family:ui-monospace,Menlo,Consolas,monospace;transition:.2s}
.otp input:focus{outline:0;border-color:var(--limed);box-shadow:0 0 0 .2rem #b4e62e44;transform:translateY(-2px)}
@keyframes wzf{from{opacity:0;transform:translateX(30px)}}
/* phones / tablets: cover on top, form below */
@media(max-width:991.98px){
 .lg{flex-direction:column}
 .lg-cover{flex:0 0 auto;min-height:42vh;padding:34px 20px 70px}
 .lg-logo-big{width:min(300px,74vw);border-radius:22px;padding:12px 16px}
 .lg-tag{margin-top:20px;font-size:24px}
 .fl{width:42px;height:42px;font-size:18px;border-radius:12px}
 .fl.f5,.fl.f6,.fl.f7,.fl.f8{display:none}
 .lg-side{flex:1;max-width:none;padding:0 14px 24px;justify-content:flex-start}
 .lg-card{margin-top:-46px;position:relative;z-index:3;padding:26px 18px}
 .otp input{width:42px;height:50px}
}
@media(prefers-reduced-motion:reduce){.lg *{animation:none!important}}

/* ---------- Sidebar / top bar extras ---------- */
/* sidebar / top bar brand = small copy of the preloader logo */
.sbrand{display:flex;align-items:center;gap:9px}.mbrand{align-items:center;gap:9px}
.sbrand .bars,.mbrand .bars{height:30px;gap:3px;margin:0;flex:0 0 auto}
.sbrand .bars i,.mbrand .bars i{width:5px;height:10px;font-size:0;animation:barS 1.1s var(--ease) infinite}
.sbrand .bars i:nth-child(2),.mbrand .bars i:nth-child(2){animation-delay:.12s}.sbrand .bars i:nth-child(3),.mbrand .bars i:nth-child(3){animation-delay:.24s}.sbrand .bars i:nth-child(4),.mbrand .bars i:nth-child(4){animation-delay:.36s}.sbrand .bars i:nth-child(5),.mbrand .bars i:nth-child(5){animation-delay:.48s}
@keyframes barS{0%,100%{height:9px}50%{height:28px}}
.sbrand .pre-name{font-size:17px;color:#fff;white-space:normal;line-height:1.15;text-align:left}
.mbrand{gap:5px;min-width:0}.mbrand .bars{height:24px}
.mbrand .pre-name{font-size:10.5px;color:var(--ink);line-height:1.1;white-space:nowrap;letter-spacing:-.3px}
.mbrand .pre-name span{display:block}
.mbrand .bars i:nth-child(even){background:var(--g9)}
/* profit hidden for staff without "See profit" */
body.no-profit .need-profit{display:none!important}
/* long modals with a form (permissions): the body scrolls, header and buttons stay */
.modal-dialog-scrollable .modal-content>form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;overflow:hidden}
.modal-dialog-scrollable .modal-content>form>.modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch}
span.av{display:grid;place-items:center;background:var(--lime);color:var(--g9);font-weight:800;font-size:12px;flex-shrink:0}
.nl.logout{color:#f8b4b4}.nl.logout:hover{background:#ef444422;color:#fff}
/* phones: the theme shows a title row; pages with their own heading hide it (like the theme's products pages) */
body:not([data-page=index]):not([data-page=pos]):not([data-page=profile]) .m-title{display:none!important}
.notif{width:300px;max-height:420px;overflow-y:auto}
.notif .dropdown-item{white-space:normal;padding:8px}
.thumb{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,#f1f8dc,#e3f2c0);flex-shrink:0;color:var(--g9)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.search{position:relative}.search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mut)}
.search input{padding-left:42px;height:46px;border-radius:12px}
.qs-i{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;color:var(--ink);text-decoration:none;transition:.2s}
.qs-i:hover{background:#f6fbe7}.qs-i .thumb{width:36px;height:36px;font-size:18px}
.req{color:#dc2626}

/* ---------- Avatars ---------- */
.uav{width:38px;height:38px;border-radius:10px;object-fit:cover;flex-shrink:0;display:grid;place-items:center;background:var(--lime);color:var(--g9);font-weight:800;font-size:13px}
.top .uav{width:38px;height:38px;cursor:pointer}
.pav-ph{display:grid;place-items:center;background:var(--lime);color:var(--g9);font-weight:800;font-size:36px}
.pav-wrap{position:relative;display:inline-block}
.pav-btn{position:absolute;right:-4px;bottom:-4px;z-index:3;width:34px;height:34px;border-radius:50%;border:3px solid var(--bg);background:var(--g9);color:var(--lime);display:grid;place-items:center;cursor:pointer;transition:.25s}
.pav-btn:hover{background:var(--lime);color:var(--g9)}

/* ---------- Status badges / buttons ---------- */
.sb{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;display:inline-block;white-space:nowrap}
.sb.success{background:#dcfce7;color:#15803d}.sb.warning{background:#fef3c7;color:#b45309}.sb.danger{background:#fee2e2;color:#b91c1c}.sb.info{background:#e0f2fe;color:#0369a1}.sb.muted{background:#eef0f4;color:#475467}.sb.purple{background:#ede9fe;color:#6d28d9}
.act{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:9px;display:inline-grid;place-items:center;color:var(--ink);text-decoration:none;transition:.25s var(--ease);padding:0}
.act:hover{background:var(--g9);color:var(--lime);transform:translateY(-2px)}.act.del:hover{background:#dc2626;color:#fff}
.stat{display:flex;align-items:center;gap:12px}.stat .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:#eaf7c4;color:var(--g9);flex-shrink:0}
.stat .n{font-size:21px;font-weight:800;line-height:1.1}
.stat .ico.red{background:#fee2e2;color:#b91c1c}.stat .ico.amber{background:#fef3c7;color:#b45309}.stat .ico.dark{background:var(--g9);color:var(--lime)}
.btn-lime:disabled,.btn-line:disabled{opacity:.6;pointer-events:none}
a.btn-lime,a.btn-line{text-decoration:none;display:inline-block;color:inherit}
a.btn-lime{color:var(--g9)}

/* ---------- Page header + cards / forms ---------- */
.ph{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.ph h5{font-weight:700;margin:0}.ph small{color:var(--mut)}
.c-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.c-h .ico{width:38px;height:38px;border-radius:10px;background:#eaf7c4;color:var(--g9);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.c-h b{display:block;font-size:15px}.c-h small{color:var(--mut)}
.form-label{font-size:12.5px;color:var(--mut);font-weight:600;margin-bottom:5px}
.form-check-input:checked{background-color:var(--g9);border-color:var(--g9)}
.form-check-input:focus{box-shadow:0 0 0 .2rem #b4e62e44;border-color:var(--limed)}
.sw-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fbfcfd}
.sw-row b{display:block;font-size:13.5px}.sw-row small{color:var(--mut);font-size:12px}
.sw-row .form-switch{margin:0;padding-left:2.6em;min-height:0}.sw-row .form-switch .form-check-input{width:2.6em;height:1.4em;margin-left:-2.6em;cursor:pointer}
.test-box{border:1px dashed #b9d77a;background:#f7fbe9;border-radius:12px;padding:14px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.filters>div{min-width:140px}
.money-big{font-size:26px;font-weight:800;color:var(--g9)}
.pl-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px}
.pl-row.tot{border-bottom:0;border-top:2px solid var(--g9);font-weight:800;font-size:16px;margin-top:6px}
.pl-row.sub{padding-left:14px;color:var(--mut);font-size:13px}

/* ---------- Settings tabs ---------- */
.set-tabs{margin:0 0 18px}
.set-tabs button i{margin-right:6px}

/* ---------- Staff wizard ---------- */
.passbox{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.passph{width:130px;height:160px;border-radius:14px;border:2px dashed #cfd6e2;background:#fafbfc;display:grid;place-items:center;overflow:hidden;cursor:pointer;transition:.25s var(--ease);flex-shrink:0;text-align:center;color:var(--mut);font-size:12px}
.passph:hover{border-color:var(--limed);background:#f6fbe7}
.passph img{width:100%;height:100%;object-fit:cover}
.passph i{font-size:34px;display:block;color:var(--limed)}
.passph.is-invalid{border-color:#dc3545;background:#fff5f5}
.idchip{display:inline-flex;align-items:center;gap:8px;background:var(--g9);color:var(--lime);font-weight:800;border-radius:10px;padding:10px 14px;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.5px}
.gcard{background:linear-gradient(120deg,#0c2a18,#1f6b3a);color:#fff;border-radius:16px;padding:16px;position:relative;overflow:hidden;min-height:150px}
.gcard::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,#b4e62e55,#0000 45%)}
.gcard .gc-n{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;letter-spacing:1px;color:var(--lime);margin-top:10px;position:relative;z-index:1}
.gcard small{color:#cfe0d4;position:relative;z-index:1}
.gcard .gc-ph{width:58px;height:70px;border-radius:8px;background:#ffffff22;overflow:hidden;position:relative;z-index:1;flex-shrink:0;display:grid;place-items:center}
.gcard .gc-ph img{width:100%;height:100%;object-fit:cover}

/* ---------- Permissions ---------- */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.perm-grid .sw-row{margin:0}
.perm-grid .sw-row .pi{width:34px;height:34px;border-radius:9px;background:#eaf7c4;color:var(--g9);display:grid;place-items:center;flex-shrink:0;margin-right:10px}
.perm-grid .sw-row.on{border-color:var(--limed);background:#f6fbe7}
.perm-user{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:#f4f6f9;margin-bottom:14px}

/* ---------- Receipt (sales page reprint) ---------- */
#rc{font-family:'Courier New',monospace;font-size:12.5px}#rc hr{border-top:1px dashed #999;opacity:1}#rc .r{display:flex;justify-content:space-between;gap:8px}

/* ---------- DataTables in theme colours (same look as the theme's .t tables) ---------- */
table.dataTable{border-collapse:separate!important;border-spacing:0;width:100%!important}
table.dataTable thead th{background:#f4f6f9;font-size:12px;color:#475467;font-weight:600;border-bottom:0!important;white-space:nowrap}
table.dataTable thead th:first-child{border-radius:99px 0 0 99px}table.dataTable thead th:last-child{border-radius:0 99px 99px 0}
table.dataTable tbody td{font-size:12.8px;border-color:var(--line)}
table.dataTable tbody tr{transition:background .2s}table.dataTable tbody tr:hover>*{background:#f6fbe7}
.dt-container .dt-buttons .btn{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:12.5px;border-radius:10px!important;margin-right:6px;padding:6px 12px}
.dt-container .dt-buttons .btn:hover{background:var(--g9);color:var(--lime)}
.dt-container .dt-search input,.dt-container .dt-length select{border-radius:10px;border-color:var(--line)}
.dt-container .pagination .page-link{border-radius:10px!important;margin:0 2px;color:var(--ink);border-color:var(--line);font-weight:600}
.dt-container .pagination .active .page-link{background:var(--g9);border-color:var(--g9);color:var(--lime)}
.dt-container .dt-info{font-size:12.5px;color:var(--mut)}
table.dataTable>tbody>tr>td{vertical-align:middle}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before{border-left-color:var(--g9)}

/* ---------- SweetAlert ---------- */
.swal2-popup{border-radius:18px!important;font-family:'Plus Jakarta Sans',sans-serif}
.swal2-actions{gap:8px}
.btn-danger-s{background:#dc2626;color:#fff;font-weight:700;border:0;border-radius:10px;padding:10px 20px}

/* ---------- Phones ---------- */
@media(max-width:575.98px){
 .login-card{padding:24px 18px}
 .perm-grid{grid-template-columns:1fr}
 .dt-container .dt-buttons{margin-bottom:8px;display:flex;flex-wrap:wrap;gap:6px}
 .dt-container .dt-buttons .btn{margin:0}
 .dt-container .dt-search,.dt-container .dt-search input{width:100%;margin-left:0!important}
 .dt-container .dt-search label{display:none}
 .set-tabs{width:100%}
 .set-tabs button{padding:8px 14px;flex:1}
 .ph .btn-lime,.ph .btn-line{flex:1 1 0;text-align:center;padding:10px 8px;white-space:nowrap}
 .ph>div:first-child{flex:1 1 100%}
 .filters>div{flex:1 1 calc(50% - 4px);min-width:0}
 .filters>button{flex:1 1 100%}
 .passph{width:110px;height:136px}
 .notif{width:calc(100vw - 24px)}
 .top .uav{width:36px;height:36px}
 .stat .n{font-size:16px}
}

/* POS: the floating + button sat on top of the Charge button on desktop. Its actions are already on this screen */
body[data-page=pos] .fab{display:none}
table.dataTable td small{word-break:break-word}
table.dataTable td.text-nowrap,table.dataTable td .sb,table.dataTable td .mono{white-space:nowrap}

/* ---------- Date picker (flatpickr) in theme colours ---------- */
.flatpickr-calendar{border-radius:14px;box-shadow:0 14px 40px #0b2a1a33;font-family:'Plus Jakarta Sans',sans-serif;border:0}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.endRange{background:var(--g9);border-color:var(--g9);color:var(--lime)}
.flatpickr-day.today{border-color:var(--limed)}.flatpickr-day.today:hover{background:var(--lime);color:var(--g9)}
.flatpickr-day:hover{background:#f1f8dc}
.flatpickr-months .flatpickr-month,.flatpickr-current-month .flatpickr-monthDropdown-months{font-weight:700}
input.flatpickr-input[readonly]{background-color:#fff;cursor:pointer}
input.form-control.flatpickr-input.active{border-color:var(--limed);box-shadow:0 0 0 .2rem #b4e62e44}

/* ---------- Edit / Delete permissions: hide buttons the user may not use ---------- */
body.no-edit .need-edit{display:none!important}
body.no-delete .del,body.no-delete .need-delete,body.no-delete #delSel{display:none!important}

/* ---------- Staff record (preview / print) ---------- */
.srec{display:flex;gap:18px;flex-wrap:wrap}
.srec .ph-big{width:130px;height:160px;border-radius:14px;object-fit:cover;border:3px solid #fff;box-shadow:0 8px 20px #0b2a1a22;flex-shrink:0}
.srec .kv{font-size:13.5px}
@media print{.srec .ph-big{box-shadow:none;border:1px solid #ccc}}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;border-bottom:1px dashed var(--line);gap:10px}.kv span:first-child{color:var(--mut)}.kv b{text-align:right;word-break:break-word}
.btn-line.sm{padding:5px 12px;font-size:12.5px}.btn-line.on{background:var(--g9);color:var(--lime);border-color:var(--g9)}
.btn-lime.sm{padding:5px 12px;font-size:12.5px;display:inline-flex;align-items:center;text-decoration:none}
.stat>div:last-child{min-width:0}
/* QR label preview (products page) */
.lblprev .lbl{border:1px dashed #999;border-radius:10px;padding:10px;max-width:220px;margin:auto;font-family:Arial,sans-serif}
.lblprev .co{font-weight:800;font-size:13px;text-transform:uppercase}.lblprev .ph{font-size:11px;color:#555}
.lblprev .nm{font-size:13px;font-weight:600;border-top:1px solid #000;margin-top:4px;padding-top:4px}.lblprev .pr{font-size:18px;font-weight:800}
.lblprev svg{max-width:120px!important}.lblprev .cd{font-family:monospace;font-size:11px}
.sdate .form-control{font-size:13px}

/* ---------- Receive stock (restock) ---------- */
.r-drop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px #0b2a1a26;padding:6px;max-height:340px;overflow-y:auto}
.r-drop button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;border-radius:10px;padding:8px;transition:.2s}
.r-drop button:hover{background:#f6fbe7}.r-drop .thumb{width:34px;height:34px;font-size:18px}
#r_items .empty{min-height:150px}
@keyframes lin{from{opacity:0;transform:translateX(24px)}}
@media(max-width:767.98px){
}
/* invoice view */
.inv-head{background:linear-gradient(120deg,var(--g9),#1f6b3a);color:#fff;border-radius:16px;padding:18px;position:relative;overflow:hidden}
.inv-head::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,#b4e62e55,#0000 45%);pointer-events:none}
.inv-head .no{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;font-weight:800;color:var(--lime)}
.inv-head small{color:#cfe0d4}.inv-head .kv span:first-child{color:#cfe0d4}.inv-head .kv{border-color:#ffffff22}
.inv-search .form-control{height:52px;font-size:18px;font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- Layout tweaks ---------- */
/* no gap above the app on large screens */
@media(min-width:992px){.app{margin:0 auto 24px;border-radius:0 0 20px 20px;min-height:calc(100vh - 24px)}}
/* floating + button on the left (back-to-top stays on the right) */
.fab{right:auto;left:24px;align-items:flex-start}
.fab-i:hover{transform:translateX(4px)}
@media(max-width:991.98px){.fab{right:auto;left:16px}}
@media(min-width:992px){.fab{left:max(274px,calc((100vw - 1440px)/2 + 274px))}} /* just right of the sidebar */

/* ---------- POS cart: item name on its own line, cart moved up ---------- */
.cart{top:0;max-height:calc(100vh - 96px);padding-top:12px} /* sticky offset is inside .content, so 0 lines it up with the search bar */
.cart .inv{margin-bottom:8px;align-items:flex-start}
.cart .sdate input{width:132px;margin-left:auto;padding:5px 8px;font-size:12.5px}
.li.li2{display:block;padding:9px 0}
.li2 .li-top{display:flex;align-items:flex-start;gap:8px}
.li2 .li-top .e{font-size:18px;line-height:1.2}
.li2 .li-top .n{flex:1;min-width:0;font-weight:700;font-size:13px;line-height:1.3;white-space:normal;word-break:break-word}
.li2 .li-bot{display:flex;align-items:center;gap:6px;margin-top:5px;padding-left:26px}
.li2 .li-bot small{color:var(--mut);font-size:11.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li2 .li-bot .qty{flex-shrink:0;gap:4px}
.li2 .li-bot .amt{white-space:nowrap;text-align:right;font-size:13px;flex-shrink:0}
.li2 .li-top .x{opacity:.6;padding:0 2px}
@media(min-width:1200px){.pos{align-items:start}.pos>.cart{margin-top:0}}
#rc .rli{margin-bottom:3px}


/* ---------- Restock: one card per item, full product name on top ---------- */
.rcard2{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:10px;background:#fff;animation:lin .35s var(--ease)}
.rcard2 .rc-top{display:flex;align-items:flex-start;gap:10px}
.rcard2 .rc-top .thumb{width:38px;height:38px;font-size:19px}
.rcard2 .rc-name{flex:1;min-width:0}
.rcard2 .rc-name b{display:block;font-size:14px;line-height:1.3;white-space:normal;word-break:break-word}
.rcard2 .rc-name small{font-size:11.5px}
.rcard2 .rc-nums{display:grid;grid-template-columns:90px 1fr 1fr 1fr;gap:10px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);align-items:start}
.rcard2 label{display:block;font-size:11px;color:var(--mut);font-weight:600;margin-bottom:3px}
.rcard2 .rc-nums small{font-size:11px;display:block;margin-top:2px}
.rcard2 .ri-t{text-align:right}.rcard2 .ri-t b{display:block;font-size:15px;padding-top:5px}
@media(max-width:575.98px){.rcard2 .rc-nums{grid-template-columns:1fr 1fr}.rcard2 .rc-nums .form-control{font-size:16px}}
.sup-toggle{display:flex;align-items:center;width:100%;border:1px dashed #cfd6e2;background:#fafbfc;border-radius:12px;padding:11px 14px;font-weight:600;color:var(--ink);text-align:left;transition:.2s}
.sup-toggle:hover{border-color:var(--limed);background:#f6fbe7}
.sup-toggle .chev{transition:transform .3s var(--ease)}.sup-toggle:not(.collapsed) .chev{transform:rotate(180deg)}
.top .mbrand{overflow:hidden}
@media(max-width:374.98px){.mbrand .pre-name{display:none}}
.mbrand .bars{gap:2px}.mbrand .bars i{width:4px}
/* import products */
.imp-help{background:#f7f9f4;border:1px dashed #cfe3a1;border-radius:12px;padding:10px 12px}
.imp-cols{display:flex;flex-wrap:wrap;gap:5px}.imp-cols span{font-size:12px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:2px 9px}.imp-cols span.on{background:var(--g9);color:var(--lime);border-color:var(--g9);font-weight:700}
.imp-drop{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px dashed #cfd6e0;border-radius:14px;padding:18px 10px;cursor:pointer;text-align:center;transition:.2s;margin:0}
.imp-drop:hover{border-color:var(--limed);background:#fbfdf6}.imp-drop i{font-size:30px;color:var(--limed)}.imp-drop b{word-break:break-all}.imp-drop small{color:var(--mut)}
/* lock screen */
#lockscr{position:fixed;inset:0;z-index:5000;background:radial-gradient(circle at 20% 10%,#1d4a2c,var(--g9) 60%);color:#fff;display:none;place-items:center;overflow:auto;padding:24px 16px}
#lockscr.show{display:grid;animation:lkIn .35s var(--ease)}
@keyframes lkIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
#lockscr .blob.b1{width:340px;height:340px;background:var(--lime);top:-80px;left:-80px;opacity:.18}
#lockscr .blob.b2{width:300px;height:300px;background:#3d7a50;bottom:-60px;right:-60px;opacity:.35}
.lk-in{position:relative;z-index:1;width:100%;max-width:360px;text-align:center}
.lk-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:18px}
.lk-brand .bars{height:30px;gap:3px;margin:0}.lk-brand .bars i{width:5px;animation:barS 1.1s var(--ease) infinite}
.lk-brand .bars i:nth-child(2){animation-delay:.12s}.lk-brand .bars i:nth-child(3){animation-delay:.24s}.lk-brand .bars i:nth-child(4){animation-delay:.36s}.lk-brand .bars i:nth-child(5){animation-delay:.48s}
.lk-brand .pre-name{font-size:17px}
.lk-time{font-size:clamp(46px,14vw,64px);font-weight:800;letter-spacing:-2px;line-height:1}
.lk-date{color:#cfe3c9;margin:6px 0 22px;font-weight:600}
.lk-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);border-radius:22px;padding:22px 18px 16px}
.lk-card .lk-av,.lk-card .av{width:76px;height:76px;border-radius:50%;margin:0 auto;font-size:26px;border:3px solid var(--lime);object-fit:cover}
.lk-card small{color:#cfe3c9}
.lk-card .input-group-text{background:#fff;border-color:#fff}.lk-card .form-control{border-color:#fff}
.lk-eye{cursor:pointer}
.lk-out{display:inline-block;margin-top:12px;color:#cfe3c9;font-size:13px}.lk-out:hover{color:var(--lime)}
.lk-card.shake{animation:lkShake .4s}
@keyframes lkShake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
body.is-locked{overflow:hidden}
.lk-card span.lk-av{display:grid;place-items:center;background:var(--lime);color:var(--g9);font-weight:800}
body.no-sales .need-sales{display:none!important}
@media(max-width:575.98px){.top>.lockapp{display:none}}
.out-list{max-height:320px;overflow-y:auto}
/* database backup */
.db-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.db-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;transition:.2s;margin:0;min-width:0}
.db-row:hover{border-color:#cfe3a1}.db-row.on{background:#f7fbec;border-color:#cfe3a1}
.db-row .form-check-input{margin:0;flex:0 0 auto}
.db-ic{width:34px;height:34px;border-radius:10px;background:#eef3e2;color:var(--g9);display:grid;place-items:center;flex:0 0 auto}
.min-w-0{min-width:0}
/* best sellers */
.best-hero{background:linear-gradient(135deg,var(--g9),#1d4a2c);color:#fff}
.best-hero small{color:#cfe3c9}.best-hero .text-uppercase{color:var(--lime)}
.best-emo{width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:30px;flex:0 0 auto}
.best-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin-top:18px}
.best-nums div{background:rgba(255,255,255,.08);border-radius:12px;padding:10px}
.best-nums b{display:block;font-size:20px;color:var(--lime)}
.stat .n .best-n{font-size:15px;line-height:1.2;display:block;word-break:break-word}
/* room under the last button so the floating + never covers it */
body:not([data-page=pos]) .content{padding-bottom:96px}
@media(max-width:575.98px){#db_go{width:100%;justify-content:center}}
.rcard2 .rc-nums.o3{grid-template-columns:110px 1fr 1fr}@media(max-width:575.98px){.rcard2 .rc-nums.o3{grid-template-columns:1fr 1fr 1fr}}body.no-profit .rcard2 .rc-nums.o3{grid-template-columns:110px}

/* POS cart: quantity can be typed (0.1 and up) */
.qty .qin{width:58px;height:28px;padding:0 4px;border:1px solid var(--line);border-radius:8px;text-align:center;font-weight:700;font-size:13px;background:#fff;-moz-appearance:textfield}
.qty .qin::-webkit-outer-spin-button,.qty .qin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty .qin:focus{outline:none;border-color:var(--limed);box-shadow:0 0 0 3px rgba(190,230,60,.25)}
@media(max-width:575.98px){.qty .qin{width:52px;height:30px;font-size:14px}}

/* product photos (website) */
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.act .phn{font-size:9px;font-weight:800;margin-left:1px}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.ph-item{position:relative;border-radius:14px;overflow:hidden;border:2px solid var(--line);aspect-ratio:1;background:#f4f5f2}
.ph-item.main{border-color:var(--lime)}
.ph-item img{width:100%;height:100%;object-fit:cover;display:block}
.ph-item .ph-tag{position:absolute;top:6px;left:6px}
.ph-item .ph-act{position:absolute;right:6px;bottom:6px;display:flex;gap:4px}
.ph-item .ph-act .act{background:#fff;width:32px;height:32px}
.imp-drop.over{border-color:var(--limed);background:#f6fbe7}

/* website chats */
.chat-wrap{display:grid;grid-template-columns:340px 1fr;gap:16px;height:calc(100vh - 200px);min-height:480px}
.chat-side{display:flex;flex-direction:column;min-height:0;padding:14px}
.chat-list{overflow-y:auto;flex:1;margin:0 -6px}
.chat-row{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;cursor:pointer;transition:.2s}
.chat-row:hover{background:#f6fbe7}.chat-row.on{background:#eaf7c4}
.chat-row.unread b{color:var(--g9)}.chat-row.unread small.text-muted{color:var(--txt,#111)!important;font-weight:600}
.chat-main{display:flex;flex-direction:column;min-height:0;padding:0;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;background:#f7f8f5;display:flex;flex-direction:column;gap:8px}
.bub{max-width:78%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;word-wrap:break-word}
.bub small{display:block;font-size:10.5px;opacity:.65;margin-top:3px}
.bub.them{background:#fff;align-self:flex-start;border:1px solid var(--line);border-bottom-left-radius:4px}
.bub.me{background:var(--g9);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-send{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);align-items:flex-end}
.chat-send textarea{resize:none;border-radius:14px}
.chat-send .btn-lime{padding:10px 16px}
@media(max-width:991.98px){
 .chat-wrap{grid-template-columns:1fr;height:calc(100vh - 170px)}
 .chat-wrap .chat-main{display:none}.chat-wrap.show-main .chat-main{display:flex}.chat-wrap.show-main .chat-side{display:none}
}

/* POS: product tiles with photos (modern till) */
.pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pc{padding:0;overflow:hidden;display:flex;flex-direction:column;border-radius:14px}
.pc .pim{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#f3f6ee,#e6edd8);overflow:hidden}
.pc .pim img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pc:hover .pim img{transform:scale(1.07)}
.pc .pini{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:26px;color:var(--g9);letter-spacing:1px;opacity:.55}
.pc .stk{top:8px;right:8px;left:auto;font-size:10px;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.pc .pinfo{padding:9px 10px 10px;display:flex;flex-direction:column;gap:3px;flex:1}
.pc .pinfo b{font-size:12.5px;min-height:31px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc .pr{font-size:14px}
.pc .padd{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;background:var(--lime);color:var(--g9);display:grid;place-items:center;font-size:15px;transition:transform .3s var(--ease)}
.pc:hover .padd{transform:scale(1.15) rotate(90deg)}
.pc.out .padd{display:none}
.li2 .li-top .e{flex-shrink:0;width:38px;height:38px;border-radius:9px;overflow:hidden;background:#eef2e6;display:grid;place-items:center}
.li2 .li-top .e img{width:100%;height:100%;object-fit:cover}
.li2 .li-top .e .pini{font-style:normal;font-weight:800;font-size:12px;color:var(--g9)}
/* Add Product: tile preview without icon */
.pvph{height:96px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#f3f6ee,#e6edd8);display:grid;place-items:center;margin-bottom:8px}
.pvph img{width:100%;height:100%;object-fit:cover}
.pvph span{color:var(--mut);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.pvph i{font-size:24px}
@media(max-width:575.98px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pc .pinfo b{font-size:12px}}

/* POS: bigger photos, tiles show only name, quantity left and price; taller cart */
.pgrid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.pc .pim{aspect-ratio:1/1}
.pc .pinfo{gap:2px;padding:10px 11px 12px}
.pc .pinfo b{font-size:13px;min-height:33px}
.pc .left{font-size:11.5px;font-weight:600;color:#15803d}
.pc .left.low{color:#b91c1c}
.pc .pr{font-size:15px;margin-top:2px}
.pos{grid-template-columns:minmax(0,1fr) 360px}
.cart{height:calc(100vh - 96px);max-height:none}
.items{min-height:280px}
@media(max-width:1199px){.pos{grid-template-columns:minmax(0,1fr)}.cart{height:auto}.items{min-height:320px}}
@media(max-width:575.98px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.items{min-height:300px}}

/* POS: text-only product tiles (name, price, quantity left) */
.pgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.pc.tt{padding:14px 14px 12px;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;border-radius:14px;border:1px solid var(--line);background:#fff;position:relative;overflow:hidden}
.pc.tt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--lime);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.pc.tt:hover::before{transform:scaleY(1)}
.pc.tt:hover{border-color:var(--lime);box-shadow:0 12px 26px #0b2a1a1f}
.pc.tt .tn{font-size:14px;font-weight:700;line-height:1.3;color:var(--g9,#0b2a1a);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:0}
.pc.tt .tf{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pc.tt .tp{font-size:16px;font-weight:800;color:var(--g9,#0b2a1a);white-space:nowrap}
.pc.tt .tq{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;background:#dcfce7;color:#15803d;white-space:nowrap}
.pc.tt .tq.low{background:#fee2e2;color:#b91c1c}
.pc.tt .tq.out{background:#e5e7eb;color:#4b5563}
.pc.tt.pop{animation:pop .35s var(--ease)}
.li2 .li-top .e{display:none}
@media(max-width:575.98px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pc.tt{min-height:108px;padding:12px}.pc.tt .tn{font-size:13px}.pc.tt .tp{font-size:15px}}
.pc.tt .tn{-webkit-line-clamp:2;min-height:2.6em}
.pc.tt .tf{flex-direction:column;align-items:flex-start;gap:6px}

/* ---------- v12: website orders on the bell (count + ring when a new order comes in) ---------- */
.ib .nbadge{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#ef4444;color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;border:2px solid #fff;line-height:1}
.ib.ring i{animation:bellring .9s ease-in-out 3;transform-origin:50% 0}
@keyframes bellring{0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}
tr.ord-unseen td{background:#fffbea}
@media (prefers-reduced-motion:reduce){.ib.ring i{animation:none}}