/* AJSE — redesign v2 stylesheet
   Palette: bg #EBE7DD · ink #26312F · accent #40676C · lines #DFD9CC
   No external font or CDN requests: system font stack only.
   Loaded from ui.R via tags$link(rel="stylesheet", href="ajse.css") */

:root {
  --bg: #EBE7DD;
  --surface: #FBFAF6;
  --ink: #26312F;
  --ink-2: #44585A;
  --muted: #6E6B63;
  --muted-2: #918878;
  --line: #DFD9CC;
  --line-2: #CAC4B4;
  --accent: #40676C;
  --accent-dark: #2E4E52;
  --accent-wash: #E2ECEC;
  --row-hover: #EEF3F2;      /* table row hover / selected */
  --link-active: #23403F;    /* pressed link */
  --seen: #6E6B63;           /* opened vacancy, 5.1:1 on --surface */
  --zebra: #F5F2EA;          /* warm paper tint for even rows */
  --paper-head: #E9E4D8;     /* table header, same paper family */
  --pill-soon-bg: #EFE4D4;
  --pill-soon-fg: #8A6552;
  --pill-date-bg: #E2ECEC;
  --pill-date-fg: #2E4E52;
  --pill-roll-bg: #E7EDDF;
  --pill-roll-fg: #55703F;
  --pill-none-bg: #E9E5DA;
  --pill-none-fg: #6E6B63;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* one content column for the whole app: header, tabs, pages, footer */
  --col: 1240px;
  --gutter: 22px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { color: var(--accent-dark); text-decoration: none; }

.ajse-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Shiny's bootstrapPage() wraps everything in .container-fluid, which adds
   its own 15px gutter on top of ours — zeroed so the column below is the
   single source of horizontal alignment. */
body > .container-fluid,
.container-fluid > .ajse-shell { padding-left: 0; padding-right: 0; }

/* Every full-width strip lines its contents up on the same column, so the
   logo, the tabs, the filter card and the table share one left edge. */
.ajse-wrap,
.ajse-header-inner,
.ajse-tabs .nav-tabs,
.ajse-tabbar-inner,
.ajse-footer-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.ajse-wrap { padding-top: 0; padding-bottom: 0; }

/* ---------- header ---------- */

.ajse-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.ajse-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
  max-width: var(--col);
  margin: 0 auto;
}
.ajse-mark {
  width: 28px; height: 28px; flex: none;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.ajse-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ajse-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.ajse-brand-meta {
  font-size: 12px; color: var(--muted); white-space: nowrap;
  padding-left: 10px; border-left: 1px solid var(--line);
}
.ajse-cta {
  display: inline-flex; align-items: center;
  border-radius: 7px; padding: 7px 14px;
  font-size: 13px; font-weight: 600;
  background: var(--accent); color: #fff; white-space: nowrap;
  margin-left: auto;
}
.ajse-cta:hover, .ajse-cta:focus { background: var(--accent-dark); color: #fff; }

/* ---------- tabs ----------
   IMPORTANT: shiny::tabsetPanel() wraps its markup in <div class="tabbable">,
   so the <ul class="nav nav-tabs"> is a GRANDCHILD of .ajse-tabs, not a child.
   Every selector here is therefore a descendant selector — the earlier
   `.ajse-tabs > .nav-tabs` rules never matched, which is why the strip fell
   back to Bootstrap's default left-flush underlined tabs. */

.ajse-tabs {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.ajse-tabs ul,
.ajse-tabs .nav-tabs {
  list-style: none;
  padding-left: 0;
}
.ajse-tabs .nav-tabs > li { list-style: none; }
.ajse-tabs .nav-tabs > li::marker { content: none; }

/* The strip spans the full width but its contents sit in the same 1240px
   column as the page body, so the first tab lines up with the H1. */
.ajse-tabs .nav-tabs {
  display: flex;
  gap: 6px;
  max-width: var(--col);
  margin: 0 auto;
  padding: 8px var(--gutter);
  background: transparent;
  border: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  width: 100%;
}
.ajse-tabs .nav-tabs > li { margin: 0; float: none; }
.ajse-tabs .nav-tabs > li > a,
.ajse-tabs .nav-tabs .nav-link {
  display: block;
  border: 0 !important;
  background: transparent;
  border-radius: 8px;
  padding: 8px 16px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}
.ajse-tabs .nav-tabs > li > a:hover,
.ajse-tabs .nav-tabs .nav-link:hover {
  background: var(--accent-wash);
  color: var(--accent-dark);
}

/* active tab — accent fill (Bootstrap 3 marks the <li>, Bootstrap 5 the <a>) */
.ajse-tabs .nav-tabs > li.active > a,
.ajse-tabs .nav-tabs > li.active > a:hover,
.ajse-tabs .nav-tabs > li.active > a:focus,
.ajse-tabs .nav-tabs > li > a.active,
.ajse-tabs .nav-tabs .nav-link.active,
.ajse-tabs .nav-tabs .nav-item.show .nav-link {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600;
  border-color: transparent !important;
  box-shadow: 0 1px 2px rgba(46, 78, 82, 0.22);
}

/* pane visibility — declared explicitly so a missing/overridden Bootstrap
   rule can never leave every pane stacked on the page */
.ajse-tabs .tab-content { padding-top: 0; }
.ajse-tabs .tab-content > .tab-pane { display: none; }
.ajse-tabs .tab-content > .tab-pane.active,
.ajse-tabs .tab-content > .tab-pane.show.active { display: block; }

.ajse-tabbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.ajse-tabbar-inner { padding-top: 8px; padding-bottom: 8px; }

/* toolbar inside the search card: result count + CSV export. The download
   describes the current result set, so it lives here, not in the header. */
.ajse-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px; margin-left: auto;
}
.ajse-download {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12.5px; font-weight: 600;
  color: var(--accent);
  background: #fff;
  white-space: nowrap;
}
.ajse-download:hover { border-color: var(--accent); color: var(--accent-dark); }

/* ---------- generic blocks ---------- */

.ajse-page { padding-top: 22px; padding-bottom: 60px; }
.ajse-page h1 {
  margin: 0;
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
}
.ajse-lede {
  margin: 6px 0 0;
  font-size: 14.5px; color: var(--muted); max-width: 66ch;
}
.ajse-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
}
.ajse-card h2 {
  margin: 0;
  font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
}
.ajse-card p { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.ajse-note { margin-top: 14px; font-size: 13px; color: var(--muted-2); }
.ajse-mono { font-family: var(--mono); }
.ajse-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

/* ---------- stat strip ---------- */

.ajse-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 14px;
}
.ajse-stat { background: #fff; padding: 13px 16px; }
.ajse-stat-value { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.ajse-stat-value.is-accent { color: var(--accent); }
.ajse-stat-value.is-mono { font-family: var(--mono); font-size: 18px; padding-top: 5px; }
.ajse-stat-label { margin-top: 4px; font-size: 12.5px; color: #6E6B63; }
.ajse-stat-value.is-mono + .ajse-stat-label { margin-top: 8px; }

/* ---------- search / filter bar ---------- */

.ajse-filters {
  display: grid;
  gap: 9px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ajse-filters h1 { margin: 0; }
.ajse-filters .form-group { margin: 0; }
.ajse-filters .shiny-input-container { width: 100% !important; }
.ajse-search input[type="text"] {
  width: 100%;
  height: auto;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: #F5F2EA;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: none;
}
.ajse-search input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(64, 103, 108, 0.14);
}

/* position-type chips: radioButtons(inline = TRUE) restyled as pills */
.ajse-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ajse-chips .shiny-options-group { display: flex; flex-wrap: wrap; gap: 6px; }
.ajse-chips .radio-inline,
.ajse-chips .form-check-inline {
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
.ajse-chips input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  margin: 0;
}
.ajse-chips label span,
.ajse-chips .form-check-label {
  display: inline-block;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink-2);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.ajse-chips input[type="radio"]:checked + span,
.ajse-chips input[type="radio"]:checked + .form-check-label {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ajse-chips input[type="radio"]:focus-visible + span,
.ajse-chips input[type="radio"]:focus-visible + .form-check-label {
  box-shadow: 0 0 0 3px rgba(64, 103, 108, 0.20);
}
.ajse-count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ajse-count strong { color: var(--ink); font-weight: 600; }

/* ---------- results table (DT) ---------- */

.ajse-table-shell {
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.ajse-table-shell .dataTables_wrapper { padding: 0; }

/* Scrolling. The table keeps its 1020px minimum, so on a narrow screen the
   block that wraps it scrolls sideways instead of being clipped by the
   shell's overflow:hidden; tall result sets scroll vertically inside a
   capped box with a sticky header. `:has(> table)` targets whichever div DT
   actually puts the table in (bootstrap style adds .row/.col-sm-12). */
.ajse-table-shell .dataTables_wrapper:has(> table.dataTable),
.ajse-table-shell .dataTables_wrapper div:has(> table.dataTable) {
  overflow: auto;
  max-height: clamp(320px, 68vh, 760px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* fallback for engines without :has() — horizontal scroll at least */
.ajse-table-shell .dataTables_wrapper > .row,
.ajse-table-shell .dataTables_wrapper > .row > [class*="col-"] { overflow-x: auto; }

.ajse-table-shell table.dataTable {
  width: 100% !important;
  min-width: 1020px;
  table-layout: fixed;
  border-collapse: collapse !important;
  margin: 0 !important;
  font-size: 13.5px;
}
.ajse-table-shell table.dataTable thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3;
  padding: 11px 14px;
  background: var(--paper-head);
  border-bottom: 2px solid var(--accent) !important;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-dark);
  text-align: left;
}
.ajse-table-shell table.dataTable tbody td {
  padding: 11px 14px;
  border-top: 0 !important;
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
  color: var(--ink);
  vertical-align: top;
}
/* first column is the position title: it carries the row */
.ajse-table-shell table.dataTable tbody td:first-child {
  font-weight: 600;
  color: var(--ink);
}
/* Row selection. DT paints selected rows Bootstrap-blue (#B0BED9 / .active);
   repainted in the accent family. Selection is also multi-row by default \u2014
   pass `selection = "none"` (or "single") to DT::datatable() if rows should
   not be clickable at all. */
.ajse-table-shell table.dataTable tbody tr.selected,
.ajse-table-shell table.dataTable tbody tr.selected td,
.ajse-table-shell table.dataTable tbody tr.active,
.ajse-table-shell table.dataTable tbody tr.active td,
.ajse-table-shell table.dataTable tbody tr.selected:hover,
.ajse-table-shell table.dataTable tbody tr.selected:hover td {
  background: var(--accent-wash) !important;
  background-color: var(--accent-wash) !important;
  color: var(--ink) !important;
  box-shadow: none;
}
.ajse-table-shell table.dataTable tbody tr.selected td:first-child,
.ajse-table-shell table.dataTable tbody tr.active td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.ajse-table-shell table.dataTable tbody tr:nth-child(even) { background: var(--zebra); }
.ajse-table-shell table.dataTable tbody tr:hover,
.ajse-table-shell table.dataTable tbody tr:nth-child(even):hover {
  background: var(--accent-wash);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ajse-table-shell table.dataTable tbody td a.ajse-position {
  color: var(--ink); font-weight: 500;
}
.ajse-table-shell table.dataTable tbody td a.ajse-position:hover { color: var(--accent); }
.ajse-cell-muted { color: var(--ink-2); font-size: 12.5px; }
.ajse-cell-date { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.ajse-src { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.ajse-src:hover { color: var(--accent); }

/* deadline pills, emitted as HTML from the server */
.ajse-pill {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
}
.ajse-pill--soon { background: var(--pill-soon-bg); color: var(--pill-soon-fg); }
.ajse-pill--date { background: var(--pill-date-bg); color: var(--pill-date-fg); }
.ajse-pill--rolling { background: var(--pill-roll-bg); color: var(--pill-roll-fg); }
.ajse-pill--none { background: var(--pill-none-bg); color: var(--pill-none-fg); }

/* DT chrome: keep only what the design shows */
.ajse-table-shell .dataTables_filter,
.ajse-table-shell .dataTables_length { display: none; }
.ajse-table-shell .dataTables_info,
.ajse-table-shell .dataTables_paginate {
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
/* Pagination.
   style = 'bootstrap' makes DT emit Bootstrap 3 markup:
     <ul class="pagination"><li class="paginate_button"><a>1</a></li>…</ul>
   BS3 sets `.pagination > li { display:inline }` and floats the <a>, so any
   border/padding put on the <li> renders as a separate EMPTY box after the
   real buttons. Everything visible must therefore be styled on the <a>;
   the <li> is stripped bare. The bare `a.paginate_button` selectors cover
   DT's non-bootstrap markup, in case `style` is ever changed back. */

.ajse-table-shell .dataTables_paginate ul.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ajse-table-shell .dataTables_paginate li.paginate_button,
.ajse-table-shell .dataTables_paginate ul.pagination > li {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.ajse-table-shell .dataTables_paginate ul.pagination > li > a,
.ajse-table-shell .dataTables_paginate ul.pagination > li > span,
.ajse-table-shell .dataTables_paginate a.paginate_button {
  display: block;
  position: static;
  float: none !important;
  margin: 0 !important;
  padding: 4px 9px !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--ink-2) !important;
  font-size: 12.5px;
  line-height: 1.45;
  cursor: pointer;
}
.ajse-table-shell .dataTables_paginate ul.pagination > li > a:hover,
.ajse-table-shell .dataTables_paginate a.paginate_button:hover {
  border-color: var(--accent) !important;
  color: var(--accent-dark) !important;
  background: #fff !important;
}

/* current page — accent, matching the rest of the UI (not Bootstrap blue) */
.ajse-table-shell .dataTables_paginate ul.pagination > li.active > a,
.ajse-table-shell .dataTables_paginate ul.pagination > li.active > a:hover,
.ajse-table-shell .dataTables_paginate ul.pagination > li.active > a:focus,
.ajse-table-shell .dataTables_paginate ul.pagination > li.paginate_button.current > a,
.ajse-table-shell .dataTables_paginate a.paginate_button.current,
.ajse-table-shell .dataTables_paginate a.paginate_button.current:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* disabled Previous/Next */
.ajse-table-shell .dataTables_paginate ul.pagination > li.disabled > a,
.ajse-table-shell .dataTables_paginate ul.pagination > li.disabled > a:hover,
.ajse-table-shell .dataTables_paginate a.paginate_button.disabled {
  color: var(--muted-2) !important;
  background: #fff !important;
  border-color: var(--line) !important;
  cursor: default;
}
.ajse-table-shell .dataTables_paginate ul.pagination > li > a:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(64, 103, 108, 0.18);
}

/* empty state */
.ajse-empty {
  margin-top: 12px;
  padding: 34px 20px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: 10px;
}
.ajse-empty-title { font-size: 15px; font-weight: 600; }
.ajse-empty p { margin: 6px auto 0; max-width: 44ch; font-size: 13px; color: var(--muted); }
.ajse-empty .btn {
  margin-top: 14px;
  border: 1px solid var(--line-2);
  background: #fff;
  border-radius: 7px;
  padding: 8px 15px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
  box-shadow: none;
}
.ajse-empty .btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- prose page (For universities) ---------- */

.ajse-prose { max-width: 840px; margin: 0 auto; padding: 30px 22px 60px; }
.ajse-prose h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.ajse-prose-card {
  margin-top: 14px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ajse-prose-card p {
  margin: 0;
  font-size: 15.5px; line-height: 1.6; color: #36423F;
  text-wrap: pretty;
}
.ajse-prose-card p + p { margin-top: 12px; }
.ajse-mail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.ajse-mail-card {
  display: block;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
}
.ajse-mail-card:hover { border-color: var(--accent); color: var(--ink); }
.ajse-mail-kicker { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.ajse-mail-subject { margin-top: 5px; font-weight: 600; font-size: 15px; }
.ajse-mail-desc { margin-top: 3px; font-size: 13px; color: var(--muted); }

/* ---------- organisations list ---------- */

.ajse-org-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px; justify-content: space-between;
}
.ajse-org-head .shiny-input-container { flex: 1 1 170px; min-width: 0; margin: 0; }
.ajse-org-head input[type="text"] {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: #F5F2EA;
  font-size: 13px;
  box-shadow: none;
}
.ajse-org-head input[type="text"]:focus {
  outline: none; border-color: var(--accent); background: #fff; box-shadow: none;
}
.ajse-org-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 18px;
}
.ajse-org-list li {
  display: flex; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bg);
  font-size: 13.5px;
  color: #36423F;
}
.ajse-org-list .ajse-org-n {
  font-family: var(--mono); font-size: 11.5px; color: #CAC4B4;
  width: 18px; flex: none;
}
.ajse-org-count { margin-top: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }

/* ---------- plot slot ---------- */

.ajse-plot { margin-top: 12px; border-radius: 8px; overflow: hidden; }
.ajse-plot .shiny-plot-output,
.ajse-plot .plotly,
.ajse-plot .html-widget { border-radius: 8px; }

/* ---------- support page ---------- */

.ajse-kv {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}
.ajse-kv-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 12px;
  background: #fff;
}
.ajse-kv-row:nth-child(odd) { background: #F5F2EA; }
.ajse-kv-key { font-size: 12.5px; color: #6E6B63; }
.ajse-kv-val { font-size: 13.5px; font-weight: 500; }
.ajse-kv-val.is-mono { font-family: var(--mono); font-size: 13px; word-break: break-all; }

.ajse-pay-list { display: grid; gap: 8px; margin-top: 12px; }
.ajse-pay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}
.ajse-pay:hover { border-color: var(--accent); color: var(--ink); }
.ajse-pay-name { display: block; font-size: 14px; font-weight: 600; }
.ajse-pay-desc { display: block; font-size: 12.5px; color: var(--muted); }
.ajse-pay-go { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.ajse-fineprint {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--bg);
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
}
.ajse-callout {
  margin-top: 12px;
  padding: 14px 18px;
  background: var(--accent-wash);
  border: 1px solid #BFD2D4;
  border-radius: 10px;
  font-size: 13px; color: var(--accent-dark); line-height: 1.55;
}

/* ---------- footer ---------- */

.ajse-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: #fff;
}
.ajse-footer-inner {
  max-width: var(--col); margin: 0 auto;
  padding-top: 13px; padding-bottom: 13px;
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between;
  font-size: 12.5px; color: #6E6B63;
}

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
  .ajse-header-inner,
  .ajse-wrap,
  .ajse-tabs .nav-tabs,
  .ajse-tabbar-inner,
  .ajse-footer-inner { padding-left: 16px; padding-right: 16px; }
  .ajse-brand-meta { display: none; }
  .ajse-tabs .nav-tabs { max-width: none; }
  .ajse-count { margin-left: 0; }
}


/* ---------- full-height layout: the table scrolls, not the page ----------
   Chain of bounded flex boxes from <body> down to the DT scroll box, so the
   results table takes all the height left under the filters and scrolls
   inside itself instead of pushing the browser scrollbar.
   Below 900px the lock is released and the page scrolls normally. */

@media (min-width: 901px) and (min-height: 640px) {
  /* page itself never scrolls here — the footer sits on the bottom edge and
     the table eats the leftover height. Below these sizes the rules switch
     off and the browser scrollbar comes back. */
  html, body { height: 100%; overflow: hidden; }
  body > .container-fluid { height: 100%; overflow: hidden; }
  .ajse-shell { height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
  .ajse-header, .ajse-footer { flex: none; }

  .ajse-tabs,
  .ajse-tabs .tabbable,
  .ajse-tabs .tab-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ajse-tabs .nav-tabs { flex: none; }

  /* text pages scroll on their own; the results pane never does */
  .ajse-tabs .tab-content > .tab-pane.active { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .ajse-tabs .tab-content > .tab-pane.active:has(.ajse-table-shell) {
    overflow: hidden; display: flex; flex-direction: column;
  }
  .ajse-page:has(.ajse-table-shell),
  .ajse-page > div:has(> .ajse-table-shell) {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  }
  .ajse-page:has(.ajse-table-shell) { padding-bottom: 22px; }
  .ajse-page > .ajse-filters { flex: none; }

  .ajse-table-shell { flex: 1 1 auto; min-height: 240px; display: flex; flex-direction: column; }
  .ajse-table-shell .dataTables_wrapper { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ajse-table-shell .dataTables_wrapper .row:has(table.dataTable) {
    flex: 1 1 auto; min-height: 0; display: flex;
  }
  .ajse-table-shell .dataTables_wrapper:has(> table.dataTable),
  .ajse-table-shell .dataTables_wrapper div:has(> table.dataTable) {
    flex: 1 1 auto;
    min-height: 0;
    /* safety cap: leaves room for header, tabs, filter card, the info +
       pagination row and the footer, so those are never pushed out of the
       viewport if the flex chain above cannot bind */
    max-height: calc(100dvh - 400px);
    min-height: 180px;
    height: auto;
  }
  .ajse-table-shell .dataTables_wrapper .row:has(.dataTables_paginate) { flex: none; }
}

/* Bootstrap's grid gutters inside the DT wrapper (.row -15px margins,
   .col padding 15px) left a strip of empty card to the right of the table. */
.ajse-table-shell .dataTables_wrapper .row { margin-left: 0; margin-right: 0; display: block; }
.ajse-table-shell .dataTables_wrapper .row > [class*="col-"] {
  padding-left: 0; padding-right: 0; width: 100%; float: none;
}
.ajse-table-shell .dataTables_wrapper .row:has(.dataTables_info),
.ajse-table-shell .dataTables_wrapper .row:has(.dataTables_paginate) { display: flex; flex-wrap: wrap; }
.ajse-table-shell .dataTables_wrapper .row > .col-sm-5 { flex: 1 1 auto; width: auto; }
.ajse-table-shell .dataTables_wrapper .row > .col-sm-7 { flex: 0 0 auto; width: auto; margin-left: auto; }
.ajse-table-shell table.dataTable { width: 100% !important; }

/* quiet scrollbars inside the table box */
.ajse-table-shell .dataTables_wrapper div:has(> table.dataTable) {
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.ajse-table-shell .dataTables_wrapper div:has(> table.dataTable)::-webkit-scrollbar { width: 10px; height: 10px; }
.ajse-table-shell .dataTables_wrapper div:has(> table.dataTable)::-webkit-scrollbar-thumb {
  background: var(--line-2); border: 3px solid var(--surface); border-radius: 6px;
}
.ajse-table-shell .dataTables_wrapper div:has(> table.dataTable)::-webkit-scrollbar-track { background: transparent; }


/* filters row: chips and the CSV button stay on one line on desktop */
.ajse-chips { flex-wrap: nowrap; align-items: center; }
.ajse-chips .shiny-options-group { flex-wrap: wrap; min-width: 0; }
.ajse-toolbar { flex: none; margin-left: auto; }

@media (max-width: 760px) {
  .ajse-chips { flex-wrap: wrap; }
  .ajse-toolbar { width: 100%; margin-left: 0; justify-content: flex-start; }
}


/* Columns: Title | Opened | Employer. Opened and Employer get their widths
   from table_cols (columnDefs in server.R); Title takes the rest. */
.ajse-table-shell table.dataTable th:nth-child(1),
.ajse-table-shell table.dataTable td:nth-child(1) { width: auto; }
.ajse-table-shell table.dataTable tbody td:nth-child(2) {
  font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap;
}
.ajse-table-shell table.dataTable tbody td:nth-child(3) { color: var(--ink); }
/* first column wraps so the whole position title stays readable */
.ajse-table-shell table.dataTable tbody td:first-child {
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* copy-link button, injected per row by the snippet in ui.R */
.ajse-copy {
  position: absolute;
  top: 7px;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
}
.ajse-copy svg { width: 13px; height: 13px; display: block; }
.ajse-copy:hover { border-color: var(--accent); color: var(--accent); }
.ajse-copy.is-done {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}


/* DataTables' processing indicator (the four blue dots shown while a filter
   or sort is applied) repainted in the accent. */
.ajse-table-shell .dataTables_processing {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(36, 31, 26, 0.10);
  color: var(--ink) !important;
  font-size: 12.5px;
}
.ajse-table-shell .dataTables_processing > div > div,
.dataTables_processing > div > div {
  background: var(--accent) !important;
}
.ajse-table-shell .dataTables_processing > div:last-child > div {
  background: var(--accent) !important;
}


/* ochre from the reference palette, used as the second accent */
:root { --gold: #7E9B62; --gold-dark: #63804A; }
.ajse-mark { background: #E4D8CB; color: #4A4038; border: 1px solid #D8C9BA; }
.ajse-stat-value.is-accent { color: var(--accent); }
.ajse-table-shell table.dataTable tbody tr:hover,
.ajse-table-shell table.dataTable tbody tr:nth-child(even):hover { box-shadow: inset 3px 0 0 var(--accent); }
.ajse-table-shell table.dataTable tbody tr.selected td:first-child,
.ajse-table-shell table.dataTable tbody tr.active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ajse-cta { background: var(--accent); color: #fff; }
.ajse-cta:hover, .ajse-cta:focus { background: var(--accent-dark); color: #fff; }


/* Pagination fallback. When DT re-renders the widget it sometimes uses its
   default (non-Bootstrap) renderer: <a class="paginate_button"> + <span
   class="ellipsis"> inside .dataTables_paginate instead of ul.pagination.
   Both markups are laid out as one wrapping row of buttons. */
.ajse-table-shell .dataTables_paginate {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  float: none !important;
  text-align: right;
  padding-top: 0 !important;
}
.ajse-table-shell .dataTables_paginate > span { display: contents; }
.ajse-table-shell .dataTables_paginate a.paginate_button {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: center;
  text-decoration: none !important;
  box-sizing: border-box;
}
.ajse-table-shell .dataTables_paginate .ellipsis {
  display: inline-block;
  padding: 0 4px;
  color: var(--muted-2);
}
.ajse-table-shell .dataTables_wrapper > .dataTables_info,
.ajse-table-shell .dataTables_wrapper > .dataTables_paginate { flex: none; }


/* ---------- support: bitcoin card ---------- */
.ajse-crypto {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px; align-items: start; margin-top: 12px;
}
.ajse-qr {
  width: 132px; height: 132px; display: block;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  image-rendering: pixelated;
}
.ajse-crypto-body { display: grid; gap: 8px; min-width: 0; }
.ajse-crypto-body .ajse-note { margin-top: 0; font-size: 12.5px; line-height: 1.5; }
.ajse-addr {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
}
.ajse-addr-val {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; word-break: break-all;
}
.ajse-addr .ajse-copy { position: static; flex: 0 0 26px; }

/* ---------- support: single centred BTC card ---------- */
.ajse-donate-page { display: flex; justify-content: center; padding-top: 48px; }
.ajse-donate {
  width: 100%; max-width: 520px;
  display: grid; justify-items: center; text-align: center;
  padding: 28px 28px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ajse-donate h1 { margin: 0; }
.ajse-donate-lede {
  margin: 8px 0 0; max-width: 40ch;
  font-size: 14.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty;
}
.ajse-qr-frame {
  margin-top: 22px; width: 212px; height: 212px; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.ajse-qr-frame .ajse-qr {
  width: 100%; height: 100%; border: 0; border-radius: 4px; display: block;
  image-rendering: pixelated;
}
.ajse-donate-label { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.ajse-donate .ajse-addr { margin-top: 6px; width: 100%; align-items: center; text-align: left; }
.ajse-wallet {
  margin-top: 12px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 8px;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 600;
}
.ajse-wallet:hover, .ajse-wallet:focus { background: var(--accent-dark); color: #fff; }
.ajse-donate-note {
  margin-top: 14px; max-width: 44ch;
  font-size: 12.5px; line-height: 1.5; color: var(--muted-2);
}

/* ---------- support: other ways to help ---------- */
.ajse-donate-page { flex-direction: column; align-items: center; gap: 12px; }
.ajse-help {
  width: 100%; max-width: 520px;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ajse-help h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.ajse-help .ajse-pay { background: #fff; }
button.ajse-pay {
  width: 100%; font: inherit; text-align: left; cursor: pointer;
}
.ajse-share.is-done { border-color: var(--accent); }
.ajse-share.is-done .ajse-pay-go { font-size: 0; }
.ajse-share.is-done .ajse-pay-go::after { content: "copied \2713"; font-size: 12px; }

/* support: two columns instead of a centred stack */
.ajse-donate-page {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px; align-items: start; padding-top: 22px;
}
.ajse-donate, .ajse-help { max-width: none; }
.ajse-donate .ajse-addr, .ajse-wallet { max-width: 460px; }
.ajse-donate-page { align-items: stretch; }

/* statistics: both cards share the row height */
.ajse-cols.is-stretch { align-items: stretch; }

/* plotly fallback: repaint plotly's default blue (#1f77b4) in the accent,
   in case server.R does not set marker/line colours itself */
.ajse-plot .js-plotly-plot .plotly .bars path,
.ajse-plot .js-plotly-plot .plotly .scatterlayer .points path {
  fill: var(--accent) !important;
}
.ajse-plot .js-plotly-plot .plotly .scatterlayer .js-line {
  stroke: var(--accent) !important;
}
.ajse-plot .js-plotly-plot .plotly .main-svg { background: transparent !important; }


/* ---------- statistics: organisations DT ----------
   This table sits outside .ajse-table-shell, so none of the main-table
   rules reached it: Bootstrap's .row/.col gutters and the fixed-width
   search input pushed it past the card, and pagination kept Bootstrap blue. */
.ajse-org-table { min-width: 0; margin-top: 12px; }
.ajse-org-table .dataTables_wrapper { min-width: 0; }
.ajse-org-table .dataTables_wrapper .row { margin-left: 0; margin-right: 0; }
.ajse-org-table .dataTables_wrapper .row > [class*="col-"] {
  padding-left: 0; padding-right: 0; float: none; width: 100%; min-width: 0;
}
.ajse-org-table .dataTables_wrapper .row:has(.dataTables_length),
.ajse-org-table .dataTables_wrapper .row:has(.dataTables_info) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.ajse-org-table .dataTables_wrapper .row:has(.dataTables_length) > [class*="col-"],
.ajse-org-table .dataTables_wrapper .row:has(.dataTables_info) > [class*="col-"] {
  flex: 1 1 auto; width: auto;
}
.ajse-org-table .dataTables_wrapper .row:has(.dataTables_info) { margin-top: 10px; }

/* length + search */
.ajse-org-table .dataTables_length,
.ajse-org-table .dataTables_filter {
  float: none; text-align: left;
  font-size: 12.5px; color: var(--muted);
}
.ajse-org-table .dataTables_length label,
.ajse-org-table .dataTables_filter label {
  display: flex; align-items: center; gap: 6px;
  margin: 0; font-weight: 400; white-space: nowrap;
}
.ajse-org-table .dataTables_filter label { width: 100%; }
.ajse-org-table .dataTables_length select,
.ajse-org-table .dataTables_filter input {
  height: 30px; margin: 0 !important;
  border: 1px solid var(--line-2); border-radius: 7px;
  background: #fff; color: var(--ink);
  font: inherit; font-size: 12.5px;
  box-shadow: none; outline: none;
}
.ajse-org-table .dataTables_length select { width: auto; padding: 0 6px; }
.ajse-org-table .dataTables_filter input {
  flex: 1 1 auto; width: auto !important; min-width: 0; padding: 0 10px;
}
.ajse-org-table .dataTables_length select:focus,
.ajse-org-table .dataTables_filter input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(64, 103, 108, 0.14);
}

.ajse-org-table table.dataTable { width: 100% !important; margin: 10px 0 0 !important; }

/* info + pagination */
.ajse-org-table .dataTables_info {
  padding: 0 !important; font-size: 12.5px; color: var(--muted);
  white-space: normal !important;
}
.ajse-org-table .dataTables_paginate {
  display: flex !important; justify-content: flex-start; float: none !important;
  text-align: left; margin: 0 !important; padding: 0 !important;
}
.ajse-org-table .dataTables_paginate > span { display: contents; }
.ajse-org-table .dataTables_paginate ul.pagination {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none;
}
.ajse-org-table .dataTables_paginate ul.pagination > li {
  display: block !important; float: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
}
.ajse-org-table .dataTables_paginate ul.pagination > li > a,
.ajse-org-table .dataTables_paginate ul.pagination > li > span,
.ajse-org-table .dataTables_paginate a.paginate_button {
  display: inline-block !important; float: none !important; position: static;
  margin: 0 !important; padding: 4px 9px !important; min-width: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 6px !important;
  background: #fff !important; color: var(--ink-2, #44585A) !important;
  font-size: 12.5px; line-height: 1.4; text-decoration: none; cursor: pointer;
}
.ajse-org-table .dataTables_paginate ul.pagination > li > a:hover,
.ajse-org-table .dataTables_paginate a.paginate_button:hover {
  border-color: var(--accent) !important; color: var(--accent-dark) !important;
  background: #fff !important;
}
.ajse-org-table .dataTables_paginate ul.pagination > li.active > a,
.ajse-org-table .dataTables_paginate ul.pagination > li.active > a:hover,
.ajse-org-table .dataTables_paginate ul.pagination > li.active > a:focus,
.ajse-org-table .dataTables_paginate a.paginate_button.current,
.ajse-org-table .dataTables_paginate a.paginate_button.current:hover {
  background: var(--accent) !important; border-color: var(--accent) !important;
  color: #fff !important;
}
.ajse-org-table .dataTables_paginate ul.pagination > li.disabled > a,
.ajse-org-table .dataTables_paginate ul.pagination > li.disabled > a:hover,
.ajse-org-table .dataTables_paginate a.paginate_button.disabled {
  color: var(--muted-2) !important; border-color: var(--line) !important;
  background: #fff !important; cursor: default;
}
.ajse-org-table .dataTables_paginate ul.pagination > li > a:focus {
  outline: none; box-shadow: 0 0 0 3px rgba(64, 103, 108, 0.18);
}
.ajse-org-table .dataTables_paginate .ellipsis { padding: 0 4px; color: var(--muted-2); }

/* Organisations table: selection is off in server.R (selection = "none").
   This only hides the highlight if it is rendered without it.
   The main table keeps multiple selection (styled above, .ajse-table-shell). */
.ajse-org-table table.dataTable tbody tr.selected > * {
  box-shadow: none !important;
  background-color: inherit !important;
  color: inherit !important;
}

/* ---------- results: copy selected rows ---------- */
.ajse-table-shell table.dataTable tbody tr { cursor: pointer; }
.ajse-table-shell table.dataTable tbody tr.selected > * {
  box-shadow: none !important;
  color: var(--ink) !important;
  background-color: var(--accent-wash) !important;
}
.ajse-table-shell table.dataTable tbody tr.selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--accent) !important;
}
.ajse-selbar {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
}
.ajse-clear-rows {
  display: none;
  font-size: 12.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.ajse-clear-rows.is-visible { display: inline; }
.ajse-clear-rows:hover, .ajse-clear-rows:focus { color: var(--ink); }
.ajse-copy-rows {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 7px;
  background: #fff; color: var(--accent);
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  cursor: pointer;
}
.ajse-copy-rows:hover { border-color: var(--accent); color: var(--accent-dark); }
.ajse-copy-rows:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(64, 103, 108, 0.20); }
.ajse-copy-rows:disabled {
  color: var(--muted-2); border-color: var(--line); background: #fff; cursor: default;
}
.ajse-copy-rows.is-done { background: var(--accent); border-color: var(--accent); color: #fff; }

/* QR via imageOutput("btc_qr"): Shiny wraps the <img> in a div.shiny-image-output */
.ajse-qr-frame .shiny-image-output { width: 100% !important; height: 100% !important; }
.ajse-qr-frame .shiny-image-output img {
  width: 100% !important; height: 100% !important; display: block;
  border-radius: 4px; image-rendering: pixelated;
}

/* org table footer: keep pagination as one unit; the row wraps instead */
.ajse-org-table .dataTables_wrapper .row:has(.dataTables_info) > [class*="col-"]:has(.dataTables_paginate) { flex: 0 0 auto; }
.ajse-org-table .dataTables_info { min-width: 0; }
.ajse-org-table .dataTables_paginate ul.pagination { flex-wrap: nowrap; }

/* support: reveal button + server-rendered payment block */
.ajse-pay-details { width: 100%; display: grid; justify-items: center; }
.ajse-reveal, .ajse-reveal.btn {
  margin-top: 22px; padding: 10px 18px;
  border: 0; border-radius: 8px;
  background: var(--accent); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: none;
}
.ajse-reveal:hover, .ajse-reveal:focus { background: var(--accent-dark); color: #fff; }
.ajse-reveal:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(64, 103, 108, 0.25); }

/* ---------- results: title is the link to the vacancy ----------
   Pointer only over the title text, not the whole row. */
.ajse-table-shell table.dataTable tbody tr { cursor: default; }
.ajse-table-shell table.dataTable tbody a.ajse-job-link {
  color: var(--ink); font-weight: 600;
  text-decoration: none; cursor: pointer;
  font-family: inherit; font-size: inherit;
}
.ajse-table-shell table.dataTable tbody a.ajse-job-link:hover {
  color: var(--accent-dark);
  text-decoration: underline; text-underline-offset: 2px;
}
.ajse-table-shell table.dataTable tbody a.ajse-job-link:focus-visible {
  outline: none; border-radius: 3px;
  box-shadow: 0 0 0 3px rgba(64, 103, 108, 0.22);
}
/* already opened: .is-seen is set by JS (localStorage); :visited is a fallback
   and can only change colour, so both use colour only */
.ajse-table-shell table.dataTable tbody a.ajse-job-link:visited,
.ajse-table-shell table.dataTable tbody a.ajse-job-link.is-seen {
  color: #8A847A;
}
.ajse-table-shell table.dataTable tbody a.ajse-job-link.is-seen { font-weight: 500; }
.ajse-table-shell table.dataTable tbody a.ajse-job-link.is-seen:hover { color: var(--accent-dark); }

/* ================= table system v2 =================
   One family (no mono in cells), tabular figures for dates, sentence-case
   header, hairline rows without zebra, one accent for every interactive state.
   Text contrast on --surface: ink 12:1, ink-2 7:1, muted/seen 5.1:1. */
.ajse-table-shell table.dataTable,
.ajse-org-table table.dataTable { font-family: var(--sans); font-size: 13.5px; }

.ajse-table-shell table.dataTable thead th,
.ajse-org-table table.dataTable thead th {
  background: var(--zebra) !important;
  border-bottom: 1px solid var(--line-2) !important;
  border-top: 0 !important;
  padding: 10px 14px !important;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  text-transform: none; color: var(--ink-2);
}

.ajse-table-shell table.dataTable tbody tr,
.ajse-table-shell table.dataTable tbody tr:nth-child(even),
.ajse-org-table table.dataTable tbody tr,
.ajse-org-table table.dataTable tbody tr:nth-child(even) { background: transparent; }
.ajse-table-shell table.dataTable tbody td,
.ajse-org-table table.dataTable tbody td {
  border-top: 0 !important;
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
  vertical-align: top;
}
.ajse-table-shell table.dataTable tbody tr:hover,
.ajse-table-shell table.dataTable tbody tr:nth-child(even):hover {
  background: var(--row-hover);
  box-shadow: inset 2px 0 0 var(--accent);
}
.ajse-org-table table.dataTable tbody tr:hover { background: var(--row-hover); }

/* columns: Title | Opened | Employer */
.ajse-table-shell table.dataTable tbody td:nth-child(2) {
  font-family: var(--sans); font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted); white-space: nowrap;
}
.ajse-table-shell table.dataTable tbody td:nth-child(3) { color: var(--ink-2); }
.ajse-org-table table.dataTable tbody td { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* title link: default -> hover -> active -> focus -> seen */
.ajse-table-shell table.dataTable tbody a.ajse-job-link {
  color: var(--ink); font-weight: 600; line-height: 1.4;
  text-decoration: none;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  border-radius: 3px; cursor: pointer;
}
.ajse-table-shell table.dataTable tbody a.ajse-job-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-color: rgba(64, 103, 108, 0.55);
}
.ajse-table-shell table.dataTable tbody a.ajse-job-link:active { color: var(--link-active); }
.ajse-table-shell table.dataTable tbody a.ajse-job-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none;
}
.ajse-table-shell table.dataTable tbody a.ajse-job-link:visited,
.ajse-table-shell table.dataTable tbody a.ajse-job-link.is-seen { color: var(--seen); }
.ajse-table-shell table.dataTable tbody a.ajse-job-link.is-seen { font-weight: 500; }
.ajse-table-shell table.dataTable tbody a.ajse-job-link.is-seen:hover { color: var(--accent-dark); }

/* column widths v2: Title | Opened | Employer.
   Fixed layout reads widths from the header row, so set them on th (DT writes
   inline px widths from columnDefs, hence !important). Nothing may spill into
   the next cell: every cell clips and long words break. */
.ajse-table-shell table.dataTable { table-layout: fixed; width: 100% !important; }
.ajse-table-shell table.dataTable thead th:nth-child(1) { width: 52% !important; }
.ajse-table-shell table.dataTable thead th:nth-child(2) { width: 18% !important; }
.ajse-table-shell table.dataTable thead th:nth-child(3) { width: 30% !important; }
.ajse-table-shell table.dataTable tbody td {
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
}
/* dates may wrap between date and time instead of running into Employer */
.ajse-table-shell table.dataTable tbody td:nth-child(2) {
  white-space: normal; overflow-wrap: normal; word-break: normal;
}