/* ===================================
   ATOMIC INDUSTRIES - Ashby Job Board Custom CSS
   Colors: 
   - Primary Blue: #1172BA
   - Light Blue: #ACDDEE  
   - Dark Gray: #333333
   =================================== */

/* stylelint-disable */

/* ===================================
   ROOT VARIABLES & GLOBAL SETTINGS
   =================================== */
:root {
    /* Primary Colors - Atomic Industries Brand */
    --colorPrimary900: #0D5A94; /* Darker blue for hover states */
    --colorPrimary600: #1172BA; /* Main brand blue */
    
    /* Extended Color Palette */
    --atomicPrimary: #1172BA;
    --atomicPrimaryDark: #0D5A94;
    --atomicPrimaryLight: #2A89D1;
    --atomicAccent: #ACDDEE;
    --atomicAccentDark: #8CC9DE;
    --atomicAccentLight: #D4EEFA;
    --atomicDark: #333333;
    --atomicGray: #999999;
    --atomicLightGray: #F5F5F5;
    --atomicWhite: #FFFFFF;
    --atomicBlack: #000000;
    
    /* Layout Settings */
    --widthMaxJobBoard: 1200px;
    --widthMaxApplication: 800px;
    
    /* Border Radius - Sharp, industrial feel */
    --borderRadiusContainer: 4px;
    --borderRadiusControl: 4px;
    --borderRadiusButton: 4px;
    
    /* Typography */
    --fontFamily: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;
    --fontHeading: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Background - Changed to black */
    --colorAppBackground: #000000;
    
    /* Shadows - Updated for dark theme */
    --shadowSm: 0 1px 3px rgba(172, 221, 238, 0.1);
    --shadowMd: 0 4px 12px rgba(172, 221, 238, 0.15);
    --shadowLg: 0 8px 24px rgba(172, 221, 238, 0.2);
    
    /* Transitions */
    --transitionBase: all 0.2s ease;
    --transitionSlow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   GLOBAL STYLES
   =================================== */
body {
    font-family: var(--fontFamily);
    color: var(--atomicWhite);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--atomicBlack) !important;
}

/* Force black background on the main container */
.ashby-job-posting-brief-list {
    background: var(--atomicBlack) !important;
    color: var(--atomicWhite);
}

/* ===================================
   JOB BOARD CONTAINER & LAYOUT
   =================================== */

/* Main job board heading - hide if duplicate */
.ashby-job-board-heading {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Job count indicator */
.ashby-job-board-heading-count {
    display: inline-block;
    padding: 4px 12px;
    background: var(--atomicPrimary);
    color: var(--atomicWhite);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 1rem;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(17, 114, 186, 0.3);
}

/* ===================================
   FILTERS
   =================================== */

/* Filter container styling */
.ashby-job-board-filter {
    background: #1A1A1A;
    border: 2px solid var(--atomicPrimary);
    border-radius: var(--borderRadiusControl);
    padding: 10px 16px;
    font-size: 0.95rem;
    color: var(--atomicWhite);
    transition: var(--transitionBase);
    cursor: pointer;
    min-width: 180px;
}

.ashby-job-board-filter:hover {
    border-color: var(--atomicAccent);
    box-shadow: 0 0 0 3px rgba(172, 221, 238, 0.2);
    background: #262626;
}

.ashby-job-board-filter:focus {
    outline: none;
    border-color: var(--atomicAccent);
    box-shadow: 0 0 0 3px rgba(172, 221, 238, 0.3);
}

/* Filters label */
.ashby-job-board-filters-label {
    color: var(--atomicWhite);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 1rem;
}

/* Reset filters button */
.ashby-job-board-reset-filters-label {
    color: var(--atomicAccent);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transitionBase);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ashby-job-board-reset-filters-label:hover {
    color: var(--atomicPrimary);
    text-decoration-thickness: 2px;
}

/* ===================================
   JOB POSTINGS LIST
   =================================== */

/* Job posting brief container */
.ashby-job-posting-brief {
    background: #1A1A1A;
    border: 1px solid #2A2A2A;
    border-radius: var(--borderRadiusContainer);
    padding: 24px;
    margin-bottom: 16px;
    transition: var(--transitionSlow);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Add accent line on the left */
.ashby-job-posting-brief::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--atomicPrimary) 0%, var(--atomicAccent) 100%);
    opacity: 0;
    transition: var(--transitionBase);
}

