@import '03_colors.css';

@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Medium';
    src: url('./fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* Klasa do używania czcionki Font Awesome */
.fas {
    font-family: 'FontAwesome' !important;
}

/* Jasny motyw domyślny - beżowy navbar i footer */
.light-theme {
    background-color: var(--lt-background-color);  /* Jasne tło dla jasnego motywu */
    color: var(--black-color);
}

.light-theme .navbar, .light-theme .footer, .light-theme .panel-background {
    background-color: #fff !important;
    color: var(--black-color);
}

.navbar {
border-bottom: 3px solid #E0E5EB;
/*height: 3.8vh;*/
}

/* Ciemny motyw domyślny - czarny navbar i footer */
.dark-theme, .dark-theme #footer a {
    background-color: var(--dt-background-color);  /* Ciemne tło dla ciemnego motywu */
    color: var(--white-color);
}


.dark-theme .navbar, .dark-theme .footer, .dark-theme .panel-background {
    background-color: var(--black-color);  /* Kolor czarny */
    color: var(--white-color);
}

.nav-link, .nav-link:hover {
    color: var(--black-color);
    position: relative;
    text-decoration: none;
}

.nav-link.active {
    font-weight: bold; /* Ustawia pogrubienie dla aktywnego linku */
}

/* Jasny motyw - aktywny link ma brązowe podkreślenie */
.light-theme .nav-link.active::after {
    background-color: #001D77;
}

/* Ciemny motyw - aktywny link ma różowe podkreślenie */
.dark-theme .nav-link.active::after {
    background-color: #fff;
}

.nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px; /* Pozycja podkreślenia, dostosuj w razie potrzeby */
    width: 100%;
    height: 3px;
    transition: background-color 0.3s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px; /* Pozycja podkreślenia, dostosuj w razie potrzeby */
    width: 100%;
    height: 3px;
    transition: background-color 0.3s ease;
}

.nav-link:hover::after {
    color: var(--white-color);
    background-color: #ccd1e3; /* Kolor podkreślenia na hoverze */
}

.lang-switch-btn {
  background-color: transparent;
  border: none;
  border-radius: 7px;
  padding: 1px 5px;
  margin: 0px 10px;
  color: var(--black-color);
}

.guide-switch-btn {
  background-color: transparent;
  border: none;
  padding: 1px 5px;
  margin: 0px 10px;
  color: var(--black-color);
}

.light-theme .accessibility-page a,
.methodology-page a {
  color: #001D77;
}

.light-theme .accessibility-page a:hover,
.methodology-page a:hover
{
  color: #001D77;
}

.dark-theme .accessibility-page a
{
  color: #fff;
}

.dark-theme .accessibility-page a:hover
{
  color: #fff;
}

.accessibility-link {
    color: white;  /* Kolor tekstu dla linku dostępności */
    font-size: 14px;  /* Rozmiar czcionki */
}

.indicator-title-paragraph {
font-family: 'Roboto';
width: 100%;
/*font-weight: bold;*/
text-align: left;
margin-bottom: 40;
    white-space: normal;  /* <- to musi być, nie 'nowrap' */
    display: block;
}

.indicator-title-paragraph-h2 {
font-family: 'Roboto';
width: 100%;
font-weight: bold;
text-align: center;
margin-bottom: 30;
    white-space: normal;  /* <- to musi być, nie 'nowrap' */
    display: block;
}

.indicator-title-name {
font-family: 'Roboto';
width: 100%;
font-size: 24px;
font-weight: bold;
text-align: center;
position: relative;
margin-bottom: 5px;
}

.indicator-title-details {
font-family: 'Roboto';
width: 100%;
font-size: 16px;
/*font-weight: bold;*/
text-align: center;
position: relative;
margin-bottom: 5px;
}

.indicator-title-region {
font-family: 'Roboto';
width: 100%;
font-size: 20px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
position: relative;
margin-bottom: 5px;
}

.indicator-title-period {
font-family: 'Roboto';
font-weight: 500;
width: 100%;
text-align: center;
position: relative;
margin-bottom: 5px;
}

/* Możesz także dodać inne style specyficzne dla ciemnego i jasnego motywu, takie jak tło */
.light-theme .indicator-title-name {
    color: #333;
}

.light-theme .indicator-title-details {
    color: #555;
}

.dark-theme .indicator-title-details {
    color: #888;
}

.light-theme .indicator-title-period,
.light-theme .indicator-title-details {
    color: #000;
}

.light-theme .indicator-title-details a {
    color: #001D77;
}

.dark-theme .indicator-title-period,
.dark-theme .indicator-title-details {
    color: #fff;
}

.dark-theme .indicator-title-details a {
    color: #fff;
}

.loading-container {
    height: 100%;
}

.loading-container-50 {
    height: 30%;
}
.loading-container-main-map {
    height: 90%;
}

/* Ogólny styl dla responsywności */
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
}

.btn-card-style {
width: 100%;
  border: none;
  padding: 0px;
  margin: 0px;
  border-radius: 10px;
  text-align: left;
}

.Select-menu-outer{
font-size: 14px;
}

