/**
 * WUD Frontend Fixes - Poprawki wizualne dla frontendu wtyczki
 * Plik zawiera dedykowane poprawki CSS, które rozwiązują problemy z layoutem
 * na różnych motywach WordPress bez ingerencji w główny plik Tailwind.
 * 
 * @package wp-ustawa-deweloperska
 * @version 1.0
 */

/**
 * WUD-FE-STYLE-01: Poprawka szerokości pól filtrów "od-do"
 * 
 * Problem: Pola filtrów zakresowych (cena od-do, powierzchnia od-do) 
 * "rozjeżdżają się" na różnych motywach WordPress, powodując złamanie layoutu.
 * 
 * Rozwiązanie: Wymuszenie stałej szerokości 48% dla każdego pola w kontenerze flex,
 * z użyciem nowoczesnych właściwości flexbox zamiast prostego width.
 */
 .wud-shortcode-wrapper .wud-filters-panel .flex > input[type="number"] {
    flex: 0 1 48% !important; /* Bazowa szerokość 48%, bez rozciągania */
    min-width: 0 !important;   /* Zapobiega problemom z elastycznością flexbox */
    max-width: 48% !important; /* Dodatkowe zabezpieczenie przed przekroczeniem */
}

/**
 * Dodatkowa poprawka responsywności dla urządzeń mobilnych
 * Na małych ekranach pola mogą zajmować pełną szerokość
 */
@media (max-width: 640px) {
    .wud-shortcode-wrapper .wud-filters-panel .flex > input[type="number"] {
        /* Ustaw bazową szerokość na 50% z uwzględnieniem połowy odstępu (0.5rem / 2 = 0.25rem) */
        flex: 1 1 calc(50% - 0.25rem) !important; 
        max-width: calc(50% - 0.25rem) !important;
        /* Usuń margines dolny, ponieważ pola będą obok siebie */
        margin-bottom: 0 !important;
    }
}

/**
 * Poprawka dla kontenerów flex w filtrach - zapewnienie odpowiedniego odstępu
 */
.wud-shortcode-wrapper .wud-filters-panel .flex {
    gap: 0.5rem !important; /* Stały odstęp między elementami */
}

/**
 * Zapobieganie problemom z overflow w kontenerach filtrów
 */
.wud-shortcode-wrapper .wud-filters-panel {
    overflow: hidden !important;
}

.wud-shortcode-wrapper .wud-filters-panel .flex {
    flex-wrap: wrap !important; /* Pozwolenie na zawijanie na małych ekranach */
}

/**
 * UX-SORT-ARROWS-01: Style dla wskaźników sortowania w nagłówkach tabeli
 * 
 * Implementuje wizualne wskaźniki sortowania z podświetleniem aktywnej kolumny
 * w kolorze akcentu oraz strzałkami pokazującymi kierunek sortowania (ASC/DESC).
 */

