:root {
    --buildscope-page-bg: #ffffff;
    --buildscope-surface-bg: #ffffff;
    --buildscope-surface-muted-bg: #f8f9fa;
    --buildscope-text: #212529;
    --buildscope-muted: #6c757d;
    --buildscope-border: #dee2e6;
    --buildscope-input-bg: #ffffff;
    --buildscope-input-text: #212529;
}

html.buildscope-dark {
    --buildscope-page-bg: #0f172a;
    --buildscope-surface-bg: #111827;
    --buildscope-surface-muted-bg: #1f2937;
    --buildscope-text: #e5e7eb;
    --buildscope-muted: #9ca3af;
    --buildscope-border: #374151;
    --buildscope-input-bg: #0f172a;
    --buildscope-input-text: #e5e7eb;
    --buildscope-lt-grey: #1f2937;
    --bs-body-bg: var(--buildscope-page-bg);
    --bs-body-color: var(--buildscope-text);
    --bs-border-color: var(--buildscope-border);
}

    html.buildscope-dark,
    html.buildscope-dark body,
    body.buildscope-dark {
        background-color: var(--buildscope-page-bg) !important;
        color: var(--buildscope-text) !important;
    }

        html.buildscope-dark .page,
        html.buildscope-dark main,
        html.buildscope-dark .top-row,
        html.buildscope-dark article,
        html.buildscope-dark .content,
        html.buildscope-dark .container,
        html.buildscope-dark .container-fluid,
        html.buildscope-dark .row,
        html.buildscope-dark .col,
        html.buildscope-dark .col-auto,
        html.buildscope-dark .col-12,
        html.buildscope-dark .col-lg-4,
        html.buildscope-dark .col-lg-6,
        html.buildscope-dark .col-lg-8,
        html.buildscope-dark .col-xl-3,
        html.buildscope-dark .col-xl-4,
        html.buildscope-dark .col-xl-8 {
            background-color: var(--buildscope-page-bg) !important;
            color: var(--buildscope-text) !important;
        }

        html.buildscope-dark .card,
        html.buildscope-dark .card-body,
        html.buildscope-dark .card-header,
        html.buildscope-dark .card-footer,
        html.buildscope-dark .auth-card,
        html.buildscope-dark .modal-card-custom,
        html.buildscope-dark .metric-card,
        html.buildscope-dark .theme-toggle-card {
            background-color: var(--buildscope-surface-bg) !important;
            color: var(--buildscope-text) !important;
            border-color: var(--buildscope-border) !important;
        }

        html.buildscope-dark .bg-white {
            background-color: var(--buildscope-surface-bg) !important;
            color: var(--buildscope-text) !important;
        }

        html.buildscope-dark .bg-light,
        html.buildscope-dark .table-light {
            background-color: var(--buildscope-surface-muted-bg) !important;
            color: var(--buildscope-text) !important;
        }

        html.buildscope-dark .text-muted,
        html.buildscope-dark small,
        html.buildscope-dark small.text-muted,
        html.buildscope-dark p.text-muted {
            color: var(--buildscope-muted) !important;
        }

        html.buildscope-dark h1,
        html.buildscope-dark h2,
        html.buildscope-dark h3,
        html.buildscope-dark h4,
        html.buildscope-dark h5,
        html.buildscope-dark h6,
        html.buildscope-dark p,
        html.buildscope-dark span,
        html.buildscope-dark div,
        html.buildscope-dark td,
        html.buildscope-dark th,
        html.buildscope-dark label {
            color: inherit;
        }

        html.buildscope-dark .form-control,
        html.buildscope-dark .form-select,
        html.buildscope-dark textarea,
        html.buildscope-dark input,
        html.buildscope-dark select {
            background-color: var(--buildscope-input-bg) !important;
            color: var(--buildscope-input-text) !important;
            border-color: var(--buildscope-border) !important;
        }

            html.buildscope-dark .form-control::placeholder,
            html.buildscope-dark textarea::placeholder,
            html.buildscope-dark input::placeholder {
                color: var(--buildscope-muted) !important;
            }

        html.buildscope-dark .table {
            --bs-table-bg: var(--buildscope-surface-bg);
            --bs-table-color: var(--buildscope-text);
            --bs-table-border-color: var(--buildscope-border);
            --bs-table-hover-bg: #1f2937;
            --bs-table-hover-color: var(--buildscope-text);
            background-color: var(--buildscope-surface-bg) !important;
            color: var(--buildscope-text) !important;
            border-color: var(--buildscope-border) !important;
        }

            html.buildscope-dark .table > :not(caption) > * > * {
                background-color: var(--buildscope-surface-bg) !important;
                color: var(--buildscope-text) !important;
                border-color: var(--buildscope-border) !important;
            }

        html.buildscope-dark thead,
        html.buildscope-dark thead tr,
        html.buildscope-dark thead th,
        html.buildscope-dark .table-light th {
            background-color: var(--buildscope-surface-muted-bg) !important;
            color: var(--buildscope-text) !important;
            border-color: var(--buildscope-border) !important;
        }

        html.buildscope-dark .list-group-item {
            background-color: var(--buildscope-surface-bg) !important;
            color: var(--buildscope-text) !important;
            border-color: var(--buildscope-border) !important;
        }

        html.buildscope-dark .border,
        html.buildscope-dark .border-top,
        html.buildscope-dark .border-bottom,
        html.buildscope-dark .border-start,
        html.buildscope-dark .border-end {
            border-color: var(--buildscope-border) !important;
        }

        html.buildscope-dark .page-link {
            background-color: var(--buildscope-surface-bg) !important;
            color: var(--buildscope-blue) !important;
            border-color: var(--buildscope-border) !important;
        }

        html.buildscope-dark .page-item.active .page-link {
            background-color: var(--buildscope-blue) !important;
            border-color: var(--buildscope-blue) !important;
            color: #ffffff !important;
        }

        html.buildscope-dark .page-item.disabled .page-link {
            background-color: var(--buildscope-surface-muted-bg) !important;
            color: var(--buildscope-muted) !important;
        }

        html.buildscope-dark .buildscope-outline-btn-grey {
            color: var(--buildscope-text) !important;
            background-color: transparent !important;
            border-color: var(--buildscope-border) !important;
        }

            html.buildscope-dark .buildscope-outline-btn-grey:hover {
                color: #ffffff !important;
                background-color: var(--buildscope-lt-grey) !important;
                border-color: var(--buildscope-lt-grey) !important;
            }

        html.buildscope-dark .buildscope-outline-btn-blue {
            background-color: transparent !important;
        }

        html.buildscope-dark .sidebar,
        html.buildscope-dark .nav-scrollable.buildscope-nav {
            background-color: var(--buildscope-lt-grey) !important;
        }

        html.buildscope-dark .nav-link {
            color: var(--buildscope-text) !important;
        }

            html.buildscope-dark .nav-link.active {
                background-color: #374151 !important;
                color: #ffffff !important;
            }

        html.buildscope-dark .license-banner-active {
            background: rgba(25, 135, 84, 0.16) !important;
            border-color: rgba(25, 135, 84, 0.35) !important;
        }

        html.buildscope-dark .license-banner-warning {
            background: rgba(255, 193, 7, 0.16) !important;
            border-color: rgba(255, 193, 7, 0.35) !important;
        }