/* css/filters.css */

/* 🔀 TAB-SELECTOR (Základný/Rozšírený mód) - nahrádza predošlý jediný
   nadpis aktívneho módu (bývalé .filter-brand-header, zrušené spolu s
   OKOLIE panelom "ČO JE NABLÍZKU?", ktorý ho ako jediný ešte používal).
   Oba tabuľky naraz, 50/50, klik na NEAKTÍVNY prepína mód (js/filters.js). */
/* Skupinový kontajner (bod 3 zadania "Finálny farebný štýl") - rovnaký
   vizuálny jazyk ako lišta svetových strán/VR+GALÉRIE/POI kategórie/ID-byt
   lišta. */
.mode-tab-selector {
    display: flex;
    background: var(--group-container-bg);
    border: 1px solid var(--group-container-border);
    /* 8px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na
       zaoblených rohoch na ďalšie miesta appky" (nadväzuje na commit
       6743e54). */
    border-radius: 12px;
    padding: calc(3px * var(--ui-scale-kompenzacia, 1));
    gap: 6px;
    margin-bottom: 20px;
}

.mode-tab {
    flex: 1 1 50%;
    /* Na rozdiel od jednoriadkových skupín (svetové strany/VR+GALÉRIE/POI/
       ID-byt) má tento button 2-riadkový text ("Základný<br>mód") bez
       pevnej výšky kontajnera - vertikálny padding preto ostáva (žiadna
       okolitá samostatná výška, s ktorou by sa musel zarovnať). */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(10px * var(--ui-scale-kompenzacia, 1)) calc(6px * var(--ui-scale-kompenzacia, 1));
    background: var(--btn-secondary-bg-nested);
    border: 1px solid var(--btn-secondary-border);
    /* 6px -> 12px (sekcia zadania "Oprava artefaktu na zaoblených rohoch,
       border-radius 6px->12px") - izolovaný test (CLAUDE.md sekcia 6)
       potvrdil border-radius ako PRIMÁRNU príčinu Firefox anti-aliasing
       artefaktu (#app-logo s 12px je čistý, 6px variant s inak identickým
       CSS artefakt vykazoval) - žiadna iná vlastnosť tu nemenená. */
    border-radius: 12px;
    color: var(--btn-secondary-text);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.mode-tab:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-text-hover);
}

/* Aktívny mód - rovnaký teplý zlatý akcent ako ostatné "zvolené" stavy
   appky (zadanie, bod 3). */
.mode-tab.active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: var(--btn-secondary-text-active);
}

/* Obaly sekcií */
.filter-group-box {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group-box h3 {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted); /* Tlmená moderná sivá */
    font-weight: 600;
}

/* 🚀 KOMPAKTNÁ MRIEŽKA PRE SEGMENTY (3 stĺpce podľa vzoru z obrázka) */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 stĺpce pre kompaktnosť */
    gap: 6px;
}

/* Špeciálne prípady šírky */
.grid-full-width {
    grid-column: span 3;
}

.grid-span-2 {
    grid-column: span 2;
}

/* 🧱 LUXUSNÁ PLÁVAJÚCA DLAŽDICA
   Jediná spoločná trieda pre Podlažie AJ Počet izieb - obe skupiny takto
   VŽDY majú byte-presne rovnaký padding/font-size/výšku, nikdy vlastný
   selektor. Hodnoty znížené o ~13% oproti pôvodným (10px 6px / 0.78rem)
   na požiadanie, aby dlaždice zaberali menej miesta. */
/* Dlaždice Podlažie/Počet izieb NIE SÚ natívny checkbox+bodka riadok ako
   "Stav bytu" (.status-checkbox-row nižšie) - sú to toggle "chipy", ktoré
   zdieľajú rovnaký vizuálny jazyk ako skupinové kontajnery (zadanie, bod
   3: default/hover/aktívne farby zhodné s .view-btn/.mode-tab/
   .lightbox-nav-btn), NIE samostatnú "iba farba textu" úpravu z bodu 6
   (tá platí výhradne pre .status-checkbox-row, ktorý skutočne je
   natívny checkbox + bodka + label). */
.filter-tile {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(9px * var(--ui-scale-kompenzacia, 1)) calc(5px * var(--ui-scale-kompenzacia, 1));
    background: var(--btn-secondary-bg-nested);
    border: 1px solid var(--btn-secondary-border);
    /* 8px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na
       zaoblených rohoch na ďalšie miesta appky" (nadväzuje na commit
       6743e54). */
    border-radius: 12px;
    color: var(--btn-secondary-text);
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
    text-align: center;
}

