td {
  padding: 10px 0;
}

site-table {
    margin-top: 50px !important;
    border-collapse: separate;
    border-spacing: 50px 0;
}

::placeholder {
  color: white;
}

/* General Components */

.alert {
  width: fit-content;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
}

.input {
  background-color: rgb(158, 183, 229);
  text-align: center;
  border-style: none;
}

.button {
  background-color: rgb(32, 56, 100);
  padding: 10px;
  border-style: None;
  margin-top: 40px;
  border-radius: 4px;
}

.left-side-dropdown {
  background-color: #9EB7E5;
  color: white;
  text-align: center;
  border-radius: 4px;
  width: 150px;
  position: relative;
  height: 36px;
}

.dropdown{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    height: 100%;
    margin-top: unset;
    margin-bottom: 20px;
}

/* Page: Portfolio Mapping */

#mapping_table {
    width: 50%;
    border-collapse: collapse;
    padding: 0px 12px;
    display: table;
    border-left: 12px solid transparent;
}

#portfolio-page-container{
    width: 100%;
    padding-left: 70px;
    padding-bottom: 30px;
    color: rgb(32, 56, 100);
}

#portfolio-page-col-1{
    margin-top: 80px;
}

#mapping-pg-row-1{
    flex-direction: column;
}

#upload-btn{
    width: 100%;
}

#mapping-pg-header{
    margin-bottom: 30px;
}

/* Upload page */

#save-btn{
    width: 10%;
}
#upload-container{
    width: 100%;
    padding: 0px 10vw;
    gap: 20%;
    color: rgb(32, 56, 100);
}

#upload-col-1{
    width: 30%;
    flex: 1 0 0%;
}

#upload-filter-row{
    margin-top: 40px;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.upload-filter-col{
    display: flex;
    justify-content: center;
}

.upload-filter{
    width: 100%;
    height: 100%;
}

.upload-filter-text{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-filter-dropdown{
    width: 50%;
}

#filter_reporting_year{
    height: 36px;
}

#upload-overview-col-1{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#upload-overview-col-1:first-child {
    font-weight: bold;
}

#upload-pg-row-1{
    gap: 10%
}

.upload-pg-loaded-container{
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.upload-pg-loaded-container th{
    border-bottom: 1px solid #9EB7E5;
    border-right: 1px solid #9EB7E5;
    background-color: #9EB7E5;
    color: white;
    padding: 5px;
    text-align: center;
}

.upload-pg-loaded-container td{
    border-bottom: 1px solid rgb(32, 56, 100);
    border-right: 1px solid rgb(32, 56, 100);
    padding: 5px;
    text-align: center;
}

.upload-pg-loaded-container tr td:first-child,
.upload-pg-loaded-container tr th:first-child {
    border-left: 1px solid rgb(32, 56, 100);
}

.upload-pg-loaded-container tr:first-child th:first-child {
    border-top-left-radius: 4px;
}

.upload-pg-loaded-container tr:first-child th:last-child {
    border-top-right-radius: 4px;
}

.upload-pg-loaded-container tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}

.upload-pg-loaded-container tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

/* Page: Result Portfolio */
.upload-button-col{
    display: flex;
    justify-content: center;
}

#res-portfolio-card {
    background-color: #f8f9fa;
    height: 700px;
    left: 300px;
    top: 57px;
    width: fit-content;
}

/* Стилизация для Firefox */
.custom-scrollbar-container {
  scrollbar-width: thin;
  scrollbar-color: #cccccc #f1f1f1;
}

/* Стилизация для браузеров на движке WebKit (Chrome, Safari, Edge, Opera) */
.custom-scrollbar-container::-webkit-scrollbar {
  position: fixed;
  width: 8px;
}

/* Стиль трека (дорожки, по которой движется ползунок) */
.custom-scrollbar-container::-webkit-scrollbar-track {
  background: transparent;
}

/* Стиль самого ползунка */
.custom-scrollbar-container::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 10px;
  border: 2px solid white;
}

/* Стиль ползунка при наведении на него курсора */
.custom-scrollbar-container::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

