/* ===================================================================
   SLC Cloud – gemeinsame Styles für Dashboard-Seiten
   (index.html / kuehler.html / sensoren.html / admin.html / export.html)
   =================================================================== */

* { box-sizing: border-box; }
body {
    font-family: 'Segoe UI', sans-serif;
    background: #f0f2f5;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Header / Navigation ── */
.header { text-align: center; margin-bottom: 30px; }
.logo   { height: 40px; margin-bottom: 10px; }
.title  { margin: 5px 0 16px 0; color: #2c3e50; }

.nav-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.btn-nav {
    background: #2c3e50; color: white;
    padding: 10px 18px; border-radius: 8px;
    text-decoration: none; font-weight: bold;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: 0.2s;
    font-size: 0.9rem;
}
.btn-nav:hover    { background: #34495e; transform: translateY(-2px); }
.btn-nav.active   { background: #1a73e8; }
.btn-nav.cool     { background: #2980b9; }
.btn-nav.sensors  { background: #00897b; }
.btn-nav.admin    { background: #7f8c8d; }
.btn-nav.export   { background: #27ae60; }

/* ── Verbindungs-Banner (oben, blendet bei Fetch-Fehler ein) ── */
.conn-banner {
    width: 100%; max-width: 1300px;
    background: #fdecea; color: #c0392b;
    border: 1px solid #e74c3c; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 16px;
    font-size: 0.85rem; font-weight: bold;
    display: none;
}
.conn-banner.visible { display: block; }

/* ── Karten-Grid ── */
.unit-grid {
    display: flex; flex-wrap: wrap; gap: 20px;
    justify-content: center;
    width: 100%; max-width: 1300px;
    margin-top: 10px;
}
.empty-hint {
    color: #7f8c8d; font-size: 0.95rem;
    margin-top: 40px; text-align: center;
}

/* ── Karten ── */
.card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex; flex-direction: column;
    padding: 20px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0,0,0,0.1); }
.card-slc   { border-top: 4px solid #1a73e8; width: 320px; }
.card-iveco { border-top: 4px solid #2980b9; width: 320px; }
.card-szb   { border-top: 4px solid #00897b; width: 420px; }

/* ── SLC: prominente Unit-Nummer ── */
.card-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
}
.unit-num {
    font-size: 2rem; font-weight: 800;
    color: #1a73e8; letter-spacing: -1px;
    line-height: 1;
}
.unit-num-iveco { color: #2980b9; }
.unit-num-szb   { color: #00897b; }
.unit-prefix {
    font-size: 0.55rem; color: #95a5a6;
    font-weight: bold; letter-spacing: 1px;
    text-transform: uppercase;
    display: block; margin-bottom: 2px;
}
.card-badges { display: flex; gap: 6px; align-items: center; }

/* ── Temperatur-Anzeige ── */
.temp-val {
    font-size: 2.8rem; font-weight: bold; color: #1a73e8;
    text-align: center; margin: 16px 0;
}
.temp-val-cool { color: #2980b9; }
.heating-label {
    font-size: 0.8rem; font-weight: bold; color: #e67e22;
    height: 16px; text-align: center;
}

/* ── Steuerelemente ── */
.controls {
    background: #f8f9fa; border-radius: 10px;
    padding: 12px;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.btn-adj {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid #ddd; background: white;
    font-size: 1.2rem; font-weight: bold; cursor: pointer;
}
.btn-adj-sm {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid #e5e5e5; background: white;
    color: #7f8c8d;
    font-size: 0.85rem; font-weight: bold; cursor: pointer;
}
.btn-adj-sm:hover { color: #2c3e50; border-color: #bdc3c7; }
.setpoint-val { font-size: 1.1rem; font-weight: bold; color: #2c3e50; }
.quick-btns   { display: flex; gap: 10px; justify-content: center; }
.btn-quick {
    flex: 1; padding: 8px;
    border: 1px solid #1a73e8; background: white; color: #1a73e8;
    border-radius: 6px; font-weight: bold; cursor: pointer;
    font-size: 0.8rem; transition: 0.2s;
}
.btn-quick:hover { background: #1a73e8; color: white; }

/* ── Badges ── */
.badge {
    padding: 4px 10px; border-radius: 6px;
    font-size: 0.75rem; font-weight: bold;
    cursor: pointer; border: none;
}
.badge-voll { background: #2ecc71; color: white; }
.badge-halb { background: #f39c12; color: white; }
.lora-badge { font-size: 0.55rem; background: #8e44ad; color: white; border-radius: 4px; padding: 1px 5px; font-weight: bold; }
.szb-badge  { font-size: 0.55rem; background: #00897b; color: white; border-radius: 4px; padding: 1px 5px; font-weight: bold; }
.wifi-badge { font-size: 0.55rem; background: #2980b9; color: white; border-radius: 4px; padding: 1px 5px; font-weight: bold; }

/* ── Status-Zeile ── */
.status-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    align-items: center; margin-top: 14px;
}
.meta-txt { font-size: 0.6rem; color: #bdc3c7; font-weight: bold; }
.led {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
    transition: background 0.3s, box-shadow 0.3s;
}
.led-green { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.led-red   { background: #e74c3c; box-shadow: 0 0 6px #e74c3c; }

/* ── ZigBee-Sensor-Bereich (SLC – zusammenklappbar) ── */
.zb-section { margin-top: 14px; border-top: 1px solid #eee; padding-top: 10px; }
.zb-header {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none;
}
.zb-header-title {
    font-size: 0.7rem; font-weight: bold; color: #8e44ad;
    display: flex; align-items: center; gap: 4px;
}
.zb-toggle { font-size: 0.6rem; color: #bdc3c7; transition: transform 0.2s; }
.zb-toggle.open { transform: rotate(180deg); }
.zb-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 8px; margin-top: 8px; overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}
.zb-grid.collapsed { max-height: 0; opacity: 0; margin-top: 0; }
.zb-grid.expanded  { max-height: 800px; opacity: 1; }

/* ── Funksensor-Bereich (SZB – immer offen, 5×2) ── */
.szb-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 8px; margin-top: 12px;
}

/* ── Funksensor-Bereich (SLC auf Sensoren-Seite – immer offen, 3×2) ── */
.sensors-grid-6 {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-top: 12px;
}

.zb-sensor-tile {
    background: #f8f9fa; border-radius: 8px;
    padding: 6px 8px; text-align: center;
    border: 1px solid #eee;
    height: 88px;
    display: flex; flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}
.zb-sensor-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.08); }
.zb-sensor-tile.stale { opacity: 0.35; }
.zb-slot-label { font-size: 0.55rem; color: #7f8c8d; font-weight: bold; }
.zb-temp { font-size: 0.95rem; font-weight: bold; color: #2c3e50; }
.zb-hum  { font-size: 0.6rem; color: #3498db; }
.zb-spark-wrap {
    position: relative; width: 100%; height: 28px;
}
.zb-spark {
    position: absolute; top: 0; left: 0;
    width: 100% !important; height: 100% !important;
}

/* ── Detail-Modal ── */
#detailModal {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    justify-content: center; align-items: center;
}
.modal-content {
    background: white; padding: 30px; border-radius: 20px;
    width: 90%; max-width: 900px; height: 80vh; position: relative;
}
.close-btn {
    position: absolute; top: 20px; right: 25px;
    font-size: 30px; cursor: pointer; color: #7f8c8d;
}