/* housing-platform/static/css/style.css */

/* --- STYLA DLA PASEK NAWIGACJI STICKY Z PRZEZROCZYSTOŚCIĄ --- */
/* Nowe reguły ustawiające tło RGBA dla konkretnych kolorów Bootstrapa, gdy navbar jest sticky. */
/* Używamy !important, aby zapewnić nadpisanie standardowych, jednolitych kolorów z klas bg-* */

/* Przezroczysty niebieski dla navbaru z klasą bg-primary (aplikacja wnioskodawcy) */
.navbar.sticky-top.bg-primary {
    background-color: rgba(33, 150, 243, 0.98) !important; /* Kolor Materia Primary z 98% krycia */
    z-index: 1020; /* Standardowa wartość z-index dla sticky/fixed elementów w Bootstrapie */
}

/* Przezroczysty ciemnoszary dla navbaru z klasą bg-dark (aplikacja personelu) */
.navbar.sticky-top.bg-dark {
    background-color: rgba(33, 37, 41, 0.98) !important; /* Kolor Bootstrap Dark z 98% krycia */
    z-index: 1020; /* Standardowa wartość z-index (ta sama co wyżej) */
}


/* --- STYLA DLA PRZEŁĄCZNIKA KONTRASTU (IKONA Aa) --- */
/* Standardowy wygląd w navbarze */

.navbar .contrast-icon {
    font-weight: bold;
    display: inline-block; /* Potrzebne, aby padding i ramka działały poprawnie */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtelna jasna ramka (pomysł 1) */
    padding: 0 3px; /* Lekki padding w środku */
    border-radius: 4px; /* Zaokrąglone rogi ramki */
    color: rgba(255, 255, 255, 0.8); /* Jaśniejszy kolor dla pierwszej litery 'A' (pomysł 3) */
    font-size: 0.9em; /* Lekko mniejszy rozmiar czcionki */
    line-height: 1; /* Zapewnij odpowiednią wysokość linii dla spana */
    /* Usuń domyślny margines, jeśli go masz, aby ramka przylegała */
    margin: 0;
}

/* Styl dla drugiej części litery 'a' w trybie normalnym (pomysł 3) */
.navbar .contrast-icon .contrast-part {
    color: rgba(255, 255, 255, 0.5); /* Ciemniejszy odcień szarości dla 'a' */
}

/* Wygląd przełącznika w trybie WYSOKIEGO KONTRASTU (gdy body ma klasę high-contrast) */
.navbar .nav-item .nav-link.active-contrast .contrast-icon {
    /* Przykład: dodaj żółtą ramkę, aby wskazać, że tryb jest aktywny */
    border: 2px solid #FFFF00; /* Jaskrawy żółty */
    padding: 0 4px; /* Dodaj mały padding w środku */
    border-radius: 4px; /* Lekko zaokrąglij */
    color: #FFFF00 !important; /* Upewnij się, że tekst też jest żółty */
    background-color: #000 !important; /* Może czarne tło w ikonie? */
}

/* Możesz też zmienić wygląd całego linku: */
/* .navbar .nav-item .nav-link.active-contrast { ... } */


/* --- STYLE DLA TRYBU WYSOKIEGO KONTRASTU (dodawane do body) --- */
body.high-contrast {
    /* Ogólne style dla trybu wysokiego kontrastu */
    background-color: #000 !important; /* Czarne tło */
    color: #FFFF00 !important; /* Żółty tekst */
    font-size: 105%; /* Lekko większa czcionka */
}

/* Stylizacja linków w trybie wysokiego kontrastu */
body.high-contrast a {
    color: #FFFF00 !important; /* Żółte linki */
    text-decoration: underline !important; /* Podkreślenie linków */
}

/* Stylizacja tła elementów strukturalnych (np. kart, sekcji) */
body.high-contrast .bg-light,
body.high-contrast .card,
body.high-contrast .modal-content, /* Modale też w wysokim kontraście */
body.high-contrast .alert {
    background-color: #000 !important; /* Czarne tło dla tych elementów */
    color: #FFFF00 !important; /* Żółty tekst dla tych elementów */
    border-color: #FFF !important; /* Biała ramka */
}

/* Celuje w elementy z klasą text-muted, aby wymusić żółty kolor */
body.high-contrast .text-muted {
    color: #FFFF00 !important; /* Wymuś żółty kolor dla tekstu wyciszonego */
}


