/* ============================================
   JOBS — Sky Console (soft light-blue ops theme)
   Aligned to the shared tokens defined in style.css :root.
   The local --jn-* names below are aliases that re-point the legacy
   token names used throughout this file (and dispatch.css) onto the
   light palette, with literal fallbacks in case load order ever shifts.
   ============================================ */

:root {
  --jn-ink:           var(--d-ink, #10283f);
  --jn-text:          var(--d-ink, #10283f);
  --jn-text-2:        var(--d-ink-2, #44617c);   /* secondary text */
  --jn-text-3:        var(--d-ink-3, #6e8aa3);   /* muted labels */
  --jn-line:          var(--d-line, #dbe7f2); /* hairline borders */
  --jn-line-2:        var(--d-line-strong, #bcd3e6);
  --jn-paper:         var(--d-surface, #ffffff);
  --jn-paper-2:       var(--d-surface-2, #dcebf7); /* hover / raised surfaces */
  --jn-amber:         var(--d-warn, #b45309);
  --jn-red:           var(--d-danger, #b91c1c);
  --jn-green:         var(--d-ok, #15803d);
  --jn-accent:        var(--d-accent, #2d7dd2);
  --jn-accent-strong: #1e6abf;
  --jn-brand-ggi:     var(--d-brand-ggi, #2d7dd2);
  --jn-brand-mgg:     var(--d-brand-mgg, #ea7317);
}

/* ------------ Floating jobs key — white glass card over the light map ------------ */
.jobs-key {
  position: absolute;
  bottom: 22px;
  left: 22px;
  z-index: 4;
  width: 232px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--d-line-strong, #bcd3e6);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(16,40,63,0.10);
  font-family: var(--font, 'Inter', sans-serif);
  overflow: hidden;
}
.jobs-key-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  border: none;
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 1px solid var(--d-line, #dbe7f2);
  transition: background 130ms ease;
}
.jobs-key-toggle:hover { background: var(--d-surface-2, #dcebf7); }
.jobs-key-body li .glyph { background: var(--d-surface-2, #dcebf7); border-color: var(--d-line-strong, #bcd3e6); }
.jobs-key-body li.brand-ggi .glyph { border-color: var(--jn-brand-ggi); }
.jobs-key-body li.brand-mgg .glyph { border-color: var(--jn-brand-mgg); }
.jobs-key-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--d-ink-3, #6e8aa3);
}
.jobs-key-chev {
  font-size: 0.85rem;
  color: var(--jn-text-3);
  transform: rotate(180deg);
  transition: transform 0.2s ease;
  line-height: 1;
}
.jobs-key.collapsed .jobs-key-chev { transform: rotate(0deg); }
.jobs-key.collapsed .jobs-key-toggle { border-bottom: none; }
.jobs-key.collapsed .jobs-key-body { display: none; }

.jobs-key-body {
  padding: 1rem 1rem 1.1rem;
}
.jobs-key-body .group { margin-bottom: 1rem; }
.jobs-key-body .group:last-child { margin-bottom: 0; }

/* "Show customer names" toggle row — sits below the filter groups,
   visually separated by a hairline so it reads as a setting not a filter. */
.jobs-key-body .jobs-key-labels-row {
  border-top: 1px solid var(--jn-line-2, #dbe7f2);
  padding-top: 0.7rem;
  margin-top: 0.2rem;
}
.jobs-key-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 12.5px;
  color: var(--d-ink-2, #44617c);
  cursor: pointer;
  user-select: none;
}
.jobs-key-toggle-label input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--jn-brand-ggi, #2d7dd2);
  cursor: pointer;
  margin: 0;
}
.jobs-key-toggle-label:hover { color: var(--jn-ink); }

.jobs-key-body h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--d-ink-3, #6e8aa3);
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}
.jobs-key-body ul { list-style: none; margin: 0; padding: 0; }
.jobs-key-body li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.34rem 0;
  font-size: 12.5px;
  color: var(--d-ink-2, #44617c);
  cursor: pointer;
  user-select: none;
  transition: opacity 130ms ease, color 130ms ease;
}
.jobs-key-body li:hover { color: var(--jn-ink); }
.jobs-key-body li.off  { opacity: 0.3; }
.jobs-key-body li .glyph {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 50%;
  background: var(--jn-paper-2);
  border: 1px solid var(--jn-line-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.jobs-key-body li .glyph svg { width: 10px; height: 10px; display: block; color: var(--jn-ink); }
.jobs-key-body li .label { flex: 1; text-transform: capitalize; }
.jobs-key-body li .counter {
  font-size: 11px;
  color: var(--jn-text-3);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 1.3rem;
  text-align: right;
}
.jobs-key-body li.brand-ggi .glyph,
.jobs-key-body li.brand-mgg .glyph {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--d-ink-2, #44617c);
}
.jobs-key-body li.brand-ggi .glyph { border-color: var(--jn-brand-ggi); }
.jobs-key-body li.brand-mgg .glyph { border-color: var(--jn-brand-mgg); }
.jobs-key-body li.age-dot .glyph { background: transparent; border: none; }
.jobs-key-body li.age-dot .glyph .dot {
  width: 8px; height: 8px; border-radius: 50%;
}

/* ------------ Job panel — dark console surface ------------ */
#jobPanel {
  font-family: var(--font, 'Inter', sans-serif);
  color: var(--jn-text);
  background: var(--jn-paper) !important;
  box-shadow: 0 16px 40px rgba(16,40,63,0.18);
}
#jobPanel ::-webkit-scrollbar { width: 8px; height: 8px; }
#jobPanel ::-webkit-scrollbar-thumb { background: #aac6de; border-radius: 8px; }
#jobPanel ::-webkit-scrollbar-track { background: transparent; }
#jobPanel .detail-header,
#jobPanel header.detail-header {
  background: var(--jn-paper) !important;
  color: var(--jn-text) !important;
  border-bottom: none !important;
  padding: 2.6rem 2.2rem 1.4rem !important;
}
#jobPanel .detail-header-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
}
#jobPanel h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--d-ink, #10283f);
  line-height: 1.25;
  margin: 0;
}
#jobPanel .detail-sub {
  font-size: 13px;
  color: var(--d-ink-2, #44617c);
  margin-top: 0.45rem;
  font-weight: 400;
  letter-spacing: 0;
}
#jobPanel .detail-close {
  background: transparent !important;
  color: var(--jn-text-3) !important;
  border: none !important;
  font-size: 1.4rem;
  width: 30px; height: 30px;
  cursor: pointer;
  transition: color 130ms ease;
}
#jobPanel .detail-close:hover { color: var(--jn-ink) !important; }
#jobPanel .detail-close:focus-visible { outline: 2px solid var(--d-accent, #2d7dd2); outline-offset: 2px; }
/* Stage pill in the side panel header — colour-matches the marker.
   We deliberately RE-SHOW .detail-header-badges (it was hidden in the
   earlier restyle) because the pill now lives there and is the
   primary stage signal at the top of the panel. Layout is untouched —
   only the badge slot is filled and tinted. */
#jobPanel .detail-header-badges { display: block; margin-top: 0.9rem; }

/* Stage colours are data — the dot and outline are driven by
   --jp-stage-accent, which matches the marker palette. No solid fill:
   the pill reads as dot + text + quiet outline on the dark surface. */
.jp-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--jp-stage-accent, #9ca3af) 30%, transparent);
  color: var(--d-ink-2, #44617c);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color 0.6s ease, color 0.6s ease;
}
.jp-stage-pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--jp-stage-accent, #9ca3af);
  box-shadow: 0 0 0 1px rgba(16,40,63,0.15);
}
.jp-stage-pill-label {
  text-transform: capitalize;
}
/* Soft pulse on the pill when an offer is pending so the side panel
   carries the same "waiting for accept" cue as the map marker. */
.jp-stage-pill-pulse {
  animation: jp-stage-pill-pulse 1.6s ease-in-out infinite;
}
@keyframes jp-stage-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180,83,9,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(180,83,9,0.18); }
}

#jobPanel .detail-body {
  padding: 0 2.2rem 2.6rem !important;
  background: var(--jn-paper);
}

/* Single status row */
#jobPanel .status-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 0 1.15rem;
  border-top: 1px solid var(--jn-line);
  border-bottom: 1px solid var(--jn-line);
  font-size: 12.5px;
}
#jobPanel .status-row .brand-mark {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--d-ink-3, #6e8aa3);
  text-transform: uppercase;
}
#jobPanel .status-row .divider {
  width: 1px; height: 11px; background: var(--jn-line-2);
}
#jobPanel .status-row .stage-label {
  color: var(--jn-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: 13.5px;
}
#jobPanel .status-row .age {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--jn-text-2);
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
#jobPanel .status-row .age .pip { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
#jobPanel .status-row .age-green  .pip { background: var(--jn-line-2); }
#jobPanel .status-row .age-yellow .pip { background: var(--jn-amber); }
#jobPanel .status-row .age-red    .pip { background: var(--jn-red); }
#jobPanel .status-row .age-red          { color: var(--jn-red); }
#jobPanel .status-row .age-yellow       { color: var(--jn-amber); }

/* Margin-exclusion chip — shown at the top of the side panel body
   whenever the job has flags.exclude_from_margin === true. Quiet
   warning look + a one-tap link to put it back into margin numbers. */
#jobPanel .jp-margin-excluded-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: transparent;
  border: 1px solid rgba(185,28,28,.3);
  color: var(--d-danger, #b91c1c);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  margin: 0.6rem 0 0.4rem;
  font-size: 12.5px;
}
#jobPanel .jp-margin-excluded-pill {
  font-weight: 600;
  letter-spacing: 0.02em;
}
#jobPanel .jp-margin-include-link {
  background: none;
  border: none;
  color: var(--d-accent, #2d7dd2);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px 4px;
  font-size: 12.5px;
  font-family: inherit;
  transition: color 130ms ease;
}
#jobPanel .jp-margin-include-link:hover { color: var(--d-ink, #10283f); }
#jobPanel .jp-margin-include-link:disabled { opacity: 0.45; cursor: default; text-decoration: none; }

/* Detail list — clean rows, hairline separators */
#jobPanel .detail-list {
  margin: 1.8rem 0 1.8rem;
  padding: 0;
}
#jobPanel .detail-list div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--jn-line);
}
#jobPanel .detail-list div:last-child { border-bottom: none; }
#jobPanel .detail-list dt {
  font-size: 12.5px;
  color: var(--d-ink-3, #6e8aa3);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
}
#jobPanel .detail-list dd {
  font-size: 13.5px;
  color: var(--d-ink, #10283f);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  margin: 0;
  text-align: right;
}

/* Single created line */
#jobPanel .created-line {
  font-size: 12px;
  color: var(--jn-text-3);
  letter-spacing: -0.005em;
  padding: 0;
  margin: 0 0 2.4rem;
}

/* Actions */
#jobPanel .actions {
  display: flex; flex-direction: column;
  gap: 0.7rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--jn-line);
}
#jobPanel .actions button {
  width: 100%;
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 8px;
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
  font-family: inherit;
}
#jobPanel .actions button:focus-visible { outline: 2px solid var(--d-accent, #2d7dd2); outline-offset: 2px; }
#jobPanel .actions button:disabled { opacity: 0.45; cursor: default; }
#jobPanel .actions button.primary {
  background: var(--d-btn, #2d7dd2);
  color: #ffffff;
  border: 1px solid var(--d-btn, #2d7dd2);
}
#jobPanel .actions button.primary:hover { background: #1e6abf; border-color: #1e6abf; }
#jobPanel .actions button.quiet {
  background: transparent;
  color: var(--d-ink-2, #44617c);
  border: none;
  font-size: 12.5px;
  font-weight: 500;
  padding: 0.5rem 0;
  border-radius: 8px;
}
#jobPanel .actions button.quiet:hover { color: var(--d-ink, #10283f); background: var(--d-surface-2, #dcebf7); }
#jobPanel .actions button.ghost {
  background: transparent;
  color: var(--d-ink, #10283f);
  border: 1px solid var(--d-line-strong, #bcd3e6);
}
#jobPanel .actions button.ghost:hover { background: var(--d-surface-2, #dcebf7); border-color: var(--d-line-strong, #bcd3e6); }
#jobPanel .actions .role-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--jn-text-3);
  padding: 0.6rem 0;
  letter-spacing: -0.005em;
}
#jobPanel .actions button.primary.expanded {
  background: var(--d-surface-2, #dcebf7);
  color: var(--d-ink-2, #44617c);
  border-color: var(--d-line-strong, #bcd3e6);
}

/* Click-twice confirm pattern: button flashes red and renames */
#jobPanel .actions button.priming,
#jobPanel .actions button.quiet.priming {
  background: var(--jn-red) !important;
  color: #e9f1f9 !important;
  border-color: var(--jn-red) !important;
  animation: priming-pulse 1.4s ease-in-out infinite;
}
@keyframes priming-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}

/* Installer / offer info display in the actions area */
#jobPanel .offer-info {
  display: flex; flex-direction: column;
  padding: 0.95rem 1rem;
  background: var(--jn-paper-2);
  border: 1px solid var(--d-line, #dbe7f2);
  border-radius: 8px;
  margin-bottom: 0.2rem;
}
#jobPanel .offer-info-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--d-ink-3, #6e8aa3);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
#jobPanel .offer-info-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--d-ink, #10283f);
  letter-spacing: -0.005em;
}
#jobPanel .offer-info-time {
  font-size: 12.5px;
  color: var(--jn-text-2);
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}

