/**
 * SurvSync Design System - Color Variables
 * Core color definitions that power the entire application
 */

:root {
    /*******************************
     * PRIMARY COLOR PALETTE
     *******************************/
    /* Brand Colors */
    --survsync-primary: #7A6BC4;      /* Main brand purple */
    --survsync-dark: #5D4F9F;         /* Darker purple */
    --survsync-darker: #453A7A;       /* Deep purple */
    --survsync-light: #9A8DD8;        /* Light purple */
    --survsync-lighter: #C0B6E8;      /* Very light purple */
    
    /* Accent Colors */
    --survsync-secondary: #67C4B4;    /* Teal accent */
    --survsync-accent: #D8C48D;       /* Gold accent */
    --survsync-tertiary: #C47A9D;     /* Rose accent */
    
    /* Neutral Colors */
    --survsync-text: #4A4A5A;         /* Main text */
    --survsync-text-light: #7E7E8F;   /* Secondary text */
    --survsync-border: #E9E8F0;       /* Borders */
    --survsync-bg: #F8F7FC;           /* Page background */
    
    /* UI Feedback Colors */
    --survsync-success: #198754;      /* Success messages */
    --survsync-warning: #FFC107;      /* Warnings */
    --survsync-danger: #a50d02;       /* Errors */
    --survsync-info: #2196F3;         /* Information */
    
    /*******************************
     * COMPONENT-SPECIFIC COLORS
     *******************************/
    /* Layout Elements */
    --survsync-header-bg: #FFFFFF;    /* Header background */
    --survsync-card-shadow: rgba(122, 107, 196, 0.12); /* Card shadows */
    
    /* Sidebar Colors */
    --survsync-sidebar-bg: #dddce1;  
    --survsync-sidebar-active: rgba(122, 107, 196, 0.1);
    --survsync-sidebar-hover: rgba(122, 107, 196, 0.08);
    --survsync-sidebar-submenu-bg: rgba(122, 107, 196, 0.05);
    --survsync-sidebar-text: var(--survsync-primary);
    --survsync-sidebar-shadow: rgba(0, 0, 0, 0.05);
    --survsync-sidebar-active-text: var(--survsync-dark);

    /* Navbar */
    --survsync-navbar-bg: #ffffff;
    --survsync-navbar-text: var(--survsync-text);
    --survsync-navbar-border: var(--survsync-border);

    /* Dropdown Menus */
    --survsync-dropdown-bg: #ffffff;
    --survsync-dropdown-border: var(--survsync-border);
    --survsync-dropdown-shadow: var(--survsync-card-shadow);
    --survsync-dropdown-item-hover: var(--survsync-bg);
    
    /* Table Styling */
    --survsync-table-header-bg: #f8f9fa;
    --survsync-table-border: #e9ecef;
    --survsync-table-text: #2c3e50;
    --survsync-table-shadow: rgba(0, 0, 0, 0.05);
    --survsync-table-hover-shadow: rgba(0, 0, 0, 0.1);
    
    /* Table Types */
    --survsync-reports-bg: #d3eef0;
    --survsync-reports-striped: #c5e3e5;
    --survsync-reports-border: #b9d8db;
    --survsync-reports-hover: #b2d2d5;
    
    --survsync-company-bg: #e9e0f5;
    --survsync-company-striped: #ddd1f0;
    --survsync-company-border: #d1c6eb;
    --survsync-company-hover: #c8bde6;
    
    --survsync-instructions-bg: #fff7e6;
    --survsync-instructions-striped: #ffeed2;
    --survsync-instructions-border: #ffd59a;
    --survsync-instructions-hover: #ffcc80;
    
    /* Calendar */
    --survsync-calendar-bg: #f8f9fa;
    --survsync-calendar-grid-border: #eee;
    
    /* Reference Data */
    --survsync-ref-number: #1a237e;
    --survsync-survey-type: #0d47a1;
    --survsync-datetime: #1565c0;
    
    /*******************************
     * VISUAL EFFECTS
     *******************************/
    /* Shadows */
    --survsync-shadow-sm: 0 2px 5px var(--survsync-card-shadow);
    --survsync-shadow-md: 0 5px 15px var(--survsync-card-shadow);
    --survsync-shadow-lg: 0 10px 25px var(--survsync-card-shadow);
    --survsync-shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);
    
    /* Gradients */
    --survsync-gradient-primary: linear-gradient(135deg, var(--survsync-primary), var(--survsync-dark));
    --survsync-gradient-accent: linear-gradient(135deg, var(--survsync-secondary), var(--survsync-primary));
    --survsync-gradient-light: linear-gradient(135deg, var(--survsync-lighter), var(--survsync-bg));
    
    /* Overlays */
    --survsync-overlay-dark: rgba(93, 79, 159, 0.9);
    --survsync-overlay-light: rgba(103, 196, 180, 0.8);
}

/*******************************
 * UTILITY CLASSES 
 *******************************/
