/* --- CURIO CLINICAL ZEN: MASTER DESIGN SYSTEM --- */ :root { --primary: #0F172A; --secondary: #3B82F6; --success: #10B981; --danger: #EF4444; --bg: #F8FAFC; --sidebar-bg: #0B1120; --card: #FFFFFF; --border: #E2E8F0; --text-main: #1E293B; --text-muted: #64748B; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', 'Outfit', sans-serif; background: var(--bg); color: var(--text-main); overflow-x: hidden; } /* --- RESPONSIVE LAYOUT --- */ .app-container { display: flex; min-height: 100vh; } .sidebar { width: 260px; background: var(--sidebar-bg); color: white; padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; transition: all 0.3s ease; } .main-content { flex: 1; padding: 2rem; max-width: 100%; } @media (max-width: 1024px) { .sidebar { width: 80px; padding: 1rem; } .sidebar .logo-text, .sidebar .logo-text, .sidebar span { display: none; } .sidebar .side-nav a { justify-content: center; padding: 1rem 0; } .sidebar .user-profile { flex-direction: column; align-items: center; } } /* --- DOCTOR ZEN WORKSPACE --- */ .doctor-zen-section { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; } @media (max-width: 768px) { .doctor-zen-section { grid-template-columns: 1fr; } } /* Pipeline Cards */ .patient-pipeline { background: var(--card); border-radius: 20px; padding: 1.5rem; border: 1px solid var(--border); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); } .pipeline-card { background: #F1F5F9; padding: 1rem; border-radius: 12px; margin-bottom: 0.75rem; border-left: 4px solid var(--border); cursor: pointer; transition: all 0.2s; } .pipeline-card:hover { transform: translateX(5px); background: #E2E8F0; } .pipeline-card.active { border-left-color: var(--secondary); background: #EFF6FF; } /* Workspace Area */ .clinical-workspace-area { background: var(--card); border-radius: 24px; padding: 2.5rem; border: 1px solid var(--border); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); } .current-patient h1 { font-size: 2rem; color: var(--primary); margin-bottom: 0.5rem; } .patient-meta { color: var(--text-muted); font-size: 1rem; margin-bottom: 2rem; } /* Buttons Grid */ .workspace-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .btn-zen { padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: white; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; transition: all 0.2s; } .btn-zen:hover { background: #F8FAFC; border-color: var(--secondary); } .btn-primary-zen { background: var(--secondary); color: white; border: none; } .btn-primary-zen:hover { background: #1D4ED8; } /* Clinical Notes & Summary */ .clinical-notes-card textarea { width: 100%; min-height: 200px; border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; font-size: 1.1rem; line-height: 1.6; background: #FDFDFD; resize: vertical; } .summary-card { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); border-radius: 20px; padding: 1.5rem; margin-top: 2rem; border: 1px solid #A7F3D0; } /* Animations */ @keyframes scribePulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } .btn-scribe.active { background: var(--danger) !important; color: white !important; animation: scribePulse 2s infinite; } .hidden { display: none !important; }