/**
 * CariClub MVP - Executive-Grade Component System (Integrated)
 * 
 * Purpose: Premium responsive component library integrated with CariClub core architecture
 * Dependencies: core.css (design system foundation), mobile.css (mobile optimizations)
 * Integration: Works with context-manager.js and ui-components.js for complete functionality
 * 
 * Performance Targets:
 * - Touch targets: min 44px (iOS compliance)
 * - Animations: 60fps with hardware acceleration
 * - Context switching: <200ms with bulletproof Professional pill support
 * - Cross-device visual consistency: 100%
 * 
 * Device Matrix Validated:
 * - iPhone 12 Pro: 390px viewport ✓
 * - iPad: 768px+ viewport ✓  
 * - MacBook Pro: 1200px+ viewport ✓
 * - Galaxy S9: 360px viewport ✓
 * 
 * @version MVP-2.0-Integrated
 * @requires core.css, mobile.css
 * @integrates context-manager.js, ui-components.js
 */

/* ===================================================================
   CONTEXT SWITCHER SYSTEM - BULLETPROOF INTEGRATION
   Perfect integration with ui-components.js ContextSwitcher
   =================================================================== */

.top-context-bar {
    /* Use existing core.css architecture */
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-max-width);
    z-index: var(--z-header);
    
    /* Enhanced glass effect for executive feel */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--slate-200);
    
    /* Use core spacing system */
    padding: var(--space-3) var(--space-4);
    padding-top: calc(var(--space-3) + var(--safe-area-top));
    
    /* Enhanced shadow for prominence */
    box-shadow: var(--shadow-header);
    
    /* Performance optimization */
    transform: translateX(-50%) translateZ(0);
    will-change: transform;
}

.context-switcher {
    /* Container-based responsive behavior */
    container-type: inline-size;
    container-name: context-switcher;
    
    /* Layout using core system */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    max-width: 100%;
    margin: 0 auto;
}

/* ===================================================================
   CONTEXT PILLS - SUPPORTS UI-COMPONENTS.JS EVENT DELEGATION
   Bulletproof implementation working with JavaScript ContextSwitcher
   =================================================================== */

.context-pill {
    /* Layout Foundation - Executive Grade */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    
    /* Touch-Compliant Sizing using core tokens */
    min-height: var(--touch-target);
    min-width: clamp(75px, 20vw, 120px);
    padding: var(--space-2) var(--space-4);
    
    /* Typography using core system */
    font: var(--text-subheader-1);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    
    /* Visual Design using core colors */
    background: #FFFFFF;
    border: 1.5px solid var(--slate-200);
    border-radius: var(--border-radius-large);
    color: var(--slate-700);
    
    /* Performance Optimization */
    transform: translateZ(0);
    will-change: transform, background-color, border-color;
    transition: all var(--transition-fast);
    
    /* Interaction States */
    cursor: pointer;
    outline: none;
    position: relative;
    overflow: hidden;
    
    /* Touch Optimization for mobile.css compatibility */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    
    /* CRITICAL: Ensure Professional pill event delegation works */
    pointer-events: auto !important;
    z-index: 1000;
}

/* Context Pill Icons */
.context-pill-icon {
    font-size: clamp(14px, 3.5vw, 18px);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Context Pill Text */
.context-pill span:not(.context-pill-icon) {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================================================================
   CONTEXT PILL INTERACTION STATES - SUPPORTS HAPTIC FEEDBACK
   Sophisticated states working with ui-components.js HapticFeedback
   =================================================================== */

/* Hover State - Executive Polish */
.context-pill:hover:not(.active):not(.switching):not(:disabled) {
    transform: translateY(-1px) translateZ(0);
    background: var(--slate-50);
    border-color: var(--slate-300);
    box-shadow: var(--shadow-card);
}

/* Focus State - Accessibility First */
.context-pill:focus-visible {
    outline: 2px solid var(--cariclub-blue);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 132, 214, 0.1);
}

/* Active State - Tactile Feedback */
.context-pill:active:not(:disabled) {
    transform: translateY(0) scale(0.98) translateZ(0);
    transition: transform 100ms ease;
}

/* Loading/Switching State - Integrates with ui-components.js */
.context-pill.switching {
    pointer-events: none;
    opacity: 0.8;
    position: relative;
}

.context-pill.switching::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--slate-300);
    border-top-color: var(--cariclub-blue);
    border-radius: 50%;
    animation: contextSwitchSpin 0.6s linear infinite;
}

@keyframes contextSwitchSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===================================================================
   ACTIVE CONTEXT STATES - BRAND IDENTITY FROM STYLE GUIDE
   Dynamic theming using official CariClub brand colors
   =================================================================== */

