/**
 * PAYMENTS.CSS - Kompletne style dla strony płatności
 * Połączenie stylów z PRD + dedykowane mobile table layout
 */

/* ============================================
   KAFLE STATUSU
   ============================================ */
.payment-status-tile {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

/* ============================================
   FILTROWANIE - UKRYWANIE WIERSZY
   ============================================ */
.payment-row.filtered-hidden {
    display: none !important;
}

.payment-status-tile:hover {
    transform: scale(1.05);
}

/* Kolorowe tła/rozmiary czcionek per data-status/data-category USUNIĘTE (2026-07-07,
   redesign płaskich kart — patrz CLAUDE.md §3a). Były BARDZIEJ specyficzne
   (`.klasa[atrybut]` = 0,2,0) niż nowe klasy Tailwind w markupie (`.card`/`.text-success`
   itd. = 0,1,0), więc wygrywały niezależnie od kolejności w źródle — kafle nadal
   pokazywałyby stare pastelowe tła i inne rozmiary czcionek niż zamierzone. Kolor
   tekstu i płaskie tło teraz WYŁĄCZNIE przez klasy w Blade (`.card`+`.text-success/
   -warning/-danger/-accent` na `.tile-label`/`.tile-counter`/`.category-label`). */

/* ============================================
   KAFLE KATEGORII
   ============================================ */
.payment-category-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 16px;
}
/* min-width:0 na kaflu + overflow-wrap na etykiecie: bez tego długie, nieprzełamywalne
   słowo (np. "Utrzymanie") wypycha kolumnę szerzej niż jej 1/3 udziału, powodując poziomy
   scroll całej strony na wąskich ekranach — ten sam wzorzec co .kpi-grid/.data-table,
   patrz CLAUDE.md §4. */
.payment-category-filters > * { min-width: 0; }

.payment-category-tile {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.category-label { overflow-wrap: break-word; }

.payment-category-tile:hover {
    transform: scale(1.05);
}

/* ============================================
   LEGEND & HEADERS
   ============================================ */
.payment-legend-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 16px;
}
.payment-legend-row > * { min-width: 0; }

.payment-legend-row .legend-item {
    text-align: center;
    font-size: 0.75rem;
    overflow-wrap: break-word;
}

.payment-legend-row .legend-item.legend-paid {
    color: #388e3c;
}

.payment-legend-row .legend-item.legend-partial {
    color: #f57c00;
}

.payment-legend-row .legend-item.legend-waiting {
    color: #d32f2f;
}

.payment-legend-row .legend-item.legend-overpaid {
    color: #1976d2;
}

.payment-legend-badges {
    margin-bottom: 20px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ============================================
   EXPANDABLE HOUSES
   ============================================ */
.expandable-houses-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Jeden wiersz = jedna grupa numerów domów (46/46A/46B... razem, potem 48/48A... itd,
   2026-07-07 na życzenie usera). */
.house-group-row {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.settled-houses-header {
    margin-top: 0;
    color: #388e3c;
}

.unsettled-houses-header {
    margin-top: 0;
    color: #d32f2f;
}

/* ============================================
   FILTERS
   ============================================ */
.payment-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 16px;
}

.payment-status-header h3 {
    margin: 0;
}

#status-filters-container {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
}

#status-filters-container .filter-item {
    display: block;
}

#status-filters-container .filter-item .material-label {
    font-size: 0.85em;
    margin-bottom: 4px;
    display: block;
}

#status-filters-container .filter-item .material-input,
#status-filters-container .filter-item .material-select {
    display: block;
    max-width: 200px;
    font-size: 0.95em;
    padding: 6px 12px;
}

#status-filters-container .filter-item .custom-month-picker {
    cursor: pointer;
}

/* ============================================
   DARK MODE
   ============================================ */
body.dark-mode .settled-houses-header {
    color: #81c784;
}

body.dark-mode .unsettled-houses-header {
    color: #ef5350;
}

