/* ================================================================
   Flatpickr — Premium Green Theme  (#1B8354)
   Covers: input field (before opening) + calendar popup + dark mode
   ================================================================ */

/* ── Calendar icon SVG (encoded) ──────────────────────────────── */
:root {
    --dp-green:       #1B8354;
    --dp-green-light: #15a362;
    --dp-green-pale:  #e8f5ee;
    --dp-green-mid:   #d1ead8;
    --dp-shadow:      0 4px 6px -1px rgba(0,0,0,.07),
                      0 10px 30px -5px rgba(0,0,0,.12),
                      0 20px 60px -10px rgba(27,131,84,.12);
    --dp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231B8354'%3E%3Cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* ================================================================
   INPUT FIELD  — displayed BEFORE the calendar opens
   ================================================================ */

/* Base styling — applies everywhere (admin + student) */
input.flatpickr-input {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem !important;

    background-color: #fff !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: .625rem !important;

    color: #111827 !important;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;

    transition: border-color .2s ease, box-shadow .2s ease, background-color .15s ease !important;
}

input.flatpickr-input::placeholder { color: #9ca3af; font-weight: 400; }

input.flatpickr-input:hover {
    border-color: #6dba95 !important;
    background-color: #fafdfb !important;
}

input.flatpickr-input:focus,
input.flatpickr-input.active {
    border-color: var(--dp-green) !important;
    box-shadow: 0 0 0 3px rgba(27,131,84,.15) !important;
    background-color: #fff !important;
}

/* Icon variant — only applied when JS sets data-dp-icon (student/non-admin pages) */
input.flatpickr-input[data-dp-icon] {
    padding: 0 0.875rem 0 2.875rem !important;
    height: 46px;
    background-image: var(--dp-icon);
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: 14px center;
}

html[dir="rtl"] input.flatpickr-input[data-dp-icon] {
    background-position: calc(100% - 14px) center !important;
    padding-left: 0.875rem !important;
    padding-right: 2.875rem !important;
}

/* Dark mode */
.dark input.flatpickr-input {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}
.dark input.flatpickr-input[data-dp-icon] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234ade80'%3E%3Cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.dark input.flatpickr-input:hover {
    border-color: #4ade80 !important;
    background-color: #111827 !important;
}
.dark input.flatpickr-input:focus,
.dark input.flatpickr-input.active {
    border-color: #4ade80 !important;
    box-shadow: 0 0 0 3px rgba(74,222,128,.2) !important;
}

/* ================================================================
   CALENDAR POPUP
   ================================================================ */

.flatpickr-calendar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: var(--dp-shadow);
    font-family: inherit;
    overflow: hidden;
    padding: 0;
    width: 320px;

    /* Open animation */
    animation: dp-appear .18s cubic-bezier(.22,.68,0,1.2) both;
    transform-origin: top center;
}

@keyframes dp-appear {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Arrow notch colors */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after  { border-bottom-color: var(--dp-green); }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--dp-green); }

