body {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* Dropdown styling - selected value (white text) */
.year-dropdown {
    position: relative !important;
    z-index: 1 !important;
}

.year-dropdown .Select-control {
    background-color: #0c0c0c !important;
    border: 1px solid #444 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    overflow: visible !important;
    /* Simplified - only transition border and shadow on focus, not hover */
}

.year-dropdown .Select-value {
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    width: auto !important;
}

.year-dropdown .Select-value > span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    max-width: none !important;
    width: auto !important;
}

.year-dropdown .Select-value-label {
    max-width: none !important;
    width: auto !important;
    display: inline-block !important;
}

.year-dropdown .Select-value-label {
    color: #ffffff !important;
    transition: color 0.2s ease !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
}

.year-dropdown .Select-placeholder {
    color: #ffffff !important;
}

/* Dropdown menu - options (white text on black background) */
.year-dropdown.is-open {
    z-index: 10000 !important;
}

.year-dropdown .Select-menu-outer {
    background-color: #000000 !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
    position: absolute !important;
    width: 100% !important;
    margin-top: 4px !important;
    /* Remove animation and will-change to prevent glitches */
    opacity: 1 !important;
    transform: none !important;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.year-dropdown .Select-menu {
    max-height: 300px !important;
    overflow-y: auto !important;
}

.year-dropdown .Select-option {
    color: #ffffff !important;
    background-color: #000000 !important;
    cursor: pointer !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    /* No transitions - React Select handles state changes */
    transition: none !important;
}

.year-dropdown .Select-option:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    transition: none !important;
}

.year-dropdown .Select-option.is-focused {
    background-color: #1b1b1b !important;
    color: #ffffff !important;
    transition: none !important;
}

.year-dropdown .Select-option.is-selected {
    background-color: #0d4d6b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.year-dropdown .Select-arrow {
    border-top-color: #ffffff !important;
    transition: transform 0.2s ease !important;
}

.year-dropdown.is-open .Select-arrow {
    transform: rotate(180deg) !important;
}

.year-dropdown .Select-input > input {
    color: #ffffff !important;
}

/* Enhanced dropdown hover effects - simplified to prevent glitches */
.year-dropdown .Select-control:hover {
    border-color: #666 !important;
    /* Subtle hover - no transition to prevent glitches */
}

.year-dropdown .Select-control:focus,
.year-dropdown.is-focused .Select-control,
.year-dropdown.is-open .Select-control {
    border-color: #00d4ff !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.5) !important;
    outline: none !important;
}

/* Smooth scrolling for dropdown menu */
.year-dropdown .Select-menu-outer::-webkit-scrollbar {
    width: 8px;
}

.year-dropdown .Select-menu-outer::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

.year-dropdown .Select-menu-outer::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.year-dropdown .Select-menu-outer::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Input field enhancements */
input[type="number"]:focus {
    outline: none !important;
    border-color: #00d4ff !important;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.3) !important;
    background-color: #111111 !important;
}

input[type="number"]:hover {
    border-color: #666 !important;
}

/* Center all dropdowns and control wrappers */
.control-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    width: fit-content !important;
}

/* Better spacing for calculator labels */
.control-label {
    letter-spacing: 0.3px;
    text-align: center !important;
    width: 100% !important;
}

/* Make dropdowns fit their content width and center them */
.year-dropdown {
    width: auto !important;
    min-width: 150px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}

.year-dropdown .Select {
    width: 100% !important;
    margin: 0 auto !important;
}