.cmp-back-btn{
border-radius: 10px;
background: var(lt-primary-right);
padding: 10px 15px;
border: none;
width: 85px;
position: relative;
top: 20px;
text-align: left;
z-index: 1001;
}

.access-back-btn{
border-radius: 10px;
background: var(lt-primary-right);
padding: 10px 10px;
border: none;
position: relative;
text-align: left;
z-index: 1001;
width: 250px;
height: 40px;
bottom: 20px
}

table {
    width: 100%;
   /* border-collapse: collapse;*/
    margin: 5px 0;
    font-size: 16px;
    text-align: left;
    background-color: #ffffff;
    border: none;
    border-radius: 8px; /* Zaokrąglone rogi */

}

th {
    background-color: white; /* Kolor nagłówków */
    color: black;
    font-weight: bold;
    padding: 7px;
    text-align: center;
}

td {
    padding: 7px; /* Odstępy w komórkach */
    text-align: center; /* Centrowanie treści */
}

.table-header-group {
    font-size: 15px;
    font-weight: bold;
    background-color: #F8F9FB;
    color: black;
}

.group-row {
    font-weight: bold;
    background-color: #f4f6f8;
    text-align: center;
    color: black;
    width: 10%;
}

.left-group-value-row {
    #font-weight: bold;
    text-align: right;
    width:45%;
}

.right-group-value-row {
    #font-weight: bold;
    text-align: left;
        width:45%;
}

/*Dodano na potrzeby analizy regionalne - tabela z wartościami*/
.group-value-row {
    #font-weight: bold;
    text-align: center;
    color: black;
}

html {
    scroll-behavior: smooth;
}

.scroll-offset {
    scroll-margin-top: 70px; /* Przesunięcie o 70px */
}

#cmp-modal-open:hover {
opacity: 90%;
text-decoration: underline;
}

/*.bg-green { background-color: #dcf0e1; color: black;}  /* Jasnozielony */
.bg-green { background-color: #B5D33D; color: black;}  /* Jasnozielony */
/*.bg-red { background-color: #fae3e5; color: black;}  /* Jasnoczerwony */
.bg-red { background-color: #E1B1C1; color: black;}  /* Jasnoczerwony */
.bg-gray { background-color: #edeeef; color: black; }  /* Szary dla równych wartości */

.cmp-modal-btn {
color: black;
border: none;
background-color: transparent;
text-align: left;
margin-left: 20px
}

.cmp-modal-btn:hover{
color: black;
border: none;
background-color: transparent;
opacity: 20%;
text-decoration: underline;
}

#navbar-mode-switch-row {
margin: auto 0;
}

#btn-lng:hover, #btn-guide:hover{
opacity: 70%;
text-decoration: underline;
}

/*dodanie selectorów, żeby usunąć tło z ikon w generowanej grafice*/
.modebar-group {
    background-color: transparent !important;
}
.modebar {
    background-color: transparent !important;  /* Ustawienie przezroczystości tła na całym pasku */
}

.accordion-button:not(.collapsed) {
background-color: #342e68;
color: white;
}

.accordion-button.collapsed {
    background-color: #f8f9fa; /* jasne tło */
   /* color: #000;      */         /* ciemny tekst */
}


.accordion-button:not(.collapsed)::after {
    filter: invert(100%) !important; /* Całkowicie biały */
    font-size: 0.8rem;        /* można powtórzyć, by wymusić */
    transform: scale(0.7) rotate(180deg); /* obrót i zmniejszenie */
    transition: transform 0.3s ease;
}

/* Dla zwiniętego (collapsed) */
.accordion-button.collapsed::after {
    font-size: 0.8rem;
    transform: scale(0.7) rotate(0deg);
    transition: transform 0.3s ease;
}
/* Custom styles for the accordion item header (title) */
.accordion-item .accordion-header {
    font-size: 26px;  /* Adjust the font size */
   /* font-weight: bold;  /* Make the text bold */
    color: #0056b3;  /* Set the color of the title */
}

/* Zaokrąglij nagłówki accordion itemów */
.accordion-item .accordion-header {
    color: #1354AF;  /* Kolor tekstu */
      /* Zaokrąglenie narożników */
    background-clip: padding-box; /* ważne, by border-radius działało poprawnie */
     /* opcjonalne dopasowanie paddingu */
    border: none; /* dodatkowo usuwamy border nagłówka jeśli jest */
}

.accordion-button::after {
    font-size: 0.8rem; /* zmniejsz ikonę (domyślnie ~1.25rem) */
    transform: scale(0.7); /* opcjonalne dodatkowe zmniejszenie */
}

/* Usuń border z całego accordion */
.accordion,
.accordion-item,
.accordion-button {
    border: none !important;
}



/* Dodatkowo, by accordion-button zachowało wygląd (twój kod) */
.accordion-button:not(.collapsed) {
    background-color: #1354AF;
    color: #fff;
    border: none; /* usuń border jeśli jest */
}

.accordion-button.collapsed {
    background-color: #fff; /* jasne tło */
    /* color: #000; */         /* ciemny tekst */
    border: none;
}

.accordion-button {
      /* Zaokrąglone rogi nagłówka */
    border: none !important;          /* Usuń obramowania */
}

.accordion-item {
    margin-bottom: 2px;  /* Odstęp między itemami, żeby było widać zaokrąglenia */
}


.card-body{
padding: 0px !important;
}

.mb-4 {
    margin-bottom: 0.8rem !important;
}

/* Nadpisujemy padding w karuzeli */
#carousel-autoplay {
    padding: 0 !important;
}

