/* Nexware ERP v0.33.0 — Live UI Hotfix 1
   Fixes header grid placement and isolates each Utility Center tool into its own view. */

/* Header: keep company left, clock + Utilities in the centre, and actions on the right. */
.topbar{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
}
.topbar-left{grid-column:1;grid-row:1;justify-self:start;min-width:0}
.topbar-center{
  grid-column:2;grid-row:1;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  white-space:nowrap;
}
.topbar-center .topbar-live{grid-column:auto;grid-row:auto;justify-self:auto;width:auto;order:initial}
.utility-center-wrap{margin-left:0;flex:0 0 auto}
.top-actions{grid-column:3;grid-row:1;justify-self:end;margin-left:0;min-width:0;white-space:nowrap}

/* Utility Center: one selected tool only.  The earlier generic display:block rule
   overrode the HTML hidden state in some browsers. */
.utility-panel[hidden]{display:none!important}
.utility-panel.is-active{display:block}
.utility-panel:not(.is-active)[aria-hidden="true"]{display:none!important}

/* Keep each utility visually self-contained. */
.utility-drawer{overscroll-behavior:contain}
.utility-panel{min-width:0}

@media(max-width:1250px){
  .topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;height:auto;min-height:70px;padding-top:8px;padding-bottom:8px}
  .topbar-left{grid-column:1;grid-row:1}
  .top-actions{grid-column:2;grid-row:1}
  .topbar-center{grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:center;width:100%}
  .topbar-center .topbar-live{width:auto}
}

@media(max-width:760px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
  .topbar-left{grid-column:1;grid-row:1;min-width:0}
  .top-actions{grid-column:2;grid-row:1;margin-left:0}
  .topbar-center{grid-column:1/-1;grid-row:2;display:flex;justify-content:flex-start;width:100%;overflow:visible}
  .topbar-center .topbar-live{width:auto;max-width:calc(100% - 44px);overflow:hidden;text-overflow:ellipsis;justify-content:flex-start}
  .utility-menu{top:calc(100% + 8px)}
}

@media(max-width:680px){
  .topbar-center .topbar-live{display:none}
  .topbar-center{justify-content:flex-end}
}