/* =========================================================
   EP CUBE shared header
   2026-08-29 v5
   - Exact supplied EP CUBE logo asset
   - Configurable quick action icons
   - Self-contained WebSocket communication indicator
   ========================================================= */

:root{
  --epcube-header-icon-color:#64f7ef;
  --epcube-header-icon-rgb:100,247,239;
  --epcube-header-cyan:var(--epcube-header-icon-color);
  --epcube-header-cyan-soft:rgba(var(--epcube-header-icon-rgb),.22);
  --epcube-header-text:#eafcff;
  --epcube-header-muted:#9bcbd6;
  --epcube-header-warn:#ffbf66;
  --epcube-header-error:#ff7d72;
  --epcube-header-tool-bg:rgba(3,27,38,.24);
  --epcube-header-tool-border:rgba(var(--epcube-header-icon-rgb),.16);
  --epcube-action-tooltip-font-size:12px;
  --epcube-comm-tooltip-font-size:11px;
}

html body .topbar.epcube-shared-header{
  box-sizing:border-box;
  gap:0;
  overflow:visible;
}

html body .topbar.epcube-shared-header .brand.epcube-header-brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
  width:auto!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  color:inherit!important;
  text-decoration:none!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-shadow:none!important;
  font-size:0!important;
}

.epcube-header-logo{
  display:block;
  width:190px;
  height:auto;
  max-height:42px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.08));
  user-select:none;
  -webkit-user-drag:none;
}

.epcube-header-tools{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:13px;
  min-width:0;
  height:100%;
}

.epcube-header-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

.epcube-header-action,
.epcube-comm{
  position:relative;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--epcube-header-tool-border);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(12,57,76,.24),rgba(3,24,35,.22));
  color:var(--epcube-header-icon-color);
  text-decoration:none;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:color .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
  -webkit-tap-highlight-color:transparent;
}

.epcube-header-action:hover,
.epcube-header-action:focus-visible{
  color:var(--epcube-header-cyan);
  border-color:rgba(var(--epcube-header-icon-rgb),.48);
  background:linear-gradient(180deg,rgba(var(--epcube-header-icon-rgb),.16),rgba(var(--epcube-header-icon-rgb),.065));
  box-shadow:0 0 16px rgba(var(--epcube-header-icon-rgb),.14),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(-1px);
}

.epcube-header-action.is-active{
  color:var(--epcube-header-cyan);
  border-color:rgba(var(--epcube-header-icon-rgb),.34);
  background:rgba(var(--epcube-header-icon-rgb),.09);
}

.epcube-header-action svg,
.epcube-comm svg{
  width:22px;
  height:22px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.epcube-header-custom-icon{width:20px;height:20px;object-fit:contain;display:block}
.epcube-header-text-icon{font-size:18px;font-weight:800;line-height:1;color:currentColor}

.epcube-action-tooltip,
.epcube-comm-tooltip{
  position:absolute;
  top:calc(100% + 11px);
  right:50%;
  z-index:5000;
  transform:translate(50%,-4px);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  color:#effcff;
  background:rgba(5,20,29,.97);
  border:1px solid rgba(var(--epcube-header-icon-rgb),.28);
  border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 22px rgba(var(--epcube-header-icon-rgb),.08);
  transition:opacity .14s ease,transform .14s ease,visibility .14s step-end;
}

.epcube-action-tooltip{
  width:max-content;
  max-width:min(280px,80vw);
  padding:8px 11px;
  font-size:var(--epcube-action-tooltip-font-size);
  font-weight:720;
  line-height:1.35;
  letter-spacing:.02em;
  white-space:nowrap;
}

.epcube-header-action:hover .epcube-action-tooltip,
.epcube-header-action:focus-visible .epcube-action-tooltip,
.epcube-comm:hover .epcube-comm-tooltip,
.epcube-comm:focus-visible .epcube-comm-tooltip{
  visibility:visible;
  opacity:1;
  transform:translate(50%,0);
  transition:opacity .14s ease,transform .14s ease,visibility 0s;
}

.epcube-comm{
  width:43px;
  height:43px;
  border-radius:50%;
  cursor:default;
  color:var(--epcube-header-muted);
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  flex:0 0 auto;
}

.epcube-comm::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  border:1px solid transparent;
  pointer-events:none;
}

.epcube-comm-icon{
  width:31px!important;
  height:31px!important;
  stroke-width:2!important;
  filter:drop-shadow(0 0 4px currentColor);
}

.epcube-comm .wifi-slash{opacity:0}
.epcube-comm .wifi-dot{fill:currentColor;stroke:none}
.epcube-comm .wifi-arc{transform-origin:12px 18px}

.epcube-comm[data-state="connecting"],
.epcube-comm[data-state="waiting"]{
  color:var(--epcube-header-cyan);
}
.epcube-comm[data-state="reconnecting"]{
  color:var(--epcube-header-warn);
}

