/* Toast Notifications - для інформування користувачів */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 350px;
}

.territory-toast {
    background: linear-gradient(135deg, #4e73df 0%, #36b9cc 100%);
    color: white;
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(78, 115, 223, 0.3);
    /* 🚀 Мобільна оптимізація: замінюємо backdrop-filter */
    backdrop-filter: blur(10px);
    margin-bottom: 10px;
    transform: translateX(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Покращуємо рендеринг */
    will-change: transform, opacity;
}

/* 📱 Мобільна оптимізація тостів */
@media (max-width: 768px) {
    .territory-toast {
        /* Відключаємо backdrop-filter на мобільних */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Використовуємо більш непрозорий фон замість blur */
        background: linear-gradient(135deg, #4e73df 0%, #36b9cc 100%) !important;
        /* Швидші transitions */
        transition: transform 0.2s ease, opacity 0.2s ease !important;
        /* Оптимізуємо для touch */
        -webkit-tap-highlight-color: transparent;
    }
}

.territory-toast.showing {
    transform: translateX(0);
    opacity: 1;
}

.territory-toast.hiding {
    transform: translateX(100%);
    opacity: 0;
}

.territory-toast .toast-header {
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 12px 12px 0 0;
}

.territory-toast .toast-body {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
}

.territory-toast .btn-close {
    background: none;
    border: none;
    color: white;
    opacity: 0.8;
    font-size: 16px;
    font-weight: bold;
}

.territory-toast .btn-close:hover {
    opacity: 1;
}

.territory-toast .toast-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

/* Мобільна адаптація */
@media (max-width: 768px) {
    .toast-container {
        top: 20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: calc(100vw - 20px);
        width: 100%;
        max-width: 400px;
    }
    
    .territory-toast {
        margin-bottom: 8px;
        max-width: 100%;
        transform: translateY(-100%);
        box-shadow: 0 4px 16px rgba(78, 115, 223, 0.3);
    }
    
    .territory-toast.showing {
        transform: translateY(0);
        opacity: 1;
    }
    
    .territory-toast.hiding {
        transform: translateY(-100%);
        opacity: 0;
    }
    
    .territory-toast .toast-body {
        padding: 12px 16px;
        font-size: 14px;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .territory-toast .toast-header {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Додаткова адаптація для дуже маленьких екранів */
@media (max-width: 480px) {
    .toast-container {
        top: 15px;
        max-width: calc(100vw - 16px);
    }
    
    .territory-toast .toast-body {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .territory-toast .toast-header {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* Адаптація при відкритих мобільних панелях */
@media (max-width: 768px) {
    /* Коли відкрита мобільна панель територій */
    body.mobile-panel-open .toast-container {
        top: 20px !important;
        z-index: 2200 !important;
    }
    
    /* Landscape орієнтація */
    @media (orientation: landscape) and (max-height: 480px) {
        .toast-container {
            top: 10px !important;
        }
        
        body.mobile-panel-open .toast-container {
            top: 15px !important;
        }
    }
}

/* Адаптація для landscape орієнтації */
@media (max-width: 768px) and (orientation: landscape) {
    .toast-container {
        top: 10px;
        max-width: calc(100vw - 120px); /* Залишаємо місце для кнопок */
    }
    
    .territory-toast {
        margin-bottom: 6px;
    }
    
    .territory-toast .toast-body {
        padding: 8px 12px;
        font-size: 12px;
        line-height: 1.3;
    }
}

/* Типи toast'ів */
.territory-toast.toast-success {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%);
}

.territory-toast.toast-warning {
    background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);
}

.territory-toast.toast-info {
    background: linear-gradient(135deg, #0dcaf0 0%, #0d6efd 100%);
}

.territory-toast.toast-error {
    background: linear-gradient(135deg, #dc3545 0%, #e91e63 100%);
}

/* Постійне повідомлення про точність GPS */
.persistent-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2300;
    max-width: 300px;
}

.gps-persistent-toast {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border: none !important;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    color: white;
    font-size: 13px;
    line-height: 1.4;
}

.gps-persistent-toast.gps-toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.gps-toast-content {
    width: 100%;
}

.gps-accuracy-info {
    align-items: center;
}

.accuracy-icon {
    /* 🚀 Оптимізуємо анімацію для мобільних */
    animation: gps-icon-pulse 1.5s ease-in-out infinite;
}

/* 📱 Мобільна оптимізація GPS анімацій */
@media (max-width: 768px) {
    .accuracy-icon {
        /* Відключаємо постійні анімації на мобільних для кращої продуктивності */
        animation: none !important;
    }
    
    /* Замінюємо анімацію на простий індикатор */
    .accuracy-icon::before {
        content: "📍";
        font-size: 14px;
    }
}

/* Оптимізуємо transitions для GPS тостів */
@media (max-width: 768px) {
    .gps-persistent-toast {
        transition: transform 0.2s ease, opacity 0.2s ease !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

.accuracy-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
}

.accuracy-level {
    font-size: 11px;
    font-weight: 500;
}

/* Кольори для різних рівнів точності */
.gps-persistent-toast.gps-accuracy-excellent {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;
}

.gps-persistent-toast.gps-accuracy-good {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;
}

.gps-persistent-toast.gps-accuracy-fair {
    background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%) !important;
}

.gps-persistent-toast.gps-accuracy-poor {
    background: linear-gradient(135deg, #dc3545 0%, #e91e63 100%) !important;
}

/* Анімації */
@keyframes gps-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }
}

@keyframes gps-icon-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Мобільна адаптація для GPS повідомлення */
@media (max-width: 768px) {
    .persistent-toast-container {
        top: 80px; /* Нижче, щоб не перекривати мобільні елементи */
        right: 10px;
        left: 10px;
        max-width: calc(100vw - 20px);
    }
    
    .gps-persistent-toast {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        transform: translateY(-100%);
        padding: 10px 14px;
        font-size: 12px;
    }
    
    .gps-persistent-toast.gps-toast-visible {
        transform: translateY(0);
    }
    
    .accuracy-icon {
        font-size: 1.1em !important;
    }
    
    .accuracy-badge {
        font-size: 10px;
    }
    
    .accuracy-level {
        font-size: 10px;
    }
}

/* Landscape орієнтація для мобільних */
@media (max-width: 768px) and (orientation: landscape) {
    .persistent-toast-container {
        top: 10px;
        right: 80px; /* Залишаємо місце для інших елементів */
        left: auto;
        max-width: 260px;
    }
    
    .gps-persistent-toast {
        padding: 8px 12px;
        font-size: 11px;
        transform: translateX(100%);
    }
    
    .gps-persistent-toast.gps-toast-visible {
        transform: translateX(0);
    }
}

/* Адаптація коли відкриті мобільні панелі */
@media (max-width: 768px) {
    body.mobile-panel-open .persistent-toast-container {
        top: 100px !important;
        z-index: 2300 !important;
    }
}