/* /App.razor.rz.scp.css */
/* 404 Not Found Page Styles */
.not-found-container[b-vam0w4nhni] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--medical-space-6);
    background: linear-gradient(135deg, var(--medical-background) 0%, var(--medical-surface-variant) 100%);
    position: relative;
}

.not-found-container[b-vam0w4nhni]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(25, 118, 210, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.not-found-content[b-vam0w4nhni] {
    background: var(--medical-surface);
    border-radius: var(--medical-radius-2xl);
    border: 1px solid var(--medical-border);
    padding: var(--medical-space-12);
    box-shadow: var(--medical-shadow-xl);
    text-align: center;
    max-width: 600px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.not-found-icon[b-vam0w4nhni] {
    margin-bottom: var(--medical-space-8);
}

.icon-wrapper[b-vam0w4nhni] {
    position: relative;
    display: inline-block;
}

.stethoscope-icon[b-vam0w4nhni] {
    font-size: 80px;
    display: block;
    margin-bottom: var(--medical-space-4);
    filter: drop-shadow(0 4px 8px rgba(25, 118, 210, 0.2));
    animation: pulse-b-vam0w4nhni 3s ease-in-out infinite;
}

.error-text[b-vam0w4nhni] {
    font-size: var(--medical-text-4xl);
    font-weight: var(--medical-font-extrabold);
    color: var(--medical-primary);
    letter-spacing: -0.05em;
    display: block;
}

.not-found-message[b-vam0w4nhni] {
    margin-bottom: var(--medical-space-8);
}

.not-found-title[b-vam0w4nhni] {
    font-size: var(--medical-text-3xl);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    margin-bottom: var(--medical-space-4);
    letter-spacing: -0.025em;
}

.not-found-subtitle[b-vam0w4nhni] {
    font-size: var(--medical-text-base);
    color: var(--medical-text-secondary);
    line-height: var(--medical-leading-relaxed);
    margin-bottom: var(--medical-space-3);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.not-found-help[b-vam0w4nhni] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-tertiary);
    font-weight: var(--medical-font-medium);
}

.not-found-actions[b-vam0w4nhni] {
    display: flex;
    gap: var(--medical-space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--medical-space-10);
}

.btn-icon[b-vam0w4nhni] {
    margin-right: var(--medical-space-2);
}

.not-found-links[b-vam0w4nhni] {
    padding-top: var(--medical-space-6);
    border-top: 1px solid var(--medical-border);
}

.links-title[b-vam0w4nhni] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
    margin-bottom: var(--medical-space-4);
}

.links-grid[b-vam0w4nhni] {
    display: flex;
    gap: var(--medical-space-6);
    justify-content: center;
    flex-wrap: wrap;
}

.help-link[b-vam0w4nhni] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    color: var(--medical-primary);
    text-decoration: none;
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    padding: var(--medical-space-2) var(--medical-space-3);
    border-radius: var(--medical-radius-lg);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.help-link:hover[b-vam0w4nhni] {
    background: rgba(25, 118, 210, 0.05);
    color: var(--medical-primary-dark);
    text-decoration: none;
    transform: translateY(-1px);
}

.link-icon[b-vam0w4nhni] {
    font-size: var(--medical-text-base);
}

/* Animation for the icon */
@keyframes pulse-b-vam0w4nhni {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .not-found-container[b-vam0w4nhni] {
        padding: var(--medical-space-4);
    }
    
    .not-found-content[b-vam0w4nhni] {
        padding: var(--medical-space-8);
    }
    
    .stethoscope-icon[b-vam0w4nhni] {
        font-size: 64px;
    }
    
    .error-text[b-vam0w4nhni] {
        font-size: var(--medical-text-3xl);
    }
    
    .not-found-title[b-vam0w4nhni] {
        font-size: var(--medical-text-2xl);
    }
    
    .not-found-actions[b-vam0w4nhni] {
        flex-direction: column;
        align-items: center;
    }
    
    .not-found-actions .btn[b-vam0w4nhni] {
        width: 100%;
        max-width: 280px;
    }
    
    .links-grid[b-vam0w4nhni] {
        flex-direction: column;
        align-items: center;
        gap: var(--medical-space-3);
    }
}

@media (max-width: 480px) {
    .not-found-content[b-vam0w4nhni] {
        padding: var(--medical-space-6);
    }
    
    .stethoscope-icon[b-vam0w4nhni] {
        font-size: 56px;
    }
    
    .error-text[b-vam0w4nhni] {
        font-size: var(--medical-text-2xl);
    }
    
    .not-found-title[b-vam0w4nhni] {
        font-size: var(--medical-text-xl);
    }
    
    .not-found-subtitle[b-vam0w4nhni] {
        font-size: var(--medical-text-sm);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .stethoscope-icon[b-vam0w4nhni] {
        animation: none;
    }
    
    .help-link[b-vam0w4nhni] {
        transition: none;
    }
}
/* /Dialogs/AdvancedFeaturesDialog.razor.rz.scp.css */
/* AdvancedFeaturesDialog - Compact Premium Features Dialog Design */

/* Dialog Container */
[b-xce28dts8e] .advanced-features-dialog .mud-dialog-container {
    border-radius: var(--medical-radius-xl);
    box-shadow: var(--medical-shadow-xl);
    overflow: hidden;
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
}

[b-xce28dts8e] .advanced-features-dialog.compact .mud-dialog-container {
    max-height: 80vh;
    min-height: auto;
}

.advanced-features-content[b-xce28dts8e] {
    padding: 0;
    background: var(--medical-surface);
    min-width: 320px;
}

/* Compact Header */
.advanced-features-header[b-xce28dts8e] {
    text-align: center;
    padding: var(--medical-space-3) var(--medical-space-4) var(--medical-space-2);
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.02) 0%, rgba(25, 118, 210, 0.05) 100%);
    border-bottom: 1px solid var(--medical-border-light);
}

.advanced-features-title[b-xce28dts8e] {
    font-size: var(--medical-text-base);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    margin: 0 0 var(--medical-space-1) 0;
    letter-spacing: -0.025em;
}

.advanced-features-subtitle[b-xce28dts8e] {
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    margin: 0;
    line-height: var(--medical-leading-relaxed);
    font-weight: var(--medical-font-medium);
}

.highlight-text[b-xce28dts8e] {
    color: var(--medical-primary);
    font-weight: var(--medical-font-semibold);
}

/* Unified Features Section */
.features-section[b-xce28dts8e] {
    padding: 0 var(--medical-space-4) var(--medical-space-2);
}

.features-card[b-xce28dts8e] {
    background: var(--medical-surface-variant);
    border: 1px solid var(--medical-border-light);
    border-radius: var(--medical-radius-lg);
    padding: var(--medical-space-3);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.features-card:hover[b-xce28dts8e] {
    background: var(--medical-surface);
    border-color: var(--medical-primary);
    box-shadow: var(--medical-shadow-sm);
    transform: translateY(-1px);
}

.features-header[b-xce28dts8e] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    margin-bottom: var(--medical-space-2);
}

.features-header h4[b-xce28dts8e] {
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin: 0;
}

.features-list[b-xce28dts8e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--medical-space-2);
}

.feature-item.unified[b-xce28dts8e] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    padding: var(--medical-space-1);
    border-radius: var(--medical-radius-sm);
    transition: all var(--medical-transition-fast) var(--medical-ease-out);
}

.feature-item.unified:hover[b-xce28dts8e] {
    background: rgba(25, 118, 210, 0.05);
}

.feature-item.unified span[b-xce28dts8e] {
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-medium);
    color: var(--medical-text-primary);
    line-height: var(--medical-leading-tight);
}

/* Compact Plans Section */
.plans-section[b-xce28dts8e] {
    padding: 0 var(--medical-space-4) var(--medical-space-3);
}

.plans-grid.compact[b-xce28dts8e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--medical-space-3);
}

/* Compact Plan Cards */
.plan-card.compact[b-xce28dts8e] {
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-md);
    padding: var(--medical-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-2);
    position: relative;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    overflow: hidden;
    min-height: 140px;
    max-height: 160px;
}

.plan-card.compact[b-xce28dts8e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
}

.plan-card.compact:hover[b-xce28dts8e] {
    box-shadow: var(--medical-shadow-md);
    transform: translateY(-1px);
    border-color: var(--medical-primary);
}

.plan-card.premium.compact[b-xce28dts8e] {
    border: none;
    background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
    color: white;
    box-shadow: var(--medical-shadow-md);
}

.plan-card.premium.compact[b-xce28dts8e]::before {
    display: none;
}

.plan-content[b-xce28dts8e] {
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-2);
    height: 100%;
}

.plan-header[b-xce28dts8e] {
    text-align: center;
}

.plan-title[b-xce28dts8e] {
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin: 0;
    line-height: var(--medical-leading-tight);
}

.plan-card.premium .plan-title[b-xce28dts8e] {
    color: white;
}

.plan-price[b-xce28dts8e] {
    text-align: center;
    margin: var(--medical-space-1) 0;
}

.plan-price-amount[b-xce28dts8e] {
    font-size: var(--medical-text-base);
    font-weight: var(--medical-font-bold);
    color: var(--medical-primary);
    line-height: 1;
}

.plan-card.premium .plan-price-amount[b-xce28dts8e] {
    color: white;
}

.plan-price-period[b-xce28dts8e] {
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
}

.plan-card.premium .plan-price-period[b-xce28dts8e] {
    color: rgba(255, 255, 255, 0.8);
}

.plan-features[b-xce28dts8e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-1);
    margin: var(--medical-space-1) 0;
}

.plan-feature[b-xce28dts8e] {
    font-size: var(--medical-text-xs);
    color: var(--medical-text-primary);
    line-height: var(--medical-leading-tight);
    display: flex;
    align-items: center;
    margin: 1px 0;
}

.plan-card.premium .plan-feature[b-xce28dts8e] {
    color: white;
}

.plan-button[b-xce28dts8e] {
    margin-top: auto;
    border-radius: var(--medical-radius-sm);
    font-weight: var(--medical-font-medium);
    text-transform: none;
    min-height: 28px;
    font-size: var(--medical-text-xs);
    padding: var(--medical-space-1) var(--medical-space-2);
}

/* Popular badge for unlimited plan */
.popular-badge[b-xce28dts8e] {
    background: white;
    color: #FF6B6B;
    padding: 1px var(--medical-space-1);
    border-radius: var(--medical-radius-sm);
    font-size: 7px;
    font-weight: var(--medical-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Dialog Actions */
[b-xce28dts8e] .advanced-features-dialog .mud-dialog-actions {
    padding: var(--medical-space-2) var(--medical-space-4) var(--medical-space-2) !important;
    background: var(--medical-surface-variant);
    border-top: 1px solid var(--medical-border-light);
    justify-content: flex-end;
    min-height: auto;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .advanced-features-content[b-xce28dts8e] {
        min-width: auto;
    }
    
    [b-xce28dts8e] .advanced-features-dialog .mud-dialog-container {
        margin: var(--medical-space-2);
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: 85vh;
    }
    
    .advanced-features-header[b-xce28dts8e],
    .features-section[b-xce28dts8e],
    .plans-section[b-xce28dts8e] {
        padding-left: var(--medical-space-3);
        padding-right: var(--medical-space-3);
    }
    
    .plans-grid.compact[b-xce28dts8e] {
        grid-template-columns: 1fr;
        gap: var(--medical-space-2);
    }
    
    .plan-card.compact[b-xce28dts8e] {
        padding: var(--medical-space-2);
        min-height: 120px;
        max-height: 140px;
    }
    
    .features-list[b-xce28dts8e] {
        grid-template-columns: 1fr;
        gap: var(--medical-space-1);
    }
    
    .features-card[b-xce28dts8e] {
        padding: var(--medical-space-2);
    }
    
    .feature-item.unified[b-xce28dts8e] {
        padding: var(--medical-space-1);
        gap: var(--medical-space-1);
    }
    
    .advanced-features-title[b-xce28dts8e] {
        font-size: var(--medical-text-sm);
    }
    
    .advanced-features-subtitle[b-xce28dts8e] {
        font-size: var(--medical-text-xs);
    }
    
    [b-xce28dts8e] .advanced-features-dialog .mud-dialog-actions {
        padding-left: var(--medical-space-3) !important;
        padding-right: var(--medical-space-3) !important;
    }
}

@media (max-width: 480px) {
    .advanced-features-content[b-xce28dts8e] {
        min-width: 280px;
    }
    
    .advanced-features-header[b-xce28dts8e],
    .features-section[b-xce28dts8e],
    .plans-section[b-xce28dts8e] {
        padding-left: var(--medical-space-2);
        padding-right: var(--medical-space-2);
    }
    
    .features-list[b-xce28dts8e] {
        grid-template-columns: 1fr;
        gap: var(--medical-space-1);
    }
    
    .features-card[b-xce28dts8e] {
        padding: var(--medical-space-2);
    }
    
    .feature-item.unified[b-xce28dts8e] {
        padding: var(--medical-space-1);
        gap: var(--medical-space-1);
    }
    
    .plan-card.compact[b-xce28dts8e] {
        padding: var(--medical-space-2);
        min-height: 110px;
        max-height: 130px;
    }
    
    .plans-grid.compact[b-xce28dts8e] {
        gap: var(--medical-space-2);
    }
    
    [b-xce28dts8e] .advanced-features-dialog .mud-dialog-actions {
        padding-left: var(--medical-space-2) !important;
        padding-right: var(--medical-space-2) !important;
    }
}

/* Touch-friendly improvements for mobile */
@media (pointer: coarse) {
    .plan-button[b-xce28dts8e] {
        min-height: 32px;
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-2) var(--medical-space-2);
    }
    
    .plan-card.compact[b-xce28dts8e] {
        min-height: 130px;
    }
}

/* Reduce height on very small screens */
@media (max-height: 600px) {
    [b-xce28dts8e] .advanced-features-dialog .mud-dialog-container {
        max-height: 90vh;
    }
    
    .advanced-features-header[b-xce28dts8e] {
        padding: var(--medical-space-2) var(--medical-space-4) var(--medical-space-1);
    }
    
    .features-section[b-xce28dts8e],
    .plans-section[b-xce28dts8e] {
        padding-bottom: var(--medical-space-2);
    }
    
    .plan-card.compact[b-xce28dts8e] {
        min-height: 120px;
        max-height: 140px;
        padding: var(--medical-space-2);
    }
    
    .features-card[b-xce28dts8e] {
        padding: var(--medical-space-2);
    }
    
    .feature-item.unified[b-xce28dts8e] {
        padding: var(--medical-space-1);
    }
    
    [b-xce28dts8e] .advanced-features-dialog .mud-dialog-actions {
        padding: var(--medical-space-1) var(--medical-space-4) var(--medical-space-2) !important;
    }
}

@media (max-height: 500px) {
    .plans-grid.compact[b-xce28dts8e] {
        grid-template-columns: 1fr;
        gap: var(--medical-space-2);
    }
    
    .plan-card.compact[b-xce28dts8e] {
        min-height: 100px;
        max-height: 120px;
    }
    
    .features-list[b-xce28dts8e] {
        grid-template-columns: 1fr;
        gap: var(--medical-space-1);
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .plan-card.compact[b-xce28dts8e],
    .feature-item.unified[b-xce28dts8e],
    .features-card[b-xce28dts8e] {
        transition: none !important;
    }
    
    .plan-card.compact:hover[b-xce28dts8e],
    .feature-item.unified:hover[b-xce28dts8e],
    .features-card:hover[b-xce28dts8e] {
        transform: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .plan-card.compact[b-xce28dts8e],
    .features-card[b-xce28dts8e] {
        border-width: 2px;
    }
    
    .plan-title[b-xce28dts8e],
    .feature-item.unified span[b-xce28dts8e] {
        color: var(--medical-text-primary) !important;
        font-weight: var(--medical-font-bold) !important;
    }
}
/* /Dialogs/PaymentDialog.razor.rz.scp.css */
/* PaymentDialog.razor.css - Styles for Payment Dialog with Stripe Integration

This stylesheet provides professional, secure-looking styling for the payment dialog
with integrated Stripe Elements.

Features:
- Clean, modern payment UI design
- Mobile-responsive layout
- Loading states and animations
- Accessibility features (high contrast, reduced motion)
- Stripe Elements integration styling
- Error handling and display
*/

/* PaymentDialog - Clean & Secure Design */

/* Dialog Container */
[b-cywjqnxdoz] .payment-dialog .mud-dialog-container {
    border-radius: var(--medical-radius-xl);
    box-shadow: var(--medical-shadow-xl);
    overflow: hidden;
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
}

.payment-content[b-cywjqnxdoz] {
    padding: 0;
    background: var(--medical-surface);
    min-width: 360px;
    position: relative;
}

/* Header */
.payment-header[b-cywjqnxdoz] {
    text-align: center;
    padding: var(--medical-space-6) var(--medical-space-6) var(--medical-space-4);
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.02) 0%, rgba(25, 118, 210, 0.05) 100%);
    border-bottom: 1px solid var(--medical-border-light);
}

.payment-icon[b-cywjqnxdoz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--medical-space-3);
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.1) 0%, rgba(30, 136, 229, 0.15) 100%);
    border-radius: 50%;
    border: 2px solid rgba(25, 118, 210, 0.2);
}

.payment-title[b-cywjqnxdoz] {
    font-size: var(--medical-text-xl);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    margin: 0 0 var(--medical-space-2) 0;
    letter-spacing: -0.025em;
}

.payment-subtitle[b-cywjqnxdoz] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    margin: 0;
    line-height: var(--medical-leading-relaxed);
    font-weight: var(--medical-font-medium);
}

/* Product Information */
.product-info[b-cywjqnxdoz] {
    padding: var(--medical-space-4) var(--medical-space-6);
    background: var(--medical-surface-variant);
    border-bottom: 1px solid var(--medical-border-light);
}

.product-details[b-cywjqnxdoz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-name[b-cywjqnxdoz] {
    font-size: var(--medical-text-base);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
}

.product-amount[b-cywjqnxdoz] {
    font-size: var(--medical-text-lg);
    font-weight: var(--medical-font-bold);
    color: var(--medical-primary);
}

/* Payment Form */
.payment-form[b-cywjqnxdoz] {
    padding: var(--medical-space-6);
}

.form-section[b-cywjqnxdoz] {
    margin-bottom: var(--medical-space-4);
}

.form-label[b-cywjqnxdoz] {
    display: block;
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin-bottom: var(--medical-space-2);
}

/* Stripe Card Element */
.stripe-card-element[b-cywjqnxdoz] {
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-md);
    padding: var(--medical-space-3);
    position: relative;
    min-height: 44px;
    transition: border-color var(--medical-transition-normal) var(--medical-ease-out);
}

.stripe-card-element:hover[b-cywjqnxdoz] {
    border-color: var(--medical-primary);
}

.stripe-card-element:focus-within[b-cywjqnxdoz] {
    border-color: var(--medical-primary);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

/* Stripe Error Messages */
.stripe-error[b-cywjqnxdoz] {
    color: var(--medical-error);
    font-size: var(--medical-text-sm);
    margin-top: var(--medical-space-2);
    padding: var(--medical-space-2);
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: var(--medical-radius-md);
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
}

.stripe-error[b-cywjqnxdoz]::before {
    content: "??";
    font-size: var(--medical-text-base);
}

/* Security Notice */
.security-notice[b-cywjqnxdoz] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    background: rgba(76, 175, 80, 0.05);
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: var(--medical-radius-md);
    padding: var(--medical-space-3);
    margin-top: var(--medical-space-4);
}

/* Processing Overlay */
.processing-overlay[b-cywjqnxdoz] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 250, 251, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-cywjqnxdoz var(--medical-transition-normal) var(--medical-ease-out);
}

.processing-content[b-cywjqnxdoz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--medical-space-4);
    text-align: center;
    padding: var(--medical-space-6) var(--medical-space-8);
    background: var(--medical-surface);
    border-radius: var(--medical-radius-xl);
    box-shadow: var(--medical-shadow-xl);
    border: 1px solid var(--medical-border);
    min-width: 200px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.processing-content[b-cywjqnxdoz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
}

.processing-text[b-cywjqnxdoz] {
    font-size: var(--medical-text-base);
    font-weight: var(--medical-font-semibold);
    color: white !important;
    margin: 0;
    line-height: var(--medical-leading-normal);
}

