/* ==================================================================
 * Chrome des Solution Builders:
 *   - linke Leiste            (XApplicationConfPanel)
 *   - Einstellungsleiste am Fuss jedes Fensters (a.windowSettingsButton)
 *
 * Redesign 2026, Variante 1b "helle Leiste, ein Solution-Menue" aus dem
 * Claude-Design-Canvas. Palette Xplain Data:
 *   teal-50  #f1fbfa   teal-100 #e4f6f5   teal-200 #c0eae7
 *   teal-300 #93dbd6   teal-500 #589999   teal-600 #4a8686
 *   teal-800 #315a5a
 *   slate-50 #f8f9fa   slate-100 #f2f4f6  slate-200 #e7eaed
 *   slate-300 #d2d7dc  slate-500 #97a2ad  slate-600 #7e8b99
 *   slate-800 #3c454f  slate-900 #2a3138
 *
 * Der Canvas nennt Poppins / Mulish. Beide Webfonts liegen nicht im
 * Projekt, deshalb hier - wie in appbuilder-dialogs.css und
 * pyeditor-dialog.css - der Inter/System-Stack.
 *
 * Gilt in beiden Modi: die Klasse .xsbMenu setzt
 * MainControllerAppBuilderMixin#applySolutionMenuChrome bei jedem Aufbau
 * der Leiste - beim Bauen einer Solution wie beim Arbeiten damit. Nur was
 * dem Builder gehoert (die Karte "Analyse hinzufuegen", die Fusszeile,
 * Zahnrad und Muelleimer der Karten), entsteht ueberhaupt nur dort.
 * Kein Dark-Theme.
 *
 * Die Datei wird VOR dem gebauten Theme-CSS geladen (index.html), deshalb
 * "body"-Praefix und !important, wo eine Theme- oder Main.scss-Regel
 * dagegen steht. Kein SASS-Build noetig.
 * ================================================================== */

/* ------------------------------------------------------------------
   Leiste selbst - hell statt #404040
   ------------------------------------------------------------------ */
body .XAppAnalysisSelectionPanel.xsbMenu {
    background-color: #f8f9fa !important;
    border-right: 1px solid #e7eaed !important;
    /* Der 1px-Rahmen oben ist unsichtbar und hat einen Zweck: ohne ihn
       kollabiert der margin-top der obersten Karte durch die Ext-Wrapper
       hinaus aus dem Panel, und der Abstand oben faellt weg. Ein Rahmen
       stoppt das Margin-Collapsing. Liegt auf dem Body ohnehin schon ein
       overflow (scrollable: 'y'), aendert der Rahmen nichts - der Abstand
       bleibt in beiden Faellen genau 5px, nie 10px. */
    border-top: 1px solid transparent !important;
}

/* die dunklen Flaechen aus Main.scss abschalten (Body + Card-Innereien) */
body .XAppAnalysisSelectionPanel.xsbMenu > div,
body div.XAppAnalysisSelectionPanel.xsbMenu > div > div > div {
    background-color: transparent !important;
}

/* ------------------------------------------------------------------
   Eine Analyse = eine Karte

   Ext haengt zwischen Karte und Inhalt mehrere Wrapper-DIVs (bodyWrap,
   body, outerCt, innerCt - je nach Version und Layout unterschiedlich
   viele und unterschiedlich tief verschachtelt). JEDES div innerhalb der
   Karte wird deshalb zu "display: contents" aufgeloest - Wrapper sind
   hier immer divs, der eigentliche Inhalt sind spans (Icon, Name) und
   die beiden Aktions-Buttons (a samt span-Innereien). Damit haengen die
   an der Karte selbst im Flex-Layout, egal wie Ext sie einpackt; die
   Reihenfolge macht dann "order".
   ------------------------------------------------------------------ */
