/* WP 16 + 17: planning (day / week board, map of the day), shifts (utilisation, heat map), timesheets, trips and the field app (phone
   first: big touch targets, bottom tab bar from the shell, works at 360 px). Campus tokens only, no thick left borders, no uppercase. */
.plan-bar { gap: var(--space-2); }
.plan-bar > .input[type="date"] { width: auto; flex: 0 0 auto; max-width: 180px; }
.plan-emp { max-width: 260px; }
.spacer { flex: 1; }

/* day board: one column per employee */
.plan-day { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }
.plan-col { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--d-radius-card); padding: var(--space-3); display: grid; gap: var(--space-2); }
.plan-col.away { background: repeating-linear-gradient(135deg, var(--color-surface), var(--color-surface) 8px, var(--color-surface-secondary) 8px, var(--color-surface-secondary) 16px); }
.plan-col-head { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); align-items: baseline; justify-content: space-between; }
.plan-col-head a { font-weight: 700; }
.plan-col-body { display: grid; gap: var(--space-2); }
.plan-empty { padding: var(--space-2) 0; }
.visit-card { display: grid; gap: 2px; width: 100%; text-align: left; font: inherit; color: var(--color-text); cursor: pointer; background: var(--color-surface-secondary);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 8px 10px; }
.visit-card:hover { border-color: var(--color-border-strong); }
.visit-card[draggable="true"] { cursor: grab; }
.visit-card .vc-time { font-variant-numeric: tabular-nums; font-size: var(--font-size-sm); font-weight: 700; }
.visit-card .vc-name { font-weight: 600; overflow-wrap: anywhere; }
.visit-card.st-done { background: var(--color-success-subtle); }
.visit-card.st-started { background: var(--color-warning-subtle); }
.visit-card.st-cancelled, .visit-card.st-missed { opacity: .6; text-decoration: line-through; }
.visit-card.compact { padding: 4px 6px; font-size: var(--font-size-sm); grid-template-columns: auto 1fr; gap: 6px; }
.visit-card.compact .vc-time { font-weight: 600; }
.visit-card.compact .vc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* week board */
.plan-week th.is-today { color: var(--color-primary-text); }
.plan-week-emp { white-space: nowrap; }
.plan-cell { min-width: 120px; vertical-align: top; }
.plan-cell > * + * { margin-top: 4px; }
.plan-cell.away { background: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--color-surface-secondary) 6px, var(--color-surface-secondary) 12px); }
.plan-add { display: block; width: 100%; border: 1px dashed var(--color-border); background: transparent; color: var(--color-text-muted); border-radius: var(--radius-md); cursor: pointer; padding: 2px; opacity: .55; }
.plan-cell:hover .plan-add, .plan-add:focus-visible { opacity: 1; }
.drop-on { outline: 2px dashed var(--color-primary); outline-offset: -2px; }

