/* =========================================================================
   Custom-Override HelpdeskOnline.css – ACP Corporate Design (CD Manual 2025)
   Wird zusätzlich zur Original-Datei geladen, NICHT diese ersetzen.
   ========================================================================= */

/* ---- ACP-Farbpalette auf HDO-Variablen gemappt ---- */
:root {
  --mainFontColor: #252C31;          /* ACP Anthrazit dark */
  --mainBackgroundColor: #EBECED;    /* ACP Hellgrau */
  --mainBorderColor: #C1C5C8;        /* ACP Hellgrau dark */
  --accentFontColor: #F00F40;        /* ACP ROT (Primär) - AA fuer fetten/grossen Text */
  --accentFontColorAA: #900926;      /* ACP ROT dark - Reserve fuer kleinen Fliesstext (strikte AA) */
  --accentBackgroundColor: #F00F40;  /* ACP ROT */
  --accentBackgroundColorLight: #FEE7EC; /* ACP ROT light - nur fuer dezente Flaechen (aktiver Reiter) */
  --accentBorderColor: #F00F40;      /* ACP ROT */
  --inversedFontColor: #FFFFFF;
  --inversedBackgroundColor: #FFFFFF;
  --inversedBorderColor: #FFFFFF;

  /* Neu: für diesen Override benötigte zusätzliche Variablen */
  --mutedTextColor: #636D74;         /* ACP Anthrazit light, ersetzt #8F8F8F */
  --inputBorderColor: #3D4A52;       /* ACP Anthrazit, ersetzt #4E5052 */
  --accentGlow: rgba(240, 15, 64, 0.12); /* ACP-Glow für Fokus/Aktiv-Zustände */
}

/* ---- Hartkodierte Farben aus Original ersetzen (gleiche Selektoren) ---- */

.error {
  color: var(--accentFontColor); /* war #D00000 */
}

.actionUpload .dxCB.dxucTextBox a:before,
.LVGroup,
.LVFilter .dxeTextBoxSys .dxic:after,
.dxeButtonEditClearButton:after,
.LVFilter .LVComboBoxEditIcon:after,
.FALoadingPanel .dx:before,
.dxucControl .dxucTextBox.dxucNullText .dxucEditArea,
.divVersion .lblVersion {
  color: var(--mutedTextColor); /* war #8F8F8F */
}

.LVHeader,
.dxgvGroupRow td,
iframe.mailViewViewArea {
  border-color: var(--mutedTextColor);
}

.dxgvFilterRow td.dxgv,
.LVRow:hover td.dxgv:last-child,
.LVGroupRow:hover td.dxgv:last-child,
.singleMailPanel:hover .mailButton,
.singleMailPanel:hover .mailHeader,
.singleMailPanel:hover .mailView {
  border-right-color: var(--mutedTextColor);
}

.LVGroup,
.dxgvFilterRow td.dxgv,
.LVRow td.dxgv,
.LVRowAlt td.dxgv,
.LVEmptyRow td.dxgv,
.LVRow:hover td.dxgv,
.LVGroupRow:hover td.dxgv,
.LVDetailRow td.dxgv,
.mailPanel,
.mailButton.expanded:hover {
  border-bottom-color: var(--mutedTextColor);
}

.LVRow:hover td.dxgv:first-child, .LVRow:hover td.dxgvIndentCell:first-child,
.LVGroupRow:hover td.dxgv:first-child, .LVGroupRow:hover td.dxgvIndentCell:first-child,
.singleMailPanel:hover .mailButton,
.singleMailPanel:hover .mailHeader,
.singleMailPanel:hover .mailView {
  border-left-color: var(--mutedTextColor) !important;
}

div.mailButton {
  border-top-color: var(--mutedTextColor);
}

div.tox.tox-tinymce {
  border-color: var(--inputBorderColor) !important;
}

.dxeTextBox,
.dxeMemo.dxeMemoSys,
.dxeButtonEdit,
.dxeButtonEdit td,
.dxeListBox,
.dxpcDropDown .dxeListBox,
.dxucControl .dxucTextBox,
.dxucControl .dxucTextBox.dxCB {
  border-color: var(--inputBorderColor);
}

