/* 🧪 ATLAS-CIV-CLICKER | FEEDBACK SYSTEM (v7.9.12) */
/* @ui-render @feedback-ui */

.error-msg {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 10px;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    display: none;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    z-index: 20;
}

.error-msg.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.error-msg.worker-error {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.1);
}

.error-msg.resource-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.1);
}

/* 🌟 PREMIUM FLOATING TOAST NOTIFICATION SYSTEM */
/* MENSCH: Container zur Platzierung schwebender Toasts im viewport auf Mobil- & Desktop-Geräten. KI: @ui-render @feedback-toast */
#toast-container {
    position: fixed !important;
    top: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 90% !important;
    max-width: 420px !important;
    pointer-events: none !important;
}

/* MENSCH: Einzelner Toast-Eintrag mit Premium Glassmorphic-Effekt und Slide-In/Out-Animationen. KI: @ui-render @glassmorphism */
.toast-notification {
    pointer-events: auto !important;
    padding: 14px 22px !important;
    border-radius: 14px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.5) !important;
    transform: translateY(-20px);
    opacity: 0;
    animation: toastSlideIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.toast-notification:hover {
    transform: scale(1.02) !important;
}

/* MENSCH: Toast-Typen für Ressourcenfehler, Arbeitermangel und Erfolge. KI: @ui-render @feedback-toast-types */
.toast-notification.resource-error {
    border-color: rgba(239, 68, 68, 0.45) !important;
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    color: #f87171 !important;
}

.toast-notification.worker-error {
    border-color: rgba(245, 158, 11, 0.45) !important;
    background: linear-gradient(135deg, rgba(120, 53, 4, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    color: #fbbf24 !important;
}

.toast-notification.success-msg {
    border-color: rgba(16, 185, 129, 0.45) !important;
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    color: #34d399 !important;
}

/* Slide-out Animation für geschlossene Toasts */
.toast-notification.hide {
    animation: toastSlideOut 0.3s ease forwards !important;
}

/* MENSCH: Fortschrittsbalken am unteren Ende des Toasts zur Visualisierung des Timeouts. KI: @ui-render */
.toast-progress {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 3px !important;
    width: 100% !important;
    background: currentColor !important;
    transform-origin: left !important;
    animation: toastProgress 4s linear forwards !important;
}

@keyframes toastSlideIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    to {
        transform: translateY(-20px);
        opacity: 0;
    }
}

@keyframes toastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}