diff --git a/dashboard.css b/dashboard.css index 7da4b45..3a1c6f3 100644 --- a/dashboard.css +++ b/dashboard.css @@ -1,7 +1,8 @@ -/* --- CURIO CLINICAL ZEN: MASTER DESIGN SYSTEM --- */ +/* --- CURIO PREMIUM DESIGN SYSTEM --- */ :root { --primary: #0F172A; --secondary: #3B82F6; + --accent: #F59E0B; --success: #10B981; --danger: #EF4444; --bg: #F8FAFC; @@ -10,155 +11,186 @@ --border: #E2E8F0; --text-main: #1E293B; --text-muted: #64748B; + --sidebar-width: 260px; } * { box-sizing: border-box; margin: 0; padding: 0; } + body { - font-family: 'Inter', 'Outfit', sans-serif; + font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text-main); overflow-x: hidden; } -/* --- RESPONSIVE LAYOUT --- */ -.app-container { display: flex; min-height: 100vh; } +/* --- MAIN LAYOUT --- */ +.app-container { + display: flex; + min-height: 100vh; +} .sidebar { - width: 260px; + width: var(--sidebar-width); background: var(--sidebar-bg); color: white; padding: 1.5rem; display: flex; flex-direction: column; - gap: 2rem; - transition: all 0.3s ease; + position: sticky; + top: 0; + height: 100vh; + z-index: 1000; +} + +.logo { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 2.5rem; + padding: 0.5rem; +} + +.logo-icon { + width: 40px; + height: 40px; + background: var(--secondary); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1.2rem; +} + +.logo-text { + font-family: 'Outfit', sans-serif; + font-size: 1.5rem; + font-weight: 700; +} + +.side-nav { + display: flex; + flex-direction: column; + gap: 0.5rem; + flex: 1; +} + +.side-nav a { + display: flex; + align-items: center; + gap: 12px; + padding: 0.8rem 1rem; + text-decoration: none; + color: #94A3B8; + border-radius: 12px; + transition: all 0.2s; + font-weight: 500; +} + +.side-nav a:hover, .side-nav a.active { + background: rgba(59, 130, 246, 0.1); + color: white; } .main-content { flex: 1; - padding: 2rem; + padding: 2.5rem; 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; } +/* --- SECTION STYLING --- */ +.stats-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 1.5rem; + margin-bottom: 2.5rem; } -/* --- DOCTOR ZEN WORKSPACE --- */ -.doctor-zen-section { +.stat-card { + background: var(--card); + padding: 1.5rem; + border-radius: 20px; + border: 1px solid var(--border); + box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); +} + +.stat-card h3 { font-size: 1.8rem; margin: 0.5rem 0; } +.stat-card span { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; } + +/* --- DOCTOR ZEN WORKSPACE LAYER --- */ +.doctor-zen-grid { 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; + border-radius: 24px; 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); + background: #F8FAFC; + padding: 1.2rem; + border-radius: 16px; + margin-bottom: 1rem; + border-left: 5px solid transparent; cursor: pointer; - transition: all 0.2s; + transition: all 0.3s ease; } -.pipeline-card:hover { transform: translateX(5px); background: #E2E8F0; } -.pipeline-card.active { border-left-color: var(--secondary); background: #EFF6FF; } +.pipeline-card.active { + background: #EFF6FF; + border-left-color: var(--secondary); + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1); +} -/* Workspace Area */ .clinical-workspace-area { background: var(--card); - border-radius: 24px; + border-radius: 28px; padding: 2.5rem; border: 1px solid var(--border); - box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); + box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05); } -.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)); + display: flex; gap: 1rem; - margin-bottom: 2rem; + margin: 2rem 0; } .btn-zen { - padding: 0.75rem 1rem; - border-radius: 12px; + padding: 0.8rem 1.5rem; + border-radius: 14px; 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%); + min-height: 250px; + border: 2px solid #F1F5F9; border-radius: 20px; padding: 1.5rem; - margin-top: 2rem; - border: 1px solid #A7F3D0; + font-size: 1.1rem; + background: #FAFAFA; + outline: none; } -/* 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); } -} +.clinical-notes-card textarea:focus { border-color: var(--secondary); background: white; } -.btn-scribe.active { - background: var(--danger) !important; - color: white !important; - animation: scribePulse 2s infinite; +/* --- RESPONSIVE ADAPTATION --- */ +@media (max-width: 1024px) { + .sidebar { width: 80px; padding: 1rem; } + .logo-text, .side-nav a span:last-child { display: none; } + .doctor-zen-grid { grid-template-columns: 1fr; } } .hidden { display: none !important; } diff --git a/dashboard.html b/dashboard.html index 615d11d..d66f4ec 100644 --- a/dashboard.html +++ b/dashboard.html @@ -5,7 +5,7 @@