/*
 * The app's one calendar — the look that assets/js/lp-calendar.js gives every
 * flatpickr picker (.lp-cal) and every date box (.lp-date-input).
 *
 * A white card under the field: ‹ month ▾ year ▾ › on top, the week from
 * Saturday (Arabic) or Monday (English), today ringed in blue, the chosen day
 * filled, and "Today" / "✕ Clear" at the foot.
 */
:root {
    --lp-cal-bg: #ffffff;
    --lp-cal-text: #4B5675;
    --lp-cal-muted: #99A1B7;
    --lp-cal-faint: #C4CADA;
    --lp-cal-soft: #78829D;
    --lp-cal-hover: #F9F9F9;
    --lp-cal-line: #F1F1F4;
    --lp-cal-border: #DBDFE9;
    --lp-cal-accent: #1B84FF;
    --lp-cal-ring: rgba(27, 132, 255, .4);
    --lp-cal-glow: rgba(27, 132, 255, .18);
    --lp-cal-range: rgba(27, 132, 255, .12);
    --lp-cal-shadow: 0 0 50px 0 rgba(82, 63, 105, .15);
}
[data-bs-theme="dark"] {
    --lp-cal-bg: #1C1D22;
    --lp-cal-text: #C9CBD6;
    --lp-cal-muted: #808290;
    --lp-cal-faint: #4B4D59;
    --lp-cal-soft: #9A9CAE;
    --lp-cal-hover: #26272F;
    --lp-cal-line: #2C2D35;
    --lp-cal-border: #363843;
    --lp-cal-shadow: 0 0 0 1px #2C2D35, 0 10px 40px rgba(0, 0, 0, .45);
}

/* ── The card ─────────────────────────────────────────────────────────── */
.flatpickr-calendar.lp-cal {
    width: 288px !important;
    max-width: calc(100vw - 20px);
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: var(--lp-cal-bg);
    color: var(--lp-cal-text);
    box-shadow: var(--lp-cal-shadow) !important;
    font-family: inherit;
    font-size: 14px;
}
/* flatpickr lays itself out left-to-right; an Arabic calendar runs from the right. */
.flatpickr-calendar.lp-cal[dir="rtl"],
.flatpickr-calendar.lp-cal[dir="rtl"] .flatpickr-weekdays,
.flatpickr-calendar.lp-cal[dir="rtl"] .dayContainer { direction: rtl !important; }
.flatpickr-calendar.lp-cal[dir="ltr"],
.flatpickr-calendar.lp-cal[dir="ltr"] .flatpickr-weekdays,
.flatpickr-calendar.lp-cal[dir="ltr"] .dayContainer { direction: ltr !important; }
.flatpickr-calendar.lp-cal::before,
.flatpickr-calendar.lp-cal::after { display: none; }
.flatpickr-calendar.lp-cal.static { top: calc(100% + 4px); }
.flatpickr-calendar.lp-cal.static[dir="rtl"] { left: auto; right: 0; }

/* flatpickr's own month bar gives way to ours. */
.flatpickr-calendar.lp-cal .flatpickr-months { display: none !important; }

.lp-cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.lp-cal-nav {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 6px;
    background: transparent; color: var(--lp-cal-text);
    cursor: pointer;
}
.lp-cal-nav:hover { background: var(--lp-cal-hover); }
.lp-cal-nav:disabled { opacity: .3; cursor: default; background: transparent; }
.lp-cal-select {
    height: 32px; min-width: 0;
    padding: 0 6px;
    border: 1px solid var(--lp-cal-border); border-radius: 6px;
    background-color: var(--lp-cal-bg); color: var(--lp-cal-text);
    font: inherit; font-size: 14px;
    outline: none; cursor: pointer;
}
.lp-cal-select:focus { border-color: var(--lp-cal-accent); }
.lp-cal-month { flex: 1 1 auto; }
.lp-cal-year { flex: 0 0 82px; width: 82px; }

