/* Theme Colors CSS - Based on Turquoise and Dark Green */
:root {
    /* Primary Colors */
    --primary-color: #0e8040;
    /* Dark Green */
    --primary-dark: #0a6633;
    /* Darker Green */
    --primary-light: #20c997;
    /* Turquoise */
    --primary-lighter: #d1f2eb;
    --primary-rgb: 14, 128, 64;

    /* Secondary Colors */
    --secondary-color: #20c997;
    /* Turquoise */
    --secondary-dark: #17a37a;
    --secondary-light: #4dd4ac;
    --secondary-lighter: #e3fcf5;
    --secondary-rgb: 32, 201, 151;

    /* Text Colors */
    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --text-light: #ecf0f1;
    --text-muted: #95a5a6;

    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #ecf0f1;
    --bg-hover: rgba(32, 201, 151, 0.08);
    --bg-active: rgba(14, 128, 64, 0.15);

    /* Border Colors */
    --border-color: #e9ecef;
    --border-hover: #bdc3c7;

    /* Status Colors */
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --info-color: #20c997;
    /* Changed from blue to turquoise */
}

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

/* Button color override */
button.btn.btn-primary {
    color: rgba(245, 245, 245, 1) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

/* Links */
a {
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-dark);
}

/* Form Controls */
.form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

/* Cards */
.card-header {
    border-bottom: 1px solid var(--border-color);
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

/* Tables */
.table-hover tbody tr:hover {
    background-color: var(--bg-hover);
}

.table-active {
    background-color: var(--bg-active) !important;
}

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

/* Alerts */
.alert-primary {
    background-color: var(--primary-lighter);
    border-color: var(--primary-light);
    color: var(--primary-dark);
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.page-link {
    color: var(--primary-color);
}

.page-link:hover {
    color: var(--primary-dark);
    background-color: var(--bg-hover);
}

/* Nav Tabs */
.nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-color: var(--border-color) var(--border-color) var(--bg-primary);
}

.nav-tabs .nav-link:hover {
    border-color: var(--border-hover) var(--border-hover) var(--border-color);
}

/* List Groups */
.list-group-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.list-group-item-action:hover {
    background-color: var(--bg-hover);
}

/* Dropdowns */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-color);
}

/* Progress Bars */
.progress-bar {
    background-color: var(--primary-color);
}

/* Custom Checkboxes and Radios */
.custom-control-input:checked~.custom-control-label::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Tooltips */
.tooltip .tooltip-inner {
    background-color: var(--primary-dark);
}

.tooltip .arrow::before {
    border-top-color: var(--primary-dark);
}

/* Breadcrumb Improvements */
.breadcrumb-container::before {
    background: linear-gradient(to bottom, var(--primary-color), var(--primary-dark));
}

.breadcrumb-link {
    color: var(--primary-color);
}

.breadcrumb-link:hover {
    color: var(--primary-dark);
}

/* Dashboard Cards */
.card-dashboard:hover {
    border-left: 3px solid var(--primary-color);
    transition: all 0.3s ease;
}

.card-dashboard .card-title {
    color: var(--primary-color);
}

/* Charts */
.chart-container canvas {
    border-bottom: 2px solid var(--primary-lighter);
}

/* Hover Effects for Action Buttons */
.btn-action:hover {
    background-color: var(--bg-hover);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Table Row Hover */
.table tbody tr:hover {
    background-color: var(--bg-hover);
}

/* Search Input Focus */
.search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

/* Filter Dropdowns */
.filter-dropdown .dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

/* Status Badges */
.status-badge.badge-success {
    background-color: var(--success-color);
}

.status-badge.badge-warning {
    background-color: var(--warning-color);
}

.status-badge.badge-danger {
    background-color: var(--danger-color);
}

.status-badge.badge-info {
    background-color: var(--info-color);
}

/* Pagination Hover */
.pagination .page-item:not(.active) .page-link:hover {
    background-color: var(--bg-hover);
    color: var(--primary-color);
}

/* Modal Headers */
.modal-header {
    border-bottom: 2px solid var(--primary-lighter);
}

/* Tab Navigation */
.nav-tabs .nav-link:hover:not(.active) {
    color: var(--primary-color);
    background-color: var(--bg-hover);
}

/* Accordion */
.accordion-button:not(.collapsed) {
    background-color: var(--bg-hover);
    color: var(--primary-color);
}

.accordion-button:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

/* Hover effect for cards */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Improved focus styles for accessibility */
:focus {
    outline: 2px solid rgba(var(--primary-rgb), 0.5);
    outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}

/* Heading color override - REMOVED to allow Bootstrap text classes to work */
/* h1.h3,
h1.h3.mb-2 {
    color: rgba(245, 245, 245, 1) !important;
} */

/* ==========================================================================
   Accessibility Improvements (Phase 4)
   ========================================================================== */

/* Task 4.1: Styles :focus-visible (WCAG 2.4.7) */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.2);
    /* Using primary color with opacity */
}

/* Task 4.2: Lien "Aller au contenu" (skip-to-content) */
.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 9999;
    padding: 10px 20px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}