/* 1) Variablen nur für Tabs (falls vom Theme/Komponente ausgewertet) */
.dxbl-tabs {
    --dxbl-tabs-color: #000; /* Textfarbe aktiv/hover je nach Theme */
    --dxbl-tabs-indicator-color: #000; /* Unterstrich, falls als Var genutzt */
}

    /* 2) Harte Overrides – greifen auch, wenn das Theme feste Werte nutzt */
    .dxbl-tabs .dxbl-tabs-item.dxbl-active {
        color: #000 !important; /* aktiver Tab-Text */
        font-weight: bold;
    }

        .dxbl-tabs .dxbl-tabs-item.dxbl-active::after {
            background-color: #000 !important; /* Unterstrich */
        }

    /* Optional: Hover ein bisschen heller */
    .dxbl-tabs .dxbl-tabs-item:hover {
        color: #333 !important;
    }


/* Popup-Body etwas heller / neutral */
.popup_kostenstellen_dialog {
    background: #e9ecef; /* statt lightgrey */
}

/* Grid "Karte" weiß */
.ks_grid_blue {
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #c9d8ee;
}

    /* DevExpress Grid Container / Table Hintergrund hart auf weiß setzen */
    .ks_grid_blue .dxbl-grid,
    .ks_grid_blue .dxbl-grid-table,
    .ks_grid_blue .dxbl-grid-table table,
    .ks_grid_blue .dxbl-grid-content {
        background: #ffffff !important;
    }

        /* Header blau (wie schon gedacht) */
        .ks_grid_blue .dxbl-grid .dxbl-grid-header-row {
            background: #0b3a66 !important;
            color: #fff !important;
        }

        /* Zebra Rows (deutlich sichtbar) */
        .ks_grid_blue .dxbl-grid .dxbl-grid-row:nth-child(even) {
            background: #f3f8ff !important;
        }

        .ks_grid_blue .dxbl-grid .dxbl-grid-row:nth-child(odd) {
            background: #ffffff !important;
        }

        /* Selected Row hellblau */
        .ks_grid_blue .dxbl-grid-selected-row {
            background-color: #cfe6ff !important; /* hellblau */
        }

            /* Selected Row auch bei Hover hellblau lassen */
        .ks_grid_blue .dxbl-grid-selected-row:hover {
            background-color: #cfe6ff !important;
        }

            /* Optional: Text etwas kräftiger */
        .ks_grid_blue .dxbl-grid-selected-row td {
            font-weight: 600;
        }

        /* Hover: auch schön */
        .ks_grid_blue .dxbl-grid .dxbl-grid-row:hover {
            background: #e8f2ff !important;
        }


