/* ============================================================================
   TradeYoke · Planning page — review the suggested work, confirm the runsheet.
   ----------------------------------------------------------------------------
   Global (non-scoped) like scheduling.css: the drag-and-drop marker is appended
   to document.body by planningDnd.js, so its styles cannot be component-scoped,
   and the page keeps all its styles in one place with them.
   THEME-AWARE: every colour is var(--ty-*, <fallback>).
   ============================================================================ */

.pl { font-family: var(--ty-font-base, 'Helvetica Neue', Helvetica, Arial, sans-serif); color: var(--ty-color-text, #1c2128); }

.pl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pl-title { font-size: 20px; font-weight: var(--ty-weight-bold, 700); letter-spacing: -0.01em; margin: 0; }
.pl-spacer { flex: 1; }

/* The "is everything managed?" pulse — the page's whole reason to exist, said plainly. */
.pl-state {
    display: inline-flex; align-items: center; gap: 7px;
    font: 700 12.5px var(--ty-font-base, inherit);
    border-radius: 999px; padding: 6px 12px;
}
.pl-state--clear { color: var(--ty-color-success-ink, #1a7f37); background: var(--ty-color-success-soft, #e6f6ea); }
.pl-state--work { color: var(--ty-color-warning-ink, #9a5b00); background: var(--ty-color-warning-soft, #fdf1dd); }
.pl-state--late { color: var(--ty-color-danger-ink, #b32121); background: var(--ty-color-danger-soft, #fdecec); }
.pl-state--later { color: var(--ty-color-text-muted, #57606a); background: var(--ty-color-surface-2, #f6f8fa); border: 1px solid var(--ty-color-border, #e2e6ea); }

.pl-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
/* Two questions in one row — WHO the plan is for, and WHAT KIND of work — so they get a hairline between
   them rather than running together as one long undifferentiated strip of chips. */
.pl-filtersep { width: 1px; align-self: stretch; min-height: 22px; background: var(--ty-color-border, #e2e6ea); margin: 0 2px; }

/* ── The two lanes ─────────────────────────────────────────────────────────── */
.pl-lanes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .pl-lanes { grid-template-columns: 1fr; } }

.pl-lane { border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: var(--ty-radius-card, 12px); background: var(--ty-color-surface-2, #f6f8fa); }
.pl-lane-hd {
    display: flex; align-items: center; gap: 8px; padding: 11px 14px;
    border-bottom: 1px solid var(--ty-color-border, #e9edf1);
    font: 700 13px var(--ty-font-base, inherit);
}
.pl-lane-hd .pl-n { font-weight: 800; background: var(--ty-color-surface, #fff); border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: 999px; padding: 1px 8px; font-size: 11px; color: var(--ty-color-text-muted, #57606a); }
.pl-lane-hint { font: 500 11px var(--ty-font-base, inherit); color: var(--ty-color-text-subtle, #8a95a1); }
.pl-lane-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 130px; }

/* The "Booked later" divider inside the To-plan lane: the schedule's beyond-period work, owned up to. */
.pl-later-hd {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px; padding: 8px 4px 2px;
    border-top: 1px dashed var(--ty-color-border, #e2e6ea);
    font: 700 12px var(--ty-font-base, inherit);
    color: var(--ty-color-text-muted, #57606a);
}
.pl-later-hd .pl-n { font-weight: 800; background: var(--ty-color-surface, #fff); border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: 999px; padding: 1px 8px; font-size: 11px; color: var(--ty-color-text-muted, #57606a); }

/* ── A plan card (both lanes) ──────────────────────────────────────────────── */
.pl-card {
    display: flex; align-items: center; gap: 10px;
    background: var(--ty-color-surface, #fff);
    border: 1px solid var(--ty-color-border, #e2e6ea);
    border-left: 4px solid var(--ty-color-primary, #1b6ec2);
    border-radius: 10px; padding: 8px 10px;
    transition: box-shadow var(--ty-motion-micro, 120ms) ease;
}
.pl-card:hover { box-shadow: var(--ty-shadow-md, 0 4px 14px -8px rgba(0,0,0,.35)); }
.pl-card--drag { cursor: grab; }
.pl-card--drag:active { cursor: grabbing; }

.pl-stopno {
    flex: none; width: 24px; height: 24px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary-contrast, #fff);
    font: 800 11.5px var(--ty-font-base, inherit);
}
.pl-card-main { flex: 1; min-width: 0; }
.pl-card-title { font: 600 13px var(--ty-font-base, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 500 11px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); margin-top: 2px; }
.pl-card-sub .ty-glyph { font-size: 11px; color: var(--ty-color-primary, #1b6ec2); }

.pl-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font: 700 10px var(--ty-font-base, inherit); letter-spacing: .03em; text-transform: uppercase;
    border-radius: 999px; padding: 2px 7px;
}
.pl-tag--late { color: var(--ty-color-danger-ink, #b32121); background: var(--ty-color-danger-soft, #fdecec); }
.pl-tag--today { color: var(--ty-color-info-ink, #1457b0); background: var(--ty-color-info-soft, #eaf2fd); }
.pl-leg { font: 600 10.5px var(--ty-font-mono, ui-monospace, monospace); color: var(--ty-color-text-subtle, #8a95a1); white-space: nowrap; }

.pl-card-acts { display: flex; gap: 5px; flex: none; }
.pl-act {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: 8px; background: var(--ty-color-surface, #fff);
    padding: 5px 8px; font: 700 11px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a);
    transition: background .15s, color .15s, border-color .15s;
}
.pl-act:hover:not(:disabled) { border-color: var(--ty-color-primary, #1b6ec2); color: var(--ty-color-primary, #1b6ec2); background: var(--ty-color-primary-soft, #eef4fd); }
.pl-act--go:hover:not(:disabled) { border-color: var(--ty-color-success-ink, #1a7f37); color: var(--ty-color-success-ink, #1a7f37); background: var(--ty-color-success-soft, #e6f6ea); }
.pl-act--skip:hover:not(:disabled) { border-color: var(--ty-color-danger-ink, #b32121); color: var(--ty-color-danger-ink, #b32121); background: var(--ty-color-danger-soft, #fdecec); }
.pl-act:disabled { opacity: .45; cursor: default; }

/* ── Confirmed lane: one group per day ─────────────────────────────────────── */
.pl-day { border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: 10px; background: var(--ty-color-surface, #fff); }
.pl-day-hd {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    border-bottom: 1px solid var(--ty-color-border, #eef1f4);
    font: 700 12px var(--ty-font-base, inherit);
}
.pl-day-route { font: 600 10.5px var(--ty-font-mono, ui-monospace, monospace); color: var(--ty-color-text-subtle, #8a95a1); }
.pl-day-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 54px; }
.pl-day-empty { font: 500 11.5px var(--ty-font-base, inherit); color: var(--ty-color-text-subtle, #8a95a1); text-align: center; padding: 10px 6px; }

.pl-empty { text-align: center; color: var(--ty-color-text-subtle, #8a95a1); font-size: 12.5px; padding: 26px 8px; }
.pl-empty i { display: block; font-size: 22px; margin-bottom: 6px; }
.pl-empty--clear i { color: var(--ty-color-success-ink, #1a7f37); }

/* ── The skip bin ──────────────────────────────────────────────────────────── */
.pl-bin {
    margin-top: 16px; border: 2px dashed var(--ty-color-border-strong, #cdd5de); border-radius: var(--ty-radius-card, 12px);
    padding: 12px 14px; background: var(--ty-color-surface, #fff);
}
.pl-bin-hd { display: flex; align-items: center; gap: 8px; font: 700 12.5px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); }
.pl-bin-hd i { color: var(--ty-color-danger-ink, #b32121); }
.pl-bin-hint { font-weight: 500; font-size: 11px; color: var(--ty-color-text-subtle, #8a95a1); }
.pl-bin-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pl-bin-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: 999px; background: var(--ty-color-surface-2, #f6f8fa);
    padding: 3px 6px 3px 10px; font: 600 11.5px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a);
    text-decoration: line-through;
}
.pl-bin-chip .pl-act { padding: 2px 6px; font-size: 10px; text-decoration: none; }

/* ── Drag and drop (driven by planningDnd.js) ──────────────────────────────── */
.pl-dnd-source { opacity: .4; }
.pl-dnd-active .pl-lane-body, .pl-dnd-active .pl-day-body, .pl-dnd-active .pl-bin { outline: 2px dashed var(--ty-color-border, #e5e7eb); outline-offset: -2px; border-radius: 10px; }
.pl-drop-over {
    background: color-mix(in srgb, var(--ty-color-primary, #1b6ec2) 8%, var(--ty-color-surface, #fff)) !important;
    outline: 2px dashed var(--ty-color-primary, #1b6ec2) !important;
    outline-offset: -2px;
}
.pl-bin.pl-drop-over {
    background: color-mix(in srgb, var(--ty-color-danger-ink, #b32121) 7%, var(--ty-color-surface, #fff)) !important;
    outline-color: var(--ty-color-danger-ink, #b32121) !important;
    border-color: transparent;
}
/* The insertion preview — the same treatment as the schedule board: a real gap opens between the
   neighbouring stops (sized to the card in hand via --pl-dnd-size, stamped by planningDnd.js) and the
   dashed slot says "it will land HERE", so slotting newly-due work in front of an already-planned run
   reads identically everywhere. */
[data-plan-item] { transition: margin .14s ease; }
.pl-dnd-gap-above { margin-top: calc(var(--pl-dnd-size, 44px) + 8px) !important; }
.pl-dnd-gap-below { margin-bottom: calc(var(--pl-dnd-size, 44px) + 8px) !important; }

.pl-dnd-marker {
    position: fixed; z-index: var(--ty-z-modal, 400); pointer-events: none; display: none;
    border: 2px dashed var(--ty-color-primary, #1b6ec2); border-radius: 10px;
    background: color-mix(in srgb, var(--ty-color-primary, #1b6ec2) 8%, transparent);
    transition: top .12s ease, left .12s ease, width .12s ease;
}
.pl-dnd-marker.on { display: block; }

@media (prefers-reduced-motion: reduce) {
    [data-plan-item], .pl-dnd-marker { transition: none; }
}

/* Newly-due work pending against an already-planned day — the daily-review cue. */
.pl-day-pending {
    display: inline-flex; align-items: center; gap: 4px;
    font: 800 10px var(--ty-font-base, inherit); letter-spacing: .03em; text-transform: uppercase;
    color: var(--ty-color-warning-ink, #9a5b00); background: var(--ty-color-warning-soft, #fdf1dd);
    border-radius: 999px; padding: 2px 8px;
}

/* ── The route map: the day's run on THE live map, above the lanes ─────────── */
.pl-mapsect {
    border: 1px solid var(--ty-color-border, #e2e6ea);
    border-radius: var(--ty-radius-card, 12px);
    background: var(--ty-color-surface-2, #f6f8fa);
    margin-bottom: 14px;
    overflow: hidden;
}
.pl-mapsect-hd {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 12px;
}
.pl-map-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; background: none; padding: 4px 2px;
    font: 700 13px var(--ty-font-base, inherit); color: var(--ty-color-text, #1c2128);
    cursor: pointer;
}
.pl-map-toggle .bi-map { color: var(--ty-color-primary, #1b6ec2); }
.pl-map-days, .pl-map-modes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-map-modes .ty-chip .bi { margin-right: 4px; }

/* The map itself: tall enough to read the run's shape, short enough that the lanes stay in reach.
   LiveMapView fills whatever box it is given — this is that box. */
.pl-map { display: block; height: clamp(260px, 42vh, 460px); }

.pl-map-notice {
    margin: 0; padding: 6px 12px 10px;
    font: 500 12px var(--ty-font-base, inherit);
    color: var(--ty-color-text-muted, #57606a);
}

/* Stands in for the map when there is nothing to plot — a message, never an empty grey canvas. */
.pl-map-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 7rem; padding: 16px; margin: 0 12px 12px;
    border: 1px dashed var(--ty-color-border, #e2e6ea); border-radius: 10px;
    background: var(--ty-color-surface, #fff);
    color: var(--ty-color-text-muted, #57606a); text-align: center;
}
.pl-map-empty i { font-size: 1.35rem; opacity: .65; }
.pl-map-empty p { margin: 0; font: 500 12.5px var(--ty-font-base, inherit); max-width: 34rem; }

/* ── Insight chips: WHY a job is due, on the card and in the history panel ──
   Global (not scoped) because PlanningInsightChips renders inside several hosts. */
.pl-card-insights { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pl-card-insights:empty { display: none; }

.pli {
    display: inline-flex; align-items: center; gap: 4px;
    font: 700 10px var(--ty-font-base, inherit); letter-spacing: .02em;
    border-radius: 999px; padding: 2px 8px;
    color: var(--ty-color-text-muted, #57606a);
    background: var(--ty-color-surface-2, #f6f8fa);
    border: 1px solid var(--ty-color-border, #e2e6ea);
}
.pli .bi { font-size: 10px; }
.pli--late    { color: var(--ty-color-danger-ink, #b32121);  background: var(--ty-color-danger-soft, #fdecec);  border-color: transparent; }
.pli--first   { color: #0d6b62; background: #d9f3ef; border-color: transparent; }
.pli--routine { color: var(--ty-color-text-muted, #57606a);  background: var(--ty-color-surface-2, #f6f8fa); }
.pli--oneoff  { color: var(--ty-color-info-ink, #0b5cad);    background: var(--ty-color-info-soft, #e3f0fc);    border-color: transparent; }
.pli--time    { color: var(--ty-color-warning-ink, #9a5b00); background: var(--ty-color-warning-soft, #fdf1dd); border-color: transparent; }
.pli--owes    { color: #a61e4d; background: #fbe4ee; border-color: transparent; }

/* The history panel's footer (rendered by PlanningPage inside the shared detail panel). */
.plh-foot { padding: 10px 14px; border-top: 1px solid var(--ty-color-border, #e9edf1); }

/* Getting-there actions on a runsheet card: the map-pin button matches .pl-act; the directions link is
   the shared ty-dir anchor, sized to sit beside it. */
.pl-card .pl-dir {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 7px; border-radius: 8px;
    border: 1px solid var(--ty-color-border, #e2e6ea);
    color: var(--ty-color-text-muted, #57606a); text-decoration: none;
    font-size: 12px; background: var(--ty-color-surface, #fff);
}
.pl-card .pl-dir:hover { color: var(--ty-color-primary, #1b6ec2); border-color: var(--ty-color-primary, #1b6ec2); }

/* The whole-run directions link in the map header — reads as a peer of the lens chips. */
.pl-map-dir {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--ty-color-border, #e2e6ea);
    background: var(--ty-color-surface, #fff);
    color: var(--ty-color-text, #1c2128); text-decoration: none;
    font: 600 12px var(--ty-font-base, inherit);
}
.pl-map-dir:hover { color: var(--ty-color-primary, #1b6ec2); border-color: var(--ty-color-primary, #1b6ec2); }

/* The section is focused (tabindex=-1) purely to scroll it into view — never show a focus ring for that. */
.pl-mapsect:focus { outline: none; }

/* The expand-to-panel button sits beside the section toggle as a plain icon. */
.pl-map-expand { padding: 4px 6px; color: var(--ty-color-text-muted, #57606a); }
.pl-map-expand:hover { color: var(--ty-color-primary, #1b6ec2); }

/* The map inside the expanded side panel: full height is the whole point. Viewport-derived rather than
   flex-derived so it holds regardless of the panel body's own layout, minus the panel's header. */
.pl-map--panel { height: calc(100vh - 9rem); min-height: 320px; }

/* ── FB-055 · the route optimiser panel ────────────────────────────────────────────────────────────
   Lives in planning.css rather than scoped CSS because both new components (the optimiser and the job
   requirements form) are only ever hosted by this page's side panels, and they share its chip/act kit. */
.ro { display: flex; flex-direction: column; gap: 14px; }

.ro-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ro-shift { display: flex; flex-direction: column; gap: 2px; }
.ro-shift .form-label { margin: 0; font: 600 11px var(--ty-font-base, inherit); color: var(--ty-color-text-muted, #57606a); }
.ro-shift input { width: 8.5rem; }

.ro-hd {
    display: flex; align-items: center; gap: 6px;
    font: 600 12px var(--ty-font-base, inherit); text-transform: uppercase; letter-spacing: .04em;
    color: var(--ty-color-text-muted, #57606a); margin-bottom: 6px;
}
.ro-hd--warn { color: var(--ty-color-warning, #b45309); }

.ro-crewlist { display: flex; flex-direction: column; gap: 4px; }
.ro-crew {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: 10px;
    background: var(--ty-color-surface, #fff); cursor: pointer;
}
.ro-crew.on { border-color: var(--ty-color-primary, #1b6ec2); background: var(--ty-color-primary-soft, #eef5fd); }
.ro-crew-name { font-weight: 600; font-size: 13px; }
.ro-crew-skills { font-size: 12px; color: var(--ty-color-text-muted, #57606a); }
.ro-crew-skills--none { font-style: italic; }

.ro-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ro-badge {
    padding: 2px 10px; border-radius: 999px; font-weight: 600;
    background: var(--ty-color-primary-soft, #eef5fd); color: var(--ty-color-primary, #1b6ec2);
}
.ro-method { color: var(--ty-color-text-muted, #57606a); font-size: 12px; }

.ro-route { border: 1px solid var(--ty-color-border, #e2e6ea); border-radius: 12px; overflow: hidden; }
.ro-route-hd {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 12px; background: var(--ty-color-surface-2, #f6f8fa);
    border-bottom: 1px solid var(--ty-color-border, #e2e6ea);
}
.ro-route-name { font-weight: 700; font-size: 13px; }
.ro-route-meta { font-size: 12px; color: var(--ty-color-text-muted, #57606a); }
.ro-wait { color: var(--ty-color-warning, #b45309); }

.ro-stops { list-style: none; margin: 0; padding: 4px 0; counter-reset: rostop; }
.ro-stop {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 5px 12px; font-size: 13px;
}
.ro-stop + .ro-stop { border-top: 1px dashed var(--ty-color-border, #eef1f4); }
.ro-eta { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ty-color-primary, #1b6ec2); min-width: 3.2rem; }
.ro-stop-title { font-weight: 600; }
.ro-leg { font-size: 12px; color: var(--ty-color-text-muted, #57606a); display: inline-flex; align-items: center; gap: 4px; }

.ro-unassigned { border: 1px solid var(--ty-color-warning, #f0b429); border-radius: 12px; padding: 10px 12px; }
.ro-misses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ro-misses li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ro-why { color: var(--ty-color-text-muted, #57606a); font-size: 12px; }
.ro-note { margin: 8px 0 0; font-size: 12px; color: var(--ty-color-text-muted, #57606a); }

.ro-foot { display: flex; gap: 8px; }
.ro-hint { font-size: 13px; color: var(--ty-color-text-muted, #57606a); margin: 0; }

/* ── The per-job requirements form ── */
.jr { display: flex; flex-direction: column; gap: 14px; }
.jr-lead { margin: 0; font-size: 13px; color: var(--ty-color-text-muted, #57606a); }
.jr-field { display: flex; flex-direction: column; gap: 4px; }
.jr-inline { display: flex; align-items: center; gap: 8px; }
.jr-inline input { width: 9rem; }
.jr-unit { font-size: 12px; color: var(--ty-color-text-muted, #57606a); }
.jr-foot { display: flex; gap: 8px; }

/* The crew a stop was routed to, on the planning card and the board card alike. */
.pl-crew, .ty-crew {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 999px; font: 600 11px var(--ty-font-base, inherit);
    background: var(--ty-color-primary-soft, #eef5fd); color: var(--ty-color-primary, #1b6ec2);
}
.pl-eta { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ty-color-primary, #1b6ec2); }