/**
 * Universal Canvas Themes CSS
 * Theme definitions for all framework canvases (BMC, SWOT, VPC, Porter's, PESTELE, McKinsey 7S)
 * Provides consistent color schemes and styling across all frameworks
 */

/* ================== DEFAULT THEME ================== */

.canvas-visualization[data-theme="default"] {
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-placeholder: #bbbbbb;
    
    --background-primary: #ffffff;
    --background-secondary: #f8f9fa;
    --background-tertiary: #e9ecef;
    --background-hover: #f1f3f5;
    
    --border-light: #e0e0e0;
    --border-medium: #cccccc;
    --border-dark: #999999;
    
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;
}

/* ================== PROFESSIONAL THEME ================== */

.canvas-visualization[data-theme="professional"] {
    --text-primary: #2c3e50;
    --text-secondary: #5a6c7d;
    --text-muted: #8fa8b2;
    --text-placeholder: #bdc3c7;
    
    --background-primary: #ffffff;
    --background-secondary: #f7f9fc;
    --background-tertiary: #ecf0f1;
    --background-hover: #e8eef3;
    
    --border-light: #d5dbdb;
    --border-medium: #bdc3c7;
    --border-dark: #95a5a6;
    
    --color-primary: #3498db;
    --color-secondary: #7f8c8d;
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-danger: #e74c3c;
    --color-info: #16a085;
}

/* ================== DARK THEME ================== */

.canvas-visualization[data-theme="dark"] {
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --text-placeholder: #606060;
    
    --background-primary: #2d3748;
    --background-secondary: #1a202c;
    --background-tertiary: #4a5568;
    --background-hover: #2d3748;
    
    --border-light: #4a5568;
    --border-medium: #718096;
    --border-dark: #a0aec0;
    
    --color-primary: #63b3ed;
    --color-secondary: #a0aec0;
    --color-success: #68d391;
    --color-warning: #fbd38d;
    --color-danger: #fc8181;
    --color-info: #81e6d9;
}

/* ================== VIBRANT THEME ================== */

.canvas-visualization[data-theme="vibrant"] {
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #7a7a7a;
    --text-placeholder: #aaaaaa;
    
    --background-primary: #ffffff;
    --background-secondary: #fff5f5;
    --background-tertiary: #fed7d7;
    --background-hover: #ffeaea;
    
    --border-light: #fed7d7;
    --border-medium: #fc8181;
    --border-dark: #e53e3e;
    
    --color-primary: #e53e3e;
    --color-secondary: #718096;
    --color-success: #38a169;
    --color-warning: #d69e2e;
    --color-danger: #e53e3e;
    --color-info: #3182ce;
}

/* ================== MINIMAL THEME ================== */

.canvas-visualization[data-theme="minimal"] {
    --text-primary: #000000;
    --text-secondary: #4a5568;
    --text-muted: #a0aec0;
    --text-placeholder: #cbd5e0;
    
    --background-primary: #ffffff;
    --background-secondary: #fafafa;
    --background-tertiary: #f0f0f0;
    --background-hover: #f7fafc;
    
    --border-light: #e2e8f0;
    --border-medium: #cbd5e0;
    --border-dark: #a0aec0;
    
    --color-primary: #000000;
    --color-secondary: #718096;
    --color-success: #48bb78;
    --color-warning: #ed8936;
    --color-danger: #f56565;
    --color-info: #4299e1;
}

/* ================== PASTEL THEME ================== */

.canvas-visualization[data-theme="pastel"] {
    --text-primary: #4a5568;
    --text-secondary: #718096;
    --text-muted: #a0aec0;
    --text-placeholder: #cbd5e0;
    
    --background-primary: #ffffff;
    --background-secondary: #f7fafc;
    --background-tertiary: #edf2f7;
    --background-hover: #e2e8f0;
    
    --border-light: #e2e8f0;
    --border-medium: #cbd5e0;
    --border-dark: #a0aec0;
    
    --color-primary: #9f7aea;
    --color-secondary: #a0aec0;
    --color-success: #68d391;
    --color-warning: #fbd38d;
    --color-danger: #fc8181;
    --color-info: #81e6d9;
}