.settings-grid-selected-row {
    background: linear-gradient(90deg, #fff8d6 0%, #ffefab 100%) !important;
    border-top: 1px solid #e7c95d !important;
    border-bottom: 1px solid #e7c95d !important;
}

.OrderlistExtern_LinkkarteBottom .dxbl-btn {
    width: 100%;
}

.articleconfig-tabs .dxbl-tabs-tablist {
    gap: 0.25rem;
    padding: 0 0.35rem;
}

.articleconfig-tabs .dxbl-tabs-item {
    min-height: 48px;
    margin: 0 !important;
    padding: 0.7rem 0.9rem !important;
    border-radius: 16px 16px 0 0;
    color: #475569 !important;
    font-weight: 700;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.articleconfig-tabs .dxbl-tabs-item:hover {
    background: rgba(226, 232, 240, 0.7);
    color: #0f172a !important;
}

.articleconfig-tabs .dxbl-tabs-item.dxbl-active {
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
    color: #0f172a !important;
    font-weight: 800;
}

.articleconfig-tabs .dxbl-tabs-item.dxbl-active::after {
    background: linear-gradient(90deg, #b45309 0%, #f59e0b 100%) !important;
    height: 3px !important;
    border-radius: 999px;
}

.articleConfig_ContentCard .dxbl-grid,
.articleConfig_ContentCard .dxbl-grid-table,
.articleConfig_ContentCard .dxbl-grid-content {
    background: transparent !important;
}

.articleConfig_ContentCard .dxbl-grid-header-row {
    background: linear-gradient(135deg, #1f2937 0%, #334155 100%) !important;
    color: #f8fafc !important;
}

.articleConfig_ContentCard .dxbl-grid-header-row th,
.articleConfig_ContentCard .dxbl-grid-header-row td {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.articleConfig_ContentCard .dxbl-grid-row:nth-child(odd) {
    background: #ffffff !important;
}

.articleConfig_ContentCard .dxbl-grid-row:nth-child(even) {
    background: #f8fafc !important;
}

.articleConfig_ContentCard .dxbl-grid-row:hover {
    background: #fff7ed !important;
}

.articleConfig_ContentCard .dxbl-grid-selected-row,
.articleConfig_ContentCard .dxbl-grid-selected-row:hover {
    background: #ffedd5 !important;
}

.articleConfig_ContentCard .dxbl-command-cell a {
    color: #334155;
}

.articleConfigPopup .dxbl-modal-dialog,
.articleConfigPopup .dxbl-popup,
.articleConfigPopup .dxbl-popup-content,
.articleConfigPopup .dxbl-popup-body {
    background: linear-gradient(180deg, #fffdf8 0%, #f8fafc 100%) !important;
    color: #0f172a !important;
}

.articleConfigPopup .dxbl-popup-header {
    background: linear-gradient(135deg, #1f2937 0%, #334155 100%) !important;
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.articleConfigPopup .dxbl-btn.dxbl-btn-primary,
.articleConfigPopup .dxbl-btn.btn-primary {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%) !important;
    border-color: #b45309 !important;
    color: #111827 !important;
    font-weight: 800 !important;
}

.articleConfigPopup .dxbl-btn.dxbl-btn-secondary,
.articleConfigPopup .dxbl-btn.btn-secondary {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

.articleConfigPopup .dxbl-fl-cpt {
    color: #475569 !important;
    font-weight: 700 !important;
}

.articleConfigPopup .dxbl-modal-dialog {
    width: min(800px, calc(100vw - 1.5rem)) !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin: 0.75rem auto !important;
}

.articleConfigPopup .dxbl-popup-content,
.articleConfigPopup .dxbl-popup-body {
    max-width: 100%;
    overflow-x: hidden;
}

.articleConfigPopup input,
.articleConfigPopup textarea,
.articleConfigPopup .dxbl-edit,
.articleConfigPopup .dxbl-text-edit,
.articleConfigPopup .dxbl-spin-edit,
.articleConfigPopup .dxbl-combobox,
.articleConfigPopup .dxbl-tagbox {
    border-radius: 12px !important;
}

.articleConfigPopup input[type="checkbox"] {
    accent-color: #2563eb;
}

.articleConfigPopup .dxbl-checkbox,
.articleConfigPopup .dxbl-checkbox .dxbl-checkbox-check-container,
.articleConfigPopup .dxbl-checkbox .dxbl-checkbox-check-element,
.articleConfigPopup .dxbl-checkbox .dxbl-checkbox-check-checked {
    color: inherit !important;
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.articleConfigPopup .dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-check-container,
.articleConfigPopup .dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-check-element,
.articleConfigPopup .dxbl-checkbox.dxbl-state-checked .dxbl-checkbox-check-container,
.articleConfigPopup .dxbl-checkbox.dxbl-state-checked .dxbl-checkbox-check-element,
.articleConfigPopup .dxbl-checkbox .dxbl-checkbox-check-checked,
.articleConfigPopup .dxbl-checkbox input:checked + .dxbl-checkbox-check-container,
.articleConfigPopup .dxbl-checkbox input:checked + .dxbl-checkbox-check-element {
    background: #2563eb !important;
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: none !important;
}

.articleConfigPopup .dxbl-checkbox svg,
.articleConfigPopup .dxbl-checkbox .dxbl-checkbox-icon,
.articleConfigPopup .dxbl-checkbox .dxbl-checkbox-check {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.articleConfigPopup dxbl-spinedit.dxbl-text-edit,
.articleConfigPopup .dxbl-spin-edit,
.articleConfigPopup .dxbl-edit {
    overflow: hidden;
}

.articleConfigPopup dxbl-spinedit.dxbl-text-edit,
.articleConfigPopup .dxbl-spin-edit {
    border-radius: 12px !important;
}

.articleConfigPopup dxbl-spinedit.dxbl-text-edit .dxbl-text-edit-input,
.articleConfigPopup .dxbl-spin-edit input {
    border-radius: 0 !important;
}

.articleConfigPopup dxbl-spinedit.dxbl-text-edit .dxbl-btn,
.articleConfigPopup dxbl-spinedit.dxbl-text-edit button,
.articleConfigPopup dxbl-spinedit.dxbl-text-edit .dxbl-spin-btn,
.articleConfigPopup dxbl-spinedit.dxbl-text-edit .dxbl-btn-group,
.articleConfigPopup dxbl-spinedit.dxbl-text-edit .dxbl-edit-btn,
.articleConfigPopup .dxbl-spin-edit .dxbl-btn,
.articleConfigPopup .dxbl-spin-edit button,
.articleConfigPopup .dxbl-spin-edit .dxbl-spin-btn,
.articleConfigPopup .dxbl-spin-edit .dxbl-btn-group,
.articleConfigPopup .dxbl-spin-edit .dxbl-edit-btn {
    border-radius: 0 !important;
}

.articleConfigPopup dxbl-spinedit.dxbl-text-edit .dxbl-spin-btns,
.articleConfigPopup .dxbl-spin-edit .dxbl-spin-btns {
    align-self: stretch;
    border-left: 1px solid #cbd5e1 !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
}

.articleConfigPopup dxbl-spinedit.dxbl-text-edit .dxbl-spin-btn-inc,
.articleConfigPopup dxbl-spinedit.dxbl-text-edit .dxbl-spin-btn-dec,
.articleConfigPopup .dxbl-spin-edit .dxbl-spin-btn-inc,
.articleConfigPopup .dxbl-spin-edit .dxbl-spin-btn-dec {
    width: 2rem !important;
    min-width: 2rem !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: #f8fafc !important;
}

.articleConfigPopup dxbl-spinedit.dxbl-text-edit .dxbl-spin-btn-inc,
.articleConfigPopup .dxbl-spin-edit .dxbl-spin-btn-inc {
    border-top-right-radius: 12px !important;
}

.articleConfigPopup dxbl-spinedit.dxbl-text-edit .dxbl-spin-btn-dec,
.articleConfigPopup .dxbl-spin-edit .dxbl-spin-btn-dec {
    border-bottom-right-radius: 12px !important;
}

.articleConfigPopup dxbl-spinedit.dxbl-text-edit .dxbl-spin-btns:last-child,
.articleConfigPopup .dxbl-spin-edit .dxbl-spin-btns:last-child {
    background-clip: padding-box !important;
}

@media (max-width: 768px) {
    .articleConfig_ArticleGroup_Body .dxbl-grid-header-row > th:nth-child(4),
    .articleConfig_ArticleGroup_Body .dxbl-grid-header-row > th:nth-child(6),
    .articleConfig_ArticleGroup_Body .dxbl-grid-row > td:nth-child(4),
    .articleConfig_ArticleGroup_Body .dxbl-grid-row > td:nth-child(6) {
        display: none !important;
    }

    .articleConfig_ArticleGroup_Body .dxbl-grid-header-row > th,
    .articleConfig_ArticleGroup_Body .dxbl-grid-row > td {
        padding-inline: 0.45rem !important;
    }

    .articleConfigPopup .dxbl-modal-dialog {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        margin: 0.5rem auto !important;
    }

    .articleConfigPopup .dxbl-popup-body {
        padding: 0.75rem !important;
    }
}