/* 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). */

/* Một font duy nhất (Inter) cho cả dashboard.
   `.font-mono` được Tailwind map về Inter trong tailwind.config; thêm tabular-nums
   để các con số trong bảng vẫn thẳng cột dù không còn dùng font đẳng-rộng. */
.font-mono { font-variant-numeric: tabular-nums; }

/* Chữ menu đậm cho dễ đọc */
.nav-item { font-weight: 600; }

/* Nav item đang chọn — sáng: rose-50 / rose-800 */
.nav-item.active {
  background-color: #fff1f2;   /* rose-50  */
  color: #9f1239;              /* rose-800 */
  font-weight: 700;
}
.dark .nav-item.active {
  background-color: rgba(225, 29, 72, 0.16);  /* rose-600 mờ */
  color: #fb7185;                             /* rose-400 */
}

#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 — dùng chung font Inter */
.flatpickr-calendar, .flatpickr-calendar input { font-family: inherit; }

/* Flatpickr — màu chọn ngày theo brand rose (light mode).
   Dùng !important để đè rule mặc định của flatpickr (CDN) — nếu không,
   ô đầu khoảng (.startRange) vẫn giữ màu xanh #569ff7 của flatpickr. */
.flatpickr-day.today { border-color: #9f1239 !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus {
  background: #9f1239 !important; border-color: #9f1239 !important; color: #fff !important;
}
.flatpickr-day.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 #9f1239 !important; }
.flatpickr-day.inRange {
  background: #ffe4e6 !important; border-color: #ffe4e6 !important; color: #9f1239 !important;
  box-shadow: -5px 0 0 #ffe4e6, 5px 0 0 #ffe4e6 !important;
}

/* 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: #9f1239 !important; }
.dark .flatpickr-day.selected, .dark .flatpickr-day.startRange, .dark .flatpickr-day.endRange,
.dark .flatpickr-day.selected:hover, .dark .flatpickr-day.startRange:hover, .dark .flatpickr-day.endRange:hover { background: #9f1239 !important; border-color: #9f1239 !important; color: #fff !important; }
.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; }