/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #1a1a2e; color: #e0e0e0; }

/* === Login === */
.login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.login-card { background: #16213e; padding: 2rem; border-radius: 8px; width: 400px; }
.login-card h1 { margin-bottom: 1.5rem; color: #00d4ff; }
.login-card label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
.login-card input { width: 100%; padding: 0.75rem; border: 1px solid #333; border-radius: 4px; background: #0f1629; color: #e0e0e0; margin-bottom: 1rem; }
.login-card button { width: 100%; padding: 0.75rem; border: none; border-radius: 4px; background: #00d4ff; color: #1a1a2e; font-weight: bold; cursor: pointer; }
.login-card button:hover { background: #00b8d4; }
.hidden { display: none; }

/* === Terminal page === */
.terminal-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

#topbar { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1rem; background: #16213e; border-bottom: 1px solid #333; height: 40px; flex-shrink: 0; }
.logo { font-weight: bold; color: #00d4ff; }
#user-info { margin-left: auto; font-size: 0.85rem; }

#workspace { display: flex; flex: 1; overflow: hidden; }
#terminal-container { flex: 1; padding: 4px; overflow: hidden; }

/* === Panel === */
#panel { width: 280px; background: #16213e; border-left: 1px solid #333; overflow-y: auto; flex-shrink: 0; padding: 0.75rem; }
#panel section { margin-bottom: 1rem; }
#panel h3 { font-size: 0.8rem; text-transform: uppercase; color: #888; margin-bottom: 0.5rem; cursor: pointer; }
#panel ul { list-style: none; }
#panel li { padding: 0.4rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
#panel li:hover { background: #1a2744; }
#panel li.active { background: #1a2744; border-left: 3px solid #00d4ff; }

.participant { display: flex; align-items: center; gap: 0.5rem; }
.focus-indicator { width: 8px; height: 8px; border-radius: 50%; background: #00d4ff; }
.focus-indicator.inactive { background: #555; }

.btn-focus { font-size: 0.8rem; padding: 0.3rem 0.6rem; border: 1px solid #00d4ff; background: transparent; color: #00d4ff; border-radius: 4px; cursor: pointer; }
.btn-focus:hover { background: #00d4ff22; }

.recording-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.recording-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4444; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* === Tab bar === */
#tabbar { display: flex; background: #0f1629; border-top: 1px solid #333; height: 32px; flex-shrink: 0; overflow-x: auto; }
.tab { padding: 0.4rem 1rem; font-size: 0.85rem; cursor: pointer; border-right: 1px solid #333; white-space: nowrap; }
.tab:hover { background: #1a2744; }
.tab.active { background: #16213e; color: #00d4ff; border-bottom: 2px solid #00d4ff; }

/* === Liveshare page === */
.liveshare-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.liveshare-banner { margin-left: auto; font-size: 0.85rem; padding: 0.3rem 0.8rem; background: #ff990033; color: #ffaa00; border-radius: 4px; }
.liveshare-banner.connected { background: #00d4ff22; color: #00d4ff; }
.liveshare-banner.coedit { background: #00ff8822; color: #00ff88; }

/* === Replay === */
.replay-page #topbar a { color: #00d4ff; text-decoration: none; }
#replay-controls { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: #16213e; }
#replay-controls button { background: none; border: 1px solid #555; color: #e0e0e0; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; }
#seek { flex: 1; }
#speed { background: #0f1629; color: #e0e0e0; border: 1px solid #333; border-radius: 4px; padding: 0.3rem; }

/* === Dashboard === */
.dashboard-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#dashboard { flex: 1; padding: 2rem; overflow-y: auto; max-width: 960px; margin: 0 auto; width: 100%; }
#dashboard h2 { color: #00d4ff; margin-bottom: 1.5rem; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.05em; }

.clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.client-card { background: #16213e; border: 1px solid #333; border-radius: 8px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.client-card-header { display: flex; align-items: center; gap: 0.75rem; }
.client-avatar { width: 40px; height: 40px; border-radius: 50%; background: #0f1629; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #00d4ff; font-weight: bold; flex-shrink: 0; }
.client-name { font-weight: 600; font-size: 1rem; }
.client-hostname { font-size: 0.8rem; color: #888; }
.client-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot.running { background: #4caf50; }
.status-dot.stopped { background: #ff9800; }
.status-dot.offline { background: #555; }
.client-actions { margin-top: auto; }
.btn-connect { width: 100%; padding: 0.6rem; border: none; border-radius: 4px; background: #00d4ff; color: #1a1a2e; font-weight: bold; cursor: pointer; font-size: 0.9rem; }
.btn-connect:hover { background: #00b8d4; }
.btn-connect:disabled { background: #333; color: #666; cursor: not-allowed; }
.no-clients { color: #888; font-size: 0.95rem; }
.loading { color: #888; }

/* === Admin === */
.admin-page { padding: 2rem; max-width: 900px; margin: 0 auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem; text-align: left; border-bottom: 1px solid #333; }
th { color: #888; font-size: 0.85rem; text-transform: uppercase; }