body { font-family: Arial, sans-serif; margin: 0; background:#0e1422; color:#eaf2ff; }
body.dark{ background:#0e1422; color:#eaf2ff; } /* artık dark hep aktif gibi */
.page { display: none; padding: 20px; }
.active { display: block; }

#themeToggle{ position: fixed; top: 10px; left: 10px; background: #2078A0; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; z-index: 1000; }
body.dark #themeToggle{ background:#f0f0f0; color:#1e1e2f; }

.card strong{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.note-btn{ background:transparent; border:0; cursor:pointer; font-size:16px; }
.note-btn:hover{ filter:brightness(1.1); }
.note-badge{ font-size:12px; margin-left:4px; }

.del-btn{ background:transparent; border:0; cursor:pointer; font-size:16px; }
.del-btn:hover{ filter:brightness(1.1); }

.card{ position: relative; } /* zaten var; yoksa ekle */
.status-dot{
  position:absolute; top:8px; right:8px;
  width:12px; height:12px; border-radius:50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
  border:2px solid rgba(255,255,255,0.8);
}
.status-dot.green{ background:#28a745; }
.status-dot.red{ background:#dc3545; }


#sidebar { width: 260px; background: #D9EEF6; padding: 12px; height: 100vh; float: left; border-right: 1px solid #3A93B8; box-sizing: border-box; }
body.dark #sidebar{ background:#2a3550; border-color:#3d4b6b; }

#content { margin-left: 260px; padding: 20px; }

#dbTable th, #dbTable td {
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
}

#dbTable tr:nth-child(even) {
  background: #f9f9f9;
}

#dbTable tr:hover {
  background: #e6f0fa;
}


.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Value badge biraz daha neon */
.value-badge{
  background: rgba(80,140,255,.25);
  border: 1px solid rgba(80,140,255,.30);
  color:#eaf2ff;
}

.small { font-size: 12px; opacity: 0.8; }

.connection-status { position: fixed; bottom: 10px; right: 10px; padding: 5px 10px; border-radius: 4px; font-size: 12px; }
.connection-status.connected { background: #4CAF50; color: white; }
.connection-status.disconnected { background: #F44336; color: white; }
.connection-status.connecting { background: #FF9800; color: white; }

.panel { background:#fff; border:1px solid #3A93B8; border-radius:8px; padding:12px; margin-top:12px; }
body.dark .panel{ background:#1f2635; border-color:#3e4b6a; }

.controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.controls input, .controls button, .controls select {
  padding:6px 8px; border-radius:6px; border:1px solid #3A93B8; background:#fff;
}
body.dark .controls input, body.dark .controls select, body.dark .controls button{
  background:#1f2635; color:#eaeff7; border-color:#3e4b6a;
}
button.primary{ background:#2078A0; color:#fff; border:none; }
button.primary:hover{ filter:brightness(1.05); }

  .password-container{
    display:flex;
    align-items:center;
  }
  #togglePw{
    background:none;
    border:none;
    cursor:pointer;
    font-size:14px;
  }

.modal {
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.5);
    justify-content:center;
    align-items:center;
    z-index:2000;
  }
  .modal-content {
    background:#fff;
    padding:20px;
    border-radius:8px;
    min-width:300px;
  }
  .modal-content input {
    display:block;
    width:100%;
    margin-bottom:10px;
    padding:6px;
  }
  .modal-content button {
    padding:6px 12px;
    margin-right:5px;
  }

/* ---- Mobil uyumluluk ---- */
.mobile-only { display: none; }

/* Küçük ekran: 768px ve altı */
@media (max-width: 768px) {
  /* Yan menüyü off-canvas yap */
  #sidebar{
    position: fixed;
    top:0; left:-280px;
    width: 80%; max-width: 280px;
    height: 100vh;
    z-index: 2000;
    transition: left .25s ease;
  }
  body.sidebar-open #sidebar{ left:0; }

  /* İçerik sola kaymasın */
  #content{ margin-left:0; padding:12px; }

  /* Kart ızgarası: daha sıkı ve küçük min genişlik */
  .grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
  /* Çok dar ekranlarda tek kolon */
  /* (opsiyonel) @media (max-width:420px){ .grid{ grid-template-columns: 1fr; } } */

  /* Dokunmatik hedefleri büyüt */
  .controls input, .controls button, .controls select { padding:10px 12px; font-size:16px; width:100%; }
  .controls{ gap:6px; }

  /* Üst butonlar */
  #themeToggle{ top:8px; left:8px; }
  .mobile-only{
    display:inline-block;
    position: fixed;
    top: 8px; right: 8px;
    z-index: 2100;
    background:#2078A0; color:#fff; border:none; padding:8px 12px; border-radius:8px;
  }
  body.dark .mobile-only{ background:#1B6F96; }

  /* Bağlantı rozeti kenara */
  .connection-status{ right:8px; bottom:8px; }

  /* Paneller kompakt */
  .panel{ padding:10px; }

  /* Modal full genişlik */
  .modal-content{ width:92vw; max-width:480px; }

  /* Grafikler fazla uzamasın */
  canvas{ max-height:260px; }
}



/* Küçük UX cilası */
* { -webkit-tap-highlight-color: transparent; }

/* iOS güvenli çerçeve ve mobil viewport düzeltmeleri */
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
body { padding-top: max(0px, var(--safe-top)); padding-bottom: max(0px, var(--safe-bottom)); }

/* sidebar açıkken gövdeyi kaydırma */
body.noscroll { overflow: hidden; }

/* overlay (arka planı kapatmak için) */
.overlay{
  display:none; position:fixed; z-index:1990; inset:0;
  background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(1px);
}
body.sidebar-open .overlay{ display:block; }

/* mobilde sidebar üstte kalsın */
@media (max-width: 768px){
  #sidebar { z-index: 2001; }
  #themeToggle, .mobile-only { z-index: 2100; } /* butonlar overlay üstünde */
}

/* Grafik panelleri: canvas paneli doldursun */
#devicePanel .charts-grid .panel{
  display:flex;
  flex-direction:column;
  min-height: 420px;      /* istersen 380-480 arası ayarla */
}

/* === Device panel chart layout fix === */
#devicePanel .charts-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr; /* S1 büyük, S2-K1 daha küçük */
  gap:12px;
  align-items:stretch;
}

/* Panel düzeni */
#devicePanel .charts-grid .panel{
  display:flex;
  flex-direction:column;
}

/* Başlık boşlukları */
#devicePanel .panel h4{
  margin: 6px 0 10px;
}

/* Grafik kutusu: sabit yükseklik */
#devicePanel .panel .chart-box{
  position: relative;
  height: 380px;   /* ✅ büyütmek için burayı değiştir (örn 360) */
  width: 100%;
}

/* Canvas kutuyu doldursun */
#devicePanel .panel .chart-box canvas{
  width: 100% !important;
  height: 100% !important;
  display:block;
}

/* Mobilde alt alta */
@media (max-width: 1100px){
  #devicePanel .charts-grid{
    grid-template-columns: 1fr;
  }
  #devicePanel .panel .chart-box{
    height: 280px;
  }
}


@media (max-width:768px){
  .panel canvas{
    height:280px !important;
  }
}

/* === Device panel chart layout fix === */
#devicePanel .charts-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr; /* S1 büyük, S2-K1 daha küçük */
  gap:12px;
  align-items:stretch;
}


/* Başlıklar fazla boşluk açmasın */
#devicePanel .panel h4{
  margin: 6px 0 10px;
}

/* Grafik kutusu: sabit ve dengeli yükseklik */
#devicePanel .panel .chart-box{
  position: relative;
  height: 260px;      /* S1 gibi istiyorsan bunu ayarla */
  width: 100%;
}
/* === HOLOGRAM CARD THEME === */
:root{
  --bg1:#0b1220;
  --bg2:#0E3248;
  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.14);
  --stroke2: rgba(58,147,184,.22);
  --text: rgba(240,245,255,.92);
  --muted: rgba(240,245,255,.70);
  --muted2: rgba(240,245,255,.55);
  --blue: rgba(32,120,160,.85);
}

/* İstersen koyu temayı default yapmak için:
body { background: radial-gradient(1200px 700px at 30% 0%, #123D56 0%, #0A2638 55%, #05141E 100%); color: var(--text); }
*/
body.dark{
  background: radial-gradient(1200px 700px at 30% 0%, #123D56 0%, #0A2638 55%, #05141E 100%);
  color: var(--text);
}

body.dark #sidebar{
  background: rgba(255,255,255,.06);
  border-right: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

body.dark .panel{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

/* Grid biraz daha “kart galerisi” gibi olsun */
.grid{
  gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Kart ana görünüm */
.card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  box-shadow:
    0 16px 35px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, filter .15s ease;
}

/* Hologram parlaması */
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 220px at 30% 15%, rgba(58,147,184,.25), transparent 60%),
              radial-gradient(500px 220px at 80% 20%, rgba(255,120,200,.14), transparent 60%),
              linear-gradient(120deg, rgba(255,255,255,.10), transparent 45%);
  opacity:.55;
  pointer-events:none;
}