.filter-tile input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Efekt pri polohovaní myšou */
.filter-tile:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-text-hover);
}

/* 🟡 AKTÍVNY STAV - rovnaký teplý zlatý akcent ako ostatné "zvolené" stavy
   appky (zadanie, bod 3). */
.filter-tile.active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: var(--btn-secondary-text-active);
    font-weight: 600;
}

/* 🌟 ŠPECIÁLNA AKCENTÁCIA PRE ŠPECIÁLNU PONUKU */
.filter-tile.tile-akcia {
    border-color: rgba(234, 179, 8, 0.2);
    color: var(--status-warning-light);
    background: rgba(234, 179, 8, 0.02);
}

.filter-tile.tile-akcia:hover {
    border-color: rgba(234, 179, 8, 0.5);
    background: rgba(234, 179, 8, 0.08);
}

.filter-tile.tile-akcia.active {
    background: #eab308;
    color: var(--app-background);
    border-color: #eab308;
    box-shadow: 0 4px 14px rgba(234, 179, 8, 0.25);
}

/* ==========================================================================
   🎚️ SLIDER PRE ROZLOHU (sekcia 8)
   ========================================================================== */
.area-slider-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.area-slider-row input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: rgb(var(--hairline-rgb) / 0.08);
    outline: none;
}

.area-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgb(var(--accent-rgb));
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(var(--accent-rgb) / 0.4);
}

.area-slider-row input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: rgb(var(--accent-rgb));
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(var(--accent-rgb) / 0.4);
}

.area-slider-value {
    font-size: 0.78rem;
    color: rgb(var(--accent-rgb));
    font-weight: 600;
}

/* ==========================================================================
   ☑️ STAV JEDNOTKY - NEZÁVISLÉ CHECKBOXY (sekcia 9)
   ========================================================================== */
.status-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.status-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(8px * var(--ui-scale-kompenzacia, 1)) calc(4px * var(--ui-scale-kompenzacia, 1));
    font-size: 0.8rem;
    cursor: pointer;
}

/* Farba textu labelu podľa stavu zaškrtnutia (zadanie, bod 6) - IBA farba
   textu, žiadny nový rámček/pozadie okolo neho. Status bodka/hviezdička
   (.status-dot/.status-star nižšie) má VLASTNÚ inline farbu (STATUS_COLORS/
   SPECIAL_OFFER_COLOR z JS) - túto pravidlo sa jej vôbec netýka. Explicitná
   trieda (.status-checkbox-label-text), NIE :last-child - odkedy je
   .status-star/.status-dot obalené v .status-icon-slot (sekcia zadania
   "Zarovnať riadky 'STAV BYTU'..."), je aj ONO :last-child (jediné dieťa
   svojho vlastného rodiča), takže :last-child selektor by nejednoznačne
   zasiahol OBA elementy naraz (dovtedy neškodné vďaka inline štýlu ikony s
   vyššou špecificitou, ale krehké/zavádzajúce). */
.status-checkbox-label-text {
    color: var(--btn-secondary-text);
    transition: color 200ms ease;
}

.status-checkbox-row:has(input:checked) .status-checkbox-label-text {
    color: var(--btn-secondary-text-active);
}

