/* includes/ui/ui_styles.css */

/* --- АНИМАЦИИ --- */
@keyframes zoomInTerm { 
    from { transform: scale(0.9); opacity: 0; } 
    to { transform: scale(1); opacity: 1; } 
}
@keyframes slideInRight { 
    from { transform: translateX(100%); opacity: 0; } 
    to { transform: translateX(0); opacity: 1; } 
}
@keyframes timeOut { 
    from { width: 100%; } 
    to { width: 0%; } 
}

/* --- ОБЩИЕ КЛАССЫ МОДАЛОК --- */
.global-modal { 
    display: none; 
    position: fixed; 
    z-index: 99999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.85); 
    backdrop-filter: blur(8px); 
    align-items: center; 
    justify-content: center; 
}
.global-modal.show { display: flex; }

/* --- JDM CONFIRM MODAL --- */
.jdm-confirm {
    background: #0b0b0f !important; 
    background-image: linear-gradient(0deg, rgba(0,0,0,0.3) 50%, transparent 50%); 
    border: 2px solid #333 !important;
    box-shadow: 0 0 0 1000px rgba(0,0,0,0.5) !important; 
    padding: 0 !important; 
    max-width: 600px !important; 
    width: 95%; 
    transform: none !important; 
    animation: zoomInTerm 0.3s;
    display: flex; 
    flex-direction: column; 
    position: relative;
}
.alert-header { 
    background: repeating-linear-gradient(45deg, #111, #111 10px, #222 10px, #222 20px); 
    border-bottom: 2px solid #00f0ff; /* --accent */
    padding: 15px 20px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}
.alert-header.warn { border-bottom-color: #ff0055; /* --primary */ }
.alert-label { 
    background: #00f0ff; /* --accent */
    color: black; 
    font-family: 'Press Start 2P', cursive; 
    font-size: 10px; 
    padding: 5px 8px; 
    box-shadow: 2px 2px 0 black; 
}
.alert-header.warn .alert-label { background: #ff0055; /* --primary */ }
.alert-body { 
    padding: 20px; 
    text-align: left; 
    background: radial-gradient(circle at center, #151515 0%, #050505 100%); 
}
.jdm-btn-row { 
    display: flex; 
    gap: 15px; 
    justify-content: center; 
    margin-top: 20px; 
}
.jdm-confirm-btn { 
    padding: 12px 30px; 
    border: 2px solid transparent; 
    cursor: pointer; 
    font-family: 'Press Start 2P', cursive; 
    font-size: 10px; 
    text-transform: uppercase; 
    transition: 0.2s; 
    transform: skewX(-15deg); 
    background: #00f0ff; /* --accent */
    color: black; 
}
.jdm-confirm-btn:hover { background: white; box-shadow: 0 0 15px white; }
.jdm-confirm-btn.btn-no { background: transparent; border-color: #555; color: #888; }
.jdm-confirm-btn.btn-no:hover { border-color: white; color: white; background: rgba(255,255,255,0.1); }
.jdm-confirm-btn.btn-yes { background: #ff0055; /* --primary */ color: white; }
.jdm-confirm-btn.btn-yes:hover { background: white; color: black; }
.jdm-confirm-btn span { display: inline-block; transform: skewX(15deg); }

/* --- TOASTS (УВЕДОМЛЕНИЯ) --- */
#toast-container { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    z-index: 100000; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    pointer-events: none; 
}
.toast { 
    width: 300px; 
    background: #050505; 
    border: 1px solid #333; 
    border-left: 4px solid #00f0ff; 
    color: white; 
    pointer-events: auto; 
    box-shadow: 5px 5px 0px rgba(0,0,0,0.8); 
    display: flex; 
    flex-direction: column; 
    animation: slideInRight 0.3s ease-out forwards; 
}
.toast-header { 
    background: #111; 
    display: flex; 
    justify-content: space-between; 
    align-items: stretch; 
    border-bottom: 1px solid #222; 
    height: 30px; 
}
.toast-sys-text { 
    font-family: 'Press Start 2P', cursive; 
    font-size: 8px; 
    color: #666; 
    display: flex; 
    align-items: center; 
    padding-left: 10px; 
}
.toast-close { 
    cursor: pointer; 
    color: #666; 
    font-size: 14px; 
    width: 30px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-left: 1px solid #222; 
}
.toast-close:hover { color: #ff0055; background: rgba(255,0,85,0.1); }
.toast-body { 
    padding: 15px; 
    font-family: 'Rajdhani', sans-serif; 
    font-weight: bold; 
    font-size: 14px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}
.toast-timer { height: 2px; width: 100%; background: #111; }
.toast-timer-bar { height: 100%; background: #00f0ff; animation: timeOut 4s linear forwards; }

.toast.success { border-left-color: #00ff9f; } 
.toast.success .toast-sys-text { color: #00ff9f; } 
.toast.success .toast-timer-bar { background: #00ff9f; } 
.toast.success .toast-body i { color: #00ff9f; }

.toast.error { border-left-color: #ff0055; } 
.toast.error .toast-sys-text { color: #ff0055; } 
.toast.error .toast-timer-bar { background: #ff0055; } 
.toast.error .toast-body i { color: #ff0055; }

.toast.info { border-left-color: #00f0ff; } 
.toast.info .toast-sys-text { color: #00f0ff; } 
.toast.info .toast-body i { color: #00f0ff; }