/* MOB365 Layout Studio - per company/operator/device workspace customization */
:root{--mob365-accent:#0b8f83;--mob365-header:#0d2d4f;--mob365-radius:12px;--mob365-font-scale:1;--mob365-density:1}
.mob365-customizable{--mob-accent:var(--mob365-accent);--mob-header:var(--mob365-header);--mob-radius:var(--mob365-radius);font-size:calc(1em * var(--mob365-font-scale))}
.mob365-customizable .cafe-commandbar,.mob365-customizable .ops-topbar,.mob365-customizable .m3-top,.mob365-customizable .pos-command-bar{background:var(--mob-header)!important}
.mob365-customizable .cafe-btn.primary,.mob365-customizable .ops-btn.primary,.mob365-customizable .m3-btn.primary{background:var(--mob-accent)!important;border-color:var(--mob-accent)!important}
.mob365-customizable .cafe-zone-filter button.selected,.mob365-customizable .ops-filterbar button.active,.mob365-customizable .m3-tabs button.active{background:var(--mob-accent)!important;border-color:var(--mob-accent)!important}
.mob365-customizable .cafe-panel,.mob365-customizable .ops-panel,.mob365-customizable .m3-panel{border-radius:var(--mob-radius)!important}
.mob365-density-compact .ops-panel-head,.mob365-density-compact .cafe-panel-header,.mob365-density-compact .m3-panel-head{min-height:48px!important;height:auto!important;padding-top:8px!important;padding-bottom:8px!important}
.mob365-density-compact .pharmacy-product{min-height:82px!important;padding:8px!important}
.mob365-density-compact .cafe-product-card,.mob365-density-compact .m3-product{min-height:92px!important}
.mob365-density-compact .warehouse-doc{padding:8px!important}
.mob365-density-spacious .pharmacy-product{min-height:122px!important;padding:14px!important}
.mob365-density-spacious .cafe-product-card,.mob365-density-spacious .m3-product{min-height:140px!important}

/* Full viewport: every module must fit inside the visible page and scroll inside panels. */
.cafe-pos-shell.mob365-customizable,.ops-shell.mob365-customizable,.m3-shell.mob365-customizable,.pos-app-shell.mob365-customizable{height:100dvh;min-height:0!important;overflow:hidden;display:flex;flex-direction:column}
.cafe-pos-shell.mob365-customizable .cafe-pos-grid,.ops-shell.mob365-customizable .pharmacy-workspace,.ops-shell.mob365-customizable .warehouse-workspace,.m3-shell.mob365-customizable .m3-restaurant{flex:1;min-height:0;height:auto!important;overflow:hidden}
.cafe-pos-shell.mob365-customizable .cafe-panel,.ops-shell.mob365-customizable .ops-panel,.m3-shell.mob365-customizable .m3-panel{min-height:0}
.cafe-pos-shell.mob365-customizable .cafe-table-grid,.cafe-pos-shell.mob365-customizable .cafe-product-grid,.cafe-pos-shell.mob365-customizable .cafe-cart-lines,.ops-shell.mob365-customizable .pharmacy-product-list,.ops-shell.mob365-customizable .lot-list,.ops-shell.mob365-customizable .pharmacy-cart-lines,.ops-shell.mob365-customizable .warehouse-doc-list,.ops-shell.mob365-customizable .warehouse-table-wrap,.ops-shell.mob365-customizable .workflow-body,.m3-shell.mob365-customizable .m3-floor,.m3-shell.mob365-customizable .m3-products,.m3-shell.mob365-customizable .m3-lines{min-height:0;overflow:auto}

/* Generic 3-panel workspace; actual widths/order are injected as CSS variables. */
.mob365-grid3{display:grid!important;grid-template-columns:minmax(220px,var(--mob-left,22%)) 7px minmax(360px,1fr) 7px minmax(280px,var(--mob-right,24%))!important;gap:0!important}
.mob365-grid3>[data-mob-panel]{min-width:0;min-height:0}
.mob365-grid3>[data-mob-panel="left"]{grid-column:var(--mob-left-col,1)}
.mob365-grid3>[data-mob-panel="center"]{grid-column:var(--mob-center-col,3)}
.mob365-grid3>[data-mob-panel="right"]{grid-column:var(--mob-right-col,5)}
.mob365-splitter{position:relative;cursor:col-resize;touch-action:none;user-select:none;z-index:12;background:transparent}
.mob365-splitter.left{grid-column:2}.mob365-splitter.right{grid-column:4}
.mob365-splitter:after{content:"";position:absolute;top:8px;bottom:8px;left:3px;width:2px;border-radius:999px;background:#d4dee8;transition:.15s}
.mob365-splitter:hover:after,.mob365-splitter.dragging:after{left:2px;width:4px;background:var(--mob-accent)}
body.mob365-resizing{cursor:col-resize!important;user-select:none!important}

/* Better content readability */
.pharmacy-product .medicine-info strong{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.2;overflow:hidden!important}
.pharmacy-product .medicine-stock b{white-space:nowrap}
.warehouse-table td:nth-child(2){min-width:220px;white-space:normal;line-height:1.35}
.cafe-product-card strong,.m3-product strong{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden!important;line-height:1.2}
.cafe-cart-copy strong,.pharmacy-cart-line strong,.m3-line-item strong{overflow-wrap:anywhere}

/* Product column customization */
.mob365-customizable{--mob-product-cols:4}
.mob365-customizable .cafe-product-grid{grid-template-columns:repeat(var(--mob-product-cols),minmax(0,1fr))!important}
.mob365-customizable .pharmacy-product-list{grid-template-columns:repeat(var(--mob-product-cols-pharmacy,2),minmax(0,1fr))!important}
.mob365-customizable .m3-products{grid-template-columns:repeat(var(--mob-product-cols-restaurant,4),minmax(0,1fr))!important}

/* Layout Studio launcher and modal */
.mob365-layout-launcher{min-height:38px;border-radius:10px;padding:0 12px;border:1px solid #ffffff2b;background:#ffffff10;color:#fff;font:inherit;font-size:11px;font-weight:850;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mob365-layout-launcher:hover{background:#ffffff1e}
.mob365-studio-backdrop{position:fixed;inset:0;background:#06172b99;z-index:5000;display:grid;place-items:center;padding:18px;backdrop-filter:blur(4px)}
.mob365-studio{width:min(760px,96vw);max-height:min(820px,92dvh);overflow:auto;background:#fff;border-radius:20px;box-shadow:0 35px 110px #0006;color:#13273a;font-family:Inter,"Segoe UI",Arial,sans-serif}
.mob365-studio-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #e2e9ef;position:sticky;top:0;background:#fff;z-index:2}
.mob365-studio-head small{display:block;color:#0b8f83;font-size:9px;letter-spacing:.14em;font-weight:950}.mob365-studio-head h2{margin:3px 0 0;font-size:21px}.mob365-studio-close{width:36px;height:36px;border:1px solid #dce5ec;border-radius:10px;background:#fff;font-size:22px;cursor:pointer}
.mob365-studio-body{padding:18px 20px;display:grid;gap:18px}.mob365-studio-section{border:1px solid #e0e8ef;border-radius:14px;padding:14px}.mob365-studio-section h3{font-size:12px;margin:0 0 12px}.mob365-studio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mob365-studio-field{display:grid;gap:6px;font-size:10px;font-weight:800;color:#5c7084}.mob365-studio-field input[type="range"]{width:100%;accent-color:#0b8f83}.mob365-studio-field select,.mob365-studio-field input[type="color"]{height:40px;border:1px solid #d9e3ea;border-radius:9px;background:#fff;padding:0 9px}.mob365-studio-colors{display:flex;gap:8px;flex-wrap:wrap}.mob365-color-chip{width:34px;height:34px;border-radius:10px;border:2px solid #fff;box-shadow:0 0 0 1px #cbd8e2;cursor:pointer}.mob365-studio-actions{display:flex;justify-content:space-between;gap:8px;padding:14px 20px;border-top:1px solid #e2e9ef;position:sticky;bottom:0;background:#fff}.mob365-studio-actions>div{display:flex;gap:8px}.mob365-studio-btn{height:40px;padding:0 14px;border:1px solid #d7e1e9;border-radius:10px;background:#fff;font-weight:850;cursor:pointer}.mob365-studio-btn.primary{background:#0b8f83;color:#fff;border-color:#0b8f83}.mob365-studio-btn.danger{color:#a3322b}.mob365-order-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mob365-order-list select{width:100%;height:40px;border:1px solid #d8e2e9;border-radius:9px;padding:0 8px;background:#fff}
@media(max-width:1100px){.mob365-grid3{display:grid!important;grid-template-columns:1fr!important;height:auto!important;overflow:visible!important}.mob365-grid3>[data-mob-panel],.mob365-grid3>.mob365-splitter{grid-column:1!important}.mob365-grid3>.mob365-splitter{display:none}.mob365-customizable{height:auto!important;overflow:auto!important}.mob365-studio-grid{grid-template-columns:1fr}.mob365-customizable .pharmacy-product-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.mob365-customizable .pharmacy-product-list,.mob365-customizable .cafe-product-grid,.mob365-customizable .m3-products{grid-template-columns:repeat(2,minmax(0,1fr))!important}.mob365-order-list{grid-template-columns:1fr}}
/* Retail grid customization */
.pos-app-shell.mob365-customizable .pos-layout-premium{
  grid-template-columns:minmax(145px,var(--mob365-retail-sidebar,190px)) minmax(420px,1fr) minmax(330px,var(--mob365-retail-cart,440px)) 126px!important;
}
/* keep controls visible instead of clipping at viewport bottom */
.mob365-customizable .cart-actions,.mob365-customizable .workflow-actions,.mob365-customizable .cafe-payment-actions{flex-shrink:0}
.mob365-customizable .ops-topbar,.mob365-customizable .cafe-commandbar,.mob365-customizable .m3-top,.mob365-customizable .pos-command-bar{flex-shrink:0}
.mob365-customizable .ops-kpis,.mob365-customizable .cafe-kpi-strip,.mob365-customizable .cafe-flowbar,.mob365-customizable .warehouse-flow-nav{flex-shrink:0}

/* =========================================================
   MOB365 Layout Studio V2 — reliable sizing/order/viewport
   2026-08-07
   ========================================================= */
.mob365-customizable{--mob365-font-scale:1;--mob-accent:#0b8f83;--mob-header:#0d2d4f;--mob-radius:12px}
.mob365-customizable.mob365-fit{height:100dvh!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
.mob365-customizable:not(.mob365-fit){height:auto!important;min-height:100vh!important;overflow:visible!important}
.mob365-customizable.mob365-fit #cafeWorkspace,
.mob365-customizable.mob365-fit #pharmacyWorkspace,
.mob365-customizable.mob365-fit #warehouseWorkspace,
.mob365-customizable.mob365-fit #restaurantWorkspace{flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:hidden!important}

.mob365-grid3{display:grid!important;gap:0!important;width:100%!important;max-width:none!important;min-width:0!important;align-items:stretch!important}
.mob365-grid3>[data-mob-panel]{min-width:0!important;max-width:none!important;width:auto!important;min-height:0!important;margin:0!important;align-self:stretch!important}
.mob365-grid3>.mob365-splitter{min-width:8px!important;width:8px!important;height:100%!important;position:relative!important;cursor:col-resize!important;touch-action:none!important;user-select:none!important;z-index:30!important;background:transparent!important}
.mob365-grid3>.mob365-splitter:after{content:"";position:absolute;top:10px;bottom:10px;left:3px;width:2px;border-radius:99px;background:#cad7e2;transition:.14s ease}
.mob365-grid3>.mob365-splitter:hover:after,.mob365-grid3>.mob365-splitter.dragging:after{left:2px;width:4px;background:var(--mob-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--mob-accent) 12%,transparent)}
body.mob365-resizing{cursor:col-resize!important;user-select:none!important}

/* Cafe built-in splitters become Layout Studio splitters */
.cafe-panel-splitter.mob365-splitter{display:block!important;min-width:8px!important;width:8px!important;background:transparent!important}
.cafe-panel-splitter.mob365-splitter>span{display:none!important}

/* Keep critical controls in view while content scrolls inside panels */
.mob365-fit .cafe-cart-panel,.mob365-fit .pharmacy-cart,.mob365-fit .warehouse-workflow,.mob365-fit .m3-order{display:flex!important;flex-direction:column!important;min-height:0!important}
.mob365-fit .cafe-cart-list,.mob365-fit .pharmacy-cart-lines,.mob365-fit .workflow-body,.mob365-fit .m3-lines{flex:1 1 auto!important;min-height:0!important;overflow:auto!important}
.mob365-fit .cafe-cart-summary,.mob365-fit .cafe-total,.mob365-fit .cafe-payment-grid,.mob365-fit .cafe-integration-note,
.mob365-fit .clinical-audit,.mob365-fit .cart-total,.mob365-fit .cart-actions,
.mob365-fit .workflow-actions,.mob365-fit .m3-total,.mob365-fit .m3-order-buttons{flex:0 0 auto!important}

/* Pharmacy: readable cards at every panel width */
.pharmacy-catalog{container-type:inline-size}
.mob365-customizable .pharmacy-product-list{display:grid!important;grid-template-columns:repeat(var(--mob-product-cols-pharmacy,1),minmax(0,1fr))!important;gap:8px!important;padding:9px!important;align-content:start!important;background:#f6f9fb!important}
.mob365-customizable .pharmacy-product{min-height:92px!important;border:1px solid #dbe4ec!important;border-radius:var(--mob-radius)!important;background:#fff!important;padding:10px!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;grid-template-rows:auto!important;gap:10px!important;align-items:center!important;overflow:hidden!important;box-shadow:0 2px 8px rgba(15,35,58,.035)!important}
.mob365-customizable .pharmacy-product .medicine-icon{grid-column:1!important;grid-row:1!important;width:42px!important;height:42px!important}
.mob365-customizable .pharmacy-product .medicine-info{grid-column:2!important;grid-row:1!important;min-width:0!important}
.mob365-customizable .pharmacy-product .medicine-info strong{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;white-space:normal!important;overflow:hidden!important;line-height:1.25!important;font-size:12px!important;min-height:30px!important}
.mob365-customizable .pharmacy-product .medicine-info small{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:9px!important}
.mob365-customizable .pharmacy-product .medicine-stock{grid-column:3!important;grid-row:1!important;display:grid!important;gap:4px!important;justify-items:end!important;align-self:center!important;text-align:right!important;border:0!important;padding:0!important;min-width:74px!important}
.mob365-customizable .pharmacy-product .medicine-stock b{font-size:13px!important;color:#08776b!important;white-space:nowrap!important}
.mob365-customizable .pharmacy-product .medicine-stock small{font-size:8px!important;color:#738698!important;white-space:nowrap!important;margin:0!important}
.mob365-customizable .pharmacy-product .medicine-flags{display:flex!important;gap:4px!important;flex-wrap:wrap!important;margin-top:5px!important}
@container (max-width:390px){.mob365-customizable .pharmacy-product{grid-template-columns:40px minmax(0,1fr)!important}.mob365-customizable .pharmacy-product .medicine-stock{grid-column:1/-1!important;grid-row:2!important;display:flex!important;justify-content:space-between!important;padding-top:7px!important;border-top:1px solid #edf1f5!important;min-width:0!important}}

/* Cafe: product names and order lines stay readable */
.mob365-customizable .cafe-product-grid{grid-template-columns:repeat(var(--mob-product-cols,4),minmax(150px,1fr))!important}
.mob365-customizable .cafe-product-tile{min-width:0!important;min-height:108px!important}
.mob365-customizable .cafe-product-copy{min-width:0!important}
.mob365-customizable .cafe-product-copy strong{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;white-space:normal!important;overflow:hidden!important;line-height:1.22!important}
.mob365-customizable .cafe-cart-line{grid-template-columns:minmax(0,1fr) auto!important}
.mob365-customizable .cafe-cart-copy{min-width:0!important}.mob365-customizable .cafe-cart-copy strong{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;white-space:normal!important;overflow:hidden!important}

/* Restaurant: use selected card count and keep order actions visible */
.mob365-customizable .m3-products{grid-template-columns:repeat(var(--mob-product-cols-restaurant,4),minmax(145px,1fr))!important}
.mob365-customizable .m3-product strong{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;white-space:normal!important;overflow:hidden!important}

/* Warehouse: center panel must always consume the flexible workspace track */
.mob365-customizable .warehouse-workspace{width:100%!important;max-width:none!important;margin:0!important}
.mob365-customizable .warehouse-lines{min-width:0!important;width:auto!important}
.mob365-customizable .warehouse-table-wrap{width:100%!important;min-width:0!important}
.mob365-customizable .warehouse-table{table-layout:auto!important;min-width:620px!important}
.mob365-customizable .warehouse-table td:nth-child(2){min-width:240px!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.35!important}
.mob365-customizable .warehouse-doc strong{white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.25!important}

/* Header / typography scales */
.mob365-customizable{font-size:calc(1em * var(--mob365-font-scale))!important}
.mob365-density-compact .ops-kpis,.mob365-density-compact .cafe-kpi-strip{padding-top:7px!important;padding-bottom:7px!important}
.mob365-density-compact .ops-kpis article,.mob365-density-compact .cafe-kpi{padding-top:8px!important;padding-bottom:8px!important}
.mob365-density-spacious .ops-panel-head,.mob365-density-spacious .cafe-panel-header,.mob365-density-spacious .m3-panel-head{min-height:70px!important}

/* Studio controls */
.mob365-toggle-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid #edf1f4}
.mob365-toggle-row label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:750;color:#52677a;cursor:pointer}
.mob365-toggle-row input{accent-color:#0b8f83}
.mob365-preset-grid{display:flex;gap:8px;flex-wrap:wrap}
.mob365-studio-field>select[data-f="orderText"]{width:100%;height:42px}

@media(max-width:1250px){
  .mob365-customizable .pharmacy-product-list{grid-template-columns:1fr!important}
  .mob365-customizable .cafe-product-grid{grid-template-columns:repeat(min(var(--mob-product-cols,4),3),minmax(150px,1fr))!important}
}
@media(max-width:1050px){
  .mob365-grid3{grid-template-columns:1fr!important;grid-template-rows:auto!important;height:auto!important;overflow:visible!important}
  .mob365-grid3>[data-mob-panel]{grid-column:1!important;grid-row:auto!important;display:flex!important;min-height:420px!important}
  .mob365-grid3>.mob365-splitter{display:none!important}
  .mob365-customizable.mob365-fit{height:auto!important;min-height:100vh!important;overflow:auto!important}
}