/* Operations Hub — dashboard styles
   Tách riêng khỏi index.html. Lưu ý: file CSS ngoài KHÔNG hiểu @apply của Tailwind
   nên các class brand được viết thành CSS thuần (giá trị lấy từ tailwind.config). */

/* Nav item đang chọn — sáng: brand-50 / brand-700 */
.nav-item.active {
  background-color: #f0f4ff;   /* brand-50  */
  color: #2d42c9;              /* brand-700 */
  font-weight: 600;
}
.dark .nav-item.active {
  background-color: rgba(79, 110, 247, 0.15);
  color: #a5b4fc;
}

#sidebar { transition: transform 0.25s ease; }
#overlay { transition: opacity 0.25s ease; }

/* Scrollbar mảnh */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* Flatpickr — dark mode */
.dark .flatpickr-calendar { background: #1e293b; border-color: #334155; box-shadow: 0 3px 13px rgba(0,0,0,.5); }
.dark .flatpickr-calendar.arrowTop:before, .dark .flatpickr-calendar.arrowTop:after { border-bottom-color: #1e293b; }
.dark .flatpickr-calendar.arrowBottom:before, .dark .flatpickr-calendar.arrowBottom:after { border-top-color: #1e293b; }
.dark .flatpickr-months .flatpickr-month, .dark .flatpickr-weekdays, .dark span.flatpickr-weekday { background: #1e293b; color: #cbd5e1; fill: #cbd5e1; }
.dark .flatpickr-current-month input.cur-year, .dark .flatpickr-current-month .flatpickr-monthDropdown-months { color: #e2e8f0; }
.dark .flatpickr-day { color: #e2e8f0; }
.dark .flatpickr-day:hover, .dark .flatpickr-day.prevMonthDay:hover, .dark .flatpickr-day.nextMonthDay:hover { background: #334155; border-color: #334155; }
.dark .flatpickr-day.today { border-color: #4f6ef7; }
.dark .flatpickr-day.selected, .dark .flatpickr-day.startRange, .dark .flatpickr-day.endRange { background: #3b55e6; border-color: #3b55e6; color: #fff; }
.dark .flatpickr-day.inRange { background: #334155; border-color: #334155; box-shadow: -5px 0 0 #334155, 5px 0 0 #334155; }
.dark .flatpickr-day.flatpickr-disabled, .dark .flatpickr-day.prevMonthDay, .dark .flatpickr-day.nextMonthDay { color: #64748b; }
.dark .flatpickr-months .flatpickr-prev-month svg, .dark .flatpickr-months .flatpickr-next-month svg { fill: #cbd5e1; }
.dark .numInputWrapper span { border-color: #334155; }