:root {
    --primary-bg: #111217;
    --secondary-bg: #181B1F;
    --tertiary-bg: #202429;
    --hover-bg: #22272B !important;
    --active-bg: #262C30;

    --primary-border: #2E3136;
    --focus-border: #4F545C;
    
    --primary-text: #CCCCDC;
    --secondary-text: #D5D5E6;
    --tertiary-text: #9496A0;
    --hover-text: #D7D7E8;
    --focus-text: #FFFFFF;

    --success-text: #45D984;
    --error-text: #F2495C;
    --error-bg: #5E2727;
    --error-border: #2E2323;
    --error-hover-bg: #803535;
    --error-active-bg: #451D1D;

    --link-color: #6CB6FF;       
    --link-hover-color: #8ABFFF; 
    --link-active-color: #4F94DB;
    --link-visited-color: #BE95FF;

    --font-primary: 'TTNorms', sans-serif;
    --font-secondary: 'Inter', sans-serif;
}

body {
    background-color: var(--primary-bg);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-primary);
    color: var(--primary-text);
}

*, *::before, *::after {
    box-sizing: inherit;
}

@font-face {
    font-family: 'TTNorms'; 
    src: url('TTNorms-Medium.otf');
}

@font-face {
    font-family: 'Inter'; 
    src: url('Inter-VariableFont_opsz,wght.ttf');
}

a {
    color: var(--link-color);
    text-decoration: underline;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

a:active {
    color: var(--link-active-color);
}

h1 {
    font-size: 5.5vmin;
    font-family: var(--font-primary);
}

.pages {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 5px;
}

.app-container {
    width: 90%; 
    margin: 2rem auto;
    display: grid;
    grid-template-rows: auto 1fr; 
    flex-grow: 1; 
}

.page-content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0; 
}

.page-content-wrapper:has(> .login_sections) {
    justify-content: center;
    align-items: center;
    position: relative;
}

.graph-content-wrapper {
    flex-grow: 1; 
    min-height: 400px; 
    display: flex;
    flex-direction: column;
    min-width: 0; 
}

.row, .page-layout-row, .settings_row {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.row, .settings_row {
    justify-content: space-between;
    align-items: stretch; 
}

.settings_row {
    height: 100%;
    align-items:flex-start;
}

.page-layout-row {
    align-items: stretch;
}

.sections, .login_sections {
    background-color: var(--secondary-bg);
    border: 2px solid var(--primary-border);
    border-radius: 10px;
    padding: 1.5em;
    width: 100%; 
    font-size: clamp(0.9rem, 1.8vmin, 1.5rem);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.row > .sections, .page-layout-row > .sections {
    flex: 1;
    min-width: 0;
}

.login_sections {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 35vw;
    min-width: 25vw;
    max-width: 40vw;
    justify-content: center;
    align-items: center; 
}

.page_heading {
    font-size: clamp(1.75rem, 4vmin, 3.5rem);
    text-align: center;
    vertical-align: middle;
    color: var(--secondary-text);
}

.header_text {
    font-size: clamp(1.1rem, calc(1rem + 1.5vmin), 2.7rem); 
    font-family: var(--font-primary);
}

.log_error, .form-error {
    font-family: var(--font-secondary);
    font-size: clamp(0.7rem, 1.2vmin, 1rem);
    font-weight: 600;
    color: var(--error-text);
}

.form-error, .form-success {
    min-height: 20px;
    margin-bottom: 10px;
}

.form-success {
    font-family: var(--font-secondary);
    font-size: clamp(0.7rem, 1.2vmin, 1rem);
    font-weight: 600;
    color: var(--success-text);
}

#login-button, .form-button, .settings_button, .form-container .form-save-button, .form-container .form-delete-button {
    border-style: solid;
    border-radius: 5px;
    height: 1.9em;
    font-family: var(--font-secondary);
    transition-duration: 0.2s;
    cursor: pointer;
    border-width: 2px;
    margin: 0 5px;
    padding: 0 1.5em;
}

#login-button, .form-button, .settings_button, .form-container .form-save-button {
    background-color: var(--tertiary-bg);
    border-color: var(--primary-border);
    color: var(--primary-text);
    font-size: 0.9em;
}

#login-button:hover, .form-button:hover, .settings_button:hover, .form-container .form-save-button:hover {
    background-color: var(--hover-bg);
    color: var(--hover-text);
}

#login-button:active, .form-button:active, .settings_button:active, .form-container .form-save-button:active {
    background-color: var(--secondary-bg);
    color: var(--secondary-text);
}

.settings_button {
    display: block;
    height: 5vh;
    margin: 1vh;
    width: 87%;
    max-width: 10em;
    font-size: 2.2vmin;
    border-radius: 10px;
}

