/* ==================================================================
   WP7 · JOBS LIST CSS — v1.45.10
   Re-matched to 02_Jobs_List_APPROVED_LOCKED.html line by line with
   Phil (24 Sep 2026). Hex and px values copied verbatim from file 02
   and tagged "file 02" in comments, per amendment 4i.
   Approved deviations: Assigned To uses .nu-teammember-c (4d);
   fine-print bump + darker grey (4j). Scoped under [data-new-ui].
   ================================================================== */

/* ---- Page title + context actions ----------------------------- */
[data-new-ui] .nu-jl-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 14px;                       /* file 02 */
}
[data-new-ui] .nu-jl-title {
  margin: 0; font-size: 32px; line-height: 1.15;        /* file 02 */
  font-weight: 900; letter-spacing: -.03em;             /* file 02 */
  color: var(--nu-c-text-primary);
}
[data-new-ui] .nu-jl-sub {
  margin: 6px 0 0; color: var(--nu-c-text-muted);
  font-size: 15px; font-weight: 600;                    /* file 02 */
}
[data-new-ui] .nu-jl-heroactions { display: flex; gap: 10px; padding-top: 1px; }   /* file 02 */
[data-new-ui] .nu-jl-btn {
  height: 48px; padding: 0 18px; border-radius: 6px;    /* file 02 */
  border: 1px solid #cbd9e7; background: #fff;          /* file 02 */
  color: var(--nu-c-text-primary);
  font-family: var(--nu-t-family); font-size: 15px; font-weight: 800;   /* file 02 */
  display: inline-flex; align-items: center; gap: 9px;  /* file 02 */
  cursor: pointer;
}
[data-new-ui] .nu-jl-btn .nu-icon { width: 18px; height: 18px; }
[data-new-ui] .nu-jl-btn-green { background: #0eaa79; color: #fff; border-color: #0eaa79; }   /* file 02 */

/* ---- Status tabs — six boxed tiles ---------------------------- */
[data-new-ui] .nu-jl-tabs {
  display: grid; grid-template-columns: repeat(6, 1fr); /* file 02 */
  gap: 9px; margin-bottom: 12px;                        /* file 02 */
}
[data-new-ui] .nu-jl-tab {
  height: 53px; border: 1px solid #d8e4ed; border-radius: 6px;   /* file 02 */
  background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--nu-t-family); font-size: 15px; font-weight: 800;   /* file 02 */
  color: #183553;                                       /* file 02 */
  cursor: pointer; white-space: nowrap;
}
[data-new-ui] .nu-jl-tab-active { border: 2px solid #0db37f; background: #f8fffc; }   /* file 02 */
[data-new-ui] .nu-jl-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }   /* file 02 */
[data-new-ui] .nu-jl-dot-green { background: #0bb27b; }   /* file 02 */
[data-new-ui] .nu-jl-dot-blue  { background: #2673e7; }   /* file 02 */
[data-new-ui] .nu-jl-dot-amber { background: #f3ae19; }   /* file 02 */
[data-new-ui] .nu-jl-dot-grey  { background: #91a6ba; }   /* file 02 */
[data-new-ui] .nu-jl-dot-grey2 { background: #c4d0da; }   /* file 02 */
[data-new-ui] .nu-jl-tab-count {
  min-width: 28px; height: 28px; border-radius: 50%;    /* file 02 */
  background: #eaf2fb; color: #22486d;                  /* file 02 */
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900;                    /* file 02 */
}

/* ---- Two-column content grid ---------------------------------- */
[data-new-ui] .nu-jl-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 278px;   /* file 02 */
  gap: 14px; align-items: start;
}
[data-new-ui] .nu-jl-tbl-card,
[data-new-ui] .nu-jl-filters {
  background: #fff; border: 1px solid #d5e1eb; border-radius: 6px;   /* file 02 */
  box-shadow: 0 8px 20px rgba(8,32,51,.06);                         /* file 02 */
}
[data-new-ui] .nu-jl-tbl-card { padding: 12px 12px 10px; }           /* file 02 */

/* ---- Toolbar (right-aligned, no divider) ---------------------- */
[data-new-ui] .nu-jl-toolbar {
  display: flex; align-items: center; justify-content: flex-end;   /* file 02 */
  gap: 10px; padding: 0 2px 12px;                                  /* file 02 */
}
[data-new-ui] .nu-jl-sortlabel { font-size: 14px; color: var(--nu-c-text-muted); font-weight: 700; }   /* file 02 */
[data-new-ui] .nu-jl-select {
  height: 36px; border: 1px solid #cbd9e7; border-radius: 6px;     /* file 02 */
  background: #fff; padding: 0 11px; color: #264662;               /* file 02 */
  font-family: var(--nu-t-family); font-size: 14px; font-weight: 700;
}
[data-new-ui] .nu-jl-viewtoggle { display: flex; border: 1px solid #d3dfe8; border-radius: 6px; overflow: hidden; }   /* file 02 */
[data-new-ui] .nu-jl-vt {
  width: 38px; height: 34px; border: 0; background: #fff;          /* file 02 */
  color: #173a5e; display: grid; place-items: center; cursor: pointer;   /* file 02 */
}
[data-new-ui] .nu-jl-vt.nu-active { background: #173a5e; color: #fff; }   /* file 02 */
[data-new-ui] .nu-jl-vt .nu-icon { width: 16px; height: 16px; }

/* ---- Table ---------------------------------------------------- */
[data-new-ui] .nu-jl-tbl-wrap { overflow: auto; }
[data-new-ui] .nu-jl-tbl { width: 100%; border-collapse: collapse; min-width: 940px; }   /* file 02 */
[data-new-ui] .nu-jl-tbl thead th {
  background: #eef3f7; color: #203c58;                   /* file 02 */
  font-size: 16px; font-weight: 900; text-align: left;   /* file 02 */
  padding: 10px 8px;                                     /* file 02 */
  border-top: 1px solid #e6edf3; border-bottom: 1px solid #dfe8ef;   /* file 02 */
  white-space: nowrap;
}
[data-new-ui] .nu-jl-th-check { width: 34px; }           /* file 02 */
[data-new-ui] .nu-jl-tbl tbody td {
  padding: 13px 8px; border-bottom: 1px solid #d8e2eb;   /* file 02 */
  color: #294863; font-size: 14px; font-weight: 650;     /* file 02 */
  vertical-align: middle;
}
[data-new-ui] .nu-jl-row { background: #f5f8fb; cursor: pointer; }   /* file 02 */
[data-new-ui] .nu-jl-row:hover { background: #edf3f8; }              /* file 02 */
[data-new-ui] .nu-jl-tbl input[type=checkbox] { width: 17px; height: 17px; }   /* file 02 */
[data-new-ui] .nu-jl-td-num { color: #55708a; font-weight: 700; white-space: nowrap; }   /* file 02 */
[data-new-ui] .nu-jl-td-title-a { display: block; color: #0c2540; font-size: 16px; font-weight: 900; }   /* file 02 */
[data-new-ui] .nu-jl-td-title-b { display: block; color: #63809b; font-size: 14px; font-weight: 600; margin-top: 1px; }   /* file 02 */
[data-new-ui] .nu-jl-td-date { white-space: nowrap; }
[data-new-ui] .nu-jl-td-noassign { color: var(--nu-c-text-muted); }
[data-new-ui] .nu-jl-td-more { text-align: left; }
[data-new-ui] .nu-jl-morebtn {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-size: 19px; font-weight: 900; color: #173a5e;     /* file 02 */
  line-height: 1;
}

/* ---- Status + priority pills (plain, no dot) ------------------ */
[data-new-ui] .nu-jl-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 78px; height: 29px; padding: 0 10px;        /* file 02 */
  border-radius: 14px; font-size: 12px; font-weight: 900;   /* file 02 */
  white-space: nowrap;
}
[data-new-ui] .nu-jl-status-green    { background: #dff6eb; color: #067f51; }   /* file 02 */
[data-new-ui] .nu-jl-status-blue     { background: #e6f0ff; color: #1569d1; }   /* file 02 */
[data-new-ui] .nu-jl-status-amber    { background: #fff1d4; color: #9a6200; }   /* file 02 */
[data-new-ui] .nu-jl-status-grey     { background: #e8eef4; color: #2c4b67; }   /* file 02 */
[data-new-ui] .nu-jl-priority-red    { background: #ffe2e0; color: #c4362f; }   /* file 02 */
[data-new-ui] .nu-jl-priority-amber  { background: #fff0d2; color: #9a6500; }   /* file 02 */
[data-new-ui] .nu-jl-priority-blue   { background: #e5efff; color: #1769cf; }   /* file 02 */

/* ---- Assigned To — avatar + first name (amendment 4d) --------- */
[data-new-ui] .nu-jl-assigned { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* ---- Pagination footer ---------------------------------------- */
[data-new-ui] .nu-jl-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; color: #5f7993; font-size: 12px;    /* file 02 */
}
[data-new-ui] .nu-jl-showing strong { color: var(--nu-c-text-primary); }
[data-new-ui] .nu-jl-footer-r { display: flex; align-items: center; gap: 10px; }   /* file 02 */
[data-new-ui] .nu-jl-perpage { padding: 0 28px 0 9px; }  /* file 02 */
[data-new-ui] .nu-jl-pagination { display: flex; align-items: center; gap: 6px; }   /* file 02 */
[data-new-ui] .nu-jl-pagebtn {
  width: 36px; height: 36px; border: 0; border-radius: 7px;   /* file 02 */
  background: #fff; color: #183958;                            /* file 02 */
  font-family: var(--nu-t-family); font-size: 14px; font-weight: 900;   /* file 02 */
  cursor: pointer;
}
[data-new-ui] .nu-jl-pagebtn.nu-active { background: #0eaa79; color: #fff; }   /* file 02 */
[data-new-ui] .nu-jl-pagebtn:disabled { opacity: .4; cursor: default; }

/* ---- Filters aside -------------------------------------------- */
[data-new-ui] .nu-jl-filters { padding: 14px 14px 12px; }                      /* file 02 */
[data-new-ui] .nu-jl-filters-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #d5e1eb; padding-bottom: 10px; margin-bottom: 12px;   /* file 02 */
}
[data-new-ui] .nu-jl-filters-head strong { font-size: 16px; font-weight: 900; color: var(--nu-c-text-primary); }   /* file 02 */
[data-new-ui] .nu-jl-linkbtn {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  color: #136fe5; font-family: var(--nu-t-family); font-size: 13px; font-weight: 800;   /* file 02 */
}
[data-new-ui] .nu-jl-fgroup { padding: 0 0 13px; margin-bottom: 13px; border-bottom: 1px solid #e7eef3; }   /* file 02 */
[data-new-ui] .nu-jl-fgroup:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
[data-new-ui] .nu-jl-fgroup h3 { margin: 0 0 8px; font-size: 13px; font-weight: 900; color: var(--nu-c-text-primary); }   /* file 02 */
[data-new-ui] .nu-jl-checkrow {
  display: flex; align-items: center; gap: 8px; margin: 8px 0;   /* file 02 */
  color: #2b4762; font-size: 14px; font-weight: 650; cursor: pointer;   /* file 02 */
}
[data-new-ui] .nu-jl-checkrow-count { margin-left: auto; color: #6a8197; font-weight: 800; }   /* file 02 */
[data-new-ui] .nu-jl-fselect { width: 100%; height: 39px; padding: 0 10px; color: #294763; }   /* file 02 */
[data-new-ui] .nu-jl-fdate,
[data-new-ui] .nu-jl-fsearch {
  width: 100%; height: 39px; border: 1px solid #cbd9e7; border-radius: 6px;   /* file 02 */
  background: #fff; padding: 0 10px;
  font-family: var(--nu-t-family); font-size: 14px; font-weight: 650;   /* file 02 */
}
[data-new-ui] .nu-jl-fdate { margin-top: 7px; }           /* file 02 */
[data-new-ui] .nu-jl-apply {
  width: 100%; height: 44px; border: 0; border-radius: 6px;   /* file 02 */
  background: #0eaa79; color: #fff;                           /* file 02 */
  font-family: var(--nu-t-family); font-size: 16px; font-weight: 900;   /* file 02 */
  cursor: pointer; margin-top: 13px;
}

/* ---- Responsive (file 02 breakpoints) ------------------------- */
@media (max-width: 1100px) {
  [data-new-ui] .nu-jl-grid { grid-template-columns: 1fr; }
  [data-new-ui] .nu-jl-filters { order: 2; }
  [data-new-ui] .nu-jl-tabs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  [data-new-ui] .nu-jl-hero { display: block; }
  [data-new-ui] .nu-jl-heroactions { margin-top: 12px; }
  [data-new-ui] .nu-jl-tabs { grid-template-columns: repeat(2, 1fr); }
  [data-new-ui] .nu-jl-toolbar { justify-content: flex-start; flex-wrap: wrap; }
}

/* v1.45.39: Grid view — job cards in the build's own card language (white, line border, base radius, no SaaS) */
[data-new-ui] .nu-jl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 14px; }
[data-new-ui] .nu-jl-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; cursor: pointer;
  background: var(--nu-c-surface-card); border: 1px solid var(--nu-c-border-default); border-radius: var(--nu-r-base); }
[data-new-ui] .nu-jl-card:hover, [data-new-ui] .nu-jl-card:focus { border-color: #9fb6cc; outline: 0; }
[data-new-ui] .nu-jl-card-top { display: flex; align-items: center; gap: 8px; }
[data-new-ui] .nu-jl-card-top .nu-jl-morebtn { margin-left: auto; }
[data-new-ui] .nu-jl-card-num { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--nu-r-base);
  background: #123a61; color: #fff; font-size: 13px; font-weight: 800; }
[data-new-ui] .nu-jl-card-title { font-size: 16px; font-weight: 800; color: var(--nu-c-text-primary); line-height: 1.25; }
[data-new-ui] .nu-jl-card-sub { font-size: 14px; font-weight: 650; color: var(--nu-c-text-muted); }
[data-new-ui] .nu-jl-card-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: #243f5a; }
[data-new-ui] .nu-jl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--nu-c-border-default); }

/* v2.0: phones — the Jobs title-row buttons wrap instead of running off the screen */
@media (max-width: 767px){
  [data-new-ui] .nu-jl-hero { flex-wrap: wrap; }
  [data-new-ui] .nu-jl-heroactions { flex-wrap: wrap; gap: 8px; width: 100%; }
}

/* v2.0 (Phil): Jobs list pills get the same fine outline as every other coloured pill; one priority scheme (Low = grey) */
[data-new-ui] .nu-jl-pill { border: 1px solid transparent; box-sizing: border-box; }
[data-new-ui] .nu-jl-status-green   { border-color: #9fdcc2; }
[data-new-ui] .nu-jl-status-blue    { border-color: #b3cbeb; }
[data-new-ui] .nu-jl-status-amber   { border-color: #e6c88e; }
[data-new-ui] .nu-jl-status-grey, [data-new-ui] .nu-jl-status-slate { background: #e8eef4; color: #2c4b67; border-color: #c4ced7; }
[data-new-ui] .nu-jl-status-purple  { background: #efe6fb; color: #6b31bf; border-color: #cdb5ef; }
[data-new-ui] .nu-jl-priority-red   { border-color: #eeb0ae; }
[data-new-ui] .nu-jl-priority-amber { border-color: #e6c88e; }
[data-new-ui] .nu-jl-priority-blue  { border-color: #b3cbeb; }
[data-new-ui] .nu-jl-priority-slate { background: #e9eef2; color: #657a8c; border-color: #c4ced7; }