/* ============================================================
   TARGET END DATE SCHEDULER — verbatim copy of mockup
   Source: docs/target-end-date-mockup.html (binding visual spec).
   All rules scoped under `.tgt-sched` so they don't bleed into
   the rest of the app. Toasts are global (.toast-stack / .toast)
   because they live in document.body at top-right.
   ALL declarations use !important per project memory rule
   (modal CSS without !important loses specificity wars).
============================================================ */

/* CSS variables — scoped under .tgt-sched and .toast-stack so they
   don't override the rest of the app's color tokens. Light theme,
   Linear/shadcn slate palette, single blue accent. Matches the
   gantt filter modal (src/filters/gantt-filter-modal-styles.js). */
.tgt-sched,
.toast-stack {
    --bg-base: #ffffff;
    --bg-card: #ffffff;
    --bg-elev: #fafbfc;
    --bg-elev-2: #f1f5f9;
    --bg-input: #ffffff;
    --border: #e2e8f0;
    --border-strong: #d1d5db;
    --border-focus: #2563eb;
    --text: #0f172a;
    --text-mute: #475569;
    --text-dim: #94a3b8;
    --accent: #2563eb;
    --accent-hi: #1d4ed8;
    --accent-bg: #eff6ff;
    --success: #16a34a;
    --success-bg: #dcfce7;
    --warn: #d97706;
    --warn-bg: #fef3c7;
    --danger: #dc2626;
    --danger-bg: #fee2e2;
    --ring: 0 0 0 2px rgba(37, 99, 235, 0.20);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.18);
}