@keyframes fadeIn-b-cywjqnxdoz {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .processing-overlay[b-cywjqnxdoz] {
        background: rgba(31, 41, 55, 0.75);
    }
    
    .processing-content[b-cywjqnxdoz] {
        background: var(--medical-surface-dark);
        border-color: var(--medical-border-dark);
    }

    .stripe-error[b-cywjqnxdoz] {
        background: rgba(244, 67, 54, 0.2);
        border-color: rgba(244, 67, 54, 0.4);
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .payment-content[b-cywjqnxdoz] {
        min-width: auto;
    }
    
    [b-cywjqnxdoz] .payment-dialog .mud-dialog-container {
        margin: var(--medical-space-2);
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: 90vh;
    }
    
    .payment-header[b-cywjqnxdoz] {
        padding: var(--medical-space-4) var(--medical-space-4) var(--medical-space-3);
    }
    
    .product-info[b-cywjqnxdoz],
    .payment-form[b-cywjqnxdoz] {
        padding-left: var(--medical-space-4);
        padding-right: var(--medical-space-4);
    }
    
    .payment-icon[b-cywjqnxdoz] {
        width: 48px;
        height: 48px;
    }
    
    .payment-title[b-cywjqnxdoz] {
        font-size: var(--medical-text-lg);
    }
    
    .payment-subtitle[b-cywjqnxdoz] {
        font-size: var(--medical-text-xs);
    }
    
    .product-details[b-cywjqnxdoz] {
        flex-direction: column;
        gap: var(--medical-space-2);
        text-align: center;
    }
    
    [b-cywjqnxdoz] .payment-dialog .mud-dialog-actions {
        padding-left: var(--medical-space-4) !important;
        padding-right: var(--medical-space-4) !important;
        flex-direction: column;
        gap: var(--medical-space-2);
    }
    
    [b-cywjqnxdoz] .payment-dialog .mud-dialog-actions .mud-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .payment-content[b-cywjqnxdoz] {
        min-width: 300px;
    }
    
    .payment-header[b-cywjqnxdoz],
    .product-info[b-cywjqnxdoz],
    .payment-form[b-cywjqnxdoz] {
        padding-left: var(--medical-space-3);
        padding-right: var(--medical-space-3);
    }
    
    .payment-form[b-cywjqnxdoz] {
        padding-top: var(--medical-space-4);
        padding-bottom: var(--medical-space-4);
    }
    
    [b-cywjqnxdoz] .payment-dialog .mud-dialog-actions {
        padding-left: var(--medical-space-3) !important;
        padding-right: var(--medical-space-3) !important;
    }
}

/* Touch-friendly improvements for mobile */
@media (pointer: coarse) {
    .stripe-card-element[b-cywjqnxdoz] {
        min-height: 70px;
        padding: var(--medical-space-4);
    }
    
    [b-cywjqnxdoz] .payment-dialog .mud_dialog_actions .mud-button {
        min-height: 48px;
        font-size: var(--medical-text-base);
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .stripe-card-element[b-cywjqnxdoz],
    .processing-overlay[b-cywjqnxdoz] {
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .stripe-card-element[b-cywjqnxdoz],
    .security-notice[b-cywjqnxdoz],
    .processing-content[b-cywjqnxdoz],
    .stripe-error[b-cywjqnxdoz] {
        border-width: 2px;
    }
    
    .payment-title[b-cywjqnxdoz],
    .product-name[b-cywjqnxdoz],
    .product-amount[b-cywjqnxdoz] {
        color: var(--medical-text-primary) !important;
        font-weight: var(--medical-font-bold) !important;
    }
}

/* Focus states for accessibility */
.stripe-card-element:focus-within[b-cywjqnxdoz] {
    outline: 2px solid var(--medical-primary);
    outline-offset: 2px;
}

/* Loading animation */
@keyframes processing-pulse-b-cywjqnxdoz {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.processing-text[b-cywjqnxdoz] {
    animation: processing-pulse-b-cywjqnxdoz 1.5s ease-in-out infinite;
}

/* Stripe Elements custom styling */
[b-cywjqnxdoz] .StripeElement {
    background-color: transparent;
}

[b-cywjqnxdoz] .StripeElement--focus {
    outline: none;
}

[b-cywjqnxdoz] .StripeElement--invalid {
    border-color: var(--medical-error);
}

[b-cywjqnxdoz] .StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}
/* /Dialogs/PaywallDialog.razor.rz.scp.css */
/* PaywallDialog - Compact & Mobile-Friendly Design */

/* Dialog Container */
[b-x32km60bci] .paywall-dialog .mud-dialog-container {
    border-radius: var(--medical-radius-xl);
    box-shadow: var(--medical-shadow-xl);
    overflow: hidden;
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
}

[b-x32km60bci] .paywall-dialog.compact .mud-dialog-container {
    max-height: 85vh;
    min-height: auto;
}

.paywall-content[b-x32km60bci] {
    padding: 0;
    background: var(--medical-surface);
    min-width: 380px;
}

/* Compact Header */
.paywall-header[b-x32km60bci] {
    text-align: center;
    padding: var(--medical-space-4) var(--medical-space-6) var(--medical-space-3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.02) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-bottom: 1px solid var(--medical-border-light);
}

.header-icon[b-x32km60bci] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--medical-space-2);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.15) 100%);
    border-radius: 50%;
    border: 2px solid rgba(239, 68, 68, 0.2);
}

.paywall-title[b-x32km60bci] {
    font-size: var(--medical-text-lg);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    margin: 0 0 var(--medical-space-2) 0;
    letter-spacing: -0.025em;
}

.paywall-subtitle[b-x32km60bci] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    margin: 0;
    line-height: var(--medical-leading-relaxed);
    font-weight: var(--medical-font-medium);
}

.highlight-text[b-x32km60bci] {
    color: var(--medical-primary);
    font-weight: var(--medical-font-semibold);
}

/* Compact Usage Card */
.usage-card[b-x32km60bci] {
    margin: var(--medical-space-3) var(--medical-space-6) var(--medical-space-4);
    background: var(--medical-surface-variant);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-lg);
    padding: var(--medical-space-3);
    position: relative;
    overflow: hidden;
}

.usage-card[b-x32km60bci]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--medical-error) 0%, var(--medical-error-light) 100%);
}

.usage-info[b-x32km60bci] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--medical-space-2);
}

.usage-text[b-x32km60bci] {
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
}

.usage-badge[b-x32km60bci] {
    background: var(--medical-error);
    color: var(--medical-text-on-primary);
    padding: var(--medical-space-1) var(--medical-space-2);
    border-radius: var(--medical-radius-sm);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-bold);
}

.progress-bar[b-x32km60bci] {
    height: 6px;
    background-color: var(--medical-border-light);
    border-radius: var(--medical-radius-full);
    overflow: hidden;
}

.progress-fill[b-x32km60bci] {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--medical-error) 0%, var(--medical-error-light) 100%);
    border-radius: var(--medical-radius-full);
}

/* Compact Options Section */
.options-section[b-x32km60bci] {
    padding: 0 var(--medical-space-6) var(--medical-space-4);
}

.options-grid[b-x32km60bci] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--medical-space-3);
}

/* Compact Option Cards */
.option-card[b-x32km60bci] {
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-lg);
    padding: var(--medical-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-2);
    position: relative;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    overflow: hidden;
    min-height: 120px;
}

.option-card[b-x32km60bci]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.option-card:hover[b-x32km60bci] {
    box-shadow: var(--medical-shadow-md);
    transform: translateY(-2px);
    border-color: var(--medical-primary);
}

.option-card:hover[b-x32km60bci]::before {
    background: linear-gradient(90deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
}

.option-card.featured[b-x32km60bci] {
    border-color: var(--medical-primary);
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.02) 0%, rgba(25, 118, 210, 0.05) 100%);
    box-shadow: var(--medical-shadow-sm);
}

.option-card.featured[b-x32km60bci]::before {
    background: linear-gradient(90deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
}

.option-card.premium[b-x32km60bci]::after {
    content: 'RECOMMENDED';
    position: absolute;
    top: var(--medical-space-2);
    right: var(--medical-space-2);
    background: linear-gradient(135deg, var(--medical-success) 0%, var(--medical-success-light) 100%);
    color: var(--medical-text-on-primary);
    padding: 2px var(--medical-space-1);
    border-radius: var(--medical-radius-sm);
    font-size: 9px;
    font-weight: var(--medical-font-bold);
    letter-spacing: 0.02em;
}

.option-content[b-x32km60bci] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-2);
}

.option-header[b-x32km60bci] {
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-1);
    align-items: center;
    text-align: center;
}

.option-title[b-x32km60bci] {
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin: 0;
    line-height: var(--medical-leading-tight);
}

.save-badge[b-x32km60bci] {
    background: linear-gradient(135deg, var(--medical-warning) 0%, var(--medical-warning-light) 100%);
    color: var(--medical-text-on-primary);
    padding: 2px var(--medical-space-1);
    border-radius: var(--medical-radius-sm);
    font-size: 9px;
    font-weight: var(--medical-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.subscription-badge[b-x32km60bci] {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
    color: var(--medical-text-on-primary);
    padding: 2px var(--medical-space-1);
    border-radius: var(--medical-radius-sm);
    font-size: 9px;
    font-weight: var(--medical-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.subscription-badge.premium[b-x32km60bci] {
    background: linear-gradient(135deg, var(--medical-success) 0%, var(--medical-success-light) 100%);
}

.option-price[b-x32km60bci] {
    text-align: center;
    margin: var(--medical-space-1) 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.option-price span:first-child[b-x32km60bci],
.option-price[b-x32km60bci] {
    font-size: var(--medical-text-base);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    line-height: 1;
}

.period[b-x32km60bci] {
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
}

.option-button[b-x32km60bci] {
    margin-top: auto;
    border-radius: var(--medical-radius-md);
    font-weight: var(--medical-font-semibold);
    text-transform: none;
    min-height: 32px;
    font-size: var(--medical-text-xs);
    padding: var(--medical-space-2) var(--medical-space-3);
}

/* Compact Footer */
.paywall-footer[b-x32km60bci] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--medical-space-2);
    padding: var(--medical-space-3) var(--medical-space-6);
    background: var(--medical-surface-variant);
    border-top: 1px solid var(--medical-border-light);
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
    text-align: center;
}

/* Dialog Actions */
[b-x32km60bci] .paywall-dialog .mud-dialog-actions {
    padding: var(--medical-space-2) var(--medical-space-6) var(--medical-space-3) !important;
    background: var(--medical-surface-variant);
    border-top: 1px solid var(--medical-border-light);
    justify-content: flex-end;
    min-height: auto;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .paywall-content[b-x32km60bci] {
        min-width: auto;
    }
    
    [b-x32km60bci] .paywall-dialog .mud-dialog-container {
        margin: var(--medical-space-2);
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: 90vh;
    }
    
    .paywall-header[b-x32km60bci],
    .paywall-footer[b-x32km60bci] {
        padding-left: var(--medical-space-4);
        padding-right: var(--medical-space-4);
    }
    
    .usage-card[b-x32km60bci],
    .options-section[b-x32km60bci] {
        margin-left: var(--medical-space-4);
        margin-right: var(--medical-space-4);
    }
    
    .options-grid[b-x32km60bci] {
        grid-template-columns: 1fr 1fr;
        gap: var(--medical-space-2);
    }
    
    .option-card[b-x32km60bci] {
        padding: var(--medical-space-2);
        min-height: 100px;
    }
    
    .header-icon[b-x32km60bci] {
        width: 40px;
        height: 40px;
    }
    
    .paywall-title[b-x32km60bci] {
        font-size: var(--medical-text-base);
    }
    
    .paywall-subtitle[b-x32km60bci] {
        font-size: var(--medical-text-xs);
    }
    
    .option-title[b-x32km60bci] {
        font-size: var(--medical-text-xs);
    }
    
    .option-price[b-x32km60bci],
    .option-price span:first-child[b-x32km60bci] {
        font-size: var(--medical-text-sm);
    }
    
    [b-x32km60bci] .paywall-dialog .mud-dialog-actions {
        padding-left: var(--medical-space-4) !important;
        padding-right: var(--medical-space-4) !important;
    }
}

@media (max-width: 480px) {
    .paywall-content[b-x32km60bci] {
        min-width: 300px;
    }
    
    .paywall-header[b-x32km60bci],
    .paywall-footer[b-x32km60bci],
    .options-section[b-x32km60bci] {
        padding-left: var(--medical-space-3);
        padding-right: var(--medical-space-3);
    }
    
    .usage-card[b-x32km60bci] {
        margin-left: var(--medical-space-3);
        margin-right: var(--medical-space-3);
        padding: var(--medical-space-2);
    }
    
    .options-grid[b-x32km60bci] {
        grid-template-columns: 1fr;
        gap: var(--medical-space-2);
    }
    
    .option-card[b-x32km60bci] {
        padding: var(--medical-space-2);
        min-height: 90px;
    }
    
    .option-title[b-x32km60bci] {
        font-size: var(--medical-text-xs);
    }
    
    .option-price[b-x32km60bci],
    .option-price span:first-child[b-x32km60bci] {
        font-size: var(--medical-text-sm);
    }
    
    [b-x32km60bci] .paywall-dialog .mud-dialog-actions {
        padding-left: var(--medical-space-3) !important;
        padding-right: var(--medical-space-3) !important;
    }
}

/* Touch-friendly improvements for mobile */
@media (pointer: coarse) {
    .option-button[b-x32km60bci] {
        min-height: 40px;
        font-size: var(--medical-text-sm);
        padding: var(--medical-space-2) var(--medical-space-3);
    }
    
    .option-card[b-x32km60bci] {
        min-height: 110px;
    }
}

/* Reduce height even further on very small screens */
@media (max-height: 600px) {
    [b-x32km60bci] .paywall-dialog .mud-dialog-container {
        max-height: 95vh;
    }
    
    .paywall-header[b-x32km60bci] {
        padding: var(--medical-space-2) var(--medical-space-6) var(--medical-space-2);
    }
    
    .usage-card[b-x32km60bci] {
        margin-top: var(--medical-space-2);
        margin-bottom: var(--medical-space-2);
        padding: var(--medical-space-2);
    }
    
    .options-section[b-x32km60bci] {
        padding-bottom: var(--medical-space-2);
    }
    
    .option-card[b-x32km60bci] {
        min-height: 85px;
        padding: var(--medical-space-2);
    }
    
    .paywall-footer[b-x32km60bci] {
        padding: var(--medical-space-2) var(--medical-space-6);
    }
    
    [b-x32km60bci] .paywall-dialog .mud-dialog-actions {
        padding: var(--medical-space-2) var(--medical-space-6) var(--medical-space-2) !important;
    }
}

/* Ensure text is always visible */
.option-price[b-x32km60bci],
.option-title[b-x32km60bci],
.usage-text[b-x32km60bci],
.paywall-title[b-x32km60bci],
.paywall-subtitle[b-x32km60bci] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .option-card[b-x32km60bci] {
        transition: none !important;
    }
    
    .option-card:hover[b-x32km60bci] {
        transform: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .option-card[b-x32km60bci],
    .usage-card[b-x32km60bci] {
        border-width: 2px;
    }
    
    .option-price[b-x32km60bci],
    .option-title[b-x32km60bci] {
        color: var(--medical-text-primary) !important;
        font-weight: var(--medical-font-bold) !important;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Modern Medical App Navigation - Following Unified Design System */

.custom-drawer[b-9t2ff0wks4] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background: linear-gradient(180deg, var(--medical-surface) 0%, var(--medical-surface-variant) 100%);
    border-right: 1px solid var(--medical-border);
    box-shadow: var(--medical-shadow-xl);
    transition: width var(--medical-transition-slow) var(--medical-ease-in-out);
    z-index: 1000;
    overflow: hidden;
}

    .custom-drawer.expanded[b-9t2ff0wks4] {
        width: 280px;
    }

    .custom-drawer.collapsed[b-9t2ff0wks4] {
        width: 64px;
    }

/* Mobile Navigation */
.mobile-menu-trigger[b-9t2ff0wks4] {
    position: fixed;
    top: var(--medical-space-4);
    left: var(--medical-space-4);
    z-index: 1100;
    display: none;
}

.mobile-hamburger-btn[b-9t2ff0wks4] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-lg);
    box-shadow: var(--medical-shadow-lg);
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    gap: 4px;
    padding: 0;
    position: relative;
}

    .mobile-hamburger-btn:hover[b-9t2ff0wks4] {
        background: var(--medical-surface-variant);
        box-shadow: var(--medical-shadow-xl);
        transform: translateY(-1px);
    }

    .mobile-hamburger-btn:active[b-9t2ff0wks4] {
        transform: translateY(0);
        box-shadow: var(--medical-shadow-md);
    }

.hamburger-line[b-9t2ff0wks4] {
    width: 20px;
    height: 2px;
    background: var(--medical-text-primary);
    border-radius: 1px;
    transition: all var(--medical-transition-slow) var(--medical-ease-in-out);
    position: absolute;
    left: 50%;
    transform-origin: center;
}

    .hamburger-line:nth-child(1)[b-9t2ff0wks4] {
        top: calc(35%);
        transform: translateX(-50%);
    }

    .hamburger-line:nth-child(2)[b-9t2ff0wks4] {
        top: 50%;
        transform: translateX(-50%);
    }

    .hamburger-line:nth-child(3)[b-9t2ff0wks4] {
        top: calc(65%);
        transform: translateX(-50%);
    }

.mobile-menu-trigger.nav-open .hamburger-line:nth-child(1)[b-9t2ff0wks4] {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.mobile-menu-trigger.nav-open .hamburger-line:nth-child(2)[b-9t2ff0wks4] {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0);
}

.mobile-menu-trigger.nav-open .hamburger-line:nth-child(3)[b-9t2ff0wks4] {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.mobile-overlay[b-9t2ff0wks4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
    backdrop-filter: blur(4px);
    transition: opacity var(--medical-transition-slow) var(--medical-ease-out);
}

/* Drawer Header - FIXED HEIGHT TO PREVENT LAYOUT SHIFTS */
.drawer-header[b-9t2ff0wks4] {
    display: flex;
    align-items: center;
    padding: var(--medical-space-4) var(--medical-space-5);
    height: 72px; /* FIXED HEIGHT */
    background: var(--medical-surface);
    border-bottom: 1px solid var(--medical-border);
    box-shadow: var(--medical-shadow-sm);
    flex-shrink: 0;
    overflow: hidden;
}

.custom-drawer.collapsed .drawer-header[b-9t2ff0wks4] {
    justify-content: center;
    padding: var(--medical-space-4) var(--medical-space-3);
    height: 72px;
}

.menu-toggle-btn[b-9t2ff0wks4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(25, 118, 210, 0.08);
    border: none;
    border-radius: var(--medical-radius-lg);
    color: var(--medical-primary);
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    flex-shrink: 0;
}

    .menu-toggle-btn:hover[b-9t2ff0wks4] {
        background: rgba(25, 118, 210, 0.12);
        transform: scale(1.05);
    }

.menu-icon[b-9t2ff0wks4] {
    font-size: var(--medical-text-lg);
    font-weight: var(--medical-font-bold);
}

.app-branding[b-9t2ff0wks4] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-3);
    margin-left: var(--medical-space-3);
    overflow: hidden;
    flex: 1;
    opacity: 1;
    transition: opacity var(--medical-transition-slow) var(--medical-ease-in-out);
    height: 40px;
    max-height: 40px;
}

.custom-drawer.collapsed .app-branding[b-9t2ff0wks4] {
    opacity: 0;
    pointer-events: none;
    width: 0;
    margin-left: 0;
}

.app-logo-container[b-9t2ff0wks4] {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.app-logo[b-9t2ff0wks4] {
    width: 40px;
    height: 40px;
    border-radius: var(--medical-radius-lg);
    box-shadow: var(--medical-shadow-md);
}

.logo-pulse[b-9t2ff0wks4] {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--medical-radius-lg);
    background: rgba(25, 118, 210, 0.1);
    animation: pulse-b-9t2ff0wks4 2s infinite ease-in-out;
}

@keyframes pulse-b-9t2ff0wks4 {
    0%, 100% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.app-title[b-9t2ff0wks4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 40px;
    justify-content: center;
    overflow: hidden;
}

.app-name[b-9t2ff0wks4] {
    font-size: var(--medical-text-base);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-subtitle[b-9t2ff0wks4] {
    font-size: 10px;
    color: var(--medical-text-secondary);
    line-height: 1.2;
    margin: 0;
    font-weight: var(--medical-font-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Navigation Content */
.nav-content[b-9t2ff0wks4] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 72px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 4pt;
}

    .nav-content[b-9t2ff0wks4]::-webkit-scrollbar {
        display: none;
    }

.nav-section[b-9t2ff0wks4] {
    padding: 0 var(--medical-space-5);
    margin-bottom: var(--medical-space-2);
}

.custom-drawer.collapsed .nav-section[b-9t2ff0wks4] {
    padding: 0 var(--medical-space-3);
}

.nav-section-title[b-9t2ff0wks4] {
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: var(--medical-space-6) 0 var(--medical-space-3) 0;
    padding-left: var(--medical-space-1);
    opacity: 1;
    transition: opacity var(--medical-transition-slow) var(--medical-ease-in-out);
}

.custom-drawer.collapsed .nav-section-title[b-9t2ff0wks4] {
    opacity: 0;
    height: 0;
    margin: var(--medical-space-2) 0;
    overflow: hidden;
}

.nav-group[b-9t2ff0wks4] {
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-2);
}

/* Navigation Items */
.nav-item[b-9t2ff0wks4] {
    display: flex;
    align-items: center;
    padding: var(--medical-space-3) var(--medical-space-4);
    border-radius: var(--medical-radius-lg);
    text-decoration: none;
    color: var(--medical-text-primary);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    position: relative;
    transition: all var(--medical-transition-normal) var(--medical-ease-in-out);
    cursor: pointer;
    border: none;
    background: transparent;
    min-height: 48px;
}

.custom-drawer.collapsed .nav-item[b-9t2ff0wks4] {
    justify-content: center;
    padding: var(--medical-space-3);
    margin: 0 auto;
    width: 40px;
    height: 40px;
    min-height: 40px;
}

.nav-icon[b-9t2ff0wks4] {
    font-size: var(--medical-text-xl);
    margin-right: var(--medical-space-3);
    flex-shrink: 0;
    filter: grayscale(0.2);
    transition: all var(--medical-transition-normal) var(--medical-ease-in-out);
}

.custom-drawer.collapsed .nav-icon[b-9t2ff0wks4] {
    margin-right: 0;
    font-size: var(--medical-text-xl);
}

.nav-text[b-9t2ff0wks4] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    transition: opacity var(--medical-transition-slow) var(--medical-ease-in-out);
}

.custom-drawer.collapsed .nav-text[b-9t2ff0wks4] {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.nav-indicator[b-9t2ff0wks4] {
    width: 3px;
    height: 20px;
    background: var(--medical-primary);
    border-radius: var(--medical-radius-sm);
    opacity: 0;
    transform: scaleY(0);
    transition: all var(--medical-transition-slow) var(--medical-ease-in-out);
    flex-shrink: 0;
}

.custom-drawer.collapsed .nav-indicator[b-9t2ff0wks4] {
    display: none;
}

.external-link-icon[b-9t2ff0wks4] {
    font-size: var(--medical-text-xs);
    color: var(--medical-text-tertiary);
    margin-left: var(--medical-space-2);
    flex-shrink: 0;
    opacity: 1;
    transition: opacity var(--medical-transition-slow) var(--medical-ease-in-out);
}

.custom-drawer.collapsed .external-link-icon[b-9t2ff0wks4] {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Primary Navigation Styles */
.nav-item:hover[b-9t2ff0wks4] {
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.08) 0%, rgba(25, 118, 210, 0.12) 100%);
    transform: translateX(4px);
    box-shadow: var(--medical-shadow-md);
}

.custom-drawer.collapsed .nav-item:hover[b-9t2ff0wks4] {
    transform: scale(1.05);
}

.nav-item:hover .nav-icon[b-9t2ff0wks4] {
    filter: none;
    transform: scale(1.1);
}

.nav-item:hover .nav-text[b-9t2ff0wks4] {
    color: var(--medical-primary);
}

.nav-item.active[b-9t2ff0wks4] {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    color: var(--medical-text-on-primary);
    box-shadow: var(--medical-shadow-lg);
}

    .nav-item.active .nav-text[b-9t2ff0wks4] {
        color: var(--medical-text-on-primary);
        font-weight: var(--medical-font-semibold);
    }

    .nav-item.active .nav-icon[b-9t2ff0wks4] {
        filter: none;
    }

    .nav-item.active .nav-indicator[b-9t2ff0wks4] {
        opacity: 1;
        transform: scaleY(1);
        background: rgba(255, 255, 255, 0.8);
    }

/* Secondary Navigation Styles */
.nav-item.secondary:hover[b-9t2ff0wks4] {
    background: rgba(59, 130, 246, 0.06);
    transform: translateX(2px);
}

.custom-drawer.collapsed .nav-item.secondary:hover[b-9t2ff0wks4] {
    transform: scale(1.05);
}

.nav-item.secondary:hover .nav-text[b-9t2ff0wks4] {
    color: #3b82f6;
}

.nav-item.secondary.active[b-9t2ff0wks4] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

    .nav-item.secondary.active .nav-text[b-9t2ff0wks4] {
        color: #3b82f6;
        font-weight: var(--medical-font-semibold);
    }

/* Support Navigation Styles */
.nav-item.support:hover[b-9t2ff0wks4] {
    background: rgba(16, 185, 129, 0.06);
    transform: translateX(2px);
}

.custom-drawer.collapsed .nav-item.support:hover[b-9t2ff0wks4] {
    transform: scale(1.05);
}

.nav-item.support:hover .nav-text[b-9t2ff0wks4] {
    color: var(--medical-success);
}

.nav-item.support:hover .external-link-icon[b-9t2ff0wks4] {
    color: var(--medical-success);
    transform: translateY(-1px);
}

/* Divider */
.nav-divider[b-9t2ff0wks4] {
    margin: var(--medical-space-5);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--medical-border) 50%, transparent 100%);
}