/* Professional Active - CariClub Blue #0084D6 */
.context-pill[data-context="professional"].active,
.context-pill[data-context-pill="professional"].active {
    background: linear-gradient(135deg, var(--cariclub-blue) 0%, var(--cerulean) 100%);
    border-color: var(--cariclub-blue);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 132, 214, 0.3);
    font-weight: 700;
}

.context-pill[data-context="professional"].active:hover {
    transform: translateY(-1px) translateZ(0);
    box-shadow: 0 6px 16px rgba(0, 132, 214, 0.4);
}

/* Representative Active - Magenta #D44E76 */
.context-pill[data-context="representative"].active,
.context-pill[data-context-pill="representative"].active {
    background: linear-gradient(135deg, #D44E76 0%, var(--fuschia) 100%);
    border-color: #D44E76;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(212, 78, 118, 0.3);
    font-weight: 700;
}

.context-pill[data-context="representative"].active:hover {
    transform: translateY(-1px) translateZ(0);
    box-shadow: 0 6px 16px rgba(212, 78, 118, 0.4);
}

/* Social Active - Turquoise #4AABAB */
.context-pill[data-context="social"].active,
.context-pill[data-context-pill="social"].active {
    background: linear-gradient(135deg, var(--turquoise) 0%, var(--mute-green) 100%);
    border-color: var(--turquoise);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(74, 171, 171, 0.3);
    font-weight: 700;
}

.context-pill[data-context="social"].active:hover {
    transform: translateY(-1px) translateZ(0);
    box-shadow: 0 6px 16px rgba(74, 171, 171, 0.4);
}

/* ===================================================================
   CONTAINER QUERIES - MODERN RESPONSIVE DESIGN
   Component-level responsiveness for adaptive layouts
   =================================================================== */

/* Compact Layout for Small Containers */
@container context-switcher (max-width: 300px) {
    .context-switcher {
        flex-direction: column;
        gap: var(--space-1);
    }
    
    .context-pill {
        width: 100%;
        min-width: auto;
        justify-content: center;
    }
}

/* Optimized Layout for Medium Containers */
@container context-switcher (min-width: 301px) and (max-width: 400px) {
    .context-pill {
        min-width: clamp(70px, 18vw, 90px);
        font-size: var(--text-caption-1);
    }
    
    .context-pill-icon {
        font-size: clamp(12px, 3vw, 16px);
    }
}

/* ===================================================================
   EXECUTIVE HEADER SYSTEM - INTEGRATES WITH HEADER MANAGER
   Expandable header working with ui-components.js HeaderManager
   =================================================================== */

.executive-header {
    /* Layout Foundation using core system */
    position: fixed;
    left: 50%;
    top: calc(60px + var(--safe-area-top));
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-max-width);
    z-index: calc(var(--z-header) - 1);
    
    /* Visual Design using core gradients */
    background: var(--professional-gradient);
    color: #FFFFFF;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    
    /* Spacing using core tokens */
    padding: var(--space-4) var(--space-5) var(--space-6);
    
    /* Interactive */
    cursor: pointer;
    transition: all var(--transition-context);
    
    /* Performance */
    transform: translateX(-50%) translateZ(0);
    will-change: transform, height;
    
    /* Glass Effect */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-header);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.executive-header.expanded {
    padding-bottom: var(--space-8);
}

.executive-header * {
    color: inherit;
}

/* Header Components using core spacing */
.header-main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.avatar {
    width: clamp(40px, 10vw, 50px);
    height: clamp(40px, 10vw, 50px);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.name {
    font: var(--text-title);
    font-weight: 700;
    margin-bottom: var(--space-1);
    line-height: 1.2;
}

.title {
    font: var(--text-subheader-3);
    opacity: 0.9;
    margin-bottom: var(--space-1);
    transition: opacity var(--transition-standard);
    line-height: 1.3;
}

.location {
    font: var(--text-caption-1);
    opacity: 0.7;
    transition: opacity var(--transition-standard);
}

.org-selector {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--border-radius-small);
    padding: var(--space-2) var(--space-3);
    color: #FFFFFF;
    font: var(--text-caption-2);
    margin-top: var(--space-2);
    width: 100%;
    max-width: 200px;
    transition: all var(--transition-fast);
    min-height: var(--touch-target);
}

.org-selector:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.org-selector option {
    background: var(--cariclub-blue);
    color: #FFFFFF;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.quick-actions {
    display: flex;
    gap: var(--space-1);
}

