/* ========================================
   MOBILE WHITE MODE OVERRIDE 
   Only applies to screens ≤ 768px
   Desktop remains dark mode unchanged
   ======================================== */

@media (max-width: 768px) {
    
    /* ========= Root Variables Override ========= */
    :root {
        /* Light Mode Color Palette */
        --mobile-bg: #f7f8fa;
        --mobile-surface: #ffffff;
        --mobile-surface-2: #f1f5f9;
        --mobile-text: #0b1220;
        --mobile-text-soft: #4a5568;
        --mobile-text-mute: #6b7280;
        --mobile-border: #e5e7eb;
        --mobile-shadow: 0 10px 30px rgba(17,24,39,.08);
        --mobile-shadow-md: 0 4px 12px rgba(17,24,39,.1);
        --mobile-shadow-lg: 0 8px 24px rgba(17,24,39,.12);
        
        /* Accent Colors */
        --mobile-accent: #3E88F9;
        --mobile-accent-2: #2563eb;
        --mobile-accent-soft: rgba(62,136,249,.10);
        --mobile-success: #22c55e;
        --mobile-success-soft: rgba(34,197,94,.10);
        
        /* Gradients */
        --mobile-primary-gradient: linear-gradient(135deg, #3E88F9 0%, #2563eb 100%);
        --mobile-text-gradient: linear-gradient(135deg, #0b1220 0%, #475569 100%);
        --mobile-bg-gradient: linear-gradient(135deg, rgba(62,136,249,.08) 0%, transparent 50%, rgba(34,197,94,.06) 100%);
        --primary-gradient-start: #3E88F9;
        --primary-gradient-end: #2563eb;
    }

    /* ========= Body & Base Styles ========= */
    body {
        background: var(--mobile-bg) !important;
        color: var(--mobile-text) !important;
    }
    
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background: 
            radial-gradient(1200px 600px at 15% 20%, var(--mobile-accent-soft), transparent 60%),
            radial-gradient(1000px 500px at 85% 80%, var(--mobile-success-soft), transparent 60%);
        pointer-events: none;
        z-index: -1;
    }

    /* ========= Sidebar Light Mode ========= */
    .sidebar {
        background: var(--mobile-surface) !important;
        border-right: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }

    /* Logo Text */
    .logo-text {
        background: var(--mobile-text-gradient) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    /* Navigation Items */
    .nav-item {
        color: var(--mobile-text) !important;
    }

    .nav-item:hover {
        background: var(--mobile-accent-soft) !important;
    }

    .nav-item.active {
        background: var(--mobile-accent-soft) !important;
        color: var(--mobile-accent) !important;
    }

    .nav-item.active::before {
        background: var(--mobile-accent) !important;
    }

    .nav-item h3 {
        color: var(--mobile-text) !important;
    }

    .nav-item.active h3 {
        color: var(--mobile-accent) !important;
    }

    .nav-icon-svg {
        filter: brightness(0) saturate(100%) invert(15%) sepia(8%) saturate(1574%) hue-rotate(184deg) brightness(96%) contrast(93%) !important;
    }

    .nav-item.active .nav-icon-svg {
        filter: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(2701%) hue-rotate(219deg) brightness(99%) contrast(96%) !important;
    }

    /* Section Titles */
    .nav-section-title {
        color: var(--mobile-text-mute) !important;
    }

    /* ========= Profile & Login Sections ========= */
    .login-section, .profile-section {
        background: var(--mobile-surface) !important;
        border-top: 1px solid var(--mobile-border) !important;
    }

    .login-form input {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }

    .login-form input:focus {
        border-color: var(--mobile-accent) !important;
        box-shadow: 0 0 0 3px var(--mobile-accent-soft) !important;
    }

    .login-form button {
        background: var(--mobile-primary-gradient) !important;
        box-shadow: var(--mobile-shadow-md) !important;
    }

    .login-form button:hover {
        box-shadow: var(--mobile-shadow-lg) !important;
    }

    .register-link a {
        color: var(--mobile-accent) !important;
    }

    /* Profile Styles */
    .profile-toggle:hover {
        background: var(--mobile-accent-soft) !important;
    }

    .profile-name {
        color: var(--mobile-text) !important;
    }

    .profile-plan {
        color: var(--mobile-text-mute) !important;
    }

    .profile-plan.pro {
        color: var(--mobile-accent) !important;
    }

    .dropdown-arrow {
        color: var(--mobile-text-mute) !important;
    }

    .profile-dropdown-menu {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow-lg) !important;
    }

    .dropdown-header {
        border-bottom: 1px solid var(--mobile-border) !important;
    }

    .dropdown-email {
        color: var(--mobile-text-mute) !important;
    }

    .dropdown-item {
        color: var(--mobile-text) !important;
    }

    .dropdown-item:hover {
        background: var(--mobile-accent-soft) !important;
    }

    .dropdown-divider {
        background: var(--mobile-border) !important;
    }

    .legal-links-footer a {
        color: var(--mobile-text-mute) !important;
    }

    .legal-links-footer a:hover {
        color: var(--mobile-text-soft) !important;
    }

    /* ========= Main Content ========= */
    .main-content {
        background: var(--mobile-bg) !important;
    }

    .tab-content {
        background: transparent !important;
        background-image: none !important;
        color: var(--mobile-text) !important;
    }

    /* Tab Headers */
    .tab-header h1 {
        background: black !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    /* ========= Cards ========= */
    .card {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
        backdrop-filter: none !important;
    }

    .card h2 {
        color: var(--mobile-text) !important;
        position: relative;
        z-index: 1;
    }

    /* ========= Forms ========= */
    .form-group label {
        color: var(--mobile-text) !important;
    }

    .form-control, .enhanced-input, .enhanced-select, .enhanced-textarea {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }

    .form-control:focus, .enhanced-input:focus, .enhanced-select:focus, .enhanced-textarea:focus {
        border-color: var(--mobile-accent) !important;
        box-shadow: 0 0 0 3px var(--mobile-accent-soft) !important;
        background: var(--mobile-surface) !important;
    }

    /* ========= Buttons ========= */
    .btn-primary, .primary-submit-btn, .enhanced-submit-btn {
        background: var(--primary-gradient-start) !important;
        border: none !important;
        box-shadow: var(--mobile-shadow-md) !important;
        color: white !important;
    }

    .btn-primary:hover, .primary-submit-btn:hover, .enhanced-submit-btn:hover {
        box-shadow: 0 8px 24px rgba(62,136,249,.25) !important;
    }

    .btn-secondary {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }

    .btn-secondary:hover {
        background: var(--mobile-surface) !important;
        border-color: var(--mobile-accent) !important;
        box-shadow: var(--mobile-shadow-md) !important;
    }
    
    .diary-button span {
        color: white !important;
    }

    /* ========= Login Prompt ========= */
    .login-prompt {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
        backdrop-filter: none !important;
    }

    .login-prompt h2 {
        color: var(--mobile-text) !important;
    }

    .login-prompt p {
        color: var(--mobile-text-soft) !important;
    }

    .login-prompt-features {
        background: var(--mobile-accent-soft) !important;
        border: 1px solid rgba(62,136,249,.2) !important;
    }

    .login-prompt-features h3 {
        color: var(--mobile-accent) !important;
    }

    .login-prompt-features li {
        color: var(--mobile-text) !important;
    }
    
    .login-prompt-video {
        box-shadow: none;
    }

    /* ========= Enhanced Components ========= */
    .peptide-log-card, .enhanced-schedule-card, .health-metrics-dashboard .health-metric-card {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }

    .peptide-log-card:hover, .health-metric-card:hover {
        box-shadow: var(--mobile-shadow-lg) !important;
        border-color: rgba(62,136,249,.2) !important;
    }

    /* Card Headers */
    .card-header, .schedule-card-header {
        background: var(--mobile-surface-2) !important;
        border-bottom: 1px solid var(--mobile-border) !important;
    }

    .header-text h2, .schedule-header-text h2, .metric-card-title h3 {
        color: black !important;
    }

    .header-text p, .schedule-subtitle, .metric-card-count {
        color: var(--mobile-text-mute) !important;
    }

    /* ========= Tables ========= */
    .enhanced-table-container {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
    }

    .enhanced-peptide-table th {
        background: var(--mobile-surface-2) !important;
        border-bottom: 1px solid var(--mobile-border) !important;
        color: var(--mobile-text-soft) !important;
    }

    .enhanced-peptide-table td {
        border-bottom: 1px solid rgba(229,231,235,.5) !important;
        color: var(--mobile-text) !important;
    }

    .enhanced-peptide-table tbody tr:hover {
        background: var(--mobile-accent-soft) !important;
    }

    /* Table Filters */
    .table-filters {
        background: var(--mobile-surface-2) !important;
        border-bottom: 1px solid var(--mobile-border) !important;
    }
    

    /* ========= Charts ========= */
    .chart-container-enhanced {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }

    /* ========= Bottom Navigation ========= */
    .mobile-bottom-nav {
        background: var(--mobile-surface) !important;
        border-top: 1px solid var(--mobile-border) !important;
        box-shadow: 0 -2px 10px rgba(17,24,39,.1) !important;
    }

    .bottom-nav-item {
        color: var(--mobile-text-mute) !important;
    }

    .bottom-nav-item.active, .bottom-nav-item:hover {
        color: var(--mobile-accent) !important;
    }

    /* ========= Special Components ========= */
    
    /* Syringe Visualization */
    .syringe-visualization {
        background: none;
        border: none;
        border-radius: none;
    }
    
    .syringe-title {
        color: black;
    }
    
    .result-text {
        color: black;
    }

    .scale {
        background: #F5F5F5 !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: none;
        border-radius: 0px;
        height: 65px;
        border: 1px solid #d4d4d4;
    }
    

    .scale-fill {
        background: black !important;
    }

    .scale-marker {
        border-color: #64748b !important;
    }
    
    .scale-marker.long {
        height: 16px;
        opacity: 1;
        width: 2px;
        background-color: #404040;
    }
    

    .scale-label {
        color: #404040 !important;
        position: absolute;
        bottom: -34px;
        transform: translateX(-50%);
        font-size: 11px;
        text-align: center;
        font-weight: 400;
    }

    /* Results */
    .result-value {
        color: var(--mobile-text) !important;
    }

    .result-label {
        color: var(--mobile-text-soft) !important;
    }

    .instructions-title {
        color: var(--mobile-text) !important;
    }

    .instructions p {
        color: var(--mobile-text-soft) !important;
    }

    /* Button Groups */
    .vial-btn, .water-btn, .dose-btn, .frequency-btn {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }

    .vial-btn:hover, .water-btn:hover, .dose-btn:hover, .frequency-btn:hover {
        background: var(--mobile-surface) !important;
        border-color: var(--mobile-accent) !important;
        box-shadow: var(--mobile-shadow-md) !important;
    }

    .vial-btn.active, .water-btn.active, .dose-btn.active, .frequency-btn.active {
        background: var(--mobile-accent) !important;
        color: white !important;
        border-color: var(--mobile-accent) !important;
        box-shadow: var(--mobile-shadow-md) !important;
    }

    /* Syringe Buttons */
    .syringe-button {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
    }

    .syringe-button:hover, .syringe-button.active {
        border-color: var(--mobile-accent) !important;
        background: var(--mobile-surface) !important;
        box-shadow: var(--mobile-shadow-md) !important;
    }

    .syringe-label {
        color: var(--mobile-text) !important;
    }

    /* Health Metrics */
    .metric-current-value .metric-value-number {
        color: var(--mobile-text) !important;
    }

    .metric-value-unit, .metric-trend-label {
        color: var(--mobile-text-mute) !important;
    }

    /* Input Labels */
    .input-label, .enhanced-label {
        color: var(--mobile-text) !important;
    }

    .input-label .material-symbols-outlined {
        color: var(--mobile-accent) !important;
    }

    /* Input Units */
    .input-unit {
        color: var(--mobile-text-mute) !important;
    }

    /* Medical Disclaimer */
    .medical-disclaimer {
        background: #fef7f7 !important;
        border: 0.5px solid red !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1) !important;
    }
    
    .medical-disclaimer .disclaimer-title {
        color: #dc2626 !important;
        font-weight: 700 !important;
    }
    
    .medical-disclaimer p {
        color: #7f1d1d !important;
    }

    /* Success Messages */
    .enhanced-success-message {
        background: linear-gradient(135deg, var(--mobile-success), #16a34a) !important;
        box-shadow: 0 8px 32px rgba(34,197,94,0.3) !important;
    }
}

/* ========================================
   ADDITIONAL MOBILE REFINEMENTS
   ======================================== */

@media (max-width: 768px) {
    
    /* Ensure proper text contrast */
    * {
        color: inherit !important;
    }
    
    /* Placeholder text */
    ::placeholder {
        color: var(--mobile-text-mute) !important;
        opacity: 0.8 !important;
    }
    
    /* Selection colors */
    ::selection {
        background: var(--mobile-accent-soft) !important;
        color: var(--mobile-accent) !important;
    }

}

/* ========================================
   MOBILE SPECIFIC ENHANCEMENTS
   ======================================== */

@media (max-width: 480px) {
    
    /* Extra small screens - maintain readability */
    body {
        background: var(--mobile-bg) !important;
    }
    
    .card {
        box-shadow: 0 4px 12px rgba(17,24,39,.06) !important;
    }
    
    /* Ensure touch targets are accessible */
    button, .btn-primary, .btn-secondary, .form-control {
        min-height: 44px !important;
    }
}


/* ========================================
   SCHEDULE TAB MOBILE WHITE MODE
   ======================================== */

@media (max-width: 768px) {
    /* Enhanced Schedule Card */
    .enhanced-schedule-card {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }

    .enhanced-schedule-card:hover {
        border-color: rgba(62,136,249,.3) !important;
        box-shadow: var(--mobile-shadow-lg) !important;
    }

    /* Schedule Card Header */
    .schedule-card-header {
        background: var(--mobile-surface) !important;
        border-bottom: 1px solid var(--mobile-border) !important;
    }

    .schedule-card-header:hover {
        background: var(--mobile-accent-soft) !important;
    }

    .schedule-header-text h2 {
        color: var(--mobile-text) !important;
    }

    .schedule-subtitle {
        color: var(--mobile-text-mute) !important;
    }

    /* Schedule Icon */
    .schedule-icon {
        background: var(--mobile-primary-gradient) !important;
    }
    
    .schedule-icon .material-symbols-outlined {
        color: white !important;
    }
    
    
    /* Modern Toggle Button */
    .modern-toggle-btn {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
    }

    .modern-toggle-btn:hover {
        background: var(--mobile-surface-2) !important;
        border-color: var(--mobile-accent) !important;
    }

    .modern-toggle-btn .material-symbols-outlined {
        color: var(--mobile-text) !important;
    }

    /* Schedule Form Content */
    .schedule-form-content {
        background: var(--mobile-surface) !important;
    }

    /* Form Elements in Schedule */
    .schedule-form .form-group label {
        color: var(--mobile-text) !important;
    }

    .schedule-form .form-control {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }

    .schedule-form .form-control:focus {
        border-color: var(--mobile-accent) !important;
        box-shadow: 0 0 0 3px var(--mobile-accent-soft) !important;
        background: var(--mobile-surface) !important;
    }

    /* Weekday Selector */
    .weekday-option span {
        background: var(--mobile-surface-2) !important;
        border: 2px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }

    .weekday-option span:hover {
        border-color: var(--mobile-accent) !important;
        background: var(--mobile-accent-soft) !important;
    }

    .weekday-option input[type="checkbox"]:checked + span {
        border-color: var(--mobile-accent) !important;
        background: var(--mobile-primary-gradient) !important;
        color: white !important;
    }

    /* Section Headers */
    .section-header-main {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }

    .section-header-main:hover {
        border-color: rgba(62,136,249,.3) !important;
        box-shadow: var(--mobile-shadow-lg) !important;
    }

    .section-title-group h2 {
        color: var(--mobile-text) !important;
    }

    .section-description {
        color: var(--mobile-text-mute) !important;
    }

    /* Schedules Counter */
    .schedules-counter {
        background: var(--mobile-primary-gradient) !important;
        color: white !important;
    }

    /* Schedule Items */
    .modern-schedule-item {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }

    .modern-schedule-item:hover {
        border-color: var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow-lg) !important;
    }

    .schedule-item-title {
        color: var(--mobile-text) !important;
    }

    .schedule-status-badge {
        background: rgba(34,197,94,.1) !important;
        border: 1px solid rgba(34,197,94,.3) !important;
        color: var(--mobile-success) !important;
    }

    /* Schedule Details */
    .schedule-detail-modern {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
    }

    .detail-label {
        color: var(--mobile-text-mute) !important;
    }

    .detail-value {
        color: var(--mobile-text) !important;
    }

    /* Delete Button */
    
    .schedule-actions {
        padding-top: 0px;
        
    }
    .modern-delete-btn {
        background: rgba(220, 38, 38, 0.1) !important;
        border: 1px solid rgba(220, 38, 38, 0.3) !important;
        color: #dc2626 !important;
    }

    .modern-delete-btn:hover {
        background: rgba(220, 38, 38, 0.2) !important;
        border-color: rgba(220, 38, 38, 0.5) !important;
    }

    /* View Controls */
    .view-controls {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
    }

    .view-btn {
        color: var(--mobile-text-mute) !important;
    }

    .view-btn:hover {
        background: var(--mobile-surface) !important;
        color: var(--mobile-text) !important;
    }

    .view-btn.active {
        background: var(--primary-gradient-start) !important;
        color: white !important;
    }

    /* Dose Day Cards */
    .modern-dose-day {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }

    .modern-dose-day:hover {
        border-color: rgba(62,136,249,.3) !important;
        box-shadow: var(--mobile-shadow-lg) !important;
    }

    /* Dose Day Header */
    .dose-day-header-modern {
        background: var(--mobile-surface-2) !important;
        border-bottom: 1px solid var(--mobile-border) !important;
    }

    .dose-day-title {
        color: var(--mobile-text) !important;
    }

    .today-badge-modern {
        background: var(--primary-gradient-start) !important;
        color: white !important;
    }

    .dose-count-badge {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        color: var(--mobile-text-mute) !important;
    }

    /* Dose Items */
    .modern-dose-item {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
    }

    .modern-dose-item:hover {
        background: var(--mobile-surface) !important;
        border-color: var(--mobile-border) !important;
    }

    .dose-peptide-name {
        color: var(--mobile-text) !important;
    }

    .dose-amount-info {
        color: var(--mobile-text-mute) !important;
    }

    .dose-amount-value {
        color: var(--mobile-accent) !important;
    }

    /* Complete Button */
    .modern-complete-btn {
        border: 2px solid var(--mobile-border) !important;
    }

    .modern-complete-btn:hover:not(.completed):not(:disabled) {
        border-color: var(--mobile-accent) !important;
    }

    .modern-complete-btn .material-symbols-outlined {
        color: var(--mobile-text-mute) !important;
    }

    .modern-complete-btn:hover:not(.completed):not(:disabled) .material-symbols-outlined {
        color: var(--mobile-accent) !important;
    }

    .modern-complete-btn.completed {
        background: var(--mobile-success) !important;
        border-color: var(--mobile-success) !important;
    }

    /* Completed Dose Items */
    .modern-dose-item.completed {
        background: var(--mobile-success-soft) !important;
        border: 1px solid rgba(34,197,94,.3) !important;
    }

    .modern-dose-item.completed .dose-peptide-name {
        color: var(--mobile-success) !important;
    }

    .modern-dose-item.completed .dose-amount-value {
        color: #16a34a !important;
    }

    /* Calendar Container */
    .modern-calendar-container {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }

    /* Calendar Header */
    .calendar-title-modern {
        color: var(--mobile-text) !important;
    }

    .calendar-nav-btn {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }

    .calendar-nav-btn:hover {
        background: var(--mobile-surface) !important;
        border-color: var(--mobile-accent) !important;
        color: var(--mobile-accent) !important;
    }

    /* Calendar Grid */
    .modern-calendar-grid {
        background: var(--mobile-border) !important;
    }

    .modern-calendar-day-header {
        background: var(--mobile-surface-2) !important;
        color: var(--mobile-text-mute) !important;
    }

    .modern-calendar-day {
        background: var(--mobile-surface) !important;
    }

    .modern-calendar-day:hover {
        background: var(--mobile-surface-2) !important;
    }

    .modern-calendar-day.today {
        background: var(--mobile-accent-soft) !important;
        border: 2px solid var(--mobile-accent) !important;
    }

    .calendar-day-number-modern {
        color: var(--mobile-text) !important;
    }

    .calendar-dose-modern {
        background: var(--mobile-primary-gradient) !important;
    }

    /* Empty State */
    .empty-state {
        background: var(--mobile-surface-2) !important;
        border: 1px dashed var(--mobile-border) !important;
        color: var(--mobile-text-mute) !important;
    }

    .empty-state h3 {
        color: var(--mobile-text) !important;
    }
}

/* ========================================
   HEALTH METRICS TAB MOBILE WHITE MODE
   ======================================== */

@media (max-width: 768px) {
    
    /* Health Metrics Overview Cards */
    .health-metrics-overview .health-metric-card {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }
    
    .health-metrics-overview .health-metric-card:hover {
        border-color: rgba(62,136,249,.3) !important;
        box-shadow: var(--mobile-shadow-lg) !important;
    }
    
    .health-metrics-overview .health-metric-card.active {
        background: var(--mobile-primary-gradient) !important;
        border-color: var(--mobile-accent) !important;
        box-shadow: 0 8px 32px rgba(62,136,249,.25) !important;
    }
    
    /* Health Metric Card Icons */
    .metric-card-icon {
        background: var(--mobile-accent-soft) !important;
        border: 1px solid rgba(62,136,249,.2) !important;
    }
    
    .health-metric-card.active .metric-card-icon {
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }
    
    .metric-card-icon .material-symbols-outlined {
        color: var(--mobile-accent) !important;
    }
    
    .health-metric-card.active .metric-card-icon .material-symbols-outlined {
        color: white !important;
    }
    
    /* Health Metric Card Text */
    .metric-card-title h3 {
        color: var(--mobile-text) !important;
    }
    
    .health-metric-card.active .metric-card-title h3 {
        color: white !important;
    }
    
    .metric-card-count {
        color: var(--mobile-text-mute) !important;
    }
    
    .health-metric-card.active .metric-card-count {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    /* Health Metric Values */
    .metric-value-number {
        color: var(--mobile-text) !important;
    }
    
    .health-metric-card.active .metric-value-number {
        color: white !important;
    }
    
    .metric-value-unit {
        color: var(--mobile-text-mute) !important;
    }
    
    .health-metric-card.active .metric-value-unit {
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Health Metric Trends */
    .metric-change.positive {
        color: var(--mobile-success) !important;
    }
    
    .metric-change.negative {
        color: #ef4444 !important;
    }
    
    .metric-change.neutral {
        color: var(--mobile-text-mute) !important;
    }
    
    .health-metric-card.active .metric-change {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    .metric-trend-label {
        color: var(--mobile-text-mute) !important;
    }
    
    .health-metric-card.active .metric-trend-label {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    
    /* Section Headers */
    .metric-section-header {
        border-bottom: 2px solid var(--mobile-border) !important;
    }
    
    .section-title_health .material-symbols-outlined {
        color: var(--mobile-accent) !important;
    }
    
    .section-title_health h2 {
        color: var(--mobile-text) !important;
    }
    
    /* Quick Add Toggle */
    .quick-add-toggle {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }
    
    .quick-add-toggle:hover {
        background: var(--mobile-accent) !important;
        color: white !important;
        box-shadow: var(--mobile-shadow-md) !important;
    }
    
    /* Enhanced Metric Forms */
    .enhanced-metric-form {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }
    
    .enhanced-metric-form::before {
        background: var(--mobile-primary-gradient) !important;
    }
    
    /* Form Headers */
    .form-header h3 {
        color: var(--mobile-text) !important;
    }
    
    .form-header p {
        color: var(--mobile-text-soft) !important;
    }
    
    /* Form Controls */
    .enhanced-form-group label {
        color: var(--mobile-text) !important;
    }
    
    .enhanced-form-group label .material-symbols-outlined {
        color: var(--mobile-accent) !important;
    }
    
    .enhanced-form-control {
        background: var(--mobile-surface-2) !important;
        border: 2px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }
    
    .enhanced-form-control:focus {
        border-color: var(--mobile-accent) !important;
        background: var(--mobile-surface) !important;
        box-shadow: 0 0 0 4px var(--mobile-accent-soft) !important;
    }
    
    .enhanced-form-control:hover:not(:focus) {
        border-color: rgba(62,136,249,.4) !important;
        background: var(--mobile-surface) !important;
    }
    
    .input-unit {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Submit Buttons */
    .enhanced-submit-btn {
        background: var(--mobile-primary-gradient) !important;
        box-shadow: var(--mobile-shadow-md) !important;
    }
    
    .enhanced-submit-btn:hover {
        box-shadow: 0 12px 40px rgba(62,136,249,.25) !important;
    }
    
    /* Enhanced Chart Cards */
    .enhanced-chart-card {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }
    
    .chart-header h3 {
        color: var(--mobile-text) !important;
    }
    
    .chart-range-select {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }
    
    .chart-range-select:hover {
        border-color: var(--mobile-accent) !important;
        background: var(--mobile-surface) !important;
    }
    
    .chart-range-select:focus {
        border-color: var(--mobile-accent) !important;
        box-shadow: 0 0 0 2px var(--mobile-accent-soft) !important;
    }
    
    .chart-container.enhanced {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
    }
    
    .entries-modal-header h3 {
        color: white !important;
    }
    
    /* Chart Insights */
    .chart-insights {
        border-top: 1px solid var(--mobile-border) !important;
    }
    
    .insight-item {
        background: var(--mobile-surface-2) !important;
    }
    
    .insight-value {
        color: var(--mobile-accent) !important;
    }
    
    .insight-label {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Enhanced Entries Cards */
    .enhanced-entries-card {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }
    
    .entries-header h3 {
        color: var(--mobile-text) !important;
    }
    
    .view-all-btn {
        background: transparent !important;
        border: 1px solid var(--mobile-border) !important;
        color: var(--mobile-text-mute) !important;
        white-space: nowrap;
    }
    
    .view-all-btn:hover {
        background: var(--mobile-accent) !important;
        border-color: var(--mobile-accent) !important;
        color: white !important;
        box-shadow: var(--mobile-shadow-md) !important;
    }
    
    /* Entry Items */
    .enhanced-entry-item {
        background: var(--mobile-surface-2) !important;
        border-bottom: 1px solid var(--mobile-border) !important;
    }
    
    .enhanced-entry-item:hover {
        background: var(--mobile-accent-soft) !important;
    }
    
    .entry-datetime {
        color: var(--mobile-text-mute) !important;
    }
    
    .entry-note {
        color: var(--mobile-text-soft) !important;
    }
    
    .entry-primary-value {
        color: var(--mobile-text) !important;
    }
    
    .entry-unit {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Blood Pressure Values */
    .bp-systolic,
    .modal-bp-systolic {
        color: #dc2626 !important;
    }
    
    .bp-diastolic,
    .modal-bp-diastolic {
        color: var(--mobile-success) !important;
    }
    
    .bp-separator,
    .modal-bp-separator {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Entries Modal */
    .entries-modal {
        background: rgba(0, 0, 0, 0.6) !important;
    }
    
    .entries-modal-content {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow-lg) !important;
    }
    
    .entries-modal-header {
        background: var(--mobile-primary-gradient) !important;
        border-bottom: 2px solid var(--mobile-border) !important;
    }
    
    .entries-modal-close {
        background: rgba(255, 255, 255, 0.2) !important;
    }
    
    .entries-modal-close:hover {
        background: rgba(255, 255, 255, 0.3) !important;
    }
    
    .entries-modal-stats {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
    }
    
    .modal-stat-value {
        color: var(--mobile-accent) !important;
    }
    
    .modal-stat-label {
        color: var(--mobile-text-mute) !important;
    }
    
    .modal-entry-item {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
    }
    
    .modal-entry-item:hover {
        background: var(--mobile-accent-soft) !important;
        border-color: rgba(62,136,249,.3) !important;
    }
    
    .modal-entry-datetime {
        color: var(--mobile-text-mute) !important;
    }
    
    .modal-entry-note {
        color: var(--mobile-text-soft) !important;
    }
    
    .modal-entry-primary-value {
        color: var(--mobile-text) !important;
    }
    
    .modal-entry-unit {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Empty States */
    .entries-modal-empty {
        color: var(--mobile-text-mute) !important;
    }
    
    .entries-modal-empty .material-symbols-outlined {
        color: var(--mobile-text-soft) !important;
    }
}

/* ========================================
   SIDEBAR MOBILE WHITE MODE - VERSTÄRKT
   ======================================== */

@media (max-width: 768px) {
    
    /* Sidebar Container - Höchste Spezifität */
    .sidebar#sidebar {
        background: var(--mobile-surface) !important;
        border-right: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow-lg) !important;
    }
    
    /* Logo Section */
    .sidebar#sidebar .logo {
        background: var(--mobile-surface) !important;
        border-bottom: 1px solid var(--mobile-border) !important;
    }
    
    .sidebar#sidebar .logo-text {
        background: var(--mobile-text-gradient) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    
    /* Mobile Close Button */
    .sidebar#sidebar .mobile-close-btn {
        color: var(--mobile-text-mute) !important;
    }
    
    .sidebar#sidebar .mobile-close-btn:hover {
        color: #dc2626 !important;
    }
    
    /* Navigation Menu */
    .sidebar#sidebar .nav-menu {
        background: var(--mobile-surface) !important;
    }
    
    /* Navigation Section Titles */
    .sidebar#sidebar .nav-section-title {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Navigation Items */
    .sidebar#sidebar .nav-item {
        color: var(--mobile-text) !important;
        background: transparent !important;
    }
    
    .sidebar#sidebar .nav-item:hover {
        background: var(--mobile-accent-soft) !important;
        color: var(--mobile-accent) !important;
    }
    
    .sidebar#sidebar .nav-item.active {
        background: var(--mobile-accent-soft) !important;
        color: var(--mobile-accent) !important;
    }
    
    .sidebar#sidebar .nav-item.active::before {
        background: var(--mobile-accent) !important;
    }
    
    .sidebar#sidebar .nav-item h3 {
        color: var(--mobile-text) !important;
    }
    
    .sidebar#sidebar .nav-item.active h3 {
        color: var(--mobile-accent) !important;
    }
    
    .sidebar#sidebar .nav-item:hover h3 {
        color: var(--mobile-accent) !important;
    }
    
    /* Navigation Icons - Direkter Zugriff */
    .sidebar#sidebar .nav-item .nav-icon-svg {
        filter: brightness(0) saturate(100%) invert(15%) sepia(8%) saturate(1574%) hue-rotate(184deg) brightness(96%) contrast(93%) !important;
    }
    
    .sidebar#sidebar .nav-item.active .nav-icon-svg {
        filter: brightness(0) saturate(100%) invert(39%) sepia(57%) saturate(4618%) hue-rotate(216deg) brightness(103%) contrast(97%) !important;
    }
    
    .sidebar#sidebar .nav-item:hover .nav-icon-svg {
        filter: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(2701%) hue-rotate(219deg) brightness(99%) contrast(96%) !important;
    }
    
    /* Help Center Dropdown */
    .sidebar#sidebar .dropdown-nav-item .dropdown-arrow {
        color: var(--mobile-text-mute) !important;
    }
    
    .sidebar#sidebar .dropdown-nav-item.open .dropdown-arrow {
        color: var(--mobile-accent) !important;
    }
    
    .sidebar#sidebar .nav-dropdown-menu {
        background: rgba(62,136,249,0.05) !important;
    }
    
    .sidebar#sidebar .nav-dropdown-item {
        color: var(--mobile-text-soft) !important;
        border-left: 3px solid transparent !important;
        background: transparent !important;
    }
    
    .sidebar#sidebar .nav-dropdown-item:hover {
        background: var(--mobile-accent-soft) !important;
        color: var(--mobile-accent) !important;
        border-left-color: var(--mobile-accent) !important;
    }
    
    .sidebar#sidebar .nav-dropdown-item .nav-icon-svg {
        filter: brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(98%) contrast(87%) !important;
    }
    
    .sidebar#sidebar .nav-dropdown-item:hover .nav-icon-svg {
        filter: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(2701%) hue-rotate(219deg) brightness(99%) contrast(96%) !important;
    }
    
    /* Material Icons - Fallback */
    .sidebar#sidebar .material-symbols-outlined {
        color: var(--mobile-text-mute) !important;
    }
    
    .sidebar#sidebar .nav-item.active .material-symbols-outlined {
        color: var(--mobile-accent) !important;
    }
    
    .sidebar#sidebar .nav-item:hover .material-symbols-outlined {
        color: var(--mobile-accent) !important;
    }
    
    .sidebar#sidebar .nav-dropdown-item .material-symbols-outlined {
        color: var(--mobile-text-mute) !important;
        opacity: 0.7 !important;
    }
    
    .sidebar#sidebar .nav-dropdown-item:hover .material-symbols-outlined {
        color: var(--mobile-accent) !important;
        opacity: 1 !important;
    }
    
    /* Spezielle Behandlung für inline styles override */
    .sidebar[style*="width"][style*="transform"] {
        background: var(--mobile-surface) !important;
    }
    
    /* Fallback für alle Nav-Elemente */
    body .sidebar#sidebar .nav-menu > * {
        color: var(--mobile-text) !important;
    }
    
    body .sidebar#sidebar .nav-menu .nav-item {
        color: var(--mobile-text) !important;
    }
    
    body .sidebar#sidebar .nav-menu .nav-item * {
        color: inherit !important;
    }
    
    /* Overlay */
    .sidebar-overlay.active {
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(4px) !important;
    }
}

/* Extra Verstärkung für hartnäckige Styles */
@media (max-width: 768px) {
    /* Force alle Sidebar Texte */
    .container .sidebar#sidebar,
    .container .sidebar#sidebar * {
        color: var(--mobile-text);
    }
    
    /* Nur für spezifische Elemente überschreiben */
    .container .sidebar#sidebar .nav-item h3,
    .container .sidebar#sidebar .nav-section-title,
    .container .sidebar#sidebar .logo-text {
        color: var(--mobile-text) !important;
    }
    
    /* Active states */
    .container .sidebar#sidebar .nav-item.active,
    .container .sidebar#sidebar .nav-item.active h3,
    .container .sidebar#sidebar .nav-item.active * {
        color: var(--mobile-accent) !important;
    }
}

/* ========================================
   BLEND CALCULATOR MOBILE WHITE MODE
   ======================================== */

@media (max-width: 768px) {
    
    /* Blend Config Card */
    .blend-config-card {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }
    
    /* Blend Additional Card */
    .blend-additional-card {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }
    
    .section-icon {
        background: var(--mobile-primary-gradient) !important;
    }
    
    .section-icon .material-symbols-outlined {
        color: white !important;
    }
    
    .section-title h2 {
        color: var(--mobile-text) !important;
    }
    
    /* Enhanced Labels */
    .enhanced-label {
        color: var(--mobile-text) !important;
        margin-bottom: var(--spacing-sm);
    }
    
    .enhanced-label .material-symbols-outlined {
        color: var(--mobile-accent) !important;
    }
    
    /* Form Controls */
    .form-control-enhanced {
        background: var(--mobile-surface-2) !important;
        border: 2px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }
    
    .form-control-enhanced:focus {
        border-color: var(--mobile-accent) !important;
        background: var(--mobile-surface) !important;
        box-shadow: 0 0 0 4px var(--mobile-accent-soft) !important;
    }
    
    .form-control-enhanced:hover:not(:focus) {
        border-color: rgba(62,136,249,.4) !important;
        background: var(--mobile-surface) !important;
    }
    
    .input-unit {
        color: var(--mobile-text-mute) !important;
    }
    
    .field-hint {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Concentration Preview */
    .concentration-preview {
        background: var(--mobile-accent-soft) !important;
        border: 1px solid rgba(62,136,249,.2) !important;
    }
    
    .preview-label {
        color: var(--mobile-text-mute) !important;
    }
    
    .preview-value {
        color: var(--mobile-accent) !important;
    }
    
    /* Additional Peptides */
    .additional-peptides-list:empty::after {
        background: var(--mobile-surface-2) !important;
        border: 2px dashed var(--mobile-border) !important;
        color: var(--mobile-text-mute) !important;
    }
    
    .additional-peptide-row-enhanced {
        background: var(--mobile-surface) !important;
        border: 2px solid var(--mobile-border) !important;
        border-left: 4px solid #764ba2 !important;
    }
    
    .additional-peptide-row-enhanced:hover {
        background: var(--mobile-surface-2) !important;
        border-color: rgba(62,136,249,.3) !important;
        box-shadow: var(--mobile-shadow-lg) !important;
    }
    
    .peptide-row-title h4 {
        color: var(--mobile-text) !important;
    }
    
    .peptide-number {
        background: #764ba2 !important;
        color: white !important;
    }
    
    .remove-peptide-btn {
        background: rgba(220, 38, 38, 0.1) !important;
        border: 1px solid rgba(220, 38, 38, 0.3) !important;
        color: #dc2626 !important;
    }
    
    .remove-peptide-btn:hover {
        background: rgba(220, 38, 38, 0.2) !important;
        border-color: rgba(220, 38, 38, 0.5) !important;
    }
    
    /* Dose Result Display */
    .dose-result-display {
        background: rgba(118, 75, 162, 0.1) !important;
        border: 1px solid rgba(118, 75, 162, 0.3) !important;
    }
    
    .dose-result-label {
        color: var(--mobile-text-mute) !important;
    }
    
    .dose-result-value {
        color: #764ba2 !important;
    }
    
    /* Add Peptide Button */
    .add-peptide-btn-enhanced {
        background: var(--mobile-surface) !important;
        border: 2px dashed var(--mobile-border) !important;
    }
    
    .add-peptide-btn-enhanced:hover {
        background: var(--mobile-surface-2) !important;
        border-color: #764ba2 !important;
        border-style: solid !important;
        box-shadow: 0 8px 32px rgba(118, 75, 162, 0.15) !important;
    }
    
    .btn-icon {
        background: var(--mobile-primary-gradient) !important;
    }
    
    .btn-text {
        color: var(--mobile-text) !important;
    }
    
    .btn-subtitle {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Peptide Limit Info */
    .peptide-limit-info {
        background: rgba(245, 158, 11, 0.1) !important;
        border: 1px solid rgba(245, 158, 11, 0.3) !important;
        color: #f59e0b !important;
    }
    
    /* Blend Results */
    .blend-main-result {
        background: var(--mobile-surface) !important;
        border: 1px solid rgba(62,136,249,.2) !important;
        box-shadow: var(--mobile-shadow) !important;
    }
    
    .result-icon {
        background: var(--mobile-primary-gradient) !important;
    }
    
    
    .result-summary h3 {
        color: var(--mobile-text) !important;
    }
    
    .units-display {
        background: var(--mobile-text-gradient) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    
    .units-label {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Breakdown Items */
    .peptide-breakdown-item {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
    }
    
    .peptide-breakdown-item:hover {
        background: var(--mobile-surface) !important;
        border-color: rgba(62,136,249,.3) !important;
        box-shadow: var(--mobile-shadow-lg) !important;
    }
    
    .peptide-name {
        color: var(--mobile-text) !important;
    }
    
    .peptide-badge {
        background: var(--mobile-accent-soft) !important;
        color: var(--mobile-accent) !important;
        font-size: 0.7rem;
    }
    
    .additional-peptide .peptide-badge {
        background: rgba(118, 75, 162, 0.1) !important;
        color: #764ba2 !important;
    }
    
    .dose-metric {
        background: var(--mobile-surface-2) !important;
    }
    
    .dose-value {
        color: var(--mobile-accent) !important;
    }
    
    .additional-peptide .dose-value {
        color: #764ba2 !important;
    }
    
    .dose-label {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Summary */
    .blend-summary {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
    }
    
    .blend-summary::before {
        background: var(--mobile-primary-gradient) !important;
    }
    
    .summary-text {
        color: var(--mobile-text-soft) !important;
    }
    
    .summary-text strong {
        color: var(--mobile-text) !important;
    }
    
    .highlight-dose {
        color: var(--mobile-accent) !important;
    }
    
    /* Calculation Details */
    .blend-calculation-details {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
    }
    
    .details-header:hover {
        background: var(--mobile-surface) !important;
    }
    
    .details-header h4 {
        color: var(--mobile-text) !important;
    }
    
    .details-toggle {
        color: var(--mobile-text-mute) !important;
    }
    
    .details-toggle:hover {
        background: var(--mobile-surface) !important;
        color: var(--mobile-text) !important;
    }
    
    .calculation-step {
        background: var(--mobile-surface-2) !important;
        color: var(--mobile-text-soft) !important;
        border-left: 2px solid var(--mobile-border) !important;
    }
    
    /* Empty State */
    .blend-empty-state {
        background: var(--mobile-surface-2) !important;
        border: 2px dashed var(--mobile-border) !important;
        color: var(--mobile-text-mute) !important;
    }
    
    .blend-empty-state .material-symbols-outlined {
        color: var(--mobile-text-soft) !important;
    }
}

/* ========================================
   ORDER CALCULATOR MOBILE WHITE MODE
   ======================================== */

@media (max-width: 768px) {
    
    /* Order Cards */
    .order-input-card,
    .order-results-card,
    .order-tips-card {
        background: var(--mobile-surface) !important;
        border: 1px solid var(--mobile-border) !important;
        box-shadow: var(--mobile-shadow) !important;
    }
    
    .order-input-icon {
        background: var(--mobile-primary-gradient) !important;
    }
    
    .order-results-icon {
        background: var(--mobile-success);
    }
    
    .order-section-header .section-icon .material-symbols-outlined {
        color: white !important;
    }
    
    .order-section-header .section-title h2 {
        color: var(--mobile-text) !important;
    }
    
    .order-section-header .section-subtitle {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Input Labels */
    .input-label {
        margin-bottom: 0 !important;
    }
    
    .input-label .material-symbols-outlined {
        color: var(--mobile-accent) !important;
    }
    
    .input-hint {
        color: var(--mobile-text-mute) !important;
    }
    
    /* Form Controls Enhanced */
    .form-control-enhanced {
        background: var(--mobile-surface-2) !important;
        border: 2px solid var(--mobile-border) !important;
        color: var(--mobile-text) !important;
    }
    
    .form-control-enhanced:focus {
        border-color: var(--mobile-accent) !important;
        background: var(--mobile-surface) !important;
        box-shadow: 0 0 0 4px var(--mobile-accent-soft) !important;
    }
    
    .form-control-enhanced:hover:not(:focus) {
        border-color: rgba(62,136,249,.4) !important;
        background: var(--mobile-surface) !important;
    }
    
    /* Frequency Buttons */
    .frequency-btn {
        background: var(--mobile-surface-2) !important;
        border: 2px solid var(--mobile-border) !important;
        color: var(--mobile-text-mute) !important;
    }
    
    .frequency-btn:hover {
        background: var(--mobile-surface) !important;
        border-color: rgba(62,136,249,.4) !important;
        color: var(--mobile-text) !important;
    }
    
    .frequency-btn.active {
        background: var(--mobile-accent) !important;
        border-color: var(--mobile-accent) !important;
        color: white !important;
        box-shadow: var(--mobile-shadow-md) !important;
    }
    
    /* Protocol Preview */
    .protocol-preview {
        background: var(--mobile-accent-soft) !important;
        border: 1px solid rgba(62,136,249,.2) !important;
    }
    
    .preview-header .material-symbols-outlined {
        color: var(--mobile-accent) !important;
    }
    
    .preview-header h4 {
        color: var(--mobile-text) !important;
    }
    
    .preview-label {
        color: var(--mobile-text-mute) !important;
    }
    
    .preview-value {
        color: var(--mobile-accent) !important;
    }
    
    /* Vial Options */
    .vial-option {
        background: var(--mobile-surface-2) !important;
        border: 2px solid var(--mobile-border) !important;
    }
    
    .vial-option:hover {
        border-color: rgba(62,136,249,.3) !important;
        box-shadow: var(--mobile-shadow-lg) !important;
    }
    
    .vial-5mg {
        background: var(--mobile-accent) !important;
    }
    
    .vial-10mg {
        background: var(--mobile-success) !important;
    }
    
    .vial-info h4 {
        color: var(--mobile-text) !important;
    }
    
    .vial-info p {
        color: var(--mobile-text-mute) !important;
    }
    
    .vial-count {
        color: var(--mobile-text) !important;
    }
    
    .vial-label {
        color: var(--mobile-text-mute) !important;
    }
    
    .vial-efficiency {
        background: var(--mobile-surface-2) !important;
        color: var(--mobile-text-soft) !important;
    }
    
    .vial-efficiency.better-efficiency {
        background: rgba(34,197,94,.1) !important;
        color: var(--mobile-success) !important;
        border: 1px solid rgba(34,197,94,.2) !important;
    }
    
    /* Recommendation Badge */
    .recommendation-badge {
        background: rgba(34,197,94,.1) !important;
        border: 1px solid rgba(34,197,94,.3) !important;
        color: var(--mobile-success) !important;
    }
    
    .recommendation-badge .material-symbols-outlined {
        color: var(--mobile-success) !important;
    }
    
    /* Calculation Breakdown */
    .calculation-breakdown-enhanced {
        background: var(--mobile-surface-2) !important;
        border: 1px solid var(--mobile-border) !important;
    }
    
    .breakdown-header:hover {
        background: var(--mobile-surface) !important;
    }
    
    .breakdown-header h4 {
        color: var(--mobile-text) !important;
    }
    
    .breakdown-toggle {
        color: var(--mobile-text-mute) !important;
    }
    
    .breakdown-toggle:hover {
        background: var(--mobile-surface) !important;
        color: var(--mobile-text) !important;
    }
    
    .breakdown-step {
        background: var(--mobile-surface-2) !important;
        color: var(--mobile-text-soft) !important;
        border-left: 3px solid var(--mobile-accent) !important;
    }
    
    /* Tips Card */
    .order-tips-card {
        background: var(--mobile-surface) !important;
        border: 1px solid rgba(118, 75, 162, 0.2) !important;
    }
    
    .tips-header {
        color: #764ba2 !important;
    }
    
    .tips-header h3 {
        color: var(--mobile-text) !important;
    }
    
    .tip-item {
        background: var(--mobile-surface-2) !important;
    }
    
    .tip-item:hover {
        background: var(--mobile-accent-soft) !important;
    }
    
    .tip-content h5 {
        color: var(--mobile-text) !important;
    }
    
    .tip-content p {
        color: var(--mobile-text-soft) !important;
    }
}

/* ========================================
   PEPTIDE LOG TAB MOBILE WHITE MODE
   ======================================== */
   
   @media (max-width: 768px) {

       .peptide-log-card .card-header {
           background-color: white !important;
       }
       
       .header-icon .material-symbols-outlined {
           color: white !important;
       }
       
       .filter-btn {
            background: var(--mobile-surface-2) !important;
            border: 1px solid var(--mobile-border) !important;
            color: var(--mobile-text) !important;
            border-radius: 10px;
       }
       
   }