/* ====================================
   static/style.css
   Полный файл стилей (с исправлением для растягивания карты при свернутом сайдбаре)
   ==================================== */

/* ====================================
   Базовые стили страницы
   ==================================== */
body {
    background: #23273B;
    margin: 0;
    color: #E8ECF1;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    overflow: hidden; /* Чтобы при открытии DevTools содержимое не «переключало» скроллбар */
}

/* ====================================
   Карта Leaflet
   ==================================== */
#map {
    position: fixed;
    top: 0;
    left: 390px; /* Фиксированная ширина боковой панели, когда она открыта */
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: left 0.2s ease;
}

/* Когда сайдбар свернут, карта сдвигается влево на ширину свернутого сайдбара (60px) */
.sidebar.collapsed + #map {
    left: 60px !important;
}

/* ====================================
   Боковая панель (sidebar)
   ==================================== */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 390px; /* Всегда фиксированная ширина */
    min-width: 390px;
    max-width: 390px;
    background: #263055;
    border-right: 1px solid #31416B;
    z-index: 1001;
    box-shadow: 2px 0 12px #001f3f11;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Чтобы контент не выходил за границы */
}

/* Скрытый класс для свернутого сайдбара */
.sidebar.collapsed {
    width: 60px !important; /* Свернём в узкую полосу, но не до 0 */
    min-width: 60px !important;
    max-width: 60px !important;
}
.sidebar.collapsed .sidebar-header .logo-icon,
.sidebar.collapsed .sidebar-header .title-text {
    display: none; /* Скрываем логотип и текст при свернутом меню */
}
.sidebar.collapsed .search-and-filter,
.sidebar.collapsed .filters,
.sidebar.collapsed .add-marker-btn,
.sidebar.collapsed .result-list {
    display: none;
}

/* ====================================
   Шапка боковой панели
   ==================================== */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #223060;
    padding: 12px 16px;
    font-size: 1.3em;
    color: #7FC4FF;
    font-weight: bold;
    letter-spacing: 0.05em;
    position: relative;
}

/* Текстовая часть (название) */
.title-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Логотип */
.logo-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    background: #192132;
    border-radius: 8px;
    box-shadow: 0 1px 6px #0001;
}

/* ====================================
   Кнопка «гамбургер» для мобильного меню
   ==================================== */
.menu-btn {
    background-color: #FFFFFF;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    color: #263055;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: background-color 0.2s, color 0.2s;
}
.menu-btn:hover {
    background-color: #F0F0F0;
    color: #1A2A4F;
}

/* ====================================
   Кнопка «Добавить метку»
   ==================================== */
.add-marker-btn {
    display: block;
    width: calc(100% - 40px);    /* слева/справа по 20px */
    margin: 10px 20px;           /* сверху/снизу 10px, слева/справа 20px */
    padding: 10px 0;             /* вертикально 10px */
    background-color: #379BFF;   /* синий фон */
    color: #FFFFFF;              /* белый текст */
    border: none;
    border-radius: 4px;          /* скруглённые углы */
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: background-color 0.2s, color 0.2s;
}
.add-marker-btn:hover {
    background-color: #2674ca;   /* чуть более тёмный синий при наведении */
    color: #FFFFFF;
}

/* ====================================
   Блок «Поиск + фильтр банков»
   ==================================== */
.search-and-filter {
    display: flex;
    align-items: center;
    margin: 14px 20px 4px 20px;
    position: relative;
}

/* Обёртка для поля поиска */
.search-wrap {
    flex: 1 1 auto;
    position: relative;
    background: #2B3559;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 2px solid #31416B;
}

/* Поле поиска */
.search-box {
    flex: 1 1 0;
    font-size: 1.05em;
    background: transparent;
    color: #f3f5fa;
    border: none;
    outline: none;
    padding: 9px 0;
}

/* Кнопка очистки текста «×» */
#clearSearch {
    display: none;
    position: absolute;
    right: 14px;
    cursor: pointer;
    font-size: 1.1em;
    color: #A3BBE3;
    user-select: none;
    transition: color 0.13s;
}
#clearSearch:hover {
    color: #fff;
}

/* Кнопка «Фильтр банков» (иконка-воронка) */
.search-filter-btn {
    margin-left: 8px;
    background: #2B3559;
    border: none;
    color: #A3BBE3;
    font-size: 1.3em;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}
.search-filter-btn:hover {
    background: #3A3A3C;
    color: #fff;
}
.search-filter-btn.active {
    background: #379BFF;
    color: #fff;
}