.tgt-sched, .tgt-sched * {
    box-sizing: border-box !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ── Restore Font Awesome font-family for icon elements.
   The `.tgt-sched *` rule above sets font-family !important on every
   descendant, which clobbers FA's own `.fa-solid { font-family: ... }`
   (no !important) and makes every FA glyph silently fail to render
   inside the modal. Re-state the FA family with !important so the
   chevrons, close X, callout icons, etc. actually paint. */
.tgt-sched .fa,
.tgt-sched .fas,
.tgt-sched .fa-solid,
.tgt-sched .far,
.tgt-sched .fa-regular,
.toast-stack .fa,
.toast-stack .fas,
.toast-stack .fa-solid,
.toast-stack .far,
.toast-stack .fa-regular {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}
.tgt-sched .fab,
.tgt-sched .fa-brands,
.toast-stack .fab,
.toast-stack .fa-brands {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}

.tgt-sched {
    color: var(--text) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ============================================================
   TOAST (global — lives in document.body)
============================================================ */
.toast-stack {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 100000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    pointer-events: none !important;
}
.toast {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 320px !important;
    box-shadow: var(--shadow-lg) !important;
    font-size: 13px !important;
    color: var(--text) !important;
    animation: tgtsched-slideIn 0.3s ease-out !important;
}
@keyframes tgtsched-slideIn {
    from { transform: translateX(20px) !important; opacity: 0 !important; }
    to { transform: translateX(0) !important; opacity: 1 !important; }
}
.toast-icon {
    width: 20px !important; height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
}
.toast-success .toast-icon { background: var(--success) !important; color: white !important; }
.toast-warn .toast-icon { background: var(--warn) !important; color: white !important; }
.toast-error .toast-icon { background: var(--danger) !important; color: white !important; }
.toast-info .toast-icon { background: var(--accent) !important; color: white !important; }
.toast-title { font-weight: 500 !important; color: var(--text) !important; }
.toast-sub { font-size: 12px !important; color: var(--text-mute) !important; }
.toast-close { color: var(--text-dim) !important; cursor: pointer !important; font-size: 12px !important; margin-left: auto !important; background: transparent !important; border: none !important; padding: 0 !important; }

/* ============================================================
   MODAL CARD
============================================================ */
.tgt-sched .modal {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
}
.tgt-sched .modal-header {
    padding: 16px 24px !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.tgt-sched .modal-header h2 {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--text) !important;
    margin: 0 !important;
}
.tgt-sched .modal-header h2 i { color: var(--accent-hi) !important; font-size: 14px !important; }
.tgt-sched .modal-header .header-meta { font-size: 12px !important; color: var(--text-mute) !important; font-variant-numeric: tabular-nums !important; }
.tgt-sched .modal-close {
    color: var(--text-dim) !important;
    cursor: pointer !important;
    width: 28px !important; height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    transition: background 0.12s ease !important;
    border: none !important;
    background: transparent !important;
}
.tgt-sched .modal-close:hover { background: var(--bg-elev) !important; color: var(--text) !important; }
.tgt-sched .modal-close:focus-visible { outline: none !important; box-shadow: var(--ring) !important; }
.tgt-sched .modal-body { padding: 24px !important; }
.tgt-sched .modal-footer {
    padding: 16px 24px !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

/* ============================================================
   BUTTONS
============================================================ */
.tgt-sched .btn {
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.12s ease !important;
    font-family: inherit !important;
    line-height: 1.2 !important;
}
.tgt-sched .btn:focus-visible { outline: none !important; box-shadow: var(--ring) !important; }
.tgt-sched .btn-ghost { background: transparent !important; color: var(--text-mute) !important; }
.tgt-sched .btn-ghost:hover { background: var(--bg-elev) !important; color: var(--text) !important; }
.tgt-sched .btn-secondary { background: var(--bg-elev) !important; color: var(--text) !important; border-color: var(--border-strong) !important; }
.tgt-sched .btn-secondary:hover { background: var(--bg-elev-2) !important; border-color: var(--border-focus) !important; }
.tgt-sched .btn-primary { background: var(--accent) !important; color: white !important; }
.tgt-sched .btn-primary:hover { background: var(--accent-hi) !important; }
.tgt-sched .btn-primary:disabled, .tgt-sched .btn-primary[disabled] { background: var(--bg-elev) !important; color: var(--text-dim) !important; cursor: not-allowed !important; }
.tgt-sched .btn-success { background: var(--success) !important; color: white !important; }
.tgt-sched .btn-success:hover { background: #059669 !important; }
.tgt-sched .btn-danger { background: transparent !important; color: var(--danger) !important; border-color: rgba(239, 68, 68, 0.30) !important; }
.tgt-sched .btn-danger:hover { background: var(--danger-bg) !important; }
.tgt-sched .btn-icon { padding: 8px !important; width: 32px !important; height: 32px !important; justify-content: center !important; }
.tgt-sched .btn-sm { padding: 5px 10px !important; font-size: 12px !important; border-radius: 8px !important; }

/* ============================================================
   FORM CONTROLS
============================================================ */
.tgt-sched .field { margin-bottom: 16px !important; }
.tgt-sched .field-label {
    display: block !important;
    font-size: 12px !important;
    color: var(--text) !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}
.tgt-sched .field-help { font-size: 11px !important; color: var(--text-mute) !important; margin-top: 6px !important; }
.tgt-sched .input, .tgt-sched .select {
    width: 100% !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text) !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    font-variant-numeric: tabular-nums !important;
    color-scheme: light !important;
    cursor: pointer !important;
}
.tgt-sched input[type="date"].input::-webkit-calendar-picker-indicator {
    filter: none !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
}
.tgt-sched .input:hover, .tgt-sched .select:hover { border-color: var(--text-dim) !important; }
.tgt-sched .input:focus, .tgt-sched .select:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: var(--ring) !important; }
.tgt-sched .input:disabled, .tgt-sched .select:disabled { background: var(--bg-elev) !important; color: var(--text-dim) !important; cursor: not-allowed !important; }
.tgt-sched .input-narrow { max-width: 200px !important; }
.tgt-sched .field-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.tgt-sched .field-stacked-row { display: grid !important; grid-template-columns: 200px 1fr !important; gap: 16px !important; align-items: center !important; }
.tgt-sched .field-stacked-row .field-label { margin-bottom: 0 !important; }

/* ============================================================
   CHIP-STYLE MULTI-SELECT
============================================================ */
.tgt-sched .chip-input {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    min-height: 44px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    transition: all 0.12s ease !important;
}
.tgt-sched .chip-input:focus-within { border-color: var(--accent) !important; box-shadow: var(--ring) !important; }
.tgt-sched .chip-input input {
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    min-width: 140px !important;
    flex: 1 !important;
    font-family: inherit !important;
    outline: none !important;
}
.tgt-sched .chip-input input::placeholder { color: var(--text-dim) !important; }
.tgt-sched .chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    padding: 4px 8px 4px 10px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    background: var(--bg-elev) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text) !important;
    transition: all 0.12s ease !important;
}
.tgt-sched .chip:hover { border-color: var(--border-focus) !important; }
.tgt-sched .chip i.chip-pre { font-size: 9px !important; color: var(--text-mute) !important; }
.tgt-sched .chip-type { font-size: 9px !important; color: var(--text-dim) !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; border-right: 1px solid var(--border-strong) !important; padding-right: 6px !important; margin-right: 2px !important; }
.tgt-sched .chip-remove {
    cursor: pointer !important;
    font-size: 10px !important;
    color: var(--text-dim) !important;
    width: 14px !important; height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    transition: all 0.12s ease !important;
    border: none !important;
    background: transparent !important;
}
.tgt-sched .chip-remove:hover { background: var(--danger-bg) !important; color: var(--danger) !important; }
.tgt-sched .chip-focus { background: rgba(168, 85, 247, 0.10) !important; border-color: rgba(168, 85, 247, 0.40) !important; }
.tgt-sched .chip-focus i.chip-pre { color: #a855f7 !important; }
.tgt-sched .chip-protect { background: rgba(245, 158, 11, 0.10) !important; border-color: rgba(245, 158, 11, 0.40) !important; }
.tgt-sched .chip-protect i.chip-pre { color: var(--warn) !important; }
.tgt-sched .chip-empty {
    color: var(--text-dim) !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    font-style: italic !important;
}

/* ============================================================
   SECTION HEADER WITHIN PANEL
============================================================ */
.tgt-sched .section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}
.tgt-sched .section-header .left { display: flex !important; align-items: center !important; gap: 8px !important; }
.tgt-sched .section-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.tgt-sched .section-sub { font-size: 11px !important; color: var(--text-mute) !important; margin-bottom: 12px !important; }
.tgt-sched .section {
    padding-top: 20px !important;
    margin-top: 20px !important;
    border-top: 1px solid var(--border) !important;
}
.tgt-sched .section:first-of-type { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }
.tgt-sched .scope-panel {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
}
.tgt-sched .restored-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--accent-bg) !important;
    color: var(--accent-hi) !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