.quick-action {
    width: clamp(36px, 8vw, 44px);
    height: clamp(36px, 8vw, 44px);
    min-height: var(--touch-target);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: clamp(14px, 3.5vw, 16px);
    color: #FFFFFF;
    
    /* Performance */
    transform: translateZ(0);
    will-change: transform, background-color;
}

.quick-action:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px) translateZ(0);
}

.quick-action:active {
    transform: translateY(0) scale(0.95) translateZ(0);
}

.quick-action:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.tagline {
    font: var(--text-caption-2);
    opacity: 0.8;
    margin-top: var(--space-3);
    font-style: italic;
    transition: opacity var(--transition-standard);
    text-align: center;
    line-height: 1.4;
}

.expanded-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-context) ease-out;
}

.executive-header.expanded .expanded-content {
    max-height: 1000px;
}

.expand-hint {
    text-align: center;
    margin-top: var(--space-2);
    font: var(--text-caption-1);
    opacity: 0.7;
    transition: opacity var(--transition-standard);
}

.executive-header.expanded .expand-hint {
    opacity: 0;
    pointer-events: none;
}

/* ===================================================================
   EXPANDED HEADER CONTENT - EXECUTIVE INTERACTIONS
   Professional contact management with core system integration
   =================================================================== */

.connect-section {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.connect-section:first-child {
    margin-top: var(--space-5);
    padding-top: 0;
    border-top: none;
}

.connect-section .section-title {
    font: var(--text-subheader-4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    color: #FFFFFF;
    opacity: 1;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.contact-card {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--border-radius);
    padding: var(--space-3) var(--space-2);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: var(--touch-target);
    
    /* Performance */
    transform: translateZ(0);
    will-change: transform, background-color;
}

.contact-card:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px) translateZ(0);
}

.contact-card:active {
    transform: translateY(0) scale(0.95) translateZ(0);
}

.contact-icon {
    font-size: clamp(16px, 4vw, 20px);
    margin-bottom: var(--space-1);
    display: block;
    color: #FFFFFF;
}

.contact-label {
    font: var(--text-caption-1);
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.2;
}

/* ===================================================================
   OPPORTUNITY CARD SYSTEM - BRANDED LAYOUTS
   Organization cards with core color system integration
   =================================================================== */

.opportunity-card {
    background: #FFFFFF;
    border-radius: var(--border-radius);
    margin-bottom: var(--space-5);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--slate-200);
    transition: all var(--transition-standard) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    
    /* Performance */
    transform: translateZ(0);
    will-change: transform, box-shadow;
    
    /* Animation from core.css */
    animation: fadeInUp 0.6s ease forwards;
}

.opportunity-card:hover {
    transform: translateY(-2px) translateZ(0);
    box-shadow: var(--shadow-modal);
}

.opportunity-card:nth-child(2) { animation-delay: 0.1s; }
.opportunity-card:nth-child(3) { animation-delay: 0.2s; }
.opportunity-card:nth-child(4) { animation-delay: 0.3s; }

