body.bootstrap-dark {
    --sd-bg: #000;
    --sd-surface: #000000;
    --sd-surface-2: #303F5E;
    --sd-border: #3a4048;
    --sd-text: #f1f3f5;
    --sd-muted: #aeb8ca;
    --sd-note-bg: #2b3037; /* notes / info boxes ka gray background */

    --tenant-primary-rgb: var(--primary-color);
    --tint-alpha: 0.38;
    --Primary-Tint: color-mix(in srgb, var(--primary-color) 38%, transparent);
}
/* ---------- page background: white strip fix ---------- */
html:has(body.bootstrap-dark),
body.bootstrap-dark,
body.bootstrap-dark .wrapper,
body.bootstrap-dark .page-wrapper,
body.bootstrap-dark .body-container,
body.bootstrap-dark .content-wrapper,
body.bootstrap-dark .main-content,
body.bootstrap-dark main {
    background-color: #000 !important;
    color: var(--sd-text);
}
    /* ---------- page chrome: header / top bar / side menu / footer ---------- */
    body.bootstrap-dark header,
    body.bootstrap-dark .navbar,
    body.bootstrap-dark .main-header,
    body.bootstrap-dark .topbar,
    body.bootstrap-dark .top-bar {
        background: #000;
        border-color: var(--sd-border) !important;
        color: #fff !important;
    }
    /* ---------- top white strip fix ---------- */
    html:has(body.bootstrap-dark),
    body.bootstrap-dark,
    body.bootstrap-dark header,
    body.bootstrap-dark .navbar,
    body.bootstrap-dark .main-header,
    body.bootstrap-dark .topbar,
    body.bootstrap-dark .top-bar,
    body.bootstrap-dark .wrapper,
    body.bootstrap-dark .page-wrapper,
    body.bootstrap-dark #wrapper,
    body.bootstrap-dark .body-container {
        background: #000 !important;
        background-image: none !important;
        border-color: var(--sd-border) !important;
    }

        body.bootstrap-dark .navbar a,
        body.bootstrap-dark .navbar .nav-link,
        body.bootstrap-dark .navbar-brand,
        body.bootstrap-dark .main-header a,
        body.bootstrap-dark header a {
            color: #fff !important;
        }

    body.bootstrap-dark aside,
    body.bootstrap-dark .sidebar,
    body.bootstrap-dark .side-menu,
    body.bootstrap-dark .sidenav,
    body.bootstrap-dark .main-sidebar,
    body.bootstrap-dark .rail {
        background: linear-gradient(180deg, var(--sd-surface), var(--sd-bg)) !important;
        border-color: var(--sd-border) !important;
        color: #fff !important;
    }

        body.bootstrap-dark aside a,
        body.bootstrap-dark .sidebar a,
        body.bootstrap-dark .side-menu a,
        body.bootstrap-dark .main-sidebar a {
            color: #fff !important;
        }

    body.bootstrap-dark footer,
    body.bootstrap-dark .main-footer,
    body.bootstrap-dark .CustomFooter {
        background: #303f5e !important;
        border-color: var(--sd-border) !important;
        color: var(--sd-muted) !important;
    }

    /* ---------- content areas, cards, headings ---------- */
    body.bootstrap-dark .content-wrapper,
    body.bootstrap-dark .main-content,
    body.bootstrap-dark .container,
    body.bootstrap-dark .container-fluid,
    body.bootstrap-dark main {
        background: transparent !important;
        color: var(--sd-text) !important;
    }

    /* Modal mockup body: tint ab SECONDARY color se.
   Variable isi element par define hai taake #brandingRedesign ka --secondary-color use ho. */
        body.bootstrap-dark .modal-mockup-body,
        body.bootstrap-dark .modal-dialog .modal-body {
            --Secondary-Tint: color-mix(in srgb, var(--secondary-color) 32%, transparent);
            background-color: #000 !important;
            background-image: linear-gradient(var(--Secondary-Tint), var(--Secondary-Tint)) !important;
        }

    body.bootstrap-dark .card,
    body.bootstrap-dark .modal-content,
    body.bootstrap-dark .dropdown-menu,
    body.bootstrap-dark .list-group-item,
    body.bootstrap-dark .popover {
        background: var(--sd-surface) !important;
        border-color: var(--sd-border) !important;
        color: var(--sd-text) !important;
    }

    /* Section / card headers: gradient hata diya, ab transparent (sirf border rahega) */
    body.bootstrap-dark .card-header,
    body.bootstrap-dark .card-footer,
    body.bootstrap-dark .modal-header,
    body.bootstrap-dark .modal-footer {
        background: transparent !important;
        background-image: none !important;
        border-color: var(--sd-border) !important;
        color: var(--sd-text) !important;
    }

    body.bootstrap-dark h1, body.bootstrap-dark h2, body.bootstrap-dark h3,
    body.bootstrap-dark h4, body.bootstrap-dark h5, body.bootstrap-dark h6,
    body.bootstrap-dark .screen-title,
    body.bootstrap-dark label,
    body.bootstrap-dark legend,
    body.bootstrap-dark p,
    body.bootstrap-dark span.field-label,
    body.bootstrap-dark .form-check-label,
    body.bootstrap-dark .col-form-label {
        color: var(--sd-text);
    }
    /* the headings carry an inline black underline */
    body.bootstrap-dark .screen-title {
        border-bottom-color: var(--sd-border) !important;
    }

    body.bootstrap-dark .text-muted,
    body.bootstrap-dark small,
    body.bootstrap-dark .help-block,
    body.bootstrap-dark .form-text {
        color: var(--sd-muted) !important;
    }

    body.bootstrap-dark .text-dark {
        color: var(--sd-text) !important;
    }

    body.bootstrap-dark hr {
        border-color: var(--sd-border) !important;
    }

        /* ---------- color picker circles: dark mode mein white border ---------- */
        body.bootstrap-dark .color-preview {
            border: 2px solid #fff !important;
            background-clip: padding-box;
        }
