/**
 * MAPPE: /assets/css/components/
 * FIL: alerts.css
 * 
 * BRUGES AF:
 * - login.php
 * - registrering.php
 * - profil.php
 * - dashboard sider
 * - admin sider
 * - ALLE sider med beskeder til brugeren
 * 
 * AFHÆNGIGHEDER:
 * - /assets/css/base/variables.css
 */

/* ============================================
   ALERTS - BESKEDER TIL BRUGEREN
   ============================================ */

.alert {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.alert-fejl {
    border: 1px solid var(--red-300);
    background: var(--red-100);
    color: var(--red-800);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--fejl);
}

.alert-success {
    background: var(--green-100);
    color: var(--green-800);
    border: 1px solid var(--green-600);
    /* Alternativ styling */
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--green-600);
}

.alert-info {
    background: var(--blue-100);
    color: var(--blue-800);
    border: 1px solid var(--blue-200);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--blue-800);
}

.alert-advarsel {
    background: var(--amber-100);
    color: var(--amber-800);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--amber-500);
    margin-bottom: var(--spacing-lg);
}

/* Advarsel box (lidt anderledes styling) */
.advarsel-box {
    background: var(--amber-100);
    border-left: 4px solid var(--amber-500);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}