/* === ADDED 2026-10-24: the Log (/jobs/log) ===================================== */
/* Loaded after css/style.css, css/jobs.css and css/jobs-customers.css (crumbs, search box, tick
   box) by jobs/log.html only. Every colour is a --gx-* token from css/jobs.css, so Light, Dark and
   Auto follow by themselves; nothing here needs a dark rule of its own. Phone first (checked at
   375px: no sideways scroll, every tap target at least 44px): the search with a Filters button,
   the filters folded under it, then the changes. From 1024px the filters sit in a column beside
   the list and stay in view while it scrolls. */

.lg-shell { max-width: 1180px; }

.lg-title { align-items: flex-start; margin-bottom: 8px; }
/* The crumb's tap area reaches 44px without moving anything. */
.lg .jobs-crumbs a { position: relative; }
.lg .jobs-crumbs a::after { content: ''; position: absolute; left: -8px; right: -8px; top: -12px; bottom: -12px; }
.lg-title-text { flex: 1 1 320px; min-width: 0; }
.lg-lede { margin: 0 0 14px; max-width: 64ch; }
.lg-csv { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lg-csv-note { margin: -4px 0 12px; }
.lg-csv-note.is-error { color: var(--gx-bad); }

/* ------------------------------------------------------------------ filters */

.lg-filters { margin: 0 0 12px; min-width: 0; }
.lg-search { display: flex; gap: 8px; align-items: stretch; }
.lg-search input[type="search"] { flex: 1 1 auto; min-width: 0; }
.lg-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--gx-field-line);
  border-radius: 10px;
  background: var(--gx-field);
  color: var(--gx-strong);
  font: 500 15px/1 var(--gx-body);
  cursor: pointer;
}
.lg-toggle:hover { border-color: var(--gx-line-strong); }
.lg-toggle:focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; }
.lg-toggle[aria-expanded="true"] { border-color: var(--gx-line-strong); background: var(--gx-hover); }
.lg-toggle-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gx-invert);
  color: var(--gx-invert-text);
  font: 700 12.5px/22px var(--gx-body);
  text-align: center;
}

/* Folded on a phone until "Filters" is pressed. */
.lg-panel { display: none; gap: 0 12px; padding: 4px 0 6px; }
.lg-filters.is-open .lg-panel { display: grid; grid-template-columns: minmax(0, 1fr); }
.tech-panel .lg-field { display: block; margin: 0; min-width: 0; font-weight: 400; }
.lg-field .jobs-field-label { margin: 12px 0 6px; }
.lg-field select,
.lg-field input[type="date"] { width: 100%; min-width: 0; min-height: 50px; }
.lg-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.lg-dates[hidden] { display: none; }
.tech-panel .lg-loc { min-height: 44px; margin: 12px 0 4px; }
.lg-clear { justify-self: start; min-height: 44px; margin-top: 8px; }
.lg-clear[hidden] { display: none; }
/* Phone and tablet: "Show 35 changes" closes the filters and goes to the list. It stays in view
   at the bottom of the screen (above the tab bar) while the open filters are scrolled. */
.lg-show {
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 2;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  padding: 12px 18px;
}
@media (max-width: 719px) {
  body.has-jobs-tabbar .lg-show { bottom: calc(var(--gx-tab-h) + env(safe-area-inset-bottom) + 10px); }
  body.has-jobs-tabbar.is-typing .lg-show { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (min-width: 480px) {
  .lg-filters.is-open .lg-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-dates { grid-column: 1 / -1; }
  .tech-panel .lg-loc, .lg-clear, .lg-show { grid-column: 1 / -1; }
}

/* The filters in use, each with an x. */
.lg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; }
.lg-chips[hidden] { display: none; }
.lg-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: 0 0 0 14px;
  border-radius: 999px;
  background: var(--gx-raised-fill);
  border: 1px solid var(--gx-line);
  color: var(--gx-strong);
  font-size: 14px;
  font-weight: 500;
}
.lg-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-chip-x {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--gx-text-3);
  cursor: pointer;
}
.lg-chip-x .gx-ico { width: 16px; height: 16px; }
.lg-chip-x:hover { color: var(--gx-strong); }
.lg-chip-x:focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: -4px; }

.lg-status { margin: 4px 0 10px; }
.lg-status.is-error { color: var(--gx-bad); }

/* ------------------------------------------------------------------ the changes */

.lg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lg-list[aria-busy="true"] { opacity: 0.55; transition: opacity 0.2s; }

/* Each change is a card with a bar down its left edge for the kind of change: added green,
   changed grey, removed red, signed on or off teal, signing in amber. The kind is also in the
   words, so the colour is never the only way to tell. */
.lg-row {
  background: var(--gx-card);
  border: 1px solid var(--gx-line);
  border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--gx-line-3);
  overflow: hidden;
}
.lg-row.is-added { box-shadow: inset 3px 0 0 var(--gx-good); }
.lg-row.is-removed { box-shadow: inset 3px 0 0 var(--gx-bad); }
.lg-row.is-signed_on_off { box-shadow: inset 3px 0 0 var(--gx-teal); }
.lg-row.is-sign_in { box-shadow: inset 3px 0 0 var(--gx-warn-line); }
.lg-row.is-open { border-color: var(--gx-line-3); }