.status-checkbox-row input[type="checkbox"] {
    accent-color: var(--accent-cream);
    width: calc(14px * var(--ui-scale-kompenzacia, 1));
    height: calc(14px * var(--ui-scale-kompenzacia, 1));
    cursor: pointer;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-star {
    width: 9px;
    flex-shrink: 0;
    font-size: 0.95rem;
    line-height: 1;
    text-align: center;
}

/* Sekcia zadania "Zarovnať riadky 'STAV BYTU' do konzistentných stĺpcov
   (checkbox | ikonka | text)" - NAHRÁDZA predošlé riešenie predošlej úlohy
   ("Oprava chýbajúcej medzery... Špeciálna ponuka", margin-right na
   .status-star + zväčšenie .status-dot) - to opravilo iba to, aby sa glyf
   hviezdičky NEDOTÝKAL textu, ale NEZAROVNALO stĺpce: .status-star má
   VLASTNÝ box width:9px (nezmenené vyššie), zatiaľ čo .status-dot je na
   dotyku 12px - RÔZNA šírka ikony => text v riadku "Špeciálna ponuka"
   začínal o pár pixelov ĎALEJ než v ostatných troch riadkoch (zmerané,
   bug potvrdený screenshotom).

   .status-icon-slot (js/filters.js, vytvorStatusCheckbox) je NOVÝ
   obaľovací "stĺpec 2" element - PEVNÁ šírka ZHODNÁ pre bodku aj
   hviezdičku, s justify-content:center, ktorý ikonu (nech je akokoľvek
   veľká/malá) vycentruje na presne rovnakú pozíciu vo VŠETKÝCH riadkoch.
   "Stĺpec 3" (text) tak vždy začína na identickom mieste - checkbox
   (stĺpec 1, pevná šírka) + gap + icon-slot (stĺpec 2, TERAZ pevná šírka
   PRE VŠETKY riadky rovnaká) + gap = identická pozícia, nezávisle od typu
   ikony vnútri. KRITICKÉ OBMEDZENIE (zadanie) - .status-star VYŠŠIE
   zostáva DOSLOVA nedotknuté (width:9px, font-size:0.95rem) - slot ho iba
   CENTRUJE zvonka, nemení jeho vlastný box/glyph.

   Základná (univerzálna) šírka slotu = 9px - PRESNE zhodná s pôvodnou
   priamou šírkou oboch ikon pred touto úpravou, takže na PC/touch table
   (kde K vždy = 1, žiadny bug sa nepotvrdil, zmerané) je centrovanie
   ikony v rámci 9px slotu voči jej vlastnej 9px šírke MATEMATICKY bezo
   zmeny - nulová vizuálna odchýlka, žiadna regresia. */
.status-icon-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 9px;
}

/* Sekcia zadania "Centrovať ikonky (bod aj hviezdička) v rámci
   .status-icon-slot tak, aby mali rovnaké medzery vľavo aj vpravo" -
   NADVÄZUJE na slot vyššie (ten zarovnal stĺpec TEXTU, nie samotný STRED
   ikoniek). Priamym meraním (Range.getBoundingClientRect() na skutočnom
   glyfe, nie na kontajneri) potvrdené: .status-dot je jednoduchý CSS kruh,
   jeho vizuálny stred VŽDY presne sedí na strede slotu (justify-content:
   center to zaručuje matematicky). "★" glyph má ale VLASTNÝ opticky
   posunutý stred v rámci svojho font-boxu (bežná vlastnosť symbolových
   glyfov, nezávislá od CSS) - aj v strede svojho 9px boxu preto vizuálne
   "sedí" o kúsok VPRAVO od stredu bodky, na KAŽDOM zariadení (potvrdené aj
   na PC/touch table, kde K=1 - menší, ale nenulový posun, opravené
   univerzálne, nie iba na dotyku).

   Korekcia POZÍCIE (position:relative + left), NIE veľkosti/font-size -
   hviezdička zostáva doslovne rovnaká (width:9px, font-size:0.95rem
   vyššie, nedotknuté). Font-hintingom spôsobený opticky posun NErastie s
   K lineárne od nuly (zmerané priamym meraním na 3 nezávislých hodnotách
   K - PC/touch table K=1: 1.84px potrebnej korekcie, MediaPad T5 K=1.2:
   3.09px, Galaxy S20 FE K=1.929: 7.72px, všetko v referenčných CSS px) -
   lineárna regresia týchto 3 nameraných bodov (nie odhad) dáva vzorec
   correction = 4.5px - 6.33px*K, ktorý sedí na VŠETKÝCH troch nameraných
   K s odchýlkou pod 0.02px - podstatne presnejšie než jednoduché
   priame K-násobenie od nuly (to by pri K=1 vždy prestrelilo). */
.status-star {
    position: relative;
    left: calc(4.5px - 6.33px * var(--ui-scale-kompenzacia, 1));
}

/* Na dotyku (jediné zariadenia, kde bol bug potvrdený) sa slot rozšíri na
   šírku, do ktorej sa (nezmenený, K-škálovaný cez font-size v rem)
   hviezdičkin glyph VŽDY zmestí bez pretečenia (zmerané maximum cca
   12.7px*K pri aktuálnom glyfe/fonte, 14px*K necháva bezpečnú rezervu) -
   .status-dot naďalej rastie na 12px (rovnaký dôvod ako v predošlej
   úlohe, vizuálna váha bližšie k hviezdičke), teraz vycentrovaný v rámci
   tohto širšieho spoločného slotu namiesto vlastného priameho miesta v
   riadku. */