/* ── Weekdays and days ────────────────────────────────────────────────── */
.flatpickr-calendar.lp-cal .flatpickr-innerContainer,
.flatpickr-calendar.lp-cal .flatpickr-rContainer { display: block; width: 100%; overflow: visible; }
.flatpickr-calendar.lp-cal .flatpickr-weekdays { height: auto; margin-bottom: 4px; background: transparent; }
.flatpickr-calendar.lp-cal .flatpickr-weekdaycontainer { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; }
.flatpickr-calendar.lp-cal span.flatpickr-weekday {
    padding: 4px 0;
    background: transparent;
    color: var(--lp-cal-muted);
    font-size: 11px; font-weight: 600; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flatpickr-calendar.lp-cal .flatpickr-days { width: 100% !important; border: 0; }
.flatpickr-calendar.lp-cal .dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    padding: 0;
}
.flatpickr-calendar.lp-cal .flatpickr-day {
    width: auto; max-width: none; height: 32px; line-height: 32px;
    margin: 0;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--lp-cal-text);
    font-size: 14px; font-weight: 400;
    box-shadow: none;
}
.flatpickr-calendar.lp-cal .flatpickr-day:hover,
.flatpickr-calendar.lp-cal .flatpickr-day:focus { background: var(--lp-cal-hover); border: 0; color: var(--lp-cal-text); }
.flatpickr-calendar.lp-cal .flatpickr-day.prevMonthDay,
.flatpickr-calendar.lp-cal .flatpickr-day.nextMonthDay { color: var(--lp-cal-faint); }
.flatpickr-calendar.lp-cal .flatpickr-day.today {
    color: var(--lp-cal-accent);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--lp-cal-ring) !important;  /* the theme forces none */
}
.flatpickr-calendar.lp-cal .flatpickr-day.inRange { background: var(--lp-cal-range); box-shadow: none; border-radius: 0; }
.flatpickr-calendar.lp-cal .flatpickr-day.selected,
.flatpickr-calendar.lp-cal .flatpickr-day.startRange,
.flatpickr-calendar.lp-cal .flatpickr-day.endRange,
.flatpickr-calendar.lp-cal .flatpickr-day.selected:hover,
.flatpickr-calendar.lp-cal .flatpickr-day.selected:focus,
.flatpickr-calendar.lp-cal .flatpickr-day.selected.prevMonthDay,
.flatpickr-calendar.lp-cal .flatpickr-day.selected.nextMonthDay {
    background: var(--lp-cal-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: none !important;
    border-radius: 6px;
}
.flatpickr-calendar.lp-cal .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.lp-cal .flatpickr-day.flatpickr-disabled:hover {
    background: transparent;
    color: var(--lp-cal-text);
    opacity: .3;
    cursor: not-allowed;
}

/* ── Time (date-and-time fields) ──────────────────────────────────────── */
.flatpickr-calendar.lp-cal.hasTime .flatpickr-time {
    margin-top: 8px;
    border-top: 1px solid var(--lp-cal-line) !important;
    direction: ltr;
}
.flatpickr-calendar.lp-cal .flatpickr-time input,
.flatpickr-calendar.lp-cal .flatpickr-time .flatpickr-am-pm,
.flatpickr-calendar.lp-cal .flatpickr-time .flatpickr-time-separator { color: var(--lp-cal-text); }
.flatpickr-calendar.lp-cal .flatpickr-time input:hover,
.flatpickr-calendar.lp-cal .flatpickr-time input:focus,
.flatpickr-calendar.lp-cal .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-calendar.lp-cal .flatpickr-time .flatpickr-am-pm:focus { background: var(--lp-cal-hover); }
.flatpickr-calendar.lp-cal .lx-fp-actions { margin: 8px -12px -12px; border-radius: 0 0 12px 12px; }

/* ── Today · ✕ Clear ──────────────────────────────────────────────────── */
.lp-cal-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--lp-cal-line);
}
.lp-cal-today,
.lp-cal-clear {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px;
    border: 0; border-radius: 6px;
    background: transparent;
    font: inherit; font-size: 14px;
    cursor: pointer;
}
.lp-cal-today { color: var(--lp-cal-accent); font-weight: 500; }
.lp-cal-clear { color: var(--lp-cal-soft); }
.lp-cal-today:hover,
.lp-cal-clear:hover { background: var(--lp-cal-hover); }
.lp-cal-today:disabled { opacity: .4; cursor: default; background: transparent; }
.lp-cal-clear[hidden] { display: none; }

/* ── The field: the date in words, a calendar icon at the end ─────────── */
input.lp-date-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399A1B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    background-position: right .9rem center !important;
    padding-right: 2.5rem !important;
    cursor: pointer;
    caret-color: transparent;
}
[dir="rtl"] input.lp-date-input {
    background-position: left .9rem center !important;
    padding-right: 1rem !important;
    padding-left: 2.5rem !important;
}
input.lp-date-input.form-control-sm { background-position-x: right .6rem !important; padding-right: 2rem !important; }
[dir="rtl"] input.lp-date-input.form-control-sm { background-position-x: left .6rem !important; padding-right: .75rem !important; padding-left: 2rem !important; }
input.lp-date-input:disabled { cursor: not-allowed; }
input.lp-date-input.lp-open {
    border-color: var(--lp-cal-accent) !important;
    box-shadow: 0 0 0 3px var(--lp-cal-glow) !important;
}
input.lp-date-input.field-invalid,
input.lp-date-input.is-invalid {
    border: 2px solid #f1416c !important;
    box-shadow: 0 0 0 3px rgba(241, 65, 108, .15) !important;
}