:root {
    --app-background: rgb(149, 204, 241);
    
    --default-font-color: #454444;

    --box-background-color: rgba(244, 246, 248, 0.82);
    --box-border-color: rgb(226, 232, 240);

    --hr-background-color: rgb(181, 186, 196);

    --chart-tick: rgba(0, 0, 0, 0.6);
    --chart-grid: rgba(0, 0, 0, 0.1);
    
    --chart-tooltip-background-color: #f5f7fa;
    --chart-tooltip-border-color: #cbd5e1;

    --range-picker-background-color: rgba(244, 246, 248, 0.70);
    --range-picker-background-color-selected: rgba(183, 196, 209, 0.15);
    --range-picker-border-color: rgba(0, 0, 0, 0.15);
    --range-picker-color: rgba(0, 0, 0, 0.65);
    --range-picker-color-selected: rgba(0, 0, 0, 0.95);
    --range-picker-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);

    --navbar-background-color: #4a93e7;
    --navbar-item-color: #000000;
    --navbar-item-backbround-color-hover: #1832b8;
    --navbar-item-color-hover: #cfbdbd;
    --navbar-item-background-color-active: #577ef3;
    --navbar-item-color-active: #2e1a1a;
    --navbar-separator-background-color: rgba(0, 0, 0, 0.5);
    --navbar-dropdown-background-color: #3d7fcf;
    --navbar-dropdown-box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    --navbar-dropdown-item-color: #000000;
    --navbar-divider-background-color: rgba(0, 0, 0, 0.5);

    --slider-color: #2f2c2cae;
    --slider-background-color-checked: #48c78e;
    --slider-background-color-unchecked: rgba(244, 246, 248, 0.634);

    --tabulator-menu-background-color: #eae8e8;
    --tabulator-menu-background-color-hover: #b7b4b4;

    --dashboard-matrix-background-color: rgba(0, 0, 0, 0.03);
    --dashboard-matrix-gap: 0.25rem;
    --dashboard-matrix-min-height-header: 44px;
    --dashboard-matrix-min-height-cell: 72px;
    --dashboard-matrix-radius: 0.75rem;

    --dashboard-matrix-border: 1px solid rgba(0, 0, 0, 0.08);
    --dashboard-matrix-border-hover: rgba(0, 0, 0, 0.16);
    --dashboard-matrix-shadow-hover: 0 6px 18px rgba(255, 255, 255, 0.12);

    --dashboard-matrix-text-header: #454444;
    --dashboard-matrix-text-muted: #626262;
    --dashboard-matrix-text-date: #7a7a7a;

    --dashboard-matrix-good: #48c78e;
    --dashboard-matrix-bad: #f14668;

    --dashboard-matrix-font-header: 0.85rem;
    --dashboard-matrix-font-date: 0.65rem;
    --dashboard-matrix-font-value: 1.05rem;
    --dashboard-matrix-font-subtitle: 0.78rem;

    --dashboard-matrix-header-letter-spacing: 0.04em;
    --dashboard-matrix-header-title-letter-spacing: 0.05em;
    --dashboard-matrix-date-letter-spacing: 0.03em;

    --dashboard-matrix-unknown: #7a7a7a;
    --dashboard-matrix-medium: #3e8ed0;
    --dashboard-matrix-long: #f5a524;
    --dashboard-matrix-total: #aaaaaa;

    --snapshot-note-box-border-color: rgba(128, 128, 128, 0.25);
    --snapshot-note-background-color: rgba(0, 0, 0, 0.02);
    --snapshot-note-label-color: #7a7a7a;
    --snapshot-note-box-border-color: rgba(128, 128, 128, 0.4);
}

