@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

html.dark { color-scheme: dark; }
html.dark body { background: #020617 !important; color: #cbd5e1; }
html.dark .bg-white, html.dark .bg-white\/90, html.dark .bg-white\/95 { background-color: #0f172a !important; }
html.dark .bg-slate-50, html.dark .bg-slate-50\/70, html.dark .bg-slate-50\/80 { background-color: #111c30 !important; }
html.dark .bg-slate-100 { background-color: #1e293b !important; }
html.dark .border-slate-100, html.dark .border-slate-200 { border-color: #263449 !important; }
html.dark .text-slate-950, html.dark .text-slate-900, html.dark .text-slate-800 { color: #f1f5f9 !important; }
html.dark .text-slate-700, html.dark .text-slate-600 { color: #cbd5e1 !important; }
html.dark .text-slate-500, html.dark .text-slate-400 { color: #94a3b8 !important; }
html.dark .form-input { border-color: #334155; background: #111c30; color: #f8fafc; }
html.dark .form-input:focus { border-color: #3b82f6; background: #0f172a; box-shadow: 0 0 0 4px rgb(30 64 175 / .25); }
html.dark .form-label { color: #cbd5e1; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; }
html.dark tbody tr:hover { background-color: rgb(30 41 59 / .65) !important; }

/* Shared dark-mode surfaces used by all create and edit forms. */
html.dark .bg-blue-50,
html.dark .bg-blue-50\/60,
html.dark .bg-blue-50\/70 { background-color: rgb(30 58 138 / .22) !important; }
html.dark .bg-violet-50,
html.dark .bg-violet-50\/60 { background-color: rgb(76 29 149 / .22) !important; }
html.dark .bg-emerald-50,
html.dark .bg-emerald-50\/40,
html.dark .bg-emerald-50\/60 { background-color: rgb(6 78 59 / .22) !important; }
html.dark .bg-amber-50,
html.dark .bg-amber-50\/40,
html.dark .bg-amber-50\/60 { background-color: rgb(120 53 15 / .22) !important; }
html.dark .bg-orange-50 { background-color: rgb(124 45 18 / .24) !important; }
html.dark .bg-red-50 { background-color: rgb(127 29 29 / .22) !important; }
html.dark .bg-slate-50\/60 { background-color: rgb(30 41 59 / .72) !important; }
html.dark .bg-blue-100 { background-color: rgb(30 64 175 / .32) !important; }
html.dark .bg-violet-100 { background-color: rgb(91 33 182 / .32) !important; }
html.dark .bg-emerald-100 { background-color: rgb(5 150 105 / .24) !important; }
html.dark .bg-amber-100 { background-color: rgb(180 83 9 / .25) !important; }
html.dark .bg-red-100 { background-color: rgb(185 28 28 / .25) !important; }

html.dark .border-blue-100,
html.dark .border-blue-200 { border-color: rgb(59 130 246 / .32) !important; }
html.dark .border-violet-100,
html.dark .border-violet-200 { border-color: rgb(139 92 246 / .32) !important; }
html.dark .border-indigo-100,
html.dark .border-indigo-200 { border-color: rgb(99 102 241 / .32) !important; }
html.dark .border-emerald-100,
html.dark .border-emerald-200 { border-color: rgb(16 185 129 / .30) !important; }
html.dark .border-amber-100,
html.dark .border-amber-200 { border-color: rgb(245 158 11 / .30) !important; }
html.dark .border-orange-100,
html.dark .border-orange-200 { border-color: rgb(249 115 22 / .30) !important; }
html.dark .border-red-100,
html.dark .border-red-200 { border-color: rgb(239 68 68 / .32) !important; }

html.dark .from-blue-50 { --tw-gradient-from: rgb(30 58 138 / .30) !important; }
html.dark .from-violet-50 { --tw-gradient-from: rgb(76 29 149 / .30) !important; }
html.dark .from-violet-50\/60 { --tw-gradient-from: rgb(76 29 149 / .24) !important; }
html.dark .from-emerald-50 { --tw-gradient-from: rgb(6 78 59 / .30) !important; }
html.dark .from-amber-50 { --tw-gradient-from: rgb(120 53 15 / .30) !important; }
html.dark .to-white { --tw-gradient-to: #0f172a !important; }

html.dark .text-blue-600,
html.dark .text-blue-700 { color: #60a5fa !important; }
html.dark .text-violet-600,
html.dark .text-violet-700 { color: #a78bfa !important; }
html.dark .text-emerald-600,
html.dark .text-emerald-700 { color: #34d399 !important; }
html.dark .text-amber-600,
html.dark .text-amber-700 { color: #fbbf24 !important; }
html.dark .text-orange-600,
html.dark .text-orange-700 { color: #fb923c !important; }
html.dark .text-red-600,
html.dark .text-red-700 { color: #f87171 !important; }

html.dark select option { background-color: #0f172a; color: #f8fafc; }
html.dark input[type='date'],
html.dark input[type='datetime-local'],
html.dark input[type='time'] { color-scheme: dark; }
html.dark input[type='file']::file-selector-button {
    border: 0;
    border-radius: .5rem;
    background: #1e293b;
    color: #e2e8f0;
    padding: .45rem .7rem;
    margin-right: .75rem;
}
html.dark .cursor-not-allowed.bg-slate-100 { background-color: #1e293b !important; color: #94a3b8 !important; }
html.dark main input:not([type='checkbox']):not([type='radio']):not([type='file']),
html.dark main select,
html.dark main textarea {
    border-color: #334155;
    background-color: #111c30;
    color: #f8fafc;
}
html.dark main input:not([type='checkbox']):not([type='radio']):not([type='file']):focus,
html.dark main select:focus,
html.dark main textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgb(30 64 175 / .25);
}
html.dark main thead {
    border-color: #334155;
}
html.dark main tbody.divide-y > :not(:last-child),
html.dark main .divide-y > :not(:last-child) {
    border-color: #334155 !important;
}
html.dark main .border-t,
html.dark main .border-b {
    border-color: #334155;
}
html.dark main .shadow-sm,
html.dark main .shadow-lg { box-shadow: 0 10px 28px rgb(0 0 0 / .20) !important; }

/* Dashboard recent-booking hover state. */
html.dark .dashboard-recent-booking:hover {
    background-color: rgb(30 41 59 / .72) !important;
}
html.dark .dashboard-recent-booking:hover .dashboard-booking-icon {
    background-color: rgb(30 64 175 / .38) !important;
    color: #93c5fd !important;
}
html.dark .dashboard-recent-booking:hover .dashboard-booking-arrow {
    color: #60a5fa !important;
}

/* Vehicle details: keep every panel and nested card readable in dark mode. */
html.dark .vehicle-details-page > section,
html.dark .vehicle-details-page > div > section {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}
html.dark .vehicle-details-page > section:first-child > div:first-child {
    background-image: linear-gradient(to right, #064e3b, #134e4a) !important;
}
html.dark .vehicle-details-page > section:first-child > div:last-child {
    background-color: #0f172a !important;
}
html.dark .vehicle-details-page .bg-amber-50\/60,
html.dark .vehicle-details-page .bg-violet-50\/60 {
    background-color: rgb(30 41 59 / .88) !important;
    border-color: #334155 !important;
}
html.dark .vehicle-details-page .bg-slate-50\/60 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark .vehicle-details-page .bg-amber-50\/40 {
    background-color: #0f172a !important;
}
html.dark .vehicle-details-page .divide-slate-100 > :not(:last-child) {
    border-color: #334155 !important;
}
html.dark .vehicle-details-page .text-slate-800,
html.dark .vehicle-details-page .text-slate-900 {
    color: #f8fafc !important;
}
html.dark .vehicle-details-page .text-slate-700 {
    color: #cbd5e1 !important;
}

/* Use a lighter slate sidebar surface when the application is in dark mode. */
html.dark #sidebar {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    box-shadow: 12px 0 32px rgb(0 0 0 / .22) !important;
}
html.dark #sidebar > div:first-child,
html.dark #sidebar > div:last-child {
    border-color: #475569 !important;
}
html.dark #sidebar .sidebar-copy > p:first-child {
    color: #f8fafc !important;
}
html.dark #sidebar .sidebar-copy > p:last-child,
html.dark #sidebar .section-label {
    color: #94a3b8 !important;
}
html.dark #sidebar .sidebar-link:not(.bg-blue-600) {
    color: #cbd5e1 !important;
}
html.dark #sidebar .sidebar-link:not(.bg-blue-600):hover {
    color: #ffffff !important;
    background-color: #334155 !important;
}
html.dark #sidebar #pin-sidebar {
    color: #cbd5e1 !important;
}
html.dark #sidebar #pin-sidebar:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

@media (max-width: 639px) {
    #admin-content > header {
        min-width: 0;
    }
    #admin-content > header [data-global-back],
    #admin-content > header [href*="/admin/"] {
        flex-shrink: 0;
    }
    #admin-content > main .flex.items-center.justify-between {
        flex-wrap: wrap;
    }
    #admin-content > main .overflow-x-auto {
        margin-inline: -1rem;
        padding-inline: 1rem;
    }
    #admin-content > main section > .p-6,
    #admin-content > main form > .p-6 {
        padding: 1rem;
    }
}

@media (max-width: 420px) {
    #admin-content > header {
        padding-inline: .625rem;
    }
    #admin-content > header h1 {
        max-width: 5.5rem;
    }
    #admin-content > header > div:last-child > span:last-child {
        display: none;
    }
    #admin-content > header [data-global-back],
    #admin-content > header a[href*="/admin/"] {
        padding-inline: .625rem;
    }
}