/* ===== MOBILE LAYOUT FIXES ===== */

@media (max-width: 768px){

  html, body{
    width:100%;
    overflow-x:hidden;
  }

  *{
    box-sizing:border-box;
  }

  img, canvas{
    max-width:100%;
    height:auto;
  }

  body{
    padding:0 !important;
  }

  .wrap{
    padding:14px !important;
  }

  .grid{
    display:grid !important;
    grid-template-columns:repeat(12,1fr) !important;
    gap:12px !important;
  }

  .span12,
  .span8,
  .span6,
  .span4{
    grid-column:span 12 !important;
  }

  .top{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }

  .device-widget{
    flex-wrap:wrap !important;
  }

  .miniCard{
    width:100% !important;
    margin-left:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }

  .miniCard .kv{
    width:100% !important;
    justify-content:space-between !important;
  }

  .kv span,
  #meEmail,
  #meDevice,
  #stSub,
  #devName,
  #userEmail{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  select,
  input{
    width:100% !important;
  }

  .row button,
  #btnApply,
  #btnLogout,
  #btnAuth,
  #btnForgot{
    width:100% !important;
  }

  canvas{
    max-height:260px !important;
  }
}

@media (max-width:480px){
  canvas{
    max-height:220px !important;
  }
}


/* ===== FULL MODE MOBILE HEADER ===== */

@media (max-width:768px){

  body[data-view-mode="full"] .top{
    position:relative;
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    min-height:56px;
    gap:12px;
  }

  body[data-view-mode="full"] .viewSwitch{
    position:absolute;
    top:8px;
    right:12px;
    z-index:999;
    width:auto;
  }

  body[data-view-mode="full"] #btnViewToggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto !important;
    padding:6px 12px;
    font-size:12px;
    font-weight:600;
    border-radius:12px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    color:#eaf2ff;
  }

  body[data-view-mode="full"] .brand{
    padding-right:110px;
    max-width:calc(100% - 110px);
  }

  body[data-view-mode="full"] .status{
    width:100%;
  }

  body[data-view-mode="full"] .brand h1{
    font-size:16px;
    white-space:nowrap;
    margin:0;
  }

  body[data-view-mode="full"] .brand .sub{
    font-size:12px;
    white-space:nowrap;
  }

  /* НУЖНЫЙ ПОРЯДОК КАРТОЧЕК */
  body[data-view-mode="full"] #cardDevice{
    order:10 !important;
  }

  body[data-view-mode="full"] #cardTempChart{
    order:20 !important;
  }

  body[data-view-mode="full"] #cardControl{
    order:30 !important;
  }

  body[data-view-mode="full"] .card.span8{
    order:40 !important;
  }

  body[data-view-mode="full"] #cardPowerChart{
    order:50 !important;
  }

  body[data-view-mode="full"] #cardPressChart{
    order:60 !important;
  }

  /* фикс блока устройства */
  body[data-view-mode="full"] #cardDevice .titleRow{
    display:block !important;
  }

  body[data-view-mode="full"] #cardDevice .titleRow > div:first-child{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
    width:100% !important;
    margin-bottom:12px !important;
  }

  body[data-view-mode="full"] #cardDevice .titleRow > .row{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
    margin-top:0 !important;
  }

  body[data-view-mode="full"] #cardDevice #deviceSelect,
  body[data-view-mode="full"] #cardDevice #btnLogout{
    width:100% !important;
  }

  body[data-view-mode="full"] #cardDevice #devWidget{
    width:100% !important;
    justify-content:flex-start !important;
  }

  body[data-view-mode="full"] #cardDevice .miniCard{
    margin-top:12px !important;
  }

  body[data-view-mode="full"] #cardTempChart .kpiRow{
    grid-template-columns:repeat(2,1fr) !important;
    gap:14px !important;
  }
}


/* ===== SIMPLE MODE MOBILE ===== */

