/* css/jobs-ending.css — "Jobs ending soon" sidebar card (homepage right column).
   Container-queried like payment-alerts.css and home-metrics.css: the right
   column is a fixed rail on desktop but a full-width drawer on mobile, so every
   size steps off the card's own width rather than the viewport. */

.jobs-ending-card {
  container-type: inline-size;
  container-name: jobsending;
  /* Held as custom properties so the header can negate them exactly and run its
     divider to the card edges, the way .focus-head and .pulse-header do. */
  --je-pad-y: clamp(0.7rem, 4cqi, 0.95rem);
  --je-pad-x: clamp(0.8rem, 5cqi, 1.05rem);
  background: var(--bg-card);
  border-radius: 13px;
  padding: var(--je-pad-y) var(--je-pad-x);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}

/* One heading style for every card in the right rail — matches .focus-head h3,
   .events-card h3, .payment-alerts-header and .pulse-header. Fixed rather than
   clamped so it tracks its neighbours at every width. */
.jobs-ending-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  margin: calc(-1 * var(--je-pad-y)) calc(-1 * var(--je-pad-x)) 0.85rem;
  padding: var(--je-pad-y) var(--je-pad-x);
  border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-heading);
}
/* Sized in px like every other iconify-icon in the project (see
   activity-feed.css). The label span is a flex row so the icon centres against
   the text rather than sitting on its baseline. */
.jobs-ending-header > span:first-child { display: inline-flex; align-items: center; }
.jobs-ending-icon {
  color: var(--blue);
  margin-right: 0.35rem;
  font-size: 15px;
  flex: none;
}
.jobs-ending-header a {
  font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--blue); text-decoration: none; white-space: nowrap;
}
.jobs-ending-header a:hover { text-decoration: underline; }

/* ---- Rows ---- */
.jobs-ending-list { display: grid; gap: 0.55rem; }
.jobs-ending-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.6rem;
}
/* min-width:0 so a long client name ellipsises instead of shoving the date
   off the edge of a 260px rail. */
.jobs-ending-client { min-width: 0; }
.jobs-ending-name {
  font-size: clamp(0.68rem, 3cqi, 0.78rem);
  font-weight: 600; color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jobs-ending-sub {
  font-size: clamp(0.58rem, 2.5cqi, 0.65rem);
  color: var(--text-muted);
  margin-top: 0.05rem;
}
.jobs-ending-when {
  white-space: nowrap;
  font-size: clamp(0.62rem, 2.8cqi, 0.7rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
/* Colour carries urgency, so it is never the only thing that does: the row
   always spells out the date or the day count in words beside it. */
.jobs-ending-when--soon { color: var(--yellow); }
.jobs-ending-when--past { color: var(--red); }

.jobs-ending-more {
  margin-top: 0.55rem;
  font-size: clamp(0.58rem, 2.5cqi, 0.65rem);
  color: var(--text-muted);
}
.jobs-ending-empty {
  font-size: 0.7rem; color: var(--text-muted);
  padding: 0.1rem 0;
}