/* Fully Dark Elegant Theme for Ashby Job Board */

:root {
    --colorPrimary900: #4ade80;
    --colorPrimary600: #22c55e;
    --colorAppBackground: #000000;
    --fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* Job board heading */
.ashby-job-board-heading {
    color: #d1d5db !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

.ashby-job-board-heading-count {
    color: #d1d5db !important;
}

/* Main intro text - make it more readable */
body p {
    color: #d1d5db !important;
    line-height: 1.6 !important;
}

/* Alternative selector for intro text */
p {
    color: #d1d5db !important;
    line-height: 1.6 !important;
}

/* Filters - force dark styling */
.ashby-job-board-filters-label {
    color: #f0f0f0 !important;
    background-color: #1a1a1a !important;
    font-weight: 500 !important;
}

.ashby-job-board-filter {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border: 1px solid #404040 !important;
    color: #f0f0f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-family: var(--fontFamily) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.ashby-job-board-filter select {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

.ashby-job-board-filter option {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

.ashby-job-board-reset-filters-label {
    background-color: #1a1a1a !important;
    color: #a3a3a3 !important;
}

/* Generic filter-related elements - using only wildcard selectors */
[class*="ashby"][class*="filter"][class*="button"],
[class*="ashby"][class*="filter"][class*="trigger"],
button[class*="ashby"][class*="filter"],
a[class*="ashby"][class*="filter"],
[class*="ashby"] button[class*="filter"],
[class*="ashby"] a[class*="filter"],
[class*="ashby"] div[class*="filter"]:not(.ashby-job-board-filter) {
    background-color: #1a1a1a !important;
    border: 1px solid #404040 !important;
    color: #f0f0f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
}

/* Override any white/light backgrounds - comprehensive */
[class*="ashby"] [style*="background: white"],
[class*="ashby"] [style*="background: #fff"],
[class*="ashby"] [style*="background-color: white"],
[class*="ashby"] [style*="background-color: #fff"],
[class*="ashby"] [style*="background: #ffffff"],
[class*="ashby"] [style*="background-color: #ffffff"],
[class*="ashby"] [style*="background: rgb(255, 255, 255)"],
[class*="ashby"] [style*="background-color: rgb(255, 255, 255)"] {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Force dark theme on any light-colored elements */
[class*="ashby"] * {
    background-color: transparent !important;
}

[class*="ashby"] div,
[class*="ashby"] section,
[class*="ashby"] article,
[class*="ashby"] main {
    background-color: transparent !important;
}

/* Ensure the filter area specifically is dark */
[class*="ashby"][class*="filter"] {
    background-color: #000000 !important;
    color: #f0f0f0 !important;
}

/* Nuclear option - force all ashby elements to dark unless specifically styled */
[class*="ashby"]:not(.ashby-job-board-filter):not(.ashby-application-form-field-entry input):not(.ashby-application-form-field-entry textarea):not(.ashby-application-form-field-entry select) {
    background-color: transparent !important;
}

/* Mobile/responsive filter styling - catch all possible mobile filter components */
@media (max-width: 768px) {
    /* Force all ashby elements to dark on mobile */
    [class*="ashby"] {
        background-color: transparent !important;
    }
    
    /* Mobile filter specific elements */
    [class*="ashby"] div,
    [class*="ashby"] section,
    [class*="ashby"] button,
    [class*="ashby"] a,
    [class*="ashby"] span {
        background-color: transparent !important;
        color: #f0f0f0 !important;
    }
    
    /* Override any mobile-specific light backgrounds */
    [class*="ashby"] [style*="background"],
    [class*="ashby"] [style*="background-color"] {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    /* Mobile filter buttons/triggers */
    button[class*="ashby"],
    a[class*="ashby"],
    div[class*="ashby"][role="button"] {
        background-color: #1a1a1a !important;
        border: 1px solid #404040 !important;
        color: #f0f0f0 !important;
        border-radius: 8px !important;
    }
    
    /* Aggressive mobile background override */
    [class*="ashby"] * {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    /* But keep specific elements styled */
    [class*="ashby"] input,
    [class*="ashby"] textarea,
    [class*="ashby"] select,
    [class*="ashby"] button {
        background-color: #1a1a1a !important;
        border: 1px solid #404040 !important;
        color: #f0f0f0 !important;
    }
    
    /* Mobile modal/drawer/overlay backgrounds */
    [class*="ashby"][class*="modal"],
    [class*="ashby"][class*="drawer"],
    [class*="ashby"][class*="overlay"],
    [class*="ashby"][class*="popup"],
    [class*="ashby"][class*="menu"] {
        background-color: #000000 !important;
        color: #f0f0f0 !important;
    }
}

/* Additional universal selectors for all screen sizes */
[class*="ashby"] [class*="filter"],
[class*="ashby"] [data-testid*="filter"],
[class*="ashby"] [id*="filter"] {
    /* background-color: transparent !important;
     */
    background-color: #1a1a1a !important;
     color: #f0f0f0 !important;
}

/* Catch any dynamically generated content */
[class*="ashby"] > div > div,
[class*="ashby"] > section > div,
[class*="ashby"] [role="dialog"],
[class*="ashby"] [role="menu"],
[class*="ashby"] [role="listbox"] {
    background-color: #000000 !important;
    color: #f0f0f0 !important;
}

/* Filter modal/popup dark styling - using generic selectors */

/* Additional modal selectors - more generic approach */
[class*="ashby"][class*="modal"],
[class*="ashby"][class*="overlay"],
[class*="ashby"][class*="popup"],
[class*="ashby"][class*="drawer"] {
    background-color: #000000 !important;
    color: #f0f0f0 !important;
}

/* Generic modal content styling */
[class*="ashby"][class*="modal"] [class*="content"],
[class*="ashby"][class*="modal"] [class*="body"],
[class*="ashby"][class*="popup"] [class*="content"],
[class*="ashby"][class*="drawer"] [class*="content"] {
    background-color: #000000 !important;
    color: #f0f0f0 !important;
}

/* Force all modal/popup elements to dark theme */
div[class*="ashby"][class*="filter"] {
    background-color: #000000 !important;
    color: #f0f0f0 !important;
}

/* Fallback for any white backgrounds in modals */
[class*="ashby"] [style*="background-color: white"],
[class*="ashby"] [style*="background-color: #fff"],
[class*="ashby"] [style*="background-color: #ffffff"],
[class*="ashby"] [style*="background: white"],
[class*="ashby"] [style*="background: #fff"],
[class*="ashby"] [style*="background: #ffffff"] {
    background-color: #000000 !important;
    color: #f0f0f0 !important;
}

/* Department headings */
.ashby-department-heading {
    color: #a3a3a3 !important;
    font-weight: 500 !important;
}

.ashby-job-posting-brief-department-heading {
    color: #a3a3a3 !important;
    font-weight: 500 !important;
}

/* Job listing cards */
.ashby-job-posting-brief {
    background-color: transparent !important;
    border: 1px solid #333333 !important;
    border-radius: 12px !important;
}

.ashby-job-posting-brief-title {
    color: #f0f0f0 !important;
    font-weight: 500 !important;
}

.ashby-job-posting-brief-details {
    color: #a3a3a3 !important;
}

/* Back button */
.ashby-job-board-back-to-all-jobs-button {
    background-color: transparent !important;
    border: 1px solid #404040 !important;
    color: #a3a3a3 !important;
    border-radius: 8px !important;
}

/* Job posting page */
.ashby-job-posting-header {
    background-color: #000000 !important;
}

.ashby-job-posting-heading {
    color: #f0f0f0 !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

.ashby-job-posting-left-pane {
    background-color: transparent !important;
/*    border: 1px solid #333333 !important;*/
    border-radius: 12px !important;
    color: #f0f0f0 !important;
}

.ashby-job-posting-right-pane {
    background-color: #0a0a0a !important;
    border: 1px solid #333333 !important;
    border-radius: 12px !important;
    color: #e5e5e5 !important;
}

/* Tab styling */
.ashby-job-posting-right-pane-tab-slider {
    background-color: #1a1a1a !important;
    border-radius: 8px !important;
}

.ashby-job-posting-right-pane-overview-tab {
    color: #e5e5e5 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

.ashby-job-posting-right-pane-application-tab {
    color: #a3a3a3 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}



/* Force overview content to have dark background - more targeted approach */
.ashby-job-posting-right-pane > div:not(.ashby-job-posting-right-pane-tab-slider):not(.ashby-application-form-container) {
    background-color: #0a0a0a !important;
    color: #e5e5e5 !important;
    padding: 24px !important;
}

/* Style text elements in overview but preserve structure and bold formatting */
.ashby-job-posting-right-pane p:not(.ashby-application-form-container p) {
    color: #e5e5e5 !important;
    line-height: 1.6 !important;
    background-color: transparent !important;
}

/* Preserve bold text formatting within overview content */
.ashby-job-posting-right-pane p:not(.ashby-application-form-container p) strong,
.ashby-job-posting-right-pane p:not(.ashby-application-form-container p) b {
    font-weight: bold !important;
    color: #f0f0f0 !important;
}

/* Preserve all text formatting within overview */
.ashby-job-posting-right-pane strong:not(.ashby-application-form-container strong),
.ashby-job-posting-right-pane b:not(.ashby-application-form-container b) {
    font-weight: bold !important;
    color: #f0f0f0 !important;
}

.ashby-job-posting-right-pane h1:not(.ashby-application-form-container h1),
.ashby-job-posting-right-pane h2:not(.ashby-application-form-container h2),
.ashby-job-posting-right-pane h3:not(.ashby-application-form-container h3),
.ashby-job-posting-right-pane h4:not(.ashby-application-form-container h4),
.ashby-job-posting-right-pane h5:not(.ashby-application-form-container h5),
.ashby-job-posting-right-pane h6:not(.ashby-application-form-container h6) {
    color: #f0f0f0 !important;
    font-weight: 600 !important;
    background-color: transparent !important;
}

.ashby-job-posting-right-pane ul:not(.ashby-application-form-container ul),
.ashby-job-posting-right-pane ol:not(.ashby-application-form-container ol),
.ashby-job-posting-right-pane li:not(.ashby-application-form-container li) {
    color: #e5e5e5 !important;
    background-color: transparent !important;
}

/* Application form - elegant dark theme */
.ashby-application-form-container {
    color: #e5e5e5 !important;
    background-color: #0a0a0a !important;
}

.ashby-application-form-section-container {
    background-color: #0a0a0a !important;
}

.ashby-application-form-section-header-title {
    color: #f0f0f0 !important;
    font-weight: 600 !important;
}

.ashby-application-form-section-header-description {
    color: #a3a3a3 !important;
}

.ashby-application-form-question-title {
    color: #e5e5e5 !important;
    font-weight: 500 !important;
}

.ashby-application-form-question-description {
    color: #a3a3a3 !important;
}

.ashby-application-form-field-entry {
    margin-bottom: 1.5rem !important;
}

/* Form inputs - elegant dark styling */
.ashby-application-form-field-entry input {
    background-color: #1a1a1a !important;
    border: 1px solid #404040 !important;
    color: #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-family: var(--fontFamily) !important;
}

.ashby-application-form-field-entry textarea {
    background-color: #1a1a1a !important;
    border: 1px solid #404040 !important;
    color: #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-family: var(--fontFamily) !important;
    min-height: 120px !important;
}

.ashby-application-form-field-entry select {
    background-color: #1a1a1a !important;
    border: 1px solid #404040 !important;
    color: #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-family: var(--fontFamily) !important;
}

/* Placeholder text */
.ashby-application-form-field-entry input::placeholder {
    color: #737373 !important;
}

.ashby-application-form-field-entry textarea::placeholder {
    color: #737373 !important;
}

/* Submit button - filled green like upload button */
.ashby-application-form-submit-button {
    background-color: var(--colorPrimary600) !important;
    background: var(--colorPrimary600) !important;
    color: #f0f0f0 !important;
    border: 2px solid var(--colorPrimary600) !important;
    border-radius: 24px !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    font-family: var(--fontFamily) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

/* Ensure all buttons maintain their proper styling */
.ashby-job-posting-right-pane button {
    background-color: var(--colorPrimary600) !important;
    color: #f0f0f0 !important;
    border: 2px solid var(--colorPrimary600) !important;
    border-radius: 24px !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

/* Preserve input styling */
.ashby-job-posting-right-pane input,
.ashby-job-posting-right-pane textarea,
.ashby-job-posting-right-pane select {
    background-color: #1a1a1a !important;
    border: 1px solid #404040 !important;
    color: #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

/* File upload areas - dark styling */
.ashby-application-form-autofill-pane {
    background-color: transparent !important;
/*    border: 1px solid #404040 !important;*/
    /*border-radius: 8px !important;
    color: #e5e5e5 !important;*/
}

.ashby-application-form-autofill-input-root {
    background-color: #1a1a1a !important;
    border: 2px dashed #505050 !important;
    border-radius: 8px !important;
    color: #a3a3a3 !important;
}

.ashby-application-form-autofill-input-title {
    color: #f0f0f0 !important;
    font-weight: 600 !important;
}

.ashby-application-form-autofill-input-description {
    color: #a3a3a3 !important;
}

.ashby-application-form-autofill-uploader {
    background-color: #1a1a1a !important;
    border: 2px dashed #505050 !important;
    border-radius: 8px !important;
    color: #a3a3a3 !important;
}

/* Style the main job board heading */
h1 {
    color: #f0f0f0 !important;
    /*font-size: 3rem !important;
    font-weight: 600 !important;*/
/*    text-align: center !important;*/
}

/* Success/error messages */
.ashby-application-form-success-container {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    color: #4ade80 !important;
    border-radius: 8px !important;
}

.ashby-application-form-failure-container {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
    border-radius: 8px !important;
}

/* Form alerts */
.ashby-application-form-autofill-input-form-alert {
    color: #e5e5e5 !important;
}

/* Consent text */
.ashby-application-form-texting-consent-description {
    color: #737373 !important;
    font-size: 0.875rem !important;
}

/* Survey forms */
.ashby-survey-form-container {
    background-color: #1a1a1a !important;
    color: #e5e5e5 !important;
}

/* Mobile responsive */
@media (max-width: 1024px) {
    /* Tablet adjustments */
    .ashby-job-posting-left-pane,
    .ashby-job-posting-right-pane {
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 768px) {
    /* Mobile adjustments */
    .ashby-job-board-heading {
        font-size: 2rem !important;
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    .ashby-job-posting-heading {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
    
    /* Filter adjustments */
    .ashby-job-board-filter {
        background-color: #1a1a1a !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Job listing cards - better mobile spacing */
    .ashby-job-posting-brief {
        margin-bottom: 1rem !important;
        padding: 16px !important;
    }
    
    .ashby-job-posting-brief-title {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .ashby-job-posting-brief-details {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* Form improvements */
    .ashby-application-form-field-entry input,
    .ashby-application-form-field-entry textarea,
    .ashby-application-form-field-entry select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 14px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .ashby-application-form-field-entry textarea {
        min-height: 100px !important;
    }
    
    /* Button improvements for touch */
    .ashby-application-form-submit-button,
    .ashby-job-posting-right-pane button {
        width: 100% !important;
        padding: 16px 24px !important;
        font-size: 16px !important;
        margin-top: 1rem !important;
        touch-action: manipulation !important;
    }
    
    /* Back button mobile styling */
    .ashby-job-board-back-to-all-jobs-button {
        padding: 12px 16px !important;
        font-size: 14px !important;
        margin-bottom: 1rem !important;
    }
    
    /* Two-pane layout adjustments */
    .ashby-job-posting-left-pane,
    .ashby-job-posting-right-pane {
        margin-bottom: 1.5rem !important;
        padding: 16px !important;
    }
    
    /* Tab slider mobile adjustments */
    .ashby-job-posting-right-pane-tab-slider {
        margin-bottom: 1rem !important;
    }
    
    .ashby-job-posting-right-pane-overview-tab,
    .ashby-job-posting-right-pane-application-tab {
        padding: 12px 16px !important;
        font-size: 15px !important;
    }
    
    /* Upload area mobile optimization */
    .ashby-application-form-autofill-input-root,
    .ashby-application-form-autofill-uploader {
        padding: 20px 16px !important;
        margin-bottom: 1rem !important;
    }
    
    .ashby-application-form-autofill-input-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .ashby-application-form-autofill-input-description {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    /* Small mobile adjustments */
    .ashby-job-board-heading {
        font-size: 1.75rem !important;
        padding: 0 1rem !important;
    }
    
    .ashby-job-posting-heading {
        font-size: 1.5rem !important;
        padding: 0 1rem !important;
    }
    
    .ashby-job-posting-brief,
    .ashby-job-posting-left-pane,
    .ashby-job-posting-right-pane {
        margin: 0 0.5rem 1rem 0.5rem !important;
        padding: 12px !important;
    }
    
    .ashby-application-form-field-entry {
        margin-bottom: 1rem !important;
    }
    
    .ashby-application-form-question-title {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    
    .ashby-application-form-question-description {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    /* Mobile modal/filter popup styling */
    [class*="ashby"][class*="modal"],
    [class*="ashby"][class*="popup"] {
        margin: 1rem !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
    }
    
    /* Mobile filter items in modal */
    [class*="ashby"][class*="modal"] .ashby-job-board-filter,
    [class*="ashby"][class*="popup"] .ashby-job-board-filter {
        margin-bottom: 16px !important;
        padding: 16px !important;
        font-size: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #1a1a1a !important;
    }
}

/* ADDITIONAL COMPREHENSIVE FILTER STYLING */
/* Catch any remaining filter elements that might be showing light backgrounds */

/* All possible filter-related elements and containers */
div[class*="filter"],
section[class*="filter"],
article[class*="filter"],
span[class*="filter"],
button[class*="filter"],
a[class*="filter"],
ul[class*="filter"],
li[class*="filter"] {
    background-color: transparent !important;
    color: #f0f0f0 !important;
}

/* Filter wrappers and containers */
[data-testid*="filter"],
[id*="filter"],
[role="button"][class*="filter"],
[role="menu"][class*="filter"],
[role="dialog"][class*="filter"] {
    background-color: transparent !important;
    color: #f0f0f0 !important;
}

/* Any element with "filter" in its class name */
/* *[class*="filter"] {
    background-color: transparent !important;
    color: #f0f0f0 !important;
} */

/* Force dark backgrounds on interactive filter elements */
/* button[class*="filter"],
a[class*="filter"],
div[class*="filter"][role="button"],
span[class*="filter"][role="button"] {
    background-color: #1a1a1a !important;
    border: 1px solid #404040 !important;
    color: #f0f0f0 !important;
    border-radius: 8px !important;
} */

/* Specifically target any remaining white/light elements */
/* [style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background: rgb(255, 255, 255)"] {
    background-color: #000000 !important;
    background: #000000 !important;
    color: #f0f0f0 !important;
} */

/* Nuclear option for mobile - override everything */
/* @media (max-width: 768px) {
    * {
        background-color: transparent !important;
    }
    
    input, textarea, select, button {
        background-color: #1a1a1a !important;
        color: #f0f0f0 !important;
        border: 1px solid #404040 !important;
    }
    
    [class*="ashby"] input,
    [class*="ashby"] textarea,
    [class*="ashby"] select,
    [class*="ashby"] button {
        background-color: #1a1a1a !important;
        color: #f0f0f0 !important;
        border: 1px solid #404040 !important;
    }
} */