/* ======================================================
   Global
   ====================================================== */
body {
  background-color: #f8fafc;
  color: #0f172a;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ======================================================
   Page title
   ====================================================== */
h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }

/* ======================================================
   Cards / Sections
   ====================================================== */
.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: none;
  padding: 16px;
}

/* ======================================================
   Recommendation box
   ====================================================== */
.recommendation-box {
  background-color: #f0f5ff;
  border: 1px solid #c7d2fe;
  border-left: 6px solid #1e3a8a;
  border-radius: 14px;
  padding: 16px 18px;
}

.recommendation-box strong { color: #1e3a8a; }
.recommendation-box p,
.recommendation-box li { color: #1f2933; line-height: 1.45; }

/* ======================================================
   Buttons
   ====================================================== */
button {
  border-radius: 12px !important;
  font-weight: 600;
}

button#btn_run {
  background-color: #1e3a8a !important;
  border: 1px solid #1e3a8a !important;
  color: #ffffff !important;
}

button#btn_clear {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* ======================================================
   DataTable header — dark bold text + subtle bottom line
   ====================================================== */
.dash-table-container th {
  background-color: #e8edfb !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 13.5px;
  padding: 6px 10px !important;

  /* subtle line (not thick) */
  border-bottom: 1px solid #93c5fd !important;

  vertical-align: middle !important;
}

/* ======================================================
   Sort arrows — darker & clearer
   ====================================================== */
.dash-table-container .dash-sort {
  color: #334155 !important;
  opacity: 0.95 !important;
}
.dash-table-container .dash-sort:hover {
  color: #0f172a !important;
  opacity: 1 !important;
}
.dash-table-container .dash-sort--active {
  color: #0f172a !important;
  opacity: 1 !important;
}

/* ======================================================
   DataTable body
   ====================================================== */
.dash-table-container td {
  border-bottom: 1px solid #e5e7eb !important;
  padding: 8px 10px !important;
  background-color: #ffffff;
  color: #0f172a;
}

.dash-table-container tr:nth-child(even) td {
  background-color: #f9fafb !important;
}
.dash-table-container tr:hover td {
  background-color: #eef2ff !important;
}

/* ======================================================
   Subtle divider between table groups
   ====================================================== */
.dash-table-container {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.dash-table-container + .dash-table-container {
  margin-top: 16px;
}

/* ======================================================
   Inputs / Dropdowns
   ====================================================== */
.Select-control {
  border-radius: 12px !important;
  border-color: #cbd5e1 !important;
}

/* ======================================================
   Helper text
   ====================================================== */
small,
.helper-text {
  color: #475569;
}
/* ======================================================
   Fix clipped letters ONLY in Job/SOC input areas
   (does NOT affect dropdown search boxes or other inputs)
   ====================================================== */
/* Fix clipped letters ONLY in Job/SOC input areas */
#job_inputs input,
#soc_inputs input {
  line-height: 1.4 !important;
  padding: 10px 12px !important;
  height: auto !important;
  box-sizing: border-box !important;
}

#job_inputs textarea,
#job_inputs #job_desc {
  line-height: 1.4 !important;
  padding: 10px 12px !important;
  height: 140px !important;
  min-height: 140px !important;
  box-sizing: border-box !important;
}