:root {
    --primary-text-color: 0, 0, 0;
    --header-text-color: 0, 0, 0;
    --sidebar-background-color: 255, 255, 255;
    --sidebar-text-color: 0, 0, 0;
    --sidebar-hover-background-color: 14, 187, 179;
    --sidebar-active-background-color: 14, 187, 179;
    --accent-color: 14, 187, 179;
    --tertiary-color: 14, 187, 179;
    --secondary-background-color: 250, 250, 253;
    --tertiary-background-color: 235, 235, 240;
    --accent-text-color: 255, 255, 255;
    --filter-row-background-color: 248, 249, 250;
    --filter-row-border-color: 222, 226, 230;
    --summary-row-background-color: 0, 0, 0;
    --summary-row-text-color: 255, 255, 255;
    --summary-row-border-color: 0, 0, 0;

    /* Semantic colors for consistent theming */
    --surface-color: 255, 255, 255;
    --border-color: 222, 226, 230;
    --muted-text-color: 108, 117, 125;
    --input-background-color: 255, 255, 255;
    --success-color: 200, 255, 200;
    --warning-color: 255, 226, 200;
    --error-color: 255, 200, 200;
}

/* Color Utility Classes */
.color-primary {
    color: rgba(var(--accent-color), 1) !important;
    accent-color: rgba(var(--accent-color), 1) !important;
}

.background-color-primary {
    background-color: rgba(var(--accent-color), 1);
}

.background-color-primary-transparent {
    background-color: rgba(var(--accent-color), 0.05);
}

.background-color-secondary {
    background-color: rgb(var(--secondary-background-color));
}

.background-color-secondary-transparent {
    background-color: rgba(var(--secondary-background-color), 0.8);
}

.background-color-tertiary {
    background-color: rgb(var(--tertiary-background-color));
}

.accordion-button.collapsed {
    background-color: rgb(var(--tertiary-background-color));
}

.border-color-primary {
    border-color: rgba(var(--accent-color), 1);
}

.border-color-secondary {
    border: 1px solid rgba(var(--primary-text-color), 0.175);
}

/* Semantic Color Utility Classes */
.bg-surface {
    background-color: rgb(var(--surface-color));
}

.border-default {
    border-color: rgb(var(--border-color));
}

.border-subtle {
    border-color: rgba(var(--border-color), 0.5);
}

.text-muted-theme {
    color: rgb(var(--muted-text-color));
}

.input-background {
    background-color: rgb(var(--input-background-color));
}

.bg-success-theme {
    background-color: rgb(var(--success-color));
}

.bg-warning-theme {
    background-color: rgb(var(--warning-color));
}

.bg-error-theme {
    background-color: rgb(var(--error-color));
}

/* Navbar/Header Styling */
.navbar .nav-item > a {
    color: rgba(var(--header-text-color), 0.8) !important;
}

.navbar .nav-item > a:hover {
    color: rgba(var(--header-text-color), 1) !important;
}

.navbar-override {
    background-color: rgba(var(--accent-text-color), 1);
    border-bottom: 1px solid rgba(var(--primary-text-color), 0.175);
}

.brand-header-text {
    color: rgba(var(--header-text-color), 1) !important;
}

/* Link Styling */
a {
    color: rgba(var(--accent-color), 0.8);
}

a:hover {
    color: rgba(var(--accent-color), 1);
}

/* Sidebar Styling */
.sidebar {
    background-color: rgba(var(--sidebar-background-color), 1);
    border-right: 1px solid rgba(var(--sidebar-text-color), 0.175);
}

.sidebar-button {
    color: rgba(var(--sidebar-text-color), 0.8);
}

.sidebar-button:hover {
    background-color: rgba(var(--sidebar-hover-background-color), 0.1);
}

.sidebar-button.active {
    border-right: 3px solid rgba(var(--tertiary-color), 1);
    background-color: rgba(var(--sidebar-active-background-color), 0.15);
}

.expanded .sidebar-button.active {
    border-left: 3px solid rgba(var(--tertiary-color), 1);
}

/* Dark mode: increase sidebar hover/active visibility */
[data-theme="dark"] .sidebar-button:hover {
    background-color: rgba(var(--sidebar-hover-background-color), 0.4);
}

[data-theme="dark"] .sidebar-button.active {
    background-color: rgba(var(--sidebar-active-background-color), 0.35);
}

.sidebar-child-menu {
    background-color: rgb(var(--accent-text-color));
    border: 1px solid rgba(var(--accent-color), 0.1);
}

