/**
 * GPI — Thème espace utilisateur
 * Remplace les bleus Bootstrap / styleapp (#3b82f6, #0d6efd, #4285F4) par l’accent projet.
 */

.gpi-utilisateur-app {
    --gpi-accent: var(--primary, #5BC4BF);
    --gpi-accent-light: var(--primary-light, #7FD9D4);
    --gpi-accent-dark: var(--primary-dark, #4AA39E);
    --gpi-accent-rgb: 91, 196, 191;

    /* Surcharge fichiers legacy (styleapp, cssticket, push…) */
    --info: var(--gpi-accent) !important;
    --primary-400: var(--gpi-accent) !important;
    --primary-500: var(--gpi-accent) !important;
    --accent: var(--gpi-accent) !important;
    --accent-color: var(--gpi-accent) !important;
    --acceuil-primary: var(--gpi-accent) !important;
    --gradient-primary: linear-gradient(135deg, var(--gpi-accent), var(--gpi-accent-dark)) !important;

    /* Bootstrap 5 */
    --bs-primary: var(--gpi-accent);
    --bs-primary-rgb: var(--gpi-accent-rgb);
    --bs-info: var(--gpi-accent);
    --bs-info-rgb: var(--gpi-accent-rgb);
    --bs-link-color: var(--gpi-accent-dark);
    --bs-link-hover-color: var(--gpi-accent);
    --bs-focus-ring-color: rgba(var(--gpi-accent-rgb), 0.25);
}

.gpi-utilisateur-app,
.gpi-utilisateur-app main {
    background-color: var(--bg-color, #f4f7f9) !important;
}

.gpi-utilisateur-app main {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--gpi-accent) 8%, var(--bg-color, #f4f7f9)) 0%,
        var(--bg-color, #f4f7f9) 120px
    ) !important;
}

/* --- Bootstrap : primary / info --- */
.gpi-utilisateur-app .text-primary,
.gpi-utilisateur-app .link-primary {
    color: var(--gpi-accent-dark) !important;
}

.gpi-utilisateur-app .bg-primary,
.gpi-utilisateur-app .btn-primary {
    background-color: var(--gpi-accent) !important;
    border-color: var(--gpi-accent) !important;
    color: #fff !important;
}

.gpi-utilisateur-app .btn-primary:hover,
.gpi-utilisateur-app .btn-primary:focus,
.gpi-utilisateur-app .btn-primary:active {
    background-color: var(--gpi-accent-dark) !important;
    border-color: var(--gpi-accent-dark) !important;
    color: #fff !important;
}

.gpi-utilisateur-app .btn-outline-primary {
    color: var(--gpi-accent-dark) !important;
    border-color: var(--gpi-accent) !important;
}

.gpi-utilisateur-app .btn-outline-primary:hover {
    background-color: var(--gpi-accent) !important;
    border-color: var(--gpi-accent) !important;
    color: #fff !important;
}

.gpi-utilisateur-app .border-primary {
    border-color: var(--gpi-accent) !important;
}

.gpi-utilisateur-app .bg-primary-subtle {
    background-color: rgba(var(--gpi-accent-rgb), 0.14) !important;
}

.gpi-utilisateur-app .text-bg-primary {
    background-color: var(--gpi-accent) !important;
    color: #fff !important;
}

.gpi-utilisateur-app .alert-primary {
    background-color: rgba(var(--gpi-accent-rgb), 0.12) !important;
    border-color: rgba(var(--gpi-accent-rgb), 0.28) !important;
    color: var(--gpi-accent-dark) !important;
}

.gpi-utilisateur-app .badge.bg-primary,
.gpi-utilisateur-app .badge.text-bg-primary {
    background-color: var(--gpi-accent) !important;
}

.gpi-utilisateur-app .spinner-border.text-primary,
.gpi-utilisateur-app .spinner-grow.text-primary {
    color: var(--gpi-accent) !important;
}

.gpi-utilisateur-app .form-check-input:checked {
    background-color: var(--gpi-accent) !important;
    border-color: var(--gpi-accent) !important;
}

.gpi-utilisateur-app .form-control:focus,
.gpi-utilisateur-app .form-select:focus {
    border-color: var(--gpi-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--gpi-accent-rgb), 0.2) !important;
}

.gpi-utilisateur-app .page-link {
    color: var(--gpi-accent-dark);
}

.gpi-utilisateur-app .page-item.active .page-link {
    background-color: var(--gpi-accent) !important;
    border-color: var(--gpi-accent) !important;
}

.gpi-utilisateur-app .custom-livewire-pagination .page-item.active .page-link,
.gpi-utilisateur-app .custom-pagination .page-item.active .page-link {
    background-color: var(--gpi-accent) !important;
    border-color: var(--gpi-accent) !important;
}

.gpi-utilisateur-app .custom-livewire-pagination .page-link:hover,
.gpi-utilisateur-app .custom-pagination .page-link:hover {
    border-color: var(--gpi-accent) !important;
}

/* --- Badges tickets (push.css status-1 bleu → GPI) --- */
.gpi-utilisateur-app .status-1,
.gpi-utilisateur-app .badge-pivot-soft.status-1 {
    background-color: rgba(var(--gpi-accent-rgb), 0.15) !important;
    color: var(--gpi-accent-dark) !important;
}

.gpi-utilisateur-app .status-2,
.gpi-utilisateur-app .badge-pivot-soft.status-2 {
    background-color: #fffbeb !important;
    color: #b45309 !important;
}

.gpi-utilisateur-app .status-4,
.gpi-utilisateur-app .badge-pivot-soft.status-4 {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
}

/* --- Liens & focus bleus génériques --- */
.gpi-utilisateur-app a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--gpi-accent-dark);
}

.gpi-utilisateur-app a:not(.btn):not(.nav-link):hover {
    color: var(--gpi-accent);
}

/* --- cssticket / styleapp : boutons & dégradés bleus --- */
.gpi-utilisateur-app .btn-modern,
.gpi-utilisateur-app .btn-modern:hover {
    background: linear-gradient(135deg, var(--gpi-accent), var(--gpi-accent-dark)) !important;
    box-shadow: 0 4px 12px rgba(var(--gpi-accent-rgb), 0.25) !important;
}

.gpi-utilisateur-app .compact-mode .table tbody tr:hover {
    border-left-color: var(--gpi-accent) !important;
}

/* --- Mode sombre --- */
[data-bs-theme="dark"] .gpi-utilisateur-app,
[data-theme="dark"] .gpi-utilisateur-app {
    --bs-link-color: var(--gpi-accent-light);
    --bs-link-hover-color: var(--gpi-accent);
}

[data-bs-theme="dark"] .gpi-utilisateur-app .text-primary,
[data-theme="dark"] .gpi-utilisateur-app .text-primary {
    color: var(--gpi-accent-light) !important;
}

[data-bs-theme="dark"] .gpi-utilisateur-app .bg-primary-subtle,
[data-theme="dark"] .gpi-utilisateur-app .bg-primary-subtle {
    background-color: rgba(var(--gpi-accent-rgb), 0.2) !important;
}

[data-bs-theme="dark"] .gpi-utilisateur-app .status-1,
[data-theme="dark"] .gpi-utilisateur-app .badge-pivot-soft.status-1 {
    background-color: rgba(var(--gpi-accent-rgb), 0.22) !important;
    color: var(--gpi-accent-light) !important;
}

[data-bs-theme="dark"] .gpi-utilisateur-app main,
[data-theme="dark"] .gpi-utilisateur-app main {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--gpi-accent) 10%, var(--bg-color, #0f172a)) 0%,
        var(--bg-color, #0f172a) 140px
    ) !important;
}