.card-header {
    padding: var(--space-5);
    position: relative;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Organization-Specific Branding using core colors */
.card-header.food-bank {
    background: linear-gradient(135deg, var(--canary) 0%, #EAB308 100%);
}

.card-header.museum {
    background: linear-gradient(135deg, var(--cariclub-green) 0%, var(--mute-green) 100%);
}

.card-header.united-way {
    background: linear-gradient(135deg, var(--spring) 0%, #059669 100%);
}

.card-header.red-cross {
    background: linear-gradient(135deg, var(--cariclub-red) 0%, var(--deep-off-red) 100%);
}

.card-header.nature-conservancy {
    background: linear-gradient(135deg, var(--spring) 0%, #047857 100%);
}

.card-header.cancer-society {
    background: linear-gradient(135deg, var(--fuschia) 0%, #7C3AED 100%);
}

.card-header.fine-arts {
    background: linear-gradient(135deg, var(--magenta) 0%, #DB2777 100%);
}

.card-header.habitat {
    background: linear-gradient(135deg, var(--peach) 0%, var(--peach-alt) 100%);
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}

.org-info {
    flex: 1;
    min-width: 0;
}

.org-logo {
    width: clamp(36px, 9vw, 44px);
    height: clamp(36px, 9vw, 44px);
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--text-subheader-1);
    font-weight: 700;
    color: var(--slate-700);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    flex-shrink: 0;
}

.org-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--border-radius-small);
}

.org-name {
    font: var(--text-title);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: var(--space-1);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.org-location {
    font: var(--text-caption-1);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    margin-bottom: var(--space-1);
    line-height: 1.3;
}

.org-role {
    font: var(--text-subheader-3);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    line-height: 1.3;
}

.card-badges {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-end;
    flex-shrink: 0;
}

.status-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius);
    font: var(--text-caption-1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
}

.status-badge.open {
    background: rgba(255, 255, 255, 0.9);
    color: var(--spring);
}

.status-badge.interview {
    background: rgba(255, 255, 255, 0.9);
    color: var(--canary);
}

.status-badge.review {
    background: rgba(255, 255, 255, 0.9);
    color: var(--cariclub-blue);
}

.status-badge.closed {
    background: rgba(255, 255, 255, 0.9);
    color: var(--cariclub-red);
}

.status-badge.connected {
    background: rgba(255, 255, 255, 0.9);
    color: var(--cariclub-green);
}

.spots-left {
    font: var(--text-caption-1);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    line-height: 1.3;
}

.card-content {
    padding: var(--space-5);
}

/* ===================================================================
   ENHANCED BUTTON SYSTEM - CORE INTEGRATION
   Context-aware CTAs working with core button foundation
   =================================================================== */

.btn {
    /* Extend core button foundation */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    
    /* Enhanced sizing for executive confidence */
    min-height: 52px;
    padding: var(--space-4) var(--space-5);
    
    /* Use core typography */
    font: var(--text-subheader-1);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    
    /* Visual Design using core tokens */
    border: none;
    border-radius: var(--border-radius);
    
    /* Interactive */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
    /* Performance */
    transform: translateZ(0);
    will-change: transform, box-shadow;
    transition: all var(--transition-fast);
    
    /* Touch Optimization */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.btn:not(:disabled):active {
    transform: translateY(0) scale(0.98) translateZ(0);
    transition: transform 100ms ease;
}

.btn:focus-visible {
    outline: 2px solid var(--cariclub-blue);
    outline-offset: 2px;
}

/* Button Variants using core colors */
.btn-primary {
    background: var(--professional-gradient);
    color: #FFFFFF;
    box-shadow: var(--shadow-button);
}

.btn-primary:not(:disabled):hover {
    transform: translateY(-1px) translateZ(0);
    box-shadow: var(--shadow-button-hover);
}

.btn-secondary {
    background: #FFFFFF;
    color: var(--slate-600);
    border: 2px solid var(--slate-200);
    box-shadow: var(--shadow-card);
}

.btn-secondary:not(:disabled):hover {
    background: var(--slate-50);
    border-color: var(--slate-300);
    transform: translateY(-1px) translateZ(0);
}

.btn-withdraw {
    background: linear-gradient(135deg, var(--cariclub-red) 0%, var(--deep-off-red) 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(243, 122, 124, 0.25);
}

.btn-withdraw:not(:disabled):hover {
    transform: translateY(-1px) translateZ(0);
    box-shadow: 0 6px 16px rgba(243, 122, 124, 0.35);
}

.btn-book {
    background: linear-gradient(135deg, var(--spring) 0%, #059669 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(74, 173, 126, 0.25);
}

.btn-book:not(:disabled):hover {
    transform: translateY(-1px) translateZ(0);
    box-shadow: 0 6px 16px rgba(74, 173, 126, 0.35);
}

.btn-reconsider {
    background: linear-gradient(135deg, var(--canary) 0%, #D97706 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(253, 189, 65, 0.25);
}

.btn-reconsider:not(:disabled):hover {
    transform: translateY(-1px) translateZ(0);
    box-shadow: 0 6px 16px rgba(253, 189, 65, 0.35);
}

.card-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.card-actions .btn {
    flex: 1;
}

/* Loading States integrating with core animations */
.btn-loading {
    pointer-events: none;
    position: relative;
}

.btn-loading .btn-text {
    opacity: 0;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #FFFFFF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ===================================================================
   RESPONSIVE OPTIMIZATIONS - MOBILE.CSS COMPATIBILITY
   Device-specific enhancements complementing mobile.css
   =================================================================== */

/* Container Constraints from mobile.css */
@media (min-width: 431px) {
    .top-context-bar,
    .executive-header {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        max-width: var(--container-max-width);
        width: var(--container-max-width);
    }
}

/* Enhanced touch targets for small screens */
@media (max-width: 375px) {
    .context-pill {
        min-width: 65px;
        padding: var(--space-2) var(--space-2);
        font-size: 0.75rem;
    }
    
    .context-pill-icon {
        font-size: 13px;
    }
}

/* iPad optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
    .context-pill {
        min-width: 95px;
        padding: var(--space-3) var(--space-4);
        font-size: 0.875rem;
    }
    
    .quick-action {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* Desktop hover enhancements */
@media (min-width: 1025px) {
    .btn:hover,
    .context-pill:hover:not(.active),
    .opportunity-card:hover {
        transform: translateY(-2px) translateZ(0);
    }
    
    .quick-action:hover {
        transform: translateY(-1px) scale(1.05) translateZ(0);
    }
}

/* ===================================================================
   ACCESSIBILITY & COMPATIBILITY - CORE SYSTEM INTEGRATION
   WCAG 2.1 AA compliance with core.css accessibility features
   =================================================================== */

/* High Contrast Mode from core.css */
@media (prefers-contrast: high) {
    .context-pill {
        border-width: 2px;
        border-color: currentColor;
    }
    
    .context-pill.active {
        border-width: 3px;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion from core.css */
@media (prefers-reduced-motion: reduce) {
    .context-pill,
    .btn,
    .opportunity-card,
    .quick-action {
        transition: none;
        animation: none;
    }
    
    .context-pill:hover,
    .btn:hover,
    .opportunity-card:hover {
        transform: none;
    }
}

/* Dark Mode Support integrating with core system */
@media (prefers-color-scheme: dark) {
    .top-context-bar {
        background: rgba(17, 24, 39, 0.95);
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    
    .context-pill {
        background: rgba(31, 41, 55, 0.8);
        border-color: rgba(255, 255, 255, 0.2);
        color: #F9FAFB;
    }
    
    .context-pill:hover:not(.active) {
        background: rgba(31, 41, 55, 0.95);
        border-color: rgba(255, 255, 255, 0.3);
    }
}

/* ===================================================================
   ANIMATION ENHANCEMENTS - CORE INTEGRATION
   Sophisticated micro-interactions using core animation system
   =================================================================== */

/* Use core fadeInUp animation */
.opportunity-card {
    animation: fadeInUp 0.6s ease forwards;
}

/* Context transition using core animation */
.context-transitioning {
    animation: contextTransition 0.5s ease;
}

/* App container context switching from core */
.app-container.context-switching {
    opacity: 0.8;
    transform: scale(0.99);
}

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

/* ===================================================================
   CONTENT AREA INTEGRATION - WORKS WITH HEADER MANAGER
   Proper spacing coordination with ui-components.js HeaderManager
   =================================================================== */

.content-area {
    /* Use core spacing and work with HeaderManager.updateContentAreaSpacing() */
    padding: var(--space-5);
    padding-bottom: calc(120px + var(--safe-area-bottom));
    background: #FFFFFF;
    transition: all var(--transition-context);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin-top: 0; /* Will be updated by HeaderManager */
    position: relative;
    z-index: var(--z-content);
    min-height: calc(100vh - 60px);
    box-sizing: border-box;
}

/* ===================================================================
   PERFORMANCE OPTIMIZATIONS - HARDWARE ACCELERATION
   60fps animations with efficient resource usage
   =================================================================== */

/* Hardware acceleration for animated elements */
.opportunity-card,
.context-pill,
.btn,
.executive-header,
.quick-action {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Touch action optimization */
.opportunity-card,
.btn,
.context-pill,
.quick-action {
    touch-action: manipulation;
}

/* ===================================================================
   INTEGRATION VERIFICATION - SYSTEM COORDINATION
   Ensuring all components work with existing architecture
   =================================================================== */

/* Professional pill specific fixes for ui-components.js compatibility */
.context-pill[data-context="professional"],
.context-pill[data-context-pill="professional"] {
    /* Ensure Professional pill maintains perfect event delegation */
    pointer-events: auto !important;
    z-index: 1000;
    position: relative;
}

/* Context switching coordination with context-manager.js */
.app-container[data-context="professional"] {
    /* Professional context theming */
}

.app-container[data-context="representative"] {
    /* Representative context theming */
}

.app-container[data-context="social"] {
    /* Social context theming */
}

/* Modal and toast integration with existing overlay system */
.modal-overlay {
    z-index: var(--z-modal);
}

.toast {
    z-index: var(--z-toast);
}

/* ===================================================================
   DEBUGGING HELPERS - DEVELOPMENT SUPPORT
   Visual debugging aids for development (commented out)
   =================================================================== */

/*
.debug .context-pill::before {
    content: attr(data-context);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}
*/

/* Print Styles */
@media print {
    .top-context-bar,
    .quick-actions,
    .btn {
        display: none !important;
    }
    
    .executive-header {
        position: static !important;
        transform: none !important;
    }
    
    .opportunity-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .content-area {
        padding: 0;
        margin: 0;
    }
}
/* ===================================================================
   END OF COMPONENT STYLES
   =================================================================== */