/* Dispatch options expanded inline under "Assign installer" */
#jobPanel .dispatch-expanded {
  padding: 1.2rem 0 0.4rem;
  border-top: 1px solid var(--jn-line);
  margin-top: 0.4rem;
  animation: expand-in 0.18s ease-out;
}
@keyframes expand-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#jobPanel .dispatch-expanded .dispatch-section { margin: 0; padding-top: 0; border-top: none; }
#jobPanel .dispatch-expanded .section-heading { display: none; }

/* ------------ GHL notes section — read-only context, dispatcher-only ------------ */
#jobPanel .ghl-notes-section {
  margin: 0 0 1.8rem;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--jn-line);
}
#jobPanel .ghl-notes-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--d-ink-3, #6e8aa3);
  margin: 0 0 0.85rem;
  font-weight: 600;
}
#jobPanel .ghl-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
#jobPanel .ghl-note {
  background: var(--jn-paper-2);
  border: 1px solid var(--jn-line);
  border-radius: 8px;
  padding: 0.85rem 0.95rem 0.75rem;
}
#jobPanel .ghl-note-body {
  font-size: 13px;
  color: var(--d-ink-2, #44617c);
  line-height: 1.45;
  letter-spacing: -0.005em;
  white-space: pre-line;
  word-break: break-word;
}
#jobPanel .ghl-note-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
  font-size: 11px;
  color: var(--jn-text-2);
  letter-spacing: -0.005em;
}
#jobPanel .ghl-note-source {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.42rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--d-line-strong, #bcd3e6);
  color: var(--d-ink-3, #6e8aa3);
}
#jobPanel .ghl-note-source-opp { color: var(--d-ink-2, #44617c); }
#jobPanel .ghl-note-dot {
  color: var(--jn-text-3);
}
#jobPanel .ghl-note-time {
  font-variant-numeric: tabular-nums;
}
#jobPanel .ghl-notes-toggle {
  margin-top: 0.6rem;
  background: transparent;
  border: none;
  padding: 0.35rem 0;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--jn-text-2);
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: left;
  transition: color 130ms ease;
}
#jobPanel .ghl-notes-toggle:hover { color: var(--jn-ink); }
#jobPanel .ghl-notes-extra {
  margin-top: 0.55rem;
}