/* Text Utilities */
.powered-by-text {
    color: rgba(var(--sidebar-text-color), 0.5);
}

/* Portal/Portlet Styling */
.portal-container {
    background-color: rgb(var(--tertiary-background-color));
}

.portlet {
    background-color: rgb(var(--secondary-background-color));
}

.portal-with-background .portlet {
    background-color: rgba(var(--secondary-background-color), 0.8) !important;
}

/* Button Styling */
.btn-fbk {
    color: rgba(var(--primary-text-color), 0.8);
}

.btn-fbk-primary {
    background-color: rgba(var(--accent-color), 1);
    border: 1px solid rgba(var(--accent-color), 1);
    color: rgba(var(--accent-text-color), 1);
}

.btn-fbk-primary:disabled {
    background-color: rgba(var(--accent-color), 0.9);
    border: 1px solid rgba(var(--primary-text-color), 0.175);
    color: rgba(var(--accent-text-color), 1);
}

.btn-fbk-primary:hover {
    color: rgba(var(--accent-text-color), 1);
}

.btn-fbk:hover:enabled {
    background-color: rgba(var(--accent-color), 0.2);
    border-color: rgba(var(--accent-color), 1);
}

.btn-fbk-primary:hover:enabled,
.btn-fbk-outline:hover:enabled {
    background-color: rgba(var(--accent-color), 0.2);
    border-color: rgba(var(--accent-color), 1);
    color: rgb(var(--primary-text-color));
}

.btn-fbk-outline {
    background-color: rgb(var(--surface-color));
    color: rgb(var(--primary-text-color));
}

.btn-fbk-outline,
.btn-fbk-outline:disabled,
.btn-fbk-primary:disabled {
    border: 1px solid rgba(var(--primary-text-color), 0.175);
}

.btn-fbk-outline.active {
    background-color: rgb(var(--surface-color));
    border-color: rgba(var(--accent-color), 1);
    color: rgba(var(--accent-color), 1);
}

/* Portal Select Buttons */
.portal-select-button {
    background-color: rgb(var(--surface-color));
}

.portal-select-button.with-background {
    background-color: rgba(var(--surface-color), 0.8);
}

.portal-select-button:hover,
.portal-select-button:hover .portal-select-icon {
    border-color: rgba(var(--tertiary-color), 1);
    background-color: rgb(var(--surface-color));
}

.portal-select-button:hover .portal-select-icon {
    color: rgba(var(--tertiary-color), 1);
}

/* Loader */
.loader {
    border: 2px solid rgba(var(--accent-color), 0.2);
    border-top: 2px solid rgba(var(--accent-color), 1);
}

/* Icons and Misc */
.portal-button-image-style {
    color: rgba(var(--tertiary-color), 1);
}

.squirrel-footer-row .squirrel-row {
    background-color: rgb(var(--summary-row-background-color)) !important;
    color: rgb(var(--summary-row-text-color)) !important;
}

.settings-icon {
    color: rgb(var(--accent-text-color)) !important;
}

.hamburger-icon {
    color: rgb(var(--header-text-color)) !important;
}

.map-sidebar-link,
.map-sidebar-label,
.map-sidebar-title {
    color: rgb(var(--accent-text-color)) !important;
}

/* Schema Accordion */
.schema-accordion-button {
    background-color: rgb(var(--secondary-background-color));
}

.schema-accordion-button:not(.collapsed) {
    background-color: rgb(var(--tertiary-background-color));
}

/* Bootstrap Accordion Overrides for Dark Mode */
.accordion {
    --bs-accordion-color: rgb(var(--primary-text-color));
    --bs-accordion-bg: rgb(var(--surface-color));
    --bs-accordion-border-color: rgb(var(--border-color));
    --bs-accordion-btn-color: rgb(var(--primary-text-color));
    --bs-accordion-btn-bg: rgb(var(--tertiary-background-color));
    --bs-accordion-active-color: rgb(var(--primary-text-color));
    --bs-accordion-active-bg: rgb(var(--tertiary-background-color));
}

.accordion-item {
    background-color: rgb(var(--surface-color));
    border-color: rgb(var(--border-color));
    color: rgb(var(--primary-text-color));
}

.accordion-button {
    color: rgb(var(--primary-text-color)) !important;
    background-color: rgb(var(--tertiary-background-color)) !important;
}

.accordion-button:not(.collapsed) {
    color: rgb(var(--primary-text-color)) !important;
    background-color: rgb(var(--tertiary-background-color)) !important;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 rgb(var(--border-color));
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25);
    border-color: rgba(var(--accent-color), 0.5);
}

