*{box-sizing:border-box}

:root{
  --bg:#07152f;
  --panel:#0d2448;
  --panel2:#102b57;
  --line:#24456f;
  --txt:#f4f8ff;
  --muted:#a9bbd7;
  --green:#30f27d;
  --yellow:#ffc928;
  --red:#f23a56;
  --cyan:#28d8ff;
  --violet:#9d54ff;
}

html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 75% 7%,rgba(0,102,255,.16),transparent 34rem),
    linear-gradient(180deg,#071934 0%,#071226 100%);
  font-family:Arial,Helvetica,sans-serif;
  color:var(--txt);
}

body{overflow-x:hidden}

.dashboard{
  width:min(100%,1420px);
  margin:0 auto;
  padding:14px 16px 16px;
}

/* ===== HEADER ===== */
.topbar{
  min-height:70px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  gap:22px;
  align-items:center;
  margin-bottom:12px;
}

.lang-switch{
  justify-self:center;
}

.online-pill{
  justify-self:end;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand-icon{
  font-size:38px;
  color:#b7cbeb;
  line-height:1;
  filter:drop-shadow(0 0 10px rgba(40,216,255,.18));
}

.brand h1{
  margin:0;
  font-size:23px;
  line-height:1.08;
  letter-spacing:.2px;
}

.brand p{
  margin:5px 0 0;
  color:#c2d1e8;
  font-size:14px;
  line-height:1.2;
}

.status-head{
  text-align:center;
  align-self:center;
}

.updated-label{
  color:#a8b8d0;
  font-size:13px;
  line-height:1.2;
}

.updated-time{
  margin-top:4px;
  font-weight:900;
  font-size:19px;
  line-height:1.25;
  white-space:nowrap;
}

.online-pill{
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:9px;
  background:#0c6b53;
  border:1px solid rgba(48,242,125,.28);
  padding:11px 17px;
  color:#dfffea;
  font-weight:900;
  white-space:nowrap;
}

.online-pill span{
  width:13px;
  height:13px;
  border:3px solid var(--green);
  border-radius:50%;
  display:block;
}

/* ===== MASTER GRID ===== */
.grid-main{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
  align-items:start;
}

.panel{
  background:linear-gradient(145deg,rgba(16,42,84,.93),rgba(8,27,57,.96));
  border:1px solid rgba(107,153,213,.40);
  box-shadow:0 12px 45px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  border-radius:9px;
  padding:14px;
}

.panel-title{
  font-weight:900;
  font-size:14px;
  line-height:1.1;
  margin:0 0 12px;
}


/* =====================================================================
   🟢 JARDA NÁPOVĚDA – HORNÍ GAUGE BOXY
   ---------------------------------------------------------------------
   Platí společně pro všechny 4 horní budíky:
   Kp INDEX / A-INDEX / SFI / SUNSPOTS

   🟡 Rychlé ladění:
      - výška boxu ............. .gauge-card { height / min-height }
      - velikost půlkruhu ...... .gauge { width }
      - tloušťka ručičky ....... .gauge-needle { width }
      - délka ručičky .......... .gauge-needle { height }
      - číslo hodnoty .......... .gauge-card strong { font-size }
      - text pod číslem ........ .gauge-card small { font-size }
      - nuly / stupnice ........ .gauge-scale { width / margin }

   🔴 DŮLEŽITÉ:
      Tohle je jediné hlavní místo pro úpravu horních budíků.
      Nepřidávej další .gauge-card / .gauge / .gauge-scale bloky dolů,
      jinak se to zase začne přepisovat a bude v tom guláš :-)
   ===================================================================== */

.gauge-row{
  grid-column:1 / span 8;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

/* 🟢 CELÝ BOX BUDÍKU
   height/min-height = celková výška horních čtyř boxů
   padding = vnitřní mezery boxu */
.gauge-card{
  height:170px;
  min-height:170px;
  text-align:center;
  padding:9px 10px 8px;
  overflow:visible;
}

/* 🟢 NADPIS BOXU – například Kp INDEX */
.gauge-card h3{
  margin:0 0 5px;
  font-size:13px;
  line-height:1.1;
  font-weight:900;
}

/* 🟢 BAREVNÝ PŮLKRUH
   width = velikost budíku */
.gauge{
  --p:0;
  position:relative;
  width:118px;
  max-width:100%;
  aspect-ratio:2/1;
  margin:0 auto;
  overflow:visible;
  border-radius:120px 120px 0 0;
  background:conic-gradient(from 270deg at 50% 100%,#22b568 0deg,#8ee857 42deg,#ffca2d 92deg,#ef3954 180deg,transparent 181deg);
}

/* 🟢 VNITŘNÍ TMAVÝ PŮLKRUH – tvoří tloušťku barevného oblouku */
.gauge:after{
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:calc(100% - 14px);
  background:#0b2349;
  border-radius:100px 100px 0 0;
  box-shadow:inset 0 12px 24px rgba(0,0,0,.23);
}

/* 🟢 RUČIČKA BUDÍKU
   width = tloušťka ručičky
   height = délka ručičky */
.gauge-needle{
  position:absolute;
  left:50%;
  bottom:1px;
  z-index:4;
  width:2px;
  height:82%;
  background:linear-gradient(180deg,#fff,#dbeaff);
  box-shadow:0 0 10px rgba(255,255,255,.92),0 0 20px rgba(180,215,255,.38);
  transform-origin:bottom center;
  transform:rotate(calc(-90deg + var(--p)*180deg));
}

/* 🟢 BÍLÝ STŘED RUČIČKY */
.gauge-needle:after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-5px;
  width:10px;
  height:10px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#f7fbff;
  box-shadow:0 0 12px rgba(255,255,255,.9);
}

/* 🟢 STUPNICE 0–9 / 0–100 / 0–300
   width = roztažení čísel vlevo/vpravo
   margin = svislé posunutí stupnice */
.gauge-scale{
  width:126px;
  max-width:none;
  overflow:visible;
  padding:0 8px;
  margin:0px auto 3px;
  display:flex;
  justify-content:space-between;
  color:#e5eefc;
  font-weight:900;
  font-size:14px;
  line-height:1;
}

/* 🟢 ČÍSLA STUPNICE – samotné 0 / 9 / 100 / 300
   position/top = posunuje POUZE čísla stupnice nahoru nebo dolů
   top: 5px  = čísla níž
   top:-5px  = čísla výš
   Tohle je přesnější než margin u .gauge-scale */
.gauge-scale span{
  display:block;
  min-width:20px;
  position:relative;
  top:5px;
}

.gauge-scale span:first-child{
  text-align:left;
  margin-left:-6px;
}

.gauge-scale span:last-child{
  text-align:right;
  margin-right:-6px;
}

/* 🟢 HLAVNÍ ČÍSLO – například 1.7 */
.gauge-card strong{
  display:block;
  font-size:29px;
  line-height:1;
  margin-top:1px;
  font-weight:900;
}

/* 🟢 POPISEK POD ČÍSLEM – například Klidná / Aktivní */
.gauge-card small{
  display:block;
  margin-top:3px;
  font-size:14px;
  line-height:1.05;
  font-weight:900;
}

/* 🟡 NOTEBOOK / MENŠÍ ZOBRAZENÍ – 1920×1080 při 150 % měřítku */
@media(max-width:1350px){
  .gauge-row{gap:8px;}

  .gauge-card{
    height:150px;
    min-height:150px;
    padding:8px 9px 7px;
  }

  .gauge-card h3{font-size:11px;margin-bottom:4px;}
  .gauge{width:102px;}
  .gauge-scale{width:116px;font-size:12px;padding:0 6px;margin:-3px auto 2px;}
  .gauge-scale span{top:4px;}
  .gauge-scale span:first-child{margin-left:-4px;}
  .gauge-scale span:last-child{margin-right:-4px;}
  .gauge-card strong{font-size:24px;}
  .gauge-card small{font-size:14px;}
}

/* 🟡 VELKÝ MONITOR – čitelné, ale bez zbytečného scrollu */
@media (min-width:1450px) and (min-height:900px){
  .gauge-card{
    height:160px;
    min-height:160px;
    padding:9px 10px 8px;
  }

  .gauge-card h3{font-size:12px;margin-bottom:5px;}
  .gauge{width:112px;}
  .gauge-scale{width:122px;font-size:13px;padding:0 8px;margin:-2px auto 3px;}
  .gauge-scale span{top:4px;}
  .gauge-scale span:first-child{margin-left:-5px;}
  .gauge-scale span:last-child{margin-right:-5px;}
  .gauge-card strong{font-size:27px;}
  .gauge-card small{font-size:14px;}
}

/* ===== SOLAR TOP RIGHT ===== */
.solar-card{
  grid-column:9 / span 4;
  height:170px;
  min-height:170px;
  padding:12px 14px;
  overflow:hidden;
}

.solar-card .panel-title{
  font-size:17px;
  margin-bottom:7px;
}

.solar-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 104px;
  gap:12px;
  align-items:center;
}

.solar-list div{
  min-height:21px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  border-bottom:1px solid rgba(255,255,255,.09);
  padding:4px 3px;
  color:#d3e1f6;
  font-size:12px;
  line-height:1.2;
}

.solar-list strong{
  color:var(--green);
  font-size:15px;
  line-height:1.1;
  font-weight:900;
  white-space:nowrap;
}

.sun-art{
  position:relative;
  width:88px;
  height:88px;
  margin:0 auto;
  border-radius:50%;
  background-image:url("img/slunce.jpg");
  background-size:cover;
  background-position:center center;
  box-shadow:0 0 16px rgba(255,110,0,.9),0 0 38px rgba(255,60,0,.56),0 0 70px rgba(255,0,0,.22);
  overflow:visible;
}

.sun-art:before,.sun-art:after{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,85,0,.20),transparent 68%);
  filter:blur(8px);
  pointer-events:none;
}

/* ===== IONO LEFT ===== */
.iono-card{
  grid-column:1 / span 8;
}

.line-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.line-title em{
  font-style:normal;
  color:#a9bcdb;
  font-size:13px;
}

.live-mini{
  font-size:11px;
  background:#19b86f;
  color:#fff;
  padding:4px 9px;
  border-radius:999px;
  margin-left:8px;
}

.iono-metrics{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;
  margin-bottom:14px;
}

