/* ============================================
   ROADMAP — 3-LEVEL DRILL-DOWN
   ============================================ */
.rm-breadcrumbs { display:flex; align-items:center; gap:8px; margin-bottom:20px; font-size:0.9rem; flex-wrap:wrap; }
.rm-bc-link { color:#6366f1; cursor:pointer; font-weight:600; transition:opacity 0.2s; }
.rm-bc-link:hover { opacity:0.7; }
.rm-bc-current { color:var(--text-primary,#1e293b); font-weight:700; }
.rm-bc-sep { color:var(--text-secondary,#94a3b8); font-size:1.1rem; }

.rm-program-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.rm-program-info h2 { margin:0 0 6px; font-size:1.4rem; color:var(--text-primary); }
.rm-program-info p { margin:0; color:var(--text-secondary); font-size:0.88rem; max-width:600px; line-height:1.5; }
.rm-program-stats { display:flex; gap:20px; }
.rm-prog-stat { text-align:center; }
.rm-prog-value { display:block; font-size:1.3rem; font-weight:800; color:#6366f1; }
.rm-prog-label { font-size:0.75rem; color:var(--text-secondary); font-weight:500; }

.rm-master-timeline { margin-bottom:32px; }
.rm-timeline-months { display:flex; justify-content:space-between; padding:0 10px; margin-bottom:6px; }
.rm-month { font-size:0.8rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }
.rm-timeline-track { position:relative; height:48px; background:var(--card-bg,#f1f5f9); border-radius:12px; overflow:visible; border:1px solid var(--border-color,#e2e8f0); }
.rm-phase-bar { position:absolute; top:6px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.25s ease; color:#fff; font-size:0.75rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 10px; }
.rm-phase-bar:hover { transform:scaleY(1.15); box-shadow:0 4px 16px rgba(0,0,0,0.15); z-index:5; }
.rm-today-marker { position:absolute; top:-8px; bottom:-8px; width:2px; z-index:10; }
.rm-today-line { width:2px; height:100%; background:#ef4444; position:absolute; top:0; }
.rm-today-label { position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:0.65rem; font-weight:700; color:#ef4444; white-space:nowrap; background:rgba(239,68,68,0.1); padding:2px 6px; border-radius:4px; }

.rm-phases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rm-phase-card { background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:16px; overflow:hidden; cursor:pointer; transition:all 0.3s ease; }
.rm-phase-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
.rm-phase-active { border-color:rgba(99,102,241,0.4); }
.rm-phase-card-header { display:flex; align-items:center; gap:12px; padding:18px 20px; color:#fff; position:relative; }
.rm-phase-icon { font-size:1.8rem; }
.rm-phase-card-header h3 { margin:0; font-size:1.05rem; }
.rm-phase-card-header p { margin:2px 0 0; font-size:0.78rem; opacity:0.85; }
.rm-phase-badge { position:absolute; top:10px; right:12px; background:rgba(255,255,255,0.25); padding:3px 8px; border-radius:6px; font-size:0.65rem; font-weight:800; letter-spacing:0.5px; }
.rm-phase-card-body { padding:16px 20px; }
.rm-phase-meta { display:flex; gap:16px; margin-bottom:12px; font-size:0.8rem; color:var(--text-secondary); }
.rm-phase-progress { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.rm-phase-progress span { font-size:0.82rem; font-weight:700; color:var(--text-primary); min-width:35px; }
.rm-phase-progress-bar { flex:1; height:8px; background:var(--border-color,#e2e8f0); border-radius:4px; overflow:hidden; }
.rm-phase-progress-fill { height:100%; border-radius:4px; transition:width 0.5s ease; }
.rm-phase-milestones { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.rm-milestone-item { display:flex; align-items:center; gap:8px; font-size:0.8rem; padding:4px 0; }
.rm-ms-icon { font-size:0.85rem; flex-shrink:0; }
.rm-ms-label { flex:1; color:var(--text-primary); font-weight:500; }
.rm-ms-date { color:var(--text-secondary); font-size:0.75rem; font-family:'JetBrains Mono',monospace; }
.rm-ms-done .rm-ms-label { text-decoration:line-through; opacity:0.6; }
.rm-phase-ws-chips { display:flex; flex-wrap:wrap; gap:6px; }
.rm-ws-chip { font-size:0.72rem; font-weight:600; padding:3px 8px; border-radius:6px; border:1.5px solid; color:var(--text-primary); background:var(--card-bg,#fff); }
.rm-phase-card-footer { padding:10px 20px; text-align:center; font-size:0.78rem; color:#6366f1; font-weight:600; border-top:1px solid var(--border-color,#e2e8f0); }

/* L2: Phase Timeline */
.rm-l2-header { display:flex; align-items:center; gap:14px; padding:20px 24px; border-radius:14px; color:#fff; margin-bottom:24px; }
.rm-l2-icon { font-size:2rem; }
.rm-l2-header h2 { margin:0; font-size:1.2rem; }
.rm-l2-header p { margin:2px 0 0; font-size:0.85rem; opacity:0.85; }
.rm-l2-stats { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:0.82rem; opacity:0.9; }
.rm-gantt { background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:14px; overflow:hidden; margin-bottom:24px; }
.rm-gantt-header { display:flex; border-bottom:2px solid var(--border-color,#e2e8f0); background:rgba(99,102,241,0.03); }
.rm-gantt-label-col { width:200px; min-width:200px; padding:12px 16px; font-size:0.8rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.3px; }
.rm-gantt-timeline-col { flex:1; overflow-x:auto; }
.rm-gantt-weeks { display:flex; }
.rm-gantt-week { flex:1; min-width:70px; padding:12px 4px; text-align:center; font-size:0.72rem; font-weight:600; color:var(--text-secondary); font-family:'JetBrains Mono',monospace; border-left:1px solid var(--border-color,#e2e8f0); }
.rm-gantt-body { position:relative; }
.rm-gantt-row { display:flex; border-bottom:1px solid var(--border-color,#e2e8f0); cursor:pointer; transition:background 0.15s; }
.rm-gantt-row:hover { background:rgba(99,102,241,0.04); }
.rm-gantt-row:last-child { border-bottom:none; }
.rm-gantt-ws-info { display:flex; align-items:center; gap:10px; }
.rm-gantt-ws-icon { font-size:1.2rem; }
.rm-gantt-ws-info strong { display:block; font-size:0.85rem; color:var(--text-primary); }
.rm-gantt-ws-info small { font-size:0.72rem; color:var(--text-secondary); }
.rm-gantt-bar-area { position:relative; height:56px; width:100%; }
.rm-gantt-bar { position:absolute; top:14px; height:28px; border-radius:6px; display:flex; align-items:center; overflow:hidden; }
.rm-gantt-bar-fill { height:100%; border-radius:6px 0 0 6px; transition:width 0.4s ease; }
.rm-gantt-bar-label { position:absolute; right:8px; font-size:0.7rem; font-weight:700; color:var(--text-primary); }
.rm-gantt-ms-marker { position:absolute; top:4px; font-size:0.7rem; transform:translateX(-50%); cursor:help; }

.rm-l2-milestones { background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:14px; padding:20px; }
.rm-l2-milestones h3 { margin:0 0 16px; font-size:1rem; color:var(--text-primary); }
.rm-ms-timeline { display:flex; gap:12px; flex-wrap:wrap; }
.rm-ms-card { display:flex; align-items:center; gap:10px; padding:12px 16px; background:rgba(99,102,241,0.04); border:1px solid var(--border-color,#e2e8f0); border-radius:10px; flex:1; min-width:200px; }
.rm-ms-diamond { font-size:1.2rem; }
.rm-ms-card strong { display:block; font-size:0.82rem; color:var(--text-primary); }
.rm-ms-card small { font-size:0.75rem; color:var(--text-secondary); }
.rm-ms-done { opacity:0.5; }

/* L3: Workstream Detail */
.rm-l3-header { background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:14px; padding:24px; margin-bottom:24px; }
.rm-l3-title { display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.rm-l3-icon { font-size:2rem; }
.rm-l3-title h2 { margin:0 0 4px; font-size:1.3rem; color:var(--text-primary); }
.rm-l3-title p { margin:0; font-size:0.88rem; color:var(--text-secondary); line-height:1.5; }
.rm-l3-meta { display:flex; gap:24px; margin-bottom:16px; flex-wrap:wrap; }
.rm-l3-meta-item { display:flex; flex-direction:column; gap:2px; }
.rm-l3-meta-label { font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:var(--text-secondary); }
.rm-l3-meta-value { font-size:0.9rem; font-weight:700; color:var(--text-primary); }
.rm-priority-P0 { color:#ef4444!important; }
.rm-priority-P1 { color:#f59e0b!important; }
.rm-priority-P2 { color:#6366f1!important; }
.rm-l3-progress { display:flex; align-items:center; gap:12px; }
.rm-l3-progress-bar { flex:1; height:10px; background:var(--border-color,#e2e8f0); border-radius:5px; overflow:hidden; }
.rm-l3-progress-fill { height:100%; border-radius:5px; transition:width 0.5s ease; }
.rm-l3-progress span { font-size:0.85rem; font-weight:700; color:var(--text-primary); }

.rm-l3-milestones { background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:14px; padding:24px; }
.rm-l3-milestones h3 { margin:0 0 20px; font-size:1.05rem; color:var(--text-primary); }
.rm-l3-ms-list { display:flex; flex-direction:column; gap:0; }
.rm-l3-ms-block { display:flex; gap:16px; }
.rm-l3-ms-node { display:flex; flex-direction:column; align-items:center; width:40px; flex-shrink:0; }
.rm-l3-ms-diamond { width:36px; height:36px; border-radius:8px; border:2px solid; display:flex; align-items:center; justify-content:center; font-size:1rem; background:var(--card-bg,#fff); z-index:1; }
.rm-l3-ms-connector { width:3px; flex:1; background:var(--border-color,#e2e8f0); min-height:20px; }
.rm-l3-ms-content { flex:1; padding-bottom:24px; }
.rm-l3-ms-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:8px; }
.rm-l3-ms-header strong { font-size:0.92rem; color:var(--text-primary); }
.rm-l3-ms-deadline { font-size:0.78rem; color:var(--text-secondary); font-family:'JetBrains Mono',monospace; }
.rm-l3-ms-progress-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rm-l3-ms-progress-bar { flex:1; height:6px; background:var(--border-color,#e2e8f0); border-radius:3px; overflow:hidden; }
.rm-l3-ms-progress-fill { height:100%; border-radius:3px; }
.rm-l3-ms-progress-row span { font-size:0.78rem; font-weight:600; color:var(--text-secondary); }

.rm-l3-tasks { display:flex; flex-direction:column; gap:6px; }
.rm-l3-task { display:flex; align-items:center; gap:10px; padding:10px 14px; background:rgba(99,102,241,0.03); border:1px solid var(--border-color,#e2e8f0); border-radius:10px; transition:border-color 0.2s; }
.rm-l3-task:hover { border-color:rgba(99,102,241,0.3); }
.rm-task-done { opacity:0.55; }
.rm-task-status { font-size:1rem; flex-shrink:0; }
.rm-task-info { flex:1; min-width:0; }
.rm-task-name { display:block; font-size:0.85rem; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rm-task-meta { display:flex; gap:10px; align-items:center; margin-top:4px; }
.rm-task-assignee { font-size:0.72rem; font-weight:700; color:#6366f1; background:rgba(99,102,241,0.08); padding:2px 6px; border-radius:4px; }
.rm-task-priority { font-size:0.72rem; font-weight:700; text-transform:uppercase; }
.rm-task-due { font-size:0.72rem; color:var(--text-secondary); }
.rm-task-progress-mini { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.rm-task-progress-bar-mini { width:50px; height:5px; background:var(--border-color,#e2e8f0); border-radius:3px; overflow:hidden; }
.rm-task-progress-fill-mini { height:100%; background:#6366f1; border-radius:3px; }
.rm-task-progress-mini span { font-size:0.7rem; font-weight:600; color:var(--text-secondary); min-width:28px; }

@media (max-width:1024px) { .rm-phases-grid { grid-template-columns:1fr; } }
@media (max-width:768px) {
    .rm-program-header { flex-direction:column; }
    .rm-l2-header { flex-direction:column; align-items:flex-start; }
    .rm-l2-stats { margin-left:0; align-items:flex-start; }
    .rm-gantt-label-col { width:140px; min-width:140px; }
    .rm-l3-meta { gap:12px; }
}