@import "tailwindcss";
@import "../../vendor/livewire/flux/dist/flux.css";

/* =========================================================
   🌈 GLOBAL THEME COLORS
   ========================================================= */
:root {
    /* 🧁 Cream */
    --color-cream-50: #fffdfa !important;
    --color-cream-100: #fff7ed !important;
    --color-cream-200: #ffefdb !important;
    --color-cream-300: #ffe2b9 !important;
    --color-cream-400: #ffd18f !important;
    --color-cream-500: #ffbf65 !important;
    --color-cream-600: #e6a94f !important;
    --color-cream-700: #b8853e !important;
    --color-cream-800: #8a6330 !important;
    --color-cream-900: #5f4522 !important;
    --color-cream-950: #3c2a15 !important;

    /* ☕ Brown */
    --color-brown-50: #fdf8f6 !important;
    --color-brown-100: #f5e8e1 !important;
    --color-brown-200: #e7cfc0 !important;
    --color-brown-300: #d1aa90 !important;
    --color-brown-400: #b37b5d !important;
    --color-brown-500: #965737 !important;
    --color-brown-600: #7c4328 !important;
    --color-brown-700: #62341f !important;
    --color-brown-800: #4a2718 !important;
    --color-brown-900: #2e180f !important;
    --color-brown-950: #1a0e08 !important;

    /* 🩵 Info */
    --color-info-50: #eff6ff !important;
    --color-info-100: #dbeafe !important;
    --color-info-200: #bfdbfe !important;
    --color-info-300: #93c5fd !important;
    --color-info-400: #60a5fa !important;
    --color-info-500: #3b82f6 !important;
    --color-info-600: #2563eb !important;
    --color-info-700: #1d4ed8 !important;
    --color-info-800: #1e40af !important;
    --color-info-900: #1e3a8a !important;

    /* 🔥 Danger */
    --color-danger-50: #fff1f2 !important;
    --color-danger-100: #ffe4e6 !important;
    --color-danger-200: #fecdd3 !important;
    --color-danger-300: #fda4af !important;
    --color-danger-400: #fb7185 !important;
    --color-danger-500: #f43f5e !important;
    --color-danger-600: #e11d48 !important;
    --color-danger-700: #be123c !important;
    --color-danger-800: #9f1239 !important;
    --color-danger-900: #881337 !important;

    /* ⚡ Warning */
    --color-warning-50: #fffbeb !important;
    --color-warning-100: #fef3c7 !important;
    --color-warning-200: #fde68a !important;
    --color-warning-300: #fcd34d !important;
    --color-warning-400: #fbbf24 !important;
    --color-warning-500: #f59e0b !important;
    --color-warning-600: #d97706 !important;
    --color-warning-700: #b45309 !important;
    --color-warning-800: #92400e !important;
    --color-warning-900: #78350f !important;
}

/* 🌙 Optional Dark Mode */
.dark {
    --color-cream-50: #1a0e08 !important;
    --color-cream-900: #fffdfa !important;
    --color-brown-500: #d1aa90 !important;
    --color-brown-900: #f5e8e1 !important;
}

/* =========================================================
   🧩 CUSTOM COLOR UTILITIES (Tailwind-style)
   ========================================================= */
