/*
 * Dialog "Causal Discovery Szenario" (predModel/configOld.js):
 * Aufklapper "Details einblenden / ausblenden" statt des früheren
 * horizontalen Strichs mit Doppelpfeil. Look wie der Aufklapper in den
 * Fehlermeldungen (message-dialogs.css, button.emToggle): reine Text-Taste,
 * Chevron dreht sich beim Aufklappen um 90°.
 *
 * Eigenes Stylesheet, weil Main.scss erst nach einem Sencha-Build wirkt.
 * No SASS / theme rebuild required.
 */

/* Die Theme-Regeln für Hover/Fokus der Ext-Buttons sind sehr spezifisch
   (z.B. ".x-keyboard-mode .x-btn-focus.x-btn-default-small:not(...):hover",
   5 Klassen, !important) — daher hier die Klasse mehrfach */
body .cdConfig a.x-btn.pmDetailsToggle,
body .cdConfig a.x-btn.pmDetailsToggle.pmDetailsToggle.pmDetailsToggle.pmDetailsToggle.pmDetailsToggle:hover {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 2px;
}

body .cdConfig a.x-btn.pmDetailsToggle .x-btn-inner,
body .cdConfig a.x-btn.pmDetailsToggle .x-btn-icon-el {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #417dbf !important;
}

body .cdConfig a.x-btn.pmDetailsToggle .x-btn-icon-el {
    font-size: 11px;
    width: 12px;
    transition: transform .18s ease;
}

body .cdConfig a.x-btn.pmDetailsToggle.pmDetailsOpen .x-btn-icon-el {
    transform: rotate(90deg);
}

body .cdConfig a.x-btn.pmDetailsToggle:hover .x-btn-inner,
body .cdConfig a.x-btn.pmDetailsToggle:hover .x-btn-icon-el {
    color: #2f5f94 !important;
}

body .cdConfig a.x-btn.pmDetailsToggle.x-btn-focus,
body .cdConfig a.x-btn.pmDetailsToggle:focus {
    outline: none;
}

body .cdConfig a.x-btn.pmDetailsToggle.x-keyboard-focused,
body.x-keyboard-mode .cdConfig a.x-btn.pmDetailsToggle:focus-visible {
    outline: 3px solid rgba(65, 125, 191, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Dark Theme */
body.oe-theme-dark .cdConfig a.x-btn.pmDetailsToggle .x-btn-inner,
body.oe-theme-dark .cdConfig a.x-btn.pmDetailsToggle .x-btn-icon-el {
    color: var(--oe-accent) !important;
}