.custom-drawer.collapsed .nav-divider[b-9t2ff0wks4] {
    margin: var(--medical-space-5) var(--medical-space-3);
}

/* Spacer */
.nav-spacer[b-9t2ff0wks4] {
    flex: 1;
}

/* Main Content */
.main-content[b-9t2ff0wks4] {
    padding-top: 0;
    background-color: var(--medical-background);
    transition: margin-left var(--medical-transition-slow) var(--medical-ease-in-out);
    min-height: 100vh;
}

    .main-content.nav-expanded[b-9t2ff0wks4] {
        margin-left: 280px;
    }

    .main-content.nav-collapsed[b-9t2ff0wks4] {
        margin-left: 64px;
    }

    /* When nav is hidden */
    .main-content.no-nav[b-9t2ff0wks4] {
        margin-left: 0 !important;
    }

.mobile-header[b-9t2ff0wks4] {
    padding-top: 0;
    margin-left: var(--mobile-header-left-margin);
}

/* Responsive Design */
@media (max-width: 768px) {
    .custom-drawer.expanded[b-9t2ff0wks4] {
        width: 260px;
    }

    .nav-section[b-9t2ff0wks4] {
        padding: 0 var(--medical-space-4);
    }

    .drawer-header[b-9t2ff0wks4] {
        padding: var(--medical-space-3) var(--medical-space-4);
        height: 72px;
    }

    .custom-drawer.collapsed .drawer-header[b-9t2ff0wks4] {
        padding: var(--medical-space-3);
        height: 72px;
    }

    .main-content.nav-expanded[b-9t2ff0wks4] {
        margin-left: 260px;
    }

    .app-name[b-9t2ff0wks4] {
        font-size: var(--medical-text-sm);
    }

    .app-subtitle[b-9t2ff0wks4] {
        font-size: 10px;
    }

    .mobile-header[b-9t2ff0wks4] {
        margin-left: 0;
        padding-top: calc(var(--medical-space-4) - 44px); /* Adjust for menu button */
    }
}

@media (max-width: 640px) {
    .mobile-menu-trigger[b-9t2ff0wks4] {
        display: block;
    }

    .mobile-overlay[b-9t2ff0wks4] {
        display: block;
    }

    .custom-drawer[b-9t2ff0wks4] {
        transform: translateX(-100%);
        transition: transform var(--medical-transition-slow) var(--medical-ease-in-out);
        z-index: 1000;
    }

        .custom-drawer.expanded[b-9t2ff0wks4] {
            transform: translateX(0);
            width: 100vw;
            max-width: 280px;
        }

    .main-content[b-9t2ff0wks4] {
        margin-left: 0 !important;
        padding-top: 0; /* REMOVE padding-top for mobile */
    }

        .main-content.no-nav[b-9t2ff0wks4] {
            padding-top: 0;
        }

    .mobile-menu-trigger.nav-open[b-9t2ff0wks4] {
        z-index: 1101;
    }

    .mobile-hamburger-btn[b-9t2ff0wks4] {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
    }

    .drawer-header[b-9t2ff0wks4] {
        height: 72px;
        padding: var(--medical-space-4) var(--medical-space-4);
    }

    .app-branding[b-9t2ff0wks4] {
        height: 40px;
    }

    .app-title[b-9t2ff0wks4] {
        height: 40px;
    }
    
    /* MOBILE HEADER FIXES: Add left margin to all page headers to accommodate menu button */
    /* Using CSS custom property to control this globally */
    :root[b-9t2ff0wks4] {
        --mobile-header-left-margin: 76px; /* 44px button + 16px spacing + 16px buffer */
    }
}

/* Focus styles for accessibility */
.nav-item:focus[b-9t2ff0wks4],
.menu-toggle-btn:focus[b-9t2ff0wks4] {
    outline: 2px solid var(--medical-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .custom-drawer[b-9t2ff0wks4] {
        border-right: 2px solid #000;
    }

    .nav-item:hover[b-9t2ff0wks4] {
        background: #000;
        color: #fff;
    }

    .nav-item.active[b-9t2ff0wks4] {
        background: #000;
        color: #fff;
        border: 2px solid #fff;
    }
}

/* Animations */
@keyframes slideIn-b-9t2ff0wks4 {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.custom-drawer.expanded[b-9t2ff0wks4] {
    animation: slideIn-b-9t2ff0wks4 var(--medical-transition-slow) var(--medical-ease-in-out);
}
/* /Pages/Account.razor.rz.scp.css */
/* Account Page - Modern Medical App Design */

.account-page[b-4ixrop11r8] {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    background-color: var(--medical-background);
}

/* Account Header - STANDARDIZED TO MATCH NAVIGATION DRAWER */
.account-header[b-4ixrop11r8] {
    background-color: var(--medical-surface);
    border-bottom: 1px solid var(--medical-border);
    box-shadow: var(--medical-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 72px; /* MATCH NAVIGATION DRAWER HEIGHT */
}

.account-header-content[b-4ixrop11r8] {
    padding: var(--medical-space-4) var(--medical-space-5); /* CONSISTENT PADDING */
    max-width: 1200px;
    margin: 0 auto;
    min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
    display: flex;
    align-items: center;
}

.page-title[b-4ixrop11r8] {
    font-size: var(--medical-text-3xl);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

/* Account Content */
.account-content[b-4ixrop11r8] {
    overflow-y: auto;
    padding: var(--medical-space-8);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.account-layout[b-4ixrop11r8] {
    display: grid;
    grid-template-columns: minmax(500px, 2fr) minmax(300px, 1fr);
    gap: var(--medical-space-6);
}

/* Personal Information Section */
.personal-info-section[b-4ixrop11r8] {
    background-color: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    box-shadow: var(--medical-shadow-md);
    overflow: hidden;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.personal-info-section:hover[b-4ixrop11r8] {
    box-shadow: var(--medical-shadow-lg);
    transform: translateY(-2px);
}

.section-header[b-4ixrop11r8] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-3);
    padding: var(--medical-space-4) var(--medical-space-6);
    background: linear-gradient(135deg, var(--medical-surface-variant) 0%, var(--medical-border-light) 100%);
    border-bottom: 1px solid var(--medical-border);
}

.section-header h3[b-4ixrop11r8] {
    margin: 0;
    font-size: var(--medical-text-lg);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
}

.section-icon[b-4ixrop11r8] {
    font-size: var(--medical-text-lg);
    color: var(--medical-primary);
}

.form-content[b-4ixrop11r8] {
    padding: var(--medical-space-6);
}

/* Form Styles */
.form-group[b-4ixrop11r8] {
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-2);
    margin-bottom: var(--medical-space-5);
}

.form-row[b-4ixrop11r8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--medical-space-4);
    margin-bottom: var(--medical-space-5);
}

.form-label[b-4ixrop11r8] {
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin-bottom: var(--medical-space-2);
}

.form-input[b-4ixrop11r8] {
    width: 100%;
    min-height: 44px;
    padding: var(--medical-space-3) var(--medical-space-4);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-lg);
    background-color: var(--medical-surface);
    color: var(--medical-text-primary);
    font-size: var(--medical-text-sm);
    font-family: inherit;
    font-weight: var(--medical-font-medium);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    box-shadow: var(--medical-shadow-xs);
}

.form-input:focus[b-4ixrop11r8] {
    outline: none;
    border-color: var(--medical-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--medical-shadow-sm);
    background-color: var(--medical-surface);
}

.form-input[b-4ixrop11r8]::placeholder {
    color: var(--medical-text-tertiary);
    font-weight: var(--medical-font-normal);
}

.form-input.readonly[b-4ixrop11r8] {
    background-color: var(--medical-surface-variant);
    color: var(--medical-text-secondary);
    cursor: not-allowed;
    border-color: var(--medical-border-light);
}

.form-input:disabled[b-4ixrop11r8] {
    background-color: var(--medical-surface-variant);
    color: var(--medical-text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

.form-divider[b-4ixrop11r8] {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--medical-border) 50%, transparent 100%);
    margin: var(--medical-space-6) 0;
}

/* Enhanced Button Styles */
.btn[b-4ixrop11r8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--medical-space-2);
    padding: var(--medical-space-3) var(--medical-space-5);
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--medical-radius-lg);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn:disabled[b-4ixrop11r8] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:focus[b-4ixrop11r8] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-primary[b-4ixrop11r8] {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    color: var(--medical-text-on-primary);
    border-color: var(--medical-primary);
    box-shadow: var(--medical-shadow-sm);
}

.btn-primary:hover:not(:disabled)[b-4ixrop11r8] {
    background: linear-gradient(135deg, var(--medical-primary-dark) 0%, #0d47a1 100%);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-lg);
}

.btn-primary:active[b-4ixrop11r8] {
    transform: translateY(0);
    box-shadow: var(--medical-shadow-sm);
}

.btn-secondary[b-4ixrop11r8] {
    background: var(--medical-surface);
    color: var(--medical-text-primary);
    border-color: var(--medical-border);
    box-shadow: var(--medical-shadow-xs);
}

.btn-secondary:hover:not(:disabled)[b-4ixrop11r8] {
    background: var(--medical-surface-variant);
    border-color: var(--medical-primary);
    color: var(--medical-primary);
    box-shadow: var(--medical-shadow-md);
    transform: translateY(-1px);
}

.btn-danger[b-4ixrop11r8] {
    background: linear-gradient(135deg, var(--medical-error) 0%, var(--medical-error-dark) 100%);
    color: var(--medical-text-on-primary);
    border-color: var(--medical-error);
    box-shadow: var(--medical-shadow-sm);
}

.btn-danger:hover:not(:disabled)[b-4ixrop11r8] {
    background: linear-gradient(135deg, var(--medical-error-dark) 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-lg);
}

.btn-icon[b-4ixrop11r8] {
    font-size: var(--medical-text-sm);
}

.save-btn[b-4ixrop11r8] {
    align-self: flex-start;
    min-width: 120px;
}

.signout-btn[b-4ixrop11r8] {
    width: 100%;
}

.link-button[b-4ixrop11r8] {
    background: none;
    border: none;
    color: var(--medical-primary);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
    text-align: left;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.link-button:hover[b-4ixrop11r8] {
    color: var(--medical-primary-dark);
    text-decoration-thickness: 2px;
}

/* Sidebar Sections */
.sidebar-sections[b-4ixrop11r8] {
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-6);
}

.subscription-section[b-4ixrop11r8],
.account-actions-section[b-4ixrop11r8] {
    background-color: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    box-shadow: var(--medical-shadow-md);
    overflow: hidden;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.subscription-section:hover[b-4ixrop11r8],
.account-actions-section:hover[b-4ixrop11r8] {
    box-shadow: var(--medical-shadow-lg);
    transform: translateY(-2px);
}

/* Subscription Content */
.subscription-content[b-4ixrop11r8] {
    padding: var(--medical-space-6);
}

.subscription-info[b-4ixrop11r8] {
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-1);
    margin-bottom: var(--medical-space-4);
}

.subscription-label[b-4ixrop11r8] {
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.subscription-plan[b-4ixrop11r8] {
    font-size: var(--medical-text-lg);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
}

.subscription-status[b-4ixrop11r8] {
    margin-bottom: var(--medical-space-4);
}

.status-badge[b-4ixrop11r8] {
    display: inline-flex;
    align-items: center;
    padding: var(--medical-space-1) var(--medical-space-3);
    border-radius: var(--medical-radius-full);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-active[b-4ixrop11r8] {
    background: linear-gradient(135deg, var(--medical-success) 0%, var(--medical-success-dark) 100%);
    color: var(--medical-text-on-primary);
}

.status-inactive[b-4ixrop11r8] {
    background: linear-gradient(135deg, var(--medical-text-tertiary) 0%, #64748b 100%);
    color: var(--medical-text-on-primary);
}

.status-expired[b-4ixrop11r8] {
    background: linear-gradient(135deg, var(--medical-error) 0%, var(--medical-error-dark) 100%);
    color: var(--medical-text-on-primary);
}

/* Account Actions Content */
.actions-content[b-4ixrop11r8] {
    padding: var(--medical-space-6);
}

/* Validation Styles */
.form-input.valid[b-4ixrop11r8] {
    border-color: var(--medical-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-input.invalid[b-4ixrop11r8] {
    border-color: var(--medical-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.validation-message[b-4ixrop11r8] {
    color: var(--medical-error);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-medium);
    margin-top: var(--medical-space-1);
    display: flex;
    align-items: center;
    gap: var(--medical-space-1);
}

.validation-message[b-4ixrop11r8]::before {
    content: '⚠';
    font-size: var(--medical-text-sm);
}

/* Success Message */
.success-message[b-4ixrop11r8] {
    color: var(--medical-success);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-medium);
    margin-top: var(--medical-space-1);
    display: flex;
    align-items: center;
    gap: var(--medical-space-1);
}

.success-message[b-4ixrop11r8]::before {
    content: '✓';
    font-size: var(--medical-text-sm);
}

/* Loading State */
.form-input.loading[b-4ixrop11r8] {
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    background-size: 200% 100%;
    animation: loading-b-4ixrop11r8 1.5s infinite;
}

@keyframes loading-b-4ixrop11r8 {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .account-layout[b-4ixrop11r8] {
        grid-template-columns: 1fr;
        gap: var(--medical-space-4);
    }

    .form-row[b-4ixrop11r8] {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 768px) {
    .account-content[b-4ixrop11r8] {
        padding: var(--medical-space-4);
    }

    .account-header-content[b-4ixrop11r8] {
        padding: var(--medical-space-4) var(--medical-space-5); /* MAINTAIN CONSISTENT PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
    }

    .form-content[b-4ixrop11r8],
    .subscription-content[b-4ixrop11r8],
    .actions-content[b-4ixrop11r8] {
        padding: var(--medical-space-4);
    }

    .page-title[b-4ixrop11r8] {
        font-size: var(--medical-text-2xl);
    }

    .form-input[b-4ixrop11r8] {
        min-height: 48px;
        font-size: var(--medical-text-base);
    }

    .btn[b-4ixrop11r8] {
        min-height: 48px;
        font-size: var(--medical-text-base);
    }
}

@media (max-width: 640px) {
    .account-content[b-4ixrop11r8] {
        padding: var(--medical-space-3);
    }

    /* MOBILE HEADER FIXES: Remove top padding, add left margin for menu button */
    .account-header-content[b-4ixrop11r8] {
        padding: var(--medical-space-4) var(--medical-space-5); /* NO CHANGE TO VERTICAL PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
    }
    
    .page-title[b-4ixrop11r8] {
        margin-left: var(--mobile-header-left-margin); /* ACCOMMODATE MOBILE MENU BUTTON */
        font-size: var(--medical-text-xl);
    }

    .section-header[b-4ixrop11r8] {
        padding: var(--medical-space-3) var(--medical-space-4);
    }

    .section-header h3[b-4ixrop11r8] {
        font-size: var(--medical-text-base);
    }

    .form-group[b-4ixrop11r8] {
        margin-bottom: var(--medical-space-4);
    }

    .form-label[b-4ixrop11r8] {
        font-size: var(--medical-text-xs);
    }

    .subscription-info[b-4ixrop11r8] {
        margin-bottom: var(--medical-space-3);
    }

    .subscription-plan[b-4ixrop11r8] {
        font-size: var(--medical-text-base);
    }

    .subscription-label[b-4ixrop11r8] {
        font-size: 10px;
    }

    .status-badge[b-4ixrop11r8] {
        font-size: 10px;
    }
}

/* Focus Management */
.form-input:focus-visible[b-4ixrop11r8] {
    outline: 2px solid var(--medical-primary);
    outline-offset: 2px;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .form-input[b-4ixrop11r8] {
        border-width: 2px;
    }
    
    .btn[b-4ixrop11r8] {
        border-width: 2px;
    }
    
    .section-header[b-4ixrop11r8] {
        border-bottom-width: 2px;
    }
}

/* Print Styles */
@media print {
    .btn[b-4ixrop11r8],
    .link-button[b-4ixrop11r8] {
        print-color-adjust: exact;
    }
    
    .account-header[b-4ixrop11r8] {
        box-shadow: none;
        border-bottom: 1px solid #000;
    }
}
/* /Pages/Auth.razor.rz.scp.css */
/* Auth Page - Modern Medical App Design */

/* Container Styles */
.auth-container[b-6dvm8kl5z6] {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--medical-background) 0%, var(--medical-surface-variant) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--medical-space-5);
    position: relative;
}

.auth-container[b-6dvm8kl5z6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(25, 118, 210, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.auth-grid[b-6dvm8kl5z6] {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: var(--medical-space-6);
    width: 100%;
    max-width: 600px;
    position: relative;
    z-index: 1;
}

/* Enhanced Card Style */
.auth-card[b-6dvm8kl5z6] {
    background: var(--medical-surface);
    border-radius: var(--medical-radius-2xl);
    border: 1px solid var(--medical-border);
    padding: var(--medical-space-8);
    box-shadow: var(--medical-shadow-xl);
    backdrop-filter: blur(10px);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.auth-card:hover[b-6dvm8kl5z6] {
    box-shadow: var(--medical-shadow-2xl);
    transform: translateY(-2px);
}

.auth-card-wide[b-6dvm8kl5z6] {
    padding: var(--medical-space-10) var(--medical-space-8);
    width: 100%;
    max-width: 420px;
}

/* Branding */
.app-logo[b-6dvm8kl5z6] {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: block;
    border-radius: var(--medical-radius-xl);
    box-shadow: var(--medical-shadow-lg);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.app-logo:hover[b-6dvm8kl5z6] {
    transform: scale(1.05);
    box-shadow: var(--medical-shadow-xl);
}

.app-title[b-6dvm8kl5z6] {
    font-size: var(--medical-text-2xl);
    font-weight: var(--medical-font-bold);
    text-align: center;
    margin-top: var(--medical-space-3);
    color: var(--medical-text-primary);
    letter-spacing: -0.025em;
}

.app-subtitle[b-6dvm8kl5z6] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    text-align: center;
    margin-top: var(--medical-space-1);
    font-weight: var(--medical-font-medium);
}

/* Form Elements */
.form-stack[b-6dvm8kl5z6] {
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-4);
}

.icon-large[b-6dvm8kl5z6] {
    font-size: 48px;
    color: var(--medical-primary);
    text-align: center;
    display: block;
    margin-bottom: var(--medical-space-4);
    filter: drop-shadow(0 4px 8px rgba(25, 118, 210, 0.2));
}

.heading[b-6dvm8kl5z6] {
    font-size: var(--medical-text-xl);
    font-weight: var(--medical-font-semibold);
    text-align: center;
    color: var(--medical-text-primary);
    margin: 0;
}

.subheading[b-6dvm8kl5z6] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    text-align: center;
    margin-bottom: var(--medical-space-2);
    font-weight: var(--medical-font-medium);
    line-height: var(--medical-leading-relaxed);
}

/* Enhanced Input Styles */
.modern-textbox[b-6dvm8kl5z6],
.compact-textbox[b-6dvm8kl5z6] {
    width: 100%;
    min-height: 48px;
    padding: var(--medical-space-3) var(--medical-space-4);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-lg);
    background-color: var(--medical-surface);
    color: var(--medical-text-primary);
    font-size: var(--medical-text-sm);
    font-family: inherit;
    font-weight: var(--medical-font-medium);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    box-shadow: var(--medical-shadow-xs);
}

.modern-textbox:focus[b-6dvm8kl5z6],
.compact-textbox:focus[b-6dvm8kl5z6] {
    outline: none;
    border-color: var(--medical-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--medical-shadow-sm);
    background-color: var(--medical-surface);
    transform: translateY(-1px);
}

.modern-textbox[b-6dvm8kl5z6]::placeholder,
.compact-textbox[b-6dvm8kl5z6]::placeholder {
    color: var(--medical-text-tertiary);
}

.compact-textbox[b-6dvm8kl5z6] {
    max-width: 200px;
    min-height: 44px;
}

/* Enhanced Button Styles */
.primary-button[b-6dvm8kl5z6],
.wide-primary-button[b-6dvm8kl5z6] {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    color: var(--medical-text-on-primary);
    border: none;
    border-radius: var(--medical-radius-lg);
    min-height: 48px;
    font-weight: var(--medical-font-semibold);
    font-size: var(--medical-text-sm);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    box-shadow: var(--medical-shadow-md);
    position: relative;
    overflow: hidden;
}

.primary-button[b-6dvm8kl5z6] {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.wide-primary-button[b-6dvm8kl5z6] {
    min-width: 200px;
    padding: 0 var(--medical-space-5);
}

.primary-button:hover[b-6dvm8kl5z6],
.wide-primary-button:hover[b-6dvm8kl5z6] {
    background: linear-gradient(135deg, var(--medical-primary-dark) 0%, #0d47a1 100%);
    transform: translateY(-2px);
    box-shadow: var(--medical-shadow-lg);
}

.primary-button:active[b-6dvm8kl5z6],
.wide-primary-button:active[b-6dvm8kl5z6] {
    transform: translateY(0);
    box-shadow: var(--medical-shadow-sm);
}

.primary-button[b-6dvm8kl5z6]::before,
.wide-primary-button[b-6dvm8kl5z6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--medical-transition-slow) var(--medical-ease-out);
}

.primary-button:hover[b-6dvm8kl5z6]::before,
.wide-primary-button:hover[b-6dvm8kl5z6]::before {
    left: 100%;
}

.secondary-button[b-6dvm8kl5z6] {
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    color: var(--medical-text-primary);
    border-radius: var(--medical-radius-lg);
    min-height: 48px;
    width: 100%;
    font-weight: var(--medical-font-medium);
    font-size: var(--medical-text-sm);
    font-family: inherit;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    box-shadow: var(--medical-shadow-xs);
}

.secondary-button:hover[b-6dvm8kl5z6] {
    background: var(--medical-surface-variant);
    border-color: var(--medical-primary);
    color: var(--medical-primary);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-sm);
}

.link-button[b-6dvm8kl5z6] {
    color: var(--medical-primary);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    text-decoration: none;
    text-align: center;
    display: block;
    margin-top: var(--medical-space-2);
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    padding: var(--medical-space-2);
    border-radius: var(--medical-radius-md);
}

.link-button:hover[b-6dvm8kl5z6] {
    text-decoration: underline;
    background: rgba(25, 118, 210, 0.05);
    color: var(--medical-primary-dark);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* Enhanced Divider */
.divider-container[b-6dvm8kl5z6] {
    position: relative;
    width: 100%;
    margin: var(--medical-space-2) 0;
}

.divider-line[b-6dvm8kl5z6] {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--medical-border) 50%, transparent 100%);
    position: absolute;
    width: 100%;
    top: 50%;
}

.divider-text[b-6dvm8kl5z6] {
    background: var(--medical-surface);
    padding: 0 var(--medical-space-4);
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-semibold);
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Enhanced Email Badge */
.email-badge[b-6dvm8kl5z6] {
    background: linear-gradient(135deg, var(--medical-surface-variant) 0%, var(--medical-border-light) 100%);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-lg);
    padding: var(--medical-space-4);
    text-align: center;
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    box-shadow: var(--medical-shadow-xs);
}

/* Two Column Layout */
.two-column[b-6dvm8kl5z6] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--medical-space-5);
}

/* Enhanced Timer */
.timer-container[b-6dvm8kl5z6] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--medical-space-2);
    background: var(--medical-surface-variant);
    padding: var(--medical-space-2) var(--medical-space-4);
    border-radius: var(--medical-radius-full);
    border: 1px solid var(--medical-border);
}