/* Kolorowe tła dark-mode dla kafli status/kategoria USUNIĘTE (2026-07-07) — ZASTANE jako
   MARTWY kod jeszcze przed redesignem: selektor `[data-theme="dark"]` nigdy nie pasował,
   bo `toggleTheme()` w layouts/app.blade.php przełącza `body.dark-mode`, nie atrybut
   `data-theme` — te reguły nigdy się nie uruchamiały. Usunięte przy okazji sprzątania
   (i tak już nadpisane/zbędne po usunięciu wersji light-mode powyżej). */

/* ========================================
   MOBILE TABLE LAYOUT (FLEXBOX)
   ======================================== */
@media (min-width: 769px) {
    .payments-table-mobile,
    .material-table-container .material-table.mobile-responsive {
        min-width: 600px;
    }
    
    /* Desktop - pokaż kolumnę Status, ukryj inline badge */
    .payments-table-mobile .status-mobile-inline,
    .material-table.mobile-responsive .status-mobile-inline {
        display: none !important;
    }
    
    .payments-table-mobile .status-desktop-column,
    .material-table.mobile-responsive .status-desktop-column {
        display: table-cell !important;
    }
}

/* ========================================
   MOBILE - Kompaktowy layout z flexbox
   ======================================== */
@media (max-width: 768px) {
    /* --- TABELA: Mniejsza czcionka, ukryj header --- */
    .material-table-container .payments-table-mobile,
    .material-table-container .material-table.mobile-responsive {
        font-size: 0.85rem !important;
    }
    
    .material-table-container .payments-table-mobile thead,
    .material-table-container .material-table.mobile-responsive thead {
        display: none !important;
    }
    
    /* --- WIERSZ: Flex container dla elastycznego layoutu --- */
    .material-table-container .payments-table-mobile tbody .payment-row,
    .material-table-container .material-table.mobile-responsive tbody .payment-row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-bottom: 12px !important;
        border: 1px solid var(--md-border) !important;
        border-radius: 6px !important;
        padding: 0 !important;
        background: var(--md-surface) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
        overflow: visible !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* --- KOMÓRKI: Reset borderów --- */
    .material-table-container .payments-table-mobile tbody .payment-row td,
    .material-table-container .material-table.mobile-responsive tbody .payment-row td {
        border: none !important;
    }
    
    /* --- TD DOM: Nagłówek karty, pełna szerokość --- */
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Dom"],
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Dom"] {
        flex: 0 0 100% !important;
        padding: 8px 12px 4px 12px !important;
        background: rgba(0,0,0,0.02) !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        color: var(--md-primary) !important;
        box-sizing: border-box !important;
        border-bottom: none !important;
    }
    
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Dom"]:before,
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Dom"]:before {
        content: "Dom: " !important;
        display: inline !important;
        font-weight: 500 !important;
        font-size: 0.7rem !important;
        color: var(--md-text-secondary) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-right: 6px !important;
    }
    
    /* --- TD POZYCJA: Nazwa + inline status badge, pełna szerokość --- */
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Pozycja"],
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Pozycja"] {
        flex: 0 0 100% !important;
        padding: 8px 12px 12px 12px !important;
        background: rgba(0,0,0,0.02) !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        border-bottom: 1px solid var(--md-border) !important;
        max-width: 100% !important;
        width: auto !important;
    }
    
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Pozycja"]:before,
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Pozycja"]:before {
        display: none !important;
    }
    
    /* --- STATUS BADGE: Inline na mobile --- */
    .material-table-container .payments-table-mobile tbody .payment-row .status-mobile-inline,
    .material-table-container .material-table.mobile-responsive tbody .payment-row .status-mobile-inline {
        display: inline-block !important;
        margin-left: 6px !important;
    }
    
    /* --- TD STATUS: Ukryta kolumna na mobile --- */
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Status"],
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Status"] {
        display: none !important;
    }
    
    /* --- FILTROWANIE: ukryj odfiltrowane wiersze (MUST override display:flex above) --- */
    .material-table-container .payments-table-mobile tbody .payment-row.filtered-hidden,
    .material-table-container .material-table.mobile-responsive tbody .payment-row.filtered-hidden {
        display: none !important;
    }
    
    /* --- KOLUMNY KWOT: 3 obok siebie (33.333% każda) --- */
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Należność"],
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Wpłacono"],
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Saldo"],
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Należność"],
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Wpłacono"],
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Saldo"] {
        flex: 1 1 33.333% !important;
        max-width: 33.333% !important;
        padding: 12px 4px !important;
        text-align: center !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
        font-weight: 700 !important;
        color: var(--md-text-primary) !important;
        margin: 0 !important;
        border-bottom: none !important;
        /* KLUCZOWE: column layout dla :before + wartość */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* --- SEPARATORY: Border-right dla pierwszych 2 kolumn --- */
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Należność"],
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Wpłacono"],
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Należność"],
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Wpłacono"] {
        border-right: 1px solid var(--md-border) !important;
    }
    
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Saldo"],
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Saldo"] {
        border-right: none !important;
    }
    
    /* --- LABELE: Małe etykiety nad kwotami --- */
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Należność"]:before,
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Wpłacono"]:before,
    .material-table-container .payments-table-mobile tbody .payment-row td[data-label="Saldo"]:before,
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Należność"]:before,
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Wpłacono"]:before,
    .material-table-container .material-table.mobile-responsive tbody .payment-row td[data-label="Saldo"]:before {
        content: attr(data-label) !important;
        display: block !important;
        font-weight: 600 !important;
        font-size: 0.65rem !important;
        color: var(--md-text-secondary) !important;
        margin-bottom: 4px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
}

