/* ============================================================================
   Der "Connections"-Dialog (Admin.view.main.Connections) und sein Unterdialog
   "More Parameters" (Admin.view.main.ConnectionParams) — beide Fenster tragen
   cls 'genWindow', alle Buttons cls 'genWindowButton'.

   Aufbau der Datei: erst das Fenster als Karte (Kopf, Koerper, Liste links,
   Eingabefelder rechts), dann die Buttons, dann das Dark Theme.

   Designsprache identisch zu resources/tablewindow-redesign.css /
   objectsettings-redesign.css: weisse Karte, Teal-Akzent-Ramp, Mulish fuer
   Beschriftungen. Es werden bewusst nur Farben, Rahmen, Radien und Typografie
   gesetzt — Box-Modell (Hoehe/Breite/vertikales Padding) bleibt beim Theme,
   damit die Icon-Buttons (30x30) weiterhin exakt zentriert bleiben.

   Zwei Button-Typen:
     * Icon-Buttons (Neu / Loeschen / Bearbeiten / Kopieren unter der
       Connection-Liste): .genWindowButton ohne .connectionBtn
     * Aktions-Buttons (Save / Cancel / More Parameters / Test Connection bzw.
       Okay / Cancel): .connectionBtn, davon .connectionBtnPrimary = Primaer-
       Aktion (Save / Okay) in gefuelltem Teal.
   ============================================================================ */

body.xadmintool .x-window.genWindow {
    /* ---- Design-Tokens (identisch zu tablewindow-redesign.css) ---- */
    --cn-white: #FFFFFF;
    --cn-slate-50: #F8F9FA;
    --cn-slate-100: #F2F4F6;
    --cn-slate-200: #E7EAED;
    --cn-slate-300: #D2D7DC;
    --cn-slate-400: #B4BCC4;
    --cn-slate-500: #97A2AD;
    --cn-slate-600: #7E8B99;
    --cn-slate-700: #55606C;
    --cn-slate-800: #3C454F;

    --cn-accent-50: #F1FBFA;
    --cn-accent-400: #68CCC6;
    --cn-accent-500: #589999;
    --cn-accent-600: #4A8686;
    --cn-accent-700: #3F7373;
    --cn-focus-ring: rgba(88, 153, 153, .55);

    --cn-accent-100: #E4F6F5;
    --cn-accent-200: #C0EAE7;

    --cn-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cn-font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ---- die Karte selbst ---- */
    font-family: var(--cn-font-body);
    background: var(--cn-white);
    border: 1px solid var(--cn-slate-200) !important;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(42, 49, 56, .22);
    overflow: hidden;
}

/* Kopf und Koerper sind ein Blatt, nicht zwei uebereinanderliegende Karten */
body.xadmintool .x-window.genWindow .x-window-body {
    background: var(--cn-white);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

body.xadmintool .x-window.genWindow .x-window-header {
    background: var(--cn-white) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cn-slate-200) !important;
    border-radius: 14px 14px 0 0;
    padding: 12px 16px;
    margin: 0 !important;
    box-shadow: none !important;
}
body.xadmintool .x-window.genWindow .x-window-header .x-title-text {
    font-family: var(--cn-font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--cn-slate-800);
}

/* Die Panels im Koerper tragen im alten Theme eigene Flaechen und Rahmen -
   sie sollen nur Gruppen bilden, nicht als Kaesten erscheinen */
body.xadmintool .x-window.genWindow .x-window-body .x-panel-body,
body.xadmintool .x-window.genWindow .x-window-body .x-panel {
    background: transparent;
}