/* Выпадающий список банков */
.bank-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 20px;
    background: #2B3559;
    border: 1px solid #31416B;
    border-radius: 8px;
    width: 160px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 4px 12px #001f3f55;
    z-index: 1100;
}
.bank-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}
.bank-dropdown li {
    padding: 8px 12px;
    font-size: 0.95em;
    color: #E8ECF1;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.13s;
}
.bank-dropdown li:hover,
.bank-dropdown li.active {
    background: #379BFF;
    color: #fff;
}
.bank-dropdown::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}
.bank-dropdown::-webkit-scrollbar-track {
    background: #2B3559;
    border-radius: 4px;
}
.bank-dropdown::-webkit-scrollbar-thumb {
    background: #3A3A3C;
    border-radius: 4px;
}
.bank-dropdown::-webkit-scrollbar-thumb:hover {
    background: #4A4A4C;
}
.bank-dropdown {
    scrollbar-width: thin;
    scrollbar-color: #3A3A3C #2B3559;
}

/* ====================================
   Фильтры «Все / Отделения / Банкоматы»
   ==================================== */
.filters {
    margin: 6px 20px 4px 20px;
    display: flex;
    gap: 6px;
}
.filter-btn {
    flex: 1 1 0;
    background: #3A3A3C;
    color: #A3BBE3;
    border: none;
    padding: 9px 0;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.13s, color 0.13s;
    box-shadow: 0 1px 3px #0002;
}
.filter-btn.active,
.filter-btn:hover {
    background: #379BFF;
    color: #fff;
}

/* ====================================
   Список результатов (левый контейнер)
   ==================================== */
.result-list {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 4px 20px 10px 20px;
    padding: 0;
}
.result-list::-webkit-scrollbar {
    width: 12px;
    background: #2B3559;
    border-radius: 8px;
}
.result-list::-webkit-scrollbar-track {
    background: #2B3559;
    border-radius: 8px;
}
.result-list::-webkit-scrollbar-thumb {
    background: #3A3A3C;
    border-radius: 8px;
    border: 2px solid #2B3559;
}
.result-list::-webkit-scrollbar-thumb:hover {
    background: #4A4A4C;
}
.result-list {
    scrollbar-width: thin;
    scrollbar-color: #3A3A3C #2B3559;
}
.list-item {
    background: #263362;
    border-radius: 10px;
    box-shadow: 0 1px 6px #001e3a16;
    border-bottom: 2px solid #31416B;
    padding: 11px 18px 9px 18px;
    margin-bottom: 11px;
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.13s;
}
.list-item:hover {
    background: #3360a4;
    box-shadow: 0 2px 12px #002e5a29;
}
.list-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bank-logo-list {
    width: 40px;
    height: 40px;
    background: #212c4d;
    border-radius: 50%;
    object-fit: contain;
    margin-right: 5px;
    flex-shrink: 0;
    display: block;
}
.list-type {
    font-weight: 700;
    font-size: 1em;
    margin-bottom: 2px;
    color: #E8ECF1;
}
.list-bank {
    color: #48b9ff;
    font-size: 0.9em;
    font-weight: 500;
}
.list-addr {
    color: #8DA2CE;
    font-size: 0.88em;
    margin-top: 2px;
}

/* ====================================
   Popup (Leaflet)
   ==================================== */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: #232d46 !important;
    color: #E8ECF1 !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px #002e5a33 !important;
    font-size: 0.95em !important;
    border: none !important;
}
.leaflet-popup-content {
    color: #E8ECF1 !important;
    min-width: 300px;
    max-width: 330px;
    padding: 16px 16px 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popup-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.popup-content .popup-bank-logo {
    width: 38px;
    height: 38px;
    background: #181A20;
    border-radius: 10px;
    object-fit: contain;
    margin-bottom: 6px;
    display: block;
    box-shadow: 0 1px 4px #0002;
}
.popup-content .popup-title {
    font-weight: bold;
    color: #59A8FF;
    font-size: 1em;
    margin-bottom: 1px;
    text-align: center;
}
.popup-content .popup-bank {
    color: #7EC5FF;
    font-style: italic;
    font-size: 0.9em;
    text-align: center;
    margin-bottom: 1px;
}
.popup-content .popup-addr {
    color: #b6d4f7;
    margin-bottom: 1px;
    font-size: 0.9em;
    text-align: center;
}
.popup-user {
    color: #b7cff8;
    font-size: 0.9em;
    margin-bottom: 5px;
    margin-top: 1px;
    text-align: center;
}

/* Рейтинг в попапе */
.popup-rating {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 6px 0 10px 0;
    justify-content: center;
}
.like-btn,
.dislike-btn {
    background: transparent;
    border: none;
    font-size: 1.7em;
    cursor: pointer;
    transition: transform 0.11s;
    padding: 0 6px;
    color: #ffcc4d;
    outline: none;
}
.like-btn:hover,
.dislike-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}
.like-btn.active,
.dislike-btn.active {
    color: #379BFF;
}
.rating-score {
    color: #E8ECF1;
    font-size: 1em;
    min-width: 25px;
    text-align: center;
    display: inline-block;
}