/* ACP-Logo (logo2.png) in der Navigationsleiste ganz links, vor "Anfragen".
   Padding-left schafft Platz, damit die Reiter (float:left) nicht ueberdeckt
   werden. */
/* Zurueck-Button: neutral statt volles Rot, damit er nicht mit "Absenden"
   um Aufmerksamkeit konkurriert (gleiche visuelle Lautstaerke war das
   Problem). Roter Pfeil bleibt als Akzent erhalten.
   Bleibt hier in HelpdeskOnline.css, da .dxbButton_back seitenuebergreifend
   verwendet wird (nicht nur auf der Ticket-Erstellen-Seite). */
.dxbButton_back {
  background-color: var(--inversedBackgroundColor) !important;
  border: 1px solid var(--mainBorderColor);
  border-radius: 6px;
}

.dxbButton_back span.dx-vam:after {
  color: var(--accentFontColor);
}

.mainNavigation {
  position: relative;
  padding-left: 120px;
}

.mainNavigation::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 12px;
  width: 99px;
  height: 99px;
  background-image: url("logo2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

/* Rechtes Logo unterhalb der Navigationsleiste wurde entfernt (auf Wunsch) */

/* =========================================================================
   Durchgaengiger Hintergrund: body selbst hatte im Original keine
   background-color (nur ein innerer Wrapper via .mainBackgroundColor).
   Auf breiten Viewports (Seite min-width: 800px) sonst ggf. weisser
   Rand ausserhalb des Wrappers sichtbar.
   ========================================================================= */

body {
  background-color: var(--mainBackgroundColor);
}

/* =========================================================================
   Abstand "Neue Anfrage"-Button zur Listen-/Reiterleiste vergrößern
   (Original: 20px padding-bottom + 10px margin-top = 30px, wirkt zu knapp)
   ========================================================================= */

.divNewRequest {
  padding-bottom: 35px;
}

.buttonlist {
  margin-top: 20px;
}

/* =========================================================================
   Aktiver Reiter (Haupt- und Sub-Navigation): dezenter Pill-Hintergrund
   statt reiner Farbunterscheidung, da Farbe allein aktiv/inaktiv nicht
   zuverlässig unterscheidbar macht.
   ========================================================================= */

.dxbDisabled_mainNav,
.dxbDisabled_subNav {
  background-color: var(--accentBackgroundColorLight);
  border-radius: 4px;
}

/* =========================================================================
   Listen-/Grid-Tabellen (Ticketliste, FAQ-Liste etc.): gleiche Karten-Sprache
   wie Login-Karte und Ticket-Popup (Apple-Prinzip "Craft": konsistentes
   visuelles Vokabular). .ListView hat bereits overflow:hidden und
   border-collapse:separate - ideal fuer border-radius auf Tabellen.
   ========================================================================= */

/* Korrektur: "divGridView" ist nur eine ID, keine Klasse - die tatsaechliche
   aeussere weisse Tabelle traegt die Klasse .LVMain (bestaetigt per Inspektor). */
.LVMain {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--mainBorderColor);
  box-shadow: 0 2px 12px rgba(37, 44, 49, 0.08);
}

.actionButton,
.dxbButton_actionButton {
  border-radius: 6px;
  overflow: hidden;
}

.actionButton div.dxb,
.dxbButton_actionButton div.dxb {
  border-radius: 6px;
}

/* "Ansichten"-Popup: Test mit box-sizing:border-box, um zu verhindern, dass
   der Rahmen die von DevExpress per JS berechnete Breite (~352px inline)
   vergroessert - das hatte zuvor das eingebettete Dropdown durcheinander
   gebracht. Praeziser Selektor: nur der innere sichtbare dxpc-mainDiv,
   nicht die aeussere (unsichtbare, height:0) Positionierungs-Huelle. */
/* Combobox-Dropdown-Liste (z.B. "Alle Anfragen"-Auswahl): untere Ecken rund,
   analog zum dxm-popup-Menue (border-top-width:0 im Original).
   .dxpcDropDown zusaetzlich als vermuteter aeusserer Wrapper (Kontext aus
   bestehender CSS: ".dxpcDropDown .dxeListBox") - bitte per Inspektor
   verifizieren, falls das immer noch nicht greift. */
