/* =====================================================
   WOIFSMASTER – ENERGIE / TANKSTELLEN
   ===================================================== */

.energy-summary {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:20px;
}

.energy-card {
    background:rgba(25,30,38,.95);
    border-radius:18px;
    padding:18px;
    box-shadow:0 0 20px rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    gap:15px;
    min-height:120px;
}

.energy-icon {
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:29px;
    background:#2b313b;
}

.energy-label {
    font-size:14px;
    color:#ddd;
}

.energy-price {
    font-size:29px;
    font-weight:bold;
    margin:5px 0;
}

.diesel-card .energy-price { color:#62d84e; }
.super-card .energy-price { color:#38a8ff; }

.energy-station {
    color:#aeb6c2;
    font-size:13px;
}

.energy-grid {
    display:grid;
    grid-template-columns:3fr 1fr;
    grid-template-rows:560px auto auto;
    gap:20px;
}

.panel {
    background:rgba(25,30,38,.95);
    border-radius:18px;
    padding:20px;
    box-shadow:0 0 20px rgba(0,0,0,.35);
}

.panel h2 {
    margin:0 0 15px;
    color:#fff;
}

.energy-map-panel {
    overflow:hidden;
}

#energyMap {
    width:100%;
    height:450px;
    border-radius:15px;
}

.leaflet-container {
    border-radius:15px;
}

.fuel-buttons {
    display:flex;
    gap:10px;
    margin-bottom:12px;
}

.fuel-buttons button {
    flex:1;
    padding:10px;
    border:0;
    border-radius:8px;
    background:#2b313b;
    color:#fff;
    cursor:pointer;
    font-size:15px;
}

.fuel-buttons button:hover,
.fuel-buttons button.active {
    background:#ff9800;
}

.map-legend {
    display:flex;
    gap:20px;
    margin-top:10px;
    color:#bfc7d5;
    font-size:13px;
}

.map-legend i {
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    margin-right:5px;
}

.legend-cheap { background:#35c759; }
.legend-normal { background:#ffb300; }
.legend-expensive { background:#e64a3b; }

.price-alert-panel {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

#learningBox {
    font-size:17px;
    line-height:1.6;
}

.energy-location {
    color:#aeb6c2;
    line-height:1.6;
    font-size:14px;
}

.station-panel {
    grid-column:1;
}

.panel-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

#stationCount {
    color:#9fa8b5;
    font-size:13px;
}

.station-table-wrap {
    overflow-x:auto;
}

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

.station-table th,
.station-table td {
    padding:11px 8px;
    border-bottom:1px solid rgba(255,255,255,.08);
    text-align:left;
    white-space:nowrap;
}

.station-table th {
    color:#9da7b5;
    font-weight:normal;
    font-size:13px;
}

.station-table td {
    font-size:14px;
}

.station-table tr:hover {
    background:rgba(255,255,255,.04);
}

.price-good {
    color:#62d84e;
    font-weight:bold;
}

.price-normal {
    color:#ffbd3d;
    font-weight:bold;
}

.price-bad {
    color:#ff6961;
    font-weight:bold;
}

.change-down {
    color:#62d84e;
}

.change-up {
    color:#ff6961;
}

.change-none {
    color:#9299a4;
}

.chart-panel {
    grid-column:2;
    grid-row:2;
}

.chart-box {
    position:relative;
    width:100%;
    height:300px;
}

.selected-station {
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:10px;
    color:#bfc7d5;
}

.selected-station select {
    flex:1;
    min-width:0;
    background:#2b313b;
    color:white;
    border:0;
    border-radius:8px;
    padding:8px;
}

.learning-panel {
    grid-column:1 / 3;
}

#learningDetails {
    color:#c4cad3;
    line-height:1.7;
}

.energy-footer {
    margin-top:18px;
    text-align:center;
    color:#666;
    font-size:11px;
}

.energy-marker {
    background:#2b313b;
    border:2px solid white;
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:17px;
    box-shadow:0 2px 8px rgba(0,0,0,.45);
}

.energy-marker.cheap { background:#2cae45; }
.energy-marker.normal { background:#d99300; }
.energy-marker.expensive { background:#d64236; }

@media screen and (max-width:1000px) {
    .energy-summary {
        grid-template-columns:repeat(2,1fr);
    }

    .energy-grid {
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .station-panel,
    .chart-panel,
    .learning-panel {
        grid-column:1;
        grid-row:auto;
    }
}

@media screen and (max-width:700px) {
    .energy-summary {
        grid-template-columns:1fr;
        gap:12px;
    }

    .energy-card {
        min-height:95px;
        padding:14px;
    }

    .energy-price {
        font-size:25px;
    }

    .energy-grid {
        display:flex !important;
        flex-direction:column !important;
        gap:15px;
    }

    .panel {
        width:100% !important;
        min-width:0 !important;
    }

    #energyMap {
        height:380px;
    }

    .station-table {
        font-size:12px;
    }

    .station-table th,
    .station-table td {
        padding:8px 6px;
    }

    .selected-station {
        flex-direction:column;
        align-items:stretch;
    }

    .chart-box {
        height:250px;
    }
}