/* ----------------------------------------------------------------------------
   Liste links: die Verbindungen (Connections) bzw. die Parameter
   (ConnectionParams). Beide sind ein Grid mit einer einzigen Spalte.
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.genWindow .x-grid {
    background: var(--cn-white);
    border: 1px solid var(--cn-slate-200) !important;
    border-radius: 10px;
}
body.xadmintool .x-window.genWindow .x-grid .x-grid-header-ct {
    background: var(--cn-slate-50) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cn-slate-200) !important;
    border-radius: 10px 10px 0 0;
}
body.xadmintool .x-window.genWindow .x-grid .x-column-header {
    background: transparent;
    border: 0 !important;
}
body.xadmintool .x-window.genWindow .x-grid .x-column-header-text {
    font-family: var(--cn-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cn-slate-500);
}

body.xadmintool .x-window.genWindow .x-grid .x-grid-item,
body.xadmintool .x-window.genWindow .x-grid .x-grid-item-alt {
    background: transparent;
}
body.xadmintool .x-window.genWindow .x-grid .x-grid-cell {
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid var(--cn-slate-100) !important;
}
body.xadmintool .x-window.genWindow .x-grid .x-grid-cell-inner {
    font-family: var(--cn-font-body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cn-slate-700);
    padding: 8px 10px;
    text-overflow: ellipsis;
}
body.xadmintool .x-window.genWindow .x-grid .x-grid-item-over .x-grid-cell {
    background-color: var(--cn-accent-50) !important;
}
/* Die ausgewaehlte Zeile ist die, deren Daten rechts im Formular stehen -
   sie traegt denselben Teal-Ton wie die Primaeraktion, nur als Flaeche */
body.xadmintool .x-window.genWindow .x-grid .x-grid-item-selected .x-grid-cell {
    background-color: var(--cn-accent-100) !important;
}
body.xadmintool .x-window.genWindow .x-grid .x-grid-item-selected .x-grid-cell-inner {
    font-weight: 700;
    color: var(--cn-accent-700);
}

/* ----------------------------------------------------------------------------
   Eingabefelder und Auswahllisten
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.genWindow .x-form-item-label-inner {
    font-family: var(--cn-font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--cn-slate-600);
}

/* Der Rahmen gehoert dem Wrap, nicht dem Feld.
   Ext legt jedes Textfeld - auch eines ohne Auswahlliste - in einen
   .x-form-trigger-wrap, und dort zeichnet das Theme den Rahmen. Bekommt das Feld
   darin einen zweiten, liegen zwei gerundete Kaesten ineinander, und der
   .x-form-text-wrap dazwischen (display:table-cell, overflow:hidden) schneidet die
   Ecken des inneren quer ab - das waren die abgeschnittenen Ecken. Also nur ein
   Rahmen, aussen, und das Feld selbst bleibt rahmenlos und durchsichtig. */
