:root {
    font-family: 'Source Sans 3', sans-serif;
}

body {
    background-color: #003b63;
}

.header {
    background-color: rgba(52, 94, 162);
    position: relative;
    z-index: 10;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.header p {
    max-width: 600px;
    font-size: 1.15rem;
}

.modebar {
    display: none !important;
}

/* Typography */

h1 {
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 0.75em;
}

h2 {
    font-size: 1.5rem;
    color: #ffffff;
}

h3 {
    font-size: 1.25rem;
    color: #ffffff;
}

h4 {
    font-size: 20px;
    color: #ffffff;
}

h5 {
    font-size: 16px;
    color: #ffffff;
}

p {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 0.75em;
}

/* ===============================
   Action Buttons (Update, Reset)
================================= */

/* Shared Base Style */
.action-button {
    margin-top: 15px;
    /* margin-left: 15px; */
    padding: 8px 18px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 2px;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Primary button — solid blue */
.primary-action {
    background-color: #61c0dd;
    color: #ffffff;
    border: none;
}

.primary-action:hover {
    background-color: #4db0d0;
    color: #ffffff;       /* unchanged */
    border: none;         /* unchanged */
}

/* Secondary button — white outline */
.secondary-action {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.secondary-action:hover {
    color: #61c0dd;
    border-color: #61c0dd;
    background-color: transparent; /* unchanged */
}



/* Sliders */

.rc-slider-mark-text {
    font-size: 12px;
    color: #708090;
}

.rc-slider-mark-text-active {
    color: #ffffff;
}

/* Dropdowns */

.state-dropdown {
    color: #ffffff;
    font-family: 'Source Sans 3';
    margin-top: 10px;
}

.customDropdown {
    font-size: 16px;
    padding-left: 1px;
    font-family: 'Source Sans 3', sans-serif;
    color: #ffffff;
    margin-top: 10px;
}

.customDropdown .Select-control {
    width: 100%;
    height: 38px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    color: white;
}

.customDropdown .Select-value-label,
.customDropdown .Select-placeholder {
    color: white !important;
}

.customDropdown .Select-arrow {
    border-color: #cccccc transparent transparent;
}

.customDropdown.is-open .Select-arrow {
    border-color: transparent transparent #cccccc;
}

.customDropdown .Select-clear {
    color: var(--bs-info);
    font-size: 22px;
}

.customDropdown.is-focused:not(.is-open) > .Select-control {
    border: 2px solid color-mix(in srgb, var(--bs-info), #010103 50%) !important;
}

.customDropdown.is-focused:not(.is-open) .Select-arrow {
    border-color: var(--bs-info) transparent transparent;
}

.customDropdown .Select-menu-outer {
    margin-top: 5px;
    border-radius: 2px;
    background-color: #010103;
    border: 1px solid #676768;
    color: var(--bs-light);
}

.customDropdown .VirtualizedSelectFocusedOption {
    background-color: color-mix(in srgb, var(--bs-light), #010103 7%);
    border-radius: 2px;
    color: #010103;
}

/* Inputs and Outputs */

.Output {
    width: 150px;
    height: 38px;
    background-color: rgba(204, 204, 204, 0.1);
    border: 1px solid rgba(204, 204, 204, 0.1);
    border-radius: 2px;
}

.Output:empty::before {
    content: "";
    display: inline-block;
}

/* Containers */

.input-container {
    padding: 2rem 1rem 2rem;
}

.state-selection,
.income-metric-selection {
    margin-bottom: 2rem;
}

.inputs-container,
.outputs-container {
    padding: 0.75rem;
}

.main-container-flex {
    display: flex;
}

/* Utility Spacing */

.margin-top {
    margin-top: 15px;
}

.margin-left-top {
    /* margin-left: 10px; */
    margin-top: 15px;
}

.ee-margin-top {
    margin-top: 30px;
}

.col-top-margin {
    margin-top: 15px;
}

/* Typography Helpers */

.liheap-heading {
    color: #61c0dd;
    font-size: 20px;
    /* margin-left: 10px; */
}

.subheading {
    margin-bottom: 5px;
}

.section-heading {
    margin-bottom: 10px;
}

.section-top-margin {
    margin-top: 15px;
}

/* Checklists */

.radio-items {
    color: #ffffff;
    font-family: 'Source Sans 3', sans-serif;
    margin: 5px;
}

.radio-input-style {
    margin-right: 15px;
}

.amp-checklist,
.policy-checklist {
    color: #ffffff;
    font-family: 'Source Sans 3', sans-serif;
}

.amp-checklist {
    font-size: 16px
}

/* .policy-checklist {
    font-size: 18px;
} */

/* .roe-checklist {
    font-size: 20px;
    color: #61c0dd;
} */

.amp-checklist-input,
.policy-checklist-input {
    margin-bottom: 10px;
    margin-right: 10px;
}

.policy-checklist-input {
    margin-right: 15px;
}

/* AMP Input Wrapper */

/* .amp-input-wrapper {
    margin-left: 30px;
    margin-right: 240px;
} */

/* ROE InputGroup */

.roe-input-group {
    /* margin-left: 15px; */
    margin-bottom: 15px;
}

/* Paragraphs */

.cost-policy-description,
.tiered-discount-description {
    /* margin-left: 15px; */
    font-size: 16px;
    color: #ffffff;
    max-width: 600px;
}

.tiered-discount-description {
    margin-top: 10px;
}

/* Graphs and Tables */

.js-plotly-plot .plotly,
.js-plotly-plot .plotly div {
    font-family: 'Source Sans 3', sans-serif;
}
.graph-spacing {
    margin: 0 0 3rem;
}

.graph-top-margin {
    margin-top: 15px;
}

.table-spacing {
    margin: 0;
}

.table-spacing th, td {
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Warnings and State Reference */

.warning-message {
    color: tomato;
    /* margin-left: 15px; */
}

.state-reference {
    margin-bottom: 15px;
}

/* Miscellaneous */

.rmi-logo {
    height: 1.25rem;
}

/* Dark theme card */
.collapsible-card {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
    border-radius: 2px;
}

/* Card toggle button header */
.card-toggle-header {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    border: none;
    padding: 0.5rem 0.5rem 0.5rem 0;
    color: white;
}

.card-toggle-header:hover .collapse-caret {
    color: #61c0dd;
}

/* Caret icon */
.collapse-caret {
    transition: transform 0.3s ease;
    font-size: 0.85rem;
}


/* Tooltips */
/* Tooltip icon next to text */
.tooltip-icon {
    display: inline-block;
    margin-left: 6px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
}

/* Tooltip bubble styling */
.custom-tooltip {
    background-color: #000 !important;
    color: #ffffff !important;
    font-size: 0.875rem;
    border-radius: 4px;
    padding: 6px 10px;
    max-width: 250px;
}

.collapsible-card {
    margin-bottom: 1rem;
}

/* .collapsible-card:not(.card-state, .card-income-metric, .card-cost-control, .card-pipp) {
    margin-bottom: 1rem;
}

.collapsible-card.card-state,
.collapsible-card.card-income-metric,
.collapsible-card.card-cost-control,
.collapsible-card.card-pipp {
    margin-bottom: 2rem;
} */

.input-group,
.liheap-incomes-slider,
.li-ee-incomes-slider,
.tiered-discount-incomes-slider,
.pipp-incomes-slider,
.straight-discount-incomes-slider {
    margin-bottom: 1.5rem;
}

#roe-reduction-wrapper,
#straight-discount-amp-wrapper,
#pipp-amp-wrapper,
#tiered-discount-amp-wrapper {
    transition: all 0.2s ease-in-out;
}

.funding-model-heading {
    margin-top: 1rem;
}

.input-group .form-control,
.input-group .input-group-text {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}

/* Optional: style for placeholder text */
.input-group .form-control::placeholder {
    color: #bbbbbb;
}

/* Focus styles for input */
.input-group .form-control:focus {
    box-shadow: none;
    outline: none;
}

/* Custom dark-themed table override */
.table-dark,
.table-dark thead th,
.table-dark tbody td {
    background-color: #002c4c;  /* a darker shade than #003b63 for contrast */
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Tighten cell padding (optional) */
.table td, .table th {
    padding: 0.75rem;
    vertical-align: middle;
}