/* ============================================================
   STAT GRID
============================================================ */
.tgt-sched .stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}
.tgt-sched .stat {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
}
.tgt-sched .stat-label {
    font-size: 11px !important;
    color: var(--text-mute) !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.tgt-sched .stat-value {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: tabular-nums !important;
}
.tgt-sched .stat-sub {
    font-size: 11px !important;
    color: var(--text-mute) !important;
    margin-top: 4px !important;
}
.tgt-sched .stat-success .stat-value { color: var(--success) !important; }
.tgt-sched .stat-warn .stat-value { color: var(--warn) !important; }
.tgt-sched .stat-danger .stat-value { color: var(--danger) !important; }

/* ============================================================
   STAGES (progress)
============================================================ */
.tgt-sched .stages {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
.tgt-sched .stage {
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--border) !important;
}
.tgt-sched .stage:last-child { border-bottom: none !important; }
.tgt-sched .stage-dot {
    width: 24px !important; height: 24px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}
.tgt-sched .stage-dot.done { background: var(--success) !important; color: white !important; }
.tgt-sched .stage-dot.active {
    background: var(--accent) !important;
    color: white !important;
    animation: tgtsched-pulse 1.5s ease-in-out infinite !important;
}
.tgt-sched .stage-dot.pending { background: var(--bg-elev-2) !important; color: var(--text-dim) !important; border: 1px solid var(--border-strong) !important; }
@keyframes tgtsched-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.40) !important; }
    50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0) !important; }
}
.tgt-sched .stage-title { font-weight: 500 !important; flex: 1 !important; color: var(--text) !important; }
.tgt-sched .stage-meta { color: var(--text-mute) !important; font-size: 12px !important; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important; font-variant-numeric: tabular-nums !important; }

/* ============================================================
   SKELETON LOADER
============================================================ */
.tgt-sched .skeleton {
    background: linear-gradient(90deg, var(--bg-elev) 0%, var(--bg-elev-2) 50%, var(--bg-elev) 100%) !important;
    background-size: 200% 100% !important;
    animation: tgtsched-shimmer 1.5s ease-in-out infinite !important;
    border-radius: 8px !important;
}
@keyframes tgtsched-shimmer {
    0% { background-position: 200% 0 !important; }
    100% { background-position: -200% 0 !important; }
}
.tgt-sched .skel-line { height: 12px !important; margin-bottom: 8px !important; }
.tgt-sched .skel-line.w-30 { width: 30% !important; }
.tgt-sched .skel-line.w-50 { width: 50% !important; }
.tgt-sched .skel-line.w-70 { width: 70% !important; }
.tgt-sched .skel-line.w-90 { width: 90% !important; }
.tgt-sched .skel-card { height: 64px !important; margin-bottom: 8px !important; border-radius: 12px !important; }

/* ============================================================
   TABLE
============================================================ */
.tgt-sched .table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    font-size: 13px !important;
    color: var(--text) !important;
}
.tgt-sched .table thead { background: var(--bg-card) !important; }
.tgt-sched .table th {
    text-align: left !important;
    padding: 10px 14px !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text-mute) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--border) !important;
}
.tgt-sched .table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--border) !important;
    font-variant-numeric: tabular-nums !important;
}
.tgt-sched .table tbody tr:last-child td { border-bottom: none !important; }
.tgt-sched .table tbody tr { transition: background 0.12s ease !important; cursor: pointer !important; }
.tgt-sched .table tbody tr:hover td { background: var(--bg-card) !important; }
.tgt-sched .table tbody tr:focus-visible { outline: none !important; box-shadow: var(--ring) inset !important; }
.tgt-sched .arrow { color: var(--text-dim) !important; font-size: 10px !important; margin: 0 6px !important; }
.tgt-sched .strike { color: var(--text-mute) !important; text-decoration: line-through !important; }
.tgt-sched .new-val { color: var(--success) !important; font-weight: 600 !important; }
.tgt-sched .saved-pill {
    display: inline-block !important;
    background: var(--success-bg) !important;
    color: var(--success) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border: 1px solid rgba(16, 185, 129, 0.20) !important;
}
.tgt-sched .risk-dot {
    display: inline-block !important;
    width: 6px !important; height: 6px !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
}
.tgt-sched .risk-low { color: var(--success) !important; }
.tgt-sched .risk-low .risk-dot { background: var(--success) !important; }
.tgt-sched .risk-med { color: var(--warn) !important; }
.tgt-sched .risk-med .risk-dot { background: var(--warn) !important; }
.tgt-sched .risk-high { color: var(--danger) !important; }
.tgt-sched .risk-high .risk-dot { background: var(--danger) !important; }