.timer-label[b-6dvm8kl5z6] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
}

.timer-value[b-6dvm8kl5z6] {
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-bold);
    color: var(--medical-primary);
}

/* Footer */
.footer[b-6dvm8kl5z6] {
    font-size: var(--medical-text-xs);
    color: var(--medical-text-tertiary);
    text-align: center;
    margin-top: var(--medical-space-6);
    line-height: var(--medical-leading-relaxed);
}

/* Page visibility with animations */
.page[b-6dvm8kl5z6] {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--medical-transition-slow) var(--medical-ease-out);
}

.page.active[b-6dvm8kl5z6] {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Loading states */
.primary-button:disabled[b-6dvm8kl5z6],
.secondary-button:disabled[b-6dvm8kl5z6],
.wide-primary-button:disabled[b-6dvm8kl5z6] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.primary-button.loading[b-6dvm8kl5z6],
.wide-primary-button.loading[b-6dvm8kl5z6] {
    position: relative;
}

.primary-button.loading[b-6dvm8kl5z6]::after,
.wide-primary-button.loading[b-6dvm8kl5z6]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-6dvm8kl5z6 1s linear infinite;
}

@keyframes spin-b-6dvm8kl5z6 {
    to {
        transform: rotate(360deg);
    }
}

/* Enhanced focus states */
.modern-textbox:focus-visible[b-6dvm8kl5z6],
.compact-textbox:focus-visible[b-6dvm8kl5z6],
.primary-button:focus-visible[b-6dvm8kl5z6],
.secondary-button:focus-visible[b-6dvm8kl5z6],
.wide-primary-button:focus-visible[b-6dvm8kl5z6],
.link-button:focus-visible[b-6dvm8kl5z6] {
    outline: 2px solid var(--medical-primary);
    outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .auth-container[b-6dvm8kl5z6] {
        padding: var(--medical-space-4);
    }

    .auth-card[b-6dvm8kl5z6] {
        padding: var(--medical-space-6);
    }

    .auth-card-wide[b-6dvm8kl5z6] {
        padding: var(--medical-space-6);
        max-width: none;
    }

    .app-title[b-6dvm8kl5z6] {
        font-size: var(--medical-text-xl);
    }

    .heading[b-6dvm8kl5z6] {
        font-size: var(--medical-text-lg);
    }
}

@media (max-width: 480px) {
    .auth-container[b-6dvm8kl5z6] {
        padding: var(--medical-space-3);
    }

    .auth-card[b-6dvm8kl5z6] {
        padding: var(--medical-space-4);
    }

    .app-logo[b-6dvm8kl5z6] {
        width: 56px;
        height: 56px;
    }

    .app-title[b-6dvm8kl5z6] {
        font-size: var(--medical-text-lg);
    }

    .icon-large[b-6dvm8kl5z6] {
        font-size: 40px;
    }

    .two-column[b-6dvm8kl5z6] {
        grid-template-columns: 1fr;
        gap: var(--medical-space-3);
    }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .auth-card[b-6dvm8kl5z6] {
        border-width: 2px;
    }
    
    .modern-textbox[b-6dvm8kl5z6],
    .compact-textbox[b-6dvm8kl5z6],
    .primary-button[b-6dvm8kl5z6],
    .secondary-button[b-6dvm8kl5z6] {
        border-width: 2px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .auth-card[b-6dvm8kl5z6],
    .primary-button[b-6dvm8kl5z6],
    .secondary-button[b-6dvm8kl5z6],
    .modern-textbox[b-6dvm8kl5z6],
    .compact-textbox[b-6dvm8kl5z6] {
        transition: none;
    }
    
    .page[b-6dvm8kl5z6] {
        transition: none;
    }
    
    .primary-button[b-6dvm8kl5z6]::before,
    .wide-primary-button[b-6dvm8kl5z6]::before {
        display: none;
    }
}
/* /Pages/Note.razor.rz.scp.css */
/* Note Page - Modern Medical App Design */

.note-page[b-eg8cxo6hx1] {
    display: grid;
    grid-template-rows: auto auto 1fr auto; /* header, mobile-inputs, main, footer - let content take remaining space */
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100); /* Use custom property for mobile */
    background-color: var(--medical-background);
    position: relative; /* For FAB positioning */
    
    /* Mobile-specific custom properties */
    --mobile-action-bar-height: 60px;
    --mobile-btn-size: 44px;
    --mobile-select-width: 120px;
}

/* Desktop layout - show desktop layout and hide mobile carousel */
@media (min-width: 769px) {
    .note-page[b-eg8cxo6hx1] {
        grid-template-rows: auto 1fr auto; /* header, main, footer - no mobile inputs */
    }
    
    /* Hide mobile carousel and show desktop layout */
    .mobile-carousel-container[b-eg8cxo6hx1] {
        display: none !important;
    }
    
    .desktop-layout[b-eg8cxo6hx1] {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: var(--medical-space-4);
        height: 100%;
    }
}

/* Mobile layout - hide desktop layout and show carousel */
@media (max-width: 768px) {
    .desktop-layout[b-eg8cxo6hx1] {
        display: none !important;
    }
    
    .mobile-carousel-container[b-eg8cxo6hx1] {
        display: block;
        height: 100%;
        overflow: hidden;
    }
    
    .mobile-notes-carousel[b-eg8cxo6hx1] {
        height: 100% !important;
    }
    
    .mobile-carousel-section[b-eg8cxo6hx1] {
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: var(--medical-surface);
        border: 1px solid var(--medical-border);
        border-radius: var(--medical-radius-xl);
        box-shadow: var(--medical-shadow-md);
        overflow: hidden;
        margin: 0 var(--medical-space-2);
    }
    
    .mobile-carousel-section .audio-chunks-list[b-eg8cxo6hx1] {
        flex: 1;
        overflow-y: auto;
    }
    
    .mobile-carousel-section .tab-container[b-eg8cxo6hx1] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}

/* Desktop layout styles - Define base styles here */
.desktop-layout[b-eg8cxo6hx1] {
    /* Default to hidden for mobile-first approach */
    display: none;
    gap: var(--medical-space-4);
    height: 100%;
}

/* Mobile carousel - Default to shown for mobile-first approach */
.mobile-carousel-container[b-eg8cxo6hx1] {
    display: block;
    height: 100%;
    overflow: hidden;
}

/* Mobile custom properties */
@media (max-width: 640px) {
    .note-page[b-eg8cxo6hx1] {
        --mobile-action-bar-height: 60px;
        --mobile-btn-size: 40px;
        --mobile-select-width: 110px;
    }
}

@media (max-width: 480px) {
    .note-page[b-eg8cxo6hx1] {
        --mobile-action-bar-height: 56px;
        --mobile-btn-size: 38px;
        --mobile-select-width: 100px;
    }
}

/* Floating Action Button Styles */
.recording-fab[b-eg8cxo6hx1] {
    position: fixed;
    bottom: 120px; /* Position above the action bar */
    z-index: 200; /* Higher than other elements, but below drawer (1000) */
    transition: left var(--medical-transition-slow) var(--medical-ease-in-out);
}

/* Default positioning for when navigation is present */
/* These values will be dynamically updated based on navigation state */
.main-content.nav-expanded .recording-fab[b-eg8cxo6hx1] {
    left: 304px; /* 280px (expanded drawer) + 24px spacing */
}

.main-content.nav-collapsed .recording-fab[b-eg8cxo6hx1] {
    left: 88px; /* 64px (collapsed drawer) + 24px spacing */
}

.main-content.no-nav .recording-fab[b-eg8cxo6hx1] {
    left: 24px; /* Normal left positioning when no navigation */
}

.recording-fab-button[b-eg8cxo6hx1] {
    box-shadow: var(--medical-shadow-lg) !important;
    transition: all var(--medical-transition-normal) var(--medical-ease-out) !important;
}

.recording-fab-button:hover[b-eg8cxo6hx1] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.recording-fab-button.recording-active[b-eg8cxo6hx1] {
    animation: recordingPulse-b-eg8cxo6hx1 2s infinite;
}

@keyframes recordingPulse-b-eg8cxo6hx1 {
    0% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 8px rgba(239, 68, 68, 0.1);
    }
    100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Desktop mode - always show FAB regardless of inline styles */
@media (min-width: 769px) {
    .recording-fab[b-eg8cxo6hx1] {
        display: block !important; /* Override any inline display: none on desktop */
    }
}

/* Responsive FAB positioning */
@media (max-width: 768px) {
    .recording-fab[b-eg8cxo6hx1] {
        bottom: 90px; /* Adjust for mobile action bar */
    }
    
    .main-content.nav-expanded .recording-fab[b-eg8cxo6hx1] {
        left: 280px; /* 260px (expanded mobile drawer) + 20px spacing */
    }
    
    .main-content.nav-collapsed .recording-fab[b-eg8cxo6hx1],
    .main-content.no-nav .recording-fab[b-eg8cxo6hx1] {
        left: 16px; /* Normal mobile positioning when drawer is hidden */
    }
}

@media (max-width: 640px) {
    /* On mobile screens, drawer slides off-screen completely */
    .main-content.nav-expanded .recording-fab[b-eg8cxo6hx1],
    .main-content.nav-collapsed .recording-fab[b-eg8cxo6hx1],
    .main-content.no-nav .recording-fab[b-eg8cxo6hx1] {
        left: 12px; /* Mobile positioning - drawer doesn't affect layout */
        bottom: 80px;
    }
}

/* Header Styles - STANDARDIZED TO MATCH NAVIGATION DRAWER */
.header[b-eg8cxo6hx1] {
    background-color: var(--medical-surface);
    border-bottom: 1px solid var(--medical-border);
    box-shadow: var(--medical-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 72px; /* MATCH NAVIGATION DRAWER HEIGHT */
}

.header-content[b-eg8cxo6hx1] {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(400px, auto) 1fr auto;
    align-items: center;
    width: 100%;
    padding: var(--medical-space-4) var(--medical-space-5); /* CONSISTENT PADDING */
    gap: var(--medical-space-6);
    max-width: 1400px;
    margin: 0 auto;
    min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
}

.header-title[b-eg8cxo6hx1] {
    font-size: var(--medical-text-xl);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
}

.header-inputs[b-eg8cxo6hx1] {
    display: flex;
    gap: var(--medical-space-6);
    align-items: center;
    flex-wrap: nowrap;
    min-width: 400px;
}

.input-group[b-eg8cxo6hx1] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    flex-wrap: nowrap;
}

.input-group label[b-eg8cxo6hx1] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    white-space: nowrap;
    font-weight: var(--medical-font-medium);
}

.suggest-box[b-eg8cxo6hx1] {
    width: 180px;
    min-height: 36px; /* REDUCED FROM 40px FOR HEADER COMPATIBILITY */
    padding: var(--medical-space-2) var(--medical-space-3);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-md);
    background-color: var(--medical-surface);
    color: var(--medical-text-primary);
    font-size: var(--medical-text-sm);
    font-family: inherit;
    font-weight: var(--medical-font-medium);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.suggest-box:focus[b-eg8cxo6hx1] {
    outline: none;
    border-color: var(--medical-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: var(--medical-surface);
}

.header-actions[b-eg8cxo6hx1] {
    display: flex;
    gap: var(--medical-space-2);
    justify-self: end;
}

.header-actions .btn[b-eg8cxo6hx1] {
    min-height: 36px; /* REDUCED FROM DEFAULT FOR HEADER COMPATIBILITY */
    padding: var(--medical-space-2) var(--medical-space-3); /* REDUCED PADDING */
    font-size: var(--medical-text-xs); /* SMALLER FONT FOR HEADER */
}

.header-actions .btn .icon[b-eg8cxo6hx1] {
    font-size: var(--medical-text-sm);
}

/* Mobile Input Bar - NEW SECTION */
.mobile-inputs-bar[b-eg8cxo6hx1] {
    display: none; /* Hidden by default, shown only on mobile */
    background-color: var(--medical-surface);
    border-bottom: 1px solid var(--medical-border);
    padding: var(--medical-space-3) var(--medical-space-4);
    box-shadow: var(--medical-shadow-xs);
}

.mobile-inputs-content[b-eg8cxo6hx1] {
    display: flex;
    gap: var(--medical-space-3);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.mobile-input-group[b-eg8cxo6hx1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-1);
}

.mobile-input-group label[b-eg8cxo6hx1] {
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
    margin-bottom: var(--medical-space-1);
}

.mobile-suggest-box[b-eg8cxo6hx1] {
    width: 100%;
    min-height: 40px; /* Touch-friendly height */
    padding: var(--medical-space-2) var(--medical-space-3);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-md);
    background-color: var(--medical-surface);
    color: var(--medical-text-primary);
    font-size: var(--medical-text-sm);
    font-family: inherit;
    font-weight: var(--medical-font-medium);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.mobile-suggest-box:focus[b-eg8cxo6hx1] {
    outline: none;
    border-color: var(--medical-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: var(--medical-surface);
}

.mobile-suggest-box[b-eg8cxo6hx1]::placeholder {
    color: var(--medical-text-tertiary);
}

/* Enhanced Button Styles */
.btn[b-eg8cxo6hx1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--medical-space-2);
    padding: var(--medical-space-2) var(--medical-space-4);
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--medical-radius-lg);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* COMPACT BUTTON VARIANT FOR HEADERS */
.btn.compact[b-eg8cxo6hx1],
.header-actions .btn[b-eg8cxo6hx1],
.new-note-btn[b-eg8cxo6hx1],
.new-template-btn[b-eg8cxo6hx1] {
    min-height: 36px;
    padding: var(--medical-space-2) var(--medical-space-3);
    font-size: var(--medical-text-xs);
}

.btn:disabled[b-eg8cxo6hx1] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:focus[b-eg8cxo6hx1] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-primary[b-eg8cxo6hx1] {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    color: var(--medical-text-on-primary);
    border-color: var(--medical-primary);
    box-shadow: var(--medical-shadow-sm);
}

.btn-primary:hover:not(:disabled)[b-eg8cxo6hx1] {
    background: linear-gradient(135deg, var(--medical-primary-dark) 0%, #0d47a1 100%);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-md);
}

.btn-danger[b-eg8cxo6hx1] {
    background: linear-gradient(135deg, var(--medical-error) 0%, var(--medical-error-dark) 100%);
    color: var(--medical-text-on-primary);
    border-color: var(--medical-error);
    box-shadow: var(--medical-shadow-sm);
}

.btn-danger:hover:not(:disabled)[b-eg8cxo6hx1] {
    background: linear-gradient(135deg, var(--medical-error-dark) 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-md);
}

.btn-secondary[b-eg8cxo6hx1] {
    background: var(--medical-surface);
    color: var(--medical-text-primary);
    border-color: var(--medical-border);
    box-shadow: var(--medical-shadow-xs);
}

.btn-secondary:hover:not(:disabled)[b-eg8cxo6hx1] {
    background: var(--medical-surface-variant);
    border-color: var(--medical-primary);
    color: var(--medical-primary);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-sm);
}

.btn-copy[b-eg8cxo6hx1] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-1);
    padding: var(--medical-space-1) var(--medical-space-2);
    min-height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--medical-radius-md);
    font-size: var(--medical-text-xs);
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    color: var(--medical-text-secondary);
}

.btn-copy:hover[b-eg8cxo6hx1] {
    background-color: var(--medical-surface-variant);
    color: var(--medical-text-primary);
    transform: scale(1.05);
}

/* Main Content - Use natural grid sizing */
.main-content[b-eg8cxo6hx1] {
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: var(--medical-space-4);
    /* Remove fixed height - let grid handle it automatically */
}

/* Desktop layout styles */
.desktop-layout[b-eg8cxo6hx1] {
    display: none; /* Hidden by default, shown on desktop */
    gap: var(--medical-space-4);
    height: 100%;
}

/* Section Styles */
.audio-chunks-section[b-eg8cxo6hx1],
.formatted-notes-section[b-eg8cxo6hx1] {
    display: grid;
    background-color: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    box-shadow: var(--medical-shadow-md);
    overflow: hidden;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.audio-chunks-section[b-eg8cxo6hx1] {
    grid-template-rows: auto 1fr auto;
}

.formatted-notes-section[b-eg8cxo6hx1] {
    grid-template-rows: auto 1fr;
}

.audio-chunks-section:hover[b-eg8cxo6hx1],
.formatted-notes-section:hover[b-eg8cxo6hx1] {
    box-shadow: var(--medical-shadow-lg);
    transform: translateY(-2px);
}

.section-header[b-eg8cxo6hx1] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-3);
    padding: var(--medical-space-4) var(--medical-space-5);
    background: linear-gradient(135deg, var(--medical-surface-variant) 0%, var(--medical-border-light) 100%);
    border-bottom: 1px solid var(--medical-border);
}

.section-header h3[b-eg8cxo6hx1] {
    margin: 0;
    font-size: var(--medical-text-lg);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
}

.section-icon[b-eg8cxo6hx1] {
    font-size: var(--medical-text-lg);
    color: var(--medical-primary);
}

/* Audio Chunks */
.audio-chunks-list[b-eg8cxo6hx1] {
    padding: var(--medical-space-3);
    overflow-y: auto;
    flex: 1;
    scroll-behavior: smooth;
}

.audio-chunk-item[b-eg8cxo6hx1] {
    position: relative;
    background: linear-gradient(135deg, var(--medical-surface-variant) 0%, var(--medical-border-light) 100%);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-lg);
    padding: var(--medical-space-4) var(--medical-space-5) var(--medical-space-4) var(--medical-space-4);
    margin: var(--medical-space-2) 0;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.audio-chunk-item:hover[b-eg8cxo6hx1] {
    box-shadow: var(--medical-shadow-md);
    border-color: var(--medical-primary);
    transform: translateY(-1px);
}

.audio-chunk-item:last-child[b-eg8cxo6hx1] {
    margin-bottom: 0;
}

.audio-chunk-item:first-child[b-eg8cxo6hx1] {
    margin-top: 0;
}

.delete-chunk-btn[b-eg8cxo6hx1] {
    position: absolute;
    top: var(--medical-space-2);
    right: var(--medical-space-2);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--medical-surface);
    border: 1px solid var(--medical-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    z-index: 2;
    line-height: 1;
}

.delete-chunk-btn:hover[b-eg8cxo6hx1] {
    background: linear-gradient(135deg, var(--medical-error) 0%, var(--medical-error-dark) 100%);
    color: var(--medical-text-on-primary);
    border-color: var(--medical-error);
    transform: scale(1.1);
    box-shadow: var(--medical-shadow-sm);
}