/* map of the day: one colour per employee (chart palette) */
.map-view path.map-route.tone-2 { stroke: var(--chart-2); } .map-view path.map-route.tone-3 { stroke: var(--chart-3); }
.map-view path.map-route.tone-4 { stroke: var(--chart-4); } .map-view path.map-route.tone-5 { stroke: var(--chart-5); }
.map-view path.map-route.tone-6 { stroke: var(--chart-6); }
.map-line.tone-2, .route-swatch.tone-2 { background: var(--chart-2); } .map-line.tone-3, .route-swatch.tone-3 { background: var(--chart-3); }
.map-line.tone-4, .route-swatch.tone-4 { background: var(--chart-4); } .map-line.tone-5, .route-swatch.tone-5 { background: var(--chart-5); }
.map-line.tone-6, .route-swatch.tone-6 { background: var(--chart-6); }
.route-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--chart-1); flex: none; }
.plan-routes { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.tour-list { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }

/* shifts: utilisation bar + heat map per day */
.util { flex-wrap: nowrap; min-width: 140px; }
.util .progress { flex: 1; min-width: 80px; }
td.neg { color: var(--color-danger-text); font-weight: 600; }
.heat { display: grid; grid-template-columns: repeat(var(--n), minmax(14px, 1fr)); gap: 2px; min-width: calc(var(--n) * 16px); }
.heat-c { height: 22px; border-radius: 4px; background: var(--color-surface-secondary); font-size: 11px; display: grid; place-items: center; color: var(--color-text); font-variant-numeric: tabular-nums; }
.heat-c.h1 { background: color-mix(in srgb, var(--chart-2) 22%, var(--color-surface)); }
.heat-c.h2 { background: color-mix(in srgb, var(--chart-2) 50%, var(--color-surface)); }
.heat-c.h3 { background: color-mix(in srgb, var(--chart-2) 85%, var(--color-surface)); }
.heat-c.h4 { background: color-mix(in srgb, var(--chart-4) 70%, var(--color-surface)); color: #fff; }

/* timesheets / signatures */
.sig-thumb { max-height: 56px; max-width: 180px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.sig-thumb.sm { max-height: 32px; max-width: 110px; }
tr.clickable { cursor: pointer; }
tr.is-selected td { background: var(--color-primary-subtle); }
.proof-list .btn { flex: none; }

/* field app (phone first) */
.field-page { max-width: 720px; }
.btn.xl { min-height: 52px; padding: 0 18px; font-size: var(--font-size-lg, 1.05rem); justify-content: center; }
.btn.block { width: 100%; }
.field-actions { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.field-daynav { flex-wrap: nowrap; }
.field-daynav .btn { min-width: 44px; min-height: 44px; }
.center { text-align: center; } .right { text-align: right; }
.next-visit .nv-name { font-size: 1.25rem; font-weight: 700; }
.field-km { padding: 0 2px; }
.field-map .map-view { height: 300px; }
.field-visits, .field-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.field-list > li { display: flex; gap: var(--space-2); align-items: center; }
.field-list > li > .field-visit { flex: 1; }
.field-visit { display: flex; gap: var(--space-3); align-items: center; min-height: 56px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--d-radius-card);
  background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.field-visit .fv-main { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.field-visit .fv-pos { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-subtle); color: var(--color-primary-text); font-weight: 700; flex: none; }
.field-visit.st-done .fv-pos { background: var(--color-success-subtle); color: var(--color-success-text); }
.field-visit.st-cancelled, .field-visit.st-missed { opacity: .6; }
.field-call { min-width: 48px; min-height: 48px; }
.field-times { gap: var(--space-6); }
.field-times b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.svc-row { display: flex; gap: var(--space-2); align-items: center; min-height: 48px; border-bottom: 1px solid var(--color-divider); }
.svc-row input[type="checkbox"] { width: 24px; height: 24px; flex: none; }
.svc-row .qty { width: 84px; flex: none; }
.svc-row .unit { width: 42px; flex: none; }
.sig-pad { width: 100%; height: auto; aspect-ratio: 600 / 220; touch-action: none; background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--d-radius-card); cursor: crosshair; }
.km-form { display: grid; gap: var(--space-2); grid-template-columns: 110px 1fr auto; }
@media (max-width: 520px) { .km-form { grid-template-columns: 1fr; } }
.queue-badge { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--color-warning); background: var(--color-warning-subtle); color: var(--color-warning-text);
  border-radius: var(--radius-full); padding: 6px 12px; font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.queue-badge[hidden] { display: none; }
.field-tiles { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.field-tile { display: grid; place-items: center; gap: 6px; min-height: 92px; border: 1px solid var(--color-border); border-radius: var(--d-radius-card); background: var(--color-surface);
  color: var(--color-text); text-decoration: none; font-weight: 600; }
.field-legs { margin-top: var(--space-4); }
.field-leg-list, .field-leg-sum { list-style: none; margin: 0; padding: 0; }
.field-leg { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); min-height: 44px; }
.field-leg > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.field-leg b { white-space: nowrap; }
.field-leg.sum { border-bottom: 0; padding: 4px 0; min-height: 0; }
.field-leg.total { border-top: 1px solid var(--color-border); font-weight: 600; }
@media (max-width: 640px) {
  .plan-day { grid-template-columns: 1fr; }
  .plan-routes { grid-template-columns: 1fr; }
  .plan-emp { max-width: 100%; flex: 1 1 100%; }
}