/* ==========================================================================
   TOA Global Job Sync — Frontend Styles
   Brand colours: purple #4a0466 | cyan #3fd7ec | violet #7837e9
   ========================================================================== */

/* ── Utility ──────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   JOB LIST WIDGET
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────────── */
.toa-job-list-wrapper {
  font-family: inherit;
  color: #2f2c33;
}

/* ── Filter Form ──────────────────────────────────────────── */
.toa-filter-form {
  margin-bottom: 20px;
}

.toa-filter-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
}

.toa-filter-field {
  flex: 1 1 200px;
  display: flex;
  align-items: stretch;
}

.toa-filter-field .toa-form-control {
  flex: 1 1 auto;
}

#toa-job-title-input {
    height: 49px;
    padding: 0px 20px;
}

.toa-form-control {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #333;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.toa-form-control:focus {
  outline: 2px solid #7837e9;
  outline-offset: 1px;
  border-color: #7837e9;
}

select.toa-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

.toa-filter-submit,
.toa-filter-reset {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.toa-btn-search {
  height: 50px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: #7837e9;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.toa-btn-search:hover {
  opacity: 0.88;
}

.toa-btn-reset {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: #7837e9;
  border: 1px solid #7837e9;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  background: #fff;
  transition: background 0.15s, color 0.15s;
}

.toa-btn-reset:hover {
  background: #7837e9;
  color: #fff;
}

/* ── Job Count ────────────────────────────────────────────── */
.toa-job-count {
  color: #7837e9;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 16px 0;
  text-align: center;
}

/* ── Desktop Table ────────────────────────────────────────── */
.toa-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.toa-job-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.toa-job-table thead th {
  font-size: 15px;
  font-weight: 700;
  color: #2f2c33;
  text-align: left;
  padding: 12px 10px;
  border-bottom: 2px solid #e0e0e0;
  white-space: nowrap;
}

.toa-job-table tbody tr {
  border-bottom: 1px solid #efefef;
  transition: background 0.1s;
}

.toa-job-table tbody tr:hover {
  background: #f9f5ff;
}

.toa-job-table tbody td {
  padding: 12px 10px;
  vertical-align: middle;
  color: #2f2c33;
}

/* Column widths */
.toa-job-table .col-role     { min-width: 240px; }
.toa-job-table .col-category { width: 20%; }
.toa-job-table .col-shift    { width: 16%; }
.toa-job-table .col-location { width: 14%; }
.toa-job-table .col-action   { width: 120px; text-align: center; }

/* Job title link */
.toa-job-title-link {
  font-size: 14px;
  font-weight: 700;
  color: #4a0466;
  text-decoration: none;
  display: block;
  white-space: normal;
  word-break: break-word;
}

.toa-job-title-link:hover {
  text-decoration: underline;
  color: #7837e9;
}

.toa-job-ref-sub {
  margin-top: 3px;
  font-size: 12px;
  color: #888;
}

/* Apply button (table) */
.toa-apply-btn {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 100px;
  background: #3fd7ec;
  color: #4a0466 !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.toa-apply-btn:hover {
  opacity: 0.85;
}

/* ── No Jobs ──────────────────────────────────────────────── */
.toa-no-jobs {
  text-align: center;
  font-size: 20px;
  padding: 60px 20px;
  color: #888;
}

/* ── Pagination ───────────────────────────────────────────── */
.toa-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 20px 0;
}

.toa-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.toa-page-btn:hover {
  background: #f4eeff;
  border-color: #7837e9;
  color: #4a0466;
}

.toa-page-btn.toa-page-current {
  background: #4a0466 !important;
  color: #fff !important;
  border-color: #4a0466 !important;
  cursor: default;
  pointer-events: none;
}

.toa-page-btn.toa-page-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.toa-page-ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: #999;
  font-size: 14px;
}

/* ── Mobile Cards ─────────────────────────────────────────── */
.toa-mobile-list {
  display: none; /* shown via media query below */
}

.toa-mobile-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.toa-mobile-card-header {
  margin-bottom: 10px;
}

.toa-mobile-job-title {
  font-size: 18px;
  font-weight: 700;
  color: #4a0466;
  text-decoration: none;
  display: block;
  line-height: 1.25;
}

.toa-mobile-job-title:hover {
  text-decoration: underline;
}

.toa-mobile-ref {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

.toa-mobile-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: #555;
  margin-bottom: 12px;
}

.toa-meta-row {
  display: flex;
  gap: 8px;
}

.toa-meta-label {
  color: #888;
  min-width: 72px;
  font-weight: 600;
}

.toa-meta-val {
  flex: 1;
}

