/* ================================================================
   style-fullhd.css
   Ergänzung zu style2026.css für das kompakte 1-Screen-Dashboard
   (1920x1080, Querformat, kein Scrollen).
   Wird NACH style2026.css eingebunden und nutzt dessen CSS-Variablen.
   ================================================================ */

/* Kompakterer Schatten für das dichte FullHD-Layout: die globale
   --shadow-Variable (10px 20px 30px) bleibt bei den engen 6-10px
   Abständen zwischen den Boxen nicht innerhalb der Wrapper-Grenze
   und wird deshalb an der letzten Spalte/Zeile sichtbar
   "abgeschnitten"/hängt heraus. */
:root {
    --shadow-fhd: 2px 3px 6px rgba(0, 0, 0, 0.45);
}

html, body.fullhd-dashboard {
    height: 100vh;    /* Fallback für Browser ohne dvh-Unterstützung */
    height: 100dvh;   /* tatsächlich sichtbare Höhe, nicht der theoretisch größtmögliche Viewport */
    width: 100%;
    overflow: hidden;
    overflow-x: hidden;
}

body.fullhd-dashboard {
    padding-top: 49px;   /* Platz für fixe Nav, wie im Standard-Layout */
    margin: 0;
}

/* Rand am unteren Bildschirmrand, analog zum border-bottom der fixen
   Nav oben (style2026.css). Als eigenes fixed-Element statt als
   body-border, da letzteres je nach Rundung/overflow:hidden auf
   html unzuverlässig sichtbar war. */
.FHD-BottomBorder {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #a0a0a0;
    z-index: 100;
}

.FHD-Wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 49px);    /* Fallback */
    height: calc(100dvh - 49px);
    max-height: calc(100vh - 49px);
    max-height: calc(100dvh - 49px);
    padding: 8px 12px 10px;
    display: grid;
    grid-template-rows: minmax(0, 14vh) minmax(0, 1fr);
    row-gap: 8px;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

/* ---------------------------------------------------------------
   Zeile 1: Gauges
   --------------------------------------------------------------- */
.FHD-Gauges {
    display: flex;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}

.FHD-GaugeGroup {
    flex: 1 1 0;
    background-image: var(--box-gradient);
    border-radius: 8px;
    box-shadow: var(--shadow-fhd);
    padding: 4px 10px 6px;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.FHD-GaugeGroup-title {
    font-family: var(--font-bold);
    font-size: 13px;
    color: #d0d0d0;
    text-align: center;
    margin: 0 0 4px;
}

.FHD-GaugeRow {
    display: flex;
    gap: 8px;
    justify-content: center;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.FHD-GaugeBox {
    flex: 1 1 0;
    max-width: 220px;
    min-width: 0;
    height: 100%;
    min-height: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-fhd);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gauges rendern IMMER bei fester Auflösung (220x150, wie im
   Standard-Layout). Verkleinerung passiert rein visuell über
   transform: scale(...) per JS -> Zeiger, Skala, Zahlen skalieren
   linear im selben Verhältnis mit. */
.FHD-GaugeScale {
    width: 220px;
    height: 150px;
    flex: 0 0 auto;
    transform-origin: center center;
}

/* KPI-Werte werden von den HCScripts weiterhin per getElementById
   beschrieben (value=...), sollen aber nicht mehr angezeigt werden.
   Daher NICHT aus dem DOM entfernen, nur unsichtbar machen -
   verhindert JS-Fehler durch fehlende Elemente. */
.FHD-Kpis {
    display: none !important;
}

/* ---------------------------------------------------------------
   Charts (17 Boxen in 6 Spalten x 3 Zeilen)
   --------------------------------------------------------------- */
.FHD-Charts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.FHD-ChartBox {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    background-color: var(--bg-secondary);
    border-radius: 6px;
    box-shadow: var(--shadow-fhd);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Highcharts rendert IMMER bei dieser festen Auflösung (700x400).
   Die eigentliche Verkleinerung passiert rein visuell über
   transform: scale(...), das per JS gesetzt wird -> alle Elemente
   (Titel, Achsen, Legende, Linien) skalieren linear im selben
   Verhältnis mit. */
.FHD-ChartScale {
    width: 700px;
    height: 400px;
    flex: 0 0 auto;
    transform-origin: center center;
}

/* ================================================================
   Hochkant-Variante (Portrait, z.B. 1080x1920)
   Wird über <body class="fullhd-dashboard portrait"> aktiviert.
   Nutzt dieselben .FHD-* Klassen, nur die Grid-Anordnung ändert sich.
   ================================================================ */

/* Gauges: 3 Gruppen einspaltig untereinander, statt nebeneinander.
   Braucht daher ca. das Dreifache an vh wie im Querformat. */
body.portrait .FHD-Wrapper {
    grid-template-rows: minmax(0, 42vh) minmax(0, 1fr);
}

body.portrait .FHD-Gauges {
    flex-direction: column;
    gap: 6px;
}

/* Charts: 3 Spalten x 6 Zeilen (18 Zellen für 17 Boxen) statt
   6 Spalten x 3 Zeilen -> passt besser zum schmalen, hohen Screen */
body.portrait .FHD-Charts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
}