style: convert UI palette to clean clinical hospital theme

src/app/page.tsx

@@ -11,11 +11,10 @@ import {
 } from '@/lib/mock-data';
 import {
   ClinicTenant,
-  Provider,
-  Patient,
   Appointment,
   SoapNote,
   Superbill,
+  Patient,
 } from '@/types/clinical';
 import { CalendarView } from '@/components/calendar/CalendarView';
 import { SoapChartEditor } from '@/components/charting/SoapChartEditor';
@@ -28,34 +27,29 @@ import {
   FileText,
   DollarSign,
   Users,
-  ShieldCheck,
   Building2,
   Globe,
-  Sparkles,
   ChevronDown,
   Stethoscope,
   Laptop,
-  CheckCircle2,
 } from 'lucide-react';
 
 export default function Home() {
-  // Global Multi-Tenant State
   const [tenants, setTenants] = useState<ClinicTenant[]>(INITIAL_TENANTS);
   const [activeTenantId, setActiveTenantId] = useState<string>(INITIAL_TENANTS[0].id);
 
-  // Active Navigation Mode: 'clinic' (EHR Practice OS) | 'patient' (Booking/Intake) | 'superadmin' (Mediusa Command)
+  // 'clinic' | 'patient' | 'superadmin'
   const [portalMode, setPortalMode] = useState<'clinic' | 'patient' | 'superadmin'>('clinic');
 
-  // Clinic Portal Sub-Tabs: 'calendar' | 'charting' | 'billing' | 'retention'
+  // 'calendar' | 'charting' | 'billing' | 'retention'
   const [clinicTab, setClinicTab] = useState<'calendar' | 'charting' | 'billing' | 'retention'>('calendar');
 
-  // Active Entities
   const [appointments, setAppointments] = useState<Appointment[]>(INITIAL_APPOINTMENTS);
   const [patients, setPatients] = useState<Patient[]>(INITIAL_PATIENTS);
   const [soapNotes, setSoapNotes] = useState<SoapNote[]>(INITIAL_SOAP_NOTES);
   const [superbills, setSuperbills] = useState<Superbill[]>(INITIAL_SUPERBILLS);
 
-  const [activePatient, setActivePatient] = useState<Patient>(INITIAL_PATIENTS[0]); // Marcus Chen
+  const [activePatient, setActivePatient] = useState<Patient>(INITIAL_PATIENTS[0]);
   const [activeSoapNote, setActiveSoapNote] = useState<SoapNote | undefined>(INITIAL_SOAP_NOTES[0]);
   const [activeSuperbill, setActiveSuperbill] = useState<Superbill>(INITIAL_SUPERBILLS[0]);
 
@@ -63,7 +57,6 @@ export default function Home() {
   const activeProviders = INITIAL_PROVIDERS.filter((p) => p.tenantId === activeTenant.id);
   const activeProvider = activeProviders[0] || INITIAL_PROVIDERS[0];
 
-  // Handlers
   const handleSelectAppointment = (apt: Appointment) => {
     const patientMatch = patients.find((p) => p.id === apt.patientId) || patients[0];
     setActivePatient(patientMatch);
@@ -167,39 +160,36 @@ export default function Home() {
   };
 
   return (
-    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col">
-      {/* Top Global Command Bar */}
-      <header className="sticky top-0 z-40 bg-slate-950/90 backdrop-blur-md border-b border-slate-800/80 px-4 lg:px-8 py-3">
+    <div className="min-h-screen bg-slate-50 text-slate-900 flex flex-col">
+      {/* Top Hospital Command Header */}
+      <header className="sticky top-0 z-40 bg-white border-b border-slate-200/90 px-4 lg:px-8 py-3 shadow-2xs">
         <div className="max-w-7xl mx-auto flex flex-col md:flex-row md:items-center justify-between gap-4">
-          {/* Brand & Clinic Domain Selector */}
+          {/* Hospital Brand & Domain */}
           <div className="flex items-center gap-4">
-            <div className="flex items-center gap-2">
-              <span
-                className="w-8 h-8 rounded-xl flex items-center justify-center font-black text-xs text-slate-950 shadow-md"
-                style={{ backgroundColor: activeTenant.brandColor }}
-              >
-                M+
+            <div className="flex items-center gap-2.5">
+              <span className="w-9 h-9 rounded-lg bg-sky-700 flex items-center justify-center font-black text-sm text-white shadow-xs">
+                +M
               </span>
               <div>
-                <div className="text-xs font-black tracking-tight text-white flex items-center gap-1.5">
+                <div className="text-xs font-black tracking-tight text-slate-900 flex items-center gap-1.5">
                   <span>MEDIUSA CLINIC OS</span>
-                  <span className="text-[10px] px-1.5 py-0.2 rounded bg-teal-500/20 text-teal-300 font-mono">
-                    v2.4 PRO
+                  <span className="text-[10px] px-2 py-0.5 rounded-full bg-sky-100 text-sky-800 font-bold border border-sky-200">
+                    CLINICAL v2.4
                   </span>
                 </div>
-                <div className="text-[11px] text-slate-400 font-mono flex items-center gap-1">
-                  <Globe className="w-3 h-3 text-teal-400" />
+                <div className="text-xs text-slate-500 font-mono flex items-center gap-1 mt-0.5">
+                  <Globe className="w-3 h-3 text-sky-700" />
                   https://{activeTenant.domain}
                 </div>
               </div>
             </div>
 
-            {/* Tenant Switcher Dropdown */}
-            <div className="relative group">
+            {/* Clinic Dropdown */}
+            <div className="relative">
               <select
                 value={activeTenantId}
                 onChange={(e) => setActiveTenantId(e.target.value)}
-                className="appearance-none bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-200 text-xs font-semibold rounded-xl px-3 py-1.5 pr-8 cursor-pointer focus:outline-none focus:border-teal-500 transition"
+                className="appearance-none bg-slate-50 hover:bg-slate-100 border border-slate-300 text-slate-800 text-xs font-bold rounded-lg px-3 py-1.5 pr-8 cursor-pointer focus:outline-none focus:border-sky-500 transition shadow-2xs"
               >
                 {tenants.map((t) => (
                   <option key={t.id} value={t.id}>
@@ -207,19 +197,19 @@ export default function Home() {
                   </option>
                 ))}
               </select>
-              <ChevronDown className="w-3.5 h-3.5 text-slate-400 absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none" />
+              <ChevronDown className="w-3.5 h-3.5 text-slate-500 absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none" />
             </div>
           </div>
 
-          {/* Core Portal Mode Switcher */}
-          <div className="flex items-center gap-1 bg-slate-900 p-1 rounded-xl border border-slate-800 text-xs font-semibold">
+          {/* Portal Switcher Tabs */}
+          <div className="flex items-center gap-1 bg-slate-100 p-1 rounded-lg border border-slate-200 text-xs font-semibold">
             <button
               type="button"
               onClick={() => setPortalMode('clinic')}
-              className={`px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition ${
+              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 transition ${
                 portalMode === 'clinic'
-                  ? 'bg-teal-500 text-slate-950 font-bold shadow'
-                  : 'text-slate-400 hover:text-white'
+                  ? 'bg-sky-700 text-white font-bold shadow-xs'
+                  : 'text-slate-600 hover:text-slate-900'
               }`}
             >
               <Stethoscope className="w-3.5 h-3.5" />
@@ -229,10 +219,10 @@ export default function Home() {
             <button
               type="button"
               onClick={() => setPortalMode('patient')}
-              className={`px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition ${
+              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 transition ${
                 portalMode === 'patient'
-                  ? 'bg-teal-500 text-slate-950 font-bold shadow'
-                  : 'text-slate-400 hover:text-white'
+                  ? 'bg-sky-700 text-white font-bold shadow-xs'
+                  : 'text-slate-600 hover:text-slate-900'
               }`}
             >
               <Laptop className="w-3.5 h-3.5" />
@@ -242,13 +232,13 @@ export default function Home() {
             <button
               type="button"
               onClick={() => setPortalMode('superadmin')}
-              className={`px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition ${
+              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 transition ${
                 portalMode === 'superadmin'
-                  ? 'bg-indigo-600 text-white font-bold shadow'
-                  : 'text-slate-400 hover:text-white'
+                  ? 'bg-slate-900 text-white font-bold shadow-xs'
+                  : 'text-slate-600 hover:text-slate-900'
               }`}
             >
-              <Building2 className="w-3.5 h-3.5 text-indigo-300" />
+              <Building2 className="w-3.5 h-3.5" />
               Mediusa Super-Admin
             </button>
           </div>
@@ -256,65 +246,64 @@ export default function Home() {
 
         {/* Sub-Tabs for Doctor Clinic OS */}
         {portalMode === 'clinic' && (
-          <div className="max-w-7xl mx-auto flex items-center gap-2 mt-3 pt-2 border-t border-slate-800/80 overflow-x-auto text-xs">
+          <div className="max-w-7xl mx-auto flex items-center gap-2 mt-3 pt-2.5 border-t border-slate-100 overflow-x-auto text-xs">
             <button
               type="button"
               onClick={() => setClinicTab('calendar')}
-              className={`px-3 py-1.5 rounded-lg font-medium flex items-center gap-1.5 transition whitespace-nowrap ${
+              className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${
                 clinicTab === 'calendar'
-                  ? 'bg-slate-800 text-teal-300 border border-teal-500/40 font-bold'
-                  : 'text-slate-400 hover:text-slate-200'
+                  ? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
+                  : 'text-slate-600 hover:text-slate-900'
               }`}
             >
-              <Calendar className="w-3.5 h-3.5" />
-              Fast Calendar &amp; Schedule
+              <Calendar className="w-3.5 h-3.5 text-sky-700" />
+              Schedule &amp; Encounters
             </button>
 
             <button
               type="button"
               onClick={() => setClinicTab('charting')}
-              className={`px-3 py-1.5 rounded-lg font-medium flex items-center gap-1.5 transition whitespace-nowrap ${
+              className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${
                 clinicTab === 'charting'
-                  ? 'bg-slate-800 text-teal-300 border border-teal-500/40 font-bold'
-                  : 'text-slate-400 hover:text-slate-200'
+                  ? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
+                  : 'text-slate-600 hover:text-slate-900'
               }`}
             >
-              <FileText className="w-3.5 h-3.5" />
-              SOAP Chart &amp; 2D Spine Map ({activePatient.firstName} {activePatient.lastName})
+              <FileText className="w-3.5 h-3.5 text-sky-700" />
+              Clinical SOAP &amp; Spine Map ({activePatient.firstName} {activePatient.lastName})
             </button>
 
             <button
               type="button"
               onClick={() => setClinicTab('billing')}
-              className={`px-3 py-1.5 rounded-lg font-medium flex items-center gap-1.5 transition whitespace-nowrap ${
+              className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${
                 clinicTab === 'billing'
-                  ? 'bg-slate-800 text-teal-300 border border-teal-500/40 font-bold'
-                  : 'text-slate-400 hover:text-slate-200'
+                  ? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
+                  : 'text-slate-600 hover:text-slate-900'
               }`}
             >
-              <DollarSign className="w-3.5 h-3.5" />
-              Superbills &amp; Stripe Billing
+              <DollarSign className="w-3.5 h-3.5 text-sky-700" />
+              Superbills &amp; Invoicing
             </button>
 
             <button
               type="button"
               onClick={() => setClinicTab('retention')}
-              className={`px-3 py-1.5 rounded-lg font-medium flex items-center gap-1.5 transition whitespace-nowrap ${
+              className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${
                 clinicTab === 'retention'
-                  ? 'bg-slate-800 text-amber-300 border border-amber-500/40 font-bold'
-                  : 'text-slate-400 hover:text-slate-200'
+                  ? 'bg-amber-50 text-amber-800 border border-amber-200 shadow-2xs font-bold'
+                  : 'text-slate-600 hover:text-slate-900'
               }`}
             >
-              <Users className="w-3.5 h-3.5 text-amber-400" />
+              <Users className="w-3.5 h-3.5 text-amber-600" />
               Care Plan Retention Radar
             </button>
           </div>
         )}
       </header>
 
-      {/* Main App Container */}
+      {/* Main Container */}
       <main className="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8">
-        {/* PORTAL MODE 1: Clinic Practice OS */}
         {portalMode === 'clinic' && (
           <div>
             {clinicTab === 'calendar' && (
@@ -363,7 +352,6 @@ export default function Home() {
           </div>
         )}
 
-        {/* PORTAL MODE 2: White-Labeled Patient Booking & Intake */}
         {portalMode === 'patient' && (
           <PatientPortalView
             activeTenant={activeTenant}
@@ -372,7 +360,6 @@ export default function Home() {
           />
         )}
 
-        {/* PORTAL MODE 3: Mediusa Super-Admin Command Center */}
         {portalMode === 'superadmin' && (
           <SuperAdminView
             tenants={tenants}
@@ -382,13 +369,13 @@ export default function Home() {
         )}
       </main>
 
-      {/* Footer Branding (Mediusa / AI Pilots Ecosystem) */}
-      <footer className="bg-slate-950 border-t border-slate-800/80 py-4 px-6 text-center text-xs text-slate-500">
+      {/* Hospital Footer */}
+      <footer className="bg-white border-t border-slate-200 py-4 px-6 text-center text-xs text-slate-500">
         <div className="flex flex-col sm:flex-row items-center justify-between max-w-7xl mx-auto gap-2">
-          <span>
-            Mediusa Clinic OS • Proprietary Practice Management Engine for AI Pilots / Mediusa
+          <span className="font-medium text-slate-600">
+            Mediusa Clinic OS • Hospital-Grade Practice Management Platform
           </span>
-          <span className="font-mono text-slate-400">
+          <span className="font-mono text-slate-500">
             hello@aipilots.site • HIPAA Certified • Sub-30s Clinical Charting Standard
           </span>
         </div>