/* ===================================================
   Odstávky proudu – Frontend v2.2
   THEME-PROOF: All properties use .op-frontpage prefix
   for high specificity to prevent theme overrides.
   =================================================== */

/* ---- Reset within our containers ---- */
.op-frontpage,
.op-frontpage *,
.op-frontpage *::before,
.op-frontpage *::after,
.op-map-wrapper,
.op-map-wrapper *,
.op-panel,
.op-panel * {
    box-sizing: border-box !important;
    -webkit-text-size-adjust: 100%;
}

.op-frontpage p,
.op-frontpage h2,
.op-frontpage h3,
.op-frontpage h4 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
}

/* ---- Shared / Leaflet ---- */
.op-map, .op-fp-map { width: 100% !important; min-height: 300px; z-index: 1; }
.op-map .leaflet-popup-content, .op-fp-map .leaflet-popup-content { margin: 12px 16px !important; line-height: 1.5 !important; }
.op-map .leaflet-popup-content-wrapper, .op-fp-map .leaflet-popup-content-wrapper { border-radius: 10px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important; }
.op-outage-marker { background: transparent !important; border: none !important; box-shadow: none !important; }

/* ---- Popup ---- */
.op-popup { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; min-width: 220px; max-width: 340px; }
.op-popup-header { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 10px !important; padding-bottom: 8px !important; border-bottom: 2px solid #eee !important; }
.op-popup-icon { font-size: 22px !important; line-height: 1 !important; }
.op-popup-title { font-size: 14px !important; font-weight: 700 !important; color: #333 !important; }
.op-popup-badge { display: inline-block !important; padding: 2px 8px !important; border-radius: 12px !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; }
.op-popup-badge.active { background: #fde8e8 !important; color: #e74c3c !important; }
.op-popup-badge.planned { background: #fef3cd !important; color: #856404 !important; }
.op-popup-row { display: flex !important; align-items: flex-start !important; gap: 8px !important; margin: 5px 0 !important; font-size: 12px !important; line-height: 1.5 !important; color: #555 !important; }
.op-popup-row-icon { flex-shrink: 0 !important; width: 16px !important; text-align: center !important; }
.op-popup-row strong { color: #333 !important; }
.op-popup-addresses { margin-top: 8px !important; padding-top: 6px !important; border-top: 1px solid #eee !important; }
.op-popup-address { padding: 3px 0 !important; font-size: 12px !important; color: #555 !important; }
.op-popup-address strong { color: #333 !important; }
.op-popup-note { margin-top: 6px !important; padding: 6px 8px !important; background: #f8f9fa !important; border-radius: 6px !important; font-size: 11px !important; color: #666 !important; font-style: italic !important; }

/* ---- Standalone Map ---- */
.op-map-wrapper { background: #fff !important; border-radius: 10px !important; box-shadow: 0 2px 20px rgba(0,0,0,.08) !important; overflow: hidden !important; margin: 20px 0 !important; }
.op-map-controls { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; padding: 12px 16px !important; background: #f8f9fa !important; border-bottom: 1px solid #e9ecef !important; }
.op-filter-group { display: flex !important; align-items: center !important; gap: 8px !important; }
.op-filter-group label { font-weight: 600 !important; font-size: 14px !important; color: #495057 !important; white-space: nowrap !important; }
.op-filter-select, .op-city-filter { padding: 6px 12px !important; border: 1px solid #ced4da !important; border-radius: 6px !important; font-size: 14px !important; background: #fff !important; }
.op-legend { display: flex !important; gap: 12px !important; margin-left: auto !important; font-size: 13px !important; }
.op-legend-item { display: flex !important; align-items: center !important; gap: 5px !important; color: #666 !important; }
.op-legend-dot { display: inline-block !important; width: 12px !important; height: 12px !important; border-radius: 50% !important; }
.op-legend-dot.active { background: #e74c3c !important; box-shadow: 0 0 6px rgba(231,76,60,.5) !important; animation: op-pulse 2s infinite !important; }
.op-legend-dot.planned { background: #f39c12 !important; }
@keyframes op-pulse { 0%{box-shadow:0 0 4px rgba(231,76,60,.4)} 50%{box-shadow:0 0 12px rgba(231,76,60,.8)} 100%{box-shadow:0 0 4px rgba(231,76,60,.4)} }
.op-map-info { padding: 10px 16px !important; background: #f8f9fa !important; border-top: 1px solid #e9ecef !important; font-size: 13px !important; color: #666 !important; }


/* ===================================================
   FRONTPAGE [odstavky_stranka]
   =================================================== */
.op-frontpage {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Header */
.op-frontpage .op-fp-header { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; padding: 20px 0 12px !important; }
.op-frontpage .op-fp-title { font-size: 22px !important; font-weight: 800 !important; color: #1a1a2e !important; }
.op-frontpage .op-fp-subtitle { margin-top: 2px !important; color: #6c757d !important; font-size: 14px !important; }
.op-frontpage .op-fp-stats { display: flex !important; gap: 10px !important; }
.op-frontpage .op-fp-stat { text-align: center !important; padding: 8px 16px !important; border-radius: 10px !important; min-width: 80px !important; }
.op-frontpage .op-fp-stat-active { background: linear-gradient(135deg,#fff5f5,#ffe3e3) !important; border: 1px solid #fcc !important; }
.op-frontpage .op-fp-stat-planned { background: linear-gradient(135deg,#fffbeb,#fef3cd) !important; border: 1px solid #fde68a !important; }
.op-frontpage .op-fp-stat-number { display: block !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1 !important; }
.op-frontpage .op-fp-stat-active .op-fp-stat-number { color: #dc3545 !important; }
.op-frontpage .op-fp-stat-planned .op-fp-stat-number { color: #d97706 !important; }
.op-frontpage .op-fp-stat-label { display: block !important; font-size: 11px !important; color: #6c757d !important; margin-top: 3px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .5px !important; }

/* Filters */
.op-frontpage .op-fp-filters { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; padding: 10px 14px !important; background: #f8f9fa !important; border: 1px solid #e9ecef !important; border-radius: 10px !important; margin-bottom: 14px !important; }
.op-frontpage .op-fp-filter-group { display: flex !important; align-items: center !important; gap: 8px !important; }
.op-frontpage .op-fp-filter-group label { font-weight: 600 !important; font-size: 13px !important; color: #555 !important; white-space: nowrap !important; display: inline !important; }

/* City select dropdown */
.op-frontpage .op-fp-city-select {
    padding: 6px 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: #fff !important;
    color: #333 !important;
    cursor: pointer !important;
    min-width: 140px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 28px !important;
}
.op-frontpage .op-fp-city-select:focus {
    border-color: #4a90d9 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(74,144,217,.15) !important;
}

/* Toggle buttons */
.op-frontpage .op-fp-toggle-group { display: inline-flex !important; background: #e9ecef !important; border-radius: 8px !important; overflow: hidden !important; flex-shrink: 0 !important; }
.op-frontpage .op-fp-toggle {
    padding: 6px 14px !important;
    border: none !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #666 !important;
    cursor: pointer !important;
    transition: all .2s !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.op-frontpage .op-fp-toggle:hover { background: rgba(255,255,255,.5) !important; }
.op-frontpage .op-fp-toggle.active { background: #fff !important; color: #333 !important; box-shadow: 0 1px 3px rgba(0,0,0,.1) !important; }

.op-frontpage .op-fp-auto-refresh { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 5px !important; font-size: 11px !important; color: #28a745 !important; font-weight: 600 !important; }
.op-frontpage .op-fp-auto-refresh-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #28a745 !important; animation: op-pulse-g 2s infinite !important; display: inline-block !important; }
@keyframes op-pulse-g { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Map */
.op-frontpage .op-fp-map-container { position: relative !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 2px 12px rgba(0,0,0,.08) !important; border: 1px solid #e9ecef !important; }

/* List header */
.op-frontpage .op-fp-list-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 16px 0 8px !important; }
.op-frontpage .op-fp-list-header h3 { font-size: 18px !important; font-weight: 700 !important; color: #1a1a2e !important; }
.op-frontpage .op-fp-list-count { font-size: 12px !important; color: #6c757d !important; background: #e9ecef !important; padding: 3px 10px !important; border-radius: 20px !important; font-weight: 600 !important; display: inline-block !important; }

/* List */
.op-frontpage .op-fp-list { display: flex !important; flex-direction: column !important; gap: 8px !important; padding-bottom: 24px !important; }

/* ── List item ── */
.op-frontpage .op-fp-item {
    background: #fff !important;
    border: 1px solid #e9ecef !important;
    border-left: 4px solid #f39c12 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}
.op-frontpage .op-fp-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06) !important; }
.op-frontpage .op-fp-item.op-fp-item-active { border-left-color: #e74c3c !important; }

/* Summary (always visible) */
.op-frontpage .op-fp-item-summary {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
}
.op-frontpage .op-fp-item-summary-left { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; }
.op-frontpage .op-fp-item-summary-title { font-size: 14px !important; font-weight: 700 !important; color: #1a1a2e !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.op-frontpage .op-fp-item-summary-date { font-size: 12px !important; color: #666 !important; }
.op-frontpage .op-fp-item-summary-right { display: flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; }

/* Badges */
.op-frontpage .op-fp-item-badge { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; border-radius: 20px !important; font-size: 10px !important; font-weight: 700 !important; white-space: nowrap !important; line-height: 1.4 !important; }
.op-frontpage .op-fp-item-badge-active { background: #fde8e8 !important; color: #dc3545 !important; text-transform: uppercase !important; letter-spacing: .5px !important; animation: op-badge-pulse 2s infinite !important; }
.op-frontpage .op-fp-item-badge-planned { background: #fef3cd !important; color: #856404 !important; text-transform: uppercase !important; letter-spacing: .5px !important; }
.op-frontpage .op-fp-item-badge-city { background: #e9ecef !important; color: #495057 !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }
@keyframes op-badge-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }

/* Arrow */
.op-frontpage .op-fp-item-arrow {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #aaa !important;
    font-size: 14px !important;
    transition: transform .25s ease !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
.op-frontpage .op-fp-item.op-fp-item-open .op-fp-item-arrow { transform: rotate(180deg) !important; }

/* ── Detail (HIDDEN by default) ── */
.op-frontpage .op-fp-item-detail {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .35s ease, padding .35s ease !important;
    padding: 0 14px !important;
    border-top: none !important;
    opacity: 0;
}
.op-frontpage .op-fp-item.op-fp-item-open .op-fp-item-detail {
    max-height: 800px !important;
    padding: 12px 14px !important;
    border-top: 1px solid #e9ecef !important;
    overflow: visible !important;
    opacity: 1;
}

.op-frontpage .op-fp-item-reason { font-size: 13px !important; color: #555 !important; margin-bottom: 8px !important; }
.op-frontpage .op-fp-item-addresses { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.op-frontpage .op-fp-item-addr-row { display: flex !important; align-items: baseline !important; gap: 6px !important; font-size: 12px !important; color: #444 !important; padding: 3px 0 !important; border-bottom: 1px solid #f5f5f5 !important; }
.op-frontpage .op-fp-item-addr-row:last-child { border-bottom: none !important; }
.op-frontpage .op-fp-item-addr-street { font-weight: 700 !important; color: #222 !important; white-space: nowrap !important; }
.op-frontpage .op-fp-item-addr-nums { color: #555 !important; word-break: break-word !important; }
.op-frontpage .op-fp-item-note { margin-top: 8px !important; padding: 6px 10px !important; background: #f8f9fa !important; border-radius: 6px !important; font-size: 11px !important; color: #888 !important; font-style: italic !important; }

/* Countdown */
.op-frontpage .op-fp-item-countdown { margin-top: 8px !important; padding: 4px 10px !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.op-frontpage .op-fp-item-countdown.ending { background: #fde8e8 !important; color: #dc3545 !important; }
.op-frontpage .op-fp-item-countdown.starting { background: #fef3cd !important; color: #856404 !important; }

/* Highlighted */
.op-frontpage .op-fp-item.op-fp-item-highlighted { box-shadow: 0 4px 20px rgba(0,0,0,.12) !important; transform: translateY(-2px) !important; z-index: 2 !important; }

/* Expiry */
.op-frontpage .op-fp-item.op-fp-item-expiring { animation: op-fade-out .8s ease forwards !important; }
@keyframes op-fade-out {
    0% { opacity:1; max-height:200px; }
    50% { opacity:.3; }
    100% { opacity:0; max-height:0; margin:0; padding:0; border-width:0; overflow:hidden; }
}

/* Empty / Loading */
.op-frontpage .op-fp-empty { text-align: center !important; padding: 50px 20px !important; color: #999 !important; }
.op-frontpage .op-fp-empty-icon { font-size: 42px !important; margin-bottom: 12px !important; }
.op-frontpage .op-fp-empty h3 { font-size: 18px !important; color: #555 !important; }
.op-frontpage .op-fp-empty p { font-size: 14px !important; color: #888 !important; }
.op-frontpage .op-fp-loading { text-align: center !important; padding: 30px !important; color: #999 !important; font-size: 14px !important; }
.op-frontpage .op-fp-spinner { display: inline-block !important; width: 20px !important; height: 20px !important; border: 3px solid #e9ecef !important; border-top-color: #4a90d9 !important; border-radius: 50% !important; animation: op-spin .8s linear infinite !important; margin-right: 8px !important; vertical-align: middle !important; }
@keyframes op-spin { to{transform:rotate(360deg)} }


/* ===================================================
   PANEL [odstavky_panel]
   =================================================== */
.op-panel { border-radius: 10px !important; overflow: hidden !important; margin: 16px 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; cursor: pointer !important; }
.op-panel:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; }
.op-panel-loading { padding: 14px 18px !important; background: linear-gradient(135deg,#f8f9fa,#e9ecef) !important; color: #666 !important; font-size: 13px !important; text-align: center !important; }
.op-panel a.op-panel-bar { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 16px !important; text-decoration: none !important; color: inherit !important; }
.op-panel a.op-panel-bar:hover { text-decoration: none !important; color: inherit !important; }
.op-panel .op-panel-bar.op-panel-has-active { background: linear-gradient(135deg,#fff5f5,#fde8e8) !important; border: 1px solid #fcc !important; }
.op-panel .op-panel-bar.op-panel-has-planned { background: linear-gradient(135deg,#fffbeb,#fef3cd) !important; border: 1px solid #fde68a !important; }
.op-panel .op-panel-icon { font-size: 24px !important; line-height: 1 !important; flex-shrink: 0 !important; }
.op-panel .op-panel-content { flex: 1 !important; min-width: 0 !important; }
.op-panel .op-panel-title { font-size: 14px !important; font-weight: 700 !important; color: #1a1a2e !important; margin: 0 0 2px !important; }
.op-panel .op-panel-desc { font-size: 12px !important; color: #555 !important; margin: 0 !important; }
.op-panel .op-panel-cities { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; margin-top: 5px !important; }
.op-panel .op-panel-city-tag { display: inline-flex !important; align-items: center !important; gap: 3px !important; padding: 2px 8px !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 600 !important; background: rgba(255,255,255,.7) !important; color: #333 !important; }
.op-panel .op-panel-city-count { background: rgba(0,0,0,.08) !important; padding: 1px 5px !important; border-radius: 10px !important; font-size: 10px !important; }
.op-panel .op-panel-arrow { font-size: 18px !important; color: #999 !important; flex-shrink: 0 !important; }
.op-panel .op-panel-empty { padding: 10px 16px !important; background: linear-gradient(135deg,#f0fff4,#d4edda) !important; border: 1px solid #c3e6cb !important; text-align: center !important; border-radius: 10px !important; }
.op-panel .op-panel-empty-text { font-size: 13px !important; color: #28a745 !important; font-weight: 600 !important; }


/* ===================================================
   RESPONSIVE – all with high specificity
   =================================================== */
@media (max-width: 768px) {
    .op-frontpage { padding: 0 8px !important; }

    .op-frontpage .op-fp-header {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px 0 10px !important;
        gap: 10px !important;
    }
    .op-frontpage .op-fp-title { font-size: 18px !important; }
    .op-frontpage .op-fp-subtitle { font-size: 13px !important; }
    .op-frontpage .op-fp-stats { width: 100% !important; }
    .op-frontpage .op-fp-stat { flex: 1 !important; padding: 8px 10px !important; min-width: 0 !important; }
    .op-frontpage .op-fp-stat-number { font-size: 20px !important; }
    .op-frontpage .op-fp-stat-label { font-size: 10px !important; }

    .op-frontpage .op-fp-filters {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .op-frontpage .op-fp-filter-group {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    .op-frontpage .op-fp-city-select {
        flex: 1 !important;
        width: auto !important;
        font-size: 14px !important;
    }
    .op-frontpage .op-fp-toggle-group {
        width: 100% !important;
        display: flex !important;
    }
    .op-frontpage .op-fp-toggle {
        flex: 1 !important;
        text-align: center !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
    }
    .op-frontpage .op-fp-auto-refresh { margin-left: 0 !important; justify-content: center !important; }

    .op-frontpage .op-fp-map-container { border-radius: 8px !important; }
    .op-frontpage .op-fp-map { min-height: 250px !important; }

    .op-frontpage .op-fp-list-header h3 { font-size: 16px !important; }

    .op-frontpage .op-fp-item-summary { padding: 10px 12px !important; gap: 8px !important; }
    .op-frontpage .op-fp-item-summary-title { font-size: 13px !important; }
    .op-frontpage .op-fp-item-summary-date { font-size: 11px !important; }
    .op-frontpage .op-fp-item-badge { font-size: 9px !important; padding: 2px 6px !important; }

    .op-frontpage .op-fp-item.op-fp-item-open .op-fp-item-detail { padding: 10px 12px !important; }

    /* Standalone */
    .op-map-controls { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
    .op-legend { margin-left: 0 !important; }
    .op-city-filter { width: 100% !important; }
    .op-popup { min-width: 180px !important; max-width: 260px !important; }

    /* Panel */
    .op-panel a.op-panel-bar { padding: 10px 12px !important; gap: 8px !important; }
    .op-panel .op-panel-title { font-size: 13px !important; }
}

@media (max-width: 400px) {
    .op-frontpage .op-fp-title { font-size: 16px !important; }
    .op-frontpage .op-fp-stat-number { font-size: 18px !important; }
    .op-frontpage .op-fp-item-summary-title { font-size: 12px !important; }
    .op-frontpage .op-fp-item-badge-city { display: none !important; }
    .op-frontpage .op-fp-toggle { font-size: 11px !important; padding: 7px 4px !important; }
}