/* Modern CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Performance optimizations */
* {
    /* Optimize for performance */
    will-change: auto;
}

/* Reduce animation complexity for better performance */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mobile responsive behavior */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .dashboard-row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .dashboard-item {
        padding: var(--space-4);
    }
}

@media (max-width: 480px) {
    .dashboard-grid {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .dashboard-row {
        gap: var(--space-3);
    }
}

/* ===== END DASHBOARD GRID LAYOUT ===== */

/* ===== UTILITY CLASSES ===== */
.hidden {
    display: none !important;
}

/* Base styles */
html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    font-variation-settings: normal;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg-base);
    color: var(--text-primary);
    transition: background-color var(--duration-normal) var(--ease-in-out),
        color var(--duration-normal) var(--ease-in-out);
    overflow-x: hidden;
}

/* Improved focus styles */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--border-focus);
}

/* Dark mode specific component styles */
[data-theme="dark"] {

    .dashboard-item:hover {
        border-color: var(--border-hover);
        box-shadow: var(--shadow-lg);
    }

    /* Button styles */
    .btn.primary {
        background: var(--gradient-primary);
        color: var(--text-on-primary);
    }

    .btn.secondary {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .btn.secondary:hover {
        background: var(--bg-hover);
        border-color: var(--border-hover);
    }

    /* Input styles */
    input,
    textarea,
    select {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 2px var(--border-focus);
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--text-muted);
    }

    /* Table styles */
    table {
        border-color: var(--border-color);
    }

    th {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }

    td {
        border-color: var(--border-color);
    }

    tr:hover {
        background: var(--bg-hover);
    }

    /* Modal and overlay styles */
    .modal {
        background: var(--bg-elevated);
        border-color: var(--border-color);
        box-shadow: var(--shadow-xl);
    }

    .overlay {
        background: var(--bg-overlay);
        backdrop-filter: blur(8px);
    }

    /* Glass effect components */
    .glass-card {
        background: var(--glass-bg);
        border-color: var(--glass-border);
        box-shadow: var(--glass-shadow);
    }

    /* Code and pre blocks */
    code,
    pre {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    /* Scrollbar styles */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--bg-secondary);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--border-hover);
    }

    /* Selection styles */
    ::selection {
        background: var(--primary-500);
        color: var(--text-on-primary);
    }
}

/* Enhanced Layout System */
.dashboard {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-secondary) 100%);
}

.main-container {
    display: flex;
    flex: 1;
    min-height: calc(100vh - 72px);
    /* Subtract header height */
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -100px;
    left: 6px;
    background: var(--primary-600);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    z-index: 1000;
    transition: top var(--duration-normal) var(--ease-in-out);
    display: none !important;
    /* Temporarily hide skip link */
    pointer-events: none;
    opacity: 0;
}

.skip-link:focus {
    top: 6px;
    display: block !important;
    pointer-events: auto;
    opacity: 1;
}

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

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

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    min-width: fit-content;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: var(--font-size-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
}

.logo:hover .logo-icon {
    transform: rotate(5deg) scale(1.1);
    box-shadow: var(--shadow-xl);
}

.logo-text {
    font-weight: 700;
    font-size: var(--font-size-xl);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Enhanced Main Content */
.main-content {
    flex: 1;
    padding: var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    overflow-y: hidden;
}

/* Enhanced Quick Actions */
.quick-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* Pulse Animation */
.pulse-animation {
    animation: pulse 2s infinite;
}

/* Dashboard item specific styles - core layout kept separate from grid */

/* AI-Powered Insights Section */
.ai-insights-section {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: block !important;
    /* Ensure section is always visible */
}

.ai-insights-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--success-500), var(--warning-500));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.insights-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-600), var(--success-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Override for Today's Insights to ensure white text */
.quick-insights .insights-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* NUCLEAR OPTION - Override ALL btn-icon hover effects for Today's Insights */
.quick-insights .insights-title .btn-icon:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: white !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2) !important;
}

.quick-insights .insights-title .btn-icon:hover svg,
.quick-insights .insights-title .btn-icon:hover path {
    color: white !important;
    stroke: white !important;
    fill: none !important;
}

/* Override CSS variables for the insights section */
.quick-insights .insights-title .btn-icon {
    --primary-50: rgba(255, 255, 255, 0.1) !important;
    --primary-300: rgba(255, 255, 255, 0.3) !important;
    --primary-600: white !important;
    --text-primary: white !important;
    --bg-hover: rgba(255, 255, 255, 0.2) !important;
}

.ai-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    min-height: 200px;
    /* Ensure grid has minimum height */
}

.ai-insight-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid rgba(99, 102, 241, 0.1);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(20px);
    display: block !important;
    /* Ensure cards are always visible */
}

[data-theme="dark"] .ai-insight-card {
    background: rgba(30, 41, 59, 0.8);
}

.ai-insight-card.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ai-insight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-500);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.ai-insight-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(99, 102, 241, 0.3);
}

.ai-insight-card:hover::before {
    opacity: 1;
}

.ai-insight-card.recommendation::before {
    background: var(--primary-500);
}

.ai-insight-card.prediction::before {
    background: var(--success-500);
}

.ai-insight-card.optimization::before {
    background: var(--warning-500);
}

.insight-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.insight-meta {
    flex: 1;
}

.insight-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

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

.confidence-bar {
    width: 60px;
    height: 4px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-500), var(--primary-500));
    border-radius: var(--radius-full);
    transition: width var(--duration-normal);
}

.confidence-text {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.impact-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.impact-badge.high {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-600);
}

.impact-badge.medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-600);
}

.impact-badge.low {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-600);
}

.insight-description {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.insight-actions {
    display: flex;
    gap: var(--space-2);
}

.insight-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
}

.insight-action-btn.primary {
    background: var(--gradient-primary);
    color: white;
}

.insight-action-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.insight-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.insight-action-btn svg {
    width: 14px;
    height: 14px;
}

/* AI Quick Actions Panel */
.ai-quick-actions-panel {
    position: fixed;
    right: -400px !important;
    top: 50%;
    transform: translateY(-50%);
    width: 380px;
    max-height: 80vh;
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-color);
    z-index: 9999;
    transition: right var(--duration-normal) var(--ease-spring);
    overflow: hidden;
    pointer-events: none;
    margin-right: 0;
    opacity: 0;
    visibility: hidden;
}

.ai-quick-actions-panel.active {
    right: 0 !important;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.close-panel {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    transition: all var(--duration-fast);
}

.close-panel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.close-panel svg {
    width: 18px;
    height: 18px;
}

.panel-content {
    padding: var(--space-4);
    max-height: calc(80vh - 80px);
    overflow-y: auto;
}

/* Smart Action Items */
.smart-action-item {
    margin-bottom: var(--space-3);
}

.smart-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    text-align: left;
}

.smart-action-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--primary-200);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.action-icon {
    font-size: var(--font-size-2xl);
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-50);
    border-radius: var(--radius-xl);
    color: var(--primary-600);
}

[data-theme="dark"] .action-icon {
    background: var(--primary-900);
    color: var(--primary-300);
}

.action-content {
    flex: 1;
}

.action-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.action-description {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

/* AI Notifications */
.ai-notification {
    position: fixed;
    top: var(--space-6);
    right: -400px;
    max-width: 400px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    z-index: 10000;
    transition: right var(--duration-normal) var(--ease-spring);
    overflow: hidden;
}

.ai-notification.show {
    right: var(--space-6);
}

.ai-notification.success {
    border-left: 4px solid var(--success-500);
}

.ai-notification.warning {
    border-left: 4px solid var(--warning-500);
}

.ai-notification.error {
    border-left: 4px solid var(--error-500);
}

.ai-notification.info {
    border-left: 4px solid var(--primary-500);
}

.notification-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-4);
}

.notification-message {
    flex: 1;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
    transition: all var(--duration-fast);
}

.notification-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.notification-close svg {
    width: 16px;
    height: 16px;
}

/* Enhanced Task Form AI Suggestions */
.ai-suggestions-form {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: var(--primary-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--primary-200);
}

[data-theme="dark"] .ai-suggestions-form {
    background: var(--primary-900);
    border-color: var(--primary-700);
}

.ai-suggestions-form h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--primary-700);
    margin: 0 0 var(--space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

[data-theme="dark"] .ai-suggestions-form h3 {
    color: var(--primary-300);
}

.ai-suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: linear-gradient(135deg, var(--component-bg) 0%, rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(15px);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    border: 1px solid var(--primary-100);
}

[data-theme="dark"] .ai-suggestion-item {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.9) 0%, rgba(17, 24, 39, 0.9) 100%);
    border-color: var(--primary-800);
}

.suggestion-icon {
    font-size: var(--font-size-lg);
    min-width: 24px;
}

.suggestion-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

.apply-suggestion-btn {
    background: var(--primary-500);
    color: white;
    border: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.apply-suggestion-btn:hover {
    background: var(--primary-600);
    transform: scale(1.02);
}

/* ===== UNIFIED RESPONSIVE DESIGN SYSTEM ===== */

/* Global Mobile Optimizations */
@media (max-width: 480px) {

    /* Small phones - Extra compact layout */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
        padding: var(--space-2) !important;
    }

    .dashboard-item {
        margin: 0 !important;
        border-radius: var(--radius-lg) !important;
    }

    .dashboard-item>* {
        padding: var(--space-3) !important;
    }

    /* Improve text sizing on small screens */
    .welcome-title {
        font-size: var(--font-size-xl) !important;
    }

    .welcome-subtitle {
        font-size: var(--font-size-base) !important;
    }

    /* Compact stats layout */
    .welcome-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-2) !important;
    }

    .stat-item {
        padding: var(--space-3) !important;
    }

    .stat-number {
        font-size: var(--font-size-xl) !important;
    }
}

@media (max-width: 640px) {

    /* Large phones - Optimized mobile layout */
    /* Sidebar mobile styles handled in sidebar.css and mobile-nav.css */
    .main-container {
        flex-direction: column !important;
    }

    .main-content {
        order: 1 !important;
        padding: var(--space-3) !important;
    }

    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    /* Mobile-optimized welcome section */
    .welcome-section {
        padding: var(--space-4) !important;
        margin-bottom: var(--space-4) !important;
    }

    .welcome-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }

    .quick-actions {
        flex-direction: column !important;
        gap: var(--space-3) !important;
    }

    .quick-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 768px) {

    /* Tablets - Enhanced mobile experience */
    .header {
        padding: 0 var(--space-4) !important;
    }

    .header-right {
        gap: var(--space-2) !important;
    }

    .action-button {
        padding: var(--space-2) !important;
    }

    /* Hide less critical elements on tablets */
    .user-dropdown .user-details {
        display: none !important;
    }

    /* Optimize component grids */
    .kpi-grid,
    .goals-grid,
    .news-grid,
    .pinned-grid,
    .insights-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    /* Better modal behavior */
    .modal-content {
        width: calc(100vw - var(--space-8)) !important;
        max-width: none !important;
        margin: var(--space-4) !important;
    }
}

@media (max-width: 1024px) {
    /* Small laptops - Compact desktop layout */
    /* Sidebar mobile styles handled in mobile-optimizations.css */

    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-5) !important;
    }

    .dashboard-item.full-width {
        grid-column: 1 !important;
    }

    /* Adjust component layouts */
    .kpi-grid,
    .goals-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Compact navigation */
    .nav-text {
        font-size: var(--font-size-sm) !important;
    }
}

/* Landscape orientation optimizations */
@media (orientation: landscape) and (max-height: 600px) {
    .welcome-section {
        padding: var(--space-4) var(--space-6) !important;
    }

    /* Sidebar landscape styles handled in sidebar.css */
}

/* High-DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .logo-icon,
    .user-avatar,
    .stat-item {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* Touch device optimizations */
@media (pointer: coarse) {

    /* Larger touch targets */
    button,
    .btn,
    .nav-link,
    .action-button {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Better spacing for touch */
    .quick-actions {
        gap: var(--space-4) !important;
    }

    .nav-item {
        margin-bottom: var(--space-1) !important;
    }
}

/* Container queries for modern browsers */
@container (max-width: 400px) {
    .dashboard-item {
        border-radius: var(--radius-md) !important;
        padding: var(--space-3) !important;
    }
}

/* Comprehensive fix for content cut-off issues */
.dashboard-item .insight-content::before,
.dashboard-item .recommendation-content::before,
.dashboard-item .frequently-used-content::before,
.dashboard-item .quick-access-content::before,
.dashboard-item .action-content::before,
.dashboard-item .category-content::before,
.dashboard-item .handbook-content::before,
.dashboard-item .settings-content::before,
.dashboard-item .version-content::before,
.dashboard-item .ticket-content::before,
.dashboard-item .space-content::before,
.dashboard-item .resource-content::before,
.dashboard-item .event-content::before,
.dashboard-item .member-content::before,
.dashboard-item .team-content::before,
.dashboard-item .course-content::before,
.dashboard-item .benefit-content::before,
.dashboard-item .achievement-content::before,
.dashboard-item .milestone-content::before,
.dashboard-item .user-content::before,
.dashboard-item .policy-content::before,
.dashboard-item .value-content::before,
.dashboard-item .insight-content::before,
.dashboard-item .recommendation-content::before,
.dashboard-item .frequently-used-content::before {
    display: none !important;
}

/* Comprehensive fix for content cut-off issues */
.dashboard-item,
.dashboard-item>*,
.dashboard-item * {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Force all dashboard content to expand */
.dashboard-item,
.dashboard-item>*,
.dashboard-item *,
.dashboard-item *>* {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: auto !important;
}

/* Remove any height constraints from specific components */
company-news,
team-spotlight,
analytics-dashboard,
knowledge-hub,
weather-widget,
enhanced-interactive-poll,
company-culture-showcase,
collaboration-hub,
office-visualizer {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: auto !important;
}

/* Specific fixes for common components that might have height constraints */
.insight-card,
.value-card,
.event-card,
.stat-card,
.achievement-card,
.recommendation-card,
.frequently-used-item,
.quick-access-link,
.action-card,
.resource-category,
.handbook-section,
.settings-section,
.category-card,
.version-item,
.ticket-card,
.space-card,
.resource-item,
.event-item,
.member-spotlight,
.kanban-column,
.timeline-project,
.settings-card,
.profile-section,
.info-item,
.contact-link,
.skill-tag,
.matrix-row,
.avatar-sm,
.avatar-md,
.avatar-lg,
.avatar-xl,
.avatar-2xl,
.avatar-3xl,
.avatar-4xl,
.avatar-5xl,
.avatar-6xl,
.avatar-7xl,
.avatar-8xl,
.avatar-9xl,
.avatar-10xl,
.avatar-11xl,
.avatar-12xl,
.avatar-13xl,
.avatar-14xl,
.avatar-15xl,
.avatar-16xl,
.avatar-17xl,
.avatar-18xl,
.avatar-19xl,
.avatar-20xl,
.avatar-21xl,
.avatar-22xl,
.avatar-23xl,
.avatar-24xl,
.avatar-25xl,
.avatar-26xl,
.avatar-27xl,
.avatar-28xl,
.avatar-29xl,
.avatar-30xl,
.avatar-31xl,
.avatar-32xl,
.avatar-33xl,
.avatar-34xl,
.avatar-35xl,
.avatar-36xl,
.avatar-37xl,
.avatar-38xl,
.avatar-39xl,
.avatar-40xl,
.avatar-41xl,
.avatar-42xl,
.avatar-43xl,
.avatar-44xl,
.avatar-45xl,
.avatar-46xl,
.avatar-47xl,
.avatar-48xl,
.avatar-49xl,
.avatar-50xl,
.avatar-51xl,
.avatar-52xl,
.avatar-53xl,
.avatar-54xl,
.avatar-55xl,
.avatar-56xl,
.avatar-57xl,
.avatar-58xl,
.avatar-59xl,
.avatar-60xl,
.avatar-61xl,
.avatar-62xl,
.avatar-63xl,
.avatar-64xl,
.avatar-65xl,
.avatar-66xl,
.avatar-67xl,
.avatar-68xl,
.avatar-69xl,
.avatar-70xl,
.avatar-71xl,
.avatar-72xl,
.avatar-73xl,
.avatar-74xl,
.avatar-75xl,
.avatar-76xl,
.avatar-77xl,
.avatar-78xl,
.avatar-79xl,
.avatar-80xl,
.avatar-81xl,
.avatar-82xl,
.avatar-83xl,
.avatar-84xl,
.avatar-85xl,
.avatar-86xl,
.avatar-87xl,
.avatar-88xl,
.avatar-89xl,
.avatar-90xl,
.avatar-91xl,
.avatar-92xl,
.avatar-93xl,
.avatar-94xl,
.avatar-95xl,
.avatar-96xl,
.avatar-97xl,
.avatar-98xl,
.avatar-99xl,
.avatar-100xl {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Fix for any remaining overflow hidden issues */
.dashboard-item * {
    overflow: visible !important;
}

/* Ensure all content within dashboard items can expand */
.dashboard-item>*>* {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Fix for any scrollable containers that might be cutting off content */
.dashboard-item .scrollable,
.dashboard-item .scroll-container,
.dashboard-item .overflow-container {
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure all text content is fully visible */
.dashboard-item p,
.dashboard-item h1,
.dashboard-item h2,
.dashboard-item h3,
.dashboard-item h4,
.dashboard-item h5,
.dashboard-item h6,
.dashboard-item span,
.dashboard-item div {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}

/* Fix for any flex containers that might be constraining height */
.dashboard-item .flex,
.dashboard-item .flex-container,
.dashboard-item .flex-wrapper {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Ensure all grid items can expand */
.dashboard-item .grid,
.dashboard-item .grid-container,
.dashboard-item .grid-wrapper {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Fix for any absolute positioned elements that might be cut off */
.dashboard-item .absolute,
.dashboard-item .relative,
.dashboard-item .fixed {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Comprehensive fix for all possible content containers */
.dashboard-item *,
.dashboard-item *::before,
.dashboard-item *::after {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.dashboard-item .command-item:hover,
.dashboard-item .search-result:hover,
.dashboard-item .result-item:hover,
.dashboard-item .placeholder-item:hover,
.dashboard-item .filter-chip:hover,
.dashboard-item .range-selector:hover,
.dashboard-item .metric-card:hover,
.dashboard-item .chart-container:hover,
.dashboard-item .activity-item:hover,
.dashboard-item .goal-item:hover,
.dashboard-item .achievement-item:hover,
.dashboard-item .milestone-item:hover,
.dashboard-item .level-badge:hover,
.dashboard-item .points-display:hover,
.dashboard-item .streak-item:hover,
.dashboard-item .next-achievement:hover,
.dashboard-item .achievement-notification:hover,
.dashboard-item .level-up-notification:hover,
.dashboard-item .connection-status:hover,
.dashboard-item .document-info:hover,
.dashboard-item .space-info:hover,
.dashboard-item .article-content:hover,
.dashboard-item .insight-content:hover,
.dashboard-item .recommendation-content:hover,
.dashboard-item .frequently-used-content:hover,
.dashboard-item .quick-access-content:hover,
.dashboard-item .action-content:hover,
.dashboard-item .category-content:hover,
.dashboard-item .handbook-content:hover,
.dashboard-item .settings-content:hover,
.dashboard-item .version-content:hover,
.dashboard-item .ticket-content:hover,
.dashboard-item .space-content:hover,
.dashboard-item .resource-content:hover,
.dashboard-item .event-content:hover,
.dashboard-item .member-content:hover,
.dashboard-item .team-content:hover,
.dashboard-item .course-content:hover,
.dashboard-item .benefit-content:hover,
.dashboard-item .achievement-content:hover,
.dashboard-item .milestone-content:hover,
.dashboard-item .user-content:hover,
.dashboard-item .policy-content:hover,
.dashboard-item .value-content:hover,
.dashboard-item .insight-content:hover,
.dashboard-item .recommendation-content:hover,
.dashboard-item .frequently-used-content:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Enhanced Widgets */
.widget {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
}

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

.widget-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
}

.widget-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.widget-action {
    padding: var(--space-2);
    color: var(--text-secondary);
    border: none;
    background: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.widget-action:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.widget-action svg {
    width: 18px;
    height: 18px;
}

/* Quick Access Widget */
.quick-access-widget {
    height: 100%;
}

.quick-access-grid {
    padding: var(--space-6);
    display: grid;
    gap: var(--space-4);
}

.quick-access-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid transparent;
}

.quick-access-link:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    transform: translateX(4px);
}

.quick-access-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.quick-access-icon svg {
    width: 24px;
    height: 24px;
}

.quick-access-link:hover .quick-access-icon {
    transform: scale(1.1);
}

.quick-access-icon.document {
    color: var(--primary-600);
    background: var(--primary-50);
}

.quick-access-icon.meeting {
    color: var(--warning-600);
    background: var(--warning-100);
}

.quick-access-icon.project {
    color: var(--success-600);
    background: var(--success-100);
}

.quick-access-icon.resource {
    color: var(--error-600);
    background: var(--error-100);
}

.quick-access-content {
    flex: 1;
}

.quick-access-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-lg);
}

.quick-access-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Updates Section */
.updates-section {
    margin-top: var(--space-8);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-6);
}

.update-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.update-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

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

.update-card:hover::before {
    opacity: 1;
}

.update-card.featured {
    border-color: var(--primary-200);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--primary-50) 100%);
}

.update-card.featured::before {
    opacity: 1;
    background: linear-gradient(90deg, var(--primary-500), var(--success-500));
}

.update-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: var(--primary-500);
    color: white;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.update-content {
    margin-top: var(--space-2);
}

.update-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.4;
}

.update-excerpt {
    color: var(--text-secondary);
    margin: 0 0 var(--space-4) 0;
    line-height: 1.6;
}

.update-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.update-author {
    font-weight: 500;
    color: var(--primary-600);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dashboard-grid {
        max-width: 100%;
        padding: 0 var(--space-4);
    }
}

@media (max-width: 1024px) {
    .dashboard-grid {
        flex-direction: column;
        gap: var(--space-4);
    }

    .dashboard-item {
        margin-bottom: 0;
    }

    .welcome-header {
        flex-direction: column;
        gap: var(--space-6);
    }

    .welcome-stats {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .dashboard-grid {
        padding: 0 var(--space-2);
        gap: var(--space-3);
    }

    .dashboard-item {
        margin-bottom: 0;
    }

    .main-content {
        padding: var(--space-4);
    }

    .welcome-title {
        font-size: var(--font-size-xl);
        gap: var(--space-3);
    }

    .greeting-text {
        font-size: var(--font-size-base);
    }

    .welcome-title .user-name {
        font-size: 2.5rem !important;
    }

    .welcome-emoji {
        font-size: var(--font-size-xl);
    }

    .quick-actions {
        justify-content: center;
    }

    .btn {
        flex: 1;
        justify-content: center;
    }

    .updates-grid {
        grid-template-columns: 1fr;
    }

    .welcome-stats {
        gap: var(--space-4);
    }

    .stat-item {
        min-width: 100px;
        padding: var(--space-3);
    }
}

/* Dark theme enhancements */
[data-theme="dark"] .quick-access-link:hover {
    background: var(--bg-hover-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .update-card.featured {
    background: linear-gradient(135deg, var(--bg-elevated-dark) 0%, var(--primary-900) 100%);
}

/* Theme transition */
.theme-transition,
.theme-transition *,
.theme-transition *:before,
.theme-transition *:after {
    transition: all 0.3s ease !important;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .pulse-animation {
        animation: none;
    }
}

/* High contrast mode support */
@media (forced-colors: active) {

    .btn,
    .nav-link,
    .quick-access-link {
        border: 1px solid currentColor;
    }

    .widget,
    .update-card {
        border: 1px solid currentColor;
    }
}

/* Enhanced Analytics Dashboard Styles */
.analytics-dashboard {
    background: var(--bg-widget);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.analytics-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            var(--primary-500) 0%,
            var(--success-500) 50%,
            var(--primary-600) 100%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.analytics-dashboard:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-200);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.dashboard-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background-color: transparent !important;
}

.dashboard-title::before {
    content: '';
    font-size: var(--font-size-3xl);
    filter: none;
    -webkit-text-fill-color: initial;
}

.dashboard-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.range-selector {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    outline: none;
}

.range-selector:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
}

.range-selector:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.metric-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-500), var(--primary-400));
    transform: scaleY(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.metric-card:hover::before,
.metric-card.highlighted::before {
    transform: scaleY(1);
}

.metric-card.highlighted {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.metric-value {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.metric-value span:first-child {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.metric-trend {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-trend.positive {
    color: var(--success-700);
    background: var(--success-50);
    border: 1px solid var(--success-200);
}

.metric-trend.negative {
    color: var(--error-700);
    background: var(--error-50);
    border: 1px solid var(--error-200);
}

.metric-trend svg {
    width: 12px;
    height: 12px;
}

.metric-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.metric-insight {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.chart-container {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--success-500));
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.chart-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.chart-container:hover::before {
    transform: scaleX(1);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.chart-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

.chart-legend {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.legend-color.completed {
    background: var(--primary-500);
}

.legend-color.in-progress {
    background: var(--warning-500);
}

.chart {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Insights Section */
.insights-section {
    margin-bottom: var(--space-8);
}

.insights-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-6) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.insights-title::before {
    content: '';
    font-size: var(--font-size-xl);
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
}

.insight-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    display: flex;
    gap: var(--space-4);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.insight-card.positive {
    border-left: 4px solid var(--success-500);
}

.insight-card.warning {
    border-left: 4px solid var(--warning-500);
}

.insight-card.info {
    border-left: 4px solid var(--primary-500);
}

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

.insight-card.expanded {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.insight-expanded {
    opacity: 0;
    animation: expandIn 0.3s ease-out forwards;
}

@keyframes expandIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.insight-icon {
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.insight-card.positive .insight-icon {
    background: var(--success-50);
    color: var(--success-600);
}

.insight-card.warning .insight-icon {
    background: var(--warning-50);
    color: var(--warning-600);
}

.insight-card.info .insight-icon {
    background: var(--primary-50);
    color: var(--primary-600);
}

.insight-icon svg {
    width: 24px;
    height: 24px;
}

.insight-content h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.insight-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Activity List */
.activity-list {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease-spring);
}

.activity-list:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.activity-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.activity-title::before {
    content: '';
    font-size: var(--font-size-xl);
}

.activity-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid transparent;
}

.activity-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    transform: translateX(4px);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.activity-icon.task {
    background: var(--success-50);
    color: var(--success-600);
}

.activity-icon.project {
    background: var(--primary-50);
    color: var(--primary-600);
}

.activity-icon.meeting {
    background: var(--warning-50);
    color: var(--warning-600);
}

.activity-icon.update {
    background: var(--gray-100);
    color: var(--gray-600);
}

.activity-icon svg {
    width: 20px;
    height: 20px;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-text {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.activity-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.activity-time {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.activity-time svg {
    width: 12px;
    height: 12px;
}

.activity-user {
    font-weight: 500;
}

/* Refresh Button Enhancement */
#refreshAnalytics {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: var(--bg-widget);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
}

#refreshAnalytics:hover {
    background: var(--primary-50);
    border-color: var(--primary-200);
    color: var(--primary-600);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

#refreshAnalytics:active {
    transform: scale(0.95);
}

#refreshAnalytics svg {
    width: 20px;
    height: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .analytics-dashboard {
        padding: var(--space-6);
    }

    .charts-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-3);
    }

    .insights-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-3);
    }
}

@media (max-width: 768px) {
    .analytics-dashboard {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .dashboard-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
        margin-bottom: var(--space-6);
    }

    .dashboard-controls {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-title {
        font-size: var(--font-size-2xl);
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .metric-card {
        padding: var(--space-4);
    }

    .metric-value span:first-child {
        font-size: var(--font-size-2xl);
    }

    .charts-grid,
    .insights-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .chart-container,
    .activity-list {
        padding: var(--space-4);
    }

    .chart {
        height: 250px;
    }

    .insight-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-4);
    }

    .activity-item {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .activity-meta {
        justify-content: center;
    }
}

/* Mobile responsiveness for color picker */
@media (max-width: 768px) {
    .color-picker-dropdown {
        right: 10px;
        min-width: calc(100vw - 20px);
        max-width: 320px;
    }

    .color-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-2);
    }

    .color-option {
        width: 50px;
        height: 50px;
    }
}

/* Ensure all icons in welcome section use theme colors */
.welcome-section svg,
.welcome-section .btn-icon,
html body .welcome-section svg,
body .welcome-section svg,
#app .welcome-section svg,
.dashboard .welcome-section svg,
.main-content .welcome-section svg {
    color: var(--welcome-text-muted) !important;
    stroke: var(--welcome-text-muted) !important;
}

/* CRITICAL FIX: Override hardcoded purple colors in event elements */
.event-time,
.welcome-section .event-time,
.upcoming-events .event-time,
.events-list .event-time,
html body .welcome-section .event-time,
body .welcome-section .event-time,
#app .welcome-section .event-time,
.dashboard .welcome-section .event-time,
.main-content .welcome-section .event-time,
html body .event-time,
body .event-time,
#app .event-time,
.dashboard .event-time,
.main-content .event-time {
    color: var(--welcome-text-muted) !important;
    background: var(--primary-500) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-1) var(--space-2) !important;
    font-weight: 600 !important;
    font-size: var(--font-size-xs) !important;
}

/* Fix event participants colors */
.event-participants,
.welcome-section .event-participants,
.upcoming-events .event-participants,
.events-list .event-participants,
html body .welcome-section .event-participants,
body .welcome-section .event-participants,
#app .welcome-section .event-participants,
.dashboard .welcome-section .event-participants,
.main-content .welcome-section .event-participants {
    color: var(--welcome-text-muted) !important;
}

/* Fix event participants SVG icons */
.event-participants svg,
.welcome-section .event-participants svg,
.upcoming-events .event-participants svg,
.events-list .event-participants svg,
html body .welcome-section .event-participants svg,
body .welcome-section .event-participants svg,
#app .welcome-section .event-participants svg,
.dashboard .welcome-section .event-participants svg,
.main-content .welcome-section .event-participants svg {
    stroke: var(--welcome-text-muted) !important;
    color: var(--welcome-text-muted) !important;
}

/* Fix event titles to use proper white color on gradient background */
.event-title,
.welcome-section .event-title,
.upcoming-events .event-title,
.events-list .event-title,
html body .welcome-section .event-title,
body .welcome-section .event-title,
#app .welcome-section .event-title,
.dashboard .welcome-section .event-title,
.main-content .welcome-section .event-title {
    color: var(--welcome-text) !important;
}

/* Enhanced Calendar Quick Info */
.calendar-quick-info {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.quick-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.quick-stat:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.quick-stat svg {
    width: 16px;
    height: 16px;
    color: var(--primary-500);
}

.quick-stat-value {
    font-weight: 600;
    color: var(--text-primary);
}

.quick-stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-left: var(--space-1);
}

/* Color picker styles moved to color-picker.css */

/*  CONTEST-WINNING MICRO-INTERACTIONS */

/* Enhanced Stat Card Animations */
.welcome-stats .stat-item {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.welcome-stats .stat-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: rotate 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.welcome-stats .stat-item:hover::before {
    opacity: 1;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Smart Button Morphing */
.quick-actions .btn {
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quick-actions .btn:hover {
    transform: translateZ(20px) rotateX(5deg) rotateY(5deg);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Magnetic Effect for Interactive Elements */
.stat-item,
.event-card,
.recommendation-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stat-item:hover,
.event-card:hover,
.recommendation-card:hover {
    transform: scale(1.05) translateZ(10px);
    z-index: 10;
}

/* Breathing Animation for Live Elements */
.live-indicator .live-dot {
    animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    25% {
        transform: scale(1.1);
        box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.5);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.3);
    }

    75% {
        transform: scale(1.1);
        box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.5);
    }
}

/* Staggered Entrance Animations */
.welcome-stats .stat-item {
    animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    transform: translateY(30px);
}

.welcome-stats .stat-item:nth-child(1) {
    animation-delay: 0.1s;
}

.welcome-stats .stat-item:nth-child(2) {
    animation-delay: 0.2s;
}

.welcome-stats .stat-item:nth-child(3) {
    animation-delay: 0.3s;
}

.welcome-stats .stat-item:nth-child(4) {
    animation-delay: 0.4s;
}

.welcome-stats .stat-item:nth-child(5) {
    animation-delay: 0.5s;
}

.welcome-stats .stat-item:nth-child(6) {
    animation-delay: 0.6s;
}

/* slideInUp animation consolidated below to eliminate duplication */

/* Parallax Scroll Effect */
.welcome-section {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.welcome-section .particle {
    transform: translateZ(50px);
}

.welcome-section .floating-icon {
    transform: translateZ(30px);
}

.welcome-section .sparkle {
    transform: translateZ(20px);
}

/* Text Reveal Animation */
.welcome-title,
.welcome-subtitle {
    animation: textReveal 1s ease-out forwards;
    opacity: 0;
}

.welcome-subtitle {
    animation-delay: 0.3s;
}

@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(20px) rotateX(15deg);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
        filter: blur(0);
    }
}

/* Morphing Icon Animations */
.welcome-section svg {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.welcome-section .btn:hover svg {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Liquid Button Effect */
.quick-actions .btn.primary {
    background: linear-gradient(45deg, var(--primary-500), var(--primary-600), var(--primary-500));
    background-size: 300% 300%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Enhanced Focus Ring Animation */
*:focus-visible {
    animation: focusPulse 0.6s ease-out;
}

@keyframes focusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(99, 102, 241, 0.3);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(99, 102, 241, 0);
    }
}

/* Typewriter Effect for Dynamic Content */
.ai-insight {
    overflow: hidden;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    animation:
        typing 3.5s steps(40, end),
        blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: rgba(255, 255, 255, 0.75);
    }
}

/* Floating Label Effect */
.recommendation-card {
    position: relative;
}

.recommendation-card::after {
    content: attr(data-priority);
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--primary-500);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.recommendation-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* Event Card Time Badge Animation */
.event-time {
    position: relative;
    overflow: hidden;
}

.event-time::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 0.6s ease;
}

.event-card:hover .event-time::before {
    left: 100%;
}

/* Smart Loading States */
.welcome-section.loading {
    position: relative;
}

.welcome-section.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%),
        var(--welcome-bg-start);
    animation: shimmer 2s infinite;
}

/* Performance Optimized Particles */
.welcome-section .particle {
    will-change: transform;
    contain: layout style paint;
}

/* Smooth State Transitions */
.welcome-section * {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interactive Glow Effects */
.stat-item:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

.quick-actions .btn:active {
    transform: scale(0.96) translateY(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Smart Hover Zones */
.welcome-section .hover-zone {
    position: relative;
    transition: all 0.3s ease;
}

.welcome-section .hover-zone::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    background: transparent;
    transition: background 0.3s ease;
    z-index: -1;
}

.welcome-section .hover-zone:hover::before {
    background: rgba(255, 255, 255, 0.05);
}

/* Welcome Header - Enhanced typography */

@media (max-width: 480px) {
    .analytics-dashboard {
        padding: var(--space-3);
    }

    .dashboard-title {
        font-size: var(--font-size-xl);
        flex-direction: column;
        gap: var(--space-2);
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        padding: var(--space-3);
    }

    .chart-container,
    .activity-list {
        padding: var(--space-3);
    }

    .chart {
        height: 200px;
    }
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.metric-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

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

.metric-card:hover::before {
    opacity: 1;
}

.metric-value {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.metric-trend {
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.metric-trend.positive {
    background: var(--success-100);
    color: var(--success-700);
}

.metric-trend.negative {
    background: var(--error-100);
    color: var(--error-700);
}

.metric-trend.neutral {
    background: var(--gray-100);
    color: var(--gray-700);
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: var(--space-2);
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.chart-container {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
}

.chart-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.chart-header {
    margin-bottom: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.chart-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: var(--space-1) 0 0 0;
}

.chart {
    height: 200px;
    position: relative;
    display: flex;
    align-items: end;
    gap: var(--space-2);
    padding: var(--space-4) 0;
}

.chart-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--primary-500) 0%, var(--primary-600) 100%);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    min-width: 20px;
}

.chart-bar:hover {
    transform: scaleY(1.05);
    box-shadow: var(--shadow-md);
}

.chart-bar::after {
    content: attr(data-value);
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-elevated);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.chart-bar:hover::after {
    opacity: 1;
}

.chart-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border-color);
}

.chart-label {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 700;
    text-align: center;
    min-width: 40px;
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

.activity-list {
    padding: var(--space-6);
    border-top: 1px solid var(--border-color);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.activity-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid transparent;
}

.activity-item:hover {
    transform: translateX(4px);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.activity-item:hover .activity-icon {
    transform: scale(1.1);
}

.activity-icon.task {
    background: var(--primary-100);
    color: var(--primary-600);
}

.activity-icon.project {
    background: var(--success-100);
    color: var(--success-600);
}

.activity-icon.update {
    background: var(--error-100);
    color: var(--error-600);
}

.activity-content {
    flex: 1;
}

.activity-text {
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
    font-weight: 500;
}

.activity-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.activity-time {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.activity-time svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {

    .metrics-grid,
    .charts-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

    .chart {
        height: 150px;
    }
}

/* Task Management Styles - Extracted to components/task-management.css */

/* Task Stats */
.task-stats {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.stat-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    min-width: 100px;
    text-align: center;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-500);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card.completed::before {
    background: var(--success-500);
}

.stat-card.in-progress::before {
    background: var(--warning-500);
}

.stat-card.overdue::before {
    background: var(--error-500);
}

.stat-number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-600);
    margin-bottom: var(--space-1);
    line-height: 1;
}

.stat-card.completed .stat-number {
    color: var(--success-600);
}

.stat-card.in-progress .stat-number {
    color: var(--warning-600);
}

.stat-card.overdue .stat-number {
    color: var(--error-600);
}

.stat-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Task Controls */
.task-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.search-and-filters {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    flex-wrap: wrap;
}

.search-container {
    position: relative;
    min-width: 250px;
    flex: 1;
    max-width: 400px;
}

.task-search {
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: border-color var(--duration-normal) var(--ease-in-out), box-shadow var(--duration-normal) var(--ease-in-out);
    outline: none;
}

.task-search:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-sm);
}

.search-icon {
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    pointer-events: none;
}

.filter-controls {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.enhanced-select {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    min-width: 140px;
    outline: none;
}

.enhanced-select:hover {
    border-color: var(--border-hover);
}

.enhanced-select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.action-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.view-toggle {
    display: flex;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    border: 1px solid var(--border-color);
}

.view-btn {
    padding: var(--space-2);
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-btn svg {
    width: 18px;
    height: 18px;
}

.view-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.view-btn.active {
    background: var(--primary-500);
    color: white;
    box-shadow: var(--shadow-sm);
}

.enhanced-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.enhanced-btn svg {
    width: 18px;
    height: 18px;
}

.enhanced-btn.primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    box-shadow: var(--shadow-md);
}

.enhanced-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.enhanced-btn.secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.enhanced-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Task Content Area */
.task-content {
    padding: var(--space-6);
    background: var(--bg-primary);
}

/* Card View Styles */
.task-cards-container {
    width: 100%;
}

.task-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-5);
    /* Prevent flash during initial render */
    contain: layout style;
    will-change: contents;
}

.enhanced-task-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-spring),
        box-shadow var(--duration-normal) var(--ease-spring),
        border-color var(--duration-normal) var(--ease-spring);
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    /* Prevent flash during initial render */
    opacity: 1;
    visibility: visible;
    contain: layout style;
}

.enhanced-task-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-500);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.enhanced-task-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-200);
}

.enhanced-task-card:hover::before {
    opacity: 1;
}

.enhanced-task-card.overdue {
    border-color: var(--error-200);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--error-50) 100%);
}

.enhanced-task-card.overdue::before {
    background: var(--error-500);
}

.enhanced-task-card.completed {
    border-color: var(--success-200);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--success-50) 100%);
}

.enhanced-task-card.completed::before {
    background: var(--success-500);
}

.enhanced-task-card.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
    z-index: 1000;
}

/* Task Card Header */
.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.task-priority {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.task-priority.high {
    background: var(--error-100);
    color: var(--error-700);
    border: 1px solid var(--error-200);
}

.task-priority.medium {
    background: var(--warning-100);
    color: var(--warning-700);
    border: 1px solid var(--warning-200);
}

.task-priority.low {
    background: var(--success-100);
    color: var(--success-700);
    border: 1px solid var(--success-200);
}

.priority-icon {
    font-size: var(--font-size-sm);
}

.action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
    box-shadow: var(--shadow-sm);
}

.action-btn svg {
    width: 16px;
    height: 16px;
}

/* Task Card Content */
.task-card-content {
    margin-bottom: var(--space-4);
}

.task-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}

.task-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.task-tag {
    padding: var(--space-1) var(--space-2);
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid var(--primary-200);
}

/* Task Progress */
.task-card-progress {
    margin-bottom: var(--space-4);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.progress-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.progress-percentage {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-600);
}

.enhanced-progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-in-out);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    /* Removed shimmer animation to prevent distraction */
}

/* Task Card Meta */
.task-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

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

.assignee-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    border: 2px solid var(--bg-elevated);
    box-shadow: var(--shadow-sm);
}

.assignee-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.task-meta-items {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.meta-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.due-date.overdue {
    color: var(--error-600);
    font-weight: 600;
}

/* Task Status Badge */
.task-status-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

.task-status-badge.pending {
    background: var(--warning-100);
    color: var(--warning-700);
    border: 1px solid var(--warning-200);
}

.task-status-badge.in-progress {
    background: var(--primary-100);
    color: var(--primary-700);
    border: 1px solid var(--primary-200);
}

.task-status-badge.completed {
    background: var(--success-100);
    color: var(--success-700);
    border: 1px solid var(--success-200);
}

/* Empty State */
.empty-state-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: var(--space-8);
}

.empty-state-content {
    text-align: center;
    max-width: 400px;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    background: var(--primary-50);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-500);
}

.empty-state-icon svg {
    width: 40px;
    height: 40px;
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-state-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-6) 0;
    line-height: 1.5;
}

/* List View Styles */
.task-list-container {
    width: 100%;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.task-list-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.task-list-body {
    max-height: none;
    overflow-y: visible;
}

.task-list-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    cursor: pointer;
    align-items: center;
}

.task-list-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

.task-list-item:last-child {
    border-bottom: none;
}

.task-list-item.overdue {
    background: linear-gradient(90deg, var(--error-50) 0%, transparent 100%);
    border-left: 4px solid var(--error-500);
}

.task-title-cell h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.task-title-cell p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-tags-inline {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.task-tag-small {
    padding: 2px var(--space-1);
    background: var(--primary-50);
    color: var(--primary-600);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 500;
}

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

.status-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.status-badge.pending {
    background: var(--warning-100);
    color: var(--warning-700);
}

.status-badge.in-progress {
    background: var(--primary-100);
    color: var(--primary-700);
}

.status-badge.completed {
    background: var(--success-100);
    color: var(--success-700);
}

.priority-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.priority-badge.high {
    color: var(--error-700);
}

.priority-badge.medium {
    color: var(--warning-700);
}

.priority-badge.low {
    color: var(--success-700);
}

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

.mini-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-text {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 35px;
}

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

/* Kanban View Styles */
.kanban-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    min-height: 500px;
}

.kanban-column {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.kanban-header {
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-header h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.task-count {
    background: var(--primary-100);
    color: var(--primary-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.kanban-tasks {
    padding: var(--space-4);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.kanban-task-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: var(--space-3);
    transition: all var(--duration-normal) var(--ease-spring);
    cursor: grab;
    box-shadow: var(--shadow-sm);
}

.kanban-task-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.kanban-task-card.dragging {
    opacity: 0.5;
    transform: rotate(3deg);
    cursor: grabbing;
}

.kanban-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.priority-indicator {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
}

.priority-indicator.high {
    background: var(--error-100);
}

.priority-indicator.medium {
    background: var(--warning-100);
}

.priority-indicator.low {
    background: var(--success-100);
}

.card-menu-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.card-menu-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.card-menu-btn svg {
    width: 14px;
    height: 14px;
}

.kanban-task-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
}

.kanban-task-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.kanban-task-tags {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.task-tag-mini {
    padding: 2px var(--space-1);
    background: var(--primary-50);
    color: var(--primary-600);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 500;
}

.kanban-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assignee-avatar-small {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    border: 1px solid var(--border-color);
}

.due-date-mini {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.due-date-mini.overdue {
    color: var(--error-600);
    font-weight: 600;
}

/* Task Modal Styles */
.task-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.task-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-color);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    transform: scale(0.9);
    transition: transform var(--duration-normal) var(--ease-spring);
}

.task-modal.active .modal-content {
    transform: scale(1);
}

.modal-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
}

.modal-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
}

.modal-close svg {
    width: 18px;
    height: 18px;
}

/* Task Form Styles */
.task-form {
    padding: var(--space-6);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-row:has(.form-group:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: all var(--duration-normal) var(--ease-in-out);
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
    margin-top: var(--space-6);
}

/* Notification Styles */
.task-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    padding: var(--space-4);
    max-width: 300px;
    transform: translateX(100%);
    transition: all var(--duration-normal) var(--ease-spring);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.task-notification.show {
    transform: translateX(0);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .task-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .kanban-container {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .task-list-header,
    .task-list-item {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .task-list-header .assignee-col,
    .task-list-header .priority-col,
    .task-list-header .progress-col,
    .task-list-header .due-col,
    .task-list-item .assignee-col,
    .task-list-item .priority-col,
    .task-list-item .progress-col,
    .task-list-item .due-col {
        display: none;
    }
}

@media (max-width: 768px) {
    .task-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .search-and-filters {
        flex-direction: column;
    }

    .filter-controls {
        justify-content: stretch;
    }

    .enhanced-select {
        min-width: auto;
        flex: 1;
    }

    .action-controls {
        justify-content: space-between;
    }

    .task-cards-grid {
        grid-template-columns: 1fr;
    }

    .header-content {
        flex-direction: column;
        align-items: stretch;
    }

    .task-stats {
        flex-direction: column;
    }

    .form-row:has(.form-group:nth-child(2)) {
        grid-template-columns: 1fr;
    }
}

/* Animation Classes */
.task-card-enter {
    animation: slideInUp 0.3s var(--ease-spring);
}

.task-card-exit {
    animation: slideOutDown 0.3s var(--ease-spring);
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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



to {
    opacity: 0;
    transform: translateY(20px);
}
}

/* Quick Actions Panel */
.quick-actions-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 250px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.quick-actions-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.panel-header {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3 {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.close-panel {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.close-panel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.close-panel svg {
    width: 16px;
    height: 16px;
}

.panel-content {
    padding: var(--space-4);
}

.quick-action-item {
    margin-bottom: var(--space-3);
}

.quick-action-btn {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.quick-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--primary-300);
    transform: translateY(-1px);
}

.quick-action-btn svg {
    width: 16px;
    height: 16px;
    color: var(--primary-500);
}

/* Task Management Styles - Extracted to components/task-management.css */
.view-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.view-btn:hover::before {
    width: 100px;
    height: 100px;
}

.view-btn svg {
    width: 20px;
    height: 20px;
    z-index: 1;
    position: relative;
}

.view-btn:hover {
    color: var(--text-primary);
    transform: scale(1.05);
}

.view-btn.active {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

.enhanced-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.enhanced-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.enhanced-btn:hover::before {
    width: 300px;
    height: 300px;
}

.enhanced-btn svg {
    width: 18px;
    height: 18px;
    z-index: 1;
    position: relative;
}

.enhanced-btn.primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
}

.enhanced-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.enhanced-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .enhanced-btn.secondary {
    background: rgba(30, 41, 59, 0.8);
}

.enhanced-btn.secondary:hover {
    border-color: var(--primary-300);
    background: var(--bg-hover);
    box-shadow: var(--shadow-sm);
}

/* Task Content Area */
.task-content {
    padding: var(--space-3);
    background: var(--bg-widget);
    position: relative;
    z-index: 1;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* AI-Powered Insights Section */
.ai-insights-section {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: block !important;
    /* Ensure section is always visible */
}

.ai-insights-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--success-500), var(--warning-500));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.insights-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-600), var(--success-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ai-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    min-height: 200px;
    /* Ensure grid has minimum height */
}

.confidence-text {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.impact-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.impact-badge.high {
    background: var(--error-100);
    color: var(--error-700);
}

.impact-badge.medium {
    background: var(--warning-100);
    color: var(--warning-700);
}

.impact-badge.low {
    background: var(--success-100);
    color: var(--success-700);
}

.insight-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.insight-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.insight-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
}

.insight-action-btn svg {
    width: 14px;
    height: 14px;
}

.insight-action-btn.primary:hover {
    background: var(--primary-600);
    transform: translateY(-1px);
}

.insight-action-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.insight-action-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

/* Performance Analytics */
.task-analytics {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.task-analytics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--success-500), var(--primary-500), var(--warning-500));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.analytics-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    background: linear-gradient(135deg, var(--success-600), var(--primary-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.analytics-metric {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    border: 1px solid rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(20px);
}

[data-theme="dark"] .analytics-metric {
    background: rgba(30, 41, 59, 0.8);
}

.analytics-metric.animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.analytics-metric:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.metric-icon {
    font-size: var(--font-size-2xl);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    background: var(--primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-content {
    flex: 1;
}

.metric-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    line-height: 1;
}

.metric-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.metric-trend {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
}

.metric-trend.positive {
    background: var(--success-100);
    color: var(--success-700);
}

.metric-trend.negative {
    background: var(--error-100);
    color: var(--error-700);
}

.metric-trend.neutral {
    background: var(--gray-100);
    color: var(--gray-700);
}

.insight-card.positive .insight-icon {
    background: var(--success-50);
}

.insight-card.positive .insight-icon {
    background: var(--success-50);
}

.insight-card.warning .insight-icon {
    background: var(--warning-50);
}

.insight-content {
    flex: 1;
}

.insight-content h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}

.insight-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.5;
}

.insight-metric {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--primary-600);
    padding: var(--space-1) var(--space-3);
    background: var(--primary-50);
    border-radius: var(--radius-full);
    display: inline-block;
    border: 1px solid var(--primary-200);
}

.insight-card.positive .insight-metric {
    color: var(--success-600);
    background: var(--success-50);
    border-color: var(--success-200);
}

.insight-card.warning .insight-metric {
    color: var(--warning-600);
    background: var(--warning-50);
    border-color: var(--warning-200);
}

/* Enhanced Task Cards - Update existing style */
.enhanced-task-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.enhanced-task-card.animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="dark"] .enhanced-task-card {
    background: rgba(30, 41, 59, 0.8);
}

.enhanced-task-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-500);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.enhanced-task-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.enhanced-task-card:hover::before {
    opacity: 1;
}

.enhanced-task-card.overdue {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(254, 242, 242, 0.8) 100%);
}

[data-theme="dark"] .enhanced-task-card.overdue {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.8) 0%,
            rgba(55, 48, 48, 0.8) 100%);
}

.enhanced-task-card.overdue::before {
    background: var(--error-500);
    opacity: 1;
}

.enhanced-task-card.completed {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(240, 253, 244, 0.8) 100%);
}

[data-theme="dark"] .enhanced-task-card.completed {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.8) 0%,
            rgba(34, 48, 42, 0.8) 100%);
}

.enhanced-task-card.completed::before {
    background: var(--success-500);
    opacity: 1;
}

/* Backward Compatibility for existing task-system class */
.task-system {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    margin: 0 !important;
    padding: 0 !important;
}

.task-system:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

@media (max-width: 768px) {
    .task-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

    .task-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .task-header-row {
        flex-direction: column;
        gap: var(--space-3);
    }

    .task-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* Weather Widget Styles */
.weather-widget {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

.weather-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.weather-widget:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.weather-widget:hover::before {
    opacity: 1;
}

.weather-header {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.weather-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.weather-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
}

.weather-location {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.location-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.9);
}

.weather-content {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
}

.current-weather {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: center;
    margin-bottom: var(--space-6);
}

.weather-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.temperature {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.temperature-unit {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-secondary);
}

.weather-description {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.weather-details {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.weather-detail {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.weather-detail svg {
    width: 16px;
    height: 16px;
    color: var(--primary-500);
}

.weather-icon {
    width: 80px;
    height: 80px;
    color: var(--primary-500);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.forecast {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-6);
}

.forecast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.forecast-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.forecast-toggle {
    display: flex;
    gap: var(--space-2);
}

.toggle-btn {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.toggle-btn.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

.toggle-btn:hover:not(.active) {
    border-color: var(--primary-500);
    color: var(--primary-500);
}

.forecast-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
}

.forecast-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--duration-normal) var(--ease-spring);
}

.forecast-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.forecast-day {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-2);
}

.forecast-icon {
    width: 32px;
    height: 32px;
    color: white;
    margin: var(--space-2) auto;
}

.forecast-temp {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-1);
}

.forecast-desc {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.weather-error {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.weather-error svg {
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.weather-error h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.weather-error p {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* Team Spotlight Text Readability Fixes */
.team-spotlight .event-title,
.team-spotlight .event-time,
.team-spotlight .member-role,
.team-spotlight .member-department,
.team-spotlight .achievements-list li,
.team-spotlight .skill-tag {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

.team-spotlight .event-time {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* Fix all components with faded text */
.company-news .news-excerpt,
.company-news .news-meta,
.analytics-dashboard .metric-insight,
.analytics-dashboard .activity-meta,
.weather-widget .weather-details,
.task-system .task-description,
.task-system .task-meta,
.knowledge-hub .article-meta,
.achievement-system .achievement-description,
.collaboration-hub .project-meta,
.company-culture-showcase .story-text,
.company-culture-showcase .value-description {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* Ensure all primary text is sufficiently dark */
h1,
h2,
h3,
h4,
h5,
h6,
.widget-title,
.section-title,
.card-title,
.member-name,
.task-name,
.news-headline,
.event-title,
.chart-title,
.metric-label {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Fix secondary text elements */
.meta-text,
.description-text,
.subtitle-text,
.helper-text,
.caption-text {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* Specific fixes for upcoming events section */
.upcoming-events .event-title,
.events-list .event-title {
    color: white !important;
    font-weight: 600 !important;
    font-size: var(--font-size-sm) !important;
}

.upcoming-events .event-time,
.events-list .event-time {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    font-size: var(--font-size-xs) !important;
}

/* Enhanced contrast for small text */
.font-size-xs,
.text-xs {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

.font-size-sm,
.text-sm {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

.insight-card h4 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.insight-card p {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* Ensure sufficient contrast in dark mode */
[data-theme="dark"] .team-spotlight .event-title,
[data-theme="dark"] .team-spotlight .member-name,
[data-theme="dark"] .upcoming-events .event-title,
[data-theme="dark"] .events-list .event-title {
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .team-spotlight .event-time,
[data-theme="dark"] .upcoming-events .event-time,
[data-theme="dark"] .events-list .event-time {
    color: var(--text-secondary-dark) !important;
}

/* Unified Search Styles */
.search-container {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

.search-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.search-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.search-container:hover::before {
    opacity: 1;
}

.search-header {
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    border-bottom: 1px solid var(--border-color);
}

.search-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.search-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
}

.search-input-container {
    position: relative;
    margin-bottom: var(--space-4);
}

.search-input {
    width: 100%;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: all var(--duration-normal) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
    transform: translateY(-1px);
}

.search-input::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
}

.search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: color var(--duration-normal) var(--ease-in-out);
}

.search-input:focus+.search-icon {
    color: var(--primary-500);
}

.search-filters {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.filter-chip {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.filter-chip:hover {
    border-color: var(--primary-500);
    color: var(--primary-500);
    background: var(--primary-50);
}

.filter-chip.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

.search-content {
    padding: var(--space-6);
}

.search-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.results-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

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

.sort-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.sort-select {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.sort-select:hover {
    border-color: var(--primary-500);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.search-placeholder {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.placeholder-icon {
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.placeholder-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.placeholder-description {
    margin: 0;
    font-size: var(--font-size-sm);
}

.search-result {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: var(--space-4);
}

.search-result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-500);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.search-result:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.search-result:hover::before {
    opacity: 1;
}

.result-icon {
    width: 40px;
    height: 40px;
    color: var(--primary-500);
    flex-shrink: 0;
}

.result-content {
    flex: 1;
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-3);
}

.result-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.result-actions {
    display: flex;
    gap: var(--space-2);
}

.result-action {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-action:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
    color: var(--primary-600);
    transform: translateY(-1px);
}

.result-meta {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.result-author,
.result-date,
.result-category,
.result-role,
.result-department,
.result-email,
.result-lead,
.result-status,
.result-progress {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.result-status.primary {
    background: var(--primary-100);
    color: var(--primary-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.result-status.success {
    background: var(--success-100);
    color: var(--success-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.result-status.warning {
    background: var(--warning-100);
    color: var(--warning-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.result-tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.result-tag {
    padding: var(--space-1) var(--space-2);
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.search-loading,
.search-empty {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.search-loading svg,
.search-empty svg {
    margin-bottom: var(--space-4);
    /* Removed spin animation */
}

.search-empty svg {
    animation: none;
    opacity: 0.5;
}

.search-loading p,
.search-empty h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.search-empty p {
    margin: 0;
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .search-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-stats {
        flex-direction: column;
        gap: var(--space-3);
        align-items: flex-start;
    }

    .result-header {
        flex-direction: column;
        gap: var(--space-2);
    }

    .result-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* Command Palette Styles */
.command-palette {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-8);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.command-palette.active {
    display: flex;
    opacity: 1;
}

.palette-container {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: all var(--duration-normal) var(--ease-spring);
}

.command-palette.active .palette-container {
    transform: translateY(0) scale(1);
}

.palette-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.search-container {
    position: relative;
    flex: 1;
}

.search-input {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 500;
    transition: all var(--duration-normal) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.search-input::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
}

.search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: color var(--duration-normal) var(--ease-in-out);
}

.close-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
    color: var(--primary-600);
    transform: translateY(-1px);
}

.commands-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--space-2);
}

.command-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    margin-bottom: var(--space-1);
    border: 1px solid transparent;
}

.command-item:hover,
.command-item.selected {
    background: var(--primary-50);
    border-color: var(--primary-200);
}

.command-icon {
    width: 24px;
    height: 24px;
    color: var(--primary-500);
    flex-shrink: 0;
}

.command-content {
    flex: 1;
    min-width: 0;
}

.command-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.command-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-1);
}

.command-category {
    padding: var(--space-1) var(--space-2);
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

.command-shortcut {
    padding: var(--space-1) var(--space-2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.palette-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.shortcuts-help {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: center;
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.shortcut-hint {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-weight: 600;
}

.no-results {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.no-results svg {
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.no-results h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.no-results p {
    margin: 0;
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .command-palette {
        padding: var(--space-4);
    }

    .palette-container {
        max-height: 90vh;
    }

    .command-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .command-shortcut,
    .command-category {
        align-self: flex-end;
    }

    .shortcuts-help {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* Header Styles */
app-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

.header {
    height: 64px;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    min-width: fit-content;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: var(--font-size-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
}

.logo:hover .logo-icon {
    transform: rotate(5deg) scale(1.1);
    box-shadow: var(--shadow-xl);
}

.logo-text {
    font-weight: 700;
    font-size: var(--font-size-xl);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.menu-button {
    display: none;
    padding: var(--space-2);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--duration-normal) var(--ease-in-out);
    background: none;
    border: none;
    cursor: pointer;
}

.menu-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.menu-button svg {
    width: 24px;
    height: 24px;
}

.action-button {
    padding: var(--space-2);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
    background: none;
    border: none;
    cursor: pointer;
}

[data-theme="dark"] .action-button {
    color: var(--gray-400);
}

[data-theme="dark"] .action-button:hover {
    color: var(--gray-200);
    background: var(--gray-700);
}

[data-theme="dark"] .action-button::before {
    background: rgba(255, 255, 255, 0.05);
}

.action-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.action-button:hover::before {
    width: 40px;
    height: 40px;
}

.action-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.action-button svg {
    width: 20px;
    height: 20px;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.action-button:hover svg {
    transform: scale(1.1);
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--error-500);
    border-radius: 50%;
    border: 2px solid var(--bg-elevated);
}

[data-theme="dark"] .notification-badge {
    background: var(--error-400);
    border-color: var(--gray-800);
}

.user-menu {
    display: flex;
    align-items: center;
}

.user-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.user-button:hover {
    background: var(--bg-hover);
    border-color: var(--primary-500);
}

[data-theme="dark"] .user-button {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-200);
}

[data-theme="dark"] .user-button:hover {
    background: var(--gray-700);
    border-color: var(--gray-600);
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: var(--font-size-sm);
}

.user-avatar svg {
    width: 100%;
    height: 100%;
    color: white;
}

.user-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.chevron-down {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.user-button:hover .chevron-down {
    transform: rotate(180deg);
}

/* User dropdown styles */
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 280px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s var(--ease-out);
    z-index: 1000;
}

[data-theme="dark"] .user-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.user-avatar-large {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-lg);
}

.user-details {
    flex: 1;
}

.user-full-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.user-email {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.5rem 0;
}

[data-theme="dark"] .dropdown-divider {
    background: var(--gray-700);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: none;
    border: none;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .dropdown-item {
    color: var(--gray-200);
}

[data-theme="dark"] .dropdown-item svg {
    color: var(--gray-400);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--gray-700);
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

.dropdown-item svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--text-secondary);
}

.logout-btn {
    color: var(--error-500);
}

.logout-btn:hover {
    background: var(--error-50);
    color: var(--error-600);
}

.logout-btn svg {
    color: var(--error-500);
}

@media (max-width: 768px) {
    .menu-button {
        display: block;
    }

    .header-left {
        max-width: none;
    }

    .logo-text {
        display: none;
    }

    .user-name {
        display: none;
    }
}

/* Calendar Styles */
.calendar-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    border: 1px solid var(--border-color);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.date-navigation {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.date-navigation h1 {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    min-width: 300px;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.view-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.view-switcher {
    display: flex;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-1);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.view-btn {
    padding: var(--space-3) var(--space-6);
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.view-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-spring);
    z-index: -1;
}

.view-btn.active {
    color: white;
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.view-btn.active::before {
    transform: scaleX(1);
}

.view-btn:hover:not(.active) {
    color: var(--primary-600);
    background: var(--primary-50);
    transform: translateY(-1px);
}

/* Calendar Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto repeat(6, 1fr);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Month View Styles */
.calendar-day-headers {
    grid-row: 1;
    display: contents;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--text-secondary);
}

.calendar-day-header {
    padding: var(--space-3);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    grid-row: 1;
}

.calendar-day-header:last-child {
    border-right: none;
}

/* Week view styles - for when week view is active */
.calendar-grid.week-view {
    grid-template-columns: 80px repeat(7, 1fr);
    grid-template-rows: auto 1fr;
}

/* Day view styles - for when day view is active */
.calendar-grid.day-view {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto 1fr;
}

.calendar-day-cell {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-2);
    position: relative;
    background: var(--bg-primary);
    transition: all var(--duration-normal) var(--ease-spring);
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    grid-row: span 1;
}

.calendar-day-cell:last-child {
    border-right: none;
}

/* Remove bottom border from last row */
.calendar-day-cell:nth-child(n+36):nth-child(-n+42) {
    border-bottom: none;
}

.calendar-day-cell:hover {
    background: var(--bg-hover);
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.calendar-day-cell.today {
    background: var(--primary-50);
    border-color: var(--primary-500);
    box-shadow: var(--shadow-md);
}

.calendar-day-cell.today .day-number {
    color: var(--primary-700);
    font-weight: 700;
}

.calendar-day-cell.other-month {
    color: var(--text-muted);
    background: var(--bg-secondary);
    opacity: 0.6;
}

.calendar-day-cell.other-month:hover {
    opacity: 0.8;
}

.day-number {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: inherit;
    text-align: right;
}

.day-events {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--space-1);
}

.event-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-500);
    margin-bottom: 2px;
    transition: all var(--duration-normal) var(--ease-spring);
}

.event-indicator:hover {
    transform: scale(1.2);
    background: var(--primary-600);
}

/* Week View Styles */
.time-column {
    width: 80px;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.time-column::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--border-color) 50%, transparent 100%);
}

.time-slot {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-2);
    position: relative;
    transition: all var(--duration-normal) var(--ease-in-out);
    flex-shrink: 0;
}

.time-slot:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.time-slot:last-child {
    border-bottom: none;
}

/* Add a spacer to align with day headers */
.time-slot:first-child {
    margin-top: 80px;
    /* Match the height of day headers */
}

.day-columns {
    display: flex;
    flex: 1;
}

.day-column {
    flex: 1;
    border-right: 1px solid var(--border-color);
    min-height: 540px;
    position: relative;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.day-column.full-width {
    flex: 1;
    min-width: 100%;
}

.day-column:hover {
    background: var(--bg-hover);
}

.day-column:last-child {
    border-right: none;
}

.day-header {
    padding: var(--space-4);
    text-align: center;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    position: relative;
    overflow: hidden;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.day-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
    z-index: -1;
}

.day-column:hover .day-header::before {
    opacity: 0.1;
}

.day-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.day-date {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.events-container {
    position: relative;
    height: calc(100% - 80px);
}

.event-card {
    position: absolute;
    left: var(--space-2);
    right: var(--space-2);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.event-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--success-500), var(--warning-500));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.event-card:hover::before {
    opacity: 1;
}

.event-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
}

.event-content p {
    font-size: var(--font-size-xs);
    margin: 0 0 var(--space-2) 0;
    opacity: 0.9;
}

.event-attendees {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.event-attendees img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
}

.attendee-count {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

/* Upcoming Events */
.upcoming-events {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-6);
    flex-shrink: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.section-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.event-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
}

.event-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.event-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.event-time .date {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.event-time .time {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.event-content {
    flex: 1;
}

.event-content h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.event-content p {
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.5;
}

.event-meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.event-actions {
    display: flex;
    gap: var(--space-2);
}

/* Schedule Meeting */
.schedule-meeting {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-xl);
    flex-shrink: 0;
}

.schedule-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
}

.schedule-content p {
    margin: 0 0 var(--space-4) 0;
    opacity: 0.9;
}

.schedule-actions {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.schedule-actions .btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.schedule-actions .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.schedule-info {
    display: flex;
    gap: var(--space-6);
}

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

.info-item svg {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.info-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0;
}

.info-content p {
    font-size: var(--font-size-xs);
    margin: 0;
    opacity: 0.8;
}

/* CSS Custom Properties - REMOVED: Duplicate variables now centralized in critical-fixes.css */
/* All CSS variables are now defined in critical-fixes.css for dynamic theming */

/* Transitions */

.main-container {
    display: flex;
    flex: 1;
    min-height: calc(100vh - 72px);
    /* Subtract header height */
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-600);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    z-index: 1000;
    transition: top var(--duration-normal) var(--ease-in-out);
}

.skip-link:focus {
    top: 6px;
}

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

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

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    min-width: fit-content;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: var(--font-size-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
}

.logo:hover .logo-icon {
    transform: rotate(5deg) scale(1.1);
    box-shadow: var(--shadow-xl);
}

.logo-text {
    font-weight: 700;
    font-size: var(--font-size-xl);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-brand {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-color);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--duration-normal) var(--ease-spring);
}

.nav-logo:hover {
    transform: scale(1.05);
}

.nav-logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: var(--font-size-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) var(--ease-spring);
}

.nav-logo:hover .nav-logo-icon {
    transform: rotate(5deg) scale(1.1);
    box-shadow: var(--shadow-lg);
}

.nav-logo-text {
    font-weight: 700;
    font-size: var(--font-size-lg);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-group {
    margin-bottom: var(--space-8);
}

.nav-group:last-child {
    margin-bottom: 0;
}

.nav-group-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    padding-left: var(--space-2);
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: 500;
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    transition: width var(--duration-normal) var(--ease-in-out);
    z-index: -1;
}

.nav-link:hover {
    color: var(--primary-600);
    background: var(--bg-hover);
    transform: translateX(4px);
}

.nav-link:hover::before {
    width: 4px;
}

.nav-link.active {
    color: var(--primary-600);
    background: var(--primary-50);
    font-weight: 600;
}

.nav-link.active::before {
    width: 4px;
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.nav-link:hover .nav-icon {
    transform: scale(1.1);
}

/* Enhanced Main Content */
.main-content {
    flex: 1;
    padding: var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    overflow-y: hidden;
}

/* COOL DUAL CIRCLE BACKGROUND - ELEGANT & VISIBLE */
.welcome-section::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -25%;
    width: 150%;
    height: 150%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.04) 60%, transparent 80%);
    border-radius: 50%;
    animation: gentleFloat 60s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 1;
    filter: blur(0.8px);
    box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.1);
}

.welcome-section::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.10) 30%, rgba(255, 255, 255, 0.06) 50%, transparent 75%),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.04) 50%, transparent 75%);
    animation: gentleFloat 25s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    filter: blur(0.6px);
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.08);
}

/* COOL FLOATING PARTICLES - ENHANCED VISIBILITY */
.welcome-section .particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.welcome-section .particle {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.04) 60%, transparent 85%);
    border-radius: 50%;
    animation: gentleFloat 30s ease-in-out infinite;
    filter: blur(0.4px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.welcome-section .particle:nth-child(1) {
    width: 120px;
    height: 120px;
    top: 20%;
    right: 25%;
    animation: gentleFloat 35s ease-in-out infinite reverse;
}

.welcome-section .particle:nth-child(2) {
    width: 80px;
    height: 80px;
    top: 70%;
    left: 20%;
    animation: gentleFloat 40s ease-in-out infinite;
}

@keyframes gentleFloat {

    0%,
    100% {
        transform: translateX(0px) translateY(0px) scale(1) rotate(0deg);
        opacity: 0.85;
    }

    20% {
        transform: translateX(12px) translateY(-18px) scale(1.03) rotate(1.5deg);
        opacity: 1;
    }

    40% {
        transform: translateX(-8px) translateY(-8px) scale(0.97) rotate(-0.8deg);
        opacity: 0.92;
    }

    60% {
        transform: translateX(-12px) translateY(12px) scale(1.01) rotate(0.8deg);
        opacity: 0.95;
    }

    80% {
        transform: translateX(8px) translateY(15px) scale(0.99) rotate(-0.5deg);
        opacity: 1;
    }
}

.welcome-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    gap: var(--space-3);
    position: relative;
    z-index: 2;
}

.welcome-greeting {
    flex: 1;
}

.welcome-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: white !important;
    margin: 0 0 var(--space-2) 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.greeting-text {
    color: white !important;
    font-weight: 500;
    font-size: var(--font-size-xl);
}

.welcome-title .user-name {
    color: white !important;
    font-size: 1.8rem !important;
    font-weight: 900;
    position: relative;
}

.user-name::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.welcome-title:hover .user-name::after {
    transform: scaleX(1);
}

.welcome-emoji {
    font-size: var(--font-size-3xl);
    animation: wave 1.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    display: inline-block;
    transform-origin: center;
}

@keyframes wave {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(25deg) scale(1.1);
    }

    75% {
        transform: rotate(-15deg) scale(1.05);
    }
}

.welcome-subtitle {
    font-size: var(--font-size-lg);
    color: white !important;
    margin: 0 0 var(--space-4) 0;
    font-weight: 500;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.welcome-stats {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.stat-item {
    text-align: center;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    min-width: 120px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-primary) !important;
    position: relative;
    overflow: hidden;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.stat-item:hover::before {
    left: 100%;
}

.stat-item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 1);
}

.stat-number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
    color: var(--primary-600) !important;
    animation: subtle-pulse 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

@keyframes subtle-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

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

.stat-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    opacity: 0.9;
    color: var(--text-secondary) !important;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-xl);
    font-weight: 500;
    font-size: var(--font-size-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn.primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: var(--text-on-primary);
    box-shadow: var(--shadow-md);
}

.btn.primary:hover {
    background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
    box-shadow: var(--shadow-md);
}

.btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.btn.small {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

.btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.btn-icon.small {
    width: 32px;
    height: 32px;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon.small:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
    box-shadow: var(--shadow-sm);
}

.btn-icon.small svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Pulse Animation */
.pulse-animation {
    animation: pulse 2s infinite;
}

/* Enhanced Dashboard Grid - REMOVED: conflicted with critical-fixes.css definition */

/* Dashboard items that work with the grid system defined in critical-fixes.css */

.dashboard-item>* {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    width: 100% !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
}

/* Purple glow ONLY for main dashboard items - exclude all inner content */
.dashboard-item>* {
    position: relative;
}

.dashboard-item>*::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    border-radius: var(--radius-2xl);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-spring);
}

.dashboard-item>*:hover::before {
    opacity: 1;
}

.dashboard-item>*:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* Remove purple glow from ALL inner content */
.dashboard-item *:not(.dashboard-item > *) {
    position: static;
}

.dashboard-item *:not(.dashboard-item > *)::before {
    display: none !important;
}

.dashboard-item *:not(.dashboard-item > *):hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Specific overrides for inner content */
.insight-card,
.value-card,
.event-card,
.stat-card,
.achievement-card,
.recommendation-card,
.frequently-used-item,
.quick-access-link,
.action-card,
.resource-category,
.handbook-section,
.settings-section,
.category-card,
.version-item,
.ticket-card,
.space-card,
.resource-item,
.event-item,
.member-spotlight,
.kanban-column,
.timeline-project,
.settings-card,
.profile-section,
.info-item,
.contact-link,
.skill-tag,
.matrix-row,
.avatar-sm,
.notification-item,
.command-item,
.search-result,
.result-item,
.placeholder-item,
.filter-chip,
.range-selector,
.metric-card,
.chart-container,
.activity-item,
.goal-item,
.achievement-item,
.milestone-item,
.level-badge,
.points-display,
.streak-item,
.next-achievement,
.achievement-notification,
.level-up-notification,
.connection-status,
.document-info,
.space-info,
.article-content,
.insight-content,
.recommendation-content,
.frequently-used-content,
.quick-access-content,
.action-content,
.category-content,
.handbook-content,
.settings-content,
.version-content,
.ticket-content,
.space-content,
.resource-content,
.event-content,
.member-content,
.team-content,
.course-content,
.benefit-content,
.achievement-content,
.milestone-content,
.user-content,
.policy-content,
.value-content,
.insight-content,
.recommendation-content,
.frequently-used-content {
    position: static !important;
}

/* AI-Powered Insights Section */
.ai-insights-section {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: block !important;
    /* Ensure section is always visible */
}

.ai-insights-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--success-500), var(--warning-500));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.insights-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-600), var(--success-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ai-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    min-height: 200px;
    /* Ensure grid has minimum height */
}

.ai-insight-card {
    .ai-insight-card.recommendation::before {
        background: var(--primary-500);
    }

    .ai-insight-card.prediction::before {
        background: var(--success-500);
    }

    .ai-insight-card.optimization::before {
        background: var(--warning-500);
    }

    .insight-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: var(--space-3);
    }

    .insight-meta {
        flex: 1;
    }

    .insight-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-2) 0;
    }

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

    .confidence-bar {
        width: 60px;
        height: 4px;
        background: var(--gray-200);
        border-radius: var(--radius-full);
        overflow: hidden;
    }

    .confidence-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--success-500), var(--primary-500));
        border-radius: var(--radius-full);
        transition: width var(--duration-normal);
    }

    .confidence-text {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        font-weight: 500;
    }

    .impact-badge {
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .impact-badge.high {
        background: rgba(239, 68, 68, 0.1);
        color: var(--error-600);
    }

    .impact-badge.medium {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning-600);
    }

    .impact-badge.low {
        background: rgba(34, 197, 94, 0.1);
        color: var(--success-600);
    }

    .insight-description {
        color: var(--text-secondary);
        line-height: 1.5;
        margin-bottom: var(--space-4);
    }

    .insight-actions {
        display: flex;
        gap: var(--space-2);
    }

    .insight-action-btn {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-lg);
        font-size: var(--font-size-sm);
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .insight-action-btn.primary {
        background: var(--gradient-primary);
        color: white;
    }

    .insight-action-btn.secondary {
        background: var(--bg-secondary);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
    }

    .insight-action-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .insight-action-btn svg {
        width: 14px;
        height: 14px;
    }

    /* AI Quick Actions Panel */
    .ai-quick-actions-panel {
        position: fixed;
        right: -400px !important;
        top: 50%;
        transform: translateY(-50%);
        width: 380px;
        max-height: 80vh;
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        box-shadow: var(--shadow-2xl);
        border: 1px solid var(--border-color);
        z-index: 9999;
        transition: right var(--duration-normal) var(--ease-spring);
        overflow: hidden;
        pointer-events: none;
        margin-right: 0;
        opacity: 0;
        visibility: hidden;
    }

    .ai-quick-actions-panel.active {
        right: 0 !important;
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
    }

    .panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) var(--space-5);
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }

    .panel-header h3 {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .close-panel {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: var(--space-2);
        border-radius: var(--radius-lg);
        transition: all var(--duration-fast);
    }

    .close-panel:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .close-panel svg {
        width: 18px;
        height: 18px;
    }

    .panel-content {
        padding: var(--space-4);
        max-height: calc(80vh - 80px);
        overflow-y: auto;
    }

    /* Smart Action Items */
    .smart-action-item {
        margin-bottom: var(--space-3);
    }

    .smart-action-btn {
        width: 100%;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-spring);
        text-align: left;
    }

    .smart-action-btn:hover {
        background: var(--bg-elevated);
        border-color: var(--primary-200);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .action-icon {
        font-size: var(--font-size-2xl);
        min-width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-50);
        border-radius: var(--radius-xl);
        color: var(--primary-600);
    }

    [data-theme="dark"] .action-icon {
        background: var(--primary-900);
        color: var(--primary-300);
    }

    .action-content {
        flex: 1;
    }

    .action-title {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-1) 0;
    }

    .action-description {
        font-size: var(--font-size-sm);
        color: var(--text-muted);
        line-height: 1.4;
        margin: 0;
    }

    /* AI Notifications */
    .ai-notification {
        position: fixed;
        top: var(--space-6);
        right: -400px;
        max-width: 400px;
        background: var(--bg-elevated);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl);
        border: 1px solid var(--border-color);
        z-index: 10000;
        transition: right var(--duration-normal) var(--ease-spring);
        overflow: hidden;
    }

    .ai-notification.show {
        right: var(--space-6);
    }

    .ai-notification.success {
        border-left: 4px solid var(--success-500);
    }

    .ai-notification.warning {
        border-left: 4px solid var(--warning-500);
    }

    .ai-notification.error {
        border-left: 4px solid var(--error-500);
    }

    .ai-notification.info {
        border-left: 4px solid var(--primary-500);
    }

    .notification-content {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: var(--space-4);
    }

    .notification-message {
        flex: 1;
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        line-height: 1.4;
    }

    .notification-close {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: var(--space-1);
        border-radius: var(--radius-sm);
        margin-left: var(--space-2);
        transition: all var(--duration-fast);
    }

    .notification-close:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .notification-close svg {
        width: 16px;
        height: 16px;
    }

    /* Enhanced Task Form AI Suggestions */
    .ai-suggestions-form {
        margin-top: var(--space-6);
        padding: var(--space-4);
        background: var(--primary-50);
        border-radius: var(--radius-xl);
        border: 1px solid var(--primary-200);
    }

    [data-theme="dark"] .ai-suggestions-form {
        background: var(--primary-900);
        border-color: var(--primary-700);
    }

    .ai-suggestions-form h3 {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--primary-700);
        margin: 0 0 var(--space-3) 0;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    [data-theme="dark"] .ai-suggestions-form h3 {
        color: var(--primary-300);
    }

    .ai-suggestion-item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-3);
        background: linear-gradient(135deg, var(--component-bg) 0%, rgba(255, 255, 255, 0.08) 100%);
        backdrop-filter: blur(15px);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-3);
        border: 1px solid var(--primary-100);
    }

    [data-theme="dark"] .ai-suggestion-item {
        background: linear-gradient(135deg, rgba(31, 41, 55, 0.9) 0%, rgba(17, 24, 39, 0.9) 100%);
        border-color: var(--primary-800);
    }

    .suggestion-icon {
        font-size: var(--font-size-lg);
        min-width: 24px;
    }

    .suggestion-text {
        flex: 1;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        line-height: 1.4;
    }

    .apply-suggestion-btn {
        background: var(--primary-500);
        color: white;
        border: none;
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-lg);
        font-size: var(--font-size-xs);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--duration-fast);
    }

    .apply-suggestion-btn:hover {
        background: var(--primary-600);
        transform: scale(1.02);
    }

    /* Enhanced Focus States and Accessibility */
    .focus-visible,
    *:focus-visible,
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid var(--primary-500) !important;
        outline-offset: 2px !important;
        border-radius: var(--radius-md) !important;
        z-index: 100 !important;
    }

    /* Skip to main content link */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 6px;
        background: var(--primary-600);
        color: white;
        padding: 8px 16px;
        text-decoration: none;
        border-radius: var(--radius-md);
        font-weight: 600;
        z-index: 1000;
        transform: translateY(-100%);
        transition: transform 0.3s ease;
    }

    .skip-link:focus {
        transform: translateY(0);
        top: 6px;
    }

    /* Enhanced keyboard navigation indicators */
    .keyboard-user *:focus {
        outline: 3px solid var(--primary-500) !important;
        outline-offset: 2px !important;
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
        * {
            border-color: currentColor !important;
        }

        .btn {
            border: 2px solid currentColor !important;
        }

        .card,
        .widget {
            border: 2px solid currentColor !important;
        }
    }

    /* Reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* Screen reader only content */
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .sr-only-focusable:focus {
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: inherit !important;
        margin: inherit !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
    }

    /* Live region for dynamic content announcements */
    .live-region {
        position: absolute;
        left: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    /* Enhanced interactive element states */
    .interactive {
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
    }

    .interactive:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .interactive:active:not(:disabled) {
        transform: translateY(0);
    }

    .interactive:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Color contrast improvements */
    .contrast-enhanced {
        background-color: var(--bg-base) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-color) !important;
    }

    /* Ensure sufficient color contrast for links */
    a {
        color: var(--primary-600);
        text-decoration-color: var(--primary-400);
    }

    a:hover,
    a:focus {
        color: var(--primary-700);
        text-decoration-color: var(--primary-600);
    }

    /* Dark mode link adjustments */
    [data-theme="dark"] a {
        color: var(--primary-400);
    }

    [data-theme="dark"] a:hover,
    [data-theme="dark"] a:focus {
        color: var(--primary-300);
    }

    .dashboard-item .goal-item::before,
    .dashboard-item .achievement-item::before,
    .dashboard-item .milestone-item::before,
    .dashboard-item .level-badge::before,
    .dashboard-item .points-display::before,
    .dashboard-item .streak-item::before,
    .dashboard-item .next-achievement::before,
    .dashboard-item .achievement-notification::before,
    .dashboard-item .level-up-notification::before,
    .dashboard-item .connection-status::before,
    .dashboard-item .document-info::before,
    .dashboard-item .space-info::before,
    .dashboard-item .article-content::before,
    .dashboard-item .insight-content::before,
    .dashboard-item .recommendation-content::before,
    .dashboard-item .frequently-used-content::before,
    .dashboard-item .quick-access-content::before,
    .dashboard-item .action-content::before,
    .dashboard-item .category-content::before,
    .dashboard-item .handbook-content::before,
    .dashboard-item .settings-content::before,
    .dashboard-item .version-content::before,
    .dashboard-item .ticket-content::before,
    .dashboard-item .space-content::before,
    .dashboard-item .resource-content::before,
    .dashboard-item .event-content::before,
    .dashboard-item .member-content::before,
    .dashboard-item .team-content::before,
    .dashboard-item .course-content::before,
    .dashboard-item .benefit-content::before,
    .dashboard-item .achievement-content::before,
    .dashboard-item .milestone-content::before,
    .dashboard-item .user-content::before,
    .dashboard-item .policy-content::before,
    .dashboard-item .value-content::before,
    .dashboard-item .insight-content::before,
    .dashboard-item .recommendation-content::before,
    .dashboard-item .frequently-used-content::before {
        display: none !important;
    }

    /* Comprehensive fix for content cut-off issues */
    .dashboard-item,
    .dashboard-item>*,
    .dashboard-item * {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Force all dashboard content to expand */
    .dashboard-item,
    .dashboard-item>*,
    .dashboard-item *,
    .dashboard-item *>* {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        min-height: auto !important;
    }

    /* Remove any height constraints from specific components */
    company-news,
    team-spotlight,
    analytics-dashboard,
    knowledge-hub,
    weather-widget,
    enhanced-interactive-poll,
    company-culture-showcase,
    collaboration-hub,
    office-visualizer {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        min-height: auto !important;
    }

    /* Specific fixes for common components that might have height constraints */
    .insight-card,
    .value-card,
    .event-card,
    .stat-card,
    .achievement-card,
    .recommendation-card,
    .frequently-used-item,
    .quick-access-link,
    .action-card,
    .resource-category,
    .handbook-section,
    .settings-section,
    .category-card,
    .version-item,
    .ticket-card,
    .space-card,
    .resource-item,
    .event-item,
    .member-spotlight,
    .kanban-column,
    .timeline-project,
    .settings-card,
    .profile-section,
    .info-item,
    .contact-link,
    .skill-tag,
    .matrix-row,
    .avatar-sm,
    .avatar-md,
    .avatar-lg,
    .avatar-xl,
    .avatar-2xl,
    .avatar-3xl,
    .avatar-4xl,
    .avatar-5xl,
    .avatar-6xl,
    .avatar-7xl,
    .avatar-8xl,
    .avatar-9xl,
    .avatar-10xl,
    .avatar-11xl,
    .avatar-12xl,
    .avatar-13xl,
    .avatar-14xl,
    .avatar-15xl,
    .avatar-16xl,
    .avatar-17xl,
    .avatar-18xl,
    .avatar-19xl,
    .avatar-20xl,
    .avatar-21xl,
    .avatar-22xl,
    .avatar-23xl,
    .avatar-24xl,
    .avatar-25xl,
    .avatar-26xl,
    .avatar-27xl,
    .avatar-28xl,
    .avatar-29xl,
    .avatar-30xl,
    .avatar-31xl,
    .avatar-32xl,
    .avatar-33xl,
    .avatar-34xl,
    .avatar-35xl,
    .avatar-36xl,
    .avatar-37xl,
    .avatar-38xl,
    .avatar-39xl,
    .avatar-40xl,
    .avatar-41xl,
    .avatar-42xl,
    .avatar-43xl,
    .avatar-44xl,
    .avatar-45xl,
    .avatar-46xl,
    .avatar-47xl,
    .avatar-48xl,
    .avatar-49xl,
    .avatar-50xl,
    .avatar-51xl,
    .avatar-52xl,
    .avatar-53xl,
    .avatar-54xl,
    .avatar-55xl,
    .avatar-56xl,
    .avatar-57xl,
    .avatar-58xl,
    .avatar-59xl,
    .avatar-60xl,
    .avatar-61xl,
    .avatar-62xl,
    .avatar-63xl,
    .avatar-64xl,
    .avatar-69xl,
    .avatar-70xl,
    .avatar-71xl,
    .avatar-72xl,
    .avatar-73xl,
    .avatar-74xl,
    .avatar-75xl,
    .avatar-76xl,
    .avatar-77xl,
    .avatar-78xl,
    .avatar-79xl,
    .avatar-80xl,
    .avatar-81xl,
    .avatar-82xl,
    .avatar-83xl,
    .avatar-84xl,
    .avatar-85xl,
    .avatar-86xl,
    .avatar-87xl,
    .avatar-88xl,
    .avatar-89xl,
    .avatar-90xl,
    .avatar-91xl,
    .avatar-92xl,
    .avatar-93xl,
    .avatar-94xl,
    .avatar-95xl,
    .avatar-96xl,
    .avatar-97xl,
    .avatar-98xl,
    .avatar-99xl,
    .avatar-100xl {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Fix for any remaining overflow hidden issues */
    .dashboard-item * {
        overflow: visible !important;
    }

    /* Ensure all content within dashboard items can expand */
    .dashboard-item>*>* {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Fix for any scrollable containers that might be cutting off content */
    .dashboard-item .scrollable,
    .dashboard-item .scroll-container,
    .dashboard-item .overflow-container {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Ensure all text content is fully visible */
    .dashboard-item p,
    .dashboard-item h1,
    .dashboard-item h2,
    .dashboard-item h3,
    .dashboard-item h4,
    .dashboard-item h5,
    .dashboard-item h6,
    .dashboard-item span,
    .dashboard-item div {
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
    }

    /* Fix for any flex containers that might be constraining height */
    .dashboard-item .flex,
    .dashboard-item .flex-container,
    .dashboard-item .flex-wrapper {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* Ensure all grid items can expand */
    .dashboard-item .grid,
    .dashboard-item .grid-container,
    .dashboard-item .grid-wrapper {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* Fix for any absolute positioned elements that might be cut off */
    .dashboard-item .absolute,
    .dashboard-item .relative,
    .dashboard-item .fixed {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Comprehensive fix for all possible content containers */
    .dashboard-item *,
    .dashboard-item *::before,
    .dashboard-item *::after {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .dashboard-item .command-item:hover,
    .dashboard-item .search-result:hover,
    .dashboard-item .result-item:hover,
    .dashboard-item .placeholder-item:hover,
    .dashboard-item .filter-chip:hover,
    .dashboard-item .range-selector:hover,
    .dashboard-item .metric-card:hover,
    .dashboard-item .chart-container:hover,
    .dashboard-item .activity-item:hover,
    .dashboard-item .goal-item:hover,
    .dashboard-item .achievement-item:hover,
    .dashboard-item .milestone-item:hover,
    .dashboard-item .level-badge:hover,
    .dashboard-item .points-display:hover,
    .dashboard-item .streak-item:hover,
    .dashboard-item .next-achievement:hover,
    .dashboard-item .achievement-notification:hover,
    .dashboard-item .level-up-notification:hover,
    .dashboard-item .connection-status:hover,
    .dashboard-item .document-info:hover,
    .dashboard-item .space-info:hover,
    .dashboard-item .article-content:hover,
    .dashboard-item .insight-content:hover,
    .dashboard-item .recommendation-content:hover,
    .dashboard-item .frequently-used-content:hover,
    .dashboard-item .quick-access-content:hover,
    .dashboard-item .action-content:hover,
    .dashboard-item .category-content:hover,
    .dashboard-item .handbook-content:hover,
    .dashboard-item .settings-content:hover,
    .dashboard-item .version-content:hover,
    .dashboard-item .ticket-content:hover,
    .dashboard-item .space-content:hover,
    .dashboard-item .resource-content:hover,
    .dashboard-item .event-content:hover,
    .dashboard-item .member-content:hover,
    .dashboard-item .team-content:hover,
    .dashboard-item .course-content:hover,
    .dashboard-item .benefit-content:hover,
    .dashboard-item .achievement-content:hover,
    .dashboard-item .milestone-content:hover,
    .dashboard-item .user-content:hover,
    .dashboard-item .policy-content:hover,
    .dashboard-item .value-content:hover,
    .dashboard-item .insight-content:hover,
    .dashboard-item .recommendation-content:hover,
    .dashboard-item .frequently-used-content:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Enhanced Widgets */
    .widget {
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        border: 1px solid var(--border-color);
        overflow: hidden;
        transition: all var(--duration-normal) var(--ease-spring);
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        padding: 0 !important;
    }

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

    .widget-header {
        padding: var(--space-6);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    }

    .widget-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .widget-action {
        padding: var(--space-2);
        color: var(--text-secondary);
        border: none;
        background: none;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
    }

    .widget-action:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .widget-action svg {
        width: 18px;
        height: 18px;
    }

    /* Quick Access Widget */
    .quick-access-widget {
        height: 100%;
    }

    .quick-access-grid {
        padding: var(--space-6);
        display: grid;
        gap: var(--space-4);
    }

    .quick-access-link {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
        border-radius: var(--radius-xl);
        text-decoration: none;
        color: var(--text-primary);
        transition: all var(--duration-normal) var(--ease-spring);
        border: 1px solid transparent;
    }

    .quick-access-link:hover {
        background: var(--bg-hover);
        border-color: var(--border-color);
        transform: translateX(4px);
    }

    .quick-access-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-xl);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .quick-access-icon svg {
        width: 24px;
        height: 24px;
    }

    .quick-access-link:hover .quick-access-icon {
        transform: scale(1.1);
    }

    .quick-access-icon.document {
        color: var(--primary-600);
        background: var(--primary-50);
    }

    .quick-access-icon.meeting {
        color: var(--warning-600);
        background: var(--warning-100);
    }

    .quick-access-icon.project {
        color: var(--success-600);
        background: var(--success-100);
    }

    .quick-access-icon.resource {
        color: var(--error-600);
        background: var(--error-100);
    }

    .quick-access-content {
        flex: 1;
    }

    .quick-access-title {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--space-1);
        font-size: var(--font-size-lg);
    }

    .quick-access-meta {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
    }

    /* Updates Section */
    .updates-section {
        margin-top: var(--space-8);
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-6);
    }

    .section-title {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }

    .updates-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: var(--space-6);
    }

    .update-card {}

    /* Responsive Design */
    @media (max-width: 1200px) {
        .dashboard-grid {
            max-width: 100%;
            padding: 0 var(--space-4);
        }
    }

    @media (max-width: 1024px) {
        .dashboard-grid {
            flex-direction: column;
            gap: var(--space-4);
        }

        .dashboard-item {
            margin-bottom: 0;
        }

        .welcome-header {
            flex-direction: column;
            gap: var(--space-6);
        }

        .welcome-stats {
            justify-content: center;
        }
    }

    @media (max-width: 768px) {
        .dashboard-grid {
            padding: 0 var(--space-2);
            gap: var(--space-3);
        }

        .dashboard-item {
            margin-bottom: 0;
        }

        .main-content {
            padding: var(--space-4);
        }

        .welcome-title {
            font-size: var(--font-size-xl);
            gap: var(--space-3);
        }

        .greeting-text {
            font-size: var(--font-size-base);
        }

        .welcome-title .user-name {
            font-size: 2.5rem !important;
        }

        .welcome-emoji {
            font-size: var(--font-size-xl);
        }

        .quick-actions {
            justify-content: center;
        }

        .btn {
            flex: 1;
            justify-content: center;
        }

        .updates-grid {
            grid-template-columns: 1fr;
        }

        .welcome-stats {
            gap: var(--space-4);
        }

        .stat-item {
            min-width: 100px;
            padding: var(--space-3);
        }
    }

    /* Dark theme enhancements */
    [data-theme="dark"] .quick-access-link:hover {
        background: var(--bg-hover-dark);
        border-color: var(--border-color);
    }

    [data-theme="dark"] .update-card.featured {
        background: linear-gradient(135deg, var(--bg-elevated-dark) 0%, var(--primary-900) 100%);
    }

    /* Theme transition */
    .theme-transition,
    .theme-transition *,
    .theme-transition *:before,
    .theme-transition *:after {
        transition: all 0.3s ease !important;
    }

    /* Accessibility improvements */
    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }

        .pulse-animation {
            animation: none;
        }
    }

    /* High contrast mode support */
    @media (forced-colors: active) {

        .btn,
        .nav-link,
        .quick-access-link {
            border: 1px solid currentColor;
        }

        .widget,
        .update-card {
            border: 1px solid currentColor;
        }
    }

    /* Enhanced Analytics Dashboard Styles */
    .analytics-dashboard {
        background: var(--bg-widget);
        border-radius: var(--radius-2xl);
        padding: var(--space-8);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
        transition: all var(--duration-normal) var(--ease-spring);
        position: relative;
        overflow: hidden;
        margin-bottom: var(--space-6);
    }

    .analytics-dashboard::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg,
                var(--primary-500) 0%,
                var(--success-500) 50%,
                var(--primary-600) 100%);
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    }

    .analytics-dashboard:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
        border-color: var(--primary-200);
    }

    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-8);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--border-color);
    }

    .dashboard-title {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .dashboard-title::before {
        content: '';
        font-size: var(--font-size-3xl);
        filter: none;
        -webkit-text-fill-color: initial;
    }

    .dashboard-controls {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .range-selector {
        padding: var(--space-2) var(--space-4);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-primary);
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-spring);
        outline: none;
    }

    .range-selector:hover {
        border-color: var(--primary-300);
        background: var(--primary-50);
    }

    .range-selector:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-100);
    }

    /* Metrics Grid */
    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--space-4);
        margin-bottom: var(--space-8);
    }

    .metric-card {
        background: var(--bg-elevated);
        border-radius: var(--radius-xl);
        padding: var(--space-5);
        border: 1px solid var(--border-color);
        transition: all var(--duration-normal) var(--ease-spring);
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .metric-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, var(--primary-500), var(--primary-400));
        transform: scaleY(0);
        transition: transform var(--duration-normal) var(--ease-in-out);
    }

    .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary-200);
    }

    .metric-card:hover::before,
    .metric-card.highlighted::before {
        transform: scaleY(1);
    }

    .metric-card.highlighted {
        border-color: var(--primary-400);
        box-shadow: 0 0 0 3px var(--primary-100);
    }

    .metric-value {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        margin-bottom: var(--space-3);
    }

    .metric-value span:first-child {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
    }

    .metric-trend {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        font-size: var(--font-size-xs);
        font-weight: 600;
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-full);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .metric-trend.positive {
        color: var(--success-700);
        background: var(--success-50);
        border: 1px solid var(--success-200);
    }

    .metric-trend.negative {
        color: var(--error-700);
        background: var(--error-50);
        border: 1px solid var(--error-200);
    }

    .metric-trend svg {
        width: 12px;
        height: 12px;
    }

    .metric-label {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--space-1);
    }

    .metric-insight {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        font-weight: 500;
    }

    /* Charts Grid */
    .charts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: var(--space-6);
        margin-bottom: var(--space-8);
    }

    .chart-container {
        background: var(--bg-elevated);
        border-radius: var(--radius-xl);
        padding: var(--space-6);
        border: 1px solid var(--border-color);
        transition: all var(--duration-normal) var(--ease-spring);
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
    }

    .chart-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-500), var(--success-500));
        transform: scaleX(0);
        transition: transform var(--duration-normal) var(--ease-in-out);
    }

    .chart-container:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary-200);
    }

    .chart-container:hover::before {
        transform: scaleX(1);
    }

    .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--border-color);
    }

    .chart-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-1) 0;
    }

    .chart-subtitle {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: 0;
    }

    .chart-legend {
        display: flex;
        gap: var(--space-4);
        align-items: center;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        font-weight: 500;
    }

    .legend-color {
        width: 12px;
        height: 12px;
        border-radius: var(--radius-sm);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .legend-color.completed {
        background: var(--primary-500);
    }

    .legend-color.in-progress {
        background: var(--warning-500);
    }

    .chart {
        position: relative;
        height: 300px;
        width: 100%;
    }

    .chart canvas {
        width: 100% !important;
        height: 100% !important;
    }

    /* Insights Section */
    .insights-section {
        margin-bottom: var(--space-8);
    }

    .insights-title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-6) 0;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .insights-title::before {
        content: '';
        font-size: var(--font-size-xl);
    }

    .insights-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-4);
    }

    .insight-card {
        background: var(--bg-elevated);
        border-radius: var(--radius-xl);
        padding: var(--space-5);
        border: 1px solid var(--border-color);
        transition: all var(--duration-normal) var(--ease-spring);
        display: flex;
        gap: var(--space-4);
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .insight-card.positive {
        border-left: 4px solid var(--success-500);
    }

    .insight-card.warning {
        border-left: 4px solid var(--warning-500);
    }

    .insight-card.info {
        border-left: 4px solid var(--primary-500);
    }

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

    .insight-card.expanded {
        border-color: var(--primary-300);
        box-shadow: var(--shadow-xl);
        transform: translateY(-4px);
    }

    .insight-expanded {
        opacity: 0;
        animation: expandIn 0.3s ease-out forwards;
    }

    .insight-icon {

        border-radius: var(--radius-xl);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .insight-card.positive .insight-icon {
        background: var(--success-50);
        color: var(--success-600);
    }

    .insight-card.warning .insight-icon {
        background: var(--warning-50);
        color: var(--warning-600);
    }

    .insight-card.info .insight-icon {
        background: var(--primary-50);
        color: var(--primary-600);
    }

    .insight-icon svg {
        width: 24px;
        height: 24px;
    }

    .insight-content h4 {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-2) 0;
    }

    .insight-content p {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        line-height: 1.5;
        margin: 0;
    }

    /* Activity List */
    .activity-list {
        background: var(--bg-elevated);
        border-radius: var(--radius-xl);
        padding: var(--space-6);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .activity-list:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--border-hover);
    }

    .activity-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-6);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--border-color);
    }

    .activity-title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .activity-title::before {
        content: '';
        font-size: var(--font-size-xl);
    }

    .activity-item {
        display: flex;
        gap: var(--space-4);
        padding: var(--space-4);
        border-radius: var(--radius-lg);
        transition: all var(--duration-normal) var(--ease-spring);
        border: 1px solid transparent;
    }

    .activity-item:hover {
        background: var(--bg-hover);
        border-color: var(--border-color);
        transform: translateX(4px);
    }

    .activity-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .activity-icon.task {
        background: var(--success-50);
        color: var(--success-600);
    }

    .activity-icon.project {
        background: var(--primary-50);
        color: var(--primary-600);
    }

    .activity-icon.meeting {
        background: var(--warning-50);
        color: var(--warning-600);
    }

    .activity-icon.update {
        background: var(--gray-100);
        color: var(--gray-600);
    }

    .activity-icon svg {
        width: 20px;
        height: 20px;
    }

    .activity-content {
        flex: 1;
        min-width: 0;
    }

    .activity-text {
        font-size: var(--font-size-sm);
        color: var(--text-primary);
        font-weight: 500;
        margin-bottom: var(--space-1);
    }

    .activity-meta {
        display: flex;
        gap: var(--space-3);
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    .activity-time {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .activity-time svg {
        width: 12px;
        height: 12px;
    }

    .activity-user {
        font-weight: 500;
    }

    /* Refresh Button Enhancement */
    #refreshAnalytics {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-full);
        border: 1px solid var(--border-color);
        background: var(--bg-widget);
        color: var(--text-primary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--duration-normal) var(--ease-spring);
        box-shadow: var(--shadow-sm);
    }

    #refreshAnalytics:hover {
        background: var(--primary-50);
        border-color: var(--primary-200);
        color: var(--primary-600);
        transform: scale(1.05);
        box-shadow: var(--shadow-md);
    }

    #refreshAnalytics:active {
        transform: scale(0.95);
    }

    #refreshAnalytics svg {
        width: 20px;
        height: 20px;
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
        .analytics-dashboard {
            padding: var(--space-6);
        }

        .charts-grid {
            grid-template-columns: 1fr;
            gap: var(--space-4);
        }

        .metrics-grid {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-3);
        }

        .insights-grid {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-3);
        }
    }

    @media (max-width: 768px) {
        .analytics-dashboard {
            padding: var(--space-4);
            margin-bottom: var(--space-4);
        }

        .dashboard-header {
            flex-direction: column;
            gap: var(--space-4);
            align-items: flex-start;
            margin-bottom: var(--space-6);
        }

        .dashboard-controls {
            width: 100%;
            justify-content: space-between;
        }

        .dashboard-title {
            font-size: var(--font-size-2xl);
        }

        .metrics-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-3);
        }

        .metric-card {
            padding: var(--space-4);
        }

        .metric-value span:first-child {
            font-size: var(--font-size-2xl);
        }

        .charts-grid,
        .insights-grid {
            grid-template-columns: 1fr;
            gap: var(--space-4);
        }

        .chart-container,
        .activity-list {
            padding: var(--space-4);
        }

        .chart {
            height: 250px;
        }

        .insight-card {
            flex-direction: column;
            text-align: center;
            padding: var(--space-4);
        }

        .activity-item {
            flex-direction: column;
            text-align: center;
            gap: var(--space-3);
        }

        .activity-meta {
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .analytics-dashboard {
            padding: var(--space-3);
        }

        .dashboard-title {
            font-size: var(--font-size-xl);
            flex-direction: column;
            gap: var(--space-2);
        }

        .metrics-grid {
            grid-template-columns: 1fr;
        }

        .metric-card {
            padding: var(--space-3);
        }

        .chart-container,
        .activity-list {
            padding: var(--space-3);
        }

        .chart {
            height: 200px;
        }
    }

    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-6);
        padding: var(--space-6);
    }

    .metric-card {
        background: var(--bg-secondary);
        border-radius: var(--radius-xl);
        padding: var(--space-6);
        text-align: center;
        transition: all var(--duration-normal) var(--ease-spring);
        border: 1px solid var(--border-color);
        position: relative;
        overflow: hidden;
    }

    .metric-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-in-out);
    }

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

    .metric-card:hover::before {
        opacity: 1;
    }

    .metric-value {
        font-size: var(--font-size-3xl);
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: var(--space-2);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
    }

    .metric-trend {
        font-size: var(--font-size-sm);
        font-weight: 600;
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-full);
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
    }

    .metric-trend.positive {
        background: var(--success-100);
        color: var(--success-700);
    }

    .metric-trend.negative {
        background: var(--error-100);
        color: var(--error-700);
    }

    .metric-trend.neutral {
        background: var(--gray-100);
        color: var(--gray-700);
    }

    .metric-label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        font-weight: 500;
        margin-top: var(--space-2);
    }

    .charts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-6);
        padding: var(--space-6);
    }

    .chart-container {
        background: var(--bg-secondary);
        border-radius: var(--radius-xl);
        padding: var(--space-6);
        border: 1px solid var(--border-color);
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .chart-container:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .chart-header {
        margin-bottom: var(--space-6);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .chart-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .chart-subtitle {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: var(--space-1) 0 0 0;
    }

    .chart {
        height: 200px;
        position: relative;
        display: flex;
        align-items: end;
        gap: var(--space-2);
        padding: var(--space-4) 0;
    }

    .chart-bar {
        flex: 1;
        background: linear-gradient(180deg, var(--primary-500) 0%, var(--primary-600) 100%);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        transition: all var(--duration-normal) var(--ease-spring);
        position: relative;
        min-width: 20px;
    }

    .chart-bar:hover {
        transform: scaleY(1.05);
        box-shadow: var(--shadow-md);
    }

    .chart-bar::after {
        content: attr(data-value);
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%);
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--text-primary);
        background: var(--bg-elevated);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-sm);
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-in-out);
    }

    .chart-bar:hover::after {
        opacity: 1;
    }

    .chart-line {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--border-color);
    }

    .chart-label {
        position: absolute;
        bottom: -28px;
        left: 50%;
        transform: translateX(-50%);
        font-size: var(--font-size-base);
        color: var(--text-primary);
        font-weight: 700;
        text-align: center;
        min-width: 40px;
        background: var(--bg-elevated);
        padding: 2px 6px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-color);
        white-space: nowrap;
    }

    .activity-list {
        padding: var(--space-6);
        border-top: 1px solid var(--border-color);
    }

    .activity-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-4);
    }

    .activity-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .activity-item {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
        background: var(--bg-secondary);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-3);
        transition: all var(--duration-normal) var(--ease-spring);
        border: 1px solid transparent;
    }

    .activity-item:hover {
        transform: translateX(4px);
        border-color: var(--border-color);
        box-shadow: var(--shadow-sm);
    }

    .activity-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .activity-item:hover .activity-icon {
        transform: scale(1.1);
    }

    .activity-icon.task {
        background: var(--primary-100);
        color: var(--primary-600);
    }

    .activity-icon.project {
        background: var(--success-100);
        color: var(--success-600);
    }

    .activity-icon.update {
        background: var(--error-100);
        color: var(--error-600);
    }

    .activity-content {
        flex: 1;
    }

    .activity-text {
        color: var(--text-primary);
        margin: 0 0 var(--space-1) 0;
        font-weight: 500;
    }

    .activity-meta {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .activity-time {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .activity-time svg {
        width: 14px;
        height: 14px;
    }

    @media (max-width: 768px) {

        .metrics-grid,
        .charts-grid {
            grid-template-columns: 1fr;
        }

        .dashboard-header {
            flex-direction: column;
            gap: var(--space-4);
            align-items: flex-start;
        }

        .chart {
            height: 150px;
        }
    }

    /* Enhanced Task System Styles */
    .enhanced-task-system {
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        border: 1px solid var(--border-color);
        overflow: hidden;
        transition: all var(--duration-normal) var(--ease-spring);
        box-shadow: var(--shadow-md);
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .enhanced-task-system::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg,
                var(--primary-500) 0%,
                var(--success-500) 50%,
                var(--primary-600) 100%);
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    }

    .enhanced-task-system:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
        border-color: var(--primary-200);
    }

    /* Task System Header */
    .task-system-header {
        background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
        padding: var(--space-6);
        border-bottom: 1px solid var(--border-color);
    }

    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--space-6);
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .header-title {
        flex: 1;
        min-width: 250px;
    }

    .task-system-title {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0 0 var(--space-2) 0;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .title-icon {
        font-size: var(--font-size-3xl);
        filter: none;
        -webkit-text-fill-color: initial;
    }

    .task-system-subtitle {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: 0;
        font-weight: 500;
    }

    /* Task Stats */
    .task-stats {
        display: flex;
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    .stat-card {
        background: var(--bg-elevated);
        border-radius: var(--radius-xl);
        padding: var(--space-6);
        border: 1px solid var(--border-color);
        min-width: 100px;
        text-align: center;
        transition: all var(--duration-normal) var(--ease-spring);
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--primary-500);
        transform: scaleX(0);
        transition: transform var(--duration-normal) var(--ease-in-out);
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary-200);
    }

    .stat-card:hover::before {
        transform: scaleX(1);
    }

    .stat-card.completed::before {
        background: var(--success-500);
    }

    .stat-card.in-progress::before {
        background: var(--warning-500);
    }

    .stat-card.overdue::before {
        background: var(--error-500);
    }

    .stat-number {
        display: block;
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--primary-600);
        margin-bottom: var(--space-1);
        line-height: 1;
    }

    .stat-card.completed .stat-number {
        color: var(--success-600);
    }

    .stat-card.in-progress .stat-number {
        color: var(--warning-600);
    }

    .stat-card.overdue .stat-number {
        color: var(--error-600);
    }

    .stat-label {
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Task Controls */
    .task-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-4);
        flex-wrap: wrap;
    }

    .search-and-filters {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        flex: 1;
        flex-wrap: wrap;
    }

    .search-container {
        position: relative;
        min-width: 250px;
        flex: 1;
        max-width: 400px;
    }

    .task-search {
        width: 100%;
        padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-elevated);
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        transition: border-color var(--duration-normal) var(--ease-in-out), box-shadow var(--duration-normal) var(--ease-in-out);
        outline: none;
    }

    .task-search:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-sm);
    }

    .search-icon {
        position: absolute;
        left: var(--space-2);
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        color: var(--text-secondary);
        pointer-events: none;
    }

    .filter-controls {
        display: flex;
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    .enhanced-select {
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-elevated);
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
        min-width: 140px;
        outline: none;
    }

    .enhanced-select:hover {
        border-color: var(--border-hover);
    }

    .enhanced-select:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-100);
    }

    .action-controls {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .view-toggle {
        display: flex;
        background: var(--bg-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-1);
        border: 1px solid var(--border-color);
    }

    .view-btn {
        padding: var(--space-2);
        border: none;
        background: transparent;
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .view-btn svg {
        width: 18px;
        height: 18px;
    }

    .view-btn:hover {
        color: var(--text-primary);
        background: var(--bg-hover);
    }

    .view-btn.active {
        background: var(--primary-500);
        color: white;
        box-shadow: var(--shadow-sm);
    }

    .enhanced-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-5);
        border-radius: var(--radius-lg);
        font-weight: 600;
        font-size: var(--font-size-sm);
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-spring);
        position: relative;
        overflow: hidden;
    }

    .enhanced-btn svg {
        width: 18px;
        height: 18px;
    }

    .enhanced-btn.primary {
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        color: white;
        box-shadow: var(--shadow-md);
    }

    .enhanced-btn.primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }

    .enhanced-btn.secondary {
        background: var(--bg-elevated);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
    }

    .enhanced-btn.secondary:hover {
        background: var(--bg-hover);
        border-color: var(--border-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    /* Task Content Area */
    .task-content {
        padding: var(--space-6);
        background: var(--bg-primary);
    }

    /* Card View Styles */
    .task-cards-container {
        width: 100%;
    }

    .task-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: var(--space-5);
        /* Prevent flash during initial render */
        contain: layout style;
        will-change: contents;
    }

    .enhanced-task-card {
        background: var(--bg-elevated);
        border-radius: var(--radius-xl);
        border: 1px solid var(--border-color);
        overflow: hidden;
        transition: transform var(--duration-normal) var(--ease-spring),
            box-shadow var(--duration-normal) var(--ease-spring),
            border-color var(--duration-normal) var(--ease-spring);
        position: relative;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        padding: var(--space-6);
        /* Prevent flash during initial render */
        opacity: 1;
        visibility: visible;
        contain: layout style;
    }

    .enhanced-task-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--primary-500);
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-in-out);
    }

    .enhanced-task-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-xl);
        border-color: var(--primary-200);
    }

    .enhanced-task-card:hover::before {
        opacity: 1;
    }

    .enhanced-task-card.overdue {
        border-color: var(--error-200);
        background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--error-50) 100%);
    }

    .enhanced-task-card.overdue::before {
        background: var(--error-500);
    }

    .enhanced-task-card.completed {
        border-color: var(--success-200);
        background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--success-50) 100%);
    }

    .enhanced-task-card.completed::before {
        background: var(--success-500);
    }

    .enhanced-task-card.dragging {
        opacity: 0.5;
        transform: rotate(5deg);
        z-index: 1000;
    }

    /* Task Card Header */
    .task-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-4);
    }

    .task-priority {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .task-priority.high {
        background: var(--error-100);
        color: var(--error-700);
        border: 1px solid var(--error-200);
    }

    .task-priority.medium {
        background: var(--warning-100);
        color: var(--warning-700);
        border: 1px solid var(--warning-200);
    }

    .task-priority.low {
        background: var(--success-100);
        color: var(--success-700);
        border: 1px solid var(--success-200);
    }

    .priority-icon {
        font-size: var(--font-size-sm);
    }

    .action-btn {
        width: 32px;
        height: 32px;
        border: none;
        background: var(--bg-secondary);
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-spring);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-color);
    }

    .action-btn:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
        transform: scale(1.1);
        box-shadow: var(--shadow-sm);
    }

    .action-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Task Card Content */
    .task-card-content {
        margin-bottom: var(--space-4);
    }

    .task-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-2) 0;
        line-height: 1.3;
    }

    .task-description {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: 0 0 var(--space-3) 0;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .task-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .task-tag {
        padding: var(--space-1) var(--space-2);
        background: var(--primary-50);
        color: var(--primary-700);
        border-radius: var(--radius-md);
        font-size: var(--font-size-xs);
        font-weight: 500;
        border: 1px solid var(--primary-200);
    }

    /* Task Progress */
    .task-card-progress {
        margin-bottom: var(--space-4);
    }

    .progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-2);
    }

    .progress-label {
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .progress-percentage {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--primary-600);
    }

    .enhanced-progress-bar {
        height: 8px;
        background: var(--gray-200);
        border-radius: var(--radius-full);
        overflow: hidden;
        position: relative;
    }

    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
        border-radius: var(--radius-full);
        transition: width var(--duration-slow) var(--ease-in-out);
        position: relative;
    }

    .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
        /* Removed shimmer animation to prevent distraction */
    }

    /* Task Card Meta */
    .task-card-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-4);
    }

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

    .assignee-avatar {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-full);
        background: var(--primary-100);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-sm);
        border: 2px solid var(--bg-elevated);
        box-shadow: var(--shadow-sm);
    }

    .assignee-name {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--text-primary);
    }

    .task-meta-items {
        display: flex;
        gap: var(--space-3);
        align-items: center;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    .meta-item svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .due-date.overdue {
        color: var(--error-600);
        font-weight: 600;
    }

    /* Task Status Badge */
    .task-status-badge {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-lg);
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
    }

    .task-status-badge.pending {
        background: var(--warning-100);
        color: var(--warning-700);
        border: 1px solid var(--warning-200);
    }

    .task-status-badge.in-progress {
        background: var(--primary-100);
        color: var(--primary-700);
        border: 1px solid var(--primary-200);
    }

    .task-status-badge.completed {
        background: var(--success-100);
        color: var(--success-700);
        border: 1px solid var(--success-200);
    }

    /* Empty State */
    .empty-state-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        padding: var(--space-8);
    }

    .empty-state-content {
        text-align: center;
        max-width: 400px;
    }

    .empty-state-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto var(--space-4);
        background: var(--primary-50);
        border-radius: var(--radius-2xl);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-500);
    }

    .empty-state-icon svg {
        width: 40px;
        height: 40px;
    }

    .empty-state-title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-2) 0;
    }

    .empty-state-description {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: 0 0 var(--space-6) 0;
        line-height: 1.5;
    }

    /* List View Styles */
    .task-list-container {
        width: 100%;
        background: var(--bg-elevated);
        border-radius: var(--radius-xl);
        border: 1px solid var(--border-color);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .task-list-header {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .task-list-body {
        max-height: none;
        overflow-y: visible;
    }

    .task-list-item {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--border-color);
        transition: all var(--duration-normal) var(--ease-in-out);
        cursor: pointer;
        align-items: center;
    }

    .task-list-item:hover {
        background: var(--bg-hover);
        transform: translateX(4px);
    }

    .task-list-item:last-child {
        border-bottom: none;
    }

    .task-list-item.overdue {
        background: linear-gradient(90deg, var(--error-50) 0%, transparent 100%);
        border-left: 4px solid var(--error-500);
    }

    .task-title-cell h4 {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-1) 0;
    }

    .task-title-cell p {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        margin: 0 0 var(--space-2) 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .task-tags-inline {
        display: flex;
        gap: var(--space-1);
        flex-wrap: wrap;
    }

    .task-tag-small {
        padding: 2px var(--space-1);
        background: var(--primary-50);
        color: var(--primary-600);
        border-radius: var(--radius-sm);
        font-size: 10px;
        font-weight: 500;
    }

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

    .status-badge {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-md);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .status-badge.pending {
        background: var(--warning-100);
        color: var(--warning-700);
    }

    .status-badge.in-progress {
        background: var(--primary-100);
        color: var(--primary-700);
    }

    .status-badge.completed {
        background: var(--success-100);
        color: var(--success-700);
    }

    .priority-badge {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .priority-badge.high {
        color: var(--error-700);
    }

    .priority-badge.medium {
        color: var(--warning-700);
    }

    .priority-badge.low {
        color: var(--success-700);
    }

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

    .mini-progress-bar {
        flex: 1;
        height: 6px;
        background: var(--gray-200);
        border-radius: var(--radius-full);
        overflow: hidden;
    }

    .progress-text {
        font-size: var(--font-size-xs);
        font-weight: 500;
        color: var(--text-secondary);
        min-width: 35px;
    }

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

    /* Kanban View Styles */
    .kanban-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
        min-height: 500px;
    }

    .kanban-column {
        background: var(--bg-elevated);
        border-radius: var(--radius-xl);
        border: 1px solid var(--border-color);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .kanban-header {
        padding: var(--space-4);
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .kanban-header h3 {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .task-count {
        background: var(--primary-100);
        color: var(--primary-700);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: 600;
    }

    .kanban-tasks {
        padding: var(--space-4);
        min-height: 400px;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .kanban-task-card {
        background: var(--bg-elevated);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-color);
        padding: var(--space-3);
        transition: all var(--duration-normal) var(--ease-spring);
        cursor: grab;
        box-shadow: var(--shadow-sm);
    }

    .kanban-task-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-200);
    }

    .kanban-task-card.dragging {
        opacity: 0.5;
        transform: rotate(3deg);
        cursor: grabbing;
    }

    .kanban-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-2);
    }

    .priority-indicator {
        width: 20px;
        height: 20px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-xs);
    }

    .priority-indicator.high {
        background: var(--error-100);
    }

    .priority-indicator.medium {
        background: var(--warning-100);
    }

    .priority-indicator.low {
        background: var(--success-100);
    }

    .card-menu-btn {
        width: 24px;
        height: 24px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--duration-normal) var(--ease-in-out);
    }

    .card-menu-btn:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .card-menu-btn svg {
        width: 14px;
        height: 14px;
    }

    .kanban-task-title {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-1) 0;
        line-height: 1.3;
    }

    .kanban-task-description {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        margin: 0 0 var(--space-2) 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
    }

    .kanban-task-tags {
        display: flex;
        gap: var(--space-1);
        margin-bottom: var(--space-2);
        flex-wrap: wrap;
    }

    .task-tag-mini {
        padding: 2px var(--space-1);
        background: var(--primary-50);
        color: var(--primary-600);
        border-radius: var(--radius-sm);
        font-size: 10px;
        font-weight: 500;
    }

    .kanban-progress {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-bottom: var(--space-2);
    }

    .kanban-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .assignee-avatar-small {
        width: 24px;
        height: 24px;
        border-radius: var(--radius-full);
        background: var(--primary-100);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-xs);
        border: 1px solid var(--border-color);
    }

    .due-date-mini {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        font-weight: 500;
    }

    .due-date-mini.overdue {
        color: var(--error-600);
        font-weight: 600;
    }

    /* Task Modal Styles */
    .task-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-4);
        opacity: 0;
        visibility: hidden;
        transition: all var(--duration-normal) var(--ease-in-out);
    }

    .task-modal.active {
        opacity: 1;
        visibility: visible;
    }

    .modal-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
    }

    .modal-content {
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        box-shadow: var(--shadow-2xl);
        border: 1px solid var(--border-color);
        max-width: 600px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        z-index: 1;
        transform: scale(0.9);
        transition: transform var(--duration-normal) var(--ease-spring);
    }

    .task-modal.active .modal-content {
        transform: scale(1);
    }

    .modal-header {
        padding: var(--space-6);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    }

    .modal-header h2 {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .modal-close {
        width: 32px;
        height: 32px;
        border: none;
        background: var(--bg-secondary);
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-close:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
        transform: scale(1.1);
    }

    .modal-close svg {
        width: 18px;
        height: 18px;
    }

    /* Task Form Styles */
    .task-form {
        padding: var(--space-6);
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .form-row:has(.form-group:nth-child(2)) {
        grid-template-columns: 1fr 1fr;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .form-group label {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-primary);
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: var(--space-3);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-elevated);
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        transition: all var(--duration-normal) var(--ease-in-out);
        outline: none;
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-100);
    }

    .form-group textarea {
        resize: vertical;
        min-height: 80px;
    }

    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-3);
        padding-top: var(--space-4);
        border-top: 1px solid var(--border-color);
        margin-top: var(--space-6);
    }

    /* Notification Styles */
    .task-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1001;
        background: var(--bg-elevated);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xl);
        border: 1px solid var(--border-color);
        padding: var(--space-4);
        max-width: 300px;
        transform: translateX(100%);
        transition: all var(--duration-normal) var(--ease-spring);
        font-size: var(--font-size-sm);
        color: var(--text-primary);
    }

    .task-notification.show {
        transform: translateX(0);
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
        .task-cards-grid {
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }

        .kanban-container {
            grid-template-columns: 1fr;
            gap: var(--space-4);
        }

        .task-list-header,
        .task-list-item {
            grid-template-columns: 2fr 1fr 1fr;
        }

        .task-list-header .assignee-col,
        .task-list-header .priority-col,
        .task-list-header .progress-col,
        .task-list-header .due-col,
        .task-list-item .assignee-col,
        .task-list-item .priority-col,
        .task-list-item .progress-col,
        .task-list-item .due-col {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .task-controls {
            flex-direction: column;
            align-items: stretch;
        }

        .search-and-filters {
            flex-direction: column;
        }

        .filter-controls {
            justify-content: stretch;
        }

        .enhanced-select {
            min-width: auto;
            flex: 1;
        }

        .action-controls {
            justify-content: space-between;
        }

        .task-cards-grid {
            grid-template-columns: 1fr;
        }

        .header-content {
            flex-direction: column;
            align-items: stretch;
        }

        .task-stats {
            flex-direction: column;
        }

        .form-row:has(.form-group:nth-child(2)) {
            grid-template-columns: 1fr;
        }
    }

    /* Animation Classes */
    .task-card-enter {
        animation: slideInUp 0.3s var(--ease-spring);
    }

    .task-card-exit {
        animation: slideOutDown 0.3s var(--ease-spring);
    }


    /* Quick Actions Panel */
    .quick-actions-panel {
        position: absolute;
        top: 100%;
        right: 0;
        width: 250px;
        background: var(--bg-elevated);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border-color);
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all var(--duration-normal) var(--ease-in-out);
    }

    .quick-actions-panel.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .panel-header {
        padding: var(--space-3);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .panel-header h3 {
        margin: 0;
        font-size: var(--font-size-sm);
        font-weight: 600;
    }

    .close-panel {
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--space-2);
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        transition: all 0.2s ease;
    }

    .close-panel:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .close-panel svg {
        width: 16px;
        height: 16px;
    }

    .panel-content {
        padding: var(--space-4);
    }

    .quick-action-item {
        margin-bottom: var(--space-3);
    }

    .quick-action-btn {
        width: 100%;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: var(--space-3);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        cursor: pointer;
        font-size: var(--font-size-sm);
        color: var(--text-primary);
        transition: all 0.2s ease;
    }

    .quick-action-btn:hover {
        background: var(--bg-hover);
        border-color: var(--primary-300);
        transform: translateY(-1px);
    }

    .quick-action-btn svg {
        width: 16px;
        height: 16px;
        color: var(--primary-500);
    }

    /* Enhanced Task System Styles - Removed duplicate, using enhanced-task-system.css */

    /* Task System Header */
    .task-system-header {
        background: var(--bg-widget);
        padding: var(--space-4);
        border-bottom: 1px solid var(--border-color);
        position: relative;
        z-index: 1;
        flex-shrink: 0;
    }

    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-3);
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .header-title {
        flex: 1;
        min-width: 200px;
    }

    .task-system-title {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .section-icon-svg {
        width: 32px;
        height: 32px;
        color: var(--primary-600);
        flex-shrink: 0;
        animation: gentle-bounce 3s ease-in-out infinite;
    }

    @keyframes gentle-bounce {

        0%,
        100% {
            transform: translateY(0px) scale(1);
        }

        50% {
            transform: translateY(-3px) scale(1.05);
        }
    }

    /* Remove title icon styling */

    .task-system-subtitle {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: 0;
        font-weight: 500;
        line-height: 1.6;
        max-width: 600px;
    }

    /* Enhanced Task Stats */
    .task-stats {
        display: flex;
        gap: var(--space-4);
        flex-wrap: wrap;
        align-items: stretch;
    }

    .stat-card {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border-radius: var(--radius-xl);
        padding: var(--space-5);
        border: 1px solid rgba(99, 102, 241, 0.1);
        min-width: 140px;
        flex: 1;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        transition: all var(--duration-normal) var(--ease-spring);
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        opacity: 0;
        transform: translateY(20px);
    }

    .stat-card.animate-in {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    [data-theme="dark"] .stat-card {
        background: rgba(30, 41, 59, 0.8);
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--primary-500);
        transform: scaleX(0);
        transition: transform var(--duration-normal) var(--ease-in-out);
    }

    .stat-card:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: var(--shadow-lg);
        border-color: rgba(99, 102, 241, 0.3);
    }

    .stat-card:hover::before {
        transform: scaleX(1);
    }

    .stat-card.completed::before {
        background: var(--success-500);
    }

    .stat-card.in-progress::before {
        background: var(--warning-500);
    }

    .stat-card.overdue::before {
        background: var(--error-500);
    }

    .stat-card.ai-score::before {
        background: linear-gradient(90deg, var(--primary-500), var(--success-500));
    }

    .stat-icon {
        font-size: var(--font-size-2xl);
        width: 48px;
        height: 48px;
        border-radius: var(--radius-xl);
        background: var(--primary-50);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: var(--shadow-sm);
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .stat-card.completed .stat-icon {
        background: var(--success-50);
    }

    .stat-card.in-progress .stat-icon {
        background: var(--warning-50);
    }

    .stat-card.overdue .stat-icon {
        background: var(--error-50);
    }

    .stat-info {
        flex: 1;
    }

    .stat-number {
        display: block;
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--primary-600);
        margin-bottom: var(--space-1);
        line-height: 1;
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .stat-card.completed .stat-number {
        color: var(--success-600);
    }

    .stat-card.in-progress .stat-number {
        color: var(--warning-600);
    }

    .stat-card.overdue .stat-number {
        color: var(--error-600);
    }

    .stat-label {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1.2;
    }

    /* Enhanced Task Controls */
    .task-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        flex-wrap: wrap;
        position: relative;
        z-index: 1;
    }

    .search-and-filters {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex: 1;
        flex-wrap: wrap;
        min-width: 200px;
    }

    .search-container {
        position: relative;
        min-width: 180px;
        flex: 1;
        max-width: 300px;
    }

    .task-search {
        width: 100%;
        padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-elevated);
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        font-weight: 400;
        transition: border-color var(--duration-normal) var(--ease-in-out), box-shadow var(--duration-normal) var(--ease-in-out);
        outline: none;
        box-shadow: var(--shadow-sm);
    }

    [data-theme="dark"] .task-search {
        background: rgba(30, 41, 59, 0.8);
    }

    .task-search:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md);
    }

    .search-icon {
        position: absolute;
        left: var(--space-2);
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        color: var(--text-secondary);
        pointer-events: none;
        transition: color var(--duration-normal) var(--ease-in-out);
    }

    .task-search:focus+.search-icon {
        color: var(--primary-500);
    }

    .enhanced-select {
        padding: var(--space-3) var(--space-4);
        border: 1px solid rgba(99, 102, 241, 0.2);
        border-radius: var(--radius-lg);
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
        min-width: 140px;
        outline: none;
        box-shadow: var(--shadow-sm);
    }

    [data-theme="dark"] .enhanced-select {
        background: rgba(30, 41, 59, 0.8);
    }

    .enhanced-select:hover {
        border-color: rgba(99, 102, 241, 0.4);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .enhanced-select:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md);
    }

    /* Enhanced Action Controls */
    .action-controls {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex-wrap: wrap;
    }

    .view-toggle {
        display: flex;
        background: var(--bg-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-1);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
    }

    [data-theme="dark"] .view-toggle {
        background: rgba(30, 41, 59, 0.8);
    }

    .view-btn {
        padding: var(--space-2);
        border: none;
        background: transparent;
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-in-out);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .view-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(99, 102, 241, 0.1);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s;
    }

    .view-btn:hover::before {
        width: 100px;
        height: 100px;
    }

    .view-btn svg {
        width: 20px;
        height: 20px;
        z-index: 1;
        position: relative;
    }

    .view-btn:hover {
        color: var(--text-primary);
        transform: scale(1.05);
    }

    .view-btn.active {
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        color: white;
        box-shadow: var(--shadow-md);
        transform: scale(1.05);
    }

    .enhanced-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-6);
        border-radius: var(--radius-xl);
        font-weight: 600;
        font-size: var(--font-size-sm);
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-spring);
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-md);
    }

    .enhanced-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .enhanced-btn:hover::before {
        width: 300px;
        height: 300px;
    }

    .enhanced-btn svg {
        width: 18px;
        height: 18px;
        z-index: 1;
        position: relative;
    }

    .enhanced-btn.primary {
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        color: white;
    }

    .enhanced-btn.primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }

    .enhanced-btn.secondary {
        background: var(--bg-secondary);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
    }

    .confidence-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--success-500), var(--primary-500));
        border-radius: var(--radius-full);
        transition: width var(--duration-slow) var(--ease-in-out);
    }

    .confidence-text {
        font-size: var(--font-size-xs);
        font-weight: 500;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .impact-badge {
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .impact-badge.high {
        background: var(--error-100);
        color: var(--error-700);
    }

    .impact-badge.medium {
        background: var(--warning-100);
        color: var(--warning-700);
    }

    .impact-badge.low {
        background: var(--success-100);
        color: var(--success-700);
    }

    .insight-description {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        line-height: 1.5;
        margin-bottom: var(--space-4);
    }

    .insight-actions {
        display: flex;
        gap: var(--space-2);
        flex-wrap: wrap;
    }

    .insight-action-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--font-size-xs);
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .insight-action-btn svg {
        width: 14px;
        height: 14px;
    }

    .insight-action-btn.primary {
        background: var(--primary-500);
        color: white;
    }

    .insight-action-btn.primary:hover {
        background: var(--primary-600);
        transform: translateY(-1px);
    }

    .insight-action-btn.secondary {
        background: var(--bg-secondary);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
    }

    .insight-action-btn.secondary:hover {
        background: var(--bg-hover);
        border-color: var(--border-hover);
    }

    /* Performance Analytics */
    .task-analytics {
        margin-top: var(--space-6);
        padding: var(--space-6);
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        border: 1px solid var(--border-color);
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .task-analytics::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--success-500), var(--primary-500), var(--warning-500));
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    }

    .analytics-title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        background: linear-gradient(135deg, var(--success-600), var(--primary-600));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0 0 var(--space-4) 0;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .analytics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-4);
    }

    .analytics-metric {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border-radius: var(--radius-xl);
        padding: var(--space-4);
        border: 1px solid rgba(99, 102, 241, 0.1);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        transition: all var(--duration-normal) var(--ease-spring);
        box-shadow: var(--shadow-sm);
        opacity: 0;
        transform: translateY(20px);
    }

    [data-theme="dark"] .analytics-metric {
        background: rgba(30, 41, 59, 0.8);
    }

    .analytics-metric.animate-in {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .analytics-metric:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .metric-icon {
        font-size: var(--font-size-2xl);
        width: 48px;
        height: 48px;
        border-radius: var(--radius-xl);
        background: var(--primary-50);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .metric-content {
        flex: 1;
    }

    .metric-value {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--space-1);
        line-height: 1;
    }

    .metric-label {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: var(--space-1);
    }

    .metric-trend {
        font-size: var(--font-size-xs);
        font-weight: 500;
        padding: 2px var(--space-1);
        border-radius: var(--radius-sm);
    }

    .metric-trend.positive {
        background: var(--success-100);
        color: var(--success-700);
    }

    .metric-trend.negative {
        background: var(--error-100);
        color: var(--error-700);
    }

    .metric-trend.neutral {
        background: var(--gray-100);
        color: var(--gray-700);
    }

    .insight-card.positive .insight-icon {
        background: var(--success-50);
    }

    .insight-card.warning .insight-icon {
        background: var(--warning-50);
    }

    .insight-content {
        flex: 1;
    }

    .insight-content h4 {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-2) 0;
        line-height: 1.3;
    }

    .insight-content p {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: 0 0 var(--space-2) 0;
        line-height: 1.5;
    }

    .insight-metric {
        font-size: var(--font-size-sm);
        font-weight: 700;
        color: var(--primary-600);
        padding: var(--space-1) var(--space-3);
        background: var(--primary-50);
        border-radius: var(--radius-full);
        display: inline-block;
        border: 1px solid var(--primary-200);
    }

    .insight-card.positive .insight-metric {
        color: var(--success-600);
        background: var(--success-50);
        border-color: var(--success-200);
    }

    .insight-card.warning .insight-metric {
        color: var(--warning-600);
        background: var(--warning-50);
        border-color: var(--warning-200);
    }

    /* Enhanced Task Cards - Update existing style */
    .enhanced-task-card {
        background: var(--bg-elevated);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-color);
        overflow: hidden;
        transition: all var(--duration-normal) var(--ease-spring);
        position: relative;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        padding: var(--space-4);
        margin-bottom: var(--space-3);
    }

    .enhanced-task-card.animate-in {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    [data-theme="dark"] .enhanced-task-card {
        background: rgba(30, 41, 59, 0.8);
    }

    .enhanced-task-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--primary-500);
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-in-out);
    }

    .enhanced-task-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-200);
    }

    .enhanced-task-card:hover::before {
        opacity: 1;
    }

    .enhanced-task-card.overdue {
        border-color: rgba(239, 68, 68, 0.3);
        background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.9) 0%,
                rgba(254, 242, 242, 0.8) 100%);
    }

    [data-theme="dark"] .enhanced-task-card.overdue {
        background: linear-gradient(135deg,
                rgba(30, 41, 59, 0.8) 0%,
                rgba(55, 48, 48, 0.8) 100%);
    }

    .enhanced-task-card.overdue::before {
        background: var(--error-500);
        opacity: 1;
    }

    .enhanced-task-card.completed {
        border-color: rgba(34, 197, 94, 0.3);
        background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.9) 0%,
                rgba(240, 253, 244, 0.8) 100%);
    }

    [data-theme="dark"] .enhanced-task-card.completed {
        background: linear-gradient(135deg,
                rgba(30, 41, 59, 0.8) 0%,
                rgba(34, 48, 42, 0.8) 100%);
    }

    .enhanced-task-card.completed::before {
        background: var(--success-500);
        opacity: 1;
    }

    /* Backward Compatibility for existing task-system class */
    .task-system {
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        overflow: hidden;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
        transition: all var(--duration-normal) var(--ease-spring);
        margin: 0 !important;
        padding: 0 !important;
    }

    .task-system:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }

    @media (max-width: 768px) {
        .task-header {
            flex-direction: column;
            gap: var(--space-4);
            align-items: flex-start;
        }

        .task-filters {
            flex-direction: column;
            align-items: flex-start;
        }

        .task-header-row {
            flex-direction: column;
            gap: var(--space-3);
        }

        .task-meta {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-2);
        }
    }

    /* Weather Widget Styles */
    .weather-widget {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: var(--radius-2xl);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: var(--shadow-lg);
        transition: all var(--duration-normal) var(--ease-spring);
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
    }

    .weather-widget::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-in-out);
    }

    .weather-widget:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }

    .weather-widget:hover::before {
        opacity: 1;
    }

    .weather-header {
        padding: var(--space-6);
        background: rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .weather-title {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: white;
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .weather-title::before {
        content: '';
        width: 4px;
        height: 24px;
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        border-radius: var(--radius-full);
    }

    .weather-location {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-size-sm);
        color: rgba(255, 255, 255, 0.8);
        font-weight: 500;
    }

    .location-icon {
        width: 16px;
        height: 16px;
        color: rgba(255, 255, 255, 0.9);
    }

    .weather-content {
        padding: var(--space-6);
        background: rgba(255, 255, 255, 0.02);
    }

    .current-weather {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--space-6);
        align-items: center;
        margin-bottom: var(--space-6);
    }

    .weather-info {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .temperature {
        font-size: var(--font-size-4xl);
        font-weight: 800;
        color: var(--text-primary);
        display: flex;
        align-items: baseline;
        gap: var(--space-2);
    }

    .temperature-unit {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-secondary);
    }

    .weather-description {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .weather-details {
        display: flex;
        gap: var(--space-4);
        margin-top: var(--space-3);
    }

    .weather-detail {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .weather-detail svg {
        width: 16px;
        height: 16px;
        color: var(--primary-500);
    }

    .weather-icon {
        width: 80px;
        height: 80px;
        color: var(--primary-500);
        animation: float 3s ease-in-out infinite;
    }


    .forecast {
        border-top: 1px solid var(--border-color);
        padding-top: var(--space-6);
    }

    .forecast-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-4);
    }

    .forecast-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .forecast-toggle {
        display: flex;
        gap: var(--space-2);
    }

    .toggle-btn {
        padding: var(--space-1) var(--space-3);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-full);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        font-size: var(--font-size-xs);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
    }

    .toggle-btn.active {
        background: var(--primary-500);
        color: white;
        border-color: var(--primary-500);
    }

    .toggle-btn:hover:not(.active) {
        border-color: var(--primary-500);
        color: var(--primary-500);
    }

    .forecast-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--space-4);
    }

    .forecast-item {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: var(--radius-xl);
        padding: var(--space-4);
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .forecast-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .forecast-day {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: white;
        margin-bottom: var(--space-2);
    }

    .forecast-icon {
        width: 32px;
        height: 32px;
        color: white;
        margin: var(--space-2) auto;
    }

    .forecast-temp {
        font-size: var(--font-size-lg);
        font-weight: 700;
        color: white;
        margin-bottom: var(--space-1);
    }

    .forecast-desc {
        font-size: var(--font-size-xs);
        color: rgba(255, 255, 255, 0.8);
        font-weight: 500;
    }

    .weather-error {
        text-align: center;
        padding: var(--space-12);
        color: var(--text-secondary);
    }

    .weather-error svg {
        margin-bottom: var(--space-4);
        opacity: 0.5;
    }

    .weather-error h3 {
        font-size: var(--font-size-lg);
        font-weight: 600;
        margin: 0 0 var(--space-2);
        color: var(--text-primary);
    }

    .weather-error p {
        margin: 0;
        font-size: var(--font-size-sm);
    }

    /* Team Spotlight Text Readability Fixes */
    .team-spotlight .event-title,
    .team-spotlight .event-time,
    .team-spotlight .member-role,
    .team-spotlight .member-department,
    .team-spotlight .achievements-list li,
    .team-spotlight .skill-tag {
        color: var(--text-primary) !important;
        font-weight: 500 !important;
    }

    .team-spotlight .event-time {
        color: var(--text-secondary) !important;
        font-weight: 400 !important;
    }

    /* Fix all components with faded text */
    .company-news .news-excerpt,
    .company-news .news-meta,
    .analytics-dashboard .metric-insight,
    .analytics-dashboard .activity-meta,
    .weather-widget .weather-details,
    .task-system .task-description,
    .task-system .task-meta,
    .knowledge-hub .article-meta,
    .achievement-system .achievement-description,
    .collaboration-hub .project-meta,
    .company-culture-showcase .story-text,
    .company-culture-showcase .value-description {
        color: var(--text-secondary) !important;
        font-weight: 400 !important;
    }

    /* Ensure all primary text is sufficiently dark */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .widget-title,
    .section-title,
    .card-title,
    .member-name,
    .task-name,
    .news-headline,
    .event-title,
    .chart-title,
    .metric-label {
        color: var(--text-primary) !important;
        font-weight: 600 !important;
    }

    /* Fix secondary text elements */
    .meta-text,
    .description-text,
    .subtitle-text,
    .helper-text,
    .caption-text {
        color: var(--text-secondary) !important;
        font-weight: 400 !important;
    }

    /* Specific fixes for upcoming events section */
    .upcoming-events .event-title,
    .events-list .event-title {
        color: white !important;
        font-weight: 600 !important;
        font-size: var(--font-size-sm) !important;
    }

    .upcoming-events .event-time,
    .events-list .event-time {
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500 !important;
        font-size: var(--font-size-xs) !important;
    }

    /* Enhanced contrast for small text */
    .font-size-xs,
    .text-xs {
        color: var(--text-secondary) !important;
        font-weight: 500 !important;
    }

    .font-size-sm,
    .text-sm {
        color: var(--text-secondary) !important;
        font-weight: 400 !important;
    }

    .insight-card h4 {
        color: var(--text-primary) !important;
        font-weight: 600 !important;
    }

    .insight-card p {
        color: var(--text-secondary) !important;
        font-weight: 500 !important;
    }

    /* Ensure sufficient contrast in dark mode */
    [data-theme="dark"] .team-spotlight .event-title,
    [data-theme="dark"] .team-spotlight .member-name,
    [data-theme="dark"] .upcoming-events .event-title,
    [data-theme="dark"] .events-list .event-title {
        color: var(--text-primary-dark) !important;
    }

    [data-theme="dark"] .team-spotlight .event-time,
    [data-theme="dark"] .upcoming-events .event-time,
    [data-theme="dark"] .events-list .event-time {
        color: var(--text-secondary-dark) !important;
    }

    /* Unified Search Styles */
    .search-container {
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        overflow: hidden;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
        transition: all var(--duration-normal) var(--ease-spring);
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
    }

    .search-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-in-out);
    }

    .search-container:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }

    .search-container:hover::before {
        opacity: 1;
    }

    .search-header {
        padding: var(--space-6);
        background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
        border-bottom: 1px solid var(--border-color);
    }

    .search-title {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 var(--space-4);
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .search-title::before {
        content: '';
        width: 4px;
        height: 24px;
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        border-radius: var(--radius-full);
    }

    .search-input-container {
        position: relative;
        margin-bottom: var(--space-4);
    }

    .search-input {
        width: 100%;
        padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
        border: 2px solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-size: var(--font-size-base);
        font-weight: 500;
        transition: all var(--duration-normal) var(--ease-in-out);
        box-shadow: var(--shadow-sm);
    }

    .search-input:focus {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
        transform: translateY(-1px);
    }

    .search-input::placeholder {
        color: var(--text-secondary);
        font-weight: 400;
    }

    .search-icon {
        position: absolute;
        left: var(--space-4);
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        color: var(--text-secondary);
        transition: color var(--duration-normal) var(--ease-in-out);
    }

    .search-input:focus+.search-icon {
        color: var(--primary-500);
    }

    .search-filters {
        display: flex;
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    .filter-chip {
        padding: var(--space-2) var(--space-3);
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-full);
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .filter-chip:hover {
        border-color: var(--primary-500);
        color: var(--primary-500);
        background: var(--primary-50);
    }

    .filter-chip.active {
        background: var(--primary-500);
        color: white;
        border-color: var(--primary-500);
    }

    .search-content {
        padding: var(--space-6);
    }

    .search-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--border-color);
    }

    .results-count {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        font-weight: 500;
    }

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

    .sort-label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        font-weight: 500;
    }

    .sort-select {
        padding: var(--space-1) var(--space-2);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
    }

    .sort-select:hover {
        border-color: var(--primary-500);
    }

    .search-results {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .search-placeholder {
        text-align: center;
        padding: var(--space-12);
        color: var(--text-secondary);
    }

    .placeholder-icon {
        margin-bottom: var(--space-4);
        opacity: 0.5;
    }

    .placeholder-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        margin: 0 0 var(--space-2);
        color: var(--text-primary);
    }

    .placeholder-description {
        margin: 0;
        font-size: var(--font-size-sm);
    }

    .search-result {
        background: var(--bg-secondary);
        border-radius: var(--radius-xl);
        padding: var(--space-6);
        border: 1px solid var(--border-color);
        transition: all var(--duration-normal) var(--ease-spring);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        display: flex;
        gap: var(--space-4);
    }

    .search-result::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--primary-500);
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-in-out);
    }

    .search-result:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .search-result:hover::before {
        opacity: 1;
    }

    .result-icon {
        width: 40px;
        height: 40px;
        color: var(--primary-500);
        flex-shrink: 0;
    }

    .result-content {
        flex: 1;
    }

    .result-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--space-3);
    }

    .result-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .result-actions {
        display: flex;
        gap: var(--space-2);
    }

    .result-action {
        width: 32px;
        height: 32px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--bg-elevated);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .result-action:hover {
        border-color: var(--primary-500);
        background: var(--primary-50);
        color: var(--primary-600);
        transform: translateY(-1px);
    }

    .result-meta {
        display: flex;
        gap: var(--space-4);
        align-items: center;
        flex-wrap: wrap;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-bottom: var(--space-3);
    }

    .result-author,
    .result-date,
    .result-category,
    .result-role,
    .result-department,
    .result-email,
    .result-lead,
    .result-status,
    .result-progress {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .result-status.primary {
        background: var(--primary-100);
        color: var(--primary-700);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-full);
        font-weight: 600;
    }

    .result-status.success {
        background: var(--success-100);
        color: var(--success-700);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-full);
        font-weight: 600;
    }

    .result-status.warning {
        background: var(--warning-100);
        color: var(--warning-700);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-full);
        font-weight: 600;
    }

    .result-tags {
        display: flex;
        gap: var(--space-2);
        flex-wrap: wrap;
    }

    .result-tag {
        padding: var(--space-1) var(--space-2);
        background: var(--gray-100);
        color: var(--gray-700);
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .search-loading,
    .search-empty {
        text-align: center;
        padding: var(--space-12);
        color: var(--text-secondary);
    }

    .search-loading svg,
    .search-empty svg {
        margin-bottom: var(--space-4);
        /* Removed spin animation */
    }

    .search-empty svg {
        animation: none;
        opacity: 0.5;
    }

    .search-loading p,
    .search-empty h3 {
        font-size: var(--font-size-lg);
        font-weight: 600;
        margin: 0 0 var(--space-2);
        color: var(--text-primary);
    }

    .search-empty p {
        margin: 0;
        font-size: var(--font-size-sm);
    }

    @media (max-width: 768px) {
        .search-filters {
            flex-direction: column;
            align-items: flex-start;
        }

        .search-stats {
            flex-direction: column;
            gap: var(--space-3);
            align-items: flex-start;
        }

        .result-header {
            flex-direction: column;
            gap: var(--space-2);
        }

        .result-meta {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-2);
        }
    }

    /* Command Palette Styles */
    .command-palette {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 1000;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: var(--space-8);
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-in-out);
    }

    .command-palette.active {
        display: flex;
        opacity: 1;
    }

    .palette-container {
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        box-shadow: var(--shadow-2xl);
        border: 1px solid var(--border-color);
        width: 100%;
        max-width: 600px;
        max-height: 80vh;
        overflow: hidden;
        transform: translateY(-20px) scale(0.95);
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .command-palette.active .palette-container {
        transform: translateY(0) scale(1);
    }

    .palette-header {
        padding: var(--space-6);
        border-bottom: 1px solid var(--border-color);
        background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .search-container {
        position: relative;
        flex: 1;
    }

    .search-input {
        width: 100%;
        padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
        border: 2px solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-size: var(--font-size-lg);
        font-weight: 500;
        transition: all var(--duration-normal) var(--ease-in-out);
        box-shadow: var(--shadow-sm);
    }

    .search-input:focus {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
    }

    .search-input::placeholder {
        color: var(--text-secondary);
        font-weight: 400;
    }

    .search-icon {
        position: absolute;
        left: var(--space-4);
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        color: var(--text-secondary);
        transition: color var(--duration-normal) var(--ease-in-out);
    }

    .close-btn {
        width: 40px;
        height: 40px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close-btn:hover {
        border-color: var(--primary-500);
        background: var(--primary-50);
        color: var(--primary-600);
        transform: translateY(-1px);
    }

    .commands-list {
        max-height: 60vh;
        overflow-y: auto;
        padding: var(--space-2);
    }

    .command-item {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
        margin-bottom: var(--space-1);
        border: 1px solid transparent;
    }

    .command-item:hover,
    .command-item.selected {
        background: var(--primary-50);
        border-color: var(--primary-200);
    }

    .command-icon {
        width: 24px;
        height: 24px;
        color: var(--primary-500);
        flex-shrink: 0;
    }

    .command-content {
        flex: 1;
        min-width: 0;
    }

    .command-title {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-1);
    }

    .command-description {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: 0 0 var(--space-1);
    }

    .command-category {
        padding: var(--space-1) var(--space-2);
        background: var(--gray-100);
        color: var(--gray-700);
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-block;
    }

    .command-shortcut {
        padding: var(--space-1) var(--space-2);
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    .palette-footer {
        padding: var(--space-4);
        border-top: 1px solid var(--border-color);
        background: var(--bg-secondary);
    }

    .shortcuts-help {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        text-align: center;
        display: flex;
        justify-content: center;
        gap: var(--space-4);
    }

    .shortcut-hint {
        background: var(--bg-elevated);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        padding: var(--space-1) var(--space-2);
        font-weight: 600;
    }

    .no-results {
        text-align: center;
        padding: var(--space-12);
        color: var(--text-secondary);
    }

    .no-results svg {
        margin-bottom: var(--space-4);
        opacity: 0.5;
    }

    .no-results h3 {
        font-size: var(--font-size-lg);
        font-weight: 600;
        margin: 0 0 var(--space-2);
        color: var(--text-primary);
    }

    .no-results p {
        margin: 0;
        font-size: var(--font-size-sm);
    }

    @media (max-width: 768px) {
        .command-palette {
            padding: var(--space-4);
        }

        .palette-container {
            max-height: 90vh;
        }

        .command-item {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-2);
        }

        .command-shortcut,
        .command-category {
            align-self: flex-end;
        }

        .shortcuts-help {
            flex-direction: column;
            gap: var(--space-2);
        }
    }

    /* Header Styles */
    app-header {
        display: block;
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border-color);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: var(--shadow-sm);
    }

    .header {
        height: 64px;
        padding: 0 var(--space-6);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

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

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

    .logo {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        text-decoration: none;
        color: var(--text-primary);
        min-width: fit-content;
        transition: transform var(--duration-normal) var(--ease-spring);
    }

    .logo:hover {
        transform: scale(1.05);
    }

    .logo-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        border-radius: var(--radius-xl);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: white;
        font-size: var(--font-size-xl);
        box-shadow: var(--shadow-lg);
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .logo:hover .logo-icon {
        transform: rotate(5deg) scale(1.1);
        box-shadow: var(--shadow-xl);
    }

    .logo-text {
        font-weight: 700;
        font-size: var(--font-size-xl);
        background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .menu-button {
        display: none;
        padding: var(--space-2);
        color: var(--text-secondary);
        border-radius: var(--radius-md);
        transition: all var(--duration-normal) var(--ease-in-out);
        background: none;
        border: none;
        cursor: pointer;
    }

    .menu-button:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .menu-button svg {
        width: 24px;
        height: 24px;
    }

    .action-button {
        padding: var(--space-2);
        color: var(--text-secondary);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--duration-normal) var(--ease-in-out);
        position: relative;
        overflow: hidden;
        background: none;
        border: none;
        cursor: pointer;
    }

    [data-theme="dark"] .action-button {
        color: var(--gray-400);
    }

    [data-theme="dark"] .action-button:hover {
        color: var(--gray-200);
        background: var(--gray-700);
    }

    [data-theme="dark"] .action-button::before {
        background: rgba(255, 255, 255, 0.05);
    }

    .action-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(99, 102, 241, 0.1);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .action-button:hover::before {
        width: 40px;
        height: 40px;
    }

    .action-button:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
        transform: translateY(-1px);
    }

    .action-button svg {
        width: 20px;
        height: 20px;
        transition: transform var(--duration-normal) var(--ease-spring);
    }

    .action-button:hover svg {
        transform: scale(1.1);
    }

    .notification-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        background: var(--error-500);
        border-radius: 50%;
        border: 2px solid var(--bg-elevated);
    }

    [data-theme="dark"] .notification-badge {
        background: var(--error-400);
        border-color: var(--gray-800);
    }

    .user-menu {
        display: flex;
        align-items: center;
    }

    .user-button {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        color: var(--text-primary);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-in-out);
    }

    .user-button:hover {
        background: var(--bg-hover);
        border-color: var(--primary-500);
    }

    [data-theme="dark"] .user-button {
        background: var(--gray-800);
        border-color: var(--gray-700);
        color: var(--gray-200);
    }

    [data-theme="dark"] .user-button:hover {
        background: var(--gray-700);
        border-color: var(--gray-600);
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        color: white;
        font-size: var(--font-size-sm);
    }

    .user-avatar svg {
        width: 100%;
        height: 100%;
        color: white;
    }

    .user-name {
        font-weight: 500;
        font-size: var(--font-size-sm);
    }

    .chevron-down {
        width: 16px;
        height: 16px;
        color: var(--text-secondary);
        transition: transform var(--duration-normal) var(--ease-in-out);
    }

    .user-button:hover .chevron-down {
        transform: rotate(180deg);
    }

    /* User dropdown styles */
    .user-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 0.5rem;
        min-width: 280px;
        background: var(--bg-elevated);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s var(--ease-out);
        z-index: 1000;
    }

    [data-theme="dark"] .user-dropdown {
        background: var(--gray-800);
        border-color: var(--gray-700);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    }

    .user-menu.open .user-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4);
        border-bottom: 1px solid var(--border-color);
    }

    .user-avatar-large {
        width: 3rem;
        height: 3rem;
        border-radius: var(--radius-full);
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: var(--font-size-lg);
    }

    .user-details {
        flex: 1;
    }

    .user-full-name {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
    }

    .user-email {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .dropdown-divider {
        height: 1px;
        background: var(--border-color);
        margin: 0.5rem 0;
    }

    [data-theme="dark"] .dropdown-divider {
        background: var(--gray-700);
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
        padding: var(--space-3) var(--space-4);
        background: none;
        border: none;
        color: var(--text-primary);
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s var(--ease-out);
        font-size: var(--font-size-sm);
    }

    [data-theme="dark"] .dropdown-item {
        color: var(--gray-200);
    }

    [data-theme="dark"] .dropdown-item svg {
        color: var(--gray-400);
    }

    [data-theme="dark"] .dropdown-item:hover {
        background: var(--gray-700);
    }

    .dropdown-item:hover {
        background: var(--bg-hover);
    }

    .dropdown-item svg {
        width: 1.125rem;
        height: 1.125rem;
        color: var(--text-secondary);
    }

    .logout-btn {
        color: var(--error-500);
    }

    .logout-btn:hover {
        background: var(--error-50);
        color: var(--error-600);
    }

    .logout-btn svg {
        color: var(--error-500);
    }

    @media (max-width: 768px) {
        .menu-button {
            display: block;
        }

        .header-left {
            max-width: none;
        }

        .logo-text {
            display: none;
        }

        .user-name {
            display: none;
        }
    }

    /* Calendar Styles */
    .calendar-overview {
        padding: var(--space-6);
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        box-shadow: var(--shadow-xl);
        margin-bottom: var(--space-6);
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        border: 1px solid var(--border-color);
    }

    .overview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-6);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--border-color);
    }

    .date-navigation {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .date-navigation h1 {
        font-size: var(--font-size-3xl);
        font-weight: 800;
        color: var(--text-primary);
        margin: 0;
        min-width: 300px;
        text-align: center;
        background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .view-actions {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .view-switcher {
        display: flex;
        background: var(--bg-secondary);
        border-radius: var(--radius-xl);
        padding: var(--space-1);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    .view-btn {
        padding: var(--space-3) var(--space-6);
        border: none;
        background: none;
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 600;
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-spring);
        position: relative;
        overflow: hidden;
    }

    .view-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        transform: scaleX(0);
        transition: transform var(--duration-normal) var(--ease-spring);
        z-index: -1;
    }

    .view-btn.active {
        color: white;
        transform: scale(1.05);
        box-shadow: var(--shadow-md);
    }

    .view-btn.active::before {
        transform: scaleX(1);
    }

    .view-btn:hover:not(.active) {
        color: var(--primary-600);
        background: var(--primary-50);
        transform: translateY(-1px);
    }

    /* Calendar Grid */
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: auto repeat(6, 1fr);
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        overflow: hidden;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
        margin-bottom: var(--space-6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Month View Styles */
    .calendar-day-headers {
        grid-row: 1;
        display: contents;
        background: var(--bg-secondary);
        border-bottom: 2px solid var(--border-color);
        font-weight: 600;
        color: var(--text-secondary);
    }

    .calendar-day-header {
        padding: var(--space-3);
        text-align: center;
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-secondary);
        background: var(--bg-secondary);
        border-right: 1px solid var(--border-color);
        border-bottom: 2px solid var(--border-color);
        transition: all var(--duration-normal) var(--ease-spring);
        grid-row: 1;
    }

    .calendar-day-header:last-child {
        border-right: none;
    }

    /* Week view styles - for when week view is active */
    .calendar-grid.week-view {
        grid-template-columns: 80px repeat(7, 1fr);
        grid-template-rows: auto 1fr;
    }

    /* Day view styles - for when day view is active */
    .calendar-grid.day-view {
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto 1fr;
    }

    .calendar-day-cell {
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        padding: var(--space-2);
        position: relative;
        background: var(--bg-primary);
        transition: all var(--duration-normal) var(--ease-spring);
        cursor: pointer;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        grid-row: span 1;
    }

    .calendar-day-cell:last-child {
        border-right: none;
    }

    /* Remove bottom border from last row */
    .calendar-day-cell:nth-child(n+36):nth-child(-n+42) {
        border-bottom: none;
    }

    .calendar-day-cell:hover {
        background: var(--bg-hover);
        transform: scale(1.02);
        box-shadow: var(--shadow-md);
        z-index: 10;
    }

    .calendar-day-cell.today {
        background: var(--primary-50);
        border-color: var(--primary-500);
        box-shadow: var(--shadow-md);
    }

    .calendar-day-cell.today .day-number {
        color: var(--primary-700);
        font-weight: 700;
    }

    .calendar-day-cell.other-month {
        color: var(--text-muted);
        background: var(--bg-secondary);
        opacity: 0.6;
    }

    .calendar-day-cell.other-month:hover {
        opacity: 0.8;
    }

    .day-number {
        font-size: var(--font-size-sm);
        font-weight: 600;
        margin-bottom: var(--space-2);
        color: inherit;
        text-align: right;
    }

    .day-events {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        flex: 1;
        align-items: center;
        justify-content: flex-start;
        padding-top: var(--space-1);
    }

    .event-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--primary-500);
        margin-bottom: 2px;
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .event-indicator:hover {
        transform: scale(1.2);
        background: var(--primary-600);
    }

    /* Week View Styles */
    .time-column {
        width: 80px;
        background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
        border-right: 1px solid var(--border-color);
        flex-shrink: 0;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .time-column::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(180deg, transparent 0%, var(--border-color) 50%, transparent 100%);
    }

    .time-slot {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        font-weight: 600;
        border-bottom: 1px solid var(--border-color);
        padding: var(--space-2);
        position: relative;
        transition: all var(--duration-normal) var(--ease-in-out);
        flex-shrink: 0;
    }

    .time-slot:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .time-slot:last-child {
        border-bottom: none;
    }

    /* Add a spacer to align with day headers */
    .time-slot:first-child {
        margin-top: 80px;
        /* Match the height of day headers */
    }

    .day-columns {
        display: flex;
        flex: 1;
    }

    .day-column {
        flex: 1;
        border-right: 1px solid var(--border-color);
        min-height: 540px;
        position: relative;
        transition: all var(--duration-normal) var(--ease-in-out);
    }

    .day-column.full-width {
        flex: 1;
        min-width: 100%;
    }

    .day-column:hover {
        background: var(--bg-hover);
    }

    .day-column:last-child {
        border-right: none;
    }

    .day-header {
        padding: var(--space-4);
        text-align: center;
        background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
        border-bottom: 1px solid var(--border-color);
        font-weight: 600;
        position: relative;
        overflow: hidden;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .day-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-in-out);
        z-index: -1;
    }

    .day-column:hover .day-header::before {
        opacity: 0.1;
    }

    .day-name {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--space-1);
    }

    .day-date {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
    }

    .events-container {
        position: relative;
        height: calc(100% - 80px);
    }

    .event-card {
        position: absolute;
        left: var(--space-2);
        right: var(--space-2);
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        color: white;
        border-radius: var(--radius-xl);
        padding: var(--space-4);
        box-shadow: var(--shadow-lg);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-spring);
        z-index: 10;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .event-card:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: var(--shadow-xl);
        background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    }

    .event-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--success-500), var(--warning-500));
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-in-out);
    }

    .event-card:hover::before {
        opacity: 1;
    }

    .event-content h3 {
        font-size: var(--font-size-sm);
        font-weight: 600;
        margin: 0 0 var(--space-1) 0;
        line-height: 1.3;
    }

    .event-content p {
        font-size: var(--font-size-xs);
        margin: 0 0 var(--space-2) 0;
        opacity: 0.9;
    }

    .event-attendees {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .event-attendees img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid white;
    }

    .attendee-count {
        font-size: var(--font-size-xs);
        opacity: 0.8;
    }

    /* Upcoming Events */
    .upcoming-events {
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        padding: var(--space-6);
        box-shadow: var(--shadow-lg);
        margin-bottom: var(--space-6);
        flex-shrink: 0;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-4);
    }

    .section-header h2 {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }

    .events-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .event-item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-4);
        background: var(--bg-primary);
        border-radius: var(--radius-xl);
        border: 1px solid var(--border-color);
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .event-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .event-time {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 60px;
    }

    .event-time .date {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-primary);
    }

    .event-time .time {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
    }

    .event-content {
        flex: 1;
    }

    .event-content h3 {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--space-1) 0;
    }

    .event-content p {
        color: var(--text-secondary);
        margin: 0 0 var(--space-2) 0;
        line-height: 1.5;
    }

    .event-meta {
        display: flex;
        gap: var(--space-4);
        font-size: var(--font-size-xs);
        color: var(--text-muted);
    }

    .event-actions {
        display: flex;
        gap: var(--space-2);
    }

    /* Schedule Meeting */
    .schedule-meeting {
        background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
        color: white;
        border-radius: var(--radius-2xl);
        padding: var(--space-6);
        box-shadow: var(--shadow-xl);
        flex-shrink: 0;
    }

    .schedule-content h2 {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        margin: 0 0 var(--space-2) 0;
    }

    .schedule-content p {
        margin: 0 0 var(--space-4) 0;
        opacity: 0.9;
    }

    .schedule-actions {
        display: flex;
        gap: var(--space-3);
        margin-bottom: var(--space-6);
    }

    .schedule-actions .btn {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .schedule-actions .btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
    }

    .schedule-info {
        display: flex;
        gap: var(--space-6);
    }

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

    .info-item svg {
        width: 20px;
        height: 20px;
        opacity: 0.8;
    }

    .info-content h3 {
        font-size: var(--font-size-sm);
        font-weight: 600;
        margin: 0;
    }

    .info-content p {
        font-size: var(--font-size-xs);
        margin: 0;
        opacity: 0.8;
    }

    /* Responsive Calendar */
    @media (max-width: 1024px) {
        .calendar-overview {
            padding: var(--space-4);
        }

        .calendar-grid {
            grid-template-columns: repeat(7, 1fr);
        }

        .time-column {
            width: 100%;
            height: auto;
            flex-direction: row;
            overflow-x: auto;
        }

        .time-slot {
            height: 40px;
            min-width: 60px;
            flex-shrink: 0;
        }

        .day-columns {
            flex-direction: column;
        }

        .day-column {
            min-height: auto;
        }

        .day-column:last-child {
            border-bottom: none;
        }
    }

    @media (max-width: 768px) {
        .calendar-overview {
            padding: var(--space-3);
            margin-bottom: var(--space-4);
        }

        .overview-header {
            flex-direction: column;
            gap: var(--space-4);
            align-items: stretch;
        }

        .date-navigation {
            justify-content: center;
        }

        .view-actions {
            justify-content: center;
        }

        .calendar-grid {
            grid-template-columns: repeat(7, 1fr);
            font-size: var(--font-size-xs);
        }

        .calendar-day-cell {
            min-height: 80px;
            padding: var(--space-1);
        }

        .day-number {
            font-size: var(--font-size-xs);
        }

        .event-item {
            flex-direction: column;
            gap: var(--space-3);
        }

        .event-actions {
            justify-content: center;
        }

        .schedule-actions {
            flex-direction: column;
        }

        .upcoming-events,
        .schedule-meeting {
            margin-bottom: var(--space-4);
        }
    }

    /* Modal Styles for Calendar */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        animation: fadeIn 0.3s ease-out;
    }

    .modal.closing {
        animation: fadeOut 0.3s ease-out;
    }

    .modal-content {
        background: var(--bg-elevated);
        border-radius: var(--radius-2xl);
        box-shadow: var(--shadow-2xl);
        max-width: 500px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        animation: slideUp 0.3s ease-out;
    }

    .modal.closing .modal-content {
        animation: slideDown 0.3s ease-out;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-6);
        border-bottom: 1px solid var(--border-color);
    }

    .modal-header h2 {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }

    .close-btn {
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        padding: var(--space-2);
        border-radius: var(--radius-lg);
        transition: all var(--duration-normal) var(--ease-spring);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close-btn:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
        transform: scale(1.1);
    }

    .close-btn svg {
        width: 20px;
        height: 20px;
    }

    .modal-body {
        padding: var(--space-6);
    }

    .form-group {
        margin-bottom: var(--space-4);
    }

    .form-group label {
        display: block;
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--space-2);
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: var(--space-3);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-primary);
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        transition: all var(--duration-normal) var(--ease-spring);
    }

    .form-group input:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-100);
    }

    .form-group textarea {
        resize: vertical;
        min-height: 80px;
    }

    .form-row {
        display: flex;
        gap: var(--space-4);
    }

    .form-row .form-group {
        flex: 1;
    }

    .form-actions {
        display: flex;
        gap: var(--space-3);
        justify-content: flex-end;
        margin-top: var(--space-6);
    }

    .event-details {
        color: var(--text-primary);
    }

    .event-details p {
        margin: var(--space-2) 0;
        color: var(--text-secondary);
    }

    .event-details .event-actions {
        margin-top: var(--space-4);
    }



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



to {
    opacity: 0;
    transform: translateY(20px);
}
}

/* Team Page Styles */
.team-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.team-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.overview-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.overview-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.department-filters {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.filter-btn {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-color);
    background: var(--bg-widget);
    color: var(--text-secondary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    transition: left var(--duration-normal) var(--ease-in-out);
}

.filter-btn:hover {
    border-color: var(--primary-400);
    color: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-sm);
}

.filter-btn.active:hover {
    background: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.team-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.team-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.team-section:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
    position: relative;
    padding-left: var(--space-4);
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-400) 100%);
    border-radius: var(--radius-full);
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.team-member {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.team-member::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.team-member:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.team-member:hover::before {
    transform: scaleX(1);
}

.member-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    position: relative;
}

.member-avatar {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    border: 3px solid var(--bg-elevated);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.team-member:hover .member-avatar {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.member-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-elevated);
    box-shadow: var(--shadow-sm);
}

.member-status.online {
    background: var(--success-500);
}

.member-status.away {
    background: var(--warning-500);
}

.member-status.offline {
    background: var(--gray-400);
}

.member-info {
    flex: 1;
}

.member-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    line-height: 1.3;
}

.member-title {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

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

.contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-in-out);
    border: 1px solid var(--border-color);
}

.contact-link:hover {
    background: var(--primary-500);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-500);
}

.contact-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.contact-link:hover .contact-icon {
    transform: scale(1.1);
}

.member-skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.skill-tag {
    padding: var(--space-1) var(--space-3);
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid var(--primary-200);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.skill-tag:hover {
    background: var(--primary-100);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Skills Matrix */
.skills-matrix {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.matrix-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.matrix-cell {
    padding: var(--space-4);
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.matrix-header .matrix-cell {
    background: var(--bg-secondary);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-xs);
}

.matrix-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--duration-fast) var(--ease-in-out);
}

.matrix-row:hover {
    background: var(--bg-hover);
}

.matrix-row:last-child {
    border-bottom: none;
}

.matrix-row .matrix-cell {
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.matrix-row .matrix-cell:first-child {
    justify-content: flex-start;
    font-weight: 600;
    color: var(--text-primary);
}

.avatar-group {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    border: 2px solid var(--bg-elevated);
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.avatar-sm:hover {
    transform: scale(1.1);
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .member-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .overview-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .overview-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .team-overview {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .overview-header h1 {
        font-size: var(--font-size-2xl);
    }

    .department-filters {
        gap: var(--space-1);
    }

    .filter-btn {
        padding: var(--space-1) var(--space-3);
        font-size: var(--font-size-xs);
    }

    .member-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .team-section {
        padding: var(--space-4);
    }

    .member-header {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .member-contact {
        justify-content: center;
    }

    .skills-matrix {
        overflow-x: auto;
    }

    .matrix-header,
    .matrix-row {
        min-width: 600px;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .team-member {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .team-member:hover {
    border-color: var(--primary-400);
}

[data-theme="dark"] .skill-tag {
    background: var(--primary-900);
    color: var(--primary-200);
    border-color: var(--primary-700);
}

[data-theme="dark"] .skill-tag:hover {
    background: var(--primary-800);
}

[data-theme="dark"] .contact-link {
    background: var(--bg-secondary-dark);
    border-color: var(--border-color);
    color: var(--text-secondary-dark);
}

[data-theme="dark"] .contact-link:hover {
    background: var(--primary-600);
    color: white;
}

[data-theme="dark"] .skills-matrix {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .matrix-header {
    background: var(--bg-secondary-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .matrix-row:hover {
    background: var(--bg-hover-dark);
}

/* Projects Page Styles */
.projects-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.projects-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stat-card {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--primary-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.stat-card:hover .stat-icon {
    background: var(--primary-100);
    transform: scale(1.05);
}

.stat-icon svg {
    width: 24px;
    height: 24px;
}

.stat-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    line-height: 1.2;
}

.stat-change {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.stat-change.positive {
    color: var(--success-600);
}

.stat-change.negative {
    color: var(--error-600);
}

/* Documents Page Styles */
.documents-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.documents-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.document-categories {
    margin-bottom: var(--space-6);
}

.category-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.tab-btn {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-color);
    background: var(--bg-widget);
    color: var(--text-secondary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    transition: left var(--duration-normal) var(--ease-in-out);
}

.tab-btn:hover {
    border-color: var(--primary-400);
    color: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.tab-btn:hover::before {
    left: 100%;
}

.tab-btn.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-sm);
}

.tab-btn.active:hover {
    background: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.category-filters {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.filter-group label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    background: var(--bg-widget);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    min-width: 140px;
}

.filter-select:hover {
    border-color: var(--border-hover);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}

.document-card {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.document-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.document-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.document-card:hover::before {
    transform: scaleX(1);
}

.document-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-lg);
}

.document-icon.pdf {
    background: var(--error-500);
}

.document-icon.doc {
    background: var(--primary-500);
}

.document-icon.xls {
    background: var(--success-500);
}

.document-icon.ppt {
    background: var(--warning-500);
}

.document-icon svg {
    width: 24px;
    height: 24px;
}

/* Help Desk Page Styles */
.helpdesk-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.helpdesk-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.action-card {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.action-card:hover::before {
    transform: scaleX(1);
}

.action-icon {
    width: 64px;
    height: 64px;
    background: var(--primary-50);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    color: var(--primary-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.action-card:hover .action-icon {
    background: var(--primary-100);
    transform: scale(1.05);
}

.action-icon svg {
    width: 32px;
    height: 32px;
}

.action-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.action-card p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

/* Resources Page Styles */
.resources-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.resources-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.resource-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.resource-category {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.resource-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.resource-category:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.resource-category:hover::before {
    transform: scaleX(1);
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.category-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.resource-category:hover .category-icon {
    background: var(--primary-100);
    transform: scale(1.05);
}

.category-icon svg {
    width: 24px;
    height: 24px;
}

.category-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.category-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.resource-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.resource-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-in-out);
    cursor: pointer;
}

.resource-item:hover {
    background: var(--bg-hover);
}

.resource-info {
    flex: 1;
}

.resource-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.resource-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Handbook Page Styles */
.handbook-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.handbook-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.handbook-section {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.handbook-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.handbook-section:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.handbook-section:hover::before {
    transform: scaleX(1);
}

.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.section-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.handbook-section:hover .section-icon {
    background: var(--primary-100);
    transform: scale(1.05);
}

.section-icon svg {
    width: 24px;
    height: 24px;
}

.section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.section-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.article-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.article-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-in-out);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.article-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

.article-icon {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.article-icon svg {
    width: 16px;
    height: 16px;
}

.article-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.article-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Benefits Page Styles */
.benefits-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.benefits-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.benefit-card {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.benefit-card:hover::before {
    transform: scaleX(1);
}

.benefit-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.benefit-icon {
    width: 48px;
    height: 48px;
    background: var(--success-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.benefit-card:hover .benefit-icon {
    background: var(--success-100);
    transform: scale(1.05);
}

.benefit-icon svg {
    width: 24px;
    height: 24px;
}

.benefit-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.benefit-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.benefit-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.detail-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.detail-item svg {
    width: 16px;
    height: 16px;
    color: var(--success-500);
}

/* Settings Page Styles */
.settings-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.settings-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.settings-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.settings-section {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.settings-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.settings-section:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.settings-section:hover::before {
    transform: scaleX(1);
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.setting-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.setting-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.setting-control {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 24px;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.toggle-switch.active {
    background: var(--primary-500);
}

.toggle-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
    transition: all var(--duration-fast) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
}

.toggle-switch.active::before {
    transform: translateX(24px);
}

/* Training Page Styles */
.training-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.training-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.course-card {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.course-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.course-card:hover::before {
    transform: scaleX(1);
}

.course-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.course-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.course-card:hover .course-icon {
    background: var(--primary-100);
    transform: scale(1.05);
}

.course-icon svg {
    width: 24px;
    height: 24px;
}

.course-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.course-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.course-progress {
    margin-bottom: var(--space-4);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 100%);
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--ease-in-out);
}

.progress-text {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
}

.course-actions {
    display: flex;
    gap: var(--space-2);
}

/* Responsive Design for All Pages */
@media (max-width: 1024px) {

    .stats-grid,
    .quick-actions-grid,
    .resource-categories,
    .handbook-sections,
    .benefits-grid,
    .settings-sections,
    .course-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .document-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {

    .projects-overview,
    .documents-overview,
    .helpdesk-overview,
    .resources-overview,
    .handbook-overview,
    .benefits-overview,
    .settings-overview,
    .training-overview {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .category-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        width: 100%;
    }

    .filter-select {
        width: 100%;
    }

    .stats-grid,
    .quick-actions-grid,
    .resource-categories,
    .handbook-sections,
    .benefits-grid,
    .settings-sections,
    .course-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .document-grid {
        grid-template-columns: 1fr;
    }

    .category-tabs {
        justify-content: center;
    }

    .tab-btn {
        flex: 1;
        text-align: center;
    }
}

/* Dark mode adjustments for all pages */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .document-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .resource-category,
[data-theme="dark"] .handbook-section,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .settings-section,
[data-theme="dark"] .course-card {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .document-card:hover,
[data-theme="dark"] .action-card:hover,
[data-theme="dark"] .resource-category:hover,
[data-theme="dark"] .handbook-section:hover,
[data-theme="dark"] .benefit-card:hover,
[data-theme="dark"] .settings-section:hover,
[data-theme="dark"] .course-card:hover {
    border-color: var(--primary-400);
}

[data-theme="dark"] .resource-item:hover,
[data-theme="dark"] .article-item:hover {
    background: var(--bg-hover-dark);
}

[data-theme="dark"] .toggle-switch {
    background: var(--gray-600);
}

[data-theme="dark"] .toggle-switch.active {
    background: var(--primary-600);
}

/* Additional Document Page Styles */
.document-content {
    flex: 1;
}

.document-content h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.document-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.document-meta {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

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

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.action-btn:hover {
    background: var(--primary-500);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-500);
}

.action-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.action-btn:hover svg {
    transform: scale(1.1);
}

/* Version History Styles */
.version-history {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.version-history:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.version-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.version-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.version-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.version-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    flex-shrink: 0;
}

.version-icon svg {
    width: 20px;
    height: 20px;
}

.version-content {
    flex: 1;
}

.version-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.version-content p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.version-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Upload Section Styles */
.upload-section {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 2px dashed var(--border-color);
    text-align: center;
    transition: all var(--duration-normal) var(--ease-in-out);
    cursor: pointer;
}

.upload-section:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.upload-content h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.upload-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.upload-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-bottom: var(--space-6);
}

.upload-info {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
}

.info-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.info-item svg {
    width: 20px;
    height: 20px;
    color: var(--primary-600);
}

.info-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.info-content p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
}

/* Additional Help Desk Styles */
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.ticket-item {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    cursor: pointer;
}

.ticket-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.ticket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.ticket-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.ticket-status {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.ticket-status.open {
    background: var(--warning-100);
    color: var(--warning-700);
}

.ticket-status.in-progress {
    background: var(--primary-100);
    color: var(--primary-700);
}

.ticket-status.resolved {
    background: var(--success-100);
    color: var(--success-700);
}

.ticket-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.ticket-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Additional Resources Styles */
.resource-search {
    margin-bottom: var(--space-6);
}

.search-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-widget);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* Additional Handbook Styles */
.handbook-search {
    margin-bottom: var(--space-6);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.search-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--duration-fast) var(--ease-in-out);
    cursor: pointer;
}

.search-result:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.result-icon {
    width: 32px;
    height: 32px;
    background: var(--primary-50);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    flex-shrink: 0;
}

.result-icon svg {
    width: 16px;
    height: 16px;
}

.result-content {
    flex: 1;
}

.result-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.result-excerpt {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Dark mode adjustments for new elements */
[data-theme="dark"] .action-btn {
    background: var(--bg-secondary-dark);
    border-color: var(--border-color);
    color: var(--text-secondary-dark);
}

[data-theme="dark"] .action-btn:hover {
    background: var(--primary-600);
    color: white;
}

[data-theme="dark"] .version-history,
[data-theme="dark"] .upload-section,
[data-theme="dark"] .ticket-item {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .upload-section:hover {
    background: var(--primary-900);
    border-color: var(--primary-400);
}

[data-theme="dark"] .version-item:hover,
[data-theme="dark"] .ticket-item:hover,
[data-theme="dark"] .search-result:hover {
    background: var(--bg-hover-dark);
}

[data-theme="dark"] .search-input {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
    color: var(--text-primary-dark);
}

[data-theme="dark"] .search-input:focus {
    border-color: var(--primary-400);
}

[data-theme="dark"] .info-item {
    background: var(--bg-elevated-dark);
    border-color: var(--border-color);
}

/* Enhanced Task System - AI Insights Visibility Fix */
.enhanced-task-system .ai-insights-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-task-system .ai-insights-grid {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-task-system .ai-insight-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.enhanced-task-system .ai-insight-card.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

/* Ensure insights are visible even during loading */
.enhanced-task-system.loading .ai-insights-section,
.enhanced-task-system.loading .ai-insights-grid,
.enhanced-task-system.loading .ai-insight-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Enhanced Task System - Task Controls Styling Fix */
.enhanced-task-system .task-controls {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    flex-wrap: wrap !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-4) !important;
    margin: var(--space-4) 0 !important;
    box-shadow: var(--shadow-sm) !important;
}

.enhanced-task-system .search-and-filters {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    flex: 1 !important;
    flex-wrap: wrap !important;
}

.enhanced-task-system .search-container {
    position: relative !important;
    min-width: 250px !important;
    flex: 1 !important;
    max-width: 400px !important;
}

.enhanced-task-system .task-search {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    outline: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.enhanced-task-system .task-search:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md) !important;
    transform: translateY(-1px) !important;
}

.enhanced-task-system .search-icon {
    position: absolute !important;
    left: var(--space-3) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--text-secondary) !important;
    pointer-events: none !important;
    transition: color var(--duration-normal) var(--ease-in-out) !important;
}

.enhanced-task-system .task-search:focus+.search-icon {
    color: var(--primary-500) !important;
}

.enhanced-task-system .filter-controls {
    display: flex !important;
    gap: var(--space-3) !important;
    flex-wrap: wrap !important;
}

.enhanced-task-system .enhanced-select {
    padding: var(--space-3) var(--space-4) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    min-width: 140px !important;
    outline: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.enhanced-task-system .enhanced-select:hover {
    border-color: var(--border-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.enhanced-task-system .enhanced-select:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px var(--primary-100) !important;
    transform: translateY(-1px) !important;
}

.enhanced-task-system .action-controls {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

.enhanced-task-system .view-toggle {
    display: flex !important;
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-1) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

.enhanced-task-system .view-btn {
    padding: var(--space-2) var(--space-3) !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

.enhanced-task-system .view-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px) !important;
}

.enhanced-task-system .view-btn.active {
    background: var(--primary-500) !important;
    color: var(--text-on-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.enhanced-task-system .enhanced-btn {
    padding: var(--space-3) var(--space-4) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    box-shadow: var(--shadow-sm) !important;
    outline: none !important;
}

.enhanced-task-system .enhanced-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--border-hover) !important;
}

.enhanced-task-system .enhanced-btn.primary {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
    border: none !important;
    box-shadow: var(--shadow-md) !important;
}

.enhanced-task-system .enhanced-btn.primary:hover {
    box-shadow: var(--shadow-xl) !important;
    transform: translateY(-2px) !important;
}

.enhanced-task-system .enhanced-btn.secondary {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.enhanced-task-system .enhanced-btn.secondary:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-hover) !important;
}

.enhanced-task-system .enhanced-btn svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform var(--duration-normal) var(--ease-in-out) !important;
}

.enhanced-task-system .enhanced-btn:hover svg {
    transform: scale(1.1) !important;
}

/* Knowledge Hub - Search and Controls Styling */
.knowledge-hub .hub-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    margin-bottom: var(--space-6) !important;
    padding: var(--space-4) !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-sm) !important;
}

.knowledge-hub .hub-title {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    font-size: var(--font-size-xl) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
}

.knowledge-hub .hub-title svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--primary-500) !important;
}

.knowledge-hub .hub-actions {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

.knowledge-hub .search-container {
    position: relative !important;
    min-width: 300px !important;
    max-width: 500px !important;
}

.knowledge-hub .search-input {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    outline: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.knowledge-hub .search-input:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md) !important;
    transform: translateY(-1px) !important;
}

.knowledge-hub .search-input::placeholder {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
}

.knowledge-hub .search-icon {
    position: absolute !important;
    left: var(--space-3) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--text-secondary) !important;
    pointer-events: none !important;
    transition: color var(--duration-normal) var(--ease-in-out) !important;
}

.knowledge-hub .search-input:focus+.search-icon {
    color: var(--primary-500) !important;
}

.knowledge-hub .btn-icon.small {
    padding: var(--space-2) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--shadow-sm) !important;
}

.knowledge-hub .btn-icon.small:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.knowledge-hub .btn-icon.small svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform var(--duration-normal) var(--ease-in-out) !important;
}

.knowledge-hub .btn-icon.small:hover svg {
    transform: scale(1.1) !important;
}

.knowledge-hub .hub-filters {
    margin-bottom: var(--space-6) !important;
    padding: var(--space-4) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-sm) !important;
}

.knowledge-hub .filter-chips {
    display: flex !important;
    gap: var(--space-2) !important;
    flex-wrap: wrap !important;
}

.knowledge-hub .filter-chip {
    padding: var(--space-2) var(--space-3) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Modern CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Performance optimizations */
* {
    /* Optimize for performance */
    will-change: auto;
}

/* Reduce animation complexity for better performance */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mobile responsive behavior */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .dashboard-row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .dashboard-item {
        padding: var(--space-4);
    }
}

@media (max-width: 480px) {
    .dashboard-grid {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .dashboard-row {
        gap: var(--space-3);
    }
}

/* ===== END DASHBOARD GRID LAYOUT ===== */

/* ===== UTILITY CLASSES ===== */
.hidden {
    display: none !important;
}

/* Base styles */
html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    font-variation-settings: normal;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg-base);
    color: var(--text-primary);
    transition: background-color var(--duration-normal) var(--ease-in-out),
        color var(--duration-normal) var(--ease-in-out);
    overflow-x: hidden;
}

/* Improved focus styles */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--border-focus);
}

/* Dark mode specific component styles */
[data-theme="dark"] {

    .dashboard-item:hover {
        border-color: var(--border-hover);
        box-shadow: var(--shadow-lg);
    }

    /* Button styles */
    .btn.primary {
        background: var(--gradient-primary);
        color: var(--text-on-primary);
    }

    .btn.secondary {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .btn.secondary:hover {
        background: var(--bg-hover);
        border-color: var(--border-hover);
    }

    /* Input styles */
    input,
    textarea,
    select {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 2px var(--border-focus);
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--text-muted);
    }

    /* Table styles */
    table {
        border-color: var(--border-color);
    }

    th {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }

    td {
        border-color: var(--border-color);
    }

    tr:hover {
        background: var(--bg-hover);
    }

    /* Modal and overlay styles */
    .modal {
        background: var(--bg-elevated);
        border-color: var(--border-color);
        box-shadow: var(--shadow-xl);
    }

    .overlay {
        background: var(--bg-overlay);
        backdrop-filter: blur(8px);
    }

    /* Glass effect components */
    .glass-card {
        background: var(--glass-bg);
        border-color: var(--glass-border);
        box-shadow: var(--glass-shadow);
    }

    /* Code and pre blocks */
    code,
    pre {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    /* Scrollbar styles */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--bg-secondary);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--border-hover);
    }

    /* Selection styles */
    ::selection {
        background: var(--primary-500);
        color: var(--text-on-primary);
    }
}

/* Enhanced Layout System */
.dashboard {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-secondary) 100%);
}

.main-container {
    display: flex;
    flex: 1;
    min-height: calc(100vh - 72px);
    /* Subtract header height */
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -100px;
    left: 6px;
    background: var(--primary-600);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    z-index: 1000;
    transition: top var(--duration-normal) var(--ease-in-out);
    display: none !important;
    /* Temporarily hide skip link */
    pointer-events: none;
    opacity: 0;
}

.skip-link:focus {
    top: 6px;
    display: block !important;
    pointer-events: auto;
    opacity: 1;
}

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

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

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    min-width: fit-content;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: var(--font-size-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
}

.logo:hover .logo-icon {
    transform: rotate(5deg) scale(1.1);
    box-shadow: var(--shadow-xl);
}

.logo-text {
    font-weight: 700;
    font-size: var(--font-size-xl);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Enhanced Main Content */
.main-content {
    flex: 1;
    padding: var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    overflow-y: hidden;
}

/* Enhanced Quick Actions */
.quick-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* Pulse Animation */
.pulse-animation {
    animation: pulse 2s infinite;
}

/* Dashboard item specific styles - core layout kept separate from grid */

/* AI-Powered Insights Section */
.ai-insights-section {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: block !important;
    /* Ensure section is always visible */
}

.ai-insights-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--success-500), var(--warning-500));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.insights-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-600), var(--success-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Override for Today's Insights to ensure white text */
.quick-insights .insights-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* NUCLEAR OPTION - Override ALL btn-icon hover effects for Today's Insights */
.quick-insights .insights-title .btn-icon:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: white !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2) !important;
}

.quick-insights .insights-title .btn-icon:hover svg,
.quick-insights .insights-title .btn-icon:hover path {
    color: white !important;
    stroke: white !important;
    fill: none !important;
}

/* Override CSS variables for the insights section */
.quick-insights .insights-title .btn-icon {
    --primary-50: rgba(255, 255, 255, 0.1) !important;
    --primary-300: rgba(255, 255, 255, 0.3) !important;
    --primary-600: white !important;
    --text-primary: white !important;
    --bg-hover: rgba(255, 255, 255, 0.2) !important;
}

.ai-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    min-height: 200px;
    /* Ensure grid has minimum height */
}

.ai-insight-card {}

.ai-insight-card.recommendation::before {
    background: var(--primary-500);
}

.ai-insight-card.prediction::before {
    background: var(--success-500);
}

.ai-insight-card.optimization::before {
    background: var(--warning-500);
}

.insight-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.insight-meta {
    flex: 1;
}

.insight-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

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

.confidence-bar {
    width: 60px;
    height: 4px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-500), var(--primary-500));
    border-radius: var(--radius-full);
    transition: width var(--duration-normal);
}

.confidence-text {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.impact-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.impact-badge.high {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-600);
}

.impact-badge.medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-600);
}

.impact-badge.low {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-600);
}

.insight-description {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.insight-actions {
    display: flex;
    gap: var(--space-2);
}

.insight-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
}

.insight-action-btn.primary {
    background: var(--gradient-primary);
    color: white;
}

.insight-action-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.insight-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.insight-action-btn svg {
    width: 14px;
    height: 14px;
}

/* AI Quick Actions Panel */
.ai-quick-actions-panel {
    position: fixed;
    right: -400px !important;
    top: 50%;
    transform: translateY(-50%);
    width: 380px;
    max-height: 80vh;
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-color);
    z-index: 9999;
    transition: right var(--duration-normal) var(--ease-spring);
    overflow: hidden;
    pointer-events: none;
    margin-right: 0;
    opacity: 0;
    visibility: hidden;
}

.ai-quick-actions-panel.active {
    right: 0 !important;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.close-panel {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    transition: all var(--duration-fast);
}

.close-panel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.close-panel svg {
    width: 18px;
    height: 18px;
}

.panel-content {
    padding: var(--space-4);
    max-height: calc(80vh - 80px);
    overflow-y: auto;
}

/* Smart Action Items */
.smart-action-item {
    margin-bottom: var(--space-3);
}

.smart-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    text-align: left;
}

.smart-action-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--primary-200);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.action-icon {
    font-size: var(--font-size-2xl);
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-50);
    border-radius: var(--radius-xl);
    color: var(--primary-600);
}

[data-theme="dark"] .action-icon {
    background: var(--primary-900);
    color: var(--primary-300);
}

.action-content {
    flex: 1;
}

.action-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.action-description {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

/* AI Notifications */
.ai-notification {
    position: fixed;
    top: var(--space-6);
    right: -400px;
    max-width: 400px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    z-index: 10000;
    transition: right var(--duration-normal) var(--ease-spring);
    overflow: hidden;
}

.ai-notification.show {
    right: var(--space-6);
}

.ai-notification.success {
    border-left: 4px solid var(--success-500);
}

.ai-notification.warning {
    border-left: 4px solid var(--warning-500);
}

.ai-notification.error {
    border-left: 4px solid var(--error-500);
}

.ai-notification.info {
    border-left: 4px solid var(--primary-500);
}

.notification-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-4);
}

.notification-message {
    flex: 1;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
    transition: all var(--duration-fast);
}

.notification-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.notification-close svg {
    width: 16px;
    height: 16px;
}

/* Enhanced Task Form AI Suggestions */
.ai-suggestions-form {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: var(--primary-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--primary-200);
}

[data-theme="dark"] .ai-suggestions-form {
    background: var(--primary-900);
    border-color: var(--primary-700);
}

.ai-suggestions-form h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--primary-700);
    margin: 0 0 var(--space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

[data-theme="dark"] .ai-suggestions-form h3 {
    color: var(--primary-300);
}

.ai-suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: linear-gradient(135deg, var(--component-bg) 0%, rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(15px);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    border: 1px solid var(--primary-100);
}

[data-theme="dark"] .ai-suggestion-item {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.9) 0%, rgba(17, 24, 39, 0.9) 100%);
    border-color: var(--primary-800);
}

.suggestion-icon {
    font-size: var(--font-size-lg);
    min-width: 24px;
}

.suggestion-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

.apply-suggestion-btn {
    background: var(--primary-500);
    color: white;
    border: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.apply-suggestion-btn:hover {
    background: var(--primary-600);
    transform: scale(1.02);
}

/* ===== UNIFIED RESPONSIVE DESIGN SYSTEM ===== */

/* Global Mobile Optimizations */
@media (max-width: 480px) {

    /* Small phones - Extra compact layout */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
        padding: var(--space-2) !important;
    }

    .dashboard-item {
        margin: 0 !important;
        border-radius: var(--radius-lg) !important;
    }

    .dashboard-item>* {
        padding: var(--space-3) !important;
    }

    /* Improve text sizing on small screens */
    .welcome-title {
        font-size: var(--font-size-xl) !important;
    }

    .welcome-subtitle {
        font-size: var(--font-size-base) !important;
    }

    /* Compact stats layout */
    .welcome-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-2) !important;
    }

    .stat-item {
        padding: var(--space-3) !important;
    }

    .stat-number {
        font-size: var(--font-size-xl) !important;
    }
}

@media (max-width: 640px) {

    /* Large phones - Optimized mobile layout */
    /* Sidebar mobile styles handled in sidebar.css and mobile-nav.css */
    .main-container {
        flex-direction: column !important;
    }

    .main-content {
        order: 1 !important;
        padding: var(--space-3) !important;
    }

    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    /* Mobile-optimized welcome section */
    .welcome-section {
        padding: var(--space-4) !important;
        margin-bottom: var(--space-4) !important;
    }

    .welcome-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }

    .quick-actions {
        flex-direction: column !important;
        gap: var(--space-3) !important;
    }

    .quick-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 768px) {

    /* Tablets - Enhanced mobile experience */
    .header {
        padding: 0 var(--space-4) !important;
    }

    .header-right {
        gap: var(--space-2) !important;
    }

    .action-button {
        padding: var(--space-2) !important;
    }

    /* Hide less critical elements on tablets */
    .user-dropdown .user-details {
        display: none !important;
    }

    /* Optimize component grids */
    .kpi-grid,
    .goals-grid,
    .news-grid,
    .pinned-grid,
    .insights-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    /* Better modal behavior */
    .modal-content {
        width: calc(100vw - var(--space-8)) !important;
        max-width: none !important;
        margin: var(--space-4) !important;
    }
}

@media (max-width: 1024px) {
    /* Small laptops - Compact desktop layout */
    /* Sidebar mobile styles handled in mobile-optimizations.css */

    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-5) !important;
    }

    .dashboard-item.full-width {
        grid-column: 1 !important;
    }

    /* Adjust component layouts */
    .kpi-grid,
    .goals-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Compact navigation */
    .nav-text {
        font-size: var(--font-size-sm) !important;
    }
}

/* Landscape orientation optimizations */
@media (orientation: landscape) and (max-height: 600px) {
    .welcome-section {
        padding: var(--space-4) var(--space-6) !important;
    }

    /* Sidebar landscape styles handled in sidebar.css */
}

/* High-DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .logo-icon,
    .user-avatar,
    .stat-item {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* Touch device optimizations */
@media (pointer: coarse) {

    /* Larger touch targets */
    button,
    .btn,
    .nav-link,
    .action-button {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Better spacing for touch */
    .quick-actions {
        gap: var(--space-4) !important;
    }

    .nav-item {
        margin-bottom: var(--space-1) !important;
    }
}

/* Container queries for modern browsers */
@container (max-width: 400px) {
    .dashboard-item {
        border-radius: var(--radius-md) !important;
        padding: var(--space-3) !important;
    }
}

/* Comprehensive fix for content cut-off issues */
.dashboard-item .insight-content::before,
.dashboard-item .recommendation-content::before,
.dashboard-item .frequently-used-content::before,
.dashboard-item .quick-access-content::before,
.dashboard-item .action-content::before,
.dashboard-item .category-content::before,
.dashboard-item .handbook-content::before,
.dashboard-item .settings-content::before,
.dashboard-item .version-content::before,
.dashboard-item .ticket-content::before,
.dashboard-item .space-content::before,
.dashboard-item .resource-content::before,
.dashboard-item .event-content::before,
.dashboard-item .member-content::before,
.dashboard-item .team-content::before,
.dashboard-item .course-content::before,
.dashboard-item .benefit-content::before,
.dashboard-item .achievement-content::before,
.dashboard-item .milestone-content::before,
.dashboard-item .user-content::before,
.dashboard-item .policy-content::before,
.dashboard-item .value-content::before,
.dashboard-item .insight-content::before,
.dashboard-item .recommendation-content::before,
.dashboard-item .frequently-used-content::before {
    display: none !important;
}

/* Comprehensive fix for content cut-off issues */
.dashboard-item,
.dashboard-item>*,
.dashboard-item * {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Force all dashboard content to expand */
.dashboard-item,
.dashboard-item>*,
.dashboard-item *,
.dashboard-item *>* {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: auto !important;
}

/* Remove any height constraints from specific components */
company-news,
team-spotlight,
analytics-dashboard,
knowledge-hub,
weather-widget,
enhanced-interactive-poll,
company-culture-showcase,
collaboration-hub,
office-visualizer {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: auto !important;
}

/* Specific fixes for common components that might have height constraints */
.insight-card,
.value-card,
.event-card,
.stat-card,
.achievement-card,
.recommendation-card,
.frequently-used-item,
.quick-access-link,
.action-card,
.resource-category,
.handbook-section,
.settings-section,
.category-card,
.version-item,
.ticket-card,
.space-card,
.resource-item,
.event-item,
.member-spotlight,
.kanban-column,
.timeline-project,
.settings-card,
.profile-section,
.info-item,
.contact-link,
.skill-tag,
.matrix-row,
.avatar-sm,
.avatar-md,
.avatar-lg,
.avatar-xl,
.avatar-2xl,
.avatar-3xl,
.avatar-4xl,
.avatar-5xl,
.avatar-6xl,
.avatar-7xl,
.avatar-8xl,
.avatar-9xl,
.avatar-10xl,
.avatar-11xl,
.avatar-12xl,
.avatar-13xl,
.avatar-14xl,
.avatar-15xl,
.avatar-16xl,
.avatar-17xl,
.avatar-18xl,
.avatar-19xl,
.avatar-20xl,
.avatar-21xl,
.avatar-22xl,
.avatar-23xl,
.avatar-24xl,
.avatar-25xl,
.avatar-26xl,
.avatar-27xl,
.avatar-28xl,
.avatar-29xl,
.avatar-30xl,
.avatar-31xl,
.avatar-32xl,
.avatar-33xl,
.avatar-34xl,
.avatar-35xl,
.avatar-36xl,
.avatar-37xl,
.avatar-38xl,
.avatar-39xl,
.avatar-40xl,
.avatar-41xl,
.avatar-42xl,
.avatar-43xl,
.avatar-44xl,
.avatar-45xl,
.avatar-46xl,
.avatar-47xl,
.avatar-48xl,
.avatar-49xl,
.avatar-50xl,
.avatar-51xl,
.avatar-52xl,
.avatar-53xl,
.avatar-54xl,
.avatar-55xl,
.avatar-56xl,
.avatar-57xl,
.avatar-58xl,
.avatar-59xl,
.avatar-60xl,
.avatar-61xl,
.avatar-62xl,
.avatar-63xl,
.avatar-64xl,
.avatar-65xl,
.avatar-66xl,
.avatar-67xl,
.avatar-68xl,
.avatar-69xl,
.avatar-70xl,
.avatar-71xl,
.avatar-72xl,
.avatar-73xl,
.avatar-74xl,
.avatar-75xl,
.avatar-76xl,
.avatar-77xl,
.avatar-78xl,
.avatar-79xl,
.avatar-80xl,
.avatar-81xl,
.avatar-82xl,
.avatar-83xl,
.avatar-84xl,
.avatar-85xl,
.avatar-86xl,
.avatar-87xl,
.avatar-88xl,
.avatar-89xl,
.avatar-90xl,
.avatar-91xl,
.avatar-92xl,
.avatar-93xl,
.avatar-94xl,
.avatar-95xl,
.avatar-96xl,
.avatar-97xl,
.avatar-98xl,
.avatar-99xl,
.avatar-100xl {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Fix for any remaining overflow hidden issues */
.dashboard-item * {
    overflow: visible !important;
}

/* Ensure all content within dashboard items can expand */
.dashboard-item>*>* {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Fix for any scrollable containers that might be cutting off content */
.dashboard-item .scrollable,
.dashboard-item .scroll-container,
.dashboard-item .overflow-container {
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure all text content is fully visible */
.dashboard-item p,
.dashboard-item h1,
.dashboard-item h2,
.dashboard-item h3,
.dashboard-item h4,
.dashboard-item h5,
.dashboard-item h6,
.dashboard-item span,
.dashboard-item div {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}

/* Fix for any flex containers that might be constraining height */
.dashboard-item .flex,
.dashboard-item .flex-container,
.dashboard-item .flex-wrapper {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Ensure all grid items can expand */
.dashboard-item .grid,
.dashboard-item .grid-container,
.dashboard-item .grid-wrapper {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Fix for any absolute positioned elements that might be cut off */
.dashboard-item .absolute,
.dashboard-item .relative,
.dashboard-item .fixed {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Comprehensive fix for all possible content containers */
.dashboard-item *,
.dashboard-item *::before,
.dashboard-item *::after {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.dashboard-item .command-item:hover,
.dashboard-item .search-result:hover,
.dashboard-item .result-item:hover,
.dashboard-item .placeholder-item:hover,
.dashboard-item .filter-chip:hover,
.dashboard-item .range-selector:hover,
.dashboard-item .metric-card:hover,
.dashboard-item .chart-container:hover,
.dashboard-item .activity-item:hover,
.dashboard-item .goal-item:hover,
.dashboard-item .achievement-item:hover,
.dashboard-item .milestone-item:hover,
.dashboard-item .level-badge:hover,
.dashboard-item .points-display:hover,
.dashboard-item .streak-item:hover,
.dashboard-item .next-achievement:hover,
.dashboard-item .achievement-notification:hover,
.dashboard-item .level-up-notification:hover,
.dashboard-item .connection-status:hover,
.dashboard-item .document-info:hover,
.dashboard-item .space-info:hover,
.dashboard-item .article-content:hover,
.dashboard-item .insight-content:hover,
.dashboard-item .recommendation-content:hover,
.dashboard-item .frequently-used-content:hover,
.dashboard-item .quick-access-content:hover,
.dashboard-item .action-content:hover,
.dashboard-item .category-content:hover,
.dashboard-item .handbook-content:hover,
.dashboard-item .settings-content:hover,
.dashboard-item .version-content:hover,
.dashboard-item .ticket-content:hover,
.dashboard-item .space-content:hover,
.dashboard-item .resource-content:hover,
.dashboard-item .event-content:hover,
.dashboard-item .member-content:hover,
.dashboard-item .team-content:hover,
.dashboard-item .course-content:hover,
.dashboard-item .benefit-content:hover,
.dashboard-item .achievement-content:hover,
.dashboard-item .milestone-content:hover,
.dashboard-item .user-content:hover,
.dashboard-item .policy-content:hover,
.dashboard-item .value-content:hover,
.dashboard-item .insight-content:hover,
.dashboard-item .recommendation-content:hover,
.dashboard-item .frequently-used-content:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Enhanced Widgets */
.widget {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
}

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

.widget-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
}

.widget-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.widget-action {
    padding: var(--space-2);
    color: var(--text-secondary);
    border: none;
    background: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.widget-action:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.widget-action svg {
    width: 18px;
    height: 18px;
}

/* Quick Access Widget */
.quick-access-widget {
    height: 100%;
}

.quick-access-grid {
    padding: var(--space-6);
    display: grid;
    gap: var(--space-4);
}

.quick-access-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid transparent;
}

.quick-access-link:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    transform: translateX(4px);
}

.quick-access-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.quick-access-icon svg {
    width: 24px;
    height: 24px;
}

.quick-access-link:hover .quick-access-icon {
    transform: scale(1.1);
}

.quick-access-icon.document {
    color: var(--primary-600);
    background: var(--primary-50);
}

.quick-access-icon.meeting {
    color: var(--warning-600);
    background: var(--warning-100);
}

.quick-access-icon.project {
    color: var(--success-600);
    background: var(--success-100);
}

.quick-access-icon.resource {
    color: var(--error-600);
    background: var(--error-100);
}

.quick-access-content {
    flex: 1;
}

.quick-access-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-lg);
}

.quick-access-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Updates Section */
.updates-section {
    margin-top: var(--space-8);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-6);
}

.update-card {}

/* Responsive Design */
@media (max-width: 1200px) {
    .dashboard-grid {
        max-width: 100%;
        padding: 0 var(--space-4);
    }
}

@media (max-width: 1024px) {
    .dashboard-grid {
        flex-direction: column;
        gap: var(--space-4);
    }

    .dashboard-item {
        margin-bottom: 0;
    }

    .welcome-header {
        flex-direction: column;
        gap: var(--space-6);
    }

    .welcome-stats {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .dashboard-grid {
        padding: 0 var(--space-2);
        gap: var(--space-3);
    }

    .dashboard-item {
        margin-bottom: 0;
    }

    .main-content {
        padding: var(--space-4);
    }

    .welcome-title {
        font-size: var(--font-size-xl);
        gap: var(--space-3);
    }

    .greeting-text {
        font-size: var(--font-size-base);
    }

    .welcome-title .user-name {
        font-size: 2.5rem !important;
    }

    .welcome-emoji {
        font-size: var(--font-size-xl);
    }

    .quick-actions {
        justify-content: center;
    }

    .btn {
        flex: 1;
        justify-content: center;
    }

    .updates-grid {
        grid-template-columns: 1fr;
    }

    .welcome-stats {
        gap: var(--space-4);
    }

    .stat-item {
        min-width: 100px;
        padding: var(--space-3);
    }
}

/* Dark theme enhancements */
[data-theme="dark"] .quick-access-link:hover {
    background: var(--bg-hover-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .update-card.featured {
    background: linear-gradient(135deg, var(--bg-elevated-dark) 0%, var(--primary-900) 100%);
}

/* Theme transition */
.theme-transition,
.theme-transition *,
.theme-transition *:before,
.theme-transition *:after {
    transition: all 0.3s ease !important;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .pulse-animation {
        animation: none;
    }
}

/* High contrast mode support */
@media (forced-colors: active) {

    .btn,
    .nav-link,
    .quick-access-link {
        border: 1px solid currentColor;
    }

    .widget,
    .update-card {
        border: 1px solid currentColor;
    }
}

/* Enhanced Analytics Dashboard Styles */
.analytics-dashboard {
    background: var(--bg-widget);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.analytics-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            var(--primary-500) 0%,
            var(--success-500) 50%,
            var(--primary-600) 100%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.analytics-dashboard:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-200);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.dashboard-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background-color: transparent !important;
}

.dashboard-title::before {
    content: '';
    font-size: var(--font-size-3xl);
    filter: none;
    -webkit-text-fill-color: initial;
}

.dashboard-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.range-selector {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    outline: none;
}

.range-selector:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
}

.range-selector:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.metric-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-500), var(--primary-400));
    transform: scaleY(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.metric-card:hover::before,
.metric-card.highlighted::before {
    transform: scaleY(1);
}

.metric-card.highlighted {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.metric-value {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.metric-value span:first-child {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.metric-trend {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-trend.positive {
    color: var(--success-700);
    background: var(--success-50);
    border: 1px solid var(--success-200);
}

.metric-trend.negative {
    color: var(--error-700);
    background: var(--error-50);
    border: 1px solid var(--error-200);
}

.metric-trend svg {
    width: 12px;
    height: 12px;
}

.metric-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.metric-insight {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.chart-container {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--success-500));
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.chart-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.chart-container:hover::before {
    transform: scaleX(1);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.chart-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

.chart-legend {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.legend-color.completed {
    background: var(--primary-500);
}

.legend-color.in-progress {
    background: var(--warning-500);
}

.chart {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Insights Section */
.insights-section {
    margin-bottom: var(--space-8);
}

.insights-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-6) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.insights-title::before {
    content: '';
    font-size: var(--font-size-xl);
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
}

.insight-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    display: flex;
    gap: var(--space-4);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.insight-card.positive {
    border-left: 4px solid var(--success-500);
}

.insight-card.warning {
    border-left: 4px solid var(--warning-500);
}

.insight-card.info {
    border-left: 4px solid var(--primary-500);
}

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

.insight-card.expanded {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.insight-expanded {
    opacity: 0;
    animation: expandIn 0.3s ease-out forwards;
}

.insight-icon {
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.insight-card.positive .insight-icon {
    background: var(--success-50);
    color: var(--success-600);
}

.insight-card.warning .insight-icon {
    background: var(--warning-50);
    color: var(--warning-600);
}

.insight-card.info .insight-icon {
    background: var(--primary-50);
    color: var(--primary-600);
}

.insight-icon svg {
    width: 24px;
    height: 24px;
}

.insight-content h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.insight-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Activity List */
.activity-list {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease-spring);
}

.activity-list:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.activity-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.activity-title::before {
    content: '';
    font-size: var(--font-size-xl);
}

.activity-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid transparent;
}

.activity-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    transform: translateX(4px);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.activity-icon.task {
    background: var(--success-50);
    color: var(--success-600);
}

.activity-icon.project {
    background: var(--primary-50);
    color: var(--primary-600);
}

.activity-icon.meeting {
    background: var(--warning-50);
    color: var(--warning-600);
}

.activity-icon.update {
    background: var(--gray-100);
    color: var(--gray-600);
}

.activity-icon svg {
    width: 20px;
    height: 20px;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-text {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.activity-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.activity-time {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.activity-time svg {
    width: 12px;
    height: 12px;
}

.activity-user {
    font-weight: 500;
}

/* Refresh Button Enhancement */
#refreshAnalytics {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: var(--bg-widget);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
}

#refreshAnalytics:hover {
    background: var(--primary-50);
    border-color: var(--primary-200);
    color: var(--primary-600);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

#refreshAnalytics:active {
    transform: scale(0.95);
}

#refreshAnalytics svg {
    width: 20px;
    height: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .analytics-dashboard {
        padding: var(--space-6);
    }

    .charts-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-3);
    }

    .insights-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-3);
    }
}

@media (max-width: 768px) {
    .analytics-dashboard {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .dashboard-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
        margin-bottom: var(--space-6);
    }

    .dashboard-controls {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-title {
        font-size: var(--font-size-2xl);
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .metric-card {
        padding: var(--space-4);
    }

    .metric-value span:first-child {
        font-size: var(--font-size-2xl);
    }

    .charts-grid,
    .insights-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .chart-container,
    .activity-list {
        padding: var(--space-4);
    }

    .chart {
        height: 250px;
    }

    .insight-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-4);
    }

    .activity-item {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .activity-meta {
        justify-content: center;
    }
}

/* Mobile responsiveness for color picker */
@media (max-width: 768px) {
    .color-picker-dropdown {
        right: 10px;
        min-width: calc(100vw - 20px);
        max-width: 320px;
    }

    .color-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-2);
    }

    .color-option {
        width: 50px;
        height: 50px;
    }
}

/* Ensure all icons in welcome section use theme colors */
.welcome-section svg,
.welcome-section .btn-icon,
html body .welcome-section svg,
body .welcome-section svg,
#app .welcome-section svg,
.dashboard .welcome-section svg,
.main-content .welcome-section svg {
    color: var(--welcome-text-muted) !important;
    stroke: var(--welcome-text-muted) !important;
}

/* CRITICAL FIX: Override hardcoded purple colors in event elements */
.event-time,
.welcome-section .event-time,
.upcoming-events .event-time,
.events-list .event-time,
html body .welcome-section .event-time,
body .welcome-section .event-time,
#app .welcome-section .event-time,
.dashboard .welcome-section .event-time,
.main-content .welcome-section .event-time,
html body .event-time,
body .event-time,
#app .event-time,
.dashboard .event-time,
.main-content .event-time {
    color: var(--welcome-text-muted) !important;
    background: var(--primary-500) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-1) var(--space-2) !important;
    font-weight: 600 !important;
    font-size: var(--font-size-xs) !important;
}

/* Fix event participants colors */
.event-participants,
.welcome-section .event-participants,
.upcoming-events .event-participants,
.events-list .event-participants,
html body .welcome-section .event-participants,
body .welcome-section .event-participants,
#app .welcome-section .event-participants,
.dashboard .welcome-section .event-participants,
.main-content .welcome-section .event-participants {
    color: var(--welcome-text-muted) !important;
}

/* Fix event participants SVG icons */
.event-participants svg,
.welcome-section .event-participants svg,
.upcoming-events .event-participants svg,
.events-list .event-participants svg,
html body .welcome-section .event-participants svg,
body .welcome-section .event-participants svg,
#app .welcome-section .event-participants svg,
.dashboard .welcome-section .event-participants svg,
.main-content .welcome-section .event-participants svg {
    stroke: var(--welcome-text-muted) !important;
    color: var(--welcome-text-muted) !important;
}

/* Fix event titles to use proper white color on gradient background */
.event-title,
.welcome-section .event-title,
.upcoming-events .event-title,
.events-list .event-title,
html body .welcome-section .event-title,
body .welcome-section .event-title,
#app .welcome-section .event-title,
.dashboard .welcome-section .event-title,
.main-content .welcome-section .event-title {
    color: var(--welcome-text) !important;
}

/* Enhanced Calendar Quick Info */
.calendar-quick-info {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.quick-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.quick-stat:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
}

.quick-stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-left: var(--space-1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.custom-color {
    margin-bottom: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}

.custom-color label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    font-weight: 500;
}

.custom-color input[type="color"] {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.custom-color input[type="color"]:hover {
    box-shadow: var(--shadow-md);
    transform: scale(1.02);
}

.color-info {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    font-style: italic;
}

/* Theme System loaded from theme-system.css */
}

/* Theme transition application */
*:not(script):not(style):not(link) {
    transition: background-color var(--theme-transition-duration) var(--theme-transition-timing),
        color var(--theme-transition-duration) var(--theme-transition-timing),
        border-color var(--theme-transition-duration) var(--theme-transition-timing),
        transform var(--theme-transition-duration) var(--theme-transition-timing);
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

/* Reset transitions during theme changes */
.theme-transition {
    transition: none !important;
}

.theme-transition * {
    transition: none !important;
}

/* Force hardware acceleration for smoother transitions */
body {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Dark mode adjustments for color picker */
/* Color picker dark mode styles moved to components/color-picker.css */

/*  CONTEST-WINNING MICRO-INTERACTIONS */

/* Enhanced Stat Card Animations */
.welcome-stats .stat-item {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.welcome-stats .stat-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: rotate 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.welcome-stats .stat-item:hover::before {
    opacity: 1;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Smart Button Morphing */
.quick-actions .btn {
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quick-actions .btn:hover {
    transform: translateZ(20px) rotateX(5deg) rotateY(5deg);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Magnetic Effect for Interactive Elements */
.stat-item,
.event-card,
.recommendation-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.5);
}

50% {
    transform: scale(1.2);
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.3);
}

75% {
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.5);
}
}

/* Staggered Entrance Animations */
.welcome-stats .stat-item {
    animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    transform: translateY(30px);
}

.welcome-stats .stat-item:nth-child(1) {
    animation-delay: 0.1s;
}

.welcome-stats .stat-item:nth-child(2) {
    animation-delay: 0.2s;
}

.welcome-stats .stat-item:nth-child(3) {
    animation-delay: 0.3s;
}

.welcome-stats .stat-item:nth-child(4) {
    animation-delay: 0.4s;
}

.welcome-stats .stat-item:nth-child(5) {
    animation-delay: 0.5s;
}

.welcome-stats .stat-item:nth-child(6) {
    animation-delay: 0.6s;
}

/* slideInUp animation consolidated below to eliminate duplication */

/* Parallax Scroll Effect */
.welcome-section {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.welcome-section .particle {
    transform: translateZ(50px);
}

.welcome-section .floating-icon {
    transform: translateZ(30px);
}

.welcome-section .sparkle {
    transform: translateZ(20px);
}

/* Text Reveal Animation */
.welcome-title,
.welcome-subtitle {
    animation: textReveal 1s ease-out forwards;
    opacity: 0;
}

.welcome-subtitle {
    animation-delay: 0.3s;
}


/* Morphing Icon Animations */
.welcome-section svg {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.welcome-section .btn:hover svg {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Liquid Button Effect */
.quick-actions .btn.primary {
    background: linear-gradient(45deg, var(--primary-500), var(--primary-600), var(--primary-500));
    background-size: 300% 300%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Enhanced Focus Ring Animation */
*:focus-visible {
    animation: focusPulse 0.6s ease-out;
}

@keyframes focusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(99, 102, 241, 0.3);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(99, 102, 241, 0);
    }
}

/* Typewriter Effect for Dynamic Content */
.ai-insight {
    overflow: hidden;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    animation:
        typing 3.5s steps(40, end),
        blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}


.recommendation-card::after {
    content: attr(data-priority);
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--primary-500);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.recommendation-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* Event Card Time Badge Animation */
.event-time {
    position: relative;
    overflow: hidden;
}

.event-time::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 0.6s ease;
}

.event-card:hover .event-time::before {
    left: 100%;
}

/* Smart Loading States */
.welcome-section.loading {
    position: relative;
}

.welcome-section.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%),
        var(--welcome-bg-start);
    animation: shimmer 2s infinite;
}

/* Performance Optimized Particles */
.welcome-section .particle {
    will-change: transform;
    contain: layout style paint;
}

/* Smooth State Transitions */
.welcome-section * {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interactive Glow Effects */
.stat-item:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

.quick-actions .btn:active {
    transform: scale(0.96) translateY(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Smart Hover Zones */
.welcome-section .hover-zone {
    position: relative;
    transition: all 0.3s ease;
}

.welcome-section .hover-zone::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    background: transparent;
    transition: background 0.3s ease;
    z-index: -1;
}

.welcome-section .hover-zone:hover::before {
    background: rgba(255, 255, 255, 0.05);
}

/* Welcome Header - Enhanced typography */

@media (max-width: 480px) {
    .analytics-dashboard {
        padding: var(--space-3);
    }

    .dashboard-title {
        font-size: var(--font-size-xl);
        flex-direction: column;
        gap: var(--space-2);
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        padding: var(--space-3);
    }

    .chart-container,
    .activity-list {
        padding: var(--space-3);
    }

    .chart {
        height: 200px;
    }
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.metric-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

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

.metric-card:hover::before {
    opacity: 1;
}

.metric-value {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.metric-trend {
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.metric-trend.positive {
    background: var(--success-100);
    color: var(--success-700);
}

.metric-trend.negative {
    background: var(--error-100);
    color: var(--error-700);
}

.metric-trend.neutral {
    background: var(--gray-100);
    color: var(--gray-700);
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: var(--space-2);
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.chart-container {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
}

.chart-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.chart-header {
    margin-bottom: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.chart-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: var(--space-1) 0 0 0;
}

.chart {
    height: 200px;
    position: relative;
    display: flex;
    align-items: end;
    gap: var(--space-2);
    padding: var(--space-4) 0;
}

.chart-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--primary-500) 0%, var(--primary-600) 100%);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    min-width: 20px;
}

.chart-bar:hover {
    transform: scaleY(1.05);
    box-shadow: var(--shadow-md);
}

.chart-bar::after {
    content: attr(data-value);
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-elevated);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.chart-bar:hover::after {
    opacity: 1;
}

.chart-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border-color);
}

.chart-label {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 700;
    text-align: center;
    min-width: 40px;
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

.activity-list {
    padding: var(--space-6);
    border-top: 1px solid var(--border-color);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.activity-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid transparent;
}

.activity-item:hover {
    transform: translateX(4px);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.activity-item:hover .activity-icon {
    transform: scale(1.1);
}

.activity-icon.task {
    background: var(--primary-100);
    color: var(--primary-600);
}

.activity-icon.project {
    background: var(--success-100);
    color: var(--success-600);
}

.activity-icon.update {
    background: var(--error-100);
    color: var(--error-600);
}

.activity-content {
    flex: 1;
}

.activity-text {
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
    font-weight: 500;
}

.activity-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.activity-time {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.activity-time svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {

    .metrics-grid,
    .charts-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

    .chart {
        height: 150px;
    }
}

/* Task Management Styles - Extracted to components/task-management.css */

/* Task Stats */
.task-stats {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.stat-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    min-width: 100px;
    text-align: center;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-500);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card.completed::before {
    background: var(--success-500);
}

.stat-card.in-progress::before {
    background: var(--warning-500);
}

.stat-card.overdue::before {
    background: var(--error-500);
}

.stat-number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-600);
    margin-bottom: var(--space-1);
    line-height: 1;
}

.stat-card.completed .stat-number {
    color: var(--success-600);
}

.stat-card.in-progress .stat-number {
    color: var(--warning-600);
}

.stat-card.overdue .stat-number {
    color: var(--error-600);
}

.stat-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Task Controls */
.task-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.search-and-filters {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    flex-wrap: wrap;
}

.search-container {
    position: relative;
    min-width: 250px;
    flex: 1;
    max-width: 400px;
}

.task-search {
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: border-color var(--duration-normal) var(--ease-in-out), box-shadow var(--duration-normal) var(--ease-in-out);
    outline: none;
}

.task-search:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-sm);
}

.search-icon {
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    pointer-events: none;
}

.filter-controls {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.enhanced-select {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    min-width: 140px;
    outline: none;
}

.enhanced-select:hover {
    border-color: var(--border-hover);
}

.enhanced-select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.action-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.view-toggle {
    display: flex;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    border: 1px solid var(--border-color);
}

.view-btn {
    padding: var(--space-2);
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-btn svg {
    width: 18px;
    height: 18px;
}

.view-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.view-btn.active {
    background: var(--primary-500);
    color: white;
    box-shadow: var(--shadow-sm);
}

.enhanced-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.enhanced-btn svg {
    width: 18px;
    height: 18px;
}

.enhanced-btn.primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    box-shadow: var(--shadow-md);
}

.enhanced-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.enhanced-btn.secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.enhanced-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Task Content Area */
.task-content {
    padding: var(--space-6);
    background: var(--bg-primary);
}

/* Card View Styles */
.task-cards-container {
    width: 100%;
}

.task-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-5);
    /* Prevent flash during initial render */
    contain: layout style;
    will-change: contents;
}

.enhanced-task-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-spring),
        box-shadow var(--duration-normal) var(--ease-spring),
        border-color var(--duration-normal) var(--ease-spring);
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    /* Prevent flash during initial render */
    opacity: 1;
    visibility: visible;
    contain: layout style;
}

.enhanced-task-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-500);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.enhanced-task-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-200);
}

.enhanced-task-card:hover::before {
    opacity: 1;
}

.enhanced-task-card.overdue {
    border-color: var(--error-200);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--error-50) 100%);
}

.enhanced-task-card.overdue::before {
    background: var(--error-500);
}

.enhanced-task-card.completed {
    border-color: var(--success-200);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--success-50) 100%);
}

.enhanced-task-card.completed::before {
    background: var(--success-500);
}

.enhanced-task-card.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
    z-index: 1000;
}

/* Task Card Header */
.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.task-priority {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.task-priority.high {
    background: var(--error-100);
    color: var(--error-700);
    border: 1px solid var(--error-200);
}

.task-priority.medium {
    background: var(--warning-100);
    color: var(--warning-700);
    border: 1px solid var(--warning-200);
}

.task-priority.low {
    background: var(--success-100);
    color: var(--success-700);
    border: 1px solid var(--success-200);
}

.priority-icon {
    font-size: var(--font-size-sm);
}

.action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
    box-shadow: var(--shadow-sm);
}

.action-btn svg {
    width: 16px;
    height: 16px;
}

/* Task Card Content */
.task-card-content {
    margin-bottom: var(--space-4);
}

.task-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}

.task-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.task-tag {
    padding: var(--space-1) var(--space-2);
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid var(--primary-200);
}

/* Task Progress */
.task-card-progress {
    margin-bottom: var(--space-4);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.progress-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.progress-percentage {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-600);
}

.enhanced-progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-in-out);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    /* Removed shimmer animation to prevent distraction */
}

/* Task Card Meta */
.task-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

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

.assignee-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    border: 2px solid var(--bg-elevated);
    box-shadow: var(--shadow-sm);
}

.assignee-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.task-meta-items {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.meta-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.due-date.overdue {
    color: var(--error-600);
    font-weight: 600;
}

/* Task Status Badge */
.task-status-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

.task-status-badge.pending {
    background: var(--warning-100);
    color: var(--warning-700);
    border: 1px solid var(--warning-200);
}

.task-status-badge.in-progress {
    background: var(--primary-100);
    color: var(--primary-700);
    border: 1px solid var(--primary-200);
}

.task-status-badge.completed {
    background: var(--success-100);
    color: var(--success-700);
    border: 1px solid var(--success-200);
}

/* Empty State */
.empty-state-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: var(--space-8);
}

.empty-state-content {
    text-align: center;
    max-width: 400px;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    background: var(--primary-50);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-500);
}

.empty-state-icon svg {
    width: 40px;
    height: 40px;
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-state-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-6) 0;
    line-height: 1.5;
}

/* List View Styles */
.task-list-container {
    width: 100%;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.task-list-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.task-list-body {
    max-height: none;
    overflow-y: visible;
}

.task-list-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    cursor: pointer;
    align-items: center;
}

.task-list-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

.task-list-item:last-child {
    border-bottom: none;
}

.task-list-item.overdue {
    background: linear-gradient(90deg, var(--error-50) 0%, transparent 100%);
    border-left: 4px solid var(--error-500);
}

.task-title-cell h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.task-title-cell p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-tags-inline {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.task-tag-small {
    padding: 2px var(--space-1);
    background: var(--primary-50);
    color: var(--primary-600);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 500;
}

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

.status-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.status-badge.pending {
    background: var(--warning-100);
    color: var(--warning-700);
}

.status-badge.in-progress {
    background: var(--primary-100);
    color: var(--primary-700);
}

.status-badge.completed {
    background: var(--success-100);
    color: var(--success-700);
}

.priority-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.priority-badge.high {
    color: var(--error-700);
}

.priority-badge.medium {
    color: var(--warning-700);
}

.priority-badge.low {
    color: var(--success-700);
}

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

.mini-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-text {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 35px;
}

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

/* Kanban View Styles */
.kanban-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    min-height: 500px;
}

.kanban-column {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.kanban-header {
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-header h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.task-count {
    background: var(--primary-100);
    color: var(--primary-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.kanban-tasks {
    padding: var(--space-4);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.kanban-task-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: var(--space-3);
    transition: all var(--duration-normal) var(--ease-spring);
    cursor: grab;
    box-shadow: var(--shadow-sm);
}

.kanban-task-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.kanban-task-card.dragging {
    opacity: 0.5;
    transform: rotate(3deg);
    cursor: grabbing;
}

.kanban-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.priority-indicator {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
}

.priority-indicator.high {
    background: var(--error-100);
}

.priority-indicator.medium {
    background: var(--warning-100);
}

.priority-indicator.low {
    background: var(--success-100);
}

.card-menu-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.card-menu-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.card-menu-btn svg {
    width: 14px;
    height: 14px;
}

.kanban-task-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
}

.kanban-task-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.kanban-task-tags {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.task-tag-mini {
    padding: 2px var(--space-1);
    background: var(--primary-50);
    color: var(--primary-600);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 500;
}

.kanban-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assignee-avatar-small {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    border: 1px solid var(--border-color);
}

.due-date-mini {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.due-date-mini.overdue {
    color: var(--error-600);
    font-weight: 600;
}

/* Task Modal Styles */
.task-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.task-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-color);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    transform: scale(0.9);
    transition: transform var(--duration-normal) var(--ease-spring);
}

.task-modal.active .modal-content {
    transform: scale(1);
}

.modal-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
}

.modal-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
}

.modal-close svg {
    width: 18px;
    height: 18px;
}

/* Task Form Styles */
.task-form {
    padding: var(--space-6);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-row:has(.form-group:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: all var(--duration-normal) var(--ease-in-out);
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
    margin-top: var(--space-6);
}

/* Notification Styles */
.task-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    padding: var(--space-4);
    max-width: 300px;
    transform: translateX(100%);
    transition: all var(--duration-normal) var(--ease-spring);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.task-notification.show {
    transform: translateX(0);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .task-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .kanban-container {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .task-list-header,
    .task-list-item {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .task-list-header .assignee-col,
    .task-list-header .priority-col,
    .task-list-header .progress-col,
    .task-list-header .due-col,
    .task-list-item .assignee-col,
    .task-list-item .priority-col,
    .task-list-item .progress-col,
    .task-list-item .due-col {
        display: none;
    }
}

@media (max-width: 768px) {
    .task-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .search-and-filters {
        flex-direction: column;
    }

    .filter-controls {
        justify-content: stretch;
    }

    .enhanced-select {
        min-width: auto;
        flex: 1;
    }

    .action-controls {
        justify-content: space-between;
    }

    .task-cards-grid {
        grid-template-columns: 1fr;
    }

    .header-content {
        flex-direction: column;
        align-items: stretch;
    }

    .task-stats {
        flex-direction: column;
    }

    .form-row:has(.form-group:nth-child(2)) {
        grid-template-columns: 1fr;
    }
}

/* Animation Classes */
.task-card-enter {
    animation: slideInUp 0.3s var(--ease-spring);
}

.task-card-exit {
    animation: slideOutDown 0.3s var(--ease-spring);
}


.quick-actions-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.panel-header {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3 {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.close-panel {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.close-panel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.close-panel svg {
    width: 16px;
    height: 16px;
}

.panel-content {
    padding: var(--space-4);
}

.quick-action-item {
    margin-bottom: var(--space-3);
}

.quick-action-btn {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.quick-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--primary-300);
    transform: translateY(-1px);
}

.quick-action-btn svg {
    width: 16px;
    height: 16px;
    color: var(--primary-500);
}

/* Task Management Styles - Extracted to components/task-management.css */
.view-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.view-btn:hover::before {
    width: 100px;
    height: 100px;
}

.view-btn svg {
    width: 20px;
    height: 20px;
    z-index: 1;
    position: relative;
}

.view-btn:hover {
    color: var(--text-primary);
    transform: scale(1.05);
}

.view-btn.active {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

.enhanced-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.enhanced-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.enhanced-btn:hover::before {
    width: 300px;
    height: 300px;
}

.enhanced-btn svg {
    width: 18px;
    height: 18px;
    z-index: 1;
    position: relative;
}

.enhanced-btn.primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
}

.enhanced-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.enhanced-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .enhanced-btn.secondary {
    background: rgba(30, 41, 59, 0.8);
}

.enhanced-btn.secondary:hover {
    border-color: var(--primary-300);
    background: var(--bg-hover);
    box-shadow: var(--shadow-sm);
}

/* Task Content Area */
.task-content {
    padding: var(--space-3);
    background: var(--bg-widget);
    position: relative;
    z-index: 1;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* AI-Powered Insights Section */
.ai-insights-section {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: block !important;
    /* Ensure section is always visible */
}

.ai-insights-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--success-500), var(--warning-500));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.insights-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-600), var(--success-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ai-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    min-height: 200px;
    /* Ensure grid has minimum height */
}

.confidence-text {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.impact-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.impact-badge.high {
    background: var(--error-100);
    color: var(--error-700);
}

.impact-badge.medium {
    background: var(--warning-100);
    color: var(--warning-700);
}

.impact-badge.low {
    background: var(--success-100);
    color: var(--success-700);
}

.insight-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.insight-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.insight-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
}

.insight-action-btn svg {
    width: 14px;
    height: 14px;
}

.insight-action-btn.primary:hover {
    background: var(--primary-600);
    transform: translateY(-1px);
}

.insight-action-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.insight-action-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

/* Performance Analytics */
.task-analytics {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.task-analytics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--success-500), var(--primary-500), var(--warning-500));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.analytics-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    background: linear-gradient(135deg, var(--success-600), var(--primary-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.analytics-metric {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    border: 1px solid rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(20px);
}

[data-theme="dark"] .analytics-metric {
    background: rgba(30, 41, 59, 0.8);
}

.analytics-metric.animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.analytics-metric:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.metric-icon {
    font-size: var(--font-size-2xl);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    background: var(--primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-content {
    flex: 1;
}

.metric-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    line-height: 1;
}

.metric-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.metric-trend {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
}

.metric-trend.positive {
    background: var(--success-100);
    color: var(--success-700);
}

.metric-trend.negative {
    background: var(--error-100);
    color: var(--error-700);
}

.metric-trend.neutral {
    background: var(--gray-100);
    color: var(--gray-700);
}

.insight-card.positive .insight-icon {
    background: var(--success-50);
}

.insight-card.positive .insight-icon {
    background: var(--success-50);
}

.insight-card.warning .insight-icon {
    background: var(--warning-50);
}

.insight-content {
    flex: 1;
}

.insight-content h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}

.insight-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.5;
}

.insight-metric {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--primary-600);
    padding: var(--space-1) var(--space-3);
    background: var(--primary-50);
    border-radius: var(--radius-full);
    display: inline-block;
    border: 1px solid var(--primary-200);
}

.insight-card.positive .insight-metric {
    color: var(--success-600);
    background: var(--success-50);
    border-color: var(--success-200);
}

.insight-card.warning .insight-metric {
    color: var(--warning-600);
    background: var(--warning-50);
    border-color: var(--warning-200);
}

/* Enhanced Task Cards - Update existing style */
.enhanced-task-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.enhanced-task-card.animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="dark"] .enhanced-task-card {
    background: rgba(30, 41, 59, 0.8);
}

.enhanced-task-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-500);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.enhanced-task-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.enhanced-task-card:hover::before {
    opacity: 1;
}

.enhanced-task-card.overdue {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(254, 242, 242, 0.8) 100%);
}

[data-theme="dark"] .enhanced-task-card.overdue {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.8) 0%,
            rgba(55, 48, 48, 0.8) 100%);
}

.enhanced-task-card.overdue::before {
    background: var(--error-500);
    opacity: 1;
}

.enhanced-task-card.completed {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(240, 253, 244, 0.8) 100%);
}

[data-theme="dark"] .enhanced-task-card.completed {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.8) 0%,
            rgba(34, 48, 42, 0.8) 100%);
}

.enhanced-task-card.completed::before {
    background: var(--success-500);
    opacity: 1;
}

/* Backward Compatibility for existing task-system class */
.task-system {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    margin: 0 !important;
    padding: 0 !important;
}

.task-system:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

@media (max-width: 768px) {
    .task-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

    .task-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .task-header-row {
        flex-direction: column;
        gap: var(--space-3);
    }

    .task-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* Weather Widget Styles */
.weather-widget {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

.weather-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.weather-widget:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.weather-widget:hover::before {
    opacity: 1;
}

.weather-header {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.weather-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.weather-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
}

.weather-location {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.location-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.9);
}

.weather-content {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
}

.current-weather {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: center;
    margin-bottom: var(--space-6);
}

.weather-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.temperature {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.temperature-unit {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-secondary);
}

.weather-description {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.weather-details {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.weather-detail {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.weather-detail svg {
    width: 16px;
    height: 16px;
    color: var(--primary-500);
}

.weather-icon {
    width: 80px;
    height: 80px;
    color: var(--primary-500);
    animation: float 3s ease-in-out infinite;
}


.forecast {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-6);
}

.forecast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.forecast-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.forecast-toggle {
    display: flex;
    gap: var(--space-2);
}

.toggle-btn {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.toggle-btn.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

.toggle-btn:hover:not(.active) {
    border-color: var(--primary-500);
    color: var(--primary-500);
}

.forecast-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
}

.forecast-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--duration-normal) var(--ease-spring);
}

.forecast-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.forecast-day {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.forecast-icon {
    width: 32px;
    height: 32px;
    color: var(--primary-500);
    margin: var(--space-2) auto;
}

.forecast-temp {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.forecast-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

.weather-error {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.weather-error svg {
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.weather-error h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.weather-error p {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* Team Spotlight Text Readability Fixes */
.team-spotlight .event-title,
.team-spotlight .event-time,
.team-spotlight .member-role,
.team-spotlight .member-department,
.team-spotlight .achievements-list li,
.team-spotlight .skill-tag {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

.team-spotlight .event-time {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* Fix all components with faded text */
.company-news .news-excerpt,
.company-news .news-meta,
.analytics-dashboard .metric-insight,
.analytics-dashboard .activity-meta,
.weather-widget .weather-details,
.task-system .task-description,
.task-system .task-meta,
.knowledge-hub .article-meta,
.achievement-system .achievement-description,
.collaboration-hub .project-meta,
.company-culture-showcase .story-text,
.company-culture-showcase .value-description {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* Ensure all primary text is sufficiently dark */
h1,
h2,
h3,
h4,
h5,
h6,
.widget-title,
.section-title,
.card-title,
.member-name,
.task-name,
.news-headline,
.event-title,
.chart-title,
.metric-label {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Fix secondary text elements */
.meta-text,
.description-text,
.subtitle-text,
.helper-text,
.caption-text {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* Specific fixes for upcoming events section */
.upcoming-events .event-title,
.events-list .event-title {
    color: white !important;
    font-weight: 600 !important;
    font-size: var(--font-size-sm) !important;
}

.upcoming-events .event-time,
.events-list .event-time {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    font-size: var(--font-size-xs) !important;
}

/* Enhanced contrast for small text */
.font-size-xs,
.text-xs {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

.font-size-sm,
.text-sm {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

.insight-card h4 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.insight-card p {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* Ensure sufficient contrast in dark mode */
[data-theme="dark"] .team-spotlight .event-title,
[data-theme="dark"] .team-spotlight .member-name,
[data-theme="dark"] .upcoming-events .event-title,
[data-theme="dark"] .events-list .event-title {
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .team-spotlight .event-time,
[data-theme="dark"] .upcoming-events .event-time,
[data-theme="dark"] .events-list .event-time {
    color: var(--text-secondary-dark) !important;
}

/* Unified Search Styles */
.search-container {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

.search-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.search-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.search-container:hover::before {
    opacity: 1;
}

.search-header {
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    border-bottom: 1px solid var(--border-color);
}

.search-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.search-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
}

.search-input-container {
    position: relative;
    margin-bottom: var(--space-4);
}

.search-input {
    width: 100%;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: all var(--duration-normal) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
    transform: translateY(-1px);
}

.search-input::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
}

.search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: color var(--duration-normal) var(--ease-in-out);
}

.search-input:focus+.search-icon {
    color: var(--primary-500);
}

.search-filters {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.filter-chip {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.filter-chip:hover {
    border-color: var(--primary-500);
    color: var(--primary-500);
    background: var(--primary-50);
}

.filter-chip.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

.search-content {
    padding: var(--space-6);
}

.search-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.results-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

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

.sort-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.sort-select {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.sort-select:hover {
    border-color: var(--primary-500);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.search-placeholder {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.placeholder-icon {
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.placeholder-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.placeholder-description {
    margin: 0;
    font-size: var(--font-size-sm);
}

.search-result {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: var(--space-4);
}

.search-result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-500);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.search-result:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.search-result:hover::before {
    opacity: 1;
}

.result-icon {
    width: 40px;
    height: 40px;
    color: var(--primary-500);
    flex-shrink: 0;
}

.result-content {
    flex: 1;
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-3);
}

.result-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.result-actions {
    display: flex;
    gap: var(--space-2);
}

.result-action {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-action:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
    color: var(--primary-600);
    transform: translateY(-1px);
}

.result-meta {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.result-author,
.result-date,
.result-category,
.result-role,
.result-department,
.result-email,
.result-lead,
.result-status,
.result-progress {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.result-status.primary {
    background: var(--primary-100);
    color: var(--primary-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.result-status.success {
    background: var(--success-100);
    color: var(--success-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.result-status.warning {
    background: var(--warning-100);
    color: var(--warning-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.result-tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.result-tag {
    padding: var(--space-1) var(--space-2);
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.search-loading,
.search-empty {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.search-loading svg,
.search-empty svg {
    margin-bottom: var(--space-4);
    /* Removed spin animation */
}

.search-empty svg {
    animation: none;
    opacity: 0.5;
}

.search-loading p,
.search-empty h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.search-empty p {
    margin: 0;
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .search-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-stats {
        flex-direction: column;
        gap: var(--space-3);
        align-items: flex-start;
    }

    .result-header {
        flex-direction: column;
        gap: var(--space-2);
    }

    .result-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* Command Palette Styles */
.command-palette {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-8);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.command-palette.active {
    display: flex;
    opacity: 1;
}

.palette-container {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: all var(--duration-normal) var(--ease-spring);
}

.command-palette.active .palette-container {
    transform: translateY(0) scale(1);
}

.palette-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.search-container {
    position: relative;
    flex: 1;
}

.search-input {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 500;
    transition: all var(--duration-normal) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.search-input::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
}

.search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: color var(--duration-normal) var(--ease-in-out);
}

.close-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
    color: var(--primary-600);
    transform: translateY(-1px);
}

.commands-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--space-2);
}

.command-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    margin-bottom: var(--space-1);
    border: 1px solid transparent;
}

.command-item:hover,
.command-item.selected {
    background: var(--primary-50);
    border-color: var(--primary-200);
}

.command-icon {
    width: 24px;
    height: 24px;
    color: var(--primary-500);
    flex-shrink: 0;
}

.command-content {
    flex: 1;
    min-width: 0;
}

.command-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.command-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-1);
}

.command-category {
    padding: var(--space-1) var(--space-2);
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

.command-shortcut {
    padding: var(--space-1) var(--space-2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.palette-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.shortcuts-help {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: center;
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.shortcut-hint {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-weight: 600;
}

.no-results {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.no-results svg {
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.no-results h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.no-results p {
    margin: 0;
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .command-palette {
        padding: var(--space-4);
    }

    .palette-container {
        max-height: 90vh;
    }

    .command-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .command-shortcut,
    .command-category {
        align-self: flex-end;
    }

    .shortcuts-help {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* Header Styles */
app-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

.header {
    height: 64px;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    min-width: fit-content;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: var(--font-size-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
}

.logo:hover .logo-icon {
    transform: rotate(5deg) scale(1.1);
    box-shadow: var(--shadow-xl);
}

.logo-text {
    font-weight: 700;
    font-size: var(--font-size-xl);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.menu-button {
    display: none;
    padding: var(--space-2);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--duration-normal) var(--ease-in-out);
    background: none;
    border: none;
    cursor: pointer;
}

.menu-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.menu-button svg {
    width: 24px;
    height: 24px;
}

.action-button {
    padding: var(--space-2);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
    background: none;
    border: none;
    cursor: pointer;
}

[data-theme="dark"] .action-button {
    color: var(--gray-400);
}

[data-theme="dark"] .action-button:hover {
    color: var(--gray-200);
    background: var(--gray-700);
}

[data-theme="dark"] .action-button::before {
    background: rgba(255, 255, 255, 0.05);
}

.action-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.action-button:hover::before {
    width: 40px;
    height: 40px;
}

.action-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.action-button svg {
    width: 20px;
    height: 20px;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.action-button:hover svg {
    transform: scale(1.1);
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--error-500);
    border-radius: 50%;
    border: 2px solid var(--bg-elevated);
}

[data-theme="dark"] .notification-badge {
    background: var(--error-400);
    border-color: var(--gray-800);
}

.user-menu {
    display: flex;
    align-items: center;
}

.user-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.user-button:hover {
    background: var(--bg-hover);
    border-color: var(--primary-500);
}

[data-theme="dark"] .user-button {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-200);
}

[data-theme="dark"] .user-button:hover {
    background: var(--gray-700);
    border-color: var(--gray-600);
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: var(--font-size-sm);
}

.user-avatar svg {
    width: 100%;
    height: 100%;
    color: white;
}

.user-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.chevron-down {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.user-button:hover .chevron-down {
    transform: rotate(180deg);
}

/* User dropdown styles */
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 280px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s var(--ease-out);
    z-index: 1000;
}

[data-theme="dark"] .user-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.user-avatar-large {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-lg);
}

.user-details {
    flex: 1;
}

.user-full-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.user-email {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.5rem 0;
}

[data-theme="dark"] .dropdown-divider {
    background: var(--gray-700);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: none;
    border: none;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .dropdown-item {
    color: var(--gray-200);
}

[data-theme="dark"] .dropdown-item svg {
    color: var(--gray-400);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--gray-700);
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

.dropdown-item svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--text-secondary);
}

.logout-btn {
    color: var(--error-500);
}

.logout-btn:hover {
    background: var(--error-50);
    color: var(--error-600);
}

.logout-btn svg {
    color: var(--error-500);
}

@media (max-width: 768px) {
    .menu-button {
        display: block;
    }

    .header-left {
        max-width: none;
    }

    .logo-text {
        display: none;
    }

    .user-name {
        display: none;
    }
}

/* Calendar Styles */
.calendar-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    border: 1px solid var(--border-color);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.date-navigation {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.date-navigation h1 {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    min-width: 300px;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.view-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.view-switcher {
    display: flex;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-1);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.view-btn {
    padding: var(--space-3) var(--space-6);
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.view-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-spring);
    z-index: -1;
}

.view-btn.active {
    color: white;
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.view-btn.active::before {
    transform: scaleX(1);
}

.view-btn:hover:not(.active) {
    color: var(--primary-600);
    background: var(--primary-50);
    transform: translateY(-1px);
}

/* Calendar Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto repeat(6, 1fr);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Month View Styles */
.calendar-day-headers {
    grid-row: 1;
    display: contents;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--text-secondary);
}

.calendar-day-header {
    padding: var(--space-3);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    grid-row: 1;
}

.calendar-day-header:last-child {
    border-right: none;
}

/* Week view styles - for when week view is active */
.calendar-grid.week-view {
    grid-template-columns: 80px repeat(7, 1fr);
    grid-template-rows: auto 1fr;
}

/* Day view styles - for when day view is active */
.calendar-grid.day-view {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto 1fr;
}

.calendar-day-cell {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-2);
    position: relative;
    background: var(--bg-primary);
    transition: all var(--duration-normal) var(--ease-spring);
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    grid-row: span 1;
}

.calendar-day-cell:last-child {
    border-right: none;
}

/* Remove bottom border from last row */
.calendar-day-cell:nth-child(n+36):nth-child(-n+42) {
    border-bottom: none;
}

.calendar-day-cell:hover {
    background: var(--bg-hover);
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.calendar-day-cell.today {
    background: var(--primary-50);
    border-color: var(--primary-500);
    box-shadow: var(--shadow-md);
}

.calendar-day-cell.today .day-number {
    color: var(--primary-700);
    font-weight: 700;
}

.calendar-day-cell.other-month {
    color: var(--text-muted);
    background: var(--bg-secondary);
    opacity: 0.6;
}

.calendar-day-cell.other-month:hover {
    opacity: 0.8;
}

.day-number {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: inherit;
    text-align: right;
}

.day-events {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--space-1);
}

.event-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-500);
    margin-bottom: 2px;
    transition: all var(--duration-normal) var(--ease-spring);
}

.event-indicator:hover {
    transform: scale(1.2);
    background: var(--primary-600);
}

/* Week View Styles */
.time-column {
    width: 80px;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.time-column::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--border-color) 50%, transparent 100%);
}

.time-slot {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-2);
    position: relative;
    transition: all var(--duration-normal) var(--ease-in-out);
    flex-shrink: 0;
}

.time-slot:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.time-slot:last-child {
    border-bottom: none;
}

/* Add a spacer to align with day headers */
.time-slot:first-child {
    margin-top: 80px;
    /* Match the height of day headers */
}

.day-columns {
    display: flex;
    flex: 1;
}

.day-column {
    flex: 1;
    border-right: 1px solid var(--border-color);
    min-height: 540px;
    position: relative;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.day-column.full-width {
    flex: 1;
    min-width: 100%;
}

.day-column:hover {
    background: var(--bg-hover);
}

.day-column:last-child {
    border-right: none;
}

.day-header {
    padding: var(--space-4);
    text-align: center;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    position: relative;
    overflow: hidden;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.day-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
    z-index: -1;
}

.day-column:hover .day-header::before {
    opacity: 0.1;
}

.day-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.day-date {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.events-container {
    position: relative;
    height: calc(100% - 80px);
}

.event-card {
    position: absolute;
    left: var(--space-2);
    right: var(--space-2);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.event-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--success-500), var(--warning-500));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.event-card:hover::before {
    opacity: 1;
}

.event-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
}

.event-content p {
    font-size: var(--font-size-xs);
    margin: 0 0 var(--space-2) 0;
    opacity: 0.9;
}

.event-attendees {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.event-attendees img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
}

.attendee-count {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

/* Upcoming Events */
.upcoming-events {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-6);
    flex-shrink: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.section-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.event-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
}

.event-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.event-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.event-time .date {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.event-time .time {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.event-content {
    flex: 1;
}

.event-content h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.event-content p {
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.5;
}

.event-meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.event-actions {
    display: flex;
    gap: var(--space-2);
}

/* Schedule Meeting */
.schedule-meeting {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-xl);
    flex-shrink: 0;
}

.schedule-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
}

.schedule-content p {
    margin: 0 0 var(--space-4) 0;
    opacity: 0.9;
}

.schedule-actions {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.schedule-actions .btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.schedule-actions .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.schedule-info {
    display: flex;
    gap: var(--space-6);
}

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

.info-item svg {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.info-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0;
}

.info-content p {
    font-size: var(--font-size-xs);
    margin: 0;
    opacity: 0.8;
}

/* CSS Custom Properties - REMOVED: Duplicate variables now centralized in critical-fixes.css */
/* All CSS variables are now defined in critical-fixes.css for dynamic theming */

/* Transitions */

.main-container {
    display: flex;
    flex: 1;
    min-height: calc(100vh - 72px);
    /* Subtract header height */
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-600);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    z-index: 1000;
    transition: top var(--duration-normal) var(--ease-in-out);
}

.skip-link:focus {
    top: 6px;
}

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

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

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    min-width: fit-content;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: var(--font-size-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
}

.logo:hover .logo-icon {
    transform: rotate(5deg) scale(1.1);
    box-shadow: var(--shadow-xl);
}

.logo-text {
    font-weight: 700;
    font-size: var(--font-size-xl);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-brand {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-color);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--duration-normal) var(--ease-spring);
}

.nav-logo:hover {
    transform: scale(1.05);
}

.nav-logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: var(--font-size-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) var(--ease-spring);
}

.nav-logo:hover .nav-logo-icon {
    transform: rotate(5deg) scale(1.1);
    box-shadow: var(--shadow-lg);
}

.nav-logo-text {
    font-weight: 700;
    font-size: var(--font-size-lg);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-group {
    margin-bottom: var(--space-8);
}

.nav-group:last-child {
    margin-bottom: 0;
}

.nav-group-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    padding-left: var(--space-2);
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: 500;
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    transition: width var(--duration-normal) var(--ease-in-out);
    z-index: -1;
}

.nav-link:hover {
    color: var(--primary-600);
    background: var(--bg-hover);
    transform: translateX(4px);
}

.nav-link:hover::before {
    width: 4px;
}

.nav-link.active {
    color: var(--primary-600);
    background: var(--primary-50);
    font-weight: 600;
}

.nav-link.active::before {
    width: 4px;
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.nav-link:hover .nav-icon {
    transform: scale(1.1);
}

/* Enhanced Main Content */
.main-content {
    flex: 1;
    padding: var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    overflow-y: hidden;
}

/* COOL DUAL CIRCLE BACKGROUND - ELEGANT & VISIBLE */
.welcome-section::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -25%;
    width: 150%;
    height: 150%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.04) 60%, transparent 80%);
    border-radius: 50%;
    animation: gentleFloat 60s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 1;
    filter: blur(0.8px);
    box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.1);
}

.welcome-section::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.10) 30%, rgba(255, 255, 255, 0.06) 50%, transparent 75%),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.04) 50%, transparent 75%);
    animation: gentleFloat 25s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    filter: blur(0.6px);
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.08);
}

/* COOL FLOATING PARTICLES - ENHANCED VISIBILITY */
.welcome-section .particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.welcome-section .particle {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.04) 60%, transparent 85%);
    border-radius: 50%;
    animation: gentleFloat 30s ease-in-out infinite;
    filter: blur(0.4px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.welcome-section .particle:nth-child(1) {
    width: 120px;
    height: 120px;
    top: 20%;
    right: 25%;
    animation: gentleFloat 35s ease-in-out infinite reverse;
}

.welcome-section .particle:nth-child(2) {
    width: 80px;
    height: 80px;
    top: 70%;
    left: 20%;
    animation: gentleFloat 40s ease-in-out infinite;
}


.welcome-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    gap: var(--space-3);
    position: relative;
    z-index: 2;
}

.welcome-greeting {
    flex: 1;
}

.welcome-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: white !important;
    margin: 0 0 var(--space-2) 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.greeting-text {
    color: white !important;
    font-weight: 500;
    font-size: var(--font-size-xl);
}

.welcome-title .user-name {
    color: white !important;
    font-size: 1.8rem !important;
    font-weight: 900;
    position: relative;
}

.user-name::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

0%,
100% {
    transform: rotate(0deg) scale(1);
}

25% {
    transform: rotate(25deg) scale(1.1);
}

75% {
    transform: rotate(-15deg) scale(1.05);
}
}

.welcome-subtitle {
    font-size: var(--font-size-lg);
    color: white !important;
    margin: 0 0 var(--space-4) 0;
    font-weight: 500;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.welcome-stats {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.stat-item {
    text-align: center;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    min-width: 120px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-primary) !important;
    position: relative;
    overflow: hidden;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.stat-item:hover::before {
    left: 100%;
}

.stat-item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 1);
}

.stat-number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
    color: var(--primary-600) !important;
    animation: subtle-pulse 3s ease-in-out infinite;
    transition: all 0.3s ease;
}


.stat-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    opacity: 0.9;
    color: var(--text-secondary) !important;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-xl);
    font-weight: 500;
    font-size: var(--font-size-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn.primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: var(--text-on-primary);
    box-shadow: var(--shadow-md);
}

.btn.primary:hover {
    background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
    box-shadow: var(--shadow-md);
}

.btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.btn.small {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

.btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.btn-icon.small {
    width: 32px;
    height: 32px;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon.small:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
    box-shadow: var(--shadow-sm);
}

.btn-icon.small svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Pulse Animation */
.pulse-animation {
    animation: pulse 2s infinite;
}

/* Enhanced Dashboard Grid - REMOVED: conflicted with critical-fixes.css definition */

/* Dashboard items that work with the grid system defined in critical-fixes.css */

.dashboard-item>* {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    width: 100% !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
}

/* Purple glow ONLY for main dashboard items - exclude all inner content */
.dashboard-item>* {
    position: relative;
}

.dashboard-item>*::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    border-radius: var(--radius-2xl);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-spring);
}

.dashboard-item>*:hover::before {
    opacity: 1;
}

.dashboard-item>*:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* Remove purple glow from ALL inner content */
.dashboard-item *:not(.dashboard-item > *) {
    position: static;
}

.dashboard-item *:not(.dashboard-item > *)::before {
    display: none !important;
}

.dashboard-item *:not(.dashboard-item > *):hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Specific overrides for inner content */
.insight-card,
.value-card,
.event-card,
.stat-card,
.achievement-card,
.recommendation-card,
.frequently-used-item,
.quick-access-link,
.action-card,
.resource-category,
.handbook-section,
.settings-section,
.category-card,
.version-item,
.ticket-card,
.space-card,
.resource-item,
.event-item,
.member-spotlight,
.kanban-column,
.timeline-project,
.settings-card,
.profile-section,
.info-item,
.contact-link,
.skill-tag,
.matrix-row,
.avatar-sm,
.notification-item,
.command-item,
.search-result,
.result-item,
.placeholder-item,
.filter-chip,
.range-selector,
.metric-card,
.chart-container,
.activity-item,
.goal-item,
.achievement-item,
.milestone-item,
.level-badge,
.points-display,
.streak-item,
.next-achievement,
.achievement-notification,
.level-up-notification,
.connection-status,
.document-info,
.space-info,
.article-content,
.insight-content,
.recommendation-content,
.frequently-used-content,
.quick-access-content,
.action-content,
.category-content,
.handbook-content,
.settings-content,
.version-content,
.ticket-content,
.space-content,
.resource-content,
.event-content,
.member-content,
.team-content,
.course-content,
.benefit-content,
.achievement-content,
.milestone-content,
.user-content,
.policy-content,
.value-content,
.insight-content,
.recommendation-content,
.frequently-used-content {
    position: static !important;
}

/* AI-Powered Insights Section */
.ai-insights-section {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: block !important;
    /* Ensure section is always visible */
}

.ai-insights-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--success-500), var(--warning-500));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.insights-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-600), var(--success-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ai-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    min-height: 200px;
    /* Ensure grid has minimum height */
}

.ai-insight-card {}

.ai-insight-card.recommendation::before {
    background: var(--primary-500);
}

.ai-insight-card.prediction::before {
    background: var(--success-500);
}

.ai-insight-card.optimization::before {
    background: var(--warning-500);
}

.insight-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.insight-meta {
    flex: 1;
}

.insight-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

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

.confidence-bar {
    width: 60px;
    height: 4px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-500), var(--primary-500));
    border-radius: var(--radius-full);
    transition: width var(--duration-normal);
}

.confidence-text {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.impact-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.impact-badge.high {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-600);
}

.impact-badge.medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-600);
}

.impact-badge.low {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-600);
}

.insight-description {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.insight-actions {
    display: flex;
    gap: var(--space-2);
}

.insight-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
}

.insight-action-btn.primary {
    background: var(--gradient-primary);
    color: white;
}

.insight-action-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.insight-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.insight-action-btn svg {
    width: 14px;
    height: 14px;
}

/* AI Quick Actions Panel */
.ai-quick-actions-panel {
    position: fixed;
    right: -400px !important;
    top: 50%;
    transform: translateY(-50%);
    width: 380px;
    max-height: 80vh;
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-color);
    z-index: 9999;
    transition: right var(--duration-normal) var(--ease-spring);
    overflow: hidden;
    pointer-events: none;
    margin-right: 0;
    opacity: 0;
    visibility: hidden;
}

.ai-quick-actions-panel.active {
    right: 0 !important;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.close-panel {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    transition: all var(--duration-fast);
}

.close-panel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.close-panel svg {
    width: 18px;
    height: 18px;
}

.panel-content {
    padding: var(--space-4);
    max-height: calc(80vh - 80px);
    overflow-y: auto;
}

/* Smart Action Items */
.smart-action-item {
    margin-bottom: var(--space-3);
}

.smart-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    text-align: left;
}

.smart-action-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--primary-200);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.action-icon {
    font-size: var(--font-size-2xl);
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-50);
    border-radius: var(--radius-xl);
    color: var(--primary-600);
}

[data-theme="dark"] .action-icon {
    background: var(--primary-900);
    color: var(--primary-300);
}

.action-content {
    flex: 1;
}

.action-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.action-description {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

/* AI Notifications */
.ai-notification {
    position: fixed;
    top: var(--space-6);
    right: -400px;
    max-width: 400px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    z-index: 10000;
    transition: right var(--duration-normal) var(--ease-spring);
    overflow: hidden;
}

.ai-notification.show {
    right: var(--space-6);
}

.ai-notification.success {
    border-left: 4px solid var(--success-500);
}

.ai-notification.warning {
    border-left: 4px solid var(--warning-500);
}

.ai-notification.error {
    border-left: 4px solid var(--error-500);
}

.ai-notification.info {
    border-left: 4px solid var(--primary-500);
}

.notification-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-4);
}

.notification-message {
    flex: 1;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
    transition: all var(--duration-fast);
}

.notification-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.notification-close svg {
    width: 16px;
    height: 16px;
}

/* Enhanced Task Form AI Suggestions */
.ai-suggestions-form {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: var(--primary-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--primary-200);
}

[data-theme="dark"] .ai-suggestions-form {
    background: var(--primary-900);
    border-color: var(--primary-700);
}

.ai-suggestions-form h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--primary-700);
    margin: 0 0 var(--space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

[data-theme="dark"] .ai-suggestions-form h3 {
    color: var(--primary-300);
}

.ai-suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: linear-gradient(135deg, var(--component-bg) 0%, rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(15px);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    border: 1px solid var(--primary-100);
}

[data-theme="dark"] .ai-suggestion-item {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.9) 0%, rgba(17, 24, 39, 0.9) 100%);
    border-color: var(--primary-800);
}

.suggestion-icon {
    font-size: var(--font-size-lg);
    min-width: 24px;
}

.suggestion-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

.apply-suggestion-btn {
    background: var(--primary-500);
    color: white;
    border: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.apply-suggestion-btn:hover {
    background: var(--primary-600);
    transform: scale(1.02);
}

/* Enhanced Focus States and Accessibility */
.focus-visible,
*:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--primary-500) !important;
    outline-offset: 2px !important;
    border-radius: var(--radius-md) !important;
    z-index: 100 !important;
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-600);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.skip-link:focus {
    transform: translateY(0);
    top: 6px;
}

/* Enhanced keyboard navigation indicators */
.keyboard-user *:focus {
    outline: 3px solid var(--primary-500) !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-color: currentColor !important;
    }

    .btn {
        border: 2px solid currentColor !important;
    }

    .card,
    .widget {
        border: 2px solid currentColor !important;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Screen reader only content */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Live region for dynamic content announcements */
.live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Enhanced interactive element states */
.interactive {
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.interactive:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.interactive:active:not(:disabled) {
    transform: translateY(0);
}

.interactive:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Color contrast improvements */
.contrast-enhanced {
    background-color: var(--bg-base) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Ensure sufficient color contrast for links */
a {
    color: var(--primary-600);
    text-decoration-color: var(--primary-400);
}

a:hover,
a:focus {
    color: var(--primary-700);
    text-decoration-color: var(--primary-600);
}

/* Dark mode link adjustments */
[data-theme="dark"] a {
    color: var(--primary-400);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
    color: var(--primary-300);
}

.dashboard-item .goal-item::before,
.dashboard-item .achievement-item::before,
.dashboard-item .milestone-item::before,
.dashboard-item .level-badge::before,
.dashboard-item .points-display::before,
.dashboard-item .streak-item::before,
.dashboard-item .next-achievement::before,
.dashboard-item .achievement-notification::before,
.dashboard-item .level-up-notification::before,
.dashboard-item .connection-status::before,
.dashboard-item .document-info::before,
.dashboard-item .space-info::before,
.dashboard-item .article-content::before,
.dashboard-item .insight-content::before,
.dashboard-item .recommendation-content::before,
.dashboard-item .frequently-used-content::before,
.dashboard-item .quick-access-content::before,
.dashboard-item .action-content::before,
.dashboard-item .category-content::before,
.dashboard-item .handbook-content::before,
.dashboard-item .settings-content::before,
.dashboard-item .version-content::before,
.dashboard-item .ticket-content::before,
.dashboard-item .space-content::before,
.dashboard-item .resource-content::before,
.dashboard-item .event-content::before,
.dashboard-item .member-content::before,
.dashboard-item .team-content::before,
.dashboard-item .course-content::before,
.dashboard-item .benefit-content::before,
.dashboard-item .achievement-content::before,
.dashboard-item .milestone-content::before,
.dashboard-item .user-content::before,
.dashboard-item .policy-content::before,
.dashboard-item .value-content::before,
.dashboard-item .insight-content::before,
.dashboard-item .recommendation-content::before,
.dashboard-item .frequently-used-content::before {
    display: none !important;
}

/* Comprehensive fix for content cut-off issues */
.dashboard-item,
.dashboard-item>*,
.dashboard-item * {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Force all dashboard content to expand */
.dashboard-item,
.dashboard-item>*,
.dashboard-item *,
.dashboard-item *>* {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: auto !important;
}

/* Remove any height constraints from specific components */
company-news,
team-spotlight,
analytics-dashboard,
knowledge-hub,
weather-widget,
enhanced-interactive-poll,
company-culture-showcase,
collaboration-hub,
office-visualizer {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: auto !important;
}

/* Specific fixes for common components that might have height constraints */
.insight-card,
.value-card,
.event-card,
.stat-card,
.achievement-card,
.recommendation-card,
.frequently-used-item,
.quick-access-link,
.action-card,
.resource-category,
.handbook-section,
.settings-section,
.category-card,
.version-item,
.ticket-card,
.space-card,
.resource-item,
.event-item,
.member-spotlight,
.kanban-column,
.timeline-project,
.settings-card,
.profile-section,
.info-item,
.contact-link,
.skill-tag,
.matrix-row,
.avatar-sm,
.avatar-md,
.avatar-lg,
.avatar-xl,
.avatar-2xl,
.avatar-3xl,
.avatar-4xl,
.avatar-5xl,
.avatar-6xl,
.avatar-7xl,
.avatar-8xl,
.avatar-9xl,
.avatar-10xl,
.avatar-11xl,
.avatar-12xl,
.avatar-13xl,
.avatar-14xl,
.avatar-15xl,
.avatar-16xl,
.avatar-17xl,
.avatar-18xl,
.avatar-19xl,
.avatar-20xl,
.avatar-21xl,
.avatar-22xl,
.avatar-23xl,
.avatar-24xl,
.avatar-25xl,
.avatar-26xl,
.avatar-27xl,
.avatar-28xl,
.avatar-29xl,
.avatar-30xl,
.avatar-31xl,
.avatar-32xl,
.avatar-33xl,
.avatar-34xl,
.avatar-35xl,
.avatar-36xl,
.avatar-37xl,
.avatar-38xl,
.avatar-39xl,
.avatar-40xl,
.avatar-41xl,
.avatar-42xl,
.avatar-43xl,
.avatar-44xl,
.avatar-45xl,
.avatar-46xl,
.avatar-47xl,
.avatar-48xl,
.avatar-49xl,
.avatar-50xl,
.avatar-51xl,
.avatar-52xl,
.avatar-53xl,
.avatar-54xl,
.avatar-55xl,
.avatar-56xl,
.avatar-57xl,
.avatar-58xl,
.avatar-59xl,
.avatar-60xl,
.avatar-61xl,
.avatar-62xl,
.avatar-63xl,
.avatar-64xl,
.avatar-69xl,
.avatar-70xl,
.avatar-71xl,
.avatar-72xl,
.avatar-73xl,
.avatar-74xl,
.avatar-75xl,
.avatar-76xl,
.avatar-77xl,
.avatar-78xl,
.avatar-79xl,
.avatar-80xl,
.avatar-81xl,
.avatar-82xl,
.avatar-83xl,
.avatar-84xl,
.avatar-85xl,
.avatar-86xl,
.avatar-87xl,
.avatar-88xl,
.avatar-89xl,
.avatar-90xl,
.avatar-91xl,
.avatar-92xl,
.avatar-93xl,
.avatar-94xl,
.avatar-95xl,
.avatar-96xl,
.avatar-97xl,
.avatar-98xl,
.avatar-99xl,
.avatar-100xl {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Fix for any remaining overflow hidden issues */
.dashboard-item * {
    overflow: visible !important;
}

/* Ensure all content within dashboard items can expand */
.dashboard-item>*>* {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Fix for any scrollable containers that might be cutting off content */
.dashboard-item .scrollable,
.dashboard-item .scroll-container,
.dashboard-item .overflow-container {
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure all text content is fully visible */
.dashboard-item p,
.dashboard-item h1,
.dashboard-item h2,
.dashboard-item h3,
.dashboard-item h4,
.dashboard-item h5,
.dashboard-item h6,
.dashboard-item span,
.dashboard-item div {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}

/* Fix for any flex containers that might be constraining height */
.dashboard-item .flex,
.dashboard-item .flex-container,
.dashboard-item .flex-wrapper {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Ensure all grid items can expand */
.dashboard-item .grid,
.dashboard-item .grid-container,
.dashboard-item .grid-wrapper {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Fix for any absolute positioned elements that might be cut off */
.dashboard-item .absolute,
.dashboard-item .relative,
.dashboard-item .fixed {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Comprehensive fix for all possible content containers */
.dashboard-item *,
.dashboard-item *::before,
.dashboard-item *::after {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.dashboard-item .command-item:hover,
.dashboard-item .search-result:hover,
.dashboard-item .result-item:hover,
.dashboard-item .placeholder-item:hover,
.dashboard-item .filter-chip:hover,
.dashboard-item .range-selector:hover,
.dashboard-item .metric-card:hover,
.dashboard-item .chart-container:hover,
.dashboard-item .activity-item:hover,
.dashboard-item .goal-item:hover,
.dashboard-item .achievement-item:hover,
.dashboard-item .milestone-item:hover,
.dashboard-item .level-badge:hover,
.dashboard-item .points-display:hover,
.dashboard-item .streak-item:hover,
.dashboard-item .next-achievement:hover,
.dashboard-item .achievement-notification:hover,
.dashboard-item .level-up-notification:hover,
.dashboard-item .connection-status:hover,
.dashboard-item .document-info:hover,
.dashboard-item .space-info:hover,
.dashboard-item .article-content:hover,
.dashboard-item .insight-content:hover,
.dashboard-item .recommendation-content:hover,
.dashboard-item .frequently-used-content:hover,
.dashboard-item .quick-access-content:hover,
.dashboard-item .action-content:hover,
.dashboard-item .category-content:hover,
.dashboard-item .handbook-content:hover,
.dashboard-item .settings-content:hover,
.dashboard-item .version-content:hover,
.dashboard-item .ticket-content:hover,
.dashboard-item .space-content:hover,
.dashboard-item .resource-content:hover,
.dashboard-item .event-content:hover,
.dashboard-item .member-content:hover,
.dashboard-item .team-content:hover,
.dashboard-item .course-content:hover,
.dashboard-item .benefit-content:hover,
.dashboard-item .achievement-content:hover,
.dashboard-item .milestone-content:hover,
.dashboard-item .user-content:hover,
.dashboard-item .policy-content:hover,
.dashboard-item .value-content:hover,
.dashboard-item .insight-content:hover,
.dashboard-item .recommendation-content:hover,
.dashboard-item .frequently-used-content:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Enhanced Widgets */
.widget {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
}

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

.widget-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
}

.widget-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.widget-action {
    padding: var(--space-2);
    color: var(--text-secondary);
    border: none;
    background: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.widget-action:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.widget-action svg {
    width: 18px;
    height: 18px;
}

/* Quick Access Widget */
.quick-access-widget {
    height: 100%;
}

.quick-access-grid {
    padding: var(--space-6);
    display: grid;
    gap: var(--space-4);
}

.quick-access-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid transparent;
}

.quick-access-link:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    transform: translateX(4px);
}

.quick-access-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.quick-access-icon svg {
    width: 24px;
    height: 24px;
}

.quick-access-link:hover .quick-access-icon {
    transform: scale(1.1);
}

.quick-access-icon.document {
    color: var(--primary-600);
    background: var(--primary-50);
}

.quick-access-icon.meeting {
    color: var(--warning-600);
    background: var(--warning-100);
}

.quick-access-icon.project {
    color: var(--success-600);
    background: var(--success-100);
}

.quick-access-icon.resource {
    color: var(--error-600);
    background: var(--error-100);
}

.quick-access-content {
    flex: 1;
}

.quick-access-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-lg);
}

.quick-access-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Updates Section */
.updates-section {
    margin-top: var(--space-8);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-6);
}

.update-card {}

/* Responsive Design */
@media (max-width: 1200px) {
    .dashboard-grid {
        max-width: 100%;
        padding: 0 var(--space-4);
    }
}

@media (max-width: 1024px) {
    .dashboard-grid {
        flex-direction: column;
        gap: var(--space-4);
    }

    .dashboard-item {
        margin-bottom: 0;
    }

    .welcome-header {
        flex-direction: column;
        gap: var(--space-6);
    }

    .welcome-stats {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .dashboard-grid {
        padding: 0 var(--space-2);
        gap: var(--space-3);
    }

    .dashboard-item {
        margin-bottom: 0;
    }

    .main-content {
        padding: var(--space-4);
    }

    .welcome-title {
        font-size: var(--font-size-xl);
        gap: var(--space-3);
    }

    .greeting-text {
        font-size: var(--font-size-base);
    }

    .welcome-title .user-name {
        font-size: 2.5rem !important;
    }

    .welcome-emoji {
        font-size: var(--font-size-xl);
    }

    .quick-actions {
        justify-content: center;
    }

    .btn {
        flex: 1;
        justify-content: center;
    }

    .updates-grid {
        grid-template-columns: 1fr;
    }

    .welcome-stats {
        gap: var(--space-4);
    }

    .stat-item {
        min-width: 100px;
        padding: var(--space-3);
    }
}

/* Dark theme enhancements */
[data-theme="dark"] .quick-access-link:hover {
    background: var(--bg-hover-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .update-card.featured {
    background: linear-gradient(135deg, var(--bg-elevated-dark) 0%, var(--primary-900) 100%);
}

/* Theme transition */
.theme-transition,
.theme-transition *,
.theme-transition *:before,
.theme-transition *:after {
    transition: all 0.3s ease !important;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .pulse-animation {
        animation: none;
    }
}

/* High contrast mode support */
@media (forced-colors: active) {

    .btn,
    .nav-link,
    .quick-access-link {
        border: 1px solid currentColor;
    }

    .widget,
    .update-card {
        border: 1px solid currentColor;
    }
}

/* Enhanced Analytics Dashboard Styles */
.analytics-dashboard {
    background: var(--bg-widget);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.analytics-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            var(--primary-500) 0%,
            var(--success-500) 50%,
            var(--primary-600) 100%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.analytics-dashboard:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-200);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.dashboard-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.dashboard-title::before {
    content: '';
    font-size: var(--font-size-3xl);
    filter: none;
    -webkit-text-fill-color: initial;
}

.dashboard-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.range-selector {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    outline: none;
}

.range-selector:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
}

.range-selector:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.metric-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-500), var(--primary-400));
    transform: scaleY(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.metric-card:hover::before,
.metric-card.highlighted::before {
    transform: scaleY(1);
}

.metric-card.highlighted {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.metric-value {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.metric-value span:first-child {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.metric-trend {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-trend.positive {
    color: var(--success-700);
    background: var(--success-50);
    border: 1px solid var(--success-200);
}

.metric-trend.negative {
    color: var(--error-700);
    background: var(--error-50);
    border: 1px solid var(--error-200);
}

.metric-trend svg {
    width: 12px;
    height: 12px;
}

.metric-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.metric-insight {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.chart-container {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--success-500));
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.chart-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.chart-container:hover::before {
    transform: scaleX(1);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.chart-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

.chart-legend {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.legend-color.completed {
    background: var(--primary-500);
}

.legend-color.in-progress {
    background: var(--warning-500);
}

.chart {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Insights Section */
.insights-section {
    margin-bottom: var(--space-8);
}

.insights-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-6) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.insights-title::before {
    content: '';
    font-size: var(--font-size-xl);
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
}

.insight-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    display: flex;
    gap: var(--space-4);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.insight-card.positive {
    border-left: 4px solid var(--success-500);
}

.insight-card.warning {
    border-left: 4px solid var(--warning-500);
}

.insight-card.info {
    border-left: 4px solid var(--primary-500);
}

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

.insight-card.expanded {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.insight-expanded {
    opacity: 0;
    animation: expandIn 0.3s ease-out forwards;
}

.insight-icon {

    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.insight-card.positive .insight-icon {
    background: var(--success-50);
    color: var(--success-600);
}

.insight-card.warning .insight-icon {
    background: var(--warning-50);
    color: var(--warning-600);
}

.insight-card.info .insight-icon {
    background: var(--primary-50);
    color: var(--primary-600);
}

.insight-icon svg {
    width: 24px;
    height: 24px;
}

.insight-content h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.insight-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Activity List */
.activity-list {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease-spring);
}

.activity-list:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.activity-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.activity-title::before {
    content: '';
    font-size: var(--font-size-xl);
}

.activity-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid transparent;
}

.activity-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    transform: translateX(4px);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.activity-icon.task {
    background: var(--success-50);
    color: var(--success-600);
}

.activity-icon.project {
    background: var(--primary-50);
    color: var(--primary-600);
}

.activity-icon.meeting {
    background: var(--warning-50);
    color: var(--warning-600);
}

.activity-icon.update {
    background: var(--gray-100);
    color: var(--gray-600);
}

.activity-icon svg {
    width: 20px;
    height: 20px;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-text {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.activity-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.activity-time {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.activity-time svg {
    width: 12px;
    height: 12px;
}

.activity-user {
    font-weight: 500;
}

/* Refresh Button Enhancement */
#refreshAnalytics {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: var(--bg-widget);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
}

#refreshAnalytics:hover {
    background: var(--primary-50);
    border-color: var(--primary-200);
    color: var(--primary-600);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

#refreshAnalytics:active {
    transform: scale(0.95);
}

#refreshAnalytics svg {
    width: 20px;
    height: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .analytics-dashboard {
        padding: var(--space-6);
    }

    .charts-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-3);
    }

    .insights-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-3);
    }
}

@media (max-width: 768px) {
    .analytics-dashboard {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .dashboard-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
        margin-bottom: var(--space-6);
    }

    .dashboard-controls {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-title {
        font-size: var(--font-size-2xl);
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .metric-card {
        padding: var(--space-4);
    }

    .metric-value span:first-child {
        font-size: var(--font-size-2xl);
    }

    .charts-grid,
    .insights-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .chart-container,
    .activity-list {
        padding: var(--space-4);
    }

    .chart {
        height: 250px;
    }

    .insight-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-4);
    }

    .activity-item {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .activity-meta {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .analytics-dashboard {
        padding: var(--space-3);
    }

    .dashboard-title {
        font-size: var(--font-size-xl);
        flex-direction: column;
        gap: var(--space-2);
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        padding: var(--space-3);
    }

    .chart-container,
    .activity-list {
        padding: var(--space-3);
    }

    .chart {
        height: 200px;
    }
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.metric-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

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

.metric-card:hover::before {
    opacity: 1;
}

.metric-value {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.metric-trend {
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.metric-trend.positive {
    background: var(--success-100);
    color: var(--success-700);
}

.metric-trend.negative {
    background: var(--error-100);
    color: var(--error-700);
}

.metric-trend.neutral {
    background: var(--gray-100);
    color: var(--gray-700);
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: var(--space-2);
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6);
}

.chart-container {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
}

.chart-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.chart-header {
    margin-bottom: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.chart-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: var(--space-1) 0 0 0;
}

.chart {
    height: 200px;
    position: relative;
    display: flex;
    align-items: end;
    gap: var(--space-2);
    padding: var(--space-4) 0;
}

.chart-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--primary-500) 0%, var(--primary-600) 100%);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    min-width: 20px;
}

.chart-bar:hover {
    transform: scaleY(1.05);
    box-shadow: var(--shadow-md);
}

.chart-bar::after {
    content: attr(data-value);
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-elevated);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.chart-bar:hover::after {
    opacity: 1;
}

.chart-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border-color);
}

.chart-label {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 700;
    text-align: center;
    min-width: 40px;
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

.activity-list {
    padding: var(--space-6);
    border-top: 1px solid var(--border-color);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.activity-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    transition: all var(--duration-normal) var(--ease-spring);
    border: 1px solid transparent;
}

.activity-item:hover {
    transform: translateX(4px);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-spring);
}

.activity-item:hover .activity-icon {
    transform: scale(1.1);
}

.activity-icon.task {
    background: var(--primary-100);
    color: var(--primary-600);
}

.activity-icon.project {
    background: var(--success-100);
    color: var(--success-600);
}

.activity-icon.update {
    background: var(--error-100);
    color: var(--error-600);
}

.activity-content {
    flex: 1;
}

.activity-text {
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
    font-weight: 500;
}

.activity-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.activity-time {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.activity-time svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {

    .metrics-grid,
    .charts-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

    .chart {
        height: 150px;
    }
}

/* Enhanced Task System Styles */
.enhanced-task-system {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-md);
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.enhanced-task-system::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            var(--primary-500) 0%,
            var(--success-500) 50%,
            var(--primary-600) 100%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.enhanced-task-system:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-200);
}

/* Task System Header */
.task-system-header {
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.header-title {
    flex: 1;
    min-width: 250px;
}

.task-system-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-2) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.title-icon {
    font-size: var(--font-size-3xl);
    filter: none;
    -webkit-text-fill-color: initial;
}

.task-system-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500;
}

/* Task Stats */
.task-stats {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.stat-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    min-width: 100px;
    text-align: center;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-500);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card.completed::before {
    background: var(--success-500);
}

.stat-card.in-progress::before {
    background: var(--warning-500);
}

.stat-card.overdue::before {
    background: var(--error-500);
}

.stat-number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-600);
    margin-bottom: var(--space-1);
    line-height: 1;
}

.stat-card.completed .stat-number {
    color: var(--success-600);
}

.stat-card.in-progress .stat-number {
    color: var(--warning-600);
}

.stat-card.overdue .stat-number {
    color: var(--error-600);
}

.stat-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Task Controls */
.task-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.search-and-filters {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    flex-wrap: wrap;
}

.search-container {
    position: relative;
    min-width: 250px;
    flex: 1;
    max-width: 400px;
}

.task-search {
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: border-color var(--duration-normal) var(--ease-in-out), box-shadow var(--duration-normal) var(--ease-in-out);
    outline: none;
}

.task-search:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-sm);
}

.search-icon {
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    pointer-events: none;
}

.filter-controls {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.enhanced-select {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    min-width: 140px;
    outline: none;
}

.enhanced-select:hover {
    border-color: var(--border-hover);
}

.enhanced-select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.action-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.view-toggle {
    display: flex;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    border: 1px solid var(--border-color);
}

.view-btn {
    padding: var(--space-2);
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-btn svg {
    width: 18px;
    height: 18px;
}

.view-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.view-btn.active {
    background: var(--primary-500);
    color: white;
    box-shadow: var(--shadow-sm);
}

.enhanced-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.enhanced-btn svg {
    width: 18px;
    height: 18px;
}

.enhanced-btn.primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    box-shadow: var(--shadow-md);
}

.enhanced-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.enhanced-btn.secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.enhanced-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Task Content Area */
.task-content {
    padding: var(--space-6);
    background: var(--bg-primary);
}

/* Card View Styles */
.task-cards-container {
    width: 100%;
}

.task-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-5);
    /* Prevent flash during initial render */
    contain: layout style;
    will-change: contents;
}

.enhanced-task-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-spring),
        box-shadow var(--duration-normal) var(--ease-spring),
        border-color var(--duration-normal) var(--ease-spring);
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    /* Prevent flash during initial render */
    opacity: 1;
    visibility: visible;
    contain: layout style;
}

.enhanced-task-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-500);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.enhanced-task-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-200);
}

.enhanced-task-card:hover::before {
    opacity: 1;
}

.enhanced-task-card.overdue {
    border-color: var(--error-200);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--error-50) 100%);
}

.enhanced-task-card.overdue::before {
    background: var(--error-500);
}

.enhanced-task-card.completed {
    border-color: var(--success-200);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--success-50) 100%);
}

.enhanced-task-card.completed::before {
    background: var(--success-500);
}

.enhanced-task-card.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
    z-index: 1000;
}

/* Task Card Header */
.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.task-priority {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.task-priority.high {
    background: var(--error-100);
    color: var(--error-700);
    border: 1px solid var(--error-200);
}

.task-priority.medium {
    background: var(--warning-100);
    color: var(--warning-700);
    border: 1px solid var(--warning-200);
}

.task-priority.low {
    background: var(--success-100);
    color: var(--success-700);
    border: 1px solid var(--success-200);
}

.priority-icon {
    font-size: var(--font-size-sm);
}

.action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
    box-shadow: var(--shadow-sm);
}

.action-btn svg {
    width: 16px;
    height: 16px;
}

/* Task Card Content */
.task-card-content {
    margin-bottom: var(--space-4);
}

.task-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}

.task-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.task-tag {
    padding: var(--space-1) var(--space-2);
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid var(--primary-200);
}

/* Task Progress */
.task-card-progress {
    margin-bottom: var(--space-4);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.progress-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.progress-percentage {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-600);
}

.enhanced-progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-in-out);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    /* Removed shimmer animation to prevent distraction */
}

/* Task Card Meta */
.task-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

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

.assignee-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    border: 2px solid var(--bg-elevated);
    box-shadow: var(--shadow-sm);
}

.assignee-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.task-meta-items {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.meta-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.due-date.overdue {
    color: var(--error-600);
    font-weight: 600;
}

/* Task Status Badge */
.task-status-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

.task-status-badge.pending {
    background: var(--warning-100);
    color: var(--warning-700);
    border: 1px solid var(--warning-200);
}

.task-status-badge.in-progress {
    background: var(--primary-100);
    color: var(--primary-700);
    border: 1px solid var(--primary-200);
}

.task-status-badge.completed {
    background: var(--success-100);
    color: var(--success-700);
    border: 1px solid var(--success-200);
}

/* Empty State */
.empty-state-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: var(--space-8);
}

.empty-state-content {
    text-align: center;
    max-width: 400px;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    background: var(--primary-50);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-500);
}

.empty-state-icon svg {
    width: 40px;
    height: 40px;
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-state-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-6) 0;
    line-height: 1.5;
}

/* List View Styles */
.task-list-container {
    width: 100%;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.task-list-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.task-list-body {
    max-height: none;
    overflow-y: visible;
}

.task-list-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    cursor: pointer;
    align-items: center;
}

.task-list-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

.task-list-item:last-child {
    border-bottom: none;
}

.task-list-item.overdue {
    background: linear-gradient(90deg, var(--error-50) 0%, transparent 100%);
    border-left: 4px solid var(--error-500);
}

.task-title-cell h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.task-title-cell p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-tags-inline {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.task-tag-small {
    padding: 2px var(--space-1);
    background: var(--primary-50);
    color: var(--primary-600);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 500;
}

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

.status-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.status-badge.pending {
    background: var(--warning-100);
    color: var(--warning-700);
}

.status-badge.in-progress {
    background: var(--primary-100);
    color: var(--primary-700);
}

.status-badge.completed {
    background: var(--success-100);
    color: var(--success-700);
}

.priority-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.priority-badge.high {
    color: var(--error-700);
}

.priority-badge.medium {
    color: var(--warning-700);
}

.priority-badge.low {
    color: var(--success-700);
}

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

.mini-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-text {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 35px;
}

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

/* Kanban View Styles */
.kanban-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    min-height: 500px;
}

.kanban-column {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.kanban-header {
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-header h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.task-count {
    background: var(--primary-100);
    color: var(--primary-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.kanban-tasks {
    padding: var(--space-4);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.kanban-task-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: var(--space-3);
    transition: all var(--duration-normal) var(--ease-spring);
    cursor: grab;
    box-shadow: var(--shadow-sm);
}

.kanban-task-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.kanban-task-card.dragging {
    opacity: 0.5;
    transform: rotate(3deg);
    cursor: grabbing;
}

.kanban-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.priority-indicator {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
}

.priority-indicator.high {
    background: var(--error-100);
}

.priority-indicator.medium {
    background: var(--warning-100);
}

.priority-indicator.low {
    background: var(--success-100);
}

.card-menu-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.card-menu-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.card-menu-btn svg {
    width: 14px;
    height: 14px;
}

.kanban-task-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
}

.kanban-task-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.kanban-task-tags {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.task-tag-mini {
    padding: 2px var(--space-1);
    background: var(--primary-50);
    color: var(--primary-600);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 500;
}

.kanban-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assignee-avatar-small {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    border: 1px solid var(--border-color);
}

.due-date-mini {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.due-date-mini.overdue {
    color: var(--error-600);
    font-weight: 600;
}

/* Task Modal Styles */
.task-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.task-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-color);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    transform: scale(0.9);
    transition: transform var(--duration-normal) var(--ease-spring);
}

.task-modal.active .modal-content {
    transform: scale(1);
}

.modal-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
}

.modal-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
}

.modal-close svg {
    width: 18px;
    height: 18px;
}

/* Task Form Styles */
.task-form {
    padding: var(--space-6);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-row:has(.form-group:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: all var(--duration-normal) var(--ease-in-out);
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
    margin-top: var(--space-6);
}

/* Notification Styles */
.task-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    padding: var(--space-4);
    max-width: 300px;
    transform: translateX(100%);
    transition: all var(--duration-normal) var(--ease-spring);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.task-notification.show {
    transform: translateX(0);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .task-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .kanban-container {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .task-list-header,
    .task-list-item {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .task-list-header .assignee-col,
    .task-list-header .priority-col,
    .task-list-header .progress-col,
    .task-list-header .due-col,
    .task-list-item .assignee-col,
    .task-list-item .priority-col,
    .task-list-item .progress-col,
    .task-list-item .due-col {
        display: none;
    }
}

@media (max-width: 768px) {
    .task-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .search-and-filters {
        flex-direction: column;
    }

    .filter-controls {
        justify-content: stretch;
    }

    .enhanced-select {
        min-width: auto;
        flex: 1;
    }

    .action-controls {
        justify-content: space-between;
    }

    .task-cards-grid {
        grid-template-columns: 1fr;
    }

    .header-content {
        flex-direction: column;
        align-items: stretch;
    }

    .task-stats {
        flex-direction: column;
    }

    .form-row:has(.form-group:nth-child(2)) {
        grid-template-columns: 1fr;
    }
}

/* Animation Classes */
.task-card-enter {
    animation: slideInUp 0.3s var(--ease-spring);
}

.task-card-exit {
    animation: slideOutDown 0.3s var(--ease-spring);
}


/* Quick Actions Panel */
.quick-actions-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 250px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.quick-actions-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.panel-header {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3 {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.close-panel {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.close-panel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.close-panel svg {
    width: 16px;
    height: 16px;
}

.panel-content {
    padding: var(--space-4);
}

.quick-action-item {
    margin-bottom: var(--space-3);
}

.quick-action-btn {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.quick-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--primary-300);
    transform: translateY(-1px);
}

.quick-action-btn svg {
    width: 16px;
    height: 16px;
    color: var(--primary-500);
}

/* Enhanced Task System Styles - Removed duplicate, using enhanced-task-system.css */

/* Task System Header */
.task-system-header {
    background: var(--bg-widget);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.header-title {
    flex: 1;
    min-width: 200px;
}

.task-system-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.section-icon-svg {
    width: 32px;
    height: 32px;
    color: var(--primary-600);
    flex-shrink: 0;
    animation: gentle-bounce 3s ease-in-out infinite;
}


/* Remove title icon styling */

.task-system-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500;
    line-height: 1.6;
    max-width: 600px;
}

/* Enhanced Task Stats */
.task-stats {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: stretch;
}

.stat-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid rgba(99, 102, 241, 0.1);
    min-width: 140px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(20px);
}

.stat-card.animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="dark"] .stat-card {
    background: rgba(30, 41, 59, 0.8);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-500);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.stat-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-lg);
    border-color: rgba(99, 102, 241, 0.3);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card.completed::before {
    background: var(--success-500);
}

.stat-card.in-progress::before {
    background: var(--warning-500);
}

.stat-card.overdue::before {
    background: var(--error-500);
}

.stat-card.ai-score::before {
    background: linear-gradient(90deg, var(--primary-500), var(--success-500));
}

.stat-icon {
    font-size: var(--font-size-2xl);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    background: var(--primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease-spring);
}

.stat-card.completed .stat-icon {
    background: var(--success-50);
}

.stat-card.in-progress .stat-icon {
    background: var(--warning-50);
}

.stat-card.overdue .stat-icon {
    background: var(--error-50);
}

.stat-info {
    flex: 1;
}

.stat-number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-600);
    margin-bottom: var(--space-1);
    line-height: 1;
    transition: all var(--duration-normal) var(--ease-spring);
}

.stat-card.completed .stat-number {
    color: var(--success-600);
}

.stat-card.in-progress .stat-number {
    color: var(--warning-600);
}

.stat-card.overdue .stat-number {
    color: var(--error-600);
}

.stat-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* Enhanced Task Controls */
.task-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.search-and-filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    flex-wrap: wrap;
    min-width: 200px;
}

.search-container {
    position: relative;
    min-width: 180px;
    flex: 1;
    max-width: 300px;
}

.task-search {
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 400;
    transition: border-color var(--duration-normal) var(--ease-in-out), box-shadow var(--duration-normal) var(--ease-in-out);
    outline: none;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .task-search {
    background: rgba(30, 41, 59, 0.8);
}

.task-search:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md);
}

.search-icon {
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    pointer-events: none;
    transition: color var(--duration-normal) var(--ease-in-out);
}

.task-search:focus+.search-icon {
    color: var(--primary-500);
}

.enhanced-select {
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    min-width: 140px;
    outline: none;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .enhanced-select {
    background: rgba(30, 41, 59, 0.8);
}

.enhanced-select:hover {
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.enhanced-select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md);
}

/* Enhanced Action Controls */
.action-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.view-toggle {
    display: flex;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .view-toggle {
    background: rgba(30, 41, 59, 0.8);
}

.view-btn {
    padding: var(--space-2);
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.view-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.view-btn:hover::before {
    width: 100px;
    height: 100px;
}

.view-btn svg {
    width: 20px;
    height: 20px;
    z-index: 1;
    position: relative;
}

.view-btn:hover {
    color: var(--text-primary);
    transform: scale(1.05);
}

.view-btn.active {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

.enhanced-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.enhanced-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.enhanced-btn:hover::before {
    width: 300px;
    height: 300px;
}

.enhanced-btn svg {
    width: 18px;
    height: 18px;
    z-index: 1;
    position: relative;
}

.enhanced-btn.primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
}

.enhanced-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.enhanced-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-500), var(--primary-500));
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-in-out);
}

.confidence-text {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.impact-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.impact-badge.high {
    background: var(--error-100);
    color: var(--error-700);
}

.impact-badge.medium {
    background: var(--warning-100);
    color: var(--warning-700);
}

.impact-badge.low {
    background: var(--success-100);
    color: var(--success-700);
}

.insight-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.insight-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.insight-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
}

.insight-action-btn svg {
    width: 14px;
    height: 14px;
}

.insight-action-btn.primary {
    background: var(--primary-500);
    color: white;
}

.insight-action-btn.primary:hover {
    background: var(--primary-600);
    transform: translateY(-1px);
}

.insight-action-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.insight-action-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

/* Performance Analytics */
.task-analytics {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.task-analytics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--success-500), var(--primary-500), var(--warning-500));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.analytics-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    background: linear-gradient(135deg, var(--success-600), var(--primary-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.analytics-metric {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    border: 1px solid rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(20px);
}

[data-theme="dark"] .analytics-metric {
    background: rgba(30, 41, 59, 0.8);
}

.analytics-metric.animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.analytics-metric:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.metric-icon {
    font-size: var(--font-size-2xl);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    background: var(--primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-content {
    flex: 1;
}

.metric-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    line-height: 1;
}

.metric-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.metric-trend {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
}

.metric-trend.positive {
    background: var(--success-100);
    color: var(--success-700);
}

.metric-trend.negative {
    background: var(--error-100);
    color: var(--error-700);
}

.metric-trend.neutral {
    background: var(--gray-100);
    color: var(--gray-700);
}

.insight-card.positive .insight-icon {
    background: var(--success-50);
}

.insight-card.warning .insight-icon {
    background: var(--warning-50);
}

.insight-content {
    flex: 1;
}

.insight-content h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}

.insight-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.5;
}

.insight-metric {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--primary-600);
    padding: var(--space-1) var(--space-3);
    background: var(--primary-50);
    border-radius: var(--radius-full);
    display: inline-block;
    border: 1px solid var(--primary-200);
}

.insight-card.positive .insight-metric {
    color: var(--success-600);
    background: var(--success-50);
    border-color: var(--success-200);
}

.insight-card.warning .insight-metric {
    color: var(--warning-600);
    background: var(--warning-50);
    border-color: var(--warning-200);
}

/* Enhanced Task Cards - Update existing style */
.enhanced-task-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.enhanced-task-card.animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="dark"] .enhanced-task-card {
    background: rgba(30, 41, 59, 0.8);
}

.enhanced-task-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-500);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.enhanced-task-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.enhanced-task-card:hover::before {
    opacity: 1;
}

.enhanced-task-card.overdue {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(254, 242, 242, 0.8) 100%);
}

[data-theme="dark"] .enhanced-task-card.overdue {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.8) 0%,
            rgba(55, 48, 48, 0.8) 100%);
}

.enhanced-task-card.overdue::before {
    background: var(--error-500);
    opacity: 1;
}

.enhanced-task-card.completed {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(240, 253, 244, 0.8) 100%);
}

[data-theme="dark"] .enhanced-task-card.completed {
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.8) 0%,
            rgba(34, 48, 42, 0.8) 100%);
}

.enhanced-task-card.completed::before {
    background: var(--success-500);
    opacity: 1;
}

/* Backward Compatibility for existing task-system class */
.task-system {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    margin: 0 !important;
    padding: 0 !important;
}

.task-system:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

@media (max-width: 768px) {
    .task-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

    .task-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .task-header-row {
        flex-direction: column;
        gap: var(--space-3);
    }

    .task-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* Weather Widget Styles */
.weather-widget {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

.weather-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.weather-widget:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.weather-widget:hover::before {
    opacity: 1;
}

.weather-header {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.weather-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.weather-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
}

.weather-location {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.location-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.9);
}

.weather-content {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
}

.current-weather {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: center;
    margin-bottom: var(--space-6);
}

.weather-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.temperature {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.temperature-unit {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-secondary);
}

.weather-description {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.weather-details {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.weather-detail {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.weather-detail svg {
    width: 16px;
    height: 16px;
    color: var(--primary-500);
}

.weather-icon {
    width: 80px;
    height: 80px;
    color: var(--primary-500);
    animation: float 3s ease-in-out infinite;
}


.forecast {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-6);
}

.forecast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.forecast-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.forecast-toggle {
    display: flex;
    gap: var(--space-2);
}

.toggle-btn {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.toggle-btn.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

.toggle-btn:hover:not(.active) {
    border-color: var(--primary-500);
    color: var(--primary-500);
}

.forecast-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
}

.forecast-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--duration-normal) var(--ease-spring);
}

.forecast-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.forecast-day {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.forecast-icon {
    width: 32px;
    height: 32px;
    color: var(--primary-500);
    margin: var(--space-2) auto;
}

.forecast-temp {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.forecast-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

.weather-error {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.weather-error svg {
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.weather-error h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.weather-error p {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* Team Spotlight Text Readability Fixes */
.team-spotlight .event-title,
.team-spotlight .event-time,
.team-spotlight .member-role,
.team-spotlight .member-department,
.team-spotlight .achievements-list li,
.team-spotlight .skill-tag {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

.team-spotlight .event-time {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* Fix all components with faded text */
.company-news .news-excerpt,
.company-news .news-meta,
.analytics-dashboard .metric-insight,
.analytics-dashboard .activity-meta,
.weather-widget .weather-details,
.task-system .task-description,
.task-system .task-meta,
.knowledge-hub .article-meta,
.achievement-system .achievement-description,
.collaboration-hub .project-meta,
.company-culture-showcase .story-text,
.company-culture-showcase .value-description {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* Ensure all primary text is sufficiently dark */
h1,
h2,
h3,
h4,
h5,
h6,
.widget-title,
.section-title,
.card-title,
.member-name,
.task-name,
.news-headline,
.event-title,
.chart-title,
.metric-label {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Fix secondary text elements */
.meta-text,
.description-text,
.subtitle-text,
.helper-text,
.caption-text {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* Specific fixes for upcoming events section */
.upcoming-events .event-title,
.events-list .event-title {
    color: white !important;
    font-weight: 600 !important;
    font-size: var(--font-size-sm) !important;
}

.upcoming-events .event-time,
.events-list .event-time {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    font-size: var(--font-size-xs) !important;
}

/* Enhanced contrast for small text */
.font-size-xs,
.text-xs {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

.font-size-sm,
.text-sm {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

.insight-card h4 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.insight-card p {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* Ensure sufficient contrast in dark mode */
[data-theme="dark"] .team-spotlight .event-title,
[data-theme="dark"] .team-spotlight .member-name,
[data-theme="dark"] .upcoming-events .event-title,
[data-theme="dark"] .events-list .event-title {
    color: var(--text-primary-dark) !important;
}

[data-theme="dark"] .team-spotlight .event-time,
[data-theme="dark"] .upcoming-events .event-time,
[data-theme="dark"] .events-list .event-time {
    color: var(--text-secondary-dark) !important;
}

/* Unified Search Styles */
.search-container {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

.search-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.search-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.search-container:hover::before {
    opacity: 1;
}

.search-header {
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    border-bottom: 1px solid var(--border-color);
}

.search-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.search-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
}

.search-input-container {
    position: relative;
    margin-bottom: var(--space-4);
}

.search-input {
    width: 100%;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: all var(--duration-normal) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
    transform: translateY(-1px);
}

.search-input::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
}

.search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: color var(--duration-normal) var(--ease-in-out);
}

.search-input:focus+.search-icon {
    color: var(--primary-500);
}

.search-filters {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.filter-chip {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.filter-chip:hover {
    border-color: var(--primary-500);
    color: var(--primary-500);
    background: var(--primary-50);
}

.filter-chip.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

.search-content {
    padding: var(--space-6);
}

.search-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.results-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

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

.sort-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.sort-select {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.sort-select:hover {
    border-color: var(--primary-500);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.search-placeholder {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.placeholder-icon {
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.placeholder-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.placeholder-description {
    margin: 0;
    font-size: var(--font-size-sm);
}

.search-result {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: var(--space-4);
}

.search-result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-500);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.search-result:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.search-result:hover::before {
    opacity: 1;
}

.result-icon {
    width: 40px;
    height: 40px;
    color: var(--primary-500);
    flex-shrink: 0;
}

.result-content {
    flex: 1;
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-3);
}

.result-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.result-actions {
    display: flex;
    gap: var(--space-2);
}

.result-action {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-action:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
    color: var(--primary-600);
    transform: translateY(-1px);
}

.result-meta {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.result-author,
.result-date,
.result-category,
.result-role,
.result-department,
.result-email,
.result-lead,
.result-status,
.result-progress {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.result-status.primary {
    background: var(--primary-100);
    color: var(--primary-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.result-status.success {
    background: var(--success-100);
    color: var(--success-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.result-status.warning {
    background: var(--warning-100);
    color: var(--warning-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.result-tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.result-tag {
    padding: var(--space-1) var(--space-2);
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.search-loading,
.search-empty {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.search-loading svg,
.search-empty svg {
    margin-bottom: var(--space-4);
    /* Removed spin animation */
}

.search-empty svg {
    animation: none;
    opacity: 0.5;
}

.search-loading p,
.search-empty h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.search-empty p {
    margin: 0;
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .search-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-stats {
        flex-direction: column;
        gap: var(--space-3);
        align-items: flex-start;
    }

    .result-header {
        flex-direction: column;
        gap: var(--space-2);
    }

    .result-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* Command Palette Styles */
.command-palette {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-8);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.command-palette.active {
    display: flex;
    opacity: 1;
}

.palette-container {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: all var(--duration-normal) var(--ease-spring);
}

.command-palette.active .palette-container {
    transform: translateY(0) scale(1);
}

.palette-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.search-container {
    position: relative;
    flex: 1;
}

.search-input {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 500;
    transition: all var(--duration-normal) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.search-input::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
}

.search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: color var(--duration-normal) var(--ease-in-out);
}

.close-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
    color: var(--primary-600);
    transform: translateY(-1px);
}

.commands-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--space-2);
}

.command-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    margin-bottom: var(--space-1);
    border: 1px solid transparent;
}

.command-item:hover,
.command-item.selected {
    background: var(--primary-50);
    border-color: var(--primary-200);
}

.command-icon {
    width: 24px;
    height: 24px;
    color: var(--primary-500);
    flex-shrink: 0;
}

.command-content {
    flex: 1;
    min-width: 0;
}

.command-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.command-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-1);
}

.command-category {
    padding: var(--space-1) var(--space-2);
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

.command-shortcut {
    padding: var(--space-1) var(--space-2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.palette-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.shortcuts-help {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: center;
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.shortcut-hint {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-weight: 600;
}

.no-results {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-secondary);
}

.no-results svg {
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.no-results h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.no-results p {
    margin: 0;
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .command-palette {
        padding: var(--space-4);
    }

    .palette-container {
        max-height: 90vh;
    }

    .command-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .command-shortcut,
    .command-category {
        align-self: flex-end;
    }

    .shortcuts-help {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* Header Styles */
app-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

.header {
    height: 64px;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    min-width: fit-content;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: var(--font-size-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-spring);
}

.logo:hover .logo-icon {
    transform: rotate(5deg) scale(1.1);
    box-shadow: var(--shadow-xl);
}

.logo-text {
    font-weight: 700;
    font-size: var(--font-size-xl);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.menu-button {
    display: none;
    padding: var(--space-2);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--duration-normal) var(--ease-in-out);
    background: none;
    border: none;
    cursor: pointer;
}

.menu-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.menu-button svg {
    width: 24px;
    height: 24px;
}

.action-button {
    padding: var(--space-2);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
    background: none;
    border: none;
    cursor: pointer;
}

[data-theme="dark"] .action-button {
    color: var(--gray-400);
}

[data-theme="dark"] .action-button:hover {
    color: var(--gray-200);
    background: var(--gray-700);
}

[data-theme="dark"] .action-button::before {
    background: rgba(255, 255, 255, 0.05);
}

.action-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.action-button:hover::before {
    width: 40px;
    height: 40px;
}

.action-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.action-button svg {
    width: 20px;
    height: 20px;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.action-button:hover svg {
    transform: scale(1.1);
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--error-500);
    border-radius: 50%;
    border: 2px solid var(--bg-elevated);
}

[data-theme="dark"] .notification-badge {
    background: var(--error-400);
    border-color: var(--gray-800);
}

.user-menu {
    display: flex;
    align-items: center;
}

.user-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.user-button:hover {
    background: var(--bg-hover);
    border-color: var(--primary-500);
}

[data-theme="dark"] .user-button {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-200);
}

[data-theme="dark"] .user-button:hover {
    background: var(--gray-700);
    border-color: var(--gray-600);
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: var(--font-size-sm);
}

.user-avatar svg {
    width: 100%;
    height: 100%;
    color: white;
}

.user-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.chevron-down {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.user-button:hover .chevron-down {
    transform: rotate(180deg);
}

/* User dropdown styles */
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 280px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s var(--ease-out);
    z-index: 1000;
}

[data-theme="dark"] .user-dropdown {
    background: var(--gray-800);
    border-color: var(--gray-700);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.user-avatar-large {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-lg);
}

.user-details {
    flex: 1;
}

.user-full-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.user-email {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.5rem 0;
}

[data-theme="dark"] .dropdown-divider {
    background: var(--gray-700);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: none;
    border: none;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .dropdown-item {
    color: var(--gray-200);
}

[data-theme="dark"] .dropdown-item svg {
    color: var(--gray-400);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--gray-700);
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

.dropdown-item svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--text-secondary);
}

.logout-btn {
    color: var(--error-500);
}

.logout-btn:hover {
    background: var(--error-50);
    color: var(--error-600);
}

.logout-btn svg {
    color: var(--error-500);
}

@media (max-width: 768px) {
    .menu-button {
        display: block;
    }

    .header-left {
        max-width: none;
    }

    .logo-text {
        display: none;
    }

    .user-name {
        display: none;
    }
}

/* Calendar Styles */
.calendar-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    border: 1px solid var(--border-color);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.date-navigation {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.date-navigation h1 {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    min-width: 300px;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.view-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.view-switcher {
    display: flex;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-1);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.view-btn {
    padding: var(--space-3) var(--space-6);
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.view-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-spring);
    z-index: -1;
}

.view-btn.active {
    color: white;
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.view-btn.active::before {
    transform: scaleX(1);
}

.view-btn:hover:not(.active) {
    color: var(--primary-600);
    background: var(--primary-50);
    transform: translateY(-1px);
}

/* Calendar Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto repeat(6, 1fr);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Month View Styles */
.calendar-day-headers {
    grid-row: 1;
    display: contents;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--text-secondary);
}

.calendar-day-header {
    padding: var(--space-3);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    grid-row: 1;
}

.calendar-day-header:last-child {
    border-right: none;
}

/* Week view styles - for when week view is active */
.calendar-grid.week-view {
    grid-template-columns: 80px repeat(7, 1fr);
    grid-template-rows: auto 1fr;
}

/* Day view styles - for when day view is active */
.calendar-grid.day-view {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto 1fr;
}

.calendar-day-cell {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-2);
    position: relative;
    background: var(--bg-primary);
    transition: all var(--duration-normal) var(--ease-spring);
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    grid-row: span 1;
}

.calendar-day-cell:last-child {
    border-right: none;
}

/* Remove bottom border from last row */
.calendar-day-cell:nth-child(n+36):nth-child(-n+42) {
    border-bottom: none;
}

.calendar-day-cell:hover {
    background: var(--bg-hover);
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.calendar-day-cell.today {
    background: var(--primary-50);
    border-color: var(--primary-500);
    box-shadow: var(--shadow-md);
}

.calendar-day-cell.today .day-number {
    color: var(--primary-700);
    font-weight: 700;
}

.calendar-day-cell.other-month {
    color: var(--text-muted);
    background: var(--bg-secondary);
    opacity: 0.6;
}

.calendar-day-cell.other-month:hover {
    opacity: 0.8;
}

.day-number {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: inherit;
    text-align: right;
}

.day-events {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--space-1);
}

.event-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-500);
    margin-bottom: 2px;
    transition: all var(--duration-normal) var(--ease-spring);
}

.event-indicator:hover {
    transform: scale(1.2);
    background: var(--primary-600);
}

/* Week View Styles */
.time-column {
    width: 80px;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.time-column::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--border-color) 50%, transparent 100%);
}

.time-slot {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-2);
    position: relative;
    transition: all var(--duration-normal) var(--ease-in-out);
    flex-shrink: 0;
}

.time-slot:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.time-slot:last-child {
    border-bottom: none;
}

/* Add a spacer to align with day headers */
.time-slot:first-child {
    margin-top: 80px;
    /* Match the height of day headers */
}

.day-columns {
    display: flex;
    flex: 1;
}

.day-column {
    flex: 1;
    border-right: 1px solid var(--border-color);
    min-height: 540px;
    position: relative;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.day-column.full-width {
    flex: 1;
    min-width: 100%;
}

.day-column:hover {
    background: var(--bg-hover);
}

.day-column:last-child {
    border-right: none;
}

.day-header {
    padding: var(--space-4);
    text-align: center;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    position: relative;
    overflow: hidden;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.day-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
    z-index: -1;
}

.day-column:hover .day-header::before {
    opacity: 0.1;
}

.day-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.day-date {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.events-container {
    position: relative;
    height: calc(100% - 80px);
}

.event-card {
    position: absolute;
    left: var(--space-2);
    right: var(--space-2);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-spring);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.event-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--success-500), var(--warning-500));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.event-card:hover::before {
    opacity: 1;
}

.event-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
}

.event-content p {
    font-size: var(--font-size-xs);
    margin: 0 0 var(--space-2) 0;
    opacity: 0.9;
}

.event-attendees {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.event-attendees img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
}

.attendee-count {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

/* Upcoming Events */
.upcoming-events {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-6);
    flex-shrink: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.section-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.event-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
}

.event-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.event-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.event-time .date {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.event-time .time {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.event-content {
    flex: 1;
}

.event-content h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.event-content p {
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.5;
}

.event-meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.event-actions {
    display: flex;
    gap: var(--space-2);
}

/* Schedule Meeting */
.schedule-meeting {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-xl);
    flex-shrink: 0;
}

.schedule-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
}

.schedule-content p {
    margin: 0 0 var(--space-4) 0;
    opacity: 0.9;
}

.schedule-actions {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.schedule-actions .btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.schedule-actions .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.schedule-info {
    display: flex;
    gap: var(--space-6);
}

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

.info-item svg {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.info-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0;
}

.info-content p {
    font-size: var(--font-size-xs);
    margin: 0;
    opacity: 0.8;
}

/* Responsive Calendar */
@media (max-width: 1024px) {
    .calendar-overview {
        padding: var(--space-4);
    }

    .calendar-grid {
        grid-template-columns: repeat(7, 1fr);
    }

    .time-column {
        width: 100%;
        height: auto;
        flex-direction: row;
        overflow-x: auto;
    }

    .time-slot {
        height: 40px;
        min-width: 60px;
        flex-shrink: 0;
    }

    .day-columns {
        flex-direction: column;
    }

    .day-column {
        min-height: auto;
    }

    .day-column:last-child {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .calendar-overview {
        padding: var(--space-3);
        margin-bottom: var(--space-4);
    }

    .overview-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: stretch;
    }

    .date-navigation {
        justify-content: center;
    }

    .view-actions {
        justify-content: center;
    }

    .calendar-grid {
        grid-template-columns: repeat(7, 1fr);
        font-size: var(--font-size-xs);
    }

    .calendar-day-cell {
        min-height: 80px;
        padding: var(--space-1);
    }

    .day-number {
        font-size: var(--font-size-xs);
    }

    .event-item {
        flex-direction: column;
        gap: var(--space-3);
    }

    .event-actions {
        justify-content: center;
    }

    .schedule-actions {
        flex-direction: column;
    }

    .upcoming-events,
    .schedule-meeting {
        margin-bottom: var(--space-4);
    }
}

/* Modal Styles for Calendar */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease-out;
}

.modal.closing {
    animation: fadeOut 0.3s ease-out;
}

.modal-content {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
}

.modal.closing .modal-content {
    animation: slideDown 0.3s ease-out;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
}

.close-btn svg {
    width: 20px;
    height: 20px;
}

.modal-body {
    padding: var(--space-6);
}

.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: all var(--duration-normal) var(--ease-spring);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-row {
    display: flex;
    gap: var(--space-4);
}

.form-row .form-group {
    flex: 1;
}

.form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-6);
}

.event-details {
    color: var(--text-primary);
}

.event-details p {
    margin: var(--space-2) 0;
    color: var(--text-secondary);
}

.event-details .event-actions {
    margin-top: var(--space-4);
}



/* Team Page Styles */
.team-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.team-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.overview-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.overview-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.department-filters {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.filter-btn {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-color);
    background: var(--bg-widget);
    color: var(--text-secondary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    transition: left var(--duration-normal) var(--ease-in-out);
}

.filter-btn:hover {
    border-color: var(--primary-400);
    color: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-sm);
}

.filter-btn.active:hover {
    background: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.team-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.team-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.team-section:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
    position: relative;
    padding-left: var(--space-4);
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-400) 100%);
    border-radius: var(--radius-full);
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.team-member {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.team-member::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.team-member:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.team-member:hover::before {
    transform: scaleX(1);
}

.member-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    position: relative;
}

.member-avatar {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    border: 3px solid var(--bg-elevated);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.team-member:hover .member-avatar {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.member-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-elevated);
    box-shadow: var(--shadow-sm);
}

.member-status.online {
    background: var(--success-500);
}

.member-status.away {
    background: var(--warning-500);
}

.member-status.offline {
    background: var(--gray-400);
}

.member-info {
    flex: 1;
}

.member-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    line-height: 1.3;
}

.member-title {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

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

.contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-in-out);
    border: 1px solid var(--border-color);
}

.contact-link:hover {
    background: var(--primary-500);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-500);
}

.contact-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.contact-link:hover .contact-icon {
    transform: scale(1.1);
}

.member-skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.skill-tag {
    padding: var(--space-1) var(--space-3);
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid var(--primary-200);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.skill-tag:hover {
    background: var(--primary-100);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Skills Matrix */
.skills-matrix {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.matrix-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.matrix-cell {
    padding: var(--space-4);
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.matrix-header .matrix-cell {
    background: var(--bg-secondary);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-xs);
}

.matrix-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--duration-fast) var(--ease-in-out);
}

.matrix-row:hover {
    background: var(--bg-hover);
}

.matrix-row:last-child {
    border-bottom: none;
}

.matrix-row .matrix-cell {
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.matrix-row .matrix-cell:first-child {
    justify-content: flex-start;
    font-weight: 600;
    color: var(--text-primary);
}

.avatar-group {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    border: 2px solid var(--bg-elevated);
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.avatar-sm:hover {
    transform: scale(1.1);
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .member-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .overview-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .overview-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .team-overview {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .overview-header h1 {
        font-size: var(--font-size-2xl);
    }

    .department-filters {
        gap: var(--space-1);
    }

    .filter-btn {
        padding: var(--space-1) var(--space-3);
        font-size: var(--font-size-xs);
    }

    .member-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .team-section {
        padding: var(--space-4);
    }

    .member-header {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .member-contact {
        justify-content: center;
    }

    .skills-matrix {
        overflow-x: auto;
    }

    .matrix-header,
    .matrix-row {
        min-width: 600px;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .team-member {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .team-member:hover {
    border-color: var(--primary-400);
}

[data-theme="dark"] .skill-tag {
    background: var(--primary-900);
    color: var(--primary-200);
    border-color: var(--primary-700);
}

[data-theme="dark"] .skill-tag:hover {
    background: var(--primary-800);
}

[data-theme="dark"] .contact-link {
    background: var(--bg-secondary-dark);
    border-color: var(--border-color);
    color: var(--text-secondary-dark);
}

[data-theme="dark"] .contact-link:hover {
    background: var(--primary-600);
    color: white;
}

[data-theme="dark"] .skills-matrix {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .matrix-header {
    background: var(--bg-secondary-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .matrix-row:hover {
    background: var(--bg-hover-dark);
}

/* Projects Page Styles */
.projects-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.projects-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stat-card {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--primary-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.stat-card:hover .stat-icon {
    background: var(--primary-100);
    transform: scale(1.05);
}

.stat-icon svg {
    width: 24px;
    height: 24px;
}

.stat-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    line-height: 1.2;
}

.stat-change {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.stat-change.positive {
    color: var(--success-600);
}

.stat-change.negative {
    color: var(--error-600);
}

/* Documents Page Styles */
.documents-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.documents-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.document-categories {
    margin-bottom: var(--space-6);
}

.category-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.tab-btn {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-color);
    background: var(--bg-widget);
    color: var(--text-secondary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    transition: left var(--duration-normal) var(--ease-in-out);
}

.tab-btn:hover {
    border-color: var(--primary-400);
    color: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.tab-btn:hover::before {
    left: 100%;
}

.tab-btn.active {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-sm);
}

.tab-btn.active:hover {
    background: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.category-filters {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.filter-group label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    background: var(--bg-widget);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    min-width: 140px;
}

.filter-select:hover {
    border-color: var(--border-hover);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}

.document-card {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.document-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.document-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.document-card:hover::before {
    transform: scaleX(1);
}

.document-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-lg);
}

.document-icon.pdf {
    background: var(--error-500);
}

.document-icon.doc {
    background: var(--primary-500);
}

.document-icon.xls {
    background: var(--success-500);
}

.document-icon.ppt {
    background: var(--warning-500);
}

.document-icon svg {
    width: 24px;
    height: 24px;
}

/* Help Desk Page Styles */
.helpdesk-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.helpdesk-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.action-card {}

.action-icon svg {
    width: 32px;
    height: 32px;
}

.action-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.action-card p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

/* Resources Page Styles */
.resources-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.resources-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.resource-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.resource-category {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.resource-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.resource-category:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.resource-category:hover::before {
    transform: scaleX(1);
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.category-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.resource-category:hover .category-icon {
    background: var(--primary-100);
    transform: scale(1.05);
}

.category-icon svg {
    width: 24px;
    height: 24px;
}

.category-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.category-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.resource-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.resource-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-in-out);
    cursor: pointer;
}

.resource-item:hover {
    background: var(--bg-hover);
}

.resource-info {
    flex: 1;
}

.resource-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.resource-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Handbook Page Styles */
.handbook-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.handbook-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.handbook-section {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.handbook-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.handbook-section:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.handbook-section:hover::before {
    transform: scaleX(1);
}

.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.section-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.handbook-section:hover .section-icon {
    background: var(--primary-100);
    transform: scale(1.05);
}

.section-icon svg {
    width: 24px;
    height: 24px;
}

.section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.section-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.article-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.article-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-in-out);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.article-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

.article-icon {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.article-icon svg {
    width: 16px;
    height: 16px;
}

.article-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.article-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Benefits Page Styles */
.benefits-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.benefits-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.benefit-card {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.benefit-card:hover::before {
    transform: scaleX(1);
}

.benefit-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.benefit-icon {
    width: 48px;
    height: 48px;
    background: var(--success-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.benefit-card:hover .benefit-icon {
    background: var(--success-100);
    transform: scale(1.05);
}

.benefit-icon svg {
    width: 24px;
    height: 24px;
}

.benefit-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.benefit-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.benefit-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.detail-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.detail-item svg {
    width: 16px;
    height: 16px;
    color: var(--success-500);
}

/* Settings Page Styles */
.settings-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.settings-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.settings-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.settings-section {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.settings-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.settings-section:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.settings-section:hover::before {
    transform: scaleX(1);
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.setting-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.setting-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.setting-control {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 24px;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.toggle-switch.active {
    background: var(--primary-500);
}

.toggle-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
    transition: all var(--duration-fast) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
}

.toggle-switch.active::before {
    transform: translateX(24px);
}

/* Training Page Styles */
.training-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.training-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.course-card {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.course-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.course-card:hover::before {
    transform: scaleX(1);
}

.course-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.course-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.course-card:hover .course-icon {
    background: var(--primary-100);
    transform: scale(1.05);
}

.course-icon svg {
    width: 24px;
    height: 24px;
}

.course-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.course-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.course-progress {
    margin-bottom: var(--space-4);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 100%);
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--ease-in-out);
}

.progress-text {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
}

.course-actions {
    display: flex;
    gap: var(--space-2);
}

/* Responsive Design for All Pages */
@media (max-width: 1024px) {

    .stats-grid,
    .quick-actions-grid,
    .resource-categories,
    .handbook-sections,
    .benefits-grid,
    .settings-sections,
    .course-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .document-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {

    .projects-overview,
    .documents-overview,
    .helpdesk-overview,
    .resources-overview,
    .handbook-overview,
    .benefits-overview,
    .settings-overview,
    .training-overview {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .category-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        width: 100%;
    }

    .filter-select {
        width: 100%;
    }

    .stats-grid,
    .quick-actions-grid,
    .resource-categories,
    .handbook-sections,
    .benefits-grid,
    .settings-sections,
    .course-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .document-grid {
        grid-template-columns: 1fr;
    }

    .category-tabs {
        justify-content: center;
    }

    .tab-btn {
        flex: 1;
        text-align: center;
    }
}

/* Dark mode adjustments for all pages */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .document-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .resource-category,
[data-theme="dark"] .handbook-section,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .settings-section,
[data-theme="dark"] .course-card {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .document-card:hover,
[data-theme="dark"] .action-card:hover,
[data-theme="dark"] .resource-category:hover,
[data-theme="dark"] .handbook-section:hover,
[data-theme="dark"] .benefit-card:hover,
[data-theme="dark"] .settings-section:hover,
[data-theme="dark"] .course-card:hover {
    border-color: var(--primary-400);
}

[data-theme="dark"] .resource-item:hover,
[data-theme="dark"] .article-item:hover {
    background: var(--bg-hover-dark);
}

[data-theme="dark"] .toggle-switch {
    background: var(--gray-600);
}

[data-theme="dark"] .toggle-switch.active {
    background: var(--primary-600);
}

/* Additional Document Page Styles */
.document-content {
    flex: 1;
}

.document-content h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.document-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.document-meta {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

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

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.action-btn:hover {
    background: var(--primary-500);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-500);
}

.action-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.action-btn:hover svg {
    transform: scale(1.1);
}

/* Version History Styles */
.version-history {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.version-history:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.version-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.version-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.version-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.version-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    flex-shrink: 0;
}

.version-icon svg {
    width: 20px;
    height: 20px;
}

.version-content {
    flex: 1;
}

.version-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.version-content p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.version-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Upload Section Styles */
.upload-section {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 2px dashed var(--border-color);
    text-align: center;
    transition: all var(--duration-normal) var(--ease-in-out);
    cursor: pointer;
}

.upload-section:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.upload-content h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.upload-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.upload-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-bottom: var(--space-6);
}

.upload-info {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
}

.info-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.info-item svg {
    width: 20px;
    height: 20px;
    color: var(--primary-600);
}

.info-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.info-content p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
}

/* Additional Help Desk Styles */
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.ticket-item {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    cursor: pointer;
}

.ticket-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.ticket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.ticket-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.ticket-status {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.ticket-status.open {
    background: var(--warning-100);
    color: var(--warning-700);
}

.ticket-status.in-progress {
    background: var(--primary-100);
    color: var(--primary-700);
}

.ticket-status.resolved {
    background: var(--success-100);
    color: var(--success-700);
}

.ticket-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.ticket-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Additional Resources Styles */
.resource-search {
    margin-bottom: var(--space-6);
}

.search-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-widget);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* Additional Handbook Styles */
.handbook-search {
    margin-bottom: var(--space-6);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.search-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--duration-fast) var(--ease-in-out);
    cursor: pointer;
}

.search-result:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.result-icon {
    width: 32px;
    height: 32px;
    background: var(--primary-50);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    flex-shrink: 0;
}

.result-icon svg {
    width: 16px;
    height: 16px;
}

.result-content {
    flex: 1;
}

.result-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.result-excerpt {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Dark mode adjustments for new elements */
[data-theme="dark"] .action-btn {
    background: var(--bg-secondary-dark);
    border-color: var(--border-color);
    color: var(--text-secondary-dark);
}

[data-theme="dark"] .action-btn:hover {
    background: var(--primary-600);
    color: white;
}

[data-theme="dark"] .version-history,
[data-theme="dark"] .upload-section,
[data-theme="dark"] .ticket-item {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .upload-section:hover {
    background: var(--primary-900);
    border-color: var(--primary-400);
}

[data-theme="dark"] .version-item:hover,
[data-theme="dark"] .ticket-item:hover,
[data-theme="dark"] .search-result:hover {
    background: var(--bg-hover-dark);
}

[data-theme="dark"] .search-input {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
    color: var(--text-primary-dark);
}

[data-theme="dark"] .search-input:focus {
    border-color: var(--primary-400);
}

[data-theme="dark"] .info-item {
    background: var(--bg-elevated-dark);
    border-color: var(--border-color);
}

/* Enhanced Task System - AI Insights Visibility Fix */
.enhanced-task-system .ai-insights-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-task-system .ai-insights-grid {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-task-system .ai-insight-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.enhanced-task-system .ai-insight-card.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

/* Ensure insights are visible even during loading */
.enhanced-task-system.loading .ai-insights-section,
.enhanced-task-system.loading .ai-insights-grid,
.enhanced-task-system.loading .ai-insight-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Enhanced Task System - Task Controls Styling Fix */
.enhanced-task-system .task-controls {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    flex-wrap: wrap !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-4) !important;
    margin: var(--space-4) 0 !important;
    box-shadow: var(--shadow-sm) !important;
}

.enhanced-task-system .search-and-filters {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    flex: 1 !important;
    flex-wrap: wrap !important;
}

.enhanced-task-system .search-container {
    position: relative !important;
    min-width: 250px !important;
    flex: 1 !important;
    max-width: 400px !important;
}

.enhanced-task-system .task-search {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    outline: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.enhanced-task-system .task-search:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md) !important;
    transform: translateY(-1px) !important;
}

.enhanced-task-system .search-icon {
    position: absolute !important;
    left: var(--space-3) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--text-secondary) !important;
    pointer-events: none !important;
    transition: color var(--duration-normal) var(--ease-in-out) !important;
}

.enhanced-task-system .task-search:focus+.search-icon {
    color: var(--primary-500) !important;
}

.enhanced-task-system .filter-controls {
    display: flex !important;
    gap: var(--space-3) !important;
    flex-wrap: wrap !important;
}

.enhanced-task-system .enhanced-select {
    padding: var(--space-3) var(--space-4) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    min-width: 140px !important;
    outline: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.enhanced-task-system .enhanced-select:hover {
    border-color: var(--border-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.enhanced-task-system .enhanced-select:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px var(--primary-100) !important;
    transform: translateY(-1px) !important;
}

.enhanced-task-system .action-controls {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

.enhanced-task-system .view-toggle {
    display: flex !important;
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-1) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

.enhanced-task-system .view-btn {
    padding: var(--space-2) var(--space-3) !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

.enhanced-task-system .view-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px) !important;
}

.enhanced-task-system .view-btn.active {
    background: var(--primary-500) !important;
    color: var(--text-on-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.enhanced-task-system .enhanced-btn {
    padding: var(--space-3) var(--space-4) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    box-shadow: var(--shadow-sm) !important;
    outline: none !important;
}

.enhanced-task-system .enhanced-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--border-hover) !important;
}

.enhanced-task-system .enhanced-btn.primary {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
    border: none !important;
    box-shadow: var(--shadow-md) !important;
}

.enhanced-task-system .enhanced-btn.primary:hover {
    box-shadow: var(--shadow-xl) !important;
    transform: translateY(-2px) !important;
}

.enhanced-task-system .enhanced-btn.secondary {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.enhanced-task-system .enhanced-btn.secondary:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-hover) !important;
}

.enhanced-task-system .enhanced-btn svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform var(--duration-normal) var(--ease-in-out) !important;
}

.enhanced-task-system .enhanced-btn:hover svg {
    transform: scale(1.1) !important;
}

/* Knowledge Hub - Search and Controls Styling */
.knowledge-hub .hub-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    margin-bottom: var(--space-6) !important;
    padding: var(--space-4) !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-sm) !important;
}

.knowledge-hub .hub-title {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    font-size: var(--font-size-xl) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
}

.knowledge-hub .hub-title svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--primary-500) !important;
}

.knowledge-hub .hub-actions {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

.knowledge-hub .search-container {
    position: relative !important;
    min-width: 300px !important;
    max-width: 500px !important;
}

.knowledge-hub .search-input {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    outline: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.knowledge-hub .search-input:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md) !important;
    transform: translateY(-1px) !important;
}

.knowledge-hub .search-input::placeholder {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
}

.knowledge-hub .search-icon {
    position: absolute !important;
    left: var(--space-3) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--text-secondary) !important;
    pointer-events: none !important;
    transition: color var(--duration-normal) var(--ease-in-out) !important;
}

.knowledge-hub .search-input:focus+.search-icon {
    color: var(--primary-500) !important;
}

.knowledge-hub .btn-icon.small {
    padding: var(--space-2) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--shadow-sm) !important;
}

.knowledge-hub .btn-icon.small:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.knowledge-hub .btn-icon.small svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform var(--duration-normal) var(--ease-in-out) !important;
}

.knowledge-hub .btn-icon.small:hover svg {
    transform: scale(1.1) !important;
}

.knowledge-hub .hub-filters {
    margin-bottom: var(--space-6) !important;
    padding: var(--space-4) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-sm) !important;
}

.knowledge-hub .filter-chips {
    display: flex !important;
    gap: var(--space-2) !important;
    flex-wrap: wrap !important;
}

.knowledge-hub .filter-chip {
    padding: var(--space-2) var(--space-3) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all var(--duration-normal) var(--ease-in-out) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    box-shadow: var(--shadow-sm) !important;
}

.knowledge-hub .filter-chip:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.knowledge-hub .filter-chip.active {
    background: var(--primary-500) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--primary-500) !important;
    box-shadow: var(--shadow-md) !important;
}

.knowledge-hub .filter-chip .chip-icon {
    width: 16px !important;
    height: 16px !important;
    transition: transform var(--duration-normal) var(--ease-in-out) !important;
}

.knowledge-hub .filter-chip:hover .chip-icon {
    transform: rotate(180deg) !important;
}

/* Responsive design for knowledge hub */
@media (max-width: 768px) {
    .knowledge-hub .hub-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-3) !important;
    }

    .knowledge-hub .hub-actions {
        justify-content: space-between !important;
    }

    .knowledge-hub .search-container {
        min-width: auto !important;
        flex: 1 !important;
    }

    .knowledge-hub .filter-chips {
        justify-content: center !important;
    }
}

/* Header Content Protection */
.enhanced-task-system .task-system-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-task-system .header-content {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-task-system .header-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-task-system .task-system-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-task-system .task-system-subtitle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-task-system .header-stats {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-task-system .stat-card {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Responsive adjustments for new elements */
@media (max-width: 768px) {
    .document-meta {
        flex-direction: column;
        gap: var(--space-2);
    }

    .version-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .upload-actions {
        flex-direction: column;
        align-items: center;
    }

    .upload-info {
        flex-direction: column;
        gap: var(--space-3);
    }

    .ticket-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .ticket-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* Additional Help Desk Styles */
.ticket-system {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.ticket-system:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.ticket-filters {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tickets-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.ticket-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--duration-fast) var(--ease-in-out);
    cursor: pointer;
}

.ticket-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    transform: translateX(4px);
}

.ticket-content {
    flex: 1;
}

.ticket-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.ticket-content p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.ticket-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    flex-wrap: wrap;
}

.ticket-id {
    font-weight: 600;
    color: var(--primary-600);
}

.ticket-priority {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.ticket-priority.high {
    background: var(--error-100);
    color: var(--error-700);
}

.ticket-priority.medium {
    background: var(--warning-100);
    color: var(--warning-700);
}

.ticket-priority.low {
    background: var(--success-100);
    color: var(--success-700);
}

/* Knowledge Base Styles */
.knowledge-base {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.knowledge-base:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.article-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--duration-fast) var(--ease-in-out);
    cursor: pointer;
}

.article-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.article-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    flex-shrink: 0;
}

.article-icon svg {
    width: 20px;
    height: 20px;
}

.article-content {
    flex: 1;
}

.article-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.article-content p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.article-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Support Contact Styles */
.support-contact {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.support-contact:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.contact-content {
    text-align: center;
    margin-bottom: var(--space-6);
}

.contact-content h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.contact-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.contact-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

/* Additional Resources Styles */
.category-card {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.category-card:hover::before {
    transform: scaleX(1);
}

.category-card h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.category-card p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.resource-count {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid var(--primary-200);
}

.recent-resources,
.popular-resources {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.recent-resources:hover,
.popular-resources:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.resource-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--duration-fast) var(--ease-in-out);
    cursor: pointer;
}

.resource-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.resource-type {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    flex-shrink: 0;
}

.resource-type.template {
    background: var(--primary-500);
}

.resource-type.brand {
    background: var(--warning-500);
}

.resource-type.guide {
    background: var(--success-500);
}

.resource-type.tool {
    background: var(--error-500);
}

.resource-type svg {
    width: 24px;
    height: 24px;
}

.resource-info {
    flex: 1;
}

.resource-info h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.resource-info p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.resource-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.resource-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.resource-action:hover {
    background: var(--primary-500);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-500);
}

.resource-action svg {
    width: 16px;
    height: 16px;
}

/* Additional Handbook Styles */
.handbook-section {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.handbook-section:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.section-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.last-updated {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    padding: var(--space-1) var(--space-2);
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
}

.content-block {
    line-height: 1.6;
}

.content-block h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    margin-top: var(--space-4);
}

.content-block h3:first-child {
    margin-top: 0;
}

.content-block p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

.info-box {
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}

.info-box h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-700);
    margin-bottom: var(--space-2);
}

.info-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-box li {
    margin-bottom: var(--space-1);
}

.info-box a {
    color: var(--primary-600);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--duration-fast) var(--ease-in-out);
}

.info-box a:hover {
    color: var(--primary-700);
    text-decoration: underline;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.value-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.value-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.value-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
    color: var(--primary-600);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.value-card:hover .value-icon {
    background: var(--primary-100);
    transform: scale(1.05);
}

.value-icon svg {
    width: 24px;
    height: 24px;
}

.value-card h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.value-card p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

.policies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.policy-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.policy-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.policy-card h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.policy-card p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.policy-list {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-3);
}

.policy-list li {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
    padding-left: var(--space-3);
    position: relative;
}

.policy-list li::before {
    content: '�';
    position: absolute;
    left: 0;
    color: var(--primary-500);
    font-weight: bold;
}

.procedures-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.procedure-item {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.procedure-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.procedure-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.procedure-header h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.procedure-content p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.procedure-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.handbook-feedback {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.handbook-feedback:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.feedback-content {
    text-align: center;
    margin-bottom: var(--space-6);
}

.feedback-content h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.feedback-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.feedback-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

/* Dark mode adjustments for new elements */
[data-theme="dark"] .ticket-system,
[data-theme="dark"] .knowledge-base,
[data-theme="dark"] .support-contact,
[data-theme="dark"] .category-card,
[data-theme="dark"] .recent-resources,
[data-theme="dark"] .popular-resources,
[data-theme="dark"] .handbook-section,
[data-theme="dark"] .handbook-feedback,
[data-theme="dark"] .value-card,
[data-theme="dark"] .policy-card,
[data-theme="dark"] .procedure-item {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .category-card:hover,
[data-theme="dark"] .value-card:hover,
[data-theme="dark"] .policy-card:hover,
[data-theme="dark"] .procedure-item:hover {
    border-color: var(--primary-400);
}

[data-theme="dark"] .info-box {
    background: var(--primary-900);
    border-color: var(--primary-700);
}

[data-theme="dark"] .info-box h3 {
    color: var(--primary-200);
}

[data-theme="dark"] .info-box a {
    color: var(--primary-300);
}

[data-theme="dark"] .info-box a:hover {
    color: var(--primary-200);
}

[data-theme="dark"] .resource-action {
    background: var(--bg-secondary-dark);
    border-color: var(--border-color);
    color: var(--text-secondary-dark);
}

[data-theme="dark"] .resource-action:hover {
    background: var(--primary-600);
    color: white;
}

.setting-info {
    flex: 1;
}

.setting-info h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.setting-info p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

.setting-control {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.form-select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    min-width: 140px;
}

.form-select:hover {
    border-color: var(--border-hover);
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.color-options {
    display: flex;
    gap: var(--space-2);
}

.color-option {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    position: relative;
}

.color-option:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-sm);
}

.color-option.active {
    border-color: var(--text-primary);
}

.color-option.active::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: var(--font-size-xs);
}

/* Switch Toggle Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    transition: all var(--duration-fast) var(--ease-in-out);
    border-radius: var(--radius-full);
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: all var(--duration-fast) var(--ease-in-out);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
}

input:checked+.slider {
    background-color: var(--primary-500);
}

input:checked+.slider:before {
    transform: translateX(24px);
}

/* Profile Page Styles */
.profile-overview {
    padding: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.profile-overview:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.profile-avatar {
    position: relative;
}

.avatar-large {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    object-fit: cover;
    border: 4px solid var(--bg-elevated);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.profile-avatar:hover .avatar-large {
    transform: scale(1.05);
    box-shadow: var(--shadow-xl);
}

.avatar-status {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-elevated);
    background: var(--success-500);
    box-shadow: var(--shadow-sm);
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.profile-title {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.profile-bio {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-4);
    max-width: 500px;
}

.profile-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.stat-item {
    text-align: center;
    padding: var(--space-4);
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.stat-number {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-600);
    margin-bottom: var(--space-1);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-6);
}

.profile-section {
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.profile-section:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.profile-section h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color);
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.info-value {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.info-edit {
    color: var(--primary-600);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-in-out);
}

.info-edit:hover {
    color: var(--primary-700);
}

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.skill-tag {
    padding: var(--space-2) var(--space-3);
    background: var(--primary-50);
    color: var(--primary-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid var(--primary-200);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.skill-tag:hover {
    background: var(--primary-100);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Dark mode adjustments for new elements */
[data-theme="dark"] .project-board,
[data-theme="dark"] .project-timeline,
[data-theme="dark"] .kanban-column,
[data-theme="dark"] .task-card,
[data-theme="dark"] .enhanced-task-card,
[data-theme="dark"] .enhanced-task-system,
[data-theme="dark"] .settings-section,
[data-theme="dark"] .profile-overview,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .stat-item,
[data-theme="dark"] .stat-card {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .task-card:hover,
[data-theme="dark"] .enhanced-task-card:hover,
[data-theme="dark"] .stat-item:hover,
[data-theme="dark"] .stat-card:hover {
    border-color: var(--primary-400);
}

[data-theme="dark"] .enhanced-task-card.completed {
    background: linear-gradient(135deg, var(--bg-elevated-dark) 0%, rgba(34, 197, 94, 0.1) 100%);
}

[data-theme="dark"] .task-list-item.overdue {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, transparent 100%);
}

[data-theme="dark"] .slider {
    background-color: var(--gray-600);
}

[data-theme="dark"] .form-select {
    background: var(--bg-elevated-dark);
    border-color: var(--border-color);
    color: var(--text-primary-dark);
}

[data-theme="dark"] .form-select:focus {
    border-color: var(--primary-400);
}

[data-theme="dark"] .skill-tag {
    background: var(--primary-900);
    color: var(--primary-200);
    border-color: var(--primary-700);
}

[data-theme="dark"] .skill-tag:hover {
    background: var(--primary-800);
}

/* Responsive adjustments for new elements */
@media (max-width: 1024px) {
    .kanban-board {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .profile-sections {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .project-board,
    .project-timeline,
    .settings-section,
    .profile-overview {
        padding: var(--space-4);
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }

    .profile-actions {
        justify-content: center;
    }

    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .timeline-project {
        min-width: auto;
    }

    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .setting-control {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Activity and Goals Styles for Profile Page */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.activity-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.activity-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--border-hover);
}

.activity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary-50);
    color: var(--primary-600);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-content h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.activity-content p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.activity-time {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.goals-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.goal-item {
    padding: var(--space-4);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.goal-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.goal-header h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.goal-progress {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--primary-600);
    background: var(--primary-50);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.goal-bar {
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.goal-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 100%);
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--ease-in-out);
}

.goal-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* Dark mode adjustments for activity and goals */
[data-theme="dark"] .activity-item,
[data-theme="dark"] .goal-item {
    background: var(--bg-elevated-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .activity-item:hover,
[data-theme="dark"] .goal-item:hover {
    border-color: var(--primary-400);
}

[data-theme="dark"] .activity-icon {
    background: var(--primary-900);
    color: var(--primary-200);
}

[data-theme="dark"] .goal-progress {
    background: var(--primary-900);
    color: var(--primary-200);
}

[data-theme="dark"] .goal-bar {
    background: var(--gray-700);
}

/* Responsive adjustments for activity and goals */
@media (max-width: 768px) {
    .activity-item {
        flex-direction: column;
        gap: var(--space-2);
    }

    .activity-icon {
        align-self: flex-start;
    }

    .goal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* Enhanced Quick Access Section in Welcome Area */
.quick-access-section {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.quick-access-section:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.quick-access-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.quick-access-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.quick-access-header h3::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-sm);
}

.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

.quick-access-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: all var(--duration-fast) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.quick-access-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-400) 100%);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-in-out);
    z-index: 0;
}

.quick-access-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.quick-access-link:hover::before {
    opacity: 0.05;
}

.quick-access-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.quick-access-link:hover .quick-access-icon {
    transform: scale(1.1);
}

.quick-access-icon.document {
    background: var(--blue-50);
    color: var(--blue-600);
}

.quick-access-icon.meeting {
    background: var(--green-50);
    color: var(--green-600);
}

.quick-access-icon.resource {
    background: var(--orange-50);
    color: var(--orange-600);
}

.quick-access-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.quick-access-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.quick-access-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Dark mode adjustments for quick access section */
[data-theme="dark"] .quick-access-section {
    background: var(--bg-elevated-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .quick-access-link {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .quick-access-link:hover {
    border-color: var(--primary-400);
}

[data-theme="dark"] .quick-access-icon.document {
    background: var(--blue-900);
    color: var(--blue-200);
}

[data-theme="dark"] .quick-access-icon.meeting {
    background: var(--green-900);
    color: var(--green-200);
}

[data-theme="dark"] .quick-access-icon.project {
    background: var(--purple-900);
    color: var(--purple-200);
}

[data-theme="dark"] .quick-access-icon.resource {
    background: var(--orange-900);
    color: var(--orange-200);
}

/* Responsive adjustments for quick access section */
@media (max-width: 1024px) {
    .quick-access-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .quick-access-section {
        padding: var(--space-4);
        margin-top: var(--space-4);
    }

    .quick-access-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    .quick-access-link {
        padding: var(--space-3);
        flex-direction: column;
        text-align: center;
        gap: var(--space-2);
    }

    .quick-access-icon {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .quick-access-grid {
        grid-template-columns: 1fr;
    }
}

/* Enhanced Team Spotlight Component Styles */
.team-spotlight {
    background: var(--bg-widget);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.team-spotlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            var(--primary-500) 0%,
            var(--success-500) 50%,
            var(--warning-500) 100%);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.team-spotlight:hover,
.team-spotlight:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-200);
}

.team-spotlight:focus-within {
    outline: 2px solid var(--primary-300);
    outline-offset: 2px;
}

.spotlight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.spotlight-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.spotlight-title::before {
    content: '';
    font-size: var(--font-size-2xl);
    filter: none;
    -webkit-text-fill-color: initial;
    animation: gentle-pulse 2s ease-in-out infinite;
}

@keyframes gentle-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

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

.spotlight-controls {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.spotlight-controls .btn-icon.small {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: var(--bg-widget);
    color: var(--text-primary);
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
}

.spotlight-controls .btn-icon.small:hover {
    background: var(--primary-50);
    border-color: var(--primary-200);
    color: var(--primary-600);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.spotlight-controls .btn-icon.small:active {
    transform: scale(0.95);
}

.spotlight-controls .btn-icon.small svg {
    width: 20px;
    height: 20px;
}

.member-spotlight {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.member-spotlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-500), var(--primary-400));
    transform: scaleY(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.member-spotlight:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.member-spotlight:hover::before {
    transform: scaleY(1);
}

.member-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.member-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    border: 3px solid var(--primary-100);
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.member-avatar-large:hover {
    border-color: var(--primary-500);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.member-avatar-large svg {
    width: 100%;
    height: 100%;
}

.member-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-widget);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease-spring);
}

.member-status.online {
    background: var(--success-500);
    animation: pulse-online 2s ease-in-out infinite;
}

.member-status.away {
    background: var(--warning-500);
}

.member-status.offline {
    background: var(--gray-400);
}

@keyframes pulse-online {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.member-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.member-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    transition: color var(--duration-normal) var(--ease-in-out);
}

.member-spotlight:hover .member-name {
    color: var(--primary-600);
}

.member-role {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0;
}

.member-department {
    font-size: var(--font-size-sm);
    color: var(--primary-600);
    font-weight: 600;
    margin: 0;
    padding: var(--space-1) var(--space-3);
    background: var(--primary-50);
    border-radius: var(--radius-full);
    border: 1px solid var(--primary-200);
    display: inline-block;
    width: fit-content;
    margin-top: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-xs);
}

.member-achievements {
    margin-bottom: var(--space-6);
}

.member-achievements h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.member-achievements h4::before {
    content: '';
    font-size: var(--font-size-lg);
}

.achievements-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.achievements-list li {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    padding-left: var(--space-8);
}

.achievements-list li::before {
    content: '';
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-base);
    animation: sparkle 2s ease-in-out infinite;
}

.achievements-list li:hover {
    background: var(--primary-50);
    border-color: var(--primary-200);
    transform: translateX(4px);
}

@keyframes sparkle {

    0%,
    100% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.1);
    }
}

.member-skills {
    margin-bottom: var(--space-6);
}

.member-skills h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.member-skills h4::before {
    content: '';
    font-size: var(--font-size-lg);
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.skill-tag {
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    color: var(--primary-700);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: 1px solid var(--primary-200);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.skill-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left var(--duration-slow) var(--ease-in-out);
}

.skill-tag:hover::before {
    left: 100%;
}

.skill-tag:hover,
.skill-tag.highlighted {
    background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
    border-color: var(--primary-300);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.skill-tag.highlighted {
    background: linear-gradient(135deg, var(--warning-100), var(--warning-200));
    border-color: var(--warning-400);
    color: var(--warning-800);
    animation: highlightPulse 0.5s ease-in-out;
}

@keyframes highlightPulse {

    0%,
    100% {
        transform: translateY(-2px) scale(1);
    }

    50% {
        transform: translateY(-2px) scale(1.05);
    }
}

.upcoming-events {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    box-shadow: var(--shadow-sm);
    margin-top: var(--space-6);
}

.upcoming-events:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
    transform: translateY(-1px);
}

.events-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-5) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.events-title::before {
    content: '';
    font-size: var(--font-size-xl);
    animation: gentle-pulse 3s ease-in-out infinite;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.event-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-widget);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    box-shadow: var(--shadow-sm);
    min-height: 80px;
    width: 100%;
}

.event-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-500), var(--primary-400));
    transform: scaleY(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.event-item:hover {
    background: var(--bg-elevated);
    border-color: var(--primary-300);
    transform: translateX(4px) translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.event-item:hover::before {
    transform: scaleY(1);
}

.event-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.event-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.event-item:hover .event-icon::before {
    opacity: 1;
}

.event-icon.workshop {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border: 2px solid var(--primary-300);
}

.event-icon.meeting {
    background: linear-gradient(135deg, var(--success-500), var(--success-600));
    color: white;
    border: 2px solid var(--success-300);
}

.event-icon.social {
    background: linear-gradient(135deg, var(--warning-500), var(--warning-600));
    color: white;
    border: 2px solid var(--warning-300);
}

.event-item:hover .event-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-lg);
}

.event-icon svg {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 2;
}

.event-content {
    flex: 1;
    position: relative;
    z-index: 2;
    min-width: 0;
    /* Allow text to wrap properly */
}

.event-title {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: #1a202c !important;
    margin: 0 0 var(--space-3) 0;
    transition: color var(--duration-normal) var(--ease-in-out);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.event-item:hover .event-title {
    color: #2d3748 !important;
}

.event-time {
    font-size: var(--font-size-sm);
    color: var(--white);
    margin: 0;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--primary-500);
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) var(--ease-spring);
}

.event-item:hover .event-time {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-color: var(--primary-400);
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.event-time::before {
    content: '??';
    font-size: var(--font-size-sm);
}

/* Smart Quick Access Component Styles */
.smart-quick-access {
    background: var(--bg-widget);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
}

.smart-quick-access::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400), var(--primary-300));
    opacity: 0.8;
}

.smart-quick-access:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.smart-access-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    position: relative;
}

.smart-access-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.smart-access-header h3::before {
    content: '?';
    font-size: var(--font-size-lg);
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(10deg);
    }
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.recommendation-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--component-bg) 0%, rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(15px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.recommendation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-500), var(--primary-400));
    transform: scaleY(0);
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.recommendation-card.high::before {
    background: linear-gradient(180deg, var(--error-500), var(--error-400));
}

.recommendation-card.medium::before {
    background: linear-gradient(180deg, var(--warning-500), var(--warning-400));
}

.recommendation-card:hover {
    background: var(--bg-hover);
    border-color: var(--primary-200);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.recommendation-card:hover::before {
    transform: scaleY(1);
}

.recommendation-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--primary-100), var(--primary-50));
    color: var(--primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.recommendation-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.recommendation-card:hover .recommendation-icon {
    background: linear-gradient(135deg, var(--primary-200), var(--primary-100));
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.recommendation-card:hover .recommendation-icon::before {
    opacity: 1;
}

.recommendation-icon svg {
    width: 28px;
    height: 28px;
    position: relative;
    z-index: 1;
}

.recommendation-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
}

.recommendation-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.recommendation-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    opacity: 0.9;
}

.recommendation-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    margin-top: var(--space-2);
    align-items: center;
}

.recommendation-type {
    color: var(--primary-600);
    font-weight: 600;
    text-transform: capitalize;
    background: var(--primary-50);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    border: 1px solid var(--primary-200);
}

.recommendation-priority {
    color: var(--text-muted);
    text-transform: capitalize;
    font-weight: 500;
}

.recommendation-action {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--bg-widget);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.recommendation-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-400));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.recommendation-action:hover {
    border-color: var(--primary-500);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.recommendation-action:hover::before {
    opacity: 1;
}

.recommendation-action svg {
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 1;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.frequently-used {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-5);
    margin-top: var(--space-6);
}

.frequently-used h4 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.frequently-used h4::before {
    content: '';
    font-size: var(--font-size-base);
    animation: pulse 2s ease-in-out infinite;
}

.frequently-used-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
}

.frequently-used-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.frequently-used-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(99, 102, 241, 0.02));
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.frequently-used-item:hover {
    background: var(--bg-hover);
    border-color: var(--primary-200);
    transform: translateY(-3px);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.frequently-used-item:hover::before {
    opacity: 1;
}

.frequently-used-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-100), var(--primary-50));
    color: var(--primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    z-index: 1;
}

.frequently-used-item:hover .frequently-used-icon {
    background: linear-gradient(135deg, var(--primary-200), var(--primary-100));
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.frequently-used-icon svg {
    width: 20px;
    height: 20px;
}

.frequently-used-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .recommendations-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 1024px) {
    .recommendations-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .frequently-used-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (max-width: 768px) {
    .smart-quick-access {
        padding: var(--space-5);
    }

    .smart-access-header {
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

    .smart-access-header h3 {
        font-size: var(--font-size-lg);
    }

    .recommendation-card {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .recommendation-icon {
        width: 48px;
        height: 48px;
    }

    .recommendation-icon svg {
        width: 24px;
        height: 24px;
    }

    .recommendation-action {
        width: 36px;
        height: 36px;
    }

    .recommendation-action svg {
        width: 16px;
        height: 16px;
    }

    .frequently-used-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: var(--space-3);
    }

    .frequently-used-item {
        padding: var(--space-3);
    }
}

@media (max-width: 480px) {
    .smart-quick-access {
        padding: var(--space-4);
    }

    .recommendations-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .recommendation-card {
        padding: var(--space-4);
    }

    .frequently-used-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .frequently-used-item {
        padding: var(--space-3);
    }
}

/* Dark mode support */
[data-theme="dark"] .smart-quick-access {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .recommendation-card,
[data-theme="dark"] .frequently-used-item {
    background: var(--bg-secondary-dark);
    border-color: var(--border-color);
}

[data-theme="dark"] .recommendation-card:hover,
[data-theme="dark"] .frequently-used-item:hover {
    background: var(--bg-hover-dark);
    border-color: var(--border-hover);
}

[data-theme="dark"] .recommendation-action {
    background: var(--bg-widget-dark);
    border-color: var(--border-color);
    color: var(--text-secondary-dark);
}

[data-theme="dark"] .recommendation-action:hover {
    background: var(--primary-500);
    color: white;
    border-color: var(--primary-500);
}

/* Enhanced Analytics Dashboard Styles */
.dashboard-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.metric-insight {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
    font-style: italic;
}

.chart-legend {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
}

.legend-color.completed {
    background: var(--success-500);
}

.legend-color.in-progress {
    background: var(--warning-500);
}

.insights-section {
    margin-top: var(--space-2);
}

.insights-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-4) 0;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
}

.insight-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.insight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.insight-card.positive::before {
    background: var(--success-500);
}

.insight-card.warning::before {
    background: var(--warning-500);
}

.insight-card.info::before {
    background: var(--primary-500);
}

.insight-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.insight-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.insight-card.positive .insight-icon {
    background: var(--success-100);
    color: var(--success-700);
}

.insight-card.warning .insight-icon {
    background: var(--warning-100);
    color: var(--warning-700);
}

.insight-card.info .insight-icon {
    background: var(--primary-100);
    color: var(--primary-700);
}

.insight-card:hover .insight-icon {
    transform: scale(1.1);
}

.insight-icon svg {
    width: 20px;
    height: 20px;
}

.insight-content {
    flex: 1;
}

.insight-content h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.insight-content p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.activity-header .btn {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
}

/* Task Modal Styles */
.task-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.task-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
}

.modal-content {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9) translateY(20px);
    transition: transform var(--duration-normal) var(--ease-spring);
    position: relative;
    z-index: 1001;
}

.task-modal.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-secondary));
}

.modal-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-spring);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .insights-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

@media (max-width: 768px) {
    .insight-card {
        padding: var(--space-3);
    }

    .insight-icon {
        width: 32px;
        height: 32px;
    }

    .insight-icon svg {
        width: 16px;
        height: 16px;
    }

    .activity-item {
        flex-direction: column;
        gap: var(--space-2);
    }

    .activity-icon {
        align-self: flex-start;
    }

    .activity-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* Notification Styles */
.notifications-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 380px;
    max-height: 480px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin-top: 0.5rem;
    z-index: 50;
}

.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.notifications-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.mark-all-read {
    font-size: var(--font-size-sm);
    color: var(--primary-500);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color var(--duration-normal) var(--ease-in-out);
}

.mark-all-read:hover {
    color: var(--primary-600);
}

.notifications-list {
    padding: 0.5rem;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
}

.notification-item:hover {
    background: var(--bg-hover);
}

.notification-item.read {
    opacity: 0.7;
}

.notification-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--primary-100);
    color: var(--primary-600);
    flex-shrink: 0;
}

.notification-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.notification-icon.mention {
    background: var(--primary-100);
    color: var(--primary-600);
}

.notification-icon.task {
    background: var(--success-100);
    color: var(--success-600);
}

.notification-icon.meeting {
    background: var(--warning-100);
    color: var(--warning-600);
}

.notification-icon.update {
    background: var(--error-100);
    color: var(--error-600);
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-message {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    line-height: 1.4;
}

.notification-time {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.no-notifications {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

.no-notifications svg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-notifications p {
    font-size: var(--font-size-sm);
    margin: 0;
}

@media (max-width: 768px) {
    .notifications-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 80vh;
        margin: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

[data-theme="dark"] .notification-icon {
    background: var(--gray-700);
    color: var(--gray-200);
}

[data-theme="dark"] .notification-icon.mention {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-400);
}

[data-theme="dark"] .notification-icon.task {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success-400);
}

[data-theme="dark"] .notification-icon.meeting {
    background: rgba(234, 179, 8, 0.2);
    color: var(--warning-400);
}

[data-theme="dark"] .notification-icon.update {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error-400);
}