/* Kinetic-industrial skin for flatpickr — square corners, teal accent,
   stamped shadow, brand fonts. Loaded after flatpickr.min.css to override. */
.flatpickr-calendar {
  border-radius: 0;
  box-shadow: 0 6px 0 rgba(0,0,0,0.10), 0 0 0 1px #e4e4ea;
  font-family: 'Archivo', system-ui, sans-serif;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { display: none; }
.flatpickr-day { border-radius: 0; }
.flatpickr-day:hover, .flatpickr-day:focus { border-radius: 0; background: var(--primary-soft, #D6E8F7); border-color: var(--primary-soft, #D6E8F7); }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected.startRange, .flatpickr-day.selected.endRange {
  background: var(--accent, var(--primary, #58A0D8));
  border-color: var(--accent, var(--primary, #58A0D8));
  color: #fff;
}
.flatpickr-day.today { border-color: var(--accent, var(--primary, #58A0D8)); }
.flatpickr-day.today:hover { background: var(--accent, var(--primary, #58A0D8)); color: #fff; }
span.flatpickr-weekday { color: var(--accent, var(--primary, #58A0D8)); font-weight: 600; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent, var(--primary, #58A0D8)); }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { font-weight: 600; }
.flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover { background: #fff5ee; }
.flatpickr-time .flatpickr-am-pm { font-weight: 600; }

/* Clear (×) button injected next to each picker by datetime-picker.js, so a
   once-set date/time can be blanked (flatpickr's altInput is read-only). Hidden
   by JS when the field is empty. */
.fp-clear {
  margin-left: 0.35rem;
  width: 1.6rem; height: 1.6rem;
  padding: 0; line-height: 1;
  border: 1px solid var(--border, #d0d0d0);
  background: var(--surface, #fff);
  color: var(--text-muted, #666);
  font-size: 1.05rem; font-weight: 600;
  cursor: pointer; vertical-align: middle;
  border-radius: 0;
}
.fp-clear:hover { color: #fff; background: var(--accent, #58A0D8); border-color: var(--accent, #58A0D8); }
html[data-theme="dark"] .fp-clear { background: #1d1d1f; border-color: rgba(255,255,255,0.18); color: #aaa; }
html[data-theme="dark"] .fp-clear:hover { background: var(--accent, #58A0D8); border-color: var(--accent, #58A0D8); color: #fff; }

/* Done bar under the time row (datetime-picker.js adds it to pickers that
   have a time row, which otherwise stay open and cover the controls below). */
.fp-done-bar { display: flex; justify-content: flex-end; padding: 8px 10px 10px; border-top: 1px solid var(--border, #e4e4ea); background: inherit; }
.fp-done {
  min-height: 36px; padding: 0 16px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--accent, var(--primary, #58A0D8)); color: var(--on-primary, #fff);
  font: inherit; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
}
.fp-done:hover { filter: brightness(1.08); }
.fp-done:focus-visible { outline: 2px solid var(--accent, #58A0D8); outline-offset: 2px; }