/* MOB365 POS — FINAL COMPACT HEADER / ATK
   Unified across Retail, Restaurant, Cafe, Pharmacy, Warehouse.
   Visual/header markup only; no fiscal/offline/business logic changes. */

:root{
  --mob365-hdr-h:72px;
  --mob365-hdr-bg:linear-gradient(100deg,#083a5a 0%,#075c6f 52%,#087f77 100%);
  --mob365-hdr-text:#fff;
  --mob365-hdr-muted:#a8eee7;
}

.mob365-unified-header{
  position:relative!important;
  z-index:50!important;
  width:100%!important;
  height:var(--mob365-hdr-h)!important;
  min-height:var(--mob365-hdr-h)!important;
  padding:8px 14px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:16px!important;
  background:var(--mob365-hdr-bg)!important;
  color:var(--mob365-hdr-text)!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 5px 15px rgba(3,34,52,.16)!important;
  overflow:hidden!important;
}

.mob365-header-left{
  grid-column:1!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  overflow:hidden!important;
}
.mob365-module-lockup{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  min-width:max-content!important;
}
.mob365-module-icon{
  width:44px!important;height:44px!important;flex:0 0 44px!important;
  display:grid!important;place-items:center!important;
  border:1px solid rgba(255,255,255,.30)!important;
  border-radius:12px!important;background:rgba(255,255,255,.07)!important;
  color:#d6fffb!important;font-size:20px!important;line-height:1!important;font-weight:900!important;
}
.mob365-module-copy{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important}
.mob365-module-copy small{color:var(--mob365-hdr-muted)!important;font-size:7px!important;line-height:1!important;font-weight:950!important;letter-spacing:.15em!important;white-space:nowrap!important}
.mob365-module-copy strong{margin-top:5px!important;color:#fff!important;font-size:16px!important;line-height:1!important;font-weight:950!important;letter-spacing:-.015em!important;white-space:nowrap!important}

.mob365-active-context{
  flex:0 0 auto!important;min-width:92px!important;padding-left:10px!important;
  border-left:1px solid rgba(255,255,255,.20)!important;
}
.mob365-active-context span{display:block!important;color:var(--mob365-hdr-muted)!important;font-size:7px!important;font-weight:950!important;letter-spacing:.11em!important;white-space:nowrap!important}
.mob365-active-context strong{display:block!important;margin-top:4px!important;color:#fff!important;font-size:11px!important;font-weight:950!important;white-space:nowrap!important}

.mob365-header-metrics{min-width:0!important;display:flex!important;align-items:center!important;gap:5px!important;overflow:hidden!important}
.mob365-metric{
  appearance:none!important;-webkit-appearance:none!important;
  flex:0 0 auto!important;width:58px!important;height:44px!important;min-height:44px!important;
  padding:5px 8px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;
  border:1px solid rgba(255,255,255,.18)!important;border-radius:10px!important;background:rgba(255,255,255,.055)!important;color:#fff!important;
  box-shadow:none!important;text-align:left!important;cursor:default!important;
}
button.mob365-metric{cursor:pointer!important}
button.mob365-metric:hover,button.mob365-metric.selected{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.35)!important;transform:none!important}
.mob365-metric.wide{width:auto!important;min-width:72px!important}
.mob365-metric span{color:#ccebed!important;font-size:6.7px!important;line-height:1!important;font-weight:900!important;white-space:nowrap!important}
.mob365-metric strong{margin-top:4px!important;color:#fff!important;font-size:11px!important;line-height:1!important;font-weight:950!important;white-space:nowrap!important}

/* IMPORTANT: brand lives in the middle grid column. It is NOT absolute, so it can never overlap the buttons. */
.mob365-header-brand{
  grid-column:2!important;
  position:static!important;
  transform:none!important;
  z-index:auto!important;
  justify-self:center!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  min-width:170px!important;max-width:210px!important;color:#fff!important;pointer-events:none!important;user-select:none!important;white-space:nowrap!important;
}
.mob365-header-logo{
  width:42px!important;height:42px!important;flex:0 0 42px!important;display:grid!important;place-items:center!important;
  padding:4px!important;border-radius:11px!important;background:#fff!important;border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 4px 12px rgba(0,27,42,.18)!important;
}
.mob365-header-logo img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
.mob365-header-brand>span:last-child{display:flex!important;flex-direction:column!important;align-items:flex-start!important}
.mob365-header-brand strong{color:#fff!important;font-size:22px!important;line-height:.94!important;font-weight:950!important;letter-spacing:.02em!important}
.mob365-header-brand small{margin-top:5px!important;color:#9fe9e1!important;font-size:8px!important;line-height:1!important;font-weight:900!important;letter-spacing:.13em!important}

.mob365-header-actions{
  grid-column:3!important;
  min-width:0!important;
  justify-self:end!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;
  overflow:hidden!important;white-space:nowrap!important;
}
.mob365-header-actions button{
  flex:0 0 auto!important;
  min-width:0!important;height:38px!important;min-height:38px!important;
  padding:0 11px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  border:1px solid rgba(255,255,255,.80)!important;border-radius:10px!important;
  background:#fff!important;color:#082f4c!important;box-shadow:0 3px 9px rgba(2,30,45,.10)!important;
  font:inherit!important;font-size:9px!important;line-height:1!important;font-weight:900!important;white-space:nowrap!important;cursor:pointer!important;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease!important;
}
.mob365-header-actions button:hover:not(:disabled){transform:translateY(-1px)!important;background:#f8fcff!important;box-shadow:0 6px 13px rgba(2,30,45,.16)!important}
.mob365-header-actions button:disabled{opacity:.55!important;cursor:not-allowed!important}
.mob365-header-actions button.danger-soft{color:#a32a2a!important;background:#fff8f8!important;border-color:#ffd1d1!important}
.mob365-action-icon{display:inline-grid!important;place-items:center!important;min-width:13px!important;font-size:13px!important;line-height:1!important;font-weight:950!important;color:#0a5570!important}
.mob365-header-actions .danger-soft .mob365-action-icon{color:#a32a2a!important}

/* MOB365 FINAL: Personalizo is intentionally available once per module. */
.mob365-unified-header .mob365-layout-launcher{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.restaurant-commandbar,.cafe-commandbar,.ops-topbar,.mob365-atk-ds-topbar{box-sizing:border-box}

/* 1920/1600-class workstations: preserve all buttons without collision. */
@media(max-width:1740px){
  .mob365-unified-header{padding-inline:10px!important;column-gap:10px!important}
  .mob365-module-icon{width:40px!important;height:40px!important;flex-basis:40px!important}
  .mob365-module-copy strong{font-size:15px!important}
  .mob365-active-context{min-width:82px!important;padding-left:8px!important}
  .mob365-metric{width:52px!important;padding-inline:6px!important}
  .mob365-metric.wide{min-width:66px!important}
  .mob365-header-brand{min-width:154px!important;max-width:175px!important;gap:6px!important}
  .mob365-header-logo{width:38px!important;height:38px!important;flex-basis:38px!important}
  .mob365-header-brand strong{font-size:19px!important}
  .mob365-header-actions{gap:4px!important}
  .mob365-header-actions button{height:36px!important;min-height:36px!important;padding-inline:8px!important;gap:4px!important;font-size:8px!important}
  .mob365-action-icon{font-size:11px!important;min-width:11px!important}
}

/* Normal laptop widths: reduce metrics before ever allowing overlap. */
@media(max-width:1450px){
  .mob365-active-context{display:none!important}
  .mob365-header-metrics .mob365-metric:nth-child(n+4){display:none!important}
  .mob365-header-brand>span:last-child{display:none!important}
  .mob365-header-brand{min-width:44px!important;max-width:44px!important}
  .mob365-header-actions button{padding-inline:7px!important}
}

@media(max-width:1180px){
  .mob365-unified-header{height:auto!important;min-height:70px!important;grid-template-columns:auto 1fr auto!important}
  .mob365-header-metrics{display:none!important}
  .mob365-header-brand{grid-column:2!important;min-width:42px!important;max-width:42px!important}
  .mob365-header-actions{max-width:58vw!important;overflow-x:auto!important;scrollbar-width:none!important}
  .mob365-header-actions::-webkit-scrollbar{display:none!important}
}

@media(max-width:760px){
  .mob365-unified-header{grid-template-columns:1fr auto!important;grid-template-rows:auto auto!important;row-gap:7px!important;padding:7px 8px!important}
  .mob365-header-left{grid-column:1!important;grid-row:1!important}
  .mob365-header-brand{grid-column:2!important;grid-row:1!important;justify-self:end!important}
  .mob365-header-actions{grid-column:1/-1!important;grid-row:2!important;justify-self:stretch!important;max-width:none!important;justify-content:flex-start!important;overflow-x:auto!important}
  .mob365-module-copy strong{font-size:14px!important}
  .mob365-header-actions button{height:34px!important;min-height:34px!important}
}