/* ========================================
   ASHBY JOB BOARD DARK THEME CSS
   Matches website dark green theme: rgb(15, 25, 12)
   ======================================== */

/* === CSS Variables for Theming === */
:root {
  /* Brand colors */
  --colorBrand: #8FC693;
  --colorBrandLight: #A8D4AB;
  --colorBrandDark: #76A87A;
  
  /* Text colors */
  --colorPrimary900: hsl(210, 40%, 98%);      /* Main text */
  --colorPrimary600: hsl(215, 20.2%, 65.1%);  /* Muted text */
  
  /* Background colors */
  --colorAppBackground: rgb(15, 25, 12);      /* Main dark green */
  --colorCardBackground: rgb(25, 35, 22);     /* Slightly lighter for cards */
  
  /* Border and utility colors */
  --colorBorder: hsl(217.2, 32.6%, 17.5%);
  --colorAccent: hsl(217.2, 32.6%, 17.5%);
  --colorSuccess: #8FC693;
  --colorDestructive: hsl(0, 62.8%, 30.6%);
  
  /* Typography */
  --fontFamily: 'Inter', sans-serif;
  
  /* Sizing */
  --borderRadiusContainer: 8px;
  --borderRadiusControl: 8px;
  --borderRadiusButton: 8px;
}

/* ========================================
   BASE CONTAINER STYLES
   ======================================== */

/* Main application container */
.ashby-application-form-container {
  background-color: rgb(15, 25, 12) !important;
  color: hsl(210, 40%, 98%) !important;
  padding: 1.5rem;
  font-family: 'Inter', sans-serif;
}

/* ========================================
   JOB POSTING PANES
   ======================================== */

/* Left pane (job details sidebar) */
.ashby-job-posting-left-pane {
  background-color: rgb(15, 25, 12) !important;
  color: hsl(210, 40%, 98%) !important;
  font-family: 'Inter', sans-serif;
}

/* Right pane (main content area) */
.ashby-job-posting-right-pane {
  background-color: rgb(15, 25, 12) !important;
  color: hsl(210, 40%, 98%) !important;
  font-family: 'Inter', sans-serif;
}

/* Ensure all child elements in right pane inherit dark theme */
.ashby-job-posting-right-pane * {
  background: transparent !important;
  color: inherit !important;
}

/* Override text color for better readability */
.ashby-job-posting-right-pane p,
.ashby-job-posting-right-pane li,
.ashby-job-posting-right-pane strong {
  color: hsl(210, 40%, 98%) !important;
}

/* ========================================
   NAVIGATION TABS
   ======================================== */

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  color: hsl(210, 40%, 98%) !important;
  background: transparent !important;
}

.ashby-job-posting-right-pane-tab-slider {
  background-color: #8FC693 !important;
}

/* ========================================
   JOB LISTINGS
   ======================================== */

