@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
@import "flatpickr/dist/flatpickr.min.css";
@import '../../vendor/wireui/wireui/ts/global.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';
@source '../../vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php';
@source '../../vendor/power-components/livewire-powergrid/resources/views/**/*.php';
@source '../../vendor/wireui/wireui';

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

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --color-pg-primary-50: oklch(0.985 0 0);
    --color-pg-primary-100: oklch(0.97 0 0);
    --color-pg-primary-200: oklch(0.922 0 0);
    --color-pg-primary-300: oklch(0.87 0 0);
    --color-pg-primary-400: oklch(0.708 0 0);
    --color-pg-primary-500: oklch(0.556 0 0);
    --color-pg-primary-600: oklch(0.439 0 0);
    --color-pg-primary-700: oklch(0.371 0 0);
    --color-pg-primary-800: oklch(0.269 0 0);
    --color-pg-primary-900: oklch(0.205 0 0);
    --color-pg-primary-950: oklch(0.145 0 0);

    --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 {

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

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

[data-flux-label] {
    @apply  !mb-0 !leading-tight;
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}

/* \[:where(&)\]:size-4 {
    @apply size-4;
} */
.pg-toggle {
    @apply bg-gray-300; /* default background */
}

.pg-toggle[data-state="on"] {
    background-color: #22c55e !important; /* your green */
}

.pg-toggle[data-state="off"] {
    background-color: #ef4444 !important; /* your red */
}

.rich-text {
    font-size: 0.875rem;
    color: #374151;
}

.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.25;
}

.rich-text h1 { font-size: 2.25rem; }
.rich-text h2 { font-size: 1.875rem; }
.rich-text h3 { font-size: 1.5rem; }
.rich-text h4 { font-size: 1.25rem; }
.rich-text h5 { font-size: 1.125rem; }
.rich-text h6 { font-size: 1rem; }

.rich-text p {
    margin: 1em 0;
}

.rich-text strong {
    font-weight: 700;
}

.rich-text em {
    font-style: italic;
}

.rich-text u {
    text-decoration: underline;
}

.rich-text a {
    color: #2563eb; /* text-blue-600 */
    text-decoration: underline;
}

.rich-text ul,
.rich-text ol {
    margin: 1em 0;
    padding-left: 1.25rem;
}

.rich-text ul li {
    list-style-type: disc;
    margin: 0.25em 0;
}

.rich-text ol li {
    list-style-type: decimal;
    margin: 0.25em 0;
}

.rich-text blockquote {
    border-left: 4px solid #d1d5db; /* gray-300 */
    padding-left: 1rem;
    color: #6b7280; /* gray-500 */
    font-style: italic;
    margin: 1em 0;
}

.rich-text img {
    max-width: 100%;
    height: auto;
}

.rich-text code {
    background-color: #f3f4f6; /* gray-100 */
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: monospace;
}

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

.pg-saved-filters-toolbar {
    position: relative;
}

.pg-saved-filters-toolbar + div[style*="float: right"],
.pg-saved-filters-toolbar + div[class*="float-right"] {
    margin-left: auto;
}

.pg-filter-actions {
    position: relative;
    z-index: 60;
    isolation: isolate;
    align-self: flex-end;
}

[data-pg-status-filter] {
    align-self: flex-start;
}

[data-pg-status-dropdown] {
    isolation: isolate;
    background-color: #fff;
}

.pg-status-filter-field {
    margin-top: -2px;
}

.pg-status-filter-panel {
    max-height: 21rem;
}

.pg-filter-button-active {
    border-color: var(--color-zinc-500) !important;
    background-color: var(--color-zinc-50) !important;
    color: var(--color-zinc-700) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-zinc-300) 45%, transparent) !important;
}

.pg-resizable-column,
.pg-resizable-column-host {
    position: relative;
}

.pg-column-resizer {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    z-index: 20;
}

.pg-column-resizer::after {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.pg-resizable-column-host:hover .pg-column-resizer::after,
.pg-resizable-column:hover .pg-column-resizer::after,
.pg-column-resizing .pg-column-resizer::after {
    background-color: var(--color-zinc-300);
}

.pg-column-resizing,
.pg-column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}