/* Enhanced flash message styles */
.flash-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.5s ease;
}

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

.flash-message.success {
    background-color: rgba(3, 168, 124, 0.1); /* var(--medium-green-10) */
    border-left: 4px solid var(--medium-green);
    color: var(--medium-green);
}

.flash-message.error {
    background-color: rgba(255, 59, 48, 0.1); /* var(--medium-red-10) or similar */
    border-left: 4px solid #ff3b30; /* Consider a variable e.g., --medium-red */
    color: #ff3b30;
}

.flash-message.info {
    background-color: rgba(0, 102, 204, 0.1); /* var(--medium-blue-10) */
    border-left: 4px solid var(--medium-blue);
    color: var(--medium-blue);
}

.flash-message.warning {
    background-color: rgba(255, 149, 0, 0.1); /* var(--medium-orange-10) or similar */
    border-left: 4px solid #ff9500; /* Consider a variable e.g., --medium-orange */
    color: #ff9500;
}

.flash-message i {
    font-size: 1.3rem;
}

.close-message {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
    padding: 5px;
}

.close-message:hover {
    opacity: 1;
}

/* Styles for .flash-messages container (if used, e.g., in base.html) */
/* This was a separate block in the original flash_messages.css, 
   decide if it's needed or if .flash-message is applied directly to each message div */
.flash-messages {
    /* list-style: none; */ /* Not needed if .flash-message is direct child */
    padding: 0; /* Reset padding if it's a container */
    margin: 1rem 0; /* Or adjust as per layout in medium-container */
    /* The .medium-container already provides max-width and padding */
}

/* The following .message.success, .message.error, .message.info 
   seemed to be a different/older style for flash messages.
   The .flash-message.success etc. above are more detailed and match main.css.backup.
   If these are not used, they can be removed. If they are used by a different system,
   they should be kept or merged appropriately. For now, I'm commenting them out
   to avoid conflict with the primary .flash-message styles from main.css.backup.
*/

/*
.flash-messages .message {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.flash-messages .message.success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.flash-messages .message.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.flash-messages .message.info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
*/