/* ============================================================
   CALLOUTS
============================================================ */
.tgt-sched .callout {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    font-size: 13px !important;
    border: 1px solid transparent !important;
}
.tgt-sched .callout-info { background: var(--accent-bg) !important; border-color: rgba(59, 130, 246, 0.30) !important; }
.tgt-sched .callout-info i { color: var(--accent-hi) !important; }
.tgt-sched .callout-warn { background: var(--warn-bg) !important; border-color: rgba(245, 158, 11, 0.30) !important; }
.tgt-sched .callout-warn i { color: var(--warn) !important; }
.tgt-sched .callout-danger { background: var(--danger-bg) !important; border-color: rgba(239, 68, 68, 0.30) !important; }
.tgt-sched .callout-danger i { color: var(--danger) !important; }
.tgt-sched .callout-content { flex: 1 !important; }
.tgt-sched .callout-title { font-weight: 500 !important; margin-bottom: 2px !important; color: var(--text) !important; }
.tgt-sched .callout-sub { color: var(--text-mute) !important; font-size: 12px !important; }

/* ============================================================
   BANNER
============================================================ */
.tgt-sched .banner {
    padding: 20px 24px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    border: 1px solid transparent !important;
}
.tgt-sched .banner-success { background: var(--success-bg) !important; border-color: rgba(16, 185, 129, 0.30) !important; }
.tgt-sched .banner-warn { background: var(--warn-bg) !important; border-color: rgba(245, 158, 11, 0.30) !important; }
.tgt-sched .banner-info { background: var(--accent-bg) !important; border-color: rgba(59, 130, 246, 0.30) !important; }
.tgt-sched .banner-icon {
    width: 40px !important; height: 40px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    color: white !important;
}
.tgt-sched .banner-success .banner-icon { background: var(--success) !important; }
.tgt-sched .banner-warn .banner-icon { background: var(--warn) !important; }
.tgt-sched .banner-info .banner-icon { background: var(--accent) !important; }
.tgt-sched .banner-text h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 0 2px 0 !important;
    letter-spacing: -0.01em !important;
    color: var(--text) !important;
}
.tgt-sched .banner-text p { font-size: 13px !important; color: var(--text-mute) !important; margin: 0 !important; }

/* ============================================================
   DRILL DOWN
============================================================ */
.tgt-sched .drill-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.tgt-sched .drill-section {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
}
.tgt-sched .drill-section h4 {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text-mute) !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
}
.tgt-sched .drill-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    padding: 5px 0 !important;
    gap: 12px !important;
}
.tgt-sched .drill-row .k { color: var(--text-mute) !important; }
.tgt-sched .drill-row .v { font-weight: 500 !important; text-align: right !important; font-variant-numeric: tabular-nums !important; color: var(--text) !important; }
.tgt-sched .impact-bar {
    height: 6px !important;
    background: var(--bg-card) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    margin-top: 8px !important;
}
.tgt-sched .impact-bar > div { height: 100% !important; background: var(--success) !important; border-radius: 3px !important; }
.tgt-sched .duration-edit {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    padding: 2px 4px !important;
    transition: all 0.12s ease !important;
}
.tgt-sched .duration-edit:focus-within { border-color: var(--accent) !important; box-shadow: var(--ring) !important; }
.tgt-sched .duration-edit input {
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
    width: 48px !important;
    text-align: center !important;
    font-size: 13px !important;
    padding: 4px !important;
    outline: none !important;
    font-family: inherit !important;
    font-variant-numeric: tabular-nums !important;
}
.tgt-sched .duration-edit .unit { color: var(--text-mute) !important; font-size: 11px !important; padding: 0 6px 0 2px !important; }

/* ============================================================
   ANNOTATION
============================================================ */
.tgt-sched .annotation {
    margin-top: 12px !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    color: var(--text-mute) !important;
    border-left: 2px solid var(--accent) !important;
    background: var(--accent-bg) !important;
    border-radius: 0 8px 8px 0 !important;
    line-height: 1.7 !important;
}
.tgt-sched .annotation strong { color: var(--text) !important; }

/* ============================================================
   SUGGESTION LIST (best-effort panel)
============================================================ */
.tgt-sched .suggest-list {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
.tgt-sched .suggest-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.12s ease !important;
    color: var(--text) !important;
}
.tgt-sched .suggest-row:last-child { border-bottom: none !important; }
.tgt-sched .suggest-row:hover { background: var(--bg-card) !important; }
.tgt-sched .suggest-row .arrow-icon {
    width: 20px !important; height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--accent-hi) !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

