@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none;
}

@layer base {
    .dark {
        color-scheme: dark;
    }

    .dark select,
    .dark textarea,
    .dark input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']) {
        @apply border-gray-600 bg-gray-800 text-gray-100;
        color-scheme: dark;
    }

    .dark select:focus,
    .dark textarea:focus,
    .dark input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']):focus {
        @apply border-diary-teal ring-diary-teal;
    }

    .dark select option {
        @apply bg-gray-800 text-gray-100;
    }

    .dark textarea::placeholder,
    .dark input::placeholder {
        @apply text-gray-400;
    }

    /*
     | Authenticated shell: Jetstream/product pages often use light-mode gray
     | utilities without dark: variants. Remap those inside .app-shell so text
     | and surfaces stay readable. Buttons keep their own classes.
     */
    .dark .app-shell :where(:not(button)):where(.text-gray-900),
    .dark .app-shell :where(:not(button)):where(.text-gray-800) {
        color: theme('colors.gray.100');
    }

    .dark .app-shell :where(:not(button)):where(.text-gray-700) {
        color: theme('colors.gray.200');
    }

    .dark .app-shell :where(:not(button)):where(.text-gray-600) {
        color: theme('colors.gray.300');
    }

    .dark .app-shell :where(:not(button)):where(.text-gray-500) {
        color: theme('colors.gray.400');
    }

    .dark .app-shell :where(:not(button)):where(.text-gray-400) {
        color: theme('colors.gray.400');
    }

    .dark .app-shell :where(.bg-white) {
        background-color: theme('colors.gray.900');
    }

    .dark .app-shell :where(.bg-gray-50),
    .dark .app-shell :where(.bg-gray-100),
    .dark .app-shell :where(.bg-gray-200) {
        background-color: theme('colors.gray.800');
    }

    .dark .app-shell :where(.border-gray-100),
    .dark .app-shell :where(.border-gray-200),
    .dark .app-shell :where(.border-gray-300) {
        border-color: theme('colors.gray.700');
    }

    .dark .app-shell :where(.divide-gray-100) > :not([hidden]) ~ :not([hidden]),
    .dark .app-shell :where(.divide-gray-200) > :not([hidden]) ~ :not([hidden]) {
        border-color: theme('colors.gray.700');
    }

    .dark .app-shell :where(.hover\:bg-gray-50):hover,
    .dark .app-shell :where(.hover\:bg-gray-100):hover {
        background-color: theme('colors.gray.800');
    }

    .dark .app-shell :where(.hover\:text-gray-700):hover,
    .dark .app-shell :where(.hover\:text-gray-800):hover,
    .dark .app-shell :where(.hover\:text-gray-900):hover {
        color: theme('colors.gray.100');
    }

    .dark .app-shell :where(.text-indigo-600) {
        color: theme('colors.diary.cyan');
    }

    .dark .app-shell :where(.hover\:text-indigo-800):hover,
    .dark .app-shell :where(.hover\:text-indigo-900):hover {
        color: theme('colors.white');
    }

    .dark .app-shell :where(.text-diary-ink) {
        color: theme('colors.diary.mist');
    }

    .dark .app-shell :where(.text-diary-teal) {
        color: theme('colors.diary.cyan');
    }

    .dark .app-shell :where(.hover\:text-diary-teal-deep):hover {
        color: theme('colors.white');
    }
}

/*
 | Sandbox chrome: fixed top/bottom bars when APP_ENV is not production.
 | Rendered from resources/views/components/sandbox-chrome.blade.php.
 */
html.sandbox-mode {
    --sandbox-bar-height: 1.5rem;
}

html.sandbox-mode body {
    padding-top: var(--sandbox-bar-height);
    padding-bottom: var(--sandbox-bar-height);
}

.sandbox-bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    height: var(--sandbox-bar-height);
    align-items: center;
    overflow: hidden;
    background-color: #f59e0b;
    color: #1c1917;
    pointer-events: none;
    user-select: none;
}

.sandbox-bar--top {
    top: 0;
    border-bottom: 1px solid rgb(0 0 0 / 0.12);
}

.sandbox-bar--bottom {
    bottom: 0;
    border-top: 1px solid rgb(0 0 0 / 0.12);
}

.sandbox-bar__track {
    display: flex;
    width: 100%;
    justify-content: space-around;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

html.sandbox-mode .sticky.top-0,
html.sandbox-mode .lg\:sticky {
    top: var(--sandbox-bar-height);
}

html.sandbox-mode .min-h-screen {
    min-height: calc(100vh - (var(--sandbox-bar-height) * 2));
}

html.sandbox-mode .h-screen,
html.sandbox-mode .lg\:h-screen {
    height: calc(100vh - (var(--sandbox-bar-height) * 2));
}

@layer components {
    .form-control {
        @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-diary-teal focus:ring-diary-teal dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400;
    }

    .marketing-grid {
        background-image:
            linear-gradient(rgba(11, 26, 43, 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(11, 26, 43, 0.04) 1px, transparent 1px);
        background-size: 48px 48px;
    }

    .marketing-reveal {
        opacity: 0;
        transform: translateY(1.5rem);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .marketing-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}