/* KSL POS - fixed responsive light UI */
:root{
  --bg:#f3f7fc;
  --bg2:#eef4fb;
  --surface:#ffffff;
  --surface2:#f8fbff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --line2:#cbd5e1;
  --primary:#0b73e8;
  --primary2:#064cae;
  --primary3:#0ea5e9;
  --success:#059669;
  --danger:#dc2626;
  --warning:#f59e0b;
  --shadow:0 18px 45px rgba(15,23,42,.08);
  --shadow2:0 8px 24px rgba(2,52,110,.10);
  --radius:22px;
  --radius2:16px;
  --sidebar:280px;
}

*{box-sizing:border-box}
html{height:100%;scroll-behavior:smooth}
body{
  min-height:100%;
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% -10%,rgba(14,165,233,.16),transparent 34%),
    radial-gradient(circle at 90% 0%,rgba(11,115,232,.12),transparent 30%),
    linear-gradient(180deg,#fbfdff 0%,var(--bg) 100%);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
button{border:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(11,115,232,.18);
  outline-offset:2px;
}

/* Common controls */
.input{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:14px;
  padding:12px 14px;
  outline:0;
  min-height:46px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.input:focus{
  border-color:rgba(11,115,232,.55);
  box-shadow:0 0 0 4px rgba(11,115,232,.09);
  background:#fff;
}
.input-large{
  min-height:58px;
  padding:15px 18px;
  border-radius:18px;
  font-size:17px;
  font-weight:700;
}
textarea.input{resize:vertical}

.btn{
  min-height:42px;
  border-radius:14px;
  padding:10px 15px;
  font-weight:850;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 14px 28px rgba(11,115,232,.24);
}
.btn-soft{
  color:var(--primary2);
  background:#edf6ff;
  border:1px solid #cfe7ff;
}
.btn-danger{
  color:var(--danger);
  background:#fff1f2;
  border:1px solid #fecdd3;
}
.btn-full{width:100%}
.btn-lg{min-height:54px;font-size:16px;border-radius:17px}
.btn-mini{
  min-height:34px;
  padding:7px 11px;
  border-radius:11px;
  font-size:12px;
  background:#eef6ff;
  color:var(--primary2);
  border:1px solid #d7ebff;
}
.alert{
  padding:13px 16px;
  border-radius:16px;
  margin-bottom:16px;
  font-weight:800;
}
.alert-success{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0}
.alert-danger{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}
.empty-state{
  padding:26px 18px;
  border:1px dashed var(--line2);
  border-radius:18px;
  background:#fff;
  color:var(--muted);
  text-align:center;
  font-weight:750;
}

/* Login */
.login-body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.login-shell{width:min(440px,100%)}
.login-card{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(226,232,240,.9);
  border-radius:30px;
  padding:36px;
  box-shadow:var(--shadow);
  text-align:center;
}
.login-logo{
  width:min(170px,45vw);
  height:auto;
  margin:0 auto 8px;
  object-fit:contain;
}
.login-card h1{
  margin:4px 0 20px;
  font-size:34px;
  letter-spacing:-.04em;
}
.login-hint{margin-top:16px;color:var(--muted);font-size:13px;font-weight:700}

/* Admin shell */
.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:20px 16px;
  z-index:30;
  background:rgba(255,255,255,.96);
  border-right:1px solid var(--line);
  box-shadow:10px 0 30px rgba(15,23,42,.03);
}
.sidebar-brand{padding:0 6px 20px}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand img{
  width:58px;
  height:58px;
  object-fit:contain;
  flex:0 0 auto;
}
.brand strong{
  display:block;
  font-size:20px;
  line-height:1.1;
  letter-spacing:-.03em;
}
.brand span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:13px;
  font-weight:750;
}
.nav-menu{display:grid;gap:8px}
.nav-menu a{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:15px;
  color:#334155;
  font-weight:850;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.nav-menu a span{
  width:24px;
  text-align:center;
  color:var(--primary);
  font-size:18px;
}
.nav-menu a:hover,.nav-menu a.active{
  background:linear-gradient(135deg,#eef7ff,#f7fbff);
  color:var(--primary2);
  box-shadow:inset 0 0 0 1px rgba(11,115,232,.08);
}
.sidebar-footer{margin-top:auto;padding:12px 8px}
.logout-link{color:var(--danger);font-weight:900}

.main-area{min-width:0}
.topbar{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 26px;
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,250,253,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(226,232,240,.9);
}
.topbar h1{
  margin:0;
  font-size:clamp(23px,2.6vw,32px);
  letter-spacing:-.045em;
}
.topbar p{margin:3px 0 0;color:var(--muted);font-weight:750}
.icon-btn{
  display:none;
  width:44px;
  height:44px;
  border-radius:13px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}
.content-area{padding:24px}

/* Cards / tables */
.panel,.stat-card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(226,232,240,.96);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel{padding:20px}
.panel-flat{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(226,232,240,.96);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.panel-head h2{margin:0;font-size:21px;letter-spacing:-.035em}
.panel-head p{margin:4px 0 0;color:var(--muted);font-weight:700}
.head-actions{display:flex;gap:10px;flex-wrap:wrap}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:20px;
}
.stat-card{
  padding:20px;
  overflow:hidden;
  position:relative;
}
.stat-card::after{
  content:"";
  position:absolute;
  right:-34px;
  top:-34px;
  width:120px;
  height:120px;
  border-radius:999px;
  background:currentColor;
  opacity:.13;
}
.stat-card span{color:var(--muted);font-weight:850}
.stat-card strong{
  display:block;
  margin-top:10px;
  font-size:clamp(24px,2.8vw,32px);
  letter-spacing:-.045em;
  color:var(--text);
}
.accent-blue{color:#0b73e8}
.accent-purple{color:#7c3aed}
.accent-green{color:#059669}
.accent-orange{color:#ea580c}
.dashboard-grid{
  display:grid;
  gap:20px;
}
.wide-dashboard{grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr)}
.mini-list{display:grid;gap:11px}
.mini-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface2);
}
.mini-row strong,.mini-row span{display:block}
.mini-row span{margin-top:3px;color:var(--muted);font-size:13px}
.stats-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}
.mini-stat{
  padding:15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,#f8fbff,#fff);
}
.mini-stat span{display:block;color:var(--muted);font-size:13px;font-weight:800}
.mini-stat strong{display:block;margin-top:7px;font-size:22px}

.page-grid{display:grid;gap:20px}
.two-col{grid-template-columns:380px minmax(0,1fr);align-items:start}
.wide-left{grid-template-columns:420px minmax(0,1fr)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-stack{display:grid;gap:12px;text-align:left}
.form-stack label,.checkout-form label{
  font-size:13px;
  font-weight:850;
  color:#334155;
}
.search-input{margin-bottom:14px}
.inline-search{display:flex;gap:12px;margin-bottom:16px}
.table-wrap{width:100%;overflow:auto}
.data-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}
.data-table th{
  text-align:left;
  padding:13px 12px;
  border-bottom:1px solid var(--line);
  background:#f8fafc;
  color:#64748b;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.data-table td{
  padding:13px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.data-table tr:hover td{background:#fbfdff}
.empty-cell{text-align:center;color:var(--muted);font-weight:750;padding:22px 12px!important}
.actions-cell{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:900;
}
.badge.success{background:#ecfdf5;color:#047857}
.badge.muted{background:#f1f5f9;color:#64748b}

/* POS fullscreen/tablet layout */
.pos-page{
  width:100%;
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 0%,rgba(14,165,233,.15),transparent 32%),
    linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%);
}
.pos-shell{
  height:100vh;
  min-height:700px;
  display:grid;
  grid-template-rows:78px minmax(0,1fr);
}
.pos-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 20px;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  z-index:40;
}
.pos-topbar .brand img{width:58px;height:58px}
.pos-topbar .brand span{
  font-size:21px;
  color:var(--text);
  font-weight:950;
  letter-spacing:-.04em;
}
.pos-topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pos-content-wrap{
  min-height:0;
  padding:16px;
}
.pos-layout{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(360px,30vw,430px);
  gap:16px;
}
.pos-browser,.pos-cart{
  min-height:0;
  padding:16px;
}
.pos-browser{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:12px;
}
.pos-searchbar{min-width:0}
.category-strip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 10px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.category-strip::-webkit-scrollbar{height:7px}
.category-strip::-webkit-scrollbar-thumb{background:#cfe0f6;border-radius:999px}
.category-chip{
  flex:0 0 auto;
  min-width:104px;
  min-height:48px;
  padding:10px 15px;
  border-radius:17px;
  border:1px solid var(--line);
  background:#fff;
  color:#334155;
  font-weight:900;
  cursor:pointer;
  box-shadow:var(--shadow2);
  scroll-snap-align:start;
}
.category-chip.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 12px 28px rgba(11,115,232,.26);
}
.product-grid{
  min-height:0;
  overflow:auto;
  padding:2px 4px 4px 2px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
  align-content:start;
  gap:13px;
}
.product-grid::-webkit-scrollbar,.cart-list::-webkit-scrollbar{width:8px;height:8px}
.product-grid::-webkit-scrollbar-thumb,.cart-list::-webkit-scrollbar-thumb{background:#cfe0f6;border-radius:999px}
.product-card{
  min-height:156px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0%,#f7fbff 100%);
  box-shadow:var(--shadow2);
  padding:15px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:7px;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.product-card:hover{
  transform:translateY(-2px);
  border-color:#b8d8f7;
  box-shadow:0 12px 30px rgba(2,52,110,.13);
}
.product-card-category{
  align-self:flex-start;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--primary2);
  background:#eaf5ff;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}
.product-card strong{
  flex:1;
  font-size:17px;
  line-height:1.28;
  letter-spacing:-.02em;
}
.product-card small{color:var(--muted);font-weight:750}
.product-card b{font-size:19px;color:#0b3c86}

.pos-cart{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:12px;
}
.cart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.cart-head h2{margin:0;font-size:25px;letter-spacing:-.04em}
.cart-list{
  min-height:0;
  overflow:auto;
  display:grid;
  align-content:start;
  gap:10px;
  padding-right:2px;
}
.cart-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 12px;
  align-items:center;
  padding:13px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fbfdff;
}
.cart-item-text{min-width:0}
.cart-item-text strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cart-item-text span{display:block;margin-top:3px;color:var(--muted);font-size:13px;font-weight:700}
.cart-line-total{
  justify-self:end;
  font-size:16px;
  color:#0b3c86;
}
.cart-controls{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.qty-inline-box,.qty-number-box{
  display:inline-grid;
  grid-template-columns:42px minmax(80px,1fr) 42px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:15px;
  overflow:hidden;
  background:#fff;
}
.qty-inline-box{width:176px}
.qty-inline-box button,.qty-number-box button{
  height:42px;
  background:#edf6ff;
  color:var(--primary2);
  font-size:22px;
  font-weight:900;
  cursor:pointer;
}
.qty-inline-box input,.qty-number-box input{
  height:42px;
  width:100%;
  border:0;
  text-align:center;
  padding:0 6px;
  background:#fff;
  font-weight:850;
}
.remove-btn{
  width:40px;
  height:40px;
  border-radius:13px;
  background:#fff1f2;
  color:var(--danger);
  font-size:22px;
  cursor:pointer;
}
.checkout-form{
  display:grid;
  gap:11px;
}
.totals-box{
  display:grid;
  gap:8px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,#f8fbff,#fff);
}
.totals-box div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-weight:850;
}
.totals-box b{color:var(--text)}
.totals-box .grand{
  padding-top:10px;
  border-top:1px dashed #cbd5e1;
  font-size:22px;
  color:var(--text);
}

/* Qty modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.46);
  z-index:100;
}
.modal-backdrop.show{display:flex}
.qty-modal-card{
  width:min(430px,100%);
  position:relative;
  padding:24px;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 26px 90px rgba(15,23,42,.25);
}
.modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border-radius:13px;
  background:#f1f5f9;
  color:#0f172a;
  font-size:24px;
  cursor:pointer;
}
.modal-meta{color:var(--muted);font-weight:850}
.qty-modal-card h3{
  margin:8px 42px 10px 0;
  font-size:28px;
  line-height:1.18;
  letter-spacing:-.04em;
}
.modal-price{
  margin-bottom:5px;
  color:var(--primary2);
  font-size:28px;
  font-weight:950;
}
.modal-subtext{margin-bottom:18px;color:var(--muted);font-weight:800}
.qty-picker-wrap{display:grid;gap:10px;margin-bottom:18px}
.qty-number-box{width:100%;grid-template-columns:54px 1fr 54px}
.qty-number-box button,.qty-number-box input{height:54px;font-size:20px}

/* Invoice */
.invoice-shell{max-width:1040px;margin:0 auto}
.invoice-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.invoice-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:32px;
  box-shadow:var(--shadow);
}
.invoice-top{
  display:flex;
  justify-content:space-between;
  gap:22px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.invoice-brand{
  display:flex;
  align-items:center;
  gap:15px;
}
.invoice-brand img{
  width:82px;
  height:82px;
  object-fit:contain;
}
.invoice-brand h2{
  margin:0 0 4px;
  font-size:30px;
  letter-spacing:-.045em;
}
.invoice-brand p{
  margin:0;
  color:var(--primary2);
  font-weight:900;
}
.invoice-meta{
  display:grid;
  align-content:center;
  gap:5px;
  text-align:right;
  color:var(--muted);
  font-weight:800;
}
.invoice-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:20px 0;
}
.invoice-info div{
  border:1px solid var(--line);
  border-radius:17px;
  padding:14px;
  background:#fbfdff;
}
.invoice-info span,.invoice-info small{display:block;color:var(--muted);font-weight:700}
.invoice-info strong{display:block;margin:5px 0;font-size:18px}
.invoice-table{
  width:100%;
  border-collapse:collapse;
}
.invoice-table th{
  background:#f1f7ff;
  color:#335b8d;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.04em;
}
.invoice-table th,.invoice-table td{
  padding:12px;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.invoice-summary{
  width:min(360px,100%);
  margin:22px 0 0 auto;
  border:1px solid var(--line);
  border-radius:17px;
  overflow:hidden;
}
.invoice-summary div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:13px 15px;
  border-bottom:1px solid var(--line);
}
.invoice-summary div:last-child{border-bottom:0}
.invoice-summary .summary-total{
  background:#eaf5ff;
  color:var(--primary2);
  font-size:21px;
  font-weight:950;
}
.invoice-note{
  margin-top:18px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fbfdff;
  color:#334155;
  font-weight:700;
}

/* Responsive */
@media (max-width:1280px){
  :root{--sidebar:94px}
  .sidebar{padding:18px 12px}
  .sidebar-brand .brand{justify-content:center}
  .sidebar-brand .brand div{display:none}
  .brand img{width:58px;height:58px}
  .nav-menu a{justify-content:center;padding:13px 10px;font-size:0}
  .nav-menu a span{font-size:19px}
  .sidebar-footer{text-align:center}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wide-dashboard,.two-col,.wide-left{grid-template-columns:1fr}
}

@media (max-width:1024px){
  .content-area{padding:18px}
  .pos-shell{grid-template-rows:74px minmax(0,1fr)}
  .pos-content-wrap{padding:12px}
  .pos-layout{grid-template-columns:minmax(0,1fr) 360px;gap:12px}
  .pos-browser,.pos-cart{padding:12px}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .product-card{min-height:145px;padding:13px}
  .category-chip{min-width:92px}
}

@media (max-width:860px){
  body{overflow:auto}
  .app-shell{display:block}
  .sidebar{
    position:fixed;
    left:-292px;
    width:280px;
    transition:left .22s ease;
    box-shadow:var(--shadow);
  }
  .sidebar.open{left:0}
  .sidebar-brand .brand{justify-content:flex-start}
  .sidebar-brand .brand div{display:block}
  .nav-menu a{justify-content:flex-start;font-size:15px}
  .icon-btn{display:inline-grid;place-items:center}
  .topbar{padding:14px 16px;justify-content:flex-start;flex-wrap:wrap}
  .content-area{padding:16px}
  .stats-grid,.form-row,.invoice-info,.stats-mini-grid{grid-template-columns:1fr}
  .inline-search{flex-direction:column}
  .data-table{min-width:680px}

  .pos-page{overflow:auto}
  .pos-shell{height:auto;min-height:100vh;display:block}
  .pos-topbar{position:sticky;top:0;flex-wrap:wrap;padding:10px 12px}
  .pos-topbar-actions{width:100%;justify-content:flex-end}
  .pos-content-wrap{padding:10px}
  .pos-layout{height:auto;display:grid;grid-template-columns:1fr}
  .pos-browser,.pos-cart{min-height:0}
  .product-grid{max-height:52vh;grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}
  .cart-list{max-height:none}
}

@media (max-width:560px){
  .login-card{padding:26px;border-radius:24px}
  .login-logo{width:135px}
  .panel,.panel-flat,.stat-card{border-radius:18px}
  .panel{padding:16px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-card{min-height:138px}
  .invoice-card{padding:20px;border-radius:20px}
  .invoice-top{display:grid}
  .invoice-meta{text-align:left}
  .invoice-brand img{width:62px;height:62px}
}

/* Print */
@media print{
  *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  body{
    background:#fff!important;
    min-height:auto!important;
    overflow:visible!important;
  }
  .sidebar,.topbar,.invoice-actions,.alert,.pos-topbar,.nav-menu,.sidebar-footer{
    display:none!important;
  }
  .app-shell,.main-area,.content-area{
    display:block!important;
    padding:0!important;
    margin:0!important;
    min-height:auto!important;
  }
  .invoice-shell{max-width:none!important;margin:0!important}
  .invoice-card{
    box-shadow:none!important;
    border:0!important;
    border-radius:0!important;
    margin:0!important;
  }
  body.print-a5 .invoice-card{
    width:148mm;
    min-height:210mm;
    padding:12mm;
  }
  body.print-thermal .invoice-card{
    width:80mm!important;
    padding:4mm!important;
    font-size:11px!important;
  }
  body.print-thermal .invoice-top{
    display:block!important;
    text-align:center!important;
    padding-bottom:8px!important;
  }
  body.print-thermal .invoice-brand{
    justify-content:center!important;
    gap:6px!important;
  }
  body.print-thermal .invoice-brand img{width:34px!important;height:34px!important}
  body.print-thermal .invoice-brand h2{font-size:16px!important}
  body.print-thermal .invoice-brand p{font-size:10px!important}
  body.print-thermal .invoice-meta{text-align:center!important;font-size:10px!important}
  body.print-thermal .invoice-info{
    display:block!important;
    margin:8px 0!important;
  }
  body.print-thermal .invoice-info div{
    border:0!important;
    padding:3px 0!important;
    background:transparent!important;
  }
  body.print-thermal .invoice-info strong{font-size:12px!important}
  body.print-thermal .invoice-table th,
  body.print-thermal .invoice-table td{
    padding:5px 2px!important;
    font-size:10px!important;
  }
  body.print-thermal .invoice-table th:nth-child(1),
  body.print-thermal .invoice-table td:nth-child(1),
  body.print-thermal .invoice-table th:nth-child(3),
  body.print-thermal .invoice-table td:nth-child(3){
    display:none!important;
  }
  body.print-thermal .invoice-summary{
    width:100%!important;
    margin-top:8px!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
  }
  body.print-thermal .invoice-summary div{
    padding:6px 0!important;
    font-size:12px!important;
  }
  body.print-thermal .invoice-summary .summary-total{
    font-size:15px!important;
    background:transparent!important;
  }
  body.print-thermal .invoice-note{
    border:0!important;
    background:transparent!important;
    padding:6px 0!important;
    font-size:10px!important;
  }
}


/* === KSL LOGO FIX / ANIMATION === */
/* This section fixes oversized logos even if an older header file is still cached/uploaded. */

/* New fixed logo wrapper */
.logo-box{
  position:relative !important;
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 auto !important;
  overflow:hidden !important;
  isolation:isolate !important;
  border:1px solid rgba(207,231,255,.95) !important;
  background:linear-gradient(145deg,#ffffff 0%,#eef7ff 100%) !important;
  box-shadow:0 8px 24px rgba(11,115,232,.14) !important;
  animation:kslLogoFloat 5s ease-in-out infinite !important;
}

.logo-box::before{
  content:"" !important;
  position:absolute !important;
  inset:8% !important;
  border-radius:inherit !important;
  background:radial-gradient(circle,rgba(14,165,233,.16),transparent 62%) !important;
  z-index:-1 !important;
}

.logo-box::after{
  content:"" !important;
  position:absolute !important;
  top:-45% !important;
  bottom:-45% !important;
  left:-85% !important;
  width:55% !important;
  transform:rotate(22deg) !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent) !important;
  animation:kslLogoShine 4.2s ease-in-out infinite !important;
  pointer-events:none !important;
}

.ksl-logo{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
}

/* Exact wrapper sizes */
.sidebar-logo-box{
  width:52px !important;
  height:52px !important;
  border-radius:16px !important;
}

.pos-logo-box{
  width:56px !important;
  height:56px !important;
  border-radius:17px !important;
}

.login-logo-box{
  width:124px !important;
  height:124px !important;
  margin:0 auto 12px !important;
  border-radius:28px !important;
}

.invoice-logo-box{
  width:72px !important;
  height:72px !important;
  border-radius:18px !important;
}

/* Old markup fallback: if logo image is still direct child, force it small. */
.sidebar-brand .brand > img,
.pos-topbar .brand > img,
.brand-large > img{
  width:54px !important;
  height:54px !important;
  max-width:54px !important;
  max-height:54px !important;
  min-width:54px !important;
  min-height:54px !important;
  object-fit:contain !important;
  flex:0 0 54px !important;
  margin:0 !important;
  border-radius:16px !important;
  background:#fff !important;
  padding:4px !important;
  box-shadow:0 8px 24px rgba(11,115,232,.14) !important;
  animation:kslLogoFloat 5s ease-in-out infinite !important;
}

.login-logo{
  width:124px !important;
  height:124px !important;
  max-width:124px !important;
  max-height:124px !important;
  object-fit:contain !important;
  margin:0 auto 12px !important;
  border-radius:28px !important;
  background:#fff !important;
  padding:6px !important;
  box-shadow:0 8px 24px rgba(11,115,232,.14) !important;
  animation:kslLogoFloat 5s ease-in-out infinite !important;
}

.invoice-brand > img{
  width:72px !important;
  height:72px !important;
  max-width:72px !important;
  max-height:72px !important;
  object-fit:contain !important;
  flex:0 0 72px !important;
  margin:0 !important;
}

/* Prevent any logo from escaping into the page */
.sidebar-brand,
.pos-topbar .brand,
.invoice-brand,
.login-card{
  overflow:hidden !important;
}

.brand{
  min-height:auto !important;
}

.pos-topbar .brand{
  gap:12px !important;
}

@keyframes kslLogoFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-3px) scale(1.015); }
}

@keyframes kslLogoShine{
  0%{ left:-90%; opacity:0; }
  18%{ opacity:.55; }
  42%{ left:130%; opacity:0; }
  100%{ left:130%; opacity:0; }
}

@media (max-width:1280px){
  .sidebar-logo-box{
    width:50px !important;
    height:50px !important;
  }
}

@media (max-width:860px){
  .pos-logo-box,
  .sidebar-brand .brand > img,
  .pos-topbar .brand > img,
  .brand-large > img{
    width:50px !important;
    height:50px !important;
    max-width:50px !important;
    max-height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
  }
  .login-logo-box,
  .login-logo{
    width:112px !important;
    height:112px !important;
    max-width:112px !important;
    max-height:112px !important;
  }
}

@media (max-width:560px){
  .pos-logo-box,
  .sidebar-brand .brand > img,
  .pos-topbar .brand > img,
  .brand-large > img{
    width:46px !important;
    height:46px !important;
    max-width:46px !important;
    max-height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
  }
  .login-logo-box,
  .login-logo{
    width:104px !important;
    height:104px !important;
    max-width:104px !important;
    max-height:104px !important;
    border-radius:24px !important;
  }
  .invoice-logo-box,
  .invoice-brand > img{
    width:58px !important;
    height:58px !important;
    max-width:58px !important;
    max-height:58px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .logo-box,
  .logo-box::after,
  .sidebar-brand .brand > img,
  .pos-topbar .brand > img,
  .brand-large > img,
  .login-logo{
    animation:none !important;
  }
}

@media print{
  .logo-box,
  .login-logo,
  .invoice-brand > img{
    animation:none !important;
    box-shadow:none !important;
    background:transparent !important;
    border:0 !important;
  }
  .logo-box::before,
  .logo-box::after{
    display:none !important;
  }
  .invoice-logo-box,
  .invoice-brand > img{
    width:58px !important;
    height:58px !important;
    max-width:58px !important;
    max-height:58px !important;
  }
  body.print-thermal .invoice-logo-box,
  body.print-thermal .invoice-brand > img{
    width:32px !important;
    height:32px !important;
    max-width:32px !important;
    max-height:32px !important;
  }
}


/* === DENSE POS PRODUCT/CART UPDATE === */
/* Shows many products quickly: no category label inside product card, very tight line-height. */

.compact-pos .pos-browser{
  padding:12px !important;
  gap:8px !important;
}

.compact-pos .pos-cart{
  padding:12px !important;
}

.compact-pos .pos-searchbar{
  margin:0 !important;
}

.compact-pos .input-large{
  min-height:46px !important;
  padding:10px 14px !important;
  border-radius:14px !important;
  font-size:15px !important;
}

.compact-pos .category-strip{
  gap:7px !important;
  padding-bottom:6px !important;
  margin:0 !important;
}

.compact-pos .category-chip{
  min-width:auto !important;
  min-height:38px !important;
  padding:7px 12px !important;
  border-radius:13px !important;
  font-size:12px !important;
  line-height:1 !important;
}

.product-grid-dense{
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr)) !important;
  gap:7px !important;
  padding:1px 3px 3px 1px !important;
}

.product-card-dense{
  min-height:62px !important;
  padding:8px 9px !important;
  border-radius:13px !important;
  gap:2px !important;
  line-height:1.05 !important;
  justify-content:space-between !important;
}

.product-card-dense strong{
  min-height:0 !important;
  flex:0 1 auto !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  font-size:12.5px !important;
  line-height:1.08 !important;
  letter-spacing:-.015em !important;
}

.product-card-dense span{
  display:block !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  color:#0b3c86 !important;
  font-size:11.5px !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.product-card-dense .product-card-category,
.product-card-dense small,
.product-card-dense b{
  display:none !important;
}

.cart-list-dense{
  gap:6px !important;
}

.cart-item-dense{
  padding:7px 8px !important;
  border-radius:12px !important;
  gap:5px !important;
  line-height:1.05 !important;
}

.cart-line-main{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto auto !important;
  gap:6px !important;
  align-items:center !important;
  min-width:0 !important;
}

.cart-line-main strong{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:12.5px !important;
  line-height:1 !important;
}

.cart-line-main span{
  color:#64748b !important;
  font-size:11px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  line-height:1 !important;
}

.cart-line-main b{
  color:#0b3c86 !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.cart-controls-dense{
  display:grid !important;
  grid-template-columns:116px minmax(76px,1fr) 28px !important;
  gap:6px !important;
  align-items:center !important;
}

.qty-inline-box-dense{
  width:116px !important;
  grid-template-columns:28px 60px 28px !important;
  border-radius:10px !important;
}

.qty-inline-box-dense button,
.qty-inline-box-dense input{
  height:28px !important;
  font-size:13px !important;
}

.cart-price-input{
  width:100% !important;
  height:28px !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  padding:3px 6px !important;
  text-align:right !important;
  font-size:11.5px !important;
  font-weight:850 !important;
  color:#0b3c86 !important;
  background:#fff !important;
}

.remove-btn-dense{
  width:28px !important;
  height:28px !important;
  border-radius:9px !important;
  font-size:16px !important;
}

.qty-modal-compact{
  width:min(330px,96vw) !important;
  padding:14px !important;
  border-radius:18px !important;
}

.qty-modal-compact .modal-close{
  top:8px !important;
  right:8px !important;
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
  font-size:20px !important;
}

.qty-modal-compact h3{
  margin:0 34px 3px 0 !important;
  font-size:18px !important;
  line-height:1.12 !important;
  letter-spacing:-.025em !important;
}

.qty-modal-compact .modal-subtext{
  margin-bottom:9px !important;
  font-size:12px !important;
  line-height:1 !important;
}

.compact-modal-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin-bottom:8px !important;
}

.compact-modal-grid label{
  display:block !important;
  margin-bottom:4px !important;
  font-size:11px !important;
  color:#64748b !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.compact-number-box{
  width:100% !important;
  grid-template-columns:30px 1fr 30px !important;
  border-radius:11px !important;
}

.compact-number-box button,
.compact-number-box input{
  height:36px !important;
  font-size:14px !important;
}

.compact-price-input{
  height:36px !important;
  min-height:36px !important;
  padding:6px 8px !important;
  border-radius:11px !important;
  font-size:13px !important;
  font-weight:900 !important;
  text-align:right !important;
}

.modal-line-total{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:8px !important;
  margin:8px 0 !important;
  padding:8px 10px !important;
  border-radius:12px !important;
  background:#eef6ff !important;
  color:#0b3c86 !important;
  font-size:13px !important;
  font-weight:900 !important;
}

.qty-modal-compact .btn{
  min-height:38px !important;
  border-radius:12px !important;
  padding:8px 12px !important;
}

@media (min-width:1400px){
  .product-grid-dense{
    grid-template-columns:repeat(auto-fill,minmax(104px,1fr)) !important;
  }
}

@media (max-width:1024px){
  .product-grid-dense{
    grid-template-columns:repeat(auto-fill,minmax(102px,1fr)) !important;
  }
}

@media (max-width:860px){
  .product-grid-dense{
    grid-template-columns:repeat(auto-fill,minmax(112px,1fr)) !important;
  }
}

@media (max-width:560px){
  .product-grid-dense{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .cart-line-main{
    grid-template-columns:1fr auto !important;
  }
  .cart-line-main span{
    grid-column:1 / -1 !important;
  }
}


/* === PRODUCT DATA ERROR FIX + ULTRA COMPACT SHOWCASE === */
.ultra-compact-pos .pos-browser{
  padding:8px !important;
  gap:6px !important;
}

.ultra-compact-pos .pos-cart{
  padding:8px !important;
}

.ultra-compact-pos .input-large{
  min-height:38px !important;
  height:38px !important;
  padding:7px 10px !important;
  border-radius:11px !important;
  font-size:13px !important;
  line-height:1 !important;
}

.ultra-compact-pos .category-strip{
  gap:5px !important;
  padding:0 0 5px !important;
}

.ultra-compact-pos .category-chip{
  min-height:30px !important;
  padding:5px 9px !important;
  border-radius:10px !important;
  font-size:11px !important;
  line-height:1 !important;
}

.product-grid-ultra{
  grid-template-columns:repeat(auto-fill,minmax(86px,1fr)) !important;
  gap:5px !important;
  padding:0 2px 2px 0 !important;
}

.product-card-ultra{
  min-height:46px !important;
  height:46px !important;
  padding:5px 6px !important;
  border-radius:10px !important;
  gap:1px !important;
  line-height:1 !important;
  box-shadow:0 4px 14px rgba(2,52,110,.08) !important;
}

.product-card-ultra strong{
  font-size:11px !important;
  line-height:1.03 !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  -webkit-line-clamp:2 !important;
}

.product-card-ultra span{
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#0b3c86 !important;
}

.cart-head{
  margin-bottom:5px !important;
}

.cart-head h2{
  font-size:18px !important;
  line-height:1 !important;
}

.cart-list-dense{
  gap:4px !important;
}

.cart-item-dense{
  padding:5px 6px !important;
  border-radius:10px !important;
  gap:3px !important;
}

.cart-line-main{
  gap:4px !important;
  line-height:1 !important;
}

.cart-line-main strong{
  font-size:11px !important;
  line-height:1 !important;
}

.cart-line-main span{
  font-size:10px !important;
  line-height:1 !important;
}

.cart-line-main b{
  font-size:10.5px !important;
  line-height:1 !important;
}

.cart-controls-dense{
  grid-template-columns:98px minmax(62px,1fr) 24px !important;
  gap:4px !important;
}

.qty-inline-box-dense{
  width:98px !important;
  grid-template-columns:24px 50px 24px !important;
  border-radius:8px !important;
}

.qty-inline-box-dense button,
.qty-inline-box-dense input{
  height:24px !important;
  font-size:11px !important;
}

.cart-price-input{
  height:24px !important;
  min-height:24px !important;
  border-radius:8px !important;
  padding:2px 4px !important;
  font-size:10px !important;
}

.remove-btn-dense{
  width:24px !important;
  height:24px !important;
  border-radius:8px !important;
  font-size:13px !important;
}

.qty-modal-mini{
  width:min(286px,94vw) !important;
  padding:10px !important;
  border-radius:15px !important;
}

.qty-modal-mini .modal-close{
  top:6px !important;
  right:6px !important;
  width:26px !important;
  height:26px !important;
  border-radius:8px !important;
  font-size:17px !important;
}

.qty-modal-mini h3{
  margin:0 30px 2px 0 !important;
  font-size:15px !important;
  line-height:1.08 !important;
}

.qty-modal-mini .modal-subtext{
  margin-bottom:6px !important;
  font-size:10.5px !important;
  line-height:1 !important;
}

.qty-modal-mini .compact-modal-grid{
  gap:6px !important;
  margin-bottom:6px !important;
}

.qty-modal-mini .compact-modal-grid label{
  margin-bottom:3px !important;
  font-size:10px !important;
}

.qty-modal-mini .compact-number-box{
  grid-template-columns:26px 1fr 26px !important;
  border-radius:8px !important;
}

.qty-modal-mini .compact-number-box button,
.qty-modal-mini .compact-number-box input{
  height:30px !important;
  font-size:12px !important;
}

.qty-modal-mini .compact-price-input{
  height:30px !important;
  min-height:30px !important;
  padding:4px 6px !important;
  border-radius:8px !important;
  font-size:11.5px !important;
}

.qty-modal-mini .modal-line-total{
  margin:6px 0 !important;
  padding:6px 8px !important;
  border-radius:9px !important;
  font-size:11.5px !important;
  line-height:1 !important;
}

.qty-modal-mini .btn{
  min-height:32px !important;
  border-radius:10px !important;
  padding:6px 10px !important;
  font-size:12px !important;
}

@media (min-width:1500px){
  .product-grid-ultra{
    grid-template-columns:repeat(auto-fill,minmax(82px,1fr)) !important;
  }
}

@media (max-width:1024px){
  .product-grid-ultra{
    grid-template-columns:repeat(auto-fill,minmax(84px,1fr)) !important;
  }
}

@media (max-width:860px){
  .product-grid-ultra{
    grid-template-columns:repeat(auto-fill,minmax(92px,1fr)) !important;
  }
}

@media (max-width:560px){
  .product-grid-ultra{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}


/* === ONE LINE CART LIST FIX === */
/* Cart list shows Name | Qty | Unit | Price in one tight row. */

.cart-list,
.cart-list-dense{
  gap:3px !important;
  line-height:1 !important;
}

.cart-item-one-line{
  min-height:28px !important;
  height:28px !important;
  padding:2px 4px !important;
  border-radius:8px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 46px 38px 72px 24px !important;
  align-items:center !important;
  gap:4px !important;
  line-height:1 !important;
  background:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:none !important;
}

.cart-one-name{
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:11.5px !important;
  font-weight:850 !important;
  line-height:1 !important;
  padding:0 !important;
  margin:0 !important;
}

.cart-one-unit{
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:#64748b !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  line-height:1 !important;
  padding:0 !important;
  margin:0 !important;
  text-align:left !important;
}

.cart-one-qty,
.cart-one-price{
  width:100% !important;
  height:22px !important;
  min-height:22px !important;
  border:1px solid #dbe5f2 !important;
  border-radius:6px !important;
  padding:1px 3px !important;
  margin:0 !important;
  background:#fbfdff !important;
  color:#0f172a !important;
  font-size:10.5px !important;
  font-weight:850 !important;
  line-height:1 !important;
  text-align:right !important;
  box-shadow:none !important;
  outline:none !important;
}

.cart-one-qty:focus,
.cart-one-price:focus{
  border-color:#7ebcff !important;
  box-shadow:0 0 0 2px rgba(11,115,232,.10) !important;
}

.remove-btn-one{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  border-radius:6px !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  font-size:14px !important;
  display:inline-grid !important;
  place-items:center !important;
}

/* keep form controls compact below cart */
.pos-cart .checkout-form{
  gap:7px !important;
}

.pos-cart .checkout-form label{
  font-size:11px !important;
  line-height:1 !important;
}

.pos-cart .checkout-form .input{
  min-height:34px !important;
  padding:6px 9px !important;
  border-radius:10px !important;
  font-size:12px !important;
  line-height:1.1 !important;
}

.pos-cart textarea.input{
  min-height:42px !important;
}

.pos-cart .totals-box{
  padding:8px 10px !important;
  border-radius:12px !important;
  gap:5px !important;
}

.pos-cart .totals-box div{
  font-size:12px !important;
  line-height:1 !important;
}

.pos-cart .totals-box .grand{
  font-size:16px !important;
  padding-top:7px !important;
}

.pos-cart .btn-lg{
  min-height:38px !important;
  padding:8px 12px !important;
  border-radius:11px !important;
  font-size:13px !important;
}

@media (max-width:1024px){
  .cart-item-one-line{
    grid-template-columns:minmax(0,1fr) 44px 34px 68px 24px !important;
  }
}

@media (max-width:560px){
  .cart-item-one-line{
    grid-template-columns:minmax(0,1fr) 42px 32px 62px 22px !important;
    gap:3px !important;
  }
  .cart-one-name{
    font-size:10.5px !important;
  }
  .cart-one-unit,
  .cart-one-qty,
  .cart-one-price{
    font-size:9.5px !important;
  }
}


/* === SHOWCASE HEIGHT + CART TOTAL UNIT LINE FIX === */
/* Product showcase height and cart row height follow text, no clipping. */

/* Product showcase: compact but auto-height by text */
.product-grid-ultra,
.product-grid-dense{
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) !important;
  gap:5px !important;
  align-items:start !important;
}

.product-card-ultra,
.product-card-dense{
  height:auto !important;
  min-height:0 !important;
  padding:5px 6px !important;
  border-radius:10px !important;
  gap:3px !important;
  line-height:1.08 !important;
  overflow:visible !important;
  align-self:start !important;
}

.product-card-ultra strong,
.product-card-dense strong{
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  font-size:11px !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
}

.product-card-ultra span,
.product-card-dense span{
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#0b3c86 !important;
}

/* Cart: name | qty | unit | price | total | remove in one row */
.cart-list,
.cart-list-dense{
  gap:3px !important;
  line-height:1 !important;
}

.cart-item-total-line,
.cart-item-one-line{
  height:auto !important;
  min-height:26px !important;
  padding:2px 4px !important;
  border-radius:8px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 42px 42px 62px 66px 22px !important;
  align-items:center !important;
  gap:3px !important;
  line-height:1 !important;
  background:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.cart-one-name{
  display:block !important;
  min-width:0 !important;
  height:auto !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  font-size:10.5px !important;
  font-weight:850 !important;
  line-height:1.05 !important;
  padding:0 !important;
  margin:0 !important;
}

.cart-one-qty,
.cart-one-unit,
.cart-one-price{
  width:100% !important;
  height:20px !important;
  min-height:20px !important;
  border:1px solid #dbe5f2 !important;
  border-radius:5px !important;
  padding:1px 3px !important;
  margin:0 !important;
  background:#fbfdff !important;
  color:#0f172a !important;
  font-size:9.5px !important;
  font-weight:850 !important;
  line-height:1 !important;
  box-shadow:none !important;
  outline:none !important;
}

.cart-one-qty,
.cart-one-price{
  text-align:right !important;
}

.cart-one-unit{
  text-align:left !important;
}

.cart-one-total{
  display:block !important;
  overflow:visible !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
  color:#0b3c86 !important;
  font-size:10px !important;
  font-weight:950 !important;
  line-height:1 !important;
  text-align:right !important;
  padding:0 !important;
  margin:0 !important;
}

.remove-btn-one{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  border-radius:5px !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  font-size:13px !important;
  display:inline-grid !important;
  place-items:center !important;
}

.cart-one-qty:focus,
.cart-one-unit:focus,
.cart-one-price:focus{
  border-color:#7ebcff !important;
  box-shadow:0 0 0 2px rgba(11,115,232,.10) !important;
}

@media (min-width:1500px){
  .product-grid-ultra,
  .product-grid-dense{
    grid-template-columns:repeat(auto-fill,minmax(92px,1fr)) !important;
  }
}

@media (max-width:1024px){
  .cart-item-total-line,
  .cart-item-one-line{
    grid-template-columns:minmax(0,1fr) 40px 38px 58px 62px 22px !important;
  }
}

@media (max-width:560px){
  .product-grid-ultra,
  .product-grid-dense{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .cart-item-total-line,
  .cart-item-one-line{
    grid-template-columns:minmax(0,1fr) 38px 34px 54px 58px 20px !important;
    gap:2px !important;
  }
  .cart-one-name{
    font-size:9.8px !important;
  }
  .cart-one-qty,
  .cart-one-unit,
  .cart-one-price,
  .cart-one-total{
    font-size:8.8px !important;
  }
}


/* === INVOICE LIST EDIT + 1600 PRODUCT VIEW === */
.live-status{
  margin:-6px 0 10px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
}

.invoice-live-table th,
.invoice-live-table td{
  white-space:nowrap;
}

.invoice-edit-panel{
  max-width:1500px;
  margin:0 auto;
}

.invoice-edit-top{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:12px;
  margin-bottom:12px;
}

.invoice-edit-top label{
  display:block;
  margin-bottom:5px;
  color:#334155;
  font-size:12px;
  font-weight:900;
}

.edit-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}

.edit-invoice-table{
  width:100%;
  min-width:850px;
  border-collapse:collapse;
}

.edit-invoice-table th{
  background:#f8fafc;
  color:#64748b;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:left;
  padding:8px;
  border-bottom:1px solid var(--line);
}

.edit-invoice-table td{
  padding:5px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}

.edit-invoice-table .input{
  min-height:32px;
  height:32px;
  padding:5px 8px;
  border-radius:9px;
  font-size:12px;
  line-height:1;
}

.edit-invoice-table th:nth-child(1){width:42%}
.edit-invoice-table th:nth-child(2){width:90px}
.edit-invoice-table th:nth-child(3){width:120px}
.edit-invoice-table th:nth-child(4){width:130px}
.edit-invoice-table th:nth-child(5){width:130px}
.edit-invoice-table th:nth-child(6){width:50px}

.row-total{
  display:block;
  color:#0b3c86;
  font-size:12px;
  text-align:right;
  white-space:nowrap;
}

.invoice-edit-bottom{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  margin-top:12px;
}

.invoice-edit-total{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 14px;
  border-radius:14px;
  background:#eef6ff;
  color:#0b3c86;
  font-weight:900;
}

.invoice-edit-total span{
  color:#64748b;
  font-size:12px;
}

.invoice-edit-total strong{
  font-size:18px;
}

/* 1600x900 POS view: more than 20 products visible without hiding text */
@media (min-width:1400px) and (min-height:780px){
  .pos-layout{
    grid-template-columns:minmax(0,1fr) 410px !important;
  }

  .product-grid-ultra,
  .product-grid-dense{
    grid-template-columns:repeat(auto-fill,minmax(118px,1fr)) !important;
    gap:6px !important;
  }

  .product-card-ultra,
  .product-card-dense{
    padding:6px 7px !important;
    border-radius:11px !important;
  }

  .product-card-ultra strong,
  .product-card-dense strong{
    font-size:12px !important;
    line-height:1.1 !important;
  }

  .product-card-ultra span,
  .product-card-dense span{
    font-size:10.5px !important;
    line-height:1.05 !important;
  }
}

@media (max-width:860px){
  .invoice-edit-top,
  .invoice-edit-bottom{
    grid-template-columns:1fr;
  }

  .invoice-edit-total{
    justify-self:stretch;
    justify-content:space-between;
  }
}


/* === REMOVE BIG HEADER + CONSISTENT PRODUCT QTY UNIT PRICE === */
/* Remove big headers/topbars and reclaim screen height. */
.compact-hidden-header,
.topbar.compact-hidden-header,
.pos-topbar.compact-hidden-header{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

.content-area{
  padding:12px !important;
}

.pos-shell{
  grid-template-rows:minmax(0,1fr) !important;
  height:100vh !important;
  min-height:0 !important;
}

.pos-content-wrap{
  padding:8px !important;
  min-height:0 !important;
  height:100vh !important;
}

.pos-layout{
  min-height:0 !important;
  height:calc(100vh - 16px) !important;
}

/* Dashboard / admin pages take less vertical space */
.panel{
  padding:14px !important;
}

.panel-head{
  margin-bottom:10px !important;
}

.panel-head h2{
  font-size:18px !important;
  line-height:1.05 !important;
}

.stats-grid{
  gap:10px !important;
  margin-bottom:12px !important;
}

.stat-card{
  padding:13px !important;
}

.stat-card strong{
  font-size:22px !important;
  margin-top:5px !important;
}

/* Product showcase: Product | Qty Unit | Price style */
.product-card-ultra,
.product-card-dense{
  height:auto !important;
  min-height:42px !important;
  padding:5px 6px !important;
  gap:2px !important;
  line-height:1.05 !important;
  overflow:visible !important;
}

.product-card-ultra strong,
.product-card-dense strong{
  display:block !important;
  overflow:visible !important;
  white-space:normal !important;
  -webkit-line-clamp:unset !important;
  min-height:0 !important;
  font-size:10.8px !important;
  line-height:1.05 !important;
}

.product-card-ultra span,
.product-card-dense span{
  display:block !important;
  overflow:visible !important;
  white-space:nowrap !important;
  font-size:9.8px !important;
  line-height:1 !important;
}

/* Common compact tables in Product | Qty | Unit | Price sequence */
.data-table th,
.data-table td{
  padding:8px 9px !important;
  line-height:1.1 !important;
}

.invoice-table th,
.invoice-table td{
  padding:8px 9px !important;
  line-height:1.1 !important;
}

.edit-invoice-table th,
.edit-invoice-table td{
  padding:4px 5px !important;
  line-height:1.05 !important;
}

/* Excel-like invoice edit: Product | Qty | Unit | Price | Total */
.edit-invoice-table th:nth-child(1){width:44% !important}
.edit-invoice-table th:nth-child(2){width:80px !important}
.edit-invoice-table th:nth-child(3){width:105px !important}
.edit-invoice-table th:nth-child(4){width:115px !important}
.edit-invoice-table th:nth-child(5){width:120px !important}
.edit-invoice-table th:nth-child(6){width:42px !important}

.edit-invoice-table .input{
  height:28px !important;
  min-height:28px !important;
  padding:3px 6px !important;
  font-size:11.5px !important;
  line-height:1 !important;
  border-radius:7px !important;
}

/* POS cart: Product | Qty | Unit | Price | Total */
.cart-item-total-line,
.cart-item-one-line{
  grid-template-columns:minmax(0,1fr) 42px 46px 62px 66px 22px !important;
  min-height:24px !important;
  padding:2px 4px !important;
  gap:3px !important;
}

.cart-one-name,
.cart-one-qty,
.cart-one-unit,
.cart-one-price,
.cart-one-total{
  line-height:1 !important;
}

.cart-one-name{
  font-size:10.2px !important;
}

.cart-one-qty,
.cart-one-unit,
.cart-one-price{
  height:20px !important;
  min-height:20px !important;
  font-size:9.5px !important;
}

.cart-one-total{
  font-size:9.8px !important;
}

/* 1600x900 POS: show 20+ products clearly */
@media (min-width:1500px) and (min-height:850px){
  .pos-layout{
    grid-template-columns:minmax(0,1fr) 400px !important;
  }

  .product-grid-ultra,
  .product-grid-dense{
    grid-template-columns:repeat(auto-fill,minmax(112px,1fr)) !important;
    gap:6px !important;
  }

  .product-card-ultra,
  .product-card-dense{
    min-height:48px !important;
  }

  .product-card-ultra strong,
  .product-card-dense strong{
    font-size:11.5px !important;
  }

  .product-card-ultra span,
  .product-card-dense span{
    font-size:10.2px !important;
  }
}

@media (max-width:860px){
  .content-area{
    padding:8px !important;
  }

  .pos-content-wrap{
    height:auto !important;
    min-height:100vh !important;
  }

  .pos-layout{
    height:auto !important;
  }
}


/* === INVOICE EDIT PRODUCT PICKER + DATE FIX === */
.invoice-edit-head{
  align-items:center !important;
}

.invoice-date-actions{
  align-items:center !important;
}

.date-change-box{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:5px 7px !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:#fff !important;
}

.date-change-box span{
  color:#0b3c86 !important;
  font-size:11px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

.date-change-box .input{
  width:178px !important;
  height:30px !important;
  min-height:30px !important;
  padding:3px 6px !important;
  border-radius:8px !important;
  font-size:11px !important;
  line-height:1 !important;
}

.popup-product-edit-table th:nth-child(1){width:45% !important}
.popup-product-edit-table th:nth-child(2){width:78px !important}
.popup-product-edit-table th:nth-child(3){width:105px !important}
.popup-product-edit-table th:nth-child(4){width:115px !important}
.popup-product-edit-table th:nth-child(5){width:115px !important}
.popup-product-edit-table th:nth-child(6){width:42px !important}

.product-picker-btn{
  width:100% !important;
  height:28px !important;
  min-height:28px !important;
  border:1px solid #dbe5f2 !important;
  border-radius:8px !important;
  background:#fbfdff !important;
  color:#0f172a !important;
  padding:3px 8px !important;
  text-align:left !important;
  font-size:11.5px !important;
  font-weight:850 !important;
  line-height:1 !important;
  cursor:pointer !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.product-picker-btn:hover{
  border-color:#7ebcff !important;
  background:#eef6ff !important;
}

.product-picker-btn.empty{
  color:#64748b !important;
}

.product-picker-modal{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
  background:rgba(15,23,42,.42) !important;
  z-index:500 !important;
}

.product-picker-modal.show{
  display:flex !important;
}

.product-picker-box{
  width:min(560px,96vw) !important;
  max-height:min(660px,90vh) !important;
  display:grid !important;
  grid-template-rows:auto auto minmax(0,1fr) !important;
  gap:9px !important;
  padding:12px !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(226,232,240,.95) !important;
  box-shadow:0 24px 80px rgba(15,23,42,.22) !important;
}

.product-picker-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.product-picker-head strong{
  font-size:17px !important;
  letter-spacing:-.02em !important;
}

.product-picker-close{
  width:30px !important;
  height:30px !important;
  border-radius:9px !important;
  background:#fff1f2 !important;
  color:#dc2626 !important;
  font-size:20px !important;
  cursor:pointer !important;
}

.product-picker-search{
  height:36px !important;
  min-height:36px !important;
  padding:7px 10px !important;
  border-radius:11px !important;
  font-size:13px !important;
}

.product-picker-list{
  min-height:0 !important;
  overflow:auto !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
  gap:6px !important;
  padding-right:2px !important;
}

.product-picker-item{
  min-height:44px !important;
  border:1px solid #e2e8f0 !important;
  border-radius:11px !important;
  background:#fbfdff !important;
  padding:6px 8px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:3px 7px !important;
  text-align:left !important;
  cursor:pointer !important;
}

.product-picker-item:hover{
  border-color:#7ebcff !important;
  background:#eef6ff !important;
}

.product-picker-item span{
  grid-column:1 / -1 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:11.5px !important;
  font-weight:900 !important;
  color:#0f172a !important;
  line-height:1 !important;
}

.product-picker-item b{
  font-size:10px !important;
  color:#64748b !important;
  line-height:1 !important;
}

.product-picker-item strong{
  font-size:10.5px !important;
  color:#0b3c86 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

@media (max-width:680px){
  .invoice-date-actions{
    width:100% !important;
    justify-content:space-between !important;
    flex-wrap:wrap !important;
  }

  .date-change-box{
    width:100% !important;
    justify-content:space-between !important;
  }

  .date-change-box .input{
    width:190px !important;
  }

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


/* === ROBUST INVOICE EDIT PRODUCT PICKER === */
.invoice-edit-head{
  align-items:center !important;
}

.invoice-date-actions{
  align-items:center !important;
}

.date-change-box{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:5px 7px !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:#fff !important;
}

.date-change-box span{
  color:#0b3c86 !important;
  font-size:11px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

.date-change-box .input{
  width:178px !important;
  height:30px !important;
  min-height:30px !important;
  padding:3px 6px !important;
  border-radius:8px !important;
  font-size:11px !important;
  line-height:1 !important;
}

.popup-product-edit-table th:nth-child(1){width:45% !important}
.popup-product-edit-table th:nth-child(2){width:78px !important}
.popup-product-edit-table th:nth-child(3){width:105px !important}
.popup-product-edit-table th:nth-child(4){width:115px !important}
.popup-product-edit-table th:nth-child(5){width:115px !important}
.popup-product-edit-table th:nth-child(6){width:42px !important}

.product-picker-btn{
  width:100% !important;
  height:28px !important;
  min-height:28px !important;
  border:1px solid #dbe5f2 !important;
  border-radius:8px !important;
  background:#fbfdff !important;
  color:#0f172a !important;
  padding:3px 8px !important;
  text-align:left !important;
  font-size:11.5px !important;
  font-weight:850 !important;
  line-height:1 !important;
  cursor:pointer !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.product-picker-btn:hover,
.product-picker-btn:focus{
  border-color:#7ebcff !important;
  background:#eef6ff !important;
}

.product-picker-btn.empty{
  color:#64748b !important;
}

.product-picker-modal{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
  background:rgba(15,23,42,.42) !important;
  z-index:9999 !important;
}

.product-picker-modal.show{
  display:flex !important;
}

.product-picker-box{
  width:min(600px,96vw) !important;
  max-height:min(680px,90vh) !important;
  display:grid !important;
  grid-template-rows:auto auto minmax(0,1fr) !important;
  gap:9px !important;
  padding:12px !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(226,232,240,.95) !important;
  box-shadow:0 24px 80px rgba(15,23,42,.22) !important;
}

.product-picker-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.product-picker-head strong{
  font-size:17px !important;
  letter-spacing:-.02em !important;
}

.product-picker-close{
  width:30px !important;
  height:30px !important;
  border-radius:9px !important;
  background:#fff1f2 !important;
  color:#dc2626 !important;
  font-size:20px !important;
  cursor:pointer !important;
}

.product-picker-search{
  height:36px !important;
  min-height:36px !important;
  padding:7px 10px !important;
  border-radius:11px !important;
  font-size:13px !important;
}

.product-picker-list{
  min-height:0 !important;
  overflow:auto !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
  gap:6px !important;
  padding-right:2px !important;
}

.product-picker-item{
  min-height:44px !important;
  border:1px solid #e2e8f0 !important;
  border-radius:11px !important;
  background:#fbfdff !important;
  padding:6px 8px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:3px 7px !important;
  text-align:left !important;
  cursor:pointer !important;
}

.product-picker-item:hover,
.product-picker-item:focus{
  border-color:#7ebcff !important;
  background:#eef6ff !important;
}

.product-picker-item span{
  grid-column:1 / -1 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:11.5px !important;
  font-weight:900 !important;
  color:#0f172a !important;
  line-height:1 !important;
}

.product-picker-item b{
  font-size:10px !important;
  color:#64748b !important;
  line-height:1 !important;
}

.product-picker-item strong{
  font-size:10.5px !important;
  color:#0b3c86 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

@media (max-width:680px){
  .invoice-date-actions{
    width:100% !important;
    justify-content:space-between !important;
    flex-wrap:wrap !important;
  }

  .date-change-box{
    width:100% !important;
    justify-content:space-between !important;
  }

  .date-change-box .input{
    width:190px !important;
  }

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


/* === USER CONTROL ROLE UI === */
.role-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  padding:5px 9px;
  border-radius:999px;
  background:#eef6ff;
  color:#0b3c86;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.user-control-page .form-panel{
  position:sticky;
  top:12px;
}

.user-control-note{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #dbeafe;
  border-radius:12px;
  background:#f0f7ff;
  color:#334155;
  font-size:12px;
  line-height:1.35;
}

.users-table td,
.users-table th{
  white-space:nowrap;
}

.users-table form{
  display:inline-flex;
  margin:0;
}


/* === PROFILE + USER CONTROL 500 FIX UI === */
.sidebar-footer{
  display:grid !important;
  gap:8px !important;
}

.profile-link{
  display:grid !important;
  gap:2px !important;
  padding:9px 10px !important;
  border:1px solid #dbeafe !important;
  border-radius:13px !important;
  background:#f0f7ff !important;
  color:#0b3c86 !important;
  font-weight:900 !important;
}

.profile-link span{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:12px !important;
  line-height:1.1 !important;
}

.profile-link small{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:#64748b !important;
  font-size:10px !important;
  line-height:1 !important;
}

.profile-link.active{
  background:linear-gradient(135deg,#e9f5ff,#ffffff) !important;
  border-color:#93c5fd !important;
}

.profile-panel{
  max-width:780px !important;
  margin:0 auto !important;
}

.profile-summary{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-bottom:14px !important;
}

.profile-summary div{
  padding:12px !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  background:#fbfdff !important;
}

.profile-summary span{
  display:block !important;
  color:#64748b !important;
  font-size:11px !important;
  font-weight:900 !important;
  margin-bottom:4px !important;
}

.profile-summary strong{
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:15px !important;
}

.profile-form{
  max-width:620px !important;
}

.user-control-page .form-panel{
  position:sticky;
  top:12px;
}

.user-control-note{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #dbeafe;
  border-radius:12px;
  background:#f0f7ff;
  color:#334155;
  font-size:12px;
  line-height:1.35;
}

.users-table td,
.users-table th{
  white-space:nowrap;
}

.users-table form{
  display:inline-flex;
  margin:0;
}

@media (max-width:860px){
  .profile-summary{
    grid-template-columns:1fr !important;
  }
}


/* === POS BUTTONS + BUSINESS A5 INVOICE UPDATE === */
/* POS cart head: Home + Full Screen + Clear next to each other. */
.pos-cart-head-tools{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  align-items:center !important;
  gap:8px !important;
}

.pos-cart-actions-left{
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  flex-wrap:wrap !important;
}

.pos-cart-actions-left .btn{
  min-height:28px !important;
  height:28px !important;
  padding:5px 8px !important;
  border-radius:8px !important;
  font-size:10.5px !important;
  line-height:1 !important;
}

.pos-home-btn{
  color:#065f46 !important;
  background:#ecfdf5 !important;
  border-color:#bbf7d0 !important;
}

.pos-fullscreen-btn{
  color:#0b3c86 !important;
  background:#eaf5ff !important;
  border-color:#bfdbfe !important;
}

/* Product card second line now shows Unit - Price without 1 qty. */
.product-card-ultra span,
.product-card-dense span{
  letter-spacing:-.01em !important;
}

/* Premium business A5 invoice design */
.business-invoice-card{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid #d8e6f7 !important;
  background:
    linear-gradient(135deg,rgba(11,115,232,.10),transparent 26%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
}

.business-invoice-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 0 auto 0 !important;
  height:10px !important;
  background:linear-gradient(90deg,#064cae,#0b73e8,#0ea5e9,#10b981) !important;
}

.business-invoice-card::after{
  content:"KSL" !important;
  position:absolute !important;
  right:-24px !important;
  bottom:38px !important;
  font-size:118px !important;
  font-weight:950 !important;
  color:rgba(11,115,232,.045) !important;
  letter-spacing:-.08em !important;
  pointer-events:none !important;
}

.business-invoice-top{
  position:relative !important;
  margin:-32px -32px 0 !important;
  padding:42px 32px 22px !important;
  border-bottom:0 !important;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,255,255,.26),transparent 34%),
    linear-gradient(135deg,#0b3c86 0%,#0b73e8 55%,#0ea5e9 100%) !important;
  color:#fff !important;
}

.business-invoice-top .invoice-brand h2{
  color:#fff !important;
  font-size:34px !important;
}

.business-invoice-top .invoice-brand p{
  color:rgba(255,255,255,.86) !important;
  font-weight:850 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  font-size:12px !important;
}

.business-invoice-top .invoice-logo-box{
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(255,255,255,.9) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.18) !important;
}

.business-invoice-meta{
  color:#fff !important;
  text-align:right !important;
}

.business-invoice-meta strong{
  display:block !important;
  color:#fff !important;
  font-size:24px !important;
  letter-spacing:-.035em !important;
}

.business-invoice-meta span,
.business-invoice-meta small{
  color:rgba(255,255,255,.88) !important;
}

.business-invoice-ribbon{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin:18px 0 !important;
  padding:12px 16px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#ecfdf5,#eef6ff) !important;
  border:1px solid #cfe7ff !important;
}

.business-invoice-ribbon span{
  color:#0b3c86 !important;
  font-size:12px !important;
  font-weight:950 !important;
  letter-spacing:.12em !important;
}

.business-invoice-ribbon b{
  color:#065f46 !important;
  font-size:24px !important;
  letter-spacing:-.035em !important;
}

.business-invoice-info{
  position:relative !important;
  z-index:1 !important;
}

.business-invoice-info div{
  background:#ffffff !important;
  border-color:#d8e6f7 !important;
  box-shadow:0 8px 24px rgba(11,115,232,.06) !important;
}

.business-invoice-info span{
  color:#0b73e8 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  font-size:11px !important;
  font-weight:950 !important;
}

.business-invoice-info strong{
  color:#0f172a !important;
  font-size:20px !important;
}

.business-invoice-card .invoice-table{
  position:relative !important;
  z-index:1 !important;
  border:1px solid #d8e6f7 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:#fff !important;
}

.business-invoice-card .invoice-table th{
  background:linear-gradient(135deg,#0b3c86,#0b73e8) !important;
  color:#fff !important;
  border-bottom:0 !important;
  padding:12px 10px !important;
}

.business-invoice-card .invoice-table td{
  border-bottom:1px solid #e5edf7 !important;
  padding:11px 10px !important;
}

.business-invoice-card .invoice-table tbody tr:nth-child(even) td{
  background:#f8fbff !important;
}

.business-invoice-card .invoice-table td:last-child,
.business-invoice-card .invoice-table th:last-child{
  text-align:right !important;
  font-weight:900 !important;
}

.business-invoice-card .invoice-summary{
  position:relative !important;
  z-index:1 !important;
  border-color:#cfe7ff !important;
  box-shadow:0 12px 28px rgba(11,115,232,.08) !important;
}

.business-invoice-card .invoice-summary .summary-total{
  background:linear-gradient(135deg,#0b73e8,#064cae) !important;
  color:#fff !important;
}

.business-invoice-footer{
  position:relative !important;
  z-index:1 !important;
  margin-top:18px !important;
  padding:14px 16px !important;
  border-radius:16px !important;
  border:1px solid #d8e6f7 !important;
  background:linear-gradient(135deg,#f8fbff,#ffffff) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}

.business-invoice-footer strong{
  color:#0b3c86 !important;
}

.business-invoice-footer span{
  color:#64748b !important;
  font-size:12px !important;
  font-weight:800 !important;
}

@media print{
  body.print-a5 .business-invoice-card{
    width:148mm !important;
    min-height:210mm !important;
    padding:12mm !important;
    border:0 !important;
    background:
      linear-gradient(135deg,rgba(11,115,232,.10),transparent 26%),
      linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  }

  body.print-a5 .business-invoice-top{
    margin:-12mm -12mm 0 !important;
    padding:16mm 12mm 9mm !important;
  }

  body.print-a5 .business-invoice-ribbon{
    margin:7mm 0 5mm !important;
  }

  body.print-a5 .business-invoice-card .invoice-table th{
    background:linear-gradient(135deg,#0b3c86,#0b73e8) !important;
    color:#fff !important;
  }

  body.print-a5 .business-invoice-footer{
    margin-top:8mm !important;
  }

  /* Keep 80mm thermal simple and readable */
  body.print-thermal .business-invoice-card{
    background:#fff !important;
  }

  body.print-thermal .business-invoice-card::before,
  body.print-thermal .business-invoice-card::after,
  body.print-thermal .business-invoice-ribbon,
  body.print-thermal .business-invoice-footer{
    display:none !important;
  }

  body.print-thermal .business-invoice-top{
    margin:0 !important;
    padding:0 0 6px !important;
    background:#fff !important;
    color:#000 !important;
  }

  body.print-thermal .business-invoice-top .invoice-brand h2,
  body.print-thermal .business-invoice-meta strong{
    color:#000 !important;
  }

  body.print-thermal .business-invoice-top .invoice-brand p,
  body.print-thermal .business-invoice-meta span,
  body.print-thermal .business-invoice-meta small{
    color:#000 !important;
  }

  body.print-thermal .business-invoice-card .invoice-table{
    border:0 !important;
    border-radius:0 !important;
  }

  body.print-thermal .business-invoice-card .invoice-table th{
    background:#fff !important;
    color:#000 !important;
    border-top:1px dashed #000 !important;
    border-bottom:1px dashed #000 !important;
  }

  body.print-thermal .business-invoice-card .invoice-table td{
    background:#fff !important;
  }
}