/*
 * 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.
 */

/* ── Sidebar scroll affordance (17 Jun 2026) ──────────────────────
 * The mechanic sidebar nav can exceed the viewport on short screens, so
 * lower items (e.g. "My vehicles", where a mechanic activates their own
 * driver account) fall below the fold. The theme's .scrollbars thumb is
 * transparent until hover, so there was NO visual cue the nav scrolled —
 * users had to zoom the browser to 75% to reveal the bottom items.
 * Make the sidebar's scroll thumb subtly visible by default (scoped to
 * #sidebar-menu so other .scrollbars regions keep their hover behaviour). */
#sidebar-menu .scrollbars { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
#sidebar-menu .scrollbars::-webkit-scrollbar { width: 8px; }
#sidebar-menu .scrollbars::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
#sidebar-menu .scrollbars:hover::-webkit-scrollbar-thumb { background: #94a3b8; }
.dark #sidebar-menu .scrollbars { scrollbar-color: #4b5563 transparent; }
.dark #sidebar-menu .scrollbars::-webkit-scrollbar-thumb { background: #4b5563; }
.dark #sidebar-menu .scrollbars:hover::-webkit-scrollbar-thumb { background: #6b7280; }

/* Drive School drive-summary stat grid: 2-up on mobile, 4-up from sm (17 Jun 2026). */
@media (min-width: 640px) { .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Drive School live recording cockpit map height (17 Jun 2026). */
.h-\[60vh\] { height: 60vh; }

/* ── 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-500  { border-color: #6b7280; }
.dark .dark\:border-gray-600  { border-color: #4b5563; }
.dark .dark\:border-gray-700  { border-color: #374151; }
.dark .dark\:border-gray-800  { border-color: #1f2937; }
.dark .dark\:border-gray-900  { border-color: #111827; }

/* ── 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; }
/* Form labels: lift muted gray-400 labels to gray-300 so they read in dark mode
   (matches the ~300 labels already using dark:text-gray-300). Scoped to <label>
   so <p> hints / other secondary gray-400 text stay muted. */
.dark label.dark\:text-gray-400 { color: #d1d5db; }
.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; }

/* ── Command-center workbench: grid/spans/widths missing from taildash ──
 * All values are stock Tailwind defaults (identical to what the theme would
 * emit), so these only fill gaps — they never override existing theme rules. */
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-\[6\.5rem\] { max-width: 6.5rem; }
.max-w-\[7rem\]    { max-width: 7rem; }
.size-3\.5 { width: 0.875rem; height: 0.875rem; }
.min-h-\[2\.75rem\] { min-height: 2.75rem; }
.min-h-\[3\.5rem\]  { min-height: 3.5rem; }
.max-h-\[calc\(100vh-15rem\)\] { max-height: calc(100vh - 15rem); }
.max-h-\[calc\(100vh-11rem\)\] { max-height: calc(100vh - 11rem); }
.pt-\[15vh\] { padding-top: 15vh; }
.text-\[10px\] { font-size: 10px; line-height: 1.2; }
.text-\[11px\] { font-size: 11px; line-height: 1.3; }
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.z-\[60\] { z-index: 60; }

/* ── Workbench: remaining missing utilities (genuinely absent from theme — 
 * NOT redefining .hidden/.block etc, so no responsive overrides). 13 Jun 2026 ── */
.bottom-6{bottom:1.5rem}.left-3{left:.75rem}.right-6{right:1.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.size-9{width:2.25rem;height:2.25rem}.h-3\.5{height:.875rem}.max-h-56{max-height:14rem}.max-h-80{max-height:20rem}.min-h-\[200px\]{min-height:200px}.w-3\.5{width:.875rem}.min-w-0{min-width:0}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.resize-y{resize:vertical}.items-end{align-items:flex-end}.gap-0\.5{gap:.125rem}.gap-5{gap:1.25rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.border-transparent{border-color:transparent}.bg-gray-50\/60{background-color:rgba(249,250,251,.6)}.p-10{padding:2.5rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.pl-1{padding-left:.25rem}.pl-9{padding-left:2.25rem}.pr-3{padding-right:.75rem}.text-left{text-align:left}.text-right{text-align:right}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.placeholder\:font-normal::-moz-placeholder{font-weight:400}.placeholder\:font-normal::placeholder{font-weight:400}.placeholder\:normal-case::-moz-placeholder{text-transform:none}.placeholder\:normal-case::placeholder{text-transform:none}.placeholder\:tracking-normal::-moz-placeholder{letter-spacing:0}.placeholder\:tracking-normal::placeholder{letter-spacing:0}.placeholder\:text-gray-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.placeholder\:text-gray-400::placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.placeholder\:text-gray-600::-moz-placeholder{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.placeholder\:text-gray-600::placeholder{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:text-red-600:hover{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.focus\:bg-white:focus{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.focus\:ring-amber-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(245 158 11/var(--tw-ring-opacity,1))}.focus\:ring-indigo-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(129 140 248/var(--tw-ring-opacity,1))}.dark\:bg-gray-700\/50:is(.dark *){background-color:rgba(55,65,81,.5)}.dark\:bg-gray-700\/70:is(.dark *){background-color:rgba(55,65,81,.7)}.dark\:bg-gray-800\/40:is(.dark *){background-color:rgba(31,41,55,.4)}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:hover\:border-gray-600:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700\/50:hover:is(.dark *){background-color:rgba(55,65,81,.5)}.dark\:hover\:bg-indigo-900\/20:hover:is(.dark *){background-color:rgba(49,46,129,.2)}.dark\:hover\:bg-indigo-900\/30:hover:is(.dark *){background-color:rgba(49,46,129,.3)}.dark\:hover\:bg-indigo-900\/40:hover:is(.dark *){background-color:rgba(49,46,129,.4)}.dark\:focus\:bg-gray-700:focus:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}

/* ── /my driver landing rewrite (19 Jun 2026) — utilities absent from the
 * purged theme build. Stock Tailwind v4 values. ── */
.align-top { vertical-align: top; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-8 { margin-top: 2rem; }
.pt-12 { padding-top: 3rem; }
.max-w-lg { max-width: 32rem; }
.max-w-4xl { max-width: 56rem; }
.dark\:bg-amber-900\/10:is(.dark *) { background-color: rgba(120,53,15,.1); }
@media (min-width: 768px) {
  .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
  .md\:p-8 { padding: 2rem; }
}
@media (min-width: 1280px) {
  .xl\:max-w-3xl { max-width: 48rem; }
  .xl\:max-w-5xl { max-width: 64rem; }
}

/* ── ITSA easy-mode: shoebox + income-doc scanners (2 Jul 2026) ──────
 * Tailwind classes used by the tax-document uploaders that the pre-built
 * style.css doesn't include. Added here (the sanctioned escape hatch) so the
 * blades stay idiomatic Tailwind and render correctly in light + dark. */
.bg-indigo-50\/50 { background-color: rgba(238, 242, 255, 0.5); }
.text-indigo-800  { color: #3730a3; }
.opacity-60       { opacity: 0.6; }
.dark .dark\:bg-indigo-900\/10 { background-color: rgba(49, 46, 129, 0.1); }
.dark .dark\:hover\:border-indigo-600:hover { border-color: #4f46e5; }

/* Disabled-button dimming + emerald intro-card dark border — used app-wide
 * but absent from the pre-built style.css (2 Jul 2026). */
.disabled\:opacity-50:disabled { opacity: 0.5; }
.dark .dark\:border-emerald-800 { border-color: #065f46; }

/* Native file-input button styling (::file-selector-button) for the ITSA
 * income-doc scanners — otherwise the browser shows its default grey button. */
.file\:mr-2::file-selector-button          { margin-right: 0.5rem; }
.file\:py-1::file-selector-button          { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.file\:py-1\.5::file-selector-button       { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.file\:px-3::file-selector-button          { padding-left: 0.75rem; padding-right: 0.75rem; }
.file\:rounded-sm::file-selector-button    { border-radius: 0.125rem; }
.file\:border-0::file-selector-button      { border: 0; }
.file\:text-xs::file-selector-button       { font-size: 0.75rem; line-height: 1rem; }
.file\:font-semibold::file-selector-button { font-weight: 600; }
.file\:bg-indigo-100::file-selector-button { background-color: #e0e7ff; }
.file\:text-indigo-700::file-selector-button { color: #4338ca; }

/* ── 🇳🇿 GARAGE PROFILE: USE THE SCREEN ON A DESKTOP (14 Jul 2026) ───────────────
 *
 * Harshani (Qulifix Automotive, Hamilton NZ) asked to "change background colorful way".
 * She was reaching for the only lever she could see. The real problem on her page was
 * never the colour — it was the PROPORTIONS:
 *
 *   1. The services grid says `lg:grid-cols-4`, and that class DOES NOT EXIST in the
 *      pre-built stylesheet, so it silently no-ops. She was stuck at THREE columns, so
 *      seventeen services became six long rows of stretched cards. It read as empty and
 *      repetitive — which is exactly what she was trying to paint over.
 *      [[reference_style_min_css_is_pruned_prebuilt]]
 *
 *   2. Navbar/hero/footer were capped at max-w-5xl (1024px) while the main content ran to
 *      max-w-7xl (1280px). The header was visibly narrower than the content under it. You
 *      feel that before you can name it.
 *
 *   3. ~600px of dead space either side on a 1900px screen.
 *
 * ⛔ WE DO NOT GO FULL-BLEED. Text running the width of a 1900px monitor is genuinely
 * harder to read — the eye loses the line on the return sweep, which is why every serious
 * site caps its content width. Edge-to-edge would trade a mild flaw for a worse one.
 *
 * So: ONE shared shell that all four sections use (they finally line up), growing with the
 * display; and a card grid that actually gets its columns, so the gap is filled with
 * CONTENT rather than paint.
 *
 * 📱 THE PHONE DOES NOT CHANGE. Every rule below is behind min-width: 1280px. Most
 * mechanics' customers are on a phone and will never see any of this.
 */
@media (min-width: 1280px) {
  .gp-shell { max-width: 1400px !important; }
}
@media (min-width: 1600px) {
  .gp-shell { max-width: 1560px !important; }
}
@media (min-width: 1920px) {
  .gp-shell { max-width: 1720px !important; }
}

/* The services card grid can genuinely use the room — cards scale, prose would not. */
@media (min-width: 1024px) {
  .gp-grid-services { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1600px) {
  .gp-grid-services { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* ── 🇳🇿 GARAGE HERO — grow the card with the page, and keep the text readable ──────
 *
 * The hero card was pinned at max-width:48rem. That was right when the shell stopped at
 * 1280px; once the shell reached 1720px the card looked like a small box marooned in a
 * large photograph. It grows with the screen now.
 *
 * The paragraph is capped by MEASURE (~62 characters), not by the card. Readability is a
 * function of LINE LENGTH, not of box width — a centred paragraph running the full width of
 * a wide card is harder to read, not easier, because the eye cannot find the start of the
 * next line. Widening the card and NOT capping the text would have made it worse.
 *
 * 📱 Phone unchanged: the base max-width stays inline on the element; these only bite ≥1280px.
 */
@media (min-width: 1280px) {
  .gp-hero-card { max-width: 56rem !important; }
}
@media (min-width: 1600px) {
  .gp-hero-card { max-width: 64rem !important; }
}

/* ~62 characters is the readable measure for centred body text. */
.gp-hero-about { max-width: 62ch; }

/* ── 🇳🇿 A TALLER LOGO NEEDS A TALLER BAR ────────────────────────────────────────
 *
 * Un-cropping Harshani's logo fixed the SIDES being sliced off, but not the fine print
 * INSIDE her badge — at 48px tall it renders around 7px and is unreadable. Width was no
 * longer the constraint; HEIGHT was. But the navbar row is h-16 (64px), so a 60-64px logo
 * has nowhere to go.
 *
 * So the bar grows too — 64px → 80px on a desktop, where there is room to spare. The hero's
 * top padding and the scroll offset MUST move with it, or the fixed header simply covers the
 * content it is supposed to sit above. Changing one without the others is how you ship a
 * header that eats the first line of every section.
 *
 * 📱 Phone: not one pixel. The bar stays 64px, the logo stays 36px, and the minimal header
 * is right for a small screen.
 */
@media (min-width: 1024px) {
  .gp-nav-row { height: 5rem !important; }   /* 64px → 80px */
  .gp-hero    { padding-top: 6rem !important; }
  section     { scroll-margin-top: 88px; }
}