.accordion-body {
    background-color: rgb(var(--surface-color));
    color: rgb(var(--primary-text-color));
}

/* Dark mode accordion icon inversion */
[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

/* Bootstrap Form Controls for Dark Mode */
.form-control {
    background-color: rgb(var(--input-background-color));
    color: rgb(var(--primary-text-color));
    border-color: rgb(var(--border-color));
}

.form-control:focus {
    background-color: rgb(var(--input-background-color));
    color: rgb(var(--primary-text-color));
    border-color: rgba(var(--accent-color), 0.5);
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: rgb(var(--tertiary-background-color));
    color: rgb(var(--muted-text-color));
}

.form-control::placeholder {
    color: rgb(var(--muted-text-color));
}

.form-select {
    background-color: rgb(var(--input-background-color));
    color: rgb(var(--primary-text-color));
    border-color: rgb(var(--border-color));
}

.form-select:focus {
    border-color: rgba(var(--accent-color), 0.5);
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25);
}

.form-check-input {
    background-color: rgb(var(--input-background-color, 255, 255, 255));
    border-color: rgb(var(--border-color, 206, 212, 218));
}

.form-check-input:checked {
    background-color: rgb(var(--accent-color));
    border-color: rgb(var(--accent-color));
}

/* Dark mode: use a darker background for unchecked checkboxes/radios */
[data-theme="dark"] .form-check-input:not(:checked) {
    background-color: rgb(var(--input-background-color, 61, 61, 61));
    border-color: rgb(var(--border-color, 64, 64, 64));
}

/* Style all checkboxes and radio buttons for dark mode (including non-Bootstrap ones) */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    accent-color: rgb(var(--accent-color, 14, 187, 179));
    background-color: rgb(var(--input-background-color, 61, 61, 61));
}

/* For browsers that support appearance customization */
[data-theme="dark"] input[type="checkbox"]:not(:checked),
[data-theme="dark"] input[type="radio"]:not(:checked) {
    filter: invert(0.85) hue-rotate(180deg);
}

/* Bootstrap Card Overrides */
.card {
    background-color: rgb(var(--surface-color));
    border-color: rgb(var(--border-color));
    color: rgb(var(--primary-text-color));
}

.card-header {
    background-color: rgb(var(--tertiary-background-color));
    border-bottom-color: rgb(var(--border-color));
}

.card-footer {
    background-color: rgb(var(--tertiary-background-color));
    border-top-color: rgb(var(--border-color));
}

/* Bootstrap Modal Overrides */
.modal-content {
    background-color: rgb(var(--surface-color));
    border-color: rgb(var(--border-color));
    color: rgb(var(--primary-text-color));
}

.modal-header {
    border-bottom-color: rgb(var(--border-color));
}

.modal-footer {
    border-top-color: rgb(var(--border-color));
}

/* Bootstrap Dropdown Overrides */
.dropdown-menu {
    background-color: rgb(var(--surface-color));
    border-color: rgb(var(--border-color));
    color: rgb(var(--primary-text-color));
}

.dropdown-item {
    color: rgb(var(--primary-text-color));
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgb(var(--tertiary-background-color));
    color: rgb(var(--primary-text-color));
}

/* Bootstrap Table Overrides */
.table {
    color: rgb(var(--primary-text-color));
    border-color: rgb(var(--border-color));
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: rgb(var(--border-color));
    color: rgb(var(--primary-text-color));
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(var(--tertiary-background-color), 0.5);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--accent-color), 0.1);
}

/* Bootstrap Alert Overrides */
.alert {
    color: rgb(var(--primary-text-color));
}

/* Text Utilities for Dark Mode */
.text-muted {
    color: rgb(var(--muted-text-color)) !important;
}

/* Border utilities */
.border {
    border-color: rgb(var(--border-color)) !important;
}

/* Body/Root background */
body {
    background-color: rgb(var(--tertiary-background-color));
    color: rgb(var(--primary-text-color));
}

/* Nav Link Active State */
a.nav-link.active {
    background-color: rgba(var(--primary-text-color), 0) !important;
    border-bottom: 1px solid rgb(var(--secondary-background-color)) !important;
    color: rgb(var(--primary-text-color)) !important;
}

/* Active tabs in portals with background images - use semi-transparent background to match portlets */
.portal-with-background a.nav-link.active {
    background-color: rgba(var(--secondary-background-color), 0.8) !important;
    border-bottom: 1px solid rgba(var(--secondary-background-color), 0.8) !important;
    color: rgb(var(--primary-text-color)) !important;
}

