/*
 * Dark mode. Entirely opt-in: nothing here applies unless <html> carries the
 * `dark` class, which only happens when a user flips the switch in the profile
 * menu (choice is kept per device in localStorage under "sdTheme"; see the
 * head script in layouts/app.blade.php). Light mode is the default and is
 * untouched by this file.
 *
 * The app styles everything with Tailwind utility classes, so dark mode works by
 * re-pointing each color utility the views use (found by scanning resources/views).
 * If a view starts using a new color utility, add its dark counterpart here.
 */

html.dark {
    color-scheme: dark;
    --level-empty: #2b313b;
}

html.dark body { background-color: #0e1014; color: #e5e7eb; }

/* ---- Surfaces ---- */
html.dark .bg-white { background-color: #171a20; }
html.dark .bg-white\/95 { background-color: rgba(23, 26, 32, 0.95); }
html.dark .bg-gray-50, html.dark .bg-slate-50 { background-color: #1b1f26; }
html.dark .bg-gray-100, html.dark .bg-slate-100 { background-color: #222730; }
html.dark .bg-gray-200, html.dark .bg-slate-200 { background-color: #2b313b; }
html.dark .bg-gray-300 { background-color: #363d49; }
html.dark .hover\:bg-gray-50:hover { background-color: #1f242c; }
html.dark .hover\:bg-gray-100:hover { background-color: #272d37; }
html.dark .hover\:bg-gray-200:hover { background-color: #2f3641; }
html.dark .focus\:bg-white:focus { background-color: #171a20; }

/* Primary "dark pill" buttons, nav highlight, tooltips: light-on-dark flips to dark-on-light */
html.dark .bg-gray-900, html.dark .bg-slate-900 { background-color: #e8eaee; color: #111827; }
html.dark .bg-gray-900.text-white, html.dark .bg-slate-900.text-white,
html.dark .bg-gray-900 .text-white, html.dark .bg-slate-900 .text-white { color: #111827; }
html.dark .hover\:bg-slate-800:hover { background-color: #ffffff; }
html.dark .accent-gray-900 { accent-color: #e8eaee; }

/* ---- Text ---- */
html.dark .text-gray-900, html.dark .text-slate-900, html.dark .text-black { color: #f3f4f6; }
html.dark .text-slate-800, html.dark .hover\:text-gray-800:hover { color: #e5e7eb; }
html.dark .text-gray-700, html.dark .text-slate-700 { color: #d1d5db; }
html.dark .text-gray-600, html.dark .text-slate-600 { color: #aeb4be; }
html.dark .text-gray-500, html.dark .text-slate-500 { color: #9aa1ad; }
html.dark .text-gray-400, html.dark .text-slate-400 { color: #7b8290; }
html.dark .text-gray-300 { color: #5f6674; }
html.dark .hover\:text-gray-700:hover, html.dark .hover\:text-slate-700:hover, html.dark .hover\:text-slate-900:hover { color: #f3f4f6; }
html.dark .placeholder\:text-slate-500::placeholder, html.dark .placeholder\:text-slate-400::placeholder { color: #6b7280; }

/* ---- Borders / dividers ---- */
html.dark .border-gray-100 { border-color: #252a33; }
html.dark .border-gray-200, html.dark .border-slate-200, html.dark .border-slate-200\/80 { border-color: #2b313b; }
html.dark .border-gray-300, html.dark .border-slate-300 { border-color: #394150; }
html.dark .border-gray-400, html.dark .hover\:border-gray-400:hover { border-color: #566070; }
html.dark .border-gray-800, html.dark .border-gray-900 { border-color: #e8eaee; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #252a33; }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2b313b; }
html.dark .focus\:border-sky-400:focus { border-color: #38bdf8; }
html.dark .focus\:ring-sky-100:focus, html.dark .focus\:ring-sky-200:focus,
html.dark .focus\:ring-slate-200:focus, html.dark .focus\:ring-orange-200:focus { --tw-ring-color: rgba(56, 189, 248, 0.28); }
html.dark [class*="shadow-slate"] { --tw-shadow-color: rgba(0, 0, 0, 0.5); }

/* ---- Selected option rows (radio/checkbox cards) ---- */
html.dark [class*="has-[:checked]:border-gray-900"]:has(:checked) { border-color: #e8eaee; }
html.dark [class*="has-[:checked]:bg-gray-50"]:has(:checked) { background-color: #262c36; }
html.dark [class*="has-[:checked]:bg-gray-100"]:has(:checked) { background-color: #2b313b; }

/* ---- Form controls ---- */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
html.dark select, html.dark textarea {
    background-color: #0e1014;
    color: #e5e7eb;
    border-color: #394150;
}
html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled,
html.dark input[readonly] { background-color: #1b1f26; color: #9aa1ad; }
html.dark ::placeholder { color: #6b7280; opacity: 1; }
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0e1014 inset;
    -webkit-text-fill-color: #e5e7eb;
    caret-color: #e5e7eb;
}

/* ---- Status colors: soft tinted chips ---- */
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12); }
html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.16); }
html.dark .hover\:bg-green-200:hover { background-color: rgba(34, 197, 94, 0.28); }
html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800, html.dark .text-emerald-700 { color: #86efac; }
html.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.35); }

html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12); }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.16); }
html.dark .hover\:bg-amber-200:hover { background-color: rgba(245, 158, 11, 0.28); }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d; }
html.dark .text-amber-900 { color: #fde68a; }
html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.35); }

html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.10); }
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.15); }
html.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.12); }
html.dark .hover\:bg-red-200:hover { background-color: rgba(239, 68, 68, 0.28); }
html.dark .text-red-600 { color: #f87171; }
html.dark .text-red-700, html.dark .text-red-800 { color: #fca5a5; }
html.dark .hover\:text-red-800:hover { color: #fecaca; }
html.dark .border-red-200, html.dark .border-red-300 { border-color: rgba(239, 68, 68, 0.4); }

html.dark .bg-blue-50\/50 { background-color: rgba(59, 130, 246, 0.10); }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.16); }
html.dark .text-blue-800 { color: #93c5fd; }
html.dark .hover\:text-blue-700:hover { color: #93c5fd; }

/* ---- Logo swap ---- */
html.dark .theme-logo-light { display: none !important; }
html.dark .theme-logo-dark { display: inline-block !important; }

/* ---- Profile-menu dark mode switch (works in both themes) ---- */
.theme-switch { margin-left: auto; width: 34px; height: 20px; border-radius: 999px; background: #d1d5db; position: relative; display: inline-block; flex-shrink: 0; transition: background-color .15s; }
.theme-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; }
html.dark .theme-switch { background: #d9822f; }
html.dark .theme-switch-knob { left: 16px; }

/* ---- Mobile history cards (table turned into cards below lg) ---- */
html.dark .js-history-table tbody > tr { border-color: #2b313b !important; }
html.dark .js-history-table td:not(:last-child) { border-bottom-color: #252a33 !important; }
html.dark .js-history-table td::before { color: #9aa1ad; }

/* ---- "Powered by DealerPro Logic" mark (dark navy artwork) -> light monochrome ---- */
html.dark img[src*="dealerprologic.png"] { filter: brightness(0) invert(1); opacity: 0.8; }

/* ---- ShuttleDirector additions ---- */
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.10); }
html.dark .text-blue-700 { color: #93c5fd; }
html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.35); }
html.dark .bg-violet-100 { background-color: rgba(139, 92, 246, 0.18); }
html.dark .text-violet-800 { color: #c4b5fd; }
html.dark .bg-green-700, html.dark .hover\:bg-green-800:hover { background-color: #15803d; }
html.dark .ring-gray-900 { --tw-ring-color: #e8eaee; }