/* Project-specific admin tweaks, loaded via UNFOLD["STYLES"].
   Layout in the custom admin pages uses Unfold's own compiled Tailwind classes;
   only what Tailwind cannot express lives here. */

/* ------------------------------------------------------------------ buttons
   Django's own `class="button"` is not styled by Unfold at all -- a link
   carrying it renders as bare text, which is why the Create/Email actions
   looked like nothing. Tailwind utilities are no help either: Unfold ships a
   pre-compiled stylesheet, so a class it does not already use simply does not
   exist. Hence real CSS, defined once here. */
.jsbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .25rem .625rem;
  min-width: 4.25rem;
  border: 1px solid transparent;
  border-radius: .375rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}
.jsbtn:hover { text-decoration: none; }

.jsbtn--primary { background: #2563eb; color: #fff; }
.jsbtn--primary:hover { background: #1d4ed8; color: #fff; }
.jsbtn--success { background: #16a34a; color: #fff; }
.jsbtn--success:hover { background: #15803d; color: #fff; }
.jsbtn--danger { background: #dc2626; color: #fff; }
.jsbtn--danger:hover { background: #b91c1c; color: #fff; }

.jsbtn--ghost { background: transparent; border-color: #d1d5db; color: #374151; }
.jsbtn--ghost:hover { background: #f3f4f6; color: #111827; }
.dark .jsbtn--ghost, html.dark .jsbtn--ghost {
  border-color: #4b5563; color: #e5e7eb;
}
.dark .jsbtn--ghost:hover, html.dark .jsbtn--ghost:hover { background: #374151; }

/* Not a button: a statement that there is nothing to press. */
.jsnote { font-size: .75rem; font-weight: 500; white-space: nowrap; }
.jsnote--muted { color: #9ca3af; }
.jsnote--danger { color: #b91c1c; }
.jsnote--success { color: #16a34a; }

/* ------------------------------------------------------------ column widths
   Unfold's changelist is `table-layout: auto`, so the first text columns take
   everything and the action columns are squeezed into nothing. Fixed layout
   with explicit widths is the only way to hold them, and it only applies at
   the breakpoint where Unfold actually renders a table -- below `lg` each row
   becomes a stacked card and widths would be wrong. */
@media (min-width: 1024px) {
  body.model-job #result_list,
  body.model-company #result_list,
  body.model-scraperun #result_list {
    table-layout: fixed;
  }

  /* Jobs */
  body.model-job #result_list .action-checkbox-column,
  body.model-job #result_list .action-checkbox { width: 2.5rem; }
  body.model-job #result_list .column-title,
  body.model-job #result_list .field-title { width: 19%; }
  body.model-job #result_list .column-company,
  body.model-job #result_list .field-company { width: 12%; }
  body.model-job #result_list .column-location,
  body.model-job #result_list .field-location { width: 11%; }
  body.model-job #result_list .column-job_link,
  body.model-job #result_list .field-job_link { width: 6rem; }
  body.model-job #result_list .column-source_label,
  body.model-job #result_list .field-source_label { width: 8rem; }
  body.model-job #result_list .column-posted,
  body.model-job #result_list .field-posted { width: 5.5rem; }
  body.model-job #result_list .column-status_badge,
  body.model-job #result_list .field-status_badge { width: 7rem; }
  body.model-job #result_list .column-keywords_hit,
  body.model-job #result_list .field-keywords_hit { width: 12%; }
  body.model-job #result_list .column-cover_letter_action,
  body.model-job #result_list .field-cover_letter_action { width: 6rem; }
  body.model-job #result_list .column-email_action,
  body.model-job #result_list .field-email_action { width: 7.5rem; }

  /* Long text has to wrap rather than force the column wider. */
  body.model-job #result_list .field-title,
  body.model-job #result_list .field-company,
  body.model-job #result_list .field-location,
  body.model-company #result_list .field-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Companies */
  body.model-company #result_list .column-name,
  body.model-company #result_list .field-name { width: 20%; }
  body.model-company #result_list .column-region,
  body.model-company #result_list .field-region { width: 6rem; }
  body.model-company #result_list .column-country,
  body.model-company #result_list .field-country { width: 5rem; }
  body.model-company #result_list .column-careers_status,
  body.model-company #result_list .field-careers_status { width: 9rem; }
  body.model-company #result_list .column-matched_jobs,
  body.model-company #result_list .field-matched_jobs { width: 7rem; }

  /* Runs. Under table-layout: fixed an unsized column takes an equal share of
     what is left, so "Companies processed" ended up as narrow as "Failed" and
     the two headers overlapped. Every column is sized here for that reason. */
  body.model-scraperun #result_list .column-__str__,
  body.model-scraperun #result_list .field-__str__ { width: 9rem; }
  body.model-scraperun #result_list .column-kind,
  body.model-scraperun #result_list .field-kind { width: 8rem; }
  body.model-scraperun #result_list .column-status_badge,
  body.model-scraperun #result_list .field-status_badge { width: 6rem; }
  body.model-scraperun #result_list .column-progress_bar,
  body.model-scraperun #result_list .field-progress_bar { width: 9rem; }
  body.model-scraperun #result_list .column-companies_done,
  body.model-scraperun #result_list .field-companies_done { width: 8rem; }
  body.model-scraperun #result_list .column-failures,
  body.model-scraperun #result_list .field-failures { width: 5rem; }
  body.model-scraperun #result_list .column-jobs_found,
  body.model-scraperun #result_list .field-jobs_found { width: 6rem; }
  body.model-scraperun #result_list .column-jobs_matched,
  body.model-scraperun #result_list .field-jobs_matched { width: 7rem; }
  body.model-scraperun #result_list .column-started_at,
  body.model-scraperun #result_list .field-started_at { width: 9rem; }
  body.model-scraperun #result_list .column-duration_display,
  body.model-scraperun #result_list .field-duration_display { width: 6rem; }
  body.model-scraperun #result_list .column-run_controls,
  body.model-scraperun #result_list .field-run_controls { width: 7rem; }

  /* Long headers wrap rather than run into the next one. */
  body.model-scraperun #result_list th,
  body.model-job #result_list th,
  body.model-company #result_list th { white-space: normal; overflow-wrap: anywhere; }
}

/* The keyword chips wrap inside their column instead of stretching it. */
#result_list .field-keywords_hit > * { flex-wrap: wrap; }
.jschip {
  display: inline-block;
  padding: 1px 6px;
  margin: 1px;
  border-radius: 8px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11px;
  white-space: nowrap;
}
.dark .jschip, html.dark .jschip { background: #312e81; color: #c7d2fe; }
.gjs-field-wrapper { margin-top: .5rem; }

/* Heatmap stage. The page is rendered at its real breakpoint width inside an
   iframe and scaled down with a transform, so the stored click coordinates stay
   valid -- resizing the iframe instead would reflow the page and move them. */
.hm-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .75rem; align-items: start; }
.hm-grid--focus { grid-auto-flow: row; grid-auto-columns: auto; }
.hm-col { min-width: 0; }
.hm-viewport { position: relative; overflow: hidden; }
.hm-stage { position: relative; transform-origin: top left; }
.hm-frame { position: absolute; inset: 0; border: 0; display: block; pointer-events: none; }
.hm-canvas { position: absolute; inset: 0; pointer-events: none; }

@media (max-width: 900px) {
  .hm-grid { grid-auto-flow: row; grid-auto-columns: auto; }
}