/**
 * SESH Design System - CSS Variables
 * Based on documented design system
 */

:root {
    /* Brand Colors - Blue Theme */
    --primary: #12707f;              /* Azul claro - cor primária */
    --primary-light: #1a8fa0;       /* Azul mais claro */
    --primary-dark: #0a515b;         /* Azul escuro - cor primária */
    --primary-darker: #083d45;       /* Azul mais escuro */
    --primary-gradient: linear-gradient(135deg, #0a515b 0%, #12707f 50%, #1a8fa0 100%);
    --primary-gradient-hover: linear-gradient(135deg, #083d45 0%, #0a515b 50%, #12707f 100%);
    --primary-subtle: #e0f2f5;       /* Azul muito claro */
    
    /* Accent Colors - Orange Secondary */
    --accent-orange: #ed6d16;        /* Laranja claro - cor secundária */
    --accent-orange-dark: #8e4409;   /* Laranja escuro - cor secundária */
    --accent-blue: #12707f;          /* Azul claro - cor primária */
    --accent-blue-dark: #0a515b;     /* Azul escuro - cor primária */
    
    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --black-text: #1a1a1a;
    --black-muted: #4a4a4a;
    --black-light: #6a6a6a;
    
    /* Neutral Colors - Deep Slate */
    --text-primary: #1f2937;         /* Cinza escuro */
    --text-secondary: #475569;       /* Cinza médio */
    --text-muted: #94a3b8;           /* Cinza claro */
    
    /* Background Colors */
    --bg-primary: #f8f9fa;           /* Cinza muito claro */
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;          /* Cinza claro */
    --bg-elevated: #ffffff;
    
    /* Sidebar Colors */
    --sidebar-bg: #1f2937;
    --sidebar-hover: rgba(255, 255, 255, 0.1);
    --sidebar-active: rgba(255, 255, 255, 0.15);
    --sidebar-text: rgba(255, 255, 255, 0.95);
    --sidebar-text-hover: #ffffff;
    
    /* Gray Scale - Refined */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    
    /* Semantic Colors - Vibrant */
    --success: #10b981;
    --success-light: #d1fae5;
    --success-dark: #047857;
    --success-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    
    --warning: #ed6d16;
    --warning-light: #ffe4d1;
    --warning-dark: #8e4409;
    --warning-gradient: linear-gradient(135deg, #8e4409 0%, #ed6d16 100%);
    
    --error: #ef4444;
    --danger: #ef4444;
    --error-light: #fee2e2;
    --error-dark: #dc2626;
    --error-gradient: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    
    --info: #12707f;
    --info-light: #e0f2f5;
    --info-dark: #0a515b;
    --info-gradient: linear-gradient(135deg, #0a515b 0%, #12707f 100%);
    
    /* Shadows - Dramatic */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-2xl: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
    --shadow-primary: 0 10px 30px -5px rgba(10, 81, 91, 0.4);
    --shadow-primary-lg: 0 20px 50px -10px rgba(10, 81, 91, 0.5);
    --shadow-sidebar: 4px 0 20px rgba(0, 0, 0, 0.15);
    
    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-2xl: 3rem;
    --radius-full: 9999px;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    
    /* Typography */
    --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Poppins', var(--font-sans);
    
    /* Transitions */
    --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Sidebar */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
}

/* Dark Mode Theme */
.dark-mode {
    /* Brand Colors - Adjusted for dark mode */
    --primary: #12707f;
    --primary-light: #1a8fa0;
    --primary-dark: #0a515b;
    --primary-subtle: #083d45;
    
    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-elevated: #475569;
    
    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    
    /* Sidebar Colors */
    --sidebar-bg: #111827;
    
    /* Neutral Colors */
    --white: #ffffff;
    --black: #000000;
    --black-text: #f9fafb;
    --black-muted: #d1d5db;
    --black-light: #9ca3af;
    
    /* Gray Scale - Inverted for dark mode */
    --gray-50: #111827;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;
    
    /* Semantic Colors - Adjusted brightness for dark mode */
    --success: #34d399;
    --success-light: #064e3b;
    --success-dark: #10b981;
    
    --warning: #ed6d16;
    --warning-light: #8e4409;
    --warning-dark: #ed6d16;
    
    --error: #f87171;
    --danger: #f87171;
    --error-light: #7f1d1d;
    --error-dark: #ef4444;
    
    --info: #12707f;
    --info-light: #083d45;
    --info-dark: #0a515b;
}

/* Dark Mode Body and Layout */
body.dark-mode {
    background-color: var(--bg-primary);
    color: var(--black-text);
}

body.dark-mode .bg-light,
body.dark-mode .bg-white {
    background-color: var(--bg-secondary) !important;
}

body.dark-mode .card {
    background-color: var(--bg-secondary);
    border-color: var(--gray-300);
    color: var(--black-text);
}

body.dark-mode .card-header {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--gray-300);
}

body.dark-mode .text-muted {
    color: var(--gray-500) !important;
}

body.dark-mode .text-dark {
    color: var(--black-text) !important;
}

body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom {
    border-color: var(--gray-300) !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--bg-tertiary);
    border-color: var(--gray-300);
    color: var(--black-text);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--primary);
    color: var(--black-text);
}

body.dark-mode .form-control::placeholder {
    color: var(--gray-500);
}

body.dark-mode .alert {
    border-color: var(--gray-300);
}

body.dark-mode .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--gray-300);
}