.chunk-timestamp[b-eg8cxo6hx1] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    margin-bottom: var(--medical-space-3);
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
    background: var(--medical-surface);
    padding: var(--medical-space-1) var(--medical-space-3);
    border-radius: var(--medical-radius-full);
    width: fit-content;
    border: 1px solid var(--medical-border);
}

.timestamp-icon[b-eg8cxo6hx1] {
    font-size: var(--medical-text-xs);
    color: var(--medical-primary);
}

.chunk-text[b-eg8cxo6hx1] {
    font-size: var(--medical-text-sm);
    line-height: var(--medical-leading-relaxed);
    color: var(--medical-text-primary);
    margin-right: var(--medical-space-8);
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-weight: var(--medical-font-medium);
}

.audio-player-footer[b-eg8cxo6hx1] {
    padding: var(--medical-space-3) var(--medical-space-4);
    background: linear-gradient(135deg, var(--medical-surface-variant) 0%, var(--medical-border-light) 100%);
    border-top: 1px solid var(--medical-border);
}

/* Enhanced Tab Container */
.tab-container[b-eg8cxo6hx1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.tab-headers[b-eg8cxo6hx1] {
    display: flex;
    background: linear-gradient(135deg, var(--medical-surface-variant) 0%, var(--medical-border-light) 100%);
    border-bottom: 1px solid var(--medical-border);
    padding: 0 var(--medical-space-3);
    gap: var(--medical-space-1);
    align-items: center;
}

.tab-header[b-eg8cxo6hx1] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    padding: var(--medical-space-2) var(--medical-space-4);
    background-color: transparent;
    border: none;
    border-radius: var(--medical-radius-md) var(--medical-radius-md) 0 0;
    cursor: pointer;
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    position: relative;
    font-weight: var(--medical-font-medium);
}

.tab-header.active[b-eg8cxo6hx1] {
    background-color: var(--medical-surface);
    color: var(--medical-text-primary);
    box-shadow: var(--medical-shadow-sm);
    border: 1px solid var(--medical-border);
    border-bottom: 1px solid var(--medical-surface);
    margin-bottom: -1px;
    font-weight: var(--medical-font-semibold);
}

.tab-header:hover:not(.active)[b-eg8cxo6hx1] {
    background-color: var(--medical-surface);
    color: var(--medical-text-primary);
    box-shadow: var(--medical-shadow-xs);
}

.close-tab-btn[b-eg8cxo6hx1] {
    background: none;
    border: none;
    font-size: var(--medical-text-xs);
    cursor: pointer;
    color: var(--medical-text-tertiary);
    padding: var(--medical-space-1);
    border-radius: var(--medical-radius-xs);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.close-tab-btn:hover[b-eg8cxo6hx1] {
    background: linear-gradient(135deg, var(--medical-error) 0%, var(--medical-error-dark) 100%);
    color: var(--medical-text-on-primary);
}

.add-tab-btn[b-eg8cxo6hx1] {
    background: none;
    border: none;
    font-size: var(--medical-text-base);
    cursor: pointer;
    color: var(--medical-text-secondary);
    padding: var(--medical-space-1) var(--medical-space-2);
    border-radius: var(--medical-radius-md);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.add-tab-btn:hover[b-eg8cxo6hx1] {
    background-color: var(--medical-surface);
    color: var(--medical-primary);
    box-shadow: var(--medical-shadow-sm);
}

.tab-content[b-eg8cxo6hx1] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.tab-content-header[b-eg8cxo6hx1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--medical-space-2) var(--medical-space-4);
    background: var(--medical-surface-variant);
    border-bottom: 1px solid var(--medical-border);
}

.template-info[b-eg8cxo6hx1] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
}

.template-name[b-eg8cxo6hx1] {
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
}

.template-icon[b-eg8cxo6hx1] {
    font-size: var(--medical-text-sm);
    color: var(--medical-primary);
}

.formatted-text-editor[b-eg8cxo6hx1] {
    flex: 1;
    padding: var(--medical-space-5);
    border: none;
    outline: none;
    background: transparent;
    color: var(--medical-text-primary);
    font-size: var(--medical-text-sm);
    font-family: inherit;
    line-height: var(--medical-leading-relaxed);
    resize: none;
    font-weight: var(--medical-font-medium);
}

.formatted-text-editor[b-eg8cxo6hx1]::placeholder {
    color: var(--medical-text-tertiary);
    font-style: italic;
}

/* Action Bar */
.action-bar[b-eg8cxo6hx1] {
    background-color: var(--medical-surface);
    border-top: 1px solid var(--medical-border);
    box-shadow: var(--medical-shadow-sm);
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.action-bar-content[b-eg8cxo6hx1] {
    display: flex;
    justify-content: center; /* Center the format controls since recording moved to FAB */
    align-items: center;
    width: 100%;
    padding: var(--medical-space-4) var(--medical-space-6);
    max-width: 1400px;
    margin: 0 auto;
}

.format-controls[b-eg8cxo6hx1] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
}

.format-controls label[b-eg8cxo6hx1] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
}

.format-controls select[b-eg8cxo6hx1] {
    width: 140px;
    min-height: 40px;
    padding: var(--medical-space-2) var(--medical-space-3);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-md);
    background-color: var(--medical-surface);
    color: var(--medical-text-primary);
    font-size: var(--medical-text-sm);
    font-family: inherit;
    font-weight: var(--medical-font-medium);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .header-content[b-eg8cxo6hx1] {
        grid-template-columns: auto minmax(350px, auto) 1fr auto;
        gap: var(--medical-space-4);
    }

    .header-title[b-eg8cxo6hx1] {
        max-width: 120px;
    }

    .suggest-box[b-eg8cxo6hx1] {
        width: 140px;
    }

    .header-inputs[b-eg8cxo6hx1] {
        gap: var(--medical-space-4);
        min-width: 350px;
    }
}

@media (max-width: 768px) {
    .main-content[b-eg8cxo6hx1] {
        gap: var(--medical-space-3);
        padding: var(--medical-space-3);
        /* Remove problematic height calculations */
    }

    .header-content[b-eg8cxo6hx1] {
        grid-template-columns: 1fr auto;
        gap: var(--medical-space-3);
        padding: var(--medical-space-4) var(--medical-space-5);
        min-height: 72px;
    }

    .header-title[b-eg8cxo6hx1] {
        font-size: var(--medical-text-lg);
    }

    .header-actions[b-eg8cxo6hx1] {
        gap: var(--medical-space-1);
    }

    /* HIDE desktop inputs on mobile - they'll be in the mobile bar instead */
    .header-inputs[b-eg8cxo6hx1] {
        display: none;
    }

    /* SHOW mobile inputs bar */
    .mobile-inputs-bar[b-eg8cxo6hx1] {
        display: block;
    }

    /* Mobile action bar with better visibility */
    .action-bar-content[b-eg8cxo6hx1] {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--medical-space-3);
        padding: var(--medical-space-3) var(--medical-space-4);
        justify-content: center;
        align-items: center;
        min-height: var(--mobile-action-bar-height);
    }

    /* Mobile format controls - horizontal layout with visible text */
    .format-controls[b-eg8cxo6hx1] {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: var(--medical-space-2);
        justify-content: center;
        align-items: center;
        min-width: 0;
    }

    .format-controls label[b-eg8cxo6hx1] {
        font-size: var(--medical-text-xs);
        white-space: nowrap;
    }

    .format-controls select[b-eg8cxo6hx1] {
        width: var(--mobile-select-width);
        min-height: var(--mobile-btn-size);
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-2);
    }

    /* Mobile buttons - larger with visible text */
    .format-controls .btn[b-eg8cxo6hx1] {
        padding: var(--medical-space-2) var(--medical-space-3);
        min-height: var(--mobile-btn-size);
        font-size: var(--medical-text-xs);
        min-width: auto;
        justify-content: center;
        gap: var(--medical-space-1);
        flex-shrink: 0;
    }

    /* Show button text on mobile */
    .format-controls .btn span:not(.icon):not(.spinner)[b-eg8cxo6hx1] {
        display: inline;
        white-space: nowrap;
    }

    .format-controls .btn .icon[b-eg8cxo6hx1] {
        font-size: var(--medical-text-sm);
    }

    .section-header h3[b-eg8cxo6hx1] {
        font-size: var(--medical-text-base);
    }

    .chunk-text[b-eg8cxo6hx1] {
        font-size: var(--medical-text-sm);
        margin-right: var(--medical-space-6);
    }

    .formatted-text-editor[b-eg8cxo6hx1] {
        font-size: var(--medical-text-sm);
        padding: var(--medical-space-4);
    }

    /* Mobile carousel section improvements */
    .mobile-carousel-section.audio-chunks-section[b-eg8cxo6hx1] {
        margin-bottom: 0;
    }

    /* Mobile specific button styles */
    .btn[b-eg8cxo6hx1] {
        min-height: 44px;
        padding: var(--medical-space-3) var(--medical-space-4);
        font-size: var(--medical-text-sm);
    }

    .header-actions .btn[b-eg8cxo6hx1] {
        padding: var(--medical-space-2) var(--medical-space-3);
        min-height: 36px;
    }

    .header-actions .btn .icon[b-eg8cxo6hx1] {
        font-size: var(--medical-text-sm);
    }

    .header-actions .btn span:not(.icon)[b-eg8cxo6hx1] {
        display: none; /* Hide button text on mobile */
    }
}

@media (max-width: 640px) {
    /* MOBILE HEADER FIXES: Remove top padding, add left margin for menu button */
    .header-content[b-eg8cxo6hx1] {
        padding: var(--medical-space-4) var(--medical-space-5); /* NO CHANGE TO VERTICAL PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
    }
    
    .header-title[b-eg8cxo6hx1] {
        margin-left: var(--mobile-header-left-margin); /* ACCOMMODATE MOBILE MENU BUTTON */
        font-size: var(--medical-text-base);
    }

    /* More compact mobile inputs */
    .mobile-inputs-bar[b-eg8cxo6hx1] {
        padding: var(--medical-space-2) var(--medical-space-3);
    }

    .mobile-inputs-content[b-eg8cxo6hx1] {
        gap: var(--medical-space-2);
    }

    .mobile-suggest-box[b-eg8cxo6hx1] {
        min-height: 38px;
        padding: var(--medical-space-2);
        font-size: var(--medical-text-sm);
    }

    .main-content[b-eg8cxo6hx1] {
        padding: var(--medical-space-2);
        gap: var(--medical-space-2);
    }

    /* Mobile action bar with better spacing */
    .action-bar-content[b-eg8cxo6hx1] {
        padding: var(--medical-space-2) var(--medical-space-3);
        gap: var(--medical-space-2);
        min-height: var(--mobile-action-bar-height);
        max-height: var(--mobile-action-bar-height);
    }

    /* Mobile controls with better sizing */
    .format-controls[b-eg8cxo6hx1] {
        gap: var(--medical-space-2);
    }

    .format-controls select[b-eg8cxo6hx1] {
        width: var(--mobile-select-width);
        min-height: var(--mobile-btn-size);
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-2);
    }

    .format-controls .btn[b-eg8cxo6hx1] {
        min-height: var(--mobile-btn-size);
        padding: var(--medical-space-2) var(--medical-space-3);
        border-radius: var(--medical-radius-md);
        font-size: var(--medical-text-xs);
    }

    .format-controls .btn .icon[b-eg8cxo6hx1] {
        font-size: var(--medical-text-sm);
    }

    .section-header[b-eg8cxo6hx1] {
        padding: var(--medical-space-3) var(--medical-space-4);
    }

    .audio-chunks-list[b-eg8cxo6hx1] {
        padding: var(--medical-space-2);
    }

    .formatted-text-editor[b-eg8cxo6hx1] {
        padding: var(--medical-space-3);
        font-size: var(--medical-text-sm);
    }

    .tab-headers[b-eg8cxo6hx1] {
        padding: 0 var(--medical-space-2);
    }

    .tab-content-header[b-eg8cxo6hx1] {
        padding: var(--medical-space-2) var(--medical-space-3);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--medical-space-2);
    }
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
    /* Keep mobile carousel in landscape too for consistency */
    .desktop-layout[b-eg8cxo6hx1] {
        display: none;
    }
    
    .mobile-carousel-container[b-eg8cxo6hx1] {
        display: block;
    }

    /* More compact mobile inputs in landscape */
    .mobile-inputs-bar[b-eg8cxo6hx1] {
        padding: var(--medical-space-1) var(--medical-space-3);
    }

    .mobile-suggest-box[b-eg8cxo6hx1] {
        min-height: 36px;
    }

    /* Landscape-specific action bar */
    .action-bar-content[b-eg8cxo6hx1] {
        padding: var(--medical-space-2) var(--medical-space-3);
        min-height: 48px;
        max-height: 48px;
    }

    .format-controls .btn[b-eg8cxo6hx1] {
        min-height: 36px;
        padding: var(--medical-space-2) var(--medical-space-3);
    }

    .format-controls select[b-eg8cxo6hx1] {
        min-height: 36px;
        font-size: var(--medical-text-xs);
    }
}

/* Touch-friendly improvements */
@media (pointer: coarse) {
    .btn[b-eg8cxo6hx1] {
        min-height: 44px;
    }

    .tab-header[b-eg8cxo6hx1] {
        min-height: 44px;
        padding: var(--medical-space-3) var(--medical-space-4);
    }

    .close-tab-btn[b-eg8cxo6hx1] {
        width: 24px;
        height: 24px;
        padding: var(--medical-space-1);
    }

    .delete-chunk-btn[b-eg8cxo6hx1] {
        width: 28px;
        height: 28px;
    }

    /* Touch-friendly action bar on mobile */
    @media (max-width: 640px) {
        .action-bar-content .btn[b-eg8cxo6hx1] {
            min-height: var(--mobile-btn-size);
            padding: var(--medical-space-2) var(--medical-space-3);
        }

        .format-controls select[b-eg8cxo6hx1] {
            min-height: var(--mobile-btn-size);
        }

        /* Touch-friendly input boxes */
        .mobile-suggest-box[b-eg8cxo6hx1] {
            min-height: 44px;
            padding: var(--medical-space-2) var(--medical-space-3);
        }
        
        /* Touch-friendly FAB */
        .recording-fab-button[b-eg8cxo6hx1] {
            min-width: 56px !important;
            min-height: 56px !important;
        }
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 640px) {
    /* Ensure buttons with visible text have proper focus indicators */
    .btn:focus-visible[b-eg8cxo6hx1] {
        outline: 2px solid var(--medical-primary);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }

    /* Better contrast for buttons */
    .format-controls .btn .icon[b-eg8cxo6hx1] {
        filter: contrast(1.2);
    }
    
    /* Ensure FAB has good focus indicators */
    .recording-fab-button:focus-visible[b-eg8cxo6hx1] {
        outline: 2px solid var(--medical-primary);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), var(--medical-shadow-lg);
    }
}

/* Print Styles */
@media print {
    .header[b-eg8cxo6hx1],
    .action-bar[b-eg8cxo6hx1],
    .mobile-inputs-bar[b-eg8cxo6hx1],
    .recording-fab[b-eg8cxo6hx1] {
        box-shadow: none;
        border-color: #000;
    }
    
    .recording-fab[b-eg8cxo6hx1] {
        display: none;
    }
    
    .audio-chunk-item[b-eg8cxo6hx1] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .btn[b-eg8cxo6hx1],
    .mobile-inputs-bar[b-eg8cxo6hx1],
    .mobile-carousel-container[b-eg8cxo6hx1] {
        display: none;
    }
    
    .desktop-layout[b-eg8cxo6hx1] {
        display: grid !important;
    }
}
/* /Pages/NotesList.razor.rz.scp.css */
/* Notes List Page - Modern Medical App Design */

.notes-list-page[b-f3no7t2dzt] {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    background-color: var(--medical-background);
}

/* Notes Header - STANDARDIZED TO MATCH NAVIGATION DRAWER */
.notes-header[b-f3no7t2dzt] {
    background-color: var(--medical-surface);
    border-bottom: 1px solid var(--medical-border);
    box-shadow: var(--medical-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 72px; /* MATCH NAVIGATION DRAWER HEIGHT */
}

.notes-header-content[b-f3no7t2dzt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--medical-space-1) var(--medical-space-5); /* MATCH NAVIGATION DRAWER PADDING */
    max-width: 1200px;
    margin: 0 auto;
    min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
}

.page-title[b-f3no7t2dzt] {
    font-size: var(--medical-text-3xl);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

/* Desktop filter controls - shown inline on desktop */
.desktop-filters[b-f3no7t2dzt] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-1);
    background: var(--medical-surface-variant);
    padding: var(--medical-space-1);
    border-radius: var(--medical-radius-lg);
    border: 1px solid var(--medical-border);
}

/* Mobile filter controls - hidden by default, shown below header on mobile */
.mobile-filters-row[b-f3no7t2dzt] {
    display: none;
    padding: var(--medical-space-3) var(--medical-space-5);
    border-bottom: 1px solid var(--medical-border);
    background-color: var(--medical-surface);
}

.mobile-filters[b-f3no7t2dzt] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    background: var(--medical-surface-variant);
    padding: var(--medical-space-2);
    border-radius: var(--medical-radius-lg);
    border: 1px solid var(--medical-border);
    max-width: 1200px;
    margin: 0 auto;
}

.filter-textbox[b-f3no7t2dzt],
.filter-datepicker[b-f3no7t2dzt] {
    width: 200px;
    min-height: 36px; /* REDUCED FROM 40px FOR HEADER COMPATIBILITY */
    padding: var(--medical-space-2) var(--medical-space-3);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-md);
    background-color: var(--medical-surface);
    color: var(--medical-text-primary);
    font-size: var(--medical-text-sm);
    font-family: inherit;
    font-weight: var(--medical-font-medium);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.filter-textbox:focus[b-f3no7t2dzt],
.filter-datepicker:focus[b-f3no7t2dzt] {
    outline: none;
    border-color: var(--medical-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: var(--medical-surface);
}

.filter-textbox[b-f3no7t2dzt]::placeholder {
    color: var(--medical-text-tertiary);
}

.filter-datepicker[b-f3no7t2dzt] {
    width: 160px;
}

.filter-clear-btn[b-f3no7t2dzt] {
    width: 36px; /* REDUCED FROM 40px */
    height: 36px; /* REDUCED FROM 40px */
    background-color: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--medical-text-secondary);
    font-size: var(--medical-text-sm);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.filter-clear-btn:hover[b-f3no7t2dzt] {
    background-color: var(--medical-error);
    border-color: var(--medical-error);
    color: var(--medical-text-on-primary);
    transform: scale(1.05);
}

/* Enhanced Button Styles */
.btn[b-f3no7t2dzt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--medical-space-2);
    padding: var(--medical-space-3) var(--medical-space-5);
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--medical-radius-lg);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* COMPACT BUTTON VARIANT FOR HEADERS */
.btn.compact[b-f3no7t2dzt],
.header-actions .btn[b-f3no7t2dzt],
.new-note-btn[b-f3no7t2dzt],
.new-template-btn[b-f3no7t2dzt] {
    min-height: 36px;
    padding: var(--medical-space-2) var(--medical-space-3);
    font-size: var(--medical-text-xs);
}

.btn:disabled[b-f3no7t2dzt] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:focus[b-f3no7t2dzt] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-primary[b-f3no7t2dzt] {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    color: var(--medical-text-on-primary);
    border-color: var(--medical-primary);
    box-shadow: var(--medical-shadow-md);
}

.btn-primary:hover:not(:disabled)[b-f3no7t2dzt] {
    background: linear-gradient(135deg, var(--medical-primary-dark) 0%, #0d47a1 100%);
    transform: translateY(-2px);
    box-shadow: var(--medical-shadow-lg);
}

.btn-primary:active[b-f3no7t2dzt] {
    transform: translateY(0);
    box-shadow: var(--medical-shadow-sm);
}

.new-note-btn[b-f3no7t2dzt] {
    min-height: 36px; /* REDUCED FROM 48px FOR HEADER COMPATIBILITY */
    min-width: 120px; /* REDUCED FROM 140px */
    border-radius: var(--medical-radius-lg);
    font-weight: var(--medical-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: var(--medical-text-xs); /* SLIGHTLY SMALLER FONT */
    padding: var(--medical-space-2) var(--medical-space-4); /* REDUCED PADDING */
}

.new-note-btn[b-f3no7t2dzt]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--medical-transition-slow) var(--medical-ease-out);
}

.new-note-btn:hover[b-f3no7t2dzt]::before {
    left: 100%;
}

/* Notes Content */
.notes-content[b-f3no7t2dzt] {
    padding: var(--medical-space-8);
    overflow-y: auto;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.notes-list[b-f3no7t2dzt] {
    display: grid;
    gap: var(--medical-space-4);
}

/* Enhanced Note Card */
.note-card[b-f3no7t2dzt] {
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    padding: var(--medical-space-6);
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    box-shadow: var(--medical-shadow-sm);
    position: relative;
    overflow: hidden;
}

.note-card[b-f3no7t2dzt]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.note-card:hover[b-f3no7t2dzt] {
    box-shadow: var(--medical-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--medical-primary);
}

.note-card:hover[b-f3no7t2dzt]::before {
    background: linear-gradient(90deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
}

.note-card:active[b-f3no7t2dzt] {
    transform: translateY(-2px);
    box-shadow: var(--medical-shadow-md);
}

.note-card-header[b-f3no7t2dzt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--medical-space-3);
    gap: var(--medical-space-4);
}

.patient-name[b-f3no7t2dzt] {
    font-size: var(--medical-text-xl);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin: 0;
    line-height: var(--medical-leading-tight);
}

.note-date[b-f3no7t2dzt] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
    white-space: nowrap;
    background: var(--medical-surface-variant);
    padding: var(--medical-space-1) var(--medical-space-3);
    border-radius: var(--medical-radius-full);
    border: 1px solid var(--medical-border);
}