@media (hover: none) and (pointer: coarse) {
    .status-icon-slot {
        width: calc(14px * var(--ui-scale-kompenzacia, 1));
    }
    .status-dot {
        width: 12px;
        height: 12px;
    }
}

/* ==========================================================================
   ♻️ TLAČIDLO VYČISTIŤ FILTRE (v ľavom paneli)
   ========================================================================== */
.btn-reset-filters-main {
    margin-top: 4px;
    width: 100%;
    padding: calc(9px * var(--ui-scale-kompenzacia, 1));
    /* Zarovnané na rovnakú vizuálnu váhu ako dlaždice Podlažie/Počet izieb
       (.filter-tile font-size: 0.68rem) - predtým dedilo väčšie 0.75rem
       zo základnej .btn-reset-filters, čo pôsobilo neprimerane výrazne
       oproti už zmenšenému obsahu panelu (bug, opravené). */
    font-size: 0.68rem;
    text-align: center;
}

/* ==========================================================================
   📱 VÄČŠIA ČITATEĽNOSŤ TEXTU V ĽAVOM FILTER PANELI (mobil/tablet) -
   sekcia zadania "Zväčšiť font-size v ľavom filter paneli... bez zmeny
   šírky panela, s využitím existujúceho vertikálneho voľného priestoru".
   Rovnaký touch-gate ako všade v appke (@media hover:none/pointer:coarse
   = jeDotykoveZariadenie() v JS) - PC aj touch table (myš/kurzor) tento
   blok vôbec nevidia, ostávajú bezo zmeny. ŽIADNA šírka sa tu nemení
   (panel #configurator-filters, .filter-grid stĺpce, .filter-tile,
   tlačidlá - všetko ostáva presne také široké ako dnes) - iba font-size
   (+~14-15 % NAD existujúcu K-kompenzáciu, ktorá platí už predtým cez
   html{font-size:calc(16px*K)}, css/base.css) a súčasne zmenšené
   vertikálne medzery/padding medzi sekciami a riadkami, aby si väčší text
   "požičal" priestor z dnešných prázdnych medzier namiesto toho, aby
   výrazne narástla celková výška obsahu. Vnútorný scroll panela
   (overflow-y:auto, css/layout.css) ostáva funkčnou poistkou, ak by aj
   tak obsah prevýšil viditeľnú výšku - zámerne sa mu tu nevyhýbame za
   každú cenu. */
@media (hover: none) and (pointer: coarse) {
    .mode-tab-selector {
        margin-bottom: 14px;
    }

    .mode-tab {
        font-size: 0.82rem;
    }

    .filter-group-box {
        margin-bottom: 14px;
        gap: 6px;
    }

    .filter-group-box h3 {
        font-size: 0.78rem;
    }

    .filter-tile {
        /* Iba vertikálny padding zmenšený (šírka dlaždice = šírka
           mriežkového stĺpca, na tú horizontálny padding nemá vplyv). */
        padding: calc(7px * var(--ui-scale-kompenzacia, 1)) calc(5px * var(--ui-scale-kompenzacia, 1));
        font-size: 0.78rem;
    }

    .area-slider-row {
        gap: 6px;
    }

    .area-slider-value {
        font-size: 0.9rem;
    }

    .status-checkbox-list {
        gap: 3px;
    }

    .status-checkbox-row {
        padding: calc(5px * var(--ui-scale-kompenzacia, 1)) calc(4px * var(--ui-scale-kompenzacia, 1));
        font-size: 0.92rem;
    }

    /* #configurator-filters prefix (nie iba .btn-reset-filters-main) -
       táto trieda má na tlačidle ROVNAKÚ špecifickosť ako .btn-reset-
       filters (css/apartments.css, font-size:0.75rem), ktorá sa v
       kaskáde načíta AŽ PO filters.css - bez tohto prefixu (vyššia
       špecifickosť) by preto táto úprava tichoprehrala a font-size by sa
       tu vôbec nezväčšil (zistené meraním počas testovania tejto sekcie
       zadania). */
    #configurator-filters .btn-reset-filters-main {
        padding: calc(7px * var(--ui-scale-kompenzacia, 1)) calc(9px * var(--ui-scale-kompenzacia, 1));
        font-size: 0.78rem;
    }
}