/* Стили для заголовка анализа */
.analysis_header{
    display: flex;
    font-size: 32px;
    color: #531a56;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    height: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Стили для меток фильтров (например, "Отчетная дата") */
.filter-label {
    color: #531a56;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
    padding: 0;
}

/* Контейнер для метки и дропдауна внутри колонки */
.dropdown-item-container {
    width: 90%; /* Позволяем контейнеру занять 90% ширины своего dbc.Col родителя */
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрируем содержимое (метку и дропдаун) внутри этого контейнера */
}

/* Главный контейнер dcc.Dropdown */
.dropdown_filter {
    width: 100%; /* Убедимся, что верхний уровень дропдауна Dash занимает всю доступную ширину */
}

/* Select-control: видимая область для текущего значения и стрелки */
.dropdown_filter .Select-control {
    background-color: #f2f2f2; /* Светло-серый фон, который может просвечивать */
    min-height: 40px;
    width: 100%;
    box-shadow: none !important;
    display: flex;
    justify-content: space-between; /* Распределяет элементы с пространством между ними */
    align-items: stretch; /* **КЛЮЧЕВОЕ ИЗМЕНЕНИЕ:** Делает дочерние элементы растягивающимися по высоте */
    padding: 0; /* Убираем padding отсюда */
    font-size: 16px;
    overflow: hidden; /* **КЛЮЧЕВОЕ ИЗМЕНЕНИЕ:** Обрезает любое содержимое, выходящее за border-radius */
}

/* Wrapper для значений и поля ввода (должен растягиваться) */
.dropdown_filter .Select-multi-value-wrapper, /* Для multi-select */
.dropdown_filter .Select-value-wrapper { /* Для single-select */
    flex-grow: 1; /* Позволяет ему занимать доступное горизонтальное пространство */
    display: flex;
    align-items: center; /* Выравнивает содержимое по центру вертикали */
    min-width: 0;
    margin: 0;
    height: 100%;
}


/* Выбранное значение (темно-синяя область) */
.dropdown_filter .Select-value {
    background-color: #f8f8fe !important;
    color: black !important;
    border-radius: 4px !important; /* Радиус скругления */
    margin: 0 !important; /* Убираем все внешние отступы */
    flex-grow: 1; /* Растягивается по горизонтали */
    height: 101%;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    display: flex;
    align-items: center; /* Выравнивает текст по центру вертикали */
}

.filter-options .Select-value {
    background-color: #dbdcf1 !important;
    border: 1px solid #dbdcf1 !important;
    display: inline-flex !important;
    color: #531a56 !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.filter-options .Select-control.is-focused {
    border-color: white !important;
}

.filter-options .Select-value-icon {
    border-right: 1px solid white !important;
    background-color: #dbdcf1 !important;
    color: #531a56 !important;
}

.filter-portfolio .Select-multi-value-wrapper {
    display: inline-block !important;
}

/* Текст внутри темно-силой области */
.dropdown_filter .Select-value-label {
    color: inherit !important;
    font-weight: normal;
    padding: 0 12px !important; /* Горизонтальный padding для самого текста */
    flex-grow: 1;
    min-width: 0;
    text-align: left;
    width: auto;
}

/* Кнопка очистки и зона стрелки (должны быть фиксированного размера) */
.dropdown_filter .Select-clear-zone,
.dropdown_filter .Select-arrow-zone {
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    height: 100%;
}

.dropdown_filter .Select-clear-zone {
    color: white !important;
}

/* Сама стрелка */
.dropdown_filter .Select-arrow-zone .Select-arrow {
    border-color: black transparent transparent !important;
    margin: 0;
}

/* Когда дропдаун открыт, стрелка должна указывать вверх */
.dropdown_filter.Select.is-open .Select-arrow-zone .Select-arrow {
    border-color: transparent transparent black !important;
}

/* Увеличиваем шрифт для элементов выпадающего меню */
.dropdown_filter .Select-menu-outer {
    font-size: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.dropdown_filter .Select-option {
    padding: 8px 10px;
    font-size: 16px;
}
.dropdown_filter .Select-option.is-selected {
    background-color: #531a56 !important;
    color: white !important;
}
.dropdown_filter .Select-option.is-focused {
    background-color: #e0e0e0 !important;
    color: black !important;
}

/* УДАЛЯЕМ контуры/тени при фокусе для предотвращения "ломающейся" рамки */
.dropdown_filter .Select-control:focus-within,
.dropdown_filter .Select-control.is-focused {
    outline: none !important;
    box-shadow: none !important;
    border-color: #e0e0e0 !important;
}

/* Убираем устаревшие стили */
.dropdown_home, .report_date_header {
    display: none;
}

.row-custom {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    background-color: #f8f8fe !important;
}
.row-custom-gauge {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    border: 1px solid #531a56
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.range_slider_filter {
    padding: 0px 10px 25px 25px;
}

.pnl_detailed {
    width: 340px;
    flex-shrink: 0;
}

.button-clicked {
    flex-wrap: nowrap
}

.g-4_custom_col {
    margin-right: 0px !important
}


/* Страница Входа */

#login-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.login-item{
    width: 15%;
    margin-top: 10px;
}

#login-btn{
    margin-top: 20px;
}

#login-text{
    text-align: center;
    color: #531a56;
}

#login-btn{
    background-color: #531a56 !important;
    border-color: white !important;
}