static/css/style.css

/* Doctor's Sidekick - Medical Dashboard Styles */

/* CSS Custom Properties - Medical Color Scheme */
:root {
    /* Primary Colors */
    --primary: 210 56% 27%; /* #0F766E - Medical Teal */
    --secondary: 217 67% 42%; /* #1E40AF - Professional Blue */
    --background: 210 11% 98%; /* #F8FAFC - Clinical White */
    --text: 222 84% 25%; /* #1E293B - Dark Slate */
    
    /* State Colors */
    --success: 158 64% 39%; /* #059669 - Green */
    --warning: 25 95% 53%; /* #D97706 - Amber */
    --danger: 0 84% 60%; /* #DC2626 - Red */
    --info: 200 98% 39%; /* #0369A1 - Info Blue */
    --accent: 260 83% 57%; /* #7C3AED - Purple */
    
    /* Neutral Colors */
    --muted: 215 16% 47%; /* #64748B - Slate */
    --light: 210 20% 98%; /* #F1F5F9 - Light Slate */
    --border: 214 32% 91%; /* #E2E8F0 - Border */
    
    /* Semantic Colors for Medical Context */
    --primary-light: 210 56% 27% / 0.1;
    --success-light: 158 64% 39% / 0.1;
    --warning-light: 25 95% 53% / 0.1;
    --danger-light: 0 84% 60% / 0.1;
    --info-light: 200 98% 39% / 0.1;
    
    /* Spacing System */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.1), 0 8px 10px -6px hsl(0 0% 0% / 0.1);
}

/* Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--text));
    line-height: 1.6;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: hsl(var(--text));
    font-weight: 600;
}

.text-primary { color: hsl(var(--primary)) !important; }
.text-secondary { color: hsl(var(--secondary)) !important; }
.text-success { color: hsl(var(--success)) !important; }
.text-warning { color: hsl(var(--warning)) !important; }
.text-danger { color: hsl(var(--danger)) !important; }
.text-info { color: hsl(var(--info)) !important; }
.text-muted { color: hsl(var(--muted)) !important; }

/* Bootstrap Color Overrides */
.bg-primary { background-color: hsl(var(--primary)) !important; }
.bg-secondary { background-color: hsl(var(--secondary)) !important; }
.bg-success { background-color: hsl(var(--success)) !important; }
.bg-warning { background-color: hsl(var(--warning)) !important; }
.bg-danger { background-color: hsl(var(--danger)) !important; }
.bg-info { background-color: hsl(var(--info)) !important; }
.bg-light { background-color: hsl(var(--light)) !important; }

.btn-primary {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: white;
}

.btn-primary:hover {
    background-color: hsl(210 56% 22%);
    border-color: hsl(210 56% 22%);
}

.btn-outline-primary {
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
}

.btn-outline-primary:hover {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: white;
}

/* Navigation */
.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
}

.nav-link {
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-link:hover {
    transform: translateY(-1px);
}

.nav-link.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-sm);
}

/* Cards */
.card {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid hsl(var(--border));
    font-weight: 600;
}