/* Stylizacja ramek (ogólne) */
body.high-contrast * {
    border-color: #FFF !important; /* Upewnij się, że ramki są białe */
}


/* Stylizacja przycisków w trybie wysokiego kontrastu */
body.high-contrast .btn {
    background-color: #FFFF00 !important; /* Żółte tło przycisku */
    color: #000 !important; /* Czarny tekst przycisku */
    border: 2px solid #FFF !important; /* Biała ramka przycisku */
    box-shadow: none !important; /* Usuń cień */
    text-transform: uppercase !important; /* Upewnij się, że tekst jest duży */
}

/* Stylizacja przycisków hover/focus w trybie wysokiego kontrastu */
body.high-contrast .btn:hover,
body.high-contrast .btn:focus,
body.high-contrast .btn:active {
    background-color: #FFF !important; /* Białe tło przy najechaniu */
    color: #000 !important; /* Czarny tekst przy najechaniu */
    border-color: #FFFF00 !important; /* Żółta ramka przy najechaniu */
}


/* Stylizacja elementów formularzy (input, select, textarea) */
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea,
body.high-contrast .form-control { /* Bootstrapowa klasa kontroli formularza */
    background-color: #000 !important; /* Czarne tło pola */
    color: #FFFF00 !important; /* Żółty tekst w polu */
    border: 1px solid #FFF !important; /* Biała ramka */
    box-shadow: none !important; /* Usuń cień */
}

/* Stylizacja placeholderów w polach formularzy */
body.high-contrast input::placeholder,
body.high-contrast textarea::placeholder {
    color: rgba(255, 255, 0, 0.7) !important; /* Ciemniejszy żółty dla placeholderów */
    opacity: 1; /* Upewnij się, że jest widoczny */
}


/* Stylizacja elementów specyficznych dla Bootstrapa w navbarze w trybie wysokiego kontrastu */
body.high-contrast .navbar {
    background-color: #000 !important; /* Czarne tło navbaru */
    /* Kolory linków w navbarze powinny być już żółte dzięki ogólnej regule a {} */
}

/* Stylizacja brandu w navbarze */
body.high-contrast .navbar-brand {
    color: #FFFF00 !important; /* Żółty kolor brandu */
}


/* --- DODANE STYLE DLA TABELI W TRYBIE WYSOKIEGO KONTRASTU --- */
body.high-contrast .table,
body.high-contrast .table th,
body.high-contrast .table td {
    background-color: #000 !important; /* Czarne tło dla całej tabeli, nagłówków i komórek */
    color: #FFFF00 !important; /* Żółty tekst */
    border-color: #FFF !important; /* Białe ramki */
}

/* Nadpisz styl dla co drugiego wiersza (table-striped) */
body.high-contrast .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #000 !important; /* Czarne tło dla nieparzystych wierszy */
    color: #FFFF00 !important; /* Żółty tekst */
}

/* Nadpisz styl dla wierszy po najechaniu myszką (table-hover) */
body.high-contrast .table-hover > tbody > tr:hover > * {
    background-color: #333 !important; /* Bardzo ciemnoszare tło dla wierszy po najechaniu */
    color: #FFFF00 !important; /* Żółty tekst */
}

/* Upewnij się, że ikony sortowania w nagłówkach tabeli są żółte */
body.high-contrast table th .bi {
    color: #FFFF00 !important;
}

/* Usunięto specyficzne reguły korygujące wyrównanie pionowe dla poprzednich klas przycisku wylogowania */
/* Jeśli przycisk wylogowania (btn-light.btn-sm) wymaga korekty pionowej w normalnym trybie, dodaj ją tutaj (poza blokiem body.high-contrast) */
/* .navbar .navbar-nav .nav-item form .btn-light.btn-sm { vertical-align: middle; margin-top: 1px; } */


/* Tutaj możesz dodawać własne, ogólne lub specyficzne style, które nie kolidują z Bootstrapem/Materia */

/* --- REGUŁA KORYGUJĄCA WYRÓWNANIE PIONOWE DLA PRZYCISKU WYLOGOWANIA (btn-light) --- */
/* Celuje w przycisk (button) z klasami .btn-light.btn-sm wewnątrz formularza,
   w elemencie listy .nav-item, w liście nawigacyjnej .navbar-nav, w pasku nawigacji .navbar. */
