/* 
 * CI-konforme Alert-Styles für Zahnarztpraxis
 * Ersetzt das türkise alert-info durch markengerechte Farben
 */

/* Bordeaux-basierte Alerts für Öffnungszeit-Änderungen */
.alert-praxis {
    background-color: #f8e8e9 !important; /* Helles Bordeaux */
    border: 1px solid #722F37 !important;
    color: #722F37 !important;
}

.alert-praxis .btn-close {
    filter: none;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23722F37'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

/* Grün-basierte Alerts für Feiertage/Schließungen */
.alert-praxis-green {
    background-color: #e8f4ea !important; /* Helles entsättigtes Grün */
    border: 1px solid #4A7C59 !important;
    color: #4A7C59 !important;
}

.alert-praxis-green .btn-close {
    filter: none;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234A7C59'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

/* Neutrale Alerts für allgemeine Hinweise */
.alert-praxis-neutral {
    background-color: #f8f9fa !important; /* Hellgrau */
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
}

.alert-praxis-neutral .btn-close {
    filter: none;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23495057'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

/* Hover-Effekte für bessere UX */
.alert-praxis:hover {
    background-color: #f5dfe0 !important;
}

.alert-praxis-green:hover {
    background-color: #e0f0e3 !important;
}

.alert-praxis-neutral:hover {
    background-color: #f1f3f4 !important;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .alert-praxis,
    .alert-praxis-green,
    .alert-praxis-neutral {
        font-size: 0.9rem;
        padding: 0.75rem 3rem 0.75rem 1rem !important; /* Mehr Platz rechts für Close-Button */
    }
    
    .alert-praxis span,
    .alert-praxis-green span,
    .alert-praxis-neutral span {
        font-size: 1rem !important;
        margin-right: 5px !important;
    }
    
    /* Close Button auf Mobile optimiert */
    .alert-praxis .btn-close,
    .alert-praxis-green .btn-close,
    .alert-praxis-neutral .btn-close {
        position: absolute !important;
        top: 50% !important;
        right: 0.75rem !important;
        transform: translateY(-50%) !important;
        padding: 0.5rem !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        z-index: 10 !important;
    }
}

/* Desktop Close Button Optimierungen */
@media (min-width: 769px) {
    .alert-praxis .btn-close,
    .alert-praxis-green .btn-close,
    .alert-praxis-neutral .btn-close {
        position: absolute !important;
        top: 50% !important;
        right: 1rem !important;
        transform: translateY(-50%) !important;
        padding: 0.5rem !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        opacity: 0.8 !important;
        transition: opacity 0.2s ease !important;
    }
    
    .alert-praxis .btn-close:hover,
    .alert-praxis-green .btn-close:hover,
    .alert-praxis-neutral .btn-close:hover {
        opacity: 1 !important;
        transform: translateY(-50%) scale(1.1) !important;
    }
}

/* Firefox-spezifische Fixes */
@-moz-document url-prefix() {
    .alert-praxis .btn-close,
    .alert-praxis-green .btn-close,
    .alert-praxis-neutral .btn-close {
        background-size: 0.8rem 0.8rem !important;
        background-position: center !important;
    }
}