.ashby-job-posting-brief:hover {
    transform: translateX(4px);
    box-shadow: var(--shadowLg);
    border-color: var(--atomicPrimary);
    background: #262626;
}

.ashby-job-posting-brief:hover::before {
    opacity: 1;
}

/* Job posting title in list */
.ashby-job-posting-brief-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--atomicWhite);
    margin-bottom: 0.5rem;
    transition: var(--transitionBase);
}

.ashby-job-posting-brief:hover .ashby-job-posting-brief-title {
    color: var(--atomicAccent);
}

/* Job posting details on list page */
.ashby-job-posting-brief-details {
    color: #CCCCCC;
    font-size: 0.95rem;
    line-height: 1.6;
}

.ashby-job-posting-brief-details * {
    background: transparent !important;
}

/* Department headings */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
    color: var(--atomicAccent);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--atomicPrimary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Team level headings */
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
    color: #AAAAAA;
    font-size: 0.95rem;
    font-weight: 500;
    margin-left: 1rem;
    margin-top: 0.5rem;
}

/* ===================================
   JOB POSTING DETAIL PAGE
   =================================== */

/* Back button */
.ashby-job-board-back-to-all-jobs-button {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: transparent;
    color: var(--atomicAccent);
    border: 2px solid var(--atomicPrimary);
    border-radius: var(--borderRadiusButton);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transitionBase);
    margin-bottom: 2rem;
}

.ashby-job-board-back-to-all-jobs-button:hover {
    background: var(--atomicPrimary);
    color: var(--atomicWhite);
    transform: translateX(-4px);
    box-shadow: var(--shadowMd);
}

/* Job posting header */
.ashby-job-posting-header {
    padding: 2rem 0;
    border-bottom: 2px solid var(--atomicPrimary);
    margin-bottom: 2rem;
    background: var(--atomicBlack);
}

/* Job posting heading */
.ashby-job-posting-heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--atomicWhite);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

/* Content panes */
.ashby-job-posting-left-pane {
    background: #1A1A1A !important;
    padding: 2rem;
    border-radius: var(--borderRadiusContainer);
    box-shadow: var(--shadowSm);
    border: 1px solid var(--atomicPrimary);
    color: var(--atomicWhite) !important;
}