/* ============================================================
   KEYBOARD HINT
============================================================ */
.tgt-sched .kbd {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
    font-size: 10px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    background: var(--bg-elev-2) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-mute) !important;
}

/* ============================================================
   POPUP BACKDROP (for modal-state)
============================================================ */
.tgt-sched.modal-backdrop {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(15, 23, 42, 0.50) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
}
.tgt-sched.modal-backdrop > .modal {
    width: 100% !important;
    max-width: 960px !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
}
.tgt-sched.modal-backdrop > .modal.compact {
    max-width: 520px !important;
}

/* ============================================================
   LEFT-PANEL TRIGGER BUTTON (lives inside .sg-root .left)
   Uses light theme to match the schedule generator side panel.
============================================================ */
.sg-target-trigger-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    text-align: left !important;
    transition: all 0.12s ease !important;
}
.sg-target-trigger-btn:hover {
    border-color: #2563eb !important;
    background: #eff6ff !important;
}
.sg-target-trigger-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.30) !important;
    border-color: #2563eb !important;
}
.sg-target-trigger-btn .sg-tt-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: #dbeafe !important;
    color: #2563eb !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
}
.sg-target-trigger-btn .sg-tt-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}
.sg-target-trigger-btn .sg-tt-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    line-height: 1.3 !important;
}
.sg-target-trigger-btn .sg-tt-sub {
    font-size: 11px !important;
    color: #6b7280 !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.sg-target-trigger-btn .sg-tt-chev {
    color: #9ca3af !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   MODAL FOOTER PREVIEW LINK
============================================================ */
.tgt-sched .modal-preview-link {
    margin-right: auto !important;
    align-self: center !important;
    font-size: 12px !important;
    color: var(--text-mute) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
.tgt-sched .modal-preview-link:hover {
    color: var(--accent-hi) !important;
}

/* ============================================================
   CHECKBOX-TREE PICKERS (Focus WBS / Codes / Protected)
   Dark-theme variants of the gfm-tree-* pattern used by
   src/filters/gantt-filter-modal.js
============================================================ */
.tgt-sched .tgt-date-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}
.tgt-sched .tgt-date-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 40px !important;
}
.tgt-sched .tgt-picker-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 12px !important;
}
.tgt-sched .tgt-picker {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}
.tgt-sched .tgt-picker-wide { grid-column: 1 / -1 !important; }
.tgt-sched .tgt-picker-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-mute) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 8px !important;
}
.tgt-sched .tgt-search-input,
.tgt-sched .tgt-category-select {
    width: 100% !important;
    padding: 8px 10px !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 6px !important;
    color: var(--text) !important;
    font-size: 13px !important;
    outline: none !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    color-scheme: light !important;
}
.tgt-sched .tgt-search-input::placeholder { color: var(--text-dim) !important; }
.tgt-sched .tgt-search-input:focus,
.tgt-sched .tgt-category-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.20) !important;
}
.tgt-sched .tgt-tree-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 280px !important;
    max-height: 60vh !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 4px 0 !important;
    background: var(--bg-elev) !important;
}
.tgt-sched .tgt-tree-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 6px 0 4px !important;
}
.tgt-sched .tgt-tree-node {
    display: flex !important;
    align-items: center !important;
    padding: 5px 12px 5px var(--tgt-tree-indent, 12px) !important;
    cursor: pointer !important;
    user-select: none !important;
    border-radius: 6px !important;
    margin: 0 4px !important;
    gap: 0 !important;
}
.tgt-sched .tgt-tree-node:hover { background: var(--bg-elev-2) !important; }
/* selected-row background tint — applied when the row's own branch is checked */
.tgt-sched .tgt-tree-node:has(.tgt-tree-checkbox.checked) {
    background: rgba(59, 130, 246, 0.08) !important;
}
.tgt-sched .tgt-tree-node:has(.tgt-tree-checkbox.checked):hover {
    background: rgba(59, 130, 246, 0.14) !important;
}