/* ========================================
   LEGACY BACKWARDS COMPATIBILITY
   Style dla starych tabel bez .mobile-responsive
   ======================================== */
@media (max-width: 768px) {
    .payments-table:not(.mobile-responsive),
    .material-table:not(.mobile-responsive) {
        font-size: 0.75rem !important;
    }
    
    .payments-table:not(.mobile-responsive) th,
    .payments-table:not(.mobile-responsive) td,
    .material-table:not(.mobile-responsive) th,
    .material-table:not(.mobile-responsive) td {
        padding: 4px 2px !important;
        font-size: 0.65rem !important;
    }
}

/* ========================================
   PRZYCISKI AKCJI ADMINA W TABELI
   ======================================== */
   
/* Desktop: pokazuj tylko kolumnę Akcja, ukryj przyciski w Dom */
.mobile-admin-actions {
    display: none !important;
}

.desktop-admin-actions {
    display: table-cell !important;
}

/* Zmniejsz przyciski o połowę */
.material-table-container .payment-action-book,
.material-table-container .payment-action-unbook {
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
    min-width: auto !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 20px !important;
}

@media (max-width: 768px) {
    /* Mobile: ukryj kolumnę Akcja, pokazuj przyciski w Dom */
    .desktop-admin-actions {
        display: none !important;
    }
    
    /* Flexbox dla linii Dom - nazwa po lewej, przyciski po prawej */
    .material-table td[data-label="Dom"] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    
    .mobile-admin-actions {
        display: flex !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
    
    .material-table-container .payment-action-book,
    .material-table-container .payment-action-unbook {
        font-size: 0.6rem !important;
        padding: 1px 4px !important;
        min-height: 18px !important;
        line-height: 1.1 !important;
    }
}
/* Copied from dashboard.css for expanded cards */
.expandable-house-card {
    /* Usunięte własne tło/ramka/zaokrąglenie (2026-07-07, user: "bez tej białej ramki
       nad/pod", "prostokątne") — .house-card-header (pastylka) to teraz JEDYNY widoczny
       box, ten wrapper jest już czysto strukturalny (tylko dla toggle JS + zawartości
       rozwijanej). margin-bottom usunięty wcześniej (dublował się z gap kontenera). */
    overflow: visible;
    transition: box-shadow 0.2s ease;
}
.expandable-house-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}