/* ---- TOP BAR ---- */
.top-bar { height:var(--top-bar); background:var(--navy-800); border-bottom:1px solid var(--navy-600); display:flex; align-items:center; padding:0 16px; gap:16px; z-index:100; }
.top-bar .logo { font-weight:700; font-size:16px; color:var(--accent); letter-spacing:1px; display:flex; align-items:center; gap:8px; }
.top-bar .logo svg { width:22px; height:22px; }
.top-bar .breadcrumb { font-size:12px; color:var(--slate-400); }
.top-bar .breadcrumb span { color:var(--slate-200); }
.top-bar .spacer { flex:1; }
.top-bar .mode-badge { font-size:11px; font-weight:600; padding:3px 10px; border-radius:12px; background:var(--accent); color:white; text-transform:uppercase; letter-spacing:.5px; }
.top-bar .user-actions { display:flex; align-items:center; gap:8px; }
.top-bar .user-actions button { background:none; border:1px solid var(--navy-600); color:var(--slate-300); padding:4px 8px; border-radius:6px; font-size:12px; cursor:pointer; transition:var(--transition); }
.top-bar .user-actions button:hover { border-color:var(--accent); color:var(--white); }

/* ---- WORKSPACE ---- */
.workspace { display:flex; height:calc(100vh - var(--top-bar) - var(--dock)); }

