/* 
 * Espace Ruah Admin Theme Manager
 * Custom CSS Properties for dynamic theme switching
 */

/* Base theme variables (default Bootstrap-like) */
:root {
  /* Brand Colors */
  --theme-primary: #0d6efd;
  --theme-primary-rgb: 13, 110, 253;
  --theme-primary-dark: #0b5ed7;
  --theme-primary-light: #6ea8fe;
  
  --theme-secondary: #6c757d;
  --theme-secondary-rgb: 108, 117, 125;
  --theme-secondary-dark: #5c636a;
  --theme-secondary-light: #adb5bd;
  
  --theme-accent: #20c997;
  --theme-accent-rgb: 32, 201, 151;
  --theme-accent-dark: #1ba085;
  --theme-accent-light: #75e0c7;
  
  /* Background Colors */
  --theme-bg-body: #f8f9fa;
  --theme-bg-surface: #ffffff;
  --theme-bg-raised: #ffffff;
  --theme-bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Text Colors */
  --theme-text-primary: #212529;
  --theme-text-secondary: #6c757d;
  --theme-text-muted: #adb5bd;
  --theme-text-inverse: #ffffff;
  
  /* Border Colors */
  --theme-border-color: #dee2e6;
  --theme-border-light: #e9ecef;
  --theme-border-dark: #adb5bd;
  
  /* Shadow Colors */
  --theme-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --theme-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --theme-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  
  /* Status Colors */
  --theme-success: #198754;
  --theme-success-rgb: 25, 135, 84;
  --theme-info: #0dcaf0;
  --theme-info-rgb: 13, 202, 240;
  --theme-warning: #ffc107;
  --theme-warning-rgb: 255, 193, 7;
  --theme-danger: #dc3545;
  --theme-danger-rgb: 220, 53, 69;
  
  /* Navigation */
  --theme-nav-bg: #343a40;
  --theme-nav-text: #ffffff;
  --theme-nav-text-hover: #f8f9fa;
  --theme-nav-active: rgba(255, 255, 255, 0.1);
  
  /* Interactive Elements */
  --theme-hover-opacity: 0.8;
  --theme-focus-ring: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.25);
  
  /* Transitions */
  --theme-transition-base: 0.15s ease-in-out;
  --theme-transition-fast: 0.1s ease-in-out;
  --theme-transition-slow: 0.3s ease-in-out;
  
  /* Border Radius */
  --theme-radius-sm: 0.25rem;
  --theme-radius: 0.375rem;
  --theme-radius-lg: 0.5rem;
  --theme-radius-xl: 1rem;
  --theme-radius-pill: 50rem;
  
  /* Spacing (multipliers) */
  --theme-spacer: 1rem;
}

/* Espace Ruah Theme - Based on logo colors */
[data-theme="espace-ruah"] {
  /* Brand Colors from Logo */
  --theme-primary: #2563EB;         /* Royal Blue from logo */
  --theme-primary-rgb: 37, 99, 235;
  --theme-primary-dark: #1D4ED8;
  --theme-primary-light: #60A5FA;
  
  --theme-secondary: #06B6D4;       /* Turquoise from logo */
  --theme-secondary-rgb: 6, 182, 212;
  --theme-secondary-dark: #0891B2;
  --theme-secondary-light: #67E8F9;
  
  --theme-accent: #F59E0B;          /* Golden yellow from logo */
  --theme-accent-rgb: 245, 158, 11;
  --theme-accent-dark: #D97706;
  --theme-accent-light: #FCD34D;
  
  /* Background Colors - Spiritual and elegant */
  --theme-bg-body: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
  --theme-bg-surface: #FFFFFF;
  --theme-bg-raised: #F8FAFC;
  --theme-bg-overlay: rgba(37, 99, 235, 0.1);
  
  /* Text Colors */
  --theme-text-primary: #1E293B;
  --theme-text-secondary: #475569;
  --theme-text-muted: #64748B;
  --theme-text-inverse: #FFFFFF;
  
  /* Border Colors */
  --theme-border-color: #E2E8F0;
  --theme-border-light: #F1F5F9;
  --theme-border-dark: #CBD5E1;
  
  /* Enhanced Shadows for depth */
  --theme-shadow-sm: 0 1px 2px 0 rgba(37, 99, 235, 0.05);
  --theme-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06);
  --theme-shadow-lg: 0 10px 15px -3px rgba(37, 99, 235, 0.1), 0 4px 6px -2px rgba(37, 99, 235, 0.05);
  
  /* Status Colors - Harmonized with brand */
  --theme-success: #059669;         /* Emerald */
  --theme-success-rgb: 5, 150, 105;
  --theme-info: #06B6D4;           /* Same as secondary */
  --theme-info-rgb: 6, 182, 212;
  --theme-warning: #F59E0B;        /* Same as accent */
  --theme-warning-rgb: 245, 158, 11;
  --theme-danger: #DC2626;         /* Red */
  --theme-danger-rgb: 220, 38, 38;
  
  /* Navigation - Royal blue gradient */
  --theme-nav-bg: linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #3B82F6 100%);
  --theme-nav-text: #FFFFFF;
  --theme-nav-text-hover: #FCD34D;
  --theme-nav-active: rgba(245, 158, 11, 0.2);
  
  /* Interactive Elements */
  --theme-hover-opacity: 0.9;
  --theme-focus-ring: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
  
  /* Spiritual touches - Soft transitions */
  --theme-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme */
[data-theme="dark"] {
  --theme-primary: #3B82F6;
  --theme-primary-rgb: 59, 130, 246;
  --theme-primary-dark: #2563EB;
  --theme-primary-light: #93C5FD;
  
  --theme-secondary: #6B7280;
  --theme-secondary-rgb: 107, 114, 128;
  --theme-secondary-dark: #4B5563;
  --theme-secondary-light: #9CA3AF;
  
  --theme-accent: #10B981;
  --theme-accent-rgb: 16, 185, 129;
  --theme-accent-dark: #059669;
  --theme-accent-light: #6EE7B7;
  
  --theme-bg-body: #111827;
  --theme-bg-surface: #1F2937;
  --theme-bg-raised: #374151;
  --theme-bg-overlay: rgba(0, 0, 0, 0.75);
  
  --theme-text-primary: #F9FAFB;
  --theme-text-secondary: #D1D5DB;
  --theme-text-muted: #9CA3AF;
  --theme-text-inverse: #111827;
  
  --theme-border-color: #374151;
  --theme-border-light: #4B5563;
  --theme-border-dark: #6B7280;
  
  --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  
  --theme-nav-bg: #0F172A;
  --theme-nav-text: #F8FAFC;
  --theme-nav-text-hover: #E2E8F0;
  --theme-nav-active: rgba(59, 130, 246, 0.2);
}

/* Apply theme variables to elements */
body {
  background: var(--theme-bg-body);
  color: var(--theme-text-primary);
  transition: background var(--theme-transition-base), color var(--theme-transition-base);
}

/* Cards and surfaces */
.card, .modal-content, .dropdown-menu {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-color);
  box-shadow: var(--theme-shadow);
}

.card-header {
  background-color: var(--theme-bg-raised);
  border-color: var(--theme-border-color);
}

/* Navigation */
.navbar-dark {
  background: var(--theme-nav-bg) !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--theme-nav-text);
  transition: color var(--theme-transition-base);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--theme-nav-text-hover);
}

.navbar-dark .navbar-nav .nav-link.active {
  background-color: var(--theme-nav-active);
  border-radius: var(--theme-radius);
}

/* Buttons */
.btn-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.btn-primary:hover {
  background-color: var(--theme-primary-dark);
  border-color: var(--theme-primary-dark);
}

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

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

/* Forms */
.form-control, .form-select {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-color);
  color: var(--theme-text-primary);
}

.form-control:focus, .form-select:focus {
  border-color: var(--theme-primary);
  box-shadow: var(--theme-focus-ring);
}

/* Tables */
.table {
  color: var(--theme-text-primary);
}

.table-light {
  background-color: var(--theme-bg-raised);
}

.table-hover tbody tr:hover {
  background-color: var(--theme-bg-raised);
}

/* Badges */
.badge.bg-primary {
  background-color: var(--theme-primary) !important;
}

.badge.bg-secondary {
  background-color: var(--theme-secondary) !important;
}

.badge.bg-success {
  background-color: var(--theme-success) !important;
}

.badge.bg-info {
  background-color: var(--theme-info) !important;
}

.badge.bg-warning {
  background-color: var(--theme-warning) !important;
}

.badge.bg-danger {
  background-color: var(--theme-danger) !important;
}

/* Alerts */
.alert-primary {
  background-color: rgba(var(--theme-primary-rgb), 0.1);
  border-color: rgba(var(--theme-primary-rgb), 0.2);
  color: var(--theme-primary-dark);
}

.alert-info {
  background-color: rgba(var(--theme-info-rgb), 0.1);
  border-color: rgba(var(--theme-info-rgb), 0.2);
  color: var(--theme-info);
}

.alert-success {
  background-color: rgba(var(--theme-success-rgb), 0.1);
  border-color: rgba(var(--theme-success-rgb), 0.2);
  color: var(--theme-success);
}

.alert-warning {
  background-color: rgba(var(--theme-warning-rgb), 0.1);
  border-color: rgba(var(--theme-warning-rgb), 0.2);
  color: var(--theme-warning);
}

.alert-danger {
  background-color: rgba(var(--theme-danger-rgb), 0.1);
  border-color: rgba(var(--theme-danger-rgb), 0.2);
  color: var(--theme-danger);
}

/* Special Espace Ruah theme enhancements */
[data-theme="espace-ruah"] .navbar-brand {
  background: linear-gradient(45deg, var(--theme-accent), var(--theme-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

[data-theme="espace-ruah"] .card {
  border: 1px solid var(--theme-border-light);
  backdrop-filter: blur(10px);
}

[data-theme="espace-ruah"] .btn-primary {
  background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary));
  border: none;
  box-shadow: 0 4px 8px rgba(var(--theme-primary-rgb), 0.3);
}

[data-theme="espace-ruah"] .btn-primary:hover {
  background: linear-gradient(45deg, var(--theme-primary-dark), var(--theme-secondary-dark));
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(var(--theme-primary-rgb), 0.4);
}

/* Theme transition animations */
* {
  transition: 
    background-color var(--theme-transition-base),
    border-color var(--theme-transition-base),
    color var(--theme-transition-base),
    box-shadow var(--theme-transition-base);
}

/* Smooth theme switching */
.theme-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom spiritual elements for Espace Ruah theme */
[data-theme="espace-ruah"] .spiritual-glow {
  background: radial-gradient(circle at center, 
    rgba(var(--theme-accent-rgb), 0.1) 0%, 
    rgba(var(--theme-primary-rgb), 0.05) 50%, 
    transparent 100%);
}

/* Theme selector styles */
.theme-selector {
  position: relative;
}

.theme-preview {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--theme-border-color);
  display: inline-block;
  margin-right: 8px;
}

.theme-preview.default {
  background: linear-gradient(45deg, #0d6efd, #20c997);
}

.theme-preview.espace-ruah {
  background: linear-gradient(45deg, #2563EB, #06B6D4, #F59E0B);
}

.theme-preview.dark {
  background: linear-gradient(45deg, #1F2937, #3B82F6);
}