/* ==================================================================
 * Meldungs- und Teilen-Dialoge:
 *   - Fehlermeldung   (xplain.ux.widget.ErrorMessage)        -> .xerrormessage
 *   - Analyse teilen  (ExpertUI.view.main.XShareAnalysis)    -> .xshareanalysis
 *
 * Redesign 2026 in den Farben des hellen Designs aus Main.scss:
 *   $xdSurface  #ffffff   $xdSurface2 #f8f9fc   $xdBorder  #e7e9f2
 *   $xdText     #171a26   $xdText2    #5b6172   $xdMuted   #9298ab
 *   $xdAccent   #417dbf   $xdAccentSoft #eef0fe  $xdRed     #e3405c
 *
 * Beide Fenster teilen sich die Klasse .xdDialog - daher stehen Rahmen,
 * Kopfbereich, Felder und Fusszeile hier nur einmal; darunter folgt je
 * ein Abschnitt mit dem, was nur den einen bzw. den anderen Dialog
 * betrifft.
 *
 * .xdDialog ist die gemeinsame Grundoptik und wird auch ausserhalb
 * dieser Datei verwendet - z.B. von den Dashboard-Einstellungen
 * (resources/dashboard-settings.css). Aenderungen hier wirken dort mit.
 *
 * Die Datei wird VOR dem gebauten Theme-CSS geladen (index.html /
 * application.html), deshalb "body"-Praefix und !important, wo eine
 * Theme-Regel dagegen steht. Kein SASS-Build noetig.
 *
 * Dunkles Design am Ende der Datei (Palette: resources/dark-theme.css).
 * ================================================================== */

/* ------------------------------------------------------------------
   Fenster + Kopfbereich (beide Dialoge)
   ------------------------------------------------------------------ */
body .xdDialog.x-window {
    border: 1px solid #e7e9f2 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(23, 26, 38, 0.06), 0 18px 44px -8px rgba(23, 26, 38, 0.18) !important;
}

body .xdDialog .x-window-header {
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid #e7e9f2 !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 15px 22px !important;
}

body .xdDialog .x-window-header .x-title-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #171a26;
    padding: 0 !important;
}

/* Schliessen-Tool: dezentes Kreuz oben rechts */
body .xdDialog .x-window-header .x-tool {
    background: transparent !important;
    border-radius: 8px;
    padding: 2px;
}

body .xdDialog .x-window-header .x-tool:hover {
    background: #f8f9fc !important;
}

body .xdDialog .x-window-header .x-tool .x-tool-tool-el,
body .xdDialog .x-window-header .x-tool .x-tool-close,
body .xdDialog .x-window-header .x-tool-img {
    color: #9298ab !important;
}

body .xdDialog .x-window-header .x-tool:hover .x-tool-tool-el,
body .xdDialog .x-window-header .x-tool:hover .x-tool-close {
    color: #5b6172 !important;
}