.epcube-comm[data-state="connecting"] .wifi-arc,
.epcube-comm[data-state="reconnecting"] .wifi-arc,
.epcube-comm[data-state="waiting"] .wifi-arc{
  animation:epcubeWifiBuild 1.35s ease-in-out infinite;
}
.epcube-comm[data-state="connecting"] .wifi-arc.arc-2,
.epcube-comm[data-state="reconnecting"] .wifi-arc.arc-2,
.epcube-comm[data-state="waiting"] .wifi-arc.arc-2{animation-delay:.13s}
.epcube-comm[data-state="connecting"] .wifi-arc.arc-3,
.epcube-comm[data-state="reconnecting"] .wifi-arc.arc-3,
.epcube-comm[data-state="waiting"] .wifi-arc.arc-3{animation-delay:.26s}

.epcube-comm[data-state="online"]{
  color:var(--epcube-header-cyan);
}
.epcube-comm[data-state="online"]::before{
  border-color:rgba(var(--epcube-header-icon-rgb),.08);
  box-shadow:0 0 13px rgba(var(--epcube-header-icon-rgb),.09);
}

.epcube-comm[data-state="stale"]{
  color:var(--epcube-header-warn);
}
.epcube-comm[data-state="stale"] .wifi-arc{
  animation:epcubeWifiStale 2s ease-in-out infinite;
}

.epcube-comm[data-state="offline"],
.epcube-comm[data-state="error"]{
  color:var(--epcube-header-error);
}
.epcube-comm[data-state="offline"] .wifi-arc,
.epcube-comm[data-state="error"] .wifi-arc{opacity:.32}
.epcube-comm[data-state="offline"] .wifi-slash,
.epcube-comm[data-state="error"] .wifi-slash{opacity:1}

.epcube-comm.is-updated::after{
  content:"";
  position:absolute;
  right:2px;
  top:2px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--epcube-header-icon-color);
  box-shadow:0 0 0 0 rgba(var(--epcube-header-icon-rgb),.72),0 0 10px rgba(var(--epcube-header-icon-rgb),.95);
  animation:epcubeUpdatePulse .9s ease-out both;
}
.epcube-comm.is-updated .epcube-comm-icon{
  animation:epcubeWifiReceived .72s ease-out both;
}