.provider-info[b-f3no7t2dzt] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    margin-bottom: var(--medical-space-4);
    padding: var(--medical-space-2) var(--medical-space-3);
    background: var(--medical-surface-variant);
    border-radius: var(--medical-radius-md);
    border: 1px solid var(--medical-border);
    width: fit-content;
}

.provider-icon[b-f3no7t2dzt] {
    font-size: var(--medical-text-sm);
    color: var(--medical-primary);
}

.provider-name[b-f3no7t2dzt] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
}

.note-preview[b-f3no7t2dzt] {
    margin-top: var(--medical-space-4);
}

.preview-text[b-f3no7t2dzt] {
    padding: var(--medical-space-4);
    background: linear-gradient(135deg, var(--medical-surface-variant) 0%, var(--medical-border-light) 100%);
    border-radius: var(--medical-radius-lg);
    font-size: var(--medical-text-sm);
    color: var(--medical-text-primary);
    line-height: var(--medical-leading-relaxed);
    max-height: 80px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    position: relative;
    border: 1px solid var(--medical-border);
}

.preview-text[b-f3no7t2dzt]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, var(--medical-surface-variant));
    pointer-events: none;
}

/* Empty State */
.empty-state[b-f3no7t2dzt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--medical-space-20) var(--medical-space-8);
    text-align: center;
    min-height: 400px;
    background: var(--medical-surface);
    border-radius: var(--medical-radius-xl);
    border: 2px dashed var(--medical-border);
    margin: var(--medical-space-4) 0;
}

.empty-state-icon[b-f3no7t2dzt] {
    font-size: 4rem;
    margin-bottom: var(--medical-space-6);
    color: var(--medical-text-tertiary);
    opacity: 0.6;
}

.empty-state-title[b-f3no7t2dzt] {
    font-size: var(--medical-text-xl);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-secondary);
    margin: 0 0 var(--medical-space-2) 0;
}

.empty-state-subtitle[b-f3no7t2dzt] {
    font-size: var(--medical-text-base);
    color: var(--medical-text-tertiary);
    margin: 0 0 var(--medical-space-6) 0;
    max-width: 400px;
    line-height: var(--medical-leading-relaxed);
}

.empty-state-action[b-f3no7t2dzt] {
    margin-top: var(--medical-space-4);
}

/* Note Status Indicators */
.note-status[b-f3no7t2dzt] {
    display: inline-flex;
    align-items: center;
    gap: var(--medical-space-1);
    padding: var(--medical-space-1) var(--medical-space-2);
    border-radius: var(--medical-radius-full);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.note-status.draft[b-f3no7t2dzt] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--medical-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.note-status.completed[b-f3no7t2dzt] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--medical-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.note-status.reviewed[b-f3no7t2dzt] {
    background: rgba(25, 118, 210, 0.1);
    color: var(--medical-primary);
    border: 1px solid rgba(25, 118, 210, 0.2);
}

/* Loading State */
.notes-loading[b-f3no7t2dzt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--medical-space-16);
    text-align: center;
}

.notes-loading .spinner[b-f3no7t2dzt] {
    width: 40px;
    height: 40px;
    margin-bottom: var(--medical-space-4);
}

.loading-text[b-f3no7t2dzt] {
    font-size: var(--medical-text-base);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
}

/* Search Highlight */
.search-highlight[b-f3no7t2dzt] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.3) 100%);
    padding: 1px 2px;
    border-radius: var(--medical-radius-xs);
    font-weight: var(--medical-font-semibold);
}

/* Responsive Design */
@media (max-width: 768px) {
    .notes-content[b-f3no7t2dzt] {
        padding: var(--medical-space-4);
    }

    .note-card[b-f3no7t2dzt] {
        padding: var(--medical-space-4);
    }

    .notes-header-content[b-f3no7t2dzt] {
        padding: var(--medical-space-4) var(--medical-space-5); /* MAINTAIN CONSISTENT PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
    }

    /* Hide desktop filters, show mobile filters */
    .desktop-filters[b-f3no7t2dzt] {
        display: none;
    }

    .mobile-filters-row[b-f3no7t2dzt] {
        display: block;
    }

    .mobile-filters .filter-textbox[b-f3no7t2dzt],
    .mobile-filters .filter-datepicker[b-f3no7t2dzt] {
        width: 160px;
        min-height: 32px;
        font-size: var(--medical-text-xs);
    }
    
    .mobile-filters .filter-datepicker[b-f3no7t2dzt] {
        width: 140px;
    }
    
    .mobile-filters .filter-clear-btn[b-f3no7t2dzt] {
        width: 32px;
        height: 32px;
    }

    .page-title[b-f3no7t2dzt] {
        font-size: var(--medical-text-2xl);
    }

    .patient-name[b-f3no7t2dzt] {
        font-size: var(--medical-text-lg);
    }

    .note-date[b-f3no7t2dzt] {
        font-size: var(--medical-text-xs);
    }

    .provider-name[b-f3no7t2dzt] {
        font-size: var(--medical-text-xs);
    }

    .preview-text[b-f3no7t2dzt] {
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-3);
        max-height: 60px;
        -webkit-line-clamp: 2;
    }

    .new-note-btn[b-f3no7t2dzt] {
        min-width: 100px; /* Smaller width for tablet view */
        min-height: 36px;
    }

    .empty-state[b-f3no7t2dzt] {
        padding: var(--medical-space-12) var(--medical-space-4);
    }

    .empty-state-icon[b-f3no7t2dzt] {
        font-size: 3rem;
    }

    .empty-state-title[b-f3no7t2dzt] {
        font-size: var(--medical-text-lg);
    }

    .empty-state-subtitle[b-f3no7t2dzt] {
        font-size: var(--medical-text-sm);
    }
}

@media (max-width: 640px) {
    .notes-header-content[b-f3no7t2dzt] {
        padding: var(--medical-space-4) var(--medical-space-5); /* NO CHANGE TO VERTICAL PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
        flex-direction: row;
        gap: var(--medical-space-2); /* Reduce gap for mobile */
    }

    /* MOBILE HEADER FIXES: Add left margin for menu button */
    .page-title[b-f3no7t2dzt] {
        margin-left: var(--mobile-header-left-margin); /* ACCOMMODATE MOBILE MENU BUTTON */
        font-size: var(--medical-text-xl);
        flex: 1; /* Allow title to take available space */
        text-align: left; /* Ensure left alignment */
    }

    .new-note-btn[b-f3no7t2dzt] {
        min-width: 80px; /* Smaller width for mobile */
        min-height: 36px; /* Slightly smaller for mobile header */
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-2) var(--medical-space-3); /* Compact padding */
        flex-shrink: 0; /* Prevent button from shrinking */
    }

    .mobile-filters[b-f3no7t2dzt] {
        flex-wrap: nowrap; /* Never wrap filter controls */
        gap: var(--medical-space-1);
    }

    .mobile-filters .filter-textbox[b-f3no7t2dzt] {
        flex: 1;
        min-width: 120px;
    }

    .mobile-filters .filter-datepicker[b-f3no7t2dzt] {
        flex-shrink: 0;
        width: 120px;
    }

    .note-card-header[b-f3no7t2dzt] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--medical-space-2);
    }

    .note-date[b-f3no7t2dzt] {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .notes-header-content[b-f3no7t2dzt] {
        padding: var(--medical-space-4) var(--medical-space-4); /* Slightly reduce side padding on very small screens */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
        gap: var(--medical-space-2); /* Keep minimal gap */
    }

    .page-title[b-f3no7t2dzt] {
        font-size: var(--medical-text-lg); /* Even smaller title on very small screens */
        margin-left: var(--mobile-header-left-margin);
    }

    .new-note-btn[b-f3no7t2dzt] {
        min-width: 70px; /* Very compact for small screens */
        font-size: 10px; /* Smaller text */
        padding: var(--medical-space-1) var(--medical-space-2); /* Very compact padding */
    }

    .mobile-filters[b-f3no7t2dzt] {
        gap: var(--medical-space-1);
        padding: var(--medical-space-1);
    }

    .mobile-filters .filter-textbox[b-f3no7t2dzt] {
        min-width: 100px;
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-1) var(--medical-space-2);
    }

    .mobile-filters .filter-datepicker[b-f3no7t2dzt] {
        width: 100px;
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-1) var(--medical-space-2);
    }

    .mobile-filters .filter-clear-btn[b-f3no7t2dzt] {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    .note-card-header[b-f3no7t2dzt] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--medical-space-2);
    }

    .note-date[b-f3no7t2dzt] {
        align-self: flex-end;
    }
}

/* Focus Management */
.note-card:focus-visible[b-f3no7t2dzt] {
    outline: 2px solid var(--medical-primary);
    outline-offset: 2px;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .note-card[b-f3no7t2dzt] {
        border-width: 2px;
    }
    
    .note-card:hover[b-f3no7t2dzt] {
        border-color: #000;
    }
    
    .filter-controls[b-f3no7t2dzt] {
        border-width: 2px;
    }
}

/* Print Styles */
@media print {
    .notes-header[b-f3no7t2dzt] {
        box-shadow: none;
        border-bottom: 2px solid #000;
    }
    
    .note-card[b-f3no7t2dzt] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .filter-controls[b-f3no7t2dzt],
    .new-note-btn[b-f3no7t2dzt] {
        display: none;
    }
}
/* /Pages/Settings.razor.rz.scp.css */
/* Settings Page - Modern Medical App Design */

.settings-page[b-8f4ac0fw76] {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    background-color: var(--medical-background);
}

/* Settings Header - STANDARDIZED TO MATCH NAVIGATION DRAWER */
.settings-header[b-8f4ac0fw76] {
    background-color: var(--medical-surface);
    border-bottom: 1px solid var(--medical-border);
    box-shadow: var(--medical-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 72px; /* MATCH NAVIGATION DRAWER HEIGHT */
}

.settings-header-content[b-8f4ac0fw76] {
    padding: var(--medical-space-4) var(--medical-space-5); /* CONSISTENT PADDING */
    max-width: 1200px;
    margin: 0 auto;
    min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
    display: flex;
    align-items: center;
}

.page-title[b-8f4ac0fw76] {
    font-size: var(--medical-text-3xl);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

/* Settings Content */
.settings-content[b-8f4ac0fw76] {
    overflow-y: auto;
    padding: var(--medical-space-8);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.settings-content > section[b-8f4ac0fw76] {
    margin-bottom: var(--medical-space-8);
}

/* Settings Section */
.settings-section[b-8f4ac0fw76] {
    background-color: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    padding: var(--medical-space-8);
    box-shadow: var(--medical-shadow-md);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.settings-section:hover[b-8f4ac0fw76] {
    box-shadow: var(--medical-shadow-lg);
    transform: translateY(-2px);
}

.section-title[b-8f4ac0fw76] {
    font-size: var(--medical-text-2xl);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin: 0 0 var(--medical-space-6) 0;
    display: flex;
    align-items: center;
    gap: var(--medical-space-3);
}

.section-title[b-8f4ac0fw76]::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
    border-radius: var(--medical-radius-sm);
}

/* Setting Group */
.setting-group[b-8f4ac0fw76] {
    margin-bottom: var(--medical-space-6);
}

.setting-group:last-child[b-8f4ac0fw76] {
    margin-bottom: 0;
}

.setting-label[b-8f4ac0fw76] {
    display: block;
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin-bottom: var(--medical-space-3);
}

/* Enhanced Form Controls */
.setting-input[b-8f4ac0fw76],
.microphone-select[b-8f4ac0fw76],
.theme-select[b-8f4ac0fw76],
.language-select[b-8f4ac0fw76],
.folder-path-input[b-8f4ac0fw76] {
    width: 100%;
    max-width: 400px;
    min-height: 44px;
    padding: var(--medical-space-3) var(--medical-space-4);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-lg);
    background-color: var(--medical-surface);
    color: var(--medical-text-primary);
    font-size: var(--medical-text-sm);
    font-family: inherit;
    font-weight: var(--medical-font-medium);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    box-shadow: var(--medical-shadow-xs);
}

.setting-input:focus[b-8f4ac0fw76],
.microphone-select:focus[b-8f4ac0fw76],
.theme-select:focus[b-8f4ac0fw76],
.language-select:focus[b-8f4ac0fw76] {
    outline: none;
    border-color: var(--medical-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--medical-shadow-sm);
    background-color: var(--medical-surface);
}

.setting-input[b-8f4ac0fw76]::placeholder {
    color: var(--medical-text-tertiary);
}

.folder-path-input[b-8f4ac0fw76] {
    background-color: var(--medical-surface-variant);
    color: var(--medical-text-secondary);
    cursor: not-allowed;
}

/* Microphone Permission Info */
.microphone-permission-info[b-8f4ac0fw76] {
    margin-bottom: var(--medical-space-3);
}

.info-text[b-8f4ac0fw76] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    padding: var(--medical-space-3) var(--medical-space-4);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--medical-radius-lg);
    font-size: var(--medical-text-sm);
    color: var(--medical-primary-dark);
    margin: 0;
    font-weight: var(--medical-font-medium);
}

.info-icon[b-8f4ac0fw76] {
    font-size: var(--medical-text-base);
    flex-shrink: 0;
}

/* Folder Selector */
.folder-selector[b-8f4ac0fw76] {
    display: flex;
    gap: var(--medical-space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}

.folder-selector .setting-input[b-8f4ac0fw76] {
    flex: 1;
    min-width: 300px;
}

/* Enhanced Button System */
.btn[b-8f4ac0fw76] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--medical-space-2);
    padding: var(--medical-space-3) var(--medical-space-5);
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--medical-radius-lg);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn:disabled[b-8f4ac0fw76] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:focus[b-8f4ac0fw76] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-primary[b-8f4ac0fw76] {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    color: var(--medical-text-on-primary);
    border-color: var(--medical-primary);
    box-shadow: var(--medical-shadow-sm);
}

.btn-primary:hover:not(:disabled)[b-8f4ac0fw76] {
    background: linear-gradient(135deg, var(--medical-primary-dark) 0%, #0d47a1 100%);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-md);
}

.btn-secondary[b-8f4ac0fw76] {
    background: var(--medical-surface);
    color: var(--medical-text-primary);
    border-color: var(--medical-border);
    box-shadow: var(--medical-shadow-xs);
}

.btn-secondary:hover:not(:disabled)[b-8f4ac0fw76] {
    background: var(--medical-surface-variant);
    border-color: var(--medical-primary);
    color: var(--medical-primary);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-sm);
}

.btn-success[b-8f4ac0fw76] {
    background: linear-gradient(135deg, var(--medical-success) 0%, var(--medical-success-dark) 100%);
    color: var(--medical-text-on-primary);
    border-color: var(--medical-success);
    box-shadow: var(--medical-shadow-sm);
}

.btn-success:hover:not(:disabled)[b-8f4ac0fw76] {
    background: linear-gradient(135deg, var(--medical-success-dark) 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-md);
}

.btn-icon[b-8f4ac0fw76] {
    font-size: var(--medical-text-sm);
}

/* Microphone Actions */
.microphone-actions[b-8f4ac0fw76] {
    margin-top: var(--medical-space-3);
    display: flex;
    gap: var(--medical-space-3);
    flex-wrap: wrap;
}

/* Enhanced Volume Control */
.volume-control[b-8f4ac0fw76] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-4);
    padding: var(--medical-space-4);
    background: var(--medical-surface-variant);
    border-radius: var(--medical-radius-lg);
    border: 1px solid var(--medical-border);
}

.volume-slider[b-8f4ac0fw76] {
    width: 200px;
    height: 8px;
    background: linear-gradient(90deg, var(--medical-border-light) 0%, var(--medical-border) 100%);
    border-radius: var(--medical-radius-full);
    outline: none;
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    appearance: none;
}

.volume-slider:hover[b-8f4ac0fw76] {
    height: 10px;
}

.volume-slider[b-8f4ac0fw76]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--medical-surface);
    box-shadow: var(--medical-shadow-md);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.volume-slider:hover[b-8f4ac0fw76]::-webkit-slider-thumb {
    transform: scale(1.2);
    box-shadow: var(--medical-shadow-lg);
}

.volume-slider[b-8f4ac0fw76]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--medical-surface);
    box-shadow: var(--medical-shadow-md);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.volume-value[b-8f4ac0fw76] {
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    min-width: 50px;
    text-align: center;
    background: var(--medical-surface);
    padding: var(--medical-space-2) var(--medical-space-3);
    border-radius: var(--medical-radius-md);
    border: 1px solid var(--medical-border);
}

/* Enhanced Checkbox Settings */
.checkbox-setting[b-8f4ac0fw76] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-3);
    cursor: pointer;
    padding: var(--medical-space-4);
    background: var(--medical-surface-variant);
    border-radius: var(--medical-radius-lg);
    border: 1px solid var(--medical-border);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.checkbox-setting:hover[b-8f4ac0fw76] {
    background: var(--medical-surface);
    box-shadow: var(--medical-shadow-sm);
    transform: translateY(-1px);
}

.setting-checkbox[b-8f4ac0fw76] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--medical-border);
    border-radius: var(--medical-radius-sm);
    background-color: var(--medical-surface);
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    appearance: none;
    position: relative;
    flex-shrink: 0;
}

.setting-checkbox:checked[b-8f4ac0fw76] {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    border-color: var(--medical-primary);
}

.setting-checkbox:checked[b-8f4ac0fw76]::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--medical-text-on-primary);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-bold);
}

.setting-checkbox:focus[b-8f4ac0fw76] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.checkbox-label[b-8f4ac0fw76] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-primary);
    cursor: pointer;
    user-select: none;
    font-weight: var(--medical-font-medium);
    line-height: var(--medical-leading-relaxed);
}

/* Setting Description */
.setting-description[b-8f4ac0fw76] {
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    margin-top: var(--medical-space-1);
    line-height: var(--medical-leading-relaxed);
}

/* Setting Status Indicators */
.setting-status[b-8f4ac0fw76] {
    display: inline-flex;
    align-items: center;
    gap: var(--medical-space-1);
    padding: var(--medical-space-1) var(--medical-space-2);
    border-radius: var(--medical-radius-full);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.setting-status.connected[b-8f4ac0fw76] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--medical-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.setting-status.disconnected[b-8f4ac0fw76] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--medical-error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.setting-status.warning[b-8f4ac0fw76] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--medical-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Permission Status */
.permission-status[b-8f4ac0fw76] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    margin-top: var(--medical-space-2);
    padding: var(--medical-space-3);
    background: var(--medical-surface-variant);
    border-radius: var(--medical-radius-md);
    border: 1px solid var(--medical-border);
}

.permission-icon[b-8f4ac0fw76] {
    font-size: var(--medical-text-base);
}

.permission-text[b-8f4ac0fw76] {
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
}

.permission-status.granted[b-8f4ac0fw76] {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.permission-status.granted .permission-icon[b-8f4ac0fw76] {
    color: var(--medical-success);
}

.permission-status.granted .permission-text[b-8f4ac0fw76] {
    color: var(--medical-success-dark);
}

.permission-status.denied[b-8f4ac0fw76] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.permission-status.denied .permission-icon[b-8f4ac0fw76] {
    color: var(--medical-error);
}

.permission-status.denied .permission-text[b-8f4ac0fw76] {
    color: var(--medical-error-dark);
}

/* Responsive Design */
@media (max-width: 768px) {
    .settings-content[b-8f4ac0fw76] {
        padding: var(--medical-space-4);
    }

    .settings-section[b-8f4ac0fw76] {
        padding: var(--medical-space-4);
    }

    .settings-header-content[b-8f4ac0fw76] {
        padding: var(--medical-space-4) var(--medical-space-5); /* MAINTAIN CONSISTENT PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
    }

    .page-title[b-8f4ac0fw76] {
        font-size: var(--medical-text-2xl);
    }

    .section-title[b-8f4ac0fw76] {
        font-size: var(--medical-text-xl);
    }

    .folder-selector[b-8f4ac0fw76] {
        flex-direction: column;
        align-items: stretch;
    }

    .folder-selector .setting-input[b-8f4ac0fw76] {
        min-width: 100%;
        margin-bottom: var(--medical-space-3);
    }

    .folder-selector .btn[b-8f4ac0fw76] {
        width: 100%;
    }

    .setting-input[b-8f4ac0fw76],
    .microphone-select[b-8f4ac0fw76],
    .theme-select[b-8f4ac0fw76],
    .language-select[b-8f4ac0fw76] {
        max-width: none;
        width: 100%;
    }

    .microphone-actions[b-8f4ac0fw76] {
        flex-direction: column;
    }

    .microphone-actions .btn[b-8f4ac0fw76] {
        width: 100%;
    }

    .volume-control[b-8f4ac0fw76] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--medical-space-3);
    }

    .volume-slider[b-8f4ac0fw76] {
        width: 100%;
    }

    .volume-value[b-8f4ac0fw76] {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .settings-content[b-8f4ac0fw76] {
        padding: var(--medical-space-3);
    }

    .settings-section[b-8f4ac0fw76] {
        padding: var(--medical-space-4);
    }

    /* MOBILE HEADER FIXES: Remove top padding, add left margin for menu button */
    .settings-header-content[b-8f4ac0fw76] {
        padding: var(--medical-space-4) var(--medical-space-5); /* NO CHANGE TO VERTICAL PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
    }
    
    .page-title[b-8f4ac0fw76] {
        margin-left: var(--mobile-header-left-margin); /* ACCOMMODATE MOBILE MENU BUTTON */
        font-size: var(--medical-text-xl);
    }

    .setting-group[b-8f4ac0fw76] {
        margin-bottom: var(--medical-space-5);
    }

    .section-title[b-8f4ac0fw76] {
        font-size: var(--medical-text-lg);
        margin-bottom: var(--medical-space-4);
    }

    .setting-label[b-8f4ac0fw76] {
        font-size: var(--medical-text-xs);
    }

    .checkbox-label[b-8f4ac0fw76] {
        font-size: var(--medical-text-xs);
    }

    .btn[b-8f4ac0fw76] {
        min-height: 48px;
        font-size: var(--medical-text-base);
    }

    .setting-input[b-8f4ac0fw76],
    .microphone-select[b-8f4ac0fw76],
    .theme-select[b-8f4ac0fw76],
    .language-select[b-8f4ac0fw76],
    .folder-path-input[b-8f4ac0fw76] {
        min-height: 48px;
        font-size: var(--medical-text-base);
    }
}

/* Focus Management */
.setting-input:focus-visible[b-8f4ac0fw76],
.microphone-select:focus-visible[b-8f4ac0fw76],
.theme-select:focus-visible[b-8f4ac0fw76],
.language-select:focus-visible[b-8f4ac0fw76] {
    outline: 2px solid var(--medical-primary);
    outline-offset: 2px;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .setting-checkbox[b-8f4ac0fw76],
    .volume-control[b-8f4ac0fw76],
    .checkbox-setting[b-8f4ac0fw76] {
        border-width: 2px;
    }
    
    .section-title[b-8f4ac0fw76]::before {
        background: #000;
    }
}

/* Print Styles */
@media print {
    .settings-header[b-8f4ac0fw76] {
        box-shadow: none;
        border-bottom: 1px solid #000;
    }
    
    .settings-section[b-8f4ac0fw76] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .btn[b-8f4ac0fw76] {
        print-color-adjust: exact;
    }
}
/* /Pages/Subscription.razor.rz.scp.css */
/* Subscription Page - Modern Medical App Design */

.subscription-page[b-c1uoq79esm] {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    background-color: var(--medical-background);
}

/* Subscription Header - STANDARDIZED TO MATCH NAVIGATION DRAWER */
.subscription-header[b-c1uoq79esm] {
    background-color: var(--medical-surface);
    border-bottom: 1px solid var(--medical-border);
    box-shadow: var(--medical-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 72px; /* MATCH NAVIGATION DRAWER HEIGHT */
}

.subscription-header-content[b-c1uoq79esm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--medical-space-1) var(--medical-space-5); /* MATCH NAVIGATION DRAWER PADDING */
    max-width: 1200px;
    margin: 0 auto;
    min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
}

.header-left[b-c1uoq79esm] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-3);
}

