/* Marites-inspired operational layout with BayanGO branding. */
:root{
  --bg:#f1f5f9;
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#64748b;
  --brand:#0f8a5f;
  --brand2:#08764f;
  --brand-soft:#e8f7f0;
  --brand-deep:#066240;
  --line:#e2e8f0;
  --gold:#facc15;
  --gold-soft:#fef9c3;
  --shadow:0 4px 12px rgba(15,23,42,.07);
  --shadow-sm:0 2px 7px rgba(15,23,42,.06);
}

html,body{min-height:100%;background:var(--bg);color:var(--ink)}
body{letter-spacing:0}
.app{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:64px 58px minmax(0,1fr);
  grid-template-areas:"topbar" "navigation" "content";
  background:var(--bg);
}

/* Full-width app header, followed by a compact management navigation strip. */
.topbar{
  grid-area:topbar;
  position:sticky;
  top:0;
  z-index:60;
  min-height:64px;
  padding:10px 24px;
  background:linear-gradient(110deg,#0d8258,#0f9567);
  color:#fff;
  border:0;
  box-shadow:0 3px 10px rgba(15,23,42,.16);
  backdrop-filter:none;
}
.topbar h1{display:flex;margin:0;align-items:center;gap:9px;color:#fff;font-size:19px;font-weight:800;letter-spacing:-.02em}
.topbar h1 .icon{width:20px;height:20px}
.topbar-subtitle{margin-top:2px!important;color:rgba(255,255,255,.78)!important;font-size:10px!important}
.topbar-meta-row{display:flex;align-items:center;gap:7px;margin-top:3px}
.topbar-plan-badge{border:1px solid rgba(255,255,255,.3)!important;background:rgba(255,255,255,.13)!important;color:#fff!important}
.topbar .cloud-status{border-color:rgba(255,255,255,.22);background:rgba(0,0,0,.09);color:#fff!important}
.topbar .cloud-status:before{background:#d1fae5}
.topbar .btn.ghost{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff}
.topbar .btn.primary{border:1px solid rgba(255,255,255,.75);background:#fff;color:var(--brand-deep);box-shadow:none}

.sidebar{
  grid-area:navigation;
  position:sticky;
  top:64px;
  z-index:50;
  width:100%;
  height:58px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:16px;
  padding:0 24px;
  background:#fff;
  color:var(--ink);
  border:0;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 7px rgba(15,23,42,.04);
}
.brand-panel{order:1;display:flex;align-items:center;gap:9px;flex:0 0 auto;padding:0}
.brand-mark{width:34px;height:34px;border:0;border-radius:9px;background:var(--brand);box-shadow:none;color:#fff}
.brand-mark .icon{width:18px;height:18px}
.brand-copy strong{color:#1e293b;font-size:13px;letter-spacing:-.01em}
.brand-copy span{margin-top:0;color:#94a3b8;font-size:8px;letter-spacing:.09em}
.sidebar-store{order:3;flex:0 0 180px;margin:0 0 0 auto;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:#f8fafc}
.sidebar-store span{color:#94a3b8;font-size:7px;letter-spacing:.1em}
.sidebar-store strong{margin-top:1px;color:#334155;font-size:10px}
.sidebar-store small{display:none}
.sidebar-foot{display:none}
.nav{order:2;position:static;display:flex;flex:1;flex-direction:row;align-items:center;gap:3px;overflow-x:auto;padding:0;background:transparent;border:0;box-shadow:none;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{
  width:auto;
  min-width:max-content;
  min-height:38px;
  flex:0 0 auto;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 10px;
  border:0;
  border-radius:8px;
  color:#64748b;
  font-size:10px;
  font-weight:700;
  text-align:center;
}
.nav button:hover{background:#f1f5f9;color:#334155}
.nav button.active{border:0;background:var(--brand);color:#fff;font-weight:800}
.nav button.active:before{display:none}
.nav .ico,.nav button.active .ico{width:auto;height:auto;margin:0;background:transparent;color:inherit}
.nav .icon.nav-icon{width:16px;height:16px;color:inherit}
.nav button.active .icon{color:#fff}

.container{grid-area:content;grid-column:auto;width:100%;max-width:1480px;margin:0 auto;padding:26px 28px 44px;overflow:visible}
.section.active{animation:none}
.page-intro{align-items:flex-end;margin-bottom:16px}
.page-intro h2{font-size:21px;font-weight:750;letter-spacing:-.025em}
.page-intro p{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.5}
.eyebrow{margin-bottom:3px;color:var(--brand);font-size:9px;letter-spacing:.1em}

/* Marites-style snapshot cards. */
.grid.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{
  min-height:94px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  grid-template-rows:auto auto auto;
  grid-template-areas:"icon label" "icon value" "icon foot";
  align-items:center;
  column-gap:13px;
  padding:15px;
  border-radius:12px;
}
.kpi:after{display:none}
.kpi-head{display:contents}
.kpi-icon{grid-area:icon;width:44px;height:44px;border-radius:10px;background:var(--brand-soft)!important;color:var(--brand)!important}
.kpi-icon .icon{width:21px;height:21px}
.kpi-label{grid-area:label;align-self:end;color:#64748b;font-size:10px;font-weight:650}
.kpi b.kpi-value{grid-area:value;align-self:center;margin:1px 0 0;color:#1f2937;font-size:19px;line-height:1.1;letter-spacing:-.025em}
.kpi-foot{grid-area:foot;align-self:start;margin-top:2px;color:#94a3b8;font-size:8px}

.workspace-launcher{margin:20px 0 24px}
.workspace-launcher-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}
.workspace-launcher-head h2{margin:0;color:#374151;font-size:15px;font-weight:750}
.workspace-launcher-head span{color:#94a3b8;font-size:9px}
.management-grid{display:grid;grid-template-columns:1.18fr repeat(3,minmax(0,1fr));grid-auto-rows:82px;gap:10px}
.management-tile{position:relative;display:flex;align-items:center;gap:12px;overflow:hidden;padding:14px;border:0;border-radius:12px;background:#fff;color:#334155;text-align:left;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.management-tile:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(15,23,42,.1)}
.management-tile:after{content:'›';position:absolute;right:13px;top:50%;transform:translateY(-52%);color:#cbd5e1;font-size:23px;font-weight:400}
.management-tile b,.management-tile small{display:block}
.management-tile b{font-size:12px}
.management-tile small{margin-top:3px;color:#94a3b8;font-size:8px}
.management-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:#e0f2fe;color:#0284c7}
.management-icon .icon{width:19px;height:19px}
.management-pos{grid-row:span 2;align-items:flex-end;padding:18px;background:linear-gradient(145deg,#0f9567,#08764f);color:#fff}
.management-pos:before{content:'';position:absolute;right:-30px;top:-38px;width:130px;height:130px;border:24px solid rgba(255,255,255,.11);border-radius:50%}
.management-pos:after{right:18px;color:rgba(255,255,255,.55)}
.management-pos .management-icon{width:48px;height:48px;background:rgba(255,255,255,.16);color:#fff}
.management-pos .management-icon .icon{width:24px;height:24px}
.management-pos b{font-size:16px}
.management-pos small{color:rgba(255,255,255,.76);font-size:9px}
.management-orders .management-icon{background:#e0f2fe;color:#0284c7}
.management-inventory .management-icon{background:#ccfbf1;color:#0f766e}
.management-reports .management-icon{background:#eef2ff;color:#4f46e5}
.management-customers .management-icon{background:#f3e8ff;color:#9333ea}
.management-finance .management-icon{background:#e2e8f0;color:#475569}
.management-settings .management-icon{background:#fef3c7;color:#b45309}

/* Dense white cards and table-first workspaces. */
.card,.stat-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:var(--shadow);padding:16px}
.card:hover{border-color:#d8e0ea}
.title{margin-bottom:12px}
.title h2{color:#374151;font-size:14px;font-weight:750}
.title-note{font-size:9px}
.btn{min-height:38px;padding:8px 12px;border-radius:8px;font-size:10px;box-shadow:none}
.btn:hover{transform:none}
.btn.primary{background:var(--brand);box-shadow:none;color:#fff}
.btn.primary:hover{background:var(--brand2)}
.btn.alt{background:var(--brand-soft);color:var(--brand-deep)}
.btn.ghost{background:#f1f5f9;color:#475569}
.input{min-height:40px;border-color:#d7dee8;border-radius:8px;padding:8px 10px;font-size:11px}
.input:focus{border-color:#38a77c;box-shadow:0 0 0 3px rgba(15,138,95,.1)}
.label{margin:9px 0 5px;color:#64748b;font-size:9px}
.table-wrap{border-color:#e2e8f0;border-radius:10px}
.table th,.table td{padding:10px;border-bottom-color:#eef2f7}
.table th{background:#f8fafc;color:#64748b;font-size:9px;letter-spacing:.04em}
.table td{font-size:11px}
.list-row{padding:11px 0}
.list-row-copy b{font-size:11px}
.list-row-copy span{font-size:9px}
.record-row{padding:10px 0}
.record-badge{border-radius:8px;background:#e0f2fe;color:#0284c7}
.record-amount{font-size:12px}

/* Full-width POS split: catalog on the left, current order on the right. */
.sell-banner{display:none}
#cashier>.page-intro{margin-bottom:12px}
.pos-pro-layout{grid-template-columns:minmax(0,1fr) minmax(360px,420px);gap:0;overflow:hidden;border:1px solid #dbe3ec;border-radius:13px;background:#fff;box-shadow:0 5px 16px rgba(15,23,42,.08)}
.catalog-card,.cart-card{min-width:0;border:0;border-radius:0;box-shadow:none}
.catalog-card{padding:18px;background:#f8fafc}
.cart-card{position:sticky;top:138px;min-height:590px;padding:18px;border-left:1px solid #e2e8f0;background:#fff}
.pos-pro-head{padding-bottom:12px;border-bottom:1px solid #e8edf3}
.pos-pro-head h2{font-size:16px}
.pos-pro-head small{font-size:9px}
.pos-filters{grid-template-columns:minmax(190px,1fr) auto;margin-bottom:10px}
.category-strip{margin-bottom:12px}
.category-chip{padding:6px 10px;border-radius:7px;font-size:9px}
.category-chip.active{border-color:var(--brand);background:var(--brand);color:#fff}
.products.pro-products{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.pro-products .product{grid-template-columns:46px minmax(0,1fr);min-height:105px;gap:9px;padding:10px;border-color:#e2e8f0;border-radius:10px;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.pro-products .product:hover{border-color:#79caa7;background:#fff;box-shadow:0 4px 10px rgba(15,23,42,.08)}
.pro-products .product-icon{width:46px;height:46px;border-radius:8px;background:#ecfdf5}
.pro-products .product-copy h4{font-size:11px}
.pro-products .product-copy p{font-size:9px}
.pro-products .product-price{font-size:10px}
.cart-lines{max-height:43vh}
.cart-line{border-radius:9px;background:#f8fafc}
.cart-summary{margin-top:12px;padding-top:12px}
.summary-row.total-row strong{font-size:24px}
.cart-actions .btn{min-height:44px}

.dashboard-split{gap:16px}
.chart{height:170px}
.bar{background:linear-gradient(180deg,#34d399,#0f8a5f)}
.module-grid{gap:12px}
.stat-card{padding:15px}
.stat-card strong{font-size:21px}
.report-list{gap:12px}
.report-bar-track i{background:var(--brand)}
.segmented{border-radius:9px;background:#f1f5f9}
.segmented button{border-radius:7px;font-size:10px}
.segmented button.active{color:var(--brand-deep)}
.setting-card{min-height:0}
.security-strip{border-radius:12px}
.security-item .security-icon{border-radius:9px}

/* Keep auth, lock, and subscription surfaces in the same BayanGO shell. */
.auth-screen{background:#f1f5f9}
.auth-layout{border-color:#dbe3ec;border-radius:16px;box-shadow:0 18px 55px rgba(15,23,42,.13)}
.auth-aside{background:linear-gradient(145deg,#08764f,#0f9567)}
.auth-tabs{background:#f1f5f9}
.lock-screen{background:radial-gradient(circle at 20% 12%,rgba(52,211,153,.23),transparent 32%),linear-gradient(145deg,#064e3b,#0f766e)}
.lock-card{border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.28)}
.subscription-gate{background:rgba(15,23,42,.76)}
.subscription-shell{border-radius:18px}
.subscription-story{background:linear-gradient(145deg,#08764f,#0f9567)}

@media(max-width:1280px){
  .sidebar{gap:10px;padding-inline:18px}
  .brand-copy span{display:none}
  .sidebar-store{display:none}
  .nav button{padding-inline:8px}
  .products.pro-products{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:1000px){
  .brand-copy{display:none}
  .management-grid{grid-template-columns:1.05fr repeat(2,minmax(0,1fr));grid-auto-rows:78px}
  .management-pos{grid-row:span 2}
  .management-settings{grid-column:3}
  .pos-pro-layout{grid-template-columns:minmax(0,1fr) minmax(320px,360px)}
  .products.pro-products{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
  .app{display:block;min-height:100vh;padding-bottom:72px}
  .topbar{position:sticky;top:0;min-height:62px;padding:9px 14px}
  .topbar h1{font-size:16px}
  .sidebar{position:fixed;inset:auto 0 0;z-index:65;width:100%;height:72px;padding:0;background:#fff;border-top:1px solid #dbe3ec;border-bottom:0;box-shadow:0 -5px 16px rgba(15,23,42,.09)}
  .brand-panel,.sidebar-store,.sidebar-foot{display:none}
  .nav{display:flex!important;flex-direction:row!important;gap:2px!important;width:100%;height:100%;overflow-x:auto;padding:6px 5px max(6px,env(safe-area-inset-bottom))}
  .nav button{width:70px!important;min-width:70px!important;min-height:54px;flex:0 0 70px!important;flex-direction:column;gap:3px;padding:5px 2px;border-radius:9px;font-size:8px}
  .nav button.active{background:var(--brand-soft);color:var(--brand-deep)}
  .nav button.active .icon{color:var(--brand-deep)}
  .nav .icon.nav-icon{width:19px;height:19px}
  .container{width:100%;padding:18px 15px 30px;overflow:hidden}
  .grid.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .management-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(78px,auto)}
  .management-pos{grid-column:1/-1;grid-row:auto;min-height:104px}
  .management-settings{grid-column:auto}
  .pos-pro-layout{grid-template-columns:1fr;gap:0}
  .cart-card{position:static;min-height:0;border-top:1px solid #e2e8f0;border-left:0}
  .products.pro-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-split{grid-template-columns:1fr}
  .modal{align-items:flex-end;padding:0}
}

@media(max-width:640px){
  .topbar{padding:calc(8px + env(safe-area-inset-top)) 11px 8px}
  .topbar-heading{max-width:57%}
  .topbar h1{font-size:14px}
  .topbar-subtitle{display:none}
  .topbar .cloud-status{display:none!important}
  .container{padding:14px 10px 24px}
  .page-intro{align-items:flex-start;flex-direction:column;gap:10px}
  .page-intro h2{font-size:18px}
  .grid.kpis{gap:8px}
  .kpi{min-height:84px;grid-template-columns:38px minmax(0,1fr);column-gap:9px;padding:11px}
  .kpi-icon{width:36px;height:36px}
  .kpi-icon .icon{width:17px;height:17px}
  .kpi b.kpi-value{font-size:16px}
  .management-grid{gap:8px}
  .management-tile{min-height:76px;padding:11px;gap:9px}
  .management-tile:after{right:9px}
  .management-icon{width:34px;height:34px}
  .management-pos{min-height:96px}
  .card,.stat-card{padding:13px;border-radius:10px}
  .products.pro-products{grid-template-columns:1fr}
  .catalog-card,.cart-card{padding:13px}
  .pro-products .product{min-height:78px}
  .settings-grid,.two,.three{grid-template-columns:1fr!important}
  .table{min-width:720px}
}

@media(prefers-reduced-motion:reduce){.management-tile{transition:none}}

/* v31: faithful Marites Store POS layout language with BayanGO branding. */
:root{
  --bg:#f1f4f8;
  --card:#fff;
  --ink:#202832;
  --muted:#66717f;
  --brand:#0f8a5f;
  --brand2:#08764f;
  --brand-deep:#075b3e;
  --brand-soft:#e5f6ee;
  --line:#dfe5ec;
  --shadow:0 3px 10px rgba(25,39,54,.08);
  --shadow-sm:0 2px 7px rgba(25,39,54,.06);
}
html,body{width:100%;min-height:100%;overflow-x:hidden;background:var(--bg);color:var(--ink)}
body{font-size:14px;letter-spacing:0}
.app{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:60px minmax(0,1fr);grid-template-areas:"topbar" "content";padding:0;background:var(--bg)}
.sidebar{display:none!important}
.nav-backdrop{display:none}
.topbar{grid-area:topbar;position:sticky;top:0;z-index:60;min-height:60px;padding:8px 18px;background:linear-gradient(90deg,var(--brand-deep),var(--brand));color:#fff;border:0;box-shadow:0 2px 8px rgba(8,57,40,.22);backdrop-filter:none}
.topbar-leading{min-width:0;display:flex;align-items:center;gap:11px}
.topbar-back{position:relative;width:38px;height:38px;flex:0 0 38px;overflow:hidden;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.topbar-back:hover{background:rgba(255,255,255,.16)}
.topbar-back[hidden]{display:none!important}
.topbar-back>svg.icon{position:absolute!important;inset:50% auto auto 50%!important;width:20px!important;height:20px!important;margin:0!important;transform:translate(-50%,-50%)!important}
.topbar-heading{min-width:0}
.topbar h1{display:flex;align-items:center;gap:8px;margin:0;color:#fff;font-size:18px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.topbar h1>svg.icon{width:20px!important;height:20px!important;min-width:20px;padding:0;border-radius:0;background:transparent;color:#fff}
.topbar-subtitle{display:block!important;overflow:hidden;max-width:560px;margin-top:3px!important;color:rgba(255,255,255,.75)!important;font-size:10px!important;text-overflow:ellipsis;white-space:nowrap}
.topbar-meta-row{display:none}
.topbar-actions{display:flex;align-items:center;gap:7px}
.topbar .cloud-status{min-height:32px;margin:0!important;padding:6px 9px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(0,0,0,.08);color:#fff!important;font-size:10px!important}
.topbar .cloud-status:before{background:#c8f7df}
.topbar .btn{min-height:34px;padding:7px 10px;border:1px solid transparent;border-radius:7px;font-size:10px;box-shadow:none}
.topbar .btn.ghost{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.09);color:#fff}
.topbar .btn.primary{border-color:#fff;background:#fff;color:var(--brand-deep)}
.desktop-pos-action{color:#fff!important}
.desktop-pos-action.pos-action-pending{background:#d97910!important}
.desktop-pos-action.pos-action-orders{background:#1599c8!important}
.desktop-pos-action.pos-action-settings{background:#7c4dbe!important}
body:not([data-section="cashier"]) .desktop-pos-action{display:none!important}
.mobile-nav-button{display:none!important}

.container{grid-area:content;grid-column:auto;width:100%;max-width:none;margin:0;padding:22px 26px 42px;overflow:visible}
.section.active{animation:none}
.page-intro{align-items:flex-end;margin-bottom:14px}
.page-intro .eyebrow{display:none}
.page-intro h2{margin:0;color:var(--ink);font-size:20px;font-weight:800;letter-spacing:-.02em}
.page-intro p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
.card,.stat-card{border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--shadow-sm)}
.card:hover{border-color:#d2d9e2}
.title h2{font-size:14px}
.btn{min-height:39px;padding:8px 12px;border-radius:8px;font-size:11px;box-shadow:none;overflow:hidden!important}
.btn:hover{transform:none}
.btn.primary{background:var(--brand);box-shadow:none}
.btn.alt{background:var(--brand-soft);color:var(--brand-deep)}
.btn.ghost{background:#edf1f5;color:#44505e}
.input{min-height:41px;border:1px solid #d6dde6;border-radius:8px;padding:8px 10px;background:#fff;font-size:13px}
.input:focus{border-color:#188f68;box-shadow:0 0 0 3px rgba(15,138,95,.12)}

/* Dashboard: snapshot, management hub, and recent orders. */
#dashboard.active{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.95fr);grid-template-areas:"intro intro" "kpis kpis" "launcher recent" "detail detail";gap:0 18px}
#dashboard>.page-intro{grid-area:intro}
#dashboard>.grid.kpis{grid-area:kpis;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#dashboard>.workspace-launcher{grid-area:launcher;margin:20px 0 0}
#dashboard>.dashboard-recent{grid-area:recent;margin:20px 0 0!important}
#dashboard>.dashboard-split{grid-area:detail;margin-top:18px!important}
.kpi{min-height:88px;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"icon label" "icon value" "icon foot";column-gap:12px;align-items:center;padding:13px 15px}
.kpi:after{display:none}
.kpi-head{display:contents}
.kpi-icon{grid-area:icon;width:42px;height:42px;border-radius:9px;background:#e2f2fb!important;color:#168fbd!important}
.kpi-label{grid-area:label;align-self:end;color:#687383;font-size:10px;font-weight:650}
.kpi b.kpi-value{grid-area:value;margin:1px 0;color:#202832;font-size:19px;line-height:1.1}
.kpi-foot{grid-area:foot;align-self:start;margin:2px 0 0;color:#8b95a3;font-size:9px}
.kpi:nth-child(2) .kpi-icon{background:#e2f8ed!important;color:#159760!important}
.kpi:nth-child(3) .kpi-icon{background:#ede8fb!important;color:#7655b6!important}
.workspace-launcher-head{margin-bottom:10px}
.workspace-launcher-head h2{font-size:15px}
.workspace-launcher-head span{font-size:10px}
.management-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:82px;gap:10px}
.management-tile{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#273341;text-align:left;box-shadow:var(--shadow-sm)}
.management-tile:after{display:none}
.management-tile b,.management-tile small{display:block}
.management-tile b{font-size:12px}
.management-tile small{margin-top:3px;color:#788391;font-size:9px}
.management-icon{position:relative;width:38px;height:38px;flex:0 0 38px;overflow:hidden;border-radius:9px;background:#e2f2fb;color:#168fbd}
.management-icon>svg.icon{position:absolute!important;inset:50% auto auto 50%!important;width:19px!important;height:19px!important;margin:0!important;transform:translate(-50%,-50%)!important}
.management-pos{grid-row:span 2;align-items:flex-end;padding:17px;border-color:transparent;background:var(--brand);color:#fff}
.management-pos:before{display:none}
.management-pos .management-icon{width:46px;height:46px;flex-basis:46px;background:rgba(255,255,255,.17);color:#fff}
.management-pos b{font-size:16px}
.management-pos small{color:rgba(255,255,255,.8);font-size:10px}
.management-inventory .management-icon{background:#dff7f2;color:#118b7d}
.management-reports .management-icon{background:#e8edff;color:#5366c8}
.management-customers .management-icon{background:#f1e7ff;color:#8248ba}
.management-finance .management-icon{background:#e8edf2;color:#516171}
.management-staff .management-icon{background:#fff0df;color:#c36c18}
.management-settings .management-icon{background:#fff4c9;color:#aa7610}
.dashboard-recent{min-width:0;padding:14px}
.dashboard-recent .title{margin-bottom:8px}
.dashboard-recent .record-row{grid-template-columns:34px minmax(0,1fr) auto;padding:10px 0}
.dashboard-recent .record-badge{width:32px;height:32px;border-radius:8px;background:#e2f2fb;color:#168fbd}

/* Point of Sale: catalog and fixed current order use the whole viewport. */
body[data-section="cashier"] .container{padding:0;overflow:hidden}
#cashier.active{display:block;height:calc(100dvh - 60px);min-height:590px;overflow:hidden;background:#f5f7fa}
.pos-pagebar,.pos-mobile-tabs,.mobile-scan-launch,.mobile-cart-bar{display:none}
.pos-pro-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,28vw);gap:0;width:100%;height:100%;overflow:hidden;border:0;border-radius:0;background:#fff;box-shadow:none}
.catalog-card,.cart-card{min-width:0;height:100%;padding:16px 18px;border:0;border-radius:0;box-shadow:none}
.catalog-card{display:flex;flex-direction:column;overflow-y:auto;background:#f5f7fa}
.cart-card{position:static;display:flex;flex-direction:column;overflow:hidden;border-left:1px solid var(--line);background:#fff}
.pos-pro-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;margin:0 0 12px;padding:0 0 11px;border-bottom:1px solid var(--line)}
.pos-pro-head h2{margin:0;font-size:18px}
.pos-pro-head small{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.pos-filters{display:grid;grid-template-columns:minmax(190px,1fr) auto;gap:8px;flex:0 0 auto;margin-bottom:10px}
.pos-search-field{position:relative;display:block}
.pos-search-field>svg.icon{position:absolute!important;z-index:1;left:12px!important;top:50%!important;width:17px!important;height:17px!important;color:#7f8996;transform:translateY(-50%)!important}
.pos-search-field .input{width:100%;padding-left:39px;font-size:14px}
.scanner-inline-action{min-width:92px;background:#169fcf;color:#fff}
.alphabet-strip,.category-strip{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:5px;margin:0 0 9px}
.alphabet-chip,.category-chip{min-width:30px;min-height:31px;padding:5px 8px;border:1px solid transparent;border-radius:7px;background:#fff;color:#35404d;font-size:10px;font-weight:750;cursor:pointer}
.alphabet-chip:hover,.category-chip:hover{border-color:#b8c7d6}
.alphabet-chip.active,.category-chip.active{border-color:#168fbd;background:#168fbd;color:#fff}
.alphabet-chip:disabled{opacity:.35;cursor:default}
.category-chip{min-width:auto;padding-inline:12px;border-radius:16px;background:#fff}
.products.pro-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));align-content:start;gap:10px;padding-bottom:8px}
.pro-products .product{position:relative;min-width:0;min-height:222px;display:grid;grid-template-columns:1fr;grid-template-rows:112px minmax(59px,auto) auto;overflow:hidden;padding:0;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);text-align:left;box-shadow:0 1px 3px rgba(26,40,55,.04)}
.pro-products .product:hover{border-color:#91b7ca;background:#fff;box-shadow:0 4px 11px rgba(26,40,55,.09)}
.pro-products .product-icon{grid-row:1;width:100%;height:112px;display:grid;place-items:center;overflow:hidden;border:0;border-radius:0;background:#e9eef3;color:#708090;font-size:30px;font-weight:850}
.pro-products .product-icon img{width:100%;height:100%;object-fit:cover}
.pro-products .product-copy{min-width:0;padding:9px 10px 7px}
.pro-products .product-copy h4{overflow:hidden;margin:0;color:#202832;font-size:12px;font-weight:750;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.pro-products .product-copy p{overflow:hidden;margin:3px 0;color:#7b8592;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.product-card-price{display:block;margin-top:5px;color:#334155;font-size:11px}
.product-card-stock{position:absolute;top:7px;right:7px;max-width:calc(100% - 14px);padding:3px 6px;border-radius:10px;background:rgba(255,255,255,.92);color:#4f5d69;font-size:8px;box-shadow:0 1px 4px rgba(15,23,42,.1)}
.product-card-stock.low-stock{background:#fff4d3;color:#8b5e00}
.product-card-stock.no-stock{background:#ffe7e7;color:#a52c2c}
.product-add{display:flex;align-items:center;justify-content:center;gap:5px;min-height:38px;margin:0 9px 9px;border-radius:6px;background:#e3f2fa;color:#126d93;font-size:10px;font-weight:800}
.product-add>svg.icon{width:14px!important;height:14px!important}
.product.no-stock .product-add{background:#eef1f4;color:#89929d}
.product-empty{min-height:260px;place-content:center;text-align:center}
.product-empty>svg.icon{width:30px!important;height:30px!important;margin:0 auto 8px;color:#8d98a6}

.cart-column-head{display:grid;grid-template-columns:minmax(0,1fr) 82px 72px;gap:8px;flex:0 0 auto;padding:0 0 7px;color:#8a94a1;font-size:8px;font-weight:800;text-transform:uppercase}
.cart-column-head span:nth-child(2),.cart-column-head span:nth-child(3){text-align:center}
.cart-lines{min-height:0;max-height:none;flex:1;overflow-y:auto;padding-right:2px}
.cart-line{display:grid;grid-template-columns:36px minmax(0,1fr) 82px 72px;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #edf0f4;border-radius:0;background:#fff}
.cart-line-image{width:36px;height:36px;display:grid;place-items:center;overflow:hidden;border-radius:7px;background:#e9eef3;color:#607080;font-size:13px;font-weight:850}
.cart-line-image img{width:100%;height:100%;object-fit:cover}
.cart-line-copy{min-width:0}
.cart-line-title{overflow:hidden;color:#202832;font-size:11px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.cart-line-meta{margin-top:3px;color:#7d8793;font-size:8px;line-height:1.3}
.tier-link{display:block;margin-top:3px;padding:0;border:0;background:transparent;color:#168fbd;font-size:8px;cursor:pointer}
.cart-line-actions{display:grid;grid-template-columns:25px minmax(22px,1fr) 25px;align-items:center;gap:2px}
.cart-line-actions button{position:relative;width:25px;height:25px;overflow:hidden;border:0;border-radius:50%;background:#e8edf2;color:#344150;cursor:pointer}
.cart-line-actions button>svg.icon{position:absolute!important;inset:50% auto auto 50%!important;width:13px!important;height:13px!important;margin:0!important;transform:translate(-50%,-50%)!important}
.cart-line-actions strong{text-align:center;font-size:11px}
.cart-line-total{text-align:right;color:#175d7a;font-size:11px;white-space:nowrap}
.cart-empty{height:100%;min-height:220px;display:grid;place-items:center;color:#7f8995;text-align:center}
.cart-empty span{width:46px;height:46px;display:grid;place-items:center;margin:0 auto 10px;border-radius:50%;background:#e8edf2;color:#5f6d7b}
.cart-empty b{display:block;color:#3c4754;font-size:12px}
.cart-empty p{max-width:220px;margin:5px auto 0;font-size:9px;line-height:1.45}
#proCartFooter{flex:0 0 auto;border-top:1px solid var(--line);background:#fff}
.cart-summary{margin-top:0;padding:12px 0 0}
.summary-row{padding:4px 0;font-size:10px}
.summary-row.total-row{margin-top:5px;padding-top:8px;border-top:1px solid #edf0f4;font-size:13px}
.summary-row.total-row strong{font-size:25px}
.cart-customer{margin:10px 0 8px}
.cart-customer .input{min-width:0}
.cart-actions{display:grid;gap:8px}
.cart-checkout{width:100%;min-height:48px;display:flex;justify-content:space-between;padding-inline:16px;background:#16a45e!important;font-size:13px}
.cart-checkout strong{font-size:14px}
.cart-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cart-secondary-actions .btn{min-width:0;min-height:42px}
.scanner-cart-action{background:#169fcf;color:#fff}
.save-cart-action{background:#e5a900;color:#fff}

/* Dialogs and operational pages follow the same flat card hierarchy. */
.modal{align-items:center;padding:18px;background:rgba(22,30,38,.62);backdrop-filter:none}
.sheet{width:min(660px,100%);max-height:calc(100dvh - 36px);padding:20px;border:0;border-radius:14px;box-shadow:0 22px 62px rgba(16,24,32,.28)}
.pro-modal .sheet{width:min(520px,100%)}
.checkout-total{border-radius:9px;background:#eef3f8}
.checkout-total strong{color:#168fbd}
.payment-option{border-radius:8px}
.list-row{border-bottom-color:#edf0f4}
.table-wrap{border-color:var(--line);border-radius:9px}
.table th{background:#f4f6f9}
.segmented{border-radius:8px;background:#e7ecf2}
.segmented button{border-radius:7px}

@media(max-width:1180px) and (min-width:901px){
  .alphabet-strip{display:none}
  .products.pro-products{grid-template-columns:repeat(auto-fill,minmax(138px,1fr))}
  .pos-pro-layout{grid-template-columns:minmax(0,1fr) 360px}
  .topbar-subtitle{display:none!important}
}

@media(max-width:900px){
  body.mobile-nav-open{overflow:hidden}
  .app{display:block!important;min-height:100vh;padding-bottom:calc(72px + env(safe-area-inset-bottom))!important}
  .topbar{position:sticky;top:0;min-height:62px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px}
  .topbar-leading{gap:7px;min-width:0}
  .topbar-back{width:36px;height:36px;flex-basis:36px}
  .topbar-heading{max-width:none;min-width:0}
  .topbar h1{overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
  .topbar h1>svg.icon{display:none}
  .topbar-subtitle{display:none!important}
  .topbar-meta-row{display:flex;gap:5px;margin-top:2px}
  .topbar-store-mobile{display:block;overflow:hidden;max-width:150px;margin:0!important;color:rgba(255,255,255,.72)!important;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
  .topbar-plan-badge{padding:1px 5px!important;border-color:rgba(255,255,255,.27)!important;background:rgba(255,255,255,.11)!important;color:#fff!important;font-size:7px!important}
  .desktop-pos-action,.topbar .cloud-status{display:none!important}
  .topbar-actions{gap:5px}
  .topbar-actions .btn{width:36px;min-width:36px;height:36px;min-height:36px;padding:0}
  .topbar-actions .btn span{display:none}
  .topbar-actions .btn>svg.icon{width:17px!important;height:17px!important}
  .nav-backdrop{position:fixed;inset:0 0 calc(70px + env(safe-area-inset-bottom));z-index:69;display:block;border:0;background:rgba(15,24,31,.5);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
  .sidebar{position:fixed;inset:auto 8px calc(78px + env(safe-area-inset-bottom)) 8px;z-index:70;width:auto;height:auto;max-height:calc(100dvh - 104px - env(safe-area-inset-top));display:flex!important;flex-direction:column;padding:17px 14px 14px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(180deg,#0b5437,#073f2b);transform:translateY(calc(100% + 100px));transition:transform .22s ease;box-shadow:0 22px 65px rgba(5,22,16,.34)}
  body.mobile-nav-open .sidebar{transform:translateY(0)}
  body.mobile-nav-open .nav-backdrop{opacity:1;visibility:visible}
  .sidebar .brand-panel{display:flex!important;padding:0 4px 13px}
  .sidebar .sidebar-store{display:block!important;margin:0 0 10px}
  .sidebar .sidebar-foot{display:none!important}
  .sidebar .nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px!important;overflow-y:auto!important;padding:2px 0!important}
  .sidebar .nav button{width:100%!important;min-width:0!important;min-height:48px!important;display:flex;flex-direction:row!important;justify-content:flex-start!important;gap:8px;padding:8px!important;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(255,255,255,.035);color:#c6dbd0;font-size:11px}
  .sidebar .nav button.active{background:rgba(255,255,255,.14);color:#fff}
  .sidebar .nav .ico{width:28px!important;height:28px!important;flex-basis:28px!important;background:rgba(255,255,255,.08)}
  .mobile-tabbar{z-index:75;min-height:calc(70px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 5px max(6px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,255,255,.98);box-shadow:0 -6px 20px rgba(24,38,52,.1)}
  .mobile-tabbar button{min-height:56px;border-radius:9px;color:#677382;font-size:9px}
  .mobile-tabbar button.active{background:var(--brand-soft);color:var(--brand-deep)}
  .container{padding:15px 11px 28px}
  #dashboard.active{display:block}
  #dashboard>.workspace-launcher,#dashboard>.dashboard-recent,#dashboard>.dashboard-split{margin-top:14px!important}
  #dashboard>.grid.kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .kpi{min-height:104px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px}
  .kpi-icon{width:34px;height:34px;margin-bottom:3px}
  .kpi-label{font-size:9px}
  .kpi b.kpi-value{font-size:15px}
  .kpi-foot{font-size:8px}
  .management-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(78px,auto);gap:8px}
  .management-pos{grid-column:1/-1;grid-row:auto;min-height:100px}
  .dashboard-recent{min-height:0}

  body[data-section="cashier"] .container{padding:0;overflow:visible}
  #cashier.active{height:auto;min-height:calc(100dvh - 62px - 72px);overflow:visible;padding-bottom:8px}
  .pos-pagebar{display:none}
  .mobile-scan-launch{width:calc(100% - 20px);min-height:64px;display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;gap:10px;margin:10px;padding:10px 12px;border:0;border-radius:11px;background:var(--brand);color:#fff;text-align:left;box-shadow:0 3px 9px rgba(15,95,65,.2)}
  .mobile-scan-launch>span:first-child{position:relative;width:40px;height:40px;overflow:hidden;border-radius:9px;background:rgba(255,255,255,.15)}
  .mobile-scan-launch>span:first-child>svg.icon{position:absolute!important;inset:50% auto auto 50%!important;width:21px!important;height:21px!important;margin:0!important;transform:translate(-50%,-50%)!important}
  .mobile-scan-launch b,.mobile-scan-launch small{display:block}
  .mobile-scan-launch b{font-size:14px}
  .mobile-scan-launch small{margin-top:2px;color:rgba(255,255,255,.75);font-size:9px}
  .pos-mobile-tabs{position:sticky;top:62px;z-index:25;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 10px 8px;background:#f5f7fa}
  .pos-mobile-tabs button{min-height:40px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#596675;font-size:11px;font-weight:800}
  .pos-mobile-tabs button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-deep)}
  .mobile-cart-count{min-width:19px;height:19px;display:grid;place-items:center;padding:0 4px;border-radius:10px;background:#e7ebf0;color:#45515e;font-size:9px}
  .pos-mobile-tabs button.active .mobile-cart-count{background:var(--brand);color:#fff}
  .pos-pro-layout{display:block;width:100%;height:auto;overflow:visible;background:#f5f7fa}
  .catalog-card,.cart-card{height:auto;padding:10px;border:0!important;border-radius:0!important;box-shadow:none!important}
  .catalog-card{overflow:visible}
  .cart-card{position:static;min-height:calc(100dvh - 184px - 72px);overflow:visible}
  #cashier[data-mobile-view="catalog"] .catalog-card{display:flex}
  #cashier[data-mobile-view="catalog"] .cart-card{display:none}
  #cashier[data-mobile-view="order"] .catalog-card{display:none}
  #cashier[data-mobile-view="order"] .cart-card{display:flex}
  .pos-pro-head{margin-bottom:9px;padding-bottom:9px}
  .pos-pro-head h2{font-size:15px}
  .pos-pro-head small{font-size:9px}
  .pos-filters{grid-template-columns:minmax(0,1fr) 44px;gap:7px;margin-bottom:8px}
  .pos-search-field .input{font-size:16px}
  .scanner-inline-action{min-width:44px;padding:0}
  .scanner-inline-action span{display:none}
  .alphabet-strip{display:none}
  .category-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;max-height:76px;overflow-y:auto;margin-bottom:9px}
  .category-chip{min-width:0;overflow:hidden;padding:6px 5px;border-radius:7px;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
  .products.pro-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pro-products .product{min-height:208px;grid-template-rows:100px minmax(59px,auto) auto}
  .pro-products .product-icon{height:100px}
  .pro-products .product-copy{padding:8px 9px 6px}
  .product-add{min-height:40px;margin:0 8px 8px}
  .cart-column-head{grid-template-columns:minmax(0,1fr) 82px 70px}
  .cart-lines{overflow:visible}
  #proCartFooter{margin-top:auto}
  .cart-line{grid-template-columns:34px minmax(0,1fr) 82px 70px;gap:6px}
  .mobile-cart-bar{position:fixed;z-index:68;left:10px;right:10px;bottom:calc(78px + env(safe-area-inset-bottom));min-height:56px;display:none;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:8px 12px;border:0;border-radius:11px;background:#173f34;color:#fff;text-align:left;box-shadow:0 10px 28px rgba(15,35,28,.28)}
  #cashier[data-mobile-view="catalog"] .mobile-cart-bar.has-items{display:grid}
  .mobile-cart-bar b,.mobile-cart-bar small{display:block}
  .mobile-cart-bar b{font-size:11px}.mobile-cart-bar small{color:#bad1c8;font-size:8px}
  .mobile-cart-bar>strong{font-size:14px;white-space:nowrap}
  .mobile-cart-open{display:flex;align-items:center;gap:3px;color:#d9e9e3;font-size:9px}
  .mobile-cart-open>svg.icon{width:14px!important;height:14px!important}
  .modal{align-items:flex-end;padding:0}
  .sheet,.pro-modal .sheet{width:100%;max-height:94dvh;padding:18px 15px calc(18px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0}
  #scannerModal .sheet{height:100dvh;max-height:100dvh;border-radius:0;padding-top:calc(12px + env(safe-area-inset-top))}
}

@media(max-width:520px){
  #dashboard>.grid.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpi{padding:9px 8px}.kpi-foot{display:none}
  .management-tile{padding:10px}.management-tile small{display:none}
  .products.pro-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cart-column-head{display:none}
  .cart-line{grid-template-columns:34px minmax(0,1fr) 80px;grid-template-areas:"image copy qty" "image total qty"}
  .cart-line-image{grid-area:image}.cart-line-copy{grid-area:copy}.cart-line-actions{grid-area:qty}.cart-line-total{grid-area:total;text-align:left}
}

@media(max-width:360px){
  .topbar-store-mobile{max-width:115px}
  .pro-products .product{min-height:194px;grid-template-rows:88px minmax(58px,auto) auto}
  .pro-products .product-icon{height:88px}
}

/* v32 POS usability pass: top-stacked order rows, stable payment dock, and cashier-scale controls. */
body[data-section="cashier"] .topbar{min-height:64px}
body[data-section="cashier"] .topbar h1{font-size:18px}
body[data-section="cashier"] .topbar-actions{gap:8px}
body[data-section="cashier"] .topbar-actions .btn,
body[data-section="cashier"] .topbar .cloud-status{
  min-height:40px;
  height:40px;
  padding:8px 12px;
  border-radius:9px;
  font-size:12px;
  line-height:1;
}
body[data-section="cashier"] .topbar-actions .btn>svg.icon{width:16px!important;height:16px!important}
body[data-section="cashier"] #openScannerButton{padding-inline:15px;border-color:#fff;background:#fff;color:var(--brand-deep);font-weight:850;box-shadow:0 2px 8px rgba(0,0,0,.13)}

#cashier.active{height:calc(100dvh - 64px)}
.pos-pro-layout{grid-template-columns:minmax(0,1fr) clamp(420px,26vw,480px)}
.catalog-card,.cart-card{padding:20px}
.cart-card{border-left:2px solid #d9e2ea;box-shadow:-8px 0 22px rgba(27,43,58,.035)}
.pos-pro-head{margin-bottom:14px;padding-bottom:13px}
.pos-pro-head h2{font-size:21px;line-height:1.2}
.pos-pro-head small{margin-top:4px;font-size:12px}
.pos-filters{gap:10px;margin-bottom:11px}
.pos-search-field .input{min-height:44px;padding-left:42px;font-size:15px}
.scanner-inline-action{min-width:104px;min-height:44px;font-size:14px;font-weight:800}

.alphabet-strip,
.category-strip{
  min-width:0;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  gap:6px;
  padding:1px 1px 6px;
  scrollbar-width:thin;
  scrollbar-color:#c7d2dd transparent;
}
.alphabet-chip,.category-chip{flex:0 0 auto;min-height:34px;border:1px solid #dde5ec;background:#fff;font-size:12px}
.alphabet-chip{min-width:34px;padding:6px 9px}
.category-chip{min-height:36px;padding:7px 14px}
.alphabet-chip.active,.category-chip.active{border-color:#138fbd;background:#138fbd;color:#fff;box-shadow:0 2px 6px rgba(19,143,189,.18)}

.products.pro-products{
  grid-template-columns:repeat(auto-fill,minmax(min(175px,100%),210px));
  justify-content:start;
  align-content:start;
  gap:14px;
}
.pro-products .product{min-height:258px;grid-template-rows:128px minmax(76px,auto) auto;border-radius:11px}
.pro-products .product-icon{height:128px;font-size:36px}
.pro-products .product-copy{padding:12px 12px 9px}
.pro-products .product-copy h4{font-size:15px;line-height:1.3}
.pro-products .product-copy p{margin-top:5px;font-size:12px}
.product-card-price{margin-top:8px;color:#102a43;font-size:18px;line-height:1}
.product-card-stock{top:9px;right:9px;padding:5px 8px;font-size:10px}
.product-add{min-height:44px;margin:0 11px 11px;border-radius:8px;font-size:13px}
.product-add>svg.icon{width:16px!important;height:16px!important}

.cart-column-head{grid-template-columns:minmax(0,1fr) 104px 90px;gap:10px;padding:0 0 10px;font-size:10px;letter-spacing:.035em}
.cart-column-head span:nth-child(2){text-align:center}
.cart-column-head span:nth-child(3){text-align:right}
.cart-lines{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  align-content:flex-start;
  gap:0;
  min-height:0;
  max-height:none;
  margin:0;
  padding:0 4px 0 0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.cart-line{
  flex:0 0 auto;
  grid-template-columns:44px minmax(0,1fr) 104px 90px;
  gap:10px;
  min-height:68px;
  padding:11px 0;
  align-items:center;
}
.cart-line-image{width:44px;height:44px;border-radius:9px;font-size:16px}
.cart-line-title{font-size:14px;line-height:1.3}
.cart-line-meta{margin-top:4px;font-size:11px}
.tier-link{font-size:10px}
.cart-line-actions{grid-template-columns:34px minmax(26px,1fr) 34px;gap:4px}
.cart-line-actions button{width:34px;height:34px}
.cart-line-actions button>svg.icon{width:15px!important;height:15px!important}
.cart-line-actions strong{font-size:14px}
.cart-line-total{font-size:14px;font-weight:850}
.cart-empty{height:auto;min-height:0;display:grid;place-items:center;flex:0 0 auto;padding:58px 18px;color:#758290}
.cart-empty span{width:52px;height:52px;margin-bottom:13px}
.cart-empty b{font-size:15px}
.cart-empty p{margin-top:7px;font-size:12px}

#proCartFooter{
  position:sticky;
  z-index:4;
  bottom:0;
  flex:0 0 auto;
  margin:0 -2px;
  padding:0 2px;
  border-top:1px solid #dce4eb;
  background:#fff;
  box-shadow:0 -8px 20px rgba(26,42,58,.055);
}
.cart-summary{padding-top:13px}
.summary-row{padding:5px 0;font-size:13px}
.summary-row.total-row{margin-top:6px;padding-top:10px;font-size:16px}
.summary-row.total-row strong{font-size:28px;line-height:1;color:#075f42}
.cart-customer{margin:12px 0 10px}
.cart-customer .input{min-height:44px;font-size:14px}
.cart-customer .btn{min-width:44px;min-height:44px}
.cart-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:0}
.cart-checkout{min-height:54px;padding-inline:18px;border-radius:9px;font-size:15px;font-weight:850;box-shadow:0 4px 11px rgba(22,164,94,.2)}
.cart-checkout strong{font-size:17px}
.cart-secondary-actions{grid-template-columns:1fr 1fr;gap:9px}
.cart-secondary-actions .btn{min-height:42px;border:1px solid #d8e1e9;background:#f2f5f8;color:#344150;font-size:12px;box-shadow:none}
.cart-secondary-actions .scanner-cart-action{background:#e8f5fb;color:#0b739c}
.cart-secondary-actions .save-cart-action{background:#fff7dd;color:#8a6500}

@media(max-width:1320px) and (min-width:901px){
  .pos-pro-layout{grid-template-columns:minmax(0,1fr) 400px}
  .products.pro-products{grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),190px));gap:11px}
  .pro-products .product{min-height:238px;grid-template-rows:114px minmax(72px,auto) auto}
  .pro-products .product-icon{height:114px}
  .alphabet-strip{display:flex}
}

@media(max-width:900px){
  body[data-section="cashier"] .topbar{min-height:62px}
  body[data-section="cashier"] .topbar h1{font-size:15px}
  body[data-section="cashier"] .topbar-actions .btn{width:40px;min-width:40px;height:40px;min-height:40px;padding:0}
  #cashier.active{height:auto}
  .catalog-card,.cart-card{padding:12px}
  .alphabet-strip{display:flex;margin-bottom:7px;padding-bottom:5px}
  .alphabet-chip{min-width:34px;min-height:34px}
  .category-strip{display:flex;max-height:none;margin-bottom:9px;padding-bottom:5px}
  .category-chip{min-width:auto;min-height:36px;padding:7px 13px;font-size:11px}
  .products.pro-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pro-products .product{min-height:222px;grid-template-rows:104px minmax(69px,auto) auto}
  .pro-products .product-icon{height:104px}
  .pro-products .product-copy h4{font-size:14px}
  .product-card-price{font-size:16px}
  .product-add{min-height:44px}

  #cashier[data-mobile-view="order"] .mobile-scan-launch{display:none}
  #cashier.active[data-mobile-view="order"]{height:calc(100dvh - 62px - 72px);min-height:0;overflow:hidden}
  #cashier[data-mobile-view="order"] .pos-mobile-tabs{position:static;height:49px;padding-top:7px;box-sizing:border-box}
  #cashier[data-mobile-view="order"] .pos-pro-layout{height:calc(100% - 49px);overflow:hidden}
  #cashier[data-mobile-view="order"] .cart-card{height:100%;min-height:0;overflow:hidden}
  #cashier[data-mobile-view="order"] .cart-lines{overflow-y:auto}
  #cashier[data-mobile-view="order"] #proCartFooter{position:sticky;bottom:0}
  .cart-column-head{grid-template-columns:minmax(0,1fr) 96px 82px}
  .cart-line{grid-template-columns:40px minmax(0,1fr) 96px 82px;min-height:64px}
}

@media(max-width:520px){
  .mobile-scan-launch{min-height:68px}
  .pos-mobile-tabs button{min-height:42px;font-size:12px}
  .pos-filters{grid-template-columns:minmax(0,1fr) 48px}
  .scanner-inline-action{min-width:48px;min-height:44px}
  .products.pro-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .pro-products .product{min-height:214px;grid-template-rows:96px minmax(68px,auto) auto}
  .pro-products .product-icon{height:96px}
  .pro-products .product-copy{padding:9px 9px 7px}
  .pro-products .product-copy h4{font-size:13px}
  .pro-products .product-copy p{font-size:10px}
  .product-card-price{font-size:15px}
  .product-card-stock{font-size:9px}
  .product-add{min-height:42px;margin:0 8px 8px;font-size:12px}
  .cart-column-head{display:none}
  .cart-line{grid-template-columns:40px minmax(0,1fr) 92px;grid-template-areas:"image copy qty" "image total qty";gap:5px 8px}
  .cart-line-image{grid-area:image;width:40px;height:40px}
  .cart-line-copy{grid-area:copy}
  .cart-line-actions{grid-area:qty}
  .cart-line-total{grid-area:total;text-align:left}
  .summary-row.total-row strong{font-size:25px}
  .cart-checkout{min-height:52px}
}

/* v33 reference-match pass: compact retail density and Marites-style POS proportions. */
body[data-section="cashier"]{--pos-blue:#0b8fc9;--pos-blue-deep:#087daf;--pos-surface:#f5f7fb;--pos-line:#dfe5ec}
body[data-section="cashier"] .app{grid-template-rows:54px minmax(0,1fr)}
body[data-section="cashier"] .topbar{
  min-height:54px;
  height:54px;
  padding:6px 24px;
  background:linear-gradient(90deg,var(--pos-blue-deep),var(--pos-blue));
  box-shadow:0 2px 7px rgba(9,93,132,.2);
}
body[data-section="cashier"] .topbar-leading{gap:8px}
body[data-section="cashier"] .topbar-back{width:32px;height:32px;flex-basis:32px;border-radius:6px;background:transparent}
body[data-section="cashier"] .topbar-back:hover{background:rgba(255,255,255,.13)}
body[data-section="cashier"] .topbar h1{font-size:18px;line-height:1}
body[data-section="cashier"] .topbar h1>svg.icon{display:none}
body[data-section="cashier"] .topbar-subtitle{display:none!important}
body[data-section="cashier"] .topbar-actions{gap:8px}
body[data-section="cashier"] .topbar-actions .btn,
body[data-section="cashier"] .topbar .cloud-status{
  width:auto;
  min-width:0;
  min-height:34px;
  height:34px;
  padding:6px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:800;
}
body[data-section="cashier"] .topbar-actions .icon-only{width:34px;min-width:34px;padding:0}
body[data-section="cashier"] .desktop-pos-action.pos-action-pending{background:#ee7b19!important}
body[data-section="cashier"] .desktop-pos-action.pos-action-orders{background:#158fc0!important}
body[data-section="cashier"] .desktop-pos-action.pos-action-settings{background:#8a3dcc!important}
body[data-section="cashier"] .topbar .cloud-status{border-color:rgba(255,255,255,.3);background:rgba(0,0,0,.08);color:#fff!important}
.topbar-count{min-width:17px;height:17px;display:inline-grid;place-items:center;margin-left:2px;padding:0 4px;border-radius:9px;background:rgba(255,255,255,.22);font-size:9px}
.topbar-user{max-width:130px;overflow:hidden;color:#fff;font-size:11px;font-weight:850;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
body[data-section="cashier"] .topbar-lock,
body[data-section="cashier"] .topbar-logout{border-color:transparent;background:transparent}

#cashier.active{height:calc(100dvh - 54px);min-height:540px;background:var(--pos-surface)}
.pos-pro-layout{grid-template-columns:minmax(0,1fr) clamp(400px,26.5vw,460px)}
.catalog-card,.cart-card{padding:0;border-radius:0}
.catalog-card{overflow:hidden;padding:22px 24px 14px;background:var(--pos-surface)}
.catalog-card>.pos-pro-head{display:none}
.cart-card{border-left:1px solid #d4dce5;box-shadow:-2px 0 8px rgba(35,53,69,.035)}
.cart-card>.pos-pro-head{min-height:78px;margin:0;padding:18px 24px;border-bottom:1px solid var(--pos-line)}
.cart-card>.pos-pro-head h2{font-size:22px}
.cart-card>.pos-pro-head small{font-size:11px}
.cart-card>.pos-pro-head .btn{min-height:32px;padding:6px 9px;border-radius:7px;font-size:11px}
.cart-column-head{display:none}

.pos-filters{grid-template-columns:minmax(0,1fr) 48px;gap:9px;margin:0 0 14px}
.pos-search-field .input{min-height:50px;padding-left:42px;border-color:#cbd5e1;border-radius:7px;background:#f8fafc;font-size:15px;box-shadow:inset 0 1px 2px rgba(15,23,42,.02)}
.pos-search-field>svg.icon{left:13px!important;width:18px!important;height:18px!important}
.scanner-inline-action{min-width:48px;min-height:50px;padding:0;border-radius:7px;background:var(--pos-blue);font-size:0}
.scanner-inline-action>svg.icon{width:19px!important;height:19px!important}
.scanner-inline-action span{display:none}
.alphabet-strip,.category-strip{gap:5px;margin:0 0 10px;padding:0 0 4px;scrollbar-width:none}
.alphabet-strip::-webkit-scrollbar,.category-strip::-webkit-scrollbar{display:none}
.alphabet-chip{min-width:40px;min-height:38px;padding:6px;border-color:#edf1f5;border-radius:6px;background:#fff;font-size:12px}
.category-chip{min-height:36px;padding:7px 14px;border-color:transparent;border-radius:18px;background:#fff;font-size:12px}
.alphabet-chip.active,.category-chip.active{border-color:var(--pos-blue);background:var(--pos-blue);color:#fff;box-shadow:0 2px 5px rgba(11,143,201,.16)}

.products.pro-products{
  min-height:0;
  flex:1 1 auto;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  grid-auto-rows:max-content;
  align-content:start;
  gap:14px;
  overflow-x:hidden;
  overflow-y:auto;
  padding:2px 4px 12px 0;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.pro-products .product{width:100%;max-width:220px;min-height:238px;grid-template-rows:128px minmax(64px,auto) 42px;border-color:#edf0f3;border-radius:8px;box-shadow:0 2px 7px rgba(28,45,61,.035)}
.pro-products .product:hover{border-color:#b9d7e6;box-shadow:0 5px 13px rgba(24,63,83,.08)}
.pro-products .product-icon{height:128px;background:#e7ebef;font-size:34px}
.pro-products .product-copy{padding:10px 12px 7px}
.pro-products .product-copy h4{font-size:13px;line-height:1.25}
.pro-products .product-copy p{margin:3px 0 0;font-size:10px}
.product-card-price{margin-top:4px;color:#4b5563;font-size:12px;font-weight:650;line-height:1.1}
.product-card-stock{top:7px;right:7px;padding:3px 6px;font-size:8px}
.product-add{min-height:38px;margin:0 12px 10px;border-radius:4px;background:#dceffa;color:#08709d;font-size:13px}
.product-add>svg.icon{width:15px!important;height:15px!important}
.product-pagination{min-height:46px;display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:14px;padding:9px 4px 0;color:#525f6c;font-size:11px}
.pagination-controls{display:flex;align-items:center;gap:5px}
.pagination-controls button{position:relative;width:32px;height:32px;overflow:hidden;border:1px solid #e2e7ed;border-radius:5px;background:#fff;color:#364554;cursor:pointer}
.pagination-controls button:disabled{opacity:.35;cursor:default}
.pagination-controls button>svg.icon{position:absolute!important;inset:50% auto auto 50%!important;width:14px!important;height:14px!important;margin:0!important;transform:translate(-50%,-50%)!important}
.pagination-controls b{min-width:88px;text-align:center;font-size:11px}

.cart-lines{padding:10px 24px 0;scrollbar-gutter:stable}
.cart-line{grid-template-columns:58px minmax(0,1fr) auto;grid-template-rows:auto auto;grid-template-areas:"image copy total" "image qty total";gap:5px 12px;min-height:98px;padding:14px 0;border-bottom:1px solid #edf0f3}
.cart-line-image{grid-area:image;width:58px;height:58px;border-radius:7px;background:#e7ebef;font-size:18px}
.cart-line-copy{grid-area:copy;align-self:end}
.cart-line-title{font-size:14px;font-weight:800;line-height:1.3}
.tier-link{margin:3px 0 0;font-size:9px;text-align:left}
.cart-line-actions{grid-area:qty;display:flex;align-self:start;justify-self:start;gap:10px}
.cart-line-actions button{width:32px;height:32px;border:0;border-radius:50%;background:#e8eef4;color:#3f5365}
.cart-line-actions strong{min-width:25px;font-size:15px}
.cart-line-total{grid-area:total;align-self:center;display:flex;align-items:baseline;gap:5px;text-align:right;white-space:nowrap}
.cart-line-total small{color:#9aa3ad;font-size:11px}
.cart-line-total strong{color:#087cae;font-size:16px}
.cart-empty{padding:70px 22px}
.cart-empty span{background:#edf4f8;color:#1686b5}

#proCartFooter{margin:0;padding:14px 24px 18px;border-top:1px solid #dce3ea;box-shadow:none}
.cart-customer{margin:0 0 9px}
.cart-customer .input{min-height:38px;border-radius:6px;font-size:12px}
.cart-customer .btn{min-width:38px;min-height:38px;border-radius:6px}
.cart-summary{gap:0;padding:0}
.summary-row{padding:4px 0;font-size:12px}
.cart-subtotal-row,.cart-discount-row{color:#66727f;font-size:11px}
.cart-discount-row .btn{min-height:28px;padding:4px 8px;font-size:10px}
.summary-row.total-row{align-items:center;margin:6px 0 0;padding:10px 0 3px;border-top:1px solid #edf0f3;font-size:15px}
.summary-row.total-row strong{color:#1f2933;font-size:29px}
.profit-row{color:#65717e;font-size:13px}
.profit-row b{color:#20a257;font-size:14px}
.profit-row.negative b{color:#c53b3b}
.cart-actions{gap:10px;margin-top:12px}
.cart-checkout{min-height:54px;justify-content:center;border-radius:7px;background:#22c367!important;font-size:16px;box-shadow:none}
.cart-secondary-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cart-secondary-actions .btn{min-height:48px;padding:8px 6px;border:0;border-radius:6px;color:#fff;font-size:12px;font-weight:800}
.cart-secondary-actions .scanner-cart-action{background:#169ed6;color:#fff}
.cart-secondary-actions .custom-cart-action{background:#6459e8;color:#fff}
.cart-secondary-actions .save-cart-action{background:#f0b510;color:#fff}

@media(max-width:1500px) and (min-width:901px){
  .pos-pro-layout{grid-template-columns:minmax(0,1fr) clamp(380px,28vw,420px)}
  .catalog-card{padding-inline:18px}
  .products.pro-products{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:11px}
  .pro-products .product{max-width:195px;min-height:220px;grid-template-rows:112px minmax(62px,auto) 40px}
  .pro-products .product-icon{height:112px}
}

@media(max-width:1180px) and (min-width:901px){
  body[data-section="cashier"] .topbar{padding-inline:14px}
  body[data-section="cashier"] .topbar .cloud-status,.topbar-user{display:none!important}
  body[data-section="cashier"] .topbar-actions{gap:5px}
  .pos-pro-layout{grid-template-columns:minmax(0,1fr) 380px}
  .alphabet-strip{display:flex}
  .alphabet-chip{min-width:36px}
  .cart-line{grid-template-columns:50px minmax(0,1fr) auto;gap-inline:9px}
  .cart-line-image{width:50px;height:50px}
  .cart-line-total{display:grid;gap:1px}
}

@media(max-width:900px){
  body[data-section="cashier"] .app{display:block}
  body[data-section="cashier"] .topbar{min-height:62px;height:auto;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;background:linear-gradient(90deg,var(--pos-blue-deep),var(--pos-blue))}
  body[data-section="cashier"] .topbar-user,body[data-section="cashier"] .topbar .cloud-status{display:none!important}
  body[data-section="cashier"] .topbar-lock{display:none}
  .catalog-card>.pos-pro-head{display:flex}
  .catalog-card,.cart-card{padding:12px}
  .catalog-card{overflow:visible;background:var(--pos-surface)}
  .pos-filters{margin-bottom:9px}
  .products.pro-products{overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-right:0}
  .pro-products .product{max-width:none;min-height:212px;grid-template-rows:98px minmax(66px,auto) 40px}
  .pro-products .product-icon{height:98px}
  .product-pagination{padding:12px 0 4px}
  .product-pagination>span{font-size:10px}
  .pagination-controls b{min-width:76px;font-size:10px}
  .pagination-controls button{width:30px;height:30px}
  .cart-card>.pos-pro-head{min-height:64px;margin:0 -12px;padding:12px 14px}
  .cart-lines{padding:4px 2px 0}
  .cart-line{grid-template-columns:52px minmax(0,1fr) auto;min-height:88px}
  .cart-line-image{width:52px;height:52px}
  #proCartFooter{margin:0 -2px;padding:12px 2px calc(12px + env(safe-area-inset-bottom))}
}

@media(max-width:520px){
  .alphabet-chip{min-width:34px;min-height:34px}
  .products.pro-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pro-products .product{min-height:202px;grid-template-rows:92px minmax(62px,auto) 40px}
  .pro-products .product-icon{height:92px}
  .product-pagination{align-items:flex-start;flex-direction:column;gap:7px}
  .pagination-controls{width:100%;justify-content:flex-end}
  .cart-line{grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"image copy" "image qty" "total total"}
  .cart-line-image{width:46px;height:46px}
  .cart-line-total{justify-self:end;display:flex}
  .cart-secondary-actions{gap:6px}
  .cart-secondary-actions .btn{min-height:46px;font-size:11px}
}

/* v34 open-order fix: remove inherited cart boxes and give order rows breathing room. */
.pos-pro-layout{grid-template-columns:minmax(0,1fr) clamp(420px,27vw,470px)}
.cart-card{
  border:0;
  border-left:1px solid #d7dee6;
  border-radius:0;
  box-shadow:none;
}
.cart-lines{padding:8px 22px 0}
.cart-line{
  min-height:102px;
  padding:17px 0;
  border:0;
  border-bottom:1px solid #edf0f3;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.cart-line:last-child{border-bottom:0}
.cart-line-copy,.cart-line-actions,.cart-line-total{min-width:0}

@media(max-width:1500px) and (min-width:901px){
  .pos-pro-layout{grid-template-columns:minmax(0,1fr) clamp(410px,30vw,440px)}
  .cart-lines{padding-inline:20px}
  .cart-line{grid-template-columns:54px minmax(0,1fr) auto;gap-inline:11px}
  .cart-line-image{width:54px;height:54px}
  .cart-line-total{display:grid;justify-items:end;gap:2px}
}

@media(max-width:900px){
  .cart-card{border:0}
  .cart-lines{padding:4px 2px 0}
  .cart-line{min-height:92px;padding:14px 0}
}

/* v35 typography and customer-select alignment. */
body[data-section="cashier"] .topbar h1,
body[data-section="cashier"] .topbar-actions .btn,
body[data-section="cashier"] #openScannerButton,
body[data-section="cashier"] .topbar-user{font-weight:600}
.alphabet-chip,.category-chip{font-weight:600}
.pro-products .product-copy h4{font-weight:600}
.product-card-price{font-weight:500}
.product-card-stock,.product-add{font-weight:600}
.product-pagination{font-weight:400}
.pagination-controls b{font-weight:500}
.cart-card>.pos-pro-head h2{font-weight:600}
.cart-card>.pos-pro-head small{font-weight:400}
.cart-line-image{font-weight:600}
.cart-line-title{font-weight:600}
.cart-line-actions strong{font-weight:600}
.cart-line-total strong{font-weight:600}
.cart-empty b{font-weight:600}
.summary-row b,.profit-row b{font-weight:600}
.summary-row.total-row{font-weight:500}
.summary-row.total-row strong{font-weight:700}
.cart-checkout{font-weight:600}
.cart-secondary-actions .btn{font-weight:600}

.cart-customer-select{position:relative;display:block;min-width:0}
.cart-customer-select .input{
  width:100%;
  padding-right:40px;
  appearance:none;
  -webkit-appearance:none;
  background-image:none;
  font-weight:500;
  line-height:1.2;
}
.cart-customer-select>svg.icon{
  position:absolute!important;
  z-index:2;
  top:50%!important;
  right:13px!important;
  bottom:auto!important;
  left:auto!important;
  width:16px!important;
  height:16px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#65717e;
  transform:translateY(-50%)!important;
  pointer-events:none;
}

/* v36 reference-matched Admin Dashboard. */
body[data-section="dashboard"]{background:#f2f5f9}
body[data-section="dashboard"] .app{grid-template-rows:56px minmax(0,1fr);background:#f2f5f9}
body[data-section="dashboard"] .topbar{
  min-height:56px;
  padding:8px 26px;
  background:#0c8fc7;
  box-shadow:0 2px 7px rgba(26,73,104,.18);
}
body[data-section="dashboard"] .topbar h1{font-size:18px;font-weight:600;letter-spacing:-.01em}
body[data-section="dashboard"] .topbar h1>svg.icon,
body[data-section="dashboard"] .topbar-subtitle,
body[data-section="dashboard"] .topbar .cloud-status,
body[data-section="dashboard"] .topbar-lock{display:none!important}
body[data-section="dashboard"] .topbar-user{max-width:150px;font-size:12px;font-weight:500}
body[data-section="dashboard"] .topbar-logout{width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border:0;background:transparent}

body[data-section="dashboard"] .container{padding:17px 26px 34px;background:#f2f5f9}
#dashboard.active{width:100%;max-width:1760px;display:block;margin:0 auto}
.dashboard-section-title{margin:0;color:#263442;font-size:16px;font-weight:600;line-height:1.3}
.dashboard-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.dashboard-kpi{
  min-width:0;
  height:70px;
  min-height:70px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border:1px solid #e7ebf0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 2px 6px rgba(35,54,72,.07);
}
.dashboard-kpi .kpi-icon{
  position:relative;
  grid-area:auto;
  grid-column:1;
  grid-row:1;
  width:42px;
  height:42px;
  overflow:hidden;
  border-radius:7px;
  background:#dff3fc!important;
  color:#0b92c7!important;
}
.dashboard-kpi .kpi-icon>svg.icon{position:absolute!important;inset:50% auto auto 50%!important;width:20px!important;height:20px!important;margin:0!important;transform:translate(-50%,-50%)!important}
.dashboard-kpi .kpi-copy{grid-column:2;grid-row:1;display:block;min-width:0}
.dashboard-kpi .kpi-label,.dashboard-kpi .kpi-value{display:block;min-width:0}
.dashboard-kpi .kpi-label{color:#687481;font-size:11px;font-weight:400;line-height:1.2}
.dashboard-kpi .kpi-value{overflow:hidden;margin-top:2px;color:#202c38;font-size:16px;font-weight:600;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}

.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(330px,1fr);gap:18px;margin-top:22px;align-items:start}
.workspace-launcher,.dashboard-recent{min-width:0;margin:0!important}
.workspace-launcher>.dashboard-section-title,.dashboard-recent>.dashboard-section-title{margin-bottom:11px}
.management-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:86px 86px repeat(3,82px);
  grid-template-areas:
    "pos orders"
    "pos products"
    "analytics inventory"
    "customers pending"
    "debtors settings";
  gap:11px;
}
.management-tile{
  position:relative;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  overflow:hidden;
  padding:10px 14px;
  border:0;
  border-radius:9px;
  color:#fff;
  text-align:center;
  box-shadow:0 4px 9px rgba(43,58,72,.12);
  cursor:pointer;
  transition:filter .15s ease,transform .15s ease;
}
.management-tile:hover{filter:brightness(.97);transform:translateY(-1px)}
.management-tile:focus-visible{outline:3px solid rgba(12,143,199,.25);outline-offset:2px}
.management-icon{position:relative;width:32px;height:32px;flex:0 0 32px;overflow:hidden;border-radius:0;background:transparent!important;color:#fff!important}
.management-icon>svg.icon{position:absolute!important;inset:50% auto auto 50%!important;width:27px!important;height:27px!important;margin:0!important;transform:translate(-50%,-50%)!important}
.management-copy{display:block;min-width:0}
.management-copy b{display:block;overflow:hidden;color:#fff;font-size:14px;font-weight:600;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.management-pos{grid-area:pos;background:#13a6da}
.management-orders{grid-area:orders;background:#13a6da}
.management-products{grid-area:products;background:#13a6da}
.management-analytics{grid-area:analytics;background:#18a750}
.management-inventory{grid-area:inventory;background:#11988f}
.management-customers{grid-area:customers;background:#9235e8}
.management-pending{grid-area:pending;background:#fb7115}
.management-debtors{grid-area:debtors;background:#34445a}
.management-settings{grid-area:settings;background:#737e8e}
.management-pos .management-icon{width:40px;height:40px;flex-basis:40px}
.management-pos .management-icon>svg.icon{width:32px!important;height:32px!important}
.management-pos .management-copy b{font-size:18px}
.management-badge{position:absolute;z-index:2;top:8px;right:8px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px;border:0;border-radius:999px;background:#e94c4c;color:#fff;font-size:10px;font-weight:700;line-height:1;box-shadow:0 2px 6px rgba(82,30,30,.2)}
.management-pending .management-badge{background:#fff;color:#dc5b08;box-shadow:0 2px 7px rgba(121,51,6,.2)}
.management-badge[hidden]{display:none!important}

.dashboard-recent{padding:0;background:transparent;border:0;box-shadow:none}
.recent-orders-list{max-height:min(540px,calc(100dvh - 250px));display:grid;align-content:start;gap:10px;overflow-y:auto;padding-right:2px;overscroll-behavior:contain;scrollbar-gutter:stable}
.recent-order-row{
  min-width:0;
  min-height:64px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:11px 13px;
  border:1px solid #e8edf2;
  border-radius:8px;
  background:#fff;
  color:#25313d;
  text-align:left;
  box-shadow:0 2px 6px rgba(39,57,73,.05);
  cursor:pointer;
}
.recent-order-row:hover{border-color:#cbdbe5;background:#fcfeff}
.recent-order-copy,.recent-order-value{display:block;min-width:0}
.recent-order-copy b,.recent-order-copy small,.recent-order-value strong,.recent-order-value small{display:block}
.recent-order-copy b{overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.recent-order-copy small,.recent-order-value small{margin-top:3px;color:#75808c;font-size:10px;font-weight:400}
.recent-order-value{text-align:right}
.recent-order-value strong{color:#087ead;font-size:14px;font-weight:600;white-space:nowrap}
.dashboard-order-empty{min-height:190px;display:grid;place-content:center;justify-items:center;padding:24px;border:1px dashed #ccd8e1;border-radius:9px;background:rgba(255,255,255,.56);color:#71808d;text-align:center}
.dashboard-order-empty>span{position:relative;width:42px;height:42px;overflow:hidden;margin-bottom:9px;border-radius:50%;background:#e1f2fa;color:#1689b7}
.dashboard-order-empty>span>svg.icon{position:absolute!important;inset:50% auto auto 50%!important;width:20px!important;height:20px!important;margin:0!important;transform:translate(-50%,-50%)!important}
.dashboard-order-empty b{color:#334250;font-size:13px;font-weight:600}
.dashboard-order-empty small{margin-top:4px;font-size:10px}

@media(max-width:1100px) and (min-width:901px){
  body[data-section="dashboard"] .container{padding-inline:18px}
  .dashboard-main-grid{grid-template-columns:minmax(0,1.72fr) minmax(300px,1fr);gap:14px}
  .management-grid{grid-template-rows:80px 80px repeat(3,76px);gap:9px}
  .management-copy b{font-size:13px}
  .recent-orders-list{gap:8px}
}

@media(max-width:900px){
  body[data-section="dashboard"] .app{display:block}
  body[data-section="dashboard"] .topbar{min-height:58px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px}
  body[data-section="dashboard"] .topbar h1{font-size:16px}
  body[data-section="dashboard"] .container{padding:15px 12px calc(92px + env(safe-area-inset-bottom))}
  #dashboard.active{display:block}
  .dashboard-main-grid{grid-template-columns:1fr;gap:18px;margin-top:18px}
  .dashboard-kpis{gap:8px}
  .dashboard-kpi{height:70px;min-height:70px;padding:9px 12px}
  .dashboard-recent{margin:0!important}
  .recent-orders-list{max-height:390px}
}

@media(max-width:640px){
  body[data-section="dashboard"] .topbar-user{max-width:82px;font-size:10px}
  body[data-section="dashboard"] .mobile-nav-button{display:none!important}
  .dashboard-section-title{font-size:15px}
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-kpi{grid-template-columns:34px minmax(0,1fr);gap:9px;height:66px;min-height:66px;padding:9px}
  .dashboard-kpi:nth-child(3){grid-column:1/-1}
  .dashboard-kpi .kpi-icon{width:32px;height:32px}
  .dashboard-kpi .kpi-icon>svg.icon{width:17px!important;height:17px!important}
  .dashboard-kpi .kpi-label{font-size:10px}
  .dashboard-kpi .kpi-value{font-size:15px}
  .management-grid{
    grid-template-rows:104px repeat(4,76px);
    grid-template-areas:
      "pos pos"
      "orders products"
      "analytics inventory"
      "customers pending"
      "debtors settings";
    gap:8px;
  }
  .management-tile{min-height:76px;padding:8px;gap:5px}
  .management-icon{width:28px;height:28px;flex-basis:28px}
  .management-icon>svg.icon{width:23px!important;height:23px!important}
  .management-copy b{font-size:12px}
  .management-pos .management-copy b{font-size:16px}
  .recent-order-row{min-height:62px;padding:10px 11px}
}

@media(max-width:390px){
  .dashboard-kpis{grid-template-columns:1fr}
  .dashboard-kpi:nth-child(3){grid-column:auto}
}

/* v41 human-first polish: one restrained visual system across every workspace. */
:root{
  --pos-blue:#0c8fc7;
  --pos-blue-dark:#087bab;
  --surface:#ffffff;
  --surface-muted:#f6f8fb;
  --page:#f2f5f9;
  --text:#26323d;
  --text-muted:#687583;
  --border:#dfe5eb;
  --soft-shadow:0 2px 7px rgba(31,47,61,.06);
}

html,body{background:var(--page);color:var(--text)}
body{font-size:14px;font-weight:400;line-height:1.45;text-rendering:optimizeLegibility}
button,input,select,textarea{font-weight:400}

/* A consistent operational header instead of page-by-page themes. */
body[data-section] .topbar{
  min-height:58px;
  padding:8px 24px;
  background:var(--pos-blue);
  color:#fff;
  border:0;
  box-shadow:0 2px 7px rgba(26,73,104,.16);
}
body[data-section] .topbar h1{color:#fff;font-size:18px;font-weight:600;letter-spacing:-.01em}
body[data-section] .topbar h1 .icon{width:19px;height:19px;stroke-width:2}
body[data-section] .topbar-subtitle{margin-top:1px!important;color:rgba(255,255,255,.8)!important;font-size:10.5px!important;font-weight:400}
body[data-section] .topbar-user{color:#fff;font-size:11px;font-weight:500}
body[data-section] .topbar .cloud-status{min-height:32px;padding:6px 9px;border-color:rgba(255,255,255,.25);background:rgba(0,0,0,.08);color:#fff!important;font-size:10px!important;font-weight:500}
body[data-section] .topbar .btn.ghost{border-color:rgba(255,255,255,.27);background:rgba(255,255,255,.1);color:#fff}
body[data-section] .topbar-back{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.12)}

/* Readable, calm typography. */
body .page-intro{align-items:flex-end;gap:18px;margin-bottom:16px}
body .page-intro h2{margin:0;color:var(--text);font-size:20px;font-weight:600;letter-spacing:-.015em}
body .page-intro p{max-width:680px;margin:4px 0 0;color:var(--text-muted);font-size:12px;font-weight:400;line-height:1.5}
body .eyebrow{display:none}
body .title{gap:12px;margin-bottom:12px}
body .title h2{color:var(--text);font-size:15px;font-weight:600;letter-spacing:0}
body .title-note{margin-top:3px;color:var(--text-muted);font-size:10.5px;font-weight:400}
body .label{margin:9px 0 6px;color:#536170;font-size:12px;font-weight:500}
body .muted{color:var(--text-muted)}

/* Common controls retain hierarchy without chunky styling. */
body .btn{min-height:40px;padding:9px 13px;border-radius:8px;font-size:13px;font-weight:600;line-height:1.2;box-shadow:none}
body .btn.small{min-height:36px;padding:7px 10px;font-size:12px}
body .btn.primary{background:#128e61;color:#fff}
body .btn.alt{background:#e7f5ef;color:#08704c}
body .btn.ghost{background:#eef2f6;color:#3f4c59}
body .btn.danger{background:#fff0f0;color:#b42323}
body .input{min-height:42px;padding:9px 11px;border:1px solid #d6dde5;border-radius:8px;background:#fff;color:var(--text);font-size:13px;font-weight:400;box-shadow:none}
body .input:focus{border-color:#49a8cf;box-shadow:0 0 0 3px rgba(12,143,199,.12)}

/* Module pages should feel like working software, not oversized templates. */
body:not([data-section="cashier"]):not([data-section="dashboard"]) .container{padding:24px 26px 40px;background:var(--page)}
#orders .card,#inventory .card,#customers .card,#finance .card,#reports .card,#staff .card,#settings .card,#sales .card{
  padding:16px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  box-shadow:var(--soft-shadow);
}
body .module-grid{gap:12px}
body .stat-card{min-height:94px;padding:15px 16px;border:1px solid var(--border);border-radius:9px;background:#fff;box-shadow:var(--soft-shadow)}
body .stat-card .stat-label,body .report-value-card .stat-label{margin:0;color:#667381;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none}
body .stat-card strong,body .report-value-card>strong{margin-top:7px;color:var(--text);font-size:22px;font-weight:600;letter-spacing:-.02em}
body .stat-card small,body .report-value-card>small{margin-top:6px;color:var(--text-muted);font-size:11.5px;font-weight:400}

body .segmented{min-height:42px;gap:3px;padding:4px;border:1px solid var(--border);border-radius:8px;background:#eef2f6}
body .segmented button{min-height:32px;padding:7px 12px;border-radius:6px;color:#566371;font-size:12px;font-weight:500}
body .segmented button.active{background:#fff;color:#08704c;font-weight:600;box-shadow:0 1px 3px rgba(31,47,61,.08)}
body .empty-panel{min-height:132px;display:grid;place-content:center;padding:24px;border:1px dashed #cad4dd;border-radius:8px;background:#fbfcfd;color:var(--text-muted)}
body .empty-panel b{margin:0 0 5px;color:var(--text);font-size:13px;font-weight:600}
body .empty-panel span{font-size:11.5px;font-weight:400}

/* Lists and tables carry the information at cashier-readable sizes. */
body .list-row{min-height:58px;padding:11px 2px;border-bottom:1px solid #e8edf1}
body .list-row-copy b,body .list-row-value b{color:var(--text);font-size:13px;font-weight:600}
body .list-row-copy span,body .list-row-value small{margin-top:3px;color:var(--text-muted);font-size:11px;font-weight:400}
body .mini-badge{padding:4px 7px;font-size:10px;font-weight:600}
body .table-wrap{border:1px solid var(--border);border-radius:8px}
body .table th{padding:10px 11px;background:#f5f7fa;color:#586675;font-size:10.5px;font-weight:600;letter-spacing:.035em}
body .table td{padding:10px 11px;color:#34414e;font-size:12px;font-weight:400}
body .stock-pill,body .badge{font-size:10px;font-weight:600}
body .inventory-product-image{width:40px;height:40px;flex-basis:40px;border-radius:7px}

/* The POS stays dense while avoiding toy-like oversized product cards. */
@media(min-width:901px){
  .products.pro-products{grid-template-columns:repeat(auto-fill,minmax(178px,192px));justify-content:start;align-content:start;gap:12px}
  .pro-products .product{width:100%;min-width:0;min-height:248px;grid-template-rows:126px minmax(73px,auto) 40px;border-radius:8px}
  .pro-products .product-icon{height:126px}
}
.pro-products .product{border:1px solid #dde4ea;background:#fff;box-shadow:0 1px 3px rgba(31,47,61,.05)}
.pro-products .product:hover{border-color:#8ec8df;box-shadow:0 3px 9px rgba(31,88,112,.1);transform:translateY(-1px)}
.pro-products .product-copy{padding:11px 11px 8px}
.pro-products .product-copy h4{font-size:13.5px;font-weight:600;line-height:1.3}
.pro-products .product-copy p{margin-top:3px;color:#6c7884;font-size:10.5px}
.product-card-price{margin-top:5px;color:#27323d;font-size:15px;font-weight:600}
.product-card-stock{top:8px;right:8px;font-size:9.5px;font-weight:600}
.product-add{min-height:40px;margin:0 10px 9px;border-radius:6px;background:#deeff8;color:#0b7099;font-size:12px;font-weight:600}
.alphabet-chip,.category-chip{font-size:11px;font-weight:500}
.alphabet-chip.active,.category-chip.active{font-weight:600}
.cart-line-title{font-size:13px;font-weight:600}
.cart-line-total small,.cart-line-meta{font-size:10.5px}
.cart-line-total strong{font-size:13px;font-weight:600}

/* Dashboard-only secondary tools keep every existing module discoverable. */
.management-quick-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:11px}
.management-quick-links button{min-width:0;min-height:54px;display:grid;grid-template-columns:28px minmax(0,1fr) 16px;align-items:center;gap:9px;padding:8px 12px;border:1px solid #dfe5eb;border-radius:8px;background:#fff;color:#34414e;text-align:left;box-shadow:0 1px 3px rgba(31,47,61,.04);cursor:pointer}
.management-quick-links button:hover{border-color:#b9d5e1;background:#fbfdfe}
.management-quick-links button>svg:first-child{width:20px;height:20px;color:#1788b6}
.management-quick-links button>svg:last-child{width:15px;height:15px;color:#8a96a2}
.management-quick-links span,.management-quick-links b,.management-quick-links small{display:block;min-width:0}
.management-quick-links b{font-size:12px;font-weight:600}
.management-quick-links small{margin-top:2px;color:#74808c;font-size:10px;font-weight:400}

/* Cleaner settings controls. */
.settings-switch{min-height:64px;padding:11px 13px;border:1px solid #dfe5eb;border-radius:8px;background:#fff}
.settings-switch b{font-size:13px;font-weight:600}
.settings-switch small{margin-top:3px;font-size:11px;font-weight:400}
.switch-input{
  position:relative;
  width:42px;
  height:24px;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:999px;
  background:#cbd4dc;
  cursor:pointer;
  transition:background .16s ease;
}
.switch-input:after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(25,38,49,.25);transition:transform .16s ease}
.switch-input:checked{background:#15976a}
.switch-input:checked:after{transform:translateX(18px)}

/* Native browser prompts are replaced by these consistent in-app dialogs. */
.quick-dialog{gap:16px}
.quick-dialog-message{margin:0;color:#536170;font-size:13px;line-height:1.55}
.quick-dialog-help{display:block;margin-top:6px;color:#788592;font-size:10.5px}
.quick-dialog-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:9px;margin-top:2px}
.quick-dialog-actions .btn{width:100%;min-height:44px}

/* Payment information must remain readable on a pale total panel. */
.pro-modal .checkout-total{
  padding:18px;
  border:1px solid #dbe7ed;
  border-radius:9px;
  background:#eef6fa;
  color:var(--text);
  box-shadow:none;
}
.pro-modal .checkout-total span{color:#687684;font-size:10.5px;font-weight:500;letter-spacing:.04em;opacity:1}
.pro-modal .checkout-total strong{margin-top:5px;color:#0786b8;font-size:34px;font-weight:700;letter-spacing:-.035em}
.pro-modal .checkout-total small{display:block;margin-top:4px;color:#667481;font-size:11px;font-weight:400}
.pro-modal .sheet{border-radius:12px}
.pro-modal .payment-option{min-height:64px;border-radius:8px;color:#52606e;font-size:12px;font-weight:500}
.pro-modal .payment-option.active{border-color:#55ad87;background:#eaf7f1;color:#08704c}
.pro-modal .change-display{border:1px solid #e3e9ee;border-radius:8px;background:#f8fafb}
.pro-modal .change-display b{font-size:19px;font-weight:600}

@media(max-width:900px){
  body[data-section] .topbar{min-height:58px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px}
  body[data-section] .topbar h1{font-size:16px}
  body:not([data-section="cashier"]):not([data-section="dashboard"]) .container{padding:16px 12px calc(92px + env(safe-area-inset-bottom))}
  body .page-intro{align-items:flex-start;flex-direction:column;gap:10px;margin-bottom:14px}
  body .page-intro h2{font-size:19px}
  body .page-intro p{font-size:12px}
  #customerStats .stat-card,#financeStats .stat-card,#reportStats .stat-card{grid-column:span 6}
  #customerStats .stat-card:nth-child(3),#financeStats .stat-card:nth-child(3){grid-column:1/-1}
  .management-quick-links{gap:8px;margin-top:8px}
  .management-quick-links button{min-height:58px;padding:8px 10px}
  .pro-modal .sheet{border-radius:16px 16px 0 0}
}

@media(max-width:640px){
  body .btn{min-height:44px}
  body .input{min-height:44px;font-size:16px}
  body .stat-card{min-height:88px;padding:13px 14px}
  body .stat-card strong,body .report-value-card>strong{font-size:20px}
  #customerStats .stat-card,#financeStats .stat-card,#reportStats .stat-card{grid-column:1/-1}
  .management-quick-links{grid-template-columns:1fr 1fr}
  .management-quick-links button{grid-template-columns:24px minmax(0,1fr);gap:8px}
  .management-quick-links button>svg:last-child{display:none}
  .management-quick-links small{display:none}
  .quick-dialog-actions{grid-template-columns:1fr}
  .quick-dialog-actions .btn.primary,.quick-dialog-actions .btn.danger{grid-row:1}
  .pro-modal .checkout-total strong{font-size:30px}
}

/* v45 mobile interaction repair: keep actions reachable and remove desktop CSS bleed. */
@media(max-width:900px){
  .modal.show,.modal.pro-modal.show{z-index:110}
  .modal.show{isolation:isolate}
  .sheet,.pro-modal .sheet{max-height:96dvh;padding-bottom:calc(22px + env(safe-area-inset-bottom))}

  .sidebar{
    z-index:80;
    overflow:auto;
    padding:14px;
    border:1px solid #d8e1e8;
    border-radius:14px;
    background:#fff;
    color:var(--text);
    box-shadow:0 18px 48px rgba(24,42,56,.22);
  }
  .sidebar .brand-panel{
    display:flex!important;
    gap:10px;
    padding:0 2px 12px;
    border-bottom:1px solid var(--border);
  }
  .sidebar .brand-mark{background:var(--pos-blue);color:#fff}
  .sidebar .brand-copy{display:block}
  .sidebar .brand-copy strong{color:var(--text);font-size:14px;font-weight:600}
  .sidebar .brand-copy span{display:block;color:var(--text-muted);font-size:9px;font-weight:400}
  .sidebar .sidebar-store{
    width:100%;
    flex:0 0 auto;
    margin:10px 0;
    padding:9px 11px;
    border:1px solid #dbe6ec;
    border-radius:8px;
    background:#f2f8fb;
  }
  .sidebar .sidebar-store span{color:#6d7b87;font-size:8px;font-weight:500}
  .sidebar .sidebar-store strong{margin-top:2px;color:#26323d;font-size:12px;font-weight:600}
  .sidebar .sidebar-store small{display:none}
  .sidebar .nav{flex:0 0 auto;overflow:visible!important;gap:6px!important}
  .sidebar .nav button{
    min-height:48px!important;
    border:1px solid #e1e7ec;
    background:#fff;
    color:#43515e;
    font-size:12px;
    font-weight:500;
  }
  .sidebar .nav button:hover{background:#f6f9fb;color:#26323d}
  .sidebar .nav button.active{border-color:#b8dbe9;background:#eaf6fb;color:#087bab}
  .sidebar .nav .ico,.sidebar .nav button.active .ico{background:#eef5f8;color:#1789b8}
  .sidebar .nav-copy{font-size:12px;font-weight:500}

  body[data-section] .topbar-user{display:none!important}
  body[data-section] .topbar-heading{max-width:calc(100vw - 138px)}
  body[data-section] .topbar h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .mobile-tabbar button.active{background:#eaf6fb;color:#087bab}
  .mobile-scan-launch{background:#0c8fc7;box-shadow:0 3px 9px rgba(12,143,199,.2)}
  .pos-mobile-tabs button.active{border-color:#0c8fc7;background:#eaf6fb;color:#087bab}
  .pos-mobile-tabs button.active .mobile-cart-count{background:#0c8fc7;color:#fff}
  .mobile-cart-bar{background:#173f52;box-shadow:0 10px 28px rgba(18,54,71,.24)}
  .mobile-cart-bar small,.mobile-cart-open{color:#d4e7ef}
  body[data-section="cashier"] .catalog-card .btn.primary{background:#0c8fc7;color:#fff}

  body .toast-pro{bottom:calc(86px + env(safe-area-inset-bottom));left:12px;right:12px;width:auto}
  body[data-section="cashier"] .toast-pro{bottom:calc(146px + env(safe-area-inset-bottom))}
}

@media(max-width:520px){
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-kpi:nth-child(3){grid-column:1/-1}

  #customerStats,#financeStats,#reportStats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #customerStats .stat-card,#financeStats .stat-card,#reportStats .stat-card{grid-column:auto;min-height:80px;padding:11px 12px}
  #customerStats .stat-card:nth-child(3),#financeStats .stat-card:nth-child(3){grid-column:1/-1}

  .products.pro-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .pro-products .product{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:96px minmax(68px,auto) 42px;
    min-height:214px;
  }
  .pro-products .product-icon{grid-column:1;grid-row:1;width:100%;height:96px}
  .pro-products .product-copy{grid-column:1;grid-row:2;min-width:0;padding:9px 9px 7px}
  .pro-products .product-add{grid-column:1;grid-row:3;width:auto;margin:0 8px 8px}
  .pro-products .product-copy h4{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
}

@media(max-width:340px){
  .products.pro-products{grid-template-columns:1fr}
  .pro-products .product{grid-template-rows:132px auto 44px}
  .pro-products .product-icon{height:132px}
}

/* v47 full-screen cashier lock: an access screen, not a floating dialog. */
body .lock-screen{
  display:block;
  overflow:auto;
  padding:0;
  background:#fff;
}
body .lock-card{
  width:100%;
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(340px,42%) minmax(0,1fr);
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  text-align:left;
}
.lock-brand-panel{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(28px,4vw,58px);
  background:#0c8fc7;
  color:#fff;
}
.lock-brand-panel .lock-brand{display:flex;align-items:center;gap:11px;margin:0}
.lock-brand-panel .brand-mark{width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(255,255,255,.35);border-radius:10px;background:rgba(255,255,255,.14);color:#fff}
.lock-brand-panel .lock-brand-copy strong{color:#fff;font-size:15px;font-weight:600}
.lock-brand-panel .lock-brand-copy>span{margin-top:2px;color:rgba(255,255,255,.75);font-size:9px;font-weight:500;letter-spacing:.08em}
.lock-brand-panel .lock-secure{margin-left:auto;border-color:rgba(255,255,255,.28);background:rgba(0,0,0,.08);color:#fff;font-weight:500}
.lock-brand-message{max-width:470px;margin:auto 0}
.lock-brand-kicker{display:block;margin-bottom:10px;color:rgba(255,255,255,.78);font-size:12px;font-weight:500}
.lock-brand-message h2{max-width:520px;margin:0;font-size:clamp(32px,4vw,54px);font-weight:600;line-height:1.05;letter-spacing:-.035em}
.lock-card .lock-brand-message p{max-width:500px;margin:18px 0 0;color:rgba(255,255,255,.8);font-size:14px;line-height:1.65}
.lock-brand-points{display:grid;gap:12px;margin-top:34px}
.lock-brand-points span{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.9);font-size:13px}
.lock-brand-points .icon{width:18px;height:18px}

.lock-access-panel{min-width:0;display:grid;place-items:center;padding:40px clamp(24px,6vw,88px);background:#fff}
.lock-access{width:min(420px,100%)}
.lock-access .lock-logo{width:54px;height:54px;display:grid;place-items:center;margin:0 0 24px;border-radius:12px;background:#eaf6fb;color:#087bab}
.lock-access .lock-logo .icon{width:25px;height:25px}
.lock-kicker{display:block;margin-bottom:8px;color:#087bab;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.lock-access h1{margin:0;color:#1f2d38;font-size:32px;font-weight:600;line-height:1.15;letter-spacing:-.025em}
.lock-card .lock-access>p{margin:9px 0 22px;color:#687583;font-size:13px;line-height:1.55}
.lock-access .lock-plan-status{justify-content:flex-start;margin:0 0 21px;padding:10px 11px;border:1px solid #d8e8ef;border-radius:8px;background:#f2f8fb;color:#315568;font-size:11px;font-weight:500}
.lock-access .lock-plan-status:before{background:#0c8fc7}
.lock-pin-label{display:block;margin:0 0 7px;color:#43515e;font-size:12px;font-weight:500}
.lock-access .passcode-input{min-height:54px;padding:11px 14px!important;border:1px solid #cdd8df;border-radius:8px;font-size:20px!important;font-weight:500;letter-spacing:.16em;text-align:center}
.lock-access .passcode-input::placeholder{color:#97a4ad;font-size:14px;letter-spacing:0}
.lock-access .passcode-input:focus{border-color:#0c8fc7;box-shadow:0 0 0 3px rgba(12,143,199,.14)}
.pin-dialer[hidden],.legacy-pin-mode[hidden]{display:none!important}
.pin-dialer{display:grid;justify-items:center}
.pin-dots{display:flex;align-items:center;justify-content:center;gap:13px;min-height:28px;margin:2px 0 22px}
.pin-dots span{width:15px;height:15px;border:2px solid #9fb3bf;border-radius:50%;background:#fff;transition:background .14s ease,border-color .14s ease,transform .14s ease}
.pin-dots span.filled{border-color:#0c8fc7;background:#0c8fc7;transform:scale(1.08)}
.pin-dots.error{animation:pin-dots-shake .38s ease}
@keyframes pin-dots-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
.pin-keypad{display:grid;grid-template-columns:repeat(3,64px);justify-content:center;gap:12px 22px}
.pin-key{width:64px;height:64px;display:grid;place-items:center;padding:0;border:1px solid #d6e2e8;border-radius:50%;background:#fff;color:#223641;font-size:22px;font-weight:600;cursor:pointer;box-shadow:0 4px 13px rgba(32,73,91,.07);transition:transform .12s ease,background .12s ease,border-color .12s ease}
.pin-key:hover{border-color:#85c6df;background:#f2f9fc}
.pin-key:active{transform:scale(.94);background:#e6f4fa}
.pin-key:disabled{cursor:wait;opacity:.52}
.pin-key-action{color:#607783;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.pin-key-action .icon{width:21px;height:21px}
.pin-dialer-status{min-height:18px;margin-top:15px;color:#73838d;font-size:10px;text-align:center}
.pin-legacy-toggle{margin-top:6px;padding:7px;border:0;background:transparent;color:#087bab;font-size:10px;font-weight:600;cursor:pointer}
.pin-legacy-toggle:hover{text-decoration:underline}
.legacy-pin-mode{display:grid;gap:8px}
.legacy-pin-mode .pin-legacy-toggle{justify-self:center;margin-top:0}
.lock-access #legacyUnlockButton{min-height:52px;margin-top:2px;border-radius:8px;background:#0c8fc7;color:#fff;font-size:14px;font-weight:600}
.lock-access #legacyUnlockButton:hover{background:#087bab}
.lock-access .lock-error{min-height:20px;margin-top:8px;text-align:left}
.lock-access .lock-trust{display:flex;justify-content:space-between;gap:12px;margin:19px 0 0;padding-top:17px;border-top:1px solid #e5eaee}
.lock-access .lock-trust span{gap:5px;color:#72808b;font-size:9.5px;font-weight:400}
.lock-access .lock-trust .icon{color:#0c8fc7}

@media(max-width:700px){
  body .lock-card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .lock-brand-panel{display:block;padding:calc(14px + env(safe-area-inset-top)) 20px 14px}
  .lock-brand-panel .lock-brand{min-height:44px}
  .lock-brand-panel .brand-mark{width:38px;height:38px;flex-basis:38px;border-radius:9px}
  .lock-brand-panel .lock-secure{padding:6px 8px;font-size:9px}
  .lock-brand-message{display:none}
  .lock-access-panel{display:flex;align-items:center;justify-content:center;min-height:calc(100dvh - 86px - env(safe-area-inset-top));padding:28px 22px calc(24px + env(safe-area-inset-bottom))}
  .lock-access{width:100%;max-width:430px}
  .lock-access .lock-logo{width:50px;height:50px;margin-bottom:20px}
  .lock-access h1{font-size:28px}
  .lock-card .lock-access>p{margin-bottom:20px;font-size:13px}
  .lock-access .lock-plan-status{margin-bottom:19px}
  .lock-access .passcode-input{min-height:56px;font-size:22px!important}
  .lock-access #legacyUnlockButton{min-height:54px}
}

@media(max-width:380px){
  .lock-brand-panel{padding-inline:16px}
  .lock-brand-panel .lock-brand-copy strong{font-size:14px}
  .lock-brand-panel .lock-secure{font-size:0}
  .lock-brand-panel .lock-secure .icon{width:15px;height:15px}
  .lock-access-panel{padding-inline:18px}
  .pin-keypad{grid-template-columns:repeat(3,58px);gap:10px 20px}
  .pin-key{width:58px;height:58px;font-size:20px}
  .lock-access .lock-trust{gap:7px}
  .lock-access .lock-trust span{font-size:8.5px}
}

@media(max-width:700px) and (max-height:760px){
  .lock-access-panel{padding-top:18px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .lock-access .lock-logo{display:none}
  .lock-access h1{font-size:24px}
  .lock-card .lock-access>p{margin:5px 0 10px}
  .lock-access .lock-plan-status{margin-bottom:13px;padding-block:7px}
  .pin-dots{margin-bottom:13px}
  .pin-keypad{grid-template-columns:repeat(3,56px);gap:8px 20px}
  .pin-key{width:56px;height:56px;font-size:19px}
  .pin-dialer-status{margin-top:9px}
  .lock-access .lock-trust{margin-top:10px;padding-top:10px}
}

/* v48 mobile POS cleanup: fewer visual layers, faster scan and cart access. */
@media(max-width:900px){
  body[data-section="cashier"]{background:#f3f6f8}
  body[data-section="cashier"] .container{background:#f3f6f8}
  body[data-section="cashier"] .mobile-scan-launch{display:none!important}

  body[data-section="cashier"] .pos-mobile-tabs{
    position:sticky;
    top:62px;
    z-index:30;
    min-height:54px;
    gap:4px;
    padding:6px 10px;
    border-bottom:1px solid #dfe6eb;
    background:rgba(255,255,255,.97);
    box-shadow:0 2px 7px rgba(36,54,68,.045);
    backdrop-filter:blur(10px);
  }
  body[data-section="cashier"] .pos-mobile-tabs button{
    min-height:42px;
    padding:0 9px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#667480;
    font-size:12px;
    font-weight:500;
  }
  body[data-section="cashier"] .pos-mobile-tabs button.active{
    background:#e8f5fb;
    color:#087cab;
  }
  body[data-section="cashier"] .pos-mobile-tabs button>svg.icon{width:17px!important;height:17px!important}
  body[data-section="cashier"] .mobile-cart-count{min-width:20px;height:20px;font-weight:600}

  body[data-section="cashier"] .catalog-card{
    padding:10px 10px calc(18px + env(safe-area-inset-bottom));
    background:#f3f6f8;
  }
  body[data-section="cashier"] .catalog-card>.pos-pro-head{
    min-height:42px;
    align-items:center;
    margin:0;
    padding:0 0 8px;
    border:0;
  }
  body[data-section="cashier"] .catalog-card>.pos-pro-head h2{font-size:17px;font-weight:600;letter-spacing:-.01em}
  body[data-section="cashier"] .catalog-card>.pos-pro-head small{display:none}
  body[data-section="cashier"] .catalog-card>.pos-pro-head .btn{
    min-height:40px;
    padding:7px 10px;
    border:1px solid #d8e4ea;
    border-radius:7px;
    background:#fff;
    color:#187ca5;
    font-size:11px;
    font-weight:600;
  }

  body[data-section="cashier"] .pos-filters{
    grid-template-columns:minmax(0,1fr) 84px;
    gap:8px;
    margin:0 0 9px;
  }
  body[data-section="cashier"] .pos-search-field .input{
    min-height:46px;
    padding-left:40px;
    border-color:#d4dde4;
    border-radius:8px;
    background:#fff;
    font-size:16px;
    box-shadow:none;
  }
  body[data-section="cashier"] .scanner-inline-action{
    min-width:84px;
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 11px;
    border-radius:8px;
    background:#0c8fc7;
    color:#fff;
    font-size:12px;
    font-weight:600;
    box-shadow:none;
  }
  body[data-section="cashier"] .scanner-inline-action span{display:inline}
  body[data-section="cashier"] .scanner-inline-action>svg.icon{width:18px!important;height:18px!important}

  body[data-section="cashier"] .alphabet-strip,
  body[data-section="cashier"] .category-strip{
    display:flex;
    max-height:none;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    margin:0 0 9px;
    padding:0 0 3px;
    scroll-snap-type:x proximity;
  }
  body[data-section="cashier"] .alphabet-chip,
  body[data-section="cashier"] .category-chip{
    flex:0 0 auto;
    scroll-snap-align:start;
    border:1px solid #dfe6eb;
    background:#fff;
    color:#596775;
    font-weight:500;
  }
  body[data-section="cashier"] .alphabet-chip.active,
  body[data-section="cashier"] .category-chip.active{
    border-color:#0c8fc7;
    background:#0c8fc7;
    color:#fff;
    box-shadow:none;
  }
  body[data-section="cashier"] .category-chip{min-height:36px;padding:7px 13px;border-radius:18px;font-size:11px}

  body[data-section="cashier"] .products.pro-products{
    grid-template-columns:repeat(auto-fill,minmax(154px,1fr));
    gap:9px;
  }
  body[data-section="cashier"] .pro-products .product{
    max-width:none;
    min-height:202px;
    grid-template-rows:90px minmax(60px,auto) 42px;
    overflow:hidden;
    border:1px solid #e1e7ec;
    border-radius:9px;
    background:#fff;
    box-shadow:none;
  }
  body[data-section="cashier"] .pro-products .product-icon{height:90px;border-bottom:1px solid #edf1f4;background:#e9eef2}
  body[data-section="cashier"] .pro-products .product-copy{padding:8px 9px 6px}
  body[data-section="cashier"] .pro-products .product-copy h4{font-size:13px;font-weight:600;line-height:1.25}
  body[data-section="cashier"] .pro-products .product-copy p{margin-top:2px;font-size:9px;line-height:1.25}
  body[data-section="cashier"] .product-card-price{margin-top:4px;font-size:14px;font-weight:600}
  body[data-section="cashier"] .product-card-stock{top:6px;right:6px;font-size:8px;font-weight:600}
  body[data-section="cashier"] .product-add{
    min-height:40px;
    margin:0 7px 7px;
    border-radius:6px;
    background:#e7f4fa;
    color:#087cab;
    font-size:12px;
    font-weight:600;
  }
  body[data-section="cashier"] .product-pagination{padding:11px 0 2px}

  body[data-section="cashier"] .mobile-cart-bar{
    left:8px;
    right:8px;
    bottom:calc(76px + env(safe-area-inset-bottom));
    min-height:54px;
    gap:9px;
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    background:#105d7c;
    box-shadow:0 8px 22px rgba(25,63,80,.22);
  }
  body[data-section="cashier"] .mobile-cart-bar b{font-size:11px;font-weight:600}
  body[data-section="cashier"] .mobile-cart-bar small{font-size:8px}
  body[data-section="cashier"] .mobile-cart-bar>strong{font-size:15px;font-weight:700}
  body[data-section="cashier"] .mobile-cart-open{font-size:10px;font-weight:600}
  body[data-section="cashier"] #cashier:has(.mobile-cart-bar.has-items) .catalog-card{padding-bottom:86px}

  body[data-section="cashier"] #cashier[data-mobile-view="order"] .pos-mobile-tabs{
    position:static;
    height:54px;
    padding-top:6px;
  }
  body[data-section="cashier"] #cashier[data-mobile-view="order"] .pos-pro-layout{height:calc(100% - 54px)}
  body[data-section="cashier"] .cart-card{padding:0;background:#fff}
  body[data-section="cashier"] .cart-card>.pos-pro-head{
    min-height:58px;
    margin:0;
    padding:10px 12px;
    border-bottom:1px solid #e3e9ed;
  }
  body[data-section="cashier"] .cart-card>.pos-pro-head h2{font-size:17px;font-weight:600}
  body[data-section="cashier"] .cart-card>.pos-pro-head small{font-size:9px}
  body[data-section="cashier"] .cart-card>.pos-pro-head .btn{min-height:36px;padding:6px 9px;font-size:10px;font-weight:500}
  body[data-section="cashier"] .cart-lines{padding:0 12px}
  body[data-section="cashier"] .cart-line{min-height:82px;padding:11px 0;border-color:#edf1f3}
  body[data-section="cashier"] .cart-line-title{font-size:13px;font-weight:600}
  body[data-section="cashier"] .cart-line-actions{gap:8px}
  body[data-section="cashier"] .cart-line-actions button{width:40px;height:40px}
  body[data-section="cashier"] .cart-line-actions strong{font-weight:600}
  body[data-section="cashier"] .cart-empty{padding:54px 18px}
  body[data-section="cashier"] .cart-empty span{width:48px;height:48px}
  body[data-section="cashier"] .cart-empty b{font-size:14px;font-weight:600}
  body[data-section="cashier"] .cart-empty p{font-size:11px}
  body[data-section="cashier"] #proCartFooter{
    margin:0;
    padding:10px 12px calc(11px + env(safe-area-inset-bottom));
    border-top:1px solid #dfe6eb;
    background:#fff;
    box-shadow:0 -5px 16px rgba(30,47,60,.045);
  }
  body[data-section="cashier"] .cart-customer{margin:0 0 8px}
  body[data-section="cashier"] .cart-customer .input{min-height:42px;font-size:12px}
  body[data-section="cashier"] .cart-customer .btn{min-width:42px;min-height:42px}
  body[data-section="cashier"] .summary-row{padding:3px 0;font-size:11px}
  body[data-section="cashier"] .summary-row.total-row{margin-top:4px;padding:8px 0 2px;font-size:14px}
  body[data-section="cashier"] .summary-row.total-row strong{font-size:24px;font-weight:700}
  body[data-section="cashier"] .profit-row{font-size:11px}
  body[data-section="cashier"] .cart-actions{gap:8px;margin-top:9px}
  body[data-section="cashier"] .cart-checkout{min-height:50px;font-size:14px;font-weight:600}
  body[data-section="cashier"] .cart-secondary-actions{gap:6px}
  body[data-section="cashier"] .cart-secondary-actions .btn{min-height:44px;font-size:11px;font-weight:600}
  body[data-section="cashier"]:has(#cashier[data-mobile-view="order"]) .toast-pro{
    top:122px;
    bottom:auto;
  }
}

@media(max-width:520px){
  body[data-section="cashier"] .alphabet-strip{display:none}
  body[data-section="cashier"] .catalog-card{padding-inline:9px}
  body[data-section="cashier"] .products.pro-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body[data-section="cashier"] .pro-products .product{
    min-height:194px;
    grid-template-rows:86px minmax(57px,auto) 42px;
  }
  body[data-section="cashier"] .pro-products .product-icon{height:86px}
  body[data-section="cashier"] .pro-products .product-copy{padding:7px 8px 5px}
  body[data-section="cashier"] .product-add{margin:0 6px 6px}
  body[data-section="cashier"] .product-pagination{align-items:center;flex-direction:row;gap:8px}
  body[data-section="cashier"] .product-pagination>span{font-size:9px;white-space:nowrap}
  body[data-section="cashier"] .pagination-controls{width:auto;margin-left:auto}
  body[data-section="cashier"] .pagination-controls b{min-width:68px}
  body[data-section="cashier"] .pagination-controls button{width:29px;height:29px}
  body[data-section="cashier"] .cart-line{grid-template-columns:44px minmax(0,1fr) 116px;grid-template-areas:"image copy qty" "image total qty";gap:4px 8px}
  body[data-section="cashier"] .cart-line-image{width:44px;height:44px}
  body[data-section="cashier"] .cart-line-total{justify-self:start;text-align:left}
}

@media(max-width:350px){
  body[data-section="cashier"] .pos-filters{grid-template-columns:minmax(0,1fr) 50px}
  body[data-section="cashier"] .scanner-inline-action{min-width:50px;padding:0;font-size:0}
  body[data-section="cashier"] .scanner-inline-action span{display:none}
  body[data-section="cashier"] .products.pro-products{grid-template-columns:1fr}
  body[data-section="cashier"] .pro-products .product{grid-template-rows:126px auto 42px}
  body[data-section="cashier"] .pro-products .product-icon{height:126px}
}

/* v50 iPhone checkout, More-menu containment, full photos, and add-to-cart motion. */
.cart-flyer{
  position:fixed;
  z-index:160;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:2px solid #fff;
  border-radius:12px;
  background:#e8eef2;
  color:#087cab;
  box-shadow:0 12px 28px rgba(20,52,68,.28);
  pointer-events:none;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:center;
  opacity:1;
}
.cart-flyer img{width:100%;height:100%;display:block;object-fit:cover}
.cart-flyer.is-flying{animation:fly-product-to-cart .62s cubic-bezier(.22,.78,.26,1) forwards}
.cart-target-pop{animation:cart-target-pop .32s ease-out}
@keyframes fly-product-to-cart{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0);opacity:1}
  58%{transform:translate3d(var(--fly-mid-x),var(--fly-mid-y),0) scale(.62) rotate(-5deg);opacity:.92}
  100%{transform:translate3d(var(--fly-end-x),var(--fly-end-y),0) scale(.18) rotate(8deg);opacity:.08}
}
@keyframes cart-target-pop{0%,100%{transform:scale(1)}48%{transform:scale(1.045)}}

@media(max-width:900px){
  body:not(.mobile-nav-open) .sidebar{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none;
    transform:translate3d(0,calc(100% + 160px + env(safe-area-inset-bottom)),0);
    transition:transform .24s ease,opacity .16s ease,visibility 0s linear .24s;
  }
  body.mobile-nav-open .sidebar{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto;
    transform:translate3d(0,0,0);
    transition-delay:0s;
  }

  body[data-section="cashier"] .pro-products .product{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(57px,auto) 42px;
    column-gap:0;
    row-gap:0;
  }
  body[data-section="cashier"] .pro-products .product-icon{
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:3/2;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:#e8edf1;
  }
  body[data-section="cashier"] .pro-products .product-icon img{
    position:absolute;
    inset:-1px;
    width:calc(100% + 2px);
    height:calc(100% + 2px);
    max-width:none;
    display:block;
    object-fit:cover;
    object-position:center;
  }
}

/* v56: show add-to-order confirmation inside the reserved mobile cart bar. */
@media(max-width:900px){
  body[data-section="cashier"] .mobile-cart-copy{
    min-width:0;
    overflow:hidden;
  }
  body[data-section="cashier"] .mobile-cart-default{
    display:block;
  }
  body[data-section="cashier"] .mobile-cart-feedback{
    display:none;
    overflow:hidden;
    color:#fff;
    font-size:11px;
    font-weight:650;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body[data-section="cashier"] .mobile-cart-bar.cart-feedback .mobile-cart-default{
    display:none;
  }
  body[data-section="cashier"] .mobile-cart-bar.cart-feedback .mobile-cart-feedback{
    display:block;
  }
}

@media(max-width:640px){
  body .modal.pro-modal.payment-modal{align-items:stretch;padding:0;background:rgba(17,31,42,.64)}
  body .pro-modal.payment-modal .sheet{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:calc(12px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom));
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  body .pro-modal.payment-modal .sheet>.title{
    flex:0 0 auto;
    min-height:44px;
    margin:0 0 10px;
    padding:0;
  }
  body .pro-modal.payment-modal .sheet>.title h2{font-size:18px;font-weight:600}
  body .pro-modal.payment-modal .sheet>.title .btn{width:40px;min-width:40px;min-height:40px;padding:0}
  body .pro-modal.payment-modal #proModalBody{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 1px}
  body .pro-modal.payment-modal .complete-payment-form{min-height:100%;align-content:start;gap:12px;padding-bottom:2px}
  body .pro-modal.payment-modal .checkout-total{padding:12px 14px;border-radius:8px}
  body .pro-modal.payment-modal .checkout-total strong{margin-top:2px;font-size:29px}
  body .pro-modal.payment-modal .checkout-total small{margin-top:2px;font-size:10px}
  body .pro-modal.payment-modal .label{margin:0 0 7px;font-size:11px}
  body .pro-modal.payment-modal .payment-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  body .pro-modal.payment-modal .payment-option{
    min-width:0;
    min-height:58px;
    gap:4px;
    padding:7px 4px;
    border-radius:8px;
    font-size:11px;
  }
  body .pro-modal.payment-modal .payment-option .icon{width:18px;height:18px}
  body .pro-modal.payment-modal #paymentFields{display:grid;gap:7px}
  body .pro-modal.payment-modal #paymentFields>.input{min-height:44px}
  body .pro-modal.payment-modal .change-display{padding:9px 11px}
  body .pro-modal.payment-modal .change-display b{font-size:18px}
  body .pro-modal.payment-modal #confirmCheckoutButton{
    position:sticky;
    bottom:0;
    min-height:50px;
    margin-top:auto;
    border-radius:8px;
    background:#20bd65;
    font-size:14px;
    font-weight:600;
    box-shadow:0 -8px 14px #fff,0 5px 12px rgba(32,189,101,.18);
  }
}

@media(max-width:350px){
  body[data-section="cashier"] .pro-products .product-icon{aspect-ratio:16/9}
  body .pro-modal.payment-modal .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(prefers-reduced-motion:reduce){
  .cart-flyer{display:none!important}
  .cart-target-pop{animation:none!important}
}

/* v53 inventory cleanup: compact primary actions and readable mobile stock cards. */
.inventory-tools-toggle{display:none}
#inventory .inventory-actions{flex-wrap:nowrap}
#inventory .inventory-secondary-action{order:1}
#inventory .inventory-scan-action{order:2}
#inventory .inventory-add-action{order:3}
.inventory-searchbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,176px);gap:8px}
.inventory-search-field{position:relative;display:block;min-width:0}
.inventory-search-field>svg.icon{
  position:absolute!important;
  z-index:2;
  top:50%!important;
  left:12px!important;
  width:17px!important;
  height:17px!important;
  margin:0!important;
  color:#7b8792;
  transform:translateY(-50%)!important;
  pointer-events:none;
}
.inventory-search-field .input{padding-left:38px}

@media(max-width:640px){
  body[data-section="inventory"] .container{
    padding:0 0 calc(86px + env(safe-area-inset-bottom));
    background:#f3f6f8;
  }
  #inventory>.page-intro{display:none}
  #inventory>.inventory-catalog-card{
    padding:12px 10px 18px!important;
    border:0!important;
    border-radius:0!important;
    background:#f3f6f8!important;
    box-shadow:none!important;
  }
  #inventory .inventory-catalog-head{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    justify-content:stretch;
    gap:10px;
    margin:0 0 10px;
    padding:0;
  }
  #inventory .inventory-catalog-head h2{font-size:17px;font-weight:600}
  #inventory .inventory-catalog-head .title-note{margin-top:2px;font-size:10px}
  #inventory .inventory-catalog-head>*{width:100%;min-width:0}
  #inventory .inventory-actions{
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px!important;
  }
  #inventory .inventory-actions .btn{width:100%;min-width:0;min-height:42px;padding:7px 8px;border-radius:8px;font-size:11px;font-weight:600}
  #inventory .inventory-primary-action{order:1}
  #inventory .inventory-tools-toggle{
    grid-column:1/-1;
    order:2;
    display:flex;
    background:#fff;
    color:#53616e;
    border:1px solid #dce4e9;
  }
  #inventory .inventory-tools-toggle>svg:last-child{margin-left:auto;transition:transform .18s ease}
  #inventory .inventory-actions.tools-open .inventory-tools-toggle>svg:last-child{transform:rotate(180deg)}
  #inventory .inventory-secondary-action{display:none;order:3}
  #inventory .inventory-actions.tools-open .inventory-secondary-action{display:flex}

  #inventory .inventory-searchbar{
    grid-template-columns:minmax(0,1fr) 112px;
    gap:7px;
    margin:0 0 10px;
  }
  #inventory .inventory-search-field .input,#inventory .inventory-filter{min-height:44px;font-size:16px}
  #inventory .inventory-filter{width:112px;max-width:none;padding-inline:9px;font-size:12px}

  #inventory .table-wrap{margin:0}
  #inventory .table tbody{gap:8px}
  #inventory .table tr{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 10px;
    padding:12px;
    border-color:#dfe6eb;
    border-radius:10px;
    box-shadow:0 1px 3px rgba(31,47,61,.035);
  }
  #inventory .table td{min-width:0;padding:6px 0;font-size:11.5px}
  #inventory .table td:before{font-size:8px;font-weight:600;letter-spacing:.045em}
  #inventory .table td[data-label="Product"]{
    grid-column:1/3;
    grid-row:1;
    padding:0 0 8px;
  }
  #inventory .table td[data-label="Product"]:before,
  #inventory .table td[data-label="Status"]:before,
  #inventory .table td[data-label="Actions"]:before{display:none}
  #inventory .table td[data-label="Status"]{
    grid-column:3;
    grid-row:1;
    align-self:start;
    justify-self:end;
    display:block;
    padding:2px 0 0;
    text-align:right;
  }
  #inventory .table td[data-label="Barcode"]{grid-column:1/3;grid-row:2;overflow-wrap:anywhere}
  #inventory .table td[data-label="Category"]{grid-column:3;grid-row:2}
  #inventory .table td[data-label="Cost"]{grid-column:1;grid-row:3}
  #inventory .table td[data-label="Price"]{grid-column:2;grid-row:3}
  #inventory .table td[data-label="Stock"]{grid-column:3;grid-row:3}
  #inventory .table td[data-label="Actions"]{
    grid-column:1/-1;
    grid-row:4;
    padding:10px 0 0;
    border-top:1px solid #edf1f3!important;
  }
  #inventory .inventory-product{gap:9px}
  #inventory .inventory-product-image{width:48px;height:48px;flex-basis:48px;border-radius:8px}
  #inventory .inventory-product>span:last-child{min-width:0}
  #inventory .inventory-product b{display:block;overflow:hidden;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
  #inventory .inventory-product .muted{font-size:9.5px}
  #inventory .badge{padding:4px 7px;font-size:8.5px;white-space:nowrap}
  #inventory .action-menu{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
  }
  #inventory .action-menu .btn{min-width:0;min-height:40px;padding:6px 3px;font-size:10px;font-weight:600}
}

@media(max-width:350px){
  #inventory .inventory-searchbar{grid-template-columns:minmax(0,1fr) 100px}
  #inventory .inventory-filter{width:100px}
  #inventory .action-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v55 cross-device mobile scroll repair. */
@media(max-width:900px){
  html{
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
  }
  body{
    height:auto;
    min-height:100%;
  }
  body:not(.locked):not(.subscription-open):not(.mobile-nav-open){
    overflow-y:auto;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body[data-section="cashier"] .app{
    height:auto;
    min-height:100vh;
    min-height:100svh;
  }
  body[data-section="cashier"] .container{
    height:auto;
    min-height:0;
    overflow:visible;
  }
  body[data-section="cashier"] #cashier.active:not([data-mobile-view="order"]){
    height:auto;
    max-height:none;
    min-height:calc(100vh - 134px);
    min-height:calc(100svh - 134px);
    overflow:visible;
  }
  body[data-section="cashier"] #cashier:not([data-mobile-view="order"]) .pos-pro-layout,
  body[data-section="cashier"] #cashier:not([data-mobile-view="order"]) .catalog-card,
  body[data-section="cashier"] #cashier:not([data-mobile-view="order"]) .products.pro-products{
    height:auto;
    max-height:none;
    overflow:visible;
    overscroll-behavior:auto;
  }
  .auth-screen,
  .subscription-gate,
  body .lock-screen,
  .modal.show .sheet{
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
}