@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

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

@theme {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --color-zinc-50: #fafafa;
    --color-zinc-100: #f5f5f5;
    --color-zinc-200: #e5e5e5;
    --color-zinc-300: #d4d4d4;
    --color-zinc-400: #a3a3a3;
    --color-zinc-500: #737373;
    --color-zinc-600: #525252;
    --color-zinc-700: #404040;
    --color-zinc-800: #262626;
    --color-zinc-900: #171717;
    --color-zinc-950: #0a0a0a;

    --color-accent: var(--color-neutral-800);
    --color-accent-content: var(--color-neutral-800);
    --color-accent-foreground: var(--color-white);
}

@layer theme {
    .dark {
        --color-accent: var(--color-white);
        --color-accent-content: var(--color-white);
        --color-accent-foreground: var(--color-neutral-800);
    }
}

@layer base {
    html, body {
        font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        letter-spacing: -0.015em;
    }

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

[data-flux-field]:not(ui-radio, ui-checkbox) {
    @apply grid gap-1.5;
}

[data-flux-label],
ui-label[data-flux-label],
label {
    @apply !leading-tight !text-slate-800 font-bold text-xs tracking-normal block;
    margin-bottom: 8px;
}

input[data-flux-control],
select[data-flux-control],
textarea[data-flux-control],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="tel"],
input[type="number"],
input[type="search"] {
    @apply !border !border-slate-300 !bg-white !text-slate-900 placeholder:!text-slate-400 rounded-lg shadow-xs transition duration-150;
}

input[data-flux-control]:hover,
select[data-flux-control]:hover,
textarea[data-flux-control]:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="search"]:hover {
    @apply !border-slate-400;
}

input[data-flux-control]:focus,
select[data-flux-control]:focus,
textarea[data-flux-control]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus {
    @apply !border-teal-600 !ring-2 !ring-teal-500/25 !outline-hidden !bg-white;
}

select[data-flux-control] option {
    @apply bg-white text-slate-800;
}

/* Kill browser autofill grey/blue tint on all inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0f172a !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    background-color: #ffffff !important;
    caret-color: #0f172a;
}

/* Leaflet Popup Button Styling */
.leaflet-popup-content a,
.leaflet-popup-content a:hover,
.leaflet-popup-content a:visited,
.leaflet-popup-content a:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Force Flux Modal Dialogs to be crisp, clean white */
ui-modal,
[data-flux-modal],
dialog[data-flux-modal],
dialog.flux-modal,
.flux-modal {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

[data-flux-modal] [data-flux-heading] {
    color: #0f172a !important;
}

[data-flux-modal] [data-flux-subheading] {
    color: #64748b !important;
}

[data-flux-modal] [data-flux-close] {
    color: #94a3b8 !important;
}

[data-flux-modal] [data-flux-close]:hover {
    color: #334155 !important;
}