.form-button.secondary {
    background-color: var(--secondary-bg);
}
.form-button.secondary:hover {
    background-color: var(--tertiary-bg);
}
.form-button.secondary:active {
    background-color: var(--secondary-bg);
}

.form-container .form-save-button {
    font-family: var(--font-primary);
    font-weight: 500;
    border-radius: 8px;
    height: 40px;
    margin-top: 10px; 
}

.form-container .form-delete-button {
    background-color: var(--error-bg);
    border-color: var(--error-border);
    color: var(--primary-text);
    font-family: var(--font-primary);
    font-weight: 600;
    border-radius: 8px;
    height: 40px;
    margin-top: 10px; 
}

.form-container .form-delete-button:hover {
    background-color: var(--error-hover-bg);
    color: var(--hover-text);
}

.form-container .form-delete-button:active {
    background-color: var(--error-active-bg);
    color: var(--secondary-text);
}

#username-input, #password-input, .form-input, .form_input {
    box-sizing: content-box;
    height: 2.5vh;
    border-radius: 4px;
    font-family: var(--font-secondary);
    font-size: clamp(0.75rem, 2vmin, 1.1rem);
    background-color: var(--secondary-bg);
    border: 2px solid var(--primary-border);
    color: var(--primary-text);
    padding-left: 5px;
    outline: none;
    margin-bottom: 15px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#username-input:focus, #password-input:focus, .form-input:focus, .form_input:focus {
    background-color: var(--tertiary-bg);
    border-color: var(--focus-border);
    color: var(--primary-text);
}

#username-input, #password-input {
    width: 30vw;
    max-width: 20em;
    margin-bottom: 5px;
}

.form_input {
    width: 50vw;
    max-width: 30em;
    margin-bottom: 5px;
}

.form-container .form-input {
    width: 25vw;
    height: 2.2em;
    padding: 0 10px;
}

.custom-modal-content {
    background-color: var(--secondary-bg);
    border: 2px solid var(--primary-border);
    border-radius: 10px;
    color: var(--primary-text);
    font-family: var(--font-secondary);
}

.custom-modal-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2em;
}

.custom-modal-content .modal-header,
.custom-modal-content .modal-footer {
    border: none;
    background-color: transparent;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 20px;
}

._dash-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
}

._dash-loading::after {
    content: "CMS Analytics is loading...";
    font-family: var(--font-secondary);
    color: var(--secondary-text);
    font-size: clamp(1rem, 2vmin, 1.5rem);
}

.sections .dcc-graph {
    flex-grow: 1; 
}

.themed-graph-container {
    color: var(--primary-text) !important;
}

.themed-graph-container .g-gtitle,
.themed-graph-container .g-title {
    font-family: var(--font-primary) !important;
    font-size: clamp(1.5rem, 3vmin, 2rem) !important;
}

.g-xtitle text, 
.g-ytitle text,
.themed-graph-container .g-xtitle,
.themed-graph-container .g-ytitle {
    font-family: var(--font-secondary) !important;
    font-size: clamp(0.85rem, calc(0.8rem + 0.5vmin), 1.8rem) !important; 
}

.xtick text, 
.ytick text {
    font-family: var(--font-secondary) !important;
    font-size: clamp(0.65rem, calc(0.6rem + 0.5vmin), 1.2rem) !important;
}

.themed-graph-container .xtick text,
.themed-graph-container .ytick text {
    font-size: clamp(0.65rem, 1.5vmin, 1rem) !important;
}

.themed-graph-container .bartext {
    font-family: var(--font-secondary) !important;
    font-size: clamp(0.7rem, 1.4vmin, 0.9rem) !important;
}

.themed-graph-container .legendtext {
    font-family: var(--font-secondary) !important;
}

.n_text {
    font-family: var(--font-secondary) !important;
    font-size: clamp(0.75rem, calc(0.7rem + 1.3vmin), 3rem) !important;
}

.dash-table-container .column-header-name,
.dash-table-container .dash-header {
    font-family: var(--font-primary) !important;
    font-size:  clamp(0.7rem, 3.5vmin, 6rem) !important;
}

.dash-table-container .dash-cell {
    font-family: var(--font-secondary) !important;
    font-size: clamp(0.7rem, 2.7vmin, 4rem) !important;
    max-width: 20vw;
}

.themed-dropdown, #permission-groups {
    font-family: var(--font-secondary);
    font-size: clamp(0.75rem, 1.2vmin, 1.1rem);
}

.themed-dropdown .Select-control, #permission-groups .Select-control {
    background-color: var(--secondary-bg);
    border: 2px solid var(--primary-border);
    border-radius: 6px;
    height: 2.4em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.themed-dropdown .is-focused .Select-control, #permission-groups.is-focused .Select-control {
    background-color: var(--tertiary-bg);
    border-color: var(--focus-border);
    box-shadow: none; 
}