.company-logo-preview.mode-primary {
    background: var(--secondary-color);
}

    body.bootstrap-dark .text-danger {
        color: #ff7b86 !important;
    }

    /* ---------- Notes / info boxes: gray background ---------- */
    /* (inline style="background:#eee" / "#fafbfb" ko override karne ke liye !important zaroori hai) */
    body.bootstrap-dark .info-note,
    body.bootstrap-dark .hap-match-panel,
    body.bootstrap-dark .section-title,
    body.bootstrap-dark .close-text-custom-card {
        background: var(--sd-note-bg) !important;
        color: var(--sd-text) !important;
        border-color: var(--sd-border) !important;
    }

    /* ---------- form controls: sab transparent ---------- */
    body.bootstrap-dark .form-control,
    body.bootstrap-dark .custom-select,
    body.bootstrap-dark input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="color"]),
    body.bootstrap-dark textarea,
    body.bootstrap-dark select {
        background-color: transparent !important;
        border-color: var(--sd-border) !important;
        color: var(--sd-text) !important;
    }

        body.bootstrap-dark .form-control::placeholder,
        body.bootstrap-dark textarea::placeholder {
            color: #8591a6 !important;
        }

        body.bootstrap-dark .form-control:focus {
            border-color: var(--primary-color) !important;
            box-shadow: 0 0 0 .15rem rgba(142,197,255,.25) !important;
        }

        body.bootstrap-dark .form-control:disabled,
        body.bootstrap-dark .form-control[readonly] {
            background-color: transparent !important;
            color: var(--sd-muted) !important;
        }

    body.bootstrap-dark .input-group-text {
        background: transparent !important;
        border-color: var(--sd-border) !important;
        color: var(--sd-text) !important;
    }

    body.bootstrap-dark input[type="date"]::-webkit-calendar-picker-indicator,
    body.bootstrap-dark input[type="time"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }

    /* Native <select> ki option list: select transparent hai, to list ko solid dark chahiye
   warna popup white aata hai aur light text dikhta nahi */
    body.bootstrap-dark select option {
        background-color: #1a1d21;
        color: var(--sd-text);
    }

    /* Custom segmented time picker (Open / Close time) */
    body.bootstrap-dark .stime {
        background: transparent !important;
        border-color: var(--sd-border) !important;
        color: var(--sd-text) !important;
    }

    body.bootstrap-dark .stime-seg:hover {
        background: rgba(255,255,255,.08);
    }

    /* Select2 (Organization Type, etc.) */
    body.bootstrap-dark .select2-container--default .select2-selection--single,
    body.bootstrap-dark .select2-container--default .select2-selection--multiple {
        background-color: transparent !important;
        border-color: var(--sd-border) !important;
    }

        body.bootstrap-dark .select2-container--default .select2-selection--single .select2-selection__rendered,
        body.bootstrap-dark .select2-container--default .select2-search__field {
            color: var(--sd-text) !important;
        }

        body.bootstrap-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background: var(--primary-color) !important;
            border-color: var(--sd-border) !important;
            color: #fff !important;
        }
    /* dropdown list solid rehni chahiye (overlay hai), transparent nahi */
    body.bootstrap-dark .select2-dropdown {
        background: var(--sd-surface) !important;
        border-color: var(--sd-border) !important;
        color: var(--sd-text) !important;
    }

    body.bootstrap-dark .select2-container--default .select2-results__option[aria-selected="true"] {
        background: var(--sd-surface-2) !important;
    }

    body.bootstrap-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background: var(--primary-color) !important;
        color: #fff !important;
    }

    /* ---------- buttons / tables / tabs / tooltips ---------- */
 

    body.bootstrap-dark .table {
        color: var(--sd-text) !important;
    }

        body.bootstrap-dark .table th,
        body.bootstrap-dark .table td,
        body.bootstrap-dark .table thead th {
            border-color: var(--sd-border) !important;
        }

    body.bootstrap-dark .table-striped tbody tr:nth-of-type(odd) {
        background: rgba(255,255,255,.04) !important;
    }

    body.bootstrap-dark .nav-tabs {
        border-color: var(--sd-border) !important;
    }

        body.bootstrap-dark .nav-tabs .nav-link {
            color: var(--sd-muted);
        }

            body.bootstrap-dark .nav-tabs .nav-link.active {
                background: var(--sd-surface) !important;
                border-color: var(--sd-border) var(--sd-border) var(--sd-surface) !important;
                color: #fff !important;
            }

    body.bootstrap-dark .tooltip-inner {
        background: #0f1216 !important;
        color: #fff !important;
        border: 1px solid var(--sd-border);
    }

    body.bootstrap-dark .bs-tooltip-top .arrow::before,
    body.bootstrap-dark .bs-tooltip-auto[x-placement^="top"] .arrow::before {
        border-top-color: #0f1216 !important;
    }

    body.bootstrap-dark .bs-tooltip-bottom .arrow::before,
    body.bootstrap-dark .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
        border-bottom-color: #0f1216 !important;
    }

 

    body.bootstrap-dark .ColorBox {
        border-color: var(--sd-border) !important;
    }

    body.bootstrap-dark .switch .slider {
        border-color: var(--sd-border);
    }

    body.bootstrap-dark .alert {
        border-color: var(--sd-border);
    }

    body.bootstrap-dark ::-webkit-scrollbar-track {
        background: var(--sd-surface-2);
    }

    body.bootstrap-dark ::-webkit-scrollbar-thumb {
        background: #4b5360;
        border-radius: 6px;
    }

/* Smooth switch between modes */
body, body .card, body .form-control, body .card-header {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

    body.bootstrap-dark #brandingDefaultNote {
        background-color: #273244;
        border: 1px solid #3A4558;
        color: #F5F7FA;
    }

    body.bootstrap-dark .btn-AllyBlueColor {
        color: #fff;
        background: var(--secondary-color);
        border-color: var(--secondary-color);
    }

        body.bootstrap-dark .btn-AllyBlueColor:hover {
            color: #fff;
            background: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
        }
    body.bootstrap-dark .btn-cancel {
        color: #fff !important;
        background-color: var(--secondary-color) !important;
        border-color: var(--secondary-color) !important;
    }
    body.bootstrap-dark .btn-cancel:hover {
        color: #fff !important;
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }