/* ============================================================
   GLOBAL STYLES — WeWeb Project
   Contains: Date Range Picker (Vue Datepicker) + Custom Scrollbar
   ============================================================ */


/* ============================================================
   1. CUSTOM SCROLLBAR — neutral slate palette
   ============================================================ */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #CAD5E2 #F1F5F9;
}

/* Chrome, Edge, Safari — global scrollbar */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 9999px;
}

*::-webkit-scrollbar-thumb {
  background: #CAD5E2;
  border-radius: 9999px;
  border: 2px solid #F1F5F9;
  transition: background 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

*::-webkit-scrollbar-thumb:active {
  background: #62748E;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}


/* ============================================================
   2. DATE RANGE PICKER (Vue Datepicker - .dp__*)
   ============================================================ */

.dp__menu {
  --dp-background-color: #FFFFFF;
  --dp-text-color: #314158;
  --dp-hover-color: #F1F5F9;
  --dp-hover-text-color: #193CB8;
  --dp-primary-color: #155DFC;
  --dp-primary-text-color: #FFFFFF;
  --dp-secondary-color: #90A1B9;
  --dp-border-color: #E2E8F0;
  --dp-menu-border-color: #E2E8F0;
  --dp-border-color-hover: #8EC5FF;
  --dp-disabled-color: #F8FAFC;
  --dp-icon-color: #62748E;
  --dp-highlight-color: #EFF6FF;
  --dp-font-family: 'Inter', sans-serif;
  --dp-border-radius: 4px;
  --dp-cell-border-radius: 9999px;
  --dp-font-size: 13px;
  --dp-cell-size: 32px;
  --dp-cell-padding: 5px;
  --dp-menu-min-width: 480px;

  border-radius: 4px !important;
  border: 0.8px solid #E2E8F0 !important;
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0 !important;
}

.dp__arrow_top,
.dp__arrow_bottom {
  display: none !important;
}

/* Month / year header */
.dp__month_year_row {
  padding: 16px 20px 8px !important;
  height: auto !important;
}

.dp__month_year_select {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #1D293D !important;
  height: auto !important;
}

.dp__month_year_select:hover {
  background: #F1F5F9 !important;
  border-radius: 4px !important;
}

/* Month navigation arrows */
.dp__month_year_col_nav .dp__inner_nav {
  color: #62748E !important;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
}

.dp__month_year_col_nav .dp__inner_nav:hover {
  background: #F1F5F9 !important;
}

.dp__icon {
  fill: #62748E !important;
  color: #62748E !important;
  width: 18px;
  height: 18px;
}

/* Weekday header (Mo, Tu, We...) */
.dp__calendar_header {
  padding: 0 !important;
  margin-bottom: 4px;
}

.dp__calendar_header_item {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  line-height: 15px !important;
  letter-spacing: 0.4px !important;
  color: #90A1B9 !important;
  text-transform: none !important;
  height: 15px !important;
  padding: 0 !important;
}

.dp__calendar_header_separator {
  background: transparent !important;
  display: none !important;
}

/* Day cells */
.dp__calendar_item {
  padding: 0 !important;
}

.dp__cell_inner {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 19.5px !important;
  color: #314158 !important;
  border-radius: 9999px !important;
  border: none !important;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  font-weight: 400;
}

.dp__cell_offset {
  color: #CBD5E1 !important;
}

/* Today - circle with light blue border */
.dp__today {
  border: 0.8px solid #8EC5FF !important;
  color: #155DFC !important;
  background: transparent !important;
  font-weight: 400 !important;
}

/* Hover state */
.dp__cell_inner:hover:not(.dp__active_date):not(.dp__range_start):not(.dp__range_end):not(.dp__cell_disabled) {
  background: #F1F5F9 !important;
  color: #193CB8 !important;
  border: none !important;
}

/* Selected date / range start / range end */
.dp__active_date,
.dp__range_start,
.dp__range_end {
  background: #155DFC !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  border: none !important;
}

/* Days between range start and end */
.dp__range_between {
  background: #EFF6FF !important;
  color: #193CB8 !important;
  border-radius: 0 !important;
  border: none !important;
}

/* Range endpoints — pale background half for visual connection */
.dp__range_start {
  position: relative;
}
.dp__range_start::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: #EFF6FF;
  z-index: -1;
}

.dp__range_end {
  position: relative;
}
.dp__range_end::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  background: #EFF6FF;
  z-index: -1;
}

/* Disabled days */
.dp__cell_disabled {
  color: #CBD5E1 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

/* Two-month layout (range picker) */
.dp__flex_display {
  gap: 20px;
  padding: 0 20px 16px;
}

.dp__instance_calendar + .dp__instance_calendar {
  border-left: 1px solid #F1F5F9;
  padding-left: 20px;
}

/* Footer with Cancel + Done buttons */
.dp__action_row {
  background: rgba(248, 250, 252, 0.7) !important;
  border-top: 0.8px solid #F1F5F9 !important;
  padding: 12px 20px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dp__selection_preview {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 19.5px !important;
  color: #62748E !important;
  font-weight: 400 !important;
}

.dp__action_buttons {
  display: flex !important;
  gap: 8px !important;
  align-items: center;
}

/* Cancel button */
.dp__action_cancel {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 19.5px !important;
  color: #314158 !important;
  background: #FFFFFF !important;
  border: 0.8px solid #E2E8F0 !important;
  border-radius: 4px !important;
  padding: 6px 15px !important;
  height: auto !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dp__action_cancel:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #1D293D !important;
}

/* Done / Select button */
.dp__action_select {
  background: #155DFC !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 19.5px !important;
  border-radius: 4px !important;
  padding: 6px 15px !important;
  border: none !important;
  height: auto !important;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dp__action_select:hover {
  background: #1447D1 !important;
}