/*
 * Úvodní obrazovka (přehled). Geometrie je v SVG ve views/prehled.php,
 * tady jsou jen barvy a písma. Vlastní proměnné --ph-* záměrně nemíchají
 * škálu --fs-* dashboardu, která je navržená na vzdálenost paže.
 */
.screen.prehled {
  --ph-fg: var(--fg);
  --ph-cisla: Digital, Inter, sans-serif;
  --ph-text: Inter, system-ui, sans-serif;

  padding: 0;
  background: var(--bg);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.prehled .ph-platno { display: block; width: 100%; height: 100%; }

.prehled text { fill: var(--ph-fg); font-family: var(--ph-text); }
.prehled .ph-num { font-family: var(--ph-cisla); font-style: italic; }
/* Teploty barví prehled.js inline stylem (fill) teplotní škálou z app.js,
   stejně jako .temp na hlavní obrazovce; ° a „–" barvu dědí. */
#ph-venku, #ph-doma { transition: fill 600ms ease; }
.prehled .ph-txt { font-weight: 600; }

/* Digital-7 nemá znak ° ani pomlčku pro chybějící hodnotu. */
.prehled .ph-stupen,
.prehled .ph-chybi { font-family: var(--ph-text); font-style: normal; font-weight: 600; }

/* Stará data: číslo zůstane, ale ztlumené. U 170px číslic je to vidět i ze
   4 m, na rozdíl od šedé u malého písma. */
.prehled .ph-stare { fill-opacity: .5; }

.prehled #ph-ikona { color: var(--ph-fg); }

.prehled .ph-domecek {
  fill: none;
  stroke: var(--ph-fg);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Čidla doma nesouhlasí nebo jedno chybí (prehled.cidla): domeček červený,
   místo dveří vykřičník. --bad, ne --warn — oranžová splývá s teplotou doma. */
.prehled .ph-dum-vykricnik { display: none; }
.prehled.ph-cidla .ph-dvere { display: none; }
.prehled.ph-cidla .ph-dum-vykricnik { display: inline; }
.prehled.ph-cidla .ph-domecek { stroke: var(--bad); }

/* Vlhkost doma: bílá v cílovém pásmu, mimo něj vlhko korálová, sucho modrá
   (--cool). Ne --warn: ta je k nerozeznání od teploty doma (20–24 ° ve
   škále tempColor), která stojí hned vedle. */
#ph-vlhkost { fill: var(--ph-fg); transition: fill 600ms ease; }
#ph-vlhkost.ph-vl-high { fill: #ff8a65; }
#ph-vlhkost.ph-vl-low  { fill: var(--cool); }
.prehled .ph-procento { font-family: var(--ph-text); font-style: normal; font-weight: 600; }

/* Ikona okna: čáry a výplň má symbol #ph-okno-sym v atributech (CSS se do
   kopie v <use> nedostane spolehlivě), sem patří jen barva přes color. */
/* Okno u domečku: teď je vhodné vyvětrat. Barvy verdiktu z hlavní
   obrazovky (.v-open zelená, .v-short modrá). */
.prehled #ph-okno { display: none; color: var(--good); }
.prehled.ph-vetrat #ph-okno { display: inline; }
.prehled #ph-okno.ph-ve-short { color: var(--cool); }

/* Pruh výstrahy: barva stupně nese informaci i tam, kde text není čitelný.
   Barvy jsou stejné jako v chmi_alerts.php (pruh na hlavní obrazovce). */
.prehled #ph-vystraha { display: none; }
.prehled.ph-ma-vystrahu #ph-vystraha { display: inline; }

.prehled .ph-v-info   { --ph-v-bg: #64b5f6; --ph-v-fg: #06243b; }
.prehled .ph-v-yellow { --ph-v-bg: #f5c518; --ph-v-fg: #2a2000; }
.prehled .ph-v-orange { --ph-v-bg: #f57c00; --ph-v-fg: #2b1400; }
.prehled .ph-v-red    { --ph-v-bg: #d32f2f; --ph-v-fg: #ffffff; }

.prehled .ph-pruh { fill: var(--ph-v-bg); }
.prehled .ph-trojuhelnik {
  fill: var(--ph-v-fg);
  stroke: var(--ph-v-fg);
  stroke-width: 6;
  stroke-linejoin: round;
}
.prehled .ph-vykricnik { fill: var(--ph-v-bg); font-weight: 700; }
.prehled .ph-vtext { fill: var(--ph-v-fg); font-weight: 500; }
.prehled .ph-jev { font-weight: 700; }