.chart-canvas {
  position: relative;
  width: 100%;
  min-height: 240px;
  height: 280px;
}

.chart-canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-fallback {
  margin-block-start: var(--app-space-4);
  border-block-start: 1px solid var(--app-border);
  padding-block-start: var(--app-space-3);
  font-size: var(--app-text-body-sm-size);
}

.chart-fallback summary {
  cursor: pointer;
  color: var(--app-primary-text);
  font-weight: 600;
}

.dt-container,
.dataTables_wrapper {
  padding: var(--app-space-3) var(--app-space-4);
  color: var(--app-text);
}

.dt-container .dt-layout-row,
.dataTables_wrapper .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-3);
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--app-space-3);
}

.dt-container .dt-length,
.dt-container .dt-info,
.dt-container .dt-search,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter {
  color: var(--app-text-muted);
  font-size: var(--app-text-body-sm-size);
}

.dt-container .dt-length select,
.dataTables_wrapper .dataTables_length select {
  display: inline-block;
  width: auto;
  min-height: 32px;
  margin-inline: 4px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  color: var(--app-text);
}

.dt-container .dt-paging .pagination,
.dataTables_wrapper .pagination {
  margin: 0;
}

.dt-container .dt-paging .page-link,
.dataTables_wrapper .page-link {
  color: var(--app-primary-text);
}

.dt-container .dt-paging .active > .page-link,
.dataTables_wrapper .active > .page-link {
  border-color: var(--app-primary);
  background: var(--app-primary);
  color: #fff;
}

.ts-wrapper .ts-control {
  min-height: 40px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: none;
}

.ts-wrapper.focus .ts-control {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px var(--app-focus-ring, rgba(37, 99, 235, 0.25));
}

.ts-wrapper .ts-dropdown {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  color: var(--app-text);
}

.ts-wrapper .ts-dropdown .option.active {
  background: var(--app-primary-subtle);
  color: var(--app-primary-text);
}

.dropzone-app {
  min-height: 128px;
  border: 1px dashed var(--app-border-strong, #cbd5e1);
  border-radius: var(--app-radius-md);
  background: var(--app-surface-subtle, #f8fafc);
  color: var(--app-text-muted);
  font-size: var(--app-text-body-sm-size);
}

.dropzone-app:hover,
.dropzone-app.dz-drag-hover {
  border-color: var(--app-primary);
  background: var(--app-primary-subtle);
}

.dropzone-app .dz-message {
  margin: 2rem 1rem;
}

.dropzone-app .dz-preview .dz-progress {
  background: var(--app-border);
}

.flatpickr-calendar {
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: var(--app-shadow-md, 0 10px 30px rgba(15, 23, 42, 0.12));
}

.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-weekday,
.flatpickr-calendar .flatpickr-day,
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-monthDropdown-months {
  background: var(--app-surface);
  color: var(--app-text);
}

.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus {
  border-color: var(--app-primary-border);
  background: var(--app-primary-subtle);
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
  border-color: var(--app-primary);
  background: var(--app-primary);
  color: #fff;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--app-border);
}

.flatpickr-input[readonly] {
  background: var(--app-surface);
}

.swal2-popup.swal-app {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  color: var(--app-text);
  font-family: var(--app-font-sans);
}

.swal-app .swal2-title,
.swal-app .swal2-html-container {
  color: var(--app-text);
}

.swal-app .swal2-actions .btn,
.swal-app .swal2-confirm,
.swal-app .swal2-cancel {
  min-height: 40px;
  border-radius: var(--app-radius-sm);
  font-weight: 600;
}

[data-bs-theme="dark"] .dropzone-app {
  background: var(--app-surface-subtle);
}

[data-bs-theme="dark"] .flatpickr-calendar,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-weekdays,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-monthDropdown-months {
  background: var(--app-surface);
  color: var(--app-text);
}

[data-bs-theme="dark"] .dt-container,
[data-bs-theme="dark"] .dataTables_wrapper,
[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-wrapper .ts-dropdown {
  background: var(--app-surface);
  color: var(--app-text);
}

@media (max-width: 575.98px) {
  .dt-container .dt-layout-row,
  .dataTables_wrapper .row {
    align-items: stretch;
    flex-direction: column;
  }

  .chart-canvas {
    height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dt-container *,
  .ts-wrapper *,
  .flatpickr-calendar *,
  .dropzone-app * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}