.year-dropdown .Select-control {
    width: 100% !important;
    min-width: 150px !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

.year-dropdown .Select-input {
    overflow: visible !important;
    width: 100% !important;
}

.year-dropdown .Select-input > input {
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Ensure dropdown menu matches control width */
.year-dropdown .Select-menu-outer {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* Make control wrapper fit content */
.control-wrapper {
    width: fit-content !important;
    max-width: 100% !important;
}

/* Prevent dropdown menu from being cut off */
.Select-menu-outer {
    position: absolute !important;
    z-index: 9999 !important;
    overflow: visible !important;
}

/* Fix for dropdown positioning issues */
.year-dropdown .Select {
    position: relative !important;
}

.year-dropdown .Select.is-open {
    z-index: 10000 !important;
}

/* Smooth dropdown opening without glitches */
.year-dropdown .Select-menu-outer {
    pointer-events: auto !important;
    /* Remove backface-visibility - can cause rendering issues */
}

/* Ensure dropdown menu width matches control */
.year-dropdown .Select-menu-outer {
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Mobile devices (phones, tablets in portrait) */
@media screen and (max-width: 768px) {
    /* Base font size adjustment */
    body {
        font-size: 14px;
    }

    /* Page container - reduce padding on mobile */
    div[style*="padding: '20px 5%'"] {
        padding: 10px 2% !important;
    }

    /* Header and title adjustments */
    .title {
        font-size: 24px !important;
        margin-bottom: 15px !important;
        padding: 0 15px !important;
    }

    /* Credentials - stack vertically and center on mobile */
    .credentials {
        position: static !important;
        text-align: center !important;
        margin-top: 15px !important;
        margin-bottom: 20px !important;
        padding: 0 15px !important;
        right: auto !important;
        top: auto !important;
    }

    .credentials p,
    .credentials a {
        font-size: 11px !important;
        margin: 2px 0 !important;
    }

    /* Section headings */
    h1 {
        font-size: 22px !important;
    }

    h2 {
        font-size: 20px !important;
        margin-top: 30px !important;
        margin-bottom: 20px !important;
        padding: 0 15px !important;
    }

    h3 {
        font-size: 18px !important;
        margin-top: 20px !important;
        margin-bottom: 12px !important;
        padding: 0 15px !important;
    }

    /* Paragraph text */
    p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        padding: 0 15px !important;
    }

    /* Content containers */
    .header > div:last-child,
    div[style*="maxWidth"] {
        padding: 15px !important;
    }

    /* Graph containers - reduce height on mobile */
    .map-container,
    div[style*="border"][style*="borderRadius"] {
        padding: 8px !important;
        margin: 15px auto !important;
    }

    /* Graph height adjustments */
    div[id="uk-map"],
    div[id="animated-map"],
    div[id="income-bar-chart"],
    div[id="income-affordability-scatter"],
    div[id="mortgage-rates-chart"],
    div[id="region-mortgage-timeline"],
    div[id="growth-chart"] {
        height: 400px !important;
    }

    /* Slider container */
    div[style*="slider-year-display"] {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }

    /* Slider marks - smaller font */
    .rc-slider-mark-text {
        font-size: 9px !important;
    }

    /* Control wrappers - full width on mobile */
    .control-wrapper {
        width: 90% !important;
        max-width: 90% !important;
        margin: 0 auto 20px !important;
        padding: 0 10px !important;
    }

    /* Dropdowns - full width and MUCH BIGGER on mobile */
    .year-dropdown {
        width: 100% !important;
        min-width: 100% !important;
        font-size: 22px !important;
    }

    .year-dropdown .Select {
        width: 100% !important;
        font-size: 22px !important;
    }

    .year-dropdown .Select-control {
        width: 100% !important;
        min-width: 100% !important;
        min-height: 60px !important;
        padding: 16px 20px !important;
        font-size: 22px !important;
        line-height: 1.6 !important;
    }

    .year-dropdown .Select-value-label {
        font-size: 22px !important;
        line-height: 1.6 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        width: auto !important;
        display: inline-block !important;
    }

    .year-dropdown .Select-value {
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .year-dropdown .Select-value > span {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    .year-dropdown .Select-placeholder {
        font-size: 22px !important;
        line-height: 1.6 !important;
    }

    .year-dropdown .Select-input {
        font-size: 22px !important;
        overflow: visible !important;
        width: 100% !important;
    }

    .year-dropdown .Select-input > input {
        font-size: 22px !important;
        line-height: 1.6 !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .year-dropdown .Select-arrow {
        width: 24px !important;
        height: 24px !important;
        margin-top: -12px !important;
        border-width: 6px 5px 0 5px !important;
    }

    /* Dropdown menu options - much bigger on mobile */
    .year-dropdown .Select-menu-outer {
        font-size: 22px !important;
        max-height: 400px !important;
    }

    .year-dropdown .Select-menu {
        max-height: 400px !important;
    }

    .year-dropdown .Select-option {
        font-size: 22px !important;
        padding: 18px 20px !important;
        min-height: 60px !important;
        line-height: 1.6 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Control labels - much bigger on mobile */
    .control-label {
        font-size: 22px !important;
        margin-bottom: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
    }

    /* Calculator section - stack inputs vertically */
    div[style*="display: flex"][style*="flexWrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 15px !important;
    }

    div[style*="display: flex"][style*="flexWrap"] > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important;
        flex: 1 1 auto !important;
    }

    /* Calculator input fields */
    input[type="number"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Feedback form */
    div[style*="maxWidth: '600px'"] {
        padding: 20px 15px !important;
    }

    /* Table wrapper - horizontal scroll on mobile */
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Footer */
    .footer {
        padding: 20px 15px !important;
    }

    .footer-text {
        font-size: 13px !important;
        padding: 0 15px !important;
    }

    /* Economic Relevance section */
    div[style*="maxWidth: '1000px'"][style*="padding: '40px'"] {
        padding: 20px 15px !important;
    }

    /* Section spacing */
    div[style*="marginTop: '50px'"],
    div[style*="marginTop: '40px'"] {
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }

    /* Remove large padding from sections */
    div[style*="padding: '30px'"] {
        padding: 20px 15px !important;
    }
}

/* Small mobile devices (phones < 480px) */
@media screen and (max-width: 480px) {
    /* Even smaller fonts */
    body {
        font-size: 13px;
    }

    .title {
        font-size: 20px !important;
    }

    h1 {
        font-size: 20px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    h3 {
        font-size: 16px !important;
    }

    p {
        font-size: 13px !important;
    }

    /* Smaller graph heights */
    div[id="uk-map"],
    div[id="animated-map"],
    div[id="income-bar-chart"],
    div[id="income-affordability-scatter"],
    div[id="mortgage-rates-chart"],
    div[id="region-mortgage-timeline"],
    div[id="growth-chart"] {
        height: 350px !important;
    }

    /* Tighter spacing */
    .control-wrapper {
        margin-bottom: 15px !important;
    }

    /* Slider marks - even smaller */
    .rc-slider-mark-text {
        font-size: 8px !important;
    }

    /* Keep dropdowns big even on small phones */
    .year-dropdown {
        font-size: 20px !important;
    }

    .year-dropdown .Select {
        font-size: 20px !important;
    }

    .year-dropdown .Select-control {
        min-height: 56px !important;
        padding: 14px 18px !important;
        font-size: 20px !important;
        line-height: 1.6 !important;
    }

    .year-dropdown .Select-value-label,
    .year-dropdown .Select-placeholder {
        font-size: 20px !important;
        line-height: 1.6 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        width: auto !important;
        display: inline-block !important;
    }

    .year-dropdown .Select-value {
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        width: auto !important;
    }

    .year-dropdown .Select-value > span {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        max-width: none !important;
        width: auto !important;
    }

    .year-dropdown .Select-input {
        font-size: 20px !important;
        overflow: visible !important;
        width: 100% !important;
    }

    .year-dropdown .Select-input > input {
        font-size: 20px !important;
        line-height: 1.6 !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .year-dropdown .Select-arrow {
        width: 22px !important;
        height: 22px !important;
        margin-top: -11px !important;
        border-width: 6px 5px 0 5px !important;
    }

    .year-dropdown .Select-option {
        font-size: 20px !important;
        padding: 16px 18px !important;
        min-height: 56px !important;
        line-height: 1.6 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .control-label {
        font-size: 20px !important;
        font-weight: 600 !important;
    }
}

/* Tablet adjustments (768px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Graph heights for tablets */
    div[id="uk-map"] {
        height: 600px !important;
    }

    div[id="animated-map"],
    div[id="income-bar-chart"],
    div[id="income-affordability-scatter"],
    div[id="mortgage-rates-chart"],
    div[id="region-mortgage-timeline"],
    div[id="growth-chart"] {
        height: 450px !important;
    }

    /* Calculator - allow 2 columns on tablet */
    div[style*="display: flex"][style*="flexWrap"] {
        flex-wrap: wrap !important;
    }

    div[style*="display: flex"][style*="flexWrap"] > div {
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
}

/* Touch-friendly adjustments for mobile */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets */
    .year-dropdown .Select-option {
        padding: 12px 15px !important;
        min-height: 44px !important;
    }

    button,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px !important;
        padding: 12px 20px !important;
    }

    /* Slider - easier to drag */
    .rc-slider-handle {
        width: 20px !important;
        height: 20px !important;
        margin-top: -8px !important;
    }
}