/* ── Caret (expand/collapse) — variant C: bigger + darker for visibility ── */
.tgt-sched .tgt-tree-expand {
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text) !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    margin-right: 6px !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    font-family: inherit !important;
}
.tgt-sched .tgt-tree-expand:hover {
    background: var(--bg-elev-2) !important;
}
.tgt-sched .tgt-tree-expand:focus-visible {
    outline: none !important;
    box-shadow: var(--ring) !important;
}
.tgt-sched .tgt-tree-expand i,
.tgt-sched .tgt-tree-expand svg {
    transition: transform 0.15s ease !important;
}
.tgt-sched .tgt-tree-expand svg {
    width: 1em !important;
    height: 1em !important;
    display: block !important;
}
.tgt-sched .tgt-tree-expand.is-expanded i,
.tgt-sched .tgt-tree-expand.is-expanded svg {
    transform: rotate(90deg) !important;
}
/* Leaf placeholder — preserves checkbox column alignment, non-interactive */
.tgt-sched .tgt-tree-expand-leaf {
    width: 22px !important;
    height: 22px !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* ── Checkbox — square, white-bg, distinctly different from the caret ── */
.tgt-sched .tgt-tree-checkbox {
    width: 16px !important;
    height: 16px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 4px !important;
    margin-right: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    background: var(--bg-input) !important;
    transition: border-color 0.12s ease, background 0.12s ease !important;
}
.tgt-sched .tgt-tree-checkbox:hover {
    border-color: var(--accent-hi) !important;
}
.tgt-sched .tgt-tree-checkbox:focus-visible {
    outline: none !important;
    box-shadow: var(--ring) !important;
}
.tgt-sched .tgt-tree-checkbox.checked {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
}
.tgt-sched .tgt-tree-checkbox.checked::after {
    content: '\2713' !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
.tgt-sched .tgt-tree-checkbox.partial {
    border-color: var(--accent) !important;
    background: var(--bg-input) !important;
}
.tgt-sched .tgt-tree-checkbox.partial::after {
    content: '' !important;
    width: 8px !important;
    height: 2px !important;
    background: var(--accent) !important;
    border-radius: 1px !important;
}
.tgt-sched .tgt-tree-children {
    /* container for child rows — no extra padding here, indentation comes from row.style.paddingLeft */
}
.tgt-sched .tgt-tree-label {
    font-size: 13px !important;
    color: var(--text) !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.tgt-sched .tgt-empty-state {
    padding: 24px 14px !important;
    text-align: center !important;
    color: var(--text-dim) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* ── Tree skeleton (loading state) ───────────────────────────────
   Used while WBS / activity-codes / protected trades load. Visual
   placeholder that matches the row shape: caret slot + checkbox
   slot + label bar. */
.tgt-sched .tgt-tree-skel-list {
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.tgt-sched .tgt-tree-skel-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 0 !important;
}
.tgt-sched .tgt-tree-skel-row .skel-block {
    background: linear-gradient(90deg, var(--bg-elev) 0%, var(--bg-elev-2) 50%, var(--bg-elev) 100%) !important;
    background-size: 200% 100% !important;
    animation: tgtsched-shimmer 1.5s ease-in-out infinite !important;
    border-radius: 4px !important;
}
.tgt-sched .tgt-tree-skel-row .skel-caret { width: 14px !important; height: 14px !important; border-radius: 4px !important; }
.tgt-sched .tgt-tree-skel-row .skel-check { width: 14px !important; height: 14px !important; border-radius: 4px !important; }
.tgt-sched .tgt-tree-skel-row .skel-label  { height: 10px !important; flex: 1 !important; }
.tgt-sched .tgt-tree-skel-row .skel-label.w-50 { max-width: 50% !important; }
.tgt-sched .tgt-tree-skel-row .skel-label.w-70 { max-width: 70% !important; }
.tgt-sched .tgt-tree-skel-row .skel-label.w-30 { max-width: 30% !important; }

/* ── Tree error banner (in-row, replaces the tree on fetch failure) */
.tgt-sched .tgt-tree-error {
    margin: 12px !important;
    padding: 12px 16px !important;
    background: var(--danger-bg) !important;
    border: 1px solid #fecaca !important;
    border-radius: 12px !important;
    color: #b91c1c !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}
.tgt-sched .tgt-tree-error i { margin-top: 2px !important; }
.tgt-sched .tgt-tree-error .tgt-tree-error-retry {
    margin-left: auto !important;
    background: #ffffff !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}
.tgt-sched .tgt-tree-error .tgt-tree-error-retry:hover { background: #fef2f2 !important; }
/* Custom scrollbar inside picker */
.tgt-sched .tgt-tree-scroll::-webkit-scrollbar { width: 8px !important; }
.tgt-sched .tgt-tree-scroll::-webkit-scrollbar-track { background: transparent !important; }
.tgt-sched .tgt-tree-scroll::-webkit-scrollbar-thumb {
    background: var(--border-strong) !important;
    border-radius: 4px !important;
}
.tgt-sched .tgt-tree-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-dim) !important; }

/* ============================================================
   PER-WBS STRETCH CAP CONTROLS (§12 of TARGET-STRETCH-CAPS-PLAN.md)
   Binding spec: docs/target-stretch-cap-modal-mockup.html
   The cap selector lives inside each tree-node row. By default
   hidden; revealed only when the row's checkbox is checked.
============================================================ */
.tgt-sched .tgt-tree-node .tgt-cap-control {
    display: none !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
}
.tgt-sched .tgt-tree-node.cap-active .tgt-cap-control,
.tgt-sched .tgt-tree-node:has(.tgt-tree-checkbox.checked) .tgt-cap-control {
    display: inline-flex !important;
}
.tgt-sched .tgt-cap-label {
    font-size: 10px !important;
    color: var(--text-dim) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 600 !important;
}
.tgt-sched .tgt-cap-select {
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-family: inherit !important;
    font-variant-numeric: tabular-nums !important;
    color-scheme: light !important;
    cursor: pointer !important;
    min-width: 96px !important;
}
.tgt-sched .tgt-cap-select:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: var(--ring) !important;
}
.tgt-sched .tgt-cap-select.is-custom { border-color: var(--warn) !important; color: var(--warn) !important; }
.tgt-sched .tgt-cap-select.is-frozen { border-color: var(--text-dim) !important; color: var(--text-dim) !important; }

/* Override status dot — gray = matches default, amber = overridden */
.tgt-sched .tgt-cap-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--text-dim) !important;
    flex-shrink: 0 !important;
    transition: background 0.15s, box-shadow 0.15s !important;
    cursor: help !important;
}
.tgt-sched .tgt-cap-dot.is-overridden {
    background: var(--warn) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
}
.tgt-sched .tgt-cap-dot.is-inherited {
    background: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
}
.tgt-sched .tgt-cap-select.is-inherited {
    color: var(--text-dim) !important;
    font-style: italic !important;
}
.tgt-sched .tgt-cap-chip-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--text-dim) !important;
    flex-shrink: 0 !important;
}
.tgt-sched .tgt-cap-chip-dot.is-overridden {
    background: var(--warn) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.20) !important;
}
.tgt-sched .tgt-cap-chip-dot.is-inherited {
    background: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.20) !important;
}
/* §13 — activity-count badge on WBS tree rows */
.tgt-sched .tgt-tree-count {
    color: var(--text-dim) !important;
    font-size: 11px !important;
    margin-left: 4px !important;
    opacity: 0.7 !important;
}

