:root{--gap:12px;--outer:18px;--orange:#ff9f13;--border:#d9dde4;--surface:#fff;--muted:#77808e;--green:#24d737;font-family:"Arial Narrow","Roboto Condensed","Liberation Sans Narrow",Arial,sans-serif;color:#101211;background:#f4f5f6}*{box-sizing:border-box}body{margin:0;height:100dvh;min-width:860px;min-height:600px;display:flex;flex-direction:column}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid #b76b00;outline-offset:-3px}button:active{filter:brightness(.94)}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.symbols{position:absolute;width:0;height:0;overflow:hidden}.pos{flex:1;min-height:0;padding:var(--outer);display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:68px minmax(0,1fr);gap:var(--gap)}.search-wrap,.menu-wrap,.staff-wrap{position:relative;min-width:0}.searchbox{height:100%;display:flex;background:#fff;border:1px solid var(--orange);border-radius:5px;overflow:hidden}.searchbox input{width:0;flex:1;min-width:0;border:0;background:none;padding:0 12px;font-size:calc(28px - 1pt);color:#151515;outline:0}.searchbox input::placeholder{color:#929aa8;opacity:1}.searchbox>button{border:0;width:80px;background:#ffdfb5;display:grid;place-items:center}.searchbox svg{width:36px;height:36px;stroke-width:2.5}.customer-search .searchbox>button{background:#fff}.receipt{background:#fff;border:1px solid var(--border);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;min-height:0}.table-scroll{flex:1;overflow:auto}table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:21px}.number-col{width:7.2%}.quantity-col{width:18%}.price-col{width:17%}.total-col{width:16.5%}.delete-col{width:5.5%}th{height:44px;background:#e1e4e8;font-size:18px;font-weight:700;position:sticky;top:0;z-index:1}td{height:46px;text-align:center}th,td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:0 8px}th:last-child,td:last-child{border-right:0}th:nth-child(2),td:nth-child(2){text-align:left;padding-left:20px}td:nth-child(2){font-weight:700}td.quantity-cell,td.delete-cell{padding:0}.quantity-control{display:grid;grid-template-columns:1fr 1.25fr 1fr;height:45px;align-items:center}.quantity-control button,.delete-cell button{height:100%;border:0;background:#e8eaed;font-size:27px;display:grid;place-items:center}.quantity-control span{height:100%;display:grid;place-items:center}.delete-cell button{width:100%;height:45px}.delete-cell svg{width:23px;height:23px}.totals{height:56px;flex-shrink:0;display:grid;grid-template-columns:1fr 76px 205px 205px;border-top:1px solid var(--border);font-size:23px}.totals>*{display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border)}.totals>*:first-child{justify-content:flex-end;padding-right:24px}.totals>*:last-child{border:0}.controls{display:grid;grid-template-rows:68px 76px minmax(0,1fr) 84px;gap:var(--gap);min-height:0}.actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}.action{border:0;background:#e1e4e8;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:14px;height:100%;width:100%;font-size:20px;font-weight:700}.action svg{width:29px;height:29px}.action i{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;margin-left:2px}.entry-display{border:1px solid var(--border);border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 14px}.entry-display label{font-size:21px;color:var(--muted);font-weight:700}.entry-display output{font-size:38px;font-weight:700;max-width:170px;overflow:hidden}.keypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:var(--gap)}.keypad button{border:1px solid var(--border);border-radius:5px;background:#f3f4f5;font-size:30px;font-weight:700;min-height:0;padding:0}.keypad .utility{background:#c9cdd2;font-size:29px}.keypad .multiply{grid-column:4;grid-row:3/span 2;font-size:34px;font-weight:400}.enter-button{border:0;border-radius:5px;background:var(--orange);font-size:31px;font-weight:700;display:flex;gap:10px;align-items:center;justify-content:center}.enter-button svg{width:30px;height:30px;stroke-width:2.6}.statusbar{height:50px;flex-shrink:0;display:flex;align-items:center;background:#202425;color:#f5f5f5;padding:0 18px;font-size:12px;gap:0}.status-item{height:26px;display:flex;align-items:center;gap:14px;padding:0 18px;border:0;border-right:1px solid #777;background:none;color:inherit;white-space:nowrap}.staff-wrap .status-item{padding-left:0}.status-item svg{width:24px;height:24px}.online{color:var(--green)}.status-spacer{flex:1}.status-item.date{border-left:1px solid #777}.status-item.time{border:0;padding-right:0}.popover{position:absolute;top:calc(100% + var(--gap));left:0;min-width:100%;z-index:10;background:#fff;border:1px solid var(--border);border-radius:5px;box-shadow:0 8px 24px #0002;padding:6px;max-height:320px;overflow:auto}.popover[hidden]{display:none}.popover button{display:flex;justify-content:space-between;gap:20px;align-items:center;width:100%;padding:14px 16px;white-space:nowrap;border:0;background:#fff;font-size:19px;text-align:left;border-radius:3px}.popover button:hover{background:#fff0d9}.popover.right{left:auto;right:0;min-width:210px}.staff-menu{top:auto;bottom:calc(100% + 12px);min-width:220px}.empty{padding:16px;color:var(--muted)}dialog{border:1px solid var(--border);border-radius:8px;padding:28px;max-width:440px;font-family:Arial,sans-serif}dialog::backdrop{background:#0005}dialog h2{margin:0 0 16px;font-size:23px}dialog p{line-height:1.5}.dialog-close{background:var(--orange);border:0;border-radius:4px;padding:12px 24px;font-weight:bold;float:right}@media(max-width:1100px){.pos{grid-template-columns:minmax(0,1fr) 310px}.totals{grid-template-columns:1fr 55px 140px 140px;font-size:20px}table{font-size:18px}th{font-size:15px}.action{gap:9px;font-size:18px}}@media(max-height:700px){.pos{grid-template-rows:60px minmax(0,1fr)}.controls{grid-template-rows:60px 66px minmax(0,1fr) 70px}.keypad button{font-size:26px}}

/* Fixed square keypad and full-width action rows. */
.controls{display:flex;flex-direction:column;gap:var(--gap);justify-content:flex-start}
.actions{grid-template-columns:1fr;grid-template-rows:36px 36px;flex-shrink:0}
.entry-display{height:60px;flex-shrink:0}
.keypad{width:100%;aspect-ratio:1;flex-shrink:0}
.enter-button{height:54px;flex-shrink:0}
.product-name{border:0;background:none;text-align:left;font-weight:700;padding:0;width:100%;height:100%;font-size:inherit}
tr:not(.selected) .quantity-control button,tr:not(.selected) .delete-cell button{visibility:hidden;pointer-events:none}
.status-label,.staff-icon{border:0;background:none;color:inherit;padding:0;display:flex;align-items:center;font-size:inherit}
.offline{color:#77808e}.signal-bars rect{fill:#77808e;stroke:none}.signal-bars rect.active{fill:var(--green)}

/* Shared left search row; controls start at the top of the right column. */
.pos{--key-size:81px;--control-font:30px}
.search-row{grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);min-width:0}
.receipt{grid-column:1;grid-row:2}
.controls{grid-column:2;grid-row:1 / span 2}
.actions{grid-template-rows:repeat(2,var(--key-size))}
.enter-button{height:var(--key-size)}
.controls .action,.controls .enter-button,.controls .keypad button{font-size:var(--control-font)}
.entry-display{height:30px;padding:0 14px}.entry-display label{font-size:20px}.entry-display output{font-size:26px;line-height:1}
.staff-menu,.staff-menu button{color:#000}
.network-speed{font-variant-numeric:tabular-nums}
@media(max-width:1100px){.pos{--key-size:68.5px}}

/* Eight equal-height control rows and seven equal gaps fit the available height. */
.pos{--key-size:clamp(53.75px,calc((100dvh - 170px) / 8),81px);grid-template-columns:minmax(0,1fr) calc(4 * var(--key-size) + 3 * var(--gap))}
.entry-display{height:var(--key-size)}
.entry-display output{font-size:var(--control-font)}
.connection-offline{color:#ff4141;animation:connection-blink 1s steps(1,end) infinite}
.connection-offline rect,.connection-offline circle{fill:#ff4141!important}
.connection-offline path{stroke:#ff4141!important}
@keyframes connection-blink{0%,100%{opacity:1}50%{opacity:0}}

/* A dependent indicator is muted, not a second (misleading) blinking fault. */
.status-label:disabled{color:#77808e;cursor:not-allowed}
.status-derived-offline{color:#77808e!important;animation:none!important}
.status-derived-offline rect,.status-derived-offline circle{fill:#77808e!important}
.status-derived-offline path{stroke:#77808e!important}
.signal-bars path{stroke:#77808e}
.signal-bars path.active{stroke:var(--green)}
.signal-bars .signal-dot{fill:#77808e;stroke:none}
.signal-bars .signal-dot.active{fill:var(--green)}
@media(prefers-reduced-motion:reduce){.connection-offline{animation:none}}