/* DARK BLACK & WHITE GOLD THEME OVERRIDE */
/* Tema menyatu dengan banner MPO08: black, graphite, silver white, gold accent */

.date-picker {
  color: #f5f5f5;
  background-color: #050505;
}

.date-picker-wrapper {
  border: 1px solid #d4af37;
  background: linear-gradient(180deg, #141414 0%, #050505 100%);
  color: #f5f5f5;
  box-shadow:
    0 0 12px rgba(212, 175, 55, 0.35),
    0 0 24px rgba(255, 255, 255, 0.08),
    inset 0 0 18px rgba(255, 255, 255, 0.05);
}

.date-picker-wrapper b {
  color: #ffffff;
}

.date-picker-wrapper a {
  color: #d4af37;
}

.date-picker-wrapper a:hover {
  color: #ffffff;
}

.date-picker-wrapper .month-name {
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(212, 175, 55, 0.55),
    0 0 12px rgba(255, 255, 255, 0.12);
}

.date-picker-wrapper .month-wrapper {
  border: 1px solid #b8962e;
  background: linear-gradient(180deg, #181818 0%, #070707 100%);
  box-shadow: inset 0 0 18px rgba(212, 175, 55, 0.08);
}

.date-picker-wrapper .month-wrapper table .week-name {
  color: #d4af37;
}

.date-picker-wrapper .month-wrapper table .day {
  color: #6f6f6f;
}

.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
  color: #454545;
}

.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
  color: #f5f5f5;
}

.date-picker-wrapper .month-wrapper table .day.checked {
  background: linear-gradient(135deg, #d4af37 0%, #fff0a6 50%, #b8962e 100%);
  color: #050505;
  font-weight: 700;
  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.55),
    inset 0 0 8px rgba(255, 255, 255, 0.20);
}

.date-picker-wrapper .month-wrapper table .day.toMonth.hovering {
  background: rgba(212, 175, 55, 0.22);
  color: #ffffff;
  box-shadow: inset 0 0 8px rgba(212, 175, 55, 0.25);
}

.date-picker-wrapper .month-wrapper table .day.real-today {
  background: linear-gradient(135deg, #ffffff 0%, #d7d7d7 50%, #8f8f8f 100%);
  color: #050505;
  font-weight: 700;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.35),
    0 0 14px rgba(212, 175, 55, 0.18);
}

.date-picker-wrapper .month-wrapper table .day.real-today.checked,
.date-picker-wrapper .month-wrapper table .day.real-today.hovering {
  background: linear-gradient(135deg, #d4af37 0%, #fff0a6 50%, #b8962e 100%);
  color: #050505;
}

.date-picker-wrapper table .caption {
  color: #ffffff;
}

.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev {
  color: #d4af37;
}

.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
  background: #d4af37;
  color: #050505;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
}

.date-picker-wrapper .drp_top-bar {
  color: #f5f5f5;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {
  color: #ffffff;
}

.date-picker-wrapper .drp_top-bar.error .error-top {
  color: #ff4f6d;
}

.date-picker-wrapper .drp_top-bar .apply-btn {
  color: #050505;
  border: 1px solid #d4af37;
  background: linear-gradient(to bottom, #fff0a6, #d4af37, #8a6a12);
  font-weight: 700;
  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.35),
    inset 0 0 8px rgba(255, 255, 255, 0.25);
}

.date-picker-wrapper .drp_top-bar .apply-btn:hover {
  background: linear-gradient(to bottom, #ffffff, #d4af37);
  border-color: #fff0a6;
  color: #050505;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.65);
}

.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
  color: #777777;
  border: 1px solid #444444;
  background: #1a1a1a;
  box-shadow: none;
}

.date-picker-wrapper .first-date-selected,
.date-picker-wrapper .last-date-selected {
  background: linear-gradient(135deg, #d4af37 0%, #fff0a6 50%, #b8962e 100%) !important;
  color: #050505 !important;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.50);
}

.date-picker-wrapper .date-range-length-tip {
  background: linear-gradient(135deg, #ffffff 0%, #d7d7d7 50%, #8f8f8f 100%);
  color: #050505;
  font-weight: 700;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.35),
    0 0 14px rgba(212, 175, 55, 0.18);
}

.date-picker-wrapper .date-range-length-tip:after {
  border-top: 4px solid #d4af37;
}

.date-picker-wrapper .week-number {
  color: #d4af37;
}

.date-picker-wrapper .week-number.week-number-selected {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.55);
}

/* Gap / separator styling */
.date-picker-wrapper .gap {
  background-color: #d4af37;
}

.date-picker-wrapper .gap .gap-line .gap-1 {
  border-left: 8px solid #050505;
  border-top: 8px solid #141414;
  border-bottom: 8px solid #141414;
}

.date-picker-wrapper .gap .gap-line .gap-2 {
  border-left: 8px solid transparent;
  border-top: 8px solid #050505;
}

.date-picker-wrapper .gap .gap-line .gap-3 {
  border-left: 8px solid transparent;
  border-bottom: 8px solid #050505;
}

.date-picker-wrapper .gap .gap-top-mask,
.date-picker-wrapper .gap .gap-bottom-mask {
  background-color: #141414;
}