.lg-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 44px;
  gap: 0 12px;
  align-items: start;
  padding: 12px 4px 10px 14px;
  cursor: pointer;
}
.lg-head:hover { background: var(--gx-hover); }
.lg-head .cc-who-dot { margin-top: 2px; }
/* The admin dot's teal letters a shade deeper on its tint here (4.4:1 to 5.6:1 in light). */
.lg-head .cc-who-dot.is-a { color: var(--gx-teal-ink); }
.lg-main { min-width: 0; }
.lg-what { margin: 0; color: var(--gx-strong); font-size: 15.5px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.lg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--gx-muted);
}
.lg-when { color: var(--gx-muted); white-space: nowrap; }
.lg-area {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gx-fill-2);
  color: var(--gx-text-2);
  white-space: nowrap;
}

/* Links inside a row: the record and the map. Small on screen, but their tap area reaches 44px
   (the ::after below), and a tap on them never opens or closes the row. */
.lg-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  color: var(--gx-strong);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gx-link-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.lg-link::after { content: ''; position: absolute; left: -4px; right: -4px; top: -12px; bottom: -12px; }
.lg-link:focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; border-radius: 4px; }
.lg-link.lg-where { color: var(--gx-teal-text); text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.lg-where .gx-ico { width: 15px; height: 15px; }
.lg-where.is-none { color: var(--gx-muted); }

.lg-open {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--gx-text-3);
  cursor: pointer;
}
.lg-open:hover { background: var(--gx-fill); color: var(--gx-strong); }
.lg-open:focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: -2px; }
.lg-open .gx-ico { width: 18px; height: 18px; transition: transform 0.2s; }
.lg-open[aria-expanded="true"] .gx-ico { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .lg-open .gx-ico, .lg-list[aria-busy="true"] { transition: none; }
}

/* Opened: what changed, before and after, then the exact time, who, where and the number. */
.lg-details { padding: 2px 16px 14px 60px; border-top: 1px solid var(--gx-line-2); }
.lg-details[hidden] { display: none; }
.lg-changes, .lg-facts { margin: 10px 0 0; display: grid; gap: 6px; font-size: 14px; }
.lg-change, .lg-fact { display: grid; grid-template-columns: minmax(96px, 26%) minmax(0, 1fr); gap: 2px 14px; }
.lg-change dt, .lg-fact dt { color: var(--gx-muted); font-weight: 500; overflow-wrap: anywhere; }
.lg-change dd, .lg-fact dd { margin: 0; color: var(--gx-strong); overflow-wrap: anywhere; }
.lg-change dt::first-letter { text-transform: uppercase; }
.lg-before { color: var(--gx-text-3); text-decoration: line-through; text-decoration-color: var(--gx-faint); }
.lg-arrow { color: var(--gx-muted); margin: 0 6px; }
.lg-after { font-weight: 500; }
.lg-facts { padding-top: 10px; border-top: 1px dashed var(--gx-line-2); font-size: 13px; }
.lg-fact dd { color: var(--gx-text-2); }
.lg-nothing { margin: 10px 0 0; }

.lg-empty { padding: 26px 16px; text-align: center; background: var(--gx-card); border: 1px dashed var(--gx-line-3); border-radius: 12px; }
.lg-empty p { margin: 0; }
.lg-empty p:first-child { color: var(--gx-strong); font-weight: 500; margin-bottom: 4px; }
.lg-empty.is-error { border-color: var(--gx-bad); }
.lg-empty .lg-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.lg-empty-actions .jobs-link-btn { min-height: 44px; }

.lg-more { display: block; width: 100%; min-height: 48px; margin: 12px 0 4px; }
.lg-more[hidden] { display: none; }

/* Phone and tablet: Download CSV under the list (at the top it pushed the list down a screen). */
.lg-foot { display: grid; justify-items: start; gap: 6px; margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--gx-line-2); }
.lg-foot .lg-csv-note { margin: 0; }
@media (max-width: 1023px) {
  .lg-csv-top { display: none !important; }
}

@media (max-width: 479px) {
  .lg-head { grid-template-columns: 30px minmax(0, 1fr) 44px; gap: 0 10px; padding-left: 12px; }
  .lg-head .cc-who-dot { width: 30px; height: 30px; font-size: 12px; }
  .lg-details { padding: 2px 14px 14px; }
  .lg-change { grid-template-columns: minmax(0, 1fr); }
  .lg-fact { grid-template-columns: minmax(84px, 30%) minmax(0, 1fr); gap: 2px 10px; }
  .lg-foot { justify-items: stretch; }
  .lg-foot .lg-csv { justify-content: center; }
}

/* ------------------------------------------------------------------ laptop: filters beside */

@media (min-width: 1024px) {
  .lg-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; }
  .lg-filters {
    position: sticky;
    top: calc(var(--gx-bar-h) + env(safe-area-inset-top) + 16px);
    margin: 0;
    padding: 14px 16px 16px;
    background: var(--gx-card);
    border: 1px solid var(--gx-line);
    border-radius: 14px;
  }
  .lg-toggle, .lg-show, .lg-foot { display: none; }
  .lg-panel, .lg-filters.is-open .lg-panel { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .lg-dates, .tech-panel .lg-loc, .lg-clear { grid-column: auto; }
  .lg-results { min-width: 0; }
}

@media print {
  .lg-filters, .lg-chips, .lg-more, .lg-open, .lg-csv, .lg-foot { display: none !important; }
  .lg-details[hidden] { display: block; }
  .lg-row { break-inside: avoid; }
}