/* Bazowe style dla sortownych nagłówków */
.wud-shortcode-wrapper .wud-sortable {
    position: relative;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Style dla strzałek sortowania */
.wud-shortcode-wrapper .sort-arrow {
    display: inline-block;
    font-size: 12px;
    margin-left: 4px;
    opacity: 0.4;
    transition: opacity 0.2s ease, color 0.2s ease;
}

/* Domyślne strzałki (nieaktywne) */
.wud-shortcode-wrapper .sort-arrow::before {
    content: "↕";
    color: currentColor;
}

/* Aktywne sortowanie ASC (rosnąco) - KOLORY USUNIĘTE, UŻYWANE SĄ DYNAMICZNE Z SHORTCODE'A 
   Style .wud-sorted-asc są ustawiane dynamicznie przez wud_add_table_sorting_script() */

.wud-shortcode-wrapper .wud-sorted-asc .sort-arrow {
    opacity: 1;
    /* color jest ustawiany dynamicznie przez wud_add_table_sorting_script() */
}

.wud-shortcode-wrapper .wud-sorted-asc .sort-arrow::before {
    content: "↑"; /* Strzałka w górę */
}

/* Aktywne sortowanie DESC (malejąco) - KOLORY USUNIĘTE, UŻYWANE SĄ DYNAMICZNE Z SHORTCODE'A 
   Style .wud-sorted-desc są ustawiane dynamicznie przez wud_add_table_sorting_script() */

.wud-shortcode-wrapper .wud-sorted-desc .sort-arrow {
    opacity: 1;
    /* color jest ustawiany dynamicznie przez wud_add_table_sorting_script() */
}

.wud-shortcode-wrapper .wud-sorted-desc .sort-arrow::before {
    content: "↓"; /* Strzałka w dół */
}

/* Hover effects dla sortownych nagłówków */
.wud-shortcode-wrapper .wud-sortable:hover .sort-arrow {
    opacity: 0.8;
}

/* Responsywność - na małych ekranach mniejsze strzałki */
@media (max-width: 640px) {
    .wud-shortcode-wrapper .sort-arrow {
        font-size: 10px;
        margin-left: 2px;
    }
}

/**
 * LUCIDE-ICONS-FIX-001: Agresywny fix dla wypełnienia ikon Lucide
 * 
 * Problem: Niektóre motywy WordPress nadpisują atrybuty fill i stroke ikon SVG,
 * powodując niepoprawne renderowanie ikon Lucide (wypełnione zamiast z konturem).
 * 
 * Rozwiązanie: Wymuszenie poprawnych atrybutów SVG z wysoką specyficznością CSS
 * oraz dodatkowe reguły !important dla wszystkich możliwych selektorów.
 */

/* Główna reguła dla wszystkich ikon Lucide w kontekście wtyczki */
.wud-shortcode-wrapper svg[data-lucide],
.wud-shortcode-wrapper i[data-lucide] svg,
#wudPriceHistoryModal svg[data-lucide],
#wudPropertyDetailsModal svg[data-lucide],
#wudFloorPlanModal svg[data-lucide],
#wud-inquiry-modal svg[data-lucide],
#wud-inquiry-success-modal svg[data-lucide] {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Dodatkowa reguła dla wszystkich elementów SVG wewnątrz ikon Lucide */
.wud-shortcode-wrapper svg[data-lucide] *,
.wud-shortcode-wrapper i[data-lucide] svg *,
#wudPriceHistoryModal svg[data-lucide] *,
#wudPropertyDetailsModal svg[data-lucide] *,
#wudFloorPlanModal svg[data-lucide] *,
#wud-inquiry-modal svg[data-lucide] *,
#wud-inquiry-success-modal svg[data-lucide] * {
    fill: none !important;
    stroke: inherit !important;
}

/* Specyficzne reguły dla elementów SVG tylko w kontekście wtyczki */
.wud-shortcode-wrapper svg[data-lucide] path,
.wud-shortcode-wrapper svg[data-lucide] circle,
.wud-shortcode-wrapper svg[data-lucide] rect,
.wud-shortcode-wrapper svg[data-lucide] polygon,
.wud-shortcode-wrapper svg[data-lucide] ellipse,
.wud-shortcode-wrapper svg[data-lucide] line,
#wudPriceHistoryModal svg[data-lucide] path,
#wudPriceHistoryModal svg[data-lucide] circle,
#wudPriceHistoryModal svg[data-lucide] rect,
#wudPriceHistoryModal svg[data-lucide] polygon,
#wudPriceHistoryModal svg[data-lucide] ellipse,
#wudPriceHistoryModal svg[data-lucide] line,
#wudPropertyDetailsModal svg[data-lucide] path,
#wudPropertyDetailsModal svg[data-lucide] circle,
#wudPropertyDetailsModal svg[data-lucide] rect,
#wudPropertyDetailsModal svg[data-lucide] polygon,
#wudPropertyDetailsModal svg[data-lucide] ellipse,
#wudPropertyDetailsModal svg[data-lucide] line,
#wudFloorPlanModal svg[data-lucide] path,
#wudFloorPlanModal svg[data-lucide] circle,
#wudFloorPlanModal svg[data-lucide] rect,
#wudFloorPlanModal svg[data-lucide] polygon,
#wudFloorPlanModal svg[data-lucide] ellipse,
#wudFloorPlanModal svg[data-lucide] line,
#wud-inquiry-modal svg[data-lucide] path,
#wud-inquiry-modal svg[data-lucide] circle,
#wud-inquiry-modal svg[data-lucide] rect,
#wud-inquiry-modal svg[data-lucide] polygon,
#wud-inquiry-modal svg[data-lucide] ellipse,
#wud-inquiry-modal svg[data-lucide] line,
#wud-inquiry-success-modal svg[data-lucide] path,
#wud-inquiry-success-modal svg[data-lucide] circle,
#wud-inquiry-success-modal svg[data-lucide] rect,
#wud-inquiry-success-modal svg[data-lucide] polygon,
#wud-inquiry-success-modal svg[data-lucide] ellipse,
#wud-inquiry-success-modal svg[data-lucide] line {
    stroke: currentColor !important;
    fill: none !important;
}

