/* Force light rendering of native form controls regardless of the
   user's OS-level dark-mode preference. Without this, browsers on
   macOS/Windows in dark mode paint <input>, <textarea>, <select>,
   and the date-picker chrome with a dark UA background — while
   our explicit text-slate-900 classes keep the text dark, which
   produces unreadable black-on-near-black inputs.

   `color-scheme: light` is the canonical opt-out for this UA
   styling; it also keeps the <input type="datetime-local">
   picker readable, which has no Tailwind equivalent. The app is
   intentionally light-themed (data-theme="jdstudio" sets every
   surface to white), so this is consistent with the design. */
html { color-scheme: light; }

/* Defence-in-depth: any future <input> / <textarea> / <select>
   that forgets bg-white still gets a white surface and dark
   text. :where() keeps specificity at one element so explicit Tailwind
   utilities (bg-slate-100, etc.) still win, and we exclude
   control types that legitimately render outside the rect
   (checkbox/radio/file/range/color/buttons). */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"])),
textarea,
select {
    background-color: #ffffff;
    color: #0f172a; /* slate-900 */
}

/* Fix checkbox visibility - ensure checkmarks show */
[data-theme="jdstudio"] .checkbox:checked,
[data-theme="jdstudio"] .checkbox[checked="checked"] {
    background-image: linear-gradient(-45deg, transparent 65%, oklch(var(--bc)) 65.99%),
        linear-gradient(45deg, transparent 75%, oklch(var(--bc)) 75.99%),
        linear-gradient(-45deg, oklch(var(--bc)) 40%, transparent 40.99%),
        linear-gradient(45deg, oklch(var(--bc)) 30%, oklch(var(--pc)) 30.99%, oklch(var(--pc)) 40%, transparent 40.99%),
        linear-gradient(-45deg, oklch(var(--pc)) 50%, oklch(var(--bc)) 50.99%);
}
[data-theme="jdstudio"] .checkbox-primary:checked {
    border-color: oklch(var(--p));
    background-color: oklch(var(--p));
}
[data-theme="jdstudio"] .checkbox-secondary:checked {
    border-color: oklch(var(--s));
    background-color: oklch(var(--s));
}
[data-theme="jdstudio"] .checkbox-info:checked {
    border-color: oklch(var(--in));
    background-color: oklch(var(--in));
}
[data-theme="jdstudio"] .checkbox-warning:checked {
    border-color: oklch(var(--wa));
    background-color: oklch(var(--wa));
}
[data-theme="jdstudio"] .checkbox-accent:checked {
    border-color: oklch(var(--a));
    background-color: oklch(var(--a));
}
[data-theme="jdstudio"] .checkbox-success:checked {
    border-color: oklch(var(--su));
    background-color: oklch(var(--su));
}

/* Fix dropdown background */
[data-theme="jdstudio"] .dropdown-content {
    background-color: white;
}

/* Fix semantic background colors for progress bars and badges */
[data-theme="jdstudio"] .bg-base-200 {
    background-color: hsl(210 40% 96%);
}
[data-theme="jdstudio"] .bg-base-300 {
    background-color: hsl(210 40% 94%);
}
[data-theme="jdstudio"] .bg-success {
    background-color: hsl(160 84% 39%);
}
[data-theme="jdstudio"] .bg-warning {
    background-color: hsl(38 92% 50%);
}
[data-theme="jdstudio"] .bg-error {
    background-color: hsl(0 84% 60%);
}
[data-theme="jdstudio"] .bg-info {
    background-color: hsl(217 91% 60%);
}
[data-theme="jdstudio"] .bg-accent {
    background-color: hsl(199 89% 48%);
}
[data-theme="jdstudio"] .bg-primary {
    background-color: hsl(262 52% 48%);
}
[data-theme="jdstudio"] .bg-secondary {
    background-color: hsl(262 52% 48%);
}

/* Fix border colors for filter buttons */
[data-theme="jdstudio"] .border-base-200 {
    border-color: hsl(210 40% 96%);
}
[data-theme="jdstudio"] .border-base-300 {
    border-color: hsl(210 40% 90%);
}
[data-theme="jdstudio"] .border-success {
    border-color: hsl(160 84% 39%);
}
[data-theme="jdstudio"] .border-warning {
    border-color: hsl(38 92% 50%);
}
[data-theme="jdstudio"] .border-error {
    border-color: hsl(0 84% 60%);
}
[data-theme="jdstudio"] .border-info {
    border-color: hsl(217 91% 60%);
}
[data-theme="jdstudio"] .border-accent {
    border-color: hsl(199 89% 48%);
}
[data-theme="jdstudio"] .border-primary {
    border-color: hsl(262 52% 48%);
}

/* Fix ring colors for active filter buttons */
[data-theme="jdstudio"] .ring-success {
    --tw-ring-color: hsl(160 84% 39%);
}
[data-theme="jdstudio"] .ring-warning {
    --tw-ring-color: hsl(38 92% 50%);
}
[data-theme="jdstudio"] .ring-info {
    --tw-ring-color: hsl(217 91% 60%);
}
[data-theme="jdstudio"] .ring-accent {
    --tw-ring-color: hsl(199 89% 48%);
}
[data-theme="jdstudio"] .ring-primary {
    --tw-ring-color: hsl(262 52% 48%);
}