.iono-metrics div{
  min-height:84px;
  background:#102b59;
  border:1px solid rgba(78,140,216,.5);
  border-radius:8px;
  text-align:center;
  padding:9px 7px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.iono-metrics span{
  font-weight:900;
  font-size:13px;
}

.iono-metrics strong{
  display:block;
  color:var(--green);
  font-size:24px;
  margin:7px 0 4px;
  white-space:nowrap;
}

.iono-metrics small{
  font-size:10px;
  color:#e1eaf8;
}

.iono-metrics div:nth-child(1){border-color:#30f27d;box-shadow:inset 0 0 18px rgba(48,242,125,.10),0 0 16px rgba(48,242,125,.14)}
.iono-metrics div:nth-child(1) strong{color:#30f27d}
.iono-metrics div:nth-child(2){border-color:#ffc928;box-shadow:inset 0 0 18px rgba(255,201,40,.10),0 0 16px rgba(255,201,40,.13)}
.iono-metrics div:nth-child(2) strong{color:#ffc928}
.iono-metrics div:nth-child(3){border-color:#28d8ff;box-shadow:inset 0 0 18px rgba(40,216,255,.10),0 0 16px rgba(40,216,255,.13)}
.iono-metrics div:nth-child(3) strong{color:#28d8ff}
.iono-metrics div:nth-child(4){border-color:#a85bff;box-shadow:inset 0 0 18px rgba(168,91,255,.11),0 0 16px rgba(168,91,255,.15)}
.iono-metrics div:nth-child(4) strong{color:#a85bff}
.iono-metrics div:nth-child(5){border-color:#ff5faf;box-shadow:inset 0 0 18px rgba(255,95,175,.11),0 0 16px rgba(255,95,175,.15)}
.iono-metrics div:nth-child(5) strong{color:#ff5faf}
.iono-metrics div:nth-child(6){border-color:#ffe04a;box-shadow:inset 0 0 18px rgba(255,224,74,.12),0 0 16px rgba(255,224,74,.14)}
.iono-metrics div:nth-child(6) strong{color:#ffe04a}

.iono-card h4{
  margin:9px 0 6px;
  color:#b9cbe7;
  font-size:14px;
  line-height:1.15;
}

canvas{
  display:block;
  width:100%;
  background:linear-gradient(180deg,rgba(12,34,71,.64),rgba(8,25,54,.34));
  border:1px solid rgba(255,255,255,.07);
}

#fof2Chart{height:126px!important}
#mufChart{height:110px!important}
#historyChart{height:175px!important}

.chart-tooltip{
  position:absolute;
  z-index:9999;
  pointer-events:none;
  min-width:136px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(4,15,35,.96);
  border:1px solid rgba(155,205,255,.55);
  color:#f4f8ff;
  font-size:12px;
  line-height:1.38;
  box-shadow:0 10px 30px rgba(0,0,0,.48);
  display:none;
  white-space:nowrap;
}

/* ===== BANDS RIGHT ===== */
.bands-card{
  grid-column:9 / span 4;
}

/* =====================================================================
   🟢 JARDA NÁPOVĚDA – ZAROVNÁNÍ IONO + PÁSMOVÝ BOX
   ---------------------------------------------------------------------
   Tohle dorovnává spodní hranu těchto dvou boxů ve stejné řadě:
   - vlevo:  IONOSPHERIC DATA – DOURBES
   - vpravo: PROPAGAČNÍ PODMÍNKY NA PÁSMECH

   🟡 Jak to funguje:
      align-self: stretch = box se natáhne na výšku řádku v CSS gridu.
      Pravý box s tabulkou většinou určí výšku řádku a levý se mu dorovná.

   🔴 DŮLEŽITÉ:
      Nedávej sem pevnou výšku typu height:392px.
      Pevná výška funguje jen na jednom monitoru a jinde se zase rozjede.
   ===================================================================== */
.iono-card,
.bands-card{
  align-self:stretch;
}


.bands-card table{
  width:100%;
  border-collapse:collapse;
}

.bands-card th,.bands-card td{
  padding:9px 6px;
  border-bottom:1px solid rgba(255,255,255,.075);
  text-align:left;
  vertical-align:middle;
}

.bands-card th{
  font-size:13px;
}

.badge{
  display:inline-flex;
  justify-content:center;
  min-width:82px;
  border-radius:8px;
  padding:6px 8px;
  font-weight:900;
  font-size:11px;
  border:1px solid;
}

.good{background:rgba(48,242,125,.20);color:#75ffad;border-color:rgba(48,242,125,.28)}
.fair{background:rgba(255,201,40,.18);color:#ffe26e;border-color:rgba(255,201,40,.32)}
.poor{background:rgba(242,58,86,.20);color:#ff8b9d;border-color:rgba(242,58,86,.34)}

/* ===== BOTTOM ROW ===== */
.geomag-card{
  grid-column:1 / span 8;
  height:214px;
  min-height:214px;
  padding:12px 14px 10px;
  overflow:hidden;
}

.geomag-status{
  min-height:44px;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  margin-bottom:8px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.12);
}

.geomag-status strong{font-size:17px;line-height:1.05}
.geomag-status span{font-size:10px;line-height:1.15}
.geomag-status.calm{background:linear-gradient(135deg,rgba(48,242,125,.30),rgba(24,91,82,.7))}
.geomag-status.active{background:linear-gradient(135deg,rgba(255,201,40,.30),rgba(119,74,23,.7))}
.geomag-status.storm{background:linear-gradient(135deg,rgba(242,58,86,.34),rgba(85,27,54,.75))}

.mini-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:8px;
}

.mini-metrics div{
  background:#102b59;
  border:1px solid rgba(78,140,216,.35);
  border-radius:8px;
  text-align:center;
  padding:7px 8px 5px;
}

.mini-metrics span,.mini-metrics small{
  display:block;
  color:#b8c9e3;
  font-size:11px;
  line-height:1.05;
}

.mini-metrics strong{
  display:block;
  color:var(--green);
  font-size:17px;
  line-height:1.05;
}

.stormbar{
  height:10px;
  margin:7px 4px 3px;
  border-radius:999px;
  background:linear-gradient(90deg,#35f271,#fff455,#ff982d,#f23a56);
  position:relative;
}

.stormbar span{
  position:absolute;
  top:-7px;
  left:0;
  width:0;
  height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:12px solid #fff;
}

.stormlabels{
  display:flex;
  justify-content:space-between;
  font-size:10px;
}

.history-card{
  grid-column:9 / span 4;
  height:214px;
  min-height:214px;
  padding:12px 14px 10px;
  overflow:hidden;
}

.legend{
  display:flex;
  gap:22px;
  justify-content:center;
  margin-top:8px;
  font-size:11px;
}

.lg:before{
  content:'';
  display:inline-block;
  width:24px;
  height:3px;
  margin-right:6px;
  vertical-align:middle;
  background:currentColor;
}

.lg.sfi{color:var(--green)}
.lg.kp{color:var(--cyan)}
.lg.a{color:var(--yellow)}

.footer{
  margin-top:12px;
  min-height:42px;
  padding:12px 16px;
  border-radius:8px;
  background:linear-gradient(145deg,rgba(16,42,84,.85),rgba(8,27,57,.94));
  border:1px solid rgba(107,153,213,.32);
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  align-items:center;
  color:#b9cbe7;
  font-size:13px;
}

.footer b{
  color:#fff;
  margin-left:auto;
}

/* ===== NOTEBOOK 1920 / 150 % ===== */
@media(max-width:1350px){
  .dashboard{
    width:100%;
    padding:10px 12px 12px;
  }

  .topbar{
    min-height:62px;
    margin-bottom:10px;
  }

  .brand h1{font-size:20px}
  .brand p{font-size:12px}
  .updated-time{font-size:17px}
  .online-pill{padding:9px 14px}

  .grid-main{
    gap:10px;
  }

  .panel{
    padding:12px;
  }

  .solar-card{
    height:150px;
    min-height:150px;
    padding:9px 9px 7px;
  }

  .solar-card .panel-title{font-size:15px;margin-bottom:5px}
  .solar-grid{grid-template-columns:minmax(0,1fr) 84px;gap:8px}
  .solar-list div{min-height:18px;padding:3px 2px;font-size:10px}
  .solar-list strong{font-size:13px}
  .sun-art{width:70px;height:70px}

  .iono-metrics{gap:7px}
  .iono-metrics div{min-height:72px;padding:7px 5px}
  .iono-metrics strong{font-size:20px}
  .iono-metrics span{font-size:11px}
  .iono-metrics small{font-size:9px}

  #fof2Chart{height:110px!important}
  #mufChart{height:92px!important}
  #historyChart{height:150px!important}

  .geomag-card,.history-card{
    height:190px;
    min-height:190px;
  }

  .bands-card th,.bands-card td{
    padding:7px 5px;
  }

  .badge{
    min-width:72px;
    padding:5px 6px;
    font-size:10px;
  }
}

/* ===== MOBILE ===== */
@media(max-width:900px){
  .topbar{
    grid-template-columns:1fr;
    gap:10px;
  }

  .status-head{
    text-align:left;
  }

  .grid-main{
    display:block;
  }

  .panel,.gauge-row{
    margin-bottom:12px;
  }

  .gauge-row{
    grid-template-columns:repeat(2,1fr);
  }

  .gauge-card,.solar-card,.geomag-card,.history-card{
    height:auto;
    min-height:auto;
  }

  .solar-grid{
    grid-template-columns:1fr;
  }

  .sun-art{
    display:none;
  }

  .footer b{
    margin-left:0;
  }
}

@media(max-width:560px){
  .gauge-row{
    grid-template-columns:1fr;
  }

  .iono-metrics{
    grid-template-columns:repeat(2,1fr);
  }

  .brand-icon{
    display:none;
  }

  .brand h1{
    font-size:19px;
  }

  .online-pill{
    width:max-content;
  }
}


/* ===== OK7JN LARGE MONITOR BALANCED MODE ===== */
/* Méně smrsknuté než předchozí NO-SCROLL, ale pořád bez zbytečného scrollu na 1920x1080 */
@media (min-width:1450px) and (min-height:900px){

  html,
  body{
    overflow:hidden !important;
    height:100vh !important;
  }

  .dashboard{
    max-width:1540px !important;
    padding:12px 16px 10px !important;
  }

  .topbar{
    min-height:66px !important;
    margin-bottom:10px !important;
  }

  .brand h1{
    font-size:23px !important;
  }

  .brand p{
    font-size:13px !important;
    margin-top:4px !important;
  }

  .updated-label{
    font-size:12px !important;
  }

  .updated-time{
    font-size:18px !important;
    margin-top:3px !important;
  }

  .online-pill{
    padding:10px 16px !important;
    font-size:15px !important;
  }

  .grid-main{
    gap:10px !important;
  }

  .panel{
    padding:12px !important;
  }

  .panel-title{
    font-size:18px !important;
    margin-bottom:10px !important;
  }

  /* horní řada - vráceno do čitelnější velikosti */
  .solar-card{
    height:160px !important;
    min-height:160px !important;
  }

  .solar-card .panel-title{
    font-size:17px !important;
    margin-bottom:7px !important;
  }

  .solar-grid{
    grid-template-columns:minmax(0,1fr) 100px !important;
    gap:10px !important;
  }

  .solar-list div{
    min-height:20px !important;
    padding:3px 3px !important;
    font-size:11px !important;
  }

  .solar-list strong{
    font-size:14px !important;
  }

  .sun-art{
    width:82px !important;
    height:82px !important;
  }

  /* ionosféra - větší a čitelnější */
  .iono-metrics{
    gap:8px !important;
    margin-bottom:12px !important;
  }

  .iono-metrics div{
    min-height:78px !important;
    padding:8px 6px !important;
  }

  .iono-metrics span{
    font-size:12px !important;
  }

  .iono-metrics strong{
    font-size:22px !important;
    margin:6px 0 3px !important;
  }

  .iono-metrics small{
    font-size:9px !important;
  }

  .iono-card h4{
    font-size:13px !important;
    margin:7px 0 5px !important;
  }

  #fof2Chart{
    height:108px !important;
  }

  #mufChart{
    height:92px !important;
  }

  /* tabulka pásem - ne tak drobná */
  .bands-card th,
  .bands-card td{
    padding:7px 5px !important;
    font-size:12px !important;
  }

  .badge{
    min-width:74px !important;
    padding:5px 6px !important;
    font-size:10px !important;
  }

  /* spodní řada */
  .geomag-card,
  .history-card{
    height:190px !important;
    min-height:190px !important;
  }

  .geomag-status{
    min-height:40px !important;
    margin-bottom:7px !important;
  }

  .geomag-status strong{
    font-size:16px !important;
  }

  .geomag-status span{
    font-size:9px !important;
  }

  .mini-metrics{
    gap:7px !important;
    margin-bottom:6px !important;
  }

  .mini-metrics div{
    padding:6px 5px !important;
  }

  .mini-metrics span,
  .mini-metrics small{
    font-size:10px !important;
  }

  .mini-metrics strong{
    font-size:16px !important;
  }

  .stormbar{
    height:9px !important;
    margin:6px 3px 2px !important;
  }

  .stormlabels{
    font-size:9px !important;
  }

  #historyChart{
    height:142px !important;
  }

  .legend{
    margin-top:6px !important;
    font-size:10px !important;
    gap:18px !important;
  }

  .lg:before{
    width:22px !important;
  }

  .footer{
    margin-top:10px !important;
    min-height:36px !important;
    padding:9px 12px !important;
    font-size:11px !important;
    gap:14px !important;
  }
}


/* =====================================================================
   🟢 JARDA NÁPOVĚDA – LIVE OTA SPOTY V HF PROPAGATION DASHBOARDU
   ---------------------------------------------------------------------
   Tohle je nový prostřední spodní box s aktuálními OTA spoty.

   🟡 Rychlé ladění:
      - výška boxu ............. .live-ota-card { height / min-height }
      - výška scroll seznamu ... .live-ota-list { max-height }
      - počet řádků v JS ....... LIVE_OTA_MAX_VISIBLE v app.js
      - zdroj dat .............. LIVE_OTA_URL v app.js
      - barvy pásem ............ .band-20m / .band-40m / .band-2m ... níže

   🔴 DŮLEŽITÉ:
      LIVE OTA používá /live_ota/data/all_live.json, protože obsahuje
      TOTA/BOTA/SOTA/POTA/WWFF v jednom společném feedu.
   ===================================================================== */
.live-ota-card{
  grid-column:5 / span 4;
  height:214px;
  min-height:214px;
  padding:12px 14px 10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.live-ota-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.live-ota-title span{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.live-ota-toggle{
  width:22px;
  height:22px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#eaf3ff;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}

.live-ota-programs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:7px;
}

.program-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:22px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#e9f2ff;
  font-size:10px;
  line-height:1;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.program-chip b{
  min-width:20px;
  padding:3px 6px;
  border-radius:999px;
  text-align:center;
  background:rgba(0,0,0,.24);
}

.program-chip.muted{
  color:#b8c9e3;
}

.program-tota{border-color:rgba(255,79,166,.55);background:rgba(255,79,166,.17)}
.program-bota{border-color:rgba(255,160,38,.55);background:rgba(255,160,38,.16)}
.program-sota{border-color:rgba(185,206,235,.45);background:rgba(185,206,235,.12)}
.program-pota{border-color:rgba(45,123,255,.55);background:rgba(45,123,255,.18)}
.program-wwff{border-color:rgba(48,242,125,.42);background:rgba(48,242,125,.14)}

.live-ota-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(145,184,236,.55) rgba(255,255,255,.06);
}

.live-ota-list::-webkit-scrollbar{width:7px}
.live-ota-list::-webkit-scrollbar-thumb{background:rgba(145,184,236,.55);border-radius:999px}
.live-ota-list::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}

.live-ota-row{
  min-height:42px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:7px 4px 7px 0;
  border-bottom:1px solid rgba(255,255,255,.075);
}

.band-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  box-shadow:0 0 14px currentColor;
  background:currentColor;
}

.band-pill{
  display:inline-flex;
  justify-content:center;
  min-width:38px;
  border-radius:999px;
  padding:5px 6px;
  color:#06152d;
  font-size:10px;
  line-height:1;
  font-weight:900;
  background:currentColor;
  box-shadow:0 0 12px color-mix(in srgb,currentColor 30%,transparent);
}

.live-ota-main{
  min-width:0;
}

.live-ota-main strong{
  display:block;
  color:#ffffff;
  font-size:14px;
  line-height:1.1;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.live-ota-main small{
  display:block;
  margin-top:3px;
  color:#b9cbe7;
  font-size:11px;
  line-height:1.1;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.live-ota-side{
  text-align:right;
  min-width:48px;
}

.live-ota-side b{
  display:block;
  color:#f5f9ff;
  font-size:11px;
  line-height:1.05;
}

.live-ota-side small{
  display:block;
  margin-top:5px;
  color:#a9bbd7;
  font-size:10px;
  line-height:1;
}

.live-ota-more,
.live-ota-empty{
  padding:9px 0 2px;
  color:#b9cbe7;
  font-size:12px;
  font-weight:800;
}

.live-ota-card.is-collapsed .live-ota-programs,
.live-ota-card.is-collapsed .live-ota-list{
  display:none;
}

.live-ota-card.is-collapsed{
  height:auto;
  min-height:0;
}

/* 🟢 BARVY PÁSEM – tečka a badge v LIVE OTA řádcích */
.band-160m{color:#9b2335}
.band-80m{color:#d83a4a}
.band-60m{color:#e85d32}
.band-40m{color:#ff982d}
.band-30m{color:#ffd13d}
.band-20m{color:#35e875}
.band-17m{color:#23d8b8}
.band-15m{color:#28d8ff}
.band-12m{color:#5196ff}
.band-10m{color:#8a6dff}
.band-6m{color:#b85cff}
.band-2m{color:#ff4fa6}
.band-70cm{color:#f06bd6}
.band-shf{color:#c7d4e8}
.band---,
.band-unknown{color:#8fa4c8}

/* 🟢 NOVÉ SPODNÍ ZAROVNÁNÍ – 3 boxy vedle sebe */
.geomag-card{
  grid-column:1 / span 4;
}
.history-card{
  grid-column:9 / span 4;
}

@media(max-width:1350px){
  .live-ota-card{
    height:190px;
    min-height:190px;
    padding:10px 12px 9px;
  }
  .live-ota-row{
    min-height:38px;
    grid-template-columns:30px minmax(0,1fr) auto;
    gap:7px;
    padding:6px 3px 6px 0;
  }
  .live-ota-main strong{font-size:13px}
  .live-ota-main small{font-size:10px}
  .program-chip{font-size:9px;padding:4px 7px}
}

@media(max-width:900px){
  .live-ota-card{
    height:auto;
    min-height:auto;
    margin-bottom:12px;
  }
  .live-ota-list{
    max-height:280px;
  }
}

@media (min-width:1450px) and (min-height:900px){
  .live-ota-card{
    height:190px !important;
    min-height:190px !important;
    padding:12px !important;
  }
  .live-ota-title{
    margin-bottom:7px !important;
  }
  .live-ota-row{
    min-height:34px !important;
    grid-template-columns:10px 36px minmax(0,1fr) auto !important;
    gap:7px !important;
    padding:5px 3px 5px 0 !important;
  }
  .live-ota-main strong{font-size:13px !important}
  .live-ota-main small{font-size:10px !important}
  .live-ota-side b{font-size:10px !important}
  .live-ota-side small{font-size:9px !important}
  .program-chip{min-height:20px !important;padding:4px 7px !important;font-size:9px !important}
}


.program-chip{
  cursor:pointer;
  transition:all .18s ease;
}
.program-chip.is-off{
  opacity:.35;
  filter:grayscale(1);
}
.program-chip:hover{
  transform:translateY(-1px);
}


/* =====================================================================
   🟢 OK7JN – WIDE RIGHT RAIL LAYOUT PRO LIVE OTA
   ---------------------------------------------------------------------
   Velký monitor: LIVE OTA SPOTY je samostatný vysoký panel úplně vpravo.
   Levá část zůstává pro propagation data, grafy a geomagnetiku.

   🟡 Ladění:
      - šířka celého dashboardu ..... .dashboard max-width
      - šířka pravého LIVE sloupce ... .grid-main columns / .live-ota-card
      - počet vykreslených spotů ..... LIVE_OTA_MAX_VISIBLE v app.js

   🔴 Poznámka:
      Tento blok je schválně úplně dole, aby přepsal starší pravidla výše
      a nemusely se zase přidávat další hacky někam doprostřed CSS.
   ===================================================================== */
@media (min-width:1450px){
  html,
  body{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    height:auto !important;
  }

  .dashboard{
    width:min(96vw,1840px) !important;
    max-width:1840px !important;
    margin:0 auto !important;
  }

  .grid-main{
    grid-template-columns:repeat(16,minmax(0,1fr)) !important;
    grid-auto-flow:dense !important;
    gap:12px !important;
    align-items:stretch !important;
  }

  /* horní řada vlevo: 4 budíky */
  .gauge-row{
    grid-column:1 / span 7 !important;
    grid-row:1 !important;
  }

  /* horní střed: SOLAR */
  .solar-card{
    grid-column:8 / span 4 !important;
    grid-row:1 !important;
  }

  /* velký pravý sloupec: LIVE OTA */
  .live-ota-card{
    grid-column:12 / span 5 !important;
    grid-row:1 / span 3 !important;
    height:auto !important;
    min-height:0 !important;
    align-self:stretch !important;
    padding:14px 16px 12px !important;
  }

  /* druhá řada vlevo/střed */
  .iono-card{
    grid-column:1 / span 7 !important;
    grid-row:2 !important;
  }

  .bands-card{
    grid-column:8 / span 4 !important;
    grid-row:2 !important;
  }

  /* spodní řada pod grafy */
  .geomag-card{
    grid-column:1 / span 5 !important;
    grid-row:3 !important;
  }

  .history-card{
    grid-column:6 / span 6 !important;
    grid-row:3 !important;
  }

  .footer{
    width:100% !important;
  }

  .live-ota-title{
    margin-bottom:12px !important;
  }

  .live-ota-programs{
    gap:8px !important;
    margin-bottom:12px !important;
  }

  .program-chip{
    min-height:25px !important;
    padding:5px 10px !important;
    font-size:11px !important;
  }

  .program-chip b{
    min-width:24px !important;
  }

  .live-ota-row{
    min-height:58px !important;
    grid-template-columns:12px 48px minmax(0,1fr) 58px !important;
    gap:10px !important;
    padding:9px 4px 9px 0 !important;
  }

  .band-dot{
    width:10px !important;
    height:10px !important;
  }

  .band-pill{
    min-width:44px !important;
    padding:6px 8px !important;
    font-size:11px !important;
  }

  .live-ota-main strong{
    font-size:16px !important;
    line-height:1.1 !important;
  }

  .live-ota-main small{
    font-size:12px !important;
    line-height:1.2 !important;
  }

  .live-ota-side b{
    font-size:12px !important;
  }

  .live-ota-side small{
    font-size:11px !important;
  }

  .live-ota-more,
  .live-ota-empty{
    font-size:13px !important;
    padding-top:12px !important;
  }
}

/* Na opravdu širokých monitorech může být pravý LIVE sloupec ještě pohodlnější. */
@media (min-width:1700px){
  .grid-main{
    grid-template-columns:repeat(18,minmax(0,1fr)) !important;
  }
  .gauge-row{grid-column:1 / span 8 !important;}
  .solar-card{grid-column:9 / span 4 !important;}
  .live-ota-card{grid-column:13 / span 6 !important;}
  .iono-card{grid-column:1 / span 8 !important;}
  .bands-card{grid-column:9 / span 4 !important;}
  .geomag-card{grid-column:1 / span 5 !important;}
  .history-card{grid-column:6 / span 7 !important;}
}


/* =====================================================================
   🟢 OK7JN – FINÁLNÍ ZAROVNÁNÍ + SCROLL PRO LIVE OTA RIGHT RAIL
   ---------------------------------------------------------------------
   Cíl:
   - celý dashboard se na velkém monitoru vejde do výšky obrazovky
   - LIVE OTA SPOTY zůstane vpravo jako vysoký panel
   - dlouhý seznam spotů roluje uvnitř boxu, ne celá stránka

   🟡 Rychlé ladění:
      --live-rail-top-space = kolik výšky zabere hlavička + okraje
      .live-ota-row min-height = výška jednoho spotu
      .live-ota-card grid-column = šířka pravého sloupce
   ===================================================================== */
@media (min-width:1450px){
  :root{
    --live-rail-top-space:104px;
  }

  html,
  body{
    height:100vh !important;
    overflow:hidden !important;
  }

  .dashboard{
    width:min(98vw,1860px) !important;
    max-width:1860px !important;
    height:100vh !important;
    margin:0 auto !important;
    padding:10px 14px 10px !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
  }

  .topbar{
    flex:0 0 auto !important;
    min-height:62px !important;
    margin-bottom:9px !important;
  }

  .grid-main{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:calc(100vh - var(--live-rail-top-space)) !important;
    grid-template-columns:repeat(16,minmax(0,1fr)) !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    gap:10px !important;
    align-items:stretch !important;
  }

  .footer{
    display:none !important;
  }

  .gauge-row{
    grid-column:1 / span 7 !important;
    grid-row:1 !important;
  }

  .solar-card{
    grid-column:8 / span 4 !important;
    grid-row:1 !important;
  }

  .iono-card{
    grid-column:1 / span 7 !important;
    grid-row:2 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .bands-card{
    grid-column:8 / span 4 !important;
    grid-row:2 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .geomag-card{
    grid-column:1 / span 5 !important;
    grid-row:3 !important;
  }

  .history-card{
    grid-column:6 / span 6 !important;
    grid-row:3 !important;
  }

  .live-ota-card{
    grid-column:12 / span 5 !important;
    grid-row:1 / span 3 !important;
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
    align-self:stretch !important;
    display:flex !important;
    flex-direction:column !important;
    padding:13px 15px 12px !important;
  }

  .live-ota-title,
  .live-ota-programs{
    flex:0 0 auto !important;
  }

  .live-ota-list{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    padding-right:6px !important;
  }

  .live-ota-row{
    min-height:50px !important;
    grid-template-columns:36px minmax(0,1fr) 56px !important;
    gap:9px !important;
    padding:7px 4px 7px 0 !important;
  }
}

@media (min-width:1700px){
  .grid-main{
    grid-template-columns:repeat(18,minmax(0,1fr)) !important;
  }

  .gauge-row{grid-column:1 / span 8 !important;}
  .solar-card{grid-column:9 / span 4 !important;}
  .live-ota-card{grid-column:13 / span 6 !important;}
  .iono-card{grid-column:1 / span 8 !important;}
  .bands-card{grid-column:9 / span 4 !important;}
  .geomag-card{grid-column:1 / span 5 !important;}
  .history-card{grid-column:6 / span 7 !important;}
}


/* =====================================================================
   🟢 OK7JN – OPRAVA POSLEDNÍHO ŘÁDKU V LIVE OTA SCROLLU
   ---------------------------------------------------------------------
   Problém: poslední spot byl nalepený na spodní hranu panelu a na některých
   monitorech vypadal jako uříznutý.

   🟡 Jarda nápověda:
      padding-bottom = vzduch pod posledním řádkem ve scroll seznamu
      scroll-padding-bottom = rezerva při dorolování úplně dolů
      min-height řádku = výška jednoho LIVE spotu
   ===================================================================== */
@media (min-width:1450px){
  .live-ota-card{
    box-sizing:border-box !important;
  }

  .live-ota-list{
    box-sizing:border-box !important;
    padding-bottom:30px !important;
    scroll-padding-bottom:30px !important;
  }

  .live-ota-row:last-child{
    margin-bottom:8px !important;
  }
}

/* =====================================================================
   🟢 OK7JN – VRÁCENÍ SPODNÍHO FOOTERU POD DASHBOARD
   ---------------------------------------------------------------------
   Problém: při úpravě LIVE OTA pravého scroll panelu byl footer na velkých
   monitorech skrytý, takže chyběl řádek se zdroji dat a copyrightem.

   🟡 Jarda nápověda:
      .footer display:flex = footer je znovu vidět
      .grid-main flex:1 = hlavní dashboard se zmenší tak, aby se footer vešel
      .live-ota-list padding-bottom = poslední spot není uříznutý dole
   ===================================================================== */
@media (min-width:1450px){
  .dashboard{
    overflow:hidden !important;
  }

  .grid-main{
    flex:1 1 auto !important;
    height:auto !important;
    min-height:0 !important;
  }

  .footer{
    display:flex !important;
    flex:0 0 auto !important;
    width:100% !important;
    margin-top:10px !important;
    min-height:46px !important;
    padding:10px 16px !important;
    box-sizing:border-box !important;
  }

  .live-ota-list{
    padding-bottom:34px !important;
    scroll-padding-bottom:34px !important;
  }
}

/* =====================================================================
   🟢 OK7JN – SJEDNOCENÝ DESKTOP LAYOUT PRO NTB 150 % I VELKÝ MONITOR
   ---------------------------------------------------------------------
   Problém: notebook 1920×1080 při Windows měřítku 150 % má v prohlížeči
   zhruba jen 1280 CSS px, takže starý breakpoint přepnul LIVE OTA dolů.

   Cíl:
   - od cca 1100 px držet stejnou logiku jako velký monitor
   - LIVE OTA SPOTY zůstává vpravo jako samostatný vysoký panel
   - seznam LIVE OTA roluje uvnitř boxu
   - při nižší výšce obrazovky se boxy jen zkompaktní, nerozhází se pořadí

   🟡 Jarda nápověda:
      min-width:1100px = hranice, od kdy se drží pravý LIVE sloupec
      grid-template-columns = šířka levé části a pravého LIVE panelu
      --ok7jn-footer-h = výška spodního řádku se zdroji
   ===================================================================== */
@media (min-width:1100px) and (max-width:1449px){
  :root{
    --ok7jn-footer-h:42px;
  }

  html,
  body{
    height:100vh !important;
    overflow:hidden !important;
  }

  .dashboard{
    width:100vw !important;
    max-width:none !important;
    height:100vh !important;
    margin:0 !important;
    padding:8px 10px 8px !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    min-height:0 !important;
  }

  .topbar{
    flex:0 0 auto !important;
    min-height:54px !important;
    margin-bottom:8px !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    gap:14px !important;
  }

  .brand-icon{font-size:28px !important;}
  .brand h1{font-size:19px !important;}
  .brand p{font-size:11px !important;margin-top:3px !important;}
  .updated-label{font-size:10px !important;}
  .updated-time{font-size:15px !important;margin-top:2px !important;}
  .online-pill{padding:8px 12px !important;font-size:13px !important;}

  .grid-main{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:repeat(16,minmax(0,1fr)) !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    grid-auto-flow:dense !important;
    gap:8px !important;
    align-items:stretch !important;
  }

  .panel{padding:9px 10px !important;}
  .panel-title{font-size:15px !important;margin-bottom:8px !important;}

  .gauge-row{
    grid-column:1 / span 7 !important;
    grid-row:1 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-bottom:0 !important;
  }

  .gauge-card{
    height:132px !important;
    min-height:132px !important;
    padding:7px 7px 6px !important;
  }
  .gauge-card h3{font-size:10px !important;margin-bottom:3px !important;}
  .gauge{width:88px !important;}
  .gauge-scale{width:100px !important;font-size:11px !important;margin:-4px auto 1px !important;}
  .gauge-scale span{top:4px !important;}
  .gauge-card strong{font-size:22px !important;}
  .gauge-card small{font-size:11px !important;}

  .solar-card{
    grid-column:8 / span 4 !important;
    grid-row:1 !important;
    height:132px !important;
    min-height:132px !important;
    overflow:hidden !important;
  }
  .solar-card .panel-title{font-size:15px !important;margin-bottom:5px !important;}
  .solar-grid{grid-template-columns:minmax(0,1fr) 68px !important;gap:7px !important;}
  .solar-list div{min-height:16px !important;padding:2px 2px !important;font-size:9px !important;}
  .solar-list strong{font-size:11px !important;}
  .sun-art{width:62px !important;height:62px !important;}

  .iono-card{
    grid-column:1 / span 7 !important;
    grid-row:2 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .bands-card{
    grid-column:8 / span 4 !important;
    grid-row:2 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .iono-metrics{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:6px !important;
    margin-bottom:8px !important;
  }
  .iono-metrics div{min-height:58px !important;padding:5px 4px !important;}
  .iono-metrics span{font-size:10px !important;}
  .iono-metrics strong{font-size:17px !important;margin:4px 0 2px !important;}
  .iono-metrics small{font-size:8px !important;}
  .iono-card h4{font-size:11px !important;margin:5px 0 4px !important;}
  #fof2Chart{height:82px !important;}
  #mufChart{height:72px !important;}

  .bands-card th,
  .bands-card td{padding:5px 4px !important;font-size:10px !important;}
  .badge{min-width:62px !important;padding:4px 5px !important;font-size:9px !important;}

  .geomag-card{
    grid-column:1 / span 5 !important;
    grid-row:3 !important;
    height:166px !important;
    min-height:166px !important;
    overflow:hidden !important;
  }

  .history-card{
    grid-column:6 / span 6 !important;
    grid-row:3 !important;
    height:166px !important;
    min-height:166px !important;
    overflow:hidden !important;
  }
  .geomag-status{min-height:34px !important;margin-bottom:6px !important;padding:5px 8px !important;}
  .geomag-status strong{font-size:15px !important;}
  .geomag-status span{font-size:8px !important;}
  .mini-metrics{gap:6px !important;margin-bottom:5px !important;}
  .mini-metrics div{padding:5px 5px 4px !important;}
  .mini-metrics span,.mini-metrics small{font-size:9px !important;}
  .mini-metrics strong{font-size:15px !important;}
  .stormbar{height:8px !important;margin:5px 3px 2px !important;}
  .stormlabels{font-size:8px !important;}
  #historyChart{height:118px !important;}

  .live-ota-card{
    grid-column:12 / span 5 !important;
    grid-row:1 / span 3 !important;
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
    align-self:stretch !important;
    display:flex !important;
    flex-direction:column !important;
    padding:10px 12px 10px !important;
    margin-bottom:0 !important;
  }
  .live-ota-title{margin-bottom:8px !important;flex:0 0 auto !important;}
  .live-ota-title .panel-title{font-size:16px !important;}
  .live-ota-programs{gap:6px !important;margin-bottom:8px !important;flex:0 0 auto !important;}
  .program-chip{min-height:20px !important;padding:4px 7px !important;font-size:9px !important;}
  .program-chip b{min-width:20px !important;padding:3px 5px !important;}
  .live-ota-list{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    padding-right:6px !important;
    padding-bottom:28px !important;
    scroll-padding-bottom:28px !important;
    overscroll-behavior:contain !important;
  }
  .live-ota-row{
    min-height:44px !important;
    grid-template-columns:10px 40px minmax(0,1fr) 48px !important;
    gap:7px !important;
    padding:6px 3px 6px 0 !important;
  }
  .band-pill{min-width:36px !important;padding:5px 6px !important;font-size:9px !important;}
  .live-ota-main strong{font-size:13px !important;}
  .live-ota-main small{font-size:10px !important;}
  .live-ota-side b{font-size:10px !important;}
  .live-ota-side small{font-size:9px !important;}

  .footer{
    display:flex !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-height:var(--ok7jn-footer-h) !important;
    margin-top:8px !important;
    padding:8px 12px !important;
    gap:14px !important;
    font-size:10px !important;
    box-sizing:border-box !important;
  }
  .footer b{margin-left:auto !important;}
}

/* Když je notebook nízký, ještě trochu zmenšíme spodní řadu, aby zůstal footer. */
@media (min-width:1100px) and (max-width:1449px) and (max-height:760px){
  .dashboard{padding-top:6px !important;padding-bottom:6px !important;}
  .topbar{min-height:48px !important;margin-bottom:6px !important;}
  .brand h1{font-size:18px !important;}
  .brand p{font-size:10px !important;}
  .gauge-card,.solar-card{height:120px !important;min-height:120px !important;}
  .gauge{width:78px !important;}
  .gauge-card strong{font-size:20px !important;}
  .gauge-card small{font-size:10px !important;}
  .sun-art{width:54px !important;height:54px !important;}
  .solar-list div{min-height:15px !important;font-size:8px !important;}
  .iono-metrics div{min-height:52px !important;}
  .iono-metrics strong{font-size:15px !important;}
  #fof2Chart{height:72px !important;}
  #mufChart{height:62px !important;}
  .geomag-card,.history-card{height:146px !important;min-height:146px !important;}
  #historyChart{height:98px !important;}
  .live-ota-row{min-height:40px !important;}
  .footer{min-height:34px !important;padding:6px 10px !important;font-size:9px !important;}
}

/* =====================================================================
   🟢 OK7JN FIX – NTB 150 % BEZ UŘÍZNUTÍ OBSAHU
   ---------------------------------------------------------------------
   Na notebooku 1920×1080 při měřítku Windows 150 % má prohlížeč malou
   CSS výšku. Proto nesmí být stránka zamčená na přesných 100vh, jinak se
   IONOSPHERIC DATA a spodní boxy začnou ořezávat.

   Co to dělá:
   - LIVE OTA zůstává vpravo jako dlouhý panel se scrollbarem
   - levá část se už neořezává
   - když je málo místa na výšku, roluje stránka, ne vnitřek grafů
   ===================================================================== */
@media (min-width:1100px) and (max-width:1449px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  .dashboard{
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
    padding-bottom:10px !important;
  }

  .grid-main{
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    grid-template-rows:auto auto auto !important;
    align-items:start !important;
  }

  .iono-card,
  .bands-card,
  .geomag-card,
  .history-card{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .iono-card{
    min-height:360px !important;
  }

  .bands-card{
    min-height:360px !important;
  }

  .geomag-card,
  .history-card{
    min-height:166px !important;
  }

  .live-ota-card{
    height:calc(100vh - 98px) !important;
    min-height:560px !important;
    max-height:none !important;
    align-self:start !important;
    position:sticky !important;
    top:8px !important;
  }

  .live-ota-list{
    min-height:0 !important;
    overflow-y:auto !important;
    padding-bottom:36px !important;
    scroll-padding-bottom:36px !important;
  }

  .footer{
    flex:0 0 auto !important;
    margin-top:8px !important;
  }
}

/* Ještě nižší NTB okno – neškrtat grafy, raději povolit stránkový scroll. */
@media (min-width:1100px) and (max-width:1449px) and (max-height:760px){
  html,
  body{
    height:auto !important;
    overflow-y:auto !important;
  }

  .dashboard{
    height:auto !important;
    min-height:100vh !important;
  }

  .iono-card{min-height:340px !important;}
  .bands-card{min-height:340px !important;}
  .geomag-card,.history-card{min-height:146px !important;}

  .live-ota-card{
    height:calc(100vh - 86px) !important;
    min-height:500px !important;
  }
}

/* =====================================================================
   🟢 OK7JN FIX – NTB RIGHT RAIL VÝŠKA
   ---------------------------------------------------------------------
   Problém: na NTB 1920×1080 / 150 % byl LIVE OTA panel moc nízký a pod
   ním zůstával prázdný tmavý prostor.

   Řešení:
   - LIVE OTA už se na NTB nelepí na viewport jako malý sticky box
   - pravý panel se natáhne přes výšku tří řádků dashboardu
   - samotný seznam spotů dál roluje uvnitř panelu
   ===================================================================== */
@media (min-width:1100px) and (max-width:1449px){
  .grid-main{
    align-items:stretch !important;
    grid-template-rows:auto auto auto !important;
  }

  .live-ota-card{
    grid-row:1 / span 3 !important;
    height:100% !important;
    min-height:720px !important;
    max-height:none !important;
    align-self:stretch !important;
    position:relative !important;
    top:auto !important;
    overflow:hidden !important;
  }

  .live-ota-list{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    padding-bottom:42px !important;
    scroll-padding-bottom:42px !important;
  }
}

@media (min-width:1100px) and (max-width:1449px) and (max-height:760px){
  .live-ota-card{
    min-height:690px !important;
  }
}

/* =====================================================================
   🟢 OK7JN FINAL FIX – LIVE OTA NA NTB MUSÍ MÍT VLASTNÍ SCROLL
   ---------------------------------------------------------------------
   Předchozí úprava natáhla pravý LIVE OTA panel do výšky obsahu stránky.
   To udělalo na NTB obří prázdné místo a roloval celý web.

   Tohle je finální pravidlo:
   - LIVE OTA zůstává vpravo
   - panel má výšku podle okna prohlížeče
   - spoty rolují UVNITŘ panelu
   - stránka se může rolovat kvůli levým grafům, ale LIVE panel ji nenatahuje
   ===================================================================== */
@media (min-width:1100px) and (max-width:1449px){
  .grid-main{
    align-items:start !important;
  }

  .live-ota-card{
    grid-row:1 / span 3 !important;
    height:calc(100vh - 92px) !important;
    min-height:0 !important;
    max-height:calc(100vh - 92px) !important;
    align-self:start !important;
    position:sticky !important;
    top:8px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .live-ota-list{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:42px !important;
    scroll-padding-bottom:42px !important;
    overscroll-behavior:contain !important;
  }
}

@media (min-width:1100px) and (max-width:1449px) and (max-height:760px){
  .live-ota-card{
    height:calc(100vh - 82px) !important;
    max-height:calc(100vh - 82px) !important;
    min-height:0 !important;
  }
}


/* =====================================================================
   🟢 OK7JN FINAL – OSA GRAFŮ + DELŠÍ LIVE OTA RAIL
   ---------------------------------------------------------------------
   Oprava pro NTB i velký monitor:
   - čísla na levé ose grafů mají větší prostor a nepřekrývají se
   - grafy foF2/MUF jsou o něco vyšší
   - LIVE OTA SPOTY je protažený níž, ale spoty pořád rolují UVNITŘ panelu
   ===================================================================== */
canvas{
  box-sizing:border-box !important;
}

@media (min-width:1100px) and (max-width:1449px){
  .iono-card{
    min-height:430px !important;
  }
  #fof2Chart{
    height:105px !important;
  }
  #mufChart{
    height:95px !important;
  }
  .live-ota-card{
    height:calc(100vh - 64px) !important;
    max-height:calc(100vh - 64px) !important;
    min-height:0 !important;
    position:sticky !important;
    top:6px !important;
    overflow:hidden !important;
  }
  .live-ota-list{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:46px !important;
    scroll-padding-bottom:46px !important;
  }
}

@media (min-width:1100px) and (max-width:1449px) and (max-height:760px){
  .iono-card{
    min-height:410px !important;
  }
  #fof2Chart{
    height:96px !important;
  }
  #mufChart{
    height:88px !important;
  }
  .live-ota-card{
    height:calc(100vh - 58px) !important;
    max-height:calc(100vh - 58px) !important;
  }
}

@media (min-width:1450px){
  #fof2Chart{
    height:142px !important;
  }
  #mufChart{
    height:124px !important;
  }
  .live-ota-card{
    height:100% !important;
    max-height:100% !important;
  }
  .live-ota-list{
    overflow-y:auto !important;
    padding-bottom:46px !important;
    scroll-padding-bottom:46px !important;
  }
}

/* =====================================================================
   🟢 OK7JN REAL FINAL – NTB: LIVE OTA PROTAŽENÝ K FOOTERU, ALE SE SCROLLEM
   ---------------------------------------------------------------------
   Problém na NTB 1920×1080 / 150 %:
   - LIVE OTA měl pevnou výšku podle viewportu a končil moc brzy.
   - Pod panelem vznikala prázdná tmavá plocha.

   Řešení:
   - pravý LIVE OTA panel se natáhne podle výšky levého dashboard obsahu
   - samotný seznam spotů roluje uvnitř panelu
   - stránka se může normálně rolovat, aby se nic neřezalo

   🟡 Jarda nápověda:
      grid-row: 1 / 4 = LIVE OTA zabere horní + střední + spodní řádek
      align-self: stretch = panel se natáhne přes celou výšku těchto řádků
      .live-ota-list overflow-y:auto = scrolluje jen seznam spotů uvnitř
   ===================================================================== */
@media (min-width:1100px) and (max-width:1449px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  .dashboard{
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .grid-main{
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    display:grid !important;
    grid-template-columns:repeat(16,minmax(0,1fr)) !important;
    grid-template-rows:auto auto auto !important;
    align-items:stretch !important;
  }

  .gauge-row{grid-column:1 / span 7 !important;grid-row:1 !important;}
  .solar-card{grid-column:8 / span 4 !important;grid-row:1 !important;}
  .iono-card{grid-column:1 / span 7 !important;grid-row:2 !important;}
  .bands-card{grid-column:8 / span 4 !important;grid-row:2 !important;}
  .geomag-card{grid-column:1 / span 5 !important;grid-row:3 !important;}
  .history-card{grid-column:6 / span 6 !important;grid-row:3 !important;}

  .live-ota-card{
    grid-column:12 / span 5 !important;
    grid-row:1 / 4 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    align-self:stretch !important;
    position:relative !important;
    top:auto !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .live-ota-title,
  .live-ota-programs{
    flex:0 0 auto !important;
  }

  .live-ota-list{
    flex:1 1 0 !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:6px !important;
    padding-bottom:44px !important;
    scroll-padding-bottom:44px !important;
    overscroll-behavior:contain !important;
  }

  .footer{
    display:flex !important;
    flex:0 0 auto !important;
    margin-top:8px !important;
  }
}

/* 🟢 OK7JN – lepší čitelnost levé osy grafů na NTB */
@media (min-width:1100px) and (max-width:1449px){
  .iono-card h4{
    margin-top:8px !important;
    margin-bottom:6px !important;
  }

  #fof2Chart{
    height:116px !important;
  }

  #mufChart{
    height:106px !important;
  }
}

/* =====================================================================
   🟢 OK7JN HOTFIX – VYŠŠÍ GRAFY + ONLINE V HLAVIČCE
   ---------------------------------------------------------------------
   Oprava po testu na NTB 1920×1080 / 150 %:
   - grafy využijí volné místo v IONOSPHERIC DATA boxu
   - LIVE OTA zůstává vpravo a seznam roluje uvnitř panelu
   - ONLINE badge už neleze do hrany obrazovky a je kompaktnější
   ===================================================================== */
@media (min-width:1100px) and (max-width:1449px){
  .dashboard{
    width:calc(100vw - 18px) !important;
    max-width:calc(100vw - 18px) !important;
    padding:10px 12px 10px !important;
  }

  .topbar{
    grid-template-columns:minmax(0,1fr) auto auto !important;
    gap:12px !important;
    min-height:58px !important;
    padding-right:4px !important;
  }

  .online-pill{
    padding:7px 12px !important;
    min-height:36px !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:1 !important;
    margin-right:2px !important;
  }

  .online-pill span{
    width:11px !important;
    height:11px !important;
    border-width:3px !important;
  }

  .iono-card{
    min-height:500px !important;
  }

  .iono-metrics{
    margin-bottom:10px !important;
  }

  .iono-card h4{
    margin-top:9px !important;
    margin-bottom:7px !important;
  }

  #fof2Chart{
    height:150px !important;
  }

  #mufChart{
    height:132px !important;
  }

  .bands-card{
    min-height:500px !important;
  }

  .geomag-card,
  .history-card{
    min-height:178px !important;
  }

  #historyChart{
    height:132px !important;
  }

  .live-ota-card{
    grid-row:1 / 4 !important;
    height:auto !important;
    min-height:0 !important;
    align-self:stretch !important;
    overflow:hidden !important;
  }

  .live-ota-list{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:50px !important;
    scroll-padding-bottom:50px !important;
  }
}

/* Nižší okno: grafy pořád větší, ale ne tak moc, aby se ztratila spodní řada. */
@media (min-width:1100px) and (max-width:1449px) and (max-height:760px){
  .iono-card,
  .bands-card{
    min-height:460px !important;
  }

  #fof2Chart{
    height:132px !important;
  }

  #mufChart{
    height:116px !important;
  }

  .geomag-card,
  .history-card{
    min-height:166px !important;
  }

  #historyChart{
    height:120px !important;
  }
}

@media (min-width:1450px){
  .online-pill{
    padding:9px 15px !important;
    min-height:40px !important;
    margin-right:4px !important;
  }

  #fof2Chart{
    height:160px !important;
  }

  #mufChart{
    height:138px !important;
  }

  #historyChart{
    height:178px !important;
  }
}

/* =====================================================================
   🟢 OK7JN CLEAN CHART FIX – grafy bez „divného“ mrtvého prostoru
   ---------------------------------------------------------------------
   Co řeší:
   - canvas už se v app.js kreslí v CSS pixelech, takže scaling 150 % na NTB
     nerozhodí osy a plot area.
   - grafy mají rozumnou výšku, ale samotná kreslená plocha využívá víc místa.
   - LIVE OTA zůstává vpravo a scrolluje uvnitř panelu.
   ===================================================================== */
.iono-card canvas,
.history-card canvas{
  border-radius:0 !important;
}

@media (min-width:1100px) and (max-width:1449px){
  .iono-card{
    min-height:470px !important;
    padding:12px !important;
  }

  .iono-metrics{
    margin-bottom:8px !important;
  }

  .iono-card h4{
    margin:7px 0 5px !important;
    font-size:13px !important;
  }

  #fof2Chart{
    height:128px !important;
  }

  #mufChart{
    height:116px !important;
  }

  .history-card{
    min-height:184px !important;
  }

  #historyChart{
    height:136px !important;
  }

  .online-pill{
    align-self:center !important;
    transform:translateY(-2px) !important;
  }

  .live-ota-card{
    grid-row:1 / 4 !important;
    align-self:stretch !important;
    overflow:hidden !important;
  }

  .live-ota-list{
    flex:1 1 0 !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:54px !important;
  }
}

@media (min-width:1100px) and (max-width:1449px) and (max-height:760px){
  .iono-card{
    min-height:450px !important;
  }

  #fof2Chart{
    height:118px !important;
  }

  #mufChart{
    height:106px !important;
  }

  #historyChart{
    height:126px !important;
  }
}

@media (min-width:1450px){
  #fof2Chart{
    height:138px !important;
  }

  #mufChart{
    height:122px !important;
  }

  #historyChart{
    height:168px !important;
  }
}

/* =====================================================================
   🟢 OK7JN FINAL NTB FIX – IONOSPHERIC DATA + STABILNÍ DESKTOP LAYOUT
   ---------------------------------------------------------------------
   Řeší NTB 1920×1080 při 150 % měřítku:
   - box IONOSPHERIC DATA už nepřetéká a hodnoty se nemačkají přes sebe
   - horní řádek Zdroj / LIVE je kompaktní
   - 6 iono metrik se vejde do řádku bez přelezů textu
   - LIVE OTA zůstává vpravo a scrolluje uvnitř panelu
   ===================================================================== */

@media (min-width:1100px) and (max-width:1449px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  .dashboard{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:10px 10px 10px !important;
  }

  .topbar{
    grid-template-columns:minmax(0,1fr) auto auto !important;
    min-height:56px !important;
    gap:14px !important;
    margin-bottom:8px !important;
  }

  .brand h1{font-size:20px !important;}
  .brand p{font-size:12px !important;}
  .updated-label{font-size:11px !important;}
  .updated-time{font-size:17px !important;}
  .online-pill{
    padding:8px 13px !important;
    min-height:38px !important;
    font-size:14px !important;
    border-radius:8px !important;
    transform:none !important;
    margin-right:0 !important;
  }

  .grid-main{
    display:grid !important;
    grid-template-columns:repeat(16,minmax(0,1fr)) !important;
    grid-template-rows:auto auto auto !important;
    gap:8px !important;
    align-items:stretch !important;
  }

  .panel{
    padding:10px !important;
    border-radius:8px !important;
  }

  .panel-title{
    font-size:17px !important;
    line-height:1.05 !important;
    margin-bottom:8px !important;
    letter-spacing:.1px !important;
  }

  .gauge-row{
    grid-column:1 / span 7 !important;
    grid-row:1 !important;
    gap:8px !important;
  }

  .solar-card{
    grid-column:8 / span 4 !important;
    grid-row:1 !important;
    height:144px !important;
    min-height:144px !important;
    overflow:hidden !important;
  }

  .live-ota-card{
    grid-column:12 / span 5 !important;
    grid-row:1 / span 3 !important;
    height:calc(100vh - 86px) !important;
    max-height:calc(100vh - 86px) !important;
    min-height:520px !important;
    align-self:start !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    padding:12px 13px 10px !important;
  }

  .live-ota-title,
  .live-ota-programs{
    flex:0 0 auto !important;
  }

  .live-ota-list{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:5px !important;
    padding-bottom:18px !important;
  }

  .live-ota-row{
    min-height:50px !important;
    grid-template-columns:10px 42px minmax(0,1fr) 48px !important;
    gap:8px !important;
    padding:8px 3px 8px 0 !important;
  }

  .live-ota-main strong{font-size:15px !important;}
  .live-ota-main small{font-size:11px !important;}
  .live-ota-side b{font-size:11px !important;}
  .live-ota-side small{font-size:10px !important;}

  .iono-card{
    grid-column:1 / span 7 !important;
    grid-row:2 !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    padding:10px !important;
  }

  .bands-card{
    grid-column:8 / span 4 !important;
    grid-row:2 !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    padding:10px !important;
  }

  .geomag-card{
    grid-column:1 / span 5 !important;
    grid-row:3 !important;
    height:170px !important;
    min-height:170px !important;
    padding:10px !important;
    overflow:hidden !important;
  }

  .history-card{
    grid-column:6 / span 6 !important;
    grid-row:3 !important;
    height:170px !important;
    min-height:170px !important;
    padding:10px !important;
    overflow:hidden !important;
  }

  /* hlavní oprava problematického titulku v IONO boxu */
  .iono-card .line-title{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:start !important;
    gap:8px !important;
    margin-bottom:8px !important;
  }

  .iono-card .line-title .panel-title,
  .iono-card .line-title h2,
  .iono-card .line-title h3{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    margin:0 !important;
  }

  .iono-card .line-title em{
    max-width:170px !important;
    text-align:right !important;
    font-size:11px !important;
    line-height:1.05 !important;
    color:#b7c8e4 !important;
    white-space:normal !important;
  }

  .iono-card .live-mini{
    display:inline-flex !important;
    align-items:center !important;
    margin-left:6px !important;
    padding:3px 8px !important;
    font-size:10px !important;
    line-height:1 !important;
    vertical-align:middle !important;
  }

  /* 6 metrik v IONO boxu bez přetékání textů */
  .iono-metrics{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:7px !important;
    margin:0 0 8px !important;
    min-width:0 !important;
  }

  .iono-metrics div{
    min-width:0 !important;
    min-height:74px !important;
    padding:7px 5px 6px !important;
    overflow:hidden !important;
  }

  .iono-metrics span{
    font-size:11px !important;
    line-height:1.08 !important;
    white-space:normal !important;
  }

  .iono-metrics strong{
    font-size:19px !important;
    line-height:1 !important;
    margin:5px 0 3px !important;
    white-space:nowrap !important;
    letter-spacing:-.4px !important;
  }

  .iono-metrics small{
    font-size:9px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }

  .iono-card h4{
    margin:7px 0 5px !important;
    font-size:13px !important;
    line-height:1.12 !important;
  }

  #fof2Chart{
    height:120px !important;
  }

  #mufChart{
    height:108px !important;
  }

  #historyChart{
    height:118px !important;
  }

  .bands-card th,
  .bands-card td{
    padding:7px 5px !important;
    font-size:11px !important;
  }

  .badge{
    min-width:72px !important;
    padding:5px 6px !important;
    font-size:10px !important;
  }

  .footer{
    display:flex !important;
    margin-top:8px !important;
    min-height:38px !important;
    padding:9px 12px !important;
    font-size:11px !important;
    gap:14px !important;
  }
}

/* Menší šířka okna / větší zoom: IONO metriky se zmenší ještě o chlup,
   ale zůstanou pořád v jednom řádku jako na velkém monitoru. */
@media (min-width:1100px) and (max-width:1260px){
  .iono-metrics{gap:5px !important;}
  .iono-metrics div{padding:6px 4px 5px !important;}
  .iono-metrics strong{font-size:17px !important; letter-spacing:-.6px !important;}
  .iono-metrics span{font-size:10px !important;}
  .iono-metrics small{font-size:8px !important;}
  .iono-card .line-title em{max-width:135px !important;font-size:10px !important;}
}

/* =====================================================================
   OK7JN REAL CLEANUP – NTB 1920×1080 / 150 % + DESKTOP
   ---------------------------------------------------------------------
   Tohle je záměrně poslední blok v CSS. Přepisuje staré pokusy výše.

   Řeší:
   - LIVE OTA SPOTY se natahne na výšku levého dashboardu, ale seznam
     uvnitř má vlastní scroll.
   - Footer je vždy až pod celým gridem, ne vedle pravého panelu.
   - VÝVOJ INDEXŮ už neřeže spodní legendu SFI / Kp x10 / A-index.
   - IONOSPHERIC DATA – DOURBES má kompaktní metriky bez přetékání textů.
   ===================================================================== */

/* ---------- společné opravy ---------- */
.live-ota-card{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  min-height:0 !important;
}

.live-ota-title,
.live-ota-programs{
  flex:0 0 auto !important;
}

.live-ota-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-bottom:22px !important;
}

.history-card{
  overflow:hidden !important;
}

.history-card .legend,
.legend{
  flex:0 0 auto !important;
  position:relative !important;
  z-index:2 !important;
  margin-top:8px !important;
  padding-bottom:2px !important;
}

/* ---------- NTB / 150 % scaling ---------- */
@media (min-width:1100px) and (max-width:1449px){

  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  .dashboard{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:10px 10px 12px !important;
    display:block !important;
  }

  .topbar{
    min-height:56px !important;
    margin-bottom:8px !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    gap:14px !important;
  }

  .brand h1{font-size:20px !important;}
  .brand p{font-size:12px !important;}
  .updated-label{font-size:11px !important;}
  .updated-time{font-size:17px !important;}

  .online-pill{
    padding:8px 13px !important;
    min-height:38px !important;
    font-size:14px !important;
    border-radius:8px !important;
    margin-right:0 !important;
    transform:none !important;
  }

  .grid-main{
    display:grid !important;
    grid-template-columns:repeat(16,minmax(0,1fr)) !important;
    grid-template-rows:auto auto auto !important;
    grid-auto-flow:dense !important;
    gap:8px !important;
    align-items:stretch !important;
    height:auto !important;
    min-height:0 !important;
  }

  .panel{
    padding:10px !important;
    border-radius:8px !important;
  }

  .panel-title{
    font-size:17px !important;
    line-height:1.05 !important;
    margin-bottom:8px !important;
  }

  .gauge-row{
    grid-column:1 / span 7 !important;
    grid-row:1 !important;
    gap:8px !important;
  }

  .solar-card{
    grid-column:8 / span 4 !important;
    grid-row:1 !important;
    height:144px !important;
    min-height:144px !important;
    overflow:hidden !important;
  }

  .iono-card{
    grid-column:1 / span 7 !important;
    grid-row:2 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding:10px !important;
  }

  .bands-card{
    grid-column:8 / span 4 !important;
    grid-row:2 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding:10px !important;
  }

  .geomag-card{
    grid-column:1 / span 5 !important;
    grid-row:3 !important;
    height:205px !important;
    min-height:205px !important;
    padding:10px !important;
    overflow:hidden !important;
  }

  .history-card{
    grid-column:6 / span 6 !important;
    grid-row:3 !important;
    height:205px !important;
    min-height:205px !important;
    padding:10px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  #historyChart{
    height:135px !important;
    flex:0 0 135px !important;
  }

  .history-card .legend{
    margin-top:7px !important;
    padding-bottom:0 !important;
    font-size:12px !important;
    gap:20px !important;
    line-height:1.2 !important;
  }

  .live-ota-card{
    grid-column:12 / span 5 !important;
    grid-row:1 / span 3 !important;

    /* Důležité: ne podle viewportu, ale podle výšky gridu.
       Tím se panel natáhne až dolů k footeru a seznam scrolluje uvnitř. */
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    align-self:stretch !important;

    padding:12px 13px 10px !important;
  }

  .live-ota-row{
    min-height:50px !important;
    grid-template-columns:10px 42px minmax(0,1fr) 48px !important;
    gap:8px !important;
    padding:8px 3px 8px 0 !important;
  }

  .live-ota-main strong{font-size:15px !important;}
  .live-ota-main small{font-size:11px !important;}
  .live-ota-side b{font-size:11px !important;}
  .live-ota-side small{font-size:10px !important;}

  /* IONOSPHERIC DATA – DOURBES */
  .iono-card .line-title{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:8px !important;
    align-items:start !important;
    margin-bottom:8px !important;
  }

  .iono-card .line-title .panel-title,
  .iono-card .line-title h2,
  .iono-card .line-title h3{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    margin:0 !important;
  }

  .iono-card .line-title em{
    max-width:150px !important;
    text-align:right !important;
    font-size:10px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }

  .iono-card .live-mini{
    padding:3px 7px !important;
    font-size:10px !important;
    line-height:1 !important;
    margin-left:6px !important;
  }

  .iono-metrics{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:6px !important;
    margin:0 0 8px !important;
    min-width:0 !important;
  }

  .iono-metrics div{
    min-width:0 !important;
    min-height:72px !important;
    padding:7px 4px 6px !important;
    overflow:hidden !important;
  }

  .iono-metrics span{
    font-size:10px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }

  .iono-metrics strong{
    font-size:17px !important;
    line-height:1 !important;
    margin:5px 0 3px !important;
    white-space:nowrap !important;
    letter-spacing:-.7px !important;
  }

  .iono-metrics small{
    font-size:8px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }

  .iono-card h4{
    margin:7px 0 5px !important;
    font-size:13px !important;
    line-height:1.12 !important;
  }

  #fof2Chart{height:120px !important;}
  #mufChart{height:108px !important;}

  .bands-card th,
  .bands-card td{
    padding:7px 5px !important;
    font-size:11px !important;
  }

  .badge{
    min-width:72px !important;
    padding:5px 6px !important;
    font-size:10px !important;
  }

  .footer{
    display:flex !important;
    clear:both !important;
    width:100% !important;
    margin-top:8px !important;
    min-height:42px !important;
    padding:10px 12px !important;
    font-size:12px !important;
    gap:16px !important;
    position:relative !important;
    z-index:5 !important;
  }

  .footer b{
    margin-left:auto !important;
  }
}

/* ---------- velký monitor: zachovat pravý rail, footer dole ---------- */
@media (min-width:1450px){
  .history-card{
    display:flex !important;
    flex-direction:column !important;
  }

  #historyChart{
    height:132px !important;
    flex:0 0 132px !important;
  }

  .history-card .legend{
    margin-top:6px !important;
    font-size:11px !important;
  }

  .live-ota-card{
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    align-self:stretch !important;
  }

  .footer{
    display:flex !important;
    clear:both !important;
  }
}


/* =====================================================================
   🟢 OK7JN REAL NTB STACK FIX – žádný mrtvý pravý rail na notebooku
   ---------------------------------------------------------------------
   Notebook 1920×1080 při Windows 150 % má cca 1280 CSS px. Pravý LIVE
   rail proto dělal prázdný tmavý prostor uprostřed stránky.

   Řešení pro 1100–1449 px:
   - horní budíky + SOLAR zůstávají nahoře
   - LIVE OTA SPOTY jde hned pod ně přes celou šířku
   - LIVE má pevnou rozumnou výšku a vlastní scroll
   - IONOSPHERIC / BANDS / spodní grafy jsou pod LIVE bez roztažení stránky
   ===================================================================== */
@media (min-width:1100px) and (max-width:1449px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  .dashboard{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:10px 12px 12px !important;
    display:block !important;
    overflow:visible !important;
  }

  .topbar{
    min-height:56px !important;
    margin-bottom:8px !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    gap:12px !important;
    padding-right:0 !important;
  }

  .brand-icon{font-size:30px !important;}
  .brand h1{font-size:21px !important;}
  .brand p{font-size:12px !important;}
  .updated-label{font-size:11px !important;}
  .updated-time{font-size:17px !important;}
  .online-pill{
    padding:8px 13px !important;
    min-height:38px !important;
    font-size:14px !important;
    margin-right:0 !important;
    transform:none !important;
  }

  .grid-main{
    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    grid-template-rows:auto auto auto auto !important;
    grid-auto-flow:row !important;
    gap:8px !important;
    align-items:start !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  .panel{padding:10px !important;border-radius:8px !important;}
  .panel-title{font-size:17px !important;line-height:1.08 !important;margin-bottom:8px !important;}

  .gauge-row{
    grid-column:1 / span 8 !important;
    grid-row:1 !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .gauge-card{
    height:140px !important;
    min-height:140px !important;
    padding:7px 7px 6px !important;
  }
  .gauge-card h3{font-size:11px !important;margin-bottom:3px !important;}
  .gauge{width:92px !important;}
  .gauge-scale{width:104px !important;font-size:11px !important;margin:-4px auto 1px !important;}
  .gauge-card strong{font-size:23px !important;}
  .gauge-card small{font-size:11px !important;}

  .solar-card{
    grid-column:9 / span 4 !important;
    grid-row:1 !important;
    height:140px !important;
    min-height:140px !important;
    overflow:hidden !important;
  }
  .solar-grid{grid-template-columns:minmax(0,1fr) 72px !important;gap:8px !important;}
  .solar-list div{min-height:16px !important;padding:2px 2px !important;font-size:9px !important;}
  .solar-list strong{font-size:12px !important;}
  .sun-art{width:66px !important;height:66px !important;}

  /* LIVE už není pravý sloupec – na NTB jde přes celou šířku */
  .live-ota-card{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    height:330px !important;
    min-height:330px !important;
    max-height:330px !important;
    align-self:start !important;
    position:relative !important;
    top:auto !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    padding:12px 14px 10px !important;
    margin:0 !important;
  }

  .live-ota-title{margin-bottom:8px !important;}
  .live-ota-title .panel-title{font-size:20px !important;}
  .live-ota-programs{gap:7px !important;margin-bottom:8px !important;}
  .program-chip{min-height:22px !important;padding:4px 8px !important;font-size:10px !important;}
  .program-chip b{min-width:22px !important;padding:3px 6px !important;}

  .live-ota-list{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:6px !important;
    padding-bottom:18px !important;
    scroll-padding-bottom:18px !important;
  }

  .live-ota-row{
    min-height:48px !important;
    grid-template-columns:10px 42px minmax(0,1fr) 52px !important;
    gap:8px !important;
    padding:7px 3px 7px 0 !important;
  }
  .live-ota-main strong{font-size:15px !important;}
  .live-ota-main small{font-size:11px !important;}
  .live-ota-side b{font-size:11px !important;}
  .live-ota-side small{font-size:10px !important;}

  .iono-card{
    grid-column:1 / span 8 !important;
    grid-row:3 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding:10px !important;
  }

  .bands-card{
    grid-column:9 / span 4 !important;
    grid-row:3 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding:10px !important;
  }

  .geomag-card{
    grid-column:1 / span 5 !important;
    grid-row:4 !important;
    height:196px !important;
    min-height:196px !important;
    overflow:hidden !important;
  }

  .history-card{
    grid-column:6 / span 7 !important;
    grid-row:4 !important;
    height:196px !important;
    min-height:196px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  #historyChart{height:128px !important;flex:0 0 128px !important;}
  .history-card .legend{font-size:12px !important;margin-top:7px !important;gap:18px !important;}

  .iono-card .line-title{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:8px !important;
    align-items:start !important;
    margin-bottom:8px !important;
  }
  .iono-card .line-title .panel-title,
  .iono-card .line-title h2,
  .iono-card .line-title h3{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    margin:0 !important;
  }
  .iono-card .line-title em{max-width:170px !important;text-align:right !important;font-size:10px !important;line-height:1.05 !important;white-space:normal !important;}
  .iono-card .live-mini{padding:3px 7px !important;font-size:10px !important;line-height:1 !important;margin-left:6px !important;}

  .iono-metrics{grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:6px !important;margin:0 0 8px !important;}
  .iono-metrics div{min-width:0 !important;min-height:72px !important;padding:7px 4px 6px !important;overflow:hidden !important;}
  .iono-metrics span{font-size:10px !important;line-height:1.05 !important;white-space:normal !important;}
  .iono-metrics strong{font-size:17px !important;line-height:1 !important;margin:5px 0 3px !important;white-space:nowrap !important;letter-spacing:-.7px !important;}
  .iono-metrics small{font-size:8px !important;line-height:1.05 !important;white-space:normal !important;}
  .iono-card h4{margin:7px 0 5px !important;font-size:13px !important;line-height:1.12 !important;}
  #fof2Chart{height:120px !important;}
  #mufChart{height:108px !important;}

  .bands-card th,
  .bands-card td{padding:7px 5px !important;font-size:11px !important;}
  .badge{min-width:72px !important;padding:5px 6px !important;font-size:10px !important;}

  .footer{
    display:flex !important;
    width:100% !important;
    margin-top:8px !important;
    min-height:40px !important;
    padding:9px 12px !important;
    font-size:11px !important;
    gap:14px !important;
  }
  .footer b{margin-left:auto !important;}
}

/* Ještě menší CSS šířka: všechno pod sebe, ať se to neláme. */
@media (max-width:1099px){
  .grid-main{grid-template-columns:1fr !important;gap:10px !important;}
  .gauge-row,
  .solar-card,
  .live-ota-card,
  .iono-card,
  .bands-card,
  .geomag-card,
  .history-card{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
  }
  .live-ota-card{height:360px !important;max-height:360px !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;}
  .live-ota-list{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;}
}

/* =====================================================================
   🟢 OK7JN FINAL IONO CLEANUP – oprava přehuštěného boxu DOURBES
   ---------------------------------------------------------------------
   Co je tady finálně srovnané:
   - na NTB se horní hodnoty nelámou do šesti úzkých sloupců, ale 3 × 2
   - nadpis už nežere šířku a zdroj se drží vpravo
   - hodnotové boxy jsou nižší, jednotnější a bez obřích čísel přes sebe
   - grafy mají stabilní výšku a čitelnější prostor
   - TEC box má stejný rytmus jako ostatní
   ===================================================================== */

.iono-card{
  box-sizing:border-box !important;
}

.iono-card .line-title{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:start !important;
  gap:10px !important;
  margin:0 0 10px !important;
}

.iono-card .line-title .panel-title,
.iono-card .line-title h2,
.iono-card .line-title h3{
  min-width:0 !important;
  margin:0 !important;
  line-height:1.05 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.iono-card .line-title em{
  display:block !important;
  max-width:185px !important;
  text-align:right !important;
  font-size:11px !important;
  line-height:1.08 !important;
  color:#b9cae6 !important;
  white-space:normal !important;
}

.iono-card .live-mini{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  vertical-align:middle !important;
  padding:3px 8px !important;
  min-height:18px !important;
  line-height:1 !important;
  font-size:10px !important;
  border-radius:999px !important;
  margin-left:7px !important;
  transform:translateY(-2px) !important;
}

.iono-metrics{
  align-items:stretch !important;
}

.iono-metrics div{
  box-sizing:border-box !important;
  min-width:0 !important;
  overflow:hidden !important;
  border-radius:10px !important;
  justify-content:center !important;
}

.iono-metrics span,
.iono-metrics strong,
.iono-metrics small{
  max-width:100% !important;
}

.iono-metrics span{
  line-height:1.05 !important;
  text-wrap:balance !important;
}

.iono-metrics strong{
  line-height:1 !important;
  white-space:nowrap !important;
  letter-spacing:-.6px !important;
}

.iono-metrics small{
  line-height:1.08 !important;
  text-wrap:balance !important;
}

.iono-card h4{
  color:#bcd0ef !important;
  font-weight:900 !important;
  letter-spacing:-.2px !important;
}

#fof2Chart,
#mufChart{
  width:100% !important;
  display:block !important;
  border-radius:0 !important;
}

/* NTB / Windows scaling 125–150 % – hlavní problém z obrázku */
@media (min-width:1100px) and (max-width:1449px){
  .iono-card{
    padding:12px !important;
  }

  .iono-card .line-title{
    margin-bottom:9px !important;
  }

  .iono-card .line-title .panel-title,
  .iono-card .line-title h2,
  .iono-card .line-title h3{
    font-size:21px !important;
    letter-spacing:-.5px !important;
  }

  .iono-card .line-title em{
    max-width:150px !important;
    font-size:10px !important;
  }

  .iono-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    margin:0 0 10px !important;
  }

  .iono-metrics div{
    min-height:58px !important;
    padding:6px 7px 5px !important;
  }

  .iono-metrics span{
    font-size:10px !important;
  }

  .iono-metrics strong{
    font-size:19px !important;
    margin:3px 0 2px !important;
  }

  .iono-metrics small{
    font-size:8.5px !important;
  }

  .iono-card h4{
    margin:9px 0 5px !important;
    font-size:13px !important;
    line-height:1.1 !important;
  }

  #fof2Chart{
    height:138px !important;
    min-height:138px !important;
  }

  #mufChart{
    height:126px !important;
    min-height:126px !important;
  }
}

/* Nízké NTB okno – stále 3 × 2, jen o chlup nižší */
@media (min-width:1100px) and (max-width:1449px) and (max-height:760px){
  .iono-card{
    padding:11px !important;
  }

  .iono-metrics{
    gap:6px !important;
    margin-bottom:8px !important;
  }

  .iono-metrics div{
    min-height:54px !important;
    padding:5px 6px 4px !important;
  }

  .iono-metrics strong{
    font-size:18px !important;
  }

  .iono-card h4{
    margin:7px 0 4px !important;
    font-size:12px !important;
  }

  #fof2Chart{
    height:126px !important;
    min-height:126px !important;
  }

  #mufChart{
    height:114px !important;
    min-height:114px !important;
  }
}

/* Velký monitor – zůstane 6 v řadě, ale už ne obří cirkus */
@media (min-width:1450px){
  .iono-card .line-title .panel-title,
  .iono-card .line-title h2,
  .iono-card .line-title h3{
    font-size:24px !important;
  }

  .iono-metrics{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:8px !important;
    margin:0 0 12px !important;
  }

  .iono-metrics div{
    min-height:74px !important;
    padding:7px 6px 6px !important;
  }

  .iono-metrics span{
    font-size:11px !important;
  }

  .iono-metrics strong{
    font-size:20px !important;
    margin:5px 0 3px !important;
  }

  .iono-metrics small{
    font-size:9px !important;
  }

  .iono-card h4{
    margin:10px 0 6px !important;
    font-size:14px !important;
  }

  #fof2Chart{
    height:150px !important;
    min-height:150px !important;
  }

  #mufChart{
    height:132px !important;
    min-height:132px !important;
  }
}

/* =====================================================================
   🟢 OK7JN HARD RESET – VELKÝ MONITOR / DESKTOP GRID
   ---------------------------------------------------------------------
   Oprava rozbitého desktop layoutu po předchozích overridech.

   Co to hlídá:
   - žádné zamykání celé stránky na 100vh
   - žádný obří prázdný řádek v levé části
   - LIVE OTA zůstává vpravo přes 3 řádky a roluje jen uvnitř seznamu
   - IONO / PÁSMOVÝ BOX / GEOMAG / HISTORIE jsou znovu normálně vidět

   Jarda nápověda:
   - .grid-main grid-template-rows:auto auto auto = řádky mají výšku obsahu
   - .live-ota-card grid-row:1 / 4 = pravý panel odshora dolů přes dashboard
   - .live-ota-list overflow-y:auto = scrolluje pouze seznam spotů
   ===================================================================== */
@media (min-width:1450px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  .dashboard{
    display:block !important;
    width:min(96vw,1840px) !important;
    max-width:1840px !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:24px 0 12px !important;
    overflow:visible !important;
  }

  .topbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    align-items:center !important;
    gap:24px !important;
    min-height:0 !important;
    margin-bottom:18px !important;
  }

  .grid-main{
    display:grid !important;
    grid-template-columns:repeat(18,minmax(0,1fr)) !important;
    grid-template-rows:auto auto auto !important;
    grid-auto-flow:row !important;
    gap:10px !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    align-items:stretch !important;
  }

  .gauge-row{
    grid-column:1 / span 8 !important;
    grid-row:1 !important;
    align-self:stretch !important;
  }

  .solar-card{
    grid-column:9 / span 4 !important;
    grid-row:1 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .iono-card{
    grid-column:1 / span 8 !important;
    grid-row:2 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    align-self:stretch !important;
  }

  .bands-card{
    grid-column:9 / span 4 !important;
    grid-row:2 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    align-self:stretch !important;
  }

  .geomag-card{
    grid-column:1 / span 5 !important;
    grid-row:3 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  .history-card{
    grid-column:6 / span 7 !important;
    grid-row:3 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  .live-ota-card{
    grid-column:13 / span 6 !important;
    grid-row:1 / 4 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    align-self:stretch !important;
    position:relative !important;
    top:auto !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    padding:14px 16px 12px !important;
    margin:0 !important;
  }

  .live-ota-title,
  .live-ota-programs{
    flex:0 0 auto !important;
  }

  .live-ota-list{
    flex:1 1 0 !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:7px !important;
    padding-bottom:36px !important;
    scroll-padding-bottom:36px !important;
    overscroll-behavior:contain !important;
  }

  .live-ota-row{
    min-height:50px !important;
    grid-template-columns:36px minmax(0,1fr) 56px !important;
    gap:9px !important;
    padding:7px 4px 7px 0 !important;
  }

  #fof2Chart{
    height:132px !important;
    min-height:132px !important;
  }

  #mufChart{
    height:116px !important;
    min-height:116px !important;
  }

  #historyChart{
    height:128px !important;
    min-height:128px !important;
  }

  .footer{
    display:flex !important;
    width:100% !important;
    margin-top:10px !important;
    min-height:46px !important;
    padding:10px 16px !important;
    box-sizing:border-box !important;
  }
}