/* ================== CORPORATE THEME ================== */

.canvas-visualization[data-theme="corporate"] {
    --text-primary: #1a365d;
    --text-secondary: #2d3748;
    --text-muted: #4a5568;
    --text-placeholder: #a0aec0;
    
    --background-primary: #ffffff;
    --background-secondary: #f7fafc;
    --background-tertiary: #edf2f7;
    --background-hover: #e2e8f0;
    
    --border-light: #e2e8f0;
    --border-medium: #cbd5e0;
    --border-dark: #a0aec0;
    
    --color-primary: #2b6cb0;
    --color-secondary: #4a5568;
    --color-success: #2f855a;
    --color-warning: #c05621;
    --color-danger: #c53030;
    --color-info: #2c5282;
}

/* ================== FRAMEWORK-SPECIFIC THEME VARIATIONS ================== */

/* BMC Theme Variations */
.canvas-visualization[data-framework="bmc"][data-theme="default"] {
    --framework-accent: #007bff;
    --framework-secondary: #6c757d;
}

.canvas-visualization[data-framework="bmc"][data-theme="professional"] {
    --framework-accent: #3498db;
    --framework-secondary: #7f8c8d;
}

.canvas-visualization[data-framework="bmc"][data-theme="dark"] {
    --framework-accent: #63b3ed;
    --framework-secondary: #a0aec0;
}

/* SWOT Theme Variations */
.canvas-visualization[data-framework="swot"][data-theme="default"] {
    --swot-strengths: #28a745;
    --swot-weaknesses: #dc3545;
    --swot-opportunities: #007bff;
    --swot-threats: #ffc107;
}

.canvas-visualization[data-framework="swot"][data-theme="professional"] {
    --swot-strengths: #27ae60;
    --swot-weaknesses: #e74c3c;
    --swot-opportunities: #3498db;
    --swot-threats: #f39c12;
}

.canvas-visualization[data-framework="swot"][data-theme="dark"] {
    --swot-strengths: #68d391;
    --swot-weaknesses: #fc8181;
    --swot-opportunities: #63b3ed;
    --swot-threats: #fbd38d;
}

/* VPC Theme Variations */
.canvas-visualization[data-framework="vpc"][data-theme="default"] {
    --vpc-customer: #007bff;
    --vpc-value: #28a745;
    --vpc-connection: #6c757d;
}

.canvas-visualization[data-framework="vpc"][data-theme="professional"] {
    --vpc-customer: #3498db;
    --vpc-value: #27ae60;
    --vpc-connection: #7f8c8d;
}

.canvas-visualization[data-framework="vpc"][data-theme="dark"] {
    --vpc-customer: #63b3ed;
    --vpc-value: #68d391;
    --vpc-connection: #a0aec0;
}

/* Porter's Forces Theme Variations */
.canvas-visualization[data-framework="porters"][data-theme="default"] {
    --porters-center: #007bff;
    --porters-forces: #6c757d;
    --porters-high: #dc3545;
    --porters-medium: #ffc107;
    --porters-low: #28a745;
}

.canvas-visualization[data-framework="porters"][data-theme="professional"] {
    --porters-center: #3498db;
    --porters-forces: #7f8c8d;
    --porters-high: #e74c3c;
    --porters-medium: #f39c12;
    --porters-low: #27ae60;
}

.canvas-visualization[data-framework="porters"][data-theme="dark"] {
    --porters-center: #63b3ed;
    --porters-forces: #a0aec0;
    --porters-high: #fc8181;
    --porters-medium: #fbd38d;
    --porters-low: #68d391;
}

/* PESTELE Theme Variations */
.canvas-visualization[data-framework="pestele"][data-theme="default"] {
    --pestele-political: #dc3545;
    --pestele-economic: #28a745;
    --pestele-social: #007bff;
    --pestele-technological: #6f42c1;
    --pestele-environmental: #20c997;
    --pestele-legal: #fd7e14;
    --pestele-ethical: #e83e8c;
}

