/* =========================================================
POS SYSTEM — DESIGN TOKENS (iOS-style visual language)
Palette: iOS system colors — label/secondary-label grays,
systemGreen accent, systemOrange, systemRed, systemIndigo
Type: San Francisco (-apple-system) with Inter as the
cross-platform fallback, ui-monospace/SF Mono for
numbers, SKU codes, receipts
Signature: translucent blurred bars, grouped-list inputs,
continuous-corner cards, spring tap feedback,
torn-receipt edge on ticket / cart panels
========================================================= */
/* Fonts are loaded via tags in includes/fonts.php (see each page's
), not @import — @import forces the browser to fully download and
parse this stylesheet before it even discovers the font request, adding
a serial round-trip to every page load. A lets the browser fetch
fonts and CSS in parallel instead. */
/* Smooth cross-fade between page loads in browsers that support the native
View Transition API (Safari/Chrome, iOS 18+/Chrome 126+). No JS or routing
needed — this is a plain multi-page app, so each PHP page load gets a
gentle fade+scale instead of a hard cut. Unsupported browsers just ignore
it and navigate normally. */
@view-transition{
navigation:auto;
}
::view-transition-old(root){animation:tp-vt-out .16s var(--ease-out) both;}
::view-transition-new(root){animation:tp-vt-in .22s var(--ease-out) both;}
@keyframes tp-vt-out{to{opacity:0;}}
@keyframes tp-vt-in{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
:root{
/* iOS system grays / labels (light mode) */
--ink: #1C1C1E; /* iOS systemGray6 dark surface */
--ink-2: #2C2C2E; /* iOS systemGray5 dark surface */
--ink-3: #3A3A3C; /* iOS systemGray4 dark surface */
--paper: #F2F2F7; /* iOS grouped background */
--card: #FFFFFF;
--fill: #F2F2F7; /* iOS "fill" — grouped input backgrounds */
--fill-2: #E9E9EE;
--border: #E5E5EA; /* iOS separator */
--text: #1C1C1E; /* iOS label */
--muted: #8A8A8E; /* iOS secondary label */
--till: #34C759; /* iOS systemGreen */
--till-dark: #248A3D;
--till-soft: #E4F9EA;
--amber: #FF9500; /* iOS systemOrange */
--amber-soft: #FFF1DC;
--red: #FF3B30; /* iOS systemRed */
--red-soft: #FFE9E7;
--indigo: #5856D6; /* iOS systemIndigo */
--indigo-soft:#EBEBFB;
--blue: #007AFF; /* iOS systemBlue */
--radius: 14px; /* iOS "continuous" card corner */
--radius-sm: 9px;
--radius-lg: 20px; /* sheets / modals */
--radius-pill: 980px;
--shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 20px rgba(0,0,0,.05);
--shadow-lg: 0 20px 50px rgba(0,0,0,.22);
--ease-spring: cubic-bezier(.34,1.4,.64,1);
--ease-out: cubic-bezier(.25,.1,.25,1);
--font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Space Grotesk', 'Inter', sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
--font-mono: ui-monospace, 'SF Mono', 'IBM Plex Mono', 'Menlo', monospace;
}
*{box-sizing:border-box;}
html,body{height:100%; max-width:100%; overflow-x:hidden;}
img,svg,video{max-width:100%; height:auto;}
.product-photo{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-sm); display:block;}
.wishlist-btn{background:rgba(255,255,255,.9); border:none; width:30px; height:30px; border-radius:50%; color:var(--border); font-size:15px; cursor:pointer; box-shadow:var(--shadow); transition:transform .12s var(--ease-spring), color .12s var(--ease-out);}
.wishlist-btn:active{transform:scale(.88);}
.wishlist-btn.active{color:var(--red);}
/* Any card body that happens to contain a wide table scrolls horizontally
within itself instead of blowing out the page width on small screens */
.card-body{overflow-x:auto; -webkit-overflow-scrolling:touch;}
html{
-webkit-text-size-adjust:100%;
touch-action:manipulation; /* kills double-tap-to-zoom on most browsers */
scroll-behavior:smooth;
}
body{
margin:0;
background:var(--paper);
color:var(--text);
font-family:var(--font-body);
font-size:14.5px;
-webkit-font-smoothing:antialiased;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-touch-callout:none; /* disable iOS long-press callout/selection menu */
}
/* Text needs to stay selectable only where people actually type */
input, textarea, select, [contenteditable="true"]{
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
-webkit-touch-callout:default;
}
h1,h2,h3,h4,.font-ui{font-family:var(--font-ui); letter-spacing:-.01em;}
.mono{font-family:var(--font-mono);}
a{color:inherit;}
/* Thin, unobtrusive scrollbars everywhere — closer to iOS's auto-hiding bars */
::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16); border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28);}
* {scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.16) transparent;}
/* Native checkboxes get iOS's rounded accent-color treatment for free in
Safari/Chrome; just size + tint them consistently everywhere. */
input[type="checkbox"]{width:19px; height:19px; accent-color:var(--till); border-radius:6px; vertical-align:middle;}
input[type="radio"]{accent-color:var(--till);}
/* Universal spring-style tap feedback for anything interactive */
.btn, .cat-tab, .product-tile, .sidebar a.nav-link, .keypad button, .ti-qty button, .icon-btn{
-webkit-tap-highlight-color:transparent;
}
.btn:active, .cat-tab:active, .product-tile:active, .keypad button:active{
transform:scale(.96);
}
/* ---------- Smooth entrance animations ---------- */
@keyframes tp-rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
@keyframes tp-fade-in{from{opacity:0;} to{opacity:1;}}
@keyframes tp-pop-in{from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);}}
.card, .stat, .auth-card, .shift-card, .flash{
animation:tp-rise .38s var(--ease-out) both;
}
/* Stagger stat tiles / cards that sit side-by-side in a grid so they don't
all pop at once */
.grid > .stat:nth-child(1),.grid > .card:nth-child(1){animation-delay:.02s;}
.grid > .stat:nth-child(2),.grid > .card:nth-child(2){animation-delay:.07s;}
.grid > .stat:nth-child(3),.grid > .card:nth-child(3){animation-delay:.12s;}
.grid > .stat:nth-child(4),.grid > .card:nth-child(4){animation-delay:.17s;}
.content > *{animation:tp-fade-in .3s var(--ease-out) both;}
tbody tr{animation:tp-fade-in .25s var(--ease-out) both;}
/* Product tiles: quick staggered pop so a filtered/search-refreshed grid
feels alive instead of just snapping to new results */
.product-tile{animation:tp-pop-in .22s var(--ease-spring) both;}
.product-grid .product-tile:nth-child(n){animation-delay:calc(var(--i, 0) * 12ms);}
/* Cart re-renders its whole list on every add/remove/qty change, so this
keeps every line item easing in together rather than hard-appearing */
.ticket-item{animation:tp-rise .22s var(--ease-out) both;}
.ticket-empty{animation:tp-fade-in .25s var(--ease-out) both;}
/* Respect people who've asked their OS/browser for reduced motion */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
/* ---------- App shell ---------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
width:230px;
flex-shrink:0;
background:var(--ink);
color:#C9CDD4;
display:flex;
flex-direction:column;
padding:calc(20px + env(safe-area-inset-top)) 14px 20px;
position:fixed;
top:0; left:0; bottom:0;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.sidebar .brand{
font-family:var(--font-ui);
font-weight:700;
font-size:19px;
color:#fff;
display:flex;
align-items:center;
gap:9px;
padding:6px 8px 22px 8px;
letter-spacing:-.02em;
}
.sidebar .brand .dot{width:10px;height:10px;border-radius:3px;background:var(--till); display:inline-block; transform:rotate(45deg);}
.sidebar nav{display:flex; flex-direction:column; gap:2px;}
.sidebar .nav-label{
font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:#6E7380;
padding:16px 10px 6px;
}
.sidebar a.nav-link{
display:flex; align-items:center; gap:10px;
padding:9px 11px; border-radius:var(--radius-sm);
color:#C9CDD4; text-decoration:none; font-size:13.5px; font-weight:500;
transition:background .15s var(--ease-out), transform .12s var(--ease-out);
}
.sidebar a.nav-link svg{width:16px;height:16px; flex-shrink:0; opacity:.85;}
.sidebar a.nav-link:hover{background:rgba(255,255,255,.08); color:#fff;}
.sidebar a.nav-link.active{background:var(--till); color:#fff;}
.sidebar a.nav-link.active svg{opacity:1;}
.sidebar .shift-pill{
margin-top:auto; padding:12px; border-radius:var(--radius); background:rgba(255,255,255,.06);
font-size:12px; line-height:1.5;
}
.sidebar .shift-pill .lbl{color:#7C8290; text-transform:uppercase; font-size:10px; letter-spacing:.08em;}
.sidebar .shift-pill.on{border:1px solid rgba(52,199,89,.4);}
.sidebar .shift-pill .status-dot{width:7px;height:7px;border-radius:50%; display:inline-block; margin-right:5px;}
.sidebar .shift-pill.on .status-dot{background:var(--till); box-shadow:0 0 0 3px rgba(52,199,89,.25);}
.sidebar .shift-pill.off .status-dot{background:#5A6070;}
/* Mobile drawer bits (present in some header variants) styled to match */
.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:29; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);}
.sidebar-close{display:none; margin-left:auto; background:none; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer;}
.hamburger{
display:none; flex-direction:column; justify-content:center; gap:4px;
width:34px; height:34px; border-radius:50%; border:none; background:var(--fill); cursor:pointer; flex-shrink:0;
}
.hamburger span{display:block; width:16px; height:2px; margin:0 auto; border-radius:2px; background:var(--text);}
.sidebar-collapse-btn{
display:flex; align-items:center; justify-content:center;
width:34px; height:34px; border-radius:50%;
border:none; background:var(--fill); color:var(--text); cursor:pointer; flex-shrink:0;
}
.sidebar-collapse-btn:hover{background:var(--fill-2);}
.sidebar-collapse-btn svg{width:16px; height:16px;}
@media (min-width:961px){
.sidebar{transition:transform .22s var(--ease-out);}
.main{transition:margin-left .22s var(--ease-out);}
.app-shell.sidebar-collapsed .sidebar{transform:translateX(-230px);}
.app-shell.sidebar-collapsed .main{margin-left:0;}
}
@media (max-width:960px){
/* Only the mobile off-canvas drawer applies below this breakpoint —
the desktop collapse toggle is redundant with the hamburger drawer. */
.sidebar-collapse-btn{display:none;}
}
.main{
margin-left:230px;
flex:1;
min-width:0;
display:flex;
flex-direction:column;
}
.topbar{
min-height:60px; flex-shrink:0;
background:rgba(255,255,255,.78);
-webkit-backdrop-filter:saturate(180%) blur(20px);
backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid var(--border);
display:flex; align-items:center; justify-content:space-between;
padding:0 24px; position:sticky; top:0; z-index:20;
}
.topbar h1{font-size:17px; margin:0; font-weight:600; letter-spacing:-.01em;}
.topbar .user-chip{display:flex; align-items:center; gap:10px; font-size:13px;}
.topbar .avatar{
width:30px;height:30px;border-radius:50%;
background:var(--indigo); color:#fff; display:flex; align-items:center; justify-content:center;
font-family:var(--font-ui); font-weight:600; font-size:12.5px;
}
/* Printer/cash-drawer status button, shown in the shared topbar on every
page (not just the POS terminal) so a Bluetooth/USB printer connection
stays visible and manageable no matter where the cashier navigates to.
Mirrors the look of .sidebar-collapse-btn. */
.hw-topbar-btn{
display:flex; align-items:center; justify-content:center; position:relative;
width:34px; height:34px; border-radius:50%; flex-shrink:0;
border:none; background:var(--fill); color:var(--text); cursor:pointer;
transition:background .15s ease;
}
.hw-topbar-btn:hover{background:var(--fill-2);}
.hw-topbar-btn svg{width:16px; height:16px;}
.hw-dot{
position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%;
background:#6B7280; border:1.5px solid var(--paper);
transition:background-color .25s var(--ease-out);
}
.hw-topbar-btn.hw-connected{background:rgba(52,199,89,.18);}
@media (max-width:960px){
.hw-topbar-btn{width:30px; height:30px;}
.hw-topbar-btn svg{width:14px; height:14px;}
}
.content{padding:24px; flex:1;}
/* ---------- Cards / generic ---------- */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.card-header{padding:16px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;}
.card-header h2{font-size:15px; margin:0; font-weight:600; letter-spacing:-.01em;}
.card-body{padding:18px;}
.stat{
background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px;
box-shadow:var(--shadow);
}
.stat .lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600;}
.stat .val{font-family:var(--font-ui); font-size:26px; font-weight:700; margin-top:4px; letter-spacing:-.02em;}
.stat .sub{font-size:12px; color:var(--muted); margin-top:2px;}
.grid{display:grid; gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
/* ---------- Buttons (iOS filled/tinted/gray capsule buttons) ---------- */
.btn{
font-family:var(--font-ui); font-weight:600; font-size:13.5px;
border:1px solid transparent; border-radius:var(--radius-sm); padding:10px 17px;
cursor:pointer; display:inline-flex; align-items:center; gap:7px; text-decoration:none;
transition:transform .12s var(--ease-spring), background .12s var(--ease-out), opacity .12s var(--ease-out);
}
.btn-primary{background:var(--till); color:#fff;}
.btn-primary:hover{background:var(--till-dark);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{background:var(--ink-2);}
.btn-outline{background:var(--fill); border-color:transparent; color:var(--text);}
.btn-outline:hover{background:var(--fill-2);}
.btn-danger{background:var(--red); color:#fff;}
.btn-danger:hover{background:#D9342A;}
.btn-amber{background:var(--amber); color:#3A2A05;}
.btn-sm{padding:7px 12px; font-size:12.5px; border-radius:8px;}
.btn-block{width:100%; justify-content:center;}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none !important;}
/* ---------- Forms (iOS grouped-list filled inputs) ---------- */
label{font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:5px; display:block;}
.form-group{margin-bottom:15px;}
input[type=text],input[type=password],input[type=number],input[type=search],
input[type=date],input[type=email],select,textarea{
width:100%; padding:10px 12px; border:1px solid transparent; border-radius:var(--radius-sm);
font-family:var(--font-body); font-size:13.5px; background:var(--fill); color:var(--text);
transition:background .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
input:focus,select:focus,textarea:focus{outline:none; background:#fff; border-color:var(--till); box-shadow:0 0 0 4px rgba(52,199,89,.15);}
.help-text{font-size:11.5px; color:var(--muted); margin-top:4px;}
/* ---------- Tables (grouped-list feel) ---------- */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
thead th{
text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
color:var(--muted); font-weight:600; padding:11px 14px; border-bottom:1px solid var(--border);
}
tbody td{padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle;}
tbody tr{transition:background .1s var(--ease-out);}
tbody tr:hover{background:var(--fill);}
tbody tr:last-child td{border-bottom:none;}
/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:600;}
.badge-green{background:var(--till-soft); color:var(--till-dark);}
.badge-amber{background:var(--amber-soft); color:#9A5B00;}
.badge-red{background:var(--red-soft); color:#C4281C;}
.badge-gray{background:var(--fill); color:var(--muted);}
.badge-indigo{background:var(--indigo-soft); color:#3F3DB8;}
/* ---------- Flash messages (iOS notification-banner style) ---------- */
.flash{padding:12px 15px; border-radius:var(--radius); font-size:13px; margin-bottom:14px; border:1px solid transparent; box-shadow:var(--shadow);}
.flash-error{background:var(--red-soft); color:#93262B; border-color:#FBC9C4;}
.flash-warning{background:var(--amber-soft); color:#7A4E0A; border-color:#F5D9A8;}
.flash-success{background:var(--till-soft); color:var(--till-dark); border-color:#BFEECB;}
/* ---------- Auth / Shift full-page screens ---------- */
.center-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ink); padding:20px;
background-image:radial-gradient(circle at 20% 20%, #26262A 0%, var(--ink) 55%);}
.auth-card{width:100%; max-width:380px; background:var(--card); border-radius:var(--radius-lg); padding:32px 30px; box-shadow:var(--shadow-lg);}
.auth-card .brand{display:flex; align-items:center; gap:9px; font-family:var(--font-ui); font-weight:700; font-size:20px; margin-bottom:4px;}
.auth-card .brand .dot{width:11px;height:11px;border-radius:3px;background:var(--till); transform:rotate(45deg);}
.auth-card p.tagline{color:var(--muted); font-size:12.5px; margin:0 0 22px;}
.shift-card{width:100%; max-width:440px; background:var(--card); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-lg);}
/* ---------- POS terminal ---------- */
.pos-wrap{display:grid; grid-template-columns:1fr 380px; gap:18px; align-items:start;}
.pos-search{display:flex; gap:10px; margin-bottom:14px;}
.pos-search input{flex:1;}
/* Category chips styled like an iOS segmented / filter-chip control */
.cat-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.cat-tab{
padding:7px 14px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:600; cursor:pointer;
background:var(--fill); border:1px solid transparent; color:var(--muted);
transition:transform .12s var(--ease-spring), background .12s var(--ease-out), color .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.cat-tab.active{background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.18);}
.product-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; max-height:calc(100vh - 260px); overflow-y:auto; padding-right:4px;}
.product-tile{
background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:12px; cursor:pointer;
display:flex; flex-direction:column; gap:6px; transition:transform .12s var(--ease-spring), box-shadow .15s var(--ease-out), border-color .15s var(--ease-out);
}
.product-tile:hover{border-color:var(--till); box-shadow:0 6px 18px rgba(52,199,89,.16); transform:translateY(-1px);}
.product-tile .pt-name{font-size:12.5px; font-weight:600; line-height:1.3; min-height:32px;}
.product-tile .pt-price{font-family:var(--font-mono); font-weight:600; color:var(--till-dark); font-size:14px;}
.product-tile .pt-stock{font-size:10.5px; color:var(--muted);}
.product-tile.oos{opacity:.4; cursor:not-allowed;}
/* Cart / receipt ticket panel with signature torn-edge */
.ticket{
background:#fff; border:1px solid var(--border); border-radius:var(--radius) var(--radius) 0 0;
display:flex; flex-direction:column; position:sticky; top:76px;
box-shadow:var(--shadow);
}
.ticket-head{padding:16px 18px 10px; border-bottom:1px dashed var(--border);}
.ticket-head h2{font-size:14px; margin:0 0 2px; font-weight:700; letter-spacing:-.01em;}
.ticket-head .shift-info{font-size:11px; color:var(--muted); font-family:var(--font-mono);}
.ticket-items{max-height:280px; overflow-y:auto; padding:6px 18px; -webkit-overflow-scrolling:touch;}
.ticket-item{display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid #F0F0F4;}
.ticket-item:last-child{border-bottom:none;}
.ticket-item .ti-name{flex:1; font-size:12.5px; font-weight:600;}
.ticket-item .ti-sku{font-size:10px; color:var(--muted); font-family:var(--font-mono);}
.ticket-item .ti-qty{display:flex; align-items:center; gap:5px;}
.ticket-item .ti-qty button{width:22px;height:22px; border-radius:50%; border:none; background:var(--fill); cursor:pointer; font-size:13px; line-height:1; transition:background .12s var(--ease-out), transform .1s var(--ease-spring);}
.ticket-item .ti-qty button:active{transform:scale(.9); background:var(--fill-2);}
.ticket-item .ti-qty span{font-family:var(--font-mono); font-size:12.5px; min-width:16px; text-align:center;}
.ticket-item .ti-total{font-family:var(--font-mono); font-size:12.5px; font-weight:600; width:60px; text-align:right;}
.ticket-item .ti-remove{color:var(--red); cursor:pointer; font-size:15px; padding:0 2px;}
.ticket-empty{padding:40px 18px; text-align:center; color:var(--muted); font-size:12.5px;}
.ticket-totals{padding:14px 18px; border-top:1px dashed var(--border); font-size:13px;}
.ticket-totals .row{display:flex; justify-content:space-between; padding:3px 0; color:var(--muted);}
.ticket-totals .row.grand{color:var(--text); font-weight:700; font-size:18px; font-family:var(--font-ui); padding-top:8px; border-top:1px solid var(--border); margin-top:6px;}
.ticket-totals .row.grand span:last-child{font-family:var(--font-mono);}
.ticket-actions{padding:14px 18px 18px;}
/* torn paper edge */
.ticket-tear{
height:14px;
background:
linear-gradient(-45deg, transparent 8px, #fff 8px) 0 0,
linear-gradient(45deg, transparent 8px, #fff 8px) 0 0;
background-size:16px 16px; background-repeat:repeat-x;
filter:drop-shadow(0 -1px 1px rgba(0,0,0,.05));
}
/* Payment modal keypad — rounded like iOS Calculator keys */
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:10px;}
.keypad button{padding:15px 0; font-family:var(--font-mono); font-size:16px; font-weight:600; border-radius:var(--radius-sm); border:none; background:var(--fill); cursor:pointer; transition:transform .1s var(--ease-spring), background .12s var(--ease-out);}
.keypad button:hover{background:var(--fill-2);}
.keypad button:active{background:var(--fill-2); transform:scale(.95);}
/* Modals / sheets — translucent scrim + spring pop-in */
.modal-backdrop{
position:fixed; inset:0; background:rgba(0,0,0,.4);
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
display:flex; align-items:center; justify-content:center; z-index:100;
animation:tp-fade .18s var(--ease-out);
}
.modal-box{
background:rgba(255,255,255,.96);
-webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
border-radius:var(--radius-lg); width:420px; max-width:92vw; box-shadow:var(--shadow-lg);
max-height:90vh; overflow-y:auto;
animation:tp-pop .22s var(--ease-spring);
}
.modal-box .modal-head{padding:18px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;}
.modal-box .modal-head h3{margin:0; font-size:15.5px; font-weight:700; letter-spacing:-.01em;}
.modal-box .modal-body{padding:20px;}
.modal-box .modal-foot{padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end;}
.modal-close{cursor:pointer; font-size:18px; color:var(--muted); background:var(--fill); border:none; width:28px; height:28px; border-radius:50%; line-height:1;}
@keyframes tp-fade{from{opacity:0;} to{opacity:1;}}
@keyframes tp-pop{from{opacity:0; transform:scale(.92) translateY(6px);} to{opacity:1; transform:scale(1) translateY(0);}}
.text-muted{color:var(--muted);}
.text-right{text-align:right;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;} .gap-8{gap:8px;} .gap-12{gap:12px;}
@media print{
.no-print{display:none !important;}
.sidebar,.topbar{display:none !important;}
.main{margin-left:0 !important;}
}
/* ---------- SweetAlert2 (confirm dialogs) — iOS action-sheet styling ---------- */
.swal-tillpoint{
border-radius:var(--radius-lg) !important;
font-family:-apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
box-shadow:var(--shadow-lg) !important;
}
.swal-tillpoint .swal2-title{
font-family:var(--font-ui);
font-size:18px;
color:var(--text);
letter-spacing:-.01em;
}
.swal-tillpoint .swal2-html-container{
font-size:14px;
color:var(--muted);
}
.swal-tillpoint .swal2-icon.swal2-warning{border-color:var(--amber); color:var(--amber);}
.swal-tillpoint .swal2-icon.swal2-error{border-color:var(--red); color:var(--red);}
.swal-tillpoint .swal2-icon.swal2-success{border-color:var(--till); color:var(--till);}
.swal-btn-confirm, .swal-btn-cancel{
border-radius:var(--radius-pill) !important;
font-family:-apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
font-weight:600 !important;
font-size:13.5px !important;
padding:9px 20px !important;
box-shadow:none !important;
}
.swal-btn-cancel{ color:var(--text) !important; background:var(--fill) !important; }
/* =========================================================
RESPONSIVE — fits every screen from a small phone up to a
desktop, sidebar becomes an off-canvas drawer, nothing
overlays content, nothing forces horizontal scroll on the
page itself (only wide tables scroll within their own card).
========================================================= */
/* Header rows (title + search + action button) wrap instead of
squeezing/overflowing on narrow cards */
.card-header{flex-wrap:wrap; row-gap:10px;}
.card-header > div{max-width:100%;}
.card-header .flex{flex-wrap:wrap;}
@media (max-width:960px){
.sidebar{
transform:translateX(-100%);
transition:transform .3s var(--ease-spring);
z-index:30;
box-shadow:12px 0 40px rgba(0,0,0,.3);
}
.sidebar.open{transform:translateX(0);}
.sidebar-overlay.show{display:block;}
.sidebar-close{display:block;}
.hamburger{display:flex;}
.main{margin-left:0;}
.topbar{padding:0 16px;}
.content{padding:18px;}
}
@media (max-width:760px){
.grid-4,.grid-3,.grid-2{grid-template-columns:repeat(2,1fr);}
.auth-card,.shift-card{padding:26px 22px;}
}
@media (max-width:640px){
body{font-size:14px;}
.content{padding:14px;}
.topbar{padding:0 12px; height:56px;}
.topbar h1{font-size:15.5px;}
.topbar .user-chip > div:first-child{display:none;} /* name/role text hides; avatar stays */
.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
.card-body{padding:14px;}
.stat .val{font-size:22px;}
.modal-box{width:100%; max-width:100%; border-radius:var(--radius-lg) var(--radius-lg) 0 0; position:fixed; left:0; right:0; bottom:0; max-height:85vh;}
.modal-backdrop{align-items:flex-end;}
table{font-size:12.5px;}
thead th,tbody td{padding:9px 10px;}
}
@media (max-width:480px){
.auth-card,.shift-card{padding:22px 18px; border-radius:var(--radius);}
.pos-topbar{padding-left:14px; padding-right:14px; gap:8px;}
.pos-topbar .brand{font-size:0; gap:0;} /* collapses the "TillPoint" text node; the dot mark (fixed px size) stays visible */
.pos-topbar .brand .dot{margin-right:0;}
.pos-clock{font-size:13px;}
.pos-topbar .icon-btn{width:30px; height:30px;}
.pos-topbar .icon-btn svg{width:15px; height:15px;}
}
/* Safe-area padding so content never sits under a notch/home-indicator
when the PWA is installed full-screen on iOS */
.topbar{padding-top:env(safe-area-inset-top, 0);}
.content{padding-bottom:calc(24px + env(safe-area-inset-bottom, 0));}
.modal-box{padding-bottom:env(safe-area-inset-bottom, 0);}