/* Alt “ışık şeridi” */
.card::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-40px;
  height:90px;
  background: radial-gradient(closest-side, rgba(32,120,160,.35), transparent 70%);
  opacity:.35;
  filter: blur(10px);
  pointer-events:none;
}

.card:hover{
  transform: translateY(-2px);
  border-color: rgba(58,147,184,.28);
  filter: brightness(1.05);
}

/* Kart iç yazılar */
.card .c-title{
  display:flex; justify-content:space-between; gap:10px; align-items:flex-start;
  color: var(--text);
}
.card .c-title strong{
  display:block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card .c-sub{
  margin-top:4px;
  font-size: 11px;
  color: var(--muted2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Büyük sıcaklık */
.card .c-big{
  margin-top:12px;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1;
}
.card .c-unit{
  font-size: 14px;
  opacity: .85;
  margin-left: 4px;
}
.card .c-set{
  margin-top:8px;
  font-size: 18px;
  color: var(--muted);
  font-weight: 650;
}

/* ikon satırı */
.card .c-icons{
  display:flex; gap:10px; align-items:center;
  margin-top:12px;
  opacity:.95;
}
.card .c-ico{
  width:26px; height:26px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-size: 14px;
}

/* durum noktası (yeşil/kırmızı) görseldeki gibi küçük ve köşede */
.status-dot{
  top:10px; right:10px;
  width:12px; height:12px;
  border:2px solid rgba(255,255,255,.70);
  box-shadow: 0 0 10px rgba(0,0,0,.25);
}

/* badge’leri daha modern yap */
.value-badge{
  background: rgba(32,120,160,.20);
  border: 1px solid rgba(32,120,160,.35);
  color: var(--text);
  font-weight: 700;
}

/* admin butonları kart içinde “yumuşak” gözüksün */
.card .del-btn{
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 4px 8px;
}


@media (max-width: 1100px){
  #devicePanel .charts-grid{
    grid-template-columns: 1fr; /* dar ekranda alt alta */
  }

}

/* =========================
   THEME TOKENS (LIGHT/DARK)
   ========================= */
:root{
  --bg: #f3f6fb;
  --text: #0b1220;
  --muted: rgba(11,18,32,.65);

  --sidebar-bg: #e9eef7;
  --sidebar-border: rgba(11,18,32,.12);

  --panel-bg: #ffffff;
  --panel-border: rgba(11,18,32,.12);

  --card-bg: #ffffff;
  --card-border: rgba(11,18,32,.10);
  --card-shadow: 0 14px 30px rgba(11,18,32,.12);

  --badge-bg: rgba(3,57,108,.10);
  --badge-border: rgba(3,57,108,.18);
  --badge-text: #2078A0;

  --table-row: #ffffff;
  --table-row-alt: #f6f8fc;
  --table-hover: #eaf1ff;
}

body.dark{
  --bg: radial-gradient(1200px 700px at 30% 0%, #123D56 0%, #0A2638 55%, #05141E 100%);
  --text: rgba(240,245,255,.92);
  --muted: rgba(240,245,255,.60);

  --sidebar-bg: rgba(255,255,255,.06);
  --sidebar-border: rgba(255,255,255,.12);

  --panel-bg: rgba(255,255,255,.06);
  --panel-border: rgba(255,255,255,.12);

  --card-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  --card-border: rgba(255,255,255,.12);
  --card-shadow: 0 16px 35px rgba(0,0,0,.35);

  --badge-bg: rgba(32,120,160,.20);
  --badge-border: rgba(32,120,160,.35);
  --badge-text: rgba(240,245,255,.92);

  --table-row: rgba(255,255,255,.03);
  --table-row-alt: rgba(255,255,255,.02);
  --table-hover: rgba(32,120,160,.10);
}

/* =========================
   APPLY TOKENS
   ========================= */
body{
  background: var(--bg);
  color: var(--text);
}

#sidebar{
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  color: var(--text);
}

.panel{
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--text);
}

.card{
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
  color: var(--text);
}

/* kart iç alt yazılar */
.card .c-sub, .small{ color: var(--muted) !important; }

/* value badge */
.value-badge{
  background: var(--badge-bg) !important;
  border: 1px solid var(--badge-border) !important;
  color: var(--badge-text) !important;
}

/* tablo (db ve geçmiş) */
#dbTable tr{ background: var(--table-row) !important; }
#dbTable tr:nth-child(even){ background: var(--table-row-alt) !important; }
#dbTable tr:hover{ background: var(--table-hover) !important; }
#dbTable td, #dbTable th{ border-bottom-color: var(--panel-border) !important; }

/* buton/input light theme uyumu */
.controls input, .controls select, .controls button{
  background: var(--panel-bg);
  color: var(--text);
  border-color: var(--panel-border);
}

/* =========================
   CARD ICON STATES
   ========================= */

/* ikon kabı */
.c-ico{
  transition:
    background .2s ease,
    box-shadow .2s ease,
    filter .2s ease,
    transform .15s ease;
  opacity: .45;
}

/* PASİF (default) */
.c-ico.off{
  filter: grayscale(1);
  opacity: .35;
}

/* AKTİF (yanan) */
.c-ico.on{
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
}

/* --- RENKLER --- */

/* Fan */
.c-ico.fan.on{
  background: rgba(0,180,255,.25);
  box-shadow: 0 0 12px rgba(0,180,255,.7);
}

/* Kompresör */
.c-ico.comp.on{
  background: rgba(0,255,160,.25);
  box-shadow: 0 0 12px rgba(0,255,160,.7);
}

/* Defrost */
.c-ico.defrost.on{
  background: rgba(255,120,0,.25);
  box-shadow: 0 0 12px rgba(255,120,0,.8);
}

/* Işık */
.c-ico.light.on{
  background: rgba(255,230,0,.25);
  box-shadow: 0 0 14px rgba(255,230,0,.9);
}

/* Cihaz ON */
.c-ico.device.on{
  background: rgba(120,140,255,.30);
  box-shadow: 0 0 14px rgba(120,140,255,.9);
}

/* ALARM */
.c-ico.alarm.on{
  background: rgba(255,0,0,.30);
  box-shadow: 0 0 18px rgba(255,0,0,1);
}

/* ✅ DEVICE DETAY (device-layout) mobil düzeltme */
@media (max-width: 768px){
  .device-layout{
    grid-template-columns: 1fr !important; /* 2 kolon -> 1 kolon */
  }

  /* Panel yüksekliklerini mobilde sabitleme, doğal aksın */
  .device-layout > .panel{
    min-height: unset !important;
  }

  /* Grafik kutusu mobilde daha kısa olsun */
  .device-layout .chart-box{
    height: 260px !important;
  }
}

@media (max-width: 768px){
  #content{
    overflow-x: hidden;
  }
  table{
    max-width: 100%;
  }
}
/* ===============================
   MOBIL: DEVICE DETAY TASMA FIX
   =============================== */

/* Sayfa genel yatay taşmayı kapat */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

/* Tablo kapsayıcıları yatay taşarsa kendi içinde scroll olsun */
#devicePanel table{
  width: 100%;
  border-collapse: collapse;
}
#devicePanel th, #devicePanel td{
  white-space: nowrap;          /* tablo düzgün kalsın */
}
#devicePanel .table-wrap,
#devicePanel [style*="overflow:auto"]{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Mobilde: cihaz detay layout’unu tek kolona düşür */
@media (max-width: 768px){

  /* Senin HTML’de inline style var: style="display:grid; grid-template-columns: 1.1fr 1fr; ..."
     Bu yüzden !important ile eziyoruz. */
  .device-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Detay butonlar genişlik taşırmasın */
  #devicePanel .controls{
    flex-wrap: wrap;
    gap: 8px;
  }
  #devicePanel .controls button,
  #devicePanel .controls select,
  #devicePanel .controls input{
    width: 100%;
  }

  /* Grafik kutusu mobilde daha kısa olsun */
  #devicePanel .chart-box{
    height: 260px !important;
  }

  /* Sağ panelin içindeki 2 kolon (S1-SET / S2-Time) mobilde tek kolon */
  #devicePanel .panel > div[style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns: 1fr !important;
  }

  /* Tablo alanı: mobilde tam sığsın */
  #devicePanel table{
    font-size: 12px;
  }
}