.canvas-visualization[data-framework="pestele"][data-theme="professional"] {
    --pestele-political: #e74c3c;
    --pestele-economic: #27ae60;
    --pestele-social: #3498db;
    --pestele-technological: #8e44ad;
    --pestele-environmental: #16a085;
    --pestele-legal: #e67e22;
    --pestele-ethical: #e91e63;
}

.canvas-visualization[data-framework="pestele"][data-theme="dark"] {
    --pestele-political: #fc8181;
    --pestele-economic: #68d391;
    --pestele-social: #63b3ed;
    --pestele-technological: #b794f6;
    --pestele-environmental: #81e6d9;
    --pestele-legal: #fbb959;
    --pestele-ethical: #f687b3;
}

/* McKinsey 7S Theme Variations */
.canvas-visualization[data-framework="mckinsey7s"][data-theme="default"] {
    --mckinsey-hard: #007bff;
    --mckinsey-soft: #28a745;
    --mckinsey-center: #6c757d;
}

.canvas-visualization[data-framework="mckinsey7s"][data-theme="professional"] {
    --mckinsey-hard: #3498db;
    --mckinsey-soft: #27ae60;
    --mckinsey-center: #7f8c8d;
}

.canvas-visualization[data-framework="mckinsey7s"][data-theme="dark"] {
    --mckinsey-hard: #63b3ed;
    --mckinsey-soft: #68d391;
    --mckinsey-center: #a0aec0;
}

/* ================== THEME-SPECIFIC BLOCK STYLES ================== */

/* Default Theme Block Styling */
.canvas-visualization[data-theme="default"] .canvas-block {
    background: var(--background-primary);
    border-color: var(--border-light);
}

.canvas-visualization[data-theme="default"] .canvas-block:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

/* Professional Theme Block Styling */
.canvas-visualization[data-theme="professional"] .canvas-block {
    background: var(--background-primary);
    border-color: var(--border-light);
    box-shadow: 0 1px 3px rgba(52, 152, 219, 0.1);
}

.canvas-visualization[data-theme="professional"] .canvas-block:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}

/* Dark Theme Block Styling */
.canvas-visualization[data-theme="dark"] .canvas-block {
    background: var(--background-primary);
    border-color: var(--border-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.canvas-visualization[data-theme="dark"] .canvas-block:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(99, 179, 237, 0.3);
}

/* Vibrant Theme Block Styling */
.canvas-visualization[data-theme="vibrant"] .canvas-block {
    background: var(--background-primary);
    border-color: var(--border-light);
    border-width: 2px;
}

.canvas-visualization[data-theme="vibrant"] .canvas-block:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(229, 62, 62, 0.2);
    transform: translateY(-2px);
}

/* Minimal Theme Block Styling */
.canvas-visualization[data-theme="minimal"] .canvas-block {
    background: var(--background-primary);
    border-color: var(--border-light);
    border-radius: 0;
    box-shadow: none;
}

.canvas-visualization[data-theme="minimal"] .canvas-block:hover {
    border-color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Pastel Theme Block Styling */
.canvas-visualization[data-theme="pastel"] .canvas-block {
    background: var(--background-primary);
    border-color: var(--border-light);
    border-radius: 12px;
}

.canvas-visualization[data-theme="pastel"] .canvas-block:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 20px rgba(159, 122, 234, 0.15);
}

/* Corporate Theme Block Styling */
.canvas-visualization[data-theme="corporate"] .canvas-block {
    background: var(--background-primary);
    border-color: var(--border-light);
    border-radius: 4px;
}

.canvas-visualization[data-theme="corporate"] .canvas-block:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(43, 108, 176, 0.15);
}

/* ================== THEME-SPECIFIC HEADER STYLES ================== */

/* Professional Theme Headers */
.canvas-visualization[data-theme="professional"] .block-header {
    background: linear-gradient(135deg, var(--background-secondary) 0%, var(--background-tertiary) 100%);
    border-bottom-color: var(--border-medium);
}

/* Dark Theme Headers */
.canvas-visualization[data-theme="dark"] .block-header {
    background: var(--background-secondary);
    border-bottom-color: var(--border-light);
}

