/* v29: compact masthead and trustworthy red offline indicator.
 * Additive layer for v28; do not modify app.css, app.js or existing form markup.
 */
body.vs27 .vs27-masthead { overflow:visible!important; }
body.vs27 .vs27-brand .connection-status.online,
body.vs27 .vs27-brand .connection-status:not(.offline):not(.online) {
  background:#e6f7ea!important;color:#096533!important;
  border:1px solid #c2eacb!important;
}
body.vs27 .vs27-brand .connection-status.offline {
  background:#fff0f0!important;color:#bd171e!important;
  border:1px solid #ffb4b9!important;
}
body.vs27 .vs27-brand .connection-status.offline::before {
  background:#dd162a!important;
  box-shadow:0 0 0 2px #ffd5d9!important;
}
body.vs27 .vs27-brand .connection-status.online::before {
  background:#16873f!important;
}
/* Header uses a true layout grid; buttons never overlap the photos. */
@media screen and (max-width:900px) {
 body.vs27 .vs27-masthead { padding:0 12px!important; }
 body.vs27 .vs27-header-inner {
   display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
   grid-template-rows:auto auto!important;align-items:center!important;
   column-gap:8px!important;row-gap:6px!important;
   min-height:0!important;padding:9px 0 8px!important;
   max-width:100%!important;
 }
 body.vs27 .vs27-brand {
   grid-column:1!important;grid-row:1!important;
   min-width:0!important;max-width:100%!important;
   gap:7px!important;justify-content:flex-start!important;
 }
 body.vs27 .vs27-brand-copy { min-width:0!important;max-width:100%!important;align-items:flex-start!important; }
 body.vs27 .vs27-brand strong { font-size:clamp(13px,3.6vw,20px)!important;line-height:1.22!important;letter-spacing:0!important; }
 body.vs27 .vs27-brand small { font-size:clamp(10px,2.6vw,12px)!important;line-height:1.2!important; }
 body.vs27 .vs27-brand .connection-status { margin:3px 0 0!important;white-space:nowrap!important;line-height:1.2!important; }
 body.vs27 .vs27-leaders {
   grid-column:2!important;grid-row:1!important;align-items:center!important;
   justify-content:flex-end!important;gap:4px!important;
   min-width:0!important;margin:0!important;
 }
 body.vs27 .vs27-leaders img { flex:0 0 auto!important;object-fit:cover!important;object-position:center 15%!important; }
 body.vs27 .vs27-header-tools {
   grid-column:1/-1!important;grid-row:2!important;
   display:flex!important;align-items:center!important;
   justify-content:flex-start!important;flex-wrap:nowrap!important;
   min-width:0!important;width:100%!important;
   padding:6px 0 0!important;margin:0!important;gap:7px!important;
   border-top:1px solid #ffffff4a!important;
 }
 body.vs27 .vs27-header-tools .masthead-actions:not([hidden]) {
   margin-left:auto!important;display:flex!important;align-items:center!important;
   gap:6px!important;
 }
 body.vs27 .vs27-header-tools > .icon-button,
 body.vs27 .vs27-header-tools .masthead-actions > button {
   width:38px!important;height:36px!important;min-width:38px!important;min-height:36px!important;
   padding:5px!important;border-radius:9px!important;
 }
 body.vs27 .vs27-header-tools .masthead-actions #logout {
   width:auto!important;min-width:68px!important;padding:5px 10px!important;
 }
 body.vs27 .vs27-header-tools .app-top-actions { flex:0 0 auto!important; }
 body.vs27 .vs27-header-tools .app-top-actions:has(#topInstall[hidden]) { display:none!important; }
 body.vs27 .vs27-header-tools .masthead-actions[hidden],
 body.vs27 .vs27-header-tools [hidden] { display:none!important; }
}
@media screen and (max-width:600px) {
 body.vs27 .vs27-masthead{padding:0 10px!important;}
 body.vs27 .vs27-header-inner{padding:8px 0 7px!important;row-gap:5px!important;column-gap:5px!important;}
 body.vs27 .vs27-brand{gap:6px!important;}
 body.vs27 .vs27-brand img{width:39px!important;height:43px!important;padding:3px!important;flex:0 0 39px!important;}
 body.vs27 .vs27-brand strong{font-size:clamp(12px,3.9vw,16px)!important;}
 body.vs27 .vs27-brand small{font-size:clamp(9px,2.6vw,11px)!important;}
 body.vs27 .vs27-brand .connection-status{font-size:9px!important;padding:2px 7px!important;}
 body.vs27 .vs27-leaders{gap:3px!important;}
 body.vs27 .vs27-leaders img{width:clamp(24px,7.2vw,32px)!important;height:clamp(34px,10vw,42px)!important;border-radius:7px!important;}
 body.vs27 .vs27-header-tools{gap:5px!important;padding-top:5px!important;}
 body.vs27 .vs27-header-tools > .icon-button,
 body.vs27 .vs27-header-tools .masthead-actions > button {width:35px!important;height:34px!important;min-width:35px!important;min-height:34px!important;padding:5px!important;border-radius:8px!important;}
 body.vs27 .vs27-header-tools #logout{font-size:11px!important;width:auto!important;min-width:64px!important;padding:5px 8px!important;}
 body.vs27 .vs27-header-tools .ui-icon{width:19px!important;height:19px!important;}
}
@media screen and (max-width:350px) {
 body.vs27 .vs27-masthead{padding:0 8px!important;}
 body.vs27 .vs27-brand img{width:35px!important;height:39px!important;flex-basis:35px!important;}
 body.vs27 .vs27-brand strong{font-size:12px!important;}
 body.vs27 .vs27-brand small{font-size:9px!important;}
 body.vs27 .vs27-leaders img{width:23px!important;height:33px!important;}
 body.vs27 .vs27-header-tools .masthead-actions:not([hidden]){gap:4px!important;}
}
/* Preserve original v28 non-fixed bottom navigation and photo popup. */
@media print { body.vs27 .vs27-masthead { display:none!important; } }