.header-icon[b-c1uoq79esm] {
    font-size: var(--medical-text-2xl);
    color: var(--medical-primary);
}

.page-title[b-c1uoq79esm] {
    font-size: var(--medical-text-3xl);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.quota-status-badge[b-c1uoq79esm] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.08) 0%, rgba(25, 118, 210, 0.12) 100%);
    padding: var(--medical-space-2) var(--medical-space-4);
    border-radius: var(--medical-radius-full);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    color: var(--medical-primary);
    border: 1px solid rgba(25, 118, 210, 0.2);
}

.quota-icon[b-c1uoq79esm] {
    font-size: var(--medical-text-sm);
}

/* Subscription Content */
.subscription-content[b-c1uoq79esm] {
    overflow-y: auto;
    padding: var(--medical-space-8);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.subscription-content > section[b-c1uoq79esm] {
    margin-bottom: var(--medical-space-8);
}

/* Section Header */
.section-header[b-c1uoq79esm] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-3);
    margin-bottom: var(--medical-space-6);
}

.section-header h2[b-c1uoq79esm] {
    font-size: var(--medical-text-2xl);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin: 0;
}

.section-icon[b-c1uoq79esm] {
    font-size: var(--medical-text-xl);
    color: var(--medical-primary);
}

/* Current Plan Section */
.current-plan-section[b-c1uoq79esm] {
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    padding: var(--medical-space-8);
    box-shadow: var(--medical-shadow-md);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.current-plan-section:hover[b-c1uoq79esm] {
    box-shadow: var(--medical-shadow-lg);
    transform: translateY(-2px);
}

.plan-status-content[b-c1uoq79esm] {
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-6);
}

.plan-info[b-c1uoq79esm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--medical-space-8);
    align-items: start;
}

.plan-details h3[b-c1uoq79esm] {
    font-size: var(--medical-text-2xl);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin: 0 0 var(--medical-space-2) 0;
}

.plan-name[b-c1uoq79esm] {
    font-size: var(--medical-text-2xl);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin: 0;
}

.plan-price[b-c1uoq79esm] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    margin-bottom: var(--medical-space-2);
    font-weight: var(--medical-font-medium);
}

.plan-status-badge[b-c1uoq79esm] {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--medical-success) 0%, var(--medical-success-dark) 100%);
    color: var(--medical-text-on-primary);
    padding: var(--medical-space-1) var(--medical-space-3);
    border-radius: var(--medical-radius-full);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quota-stats h4[b-c1uoq79esm] {
    font-size: var(--medical-text-base);
    font-weight: var(--medical-font-medium);
    color: var(--medical-text-primary);
    margin: 0 0 var(--medical-space-4) 0;
}

.quota-item[b-c1uoq79esm] {
    margin-bottom: var(--medical-space-4);
}

.quota-label[b-c1uoq79esm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--medical-space-2);
    font-size: var(--medical-text-sm);
}

.quota-label span:first-child[b-c1uoq79esm] {
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
}

.quota-numbers[b-c1uoq79esm] {
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
}

.progress-bar[b-c1uoq79esm] {
    height: 8px;
    background-color: var(--medical-border-light);
    border-radius: var(--medical-radius-full);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-fill[b-c1uoq79esm] {
    height: 100%;
    background: linear-gradient(90deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
    border-radius: var(--medical-radius-full);
    transition: width var(--medical-transition-slow) var(--medical-ease-out);
}

.plan-actions[b-c1uoq79esm] {
    display: flex;
    gap: var(--medical-space-3);
    flex-wrap: wrap;
}

.plan-actions .btn[b-c1uoq79esm] {
    min-width: 140px;
    flex: 1;
}

/* Subscription Plans Section */
.subscription-plans-section[b-c1uoq79esm] {
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    padding: var(--medical-space-8);
    box-shadow: var(--medical-shadow-md);
}

.plans-grid[b-c1uoq79esm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--medical-space-6);
}

.plan-card[b-c1uoq79esm] {
    background: var(--medical-surface);
    border: 2px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    padding: var(--medical-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-4);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    position: relative;
    overflow: hidden;
}

.plan-card[b-c1uoq79esm]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.plan-card:hover[b-c1uoq79esm] {
    box-shadow: var(--medical-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--medical-primary);
}

.plan-card:hover[b-c1uoq79esm]::before {
    background: linear-gradient(90deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
}

.plan-card.current-plan[b-c1uoq79esm] {
    border-color: var(--medical-primary);
    box-shadow: var(--medical-shadow-lg);
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.02) 0%, rgba(25, 118, 210, 0.05) 100%);
}

.plan-card.current-plan[b-c1uoq79esm]::before {
    background: linear-gradient(90deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
}

.plan-card.premium-plan[b-c1uoq79esm] {
    border-color: var(--medical-primary);
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(59, 130, 246, 0.08) 100%);
    position: relative;
}

.plan-card.premium-plan[b-c1uoq79esm]::after {
    content: 'POPULAR';
    position: absolute;
    top: var(--medical-space-4);
    right: var(--medical-space-4);
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
    color: var(--medical-text-on-primary);
    padding: var(--medical-space-1) var(--medical-space-3);
    border-radius: var(--medical-radius-full);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-bold);
    letter-spacing: 0.05em;
}

.plan-card-content[b-c1uoq79esm] {
    flex: 1;
}

.plan-title[b-c1uoq79esm] {
    font-size: var(--medical-text-xl);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin-bottom: var(--medical-space-2);
}

.plan-pricing[b-c1uoq79esm] {
    display: flex;
    align-items: baseline;
    gap: var(--medical-space-1);
    margin-bottom: var(--medical-space-4);
}

.plan-price[b-c1uoq79esm] {
    font-size: var(--medical-text-3xl);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
}

.plan-period[b-c1uoq79esm] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
}

.plan-features[b-c1uoq79esm] {
    margin-bottom: var(--medical-space-4);
}

.feature-item[b-c1uoq79esm] {
    display: flex;
    align-items: flex-start;
    gap: var(--medical-space-2);
    margin-bottom: var(--medical-space-2);
    padding: var(--medical-space-1) 0;
}

.feature-icon[b-c1uoq79esm] {
    color: var(--medical-success);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-bold);
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-item span:last-child[b-c1uoq79esm] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-primary);
    line-height: var(--medical-leading-relaxed);
    font-weight: var(--medical-font-medium);
}

.plan-description[b-c1uoq79esm] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    line-height: var(--medical-leading-relaxed);
    font-weight: var(--medical-font-medium);
}

.plan-btn[b-c1uoq79esm] {
    width: 100%;
    margin-top: auto;
}

/* Consumable Quotas Section */
.consumable-quotas-section[b-c1uoq79esm] {
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    padding: var(--medical-space-8);
    box-shadow: var(--medical-shadow-md);
}

.quotas-grid[b-c1uoq79esm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--medical-space-6);
}

.quota-card[b-c1uoq79esm] {
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    padding: var(--medical-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-3);
    text-align: center;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    position: relative;
    overflow: hidden;
}

.quota-card:hover[b-c1uoq79esm] {
    box-shadow: var(--medical-shadow-lg);
    transform: translateY(-2px);
    border-color: var(--medical-primary);
}

.quota-card-content[b-c1uoq79esm] {
    flex: 1;
}

.quota-title[b-c1uoq79esm] {
    font-size: var(--medical-text-lg);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin-bottom: var(--medical-space-2);
}

.quota-badge[b-c1uoq79esm] {
    display: inline-block;
    padding: var(--medical-space-1) var(--medical-space-2);
    border-radius: var(--medical-radius-full);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-on-primary);
    margin-bottom: var(--medical-space-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quota-badge.no-discount[b-c1uoq79esm] {
    background: linear-gradient(135deg, var(--medical-text-tertiary) 0%, #64748b 100%);
}

.quota-badge.save-20[b-c1uoq79esm] {
    background: linear-gradient(135deg, var(--medical-warning) 0%, var(--medical-warning-light) 100%);
}

.quota-badge.save-33[b-c1uoq79esm] {
    background: linear-gradient(135deg, var(--medical-success) 0%, var(--medical-success-light) 100%);
}

.quota-price[b-c1uoq79esm] {
    font-size: var(--medical-text-3xl);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    margin-bottom: var(--medical-space-3);
}

.quota-description[b-c1uoq79esm] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    margin-bottom: var(--medical-space-2);
    font-weight: var(--medical-font-medium);
}

.quota-detail[b-c1uoq79esm] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    line-height: var(--medical-leading-relaxed);
    margin-bottom: var(--medical-space-4);
}

.quota-btn[b-c1uoq79esm] {
    width: 100%;
}

/* Usage Analytics Section */
.usage-analytics-section[b-c1uoq79esm] {
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    padding: var(--medical-space-8);
    box-shadow: var(--medical-shadow-md);
}

.analytics-grid[b-c1uoq79esm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--medical-space-8);
}

.analytics-item[b-c1uoq79esm] {
    text-align: center;
    padding: var(--medical-space-4);
    background: var(--medical-surface-variant);
    border-radius: var(--medical-radius-lg);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.analytics-item:hover[b-c1uoq79esm] {
    background: var(--medical-surface);
    box-shadow: var(--medical-shadow-sm);
    transform: translateY(-2px);
}

.analytics-label[b-c1uoq79esm] {
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    color: var(--medical-text-secondary);
    margin-bottom: var(--medical-space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.analytics-value[b-c1uoq79esm] {
    font-size: var(--medical-text-2xl);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    margin-bottom: var(--medical-space-1);
}

.analytics-detail[b-c1uoq79esm] {
    font-size: var(--medical-text-xs);
    color: var(--medical-text-tertiary);
    font-weight: var(--medical-font-medium);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .plans-grid[b-c1uoq79esm],
    .quotas-grid[b-c1uoq79esm] {
        grid-template-columns: 1fr;
        gap: var(--medical-space-4);
    }

    .plan-info[b-c1uoq79esm] {
        grid-template-columns: 1fr;
        gap: var(--medical-space-4);
    }

    .analytics-grid[b-c1uoq79esm] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--medical-space-4);
    }
}

@media (max-width: 768px) {
    .subscription-content[b-c1uoq79esm] {
        padding: var(--medical-space-4);
    }

    .subscription-header-content[b-c1uoq79esm] {
        padding: var(--medical-space-4) var(--medical-space-5); /* MAINTAIN CONSISTENT PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
        flex-direction: column;
        gap: var(--medical-space-3);
        text-align: center;
    }

    .page-title[b-c1uoq79esm] {
        font-size: var(--medical-text-2xl);
    }

    .quota-status-badge[b-c1uoq79esm] {
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-1) var(--medical-space-3);
    }

    .plan-actions[b-c1uoq79esm] {
        flex-direction: column;
    }

    .plan-actions .btn[b-c1uoq79esm] {
        width: 100%;
        min-width: auto;
    }

    .current-plan-section[b-c1uoq79esm],
    .subscription-plans-section[b-c1uoq79esm],
    .consumable-quotas-section[b-c1uoq79esm],
    .usage-analytics-section[b-c1uoq79esm] {
        padding: var(--medical-space-4);
    }

    .plan-card[b-c1uoq79esm],
    .quota-card[b-c1uoq79esm] {
        padding: var(--medical-space-4);
    }

    .analytics-grid[b-c1uoq79esm] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .subscription-header-content[b-c1uoq79esm] {
        padding: var(--medical-space-4) var(--medical-space-5); /* NO CHANGE TO VERTICAL PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
        flex-direction: column;
        gap: var(--medical-space-3);
    }

    /* MOBILE HEADER FIXES: Add left margin for menu button */
    .page-title[b-c1uoq79esm] {
        margin-left: var(--mobile-header-left-margin); /* ACCOMMODATE MOBILE MENU BUTTON */
        font-size: var(--medical-text-xl);
        align-self: flex-start; /* ALIGN TO LEFT FOR CONSISTENCY */
    }

    .header-left[b-c1uoq79esm] {
        gap: var(--medical-space-2);
        align-self: flex-start; /* ALIGN TO LEFT FOR CONSISTENCY */
    }

    .section-header h2[b-c1uoq79esm] {
        font-size: var(--medical-text-lg);
    }

    .plan-title[b-c1uoq79esm] {
        font-size: var(--medical-text-lg);
    }

    .plan-price[b-c1uoq79esm] {
        font-size: var(--medical-text-2xl);
    }

    .quota-title[b-c1uoq79esm] {
        font-size: var(--medical-text-base);
    }

    .quota-price[b-c1uoq79esm] {
        font-size: var(--medical-text-2xl);
    }

    .analytics-value[b-c1uoq79esm] {
        font-size: var(--medical-text-xl);
    }
}

@media (max-width: 480px) {
    .subscription-header-content[b-c1uoq79esm] {
        padding: var(--medical-space-4) var(--medical-space-5); /* MAINTAIN CONSISTENT PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
    }

    .header-left[b-c1uoq79esm] {
        gap: var(--medical-space-2);
    }

    .page-title[b-c1uoq79esm] {
        font-size: var(--medical-text-xl);
    }

    .section-header h2[b-c1uoq79esm] {
        font-size: var(--medical-text-lg);
    }

    .plan-title[b-c1uoq79esm] {
        font-size: var(--medical-text-lg);
    }

    .plan-price[b-c1uoq79esm] {
        font-size: var(--medical-text-2xl);
    }

    .quota-title[b-c1uoq79esm] {
        font-size: var(--medical-text-base);
    }

    .quota-price[b-c1uoq79esm] {
        font-size: var(--medical-text-2xl);
    }

    .analytics-value[b-c1uoq79esm] {
        font-size: var(--medical-text-xl);
    }
}
/* /Pages/Template.razor.rz.scp.css */
/* Template Page - Modern Medical App Design */

.template-edit-page[b-aoqa6m503o] {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    background-color: var(--medical-background);
}

/* Template Header - STANDARDIZED TO MATCH NAVIGATION DRAWER */
.template-header[b-aoqa6m503o] {
    background-color: var(--medical-surface);
    border-bottom: 1px solid var(--medical-border);
    box-shadow: var(--medical-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 72px; /* MATCH NAVIGATION DRAWER HEIGHT */
}

.template-header-content[b-aoqa6m503o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--medical-space-1) var(--medical-space-5); /* MATCH NAVIGATION DRAWER PADDING */
    max-width: 1400px;
    margin: 0 auto;
    min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
}

.page-title[b-aoqa6m503o] {
    font-size: var(--medical-text-2xl);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin: 0;
    letter-spacing: -0.025em;
    flex: 1;
    min-width: 0; /* Allow text to shrink if needed */
}

.default-template-indicator[b-aoqa6m503o] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.15) 100%);
    color: var(--medical-success);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-semibold);
    padding: var(--medical-space-2) var(--medical-space-4);
    border-radius: var(--medical-radius-full);
    border: 1px solid rgba(16, 185, 129, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
}

.default-icon[b-aoqa6m503o] {
    font-size: var(--medical-text-base);
}

.default-text[b-aoqa6m503o] {
    font-size: var(--medical-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Template Content */
.template-content[b-aoqa6m503o] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: var(--medical-space-6);
    gap: var(--medical-space-6);
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Enhanced Template Properties Section */
.template-properties-section[b-aoqa6m503o] {
    background-color: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    padding: var(--medical-space-6);
    box-shadow: var(--medical-shadow-md);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.template-properties-section:hover[b-aoqa6m503o] {
    box-shadow: var(--medical-shadow-lg);
    transform: translateY(-2px);
}

.template-name-container[b-aoqa6m503o] {
    display: flex;
    flex-direction: column;
    gap: var(--medical-space-2);
    max-width: 400px;
}

.template-name-label[b-aoqa6m503o] {
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin-bottom: var(--medical-space-1);
}

.template-name-input[b-aoqa6m503o] {
    width: 100%;
    min-height: 44px;
    padding: var(--medical-space-3) var(--medical-space-4);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-lg);
    background-color: var(--medical-surface);
    color: var(--medical-text-primary);
    font-size: var(--medical-text-sm);
    font-family: inherit;
    font-weight: var(--medical-font-medium);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    box-shadow: var(--medical-shadow-xs);
}

.template-name-input:focus[b-aoqa6m503o] {
    outline: none;
    border-color: var(--medical-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--medical-shadow-sm);
    background-color: var(--medical-surface);
    transform: translateY(-1px);
}

.template-name-input[b-aoqa6m503o]::placeholder {
    color: var(--medical-text-tertiary);
}

/* Enhanced Template Content Section */
.template-content-section[b-aoqa6m503o] {
    background-color: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    box-shadow: var(--medical-shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.template-content-section:hover[b-aoqa6m503o] {
    box-shadow: var(--medical-shadow-lg);
    transform: translateY(-2px);
}

.template-content-header[b-aoqa6m503o] {
    background: linear-gradient(135deg, var(--medical-surface-variant) 0%, var(--medical-border-light) 100%);
    border-bottom: 1px solid var(--medical-border);
    padding: var(--medical-space-4) var(--medical-space-6);
}

.template-content-header h3[b-aoqa6m503o] {
    margin: 0;
    font-size: var(--medical-text-lg);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
}

.template-content-header h3[b-aoqa6m503o]::before {
    content: '📝';
    font-size: var(--medical-text-base);
}

.template-text-container[b-aoqa6m503o] {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.template-text-editor[b-aoqa6m503o] {
    flex: 1;
    min-height: 500px;
    padding: var(--medical-space-6);
    border: none;
    outline: none;
    background: transparent;
    color: var(--medical-text-primary);
    font-size: var(--medical-text-sm);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    line-height: var(--medical-leading-relaxed);
    resize: none;
    font-weight: var(--medical-font-medium);
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.template-text-editor:focus[b-aoqa6m503o] {
    background: rgba(59, 130, 246, 0.02);
}

.template-text-editor[b-aoqa6m503o]::placeholder {
    color: var(--medical-text-tertiary);
    font-style: italic;
    font-family: inherit;
}

/* Template Editor Features */
.editor-toolbar[b-aoqa6m503o] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-2);
    padding: var(--medical-space-2) var(--medical-space-4);
    background: var(--medical-surface-variant);
    border-bottom: 1px solid var(--medical-border);
}

.toolbar-item[b-aoqa6m503o] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-1);
    padding: var(--medical-space-1) var(--medical-space-2);
    border-radius: var(--medical-radius-md);
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.toolbar-item:hover[b-aoqa6m503o] {
    background: var(--medical-surface);
    color: var(--medical-text-primary);
}

.toolbar-separator[b-aoqa6m503o] {
    width: 1px;
    height: 20px;
    background: var(--medical-border);
    margin: 0 var(--medical-space-1);
}

/* Enhanced Button Styles */
.btn[b-aoqa6m503o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--medical-space-2);
    padding: var(--medical-space-3) var(--medical-space-5);
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--medical-radius-lg);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn:disabled[b-aoqa6m503o] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:focus[b-aoqa6m503o] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-primary[b-aoqa6m503o] {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    color: var(--medical-text-on-primary);
    border-color: var(--medical-primary);
    box-shadow: var(--medical-shadow-sm);
}

.btn-primary:hover:not(:disabled)[b-aoqa6m503o] {
    background: linear-gradient(135deg, var(--medical-primary-dark) 0%, #0d47a1 100%);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-md);
}

.btn-secondary[b-aoqa6m503o] {
    background: var(--medical-surface);
    color: var(--medical-text-primary);
    border-color: var(--medical-border);
    box-shadow: var(--medical-shadow-xs);
}

.btn-secondary:hover:not(:disabled)[b-aoqa6m503o] {
    background: var(--medical-surface-variant);
    border-color: var(--medical-primary);
    color: var(--medical-primary);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-sm);
}

.btn-danger[b-aoqa6m503o] {
    background: linear-gradient(135deg, var(--medical-error) 0%, var(--medical-error-dark) 100%);
    color: var(--medical-text-on-primary);
    border-color: var(--medical-error);
    box-shadow: var(--medical-shadow-sm);
}

.btn-danger:hover:not(:disabled)[b-aoqa6m503o] {
    background: linear-gradient(135deg, var(--medical-error-dark) 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: var(--medical-shadow-md);
}

/* Template Actions */
.template-actions[b-aoqa6m503o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--medical-space-4) 0;
    background: var(--medical-surface);
    border-radius: var(--medical-radius-lg);
    border: 1px solid var(--medical-border);
    padding: var(--medical-space-4) var(--medical-space-6);
    box-shadow: var(--medical-shadow-sm);
}

.action-buttons-right[b-aoqa6m503o] {
    display: flex;
    gap: var(--medical-space-3);
}

.back-btn[b-aoqa6m503o] {
    justify-self: flex-start;
}

.delete-btn[b-aoqa6m503o],
.save-btn[b-aoqa6m503o] {
    min-width: 120px;
}

/* Template Status Indicators */
.template-status[b-aoqa6m503o] {
    display: inline-flex;
    align-items: center;
    gap: var(--medical-space-1);
    padding: var(--medical-space-1) var(--medical-space-3);
    border-radius: var(--medical-radius-full);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.template-status.saved[b-aoqa6m503o] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--medical-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.template-status.modified[b-aoqa6m503o] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--medical-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.template-status.error[b-aoqa6m503o] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--medical-error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Template Metadata */
.template-metadata[b-aoqa6m503o] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-4);
    padding: var(--medical-space-3) 0;
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
}

.metadata-item[b-aoqa6m503o] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-1);
}

