@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: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --color-zinc-50: var(--color-stone-50);
    --color-zinc-100: var(--color-stone-100);
    --color-zinc-200: var(--color-stone-200);
    --color-zinc-300: var(--color-stone-300);
    --color-zinc-400: var(--color-stone-400);
    --color-zinc-500: var(--color-stone-500);
    --color-zinc-600: var(--color-stone-600);
    --color-zinc-700: var(--color-stone-700);
    --color-zinc-800: var(--color-stone-800);
    --color-zinc-900: var(--color-stone-900);
    --color-zinc-950: var(--color-stone-950);

    --color-accent: var(--color-stone-800);
    --color-accent-content: var(--color-stone-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); */

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

@layer base {

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

[data-flux-field] {
    @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;
}
button {
    cursor: pointer;
}

button {
    cursor: pointer;
}

.block-info a {
    @apply text-accent-content;
    position: relative;
    padding-right: 1.5rem;
}

.block-info a::after {
    content: "\2192"; /* Right arrow symbol as default icon */
    position: absolute;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    opacity: 0.8;
    transition: transform 0.15s ease-in-out;
}

.block-info a:hover::after {
    transform: translateX(2px);
    opacity: 1;
}

/* \[:where(&)\]:size-4 {
    @apply size-4;
} */
 
@layer utilities {
  /* Chrome, Safari and Opera */
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hidden {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
}

/* CKEditor Editor Area */
.ck-editor__editable {
    border-radius: 0 0 8px 8px !important; /* Rounded corners for top */
}

.dark .ck-editor__editable {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-zinc-50) !important; /* Light text for readability */
    border: 1px solid var(--color-zinc-700) !important; /* Subtle border */
    border-radius: 0 0 8px 8px !important; /* Rounded corners for top */
}

.ck.ck-toolbar {
    border-radius: 8px 8px 0 0 !important;
}

.dark .ck.ck-toolbar {
    background-color: var(--color-zinc-800) !important; /* Dark toolbar */
    border: 1px solid var(--color-zinc-700) !important;
}

/* CKEditor Buttons */
.dark .ck.ck-button {
    background-color: transparent !important;
    color: var(--color-zinc-50) !important;
}

.dark .ck.ck-button:hover,
.dark .ck.ck-button:focus {
    background-color: var(--color-zinc-700) !important; /* Subtle hover effect */
}

/* CKEditor Dropdowns and Popups */
.dark .ck.ck-dropdown__panel,
.dark .ck.ck-balloon-panel {
    background-color: var(--color-zinc-800) !important;
    border: 1px solid var(--color-zinc-700) !important;
    color: var(--color-zinc-50) !important;
}

/* CKEditor Inputs */
.dark .ck.ck-input {
    background-color: var(--color-zinc-700) !important;
    color: var(--color-zinc-50) !important;
    border: 1px solid var(--color-zinc-600) !important;
}

.dark .ck.ck-list {
    background-color: var(--color-zinc-700) !important;
}

.dark .ck.ck-toolbar__separator {
    background-color: var(--color-zinc-700) !important;
}

/* Selection inside Editor */
.dark .ck-content ::selection {
    background-color: var(--color-zinc-700) !important;
    color: var(--color-zinc-50) !important;
}

/* CKEditor Links */
.dark .ck-content a {
    color: var(--color-accent-foreground) !important;
    text-decoration: underline;
}

.ck.ck-sticky-panel__content {
    /* border: none !important; */
    border-radius: 8px 8px 0 0 !important;
}

.dark .ck.ck-sticky-panel__content {
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
}

.ck.ck-powered-by {
    background-color: var(--color-zinc-50) !important;
    border-radius: 6px !important;
    display: none !important;
}


/* CKEditor Dialog (Modal) */
.dark .ck.ck-dialog {
    background-color: var(--color-zinc-800) !important; /* Matches dark mode */
    color: var(--color-zinc-50) !important;
    border: 1px solid var(--color-zinc-700) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important; /* Soft shadow */
}

/* CKEditor Dialog Header */
.dark .ck.ck-dialog .ck.ck-form__header__label {
    color: var(--color-zinc-50) !important;
}
.dark .ck.ck-dialog .ck.ck-form__header {
    border-bottom: 1px solid var(--color-zinc-700) !important;
}

/* CKEditor Dialog Footer */
.dark .ck.ck-dialog .ck.ck-dialog__footer {
    background-color: var(--color-zinc-900) !important;
    border-top: 1px solid var(--color-zinc-700) !important;
}

.ck.ck-label {
    display: none !important;
}