diff --git a/dashboard.css b/dashboard.css index 4d6ef5a..7da4b45 100644 --- a/dashboard.css +++ b/dashboard.css @@ -1,173 +1,164 @@ -/* --- MOBILE-FIRST BASE STYLES --- */ +/* --- CURIO CLINICAL ZEN: MASTER DESIGN SYSTEM --- */ :root { --primary: #0F172A; - --secondary: #2563EB; - --accent: #F59E0B; + --secondary: #3B82F6; + --success: #10B981; + --danger: #EF4444; --bg: #F8FAFC; + --sidebar-bg: #0B1120; --card: #FFFFFF; --border: #E2E8F0; - --text: #334155; - --sidebar-width: 260px; + --text-main: #1E293B; + --text-muted: #64748B; } * { box-sizing: border-box; margin: 0; padding: 0; } - -body { - font-family: 'Inter', sans-serif; - background-color: var(--bg); - color: var(--text); +body { + font-family: 'Inter', 'Outfit', sans-serif; + background: var(--bg); + color: var(--text-main); overflow-x: hidden; - line-height: 1.5; } -/* Layout Container */ -.dashboard-body { - display: flex; - min-height: 100vh; -} +/* --- RESPONSIVE LAYOUT --- */ +.app-container { display: flex; min-height: 100vh; } -/* Sidebar Styling - Mobile First */ .sidebar { - position: fixed; - top: 0; - left: 0; - width: var(--sidebar-width); - height: 100vh; - background: var(--primary); + width: 260px; + background: var(--sidebar-bg); color: white; - z-index: 1000; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); - transform: translateX(-100%); + padding: 1.5rem; display: flex; flex-direction: column; + gap: 2rem; + transition: all 0.3s ease; } -.sidebar.active { - transform: translateX(0); - box-shadow: 10px 0 30px rgba(0,0,0,0.2); -} - -.sidebar-mobile-toggle { - position: fixed; - top: 15px; - left: 15px; - z-index: 1100; - background: var(--secondary); - color: white; - padding: 10px 15px; - border-radius: 8px; - font-weight: bold; - cursor: pointer; - box-shadow: 0 4px 6px rgba(0,0,0,0.1); -} - -/* Main Content Area */ .main-content { flex: 1; - padding: 70px 15px 20px; /* Space for mobile toggle */ - width: 100%; - transition: margin-left 0.3s ease; + padding: 2rem; + max-width: 100%; } -/* Desktop Sidebar Behavior */ -@media (min-width: 1024px) { - .sidebar { - transform: translateX(0); - position: sticky; - } - .sidebar-mobile-toggle { - display: none; - } - .main-content { - padding: 30px 40px; - } +@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 VIEW: RESPONSIVE GRID --- */ +/* --- DOCTOR ZEN WORKSPACE --- */ .doctor-zen-section { - display: flex; - flex-direction: column; - gap: 1.5rem; + display: grid; + grid-template-columns: 320px 1fr; + gap: 2rem; } -@media (min-width: 1024px) { - .doctor-zen-section { - display: grid; - grid-template-columns: 320px 1fr; - height: calc(100vh - 100px); - } +@media (max-width: 768px) { + .doctor-zen-section { grid-template-columns: 1fr; } } +/* Pipeline Cards */ .patient-pipeline { background: var(--card); - border-radius: 16px; - border: 1px solid var(--border); + border-radius: 20px; padding: 1.5rem; - overflow-y: auto; + 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: 16px; + border-radius: 24px; + padding: 2.5rem; border: 1px solid var(--border); - padding: 2rem; - display: flex; - flex-direction: column; - gap: 1.5rem; + box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); } -/* --- BUTTONS & ACTIONS --- */ +.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: flex; - gap: 10px; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 1rem; + margin-bottom: 2rem; } -.workspace-actions button, .workspace-actions select { - flex: 1 1 140px; - padding: 12px; - border-radius: 10px; +.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; } -/* --- CLINICAL SUMMARY CARDS --- */ -.summary-card { - background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%); - padding: 1.5rem; +.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; - border: 1px solid #BBF7D0; + 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: #EF4444 !important; + background: var(--danger) !important; + color: white !important; animation: scribePulse 2s infinite; } -/* --- UTILS --- */ .hidden { display: none !important; } - -.table-responsive { - width: 100%; - overflow-x: auto; - border-radius: 12px; - border: 1px solid var(--border); - margin-top: 1rem; -} - -table { - width: 100%; - border-collapse: collapse; - min-width: 600px; /* Force scroll on small screens */ -} - -th, td { - padding: 15px; - text-align: left; - border-bottom: 1px solid var(--border); -} - -@keyframes scribePulse { - 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } - 70% { transform: scale(1.02); box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); } - 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } -} diff --git a/dashboard.html b/dashboard.html index 54faec4..bca8c42 100644 --- a/dashboard.html +++ b/dashboard.html @@ -51,79 +51,65 @@ -