/* Third-party widgets restyled with the design tokens: DataTables, select2 and flatpickr. */

/* --- DataTables (searchable, paginated tables) ---------------------------------------- */

.dt-container .dt-top,
.dt-container .dt-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
}
.dt-container .dt-top {
  border-bottom: 1px solid var(--line);
}
.dt-container .dt-bottom {
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.dataTables_length label,
.dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-control);
  color: var(--muted-foreground);
}
.dataTables_length select,
.dataTables_filter input {
  height: calc(var(--spacing) * 8);
  padding: 0 calc(var(--spacing) * 2.5);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-size: var(--text-control);
  outline: none;
}
.dataTables_filter label {
  position: relative;
}
/* Search icon drawn with a mask so it takes the theme's --muted-foreground. */
.dataTables_filter label::before {
  content: "";
  position: absolute;
  left: calc(var(--spacing) * 2.5);
  top: 50%;
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
  transform: translateY(-50%);
  background: var(--muted-foreground);
  mask: url("../icons/search.svg") center / contain no-repeat;
  pointer-events: none;
}
.dataTables_filter input {
  width: calc(var(--spacing) * 55);
  padding-left: calc(var(--spacing) * 7.5);
}
.dataTables_filter input:focus,
.dataTables_length select:focus {
  border-color: color-mix(in srgb, var(--ring) 70%, transparent);
  box-shadow: var(--focus-ring-field);
}
.dataTables_paginate {
  display: flex;
  gap: calc(var(--spacing) * 1);
}
.dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--spacing) * 7.5);
  height: calc(var(--spacing) * 7.5);
  padding: 0 calc(var(--spacing) * 2.5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-size: var(--text-xs);
  cursor: pointer;
}
.dataTables_paginate .paginate_button:hover {
  background: var(--muted);
}
.dataTables_paginate .paginate_button.current {
  border-color: var(--input);
  background: var(--card);
  font-weight: var(--font-weight-medium);
}
.dataTables_paginate .paginate_button.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.dataTables_paginate .ellipsis {
  padding: 0 calc(var(--spacing) * 1);
}
table.dataTable td.dataTables_empty {
  padding: calc(var(--spacing) * 8);
  text-align: center;
  color: var(--muted-foreground);
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  cursor: pointer;
}
table.dataTable thead .sorting_asc::after {
  content: " ↑";
}
table.dataTable thead .sorting_desc::after {
  content: " ↓";
}

/* --- select2 (multi-selects) ------------------------------------------------------------ */

.select2-container {
  width: 100% !important;
  font-size: var(--text-control);
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: calc(var(--spacing) * 9);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--spacing) * 8.5);
  padding-left: calc(var(--spacing) * 3);
  color: var(--foreground);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--spacing) * 8.5);
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: color-mix(in srgb, var(--ring) 70%, transparent);
  box-shadow: var(--focus-ring-field);
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 1.5);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: calc(var(--spacing) * 0.75) calc(var(--spacing) * 1) 0 0;
  padding: 1px calc(var(--spacing) * 2);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: var(--text-xs);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: calc(var(--spacing) * 1);
  color: var(--accent-foreground);
}
.select2-container--default .select2-search--inline .select2-search__field {
  margin-top: calc(var(--spacing) * 1.25);
  color: var(--foreground);
}
.select2-dropdown {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-lg);
}
.select2-container--default .select2-results__option {
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.5);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--muted);
  color: var(--foreground);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-foreground);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--card);
}

/* --- flatpickr (date-time pickers) ------------------------------------------------------- */

.flatpickr-calendar {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--popover) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans) !important;
}
.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday,
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  background: transparent !important;
  color: var(--foreground) !important;
  fill: var(--foreground) !important;
}
.flatpickr-day {
  color: var(--foreground) !important;
  border-radius: var(--radius-md) !important;
}
.flatpickr-day:hover {
  background: var(--muted) !important;
  border-color: transparent !important;
}
.flatpickr-day.today {
  border-color: var(--border-strong) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--brand-foreground) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--muted-foreground) !important;
  opacity: var(--opacity-disabled);
}
.flatpickr-time {
  border-top: 1px solid var(--line) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: var(--muted-foreground) !important;
}

