/* Auto Smart Carwash v2.8.1 — unified responsive design system
   This stylesheet intentionally loads last and normalises the legacy page-level CSS.
   Breakpoints follow the usable application canvas, not individual module assumptions. */

:root{
  --sidebar-width:252px;
  --topbar-height:72px;
  --radius:16px;
  --radius-sm:12px;
  --ui-pad:20px;
  --ui-gap:16px;
  --ui-font:14px;
  --ui-small:12px;
  --ui-label:13px;
  --ui-title:26px;
  --shadow-sm:0 5px 18px rgba(21,42,32,.055);
  --shadow:0 14px 38px rgba(21,42,32,.075);
}

html{font-size:16px}
body{
  font-family:"Segoe UI",Roboto,Arial,system-ui,-apple-system,sans-serif;
  font-size:var(--ui-font);
  line-height:1.5;
  background:#f5f7f6;
}

/* ---------- shell ---------- */
.sidebar{
  width:var(--sidebar-width);
  padding:18px 14px 14px;
  overflow-y:auto;
  overflow-x:hidden;
}
.brand{margin-bottom:18px;padding:0 8px;gap:11px}
.brand-mark{width:40px;height:40px;border-radius:12px}
.brand-copy strong{font-family:inherit;font-size:1.22rem;font-weight:800;letter-spacing:-.035em}
.brand-copy small{font-size:.72rem;letter-spacing:.12em;margin-top:5px}
.workspace-chip{margin:0 2px 18px;padding:10px 11px;border-radius:12px}
.workspace-chip small,.nav-caption{font-size:.72rem}
.workspace-chip strong{font-size:.82rem}
.workspace-plan,.nav-pill{font-size:.7rem;line-height:1.1}
.side-nav{gap:4px}
.nav-caption{padding:0 11px;margin:9px 0 4px;letter-spacing:.11em}
.side-link{height:43px;border-radius:11px;padding:0 10px;gap:10px;font-size:.82rem}
.side-icon{width:28px;height:28px;border-radius:8px}
.system-card{padding:11px;margin:10px 2px 12px}
.system-card-head{font-size:.7rem}
.system-row{font-size:.74rem}
.system-row strong{font-size:.7rem}
.profile-card{min-height:55px;border-radius:13px}
.profile-copy strong{font-size:.8rem}.profile-copy small{font-size:.7rem}
.app-main{margin-left:var(--sidebar-width);min-width:0}
.topbar{height:var(--topbar-height);padding:0 28px}
.topbar h1{font-family:inherit;font-size:1.12rem;font-weight:800;letter-spacing:-.025em}
.eyebrow{font-size:.7rem;letter-spacing:.09em}
.live-clock{height:40px}.live-clock span{font-family:inherit;font-size:.82rem;font-weight:800}.live-clock small{font-size:.7rem}
.page-wrap{
  width:100%;
  max-width:1600px;
  padding:24px 28px 44px;
  container-type:inline-size;
  container-name:workspace;
}

/* ---------- common typography ---------- */
.page-intro{align-items:center;margin-bottom:20px}
.page-intro h2,
.device-page-v2 .device-page-title h2,
.subscription-hero h2,
.warehouse-hero h2,
.tables-hero h2,
.emenu-admin-hero h2{
  font-family:inherit!important;
  font-size:clamp(1.45rem,2.4vw,1.85rem)!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  line-height:1.15!important;
}
.page-intro p,.device-page-v2 .device-page-title p,.warehouse-hero p,.subscription-hero p,.emenu-admin-hero p{
  font-size:.875rem!important;
  line-height:1.55!important;
}
.section-kicker,.hero-kicker,.panel-kicker,.device-page-v2 .device-v2-heading-copy>span{
  font-size:.7rem!important;
  letter-spacing:.1em!important;
  line-height:1.3!important;
}
.panel h3,.panel h4,.panel-heading h3,.panel-heading h4,
.device-page-v2 .device-v2-heading-copy h3{
  font-family:inherit!important;
  font-weight:800!important;
  letter-spacing:-.015em!important;
}