/* ---- ICON RAIL ---- */
.icon-rail { width:var(--icon-rail); background:var(--navy-800); border-right:1px solid var(--navy-600); display:flex; flex-direction:column; align-items:center; padding:8px 0; gap:4px; flex-shrink:0; }
.rail-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius); cursor:pointer; transition:var(--transition); position:relative; color:var(--slate-400); }
.rail-icon:hover { background:var(--navy-600); color:var(--white); }
.rail-icon.active { background:var(--accent); color:white; box-shadow:0 2px 8px rgba(59,130,246,.3); }
.rail-icon svg { width:20px; height:20px; }
.rail-icon .badge { position:absolute; top:2px; right:2px; min-width:16px; height:16px; border-radius:8px; background:#ef4444; color:white; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.rail-icon .tooltip { position:absolute; left:52px; background:var(--navy-700); border:1px solid var(--navy-500); padding:4px 10px; border-radius:6px; font-size:12px; white-space:nowrap; opacity:0; pointer-events:none; transition:var(--transition); z-index:200; }
.rail-icon:hover .tooltip { opacity:1; }
.icon-rail .divider { width:28px; height:1px; background:var(--navy-600); margin:4px 0; }

/* ---- LEFT RAIL ---- */
.left-rail { width:var(--left-rail); background:var(--navy-800); border-right:1px solid var(--navy-600); flex-shrink:0; transition:width var(--transition); overflow:hidden; display:flex; flex-direction:column; }
.left-rail.collapsed { width:0; border-right:none; }
.rail-header { padding:12px 16px; border-bottom:1px solid var(--navy-600); display:flex; align-items:center; justify-content:space-between; }
.rail-header h3 { font-size:13px; font-weight:600; color:var(--slate-200); text-transform:uppercase; letter-spacing:.5px; }
.rail-header button { background:none; border:none; color:var(--slate-400); cursor:pointer; font-size:16px; }
.search-box { margin:8px 12px; position:relative; }
.search-box input { width:100%; background:var(--navy-700); border:1px solid var(--navy-600); color:var(--white); padding:7px 10px 7px 32px; border-radius:6px; font-size:12px; outline:none; transition:var(--transition); font-family:inherit; }
.search-box input:focus { border-color:var(--accent); }
.search-box svg { position:absolute; left:8px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--slate-400); }
.rail-content { flex:1; overflow-y:auto; padding:4px 0; min-height:0; }
#leftStudentPanel, #leftInstructorPanel { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.filter-pills { display:flex; gap:4px; padding:4px 12px 8px; flex-wrap:wrap; }
.filter-pill { font-size:10px; padding:3px 8px; border-radius:10px; background:var(--navy-700); color:var(--slate-300); border:1px solid var(--navy-600); cursor:pointer; transition:var(--transition); }
.filter-pill.active { background:var(--accent); color:white; border-color:var(--accent); }
.filter-pill:hover { border-color:var(--accent); }
.student-item { display:flex; align-items:center; padding:8px 12px; cursor:pointer; transition:var(--transition); gap:10px; border-left:3px solid transparent; }
.student-item:hover { background:var(--navy-700); }
.student-item.selected { background:var(--navy-700); border-left-color:var(--accent); }
.phase-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.phase-dot.fam { background:var(--green); }
.phase-dot.inst { background:var(--teal); }
.phase-dot.form { background:var(--purple); }
.phase-dot.cap { background:var(--blue); }
.phase-dot.complete { background:var(--slate-400); }
.phase-dot.hold { background:#ef4444; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.student-item .info { flex:1; min-width:0; }
.student-item .name { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.student-item .meta { font-size:10px; color:var(--slate-400); }
.student-item .next-event { font-size:10px; font-weight:600; padding:2px 6px; border-radius:4px; background:var(--navy-600); color:var(--slate-200); white-space:nowrap; }

/* ---- CENTER ---- */
.center { flex:1; display:flex; flex-direction:column; min-width:0; background:var(--navy-900); }
.center-content { flex:1; overflow:auto; padding:0; display:flex; flex-direction:column; }

/* ---- RIGHT RAIL ---- */
.right-rail { width:var(--right-rail); background:var(--navy-800); border-left:1px solid var(--navy-600); flex-shrink:0; transition:width var(--transition); overflow:hidden; display:flex; flex-direction:column; position:relative; }
.right-rail.collapsed { width:0; border-left:none; }
.rail-tabs { display:flex; gap:0; flex:1; }
.rail-tab { background:none; border:none; color:var(--slate-400); font-size:11px; font-weight:600; padding:0 12px; cursor:pointer; font-family:inherit; border-bottom:2px solid transparent; transition:var(--transition); }
.rail-tab.active { color:var(--white); border-bottom-color:var(--accent); }
.rail-tab:hover { color:var(--slate-200); }
.staging-badge { display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:white; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px; padding:0 4px; margin-left:4px; }
.rail-toggle-btn { position:fixed; right:0; top:50%; transform:translateY(-50%); background:var(--navy-800); border:1px solid var(--navy-600); border-right:none; color:var(--slate-400); padding:12px 4px; border-radius:6px 0 0 6px; cursor:pointer; z-index:50; transition:var(--transition); }
.rail-toggle-btn:hover { color:var(--white); background:var(--navy-700); }
.right-rail:not(.collapsed) ~ .rail-toggle-btn { display:none; }
.staging-card { background:var(--navy-700); border:1px solid var(--navy-600); border-radius:8px; padding:8px 10px; margin-bottom:6px; cursor:grab; transition:var(--transition); }
.staging-card:hover { border-color:var(--accent); background:var(--navy-650,#1a2a3f); }
.staging-card .sc-ip { font-size:11px; font-weight:600; color:var(--white); }
.staging-card .sc-student { font-size:10px; color:var(--slate-300); margin-top:2px; }
.staging-card .sc-event { font-size:9px; font-weight:600; padding:1px 5px; border-radius:3px; display:inline-block; margin-top:3px; }
.staging-card .sc-actions { display:flex; gap:4px; margin-top:6px; }

/* ---- DOCK ---- */
.dock { height:var(--dock); background:var(--navy-800); border-top:1px solid var(--navy-600); display:flex; align-items:center; padding:0 16px; gap:16px; z-index:100; }
.dock .workflow-steps { display:flex; align-items:center; gap:2px; }
.dock .step { font-size:11px; padding:6px 14px; border-radius:8px; cursor:pointer; transition:var(--transition); display:flex; align-items:center; gap:6px; line-height:1; font-weight:600; }
.dock .step .step-label { font-weight:600; }
.dock .step .step-sub { font-size:8px; opacity:.75; font-weight:400; }
.dock .step .step-check { font-size:10px; font-weight:700; }
.dock .step .step-num { font-size:9px; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); flex-shrink:0; }
.dock .step.done { background:rgba(34,197,94,.15); color:var(--green); }
.dock .step.done .step-num { background:var(--green); color:var(--navy-900); }
.dock .step.stale { background:rgba(234,179,8,.15); color:#eab308; }
.dock .step.critical { background:rgba(239,68,68,.15); color:#ef4444; }
.dock .step.next-up { background:rgba(59,130,246,.15); color:var(--accent); border:1px solid rgba(59,130,246,.4); animation:dockPulse 2s ease-in-out infinite; }
.dock .step.next-up .step-num { background:var(--accent); color:white; }
.dock .step.pending { background:var(--navy-700); color:var(--slate-400); border:1px solid transparent; }
.dock .step:hover { background:var(--navy-600); color:var(--white); }
@keyframes dockPulse { 0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0)} 50%{box-shadow:0 0 8px 3px rgba(59,130,246,.3)} }
.dock .step-arrow { color:var(--navy-500); font-size:12px; margin:0 2px; }
.dock .status-bar { flex:1; display:flex; align-items:center; gap:16px; justify-content:center; }
.dock .status-item { font-size:11px; color:var(--slate-300); display:flex; align-items:center; gap:4px; }
.dock .status-dot { width:6px; height:6px; border-radius:50%; }
.dock .status-dot.green { background:var(--green); }
.dock .status-dot.blue { background:var(--blue); }
.dock .status-dot.amber { background:#f59e0b; }
.dock .dock-hints { display:flex; align-items:center; gap:10px; font-size:9px; color:var(--slate-500); margin-right:4px; }
.dock .dock-hints .dh { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.dock .dock-hints .dh kbd { font-size:8px; padding:1px 4px; border-radius:3px; background:var(--navy-600); color:var(--slate-300); font-family:inherit; border:1px solid var(--navy-500); line-height:1.3; }
.dock .quick-actions { display:flex; gap:6px; }
.dock .action-btn { font-size:11px; padding:4px 10px; border-radius:6px; border:1px solid var(--navy-600); background:var(--navy-700); color:var(--slate-200); cursor:pointer; transition:var(--transition); display:flex; align-items:center; gap:4px; font-family:inherit; }
.dock .action-btn:hover { border-color:var(--accent); color:var(--white); }
.dock .action-btn.primary { background:var(--accent); border-color:var(--accent); color:white; }
.dock .action-btn .kbd { font-size:9px; padding:1px 4px; border-radius:3px; background:rgba(255,255,255,.1); }

.mode-panel { display:none; }
.mode-panel.active { display:flex; flex-direction:column; height:100%; }