/* Поле для комментария */
.popup-comment {
    width: 100%;
    background: #232d39;
    color: #E8ECF1;
    border: 2px solid #31416B;
    border-radius: 7px;
    resize: vertical;
    min-height: 30px;
    font-size: 0.9em;
    margin-top: 3px;
    margin-bottom: 1px;
}

/* Кнопка «Сохранить» в попапе */
.popup-save-btn {
    background: #59A8FF;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-weight: 600;
    padding: 6px 18px;
    margin-top: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 0.13s;
    font-size: 0.9em;
    display: block;
}
.popup-save-btn:hover {
    background: #2186e8;
}

/* Разделитель внутри попапа */
.popup-content hr {
    margin: 8px 0 3px;
    width: 100%;
    border: none;
    border-bottom: 1px solid #344164;
}

/* Иконка-маркер */
.marker-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #888888;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px #0004;
}
.marker-wrapper img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    background: none;
    display: block;
    margin: auto;
}

/* Кнопки «Редактировать» и «Удалить» в попапе */
.edit-marker-btn,
.delete-marker-btn {
    background: #388bfd;
    color: #fff;
    border: none;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 0.78em;
    cursor: pointer;
    font-weight: 600;
    margin-right: 4px;
    margin-top: 6px;
    transition: background 0.13s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.edit-marker-btn:hover {
    background: #2166c7;
}
.delete-marker-btn {
    background: #d04646;
}
.delete-marker-btn:hover {
    background: #9e2e2e;
}

/* ====================================
   Модальное окно «Добавить/Редактировать метку»
   ==================================== */
.modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: rgba(16,22,39,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
}
.marker-form {
    background: #324474;
    border-radius: 22px;
    box-shadow: 0 6px 28px #001f3f30;
    padding: 18px 24px 16px 24px;
    width: 340px; /* Ширина формы */
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
    font-size: 0.95em;
    position: relative;
    margin: 28px 0 0 0;
    overflow-y: auto;
}
.marker-form label {
    font-size: 0.95em;
    color: #c8dbff;
    margin-bottom: 2px;
    font-weight: 500;
}
.marker-form input[type="text"],
.marker-form select,
.marker-form textarea {
    width: 100%;
    padding: 10px 8px;
    background: #243059;
    border: none;
    border-radius: 8px;
    color: #dde5f3;
    font-size: 0.95em;
    margin-bottom: 4px;
    outline: none;
    transition: background 0.16s;
    resize: none;
}
.marker-form input[type="text"]:focus,
.marker-form select:focus,
.marker-form textarea:focus {
    background: #34498f;
}
.marker-form input[readonly] {
    background: #212c44;
    color: #bbdaf7;
}
.marker-form .pick-coords-btn {
    width: fit-content;
    background: #379bff;
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 0.9em;
    border-radius: 7px;
    padding: 6px 12px;
    margin-top: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-block;
}
.marker-form .pick-coords-btn:hover {
    background: #217be0;
}
.marker-form .save-marker-btn {
    background: #46a8ff;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    padding: 10px 0;
    margin-top: 12px;
    transition: background 0.15s;
    cursor: pointer;
    width: 100%;
}
.marker-form .save-marker-btn:hover {
    background: #2674ca;
}

/* Заголовок модального окна */
.modal-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.15em;
    font-weight: bold;
    margin-bottom: 12px;
    color: #fff;
}
.close-btn {
    background: none;
    border: none;
    font-size: 1.6em;
    color: #fff;
    cursor: pointer;
    padding: 0 7px;
    margin: -5px -10px 0 0;
    border-radius: 7px;
    transition: background 0.13s, color 0.14s;
}
.close-btn:hover {
    background: #31416B;
    color: #7fc4ff;
}

/* Подсказка внутри формы */
#markerHelp {
    color: #cde;
    margin-top: 7px;
    font-size: 1em;
    text-align: left;
}

/* ====================================
   Плейсхолдеры
   ==================================== */
::-webkit-input-placeholder {
    color: #8aa4d2;
    opacity: 1;
}
::-moz-placeholder {
    color: #8aa4d2;
    opacity: 1;
}
:-ms-input-placeholder {
    color: #8aa4d2;
    opacity: 1;
}
::placeholder {
    color: #8aa4d2;
    opacity: 1;
}

/* ====================================
   Убираем любые медиа-запросы, 
   чтобы ширина сайдбара всегда была «фиксированной»
   ==================================== */