/* ── MAXI CALENDAR & DASHBOARD CUSTOM STYLES ───────────────────────── */

/* 1. Global Reset & Theme Transitions */
* {
  transition-property: background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Light theme default background */
  background: radial-gradient(circle at top left, #f3f4f6, #e5e7eb) !important;
  background-attachment: fixed !important;
  color: #1f2937;
}

/* Dark theme overrides (when html has class .dark or data-theme="dark") */
html.dark body,
html[data-theme="dark"] body {
  background: radial-gradient(circle at top left, #111827, #030712) !important;
  background-attachment: fixed !important;
  color: #f3f4f6;
}

html.dark header,
html[data-theme="dark"] header {
  background-color: rgba(9, 13, 22, 0.8) !important;
  border-color: #1e293b !important;
}

html.dark header span.text-slate-900,
html[data-theme="dark"] header span.text-slate-900 {
  color: #ffffff !important;
}

html.dark nav,
html[data-theme="dark"] nav {
  background-color: rgba(15, 23, 42, 0.6) !important;
  border-color: #334155 !important;
}

html.dark .tab-btn,
html[data-theme="dark"] .tab-btn {
  color: #94a3b8;
}

html.dark .tab-btn[data-tab="dashboard"]:not(.text-blue-600),
html.dark .tab-btn:hover,
html[data-theme="dark"] .tab-btn[data-tab="dashboard"]:not(.text-blue-600),
html[data-theme="dark"] .tab-btn:hover {
  color: #ffffff;
}

html.dark .backdrop-blur-md,
html[data-theme="dark"] .backdrop-blur-md {
  background-color: rgba(17, 24, 39, 0.6) !important;
  border-color: rgba(51, 65, 85, 0.4) !important;
}

html.dark .backdrop-blur-md h3, 
html.dark .backdrop-blur-md h2,
html.dark .backdrop-blur-md h4,
html.dark .backdrop-blur-md span.text-slate-900,
html[data-theme="dark"] .backdrop-blur-md h3,
html[data-theme="dark"] .backdrop-blur-md h2,
html[data-theme="dark"] .backdrop-blur-md h4,
html[data-theme="dark"] .backdrop-blur-md span.text-slate-900 {
  color: #f3f4f6 !important;
}

html.dark input,
html.dark select,
html.dark textarea,
html.dark #drop-zone,
html.dark #area-filter-dropdown,
html.dark #type-filter-dropdown,
html.dark #calendar-title,
html.dark #cal-prev,
html.dark #cal-next,
html.dark #cal-today,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] #drop-zone,
html[data-theme="dark"] #area-filter-dropdown,
html[data-theme="dark"] #type-filter-dropdown,
html[data-theme="dark"] #calendar-title,
html[data-theme="dark"] #cal-prev,
html[data-theme="dark"] #cal-next,
html[data-theme="dark"] #cal-today {
  background-color: rgba(3, 7, 18, 0.6) !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

html.dark #drop-zone p.text-slate-700,
html.dark #drop-zone p.text-slate-400,
html[data-theme="dark"] #drop-zone p.text-slate-700,
html[data-theme="dark"] #drop-zone p.text-slate-400 {
  color: #94a3b8 !important;
}

html.dark .cal-view-btn,
html[data-theme="dark"] .cal-view-btn {
  color: #94a3b8;
}

html.dark .cal-view-btn:hover,
html[data-theme="dark"] .cal-view-btn:hover {
  color: #ffffff;
}

html.dark #calendar-body div,
html[data-theme="dark"] #calendar-body div {
  border-color: #1e293b !important;
}

html.dark #calendar-body .bg-slate-950\/70,
html[data-theme="dark"] #calendar-body .bg-slate-950\/70 {
  background-color: rgba(9, 13, 22, 0.7) !important;
}

html.dark #calendar-body .bg-slate-900\/10,
html[data-theme="dark"] #calendar-body .bg-slate-900\/10 {
  background-color: rgba(17, 24, 39, 0.2) !important;
}

html.dark #calendar-body .bg-slate-900\/10:hover,
html[data-theme="dark"] #calendar-body .bg-slate-900\/10:hover {
  background-color: rgba(17, 24, 39, 0.5) !important;
}

html.dark #calendar-body span.text-slate-400,
html[data-theme="dark"] #calendar-body span.text-slate-400 {
  color: #94a3b8 !important;
}

html.dark #top-contractors-list tr,
html[data-theme="dark"] #top-contractors-list tr {
  border-color: #1e293b !important;
}

html.dark #top-contractors-list tr:hover,
html[data-theme="dark"] #top-contractors-list tr:hover {
  background-color: rgba(17, 24, 39, 0.4) !important;
}

html.dark #top-contractors-list td,
html[data-theme="dark"] #top-contractors-list td {
  color: #cbd5e1 !important;
}

html.dark #modal-job-detail .bg-white,
html[data-theme="dark"] #modal-job-detail .bg-white {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}

html.dark #modal-job-detail span.text-slate-900,
html[data-theme="dark"] #modal-job-detail span.text-slate-900 {
  color: #ffffff !important;
}

html.dark #modal-job-detail span.text-slate-700,
html[data-theme="dark"] #modal-job-detail span.text-slate-700 {
  color: #cbd5e1 !important;
}

/* 2. Glassmorphism Utilities */
.backdrop-blur-xl {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 3. Hide Scrollbars but keep functionality */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Custom Scrollbar for list and settings */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.15);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.3);
}

/* 4. Custom animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-panel:not(.hidden) {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 5. Custom Checkbox styles */
input[type="checkbox"] {
  border-color: #cbd5e1;
  background-color: #ffffff;
}
input[type="checkbox"]:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

html.dark input[type="checkbox"],
html[data-theme="dark"] input[type="checkbox"] {
  border-color: #334155;
  background-color: #090d16;
}

/* 6. Calendar Day cell custom badges */
#calendar-body .bg-blue-500\/5 {
  border-color: rgba(59, 130, 246, 0.4) !important;
}

/* Dropdown shadow */
.dropdown-container div {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

html.dark .dropdown-container div,
html[data-theme="dark"] .dropdown-container div {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}