/*
 * Custom Tailwind utilities missing from the pre-built style.css
 * These classes are used across the app but not included in the taildash template CSS.
 */

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

/* Gradient color stops (from) */
.from-indigo-500  { --tw-gradient-from: #6366f1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99,102,241,0)); }
.from-indigo-600  { --tw-gradient-from: #4f46e5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(79,70,229,0)); }
.from-indigo-700  { --tw-gradient-from: #4338ca; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(67,56,202,0)); }
.from-indigo-400  { --tw-gradient-from: #818cf8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(129,140,248,0)); }
.from-indigo-900  { --tw-gradient-from: #312e81; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(49,46,129,0)); }
.from-indigo-100  { --tw-gradient-from: #e0e7ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(224,231,255,0)); }
.from-pink-500    { --tw-gradient-from: #ec4899; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236,72,153,0)); }
.from-green-400   { --tw-gradient-from: #4ade80; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(74,222,128,0)); }
.from-green-500   { --tw-gradient-from: #22c55e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34,197,94,0)); }
.from-green-600   { --tw-gradient-from: #16a34a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22,163,74,0)); }
.from-purple-500  { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168,85,247,0)); }
.from-purple-600  { --tw-gradient-from: #9333ea; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147,51,234,0)); }
.from-purple-900  { --tw-gradient-from: #581c87; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(88,28,135,0)); }
.from-purple-50   { --tw-gradient-from: #faf5ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250,245,255,0)); }
.from-amber-500   { --tw-gradient-from: #f59e0b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245,158,11,0)); }
.from-gray-50     { --tw-gradient-from: #f9fafb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249,250,251,0)); }
.from-gray-700    { --tw-gradient-from: #374151; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(55,65,81,0)); }
.from-black\/70   { --tw-gradient-from: rgba(0,0,0,0.7); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }

/* Gradient color stops (to) */
.to-indigo-700  { --tw-gradient-to: #4338ca; }
.to-indigo-800  { --tw-gradient-to: #3730a3; }
.to-indigo-900  { --tw-gradient-to: #312e81; }
.to-indigo-50   { --tw-gradient-to: #eef2ff; }
.to-pink-600    { --tw-gradient-to: #db2777; }
.to-pink-700    { --tw-gradient-to: #be185d; }
.to-green-600   { --tw-gradient-to: #16a34a; }
.to-green-700   { --tw-gradient-to: #15803d; }
.to-green-800   { --tw-gradient-to: #166534; }
.to-purple-500  { --tw-gradient-to: #a855f7; }
.to-purple-600  { --tw-gradient-to: #9333ea; }
.to-purple-700  { --tw-gradient-to: #7e22ce; }
.to-purple-800  { --tw-gradient-to: #6b21a8; }
.to-orange-500  { --tw-gradient-to: #f97316; }
.to-gray-100    { --tw-gradient-to: #f3f4f6; }
.to-gray-800    { --tw-gradient-to: #1f2937; }
.to-gray-900    { --tw-gradient-to: #111827; }

/* Hover gradient stops */
.hover\:from-indigo-600:hover { --tw-gradient-from: #4f46e5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(79,70,229,0)); }
.hover\:from-indigo-800:hover { --tw-gradient-from: #3730a3; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(55,48,163,0)); }
.hover\:from-green-600:hover  { --tw-gradient-from: #16a34a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22,163,74,0)); }
.hover\:from-green-800:hover  { --tw-gradient-from: #166534; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22,101,52,0)); }
.hover\:from-purple-600:hover { --tw-gradient-from: #9333ea; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147,51,234,0)); }
.hover\:from-purple-800:hover { --tw-gradient-from: #6b21a8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(107,33,168,0)); }
.hover\:to-indigo-800:hover   { --tw-gradient-to: #3730a3; }
.hover\:to-green-800:hover    { --tw-gradient-to: #166534; }
.hover\:to-purple-800:hover   { --tw-gradient-to: #6b21a8; }
.hover\:bg-gradient-to-br:hover { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }

/* ── Opacity text/bg colors ───────────────────────────────────── */
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }
.bg-white\/10   { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20   { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/90   { background-color: rgba(255, 255, 255, 0.9); }
.bg-black\/40   { background-color: rgba(0, 0, 0, 0.4); }
.bg-black\/50   { background-color: rgba(0, 0, 0, 0.5); }
.bg-black\/70   { background-color: rgba(0, 0, 0, 0.7); }

/* ── Amber colors (not in taildash template) ──────────────────── */
.bg-amber-50    { background-color: #fffbeb; }
.bg-amber-100   { background-color: #fef3c7; }
.bg-amber-200   { background-color: #fde68a; }
.bg-amber-300   { background-color: #fcd34d; }
.bg-amber-400   { background-color: #fbbf24; }
.bg-amber-500   { background-color: #f59e0b; }
.bg-amber-600   { background-color: #d97706; }
.bg-amber-700   { background-color: #b45309; }
.bg-amber-900   { background-color: #78350f; }
.bg-amber-950   { background-color: #451a03; }
.text-amber-400 { color: #fbbf24; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.border-amber-200 { border-color: #fde68a; }
.border-amber-300 { border-color: #fcd34d; }
.border-amber-500 { border-color: #f59e0b; }
.border-amber-700 { border-color: #b45309; }
.hover\:bg-amber-400:hover { background-color: #fbbf24; }
.hover\:bg-amber-500:hover { background-color: #f59e0b; }
.hover\:bg-amber-600:hover { background-color: #d97706; }
.hover\:bg-amber-700:hover { background-color: #b45309; }
.hover\:border-amber-300:hover { border-color: #fcd34d; }
.hover\:border-amber-400:hover { border-color: #fbbf24; }
.hover\:border-amber-500:hover { border-color: #f59e0b; }

/* Dark mode amber */
.dark .dark\:bg-amber-900\/20  { background-color: rgba(120, 53, 15, 0.2); }
.dark .dark\:bg-amber-900\/30  { background-color: rgba(120, 53, 15, 0.3); }
.dark .dark\:bg-amber-900\/50  { background-color: rgba(120, 53, 15, 0.5); }
.dark .dark\:text-amber-300    { color: #fcd34d; }
.dark .dark\:text-amber-400    { color: #fbbf24; }
.dark .dark\:border-amber-500  { border-color: #f59e0b; }
.dark .dark\:border-amber-600  { border-color: #d97706; }
.dark .dark\:border-amber-700  { border-color: #b45309; }
.dark .dark\:hover\:border-amber-500:hover  { border-color: #f59e0b; }
.dark .dark\:hover\:border-amber-600:hover  { border-color: #d97706; }

/* ── Dark mode gradient overrides ─────────────────────────────── */
.dark .dark\:from-black\/70    { --tw-gradient-from: rgba(0,0,0,0.7); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }
.dark .dark\:from-purple-900\/20 { --tw-gradient-from: rgba(88,28,135,0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(88,28,135,0)); }
.dark .dark\:from-indigo-900\/20 { --tw-gradient-from: rgba(49,46,129,0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(49,46,129,0)); }
.dark .dark\:to-indigo-900\/20   { --tw-gradient-to: rgba(49,46,129,0.2); }
.dark .dark\:to-purple-900\/20   { --tw-gradient-to: rgba(88,28,135,0.2); }
.dark .dark\:from-gray-700       { --tw-gradient-from: #374151; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(55,65,81,0)); }
.dark .dark\:to-gray-800         { --tw-gradient-to: #1f2937; }
.dark .dark\:from-indigo-900     { --tw-gradient-from: #312e81; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(49,46,129,0)); }
.dark .dark\:to-gray-900         { --tw-gradient-to: #111827; }

/* ── Opacity bg with dark mode ────────────────────────────────── */
.dark .dark\:bg-green-900\/20  { background-color: rgba(20, 83, 45, 0.2); }
.dark .dark\:bg-green-900\/30  { background-color: rgba(20, 83, 45, 0.3); }
.dark .dark\:bg-green-900\/40  { background-color: rgba(20, 83, 45, 0.4); }
.dark .dark\:bg-green-900\/50  { background-color: rgba(20, 83, 45, 0.5); }
.dark .dark\:bg-indigo-900\/20 { background-color: rgba(49, 46, 129, 0.2); }
.dark .dark\:bg-indigo-900\/30 { background-color: rgba(49, 46, 129, 0.3); }
.dark .dark\:bg-indigo-900\/40 { background-color: rgba(49, 46, 129, 0.4); }
.dark .dark\:bg-purple-900\/10 { background-color: rgba(88, 28, 135, 0.1); }
.dark .dark\:bg-purple-900\/20 { background-color: rgba(88, 28, 135, 0.2); }
.dark .dark\:bg-purple-900\/30 { background-color: rgba(88, 28, 135, 0.3); }
.dark .dark\:bg-purple-900\/40 { background-color: rgba(88, 28, 135, 0.4); }
.dark .dark\:bg-purple-900\/50 { background-color: rgba(88, 28, 135, 0.5); }
.dark .dark\:bg-pink-900\/20   { background-color: rgba(131, 24, 67, 0.2); }
.dark .dark\:bg-red-900\/20    { background-color: rgba(127, 29, 29, 0.2); }
.dark .dark\:bg-red-900\/30    { background-color: rgba(127, 29, 29, 0.3); }
.dark .dark\:bg-blue-900\/20   { background-color: rgba(30, 58, 138, 0.2); }
.dark .dark\:bg-blue-900\/30   { background-color: rgba(30, 58, 138, 0.3); }

/* ── Purple colors (missing from taildash) ────────────────────── */
.bg-purple-50    { background-color: #faf5ff; }
.bg-purple-200   { background-color: #e9d5ff; }
.bg-purple-300   { background-color: #d8b4fe; }
.bg-purple-400   { background-color: #c084fc; }
.bg-purple-600   { background-color: #9333ea; }
.bg-purple-700   { background-color: #7e22ce; }
.bg-purple-800   { background-color: #6b21a8; }
.bg-purple-900   { background-color: #581c87; }
.text-purple-300 { color: #d8b4fe; }
.text-purple-400 { color: #c084fc; }
.text-purple-600 { color: #9333ea; }
.border-purple-100 { border-color: #f3e8ff; }
.border-purple-200 { border-color: #e9d5ff; }
.border-purple-300 { border-color: #d8b4fe; }
.border-purple-400 { border-color: #c084fc; }
.border-purple-500 { border-color: #a855f7; }
.border-purple-700 { border-color: #7e22ce; }
.border-purple-800 { border-color: #6b21a8; }
.text-purple-200 { color: #e9d5ff; }
.text-purple-800 { color: #6b21a8; }
.border-purple-600 { border-color: #9333ea; }
.hover\:bg-purple-50:hover    { background-color: #faf5ff; }
.hover\:bg-purple-100:hover   { background-color: #f3e8ff; }
.hover\:bg-purple-200:hover   { background-color: #e9d5ff; }
.hover\:bg-purple-400:hover   { background-color: #c084fc; }
.hover\:bg-purple-600:hover   { background-color: #9333ea; }
.hover\:border-purple-300:hover { border-color: #d8b4fe; }
.hover\:border-purple-400:hover { border-color: #c084fc; }
.hover\:border-purple-500:hover { border-color: #a855f7; }
.group:hover .group-hover\:bg-purple-200 { background-color: #e9d5ff; }

/* Dark mode purple */
.dark .dark\:text-purple-200    { color: #e9d5ff; }
.dark .dark\:text-purple-300    { color: #d8b4fe; }
.dark .dark\:text-purple-400    { color: #c084fc; }
.dark .dark\:border-purple-600  { border-color: #9333ea; }
.dark .dark\:border-purple-700  { border-color: #7e22ce; }
.dark .dark\:border-purple-800  { border-color: #6b21a8; }
.dark .dark\:border-purple-800\/50 { border-color: rgba(107, 33, 168, 0.5); }
.dark .dark\:hover\:bg-purple-900\/30:hover { background-color: rgba(88, 28, 135, 0.3); }
.dark .dark\:hover\:bg-purple-900\/40:hover { background-color: rgba(88, 28, 135, 0.4); }
.dark .dark\:hover\:bg-purple-900\/50:hover { background-color: rgba(88, 28, 135, 0.5); }
.dark .dark\:hover\:bg-purple-800\/50:hover { background-color: rgba(107, 33, 168, 0.5); }
.dark .dark\:hover\:border-purple-500:hover { border-color: #a855f7; }
.dark .dark\:hover\:border-purple-600:hover { border-color: #9333ea; }
.dark .group:hover .dark\:group-hover\:bg-purple-800\/50 { background-color: rgba(107, 33, 168, 0.5); }

/* ── Red colors (missing from taildash) ──────────────────────── */
.bg-red-50         { background-color: #fef2f2; }
.bg-red-100        { background-color: #fee2e2; }
.bg-red-400\/30    { background-color: rgba(248, 113, 113, 0.3); }
.bg-red-600        { background-color: #dc2626; }
.text-red-300      { color: #fca5a5; }
.text-red-400      { color: #f87171; }
.border-red-200    { border-color: #fecaca; }
.border-red-300    { border-color: #fca5a5; }
.border-red-600    { border-color: #dc2626; }
.border-red-700    { border-color: #b91c1c; }
.border-red-800    { border-color: #991b1b; }
.hover\:bg-red-50:hover  { background-color: #fef2f2; }
.hover\:bg-red-100:hover { background-color: #fee2e2; }
.hover\:bg-red-600:hover { background-color: #dc2626; }
.hover\:border-red-400:hover { border-color: #f87171; }
.dark .dark\:text-red-300    { color: #fca5a5; }
.dark .dark\:text-red-400    { color: #f87171; }
.dark .dark\:border-red-800  { border-color: #991b1b; }
.dark .dark\:border-red-800\/50 { border-color: rgba(153, 27, 27, 0.5); }

/* ── Green colors (missing from taildash) ────────────────────── */
.bg-green-50     { background-color: #f0fdf4; }
.bg-green-100    { background-color: #dcfce7; }
.bg-green-200    { background-color: #bbf7d0; }
.bg-green-600    { background-color: #16a34a; }
.bg-green-700    { background-color: #15803d; }
.bg-green-800    { background-color: #166534; }
.text-green-300  { color: #86efac; }
.text-green-400  { color: #4ade80; }
.text-green-600  { color: #16a34a; }
.text-green-700  { color: #15803d; }
.border-green-100 { border-color: #dcfce7; }
.border-green-200 { border-color: #bbf7d0; }
.border-green-300 { border-color: #86efac; }
.border-green-500 { border-color: #22c55e; }
.border-green-700 { border-color: #15803d; }
.border-green-800 { border-color: #166534; }
.bg-green-500\/20  { background-color: rgba(34, 197, 94, 0.2); }
.hover\:bg-green-50:hover  { background-color: #f0fdf4; }
.hover\:bg-green-600:hover { background-color: #16a34a; }
.hover\:bg-green-700:hover { background-color: #15803d; }
.dark .dark\:text-green-300  { color: #86efac; }
.dark .dark\:text-green-400  { color: #4ade80; }
.dark .dark\:border-green-700 { border-color: #15803d; }
.dark .dark\:border-green-800 { border-color: #166534; }
.dark .dark\:border-green-800\/50 { border-color: rgba(22, 101, 52, 0.5); }
.dark .dark\:bg-green-500\/20  { background-color: rgba(34, 197, 94, 0.2); }

/* ── Indigo colors (missing from taildash) ───────────────────── */
.bg-indigo-50    { background-color: #eef2ff; }
.bg-indigo-100   { background-color: #e0e7ff; }
.bg-indigo-600   { background-color: #4f46e5; }
.bg-indigo-700   { background-color: #4338ca; }
.bg-indigo-800   { background-color: #3730a3; }
.bg-indigo-900   { background-color: #312e81; }
.text-indigo-300 { color: #a5b4fc; }
.text-indigo-400 { color: #818cf8; }
.text-indigo-600 { color: #4f46e5; }
.text-indigo-700 { color: #4338ca; }
.border-indigo-100 { border-color: #e0e7ff; }
.border-indigo-200 { border-color: #c7d2fe; }
.border-indigo-300 { border-color: #a5b4fc; }
.border-indigo-500 { border-color: #6366f1; }
.border-indigo-700 { border-color: #4338ca; }
.border-indigo-800 { border-color: #3730a3; }
.text-indigo-200 { color: #c7d2fe; }
.border-indigo-600 { border-color: #4f46e5; }
.hover\:bg-indigo-50:hover  { background-color: #eef2ff; }
.hover\:bg-indigo-100:hover { background-color: #e0e7ff; }
.hover\:bg-indigo-600:hover { background-color: #4f46e5; }
.hover\:bg-indigo-700:hover { background-color: #4338ca; }
.hover\:border-indigo-300:hover { border-color: #a5b4fc; }
.hover\:border-indigo-600:hover { border-color: #4f46e5; }
.dark .dark\:text-indigo-200  { color: #c7d2fe; }
.dark .dark\:text-indigo-300  { color: #a5b4fc; }
.dark .dark\:text-indigo-400  { color: #818cf8; }
.dark .dark\:border-indigo-600 { border-color: #4f46e5; }
.dark .dark\:border-indigo-700 { border-color: #4338ca; }
.dark .dark\:border-indigo-800 { border-color: #3730a3; }
.dark .dark\:border-indigo-800\/50 { border-color: rgba(55, 48, 163, 0.5); }
.dark .dark\:bg-indigo-900\/50 { background-color: rgba(49, 46, 129, 0.5); }

/* ── Orange colors (job detail header, no-balance modal) ─────── */
.bg-orange-50    { background-color: #fff7ed; }
.bg-orange-100   { background-color: #ffedd5; }
.bg-orange-500   { background-color: #f97316; }
.bg-orange-600   { background-color: #ea580c; }
.text-orange-400 { color: #fb923c; }
.text-orange-500 { color: #f97316; }
.text-orange-600 { color: #ea580c; }
.border-orange-200 { border-color: #fed7aa; }
.border-orange-300 { border-color: #fdba74; }
.border-orange-400 { border-color: #fb923c; }
.border-orange-500 { border-color: #f97316; }
.hover\:bg-orange-600:hover { background-color: #ea580c; }
.dark .dark\:bg-orange-900\/20  { background-color: rgba(124, 45, 18, 0.2); }
.dark .dark\:bg-orange-900\/30  { background-color: rgba(124, 45, 18, 0.3); }
.dark .dark\:text-orange-300    { color: #fdba74; }
.dark .dark\:text-orange-400    { color: #fb923c; }
.dark .dark\:border-orange-400\/40 { border-color: rgba(251, 146, 60, 0.4); }
.dark .dark\:border-orange-700  { border-color: #c2410c; }
.dark .dark\:hover\:bg-orange-500\/35:hover { background-color: rgba(249, 115, 22, 0.35); }

/* ── Yellow colors (costs tab) ───────────────────────────────── */
.bg-yellow-50    { background-color: #fefce8; }
.bg-yellow-100   { background-color: #fef9c3; }
.bg-yellow-500   { background-color: #eab308; }
.text-yellow-300 { color: #fde047; }
.text-yellow-500 { color: #eab308; }
.text-yellow-600 { color: #ca8a04; }
.text-yellow-700 { color: #a16207; }
.border-yellow-200 { border-color: #fef08a; }
.border-yellow-300 { border-color: #fde047; }
.border-yellow-500 { border-color: #eab308; }
.dark .dark\:bg-yellow-900\/20  { background-color: rgba(113, 63, 18, 0.2); }
.dark .dark\:bg-yellow-900\/30  { background-color: rgba(113, 63, 18, 0.3); }
.dark .dark\:bg-yellow-900\/50  { background-color: rgba(113, 63, 18, 0.5); }
.dark .dark\:text-yellow-300    { color: #fde047; }
.dark .dark\:text-yellow-400    { color: #facc15; }
.dark .dark\:border-yellow-700  { border-color: #a16207; }
.dark .dark\:border-yellow-800  { border-color: #854d0e; }

/* ── Blue colors (payments tab) ──────────────────────────────── */
.bg-blue-50      { background-color: #eff6ff; }
.bg-blue-100     { background-color: #dbeafe; }
.bg-blue-500     { background-color: #3b82f6; }
.bg-blue-600     { background-color: #2563eb; }
.text-blue-300   { color: #93c5fd; }
.text-blue-400   { color: #60a5fa; }
.text-blue-500   { color: #3b82f6; }
.text-blue-600   { color: #2563eb; }
.text-blue-700   { color: #1d4ed8; }
.border-blue-200 { border-color: #bfdbfe; }
.border-blue-300 { border-color: #93c5fd; }
.border-blue-500 { border-color: #3b82f6; }
.border-blue-700 { border-color: #1d4ed8; }
.hover\:bg-blue-600:hover { background-color: #2563eb; }
.dark .dark\:text-blue-300    { color: #93c5fd; }
.dark .dark\:text-blue-400    { color: #60a5fa; }
.dark .dark\:border-blue-700  { border-color: #1d4ed8; }
.dark .dark\:border-blue-800  { border-color: #1e40af; }

/* ── Dark mode hover with opacity ────────────────────────────── */
.dark .dark\:hover\:bg-indigo-900\/50:hover { background-color: rgba(49, 46, 129, 0.5); }
.dark .dark\:hover\:bg-green-900\/60:hover  { background-color: rgba(20, 83, 45, 0.6); }
.dark .dark\:hover\:bg-green-900\/40:hover  { background-color: rgba(20, 83, 45, 0.4); }
.dark .dark\:hover\:bg-red-900\/30:hover    { background-color: rgba(127, 29, 29, 0.3); }

/* ── Dark mode border grays ──────────────────────────────────── */
.dark .dark\:border-gray-600  { border-color: #4b5563; }
.dark .dark\:border-gray-700  { border-color: #374151; }

/* ── Dark mode border extras ─────────────────────────────────── */
.dark .dark\:border-red-700     { border-color: #b91c1c; }
.dark .dark\:border-amber-800   { border-color: #92400e; }
.dark .dark\:border-amber-800\/50 { border-color: rgba(146, 64, 14, 0.5); }
.dark .dark\:border-amber-400\/40 { border-color: rgba(251, 191, 36, 0.4); }
.dark .dark\:text-amber-500     { color: #f59e0b; }
.dark .dark\:bg-green-600       { background-color: #16a34a; }

/* ── Dark mode bg-gray opacity ───────────────────────────────── */
.dark .dark\:bg-gray-900\/40 { background-color: rgba(17, 24, 39, 0.4); }

/* ── Missing size utilities ──────────────────────────────────── */
/* style.css ships .size-2/4/5/6/8/10/12/14 but skips fractional and
   "odd" values. SVGs that use these silently render at intrinsic size
   (no width/height bound) — most visible on the /verify success-tick
   which uses size-7 and ballooned to ~100% of its container until we
   plugged it here. Add ANY missing Tailwind size-N value as we hit it. */
.size-1\.5 { width: 0.375rem; height: 0.375rem; }
.size-3   { width: 0.75rem;  height: 0.75rem; }
.size-3\.5 { width: 0.875rem; height: 0.875rem; }
.size-7   { width: 1.75rem;  height: 1.75rem; }
.size-11  { width: 2.75rem;  height: 2.75rem; }
.size-16  { width: 4rem;     height: 4rem; }

/* ── Missing fractional padding/gap (form fields look "raw" without these) ── */
/* style.css ships p-2/3/4 but skips 2.5 / 1.5 / etc. Inputs/buttons that use
   py-2.5 px-2.5 silently render with NO padding → cramped ugly boxes.
   Surfaced 28 Apr on /mechanic-entry/{token} — full audit found 16 utilities
   missing on that page alone. Standard Tailwind values. */
.p-2\.5  { padding: 0.625rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.gap-1\.5 { gap: 0.375rem; }

/* ── Fixed widths used in pickers / inline controls ──────────── */
.w-28 { width: 7rem; }

/* ── Form layout grid (collapses without these) ──────────────── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Borders (light shades commonly used on info banners) ────── */
/* style.css uses Tailwind v4 syntax where .border-{color} ONLY sets
   the colour and requires explicit .border for the width. Many of our
   pages were written with the v3 assumption that border-gray-300 alone
   gives a visible frame. To unbreak them globally, every colour border
   utility we define here ALSO sets border-width:1px solid as a
   side-effect, restoring v3 ergonomics on this slice. */
.border-emerald-100 { border: 1px solid #d1fae5; }
.border-gray-200    { border: 1px solid #e5e7eb; }
.border-gray-300    { border: 1px solid #d1d5db; }
.border-gray-400    { border: 1px solid #9ca3af; }
.border-indigo-100  { border: 1px solid #e0e7ff; }
.border-indigo-200  { border: 1px solid #c7d2fe; }
.border-indigo-300  { border: 1px solid #a5b4fc; }
.border-emerald-200 { border: 1px solid #a7f3d0; }
.border-amber-200   { border: 1px solid #fde68a; }

/* ── Form-element baseline frame ─────────────────────────────── */
/* Guarantees every input/select/textarea on the site has a visible
   frame even when the markup omits an explicit border utility.
   Surfaced 28 Apr on /mechanic-entry — name/phone/etc. inputs were
   completely frameless because border-gray-300 alone sets only colour
   in Tailwind v4. Background defaults to white so the input is
   visually a "well" inside its container. */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
select,
textarea {
    border: 1px solid #d1d5db;
    background-color: #ffffff;
}
.dark input[type="text"],
.dark input[type="tel"],
.dark input[type="email"],
.dark input[type="number"],
.dark input[type="search"],
.dark input[type="url"],
.dark input[type="password"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="month"],
.dark input[type="time"],
.dark input[type="week"],
.dark select,
.dark textarea {
    border-color: #4b5563;
    background-color: #111827;
    color: #f3f4f6;
}

/* ── Hover backgrounds (subtle pastel hovers on chip buttons) ── */
.hover\:bg-amber-100:hover  { background-color: #fef3c7; }
.hover\:shadow-md:hover     { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
.hover\:text-indigo-800:hover { color: #3730a3; }

/* ── Focus rings (the actual COLOUR ring — focus:ring-2 alone is colourless) ── */
.focus\:ring-indigo-300:focus  { box-shadow: 0 0 0 2px rgba(165, 180, 252, 0.65); }
.focus\:ring-emerald-300:focus { box-shadow: 0 0 0 2px rgba(110, 231, 183, 0.65); }
.focus\:ring-cyan-300:focus    { box-shadow: 0 0 0 2px rgba(103, 232, 249, 0.65); }
.focus\:ring-amber-300:focus   { box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.65); }

/* ── Misc text/utility helpers ───────────────────────────────── */
.select-none { user-select: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-emerald-500 { color: #10b981; }

/* ── Shadow XS (used in cards) ────────────────────────────────── */
.shadow-xs { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }

/* ── Grid columns (admin tables/stats) ─────────────────────────── */
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (min-width: 768px)  { .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* ── Divide utilities (table rows) ──────────────────────────────── */
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; border-bottom-width: 0; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #f3f4f6; }
.dark .dark\:divide-gray-700\/50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(55, 65, 81, 0.5); }

/* ── Emerald colors (partners, active status) ──────────────────── */
.bg-emerald-100   { background-color: #d1fae5; }
.bg-emerald-600   { background-color: #059669; }
.text-emerald-400 { color: #34d399; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.border-emerald-500 { border-color: #10b981; }
.dark .dark\:bg-emerald-900\/30  { background-color: rgba(6, 78, 59, 0.3); }
.dark .dark\:text-emerald-400    { color: #34d399; }

/* ── Cyan colors (admin inbound calls tab) ──────────────────────── */
.bg-cyan-100    { background-color: #cffafe; }
.text-cyan-400  { color: #22d3ee; }
.text-cyan-600  { color: #0891b2; }
.text-cyan-700  { color: #0e7490; }
.border-cyan-500 { border-color: #06b6d4; }
.dark .dark\:bg-cyan-900\/30  { background-color: rgba(22, 78, 99, 0.3); }
.dark .dark\:text-cyan-400    { color: #22d3ee; }

/* ── Rose colors (admin targets tab) ────────────────────────────── */
.bg-rose-100    { background-color: #ffe4e6; }
.text-rose-400  { color: #fb7185; }
.text-rose-600  { color: #e11d48; }
.text-rose-700  { color: #be123c; }
.border-rose-500 { border-color: #f43f5e; }
.dark .dark\:bg-rose-900\/30  { background-color: rgba(136, 19, 55, 0.3); }
.dark .dark\:text-rose-400    { color: #fb7185; }

/* ── Teal colors (admin stats) ──────────────────────────────────── */
.text-teal-600  { color: #0d9488; }

/* ── Black overlay (modals/drawers) ─────────────────────────────── */
.bg-black\/30   { background-color: rgba(0, 0, 0, 0.3); }

/* ── Font mono (tracking codes) ─────────────────────────────────── */
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* ── Dark mode gray text/bg overrides (public garage page + anywhere :where() fails) ── */
.dark .dark\:text-gray-100  { color: #f3f4f6; }
.dark .dark\:text-gray-200  { color: #e5e7eb; }
.dark .dark\:text-gray-300  { color: #d1d5db; }
.dark .dark\:text-gray-400  { color: #9ca3af; }
.dark .dark\:bg-gray-700    { background-color: #374151; }
.dark .dark\:bg-gray-800    { background-color: #1f2937; }
.dark .dark\:bg-gray-900    { background-color: #111827; }
.dark .dark\:bg-gray-900\/95 { background-color: rgba(17, 24, 39, 0.95); }
.dark .dark\:bg-gray-950    { background-color: #030712; }
.dark .dark\:from-gray-800  { --tw-gradient-from: #1f2937; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31,41,55,0)); }
.dark .dark\:to-gray-900    { --tw-gradient-to: #111827; }

/* ── Public garage page: form labels must be bright white in dark mode ── */
label.gp-form-label { color: #374151; }
.dark label.gp-form-label { color: #fff; }

/* ===================================================================
   /verify suite extensions (added 27 Apr 2026) — utilities used across
   records-lookup, verify-claim, verify-how-it-works that style.css does
   not ship. Per feedback_audit_bundle_before_styling, custom-utilities
   is the supported escape hatch for utilities reused across templates.
   =================================================================== */

/* Dark-mode opacity backgrounds (icon containers + alert cards) */
.dark .dark\:bg-indigo-900\/40   { background-color: rgba(49, 46, 129, 0.4); }
.dark .dark\:bg-indigo-900\/30   { background-color: rgba(49, 46, 129, 0.3); }
.dark .dark\:bg-emerald-900\/40  { background-color: rgba(6, 78, 59, 0.4); }
.dark .dark\:bg-emerald-900\/30  { background-color: rgba(6, 78, 59, 0.3); }
.dark .dark\:bg-emerald-900\/20  { background-color: rgba(6, 78, 59, 0.2); }
.dark .dark\:bg-amber-900\/40    { background-color: rgba(120, 53, 15, 0.4); }
.dark .dark\:bg-amber-900\/30    { background-color: rgba(120, 53, 15, 0.3); }
.dark .dark\:bg-amber-900\/20    { background-color: rgba(120, 53, 15, 0.2); }
.dark .dark\:bg-amber-900\/60    { background-color: rgba(120, 53, 15, 0.6); }
.dark .dark\:bg-rose-900\/40     { background-color: rgba(136, 19, 55, 0.4); }
.dark .dark\:bg-cyan-900\/40     { background-color: rgba(22, 78, 99, 0.4); }
.dark .dark\:bg-violet-900\/30   { background-color: rgba(76, 29, 149, 0.3); }

/* Dark-mode opacity borders */
.dark .dark\:border-emerald-700\/40 { border-color: rgba(4, 120, 87, 0.4); }
.dark .dark\:border-amber-700\/40   { border-color: rgba(180, 83, 9, 0.4); }
.dark .dark\:border-indigo-700\/40  { border-color: rgba(67, 56, 202, 0.4); }
.dark .dark\:border-cyan-500\/30    { border-color: rgba(6, 182, 212, 0.3); }
.dark .dark\:border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.3); }
.dark .dark\:border-emerald-500\/40 { border-color: rgba(16, 185, 129, 0.4); }
.dark .dark\:border-amber-500\/30   { border-color: rgba(245, 158, 11, 0.3); }
.dark .dark\:border-amber-500\/40   { border-color: rgba(245, 158, 11, 0.4); }
.dark .dark\:border-indigo-500\/30  { border-color: rgba(99, 102, 241, 0.3); }
.dark .dark\:border-violet-500\/30  { border-color: rgba(139, 92, 246, 0.3); }

/* Dark-mode text variants */
.dark .dark\:text-emerald-200 { color: #a7f3d0; }
.dark .dark\:text-emerald-300 { color: #6ee7b7; }
.dark .dark\:text-amber-200   { color: #fde68a; }
.dark .dark\:text-amber-300   { color: #fcd34d; }
.dark .dark\:text-rose-300    { color: #fda4af; }
.dark .dark\:text-indigo-200  { color: #c7d2fe; }
.dark .dark\:text-indigo-300  { color: #a5b4fc; }
.dark .dark\:text-violet-200  { color: #ddd6fe; }

/* Light-mode text variants for tier labels */
.text-emerald-700 { color: #047857; }
.text-emerald-800 { color: #065f46; }
.text-amber-700   { color: #b45309; }
.text-amber-800   { color: #92400e; }
.text-amber-900   { color: #78350f; }
.text-rose-700    { color: #be123c; }

/* Light-mode emerald/amber/violet borders + backgrounds */
.bg-emerald-50     { background-color: #ecfdf5; }
.bg-emerald-200    { background-color: #a7f3d0; }
.bg-emerald-500    { background-color: #10b981; }
.bg-emerald-700    { background-color: #047857; }
.bg-amber-200      { background-color: #fde68a; }
.bg-amber-500      { background-color: #f59e0b; }
.bg-amber-600      { background-color: #d97706; }
.bg-violet-100     { background-color: #ede9fe; }
.bg-violet-500     { background-color: #8b5cf6; }
.border-emerald-200 { border-color: #a7f3d0; }
.border-emerald-300 { border-color: #6ee7b7; }
.border-emerald-500 { border-color: #10b981; }
.border-amber-200  { border-color: #fde68a; }
.border-amber-500  { border-color: #f59e0b; }
.border-amber-600  { border-color: #d97706; }
.border-violet-200 { border-color: #ddd6fe; }
.border-rose-200   { border-color: #fecdd3; }
.border-cyan-300   { border-color: #67e8f7; }

/* Focus rings on form inputs */
.focus\:border-indigo-500:focus { border-color: #6366f1; }
.focus\:border-cyan-500:focus   { border-color: #06b6d4; }
.focus\:ring-1:focus            { box-shadow: 0 0 0 1px var(--mvk-ring, #6366f1); }
.focus\:ring-2:focus            { box-shadow: 0 0 0 2px var(--mvk-ring, #6366f1); }
.focus\:ring-indigo-500:focus   { --mvk-ring: #6366f1; box-shadow: 0 0 0 1px #6366f1; }
.focus\:ring-cyan-500:focus     { --mvk-ring: #06b6d4; box-shadow: 0 0 0 2px #06b6d4; }
.focus\:outline-none:focus      { outline: 2px solid transparent; outline-offset: 2px; }

/* Hover backgrounds (button affordances) */
.hover\:bg-indigo-600:hover   { background-color: #4f46e5; }
.hover\:bg-indigo-700:hover   { background-color: #4338ca; }
.hover\:bg-emerald-600:hover  { background-color: #059669; }
.hover\:bg-emerald-700:hover  { background-color: #047857; }
.hover\:bg-amber-500:hover    { background-color: #f59e0b; }
.hover\:bg-amber-600:hover    { background-color: #d97706; }
.hover\:bg-rose-600:hover     { background-color: #e11d48; }
.hover\:bg-rose-700:hover     { background-color: #be123c; }
.hover\:bg-cyan-700:hover     { background-color: #0e7490; }
.hover\:bg-indigo-100:hover   { background-color: #e0e7ff; }
.hover\:bg-emerald-100:hover  { background-color: #d1fae5; }

/* Hover shadow + border for sections */
.hover\:shadow-lg:hover        { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.hover\:shadow-xl:hover        { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.hover\:border-emerald-200:hover { border-color: #a7f3d0; }
.dark .dark\:hover\:border-emerald-800:hover { border-color: #065f46; }
.dark .dark\:hover\:bg-amber-900\/30:hover   { background-color: rgba(120, 53, 15, 0.3); }
.dark .dark\:hover\:bg-emerald-900\/50:hover { background-color: rgba(6, 78, 59, 0.5); }

/* Spacing utilities (space-y-3, gap-1.5/2.5) */
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-x-2  { column-gap: 0.5rem; }

/* Misc */
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
.transition-all { transition-property: all; transition-duration: 200ms; }

/* Modal layering — arbitrary z-index values (z-[100], etc.) used by the
   access-request modal silently failed; modal opened invisibly behind page */
.z-\[100\]      { z-index: 100; }
.z-100          { z-index: 100; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[80vh\] { max-height: 80vh; }
.min-h-\[300px\] { min-height: 300px; }