/* Syncfusion-Anpassungen auf Basis des tailwind3-dark-Themes.
   Teil 1: Markenfarben & Navy-Flächen per CSS-Variablen-Override — ersetzt den Theme-Studio-Build
           der alten bootstrap5-dark/CustomDarkTheme.css (dort: $primary=Gelb/#121212-Text,
           Flächen auf #0D1A29 retintet). Quelle der Werte: css/tokens.css.
   Teil 2: die gewachsenen Custom-Regeln, unverändert aus dem Ende der alten CustomDarkTheme.css
           übernommen (Scrollbar, Sidebar, Textboxen, Accordion, Dropdown-Popup, …).
   Weitere --color-sf-*-Variablen (z. B. Chips/Badges) bei Bedarf hier ergänzen. */

:root {
    /* Primär: betterprojects-Gelb mit dunklem Text */
    --color-sf-primary: var(--bp-yellow);
    --color-sf-primary-text-color: var(--bp-black);
    --color-sf-primary-text: var(--bp-black);
    --color-sf-primary-bg-color: var(--bp-yellow);
    --color-sf-primary-border-color: var(--bp-yellow);
    --color-sf-primary-outline: var(--bp-yellow);
    /* Dark-Theme-Semantik: „dark" = Hover-Ton (heller), „darker" = Pressed-Ton (dunkler),
       „light/lighter" = zurückgenommene Flächen (Selektion, subtile Hintergründe). */
    --color-sf-primary-dark: color-mix(in srgb, var(--bp-yellow) 85%, #ffffff);
    --color-sf-primary-darker: color-mix(in srgb, var(--bp-yellow) 80%, #000000);
    --color-sf-primary-light: color-mix(in srgb, var(--bp-yellow) 35%, var(--bp-surface));
    --color-sf-primary-lighter: color-mix(in srgb, var(--bp-yellow) 15%, var(--bp-surface));
    --color-sf-primary-bg-color-hover: color-mix(in srgb, var(--bp-yellow) 85%, #ffffff);
    --color-sf-primary-border-color-hover: color-mix(in srgb, var(--bp-yellow) 85%, #ffffff);
    --color-sf-primary-text-hover: var(--bp-black);
    --color-sf-primary-bg-color-pressed: color-mix(in srgb, var(--bp-yellow) 80%, #000000);
    --color-sf-primary-border-color-pressed: color-mix(in srgb, var(--bp-yellow) 80%, #000000);
    --color-sf-primary-text-pressed: var(--bp-black);
    --color-sf-primary-bg-color-focus: color-mix(in srgb, var(--bp-yellow) 85%, #ffffff);
    --color-sf-primary-border-color-focus: color-mix(in srgb, var(--bp-yellow) 85%, #ffffff);
    --color-sf-primary-text-focus: var(--bp-black);
    --color-sf-primary-bg-color-disabled: color-mix(in srgb, var(--bp-yellow) 30%, var(--bp-surface));
    --color-sf-primary-border-color-disabled: color-mix(in srgb, var(--bp-yellow) 30%, var(--bp-surface));
    --color-sf-primary-text-disabled: rgba(255, 255, 255, 0.3);

    /* Sekundär/Default-Buttons: bewusst KEIN Override — tailwind3-dark stylt Default-Buttons
       als dezente Ghost-Buttons (weiß-transparent), das passt zur Navy-Fläche. Ein Blau-Override
       färbte sonst JEDEN Default-Button massiv blau (z. B. die komplette Aktionen-Sidebar). */

    /* Navy-Arbeitsflächen (Fortführung des Retints #14344A → #0D1A29 aus dem Redesign):
       Syncfusion-Inhaltsflächen (Grid, Dialoge, Panels) auf --bp-surface statt Zinc-Grau.
       Abstufungen alt1–alt5 = zunehmend aufgehellte Flächen, per color-mix abgeleitet. */
    --color-sf-content-bg-color: var(--bp-surface);
    --color-sf-content-bg-color-alt1: color-mix(in srgb, var(--bp-surface) 96%, #ffffff);
    --color-sf-content-bg-color-alt2: color-mix(in srgb, var(--bp-surface) 94%, #ffffff);
    --color-sf-content-bg-color-alt3: color-mix(in srgb, var(--bp-surface) 92%, #ffffff);
    --color-sf-content-bg-color-alt4: color-mix(in srgb, var(--bp-surface) 90%, #ffffff);
    --color-sf-content-bg-color-alt5: color-mix(in srgb, var(--bp-surface) 88%, #ffffff);
    --color-sf-content-bg-color-hover: color-mix(in srgb, var(--bp-surface) 95%, #ffffff);
    --color-sf-content-bg-color-focus: color-mix(in srgb, var(--bp-surface) 95%, #ffffff);
    --color-sf-content-bg-color-pressed: color-mix(in srgb, var(--bp-surface) 92%, #ffffff);
    --color-sf-content-bg-color-selected: color-mix(in srgb, var(--bp-surface) 88%, #ffffff);
    --color-sf-content-bg-color-dragged: color-mix(in srgb, var(--bp-surface) 92%, #ffffff);
    --color-sf-content-bg-color-disabled: var(--bp-surface);
}

/* CI-Schrift auch in Syncfusion-Komponenten (die setzen sonst eine eigene font-family). */
.e-control,
.e-css,
.e-error {
    font-family: var(--bp-font-body);
}

/* ================================================================
   Teil 2 — Custom-Regeln aus der alten CustomDarkTheme.css (Z. 64101 ff.),
   unverändert übernommen (inkl. Navy-Retint des Redesigns).
   ================================================================ */
/* Custom Additional Changes */




/*==============================
    CUSTOM Color changes
==============================*/

.e-warning {
    color: #FFF;
}

.e-btn.e-warning,
.e-css.e-btn.e-warning {
    background: #FF6B2D !important;
    border-color: #FF6B2D !important;
    color: #FFF !important; 
}

    .e-btn.e-warning:hover,
    .e-css.e-btn.e-warning:hover {
        background: #E55216 !important;
        border-color: #D14A14 !important;
        box-shadow: none;
    }

    .e-btn.e-warning:focus,
    .e-css.e-btn.e-warning:focus {
        background: #FF6B2D;
        border-color: #FF6B2D;
        color: #121212;
        box-shadow: 0 0 0 4px rgba(255, 107, 45, 0.4);
    }

    .e-btn.e-warning:active, .e-btn.e-warning.e-active,
    .e-css.e-btn.e-warning:active,
    .e-css.e-btn.e-warning.e-active {
        background: #E55A1F;
        border-color: #E55A1F;
        color: #121212;
    }

    .e-btn.e-warning:disabled, .e-btn.e-warning.e-disabled,
    .e-css.e-btn.e-warning:disabled,
    .e-css.e-btn.e-warning.e-disabled {
        background: rgba(255, 107, 45, 0.6);
        border-color: rgba(255, 107, 45, 0.1);
        box-shadow: none;
        color: rgba(18, 18, 18, 0.65);
    }

    .e-btn.e-warning .e-ripple-element,
    .e-css.e-btn.e-warning .e-ripple-element {
        background: transparent;
    }

/* =========================
    CUSTOM Sidebar Changes
============================*/
.e-sidebar {
    background-color: rgb(20,53,74);
}


/* =============================
    CUSTOM Menu Bar Changes 
============================= */
.e-contextmenu-container ul {
    background-color: rgb(230,255,3);
}


.e-menu-wrapper,
.e-menu-container {
    background: rgb(20,52,74) !important;
}

/* ========================
    CUSTOM Card Changes 
======================== */
/* Overriding the changes to the border-color when hovering / clicking the Card */
.e-card:hover {
    border-color: #FDFCFC;
}

.e-card:focus {
    border-color: #FDFCFC;
}

.e-card:active {
    border-color: #FDFCFC;
}


/* =========================
    CUSTOM Accordion Changes
========================= */

/* Sets the Background color of the accordion header when selected */
.e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
    background: #0D1A29;
}

.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
    background-color: #0D1A29 !important;
}




/* =========================
    CUSTOM Buttons 
========================= */

.e-switch-wrapper .e-switch-handle.e-switch-active {
    background-color: rgb(18,18,18);
}



/* =========================
    Custom Border Element
========================= */
.CtmBorderElement {
    border-color: rgb(68,76,84);
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
}

    .CtmBorderElement:hover {
        border-color: rgb(253,252,252);
    }



/* ====================
Custom DataGrid Changes
==================== */
/* Resize Columns */
.e-headercelldiv {
    padding: 0 !important;
    margin: 0 !important;
}
.e-headertext {
    padding: 0 !important;
}
.e-grid .e-filtermenudiv,
.e-grid .e-sortfilterdiv {
    margin-left: 2px !important;
    margin-right: 2px !important;
    width: 18px !important;
}

.e-grid.e-wrap .e-columnheader .e-sortfilterdiv {
    margin-bottom: -20px !important;
}




/* Detail-Tempalte (Grid): */
/* Reduces the padding of the detail template content*/
.e-grid .e-detailcell {
    padding: 0px;
}

/* Detail-Header-Zelle an das dunkle Navy-Grid angleichen (rendert sonst in Default-Farbe) */
.e-grid .e-detailheadercell {
    background-color: transparent !important;
}

/* Leere Gruppen-/Indent-Ecke im Header (Group-by-Modus) rendert sonst in Default-Farbe */
.e-grid .e-grouptopleftcell {
    background-color: transparent !important;
}






/* Custom Searchbar border when focused */
.e-toolbar-search .e-input-group.e-control-wrapper:focus-within {
    border-color: rgb(243,255,129) !important;
    box-shadow: 0 0 0 4px rgba(230,255,3, 0.25) !important;
}
/* Sf Search function */
.e-contextmenu-container ul {
    background-color: rgb(20,53,74) !important;
}
/* Changes the Background Color of the PopUp */
.e-excelfilter .e-dlg-content {
    background-color: rgb(20,53,74) !important;
}

.e-toolbar .e-toolbar-items {
    background-color: rgb(20,53,74);
}

.e-searchcontainer {
    background-color: rgb(20,53,74);
}

.e-excelfilter .e-dlg-content {
    background-color: rgb(20,53,74);
}
    /*=======================
CUSTOM Scrollbar Changes 
=========================*/
    * {
        scrollbar-color: var(--bp-yellow) transparent;
    }

.CtmDarkScrollBar {
    scrollbar-color: var(--bp-yellow) var(--bp-surface);
}
    /* ======================
CUSTOM Sidebar Seperator
========================*/
    .CtmSidebarSeperator {
        height: 3px;
        background-color: rgb(253,252,252);
        margin: 8px 0;
        width: 90%;
        margin-left: 5%;
        border-radius: 1px;
    }
    /* ==================
    Custom Links
===================*/
    .custom-link {
        color: rgb(255,255,255);
    }

        .custom-link:hover, .custom-link:focus {
            color: rgb(231,236,239);
        }
    /*==========================
    CUSTOM Data Form Changes
==========================*/
    .e-data-form .e-group-title {
        color: #E7ECEF;
    }

    .e-data-form .e-label-position-top {
        margin-top: 0px;
    }
    /* ======================
CUSTOM Textbox
========================*/
    .e-control.e-textbox.e-lib.e-input {
        background-color: #27465C !important;
    }

    .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-float-input input, .e-float-input.e-control-wrapper input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea.e-input, .e-float-input textarea, .e-float-input.e-control-wrapper textarea, .e-input-group .e-input[disabled], .e-input-group.e-control-wrapper .e-input[disabled], .e-input-group.e-disabled input.e-input, .e-input-group.e-control-wrapper.e-disabled input.e-input, .e-input-group.e-disabled textarea.e-input, .e-input-group.e-control-wrapper.e-disabled textarea.e-input {
        background-color: #2C485C !important;
    }
    /*========================
    Accordion
========================*/
    /* Font Weight (Header)*/
    .e-accordion .e-acrdn-item > .e-acrdn-header .e-acrdn-header-content {
        font-weight: 500;
    }
    /* Ctm Accordion Header | Used to integrate buttons which need to allign on the right side */
    .ctm-acrdn-header-content .e-acrdn-header-content {
        width: 100% !important;
        padding-right: 5% !important;
    }
    /*========================
    Checkbox (yellow)
========================*/

    .form-check-input:checked {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
    }

    .form-check-input:checked {
        background-color: #e6ff03;
        border-color: #e6ff03;
        color: black;
    }
    /*====================
    SfUploader
====================*/
    .e-file-select-wrap {
        text-align: center;
    }


    .e-data-form .e-form-label {
        color: rgb(255,255,255);
    }
    /*====================
    Navigation Link
====================*/
    .navigate-link {
        color: rgb(230,255,3) !important;
        text-decoration: underline !important;
        cursor: pointer;
    }


        .navigate-link:hover {
            color: rgb(230,255,3) !important;
            text-decoration: none !important;
        }
    /*====================
    ListView
====================*/
    .e-listview .e-list-item {
        height: auto !important;
    }

    .e-listview .e-list-text {
        white-space: normal !important;
        word-break: break-word;
    }

    .e-btn.ctm-warning,
    .e-dropdown-btn.ctm-warning {
        background-color: rgb(255, 117, 26) !important;
        border-color: rgb(255, 117, 26) !important;
        color: #fff !important;
    }

        .e-btn.ctm-warning .e-active,
        .e-dropdown-btn.ctm-warning:focus {
            box-shadow: 0 0 0 4px rgba(255, 117, 26, 0.5) !important;
        }


    .ctm-icons-warning::before {
        content: '\e842' !important;
        font-family: 'e-icons' !important;
    }






    /* Alt-Regel unterdrückte den Fokus komplett (box-shadow: none) — WCAG 2.4.7 verlangt
       sichtbaren Tastaturfokus. Statt des fetten Syncfusion-Standardrings: dezenter CI-Ring. */
    .e-grid td.e-focused {
        box-shadow: inset 0 0 0 1px var(--bp-yellow) !important;
    }

    .e-grid.sf-grid :is(.e-groupdroparea,.e-groupdroparea .e-groupsort,.e-groupdroparea .e-ungroupbutton,.e-headercontent th.e-headercell:not(.e-menu-item):not(.e-editedbatchcell),.e-headercontent td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell),.e-content td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell),.e-content td.e-groupcaption:not(.e-menu-item):not(.e-editedbatchcell),.e-content td.e-recordplusexpand:not(.e-menu-item):not(.e-editedbatchcell),.e-content td.e-recordpluscollapse:not(.e-menu-item):not(.e-editedbatchcell),.e-content td.e-detailrowcollapse:not(.e-menu-item):not(.e-editedbatchcell),.e-content td.e-detailrowexpand:not(.e-menu-item):not(.e-editedbatchcell),.e-content th.e-detailcell:not(.e-menu-item):not(.e-editedbatchcell)):is(:focus,:focus-visible) {
        box-shadow: inset 0 0 0 1px var(--bp-yellow) !important;
    }








    .e-dropdown-popup {
        background: #E6FF03 !important;
        color: #121212 !important;
    }

        .e-dropdown-popup ul .e-item {
            color: #121212 !important;
        }

            .e-dropdown-popup ul .e-item .e-menu-icon {
                color: #121212 !important;
            }


            .e-dropdown-popup ul .e-item .e-menu-url {
                color: #121212 !important;
            }

            .e-dropdown-popup ul .e-item:hover {
                color: #FDFCFC !important;
                background: rgba(10,43,255,0.7);
            }

                .e-dropdown-popup ul .e-item:hover .e-menu-icon {
                    color: #FDFCFC !important;
                }


                .e-dropdown-popup ul .e-item:hover .e-menu-url {
                    color: #FDFCFC !important;

                }

/*====================
    Runde Controls (UI-Redesign Runde 2)
====================*/
/* Buttons, Chips und Eingabefelder bekommen app-weit die Control-Rundung (--bp-radius-ctl).
   Bewusste Lockerung der CI-Regel "scharfe Kanten" - abgenommen mit der Vorlage-Shell.
   Grosse Flaechen (Cards/Grids) behalten --bp-radius-lg, Steps/Auth-Akzente bleiben scharf. */
.e-btn,
.e-css.e-btn,
.e-dropdown-btn {
    border-radius: var(--bp-radius-ctl);
}

.e-input-group,
.e-input-group.e-control-wrapper,
.e-float-input,
.e-float-input.e-control-wrapper {
    border-radius: var(--bp-radius-ctl);
}

.e-chip-list .e-chip {
    border-radius: var(--bp-radius-ctl);
}

.e-dropdown-popup {
    border-radius: var(--bp-radius-ctl);
    overflow: hidden;
}