body .xsbMenu .xsbCard.x-panel {
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    width: auto !important;
    height: auto !important;
    min-height: 52px;
    margin: 0 5px 6px 5px !important;
    padding: 10px 12px !important;
    border: 1px solid #e7eaed !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

body .xsbMenu .xsbCard div {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font: inherit !important;
    color: inherit !important;
}

/* Im Application-Modus ausgeblendete Analysen: Main.scss versteckt sie mit
   "div.hiddenInTaskbar.xanalysispanel { display: none }" - ohne !important,
   und damit unterliegt die Regel dem display:flex der Karte oben. Sonst
   stuende hier ein leeres weisses Kaestchen. */
body .xsbMenu .xsbCard.hiddenInTaskbar {
    display: none !important;
}

/* die oberste Karte braucht denselben Abstand nach oben */
body .xsbMenu .xsbCard.x-panel:first-child {
    margin-top: 5px !important;
}

/* der Panel-Header der Karte bleibt aus - "display: contents" wuerde
   seinen Titel sonst in die Flex-Zeile holen */
body .xsbMenu .xsbCard > .x-panel-header,
body .xsbMenu .xsbCard > .x-panel-header * {
    display: none !important;
}

body .xsbMenu .xsbCard:hover {
    border-color: #93dbd6 !important;
    background: #f1fbfa !important;
}

body .xsbMenu .xsbCard.selected,
body .xsbMenu .xsbCard.active-xanalysispanel {
    border-color: #589999 !important;
    background: #f1fbfa !important;
    box-shadow: inset 3px 0 0 0 #589999;
}

/* Icon-Kaestchen */
body .xsbMenu .xsbCard .xsbCardIcon {
    order: 1;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 11px;
    border-radius: 8px;
    background: #e4f6f5 !important;
}

body .xsbMenu .xsbCard .xsbCardIcon .fa {
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    color: #4a8686 !important;
}

body .xsbMenu .xsbCard.selected .xsbCardIcon,
body .xsbMenu .xsbCard.active-xanalysispanel .xsbCardIcon {
    background: #c0eae7 !important;
}

/* Name der Analyse */
body .xsbMenu .xsbCard .xsbCardName {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: left;
    color: #2a3138 !important;
    background: transparent !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .xsbMenu .xsbCard.selected .xsbCardName,
body .xsbMenu .xsbCard.active-xanalysispanel .xsbCardName {
    color: #315a5a !important;
}

/* im Builder ausgeblendete Analysen bleiben durchgestrichen sichtbar */
body .xsbMenu .xsbCard .xsbCardName.hiddenAnalysis {
    font-weight: 500;
    text-decoration: line-through;
    color: #97a2ad !important;
}

/* deaktivierte Analyse */
body .xsbMenu .xsbCard.disabledAnalysis {
    border-color: #e7eaed !important;
    background: #f2f4f6 !important;
}

body .xsbMenu .xsbCard.disabledAnalysis .xsbCardName {
    color: #97a2ad !important;
}

body .xsbMenu .xsbCard.disabledAnalysis .xsbCardIcon {
    background: #e7eaed !important;
}

body .xsbMenu .xsbCard.disabledAnalysis .xsbCardIcon .fa {
    color: #97a2ad !important;
}

/* Zahnrad + Muelleimer der Karte: erst beim Ueberfahren sichtbar. Ohne
   Hover haben sie Breite 0, damit der Analysename die ganze Karte nutzt. */
body .xsbMenu .xsbCard a.editableAppBtn {
    order: 3;
    flex: none;
    float: none !important;
    position: static !important;
    bottom: auto !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    background: transparent !important;
    opacity: 0;
    transition: opacity .15s ease, width .15s ease, margin-left .15s ease;
}

body .xsbMenu .xsbCard:hover a.editableAppBtn {
    width: 22px !important;
    margin-left: 4px !important;
    opacity: 1;
}

body .xsbMenu .xsbCard a.editableAppBtn .x-btn-icon-el,
body .xsbMenu .xsbCard a.editableAppBtn span {
    font-size: 14px !important;
    background: transparent !important;
    color: #97a2ad !important;
}

body .xsbMenu .xsbCard a.editableAppBtn:hover .x-btn-icon-el {
    color: #4a8686 !important;
}

/* ------------------------------------------------------------------
   "Analyse hinzufuegen" - gestrichelte Karte am Listenende
   ------------------------------------------------------------------ */
body .xsbMenu .xsbAddCard {
    margin: 8px 5px 6px 5px !important;
    border: 1px dashed #d2d7dc !important;
    background: transparent !important;
}

body .xsbMenu .xsbAddCard:hover {
    border-color: #589999 !important;
    background: #f1fbfa !important;
}

body .xsbMenu .xsbAddCard .xsbCardName {
    font-size: 13px;
    font-weight: 600;
    color: #4a8686 !important;
}

/* die alte "+"-Typografie aus Main.scss (xx-large, zentriert) abschalten */
body .xsbMenu .xsbAddCard div {
    font-size: inherit !important;
    font-weight: inherit !important;
    text-align: left !important;
}

/* ------------------------------------------------------------------
   Leere Solution
   ------------------------------------------------------------------ */
body .xsbMenu .xsbEmptyState {
    display: block;
    margin: 5px 5px 8px 5px;
    padding: 18px 16px;
    border: 1px dashed #d2d7dc;
    border-radius: 12px;
    background: #ffffff !important;
}

body .xsbMenu .xsbEmptyTitle {
    display: block;
    margin-bottom: 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #2a3138;
}

body .xsbMenu .xsbEmptyText {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: #7e8b99;
}

/* ------------------------------------------------------------------
   Fusszeile: Solution-Menue + Standardwerte
   ------------------------------------------------------------------ */
body .xsbMenu .xsbFooter {
    border-top: 1px solid #e7eaed !important;
    background: #f8f9fa !important;
}

body .xsbMenu .xsbFooter .x-btn.xsbSolutionBtn,
body .xsbMenu .xsbFooter .x-btn.xsbDefaultsBtn {
    border: 1px solid #d2d7dc !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    background-image: none !important;
}

body .xsbMenu .xsbFooter .x-btn.xsbSolutionBtn:hover {
    border-color: #589999 !important;
    background: #ffffff !important;
}

body .xsbMenu .xsbFooter .x-btn.xsbDefaultsBtn:hover {
    border-color: #589999 !important;
    background: #f1fbfa !important;
}

body .xsbMenu .xsbFooter .xsbSolutionBtn .x-btn-button {
    position: relative;
    padding: 0 22px 0 12px !important;
}

body .xsbMenu .xsbFooter .xsbSolutionBtn .x-btn-inner {
    padding-left: 10px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-align: left !important;
    color: #3c454f !important;
}

body .xsbMenu .xsbFooter .xsbSolutionBtn .x-btn-icon-el,
body .xsbMenu .xsbFooter .xsbDefaultsBtn .x-btn-icon-el {
    font-size: 17px !important;
    color: #4a8686 !important;
    background: transparent !important;
}

/* Chevron nach oben - das Menue klappt ueber der Fusszeile auf */
body .xsbMenu .xsbFooter .xsbSolutionBtn .x-btn-button:after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-left: 2px solid #97a2ad;
    border-top: 2px solid #97a2ad;
    transform: rotate(45deg);
}

/* ------------------------------------------------------------------
   Solution-Menue

   Bewusst ohne eigene Regeln: das aufklappende Menue soll aussehen wie
   jedes andere Menue der Anwendung (Theme-Standard, Main.scss fasst
   .x-menu nicht an). Nur die Aufklapprichtung kommt aus der View
   (menuAlign 'bl-tl?' in MainControllerAppBuilderMixin), damit es ueber
   der Fusszeile und nicht unter dem Bildschirmrand liegt.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Einstellungsleiste am Fuss eines Fensters

   Existiert nur im Solution Builder - MainControllerWindowMixin legt den
   Button ausschliesslich bei appBuilderModeActive an, ein Scoping ueber
   .xsbMenu ist deshalb nicht noetig.

   Main.scss macht daraus einen dunkelgrauen Balken (#404040, opacity .7);
   hier bekommt er die Teal-Palette der linken Leiste. Position und
   Hoehe bleiben wie sie waren, geaendert werden nur Farben, Rahmen und
   Rundung - die Regeln aus Main.scss stehen mit !important dagegen.
   ------------------------------------------------------------------ */
body a.windowSettingsButton {
    height: 32px !important;
    border: 1px solid #589999 !important;
    border-radius: 8px !important;
    background: #f1fbfa !important;
    background-image: none !important;
    opacity: 1;
    transition: background .15s ease, border-color .15s ease;
}

body a.windowSettingsButton:hover {
    border-color: #4a8686 !important;
    background: #e4f6f5 !important;
}

body a.windowSettingsButton span,
body a.windowSettingsButton .x-btn-icon-el {
    background: transparent !important;
    color: #4a8686 !important;
}

body a.windowSettingsButton:hover span,
body a.windowSettingsButton:hover .x-btn-icon-el {
    color: #315a5a !important;
}