.dxeListBox,
.dxpcDropDown {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
}

/* Dropdown-Menue "Neue Anfrage" (und aehnliche dxmLite-Menues): untere Ecken rund,
   da oben buendig am Button ansetzt (border-top: none im Original) */
.dxmLite .dxm-popup {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
}

/* Auswahlfelder (Comboboxen, z.B. "Alle Anfragen"/"Erweitert"): abgerundete Ecken.
   Einzelzellen-Ansatz (border-radius auf td:first-child/last-child) war
   browserseitig unzuverlaessig bei border-collapse:collapse. Stattdessen
   Standard-Technik: separate + spacing:0 + overflow:hidden + radius auf
   der Tabelle selbst. */
.dxeButtonEdit {
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 6px;
  overflow: hidden;
}

/* Zellrahmen entfernen - im separate-Modus (fuer die Rundung noetig)
   verschmelzen Tabellen- und Zellrahmen nicht mehr automatisch wie im
   collapse-Modus, dadurch wirkte die Linie doppelt/dicker. */
.dxeButtonEdit td {
  border: none !important;
}

.dxpc-mainDiv.popupButtonPopup {
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--mainBorderColor);
  border-top: 4px solid var(--accentBorderColor);
  box-shadow: 0 4px 20px rgba(37, 44, 49, 0.14);
  background-color: var(--inversedBackgroundColor);
}

/* "Listen"-Label vor den Quick-Filter-Links ausblenden */
.txtLabelQuickFilter {
  display: none;
}

/* "Neue Anfrage": tatsaechliche Klasse ist dxbButton_dropDownSubNav
   (bestaetigt per Inspektor), nicht dxbButton_actionButton. */
.dxbButton_dropDownSubNav {
  border-radius: 6px;
  overflow: hidden;
}

/* Gruppierungsleiste ("Ziehen Sie Spaltenkoepfe...") - eigenstaendiges
   Element (dxgvGroupPanel), Weiss kam bisher von einem Vorfahren mit
   eckigen Ecken - daher eigene Hintergrundfarbe + Overflow-Clip noetig. */
.dxgvGroupPanel {
  background-color: var(--inversedBackgroundColor) !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  overflow: hidden !important;
}

.ListView {
  border: none;
  box-shadow: none;
}

.FALoadingPanel {
  background-color: var(--mainBackgroundColor) !important;
}

/* =========================================================================
   Interaktions-Feedback (Apple-Prinzip "Response", ACP-Charakter: gedämpft,
   kein Overshoot – kritisch gedämpfte Transitions, keine Bounce-Kurven)
   ========================================================================= */

.actionButton,
.dxbButton_mainNav,
.dxbButton_subNav,
.dxbButton_actionButton,
.mainNavigation input[type=submit] {
  transition: transform 100ms ease-out, box-shadow 150ms ease-out;
}

.actionButton:active,
.dxbButton_mainNav:active,
.dxbButton_subNav:active,
.dxbButton_actionButton:active,
.mainNavigation input[type=submit]:active {
  transform: scale(0.97);
}

/* Fokus-Glow statt Standard-Outline, ACP-ROT als sanfter Schimmer */
.dxeTextBox:focus-within,
.dxeMemo:focus-within,
.dxucControl:focus-within,
.dxeButtonEdit:focus-within,
a:focus-visible,
.actionButton:focus-visible,
input:focus-visible {
  box-shadow: 0 0 0 3px var(--accentGlow);
  outline: none;
  transition: box-shadow 150ms ease-out;
}

/* Reduced Motion: Transform/Transition deaktivieren, nur Opacity-Änderungen erlauben */
@media (prefers-reduced-motion: reduce) {
  .actionButton,
  .dxbButton_mainNav,
  .dxbButton_subNav,
  .dxbButton_actionButton,
  .mainNavigation input[type=submit],
  .dxeTextBox,
  .dxeMemo,
  .dxucControl,
  .dxeButtonEdit {
    transition: none !important;
    transform: none !important;
  }
}