@layer utilities {
    /* 🧁 Cream */
    .bg-cream-50 {
        background-color: var(--color-cream-50) !important;
    }
    .bg-cream-100 {
        background-color: var(--color-cream-100) !important;
    }
    .bg-cream-200 {
        background-color: var(--color-cream-200) !important;
    }
    .bg-cream-300 {
        background-color: var(--color-cream-300) !important;
    }
    .bg-cream-400 {
        background-color: var(--color-cream-400) !important;
    }
    .bg-cream-500 {
        background-color: var(--color-cream-500) !important;
    }
    .bg-cream-600 {
        background-color: var(--color-cream-600) !important;
    }
    .bg-cream-700 {
        background-color: var(--color-cream-700) !important;
    }
    .bg-cream-800 {
        background-color: var(--color-cream-800) !important;
    }
    .bg-cream-900 {
        background-color: var(--color-cream-900) !important;
    }

    .text-cream-50 {
        color: var(--color-cream-50) !important;
    }
    .text-cream-100 {
        color: var(--color-cream-100) !important;
    }
    .text-cream-200 {
        color: var(--color-cream-200) !important;
    }
    .text-cream-300 {
        color: var(--color-cream-300) !important;
    }
    .text-cream-400 {
        color: var(--color-cream-400) !important;
    }
    .text-cream-500 {
        color: var(--color-cream-500) !important;
    }
    .text-cream-600 {
        color: var(--color-cream-600) !important;
    }
    .text-cream-700 {
        color: var(--color-cream-700) !important;
    }
    .text-cream-800 {
        color: var(--color-cream-800) !important;
    }
    .text-cream-900 {
        color: var(--color-cream-900) !important;
    }

    .border-cream-50 {
        border-color: var(--color-cream-50) !important;
    }
    .border-cream-100 {
        border-color: var(--color-cream-100) !important;
    }
    .border-cream-200 {
        border-color: var(--color-cream-200) !important;
    }
    .border-cream-300 {
        border-color: var(--color-cream-300) !important;
    }
    .border-cream-400 {
        border-color: var(--color-cream-400) !important;
    }
    .border-cream-500 {
        border-color: var(--color-cream-500) !important;
    }
    .border-cream-600 {
        border-color: var(--color-cream-600) !important;
    }
    .border-cream-700 {
        border-color: var(--color-cream-700) !important;
    }
    .border-cream-800 {
        border-color: var(--color-cream-800) !important;
    }
    .border-cream-900 {
        border-color: var(--color-cream-900) !important;
    }

    /* ☕ Brown */
    .bg-brown-50 {
        background-color: var(--color-brown-50) !important;
    }
    .bg-brown-100 {
        background-color: var(--color-brown-100) !important;
    }
    .bg-brown-200 {
        background-color: var(--color-brown-200) !important;
    }
    .bg-brown-300 {
        background-color: var(--color-brown-300) !important;
    }
    .bg-brown-400 {
        background-color: var(--color-brown-400) !important;
    }
    .bg-brown-500 {
        background-color: var(--color-brown-500) !important;
    }
    .bg-brown-600 {
        background-color: var(--color-brown-600) !important;
    }
    .bg-brown-700 {
        background-color: var(--color-brown-700) !important;
    }
    .bg-brown-800 {
        background-color: var(--color-brown-800) !important;
    }
    .bg-brown-900 {
        background-color: var(--color-brown-900) !important;
    }

    .border-brown-50 {
        border-color: var(--color-brown-50) !important;
    }
    .border-brown-100 {
        border-color: var(--color-brown-100) !important;
    }
    .border-brown-200 {
        border-color: var(--color-brown-200) !important;
    }
    .border-brown-300 {
        border-color: var(--color-brown-300) !important;
    }
    .border-brown-400 {
        border-color: var(--color-brown-400) !important;
    }
    .border-brown-500 {
        border-color: var(--color-brown-500) !important;
    }
    .border-brown-600 {
        border-color: var(--color-brown-600) !important;
    }
    .border-brown-700 {
        border-color: var(--color-brown-700) !important;
    }
    .border-brown-800 {
        border-color: var(--color-brown-800) !important;
    }
    .border-brown-900 {
        border-color: var(--color-brown-900) !important;
    }

    .text-brown-50 {
        color: var(--color-brown-50) !important;
    }
    .text-brown-100 {
        color: var(--color-brown-100) !important;
    }
    .text-brown-200 {
        color: var(--color-brown-200) !important;
    }
    .text-brown-300 {
        color: var(--color-brown-300) !important;
    }
    .text-brown-400 {
        color: var(--color-brown-400) !important;
    }
    .text-brown-500 {
        color: var(--color-brown-500) !important;
    }
    .text-brown-600 {
        color: var(--color-brown-600) !important;
    }
    .text-brown-700 {
        color: var(--color-brown-700) !important;
    }
    .text-brown-800 {
        color: var(--color-brown-800) !important;
    }
    .text-brown-900 {
        color: var(--color-brown-900) !important;
    }
    .text-brown-950 {
        color: var(--color-brown-950) !important;
    }

    .ring-brown-50 {
        --tw-ring-color: var(--color-brown-50) !important;
    }
    .ring-brown-100 {
        --tw-ring-color: var(--color-brown-100) !important;
    }
    .ring-brown-200 {
        --tw-ring-color: var(--color-brown-200) !important;
    }
    .ring-brown-300 {
        --tw-ring-color: var(--color-brown-300) !important;
    }
    .ring-brown-400 {
        --tw-ring-color: var(--color-brown-400) !important;
    }
    .ring-brown-500 {
        --tw-ring-color: var(--color-brown-500) !important;
    }
    .ring-brown-600 {
        --tw-ring-color: var(--color-brown-600) !important;
    }
    .ring-brown-700 {
        --tw-ring-color: var(--color-brown-700) !important;
    }
    .ring-brown-800 {
        --tw-ring-color: var(--color-brown-800) !important;
    }
    .ring-brown-900 {
        --tw-ring-color: var(--color-brown-900) !important;
    }
    .ring-brown-950 {
        --tw-ring-color: var(--color-brown-950) !important;
    }

    /* ☕ primary */
    .bg-primary-50 {
        background-color: var(--color-brown-50) !important;
    }
    .bg-primary-100 {
        background-color: var(--color-brown-100) !important;
    }
    .bg-primary-200 {
        background-color: var(--color-brown-200) !important;
    }
    .bg-primary-300 {
        background-color: var(--color-brown-300) !important;
    }
    .bg-primary-400 {
        background-color: var(--color-brown-400) !important;
    }
    .bg-primary-500 {
        background-color: var(--color-brown-500) !important;
    }
    .bg-primary-600 {
        background-color: var(--color-brown-600) !important;
    }
    .bg-primary-700 {
        background-color: var(--color-brown-700) !important;
    }
    .bg-primary-800 {
        background-color: var(--color-brown-800) !important;
    }
    .bg-primary-900 {
        background-color: var(--color-brown-900) !important;
    }

    .border-primary-50 {
        border-color: var(--color-brown-50) !important;
    }
    .border-primary-100 {
        border-color: var(--color-brown-100) !important;
    }
    .border-primary-200 {
        border-color: var(--color-brown-200) !important;
    }
    .border-primary-300 {
        border-color: var(--color-brown-300) !important;
    }
    .border-primary-400 {
        border-color: var(--color-brown-400) !important;
    }
    .border-primary-500 {
        border-color: var(--color-brown-500) !important;
    }
    .border-primary-600 {
        border-color: var(--color-brown-600) !important;
    }
    .border-primary-700 {
        border-color: var(--color-brown-700) !important;
    }
    .border-primary-800 {
        border-color: var(--color-brown-800) !important;
    }
    .border-primary-900 {
        border-color: var(--color-brown-900) !important;
    }

    .text-primary-50 {
        color: var(--color-brown-50) !important;
    }
    .text-primary-100 {
        color: var(--color-brown-100) !important;
    }
    .text-primary-200 {
        color: var(--color-brown-200) !important;
    }
    .text-primary-300 {
        color: var(--color-brown-300) !important;
    }
    .text-primary-400 {
        color: var(--color-brown-400) !important;
    }
    .text-primary-500 {
        color: var(--color-brown-500) !important;
    }
    .text-primary-600 {
        color: var(--color-brown-600) !important;
    }
    .text-primary-700 {
        color: var(--color-brown-700) !important;
    }
    .text-primary-800 {
        color: var(--color-brown-800) !important;
    }
    .text-primary-900 {
        color: var(--color-brown-900) !important;
    }
    /* 🩵 Info */
    .bg-info-500 {
        background-color: var(--color-info-500) !important;
    }
    .text-info-500 {
        color: var(--color-info-500) !important;
    }
    .border-info-500 {
        border-color: var(--color-info-500) !important;
    }

    /* 🔥 Danger */
    .bg-danger-500 {
        background-color: var(--color-danger-500) !important;
    }
    .text-danger-500 {
        color: var(--color-danger-500) !important;
    }
    .border-danger-500 {
        border-color: var(--color-danger-500) !important;
    }

    /* ⚡ Warning */
    .bg-warning-50 {
        background-color: var(--color-warning-50) !important;
    }
    .bg-warning-100 {
        background-color: var(--color-warning-100) !important;
    }
    .bg-warning-200 {
        background-color: var(--color-warning-200) !important;
    }
    .bg-warning-300 {
        background-color: var(--color-warning-300) !important;
    }
    .bg-warning-400 {
        background-color: var(--color-warning-400) !important;
    }
    .bg-warning-500 {
        background-color: var(--color-warning-500) !important;
    }
    .bg-warning-600 {
        background-color: var(--color-warning-600) !important;
    }
    .bg-warning-700 {
        background-color: var(--color-warning-700) !important;
    }
    .bg-warning-800 {
        background-color: var(--color-warning-800) !important;
    }
    .bg-warning-900 {
        background-color: var(--color-warning-900) !important;
    }

    .text-warning-500 {
        color: var(--color-warning-500) !important;
    }
    .border-warning-500 {
        border-color: var(--color-warning-500) !important;
    }

    /* =========================================================
   🎨 GRADIENT UTILITIES (Tailwind-style)
   ========================================================= */
    @layer utilities {
        /* ✅ Custom gradient class (mimics Tailwind syntax) */
        .bg-gradient-to-r.from-cream-500.to-brown-600 {
            background-image: linear-gradient(
                to right,
                var(--color-cream-500),
                var(--color-brown-600)
            ) !important;
        }

        /* Optional: variants for direction */
        .bg-gradient-to-l.from-cream-500.to-brown-600 {
            background-image: linear-gradient(
                to left,
                var(--color-cream-500),
                var(--color-brown-600)
            ) !important;
        }

        .bg-gradient-to-t.from-cream-500.to-brown-600 {
            background-image: linear-gradient(
                to top,
                var(--color-cream-500),
                var(--color-brown-600)
            ) !important;
        }

        .bg-gradient-to-b.from-cream-500.to-brown-600 {
            background-image: linear-gradient(
                to bottom,
                var(--color-cream-500),
                var(--color-brown-600)
            ) !important;
        }
    }
}