/* ── Month header ──────────────────────────────────────────────── */
.flatpickr-months {
    background: linear-gradient(135deg, #166b44 0%, var(--dp-green) 50%, var(--dp-green-light) 100%);
    border-radius: 1rem 1rem 0 0;
    padding: 12px 4px 10px;
    position: relative;
}

/* Decorative subtle circle in header */
.flatpickr-months::after {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    pointer-events: none;
}

.flatpickr-month { color: #fff; }

.flatpickr-current-month {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding-top: 4px;
}
.flatpickr-current-month .numInputWrapper { display: inline-flex; align-items: center; }
.flatpickr-current-month .numInputWrapper span.arrowUp::after  { border-bottom-color: rgba(255,255,255,.8); }
.flatpickr-current-month .numInputWrapper span.arrowDown::after{ border-top-color: rgba(255,255,255,.8); }

.flatpickr-current-month select.flatpickr-monthDropdown-months {
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    outline: none;
    padding: 0 4px;
    -webkit-appearance: none;
    appearance: none;
}
.flatpickr-current-month select.flatpickr-monthDropdown-months option {
    background: var(--dp-green);
    color: #fff;
}
.flatpickr-current-month input.cur-year {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

/* Navigation arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    color: rgba(255,255,255,.85) !important;
    fill: rgba(255,255,255,.85) !important;
    padding: 8px 12px;
    border-radius: .5rem;
    transition: background .15s, opacity .15s;
    top: 8px;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgba(255,255,255,.15);
    color: #fff !important;
    fill: #fff !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: inherit !important; }

/* ── Weekday row ───────────────────────────────────────────────── */
.flatpickr-weekdays {
    background: var(--dp-green-pale);
    border-bottom: 1px solid var(--dp-green-mid);
    padding: 6px 0 4px;
}
.flatpickr-weekday {
    color: var(--dp-green);
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ── Day grid ──────────────────────────────────────────────────── */
.flatpickr-innerContainer {
    padding: 10px 12px 14px;
}
.flatpickr-days { width: 100% !important; }
.dayContainer { width: 100% !important; min-width: unset; max-width: unset; }

.flatpickr-day {
    border-radius: .5rem;
    color: #374151;
    font-size: .82rem;
    font-weight: 500;
    height: 36px;
    line-height: 36px;
    max-width: 36px;
    margin: 1px auto;
    border: 1.5px solid transparent;
    transition: background .12s, color .12s, border-color .12s, transform .1s;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: var(--dp-green-pale);
    border-color: var(--dp-green-mid);
    color: var(--dp-green);
    transform: scale(1.06);
}

/* Today */
.flatpickr-day.today {
    border-color: var(--dp-green) !important;
    color: var(--dp-green);
    font-weight: 700;
    background: transparent;
}
.flatpickr-day.today::after {
    content: '';
    display: block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--dp-green);
    margin: -6px auto 0;
}
.flatpickr-day.today:hover {
    background: var(--dp-green);
    color: #fff;
    transform: scale(1.08);
}
.flatpickr-day.today:hover::after { background: #fff; }

/* Selected */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--dp-green) !important;
    border-color: var(--dp-green) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(27,131,84,.40);
    border-radius: .5rem;
    transform: scale(1.08);
}

/* Range in-between */
.flatpickr-day.inRange {
    background: var(--dp-green-mid);
    border-color: transparent;
    box-shadow: -5px 0 0 var(--dp-green-mid), 5px 0 0 var(--dp-green-mid);
    color: var(--dp-green);
    border-radius: 0;
}

/* Adjacent month days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #c4c9d0; }

/* Disabled */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: #e5e7eb;
    background: transparent;
    border-color: transparent;
    transform: none;
    cursor: not-allowed;
}

/* ── Time picker ───────────────────────────────────────────────── */
.flatpickr-time {
    border-top: 1px solid #e5e7eb;
    background: #f8fdfb;
    border-radius: 0 0 1rem 1rem;
    padding: 6px 0;
    height: 46px !important;
    max-height: 46px !important;
}

.flatpickr-time input {
    color: var(--dp-green);
    font-weight: 700;
    font-size: 1rem;
    background: transparent;
}
.flatpickr-time input:focus { background: var(--dp-green-pale); border-radius: .375rem; }
.flatpickr-time .flatpickr-time-separator { color: var(--dp-green); font-weight: 700; }
.flatpickr-time .flatpickr-am-pm { color: var(--dp-green); font-weight: 600; }
.flatpickr-time .flatpickr-am-pm:focus { background: var(--dp-green-pale); }
.flatpickr-time .numInputWrapper span.arrowUp::after   { border-bottom-color: var(--dp-green); }
.flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--dp-green); }

/* ================================================================
   DARK MODE — calendar popup
   ================================================================ */

.dark .flatpickr-calendar {
    background: #1e2a22;
    border-color: #2d4036;
    box-shadow: 0 4px 6px rgba(0,0,0,.3), 0 20px 60px rgba(0,0,0,.5);
    color: #e5e7eb;
}

.dark .flatpickr-months {
    background: linear-gradient(135deg, #0f4a2e 0%, #166134 50%, #1B8354 100%);
}

.dark .flatpickr-weekdays { background: #152b1e; border-bottom-color: #1e3d28; }
.dark .flatpickr-weekday  { color: #4ade80; }

.dark .flatpickr-day { color: #d1d5db; }
.dark .flatpickr-day:hover {
    background: #1a3a25;
    border-color: #2a5438;
    color: #4ade80;
}
.dark .flatpickr-day.prevMonthDay,
.dark .flatpickr-day.nextMonthDay { color: #374151; }

.dark .flatpickr-day.today {
    border-color: #4ade80 !important;
    color: #4ade80;
}
.dark .flatpickr-day.today::after { background: #4ade80; }
.dark .flatpickr-day.today:hover  { background: #166534; color: #fff; }

.dark .flatpickr-day.selected,
.dark .flatpickr-day.selected:hover {
    background: #15803d !important;
    border-color: #16a34a !important;
    box-shadow: 0 2px 10px rgba(22,163,74,.4);
}

.dark .flatpickr-day.inRange {
    background: #14532d;
    box-shadow: -5px 0 0 #14532d, 5px 0 0 #14532d;
    color: #4ade80;
}

.dark .flatpickr-time {
    background: #111d16;
    border-top-color: #1e3d28;
}
.dark .flatpickr-time input,
.dark .flatpickr-time .flatpickr-am-pm { color: #4ade80; }
.dark .flatpickr-time .flatpickr-time-separator { color: #4ade80; }

.dark .numInputWrapper span.arrowUp::after   { border-bottom-color: #9ca3af; }
.dark .numInputWrapper span.arrowDown::after { border-top-color: #9ca3af; }
.dark .flatpickr-current-month select.flatpickr-monthDropdown-months option {
    background: #1e2a22;
}