/* Nav-tabs container border should also be semi-transparent with background images */
.portal-with-background .nav-tabs {
    border-bottom-color: rgba(var(--primary-text-color), 0.14) !important;
}

/* Bootstrap Nav-tabs Overrides for Dark Mode */
.nav-tabs {
    --bs-nav-tabs-link-active-color: rgb(var(--primary-text-color));
    --bs-nav-tabs-link-active-bg: rgb(var(--surface-color));
    --bs-nav-tabs-link-active-border-color: rgb(var(--border-color)) rgb(var(--border-color)) rgb(var(--surface-color));
    border-bottom-color: rgb(var(--border-color));
}

.nav-tabs .nav-link {
    color: rgb(var(--primary-text-color));
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: rgb(var(--primary-text-color));
    border-color: rgb(var(--border-color)) rgb(var(--border-color)) transparent;
}

.nav-tabs .nav-link.active {
    color: rgb(var(--primary-text-color));
    background-color: rgb(var(--surface-color));
    border-color: rgb(var(--border-color)) rgb(var(--border-color)) rgb(var(--surface-color));
}

/* Themed Pill Variants - adapt to light/dark mode */
.pill-themed {
    font-size: 10px;
    background-color: rgba(var(--primary-text-color), 0.08);
    color: rgba(var(--primary-text-color), 0.7);
    border: 1px solid rgba(var(--primary-text-color), 0.15);
}

.pill-success {
    font-size: 10px;
    background-color: rgba(40, 167, 69, 0.15);
    color: rgb(40, 167, 69);
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.pill-info {
    font-size: 10px;
    background-color: rgba(23, 162, 184, 0.15);
    color: rgb(23, 162, 184);
    border: 1px solid rgba(23, 162, 184, 0.3);
}

.pill-primary {
    font-size: 10px;
    background-color: rgba(var(--accent-color), 0.15);
    color: rgba(var(--accent-color), 1);
    border: 1px solid rgba(var(--accent-color), 0.3);
}

.pill-warning {
    font-size: 10px;
    background-color: rgba(255, 193, 7, 0.15);
    color: rgb(180, 135, 0);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.pill-danger {
    font-size: 10px;
    background-color: rgba(220, 53, 69, 0.15);
    color: rgb(220, 53, 69);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.pill-purple {
    font-size: 10px;
    background-color: rgba(111, 66, 193, 0.15);
    color: rgb(111, 66, 193);
    border: 1px solid rgba(111, 66, 193, 0.3);
}

.pill-orange {
    font-size: 10px;
    background-color: rgba(253, 126, 20, 0.15);
    color: rgb(220, 110, 17);
    border: 1px solid rgba(253, 126, 20, 0.3);
}

.pill-slate {
    font-size: 10px;
    background-color: rgba(var(--primary-text-color), 0.1);
    color: rgba(var(--primary-text-color), 0.6);
    border: 1px solid rgba(var(--primary-text-color), 0.2);
}

/* Dark mode adjustments for warning pills (yellow needs special handling) */
[data-theme="dark"] .pill-warning {
    color: rgb(255, 210, 80);
}

/* Dark mode: lighter grid header/axis text */
[data-theme="dark"] .squirrel-header-row {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .squirrel-footer-row {
    color: rgba(255, 255, 255, 0.5);
}

/* Inline edit save/cancel button colors - use bold colors for visibility */
.squirrel-row-edit-save {
    color: rgb(40, 167, 69) !important;
}

.squirrel-row-edit-cancel {
    color: rgb(220, 53, 69) !important;
}

[data-theme="dark"] .squirrel-row-edit-save {
    color: rgb(72, 199, 101) !important;
}

[data-theme="dark"] .squirrel-row-edit-cancel {
    color: rgb(255, 99, 112) !important;
}

/* Dark mode: number input spinner buttons */
[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
    filter: invert(1);
}

/* Dark mode: SquirrelGrid row hover and banded rows */
[data-theme="dark"] .squirrel-grid {
    --squirrel-grid-alt-color: rgba(255, 255, 255, 0.025);
}

[data-theme="dark"] .squirrel-row:hover,
[data-theme="dark"] .squirrel-row:hover > .squirrel-sticky {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .squirrel-grid-nested-mod-1 {
    --squirrel-grid-alt-color: rgba(255, 255, 255, 0.015);
}