/* ============================================================
   ProjectTelemetry — Man Loading (resource-loaded schedule)
   assets/manloading.css   ·   Slice 2 (read-only timeline + histogram)
   Themed via the app's shared CSS variables.
   ============================================================ */

.ml-loading, .ml-empty { text-align:center; padding:48px 20px; color:var(--ink-faint); }
.ml-loading i { animation:spin 1s linear infinite; margin-right:6px; }
.ml-empty i { font-size:38px; opacity:.5; }
.ml-empty h3 { margin:12px 0 4px; color:var(--ink-soft); font-size:16px; }
.ml-empty p { margin:0 auto; font-size:13px; max-width:440px; }

/* ── Toolbar ─────────────────────────────────────────────────── */
/* The board uses the shared module-toolbar system (.mod-tb / .mod-tb-l /
   .mod-tb-r / .mod-tb-sub / .mod-lbl / .mod-seg) defined in app.css, so the
   controls sit in the same places as every other module. No board-specific
   toolbar styles are needed here anymore. */

/* ── Scroll canvas ───────────────────────────────────────────── */
.ml-scroll { overflow-x:auto; overflow-y:hidden; border:1px solid var(--bd); border-radius:10px; background:var(--bg);
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  /* Touch a bar to drag it — never let an empty-space touch start a text
     selection or paint a tap-highlight rectangle (on iOS that smeared white
     bars across the rows). Bars re-enable selection isn't needed; labels stay
     readable, selection just can't start here. */
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.ml-canvas { position:relative; }

.ml-group { display:flex; align-items:stretch; border-bottom:1px solid var(--bd); }
.ml-group:last-child { border-bottom:none; }
.ml-label { position:sticky; left:0; z-index:4; flex:0 0 170px; width:170px; box-sizing:border-box;
  padding:6px 8px; background:var(--bg); border-right:1px solid var(--bd); display:flex; flex-direction:row; align-items:center; gap:6px; }
.ml-label-text { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.ml-glabel { font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ml-gmeta { font-size:10.5px; color:var(--ink-faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ml-track { position:relative; flex:0 0 auto; }

/* ── Header (month + tick bands) ─────────────────────────────── */
.ml-header { position:sticky; top:0; z-index:5; background:var(--bg); }
.ml-corner { z-index:6; color:var(--ink-faint); }
.ml-htrack { height:40px; }
.ml-months, .ml-ticks { position:absolute; left:0; right:0; height:20px; }
.ml-months { top:0; } .ml-ticks { top:20px; }
.ml-month { position:absolute; top:0; height:20px; line-height:20px; font-size:11px; font-weight:700; color:var(--ink-soft);
  border-left:1px solid var(--bd); padding-left:6px; white-space:nowrap; overflow:hidden; box-sizing:border-box; }
.ml-tick { position:absolute; top:0; height:20px; line-height:20px; font-size:10px; color:var(--ink-faint);
  border-left:1px solid var(--bd); padding-left:4px; box-sizing:border-box; overflow:hidden; }
.ml-tick-we { color:var(--ink-faint); background:color-mix(in srgb, var(--ink) 4%, transparent); }

/* ── Bars ────────────────────────────────────────────────────── */
.ml-weekend { position:absolute; top:0; bottom:0; background:color-mix(in srgb, var(--ink) 4%, transparent); z-index:0; pointer-events:none; }
.ml-today { position:absolute; top:0; bottom:0; width:2px; background:#DC2626; z-index:1; pointer-events:none; }
.ml-bar { position:absolute; z-index:2; border-radius:5px; padding:3px 7px; color:#fff; cursor:pointer; 
  display:flex; align-items:center; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.18); transition:box-shadow .1s; }
.ml-bar:hover { box-shadow:0 3px 8px rgba(0,0,0,.28); z-index:3; }
.ml-bar-drag { opacity:.9; z-index:6 !important; box-shadow:0 6px 16px rgba(0,0,0,.35); transition:none; cursor:grabbing; }
/* Task names wrap to at most two lines, then ellipsize (was a single clipped
   line — long titles were unreadable on the compressed board). */
.ml-bar-txt { font-size:11px; font-weight:600; line-height:1.15; overflow:hidden; text-shadow:0 1px 1px rgba(0,0,0,.35);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; }
.ml-bar-done { opacity:.55; }
.ml-bar-done .ml-bar-txt { text-decoration:line-through; }

/* Floating ghost shown while dragging an unscheduled task onto the timeline. */
.ml-drag-ghost { position:fixed; z-index:1000; pointer-events:none; background:var(--accent,#2563EB); color:#fff;
  padding:4px 9px; border-radius:6px; font-size:12px; font-weight:600; max-width:220px; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; box-shadow:0 6px 18px rgba(0,0,0,.32); }

/* Baseline (plan-vs-actual) ghost — thin bar under the live bar */
.ml-base { position:absolute; height:4px; border-radius:2px; z-index:1; pointer-events:auto; opacity:.85; }
.ml-base-late  { background:repeating-linear-gradient(45deg,#DC2626 0 3px,transparent 3px 6px); background-color:color-mix(in srgb,#DC2626 22%,transparent); }
.ml-base-early { background:repeating-linear-gradient(45deg,#16A34A 0 3px,transparent 3px 6px); background-color:color-mix(in srgb,#16A34A 22%,transparent); }
.ml-base-on    { background:repeating-linear-gradient(45deg,var(--ink-faint) 0 3px,transparent 3px 6px); }

/* ── Histogram ───────────────────────────────────────────────── */
.ml-histrow { background:color-mix(in srgb, var(--ink) 2%, transparent); }
.ml-histo { position:relative; }
.ml-hbar { position:absolute; bottom:0; background:var(--accent,#2563EB); opacity:.8; border-radius:3px 3px 0 0; z-index:2;
  display:flex; align-items:flex-start; justify-content:center; }
.ml-hbar span { font-size:9px; font-weight:700; color:#fff; margin-top:1px; text-shadow:0 1px 1px rgba(0,0,0,.35); }

/* ── Stats / legend ──────────────────────────────────────────── */
.ml-stats { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.ml-stat { flex:1 1 120px; border:1px solid var(--bd); border-radius:9px; padding:10px 12px; background:var(--bg); }
.ml-stat-v { font-size:26px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.ml-stat-l { font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }

.ml-legend { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:12px; padding:2px; }
.ml-leg { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-soft); }
.ml-leg i { width:12px; height:12px; border-radius:3px; display:inline-block; }

/* ── Unscheduled ─────────────────────────────────────────────── */
.ml-unsched { margin-top:16px; border:1px dashed var(--bd); border-radius:10px; padding:12px 14px; }
.ml-unsched-hd { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
.ml-unsched-list { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px; }
.ml-unsched-item { border:1px solid var(--bd); background:var(--bg2); color:var(--ink); border-radius:7px; padding:6px 10px; font-size:12.5px; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
.ml-unsched-item:hover { border-color:var(--accent,#2563EB); }
.ml-unsched-item:active { cursor:grabbing; }
.ml-unsched-item .faint { color:var(--ink-faint); }
.ml-unsched-hint { font-size:11px; color:var(--ink-faint); }

@media (max-width:600px){
  .ml-label { flex-basis:120px; width:120px; }
}

/* ── Lanes (Slice 4a) ────────────────────────────────────────── */
/* Lane controls: a 2×2 button grid in its OWN column at the left of the label,
   outside the title/description text. Always visible; the track uses min-height
   + align-items:stretch, so the row can never leave a white gap. */
.ml-lane-ctl { display:grid; grid-template-columns:repeat(2,1fr); gap:3px; flex:0 0 auto; }
.ml-lc { width:19px; height:19px; border:1px solid var(--bd); background:var(--bg); color:var(--ink-soft); border-radius:5px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:11px; padding:0; }
.ml-lc:hover { border-color:var(--accent,#2563EB); color:var(--ink); }
/* Empty lanes: a slim, clearly-labeled placeholder drop strip — not a tall
   blank white row (which read like a rendering glitch). Still a drop target. */
.ml-empty-lane .ml-label { opacity:.75; padding-top:4px; padding-bottom:4px; }
.ml-empty-lane .ml-glabel { font-size:11.5px; font-weight:600; color:var(--ink-soft); }
.ml-empty-lane .ml-track { background:repeating-linear-gradient(90deg, color-mix(in srgb,var(--ink) 3%,transparent) 0 8px, transparent 8px 16px); }
.ml-empty-tag { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
  border:1px solid var(--bd); border-radius:4px; padding:0 4px; margin-left:4px; }
.ml-track.ml-lane-hot { outline:2px dashed var(--accent,#2563EB); outline-offset:-2px; background-color:color-mix(in srgb, var(--accent,#2563EB) 9%, transparent); }

/* ── Dependency links (Slice 4c) ─────────────────────────────── */
.ml-links { position:absolute; left:0; top:0; }
.ml-link { stroke:var(--ink-faint,#94A3B8); stroke-width:1.6px; opacity:.85; }
.ml-link:hover { stroke:var(--accent,#2563EB); opacity:1; }

/* Drop-target edge cue (toolbar toggles use the shared .mod-tb .on style) */
.ml-cap-hot-start { box-shadow:0 0 0 2px var(--accent,#2563EB), inset 4px 0 0 0 rgba(255,255,255,.92); }
.ml-cap-hot-end   { box-shadow:0 0 0 2px var(--accent,#2563EB), inset -4px 0 0 0 rgba(255,255,255,.92); }

/* Tap-to-unlink: fat invisible hit line over each connector + popover */
.ml-link { pointer-events:none; }
.ml-link-hit { pointer-events:stroke; cursor:pointer; }
.ml-linkpop { position:fixed; z-index:1000; transform:translate(-50%,8px); background:var(--bg); border:1px solid var(--bd); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.22); padding:4px; }
.ml-linkpop-btn { display:flex; align-items:center; gap:6px; border:none; background:transparent; color:var(--danger,#DC2626); font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.ml-linkpop-btn:hover { background:color-mix(in srgb, var(--danger,#DC2626) 12%, transparent); }

/* ── Scheduler → Man-loading drill (Phase 8) ── */
.ml-drill-banner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--accent); background:var(--accent-bg); border:1px solid var(--bd); border-radius:10px; padding:9px 13px; margin-bottom:10px; }
.ml-drill-banner i { color:var(--accent); }
.ml-drill-actions { margin-left:auto; display:flex; gap:6px; }
.sch-mldrill { border:0; background:transparent; color:var(--accent); cursor:pointer; padding:2px 4px; margin-left:6px; border-radius:5px; opacity:.6; }
.sch-mldrill:hover { opacity:1; background:var(--accent-bg); }
.sch-grow.grp:hover .sch-mldrill { opacity:1; }

/* Only a bar that can actually be dragged claims the touch gesture — see
   .ml-editing on the scroll canvas. A locked board
   lets a finger on a bar pan the chart instead of hitting a dead zone. */
.ml-editing .ml-bar { touch-action:none; }