/*
 * Attendance readiness alerts.
 *
 * Written as plain CSS, not Tailwind utilities: Filament ships a pre-compiled
 * stylesheet, so any utility class this panel does not already use is simply
 * absent at runtime and the markup renders unstyled. Everything here is
 * therefore self-contained and uses Filament's own CSS custom properties so it
 * follows the panel's theme instead of fighting it.
 *
 * Those properties are complete oklch colours in Filament 5, so they are used
 * as var(--danger-600) directly and made translucent with color-mix(). The first
 * version wrapped them in rgb(var(...)), the Filament 3 convention: invalid CSS
 * that the browser dropped, leaving every alert untinted and the action button
 * as white text on no background.
 */

.alrazi-readiness {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.alrazi-readiness__issue {
    display: flex;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
    border-inline-start-width: 4px;
    background: var(--gray-50);
}

.dark .alrazi-readiness__issue {
    border-color: var(--gray-700);
    background: color-mix(in oklab, var(--gray-900) 40%, transparent);
}

.alrazi-readiness__issue--danger {
    border-inline-start-color: var(--danger-600);
    background: var(--danger-50);
    border-color: var(--danger-200);
}

.dark .alrazi-readiness__issue--danger {
    background: color-mix(in oklab, var(--danger-400) 8%, transparent);
    border-color: color-mix(in oklab, var(--danger-400) 30%, transparent);
    border-inline-start-color: var(--danger-400);
}

.alrazi-readiness__issue--warning {
    border-inline-start-color: var(--warning-600);
    background: var(--warning-50);
    border-color: var(--warning-200);
}

.dark .alrazi-readiness__issue--warning {
    background: color-mix(in oklab, var(--warning-400) 8%, transparent);
    border-color: color-mix(in oklab, var(--warning-400) 30%, transparent);
    border-inline-start-color: var(--warning-400);
}

.alrazi-readiness__icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.125rem;
}

.alrazi-readiness__issue--danger .alrazi-readiness__icon {
    color: var(--danger-600);
}

.alrazi-readiness__issue--warning .alrazi-readiness__icon {
    color: var(--warning-600);
}

.dark .alrazi-readiness__issue--danger .alrazi-readiness__icon {
    color: var(--danger-400);
}

.dark .alrazi-readiness__issue--warning .alrazi-readiness__icon {
    color: var(--warning-400);
}

.alrazi-readiness__body {
    flex: 1 1 auto;
    min-width: 0;
}

.alrazi-readiness__title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--gray-950);
}

.dark .alrazi-readiness__title {
    color: var(--gray-50);
}

/* The consequence, not the condition: this is the line that makes someone act. */
.alrazi-readiness__consequence {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--gray-600);
}

.dark .alrazi-readiness__consequence {
    color: var(--gray-400);
}

.alrazi-readiness__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.625rem;
    list-style: none;
    padding: 0;
}

.alrazi-readiness__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    background: var(--gray-100);
    color: var(--gray-800);
}

.dark .alrazi-readiness__item {
    background: var(--gray-800);
    color: var(--gray-200);
}

.alrazi-readiness__item-note {
    font-size: 0.75rem;
    opacity: 0.7;
}

.alrazi-readiness__more {
    font-size: 0.8125rem;
    color: var(--gray-500);
    align-self: center;
}

.alrazi-readiness__action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding: 0.375rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--primary-600);
    color: white;
    transition: background-color 120ms ease;
}

.alrazi-readiness__action:hover {
    background: var(--primary-500);
}

.alrazi-readiness__action svg {
    width: 1rem;
    height: 1rem;
}

.alrazi-readiness__clear {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.125rem;
    border-radius: 0.75rem;
    border: 1px solid var(--success-200);
    background: var(--success-50);
    color: var(--success-700);
    font-size: 0.9375rem;
    font-weight: 600;
}

.dark .alrazi-readiness__clear {
    border-color: color-mix(in oklab, var(--success-400) 30%, transparent);
    background: color-mix(in oklab, var(--success-400) 8%, transparent);
    color: var(--success-400);
}

.alrazi-readiness__clear svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

@media (max-width: 640px) {
    .alrazi-readiness__issue {
        padding: 0.875rem;
        gap: 0.625rem;
    }

    .alrazi-readiness__title {
        font-size: 0.9375rem;
    }
}