/* Select-by-System modal — SBS layout, dark palette, tree/inspector rows.
   Ported 1:1 from the locked mockup: docs/select-by-system-INSPECT-mockup.html.
   Backdrop centering + the .modal/.modal-header/.modal-footer/.btn chrome SHAPE come from
   target-scheduler-modal.css (loaded first). That file is a LIGHT theme, so we (a) re-declare
   the mockup's DARK palette below and (b) hardcode a dark frame, both scoped to this modal only,
   so it renders dark regardless of the sibling light theme.
   NOTE: bump the ?v= query on this file's <link> in index.html whenever you edit it — the app
   has no build step, so a version bump is the only reliable cache-bust. */

/* ── DARK palette — self-contained, scoped to the SBS modal root only ──
   The INSPECT mockup ships its own dark slate palette inline. target-scheduler-modal.css
   (loaded first) declares these SAME vars as a LIGHT theme (#ffffff base, #0f172a text).
   Without re-declaring them here, this modal inherited the light values while the rows below
   still use the mockup's hardcoded dark colors (#bfdbfe, amber/blue tags) → a broken
   light/dark hybrid that looked unstyled. Re-declare the mockup's dark palette on the modal
   root so it renders 1:1 with the approved mockup. `.tgt-sched.sbs-backdrop` (0,2,0) outranks
   `.tgt-sched` (0,1,0) and loads later, so these win; custom properties inherit to every
   descendant (chrome included), leaving the light sibling modals untouched.
   Covers both the main modal (.sbs-backdrop) and the admin Link & Bundle Editor
   (.sbs-editor-backdrop) — both use these vars + the mockup's dark hardcoded colors. */
.tgt-sched.sbs-backdrop,
.tgt-sched.sbs-editor-backdrop {
    --bg-base: #020617; --bg-card: #0b1120; --bg-elev: #111827; --bg-elev-2: #1f2937; --bg-input: #0b1120;
    --border: rgba(148, 163, 184, 0.10); --border-strong: rgba(148, 163, 184, 0.18); --border-focus: #3b82f6;
    --text: #f1f5f9; --text-mute: #94a3b8; --text-dim: #64748b;
    --accent: #3b82f6; --accent-hi: #60a5fa; --accent-bg: rgba(59, 130, 246, 0.10);
    --success: #10b981; --success-bg: rgba(16, 185, 129, 0.08);
    --warn: #f59e0b; --warn-bg: rgba(245, 158, 11, 0.08);
    --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.08);
    --ring: 0 0 0 2px rgba(59, 130, 246, 0.40); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.20); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* ── Authoritative DARK frame (hardcoded, not var-dependent) ──
   target-scheduler-modal.css styles .tgt-sched .modal / -header / -footer with !important LIGHT
   values. The palette block above flips them dark via inherited vars, but if that cascade is ever
   outranked, force the shell dark here: `.sbs-backdrop .modal` (0,3,0) beats `.tgt-sched .modal`
   (0,2,0). Header/footer text forced light in the same breath so we never get dark-on-dark. */
.tgt-sched.sbs-backdrop .modal,
.tgt-sched.sbs-editor-backdrop .modal {
    background: #0b1120 !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}
.tgt-sched.sbs-backdrop .modal-header,
.tgt-sched.sbs-backdrop .modal-footer,
.tgt-sched.sbs-editor-backdrop .modal-header,
.tgt-sched.sbs-editor-backdrop .modal-footer {
    background: #0b1120 !important;
    border-color: rgba(148, 163, 184, 0.12) !important;
}
.tgt-sched.sbs-backdrop .modal-header h2,
.tgt-sched.sbs-editor-backdrop .modal-header h2 { color: #f1f5f9 !important; }
.tgt-sched.sbs-backdrop .modal-header h2 i,
.tgt-sched.sbs-editor-backdrop .modal-header h2 i { color: #60a5fa !important; }
.tgt-sched.sbs-backdrop .modal-header .header-meta,
.tgt-sched.sbs-backdrop .modal-close,
.tgt-sched.sbs-editor-backdrop .modal-header .header-meta,
.tgt-sched.sbs-editor-backdrop .modal-close { color: #94a3b8 !important; }

.tgt-sched .modal.sbs-modal { width: min(1060px, 96vw) !important; max-width: none !important; display: flex; flex-direction: column; }
.tgt-sched .sbs-tip { font-size: 11.5px; color: var(--text-mute); padding: 9px 16px; border-bottom: 1px solid var(--border); background: rgba(59, 130, 246, .05); }
.tgt-sched .sbs-tip b { color: var(--text); }

.tgt-sched .sbs-body { display: flex; flex: 1; min-height: 0; height: 60vh; }
.tgt-sched .sbs-left { width: 392px; flex: 0 0 392px; display: flex; flex-direction: column; border-right: 1px solid var(--border); min-height: 0; background: var(--bg-card); }
.tgt-sched .sbs-right { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg-base); }

.tgt-sched .sbs-search-wrap { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.tgt-sched .sbs-search { flex: 1; background: var(--bg-base, #020617); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 10px; color: var(--text); font-size: 12.5px; }
.tgt-sched .sbs-tree { overflow: auto; flex: 1; padding: 6px 6px 14px; }

/* ── tree rows (left): checkbox = select, name = view ── */
.tgt-sched .lrow { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.tgt-sched .lrow:hover { background: rgba(148, 163, 184, .09); }
.tgt-sched .lrow.viewing { background: rgba(148, 163, 184, .10); box-shadow: inset 3px 0 0 #f59e0b; } /* amber 👁 — deliberately NOT the checked color */
.tgt-sched .lrow .twist { width: 14px; flex: 0 0 auto; color: var(--text-dim); font-size: 10px; text-align: center; cursor: pointer; }
.tgt-sched .lrow .twist.leaf { visibility: hidden; }
.tgt-sched .lname { flex: 1; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgt-sched .lrow.bundle .lname { font-weight: 500; color: var(--text-mute); } /* display-only equipment item */
.tgt-sched .vtag { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: #fbbf24; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .42); border-radius: 20px; padding: 1px 7px; flex: 0 0 auto; }
.tgt-sched .syn { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: #93c5fd; background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .35); border-radius: 20px; padding: 1px 7px; flex: 0 0 auto; }
.tgt-sched .cnt2 { background: rgba(148, 163, 184, .16); color: var(--text-mute); border-radius: 20px; padding: 1px 9px; font-size: 11px; flex: 0 0 auto; }
.tgt-sched .cnt2.has { background: rgba(59, 130, 246, .22); color: #93c5fd; }

/* ── tri-state checkbox ── */
.tgt-sched .cbx { width: 16px; height: 16px; flex: 0 0 auto; border: 1.5px solid var(--border-strong); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; cursor: pointer; }
.tgt-sched .cbx.on { background: var(--accent); border-color: var(--accent); }
.tgt-sched .cbx.part { background: var(--accent); border-color: var(--accent); }
.tgt-sched .cbx.spacer { border: none; cursor: default; } /* bundle rows: no checkbox (R10) */

/* ── pinned ★ My Selection ── */
.tgt-sched .selrow { margin: 2px 4px 8px; border: 1px solid rgba(59, 130, 246, .35); background: rgba(59, 130, 246, .08); }
.tgt-sched .selrow .lname { color: #bfdbfe; }
.tgt-sched .staricon { color: #60a5fa; font-size: 12px; flex: 0 0 auto; }

/* ── right inspector ── */
.tgt-sched .insp-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.tgt-sched .insp-title { font-size: 15px; font-weight: 700; color: var(--text); }
.tgt-sched .insp-sub { font-size: 11.5px; color: var(--text-mute); }
.tgt-sched .insp-actions { margin-left: auto; display: flex; gap: 7px; }
.tgt-sched .rfilter { margin: 0 14px 8px; width: calc(100% - 28px); box-sizing: border-box; padding: 7px 11px; background: var(--bg-base, #020617); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font-size: 12.5px; }
.tgt-sched .sbs-scroll { overflow: auto; flex: 1; min-height: 0; padding-bottom: 12px; }
.tgt-sched .igrp-h { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); padding: 8px 14px 3px; display: flex; align-items: center; gap: 7px; }
.tgt-sched .igrp-h .gc { background: rgba(148, 163, 184, .18); color: var(--text); border-radius: 20px; padding: 0 7px; font-size: 10px; }
.tgt-sched .stage-h { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; padding: 7px 14px 2px; }
.tgt-sched .irow { display: flex; align-items: center; gap: 9px; padding: 5px 14px; cursor: pointer; font-size: 12.5px; }
.tgt-sched .irow:hover { background: rgba(148, 163, 184, .08); }
.tgt-sched .irow.on { background: rgba(16, 185, 129, .07); }
.tgt-sched .iname { flex: 1; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgt-sched .irow.on .iname { color: var(--text); }
.tgt-sched .irow .rcode { font-size: 10px; color: var(--text-dim); font-family: monospace; flex: 0 0 auto; }
.tgt-sched .irow .rid { font-size: 10px; color: var(--text-dim); flex: 0 0 auto; }
.tgt-sched .domain-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.tgt-sched .sbs-empty { padding: 40px 26px; text-align: center; color: var(--text-mute); font-size: 13px; line-height: 1.7; }
.tgt-sched .xtrade { color: #c4b5fd; }

.tgt-sched .sbs-summary { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 12.5px; color: var(--text-mute); }
.tgt-sched .sbs-summary b { color: var(--text); }
.tgt-sched .sbs-toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(18px); background: var(--bg-elev, #1e293b); border: 1px solid var(--border-strong); color: var(--text); padding: 11px 18px; border-radius: 10px; font-size: 12.5px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 70; max-width: 80%; text-align: center; }
.tgt-sched .sbs-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── inline ✎ editor affordance on tree rows (admin only, Phase 4) ── */
.tgt-sched .lrow .edit { margin-left: 4px; opacity: 0; cursor: pointer; color: var(--text-dim); border: 1px solid transparent; border-radius: 4px; padding: 0 5px; font-size: 11px; flex: 0 0 auto; }
.tgt-sched .lrow:hover .edit { opacity: .7; }
.tgt-sched .lrow .edit:hover { opacity: 1; color: var(--text); border-color: var(--border-strong); }

/* ── Link & Bundle Editor (activity-link-editor.js) ── */
.tgt-sched .ale-tabs { display: flex; gap: 4px; padding: 8px 14px 0; border-bottom: 1px solid var(--border); }
.tgt-sched .ale-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-mute); padding: 7px 12px; font-size: 12.5px; cursor: pointer; }
.tgt-sched .ale-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tgt-sched .ale-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; height: 56vh; }
.tgt-sched .ale-empty, .tgt-sched .ale-empty-note { color: var(--text-mute); font-size: 12.5px; padding: 14px 4px; }
.tgt-sched .ale-row-actions { margin-bottom: 10px; }
.tgt-sched .ale-disc { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin: 12px 0 4px; font-family: monospace; }
.tgt-sched .ale-item { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.tgt-sched .ale-item-hd { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.tgt-sched .ale-item-hd b { color: var(--text); }
.tgt-sched .ale-tag { font-size: 9.5px; text-transform: uppercase; background: rgba(148,163,184,.16); color: var(--text-mute); border-radius: 12px; padding: 1px 7px; }
.tgt-sched .ale-srctag { font-size: 9.5px; color: var(--text-dim); }
.tgt-sched .ale-count { font-size: 11px; color: var(--text-mute); margin-left: auto; }
.tgt-sched .ale-item-hd .btn-sm { margin-left: 8px; }
.tgt-sched .ale-item-body { padding: 8px 12px 12px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; }
.tgt-sched .ale-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(148,163,184,.1); border: 1px solid var(--border); border-radius: 7px; padding: 3px 8px; font-size: 12px; color: var(--text); }
.tgt-sched .ale-chip-role { color: var(--text-dim); font-size: 9.5px; }
.tgt-sched .ale-x { cursor: pointer; color: var(--text-dim); } .tgt-sched .ale-x:hover { color: #f87171; }
.tgt-sched .ale-search-row { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.tgt-sched .ale-search, .tgt-sched .ale-ids { flex: 1; background: var(--bg-base, #020617); border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 9px; color: var(--text); font-size: 12px; }
.tgt-sched .ale-role { background: var(--bg-base, #020617); border: 1px solid var(--border-strong); border-radius: 7px; color: var(--text); font-size: 12px; }
.tgt-sched .ale-results { width: 100%; max-height: 200px; overflow: auto; }
.tgt-sched .ale-res { padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text); }
.tgt-sched .ale-res:hover { background: rgba(59,130,246,.16); }
.tgt-sched .ale-res-empty { padding: 6px; color: var(--text-dim); font-size: 12px; }
.tgt-sched .ale-code { color: var(--text-dim); font-family: monospace; font-size: 10px; }
.tgt-sched .ale-rid { color: var(--text-dim); font-size: 10px; }
.tgt-sched .ale-link, .tgt-sched .ale-sys { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 12.5px; }
.tgt-sched .ale-link-edit { display: flex; gap: 8px; margin: 6px 0; }
.tgt-sched .ale-link-names { font-size: 11px; color: var(--text-mute); }
.tgt-sched .ale-cov-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text); margin: 14px 0 4px; font-weight: 600; }
.tgt-sched .ale-cov div { font-size: 12.5px; color: var(--text-mute); padding: 1px 0; }