/* === MOBIL TABLE FIX === */
.table-wrap{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table{
  width: 100%;
  min-width: 640px;   /* mobilde taşarsa içeride scroll olur */
  border-collapse: collapse;
}

@media (max-width:768px){
  .table-wrap{
    margin-left: 0;
    margin-right: 0;
  }
}
/* === FIX: Grid içinde taşmayı engelle (mobil + desktop) === */
.device-layout { width: 100%; max-width: 100%; }

/* Grid item'lar içerik yüzünden büyüyemesin */
.device-layout > .panel { min-width: 0; }

/* Panel içindeki grid’ler de (S1/SET vb.) taşmasın */
#devicePanel .panel { min-width: 0; }
#devicePanel .controls { min-width: 0; }

/* Tablo alanı: wrapper daralabilsin */
#devicePanel .table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; }

/* Tablo: uzun yazılar satır kırmasın; ama taşarsa SADECE wrapper scroll yapsın */
#devicePanel .table-wrap table { min-width: 640px; width: 100%; }
#devicePanel .table-wrap th,
#devicePanel .table-wrap td { white-space: nowrap; }

/* Chart.js canvas genişliği taşırmasın */
#devicePanel canvas { max-width: 100% !important; }

/* En son çare: sayfa yatay taşmasın */
html, body { overflow-x: hidden; }

body.dark .modal-content{
  background:#1f2635 !important;
  color:#eaf2ff !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
body.dark .modal-content input,
body.dark .modal-content textarea{
  background:#121a28 !important;
  color:#eaf2ff !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

body.dark .modal-content{
  background:#1f2635 !important;
  color:#eaf2ff !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

body.dark .modal-content input,
body.dark .modal-content textarea,
body.dark .modal-content select{
  background:#121a28 !important;
  color:#eaf2ff !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

body.dark .modal-content button{
  background:#2a3550 !important;
  color:#eaf2ff !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

body.dark #dbTable { color:#eaf2ff; }
body.dark #dbTable th, body.dark #dbTable td { border-bottom:1px solid rgba(255,255,255,.10); }

body.dark #dbTable tr:nth-child(even){ background:#1b2232; }
body.dark #dbTable tr:nth-child(odd){ background:#141b28; }
body.dark #dbTable tr:hover{ background:#22304a; }


.card .c-icons ~ .small{
  display:none !important;
}
.card.details-open .c-icons ~ .small{
  display:block !important;
}
.details-toggle{
  width:22px;
  height:22px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  background:rgba(255,255,255,.08);
  color:#eaf2ff;
  cursor:pointer;
  margin-left:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.details-toggle:hover{
  background:rgba(255,255,255,.14);
}

/* Device card collapsible details */
.card .c-icons ~ .small{
  display: none !important;
}

.card.details-open .c-icons ~ .small{
  display: block !important;
}

.details-toggle{
  min-width: 54px !important;
  height: 28px !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #eaf2ff !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
}

.details-toggle-icon{
  font-size: 18px !important;
  line-height: 1 !important;
}

.details-toggle-text{
  font-size: 11px !important;
  line-height: 1 !important;
}

.card:not(.details-open){
  min-height: 176px !important;
  height: auto !important;
}

.card.details-open{
  min-height: 300px !important;
  height: auto !important;
}


/* Büyük ve görünür kart detay düğmesi */
.details-toggle{
  min-width:52px !important;
  width:52px !important;
  height:38px !important;
  padding:0 8px !important;
  border-radius:11px !important;
  background:rgba(32,120,160,.22) !important;
  border:1px solid rgba(58,147,184,.55) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.18) !important;
}
.details-toggle-icon{
  display:block !important;
  font-size:24px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:3px !important;
  transform:translateY(-2px);
}
.details-toggle:hover,.details-toggle.is-open{
  background:#2078A0 !important;
  border-color:#3A93B8 !important;
  transform:scale(1.04);
}
.details-toggle-text{display:none !important;}

/* Kartlar birbirinden bağımsız büyüsün; detay düğmesi daha dengeli olsun */
.grid{
  align-items:start !important;
}
.grid > .card{
  align-self:start !important;
}
.details-toggle{
  min-width:46px !important;
  width:46px !important;
  height:34px !important;
  padding:0 7px !important;
}
.details-toggle-icon{
  font-size:19px !important;
  letter-spacing:2px !important;
  transform:translateY(-1px);
}

/* Sol menü kontrolleri: yuvarlak köşeler */
#sidebar button,
#sidebar select,
#sidebar input{
  border-radius:12px !important;
}
#sidebar button{
  padding:9px 12px !important;
}

/* =========================================================
   FETRION INDUSTRIAL FUTURE UI — visual layer only
   Backup: /opt/sunucu1_backups/frontend_20260902_094205
   ========================================================= */
:root{
  --fx-bg:#071018;
  --fx-bg-2:#0a1823;
  --fx-panel:rgba(13,29,41,.82);
  --fx-panel-solid:#0e202d;
  --fx-card:linear-gradient(145deg,rgba(18,42,57,.94),rgba(8,22,33,.94));
  --fx-line:rgba(76,201,240,.18);
  --fx-line-strong:rgba(65,211,255,.48);
  --fx-text:#edfaff;
  --fx-muted:#8ca8b7;
  --fx-cyan:#35d6ff;
  --fx-blue:#168cc1;
  --fx-orange:#ff9f43;
  --fx-green:#32e38d;
  --fx-red:#ff5263;
  --fx-radius:18px;
  --fx-shadow:0 18px 55px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,body.dark{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:var(--fx-text)!important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  letter-spacing:.005em;
  background:
    linear-gradient(rgba(53,214,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(53,214,255,.025) 1px,transparent 1px),
    radial-gradient(circle at 12% -5%,rgba(0,174,239,.20),transparent 34rem),
    radial-gradient(circle at 92% 105%,rgba(255,159,67,.10),transparent 30rem),
    linear-gradient(145deg,var(--fx-bg-2),var(--fx-bg) 55%,#050b11)!important;
  background-size:32px 32px,32px 32px,auto,auto,auto!important;
  background-attachment:fixed!important;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(115deg,transparent 0 47%,rgba(53,214,255,.035) 47.2%,transparent 47.5% 100%);
}
h1,h2,h3,h4,strong{color:var(--fx-text)}
h2{font-size:clamp(25px,3vw,36px);line-height:1.15;letter-spacing:-.035em;margin:0 0 22px}
h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#b8d9e7;margin:18px 0 10px}
.small,.c-sub{color:var(--fx-muted)!important}
hr{border:0;border-top:1px solid var(--fx-line);margin:18px 0}

/* floating controls */
#themeToggle,.mobile-only{
  position:fixed!important;top:max(14px,env(safe-area-inset-top))!important;
  min-width:44px!important;height:44px!important;padding:0 14px!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  color:var(--fx-text)!important;background:rgba(10,27,39,.80)!important;
  border:1px solid var(--fx-line)!important;border-radius:14px!important;
  box-shadow:0 8px 28px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.05)!important;
  backdrop-filter:blur(18px) saturate(150%);z-index:2300!important;
}
#themeToggle{left:auto!important;right:16px!important}.mobile-only{left:16px!important;right:auto!important;width:auto!important;display:none!important}
.connection-status{position:fixed!important;right:16px!important;left:auto!important;bottom:max(16px,env(safe-area-inset-bottom))!important;padding:8px 13px!important;border-radius:999px!important;font-size:11px!important;font-weight:800!important;letter-spacing:.04em!important;text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.25)!important;z-index:2200!important}
.connection-status.connected{background:rgba(50,227,141,.18)!important;color:#8affc3!important;border:1px solid rgba(50,227,141,.45)!important}
.connection-status.disconnected{background:rgba(255,82,99,.16)!important;color:#ff9aa5!important;border:1px solid rgba(255,82,99,.42)!important}
.connection-status.connecting{background:rgba(255,159,67,.17)!important;color:#ffc587!important;border:1px solid rgba(255,159,67,.42)!important}

/* login experience */
#loginPage.page.active{min-height:100dvh;width:100%;padding:clamp(80px,12vh,130px) 20px 40px;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start}
#loginPage>h2,#loginPage>.panel{width:min(100%,470px)}
#loginPage>h2{text-align:center;font-size:0;margin-bottom:24px}
#loginPage>h2::before{content:"FETRION";display:block;font-size:clamp(38px,7vw,58px);font-weight:780;letter-spacing:.16em;line-height:1;color:transparent;background:linear-gradient(105deg,#f4fdff 10%,var(--fx-cyan) 58%,#65a8ff);-webkit-background-clip:text;background-clip:text;text-shadow:0 0 42px rgba(53,214,255,.22)}
#loginPage>h2::after{content:"BEYOND NORMAL CONDITIONS";display:block;margin-top:13px;font-size:10px;font-weight:700;letter-spacing:.34em;color:#6e9db1}
#loginPage>.panel{position:relative;overflow:hidden;padding:28px!important;border-radius:24px!important}
#loginPage>.panel::before{content:"SECURE MONITORING ACCESS";display:block;margin-bottom:20px;font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--fx-cyan)}
#loginPage>.panel::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--fx-cyan),var(--fx-orange),transparent)}
#loginPage .controls{display:grid!important;grid-template-columns:1fr;gap:12px!important;margin:0!important}
#loginPage .password-container{display:flex;width:100%;gap:9px}#loginPage .password-container input{flex:1;min-width:0}
#loginPage #togglePw{flex:0 0 46px!important;width:46px!important;margin:0!important;padding:0!important}
#loginPage button.primary{width:100%!important;min-height:48px!important}
#error{margin-top:11px;text-align:center;font-size:13px;color:#ff7c88!important}

/* shell */
#sidebar{position:fixed!important;inset:0 auto 0 0!important;width:282px!important;height:100dvh!important;padding:76px 17px max(22px,env(safe-area-inset-bottom))!important;overflow-y:auto!important;color:var(--fx-text)!important;background:linear-gradient(180deg,rgba(12,31,44,.94),rgba(7,19,29,.94))!important;border:0!important;border-right:1px solid var(--fx-line)!important;box-shadow:18px 0 55px rgba(0,0,0,.18)!important;backdrop-filter:blur(25px) saturate(140%)}
#sidebar::before{content:"CONTROL HUB";display:block;margin:0 4px 20px;font-size:10px;font-weight:850;letter-spacing:.24em;color:var(--fx-cyan)}
#sidebar button,#sidebar select,#sidebar input{width:100%!important;margin:4px 0!important;border-radius:12px!important}
#content{width:auto!important;min-width:0!important;margin-left:282px!important;padding:78px clamp(22px,4vw,56px) 54px!important}
#content>*{max-width:1480px;margin-left:auto;margin-right:auto}#contentTitle{margin-bottom:24px!important}

/* panels and modal */
.panel,.modal-content{color:var(--fx-text)!important;background:linear-gradient(145deg,rgba(17,39,53,.88),rgba(8,22,32,.91))!important;border:1px solid var(--fx-line)!important;border-radius:var(--fx-radius)!important;box-shadow:var(--fx-shadow),inset 0 1px rgba(255,255,255,.045)!important;backdrop-filter:blur(22px) saturate(135%)}
.panel{padding:clamp(17px,2.5vw,26px)!important;margin-top:16px!important}
.modal{padding:18px!important;background:rgba(1,8,13,.70)!important;backdrop-filter:blur(9px)}.modal-content{width:min(94vw,580px)!important;max-height:min(88vh,800px);overflow:auto;padding:25px!important}

/* controls */
.controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0}
button,.controls button{min-height:40px;padding:9px 14px!important;color:#dff7ff!important;background:linear-gradient(180deg,rgba(34,70,91,.92),rgba(17,43,60,.92))!important;border:1px solid rgba(92,190,225,.22)!important;border-radius:11px!important;box-shadow:0 4px 13px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.05)!important;font-weight:680;cursor:pointer;transition:transform .16s ease,border-color .16s ease,filter .16s ease,box-shadow .16s ease}
button:hover{transform:translateY(-1px);border-color:var(--fx-line-strong)!important;filter:brightness(1.1);box-shadow:0 7px 20px rgba(0,0,0,.22)!important}button:active{transform:translateY(0) scale(.98)}
button.primary,.primary{color:#03121b!important;border-color:rgba(91,225,255,.7)!important;background:linear-gradient(110deg,#39d9ff,#37b5e7 65%,#73e7ff)!important;box-shadow:0 7px 22px rgba(39,188,232,.22)!important}
input,select,textarea,.controls input,.controls select,body.dark .controls input,body.dark .controls select,body.dark .modal-content input,body.dark .modal-content textarea,body.dark .modal-content select{min-height:43px;padding:9px 12px;color:var(--fx-text)!important;background:rgba(3,15,23,.62)!important;border:1px solid rgba(105,184,214,.20)!important;border-radius:11px!important;box-shadow:inset 0 1px 5px rgba(0,0,0,.20)!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--fx-cyan)!important;box-shadow:0 0 0 3px rgba(53,214,255,.13),inset 0 1px 5px rgba(0,0,0,.18)!important}::placeholder{color:#6f8b99;opacity:1}

/* device/customer cards */
.grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(245px,1fr))!important;gap:16px!important;align-items:start!important}
.grid>.card{align-self:start!important}
.card,.card:not(.details-open),.card.details-open{position:relative;min-width:0;padding:18px!important;color:var(--fx-text)!important;background:var(--fx-card)!important;border:1px solid var(--fx-line)!important;border-radius:16px!important;box-shadow:0 12px 34px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.04)!important;backdrop-filter:blur(16px);overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card::before{content:""!important;position:absolute;inset:0!important;background:linear-gradient(120deg,rgba(53,214,255,.08),transparent 35%,transparent 72%,rgba(255,159,67,.05))!important;opacity:1!important;pointer-events:none}
.card::after{content:""!important;position:absolute!important;left:18px!important;right:18px!important;top:0!important;bottom:auto!important;height:1px!important;background:linear-gradient(90deg,transparent,var(--fx-cyan),transparent)!important;opacity:.75!important;filter:none!important}
.card:hover{transform:translateY(-3px)!important;border-color:rgba(53,214,255,.40)!important;box-shadow:0 18px 45px rgba(0,0,0,.28),0 0 0 1px rgba(53,214,255,.06)!important;filter:none!important}
.card .c-title strong{font-size:16px!important;letter-spacing:-.015em}.card .c-big{font-size:clamp(31px,4vw,44px)!important;letter-spacing:-.045em;color:#fff}.card .c-unit{color:#7ca5b7}.card .c-ico{border-radius:10px!important;background:rgba(2,15,23,.50)!important;border:1px solid rgba(114,190,219,.15)!important}
.status-dot{width:11px!important;height:11px!important;border:2px solid rgba(255,255,255,.72)!important}.status-dot.green{background:var(--fx-green)!important;box-shadow:0 0 0 4px rgba(50,227,141,.10),0 0 14px rgba(50,227,141,.85)!important}.status-dot.red{background:var(--fx-red)!important;box-shadow:0 0 0 4px rgba(255,82,99,.09),0 0 14px rgba(255,82,99,.75)!important}
.details-toggle{min-width:44px!important;width:44px!important;height:33px!important;border-radius:10px!important;background:rgba(53,214,255,.11)!important;border:1px solid rgba(53,214,255,.34)!important}.details-toggle-icon{font-size:17px!important;letter-spacing:2px!important;color:#a8eeff}.details-toggle:hover,.details-toggle.is-open{background:rgba(53,214,255,.23)!important;border-color:rgba(53,214,255,.65)!important}
.note-btn,.del-btn{min-width:34px!important;padding:5px 8px!important}

/* tables and data */
.table-wrap,#devicePanel .table-wrap{width:100%;max-width:100%;overflow:auto;border:1px solid var(--fx-line)!important;border-radius:14px!important;background:rgba(3,14,22,.34);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:separate;border-spacing:0;color:var(--fx-text)!important}th{position:sticky;top:0;z-index:1;padding:12px 13px;background:#102939!important;color:#74dffc!important;font-size:10px;text-transform:uppercase;letter-spacing:.11em}td{padding:12px 13px!important;border-bottom:1px solid rgba(79,154,184,.12)!important}tr:last-child td{border-bottom:0!important}#dbTable tr,#dbTable tr:nth-child(even),#dbTable tr:nth-child(odd){background:transparent!important}#dbTable tr:hover{background:rgba(53,214,255,.07)!important}
.value-badge,.badge{background:rgba(53,214,255,.10)!important;border:1px solid rgba(53,214,255,.20)!important;color:#bcefff!important;border-radius:8px!important}.chart-box,#devicePanel .chart-box{min-width:0;border-radius:14px;overflow:hidden;background:rgba(2,13,20,.28)}

.overlay{position:fixed;inset:0;background:rgba(0,5,9,.64)!important;backdrop-filter:blur(5px);z-index:1999}
@media(max-width:900px){.mobile-only{display:inline-flex!important}body:has(#loginPage.active) .mobile-only{display:none!important}#sidebar{width:min(86vw,320px)!important;transform:translateX(-106%);left:0!important;transition:transform .28s cubic-bezier(.2,.8,.2,1);z-index:2100!important}body.sidebar-open #sidebar{left:0!important;transform:translateX(0)}#content{margin-left:0!important;padding:78px 16px 38px!important}.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){body{font-size:14px}#loginPage.page.active{padding:86px 15px 28px}#loginPage>h2::before{font-size:38px;letter-spacing:.12em}#loginPage>h2::after{font-size:8px;letter-spacing:.26em}#loginPage>.panel{padding:21px!important}#content{padding-left:12px!important;padding-right:12px!important}#contentTitle{font-size:28px}.grid{grid-template-columns:1fr!important;gap:12px!important}.panel{padding:15px!important;border-radius:15px!important}.controls{align-items:stretch}.controls>input,.controls>select,.controls>button{width:100%;max-width:none}#devicePanel .controls{display:grid;grid-template-columns:1fr}#devicePanel .controls>*{width:100%!important}.modal{align-items:flex-end!important;padding:0!important}.modal-content{width:100%!important;max-width:none!important;max-height:88dvh;margin:0!important;border-radius:20px 20px 0 0!important;padding:20px 15px calc(20px + env(safe-area-inset-bottom))!important}.table-wrap,#devicePanel .table-wrap{margin-left:0;margin-right:0}#devicePanel .table-wrap table{min-width:620px}#devicePanel .chart-box{height:250px!important}}
@media(max-width:380px){#themeToggle,.mobile-only{top:9px!important;height:40px!important}#content{padding-top:68px!important}.card{padding:15px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* =========================================================
   FOCUSED DEVICE DETAIL VIEW — client-side navigation only
   ========================================================= */
body.device-detail-mode #mainGrid,
body.device-detail-mode #adminActionBar,
body.device-detail-mode #contentTitle{display:none!important}
body.device-detail-mode #sidebar{transform:translateX(-105%)!important;box-shadow:none!important}
body.device-detail-mode #content{margin-left:0!important;padding:28px clamp(18px,4vw,56px) 54px!important}
body.device-detail-mode #devicePanel{display:block!important;position:relative;max-width:1500px!important;margin:0 auto!important;padding:76px clamp(14px,2.5vw,28px) 28px!important;border-radius:24px!important;overflow:hidden}
body.device-detail-mode #devicePanel::before{content:"LIVE DEVICE WORKSPACE";position:absolute;left:28px;top:24px;font-size:10px;font-weight:850;letter-spacing:.22em;color:var(--fx-cyan)}
body.device-detail-mode #devicePanel::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--fx-cyan),var(--fx-orange),transparent)}
body.device-detail-mode #devicePanel>.controls:first-child{position:absolute;top:14px;right:22px;left:210px;justify-content:flex-end;margin:0!important}
body.device-detail-mode #devicePanel>.controls:first-child #deviceTitle{margin-right:auto;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-back-button{min-height:42px!important;padding:9px 16px!important;color:#03121b!important;background:linear-gradient(110deg,#52dcff,#36bce9)!important;border-color:rgba(104,226,255,.72)!important;box-shadow:0 8px 24px rgba(35,183,226,.22)!important}
body.device-detail-mode .device-layout{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr)!important;gap:16px!important}
body.device-detail-mode .device-layout>.panel{margin-top:0!important;height:auto!important}
body.device-detail-mode #themeToggle{display:flex!important}
body.device-detail-mode .mobile-only{display:none!important}
@media(max-width:1050px){body.device-detail-mode .device-layout{grid-template-columns:1fr!important}body.device-detail-mode #devicePanel>.controls:first-child{position:static!important;display:flex!important;margin-bottom:14px!important;justify-content:flex-start!important}body.device-detail-mode #devicePanel>.controls:first-child #deviceTitle{width:100%;flex-basis:100%;font-size:20px}body.device-detail-mode #devicePanel{padding-top:24px!important}body.device-detail-mode #devicePanel::before{display:none}}
@media(max-width:640px){body.device-detail-mode #content{padding:12px 8px calc(28px + env(safe-area-inset-bottom))!important}body.device-detail-mode #devicePanel{border-radius:18px!important;padding:14px 10px 20px!important}body.device-detail-mode #devicePanel>.controls:first-child{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}body.device-detail-mode #devicePanel>.controls:first-child>*{width:100%!important}body.device-detail-mode #devicePanel>.controls:first-child #deviceTitle{font-size:20px;padding:5px 2px 8px}body.device-detail-mode .device-back-button{order:-1!important;font-size:15px!important;min-height:46px!important}body.device-detail-mode .device-layout>.panel{min-height:0!important;padding:14px!important}body.device-detail-mode .chart-box{height:285px!important}body.device-detail-mode #themeToggle{top:auto!important;bottom:14px!important;right:14px!important}}

/* =========================================================
   OFFICIAL FETRION LOGO — transparent source asset
   ========================================================= */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.brand-logo-frame{display:block;position:relative;overflow:hidden;margin:0 auto}
.brand-logo{display:block;width:100%;height:auto;max-width:none;filter:none;transition:filter .2s ease,opacity .2s ease}
body.dark .brand-logo{filter:grayscale(1) brightness(0) invert(1);opacity:.96}
.brand-logo-frame-login{width:min(100%,390px);height:104px}
.brand-logo-frame-login .brand-logo{transform:translateY(-37.8%)}
#loginPage>h2.login-brand-heading{height:104px;margin-bottom:22px!important;font-size:inherit!important}
#loginPage>h2.login-brand-heading::before,#loginPage>h2.login-brand-heading::after{content:none!important;display:none!important}
.brand-logo-frame-sidebar{width:218px;height:58px;margin:-47px auto 24px}
.brand-logo-frame-sidebar .brand-logo{transform:translateY(-38.5%)}
#sidebar::before{margin-top:0!important}
body.device-detail-mode .brand-logo-frame-sidebar{display:none}
@media(max-width:640px){.brand-logo-frame-login{width:min(100%,330px);height:88px}.brand-logo-frame-login .brand-logo{transform:translateY(-37.8%)}#loginPage>h2.login-brand-heading{height:88px;margin-bottom:18px!important}.brand-logo-frame-sidebar{width:205px;height:55px}}

/* True light mode: official logo remains blue */
body:not(.dark){
  --fx-text:#102633;--fx-muted:#5f7885;--fx-line:rgba(20,111,151,.14);--fx-line-strong:rgba(25,139,185,.38);
  color:var(--fx-text)!important;
  background:linear-gradient(rgba(25,139,185,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(25,139,185,.035) 1px,transparent 1px),radial-gradient(circle at 10% -8%,rgba(44,183,226,.16),transparent 34rem),radial-gradient(circle at 94% 105%,rgba(255,159,67,.10),transparent 28rem),linear-gradient(145deg,#f7fbfd,#edf6fa 58%,#f9fbfc)!important;
  background-size:32px 32px,32px 32px,auto,auto,auto!important;
}
body:not(.dark) #themeToggle,body:not(.dark) .mobile-only{color:#123040!important;background:rgba(255,255,255,.86)!important;border-color:rgba(20,111,151,.18)!important}
body:not(.dark) #sidebar{color:var(--fx-text)!important;background:linear-gradient(180deg,rgba(250,254,255,.96),rgba(232,244,249,.94))!important;border-color:rgba(20,111,151,.15)!important;box-shadow:16px 0 45px rgba(25,89,116,.08)!important}
body:not(.dark) .panel,body:not(.dark) .modal-content{color:var(--fx-text)!important;background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(240,248,251,.91))!important;border-color:rgba(20,111,151,.15)!important;box-shadow:0 18px 48px rgba(31,93,119,.10),inset 0 1px rgba(255,255,255,.8)!important}
body:not(.dark) .card,body:not(.dark) .card:not(.details-open),body:not(.dark) .card.details-open{color:var(--fx-text)!important;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(235,246,250,.94))!important;border-color:rgba(20,111,151,.16)!important;box-shadow:0 12px 32px rgba(31,93,119,.10),inset 0 1px #fff!important}
body:not(.dark) h1,body:not(.dark) h2,body:not(.dark) h3,body:not(.dark) h4,body:not(.dark) strong{color:var(--fx-text)}
body:not(.dark) h3{color:#245c73}
body:not(.dark) button,body:not(.dark) .controls button{color:#163746!important;background:linear-gradient(180deg,#fff,#e9f3f7)!important;border-color:rgba(20,111,151,.18)!important}
body:not(.dark) button.primary,body:not(.dark) .primary,body:not(.dark) .device-back-button{color:#03121b!important;background:linear-gradient(110deg,#39d9ff,#37b5e7 65%,#73e7ff)!important}
body:not(.dark) input,body:not(.dark) select,body:not(.dark) textarea,body:not(.dark) .controls input,body:not(.dark) .controls select{color:#123040!important;background:rgba(255,255,255,.78)!important;border-color:rgba(20,111,151,.17)!important}
body:not(.dark) .table-wrap,body:not(.dark) #devicePanel .table-wrap{background:rgba(255,255,255,.52)!important}body:not(.dark) th{background:#e5f3f8!important;color:#14678a!important}body:not(.dark) td{color:#183744!important}

.database-tree{margin:0 0 14px;padding:14px;border:1px solid var(--fx-line);border-radius:16px;background:rgba(3,14,22,.34)}
.raw-json-panel{margin:0 0 14px;padding:14px;border:1px solid var(--fx-line);border-radius:16px;background:rgba(3,14,22,.48)}.raw-json-item{margin:8px 0;border:1px solid rgba(79,154,184,.24);border-radius:12px;overflow:hidden}.raw-json-item>summary{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;cursor:pointer;background:rgba(53,214,255,.06)}.raw-json-item pre{max-height:360px;margin:0;padding:14px;overflow:auto;color:#bdefff;background:#031019;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;word-break:break-word}body:not(.dark) .raw-json-panel{background:rgba(255,255,255,.68)}body:not(.dark) .raw-json-item pre{color:#123747;background:#eef8fb}@media(max-width:640px){.raw-json-item>summary{flex-direction:column}}
.db-tree-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.db-tree-province{margin:10px 0;border-left:3px solid var(--fx-orange);padding-left:10px}.db-tree-province>summary{cursor:pointer;padding:8px 4px;font-weight:850}.db-tree-province-children{padding-left:12px}.db-tree-unique-id{display:inline-block;margin-top:3px;color:var(--fx-cyan);font-size:12px;font-weight:800;letter-spacing:.04em}
.db-tree-customer{margin:8px 0;border:1px solid rgba(79,154,184,.22);border-radius:13px;overflow:hidden;background:rgba(53,214,255,.035)}
.db-tree-customer>summary{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;font-weight:750}
.db-tree-children{padding:2px 12px 9px 28px}.db-tree-device{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;margin:5px 0;border-left:2px solid var(--fx-cyan);border-radius:8px;background:rgba(53,214,255,.045)}
.db-tree-customer.is-ghost,.db-tree-device.is-ghost{border-color:#f05656;background:rgba(240,86,86,.09)}
.db-tree-delete{min-height:34px!important;padding:6px 10px!important;border-color:rgba(240,86,86,.5)!important;color:#ffb1b1!important;background:rgba(240,86,86,.10)!important;white-space:nowrap}.customer-history-delete{margin:0 12px 12px 28px!important}
body:not(.dark) .database-tree{background:rgba(255,255,255,.62)}body:not(.dark) .db-tree-delete{color:#9f2020!important}
@media(max-width:640px){.db-tree-province-children{padding-left:0}.db-tree-customer>summary,.db-tree-device{align-items:flex-start;flex-direction:column}.db-tree-children{padding-left:12px}.db-tree-delete{width:100%!important}.customer-history-delete{width:calc(100% - 24px)!important;margin-left:12px!important}}
body:not(.dark) .c-big{color:#123040!important}
body:not(.dark) .connection-status.connected{background:#087443!important;color:#fff!important;border-color:#065d36!important;box-shadow:0 8px 24px rgba(6,93,54,.28)!important}
body:not(.dark) .connection-status.disconnected{background:#b42332!important;color:#fff!important;border-color:#8f1825!important}
body:not(.dark) .connection-status.connecting{background:#9a4e00!important;color:#fff!important;border-color:#763b00!important}

/* Admin customer locations */
.address-autocomplete{width:100%;min-height:48px;margin-bottom:5px}.address-autocomplete gmp-place-autocomplete{display:block;width:100%;color-scheme:dark}.address-status{margin:0 0 12px;color:var(--fx-muted)}.address-status.selected{color:var(--fx-green);opacity:1}
body:not(.dark) .address-autocomplete gmp-place-autocomplete{color-scheme:light}
.map-summary{margin:0 0 12px;padding:12px 15px;border:1px solid var(--fx-line);border-radius:12px;background:rgba(53,214,255,.07);color:var(--fx-text);font-weight:750}
#customerMap{width:100%;height:calc(100dvh - 190px);min-height:480px;border:1px solid var(--fx-line);border-radius:18px;overflow:hidden;box-shadow:var(--fx-shadow);z-index:1}
.customer-map-popup{min-width:190px;color:#17313d}.customer-map-popup strong{display:block;margin-bottom:5px;color:#102633!important;font-size:15px}.customer-map-popup div{margin:3px 0}.customer-map-popup button{width:100%;margin-top:8px!important;min-height:34px!important;padding:6px 10px!important;color:#123040!important;background:#e8f5fa!important;border-color:#8bcfe8!important}
@media(max-width:640px){#customerMap{height:calc(100dvh - 170px);min-height:420px}}

/* Official logo stands alone; remove the old sidebar label. */
#sidebar::before{content:none!important;display:none!important}

/* Canlı bağlantı yalnızca cihaz kartında nabız gibi görünür. */
.card .status-dot.green { animation: fetrion-device-heartbeat 1.45s ease-in-out infinite; }
@keyframes fetrion-device-heartbeat { 0%,100%{transform:scale(1);opacity:.72} 14%{transform:scale(1.42);opacity:1;box-shadow:0 0 0 7px rgba(50,227,141,.18),0 0 17px rgba(50,227,141,.9)} 28%{transform:scale(1);opacity:.82} 42%{transform:scale(1.2);opacity:1} 60%{transform:scale(1);opacity:.74} }
@media (prefers-reduced-motion: reduce){.card .status-dot.green{animation:none}}

/* Kart başlığı ve canlı ikonlar: dar ekranlarda taşmadan okunur. */
.card .c-title{align-items:flex-start!important;flex-wrap:wrap!important;min-width:0;gap:7px!important}
.card .c-title>div:first-child{min-width:0!important}
.card .c-title>div:last-child{margin-left:auto;min-width:0;max-width:100%}
.card .c-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.card .c-icons{min-width:0;gap:7px!important;flex-wrap:nowrap!important}
.card .c-icons>span:last-child{min-width:0!important;overflow:hidden;white-space:nowrap}
@media(max-width:640px){.card .c-title>div:last-child{width:100%;margin-left:0;justify-content:space-between}.card .c-title .c-sub{font-size:11px}.card .c-big{font-size:clamp(30px,11vw,42px)!important}.card .c-icons{gap:5px!important}.card .c-ico{width:30px!important;height:30px!important;font-size:14px!important}.card .note-btn,.card .details-toggle{width:30px!important;height:30px!important;padding:0!important}.card .c-icons>span:last-child{margin-left:auto!important}}

/* Açık temada kart içeriği düşük kontrastlı kalmasın. */
body:not(.dark) .card .c-sub,
body:not(.dark) .card .small,
body:not(.dark) .card .c-set,
body:not(.dark) .card .c-unit,
body:not(.dark) .card .value-badge { color:#315267!important; opacity:1!important; }
body:not(.dark) .card .c-title strong { color:#102d3e!important; }
body:not(.dark) .card .c-ico.off { opacity:.72!important; filter:saturate(.85)!important; }
body:not(.dark) .card .c-ico.on { color:#087ca5!important; background:#d9f4fc!important; border-color:#8acfe4!important; }
body:not(.dark) .card .c-icons { color:#315267!important; }

/* Açık temada ikonların ve kart menüsünün belirginliği. */
body:not(.dark) .card .c-ico { background:#e5f0f4!important; border:1px solid #8baebc!important; color:#245264!important; opacity:1!important; filter:none!important; box-shadow:0 1px 2px rgba(17,55,70,.12)!important; }
body:not(.dark) .card .c-ico.off { background:#dce8ed!important; color:#597784!important; opacity:1!important; }
body:not(.dark) .card .c-ico.on { background:#c9f0fb!important; color:#006d96!important; border-color:#4aa8c4!important; box-shadow:0 0 0 2px rgba(38,154,190,.14)!important; }
body:not(.dark) .details-toggle { background:#166f92!important; border-color:#0b526e!important; box-shadow:0 2px 5px rgba(11,82,110,.25)!important; }
body:not(.dark) .details-toggle-icon { color:#fff!important; text-shadow:none!important; }

/* Açık tema: kontrollü kar yağışı. */
body:not(.dark)::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.42; background-image:radial-gradient(circle at 8% 12%,#fff 0 2px,transparent 2.7px),radial-gradient(circle at 31% 44%,#d5edf5 0 1.5px,transparent 2.3px),radial-gradient(circle at 62% 18%,#fff 0 1.8px,transparent 2.5px),radial-gradient(circle at 88% 63%,#c7e6ef 0 1.6px,transparent 2.4px),radial-gradient(circle at 45% 83%,#fff 0 1.4px,transparent 2.1px); background-size:170px 230px,230px 310px,280px 260px,200px 330px,310px 300px; animation:fetrion-snowfall 16s linear infinite; }
body:not(.dark) #sidebar,body:not(.dark) #content { position:relative; z-index:1; }
@keyframes fetrion-snowfall { from{background-position:0 -230px,30px -310px,80px -260px,10px -330px,90px -300px} to{background-position:25px 230px,0 310px,45px 260px,35px 330px,120px 300px} }
/* Tek ve görünür kart detay düğmesi. */
.card .details-toggle,.card .details-toggle:hover,.card .details-toggle.is-open { display:inline-flex!important; flex:0 0 38px!important; width:38px!important; min-width:38px!important; height:32px!important; padding:0!important; overflow:visible!important; background:#126889!important; border:1px solid #064b68!important; border-radius:9px!important; box-shadow:0 2px 5px rgba(6,75,104,.28)!important; }
.card .details-toggle-icon { display:block!important; color:#fff!important; opacity:1!important; font-size:19px!important; line-height:1!important; letter-spacing:1px!important; }
@media(prefers-reduced-motion:reduce){body:not(.dark)::before{animation:none}}

/* Kar efekti içerik katmanının üzerinde görünür; etkileşimi engellemez. */
body:not(.dark)::after { content:"❄  ·  ❅     ❄     ·  ❅   ❄     ·  ❄     ❅  ·  ❄     ❅     ·  ❄"; position:fixed; inset:-45px -80px auto; z-index:5000; pointer-events:none; color:#4daecb; font-size:25px; letter-spacing:25px; word-spacing:45px; line-height:2.4; opacity:.78; text-shadow:0 1px 2px rgba(255,255,255,.9); white-space:pre-wrap; animation:fetrion-visible-snow 12s linear infinite; }
@keyframes fetrion-visible-snow { from{transform:translate3d(0,-35px,0)} to{transform:translate3d(45px,105vh,0)} }
.card .card-actions{margin-left:auto!important;display:flex!important;align-items:center!important;gap:7px!important;flex:0 0 auto!important;overflow:visible!important;white-space:normal!important;}
.card .card-actions .details-toggle,.card .card-actions .details-toggle:hover,.card .card-actions .details-toggle.is-open{display:inline-flex!important;visibility:visible!important;opacity:1!important;flex:0 0 42px!important;width:42px!important;min-width:42px!important;height:34px!important;background:#075b7c!important;border:2px solid #043f57!important;border-radius:9px!important;box-shadow:0 2px 6px rgba(0,43,62,.32)!important;}
.card .card-actions .details-toggle-icon{color:#fff!important;font-size:20px!important;font-weight:900!important;opacity:1!important;}
@media(max-width:640px){.card .card-actions{gap:5px!important}.card .card-actions .details-toggle{flex-basis:34px!important;width:34px!important;min-width:34px!important;height:30px!important}}
@media(prefers-reduced-motion:reduce){body:not(.dark)::after{animation:none}}

/* Koyu tema için de buz mavisi kar yağışı. */
body.dark::after { content:"❄  ·  ❅     ❄     ·  ❅   ❄     ·  ❄     ❅  ·  ❄     ❅     ·  ❄"; position:fixed; inset:-45px -80px auto; z-index:5000; pointer-events:none; color:#c9f6ff; font-size:25px; letter-spacing:25px; word-spacing:45px; line-height:2.4; opacity:.56; text-shadow:0 0 8px rgba(76,210,255,.62); white-space:pre-wrap; animation:fetrion-visible-snow 12s linear infinite; }
@media(prefers-reduced-motion:reduce){body.dark::after{animation:none}}

/* Ekrana yayılmış farklı büyüklükte, katmanlı kar taneleri. */
body:not(.dark)::after,body.dark::after { content:"❄ · ❅   ❄  · ❄      ❅ · ❄   ❄  ·  ❅    ❄ · ❄    ❅  · ❄   ❄ · ❅"; inset:-100px -40px auto; width:130vw; height:145vh; font-size:clamp(15px,2vw,28px); line-height:3.65; letter-spacing:clamp(18px,4.7vw,78px); word-spacing:clamp(12px,3vw,52px); animation:fetrion-snow-drift 15s linear infinite; transform:rotate(-3deg); }
body:not(.dark)::before { z-index:4999; opacity:.62; background-size:115px 160px,170px 230px,225px 190px,145px 260px,260px 220px; animation:fetrion-snow-specks 10s linear infinite; }
@keyframes fetrion-snow-drift { 0%{transform:translate3d(-3vw,-14vh,0) rotate(-3deg)} 32%{transform:translate3d(2vw,28vh,0) rotate(1deg)} 67%{transform:translate3d(-1vw,73vh,0) rotate(-2deg)} 100%{transform:translate3d(4vw,126vh,0) rotate(2deg)} }
@keyframes fetrion-snow-specks { from{background-position:0 -160px,20px -230px,70px -190px,5px -260px,90px -220px} to{background-position:30px 160px,-12px 230px,108px 190px,37px 260px,145px 220px} }

/* Sürekli ve bağımsız düşen kar taneleri. Önceki toplu katmanı kapatır. */
body::before,body::after{animation:none!important;content:none!important}
#fetrion-snow-layer{position:fixed;inset:0;z-index:5000;pointer-events:none;overflow:hidden}
#fetrion-snow-layer i{position:absolute;left:var(--x);top:-42px;color:#57afc9;font-style:normal;font-size:var(--size);line-height:1;opacity:var(--opacity);text-shadow:0 1px 2px rgba(255,255,255,.8);animation:fetrion-flake-fall var(--duration) linear var(--delay) infinite;will-change:transform}
body.dark #fetrion-snow-layer i{color:#d9f8ff;text-shadow:0 0 7px rgba(70,205,255,.75)}
@keyframes fetrion-flake-fall{from{transform:translate3d(0,-50px,0) rotate(0deg)}25%{transform:translate3d(calc(var(--drift) * .4),25vh,0) rotate(90deg)}55%{transform:translate3d(calc(var(--drift) * -.3),58vh,0) rotate(190deg)}80%{transform:translate3d(calc(var(--drift) * .7),83vh,0) rotate(270deg)}to{transform:translate3d(var(--drift),112vh,0) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#fetrion-snow-layer{display:none}}

@media(max-width:640px){#fetrion-snow-layer i:nth-child(n+29){display:none}#fetrion-snow-layer i{opacity:calc(var(--opacity) * .72);font-size:calc(var(--size) * .86)}}

#devicePanel .table-wrap th,#devicePanel .table-wrap td{padding:8px 9px!important;font-variant-numeric:tabular-nums}
@media(max-width:640px){#devicePanel .table-wrap table{min-width:520px!important}#devicePanel .table-wrap th,#devicePanel .table-wrap td{padding:7px 8px!important;font-size:12px!important}}

/* Dar panelde geçmiş kayıt tablosu: ana ölçüler sığar, ikincil durumlar gizlenir. */
@media(max-width:1050px){#devicePanel .table-wrap{overflow-x:hidden!important}#devicePanel .table-wrap table{min-width:0!important;width:100%!important;table-layout:fixed!important}#devicePanel .table-wrap th,#devicePanel .table-wrap td{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;padding:7px 5px!important;font-size:11px!important}#devicePanel .table-wrap th:nth-child(n+6),#devicePanel .table-wrap td:nth-child(n+6){display:none!important}#devicePanel .table-wrap th:nth-child(1),#devicePanel .table-wrap td:nth-child(1){width:32%!important}#devicePanel .table-wrap th:nth-child(2),#devicePanel .table-wrap td:nth-child(2){width:27%!important}#devicePanel .table-wrap th:nth-child(3),#devicePanel .table-wrap td:nth-child(3){width:13%!important}#devicePanel .table-wrap th:nth-child(4),#devicePanel .table-wrap td:nth-child(4){width:24%!important}#devicePanel .table-wrap th:nth-child(5),#devicePanel .table-wrap td:nth-child(5){width:4%!important}}
@media(min-width:1051px){#devicePanel .table-wrap table{width:100%!important;min-width:0!important;table-layout:auto}#devicePanel .table-wrap th,#devicePanel .table-wrap td{padding:8px 6px!important;font-size:12px!important;white-space:nowrap}}

#devicePanel .device-layout>#historySection{grid-column:1 / -1!important;min-width:0!important;margin:0!important;max-width:100%!important}
#historySection .table-wrap{max-height:330px!important;width:100%!important}
@media(max-width:1050px){#devicePanel .device-layout>#historySection{grid-column:1!important}}

/* Cihaz ikonlarında açık/kapalı durumu iki temada da anında ayırt edilir. */
.card .c-ico{position:relative!important;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important}
.card .c-ico.off{filter:grayscale(.78)!important;opacity:.48!important;box-shadow:none!important}
.card .c-ico.on{opacity:1!important;filter:none!important;transform:translateY(-1px)!important;background:#0d7fa8!important;border-color:#4edbff!important;box-shadow:0 0 0 2px rgba(78,219,255,.24),0 0 14px rgba(39,195,242,.75)!important}
.card .c-ico.on::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#36df89;border:2px solid #08364a;box-shadow:0 0 7px #36df89}
body:not(.dark) .card .c-ico.off{background:#e7edf0!important;color:#687d87!important;border-color:#b3c4ca!important;opacity:.58!important}
body:not(.dark) .card .c-ico.on{background:#057aa5!important;color:#fff!important;border-color:#005a7b!important;box-shadow:0 0 0 3px rgba(0,132,180,.20),0 3px 9px rgba(0,86,118,.28)!important}
body:not(.dark) .card .c-ico.on::after{border-color:#eaf8fc}

/* Aktif ikonun sembolü renk efektinde kaybolmasın. */
.card .c-ico.on{background:rgba(238,252,255,.92)!important;color:initial!important;filter:none!important;box-shadow:0 0 0 2px rgba(78,219,255,.34),0 0 13px rgba(39,195,242,.78)!important}
body:not(.dark) .card .c-ico.on{background:#f4fdff!important;border-color:#0083ad!important;box-shadow:0 0 0 3px rgba(0,132,180,.19),0 3px 9px rgba(0,86,118,.20)!important}
.card .c-ico.on::after{display:none!important}
.card .c-ico{width:38px!important;height:38px!important;font-size:19px!important}
@media(max-width:640px){.card .c-ico{width:34px!important;height:34px!important;font-size:17px!important}.card .c-icons{gap:6px!important}}

/* Dar kartlarda kontrol alanı taşmasın; gerektiğinde ikinci satıra iner. */
.card .c-icons{flex-wrap:wrap!important;row-gap:7px!important}
.card .card-actions{margin-left:auto!important}
@media(max-width:640px){.card .c-icons{gap:5px!important;row-gap:7px!important}.card .card-actions{margin-left:auto!important}.card .card-actions .details-toggle{width:32px!important;min-width:32px!important;flex-basis:32px!important}}

/* Kart alt kontrolleri: not solda, cihaz ikonları ortada, detay sağda. */
.card .c-icons{position:relative!important;display:flex!important;align-items:center!important;min-height:40px!important;flex-wrap:nowrap!important}
.card .device-icon-row{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap}
.card .card-actions{margin-left:0!important;width:100%!important;display:flex!important;justify-content:space-between!important;align-items:center!important;pointer-events:none!important}
.card .card-actions button{pointer-events:auto!important}
.card .card-actions .note-btn{margin-right:auto!important}
.card .card-actions .details-toggle{margin-left:auto!important}
@media(max-width:640px){.card .device-icon-row{gap:4px}.card .c-icons{min-height:36px!important}.card .card-actions .details-toggle{width:34px!important;min-width:34px!important;flex-basis:34px!important}}

/* İkonlar üst satır; not ve detay alt satırda karşılıklı. */
.card .c-icons{min-height:82px!important;align-items:flex-start!important;padding-top:1px!important}
.card .device-icon-row{top:0}
.card .card-actions{position:absolute!important;left:0!important;right:0!important;bottom:0!important;width:auto!important}
@media(max-width:640px){.card .c-icons{min-height:74px!important}.card .device-icon-row{top:0}}

/* Deneme: cihaz kartında Eliwell/COLD FACE tarzı dijital ekran. */
.card .controller-readout{position:relative;margin:14px 0 12px;padding:12px 15px 11px;border-radius:13px;background:linear-gradient(145deg,#071015,#16232a 55%,#060b0e);border:2px solid #26373e;box-shadow:inset 0 0 20px rgba(0,0,0,.8),0 4px 12px rgba(0,0,0,.25);font-family:"Courier New",ui-monospace,monospace;color:#ff8154;overflow:hidden}
.card .controller-readout::before{content:"❄  •  ◉";position:absolute;right:13px;top:9px;color:#ffc15f;font-size:12px;letter-spacing:4px;opacity:.75}.card .controller-label{font:700 9px/1.2 system-ui,sans-serif;letter-spacing:.16em;color:#94b3bd;margin-bottom:2px}.card .controller-readout .c-big{margin:0!important;font-size:42px!important;line-height:1.05;color:#ff8457!important;letter-spacing:-.06em;text-shadow:0 0 10px rgba(255,89,50,.6)}.card .controller-readout .c-unit{font-size:15px!important;color:#ffc0a9!important;margin-left:3px}.card .controller-set{display:flex;align-items:center;gap:7px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(146,190,198,.22);color:#a4d267;font:700 12px/1.1 "Courier New",monospace}.card .controller-set strong{font-size:22px;letter-spacing:.08em;text-shadow:0 0 8px rgba(165,216,101,.48)}
body:not(.dark) .card .controller-readout{background:linear-gradient(145deg,#10191d,#273940 55%,#0a1013);border-color:#7e969d}.card .controller-readout~.c-set{display:none!important}


/* Active customer alarm: make the warning unmistakable without hiding content. */
.card.customer-card-alarm,
body:not(.dark) .card.customer-card-alarm {
  border-color: rgba(255, 72, 72, .92) !important;
  animation: fetrion-customer-alarm-card 1.15s ease-in-out infinite !important;
}
.card.customer-card-alarm .customer-alarm-status,
body:not(.dark) .card.customer-card-alarm .customer-alarm-status {
  display: block;
  margin-top: 9px !important;
  padding: 7px 10px;
  color: #fff !important;
  background: rgba(198, 24, 38, .88);
  border: 1px solid rgba(255, 130, 130, .95);
  border-radius: 9px;
  box-shadow: 0 0 16px rgba(255, 40, 55, .45);
  animation: fetrion-customer-alarm-flash .82s steps(2, end) infinite;
}
.customer-card-alarm .customer-alarm-siren {
  display: inline-block;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.9));
  animation: fetrion-customer-alarm-siren .42s ease-in-out infinite alternate;
}
@keyframes fetrion-customer-alarm-card {
  0%,100% { box-shadow: 0 12px 34px rgba(0,0,0,.20), 0 0 0 1px rgba(255,70,70,.20), 0 0 8px rgba(255,38,52,.16); }
  50% { box-shadow: 0 15px 40px rgba(0,0,0,.28), 0 0 0 3px rgba(255,70,70,.50), 0 0 25px rgba(255,38,52,.62); }
}
@keyframes fetrion-customer-alarm-flash {
  0%,49% { background: rgba(198,24,38,.96); }
  50%,100% { background: rgba(112,8,18,.82); }
}
@keyframes fetrion-customer-alarm-siren {
  from { transform: rotate(-10deg) scale(1); }
  to { transform: rotate(10deg) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .card.customer-card-alarm,
  .card.customer-card-alarm .customer-alarm-status,
  .customer-card-alarm .customer-alarm-siren { animation: none !important; }
}


/* SET numeric value stays readable in both light and dark themes. */
.card .controller-set strong,
body:not(.dark) .card .controller-set strong {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255,255,255,.35), 0 0 8px rgba(165,216,101,.48);
}

/* Oda ve müşteri adları kart başlığında eksiksiz görünsün. */
.card .c-title > div:first-child {
  flex: 1 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 20px;
}
.card .c-title > div:first-child strong,
.card .c-title > div:first-child .c-sub {
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
.card .c-title > div:first-child strong {
  line-height: 1.25;
}
.card .c-title > div:last-child {
  width: 100%;
  margin-left: 0 !important;
  justify-content: space-between;
}

.reports-page{max-width:1000px;margin:0 auto}.report-heading h3{margin:0 0 5px}.report-form{display:grid;grid-template-columns:minmax(220px,2fr) repeat(2,minmax(190px,1fr));gap:14px;align-items:end;margin-top:22px}.report-form label{display:grid;gap:7px;font-weight:700}.report-form select,.report-form input{width:100%;box-sizing:border-box}.report-form button{min-height:44px}.report-message{min-height:22px;margin-top:14px}.report-message.is-error{color:#ff7b7b}.report-message.is-success{color:#63d6a5}.report-info{margin-top:14px;padding:14px;border-radius:10px;background:rgba(22,133,168,.10);line-height:1.55}@media(max-width:800px){.report-form{grid-template-columns:1fr}.reports-page{margin-top:10px}}

.chart-summary,.report-preview{display:grid;grid-template-columns:repeat(5,minmax(95px,1fr));gap:8px;margin-top:10px}.chart-summary>div,.report-preview>div{padding:9px 11px;border:1px solid rgba(78,219,255,.20);border-radius:10px;background:rgba(22,133,168,.09);display:grid;gap:3px}.chart-summary span,.report-preview span{font-size:11px;opacity:.72}.chart-summary strong,.report-preview strong{font-size:15px;font-variant-numeric:tabular-nums}.report-preview{grid-template-columns:repeat(2,minmax(120px,1fr));margin-top:14px}.report-preview>div:nth-child(2){border-color:rgba(255,80,104,.30)}
@media(max-width:800px){.chart-summary{grid-template-columns:repeat(2,minmax(120px,1fr))}.report-preview{grid-template-columns:1fr}.metric-controls{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overscroll-behavior-x:contain;padding-bottom:7px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.metric-controls>span,.metric-controls>button{flex:0 0 auto!important;white-space:nowrap!important}}