/* Text Colors */
.text-primary { color: var(--survsync-primary) !important; }
.text-secondary { color: var(--survsync-secondary) !important; }
.text-accent { color: var(--survsync-accent) !important; }
.text-tertiary { color: var(--survsync-tertiary) !important; }
.text-dark { color: var(--survsync-text) !important; }
.text-light { color: var(--survsync-text-light) !important; }

/* Background Colors */
.bg-primary { background-color: var(--survsync-primary) !important; }
.bg-secondary { background-color: var(--survsync-secondary) !important; }
.bg-accent { background-color: var(--survsync-accent) !important; }
.bg-tertiary { background-color: var(--survsync-tertiary) !important; }
.bg-light { background-color: var(--survsync-bg) !important; }

/* Badge Colors */
.badge-primary { background-color: var(--survsync-primary) !important; color: white !important; }
.badge-secondary { background-color: var(--survsync-secondary) !important; color: white !important; }
.badge-accent { background-color: var(--survsync-accent) !important; color: var(--survsync-text) !important; }
.badge-tertiary { background-color: var(--survsync-tertiary) !important; color: white !important; }

/* Button Color Overrides */
.btn-primary { 
    background-color: var(--survsync-primary) !important; 
    border-color: var(--survsync-primary) !important; 
    color: #ffffff !important;
}
.btn-ai-primary { 
  background-color: var(--survsync-report-ai-primary) !important; 
  border-color: var(--survsync-report-ai-primary) !important; 
  color: #ffffff !important;
}
.btn-secondary { 
    background-color: var(--survsync-secondary) !important; 
    border-color: var(--survsync-secondary) !important; 
    color: #ffffff !important;
}
.btn-accent { 
    background-color: var(--survsync-accent) !important; 
    border-color: var(--survsync-accent) !important; 
    color: var(--survsync-text) !important;
}
.btn-tertiary { 
    background-color: var(--survsync-tertiary) !important; 
    border-color: var(--survsync-tertiary) !important; 
    color: #ffffff !important;
}

/* Button Hover Effects - include text color here too */
.btn-primary:hover { 
    background-color: var(--survsync-dark) !important; 
    border-color: var(--survsync-dark) !important;
    color: #ffffff !important;
}
.btn-ai-primary:hover { 
  background-color: var(--survsync-report-ai-primary-darker) !important; 
  border-color: var(--survsync-report-ai-primary-darker) !important;
  color: #ffffff !important;
}
.btn-secondary:hover { 
    background-color: #559E93 !important; 
    border-color: #559E93 !important;
    color: #ffffff !important;
}

/* Button Outline Styles */
.btn-outline-primary { 
    background-color: transparent !important; 
    border-color: var(--survsync-primary) !important; 
    color: var(--survsync-primary) !important;
}
.btn-outline-primary:hover { 
    background-color: var(--survsync-primary) !important; 
    border-color: var(--survsync-primary) !important;
    color: #ffffff !important;
}
.btn-outline-secondary { 
    background-color: transparent !important; 
    border-color: var(--survsync-secondary) !important; 
    color: var(--survsync-secondary) !important;
}
.btn-outline-secondary:hover { 
    background-color: var(--survsync-secondary) !important; 
    border-color: var(--survsync-secondary) !important;
    color: #ffffff !important;
}
.btn-outline-accent { 
    background-color: transparent !important; 
    border-color: var(--survsync-accent) !important; 
    color: var(--survsync-accent) !important;
}
.btn-outline-accent:hover { 
    background-color: var(--survsync-accent) !important; 
    border-color: var(--survsync-accent) !important;
    color: var(--survsync-text) !important;
}
.btn-outline-tertiary { 
    background-color: transparent !important; 
    border-color: var(--survsync-tertiary) !important; 
    color: var(--survsync-tertiary) !important;
}
.btn-outline-tertiary:hover { 
    background-color: var(--survsync-tertiary) !important; 
    border-color: var(--survsync-tertiary) !important;
    color: #ffffff !important;
}

/* Gradient Utilities */
.gradient-primary { background: var(--survsync-gradient-primary) !important; }
.gradient-accent { background: var(--survsync-gradient-accent) !important; }
.gradient-light { background: var(--survsync-gradient-light) !important; }

/* Border Utilities */
.border-primary { border-color: var(--survsync-primary) !important; }
.border-secondary { border-color: var(--survsync-secondary) !important; }
.border-default { border-color: var(--survsync-border) !important; }

/* Form Validation Colors */
.is-valid { border-color: var(--survsync-success) !important; }
.is-invalid { border-color: var(--survsync-danger) !important; }
.is-warning { border-color: var(--survsync-warning) !important; }

/* Notification Colors */
.notie-background-success { background-color: var(--survsync-success); }
.notie-background-warning { background-color: var(--survsync-warning); }
.notie-background-error { background-color: var(--survsync-danger); }
.notie-background-info { background-color: var(--survsync-info); }

/*******************************
 * REPORT CLASSES 
 *******************************/