.themed-dropdown .Select-placeholder, #permission-groups .Select-placeholder {
    color: var(--tertiary-text);
    line-height: 2.2em;
}

.themed-dropdown .Select-value {
    background-color: #2E3136; 
    border-radius: 4px;
    border: 1px solid var(--focus-border); 
    color: var(--secondary-text) !important;
    line-height: 1.8em;
    font-size: clamp(1rem, 1.2vmin, 5vw) !important;
}

.themed-dropdown .Select-value-icon {
    border-right: 1px solid var(--focus-border);
    padding: 1px 5px 0 5px;
}

.themed-dropdown .Select-value-icon:hover {
    background-color: var(--error-hover-bg); 
    color: var(--focus-text);
}

.themed-dropdown .Select-value-label, #permission-groups .Select-value-label {
    color: var(--primary-text);
    line-height: 2.2em;
    font-size: clamp(1rem, 1.2vmin, 5vw) !important;
}

.themed-dropdown input, #permission-groups input {
    color: var(--primary-text);
}

.themed-dropdown .Select-menu-outer, #permission-groups .Select-menu-outer {
    background-color: var(--secondary-bg);
    border: 2px solid var(--primary-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.themed-dropdown .Select-menu-outer {
    border-top: none; 
    border-radius: 0 0 6px 6px;
    font-size: clamp(1rem, 1.2vmin, 5vw) !important;
}

.themed-dropdown.Select--single > .Select-control .Select-value {
    color: var(--primary-text) !important; /* Or your preferred text color */
    line-height: 2.2em;         /* Vertically align with placeholder */
    
    /* Remove styles meant for multi-select tags */
    background-color: transparent;
    border: none;
}

.themed-dropdown .VirtualizedSelectOption, #permission-groups .VirtualizedSelectOption {
    background-color: var(--secondary-bg);
    color: var(--primary-text);
}

.themed-dropdown .VirtualizedSelectFocusedOption, #permission-groups .VirtualizedSelectFocusedOption {
    background-color: var(--active-bg);
    color: var(--focus-text);
}

.themed-dropdown .Select-noresults, #permission-groups .Select-noresults {
    color: var(--tertiary-text);
    padding: 10px;
}

#permission-groups {
    width: 40vw;
    max-width: 80%;
}

#permission-groups .Select-control {
    min-height: 1.7em;
}

#permission-groups input {
    width: 30vw;
    text-align: center;
}


.page-controls {
    display: flex;
    justify-content: flex-start;  
    padding: 0.5rem 1rem 1.5rem 1rem; 
    gap: 20px; 
    flex-wrap: wrap; 
}

.selectable_list, .settings_form {
    flex: 0 0 200px;
    max-height: 62vh;
    overflow-y: auto;
    border-radius: 10px;
    border: 2px solid var(--primary-border);
    padding: 10px;
    background-color: var(--tertiary-bg);
    color: var(--primary-text);
}

.settings_form {
    flex: auto;
    min-width: 0;
}

.selectable_list, .settings_form{
    scrollbar-width: thin;
    scrollbar-color: var(--focus-border) transparent; 
}

.selectable_list::-webkit-scrollbar, .settings_form::-webkit-scrollbar{
    width: 10px;
}

.selectable_list::-webkit-scrollbar-track,
.settings_form::-webkit-scrollbar-track {
    background: transparent;
}

.selectable_list::-webkit-scrollbar-thumb,
.settings_form::-webkit-scrollbar-thumb{
    background-color: var(--focus-border);
    border-radius: 10px;  
    border: 2px solid var(--tertiary-bg); 
}

.selectable_list::-webkit-scrollbar-thumb:hover,
.settings_form::-webkit-scrollbar-thumb:hover {
    background-color: #6a707a;
}

.list-item {
    padding: 8px;
    margin: 1vh;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.15s ease-in-out;
    user-select: none;
}

.list-item:hover {
    background-color: var(--active-bg);
    color: var(--hover-text);
}

.list-item.selected {
    background-color: var(--secondary-bg);
    color: var(--secondary-text);
    font-weight: 550;
}

.form-container {
    padding: 15px; 
    font-family: var(--font-secondary);
    color: var(--primary-text);
}

.form-row {
    display: flex;
    flex-direction: row;
    gap: 20px; 
    flex-wrap: wrap;
}

.form-group {
    flex: 1; 
    display: flex;
    flex-direction: column;
    margin-bottom: 20px; 
    width: 100%;
}

.form-container label {
    margin-bottom: 8px;
    font-weight: 500;
    font-size: clamp(0.75rem, 1.2vmin, 0.9rem);
    text-align: left;
}


