/* ==========================================================================
   dx-overrides.css - GITIS-Look fuer die DevExtreme-Oberflaeche
                                                          angelegt 22.09.2026
   --------------------------------------------------------------------------
   Wird NACH lib/devextreme/css/dx.light.css geladen und ueberschreibt nur.
   Die Vendor-Datei bleibt unangetastet - Rueckbau jederzeit moeglich, indem
   der <link> auf diese Datei entfernt wird.

   Hintergrund: dx.light.css (DevExtreme 18.2.4) wurde seinerzeit von Hand
   gepatcht - 15 Stellen auf #01619D. Daneben stehen 88 Stellen im
   DevExtreme-Standardblau #337ab7, die nie angefasst wurden. Beides wird
   hier auf die GITIS-Palette gezogen.

   Die Selektoren sind absichtlich wortgleich mit denen der Vendor-Datei
   uebernommen, damit die Spezifitaet passt und allein die Ladereihenfolge
   entscheidet. Kein !important.

   Eingesetzte Widgets laut mainCalculator.js / archive.js:
     dxNumberBox 92x, dxCheckBox 63x, dxForm 33x, dxTextArea 13x,
     dxRadioGroup 11x, dxTextBox 9x, dxPopup 9x, dxDataGrid 8x,
     dxFileUploader 6x, dxSelectBox 3x, dxButton 1x
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Eingabefelder - das haeufigste Element der Anwendung
      war: Rahmen 1px #999, Hover und Fokus #01619D
      FORM: hellere Ruhekante, gruener Fokus mit Ring wie auf gitis.it
   -------------------------------------------------------------------------- */