/* Apply template variables to both body.template-body AND .ex-container */
body.template-body, .ex-container {
  /* Background and text colors */
  --survsync-report-bg-light: #ffffff;
  --survsync-report-bg-light-alt: #f8f9fa;
  --survsync-report-bg-accent-light: #fff8dc;
  --survsync-report-bg-dark: #e9ecef;
  
  /* Main theme colors - template specific */
  --survsync-report-primary: #7A6BC4; /* Now matches main app primary */
  --survsync-report-primary-light: #9A8DD8; /* Match main app light */
  --survsync-report-primary-dark: #5D4F9F; /* Match main app dark */
  --survsync-report-primary-rgb: 122, 107, 196; /* RGB values for main app primary */
  
  /* Secondary colors */
  --survsync-report-secondary: #45477a;
  --survsync-report-secondary-light: #5a5c9e;
  --survsync-report-secondary-dark: #343659;
  
  /* Accent colors */
  --survsync-report-accent: #f8dd70;
  --survsync-report-accent-light: #faecb0;
  --survsync-report-accent-dark: #e5ca5d;
  
  /* Semantic colors */
  --survsync-report-success: #198754;
  --survsync-report-success-light: #56c156;
  --survsync-report-success-dark: #04531b;
  --survsync-report-success-rgb: 25, 135, 84;
  
  --survsync-report-danger: #dc3545;
  --survsync-report-danger-light: #d07676;
  --survsync-report-danger-dark: #a71d2a;
  
  --survsync-report-warning: #ffc107;
  --survsync-report-warning-light: #ffda6a;
  --survsync-report-warning-dark: #ba8b00;
  
  --survsync-report-info: #0dcaf0;
  --survsync-report-info-light: #6edff6;
  --survsync-report-info-dark: #098096;
  
  /* Text colors */
  --survsync-report-text-light: #ffffff;
  --survsync-report-text-dark: #333333;
  --survsync-report-text-muted: #6c757d;
  
  /* Border colors */
  --survsync-report-border: #ced4da;
  --survsync-report-border-light: #dee2e6;
  --survsync-report-border-dark: #3c3d3d;
  
  /* Table colors */
  --survsync-report-table-reports-bg: #d3eef0;
  --survsync-report-table-reports-striped-bg: #c5e3e5;
  --survsync-report-table-reports-active-bg: #b9d8db;
  --survsync-report-table-reports-hover-bg: #b2d2d5;
  
  --survsync-report-table-company-bg: #e9e0f5;
  --survsync-report-table-company-striped-bg: #ddd1f0;
  --survsync-report-table-company-active-bg: #d1c6eb;
  --survsync-report-table-company-hover-bg: #c8bde6;
  
  --survsync-report-table-instructions-bg: #fff7e6;
  --survsync-report-table-instructions-striped-bg: #ffeed2;
  --survsync-report-table-instructions-active-bg: #ffd59a;
  --survsync-report-table-instructions-hover-bg: #ffcc80;

  --survsync-report-ai: #01C1F0;
  --survsync-report-ai-light: #01E7F0;
  --survsync-report-ai-lighter: #d9f2f9;
  --survsync-report-ai-dark: #007CF0;
  --survsync-report-ai-primary: #dcf4fa;
  --survsync-report-ai-primary-darker: #b7eaf7;
  
  /* Ensure header-bg is defined (needed for navbar) */
  --survsync-report-header-bg: #ffffff;
}

/* Set direct background color on template body */
body.template-body {
  background-color: #7A6BC4;
}

/* Update all component references to use the new variable names */
.ex-container .main-panel {
  background-color: var(--survsync-report-bg-light);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}

.ex-container .card {
  background-color: var(--survsync-report-bg-accent-light);
}

.ex-container .card-header-notes {
  background-color: var(--survsync-report-accent);
  color: var(--survsync-report-text-dark);
}

/* Ensure toggle switches look correct in templates */
.ex-container .slider {
  background-color: var(--survsync-report-border);
}

.ex-container .slider:before {
  background-color: var(--survsync-report-text-light);
}

.ex-container input:checked + .slider {
  background-color: var(--survsync-report-success);
}

/* Fix condition rating buttons in templates */
.ex-container .condition-btn.cr1,
.ex-container .notes-condition-btn.cr1 {
  background-color: var(--survsync-report-success);
  color: var(--survsync-report-text-light);
}

.ex-container .condition-btn.cr2,
.ex-container .notes-condition-btn.cr2 {
  background-color: var(--survsync-report-warning);
  color: var(--survsync-report-text-dark);
}

.ex-container .condition-btn.cr3,
.ex-container .notes-condition-btn.cr3 {
  background-color: var(--survsync-report-danger);
  color: var(--survsync-report-text-light);
}

.ex-container .condition-btn.ni,
.ex-container .notes-condition-btn.ni {
  background-color: var(--survsync-report-bg-dark);
  color: var(--survsync-report-text-light);
}

/* Fix navbar issues in templates */
.ex-container .navbar-report {
  background-color: var(--survsync-report-bg-light);
  border-bottom: 1px solid var(--survsync-report-border-light);
}

.ex-container .navbar-report-brand-wrapper {
  background-color: var(--survsync-report-bg-light);
}