/* Cap summary strip below the WBS picker */
.tgt-sched .tgt-cap-summary {
    margin-top: 12px !important;
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
}
.tgt-sched .tgt-cap-summary-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}
.tgt-sched .tgt-cap-summary-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-mute) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
.tgt-sched .tgt-cap-summary-meta {
    font-size: 11px !important;
    color: var(--text-dim) !important;
    font-variant-numeric: tabular-nums !important;
}
.tgt-sched .tgt-cap-summary-rows {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-height: 28px !important;
    margin-bottom: 10px !important;
}
.tgt-sched .tgt-cap-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--accent-bg) !important;
    border: 1px solid rgba(59, 130, 246, 0.30) !important;
    border-radius: 8px !important;
    padding: 3px 10px !important;
    font-size: 12px !important;
    color: var(--text) !important;
}
.tgt-sched .tgt-cap-chip-name { color: var(--text) !important; font-weight: 500 !important; }
.tgt-sched .tgt-cap-chip-dom {
    font-size: 9px !important;
    color: var(--text-dim) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-left: 1px solid var(--border-strong) !important;
    padding-left: 6px !important;
}
.tgt-sched .tgt-cap-chip-val {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
    color: var(--accent-hi) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}
.tgt-sched .tgt-cap-chip-val.is-frozen { color: var(--text-dim) !important; }
.tgt-sched .tgt-cap-chip-val.is-stretchy { color: var(--success) !important; }

.tgt-sched .tgt-cap-bulk {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed var(--border) !important;
}
.tgt-sched .tgt-cap-bulk-label { font-size: 11px !important; color: var(--text-mute) !important; margin-right: 4px !important; }
.tgt-sched .tgt-cap-bulk .tgt-cap-select { min-width: 120px !important; }
.tgt-sched .tgt-cap-empty-state {
    color: var(--text-dim) !important;
    font-style: italic !important;
    font-size: 12px !important;
    padding: 2px 4px !important;
}

/* Headroom suggestions — flag big stretch levers the user hasn't tapped */
.tgt-sched .tgt-cap-suggest {
    margin-top: 12px !important;
    background: var(--warn-bg) !important;
    border: 1px solid #fcd34d !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    display: none !important;          /* hidden when no suggestions */
}
.tgt-sched .tgt-cap-suggest.has-items { display: block !important; }
.tgt-sched .tgt-cap-suggest-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--warn) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
.tgt-sched .tgt-cap-suggest-header i { color: var(--warn) !important; font-size: 12px !important; }
.tgt-sched .tgt-cap-suggest-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    font-size: 12px !important;
    color: var(--text) !important;
    border-top: 1px dashed rgba(245, 158, 11, 0.18) !important;
}
.tgt-sched .tgt-cap-suggest-row:first-of-type { border-top: none !important; padding-top: 2px !important; }
.tgt-sched .tgt-cap-suggest-body { flex: 1 !important; line-height: 1.45 !important; }
.tgt-sched .tgt-cap-suggest-body strong { color: var(--text) !important; font-weight: 600 !important; }
.tgt-sched .tgt-cap-suggest-body code {
    background: rgba(245, 158, 11, 0.12) !important;
    color: var(--warn) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
    font-size: 11px !important;
}
.tgt-sched .tgt-cap-suggest-action {
    flex-shrink: 0 !important;
    background: rgba(245, 158, 11, 0.18) !important;
    color: var(--warn) !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background 0.12s ease, border-color 0.12s ease !important;
}
.tgt-sched .tgt-cap-suggest-action:hover {
    background: rgba(245, 158, 11, 0.28) !important;
    border-color: var(--warn) !important;
}
.tgt-sched .tgt-cap-suggest-action:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.40) !important;
}

