:root{--bg:#090f13;--panel:#111b22;--panel2:#16242c;--line:#5e462e;--lineHi:#ad8151;--gold:#d7ad73;--pale:#fff1d3;--text:#f2e7d9;--muted:#a99b8a;--green:#155f43;--danger:#68392e;--shadow:0 10px 28px #0007}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(circle at 50% 0,#1d2b28 0%,#0a1218 38%,#070b0e 100%);font-family:"Segoe UI",Arial,sans-serif;color:var(--text);direction:rtl}button,input,select{font:inherit}button{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.hidden{display:none!important}.app-shell{height:100dvh;display:flex;flex-direction:column;min-height:520px}.hero{height:clamp(90px,10.16vw,170px);min-height:60px;flex-shrink:0;margin:9px 12px 0;overflow:hidden;border:1px solid #634c31;border-radius:13px;background:#090c0e;box-shadow:var(--shadow)}.hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:7px 17px 6px;min-height:42px}.identity{display:flex;align-items:center;gap:10px}.identity strong{letter-spacing:.04em}.identity span{color:var(--gold)}.identity small{color:var(--muted)}.toolbar-meta{display:flex;align-items:center;gap:8px}.chip{background:#142027;border:1px solid #503d28;border-radius:12px;padding:5px 12px;font-size:12px;color:#d9c7ad}.tabs{display:flex;gap:6px;background:#080d11;border-block:1px solid #271c13;padding:7px 12px}.tab{background:#1a272e;color:#ddcdbb;border:1px solid #493a29;border-radius:9px;padding:7px 18px;cursor:pointer}.tab.active{background:linear-gradient(#674522,#322318);color:#fff1d3;border-color:var(--gold)}main{flex:1;min-height:0;padding:10px 12px 13px;overflow:auto}.page{display:none;height:100%;min-height:0}.page.active{display:flex;flex-direction:column}.panel{background:linear-gradient(160deg,#17242c,#0f181e);border:1px solid #4b3725;border-top-color:#a57d4c;border-radius:14px;padding:12px;box-shadow:var(--shadow);min-height:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;border-bottom:1px solid #59422c;padding-bottom:9px}.panel-head h2{margin:2px 0 0;color:#ffe4b7;font-size:19px}.eyebrow,.small-note{font-size:12px;color:var(--muted)}.customer-strip{display:flex;align-items:center;gap:16px;margin-bottom:10px;min-height:79px;flex-shrink:0}.strip-label{display:flex;flex-direction:column;gap:6px;min-width:170px}.strip-label strong{font-size:18px;color:var(--pale)}.customer-control{display:flex;gap:7px;align-items:center;flex:1;min-width:0}.strip-counter{display:flex;align-items:center;gap:6px;white-space:nowrap;color:#c3ae91}.strip-counter strong{background:#2b352f;padding:5px 12px;border:1px solid #765736;border-radius:10px;color:#ffe8b8}.field{min-width:0;width:100%;background:#0b1317;border:1px solid #63472b;border-radius:9px;padding:10px 11px;color:var(--text)}.field:focus{border-color:var(--gold)}.button{border:1px solid #6a4e32;border-radius:10px;padding:9px 12px;background:#25323a;color:var(--text);font-weight:650;cursor:pointer;white-space:nowrap;transition:background .16s,border-color .16s}.button:hover{border-color:#ddac68;filter:brightness(1.08)}.button:active{filter:brightness(.88)}.button.secondary{background:#27333b}.button.primary{background:#704a2a;color:#fff0d8}.button.ghost{background:#162127}.button.warning{background:#5b3530}.button.install{background:#23523d}.button.charge{background:linear-gradient(#237451,#145439);border-color:#d1a76e;color:#fff7e7;font-size:19px;min-height:51px;animation:chargeBorder 6s ease-in-out infinite}.button:disabled{opacity:.54;cursor:wait}@keyframes chargeBorder{0%,100%{border-color:#af8250}50%{border-color:#efc785;box-shadow:0 0 13px #d2a77343}}.work-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(305px,2fr);gap:10px;flex:1;min-height:0}.product-panel,.bill-panel{display:flex;flex-direction:column}.product-panel{position:relative}.category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:112px;overflow:auto;flex-shrink:0}.category-grid .button{background:linear-gradient(#483422,#2c231b);padding:10px 4px;white-space:normal;min-height:42px}.category-grid .button.active{border-color:#e9b66f;background:#785132}/* V1.0.15: non-interactive hairline divider; preserve the original 34px slot. */
.spark-strip{margin:9px 0 7px;height:34px;flex-shrink:0;display:flex;align-items:center;gap:13px;padding:0 14px;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:none}
.spark-strip::before,.spark-strip::after{content:"";height:1px;flex:1 1 0;min-width:0;background:linear-gradient(90deg,transparent,#91724d 35%,#91724d 65%,transparent)}
.spark-diamond{display:block;flex:0 0 8px;width:8px;height:8px;transform:rotate(45deg);border:1px solid #ac8657;background:#26302b;box-shadow:0 0 0 2px #101a1e}.product-controls{display:flex;gap:8px;align-items:end}.qty-wrap{width:86px;color:#d9b58d;font-size:12px}.qty-wrap .field{margin-top:2px;text-align:center}.products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-content:start;overflow:auto;flex:1;padding:8px 1px 2px}.products-grid .button{min-height:53px;white-space:normal;background:linear-gradient(#33281e,#201d19);border:1px solid #92683c;font-size:13px;padding:7px 5px;line-height:1.2}.product-price{display:block;color:#ecc48e;font-size:12px;margin-top:4px}.product-footer{padding-right:156px;display:flex;align-items:center;gap:12px;justify-content:flex-start;color:#ad9d86;font-size:12px;height:55px;flex-shrink:0}.beer{height:156px;width:156px;object-fit:contain;opacity:.86;position:absolute;right:12px;bottom:12px;pointer-events:none}.bill-table-wrap{flex:1;overflow:auto;min-height:80px;background:#0a1013;border:1px solid #483623;border-radius:9px}.bill-table,.data-table{border-collapse:collapse;width:100%}th{background:#2b2119;color:#ffe0b0;font-size:13px;position:sticky;top:0}th,td{padding:9px 7px;border-bottom:1px solid #ffffff12;text-align:right}td{font-size:13px}.bill-table tbody tr{cursor:pointer}.bill-table tbody tr.selected{background:#5b4227}.bill-table tbody tr:hover{background:#403020}.bill-table td:nth-child(2),.bill-table td:nth-child(3),.bill-table th:nth-child(2),.bill-table th:nth-child(3){text-align:center}.empty{text-align:center;color:var(--muted);padding:30px}.total-block{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;margin:9px 0;border-radius:12px;border:1px solid #a67c46;background:linear-gradient(135deg,#18231f,#0b1314);color:#dcb88d}.total-block strong{font-size:31px;color:#fff2d3}.total-block.flash strong{animation:totalPulse .55s}@keyframes totalPulse{50%{color:#f6d08b}}.bill-tag{font-size:11px;border:1px solid #80613c;border-radius:20px;padding:4px 9px;color:#dfc6a0}.bill-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}.bill-actions .button{min-height:41px}.status{font-size:12px;padding:8px 10px;color:#d3ad7a;min-height:32px}.status.success{color:#86d8a5}.status.error{color:#f8a39a}.field.warning{border-color:#e6a35e;box-shadow:0 0 0 2px #edb86a33}.manage-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;min-height:0;flex:1}.manage-grid>.panel{display:flex;flex-direction:column}.inline-form{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap}.inline-form .field{flex:1 1 115px}.scroll-table{overflow:auto;flex:1;border:1px solid #493523;border-radius:9px;min-height:90px}.data-table tbody tr:nth-child(even){background:#ffffff08}.data-table td:last-child{white-space:nowrap}.tiny-btn{background:#25323a;border:1px solid #85623f;border-radius:6px;color:var(--text);padding:5px 7px;cursor:pointer;margin:2px}.tiny-btn.danger{background:#59302a}.report-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}.report-controls label{color:#d2b48b;font-size:12px;flex:1 1 145px}.report-controls label .field{margin-top:3px}.report-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0}.summary-card{background:#0c161a;border:1px solid #685037;padding:12px;border-radius:11px}.summary-card small{display:block;color:#bba98f}.summary-card strong{font-size:21px;color:#ffdfaf}.report-table{max-height:calc(100dvh - 405px)}.reports-panel{flex:1;display:flex;flex-direction:column}.system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.system-grid>.panel{align-self:start;min-height:250px}.file-input{display:block;background:#18242b;border:1px dashed #947249;border-radius:9px;padding:12px;margin-top:11px;color:var(--pale)}.file-input input{display:block;width:100%;margin-top:10px}.stack-buttons{display:grid;gap:10px}.import-preview{border:1px solid #a78551;background:#0a1519;margin-top:10px;padding:12px;border-radius:9px}.import-preview p{line-height:1.6;margin:5px 0}.import-preview .button{margin-top:10px}.system-grid p{line-height:1.65;color:#cdbb9f}.system-grid .small-note{color:#a99b8a}
@media(max-width:1100px){.work-grid{grid-template-columns:minmax(0,1.2fr) minmax(270px,1fr)}.customer-strip{gap:9px}.strip-counter{display:none}.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.manage-grid{grid-template-columns:1fr}.page{height:auto}.system-grid{grid-template-columns:1fr 1fr}.app-shell{height:auto;min-height:100dvh}main{overflow:visible}.work-grid{min-height:610px}.report-table{max-height:520px}.manage-grid>.panel{height:350px}}
@media(max-width:730px){.toolbar{flex-wrap:wrap;gap:6px}.identity small,#storageLabel{display:none}.customer-strip{flex-direction:column;align-items:stretch}.customer-control{flex-wrap:wrap}.customer-control .field{flex:1 1 100%}.work-grid{display:flex;flex-direction:column}.product-panel{height:485px;flex:none}.bill-panel{min-height:440px;flex:none}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.system-grid{grid-template-columns:1fr}.report-controls{display:grid;grid-template-columns:1fr 1fr}.report-summary{grid-template-columns:1fr 1fr}.app-shell{min-height:100dvh}}

.customer-launch{display:flex;align-items:center;justify-content:space-between;text-align:right;cursor:pointer;min-width:160px;flex:1;color:var(--text)}
.customer-launch span{color:var(--gold);font-size:20px}
.customer-dialog{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px}
.customer-dialog-backdrop{position:absolute;inset:0;background:#02080bd9;backdrop-filter:blur(5px)}
.customer-dialog-panel{position:relative;display:flex;flex-direction:column;width:min(520px,100%);max-height:min(650px,88dvh);background:linear-gradient(150deg,#1b2a30,#0d171d);border:1px solid #ad804c;border-radius:17px;box-shadow:0 24px 85px #000b,0 0 0 1px #ffffff10;overflow:hidden}
.customer-dialog-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 12px;border-bottom:1px solid #6b5034}
.customer-dialog-heading h2{font-size:23px;color:#ffe3b5;margin:5px 0}
.customer-dialog-close{font-size:29px;line-height:1;min-width:42px;min-height:42px;border:1px solid #755438;border-radius:11px;color:#f3d5ac;background:#253038;cursor:pointer}
.customer-dialog-search{position:relative;margin:18px 20px 10px}
.customer-dialog-search>span{position:absolute;right:13px;top:3px;color:#cfad78;font-size:29px;pointer-events:none}
.customer-dialog-search input{padding-right:43px;font-size:16px;min-height:49px}
.customer-dialog-meta{padding:0 22px 9px;font-size:12px;color:#b4a18a}
.customer-dialog-results{overflow-y:auto;overscroll-behavior:contain;min-height:80px;max-height:395px;padding:0 14px 12px;scrollbar-color:#8e6539 #172127;scrollbar-width:thin}
.customer-result{display:flex;justify-content:space-between;align-items:center;text-align:right;width:100%;padding:13px 16px;min-height:53px;border:1px solid transparent;border-bottom-color:#6f57402e;background:transparent;color:#eee0cd;border-radius:8px;cursor:pointer;font-size:16px}
.customer-result:hover,.customer-result:focus-visible{background:#59412880;border-color:#b48a53}
.customer-result[aria-selected="true"]{background:#4c39254d;color:#ffe0ac}
.customer-result>span:last-child{font-size:23px;color:#cda66e}
.customer-results-empty{padding:35px 12px;text-align:center;color:#b7aa98}
.customer-dialog-bottom{border-top:1px solid #6b5034;padding:12px 20px;text-align:center;color:#b8a38a;font-size:12px}
@media(max-width:730px){.customer-dialog-panel{max-height:90dvh}.customer-dialog-results{max-height:55dvh}.customer-launch{min-height:45px}}
\n@media print{.hero,.toolbar,.tabs,.customer-strip,.work-grid,.report-controls,.system-grid,.manage-grid,.panel-head,.report-summary{display:none!important}main{overflow:visible}.page{display:none!important}#reportsPage{display:block!important}.reports-panel{border:0;box-shadow:none;overflow:visible}.report-table{max-height:none;overflow:visible}.data-table th{color:#000;background:#eee}.data-table td{color:#000}body{background:#fff;color:#000}}

/* V0.5: inline customer dropdown (no overlay dialog) */
.customer-select-wrap{position:relative;flex:1;min-width:0}
.customer-select-wrap .customer-launch{width:100%;min-height:43px}
.customer-dropdown{position:absolute;top:calc(100% + 5px);right:0;left:0;z-index:110;background:linear-gradient(160deg,#1b2a30,#0d171d);border:1px solid #ad804c;border-radius:12px;box-shadow:0 18px 38px #000b;overflow:hidden}
.customer-dropdown-search{padding:12px 12px 7px}
.customer-dropdown-search input{height:44px}
.customer-dropdown .customer-dialog-meta{padding:0 14px 5px}
.customer-dropdown .customer-dialog-results{max-height:min(340px,48dvh);min-height:0;padding:0 8px 8px;overflow-y:auto;overscroll-behavior:contain}
.customer-dropdown .customer-result{min-height:47px;padding:10px 12px}
.customer-strip{position:relative;z-index:3}
/* V0.9.9: animated beer artwork now fills the drink-selection panel behind all controls. */
.product-panel{position:relative;isolation:isolate;overflow:hidden}
.product-visual-region{position:relative;isolation:isolate;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.product-visual-region .product-beer-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;opacity:.22;pointer-events:none;z-index:0}
.product-visual-region>.products-grid{position:relative;z-index:1;flex:1;min-height:0}
.product-panel>.panel-head,.product-panel>.category-grid,.product-panel>.spark-strip{position:relative;z-index:1}
.bill-table-wrap{position:relative}
.bill-table{position:relative;background:transparent}
.bill-table th{background:#2b2119}
.bill-table tbody tr{background:transparent}
.product-footer{padding-right:0}
@media(max-width:730px){.customer-select-wrap{flex:1 1 100%}.customer-dropdown .customer-dialog-results{max-height:40dvh}}


/* V0.6 — nonintrusive PWA updater */
.identity{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.identity>small{white-space:nowrap}
.update-badge{background:#523f23;color:#f2c575;border:1px solid #a87f43;border-radius:9px;padding:6px 11px;font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap}
.update-badge:hover,.update-badge:focus-visible{background:#69502a}
.updater-system{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.updater-system strong{color:var(--gold)}
.update-modal{position:fixed;inset:0;z-index:1800;display:grid;place-items:center;padding:18px}
.update-modal-shade{position:absolute;inset:0;background:#01090cdd;backdrop-filter:blur(4px)}
.update-modal-card{position:relative;width:min(450px,100%);max-height:88dvh;overflow-y:auto;border:1px solid #986d3d;border-radius:16px;background:#10191f;box-shadow:0 25px 70px #000b;padding:22px}
.update-modal-title{display:flex;align-items:center;gap:14px;border-bottom:1px solid #55432e;padding-bottom:16px}
.update-modal-title h2{margin:0 0 4px;font-size:22px;color:#f3d9b0}
.update-modal-title span:not(.update-modal-icon){color:#aeb6b9;font-size:13px}
.update-modal-icon{display:grid;place-items:center;width:54px;height:54px;background:#3b3023;color:#e8ba73;border-radius:12px;font-size:31px}
.update-modal-card h3{font-size:15px;margin:20px 0 9px}
.update-modal-card ul{padding-right:22px;margin:0 0 17px;line-height:1.8;color:#d4d8d8}
.update-modal-safety{background:#18282b;color:#c4d7ce;border-radius:9px;font-size:13px;padding:13px;line-height:1.6}
.update-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.update-modal-actions .button{min-height:44px}
@media(max-width:600px){.update-modal-card{padding:15px}.update-modal-title h2{font-size:20px}}


@font-face{font-family:"Rubik Manara";src:url("./assets/rubik-variable.ttf") format("truetype");font-style:normal;font-weight:300 900;font-display:swap}
.category-grid .button,.products-grid .button{font-family:"Rubik Manara","Segoe UI",Arial,sans-serif;font-weight:700}
.status:empty{display:none}
/* V0.9 auth/migration gate */
.cloud-overlay{position:fixed;inset:0;z-index:2100;background:rgba(3,9,13,.95);display:grid;place-items:center;padding:17px;overflow:auto}
.cloud-card{direction:rtl;background:linear-gradient(160deg,#1c2a32,#10181e);border:1px solid #af834e;border-radius:17px;box-shadow:0 25px 80px #000d;padding:28px;width:min(520px,100%);max-height:93dvh;overflow:auto}
.cloud-card h2{font-size:24px;color:#f1d5a8;margin:0 0 12px}.cloud-card p{line-height:1.65;color:#d6c7af}
.cloud-form{display:grid;gap:13px;margin:20px 0}.cloud-form label{display:grid;gap:6px;font-size:14px;color:#dbc29d}
.cloud-form input{height:47px}.cloud-card .button{min-height:46px;margin:8px 0;width:100%}.cloud-counts{padding:12px;background:#28323a;border-radius:8px}
.sync-msg{font-size:12px;color:#bda078}.sync-msg.success{color:#8bcfa3}.sync-msg.error{color:#f59b90}
#cloudUserBar{font-size:12px;color:#d3bd9c}#cloudUserBar .button{min-height:29px;padding:5px 8px}
.cloud-overlay.hidden{display:none}
/* V0.9.19: product and customer actions use individual permissions in JS. */

/* Owner-only mode switch: a prominent indication, no layout rearrangement */
#trialToggleBtn{margin-inline:7px;padding:5px 12px;min-height:29px;border:1px solid #e3ac58;background:#322919;color:#ffe3ac;font-size:12px;font-weight:700}
.mode-banner{padding:7px 12px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.1px}
.mode-banner.development-banner{background:#5a3714;color:#ffe6a9;border-bottom:2px solid #f0ab4e}
.mode-banner.live-banner{background:#173c2e;color:#c3f8dc;border-bottom:1px solid #448d70}
.mode-banner.hidden,#trialToggleBtn.hidden,#cloudBackToTest.hidden{display:none!important}
/* V0.9.4: same pub workspace, unobtrusive owner-only trial toggle. */
#trialToggleBtn[aria-pressed="true"]{border-color:#f0ab4e;background:#6b3819;color:#fff2d3;box-shadow:0 0 0 1px #f0ab4e44}
.manage-head{flex-wrap:wrap;gap:8px}
.inactive-toggle{font-size:12px;min-height:30px;padding:4px 11px;white-space:nowrap}
.inactive-toggle[aria-pressed="true"]{border-color:#bd9662;color:#ffe3b8}
#auditPanel{margin-top:12px}
.audit-table{max-height:390px;overflow:auto}
#auditPanel .data-table{min-width:570px}
#auditPanel .data-table td{line-height:1.45;white-space:normal}
#archiveImportPanel{grid-column:1/-1}
#archiveImportPanel button{width:auto;max-width:100%}
@media(max-width:650px){#trialToggleBtn{padding:5px 8px;font-size:11px}.manage-head .small-note{width:100%}}

/* V0.9.6 — staff PIN login and owner-only system management.
   Reuse the existing pub palette and panels. */
#adminLogin{z-index:2200}
#ownerSetupToggle{font-size:13px}
#ownerSetupForm{margin-top:14px;padding-top:13px;border-top:1px solid #5e462e}
.admin-box{margin-top:12px}
.admin-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.admin-panel-header strong{color:var(--gold)}
#adminPanel h3{color:var(--pale);font-size:15px;margin:16px 0 10px}
#employeeCreateForm label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px}
#employeeCreateForm .field{min-width:145px}
#employeeCreateForm button{align-self:end}
#employeeRows button{margin:2px}
#employeeMessage{padding-top:7px}
body.staff-mode #adminPanel{display:none!important}
@media(max-width:650px){
 #adminPanel .inline-form{display:flex;flex-wrap:wrap}
 #adminPanel .inline-form label{width:100%}
 .admin-panel-header{flex-wrap:wrap}
}

/* V0.9.10: a fixed three-item bill viewport; additional items scroll inside. */
.bill-table-wrap{flex:none;height:154px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.bill-table{table-layout:fixed}
.bill-table th{height:40px;padding:7px}
.bill-table tbody tr{height:38px;max-height:38px}
.bill-table td{height:38px;padding:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bill-table td.empty{white-space:normal}

/* V0.9.11: four fixed rows with independent vertical scrolling. */
.category-grid{height:202px;max-height:none;min-height:202px;grid-auto-rows:46px;align-content:start;overflow-y:auto;overflow-x:hidden;flex:none;overscroll-behavior:contain}
.product-visual-region{flex:none;height:266px;min-height:266px;max-height:266px}
.product-visual-region>.products-grid{height:100%;min-height:0;flex:1;grid-auto-rows:58px;align-content:start;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.product-panel{min-height:565px}
.work-grid{min-height:565px}
@media(max-width:730px){.product-panel{height:auto;min-height:565px}.work-grid{min-height:0}}
/* V0.9.11: accessible, larger catalog management dialog. */
.catalog-launchers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;flex:none;margin-bottom:14px}
.catalog-launch-button{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:145px;gap:10px;cursor:pointer;color:var(--text);text-align:center}
.catalog-launch-button:hover{border-color:var(--gold);filter:brightness(1.1)}
.catalog-launch-button strong{font-size:22px;color:var(--pale)}
.catalog-launch-button span:last-child{font-size:13px;color:var(--muted)}
.catalog-launch-icon{font-size:33px}
.catalog-manager-overlay{position:fixed;inset:0;background:#020609d9;display:flex;justify-content:center;align-items:center;padding:clamp(10px,3vw,35px);z-index:1200}
.catalog-manager-panel{width:min(1180px,100%);height:min(850px,94dvh);display:flex;flex-direction:column;min-height:0;padding:clamp(13px,2vw,25px);gap:10px}
.catalog-manager-header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px}
.catalog-manager-header h2{font-size:23px;color:var(--pale);margin:0}
.catalog-manager-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.catalog-search-label{display:flex;align-items:center;gap:9px;flex:1 1 220px}
.catalog-search-label .field{flex:1}
.catalog-select-label{display:flex;align-items:center;gap:7px;white-space:nowrap}
.catalog-select-label input,.catalog-select-row{accent-color:#cf9e65;width:19px;height:19px;cursor:pointer}
.catalog-manager-content{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.catalog-manager-content.hidden{display:none}
.catalog-manager-subhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.catalog-manager-content .inline-form{flex:none;margin-bottom:0}
.catalog-manager-table{flex:1;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:9px}
.catalog-manager-table .data-table{min-width:560px}
.catalog-manager-table th:first-child,.catalog-manager-table td:first-child{width:56px;text-align:center}
.catalog-manager-table .data-table td{font-size:15px;padding:12px 9px}
.catalog-manager-table .data-table th{font-size:14px;padding:12px 9px}
#catalogManagerMessage{min-height:18px}
@media(max-width:650px){.catalog-launchers{grid-template-columns:1fr}.catalog-launch-button{min-height:95px}.catalog-manager-panel{height:96dvh}.catalog-manager-overlay{padding:5px}.catalog-manager-controls{gap:8px}.catalog-manager-header h2{font-size:19px}}

/* V0.9.12: use one reliable viewport scroll owner on tablet/mobile.
   Keep category, drink and bill lists independently scrollable. */
@media (max-width:1100px){
  html,body{height:100%;min-height:0;overflow:hidden}
  .app-shell{height:100dvh;min-height:0;overflow:hidden}
  main{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  .page{height:auto;min-height:0}
  .page.active{height:auto;min-height:100%;flex:none}
}
@media (max-width:730px){
  .work-grid{flex:none;height:auto;min-height:0;overflow:visible}
  .product-panel{height:auto;min-height:565px;flex:none}
  .bill-panel{height:auto;min-height:440px;flex:none}
  #posPage{padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
}

/* V0.9.13: make the document the sole outer scroll container on touch screens.
   Avoid a locked body plus nested <main> scrollport, which traps gestures in Android/PWA. */
@media (max-width:1100px){
  html{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  body{height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:visible}
  .app-shell{height:auto;min-height:100dvh;overflow:visible}
  main{flex:1;min-height:0;overflow:visible;touch-action:auto;-webkit-overflow-scrolling:auto}
  .page.active{height:auto;min-height:0;flex:none}
  .work-grid{height:auto}
  /* Let the browser chain a swipe to page scrolling at the end of each list. */
  .category-grid,
  .product-visual-region>.products-grid,
  .bill-table-wrap{overscroll-behavior-y:auto;touch-action:pan-y}
}

/* V0.9.14: charge action comes first; success feedback stays on its button only. */
.bill-panel>.button.charge{position:relative;align-self:stretch;width:100%;margin:0 0 9px;overflow:hidden;isolation:isolate}
.button.charge.charge-success{animation:chargeSuccessGlow 950ms ease-out both}
.button.charge.charge-success::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:32px;font-weight:800;color:#ffffff;opacity:0;pointer-events:none;animation:chargeSuccessCheck 950ms ease-out both}
@keyframes chargeSuccessGlow{0%{background:linear-gradient(#237451,#145439);box-shadow:0 0 0 0 #61eaaa00}22%{background:#2aa96a;box-shadow:0 0 0 3px #6ce6ad66,0 0 21px #41dc8866}65%{background:#22865b;box-shadow:0 0 14px #41dc8833}100%{background:linear-gradient(#237451,#145439);box-shadow:none}}
@keyframes chargeSuccessCheck{0%,12%{opacity:0;transform:scale(.76)}28%,56%{opacity:1;transform:scale(1.06)}85%,100%{opacity:0;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.button.charge.charge-success{animation:none;background:#22865b}.button.charge.charge-success::after{animation:none;opacity:0}}

/* V0.9.15: subtle native press feedback on every enabled button.
   CSS :active requires no JS touch listeners and keeps Android scroll gestures native. */
button{transform-origin:center center;transition:transform 120ms ease-out,filter 120ms ease-out}
.button{transition:background .16s,border-color .16s,transform 120ms ease-out,filter 120ms ease-out}
button:not(:disabled):not(.charge-success):active{transform:scale(.97);filter:brightness(1.10)}
button:disabled{transform:none}
@media(prefers-reduced-motion:reduce){
 button,.button{transition:none}
 button:not(:disabled):not(.charge-success):active{transform:none;filter:brightness(1.06)}
}

/* V0.9.17 modal selectors */
.customer-choice-bar{display:flex;align-items:center;gap:12px;min-height:72px}
.customer-choice-bar .customer-select-wrap{flex:1;min-width:0}
.customer-main-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:53px;padding:10px 18px;background:linear-gradient(#513921,#302318);border-color:#b58b54;color:#ffe6c0;font-size:20px}
.customer-main-button span:first-child{overflow-wrap:anywhere}
.customer-main-button.customer-selected{background:linear-gradient(#20714f,#145338);border-color:#6bbe8f;color:#fff8e8}
#customerDropdown{z-index:2000}
#customerDropdown .customer-dialog-panel{width:min(640px,100%);max-height:90dvh}
#customerDropdown .customer-dialog-results{flex:1;max-height:none;min-height:90px;overscroll-behavior:contain}
#customerDropdown .customer-result{border:1px solid #76583b;border-radius:10px;margin-bottom:7px;background:linear-gradient(#29333a,#1a252b);font-weight:650}
#customerDropdown .customer-result[aria-pressed="true"]{background:#195d43;border-color:#72bf91}
.customer-picker-actions{display:flex;gap:9px;padding:12px 16px;border-top:1px solid #654c31}
.customer-picker-actions .button{flex:1}
.employee-choice-label{display:flex;flex-direction:column;gap:7px}
.employee-picker-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:50px;font-size:19px;color:var(--pale);background:linear-gradient(#473421,#291e18)}
.employee-picker-trigger.employee-selected{border-color:#6bbe8f;background:linear-gradient(#205b44,#163c32);color:#fff9e9}
.employee-picker-overlay{position:fixed;inset:0;z-index:2300;display:grid;place-items:center;padding:16px}
.employee-picker-backdrop{position:absolute;inset:0;background:#02080be8;backdrop-filter:blur(5px)}
.employee-picker-panel{position:relative;display:flex;flex-direction:column;width:min(560px,100%);max-height:90dvh;background:linear-gradient(150deg,#1b2a30,#0d171d);border:1px solid #ad804c;border-radius:17px;box-shadow:0 24px 85px #000b;overflow:hidden}
.employee-picker-results{display:flex;flex-direction:column;gap:8px;padding:0 16px 14px;min-height:70px;overflow-y:auto;overscroll-behavior:contain}
.employee-picker-results .button{width:100%;min-height:51px;text-align:center;white-space:normal;font-size:17px;background:linear-gradient(#433221,#2b2520)}
.employee-picker-message{margin:0 16px 14px}
@media(max-width:730px){.customer-choice-bar{min-height:65px;flex-direction:row;align-items:center}.customer-choice-bar .strip-counter{display:none}.customer-main-button{min-height:54px}.employee-picker-overlay,#customerDropdown{padding:10px}}

/* V0.9.19: employee-specific catalog permissions */
.permissions-panel{max-width:560px}
.permissions-employee-name{padding:0 19px;margin:12px 0 0}
.permissions-options{display:flex;flex-direction:column;gap:10px;padding:16px 19px;overflow-y:auto}
.permissions-options label{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #6b4c30;border-radius:9px;background:#1a262c;color:#f3ddbb;cursor:pointer}
.permissions-options input{accent-color:#3caa78;width:20px;height:20px;flex:none}
#employeePermissionsSave:disabled{opacity:.65}

/* V0.9.20: cancel a pending employee switch without ending the active shift. */
.cloud-login-card{position:relative}
.cloud-login-close{position:absolute;top:13px;left:13px;z-index:1;display:grid;place-items:center;width:43px;height:43px;min-height:43px;border:1px solid #af834e;border-radius:10px;color:#ffe3b5;background:#28333a;font-size:30px;line-height:1;cursor:pointer}
.cloud-login-close:disabled{opacity:.55;cursor:wait}
#cloudLoginTitle{padding-left:46px}

/* V0.9.22: owner-only system window and separate limited employee portal. */
#ownerAdminBox.hidden,#staffAdminBox.hidden,#staffAdminContent.hidden,#staffAdminEmailField.hidden{display:none!important}
#staffAdminEmailField{display:flex;flex-direction:column;align-items:stretch;gap:7px}
#staffAdminEmailField .field{width:100%;min-height:45px}
#staffAdminBox .stack-buttons{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
#staffAdminBox .stack-buttons .button{flex:1;min-width:145px}

/* V0.9.27: right-aligned clock and centered signed-in employee name. */
.toolbar{position:relative}
.toolbar>#clock{order:-2;flex-shrink:0;white-space:nowrap}
.toolbar>.toolbar-meta{order:0;margin-inline-start:auto}
.toolbar>.identity{order:1}
#cloudUserBar #cloudUser{position:absolute;inset-inline-start:50%;top:50%;transform:translate(50%,-50%);white-space:nowrap;font-weight:600;pointer-events:none}
@media(max-width:730px){
 .toolbar{flex-wrap:nowrap;min-height:44px}
 .toolbar>.toolbar-meta{min-width:0}
 .toolbar>.identity{flex-shrink:0}
 #cloudUserBar #cloudUser{font-size:12px}
}

/* V0.9.28: compact gear navigation; legacy tab nodes remain hidden for existing routing. */
.navigation-gear{width:38px;min-width:38px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:23px;line-height:1;border:1px solid #b18a55!important;border-radius:11px;background:#1c2930!important;color:#f2d5a7!important;padding:0!important;cursor:pointer}
#cloudUserBar .navigation-gear{min-height:36px;padding:0!important}
.navigation-menu-panel{width:min(410px,calc(100vw - 32px));max-height:85dvh}
.navigation-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.navigation-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:105px;padding:14px 8px;border:1px solid #705433;border-radius:13px;background:linear-gradient(145deg,#25323a,#111c23);color:#ecd8b9;font-size:18px;font-weight:700;cursor:pointer}
.navigation-menu-item span{font-size:28px;line-height:1}
.navigation-menu-item:active,.navigation-menu-item:focus-visible{background:#53391f;border-color:#d8aa6e}
.system-switch-employee{margin-inline-end:10px;min-height:44px}
@media(max-width:430px){.navigation-menu-panel{width:calc(100vw - 32px)}.navigation-menu-grid{gap:9px}.navigation-menu-item{min-height:96px;font-size:16px}.navigation-gear{width:35px;min-width:35px}}

/* V0.9.30: subtle, static dark walnut wood behind the POS windows. */
html,body{
 background:
   radial-gradient(ellipse at 45% 24%,rgba(106,54,24,.23) 0%,rgba(20,13,11,.12) 42%,rgba(3,6,9,.69) 100%),
   linear-gradient(180deg,rgba(5,10,11,.14),rgba(3,7,9,.38)),
   url("./assets/dark_wood_background.svg") center top / 960px 1152px repeat,
   #080b0b;
}
.panel{
 background:
  linear-gradient(160deg,rgba(23,36,44,.92),rgba(15,24,30,.88)),
  url("./assets/dark_wood_background.svg") center center / 960px 1152px repeat,
  #101920;
}
@media print{html,body{background:#fff!important}.panel{background:#fff!important}}

/* V0.9.32: fixed ten-row viewport for staff 24-hour transaction reports only. */
#reportsPage .report-table.limited-24h-ten-rows{
  --limited-report-row-height:42px;
  flex:0 0 auto;
  height:calc(11 * var(--limited-report-row-height) + 2px);
  min-height:0;
  max-height:none;
  overflow:auto;
  overscroll-behavior:contain;
}
#reportsPage .report-table.limited-24h-ten-rows #reportTable th,
#reportsPage .report-table.limited-24h-ten-rows #reportTable td{
  height:var(--limited-report-row-height);
  box-sizing:border-box;
  white-space:nowrap;
}
#reportsPage .report-table.limited-24h-ten-rows #reportTable th{
  position:sticky;
  top:0;
  z-index:2;
  background:#2b2119;
}

/* V0.9.33: local display mode and desktop layout fit; touch behavior retained. */
.device-layout-panel{width:min(430px,calc(100vw - 24px))}
.device-layout-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.device-layout-option{min-height:60px;border:1px solid #715333;background:linear-gradient(#29353c,#162128);border-radius:11px;color:#ead5b6;font-weight:700;font-size:16px;cursor:pointer}
.device-layout-option.selected,.device-layout-option[aria-pressed="true"]{background:linear-gradient(#694622,#3c2a1c);border-color:#e6b578;color:#fff1da;box-shadow:0 0 0 1px #d9a46c66}
#deviceLayoutCurrent{margin:8px 0 2px}
@media (min-width:1101px){
 html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 .app-shell{height:auto;min-height:100dvh;overflow:visible}
 main{flex:1;min-height:0;overflow:visible;padding:12px clamp(14px,2vw,30px) 24px}
 .page.active{height:auto;min-height:0}
 #managePage{gap:12px}
 #managePage .catalog-launchers{gap:12px;margin-bottom:0}
 #managePage .catalog-launch-button{min-height:108px;gap:5px;padding:14px}
 #managePage .catalog-launch-icon{font-size:24px}
 #managePage .catalog-launch-button strong{font-size:20px}
 #managePage #ownerAdminBox,#managePage #staffAdminBox,#managePage #auditPanel{flex:none;height:auto;min-height:0;margin-top:0}
 #managePage #ownerAdminBox{padding-bottom:16px}
 #managePage #adminPanel{height:auto;min-height:0;overflow:visible}
 #managePage #adminPanel>.scroll-table{max-height:310px;flex:none;overflow:auto}
 #managePage #auditPanel .audit-table{height:auto;max-height:340px;min-height:100px;flex:none;overflow:auto}
 #managePage #employeeCreateForm{align-items:end}
 #managePage #employeeCreateForm label{flex:0 1 220px}
 #managePage #employeeCreateForm .field{width:100%}
 #systemPage .system-grid>.panel{min-height:0}
}
/* Force a narrower presentation without changing other devices. */
body[data-layout-mode="mobile"] .app-shell{width:min(100%,520px);max-width:520px;margin-inline:auto;height:auto;min-height:100dvh;overflow:visible}
body[data-layout-mode="mobile"] main{overflow:visible}
body[data-layout-mode="mobile"] .page.active{height:auto;min-height:0}
body[data-layout-mode="mobile"] .work-grid{display:flex;flex-direction:column;min-height:0}
body[data-layout-mode="mobile"] .work-grid>.panel{height:auto;min-height:440px;flex:none}
body[data-layout-mode="mobile"] .product-panel{min-height:565px!important}
body[data-layout-mode="mobile"] .category-grid,body[data-layout-mode="mobile"] .products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-layout-mode="mobile"] .catalog-launchers{grid-template-columns:1fr}
body[data-layout-mode="mobile"] .catalog-launch-button{min-height:95px}
body[data-layout-mode="mobile"] .system-grid,body[data-layout-mode="mobile"] .manage-grid{grid-template-columns:1fr}
body[data-layout-mode="mobile"] .report-controls{grid-template-columns:1fr 1fr}
body[data-layout-mode="mobile"] .toolbar{flex-wrap:nowrap}
body[data-layout-mode="tablet"] .app-shell{width:min(100%,960px);max-width:960px;margin-inline:auto;height:auto;min-height:100dvh;overflow:visible}
body[data-layout-mode="tablet"] main{overflow:visible}
body[data-layout-mode="tablet"] .page.active{height:auto;min-height:0}
body[data-layout-mode="tablet"] .work-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,1fr);min-height:610px}
body[data-layout-mode="tablet"] .manage-grid{grid-template-columns:1fr}
body[data-layout-mode="tablet"] .system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-layout-mode="tablet"] .catalog-launchers{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-layout-mode="desktop"] .app-shell{width:100%;max-width:none;height:auto;min-height:100dvh;overflow:visible}
body[data-layout-mode="desktop"] main{overflow:visible}
body[data-layout-mode="desktop"] .page.active{height:auto;min-height:0}
body[data-layout-mode="desktop"] .work-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(305px,2fr);min-height:565px}
body[data-layout-mode="desktop"] .manage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-layout-mode="desktop"] .system-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-layout-mode="desktop"] .catalog-launchers{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-layout-mode="desktop"] #managePage .catalog-launch-button{min-height:108px}
body[data-layout-mode="desktop"] #managePage #ownerAdminBox,body[data-layout-mode="desktop"] #managePage #auditPanel{height:auto;min-height:0;flex:none}
body[data-layout-mode="desktop"] #managePage #adminPanel>.scroll-table{max-height:310px;overflow:auto;flex:none}
body[data-layout-mode="desktop"] #managePage #auditPanel .audit-table{max-height:340px;min-height:100px;flex:none}
@media(max-width:700px){
 body[data-layout-mode="tablet"] .work-grid{display:flex;flex-direction:column;min-height:0}
 body[data-layout-mode="tablet"] .system-grid{grid-template-columns:1fr}
 body[data-layout-mode="desktop"] .work-grid{display:flex;flex-direction:column;min-height:0}
 body[data-layout-mode="desktop"] .system-grid,body[data-layout-mode="desktop"] .manage-grid{grid-template-columns:1fr}
}
@media print{
 body[data-layout-mode="mobile"] .app-shell,body[data-layout-mode="tablet"] .app-shell{width:100%;max-width:none}
}

/* V0.9.34: compact global control row, preserving full-size date, employee and gear. */
.global-control-strip{
 display:flex!important;
 flex-direction:row!important;
 align-items:center!important;
 justify-content:flex-start;
 flex-wrap:nowrap;
 width:auto;
 min-width:0;
 gap:clamp(4px,.8vw,12px);
 margin:8px 12px 10px;
 padding:8px 12px;
 min-height:72px;
 height:auto;
 flex-shrink:0;
}
.global-control-strip .customer-select-wrap{
 flex:1 1 auto;
 min-width:66px;
 max-width:100%;
}
.global-control-strip .customer-main-button{
 min-width:0;
 width:100%;
 min-height:53px;
 padding:10px clamp(5px,.9vw,18px);
 font-size:20px;
}
.global-control-strip .customer-main-button span:first-child{
 min-width:0;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.global-control-strip #clock{
 flex:0 0 auto;
 order:0;
 white-space:nowrap;
 font-size:12px;
 padding:5px 12px;
}
.global-control-strip #cloudUserBar{
 display:flex;
 flex:0 0 auto;
 align-items:center;
 gap:7px;
 min-width:0;
 white-space:nowrap;
 font-size:12px;
}
.global-control-strip #cloudUserBar #cloudUser{
 position:static!important;
 inset:auto!important;
 transform:none!important;
 display:inline-block;
 font-size:12px;
 font-weight:600;
 pointer-events:auto;
 max-width:clamp(48px,12vw,190px);
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.global-control-strip #cloudUserBar .navigation-gear{
 flex:0 0 38px;
 width:38px;
 min-width:38px;
 height:36px;
 font-size:23px;
 padding:0!important;
}
.global-control-strip.not-pos-page .customer-select-wrap{display:none!important}
.system-meta-controls{
 display:flex;flex-wrap:wrap;align-items:center;gap:9px;
 margin-bottom:12px;color:var(--muted);font-size:12px
}
.system-meta-controls #versionLabel{white-space:nowrap}
.system-meta-controls #storageLabel{display:inline-flex}
@media(max-width:730px){
 .global-control-strip{padding:7px 8px;gap:5px;min-height:70px}
 .global-control-strip #clock{padding:5px 6px}
 .global-control-strip #cloudUserBar{gap:4px}
 .global-control-strip #cloudUserBar #cloudUser{max-width:64px}
 .global-control-strip #cloudUserBar .navigation-gear{flex-basis:35px;width:35px;min-width:35px}
 .global-control-strip .customer-main-button{padding-inline:5px}
 .system-meta-controls #storageLabel{display:inline-flex}
}
@media(max-width:365px){
 .global-control-strip #cloudUserBar #cloudUser{max-width:44px}
 .global-control-strip .customer-select-wrap{min-width:56px}
}
@media print{.global-control-strip{display:none!important}}

/* V0.9.36 archived ledger administration: contained, touch-friendly and RTL. */
#archiveManagerModal{z-index:2500}
.archive-admin-backdrop{position:fixed;inset:0;background:#02080bd8;backdrop-filter:blur(4px)}
.archive-admin-panel{position:relative;display:flex;flex-direction:column;gap:12px;width:min(1180px,calc(100vw - 24px));height:min(92dvh,980px);max-height:92dvh;overflow:auto;padding:18px;z-index:1}
.archive-admin-panel h3{color:#ffe4b7;margin:8px 0 12px;font-size:17px}
.archive-admin-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.archive-admin-grid{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:12px;min-height:260px;flex:1}
.archive-admin-customers,.archive-admin-details{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;padding:12px;border:1px solid #634b32;border-radius:12px;background:#101920cf}
.archive-admin-customers>label{font-weight:700;color:#f0d2a6}
.archive-customer-list,.archive-lines-list{flex:1;overflow-y:auto;min-height:120px;max-height:55dvh;overscroll-behavior:contain}
.archive-client-row{display:flex;gap:6px;padding:4px 0;border-bottom:1px solid #ffffff17}
.archive-client-select{flex:1;min-width:0;white-space:normal;text-align:right;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.archive-client-select.active{background:#60411f;border-color:#d0a568}
.archive-client-select strong{overflow-wrap:anywhere}
.archive-client-select small,.archive-line-details small{font-size:12px;color:#c1ae93}
.archive-small-btn{min-height:37px;align-self:center}
.archive-line-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 5px;border-bottom:1px solid #6d53312d}
.archive-line-row.deleted{opacity:.64}
.archive-line-details{display:flex;flex-direction:column;gap:4px;min-width:0}
.archive-line-details strong{font-size:14px;overflow-wrap:anywhere}
.archive-line-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}
.archive-deleted-note{color:#eda39b!important}
.archive-edit-form{margin-top:14px;padding:12px;border:1px solid #9b784b;border-radius:10px;background:#0c151b;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.archive-edit-form h3,.archive-edit-form #archiveEditNote,.archive-form-actions{grid-column:1/-1}
.archive-edit-form label{display:grid;gap:5px;min-width:0;color:#dcc7a7;font-size:13px}
.archive-form-actions{display:flex;gap:8px}
.archive-db-section{padding:12px;border-top:1px solid #715334}
.archive-db-section .field{max-width:460px}
.archive-audit-list{max-height:230px;overflow:auto;border:1px solid #6b5032;border-radius:8px}
.archive-audit-entry{padding:8px 10px;border-bottom:1px solid #ffffff20;font-size:12px}
@media(max-width:730px){.archive-admin-panel{width:calc(100vw - 14px);padding:10px;height:94dvh;max-height:94dvh}.archive-admin-grid{grid-template-columns:1fr;flex:none}.archive-customer-list{max-height:30dvh}.archive-lines-list{max-height:37dvh}.archive-edit-form{grid-template-columns:1fr}.archive-line-row{align-items:flex-start;flex-wrap:wrap}}
@media print{#archiveManagerModal{display:none!important}}


/* V0.9.37 — fill the remaining desktop viewport with the two POS panels only.
   Do not resize the header, global customer control, or tablet/mobile layouts. */
@media screen and (min-width:1101px) and (min-height:700px){
 body:not([data-layout-mode="mobile"]):not([data-layout-mode="tablet"]) .app-shell:has(#posPage.active){
  height:100dvh;
  min-height:700px;
  overflow:hidden;
 }
 body:not([data-layout-mode="mobile"]):not([data-layout-mode="tablet"]) main:has(> #posPage.active){
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
 }
 body:not([data-layout-mode="mobile"]):not([data-layout-mode="tablet"]) #posPage.active{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  height:auto;
 }
 body:not([data-layout-mode="mobile"]):not([data-layout-mode="tablet"]) #posPage.active .work-grid{
  flex:1 1 auto;
  min-height:0;
  height:100%;
 }
}

/* V0.9.38: staff-account checkbox and private report */
.employee-charge-check{display:flex;align-items:center;gap:7px;white-space:nowrap;color:#f1d8b1;font-weight:700;cursor:pointer;padding:8px 10px;background:#241f1a;border:1px solid #84613e;border-radius:10px}
.employee-charge-check input{width:20px;height:20px;accent-color:#c29356;cursor:pointer}
.employee-charge-check:has(input:checked){background:#3e3020;border-color:#d1a369;color:#ffe2b1}
.employee-charge-report{margin-top:16px;min-height:280px}
.employee-charge-report-filters{display:flex;gap:8px;align-items:center}
.employee-charge-report-filters select{min-width:150px}
.employee-charge-report-table{max-height:430px;overflow:auto}
#employeeChargeReportSummary{color:#f2d39e}
@media(max-width:730px){.employee-charge-check{font-size:12px;padding:5px 6px;gap:4px}.employee-charge-check input{width:17px;height:17px}.employee-charge-report-filters{flex-wrap:wrap}.employee-charge-report-table{overflow-x:auto}}

/* V0.9.39 named employee-account charges */
.employee-charge-button{flex:0 0 auto;min-height:48px;background:linear-gradient(145deg,#6c4828,#3b291b);border-color:#c3965e;color:#fff1d7}
.employee-charge-button.active{background:linear-gradient(145deg,#256249,#173e31);border-color:#93d6a7;color:#fff}
.employee-charge-name-panel{max-width:510px}
.employee-charge-person-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px;margin:10px 0}
.employee-charge-person-total{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;background:#172128;border:1px solid #655039;border-radius:9px}
.employee-charge-person-total strong{color:#f4d5a5}
.archive-employee-person{color:#f0c486!important;font-weight:700}
@media(max-width:730px){.employee-charge-button{min-height:43px;font-size:12px;padding:6px 8px}.employee-charge-person-totals{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V0.9.40: fix employee-charge name text input inheriting checkbox-size rule. */
#employeeChargeNameForm .permissions-options label{display:flex;align-items:stretch;flex-direction:column;gap:8px}
#employeeChargeNameForm #employeeChargePersonInput.field{
 display:block;width:100%;min-width:0;max-width:100%;height:48px;min-height:48px;
 flex:1 1 auto;padding:10px 14px;direction:rtl;text-align:right;
 font-size:17px;line-height:1.4;accent-color:auto;
}

/* V0.9.42: same beer GIF inside Charge, with unchanged outer button dimensions. */
#chargeBtn{position:relative;isolation:isolate;overflow:hidden}
#chargeBtn .charge-button-label{position:relative;z-index:2;pointer-events:none}
#chargeBtn .charge-button-beer-gif{
 position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);
 height:min(42px,85%);width:clamp(35px,9%,52px);
 object-fit:contain;pointer-events:none;z-index:1;
}

/* V0.9.43: preview grid for manual SQLite import. */
.sqlite-import-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:8px;margin-top:12px}
.sqlite-import-details p{margin:0;border:1px solid #58422c;background:#17232b;border-radius:9px;padding:10px;overflow-wrap:anywhere}
#sqliteImportMessage.error{color:#f7a89e}
#sqliteImportPanel .stack-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#sqliteImportPanel .stack-buttons .button{min-height:44px}

/* Explicit per-product price choice in the manual import preview. */
#sqliteImportPanel .sqlite-price-decision{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid #755634;border-radius:8px;padding:9px 12px}
#sqliteImportPanel .sqlite-price-decision span{flex:1 1 130px}
#sqliteImportPanel .sqlite-price-decision select{flex:1 1 210px;max-width:100%}

/* V0.9.45: owner system page - three tasks only. Old import panels retained
   in markup for backwards compatibility but permanently hidden after migration. */
#sqliteImportPanel,#archiveImportPanel,#ownerLegacyPanel,#ownerBackupPanel,#archiveManageBtn{display:none!important}
#newSystemDashboard{grid-column:1/-1}
.pos-simple-system-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;align-items:start}
.pos-simple-system-section{border:1px solid #61472e;border-radius:12px;background:#18262d;padding:16px;min-width:0}
.pos-simple-system-section h3{margin:0 0 10px;font-size:18px;color:#ffe2b3}
.pos-simple-system-section p{line-height:1.55}
.pos-simple-system-section>.button{min-height:45px;max-width:100%}
.pos-backup-schedule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}
.pos-backup-schedule label{display:flex;flex-direction:column;gap:6px;font-size:13px}
.pos-backup-schedule .pos-backup-toggle{grid-column:1/-1;flex-direction:row;gap:9px;align-items:center}
.pos-backup-schedule .pos-backup-toggle input{width:20px;height:20px;accent-color:#3e966b}
.pos-backup-schedule .button{min-height:43px}
.pos-backup-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.pos-backup-actions .button{flex:1 1 120px;white-space:normal}
#backupManagerMessage{margin-top:14px}
#backupManagerMessage.backup-error{color:#f4a29a}
@media(max-width:730px){.pos-simple-system-grid{grid-template-columns:1fr}.pos-backup-schedule{grid-template-columns:1fr 1fr}.pos-simple-system-section{padding:12px}}

/* V1.0.1 — Employee charge report lives in its own dialog.
   Do not modify page/global scrolling or other POS layouts. */
.employee-charge-report-entry{display:flex;justify-content:flex-start;margin:10px 0 12px}
.employee-charge-report-entry .button{min-height:42px}
.employee-charge-modal{z-index:1250}
.employee-charge-report-backdrop{position:absolute;inset:0;background:#02080bd8;backdrop-filter:blur(3px)}
.employee-charge-modal .employee-charge-report{
 position:relative;z-index:1;margin:0;width:min(1180px,100%);
 height:min(88dvh,900px);max-height:calc(100dvh - 20px);min-height:0;
 display:flex;flex-direction:column;gap:12px;padding:clamp(12px,2vw,22px);
 overflow:hidden;
}
.employee-charge-modal-head{flex:0 0 auto;gap:12px;flex-wrap:wrap}
.employee-charge-modal-head h2{margin:0}
.employee-charge-modal .employee-charge-report-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:0 0 auto}
.employee-charge-modal .employee-charge-report-filters select{flex:1 1 160px;max-width:100%;min-width:0}
.employee-charge-modal .employee-charge-report-table{flex:1 1 auto;min-height:120px;max-height:none;overflow:auto}
.employee-charge-modal .employee-charge-report-table .data-table{min-width:760px}
.employee-charge-modal .employee-charge-person-totals{flex:0 0 auto;max-height:25dvh;overflow-y:auto}
@media(max-width:730px){
 .employee-charge-modal{padding:8px}
 .employee-charge-modal .employee-charge-report{height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);width:100%;padding:12px;gap:10px}
 .employee-charge-modal-head h2{font-size:19px}
 .employee-charge-modal .employee-charge-report-filters select{flex:1 1 120px}
 .employee-charge-modal .employee-charge-report-table .data-table{min-width:760px}
}

/* V1.0.2: compact logout action beside the signed-in employee's menu. */
#cloudUserBar .employee-sign-out{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:5px 11px;margin-inline-end:7px;border-color:#966f53;color:#ffe6cd;font-size:13px;font-weight:700;white-space:nowrap}
@media(max-width:730px){#cloudUserBar .employee-sign-out{padding:5px 8px;font-size:12px;margin-inline-end:5px}}

/* V1.0.4 — five category/product rows and six charge rows in desktop layout only.
   Row heights, button sizes, and independent inner scrolling remain unchanged. */
@media (min-width:701px){
 body[data-layout-mode="desktop"] .work-grid{min-height:690px}
 body[data-layout-mode="desktop"] .product-panel{min-height:690px}
 body[data-layout-mode="desktop"] .category-grid{
   grid-template-columns:repeat(5,minmax(0,1fr));
   height:254px;min-height:254px;max-height:254px;
   grid-auto-rows:46px;overflow-y:auto;overflow-x:hidden;
 }
 body[data-layout-mode="desktop"] .product-visual-region{
   height:324px;min-height:324px;max-height:324px;flex:none;
 }
 body[data-layout-mode="desktop"] .product-visual-region>.products-grid{
   grid-template-columns:repeat(4,minmax(0,1fr));
   height:100%;grid-auto-rows:58px;overflow-y:auto;overflow-x:hidden;
 }
 body[data-layout-mode="desktop"] .bill-table-wrap{
   height:270px;min-height:270px;max-height:270px;flex:none;
   overflow-y:auto;overflow-x:hidden;
 }
}
@media (min-width:1101px){
 body[data-layout-mode="auto"] .work-grid{min-height:690px}
 body[data-layout-mode="auto"] .product-panel{min-height:690px}
 body[data-layout-mode="auto"] .category-grid{
   grid-template-columns:repeat(5,minmax(0,1fr));
   height:254px;min-height:254px;max-height:254px;
   grid-auto-rows:46px;overflow-y:auto;overflow-x:hidden;
 }
 body[data-layout-mode="auto"] .product-visual-region{
   height:324px;min-height:324px;max-height:324px;flex:none;
 }
 body[data-layout-mode="auto"] .product-visual-region>.products-grid{
   grid-template-columns:repeat(4,minmax(0,1fr));
   height:100%;grid-auto-rows:58px;overflow-y:auto;overflow-x:hidden;
 }
 body[data-layout-mode="auto"] .bill-table-wrap{
   height:270px;min-height:270px;max-height:270px;flex:none;
   overflow-y:auto;overflow-x:hidden;
 }
}

/* V1.0.5: mandatory update dialog must cover login, admin and catalog dialogs. */
#updateDialog.update-modal{z-index:4500}
#updateDialog .update-modal-actions{grid-template-columns:1fr}
#updateDialog .update-modal-actions .button.hidden{display:none!important}

/* V1.0.7 — compact staff creation fields in every display mode.
   Override .inline-form .field flex-basis:115px, which stretched fields vertically. */
#employeeCreateForm #employeeCreateName,
#employeeCreateForm #employeeCreatePin,
#employeeCreateForm #employeeCreateCustomer{
  box-sizing:border-box;
  height:42px;
  min-height:42px;
  max-height:42px;
  flex:0 0 42px;
}
#employeeCreateForm button[type="submit"]{
  box-sizing:border-box;
  height:42px;
  min-height:42px;
  max-height:42px;
  flex:0 0 auto;
  align-self:flex-end;
}

/* V1.0.8 desktop-only inline customer search. Phone/tablet retain original picker. */
.desktop-customer-select{display:none;position:relative;width:100%;min-width:0}
.desktop-customer-search{
 box-sizing:border-box;width:100%;min-width:0;min-height:53px;height:53px;
 border:1px solid #b58b54;border-radius:10px;
 background:linear-gradient(#513921,#302318);color:#ffe6c0;
 font-size:19px;padding:9px 15px;
}
.desktop-customer-search:disabled{opacity:.65}
.desktop-customer-search::placeholder{color:#d5bd9d}
.desktop-customer-options{
 position:absolute;inset-inline:0;top:calc(100% + 5px);
 z-index:1350;max-height:min(340px,55dvh);overflow-y:auto;
 border:1px solid #ad804c;border-radius:10px;
 background:linear-gradient(160deg,#1b2a30,#0d171d);
 box-shadow:0 18px 38px #000b;padding:6px;
}
.desktop-customer-option{
 display:block;width:100%;min-height:42px;text-align:right;
 background:transparent;border:0;border-bottom:1px solid #ffffff16;
 color:#f1e1c8;padding:10px 12px;cursor:pointer;font:inherit;
}
.desktop-customer-option:hover,.desktop-customer-option:focus-visible{
 background:#37503f;outline:1px solid #b58b54;border-radius:6px;
}
.desktop-customer-option[aria-selected="true"]{color:#b5ebc8}
.desktop-customer-empty{padding:14px;color:#d4c5b1;text-align:center}
@media(min-width:701px){
 body[data-layout-mode="desktop"] .customer-select-wrap>.customer-main-button{display:none}
 body[data-layout-mode="desktop"] .customer-select-wrap>.desktop-customer-select{display:block}
}
@media(min-width:1101px){
 body[data-layout-mode="auto"] .customer-select-wrap>.customer-main-button{display:none}
 body[data-layout-mode="auto"] .customer-select-wrap>.desktop-customer-select{display:block}
}

/* V1.0.10 — keep the 1280×130 animated header at native pixel size on wide
   desktop layouts. Avoid upscale blur without adding frames or bytes to GIF. */
@media (min-width:701px){
 body[data-layout-mode="desktop"] .hero img{
  max-width:1280px;
  margin-inline:auto;
  object-fit:contain;
 }
}
@media (min-width:1101px){
 body[data-layout-mode="auto"] .hero img{
  max-width:1280px;
  margin-inline:auto;
  object-fit:contain;
 }
}

/* V1.0.11 — desktop header uses the otherwise unused image side margins.
   The actual gear, employee name and clock are moved here by app.js;
   the GIF and the header's dimensions remain unchanged. */
.hero{position:relative}
.desktop-hero-gear,.desktop-hero-identity{display:none}
body.desktop-hero-controls .desktop-hero-gear{
 display:flex;position:absolute;z-index:2;
 left:clamp(12px,2.1vw,32px);top:0;bottom:0;
 align-items:center;justify-content:center;
}
body.desktop-hero-controls .desktop-hero-identity{
 display:flex;position:absolute;z-index:2;
 right:clamp(12px,2.1vw,32px);top:0;bottom:0;
 flex-direction:column;align-items:center;justify-content:center;
 gap:9px;max-width:clamp(128px,17vw,270px);
 text-align:center;direction:rtl;
}
body.desktop-hero-controls #desktopHeroGear #navigationGearBtn{
 display:inline-flex;align-items:center;justify-content:center;
 width:52px;min-width:52px;height:52px;min-height:52px;
 font-size:29px;padding:0!important;
}
body.desktop-hero-controls .hero:has(#cloudUserBar.hidden) #navigationGearBtn{
 visibility:hidden;pointer-events:none;
}
body.desktop-hero-controls #desktopHeroIdentity #cloudUserBar:not(.hidden){
 display:flex;justify-content:center;align-items:center;
 min-width:0;max-width:100%;font-size:clamp(14px,1.1vw,19px);
 font-weight:700;color:#f2d3a3;
}
body.desktop-hero-controls #desktopHeroIdentity #cloudUser{
 display:block;position:static!important;inset:auto!important;
 transform:none!important;max-width:100%;overflow:hidden;
 white-space:nowrap;text-overflow:ellipsis;
 font-size:inherit;font-weight:inherit;pointer-events:auto;
}
body.desktop-hero-controls #desktopHeroIdentity #clock{
 display:inline-flex;align-items:center;justify-content:center;
 padding:7px 11px;max-width:100%;
 white-space:nowrap;font-size:clamp(12px,.9vw,15px);
}
/* Preserve the GIF's visual center, without enlarging or shifting the header. */

/* V1.0.12: integrate the existing customer controls into the bill panel on desktop.
   No mobile/tablet style or control behavior changes. */
.desktop-billing-controls{display:none}
body.desktop-hero-controls #globalControlStrip{display:none!important}
body.desktop-hero-controls #posPage .bill-panel{position:relative;overflow:visible}
body.desktop-hero-controls #desktopBillingControls{
 display:flex;align-items:center;gap:9px;direction:rtl;
 flex:0 0 auto;width:100%;min-width:0;margin:0 0 10px;
 padding:0 0 10px;border-bottom:1px solid #644a32;
}
body.desktop-hero-controls #desktopBillingControls .customer-select-wrap{
 flex:1 1 auto;min-width:0;width:auto;max-width:none;
}
body.desktop-hero-controls #desktopBillingControls .desktop-customer-search{
 height:42px;min-height:42px;padding:7px 12px;
 font-size:15px;background:#172329;border-radius:8px;
}
body.desktop-hero-controls #desktopBillingControls #employeeChargeToggle{
 flex:0 0 auto;min-height:42px;height:42px;padding:7px 13px;
 font-size:14px;white-space:nowrap;
}

/* V1.0.13 — owner-only removed employees filter and safe staff actions. */
.employee-removed-filter{display:inline-flex;align-items:center;gap:9px;margin:0 0 12px;color:var(--muted);font-size:13px;cursor:pointer}
.employee-removed-filter input{width:17px;height:17px;accent-color:#c7a16c}
#employeeRows .tiny-btn.danger{background:#59302a;border-color:#ad5b48;color:#ffe3d9}
#employeeRows .tiny-btn:disabled{opacity:.55;cursor:wait}

/* V1.0.16: a visible in-dialog retry action when staff lookup fails. */
#employeePicker .employee-picker-retry{align-self:center;flex:0 0 auto;margin:0 16px 16px;min-height:44px;padding:9px 18px}
#employeePicker .employee-picker-retry:disabled{opacity:.65;cursor:wait}

/* V1.0.18 — worker picker is an always-visible scrollable button list. */
#employeePicker .employee-picker-results{min-height:70px;max-height:min(60dvh,520px);overflow-y:auto;-webkit-overflow-scrolling:touch;min-width:0;padding-top:10px}
.cloud-pin-keyboard-toggle{align-self:flex-start;display:block;margin:-5px 0 7px;padding:3px 0;border:0;background:transparent;color:#d3ad77;font-size:12px;cursor:pointer;text-align:right}
.cloud-pin-keyboard-toggle:focus-visible{outline:2px solid #d3ad77;outline-offset:3px}

/* V2.0.1 — customer report QR sharing and app-link modal */
.qr-report-share-section{border:1px solid #826343;border-radius:12px;background:#152329;padding:14px;margin:14px 0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.qr-report-share-heading{display:flex;flex-direction:column;gap:4px;color:#f0d7ac}
.qr-report-share-section .report-controls{width:100%;display:flex;flex-wrap:wrap;gap:10px}
.qr-report-share-section .report-controls label{flex:1 1 145px}
.qr-report-share-section .report-controls input,.qr-report-share-section .report-controls select{width:100%}
.qr-share-panel{align-items:stretch;width:min(430px,100%);max-height:min(88dvh,650px);overflow-y:auto}
.qr-share-panel #qrShareMeta{margin:13px 16px;text-align:center;overflow-wrap:anywhere}
.qr-image-box{margin:0 auto;padding:12px;border-radius:10px;background:#fff;max-width:100%}
#qrShareCode{width:216px;height:216px;max-width:100%;display:flex;align-items:center;justify-content:center}
#qrShareCode img,#qrShareCode canvas{max-width:100%;height:auto!important}
.qr-share-link{margin:12px 16px;word-break:break-all;overflow-wrap:anywhere;color:#d9bd99;font-size:12px;line-height:1.5;text-align:center}
.qr-share-panel .customer-picker-actions{margin-top:auto}
@media(max-width:450px){.qr-report-share-section{padding:10px}.qr-share-panel{max-height:88dvh}}

/* V2.0.2 — compact, persistent Supabase connection state beside employee and clock.
   Emoji presentation only: no changes to network status or transaction logic. */
.cloud-connection-indicator{display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:180px;min-height:29px;padding:4px 9px;border-radius:999px;border:1px solid #826548;background:#242c2d;color:#e6d4bd;font-size:11px;font-weight:650;line-height:1.2;white-space:nowrap;user-select:none}
.cloud-connection-dot{display:inline-grid;place-items:center;width:23px;height:23px;flex:0 0 23px;border-radius:50%;background:transparent;box-shadow:none;line-height:1}
.cloud-connection-dot::before{content:"🤨";font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:20px;line-height:1;filter:drop-shadow(0 0 4px rgba(232,184,46,.58)) drop-shadow(0 0 8px rgba(232,184,46,.27))}
.cloud-connection-indicator[data-connection="online"]{border-color:#327654;color:#c9f6da;background:#142b23}
.cloud-connection-indicator[data-connection="online"] .cloud-connection-dot::before{content:"😃";filter:drop-shadow(0 0 4px rgba(41,214,93,.7)) drop-shadow(0 0 9px rgba(41,214,93,.3))}
.cloud-connection-indicator[data-connection="degraded"]{border-color:#947040;color:#ffe1a0;background:#352918}
.cloud-connection-indicator[data-connection="degraded"] .cloud-connection-dot::before{content:"🤨"}
.cloud-connection-indicator[data-connection="offline"]{border-color:#a04b4c;color:#ffd7d6;background:#381d22}
.cloud-connection-indicator[data-connection="offline"] .cloud-connection-dot::before{content:"😡";filter:drop-shadow(0 0 4px rgba(240,74,74,.68)) drop-shadow(0 0 9px rgba(240,74,74,.29))}
.cloud-connection-indicator[data-connection="checking"] .cloud-connection-dot::before{content:"🤨"}
@media(max-width:550px){.cloud-connection-indicator{font-size:10px;min-height:25px;padding:3px 6px;max-width:132px}.cloud-connection-dot{width:21px;height:21px;flex-basis:21px}.cloud-connection-dot::before{font-size:18px}}

/* V2.0.3 — mobile-only two-row POS header. The original interactive nodes
   and their event listeners remain in place; desktop/tablet styles stay intact. */
@media (max-width:730px){
 body:not(.desktop-hero-controls) .global-control-strip{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:minmax(36px,auto) minmax(49px,auto);
  align-items:stretch!important;
  column-gap:7px;
  row-gap:10px;
  height:auto;
  min-height:0;
  padding:11px 9px;
  margin:8px 12px 10px;
 }
 body:not(.desktop-hero-controls) .global-control-strip #cloudConnectionStatus{
  grid-column:1/4;grid-row:1;align-self:stretch;justify-self:stretch;
  width:100%;max-width:none;min-width:0;padding:5px 6px;
  font-size:clamp(10px,2.8vw,12px);
 }
 body:not(.desktop-hero-controls) .global-control-strip #cloudConnectionText{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 }
 body:not(.desktop-hero-controls) .global-control-strip #clock{
  grid-column:4/7;grid-row:1;align-self:stretch;justify-self:stretch;
  display:flex;align-items:center;justify-content:center;
  width:100%;min-width:0;max-width:none;min-height:36px;
  padding:5px 4px;order:initial;white-space:nowrap;
  font-size:clamp(10px,2.8vw,13px);
 }
 body:not(.desktop-hero-controls) .global-control-strip .customer-select-wrap{
  grid-column:1/4;grid-row:2;min-width:0;max-width:none;width:100%;
 }
 body:not(.desktop-hero-controls) .global-control-strip .customer-main-button{
  width:100%;height:100%;min-height:49px;padding:8px 10px;
  font-size:clamp(15px,4vw,19px);gap:6px;
 }
 body:not(.desktop-hero-controls) .global-control-strip #employeeChargeToggle{
  grid-column:4/6;grid-row:2;width:100%;min-width:0;min-height:49px;
  padding:8px 5px;font-size:clamp(11px,3vw,14px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 }
 body:not(.desktop-hero-controls) .global-control-strip #cloudUserBar{
  grid-column:6/7;grid-row:2;align-self:stretch;justify-self:stretch;
  display:flex;align-items:stretch;justify-content:center;
  min-width:0;width:100%;gap:0;
 }
 body:not(.desktop-hero-controls) .global-control-strip #cloudUserBar #cloudUser{
  display:none!important;
 }
 body:not(.desktop-hero-controls) .global-control-strip #cloudUserBar .navigation-gear{
  flex:1 1 auto;width:100%;min-width:0;height:100%;min-height:49px;
  padding:0!important;font-size:0!important;
  border:1px solid #aa8252;border-radius:12px;
 }
 body:not(.desktop-hero-controls) .global-control-strip #cloudUserBar .navigation-gear::after{
  content:"⋮";font-size:24px;line-height:1;
 }
 body:not(.desktop-hero-controls) .global-control-strip.not-pos-page .customer-select-wrap{
  display:none!important;
 }
}

/* V2.0.4 draft guard dialogs — visual-only, existing page layout is unchanged. */
.draft-guard-overlay{position:fixed;inset:0;z-index:11000;background:rgba(2,7,11,.9);display:grid;place-items:center;padding:16px;backdrop-filter:blur(5px)}
.draft-guard-card{width:min(460px,100%);max-height:92dvh;overflow-y:auto;display:flex;flex-direction:column;gap:13px;background:linear-gradient(150deg,#203039,#10191e);border:1px solid #b68a53;border-radius:18px;box-shadow:0 18px 55px #000b;padding:24px 18px;text-align:center;direction:rtl;color:#f1e2c9}
.draft-guard-card h2{margin:0;font-size:24px;color:#f3c685}
.draft-guard-card p{margin:0;line-height:1.5}
.draft-guard-summary{border:1px solid #886746;border-radius:12px;background:#19262c;padding:13px;font-size:16px;font-weight:700;overflow-wrap:anywhere}
.draft-guard-actions{display:grid;gap:9px}
.draft-guard-actions .button{min-height:48px;font-size:16px;border-radius:11px}
@media(max-width:550px){.draft-guard-card{padding:19px 13px}.draft-guard-card h2{font-size:21px}}

.draft-review-pill{position:fixed;right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:2450;border:1px solid #cfaa68;background:#473018;color:#fff0d5;box-shadow:0 5px 16px #000a;max-width:calc(100vw - 24px)}

/* V2.0.5 — maintenance banner, icon only on status row (not the toggle). */
.mode-banner.development-banner{
 display:flex;align-items:center;justify-content:center;gap:10px;
 padding:9px 12px;background:linear-gradient(90deg,#432614,#70451c,#432614);
 color:#fff2cd;border-bottom:2px solid #ebad58;
 box-shadow:inset 0 -1px 0 #f4c77f33,0 3px 12px #0005;
 font-size:clamp(12px,2.9vw,15px);font-weight:800;line-height:1.4;
}
.maintenance-banner-icon{
 display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
 font-size:clamp(21px,4vw,27px);line-height:1;
 filter:drop-shadow(0 0 5px #ffc46dba) drop-shadow(0 0 10px #efa54865);
}