/**
 * Spaitial - Ashby Job Board Custom CSS
 * 
 * Upload this CSS to your Ashby admin panel:
 * Settings > Job Board > Appearance > Custom CSS
 * 
 * Color Reference (from globals.css dark theme):
 * - Background: #020408 (oklch 0.08)
 * - Card/Muted: #242424 (oklch 0.145)
 * - Border: #3d3d3d (oklch 0.269)
 * - Primary: #38bdf8 (oklch 0.71 0.13 215) - sky blue
 * - Foreground: #fafafa (oklch 0.985)
 * - Muted text: #a3a3a3 (oklch 0.708)
 */

:root {
  /* Primary brand color - sky blue */
  --colorPrimary900: #38bdf8;
  --colorPrimary600: #0ea5e9;
  
  /* Max width of job board container */
  --widthMaxJobBoard: 1200px;
  
  /* Border radius - match site's rounded-2xl (16px) */
  --borderRadiusContainer: 16px;
  --borderRadiusControl: 10px;
  --borderRadiusButton: 9999px; /* Pill buttons like site */
  
  /* Font family - match site */
  --fontFamily: 'Noto Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Dark background */
  --colorAppBackground: #020408;
}

/* ========================================
   GLOBAL DARK THEME
   ======================================== */

body {
  background-color: #020408 !important;
  color: #fafafa !important;
}

/* ========================================
   JOB BOARD LIST
   ======================================== */

/* Job board heading */
.ashby-job-board-heading,
.ashby-job-board-heading a {
  color: #fafafa !important;
  font-weight: 700 !important;
}

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

/* Filters */
.ashby-job-board-filter {
  background: #242424 !important;
  border: 1px solid #3d3d3d !important;
  border-radius: 10px !important;
  color: #fafafa !important;
}

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

/* Department headings */
.ashby-department-heading,
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level {
  color: #fafafa !important;
  font-weight: 600 !important;
}

/* Job posting cards */
.ashby-job-posting-brief {
  background: #242424 !important;
  border: 1px solid #3d3d3d !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  padding: 20px !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

.ashby-job-posting-brief:hover {
  background: #2a2a2a !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

/* Job titles */
.ashby-job-posting-brief-title,
.ashby-job-posting-brief-title a {
  color: #fafafa !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.ashby-job-posting-brief-title a:hover {
  color: #38bdf8 !important;
}

/* Job details (location, type, etc.) */
.ashby-job-posting-brief-details {
  color: #a3a3a3 !important;
}

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

/* Back button */
.ashby-job-board-back-to-all-jobs-button {
  color: #a3a3a3 !important;
  transition: color 0.2s ease !important;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  color: #fafafa !important;
}

/* Job posting heading */
.ashby-job-posting-heading {
  color: #fafafa !important;
  font-weight: 700 !important;
}

/* Left pane (job details) */
.ashby-job-posting-left-pane {
  background: #020408 !important;
  color: #fafafa !important;
}

.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane li {
  color: #d4d4d4 !important;
  line-height: 1.7 !important;
}

/* Right pane (tabs and form) */
.ashby-job-posting-right-pane {
  background: #020408 !important;
  color: #fafafa !important;
}

.ashby-job-posting-right-pane > div,
.ashby-job-posting-right-pane [role="tabpanel"],
.ashby-job-posting-right-pane section,
.ashby-job-posting-right-pane article {
  background: transparent !important;
}

.ashby-job-posting-right-pane p,
.ashby-job-posting-right-pane li {
  color: #d4d4d4 !important;
  line-height: 1.7 !important;
}

/* Tabs */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  color: #a3a3a3 !important;
  border-bottom: 2px solid transparent !important;
  padding: 12px 20px !important;
  transition: color 0.2s ease !important;
}

.ashby-job-posting-right-pane-overview-tab:hover,
.ashby-job-posting-right-pane-application-tab:hover {
  color: #fafafa !important;
}

.ashby-job-posting-right-pane-overview-tab[aria-selected="true"],
.ashby-job-posting-right-pane-application-tab[aria-selected="true"] {
  color: #38bdf8 !important;
  border-bottom-color: #38bdf8 !important;
}

/* Links in content */
.ashby-job-posting-right-pane a,
.ashby-job-posting-left-pane a {
  color: #38bdf8 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

.ashby-job-posting-right-pane a:hover,
.ashby-job-posting-left-pane a:hover {
  color: #7dd3fc !important;
}

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

/* Form container */
.ashby-application-form-container {
  background: transparent !important;
  color: #fafafa !important;
}

/* Section headers */
.ashby-application-form-section-header-title {
  color: #fafafa !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

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

/* Question labels */
.ashby-application-form-question-title {
  color: #fafafa !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

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

/* Form inputs */
.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  background: #242424 !important;
  border: 1px solid #3d3d3d !important;
  border-radius: 10px !important;
  color: #fafafa !important;
  padding: 12px 16px !important;
  transition: border-color 0.2s ease !important;
}

.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
  border-color: #38bdf8 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}

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

/* Autofill / Resume upload */
.ashby-application-form-autofill-input-root,
.ashby-application-form-autofill-input-base-layer {
  background: #242424 !important;
  border: 1px solid #3d3d3d !important;
  border-radius: 10px !important;
}

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

.ashby-application-form-autofill-pane {
  background: transparent !important;
  color: #fafafa !important;
}

.ashby-application-form-autofill-uploader {
  background: #242424 !important;
  border: 2px dashed #3d3d3d !important;
  border-radius: 16px !important;
  color: #a3a3a3 !important;
  transition: border-color 0.2s ease !important;
}

.ashby-application-form-autofill-uploader:hover {
  border-color: rgba(56, 189, 248, 0.4) !important;
}

.ashby-application-form-autofill-input-base-layer button {
  background: #020408 !important;
  color: #fafafa !important;
  border: 1px solid #3d3d3d !important;
  border-radius: 9999px !important;
}

/* Submit button - primary pill style */
.ashby-application-form-submit-button {
  background: #38bdf8 !important;
  color: #0c4a6e !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 14px 28px !important;
  transition: background-color 0.2s ease !important;
}

.ashby-application-form-submit-button:hover {
  background: #7dd3fc !important;
}

/* Success message */
.ashby-application-form-success-container {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-radius: 16px !important;
  color: #fafafa !important;
  padding: 20px !important;
}

/* Failure message */
.ashby-application-form-failure-container {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 16px !important;
  color: #fafafa !important;
  padding: 20px !important;
}

/* ========================================
   MISC
   ======================================== */

/* Horizontal rules */
hr {
  border-color: #3d3d3d !important;
}

/* Scrollbar (webkit) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #020408;
}

::-webkit-scrollbar-thumb {
  background: #3d3d3d;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #525252;
}