/* Kill legacy microscopic text. */
.field-label,.field-help,.input-hint,.table-footer small,.data-table th,.data-table td,
.cache-indicator,.live-badge,.realtime-status,.subscription-status,.route-role,.route-health,
.device-page-v2 small,.device-page-v2 em,.device-page-v2 code,
.counting-card small,.service-order-card small,.platform-package-card small,
.stock-product-row small,.movement-row small,.warehouse-batch-row small,.warehouse-movement-row small,
.job-row small,.device-flow-card small,.bluetooth-note p,.bluetooth-note a,
.printer-role-options small,.switch-row small,.account-row small,.phone-menu-list small{
  font-size:var(--ui-small)!important;
  line-height:1.45!important;
}
.field-label{font-size:var(--ui-label)!important;font-weight:700!important;margin-bottom:6px!important;color:#425249!important}

/* ---------- controls ---------- */
.btn-primary-cf,.btn-secondary-cf,.btn-danger-cf,
.warehouse-tool-button,.device-page-v2 button,.platform-action-row button{
  min-height:40px;
  height:auto;
  padding:9px 14px;
  border-radius:11px;
  font-size:.8rem!important;
  line-height:1.15;
}
.icon-btn{width:38px;height:38px;border-radius:10px;padding:0}
.field-wrap,.select-field,.search-field,.date-field{
  min-height:44px;
  border-radius:11px;
}
.field-wrap input,.field-wrap select,.field-wrap textarea,
.form-control,.form-select,.search-field input,.select-field select,.date-field input{
  min-height:42px;
  font-size:.875rem!important;
}
textarea.form-control,.field-wrap textarea{min-height:92px}
.form-grid-2,.two-fields,.warehouse-form-grid,.register-grid{gap:14px}
.form-divider{margin:22px 0}

/* ---------- cards / panels ---------- */
.panel,.metric-card,.pricing-card,.bookkeeping-card,.order-hub-card,
.counting-card,.service-order-card,.platform-package-card,.device-page-v2 .device-health-card,
.device-page-v2 .device-agent-card,.device-page-v2 .device-printer-card{
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-sm)!important;
  border-color:#e2e9e5!important;
}
.panel-heading,.panel-head{padding:17px 18px!important;min-height:62px}
.metric-card{min-height:126px;padding:17px!important}
.metric-label{font-size:.75rem!important}.metric-value{font-size:1.35rem!important}.metric-foot{font-size:.72rem!important}
.metric-icon{width:40px;height:40px;border-radius:11px}

/* ---------- tables ---------- */
.responsive-table,.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:0 0 var(--radius) var(--radius)}
.data-table,.transaction-table,.warehouse-table,.table{
  font-size:.82rem;
  width:100%;
}
.data-table th,.transaction-table th,.warehouse-table th,.table th{
  font-size:.7rem!important;
  letter-spacing:.045em!important;
  white-space:nowrap;
  padding:12px 14px!important;
}
.data-table td,.transaction-table td,.warehouse-table td,.table td{
  font-size:.82rem!important;
  padding:12px 14px!important;
  vertical-align:middle;
}

/* ---------- default grids ---------- */
.metric-grid,.accounting-summary-grid,.inventory-metrics,.warehouse-metrics,
.pending-metrics,.table-management-metrics,.platform-metrics,.device-page-v2 .device-health-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px!important;
}
.dashboard-grid{grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:16px}
.dashboard-order-hub{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.product-grid-modern{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px}
.pos-product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pending-order-grid,.table-card-grid,.counting-grid,.service-order-grid,.platform-package-grid{
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}
.accounting-layout{grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:16px}
.inventory-layout{grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);gap:16px}
.warehouse-layout{grid-template-columns:minmax(0,1.45fr) minmax(300px,.7fr);gap:16px}
.emenu-settings-grid{grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);gap:16px}
.platform-settings-grid{grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:16px}
.printer-studio{grid-template-columns:minmax(370px,.9fr) minmax(360px,1.1fr);gap:16px}
.device-page-v2 .device-dashboard-grid{grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr)!important;gap:16px!important}
.device-page-v2 .device-agent-list,.device-page-v2 .device-printer-list{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;gap:12px!important}

/* Devices readable sizing: undo the 8–10px card typography. */
.device-page-v2 .device-health-card{min-height:104px!important;padding:15px!important}
.device-page-v2 .device-health-card small{font-size:.73rem!important}
.device-page-v2 .device-health-card strong{font-size:1.2rem!important}
.device-page-v2 .device-agent-card h4,.device-page-v2 .device-printer-card h4{font-size:.9rem!important}
.device-page-v2 .device-agent-card .device-agent-identity p,
.device-page-v2 .device-printer-card .device-printer-identity small{font-size:.74rem!important;max-width:none!important}
.device-page-v2 .device-agent-details small,.device-page-v2 .device-agent-details b,
.device-page-v2 .device-printer-specs b,.device-page-v2 .device-route-categories>small,
.device-page-v2 .device-route-categories span,.device-page-v2 .device-cashier-note b,
.device-page-v2 .device-cashier-note small,.device-page-v2 .device-agent-card footer>span,
.device-page-v2 .device-printer-card footer>span,.device-page-v2 .device-job-row strong,
.device-page-v2 .device-job-row small,.device-page-v2 .device-helper-card strong,
.device-page-v2 .device-helper-card p,.device-page-v2 .device-helper-card a{
  font-size:.74rem!important;
}
.device-page-v2 .device-agent-details,.device-page-v2 .device-printer-specs{gap:8px!important}
.device-page-v2 .device-agent-details>span,.device-page-v2 .device-printer-specs>span{padding:9px!important}

/* ---------- modal ---------- */
.cf-modal .modal-content,.modal-content{border-radius:18px}
.cf-modal .modal-header,.modal-header{padding:17px 19px}
.cf-modal .modal-body,.modal-body{padding:18px 19px}
.cf-modal .modal-footer,.modal-footer{padding:14px 19px;gap:9px}
.modal-title-group h5{font-size:1rem!important}.modal-title-group p{font-size:.77rem!important}

/* ---------- POS workspace ---------- */
.pos-header{min-height:68px;height:auto;padding:10px 18px}
.pos-body{grid-template-columns:minmax(0,1fr) minmax(330px,380px);height:calc(100dvh - 68px)}
.pos-products{padding:16px}
.checkout-panel{min-width:0}
.cart-row{grid-template-columns:42px minmax(0,1fr) auto auto}