/* ------------ Jobs tab: sort row ------------ */
.jobs-list-sort-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0 0.65rem 0;
}
.jobs-list-sort-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-3, #6e8aa3);
}
.jobs-list-sort-select {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--d-ink, #10283f);
  background: var(--d-bg, #e9f1f9);
  border: 1px solid var(--d-line-strong, #bcd3e6);
  border-radius: 8px;
  min-height: 36px;
  padding: 0.42rem 0.6rem;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.jobs-list-sort-select:hover { border-color: var(--d-accent, #2d7dd2); }
.jobs-list-sort-select:focus {
  outline: none;
  border-color: var(--d-accent, #2d7dd2);
  box-shadow: 0 0 0 3px var(--d-ring, rgba(45,125,210,0.25));
}

/* ------------ Jobs tab: age badge on each card ------------ */
/* Top-right column so the badge sits above the dollar value. */
.jobs-list-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  flex-shrink: 0;
}
/* Age tiers are data — each tier keeps its hue family (neutral, amber,
   orange, red), rendered as dot + text on a transparent badge instead
   of a tinted fill. The dot inherits currentColor via ::before. */
.jobs-list-age-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.jobs-list-age-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
}
/* Day 0 — quiet, just a label (no dot). */
.jobs-list-age-badge-new {
  color: var(--d-ink-3, #6e8aa3);
}
.jobs-list-age-badge-new::before { display: none; }
/* 1 to 3 days — muted text, neutral dot. */
.jobs-list-age-badge-fresh {
  color: var(--d-ink-2, #44617c);
}
/* 4 to 7 days — amber. */
.jobs-list-age-badge-amber {
  color: var(--d-warn, #b45309);
  border-color: rgba(180,83,9,.3);
}
/* 8 to 14 days — orange. */
.jobs-list-age-badge-orange {
  color: #ea7317;
  border-color: rgba(234,115,23,.3);
}
/* 15 or more days — red, the get-it-done flag. */
.jobs-list-age-badge-red {
  color: var(--d-danger, #b91c1c);
  border-color: rgba(185,28,28,.3);
}

/* iOS Safari auto-zoom fix: 16px minimum on inputs for touch devices */
@media (hover: none) and (pointer: coarse) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;
  }
}