/* Dark Mode Auto Styling */
@media (prefers-color-scheme: dark) {

    :root {
        --background: #111;
        --background-secondary: #1a1a1a;
        --surface: #222;
        --border-color: #333;
        --text-color: #e6e6e6;
        --text-muted: #aaaaaa;
        --link-color: #4da3ff;
        --link-hover: #82c1ff;

        --primary: #0d6efd;
        --secondary: #6c757d;
        --success: #198754;
        --info: #0dcaf0;
        --warning: #ffc107;
        --danger: #dc3545;
        --light: #f8f9fa;
        --dark: #000;
    }

    body {
        background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	body > * {
        background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.entity-header-container {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-tabstrip-content, .k-tabstrip>.k-content {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	dynamic-field label:not(.custom-control-label) {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.form-control {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-panelbar {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	dynamic-field .form-control {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-editor {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-toolbar-solid {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-link, .k-link:hover {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-pager {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-table, .k-data-table {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-grid .k-alt {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-grid {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	dynamic-field input[readonly] {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-input-solid {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.breadcrumb {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.resolve-breadcrumb-text {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-button {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.resolve-card-list, .resolve-card-container, .resolve-card {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-input-inner {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-editor.k-readonly .k-editor-content {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	element.style {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-editor-content {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	resolve-mainbody {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
	}
	.search-preview-panel {	
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-window {	
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	table {	
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.modal-content {	
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.resolve-card-list, .resolve-card-container, .resolve-card-header {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-table-thead, .k-table-header, .k-table-group-sticky-header, .k-table-tfoot, .k-table-footer, .k-table-group-row {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-grid .k-grid-toolbar button {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	ul.top-menu {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-grid {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
 	.panel.resolve-panel .panel-heading {
		background-color: #222 !important;
        color: var(--text-color) !important;
    }

	.extra-spacing-version-close, .extra-spacing-version-faar {
		color: var(--text-color) !important;
	}
	.panel-default>.panel-heading {
		border-color: #222;
	}
	
	.panel.resolve-panel .panel-footer {
		border-color: #222;
	}

	.k-chart, .k-sparkline, .k-stockchart {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	.k-chart-surface {
		background-color: var(--background) !important;
        color: var(--text-color) !important;
    }
	
    a {
        color: var(--link-color);
    }
    a:hover {
        color: var(--link-hover);
    }

    /* Cards / Panels */
    .card,
    .panel,
    .container,
    .content,
    .table {
        background-color: var(--surface) !important;
        color: var(--text-color);
        border-color: var(--border-color) !important;
    }

    /* Buttons */
    .btn {
        border-color: var(--border-color);
    }

    .btn-primary {
        background-color: #0b5ed7;
        border-color: #0a58ca;
    }

    .btn-secondary {
        background-color: #444;
        border-color: #555;
    }

    /* Form Elements */
    input,
    select,
    textarea {
        background-color: #1e1e1e;
        color: var(--text-color);
        border: 1px solid var(--border-color);
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--text-muted);
    }

    /* Tables */
    table {
        color: var(--text-color);
    }

    table thead {
        background-color: #1e1e1e;
    }

    table tbody tr:nth-child(odd) {
        background-color: #171717;
    }

    table tbody tr:hover {
        background-color: #222;
    }

    /* Nav / Header / Footer */
    nav,
    header,
    footer {
        background-color: #000 !important;
        color: var(--text-color);
        border-bottom: 1px solid var(--border-color);
    }
}