.dx-texteditor.dx-editor-outlined {
	background: #fff;
	border: 1px solid var(--gitis-hairline, #e4e7e9);
	border-radius: var(--gitis-radius, 0);
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Das Eingabefeld selbst hat in dx.light.css background:#fff und
   border-radius:4px. Ohne diese Regel bliebe die Fuellung des Wrappers
   unsichtbar und die Ecke rund. */
.dx-texteditor-input {
	background: transparent;
	border-radius: var(--gitis-radius, 0);
}

.dx-texteditor.dx-state-hover {
	border-color: var(--gitis-green, #18a54c);
}

.dx-texteditor.dx-state-focused.dx-editor-filled,
.dx-texteditor.dx-state-active.dx-editor-filled,
.dx-texteditor.dx-state-focused.dx-editor-underlined,
.dx-texteditor.dx-state-active.dx-editor-underlined,
.dx-texteditor.dx-state-focused.dx-editor-outlined,
.dx-texteditor.dx-state-active.dx-editor-outlined {
	border-color: var(--gitis-green, #18a54c);
	box-shadow: 0 0 0 0.2rem rgba(24, 165, 76, 0.25);
}


/* --------------------------------------------------------------------------
   2. Checkboxen - 63 Stueck in der Anwendung
      war: #01619D
   -------------------------------------------------------------------------- */
.dx-checkbox.dx-state-hover .dx-checkbox-icon,
.dx-checkbox.dx-state-focused .dx-checkbox-icon {
	border: 1px solid var(--gitis-green, #18a54c);
}

.dx-checkbox.dx-state-focused .dx-checkbox-icon {
	box-shadow: 0 0 0 0.2rem rgba(24, 165, 76, 0.25);
}

.dx-checkbox-checked .dx-checkbox-icon,
.dx-checkbox-indeterminate .dx-checkbox-icon,
.iso-group .dx-checkbox-checked .dx-checkbox-icon,
#form-conf .dx-checkbox-checked .dx-checkbox-icon {
	color: var(--gitis-green, #18a54c);
}


/* --------------------------------------------------------------------------
   3. Optionsfelder (dxRadioGroup)
      war: #01619D
   -------------------------------------------------------------------------- */
.dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
	background: var(--gitis-green, #18a54c);
}

.dx-radiobutton.dx-state-hover .dx-radiobutton-icon:before {
	border-color: var(--gitis-green, #18a54c);
}

.dx-radiobutton.dx-state-focused:not(.dx-state-active) .dx-radiobutton-icon:before {
	border: 1px solid var(--gitis-green, #18a54c);
}


/* --------------------------------------------------------------------------
   4. Auswahllisten (Dropdowns von dxSelectBox)
      war: DevExtreme-Standardblau #337ab7 - nie gepatcht, daher bislang
      der auffaelligste Fremdfarbton beim Aufklappen.
   -------------------------------------------------------------------------- */
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused,
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active,
.dx-device-mobile .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused,
.dx-device-mobile .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active {
	background-color: var(--gitis-green, #18a54c);
}


/* --------------------------------------------------------------------------
   5. Tabellen (dxDataGrid) - Archiv und Positionsliste
      war: Auswahl und Fokus #01619D, Links und Zeilenfokus #337ab7
      FORM: Kopfzeile bekommt Kontrast, Versalien und eine gruene Unterkante
      statt der blassen grauen Linie.
   -------------------------------------------------------------------------- */
/* ACHTUNG - Typografie der Spaltenkoepfe NICHT veraendern.
   Das DataGrid berechnet die Spaltenbreiten aus dem Inhalt einschliesslich
   der Kopfzeilen. text-transform, letter-spacing, font-weight oder
   font-size verbreitern den Kopftext und verschieben damit die Breiten,
   die mit dem Kunden abgestimmt wurden.
   Hier deshalb ausschliesslich die Unterkante - sie hat keinen Einfluss
   auf die Spaltenbreite. */
.dx-datagrid-headers {
	border-bottom: 2px solid var(--gitis-green, #18a54c);
}

.dx-datagrid-rowsview .dx-selection.dx-row > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > td,
.dx-datagrid-rowsview .dx-selection.dx-row > tr > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > tr > td {
	background-color: var(--gitis-green, #18a54c);
}

.dx-datagrid-focus-overlay {
	border: 1.5px solid var(--gitis-green, #18a54c);
}

.dx-datagrid .dx-link {
	color: var(--gitis-green, #18a54c);
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-edit-row) > td:not(.dx-focused),
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-edit-row) > tr > td:not(.dx-focused),
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-edit-row) .dx-command-edit .dx-link,
.dx-datagrid-rowsview .dx-row-focused.dx-group-row,
.dx-datagrid-search-text {
	background-color: var(--gitis-green, #18a54c);
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-edit-row) > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-edit-row) > tr > td {
	border-top: 1px solid var(--gitis-green, #18a54c);
}


/* --------------------------------------------------------------------------
   6. Dialoge (dxPopup) - Sonderanfrage, Upload, Benutzerinfo
      FORM: flacher Titel mit gruener Trennkante und Versalien statt der
      unscheinbaren transparenten Zeile.
   -------------------------------------------------------------------------- */
.dx-popup-title {
	background: transparent;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	border-bottom: 2px solid var(--gitis-green, #18a54c);
	padding: 10px 20px;
}

/* Datumsauswahl hat einen eigenen, bewusst leeren Titel - nicht anfassen. */
.dx-datebox-wrapper .dx-popup-title {
	border-bottom: none;
	padding: 6px 20px;
}

/* Dialoge schweben ueber der Seite - hoechste Ebene, kein Rahmen. */
.dx-overlay-content {
	border-radius: var(--gitis-radius, 0);
	box-shadow: var(--gitis-elev-3, 0 10px 28px rgba(16,24,32,.12), 0 32px 72px rgba(16,24,32,.16));
	border: none;
}


/* --------------------------------------------------------------------------
   7. Schaltflaechen, Abzeichen, Hinweise
      war: #337ab7
   -------------------------------------------------------------------------- */
.dx-button {
	border-radius: var(--gitis-radius, 0);
}

.dx-button-mode-contained.dx-button-default {
	background-color: var(--gitis-green, #18a54c);
}

.dx-badge,
.dx-toast-info {
	background-color: var(--gitis-green, #18a54c);
}

.dx-theme-generic-typography a {
	color: var(--gitis-green, #18a54c);
}


/* --------------------------------------------------------------------------
   8. Kalendernavigation (Datumsfelder)
      war: #01619D
   -------------------------------------------------------------------------- */
.dx-calendar-navigator .dx-calendar-caption-button.dx-button .dx-button-content,
.dx-calendar-navigator-previous-view.dx-button .dx-icon,
.dx-calendar-navigator-previous-month.dx-button .dx-icon,
.dx-calendar-navigator-next-view.dx-button .dx-icon,
.dx-calendar-navigator-next-month.dx-button .dx-icon {
	color: var(--gitis-green, #18a54c);
}


/* --------------------------------------------------------------------------
   9. Fortschritt und Datei-Upload (dxFileUploader)
      war: #337ab7
   -------------------------------------------------------------------------- */
.dx-progressbar-range {
	border: 1px solid var(--gitis-green, #18a54c);
}

.dx-slider-range.dx-slider-range-visible {
	border: 1px solid var(--gitis-green, #18a54c);
}

.dx-slider-handle {
	background-color: var(--gitis-green, #18a54c);
}


/* --------------------------------------------------------------------------
   10. Restliche Stellen im DevExtreme-Standardblau, die zu genutzten
       Widgets gehoeren. Die Vendor-Regel in Abschnitt 5 setzt border-top
       UND border-bottom - ohne diesen Block bliebe die Unterkante blau.
   -------------------------------------------------------------------------- */
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-edit-row) > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-edit-row) > tr > td {
	border-bottom: 1px solid var(--gitis-green, #18a54c);
}

.dx-datagrid-drop-highlight > td {
	background-color: var(--gitis-green, #18a54c);
}

.dx-datagrid-filter-panel .dx-icon-filter,
.dx-datagrid-filter-panel .dx-datagrid-filter-panel-text,
.dx-datagrid-filter-panel .dx-datagrid-filter-panel-clear-filter {
	color: var(--gitis-green, #18a54c);
}

/* dxSelectBox rendert seine Auswahlliste ueber dx-list. */
.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-focused .dx-radiobutton-icon:before,
.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-focused .dx-checkbox-icon,
.dx-device-mobile .dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-focused .dx-radiobutton-icon:before,
.dx-device-mobile .dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-focused .dx-checkbox-icon {
	border: 1px solid var(--gitis-green, #18a54c);
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active .dx-list-slide-item-content,
.dx-device-mobile .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active .dx-list-slide-item-content,
.dx-list-slide-menu-button-menu,
.dx-device-mobile .dx-list-slide-menu-button-menu {
	background-color: var(--gitis-green, #18a54c);
}


/* --------------------------------------------------------------------------
   11. Kalender der Datumsfelder - ausgewaehlter Tag
       DevExtreme faerbt die Zelle ueber einen 1000px-Inset-Schatten.
   -------------------------------------------------------------------------- */
.dx-calendar-cell.dx-calendar-selected-date,
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today {
	-webkit-box-shadow: inset 0px 0px 0px 1000px var(--gitis-green, #18a54c);
	box-shadow: inset 0px 0px 0px 1000px var(--gitis-green, #18a54c);
}

.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-contoured-date,
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today.dx-calendar-contoured-date {
	-webkit-box-shadow: inset 0px 0px 0px 1px #bebebe, inset 0px 0px 0px 1000px var(--gitis-green, #18a54c);
	box-shadow: inset 0px 0px 0px 1px #bebebe, inset 0px 0px 0px 1000px var(--gitis-green, #18a54c);
}

/* Fortschrittsleiste des Datei-Uploads (dxFileUploader nutzt dxProgressBar).
   Der Rahmen allein reicht nicht - die Fuellung traegt die Farbe. */
.dx-progressbar-range {
	border: 1px solid var(--gitis-green, #18a54c);
	background-color: var(--gitis-green, #18a54c);
}

.dx-progressbar-animating-container {
	background-image: linear-gradient(to right, transparent 5%, var(--gitis-green, #18a54c), transparent 95%);
}