/* Define the primary color variables */
:root {
    --primary-color: #F08080; /* Coral Pink for active and hover state border */
    --hover-color: #C06070; /* Darker variant for hover states */
    --inactive-color: #333; /* Color for inactive tabs */
}

/* Style for text input within the multi-select dropdown */
.Select--multi .Select-input > input {
    color: white !important; /* Ensures text color is white */
}

/* Style for the selected value in a single select dropdown */
.Select--single > .Select-control .Select-value,
.Select-placeholder {
    background-color: #303030; /* Background color of the selected value and placeholder */
    color: white; /* Text color - ensure this contrasts with the background */
    border: 1px solid white; /* Add white border around the selected value */
    border-radius: 5px; /* Add rounded corners to the selected value */
}

/* Style for the text of the selected value */
.Select-value .Select-value-label {
    color: white !important; /* Ensures text color is white */
}
/* Style for text input within the single select dropdown */
.Select--single > .Select-control .Select-input input {
    color: white !important; /* Ensures text color is white */
}

/* Ensure the placeholder color in the single select dropdown matches */
.Select--single > .Select-control .Select-placeholder {
    color: white !important; /* Ensures placeholder text color is white */
    background-color: #303030 !important; /* Ensures background color is dark */
}

/* Style for the control part of the dropdown, including border */
.Select-control {
    background-color: #303030; /* Background color of the dropdown control */
    border: 1px solid #757575; /* Border color - adjust as needed */
    color: white; /* Text color */
}

.Select-menu-outer {
    border-radius: 5px !important;
    background-color: #303030 !important;
    border: 2px solid #757575 !important;
}


body {
    font-family: 'Arial', sans-serif;
    color: white;
}

/* Apply to all DataTable components */
.dash-table-container .dash-spreadsheet {
    font-family: 'Arial', sans-serif;
    color: white;
}

/* Apply specifically to the table cells */
.dash-spreadsheet td, .dash-spreadsheet th {
    font-family: 'Arial', sans-serif;
}

/* Custom button styling */
.custom-button {
    display: flex; /* Use flexbox */
    align-items: center; /* Center vertically */
    font-size: 1.5rem;
    padding: 15px 30px;
    margin-top: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--primary-color);
    border: none;
    color: white;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.custom-button:hover,
.custom-button:focus {
    background-color: var(--hover-color);
    outline: none;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.custom-button:hover {
    transform: translateY(-1px);
}

.radio-button-style {
    display: block;  /* Block display for the entire group */
    margin: auto;
}

.radio-button-style .form-check-inline .custom-control-input {
    margin-right: 5px;  /* Space between radio button and label */
}

.monetary-basis-heading {
    text-align: center;
    color: white;
    margin-bottom: 10px;
}

.radio-button-instruction {
    text-align: center;
    color: #f0ad4e;
    font-size: 0.9em;
}

.custom-tooltip .tooltip-inner {
    font-size: 16px; 
    max-width: 550px;
    text-align: left;
}



/* Tab styling to match the nav bar */
.custom-tab {
    padding: 10px 20px !important;  /* Reduced top and bottom padding */
    background-color: var(--inactive-color) !important; /* Inactive tab background color */
    color: white !important; /* Text color for all states */
    border: none !important; /* Remove default borders */
    cursor: pointer; /* Cursor for clickable items */
    font-size: 1.5vw; /* Match the nav link font size */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Smooth transition for background, color, and border color change */
    border-bottom: 3px solid transparent; /* Transparent border for a uniform height */
    display: flex;
    align-items: center !important;
    justify-content: center;
}

.custom-tab:hover, .custom-tab:focus {
    background-color: var(--hover-color) !important; /* Hover background color */
    color: white; /* Text color remains white on hover */
    border-bottom: 3px solid var(--primary-color) !important; /* Border color changes to Coral Pink on hover */
}

/* Active tab styling */
.custom-tab-active {
    background-color: var(--primary-color) !important; /* Active tab background color */
    color: white !important; /* Active tab text color remains white */
    border-bottom: 3px solid var(--hover-color) !important; /* Underline effect for active tab with Darker variant color */
    display: flex;
 
}

/* Container for the tabs to mimic the nav bar layout */
.tab-container {
    display: flex;
    justify-content: start; /* Align tabs to the start of the container */
    background-color: var(--inactive-color) !important; /* Container background color to match the nav bar */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; /* Optional: Adds a shadow for depth */
}

/* assets/style.css */

.markdown-content h2 {
    font-size: 2.5rem;  /* Adjust size to match h4 or as needed */
}

.markdown-content p, .markdown-content ul, .markdown-content ol {
    line-height: 1; /* Adjust line spacing as needed */
}

/* Custom button styling */
.custom-button-ai {
    display: flex; /* Use flexbox */
    align-items: center; /* Center vertically */
    font-size: 2rem;
    padding: 15px 30px;
    margin-top: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--primary-color);
    border: none;
    color: white;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.custom-button-ai:hover,
.custom-button-ai:focus {
    background-color: var(--hover-color);
    outline: none;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.custom-button-ai:hover {
    transform: translateY(-1px);
}