#map {
    width: 100%;
    height: 90vh;
    margin-top: 10px;
}


/* Всплывающая панель */
.slide-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100%;
    height: 100%;
    box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
}

.slide-panel.open {
    transform: translateX(0);
}

/* Вариант панели, что виїжджає зліва */
.slide-panel.slide-panel-left {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}
.slide-panel.slide-panel-left.open {
    transform: translateX(0);
}

/* Ensure task and object panels overlay the filter button/panel */
#taskPanel,
#objectQuickPanel,
#panelObject {
    z-index: 1600; /* above #filterGroup (1200) and #modalFilter (1000) */
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    float: right;
    cursor: pointer;
    margin-top: 10px;
    padding: 8px;
    background: #dc3545;
    color: white;
    border-radius: 4px;
}

/* ----- custom styles below ----- */
/* Objects table page specific */
.main-contained{padding:20px;max-width:1400px;margin:0 auto;}
.obj-number{white-space:nowrap;}
.objects-section h3{margin:10px 0;}
table.obj-table{border-collapse:collapse;width:100%;margin-bottom:30px;background-color:#ffffff;table-layout:fixed;}
table.obj-table th,table.obj-table td{border:1px solid #ccc;padding:4px 6px;font-size:14px;text-align:center;background-color:#ffffff;word-wrap:break-word;overflow:hidden;}
/* Фіксована ширина колонок для однакового розміру таблиць (без виділення) */
table.obj-table:not(.with-selection) th:nth-child(1), table.obj-table:not(.with-selection) td:nth-child(1) { width: 40px; } /* № */
table.obj-table:not(.with-selection) th:nth-child(2), table.obj-table:not(.with-selection) td:nth-child(2) { width: 80px; } /* Об'єктовий № */
table.obj-table:not(.with-selection) th:nth-child(3), table.obj-table:not(.with-selection) td:nth-child(3) { width: 120px; } /* Назва */
table.obj-table:not(.with-selection) th:nth-child(4), table.obj-table:not(.with-selection) td:nth-child(4) { width: 120px; } /* Юр. назва */
table.obj-table:not(.with-selection) th:nth-child(5), table.obj-table:not(.with-selection) td:nth-child(5) { width: 120px; } /* Адреса */
table.obj-table:not(.with-selection) th:nth-child(6), table.obj-table:not(.with-selection) td:nth-child(6) { width: 100px; } /* Тип обслуговування */
table.obj-table:not(.with-selection) th:nth-child(7), table.obj-table:not(.with-selection) td:nth-child(7) { width: 80px; } /* Тип системи */
table.obj-table:not(.with-selection) th:nth-child(8), table.obj-table:not(.with-selection) td:nth-child(8) { width: 80px; } /* Тип ППКП */
table.obj-table:not(.with-selection) th:nth-child(9), table.obj-table:not(.with-selection) td:nth-child(9) { width: 100px; } /* Підрозділ */
table.obj-table:not(.with-selection) th:nth-child(10), table.obj-table:not(.with-selection) td:nth-child(10) { width: 80px; } /* Статус */
/* Місяці - однакова ширина для всіх (без виділення) */
table.obj-table:not(.with-selection) th:nth-child(n+11), table.obj-table:not(.with-selection) td:nth-child(n+11) { width: 50px; }

/* Фіксована ширина колонок для таблиць з виділенням */
table.obj-table.with-selection th:nth-child(1), table.obj-table.with-selection td:nth-child(1) { width: 50px; } /* Вибір */
table.obj-table.with-selection th:nth-child(2), table.obj-table.with-selection td:nth-child(2) { width: 40px; } /* № */
table.obj-table.with-selection th:nth-child(3), table.obj-table.with-selection td:nth-child(3) { width: 80px; } /* Об'єктовий № */
table.obj-table.with-selection th:nth-child(4), table.obj-table.with-selection td:nth-child(4) { width: 120px; } /* Назва */
table.obj-table.with-selection th:nth-child(5), table.obj-table.with-selection td:nth-child(5) { width: 120px; } /* Юр. назва */
table.obj-table.with-selection th:nth-child(6), table.obj-table.with-selection td:nth-child(6) { width: 120px; } /* Адреса */
table.obj-table.with-selection th:nth-child(7), table.obj-table.with-selection td:nth-child(7) { width: 100px; } /* Тип обслуговування */
table.obj-table.with-selection th:nth-child(8), table.obj-table.with-selection td:nth-child(8) { width: 80px; } /* Тип системи */
table.obj-table.with-selection th:nth-child(9), table.obj-table.with-selection td:nth-child(9) { width: 80px; } /* Тип ППКП */
table.obj-table.with-selection th:nth-child(10), table.obj-table.with-selection td:nth-child(10) { width: 100px; } /* Підрозділ */
table.obj-table.with-selection th:nth-child(11), table.obj-table.with-selection td:nth-child(11) { width: 80px; } /* Статус */
/* Місяці - однакова ширина для всіх (з виділенням) */
table.obj-table.with-selection th:nth-child(n+12), table.obj-table.with-selection td:nth-child(n+12) { width: 50px; }
table.obj-table th{background:#f5f5f5;position:sticky;top:0;}
td[contenteditable]{background:#fffbe6;cursor:text;}
td[contenteditable]:focus{outline:2px solid #2196F3;}
.year-selector{margin:20px 0;background-color:#ffffff;padding:10px;border-radius:6px;display:inline-block;}
.year-selector select{background-color:#ffffff;padding:4px 8px;border:1px solid #ccc;border-radius:4px;}
.objects-section h3{background-color:#ffffff;padding:8px 12px;border-radius:6px;display:inline-block;margin:10px 0;}

/*-----------------!*map-page.main*!--------------------*/
.main-wrapper-map {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: aqua;
    font-size: 18px;
}
.main-wrapper-map-right {
    margin-right: 100px;
}

.search-container {
    display: flex;
    width: 40px;
    height: 40px;
}
/*-----------------!окно вход!--------------------*/
/* Стили для модального окна */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    backdrop-filter: blur(5px);
    transition: opacity 0.3s ease;
}

/* show modal when not hidden */
.object-photo {
  position: relative;
  margin-bottom: 16px;
}

/* Фіксований розмір для поля фото об'єкта */
.object-photo-container {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(15,22,34,0.4), rgba(11,17,26,0.6));
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.object-photo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Заповнювач для об'єктів без фото */
.object-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  width: 100%;
  height: 100%;
}

.object-photo-placeholder svg {
  opacity: 0.5;
}

/* Стилі для полів завантаження фото */
#newObjPhotoBox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(180deg, rgba(15,22,34,0.8), rgba(11,17,26,0.9));
  border: 2px dashed rgba(79,156,255,0.3);
  border-radius: 12px;
  padding: 32px 24px;
  transition: all 0.3s ease;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#editPhotoGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 140px;
  align-items: flex-start;
  max-height: 280px;
  overflow-y: auto;
  padding: 20px;
  background: linear-gradient(180deg, rgba(15,22,34,0.8), rgba(11,17,26,0.9));
  border: 2px dashed rgba(79,156,255,0.3);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

/* Стилі для кнопок завантаження фото */
#btnAddPhoto, #editAddPhotoBtn, .btn-add-photo {
  background: linear-gradient(135deg, rgba(79,156,255,0.3), rgba(123,97,255,0.25));
  border: 1px solid rgba(79,156,255,0.4);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(79,156,255,0.2);
}

/* Стилі для іконок камери */
.photo-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(79,156,255,0.25), rgba(123,97,255,0.2));
  border: 1px solid rgba(79,156,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
}

/* Стилі для заповнювача "Немає фото" */
.no-photo-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(79,156,255,0.15), rgba(123,97,255,0.1));
  border: 2px dashed rgba(79,156,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  backdrop-filter: blur(6px);
}

/* Додаткові стилі для карток об'єктів */
.object-card-title {
  color: var(--text);
  margin-bottom: 16px;
}

.upload-hint {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  margin: 0;
}

.thumbs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Приховування input файлів */
#newObjPhotoInput {
  display: none;
}
.photo-placeholder{
    width:100%;
    height:100%;
    background-color:#ccc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 5l-1.5-2h-5L8 5'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
}
.modal.hidden{display:none !important;}
.modal:not(.hidden){display:flex;align-items:center;justify-content:center;opacity:1;}
.modal:not(.hidden) .modal-content{
  opacity:1;
  transform:translate(-50%,-50%);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: all 0.3s ease;
}

/* Анимация появления */
.modal.show {
    display: block;
    opacity: 1;
}

.modal.show .modal-content {
    transform: translate(-50%, -50%);
    opacity: 1;
}

/* Стили для формы входа/регистрации */
.frame {
    width: 100%;
    max-width: 400px;
}

.nav {
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.links {
    display: flex;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    list-style: none;
}

.signin-active,
.signup-inactive {
    cursor: pointer;
}

.signin-active a,
.signup-inactive a {
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.signin-active a {
    color: #007bff;
    border-bottom: 2px solid #007bff;
}

/* Стили для форм */
.form-signin,
.form-signup {
    padding: 20px 0;
}

.form-styling {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

label {
    font-size: 14px;
}

.btn-signin{
    width: 100%;
    padding: 12px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease;
}

.btn-signin:hover,
.btn-signup:hover {
    background: #0056b3;
}

/* Фикс: кнопки не должны перекрывать окна/мобильное меню */
.btn-signup,
.btn-signin {
    position: relative !important; /* чтобы ::after было в пределах кнопки */
    z-index: 1 !important;         /* ниже любого оверлея/меню */
    transform: none !important;    /* убираем создание собственного стека */
    filter: none !important;       /* убираем создание собственного стека */
}

/* Понижаем слой декоративного блика на всех кнопках */
button::after,
.btn-signup::after,
.btn-signin::after {
    z-index: 0 !important;
}

/* Когда открыто мобильное меню, опускаем все кнопки ещё ниже для верности */
body.no-scroll button,
body.no-scroll .btn-signup,
body.no-scroll .btn-signin {
    z-index: 0 !important;
}

.btn-service-finish{background:#f1c40f;color:#000;}
.btn-service-finish:hover{background:#e0b90d;}


/* Дополнительные стили для форм */
.checkbox {
    margin: 15px 0;
}

.checkbox input[type="checkbox"] {
    margin-right: 10px;
}

.forgot {
    text-align: center;
    margin-top: 15px;
}

.forgot a {
    color: #007bff;
    text-decoration: none;
    font-size: 14px;
}

.forgot a:hover {
    text-decoration: underline;
}

select.form-styling {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

.success {
    text-align: center;
    padding: 20px;
}

.success-icon {
    font-size: 48px;
    color: #28a745;
    margin-bottom: 20px;
}

.success-message {
    margin-bottom: 20px;
}

.success-message h3 {
    color: #28a745;
    margin-bottom: 10px;
}

.btn-success-close {
    background-color: #28a745;
}

.btn-success-close:hover {
    background-color: #218838;
}

/* Стили для списка задач и списка задач на підтвердження */
.tasks-list,
.notification-list,
#awaitingApprovalNotice {
    max-height: 400px;
    overflow-y: auto;
}

/* Скрол для деталей звітів на головній сторінці */
.stats-details {
    max-height: 400px;
    overflow-y: auto;
}

/* Стилізація скролбару для деталей звітів */
.stats-details::-webkit-scrollbar {
    width: 6px;
}

.stats-details::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.stats-details::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.stats-details::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.task-item {
    transition: all 0.2s ease;
}

.task-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transform: translateY(-2px);
}

.task-item:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Стили для валидации форм */
.form-styling:invalid {
    border-color: #dc3545;
}

.form-styling:valid {
    border-color: #28a745;
}

.error-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
}
/* Стили для кнопки закрытия модального окна */
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.3s ease;
    z-index: 1010;
}

.modal-close-btn:hover {
    color: #c00;
}
/* тут будет пульт стили  */


html, body {
    margin: 0;
    height: 100%;
}

nav button {
    margin-right: 5px;
}

.hidden {
    display: none !important;
}

.object-card {
  background: linear-gradient(180deg, rgba(15,22,34,0.85), rgba(11,17,26,0.90));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.15);
  backdrop-filter: blur(15px);
  color: #e7edf6;
}
.object-card-number{font-size:20px;font-weight:bold;}
.object-card-name{font-size:16px;margin-top:4px;}
.object-card img{width:100%;height:200px;object-fit:cover;}
.object-card button{padding:10px;}
.object-card-content{padding:16px;}
.object-card-text {padding: 5px}
.tabs{overflow: hidden; display:flex;border-bottom:1px solid rgba(255,255,255,0.15);margin-bottom:10px;}
.tab{ padding-top: 4%;padding-bottom: 4%; padding-left:2%; padding-right:2%; cursor:pointer;flex:1;text-align:center;background:rgba(15,22,34,0.6);color:#e7edf6;border-radius:8px 8px 0 0;}
.tab.active{background:linear-gradient(120deg, rgba(79,156,255,0.2), rgba(123,97,255,0.15));font-weight:bold;border-bottom:2px solid #4f9cff;color:#e7edf6;}
.tab-content{display:none;}
.tab-content.active{display:block;}

/* Глобальний скрол для всіх підвкладок у картці об'єкту*/
.tab-content.active {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 8px;
}

/* Стилізація скролбару для всіх вкладок */
.tab-content::-webkit-scrollbar {
    width: 6px;
}

.tab-content::-webkit-scrollbar-track {
    background: rgba(15,22,34,0.3);
    border-radius: 3px;
}

.tab-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

/* Скрол для вікна створення/редагування об'єкту */
.slide-panel .object-card {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}

/* Стилізація скролбару для вікна редагування */
.slide-panel .object-card::-webkit-scrollbar {
    width: 6px;
}

.slide-panel .object-card::-webkit-scrollbar-track {
    background: rgba(15,22,34,0.3);
    border-radius: 3px;
}

.slide-panel .object-card::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.slide-panel .object-card::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

.search-wrapper{display:inline-flex;gap:4px;margin-left:12px;}
.search-wrapper input{padding:4px 8px;}
.search-wrapper button{padding:4px 8px;}
.filter-toggle-btn{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;}
.filter-toggle-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}

#modalFilter{position:absolute;top:50%;left:10px;transform:translate(-110%, -50%);transition:transform .3s ease;will-change:transform;z-index:1000;background:#fff;border:1px solid #ccc;border-radius:6px;padding:10px;width:260px;max-height:80vh;overflow:auto;box-shadow:0 2px 6px rgba(0,0,0,.3);}
#modalFilter.open{transform:translate(0, -50%);}
#modalFilter h3{margin-top:0;}
#filterTechList{max-height:150px;overflow:auto;margin-top:4px;}
.filter-buttons{display:flex;gap:8px;margin-top:12px;justify-content:flex-end;}

/* Sliding filter group with external handle */
#filterGroup{
  --handleW: 48px;
  position: fixed;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  transition: transform .3s ease;
  will-change: transform;
  z-index: 1200; /* above map */
}
#filterGroup.open{ transform: translate(0, -50%); }

/* Override modal layout when inside the group (no own transform/position) */
#filterGroup #modalFilter{
  position: relative;
  top: auto; left: auto;
  transform: none; /* group controls the slide */
  z-index: 1;
}
/* Hide panel content when closed, keep handle clickable */
#filterGroup:not(.open) #modalFilter{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* External handle button shown at the panel right edge */
#filterGroup .filter-handle-btn{
  position: absolute;
  top: 0;
  left: 100%;
  width: var(--handleW);
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  cursor: pointer;
  z-index: 2; /* above panel */
}
#filterGroup .filter-handle-btn:hover{ background:#f7f7f7; }
#filterGroup .filter-handle-btn svg{
  width: 32px; height: 32px; fill: currentColor; stroke: none;
}

#toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    position: fixed;
    top: 15px;
    right: 15px;
    background: #333;
    color: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    opacity: .9;
    z-index: 100;
}

.edit-btn  {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(25, 30, 56, 0.95) !important;
  color: #fff !important;
  border: none;
  padding: 2px 4px;
  font-size: 9px;
  cursor: pointer;
  border-radius: 3px;
  z-index: 1;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.navigator-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(25, 30, 56, 0.95) !important;
  color: #fff !important;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 3px;
  z-index: 1;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  text-decoration: none;
  display: inline-block;
}

/* ----- Секции подій: заголовок + плавне сворачивание таблицы ----- */
.event-type-section .event-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; margin:6px 0;
  background:#fff; border-radius:8px; border:1px solid #e5e5e5;
  cursor:pointer; user-select:none;
  border-left:6px solid transparent;
}
.event-type-section .event-header .event-header-title{ font-weight:700; color:#111; }
.event-type-section .event-header .event-header-arrow{ transition:transform .2s ease; }
.event-type-section .event-header .event-header-arrow.open{ transform:rotate(180deg); }
/* Цветные полоски для типов (если классы применяются) */
.event-type-section .event-header.yellow{ border-left-color:#f1c40f; }
.event-type-section .event-header.red{ border-left-color:#e53935; }

/* Семантические типы (используйте на заголовке .event-header) */
.event-type-section .event-header.connection-lost{ border-left-color:#f1c40f; background:#fff8e1; }
.event-type-section .event-header.aps-triggered{ border-left-color:#e53935; background:#ffebee; }
.event-type-section .event-header.faults{ border-left-color:#fb8c00; background:#fff3e0; }
.event-type-section .event-header.disabled-zones{ border-left-color:#546e7a; background:#eceff1; }

/* Обёртка таблицы с анимацией */
.event-type-section .event-table{
  overflow:hidden;
  max-height:none; /* по умолчанию открыто */
  transition:max-height .25s ease;
}
.event-type-section .event-table.is-collapsed{
  max-height:0;
}

/* ===== Auth page — mobile-friendly layout ===== */
.auth-page{
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.auth-content{
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  padding: 20px;
  box-sizing: border-box;
  animation: authFadeUp .35s ease both;
}

/* Tabs */
.nav{ padding-bottom: 12px; border-bottom: 1px solid #eee; margin-bottom: 12px; }
.nav .links{ display:flex; gap:8px; list-style:none; padding:0; margin:0; }
.nav .links li{ flex:1; }
.nav .links a{
  display:block;
  text-align:center;
  padding:12px;
  border-radius:10px;
  background:#f3f4f6;
  color:#333;
  font-size:16px;
  position: relative;
  overflow: hidden;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.nav .links a::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:6px;
  height:3px;
  background: linear-gradient(90deg,#4f9cff,#7b61ff);
  border-radius:3px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.nav .links a:hover{
  background:#eef2ff;
  color:#0b57d0;
  box-shadow: 0 6px 16px rgba(11,87,208,0.10);
  transform: translateY(-1px);
}
.signin-active a, .signup-active a{ background:#e8f0ff; color:#0b57d0; border:1px solid #c9ddff; }
/* Активный таб под общий стиль */
.nav .links a[aria-selected="true"]{
  background: linear-gradient(120deg, #e8f0ff, #eef5ff);
  color:#0b57d0;
  border:1px solid #c9ddff;
  box-shadow: 0 4px 12px rgba(11,87,208,0.12);
}
.nav .links a[aria-selected="true"]::after{
  transform: scaleX(1);
}

/* Forms */
.form-signin, .form-signup{
  display: grid;
  gap: 12px;
  padding: 12px 0;
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
}
/* По умолчанию показываем вход, регистрация скрыта — для плавного переключения */
.form-signin{ opacity: 1; transform: translateY(0); }
.form-signup{ display: none; opacity: 0; transform: translateY(8px); }

/* Включаем нужную форму при переключении табов (если скрипт меняет aria-selected) */
.auth-content:has(.links li:nth-child(1) a[aria-selected="true"]) .form-signin{
  display: grid; opacity: 1; transform: translateY(0);
}
.auth-content:has(.links li:nth-child(1) a[aria-selected="true"]) .form-signup{
  display: none; opacity: 0; transform: translateY(8px);
}
.auth-content:has(.links li:nth-child(2) a[aria-selected="true"]) .form-signup{
  display: grid; opacity: 1; transform: translateY(0);
}
.auth-content:has(.links li:nth-child(2) a[aria-selected="true"]) .form-signin{
  display: none; opacity: 0; transform: translateY(8px);
}

/* Fallback для браузеров без :has() — переключение на классах контейнера */
.auth-content.mode-signin .form-signin{
  display: grid; opacity: 1; transform: translateY(0);
}
.auth-content.mode-signin .form-signup{
  display: none; opacity: 0; transform: translateY(8px);
}
.auth-content.mode-signup .form-signup{
  display: grid; opacity: 1; transform: translateY(0);
}
.auth-content.mode-signup .form-signin{
  display: none; opacity: 0; transform: translateY(8px);
}

.form-styling{
  padding: 12px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-sizing: border-box;
  background: #fff;
}

label{
  font-size:14px;
}

/* Buttons — единый стиль для кнопок отправки форм авторизации */
.auth-content .btn-signin, .auth-content .btn-signup{
  width: 100%;
  padding: 12px 16px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  margin-top: 6px;
  background: linear-gradient(120deg, #4f9cff, #7b61ff);
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
  transition: background .25s ease, transform .15s ease, box-shadow .25s ease, opacity .2s ease;
}
.auth-content .btn-signin:hover, .auth-content .btn-signup:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.auth-content .btn-signin:active, .auth-content .btn-signup:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.auth-content .btn-signin:disabled, .auth-content .btn-signup:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Анимация появления блока */
@keyframes authFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Desktop scaling */
@media (min-width: 992px){
  .auth-content{ max-width: 600px; padding: 28px; }
  .nav .links a{ font-size: 17px; padding: 14px; }
}
@media (min-width: 1280px){
  .auth-content{ max-width: 640px; }
}

/* Toast on small screens */
@media (max-width: 480px){
  .auth-content{ max-width: 100%; padding: 16px; border-radius: 12px; }
  .nav .links a{ padding: 10px; font-size: 15px; }
  label{ font-size: 13px; }
  #toast{
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: calc(100% - 32px);
  }
}

/* Кнопки на фото в карточках об'єктів */
.photo-btn-overlay {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    z-index: 10;
}

/* Кнопка "Головним/Головне" - лівий верхній кут */
.photo-btn-main {
    top: 4px;
    left: 4px;
    background: rgba(25, 30, 56, 1) !important;
    color: white !important;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.photo-btn-main:hover {
    background: rgba(76, 175, 80, 1);
    transform: scale(1.1);
}

.photo-btn-main.is-main {
    background: rgba(76, 175, 80, 1);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}

/* Кнопка "Видалити" - правий верхній кут */
.photo-btn-delete {
    top: 4px;
    right: 4px;
    background: rgba(25, 30, 56, 1) !important;
    color: white !important;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.photo-btn-delete:hover {
    background: rgba(244, 67, 54, 1);
    transform: scale(1.1);
}

.photo-btn-delete::before {
    content: "×";
    font-size: 16px;
    line-height: 1;
}

/* Clickable notification cards */
.notification {
    cursor: pointer;
}
.notification:hover {
    background: rgba(0, 0, 0, 0.04);
}