/*
 * Optimizely Axiom -- Overlays und Fremdbauteile.
 *
 * jQuery UI, Dropzone und DataTables bringen eigene Stylesheets mit, deren
 * Aussehen aus einer anderen Zeit stammt. Ausgetauscht werden sie nicht: der
 * Elementeditor haengt an jQuery UIs dialog(), draggable() und sortable(),
 * und das Skript liegt nur minifiziert vor. Also bleibt die Mechanik und nur
 * das Aussehen wird auf Axiom gezogen.
 */

/* ------------------------------------------------------- jQuery UI ------- */

/*
 * Axiom-Dialog: Radius lg, Flaeche bg.default, Schatten xl, Kopf mit
 * Trennlinie. Der Backdrop nutzt bg.overlay.
 */
.ui-widget.ui-dialog {
  padding: 0;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-lg);
  background: var(--ax-colors-bg-default);
  box-shadow: var(--ax-boxShadow-xl);
  font-family: var(--ax-fontFamily-sans);
  font-size: var(--ax-fontSize-md-fontSize);
  color: var(--ax-colors-fg-default);
}

.ui-dialog .ui-dialog-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
  border-start-start-radius: var(--ax-borderRadius-lg);
  border-start-end-radius: var(--ax-borderRadius-lg);
  background: transparent;
}

.ui-dialog .ui-dialog-title {
  margin: 0;
  color: var(--ax-colors-fg-default);
  font-family: var(--ax-fontFamily-heading);
  font-size: var(--ax-fontSize-lg-fontSize);
  line-height: var(--ax-fontSize-lg-lineHeight);
  font-weight: 600;
}

/* Schliessen: Axioms ButtonIcon, appearance subtle. */
.ui-dialog .ui-dialog-titlebar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ax-size-md);
  height: var(--ax-size-md);
  margin: 0;
  margin-inline-start: auto;
  padding: 0;
  position: static;
  border: 1px solid transparent;
  border-radius: var(--ax-borderRadius-md);
  background: transparent;
  color: var(--ax-colors-fg-secondary);
  cursor: pointer;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  background-color: var(--ax-colors-bg-default-hovered);
  border-color: var(--ax-colors-border-control-hovered);
}

/* Das Symbol von jQuery UI durch ein Kreuz ersetzen. */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-text {
  display: none;
}

.ui-dialog .ui-dialog-titlebar-close::before {
  content: "\2715";
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: 1;
}

.ui-dialog .ui-dialog-content {
  padding: 20px;
  color: var(--ax-colors-fg-default);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
}

/*
 * Der Aufbau von Axioms Dialog: Kopf, Inhalt, Fuss.
 *
 * Die Vorlagen bringen ihn selbst mit (dialog-kopf/-inhalt/-fuss), weil die
 * Dialoge mit no-title laufen -- die Titelzeile von jQuery UI bleibt leer und
 * ausgeblendet. Sobald eine Vorlage den Aufbau mitbringt, faellt der
 * Innenabstand des Inhalts weg: die drei Teile tragen ihren eigenen.
 */
.ui-dialog .ui-dialog-content:has(.dialog-kopf) { padding: 0; }

.dialog-kopf {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 24px 24px 16px;
  background-color: var(--ax-colors-bg-default);
}

.dialog-titel {
  order: 1;
  flex: 1;
  margin: 0;
  font-size: var(--ax-fontSize-lg-fontSize);
  line-height: var(--ax-fontSize-lg-lineHeight);
  font-weight: 600;
}

.dialog-beschreibung {
  order: 4;
  width: 100%;
  margin: 0;
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
  font-weight: 400;
}

.dialog-inhalt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
  font-size: var(--ax-fontSize-md-fontSize);
}

.dialog-fuss {
  display: flex;
  gap: 16px;
  justify-content: end;
  padding: 20px 24px;
  border-top: 1px solid var(--ax-colors-border-secondary);
  background-color: var(--ax-colors-bg-default);
}

/*
 * Aufzaehlungen im Dialog -- die betroffenen Dateien, die Angaben zum
 * Eintrag. Abgesetzt wie eine Karte, damit sie nicht mit dem Fliesstext
 * verschwimmen.
 */
.dialog-liste {
  max-height: 240px;
  overflow-y: auto;
  padding: 12px 16px;
  border: 1px solid var(--ax-colors-border-tertiary);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-secondary);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

.dialog-liste:empty { display: none; }

.ui-dialog .ui-dialog-buttonpane {
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-top: 1px solid var(--ax-colors-border-secondary);
  background: var(--ax-colors-bg-page);
}

/* Axiom legt hinter den Dialog einen weichgezeichneten Schleier. */
.ui-widget-overlay {
  background: var(--ax-colors-bg-overlay);
  backdrop-filter: blur(4px);
  opacity: 1;
}

.ui-dialog .ui-resizable-handle { display: none; }

/*
 * Dialoge mit eigenem Kopf (Klasse no-title): die Titelzeile von jQuery UI
 * traegt keinen Text mehr, nur noch das Kreuz. In Axiom sitzt das Kreuz in
 * derselben Zeile wie der Titel -- also legt es sich hierher, statt einen
 * eigenen Streifen ueber dem Kopf aufzuspannen.
 */
.ui-dialog.no-title .ui-dialog-titlebar {
  position: absolute;
  z-index: 20;
  top: 20px;
  inset-inline-end: 20px;
  padding: 0;
  border: 0;
  background: none;
}

.ui-dialog.no-title .ui-dialog-title { display: none; }

.ui-dialog.no-close .ui-dialog-titlebar { display: none; }

/* Platz fuer das Kreuz, damit der Titel nicht darunter laeuft. */
.ui-dialog.no-title .dialog-titel { padding-inline-end: 32px; }

/* Sortieren und Ziehen: Platzhalter und mitgezogenes Element. */
.ui-sortable-helper {
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-default);
  box-shadow: var(--ax-boxShadow-lg);
}

.ui-draggable-handle { cursor: move; }

/* jQuery UI faerbt sonst Schrift und Flaechen selbst. */
.ui-widget-content {
  border-color: var(--ax-colors-border-secondary);
  background: var(--ax-colors-bg-default);
  color: var(--ax-colors-fg-default);
}

.ui-widget-header {
  border-color: var(--ax-colors-border-secondary);
  background: var(--ax-colors-bg-page);
  color: var(--ax-colors-fg-default);
}

.ui-widget.ui-widget-content { border-color: var(--ax-colors-border-secondary); }

/* --------------------------------------------------------- Dropzone ------ */

/*
 * Axioms FileUpload: gestrichelter Rahmen, Flaeche bg.page, beim Ueberfahren
 * Akzentrahmen.
 */
.dropzone,
#upload_container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 24px;
  border: 1px dashed var(--ax-colors-border-control);
  border-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-page);
  color: var(--ax-colors-fg-secondary);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ax-duration-sm) ease,
              background-color var(--ax-duration-sm) ease;
}

.dropzone:hover,
#upload_container:hover,
.dropzone.dz-drag-hover {
  border-color: var(--ax-colors-fg-accent-strong);
  background-color: var(--ax-colors-bg-accent-subtle);
}

/* Das umgebende form traegt in den Templates ebenfalls .dropzone. */
form.dropzone {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: auto;
}

.dz-message { margin: 0; }

.dz-default.dz-message span {
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
}

.dz-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 8px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-default);
  font-size: var(--ax-fontSize-sm-fontSize);
}

.dz-preview .dz-error-message { color: var(--ax-colors-fg-error); }
.dz-preview.dz-success { border-color: var(--ax-colors-border-success); }
.dz-preview.dz-error   { border-color: var(--ax-colors-border-error); }

/* -------------------------------------------------------- DataTables ----- */

.dataTables_wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dataTables_filter,
.dataTables_length {
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-sm-fontSize);
}

.dataTables_filter input,
.dataTables_length select {
  height: var(--ax-size-lg);
  margin-inline-start: 8px;
  padding: 0 8px;
  border: 1px solid var(--ax-colors-border-default);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-default);
  color: var(--ax-colors-fg-default);
  font-family: var(--ax-fontFamily-sans);
  font-size: var(--ax-fontSize-md-fontSize);
}

.dataTables_filter input:focus,
.dataTables_length select:focus {
  border-color: var(--ax-colors-border-control);
  outline: 2px solid var(--ax-colors-border-focus);
  outline-offset: 2px;
}

.dataTables_info {
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-sm-fontSize);
}

/* Blaettern: Axiom-Pagination. */
.dataTables_paginate {
  display: flex;
  gap: 2px;
}

.dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ax-size-md);
  height: var(--ax-size-md);
  padding-inline: 8px;
  border: 1px solid transparent;
  border-radius: var(--ax-borderRadius-md);
  background: none;
  color: var(--ax-colors-fg-default);
  font-size: var(--ax-fontSize-md-fontSize);
  cursor: pointer;
}

.dataTables_paginate .paginate_button:hover {
  background-color: var(--ax-colors-bg-default-hovered);
  border-color: var(--ax-colors-border-control-hovered);
  color: var(--ax-colors-fg-default);
}

.dataTables_paginate .paginate_button.current {
  background-color: var(--ax-colors-bg-accent);
  border-color: var(--ax-colors-bg-accent);
  color: var(--ax-colors-fg-black);
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  background: none;
  border-color: transparent;
  color: var(--ax-colors-fg-disabled);
  cursor: not-allowed;
}

/* Sortierpfeile in der Kopfzeile. */
/*
 * Platz fuer den Sortierpfeil. Sparsam: zusammen mit nicht umbrechenden
 * Kopfzeilen wurde die Tabelle sonst ein paar Pixel breiter als ihr Rahmen,
 * und das Responsive-Modul blendete daraufhin die Aktionsspalte aus.
 */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  position: relative;
  padding-inline-end: 18px;
  cursor: pointer;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  position: absolute;
  inset-inline-end: 4px;
  color: var(--ax-colors-fg-tertiary);
  content: "\2195";
}

table.dataTable thead th.sorting_asc::after  { content: "\2191"; color: var(--ax-colors-fg-default); }
table.dataTable thead th.sorting_desc::after { content: "\2193"; color: var(--ax-colors-fg-default); }

/* ------------------------------------------------------ Datetimepicker --- */

.xdsoft_datetimepicker {
  border: 1px solid var(--ax-colors-border-secondary) !important;
  border-radius: var(--ax-borderRadius-lg) !important;
  background: var(--ax-colors-bg-default) !important;
  box-shadow: var(--ax-boxShadow-lg) !important;
  font-family: var(--ax-fontFamily-sans) !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background: var(--ax-colors-bg-accent) !important;
  color: var(--ax-colors-fg-black) !important;
  box-shadow: none !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover {
  background: var(--ax-colors-bg-accent-subtle) !important;
  color: var(--ax-colors-fg-default) !important;
}