.ashby-job-posting-left-pane p {
    color: #CCCCCC !important;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.ashby-job-posting-left-pane h1,
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3,
.ashby-job-posting-left-pane h4 {
    color: var(--atomicAccent) !important;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.ashby-job-posting-left-pane ul,
.ashby-job-posting-left-pane ol {
    color: #CCCCCC !important;
}

.ashby-job-posting-left-pane strong {
    color: var(--atomicWhite) !important;
    font-weight: 600;
}

.ashby-job-posting-right-pane {
    background: #1A1A1A !important;
    padding: 2rem;
    border-radius: var(--borderRadiusContainer);
    box-shadow: var(--shadowSm);
    position: sticky;
    top: 2rem;
    border: 1px solid var(--atomicPrimary);
    color: var(--atomicWhite) !important;
}

/* Force all direct children divs to have dark background */
.ashby-job-posting-right-pane > div {
    background: #1A1A1A !important;
    color: var(--atomicWhite) !important;
}

.ashby-job-posting-right-pane > div > div {
    background: #1A1A1A !important;
    color: var(--atomicWhite) !important;
}

.ashby-job-posting-right-pane div {
    background-color: transparent !important;
}

.ashby-job-posting-right-pane p,
.ashby-job-posting-right-pane span,
.ashby-job-posting-right-pane li {
    color: #CCCCCC !important;
}

.ashby-job-posting-right-pane h1,
.ashby-job-posting-right-pane h2,
.ashby-job-posting-right-pane h3,
.ashby-job-posting-right-pane h4 {
    color: var(--atomicAccent) !important;
}

.ashby-job-posting-right-pane strong,
.ashby-job-posting-right-pane b {
    color: var(--atomicWhite) !important;
}

/* Job details sidebar */
.ashby-job-posting-right-pane dt {
    color: var(--atomicAccent) !important;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.ashby-job-posting-right-pane dd {
    color: var(--atomicWhite) !important;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* Tabs */
.ashby-job-posting-right-pane-tab-slider {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #2A2A2A;
    margin-bottom: 2rem;
    background: transparent;
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
    padding: 12px 24px;
    background: transparent;
    border: none;
    color: #999999;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transitionBase);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 1;
    text-align: center;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.ashby-job-posting-right-pane-overview-tab:hover,
.ashby-job-posting-right-pane-application-tab:hover {
    color: var(--atomicAccent);
    background: rgba(17, 114, 186, 0.05);
}

/* Active/focused tab */
.ashby-job-posting-right-pane-overview-tab:focus,
.ashby-job-posting-right-pane-application-tab:focus {
    color: var(--atomicAccent);
    border-bottom-color: var(--atomicPrimary);
    outline: none;
}

/* ===================================
   APPLICATION FORM
   =================================== */

/* Form container */
.ashby-application-form-container {
    background: #1A1A1A;
    padding: 2rem;
    border-radius: var(--borderRadiusContainer);
    color: var(--atomicWhite);
}

/* Form sections */
.ashby-application-form-section-container {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #2A2A2A;
}

.ashby-application-form-section-container:last-child {
    border-bottom: none;
}

/* Section headers */
.ashby-application-form-section-header {
    margin-bottom: 1.5rem;
}

.ashby-application-form-section-header-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--atomicAccent);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.ashby-application-form-section-header-description {
    color: #CCCCCC;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Form fields */
.ashby-application-form-field-entry {
    margin-bottom: 1.5rem;
}

.ashby-application-form-question-title {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--atomicWhite);
    font-size: 0.9rem;
}

.ashby-application-form-question-description {
    color: #AAAAAA;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Form inputs */
.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #2A2A2A;
    border-radius: var(--borderRadiusControl);
    font-size: 0.95rem;
    font-family: var(--fontFamily);
    transition: var(--transitionBase);
    background: #0A0A0A;
    color: var(--atomicWhite);
}

.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
    outline: none;
    border-color: var(--atomicPrimary);
    box-shadow: 0 0 0 3px rgba(17, 114, 186, 0.2);
    background: #1A1A1A;
}

.ashby-application-form-field-entry textarea {
    min-height: 120px;
    resize: vertical;
}

/* Required field indicator */
.ashby-application-form-question-title:has(+ input[required])::after,
.ashby-application-form-question-title:has(+ textarea[required])::after {
    content: ' *';
    color: #EF4444;
}

/* ===================================
   AUTOFILL COMPONENTS
   =================================== */

/* Autofill container */
.ashby-application-form-autofill-pane {
    background: linear-gradient(135deg, rgba(172, 221, 238, 0.1) 0%, rgba(17, 114, 186, 0.05) 100%);
    border: 2px dashed var(--atomicAccent);
    border-radius: var(--borderRadiusContainer);
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

/* Autofill input root */
.ashby-application-form-autofill-input-root {
    transition: var(--transitionBase);
}

.ashby-application-form-autofill-input-root[data-state="drag"] {
    background: var(--atomicAccentLight);
    border-color: var(--atomicPrimary);
}

.ashby-application-form-autofill-input-root[data-state="pending"] {
    opacity: 0.7;
    pointer-events: none;
}

/* Autofill icon */
.ashby-application-form-autofill-input-icon {
    color: var(--atomicPrimary);
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Autofill title and description */
.ashby-application-form-autofill-input-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--atomicDark);
    margin-bottom: 0.5rem;
}

.ashby-application-form-autofill-input-description {
    color: var(--atomicGray);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* Autofill uploader */
.ashby-application-form-autofill-uploader {
    display: inline-block;
    padding: 12px 24px;
    background: var(--atomicPrimary);
    color: var(--atomicWhite);
    border-radius: var(--borderRadiusButton);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transitionBase);
}

.ashby-application-form-autofill-uploader:hover {
    background: var(--atomicPrimaryDark);
    transform: translateY(-2px);
    box-shadow: var(--shadowMd);
}

/* Form alerts */
.ashby-application-form-autofill-input-form-alert {
    padding: 12px 16px;
    border-radius: var(--borderRadiusContainer);
    margin-top: 1rem;
    font-size: 0.9rem;
}

.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #6EE7B7;
}

.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FCA5A5;
}

/* ===================================
   SUBMIT BUTTON
   =================================== */

.ashby-application-form-submit-button {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--atomicPrimary) 0%, var(--atomicPrimaryLight) 100%);
    color: var(--atomicWhite);
    border: none;
    border-radius: var(--borderRadiusButton);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transitionBase);
    position: relative;
    overflow: hidden;
    min-width: 200px;
}

