:root {
    /* Primary (#002f6c) */
    --primary-50: 242, 245, 248;
    --primary-100: 230, 234, 240;
    --primary-200: 191, 203, 218;
    --primary-300: 153, 172, 196;
    --primary-400: 77, 109, 152;
    --primary-500: 0, 47, 108;
    --primary-600: 0, 42, 97;
    --primary-700: 0, 35, 81;
    --primary-800: 0, 28, 65;
    --primary-900: 0, 23, 53;
    --primary-950: 0, 14, 32;

    /* Danger (#DA4446) */
    --danger-50: 253, 246, 246;
    --danger-100: 251, 236, 237;
    --danger-200: 246, 208, 209;
    --danger-300: 240, 180, 181;
    --danger-400: 229, 124, 126;
    --danger-500: 218, 68, 70;
    --danger-600: 196, 61, 63;
    --danger-700: 164, 51, 53;
    --danger-800: 131, 41, 42;
    --danger-900: 107, 33, 34;
    --danger-950: 65, 20, 21;

    /* Gray */
    --gray-50: 249, 250, 251;
    --gray-100: 243, 244, 246;
    --gray-200: 229, 231, 235;
    --gray-300: 209, 213, 219;
    --gray-400: 156, 163, 175;
    --gray-500: 107, 114, 128;
    --gray-600: 75, 85, 99;
    --gray-700: 55, 65, 81;
    --gray-800: 31, 41, 55;
    --gray-900: 17, 24, 39;
    --gray-950: 3, 7, 18;
}

/* ========================================
   Filament grid layout
   ======================================== */

.grid-cols-\[--cols-default\] {
    grid-template-columns: var(--cols-default);
}
.col-\[--col-span-default\] {
    grid-column: var(--col-span-default);
}
.grid-cols-\[repeat\(auto-fit\2c minmax\(0\2c 1fr\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.grid-flow-col {
    grid-auto-flow: column;
}

/* ========================================
   Input element (fi-input)
   ======================================== */

.border-none {
    border-style: none;
}
.bg-white\/0 {
    background-color: rgba(255, 255, 255, 0);
}
.ps-3 {
    padding-inline-start: 0.75rem;
}
.pe-3 {
    padding-inline-end: 0.75rem;
}
.focus\:ring-0:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);

    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 `#0000`);
}
.placeholder\:text-gray-400::placeholder {
    color: rgb(156 163 175);
}
.disabled\:text-gray-500:disabled {
    color: rgb(107 114 128);
}
.disabled\:\[-webkit-text-fill-color\:theme\(colors\.gray\.500\)\]:disabled {
    -webkit-text-fill-color: rgb(107 114 128);
}
.disabled\:placeholder\:\[-webkit-text-fill-color\:theme\(colors\.gray\.400\)\]:disabled::placeholder {
    -webkit-text-fill-color: rgb(156 163 175);
}
@media (min-width: 640px) {
    .sm\:leading-6 {
        line-height: 1.5rem;
    }
}

/* ========================================
   Input wrapper (ring & focus)
   ======================================== */

.ring-gray-950\/10 {
    --tw-ring-color: rgba(var(--primary-600), var(--tw-ring-opacity, 1));
}
.ring-gray-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
/* stylelint-disable nesting-selector-no-missing-scoping-root */
.\[&\:not\(\:has\(\.fi-ac-action\:focus\)\)\]\:focus-within\:ring-2:not(:has(.fi-ac-action:focus)):focus-within {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.\[&\:not\(\:has\(\.fi-ac-action\:focus\)\)\]\:focus-within\:ring-primary-600:not(:has(.fi-ac-action:focus)):focus-within {
    --tw-ring-color: rgba(var(--primary-600), var(--tw-ring-opacity, 1));
}
/* stylelint-enable nesting-selector-no-missing-scoping-root */

/* ========================================
   Secondary color utilities (#0073E6)
   ======================================== */

.bg-accent {
    background-color: #0073E6;
}

.text-accent {
    color: #0073E6;
}

.border-accent {
    border-color: #0073E6;
}

/* ========================================
   Danger utilities (validation errors)
   ======================================== */

.text-danger-600 {
    color: rgba(var(--danger-600), var(--tw-text-opacity, 1));
}
.text-danger-400 {
    color: rgba(var(--danger-400), var(--tw-text-opacity, 1));
}
.ring-danger-600 {
    --tw-ring-color: rgba(var(--danger-600), var(--tw-ring-opacity, 1));
}
.\[&\:not\(\:has\(\.fi-ac-action\:focus\)\)\]\:focus-within\:ring-danger-600:not(:has(.fi-ac-action:focus)):focus-within {
    --tw-ring-color: rgba(var(--danger-600), var(--tw-ring-opacity, 1));
}

/* ========================================
   Custom color utilities (fi-btn colors)
   ======================================== */

.bg-custom-600 {
    background-color: rgba(var(--c-600), var(--tw-bg-opacity, 1));
}
.hover\:bg-custom-500:hover {
    background-color: rgba(var(--c-500), var(--tw-bg-opacity, 1));
}
.hover\:bg-custom-400\/10:hover {
    background-color: rgba(var(--c-400), 0.1);
}
.text-custom-600 {
    color: rgba(var(--c-600), var(--tw-text-opacity, 1));
}
.text-custom-400 {
    color: rgba(var(--c-400), var(--tw-text-opacity, 1));
}
.ring-custom-600 {
    --tw-ring-color: rgba(var(--c-600), var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-custom-500\/50:focus-visible {
    --tw-ring-color: rgba(var(--c-500), 0.5);
}

/* ========================================
   Form inline layout (input + button on same row)
   ======================================== */

.fi-form {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

.fi-form > .fi-fo-component-ctn {
    flex: 1;
    min-width: 0;
}

.fi-form > .fi-form-actions {
    flex-shrink: 0;
    align-self: end;
}

/* ========================================
   Button (fi-btn) overrides
   ======================================== */

.fi-btn {
    border-radius: 999px !important;
    padding: 12px 16px !important;
    white-space: nowrap;
}