/* ============================================
   Persian DateTime Picker — Modern Teal Theme
   IMPORTANT: Do NOT touch position/transform/inset
   Popper.js controls these dynamically.
   ============================================ */

/* ---- Popup Container ---- */
.mds-bs-persian-datetime-picker-popover.popover {
    background: #FFFFFF !important;
    border: 1px solid #CDF4F0 !important;
    border-radius: 1rem !important;
    box-shadow:
        0 20px 40px -12px rgba(14, 175, 157, 0.28),
        0 8px 16px -6px rgba(14, 175, 157, 0.12) !important;
    font-family: 'IRANYekan', system-ui, sans-serif !important;
    z-index: 9999 !important;
    min-width: 340px !important;
    /* ⚠️ NO position, transform, inset, margin, overflow here */
}

/* Arrow (Popper sets its position) */
.mds-bs-persian-datetime-picker-popover.popover .popover-arrow::before,
.mds-bs-persian-datetime-picker-popover.popover .popover-arrow::after {
    border-top-color: #CDF4F0 !important;
    border-bottom-color: #CDF4F0 !important;
}

/* ---- Header ---- */
.mds-bs-persian-datetime-picker-popover .popover-header {
    background: linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 100%) !important;
    border-bottom: 1px solid #F1F3F1 !important;
    color: #1C6E65 !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    padding: 0.75rem 1rem !important;
    text-align: center;
    border-radius: 1rem 1rem 0 0 !important;
}

/* ---- Body ---- */
.mds-bs-persian-datetime-picker-popover .popover-body {
    padding: 0.75rem !important;
    background: #FFFFFF !important;
    border-radius: 0 0 1rem 1rem !important;
}

.mds-bs-persian-datetime-picker-popover .mds-bs-dtp-container {
    direction: rtl !important;
}

/* ---- Inner Tables ---- */
.mds-bs-persian-datetime-picker-popover table,
.mds-bs-persian-datetime-picker-popover .table {
    margin-bottom: 0 !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    font-family: 'IRANYekan', sans-serif !important;
}

.mds-bs-persian-datetime-picker-popover table td,
.mds-bs-persian-datetime-picker-popover table th {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ---- Navigation Buttons (<< < > >>) ---- */
.mds-bs-persian-datetime-picker-popover .btn.btn-light,
.mds-bs-persian-datetime-picker-popover [data-change-date-button] {
    background: #F0FDFA !important;
    border: none !important;
    color: #0EAF9D !important;
    border-radius: 0.5rem !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.5rem !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    /* ⚠️ NO transform transition (conflicts with Popper hover scale) */
}

.mds-bs-persian-datetime-picker-popover .btn.btn-light:hover,
.mds-bs-persian-datetime-picker-popover [data-change-date-button]:hover {
    background: #0EAF9D !important;
    color: #FFFFFF !important;
}

/* Month selector dropdown button */
.mds-bs-persian-datetime-picker-popover .dropdown-toggle {
    background: #FFFFFF !important;
    border: 1px solid #CDF4F0 !important;
    color: #1C6E65 !important;
    font-weight: 700 !important;
}

.mds-bs-persian-datetime-picker-popover .dropdown-toggle:hover {
    background: #F0FDFA !important;
    border-color: #0EAF9D !important;
}

/* Year selector button */
.mds-bs-persian-datetime-picker-popover [mds-pdtp-select-year-button] {
    background: #EAFAF9 !important;
    border: none !important;
    color: #0EAF9D !important;
    font-weight: 700 !important;
}

.mds-bs-persian-datetime-picker-popover [mds-pdtp-select-year-button]:hover {
    background: #0EAF9D !important;
    color: #FFFFFF !important;
}

/* ---- Dropdown Menu ---- */
.mds-bs-persian-datetime-picker-popover .dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #CDF4F0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -8px rgba(14, 175, 157, 0.20) !important;
    padding: 0.375rem !important;
    z-index: 10000 !important;
}