/* Job posting cards */
.ashby-job-posting-brief {
  background-color: rgb(25, 35, 22) !important;
  border: 1px solid hsl(217.2, 32.6%, 17.5%) !important;
  border-radius: 0.5rem;
  padding: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ashby-job-posting-brief:hover,
.ashby-job-posting-brief:focus {
  border-color: #8FC693 !important;
  box-shadow: 0 0 0 1px #8FC693 !important;
}

/* Job titles and details */
.ashby-job-posting-brief-title {
  color: hsl(210, 40%, 98%) !important;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.ashby-job-posting-brief-details {
  color: hsl(215, 20.2%, 65.1%) !important;
  font-family: 'Inter', sans-serif;
}

/* Department headings */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  color: hsl(210, 40%, 98%) !important;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  color: hsl(215, 20.2%, 65.1%) !important;
  font-family: 'Inter', sans-serif;
}

/* Main job posting heading */
.ashby-job-posting-heading {
  color: hsl(210, 40%, 98%) !important;
  font-family: 'Inter', sans-serif;
}

/* ========================================
   FILTERS AND CONTROLS
   ======================================== */

.ashby-job-board-filter {
  background-color: rgb(25, 35, 22) !important;
  color: hsl(210, 40%, 98%) !important;
  border: 1px solid hsl(217.2, 32.6%, 17.5%) !important;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-family: 'Inter', sans-serif;
}

.ashby-job-board-filter:focus {
  outline: 2px solid #8FC693 !important;
  outline-offset: 2px;
}

/* Back to all jobs button */
.ashby-job-board-back-to-all-jobs-button {
  background-color: transparent !important;
  color: #8FC693 !important;
  border: 1px solid #8FC693 !important;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  background-color: rgba(143, 198, 147, 0.1) !important;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Form field containers */
.ashby-application-form-field-entry {
  margin-bottom: 1.25rem;
  color: hsl(210, 40%, 98%) !important;
}

/* Question titles and descriptions */
.ashby-application-form-question-title {
  color: hsl(210, 40%, 98%) !important;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  margin-bottom: 0.5rem;
}

.ashby-application-form-question-description {
  color: hsl(215, 20.2%, 65.1%) !important;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  margin-bottom: 0.5rem;
}

/* Form sections */
.ashby-application-form-section-container {
  background-color: rgb(15, 25, 12) !important;
  border: 1px solid hsl(217.2, 32.6%, 17.5%) !important;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.ashby-application-form-section-header-title {
  color: hsl(210, 40%, 98%) !important;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  margin-bottom: 1rem;
}

.ashby-application-form-section-header-description {
  color: hsl(215, 20.2%, 65.1%) !important;
  font-family: 'Inter', sans-serif;
  margin-bottom: 1.5rem;
}

/* Autofill sections */
.ashby-application-form-autofill-pane {
  background-color: rgb(15, 25, 12) !important;
  border: 1px solid hsl(217.2, 32.6%, 17.5%) !important;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.ashby-application-form-autofill-input-root {
  background-color: rgb(25, 35, 22) !important;
  border: 1px solid hsl(217.2, 32.6%, 17.5%) !important;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.ashby-application-form-autofill-input-title {
  color: hsl(210, 40%, 98%) !important;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

.ashby-application-form-autofill-input-description {
  color: hsl(215, 20.2%, 65.1%) !important;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
}

/* ========================================
   BUTTONS
   ======================================== */

/* Submit button */
.ashby-application-form-submit-button {
  background-color: #8FC693 !important;
  color: rgb(15, 25, 12) !important;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

.ashby-application-form-submit-button:hover {
  background-color: #76A87A !important;
}

.ashby-application-form-submit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   LINKS
   ======================================== */

.ashby-job-posting-left-pane a,
.ashby-job-posting-right-pane a {
  color: #8FC693 !important;
  text-decoration: underline;
}

.ashby-job-posting-left-pane a:hover,
.ashby-job-posting-right-pane a:hover {
  text-decoration: none;
}

/* ========================================
   STATUS MESSAGES
   ======================================== */

.ashby-application-form-success-container {
  background-color: rgba(143, 198, 147, 0.2) !important;
  border: 1px solid #8FC693 !important;
  color: hsl(210, 40%, 98%) !important;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  font-family: 'Inter', sans-serif;
}

.ashby-application-form-failure-container {
  background-color: hsla(0, 62.8%, 30.6%, 0.2) !important;
  border: 1px solid hsl(0, 62.8%, 30.6%) !important;
  color: hsl(210, 40%, 98%) !important;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  font-family: 'Inter', sans-serif;
}

/* ========================================
   RESPONSIVE OVERRIDES
   Ensures dark theme persists across all viewport sizes
   ======================================== */

@media screen and (min-width: 1px) {
  .ashby-job-posting-right-pane {
    background-color: rgb(15, 25, 12) !important;
  }
  
  .ashby-job-posting-left-pane {
    background-color: rgb(15, 25, 12) !important;
  }
  
  .ashby-application-form-container {
    background-color: rgb(15, 25, 12) !important;
  }
}