/**
 * PREMIUM-BADGES-01: Style premium dla badge'y statusów nieruchomości
 * 
 * Zadanie: Stonowane, eleganckie kolory zamiast jaskrawych domyślnych kolorów.
 * Implementuje bardziej premium wygląd dla statusów: dostępny, zarezerwowany, sprzedany.
 */

/* Status: Dostępny - elegancki miętowy odcień */
.wud-shortcode-wrapper .wud-status-dostepny {
    background-color: #f0fdfa !important; /* bardzo jasny teal */
    color: #115e59 !important; /* ciemny teal */
    border: 1px solid #5eead4 !important; /* subtelny border */
}

/* Status: Zarezerwowany - ciepły bursztynowy odcień */
.wud-shortcode-wrapper .wud-status-zarezerwowany {
    background-color: #fffbeb !important; /* bardzo jasny amber */
    color: #92400e !important; /* ciemny amber */
    border: 1px solid #fcd34d !important; /* subtelny border */
}

/* Status: Sprzedany - elegancki czerwony odcień */
.wud-shortcode-wrapper .wud-status-sprzedany {
    background-color: #fef2f2 !important; /* bardzo jasny red */
    color: #991b1b !important; /* ciemny red */
    border: 1px solid #fecaca !important; /* subtelny border */
}

/* Dodatkowe style dla lepszego wyglądu badge'y */
.wud-shortcode-wrapper .wud-status-dostepny,
.wud-shortcode-wrapper .wud-status-zarezerwowany,
.wud-shortcode-wrapper .wud-status-sprzedany {
    font-weight: 600 !important;
    border-radius: 9999px !important; /* pełne zaokrąglenie */
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

/**
 * FIX-TABLE-BORDER-01: Resetuje górne obramowanie nagłówka tabeli narzucane przez motywy
 * 
 * Problem: Niektóre motywy (np. Twenty Twenty-One) dodają border-block-start (border-top)
 * do pierwszego wiersza nagłówka tabeli, co psuje spójny wygląd tabeli wtyczki.
 * 
 * Rozwiązanie: Użycie bardziej specyficznych selektorów wewnątrz .wud-shortcode-wrapper
 * do zresetowania tego obramowania z flagą !important, aby zapewnić pierwszeństwo.
 */
.wud-shortcode-wrapper table caption+thead tr:first-child td,
.wud-shortcode-wrapper table caption+thead tr:first-child th,
.wud-shortcode-wrapper table colgroup+thead tr:first-child td,
.wud-shortcode-wrapper table colgroup+thead tr:first-child th,
.wud-shortcode-wrapper table thead:first-child tr:first-child td,
.wud-shortcode-wrapper table thead:first-child tr:first-child th {
    border-block-start: none !important;
    border-top: none !important; /* Fallback dla starszych przeglądarek */
}