@media (max-width:768px){

  body[data-view-mode="simple"] .simpleShell{
    padding-top:calc(env(safe-area-inset-top) + 16px) !important;
    padding-bottom:calc(env(safe-area-inset-bottom) + 24px) !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  body[data-view-mode="simple"] .simpleAppBar{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:0 0 12px !important;
    margin-bottom:6px !important;
  }

  body[data-view-mode="simple"] .simpleAppBrand{
    display:flex !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:10px !important;
    align-items:center !important;
  }

  body[data-view-mode="simple"] .simpleAppLogo{
    width:34px !important;
    height:34px !important;
    display:block !important;
    object-fit:contain !important;
  }

  body[data-view-mode="simple"] .simpleAppTitle{
    font-size:16px !important;
  }

  body[data-view-mode="simple"] .simpleAppSub{
    font-size:12px !important;
  }

  body[data-view-mode="simple"] #btnModeToggle,
  body[data-view-mode="simple"] .simpleModeBtn{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    padding:0 !important;
    flex:0 0 44px !important;
  }

  body[data-view-mode="simple"] .simpleTop{
    min-height:24px;
    margin-bottom:2px;
  }

  body[data-view-mode="simple"] .simpleStatusCorner{
    top:14px !important;
    right:56px !important;
  }

  body[data-view-mode="simple"] .simpleStatusCorner .simpleStatusLine{
    font-size:14px !important;
  }

  body[data-view-mode="simple"] .simpleStatusCorner .simpleDot{
    width:10px !important;
    height:10px !important;
  }

  body[data-view-mode="simple"] .simpleCenter{
    min-height:auto;
    justify-content:flex-start;
    padding-top:10px;
  }

  body[data-view-mode="simple"] .simpleTemp{
    margin-top:40px;
    font-size:56px;
  }

  body[data-view-mode="simple"] .simpleState{
    margin-top:18px;
    font-size:18px;
  }

  body[data-view-mode="simple"] .simpleChartWrap{
    margin-top:40px;
  }

  body[data-view-mode="simple"] .simpleChartBox{
    height:150px;
  }

  body[data-view-mode="simple"] .simpleMetrics{
    margin-top:24px;
    gap:18px;
    justify-content:space-between;
  }

  body[data-view-mode="simple"] .simpleMetric{
    width:calc(50% - 9px);
    min-width:0;
  }

  body[data-view-mode="simple"] .simpleMetricValue{
    font-size:26px;
  }

  body[data-view-mode="simple"] .simpleMetricValue span{
    font-size:18px;
  }

  body[data-view-mode="simple"] .simpleMetricLabel{
    font-size:14px;
  }
}

@media (max-width:380px){

  body[data-view-mode="simple"] .simpleTemp{
    font-size:50px;
  }

  body[data-view-mode="simple"] .simpleChartBox{
    height:132px;
  }

  body[data-view-mode="simple"] .simpleState{
    font-size:17px;
  }

  body[data-view-mode="simple"] .simpleMetricValue{
    font-size:24px;
  }

  body[data-view-mode="simple"] .simpleStatusCorner{
    right:52px !important;
  }
}


/* ===== SMOOTH ANIMATIONS ===== */

.simpleShell,
.grid,
.top{
  transition:
    opacity .3s cubic-bezier(.4,0,.2,1),
    transform .3s cubic-bezier(.4,0,.2,1);
}

.modeHidden{
  opacity:0;
  transform:translateY(12px) scale(.985);
  pointer-events:none;
}

.modeVisible{
  opacity:1;
  transform:translateY(0) scale(1);
}


/* ===== SIMPLE MODE ANIMATIONS ===== */

.simpleTemp{
  animation:tempPop .45s cubic-bezier(.22,.61,.36,1);
}

.simpleChartWrap{
  animation:chartSlide .55s cubic-bezier(.22,.61,.36,1);
}

.simpleMetric{
  animation:metricFade .5s cubic-bezier(.22,.61,.36,1);
}

.simpleMetric:nth-child(1){animation-delay:.08s}
.simpleMetric:nth-child(2){animation-delay:.14s}
.simpleMetric:nth-child(3){animation-delay:.20s}

@keyframes tempPop{
  from{
    opacity:0;
    transform:scale(.92) translateY(10px);
  }
  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

@keyframes chartSlide{
  from{
    opacity:0;
    transform:translateY(22px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes metricFade{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* ===== ONLINE DOT ===== */

@keyframes onlinePulse{
  0%{
    transform:scale(1);
    box-shadow:var(--online-glow-soft);
  }
  50%{
    transform:scale(1.12);
    box-shadow:var(--online-glow-strong);
  }
  100%{
    transform:scale(1);
    box-shadow:var(--online-glow-soft);
  }
}

.simpleDot{
  animation:onlinePulse 2.4s ease-in-out infinite;
}


/* ===== TEMP BREATH ===== */

@keyframes tempBreath{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.02); }
  100%{ transform:scale(1); }
}

.simpleTemp{
  animation:tempBreath 4.5s ease-in-out infinite;
}


/* ===== TEMP GLOW STATES ===== */

.simpleTemp.temp-cold{ text-shadow:var(--temp-glow-cold); }
.simpleTemp.temp-normal{ text-shadow:var(--temp-glow-normal); }
.simpleTemp.temp-warm{ text-shadow:var(--temp-glow-warm); }
.simpleTemp.temp-hot{ text-shadow:var(--temp-glow-hot); }
.simpleTemp.temp-critical{ text-shadow:var(--temp-glow-critical); }

/* ===== DEMO BANNER ===== */

body:has(.demoBanner){
  --demo-banner-total:calc(env(safe-area-inset-top, 0px) + 34px);
}

.demoBanner{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  box-sizing:border-box;
  min-height:var(--demo-banner-total);
  padding:calc(4px + env(safe-area-inset-top, 0px)) 16px 4px;
  text-align:center;
  font-size:12px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:.04em;
  color:rgba(255,220,100,.92);
  background:rgba(10,16,28,.82);
  border-bottom:1px solid rgba(255,200,60,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

body:has(.demoBanner) .wrap{
  padding-top:calc(var(--demo-banner-total) + 14px) !important;
}

body:has(.demoBanner) .simpleShell{
  padding-top:calc(var(--demo-banner-total) + 16px) !important;
}

.demoExitLink{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  color:rgba(231,238,252,.75);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  white-space:nowrap;
}
.demoExitLink:hover{
  color:rgba(231,238,252,.95);
  background:rgba(255,255,255,.11);
}

/* ===== boiler-room hotspot safety ===== */

.sceneHotspot{
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  height:18px !important;
  min-height:18px !important;
  max-height:18px !important;
  padding:0 !important;
  display:block !important;
}