/* =============================================================================
   JES CRM · pages/job_orders.css — the look that only these pages have: job_orders.
   Owner: the page builder "job_orders" of the vtiger-look wave (docs/vtiger-look/02-ui-contract.md §a.5, §j.2).
   Every class starts with pg-job_orders- ; every colour comes from tokens.css (var(--…)); the two list layouts
   below (2026-11-06) also write a few sizes of their own (column widths, the status dot).
   ============================================================================= */

/* ---------- split view (js/pages/job_orders/split.js): the orders left, the chosen one right ---------- */
.pg-job_orders-split { display: flex; flex-direction: column; min-width: 0; }
.pg-job_orders-split__top { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-light); }
.pg-job_orders-split__panes { display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0; }

/* the list: a column of its own that scrolls; on a narrow screen it stacks above the order */
.pg-job_orders-split__list {
  flex: 1 1 320px; max-width: 420px; min-width: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--color-border-light); background: var(--color-surface);
}
.pg-job_orders-split__tools { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--color-border-light); }
.pg-job_orders-split__search { width: 100%; }
.pg-job_orders-split__shows { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pg-job_orders-split__shows .btn.is-active { background: var(--color-surface); border-color: var(--color-primary-border); color: var(--color-text-strong); font-weight: var(--font-weight-semibold); }
.pg-job_orders-split__count { font-size: var(--font-size-md); color: var(--color-text-muted); }
/* position: relative keeps the visually hidden status text of each item inside this scroll box (base.css places
   .visually-hidden absolutely: without it the text escapes the box and makes the whole page thousands of pixels tall) */
.pg-job_orders-split__items { position: relative; flex: 1 1 auto; max-height: calc(100vh - var(--shell-bar-height) - var(--modulebar-height) - 220px); overflow-y: auto; }
.pg-job_orders-split__ul { list-style: none; margin: 0; padding: 0; }
.pg-job_orders-split__item {
  display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; padding: var(--space-3);
  border: 0; border-bottom: 1px solid var(--color-border-light); background: var(--color-surface);
  color: var(--color-text); font: inherit; text-align: left; cursor: pointer;
}
.pg-job_orders-split__item:hover { background: var(--color-row-hover); }
.pg-job_orders-split__item.is-chosen { background: var(--color-row-selected); box-shadow: inset 3px 0 0 var(--color-primary); }
.pg-job_orders-split__item:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.pg-job_orders-split__dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.pg-job_orders-split__dot.is-running { background: var(--color-success); }
.pg-job_orders-split__dot.is-closed { background: var(--color-muted); }
.pg-job_orders-split__item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-job_orders-split__item-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-strong); overflow-wrap: anywhere; }
.pg-job_orders-split__item.is-muted .pg-job_orders-split__item-title { color: var(--color-text-muted); }
.pg-job_orders-split__item-sub,
.pg-job_orders-split__item-facts { font-size: var(--font-size-md); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-job_orders-split__more { padding: var(--space-2) var(--space-3); }
.pg-job_orders-split__more:empty { display: none; }

/* the chosen order */
.pg-job_orders-split__order { flex: 999 1 480px; min-width: 0; padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.pg-job_orders-split__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.pg-job_orders-split__head-text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pg-job_orders-split__ref { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.pg-job_orders-split__mono { font-family: var(--font-family-mono); }
.pg-job_orders-split__title { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-strong); }
.pg-job_orders-split__account { font-size: var(--font-size-lg); }
.pg-job_orders-split__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.pg-job_orders-split__facts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3) var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light);
}
.pg-job_orders-split__facts .field { display: flex; flex-direction: column; gap: 2px; }
.pg-job_orders-split__facts .field__label { color: var(--color-field-label); font-size: var(--font-size-md); }
.pg-job_orders-split__texts { display: flex; flex-direction: column; gap: var(--space-4); }
.pg-job_orders-split__text-title { margin: 0 0 var(--space-1); font-size: var(--font-size-block); font-weight: var(--font-weight-semibold); color: var(--color-title); }
.pg-job_orders-split__text .field__value--long { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- clean view (js/pages/job_orders/clean.js): one search, status badges, position + company in one cell ---------- */
.pg-job_orders-clean { display: flex; flex-direction: column; min-width: 0; }
.pg-job_orders-clean__top { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-light); }
.pg-job_orders-clean__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); }
.pg-job_orders-clean__search { flex: 0 1 320px; min-width: 200px; }
.pg-job_orders-clean__shows { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pg-job_orders-clean__shows .btn.is-active { background: var(--color-surface); border-color: var(--color-primary-border); color: var(--color-text-strong); font-weight: var(--font-weight-semibold); }
.pg-job_orders-clean__spacer { flex: 1 1 auto; }
.pg-job_orders-clean__pager { display: flex; align-items: center; gap: var(--space-1); }
.pg-job_orders-clean__range { margin-right: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-md); }
.pg-job_orders-clean__box { padding: 0 var(--space-3) var(--space-4); }
.pg-job_orders-clean__scroll { overflow-x: auto; border: 1px solid var(--color-border-light); border-radius: var(--radius-md); }
.pg-job_orders-clean__table { width: 100%; min-width: 1000px; border-collapse: collapse; }
.pg-job_orders-clean__table th {
  padding: var(--list-head-padding); background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border);
  color: var(--color-field-label); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); text-align: left; white-space: nowrap;
}
.pg-job_orders-clean__table td { padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.pg-job_orders-clean__row:hover td { background: var(--color-row-hover); }
.pg-job_orders-clean__table td.is-mono { font-family: var(--font-family-mono); font-size: var(--font-size-md); white-space: nowrap; color: var(--color-text-muted); }
.pg-job_orders-clean__table td.is-strong { font-weight: var(--font-weight-semibold); white-space: nowrap; }
.pg-job_orders-clean__table td[data-col="position"] { max-width: 340px; }
.pg-job_orders-clean__table td[data-col="owner"] { white-space: nowrap; }
.pg-job_orders-clean__title { display: block; font-weight: var(--font-weight-semibold); }
.pg-job_orders-clean__row.is-muted .pg-job_orders-clean__title { color: var(--color-text-muted); }
.pg-job_orders-clean__sub { display: block; margin-top: 2px; font-size: var(--font-size-md); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767px) {
  .pg-job_orders-clean__search { flex: 1 1 100%; }
  .pg-job_orders-split__list { max-width: none; border-right: 0; border-bottom: 1px solid var(--color-border-light); }
  .pg-job_orders-split__items { max-height: 50vh; }
  .pg-job_orders-split__order { padding: var(--space-3); }
}