/* ============================================================
   Portail client ECE — layout & adaptations du Design System
   ECE Groupe (charte FACTUREX backoffice).

   Chargé APRÈS bootstrap.min.css, bootstrap-icons.css,
   variables.css, components.css et utilities.css (copies du
   backoffice). Ce fichier ne contient que :
     - le layout propre au portail (navbar, footer, auth) ;
     - les variantes gradient "canoniques" de la charte
       (page-header, table-modern, KPI hover lift) ;
     - les badges de statut des saisies (classes fonctionnelles
       badge-saisie / badge-recuperee / badge-integree /
       badge-rejetee conservées).
   Aucune dépendance externe (CSP stricte 'self').
   ============================================================ */

/* ------------------------------------------------------------
   1. BASE — typo Inter (fallback système, pas de webfont)
   ------------------------------------------------------------ */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--ece-gray-100);
    color: #2d3748;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main.contenu {
    flex: 1 0 auto;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* ------------------------------------------------------------
   2. NAVBAR ECE — gradient purple (charte ECE Groupe)
   ------------------------------------------------------------ */

/* Dimensions alignées sur la navbar du backoffice (layout.css) :
   hauteur 56px, AUCUN padding vertical, contenu centré par le container. */
.navbar-ece {
    background: linear-gradient(135deg, var(--ece-purple-dark) 0%, var(--ece-purple) 100%);
    box-shadow: 0 2px 10px rgba(28, 19, 60, 0.35);
    min-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-ece .container-fluid {
    min-height: 56px;
    align-items: center;
}

/* Desktop : hauteur verrouillée à 56px comme le backoffice.
   (En mobile la hauteur reste auto : le menu déplié doit pouvoir s'étendre.) */
@media (min-width: 992px) {
    .navbar-ece {
        height: 56px;
    }

    .navbar-ece .container-fluid {
        height: 100%;
    }
}

.navbar-ece .navbar-brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: 0.3px;
}

.navbar-ece .navbar-brand .brand-gold {
    color: var(--ece-gold-light);
}

.navbar-ece .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    border-bottom: 3px solid transparent;
}

.navbar-ece .nav-link:hover,
.navbar-ece .nav-link:focus {
    color: #fff;
}

.navbar-ece .nav-link.active {
    color: #fff;
    font-weight: 700;
    border-bottom-color: var(--ece-gold);
}

/* Nom du dossier affiché dans la navbar — compact pour tenir dans les 56px
   (annule le padding vertical 0.5rem du .navbar-text Bootstrap) */
.navbar-dossier {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    padding-top: 0;
    padding-bottom: 0;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-dossier .navbar-dossier-siren {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ece-gold-light);
    line-height: 1.1;
}

.navbar-ece .navbar-user {
    color: #fff;
}

.navbar-ece .user-name-nav {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.88rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Avatar (repris de la navbar backoffice) */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ece-gold) 0%, var(--ece-gold-light) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ece-purple-dark);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Repli mobile : liens empilés, séparation utilisateur */
@media (max-width: 991.98px) {
    /* Le padding vertical de la barre est à 0 (alignement backoffice) :
       on redonne de l'air au menu déplié uniquement. */
    .navbar-ece .navbar-collapse {
        padding-bottom: 0.75rem;
    }

    .navbar-ece .nav-link.active {
        border-bottom: none;
        border-left: 3px solid var(--ece-gold);
        padding-left: 0.75rem;
    }

    .navbar-dossier {
        max-width: 100%;
        margin: 0.5rem 0 0.25rem;
    }

    .navbar-ece .navbar-user {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: 0.75rem;
        margin-top: 0.5rem;
    }
}

/* ------------------------------------------------------------
   3. PAGE HEADER — gradient purple arrondi (charte canonique)
   (surcharge la variante plate de components.css)
   ------------------------------------------------------------ */

.page-header {
    background: linear-gradient(135deg, var(--ece-purple-dark) 0%, var(--ece-purple) 100%);
    color: white;
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.5rem 2rem;
    margin: 0 0 1.5rem 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(28, 19, 60, 0.3);
}

.page-header .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-header .page-title i {
    color: var(--ece-gold-light);
}

.page-header .page-subtitle {
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
    margin: 0;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .page-header {
        height: auto;
        padding: 1rem 1.25rem;
        margin: 0 0 1.25rem 0;
    }

    .page-header .page-title {
        font-size: 1.15rem;
    }
}

/* ------------------------------------------------------------
   4. KPI CARDS — hover lift (charte canonique)
   ------------------------------------------------------------ */

.kpi-card:hover {
    transform: translateY(-5px);
}

/* ------------------------------------------------------------
   5. TABLES — en-têtes gradient purple (charte canonique)
   ------------------------------------------------------------ */

