:root{
  --bg:#f5f7f6;--surface:#fff;--surface-soft:#fafbfb;--text:#1c2522;--muted:#78827e;
  --line:#e3e8e6;--line-strong:#d6ddda;--brand:#0d765e;--brand-hover:#0a624f;--brand-soft:#edf7f4;
  --danger:#b84848;--danger-soft:#fff3f3;--warning:#9b6a13;--warning-soft:#fff8e7;
  --sidebar-bg:#10251f;--sidebar-text:#c9d5d1;--sidebar-muted:#849a92;--sidebar-active:#1b3a31;
  --shadow:0 8px 28px rgba(22,37,32,.045);--radius:10px;--sidebar:248px
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);font-size:14px;font-weight:400}
button,input,select,textarea{font:inherit}button{font-weight:500}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
h1,h2,h3,p{margin-top:0}h1,h2,h3,strong,b{font-weight:600}
.app-shell{min-height:100vh}.main-area{margin-left:var(--sidebar);min-height:100vh}

/* Sidebar */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:var(--sidebar-bg);color:var(--sidebar-text);z-index:40;overflow:hidden}
.sidebar-inner{height:100%;display:flex;flex-direction:column;padding:18px 14px 14px}
.brand{height:56px;display:flex;align-items:center;gap:11px;padding:0 8px 15px;border-bottom:1px solid rgba(255,255,255,.075);flex:none}
.brand-mark,.brand-logo{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--brand);color:#fff;font-size:12px;font-weight:600;overflow:hidden}
.brand-logo{background:#fff}.brand-logo img{width:100%;height:100%;object-fit:contain;padding:3px}
.brand-copy{min-width:0}.brand-name{display:block;color:#f3f7f5;font-size:14px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-sub{display:block;color:var(--sidebar-muted);font-size:11px;margin-top:3px}
.nav-list{display:flex;flex-direction:column;gap:3px;padding:16px 4px 10px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.13) transparent;flex:1;min-height:0}
.nav-list::-webkit-scrollbar{width:5px}.nav-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:10px}
.nav-item{display:flex;align-items:center;gap:11px;min-height:42px;padding:9px 10px;border-radius:8px;color:#b6c5c0;font-size:13px;transition:background .14s,color .14s}
.nav-item:hover{background:rgba(255,255,255,.045);color:#fff}.nav-item.active{background:var(--sidebar-active);color:#fff;box-shadow:inset 2px 0 0 #18a07d}
.ico{width:18px;height:18px;display:grid;place-items:center;flex:none}.ico svg,.icon-btn svg{width:18px;height:18px}
.sidebar-user{flex:none;border-top:1px solid rgba(255,255,255,.075);padding:13px 6px 0;display:flex;align-items:center;gap:9px}.avatar{width:32px;height:32px;border-radius:50%;background:#29483f;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600}.sidebar-user-copy{min-width:0;flex:1}.user-name,.user-role{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-name{font-size:12px;color:#edf4f1}.user-role{font-size:10px;color:var(--sidebar-muted);margin-top:2px}
.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:8px;display:grid;place-items:center;cursor:pointer;padding:0}.icon-btn-dark{background:transparent;border-color:rgba(255,255,255,.12);color:#d5e0dc}

/* Topbar / content */
.topbar{height:62px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:30;backdrop-filter:blur(8px)}
.topbar-title{font-size:15px;font-weight:550;color:#25302c}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}.online-state{display:flex;align-items:center;gap:6px}.online-state i{width:7px;height:7px;background:#29a36e;border-radius:50%}.date-chip{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fbfcfc;color:#4f5b56}
.mobile-menu{display:none;margin-right:10px}.sidebar-overlay{display:none}.page-content{padding:26px 28px 44px;max-width:1540px;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}.page-head h1{font-size:20px;font-weight:550;letter-spacing:-.02em;margin:0 0 5px}.page-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.section-gap,.mt{margin-top:16px}

/* Cards / tables */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card.compact{padding:12px 14px;margin-bottom:14px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}.card-head h2{font-size:14px;font-weight:550;margin:0}.card-head p{font-size:11px;color:var(--muted);margin:4px 0 0;line-height:1.45}
.table-wrap{width:100%;overflow:auto}table{width:100%;border-collapse:collapse;min-width:670px}th,td{text-align:left;padding:12px 18px;border-bottom:1px solid var(--line);font-size:11.5px;vertical-align:middle;font-weight:400}th{font-size:9.5px;text-transform:uppercase;letter-spacing:.055em;color:#77837e;background:#fbfcfc;font-weight:600;white-space:nowrap}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fcfdfd}.table-primary{font-weight:550;color:#27322e}.cell-sub,.cell-line{display:block;font-size:10px;color:var(--muted);margin-top:3px}.table-link,.text-link{color:var(--brand);font-weight:550}.empty{text-align:center!important;color:var(--muted)!important;padding:34px 18px!important}.empty-block,.cart-empty{padding:26px;text-align:center;color:var(--muted);font-size:11px}
.badge{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:550}.badge.completed{background:var(--brand-soft);color:var(--brand-hover)}.badge.voided{background:var(--danger-soft);color:var(--danger)}.badge.low{background:var(--warning-soft);color:var(--warning)}
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}.kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:15px;min-height:108px}.kpi-card>span{display:block;color:var(--muted);font-size:10.5px}.kpi-card strong{display:block;font-size:19px;font-weight:550;margin:12px 0 7px;letter-spacing:-.02em}.kpi-card strong small{font-size:9px;color:var(--muted);font-weight:500}.kpi-card em{font-style:normal;color:#8b9692;font-size:9.5px}.content-grid{display:grid;gap:14px}.content-grid.two-one{grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr)}.content-grid.one-two{grid-template-columns:minmax(290px,.8fr) minmax(0,1.8fr)}
.stock-mini{padding:5px 17px 10px}.stock-mini>div{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}.stock-mini>div:last-child{border-bottom:0}.stock-mini span strong,.stock-mini span small{display:block}.stock-mini span strong{font-size:11px;font-weight:550}.stock-mini span small{font-size:9px;color:var(--muted);margin-top:3px}.stock-mini b{font-size:11px;font-weight:550}

/* Buttons */
.btn{min-height:36px;border:1px solid transparent;border-radius:8px;padding:8px 13px;cursor:pointer;font-weight:550;font-size:11px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .14s,border-color .14s,color .14s,box-shadow .14s}.btn:hover{box-shadow:0 2px 7px rgba(20,35,30,.055)}.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-hover)}.btn-secondary{background:#fff;color:#39443f;border-color:var(--line-strong)}.btn-secondary:hover{background:#f8faf9;border-color:#cbd4d0}.btn-ghost{background:transparent;color:#57635e;border-color:var(--line)}.btn-danger{background:var(--danger);color:#fff}.btn-sm{min-height:30px;padding:6px 10px;font-size:10px}.btn-lg{min-height:42px}.btn-block{width:100%}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Forms */
.form-control{width:100%;height:40px;border:1px solid var(--line-strong);background:#fff;border-radius:8px;padding:9px 11px;outline:none;color:var(--text);font-size:12px;font-weight:400;transition:border-color .14s,box-shadow .14s}.form-control::placeholder{color:#a1aaa6}.form-control:focus{border-color:#75aa9c;box-shadow:0 0 0 3px rgba(13,118,94,.07)}textarea.form-control{height:auto;min-height:82px;resize:vertical;line-height:1.5}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}
.stack-form,.form-body,.settings-form{display:flex;flex-direction:column;gap:14px}.form-body{padding:18px}.settings-form{padding:20px}.stack-form p{margin:0}.stack-form label,.stack-form p label,.form-grid label,.form-body>label,.settings-form>label,.login-form label{display:flex;flex-direction:column;gap:7px;font-size:10.5px;font-weight:500;color:#52605b}.stack-form .helptext,.stack-form ul{font-size:9px;color:var(--muted);margin:4px 0 0;padding-left:17px}.stack-form .errorlist{color:var(--danger)}.form-card{padding:18px;max-width:720px}.form-section-card{overflow:visible}.form-grid{display:grid;gap:12px}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid.one{grid-template-columns:1fr}.form-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:3px}.field-error{font-size:9.5px;color:var(--danger);font-weight:400}.form-divider{height:1px;background:var(--line);margin:4px 0}
.toggle-row{min-height:50px;border:1px solid var(--line);border-radius:8px;padding:10px 11px;display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:12px;background:#fbfcfc}.toggle-row span{display:block}.toggle-row b{display:block;font-size:11px;font-weight:550;color:#39443f}.toggle-row small{display:block;font-size:9px;color:var(--muted);margin-top:3px;font-weight:400}.toggle-stack{display:grid;gap:8px}.toggle-input,.table-check{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}.file-input{display:block;width:100%;font-size:11px;color:#69746f}.file-input::file-selector-button{border:1px solid var(--line-strong);background:#fff;border-radius:7px;padding:7px 10px;margin-right:9px;color:#3e4944;font:inherit;font-weight:550;cursor:pointer}
.table-input{height:32px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;width:100%;min-width:82px;font-size:10.5px;outline:none}.table-input:focus{border-color:#85b5a8;box-shadow:0 0 0 2px rgba(13,118,94,.06)}
.inline-search,.date-filter{display:flex;align-items:center;gap:8px}.toolbar{display:flex;justify-content:space-between;gap:12px}.product-search{max-width:430px;width:100%}.unit-tags{display:flex;gap:5px;flex-wrap:wrap}.unit-tags span{padding:4px 6px;border:1px solid var(--line);background:var(--surface-soft);border-radius:6px;font-size:9px}.warn-text{color:var(--warning)!important}.muted{color:var(--muted)}.hidden{display:none!important}
.messages{margin-bottom:14px}.alert{padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:11px;font-weight:400}.alert.success{background:var(--brand-soft);border-color:#d4ebe4;color:#176450}.alert.error{background:var(--danger-soft);border-color:#f0d2d2;color:var(--danger)}

/* Custom select - avoids OS-looking dropdowns */
.mfp-native-select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}.mfp-select{position:relative;width:100%;font-size:12px}.mfp-select-button{width:100%;height:40px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--text);padding:0 38px 0 11px;text-align:left;cursor:pointer;font-weight:400;position:relative}.mfp-select-button:focus{outline:none;border-color:#75aa9c;box-shadow:0 0 0 3px rgba(13,118,94,.07)}.mfp-select-button:after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:1.5px solid #76827d;border-bottom:1.5px solid #76827d;transform:translateY(-65%) rotate(45deg);transition:transform .15s}.mfp-select.open .mfp-select-button:after{transform:translateY(-30%) rotate(225deg)}.mfp-select-menu{position:absolute;z-index:120;left:0;right:0;top:calc(100% + 5px);display:none;max-height:230px;overflow:auto;background:#fff;border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 12px 30px rgba(20,35,30,.12);padding:5px}.mfp-select.open .mfp-select-menu{display:block;animation:selectOpen .12s ease-out}.mfp-select-option{display:block;width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:6px;color:#3d4843;font-size:11px;font-weight:400;cursor:pointer}.mfp-select-option:hover,.mfp-select-option.active{background:var(--brand-soft);color:#165d4c}.mfp-select-option:disabled{color:#a9b1ae;cursor:not-allowed;background:transparent}@keyframes selectOpen{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* Settings / branding */
.settings-card{max-width:780px}.settings-logo-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center}.settings-logo-preview{width:88px;height:88px;border:1px solid var(--line);border-radius:10px;background:#fafcfc;display:grid;place-items:center;overflow:hidden;color:var(--brand);font-size:18px;font-weight:600}.settings-logo-preview img{width:100%;height:100%;object-fit:contain;padding:7px}.settings-logo-copy h2{font-size:13px;font-weight:550;margin:0 0 4px}.settings-logo-copy p{font-size:10.5px;color:var(--muted);margin:0 0 10px}.settings-logo-copy .file-input{max-width:420px}

/* POS */
.pos-workspace{
  height:calc(100dvh - 132px);
  min-height:560px;
}
.pos-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,360px);
  gap:14px;
  align-items:stretch;
}
.pos-products{
  height:100%;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.pos-toolbar{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 18px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.pos-toolbar-copy{min-width:0}
.pos-toolbar h1{margin:0;font-size:15px;font-weight:550;letter-spacing:-.01em}
.pos-toolbar p{margin:4px 0 0;color:var(--muted);font-size:10px}
.search-box{width:min(360px,48%);flex:none}
.search-box .form-control{height:38px}
.pos-category-wrap{
  flex:none;
  min-height:47px;
  padding:8px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:12px;
  background:#fbfcfc;
}
.pos-categories{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:1px 0;
}
.pos-categories::-webkit-scrollbar{display:none}
.category-chip{
  flex:none;
  height:29px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:#66716d;
  font-size:9.5px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .14s,background .14s,color .14s;
}
.category-chip:hover{border-color:#b8cac4;color:#34413c}
.category-chip.active{border-color:#acd0c5;background:var(--brand-soft);color:var(--brand-hover)}
.product-count{flex:none;color:#8b9591;font-size:9.5px;white-space:nowrap}
.product-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:#c8d2ce transparent;
  overscroll-behavior:contain;
}
.product-scroll::-webkit-scrollbar{width:6px}
.product-scroll::-webkit-scrollbar-track{background:transparent}
.product-scroll::-webkit-scrollbar-thumb{background:#c8d2ce;border-radius:10px}
.product-grid{
  padding:12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  align-content:start;
}
.product-card{
  min-width:0;
  min-height:84px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 11px;
  background:#fff;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:4px;
  transition:border-color .14s,background .14s,box-shadow .14s,transform .14s;
}
.product-card:hover{
  border-color:#a9c9c0;
  background:#fcfefd;
  box-shadow:0 3px 10px rgba(20,35,30,.045);
  transform:translateY(-1px);
}
.product-card:focus-visible{outline:none;border-color:#75aa9c;box-shadow:0 0 0 3px rgba(13,118,94,.08)}
.product-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}
.product-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10.5px;
  font-weight:550;
  color:#1d2925;
  letter-spacing:.01em;
}
.product-unit-count{flex:none;font-size:8px;color:#96a09c;white-space:nowrap}
.product-category{display:block;font-size:8.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:7px}
.product-stock{min-width:0;font-size:8.5px;color:#76817c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-price{flex:none;font-size:9.5px;color:var(--brand-hover);font-weight:550;white-space:nowrap}
.product-card.out-of-stock{background:#fafafa;cursor:not-allowed;opacity:.58;transform:none;box-shadow:none}
.pos-empty{grid-column:1/-1;margin:auto;width:100%;padding:42px 18px}
.cart-panel{
  height:100%;
  min-height:0;
  position:sticky;
  top:76px;
  padding:14px 15px 13px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.cart-head{flex:none;display:flex;justify-content:space-between;align-items:center;padding-bottom:11px;border-bottom:1px solid var(--line)}
.cart-head h2{margin:0;font-size:13.5px;font-weight:550}
.cart-head p{margin:3px 0 0;color:var(--muted);font-size:9px}
.cart-lines{
  flex:1;
  min-height:90px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:4px 2px 4px 0;
  scrollbar-width:thin;
  scrollbar-color:#ccd5d1 transparent;
  overscroll-behavior:contain;
}
.cart-lines::-webkit-scrollbar{width:5px}
.cart-lines::-webkit-scrollbar-thumb{background:#ccd5d1;border-radius:10px}
.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.cart-line-title strong,.cart-line-title small{display:block}
.cart-line-title strong{font-size:10.5px;font-weight:550}
.cart-line-title small{font-size:8.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.cart-line-right{text-align:right}
.cart-line-right strong{display:block;font-size:10.5px;font-weight:550}
.cart-remove{display:inline-block;margin-top:4px;padding:0;border:0;background:transparent;color:var(--danger);font-size:8.5px;font-weight:500;cursor:pointer}
.cart-checkout{flex:none;border-top:1px solid var(--line);padding-top:5px;background:#fff}
.cart-summary{border-bottom:1px solid var(--line);padding:4px 0 8px;margin:0 0 10px}
.cart-summary>div,.summary-input{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;font-size:9.5px}
.cart-summary strong{font-weight:550}
.summary-input .form-control{width:115px;height:36px;text-align:right}
.grand-row{margin-top:3px;padding-top:9px!important;border-top:1px dashed #cbd4d0}
.grand-row strong{font-size:13px;font-weight:550}
.grand-row strong b{font-weight:550}
.checkout-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.checkout-fields .form-control{height:38px;font-size:11px}
.form-error{color:var(--danger);font-size:9.5px;margin-top:7px;min-height:13px}

/* Modals */
.modal{position:fixed;inset:0;background:rgba(18,29,25,.38);display:none;align-items:center;justify-content:center;padding:20px;z-index:100;backdrop-filter:blur(2px)}.modal.open{display:flex;animation:fadeIn .12s ease-out}.modal-card{width:min(440px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;background:#fff;border-radius:10px;border:1px solid var(--line);box-shadow:0 24px 65px rgba(12,26,21,.18);animation:modalIn .16s ease-out}.modal-small{width:min(390px,100%)}.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:start;padding:16px 18px;border-bottom:1px solid var(--line);margin:0}.modal-head h2{font-size:14px;font-weight:550;margin:0}.modal-head p{font-size:10px;color:var(--muted);margin:4px 0 0}.modal-close{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:7px;color:#64706b;cursor:pointer;font-size:18px;line-height:1}.modal-form{padding:17px 18px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:2px}.modal-total{display:flex;justify-content:space-between;align-items:center;background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;padding:10px 11px;margin-bottom:2px}.modal-total span{font-size:10px;color:var(--muted)}.modal-total strong{font-size:14px;font-weight:600}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes modalIn{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}

/* Login */
.login-body{
  min-height:100vh;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 20px;
}

.login-card{
  width:min(390px,100%);
  margin:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(20,36,30,.055);
  padding:32px 30px 24px;
  text-align:center;
}

.login-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 auto 28px;
  text-align:left;
}

.login-logo{
  width:44px;
  height:44px;
  flex:none;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.login-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:4px;
}

.login-fallback{
  width:44px;
  height:44px;
  border-radius:9px;
  background:var(--brand);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:550;
}

.login-shop-copy{
  min-width:0;
}

.login-shop-name{
  display:block;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  line-height:1.3;
  font-weight:500;
  color:var(--text);
}

.login-shop-sub{
  display:block;
  margin-top:3px;
  font-size:9px;
  line-height:1.35;
  font-weight:400;
  color:var(--muted);
}

.login-heading{
  width:100%;
  margin:0 auto 24px;
  text-align:center;
}

.login-heading h1{
  margin:0 0 7px;
  font-size:23px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:-.025em;
  color:var(--text);
}

.login-heading p{
  max-width:290px;
  margin:0 auto;
  font-size:10.5px;
  line-height:1.55;
  font-weight:400;
  color:var(--muted);
}

.login-messages{
  width:100%;
  margin:0 auto 16px;
  text-align:left;
}

.login-messages .alert{
  width:100%;
}

.login-form{
  width:100%;
  max-width:330px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:15px;
}

.login-form label{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
  text-align:left;
  font-size:10px;
  line-height:1.3;
  font-weight:500;
  color:#52605b;
}

.login-form label > span{
  display:block;
  font-size:10px;
  line-height:1.3;
  font-weight:500;
  color:#52605b;
}

.login-form .form-control{
  width:100%;
  height:42px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:#fff;
  padding:0 12px;
  color:var(--text);
  font-size:12px;
  font-weight:400;
  outline:none;
  box-shadow:none;
  transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease;
}

.login-form .form-control::placeholder{
  color:#9ea8a4;
  opacity:1;
}

.login-form .form-control:hover{
  border-color:#c8d2ce;
}

.login-form .form-control:focus{
  border-color:#78aa9d;
  box-shadow:0 0 0 3px rgba(13,118,94,.065);
}

.password-wrap{
  position:relative;
  width:100%;
}

.password-wrap .form-control{
  padding-right:58px;
}

.password-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  min-width:auto;
  padding:4px 3px;
  border:0;
  background:transparent;
  color:var(--brand);
  font-size:9.5px;
  line-height:1;
  font-weight:500;
  cursor:pointer;
  transition:color .14s ease,opacity .14s ease;
}

.password-toggle:hover{
  color:var(--brand-hover);
}

.login-submit{
  width:100%;
  min-height:42px;
  margin-top:2px;
  border-radius:8px;
  font-size:11px;
  font-weight:500;
  box-shadow:none;
}

.login-submit:hover{
  box-shadow:0 4px 12px rgba(13,118,94,.11);
}

.login-footer{
  width:100%;
  max-width:330px;
  margin:24px auto 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:8.8px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:.025em;
  color:#98a29e;
}

@media(max-width:560px){
  .login-body{
    padding:20px 16px;
  }

  .login-card{
    width:100%;
    max-width:390px;
    padding:28px 21px 22px;
    border-radius:9px;
  }

  .login-brand{
    margin-bottom:24px;
  }

  .login-heading{
    margin-bottom:21px;
  }

  .login-heading h1{
    font-size:21px;
  }

  .login-form{
    max-width:none;
  }

  .login-footer{
    max-width:none;
  }
}


/* Receipt */
.receipt{max-width:420px;margin:0 auto;padding:22px}.receipt-header{text-align:center;display:flex;flex-direction:column;gap:3px;font-size:10px}.receipt-logo{width:54px;height:54px;margin:0 auto 6px;display:grid;place-items:center}.receipt-logo img{width:100%;height:100%;object-fit:contain}.receipt-header h2{font-size:17px;font-weight:550;margin:0 0 4px}.receipt-header p{margin:0;color:var(--muted)}.receipt-rule{border-top:1px dashed #aebbb6;margin:10px 0}.receipt-items{margin:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.receipt-item{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}.receipt-item:last-child{border-bottom:0}.receipt-item span b,.receipt-item span small{display:block}.receipt-item span b{font-size:10px}.receipt-item span small{font-size:9px;color:var(--muted);margin-top:2px}.receipt-item>strong{font-size:10px}.receipt-totals>div{display:flex;justify-content:space-between;padding:4px 0;font-size:10px}.receipt-grand{border-top:1px dashed #aebbb6;margin-top:5px;padding-top:9px!important;font-size:13px!important}.admin-only-line{color:var(--brand-hover)}.receipt-footer{text-align:center;font-size:9px;color:var(--muted);margin-top:18px}.danger-zone{margin:16px auto 0;max-width:760px;padding:16px;display:flex;justify-content:space-between;gap:16px;align-items:center}.danger-zone h2{font-size:13px;margin:0}.danger-zone p{font-size:10px;color:var(--muted);margin:4px 0 0}

@media(max-width:1250px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pos-layout{grid-template-columns:minmax(0,1fr) 330px}}
@media(max-width:860px){:root{--sidebar:232px}.sidebar{transform:translateX(-100%);transition:transform .18s}.sidebar.open{transform:none}.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:35}.sidebar-overlay.open{display:block}.main-area{margin-left:0}.mobile-menu{display:grid}.topbar{padding:0 16px}.page-content{padding:20px 16px 34px}.content-grid.two-one,.content-grid.one-two,.pos-layout{grid-template-columns:1fr}.pos-workspace{height:auto;min-height:0}.pos-products{height:auto;min-height:520px}.product-scroll{max-height:55vh}.cart-panel{height:auto;position:static;overflow:visible}.cart-lines{max-height:300px;flex:none}.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.page-head{align-items:flex-start;flex-direction:column}.head-actions,.date-filter{width:100%;flex-wrap:wrap}.kpi-grid{grid-template-columns:1fr 1fr;gap:8px}.kpi-card{padding:13px;min-height:100px}.kpi-card strong{font-size:16px}.product-grid{grid-template-columns:1fr 1fr;padding:9px;gap:7px}.product-card{padding:9px 10px;min-height:82px}.pos-toolbar{align-items:flex-start;flex-direction:column;padding:13px}.search-box{width:100%}.pos-category-wrap{padding:7px 10px}.product-count{display:none}.toolbar{flex-direction:column}.inline-search{width:100%}.form-grid.two,.checkout-fields,.settings-logo-row{grid-template-columns:1fr}.topbar-right .online-state,.date-chip{display:none}.login-card{padding:26px 22px}.settings-logo-preview{width:74px;height:74px}.danger-zone{align-items:flex-start;flex-direction:column}}
@media print{.sidebar,.topbar,.no-print,.messages{display:none!important}.main-area{margin:0}.page-content{padding:0}.receipt{box-shadow:none;border:0;width:80mm;max-width:80mm;padding:5mm}.app-body{background:#fff}}


/* Admin CRUD additions */
.align-right{text-align:right}.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.row-actions form{margin:0}.btn-danger-soft{background:#fff;color:#a23c3c;border-color:#ead0d0}.btn-danger-soft:hover{background:#fff8f8;border-color:#dcaeae;box-shadow:none}.btn-danger-soft:disabled{opacity:.4}.modal-wide{width:min(760px,100%)}.modal-table-wrap{max-height:min(520px,60vh);overflow:auto}.modal-table-wrap table{margin:0}.confirm-note{font-size:10.5px;line-height:1.55;color:#65716c;background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;padding:10px 11px}.field-note{font-size:9.5px;color:var(--muted);font-weight:400;line-height:1.45}.toggle-title{font-size:10.5px;font-weight:500;color:#35413c}.muted-tag{opacity:.55}.muted-text{color:var(--muted)}.summary-list{padding:16px 18px}.summary-list>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:11px}.summary-list>div:last-child{border-bottom:0}.summary-list span{color:var(--muted)}.summary-list strong{font-weight:550}.table-input{min-width:100px}.modal-table-wrap .table-input{min-width:160px}
@media(max-width:680px){.row-actions{justify-content:flex-start}.modal-wide{width:100%}.modal-table-wrap{max-height:55vh}}

/* ========================================================================== */
/* V6 shell polish: compact sidebar, top-right account menu and lighter scroll */
/* ========================================================================== */
:root{--sidebar-compact:72px}

/* Thin, quiet scrollbars across the application. */
html{scrollbar-width:thin;scrollbar-color:#cbd4d0 transparent}
*{scrollbar-width:thin;scrollbar-color:#cbd4d0 transparent}
*::-webkit-scrollbar{width:7px;height:7px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#cbd4d0;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#aebbb6;border:2px solid transparent;background-clip:padding-box}

.sidebar{transition:width .18s ease,transform .18s ease}
.main-area{transition:margin-left .18s ease}
.sidebar-inner{padding:14px 12px 12px}
.brand{height:58px;padding:0 6px 13px;transition:padding .18s ease}
.nav-list{padding:14px 2px 9px;gap:2px;scrollbar-color:rgba(255,255,255,.11) transparent}
.nav-list::-webkit-scrollbar{width:4px}
.nav-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border:0}
.nav-item{min-height:40px;padding:8px 10px;gap:10px}
.sidebar-user{padding:12px 5px 0}

/* Desktop sidebar collapsed state. */
.app-body.sidebar-collapsed .sidebar{width:var(--sidebar-compact)}
.app-body.sidebar-collapsed .main-area{margin-left:var(--sidebar-compact)}
.app-body.sidebar-collapsed .sidebar-inner{padding-left:10px;padding-right:10px}
.app-body.sidebar-collapsed .brand{justify-content:center;padding-left:0;padding-right:0}
.app-body.sidebar-collapsed .brand-copy,
.app-body.sidebar-collapsed .nav-label,
.app-body.sidebar-collapsed .sidebar-user-copy{display:none}
.app-body.sidebar-collapsed .nav-item{justify-content:center;padding-left:0;padding-right:0}
.app-body.sidebar-collapsed .nav-item.active{box-shadow:inset 2px 0 0 #18a07d}
.app-body.sidebar-collapsed .sidebar-user{justify-content:center;padding-left:0;padding-right:0}

/* Top bar: no expensive blur while scrolling. */
.topbar{height:60px;padding:0 22px;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.shell-menu-btn{display:grid;flex:none;margin-right:12px;border-color:transparent;background:transparent}
.shell-menu-btn:hover{background:#f5f7f6;border-color:var(--line)}
.topbar-title{font-size:14px;font-weight:500}
.topbar-right{gap:9px}

/* User dropdown. */
.user-menu-wrap{position:relative}
.user-menu-btn{height:38px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 10px 0 7px;color:var(--text);cursor:pointer;text-align:left}
.user-menu-btn:hover,.user-menu-btn[aria-expanded="true"]{background:#fafbfb;border-color:#d3dcd8}
.topbar-avatar{width:27px;height:27px;border-radius:7px;background:var(--brand-soft);color:var(--brand-hover);display:grid;place-items:center;font-size:9.5px;font-weight:600;flex:none}
.topbar-user-copy{min-width:0;max-width:150px}
.topbar-user-name,.topbar-user-role{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-user-name{font-size:10.5px;color:#2c3733;font-weight:500;line-height:1.2}
.topbar-user-role{font-size:8.5px;color:#8a9590;margin-top:2px}
.user-chevron{width:6px;height:6px;border-right:1.5px solid #8b9691;border-bottom:1.5px solid #8b9691;transform:translateY(-2px) rotate(45deg);margin-left:2px;transition:transform .14s ease}
.user-menu-btn[aria-expanded="true"] .user-chevron{transform:translateY(2px) rotate(225deg)}
.user-menu{position:absolute;right:0;top:calc(100% + 7px);width:210px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 16px 38px rgba(19,33,28,.11);padding:6px;display:none;z-index:80}
.user-menu.open{display:block;animation:selectOpen .12s ease-out}
.user-menu-head{padding:9px 10px 10px;border-bottom:1px solid var(--line)}
.user-menu-title,.user-menu-sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-menu-title{font-size:11px;font-weight:550;color:#26322e}
.user-menu-sub{font-size:9px;color:#8b9591;margin-top:3px}
.user-menu-links{padding-top:5px}
.user-menu-links a{height:34px;padding:0 9px;border-radius:6px;display:flex;align-items:center;gap:9px;color:#53605b;font-size:10.5px}
.user-menu-links a:hover{background:var(--brand-soft);color:var(--brand-hover)}
.user-menu-links svg{width:15px;height:15px}
.topbar-logout{width:36px;height:36px;background:#fff;color:#66716d}
.topbar-logout:hover{background:#fff6f6;border-color:#efd7d7;color:var(--danger)}

/* POS desktop has one scroll layer: products/bill scroll, not the whole browser. */
@media(min-width:861px){
  .app-body.pos-page{height:100dvh;overflow:hidden}
  .pos-page .app-shell,.pos-page .main-area{height:100dvh;min-height:0;overflow:hidden}
  .pos-page .page-content{height:calc(100dvh - 60px);padding:18px 22px;overflow:hidden;max-width:none}
  .pos-page .pos-workspace{height:100%;min-height:0}
  .pos-page .cart-panel{position:static;top:auto}
  .pos-page .product-scroll,.pos-page .cart-lines{scrollbar-gutter:stable}
  .pos-page .product-scroll::-webkit-scrollbar,.pos-page .cart-lines::-webkit-scrollbar{width:5px}
}

@media(max-width:860px){
  .app-body.sidebar-collapsed .sidebar{width:var(--sidebar)}
  .app-body.sidebar-collapsed .main-area{margin-left:0}
  .app-body.sidebar-collapsed .brand-copy,
  .app-body.sidebar-collapsed .nav-label,
  .app-body.sidebar-collapsed .sidebar-user-copy{display:block}
  .app-body.sidebar-collapsed .nav-item{justify-content:flex-start;padding:8px 10px}
  .app-body.sidebar-collapsed .sidebar-user{justify-content:flex-start;padding:12px 5px 0}
  .shell-menu-btn{display:grid;margin-right:9px}
  .topbar{padding:0 14px}
  .topbar-user-copy{display:none}
  .user-menu-btn{padding:0 7px}
  .user-chevron{display:none}
  .app-body.pos-page{height:auto;overflow:auto}
  .pos-page .app-shell,.pos-page .main-area{height:auto;overflow:visible}
  .pos-page .page-content{height:auto;overflow:visible;padding:20px 16px 34px}
}

@media(max-width:560px){
  .topbar-right{gap:6px}
  .topbar-logout{width:34px;height:34px}
  .user-menu{right:-40px;width:205px}
}

/* ========================================================================== */
/* V7 sidebar groups: compact accordion navigation                            */
/* ========================================================================== */
.nav-group{display:block}
.nav-group-toggle{
  width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:8px;background:transparent;
  color:#b6c5c0;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  font-size:13px;font-weight:400;transition:background .14s ease,color .14s ease
}
.nav-group-toggle:hover{background:rgba(255,255,255,.045);color:#fff}
.nav-group.active-group>.nav-group-toggle{color:#eef5f2}
.nav-group.open>.nav-group-toggle{background:rgba(255,255,255,.035);color:#f3f7f5}
.nav-group-toggle .nav-label{flex:1;min-width:0}
.nav-group-chevron{
  width:6px;height:6px;flex:none;margin:0 3px 3px 4px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  opacity:.62;transform:rotate(45deg);transition:transform .16s ease,opacity .16s ease
}
.nav-group.open .nav-group-chevron{transform:translateY(3px) rotate(225deg);opacity:.9}
.nav-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .18s ease}
.nav-group.open .nav-submenu{grid-template-rows:1fr}
.nav-submenu-inner{overflow:hidden;padding-left:28px}
.nav-group.open .nav-submenu-inner{padding-top:3px;padding-bottom:4px}
.nav-subitem{
  position:relative;min-height:32px;padding:7px 9px;display:flex;align-items:center;gap:9px;
  border-radius:7px;color:#8fa49d;font-size:11.5px;font-weight:400;transition:background .13s ease,color .13s ease
}
.nav-subitem:hover{background:rgba(255,255,255,.04);color:#e9f1ee}
.nav-subitem.active{background:rgba(24,160,125,.12);color:#fff}
.nav-child-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.nav-subitem.active .nav-child-dot{opacity:1;background:#25af89}
.nav-direct{font-weight:400}

/* When the desktop sidebar is icon-only, group children stay hidden. Clicking
   the group icon expands the sidebar first via app.js. */
.app-body.sidebar-collapsed .nav-group-toggle{justify-content:center;padding-left:0;padding-right:0}
.app-body.sidebar-collapsed .nav-group-chevron,
.app-body.sidebar-collapsed .nav-submenu{display:none}
.app-body.sidebar-collapsed .nav-group.open>.nav-group-toggle,
.app-body.sidebar-collapsed .nav-group.active-group>.nav-group-toggle{background:var(--sidebar-active);box-shadow:inset 2px 0 0 #18a07d}

@media(max-width:860px){
  .app-body.sidebar-collapsed .nav-group-toggle{justify-content:flex-start;padding:8px 10px}
  .app-body.sidebar-collapsed .nav-group-chevron{display:block}
  .app-body.sidebar-collapsed .nav-submenu{display:grid}
}

/* Dashboard analytics */
.dashboard-head{align-items:center}.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:12px}.dashboard-kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 15px;min-width:0}.dashboard-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:10.5px}.kpi-mini{font-size:9px;color:#8b9692;white-space:nowrap}.dashboard-kpi-value{font-size:19px;font-weight:550;letter-spacing:-.02em;margin:12px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-kpi-value small{font-size:9px;font-weight:500;color:var(--muted)}.dashboard-kpi-foot{font-size:9.5px;color:#88928e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden}.dashboard-strip>div{padding:11px 15px;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.dashboard-strip>div:last-child{border-right:0}.dashboard-strip span{font-size:9.5px;color:var(--muted)}.dashboard-strip strong{font-size:10.5px;font-weight:550;white-space:nowrap}
.dashboard-chart-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:14px}.dashboard-chart-card{overflow:hidden}.dashboard-card-head{min-height:65px}.chart-key{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:9px;color:var(--muted)}.chart-key span{display:flex;align-items:center;gap:5px}.chart-key-dot,.payment-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}.chart-key-dot.revenue,.payment-cash{background:#0d765e}.chart-key-dot.profit,.payment-mobile_money{background:#63a793}.chart-key-dot.expense,.payment-bank{background:#b7d4cb}
.chart-canvas-wrap{height:270px;padding:16px 18px 14px;position:relative}.chart-canvas-wrap canvas{width:100%;height:100%;display:block}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:10.5px;background:rgba(255,255,255,.86)}
.payment-chart-body{padding:16px 18px 17px;display:flex;flex-direction:column;gap:17px}.donut-wrap{width:174px;height:174px;margin:0 auto;position:relative}.donut-wrap canvas{width:100%;height:100%;display:block}.donut-center{position:absolute;inset:35px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;pointer-events:none}.donut-center span,.donut-center small{font-size:8.5px;color:var(--muted)}.donut-center strong{font-size:14px;font-weight:550;margin:3px 0 1px}.payment-legend{display:flex;flex-direction:column}.payment-legend-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line)}.payment-label{display:flex;align-items:center;gap:7px;font-size:10px;color:#4d5954}.payment-value{text-align:right}.payment-value strong,.payment-value small{display:block}.payment-value strong{font-size:10px;font-weight:550}.payment-value small{font-size:8.5px;color:var(--muted);margin-top:2px}
.dashboard-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.rank-list{padding:5px 18px 10px}.rank-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.8fr);gap:18px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.rank-row:last-child{border-bottom:0}.rank-copy span,.rank-copy small,.rank-right strong{display:block}.rank-copy span{font-size:10.5px;font-weight:550}.rank-copy small{font-size:8.8px;color:var(--muted);margin-top:3px}.rank-right{text-align:right}.rank-right strong{font-size:9.5px;font-weight:550;margin-bottom:6px}.rank-track{height:4px;background:#edf1ef;border-radius:999px;overflow:hidden}.rank-track i{display:block;height:100%;background:var(--brand);border-radius:inherit}.rank-track.category i{background:#63a793}
.dashboard-bottom-grid{align-items:start}.dashboard-stock-mini .stock-zero{color:var(--danger)}
@media(max-width:1250px){.dashboard-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-chart-grid{grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr)}}
@media(max-width:980px){.dashboard-chart-grid,.dashboard-detail-grid{grid-template-columns:1fr}.payment-chart-body{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center}.dashboard-strip{grid-template-columns:1fr 1fr}.dashboard-strip>div:nth-child(2){border-right:0}.dashboard-strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:700px){.dashboard-kpi-grid{grid-template-columns:1fr 1fr}.dashboard-strip{grid-template-columns:1fr}.dashboard-strip>div{border-right:0!important;border-bottom:1px solid var(--line)}.dashboard-strip>div:last-child{border-bottom:0}.payment-chart-body{display:flex}.rank-row{grid-template-columns:minmax(0,1fr) minmax(125px,.75fr)}.chart-key{display:none}}
@media(max-width:480px){.dashboard-kpi-grid{grid-template-columns:1fr}.dashboard-kpi{padding:13px 14px}.dashboard-kpi-value{font-size:18px}.chart-canvas-wrap{height:235px;padding:13px 12px}.rank-list{padding-left:14px;padding-right:14px}}

/* Dashboard polish: restrained motion and hover feedback. */
.dashboard-kpi,
.dashboard-chart-card,
.dashboard-detail-grid > .card,
.dashboard-bottom-grid > .card,
.dashboard-strip{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.dashboard-kpi:hover{
  transform:translateY(-2px);
  border-color:#cfd9d5;
  box-shadow:0 8px 22px rgba(18,42,33,.055);
}
.dashboard-chart-card:hover,
.dashboard-detail-grid > .card:hover,
.dashboard-bottom-grid > .card:hover{
  border-color:#d3dcd8;
  box-shadow:0 9px 24px rgba(18,42,33,.045);
}
.dashboard-strip:hover{
  border-color:#d3dcd8;
  box-shadow:0 6px 18px rgba(18,42,33,.035);
}
.dashboard-strip > div{
  transition:background-color .16s ease;
}
.dashboard-strip > div:hover{
  background:#fafcfb;
}
.rank-row,
.dashboard-stock-mini > div,
.payment-legend-row{
  transition:background-color .15s ease,padding-left .15s ease,padding-right .15s ease;
}
.rank-row:hover,
.dashboard-stock-mini > div:hover,
.payment-legend-row:hover{
  background:#fafcfb;
}
.rank-row:hover{
  padding-left:5px;
  padding-right:5px;
}
.rank-track i{
  transition:width .35s ease,opacity .16s ease;
}
.rank-row:hover .rank-track i{
  opacity:.82;
}
.dashboard-kpi-value{
  transition:transform .18s ease;
}
.dashboard-kpi:hover .dashboard-kpi-value{
  transform:translateX(2px);
}
.chart-canvas-wrap canvas,
.donut-wrap canvas{
  transition:opacity .18s ease,transform .18s ease;
}
.dashboard-chart-card:hover .chart-canvas-wrap canvas{
  opacity:.97;
}
.payment-card:hover .donut-wrap canvas{
  transform:scale(1.012);
}

@media (prefers-reduced-motion:no-preference){
  .dashboard-kpi,
  .dashboard-chart-card,
  .dashboard-detail-grid > .card,
  .dashboard-bottom-grid > .card,
  .dashboard-strip{
    animation:dashboardEnter .28s ease both;
  }
  .dashboard-kpi-grid .dashboard-kpi:nth-child(2){animation-delay:.025s}
  .dashboard-kpi-grid .dashboard-kpi:nth-child(3){animation-delay:.05s}
  .dashboard-kpi-grid .dashboard-kpi:nth-child(4){animation-delay:.075s}
  .dashboard-kpi-grid .dashboard-kpi:nth-child(5){animation-delay:.1s}
  .dashboard-strip{animation-delay:.11s}
  .dashboard-chart-grid .dashboard-chart-card:nth-child(1){animation-delay:.13s}
  .dashboard-chart-grid .dashboard-chart-card:nth-child(2){animation-delay:.155s}
}
@keyframes dashboardEnter{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .dashboard-kpi,
  .dashboard-chart-card,
  .dashboard-detail-grid > .card,
  .dashboard-bottom-grid > .card,
  .dashboard-strip,
  .rank-row,
  .dashboard-stock-mini > div,
  .payment-legend-row,
  .dashboard-kpi-value,
  .chart-canvas-wrap canvas,
  .donut-wrap canvas{
    transition:none!important;
    animation:none!important;
  }
}


/* ========================================================================== */
/* V11 page transition loader                                                  */
/* ========================================================================== */
.mfp-page-loader{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(245,247,246,.94);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,visibility 0s linear .16s;
}

.mfp-page-loader.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .16s ease;
}

.mfp-loader-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-width:92px;
  color:var(--muted);
  transform:translateY(3px);
  transition:transform .18s ease;
}

.mfp-page-loader.is-active .mfp-loader-content{
  transform:none;
}

.mfp-loader-symbol{
  position:relative;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
}

.mfp-loader-ring{
  position:absolute;
  inset:0;
  border:1.5px solid rgba(13,118,94,.14);
  border-top-color:var(--brand);
  border-right-color:rgba(13,118,94,.42);
  border-radius:50%;
  animation:mfpLoaderSpin .72s linear infinite;
}

.mfp-loader-logo,
.mfp-loader-fallback{
  position:relative;
  z-index:1;
  width:34px;
  height:34px;
  border-radius:8px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
}

.mfp-loader-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:3px;
}

.mfp-loader-fallback{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  font-size:9.5px;
  font-weight:550;
  letter-spacing:.02em;
}

.mfp-loader-text{
  display:block;
  min-height:14px;
  font-size:9.5px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:.015em;
  color:#71807a;
}

.login-submit.is-loading{
  opacity:.86;
  cursor:wait;
  box-shadow:none;
}

html.mfp-loading,
html.mfp-loading body{
  cursor:wait;
}

@keyframes mfpLoaderSpin{
  to{transform:rotate(360deg)}
}

@media(prefers-reduced-motion:reduce){
  .mfp-page-loader,
  .mfp-loader-content{
    transition:none;
  }

  .mfp-loader-ring{
    animation-duration:1.5s;
  }
}


/* ========================================================================== */
/* V12 dashboard chart hover detail                                            */
/* ========================================================================== */
.chart-canvas-wrap{
  isolation:isolate;
}

#salesTrendChart{
  cursor:crosshair;
}

.dashboard-chart-tooltip{
  position:absolute;
  z-index:8;
  left:0;
  top:0;
  width:196px;
  padding:10px 11px 9px;
  border:1px solid #dce4e1;
  border-radius:9px;
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 28px rgba(18,38,31,.10);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(5px) scale(.985);
  transform-origin:top left;
  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s linear .14s;
}

.dashboard-chart-tooltip.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:
    opacity .14s ease,
    transform .14s ease;
}

.dashboard-chart-tooltip-date{
  padding-bottom:7px;
  margin-bottom:5px;
  border-bottom:1px solid var(--line);
  color:#35413c;
  font-size:10px;
  line-height:1.3;
  font-weight:550;
}

.dashboard-chart-tooltip-rows{
  display:flex;
  flex-direction:column;
}

.dashboard-chart-tooltip-rows>div{
  min-height:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:9.5px;
  line-height:1.25;
}

.dashboard-chart-tooltip-rows span{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  color:var(--muted);
  font-weight:400;
}

.dashboard-chart-tooltip-rows strong{
  flex:none;
  color:#2d3934;
  font-size:9.5px;
  font-weight:550;
  white-space:nowrap;
}

.tooltip-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  display:inline-block;
  flex:none;
}

.tooltip-dot.revenue{background:var(--brand)}
.tooltip-dot.profit{background:#63a793}
.tooltip-dot.expense{background:#b7d4cb}

.tooltip-net-row{
  margin-top:4px;
  padding-top:7px;
  border-top:1px dashed #dce4e1;
}

.tooltip-net-row span{
  color:#4b5853;
  font-weight:500;
}

.tooltip-net-row strong{
  color:var(--brand-hover);
}

.tooltip-net-row strong.is-negative{
  color:var(--danger);
}

@media(max-width:700px){
  .dashboard-chart-tooltip{
    width:180px;
    padding:9px 10px 8px;
  }
}

@media(prefers-reduced-motion:reduce){
  .dashboard-chart-tooltip{
    transition:none;
  }
}


/* ========================================================================== */
/* V14 dashboard date filter                                                   */
/* ========================================================================== */
.dashboard-filter-bar{
  display:grid;
  grid-template-columns:minmax(150px,.75fr) auto minmax(440px,1.4fr);
  align-items:end;
  gap:16px;
  margin-bottom:14px;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 5px 18px rgba(22,37,32,.025);
}

.dashboard-filter-summary{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}

.dashboard-filter-summary>span{
  color:var(--muted);
  font-size:8.5px;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-weight:500;
}

.dashboard-filter-summary>strong{
  margin-top:1px;
  color:#2c3833;
  font-size:12px;
  line-height:1.35;
  font-weight:550;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dashboard-filter-summary>small{
  color:#8b9692;
  font-size:8.8px;
  line-height:1.35;
  font-weight:400;
}

.dashboard-filter-quick{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
  align-self:center;
}

.dashboard-filter-chip{
  min-height:31px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:#66726d;
  font-size:9.5px;
  line-height:1;
  font-weight:500;
  white-space:nowrap;
  transition:
    background .14s ease,
    border-color .14s ease,
    color .14s ease,
    transform .14s ease;
}

.dashboard-filter-chip:hover{
  border-color:#bdcdc7;
  color:#3e4b46;
  background:#fbfcfc;
  transform:translateY(-1px);
}

.dashboard-filter-chip.active{
  border-color:#b5d6cc;
  background:var(--brand-soft);
  color:var(--brand-hover);
}

.dashboard-filter-form{
  display:grid;
  grid-template-columns:minmax(130px,1fr) auto minmax(130px,1fr) auto;
  align-items:end;
  gap:7px;
}

.dashboard-date-field{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:0;
}

.dashboard-date-field>span{
  color:#69756f;
  font-size:8.8px;
  line-height:1.2;
  font-weight:500;
}

.dashboard-date-field input{
  display:block;
  width:100%;
  min-width:0;
  height:34px;
  padding:0 9px;
  border:1px solid var(--line-strong);
  border-radius:7px;
  background:#fff;
  color:#35413c;
  font:inherit;
  font-size:10px;
  font-weight:400;
  outline:none;
  transition:border-color .14s ease,box-shadow .14s ease;
}

.dashboard-date-field input:focus{
  border-color:#78aa9d;
  box-shadow:0 0 0 3px rgba(13,118,94,.06);
}

.dashboard-date-separator{
  align-self:end;
  height:34px;
  display:grid;
  place-items:center;
  color:#9aa49f;
  font-size:11px;
}

.dashboard-filter-apply{
  min-height:34px;
  height:34px;
  padding-left:13px;
  padding-right:13px;
}

@media(max-width:1180px){
  .dashboard-filter-bar{
    grid-template-columns:minmax(150px,.6fr) 1fr;
  }

  .dashboard-filter-summary{
    grid-row:1 / span 2;
  }

  .dashboard-filter-quick{
    justify-self:end;
  }

  .dashboard-filter-form{
    grid-column:2;
  }
}

@media(max-width:760px){
  .dashboard-filter-bar{
    grid-template-columns:1fr;
    align-items:stretch;
    gap:10px;
  }

  .dashboard-filter-summary{
    grid-row:auto;
  }

  .dashboard-filter-quick{
    justify-self:stretch;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:1px;
  }

  .dashboard-filter-quick::-webkit-scrollbar{
    display:none;
  }

  .dashboard-filter-form{
    grid-column:auto;
    grid-template-columns:1fr 1fr;
  }

  .dashboard-date-separator{
    display:none;
  }

  .dashboard-filter-apply{
    grid-column:1 / -1;
  }
}

@media(max-width:460px){
  .dashboard-filter-form{
    grid-template-columns:1fr;
  }

  .dashboard-filter-apply{
    grid-column:auto;
  }
}


/* ========================================================================== */
/* V15 RESPONSIVE / MOBILE FINAL POLISH                                        */
/* This final layer intentionally overrides older mobile rules.                */
/* ========================================================================== */

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

button,
a,
input,
select,
textarea{
  -webkit-tap-highlight-color:transparent;
}

img,
svg,
canvas{
  max-width:100%;
}

.page-content,
.card,
.table-wrap,
.form-card,
.form-section-card,
.settings-card,
.dashboard-chart-card,
.pos-products,
.cart-panel{
  min-width:0;
}

/* ------------------------------ Tablet shell ------------------------------ */
@media(max-width:900px){

  :root{
    --sidebar:248px;
  }

  .sidebar{
    width:min(278px,86vw);
    max-width:86vw;
    box-shadow:18px 0 42px rgba(10,28,22,.16);
  }

  .sidebar-inner{
    padding:14px 11px 12px;
  }

  .sidebar-overlay.open{
    display:block;
    background:rgba(11,24,20,.32);
    backdrop-filter:none;
  }

  .main-area{
    width:100%;
    max-width:100%;
    margin-left:0!important;
  }

  .topbar{
    width:100%;
    height:56px;
    padding:0 13px;
    gap:7px;
  }

  .shell-menu-btn{
    width:34px;
    height:34px;
    margin-right:4px;
  }

  .topbar-title{
    min-width:0;
    max-width:42vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12.5px;
  }

  .topbar-right{
    min-width:0;
    margin-left:auto;
    gap:6px;
  }

  .online-state,
  .date-chip{
    display:none!important;
  }

  .user-menu-btn{
    height:34px;
    max-width:46vw;
    padding:0 7px;
  }

  .topbar-avatar{
    width:25px;
    height:25px;
    border-radius:6px;
  }

  .topbar-user-copy{
    display:block;
    max-width:100px;
  }

  .topbar-user-name{
    font-size:9.5px;
  }

  .topbar-user-role{
    display:none;
  }

  .topbar-logout{
    width:34px;
    height:34px;
  }

  .user-menu{
    right:0;
    width:min(218px,calc(100vw - 24px));
  }

  .page-content{
    width:100%;
    max-width:none;
    padding:16px 13px 28px;
  }

  .page-head{
    margin-bottom:14px;
    align-items:flex-start;
  }

  .page-head h1{
    font-size:17px;
  }

  .page-head p{
    max-width:620px;
    font-size:10.5px;
  }

  .head-actions{
    gap:6px;
  }

  .card{
    border-radius:9px;
    box-shadow:0 4px 16px rgba(20,35,30,.025);
  }

  .card-head{
    padding:13px 14px;
    gap:9px;
  }

  .card-head h2{
    font-size:12.5px;
  }

  .card-head p{
    font-size:9.5px;
  }

  .content-grid.two-one,
  .content-grid.one-two,
  .dashboard-chart-grid,
  .dashboard-detail-grid{
    grid-template-columns:1fr!important;
  }

  /* Tables remain readable through a quiet local horizontal scroll. */
  .table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  .table-wrap table{
    min-width:650px;
  }

  th,
  td{
    padding:10px 13px;
  }

  /* Forms */
  .form-card,
  .settings-card{
    width:100%;
    max-width:none;
  }

  .form-grid.two{
    grid-template-columns:1fr;
  }

  .form-body,
  .settings-form{
    padding:15px;
  }

  .form-actions{
    flex-wrap:wrap;
  }

  /* Modals */
  .modal{
    padding:14px;
    align-items:center;
  }

  .modal-card,
  .modal-wide,
  .modal-small{
    width:min(520px,100%);
    max-height:calc(100dvh - 28px);
    border-radius:9px;
  }

  .modal-head{
    padding:14px 15px;
  }

  .modal-form{
    padding:14px 15px 15px;
  }

  /* Dashboard */
  .dashboard-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .dashboard-kpi{
    min-height:98px;
    padding:12px 13px;
  }

  .dashboard-kpi-value{
    margin:9px 0 5px;
    font-size:16px;
  }

  .dashboard-strip{
    grid-template-columns:1fr 1fr;
  }

  .dashboard-strip>div{
    min-height:46px;
    padding:9px 11px;
  }

  .dashboard-strip>div:nth-child(2n){
    border-right:0;
  }

  .dashboard-strip>div:nth-child(-n+2){
    border-bottom:1px solid var(--line);
  }

  .dashboard-chart-grid{
    gap:11px;
  }

  .chart-canvas-wrap{
    height:245px;
    padding:13px 12px 12px;
  }

  .payment-chart-body{
    display:grid;
    grid-template-columns:160px minmax(0,1fr);
    align-items:center;
    gap:14px;
    padding:14px;
  }

  .donut-wrap{
    width:150px;
    height:150px;
  }

  .rank-row{
    grid-template-columns:minmax(0,1fr) minmax(125px,.7fr);
    gap:12px;
  }

  .dashboard-chart-tooltip{
    width:190px;
    max-width:calc(100% - 16px);
  }

  /* POS */
  .app-body.pos-page{
    height:auto!important;
    overflow:auto!important;
  }

  .pos-page .app-shell,
  .pos-page .main-area{
    height:auto!important;
    min-height:100dvh;
    overflow:visible!important;
  }

  .pos-page .page-content{
    height:auto!important;
    overflow:visible!important;
    padding:13px;
  }

  .pos-workspace{
    height:auto!important;
    min-height:0!important;
  }

  .pos-layout{
    grid-template-columns:1fr!important;
    gap:10px;
  }

  .pos-products{
    height:auto!important;
    min-height:0!important;
    overflow:visible;
  }

  .pos-toolbar{
    padding:12px 13px;
    gap:10px;
  }

  .search-box{
    width:min(360px,50%);
  }

  .pos-category-wrap{
    min-height:43px;
    padding:7px 10px;
  }

  .product-scroll{
    max-height:52dvh;
    min-height:280px;
    border-bottom:0;
  }

  .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding:9px;
    gap:7px;
  }

  .product-card{
    min-height:82px;
    padding:9px 10px;
  }

  .cart-panel{
    position:static!important;
    top:auto!important;
    height:auto!important;
    min-height:0;
    overflow:visible!important;
  }

  .cart-lines{
    max-height:270px;
    flex:none;
  }

  .cart-checkout{
    position:static;
  }
}

/* ------------------------------- Phone UI -------------------------------- */
@media(max-width:680px){

  .topbar{
    height:54px;
    padding:0 10px;
  }

  .topbar-title{
    max-width:34vw;
    font-size:11.5px;
  }

  .topbar-user-copy{
    display:none!important;
  }

  .user-menu-btn{
    padding:0 6px;
  }

  .user-chevron{
    display:none;
  }

  .page-content{
    padding:13px 10px 24px;
  }

  .page-head{
    flex-direction:column;
    gap:10px;
    margin-bottom:12px;
  }

  .page-head>div{
    width:100%;
  }

  .page-head h1{
    font-size:16px;
    margin-bottom:4px;
  }

  .page-head p{
    font-size:10px;
  }

  .head-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .head-actions>.btn:only-child,
  .page-head>.btn:only-child{
    width:100%;
  }

  .head-actions .btn{
    min-width:0;
  }

  .btn{
    min-height:35px;
    padding:7px 10px;
    font-size:10px;
  }

  .btn-sm{
    min-height:30px;
    padding:5px 8px;
    font-size:9px;
  }

  .card-head{
    align-items:flex-start;
    flex-wrap:wrap;
    padding:12px;
  }

  .table-wrap table{
    min-width:610px;
  }

  th,
  td{
    padding:9px 11px;
    font-size:10.5px;
  }

  th{
    font-size:8.7px;
  }

  .row-actions{
    gap:4px;
  }

  /* Dashboard: two compact columns, then one on very narrow phones. */
  .dashboard-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px;
  }

  .dashboard-kpi{
    min-height:92px;
    padding:11px;
    border-radius:8px;
  }

  .dashboard-kpi-top{
    align-items:flex-start;
    font-size:9.3px;
  }

  .kpi-mini{
    font-size:8px;
  }

  .dashboard-kpi-value{
    margin:8px 0 5px;
    font-size:15px;
  }

  .dashboard-kpi-value small{
    font-size:8px;
  }

  .dashboard-kpi-foot{
    font-size:8.3px;
    white-space:normal;
    line-height:1.35;
  }

  .dashboard-strip{
    grid-template-columns:1fr!important;
    border-radius:8px;
  }

  .dashboard-strip>div{
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
  }

  .dashboard-strip>div:last-child{
    border-bottom:0!important;
  }

  /* Dashboard date filter */
  .dashboard-filter-bar{
    grid-template-columns:1fr!important;
    gap:9px;
    padding:11px;
    margin-bottom:11px;
    border-radius:8px;
  }

  .dashboard-filter-summary{
    grid-row:auto!important;
  }

  .dashboard-filter-summary>strong{
    font-size:11px;
    white-space:normal;
  }

  .dashboard-filter-quick{
    width:100%;
    justify-self:stretch!important;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }

  .dashboard-filter-quick::-webkit-scrollbar{
    display:none;
  }

  .dashboard-filter-chip{
    flex:none;
    min-height:30px;
    padding:0 9px;
    font-size:9px;
  }

  .dashboard-filter-form{
    grid-column:auto!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px;
  }

  .dashboard-date-separator{
    display:none!important;
  }

  .dashboard-filter-apply{
    grid-column:1 / -1!important;
    width:100%;
  }

  .dashboard-date-field input{
    height:36px;
    font-size:10px;
  }

  /* Charts */
  .dashboard-card-head{
    min-height:0;
  }

  .chart-key{
    display:flex!important;
    width:100%;
    gap:8px;
    margin-top:2px;
    font-size:8px;
  }

  .chart-canvas-wrap{
    height:225px;
    padding:10px 8px 10px;
  }

  .payment-chart-body{
    display:flex!important;
    flex-direction:column;
    gap:12px;
    padding:13px;
  }

  .donut-wrap{
    width:138px;
    height:138px;
  }

  .donut-center{
    inset:30px;
  }

  .payment-legend{
    width:100%;
  }

  .payment-legend-row{
    padding:7px 0;
  }

  .dashboard-chart-tooltip{
    width:178px;
    max-width:calc(100% - 12px);
    padding:9px 10px;
    border-radius:8px;
  }

  .dashboard-chart-tooltip-rows>div{
    min-height:24px;
  }

  .rank-list{
    padding:4px 12px 8px;
  }

  .rank-row{
    grid-template-columns:1fr;
    gap:6px;
    padding:9px 0;
  }

  .rank-right{
    text-align:left;
  }

  .rank-right strong{
    margin-bottom:5px;
  }

  .stock-mini{
    padding:4px 12px 8px;
  }

  .stock-mini>div{
    gap:10px;
    padding:9px 0;
  }

  /* POS phone */
  .pos-page .page-content{
    padding:10px;
  }

  .pos-toolbar{
    flex-direction:column;
    align-items:stretch;
    padding:11px;
  }

  .pos-toolbar h1{
    font-size:13.5px;
  }

  .search-box{
    width:100%!important;
  }

  .pos-category-wrap{
    gap:8px;
    padding:6px 8px;
  }

  .product-count{
    display:none;
  }

  .product-scroll{
    min-height:250px;
    max-height:48dvh;
  }

  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding:7px;
    gap:6px;
  }

  .product-card{
    min-height:80px;
    padding:8px 9px;
    border-radius:7px;
  }

  .product-name{
    font-size:9.8px;
  }

  .product-category,
  .product-stock{
    font-size:8px;
  }

  .product-price{
    font-size:9px;
  }

  .cart-panel{
    padding:12px;
  }

  .cart-lines{
    max-height:240px;
  }

  .checkout-fields{
    grid-template-columns:1fr!important;
  }

  .summary-input .form-control{
    width:105px;
  }

  /* Forms */
  .form-card{
    padding:13px;
  }

  .form-body,
  .settings-form{
    padding:13px;
  }

  .form-control{
    height:39px;
    font-size:11px;
  }

  textarea.form-control{
    min-height:76px;
  }

  .form-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .form-actions .btn{
    width:100%;
  }

  .toggle-row{
    min-height:48px;
    padding:9px 10px;
  }

  .settings-logo-row{
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:12px;
  }

  .settings-logo-preview{
    width:70px;
    height:70px;
  }

  /* Modals become bottom-sheet-like without looking oversized. */
  .modal{
    padding:10px;
    align-items:flex-end;
  }

  .modal-card,
  .modal-wide,
  .modal-small{
    width:100%!important;
    max-height:88dvh;
    border-radius:10px 10px 8px 8px;
  }

  .modal-head{
    padding:12px 13px;
  }

  .modal-form{
    padding:12px 13px 13px;
  }

  .modal-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .modal-actions .btn{
    width:100%;
  }

  /* Login */
  .login-body{
    padding:18px 13px;
  }

  .login-card{
    width:min(380px,100%);
    padding:26px 20px 21px;
    border-radius:9px;
  }

  .login-brand{
    margin-bottom:22px;
  }

  .login-heading{
    margin-bottom:20px;
  }

  .login-heading h1{
    font-size:20px;
  }

  .login-form{
    max-width:none;
  }

  .login-footer{
    max-width:none;
    margin-top:21px;
  }

  /* Receipt */
  .receipt{
    width:100%;
    max-width:100%;
    padding:15px 12px;
  }

  .danger-zone{
    padding:13px;
  }
}

/* ---------------------------- Very small phones --------------------------- */
@media(max-width:430px){

  .topbar-title{
    max-width:30vw;
  }

  .topbar-logout{
    width:32px;
    height:32px;
  }

  .user-menu-btn{
    height:32px;
  }

  .topbar-avatar{
    width:23px;
    height:23px;
  }

  .page-content{
    padding-left:8px;
    padding-right:8px;
  }

  .head-actions{
    grid-template-columns:1fr;
  }

  .dashboard-kpi-grid{
    grid-template-columns:1fr!important;
  }

  .dashboard-kpi{
    min-height:86px;
  }

  .dashboard-filter-form{
    grid-template-columns:1fr!important;
  }

  .dashboard-filter-apply{
    grid-column:auto!important;
  }

  .chart-canvas-wrap{
    height:215px;
    padding-left:5px;
    padding-right:5px;
  }

  .chart-key{
    gap:6px;
    font-size:7.8px;
  }

  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .product-card{
    min-height:78px;
    padding:8px;
  }

  .product-bottom{
    gap:5px;
  }

  .form-actions,
  .modal-actions{
    grid-template-columns:1fr;
  }

  .settings-logo-row{
    grid-template-columns:1fr!important;
  }

  .settings-logo-preview{
    width:72px;
    height:72px;
  }
}

/* ----------------------------- Landscape phone ---------------------------- */
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){

  .sidebar{
    width:min(260px,72vw);
  }

  .topbar{
    height:50px;
  }

  .page-content{
    padding-top:10px;
  }

  .product-scroll{
    max-height:58dvh;
  }

  .modal-card,
  .modal-wide,
  .modal-small{
    max-height:94dvh;
  }
}

/* Keep print output untouched by mobile layout overrides. */
@media print{
  html,
  body{
    overflow:visible!important;
  }
}


/* ========================================================================== */
/* V16 debts + POS payment dropdown publish polish                             */
/* ========================================================================== */
.checkout-fields{grid-template-columns:1fr 1fr;gap:8px}
.checkout-field{min-width:0;display:flex;flex-direction:column;gap:5px;color:#68746f;font-size:8.8px;font-weight:500}
.checkout-field-payment{grid-column:1 / -1}
.checkout-field-payment .mfp-select{width:100%}
.checkout-field-payment .mfp-select-menu{top:auto;bottom:calc(100% + 5px);max-height:220px}
.cart-checkout{position:relative;z-index:4}
.pos-debt-note{margin:0 0 8px;padding:8px 9px;border:1px solid #eadfbe;border-radius:7px;background:#fffaf0;color:#786236;font-size:8.8px;line-height:1.45}
.form-control.debt-required{border-color:#c7a75e;box-shadow:0 0 0 3px rgba(199,167,94,.08)}

.payment-card{overflow:visible!important}
.payment-card .payment-chart-body,.payment-card .payment-legend{min-height:0;overflow:visible}
.payment-debt{background:#c8aa67}
.dashboard-debt-kpi .dashboard-kpi-value,.debt-amount{color:#775f28}
.dashboard-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.dashboard-strip{grid-template-columns:repeat(6,minmax(0,1fr))}

.debt-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.debt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.debt-search{display:flex;align-items:center;gap:7px;width:min(470px,100%)}
.debt-tabs{display:flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--line);border-radius:8px;background:#fafbfb}
.debt-tabs a{min-height:29px;display:inline-flex;align-items:center;justify-content:center;padding:0 9px;border-radius:6px;color:#6d7974;font-size:9.5px;font-weight:500}
.debt-tabs a:hover{color:#3d4944}
.debt-tabs a.active{background:#fff;color:var(--brand-hover);box-shadow:0 1px 4px rgba(20,35,30,.06)}
.customer-account-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.6fr);gap:14px;align-items:start}
.debt-payment-card{position:sticky;top:76px}
.credit-sale-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:11px 14px;border:1px solid #eadfbe;border-radius:9px;background:#fffaf0}
.credit-sale-banner>div{display:flex;flex-direction:column;gap:3px}
.credit-sale-banner>div:last-child{text-align:right}
.credit-sale-banner span,.credit-sale-banner small{color:#8b7340;font-size:8.8px}
.credit-sale-banner strong{color:#5f4b22;font-size:11px;font-weight:550}
.report-kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))}

@media(max-width:1250px){
  .dashboard-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard-strip>div:nth-child(3n){border-right:0}
  .dashboard-strip>div:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .debt-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .customer-account-grid{grid-template-columns:1fr}
  .debt-payment-card{position:static}
  .debt-toolbar{align-items:stretch;flex-direction:column}
  .debt-search{width:100%}
  .debt-tabs{align-self:flex-start}
}
@media(max-width:680px){
  .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-strip{grid-template-columns:1fr!important}
  .dashboard-strip>div{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .dashboard-strip>div:last-child{border-bottom:0!important}
  .debt-kpi-grid{grid-template-columns:1fr!important}
  .debt-toolbar{padding:10px}
  .debt-search{display:grid;grid-template-columns:1fr auto}
  .debt-tabs{width:100%}
  .debt-tabs a{flex:1}
  .credit-sale-banner{align-items:flex-start;flex-direction:column}
  .credit-sale-banner>div:last-child{text-align:left}
  .checkout-fields{grid-template-columns:1fr}
  .checkout-field-payment{grid-column:auto}
  .checkout-field-payment .mfp-select-menu{top:calc(100% + 5px);bottom:auto}
}
@media(max-width:430px){
  .dashboard-kpi-grid{grid-template-columns:1fr!important}
  .debt-search{grid-template-columns:1fr}
  .debt-search .btn{width:100%}
}


/* ========================================================================== */
/* V17 POS current-bill scroll fix                                             */
/* One desktop scroll for the entire bill; no cramped inner cart-line scroll.  */
/* ========================================================================== */

@media(min-width:901px){

  /*
   * Keep the Current Bill inside the POS workspace height, but make the
   * ENTIRE card the scroll container. This means many sale items, customer
   * fields, Debt note and Complete sale all remain reachable.
   */
  .pos-page .cart-panel{
    height:100%;
    min-height:0;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:#cbd4d0 transparent;
    padding:0!important;
  }

  .pos-page .cart-panel::-webkit-scrollbar{
    width:5px;
  }

  .pos-page .cart-panel::-webkit-scrollbar-track{
    background:transparent;
  }

  .pos-page .cart-panel::-webkit-scrollbar-thumb{
    background:#cbd4d0;
    border-radius:999px;
  }

  .pos-page .cart-panel::-webkit-scrollbar-thumb:hover{
    background:#adbab5;
  }

  /*
   * Header stays visible while the rest of the bill moves underneath it.
   * It also gets its own normal padding because cart-panel padding is removed.
   */
  .pos-page .cart-head{
    position:sticky;
    top:0;
    z-index:8;
    margin:0;
    padding:14px 15px 11px;
    background:rgba(255,255,255,.985);
    border-bottom:1px solid var(--line);
  }

  /*
   * IMPORTANT:
   * Product lines no longer have their own small scroll area.
   * All products are shown as normal rows inside the main bill scroll.
   */
  .pos-page .cart-lines{
    flex:none!important;
    min-height:118px;
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
    padding:5px 15px 7px;
    scrollbar-width:none;
  }

  .pos-page .cart-lines::-webkit-scrollbar{
    display:none;
  }

  .pos-page .cart-empty{
    min-height:118px;
    display:grid;
    place-items:center;
  }

  .pos-page .cart-line{
    padding:10px 0;
  }

  /*
   * Checkout is part of the SAME scroll.
   * It is no longer squeezed into the remaining fixed space.
   */
  .pos-page .cart-checkout{
    position:relative;
    z-index:4;
    flex:none!important;
    margin:0;
    padding:6px 15px 14px;
    background:#fff;
    border-top:1px solid var(--line);
  }

  .pos-page .cart-summary{
    margin-top:0;
  }

  /*
   * Give the final button breathing room so it never sits flush against
   * the bottom edge after scrolling.
   */
  .pos-page #completeSale{
    margin-top:2px;
  }

  .pos-page #posError{
    padding-bottom:2px;
  }

  /*
   * Checkout custom select continues to open UP on desktop so Bank / Debt
   * are visible even when the payment field is near the bottom.
   */
  .pos-page .checkout-field-payment .mfp-select-menu{
    top:auto!important;
    bottom:calc(100% + 5px)!important;
    max-height:210px;
  }
}


/* Mobile/tablet: use the normal page scroll, never nested bill scrolling. */
@media(max-width:900px){

  .pos-page .cart-panel{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:12px!important;
  }

  .pos-page .cart-head{
    position:static;
    padding:0 0 11px;
    background:#fff;
  }

  .pos-page .cart-lines{
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
    min-height:100px;
    padding:4px 0 7px;
  }

  .pos-page .cart-empty{
    min-height:100px;
  }

  .pos-page .cart-checkout{
    padding:5px 0 0;
  }

  /*
   * On mobile the whole page can move, so the custom payment menu can open
   * naturally downward without being clipped.
   */
  .pos-page .checkout-field-payment .mfp-select-menu{
    top:calc(100% + 5px)!important;
    bottom:auto!important;
  }
}

/* ========================================================================== */
/* V18 End Day / Stocktake / Data & Backup                                    */
/* ========================================================================== */

/* End Day */
.operations-head{align-items:center}
.end-day-filter-card{padding:11px 13px}
.end-day-filter{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.end-day-filter label{display:flex;flex-direction:column;gap:5px;min-width:155px;color:var(--muted);font-size:9px;font-weight:500}
.end-day-filter .form-control{height:35px}
.closing-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.closing-kpi{min-width:0;padding:13px 14px;background:#fff;border:1px solid var(--line);border-radius:9px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.closing-kpi:hover{transform:translateY(-1px);border-color:#d0dad6;box-shadow:0 6px 18px rgba(20,35,30,.04)}
.closing-kpi>span{display:block;color:var(--muted);font-size:9.5px}
.closing-kpi>strong{display:block;margin:9px 0 5px;color:#28342f;font-size:16px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.closing-kpi>strong small{font-size:8px;font-weight:500;color:var(--muted)}
.closing-kpi>em{display:block;font-style:normal;color:#8d9793;font-size:8.5px;line-height:1.4}
.closing-layout{align-items:start}
.closing-summary-list{padding:6px 17px 12px}
.closing-summary-list>div{min-height:39px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);font-size:10px}
.closing-summary-list>div:last-child{border-bottom:0}
.closing-summary-list span{color:var(--muted)}
.closing-summary-list strong{font-size:10.5px;font-weight:550;white-space:nowrap}
.closing-summary-divider{margin-top:5px;border-top:1px dashed #cfd8d4}
.closing-summary-total span,.closing-summary-total strong{color:#34413c;font-weight:550}
.closing-card{overflow:hidden}
.closing-result{padding:12px 17px 16px}
.closing-result>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:37px;border-bottom:1px solid var(--line);font-size:10px}
.closing-result>div span{color:var(--muted)}
.closing-result>div strong{font-size:10.5px;font-weight:550}
.closing-result-main{margin-top:4px}
.closing-result-main span{color:#3f4b46!important;font-weight:500}
.closing-result-main strong{font-size:12px!important}
.closing-difference{margin-top:5px;padding-top:4px;border-bottom:0!important}
.closing-difference strong{font-size:15px!important;color:var(--brand-hover)}
.closing-difference.negative strong,.closing-negative-text{color:var(--danger)!important}
.closing-difference.positive strong,.closing-positive-text{color:var(--brand-hover)!important}
.closing-result>small{display:block;margin-top:10px;color:var(--muted);font-size:8.8px;line-height:1.45}
.closing-live-expected{padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft)}
.closing-live-expected span,.closing-live-expected strong,.closing-live-expected small{display:block}
.closing-live-expected span{font-size:9px;color:var(--muted)}
.closing-live-expected strong{margin:4px 0 3px;font-size:15px;font-weight:550}
.closing-live-expected small{font-size:8.5px;color:#8b9692;line-height:1.4}
.closing-live-difference{display:flex;align-items:center;justify-content:space-between;padding:3px 1px;font-size:10px}
.closing-live-difference span{color:var(--muted)}
.closing-live-difference strong{font-size:13px;font-weight:550;color:var(--brand-hover)}
.closing-live-difference strong.negative{color:var(--danger)}
.closing-amend{border-top:1px solid var(--line)}
.closing-amend summary{padding:12px 17px;color:var(--brand);font-size:9.5px;font-weight:500;cursor:pointer;list-style:none}
.closing-amend summary::-webkit-details-marker{display:none}
.closing-amend[open] summary{background:#fafcfc;border-bottom:1px solid var(--line)}
.closing-amend-note{margin:0 17px 12px;padding:8px 9px;border:1px solid #e6ddd0;border-radius:7px;background:#fffaf2;color:#806536;font-size:8.8px;line-height:1.45}

/* Stocktake */
.stocktake-create-grid{align-items:start}
.stocktake-new-card{max-width:430px}
.stocktake-summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.stocktake-summary-strip>div{padding:10px 13px;border-right:1px solid var(--line)}
.stocktake-summary-strip>div:last-child{border-right:0}
.stocktake-summary-strip span,.stocktake-summary-strip strong{display:block}
.stocktake-summary-strip span{font-size:8.8px;color:var(--muted)}
.stocktake-summary-strip strong{margin-top:4px;font-size:11px;font-weight:550}
.stocktake-table-head{align-items:center}
.stocktake-note-row{padding:12px 16px;border-bottom:1px solid var(--line)}
.stocktake-note-row label{display:flex;flex-direction:column;gap:6px;font-size:9px;color:var(--muted);font-weight:500}
.stocktake-table-wrap{max-height:58vh;overflow:auto;overscroll-behavior:contain}
.stocktake-table{min-width:780px}
.stocktake-table td{vertical-align:middle}
.stocktake-table .form-control{height:34px;font-size:10px}
.stocktake-count-input{min-width:105px}
.stocktake-unit-select{min-width:145px}
.stocktake-diff{display:inline-flex;align-items:center;min-height:24px;padding:3px 7px;border-radius:6px;background:#f5f7f6;color:#68736e;font-size:9.5px;font-weight:500;white-space:nowrap}
.stocktake-diff.negative{background:var(--danger-soft);color:var(--danger)}
.stocktake-diff.positive{background:var(--brand-soft);color:var(--brand-hover)}
.stocktake-actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.stocktake-post-note{margin:8px 0 0;text-align:right;color:var(--muted);font-size:8.8px;line-height:1.45}

/* Data & Backup */
.data-filter-card{padding:11px 13px}
.data-tools-filter{justify-content:flex-end}
.data-tools-filter label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:9px;font-weight:500}
.data-tools-filter .form-control{height:35px;min-width:145px}
.date-arrow{height:35px;display:grid;place-items:center;color:#9aa49f;font-size:10px}
.data-tools-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.data-tool-card{min-height:176px;padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.data-tool-card:hover{transform:translateY(-1px);border-color:#d1dbd7;box-shadow:0 7px 20px rgba(20,35,30,.04)}
.data-tool-icon{width:31px;height:31px;border-radius:7px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-hover)}
.data-tool-icon svg{width:16px;height:16px}
.data-tool-card>div:nth-child(2){flex:1}
.data-tool-card h2,.data-bundle-card h2,.backup-card h2{margin:0 0 5px;font-size:12px;font-weight:550}
.data-tool-card p,.data-bundle-card p,.backup-card p{margin:0;color:var(--muted);font-size:9px;line-height:1.5}
.data-tool-card .btn{width:100%}
.data-backup-grid{align-items:stretch}
.data-bundle-card,.backup-card{padding:17px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.data-bundle-card>div,.backup-card>div{max-width:620px}
.data-eyebrow{display:block;margin-bottom:5px;color:var(--brand);font-size:8px;font-weight:600;letter-spacing:.07em}
.backup-note{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #e5ddd1;border-radius:8px;background:#fffaf3;color:#6f624b;font-size:9px;line-height:1.5}
.backup-note strong{flex:none;font-size:9px;font-weight:600}

@media(max-width:1200px){
  .closing-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .data-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .end-day-filter{display:grid;grid-template-columns:1fr 1fr}
  .end-day-filter .btn{grid-column:1/-1;width:100%}
  .end-day-filter label{min-width:0}
  .closing-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .closing-kpi{padding:11px;min-height:90px}
  .closing-kpi>strong{font-size:14px}
  .stocktake-summary-strip{grid-template-columns:1fr 1fr}
  .stocktake-summary-strip>div:nth-child(2){border-right:0}
  .stocktake-summary-strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stocktake-actions{display:grid;grid-template-columns:1fr 1fr}
  .stocktake-actions .btn{width:100%}
  .stocktake-post-note{text-align:left}
  .data-tools-grid{grid-template-columns:1fr 1fr;gap:7px}
  .data-tool-card{min-height:165px;padding:12px}
  .data-bundle-card,.backup-card{align-items:flex-start;flex-direction:column}
  .data-bundle-card .btn,.backup-card .btn{width:100%}
  .data-tools-filter{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .data-tools-filter .date-arrow{display:none}
  .data-tools-filter .btn{grid-column:1/-1}
  .data-tools-filter .form-control{min-width:0;width:100%}
}

@media(max-width:480px){
  .end-day-filter{grid-template-columns:1fr}
  .end-day-filter .btn{grid-column:auto}
  .closing-kpi-grid{grid-template-columns:1fr}
  .stocktake-summary-strip{grid-template-columns:1fr 1fr}
  .stocktake-actions{grid-template-columns:1fr}
  .data-tools-grid{grid-template-columns:1fr}
  .data-tool-card{min-height:0}
  .data-tools-filter{grid-template-columns:1fr}
  .data-tools-filter .btn{grid-column:auto}
  .backup-note{flex-direction:column;gap:3px}
}


/* ========================================================================== */
/* V19 REPORTS RESPONSIVE FINAL FIX                                            */
/* Keeps report cards readable on desktop, tablet and mobile.                  */
/* ========================================================================== */

/* Report page header / date filter */
.page-head .date-filter{
  min-width:0;
  display:flex;
  align-items:flex-end;
  gap:7px;
  flex-wrap:wrap;
}

.page-head .date-filter .form-control{
  width:145px;
  min-width:0;
  height:35px;
  font-size:10px;
}

.page-head .date-filter>span{
  height:35px;
  display:grid;
  place-items:center;
  padding:0 2px;
  color:#909b96;
  font-size:9px;
  font-weight:400;
}

/* Main report KPI grid */
.report-kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

/*
 * Report cards need a little less height than dashboard cards and must never
 * turn into narrow vertical text columns.
 */
.report-kpi-grid .kpi-card{
  min-width:0;
  min-height:112px;
  padding:14px;
  border-radius:9px;
  overflow:hidden;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.report-kpi-grid .kpi-card:hover{
  transform:translateY(-1px);
  border-color:#d2dcd8;
  box-shadow:0 6px 18px rgba(20,35,30,.04);
}

.report-kpi-grid .kpi-card>span{
  display:block;
  min-height:14px;
  color:var(--muted);
  font-size:9.5px;
  line-height:1.35;
  font-weight:400;
}

.report-kpi-grid .kpi-card>strong{
  display:flex;
  align-items:baseline;
  gap:4px;
  width:100%;
  min-width:0;
  margin:10px 0 6px;
  color:#202b27;
  font-size:18px;
  line-height:1.15;
  font-weight:550;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.report-kpi-grid .kpi-card>strong small{
  flex:none;
  color:var(--muted);
  font-size:8px;
  line-height:1;
  font-weight:500;
}

.report-kpi-grid .kpi-card>em{
  display:block;
  color:#8b9691;
  font-size:8.7px;
  line-height:1.45;
  font-style:normal;
  font-weight:400;
}

/* Top sold product card directly below reports */
.report-kpi-grid + .card{
  margin-top:0;
}

.report-kpi-grid + .card .card-head{
  padding:14px 16px;
}

.report-kpi-grid + .card .card-head h2{
  font-size:13px;
}

.report-kpi-grid + .card .card-head p{
  max-width:620px;
  font-size:9.5px;
  line-height:1.45;
}

/* Medium desktop / small laptops */
@media(max-width:1250px){
  .report-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Tablet */
@media(max-width:820px){

  /*
   * Reports header gets its own layout because the global head-actions mobile
   * rule is intended for buttons, not a two-date filter.
   */
  .page-head .head-actions:has(.date-filter){
    width:100%;
    display:flex;
    align-items:flex-end;
    gap:7px;
    flex-wrap:wrap;
  }

  .page-head .head-actions:has(.date-filter)>.btn{
    flex:none;
  }

  .page-head .date-filter{
    flex:1 1 440px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;
    align-items:end;
    gap:7px;
  }

  .page-head .date-filter .form-control{
    width:100%;
    min-width:0;
  }

  .report-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .report-kpi-grid .kpi-card{
    min-height:106px;
    padding:12px 13px;
  }

  .report-kpi-grid .kpi-card>strong{
    font-size:16px;
  }
}

/* Phones */
@media(max-width:620px){

  .page-head .head-actions:has(.date-filter){
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px;
  }

  .page-head .head-actions:has(.date-filter)>.btn{
    width:100%;
  }

  .page-head .date-filter{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  /*
   * Hide the separate "to" word on mobile; side-by-side date inputs already
   * communicate the range and this prevents the broken floating "to" seen
   * in the screenshot.
   */
  .page-head .date-filter>span{
    display:none;
  }

  .page-head .date-filter .form-control{
    width:100%;
    height:38px;
    font-size:10.5px;
  }

  .page-head .date-filter .btn{
    grid-column:1 / -1;
    width:100%;
    min-height:36px;
  }

  .report-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px;
    margin-bottom:11px;
  }

  .report-kpi-grid .kpi-card{
    min-height:98px;
    padding:11px;
    border-radius:8px;
  }

  .report-kpi-grid .kpi-card>span{
    min-height:0;
    font-size:9px;
  }

  .report-kpi-grid .kpi-card>strong{
    margin:8px 0 5px;
    font-size:15px;
    overflow:visible;
    text-overflow:clip;
  }

  .report-kpi-grid .kpi-card>strong small{
    font-size:7.7px;
  }

  .report-kpi-grid .kpi-card>em{
    font-size:8.2px;
    line-height:1.4;
  }

  .report-kpi-grid + .card .card-head{
    padding:12px;
  }

  .report-kpi-grid + .card .card-head h2{
    font-size:12px;
  }

  .report-kpi-grid + .card .card-head p{
    font-size:8.8px;
  }

  /*
   * Keep the report table usable without stretching the whole phone page.
   */
  .report-kpi-grid + .card .table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  .report-kpi-grid + .card table{
    min-width:520px;
  }
}

/* Very small phones */
@media(max-width:390px){

  .page-head .date-filter{
    grid-template-columns:1fr;
  }

  .page-head .date-filter .btn{
    grid-column:auto;
  }

  .report-kpi-grid{
    grid-template-columns:1fr!important;
  }

  .report-kpi-grid .kpi-card{
    min-height:86px;
  }

  .report-kpi-grid .kpi-card>strong{
    font-size:16px;
  }
}

/* Browsers without :has() still get a clean mobile date filter. */
@supports not selector(:has(*)){
  @media(max-width:820px){
    .page-head .date-filter{
      width:100%;
    }
  }
}


/* ========================================================================== */
/* V20 PRODUCTS LIST RESPONSIVE FINAL FIX                                      */
/* Desktop keeps the normal table. Mobile converts the main product list       */
/* into compact readable cards without changing templates or backend code.     */
/* ========================================================================== */

/* Search toolbar polish */
.product-search{
  min-width:0;
}

.product-search .form-control{
  min-width:0;
  flex:1 1 220px;
}

.product-search .btn{
  flex:none;
}

/* Main Products table only — not the Manage Categories modal. */
.toolbar.card.compact + .card .unit-tags{
  align-items:center;
}

.toolbar.card.compact + .card .unit-tags span{
  line-height:1.25;
  white-space:nowrap;
}

.toolbar.card.compact + .card td:last-child{
  width:1%;
  white-space:nowrap;
}

/* Slightly better action spacing on normal desktop tables. */
.toolbar.card.compact + .card .row-actions{
  flex-wrap:nowrap;
}


/* -------------------------------------------------------------------------- */
/* Tablet                                                                     */
/* -------------------------------------------------------------------------- */
@media(max-width:900px){

  body:has(.product-search) .page-head .head-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }

  body:has(.product-search) .page-head .head-actions .btn{
    width:100%;
    min-width:0;
  }

  body:has(.product-search) .toolbar.card.compact{
    padding:10px;
  }

  .product-search{
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:7px;
  }

  .product-search .form-control{
    width:100%;
    min-width:0;
  }
}


/* -------------------------------------------------------------------------- */
/* Phones — product list becomes cards                                        */
/* -------------------------------------------------------------------------- */
@media(max-width:680px){

  /* Top actions: two secondary controls, primary Add Product full width. */
  body:has(.product-search) .page-head .head-actions{
    grid-template-columns:1fr 1fr!important;
  }

  body:has(.product-search) .page-head .head-actions>a.btn-primary{
    grid-column:1 / -1;
  }

  /* Search field on its own row, actions beneath it. */
  .product-search{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .product-search .form-control{
    grid-column:1 / -1;
    height:38px;
  }

  .product-search .btn{
    width:100%;
  }

  .product-search .btn-secondary:only-of-type{
    grid-column:1 / -1;
  }

  /*
   * Transform ONLY the main Products list into cards.
   * The category-management modal remains a table with its own scroll.
   */
  .toolbar.card.compact + .card{
    background:transparent;
    border:0;
    box-shadow:none;
    overflow:visible;
  }

  .toolbar.card.compact + .card > .table-wrap{
    width:100%;
    overflow:visible;
  }

  .toolbar.card.compact + .card table{
    display:block;
    width:100%;
    min-width:0!important;
    border-collapse:separate;
  }

  .toolbar.card.compact + .card thead{
    display:none;
  }

  .toolbar.card.compact + .card tbody{
    display:grid;
    width:100%;
    gap:8px;
  }

  .toolbar.card.compact + .card tbody tr{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 12px;
    width:100%;
    padding:12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    box-shadow:0 4px 16px rgba(20,35,30,.025);
  }

  .toolbar.card.compact + .card tbody tr:hover{
    background:#fff;
    border-color:#d5dedb;
  }

  .toolbar.card.compact + .card tbody td{
    min-width:0;
    width:auto!important;
    padding:9px 0;
    border:0;
    font-size:10.5px;
    white-space:normal!important;
    vertical-align:top;
  }

  /* Product name / base unit */
  .toolbar.card.compact + .card tbody td:nth-child(1){
    grid-column:1 / -1;
    padding-top:0;
    padding-bottom:10px;
    margin-bottom:1px;
    border-bottom:1px solid var(--line);
  }

  .toolbar.card.compact + .card .table-primary{
    display:block;
    color:#25312c;
    font-size:12px;
    line-height:1.3;
    font-weight:550;
  }

  .toolbar.card.compact + .card .cell-sub{
    margin-top:3px;
    font-size:8.7px;
  }

  /* Category and Stock */
  .toolbar.card.compact + .card tbody td:nth-child(2),
  .toolbar.card.compact + .card tbody td:nth-child(3){
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .toolbar.card.compact + .card tbody td:nth-child(2)::before,
  .toolbar.card.compact + .card tbody td:nth-child(3)::before,
  .toolbar.card.compact + .card tbody td:nth-child(4)::before,
  .toolbar.card.compact + .card tbody td:nth-child(5)::before{
    display:block;
    color:#8a9590;
    font-size:8px;
    line-height:1.2;
    font-weight:500;
    letter-spacing:.035em;
    text-transform:uppercase;
  }

  .toolbar.card.compact + .card tbody td:nth-child(2)::before{
    content:"Category";
  }

  .toolbar.card.compact + .card tbody td:nth-child(3)::before{
    content:"Stock";
  }

  /* Selling units gets full width */
  .toolbar.card.compact + .card tbody td:nth-child(4){
    grid-column:1 / -1;
    padding-top:8px;
    padding-bottom:8px;
    border-top:1px solid #f0f3f2;
  }

  .toolbar.card.compact + .card tbody td:nth-child(4)::before{
    content:"Selling units";
    margin-bottom:6px;
  }

  .toolbar.card.compact + .card .unit-tags{
    width:100%;
    gap:5px;
  }

  .toolbar.card.compact + .card .unit-tags span{
    max-width:100%;
    padding:5px 7px;
    border-radius:6px;
    font-size:8.7px;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  /* Status */
  .toolbar.card.compact + .card tbody td:nth-child(5){
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 0;
    border-top:1px solid #f0f3f2;
  }

  .toolbar.card.compact + .card tbody td:nth-child(5)::before{
    content:"Status";
    margin-right:auto;
  }

  /* Actions */
  .toolbar.card.compact + .card tbody td:nth-child(6){
    grid-column:1 / -1;
    padding:9px 0 0;
    border-top:1px solid var(--line);
  }

  .toolbar.card.compact + .card .row-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:6px;
  }

  .toolbar.card.compact + .card .row-actions form{
    width:100%;
    min-width:0;
  }

  .toolbar.card.compact + .card .row-actions .btn,
  .toolbar.card.compact + .card .row-actions form .btn{
    width:100%;
    min-width:0;
    min-height:32px;
    padding:5px 6px;
    font-size:8.8px;
    white-space:nowrap;
  }

  /*
   * Empty products result should remain one simple card rather than trying
   * to use the six-column mobile card layout.
   */
  .toolbar.card.compact + .card tbody tr:has(td.empty){
    display:block;
    padding:0;
  }

  .toolbar.card.compact + .card tbody tr:has(td.empty) td.empty{
    display:block;
    width:100%!important;
    padding:28px 14px!important;
    border:1px solid var(--line);
    border-radius:9px;
    background:#fff;
  }

  /* Manage Categories modal remains contained and readable. */
  #manageCategoriesModal .modal-table-wrap{
    width:100%;
    max-height:58dvh;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }

  #manageCategoriesModal table{
    min-width:600px;
  }

  #manageCategoriesModal th,
  #manageCategoriesModal td{
    padding:9px 10px;
  }

  #manageCategoriesModal .table-input{
    min-width:150px;
  }
}


/* -------------------------------------------------------------------------- */
/* Very small phones                                                          */
/* -------------------------------------------------------------------------- */
@media(max-width:420px){

  body:has(.product-search) .page-head .head-actions{
    grid-template-columns:1fr!important;
  }

  body:has(.product-search) .page-head .head-actions>a.btn-primary{
    grid-column:auto;
  }

  .product-search{
    grid-template-columns:1fr!important;
  }

  .product-search .form-control{
    grid-column:auto;
  }

  .toolbar.card.compact + .card tbody tr{
    grid-template-columns:1fr;
    padding:11px;
  }

  .toolbar.card.compact + .card tbody td:nth-child(1),
  .toolbar.card.compact + .card tbody td:nth-child(4),
  .toolbar.card.compact + .card tbody td:nth-child(5),
  .toolbar.card.compact + .card tbody td:nth-child(6){
    grid-column:1;
  }

  .toolbar.card.compact + .card tbody td:nth-child(2),
  .toolbar.card.compact + .card tbody td:nth-child(3){
    grid-column:1;
  }

  .toolbar.card.compact + .card tbody td:nth-child(3){
    padding-top:2px;
  }

  .toolbar.card.compact + .card .row-actions{
    grid-template-columns:1fr 1fr;
  }

  .toolbar.card.compact + .card .row-actions>button:last-child{
    grid-column:1 / -1;
  }
}


/* -------------------------------------------------------------------------- */
/* Fallback for browsers without :has()                                       */
/* Main product list still gets the important responsive card treatment.       */
/* -------------------------------------------------------------------------- */
@supports not selector(:has(*)){
  @media(max-width:680px){
    .product-search{
      width:100%;
    }
  }
}