/* IMPORTANT: This file must be in /assets folder */

:root {
    /* CHANGE THIS HEX CODE to your desired primary color */
    --bs-primary: #264fbf; 
    --bs-link-color: #ffffff; /* Change this hex code to your desired link/icon color */
    --bs-link-color-rgb: 255, 255, 255; /* Used for opacity calculations */
}

@media (max-width: 768px) {
    .navbar-brand { font-size: 0.8rem !important; } 
    .nav-item,  .dropdown-menu { font-size: 0.8rem !important; }

    /* Reduce font size for large headers and display classes on mobile */
    h1, .h1, .display-1, .display-2, .display-3, .display-4 { font-size: 1.2rem !important; }
    h2, .h2 { font-size: 0.9rem !important; }
    h3, .h3 { font-size: 0.7rem !important; }
    h4, .h4 { font-size: 0.5rem !important; }
}

@media (max-width: 480px) { 
    .nav-link, .dropdown-item { font-size: 0.85rem !important; }
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Fix for Explore buttons not picking up the link color variable */
.stretched-link {
    color: var(--bs-link-color) !important;
}

/* Force all dropdown options to be dark */
.Select-option {
    background-color: #2c2c2c !important;
    color: #f0f0f0 !important;
    padding: 8px 10px !important;
}

.Select-option:hover {
    background-color: #2665c3 !important;
    color: #ffffff !important;
}

.Select-option.is-focused {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

.Select-menu-outer {
    background-color: #2c2c2c !important;
}

.Select-menu {
    background-color: #2c2c2c !important;
    max-height: 200px !important;
}

.Select-control {
    background-color: #2c2c2c !important;
    border-color: #444 !important;
}

.Select-placeholder,
.Select--single > .Select-control .Select-value {
    color: #bbb !important;
}

/* Ensure text is always readable */
div[class*="Select"] {
    font-family: inherit !important;
}

/* Selected value in single select */
.Select--single > .Select-control .Select-value {
    color: #fff !important;
}

/* Selected value in multi select (if you use multi selects) */
.Select-value-label {
    color: #fff !important;
}

/* --- Table Fix for Dark Mode --- */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: #1e1d1d !important;  /* Dark background */
    color: #5d5d5d !important;            /* White text */
}



table tr:nth-child(even) {
    background-color: #262626;            /* Row shading */
}

table tr:hover {
    background-color: #333333;            /* Hover effect */
}

/* font color for .alert-light being used in delta_hedger.py module */
.alert-light {
    color: #000000 !important;
}

/* tab color being used in mt-4 nav nav-tabs in delta_hedger.py module */
.nav-tabs .nav-link.active {
    background-color: #3679bb !important;
    color: #ffffff !important;
}
.nav-tabs .nav-link {
    background-color: #3f3f3f !important;
    color: #c8c7c7 !important;
}
.nav-tabs .nav-link:hover {
    background-color: #8b8e91 !important;
    color: #ffffff !important;
}
/*border for mt-4 nav nav-tabs in delta_hedger.py module */
.nav-tabs {
    border-bottom: 2px solid #444 !important;
}
/*padding for mt-4 nav nav-tabs in delta_hedger.py module */
.nav-tabs .nav-link {
    padding: 10px 15px !important;
}
/* margin for mt-4 nav nav-tabs in delta_hedger.py module */
.nav-tabs .nav-item {
    margin-right: 5px !important;
}
/*bottom marging for mt-4 nav nav-tabs in delta_hedger.py module */
.nav-tabs {
    margin-bottom: 5px !important;
}
/* font color for text-success mb-0 in delta_hedger.py module */
.text-success {
    color: #9796e0 !important;
}

.text-white {
    color: #f3f3f3 !important;
}


.score_color {
    color: #c5bfbf !important;
}

/* font size for mb-2 in delta_hedger.py module */
.mb-2 {
    font-size: 1.0rem !important;
}

/*customization for btn-success in delta_hedger.py module */
.btn-success {
    background-color: #535353 !important;
    border-color: #3f3f3f !important;
}

/*customization for lead text-muted in delta_hedger.py module */
.lead.text-muted {
    font-size: 1.1rem !important;
    color: #0d0d0d !important;
}

/* customization for alert alert-light p-2 in delta_hedger.py module */
.alert.alert-light.p-2 {
    
    /*change font size to segoe*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* customization for bg-light container-fluid in delta_hedger.py module */
.bg-light.container-fluid {
    background-color: #535353 !important;
}

/* customization for my-4 text-primary in delta_hedger.py module */
.my-4.text-primary {
    color: #f3f3f3 !important;
}

/* lead text muted in delta_hedger.py module */
.lead.text-muted {
    color: #d6d6d6 !important;
}

/*customization for small style used in delta_hedger.py module */
small {
    font-size: 1.0rem !important;
    color: #121212 !important;
    /*non-monospace font*/
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important;

}

/* font color for text-info mb-0 in delta_hedger.py module */
.text-info {
    color: #0d0d0d !important;
}   

/*customization for mb-2 w-100 btn btn-success btn-lg in delta_hedger.py module */
.btn.btn-success.btn-lg.mb-2.w-100 {
    background-color: #2e2f30 !important;
    border-color: #1c1c1c !important;
    /*disable fixed width*/ 
    width: auto !important;
}

/* hover effect for mb-2 w-100 btn btn-success btn-lg in delta_hedger.py module */
.btn.btn-success.btn-lg.mb-2.w-100:hover {
    background-color: #2478cd !important;
    border-color: #223ebc !important;
}

/* customization for mb-3 form-control in delta_hedger.py module */
.mb-3.form-control {
    background-color: #2e2f30 !important;
    /*modify width to 100%*/
    width: 60% !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

/*modify width for dash-dropdown in delta_hedger.py module */
.dash-dropdown {
    width: auto !important;
    font-size: small !important;
}   

/*auto width of mb-4 col-lg-5 col-5 in delta_hedger.py module */
.mb-4.col-lg-5.col-5 {
    width: auto !important;
}

/* modify font size for form-check-label , me-1 mb-1 btn btn-outline-undefined btn-sm, fw-bold form-label, mb-0 text-white bg-primary, fw-bold mt-3 form-label in delta_hedger.py module */
.form-check-label,
.me-1.mb-1.btn.btn-outline-undefined.btn-sm,
.fw-bold.form-label,
.mb-0.text-white.bg-primary,
.Select-value,
.nav-item,
.tab-content,
.card-header,
.mb-0,
.fw-bold.mt-3.form-label {
    font-size: 0.8rem !important;
}

/*modify font color for table table-striped table-bordered table-hover*/
.table.table-striped.table-bordered.table-hover {
    color: #ababab !important;
}