/**
 * ========================================
 * TIGSI - Configuration des Couleurs
 * ========================================
 * Système de couleurs centralisé pour toute l'application
 * Inclut les variables CSS et les classes utilitaires
 */

:root {
    /* ==================== COULEURS PRINCIPALES ==================== */
    --tigsi-light-blue: #6DC6D4;
    --tigsi-purple: #667eea;
    --tigsi-violet: #764ba2;
    --tigsi-pink: #f093fb;
    --tigsi-navy-blue: #212C56;
    --tigsi-black: #272D3B;

    /* Couleurs de la page retraits (design moderne) */
    --tigsi-withdrawal-green: #43e97b;
    --tigsi-withdrawal-cyan: #38f9d7;

    /* ==================== COULEURS RGB (pour rgba) ==================== */
    --tigsi-light-blue-rgb: 109, 198, 212;
    --tigsi-purple-rgb: 102, 126, 234;
    --tigsi-violet-rgb: 118, 74, 162;
    --tigsi-pink-rgb: 240, 147, 251;
    --tigsi-navy-blue-rgb: 33, 44, 86;
    --tigsi-black-rgb: 39, 45, 59;

    /* RGB couleurs retraits */
    --tigsi-withdrawal-green-rgb: 67, 233, 123;
    --tigsi-withdrawal-cyan-rgb: 56, 249, 215;

    /* ==================== PRIMARY (Light Blue) ==================== */
    --tigsi-primary: var(--tigsi-light-blue);
    --tigsi-primary-solid: rgb(109, 198, 212);
    --tigsi-primary-alpha-70: rgba(109, 198, 212, 0.7);
    --tigsi-primary-alpha-30: rgba(109, 198, 212, 0.3);
    --tigsi-primary-alpha-10: rgba(109, 198, 212, 0.1);

    /* ==================== SECONDARY (Purple) ==================== */
    --tigsi-secondary: var(--tigsi-purple);
    --tigsi-secondary-solid: rgb(102, 126, 234);
    --tigsi-secondary-alpha-70: rgba(102, 126, 234, 0.7);
    --tigsi-secondary-alpha-30: rgba(102, 126, 234, 0.3);
    --tigsi-secondary-alpha-10: rgba(102, 126, 234, 0.1);

    /* ==================== VIOLET ==================== */
    --tigsi-violet-solid: rgb(118, 74, 162);
    --tigsi-violet-alpha-70: rgba(118, 74, 162, 0.7);
    --tigsi-violet-alpha-30: rgba(118, 74, 162, 0.3);
    --tigsi-violet-alpha-10: rgba(118, 74, 162, 0.1);

    /* ==================== ACCENT (Pink) ==================== */
    --tigsi-accent: var(--tigsi-pink);
    --tigsi-accent-solid: rgb(240, 147, 251);
    --tigsi-accent-alpha-70: rgba(240, 147, 251, 0.7);
    --tigsi-accent-alpha-30: rgba(240, 147, 251, 0.3);
    --tigsi-accent-alpha-10: rgba(240, 147, 251, 0.1);

    /* ==================== NAVY ==================== */
    --tigsi-navy: var(--tigsi-navy-blue);
    --tigsi-navy-solid: rgb(33, 44, 86);
    --tigsi-navy-alpha-70: rgba(33, 44, 86, 0.7);
    --tigsi-navy-alpha-30: rgba(33, 44, 86, 0.3);
    --tigsi-navy-alpha-10: rgba(33, 44, 86, 0.1);

    /* ==================== DARK (Black) ==================== */
    --tigsi-dark: var(--tigsi-black);
    --tigsi-dark-solid: rgb(39, 45, 59);
    --tigsi-dark-alpha-70: rgba(39, 45, 59, 0.7);
    --tigsi-dark-alpha-30: rgba(39, 45, 59, 0.3);
    --tigsi-dark-alpha-10: rgba(39, 45, 59, 0.1);

    /* ==================== GRADIENTS ==================== */
    --tigsi-gradient-primary: linear-gradient(90deg, #6DC6D4, #667eea);
    --tigsi-gradient-accent: linear-gradient(90deg, #6DC6D4, #f093fb);
    --tigsi-gradient-135: linear-gradient(135deg, #6DC6D4 0%, #667eea 100%);
    --tigsi-gradient-vertical: linear-gradient(180deg, #6DC6D4, #667eea);
    --tigsi-gradient-purple-violet: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --tigsi-gradient-purple-pink: linear-gradient(135deg, #667eea 0%, #f093fb 100%);

    /* Gradients page retraits */
    --tigsi-withdrawal-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --tigsi-withdrawal-success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);

    /* ==================== SÉMANTIQUE FINANCIER ==================== */
    --tigsi-revenue: var(--tigsi-primary);
    --tigsi-expense: var(--tigsi-accent);
    --tigsi-commission: var(--tigsi-secondary);
    --tigsi-net-result: var(--tigsi-navy);
    --tigsi-neutral: var(--tigsi-dark);

    /* ==================== VARIANTES AVEC OPACITÉ - COULEURS RETRAITS ==================== */
    --tigsi-withdrawal-green-alpha-70: rgba(67, 233, 123, 0.7);
    --tigsi-withdrawal-green-alpha-40: rgba(67, 233, 123, 0.4);
    --tigsi-withdrawal-green-alpha-30: rgba(67, 233, 123, 0.3);
    --tigsi-withdrawal-green-alpha-10: rgba(67, 233, 123, 0.1);
    --tigsi-withdrawal-cyan-alpha-70: rgba(56, 249, 215, 0.7);
    --tigsi-withdrawal-cyan-alpha-30: rgba(56, 249, 215, 0.3);
    --tigsi-withdrawal-cyan-alpha-10: rgba(56, 249, 215, 0.1);
}

/* ==================== CLASSES UTILITAIRES - COULEURS DE TEXTE ==================== */
.text-tigsi-primary {
    color: var(--tigsi-primary) !important;
}

.text-tigsi-secondary {
    color: var(--tigsi-secondary) !important;
}

.text-tigsi-violet {
    color: var(--tigsi-violet) !important;
}

.text-tigsi-accent {
    color: var(--tigsi-accent) !important;
}

.text-tigsi-navy {
    color: var(--tigsi-navy) !important;
}

.text-tigsi-dark {
    color: var(--tigsi-dark) !important;
}

/* ==================== CLASSES UTILITAIRES - BACKGROUND ==================== */
.bg-tigsi-primary {
    background-color: var(--tigsi-primary) !important;
}

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

.bg-tigsi-violet {
    background-color: var(--tigsi-violet) !important;
}

.bg-tigsi-accent {
    background-color: var(--tigsi-accent) !important;
}

.bg-tigsi-navy {
    background-color: var(--tigsi-navy) !important;
}

.bg-tigsi-dark {
    background-color: var(--tigsi-dark) !important;
}

/* Background avec opacité */
.bg-tigsi-primary-light {
    background-color: var(--tigsi-primary-alpha-10) !important;
}

.bg-tigsi-secondary-light {
    background-color: var(--tigsi-secondary-alpha-10) !important;
}

.bg-tigsi-violet-light {
    background-color: var(--tigsi-violet-alpha-10) !important;
}

.bg-tigsi-accent-light {
    background-color: var(--tigsi-accent-alpha-10) !important;
}

.bg-tigsi-navy-light {
    background-color: var(--tigsi-navy-alpha-10) !important;
}

.bg-tigsi-dark-light {
    background-color: var(--tigsi-dark-alpha-10) !important;
}

/* ==================== CLASSES UTILITAIRES - GRADIENTS ==================== */
.bg-tigsi-gradient-primary {
    background: var(--tigsi-gradient-primary) !important;
}

.bg-tigsi-gradient-accent {
    background: var(--tigsi-gradient-accent) !important;
}

.bg-tigsi-gradient-135 {
    background: var(--tigsi-gradient-135) !important;
}

.bg-tigsi-gradient-vertical {
    background: var(--tigsi-gradient-vertical) !important;
}

.bg-tigsi-gradient-purple-violet {
    background: var(--tigsi-gradient-purple-violet) !important;
}

.bg-tigsi-gradient-purple-pink {
    background: var(--tigsi-gradient-purple-pink) !important;
}

/* ==================== CLASSES UTILITAIRES - BORDURES ==================== */
.border-tigsi-primary {
    border-color: var(--tigsi-primary) !important;
}

.border-tigsi-secondary {
    border-color: var(--tigsi-secondary) !important;
}

.border-tigsi-violet {
    border-color: var(--tigsi-violet) !important;
}

.border-tigsi-accent {
    border-color: var(--tigsi-accent) !important;
}

.border-tigsi-navy {
    border-color: var(--tigsi-navy) !important;
}

.border-tigsi-dark {
    border-color: var(--tigsi-dark) !important;
}

/* Bordures gauche/droite/haut/bas */
.border-left-tigsi-primary {
    border-left: 4px solid var(--tigsi-primary) !important;
}

.border-left-tigsi-secondary {
    border-left: 4px solid var(--tigsi-secondary) !important;
}

.border-left-tigsi-violet {
    border-left: 4px solid var(--tigsi-violet) !important;
}

.border-left-tigsi-accent {
    border-left: 4px solid var(--tigsi-accent) !important;
}

.border-left-tigsi-navy {
    border-left: 4px solid var(--tigsi-navy) !important;
}

.border-top-tigsi-primary {
    border-top: 2px solid var(--tigsi-primary) !important;
}

.border-top-tigsi-secondary {
    border-top: 2px solid var(--tigsi-secondary) !important;
}

.border-top-tigsi-violet {
    border-top: 2px solid var(--tigsi-violet) !important;
}

.border-top-tigsi-accent {
    border-top: 2px solid var(--tigsi-accent) !important;
}

/* ==================== CLASSES UTILITAIRES - BADGES ==================== */
.badge-tigsi-primary {
    background-color: var(--tigsi-primary);
    color: white;
}

.badge-tigsi-secondary {
    background-color: var(--tigsi-secondary);
    color: white;
}

.badge-tigsi-violet {
    background-color: var(--tigsi-violet);
    color: white;
}

.badge-tigsi-accent {
    background-color: var(--tigsi-accent);
    color: white;
}

.badge-tigsi-navy {
    background-color: var(--tigsi-navy);
    color: white;
}

.badge-tigsi-dark {
    background-color: var(--tigsi-dark);
    color: white;
}

/* ==================== CLASSES UTILITAIRES - BOUTONS ==================== */
.btn-tigsi-primary {
    background-color: var(--tigsi-primary);
    border-color: var(--tigsi-primary);
    color: white;
}

.btn-tigsi-primary:hover {
    background-color: var(--tigsi-primary-alpha-70);
    border-color: var(--tigsi-primary);
    color: white;
}

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

.btn-tigsi-secondary:hover {
    background-color: var(--tigsi-secondary-alpha-70);
    border-color: var(--tigsi-secondary);
    color: white;
}

.btn-tigsi-violet {
    background-color: var(--tigsi-violet);
    border-color: var(--tigsi-violet);
    color: white;
}

.btn-tigsi-violet:hover {
    background-color: var(--tigsi-violet-alpha-70);
    border-color: var(--tigsi-violet);
    color: white;
}

.btn-tigsi-accent {
    background-color: var(--tigsi-accent);
    border-color: var(--tigsi-accent);
    color: white;
}

.btn-tigsi-accent:hover {
    background-color: var(--tigsi-accent-alpha-70);
    border-color: var(--tigsi-accent);
    color: white;
}

/* Boutons outline */
.btn-outline-tigsi-primary {
    background-color: transparent;
    border-color: var(--tigsi-primary);
    color: var(--tigsi-primary);
}

.btn-outline-tigsi-primary:hover {
    background-color: var(--tigsi-primary);
    border-color: var(--tigsi-primary);
    color: white;
}

.btn-outline-tigsi-secondary {
    background-color: transparent;
    border-color: var(--tigsi-secondary);
    color: var(--tigsi-secondary);
}

.btn-outline-tigsi-secondary:hover {
    background-color: var(--tigsi-secondary);
    border-color: var(--tigsi-secondary);
    color: white;
}

.btn-outline-tigsi-violet {
    background-color: transparent;
    border-color: var(--tigsi-violet);
    color: var(--tigsi-violet);
}

.btn-outline-tigsi-violet:hover {
    background-color: var(--tigsi-violet);
    border-color: var(--tigsi-violet);
    color: white;
}

/* ==================== CLASSES UTILITAIRES - CARDS ==================== */
.card-tigsi-primary {
    border-top: 3px solid var(--tigsi-primary);
}

.card-tigsi-secondary {
    border-top: 3px solid var(--tigsi-secondary);
}

.card-tigsi-violet {
    border-top: 3px solid var(--tigsi-violet);
}

.card-tigsi-accent {
    border-top: 3px solid var(--tigsi-accent);
}

.card-header-tigsi-gradient {
    background: var(--tigsi-gradient-primary);
    color: white;
}

/* ==================== CLASSES UTILITAIRES - HOVER EFFECTS ==================== */
.hover-tigsi-primary:hover {
    background-color: var(--tigsi-primary-alpha-10) !important;
    transition: background-color 0.3s ease;
}

.hover-tigsi-secondary:hover {
    background-color: var(--tigsi-secondary-alpha-10) !important;
    transition: background-color 0.3s ease;
}

.hover-tigsi-violet:hover {
    background-color: var(--tigsi-violet-alpha-10) !important;
    transition: background-color 0.3s ease;
}

.hover-tigsi-accent:hover {
    background-color: var(--tigsi-accent-alpha-10) !important;
    transition: background-color 0.3s ease;
}

/* ==================== CLASSES UTILITAIRES - SÉMANTIQUE FINANCIER ==================== */
.text-revenue {
    color: var(--tigsi-revenue) !important;
}

.text-expense {
    color: var(--tigsi-expense) !important;
}

.text-commission {
    color: var(--tigsi-commission) !important;
}

.text-net-result {
    color: var(--tigsi-net-result) !important;
}

.bg-revenue {
    background-color: var(--tigsi-revenue) !important;
}

.bg-expense {
    background-color: var(--tigsi-expense) !important;
}

.bg-commission {
    background-color: var(--tigsi-commission) !important;
}

.bg-net-result {
    background-color: var(--tigsi-net-result) !important;
}

.badge-revenue {
    background-color: var(--tigsi-revenue);
    color: white;
}

.badge-expense {
    background-color: var(--tigsi-expense);
    color: white;
}

.badge-commission {
    background-color: var(--tigsi-commission);
    color: white;
}

/* ==================== AMÉLIORATION DES TABLES ==================== */
.table-tigsi thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid var(--tigsi-primary);
    font-weight: 600;
}

.table-tigsi tbody tr:hover {
    background-color: var(--tigsi-primary-alpha-10);
}

/* ==================== AMÉLIORATION DES CARDS ==================== */
.card-tigsi {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.card-tigsi .card-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid var(--tigsi-primary);
    font-weight: 600;
}

/* ==================== STATS BOXES ==================== */
.stat-box-tigsi {
    text-align: center;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
}

.stat-box-tigsi h6 {
    color: #6c757d;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.stat-box-tigsi h2 {
    margin-bottom: 0;
    font-weight: bold;
}

.stat-box-tigsi.primary h2 {
    color: var(--tigsi-primary);
}

.stat-box-tigsi.secondary h2 {
    color: var(--tigsi-secondary);
}

.stat-box-tigsi.violet h2 {
    color: var(--tigsi-violet);
}

.stat-box-tigsi.accent h2 {
    color: var(--tigsi-accent);
}

.stat-box-tigsi.navy h2 {
    color: var(--tigsi-navy);
}

/* ==================== TREND BOXES ==================== */
.trend-box-tigsi {
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
}

.trend-box-tigsi.primary {
    border-left: 4px solid var(--tigsi-primary) !important;
}

.trend-box-tigsi.secondary {
    border-left: 4px solid var(--tigsi-secondary) !important;
}

.trend-box-tigsi.violet {
    border-left: 4px solid var(--tigsi-violet) !important;
}

.trend-box-tigsi.accent {
    border-left: 4px solid var(--tigsi-accent) !important;
}

.trend-box-tigsi.navy {
    border-left: 4px solid var(--tigsi-navy) !important;
}

/* ==================== ALERTS PERSONNALISÉS ==================== */
.alert-tigsi-primary {
    background-color: var(--tigsi-primary-alpha-10);
    border-left: 4px solid var(--tigsi-primary);
    color: var(--tigsi-navy);
}

.alert-tigsi-secondary {
    background-color: var(--tigsi-secondary-alpha-10);
    border-left: 4px solid var(--tigsi-secondary);
    color: var(--tigsi-navy);
}

.alert-tigsi-violet {
    background-color: var(--tigsi-violet-alpha-10);
    border-left: 4px solid var(--tigsi-violet);
    color: var(--tigsi-navy);
}

.alert-tigsi-accent {
    background-color: var(--tigsi-accent-alpha-10);
    border-left: 4px solid var(--tigsi-accent);
    color: var(--tigsi-navy);
}

/* ==================== PROGRESS BARS ==================== */
.progress-tigsi-primary .progress-bar {
    background-color: var(--tigsi-primary);
}

.progress-tigsi-secondary .progress-bar {
    background-color: var(--tigsi-secondary);
}

.progress-tigsi-violet .progress-bar {
    background-color: var(--tigsi-violet);
}

.progress-tigsi-accent .progress-bar {
    background-color: var(--tigsi-accent);
}

.progress-tigsi-gradient .progress-bar {
    background: var(--tigsi-gradient-primary);
}

/* ==================== COULEURS PAGE RETRAITS - CLASSES UTILITAIRES ==================== */

/* Couleurs de texte */
.text-withdrawal-purple {
    color: var(--tigsi-purple) !important;
}

.text-withdrawal-violet {
    color: var(--tigsi-violet) !important;
}

.text-withdrawal-pink {
    color: var(--tigsi-pink) !important;
}

.text-withdrawal-green {
    color: var(--tigsi-withdrawal-green) !important;
}

.text-withdrawal-cyan {
    color: var(--tigsi-withdrawal-cyan) !important;
}

/* Backgrounds */
.bg-withdrawal-purple {
    background-color: var(--tigsi-purple) !important;
}

.bg-withdrawal-violet {
    background-color: var(--tigsi-violet) !important;
}

.bg-withdrawal-pink {
    background-color: var(--tigsi-pink) !important;
}

.bg-withdrawal-green {
    background-color: var(--tigsi-withdrawal-green) !important;
}

.bg-withdrawal-cyan {
    background-color: var(--tigsi-withdrawal-cyan) !important;
}

.bg-withdrawal-purple-light {
    background-color: var(--tigsi-secondary-alpha-10) !important;
}

.bg-withdrawal-green-light {
    background-color: var(--tigsi-withdrawal-green-alpha-30) !important;
}

/* Gradients */
.bg-withdrawal-gradient {
    background: var(--tigsi-gradient-purple-violet) !important;
}

.bg-withdrawal-success-gradient {
    background: var(--tigsi-withdrawal-success-gradient) !important;
}

/* Boutons */
.btn-withdrawal {
    background: var(--tigsi-gradient-purple-violet);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-withdrawal:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--tigsi-secondary-alpha-30);
    color: white;
}

.btn-withdrawal-success {
    background: var(--tigsi-withdrawal-success-gradient);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-withdrawal-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--tigsi-withdrawal-green-alpha-40);
    color: white;
}

/* Badges */
.badge-withdrawal {
    background: var(--tigsi-gradient-purple-violet);
    color: white;
}

.badge-withdrawal-success {
    background: var(--tigsi-withdrawal-success-gradient);
    color: white;
}

.badge-withdrawal-purple {
    background-color: var(--tigsi-purple);
    color: white;
}

.badge-withdrawal-green {
    background-color: var(--tigsi-withdrawal-green);
    color: white;
}

/* Cards */
.card-withdrawal {
    border-top: 3px solid var(--tigsi-purple);
}

.card-header-withdrawal {
    background: var(--tigsi-gradient-purple-violet);
    color: white;
}

/* Alerts */
.alert-withdrawal {
    background-color: var(--tigsi-secondary-alpha-10);
    border-left: 4px solid var(--tigsi-purple);
    color: var(--tigsi-navy);
}

/* Border utilities */
.border-withdrawal {
    border-color: var(--tigsi-purple) !important;
}

.border-left-withdrawal {
    border-left: 4px solid var(--tigsi-purple) !important;
}

.border-top-withdrawal {
    border-top: 2px solid var(--tigsi-purple) !important;
}