.table-modern thead th {
    background: linear-gradient(135deg, var(--ece-purple-dark) 0%, var(--ece-purple) 100%);
    color: white;
    border-bottom: none;
}

/* Conteneur de défilement horizontal (mobile) */
.table-defile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-defile > .table {
    min-width: 620px;
    margin-bottom: 0;
}

/* Colonnes numériques : chiffres tabulaires, pas de retour ligne */
.num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   6. BADGES DE STATUT DES SAISIES (classes fonctionnelles)
   SAISIE = neutre · RECUPEREE = purple · INTEGREE = gold ·
   REJETEE = rouge
   ------------------------------------------------------------ */

.badge-saisie {
    background: var(--ece-gray-200);
    color: var(--ece-purple-dark);
    border: 1px solid var(--ece-gray-300);
    font-weight: 600;
}

.badge-recuperee {
    background: linear-gradient(135deg, var(--ece-purple) 0%, var(--ece-purple-light) 100%);
    color: white;
    font-weight: 600;
}

.badge-integree {
    background: linear-gradient(135deg, var(--ece-gold) 0%, var(--ece-gold-light) 100%);
    color: var(--ece-purple-dark);
    font-weight: 600;
}

.badge-rejetee {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    font-weight: 600;
}

/* Badge informatif générique (ex : statut d'exercice) */
.badge-info-ece {
    background: linear-gradient(135deg, var(--ece-purple) 0%, var(--ece-purple-light) 100%);
    color: white;
    font-weight: 600;
}

.motif-rejet {
    display: block;
    font-size: 0.8rem;
    color: #c82333;
    margin-top: 0.2rem;
}

/* ------------------------------------------------------------
   7. FORMULAIRES — erreurs inline sous les champs
   ------------------------------------------------------------ */

.erreur-champ {
    color: #dc3545;
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

/* ------------------------------------------------------------
   8. ÉCRANS D'AUTHENTIFICATION — carte centrée sur fond purple
   (ambiance registration/base_auth.html + login.html backoffice,
   styles inline convertis en classes : CSP style-src 'self')
   ------------------------------------------------------------ */

body.auth-page {
    background: linear-gradient(135deg, var(--ece-purple-dark) 0%, var(--ece-purple) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-container {
    width: 100%;
    max-width: 450px;
    padding: 15px;
}

.auth-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: none;
    border-top: 4px solid var(--ece-gold);
    max-width: 420px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    animation: fadeInUp 0.5s ease-out;
}

.auth-card .auth-card-header {
    background: linear-gradient(135deg, var(--ece-purple-dark) 0%, var(--ece-purple) 100%);
    border-bottom: none;
}

.auth-card .auth-card-footer {
    background: linear-gradient(135deg, var(--ece-purple-dark) 0%, var(--ece-purple) 100%);
    border-top: none;
}

.auth-card .auth-card-footer small {
    color: var(--ece-gold-light);
}

.auth-icon-gold {
    color: var(--ece-gold-light);
}

.auth-label-icon {
    color: var(--ece-gold);
}

.auth-card .form-control {
    border-radius: var(--radius-md);
}

.btn-auth {
    background: linear-gradient(135deg, var(--ece-gold) 0%, var(--ece-gold-light) 100%);
    color: var(--ece-purple-dark);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(182, 165, 77, 0.3);
    transition: all 0.3s ease;
}

.btn-auth:hover {
    background: linear-gradient(135deg, var(--ece-gold-light) 0%, var(--ece-gold) 100%);
    color: var(--ece-purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(182, 165, 77, 0.4);
}

/* Champ code magic link (repris de layout.css backoffice) */
.code-input {
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 2rem;
    letter-spacing: 0.5rem;
    text-align: center;
    padding: 1rem;
}

.code-input::placeholder {
    letter-spacing: 0.3rem;
    font-size: 1.5rem;
}

/* ------------------------------------------------------------
   9. SÉLECTEUR DE DOSSIERS — cartes cliquables
   ------------------------------------------------------------ */

.carte-dossier {
    display: block;
    text-decoration: none;
    color: inherit;
    background: white;
    border: none;
    border-left: 4px solid var(--ece-gold);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    transition: all 0.3s ease;
    height: 100%;
}

.carte-dossier:hover {
    color: inherit;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(28, 19, 60, 0.18);
}

.carte-dossier .dossier-nom {
    display: block;
    font-weight: 700;
    color: var(--ece-purple-dark);
    font-size: 1.05rem;
}

.carte-dossier .dossier-siren {
    display: block;
    color: var(--ece-gray-600);
    font-size: 0.85rem;
}

/* ------------------------------------------------------------
   10. FOOTER — sobre (blanc, filet, texte discret)
   ------------------------------------------------------------ */

.footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 20px 0;
    background-color: #fff;
    border-top: 1px solid #e9ecef;
    color: var(--ece-gray-600);
    font-size: 0.85rem;
    text-align: center;
}