/* ==================================================================
 * 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 (Variante 1a: beschrifteter Aufklapper)
   ================================================================== */
/* 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: 22px;
    line-height: 44px;
}

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

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

/* Lange Attributnamen haben keine Leerzeichen - daher anywhere */
body .xerrormessage .emMessage {
    font-size: 14px;
    line-height: 1.5;
    color: #171a26;
    overflow-wrap: anywhere;
}

/* Aufklapper "Details anzeigen" und Link "Kopieren": reine Text-Tasten */
body .xerrormessage button.emToggle,
body .xerrormessage button.emCopy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 4px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #417dbf;
    cursor: pointer;
}

body .xerrormessage button.emToggle { font-size: 13px; }
body .xerrormessage button.emCopy   { font-size: 12.5px; }

body .xerrormessage button.emToggle:hover,
body .xerrormessage button.emCopy:hover {
    color: #2f5f94;
}

body .xerrormessage button.emToggle:focus-visible,
body .xerrormessage button.emCopy:focus-visible {
    outline: 3px solid rgba(65, 125, 191, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
}

body .xerrormessage .emToggleIcon:before,
body .xerrormessage .emCopyIcon:before {
    color: inherit !important;
}

body .xerrormessage .emToggleIcon {
    font-size: 11px;
    width: 12px;
    text-align: center;
    transition: transform .18s ease;
}

body .xerrormessage .emCopyIcon {
    font-size: 12px;
}

body .xerrormessage button.emToggle[aria-expanded="true"] .emToggleIcon {
    transform: rotate(90deg);
}

/* Versionszeile: "Version develop ..." links, "Kopieren" rechts */
body .xerrormessage .emMeta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: #9298ab;
}

body .xerrormessage .emMeta strong {
    font-weight: 600;
    color: #5b6172;
}

/* Stacktrace: dunkler Code-Block, kein Zeilenumbruch, scrollt selbst */
body .xerrormessage pre.emStack {
    margin: 0;
    background: #2a3138;
    color: #d5dde5;
    border-radius: 10px;
    padding: 12px 14px;
    /* das Theme setzt die Schrift jeder Komponente mit !important */
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre;
    box-sizing: border-box;
}

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

body.oe-theme-dark .xdDialog .x-window-header,
body.oe-theme-dark .xdDialog .x-window-body {
    background: #1e2129 !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: #33405c !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 {
    color: #e6e8eb;
}

body.oe-theme-dark .xerrormessage button.emToggle,
body.oe-theme-dark .xerrormessage button.emCopy {
    color: #5b8cff;
}

body.oe-theme-dark .xerrormessage button.emToggle:hover,
body.oe-theme-dark .xerrormessage button.emCopy:hover {
    color: #8aaeff;
}

body.oe-theme-dark .xerrormessage .emMeta {
    color: #7d8698;
}

body.oe-theme-dark .xerrormessage .emMeta strong {
    color: #c3c9d4;
}

body.oe-theme-dark .xerrormessage pre.emStack {
    background: #12151c;
    border: 1px solid #2a2f3a;
    color: #c3c9d4;
}