body.dark-mode .dropdown-item {
    color: var(--black-text);
}

body.dark-mode .dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--black-text);
}

body.dark-mode .table {
    color: var(--black-text);
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--bg-tertiary);
}

body.dark-mode footer {
    background-color: var(--bg-secondary) !important;
    color: var(--gray-500);
}

/* Dark Mode Navbar */
body.dark-mode .navbar {
    background-color: var(--bg-secondary) !important;
}

body.dark-mode .navbar-nav .nav-link {
    color: var(--gray-500);
}

body.dark-mode .navbar-nav .nav-link:hover,
body.dark-mode .navbar-nav .nav-link.active {
    color: var(--primary);
}

body.dark-mode .navbar-brand {
    color: var(--white) !important;
}

/* Dark Mode Welcome Banner */
body.dark-mode .welcome-banner {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    color: var(--black-text);
    border: 1px solid var(--gray-300);
}

/* Dark Mode Stat Cards */
body.dark-mode .stat-card {
    background-color: var(--bg-secondary);
    border-color: var(--gray-300);
}

body.dark-mode .stat-icon {
    background-color: var(--bg-tertiary) !important;
}

/* Dark Mode Links */
body.dark-mode a {
    color: var(--primary);
}

body.dark-mode a:hover {
    color: var(--primary-light);
}

/* Dark Mode Breadcrumbs */
body.dark-mode .breadcrumb {
    background-color: transparent;
}

body.dark-mode .breadcrumb-item a {
    color: var(--primary);
}

body.dark-mode .breadcrumb-item.active {
    color: var(--gray-500);
}

/* Dark Mode Buttons - Ensure text visibility */
body.dark-mode .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white) !important;
}

body.dark-mode .btn-primary:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--white) !important;
}

body.dark-mode .btn-primary i {
    color: var(--white) !important;
}

/* Dark Mode Input Groups */
body.dark-mode .input-group-text {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--gray-300);
    color: var(--black-text);
}

body.dark-mode .input-group-text i {
    color: var(--black-text) !important;
}

body.dark-mode .input-group .form-control {
    background-color: var(--bg-tertiary);
    border-color: var(--gray-300);
    color: var(--black-text);
}

/* Dark Mode Card Headers with bg-white */
body.dark-mode .card-header.bg-white {
    background-color: var(--bg-secondary) !important;
    color: var(--black-text) !important;
}

body.dark-mode .card-header.bg-white h5,
body.dark-mode .card-header.bg-white i {
    color: var(--black-text) !important;
}

/* Dark Mode Welcome Banner - ensure text is visible */
body.dark-mode .welcome-banner {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    color: var(--black-text);
    border: 1px solid var(--gray-300);
}

body.dark-mode .welcome-banner h1,
body.dark-mode .welcome-banner p,
body.dark-mode .welcome-banner i {
    color: var(--black-text) !important;
}

/* Dark Mode - Ensure button text is always visible */
body.dark-mode .btn {
    border-width: 1px;
}

body.dark-mode .btn i {
    opacity: 1;
}

/* Dark Mode - Stat Cards */
body.dark-mode .stat-card {
    background-color: var(--bg-secondary);
    border-color: var(--gray-300);
}

body.dark-mode .stat-icon {
    background-color: var(--bg-tertiary) !important;
}