.metadata-icon[b-aoqa6m503o] {
    font-size: var(--medical-text-sm);
    color: var(--medical-primary);
}

/* Character Count */
.character-count[b-aoqa6m503o] {
    position: absolute;
    bottom: var(--medical-space-2);
    right: var(--medical-space-4);
    background: var(--medical-surface-variant);
    padding: var(--medical-space-1) var(--medical-space-2);
    border-radius: var(--medical-radius-md);
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    border: 1px solid var(--medical-border);
}

/* Loading State */
.template-loading[b-aoqa6m503o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--medical-space-16);
    text-align: center;
}

.template-loading .spinner[b-aoqa6m503o] {
    width: 40px;
    height: 40px;
    margin-bottom: var(--medical-space-4);
}

.loading-text[b-aoqa6m503o] {
    font-size: var(--medical-text-base);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
}

/* Responsive Design */
@media (max-width: 768px) {
    .template-content[b-aoqa6m503o] {
        padding: var(--medical-space-4);
    }

    .template-properties-section[b-aoqa6m503o] {
        padding: var(--medical-space-4);
    }

    .template-name-container[b-aoqa6m503o] {
        max-width: 100%;
    }

    .template-text-editor[b-aoqa6m503o] {
        min-height: 400px;
        padding: var(--medical-space-4);
        font-size: var(--medical-text-xs);
    }

    .template-actions[b-aoqa6m503o] {
        flex-direction: column;
        gap: var(--medical-space-3);
        align-items: stretch;
    }

    .action-buttons-right[b-aoqa6m503o] {
        justify-content: center;
        flex-direction: column;
        gap: var(--medical-space-2);
    }

    .back-btn[b-aoqa6m503o] {
        order: 2;
        width: 100%;
    }

    .action-buttons-right[b-aoqa6m503o] {
        order: 1;
    }

    .btn[b-aoqa6m503o] {
        min-width: auto;
        width: 100%;
        min-height: 48px;
        font-size: var(--medical-text-base);
    }

    .page-title[b-aoqa6m503o] {
        font-size: var(--medical-text-xl);
    }

    .template-header-content[b-aoqa6m503o] {
        padding: var(--medical-space-4) var(--medical-space-5); /* MAINTAIN CONSISTENT PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
        gap: var(--medical-space-3);
    }

    /* Adjust default template indicator for mobile */
    .default-template-indicator[b-aoqa6m503o] {
        font-size: var(--medical-text-xs);
        padding: 6px var(--medical-space-3); /* Using specific value for half-spacing */
        gap: 6px; /* Using specific value for half-spacing */
    }

    .default-text[b-aoqa6m503o] {
        font-size: var(--medical-text-xs);
    }

    .default-icon[b-aoqa6m503o] {
        font-size: var(--medical-text-sm);
    }

    .template-metadata[b-aoqa6m503o] {
        flex-wrap: wrap;
        gap: var(--medical-space-2);
    }

    .editor-toolbar[b-aoqa6m503o] {
        flex-wrap: wrap;
        gap: var(--medical-space-1);
    }
}

@media (max-width: 640px) {
    /* Keep the header content as flex row to maintain same line layout */
    .template-header-content[b-aoqa6m503o] {
        flex-direction: row; /* Keep as row for same-line layout */
        justify-content: space-between;
        align-items: center;
        gap: var(--medical-space-2);
        padding: var(--medical-space-4) var(--medical-space-5);
        min-height: 72px;
    }

    /* MOBILE HEADER FIXES: Add left margin for menu button */
    .page-title[b-aoqa6m503o] {
        margin-left: var(--mobile-header-left-margin, 0); /* ACCOMMODATE MOBILE MENU BUTTON */
        font-size: var(--medical-text-lg); /* Reduced from xl for mobile */
        flex: 1;
        min-width: 0; /* Allow text to shrink if needed */
    }

    .template-header[b-aoqa6m503o] {
        height: auto;
        min-height: 72px; /* ENSURE MINIMUM HEIGHT */
    }

    .default-template-indicator[b-aoqa6m503o] {
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-1) var(--medical-space-2);
        gap: var(--medical-space-1);
        flex-shrink: 0;
    }

    .default-text[b-aoqa6m503o] {
        font-size: var(--medical-text-xs);
        /* Hide text on smaller screens, keep only icon */
        display: none;
    }

    .default-icon[b-aoqa6m503o] {
        font-size: var(--medical-text-sm);
    }

    .action-buttons-right[b-aoqa6m503o] {
        gap: var(--medical-space-2);
    }

    .template-content[b-aoqa6m503o] {
        padding: var(--medical-space-3);
    }

    .template-properties-section[b-aoqa6m503o],
    .template-actions[b-aoqa6m503o] {
        padding: var(--medical-space-3);
    }

    .template-text-editor[b-aoqa6m503o] {
        min-height: 300px;
        padding: var(--medical-space-3);
    }
}

@media (max-width: 480px) {
    /* Even smaller adjustments for very small screens */
    .template-header-content[b-aoqa6m503o] {
        flex-direction: row; /* Keep as row */
        gap: 6px; /* Tighter gap for very small screens */
        padding: var(--medical-space-4) var(--medical-space-4);
        min-height: 72px;
    }

    .template-header[b-aoqa6m503o] {
        height: auto;
        min-height: 72px;
    }

    .page-title[b-aoqa6m503o] {
        font-size: var(--medical-text-base); /* Further reduced for very small screens */
        margin-left: var(--mobile-header-left-margin, 0);
    }

    .default-template-indicator[b-aoqa6m503o] {
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-1) 6px; /* Smaller padding for very small screens */
        gap: var(--medical-space-1);
        min-width: 24px; /* Ensure minimum touch target */
        min-height: 24px;
        justify-content: center;
    }

    .default-text[b-aoqa6m503o] {
        display: none; /* Hide text, keep only icon on very small screens */
    }

    .default-icon[b-aoqa6m503o] {
        font-size: var(--medical-text-sm);
    }

    .action-buttons-right[b-aoqa6m503o] {
        gap: var(--medical-space-2);
    }

    .template-content[b-aoqa6m503o] {
        padding: var(--medical-space-3);
    }

    .template-properties-section[b-aoqa6m503o],
    .template-actions[b-aoqa6m503o] {
        padding: var(--medical-space-3);
    }

    .template-text-editor[b-aoqa6m503o] {
        min-height: 300px;
        padding: var(--medical-space-3);
    }
}

/* Focus Management */
.template-name-input:focus-visible[b-aoqa6m503o],
.template-text-editor:focus-visible[b-aoqa6m503o] {
    outline: 2px solid var(--medical-primary);
    outline-offset: 2px;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .template-properties-section[b-aoqa6m503o],
    .template-content-section[b-aoqa6m503o],
    .template-actions[b-aoqa6m503o] {
        border-width: 2px;
    }
    
    .template-content-header[b-aoqa6m503o] {
        border-bottom-width: 2px;
    }
}

/* Print Styles */
@media print {
    .template-header[b-aoqa6m503o] {
        box-shadow: none;
        border-bottom: 2px solid #000;
    }
    
    .template-properties-section[b-aoqa6m503o],
    .template-content-section[b-aoqa6m503o] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .btn[b-aoqa6m503o],
    .editor-toolbar[b-aoqa6m503o] {
        display: none;
    }
    
    .template-text-editor[b-aoqa6m503o] {
        background: transparent !important;
    }
}
/* /Pages/TemplatesList.razor.rz.scp.css */
/* Base Styles */
*[b-yktz32niuv] {
    box-sizing: border-box;
}

body[b-yktz32niuv], html[b-yktz32niuv] {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #323130;
}

/* Ensure the component has proper styling */
.templates-list-page *[b-yktz32niuv] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Templates List Page - Modern Medical App Design */
.templates-list-page[b-yktz32niuv] {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    background-color: var(--medical-background);
}

/* Templates Header - STANDARDIZED TO MATCH NAVIGATION DRAWER */
.templates-header[b-yktz32niuv] {
    background-color: var(--medical-surface);
    border-bottom: 1px solid var(--medical-border);
    box-shadow: var(--medical-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 72px; /* MATCH NAVIGATION DRAWER HEIGHT */
}

.templates-header-content[b-yktz32niuv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--medical-space-1) var(--medical-space-5); /* MATCH NAVIGATION DRAWER PADDING */
    max-width: 1200px;
    margin: 0 auto;
    min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
}

.page-title[b-yktz32niuv] {
    font-size: var(--medical-text-3xl);
    font-weight: var(--medical-font-bold);
    color: var(--medical-text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

/* Enhanced Button Styles */
.btn[b-yktz32niuv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--medical-space-2);
    padding: var(--medical-space-3) var(--medical-space-5);
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--medical-radius-lg);
    font-size: var(--medical-text-sm);
    font-weight: var(--medical-font-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* COMPACT BUTTON VARIANT FOR HEADERS */
.btn.compact[b-yktz32niuv],
.header-actions .btn[b-yktz32niuv],
.new-note-btn[b-yktz32niuv],
.new-template-btn[b-yktz32niuv] {
    min-height: 36px;
    padding: var(--medical-space-2) var(--medical-space-3);
    font-size: var(--medical-text-xs);
}

.btn:disabled[b-yktz32niuv] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:focus[b-yktz32niuv] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-primary[b-yktz32niuv] {
    background: linear-gradient(135deg, var(--medical-primary) 0%, var(--medical-primary-dark) 100%);
    color: var(--medical-text-on-primary);
    border-color: var(--medical-primary);
    box-shadow: var(--medical-shadow-md);
}

.btn-primary:hover:not(:disabled)[b-yktz32niuv] {
    background: linear-gradient(135deg, var(--medical-primary-dark) 0%, #0d47a1 100%);
    transform: translateY(-2px);
    box-shadow: var(--medical-shadow-lg);
}

.btn-primary:active[b-yktz32niuv] {
    transform: translateY(0);
    box-shadow: var(--medical-shadow-sm);
}

.new-template-btn[b-yktz32niuv] {
    min-height: 36px; /* REDUCED FROM 48px FOR HEADER COMPATIBILITY */
    min-width: 120px; /* REDUCED FROM 140px */
    border-radius: var(--medical-radius-lg);
    font-weight: var(--medical-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: var(--medical-text-xs); /* SLIGHTLY SMALLER FONT */
    padding: var(--medical-space-2) var(--medical-space-4); /* REDUCED PADDING */
}

.new-template-btn[b-yktz32niuv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--medical-transition-slow) var(--medical-ease-out);
}

.new-template-btn:hover[b-yktz32niuv]::before {
    left: 100%;
}

/* Templates Content */
.templates-content[b-yktz32niuv] {
    padding: var(--medical-space-8);
    overflow-y: auto;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.templates-list[b-yktz32niuv] {
    display: grid;
    gap: var(--medical-space-4);
}

/* Enhanced Template Card */
.template-card[b-yktz32niuv] {
    background: var(--medical-surface);
    border: 1px solid var(--medical-border);
    border-radius: var(--medical-radius-xl);
    padding: var(--medical-space-6);
    cursor: pointer;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
    box-shadow: var(--medical-shadow-sm);
    position: relative;
    overflow: hidden;
}

.template-card[b-yktz32niuv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: all var(--medical-transition-normal) var(--medical-ease-out);
}

.template-card:hover[b-yktz32niuv] {
    box-shadow: var(--medical-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--medical-primary);
}

.template-card:hover[b-yktz32niuv]::before {
    background: linear-gradient(90deg, var(--medical-primary) 0%, var(--medical-primary-light) 100%);
}

.template-card:active[b-yktz32niuv] {
    transform: translateY(-2px);
    box-shadow: var(--medical-shadow-md);
}

.template-card-header[b-yktz32niuv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--medical-space-4);
    gap: var(--medical-space-4);
}

.template-name[b-yktz32niuv] {
    font-size: var(--medical-text-xl);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-primary);
    margin: 0;
    line-height: var(--medical-leading-tight);
}

.template-date[b-yktz32niuv] {
    font-size: var(--medical-text-sm);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
    white-space: nowrap;
    background: var(--medical-surface-variant);
    padding: var(--medical-space-1) var(--medical-space-3);
    border-radius: var(--medical-radius-full);
    border: 1px solid var(--medical-border);
}

.template-category[b-yktz32niuv] {
    display: inline-flex;
    align-items: center;
    gap: var(--medical-space-1);
    padding: var(--medical-space-1) var(--medical-space-3);
    background: var(--medical-surface-variant);
    border-radius: var(--medical-radius-full);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-secondary);
    border: 1px solid var(--medical-border);
    margin-bottom: var(--medical-space-3);
    width: fit-content;
}

.category-icon[b-yktz32niuv] {
    font-size: var(--medical-text-xs);
    color: var(--medical-primary);
}

.template-preview[b-yktz32niuv] {
    margin-top: var(--medical-space-4);
}

.preview-text[b-yktz32niuv] {
    padding: var(--medical-space-4);
    background: linear-gradient(135deg, var(--medical-surface-variant) 0%, var(--medical-border-light) 100%);
    border-radius: var(--medical-radius-lg);
    font-size: var(--medical-text-sm);
    color: var(--medical-text-primary);
    line-height: var(--medical-leading-relaxed);
    max-height: 80px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: pre-line;
    position: relative;
    border: 1px solid var(--medical-border);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-weight: var(--medical-font-medium);
}

.preview-text[b-yktz32niuv]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, var(--medical-surface-variant));
    pointer-events: none;
}

/* Template Stats */
.template-stats[b-yktz32niuv] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-4);
    margin-top: var(--medical-space-3);
    padding-top: var(--medical-space-3);
    border-top: 1px solid var(--medical-border);
}

.stat-item[b-yktz32niuv] {
    display: flex;
    align-items: center;
    gap: var(--medical-space-1);
    font-size: var(--medical-text-xs);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
}

.stat-icon[b-yktz32niuv] {
    font-size: var(--medical-text-sm);
    color: var(--medical-primary);
}

.stat-value[b-yktz32niuv] {
    color: var(--medical-text-primary);
    font-weight: var(--medical-font-semibold);
}

/* Enhanced Empty State */
.empty-state[b-yktz32niuv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--medical-space-20) var(--medical-space-8);
    text-align: center;
    min-height: 400px;
    background: var(--medical-surface);
    border-radius: var(--medical-radius-xl);
    border: 2px dashed var(--medical-border);
    margin: var(--medical-space-4) 0;
}

.empty-state-icon[b-yktz32niuv] {
    font-size: 4rem;
    margin-bottom: var(--medical-space-6);
    color: var(--medical-text-tertiary);
    opacity: 0.6;
}

.empty-state-title[b-yktz32niuv] {
    font-size: var(--medical-text-xl);
    font-weight: var(--medical-font-semibold);
    color: var(--medical-text-secondary);
    margin: 0 0 var(--medical-space-2) 0;
}

.empty-state-subtitle[b-yktz32niuv] {
    font-size: var(--medical-text-base);
    color: var(--medical-text-tertiary);
    margin: 0 0 var(--medical-space-6) 0;
    max-width: 400px;
    line-height: var(--medical-leading-relaxed);
}

.empty-state-action[b-yktz32niuv] {
    margin-top: var(--medical-space-4);
}

/* Template Type Indicators */
.template-type[b-yktz32niuv] {
    display: inline-flex;
    align-items: center;
    gap: var(--medical-space-1);
    padding: var(--medical-space-1) var(--medical-space-2);
    border-radius: var(--medical-radius-full);
    font-size: var(--medical-text-xs);
    font-weight: var(--medical-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.template-type.system[b-yktz32niuv] {
    background: rgba(25, 118, 210, 0.1);
    color: var(--medical-primary);
    border: 1px solid rgba(25, 118, 210, 0.2);
}

.template-type.custom[b-yktz32niuv] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--medical-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.template-type.shared[b-yktz32niuv] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--medical-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Loading State */
.templates-loading[b-yktz32niuv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--medical-space-16);
    text-align: center;
}

.templates-loading .spinner[b-yktz32niuv] {
    width: 40px;
    height: 40px;
    margin-bottom: var(--medical-space-4);
}

.loading-text[b-yktz32niuv] {
    font-size: var(--medical-text-base);
    color: var(--medical-text-secondary);
    font-weight: var(--medical-font-medium);
}

/* Search Highlight */
.search-highlight[b-yktz32niuv] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.3) 100%);
    padding: 1px 2px;
    border-radius: var(--medical-radius-xs);
    font-weight: var(--medical-font-semibold);
}

/* Responsive Design */
@media (max-width: 768px) {
    .templates-content[b-yktz32niuv] {
        padding: var(--medical-space-4);
    }

    .template-card[b-yktz32niuv] {
        padding: var(--medical-space-4);
    }

    .templates-header-content[b-yktz32niuv] {
        padding: var(--medical-space-4) var(--medical-space-5); /* MAINTAIN CONSISTENT PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
        /* Keep flex-direction: row for desktop/tablet view */
    }

    .page-title[b-yktz32niuv] {
        font-size: var(--medical-text-2xl);
    }

    .template-name[b-yktz32niuv] {
        font-size: var(--medical-text-lg);
    }

    .template-date[b-yktz32niuv] {
        font-size: var(--medical-text-xs);
    }

    .preview-text[b-yktz32niuv] {
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-3);
        max-height: 60px;
        -webkit-line-clamp: 2;
    }

    .new-template-btn[b-yktz32niuv] {
        min-width: 100px; /* Smaller width for tablet view */
        min-height: 36px;
    }

    .template-stats[b-yktz32niuv] {
        flex-wrap: wrap;
        gap: var(--medical-space-2);
    }

    .empty-state[b-yktz32niuv] {
        padding: var(--medical-space-12) var(--medical-space-4);
    }

    .empty-state-icon[b-yktz32niuv] {
        font-size: 3rem;
    }

    .empty-state-title[b-yktz32niuv] {
        font-size: var(--medical-text-lg);
    }

    .empty-state-subtitle[b-yktz32niuv] {
        font-size: var(--medical-text-sm);
    }
}

@media (max-width: 640px) {
    .templates-header-content[b-yktz32niuv] {
        padding: var(--medical-space-4) var(--medical-space-5); /* NO CHANGE TO VERTICAL PADDING */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
        /* KEEP ON SAME LINE: maintain flex-direction: row */
        flex-direction: row;
        gap: var(--medical-space-2); /* Reduce gap for mobile */
    }

    /* MOBILE HEADER FIXES: Add left margin for menu button */
    .page-title[b-yktz32niuv] {
        margin-left: var(--mobile-header-left-margin); /* ACCOMMODATE MOBILE MENU BUTTON */
        font-size: var(--medical-text-xl);
        /* Keep on the left side */
        flex: 1; /* Allow title to take available space */
        text-align: left; /* Ensure left alignment */
    }

    .new-template-btn[b-yktz32niuv] {
        /* Keep button on right side */
        min-width: 80px; /* Smaller width for mobile */
        min-height: 36px; /* Slightly smaller for mobile header */
        font-size: var(--medical-text-xs);
        padding: var(--medical-space-2) var(--medical-space-3); /* Compact padding */
        flex-shrink: 0; /* Prevent button from shrinking */
    }

    .template-card-header[b-yktz32niuv] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--medical-space-2);
    }

    .template-date[b-yktz32niuv] {
        align-self: flex-end;
    }

    .template-stats[b-yktz32niuv] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--medical-space-2);
    }
}

@media (max-width: 480px) {
    .templates-header-content[b-yktz32niuv] {
        padding: var(--medical-space-4) var(--medical-space-4); /* Slightly reduce side padding on very small screens */
        min-height: 72px; /* ENSURE CONSISTENT HEIGHT */
        gap: var(--medical-space-2); /* Keep minimal gap */
    }

    .page-title[b-yktz32niuv] {
        font-size: var(--medical-text-lg); /* Even smaller title on very small screens */
        margin-left: var(--mobile-header-left-margin);
    }

    .new-template-btn[b-yktz32niuv] {
        min-width: 70px; /* Very compact for small screens */
        font-size: 10px; /* Smaller text */
        padding: var(--medical-space-1) var(--medical-space-2); /* Very compact padding */
    }

    .template-card-header[b-yktz32niuv] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--medical-space-2);
    }

    .template-date[b-yktz32niuv] {
        align-self: flex-end;
    }

    .template-stats[b-yktz32niuv] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--medical-space-2);
    }
}

/* Focus Management */
.template-card:focus-visible[b-yktz32niuv] {
    outline: 2px solid var(--medical-primary);
    outline-offset: 2px;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .template-card[b-yktz32niuv] {
        border-width: 2px;
    }
    
    .template-card:hover[b-yktz32niuv] {
        border-color: #000;
    }
    
    .template-category[b-yktz32niuv],
    .template-type[b-yktz32niuv] {
        border-width: 2px;
    }
}

/* Print Styles */
@media print {
    .templates-header[b-yktz32niuv] {
        box-shadow: none;
        border-bottom: 2px solid #000;
    }
    
    .template-card[b-yktz32niuv] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .new-template-btn[b-yktz32niuv] {
        display: none;
    }
}