@import 'tailwindcss';

/*
Dark mode: own it, not inherit it.

With no `@custom-variant dark` declared, Tailwind v4 compiles every `dark:`
utility to `prefers-color-scheme: dark` — so the ~900 `dark:` classes already
in this codebase have been rendering an untested dark ERP for every OS-dark
user, while the `.dark` class toggle in dark-mode-toggle.blade.php did nothing
at all. Binding the variant to the class stops the OS-driven rendering the
moment this ships and makes the toggle the only thing that switches themes.
*/
@custom-variant dark (&:where(.dark, .dark *));

/*
Tenant brand tokens as Tailwind utilities.

`inline` matters: without it Tailwind copies the variable's value at build time,
so every tenant would get whatever colour happened to be in the build. With it
the utility emits `var(--brand-500)`, which the server-rendered `:root` block
in the layout fills in per tenant per request.
*/
@theme inline {
    --color-brand-50:  var(--brand-50);
    --color-brand-100: var(--brand-100);
    --color-brand-200: var(--brand-200);
    --color-brand-300: var(--brand-300);
    --color-brand-400: var(--brand-400);
    --color-brand-500: var(--brand-500);
    --color-brand-600: var(--brand-600);
    --color-brand-700: var(--brand-700);
    --color-brand-800: var(--brand-800);
    --color-brand-900: var(--brand-900);
    --color-brand-fg:  var(--brand-fg);

    --color-brand-accent: var(--brand-accent);
    --color-brand-success: var(--brand-success);
    --color-brand-warning: var(--brand-warning);
    --color-brand-danger:  var(--brand-danger);
}

/*
Dynamic status badge colors used via Blade interpolation — Tailwind scanner needs
these as complete strings to include them in the build output:
bg-red-100 bg-red-50 text-red-600 text-red-700 border-red-200
bg-green-100 bg-green-50 text-green-600 text-green-700 border-green-200
bg-blue-100 bg-blue-50 text-blue-600 text-blue-700 border-blue-200
bg-amber-100 bg-amber-50 text-amber-600 text-amber-700 border-amber-200
bg-yellow-100 bg-yellow-50 text-yellow-600 text-yellow-700 border-yellow-200
bg-purple-100 bg-purple-50 text-purple-600 text-purple-700 border-purple-200
bg-gray-100 bg-gray-50 text-gray-600 text-gray-700 border-gray-200
bg-emerald-100 bg-emerald-50 text-emerald-600 text-emerald-700 border-emerald-200
bg-orange-100 bg-orange-50 text-orange-600 text-orange-700 border-orange-200
bg-indigo-100 bg-indigo-50 text-indigo-600 text-indigo-700 border-indigo-200
bg-teal-100 bg-teal-50 text-teal-600 text-teal-700 border-teal-200
bg-cyan-100 bg-cyan-50 text-cyan-600 text-cyan-700 border-cyan-200
bg-pink-100 bg-pink-50 text-pink-600 text-pink-700 border-pink-200
bg-red-500 bg-green-500 bg-blue-500 bg-amber-500 bg-purple-500
h-full
hover:border-cyan-300 hover:border-pink-300 hover:border-orange-300 hover:border-teal-300
*/

@theme {
    --color-surface-field: oklch(0.98 0.008 145);
    --color-surface-pool: oklch(0.97 0.012 220);
    --color-surface-court: oklch(0.97 0.008 65);
    --color-surface-neutral: oklch(0.98 0.003 260);
    --color-boundary-field: oklch(0.75 0.06 150);
    --color-boundary-pool: oklch(0.70 0.08 230);
    --color-boundary-court: oklch(0.72 0.05 55);
    --color-boundary-neutral: oklch(0.78 0.01 260);
    --color-line-field: oklch(0.90 0.015 145);
    --color-line-pool: oklch(0.88 0.02 220);
    --color-line-court: oklch(0.88 0.015 60);
    --color-line-neutral: oklch(0.90 0.005 260);
}

@layer components {
    .facility-surface {
        display: grid;
        gap: 0;
        border-radius: 0.75rem;
        overflow: hidden;
        border: 2px solid var(--surface-boundary);
        background: var(--surface-bg);
        --surface-line: var(--color-line-neutral);
        --surface-bg: var(--color-surface-neutral);
        --surface-boundary: var(--color-boundary-neutral);
    }

    .facility-surface > * {
        border-color: var(--surface-line);
        min-height: 0;
    }

    .facility-surface--field,
    .facility-surface--outdoor,
    .facility-surface--track {
        --surface-bg: var(--color-surface-field);
        --surface-boundary: var(--color-boundary-field);
        --surface-line: var(--color-line-field);
    }

    .facility-surface--pool {
        --surface-bg: var(--color-surface-pool);
        --surface-boundary: var(--color-boundary-pool);
        --surface-line: var(--color-line-pool);
    }

    .facility-surface--court {
        --surface-bg: var(--color-surface-court);
        --surface-boundary: var(--color-boundary-court);
        --surface-line: var(--color-line-court);
    }

    .facility-surface--gym,
    .facility-surface--hall,
    .facility-surface--room,
    .facility-surface--other {
        --surface-bg: var(--color-surface-neutral);
        --surface-boundary: var(--color-boundary-neutral);
        --surface-line: var(--color-line-neutral);
    }

    .facility-surface--lanes {
        display: flex;
        flex-direction: column;
    }

    .facility-surface--lanes > *:not(:last-child) {
        border-bottom: 2px dashed var(--surface-line);
    }

    .facility-cell--unavailable {
        background-image: repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 5px,
            oklch(0.5 0 0 / 0.08) 5px,
            oklch(0.5 0 0 / 0.08) 6px
        );
    }

    .facility-cell--occupied {
        background-image: repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 6px,
            oklch(0.6 0.15 25 / 0.08) 6px,
            oklch(0.6 0.15 25 / 0.08) 7px
        );
    }

    .facility-cell--selected {
        background-color: oklch(0.92 0.06 250) !important;
        box-shadow: inset 0 0 0 2px oklch(0.60 0.18 250 / 0.6);
    }

    .facility-cell--drop-target {
        background-color: oklch(0.92 0.06 155) !important;
        box-shadow: inset 0 0 0 2px oklch(0.55 0.15 155 / 0.6);
        animation: pulse-drop 1s ease-in-out infinite;
    }

    @keyframes pulse-drop {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
}

@layer base {
    html {
        direction: rtl;
        scroll-behavior: smooth;
        -webkit-tap-highlight-color: transparent;
    }

    /* Touch-friendly minimum heights */
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 44px;
    }

    /* Universal button/link press feedback */
    button:not(:disabled),
    [role="button"],
    a[href],
    summary {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    button:not(:disabled):active,
    [role="button"]:active,
    a[href]:active,
    summary:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }

    /* Prevent stuck hover on touch devices */
    @media (hover: none) {
        button:hover,
        a:hover {
            background-color: inherit;
        }
    }
}

@layer utilities {
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .safe-top {
        padding-top: env(safe-area-inset-top, 0px);
    }
    /* Press feedback utility — stronger scale for primary actions */
    .press-feedback:active {
        transform: scale(0.95) !important;
        opacity: 0.9;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
}

/* Print: hide all app chrome */
@media print {
    aside, nav, header, .no-print, [data-topbar], .print\:hidden {
        display: none !important;
    }
    main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    body {
        background: white !important;
    }
    .lg\:ms-64 {
        margin-inline-start: 0 !important;
    }
}
