/*
 * app-dark.css: Dark theme color overrides only.
 * Do not include base or layout styles here.
 * Use app.css for all base and app-wide styles.
 */

/* GENERAL ---------------------------------------------------*/
[data-bs-theme=dark] {
    --bs-body-bg: #22324d;
    --background-color: var(--bs-body-bg);
}

    [data-bs-theme=dark] body {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
    }

    /*override arsha main.css*/
    [data-bs-theme=dark] h1, [data-bs-theme=dark] h2, [data-bs-theme=dark] h3, [data-bs-theme=dark] h4, [data-bs-theme=dark] h5, [data-bs-theme=dark] h6 {
        color: var(--bs-body-color);
    }

    /* ALERTS ----------------------------------------------------*/

    /* BACKGROUNDS -----------------------------------------------*/

    /* BUTTONS ---------------------------------------------------*/
    [data-bs-theme=dark] .btn-add-color {
        background-color: var(--bs-success-text);
    }

    [data-bs-theme=dark] .btn-tools {
        border-color: transparent;
        color: rgba(var(--bs-btn-color), 0.25);
    }

        [data-bs-theme=dark] .btn-tools i {
            color: var(--bs-primary);
        }

        [data-bs-theme=dark] .btn-tools:hover i {
            color: var(--bs-btn-hover-color);
        }

    [data-bs-theme=dark] .btn-inline-delete .btn-delete-color .k-svg-icon > svg {
        fill: var(--bs-danger);
    }

    /* CARDS -----------------------------------------------------*/
    [data-bs-theme=dark] .card {
    }

    [data-bs-theme=dark] .btn-card-header {
        color: var(--bs-body-color);
    }


    /* CTA -------------------------------------------------------*/


    /* DIALOGS & WINDOWS -----------------------------------------*/
    [data-bs-theme=dark] .k-window,
    [data-bs-theme=dark] .k-dialog {
        background-color: var(--bs-body-bg);
    }


    /* DRAWER ----------------------------------------------------*/

    /*  DROPDOWNS -------------------------------------------------*/
    [data-bs-theme=dark] .k-list {
        /*kendo dropdown list content*/
        background-color: var(--bs-secondary-bg);
    }


    /* FORM ------------------------------------------------------*/
    /*correction I expect bootstrap will fix*/
    [data-bs-theme=dark] .form-floating > .form-control:disabled ~ label::after {
        background-color: var(--bs-secondary-bg);
    }

    [data-bs-theme=dark] .form-floating .form-control {
        /*background-color: var(--bs-white);*/
        /*border-color: var(--bs-border-color);*/
    }

        [data-bs-theme=dark] .form-floating .form-control:disabled {
            background-color: var(--bs-tertiary-bg);
            color: var(--bs-tertiary-color);
        }

    [data-bs-theme=dark] .form-floating label::after {
        /*background-color: var(--bs-white) !important;*/
    }

    [data-bs-theme=dark] .form-footer {
        border-top: 1px solid var(--bs-border-color);
    }

    [data-bs-theme=dark] .item-separator {
        background-color: var(--bs-border-color);
    }

    [data-bs-theme=dark] .k-form, .k-form-inline {
        color: var(--bs-body-color);
    }

    [data-bs-theme=dark] .k-form-field .k-input-md .k-input-inner,
    [data-bs-theme=dark] .k-form-field .k-picker-md .k-input-inner {
        background-color: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
    }


    /* GRID ------------------------------------------------------*/
    /*row inherits from this*/
    [data-bs-theme=dark] .k-table, .k-data-table {
        border-color: var(--bs-border-color);
        color: var(--bs-body-color);
    }

    [data-bs-theme=dark] .k-master-row .k-grid-content-sticky {
        background-color: rgba(var(--bs-body-bg-rgb), 1.0);
    }

    /*cell & frozen column border*/
    [data-bs-theme=dark] .k-grid,
    [data-bs-theme=dark] .k-grid td,
    [data-bs-theme=dark] .k-grid .k-table-td,
    [data-bs-theme=dark] .k-grid .k-table-row,
    [data-bs-theme=dark] .k-grid .k-grid-content,
    [data-bs-theme=dark] .k-grid .k-grid-header-locked,
    [data-bs-theme=dark] .k-grid .k-grid-content-locked,
    [data-bs-theme=dark] .k-grid-header .k-header.k-grid-header-sticky,
    [data-bs-theme=dark] .k-grid-header .k-filter-row .k-grid-header-sticky,
    [data-bs-theme=dark] .k-grid-footer-sticky {
        border-color: var(--bs-border-color);
    }

        [data-bs-theme=dark] .k-grid a, td[role=gridcell] a {
            color: var(--bs-link-color);
        }


    /* INPUTS ----------------------------------------------------*/
    [data-bs-theme=dark] .k-form-field .k-input-md .k-input-inner,
    [data-bs-theme=dark] .k-form-field .k-picker-md .k-input-inner {
    }

    [data-bs-theme=dark] .k-input-outline,
    [data-bs-theme=dark] .k-input-solid,
    [data-bs-theme=dark] .k-picker-outline,
    [data-bs-theme=dark] .k-picker-solid {
        border-color: var(--bs-border-color);
        background-color: var(--bs-secondary-bg);
        color: var(--bs-body-color);
    }

    [data-bs-theme=dark] .k-menu:not(.k-context-menu) {
        background-color: unset;
    }

    [data-bs-theme=dark] .k-menu-group,
    [data-bs-theme=dark] .k-menu.k-context-menu {
        border-color: var(--bs-border-color);
        background-color: var(--bs-body-bg);
    }

    [data-bs-theme=dark] .k-messagebox-error {
        border-width: 1px 1px 1px 6px;
        border-color: var(--bs-danger-border-subtle);
        color: var(--bs-danger-text-emphasis);
        background-color: var(--bs-danger-bg-subtle);
    }

    [data-bs-theme=dark] .k-picker-outline:focus,
    [data-bs-theme=dark] .k-picker-outline.k-focus,
    [data-bs-theme=dark] .k-picker-solid:focus,
    [data-bs-theme=dark] .k-picker-solid.k-focus {
        /*border-color: 86b7fe; */
        /*box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);*/
    }

    /*the popup element of dropdowns*/
    [data-bs-theme=dark] .k-popup {
        /*border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-secondary-bg);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04);*/
    }

    [data-bs-theme=dark] .settings-switch-wrapper {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--bs-body-color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--bs-body-bg);
        background-clip: padding-box;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    /* LINKS -----------------------------------------------------*/
    [data-bs-theme=dark] .nav-pills {
        --bs-nav-pills-link-active-color: var(--bs-emphasis-color);
        --bs-nav-pills-link-active-bg: var(--bs-secondary-bg);
    }

        [data-bs-theme=dark] .nav-pills .nav-link.active,
        [data-bs-theme=dark] .nav-pills .show > .nav-link {
            border: 1px solid var(--bs-border-color) !important;
        }

        [data-bs-theme=dark] .nav-pills .nav-link.main-link:focus,
        [data-bs-theme=dark] .nav-pills .nav-link.main-link:hover {
            background-color: var(--bs-nav-pills-link-active-bg);
            border: 1px solid var(--bs-border-color);
        }

    /* SIDEBAR ---------------------------------------------------*/

    /* TABLES-----------------------------------------------------*/

    /* TABS ------------------------------------------------------*/

    /* TIPS & TOOLTIPS -------------------------------------------*/
    [data-bs-theme=dark] .k-tooltip {
        color: var(--bs-body-bg);
        background-color: var(--bs-emphasis-color);
        border-radius: var(--bs-border-radius);
    }

    [data-bs-theme=dark] .k-tooltip-content {
        /*font-weight: 500;*/
        /*background-color: var(--bs-emphasis-color);*/
        /*border-radius: var(--bs-border-radius);*/
    }