/* Nadpisujemy padding w poszczególnych slajdach */
#carousel-autoplay .mantine-Carousel-slide {
    padding: 0 !important;
}
.indicator-box {
    text-align: center;
    height: 100%;
    min-height: 15vh;
}

.indicator-name {
    font-size: 12px;
    margin-bottom: 0 !important;
    font-family: 'Roboto';
}

.indicator-name p {
    margin-bottom: 0 !important;
    margin-top: 0; /* opcjonalnie, jeśli chcesz też usunąć margin-top */
}

.indicator-value {
    font-size: 32px;
    color:#001d77;
    font-family: 'Roboto Medium';

}

.home-title-small {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 1rem;
    white-space: nowrap;
    /*text-transform: uppercase;*/
}

a {
    color: black; /* niebieski */
    text-decoration: none; /* opcjonalnie usuń podkreślenie */
}

a:hover {
    color: #334a92; /* ciemniejszy niebieski po najechaniu */
    text-decoration: underline; /* lub zostaw podkreślenie po najechaniu */
}

.btn-primary {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary {
    background-color: white;
    border: 2px solid #E2E2E2;
    color: #484550;
}

.btn-secondary:hover {
    background-color: white;
    border: 2px solid #001d77;
    color: #001d77;
}

.scroll-offset:target {
    animation: flash-highlight 1s ease-out;
}

@keyframes flash-highlight {
    0%   { background-color: #ccd1e3; }
    100% { background-color: transparent; }
}



.no-vertical-lines {
    width: 100%;
    border-collapse: collapse;
}

.no-vertical-lines td, .no-vertical-lines th {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.no-vertical-lines td:not(:last-child),
.no-vertical-lines th:not(:last-child) {
    border-right: none;
    border-left: none;
    border-top: none;
}

.hover-card {
    transition: background-color 0.3s ease;
    background-color: #ffffff; /* domyślne tło */
}

.hover-card:hover {
    background-color: #E2E2E2; /* nowe tło przy hoverze */
}

/* Nadpisanie kursora tylko nad obszarem wykresu */
.js-plotly-plot .cursor-crosshair,
.js-plotly-plot .nsewdrag,
.js-plotly-plot .draglayer .xy {
    cursor: default !important;
}

/* Usuwa pogrubienie tekstu z opcji dropdownów */
.Select-option {
    font-weight: normal !important;
}

/* Usuwa pogrubienie z wybranej opcji */
.Select-single-value {
    font-weight: normal !important;
}

.list-group-item{
    border:none;
    font-size: 13px;
    font-family: 'Roboto';
}

.accordion-button{
    font-weight: normal !important;
    font-size: 13px;
    font-family: 'Roboto';
}

.accordion-body{
    padding-top: 5px;
    padding-bottom: 0px;
}

.list-group{
border-radius: 0px;
}

.card-title{
    font-weight: bold;
    font-family: 'Roboto';
}

/* telefony i tablety */
@media (max-width: 991.98px) {
  .panel-background {
    min-height: auto !important; /* wysokość zgodnie z zawartością */
    height: auto !important;
  }
}

/* Większy pionowy odstęp między opcjami (React-Select używany przez dcc.Dropdown) */
.chart-type-dropdown .Select-option,
.chart-type-dropdown .VirtualizedSelectOption {
  white-space: normal;         /* pozwala się łamać */
  line-height: 1.35;           /* nieco wyższa interlinia */
  padding-top: 10px;           /* ↑ odstęp wewnętrzny góra/dół */
  padding-bottom: 10px;
  height: auto !important;     /* opcja rośnie z treścią */
}

/* Delikatny separator między opcjami dla czytelności */
.chart-type-dropdown .Select-option + .Select-option,
.chart-type-dropdown .VirtualizedSelectOption + .VirtualizedSelectOption {
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Zachowanie hover/selected – zostaw przestrzeń, ale podkreśl tło/tekst */
.chart-type-dropdown .Select-option.is-focused {
  background-color: rgba(19, 84, 175, 0.08);
}
.chart-type-dropdown .Select-option.is-selected {
  background-color: rgba(19, 84, 175, 0.12);
  font-weight: 600;
}

/* Na bardzo małych ekranach możesz minimalnie zmniejszyć padding,
   żeby menu nie było zbyt „wysokie” */
@media (max-width: 576px) {
  .chart-type-dropdown .Select-option,
  .chart-type-dropdown .VirtualizedSelectOption {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.3;
  }
}

/* (Opcjonalnie) nieco większy odstęp między grupami opcji */
.chart-type-dropdown .Select-option-group-label {
  padding-top: 12px;
  padding-bottom: 6px;
  font-weight: 600;
}