/* Stats Cards */
.stats-card {
    background: linear-gradient(135deg, white 0%, hsl(var(--light)) 100%);
    border: none;
    transition: all 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.stats-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.bg-primary-light { background-color: hsl(var(--primary-light)); }
.bg-success-light { background-color: hsl(var(--success-light)); }
.bg-warning-light { background-color: hsl(var(--warning-light)); }
.bg-danger-light { background-color: hsl(var(--danger-light)); }
.bg-info-light { background-color: hsl(var(--info-light)); }

.stats-number {
    font-size: 2rem;
    font-weight: 700;
    color: hsl(var(--text));
    line-height: 1;
}

.stats-label {
    font-size: 0.875rem;
    color: hsl(var(--muted));
    font-weight: 500;
}

/* Patient Cards */
.patient-card {
    background: white;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.patient-card:hover {
    border-color: hsl(var(--primary));
    box-shadow: var(--shadow-md);
}

/* Avatar Components */
.patient-avatar, .user-avatar {
    width: 40px;
    height: 40px;
}

.patient-avatar-large {
    width: 80px;
    height: 80px;
}

.avatar-circle {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.avatar-circle-large {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, hsl(var(--primary)), hsl(var(--light)));
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-marker {
    position: absolute;
    left: -2.5rem;
    top: 0.5rem;
    width: 2rem;
    height: 2rem;
    background: white;
    border: 2px solid hsl(var(--primary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.timeline-content {
    margin-left: 1rem;
}

/* Follow-up Date Display */
.followup-date {
    background: hsl(var(--light));
    border-radius: var(--radius-md);
    padding: 0.5rem;
    min-width: 60px;
}

.date-day {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--primary));
    line-height: 1;
}

.date-month {
    font-size: 0.75rem;
    color: hsl(var(--muted));
    text-transform: uppercase;
    font-weight: 600;
}

/* Login Page Styles */
.login-body {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.login-container {
    position: relative;
    z-index: 2;
}

.login-card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-xl);
}

.login-logo {
    display: flex;
    justify-content: center;
}

.logo-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    box-shadow: var(--shadow-lg);
}

.login-form .input-group-text {
    background: hsl(var(--light));
    border-color: hsl(var(--border));
}

.login-form .form-control {
    border-color: hsl(var(--border));
    background: white;
}

.login-form .form-control:focus {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 0.2rem hsl(var(--primary-light));
}

/* Medical Pattern Background */
.medical-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.pattern-element {
    position: absolute;
    color: rgba(255, 255, 255, 0.1);
    font-size: 3rem;
    animation: float 6s ease-in-out infinite;
}

.pattern-element:nth-child(2n) {
    animation-delay: -2s;
}

.pattern-element:nth-child(3n) {
    animation-delay: -4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

/* Admin Panel Styles */
.admin-nav-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.admin-nav-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.admin-icon {
    opacity: 0.8;
    transition: all 0.3s ease;
}

.admin-nav-card:hover .admin-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Template Cards */
.template-card {
    transition: all 0.2s ease;
}

.template-card:hover {
    border-color: hsl(var(--primary));
    box-shadow: var(--shadow-md);
}

/* Treatment Planner Styles */
.guidelines-list {
    font-size: 0.875rem;
}

.guideline-item h6 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.guideline-item ul li {
    margin-bottom: 0.25rem;
    color: hsl(var(--muted));
}

/* Form Enhancements */
.form-label {
    font-weight: 600;
    color: hsl(var(--text));
    margin-bottom: 0.5rem;
}

.form-control, .form-select {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 0.2rem hsl(var(--primary-light));
}

/* Table Enhancements */
.table th {
    font-weight: 600;
    color: hsl(var(--text));
    border-color: hsl(var(--border));
}

.table td {
    border-color: hsl(var(--border));
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: hsl(var(--light));
}

/* Badge Customizations */
.badge {
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
}

/* Button Enhancements */
.btn {
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-sm {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stats-number {
        font-size: 1.5rem;
    }
    
    .timeline {
        padding-left: 1.5rem;
    }
    
    .timeline::before {
        left: 0.75rem;
    }
    
    .timeline-marker {
        left: -0.5rem;
        width: 1.5rem;
        height: 1.5rem;
    }
    
    .patient-avatar-large {
        width: 60px;
        height: 60px;
    }
    
    .avatar-circle-large {
        font-size: 1.25rem;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .btn,
    .card-header .btn,
    .modal {
        display: none !important;
    }
    
    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
    
    body {
        background: white !important;
    }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus Styles for Keyboard Navigation */
.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .card {
        border-width: 2px;
    }
    
    .btn-outline-primary {
        border-width: 2px;
    }
}

/* Dark Mode Support (Future Enhancement) */
@media (prefers-color-scheme: dark) {
    :root {
        --background: 222 84% 5%;
        --text: 210 11% 98%;
        --border: 215 16% 25%;
        --light: 215 16% 15%;
    }
}