/* ========================================
   MASTER CSS FILE - KAMBOH ECLINIC
   ========================================
   
   This file consolidates all styles into one comprehensive,
   modern, responsive stylesheet with CSS variables.
   
   Features:
   - CSS Custom Properties for theming
   - Mobile-first responsive design
   - Modern CSS reset and base styles
   - Component library
   - Utility classes
   - Accessibility features
   ======================================== */

/* ========================================
   CSS VARIABLES - ENHANCED COLOR SCHEME
   ======================================== */
:root {
    /* ========================================
       COLOR SYSTEM - ENHANCED THEME
       ======================================== */
    --theme-primary: #2563eb;          /* Modern Blue */
    --theme-secondary: #1e40af;        /* Darker Blue */
    --theme-accent: #3b82f6;           /* Bright Blue */
    --theme-light: #dbeafe;            /* Light Blue */
    --theme-dark: #1e3a8a;             /* Very Dark Blue */
    
    /* RGB versions for transparency */
    --primary-rgb: 37, 99, 235;
    --secondary-rgb: 30, 64, 175;
    --accent-rgb: 59, 130, 246;
    
    /* Semantic Colors */
    --color-success: #059669;          /* Green for success */
    --color-warning: #d97706;          /* Amber for warnings */
    --color-danger: #dc2626;           /* Red for danger */
    --color-info: #0891b2;             /* Blue for info */
    
    /* Text Colors */
    --text-primary: #1f2937;           /* Dark gray for primary text */
    --text-secondary: #4b5563;         /* Medium gray for secondary text */
    --text-muted: #6b7280;             /* Light gray for muted text */
    --text-white: #ffffff;             /* White text */
    --text-light: #f9fafb;             /* Very light text */
    
    /* Background Colors */
    --bg-primary: #ffffff;             /* White background */
    --bg-secondary: #f8fafc;           /* Light gray background */
    --bg-light: #eff6ff;               /* Very light blue background */
    --bg-dark: #1e293b;                /* Dark background */
    --bg-theme: #2563eb;               /* Theme blue background */
    
    /* Border Colors */
    --border-color: #e2e8f0;           /* Light gray border */
    --border-light: #f1f5f9;           /* Very light border */
    --border-theme: #dbeafe;           /* Light blue border */
    --border-dark: #2563eb;            /* Blue border */
    
    /* Shadow Colors */
    --shadow-color: rgba(37, 99, 235, 0.1);
    --shadow-color-dark: rgba(30, 64, 175, 0.2);
    
    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --font-family-primary: 'Roboto', sans-serif;
    --font-family-secondary: 'Roboto Condensed', sans-serif;
    --font-size-xs: 0.75rem;           /* 12px */
    --font-size-sm: 0.875rem;          /* 14px */
    --font-size-base: 1rem;            /* 16px */
    --font-size-lg: 1.125rem;          /* 18px */
    --font-size-xl: 1.25rem;           /* 20px */
    --font-size-xxl: 1.5rem;           /* 24px */
    --font-size-xxxl: 2rem;            /* 32px */
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

/* ========================================
       SPACING
   ======================================== */
    --spacing-xs: 0.25rem;             /* 4px */
    --spacing-sm: 0.5rem;              /* 8px */
    --spacing-md: 1rem;                /* 16px */
    --spacing-lg: 1.5rem;              /* 24px */
    --spacing-xl: 2rem;                /* 32px */
    --spacing-xxl: 3rem;               /* 48px */
    --spacing-xxxl: 4rem;              /* 64px */
    
    /* ========================================
       SHADOWS
       ======================================== */
    --shadow-sm: 0 1px 2px 0 rgba(220, 38, 38, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(220, 38, 38, 0.1), 0 2px 4px -1px rgba(220, 38, 38, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(220, 38, 38, 0.1), 0 4px 6px -2px rgba(220, 38, 38, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(220, 38, 38, 0.1), 0 10px 10px -5px rgba(220, 38, 38, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(220, 38, 38, 0.25);
    
    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-sm: 0.25rem;              /* 4px */
    --radius-md: 0.375rem;             /* 6px */
    --radius-lg: 0.5rem;               /* 8px */
    --radius-xl: 0.75rem;              /* 12px */
    --radius-2xl: 1rem;                /* 16px */
    --radius-pill: 9999px;             /* Pill shape */
    
    /* ========================================
       Z-INDEX
       ======================================== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ========================================
       GRADIENTS
       ======================================== */
    --gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-dark) 100%);
    --gradient-accent: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-primary) 100%);
    --gradient-light: linear-gradient(135deg, var(--theme-light) 0%, var(--bg-light) 100%);
    
    /* ========================================
       FOOTER - RED THEME ONLY
       ======================================== */
    --footer-bg: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
}

/* ========================================
   CSS RESET & BASE STYLES
   ======================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size for rem calculations */
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: var(--font-size-lg);
    line-height: var(--line-height);
    color: var(--text-body);
    background: var(--bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ========================================
   TYPOGRAPHY SYSTEM
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

h1 { 
    font-size: var(--font-size-xxxl);
    margin-bottom: var(--spacing-lg);
}
h2 { 
    font-size: var(--font-size-xxl);
    margin-bottom: var(--spacing-lg);
}
h3 { 
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}
h4 { 
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}
h5 { 
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-sm);
}
h6 { 
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
}

/* ========================================
   GLOBAL HEADING COLOR OVERRIDES
   ======================================== */
/* Force ALL headings to be white with consistent blue backgrounds */
h1, h2, h3, h4, h5, h6,
.card-header h3, .card-header h4, .card-header h5, .card-header h6,
.section-title, .page-title, .main-title,
.navbar-brand h1, .navbar-brand h2, .navbar-brand h3,
.footer h3, .footer h4, .footer h5, .footer h6 {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    padding: 8px 16px;
    border-radius: 8px;
    margin: 8px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
    display: inline-block;
    position: relative;
}

/* Ensure headings maintain their font sizes */
h1 { font-size: var(--font-size-xxxl); }
h2 { font-size: var(--font-size-xxl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

/* Special styling for navbar brand heading */
.navbar-brand h1 {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    color: var(--text-white) !important;
    padding: 8px 16px;
    border-radius: 8px;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.navbar-brand h1 .fa-clinic-medical {
    color: var(--theme-light) !important;
    margin-right: 8px;
}

.navbar-brand h1 small {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-left: 8px;
    font-weight: 400;
    color: var(--theme-light) !important;
}

/* ========================================
   TYPOGRAPHY - RESTORED STYLES
   ======================================== */
p {
    font-size: var(--font-size-lg);
    line-height: var(--line-height);
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    text-align: justify;
    text-justify: inter-word;
}

/* Enhanced list readability */
ul, ol {
    font-size: var(--font-size-lg);
    line-height: var(--line-height);
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

li {
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height);
}

/* Enhanced link readability */
a {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-normal);
    outline: none;
}

a:hover,
a:focus {
    color: var(--theme-accent);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

/* Enhanced small text readability */
small, .small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height);
}

/* Enhanced strong and bold text */
strong, b {
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
}

/* Enhanced emphasis text */
em, i {
    font-style: italic;
    color: var(--text-primary);
}

.navbar-brand .fa-clinic-medical {
    color: var(--theme-primary);
    margin-right: var(--spacing-sm);
}

/* Navbar Toggler */
.navbar-toggler {
    border: 2px solid var(--theme-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xs);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Navbar Navigation */
.navbar-nav .nav-link {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: all var(--transition-normal);
    position: relative;
    min-height: 44px; /* Accessibility: minimum touch target size */
    display: flex;
    align-items: center;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--theme-primary);
    transform: translateY(-1px);
}

.navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

.navbar-nav .nav-link.bg-primary {
    background-color: var(--theme-primary) !important;
    color: var(--text-white) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.navbar-nav .nav-link.bg-primary:hover {
    background-color: var(--theme-secondary) !important;
    color: var(--text-white) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Navigation Button Styles */
.nav-btn {
    color: var(--text-white) !important;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--spacing-sm) var(--spacing-lg);
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    font-weight: var(--font-weight-medium);
    min-height: 44px;
    line-height: 1.5;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.nav-btn:focus {
    outline: 2px solid var(--text-white);
    outline-offset: 2px;
}

/* Navigation Button - Red Theme Only */
.nav-btn {
    background-color: var(--theme-primary) !important;
    color: var(--text-white) !important;
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--spacing-sm) var(--spacing-lg);
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    font-weight: var(--font-weight-medium);
    min-height: 44px;
    line-height: 1.5;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-btn:hover {
    background-color: var(--theme-secondary) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.nav-btn:focus {
    outline: 2px solid var(--text-white);
    outline-offset: 2px;
}

/* ========================================
   TOPBAR STYLES
   ======================================== */
.topbar {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
}

.topbar .text-body {
    color: var(--text-secondary) !important;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.topbar .text-body:hover {
    color: var(--theme-primary) !important;
}

/* ========================================
   CARD SYSTEM
   ======================================== */
.card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-light);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-body {
    font-size: var(--font-size-lg);
    line-height: var(--line-height);
    padding: var(--spacing-lg);
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
}

.card-text {
    font-size: var(--font-size-lg);
    line-height: var(--line-height);
    margin-bottom: var(--spacing-md);
}

/* ========================================
   COMPONENT ENHANCEMENTS
   ======================================== */
/* Badge readability improvements */
.badge {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-pill);
}

/* Alert readability improvements */
.alert {
    font-size: var(--font-size-lg);
    line-height: var(--line-height);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: none;
}

.alert-heading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

/* ========================================
   INDEX PAGE SPECIFIC STYLES
   ======================================== */

/* Statistics Dashboard */
.statistics-dashboard {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: var(--spacing-xxl) 0;
}

.section-heading {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    position: relative;
    color: var(--text-primary);
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--theme-primary);
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    margin-bottom: var(--spacing-lg);
}

/* Stat Cards */
.stat-card {
    background: var(--bg-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    border: 1px solid var(--border-light);
    height: 100%;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    color: var(--theme-primary);
    margin-bottom: var(--spacing-md);
}

.stat-number {
    font-size: var(--font-size-xxxl);
    font-weight: var(--font-weight-bold);
    color: var(--theme-primary);
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

.stat-progress {
    margin-top: var(--spacing-md);
}

/* Achievement Cards */
.achievement-card {
    background: var(--bg-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    transition: all var(--transition-normal);
    height: 100%;
}

.achievement-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.achievement-icon {
    color: var(--theme-primary);
}

/* Health Tools Section */
.health-tools-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: var(--spacing-xl) 0;
}

/* Tool Cards */
.tool-card {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    border: 1px solid var(--border-light);
    text-decoration: none;
    color: var(--text-primary);
    height: 100%;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: var(--text-primary);
}

.tool-card i {
    color: var(--theme-primary);
    margin-bottom: var(--spacing-sm);
}

.tool-card h6 {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

.tool-card small {
    color: var(--text-secondary);
}

/* Theme-specific classes */
.text-theme-primary {
    color: var(--theme-primary) !important;
}

.bg-theme-primary {
    background-color: var(--theme-primary) !important;
}

.card-theme {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

/* Color utility classes */
.text-primary { color: var(--theme-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-info { color: var(--color-info) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-light { color: var(--text-light) !important; }
.text-dark { color: var(--text-dark) !important; }
.text-white { color: var(--text-white) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-primary { background-color: var(--theme-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-light { background-color: var(--bg-light) !important; }
.bg-dark { background-color: var(--bg-dark) !important; }

/* Progress bars */
.progress {
    height: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.progress-bar {
    background: var(--theme-primary);
    transition: width var(--transition-normal);
}

.progress-bar.bg-theme-primary {
    background-color: var(--theme-primary) !important;
}

/* Floating Action Button */
/* ========================================
   FLOATING ACTION BUTTON - ENHANCED
   ======================================== */
.floating-action-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: var(--text-white);
    border: none;
    border-radius: 50%;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.floating-action-btn:hover {
    transform: scale(1.1) rotate(180deg);
    box-shadow: 0 12px 35px rgba(255, 107, 53, 0.6);
    background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
}

.floating-action-btn:focus {
    outline: 3px solid var(--theme-light);
    outline-offset: 2px;
}

/* Quick Actions Menu */
.quick-actions-menu {
    position: fixed;
    bottom: 100px;
    right: 30px;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-md);
    z-index: var(--z-fixed);
    border: 1px solid var(--border-light);
    min-width: 120px;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.quick-action-item:last-child {
    margin-bottom: 0;
}

.quick-action-item:hover {
    background: var(--theme-primary);
    color: var(--text-white);
    transform: translateX(5px);
}

/* Tool card hover base class */
.tool-card-hover {
    transition: all var(--transition-normal);
}

/* Enhanced tool card hover effects */
.tool-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Achievement card enhancements */
.achievement-card {
    transition: all var(--transition-normal);
}

.achievement-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Statistics animation */
.stat-card {
    transition: all var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* ========================================
   HERO BANNER SYSTEM
   ======================================== */

/* ========================================
   HERO SECTION - ENHANCED STYLES WITH BACKGROUND IMAGE
   ======================================== */
.hero-banner {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    background-image: url('../img/hero.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-white);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.4) 0%, rgba(30, 64, 175, 0.5) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--text-white) !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
    position: relative;
}

.hero-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #ffffff 0%, #dbeafe 100%);
    border-radius: 2px;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--text-white) !important;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-features {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.hero-feature {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 12px 20px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.hero-feature:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.hero-feature i {
    font-size: 1.2rem;
    margin-right: 8px;
    color: var(--theme-light) !important;
}

.hero-feature span {
    font-weight: 500;
    color: var(--text-white) !important;
}

.hero-buttons .btn {
    padding: 15px 30px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-buttons .btn-theme-primary {
    background: var(--text-white);
    color: var(--theme-primary);
    border: 2px solid var(--text-white);
}

.hero-buttons .btn-theme-primary:hover {
    background: transparent;
    color: var(--text-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.hero-buttons .btn-outline-light {
    background: transparent;
    color: var(--text-white);
    border: 2px solid var(--text-white);
}

.hero-buttons .btn-outline-light:hover {
    background: var(--text-white);
    color: var(--theme-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Responsive Hero */
@media (max-width: 768px) {
    .hero-banner {
        padding: 80px 0;
        min-height: 70vh;
        background-position: center center;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .hero-features {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-buttons .btn {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }
}

@media (max-width: 480px) {
    .hero-banner {
        padding: 60px 0;
        min-height: 60vh;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
}

/* ========================================
   HERO BANNER RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 991.98px) {
    .hero-banner {
        min-height: 60vh;
        padding: var(--spacing-xl) 0;
    }
    
    .hero-content {
        padding: 0 var(--spacing-lg);
        text-align: left;
    }
    
    .hero-title {
        font-size: var(--font-size-xxl);
        text-align: left;
        color: var(--text-primary);
    }
    
    .hero-subtitle {
        text-align: left;
        color: var(--text-primary);
    }
    
    .hero-features {
        align-items: flex-start;
    }
    
    .hero-feature {
        max-width: 100%;
        justify-content: flex-start;
        color: var(--text-primary);
    }
    
    .hero-feature span {
        color: var(--text-primary);
    }
    
    .hero-buttons {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .hero-banner {
        min-height: 50vh;
        padding: var(--spacing-lg) 0;
    }
    
    .hero-title {
        font-size: var(--font-size-xl);
        color: var(--text-primary);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-lg);
        color: var(--text-primary);
    }
    
    .hero-feature {
        color: var(--text-primary);
    }
    
    .hero-feature span {
        color: var(--text-primary);
    }
    
    .hero-buttons .btn {
        min-width: 140px;
        padding: var(--spacing-sm) var(--spacing-lg);
    }
}
/* Removed conflicting hero-image rules - using background image instead */

/* Responsive Hero Banner */
@media (max-width: 991.98px) {
    .hero-content {
        padding-right: 0;
        text-align: left;
        margin-bottom: var(--spacing-xl);
    }
    
    .hero-title,
    .hero-subtitle {
        text-align: left;
    }
    
    .hero-features {
        align-items: flex-start;
    }
    
    .hero-feature {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-banner {
        min-height: 70vh;
    }
    
    .hero-title {
        font-size: var(--font-size-xxl);
        margin-bottom: var(--spacing-md);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-lg);
    }
    
    .hero-features {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .hero-feature {
        width: 100%;
        max-width: 300px;
        justify-content: flex-start;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
    
    .hero-image {
        padding: var(--spacing-md);
    }
}

@media (max-width: 576px) {
    .hero-banner {
        min-height: 60vh;
    }
    
    .hero-title {
        font-size: var(--font-size-xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-base);
    }
    
    .hero-overlay {
        padding: var(--spacing-xl) 0;
    }
    
    .hero-image {
        padding: var(--spacing-sm);
    }
}

/* Hero Banner Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title,
.hero-subtitle,
.hero-features,
.hero-buttons {
    animation: fadeInUp 0.8s ease-out forwards;
}

.hero-subtitle {
    animation-delay: 0.2s;
}

.hero-features {
    animation-delay: 0.4s;
}

.hero-buttons {
    animation-delay: 0.6s;
}

/* ========================================
   FOOTER THEME SYSTEM
   ======================================== */

/* Base footer styles */
#mainFooter {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

#mainFooter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

/* Footer theme classes */
.footer-theme {
    background: var(--gradient-primary, #198754);
    transition: background 0.3s ease;
    position: relative;
    z-index: 1;
}

.footer-bottom-theme {
    background: var(--gradient-primary, #198754);
    transition: background 0.3s ease;
    position: relative;
    z-index: 2;
    padding: 20px 0;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-theme p {
    margin: 0;
    padding: 0;
}

/* Theme-specific footer backgrounds */
#mainFooter.theme-green .footer-theme,
#mainFooter.theme-green .footer-bottom-theme {
    background: linear-gradient(135deg, #198754 0%, #146c43 100%) !important;
}

#mainFooter.theme-blue .footer-theme,
#mainFooter.theme-blue .footer-bottom-theme {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
}

#mainFooter.theme-red .footer-theme,
#mainFooter.theme-red .footer-bottom-theme {
    background: linear-gradient(135deg, #dc3545 0%, #a71e2a 100%) !important;
}

#mainFooter.theme-purple .footer-theme,
#mainFooter.theme-purple .footer-bottom-theme {
    background: linear-gradient(135deg, #6f42c1 0%, #4c1d95 100%) !important;
}

#mainFooter.theme-orange .footer-theme,
#mainFooter.theme-orange .footer-bottom-theme {
    background: linear-gradient(135deg, #fd7e14 0%, #e8590c 100%) !important;
}

#mainFooter.theme-pink .footer-theme,
#mainFooter.theme-pink .footer-bottom-theme {
    background: linear-gradient(135deg, #e83e8c 0%, #c2255c 100%) !important;
}

#mainFooter.theme-teal .footer-theme,
#mainFooter.theme-teal .footer-bottom-theme {
    background: linear-gradient(135deg, #20c997 0%, #13795c 100%) !important;
}

#mainFooter.theme-brown .footer-theme,
#mainFooter.theme-brown .footer-bottom-theme {
    background: linear-gradient(135deg, #8b4513 0%, #4a2c0a 100%) !important;
}

#mainFooter.theme-indigo .footer-theme,
#mainFooter.theme-indigo .footer-bottom-theme {
    background: linear-gradient(135deg, #6610f2 0%, #3d0b8f 100%) !important;
}

#mainFooter.theme-dark .footer-theme,
#mainFooter.theme-dark .footer-bottom-theme {
    background: linear-gradient(135deg, #212529 0%, #0f1113 100%) !important;
}

#mainFooter.theme-gray .footer-theme,
#mainFooter.theme-gray .footer-bottom-theme {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
}

#mainFooter.theme-black .footer-theme,
#mainFooter.theme-black .footer-bottom-theme {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
}

/* Footer content styling */
.footer-heading {
    color: rgb(255, 255, 255) !important;
    font-weight: 800 !important;
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(255, 255, 255, 0.3) !important;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.4);
}

.footer-heading:hover::after {
    width: 80px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.footer-text {
    color: rgb(255, 255, 255) !important;
    font-weight: 600 !important;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.6) !important;
    line-height: 1.7;
    margin-bottom: 12px;
    letter-spacing: 0.2px;
}

.footer-link {
    color: rgb(255, 255, 255) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.6) !important;
    display: inline-block;
    padding: 8px 0;
    position: relative;
    letter-spacing: 0.1px;
}

.footer-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 100%);
    transition: width 0.3s ease;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.4);
}

.footer-link:hover {
    color: rgb(255, 255, 255) !important;
    text-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.9),
        0 4px 12px rgba(0, 0, 0, 0.7),
        0 0 25px rgba(255, 255, 255, 0.5) !important;
    transform: translateX(8px) !important;
}

.footer-link:hover::before {
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%);
}

/* Footer separator */
.footer-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0;
    width: 100%;
}

/* Footer links container */
.footer-links {
    text-align: center;
}

.footer-links .footer-link:first-child {
    margin-left: 0;
}

.footer-links .footer-link:last-child {
    margin-right: 0;
}

/* Contact information styling */
.footer-contact-info {
    color: #ffd700 !important; /* Golden yellow color */
    font-weight: 700 !important;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(255, 215, 0, 0.4) !important;
    line-height: 1.8;
    margin-bottom: 15px;
    letter-spacing: 0.3px;
}

.footer-contact-info i {
    color: #ffd700 !important; /* Golden yellow for icons */
    margin-right: 10px;
    font-size: 1.1em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.footer-contact-info:hover {
    color: #ffed4e !important; /* Brighter yellow on hover */
    text-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.9),
        0 4px 12px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(255, 215, 0, 0.6) !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Spacing Utilities */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--spacing-xs) !important; }
.m-2 { margin: var(--spacing-sm) !important; }
.m-3 { margin: var(--spacing-md) !important; }
.m-4 { margin: var(--spacing-lg) !important; }
.m-5 { margin: var(--spacing-xl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-xs) !important; }
.p-2 { padding: var(--spacing-sm) !important; }
.p-3 { padding: var(--spacing-md) !important; }
.p-4 { padding: var(--spacing-lg) !important; }
.p-5 { padding: var(--spacing-xl) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--spacing-xs) !important; }
.pt-2 { padding-top: var(--spacing-sm) !important; }
.pt-3 { padding-top: var(--spacing-md) !important; }
.pt-4 { padding-top: var(--spacing-lg) !important; }
.pt-5 { padding-top: var(--spacing-xl) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--spacing-xs) !important; }
.pb-2 { padding-bottom: var(--spacing-sm) !important; }
.pb-3 { padding-bottom: var(--spacing-md) !important; }
.pb-4 { padding-bottom: var(--spacing-lg) !important; }
.pb-5 { padding-bottom: var(--spacing-xl) !important; }

/* Text Utilities */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

.font-weight-light { font-weight: var(--font-weight-light) !important; }
.font-weight-normal { font-weight: var(--font-weight-normal) !important; }
.font-weight-medium { font-weight: var(--font-weight-medium) !important; }
.font-weight-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-weight-bold { font-weight: var(--font-weight-bold) !important; }
.font-weight-extrabold { font-weight: var(--font-weight-extrabold) !important; }

.font-size-xs { font-size: var(--font-size-xs) !important; }
.font-size-sm { font-size: var(--font-size-sm) !important; }
.font-size-md { font-size: var(--font-size-md) !important; }
.font-size-lg { font-size: var(--font-size-lg) !important; }
.font-size-xl { font-size: var(--font-size-xl) !important; }
.font-size-xxl { font-size: var(--font-size-xxl) !important; }
.font-size-xxxl { font-size: var(--font-size-xxxl) !important; }

/* Display Utilities */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* Flexbox Utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

/* Position Utilities */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* Border Utilities */
.border { border: 1px solid var(--border-color) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--border-color) !important; }
.border-left { border-left: 1px solid var(--border-color) !important; }
.border-right { border-right: 1px solid var(--border-color) !important; }

.border-primary { border-color: var(--border-primary) !important; }
.border-light { border-color: var(--border-light) !important; }

.rounded { border-radius: var(--radius-md) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-pill { border-radius: var(--radius-pill) !important; }
.rounded-circle { border-radius: 50% !important; }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-none { box-shadow: none !important; }

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */
/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: var(--z-fixed);
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    background: var(--color-warning);
    color: var(--text-dark);
    padding: var(--spacing-sm);
    text-decoration: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --text-secondary: #000000;
        --text-body: #000000;
    }
}

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

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Extra Small devices (phones, 576px and down) */
@media (max-width: 576px) {
    :root {
        --section-padding: 3rem 0;
        --container-padding: 1rem;
    }
    
    h1 { font-size: var(--font-size-xxl); }
    h2 { font-size: var(--font-size-xl); }
    h3 { font-size: var(--font-size-lg); }
    
    .btn {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }
    
    .navbar-brand h1 {
        font-size: var(--font-size-lg);
    }
    
    .statistics-dashboard {
        padding: var(--spacing-lg) 0;
    }
    
    .floating-action-btn {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .quick-actions-menu {
        bottom: 80px;
        right: 20px;
        min-width: 100px;
    }
    
    .footer-heading {
        font-size: 18px;
        padding: 8px 12px;
    }
    
    .footer-text p {
        font-size: 14px;
    }
    
.footer-bottom-theme p {
        font-size: 14px;
        color: #ffffff !important; /* White text for better visibility */
        font-weight: 600 !important;
        text-shadow: 
            0 1px 3px rgba(0, 0, 0, 0.9),
            0 2px 6px rgba(0, 0, 0, 0.6) !important;
        letter-spacing: 0.2px;
        margin: 0;
        padding: 15px 0;
    }

/* Copyright text specific styling */
.footer-copyright {
    color: #ffffff !important; /* White text */
    font-weight: 700 !important;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(255, 255, 255, 0.3) !important;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-align: center;
    margin: 0;
    padding: 15px 0;
    transition: all 0.3s ease;
    line-height: 1.4;
    position: relative;
    z-index: 3;
}

/* Special styling for "Kamboh eClinic" text to make it yellow - ULTRA STRONG */
.footer-copyright .brand-highlight {
    color: #ffc107 !important; /* Bright yellow */
    font-weight: 800 !important;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(255, 193, 7, 0.5) !important;
    transition: all 0.3s ease;
    position: relative;
    z-index: 4;
    display: inline-block;
}

/* Force yellow color even if overridden by JavaScript */
.footer-copyright .brand-highlight,
.footer-copyright .brand-highlight *,
.footer-copyright span.brand-highlight {
    color: #ffc107 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

/* Hover effects */
.footer-copyright:hover {
    color: #f8f9fa !important; /* Slightly brighter on hover */
    text-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.9),
        0 4px 12px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-1px);
}

.footer-copyright:hover .brand-highlight {
    color: #ffdb4d !important; /* Brighter yellow on hover */
    text-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.9),
        0 4px 12px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(255, 193, 7, 0.7) !important;
}

/* Additional specificity to override any JavaScript changes */
#mainFooter .footer-bottom-theme .footer-copyright .brand-highlight {
    color: #ffc107 !important;
    font-weight: 800 !important;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(255, 193, 7, 0.5) !important;
}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.btn {
        width: auto;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .navbar-brand h1 {
        font-size: var(--font-size-xl);
    }
    
    .statistics-dashboard {
        padding: var(--spacing-xl) 0;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .navbar-nav .nav-link.bg-primary {
        margin: var(--spacing-xs) 0;
        text-align: center;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
} 

/* ========================================
   RESPONSIVE NAVBAR STYLES
   ======================================== */

/* Mobile First - Stack buttons vertically */
@media (max-width: 991.98px) {
    .navbar-nav {
        flex-direction: column !important;
        width: 100%;
        gap: var(--spacing-sm);
    }
    
    .nav-btn {
        width: 100%;
        margin: var(--spacing-xs) 0;
        text-align: center;
    }
}

/* Desktop - Single line horizontal layout */
@media (min-width: 992px) {
    .navbar-nav {
        flex-direction: row !important;
        gap: var(--spacing-sm);
    }
    
    .nav-btn {
        margin: 0;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Ensure navbar doesn't wrap */
    .navbar-collapse {
        flex-grow: 0;
    }
}

/* Extra large screens - optimize spacing */
@media (min-width: 1200px) {
    .navbar-nav {
        gap: var(--spacing-md);
    }
    
    .nav-btn {
        padding: var(--spacing-sm) var(--spacing-xl);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    .btn,
    .navbar,
    .footer,
    .floating-action-btn,
    .quick-actions-menu {
        display: none !important;
    }
    
.card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .statistics-dashboard {
        background: white !important;
    }
}

/* ========================================
   NAVBAR - ENHANCED STYLES
   ======================================== */
.navbar {
    background: var(--bg-white) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
    border-bottom: 2px solid var(--theme-light);
}

.navbar-nav .nav-btn {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    color: var(--text-white) !important;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    margin: 0 5px;
}

.navbar-nav .nav-btn:hover {
    background: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-dark) 100%);
    color: var(--text-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}

.navbar-nav .btn-theme-primary {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
}

.navbar-nav .btn-theme-secondary {
    background: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-dark) 100%);
}

.navbar-nav .btn-theme-accent {
    background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-primary) 100%);
}

.navbar-toggler {
    border: 2px solid var(--theme-primary);
    color: var(--theme-primary);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

/* ========================================
   TOPBAR - ENHANCED STYLES
   ======================================== */
.container-fluid.py-2.border-bottom {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    color: var(--text-white);
    border-bottom: 2px solid var(--theme-light) !important;
}

.container-fluid.py-2.border-bottom a {
    color: var(--text-white) !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.container-fluid.py-2.border-bottom a:hover {
    color: var(--theme-light) !important;
    transform: translateY(-1px);
}

.container-fluid.py-2.border-bottom .bi {
    color: var(--theme-light) !important;
}

.container-fluid.py-2.border-bottom .fab {
    color: var(--theme-light) !important;
    transition: all 0.3s ease;
}

.container-fluid.py-2.border-bottom .fab:hover {
    color: var(--text-white) !important;
    transform: scale(1.2);
}

.container-fluid.py-2.border-bottom span {
    color: var(--theme-light) !important;
}

/* ========================================
   END OF MASTER CSS FILE
   ======================================== */