/* Vibrant Theme Headers */
.canvas-visualization[data-theme="vibrant"] .block-header {
    background: linear-gradient(135deg, var(--background-secondary) 0%, var(--background-tertiary) 100%);
    border-bottom: 2px solid var(--color-primary);
}

/* Corporate Theme Headers */
.canvas-visualization[data-theme="corporate"] .block-header {
    background: var(--background-secondary);
    border-bottom: 1px solid var(--color-primary);
}

/* ================== THEME-SPECIFIC BUTTON STYLES ================== */

/* Dark Theme Buttons */
.canvas-visualization[data-theme="dark"] .block-action-btn {
    background: var(--background-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.canvas-visualization[data-theme="dark"] .block-action-btn:hover {
    background: var(--background-hover);
    border-color: var(--color-primary);
}

/* Vibrant Theme Buttons */
.canvas-visualization[data-theme="vibrant"] .block-action-btn {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    border-radius: 50%;
}

.canvas-visualization[data-theme="vibrant"] .block-action-btn:hover {
    background: #c53030;
    border-color: #c53030;
    transform: scale(1.1);
}

/* Minimal Theme Buttons */
.canvas-visualization[data-theme="minimal"] .block-action-btn {
    background: transparent;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    border-radius: 0;
}

.canvas-visualization[data-theme="minimal"] .block-action-btn:hover {
    background: var(--text-primary);
    color: var(--background-primary);
}

/* ================== THEME-SPECIFIC MODAL STYLES ================== */

/* Dark Theme Modals */
.canvas-visualization[data-theme="dark"] ~ .canvas-block-modal .modal-content {
    background: var(--background-primary);
    color: var(--text-primary);
}

.canvas-visualization[data-theme="dark"] ~ .canvas-block-modal .modal-header,
.canvas-visualization[data-theme="dark"] ~ .canvas-block-modal .modal-footer {
    background: var(--background-secondary);
    border-color: var(--border-light);
}

.canvas-visualization[data-theme="dark"] ~ .canvas-block-modal .expanded-content {
    background: var(--background-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* Professional Theme Modals */
.canvas-visualization[data-theme="professional"] ~ .canvas-block-modal .modal-content {
    box-shadow: 0 10px 40px rgba(52, 152, 219, 0.2);
}

/* Vibrant Theme Modals */
.canvas-visualization[data-theme="vibrant"] ~ .canvas-block-modal .modal-content {
    border: 3px solid var(--color-primary);
    box-shadow: 0 10px 40px rgba(229, 62, 62, 0.2);
}

/* ================== FRAMEWORK-SPECIFIC THEME INTEGRATION ================== */

/* SWOT Analysis Themed Blocks */
.canvas-visualization[data-framework="swot"] .block-strengths {
    border-left: 4px solid var(--swot-strengths, #28a745);
}

.canvas-visualization[data-framework="swot"] .block-weaknesses {
    border-left: 4px solid var(--swot-weaknesses, #dc3545);
}

.canvas-visualization[data-framework="swot"] .block-opportunities {
    border-left: 4px solid var(--swot-opportunities, #007bff);
}

.canvas-visualization[data-framework="swot"] .block-threats {
    border-left: 4px solid var(--swot-threats, #ffc107);
}

/* Value Proposition Canvas Themed Blocks */
.canvas-visualization[data-framework="vpc"] .block-customer-profile {
    border-top: 3px solid var(--vpc-customer, #007bff);
}

.canvas-visualization[data-framework="vpc"] .block-value-map {
    border-top: 3px solid var(--vpc-value, #28a745);
}

/* Porter's Forces Themed Blocks */
.canvas-visualization[data-framework="porters"] .block-center-force {
    border: 2px solid var(--porters-center, #007bff);
    background: linear-gradient(135deg, var(--background-primary) 0%, rgba(0, 123, 255, 0.05) 100%);
}

.canvas-visualization[data-framework="porters"] .canvas-block[data-intensity="high"] {
    border-left: 4px solid var(--porters-high, #dc3545);
}

.canvas-visualization[data-framework="porters"] .canvas-block[data-intensity="medium"] {
    border-left: 4px solid var(--porters-medium, #ffc107);
}

.canvas-visualization[data-framework="porters"] .canvas-block[data-intensity="low"] {
    border-left: 4px solid var(--porters-low, #28a745);
}

/* PESTELE Analysis Themed Blocks */
.canvas-visualization[data-framework="pestele"] .block-political {
    border-left: 4px solid var(--pestele-political, #dc3545);
}

.canvas-visualization[data-framework="pestele"] .block-economic {
    border-left: 4px solid var(--pestele-economic, #28a745);
}

.canvas-visualization[data-framework="pestele"] .block-social {
    border-left: 4px solid var(--pestele-social, #007bff);
}

.canvas-visualization[data-framework="pestele"] .block-technological {
    border-left: 4px solid var(--pestele-technological, #6f42c1);
}

.canvas-visualization[data-framework="pestele"] .block-environmental {
    border-left: 4px solid var(--pestele-environmental, #20c997);
}

.canvas-visualization[data-framework="pestele"] .block-legal {
    border-left: 4px solid var(--pestele-legal, #fd7e14);
}

.canvas-visualization[data-framework="pestele"] .block-ethical {
    border-left: 4px solid var(--pestele-ethical, #e83e8c);
}

/* McKinsey 7S Themed Blocks */
.canvas-visualization[data-framework="mckinsey7s"] .block-hard-elements {
    border-top: 3px solid var(--mckinsey-hard, #007bff);
}

.canvas-visualization[data-framework="mckinsey7s"] .block-soft-elements {
    border-top: 3px solid var(--mckinsey-soft, #28a745);
}

.canvas-visualization[data-framework="mckinsey7s"] .block-shared-values {
    border: 2px solid var(--mckinsey-center, #6c757d);
    background: linear-gradient(135deg, var(--background-primary) 0%, rgba(108, 117, 125, 0.05) 100%);
}

/* ================== RESPONSIVE THEME ADJUSTMENTS ================== */

@media (max-width: 768px) {
    /* Reduce theme effects on mobile for better performance */
    .canvas-visualization[data-theme="vibrant"] .canvas-block:hover {
        transform: none;
    }
    
    .canvas-visualization[data-theme="professional"] .block-header {
        background: var(--background-secondary);
    }
    
    .canvas-visualization[data-theme="pastel"] .canvas-block {
        border-radius: 6px;
    }
}

@media (max-width: 480px) {
    /* Minimal theme effects on small screens */
    .canvas-visualization .canvas-block {
        border-width: 1px !important;
        border-radius: 4px !important;
    }
    
    .canvas-visualization .block-header {
        background: var(--background-secondary) !important;
    }
}

/* ================== PRINT THEME OVERRIDES ================== */

@media print {
    .canvas-visualization {
        --text-primary: #000000 !important;
        --text-secondary: #333333 !important;
        --background-primary: #ffffff !important;
        --background-secondary: #f8f9fa !important;
        --border-light: #cccccc !important;
    }
    
    .canvas-visualization .canvas-block {
        border: 1px solid #333333 !important;
        background: #ffffff !important;
    }
    
    .canvas-visualization .block-header {
        background: #f0f0f0 !important;
        border-bottom: 1px solid #333333 !important;
    }
}

/* ================== HIGH CONTRAST THEME SUPPORT ================== */

@media (prefers-contrast: high) {
    .canvas-visualization {
        --border-light: #000000 !important;
        --border-medium: #000000 !important;
        --text-primary: #000000 !important;
        --background-primary: #ffffff !important;
    }
    
    .canvas-visualization[data-theme="dark"] {
        --border-light: #ffffff !important;
        --border-medium: #ffffff !important;
        --text-primary: #ffffff !important;
        --background-primary: #000000 !important;
    }
}

/* ================== REDUCED MOTION THEME SUPPORT ================== */

@media (prefers-reduced-motion: reduce) {
    .canvas-visualization .canvas-block:hover {
        transform: none !important;
    }
    
    .canvas-visualization .block-header {
        background: var(--background-secondary) !important;
    }
}