/* Fix background opacity variants for filter buttons */
[data-theme="jdstudio"] .bg-success\/10 {
    background-color: hsl(160 84% 39% / 0.1);
}
[data-theme="jdstudio"] .bg-success\/5 {
    background-color: hsl(160 84% 39% / 0.05);
}
[data-theme="jdstudio"] .bg-warning\/10 {
    background-color: hsl(38 92% 50% / 0.1);
}
[data-theme="jdstudio"] .bg-warning\/5 {
    background-color: hsl(38 92% 50% / 0.05);
}
[data-theme="jdstudio"] .bg-info\/10 {
    background-color: hsl(217 91% 60% / 0.1);
}
[data-theme="jdstudio"] .bg-info\/5 {
    background-color: hsl(217 91% 60% / 0.05);
}
[data-theme="jdstudio"] .bg-accent\/10 {
    background-color: hsl(199 89% 48% / 0.1);
}
[data-theme="jdstudio"] .bg-accent\/5 {
    background-color: hsl(199 89% 48% / 0.05);
}
[data-theme="jdstudio"] .bg-primary\/10 {
    background-color: hsl(262 52% 48% / 0.1);
}
[data-theme="jdstudio"] .bg-primary\/5 {
    background-color: hsl(262 52% 48% / 0.05);
}
[data-theme="jdstudio"] .bg-secondary\/10 {
    background-color: hsl(262 52% 48% / 0.1);
}
[data-theme="jdstudio"] .bg-secondary\/5 {
    background-color: hsl(262 52% 48% / 0.05);
}

/* Hover states for filter buttons */
[data-theme="jdstudio"] .hover\:border-success:hover {
    border-color: hsl(160 84% 39%);
}
[data-theme="jdstudio"] .hover\:border-warning:hover {
    border-color: hsl(38 92% 50%);
}
[data-theme="jdstudio"] .hover\:border-info:hover {
    border-color: hsl(217 91% 60%);
}
[data-theme="jdstudio"] .hover\:border-accent:hover {
    border-color: hsl(199 89% 48%);
}
[data-theme="jdstudio"] .hover\:border-secondary:hover {
    border-color: hsl(262 52% 48%);
}
[data-theme="jdstudio"] .hover\:border-primary:hover {
    border-color: hsl(262 52% 48%);
}
[data-theme="jdstudio"] .hover\:bg-success\/5:hover {
    background-color: hsl(160 84% 39% / 0.05);
}
[data-theme="jdstudio"] .hover\:bg-warning\/5:hover {
    background-color: hsl(38 92% 50% / 0.05);
}
[data-theme="jdstudio"] .hover\:bg-info\/5:hover {
    background-color: hsl(217 91% 60% / 0.05);
}
[data-theme="jdstudio"] .hover\:bg-accent\/5:hover {
    background-color: hsl(199 89% 48% / 0.05);
}
[data-theme="jdstudio"] .hover\:bg-secondary\/5:hover {
    background-color: hsl(262 52% 48% / 0.05);
}
[data-theme="jdstudio"] .hover\:bg-primary\/5:hover {
    background-color: hsl(262 52% 48% / 0.05);
}

/* Ring for secondary */
[data-theme="jdstudio"] .ring-secondary {
    --tw-ring-color: hsl(262 52% 48%);
}

/* Base styles */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography utilities */
.text-heading {
    letter-spacing: -0.025em;
}
.text-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

/* Card styling */
.card-elevated {
    background: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    transition: box-shadow 0.15s ease;
}
.card-elevated:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeIn 0.2s ease-out;
}

/* Group card */
.group-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.group-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Capacity indicators - subtle solid colors */
.capacity-good {
    background: #10b981;
}
.capacity-warning {
    background: #f59e0b;
}
.capacity-danger {
    background: #ef4444;
}

/* HTMX swap animations */
.htmx-swapping {
    opacity: 0;
    transform: scale(0.98);
    transition: all 0.15s ease-out;
}
.group-card-removed {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

/* Toast animation */
@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
#status-toast-container .toast {
    animation: toastSlideIn 0.2s ease-out;
}

/* Focus states */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #5746af;
}

/* Sidebar styling */
.sidebar-nav-item {
    transition: all 0.15s ease-out;
}

/* Mobile sidebar toggle - using :has() for checkbox state */
/* When checkbox is checked, show sidebar and overlay */
body:has(.sidebar-checkbox:checked) .sidebar {
    transform: translateX(0);
}
body:has(.sidebar-checkbox:checked) .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Hide scrollbar on sidebar but allow scrolling */
aside nav::-webkit-scrollbar {
    width: 4px;
}
aside nav::-webkit-scrollbar-track {
    background: transparent;
}
aside nav::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 2px;
}
aside nav::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Hide scrollbar but allow scrolling */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }