/* ============================================================
   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 ─────────────────────────────────────────────────── */
.ml-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.ml-tb-sub { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
.ml-tb-right { display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; }
.ml-tb-lbl { font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:5px; }
.ml-tb-lbl select { padding:6px 8px; border:1px solid var(--bd); border-radius:7px; background:var(--bg); color:var(--ink); font-size:13px; }
.ml-zoom { display:inline-flex; border:1px solid var(--bd); border-radius:7px; overflow:hidden; }
.ml-zoom-b { padding:6px 11px; border:none; background:transparent; color:var(--ink-soft); font-size:12px; font-weight:600; cursor:pointer; }
.ml-zoom-b + .ml-zoom-b { border-left:1px solid var(--bd); }
.ml-zoom-b.active { background:var(--accent,#2563EB); color:#fff; }

/* ── Scroll canvas ───────────────────────────────────────────── */
.ml-scroll { overflow-x:auto; overflow-y:hidden; border:1px solid var(--bd); border-radius:10px; background:var(--bg); }
.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 10px; background:var(--bg); border-right:1px solid var(--bd); display:flex; flex-direction:column; justify-content:center; }
.ml-glabel { font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.25; word-break:break-word; }
.ml-gmeta { font-size:10.5px; color:var(--ink-faint); margin-top:2px; }
.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:0 6px; color:#fff; cursor:pointer; touch-action:none;
  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; }
.ml-bar-txt { font-size:11px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; text-shadow:0 1px 1px rgba(0,0,0,.35); }
.ml-bar-done { opacity:.55; }
.ml-bar-done .ml-bar-txt { text-decoration:line-through; }

/* ── 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:19px; 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:pointer; }
.ml-unsched-item:hover { border-color:var(--accent,#2563EB); }
.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) ────────────────────────────────────────── */
.ml-lane-ctl { display:none; gap:3px; margin-top:6px; }
.ml-group:hover .ml-lane-ctl { display:flex; }
.ml-lc { width:22px; height:22px; 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:12px; padding:0; }
.ml-lc:hover { border-color:var(--accent,#2563EB); color:var(--ink); }
.ml-empty-lane .ml-label { opacity:.7; }
.ml-empty-lane .ml-track { background-color:color-mix(in srgb, var(--ink) 2%, transparent); }
.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; }

/* Link mode toggle + drop-target edge cue */
.ml-toolbar .ml-on { background:var(--accent,#2563EB); color:#fff; border-color:var(--accent,#2563EB); }
.ml-tb-sub-link { color:var(--accent,#2563EB); }
.ml-tb-sub-link b { color:var(--ink); }
.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); }