.mds-bs-persian-datetime-picker-popover .dropdown-item {
    color: #2B2C2B !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}

.mds-bs-persian-datetime-picker-popover .dropdown-item:hover {
    background: #F0FDFA !important;
    color: #0EAF9D !important;
}

/* ---- Weekday Headers ---- */
.mds-bs-persian-datetime-picker-popover tbody.days td {
    color: #9CA3AF !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 0.375rem 0 !important;
    background: transparent !important;
}

/* ---- Day Cells ---- */
.mds-bs-persian-datetime-picker-popover [data-day],
.mds-bs-persian-datetime-picker-popover [data-nm] {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    text-align: center !important;
    border-radius: 0.5rem !important;
    color: #2B2C2B !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
    padding: 0 !important;
    background: transparent !important;
    /* ⚠️ NO transform — keep scale out to avoid layout shifts */
}

.mds-bs-persian-datetime-picker-popover [data-day]:hover {
    background: #F0FDFA !important;
    color: #0EAF9D !important;
}

/* Today */
.mds-bs-persian-datetime-picker-popover [data-today] {
    background: #EAFAF9 !important;
    color: #0EAF9D !important;
    font-weight: 700 !important;
    border: 1.5px solid #0EAF9D !important;
    box-sizing: border-box;
}

/* Days from other months */
.mds-bs-persian-datetime-picker-popover [data-nm] {
    color: #D1D5DB !important;
    opacity: 0.6;
}

.mds-bs-persian-datetime-picker-popover [data-nm]:hover {
    background: #F0FDFA !important;
    color: #0EAF9D !important;
    opacity: 1;
}

/* Fridays */
.mds-bs-persian-datetime-picker-popover [data-day].text-danger,
.mds-bs-persian-datetime-picker-popover [data-nm].text-danger {
    color: #EF4343 !important;
}

.mds-bs-persian-datetime-picker-popover [data-day].text-danger:hover {
    background: #FFEBEE !important;
    color: #B8000C !important;
}

/* ---- Today button (footer) ---- */
.mds-bs-persian-datetime-picker-popover [data-mds-dtp-go-today] {
    background: #F0FDFA !important;
    border: 1px solid #CDF4F0 !important;
    color: #0EAF9D !important;
    border-radius: 0.5rem !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.375rem 0.75rem !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.mds-bs-persian-datetime-picker-popover [data-mds-dtp-go-today]:hover {
    background: #0EAF9D !important;
    color: #FFFFFF !important;
    border-color: #0EAF9D !important;
}

/* ---- Time picker input ---- */
.mds-bs-persian-datetime-picker-popover input[type="time"] {
    border: 1px solid #CDF4F0 !important;
    border-radius: 0.5rem !important;
    padding: 0.375rem 0.5rem !important;
    font-family: 'IRANYekan', sans-serif !important;
    color: #1C6E65 !important;
    background: #FFFFFF !important;
    text-align: center;
    width: 100% !important;
}

/* ---- Trigger input field icons ---- */
i.fa-calendar.input-group-text {
    transition: background-color 0.15s ease, color 0.15s ease;
}

.input-group:focus-within i.fa-calendar.input-group-text {
    background: #0EAF9D !important;
    color: #FFFFFF !important;
}

/* ---- Safe opacity-only animation (NO transform!) ---- */
.mds-bs-persian-datetime-picker-popover.popover.show {
    animation: pickerFadeIn 0.15s ease-out;
}

@keyframes pickerFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Responsive ---- */
@media (max-width: 576px) {
    .mds-bs-persian-datetime-picker-popover.popover {
        min-width: 300px !important;
    }

    .mds-bs-persian-datetime-picker-popover [data-day],
    .mds-bs-persian-datetime-picker-popover [data-nm] {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================
   Persian DateTime Picker — Modern Teal Theme
   IMPORTANT: Do NOT touch position/transform/inset
   Popper.js controls these dynamically.
   ============================================ */

/* ---- Popup Container ---- */
.mds-bs-persian-datetime-picker-popover.popover {
    background: #FFFFFF !important;
    border: 1px solid #CDF4F0 !important;
    border-radius: 1rem !important;
    box-shadow:
        0 20px 40px -12px rgba(14, 175, 157, 0.28),
        0 8px 16px -6px rgba(14, 175, 157, 0.12) !important;
    font-family: 'IRANYekan', system-ui, sans-serif !important;
    z-index: 9999 !important;
    min-width: 340px !important;
    /* ⚠️ NO position, transform, inset, margin, overflow here */
}

/* Arrow (Popper sets its position) */
.mds-bs-persian-datetime-picker-popover.popover .popover-arrow::before,
.mds-bs-persian-datetime-picker-popover.popover .popover-arrow::after {
    border-top-color: #CDF4F0 !important;
    border-bottom-color: #CDF4F0 !important;
}

/* ---- Header ---- */
.mds-bs-persian-datetime-picker-popover .popover-header {
    background: linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 100%) !important;
    border-bottom: 1px solid #F1F3F1 !important;
    color: #1C6E65 !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    padding: 0.75rem 1rem !important;
    text-align: center;
    border-radius: 1rem 1rem 0 0 !important;
}

/* ---- Body ---- */
.mds-bs-persian-datetime-picker-popover .popover-body {
    padding: 0.75rem !important;
    background: #FFFFFF !important;
    border-radius: 0 0 1rem 1rem !important;
}

.mds-bs-persian-datetime-picker-popover .mds-bs-dtp-container {
    direction: rtl !important;
}

/* ---- Inner Tables ---- */
.mds-bs-persian-datetime-picker-popover table,
.mds-bs-persian-datetime-picker-popover .table {
    margin-bottom: 0 !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    font-family: 'IRANYekan', sans-serif !important;
}

.mds-bs-persian-datetime-picker-popover table td,
.mds-bs-persian-datetime-picker-popover table th {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ---- Navigation Buttons (<< < > >>) ---- */
.mds-bs-persian-datetime-picker-popover .btn.btn-light,
.mds-bs-persian-datetime-picker-popover [data-change-date-button] {
    background: #F0FDFA !important;
    border: none !important;
    color: #0EAF9D !important;
    border-radius: 0.5rem !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.5rem !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    /* ⚠️ NO transform transition (conflicts with Popper hover scale) */
}

.mds-bs-persian-datetime-picker-popover .btn.btn-light:hover,
.mds-bs-persian-datetime-picker-popover [data-change-date-button]:hover {
    background: #0EAF9D !important;
    color: #FFFFFF !important;
}

/* Month selector dropdown button */
.mds-bs-persian-datetime-picker-popover .dropdown-toggle {
    background: #FFFFFF !important;
    border: 1px solid #CDF4F0 !important;
    color: #1C6E65 !important;
    font-weight: 700 !important;
}

.mds-bs-persian-datetime-picker-popover .dropdown-toggle:hover {
    background: #F0FDFA !important;
    border-color: #0EAF9D !important;
}

/* Year selector button */
.mds-bs-persian-datetime-picker-popover [mds-pdtp-select-year-button] {
    background: #EAFAF9 !important;
    border: none !important;
    color: #0EAF9D !important;
    font-weight: 700 !important;
}

.mds-bs-persian-datetime-picker-popover [mds-pdtp-select-year-button]:hover {
    background: #0EAF9D !important;
    color: #FFFFFF !important;
}

/* ---- Dropdown Menu ---- */
.mds-bs-persian-datetime-picker-popover .dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #CDF4F0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -8px rgba(14, 175, 157, 0.20) !important;
    padding: 0.375rem !important;
    z-index: 10000 !important;
}

.mds-bs-persian-datetime-picker-popover .dropdown-item {
    color: #2B2C2B !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}

.mds-bs-persian-datetime-picker-popover .dropdown-item:hover {
    background: #F0FDFA !important;
    color: #0EAF9D !important;
}

/* ---- Weekday Headers ---- */
.mds-bs-persian-datetime-picker-popover tbody.days td {
    color: #9CA3AF !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 0.375rem 0 !important;
    background: transparent !important;
}

/* ---- Day Cells ---- */
.mds-bs-persian-datetime-picker-popover [data-day],
.mds-bs-persian-datetime-picker-popover [data-nm] {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    text-align: center !important;
    border-radius: 0.5rem !important;
    color: #2B2C2B !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
    padding: 0 !important;
    background: transparent !important;
    /* ⚠️ NO transform — keep scale out to avoid layout shifts */
}

.mds-bs-persian-datetime-picker-popover [data-day]:hover {
    background: #F0FDFA !important;
    color: #0EAF9D !important;
}

/* Today */
.mds-bs-persian-datetime-picker-popover [data-today] {
    background: #EAFAF9 !important;
    color: #0EAF9D !important;
    font-weight: 700 !important;
    border: 1.5px solid #0EAF9D !important;
    box-sizing: border-box;
}

/* Days from other months */
.mds-bs-persian-datetime-picker-popover [data-nm] {
    color: #D1D5DB !important;
    opacity: 0.6;
}

.mds-bs-persian-datetime-picker-popover [data-nm]:hover {
    background: #F0FDFA !important;
    color: #0EAF9D !important;
    opacity: 1;
}

/* Fridays */
.mds-bs-persian-datetime-picker-popover [data-day].text-danger,
.mds-bs-persian-datetime-picker-popover [data-nm].text-danger {
    color: #EF4343 !important;
}

.mds-bs-persian-datetime-picker-popover [data-day].text-danger:hover {
    background: #FFEBEE !important;
    color: #B8000C !important;
}

/* ============================================
   Range Selection Highlighting
   Real classes from the library:
     .selected-range-days             → middle days
     .selected-range-days-start-end   → start & end days
   ============================================ */

/* ---- Middle days of the range → soft teal strip ---- */
.mds-bs-persian-datetime-picker-popover [data-day].selected-range-days {
    background: #EAFAF9 !important;
    color: #1C6E65 !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---- Start & End days → solid teal with shadow ---- */
.mds-bs-persian-datetime-picker-popover [data-day].selected-range-days-start-end {
    background: #0EAF9D !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 3px 8px -2px rgba(14, 175, 157, 0.45) !important;
    position: relative;
    z-index: 1;
}

/* ---- Hover on start/end → deeper teal ---- */
.mds-bs-persian-datetime-picker-popover [data-day].selected-range-days-start-end:hover {
    background: #1C6E65 !important;
    color: #FFFFFF !important;
}

/* ---- Hover on middle days → slightly stronger ---- */
.mds-bs-persian-datetime-picker-popover [data-day].selected-range-days:hover {
    background: #CDF4F0 !important;
    color: #1C6E65 !important;
}

/* ---- Friday inside range → keep teal, drop danger color ---- */
.mds-bs-persian-datetime-picker-popover [data-day].selected-range-days.text-danger {
    color: #1C6E65 !important;
}

.mds-bs-persian-datetime-picker-popover [data-day].selected-range-days-start-end.text-danger {
    color: #FFFFFF !important;
}

/* ---- Today inside range → keep boundary visual ---- */
.mds-bs-persian-datetime-picker-popover [data-day].selected-range-days-start-end[data-today] {
    border: 1.5px solid #1C6E65 !important;
    box-sizing: border-box;
}

/* ---- Days from other months should NOT be highlighted ---- */
.mds-bs-persian-datetime-picker-popover [data-nm].selected-range-days,
.mds-bs-persian-datetime-picker-popover [data-nm].selected-range-days-start-end {
    background: transparent !important;
    color: #D1D5DB !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

/* ---- Today button (footer) ---- */
.mds-bs-persian-datetime-picker-popover [data-mds-dtp-go-today] {
    background: #F0FDFA !important;
    border: 1px solid #CDF4F0 !important;
    color: #0EAF9D !important;
    border-radius: 0.5rem !important;
    font-family: 'IRANYekan', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.375rem 0.75rem !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.mds-bs-persian-datetime-picker-popover [data-mds-dtp-go-today]:hover {
    background: #0EAF9D !important;
    color: #FFFFFF !important;
    border-color: #0EAF9D !important;
}

/* ---- Time picker input ---- */
.mds-bs-persian-datetime-picker-popover input[type="time"] {
    border: 1px solid #CDF4F0 !important;
    border-radius: 0.5rem !important;
    padding: 0.375rem 0.5rem !important;
    font-family: 'IRANYekan', sans-serif !important;
    color: #1C6E65 !important;
    background: #FFFFFF !important;
    text-align: center;
    width: 100% !important;
}

/* ---- Trigger input field icons ---- */
i.fa-calendar.input-group-text {
    transition: background-color 0.15s ease, color 0.15s ease;
}

.input-group:focus-within i.fa-calendar.input-group-text {
    background: #0EAF9D !important;
    color: #FFFFFF !important;
}

/* ---- Safe opacity-only animation (NO transform!) ---- */
.mds-bs-persian-datetime-picker-popover.popover.show {
    animation: pickerFadeIn 0.15s ease-out;
}

@keyframes pickerFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Responsive ---- */
@media (max-width: 576px) {
    .mds-bs-persian-datetime-picker-popover.popover {
        min-width: 300px !important;
    }

    .mds-bs-persian-datetime-picker-popover [data-day],
    .mds-bs-persian-datetime-picker-popover [data-nm] {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        font-size: 0.75rem !important;
    }
}