/* Domain-default legend */
.tgt-sched .tgt-cap-legend {
    margin-top: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-size: 11px !important;
    color: var(--text-mute) !important;
}
.tgt-sched .tgt-cap-legend-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 8px !important;
    background: var(--bg-elev-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    font-variant-numeric: tabular-nums !important;
}
.tgt-sched .tgt-cap-legend-item code {
    color: var(--accent-hi) !important;
    background: transparent !important;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
    font-size: 11px !important;
}

/* ────────────────────────────────────────────────────────────────
   Target Progress Modal — live dashboard (plan §7.1 / §9)
   ──────────────────────────────────────────────────────────────── */
.tgt-sched .modal.tgt-sched-progress {
    min-width: 640px !important;
    max-width: 760px !important;
}
.tgt-sched .tgt-phase-row {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}
.tgt-sched .tgt-phase-pill {
    padding: 4px 12px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-elev-2) !important;
    color: var(--text-mute) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    transition: background 120ms, color 120ms, border-color 120ms !important;
}
.tgt-sched .tgt-phase-pill.active {
    background: var(--accent-hi) !important;
    color: var(--bg-base) !important;
    border-color: var(--accent-hi) !important;
}
.tgt-sched .tgt-phase-pill.done {
    background: var(--bg-elev-1) !important;
    color: var(--text-body) !important;
    border-color: var(--border) !important;
    opacity: 0.7 !important;
}
.tgt-sched .tgt-progress-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}
.tgt-sched .tgt-gap-panel,
.tgt-sched .tgt-mu-panel {
    background: var(--bg-elev-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.tgt-sched .gap-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    font-variant-numeric: tabular-nums !important;
}
.tgt-sched .gap-row .lbl {
    color: var(--text-mute) !important;
    font-size: 12px !important;
}
.tgt-sched .gap-row .big {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--accent-hi) !important;
}
.tgt-sched .gap-status {
    margin-top: 6px !important;
    font-size: 12px !important;
    color: var(--text-mute) !important;
}
.tgt-sched .tgt-mu-panel .mu-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--accent-hi) !important;
    font-variant-numeric: tabular-nums !important;
}
.tgt-sched .tgt-mu-panel .mu-ring {
    height: 6px !important;
    background: var(--bg-elev-2) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}
.tgt-sched .tgt-mu-panel .mu-ring-fill {
    height: 100% !important;
    width: 0% !important;
    background: linear-gradient(90deg, var(--accent), var(--accent-hi)) !important;
    transition: width 200ms ease-out !important;
}
.tgt-sched .tgt-eligible {
    font-size: 12px !important;
    color: var(--text-mute) !important;
    margin-top: 4px !important;
}
.tgt-sched .tgt-eligible .warn {
    color: var(--warn, #d97706) !important;
}
.tgt-sched .tgt-saturation {
    margin-top: 6px !important;
    padding: 6px 10px !important;
    background: rgba(217, 119, 6, 0.12) !important;
    border-left: 3px solid var(--warn, #d97706) !important;
    color: var(--warn, #d97706) !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}
.tgt-sched .tgt-error-banner {
    margin: 8px 0 12px 0 !important;
    padding: 8px 12px !important;
    background: rgba(220, 38, 38, 0.12) !important;
    border-left: 3px solid var(--danger, #dc2626) !important;
    color: var(--danger, #dc2626) !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}
.tgt-sched .hidden { display: none !important; }
.tgt-sched .tgt-recent-section {
    background: var(--bg-elev-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
}
.tgt-sched .tgt-recent-section .section-title {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text-mute) !important;
    margin-bottom: 8px !important;
}
.tgt-sched .tgt-recent-list {
    max-height: 220px !important;
    overflow-y: auto !important;
    font-size: 12px !important;
    font-variant-numeric: tabular-nums !important;
}
.tgt-sched .tgt-recent-list .change-row {
    display: grid !important;
    grid-template-columns: 2fr 1.5fr 1fr !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid var(--border) !important;
}
.tgt-sched .tgt-recent-list .change-row:last-child { border-bottom: none !important; }
.tgt-sched .tgt-recent-list .task-code {
    color: var(--accent-hi) !important;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
}
.tgt-sched .tgt-recent-list .mu {
    color: var(--text-mute) !important;
    text-align: right !important;
}
.tgt-sched .tgt-recent-list .empty {
    color: var(--text-mute) !important;
    font-style: italic !important;
    padding: 6px 0 !important;
}