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

/* Range slider styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    touch-action: manipulation;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #3B82F6;
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #334155;
    border-radius: 2px;
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 0 8px rgba(59, 130, 246, 0.3);
}

/* Firefox slider */
input[type="range"]::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #3B82F6;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: #334155;
    border-radius: 2px;
    border: none;
}

/* HTMX loading indicator */
.htmx-request #results-panel {
    opacity: 0.5;
    transition: opacity 150ms;
    pointer-events: none;
}

/* Chart container — ensure canvas fills its container */
[data-chart] canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Prevent bounce scroll on iOS */
.overscroll-contain {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Search field pulse — draws attention on initial load */
@keyframes searchPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}

.search-pulse {
    animation: searchPulse 2s ease-in-out infinite;
}

/* -----------------------------------------------------------------------
   Light / Soft mode colour fixes
   ----------------------------------------------------------------------- */

/* Force white text on coloured button backgrounds in light/soft mode.
   Templates use `text-slate-900 dark:text-white` — the dark: variant only applies
   in dark mode, leaving black text on blue backgrounds otherwise. */
html:not(.dark) .bg-blue-500,
html:not(.dark) .bg-blue-600,
html:not(.dark) .bg-blue-700,
html:not(.dark) .bg-emerald-500,
html:not(.dark) .bg-emerald-600,
html:not(.dark) .bg-red-500,
html:not(.dark) .bg-red-600,
html:not(.dark) .bg-purple-500,
html:not(.dark) .bg-purple-600,
html:not(.dark) .bg-amber-500 {
    color: #fff !important;
}

/* Force readable text for utility classes that are invisible on light backgrounds */
html:not(.dark) .text-slate-200 { color: #475569 !important; }
html:not(.dark) .text-slate-300 { color: #475569 !important; }

/* Light mode scrollbar */
html:not(.dark) ::-webkit-scrollbar-thumb {
    background: #CBD5E1;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* -----------------------------------------------------------------------
   Mobile responsive fixes
   ----------------------------------------------------------------------- */

/* Ensure tables scroll horizontally on small screens */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

.overflow-x-auto table {
    min-width: 600px;
}

/* Charts: prevent overflow beyond viewport */
[data-chart] {
    max-width: 100%;
    overflow: hidden;
}

/* Footer grid: 2-col on mobile, 4-col on md+ (already via Tailwind) */

/* Tighten padding on very small screens */
@media (max-width: 480px) {
    main {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Summary cards: slightly smaller text */
    .grid .text-lg {
        font-size: 1rem;
    }

    /* Tables: smaller font on mobile */
    .overflow-x-auto table {
        font-size: 0.65rem;
    }

    /* Chart containers: ensure minimum usable height */
    [data-chart] {
        min-height: 200px;
    }
}

@media (max-width: 640px) {
    /* Removed scroll-hint shadow — caused visual glitch on kanban scroll */

    /* Chart containers: readable minimum height */
    [data-chart] {
        min-height: 200px;
    }

    /* Nav mobile menu: ensure items are tappable */
    .lg\\:hidden a,
    .lg\\:hidden button {
        min-height: 36px;
    }

    /* Footer: tighter spacing */
    footer .grid {
        gap: 1rem;
    }
}