/* Hover state for submit button */
.ashby-application-form-submit-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadowLg);
    background: linear-gradient(135deg, var(--atomicPrimaryDark) 0%, var(--atomicPrimary) 100%);
}

/* ===================================
   SUCCESS/ERROR/BLOCKED MESSAGES
   =================================== */

.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
    padding: 2rem;
    border-radius: var(--borderRadiusContainer);
    text-align: center;
    margin: 2rem 0;
}

.ashby-application-form-success-container {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    border: 2px solid #34D399;
    color: #065F46;
}

.ashby-application-form-failure-container {
    background: #FEE2E2;
    border: 2px solid #F87171;
    color: #991B1B;
}

.ashby-application-form-blocked-application-container {
    background: #FEF3C7;
    border: 2px solid #FCD34D;
    color: #92400E;
}

/* ===================================
   CONSENT & LEGAL TEXT
   =================================== */

.ashby-application-form-texting-consent-description {
    font-size: 0.75rem;
    color: var(--atomicGray);
    line-height: 1.5;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--atomicLightGray);
    border-radius: var(--borderRadiusControl);
}

/* ===================================
   SURVEY FORM
   =================================== */

.ashby-survey-form-container {
    background: var(--atomicLightGray);
    padding: 2rem;
    border-radius: var(--borderRadiusContainer);
    margin-top: 2rem;
    border: 1px solid var(--atomicAccentLight);
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 768px) {
    :root {
        --widthMaxJobBoard: 100%;
        --widthMaxApplication: 100%;
    }
    
    .ashby-job-board-heading {
        font-size: 1.75rem;
    }
    
    .ashby-job-posting-brief {
        padding: 16px;
    }
    
    .ashby-job-posting-left-pane,
    .ashby-job-posting-right-pane {
        padding: 1rem;
    }
    
    .ashby-job-posting-right-pane {
        position: static;
        margin-top: 2rem;
    }
    
    .ashby-application-form-submit-button {
        width: 100%;
    }
}

/* ===================================
   ANIMATIONS & INTERACTIONS
   =================================== */

/* Fade in animation for new content */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ashby-job-posting-brief-list > * {
    animation: fadeIn 0.3s ease-out backwards;
}

.ashby-job-posting-brief-list > *:nth-child(1) { animation-delay: 0.1s; }
.ashby-job-posting-brief-list > *:nth-child(2) { animation-delay: 0.15s; }
.ashby-job-posting-brief-list > *:nth-child(3) { animation-delay: 0.2s; }
.ashby-job-posting-brief-list > *:nth-child(4) { animation-delay: 0.25s; }
.ashby-job-posting-brief-list > *:nth-child(5) { animation-delay: 0.3s; }

/* ===================================
   UTILITY OVERRIDES
   =================================== */

/* Ensure consistent link styling */
a {
    color: var(--atomicPrimary);
    text-decoration: none;
    transition: var(--transitionBase);
}

a:hover {
    color: var(--atomicPrimaryDark);
    text-decoration: underline;
}

/* Ensure proper focus states for accessibility */
*:focus-visible {
    outline: 2px solid var(--atomicPrimary);
    outline-offset: 2px;
}

/* Remove default button styles */
button {
    font-family: inherit;
}

/* Ensure proper select styling */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}