/* ═══════════════════════════════════════════════════════
   HOLIDAY TRACKER — Thème CJIWAN
   Palette partagée avec NDF et Covoiturage Facile
   ═══════════════════════════════════════════════════════ */

:root {
    --cj-primary: #6b9b7f;
    --cj-primary-dark: #5a8570;
    --cj-primary-darker: #4e755f;
    --cj-secondary: #a8d5ba;
    --cj-tertiary: #7fb096;
    --cj-bg: #f5faf7;
    --cj-tint: #f0f9f4;
    --cj-text: #1a2e23;
    --cj-text-muted: #5a6b62;
    --cj-error: #d14343;
    --cj-warning: #d4a017;
    /* Reprise par Bootstrap 5.3, qui est entièrement piloté par variables */
    --bs-primary: #6b9b7f;
    --bs-primary-rgb: 107, 155, 127;
    --bs-body-bg: #f5faf7;
    --bs-body-color: #1a2e23;
    --bs-secondary-color: #5a6b62;
    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --bs-link-color: #5a8570;
    --bs-link-color-rgb: 90, 133, 112;
    --bs-link-hover-color: #4e755f;
}

html, body {
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    background-color: var(--cj-bg);
    color: var(--cj-text);
}

h1, h2, h3, h4 {
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 700;
    color: var(--cj-text);
}

h5, h6 {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--cj-primary-dark);
}

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

/* ─── Boutons ─── */
.btn-primary {
    --bs-btn-bg: #6b9b7f;
    --bs-btn-border-color: #6b9b7f;
    --bs-btn-hover-bg: #5a8570;
    --bs-btn-hover-border-color: #5a8570;
    --bs-btn-active-bg: #4e755f;
    --bs-btn-active-border-color: #4e755f;
    --bs-btn-disabled-bg: #a8c4b3;
    --bs-btn-disabled-border-color: #a8c4b3;
}

.btn-outline-primary {
    --bs-btn-color: #5a8570;
    --bs-btn-border-color: #6b9b7f;
    --bs-btn-hover-bg: #6b9b7f;
    --bs-btn-hover-border-color: #6b9b7f;
    --bs-btn-active-bg: #5a8570;
    --bs-btn-active-border-color: #5a8570;
}

.btn-outline-secondary {
    --bs-btn-color: #5a6b62;
    --bs-btn-border-color: rgba(107, 155, 127, .45);
    --bs-btn-hover-bg: #eef6f2;
    --bs-btn-hover-border-color: #7fb096;
    --bs-btn-hover-color: #1a2e23;
    --bs-btn-active-bg: #e3efe8;
    --bs-btn-active-color: #1a2e23;
    --bs-btn-active-border-color: #7fb096;
}

.btn-secondary {
    --bs-btn-bg: #7fb096;
    --bs-btn-border-color: #7fb096;
    --bs-btn-hover-bg: #6b9b7f;
    --bs-btn-hover-border-color: #6b9b7f;
}

.btn-warning {
    --bs-btn-bg: #d4a017;
    --bs-btn-border-color: #d4a017;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #b98c14;
    --bs-btn-hover-border-color: #b98c14;
    --bs-btn-hover-color: #fff;
}

.btn-danger {
    --bs-btn-bg: #d14343;
    --bs-btn-border-color: #d14343;
    --bs-btn-hover-bg: #b53838;
    --bs-btn-hover-border-color: #b53838;
}

.btn-outline-danger {
    --bs-btn-color: #d14343;
    --bs-btn-border-color: #d14343;
    --bs-btn-hover-bg: #d14343;
    --bs-btn-hover-border-color: #d14343;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(107, 155, 127, .3);
}

/* ─── Formulaires ─── */
.form-control:focus, .form-select:focus {
    border-color: var(--cj-tertiary);
}

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

.form-label {
    font-weight: 500;
    color: var(--cj-text-muted);
}

/* ─── Cartes ─── */
.card {
    border: 1px solid rgba(107, 155, 127, .15);
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(26, 46, 35, .05);
}

.card-header {
    background-color: var(--cj-tint);
    border-bottom: 1px solid rgba(107, 155, 127, .15);
    font-weight: 600;
    border-radius: 1rem 1rem 0 0 !important;
}

/* ─── Tableaux ─── */
.table {
    --bs-table-striped-bg: rgba(107, 155, 127, .05);
    --bs-table-border-color: rgba(107, 155, 127, .15);
}

    .table > thead {
        color: var(--cj-text-muted);
    }

/* ─── Jauge ─── */
.progress {
    --bs-progress-bg: #e3efe8;
    --bs-progress-bar-bg: #6b9b7f;
    border-radius: 999px;
}

/* ─── Alertes ─── */
.alert-success {
    --bs-alert-bg: #e8f2ed;
    --bs-alert-border-color: rgba(107, 155, 127, .35);
    --bs-alert-color: #2f5c45;
}

.alert-info {
    --bs-alert-bg: #eef6f2;
    --bs-alert-border-color: rgba(127, 176, 150, .35);
    --bs-alert-color: #3d6b55;
}

.alert-warning {
    --bs-alert-bg: #fdf4dd;
    --bs-alert-border-color: rgba(212, 160, 23, .35);
    --bs-alert-color: #7d5e0c;
}

.alert-danger {
    --bs-alert-bg: #fbe9e9;
    --bs-alert-border-color: rgba(209, 67, 67, .35);
    --bs-alert-color: #8f2b2b;
}

/* ─── Bandeau en dégradé (tableau de bord) ─── */
.ht-hero {
    background: linear-gradient(135deg, #6b9b7f 0%, #5a8570 100%);
    color: #fff;
    padding: 2rem 2rem 4.5rem 2rem;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

    .ht-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        left: 20%;
        width: 400px;
        height: 400px;
        background: rgba(255, 255, 255, .08);
        border-radius: 50%;
    }

    .ht-hero::after {
        content: '';
        position: absolute;
        bottom: -30%;
        right: 10%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, .06);
        border-radius: 50%;
    }

    .ht-hero h1, .ht-hero .ht-hero-value {
        color: #fff;
        position: relative;
        z-index: 2;
    }

    .ht-hero .ht-hero-sub {
        color: rgba(255, 255, 255, .9);
        position: relative;
        z-index: 2;
    }

/* ─── Cartes en chevauchement ─── */
.ht-overlap {
    margin-top: -56px;
    position: relative;
    z-index: 10;
}

/* ─── Relief au survol ─── */
.ht-card {
    transition: all .3s ease;
}

    .ht-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(107, 155, 127, .18) !important;
    }

/* ─── Animation d'apparition ─── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp .5s ease-out forwards;
    opacity: 0;
}

.fade-in-up-1 {
    animation-delay: .05s;
}

.fade-in-up-2 {
    animation-delay: .10s;
}

.fade-in-up-3 {
    animation-delay: .15s;
}

.fade-in-up-4 {
    animation-delay: .20s;
}

/* ─── Validation Blazor ─── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--cj-error);
}

.validation-message {
    color: var(--cj-error);
}

.content {
    padding-top: 1.1rem;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }