@import 'tailwindcss';

@utility font-serif {
    font-family: var(--font-serif);
}

@utility input {
    @apply w-full;
    @apply max-w-full;
    @apply min-h-13;
    @apply px-6;
    @apply py-4;
    @apply rounded-sm;
    @apply bg-white;
    @apply border;
    @apply border-solid;
    @apply border-sand-bleak;
    @apply hover:border-blue;
    @apply placeholder:text-navy/50;
    @apply text-sm;
    @apply leading-none;
    @apply shadow-input;
}

@utility card {
    @apply p-4;
    @apply sm:p-6;
    @apply md:p-12;
    @apply bg-white;
    @apply rounded-2xl;
    @apply shadow-card;
}

@utility button {
    @apply px-4;
    @apply sm:px-6;
    @apply h-10;
    @apply sm:h-12;
    @apply bg-blue-dark;
    @apply text-white;
    @apply whitespace-nowrap;
    @apply text-xs;
    @apply sm:text-sm;
    @apply rounded-full;
    @apply font-medium;
    @apply inline-flex;
    @apply items-center;
    @apply justify-center;
    @apply gap-x-2;
    @apply transition-colors;
    @apply duration-300;
    @apply leading-none;
}

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions and tables */
@import '../../vendor/filament/actions/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';

/* Required by actions and infolists */
@import '../../vendor/filament/infolists/resources/css/index.css';

/* Required by notifications */
@import '../../vendor/filament/notifications/resources/css/index.css';

/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

/* Required by tables */
@import '../../vendor/filament/tables/resources/css/index.css';

@import './vendor/filepond.css' layer(components);
@import './vendor/codemirror.css' layer(components);
@import './vendor/easy-mde-overrides.css' layer(components);
@import './vendor/choices.css' layer(components);
@import './vendor/filament.css' layer(components);
@import './vendor/coloris.css' layer(components);

@import './utilities/button.css' layer(components);
@import './utilities/card.css' layer(components);
@import './utilities/chart.css' layer(components);
@import './utilities/dropdown.css' layer(components);
@import './utilities/form.css' layer(components);
@import './utilities/input.css' layer(components);
@import './utilities/label.css' layer(components);
@import './utilities/link.css' layer(components);
@import './utilities/markup.css' layer(components);
@import './utilities/tooltip.css' layer(components);
@import './utilities/table.css' layer(components);

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@source '../../vendor/filament/**/*.blade.php';

@custom-variant dark (&:is(.dark *));

@theme {
    --font-*: initial;
    --font-sans:
        Inter, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --font-roboto:
        'Roboto', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
    --font-title:
        'Inter Tight', 'Inter Tight Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    --text-*: initial;
    --text-14: 14px;
    --text-2xs: 0.625rem;
    --text-xs: 0.75rem;
    --text-sm: 0.938rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.313rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.75rem;
    --text-3_5xl: 2rem;
    --text-4xl: 3rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4rem;
    --text-7xl: 6rem;

    --color-transparent: transparent;
    --color-current: currentColor;
    --color-navy: #142d6f;
    --color-navy-dark: #131c2e;
    --color-navy-bleak: #242f4e;
    --color-navy-bleak-light: #6b7588;
    --color-navy-bleak-extra-light: #7281a9;
    --color-blue: #648bef;
    --color-blue-dark: #3461d6;
    --color-sky: #a3bdff;
    --color-sky-light: #c4d5ff;
    --color-sky-extra-light: #e1eaff;
    --color-sand-dark: #7f7a6c;
    --color-sand-bleak: #d7d5d1;
    --color-sand: #e1dccc;
    --color-sand-light: #ebe8dd;
    --color-sand-extra-light: #f6f4ef;
    --color-snow: #e9e9e9;
    --color-green: #0fba9e;
    --color-green-dark: #157e6d;
    --color-green-light: #bae9e1;
    --color-green-extra-light: #e5f5f2;
    --color-red-dark: #993a37;
    --color-red: #ed5e58;
    --color-red-light: #f9d5d3;
    --color-red-extra-light: #fff0ef;
    --color-orange-dark: #996b37;
    --color-orange: #d68a34;
    --color-orange-bright: #eda758;
    --color-orange-light: #f9e7d3;
    --color-orange-extra-light: #fff8ef;
    --color-black: #000;
    --color-white: #fff;

    --color-indigo-50: #eef2ff;
    --color-indigo-100: #e0e7ff;
    --color-indigo-200: #c7d2fe;
    --color-indigo-300: #a5b4fc;
    --color-indigo-400: #818cf8;
    --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5;
    --color-indigo-700: #4338ca;
    --color-indigo-800: #3730a3;
    --color-indigo-900: #312e81;
    --color-indigo-950: #1e1b4b;

    --color-teal-50: #f0fdfa;
    --color-teal-100: #ccfbf1;
    --color-teal-200: #99f6e4;
    --color-teal-300: #5eead4;
    --color-teal-400: #2dd4bf;
    --color-teal-500: #14b8a6;
    --color-teal-600: #0d9488;
    --color-teal-700: #0f766e;
    --color-teal-800: #115e59;
    --color-teal-900: #134e4a;
    --color-teal-950: #042f2e;

    --color-yellow-50: #fffbeb;
    --color-yellow-100: #fef3c7;
    --color-yellow-200: #fde68a;
    --color-yellow-300: #fcd34d;
    --color-yellow-400: #fbbf24;
    --color-yellow-500: #f59e0b;
    --color-yellow-600: #d97706;
    --color-yellow-700: #b45309;
    --color-yellow-800: #92400e;
    --color-yellow-900: #78350f;
    --color-yellow-950: #451a03;

    --color-danger-50: #fff1f2;
    --color-danger-100: #ffe4e6;
    --color-danger-200: #fecdd3;
    --color-danger-300: #fda4af;
    --color-danger-400: #fb7185;
    --color-danger-500: #f43f5e;
    --color-danger-600: #e11d48;
    --color-danger-700: #be123c;
    --color-danger-800: #9f1239;
    --color-danger-900: #881337;
    --color-danger-950: #4c0519;

    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    --color-primary-950: #172554;

    --color-success-50: #ecfdf5;
    --color-success-100: #d1fae5;
    --color-success-200: #a7f3d0;
    --color-success-300: #6ee7b7;
    --color-success-400: #34d399;
    --color-success-500: #10b981;
    --color-success-600: #059669;
    --color-success-700: #047857;
    --color-success-800: #065f46;
    --color-success-900: #064e3b;
    --color-success-950: #022c22;

    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;
    --color-warning-300: #fcd34d;
    --color-warning-400: #fbbf24;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-warning-800: #92400e;
    --color-warning-900: #78350f;
    --color-warning-950: #451a03;

    --shadow-focus: 0 2px 2px #e5e3e1;
    --shadow-input: 0px 1px 1px 0px #bcb7a840;
    --shadow-card: 0px 0.9975153207778931px 2.194533586502075px 0px #534c3b1a;
    --shadow-buttons: 0px 0px 31px 0px #7f7a6c1a;
    --shadow-profile:
        0px 0.9975153207778931px 2.194533586502075px 0px #534c3b14,
        0px 3.3504464626312256px 7.3709821701049805px 0px #534c3b0c, 0px 15px 33px 0px #534c3b08;
    --shadow-dropdown:
        0px 0.9975153207778931px 2.194533586502075px 0px rgba(83, 76, 59, 0.08),
        0px 3.3504464626312256px 7.3709821701049805px 0px rgba(83, 76, 59, 0.05),
        0px 15px 33px 0px rgba(83, 76, 59, 0.03);

    --grid-template-columns-auto: auto;
    --grid-template-columns-auto-1fr: auto 1fr;
    --grid-template-columns-1fr-auto: 1fr auto;

    --inset-full: 100%;

    --height-13: 3.25rem;
    --height-2px: 2px;

    --min-height-4: 1rem;
    --min-height-6: 1.5rem;
    --min-height-8: 2rem;
    --min-height-9: 2.25rem;
    --min-height-10: 2.5rem;
    --min-height-13: 3.25rem;

    --min-width-4: 1rem;
    --min-width-6: 1.5rem;
    --min-width-8: 2rem;
    --min-width-10: 2.5rem;
    --min-width-32: 8rem;

    --container-layout: 1680px;

    --background-size-size-200: 200% 200%;

    --background-position-pos-0: 0% 0%;
    --background-position-pos-100: 100% 100%;

    --animate-scale: scale 300ms ease-in-out;

    @keyframes scale {
        0%,
        100% {
            transform: scale(1);
        }
        25% {
            transform: scale(1.05);
        }
        50% {
            transform: scale(1);
        }
        75% {
            transform: scale(1.05);
        }
    }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentcolor);
    }
}

@utility bg-pattern {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADoSURBVHgB7dyxEYJAEIbRhQrsQANnLMsa7AA7sAWrMjHQDqiAkzEyRuYY2Peii/gINv4jAAAAAAAAgG1qYqL383EeSrlF0/RttN3+eLpHRfrz9NuYaIjoxvvZRYnD90cq05+nP/kAopTdz7uP2vRn6f9xAM1lvL7X+OjHr1yjNv1l+wAAAAAAAAAAAAAAAADAIuwDJO/bB0jetw+QvG8fQB8AAAAAAAAAAAAAAAAAWBH7AMn79gGS9+0DJO/bB9AHAAAAAAAAAAAAAAAAAFbEPkDyvn2A5H37AMn79gH0AQAAAAAAgE36AG8Wn6ww5wczAAAAAElFTkSuQmCC');
    background-repeat: repeat;
}

@layer base {
    @font-face {
        font-family: 'Inter Fallback';
        size-adjust: 107%;
        ascent-override: 90%;
        src: local('Arial');
    }

    @font-face {
        font-family: 'Inter Tight Fallback';
        src: local(Arial);
        size-adjust: 101%;
        ascent-override: normal;
        descent-override: normal;
        line-gap-override: normal;
    }

    *,
    *:after,
    *:before {
        position: relative;
    }

    *:focus {
        outline: none !important;
    }

    strong {
        @apply font-semibold;
    }

    @keyframes alert-countdown {
        0% {
            transform: scaleX(0);
        }
        100% {
            transform: scaleX(1);
        }
    }
}

@layer utilities {
    [x-cloak] {
        display: none !important;
    }
}

/**
 * Highlighting
 */
pre,
code {
    @apply text-navy;
    background-color: #fff;
}

.hl-keyword {
    color: #d73a49;
}

.hl-property {
    color: #34a853;
}

.hl-attribute {
    font-style: italic;
}

.hl-type {
    color: #ea4334;
}

.hl-generic {
    color: #9d3af6;
}

.hl-value {
    color: #032f62;
}

.hl-variable {
    color: #e36209;
}

.hl-comment {
    color: #6a737d;
}

.hl-blur {
    filter: blur(2px);
}

.hl-strong {
    font-weight: bold;
}

.hl-em {
    font-style: italic;
}

.hl-addition {
    display: inline-block;
    min-width: 100%;
    background-color: #00ff0022;
}

.hl-deletion {
    display: inline-block;
    min-width: 100%;
    background-color: #ff000011;
}

.hl-gutter {
    display: inline-block;
    font-size: 0.9em;
    color: #555;
    padding: 0 1ch;
}

.hl-gutter-addition {
    background-color: #34a853;
    color: #fff;
}

.hl-gutter-deletion {
    background-color: #ea4334;
    color: #fff;
}

max-w-\[14rem\],
\!max-w-\[14rem\] {
    max-width: 14rem;
}