/**
 * CariClub MVP - Context-Aware Theming System
 * 
 * Purpose: Dynamic visual identity management across Professional, Representative, and Social contexts
 * Dependencies: core.css (design tokens), components.css (base components)
 * Integration: Multi-organizational workflows, sophisticated context switching
 * 
 * Context Architecture:
 * - Professional (#0084D6): Executive board candidate workflows with corporate branding
 * - Representative (#D44E76): Administrative workflows for board opportunity management
 * - Social (#4AABAB): Community networking with personal connection emphasis
 * 
 * Performance Targets:
 * - File size: <8KB
 * - Context switching: <200ms
 * - Animation: 60fps smooth transitions
 * - Hardware acceleration: transform3d optimization
 * 
 * UX Principles:
 * - Consistent visual hierarchy across contexts
 * - Subtle but meaningful differentiation
 * - Accessibility-first color contrast
 * - Smooth micro-interactions
 * 
 * @version MVP-1.0
 */

/* ===================================================================
   CONTEXT-SPECIFIC DESIGN TOKENS
   Dynamic color system supporting multi-organizational theming
   =================================================================== */

:root {
    /* Professional Context Variables */
    --professional-primary: #0084D6;
    --professional-secondary: #005C95;
    --professional-tertiary: #132A5D;
    --professional-gradient: linear-gradient(135deg, #0084D6 0%, #005C95 100%);
    --professional-gradient-soft: linear-gradient(135deg, rgba(0, 132, 214, 0.1) 0%, rgba(0, 92, 149, 0.05) 100%);
    --professional-shadow: 0 2px 4px rgba(0, 132, 214, 0.3);
    --professional-glow: 0 0 20px rgba(0, 132, 214, 0.2);
    
    /* Representative Context Variables */
    --representative-primary: #D44E76;
    --representative-secondary: #B660C7;
    --representative-tertiary: #8B5CF6;
    --representative-gradient: linear-gradient(135deg, #D44E76 0%, #B660C7 100%);
    --representative-gradient-soft: linear-gradient(135deg, rgba(212, 78, 118, 0.1) 0%, rgba(182, 96, 199, 0.05) 100%);
    --representative-shadow: 0 2px 4px rgba(212, 78, 118, 0.3);
    --representative-glow: 0 0 20px rgba(212, 78, 118, 0.2);
    
    /* Social Context Variables */
    --social-primary: #4AABAB;
    --social-secondary: #71CCC6;
    --social-tertiary: #49D2C9;
    --social-gradient: linear-gradient(135deg, #4AABAB 0%, #71CCC6 100%);
    --social-gradient-soft: linear-gradient(135deg, rgba(74, 171, 171, 0.1) 0%, rgba(113, 204, 198, 0.05) 100%);
    --social-shadow: 0 2px 4px rgba(74, 171, 171, 0.3);
    --social-glow: 0 0 20px rgba(74, 171, 171, 0.2);
    
    /* Context Transition Timing */
    --context-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --context-transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --context-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Standardized Backdrop Blur Values for Consistency */
    --backdrop-blur-strong: 10px;
    --backdrop-blur-medium: 5px;
    --backdrop-blur-light: 3px;
    
    /* Organization Color Overrides */
    --org-jp-morgan: linear-gradient(135deg, #0072CE 0%, #004C87 100%);
    --org-goldman: linear-gradient(135deg, #1C4E7A 0%, #14355B 100%);
    --org-morgan-stanley: linear-gradient(135deg, #004C97 0%, #003366 100%);
    --org-houston-food-bank: linear-gradient(135deg, #F59E0B 0%, #EAB308 100%);
    --org-united-way: linear-gradient(135deg, #10B981 0%, #059669 100%);
    --org-cariclub: var(--social-gradient);
}

/* ===================================================================
   EXECUTIVE HEADER CONTEXT THEMING
   Dynamic branding with organizational identity
   =================================================================== */

/* Professional Context Header */
.executive-header.professional {
    background: var(--professional-gradient) !important;
    box-shadow: var(--professional-shadow), var(--shadow-header);
    border-bottom-color: var(--professional-secondary);
}

.executive-header.professional::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--professional-glow);
    opacity: 0;
    transition: opacity var(--context-transition);
    pointer-events: none;
    z-index: -1;
}

.executive-header.professional.expanded::before {
    opacity: 0.3;
}

.executive-header.professional .org-selector {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(var(--backdrop-blur-strong));
    backdrop-filter: blur(var(--backdrop-blur-strong));
}

.executive-header.professional .org-selector:focus,
.executive-header.professional .org-selector:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.executive-header.professional .quick-action {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(var(--backdrop-blur-medium));
    backdrop-filter: blur(var(--backdrop-blur-medium));
}

.executive-header.professional .quick-action:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Representative Context Header */
.executive-header.representative {
    background: var(--representative-gradient) !important;
    box-shadow: var(--representative-shadow), var(--shadow-header);
    border-bottom-color: var(--representative-secondary);
}

.executive-header.representative::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--representative-glow);
    opacity: 0;
    transition: opacity var(--context-transition);
    pointer-events: none;
    z-index: -1;
}

.executive-header.representative.expanded::before {
    opacity: 0.3;
}

.executive-header.representative .org-selector {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(var(--backdrop-blur-strong));
    backdrop-filter: blur(var(--backdrop-blur-strong));
}

.executive-header.representative .org-selector:focus,
.executive-header.representative .org-selector:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.executive-header.representative .quick-action {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(var(--backdrop-blur-medium));
    backdrop-filter: blur(var(--backdrop-blur-medium));
}

.executive-header.representative .quick-action:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Social Context Header */
.executive-header.social {
    background: var(--social-gradient) !important;
    box-shadow: var(--social-shadow), var(--shadow-header);
    border-bottom-color: var(--social-secondary);
}

.executive-header.social::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--social-glow);
    opacity: 0;
    transition: opacity var(--context-transition);
    pointer-events: none;
    z-index: -1;
}

.executive-header.social.expanded::before {
    opacity: 0.3;
}

.executive-header.social .org-selector {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(var(--backdrop-blur-strong));
    backdrop-filter: blur(var(--backdrop-blur-strong));
}

.executive-header.social .org-selector:focus,
.executive-header.social .org-selector:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.executive-header.social .quick-action {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(var(--backdrop-blur-medium));
    backdrop-filter: blur(var(--backdrop-blur-medium));
}

.executive-header.social .quick-action:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ===================================================================
   CONTEXT SWITCHING ANIMATION SYSTEM
   Sophisticated transitions with hardware acceleration
   =================================================================== */

/* Context Switching Container Animation */
.app-container {
    transition: all var(--context-transition);
    will-change: transform, opacity, filter;
}

.app-container.context-switching {
    opacity: 0.85;
    transform: scale3d(0.99, 0.99, 1);
    filter: blur(0.5px);
}

.app-container.context-switching .content-area {
    filter: blur(1px);
    transition: filter var(--context-transition-fast);
}

/* Context Pills Animation */
.context-pill {
    position: relative;
    overflow: hidden;
    transition: all var(--context-transition);
    will-change: transform, background, box-shadow;
}

.context-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left var(--context-transition);
}

.context-pill.switching {
    animation: contextSwitch 0.5s var(--context-easing);
}

.context-pill.switching::before {
    left: 100%;
}

@keyframes contextSwitch {
    0% { 
        transform: scale3d(1, 1, 1); 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    25% { 
        transform: scale3d(1.03, 1.03, 1); 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    50% { 
        transform: scale3d(1.05, 1.05, 1); 
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    }
    75% { 
        transform: scale3d(1.02, 1.02, 1); 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    100% { 
        transform: scale3d(1, 1, 1); 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

/* Context Transition Ripple Effect */
.context-pill.active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple 0.6s var(--context-easing);
}

@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}

/* Header Context Transition */
.executive-header {
    transition: background var(--context-transition), 
                box-shadow var(--context-transition),
                border-bottom-color var(--context-transition);
    will-change: background, box-shadow;
}

/* ===================================================================
   CONTEXT NAVIGATION THEMING
   Active context indication and smooth transitions
   =================================================================== */

/* Context Pills Active States */
.context-pill[data-context="professional"].active {
    background: var(--professional-gradient);
    color: white;
    box-shadow: var(--professional-shadow);
}

.context-pill[data-context="representative"].active {
    background: var(--representative-gradient);
    color: white;
    box-shadow: var(--representative-shadow);
}

.context-pill[data-context="social"].active {
    background: var(--social-gradient);
    color: white;
    box-shadow: var(--social-shadow);
}

/* Context Pills Hover States */
.context-pill[data-context="professional"]:not(.active):hover {
    background: var(--professional-gradient-soft);
    color: var(--professional-primary);
    transform: translateY(-1px);
}

.context-pill[data-context="representative"]:not(.active):hover {
    background: var(--representative-gradient-soft);
    color: var(--representative-primary);
    transform: translateY(-1px);
}

.context-pill[data-context="social"]:not(.active):hover {
    background: var(--social-gradient-soft);
    color: var(--social-primary);
    transform: translateY(-1px);
}

/* Bottom Navigation Context Theming */
.bottom-nav .nav-tab.active {
    background: var(--professional-gradient-soft);
    color: var(--professional-primary);
}

.app-container[data-context="representative"] .bottom-nav .nav-tab.active {
    background: var(--representative-gradient-soft);
    color: var(--representative-primary);
}

.app-container[data-context="social"] .bottom-nav .nav-tab.active {
    background: var(--social-gradient-soft);
    color: var(--social-primary);
}

/* ===================================================================
   CONTEXT-AWARE COMPONENT THEMING
   Dynamic styling based on active context
   =================================================================== */

/* Button Context Theming */
.btn-primary {
    background: var(--professional-gradient);
    box-shadow: var(--professional-shadow);
}

.app-container[data-context="representative"] .btn-primary {
    background: var(--representative-gradient);
    box-shadow: var(--representative-shadow);
}

.app-container[data-context="social"] .btn-primary {
    background: var(--social-gradient);
    box-shadow: var(--social-shadow);
}

/* Form Input Focus States */
.form-input:focus {
    border-color: var(--professional-primary);
    box-shadow: 0 0 0 3px var(--professional-gradient-soft);
}

.app-container[data-context="representative"] .form-input:focus {
    border-color: var(--representative-primary);
    box-shadow: 0 0 0 3px var(--representative-gradient-soft);
}

.app-container[data-context="social"] .form-input:focus {
    border-color: var(--social-primary);
    box-shadow: 0 0 0 3px var(--social-gradient-soft);
}

/* Contact Option Selection */
.contact-option.selected {
    border-color: var(--professional-primary);
    background: var(--professional-gradient-soft);
}

.app-container[data-context="representative"] .contact-option.selected {
    border-color: var(--representative-primary);
    background: var(--representative-gradient-soft);
}

.app-container[data-context="social"] .contact-option.selected {
    border-color: var(--social-primary);
    background: var(--social-gradient-soft);
}

/* Connection Button Context Theming */
.connection-btn.primary {
    background: var(--professional-primary);
}

.app-container[data-context="representative"] .connection-btn.primary {
    background: var(--representative-primary);
}

.app-container[data-context="social"] .connection-btn.primary {
    background: var(--social-primary);
}

/* ===================================================================
   MODAL AND OVERLAY CONTEXT THEMING
   Context-appropriate modal styling
   =================================================================== */

/* Modal Header Context Theming */
.modal-header {
    border-bottom-color: var(--professional-primary);
}

.app-container[data-context="representative"] .modal-header {
    border-bottom-color: var(--representative-primary);
}

.app-container[data-context="social"] .modal-header {
    border-bottom-color: var(--social-primary);
}

/* Modal Title Context Accent */
.modal-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--professional-gradient);
    border-radius: 2px;
}

.app-container[data-context="representative"] .modal-title::after {
    background: var(--representative-gradient);
}

.app-container[data-context="social"] .modal-title::after {
    background: var(--social-gradient);
}

/* Toast Context Theming */
.toast {
    background: var(--professional-primary);
    box-shadow: var(--professional-shadow);
}

.app-container[data-context="representative"] .toast {
    background: var(--representative-primary);
    box-shadow: var(--representative-shadow);
}

.app-container[data-context="social"] .toast {
    background: var(--social-primary);
    box-shadow: var(--social-shadow);
}

/* ===================================================================
   ORGANIZATION-SPECIFIC BRANDING INTEGRATION
   Dynamic organizational identity within context constraints
   =================================================================== */

/* JP Morgan Professional Overrides */
.app-container[data-context="professional"][data-org="jp-morgan"] .executive-header.professional {
    background: var(--org-jp-morgan) !important;
}

.app-container[data-context="professional"][data-org="jp-morgan"] .context-pill[data-context="professional"].active {
    background: var(--org-jp-morgan);
}

/* Goldman Sachs Professional Overrides */
.app-container[data-context="professional"][data-org="goldman"] .executive-header.professional {
    background: var(--org-goldman) !important;
}

.app-container[data-context="professional"][data-org="goldman"] .context-pill[data-context="professional"].active {
    background: var(--org-goldman);
}

/* Morgan Stanley Professional Overrides */
.app-container[data-context="professional"][data-org="morgan-stanley"] .executive-header.professional {
    background: var(--org-morgan-stanley) !important;
}

.app-container[data-context="professional"][data-org="morgan-stanley"] .context-pill[data-context="professional"].active {
    background: var(--org-morgan-stanley);
}

/* Houston Food Bank Representative Overrides */
.app-container[data-context="representative"][data-org="houston-food-bank"] .executive-header.representative {
    background: var(--org-houston-food-bank) !important;
}

.app-container[data-context="representative"][data-org="houston-food-bank"] .context-pill[data-context="representative"].active {
    background: var(--org-houston-food-bank);
}

/* United Way Representative Overrides */
.app-container[data-context="representative"][data-org="united-way"] .executive-header.representative {
    background: var(--org-united-way) !important;
}

.app-container[data-context="representative"][data-org="united-way"] .context-pill[data-context="representative"].active {
    background: var(--org-united-way);
}

/* CariClub Social Default */
.app-container[data-context="social"][data-org="cariclub"] .executive-header.social {
    background: var(--org-cariclub) !important;
}

/* ===================================================================
   PERMISSION-LEVEL STYLING
   Admin, Engagement, and Observer permission visual indicators
   =================================================================== */

/* Admin Permission Styling */
.app-container[data-permission="admin"] .section-header {
    border-left: 4px solid var(--professional-primary);
}

.app-container[data-context="representative"][data-permission="admin"] .section-header {
    border-left-color: var(--representative-primary);
}

.app-container[data-context="social"][data-permission="admin"] .section-header {
    border-left-color: var(--social-primary);
}

/* Engagement Permission Styling */
.app-container[data-permission="engagement"] .opportunity-card {
    border-left: 2px solid var(--professional-primary);
}

.app-container[data-context="representative"][data-permission="engagement"] .opportunity-card {
    border-left-color: var(--representative-primary);
}

.app-container[data-context="social"][data-permission="engagement"] .opportunity-card {
    border-left-color: var(--social-primary);
}

/* Observer Permission Styling */
.app-container[data-permission="observer"] .btn {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.app-container[data-permission="observer"]::after {
    content: 'Observer Mode';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.app-container[data-permission="observer"]:hover::after {
    opacity: 1;
}

/* ===================================================================
   CONTEXT-AWARE ANIMATIONS AND MICRO-INTERACTIONS
   Enhanced user feedback with context-appropriate styling
   =================================================================== */

/* Context Transition Loading State */
.context-loading {
    position: relative;
}

.context-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--professional-gradient);
    animation: contextLoadingBar 1s ease-in-out infinite;
    z-index: 9999;
}

.app-container[data-context="representative"] .context-loading::before {
    background: var(--representative-gradient);
}

.app-container[data-context="social"] .context-loading::before {
    background: var(--social-gradient);
}

@keyframes contextLoadingBar {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

/* Context-Aware Hover Enhancements */
.opportunity-card:hover {
    box-shadow: 0 8px 25px rgba(0, 132, 214, 0.15);
}

.app-container[data-context="representative"] .opportunity-card:hover {
    box-shadow: 0 8px 25px rgba(212, 78, 118, 0.15);
}

.app-container[data-context="social"] .opportunity-card:hover {
    box-shadow: 0 8px 25px rgba(74, 171, 171, 0.15);
}

/* Context Loading Spinner */
.loading-spinner {
    border-top-color: var(--professional-primary);
}

.app-container[data-context="representative"] .loading-spinner {
    border-top-color: var(--representative-primary);
}

.app-container[data-context="social"] .loading-spinner {
    border-top-color: var(--social-primary);
}

/* ===================================================================
   RESPONSIVE CONTEXT THEMING
   Mobile-optimized context switching and theming
   =================================================================== */

@media (max-width: 430px) {
    /* Simplified context transitions for mobile performance */
    .app-container.context-switching {
        transform: scale3d(0.995, 0.995, 1);
        filter: none;
    }
    
    /* Reduced animation complexity on mobile */
    .context-pill.switching {
        animation: contextSwitchMobile 0.3s ease;
    }
    
    @keyframes contextSwitchMobile {
        0% { transform: scale(1); }
        50% { transform: scale(1.02); }
        100% { transform: scale(1); }
    }
    
    /* Mobile context pill sizing */
    .context-pill {
        min-width: 70px;
        padding: 8px 12px;
        font-size: 11px;
    }
    
    /* Mobile header context transitions */
    .executive-header {
        transition: background 0.2s ease;
    }
    
    /* Optimize backdrop blur for mobile performance */
    .executive-header .org-selector,
    .executive-header .quick-action {
        -webkit-backdrop-filter: blur(var(--backdrop-blur-light));
        backdrop-filter: blur(var(--backdrop-blur-light));
    }
}

/* ===================================================================
   ACCESSIBILITY AND HIGH CONTRAST SUPPORT
   Ensuring context theming works across all accessibility needs
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
    .context-pill.switching,
    .app-container.context-switching,
    .executive-header {
        animation: none;
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .context-pill.active {
        border: 2px solid currentColor;
    }
    
    .executive-header {
        border-bottom: 3px solid currentColor;
    }
    
    .btn-primary {
        border: 2px solid transparent;
    }
    
    .btn-primary:focus {
        border-color: white;
    }
}

/* ===================================================================
   PRINT STYLES FOR CONTEXT AWARENESS
   Maintain context identity in printed materials
   =================================================================== */

@media print {
    .executive-header.professional {
        background: var(--professional-primary) !important;
        color: white !important;
    }
    
    .executive-header.representative {
        background: var(--representative-primary) !important;
        color: white !important;
    }
    
    .executive-header.social {
        background: var(--social-primary) !important;
        color: white !important;
    }
    
    .context-pill,
    .bottom-nav,
    .loading-overlay,
    .toast {
        display: none !important;
    }
}

/* ===================================================================
   CONTEXT DEBUGGING AND DEVELOPMENT HELPERS
   Visual indicators for development and testing
   =================================================================== */

.debug-context::before {
    content: attr(data-context) ' / ' attr(data-org) ' / ' attr(data-permission);
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-family: monospace;
    z-index: 10000;
    pointer-events: none;
}

/* Context performance monitoring */
.context-perf {
    --context-start: 0;
    --context-end: 0;
}

.context-perf::after {
    content: 'Switch: ' counter(context-end) 'ms';
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-family: monospace;
    z-index: 10000;
    pointer-events: none;
}

/* ===================================================================
   UX ENHANCEMENT: FOCUS MANAGEMENT AND KEYBOARD NAVIGATION
   Ensuring context switching is accessible and intuitive
   =================================================================== */

/* Enhanced focus states for context pills */
.context-pill:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* Skip to main content for context switching */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--professional-primary);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10001;
    transition: top 0.3s;
}

.skip-to-content:focus {
    top: 0;
}

/* Context announcement for screen readers */
.context-announcement {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Smooth state transitions for better UX */
.context-pill,
.executive-header,
.btn-primary {
    transition: all var(--context-transition-fast);
}

/* Enhanced visual feedback for interactive elements */
.context-pill:active {
    transform: scale(0.98);
}

.executive-header .quick-action:active {
    transform: translateY(-1px) scale(0.98);
}