/* Shared web / Expo storefront. Mobile controls use the existing sales handlers. */
:root{--ui-red:#ed2635;--ui-ink:#20242d;--ui-muted:#777d89;--ui-line:#e9ebef;--ui-bg:#f6f7f9;--green:var(--ui-red);--line:var(--ui-line);--muted:var(--ui-muted)}
body{background:var(--ui-bg);color:var(--ui-ink);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.ui-icon{width:22px;height:22px;flex:none;vertical-align:middle;pointer-events:none}
.app-shell .ui-icon-button::before,.app-shell .app-nav-link::before,.app-shell .app-scan::before,.app-shell [data-ui-payment]::before,.app-shell .mobile-checkout-toggle::before,#app-menu button::before,.app-auth button::before{display:none!important}
button.primary{background:var(--ui-red);border-color:var(--ui-red);box-shadow:0 4px 10px #ed263518}
button.primary:hover{background:#d41928;border-color:#d41928}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #ec7380;outline-offset:3px}
.app-shell.compact-shell{grid-template-columns:210px minmax(0,1fr);font-size:14px}
.app-shell.compact-shell .sidebar{background:#fff;color:var(--ui-ink);padding:28px 16px 16px;border-right:1px solid var(--ui-line);gap:30px}
.app-shell .app-brand,.app-brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:800;letter-spacing:-.7px;padding:0!important;white-space:nowrap}
.app-logo{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;color:#fff;background:var(--ui-red);flex:none}
.app-logo .ui-icon{width:23px;height:23px}
.brand-red{color:var(--ui-red)}
.app-shell.compact-shell .brand{color:var(--ui-ink);font-size:18px;letter-spacing:-.7px}
.app-shell.compact-shell .sidebar nav{gap:5px;overflow:auto}
.app-nav-caption{font-size:10px;font-weight:650;letter-spacing:1.2px;color:#969ba6;margin:18px 10px 9px}
.app-nav-caption:first-child{margin-top:0}
.app-shell.compact-shell .sidebar .app-nav-link,#app-menu .app-nav-link{display:flex;align-items:center;gap:12px;color:#68707f;background:transparent;border:0;padding:13px 12px;min-height:46px;border-radius:11px;font-size:13px;font-weight:550;text-align:left;width:100%}
.app-shell.compact-shell .sidebar .app-nav-link .ui-icon{width:20px;height:20px}
.app-shell.compact-shell .sidebar .app-nav-link:hover,#app-menu .app-nav-link:hover{background:#f6f7f9;color:var(--ui-ink)}
.app-shell.compact-shell .sidebar .app-nav-link.active,#app-menu .app-nav-link.active{background:#fff0f1;color:#d91e2d;font-weight:700}
.app-shell.compact-shell .sidebar footer{border-top:1px solid var(--ui-line);padding:18px 0 0}
.app-profile{display:flex;align-items:center;gap:9px;min-width:0}
.app-profile>div{flex:1;min-width:0}.app-profile strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.app-shell .sidebar .app-profile small{display:block;color:var(--ui-muted);margin-top:4px;font-size:11px}
.app-avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#f1f2f5;color:#555b67;font-size:13px;font-weight:700;flex:none}
.app-shell.compact-shell .sidebar .ui-icon-button{width:32px;min-height:36px;background:transparent;border:0;color:var(--ui-muted);padding:5px;margin:0}
.app-shell .sidebar-date{font-size:10px;color:var(--ui-muted);margin:18px 0 0;text-align:center}
.app-shell.compact-shell .work{padding:0 28px 28px;min-width:0}
.app-shell.compact-shell .topbar.app-header{min-height:94px;display:flex;align-items:center;justify-content:space-between;margin:0 0 6px;gap:12px}
.app-header-title{display:flex;align-items:center;gap:10px;min-width:0}.app-overline{display:block;font-size:10px;font-weight:650;letter-spacing:1.4px;color:#a0a5af;margin-bottom:5px}
.app-shell .app-header h1{font-size:25px;font-weight:750;letter-spacing:-.7px;margin:0;line-height:1.15}
.app-header-actions{display:flex;align-items:center;gap:12px;flex:none}
.app-shell.compact-shell .ui-icon-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ui-line);border-radius:12px;background:#fff;color:#525b6a;width:42px;height:42px;min-height:42px;padding:9px;position:relative}
.app-shell.compact-shell .ui-icon-button:hover{background:#fff0f1;color:var(--ui-red)}
.app-mobile-mark{display:none}
.app-shell.compact-shell .app-header .status:not(.offline){font-size:11px;padding:0;display:inline-flex;align-items:center;gap:6px;color:#707b74}
.app-shell.compact-shell .app-header .status:not(.offline)::before{width:6px;height:6px;background:#32996c;content:'';border-radius:50%}
.app-shell.compact-shell .app-header .status.offline{font-size:11px;background:#fff1dc;color:#935b13;border-radius:6px;max-width:110px}
#app-order-count{position:absolute;right:-4px;top:-5px;border:2px solid var(--ui-bg);background:var(--ui-red);color:#fff;font-size:9px;border-radius:20px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 3px}
.app-header-menu{display:none!important}
.app-shell.compact-shell .heading{gap:12px;margin:14px 0 22px}.app-shell.compact-shell .heading h1{font-size:21px}.app-shell.compact-shell .heading p{font-size:13px;line-height:1.6}
.app-shell.compact-shell button{border-radius:10px;min-height:40px;font-size:13px}.app-shell.compact-shell input,.app-shell.compact-shell select,.app-shell.compact-shell textarea{border:1px solid #e0e3e9;border-radius:11px;min-height:44px;font-size:14px;padding:11px 13px;box-shadow:none}
.app-shell.compact-shell .panel{border-color:var(--ui-line);border-radius:16px;box-shadow:0 2px 4px #20242d02}
.app-shell.compact-shell .searchbar{gap:10px;margin:8px 0 16px;align-items:stretch}
.app-shell.compact-shell :is(#scan,#simple-stock-search){background:#fff;border-color:var(--ui-line);height:48px;padding:13px 16px;min-width:0}
.app-shell.compact-shell .app-scan{background:var(--ui-red);border-color:var(--ui-red);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 17px;font-size:13px;white-space:nowrap}
.app-shell.compact-shell .app-scan:hover{background:#d41928}
.app-shell.compact-shell .app-filters{margin:0 0 19px;display:block;min-width:0}
.app-categories{display:flex;gap:7px;overflow:auto;scrollbar-width:none;max-width:100%;padding:2px 0 5px;scroll-padding-inline:10px}.app-categories::-webkit-scrollbar{display:none}
.app-shell.compact-shell .app-categories button{flex:none;white-space:nowrap;padding:9px 14px;min-height:40px;border-radius:22px;background:#fff;border:1px solid var(--ui-line);color:#69717e;font-size:12px;font-weight:550}
.app-shell .app-categories button::before{display:none!important}
.app-shell.compact-shell .app-categories button.active{color:#fff;background:var(--ui-ink);border-color:var(--ui-ink);font-weight:650}
.app-list-caption{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;gap:10px}.app-shell .app-list-caption h2{font-size:16px;margin:0;font-weight:650;letter-spacing:-.3px}.app-list-caption>span{font-size:11px;color:var(--ui-muted)}
.app-shell.compact-shell .products{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:14px;align-items:start}
.app-shell.compact-shell .product{border:1px solid var(--ui-line);border-radius:16px;background:#fff;position:relative;min-width:0;transition:border-color .15s,box-shadow .15s;min-height:0;overflow:hidden}
.app-shell.compact-shell .product:hover{border-color:#f1a4ac;box-shadow:0 5px 18px #ed26350b}.app-shell.compact-shell .product-selected{border-color:#ef5360}
.app-shell.compact-shell .product img,.app-shell.compact-shell .product .no-photo{height:132px;width:100%;object-fit:contain;background:#fff;padding:17px 20px 8px}
.app-shell.compact-shell .product .no-photo{color:#cbd0da;border:0}.product .no-photo .ui-icon{width:40px;height:40px}
.app-shell.compact-shell .product-body{padding:10px 13px 13px}.app-shell.compact-shell .product strong{font-size:12px;line-height:1.45;font-weight:650;min-height:35px;margin:0 0 7px;color:var(--ui-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app-shell.compact-shell .product .badge{font-size:10px;border-radius:4px;background:transparent;padding:0;color:#8a929e;font-weight:450}
.app-shell.compact-shell .product .badge.amber{color:#b66c22}
.app-shell.compact-shell .product .price{color:var(--ui-red);font-size:19px;letter-spacing:-.5px;margin:7px 30px 0 0;line-height:1.3}
.app-shell.compact-shell .product-barcode{font-size:9px!important;color:#99a0aa;margin-top:8px;font-weight:400;letter-spacing:.4px;white-space:nowrap}.app-shell .product-barcode::before{width:11px;height:11px;margin-right:4px;vertical-align:-2px}
.product-add-mark{position:absolute;right:12px;bottom:36px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#fff0f1;color:var(--ui-red);font-size:20px;font-weight:400;line-height:1;pointer-events:none}
.product-selected .product-add-mark{background:var(--ui-red);color:#fff;font-size:13px;font-weight:700}
.app-shell.compact-shell .product-unavailable img{opacity:.6}.app-shell.compact-shell .product-unavailable .price{color:#7f8794}
.app-shell.compact-shell .pos-prepared{min-width:0}.app-shell.compact-shell .pos-prepared .product{width:100%}
.app-shell.compact-shell .food-detail{display:block;width:100%;min-height:30px;font-size:10px;color:var(--ui-muted);margin:4px 0 0}
.app-shell.compact-shell.sales-workspace{--register-width:350px}.app-shell.compact-shell.sales-workspace .work{padding-right:calc(var(--register-width) + 28px)}
.app-shell.compact-shell.sales-workspace .split{display:block}
.app-shell.compact-shell.sales-workspace .cart{width:var(--register-width);position:fixed;inset:0 0 0 auto;height:100dvh;max-height:none;min-width:0;padding:27px 22px 20px;border:0;border-left:1px solid var(--ui-line);border-radius:0;box-shadow:none;background:white;display:flex;flex-direction:column;z-index:20}
.app-shell.compact-shell .register-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 17px;padding:7px 0 20px;border-bottom:1px solid var(--ui-line);flex:none}
.register-label{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:-.5px}.register-label>.ui-icon{width:23px;height:23px;color:var(--ui-red)}.register-label small{display:none}.register-desktop-badge{font-size:11px;color:#7d8592;background:#f3f4f6;font-weight:500;padding:6px 9px;border-radius:7px}
.register-mobile-total{display:none}
.app-shell.compact-shell.sales-workspace .cart-items{flex:1;min-height:50px;max-height:none;overflow:auto;overscroll-behavior:contain;padding-right:2px}
.app-shell.compact-shell .cart .checkout-item{position:relative;padding:14px 0;gap:10px;align-items:center;border-bottom:1px solid #f0f1f4}
.app-shell .checkout-thumb{width:40px;height:50px;padding:3px;border:0;border-radius:8px;background:#f7f8fa}
.app-shell .checkout-item-copy>strong{font-size:12px;line-height:1.5;font-weight:650;padding-right:8px}
.app-shell .checkout-item-copy>small{font-size:10px;color:#7c8492;line-height:1.5}
.app-shell .checkout-item-copy>small:nth-of-type(2),.app-shell .checkout-item-copy>br{display:none}
.app-shell .checkout-item>strong{font-size:13px;white-space:nowrap;align-self:center;margin-right:24px}
.app-shell.compact-shell .checkout-item .remove-item{position:absolute;right:0;top:8px;width:32px;min-height:32px;height:32px;padding:0;color:#969dab;background:transparent;border:0;font-size:22px}
.app-shell.compact-shell .checkout-item .qty{margin-top:9px;gap:0;width:max-content;border:1px solid #e8eaf0;border-radius:8px;overflow:hidden}
.app-shell.compact-shell .checkout-item .qty button{width:32px;min-height:29px;border:0;border-radius:0;background:#f9fafb;color:#555f70;padding:0;font-size:18px}.app-shell .qty b{width:28px;text-align:center;font-size:12px}
.app-shell.compact-shell .cart-items .empty{border:0;padding:50px 8px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;color:#9ba2af;font-size:12px;line-height:1.6}.cart-items .empty .ui-icon{width:38px;height:38px;color:#c5cbd5}
.register-payment{flex:none;max-height:65dvh;overflow:auto;padding:0 1px;overscroll-behavior:contain}
.app-shell.compact-shell .cart-total{border-top:1px dashed #dfe2e8;padding:20px 0 0;margin:17px 0 22px;color:#6d7583;font-size:13px}.app-shell.compact-shell .cart-total strong{font-size:28px;color:var(--ui-ink);letter-spacing:-1px}
.app-shell.compact-shell .student-inline{margin:0 0 17px}.app-shell.compact-shell .student-inline label{font-size:11px;font-weight:550;color:#737c8a;margin:0 0 7px}.app-shell.compact-shell .student-inline input{background:#fafbfc;font-size:13px;min-height:44px}
.app-shell.compact-shell .student-inline-clear{height:36px!important;width:36px;top:4px;right:4px;color:#949baa}
.app-shell.compact-shell .student-inline-results{position:static;margin:6px 0 0;max-height:190px;box-shadow:0 6px 18px #20242d0a;border-color:var(--ui-line);border-radius:10px}
.app-shell.compact-shell .student-inline-results button{min-height:44px;font-size:13px;padding:11px 12px}
.app-shell.compact-shell .pay-grid label{font-size:11px;color:#737c8a;font-weight:550;margin-bottom:8px}.app-shell .pay-grid label::before{display:none}
.payment-methods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.app-shell.compact-shell .payment-methods button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:59px;padding:8px 2px;border:1px solid var(--ui-line);border-radius:10px;background:#fff;font-size:10px;color:#737c8b;font-weight:500}
.payment-methods .ui-icon{width:20px;height:20px}.app-shell.compact-shell .payment-methods button.active{background:#fff2f3;color:#d91e2d;border-color:#f6bfc5;font-weight:650}
.app-shell.compact-shell .pay-grid .primary{min-height:50px;font-size:14px;border-radius:12px;margin-top:16px}
.app-shell.compact-shell .cart-extra{border-top:0;padding-top:4px;margin-top:15px;max-height:none}.app-shell .cart-extra summary{font-size:11px;text-align:center;padding:8px;color:#9299a5}.app-shell .cart-extra summary::before{display:none}.app-shell.compact-shell .cart-extra button{min-height:40px}
.payment-card-note{font-size:11px;color:#858d9a;margin:9px 0 0;line-height:1.5}
.mobile-checkout-toggle,.mobile-nav{display:none!important}
.app-shell.compact-shell .stock-metrics{gap:12px;margin:0 0 18px}.app-shell .stock-metrics>div{border-color:var(--ui-line);border-radius:14px;padding:20px}.app-shell .stock-metrics small{font-size:11px;color:#8c94a1}.app-shell .stock-metrics strong{font-size:26px;letter-spacing:-.8px;font-weight:700;margin-top:10px}
.app-shell .stock-metrics>div:nth-child(2) strong{color:#e35f3c}.app-shell.compact-shell .stock-buy{border-radius:16px;padding:22px}.app-shell .stock-buy h2{font-size:17px}.app-shell .stock-needs-list{max-height:220px}.app-shell .stock-needs-list>.row{padding:13px 0;font-size:13px}.app-shell .stock-method{padding-top:7px;font-size:11px}
.app-shell.compact-shell .stock-table{border-radius:14px;max-height:60vh}.app-shell th{background:#f8f9fb;color:#8791a0;font-size:11px;font-weight:600}.app-shell td{font-size:13px;padding:15px 13px}.app-shell .stock-table td small{color:#8c95a4;font-size:10px;margin-top:5px}
.app-shell .student-card{border-color:var(--ui-line);border-radius:16px;box-shadow:none}.app-shell .student-card::before{display:none!important}.app-shell .student-card strong{font-size:16px}.app-shell .student-card b{font-size:23px}.app-shell .student-card p{font-size:12px;margin:9px 0 0}
.app-shell .column{background:#edf0f5;border-radius:0}.app-shell .order{border-color:var(--ui-line);border-radius:0}.app-shell .notice{border-radius:12px;line-height:1.6}.app-shell .order button,.app-shell .order .badge,.app-shell .column .badge{border-radius:0}
.app-menu-open{overflow:hidden}
#app-menu{padding:26px;border:0;border-radius:22px;width:min(560px,calc(100% - 28px));max-height:90dvh;color:var(--ui-ink);box-shadow:0 25px 100px #18223433}
#app-menu::backdrop{background:#19212d66;backdrop-filter:blur(3px)}
.app-menu-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.app-menu-header small{font-size:11px;color:var(--ui-muted)}.app-menu-header h2{margin:5px 0 0;font-size:25px;letter-spacing:-.7px}
#app-menu .ui-icon-button{display:grid;place-items:center;background:#f4f5f7;border:0;border-radius:50%;width:40px;min-height:40px;padding:8px}
.app-menu-account{display:flex;align-items:center;gap:12px;padding:16px;background:#f7f8fa;border-radius:13px;margin-bottom:22px}.app-menu-account>.ui-icon{color:var(--ui-red)}.app-menu-account strong,.app-menu-account small{display:block;font-size:12px}.app-menu-account small{font-size:11px;margin-top:4px}.app-menu-account .app-date{margin-left:auto;font-size:11px;color:#8c94a2}
.app-menu-group{margin-bottom:20px}.app-menu-group h3{font-size:11px;font-weight:600;color:#9ba3af;margin:0 12px 6px}.app-menu-footer{display:flex;gap:10px;border-top:1px solid var(--ui-line);padding-top:17px}.app-menu-footer button{flex:1;font-size:12px;border:1px solid var(--ui-line);color:#717b8b}
.app-auth{background:#fff;min-height:100dvh}.app-auth .auth-story{background:#fcf3f2;color:var(--ui-ink);padding:60px 8vw;justify-content:space-between;position:relative}.app-auth .app-brand{font-size:23px}.app-auth .app-logo{width:40px;height:40px;border-radius:12px}.auth-message{margin:70px 0}.auth-mark{width:80px;height:80px;border-radius:22px;background:var(--ui-red);color:white;display:grid;place-items:center;box-shadow:0 15px 35px #ed263529}.auth-mark .ui-icon{width:43px;height:43px}.app-auth .auth-story h1{font-size:clamp(34px,3.5vw,52px);letter-spacing:-1.6px;margin:28px 0 22px;line-height:1.12}.app-auth .auth-story p{color:#9b7e80;font-size:16px;line-height:1.8}.app-auth .auth-story>small{color:#b19c9d;font-size:12px}.app-auth .auth-form{max-width:430px;padding:40px}.app-auth .auth-form .eyebrow{font-size:10px;letter-spacing:1.8px}.app-auth .auth-form h1{font-size:30px;letter-spacing:-1px;margin:10px 0 12px}.app-auth .auth-form>p.muted{font-size:14px;margin-bottom:35px}.app-auth .auth-form label{font-size:12px;color:#626b7a;font-weight:500;margin-top:19px;margin-bottom:8px}.app-auth .auth-form input:not([type=checkbox]){height:50px;border-color:#e2e5eb;border-radius:12px;padding:12px 15px;font-size:16px;background:#fcfcfd}.app-auth .auth-form .password-field input{padding-right:48px}.app-auth .auth-form>.primary{border-radius:12px;min-height:50px;font-size:14px}.app-auth .auth-form .remember-me{font-size:13px;margin-top:13px}.app-auth .auth-form .password-field #auth-password-toggle{right:8px}
#toast{background:#303744;border-radius:12px;font-size:13px;max-width:min(520px,92%);box-shadow:0 8px 25px #20242d20}
@media(min-width:851px) and (max-width:1150px){.app-shell.compact-shell{grid-template-columns:175px minmax(0,1fr)}.app-shell.compact-shell .sidebar{padding:25px 10px}.app-shell.compact-shell .brand{font-size:15px;gap:6px}.app-shell .app-logo{width:30px;height:30px}.app-shell.compact-shell.sales-workspace{--register-width:310px}.app-shell.compact-shell .work{padding-left:18px}.app-shell.compact-shell.sales-workspace .work{padding-right:calc(var(--register-width) + 18px)}.app-shell.compact-shell.sales-workspace .cart{padding:25px 16px}.app-shell.compact-shell .products{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:10px}.app-shell.compact-shell .product img{height:115px}.app-shell.compact-shell .app-scan span{display:none}}
@media(max-width:850px){
  .app-shell.compact-shell{display:block;min-height:100dvh}.app-shell.compact-shell>.sidebar{display:none}
  .app-shell.compact-shell .work,.app-shell.compact-shell.sales-workspace .work{padding:0 16px calc(94px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto}
  .app-shell.compact-shell .topbar.app-header{min-height:80px;margin:0 -16px 2px;padding:16px 17px 13px;background:var(--ui-bg);gap:8px}
  .app-shell .app-header h1{font-size:23px;letter-spacing:-.65px}.app-overline{font-size:8px;letter-spacing:1.1px;margin-bottom:4px}.app-mobile-mark{display:grid;place-items:center;width:37px;height:37px;background:var(--ui-red);color:white;border-radius:12px}.app-mobile-mark>.ui-icon{width:24px;height:24px}.app-header-actions{gap:9px}
  .app-header-menu{display:none!important}.app-shell.compact-shell .app-header .status:not(.offline){font-size:10px}.app-shell.compact-shell .app-header .ui-icon-button{width:40px;height:40px;min-height:40px;border-radius:12px}
  .app-shell.compact-shell .heading{margin-top:10px;margin-bottom:16px;gap:8px}.app-shell.compact-shell .heading h1{font-size:19px}.app-shell.compact-shell .heading p{font-size:12px}
  .app-shell.compact-shell input,.app-shell.compact-shell select,.app-shell.compact-shell textarea{font-size:16px;min-height:46px}
  .app-shell.compact-shell .searchbar{gap:8px;margin:0}
  .app-shell.compact-shell :is(#scan,#simple-stock-search){height:48px;font-size:15px;border-radius:13px;padding:13px 14px}
  .app-shell.compact-shell .searchbar .app-scan{min-width:49px;max-width:none;min-height:48px;width:49px;padding:11px;border-radius:13px}.app-scan span{display:none}.app-scan .ui-icon{width:25px;height:25px}
  .app-shell.compact-shell.sales-workspace .split{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.app-shell.compact-shell.sales-workspace .split>section{display:contents}
  .app-shell.compact-shell.sales-workspace .searchbar{grid-row:1}.app-shell.compact-shell.sales-workspace .cart{grid-row:2}
  .app-shell.compact-shell.sales-workspace .app-filters{grid-row:3;margin:2px -16px 0;padding:0 16px;max-width:calc(100% + 32px);width:calc(100% + 32px)}
  .app-shell.compact-shell.sales-workspace .app-list-caption{grid-row:4;margin:0 0 -1px}.app-shell.compact-shell .app-list-caption h2{font-size:15px}.app-list-caption>span{font-size:11px}
  .app-shell.compact-shell .app-categories{gap:6px;padding-bottom:1px}.app-shell.compact-shell .app-categories button{min-height:42px;font-size:12px;padding:9px 15px}
  .app-shell.compact-shell.sales-workspace .products{grid-row:5;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .app-shell.compact-shell .product{border-radius:16px}.app-shell.compact-shell .product img,.app-shell.compact-shell .product .no-photo{height:123px;padding:15px 22px 6px}
  .app-shell.compact-shell .product-body{padding:9px 12px 13px}.app-shell.compact-shell .product strong{font-size:12px;min-height:34px;margin-bottom:6px}.app-shell.compact-shell .product .price{font-size:20px}.app-shell.compact-shell .product .badge{font-size:10px}.app-shell.compact-shell .product-barcode{font-size:9px!important;margin-top:9px;letter-spacing:.15px}
  .product-add-mark{width:30px;height:30px;bottom:35px;right:12px;border-radius:10px}
  .app-shell.compact-shell.sales-workspace .cart{position:static;inset:auto;max-height:none;height:auto;width:100%;padding:13px 14px 0;border:1px solid var(--ui-line);border-radius:15px;box-shadow:0 2px 6px #20242d02;z-index:auto;scroll-margin-top:12px}
  .app-shell.compact-shell .register-heading{border:0;margin:0;padding:0 0 11px;min-height:31px}.register-label{gap:8px;font-size:14px;letter-spacing:-.2px}.register-label .ui-icon{width:19px;height:19px}.register-label>span{display:flex;align-items:center;gap:7px}.app-shell .register-label small{display:inline;font-size:10px;color:#9aa2af;font-weight:400;letter-spacing:0}.register-desktop-badge{display:none}.register-mobile-total{display:block;font-size:19px;letter-spacing:-.6px;line-height:1}
  .app-shell.compact-shell.sales-workspace .cart:not(.has-items) .cart-items{min-height:0}.app-shell.compact-shell .cart-items .empty{padding:0 0 12px;border:0;font-size:11px;display:block;text-align:left;color:#9ba3b0;margin:0}.cart-items .empty .ui-icon{display:none}
  .app-shell.compact-shell.sales-workspace .cart-items{flex:none;max-height:170px;min-height:0;overflow:auto}
  .app-shell.compact-shell .cart .checkout-item{gap:9px;padding:9px 0;border-top:1px solid #f0f1f4;border-bottom:0;min-height:69px}
  .app-shell .checkout-thumb{width:34px;height:41px}.app-shell .checkout-item-copy>strong{font-size:11px;line-height:1.4;padding-right:0;max-width:180px}.app-shell .checkout-item-copy>small:first-of-type{display:none}.app-shell .checkout-item>strong{font-size:12px;margin-right:30px}
  .app-shell.compact-shell .checkout-item .qty{margin-top:6px;border-radius:7px}.app-shell.compact-shell .checkout-item .qty button{width:40px;min-height:40px;height:40px;font-size:19px}.app-shell .qty b{width:29px;font-size:12px}
  .app-shell.compact-shell .checkout-item .remove-item{top:15px;right:-3px;width:40px;min-height:40px;height:40px;font-size:23px}
  .app-shell.compact-shell .register-payment{display:none;max-height:none;overflow:visible;padding:0 0 15px}
  .app-shell.compact-shell .payment-open .register-payment{display:block}
  .app-shell.compact-shell .mobile-checkout-toggle{display:flex!important;align-items:center;justify-content:space-between;background:#fff2f3;color:#d91e2d;border:0;border-radius:9px;min-height:44px;padding:11px 12px;margin:8px 0 12px;width:100%;font-size:12px;font-weight:650}
  .app-shell .mobile-checkout-toggle .ui-icon{width:17px;height:17px}.app-shell .payment-open .mobile-checkout-toggle .ui-icon{transform:rotate(-90deg)}
  .app-shell .cart:not(.has-items) .mobile-checkout-toggle{display:none!important}.app-shell.compact-shell .cart-total{margin:4px 0 18px;padding-top:14px;font-size:12px}.app-shell.compact-shell .cart-total strong{font-size:24px}
  .app-shell.compact-shell .student-inline input{font-size:16px}.app-shell.compact-shell .student-inline{margin-bottom:16px}.app-shell.compact-shell .student-inline-results button{min-height:48px}
  .app-shell.compact-shell .payment-methods button{min-height:60px;font-size:11px}.app-shell.compact-shell .pay-grid .primary{min-height:51px;font-size:14px;margin-top:14px}.app-shell .cart-extra summary{min-height:40px;padding:12px;font-size:11px}
  .app-shell.compact-shell .mobile-nav{display:flex!important;position:fixed;bottom:0;left:0;right:0;z-index:40;min-height:70px;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:#fffffff5;border-top:1px solid #eaedf2;box-shadow:0 -4px 22px #20242d04;backdrop-filter:blur(16px);gap:4px}
  .app-shell.compact-shell .mobile-nav .app-nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:1;min-width:0;min-height:52px;padding:5px;border:0;background:transparent;color:#929aaa;font-size:10px;font-weight:550;border-radius:12px}.mobile-nav .app-nav-link .ui-icon{width:22px;height:22px}.app-shell.compact-shell .mobile-nav .app-nav-link.active{background:#fff0f1;color:#df1f2e;font-weight:650}
  .keyboard-open .mobile-nav{visibility:hidden}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom));font-size:12px;padding:12px 16px}.keyboard-open #toast{bottom:12px}
  .app-shell.compact-shell .stock-metrics{gap:7px;margin-bottom:14px}.app-shell .stock-metrics>div{padding:13px 10px;border-radius:12px}.app-shell .stock-metrics small{font-size:10px;line-height:1.5}.app-shell .stock-metrics strong{font-size:18px;letter-spacing:-.4px;margin-top:8px;line-height:1.3}
  .app-shell.compact-shell .stock-buy{padding:15px}.app-shell .stock-buy>.row{display:block}.app-shell .stock-buy h2{font-size:15px;margin-bottom:13px}.app-shell .stock-buy .row .row{display:flex;gap:7px}.app-shell .stock-buy input[type=date]{flex:1;min-width:0;width:120px;font-size:13px;min-height:42px;padding:8px}.app-shell .stock-buy .row button{min-height:42px;font-size:12px;padding:8px 11px}.app-shell .stock-needs-list{max-height:180px}.app-shell .stock-needs-list>.row{gap:12px;font-size:12px;align-items:flex-start;padding:12px 0}.app-shell .stock-needs-list>.row>span{flex:1;min-width:0}.app-shell .stock-needs-list strong{text-align:right;font-size:12px}.app-shell .stock-needs-list small{font-size:10px;margin-top:3px}.app-shell .stock-method{font-size:10px;line-height:1.6}.app-shell .stock-method summary{padding:7px 0;font-size:11px}
  .app-shell .stock-search{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 13px}.app-shell .stock-search>input{width:100%}.app-shell .stock-search label{font-size:12px;min-height:40px;display:flex;align-items:center;gap:7px}.app-shell .stock-search input[type=checkbox]{min-height:18px;width:18px;height:18px;margin:0;accent-color:var(--ui-red)}
  .app-shell.compact-shell .stock-table{max-height:none;overflow:visible;border:0;background:transparent;padding:0;box-shadow:none}.app-shell .stock-table table,.app-shell .stock-table tbody{display:block;background:transparent}.app-shell .stock-table thead{display:none}.app-shell .stock-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--ui-line);border-radius:13px;background:#fff;padding:14px;margin-bottom:10px;gap:13px 7px}.app-shell .stock-table td{display:block;border:0;padding:0;font-size:14px}.app-shell .stock-table td:first-child{grid-column:1/-1}.app-shell .stock-table td:first-child strong{font-size:13px;line-height:1.4}.app-shell .stock-table td:first-child .thumb{width:36px;height:40px}.app-shell .stock-table td:nth-child(n+2):nth-child(-n+4)::before{content:attr(data-label);display:block;color:#929ba9;font-size:10px;margin-bottom:5px}.app-shell .stock-table td:nth-child(5){grid-column:1/3;display:flex;align-items:center}.app-shell .stock-table td:last-child{text-align:right}.app-shell .stock-table td:last-child button{min-height:40px;font-size:11px;padding:8px 11px;background:#f7f8fa;border:0}.app-shell .stock-table .badge{font-size:10px;padding:5px 7px;border-radius:5px}.app-shell .stock-table td[colspan]{grid-column:1/-1;padding:10px;font-size:12px}
  .app-shell .student-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.app-shell .student-card{padding:16px 13px;min-width:0}.app-shell .student-card strong{font-size:13px;line-height:1.4;overflow-wrap:anywhere}.app-shell .student-card b{font-size:21px}.app-shell .student-card p{font-size:10px}
  .app-shell .receive-meta input,.app-shell .receive-meta select,.app-shell .receive-fields input{font-size:16px;padding:10px;min-width:0}.app-shell .receive-upload{padding:16px}.app-shell .receive-upload form{min-width:0}.app-shell .receive-upload input[type=file]{max-width:100%;font-size:12px}.app-shell .receive-doc{font-size:13px;line-height:1.5}
  .app-shell .catalog-toolbar input,.app-shell .catalog-toolbar select{font-size:16px}.app-shell .table-wrap{max-width:100%;overscroll-behavior-inline:contain}.app-shell .kanban{grid-template-columns:1fr}.app-shell .grid2,.app-shell .grid3{grid-template-columns:1fr}
  #app-menu{position:fixed;inset:auto 0 0;margin:0;border-radius:22px 22px 0 0;width:100%;max-width:100%;height:92dvh;max-height:92dvh;padding:22px 21px calc(25px + env(safe-area-inset-bottom));overflow:auto}#app-menu .app-nav-link{min-height:48px;font-size:14px}#app-menu .app-menu-header{margin-bottom:17px}
  dialog:not(#app-menu){padding:20px;width:calc(100% - 24px);max-height:calc(100dvh - 32px);border-radius:18px}dialog input,dialog select,dialog textarea{font-size:16px}dialog .form-grid{min-width:0}
  .app-auth{display:flex;flex-direction:column;min-height:100dvh;background:var(--ui-bg)}.app-auth .auth-story{display:block;padding:35px 27px 14px;background:transparent}.app-auth .auth-story .app-brand{font-size:22px}.app-auth .auth-message,.app-auth .auth-story>small{display:none}.app-auth .auth-form{padding:25px 27px 40px;max-width:460px;margin:auto;width:100%;align-self:center}.app-auth .auth-form h1{font-size:32px;margin-top:12px}.app-auth .auth-form>p.muted{margin-bottom:29px}.app-auth .auth-form label{font-size:13px}.app-auth .auth-form input:not([type=checkbox]){background:#fff;height:52px}.app-auth .auth-form>.primary{min-height:52px;font-size:15px}
  .app-shell.in-native-app .app-header{min-height:69px}.app-shell.in-native-app .app-overline{display:none}.app-shell.in-native-app .app-mobile-mark{display:none}
}
@media(max-width:360px){.app-shell.compact-shell .work,.app-shell.compact-shell.sales-workspace .work{padding-left:12px;padding-right:12px}.app-shell.compact-shell .topbar.app-header{margin-left:-12px;margin-right:-12px;padding-left:13px;padding-right:13px}.app-shell .app-header .status:not(.offline){display:none!important}.app-shell.compact-shell .product img{height:105px;padding-left:18px;padding-right:18px}.app-shell.compact-shell .product strong{font-size:11px}.app-shell .stock-metrics strong{font-size:16px}.app-shell .stock-buy .row .row{flex-wrap:wrap}.app-shell .stock-buy input[type=date]{font-size:12px}.app-shell .checkout-item-copy>strong{max-width:136px}}
@media(max-width:360px){.app-shell.compact-shell.sales-workspace .app-filters{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;max-width:calc(100% + 24px);width:calc(100% + 24px)}}
.app-shell .heading.title-in-header{justify-content:flex-end}
@media(max-width:850px){.app-shell.compact-shell :is(#scan,#simple-stock-search){font-size:16px}.app-shell.compact-shell .app-categories button{min-height:44px}.app-shell .heading.title-in-header{margin-top:0;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Keep checkout within the sales workspace, including partial page updates. */
.app-shell:not([data-workspace-page="pos"]) #cart{display:none!important}
.app-shell #product-grid .product .price{color:var(--ui-red,#e51c32)!important}
.app-shell .heading h1[hidden]{display:none!important}
.app-profile[role="button"]:focus-visible{outline:2px solid var(--ui-red);outline-offset:4px;border-radius:10px}

.staff-sale-detail>summary{display:flex;flex-wrap:wrap;align-items:center;gap:12px;cursor:pointer;min-height:48px;padding:8px}
.staff-sale-detail>summary b{margin-left:auto;color:var(--ui-red,#e51c32)}
.staff-sale-detail .sale-detail-label{font-size:12px;color:var(--ui-muted,#667085)}
.staff-sale-detail .sale-detail-label::after{content:' +'}
.staff-sale-detail[open] .sale-detail-label::after{content:' −'}
.staff-sale-body{padding:4px 8px 16px;border-top:1px solid var(--ui-line,#eee)}

.app-advanced-menu{grid-column:1/-1;border-top:1px solid #e7e9ef;padding-top:16px}.app-advanced-menu>summary{cursor:pointer;font-weight:650;padding:10px 0;color:#505765}.app-advanced-menu[open]{display:block}.app-advanced-menu .app-menu-group{margin-top:18px}.ops-task{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #eceef3}.ops-task:last-child{border-bottom:0}.ops-task p{margin:5px 0;font-size:12px;color:#7d8491}.ops-task small{font-size:12px;color:#7d8491}.ops-task button{flex-shrink:0}.ops-task>div{min-width:0}@media(max-width:600px){.ops-task{align-items:flex-start;gap:10px}.ops-task button{font-size:12px}}

/* Staff workspace: shared alignment and restrained visual hierarchy. */
.app-shell.compact-shell #content,.app-shell.compact-shell .topbar.app-header{width:100%;max-width:none;margin-inline:0;box-sizing:border-box}
.app-shell.compact-shell .app-header{padding-inline:0}
.app-shell.compact-shell .app-header h1{font-size:24px;letter-spacing:-.6px}
.app-shell.compact-shell #content>.heading h1{display:none}
.app-shell.compact-shell #content>.heading{margin:8px 0 20px;align-items:center}
.app-shell.compact-shell #content>.heading p{margin:0;font-size:13px}
.app-shell.compact-shell .panel{padding:22px;border-radius:16px;border-color:#e5e8ee;box-shadow:none}
.app-shell.compact-shell .student-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.app-shell.compact-shell .student-card{padding:18px;text-align:left;background:#fff;border:1px solid #e5e8ee;border-radius:13px}
.app-shell.compact-shell .student-card strong{font-size:15px;font-weight:600;margin:10px 0}
.app-shell.compact-shell .student-card b{font-size:23px;font-weight:650;color:#475569}
.app-shell.compact-shell .student-card .badge{background:#f1f4f8;color:#64748b;border-radius:6px;font-size:11px}
.app-shell.compact-shell .primary{box-shadow:none}
.staff-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:4px 0 22px}
.staff-summary-card{min-width:0;background:#fff;border:1px solid #e5e8ee;border-radius:16px;padding:18px}
.staff-summary-card header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.staff-summary-card h2{display:flex;align-items:center;gap:7px;font-size:14px;margin:0;font-weight:650;color:#334155}
.staff-summary-card h2 span{background:#f1f4f8;color:#64748b;border-radius:7px;padding:3px 7px;font-size:11px}
.app-shell.compact-shell .staff-summary-card header button{border:0;background:transparent;color:#64748b;font-size:11px;padding:4px;min-height:32px;white-space:nowrap}
.app-shell.compact-shell .staff-summary-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:11px 0;border:0;border-bottom:1px solid #f0f2f5;border-radius:0;background:transparent}
.staff-summary-row:last-child{border-bottom:0}.staff-summary-row>span{min-width:0}.staff-summary-row strong{display:block;font-size:13px;font-weight:550;overflow-wrap:anywhere}.staff-summary-row small{display:block;color:#8792a2;font-size:11px;margin-top:4px}.staff-summary-row b{font-size:13px;color:#b66c42;white-space:nowrap}.staff-summary-row em{font-style:normal;font-size:11px;padding:5px 8px;background:#edf5f3;color:#4f7a6d;border-radius:6px;white-space:nowrap}.staff-summary-empty{font-size:12px;color:#8792a2;padding:12px 0;margin:0}
@media(max-width:1100px){.staff-overview{grid-template-columns:1fr}}
@media(max-width:850px){.app-shell.compact-shell .app-header h1{font-size:19px}.app-shell.compact-shell .panel{padding:16px}.staff-overview{gap:12px;margin-top:12px}.staff-summary-card{padding:15px}.app-shell.compact-shell .student-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.app-shell.compact-shell .student-card{padding:14px}.app-shell.compact-shell .student-card strong{font-size:13px}}

.staff-overview{grid-template-columns:minmax(0,1fr)}

/* Consistent staff controls, including the durable POS checkout. */
.app-shell.compact-shell{--ui-line:#e5e9ef;--ui-muted:#8290a2;--ui-ink:#263445}
.app-shell.compact-shell button::before{display:none!important}
.app-shell.compact-shell button{font-weight:550;line-height:1.35;box-shadow:none;transition:background .15s,border-color .15s}
.app-shell.compact-shell button:disabled{opacity:1;color:#98a2b1;background:#f3f5f8;border-color:#e7ebf0;cursor:not-allowed;box-shadow:none}
.app-shell.compact-shell button:not(:disabled):not(.primary):not(.app-nav-link):hover{background:#f3f6fa;border-color:#d8e0e9}
.app-shell.compact-shell select{appearance:none;padding-right:38px;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23768294' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.app-shell.compact-shell input:not([type=checkbox]):not([type=radio]),.app-shell.compact-shell select,.app-shell.compact-shell textarea{border-color:#e0e6ee;background-color:#fff;color:#334155;border-radius:10px}
.app-shell.compact-shell label{font-size:12px;color:#637186;line-height:1.5;margin-bottom:7px}
.app-shell.compact-shell input[type=checkbox],.app-shell.compact-shell input[type=radio]{width:18px;height:18px;min-height:18px;padding:0;accent-color:#e44050;vertical-align:middle}
.app-shell.compact-shell details>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;min-height:44px;font-size:13px;font-weight:550;line-height:1.5;color:#536277}
.app-shell.compact-shell details>summary::-webkit-details-marker{display:none}
.app-shell.compact-shell details>summary::marker{content:''}
.app-shell.compact-shell details>summary::before{display:none!important}
.app-shell.compact-shell details>summary::after{content:'';display:block;flex:0 0 7px;width:7px;height:7px;border:solid #8a96a6;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:0 5px 4px auto;transition:transform .15s}
.app-shell.compact-shell details[open]>summary::after{transform:rotate(225deg);margin-bottom:0}
.app-shell.compact-shell .actions{gap:10px;align-items:center;margin-top:16px}
.app-shell.compact-shell .form-grid,.app-shell.compact-shell .grid2,.app-shell.compact-shell .grid3{gap:20px}
.app-shell.compact-shell .panel h2{font-size:16px;font-weight:650;line-height:1.5;margin:0 0 16px;color:#334155}
.app-shell.compact-shell .table-wrap th{background:#f7f9fb;color:#748196;font-size:11px;font-weight:600;padding:14px 16px}
.app-shell.compact-shell .table-wrap td{padding:16px;font-size:13px;line-height:1.55;border-color:#edf0f4}
.app-shell.compact-shell .notice{background:#fffaf0;border-color:#f1e7ce;color:#907444;border-radius:12px;line-height:1.7;font-size:12px}
.app-shell.compact-shell .quick-register .register-heading{display:flex;gap:10px;align-items:center;position:relative;flex-wrap:wrap;padding:0 0 20px;margin:0 0 16px}
.quick-register .register-label{font-size:20px;gap:9px;flex:1}
.quick-register .register-desktop-badge{font-size:11px;padding:5px 8px;white-space:nowrap}
.app-shell.compact-shell .quick-more{position:relative;margin:0;padding:0;border:0;flex:none}
.app-shell.compact-shell .quick-more>summary{min-height:36px;padding:7px 9px;border:1px solid #e5e9ef;border-radius:9px;background:#fff;font-size:11px;gap:8px;color:#64748b}
.quick-more .quick-menu{position:absolute;right:0;top:calc(100% + 8px);width:210px;padding:7px;background:#fff;border:1px solid #e5e9ef;border-radius:12px;box-shadow:0 10px 35px #26344518;z-index:50}
.app-shell.compact-shell .quick-menu button{width:100%;display:flex;text-align:left;align-items:center;padding:11px 12px;border:0;background:transparent;font-size:12px;border-radius:8px;margin:0}
.app-shell.compact-shell .quick-register .register-payment{display:block;padding:0;overflow:visible;max-height:none;margin-top:auto}
.pos-tools{border-top:1px solid #e9edf2;padding-top:20px}
.quick-total{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin:0 0 18px;padding:0;color:#778497;font-size:13px}
.quick-total strong{color:#273649;font-size:27px;letter-spacing:-.7px;line-height:1.2;white-space:nowrap}
.quick-payments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.app-shell.compact-shell .quick-payments button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:70px;margin:0;padding:12px 5px;border-radius:12px;border:1px solid #e2e7ee;background:#f8fafc;color:#596a80;font-size:12px}
.app-shell.compact-shell .quick-payments button.primary:not(:disabled){background:#e73547;border-color:#e73547;color:#fff}
.app-shell.compact-shell .quick-payments button:disabled{background:#f5f7fa;border-color:#edf0f4;color:#a1aab7}
.quick-payments .ui-icon{width:21px;height:21px;flex:none}.quick-payments>button:only-child{grid-column:1/-1}
.quick-register .swipe-content{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;background:#fff;z-index:1}
.quick-register .cart-line{position:relative;overflow:hidden;touch-action:pan-y}
.quick-register .swipe-delete{position:absolute;inset:0;display:flex;justify-content:flex-end;align-items:center;gap:8px;background:#fff0f1;color:#c94756;padding-right:20px;font-size:12px}
@media(max-width:850px){
 .app-shell.compact-shell .quick-register .register-heading{padding:12px 0;margin-bottom:8px}
 .app-shell.compact-shell .quick-register .register-payment{display:block;padding:0 0 16px}
 .app-shell.compact-shell .quick-register .cart-items{max-height:220px}
 .quick-register .register-mobile-total{display:none}.quick-register .register-desktop-badge{display:block}
 .quick-register .register-label{font-size:17px}.pos-tools{padding-top:14px}.quick-total{margin-bottom:12px}.quick-total strong{font-size:23px}
 .app-shell.compact-shell .quick-payments button{min-height:62px;font-size:12px}
 .app-shell.compact-shell .form-grid,.app-shell.compact-shell .grid2,.app-shell.compact-shell .grid3{gap:14px}
 .app-shell.compact-shell .table-wrap td{padding:12px;font-size:12px}
 .app-shell.compact-shell .stock-table td{padding:0}
 .app-shell.compact-shell .actions>button{min-height:44px}
}

.app-shell.compact-shell :is(#scan,#simple-stock-search),.app-shell.compact-shell #stock-search{padding-left:42px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238390a2' stroke-width='1.7'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");background-position:14px center;background-repeat:no-repeat}
.app-shell.compact-shell .quick-register .cart-line{background:#fff;overflow:visible;touch-action:auto}
.app-shell.compact-shell .quick-register .checkout-item{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:18px 24px 18px 0;border-bottom:1px solid #edf0f4}
.app-shell.compact-shell .quick-register .checkout-item>strong{margin:0;align-self:center;font-size:13px}
.app-shell.compact-shell .quick-register .checkout-item .remove-item{right:0;top:5px;width:25px;min-height:25px;height:25px;font-size:20px}
.app-shell.compact-shell .quick-register .checkout-item-copy>strong{font-size:12px;line-height:1.5;padding:0}
.app-shell.compact-shell .quick-register .checkout-thumb{width:44px;height:52px;object-fit:contain;background:#f8fafc}
.app-shell.compact-shell .stock-buy{margin-bottom:24px}
.stock-product-copy{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
.stock-product-photo,.stock-photo-empty{width:52px;height:58px;flex:0 0 52px;object-fit:contain;padding:5px;background:#f8fafc;border-radius:9px}
.stock-photo-empty{display:grid;place-items:center;font-size:9px;text-align:center;color:#94a0b1}
.stock-product-copy>span{line-height:1.5;overflow-wrap:anywhere}
.stock-row-actions{display:flex;gap:8px;flex-wrap:wrap}
.app-shell.compact-shell .stock-row-actions button{font-size:11px;min-height:38px;white-space:nowrap}
.app-shell.compact-shell [data-stock-archive]{color:#a76870;background:#fff;border-color:#eadde0}
.app-shell.compact-shell .metric{background:#fff;border:1px solid #e4e9f0;border-radius:15px;padding:22px;box-shadow:none;color:#64748b}
.app-shell.compact-shell .metric small{display:block;color:#8390a2;font-size:12px;margin-bottom:10px}
.app-shell.compact-shell .metric strong{display:block;font-size:26px;line-height:1.3;color:#334155;font-weight:650}
.app-shell.compact-shell #content>.grid3{margin-bottom:22px}
.app-shell.compact-shell #content>.notice{margin:0 0 24px}
.app-shell.compact-shell .panel form>label{display:block;margin-top:16px;margin-bottom:8px}
.app-shell.compact-shell .panel form>label:first-child{margin-top:0}
.app-shell.compact-shell .panel form>button{margin-top:18px}
.app-shell.compact-shell .panel>p.muted{font-size:12px;line-height:1.75;margin-top:16px}
.app-shell.compact-shell #content>.panel+.panel,.app-shell.compact-shell #content>.grid2+.panel{margin-top:24px}
@media(max-width:850px){.stock-product-photo,.stock-photo-empty{width:42px;height:48px;flex-basis:42px}.app-shell.compact-shell .stock-table td:last-child{grid-column:1/-1}.stock-row-actions{justify-content:flex-end}.app-shell.compact-shell .metric{padding:18px}.app-shell.compact-shell .metric strong{font-size:23px}.app-shell.compact-shell .quick-register .checkout-item{grid-template-columns:40px minmax(0,1fr) auto;gap:9px}.app-shell.compact-shell .quick-register .checkout-item>strong{font-size:12px}}

/* Quiet, consistent scrollbars for staff lists; touch scrolling is preserved. */
.app-shell :is(.stock-needs-list,.table-wrap,.cart-items,.student-inline-results,.app-categories,.sidebar nav,.register-payment),#app-menu{scrollbar-width:thin;scrollbar-color:#cbd2dc transparent}
.app-shell :is(.stock-needs-list,.table-wrap,.cart-items,.student-inline-results,.app-categories,.sidebar nav,.register-payment)::-webkit-scrollbar,#app-menu::-webkit-scrollbar{width:5px;height:5px}
.app-shell :is(.stock-needs-list,.table-wrap,.cart-items,.student-inline-results,.app-categories,.sidebar nav,.register-payment)::-webkit-scrollbar-track,#app-menu::-webkit-scrollbar-track{background:transparent}
.app-shell :is(.stock-needs-list,.table-wrap,.cart-items,.student-inline-results,.app-categories,.sidebar nav,.register-payment)::-webkit-scrollbar-thumb,#app-menu::-webkit-scrollbar-thumb{background:#cbd2dc;border-radius:10px}
.app-shell :is(.stock-needs-list,.table-wrap,.cart-items,.student-inline-results,.app-categories,.sidebar nav,.register-payment)::-webkit-scrollbar-thumb:hover,#app-menu::-webkit-scrollbar-thumb:hover{background:#aab5c4}
.app-shell :is(.stock-needs-list,.table-wrap,.cart-items,.student-inline-results,.app-categories,.sidebar nav,.register-payment)::-webkit-scrollbar-button,#app-menu::-webkit-scrollbar-button{display:none;width:0;height:0}
.app-shell :is(.stock-needs-list,.table-wrap,.cart-items,.student-inline-results,.app-categories,.sidebar nav,.register-payment)::-webkit-scrollbar-corner,#app-menu::-webkit-scrollbar-corner{background:transparent}

/* Grid spacing belongs to the container, never to individual sibling cards. */
.app-shell.compact-shell :is(.grid2,.grid3){align-items:stretch}
.app-shell.compact-shell :is(.grid2,.grid3)>.panel{margin-top:0;margin-bottom:0;min-width:0;box-sizing:border-box;align-self:stretch}

.app-shell.compact-shell .app-order-sound{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 11px;font-size:11px;white-space:nowrap;color:#718096;background:#fff;border:1px solid #e5e9ef}
.app-shell.compact-shell .app-order-sound[aria-pressed=true]{color:#3d7766;background:#edf6f2;border-color:#dcece5}.app-order-sound .ui-icon{width:18px;height:18px}
@media(max-width:850px){.app-shell.compact-shell .app-header-actions{flex-wrap:wrap;gap:6px}.app-shell.compact-shell .app-order-sound{min-height:40px;padding:8px;font-size:10px}}

/* Staff preparation board. */
.app-shell.compact-shell[data-workspace-page=orders] .kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:18px;margin-top:24px}
.app-shell.compact-shell[data-workspace-page=orders] .column{min-width:0;padding:14px;background:#f0f3f7;border:1px solid #e5eaf1;border-radius:16px}
.app-shell.compact-shell[data-workspace-page=orders] .column>.row{min-height:36px;margin:0 2px 14px;gap:10px}
.app-shell.compact-shell[data-workspace-page=orders] .column h2{font-size:15px;margin:0;font-weight:650;color:#43536a}
.app-shell.compact-shell[data-workspace-page=orders] .column>.row .badge{min-width:25px;padding:5px 8px;border-radius:8px;background:#fff;color:#728096;text-align:center;font-size:11px}
.app-shell.compact-shell[data-workspace-page=orders] .column:nth-child(2)>.row .badge{background:#fff5e7;color:#a67932}
.app-shell.compact-shell[data-workspace-page=orders] .column:nth-child(3)>.row .badge{background:#e7f4ee;color:#4e806b}
.app-shell.compact-shell[data-workspace-page=orders] .order-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.app-shell.compact-shell[data-workspace-page=orders] .order-grid>.muted{background:#ffffffa6;border:1px dashed #dce3ec;border-radius:12px;padding:26px 12px;text-align:center;font-size:12px;color:#93a0b2;margin:0}
.app-shell.compact-shell .staff-order-card{padding:17px;margin:0;min-width:0;border:1px solid #e2e8f0;border-radius:13px;background:#fff;box-shadow:0 3px 10px #22334b03}
.app-shell.compact-shell .staff-order-card.urgent{border-color:#edd7b5;background:#fff}
.staff-order-header{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:17px}
.staff-order-header small{display:block;font-size:10px;color:#8a96a7;margin-bottom:5px;font-weight:400}
.staff-pickup-code b{font-size:12px;letter-spacing:.7px;color:#536378;background:#f3f6f9;padding:5px 7px;border-radius:6px;display:inline-block}
.staff-order-time{text-align:right;min-width:0}.staff-order-time strong{font-size:11px;font-weight:550;color:#65758b;line-height:1.5;display:block}
.staff-order-student{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 16px}
.app-shell.compact-shell .staff-order-student h3{font-size:14px;font-weight:650;margin:0;color:#314158;line-height:1.5}
.staff-order-student>span{font-size:10px;color:#8490a1;background:#f5f7fa;padding:4px 6px;border-radius:5px}
.staff-order-lines{display:grid;gap:12px;max-height:220px;overflow:auto;scrollbar-width:thin;scrollbar-color:#cbd2dc transparent}
.staff-order-line{display:flex;align-items:center;gap:10px;min-width:0;padding:0 0 12px;border-bottom:1px solid #f0f2f6}
.staff-order-line img,.staff-order-placeholder{width:38px;height:46px;flex:0 0 38px;object-fit:contain;background:#f8fafc;border-radius:7px;padding:4px;box-sizing:border-box}
.staff-order-placeholder{display:grid;place-items:center;font-size:12px;color:#8c99aa}.staff-order-line>div{flex:1;min-width:0}
.staff-order-line strong{font-size:12px;font-weight:500;line-height:1.5;display:block;overflow-wrap:anywhere;color:#43536a}.staff-order-line small{font-size:10px;color:#8b97a7;display:block;margin-top:5px;line-height:1.5}.staff-order-line>b{font-size:11px;white-space:nowrap;color:#59697e}
.staff-order-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}.staff-order-total>span{font-size:10px;line-height:1.6;color:#8994a3}.staff-order-total>strong{font-size:19px;color:#304058;white-space:nowrap}
.staff-order-note{padding:11px;background:#fff9ed;border-radius:8px;font-size:12px;line-height:1.6;color:#886b3c;overflow-wrap:anywhere}.staff-order-note strong{display:block;font-size:10px;margin-bottom:4px}
.staff-order-urgent{font-size:10px;color:#ab7a36;margin:12px 0}
.app-shell.compact-shell .staff-order-card .actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:16px}
.app-shell.compact-shell .staff-order-card .actions button{min-height:42px;border-radius:9px;font-size:11px;padding:10px 12px;line-height:1.4}
.app-shell.compact-shell .staff-order-card .actions .danger{background:#fff;color:#a7767d;border-color:#ecdee2}
.staff-order-reference{display:block;font-size:9px;color:#a0a9b7;margin-top:13px;letter-spacing:.25px}
.app-shell.compact-shell[data-workspace-page=orders] #content>.subsection{margin-top:30px}
.app-shell.compact-shell[data-workspace-page=orders] #content>.subsection>.row{margin-bottom:16px;gap:14px;flex-wrap:wrap}
.app-shell.compact-shell[data-workspace-page=orders] #content>.subsection h2{font-size:16px;margin:0}
@media(min-width:851px) and (max-width:1200px){.app-shell.compact-shell[data-workspace-page=orders] .kanban{grid-template-columns:minmax(0,1fr)}.app-shell.compact-shell[data-workspace-page=orders] .order-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.app-shell.compact-shell[data-workspace-page=orders] .kanban{grid-template-columns:minmax(0,1fr);gap:18px}.app-shell.compact-shell .staff-order-card{padding:16px}.staff-order-line img{width:42px;height:50px;flex-basis:42px}.app-shell.compact-shell .staff-order-card .actions button{min-height:44px;font-size:12px}}

.staff-order-tabs{display:flex;gap:8px;overflow:auto;scrollbar-width:none;margin:10px 0 20px;padding:2px}
.app-shell.compact-shell .staff-order-tabs button{display:flex;align-items:center;gap:10px;white-space:nowrap;min-height:42px;padding:10px 16px;background:#fff;border:1px solid #e4e9f0;color:#788599;font-size:12px;border-radius:10px}
.staff-order-tabs button span{padding:2px 6px;border-radius:5px;background:#f2f5f8;font-size:10px}
.app-shell.compact-shell .staff-order-tabs button[aria-pressed=true]{background:#fff1f3;border-color:#f3d4da;color:#d53045}
.staff-order-list{display:grid;gap:12px}
.app-shell.compact-shell .staff-order-list .staff-order-card{display:grid;grid-template-columns:minmax(165px,.9fr) minmax(210px,1.5fr) minmax(150px,.8fr) 175px;grid-template-areas:"student lines total actions" "header lines reference actions" "note note note note" "urgent urgent urgent urgent";align-items:center;column-gap:24px;row-gap:0;padding:20px 22px}
.staff-order-list .staff-order-student{grid-area:student;margin:0 0 9px;gap:7px}
.staff-order-list .staff-order-header{grid-area:header;display:flex;justify-content:flex-start;align-items:center;gap:14px;margin:0}
.staff-order-list .staff-order-header small{display:none}.staff-order-list .staff-pickup-code b{font-size:10px;padding:4px 6px}.staff-order-list .staff-order-time{text-align:left}.staff-order-list .staff-order-time strong{font-size:10px}
.staff-order-list .staff-order-lines{grid-area:lines;max-height:160px;gap:10px}.staff-order-list .staff-order-line{border:0;padding:0}.staff-order-list .staff-order-line>b{display:none}
.staff-order-list .staff-order-total{grid-area:total;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:5px;margin:0}.staff-order-list .staff-order-total strong{font-size:20px}.staff-order-list .staff-order-total span{font-size:10px}
.app-shell.compact-shell .staff-order-list .actions{grid-area:actions;display:flex;flex-direction:column;align-items:stretch;gap:7px;margin:0}
.app-shell.compact-shell .staff-order-list .actions .primary{min-height:40px;font-size:11px;padding:9px 12px}
.app-shell.compact-shell .staff-order-list .actions .danger{align-self:flex-end;min-height:28px;padding:3px 8px;border:0;background:transparent;font-size:10px}
.staff-order-list .staff-order-reference{grid-area:reference;margin:7px 0 0;font-size:9px}.staff-order-list .staff-order-note{grid-area:note;margin:14px 0 0}.staff-order-list .staff-order-urgent{grid-area:urgent;margin:10px 0 0}
.staff-orders-empty{padding:32px;text-align:center;font-size:13px;color:#8b96a6;background:#fff;border:1px dashed #dfe5ed;border-radius:13px}
.staff-order-history{padding:15px 20px;background:#fff;border:1px solid #e4e9f0;border-radius:13px}.staff-order-history #order-history{margin-top:15px}
@media(max-width:1250px){.app-shell.compact-shell .staff-order-list .staff-order-card{grid-template-columns:minmax(160px,1fr) minmax(180px,1.2fr) 155px;grid-template-areas:"student lines actions" "header lines actions" "total reference reference" "note note note" "urgent urgent urgent";column-gap:18px}.staff-order-list .staff-order-total{flex-direction:row;align-items:center;margin-top:14px;gap:12px}.staff-order-list .staff-order-reference{margin-top:14px}}
@media(max-width:850px){.app-shell.compact-shell .staff-order-list .staff-order-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"student student" "header header" "lines lines" "total actions" "reference reference" "note note" "urgent urgent";padding:17px;gap:0 12px}.staff-order-list .staff-order-header{margin-bottom:16px}.staff-order-list .staff-order-lines{margin-bottom:16px}.staff-order-list .staff-order-total{flex-direction:column-reverse;align-items:flex-start;margin:0;gap:5px}.app-shell.compact-shell .staff-order-list .actions{max-width:160px}.staff-order-list .staff-order-reference{margin-top:10px}.staff-order-tabs{gap:6px}.app-shell.compact-shell .staff-order-tabs button{padding:9px 11px;font-size:11px}}

.app-shell.compact-shell .staff-order-list .staff-order-lines{max-height:none;overflow:visible}
.app-shell.compact-shell .staff-order-more{margin:0}
.app-shell.compact-shell .staff-order-more>summary{min-height:36px;padding:7px 10px;background:#f5f7fa;border-radius:8px;color:#6b7b90;font-size:11px;font-weight:500}
.staff-order-more .less-label{display:none}.staff-order-more[open] .less-label{display:inline}.staff-order-more[open] .more-label{display:none}
.staff-order-extra{display:grid;gap:12px;max-height:180px;overflow:auto;margin-top:12px;padding-right:5px;scrollbar-width:thin;scrollbar-color:#cbd2dc transparent}

.app-shell.compact-shell .staff-order-preview .staff-order-line strong{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.app-shell.compact-shell .staff-order-preview .staff-order-line small{max-height:30px;overflow:hidden}
.app-shell.compact-shell .staff-order-products-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:32px;padding:5px 0;border:0;background:transparent;color:#94a0b0;font-size:10px;text-align:left}
.staff-order-products-button span{color:#647b99;font-weight:550;white-space:nowrap}
.staff-products-dialog{min-width:0}.staff-products-dialog-heading{display:flex;flex-direction:column;gap:7px;margin:0 0 20px}.staff-products-dialog-heading strong{font-size:15px;color:#334155}.staff-products-dialog-heading small{font-size:12px;color:#8793a3}
.staff-products-dialog-list{display:grid;gap:15px;max-height:50dvh;overflow:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#cbd2dc transparent}.staff-products-dialog-list .staff-order-line{padding-bottom:15px}.staff-products-dialog-list .staff-order-line img{width:48px;height:58px;flex-basis:48px}.staff-products-dialog-list .staff-order-line strong{font-size:13px}
.staff-products-dialog-total{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;margin-top:16px;border-top:1px solid #e9edf2;font-size:12px;color:#8491a3}.staff-products-dialog-total>strong{font-size:22px;color:#334155}

.preparation-item{padding:12px;border:1px solid #e6eaf0;border-radius:11px;background:#fff;transition:background .18s,border-color .18s}.preparation-item.is-prepared{background:#eef8f1;border-color:#c9e4d2}.preparation-item .staff-order-line{padding:0 0 10px;border:0}.preparation-check{display:flex;align-items:center;gap:8px;font-size:12px;color:#698273;margin:0}.preparation-check input{width:18px;height:18px;min-height:18px;accent-color:#6aa47f;margin:0}.preparation-check b{margin-left:auto;font-size:11px;font-weight:500}.preparation-feedback{font-size:11px;line-height:1.6;color:#8a95a5;margin:10px 0 16px}#preparation-barcode{font-size:14px;width:100%;min-height:44px;box-sizing:border-box}

#preparation-products .preparation-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px}
#preparation-products .staff-order-line{margin:0;padding:0;border:0;min-width:0}
#preparation-products .staff-order-line>b{color:#e73547;font-size:15px;font-weight:650;margin-left:10px}
#preparation-products .preparation-check{display:grid;grid-template-columns:18px auto;gap:5px 7px;align-items:center;padding-left:12px;border-left:1px solid #e3e9e7;white-space:nowrap;color:#6b8274}
#preparation-products .preparation-check b{grid-column:2;margin:0;font-size:10px;color:#93a198}
#preparation-products .is-prepared .preparation-check{color:#40865a}
@media(max-width:480px){#preparation-products .preparation-item{padding:11px;gap:8px}#preparation-products .staff-order-line{gap:8px}#preparation-products .staff-order-line img{width:34px;height:42px;flex-basis:34px}#preparation-products .staff-order-line strong{font-size:11px}#preparation-products .staff-order-line>b{font-size:12px;margin-left:0}#preparation-products .preparation-check{padding-left:8px;font-size:11px}}

#preparation-products .preparation-ready-button{min-width:82px;min-height:42px;padding:10px 12px;border:1px solid #e0e7ed;border-radius:10px;background:#f5f7fa;color:#748296;font-size:12px;font-weight:550;white-space:nowrap;box-shadow:none}
#preparation-products .preparation-ready-button::before{display:none!important}
#preparation-products .preparation-ready-button[aria-pressed=true]{background:#ddefe3;border-color:#bcdcc8;color:#3e8058}
#preparation-products [data-preparation-count]{color:#6b8978;white-space:nowrap}
@media(max-width:480px){#preparation-products .preparation-ready-button{min-width:70px;min-height:42px;padding:9px;font-size:11px}}

.app-shell.compact-shell .app-category-strip{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:10px;align-items:center;min-width:0}
.app-shell.compact-shell .app-category-strip .app-categories{min-width:0;padding:2px 0;scrollbar-width:none!important;-ms-overflow-style:none}
.app-shell.compact-shell .app-category-strip .app-categories::-webkit-scrollbar{display:none!important;width:0;height:0}
.app-shell.compact-shell .app-category-arrow{display:grid;place-items:center;width:34px;height:34px;min-height:34px;max-height:34px;padding:0;border-radius:50%;border:1px solid #e3e8ef;background:#fff;color:#617286;box-shadow:0 2px 6px #20334b08}
.app-category-arrow .ui-icon{width:16px;height:16px}.app-category-prev .ui-icon{transform:rotate(180deg)}
.app-shell.compact-shell .app-category-arrow:disabled{background:#f6f8fa;color:#c5cdd8;border-color:#edf0f4;box-shadow:none}
@media(max-width:850px),(pointer:coarse){.app-shell.compact-shell .app-category-strip{display:block}.app-shell.compact-shell .app-category-arrow{display:none}.app-shell.compact-shell .app-category-strip .app-categories{overflow-x:auto;-webkit-overflow-scrolling:touch}}

.app-shell.compact-shell button.app-scan:not(:disabled):hover,.app-shell.compact-shell button.app-scan:not(:disabled):active{background:var(--ui-red);border-color:var(--ui-red);color:#fff}

/* Compact order cards with distinct identity, product and checkout sections. */
.app-shell.compact-shell .staff-order-list .staff-order-card{grid-template-columns:minmax(180px,.85fr) minmax(240px,1.5fr) minmax(210px,.85fr);grid-template-areas:none;align-items:stretch;gap:0;padding:0;overflow:hidden;border-color:#dde3eb}
.staff-order-identity{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:22px;min-width:0;background:#fafbfd}
.staff-order-list .staff-order-identity .staff-order-student{order:-1;margin:0}
.staff-order-list .staff-order-identity .staff-order-header{margin:0;flex-wrap:wrap;gap:8px 12px}
.staff-order-list .staff-order-identity .staff-order-urgent{margin:0;font-size:10px;line-height:1.5}
.app-shell.compact-shell .staff-order-list .staff-order-preview{grid-area:auto;margin:0;padding:22px;border-left:1px solid #e9edf3;border-right:1px solid #e9edf3;align-content:center;gap:14px;min-width:0}
.app-shell.compact-shell .staff-order-list .staff-order-products-button{width:fit-content;max-width:100%;justify-content:flex-start;flex-wrap:wrap;gap:6px 14px;min-height:36px;padding:8px 12px;border:1px solid #e1e6ee;border-radius:9px;background:#f8fafc;color:#788598;font-size:11px;line-height:1.5}
.staff-order-products-button span{color:#415773}
.staff-order-checkout{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:20px 22px;min-width:0}
.staff-order-list .staff-order-checkout .staff-order-total{margin:0;flex-direction:column-reverse;align-items:flex-start;gap:4px}
.staff-order-list .staff-order-checkout .staff-order-total strong{font-size:23px}
.app-shell.compact-shell .staff-order-list .staff-order-checkout .actions{display:grid;grid-template-columns:minmax(0,1fr) auto;max-width:none;gap:8px;align-items:center}
.app-shell.compact-shell .staff-order-list .staff-order-checkout .actions .danger{align-self:stretch;padding:8px 10px;border:1px solid #e6e9ef;border-radius:9px;background:#fff;color:#94717a;min-height:40px}
.staff-order-list .staff-order-checkout .staff-order-reference{margin:0;font-size:9px;color:#929cac}
.staff-order-list .staff-order-card>.staff-order-note{grid-area:auto;grid-column:1/-1;margin:0;padding:12px 22px;border-top:1px solid #e9edf3;background:#fafbfd;font-size:12px}
@media(max-width:1150px){
.app-shell.compact-shell .staff-order-list .staff-order-card{grid-template-columns:minmax(170px,.8fr) minmax(0,1.2fr)}
.app-shell.compact-shell .staff-order-list .staff-order-preview{border-right:0}
.staff-order-checkout{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-top:1px solid #e9edf3;padding:14px 20px;gap:7px 18px}
.staff-order-list .staff-order-checkout .staff-order-total{grid-area:auto;grid-row:1/3}
.app-shell.compact-shell .staff-order-list .staff-order-checkout .actions{grid-area:auto;grid-column:2;grid-row:1}
.staff-order-list .staff-order-checkout .staff-order-reference{grid-area:auto;grid-column:2;text-align:right}
}
@media(max-width:600px){
.app-shell.compact-shell .staff-order-list .staff-order-card{grid-template-columns:minmax(0,1fr)}
.staff-order-identity{padding:16px;gap:9px}
.app-shell.compact-shell .staff-order-list .staff-order-preview{padding:16px;border-left:0;border-top:1px solid #e9edf3;gap:10px}
.staff-order-checkout{padding:14px 16px;grid-template-columns:minmax(0,1fr);gap:12px}
.staff-order-list .staff-order-checkout .staff-order-total{grid-row:auto;flex-direction:row;align-items:center}
.staff-order-list .staff-order-checkout .staff-order-total strong{font-size:21px}
.app-shell.compact-shell .staff-order-list .staff-order-checkout .actions{grid-column:1;grid-row:auto}
.staff-order-list .staff-order-checkout .staff-order-reference{grid-column:1;text-align:left}
}

/* iOS yakınlaştırmasını tetikleyen küçük form yazılarını telefonda büyüt. */
@media(max-width:700px){
 input:not([type]),input[type="text"],input[type="search"],input[type="tel"],input[type="email"],input[type="url"],input[type="number"],input[type="password"],input[type="date"],input[type="time"],input[type="datetime-local"],textarea,select{font-size:16px!important}
}

/* Dedicated price-display launch below the management menu. */
.app-shell.compact-shell .sidebar .app-nav-link.app-price-nav{margin-top:8px;background:#fff4f5;border:1px solid #f0d1d5;color:#b82e3b;font-weight:700}
.app-shell.compact-shell .sidebar .app-nav-link.app-price-nav:hover{background:#ffecef;border-color:#e9b1b9;color:#9d1d2b}
.app-shell.compact-shell .sidebar .app-nav-link.app-price-nav:focus-visible{outline:3px solid #f5b5bc;outline-offset:2px}

/* Faster scanning of incoming and overdue orders. */
.app-shell.compact-shell .staff-order-student .staff-order-status{background:#eef2f8;color:#55647a;font-weight:700}
.app-shell.compact-shell .staff-order-tabs [data-staff-order-tab="late"]{border-color:#efd4d8;color:#9f4b56}
.app-shell.compact-shell .staff-order-tabs [data-staff-order-tab="late"][aria-pressed="true"]{background:#fff0f2;color:#b52e3b;border-color:#eaaeb7}
@media(min-width:1151px){.app-shell.compact-shell .staff-order-list .staff-order-identity{padding:15px 18px;gap:7px}.app-shell.compact-shell .staff-order-list .staff-order-preview{padding:14px 18px;gap:8px}.app-shell.compact-shell .staff-order-list .staff-order-checkout{padding:14px 18px;gap:8px}.app-shell.compact-shell .staff-order-list .staff-order-products-button{min-height:32px;padding:6px 10px}.app-shell.compact-shell .staff-order-list .actions button{min-height:36px;padding:7px 10px}}

/* Sales overview: separate orders by delivery time and school break. */
.staff-overview{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.staff-summary-due{border-color:#efc9cf;background:#fff8f9}
.staff-summary-due h2{color:#a62b39}
.staff-summary-due h2 span{background:#fce4e8;color:#a62b39}
.staff-summary-active{background:#fff}
.staff-slot-group{padding:9px 0;border-top:1px solid #edf0f3}
.staff-slot-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#334155}
.staff-slot-heading strong{font-size:12px;font-weight:750}
.staff-slot-heading span{font-size:11px;color:#64748b;white-space:nowrap}
.app-shell.compact-shell .staff-slot-more{border:0;background:transparent;color:#9c3845;font-size:11px;min-height:30px;padding:5px 0;text-align:left}
.app-shell.compact-shell .staff-summary-lunch{grid-column:1/-1;border:1px solid #e5e8ee;background:#fff;border-radius:12px;min-height:44px;padding:10px 16px;text-align:left;color:#334155;font-weight:650}
.staff-summary-lunch span{float:right;color:#64748b;font-weight:500}
@media(max-width:1100px){.staff-overview{grid-template-columns:minmax(0,1fr)}}

.staff-slot-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border:1px solid #efd4d8;background:#fff7f8;border-radius:10px;font-size:12px;color:#7c3742}
.app-shell.compact-shell .staff-slot-filter button{border:0;background:#fff;color:#ad3341;min-height:30px;padding:5px 9px;font-size:11px}

/* Compact order queue and collapsible break summaries. */
.staff-overview{gap:10px;margin:4px 0 16px}
.staff-summary-card{padding:0;overflow:hidden}
.staff-summary-card summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:10px 15px;cursor:pointer}
.staff-summary-card summary::-webkit-details-marker{display:none}
.staff-summary-card summary:focus-visible{outline:3px solid #eaaeb7;outline-offset:-3px}
.staff-summary-card .staff-summary-list{padding:0 15px 10px}
.staff-summary-card[open] summary{border-bottom:1px solid #edf0f3}
.staff-summary-chevron{font-size:20px;line-height:1;color:#8c98a8;transition:transform .15s ease}
.staff-summary-card[open] .staff-summary-chevron{transform:rotate(180deg)}
.staff-order-list{gap:7px}
@media(min-width:1151px){
 .app-shell.compact-shell .staff-order-list .staff-order-card{grid-template-columns:minmax(190px,.85fr) minmax(250px,1.4fr) minmax(295px,1fr);min-height:108px}
 .app-shell.compact-shell .staff-order-list .staff-order-identity{padding:9px 13px;gap:5px}
 .app-shell.compact-shell .staff-order-list .staff-order-preview{padding:9px 13px;gap:5px}
 .app-shell.compact-shell .staff-order-list .staff-order-checkout{padding:9px 13px;gap:5px}
 .app-shell.compact-shell .staff-order-list .staff-order-line img,.app-shell.compact-shell .staff-order-list .staff-order-placeholder{width:30px;height:36px;flex-basis:30px}
 .app-shell.compact-shell .staff-order-list .staff-order-line small{margin-top:1px}
 .app-shell.compact-shell .staff-order-list .staff-order-products-button{min-height:27px;padding:3px 7px;font-size:10px}
 .app-shell.compact-shell .staff-order-list .staff-order-total strong{font-size:18px}
 .app-shell.compact-shell .staff-order-list .staff-order-checkout .actions{grid-template-columns:minmax(0,1fr) auto auto;gap:5px}
 .app-shell.compact-shell .staff-order-list .actions button,.app-shell.compact-shell .staff-order-list .staff-order-checkout .actions .danger{min-height:32px;padding:5px 8px;font-size:10px}
 .app-shell.compact-shell .staff-order-list .staff-order-checkout .staff-order-reference{display:none}
 .app-shell.compact-shell .staff-order-list .staff-order-card>.staff-order-note{padding:5px 13px;font-size:11px}
 .app-shell.compact-shell .staff-order-list .staff-order-card>.staff-order-note strong{display:inline;margin:0 7px 0 0}
}
@media(min-width:950px) and (max-width:1150px){
 .app-shell.compact-shell .staff-order-list .staff-order-card{grid-template-columns:minmax(170px,.85fr) minmax(220px,1.35fr) minmax(250px,1fr);min-height:112px}
 .app-shell.compact-shell .staff-order-list .staff-order-checkout{grid-column:auto;display:flex;flex-direction:column;border-top:0;border-left:1px solid #e9edf3;padding:10px 12px;gap:6px}
 .app-shell.compact-shell .staff-order-list .staff-order-checkout .staff-order-total{grid-row:auto}
 .app-shell.compact-shell .staff-order-list .staff-order-checkout .actions{grid-column:auto;grid-row:auto;grid-template-columns:minmax(0,1fr) auto auto;gap:5px}
 .app-shell.compact-shell .staff-order-list .staff-order-checkout .staff-order-reference{display:none}
 .app-shell.compact-shell .staff-order-list .staff-order-identity,.app-shell.compact-shell .staff-order-list .staff-order-preview{padding:10px 12px}
 .app-shell.compact-shell .staff-order-list .staff-order-card .actions button{min-height:32px;padding:5px 7px;font-size:10px}
}

.staff-summary-card summary::marker{content:""}
.app-shell.compact-shell .staff-summary-card>summary::after{display:none}

/* Simple incoming-order queue: one main action and a compact secondary menu. */
.app-shell.compact-shell .staff-order-list .staff-order-products-button{width:max-content;min-height:28px;padding:4px 9px;color:#52647c;font-size:11px}
.app-shell.compact-shell .staff-order-list .staff-order-checkout .actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px;margin:0}
.app-shell.compact-shell .staff-order-list .staff-order-checkout .actions>.primary{min-height:34px;padding:6px 10px;font-size:11px}
.staff-order-more{min-width:55px}
.app-shell.compact-shell .staff-order-more>summary{display:flex;align-items:center;justify-content:center;list-style:none;min-height:34px;padding:6px 9px;border:1px solid #e3e8ef;border-radius:8px;background:#fff;color:#59677a;font-size:11px;font-weight:650;cursor:pointer}
.app-shell.compact-shell .staff-order-more>summary::-webkit-details-marker{display:none}
.app-shell.compact-shell .staff-order-more>summary::marker{content:''}
.app-shell.compact-shell .staff-order-more>summary::after{display:none}
.app-shell.compact-shell .staff-order-more>summary:focus-visible{outline:3px solid #eaaeb7;outline-offset:2px}
.staff-order-more-menu{display:grid;gap:5px;margin-top:5px}
.app-shell.compact-shell .staff-order-list .staff-order-more-menu button{width:100%;min-height:32px;padding:5px 7px;font-size:10px}
.app-shell.compact-shell .staff-order-list .staff-order-checkout .staff-order-reference{display:none}
@media(max-width:600px){.app-shell.compact-shell .staff-order-list .staff-order-checkout .actions{width:100%;max-width:none}.app-shell.compact-shell .staff-order-list .staff-order-checkout .actions>.primary{min-height:40px;font-size:12px}.app-shell.compact-shell .staff-order-more>summary{min-height:40px;font-size:12px}}

/* Dense order rows: show the newest order without empty card columns. */
.app-shell.compact-shell .staff-order-list .staff-order-card.order-queue-row{display:grid;grid-template-columns:265px minmax(0,1fr) 110px minmax(245px,max-content);grid-template-areas:"person item price actions";align-items:center;column-gap:14px;row-gap:0;min-height:74px;padding:10px 14px;overflow:hidden;border:1px solid #e0e6ee;border-left:3px solid transparent;border-radius:10px;background:#fff;box-shadow:0 2px 7px #22334b08}
.app-shell.compact-shell .staff-order-list .staff-order-card.order-queue-row.queue-due{border-left-color:#dca46a}
.app-shell.compact-shell .staff-order-list .staff-order-card.order-queue-row.queue-late{border-left-color:#d6808a}
.order-queue-person{grid-area:person;min-width:0}
.order-queue-name{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.order-queue-name h3{margin:0;color:#24344e;font-size:14px;font-weight:750;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.order-queue-class,.order-queue-status{padding:2px 5px;border-radius:5px;background:#f3f6fa;color:#66778e;font-size:10px;line-height:1.3;white-space:nowrap}
.order-queue-status{background:#eef4fa;color:#46617c;font-weight:700}
.order-queue-meta{display:flex;flex-wrap:wrap;gap:4px 9px;margin-top:6px;color:#718096;font-size:11px;line-height:1.3}
.order-queue-meta em{font-style:normal;color:#bd5967;font-weight:700}
.order-queue-item{grid-area:item;min-width:0;display:flex;align-items:center;gap:5px 8px;flex-wrap:wrap;color:#34455e}
.order-queue-item strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650}
.order-queue-item small{color:#748399;font-size:11px;white-space:nowrap}
.app-shell.compact-shell .order-queue-item button{min-height:26px;padding:3px 7px;border:1px solid #dfe6ee;background:#f8fafc;color:#52647c;font-size:10px;border-radius:6px}
.order-queue-price{grid-area:price;display:flex;flex-direction:column;gap:3px;min-width:0}
.order-queue-price strong{color:#293951;font-size:16px;white-space:nowrap}
.order-queue-price small{color:#8290a2;font-size:9px;white-space:nowrap}
.order-queue-actions{grid-area:actions;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:5px;min-width:0}
.app-shell.compact-shell .order-queue-actions button{flex-shrink:0;min-height:33px;padding:6px 9px;border-radius:7px;font-size:11px;line-height:1.2;white-space:nowrap}
.app-shell.compact-shell .order-queue-actions .primary{min-width:84px;background:#ed2939;color:#fff;border:1px solid #ed2939;font-weight:700}
.app-shell.compact-shell .order-queue-actions .order-queue-secondary{background:#fff;color:#596a7e;border:1px solid #dce3ec}
.app-shell.compact-shell .order-queue-actions .order-queue-cancel{background:#fff;color:#af5261;border:1px solid #efd5da}
.order-queue-note{display:block;flex-basis:100%;align-self:stretch;width:100%;margin-top:2px;color:#a05d32;font-size:10px;line-height:1.35;overflow-wrap:anywhere}
.app-shell.compact-shell .order-queue-note strong{display:inline;margin-right:4px}
.order-queue-note strong{margin-right:5px}
@media(max-width:1150px){.app-shell.compact-shell .staff-order-list .staff-order-card.order-queue-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"person price" "item actions";row-gap:7px;min-height:0}.order-queue-actions{justify-content:flex-end}}
@media(max-width:600px){.app-shell.compact-shell .staff-order-list .staff-order-card.order-queue-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"person person" "item price" "actions actions";gap:8px 10px;padding:11px}.order-queue-item{align-items:flex-start;flex-direction:column;gap:3px}.order-queue-item strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.order-queue-price{text-align:right}.order-queue-actions{justify-content:flex-start}.app-shell.compact-shell .order-queue-actions .primary{flex:1;min-height:38px}.app-shell.compact-shell .order-queue-actions button{min-height:38px;font-size:11px}.order-queue-note{margin-top:2px}}

/* Two break filters and warnings on the affected order. */
.app-shell.compact-shell .staff-break-tabs{gap:7px;margin:7px 0 13px}
.app-shell.compact-shell .staff-break-tabs button{display:flex;align-items:center;gap:7px;min-height:40px;padding:7px 12px;color:#52627a}
.app-shell.compact-shell .staff-break-tabs [data-staff-order-tab="next"]{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label count" "time count";column-gap:8px;row-gap:1px;min-width:195px;text-align:left}
.staff-break-tabs [data-staff-order-tab="next"] strong{grid-area:label}
.staff-break-tabs [data-staff-order-tab="next"] small{grid-area:time}
.staff-break-tabs [data-staff-order-tab="next"] span{grid-area:count;align-self:center}
.staff-break-tabs button strong{font-size:12px;font-weight:700}
.staff-break-tabs button small{font-size:10px;color:#7c899b}
.app-shell.compact-shell .staff-break-tabs button[aria-pressed=true]{background:#fff0f2;border-color:#ebcbd0;color:#ae3040}
.order-queue-pending{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px;color:#a54a32;font-size:10px;font-weight:700;line-height:1.35}
.app-shell.compact-shell .order-queue-pending button,.app-shell.compact-shell .staff-unlinked-pending button{min-height:25px;padding:3px 7px;border:1px solid #efd4cb;border-radius:6px;background:#fff;color:#a54a32;font-size:10px}
.app-shell.compact-shell .order-queue-actions button:disabled{opacity:.5;cursor:not-allowed}
.staff-unlinked-pending{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;padding:9px 12px;border:1px solid #f1dfcc;border-radius:9px;background:#fff9f1;color:#865d31;font-size:11px}
@media(max-width:600px){.app-shell.compact-shell .staff-break-tabs button{min-height:42px;padding:6px 10px}.staff-break-tabs button strong{font-size:11px}.staff-break-tabs button small{font-size:9px}}

/* Orders-only color treatment; all order content and controls stay in place. */
#content:has(> .staff-order-list){padding:16px;border:1px solid #e8eaf2;border-radius:22px;background:radial-gradient(circle at 0 0,#ffe8e7 0,transparent 26%),radial-gradient(circle at 100% 18%,#eaf2ff 0,transparent 25%),#f8f9fc}
#content:has(> .staff-order-list) > .heading{position:relative;overflow:hidden;align-items:center;min-height:112px;margin-bottom:14px;padding:23px 27px;border:0;border-radius:18px;background:linear-gradient(112deg,#283b59 0%,#82304b 57%,#c72b41 100%);box-shadow:0 11px 27px #7e284329}
#content:has(> .staff-order-list) > .heading::after{content:"";position:absolute;right:-35px;top:-95px;width:260px;height:260px;border:1px solid #ffffff36;border-radius:50%;box-shadow:0 0 0 36px #ffffff0d,0 0 0 74px #ffffff09;pointer-events:none}
#content:has(> .staff-order-list) > .heading h1{position:relative;margin:0 0 5px;color:#fff;font-size:clamp(22px,2.3vw,30px);line-height:1.2}
#content:has(> .staff-order-list) > .heading .muted{position:relative;color:#ffe8ee;font-size:12px}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-break-tabs{margin:0 0 15px;gap:9px}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-break-tabs button{border:1px solid #dfe5f0;border-radius:11px;background:#fff;color:#344865;box-shadow:0 3px 10px #2b3c5b0b}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-break-tabs button[aria-pressed=true]{border-color:#c92d44;background:linear-gradient(135deg,#c3253d,#df4053);color:#fff;box-shadow:0 5px 13px #b8293a25}
#content:has(> .staff-order-list) .staff-break-tabs button[aria-pressed=true] small,#content:has(> .staff-order-list) .staff-break-tabs button[aria-pressed=true] span{color:#fff}
#content:has(> .staff-order-list) .staff-order-list{gap:9px}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-order-card.order-queue-row{border:1px solid #e4e8f0;border-left:4px solid #6e94ca;border-radius:12px;background:#fff;box-shadow:0 5px 15px #2936500d}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-order-card.order-queue-row.queue-due{border-color:#efd8ae;border-left-color:#e5a344;background:#fffbf4}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-order-card.order-queue-row.queue-late{border-color:#f0cfd5;border-left-color:#d34155;background:#fff7f8}
#content:has(> .staff-order-list) .order-queue-price strong{color:#af253e}
#content:has(> .staff-order-list) .order-queue-status{background:#eaf1fb;color:#375d91}
#content:has(> .staff-order-list) .queue-due .order-queue-status{background:#fff0d5;color:#865518}
#content:has(> .staff-order-list) .queue-late .order-queue-status{background:#fde6e9;color:#9c2c3d}
#content:has(> .staff-order-list) > .subsection{margin-top:17px;padding:18px 20px;border:1px solid #e1e7f1;border-radius:15px;background:#fff;box-shadow:0 5px 17px #2936500b}
#content:has(> .staff-order-list) > .subsection h2{color:#263a58}
#content:has(> .staff-order-list) > .staff-order-history summary{color:#ad2a42;font-weight:750}
@media(max-width:760px){#content:has(> .staff-order-list){padding:10px;border-radius:16px}#content:has(> .staff-order-list) > .heading{min-height:0;padding:18px 19px;border-radius:14px}#content:has(> .staff-order-list) > .subsection{padding:13px}}

/* Sales-only color treatment; register geometry and interactions are unchanged. */
.app-shell[data-workspace-page="pos"] #content{background:radial-gradient(circle at 2% 0,#ffebeb 0,transparent 26%),radial-gradient(circle at 90% 15%,#eaf1ff 0,transparent 26%),#f8f9fc}
.app-shell[data-workspace-page="pos"] .searchbar{padding:12px;border:1px solid #ebdfe4;border-radius:15px;background:linear-gradient(110deg,#fff7f7,#f5f8ff);box-shadow:0 5px 16px #2936500b}
.app-shell[data-workspace-page="pos"] .searchbar input{border-color:#e8ccd2;background:#fff}
.app-shell[data-workspace-page="pos"] .searchbar input:focus{border-color:#c72b43;box-shadow:0 0 0 3px #c72b4320;outline:none}
.app-shell[data-workspace-page="pos"] .app-categories button.active{border-color:#bc2941;background:linear-gradient(135deg,#ad233b,#d1394d);box-shadow:0 4px 11px #b82b3d26}
.app-shell[data-workspace-page="pos"] .product{border-color:#e4e7ef;box-shadow:0 5px 15px #2936500a}
.app-shell[data-workspace-page="pos"] .product:hover{border-color:#d86878;box-shadow:0 8px 20px #9e344322}
.app-shell[data-workspace-page="pos"] .product-selected{border-color:#c52c43;box-shadow:0 0 0 2px #c52c4326}
.app-shell[data-workspace-page="pos"] .cart{border-left-color:#edd5dc;background:linear-gradient(180deg,#fff4f5 0,#fff 155px);box-shadow:-8px 0 24px #3d344015}
.app-shell[data-workspace-page="pos"] .register-heading{border-bottom-color:#edcbd2}
@media(max-width:850px){.app-shell[data-workspace-page="pos"] .searchbar{padding:9px}.app-shell[data-workspace-page="pos"] .cart{border-left:0;box-shadow:none}}

/* Products-only color treatment; table content and controls stay intact. */
.app-shell[data-workspace-page="products"] #content{padding:16px;border:1px solid #e8eaf2;border-radius:22px;background:radial-gradient(circle at 0 0,#e8f2ff 0,transparent 27%),radial-gradient(circle at 100% 10%,#ffe9e9 0,transparent 28%),#f8f9fc}
.app-shell[data-workspace-page="products"] #content > .heading{position:relative;overflow:hidden;align-items:center;min-height:112px;margin:0 0 16px;padding:22px 27px;border-radius:18px;background:linear-gradient(112deg,#273b59 0%,#425e8c 46%,#b82a43 100%);box-shadow:0 11px 27px #29365029}
.app-shell[data-workspace-page="products"] #content > .heading::after{content:"";position:absolute;right:-50px;top:-95px;width:250px;height:250px;border:1px solid #ffffff39;border-radius:50%;box-shadow:0 0 0 39px #ffffff0d,0 0 0 80px #ffffff08;pointer-events:none}
.app-shell[data-workspace-page="products"] #content > .heading h1{position:relative;color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell[data-workspace-page="products"] #content > .heading .muted{position:relative;color:#eaf0ff}
.app-shell[data-workspace-page="products"] #content > .heading .primary{position:relative;z-index:1;border-color:#fff;background:#fff;color:#a52640;font-weight:750}
.app-shell[data-workspace-page="products"] #content > .panel{border-color:#dfe5ef;border-radius:16px;background:#fff;box-shadow:0 7px 22px #2936500f}
.app-shell[data-workspace-page="products"] #content table th{background:#eaf0f9;color:#304968;font-weight:750}
.app-shell[data-workspace-page="products"] #content table tbody tr:nth-child(even){background:#fafbfe}
.app-shell[data-workspace-page="products"] #content table tbody tr:hover{background:#fff5f6}
.app-shell[data-workspace-page="products"] #content table td strong{color:#a92740}
@media(max-width:760px){.app-shell[data-workspace-page="products"] #content{padding:10px;border-radius:16px}.app-shell[data-workspace-page="products"] #content > .heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* Students-only color treatment; account values and actions stay intact. */
.app-shell[data-workspace-page="students"] #content{padding:16px;border:1px solid #e8eaf2;border-radius:22px;background:radial-gradient(circle at 4% 0,#ffe9e8 0,transparent 26%),radial-gradient(circle at 97% 25%,#e8f1ff 0,transparent 28%),#f8f9fc}
.app-shell[data-workspace-page="students"] #content > .heading{position:relative;overflow:hidden;align-items:center;min-height:112px;margin:0 0 16px;padding:22px 27px;border-radius:18px;background:linear-gradient(112deg,#273b59 0%,#7a3651 53%,#c82c43 100%);box-shadow:0 11px 27px #6732492b}
.app-shell[data-workspace-page="students"] #content > .heading::after{content:"";position:absolute;right:-50px;top:-95px;width:250px;height:250px;border:1px solid #ffffff39;border-radius:50%;box-shadow:0 0 0 39px #ffffff0d,0 0 0 80px #ffffff08;pointer-events:none}
.app-shell[data-workspace-page="students"] #content > .heading h1{position:relative;color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell[data-workspace-page="students"] #content > .heading .muted{position:relative;color:#ffe8ef}
.app-shell[data-workspace-page="students"] #content > .heading .primary{position:relative;z-index:1;border-color:#fff;background:#fff;color:#a52640;font-weight:750}
.app-shell[data-workspace-page="students"] #content > .panel{border-color:#e0e6ef;background:#fff;box-shadow:0 7px 22px #2936500f}
.app-shell[data-workspace-page="students"] #student-search{border-color:#d7dfeb;background:#fff}
.app-shell[data-workspace-page="students"] #student-search:focus{border-color:#c82c43;box-shadow:0 0 0 3px #c82c4320;outline:none}
.app-shell[data-workspace-page="students"] .student-card{border:1px solid #dde7f4;background:linear-gradient(145deg,#fff,#f4f8ff);box-shadow:0 4px 12px #2936500c}
.app-shell[data-workspace-page="students"] .student-card:nth-child(even){border-color:#f0dce2;background:linear-gradient(145deg,#fff,#fff5f6)}
.app-shell[data-workspace-page="students"] .student-card:hover{border-color:#c82c43;box-shadow:0 8px 20px #9e344320}
.app-shell[data-workspace-page="students"] .student-card b{color:#b02740}
@media(max-width:760px){.app-shell[data-workspace-page="students"] #content{padding:10px;border-radius:16px}.app-shell[data-workspace-page="students"] #content > .heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* History-only palette; dates, sales and correction actions remain unchanged. */
.app-shell[data-workspace-page="history"] #content:has(#sales-report-body){padding:16px;border:1px solid #e7eaf2;border-radius:22px;background:radial-gradient(circle at 0 0,#e9f1ff 0,transparent 27%),radial-gradient(circle at 100% 16%,#ffe9e9 0,transparent 28%),#f8f9fc}
.app-shell[data-workspace-page="history"] #content:has(#sales-report-body) > .heading{position:relative;overflow:hidden;min-height:105px;margin:0 0 15px;padding:25px 28px;border-radius:18px;background:linear-gradient(110deg,#273b59,#5c4778 55%,#ba2c45);box-shadow:0 11px 27px #29365026}
.app-shell[data-workspace-page="history"] #content:has(#sales-report-body) > .heading::after{content:"";position:absolute;right:-50px;top:-98px;width:250px;height:250px;border:1px solid #ffffff39;border-radius:50%;box-shadow:0 0 0 39px #ffffff0d,0 0 0 80px #ffffff08;pointer-events:none}
.app-shell[data-workspace-page="history"] #content:has(#sales-report-body) > .heading h1{position:relative;color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell[data-workspace-page="history"] .sales-day-controls{padding:12px;border:1px solid #e1e6f0;border-radius:14px;background:#fff;box-shadow:0 5px 15px #2936500c}
.app-shell[data-workspace-page="history"] .sales-summary{border:1px solid #e4e8f1;border-radius:16px;background:linear-gradient(115deg,#fff5ed,#fff 48%,#f0f5ff);box-shadow:0 7px 20px #2936500e}
.app-shell[data-workspace-page="history"] .sales-revenue strong{color:#b12740}
.app-shell[data-workspace-page="history"] .sale-history-card{border-color:#e0e6f0;border-radius:13px;background:#fff;box-shadow:0 4px 13px #2936500a}
.app-shell[data-workspace-page="history"] .sale-history-card.sale-reversed{border-color:#ebd4da;background:#fff7f8}
.app-shell[data-workspace-page="history"] .sales-days{border-color:#e1e6ef;border-radius:13px;background:#fff}
@media(max-width:760px){.app-shell[data-workspace-page="history"] #content:has(#sales-report-body){padding:10px;border-radius:16px}.app-shell[data-workspace-page="history"] #content:has(#sales-report-body) > .heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* Receiving home palette; invoice review and approval fields keep their layout. */
.app-shell[data-workspace-page="receiving"] #content:has(> .receive-upload){padding:16px;border:1px solid #e7eaf2;border-radius:22px;background:radial-gradient(circle at 0 0,#fff0de 0,transparent 29%),radial-gradient(circle at 100% 12%,#e8f1ff 0,transparent 27%),#f8f9fc}
.app-shell[data-workspace-page="receiving"] #content:has(> .receive-upload) > .heading{position:relative;overflow:hidden;min-height:105px;margin:0 0 15px;padding:25px 28px;border-radius:18px;background:linear-gradient(110deg,#273b59,#9c5544 55%,#d47a35);box-shadow:0 11px 27px #744a3326}
.app-shell[data-workspace-page="receiving"] #content:has(> .receive-upload) > .heading::after{content:"";position:absolute;right:-50px;top:-98px;width:250px;height:250px;border:1px solid #ffffff39;border-radius:50%;box-shadow:0 0 0 39px #ffffff0d,0 0 0 80px #ffffff08;pointer-events:none}
.app-shell[data-workspace-page="receiving"] #content:has(> .receive-upload) > .heading h1{position:relative;color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell[data-workspace-page="receiving"] #content:has(> .receive-upload) > .heading .muted{position:relative;color:#fff0e3}
.app-shell[data-workspace-page="receiving"] #content > .receive-upload{border-color:#ebd9c8;border-radius:16px;background:linear-gradient(135deg,#fffaf4,#fff);box-shadow:0 7px 20px #55423010}
.app-shell[data-workspace-page="receiving"] #content:has(> .receive-upload) .receive-doc{border-color:#e1e7f0;background:#fff;box-shadow:0 4px 12px #2936500b}
.app-shell[data-workspace-page="receiving"] #content:has(> .receive-upload) .receive-doc:hover{border-color:#d98b4d;box-shadow:0 7px 18px #744a331c}
@media(max-width:760px){.app-shell[data-workspace-page="receiving"] #content:has(> .receive-upload){padding:10px;border-radius:16px}.app-shell[data-workspace-page="receiving"] #content:has(> .receive-upload) > .heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* Catalog-only palette; search and selection behavior is unchanged. */
.app-shell[data-workspace-page="catalog"] #content:has(#catalog-results){padding:16px;border:1px solid #e7eaf2;border-radius:22px;background:radial-gradient(circle at 0 0,#e9f2ff 0,transparent 27%),radial-gradient(circle at 100% 18%,#ffe9e9 0,transparent 28%),#f8f9fc}
.app-shell[data-workspace-page="catalog"] #content:has(#catalog-results) > .heading{position:relative;overflow:hidden;min-height:105px;margin:0 0 15px;padding:25px 28px;border-radius:18px;background:linear-gradient(110deg,#273b59,#446890 55%,#b82c45);box-shadow:0 11px 27px #29365026}
.app-shell[data-workspace-page="catalog"] #content:has(#catalog-results) > .heading::after{content:"";position:absolute;right:-50px;top:-98px;width:250px;height:250px;border:1px solid #ffffff39;border-radius:50%;box-shadow:0 0 0 39px #ffffff0d,0 0 0 80px #ffffff08;pointer-events:none}
.app-shell[data-workspace-page="catalog"] #content:has(#catalog-results) > .heading h1{position:relative;color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell[data-workspace-page="catalog"] #content:has(#catalog-results) > .heading .muted{position:relative;color:#e9f1ff}
.app-shell[data-workspace-page="catalog"] .catalog-toolbar{padding:12px;border:1px solid #dde5f0;border-radius:14px;background:#fff;box-shadow:0 5px 15px #2936500b}
.app-shell[data-workspace-page="catalog"] .catalog-card{border-color:#dfe6f0;background:#fff;box-shadow:0 4px 13px #2936500a}
.app-shell[data-workspace-page="catalog"] .catalog-card:hover{border-color:#c84257;box-shadow:0 8px 20px #9e344320}
.app-shell[data-workspace-page="catalog"] .catalog-count{color:#365170;font-weight:700}
@media(max-width:760px){.app-shell[data-workspace-page="catalog"] #content:has(#catalog-results){padding:10px;border-radius:16px}.app-shell[data-workspace-page="catalog"] #content:has(#catalog-results) > .heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* Family accounts palette; balances and payment forms are unchanged. */
.app-shell[data-workspace-page="family"] #content:has(> .meal-grid){padding:16px;border:1px solid #e7eaf2;border-radius:22px;background:radial-gradient(circle at 0 0,#e9f2ff 0,transparent 28%),radial-gradient(circle at 100% 17%,#ffebe8 0,transparent 27%),#f8f9fc}
.app-shell[data-workspace-page="family"] #content:has(> .meal-grid) > .heading{position:relative;overflow:hidden;min-height:105px;margin:0 0 15px;padding:25px 28px;border-radius:18px;background:linear-gradient(110deg,#273b59,#4d658e 48%,#bf354c);box-shadow:0 11px 27px #29365026}
.app-shell[data-workspace-page="family"] #content:has(> .meal-grid) > .heading::after{content:"";position:absolute;right:-50px;top:-98px;width:250px;height:250px;border:1px solid #ffffff39;border-radius:50%;box-shadow:0 0 0 39px #ffffff0d,0 0 0 80px #ffffff08;pointer-events:none}
.app-shell[data-workspace-page="family"] #content:has(> .meal-grid) > .heading h1{position:relative;color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell[data-workspace-page="family"] #content:has(> .meal-grid) > .heading .muted{position:relative;color:#eaf0ff}
.app-shell[data-workspace-page="family"] .meal-grid > .panel{border-color:#dce6f3;background:linear-gradient(145deg,#fff,#f6f9ff);box-shadow:0 6px 18px #2936500c}
.app-shell[data-workspace-page="family"] .meal-grid > .panel:nth-child(even){border-color:#f0dbe0;background:linear-gradient(145deg,#fff,#fff6f7)}
.app-shell[data-workspace-page="family"] #content:has(> .meal-grid) > .table-wrap{border-color:#e1e6ef;background:#fff;box-shadow:0 6px 18px #2936500c}
@media(max-width:760px){.app-shell[data-workspace-page="family"] #content:has(> .meal-grid){padding:10px;border-radius:16px}.app-shell[data-workspace-page="family"] #content:has(> .meal-grid) > .heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* Settings-only palette; forms, validation and values stay intact. */
.app-shell[data-workspace-page="settings"] #content:has(#settings-form){padding:16px;border:1px solid #e7eaf2;border-radius:22px;background:radial-gradient(circle at 0 0,#e9f1ff 0,transparent 27%),radial-gradient(circle at 100% 18%,#ffe9e9 0,transparent 28%),#f8f9fc}
.app-shell[data-workspace-page="settings"] #content:has(#settings-form) > .heading{position:relative;overflow:hidden;min-height:105px;margin:0 0 15px;padding:25px 28px;border-radius:18px;background:linear-gradient(110deg,#273b59,#575d8b 52%,#bd344e);box-shadow:0 11px 27px #29365026}
.app-shell[data-workspace-page="settings"] #content:has(#settings-form) > .heading::after{content:"";position:absolute;right:-50px;top:-98px;width:250px;height:250px;border:1px solid #ffffff39;border-radius:50%;box-shadow:0 0 0 39px #ffffff0d,0 0 0 80px #ffffff08;pointer-events:none}
.app-shell[data-workspace-page="settings"] #content:has(#settings-form) > .heading h1{position:relative;color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell[data-workspace-page="settings"] #content:has(#settings-form) > .heading .muted{position:relative;color:#ecebff}
.app-shell[data-workspace-page="settings"] #content:has(#settings-form) .panel{border-color:#dfe5ef;background:#fff;box-shadow:0 6px 18px #2936500c}
.app-shell[data-workspace-page="settings"] #content:has(#settings-form) .panel h2{color:#34476b}
.app-shell[data-workspace-page="settings"] #content:has(#settings-form) input:focus,.app-shell[data-workspace-page="settings"] #content:has(#settings-form) select:focus{border-color:#bd344e;box-shadow:0 0 0 3px #bd344e20;outline:none}
@media(max-width:760px){.app-shell[data-workspace-page="settings"] #content:has(#settings-form){padding:10px;border-radius:16px}.app-shell[data-workspace-page="settings"] #content:has(#settings-form) > .heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* Management navigation palette; destinations and basket remain unchanged. */
.app-shell[data-workspace-page="management"] #content:has(> .management-layout) .management-main{padding:15px;border:1px solid #e7eaf2;border-radius:21px;background:radial-gradient(circle at 0 0,#e9f1ff 0,transparent 28%),radial-gradient(circle at 100% 18%,#ffe9e9 0,transparent 28%),#f8f9fc}
.app-shell[data-workspace-page="management"] .management-intro,.app-shell[data-workspace-page="management"] .management-section-heading{position:relative;overflow:hidden;min-height:100px;display:flex;align-items:center;margin:0 0 15px;padding:24px 27px;border-radius:17px;background:linear-gradient(112deg,#273b59,#674a75 54%,#c02d46);box-shadow:0 10px 25px #29365026}
.app-shell[data-workspace-page="management"] .management-intro::after,.app-shell[data-workspace-page="management"] .management-section-heading::after{content:"";position:absolute;right:-50px;top:-98px;width:250px;height:250px;border:1px solid #ffffff39;border-radius:50%;box-shadow:0 0 0 39px #ffffff0d,0 0 0 80px #ffffff08;pointer-events:none}
.app-shell[data-workspace-page="management"] .management-intro h1,.app-shell[data-workspace-page="management"] .management-section-heading h1{position:relative;color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell[data-workspace-page="management"] .management-section-heading .management-card-icon{position:relative;z-index:1;border:1px solid #ffffff55;background:#ffffff22;color:#fff}
.app-shell[data-workspace-page="management"] #content .management-card{border-color:#e0e6f1;background:linear-gradient(145deg,#fff,#f6f9ff);box-shadow:0 5px 15px #2936500d}
.app-shell[data-workspace-page="management"] #content .management-card:nth-child(even){border-color:#efdce1;background:linear-gradient(145deg,#fff,#fff6f7)}
.app-shell[data-workspace-page="management"] #content .management-link{border-color:#e0e6f1;background:#fff;box-shadow:0 4px 12px #2936500a}
@media(max-width:760px){.app-shell[data-workspace-page="management"] #content:has(> .management-layout) .management-main{padding:10px;border-radius:16px}.app-shell[data-workspace-page="management"] .management-intro,.app-shell[data-workspace-page="management"] .management-section-heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* Food and production pages: page-scoped color, existing controls and layout intact. */
.app-shell:is([data-workspace-page="today"],[data-workspace-page="recipes"],[data-workspace-page="ingredients"],[data-workspace-page="wizard"],[data-workspace-page="meals"],[data-workspace-page="food-admin"],[data-workspace-page="portal"],[data-workspace-page="supplier"],[data-workspace-page="sandwiches"]) #content > .heading{position:relative;overflow:hidden;align-items:center;min-height:105px;margin-bottom:16px;padding:24px 27px;border-radius:18px;background:linear-gradient(112deg,#273b59 0%,#745574 50%,#cf6545 100%);box-shadow:0 10px 25px #4e3c5728}
.app-shell:is([data-workspace-page="today"],[data-workspace-page="recipes"],[data-workspace-page="ingredients"],[data-workspace-page="wizard"],[data-workspace-page="meals"],[data-workspace-page="food-admin"],[data-workspace-page="portal"],[data-workspace-page="supplier"],[data-workspace-page="sandwiches"]) #content > .heading::after{content:"";position:absolute;right:-50px;top:-98px;width:250px;height:250px;border:1px solid #ffffff39;border-radius:50%;box-shadow:0 0 0 39px #ffffff0d,0 0 0 80px #ffffff08;pointer-events:none}
.app-shell:is([data-workspace-page="today"],[data-workspace-page="recipes"],[data-workspace-page="ingredients"],[data-workspace-page="wizard"],[data-workspace-page="meals"],[data-workspace-page="food-admin"],[data-workspace-page="portal"],[data-workspace-page="supplier"],[data-workspace-page="sandwiches"]) #content > .heading h1{position:relative;color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell:is([data-workspace-page="today"],[data-workspace-page="recipes"],[data-workspace-page="ingredients"],[data-workspace-page="wizard"],[data-workspace-page="meals"],[data-workspace-page="food-admin"],[data-workspace-page="portal"],[data-workspace-page="supplier"],[data-workspace-page="sandwiches"]) #content > .heading .muted{position:relative;color:#fff0e8}
.app-shell:is([data-workspace-page="today"],[data-workspace-page="recipes"],[data-workspace-page="ingredients"],[data-workspace-page="wizard"],[data-workspace-page="meals"],[data-workspace-page="food-admin"],[data-workspace-page="portal"],[data-workspace-page="supplier"],[data-workspace-page="sandwiches"]) #content > .heading button{position:relative;z-index:1}
.app-shell:is([data-workspace-page="today"],[data-workspace-page="recipes"],[data-workspace-page="ingredients"],[data-workspace-page="wizard"],[data-workspace-page="meals"],[data-workspace-page="food-admin"],[data-workspace-page="portal"],[data-workspace-page="supplier"],[data-workspace-page="sandwiches"]) #content > .grid3 > .metric{border-color:#e9dce0;background:linear-gradient(145deg,#fff,#fff4f1);box-shadow:0 5px 15px #4e3c570d}
@media(max-width:760px){.app-shell:is([data-workspace-page="today"],[data-workspace-page="recipes"],[data-workspace-page="ingredients"],[data-workspace-page="wizard"],[data-workspace-page="meals"],[data-workspace-page="food-admin"],[data-workspace-page="portal"],[data-workspace-page="supplier"],[data-workspace-page="sandwiches"]) #content > .heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* Stock and purchasing pages: page-scoped color, existing forms and tables intact. */
.app-shell:is([data-workspace-page="bread"],[data-workspace-page="business"],[data-workspace-page="content-manager"],[data-workspace-page="procurement"],[data-workspace-page="stock-count"],[data-workspace-page="pricing"],[data-workspace-page="inventory"]) #content > .heading{position:relative;overflow:hidden;align-items:center;min-height:105px;margin-bottom:16px;padding:24px 27px;border-radius:18px;background:linear-gradient(112deg,#273b59 0%,#506c83 48%,#c7753c 100%);box-shadow:0 10px 25px #3c536528}
.app-shell:is([data-workspace-page="bread"],[data-workspace-page="business"],[data-workspace-page="content-manager"],[data-workspace-page="procurement"],[data-workspace-page="stock-count"],[data-workspace-page="pricing"],[data-workspace-page="inventory"]) #content > .heading::after{content:"";position:absolute;right:-50px;top:-98px;width:250px;height:250px;border:1px solid #ffffff39;border-radius:50%;box-shadow:0 0 0 39px #ffffff0d,0 0 0 80px #ffffff08;pointer-events:none}
.app-shell:is([data-workspace-page="bread"],[data-workspace-page="business"],[data-workspace-page="content-manager"],[data-workspace-page="procurement"],[data-workspace-page="stock-count"],[data-workspace-page="pricing"],[data-workspace-page="inventory"]) #content > .heading h1{position:relative;color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell:is([data-workspace-page="bread"],[data-workspace-page="business"],[data-workspace-page="content-manager"],[data-workspace-page="procurement"],[data-workspace-page="stock-count"],[data-workspace-page="pricing"],[data-workspace-page="inventory"]) #content > .heading .muted{position:relative;color:#fff0e5}
.app-shell:is([data-workspace-page="bread"],[data-workspace-page="business"],[data-workspace-page="content-manager"],[data-workspace-page="procurement"],[data-workspace-page="stock-count"],[data-workspace-page="pricing"],[data-workspace-page="inventory"]) #content > .heading button{position:relative;z-index:1}
.app-shell:is([data-workspace-page="bread"],[data-workspace-page="business"],[data-workspace-page="content-manager"],[data-workspace-page="procurement"],[data-workspace-page="stock-count"],[data-workspace-page="pricing"],[data-workspace-page="inventory"]) #content > .grid3 > .metric{border-color:#e9dfd1;background:linear-gradient(145deg,#fff,#fff6ed);box-shadow:0 5px 15px #3c53650d}
@media(max-width:760px){.app-shell:is([data-workspace-page="bread"],[data-workspace-page="business"],[data-workspace-page="content-manager"],[data-workspace-page="procurement"],[data-workspace-page="stock-count"],[data-workspace-page="pricing"],[data-workspace-page="inventory"]) #content > .heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* Account and operations settings pages: page-scoped color, data and forms intact. */
.app-shell:is([data-workspace-page="accounts"],[data-workspace-page="notifications"],[data-workspace-page="operations-settings"]) #content > .heading{position:relative;overflow:hidden;align-items:center;min-height:105px;margin-bottom:16px;padding:24px 27px;border-radius:18px;background:linear-gradient(112deg,#273b59 0%,#625b8a 49%,#c23850 100%);box-shadow:0 10px 25px #473f6928}
.app-shell:is([data-workspace-page="accounts"],[data-workspace-page="notifications"],[data-workspace-page="operations-settings"]) #content > .heading::after{content:"";position:absolute;right:-50px;top:-98px;width:250px;height:250px;border:1px solid #ffffff39;border-radius:50%;box-shadow:0 0 0 39px #ffffff0d,0 0 0 80px #ffffff08;pointer-events:none}
.app-shell:is([data-workspace-page="accounts"],[data-workspace-page="notifications"],[data-workspace-page="operations-settings"]) #content > .heading h1{position:relative;color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell:is([data-workspace-page="accounts"],[data-workspace-page="notifications"],[data-workspace-page="operations-settings"]) #content > .heading .muted{position:relative;color:#f1edff}
.app-shell:is([data-workspace-page="accounts"],[data-workspace-page="notifications"],[data-workspace-page="operations-settings"]) #content > .heading button{position:relative;z-index:1}
.app-shell[data-workspace-page="operations-settings"] #content .panel{border-color:#e1e4f0;background:#fff;box-shadow:0 5px 16px #473f690d}
.app-shell[data-workspace-page="accounts"] #content .co-admin > .co-card{border-color:#e1e4f0;box-shadow:0 5px 16px #473f690d}
@media(max-width:760px){.app-shell:is([data-workspace-page="accounts"],[data-workspace-page="notifications"],[data-workspace-page="operations-settings"]) #content > .heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* Invoice review and posted receipt share the receiving header without changing forms. */
.app-shell[data-workspace-page="receiving"] #content:has(#receive-edit-zone) > .heading,.app-shell[data-workspace-page="receiving"] #content:has(> .receive-actions) > .heading{position:relative;overflow:hidden;min-height:105px;margin-bottom:15px;padding:25px 28px;border-radius:18px;background:linear-gradient(110deg,#273b59,#9c5544 55%,#d47a35);box-shadow:0 11px 27px #744a3326}
.app-shell[data-workspace-page="receiving"] #content:has(#receive-edit-zone) > .heading h1,.app-shell[data-workspace-page="receiving"] #content:has(> .receive-actions) > .heading h1{color:#fff;font-size:clamp(22px,2.3vw,30px)}
.app-shell[data-workspace-page="receiving"] #content:has(#receive-edit-zone) > .heading .muted,.app-shell[data-workspace-page="receiving"] #content:has(> .receive-actions) > .heading .muted{color:#fff0e3}
@media(max-width:760px){.app-shell[data-workspace-page="receiving"] #content:has(#receive-edit-zone) > .heading,.app-shell[data-workspace-page="receiving"] #content:has(> .receive-actions) > .heading{min-height:0;padding:18px 19px;border-radius:14px}}

/* Visual review: calmer sales surface, compact order summary, readable counters. */
.app-shell[data-workspace-page="pos"] #content{background:#f7f8fb}
.app-shell[data-workspace-page="pos"] .searchbar{border-color:#dfe5ef;background:#fff}
#content:has(> .staff-order-list){border-color:#e5e9f1;border-radius:18px;background:#f7f8fb}
#content:has(> .staff-order-list) > .heading{display:flex;justify-content:flex-start;align-items:center;min-height:0;margin-bottom:14px;padding:13px 17px;border:1px solid #e1e6ef;border-left:4px solid #c52d43;border-radius:12px;background:#fff;box-shadow:0 4px 13px #2936500b;text-align:left}
#content:has(> .staff-order-list) > .heading::after{display:none}
#content:has(> .staff-order-list) > .heading h1{margin:0 12px 0 0;color:#273b59;font-size:17px;line-height:1.2}
#content:has(> .staff-order-list) > .heading .muted{margin:0;color:#34465f;font-size:13px;font-weight:700;text-align:left}
.app-shell.compact-shell #content:has(> .staff-order-list) > .heading.title-in-header{justify-content:flex-start}
#content:has(> .staff-order-list) > .heading > div{width:100%;text-align:left}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-break-tabs button[aria-pressed=true]{border-color:#263b58;background:#263b58;color:#fff;box-shadow:0 5px 13px #263b5826}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-break-tabs button span{display:inline-grid;place-items:center;min-width:22px;min-height:22px;padding:2px 6px;border-radius:6px;background:#eaf0f7;color:#273b59;font-size:11px;font-weight:800;line-height:1}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-break-tabs button[aria-pressed=true] span{background:#fff;color:#263b58}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-order-card.order-queue-row.queue-due{border-color:#e6e9ef;border-left-color:#dc9b3d;background:#fff}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-order-card.order-queue-row.queue-late{border-color:#e6e9ef;border-left-color:#d34155;background:#fff}
.app-shell[data-workspace-page="students"] #content > .enrollment-panel + .heading{margin-top:20px}
@media(max-width:760px){.app-shell[data-workspace-page="students"] #content > .enrollment-panel + .heading{margin-top:14px}#content:has(> .staff-order-list) > .heading{padding:11px 13px}}
@media(max-width:360px){
  .app-shell.compact-shell #content:has(> .staff-order-list) .staff-break-tabs{overflow:visible}
  .app-shell.compact-shell #content:has(> .staff-order-list) .staff-break-tabs [data-staff-order-tab="next"]{flex:1 1 0;min-width:0}
  .app-shell.compact-shell #content:has(> .staff-order-list) .staff-break-tabs [data-staff-order-tab="all"]{flex:none}
}

/* Give the open-order summary the same visual weight as other daily dashboards. */
#content:has(> .staff-order-list) > .heading{min-height:82px;padding:17px 22px;border:1px solid #a7374e;border-radius:16px;background:linear-gradient(110deg,#273b59 0%,#79364f 55%,#c62b43 100%);box-shadow:0 11px 26px #6a2a4130}
#content:has(> .staff-order-list) > .heading::after{display:block;right:-50px;top:-100px;width:245px;height:245px}
#content:has(> .staff-order-list) > .heading > div{position:relative;z-index:1}
#content:has(> .staff-order-list) > .heading .muted{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0;color:#fff;font-size:13px;text-align:left}
#content:has(> .staff-order-list) .order-overview-count{display:inline-flex;align-items:baseline;gap:7px;color:#fff;font-size:15px;font-weight:750}
#content:has(> .staff-order-list) .order-overview-count strong{color:#fff;font-size:28px;line-height:1;font-weight:800}
#content:has(> .staff-order-list) .order-overview-late{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid #ffe0ac;border-radius:999px;background:#fff0d7;color:#6d3d10;font-size:12px;font-weight:700}
#content:has(> .staff-order-list) .order-overview-late strong{color:#6d3d10}
#content:has(> .staff-order-list) .order-overview-auto{margin-left:auto;color:#ffe9ee;font-size:12px;font-weight:600}
@media(max-width:760px){
  #content:has(> .staff-order-list) > .heading{min-height:0;padding:15px 16px}
  #content:has(> .staff-order-list) .order-overview-count strong{font-size:25px}
  #content:has(> .staff-order-list) .order-overview-auto{width:100%;margin-left:0}
}
@media(max-width:760px){
  #content:has(> .staff-order-list) > .heading::after{right:-170px;top:-95px}
}

/* Incoming orders: visible stage counts and a clear preparation flow. */
.order-stage-summary{display:flex;flex-wrap:wrap;gap:7px;margin:-3px 0 14px}
.order-stage-summary span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #f3d5da;border-radius:8px;background:#fff4f5;color:#a6273b;font-size:11px;font-weight:700}
.order-stage-summary b{font-size:13px}
.order-stage-summary .stage-preparing{border-color:#f1dfbc;background:#fff8e9;color:#8a5b14}
.order-stage-summary .stage-ready{border-color:#cfe7d7;background:#eff9f2;color:#287344}
#content:has(> .staff-order-list) .order-queue-row.status-preparing .order-queue-status{background:#fff1d9;color:#84540f}
#content:has(> .staff-order-list) .order-queue-row.status-ready .order-queue-status{background:#e5f5ea;color:#256f40}
.app-shell.compact-shell #content:has(> .staff-order-list) .order-queue-actions .primary{min-width:113px}
.order-preparation-dialog .preparation-feedback{margin:0 0 15px;color:#53657e;font-size:12px}
.order-preparation-dialog .staff-products-dialog-heading{margin-bottom:13px}
.order-preparation-dialog .staff-products-dialog-list{gap:9px}
.order-preparation-dialog .preparation-item{border-color:#e0e8f1;background:#f9fbfe}
.order-preparation-dialog .preparation-item.is-prepared{border-color:#b8dec5;background:#eff9f2}
.order-preparation-dialog .preparation-ready-button{min-width:88px;min-height:36px;padding:7px 10px;border:1px solid #d1deec;border-radius:8px;background:#fff;color:#2d567f;font-size:11px;font-weight:750;cursor:pointer}
.order-preparation-dialog .preparation-ready-button:disabled{border-color:#c7e3d0;background:#e2f4e8;color:#287344;cursor:default}
.preparation-progress-track{height:8px;overflow:hidden;margin:0 0 17px;border-radius:999px;background:#e8edf4}
.preparation-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2b9b61,#76c67e);transition:width .2s}
.preparation-save-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;margin:8px 0;color:#66768b;font-size:11px}
.app-shell.compact-shell .preparation-save-row button:not([hidden]){min-height:30px;padding:4px 9px;border:1px solid #efc9c9;border-radius:7px;background:#fff7f7;color:#a22d3e;font-size:11px}
.order-preparation-dialog .actions{margin-top:13px}
@media(max-width:600px){.order-stage-summary{gap:5px}.order-stage-summary span{padding:5px 7px;font-size:10px}.order-preparation-dialog #preparation-products .preparation-item{grid-template-columns:minmax(0,1fr) auto;gap:6px}.order-preparation-dialog #preparation-products .staff-order-line>b{display:none}}

/* Preparation workspace: identity, deadline and quantities lead; payment stays in checkout. */
#modal:has(.order-preparation-dialog){max-width:840px;padding:28px;border-radius:22px;background:#fff}
#modal:has(.order-preparation-dialog) h2{margin:0 0 18px;color:#1e2d45;font-size:23px}
.order-preparation-dialog{color:#283b56}
.prep-hero{display:flex;align-items:stretch;justify-content:space-between;gap:20px;padding:20px 22px;border-radius:17px;background:linear-gradient(112deg,#243957,#61334e 58%,#c92e49);color:#fff;box-shadow:0 10px 24px #2a33502a}
.prep-hero-main,.prep-hero-time{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-width:0}
.prep-hero-kicker{color:#d9e4f2;font-size:10px;font-weight:800;letter-spacing:.12em}
.prep-hero-main>strong{font-size:21px;line-height:1.2;overflow-wrap:anywhere}
.prep-hero-class{padding:3px 8px;border:1px solid #ffffff50;border-radius:6px;background:#ffffff1a;font-size:11px;font-weight:700}
.prep-hero-time{align-items:flex-end;text-align:right}
.prep-hero-time>span{color:#ffedf0;font-size:11px}
.prep-hero-time>strong{font-size:14px;line-height:1.3;white-space:nowrap}
.prep-hero-time em{padding:4px 9px;border-radius:7px;background:#fff0d5;color:#7e4f13;font-size:10px;font-style:normal;font-weight:800}
.prep-hero-time em.prep-status-active{background:#e6f5ec;color:#276b3c}
.prep-note{display:flex;gap:10px;margin:13px 0 0;padding:10px 13px;border:1px solid #f1d7ac;border-radius:10px;background:#fff8eb;color:#704b18;font-size:12px;line-height:1.45}
.prep-note strong{flex:none}
.prep-progress-card{margin:18px 0 13px;padding:15px 17px 13px;border:1px solid #dfe7f0;border-radius:13px;background:#f6f9fd}
.prep-progress-copy{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.prep-progress-copy>span{color:#5b6d85;font-size:12px;font-weight:700}
.prep-progress-copy>strong{color:#213952;font-size:17px;white-space:nowrap}
.order-preparation-dialog .preparation-progress-track{height:9px;margin:0;background:#e4ebf3}
.order-preparation-dialog .preparation-feedback{margin:0 0 18px;padding:10px 13px;border:1px solid #dbe7f5;border-radius:9px;background:#f3f8ff;color:#426486;font-size:12px;line-height:1.5}
.order-preparation-dialog .preparation-feedback.is-error{border-color:#f3c9cf;background:#fff3f4;color:#a63243}
.prep-list-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:0 0 10px}
.prep-list-heading strong{font-size:14px;color:#263b57}
.prep-list-heading span{font-size:11px;color:#74859b}
.order-preparation-dialog #preparation-products{gap:9px;max-height:38dvh;padding:1px;scrollbar-gutter:stable}
.order-preparation-dialog #preparation-products .preparation-item{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:68px;padding:10px 13px;border:1px solid #dce5ef;border-radius:12px;background:#fff}
.order-preparation-dialog #preparation-products .preparation-item.is-prepared{border-color:#bde1ca;background:#f0f9f3}
.prep-item-media{display:grid;place-items:center;width:58px;height:58px;border-radius:9px;background:#f5f7fb;overflow:hidden}
.prep-item-media img{width:100%;height:100%;padding:4px;box-sizing:border-box;object-fit:contain}
.prep-item-media span{color:#8b9aaf;font-size:14px;font-weight:800}
.prep-item-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.prep-item-info strong{font-size:14px;line-height:1.3;color:#263b55;overflow-wrap:anywhere}
.prep-item-info small{color:#6d7f95;font-size:11px}
.prep-item-count{color:#7890a7;font-size:11px;font-weight:700}
.is-prepared .prep-item-count{color:#27794a}
.prep-item-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;white-space:nowrap}
.prep-item-quantity{color:#435a76;font-size:12px;font-weight:800}
.order-preparation-dialog #preparation-products .preparation-ready-button{min-width:92px;min-height:34px;border-color:#d1e0ed;background:#f0f7ff;color:#2e6089}
.order-preparation-dialog #preparation-products .preparation-ready-button:disabled{border-color:#bfe0cb;background:#e4f5ea;color:#297245}
.order-preparation-dialog .preparation-save-row{margin:11px 1px 0}
.order-preparation-dialog .prep-actions{position:sticky;bottom:-28px;display:flex;flex-wrap:wrap;gap:9px;margin:18px -1px -1px;padding:14px 1px 1px;border-top:1px solid #e8edf3;background:#fff;z-index:1}
.order-preparation-dialog .prep-actions button{min-height:45px;border-radius:9px;font-size:13px;font-weight:750}
.order-preparation-dialog .prep-actions .primary{min-width:210px}
@media(max-width:600px){#modal:has(.order-preparation-dialog){padding:19px;width:calc(100% - 24px);max-height:90dvh;border-radius:18px}#modal:has(.order-preparation-dialog) h2{font-size:20px;margin-bottom:14px}.prep-hero{gap:11px;padding:15px;border-radius:13px}.prep-hero-main>strong{font-size:17px}.prep-hero-time>strong{font-size:11px;white-space:normal}.prep-hero-time>span{font-size:10px}.prep-progress-card{margin:13px 0 10px;padding:12px}.prep-progress-copy>strong{font-size:14px}.order-preparation-dialog .preparation-feedback{font-size:11px;margin-bottom:14px}.order-preparation-dialog #preparation-products .preparation-item{grid-template-columns:42px minmax(0,1fr) auto;gap:8px;min-height:54px;padding:8px}.prep-item-media{width:42px;height:48px}.prep-item-info strong{font-size:12px}.prep-item-side{gap:4px}.prep-item-quantity{font-size:10px}.order-preparation-dialog #preparation-products .preparation-ready-button{min-width:70px;min-height:30px;padding:4px 6px;font-size:10px}.order-preparation-dialog .prep-actions{bottom:-19px}.order-preparation-dialog .prep-actions button{min-height:40px;font-size:12px}}
@media(max-width:370px){.prep-hero{flex-direction:column}.prep-hero-time{align-items:flex-start;text-align:left}.prep-hero-time>strong{white-space:nowrap}.order-preparation-dialog .prep-actions .primary{width:100%;min-width:0}.order-preparation-dialog #preparation-products .preparation-item{grid-template-columns:36px minmax(0,1fr) auto;gap:6px}.prep-item-media{width:36px;height:44px}.order-preparation-dialog #preparation-products .preparation-ready-button{min-width:64px}}
.order-preparation-dialog .preparation-progress-track span{transition:none}
@media(max-width:370px){.order-preparation-dialog .prep-hero{flex-direction:row}.order-preparation-dialog .prep-hero-time{align-items:flex-end;text-align:right}.order-preparation-dialog .prep-hero-time>strong{white-space:normal}.order-preparation-dialog:has(.prep-status-waiting) .preparation-feedback{display:none}.order-preparation-dialog #preparation-products{max-height:25dvh}}
@media(max-width:600px){.order-preparation-dialog #preparation-products{padding-bottom:42px}}

/* Preparation state determines the row color; timing stays a separate label. */
.order-queue-row.status-waiting{--order-stage-accent:#df3f53;--order-stage-tint:#fff4f5;--order-stage-border:#f3d5da;--order-stage-badge:#ffe7eb;--order-stage-ink:#a6273b}
.order-queue-row.status-preparing{--order-stage-accent:#d28a1d;--order-stage-tint:#fff9ef;--order-stage-border:#efdfc3;--order-stage-badge:#fff0d6;--order-stage-ink:#84530d}
.order-queue-row.status-ready{--order-stage-accent:#279464;--order-stage-tint:#f0faf5;--order-stage-border:#d1e9dc;--order-stage-badge:#dff4e8;--order-stage-ink:#20633f}
.app-shell.compact-shell #content:has(> .staff-order-list) .staff-order-card.order-queue-row:is(.status-waiting,.status-preparing,.status-ready){border-color:var(--order-stage-border);border-left-color:var(--order-stage-accent);background:linear-gradient(90deg,var(--order-stage-tint),#fff 38%)}
.app-shell.compact-shell #content:has(> .staff-order-list) .order-queue-row:is(.status-waiting,.status-preparing,.status-ready) .order-queue-status{display:inline-flex;align-items:center;gap:4px;background:var(--order-stage-badge);color:var(--order-stage-ink)}
.order-queue-row .order-queue-status::before{content:'';width:5px;height:5px;flex:none;border-radius:50%;background:currentColor}
.order-queue-row.queue-late .order-queue-meta em{padding:1px 5px;border-radius:4px;background:#fff0f2;color:#a72c43}
.order-queue-row.queue-due .order-queue-meta em{padding:1px 5px;border-radius:4px;background:#fff2dc;color:#865617}

/* Compact staff profile dialog; existing security and logout actions are retained. */
#modal:has(> .staff-profile-dialog){max-width:520px;padding:24px;border-radius:22px;background:#fff;color:#263b58}
#modal:has(> .staff-profile-dialog)>h2{margin:0 0 20px;padding-right:42px;color:#263b58;font-size:22px;line-height:1.3}
#modal:has(> .staff-profile-dialog)>.close{top:18px;right:18px}
.staff-profile-identity{position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;overflow:hidden;min-height:112px;margin:0 0 16px;padding:20px;border:1px solid #a7374e;border-radius:16px;background:linear-gradient(110deg,#273b59 0%,#79364f 55%,#c62b43 100%);color:#fff}
.staff-profile-identity::after{content:"";position:absolute;z-index:-1;right:-60px;top:-75px;width:180px;height:180px;border:1px solid #ffffff29;border-radius:50%;box-shadow:0 0 0 26px #ffffff0a;pointer-events:none}
.staff-profile-avatar{display:grid;place-items:center;flex:none;width:56px;height:56px;border:1px solid #ffffff57;border-radius:16px;background:#ffffff1f;color:#fff;font-size:25px;font-weight:800}
.staff-profile-copy{min-width:0}
.staff-profile-eyebrow{display:block;margin-bottom:5px;color:#ffe6ec;font-size:10px;font-weight:700;letter-spacing:1px}
.staff-profile-copy h3{margin:0 0 8px;color:#fff;font-size:23px;line-height:1.2;overflow-wrap:anywhere}
.staff-profile-role{display:inline-flex;padding:4px 8px;border:1px solid #ffffff40;border-radius:6px;background:#ffffff1a;color:#fff;font-size:11px;font-weight:600}
.staff-profile-actions{display:grid;gap:10px}
#modal .staff-profile-actions>button::before{display:none!important}
#modal .staff-profile-actions>button{display:grid;grid-template-columns:40px minmax(0,1fr) 14px;align-items:center;gap:12px;width:100%;min-height:76px;margin:0;padding:14px;border:1px solid #dce5ef;border-radius:12px;background:#f5f8fd;color:#2c4464;text-align:left}
#modal .staff-profile-actions>button:hover{border-color:#a9bbd1;background:#edf3fc}
.staff-profile-action-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid #d9e4f1;border-radius:10px;background:#fff;color:#355b88}
.staff-profile-action-icon svg{display:block;width:21px;height:21px}
.staff-profile-action-copy{min-width:0}
.staff-profile-action-copy strong{display:block;font-size:14px;font-weight:750;line-height:1.4}
.staff-profile-action-copy small{display:block;margin-top:3px;color:#62738b;font-size:11px;font-weight:400;line-height:1.5}
.staff-profile-chevron{color:#8294ac;font-size:23px;line-height:1}
#modal .staff-profile-actions>.staff-profile-logout{border-color:#f1cbd3;background:#fff5f7;color:#b5233c}
#modal .staff-profile-actions>.staff-profile-logout:hover{border-color:#dc8295;background:#ffebef}
.staff-profile-logout .staff-profile-action-icon{border-color:#f1cbd3;color:#b5233c}
.staff-profile-logout .staff-profile-action-copy small{color:#8a5865}
.staff-profile-logout .staff-profile-chevron{color:#b65c70}
#modal .staff-profile-actions>button:focus-visible{outline:3px solid #8caed7;outline-offset:2px}
@media(max-width:420px){
  #modal:has(> .staff-profile-dialog){padding:18px;width:calc(100% - 24px);border-radius:18px}
  .staff-profile-identity{gap:12px;padding:16px;min-height:104px}
  .staff-profile-avatar{width:48px;height:48px;font-size:22px}
  .staff-profile-copy h3{font-size:20px}
  .staff-profile-eyebrow{font-size:9px;letter-spacing:.7px}
  #modal .staff-profile-actions>button{grid-template-columns:36px minmax(0,1fr) 12px;gap:10px;padding:12px}
  .staff-profile-action-icon{width:36px;height:36px}
  .staff-profile-action-copy strong{font-size:13px}
}

/* Expo uses the website header and account menu. */
.app-shell.in-native-app .app-native-brand{display:grid;gap:4px;min-width:0}
.app-shell.in-native-app .app-native-brand .app-brand{font-size:20px;line-height:1.2;gap:8px}
.app-shell.in-native-app .app-native-brand .app-logo{width:32px;height:32px;flex:none;border-radius:10px}
.app-shell.in-native-app .app-native-brand .app-logo .ui-icon{width:21px;height:21px}
.app-shell.in-native-app .app-header .app-native-page{margin:0;font-size:12px;line-height:1.4;letter-spacing:0;color:var(--ui-muted);font-weight:600}
.app-shell.in-native-app .app-header-title{min-width:0}
.app-shell.in-native-app .app-native-profile{flex:none}
@media(max-width:850px){.app-shell.in-native-app.compact-shell .topbar.app-header{min-height:80px;padding-top:10px;padding-bottom:10px;align-items:center}}
@media(max-width:360px){.app-shell.in-native-app .app-native-brand .app-brand{font-size:18px;gap:7px}.app-shell.in-native-app .app-native-brand .app-logo{width:30px;height:30px}.app-shell.in-native-app .app-header-actions{gap:6px}}

@media(max-width:360px){.app-shell.in-native-app .app-header-actions{gap:4px}.app-shell.in-native-app.compact-shell .app-header .ui-icon-button{width:34px;height:40px;min-height:40px;border-radius:10px;padding:7px}}

/* Staff hamburger menus use the same full-height right drawer. */
#app-menu{position:fixed;inset:0 0 0 auto;margin:0;width:94%;max-width:94%;height:100dvh;max-height:100dvh;box-sizing:border-box;border-radius:18px 0 0 18px;padding:24px 20px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}

#app-menu{width:84%;max-width:84%}
#app-menu[open]{display:flex;flex-direction:column}
#app-menu>.app-menu-header,#app-menu>.app-menu-account,#app-menu>.app-menu-footer{flex:none}
#app-menu>nav{flex:1 0 auto}

/* Keep popup titles compact and consistent across account and canteen screens. */
dialog[open]>h2,#modal[open]>h2,#modal[open]>.modal-header h2,#modal[open] .co-pair-result h3,#app-menu .app-menu-header h2{font-size:18px;font-weight:650;line-height:1.35;letter-spacing:-.2px}
@media(max-width:600px){dialog[open]>h2,#modal[open]>h2,#modal[open]>.modal-header h2,#modal[open] .co-pair-result h3,#app-menu .app-menu-header h2{font-size:17px}}

/* Reserve a proper header row so the close control never overlaps popup content. */
#modal[open]>h2{display:flex;align-items:center;min-height:36px;margin:0 0 18px;padding:0 46px 0 0;box-sizing:border-box}
#modal[open]:has(>h2)>.close{position:absolute;top:20px;right:20px;display:grid;place-items:center;width:32px;min-width:32px;height:32px;min-height:32px;margin:0;padding:0;border:1px solid #e5e8ed;border-radius:9px;background:#f5f6f8;color:#657181;font-size:17px;line-height:1;box-sizing:border-box;box-shadow:none}
#modal[open]:has(>h2)>.close::before{display:none!important}

/* One subtle gray canvas across application accounts; surfaces stay white. */
:root{--ui-bg:#eef0f3}
html{background-color:var(--ui-bg)}
body:not(.customer){background-color:var(--ui-bg)}

/* A lighter shared canvas for every account and authentication screen. */
:root{--ui-bg:#f7f8fa}
body:has(.co-app),body:has(.app-auth){background-color:var(--ui-bg)}

#app-menu .app-menu-footer{flex-wrap:wrap;align-items:flex-start}
#app-menu .app-menu-footer>button{flex:1 1 100%;min-height:42px;height:auto;text-align:left}
#app-menu .app-menu-footer>.public-legal-links{width:100%;margin-top:8px}

/* The home navbar carries only the shared brand. Page names belong below it. */
#app .app-shell.compact-shell .work>.topbar.app-header{
  width:100%;max-width:none;margin:0 0 6px;padding:0;min-height:94px;gap:12px;flex-wrap:nowrap;
}
#app .app-shell .app-header .app-header-title{gap:10px}
#app .app-shell .app-header .app-home-brand{
  min-height:0;height:auto;border:0;background:transparent;color:var(--ui-ink);box-shadow:none;
  font-size:18px;line-height:1.2;font-weight:800;gap:9px;
}
#app .app-shell .app-header .app-home-brand::before,#app .app-shell .app-header .app-home-brand::after{display:none!important}
#app .app-shell .app-header .app-header-actions{gap:12px;flex-wrap:nowrap}
#app .app-shell .app-header .app-header-actions .ui-icon-button{width:42px;height:42px;min-height:42px;padding:9px}
.app-shell.compact-shell .app-page-heading{margin:0 0 18px;min-width:0}
.app-shell.compact-shell .app-page-heading>h1{margin:0;color:#243047;font-size:24px;font-weight:750;line-height:1.25;letter-spacing:-.6px;overflow-wrap:anywhere}
@media(max-width:850px){
  #app .app-shell.compact-shell .work>.topbar.app-header{min-height:80px;margin:0 0 6px;padding:12px 0;gap:8px}
  #app .app-shell .app-header .app-header-actions{gap:6px}
  #app .app-shell .app-header .app-header-actions .ui-icon-button{width:40px;height:40px;min-height:40px;padding:9px}
  #app .app-shell .app-header .app-home-brand .app-logo{width:37px;height:37px;border-radius:12px}
  .app-shell.compact-shell .app-page-heading{margin:0 0 16px}
  .app-shell.compact-shell .app-page-heading>h1{font-size:21px}
}
@media(max-width:360px){
  #app .app-shell .app-header .app-home-brand{font-size:17px;gap:7px}
  #app .app-shell .app-header .app-home-brand .app-logo{width:32px;height:32px}
  #app .app-shell.in-native-app .app-header .app-header-actions .ui-icon-button{width:34px;padding:7px}
}

/* The mobile home catalog starts without an empty checkout panel. */
@media(max-width:850px){
  #app .app-shell.compact-shell[data-workspace-page="pos"] #cart:not(.has-items){display:none!important}
}

/* Desktop branding stays in the sidebar; mobile keeps the header brand. */
@media(min-width:851px){
 #app .app-shell .app-header .app-home-brand{display:none!important}
}

/* Desktop titles share the top row with the header controls. */
@media(min-width:851px){
 #app .app-shell.compact-shell .work:has(>#content)>.topbar.app-header{float:right;width:auto;min-height:42px;height:42px;margin:16px 0 0 16px;padding:0}
 #app .app-shell .app-header .app-header-title{display:none}
 #app .app-shell.compact-shell .work>.app-page-heading{display:flex;align-items:center;min-height:74px;margin:0 0 18px}
}

/* Keep the staff workspace gray through page changes and rerenders. */
#app>.app-shell.compact-shell{--ui-bg:#eef0f3;background:var(--ui-bg)}
body:has(#app>.app-shell.compact-shell){background:#eef0f3}
#app>.app-shell.compact-shell>.work,
#app>.app-shell.compact-shell>.work>#content,
#app>.app-shell.compact-shell>.work>.app-header,
#app>.app-shell.compact-shell .management-main{background:var(--ui-bg)!important}
#app .app-shell .sidebar>.app-brand{min-height:35px;border:0;background:transparent;justify-content:flex-start;text-align:left}

/* Soft gray page canvas; foreground cards and checkout stay white. */
html:has(#app>.app-shell.compact-shell),
body:has(#app>.app-shell.compact-shell),
#app:has(>.app-shell.compact-shell){background:#f3f4f6}
#app>.app-shell.compact-shell{--ui-bg:#f3f4f6;background:var(--ui-bg)}