/* Shared POS header (pos, timetracker, performance).
   Logo is pinned to the upper-left, same spot/size as the admin sidebar brand
   (86px bar, logo = 74% of the bar). Date/time + shift info fill the middle,
   actions (back + profile) sit on the right. */
:root{ --pos-header-h:86px; }

header{
  background:linear-gradient(to right,#dff4fe,#eef3ff 55%,#fde8ea);
  border-bottom:3px solid #05aff2;
  position:sticky; top:0; z-index:40;
}
header .header-inner{
  max-width:none; margin:0;
  display:flex; align-items:center; gap:20px;
  height:var(--pos-header-h); padding:0 24px 0 22px;
}
header .brand{flex:0 0 auto; height:100%; display:flex; align-items:center;}
header .brand-logo{height:74%; width:auto; display:block;}

.header-info{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:nowrap;
}
.hi-chip{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.82); border:1px solid #c6d8ff; border-radius:14px;
  padding:7px 14px; white-space:nowrap; box-shadow:0 1px 2px rgba(13,13,13,.05);
}
.hi-chip i{font-size:18px; color:#0442bf; line-height:1; display:inline-flex;}
.hi-chip .hi-main{display:block; font-weight:700; font-size:15px; color:#0d0d0d; line-height:1.15; font-variant-numeric:tabular-nums;}
.hi-chip .hi-sub{display:block; font-size:11.5px; color:#6b7280; line-height:1.2; margin-top:1px;}
.hi-time i{color:#d90416;}
.hi-time .hi-main{font-size:18px; letter-spacing:.2px; color:#032f8a;}
.hi-shift i{color:#16a34a;}
.hi-dot{width:8px; height:8px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.18);}
.hi-dot.off{background:#9ea3ad; box-shadow:0 0 0 3px rgba(158,163,173,.2);}

.header-actions{flex:0 0 auto; display:flex; align-items:center; gap:14px; margin-left:auto;}
header .term-back{justify-self:auto;}

@media (max-width:1000px){ .hi-shift{display:none;} }
@media (max-width:760px){
  :root{ --pos-header-h:68px; }
  header .header-inner{gap:10px; padding:0 14px;}
  .hi-date{display:none;}
  .hi-chip{padding:5px 10px;}
  .hi-time .hi-main{font-size:15px;}
  .header-actions{gap:8px;}
  header .term-back{font-size:0;}   /* icon-only back button on phones */
  header .term-back i{font-size:22px;}
}
@media (max-width:480px){ .hi-time i{display:none;} }
@media print{ header{display:none !important;} }