/**
 * vali-utilities.css — Tailwind utilities MISSING from the compiled Metronic
 * build (it only includes classes its own templates use). RULE: when a
 * Tailwind class you need is not in the build, add it HERE (matching the
 * real Tailwind definition) so it is fixed globally — do not inline-style
 * around it. Loaded by all layouts alongside vali-forms.css.
 *
 * Verified missing 2026-07-10: the whole gap-x-* / gap-y-* axis family
 * (plain gap-* IS compiled). Scale: Tailwind spacing (1 = 0.25rem).
 */
.gap-x-1  { column-gap: 0.25rem; }
.gap-x-2  { column-gap: 0.5rem; }
.gap-x-3  { column-gap: 0.75rem; }
.gap-x-4  { column-gap: 1rem; }
.gap-x-5  { column-gap: 1.25rem; }
.gap-x-6  { column-gap: 1.5rem; }
.gap-x-8  { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-y-1  { row-gap: 0.25rem; }
.gap-y-2  { row-gap: 0.5rem; }
.gap-y-3  { row-gap: 0.75rem; }
.gap-y-4  { row-gap: 1rem; }
.gap-y-5  { row-gap: 1.25rem; }
.gap-y-6  { row-gap: 1.5rem; }
.gap-y-8  { row-gap: 2rem; }

/* Grid column templates + start-alignment — NOT in the compiled Metronic
   build (verified 2026-07-10). Without these a `grid grid-cols-3` container
   collapses to one column, and cards in a row stretch to equal height. */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.items-start { align-items: start; }
.self-start  { align-self: start; }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   SOFT STATUS PANELS — bg-<colour>-light / border-<colour>-clarity /
   text-<colour>-active
   --------------------------------------------------------------------------
   Verified missing 2026-08-13, in a real browser: all twelve of these did
   NOTHING. Eighty-two files across the framework use them — bg-primary-light
   alone appears 76 times — so every "soft" information, warning and success
   panel in the system has been rendering as a plain uncoloured box. It looks
   deliberate enough that nobody questioned it, which is exactly why it lasted.

   Found while building the Connect an AI screen (task #363), whose
   "copy this now, it will not be shown again" warning came out as plain text
   on white. Fixed here rather than by styling that one panel, so the other
   eighty-one are fixed at the same time.

   THE COLOURS ARE THE THEME'S OWN, not invented: they are exactly what
   Metronic's `kt-badge kt-badge-outline kt-badge-<colour>` resolves to, read
   off the rendered page in both light and dark mode. So a soft panel now
   matches the badge of the same colour sitting next to it, and dark mode was
   taken from the theme rather than guessed at.

   `danger` is the name modules use; the theme calls the same colour
   `destructive`. Both are defined so either spelling works.
   ========================================================================== */

.bg-primary-light      { background-color: oklch(0.97 0.014 254.604); }
.bg-info-light         { background-color: oklch(0.969 0.016 293.756); }
.bg-success-light      { background-color: oklch(0.982 0.018 155.826); }
.bg-warning-light      { background-color: oklch(0.987 0.026 102.212); }
.bg-danger-light,
.bg-destructive-light  { background-color: oklch(0.971 0.013 17.38); }

.border-primary-clarity     { border-color: oklch(0.932 0.032 255.585); }
.border-info-clarity        { border-color: oklch(0.943 0.029 294.588); }
.border-success-clarity     { border-color: oklch(0.925 0.084 155.995); }
.border-warning-clarity     { border-color: oklch(0.973 0.071 103.193); }
.border-danger-clarity,
.border-destructive-clarity { border-color: oklch(0.936 0.032 17.717); }

.text-primary-active     { color: oklch(0.488 0.243 264.376); }
.text-info-active        { color: oklch(0.491 0.27 292.581); }
.text-success-active     { color: oklch(0.527 0.154 150.069); }
.text-warning-active     { color: oklch(0.554 0.135 66.442); }
.text-danger-active,
.text-destructive-active { color: oklch(0.505 0.213 27.518); }

/* Dark mode — the theme's own dark tones for the same badges. The light
   backgrounds are semi-transparent by design there, so a panel sits on
   whatever card it is in rather than punching a solid block through it. */
.dark .bg-primary-light      { background-color: oklab(0.282 -0.00327904 -0.0909409 / 0.5); }
.dark .bg-info-light         { background-color: oklab(0.283 0.0507343 -0.131556 / 0.5); }
.dark .bg-success-light      { background-color: oklab(0.266 -0.0578814 0.0295761 / 0.5); }
.dark .bg-warning-light      { background-color: oklab(0.286 0.0389679 0.0532682 / 0.5); }
.dark .bg-danger-light,
.dark .bg-destructive-light  { background-color: oklab(0.258 0.0826595 0.0403907 / 0.5); }

.dark .border-primary-clarity     { border-color: oklch(0.282 0.091 267.935); }
.dark .border-info-clarity        { border-color: oklch(0.283 0.141 291.089); }
.dark .border-success-clarity     { border-color: oklch(0.266 0.065 152.934); }
.dark .border-warning-clarity     { border-color: oklch(0.286 0.066 53.813); }
.dark .border-danger-clarity,
.dark .border-destructive-clarity { border-color: oklch(0.258 0.092 26.042); }

.dark .text-primary-active     { color: oklch(0.546 0.245 262.881); }
.dark .text-info-active        { color: oklch(0.541 0.281 293.009); }
.dark .text-success-active     { color: oklch(0.627 0.194 149.214); }
.dark .text-warning-active     { color: oklch(0.681 0.162 75.834); }
.dark .text-danger-active,
.dark .text-destructive-active { color: oklch(0.577 0.245 27.325); }