.epcube-comm-tooltip{
  right:0;
  transform:translate(0,-4px);
  width:290px;
  padding:11px 13px 12px;
  text-align:left;
  white-space:normal;
  font-size:var(--epcube-comm-tooltip-font-size);
}
.epcube-comm:hover .epcube-comm-tooltip,
.epcube-comm:focus-visible .epcube-comm-tooltip{
  transform:translate(0,0);
}
.epcube-comm-tooltip-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#f3ffff;
  font-size:1.18em;
  font-weight:850;
  letter-spacing:.02em;
  margin-bottom:8px;
}
.epcube-comm-tooltip-badge{
  color:var(--epcube-header-cyan);
  font-size:1em;
  font-weight:850;
}
.epcube-comm-tooltip-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5px 11px;
  color:#d9f3f7;
  font-size:1em;
  line-height:1.35;
}
.epcube-comm-tooltip-grid .k{color:#89b4bf}
.epcube-comm-tooltip-grid .v{text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

html body .topbar.epcube-shared-header .datetime.epcube-header-datetime{
  margin:0!important;
  color:#e9fbff!important;
  font-size:25px!important;
  font-weight:650!important;
  letter-spacing:.035em!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  opacity:.96!important;
  font-variant-numeric:tabular-nums!important;
  flex:0 0 auto!important;
}

.epcube-header-compat{
  display:none!important;
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}

/* Removed legacy HA-status strip: desktop scroll areas now start directly below the 78px header. */
@media(min-width:761px){
  html body .dashboard > .content{
    top:78px!important;
  }
}

@keyframes epcubeWifiBuild{
  0%,18%{opacity:.18;transform:scale(.92)}
  42%,72%{opacity:1;transform:scale(1)}
  100%{opacity:.28;transform:scale(.95)}
}
@keyframes epcubeWifiStale{0%,100%{opacity:.48}50%{opacity:1}}
@keyframes epcubeUpdatePulse{
  0%{transform:scale(.55);opacity:0;box-shadow:0 0 0 0 rgba(var(--epcube-header-icon-rgb),.78),0 0 10px rgba(var(--epcube-header-icon-rgb),.95)}
  22%{transform:scale(1);opacity:1}
  100%{transform:scale(.9);opacity:0;box-shadow:0 0 0 10px rgba(var(--epcube-header-icon-rgb),0),0 0 16px rgba(var(--epcube-header-icon-rgb),0)}
}
@keyframes epcubeWifiReceived{0%{transform:scale(.94)}35%{transform:scale(1.12)}100%{transform:scale(1)}}

@media(max-width:900px){
  .epcube-header-logo{width:168px;max-height:38px}
  .epcube-header-tools{gap:9px}
  .epcube-header-actions{gap:5px}
  .epcube-header-action{width:34px;height:34px}
  .epcube-header-action svg{width:20px;height:20px}
  html body .topbar.epcube-shared-header .datetime.epcube-header-datetime{font-size:20px!important}
}

@media(max-width:760px){
  html body .topbar.epcube-shared-header{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-rows:1fr 1fr!important;
    column-gap:10px!important;
    align-items:center!important;
    height:72px!important;
  }
  html body .topbar.epcube-shared-header .brand.epcube-header-brand{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    justify-self:start!important;
    align-self:center!important;
  }
  .epcube-header-logo{width:135px;max-height:34px}

  /* Mobile: newly added quick-link / communication icons are intentionally hidden. */
  .epcube-header-actions,
  .epcube-comm{
    display:none!important;
  }
  .epcube-header-tools{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    width:100%;
    height:100%;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    margin:0!important;
    min-width:0!important;
  }
  html body .topbar.epcube-shared-header .datetime.epcube-header-datetime{
    display:block!important;
    align-self:center!important;
    justify-self:end!important;
    margin:0!important;
    color:#8ff0b2!important;
    font-size:12px!important;
    font-weight:700!important;
    letter-spacing:.02em!important;
    line-height:1.15!important;
    text-align:right!important;
    max-width:100%!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  /* The slide-menu adds a first grid column on mobile; keep tools/date in the right column. */
  body.epcube-menu-ready .dashboard .topbar.epcube-shared-header .epcube-header-tools{
    grid-column:3!important;
    grid-row:1 / span 2!important;
  }
}

@media(max-width:420px){
  html body .topbar.epcube-shared-header{column-gap:7px!important;padding-left:14px!important;padding-right:12px!important}
  .epcube-header-logo{width:118px;max-height:31px}
  html body .topbar.epcube-shared-header .datetime.epcube-header-datetime{font-size:11px!important}
}

@media(prefers-reduced-motion:reduce){
  .epcube-comm *,
  .epcube-comm::after{
    animation:none!important;
    transition:none!important;
  }
}

/* =========================================================
   Mobile header layout v3
   - Menu trigger / logo / date each own a dedicated column
   - Quick-link and Wi-Fi indicators remain hidden on mobile
   - Date is sized for phone readability without wrapping
   ========================================================= */
@media(max-width:760px){
  html body .topbar.epcube-shared-header{
    height:78px!important;
    min-height:78px!important;
    padding-left:14px!important;
    padding-right:16px!important;
    column-gap:8px!important;
  }

  body.epcube-menu-ready .dashboard .topbar.epcube-shared-header{
    display:grid!important;
    grid-template-columns:48px minmax(118px,35vw) minmax(0,1fr)!important;
    grid-template-rows:78px!important;
    align-items:center!important;
    column-gap:8px!important;
    padding-left:14px!important;
    padding-right:16px!important;
  }

  body.epcube-menu-ready .dashboard .topbar.epcube-shared-header .epcube-menu-trigger{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:start!important;
    width:44px!important;
    height:44px!important;
    margin:0!important;
  }

  html body .topbar.epcube-shared-header .brand.epcube-header-brand,
  body.epcube-menu-ready .dashboard .topbar.epcube-shared-header .brand.epcube-header-brand{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:start!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  .epcube-header-logo{
    width:clamp(118px,34vw,145px)!important;
    max-width:100%!important;
    max-height:36px!important;
  }

  .epcube-header-actions,
  .epcube-comm{
    display:none!important;
  }

  .epcube-header-tools,
  body.epcube-menu-ready .dashboard .topbar.epcube-shared-header .epcube-header-tools{
    grid-column:3!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    margin:0!important;
    overflow:visible!important;
  }

  html body .topbar.epcube-shared-header .datetime.epcube-header-datetime,
  body.epcube-menu-ready .dashboard .topbar.epcube-shared-header .datetime.epcube-header-datetime{
    display:block!important;
    margin:0!important;
    min-width:0!important;
    max-width:100%!important;
    color:#8ff0b2!important;
    font-size:clamp(13px,3.65vw,16px)!important;
    font-weight:780!important;
    letter-spacing:.012em!important;
    line-height:1!important;
    text-align:right!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-variant-numeric:tabular-nums!important;
    text-shadow:0 0 9px rgba(143,240,178,.12)!important;
  }
}

@media(max-width:380px){
  body.epcube-menu-ready .dashboard .topbar.epcube-shared-header{
    grid-template-columns:46px minmax(108px,33vw) minmax(0,1fr)!important;
    column-gap:6px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body.epcube-menu-ready .dashboard .topbar.epcube-shared-header .epcube-menu-trigger{
    width:42px!important;
    height:42px!important;
  }
  .epcube-header-logo{width:clamp(108px,32vw,122px)!important;max-height:33px!important}
  html body .topbar.epcube-shared-header .datetime.epcube-header-datetime,
  body.epcube-menu-ready .dashboard .topbar.epcube-shared-header .datetime.epcube-header-datetime{
    font-size:12.5px!important;
  }
}