/**
 * iSurveillance date pickers.
 *
 * The application's date fields use bootstrap-datepicker 1.4.1 (jQuery, /js/bootstrap-datepicker.min.js), initialised on about
 * 120 inputs. The library ships no styles of its own; its stylesheet (/css/bootstrap-datepicker3.css) was only ever loaded by
 * the `form` layout, so on every page using the default layout the calendar rendered unstyled: 160px wide, 15px inherited
 * font, cells without a fixed size. This file styles the library's own markup (nothing is replaced, no options change) for all
 * layouts, plus the inputs that carry a picker (class `ijn-date-input`, added by /js/ijn-datepicker.js) and native
 * date / datetime-local inputs. The xdsoft datetimepicker used on the Venues form gets the same skin.
 *
 * Library markup (v1.4.1):  .datepicker.datepicker-dropdown.datepicker-orient-{top|bottom}
 *   > .datepicker-days | .datepicker-months | .datepicker-years  > table
 *   thead: th.prev  th.datepicker-switch  th.next  /  th.dow ...   tbody: td.day(.old .new .today .active .disabled .range .focused)
 *   months / years: td > span.month | span.year (.active .disabled .focused)
 *   NB the library names the *placement of the calendar's edge*: `orient-top` = opens BELOW the input, `orient-bottom` = flipped ABOVE.
 *
 * COLOURS: default #2563EB family; when the user picked another theme or dark mode, the theme engine's tokens are used.
 */
.datepicker.datepicker-dropdown,
.datepicker.datepicker-inline {
    --dp-primary: #2563eb; --dp-on-primary: #ffffff; --dp-hover: #eff6ff; --dp-surface: #ffffff;
    --dp-text: #0f172a; --dp-dow: #64748b; --dp-other: #6b7a90; --dp-disabled: #b4bfce; --dp-border: #e2e8f0;
    --dp-ring: rgba(37, 99, 235, .45); --dp-shadow: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
}
html[data-theme-engine]:not(.ijn-brand) .datepicker.datepicker-dropdown,
html[data-theme-engine]:not(.ijn-brand) .datepicker.datepicker-inline {
    --dp-primary: var(--primary, #2563eb); --dp-on-primary: var(--on-primary, #ffffff); --dp-hover: var(--primary-soft, #eff6ff);
    --dp-surface: var(--surface-elevated, #ffffff); --dp-text: var(--text-primary, #0f172a); --dp-dow: var(--text-secondary, #64748b);
    --dp-other: var(--text-secondary, #6b7a90); --dp-disabled: var(--text-muted, #b4bfce); --dp-border: var(--border-strong, #e2e8f0);
    --dp-ring: var(--focus-ring, rgba(37, 99, 235, .45));
}

/* ------------------------------------------------------------------ popup ------------------------------------------------------------------ */
html body .datepicker.datepicker-dropdown {
    box-sizing: border-box; width: 308px; max-width: calc(100vw - 20px); min-width: 0; margin: 6px 0 0; padding: 12px;
    background: var(--dp-surface); color: var(--dp-text); border: 1px solid var(--dp-border); border-radius: 12px; box-shadow: var(--dp-shadow);
    font-family: inherit; font-size: 14px; line-height: 1.3; direction: ltr; user-select: none; -webkit-user-select: none;
    z-index: 1060; transform-origin: top center; animation: ijn-dp-in .16s ease-out both;
}
html body .datepicker.datepicker-dropdown.datepicker-orient-bottom { transform-origin: bottom center; }  /* flipped above the input */
html body .datepicker.datepicker-dropdown::before, html body .datepicker.datepicker-dropdown::after { display: none; }  /* no speech-bubble pointer */
html body .datepicker.datepicker-inline { box-sizing: border-box; width: 308px; max-width: 100%; padding: 12px; background: var(--dp-surface); color: var(--dp-text); border: 1px solid var(--dp-border); border-radius: 12px; font-size: 14px; }
@keyframes ijn-dp-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

.datepicker.datepicker-rtl { direction: rtl; }
.datepicker .datepicker-days, .datepicker .datepicker-months, .datepicker .datepicker-years, .datepicker .datepicker-decades, .datepicker .datepicker-centuries { width: 100%; }
.datepicker table { width: 100%; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 2px; background: transparent; }
.datepicker table tr td, .datepicker table tr th { padding: 0; border: 0; background: transparent; color: var(--dp-text); text-align: center; vertical-align: middle; }

/* ------------------------------------------------------------------ header ------------------------------------------------------------------ */
.datepicker thead tr:first-child th { height: 40px; border-radius: 8px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
html body .datepicker.datepicker-dropdown table thead tr:first-child th.datepicker-switch { font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--dp-text); }
html body .datepicker.datepicker-dropdown table thead tr:first-child th.datepicker-switch:hover,
html body .datepicker.datepicker-dropdown table thead tr:first-child th.prev:hover,
html body .datepicker.datepicker-dropdown table thead tr:first-child th.next:hover { background: var(--dp-hover); color: var(--dp-primary); }
html body .datepicker.datepicker-dropdown table thead tr:first-child th.prev.disabled,
html body .datepicker.datepicker-dropdown table thead tr:first-child th.next.disabled { visibility: hidden; }
/* chevrons are drawn, the library's « » glyphs are hidden */
.datepicker thead tr:first-child th.prev, .datepicker thead tr:first-child th.next { position: relative; width: 40px; font-size: 0; line-height: 0; color: transparent; }
.datepicker thead tr:first-child th.prev::before, .datepicker thead tr:first-child th.next::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border: solid var(--dp-dow); border-width: 0 0 2px 2px;
    transition: border-color .15s ease;
}
.datepicker thead tr:first-child th.prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.datepicker thead tr:first-child th.next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.datepicker thead tr:first-child th.prev:hover::before, .datepicker thead tr:first-child th.next:hover::before { border-color: var(--dp-primary); }
.datepicker thead tr:first-child th:focus-visible { outline: 2px solid var(--dp-ring); outline-offset: -2px; }

/* weekday labels */
html body .datepicker.datepicker-dropdown table thead tr th.dow, html body .datepicker.datepicker-dropdown table thead tr th.cw { height: 32px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dp-dow); cursor: default; }

/* ------------------------------------------------------------------ days ------------------------------------------------------------------ */
html body .datepicker.datepicker-dropdown table tr td.day, html body .datepicker.datepicker-inline table tr td.day {
    height: 38px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 38px; cursor: pointer; position: relative;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
html body .datepicker.datepicker-dropdown table tr td.day.old, html body .datepicker.datepicker-dropdown table tr td.day.new { color: var(--dp-other); font-weight: 400; }
html body .datepicker.datepicker-dropdown table tr td.day:hover, html body .datepicker.datepicker-dropdown table tr td.day.focused { background: var(--dp-hover); color: var(--dp-primary); }
html body .datepicker.datepicker-dropdown table tr td.day.focused:not(.active) { box-shadow: inset 0 0 0 2px var(--dp-ring); }
/* today: outline (solid once it is the selected day) */
html body .datepicker.datepicker-dropdown table tr td.day.today { color: var(--dp-primary); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--dp-primary); background: transparent; }
html body .datepicker.datepicker-dropdown table tr td.day.today:hover { background: var(--dp-hover); }
/* ranges / highlighted */
html body .datepicker.datepicker-dropdown table tr td.day.range, html body .datepicker.datepicker-dropdown table tr td.day.highlighted { background: var(--dp-hover); color: var(--dp-primary); border-radius: 0; }
/* selected */
html body .datepicker.datepicker-dropdown table tr td.day.active, html body .datepicker.datepicker-dropdown table tr td.day.active:hover,
html body .datepicker.datepicker-dropdown table tr td.day.active.focused, html body .datepicker.datepicker-dropdown table tr td.day.active.today,
html body .datepicker.datepicker-dropdown table tr td.day.selected, html body .datepicker.datepicker-dropdown table tr td.day.selected:hover {
    background: var(--dp-primary); color: var(--dp-on-primary); font-weight: 600; border-radius: 10px; box-shadow: 0 2px 6px color-mix(in srgb, var(--dp-primary) 32%, transparent);
}
html body .datepicker.datepicker-dropdown table tr td.day.active.focused { box-shadow: 0 0 0 2px var(--dp-surface), 0 0 0 4px var(--dp-primary); }
/* disabled (min / max / datesDisabled): never hoverable, never selectable */
html body .datepicker.datepicker-dropdown table tr td.day.disabled, html body .datepicker.datepicker-dropdown table tr td.day.disabled:hover {
    background: transparent; color: var(--dp-disabled); font-weight: 400; cursor: not-allowed; box-shadow: none; text-decoration: none;
}

/* ------------------------------------------------------------------ months / years / decades ------------------------------------------------------------------ */
.datepicker table tr td span.month, .datepicker table tr td span.year, .datepicker table tr td span.decade, .datepicker table tr td span.century {
    display: inline-block; box-sizing: border-box; width: calc(25% - 6px); height: 44px; margin: 3px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 44px;
    color: var(--dp-text); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
html body .datepicker.datepicker-dropdown table tr td span.month:hover, html body .datepicker.datepicker-dropdown table tr td span.year:hover,
html body .datepicker.datepicker-dropdown table tr td span.decade:hover, html body .datepicker.datepicker-dropdown table tr td span.focused { background: var(--dp-hover); color: var(--dp-primary); }
html body .datepicker.datepicker-dropdown table tr td span.old, html body .datepicker.datepicker-dropdown table tr td span.new { color: var(--dp-other); font-weight: 400; }
html body .datepicker.datepicker-dropdown table tr td span.active, html body .datepicker.datepicker-dropdown table tr td span.active:hover {
    background: var(--dp-primary); color: var(--dp-on-primary); font-weight: 600; box-shadow: 0 2px 6px color-mix(in srgb, var(--dp-primary) 32%, transparent);
}
html body .datepicker.datepicker-dropdown table tr td span.disabled, html body .datepicker.datepicker-dropdown table tr td span.disabled:hover { background: transparent; color: var(--dp-disabled); cursor: not-allowed; box-shadow: none; }

/* ------------------------------------------------------------------ footer buttons (todayBtn / clearBtn, if a page enables them) ------------------------------------------------------------------ */
html body .datepicker.datepicker-dropdown table tfoot tr th { height: 36px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--dp-primary); cursor: pointer; }
html body .datepicker.datepicker-dropdown table tfoot tr th:hover { background: var(--dp-hover); }

/* ------------------------------------------------------------------ inputs that carry a picker ------------------------------------------------------------------ */
input.ijn-date-input, .body input.form-control[type="date"], .body input.form-control[type="datetime-local"] {
    box-sizing: border-box; height: 44px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 10px; background-color: #fff; color: #0f172a; font-size: 14px; line-height: 1.4;
    accent-color: #2563eb; transition: border-color .15s ease, box-shadow .15s ease;
}
input.ijn-date-input {
    padding-right: 44px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 20px 20px;
}
input.ijn-date-input.form-control-sm { height: 36px; padding-right: 38px; background-position: right 10px center; background-size: 18px 18px; }
/* a page that already pairs the input with its own icon (input-group) keeps that icon */
.input-group input.ijn-date-input { background-image: none; padding-right: 14px; }
input.ijn-date-input:hover:not(:focus):not(:disabled), .body input.form-control[type="date"]:hover:not(:focus):not(:disabled) { border-color: #94a3b8; }
input.ijn-date-input:focus, input.ijn-date-input:focus-visible, .body input.form-control[type="date"]:focus, .body input.form-control[type="datetime-local"]:focus {
    border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); outline: none;
}
input.ijn-date-input:disabled, input.ijn-date-input[readonly]:disabled { background-color: #f1f5f9; cursor: not-allowed; }
input.ijn-date-input::placeholder { color: #94a3b8; }
html[data-theme-engine]:not(.ijn-brand) input.ijn-date-input, html[data-theme-engine]:not(.ijn-brand) .body input.form-control[type="date"], html[data-theme-engine]:not(.ijn-brand) .body input.form-control[type="datetime-local"] {
    background-color: var(--surface, #fff); color: var(--text-primary, #0f172a); border-color: var(--border-strong, #cbd5e1); color-scheme: light dark;
}
html[data-theme-engine]:not(.ijn-brand) input.ijn-date-input:focus, html[data-theme-engine]:not(.ijn-brand) .body input.form-control[type="date"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
html[data-resolved-mode="dark"] input.ijn-date-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
html[data-resolved-mode="dark"] .input-group input.ijn-date-input { background-image: none; }

/* ------------------------------------------------------------------ xdsoft datetimepicker (Venues form) gets the same skin ------------------------------------------------------------------ */
.xdsoft_datetimepicker { padding: 10px; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14); font-family: inherit; }
.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th { border-radius: 8px; font-size: 13px; }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { background: #2563eb !important; color: #fff !important; box-shadow: none !important; }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: #2563eb; font-weight: 600; }

/* ------------------------------------------------------------------ small screens / touch ------------------------------------------------------------------ */
@media (max-width: 575.98px), (pointer: coarse) {
    html body .datepicker.datepicker-dropdown { width: min(320px, calc(100vw - 20px)); }
    html body .datepicker.datepicker-dropdown table tr td.day { height: 42px; line-height: 42px; }
    .datepicker thead tr:first-child th { height: 44px; }
    input.ijn-date-input, .body input.form-control[type="date"], .body input.form-control[type="datetime-local"] { font-size: 16px; }  /* no iOS zoom-on-focus */
}
@media (prefers-reduced-motion: reduce) {
    html body .datepicker.datepicker-dropdown { animation: none; }
    .datepicker td, .datepicker th, input.ijn-date-input { transition: none !important; }
}
@media print { .datepicker.datepicker-dropdown { display: none !important; } }

/* the shell's global :focus-visible ring (3px cyan outline) is for buttons and links; date fields use the subtle border + soft ring instead */
#timetracker-layout input.ijn-date-input:focus, #timetracker-layout input.ijn-date-input:focus-visible {
    border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); outline: none;
}
html[data-theme-engine]:not(.ijn-brand) #timetracker-layout input.ijn-date-input:focus, html[data-theme-engine]:not(.ijn-brand) #timetracker-layout input.ijn-date-input:focus-visible {
    border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

/* xdsoft picker and native date inputs: accent follows the chosen theme too */
html[data-theme-engine]:not(.ijn-brand) .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: var(--primary); }
html[data-theme-engine]:not(.ijn-brand) input.ijn-date-input, html[data-theme-engine]:not(.ijn-brand) .body input.form-control[type="date"], html[data-theme-engine]:not(.ijn-brand) .body input.form-control[type="datetime-local"] { accent-color: var(--primary); }