/*
 * Opacity-modified brand utilities (bg-klct-navy-deep/50, bg-klct-success/10, …).
 *
 * Tailwind never generates these. Every klct colour in tailwind.config.js is a bare
 * var(--color-klct-…), and Tailwind 3 cannot apply an alpha modifier to a plain var() —
 * it needs the <alpha-value> placeholder — so it silently emits no rule at all. The class
 * stays in the markup and does nothing, which is why the AI modals rendered with no
 * backdrop and the status pills with no tint.
 *
 * Fixing the config is the real answer, but that only takes effect on a Tailwind rebuild
 * and this app is deployed without one. This file is served straight from public/ (linked
 * after @vite in layouts/app.blade.php), so it works the moment it is deployed.
 *
 * GENERATED from the classes actually used in resources/views. If you add a new
 * klct-colour/opacity class, add its rule here too, or it will do nothing.
 *
 * rgba() first, color-mix() second: identical result, but color-mix follows the token, so
 * a brand colour change in app.css flows through on browsers that support it.
 */

.bg-klct-blue\/10 {
    background-color: rgba(30, 64, 175, 0.1);
    background-color: color-mix(in srgb, var(--color-klct-blue) 10%, transparent);
}

.bg-klct-blue\/5 {
    background-color: rgba(30, 64, 175, 0.05);
    background-color: color-mix(in srgb, var(--color-klct-blue) 5%, transparent);
}

.bg-klct-danger\/10 {
    background-color: rgba(239, 68, 68, 0.1);
    background-color: color-mix(in srgb, var(--color-klct-danger) 10%, transparent);
}

.bg-klct-danger\/5 {
    background-color: rgba(239, 68, 68, 0.05);
    background-color: color-mix(in srgb, var(--color-klct-danger) 5%, transparent);
}

.bg-klct-navy-deep\/50 {
    background-color: rgba(2, 5, 21, 0.5);
    background-color: color-mix(in srgb, var(--color-klct-navy-deep) 50%, transparent);
}

.bg-klct-success\/10 {
    background-color: rgba(34, 197, 94, 0.1);
    background-color: color-mix(in srgb, var(--color-klct-success) 10%, transparent);
}

.bg-klct-success\/5 {
    background-color: rgba(34, 197, 94, 0.05);
    background-color: color-mix(in srgb, var(--color-klct-success) 5%, transparent);
}

.border-klct-blue\/30 {
    border-color: rgba(30, 64, 175, 0.3);
    border-color: color-mix(in srgb, var(--color-klct-blue) 30%, transparent);
}

.border-klct-danger\/30 {
    border-color: rgba(239, 68, 68, 0.3);
    border-color: color-mix(in srgb, var(--color-klct-danger) 30%, transparent);
}

.border-klct-danger\/50 {
    border-color: rgba(239, 68, 68, 0.5);
    border-color: color-mix(in srgb, var(--color-klct-danger) 50%, transparent);
}

.hover\:bg-klct-blue\/5:hover {
    background-color: rgba(30, 64, 175, 0.05);
    background-color: color-mix(in srgb, var(--color-klct-blue) 5%, transparent);
}

.hover\:bg-klct-danger\/10:hover {
    background-color: rgba(239, 68, 68, 0.1);
    background-color: color-mix(in srgb, var(--color-klct-danger) 10%, transparent);
}

.hover\:bg-klct-fog\/60:hover {
    background-color: rgba(249, 250, 251, 0.6);
    background-color: color-mix(in srgb, var(--color-klct-fog) 60%, transparent);
}

.hover\:border-klct-blue\/40:hover {
    border-color: rgba(30, 64, 175, 0.4);
    border-color: color-mix(in srgb, var(--color-klct-blue) 40%, transparent);
}