.daterangepicker {
  /* Center positioning relative to viewport */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  
  color: #2d3748;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;

  /* Desktop Dimensions */
  width: 650px;
  max-width: 95vw;   /* IMPORTANT: prevents mobile overflow */
  min-width: 320px;

  padding: 10px;
  margin-top: 0;     /* Removed margin to ensure perfect centering */
  z-index: 3001;
  display: none;     /* Managed by JS toggle */

  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1em;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.06);
}

/* Hide default library popup arrows since it's now a centered modal */
.daterangepicker:before,
.daterangepicker:after {
  display: none !important;
}

/* =========================
   CALENDAR CORE
   ========================= */

.daterangepicker .drp-calendar {
  display: none;
  max-width: 50%; 
  overflow: visible !important;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

/* table */
.daterangepicker .calendar-table {
  width: 100%;
  background: #fff;
  border-radius: 12px;
}

.daterangepicker .calendar-table table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* weekdays */
.daterangepicker th.week,
.daterangepicker td.week {
  color: #9ca3af;
}

/* month label */
.daterangepicker th.month {
  color: #111827;
  font-weight: 600;
  font-size: 15px;
}

/* cells */
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  text-align: center;
  vertical-align: middle;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
}

/* hover */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background: #f0fdf4;
  color: #166534;
}

/* selected range */
.daterangepicker td.in-range {
  background: #f0fdf4;
  color: #166534;
  border-radius: 0;
}

/* start/end */
.daterangepicker td.start-date,
.daterangepicker td.end-date {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-weight: 600;
}

.daterangepicker td.start-date {
  border-radius: 10px 0 0 10px;
}

.daterangepicker td.end-date {
  border-radius: 0 10px 10px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 10px;
}

/* active */
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}

/* disabled */
.daterangepicker td.disabled {
  color: #cbd5e1;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* today */
.daterangepicker td.today {
  border: 1px solid #10b981;
  font-weight: 600;
}

/* nav arrows */
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  border: solid #4b5563;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
}

/* =========================
   BUTTON AREA
   ========================= */

.daterangepicker .drp-buttons {
  clear: both;
  display: none;
  padding: 14px 10px 6px;
  border-top: 1px solid #f1f5f9;
  margin-top: 8px;
}

.daterangepicker.show-calendar .drp-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* selected text */
.daterangepicker .drp-selected {
    display: block !important;
    width: 100%;
    text-align: center;
    
    font-size: 12px !important;
    line-height: 1.4;
    color: #374151 !important;

    white-space: normal;
    overflow-wrap: break-word;

    margin-bottom: 8px;
}

/* buttons */
.daterangepicker .drp-buttons .btn {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}

/* apply */
.daterangepicker .drp-buttons .applyBtn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}

.daterangepicker .drp-buttons .applyBtn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* cancel */
.daterangepicker .drp-buttons .cancelBtn {
  background: #f3f4f6;
  color: #374151;
}

.daterangepicker .drp-buttons .cancelBtn:hover {
  background: #e5e7eb;
}

/* =========================
   RANGES
   ========================= */

.daterangepicker .ranges ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.daterangepicker .ranges li {
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 4px;
  font-size: 14px;
  transition: all 0.18s ease;
}

.daterangepicker .ranges li:hover {
  background: #f0fdf4;
  color: #166534;
}

.daterangepicker .ranges li.active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}

/* =========================
   DESKTOP SAFETY
   ========================= */

@media (min-width: 601px) {
  .daterangepicker .drp-calendar {
    float: left !important;
    display: block;
  }
}

/* =========================
   MOBILE FIX (COMPACT & FULL WIDTH)
   ========================= */

@media (max-width: 600px) {
  .daterangepicker {
    width: 95vw !important;
    min-width: unset !important;
    max-width: unset !important;
    
    /* Center layout styling */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    padding: 8px !important; 
    border-radius: 18px;
  }

  /* FIX: Forces calendars out of their 50% split onto full-width lines */
  .daterangepicker .drp-calendar.left,
  .daterangepicker .drp-calendar.right,
  .daterangepicker .drp-calendar {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important; 
  }

  /* Reduce calendar cell height for vertical viewport safety */
  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
    height: 34px !important; 
    line-height: 34px !important;
    font-size: 13px !important; 
  }

  .daterangepicker th.month {
    padding: 5px 0 !important; 
  }

  .daterangepicker .drp-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch;
        gap: 8px;
    }
    
    .daterangepicker .drp-buttons .btn {
        width: 100% !important;
    }

  .daterangepicker .drp-buttons .btn {
    width: 50%; 
    padding: 8px 12px !important; 
    font-size: 13px !important;
  }

  .daterangepicker .drp-selected {
    display: none; 
  }
}