/* =============================================================================
 * SensorControl v2 — Seitenstile (ausgelagert aus index.php am 2026-06-09)
 * Eingebunden in index.php via <link rel="stylesheet" href="index.css?...">.
 * Tailwind (CDN) liefert die Utility-Klassen; hier stehen nur die eigenen
 * Komponenten-Stile (Pins, Karten-Layout, Prüfertabelle, Druck).
 * =========================================================================== */

      .pin {
        position:absolute; width:1.25rem; height:1.25rem; border-radius:9999px;
        border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.35);
        transform:translate(-50%,-50%); cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        color:#fff; font-size:9px; font-weight:600;
      }
      /* T: BLE-Raumfühler — quadratischer Pin mit Thermometer-Symbol (Fallback
         = Quadrat, falls das Icon nicht rendert). Etwas größer für das Icon. */
      .pin.pin-raumfuehler {
        width:1.4rem; height:1.4rem; border-radius:5px;
      }
      .pin.pin-raumfuehler .pin-therm-icon { width:0.85rem; height:0.85rem; color:#fff; }
      .pin.pin-raumfuehler .pin-therm-icon svg { width:100%; height:100%; }
      .pin.pulse { animation: pulse 1.4s ease-in-out infinite; }
      @keyframes pulse {
        0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
        50%     { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
      }
      /* Button-Press-Popup: kurzes Einblenden + leichtes Reinrutschen */
      @keyframes btnPopupIn {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .btn-popup { animation: btnPopupIn 0.18s ease-out; }
      /* Stumm: Temperatursensor ohne aktuelle Minutendaten — dunkelgrauer
         Pin mit rotem Ring statt weißem Rand (deutlich, aber kein Pulse). */
      .pin.pin-stumm { border-color:#ef4444; }
      /* Service aktiv: der Pin behält seine normale Status-/Alarmfarbe (damit
         der aktuelle Zustand sichtbar bleibt); ein kleines blaues Quadrat oben
         rechts markiert „offener Service-Auftrag". Gilt für beide Karten
         (Temperatur + Strom). */
      .pin.pin-service::after,
      .pin-strom.pin-service .dot::after {
        content:'';
        position:absolute;
        top:-4px; right:-4px;
        width:8px; height:8px;
        background:#2563eb;
        border:1px solid #fff;
        border-radius:1px;
        box-shadow:0 0 0 1px rgba(0,0,0,.25);
        z-index:12;
      }
      .pin-strom.pin-service .dot { position:relative; }
      .pin.pin-service       { z-index:11; }
      .pin-strom.pin-service { z-index:11; }
      /* G5: Service-VORSCHLAG-Pin — der Servicetechniker hat für diesen Sensor
         einen Service vorgeschlagen, der Markt hat noch nicht reagiert. Blauer
         Ring via OUTLINE (nicht box-shadow!) — damit er auch sichtbar bleibt,
         wenn der Pin gleichzeitig die rote Puls-Animation (box-shadow) trägt
         (Alarm/Batterie). Gilt für beide Karten (Temperaturen + Strom). */
      .pin.pin-vorschlag,
      .pin-strom.pin-vorschlag {
        outline: 3px solid #2563eb;
        outline-offset: 2px;
        z-index: 11;
      }
      /* Hervorhebung des aktuell im Detail-Panel angezeigten Sensors:
         dicker amber-Ring + leicht vergrößert + nach oben gestapelt,
         damit er auch zwischen vielen Pins sofort ins Auge springt.
         Die scale-Transformation muss die centering-Translation aus .pin
         mitführen, sonst springt der Pin beim Aktivieren weg. */
      .pin.active {
        outline: 3px solid #f59e0b;
        outline-offset: 3px;
        transform: translate(-50%, -50%) scale(1.35);
        z-index: 10;
      }

      /* G6/Kombi-Dashboard: kombinierter Pin (Temperatur + Strom in einem).
       * Äußerer Ring = %-Abweichung Stromverbrauch (±20% grün/±40% gelb/
       * darüber rot), innerer Kreis = Temperatur-Status (Farbe kommt aus der
       * bestehenden getStatus()-Klassifikation, inline gesetzt — SAME Quelle
       * wie die Temperatur-Ansicht, keine zweite Farblogik). Der äußere Ring
       * wechselt NICHT die Farbe bei Alarm — dafür gibt es den Puls
       * (@keyframes pulse, oben, wiederverwendet). Grau-Sonderfall (Ausfall/
       * Ausgeschaltet/stumm) überschreibt BEIDE Kreise, siehe
       * .pin-kombi-grau unten — dort spielt die %-/Temp-Farbe keine Rolle.
       */
      .pin-kombi {
        position:absolute; width:1.6rem; height:1.6rem; border-radius:9999px;
        border:4px solid #9ca3af;   /* Default grau, von ring-* überschrieben */
        background:#fff;
        box-shadow:0 1px 3px rgba(0,0,0,.35);
        transform:translate(-50%,-50%); cursor:pointer;
        display:flex; align-items:center; justify-content:center;
      }
      .pin-kombi-inner {
        width:0.85rem; height:0.85rem; border-radius:9999px;
        background:#888780;   /* Default grau — Temp-Farbe kommt inline */
      }
      .pin-kombi.ring-gruen  { border-color:#16a34a; }
      .pin-kombi.ring-gelb   { border-color:#eab308; }
      .pin-kombi.ring-rot    { border-color:#dc2626; }
      /* Extremer Unter-Verbrauch (< -60%, Betreiber-Vorgabe 2026-07-16) —
       * weder "schlecht wie Rot" (Über-Verbrauch) noch "normal wie Grün"
       * (milder Unter-Verbrauch), daher eigene Orange-Farbe. */
      .pin-kombi.ring-orange { border-color:#f97316; }
      /* Ausfall/kein Kontakt (offline, MinutendatenStumm): beide Kreise grau.
       * Bewusst ausgeschaltet: beide Kreise HELLgrau (Betreiber-Vorgabe
       * 2026-07-16 — bewusst abweichend von getStatus(), das "Ausgeschaltet"
       * auf der Temperatur-Seite als eigenen Amber-Hinweis führt; hier soll
       * die %-/Temp-Farbe in beiden Fällen keine Rolle spielen). */
      .pin-kombi.pin-kombi-grau,
      .pin-kombi.pin-kombi-grau.ring-gruen,
      .pin-kombi.pin-kombi-grau.ring-gelb,
      .pin-kombi.pin-kombi-grau.ring-rot,
      .pin-kombi.pin-kombi-grau.ring-orange {
        border-color:#9ca3af;
      }
      .pin-kombi.pin-kombi-grau .pin-kombi-inner { background:#888780 !important; }
      .pin-kombi.pin-kombi-hellgrau,
      .pin-kombi.pin-kombi-hellgrau.ring-gruen,
      .pin-kombi.pin-kombi-hellgrau.ring-gelb,
      .pin-kombi.pin-kombi-hellgrau.ring-rot,
      .pin-kombi.pin-kombi-hellgrau.ring-orange {
        border-color:#d1d5db;
      }
      .pin-kombi.pin-kombi-hellgrau .pin-kombi-inner { background:#d1d5db !important; }
      .pin-kombi.pulse { animation: pulse 1.4s ease-in-out infinite; }
      .pin-kombi.pin-service::after {
        content:'';
        position:absolute;
        top:-4px; right:-4px;
        width:8px; height:8px;
        background:#2563eb;
        border:1px solid #fff;
        border-radius:1px;
        box-shadow:0 0 0 1px rgba(0,0,0,.25);
        z-index:12;
      }
      .pin-kombi.pin-service  { z-index:11; }
      .pin-kombi.pin-vorschlag {
        outline: 3px solid #2563eb;
        outline-offset: 2px;
        z-index: 11;
      }
      .pin-kombi.active {
        outline: 3px solid #f59e0b;
        outline-offset: 3px;
        transform: translate(-50%, -50%) scale(1.35);
        z-index: 10;
      }
      /* %-Beschriftung mittig unter dem Pin — gleiches Muster wie
       * .pin-strom .verbrauch / .pin .pin-label (oben). */
      .pin-kombi-label {
        position:absolute; left:50%; top:0.85rem; transform:translateX(-50%);
        font-size:9px; font-weight:600; color:#1f2937;
        background:rgba(255,255,255,.85); padding:0 3px; border-radius:3px;
        white-space:nowrap; pointer-events:none; text-align:center;
      }

      /* Prüfertabelle */
      .pruef-table th, .pruef-table td {
        border:1px solid #e5e7eb; padding:3px 3px; text-align:center; white-space:nowrap;
      }
      .pruef-table th { background:#f9fafb; font-weight:600; }
      /* Sensor-Spalte links bekommt etwas mehr Innenabstand + linksbündig.
         Die Stunden/Min/Max/Ø-Zahlenspalten sind absichtlich kompakt
         (padding 3px 3px), damit die Sensor-Spalte mit Anzeigename +
         Beschreibung mehr Platz hat ohne dass die Zeilenhöhe wächst. */
      .pruef-table td.cell-name { text-align:left; font-weight:500; padding:3px 8px; }
      .cell-warn { background:#FAEEDA; }
      .cell-crit { background:#FCEBEB; font-weight:bold; color:#A32D2D; }
      .cell-empty { color:#cbd5e1; }

      /* Strom-Karte: Pin mit kleiner Verbrauchs-Beschriftung daneben.
         Der Pin selbst ist eine farbige Kugel (anomal=rot, ok=grün, grau=off),
         das Label sitzt rechts darunter und nimmt nur wenig Platz. */
      .pin-strom {
        position:absolute; transform:translate(-50%,-50%);
        cursor:pointer; z-index:1;
      }
      .pin-strom .dot {
        width:1.1rem; height:1.1rem; border-radius:9999px;
        border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.35);
      }
      /* Wert-Beschriftung mittig UNTER dem Pin (statt rechts daneben) — so
         verdeckt sie nicht mehr die Beschriftung des Nachbar-Pins. Gilt für
         Strom (.pin-strom .verbrauch) und Temperatur (.pin .pin-label). */
      .pin-strom .verbrauch,
      .pin .pin-label {
        position:absolute; left:50%; transform:translateX(-50%);
        font-size:9px; font-weight:600; color:#1f2937;
        background:rgba(255,255,255,.85); padding:0 3px; border-radius:3px;
        white-space:nowrap; pointer-events:none; text-align:center;
      }
      /* Text beginnt auf halber Pin-Höhe (wie früher), nur mittig statt rechts. */
      .pin-strom .verbrauch { top:0.6rem; }    /* Dot 1.1rem hoch → Mitte */
      .pin .pin-label       { top:0.65rem; }   /* Pin 1.25rem hoch → Mitte */
      .pin-strom.anomal .dot          { background:#dc2626; animation: pulse 1.4s ease-in-out infinite; }
      .pin-strom.dauerverbrauch .dot  { background:#7dd3fc; }   /* hellblau (sky-300) — Dauerverbraucher, kein Alarm */
      .pin-strom.ok    .dot           { background:#16a34a; }
      .pin-strom.off   .dot           { background:#9ca3af; }
      /* Stumm: keine aktuellen Strom-Minutendaten (>15 min alt) — dunkelgrau
         mit rotem Ring, blinkend wie ein echter Alarm. Analog zur Temp-Karte. */
      .pin-strom.stumm .dot {
        background:#374151;
        border-color:#ef4444;
        animation: pulse 1.4s ease-in-out infinite;
      }
      /* Kurzfrist-Alarm #1 (sensor_aus_unmarkiert): Plug meldet Ausgang AUS,
         ist aber nicht als ausgeschaltet markiert → schwarzer Dot mit rotem
         Ring, blinkend. Hebt sich klar von „off" (grau) und „stumm" ab. */
      .pin-strom.aus-alarm .dot {
        background:#111827;
        border-color:#ef4444;
        border-width:3px;
        animation: pulse 1.4s ease-in-out infinite;
      }
      /* Ausgewählter Sensor (per Pin-Klick oder Quick-Jump-Dropdown):
         zusätzlicher blauer Ring um den Dot. Überlagert die Farb-Klassen
         (anomal/ok/stumm/…) — damit der User auch in einer Karte mit
         vielen roten Pins erkennt, welchen er gerade in der Sidebar
         betrachtet. Z-Index hebt den ausgewählten Pin nach vorn. */
      .pin-strom.aktiv {
        z-index:5;
      }
      .pin-strom.aktiv .dot {
        outline:3px solid #2563eb;
        outline-offset:2px;
      }

      /* Strom-View Grid: 2-Col-Layout erst ab Displays die Map (mind. 1000 px)
         UND Detail-Sidebar (mind. ~500 px) plus Padding nebeneinander
         tragen — sonst quetscht es die Sidebar zu schmal. !important nötig,
         weil Tailwind's .grid-cols-1 die gleiche Specificity hat. */
      @media (min-width: 1600px) {
        .strom-grid { grid-template-columns: 2fr 1fr !important; }
      }

      /* B3: In der Strom-Sidebar Minuten- und Stundenchart ab 1200px
         nebeneinander (darunter gestapelt). */
      .strom-charts-2col { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
      @media (min-width: 1200px) {
        .strom-charts-2col { grid-template-columns: 1fr 1fr; }
      }

      /* B7: Plakette + Möbel-Foto ab 1000px nebeneinander; die Ereignisliste
         (3. Kind) rutscht VOLLE BREITE darunter — sonst quetschen die längeren
         Ereignis-Detailtexte die schmale 3. Spalte extrem in die Höhe. */
      .strom-info-3col { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
      @media (min-width: 1000px) {
        .strom-info-3col { grid-template-columns: 1fr 1fr; align-items: start; }
        .strom-info-3col > :last-child { grid-column: 1 / -1; }
      }

      /* Marktplan-Container: nie unter 1000 px Breite gehen (Wunsch User —
         sonst werden die Pins nicht mehr unterscheidbar). Auf schmalen
         Viewports horizontal scrollen (siehe overflow-x-auto Wrapper im
         HTML). Wichtig: Bild muss EXAKT denselben Bereich abdecken wie
         das Pin-Overlay, sonst driften die Pins (deshalb KEIN
         object-fit/max-height — beides erzeugt Whitespace zwischen
         Bild und Overlay-Box). Gilt für alle drei Karten-Views. */
      #stromMapWrapper,
      #mapWrapper       { min-width: 1000px; }
      /* Namens-Karte 50 % breiter: bei dicht gesetzten Pins überlappen
         die Text-Labels sonst. Bild und Pin-Overlay skalieren prozentual
         mit, deshalb kein extra Positionsfix nötig. */
      #namenMapWrapper  { min-width: 1500px; }
      #stromMarktBild,
      #marktBild,
      #namenMarktBild  { width: 100%; height: auto; display: block; }

      /* Namens-Karte: statt eines Pin-Kreises der Sensorname als Text-Label
         direkt an der Pin-Position. Hilft beim schnellen Auffinden. */
      .name-label {
        position:absolute; transform:translate(-50%,-50%);
        font-size:11px; font-weight:600; color:#111827;
        background:rgba(255,255,255,.9); border:1px solid #d1d5db;
        padding:1px 5px; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.15);
        cursor:pointer; white-space:nowrap;
      }
      .name-label:hover { background:#fde68a; }

      /* Tablet-Layout: ab unter 1000px die Sensorkacheln 2-spaltig mit
         jeweils max 300px Breite, damit zwei Kacheln nebeneinander auf
         typische Tablet-Bildschirme passen. Auto-fill fängt schmalere
         Phones automatisch auf eine Spalte zurück. */
      @media (max-width: 999.98px) {
        #sensorTiles {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(0, 300px));
          gap: 0.5rem;
          justify-content: start;
        }
        #sensorTiles > * { max-width: 300px; }
      }

      /* WLAN-Qualitäts-Heatmap: Messpunkt-Marker über dem Heatmap-Canvas.
         Liegen über dem Canvas (pointer-events des Canvas sind aus), zeigen den
         dBm-Wert und reagieren auf Hover (title). */
      .wlan-dot {
        position:absolute; width:0.9rem; height:0.9rem; border-radius:9999px;
        border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.45);
        transform:translate(-50%,-50%); z-index:2; cursor:default;
      }
      .wlan-dot-label {
        position:absolute; left:50%; top:0.5rem; transform:translateX(-50%);
        font-size:9px; font-weight:600; color:#1f2937;
        background:rgba(255,255,255,.85); padding:0 3px; border-radius:3px;
        white-space:nowrap; pointer-events:none;
      }

      @media print {
        nav, #statsLeiste, #toolbar, .no-print { display:none !important; }
        body { background:#fff; }
        #viewTabelle { display:block !important; box-shadow:none; }
        .pruef-table { font-size:9pt; border-collapse:collapse; width:100%; }
        .pruef-table th, .pruef-table td { border:0.5pt solid #ccc; padding:3pt 4pt; }
        .cell-warn { background:#FAEEDA !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
        .cell-crit { background:#FCEBEB !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; font-weight:bold; }
      }