@tailwind base;
@tailwind components;
@tailwind utilities;

/* Force a consistent light UI regardless of OS/browser theme preference. */
:root,
html,
body {
    color-scheme: light;
}

/* ===================== DARK MODE (ZAKOMENTARISANO - test) =====================
html.dark {
    color-scheme: dark;
}
html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}
* Page background
html.dark .max-w-7xl { background-color: #0f172a; }

* White / light backgrounds -> dark equivalents
html.dark .bg-white                { background-color: #1e293b !important; }
html.dark .bg-gray-50              { background-color: #1a2535 !important; }
html.dark .bg-gray-100             { background-color: #273549 !important; }
html.dark .bg-gray-200             { background-color: #334155 !important; }

* Gradient backgrounds used on cards
html.dark .from-blue-50            { --tw-gradient-from: #0d1f35 !important; }
html.dark .from-blue-100           { --tw-gradient-from: #0d2a4a !important; }
html.dark .via-blue-50             { --tw-gradient-via: #0d1f35 !important; }
html.dark .to-blue-100             { --tw-gradient-to: #0d2a4a !important; }
html.dark .to-cyan-50              { --tw-gradient-to: #0a2030 !important; }
html.dark .via-cyan-100            { --tw-gradient-via: #0a2030 !important; }
html.dark .from-gray-50            { --tw-gradient-from: #1a2535 !important; }
html.dark .from-gray-100           { --tw-gradient-from: #273549 !important; }
html.dark .via-gray-100            { --tw-gradient-via: #273549 !important; }
html.dark .to-gray-100             { --tw-gradient-to: #273549 !important; }
html.dark .from-cyan-50            { --tw-gradient-from: #0a2030 !important; }
html.dark .from-purple-50          { --tw-gradient-from: #1e1030 !important; }
html.dark .to-pink-50              { --tw-gradient-to: #2a1020 !important; }
html.dark .from-teal-50            { --tw-gradient-from: #071a1a !important; }
html.dark .to-emerald-50           { --tw-gradient-to: #071a12 !important; }
html.dark .from-green-50           { --tw-gradient-from: #071a12 !important; }
html.dark .to-emerald-50           { --tw-gradient-to: #071a12 !important; }
html.dark .from-violet-50          { --tw-gradient-from: #1e1030 !important; }
html.dark .to-purple-50            { --tw-gradient-to: #1e1030 !important; }
html.dark .from-orange-50          { --tw-gradient-from: #1a1006 !important; }
html.dark .to-amber-50             { --tw-gradient-to: #1a1006 !important; }

* Text colours
html.dark .text-gray-900:not(.event-block, .event-block *)           { color: #f1f5f9 !important; }
html.dark .text-gray-800:not(.event-block, .event-block *)           { color: #e2e8f0 !important; }
html.dark .text-gray-700:not(.event-block, .event-block *)           { color: #cbd5e1 !important; }
html.dark .text-gray-600:not(.event-block, .event-block *)           { color: #94a3b8 !important; }
html.dark .text-gray-500:not(.event-block, .event-block *)           { color: #64748b !important; }
html.dark .text-gray-400:not(.event-block, .event-block *)           { color: #475569 !important; }
html.dark .text-blue-900:not(.event-block, .event-block *)           { color: #93c5fd !important; }
html.dark .text-blue-700:not(.event-block, .event-block *)           { color: #60a5fa !important; }
html.dark .text-teal-700:not(.event-block, .event-block *)           { color: #5eead4 !important; }

* Borders
html.dark .border-gray-100         { border-color: #1e293b !important; }
html.dark .border-gray-200         { border-color: #334155 !important; }
html.dark .border-gray-300         { border-color: #475569 !important; }
html.dark .border-blue-200         { border-color: #1d3a5f !important; }
html.dark .border-t-gray-200       { border-color: #334155 !important; }

* Table/schedule grid
html.dark .border-r               { border-color: #334155 !important; }
html.dark .border-b               { border-color: #334155 !important; }
html.dark .border-b-2             { border-color: #334155 !important; }

* Inputs & selects
html.dark input:not([type="color"]):not([type="checkbox"]),
html.dark select,
html.dark textarea {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}
html.dark input:focus,
html.dark select:focus { border-color: #3b82f6 !important; }
html.dark input::placeholder { color: #64748b !important; }

* Hover rows
html.dark .hover\:bg-blue-50:hover  { background-color: #0d2a4a !important; }
html.dark .hover\:bg-gray-50:hover  { background-color: #1a2535 !important; }

* Sticky table header
html.dark thead th { background-color: #1e293b !important; }
html.dark thead { border-bottom-color: #334155 !important; }

* Disabled fields
html.dark .disabled\:bg-gray-100,
html.dark [disabled] { background-color: #273549 !important; color: #64748b !important; }

* Scrollbar for dark mode
html.dark ::-webkit-scrollbar-track { background: #1e293b; }
html.dark ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
* ==================== END DARK MODE ====================
*/

/* V-Calendar Custom Styles */
.vc-purple .vc-header {
    background-color: rgb(109 40 217) !important;
}

.vc-purple .vc-weeks {
    background-color: white !important;
}

.vc-purple .vc-weekday {
    color: rgb(55 65 81) !important;
}

.vc-purple .vc-day-content {
    color: rgb(31 41 55) !important;
}

.vc-purple .vc-day-content:hover {
    background-color: rgb(237 233 254) !important;
}

.vc-purple .vc-highlight {
    background-color: rgb(109 40 217) !important;
}

.vc-purple .vc-title {
    color: white !important;
    font-weight: 600 !important;
}

.vc-purple .vc-arrow {
    color: white !important;
}

.vc-purple .vc-nav-title {
    color: rgb(31 41 55) !important;
    font-weight: 600 !important;
}

.vc-purple .vc-nav-item {
    color: rgb(31 41 55) !important;
}

.vc-purple .vc-nav-item:hover {
    background-color: rgb(237 233 254) !important;
}

.vc-purple .vc-nav-item.is-active {
    background-color: rgb(109 40 217) !important;
    color: white !important;
}