:root {
    --color1: #efefef; /* gray */
    --color2: #64748b; /* slate gray */
    --color3: #6a4c93; /* soft purple */
    --color4: #2c6ba3; /* steel blue */
    --color5: #2a9d8f; /* teal */
    --color-white: white;
    --color-black: black;
    --color-dark-gray: #374151;
    --text-primary: #222;
    --text-secondary: #555;
    --text-dim: #666;
    --text-muted: #888;
    --border-muted: #aaa;
    --report-radius: 8px;
    --border-subtle: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 4px 12px var(--border-subtle);
    --shadow-soft: 0 2px 8px var(--border-subtle);
    --font-size-small: 0.8rem;
}

/* body is declared implicitly as a part of the Dash rendering */
body {
    background-color: var(--color-white);
}

.dashboard-body {
    background-color: var(--color-white) !important;
    margin-top: 0.5rem;
}

[id$="-body"] > p.text-muted {
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    background-color: var(--color1);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 10;
    font-style: italic;
}

a:link:not(.btn),
a:visited:not(.btn),
a:active:not(.btn) {
    color: var(--color3);
    text-decoration: none;
}

a:not(.btn):hover {
    text-decoration: underline;
}

.btn {
    background-color: var(--color3);
    border: 2px solid transparent;
    color: var(--color-white);
    text-decoration: none;
}

.btn:hover {
    background-color: var(--color3);
    border: 2px solid var(--color-white);
    text-decoration: none;
}

.bg-c1 {
    background-color: var(--color1);
}

.bg-c2 {
    background-color: var(--color2);
}

.bg-c3 {
    background-color: var(--color3);
}

/* Landing page */
#landing-page {
    padding-bottom: 2rem;
}

#landing-page-banner {
    background-color: var(--color1);
    color: var(--color3);
    padding: 1.25rem 1rem;
    text-align: left;
    margin-bottom: 1rem;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    position: relative;
}

#landing-page-user,
#dashboard-header-user {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    color: var(--text-dim);
}

#landing-page-user a,
#dashboard-header-user a {
    color: var(--text-muted) !important;
    font-size: var(--font-size-small);
}

#landing-page-banner h1,
#landing-page-banner span {
    font-size: 2.75rem;
    font-weight: 500;
    font-family: var(--bs-heading-font-family, var(--bs-font-sans-serif));
    line-height: 1.2;
}

.landing-page-section {
    margin: 1.5rem 1rem !important;
}

.landing-page-section h3 {
    color: black;
    font-size: var(--font-size-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--color1);
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
}

.landing-page-section ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.landing-page-section li a {
    display: inline-block;
    padding: 0.35rem 1rem;
    background-color: var(--color-white);
    border: 1px solid var(--color3);
    border-radius: 50px;
    color: var(--color3);
    font-size: 0.9rem;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.landing-page-section li a:hover {
    background-color: rgba(106, 76, 147, 0.08);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
}

.landing-page-section:last-of-type {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color1);
    font-size: var(--font-size-small);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.landing-page-section:last-of-type h3 {
    display: none;
}

#landing-page .landing-page-section:last-of-type a {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border: 1px solid var(--border-muted);
    border-radius: 50px;
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: background-color 0.15s ease;
}

#landing-page .landing-page-section:last-of-type a:hover {
    background-color: var(--color1);
    text-decoration: none;
}


/* Dashboards */
.dashboard {
    margin: 0 !important;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dash-tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    margin-top: 0 !important;
}