.toa-mobile-apply-btn {
  display: block;
  text-align: center;
  padding: 11px 20px;
  border-radius: 100px;
  background: #3fd7ec;
  color: #4a0466 !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}

.toa-mobile-apply-btn:hover,
.toa-mobile-apply-btn:active {
  opacity: 0.85;
}

/* ============================================================
   SINGLE JOB WIDGET
   ============================================================ */

.toa-job-single {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  /* Roboto applied here so every child element inherits it,
     overriding whatever font the active theme sets. */
  font-family: 'Roboto', sans-serif !important;
}

/* ── Title ────────────────────────────────────────────────── */
.toaglobal-job-title {
    background: #4a0466;
    padding: 5px 20px !important;
    color: #fff !important;
}

.toaglobal-job-title h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 28px !important;
    /* font-weight: 800; */
    color: #4a0466;
    margin: 0px;
    line-height: 1.25;
}

/* ── Apply button ─────────────────────────────────────────── */
.toaglobal-job-apply a.btn {
  display: inline-block;
  text-decoration: none !important;
  transition: opacity 0.15s;
  cursor: pointer;
}

.toaglobal-job-apply a.btn:hover {
  opacity: 0.88;
}

/* ── Ref / date line ──────────────────────────────────────── */
.toaglobal-job-vacancyid {
  font-size: 14px;
  vertical-align: middle;
}

/* ── Description ──────────────────────────────────────────── */

.toaglobal-job-summary {
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6;
  color: #2f2c33;
}

.toaglobal-job-summary p {
  margin: 0 0 10px;
}

.toaglobal-job-summary .ck-content, .toaglobal-job-summary p, .toaglobal-job-summary span {
    font-size: 16px !important;
}

/* Role title — the job title repeated at the top of the description body */
.toa-job-single .toaglobal-job-summary .toa-role-title strong {
  color: #4A0465 !important;
}

.toaglobal-job-summary ul {
  list-style-type: disc;
  list-style-position: outside;
  margin: 4px 0 16px 24px;
  padding-left: 0;
}

.toaglobal-job-summary li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.toaglobal-job-summary strong,
.toaglobal-job-summary b {
  font-weight: 600;
}

/* ── CKEditor HTML overrides ──────────────────────────────────────────────
   recruit_adverttext2 is Word-exported CKEditor HTML. After clean_advert_html()
   strips all inline styles, these rules control the appearance entirely.
   ──────────────────────────────────────────────────────────────────────── */

/* Reset the CK content wrapper — it has no inline style after stripping,
   but the class may still carry browser defaults. */
.toaglobal-job-summary .ck-content {
  font-family: "Segoe UI", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6;
}

/* All inline <span> text nodes should inherit our base size */
.toaglobal-job-summary span {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

/* Ordered lists (CKEditor uses <ol> for numbered responsibility sections) */
.toaglobal-job-summary ol {
  list-style-type: decimal;
  list-style-position: outside;
  margin: 4px 0 16px 24px;
  padding-left: 0;
}

.toaglobal-job-summary ol li {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* CKEditor wraps <li> text in a <p> tag — neutralise it so bullets
   don't get extra top/bottom spacing. */
.toaglobal-job-summary li > p {
  margin: 0;
  display: inline;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablet (769–1024px) ──────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {

  .toa-filter-row {
    flex-wrap: wrap;
  }

  .toa-filter-field {
    flex: 1 1 100%;
  }

  .toa-filter-submit,
  .toa-filter-reset {
    flex: 1 1 100%;
  }

  .toa-btn-search,
  .toa-btn-reset {
    width: 100%;
  }

  .toa-job-table thead th,
  .toa-job-table tbody td {
    font-size: 13px;
    padding: 10px 8px;
    white-space: normal;
    word-break: break-word;
  }

  .toa-job-count {
    font-size: 18px;
  }
}

/* ── Mobile (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hide desktop table, show mobile cards */
  .toa-table-wrapper {
    display: none !important;
  }

  .toa-mobile-list {
    display: block !important;
  }

  .toa-filter-row {
    flex-direction: column;
  }

  .toa-filter-field {
    width: 100%;
    flex: none;
  }

  .toa-filter-submit,
  .toa-filter-reset {
    width: 100%;
  }

  .toa-btn-search,
  .toa-btn-reset {
    width: 100%;
    justify-content: center;
  }

  .toa-job-count {
    font-size: 17px;
    margin-bottom: 12px;
  }

  /* Single job */
  .toaglobal-job-title h1 {
    font-size: 22px;
  }

  .toaglobal-job-apply a.btn {
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
}