body.xadmintool .x-window.genWindow .x-form-trigger-wrap {
    box-sizing: border-box;
    background: var(--cn-white);
    border: 1px solid var(--cn-slate-300) !important;
    border-radius: 8px;
    /* der Fokus-Ring liegt ausserhalb des Rahmens und darf nicht geschnitten werden */
    overflow: visible;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.xadmintool .x-window.genWindow .x-form-trigger-wrap:focus-within {
    border-color: var(--cn-accent-500) !important;
    box-shadow: 0 0 0 3px var(--cn-focus-ring);
}
body.xadmintool .x-window.genWindow .x-form-trigger-wrap-invalid {
    border-color: #C0392B !important;
}

body.xadmintool .x-window.genWindow .x-form-text-wrap {
    overflow: visible;
}

body.xadmintool .x-window.genWindow .x-form-text {
    font-family: var(--cn-font-body);
    font-size: 12.5px;
    color: var(--cn-slate-800);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.xadmintool .x-window.genWindow .x-form-empty-field {
    color: var(--cn-slate-400);
    font-weight: 400;
}

/* der Pfeil der Auswahllisten */
body.xadmintool .x-window.genWindow .x-form-trigger {
    background-color: transparent;
    border: 0;
    color: var(--cn-slate-500);
}

/* ----------------------------------------------------------------------------
   Die Leiste am unteren Rand (bbar). Sie traegt im alten Theme eine graue
   Verlaufsgrafik als Hintergrund (.x-toolbar-default, background-image
   !important) - das war der graue Balken hinter den Aktions-Buttons.
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.genWindow .x-toolbar,
body.xadmintool .x-window.genWindow .x-toolbar-footer {
    background-color: var(--cn-white) !important;
    background-image: none !important;
    border: 0 !important;
}

/* Sperrt das Fenster die Buttons, legt das Theme eine Flaeche darueber - sie
   bleibt durchsichtig, die Buttons zeigen ihren eigenen Disabled-Zustand */
body.xadmintool .x-window.genWindow .connectionBtnPanel .x-mask {
    background: transparent !important;
    background-image: none !important;
}

/* Die Auswahlliste selbst, die unter dem Feld aufgeht. Sie wird nicht im Fenster
   gerendert, sondern im Dokument - deshalb traegt sie eine eigene Klasse
   (listConfig in Admin.view.main.Connections) und nicht den Fensterselektor,
   der hier nicht greifen wuerde. Ohne sie faerbte die Regel jede Auswahlliste
   des ganzen Tools. */
body.xadmintool .x-boundlist.cnBoundList {
    border: 1px solid var(--cn-slate-200);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(42, 49, 56, .18);
    padding: 4px;
}
body.xadmintool .x-boundlist.cnBoundList .x-boundlist-item {
    font-family: var(--cn-font-body);
    font-size: 12.5px;
    color: var(--cn-slate-700);
    border-radius: 7px;
    border: 0;
}
body.xadmintool .x-boundlist.cnBoundList .x-boundlist-item-over {
    background: var(--cn-accent-50);
    color: var(--cn-accent-700);
}
body.xadmintool .x-boundlist.cnBoundList .x-boundlist-selected {
    background: var(--cn-accent-100);
    color: var(--cn-accent-700);
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Gemeinsame Basis aller Buttons des Dialogs
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton {
    background: var(--cn-white) !important;
    background-image: none !important;
    border: 1px solid var(--cn-slate-300) !important;
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton .x-btn-inner {
    font-family: var(--cn-font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-slate-700) !important;
    transition: color .15s ease;
}
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton .x-btn-icon-el {
    font-size: 14px;
    color: var(--cn-slate-600) !important;
    transition: color .15s ease;
}

/* Hover / Fokus — nur im aktiven Zustand */
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton:not(.x-btn-disabled):hover,
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton:not(.x-btn-disabled).x-btn-over {
    background: var(--cn-accent-50) !important;
    border-color: var(--cn-accent-400) !important;
}
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton:not(.x-btn-disabled):hover .x-btn-inner,
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton:not(.x-btn-disabled):hover .x-btn-icon-el,
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton:not(.x-btn-disabled).x-btn-over .x-btn-inner,
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton:not(.x-btn-disabled).x-btn-over .x-btn-icon-el {
    color: var(--cn-accent-700) !important;
}
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton:not(.x-btn-disabled).x-btn-focus {
    box-shadow: 0 0 0 3px var(--cn-focus-ring);
}
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton:not(.x-btn-disabled):active,
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton:not(.x-btn-disabled).x-btn-pressed {
    background: var(--cn-accent-50) !important;
    border-color: var(--cn-accent-500) !important;
}

/* ----------------------------------------------------------------------------
   Icon-Buttons unter der Connection-Liste (+ / - / Stift / Kopie)
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton:not(.connectionBtn) .x-btn-icon-el {
    font-size: 15px;
}

/* ----------------------------------------------------------------------------
   Aktions-Buttons (Save / Cancel / More Parameters / Test Connection)
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.genWindow a.x-btn.connectionBtn {
    padding-left: 16px;
    padding-right: 16px;
}

/* Primaeraktion (Save / Okay): gefuelltes Teal wie a.tableTypeButton */
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary {
    background: var(--cn-accent-500) !important;
    border-color: var(--cn-accent-500) !important;
}
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary .x-btn-inner,
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary .x-btn-icon-el {
    color: var(--cn-white) !important;
}
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary:not(.x-btn-disabled):hover,
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary:not(.x-btn-disabled).x-btn-over,
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary:not(.x-btn-disabled):active,
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary:not(.x-btn-disabled).x-btn-pressed {
    background: var(--cn-accent-600) !important;
    border-color: var(--cn-accent-600) !important;
}
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary:not(.x-btn-disabled):hover .x-btn-inner,
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary:not(.x-btn-disabled):hover .x-btn-icon-el,
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary:not(.x-btn-disabled).x-btn-over .x-btn-inner,
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary:not(.x-btn-disabled).x-btn-over .x-btn-icon-el {
    color: var(--cn-white) !important;
}

/* ----------------------------------------------------------------------------
   Disabled — im Screenshot waren Save / Cancel / More Parameters / Test
   Connection nur noch graue Bloecke: das alte Theme faerbt Buttons im
   Disabled-Zustand pflaumenfarben (#7f527d, opacity .5) und legt zusaetzlich
   ein deckendes .x-btn-tooltip-Overlay (#eee) darueber, das Text und Icon
   vollstaendig verdeckt. Beides wird hier ersetzt: ruhiges Grau, Label bleibt
   lesbar, Overlay transparent (bleibt fuer den Tooltip aber vorhanden).
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton.x-btn-disabled {
    background: var(--cn-slate-50) !important;
    background-image: none !important;
    border-color: var(--cn-slate-200) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: default;
}
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton.x-btn-disabled .x-btn-inner,
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton.x-btn-disabled .x-btn-icon-el {
    color: var(--cn-slate-400) !important;
}
body.xadmintool .x-window.genWindow a.x-btn.genWindowButton.x-btn-disabled .x-btn-tooltip {
    background: transparent !important;
}
/* Disabled bleibt auch bei der Primaeraktion neutral grau — ein blasses Teal
   wuerde wie ein aktiver Button wirken */
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary.x-btn-disabled {
    background: var(--cn-slate-100) !important;
    border-color: var(--cn-slate-200) !important;
}
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary.x-btn-disabled .x-btn-inner,
body.xadmintool .x-window.genWindow a.x-btn.connectionBtnPrimary.x-btn-disabled .x-btn-icon-el {
    color: var(--cn-slate-500) !important;
}

/* ----------------------------------------------------------------------------
   Dark Theme (body.oe-theme-dark, siehe resources/dark-theme.css)
   ---------------------------------------------------------------------------- */
body.oe-theme-dark.xadmintool .x-window.genWindow,
body.oe-theme-dark .x-window.genWindow {
    --cn-white: #15181e;
    --cn-slate-50: #1c2029;
    --cn-slate-100: #1f2937;
    --cn-slate-200: #262a33;
    --cn-slate-300: #2f3542;
    --cn-slate-400: #6b7280;
    --cn-slate-500: #93a4bd;
    --cn-slate-600: #d7dae0;
    --cn-slate-700: #e6e8eb;
    --cn-slate-800: #f2f3f5;

    --cn-accent-50: #1b2630;
    --cn-accent-100: #23324a;
    --cn-accent-200: #2c3f5c;
    --cn-accent-400: #5b8cff;
    --cn-accent-500: #5b8cff;
    --cn-accent-600: #4a76d8;
    --cn-accent-700: #8fb3ff;
    --cn-focus-ring: rgba(91, 140, 255, .45);

    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
body.oe-theme-dark .x-window.genWindow a.x-btn.connectionBtnPrimary .x-btn-inner,
body.oe-theme-dark .x-window.genWindow a.x-btn.connectionBtnPrimary .x-btn-icon-el {
    color: #0f1115 !important;
}

/* Die Auswahlliste haengt im Dokument und nicht im Fenster - sie erbt die
   Variablen von dort nicht und bekommt ihre Farben hier direkt */
body.oe-theme-dark .x-boundlist.cnBoundList {
    background: #15181e;
    border-color: #262a33;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
}
body.oe-theme-dark .x-boundlist.cnBoundList .x-boundlist-item {
    color: #e6e8eb;
}
body.oe-theme-dark .x-boundlist.cnBoundList .x-boundlist-item-over {
    background: #1b2630;
    color: #8fb3ff;
}
body.oe-theme-dark .x-boundlist.cnBoundList .x-boundlist-selected {
    background: #23324a;
    color: #8fb3ff;
}

/* Hinweis in der Parameterliste, wenn die Suche keine Treffer liefert */
body.xadmintool .x-window.genWindow .connectionParamsNoHits {
    padding: 12px 10px;
    font-size: 12px;
    font-style: italic;
    color: var(--cn-slate-500);
}