/* KTE Service — "Service Line" design trial: Planner board, Schedule week grid, Who's Free, Today Status.
   Layout rules carried over from the working Planner (drag and drop, fitting the window); the look is new (see the end of this file). */
/* schedule */
.sched-pick .field { margin: 0; min-width: 200px; }
.sched { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.sched .panel { margin: 0; }
.sched-list { list-style: none; margin: 0; padding: 0; }
.sched-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); background: var(--surface); }
.sched-list li:first-child { border-top: 0; }
.sched-list.day li { cursor: grab; }
.sched-list li.dragging { opacity: 0.4; }
.sj { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sj-sub { color: var(--muted); font-size: 0.86rem; }
.sj-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.sj-btns { display: flex; gap: 2px; }
.sj-btns .icon-btn { min-width: 36px; min-height: 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sj-btns .icon-btn:disabled { opacity: 0.3; }
.drag { color: var(--muted); letter-spacing: -2px; }
.tag-assigned { background: #e6f1fb; border-color: #c4dcf2; color: #0c447c; }
.tag-revisit_required { background: #faeeda; border-color: #efd6ac; color: #633806; }
.tag-parts_received, .tag-repair_visit { background: #e1f5ee; border-color: #b4e2d2; color: #085041; }
.later { margin: 12px 0 0; }
.carried-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #FCEBEB; color: #791F1F; }
.zone-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #E6F1FB; color: var(--primary); border: 1px solid #B5D4F4; }

/* schedule week grid */
.week-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.week-label { margin: -8px 0 10px; }
.week-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.week-grid { width: 100%; border-collapse: collapse; min-width: 720px; }
.week-grid th, .week-grid td { border-bottom: 1px solid var(--line); padding: 4px; text-align: center; font-size: 0.84rem; }
.week-grid thead th { font-weight: 600; color: var(--muted); padding: 10px 4px; }
.week-grid thead th small { display: block; color: var(--primary); font-weight: 700; }
.week-grid tbody th { text-align: left; font-weight: 600; padding: 6px 10px; white-space: nowrap; }
.week-grid tr:last-child > * { border-bottom: 0; }
.wg-tech { display: flex; gap: 8px; align-items: center; }
.week-grid .is-today { background: #fff8e8; }
.week-grid thead .is-today { color: var(--primary); }
.week-grid .is-fri { background: repeating-linear-gradient(135deg, #f3f4f6 0 6px, #eceef1 6px 12px); color: #9ca3af; }
.wg-cell { width: 100%; min-height: 52px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--ink);
  background: rgba(13, 27, 42, var(--shade, 0)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.wg-cell:hover { border-color: var(--line-strong); }
.wg-cell.is-sel { border: 2px solid var(--primary); }
.wg-cell b { font-size: 1.05rem; }
.wg-sub { display: flex; gap: 6px; font-size: 0.74rem; font-weight: 700; }
.wg-done { color: #27500A; font-weight: 700; }
.wg-miss { color: var(--danger); font-weight: 700; }
.sched-panels { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 14px; }
.sched-panels .panel { margin: 0; }
.day-head { display: flex; gap: 10px; align-items: center; }

/* ---------- Planner and "Who's Free" ---------- */
.week-grid thead th.is-sel-day { color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.week-grid td.is-sel-day { background: #F3F6FA; }
.wg-cell.is-off { background: repeating-linear-gradient(135deg, #f3f4f6 0 6px, #eceef1 6px 12px); }
.tag-off { background: #F1F2F4; border-color: var(--line); color: var(--muted); }
/* Overtime: planned on the person's weekly day off (Schedule, Planner, Who's Free) */
.tag-ot { background: #FFF4E0; border-color: #E8A33D; color: #8A4B00; font-size: 0.66rem; font-weight: 700; padding: 0 5px; letter-spacing: 0.02em; }
.tag-usual { background: #E6F1FB; border-color: #c4dcf2; color: #0C447C; }
.pl-jobs { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.pl-jobs li a { text-decoration: none; }
.pl-jobs small { display: block; margin-top: 2px; }
.pl-none { margin: 6px 0; }
.free-count { margin-left: auto; font-weight: 600; font-size: 0.84rem; white-space: nowrap; }
.free-count.is-free { color: #27500A; }
.free-name { font-weight: 600; text-align: left; }
.free-panel { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: #FAFBFC; margin-top: 10px; }
.free-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.free-date { display: inline-flex; align-items: center; gap: 6px; }
.free-date input { width: auto; }
.free-body { max-height: 260px; overflow-y: auto; margin-top: 8px; }
.free-team h4 { margin: 8px 0 4px; font-size: 0.76rem; color: var(--muted); }
.free-list, .free-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; border-top: 1px solid var(--line); padding: 4px 0; }
.free-list > li:first-child { border-top: 0; }
.free-row { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; background: none; border: 0; padding: 6px 0; font: inherit; color: var(--ink); cursor: pointer; min-height: 36px; text-align: left; }
.free-list .is-off .free-name, .free-jobs { flex: 1 1 100%; padding: 0 0 8px 32px; }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .head-btns { width: 100%; }
  .head-btns .btn { flex: 1 1 auto; justify-content: center; }
  .pin-actions .btn { white-space: nowrap; padding-inline: 10px; }
}
.nc-free summary { cursor: pointer; font-weight: 600; color: var(--link); font-size: 0.9rem; }
.nc-free .free-panel { margin-top: 6px; }
.team-text { font-size: 0.95rem; line-height: 1.45; white-space: pre-wrap; }
.week-grid .pl-team th { background: var(--bg); color: var(--muted); font-size: 0.76rem; padding: 8px 10px; text-align: left; }

/* ---------- Planner board (app/js/pages/planner.js) ---------- */
.pl-pin { position: sticky; top: 0; z-index: 15; background: var(--bg); padding-top: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.pl-head { margin-bottom: 8px; align-items: center; }
.pl-date { display: flex; align-items: center; gap: 6px; }
.pl-date input { width: auto; }
.pl-tabs { margin-bottom: 8px; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; }
.pl-lock-note, .pl-hint { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: #FFF6E5; border: 1px solid #F2D29B; color: #6B4A0B; font-size: 0.9rem; }
.pl-hint { background: var(--link-soft); border-color: #C3D8EE; color: var(--primary); }
/* technicians strip */
.pl-strip { display: flex; flex-wrap: wrap; gap: 10px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.pl-strip.is-over, .drop-pool.is-over { outline: 2px dashed var(--link); outline-offset: -4px; }
.strip-team h3 { margin: 0 0 6px; font-size: 0.72rem; color: var(--muted); }
.strip-stationary { border-left: 1px solid var(--line); padding-left: 14px; }
.strip-stationary h3 { color: #0B4F63; }
.faces { display: flex; flex-wrap: wrap; gap: 6px; }
.face { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; padding: 4px 2px; background: none; border: 0; border-radius: var(--radius-sm); cursor: grab; font: inherit; color: var(--ink); }
.face:hover { background: var(--bg); }
.face-pic { position: relative; display: inline-block; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.face-pic .av { display: block; border-radius: 50%; }
.face.is-off .face-pic { box-shadow: 0 0 0 3px #E0A526; }
.face.is-driver .face-pic { box-shadow: 0 0 0 3px var(--primary); }
.face.is-leave { cursor: not-allowed; opacity: 0.45; filter: grayscale(1); }
.face.is-used { opacity: 0.4; }
.face.is-selected { background: var(--link-soft); outline: 2px solid var(--link); }
.face.is-dragging, .pj.is-dragging { opacity: 0.4; }
.face-name { font-size: 0.74rem; font-weight: 600; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face-line { display: flex; align-items: center; gap: 2px; max-width: 62px; }
.face-line .face-name { min-width: 0; }
.face-line .tag-ot { flex: none; padding: 0 3px; font-size: 0.6rem; }
.face-role { font-size: 0.64rem; color: var(--muted); }
.face-car { position: absolute; left: -4px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; }
.car { width: 13px; height: 13px; fill: var(--primary); vertical-align: -2px; }
.face-count { position: absolute; right: -5px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 0.68rem; font-weight: 700; display: grid; place-items: center; }
/* board: pool | crews | problems */
.pj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pj { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--surface); cursor: grab; font-size: 0.88rem; }
.pj[hidden] { display: none; }
.pj.is-selected { outline: 2px solid var(--link); background: var(--hover); }
.pj.is-promised { border-left: 4px solid var(--primary); }
.pj.is-carried, .pj.is-overdue { border-left: 4px solid #C0392B; background: #FFF8F7; }
.pj.is-locked { cursor: not-allowed; opacity: 0.6; }
.pj-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pj-n { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; }
.lock { width: 14px; height: 14px; fill: var(--primary); vertical-align: -2px; }
.pj-move { margin-left: auto; display: inline-flex; gap: 2px; }
.pj-move .icon-btn { width: 24px; height: 24px; font-size: 0.7rem; }
.pj-main { font-weight: 600; margin-top: 2px; }
.pj-sub { color: var(--muted); font-size: 0.82rem; }
.pj-foot { margin-top: 2px; }
.crew { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; min-height: 120px; }
.crew.is-over, .transport-slot.is-over { outline: 2px dashed var(--link); outline-offset: -3px; }
.crew-head { display: flex; justify-content: space-between; align-items: baseline; }
.crew-head h3 { margin: 0; font-size: 0.95rem; }
.crew-faces { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px 0; }
.crew-face { position: relative; }
.face-out { position: absolute; right: 0; top: 0; width: 18px; height: 18px; font-size: 0.6rem; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; }
/* phones enlarge icon buttons to 40px, which would cover the face: keep the small corner ✕ (a little larger tap area, away from the face's centre) */
.icon-btn.face-out { min-width: 0; min-height: 0; } .face-out::before { content: ""; position: absolute; inset: -6px; }
.crew-line { margin: 0 0 8px; font-size: 0.86rem; }
.transport-slot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; border: 1px dashed #C9CFD8; border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--muted); }
.transport-slot.has-driver { border-style: solid; color: var(--ink); background: var(--bg); }
.transport-slot .icon-btn { margin-left: auto; }
.crew-jobs { margin-top: 4px; }
.crew-empty { margin: 6px 0 0; }
.pl-board.is-readonly .face, .pl-board.is-readonly .pj { cursor: default; }
/* problems */
.pl-problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-problems li { padding: 7px 10px; border-radius: var(--radius-sm); font-size: 0.86rem; border: 1px solid; }
.pl-problems .sev { display: block; font-size: 0.68rem; font-weight: 700; }
.pl-problems .sev-block { background: #FCEBEB; border-color: #F1B3AB; color: #791F1F; }
.pl-problems .sev-warn { background: #FFF6E5; border-color: #F2D29B; color: #6B4A0B; }
.pl-problems .sev-info { background: var(--bg); border-color: var(--line); color: var(--muted); }
.pl-issues { margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font-size: 0.86rem; }
.pl-issues p { margin: 0 0 4px; }
/* Today status */
.ts-tiles { grid-template-columns: repeat(3, 1fr); max-width: 560px; }
.ts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.ts-status { font-size: 0.74rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--bg); }
.ts-completed .ts-status { background: #E7F4EE; color: #085041; }
.ts-not_finished .ts-status { background: #FFF6E5; color: #6B4A0B; }
.ts-not_updated { border-color: #F1B3AB; background: #FFF8F7; }
.ts-not_updated .ts-status { background: #FCEBEB; color: #791F1F; }
.ts-people { display: flex; flex-wrap: wrap; gap: 6px 14px; width: 100%; }
.ts-person { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .pl-pin { position: static; }
  .ts-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* My Jobs: crew from the Planner, drop and pick-up runs, 3 pm reminder */
.my-crew { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.my-crew small { display: block; color: var(--muted); }
.crew-avs { display: inline-flex; }
.crew-avs .av { border: 2px solid var(--surface); border-radius: 50%; margin-left: -8px; }
.crew-avs .av:first-child { margin-left: 0; }
.drop-card { border-left: 4px solid var(--primary); }
.my-crews .my-crew-day + .my-crew-day { margin-top: 10px; }
.update-note { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: #FFF6E5; border: 1px solid #F2D29B; color: #6B4A0B; font-weight: 600; }
.transport-box .grid-2 { margin-top: 8px; }
.leave-box { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.leave-box h3 { margin: 0; font-size: 0.95rem; }
.leave-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.leave-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.leave-list small { display: block; }
.promise-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.promise-form .field { margin: 0; flex: 1 1 200px; }
.promise-form .form-error { flex-basis: 100%; margin: 0; }
.pl-pool .pj.is-over { outline: 2px dashed var(--link); outline-offset: -2px; background: var(--hover); }
.pool-tip { margin: -4px 0 8px; }
.crew-none { display: flex; flex-direction: column; gap: 4px; justify-content: center; border-style: dashed; }
/* Planner day arrows: full-size tap targets on phones */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .pl-date .btn { min-width: 44px; min-height: 44px; }
  .pl-date input[type="date"] { min-height: 44px; }
}
.pl-page .pl-pin { position: static; margin: 0 0 8px; padding: 0; border: 0; }
.pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pl-title { max-width: 140px; }
.pl-title h1 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.pl-title p { margin: 0; font-size: 0.76rem; line-height: 1.25; }
.pl-bar .pl-tabs { margin: 0; padding: 3px; }
.pl-bar .pl-tabs button { padding: 5px 8px; font-size: 0.82rem; }
.pl-bar .pl-actions { margin-left: auto; padding: 0; gap: 4px; align-items: center; }
.pl-bar .pl-actions .btn { padding: 4px 7px; font-size: 0.78rem; }
.pl-bar .pl-date { gap: 4px; }
.pl-bar .pl-date .btn { min-width: 30px; padding: 4px 6px; justify-content: center; }
.pl-bar .pl-date input { min-height: 32px; padding: 3px 6px; width: 128px; font-size: 0.84rem; }
.pl-page .pj-list { grid-template-columns: minmax(0, 1fr); }
.pl-page .pl-lock-note, .pl-page .pl-issues { margin: 8px 0 0; }
.pl-prob-n { font-variant-numeric: tabular-nums; }
.pl-prob.has-problems { background: #FCEBEB; border-color: #E4A29B; color: var(--danger); }
.pl-problems-dlg .pl-problems { margin-top: 2px; }
.pl-sticky { background: var(--bg); }
.pl-page .pl-strip { flex-wrap: nowrap; overflow-x: auto; gap: 6px 16px; padding: 6px 10px; margin: 0 0 8px; scrollbar-width: thin; }
.pl-page .strip-team { flex: none; }
.pl-page .strip-team h3 { margin-bottom: 2px; white-space: nowrap; }
.pl-page .faces { flex-wrap: nowrap; gap: 2px; }
.pl-page .pl-strip .face { width: 58px; padding: 2px; }
.pl-page .face.is-selected { background: var(--link-soft); outline: 0; }
.pl-page .face.is-selected .face-pic { box-shadow: 0 0 0 3px var(--link); }
.pl-page .pl-hint { margin: 0 0 8px; padding: 6px 12px; }
.pl-board { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr); gap: 10px; }
.pl-board > * { min-width: 0; }
.pl-jobs-area { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.pl-jobs-area > input { min-height: 36px; padding: 6px 10px; }
.pl-jobcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.pl-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pl-col-head { flex: none; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pl-col-head h2 { margin: 0; font-size: 0.92rem; }
.pl-count { color: var(--muted); font-weight: 600; }
.pl-col-head .pool-tip { margin: 2px 0 0; }
.pl-col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.pl-crews { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; align-items: start; }
.pl-crews .crew { padding: 8px 10px; min-height: 0; }
.pl-group { margin: 2px 0 6px; font-size: 0.72rem; color: var(--primary); }
.pl-group.is-other { margin-top: 12px; color: var(--muted); }
.pl-empty { margin: 4px 2px; }
.pl-page .pj-list { gap: 5px; }
.pl-page .pj { padding: 5px 8px; font-size: 0.84rem; line-height: 1.3; }
.pl-page .pj-top { gap: 4px 6px; }
.pl-page .pj-main { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-page .pj-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.pl-page .zone-tag, .pl-page .carried-tag { font-size: 0.66rem; padding: 0 6px; }
.pj-when { margin-left: auto; font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.pj-when.is-red { color: var(--danger); font-weight: 700; }
.pj-when + .pj-move { margin-left: 4px; }
div.pj-when { margin: 1px 0 0; }
.crew-jobs .pj-move { margin-left: auto; }
.pj.is-far { opacity: 0.55; }
.pj.is-far:hover, .pj.is-far:focus-visible { opacity: 1; }
.pj.is-zone { border-color: var(--link); box-shadow: inset 3px 0 0 var(--link); }
.pj.is-far-drag { opacity: 0.6; }
.pl-page.is-picking .pl-pool .pj:not(.is-locked), .pl-page.is-picking .crew { cursor: copy; }
@media (min-width: 1025px) and (max-width: 1359px) { .pl-bar .pl-long { display: none; } }
@media (min-width: 1025px) {
  main:has(> .pl-page) { max-width: none; height: calc(100vh - var(--top-h) - var(--safe-t)); height: calc(100dvh - var(--top-h) - var(--safe-t)); padding: 12px 16px; overflow: hidden; display: flex; flex-direction: column; }
  .pl-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .pl-page > .pl-board { flex: 1; min-height: 0; }
  .pl-board > .pl-col, .pl-jobcols > .pl-col { min-height: 0; }
  .pl-jobs-area .pl-jobcols { flex: 1; }
}
@media (max-width: 1024px) {
  main:has(> .pl-page) { max-width: none; }
  .pl-sticky { position: sticky; top: calc(var(--top-h) + var(--safe-t)); z-index: 14; padding-top: 4px; }
  .pl-board, .pl-jobcols { grid-template-columns: minmax(0, 1fr); }
  .pl-col-body { overflow: visible; }
  .pl-bar .pl-actions { margin-left: 0; }
}
/* Planner problems on their crew or job; Confirm / Copy Schedule bring the first block into view and flash it */
.pl-issue { margin: 4px 0; padding: 4px 8px; border-radius: var(--radius-sm); font-size: 0.8rem; line-height: 1.3; border: 1px solid; }
.pl-issue.sev-block { background: #FCEBEB; border-color: #F1B3AB; color: #791F1F; font-weight: 600; }
.pl-issue.sev-warn { background: #FFF6E5; border-color: #F2D29B; color: #6B4A0B; }
.pl-issue.sev-info { background: var(--bg); border-color: var(--line); color: var(--muted); }
.pl-general:empty { display: none; }
.pl-general { margin-bottom: 8px; }
.crew.has-block, .pj.has-block { border-color: #E4A29B; }
@keyframes pl-flag { 0%, 60% { box-shadow: 0 0 0 3px #E4A29B; } 100% { box-shadow: 0 0 0 0 transparent; } }
.is-flagged { animation: pl-flag 1.8s ease-out; }
/* Planner: a crew job's move buttons sit in its top-right corner, so a tap on the card never lands on them by accident */
.crew-jobs .pj { position: relative; padding-right: 78px; }
.crew-jobs .pj-move { position: absolute; top: 3px; right: 4px; margin: 0; }
@media (max-width: 1024px) { .pl-crews { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) { .crew-jobs .pj { padding-right: 132px; } }
.rec-fields > p { margin: 0 0 6px; }
.pj-owner, .pj-rec { font-size: 0.78rem; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.pj-owner b { color: var(--ink); }
.pj-owner.is-miss b { color: var(--danger); }
.owner-miss { color: var(--danger); font-weight: 600; }
.owner-planned { background: #E6F1FB; color: #0C447C; border-radius: 4px; padding: 0 4px; }
.pj-rec { display: flex; gap: 4px; align-items: baseline; min-width: 0; }
.pj-rec-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pj-rec .link { flex: none; }
.tiles-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .own-tiles { grid-template-columns: 1fr; } }

/* ============================ the new look ============================ */
.pl-title { max-width: 180px; }
.pl-title h1 { font-size: 1.5rem !important; }
.pl-bar .pl-tabs { border-bottom: 0; }
.pl-bar .pl-tabs button { padding: 6px 10px 7px; font-size: 0.9rem; }
.pl-bar .pl-actions .btn { padding: 6px 10px; font-size: 0.84rem; min-height: 34px; }
.pl-bar .pl-actions #confirm { padding: 6px 18px; font-size: 0.92rem; }
.pl-bar .pl-date input { width: 140px; min-height: 34px; }
.pl-bar .pl-date .btn { min-height: 34px; }
/* photo bar: everyone who can work, grouped by team */
.pl-strip { border-radius: var(--r); padding: 8px 12px; }
.pl-page .pl-strip { gap: 6px 22px; }
.strip-team h3 { font-size: 0.8rem !important; font-weight: 700; color: var(--ink); }
.strip-stationary h3 { color: #0b6e8a !important; }
.face { border-radius: 10px; }
.face:hover { background: var(--sunken); }
.face-name { font-size: 0.78rem; }
.face.is-off .face-pic { box-shadow: 0 0 0 3px var(--accent); }
.face.is-driver .face-pic { box-shadow: 0 0 0 3px var(--ink); }
.face-car { border-color: var(--line-strong); }
.car, .lock { fill: var(--ink); }
.face-count { background: var(--ink); font-family: var(--font-c); }
/* columns */
.pl-col { border-radius: var(--r); }
.pl-col-head { padding: 10px 12px; }
.pl-col-head h2 { font-size: 1.02rem !important; }
.pl-col-body { padding: 8px; background: var(--sunken); border-radius: 0 0 var(--r) var(--r); }
.pl-page .pj-list { gap: 6px; }
.pl-page .pj { border-radius: 9px; padding: 7px 10px; border-color: var(--line); box-shadow: 0 1px 1px rgba(13, 27, 42, 0.04); }
.pl-page .pj:hover { border-color: var(--line-strong); }
.pj-ref { font: 700 0.84rem/1.3 var(--font-c); background: var(--ink); color: #fff; padding: 1px 6px; border-radius: 5px; }
.pj.is-carried, .pj.is-overdue { border-left: 4px solid var(--alert); background: #fff; }
.pj.is-promised { border-left: 4px solid var(--ink); }
.pj.is-selected { outline: 2px solid var(--accent-dark); background: var(--accent-soft); }
.pj-n { background: var(--accent); color: var(--on-accent); font-family: var(--font-c); }
.zone-tag { background: var(--link-soft); color: var(--link-dark); border: 0; border-radius: 5px; }
.carried-tag { background: var(--alert-soft); color: #7a1510; border-radius: 5px; }
/* crews */
.crew { border-radius: var(--r); border-color: var(--line); border-top: 4px solid var(--ink); }
.crew-head h3 { font: 700 1.02rem var(--font-c); }
.crew-none { border-top-width: 1px; border-style: dashed; background: var(--surface); }
.transport-slot { border-radius: 9px; }
.pl-lock-note { background: var(--accent-soft); border-color: #f3d38f; color: #6b4300; border-radius: var(--r-sm); }
.pl-hint { background: var(--link-soft); border-color: #c6d7f5; color: var(--link-dark); border-radius: var(--r-sm); }
.pl-issue, .pl-problems li { border-radius: 8px; }
/* Schedule week grid and Who's Free */
.week-grid thead th small { color: var(--ink); }
.week-grid .is-today, .week-grid td.is-sel-day { background: #fff8e8; }
.week-grid thead .is-today, .week-grid thead th.is-sel-day { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.wg-cell { border-radius: 9px; }
.wg-cell.is-sel { border-color: var(--ink); }
.wg-cell b { font: 700 1.15rem var(--font-c); }
.wg-amc { color: #0b6e8a; }
.week-grid .pl-team th { color: var(--ink); font-weight: 700; }
.free-panel { background: var(--bg); border-radius: var(--r-sm); border-color: var(--line); }
.tag-ot { background: var(--accent-soft); color: #7a4c00; border: 1px solid #f0c060; }
.tag-usual { background: var(--link-soft); color: var(--link-dark); }
.tag-off { background: var(--sunken); color: var(--muted); }
.ts-status { border-radius: 6px; }
.amc-tag + .pj-ref { background: none; color: var(--ink); padding: 0; font-size: 0.9rem; }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .sched-panels { grid-template-columns: minmax(0, 1fr); }
  .week-nav { width: 100%; }
  .week-nav .btn { flex: 1 1 auto; }
}