/* Make the entire ribbon match bg-primary */
.html-editor-form-control .dxbl-office-ribbon {
    background-color: var(--bs-primary) !important;
    padding: 0.5rem;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

    /* Make all toolbar buttons look like btn btn-primary */
    .html-editor-form-control .dxbl-office-ribbon .dxbl-toolbar-item button,
    .html-editor-form-control .dxbl-office-ribbon .dxbl-btn {
        background-color: var(--bs-primary) !important;
        color: var(--bs-btn-color, #fff) !important;
        border: var(--bs-btn-border-width, 1px) solid var(--bs-btn-border-color, #0a58ca) !important;
        font-size: var(--bs-btn-font-size, 1rem);
        padding: var(--bs-btn-padding-y, 0.375rem) var(--bs-btn-padding-x, 0.75rem);
        border-radius: var(--bs-btn-border-radius, 0.375rem);
        box-shadow: var(--bs-btn-box-shadow, none);
    }

        /* Hover and focus styles */
        .html-editor-form-control .dxbl-office-ribbon .dxbl-toolbar-item button:hover,
        .html-editor-form-control .dxbl-office-ribbon .dxbl-btn:hover {
            background-color: var(--bs-primary-hover, #0b5ed7) !important;
            color: var(--bs-btn-hover-color, #fff) !important;
            border-color: var(--bs-btn-hover-border-color, #0a58ca) !important;
        }

    /* Ensure inputs/selects/areas inside the ribbon keep Bootstrap default background */
    .html-editor-form-control .dxbl-office-ribbon input,
    .html-editor-form-control .dxbl-office-ribbon select,
    .html-editor-form-control .dxbl-office-ribbon textarea {
        background-color: var(--bs-body-bg, #fff) !important;
        color: var(--bs-body-color, #212529) !important;
        border-color: var(--bs-border-color, #ced4da) !important;
    }

.custom-drop-zone {
    padding: 0 !important;
    border-style: dashed;
    border-width: 2px !important;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(183, 183, 183, 0.1);
}

    .custom-drop-zone.custom-drop-zone-hover {
        border-style: solid;
    }

    .custom-drop-zone svg {
        width: 42px;
        height: 42px;
    }

    .custom-drop-zone > *:not(#overviewDemoSelectButton) {
        pointer-events: none;
    }

.gradient-header {
    background-image: linear-gradient( 90deg, var(--bs-primary), var(--bs-secondary) );
    color: white;
    border-left: 5px solid var(--bs-success);
}