.themed-daterangepicker .DateRangePickerInput,
.themed-daterangepicker .DateRangePickerInput__withBorder {
    background-color: var(--secondary-bg);
    border: 2px solid var(--primary-border);
    border-radius: 6px;
    display: flex;
    transition: border-color 0.2s ease;
    width: 100%;
    align-items: start;
}

.themed-daterangepicker .DateRangePickerInput__focused {
    border-color: var(--focus-border);
}


/* --- 2. Inner Input Fields (Scoped to the theme class) ---
 * Makes the actual <input> elements transparent to blend in.
*/
.themed-daterangepicker .DateInput_input, .DateInput {
    font-family: var(--font-secondary);
    font-size: clamp(0.75rem, 2vmin, 1.5rem);
    color: var(--primary-text);
    background-color: var(--primary-bg);
    border: none;
    padding: 0 10px;
    height: 4vh;
    width: 100%;
    background: var(--primary-bg);
}

.themed-daterangepicker .DateInput_input::placeholder {
    color: var(--tertiary-text);
}

.themed-daterangepicker .DateInput_arrow svg {
    fill: var(--tertiary-text);
    height: 2.2em;
}


/* ==========================================================================
   --- Global Calendar Popup Styles ---
   NOTE: These are NOT prefixed with .themed-daterangepicker because the
         popup renders separately in the document body.
   ========================================================================== */

/* --- 3. Calendar Popup Container --- */
.DateRangePicker_picker {
    background-color: var(--tertiary-bg) !important;
    border: 2px solid var(--primary-border) !important;
    border-radius: 8px;
    top: 55px !important;
}

.DateRangePicker_picker::before,
.DateRangePicker_picker::after {
    display: none; /* Hides default pop-up arrow */
}


/* --- 4. Calendar Navigation & Header --- */
.CalendarMonth_caption, .CalendarMonthGrid, .CalendarMonth_table, .CalendarMonthGrid_month__horizontal, .CalendarMonth {
    color: var(--secondary-text) !important;
    font-family: var(--font-primary);
    font-weight: 500;
    background-color: var(--primary-bg);
    font-size: 1.5rem;
}

.DayPickerNavigation_button__default, .DayPicker {
    background: var(--tertiary-bg) !important;
    border: 1px solid var(--primary-border) !important;
    color: var(--primary-text) !important;
    border-radius: 5px;
}

.DayPickerNavigation_button__default:hover {
    background: var(--hover-bg) !important;
}

.DayPickerNavigation_svg__horizontal {
    fill: var(--primary-text) !important;
}

.DayPicker_weekHeader, .DayPicker_weekHeader_1,
.DayPicker_weekHeader_li {
    color: var(--secondary-text) !important;
    font-family: var(--font-secondary);
    font-size: 1.5rem;
}


/* --- 5. Day Cell Styles --- */

/* Force the default day style to be dark */
.CalendarDay__default {
    background: var(--tertiary-bg) !important;
    color: var(--primary-text) !important;
    border: 1px solid transparent !important;
    vertical-align: middle;
    font-size: 1.5rem;
}

/* Style for a day on hover */
.CalendarDay__default:hover {
    background: var(--hover-bg) !important;
    color: var(--hover-text) !important;
    border-color: var(--hover-bg) !important;
    border-radius: 5px;
}

/* Today's date (optional highlight) */
.CalendarDay__today {
    color: var(--success-text) !important;
    font-weight: 550;
}

/* Days outside the current month */
.CalendarDay__outside {
    background: transparent !important;
    color: var(--tertiary-text) !important;
}
.CalendarDay__outside:hover {
    background: transparent !important;
}

/* Disabled/blocked days */
.CalendarDay__blocked_calendar {
    background: transparent !important;
    color: var(--active-bg) !important;
    text-decoration: line-through;
}
.CalendarDay__blocked_calendar:hover {
    background: transparent !important;
    color: var(--active-bg) !important;
}

/* Style for the selected range (the lighter highlight) */
.CalendarDay__selected_start,
.CalendarDay__selected_end,
.CalendarDay__selected_span {
    background: var(--active-bg) !important;
    color: var(--hover-text) !important;
    border: 1px solid var(--focus-border) !important;
}

.CalendarDay__selected_start:hover,
.CalendarDay__selected_end:hover,
.CalendarDay__selected_span:hover {
    background: var(--hover-bg) !important;
    color: var(--hover-text) !important;
}

/* Give the start and end dates of the selected range rounded corners */
.CalendarDay__selected_start {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.CalendarDay__selected_end {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.themed-daterangepicker, .DayPicker_transitionContainer {
    background-color: var(--primary-bg);
}