/* ---------- medium viewport shell ----------
   At this width the old fixed sidebar caused the content canvas to become too narrow. */
@media (max-width:1280px){
  :root{--sidebar-width:252px}
  .sidebar{transform:translateX(-105%);transition:transform .22s ease;box-shadow:20px 0 60px rgba(0,0,0,.28)}
  .sidebar.open{transform:none}
  .mobile-overlay.show{display:block}
  .app-main{margin-left:0}
  .menu-toggle{display:grid!important}
  .topbar{padding:0 22px}
  .page-wrap{padding:22px 22px 40px}
}

/* ---------- actual content-width breakpoints ---------- */
@container workspace (max-width:1100px){
  .dashboard-grid,.accounting-layout,.inventory-layout,.warehouse-layout,.emenu-settings-grid,
  .platform-settings-grid,.printer-studio,.device-page-v2 .device-dashboard-grid{
    grid-template-columns:1fr!important;
  }
  .device-page-v2 .device-dashboard-side{position:static!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .metric-grid,.accounting-summary-grid,.inventory-metrics,.warehouse-metrics,
  .pending-metrics,.table-management-metrics,.platform-metrics,.device-page-v2 .device-health-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .dashboard-order-hub{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .warehouse-side-stack{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .warehouse-toolbar{grid-template-columns:minmax(220px,1fr) repeat(2,auto)!important}
  .device-page-v2 .device-agent-list,.device-page-v2 .device-printer-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .platform-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@container workspace (max-width:820px){
  .page-intro,.device-page-v2 .device-page-head{align-items:flex-start!important;flex-direction:column!important;gap:14px!important}
  .intro-actions,.overview-actions,.device-page-v2 .device-head-actions,.emenu-admin-actions,.warehouse-hero-actions{
    width:100%!important;display:flex!important;flex-wrap:wrap!important;gap:9px!important;
  }
  .intro-actions>* ,.overview-actions>* ,.device-page-v2 .device-head-actions>* ,.emenu-admin-actions>* ,.warehouse-hero-actions>*{
    flex:1 1 180px;
  }
  .product-grid-modern{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pending-order-grid,.table-card-grid,.counting-grid,.service-order-grid,.platform-package-grid{
    grid-template-columns:1fr!important;
  }
  .device-page-v2 .device-agent-list,.device-page-v2 .device-printer-list{grid-template-columns:1fr!important}
  .device-page-v2 .device-dashboard-side{grid-template-columns:1fr!important}
  .warehouse-side-stack{grid-template-columns:1fr!important}
  .warehouse-toolbar{grid-template-columns:1fr 1fr!important}
  .warehouse-scan-field{grid-column:1/-1}
  .form-grid-2,.two-fields,.warehouse-form-grid,.warehouse-form-grid.four,.register-grid,.bookkeeping-options,
  .settings-options.two,.toggle-list,.column-picker,.printer-role-options{grid-template-columns:1fr!important}
  .data-table,.transaction-table,.warehouse-table{min-width:720px}
  .panel-heading,.panel-head{align-items:flex-start!important}
  .search-field{min-width:0!important;max-width:none!important}
}

@container workspace (max-width:600px){
  .metric-grid,.accounting-summary-grid,.inventory-metrics,.warehouse-metrics,
  .pending-metrics,.table-management-metrics,.platform-metrics,.device-page-v2 .device-health-grid{
    grid-template-columns:1fr!important;
  }
  .dashboard-order-hub{grid-template-columns:1fr!important}
  .product-grid-modern{grid-template-columns:1fr!important}
  .device-page-v2 .device-agent-details,.device-page-v2 .device-printer-specs{grid-template-columns:1fr!important}
  .device-page-v2 .device-agent-details>span:last-child,.device-page-v2 .device-printer-specs>span:first-child{grid-column:auto!important}
  .pending-card-actions,.table-card-actions,.counting-card-actions,.service-order-actions,.platform-action-row{
    grid-template-columns:1fr!important;display:grid!important
  }
}

/* ---------- viewport mobile ---------- */
@media(max-width:767.98px){
  :root{--topbar-height:64px}
  body{font-size:14px}
  .topbar{height:var(--topbar-height);padding:0 14px;gap:8px}
  .topbar-left{gap:8px;min-width:0}.topbar-left>div{min-width:0}.topbar h1{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .eyebrow,.notification-btn,.top-avatar{display:none!important}
  .live-clock{height:36px;padding:0 9px;column-gap:5px}.live-clock i{display:none}.live-clock span{font-size:.78rem}.live-clock small{font-size:.7rem}
  .page-wrap{padding:16px 12px 30px}
  .page-intro{margin-bottom:15px}
  .page-intro h2{margin-top:5px!important}.page-intro p{font-size:.82rem!important}
  .panel-heading,.panel-head{padding:14px!important;min-height:0}
  .panel-heading{flex-direction:column!important;align-items:stretch!important}
  .panel-heading .search-field,.panel-heading .btn-primary-cf,.panel-heading .btn-secondary-cf{width:100%}
  .metric-card{min-height:106px;padding:14px!important}
  .metric-value{font-size:1.18rem!important}
  .btn-primary-cf,.btn-secondary-cf,.btn-danger-cf{min-height:42px}
  .cf-modal .modal-dialog,.modal-dialog{margin:10px;max-width:calc(100% - 20px)}
  .cf-modal .modal-content,.modal-content{border-radius:15px}
  .cf-modal .modal-header,.modal-header{padding:14px}
  .cf-modal .modal-body,.modal-body{padding:14px}
  .cf-modal .modal-footer,.modal-footer{padding:12px 14px;display:grid;grid-template-columns:1fr}
  .modal-footer>*{width:100%}
  .pos-header{padding:8px 10px;min-height:60px}
  .pos-body{display:block;height:calc(100dvh - 60px);overflow:auto}
  .pos-products{height:auto;overflow:visible;padding:10px}
  .pos-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}
  .checkout-panel{border-left:0;border-top:1px solid var(--line);min-height:auto}
  .cart-row{grid-template-columns:38px minmax(0,1fr) auto}
  .cart-row>*:nth-child(4){grid-column:2/-1}
}

@media(max-width:479.98px){
  .live-clock small{display:none}.live-clock{display:flex;align-items:center}
  .page-wrap{padding-left:10px;padding-right:10px}
  .intro-actions,.overview-actions,.device-page-v2 .device-head-actions,.emenu-admin-actions,.warehouse-hero-actions{display:grid!important;grid-template-columns:1fr!important}
  .product-grid-modern{grid-template-columns:1fr!important}
  .pos-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .transaction-summary{grid-template-columns:1fr 1fr!important}
  .device-page-v2 .device-page-title h2{font-size:1.35rem!important}
}

/* ---------- authentication ---------- */
.login-page{font-size:14px}
.login-card-new{border-radius:20px;padding:clamp(22px,4vw,34px)}
.login-heading h2{font-family:inherit;font-weight:800;letter-spacing:-.03em}
.login-heading p,.remember-row,.terms-row,.register-callout,.input-hint{font-size:.82rem!important}
.login-submit{min-height:46px;font-size:.88rem!important;border-radius:12px}
@media(max-width:1100px){
  .login-shell,.register-shell{grid-template-columns:1fr!important}
  .login-showcase,.register-showcase{display:none!important}
  .login-form-side,.register-form-side{min-height:100dvh;padding:88px 22px 30px!important}
  .mobile-login-brand{display:flex!important}
  .login-card-new{width:min(100%,560px);margin:auto}
}
@media(max-width:520px){
  .login-form-side,.register-form-side{padding:78px 14px 20px!important}
  .login-card-new{padding:20px 16px;border-radius:16px}
}

/* E-menu gets sane type sizes without altering its visual identity. */
.emenu-public{font-size:14px}
.emenu-public small,.emenu-public .emenu-kicker{font-size:.72rem!important}

/* ---------- visual simplification across feature pages ---------- */
.overview-banner,.warehouse-hero,.subscription-hero,.tables-hero,.emenu-admin-hero,.pending-hero,.counting-overview{
  min-height:0!important;
  border-radius:18px!important;
  padding:22px!important;
}
.overview-banner,.warehouse-hero,.subscription-hero{
  box-shadow:0 10px 28px rgba(16,48,36,.08)!important;
}
.banner-orb{opacity:.35;transform:scale(.82)}
.catalogue-toolbar,.transaction-toolbar,.warehouse-toolbar{
  border-radius:14px!important;
  gap:10px!important;
}
.product-card-body,.pricing-card,.counting-card,.service-order-card,.platform-package-card{padding:16px!important}
.product-card-body h3,.counting-card h3,.service-order-card h3,.platform-package-card h3{font-size:.95rem!important;line-height:1.3!important}
.catalogue-meta,.product-card-body p,.service-order-card p,.counting-card p{font-size:.78rem!important;line-height:1.45!important}
.pending-card-actions,.table-card-actions,.counting-card-actions,.service-order-actions,.platform-action-row{gap:8px!important}

/* Lists should be readable, not compressed into dashboard microcopy. */
.stock-product-row,.movement-row,.warehouse-batch-row,.warehouse-movement-row,.account-row,.job-row{
  min-height:58px!important;
}
.stock-product-row strong,.movement-row strong,.warehouse-batch-row strong,.warehouse-movement-row strong,
.account-row strong,.job-row strong{font-size:.82rem!important}

/* Keep useful panels visible on small screens; scrolling is better than silently hiding data. */
@media(max-width:720px){.recent-panel{display:block!important}}

/* POS: stack earlier on portrait tablets so checkout does not crush product cards. */
@media(max-width:900px){
  .pos-body{display:block!important;height:calc(100dvh - 64px)!important;overflow-y:auto!important}
  .pos-products{height:auto!important;overflow:visible!important}
  .checkout-panel{border-left:0!important;border-top:1px solid var(--line)!important;min-height:auto!important}
  .pos-product-grid{max-height:none!important;overflow:visible!important}
}

/* Standalone e-menu refinement. */
.emenu-public .emenu-topbar{max-width:1180px;height:72px}
.emenu-public .emenu-main{max-width:1180px}
.emenu-public .emenu-hero{min-height:280px;padding:42px 48px;border-radius:24px}
.emenu-public .emenu-hero h1{font-size:clamp(2rem,4.5vw,3.5rem)}
.emenu-public .emenu-hero p{font-size:.9rem!important}
.emenu-public .emenu-hero-meta span{font-size:.75rem!important}
.emenu-public .emenu-controls{padding-top:24px;gap:14px}
.emenu-public .emenu-section-head span,.emenu-public .emenu-table-chip small,
.emenu-public .public-menu-image>span,.emenu-public .emenu-footer small,
.emenu-public .emenu-cart-fab small,.emenu-public .emenu-checkout-card header span,
.emenu-public .checkout-table-banner small,.emenu-public .checkout-final-total small,
.emenu-public .checkout-consent,.emenu-public .emenu-success-card>small,.emenu-public .order-live-status small{
  font-size:.72rem!important;
}
.emenu-public .public-menu-copy h3{font-size:1rem!important;min-height:0!important}
.emenu-public .public-menu-copy p{font-size:.8rem!important;height:auto!important;min-height:2.3em}
.emenu-public .public-menu-copy>strong{font-size:.95rem!important}
.emenu-public .public-menu-copy>button,.emenu-public .emenu-categories button{font-size:.78rem!important}
.emenu-public .drawer-item p strong{font-size:.85rem!important}.emenu-public .drawer-item p small{font-size:.74rem!important}
@media(max-width:760px){
  .emenu-public .emenu-main{padding-left:14px;padding-right:14px}
  .emenu-public .emenu-hero{padding:28px 22px;min-height:240px;border-radius:20px}
  .emenu-public .emenu-hero h1{font-size:2rem}
  .emenu-public .emenu-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .emenu-public .public-menu-image{height:150px}
  .emenu-public .public-menu-copy{padding:13px}
}
@media(max-width:430px){
  .emenu-public .emenu-product-grid{grid-template-columns:1fr}
  .emenu-public .public-menu-image{height:210px}
}

/* ========================================================================== */
/* v2.7.1 — POS workspace + standalone QR visual fixes                        */
/* ========================================================================== */

/* The POS modal must behave like an application workspace, never like a
   scrollable Bootstrap document. This keeps the title/close bar visible and
   prevents the underlying sidebar/page from peeking through at the bottom. */
.pos-modal{
  padding:0!important;
  overflow:hidden!important;
  background:#f3f6f4;
}
.pos-modal .modal-dialog,
.pos-modal .modal-dialog.modal-fullscreen{
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
}
.pos-modal .modal-content{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  height:100dvh!important;
  max-height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:#f3f6f4!important;
}
.pos-header{
  flex:0 0 64px!important;
  min-height:64px!important;
  height:64px!important;
  padding:0 18px!important;
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid #dfe7e2!important;
  box-shadow:0 3px 15px rgba(21,42,32,.04);
  position:relative;
  z-index:5;
}
.pos-header h5{font-family:inherit!important;font-size:1rem!important;font-weight:800!important;letter-spacing:-.02em}
.pos-header p{font-size:.76rem!important;line-height:1.35!important;color:#697b72!important}
.pos-logo{width:38px!important;height:38px!important;border-radius:11px!important}
.pos-close{width:40px!important;height:40px!important;border-radius:11px!important;font-size:.95rem!important}
.pos-body{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(390px,420px)!important;
  overflow:hidden!important;
  background:#f4f7f5;
}
.pos-products{
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:14px 16px 16px!important;
  background:#f4f7f5;
}
.pos-product-toolbar{flex:0 0 auto;margin-bottom:12px!important;gap:10px!important}
.pos-search{max-width:520px!important;min-width:260px!important}
.pos-search input{font-size:.84rem!important}
.pos-search kbd{font-size:.62rem!important;padding:4px 7px!important}
.pos-tabs{max-width:55%;overflow-x:auto;scrollbar-width:none}
.pos-tabs::-webkit-scrollbar{display:none}
.pos-tabs button{min-height:36px!important;padding:7px 12px!important;font-size:.74rem!important;white-space:nowrap}
.pos-product-grid{
  flex:1 1 auto!important;
  min-height:0!important;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important;
  align-content:start;
  gap:12px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  padding:2px 5px 18px 2px!important;
}
.pos-product-card{
  min-height:218px!important;
  border-radius:16px!important;
  box-shadow:0 5px 16px rgba(21,42,32,.045)!important;
}
.pos-product-card>img,.pos-no-image{height:132px!important}
.pos-product-info{padding:10px 12px 12px!important}
.pos-product-info>span{font-size:.68rem!important;letter-spacing:.06em!important;line-height:1.2}
.pos-product-info h4{font-family:inherit!important;font-size:.82rem!important;font-weight:700!important;margin:5px 34px 6px 0!important;line-height:1.3!important}
.pos-product-info strong{font-size:.82rem!important;font-weight:800!important}
.add-product{width:34px!important;height:34px!important;right:10px!important;bottom:10px!important;border-radius:10px!important;font-size:.78rem!important}
.product-stepper{height:34px!important;right:9px!important;bottom:9px!important;border-radius:10px!important}
.product-stepper button{width:31px!important;font-size:.72rem!important}.product-stepper b{font-size:.76rem!important}

.checkout-panel{
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:14px 16px 12px!important;
  border-left:1px solid #dfe7e2!important;
  background:#fff!important;
  box-shadow:-8px 0 24px rgba(21,42,32,.035);
}
.checkout-head{flex:0 0 auto;margin-bottom:10px!important}
.checkout-head h3{font-family:inherit!important;font-size:.95rem!important;font-weight:800!important;margin-top:2px!important}
.checkout-head .panel-kicker{font-size:.66rem!important}
.cart-count{font-size:.7rem!important;padding:5px 9px!important}
.checkout-order-fields{flex:0 0 auto;padding-bottom:10px!important}
.order-type-switch{margin-bottom:10px!important;padding:4px!important}
.order-type-switch button{height:36px!important;font-size:.73rem!important;border-radius:8px!important}
.checkout-customer{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
  padding-bottom:8px!important;
}
.checkout-customer>div:last-child{grid-column:1/-1}
.checkout-customer .field-wrap,.checkout-order-fields>.field-wrap{height:43px!important;min-height:43px!important}
.checkout-customer .field-wrap input,.checkout-customer .field-wrap select,.checkout-order-fields>.field-wrap input{font-size:.82rem!important}
.checkout-customer .field-label small{font-size:.66rem!important}
.checkout-order-fields>.field-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cart-list{
  flex:1 1 auto!important;
  min-height:95px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  padding:6px 1px!important;
}
.cart-empty{min-height:120px!important}
.cart-empty>span{width:44px!important;height:44px!important}
.cart-empty strong{font-family:inherit!important;font-size:.82rem!important;font-weight:800!important;margin-top:9px!important}
.cart-empty p{font-size:.72rem!important;max-width:230px!important}
.cart-row{grid-template-columns:44px minmax(0,1fr) auto auto!important;gap:9px!important;padding:9px 2px!important}
.cart-thumb{width:44px!important;height:44px!important}
.cart-item-copy strong{font-size:.78rem!important}.cart-item-copy small{font-size:.69rem!important}
.cart-row>b{font-size:.76rem!important}.cart-row>button{font-size:.72rem!important;width:28px!important;height:28px!important}
.checkout-bottom{flex:0 0 auto!important;padding-top:10px!important;background:#fff}
.checkout-total span,.change-row span{font-size:.74rem!important}
.checkout-total strong{font-family:inherit!important;font-size:1.22rem!important;font-weight:850!important}
.payment-input-wrap{margin-top:8px!important}
.paid-input{height:45px!important}.paid-input span{font-size:.78rem!important}.paid-input input{font-family:inherit!important;font-size:1rem!important;font-weight:750!important}
.quick-cash{gap:7px!important}.quick-cash button{height:30px!important;font-size:.68rem!important;border-radius:8px!important}
.change-row{padding:8px 0!important}.change-row strong{font-family:inherit!important;font-size:.85rem!important}
.auto-print{padding:8px 10px!important;margin-bottom:8px!important;border:1px solid #e4ebe7}
.auto-print strong{font-size:.72rem!important}.auto-print small{font-size:.65rem!important;line-height:1.25!important}
.checkout-actions.split{grid-template-columns:42px minmax(112px,.8fr) minmax(145px,1.2fr)!important;gap:7px!important}
.clear-cart,.pending-button,.pay-button{height:44px!important;border-radius:10px!important}
.pending-button,.pay-button{font-size:.72rem!important}

/* Desktop/laptop POS scaling. */
@media(max-width:1380px){
  .pos-body{grid-template-columns:minmax(0,1fr) minmax(360px,390px)!important}
  .pos-product-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important}
  .checkout-panel{padding-left:13px!important;padding-right:13px!important}
}
@media(max-width:1080px){
  .pos-body{grid-template-columns:minmax(0,1fr) 350px!important}
  .pos-product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
  .pos-product-card{min-height:205px!important}.pos-product-card>img,.pos-no-image{height:118px!important}
  .checkout-customer{grid-template-columns:1fr!important}.checkout-customer>div:last-child{grid-column:auto}
}

/* Tablet portrait and mobile: one document scroll, but keep a proper header and
   a clear separation between catalogue and payment instead of squeezing both. */
@media(max-width:900px){
  .pos-modal{overflow:hidden!important}
  .pos-header{flex:0 0 60px!important;min-height:60px!important;height:60px!important;padding:0 12px!important}
  .pos-header p{display:none}
  .pos-body{display:block!important;height:auto!important;overflow-y:auto!important;overscroll-behavior:contain}
  .pos-products{overflow:visible!important;padding:10px 12px 16px!important}
  .pos-product-toolbar{position:sticky;top:0;z-index:3;background:#f4f7f5;padding:2px 0 9px;align-items:stretch!important;flex-direction:column!important}
  .pos-search{max-width:none!important;min-width:0!important;width:100%!important}
  .pos-tabs{max-width:100%!important;width:100%!important}
  .pos-product-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;max-height:none!important;overflow:visible!important}
  .checkout-panel{min-height:auto!important;overflow:visible!important;border-left:0!important;border-top:1px solid #dfe7e2!important;box-shadow:0 -8px 24px rgba(21,42,32,.04)!important;padding:16px!important}
  .checkout-customer{grid-template-columns:repeat(2,minmax(0,1fr))!important}.checkout-customer>div:last-child{grid-column:1/-1}
  .cart-list{max-height:300px!important;min-height:120px!important}
  .checkout-bottom{position:relative!important}
}
@media(max-width:640px){
  .pos-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .pos-product-card{min-height:192px!important}.pos-product-card>img,.pos-no-image{height:108px!important}
  .pos-product-info{padding:9px 10px 10px!important}.pos-product-info h4{font-size:.78rem!important}
  .checkout-customer{grid-template-columns:1fr!important}.checkout-customer>div:last-child{grid-column:auto}
  .checkout-actions.split{grid-template-columns:42px 1fr!important}
  .checkout-actions.split .pay-button{grid-column:1/-1!important}
  .auto-print small{display:none}
}
@media(max-width:390px){
  .pos-product-grid{grid-template-columns:1fr 1fr!important}
  .pos-product-card>img,.pos-no-image{height:100px!important}
  .pos-product-info>span{font-size:.62rem!important}.pos-product-info h4,.pos-product-info strong{font-size:.74rem!important}
}

/* ========================================================================== */
/* v2.8.1 — responsive cleanup                                                 */
/* Focus: reduce vertical waste, remove medium-width dead space, and keep      */
/* dashboards useful on phones/tablets without changing application behavior.  */
/* ========================================================================== */

/* Keep the content canvas visually anchored on wide displays. */
.page-wrap{margin-inline:auto}
.page-section{min-width:0}
.panel,.metric-card,.order-hub-card,.device-page-v2 .device-health-card,
.device-page-v2 .device-agent-card,.device-page-v2 .device-printer-card{min-width:0}

/* Medium canvas: headings and actions get their own rows instead of squeezing. */
@container workspace (max-width:1100px){
  .device-page-v2 .device-page-head{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:14px;
  }
  .device-page-v2 .device-head-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
  }
  .device-page-v2 .device-head-actions>*{width:100%;min-width:0}
}

/* Devices: use the available 820–1100px canvas instead of leaving a blank half. */
@container workspace (min-width:821px) and (max-width:1100px){
  .device-page-v2 .device-dashboard-side{
    position:static;
    display:grid;
    grid-template-columns:minmax(340px,1.15fr) minmax(280px,.85fr);
    grid-template-rows:auto auto;
    gap:14px;
    align-items:start;
  }
  .device-page-v2 .device-scan-card{
    grid-column:1;
    grid-row:1 / span 2;
  }
  .device-page-v2 .recent-print-jobs{
    grid-column:2;
    grid-row:1;
  }
  .device-page-v2 .device-helper-card{
    grid-column:2;
    grid-row:2;
  }
}

@container workspace (max-width:820px){
  .device-page-v2 .device-dashboard-side{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  .device-page-v2 .device-scan-card,
  .device-page-v2 .recent-print-jobs,
  .device-page-v2 .device-helper-card{
    grid-column:auto;
    grid-row:auto;
  }
}

/* Phone/tablet dashboards stay information-dense, not one-card-per-screen. */
@container workspace (max-width:600px){
  .metric-grid,.accounting-summary-grid,.inventory-metrics,.warehouse-metrics,
  .pending-metrics,.table-management-metrics,.platform-metrics,
  .device-page-v2 .device-health-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .dashboard-order-hub{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .product-grid-modern{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .metric-card,.device-page-v2 .device-health-card{
    min-height:104px!important;
    padding:13px!important;
  }
  .metric-icon,.device-page-v2 .device-health-icon{
    width:36px!important;
    height:36px!important;
    border-radius:10px!important;
  }
  .metric-value,.device-page-v2 .device-health-card strong{
    font-size:1.08rem!important;
  }
  .metric-label,.device-page-v2 .device-health-card small{
    font-size:.72rem!important;
  }
  .metric-foot,.device-page-v2 .device-health-card em{
    font-size:.68rem!important;
  }
}

/* Dashboard hero: one primary CTA + two compact secondary actions on phones. */
@media(max-width:600px){
  .overview-banner{
    padding:18px!important;
    gap:16px!important;
    border-radius:16px!important;
  }
  .overview-copy h2{font-size:1.38rem!important;line-height:1.2!important}
  .overview-copy p{font-size:.78rem!important}
  .overview-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .overview-actions>*{width:100%!important;min-width:0!important}
  .overview-actions>.btn-primary-cf:first-child{grid-column:1/-1}
  .dashboard-order-hub .order-hub-card,
  .dashboard-order-hub .order-hub-date{
    min-height:118px!important;
    padding:12px!important;
  }
  .dashboard-order-hub p{display:none!important}
  .dashboard-order-hub strong{font-size:.76rem!important;line-height:1.3!important}
  .dashboard-order-hub small{font-size:.62rem!important}
}

/* Devices on phones: keep health summary compact and avoid a 4-card vertical wall. */
@media(max-width:600px){
  .device-page-v2 .device-page-head{gap:12px!important}
  .device-page-v2 .device-page-title p{max-width:none!important}
  .device-page-v2 .device-head-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .device-page-v2 .device-head-actions .btn-primary-cf{
    grid-column:1/-1!important;
  }
  .device-page-v2 .device-health-card{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    align-items:center!important;
    gap:9px!important;
  }
  .device-page-v2 .device-health-card>div{min-width:0!important}
  .device-page-v2 .device-health-card em{
    white-space:normal!important;
    line-height:1.3!important;
  }
  .device-page-v2 .device-v2-heading{
    min-height:0!important;
    padding:13px!important;
    gap:10px!important;
  }
  .device-page-v2 .device-v2-heading-copy p{font-size:.72rem!important;line-height:1.45!important}
  .device-page-v2 .device-agent-list,.device-page-v2 .device-printer-list{padding:10px!important}
}

/* Very narrow phones: actions stack, summaries remain 2 columns while readable. */
@media(max-width:420px){
  .page-wrap{padding:14px 10px 28px!important}
  .device-page-v2 .device-head-actions{grid-template-columns:1fr!important}
  .device-page-v2 .device-head-actions .btn-primary-cf{grid-column:auto!important}
  .overview-actions{grid-template-columns:1fr 1fr!important}
  .overview-actions>.btn-primary-cf:first-child{grid-column:1/-1}
  .metric-grid,.accounting-summary-grid,.inventory-metrics,.warehouse-metrics,
  .pending-metrics,.table-management-metrics,.platform-metrics,
  .device-page-v2 .device-health-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .metric-card,.device-page-v2 .device-health-card{min-height:98px!important;padding:11px!important}
  .metric-icon,.device-page-v2 .device-health-icon{width:32px!important;height:32px!important}
  .device-page-v2 .device-health-card{grid-template-columns:32px minmax(0,1fr)!important}
  .product-grid-modern{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .product-photo{height:118px!important}
  .product-card-body{padding:10px!important}
  .product-card-body h3{font-size:.8rem!important}
  .catalogue-meta,.product-card-body p{font-size:.7rem!important}
}

/* Table headers/actions should not force oversized panels at medium widths. */
@media(max-width:900px){
  .panel-heading,.panel-head{gap:10px!important}
  .panel-heading .search-field{max-width:none!important}
  .transaction-toolbar,.catalogue-toolbar{align-items:stretch!important}
}

/* Prevent legacy device rules from making operational text microscopic. */
.device-page-v2 .device-agent-card h4,
.device-page-v2 .device-printer-card h4{font-size:.86rem!important}
.device-page-v2 .device-agent-card .device-agent-identity p,
.device-page-v2 .device-printer-card .device-printer-identity small,
.device-page-v2 .device-agent-details small,
.device-page-v2 .device-agent-details b,
.device-page-v2 .device-printer-specs b,
.device-page-v2 .device-route-categories>small,
.device-page-v2 .device-route-categories span,
.device-page-v2 .device-cashier-note b,
.device-page-v2 .device-cashier-note small,
.device-page-v2 .device-agent-card footer>span,
.device-page-v2 .device-printer-card footer>span,
.device-page-v2 .device-job-row strong,
.device-page-v2 .device-job-row small,
.device-page-v2 .device-helper-card strong,
.device-page-v2 .device-helper-card p,
.device-page-v2 .device-helper-card a{
  font-size:.72rem!important;
  line-height:1.4!important;
}

/* Final phone fit for device summary cards. */
@media(max-width:420px){
  .device-page-v2 .device-head-actions{
    grid-template-columns:1fr 1fr!important;
  }
  .device-page-v2 .device-head-actions .btn-primary-cf{
    grid-column:1/-1!important;
  }
  .device-page-v2 .device-health-card{
    grid-template-columns:1fr!important;
    gap:2px!important;
  }
  .device-page-v2 .device-health-icon{display:none!important}
  .device-page-v2 .device-health-card em{display:none!important}
}

/* v2.8.2 — scrollable modal forms
   Bootstrap's .modal-dialog-scrollable expects .modal-body to be a direct flex child
   of .modal-content. Several Auto Smart Carwash modals wrap header/body/footer in <form>, so the
   form itself grew past the viewport while .modal-content clipped it with overflow:hidden.
   Make that form the scroll container's flex column and let only the body scroll. */
.cf-modal .modal-dialog-scrollable .modal-content > form{
  display:flex;
  flex-direction:column;
  width:100%;
  max-height:calc(100dvh - 3.5rem);
  min-height:0;
  overflow:hidden;
}
.cf-modal .modal-dialog-scrollable .modal-content > form > .modal-header,
.cf-modal .modal-dialog-scrollable .modal-content > form > .modal-footer{
  flex:0 0 auto;
}
.cf-modal .modal-dialog-scrollable .modal-content > form > .modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:767.98px){
  .cf-modal .modal-dialog-scrollable .modal-content > form{
    max-height:calc(100dvh - 20px);
  }
}

/* Keep notification access available on mobile. */
@media(max-width:720px){.topbar-right{display:flex!important;margin-left:auto}.topbar .notification-btn{display:grid!important}.topbar-right .live-clock,.topbar-right .top-avatar{display:none!important}}
@media(max-width:720px){.topbar-left{width:auto!important;flex:1;min-width:0}.topbar-right{flex:0 0 auto}}