@media (prefers-color-scheme: dark) {
    :root {
        --app-background: rgb(0, 0, 0);

        --default-font-color: #a0a0a0;

        --box-background-color: rgb(17, 24, 39);
        --box-border-color: rgb(31, 41, 55);

        --hr-background-color: rgba(31, 34, 41, 1);

        --chart-tick: rgba(255, 255, 255, 0.65);
        --chart-grid: rgba(255, 255, 255, 0.08);

        --chart-tooltip-background-color: rgb(17, 24, 39);
        --chart-tooltip-border-color: #cbd5e1;

        --range-picker-background-color: rgba(255, 255, 255, 0.06);
        --range-picker-background-color-selected: rgba(255, 255, 255, 0.18);
        --range-picker-border-color: rgba(0, 0, 0, 0.875);
        --range-picker-color: rgba(255, 255, 255, 0.65);
        --range-picker-color-selected: rgba(255, 255, 255, 0.95);
        --range-picker-box-shadow: 0 0 0 2px rgba(72, 199, 116, 0.25);       

        --slider-color: #f5f5f5;
        --slider-background-color-unchecked: #3a3a3a;
        
        --dashboard-matrix-background-color: rgba(255, 255, 255, 0.03);
        --dashboard-matrix-border: 1px solid rgba(255, 255, 255, 0.08);
        --dashboard-matrix-border-hover: rgba(255, 255, 255, 0.16);
        --dashboard-matrix-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.12);

        --dashboard-matrix-text-header: #a0a0a0;
        --dashboard-matrix-text-muted: #9f9f9f;

        --dashboard-matrix-flat: #b5b5b5;
    }
}

body {
    min-height: 100vh;
    background-color: var(--app-background);
}

.content {
    background-color: var(--app-background);
}

.box {
    background-color: var(--box-background-color);
    border: 1px solid var(--box-border-color);
}

hr {
    background-color: var(--hr-background-color);
}

/* Chart Range Selection Buttons */
.chart-range.has-addons .button {
    background-color: var(--range-picker-background-color);
    border-color: var(--range-picker-border-color);
    border-width: 1px;
    color: var(--range-picker-color);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.chart-range .button.is-selected {
    background-color: var(--range-picker-background-color-selected);
    border-color: var(--range-picker-border-color-selected);
    color: var(--range-picker-color-selected);
    box-shadow: var(--range-picker-box-shadow);
    position: relative;
    z-index: 3;
}

/* Navbar */

.navbar {
    background-color: var(--navbar-background-color) !important;
}

.navbar-item,
.navbar-link {
    color: var(--navbar-item-color) !important;
}

.navbar-item:hover,
.navbar-link:hover {
    background-color: var(--navbar-item-backbround-color-hover);
    color: var(--navbar-item-color-hover) !important;
}

.navbar-item.has-dropdown:hover .navbar-link {
    background-color: var(--navbar-item-backbround-color-hover);
    color: var(--navbar-item-color-hover) !important;
}

.navbar-link.is-active,
.navbar-item.is-active {
    background-color: var(--navbar-item-background-color-active);
    color: var(--navbar-item-color-active) !important;
    font-weight: bold;
}

.nav-separator {
    align-self: stretch;
    width: 1px;
    background-color: var(--navbar-separator-background-color);
    margin: 0 0.75rem;
}

.navbar-dropdown {
    background-color: var(--navbar-dropdown-background-color);
    border-radius: 0 0 12px 12px;
    border-top: none;
    box-shadow: var(--navbar-dropdown-box-shadow);
}

.navbar-dropdown .navbar-item {
    background-color: var(--navbar-dropdown-background-color) !important;
    color: var(--navbar-dropdown-item-color) !important;
}

.navbar-dropdown .navbar-item:hover,
.navbar-dropdown a.navbar-item:hover {
    background-color: var(--navbar-item-backbround-color-hover);
    color: var(--navbar-item-color-hover) !important;
}

.navbar-divider {
    background-color: var(--navbar-divider-background-color);
}

/* Tabulator */

.tabulator-cell {
    font-size: 0.9rem;
}

.tabulator-menu {
    background-color: var(--tabulator-menu-background-color) !important;
    font-size: 0.9rem !important;
}

.tabulator-menu-item:hover {
    background-color: var(--tabulator-menu-background-color-hover) !important;
}

.hidden {
    display: none;
}

.footer {
    padding: 1rem; /* Adjust padding */
}