/* =====================================================================
   🟢 OK7JN – SKUTEČNÝ STAV DAT / ONLINE PILL
   ---------------------------------------------------------------------
   Dřív svítilo ONLINE pořád, i když propagation.json stál.
   Teď barva odpovídá stáří timestampu v JSONu.

   Jarda nápověda:
   - zelená  = čerstvá data
   - žlutá   = stará data / fetcher nebo upload stojí
   - červená = JSON nejde načíst
   Hranice stáří se nastavuje v app.js: DATA_STALE_LIMIT_MINUTES.
   ===================================================================== */
.online-pill.is-online{
  background:#0c6b53 !important;
  border-color:rgba(48,242,125,.35) !important;
  color:#dfffea !important;
}
.online-pill.is-online span{
  border-color:var(--green,#30f27d) !important;
}

.online-pill.is-stale{
  background:linear-gradient(135deg,rgba(255,201,40,.28),rgba(132,82,13,.88)) !important;
  border-color:rgba(255,201,40,.62) !important;
  color:#fff6cf !important;
}
.online-pill.is-stale span{
  border-color:#ffc928 !important;
}

.online-pill.is-offline{
  background:linear-gradient(135deg,rgba(255,77,105,.30),rgba(102,28,45,.90)) !important;
  border-color:rgba(255,77,105,.62) !important;
  color:#ffe5ea !important;
}
.online-pill.is-offline span{
  border-color:#ff4d69 !important;
}

/* =====================================================================
   OK7JN HF_new – CLEAN FINAL LIVE OTA FIX
   ---------------------------------------------------------------------
   Jarda nápověda:
   - Tohle je JEDINÝ finální přepis LIVE OTA řádků v testovací HF_new verzi.
   - Řádek má 3 viditelné části: pásmo | značka+detail | program+čas.
   - .band-dot je schovaná, protože HTML ji stále obsahuje kvůli kompatibilitě.
   - Scroll je jen uvnitř seznamu, ne přes text.
   - SOTA má vínovou barvu #9e2652 / čitelný text #d96b96.
   ===================================================================== */

.band-dot{
  display:none !important;
}

.live-ota-list{
  scrollbar-gutter:stable !important;
  padding-right:10px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

.live-ota-row{
  display:grid !important;
  grid-template-columns:46px minmax(0,1fr) 78px !important;
  align-items:center !important;
  gap:11px !important;
  min-height:41px !important;
  padding:5px 2px 5px 0 !important;
  overflow:hidden !important;
}

.band-pill{
  width:40px !important;
  min-width:40px !important;
  height:24px !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:2px solid currentColor !important;
  border-radius:9px !important;
  background:transparent !important;
  color:currentColor !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

.live-ota-main{
  min-width:0 !important;
  overflow:hidden !important;
}

.live-ota-main strong{
  display:block !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.06 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.live-ota-main small{
  display:block !important;
  margin-top:2px !important;
  font-size:10px !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.live-ota-side{
  min-width:78px !important;
  width:78px !important;
  max-width:78px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:5px !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-align:right !important;
}

.live-ota-side b,
.live-ota-side small{
  display:inline-block !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  font-weight:900 !important;
}

.live-ota-side b{
  font-size:10px !important;
  color:#f5f9ff !important;
}

.live-ota-side small{
  font-size:9px !important;
  color:#d7e4ff !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* barvy programů v pravém sloupci */
.program-row-sota .live-ota-side b{color:#d96b96 !important;}
.program-row-pota .live-ota-side b{color:#4f8cff !important;}
.program-row-wwff .live-ota-side b{color:#48f29b !important;}
.program-row-tota .live-ota-side b{color:#ff66c4 !important;}
.program-row-bota .live-ota-side b{color:#ffb14a !important;}

/* horní SOTA badge/chip */
.program-sota,
.live-filter-btn[data-program="SOTA"],
.live-pill-sota,
.program-chip.program-sota{
  background:rgba(158,38,82,.18) !important;
  border-color:rgba(158,38,82,.78) !important;
  color:#d96b96 !important;
  box-shadow:0 0 14px rgba(158,38,82,.24) !important;
}

.program-sota b,
.program-chip.program-sota b,
.live-filter-btn[data-program="SOTA"] b,
.live-pill-sota b{
  color:#ffffff !important;
}

/* notebook / 150% scaling */
@media (min-width:1100px) and (max-width:1449px){
  .live-ota-list{
    padding-right:12px !important;
  }

  .live-ota-row{
    grid-template-columns:42px minmax(0,1fr) 76px !important;
    gap:9px !important;
    min-height:39px !important;
    padding:4px 1px 4px 0 !important;
  }

  .band-pill{
    width:38px !important;
    min-width:38px !important;
    height:22px !important;
    font-size:9px !important;
  }

  .live-ota-main strong{
    font-size:13px !important;
  }

  .live-ota-main small{
    font-size:10px !important;
  }

  .live-ota-side{
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;
    gap:4px !important;
  }

  .live-ota-side b{
    font-size:10px !important;
  }

  .live-ota-side small{
    font-size:9px !important;
  }
}

/* větší monitor */
@media (min-width:1450px){
  .live-ota-row{
    grid-template-columns:48px minmax(0,1fr) 84px !important;
    min-height:42px !important;
  }

  .band-pill{
    width:42px !important;
    min-width:42px !important;
    height:25px !important;
    font-size:10px !important;
  }

  .live-ota-side{
    width:84px !important;
    min-width:84px !important;
    max-width:84px !important;
  }
}


/* =====================================================================
   🟢 OK7JN FINAL HEADER FIX – JAZYKY DOPROSTŘED, ONLINE VPRAVO
   ---------------------------------------------------------------------
   Cíl:
   - CZ/EN/DE/PL/FR/ES jsou opticky uprostřed horní lišty
   - Poslední aktualizace + Online jsou vpravo vedle sebe
   - tlačítka jazyků mají stejný moderní styl jako zbytek dashboardu
   ===================================================================== */

.topbar{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto auto !important;
  gap:18px !important;
  align-items:center !important;
}

.lang-switch{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  z-index:5 !important;
  margin:0 !important;
  white-space:nowrap !important;
}

.lang-switch button,
.lang-switch .lang-btn{
  min-width:42px !important;
  height:28px !important;
  padding:0 12px !important;
  border-radius:8px !important;
  border:1px solid rgba(128,190,255,.78) !important;
  background:rgba(5,18,42,.72) !important;
  color:#eef7ff !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.4px !important;
  cursor:pointer !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 rgba(40,216,255,0) !important;
  transition:transform .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

.lang-switch button:hover,
.lang-switch .lang-btn:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(129,220,255,.95) !important;
  background:rgba(22,55,104,.86) !important;
}

.lang-switch button.is-active,
.lang-switch button.active,
.lang-switch .lang-btn.is-active,
.lang-switch .lang-btn.active{
  border-color:rgba(157,238,255,.95) !important;
  background:linear-gradient(180deg,rgba(102,214,255,.95),rgba(35,112,184,.92)) !important;
  color:#ffffff !important;
  box-shadow:0 0 16px rgba(40,216,255,.55), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.status-head{
  grid-column:2 !important;
  justify-self:end !important;
  text-align:right !important;
  min-width:170px !important;
}

.online-pill{
  grid-column:3 !important;
  justify-self:end !important;
  align-self:center !important;
  margin:0 !important;
  width:auto !important;
}

/* notebook / menší desktop */
@media (max-width:1350px){
  .topbar{
    grid-template-columns:minmax(0,1fr) auto auto !important;
    gap:12px !important;
  }

  .lang-switch{
    gap:5px !important;
  }

  .lang-switch button,
  .lang-switch .lang-btn{
    min-width:34px !important;
    height:24px !important;
    padding:0 8px !important;
    font-size:10px !important;
    border-radius:7px !important;
  }

  .status-head{
    min-width:135px !important;
  }
}

/* mobil */
@media (max-width:900px){
  .topbar{
    grid-template-columns:1fr auto !important;
    gap:10px !important;
  }

  .brand{
    grid-column:1 / -1 !important;
  }

  .lang-switch{
    position:static !important;
    transform:none !important;
    grid-column:1 / -1 !important;
    justify-self:center !important;
    order:2 !important;
    margin:4px 0 !important;
    overflow-x:auto !important;
    max-width:100% !important;
  }

  .status-head{
    grid-column:1 !important;
    justify-self:start !important;
    text-align:left !important;
    min-width:0 !important;
  }

  .online-pill{
    grid-column:2 !important;
    justify-self:end !important;
  }
}

/* =====================================================================
   🟢 OK7JN DESKTOP MICRO-ZOOM – zrušení scrollu bez rozbití layoutu
   ---------------------------------------------------------------------
   Tohle je nejšetrnější oprava:
   - nepřepisuje grid
   - nemění LIVE OTA řádky
   - nemění velikosti jednotlivých boxů ručně
   - jen na velkém monitoru celý dashboard nepatrně zmenší

   Jarda nápověda:
   - 0.985 = skoro beze změny
   - 0.980 = menší o 2 %
   - 0.975 = ještě o chlup menší, kdyby scrollbar zůstal
   ===================================================================== */
@media (min-width:1450px) and (min-height:850px){
  html{
    overflow-y:hidden !important;
  }

  body{
    overflow-y:hidden !important;
    zoom:.970;
  }
}