/* =========================================================
   💬 COMMENT MODAL (Your existing styles)
   ========================================================= */
.comments-modal {
    z-index: 9999 !important;
}

.comments-container {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* mobile */
@media (max-width: 1023px) {
    .comments-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    .comments-container {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .comments-header {
        padding: 1rem !important;
        border-bottom: 1px solid #e5e7eb !important;
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        background: white !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    .comments-list {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 1rem !important;
        padding-bottom: 80px !important;
    }
    .comment-input-container {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        padding: 1rem !important;
        border-top: 1px solid #e5e7eb !important;
    }
}

/* desktop */
@media (min-width: 1024px) {
    .comments-modal {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 24rem !important;
        height: auto !important;
        max-height: 80vh !important;
    }
    .comments-container {
        width: 24rem !important;
        max-height: 80vh !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    }
    .comments-header {
        padding: 1rem !important;
        border-bottom: 1px solid #e5e7eb !important;
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        background: white !important;
        border-radius: 0.5rem 0.5rem 0 0 !important;
    }
    .comments-list {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 1rem !important;
        max-height: calc(80vh - 120px) !important;
    }
    .comment-input-container {
        position: relative !important;
        background: white !important;
        padding: 1rem !important;
        border-top: 1px solid #e5e7eb !important;
        border-radius: 0 0 0.5rem 0.5rem !important;
    }
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
        calc(2px + var(--tw-ring-offset-width))
        var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;

    /* 🎨 Brown accent theme */
    --tw-ring-color: var(--color-brown-500) !important;
    --tw-ring-offset-width: 2px !important;
    --tw-ring-offset-color: var(--color-brown-100) !important;

    /* remove browser default outline
    --tw-outline-style: none  !important;
    outline-style: none  !important; */
}

@media (hover: hover) {
    ui-checkbox[data-checked]
        .hover\:\[ui-checkbox\[data-checked\]_\&\]\:bg-\(--color-accent\):hover {
        background-color: var(--color-brown-500) !important;
    }
}

ui-checkbox[data-checked] .\[ui-checkbox\[data-checked\]_\&\]\:shadow-none {
    --tw-shadow: 0 0 #0000 !important;
    background-color: var(--color-brown-500) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}
.bg-\[var\(--color-accent\)\] {
    background-color: var(--color-brown-500) !important;
}
.bg-\[var\(--color-accent\)\]:hover {
    background-color: var(--color-brown-400) !important;
}
.bg-grad-cream-brown-right {
    background-image: linear-gradient(
        to right,
        var(--color-cream-500),
        var(--color-brown-600)
    ) !important;
}