/* --- FullCalendar (interview calendar) ------------------------------------------------------ */
.fc { font-size: var(--text-control); }
.fc-toolbar.fc-header-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 4); }
.fc-toolbar > * > * { float: none; margin-left: 0 !important; }
.fc-toolbar .fc-clear, .fc-toolbar .fc-center:empty { display: none; }
.fc-toolbar .fc-left, .fc-toolbar .fc-right { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2); }
.fc-toolbar h2 { font-size: var(--text-lead); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-heading); }
.fc .fc-button-group { display: inline-flex; }
.fc button.fc-button { height: calc(var(--spacing) * 8); padding: 0 calc(var(--spacing) * 3); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); color: var(--foreground); box-shadow: none; text-shadow: none; font-size: var(--text-control); font-weight: var(--font-weight-medium); }
.fc button.fc-button:hover { background: var(--muted); }
.fc button.fc-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fc .fc-button-group > .fc-button { margin: 0 0 0 -1px; border-radius: 0; }
.fc .fc-button-group > .fc-corner-left { margin-left: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.fc .fc-button-group > .fc-corner-right { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.fc .fc-button-group > .fc-corner-left.fc-corner-right { border-radius: var(--radius-md); }
.fc button.fc-state-active { position: relative; z-index: var(--z-raised); border-color: var(--brand); background: var(--accent); color: var(--accent-foreground); }
.fc button.fc-state-disabled { opacity: var(--opacity-disabled); cursor: default; }
.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row,
.fc-unthemed .fc-content, .fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td { border-color: var(--line); }
.fc-unthemed .fc-view-container > .fc-view { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.fc-unthemed .fc-view > table { border-style: hidden; }
.fc th.fc-day-header, .fc th.fc-widget-header { padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2); background: var(--background); color: var(--muted-foreground); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-weight-normal); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number { float: none; display: inline-block; margin: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2); color: var(--muted-foreground); font-size: var(--text-xs); }
.fc-basic-view .fc-day-top { text-align: right; }
.fc-unthemed td.fc-today { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.fc-basic-view td.fc-today .fc-day-number { color: var(--brand-ink); font-weight: var(--font-weight-semibold); }
.fc-unthemed .fc-other-month .fc-day-number { opacity: 0.5; }
.fc-highlight { background: var(--accent); opacity: 0.6; }
.fc .fc-axis, .fc .fc-time-grid .fc-slats td { color: var(--muted-foreground); font-size: var(--text-2xs); }
.fc-time-grid .fc-now-indicator-line { border-color: var(--brand); }
.fc-event, .fc-event:hover { border: 0; border-radius: var(--radius-sm); padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5); margin: 1px calc(var(--spacing) * 1); font-size: var(--text-xs); line-height: var(--leading-snug); cursor: pointer; }
.fc-event .fc-time { font-weight: var(--font-weight-medium); }
.fc-event.event-completed, .fc-event.event-completed:hover { background: var(--success-soft); color: var(--success); }
.fc-event.event-pending, .fc-event.event-pending:hover { background: var(--warning-soft); color: var(--warning); }
.fc-unthemed .fc-popover { background: var(--popover); box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); }
.fc-unthemed .fc-popover .fc-header { background: var(--muted); }
.fc-unthemed .fc-list-heading td { background: var(--background); }
.fc-unthemed .fc-list-item:hover td { background: var(--muted); }
.fc-list-item { cursor: pointer; }
.fc-list-item.event-completed .fc-event-dot { background: var(--success); }
.fc-list-item.event-pending .fc-event-dot { background: var(--warning); }
.fc-unthemed .fc-list-empty { background: var(--background); color: var(--muted-foreground); }