/* -----------------------------------------------------------------
    - General Styles
----------------------------------------------------------------- */
:root {
    /* colors */
    --primary: #64b5ff;  /* Brighter blue accent color for better contrast on dark background */
    --primary-color: #64b5ff;
    --primary-color-soft: #64b5ff33;
    --background-color: #121212;  /* Nearly black background */
    --text-color: #e0e0e0;   /* Light gray text for readability */
    --box-background-color: #1e1e1e;  /* Slightly lighter than background */
    --tab-background-color: #2a2a2a;  /* Even lighter for tabs */
    --second-box-background-color: #252525;  /* For secondary boxes */
    --text-color-light: #b0b0b0;  /* Lighter text for secondary elements */
    --text-color-on-primary: #ffffff;
    --white: #ffffff;
}

@media only screen and (max-width: 991px) {
    .nav-container {
        background: rgba(18, 18, 18, 0.75);
    }
}

.input,
.textarea,
select,
.custom-select {
    background-color: #1e1e1e;
    border: 1px solid #333333;
    color: #e0e0e0;
}

.input:focus,
.textarea:focus,
select:focus,
.custom-select:focus {
    background-color: #252525;
    border: 1px solid #4e99ff;
    color: #ffffff;
}

.input--white {
    background-color: #2a2a2a;
}

.input--white:focus {
    background-color: #333333;
}

.textarea--white {
    background-color: #2C283A;
}

.textarea--white:focus {
    background-color: #2C283A;
}

.form-group .font-icon {
    color: rgba(222, 221, 224, 0.5);
}

.form-control::-webkit-input-placeholder {
    color: rgba(222, 221, 224, 0.5);
}

.form-control::-moz-placeholder {
    color: rgba(222, 221, 224, 0.5);
}

.form-control:-ms-input-placeholder {
    color: rgba(222, 221, 224, 0.5);
}

.form-control::-ms-input-placeholder {
    color: rgba(222, 221, 224, 0.5);
}

.form-control::placeholder {
    color: rgba(222, 221, 224, 0.5);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #2C283A !important;
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 0.125rem rgba(13, 134, 255, 0.25);
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #0D86FF;
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
    border-color: #8697A8;
}

.custom-control-input:checked~.custom-control-label::before {
    border-color: #0D86FF;
    background-color: #0D86FF;
}

.custom-control-label::before {
    border: 1px solid #8697A8;
}

select,
.custom-select {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23fff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.1rem center/10px 16px;
}

select option,
.custom-select option {
    color: #fff;
}

.dropdown-menu {
    background-color: #302C40;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    color: #DEDDE0;
}

.dropdown-menu::before {
    border-bottom: 0.4rem solid #302C40;
}

.dropdown.dropup .dropdown-menu::before {
    border-top: 0.4rem solid #302C40;
}

.progress {
    background-color: #302C40;
}

.progress-bar {
    background-color: #0D86FF;
}

.badge--blue {
    background-color: #0D86FF;
}

.badge--dark {
    background-color: #272333;
}

.tooltip-inner {
    background-color: #302C40;
    box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.25), 0px 2px 32px rgba(0, 0, 0, 0.5);
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #302C40;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #302C40;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #302C40;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #302C40;
}


/* -----------------------------------------------------------------
    - Sections
----------------------------------------------------------------- */
.box {
    background-color: var(--tab-background-color);
}

.box__second {
    background-color: #2C283A;
    box-shadow: unset;
}

.box-inner {
    background-color: transparent;
}

.box-inner::before,
.box-inner::after {
    background-color: transparent;
}

.shadow {
    box-shadow: 0px 40px 50px rgba(32, 29, 42, 0.75) !important;
}

.shadow::before {
    box-shadow: 0px 40px 50px rgba(0, 0, 0, 0.5);
}

/* Additional dark mode specific styles */
.box {
    background-color: var(--tab-background-color);
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.2);
}

/* Ensure consistency in dark theme sections */
.box-inner {
    background-color: var(--tab-background-color);
}

/* Set a consistent color for the side borders in dark theme */
.box-inner::before,
.box-inner::after {
    background-color: var(--tab-background-color);
}

.box__second {
    background-color: var(--second-box-background-color);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}

.case-item__links a {
    color: var(--text-color);
}

.badge--light {
    background-color: #333333;
    color: #e0e0e0;
}

/* Fix for the Ph.D. student badge */
.sidebar .badge--light {
    background-color: #333333;
    color: #e0e0e0 !important; /* Force white text color */
}

a.highlighted, a:hover {
    color: #6ab0ff;
}

.social__link {
    color: var(--text-color);
}

/* Improved contrast for readability */
.timeline__period, .case-item__caption, .color--light, .footnote {
    color: #b0b0b0;
}

/* Theme toggle button with better visibility in dark mode */
.theme-toggle {
    color: #e0e0e0;
}

/* Fix for avatar in dark mode */
.avatar--180 {
    max-height: 11.25rem !important;
    max-width: 11.25rem !important;
    height: 11.25rem !important;
    width: 11.25rem !important;
    position: relative !important;
    z-index: 1 !important;
    border-radius: 50% !important;
}

/* Ensure buttons are visible */
.btn {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* Fix for links in dark mode */
a {
    color: var(--primary-color);
}

a:hover {
    color: #8ccbff;
}

/* Fix for text on white elements - except for Ph.D. student badge */
.badge--gray {
    color: #1e1e1e;
}

/* Fix for icons */
.title-icon {
    color: var(--primary-color);
}

.case-item__icon {
    color: var(--primary-color);
}

.social__link {
    color: #fff;
}