/* ==================================================================
 * Dashboard-Einstellungen (ExpertUI.view.dashboard.Settings)
 *
 * Der Dialog traegt "xdDialog" und erbt damit die gemeinsame Optik der
 * Dialoge aus resources/message-dialogs.css: Fenster mit weichen Ecken,
 * Kopfbereich mit dezentem Schliessen-Kreuz, Felder (.xdField) und die
 * Fusszeile mit den Pillentasten (.xdBtn / .xdBtnGhost / .xdBtnPrimary).
 *
 * Hier steht nur, was es dort nicht gibt: der Auswahlpfeil des
 * Standard-XStartups und das Kaestchen der grauen Fusszeile.
 *
 *   $xdSurface #ffffff   $xdBorder #e7e9f2   $xdText #171a26
 *   $xdMuted   #9298ab   $xdAccent #417dbf
 *
 * Die Datei wird NACH message-dialogs.css und VOR dem gebauten
 * Theme-CSS geladen (index.html / application.html). Kein SASS-Build.
 *
 * Dunkles Design am Ende der Datei (Palette: resources/dark-theme.css).
 * ================================================================== */

/* Das Formular sitzt direkt im Fensterkoerper - es soll keine eigene
   Flaeche und keinen Rahmen mitbringen. */
body .dbSettingsDialog .x-panel-body,
body .dbSettingsDialog .x-form-item-body {
    background: transparent !important;
    border: 0 !important;
}

/* Auswahlpfeil des Standard-XStartups: nur das Glyph, keine eigene
   Flaeche neben dem Feld. */
body .dbSettingsDialog .xdField .x-form-trigger {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: #9298ab !important;
    width: 28px;
}

/* ------------------------------------------------------------------
   "Fusszeile mit grauem Hintergrund": Kaestchen wie in den
   Vorgaben-Dialogen (vgl. .adPlainCheck in appbuilder-dialogs.css)
   ------------------------------------------------------------------ */
body .dbSettingsDialog .dbsPlainCheck .x-form-cb-wrap-inner {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

body .dbSettingsDialog .dbsPlainCheck span.x-form-checkbox {
    position: relative;
    display: block;
    flex: none;
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: 1.5px solid #d8dbe8 !important;
    border-radius: 6px;
    background: #ffffff !important;
    background-image: none !important;
    cursor: pointer;
}

body .dbSettingsDialog .dbsPlainCheck span.x-form-checkbox::before {
    content: none !important;
}

body .dbSettingsDialog .dbsPlainCheck.x-form-cb-checked span.x-form-checkbox {
    background: #417dbf !important;
    border-color: #417dbf !important;
}

/* Der Haken: zwei Kanten eines Kastens, gedreht */
body .dbSettingsDialog .dbsPlainCheck.x-form-cb-checked span.x-form-checkbox::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Das echte Ankreuzfeld liegt unsichtbar ueber dem gezeichneten */
body .dbSettingsDialog .dbsPlainCheck input.x-form-cb-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

body .dbSettingsDialog .dbsPlainCheck .x-form-cb-label {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #171a26;
    cursor: pointer;
}

/* ==================================================================
   Dunkles Design (Palette: resources/dark-theme.css)
   ================================================================== */
body.oe-theme-dark .dbSettingsDialog .dbsPlainCheck span.x-form-checkbox {
    background: #1c2333 !important;
    border-color: #35426b !important;
}

body.oe-theme-dark .dbSettingsDialog .dbsPlainCheck.x-form-cb-checked span.x-form-checkbox {
    background: #5b8cff !important;
    border-color: #5b8cff !important;
}

body.oe-theme-dark .dbSettingsDialog .dbsPlainCheck .x-form-cb-label {
    color: #e6e8eb;
}