/* ==========================================================================
   The application chassis: the layout the Admin return composes, expressed as
   classes so the templates carry structure rather than a wall of inline style.

   Everything here is a token from kin-core.css or jules-tokens.css. The
   breakpoints are the return's own: the rail disappears below 1023, the mobile
   nav appears below 767, and the two-column record collapses at 1100.
   ========================================================================== */

.jx-app {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--carbon);
  display: flex;
  flex-direction: column;
}

.jx-body { display: flex; flex: 1; align-items: stretch; min-height: 0; }

/* A CONTRACTOR HAS NO RAIL, so the body is one column and the main pane keeps
   its own measure rather than stretching across the space a rail would have
   occupied. Surface 4: one destination is not a rail. */
.jx-body--norail { display: block; }
.jx-body--norail > .jx-main { padding-bottom: var(--s7); }

.j-rail[data-jx="rail"] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: var(--header);
  --jx-header-offset: -64px;
  height: calc(100vh + var(--jx-header-offset));
  overflow: auto;
}

.jx-rail-card { margin-top: auto; padding: 12px; display: grid; gap: 8px; }

.jx-main {
  flex: 1;
  min-width: 0;
  padding: var(--s6) var(--pad) var(--s7);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.jx-footer {
  border-top: 1px solid var(--line);
  background: var(--carbon);
  padding: var(--s4) var(--pad);
  display: flex;
  gap: var(--s4);
  align-items: center;
  flex-wrap: wrap;
}

/* --- The two column record ------------------------------------------ */

.jx-cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
.jx-col { display: grid; gap: var(--s5); min-width: 0; }

/* --- The engagement seam --------------------------------------------- */

.jx-seam {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--void);
  display: flex;
  min-height: 128px;
  overflow: hidden;
}
.jx-seam-half { flex: 1; min-width: 0; padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.jx-seam-half + .jx-seam-half { padding-left: 40px; }
.jx-seam-badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fl-navy);
  border: 1px solid var(--human-24);
  color: var(--human);
  border-radius: 999px;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
}
/* The seam mark itself: the FL design system draws a bowed line between the
   two eras. Rendered here as a hairline with a soft node, which is the same
   idea in one element. */
.jx-seam-mark {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--human-40), transparent);
  pointer-events: none;
}
.jx-seam-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--human);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--human) 18%, transparent);
}

/* --- Attendance chips, Component Specs 02 ---------------------------- */

.jx-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.jx-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--att-worked) 38%, transparent);
  background: var(--fill-faint);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--att-worked);
  white-space: nowrap;
}
/* Short hours renders in SAND, never clay: it is a fact, not a fault. */
.jx-chip[data-state="short_hours"] { color: var(--att-short); border-color: color-mix(in srgb, var(--att-short) 30%, transparent); }
.jx-chip[data-state="extra_hours"] { color: var(--att-extra); border-color: color-mix(in srgb, var(--att-extra) 38%, transparent); }
.jx-chip[data-state="covered"] { color: var(--att-covered); border-color: color-mix(in srgb, var(--att-covered) 38%, transparent); }
.jx-chip[data-state="needs_review"], .jx-chip[data-state="unclear"] { color: var(--att-review); border-color: color-mix(in srgb, var(--att-review) 38%, transparent); }
.jx-chip[data-state="leave"] { color: var(--human); border-color: var(--human-24); }
.jx-chip[data-state="not_worked"] { color: var(--sage); border-color: var(--line-strong); }

/* --- The people list -------------------------------------------------- */

.jx-people { display: grid; gap: 1px; background: var(--line-soft); border-radius: 10px; overflow: hidden; }
.jx-person-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 1.4fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--ink);
  text-decoration: none;
  color: inherit;
  transition: background var(--d-ui) var(--e-out);
}
.jx-person-row:hover { background: var(--fill-faint); }
.jx-initials {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--human-14);
  border: 1px solid var(--human-24);
  color: var(--human);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .jx-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .j-rail[data-jx="rail"] { display: none !important; }
}

@media (max-width: 860px) {
  .jx-person-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .jx-person-row > .jx-hide-md { display: none; }
  .jx-seam { flex-direction: column; min-height: 0; }
  .jx-seam-half + .jx-seam-half { padding-left: 18px; border-top: 1px solid var(--line); }
  .jx-seam-mark { display: none; }
}

@media (max-width: 767px) {
  [data-jx="hide-sm"] { display: none !important; }
  .jx-main { padding-bottom: 84px; }
  .jx-body--norail > .jx-main { padding-bottom: var(--s6); }
  .j-mob { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }
}

.jx-pay-approval {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(190px, 1fr) auto;
  gap: 9px;
  align-items: end;
}

@media (max-width: 620px) {
  .jx-pay-approval { grid-template-columns: minmax(0, 1fr); }
  .jx-pay-approval .k-btn { justify-content: center; width: 100%; }
}

@media (min-width: 768px) {
  .j-mob { display: none; }
}

/* --- The pipeline board ------------------------------------------------
   Component Specs 02: 262px columns, gap 10, scrolling sideways on a desk.
   Below the existing 767px breakpoint the SAME cards stack instead, because a
   board a phone can only reach by scrolling sideways through eight columns is
   a board nobody reads on a phone. Same card, same order, same grouping. */
.jx-board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: var(--s4); }
.jx-board-col { flex: 0 0 auto; width: 262px; }

@media (max-width: 767px) {
  .jx-board { flex-wrap: wrap; overflow-x: visible; }
  .jx-board-col { width: 100%; }
}