/* ═════════════════════════════════════════════════════════════════════════════
   js/jobs-list-redesign.css — WIP-UI-JOBS-LIST-01
   Compact header + consistent KPIs + phase mini-bar + quick actions
   for the Jobs list page. Lift target: spartan-jobs-list-redesign-v1.html.

   All new classes are `jl-*` prefixed to avoid collisions with existing
   .kpi (spartan-tokens.css line 383) and .spill (polish.css line 297).
   Overdue pulse classes (.is-overdue-row, .pill-overdue, .badge-overdue)
   stay generic — they're shared with sidebar badges and other pages.

   Loads AFTER styles.css / portal-theme.css / spartan-tokens.css /
   polish.css / job-detail-redesign.css so the section overrides win
   cleanly inside `.jl-page`.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── OVERDUE PULSE (mandatory per design constitution) ────────────────────── */
@keyframes pulse-overdue-row {
  0%, 100% { background: transparent; }
  50%      { background: rgba(196,18,48,.04); }
}
@keyframes pulse-overdue-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,18,48,.55); }
  70%      { box-shadow: 0 0 0 8px rgba(196,18,48,0); }
}
.is-overdue-row {
  animation: pulse-overdue-row 2.4s ease-in-out infinite;
  position: relative;
}
.is-overdue-row > td:first-child {
  box-shadow: inset 3px 0 0 var(--red, #C41230);
}
.pill-overdue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pale-red, #FBF3F4);
  color: var(--red, #C41230);
  padding: 2px 7px 2px 6px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(196,18,48,.25);
  white-space: nowrap;
}
.pill-overdue .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red, #C41230);
  animation: pulse-overdue-dot 1.8s ease-in-out infinite;
}
.badge-overdue {
  background: var(--red, #C41230);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 10px;
  padding: 1px 7px;
  animation: pulse-overdue-dot 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .is-overdue-row,
  .pill-overdue .dot,
  .badge-overdue {
    animation: none !important;
  }
}

/* ── JOBS LIST PAGE CONTAINER ─────────────────────────────────────────────── */
.jl-page {
  padding: 4px 0 48px;
}

/* ── COMPACT PAGE HEADER ─────────────────────────────────────────────────── */
.jl-ph {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--s200, #E7E5E4);
}
.jl-ph-l {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.jl-ph-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--s400, #A8A29E);
  line-height: 1;
}
.jl-ph-h1-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.jl-ph-h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink, #0A0A0A);
  line-height: 1;
  margin: 0;
  font-family: var(--ff-sans, 'Archivo', system-ui, sans-serif);
}
.jl-ph-h1-meta {
  font-size: 14px;
  color: var(--s500, #78716C);
  font-weight: 600;
}
.jl-ph-h1-meta b {
  color: var(--ink, #0A0A0A);
  font-weight: 800;
}
.jl-ph-r {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* View switcher (Table / Kanban / Map) */
.jl-view-sw {
  display: flex;
  background: var(--s100, #F5F5F4);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.jl-view-sw button {
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--s500, #78716C);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.jl-view-sw button:hover { color: var(--ink, #0A0A0A); }
.jl-view-sw button.jl-on {
  background: #fff;
  color: var(--ink, #0A0A0A);
  box-shadow: 0 1px 2px rgba(10,10,10,.03), 0 1px 1px rgba(10,10,10,.02);
}

/* ── KPI STRIP (consistent, compact) ──────────────────────────────────────── */
.jl-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.jl-kpi {
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 180ms cubic-bezier(.4,0,.2,1),
              transform 180ms cubic-bezier(.4,0,.2,1),
              border-color 180ms cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-rest, 0 1px 2px rgba(10,10,10,.03), 0 1px 1px rgba(10,10,10,.02));
  position: relative;
  overflow: hidden;
}
.jl-kpi:hover {
  border-color: var(--s300, #D6D3D1);
  box-shadow: var(--shadow-hover, 0 1px 2px rgba(10,10,10,.04), 0 12px 28px -12px rgba(10,10,10,.18));
  transform: translateY(-2px);
}
.jl-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.jl-kpi-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
}
.jl-kpi-ico {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--s100, #F5F5F4);
  color: var(--s500, #78716C);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.jl-kpi:hover .jl-kpi-ico {
  background: var(--ink, #0A0A0A);
  color: #fff;
}
.jl-kpi-val {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink, #0A0A0A);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  line-height: 1.1;
}
.jl-kpi-val.jl-red { color: var(--red, #C41230); }
.jl-kpi-sub {
  font-size: 11px;
  color: var(--s500, #78716C);
  margin-top: 4px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.jl-kpi-sub.jl-up   { color: var(--ok-fg, #15803D); }
.jl-kpi-sub.jl-down { color: var(--red, #C41230); }
.jl-kpi-sub.jl-red  { color: var(--red, #C41230); }
.jl-kpi-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--s100, #F5F5F4);
}
.jl-kpi-bar-fill {
  height: 100%;
  background: var(--ink, #0A0A0A);
  transition: width 400ms cubic-bezier(.4,0,.2,1);
}
.jl-kpi.jl-alert .jl-kpi-bar-fill { background: var(--red, #C41230); }
.jl-kpi.jl-alert .jl-kpi-val      { color: var(--red, #C41230); }
.jl-kpi-sub .jl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red, #C41230);
  animation: pulse-overdue-dot 1.8s ease-in-out infinite;
}
@media (max-width: 1180px) { .jl-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 740px)  { .jl-kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* ── FILTER BAR ───────────────────────────────────────────────────────────── */
.jl-fbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 16px;
  flex-wrap: wrap;
}
.jl-seg {
  display: flex;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  box-shadow: var(--shadow-rest, 0 1px 2px rgba(10,10,10,.03));
}
.jl-seg button {
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--s500, #78716C);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  letter-spacing: -0.005em;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.jl-seg button:hover { color: var(--ink, #0A0A0A); }
.jl-seg button.jl-on {
  background: var(--ink, #0A0A0A);
  color: #fff;
}
.jl-seg-count {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--s100, #F5F5F4);
  color: var(--s600, #57534E);
  letter-spacing: 0;
}
.jl-seg button.jl-on .jl-seg-count {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.jl-seg button:hover .jl-seg-count {
  background: var(--s200, #E7E5E4);
  color: var(--ink, #0A0A0A);
}

/* Filter chips */
.jl-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.jl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--s700, #44403C);
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-rest, 0 1px 2px rgba(10,10,10,.03));
  font-family: inherit;
}
.jl-chip:hover {
  border-color: var(--ink, #0A0A0A);
  color: var(--ink, #0A0A0A);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover, 0 1px 2px rgba(10,10,10,.04), 0 12px 28px -12px rgba(10,10,10,.18));
}
.jl-chip.jl-on {
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-color: var(--ink, #0A0A0A);
}
.jl-chip-c {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--s100, #F5F5F4);
  color: var(--s600, #57534E);
}
.jl-chip.jl-on .jl-chip-c {
  background: rgba(255,255,255,.2);
  color: #fff;
}
.jl-chip.jl-alert {
  background: var(--pale-red, #FBF3F4);
  border-color: rgba(196,18,48,.25);
  color: var(--red, #C41230);
}
.jl-chip.jl-alert:hover {
  background: var(--red, #C41230);
  color: #fff;
}
.jl-chip.jl-alert .jl-chip-c {
  background: rgba(196,18,48,.15);
  color: var(--red, #C41230);
  animation: pulse-overdue-dot 1.8s infinite;
}
.jl-chip.jl-alert:hover .jl-chip-c {
  background: rgba(255,255,255,.2);
  color: #fff;
  animation: none;
}

.jl-fbar-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.jl-fbar-search {
  position: relative;
}
.jl-fbar-search input {
  padding: 8px 12px 8px 34px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 10px;
  font-size: 12.5px;
  min-width: 240px;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-rest, 0 1px 2px rgba(10,10,10,.03));
  font-family: inherit;
  color: var(--ink, #0A0A0A);
}
.jl-fbar-search input:focus {
  outline: none;
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}
.jl-fbar-search .ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--s400, #A8A29E);
  pointer-events: none;
}

/* ── TABLE ───────────────────────────────────────────────────────────────── */
.jl-tbl-wrap {
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-rest, 0 1px 2px rgba(10,10,10,.03));
}
.jl-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.jl-tbl thead {
  background: var(--s50, #FAFAF9);
  border-bottom: 1px solid var(--s200, #E7E5E4);
}
.jl-tbl th {
  padding: 12px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--s500, #78716C);
  white-space: nowrap;
}
.jl-tbl th.jl-r { text-align: right; }
.jl-tbl th.jl-c { text-align: center; }
.jl-tbl td {
  padding: 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--s100, #F5F5F4);
  vertical-align: middle;
}
.jl-tbl tbody tr {
  transition: background 180ms cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  position: relative;
}
.jl-tbl tbody tr:hover { background: var(--s50, #FAFAF9); }
.jl-tbl tbody tr:last-child td { border-bottom: 0; }
.jl-tbl tbody tr td:first-child { padding-left: 18px; }
.jl-tbl tbody tr td:last-child  { padding-right: 18px; }

/* Compact density */
.jl-tbl.jl-dense td { padding: 10px 14px; }
.jl-tbl.jl-dense tbody tr td:first-child { padding-left: 14px; }
.jl-tbl.jl-dense tbody tr td:last-child  { padding-right: 14px; }

/* Checkbox */
.jl-cb {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--s300, #D6D3D1);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  background: #fff;
  vertical-align: middle;
}
.jl-cb:hover { border-color: var(--ink, #0A0A0A); }
.jl-cb.jl-on {
  background: var(--ink, #0A0A0A);
  border-color: var(--ink, #0A0A0A);
  color: #fff;
}

/* Job ref */
.jl-jref {
  font-family: 'Archivo Narrow', var(--ff-sans, 'Archivo', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: var(--s100, #F5F5F4);
  color: var(--s700, #44403C);
  padding: 3px 8px;
  border-radius: 6px;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  display: inline-block;
}
.jl-tbl tbody tr:hover .jl-jref {
  background: var(--ink, #0A0A0A);
  color: #fff;
}

/* Client cell */
.jl-client-cell { min-width: 0; }
.jl-client-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.005em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.jl-client-meta {
  font-size: 11px;
  color: var(--s500, #78716C);
  margin-top: 3px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jl-client-meta .ico { color: var(--s400, #A8A29E); }

/* Branch (with suburb merged in) */
.jl-branch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--s700, #44403C);
  letter-spacing: 0.04em;
}
.jl-branch-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.jl-branch-vic .jl-branch-dot { background: #1D4ED8; }
.jl-branch-act .jl-branch-dot { background: #15803D; }
.jl-branch-sa  .jl-branch-dot { background: #D97706; }
.jl-branch-tas .jl-branch-dot { background: #7C3AED; }
.jl-branch-sub {
  font-size: 11px;
  color: var(--s400, #A8A29E);
  font-weight: 500;
  display: block;
  margin-top: 2px;
  letter-spacing: 0;
}

/* Phase mini-bar — the 3-phase indicator */
.jl-phx {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 88px;
}
.jl-phx-seg {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--s200, #E7E5E4);
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.jl-phx-seg.jl-done { background: var(--ink, #0A0A0A); }
.jl-phx-seg.jl-now {
  background: var(--red, #C41230);
  box-shadow: 0 0 8px rgba(196,18,48,.4);
}
.jl-phx-meta {
  font-size: 10.5px;
  color: var(--s500, #78716C);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 5px;
  display: block;
}
.jl-phx-meta b { color: var(--ink, #0A0A0A); }

/* Status pill (lifted from mockup's `.spill` — namespaced to avoid the
   polish.css `.spill` grid-cell collision) */
.jl-spill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.jl-spill .jl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.jl-spill.jl-info {
  background: var(--info-bg, #DBEAFE);
  color: var(--info-fg, #1D4ED8);
  box-shadow: inset 0 0 0 1px rgba(29,78,216,.15);
}
.jl-spill.jl-info .jl-dot { background: var(--info-fg, #1D4ED8); }
.jl-spill.jl-warn {
  background: var(--warn-bg, #FEF3C7);
  color: var(--warn-fg, #92400E);
  box-shadow: inset 0 0 0 1px rgba(146,64,14,.18);
}
.jl-spill.jl-warn .jl-dot { background: var(--warn-fg, #92400E); }
.jl-spill.jl-ok {
  background: var(--ok-bg, #DCFCE7);
  color: var(--ok-fg, #15803D);
  box-shadow: inset 0 0 0 1px rgba(21,128,61,.18);
}
.jl-spill.jl-ok .jl-dot { background: var(--ok-fg, #15803D); }
.jl-spill.jl-purple {
  background: #F3E8FF;
  color: #6D28D9;
  box-shadow: inset 0 0 0 1px rgba(109,40,217,.15);
}
.jl-spill.jl-purple .jl-dot { background: #6D28D9; }
.jl-spill.jl-grey {
  background: var(--s100, #F5F5F4);
  color: var(--s600, #57534E);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.jl-spill.jl-grey .jl-dot { background: var(--s500, #78716C); }

/* Money */
.jl-money {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink, #0A0A0A);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  text-align: right;
  display: block;
}
.jl-money-sub {
  font-size: 10.5px;
  color: var(--s400, #A8A29E);
  font-weight: 600;
  margin-top: 2px;
  text-align: right;
}

/* Next milestone */
.jl-next {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jl-next-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--s400, #A8A29E);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.jl-next-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.jl-next-val.jl-muted {
  color: var(--s400, #A8A29E);
  font-weight: 500;
}
.jl-next-val.jl-red { color: var(--red, #C41230); }

/* Age */
.jl-age-cell { text-align: center; }
.jl-age-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--s100, #F5F5F4);
  color: var(--s700, #44403C);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.jl-age-pill.jl-warn {
  background: var(--warn-bg, #FEF3C7);
  color: var(--warn-fg, #92400E);
}
.jl-age-pill.jl-red {
  background: var(--pale-red, #FBF3F4);
  color: var(--red, #C41230);
  box-shadow: inset 0 0 0 1px rgba(196,18,48,.25);
}
.jl-age-pill .jl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.jl-age-pill.jl-red .jl-dot { animation: pulse-overdue-dot 1.8s infinite; }

/* Quick-action cluster — appears on row hover */
.jl-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transform: translateX(8px);
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.jl-tbl tbody tr:hover .jl-actions {
  opacity: 1;
  transform: translateX(0);
}
.jl-qa-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--s200, #E7E5E4);
  color: var(--s600, #57534E);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.jl-qa-btn:hover {
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-color: var(--ink, #0A0A0A);
  transform: translateY(-1px);
}
.jl-qa-btn.jl-red:hover {
  background: var(--red, #C41230);
  border-color: var(--red, #C41230);
  color: #fff;
}

/* Material flag pill */
.jl-matflag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  background: var(--pale-red, #FBF3F4);
  color: var(--red, #C41230);
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(196,18,48,.25);
  cursor: help;
}
.jl-matflag .ico {
  width: 11px;
  height: 11px;
}

/* Table footer (density toggle + counts) */
.jl-tbl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--s50, #FAFAF9);
  border-top: 1px solid var(--s200, #E7E5E4);
  font-size: 12px;
  color: var(--s500, #78716C);
  font-weight: 600;
}
.jl-tbl-foot-l {
  display: flex;
  align-items: center;
  gap: 14px;
}
.jl-tbl-foot-r {
  display: flex;
  align-items: center;
  gap: 6px;
}
.jl-tbl-foot-r button {
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--s200, #E7E5E4);
  background: #fff;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--s600, #57534E);
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  font-family: inherit;
}
.jl-tbl-foot-r button:hover {
  border-color: var(--ink, #0A0A0A);
  color: var(--ink, #0A0A0A);
}
.jl-tbl-foot-r button.jl-on {
  background: var(--ink, #0A0A0A);
  color: #fff;
  border-color: var(--ink, #0A0A0A);
}

/* "Coming soon" stub for Kanban / Map views */
.jl-stub {
  background: #fff;
  border: 1px dashed var(--s300, #D6D3D1);
  border-radius: 14px;
  padding: 64px 24px;
  text-align: center;
  color: var(--s500, #78716C);
}
.jl-stub-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink, #0A0A0A);
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}
.jl-stub-desc {
  font-size: 13px;
  font-weight: 500;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Bulk-action bar (preserved from legacy renderer's design) */
.jl-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 16px;
  background: var(--pale-red, #FBF3F4);
  border: 1px solid rgba(196,18,48,.18);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--red, #C41230);
}

/* ── Sortable header cells (Phoenix request 2026-05-21) ───────────────────── */
.jl-tbl thead th.jl-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: background 180ms cubic-bezier(.4,0,.2,1),
              color 180ms cubic-bezier(.4,0,.2,1);
}
.jl-tbl thead th.jl-th-sortable:hover {
  background: var(--s100, #F5F5F4);
  color: var(--ink, #0A0A0A);
}
.jl-tbl thead th.jl-th-sortable.jl-sorted {
  color: var(--ink, #0A0A0A);
  background: var(--s100, #F5F5F4);
}
.jl-sort-arrow {
  color: var(--red, #C41230);
  font-size: 8px;
  letter-spacing: 0;
  margin-left: 3px;
  display: inline-block;
  vertical-align: middle;
}

/* ── Date column cells (Created / CM / Aluplast / Glass / Production /
       Install) — Phoenix request 2026-05-21 ─────────────────────────────── */
.jl-tbl td.jl-date-cell {
  padding: 14px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.jl-tbl.jl-dense td.jl-date-cell { padding: 10px 10px; }
.jl-date-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #0A0A0A);
  letter-spacing: -0.005em;
}
.jl-date-val.jl-muted {
  color: var(--s400, #A8A29E);
  font-weight: 500;
}
.jl-date-val.jl-red {
  color: var(--red, #C41230);
}
.jl-date-val.jl-bold {
  color: var(--ink, #0A0A0A);
  font-weight: 800;
}

/* Allow horizontal scroll on small viewports — the extended layout has
   15 columns and won't fit on narrow screens. */
.jl-tbl-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}
.jl-tbl-wrap::-webkit-scrollbar { height: 8px; }
.jl-tbl-wrap::-webkit-scrollbar-thumb {
  background: var(--s300, #D6D3D1);
  border-radius: 4px;
}
.jl-tbl-wrap::-webkit-scrollbar-thumb:hover { background: var(--s400, #A8A29E); }