.navbar .navbar-nav .nav-item form .btn-light.btn-sm {
    /* Spróbuj wyśrodkować w pionie w stosunku do otaczających elementów tekstowych */
    vertical-align: middle;

    /* Jeśli vertical-align: middle; nie działa idealnie (co jest częste przy przyciskach vs linkach),
       odkomentuj i dostosuj jedną z poniższych właściwości,
       aby skorygować pozycję o kilka pikseli.
       To jest etap "pixel-perfect" - wymaga wizualnego sprawdzenia w przeglądarce.
       Zazwyczaj potrzebna jest korekta rzędu 1-3px (dodatnia lub ujemna).
    */
    margin-top: 12px;
    /* Przykład: przesuń 1px w dół */ /* margin-top: -1px; */ /* Przykład: przesuń 1px w górę */ /* padding-top: 1px; */ /* Przykład: dodaj 1px paddingu u góry */ /* Upewnij się, że domyślne marginesy przycisku nie powodują problemów */ /* margin-bottom: 0; */
}

/* === Style do podświetlania kafelków lokali na liście (apartments/apartment_list.html) === */

/* Styl dla karty lokalu, gdy wnioskodawca zaaplikował (status: ZGLOSZONO) */
/* Używamy kolorów z palety Materia/Bootstrap dla subtelnego wyróżnienia */
.card.card-applied {
    border: 3px solid #71CBD0; /* R-113, G-203, B-208  */
    background-color: #e7f1ff; /* Bardzo jasne tło w odcieniu primary */
    /* Możesz dostosować kolory, np. użyć innego odcienia z palety Materia */
}

/* Styl dla karty lokalu, gdy wnioskodawca zrezygnował (status: REZYGNACJA_MIESZKANCA) */
/* Używamy kolorów z palety Materia/Bootstrap dla subtelnego wyróżnienia */
.card.card-applicant-rejected {
    border: 3px solid #ed2a26; /* Ramka w kolorze warning */
    background-color: #fff7e6; /* Bardzo jasne tło w odcieniu warning */
    /* Możesz dostosować kolory */
}

.card.preferences {
    border: 4px #F7AA1B solid; /* R-247, G-170, B-27 */
}

span.preferences {
    color: #F7AA1B;
    font-weight: bold;
}

.navbar-brand img {
    height: 46px;
    margin: -5px 15px 0 0;
}

/* Opcjonalnie: Style dla innych statusów (np. odrzucona przez personel, zaakceptowana) */
/* Możesz dodać podobne reguły dla .card.card-staff-rejected, .card.card-accepted */
/* Pamiętaj, że w apartment_list.html domyślnie dodaliśmy klasy dla tych statusów */
/* Musisz tylko zdefiniować tu style, jeśli chcesz ich używać */

/* Przykład dla odrzuconych przez personel (czerwony) */
/*
.card.card-staff-rejected {
     border: 2d px solid #dc3545; // Ramka w kolorze danger
     background-color: #fde3e6; // Bardzo jasne tło w odcieniu danger
}
*/

/* Przykład dla zaakceptowanych (zielony) */
/*
.card.card-accepted {
     border: 2px solid #198754; // Ramka w kolorze success
     background-color: #e3f2ed; // Bardzo jasne tło w odcieniu success
}
*/

.remarks-truncated {
    display: inline-block; /* Konieczne, aby max-width i ellipsis działały */
    max-width: 200px; /* Dostosuj szerokość, aby tekst był obcinany */
    white-space: nowrap; /* Zapobiega zawijaniu tekstu */
    overflow: hidden; /* Ukrywa przepełniający tekst */
    text-overflow: ellipsis; /* Dodaje "..." na końcu obciętego tekstu */
    vertical-align: middle; /* Pomaga w wyrównaniu pionowym */
}

#preferences {
    width: 50vw;
    margin: 0 auto;
}

.dashboard-card {
    position: relative;
    height: 300px;
    overflow: hidden;
}
.dashboard-card > .card-img-overlay  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.dashboard-card > .card-img-overlay > .card-title-extra-large {
    font-size: 10rem !important;
}

.col .dashboard-card .dashboard-card-image {
    position: absolute;
    bottom: -20%;
    right: -30%;
    height: 350px;
    width: 636px;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.test .col:nth-child(2) .dashboard-card-image {
    left: -22.5%;
    right: initial;
}