body .xdDialog .x-window-body {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 0 14px 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------
   Erklaertext unter dem Titel
   ------------------------------------------------------------------ */
body .xdDialog .xdIntro,
body .xdDialog .xdIntro .x-panel-body {
    background: transparent !important;
    border: 0 !important;
    font-size: 12.5px;
    line-height: 1.55;
    color: #5b6172;
}

/* ------------------------------------------------------------------
   Eingabefelder

   Rahmen und Radius sitzen auf dem Wrapper - er umschliesst Eingabefeld
   *und* (falls vorhanden) Auswahlpfeil, sonst stuende der Pfeil als
   eigener Kasten daneben.
   ------------------------------------------------------------------ */
body .xdDialog .xdField .x-form-item-label {
    font-size: 12.5px;
    font-weight: 500;
    color: #5b6172;
    padding-bottom: 6px;
}

body .xdDialog .xdField .x-form-text-wrap,
body .xdDialog .xdField .x-form-trigger-wrap {
    border: 1px solid #e7e9f2 !important;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

body .xdDialog .xdField .x-form-text-wrap.x-form-text-wrap-focus,
body .xdDialog .xdField .x-form-trigger-wrap.x-form-trigger-wrap-focus {
    border-color: #5b9cf6 !important;
    box-shadow: 0 0 0 3px rgba(91, 156, 246, 0.25);
}

body .xdDialog .xdField input.x-form-text {
    height: 38px;
    padding: 0 12px;
    border: 0 !important;
    background: transparent;
    background-image: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #171a26;
}

/* ------------------------------------------------------------------
   Fusszeile (beide Dialoge)
   ------------------------------------------------------------------ */
body .xdDialog .x-toolbar-footer {
    background: transparent !important;
    border-top: 1px solid #e7e9f2 !important;
    border-radius: 0 0 14px 14px;
    padding: 14px 22px !important;
}

body .xdDialog .x-toolbar-footer a.xdBtn {
    background-image: none !important;
    border-radius: 999px !important;
    padding: 8px 22px !important;
    margin-left: 10px;
    box-shadow: none !important;
    transition: background-color 150ms ease, border-color 150ms ease;
}

body .xdDialog .x-toolbar-footer a.xdBtn .x-btn-inner {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
}

body .xdDialog .x-toolbar-footer a.xdBtnGhost {
    background: #ffffff !important;
    border: 1px solid #417dbf !important;
}

body .xdDialog .x-toolbar-footer a.xdBtnGhost .x-btn-inner,
body .xdDialog .x-toolbar-footer a.xdBtnGhost .x-btn-icon-el {
    color: #417dbf !important;
}

body .xdDialog .x-toolbar-footer a.xdBtnGhost.x-btn-over {
    background: #eef0fe !important;
}

body .xdDialog .x-toolbar-footer a.xdBtnPrimary {
    background: #417dbf !important;
    border: 1px solid #417dbf !important;
}

body .xdDialog .x-toolbar-footer a.xdBtnPrimary .x-btn-inner,
body .xdDialog .x-toolbar-footer a.xdBtnPrimary .x-btn-icon-el {
    color: #ffffff !important;
}

body .xdDialog .x-toolbar-footer a.xdBtnPrimary.x-btn-over {
    background: #396ea9 !important;
    border-color: #396ea9 !important;
}

/* ==================================================================
   Nur "Analyse teilen" / "Solution teilen"
   ================================================================== */
/* Der Link steht schreibgeschuetzt in einem Feld mit fester Schrift -
   so bleiben Bindestriche und IDs im Link unterscheidbar. Das Theme
   graut schreibgeschuetzte Felder aus (.x-form-readonly), hier soll das
   Feld normal aussehen: es ist der Inhalt des Dialogs. */
body .xshareanalysis .shLinkField input.x-form-text {
    font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 12px;
    color: #171a26 !important;
    background: #f8f9fc !important;
    background-image: none !important;
    opacity: 1;
    cursor: text;
}

/* ==================================================================
   Nur Fehlermeldung
   ================================================================== */
/* Main.scss faerbt jeden Panel-Koerper des Fensters weiss
   ("div.xerrormessage .x-panel-body") - im dunklen Design waeren das
   weisse Kaesten, deshalb hier durchsichtig */
body .xerrormessage .emMsgPanel,
body .xerrormessage .emMsgPanel .x-panel-body {
    background: transparent !important;
    border: 0 !important;
}

/* Kopfzeile der Meldung: rundes Symbolfeld links, Meldungstext rechts */
body .xerrormessage .emIcon {
    background: #fde8ee;
    border-radius: 50%;
    text-align: center;
}

/* Die Farbe muss auf das :before - das Icon-Paket setzt sie dort mit
   !important ("body .x-fa:before { color: ... !important }"), eine Farbe
   auf dem Span selbst bliebe wirkungslos */
body .xerrormessage .emIcon .emIconGlyph {
    display: block;
    font-size: 26px;
    line-height: 56px;
}

body .xerrormessage .emIcon .emIconGlyph.fa-times-circle:before {
    color: #e3405c !important;
}

body .xerrormessage .emIcon .emIconGlyph.fa-exclamation-circle:before {
    color: #417dbf !important;
}

body .xerrormessage .emMessage,
body .xerrormessage .emMessage .x-panel-body {
    background: transparent !important;
    border: 0 !important;
    font-size: 13.5px;
    line-height: 1.55;
    color: #171a26;
}

/* Aufklapper "Details": feine Linie mit Doppel-Pfeil rechts - dieselbe
   Gestalt wie im Dimensions- und im Kausal-Dialog (Main.scss,
   .dimConfigWindow / .cdConfig). Der Hintergrund muss in *allen*
   Zustaenden weiss bleiben, sonst faerbt ihn das Theme bei Hover und
   Fokus grau. */
body .xerrormessage a.emDetailsToggle,
body .xerrormessage a.emDetailsToggle.x-btn-over,
body .xerrormessage a.emDetailsToggle.x-focus,
body .xerrormessage a.emDetailsToggle.x-btn-over.x-focus,
body .xerrormessage a.emDetailsToggle:hover,
body .xerrormessage a.emDetailsToggle:focus,
body .xerrormessage a.emDetailsToggle:active {
    background: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    /* die Linie liegt absolut - der Bezugspunkt soll die Taste sein */
    position: relative;
}

body .xerrormessage .emDetailsToggle .reltimeHLine {
    border-top: 1px solid #e7e9f2;
}

body .xerrormessage .emDetailsToggle .reltimeHLineBtn {
    color: #9298ab !important;
    font-size: 16px !important;
}

body .xerrormessage a.emDetailsToggle:hover .reltimeHLineBtn {
    color: #417dbf !important;
}

/* Version und Stacktrace: der technische Teil, bewusst zurueckgenommen */
body .xerrormessage .emStack textarea.x-form-text {
    border: 1px solid #e7e9f2 !important;
    border-radius: 10px;
    padding: 10px 12px;
    background: #f8f9fc !important;
    background-image: none !important;
    font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: #5b6172;
    resize: none;
}

/* ==================================================================
   Dunkles Design (Palette: resources/dark-theme.css)
   ================================================================== */
body.oe-theme-dark .xdDialog.x-window {
    background: #15181e !important;
    border-color: #2a2f3a !important;
}

body.oe-theme-dark .xdDialog .x-window-header,
body.oe-theme-dark .xdDialog .x-window-body {
    background: #15181e !important;
}

body.oe-theme-dark .xdDialog .x-window-header {
    border-bottom-color: #2a2f3a !important;
}

body.oe-theme-dark .xdDialog .x-window-header .x-title-text {
    color: #e6e8eb;
}

body.oe-theme-dark .xdDialog .x-window-header .x-tool:hover {
    background: #1c2333 !important;
}

body.oe-theme-dark .xdDialog .xdIntro,
body.oe-theme-dark .xdDialog .xdIntro .x-panel-body,
body.oe-theme-dark .xdDialog .xdField .x-form-item-label {
    color: #9aa3b2;
}

body.oe-theme-dark .xdDialog .xdField .x-form-text-wrap,
body.oe-theme-dark .xdDialog .xdField .x-form-trigger-wrap {
    background: #1c2333;
    border-color: #35426b !important;
}

body.oe-theme-dark .xdDialog .xdField input.x-form-text {
    color: #e6e8eb;
}

body.oe-theme-dark .xdDialog .x-toolbar-footer {
    border-top-color: #2a2f3a !important;
}

/* Die Tasten brauchen hier beide Klassen (.xdBtn.xdBtnGhost statt nur
   .xdBtnGhost): dark-theme.css faerbt jede Taste ueber eine Regel mit
   drei :not()-Ausnahmen durchsichtig, und die zaehlt fuenf Klassen. Mit
   nur einer Tastenklasse kaeme diese Datei auf vier und verlöre. */
body.oe-theme-dark .xdDialog .x-toolbar-footer a.xdBtn.xdBtnGhost {
    background: #1c2333 !important;
    border-color: #5b8cff !important;
}

body.oe-theme-dark .xdDialog .x-toolbar-footer a.xdBtn.xdBtnGhost .x-btn-inner,
body.oe-theme-dark .xdDialog .x-toolbar-footer a.xdBtn.xdBtnGhost .x-btn-icon-el {
    color: #5b8cff !important;
}

body.oe-theme-dark .xdDialog .x-toolbar-footer a.xdBtn.xdBtnGhost.x-btn-over {
    background: #2a3550 !important;
}

body.oe-theme-dark .xdDialog .x-toolbar-footer a.xdBtn.xdBtnPrimary,
body.oe-theme-dark .xdDialog .x-toolbar-footer a.xdBtn.xdBtnPrimary.x-btn-over {
    background: #5b8cff !important;
    border-color: #5b8cff !important;
}

body.oe-theme-dark .xdDialog .x-toolbar-footer a.xdBtn.xdBtnPrimary .x-btn-inner,
body.oe-theme-dark .xdDialog .x-toolbar-footer a.xdBtn.xdBtnPrimary .x-btn-icon-el {
    color: #ffffff !important;
}

body.oe-theme-dark .xshareanalysis .shLinkField input.x-form-text {
    background: #1c2333 !important;
    color: #e6e8eb !important;
}

body.oe-theme-dark .xerrormessage .emIcon {
    background: #3a1c25;
}

body.oe-theme-dark .xerrormessage .emMessage,
body.oe-theme-dark .xerrormessage .emMessage .x-panel-body {
    color: #e6e8eb;
}

body.oe-theme-dark .xerrormessage a.emDetailsToggle,
body.oe-theme-dark .xerrormessage a.emDetailsToggle.x-btn-over,
body.oe-theme-dark .xerrormessage a.emDetailsToggle.x-focus,
body.oe-theme-dark .xerrormessage a.emDetailsToggle.x-btn-over.x-focus,
body.oe-theme-dark .xerrormessage a.emDetailsToggle:hover,
body.oe-theme-dark .xerrormessage a.emDetailsToggle:focus,
body.oe-theme-dark .xerrormessage a.emDetailsToggle:active {
    background: #15181e !important;
}

body.oe-theme-dark .xerrormessage .emDetailsToggle .reltimeHLine {
    border-top-color: #2a2f3a;
}

body.oe-theme-dark .xerrormessage .emStack textarea.x-form-text {
    background: #1c2333 !important;
    border-color: #2a2f3a !important;
    color: #9aa3b2;
}