/*
 * Custom Tailwind-compatible utility classes
 * These classes are used in custom admin templates but are NOT included
 * in Unfold's tree-shaken CSS bundle.
 */

/* ===== Spacing: space-y ===== */
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

/* ===== Text Colors ===== */
.text-green-600 { color: #16a34a; }
.text-blue-600 { color: #2563eb; }
.text-orange-600 { color: #ea580c; }
.text-indigo-600 { color: #4f46e5; }
.text-teal-600 { color: #0d9488; }
.text-amber-600 { color: #d97706; }
.text-red-600 { color: #dc2626; }
.text-emerald-600 { color: #059669; }
.text-purple-600 { color: #9333ea; }

/* ===== Background Colors ===== */
.bg-green-600 { background-color: #16a34a; }
.bg-blue-600 { background-color: #2563eb; }
.bg-orange-600 { background-color: #ea580c; }
.bg-indigo-600 { background-color: #4f46e5; }
.bg-teal-600 { background-color: #0d9488; }
.bg-amber-600 { background-color: #d97706; }
.bg-red-600 { background-color: #dc2626; }
.bg-emerald-600 { background-color: #059669; }

.bg-blue-50 { background-color: #eff6ff; }
.bg-indigo-50 { background-color: #eef2ff; }
.bg-indigo-100 { background-color: #e0e7ff; }

/* ===== Gradients ===== */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)); }

/* Gradient from/to stops */
.from-green-500 { --tw-gradient-from: #22c55e; --tw-gradient-to: #22c55e00; }
.from-green-600 { --tw-gradient-from: #16a34a; --tw-gradient-to: #16a34a00; }
.from-blue-500 { --tw-gradient-from: #3b82f6; --tw-gradient-to: #3b82f600; }
.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-to: #2563eb00; }
.from-blue-50 { --tw-gradient-from: #eff6ff; --tw-gradient-to: #eff6ff00; }
.from-red-500 { --tw-gradient-from: #ef4444; --tw-gradient-to: #ef444400; }
.from-red-600 { --tw-gradient-from: #dc2626; --tw-gradient-to: #dc262600; }
.from-amber-500 { --tw-gradient-from: #f59e0b; --tw-gradient-to: #f59e0b00; }
.from-amber-600 { --tw-gradient-from: #d97706; --tw-gradient-to: #d9770600; }
.from-amber-700 { --tw-gradient-from: #b45309; --tw-gradient-to: #b4530900; }
.from-orange-500 { --tw-gradient-from: #f97316; --tw-gradient-to: #f9731600; }
.from-orange-700 { --tw-gradient-from: #c2410c; --tw-gradient-to: #c2410c00; }
.from-indigo-100 { --tw-gradient-from: #e0e7ff; --tw-gradient-to: #e0e7ff00; }
.from-indigo-600 { --tw-gradient-from: #4f46e5; --tw-gradient-to: #4f46e500; }
.from-emerald-500 { --tw-gradient-from: #10b981; --tw-gradient-to: #10b98100; }
.from-emerald-700 { --tw-gradient-from: #047857; --tw-gradient-to: #04785700; }

.to-green-500 { --tw-gradient-to: #22c55e; }
.to-green-600 { --tw-gradient-to: #16a34a; }
.to-blue-500 { --tw-gradient-to: #3b82f6; }
.to-blue-600 { --tw-gradient-to: #2563eb; }
.to-blue-700 { --tw-gradient-to: #1d4ed8; }
.to-red-500 { --tw-gradient-to: #ef4444; }
.to-red-600 { --tw-gradient-to: #dc2626; }
.to-amber-500 { --tw-gradient-to: #f59e0b; }
.to-amber-600 { --tw-gradient-to: #d97706; }
.to-amber-700 { --tw-gradient-to: #b45309; }
.to-orange-500 { --tw-gradient-to: #f97316; }
.to-orange-700 { --tw-gradient-to: #c2410c; }
.to-indigo-100 { --tw-gradient-to: #e0e7ff; }
.to-indigo-600 { --tw-gradient-to: #4f46e5; }
.to-emerald-500 { --tw-gradient-to: #10b981; }
.to-emerald-700 { --tw-gradient-to: #047857; }

/* ===== Transition ===== */
.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

/* ===== Opacity ===== */
.opacity-80 { opacity: 0.8; }

/* ===== Hover Variants ===== */
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }

/* ===== Responsive: sm ===== */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Dark Mode Variants ===== */
@media (prefers-color-scheme: dark) {
    .dark\:bg-base-800 { background-color: var(--color-base-800); }
    .dark\:bg-base-700 { background-color: var(--color-base-700); }
    .dark\:text-base-100 { color: var(--color-base-100); }
    .dark\:border-base-700 { border-color: var(--color-base-700); }
    .dark\:border-base-600 { border-color: var(--color-base-600); }
    .dark\:bg-primary-900\/30 { background-color: rgb(var(--color-primary-900) / 0.3); }
    .dark\:bg-blue-900\/30 { background-color: rgba(30, 58, 138, 0.3); }
    .dark\:bg-green-900\/30 { background-color: rgba(20, 83, 45, 0.3); }
    .dark\:bg-orange-900\/30 { background-color: rgba(124, 45, 18, 0.3); }
}