.tab-content {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

.dashboard-header a img {
    transition: opacity 0.15s ease;
}

.dashboard-header a:hover img {
    opacity: 0.7;
}

.dashboard-header {
    margin-bottom: 0 !important;
    padding-top: 1.5rem !important;
    padding-left: 1rem !important;
    padding-bottom: 0 !important;
    border-top: 1px solid var(--border-light) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.dashboard-header p {
    margin-bottom: 0 !important;
}


.dashboard-title {
    color: var(--color3);
    display: inline;
    vertical-align: middle;
}

.loading-component {
    align-self: start;
    margin-top: 20%;
}

.tab-container {
    background-color: var(--color1);
    border-bottom: 1px solid var(--border-light);
    display: flex !important;
    justify-content: flex-start !important;
}

.dashboard-tab {
    background-color: transparent !important;
    color: #666 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.15s ease, background-color 0.15s ease;
    flex: none !important;
    width: auto !important;
}

.dashboard-tab:not(.dashboard-tab--selected):hover {
    background-color: rgba(0, 0, 0, 0.06) !important;
    color: var(--text-primary) !important;
    border-radius: 6px 6px 0 0;
}

.dashboard-tab--selected {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--color3) !important;
    color: var(--text-primary) !important;
    font-weight: bold !important;
}

.dashboard-row.bg-c2 {
    background-color: var(--color1) !important;
    border-radius: var(--report-radius) !important;
    border: 1px solid var(--border-strong);
}

.filter-section {
    width: 22em;
    background-color: transparent !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--border-subtle);
    margin: 0 !important;
    padding: 1rem;
}

.filter-box {
    background-color: transparent !important;
    border-radius: 0 !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
}

.filter-section .dashboard-button {
    display: block;
    margin: 0.75rem 0 0 0 !important;
    width: 100%;
}

.filter-box > label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0.25rem !important;
}

.data-section h5 {
    color: var(--color-dark-gray);
}

.dashboard-section-title {
    color: var(--color-dark-gray);
    padding-top: 2rem;
    padding-bottom: 0.5rem;
    font-weight: 700 !important;
}

.half-row {
    height: 218px;
}

.full-row {
    height: 450px;
}

.one-and-a-half-row {
    height: 675px;
}

.half-row .dash-graph,
.full-row .dash-graph,
.one-and-a-half-row .dash-graph {
    height: 100%;
}

.radio-buttons-horizontal input {
    margin-right: 3px;
}

.radio-buttons-horizontal label {
    margin-right: 20px;
}

.graph,
.alert-box {
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--report-radius) !important;
    transition: box-shadow 0.15s ease;
}

.graph:hover,
.alert-box:hover {
    box-shadow: var(--shadow-hover);
}


.graph-with-top-filter,
.graph-with-bottom-filter {
    border: 1px solid var(--border-strong);
    border-radius: var(--report-radius);
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.graph-with-top-filter:hover,
.graph-with-bottom-filter:hover {
    box-shadow: var(--shadow-hover);
}

.graph-with-top-filter .dash-graph {
    background-color: var(--color-white);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.graph-with-top-filter .filter-for-graph-horizontal-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.graph-with-bottom-filter .dash-graph {
    background-color: var(--color-white);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.graph-with-bottom-filter .filter-for-graph-horizontal-bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ag-theme-quartz {
    --ag-header-background-color: var(--color-dark-gray) !important;
    --ag-header-foreground-color: var(--color-white)  !important;
    --ag-font-family: system-ui, -apple-system, sans-serif !important;
    --ag-font-size: 16px !important;
    --ag-header-column-resize-handle-color: var(--color-white) !important;
    --ag-checkbox-background-color: var(--color-white) !important;
    --ag-checkbox-unchecked-color: var(--color3) !important;
    --ag-checkbox-indeterminate-color: black !important;
    --ag-borders: none !important;
    --ag-tooltip-background-color: var(--color-white) !important;
    border-radius: var(--report-radius);
    overflow: hidden;
}

.ag-theme-quartz .ag-header-row {
    background-color: var(--color-dark-gray);
    color: var(--color-white);
}

.ag-theme-quartz .ag-header-cell-label {
    font-weight: bold !important;
}

.ag-theme-quartz .ag-icon-filter,
.ag-theme-quartz .ag-icon-asc,
.ag-theme-quartz .ag-icon-desc {
    color: var(--color-white) !important;
}

.ag-theme-quartz .ag-text-field-input, .ag-theme-quartz .ag-number-field-input {
    color: black !important;
}

.ag-theme-quartz .ag-row:hover {
    background-color: rgba(0, 103, 180, 0.1) !important;
}