/* Alert & Notification Components */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-medium);
    border: 1px solid;
    border-left-width: 4px;
}

.alert:last-child {
    margin-bottom: 0;
}

.alert-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.alert-content {
    flex: 1;
}

.alert-title {
    display: block;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
}

.alert-message {
    margin: 0;
    font-size: var(--font-size-body);
}

/* Success Alert */
.alert-success {
    background-color: var(--color-success-20);
    border-color: var(--color-success-100);
    color: var(--color-gray-100);
}

.alert-success .alert-icon {
    color: var(--color-success-100);
}

/* Error Alert */
.alert-error {
    background-color: var(--color-error-20);
    border-color: var(--color-error-100);
    color: var(--color-gray-100);
}

.alert-error .alert-icon {
    color: var(--color-error-100);
}

/* Warning Alert */
.alert-warning {
    background-color: var(--color-warning-20);
    border-color: var(--color-warning-100);
    color: var(--color-gray-100);
}

.alert-warning .alert-icon {
    color: var(--color-warning-100);
}

/* Info Alert */
.alert-info {
    background-color: var(--color-info-20);
    border-color: var(--color-info-100);
    color: var(--color-gray-100);
}

.alert-info .alert-icon {
    color: var(--color-info-100);
}

/* Dismissible Alert */
.alert-dismissible {
    padding-right: var(--space-8);
    position: relative;
}

.alert-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: none;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    border-radius: var(--radius-small);
}

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

.alert-close:focus-visible {
    outline: var(--focus-outline-width) solid currentColor;
    outline-offset: 2px;
}

.alert-close svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* -------------------------------------------------------------------------
   Notification Banner
   Injected dynamically by questionnaire.js; all visual styles live here so
   that 'unsafe-inline' is not required in the Content-Security-Policy.
   ------------------------------------------------------------------------- */

.notification-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.notification-banner--info {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}

.notification-banner--warning {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #92400e;
}

.notification-banner--error {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}

.notification-banner__text {
    flex: 1;
}

.notification-banner__dismiss {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1;
    color: inherit;
    flex-shrink: 0;
}

.notification-banner__dismiss:hover {
    opacity: 0.75;
}

.notification-banner__dismiss:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}