.intern { background-color: var(--bs-white); border: 1px solid #707070; border-radius: 9px; width: 100%; }
.intern h3 { background-color: #373737; color: var(--bs-white); border-radius: 9px 9px 0 0; font-size: 19px; font-weight: 700; margin: 0; padding: 8px 15px; width: 100%; }
.intern .detail { padding: 15px; width: 100%; }
.intern .result { background-color: #F2FFFC; border-radius: 4px; font-size: 16px; font-weight: 500; padding: 10px 15px; width: 100%; }
.intern .form-control { border-color: var(--light-gray); font-size: 18px; font-weight: 500; }
.intern .form-control:focus { box-shadow: inherit; }
.intern .input-group-text { background-color: inherit; border-color: var(--light-gray); }

/* ==============================
   jQuery UI Datepicker - Themed
   ============================== */

.ui-datepicker {
    background: var(--bs-white);
    border: 1px solid #707070;
    border-radius: 9px;
    padding: 10px;
    font-family: var(--primary-font);
}

/* Header (month + arrows) */
.ui-datepicker-header {
    background: #373737; /* same as .intern h3 */
    color: var(--bs-white);
    border-radius: 6px;
    border: none;
    padding: 6px 0;
}

/* Month + Year text */
.ui-datepicker-title {
    color: var(--bs-white);
    font-weight: 700;
}

/* Navigation arrows */
.ui-datepicker-prev,
.ui-datepicker-next {
    top: 5px;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    filter: invert(1); /* make arrows white */
}

/* Table layout */
.ui-datepicker table {
    margin-top: 10px;
}

/* Day cells */
.ui-datepicker td a {
    background: #F2FFFC; /* matches .intern .result */
    border-radius: 4px;
    padding: 6px;
    color: #373737;
    font-weight: 500;
    text-align: center;
    display: block;
}

/* Hover state */
.ui-datepicker td a:hover {
    background: var(--light-orange);
    color: #fff;
}

/* Selected date */
.ui-datepicker .ui-state-active {
    background: var(--green);
    color: #fff;
    border: none;
}

/* Today highlight */
.ui-datepicker .ui-state-highlight {
    background: var(--light-orange);
    color: #fff;
}

/* Disabled dates */
.ui-datepicker .ui-state-disabled span {
    color: var(--light-gray);
}

/* Weekday header */
.ui-datepicker th {
    color: #373737;
    font-weight: 600;
}

/* Remove default borders */
.ui-datepicker td {
    border: none;
}

/* Smooth UI */
.ui-datepicker td a {
    transition: all 0.2s ease;
}