/* ==========================================================
   AXIOM UPDATE CENTER
   Styles généraux
   ========================================================== */

.update-center-card{

    margin:24px 0;

    padding:28px;

    background:#ffffff;

    border:1px solid #e6edf7;

    border-radius:20px;

    box-shadow:0 10px 24px rgba(15,23,42,.05);

}

.update-center-card header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:24px;

}

.update-center-card h3{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#1c2b45;

}

.update-center-card p{

    margin-top:8px;

    color:#6d7d93;

    line-height:1.6;

}


/* ==========================================================
   Navigation
   ========================================================== */

.update-engine-shortcuts{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:26px 0;

}

.update-engine-shortcuts a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 18px;

    border-radius:12px;

    background:#ffffff;

    border:1px solid #dfe6f2;

    text-decoration:none;

    color:#324761;

    font-weight:600;

    transition:.20s;

}

.update-engine-shortcuts a:hover{

    background:#4f63ff;

    border-color:#4f63ff;

    color:#ffffff;

}


/* ==========================================================
   Cartes
   ========================================================== */

.space-card{

    position:relative;

    background:#ffffff;

    border:1px solid #e5ebf5;

    border-radius:18px;

    padding:22px;

    transition:.20s;

    box-shadow:0 8px 20px rgba(15,23,42,.04);

}

.space-card:hover{

    transform:translateY(-2px);

    border-color:#cad8fb;

    box-shadow:0 14px 30px rgba(79,99,255,.10);

}


/* ==========================================================
   Boutons
   ========================================================== */

.button-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border:none;

    border-radius:12px;

    background:linear-gradient(135deg,#5d6bff,#6f45ff);

    color:#ffffff;

    font-weight:700;

    text-decoration:none;

    cursor:pointer;

    transition:.20s;

}

.button-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(79,99,255,.30);

}

.button-danger{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border:none;

    border-radius:12px;

    background:#dc3545;

    color:#ffffff;

    font-weight:700;

    cursor:pointer;

}


/* ==========================================================
   Etat vide
   ========================================================== */

.update-empty{

    padding:36px;

    text-align:center;

    border:2px dashed #dfe7f2;

    border-radius:18px;

    background:#f8fbff;

    color:#6f8097;

}

/* ==========================================================
   DASHBOARD ENTERPRISE
   ========================================================== */

.space-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap:20px;

    margin-top:24px;

}


/* ==========================================================
   KPI
   ========================================================== */

.kpi-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 16px;

    border-radius:16px;

    background:#eef3ff;

    font-size:30px;

    line-height:1;

}

.space-card strong{

    display:block;

    margin-bottom:12px;

    text-align:center;

    font-size:14px;

    font-weight:700;

    color:#6d7d93;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.space-card h2{

    margin:0;

    text-align:center;

    font-size:30px;

    font-weight:700;

    color:#1c2b45;

}

.space-card small{

    display:block;

    margin-top:12px;

    text-align:center;

    color:#8b98ab;

    font-size:13px;

}


/* ==========================================================
   COULEURS KPI
   ========================================================== */

.space-card:nth-child(1) .kpi-icon{

    background:#eef3ff;

}

.space-card:nth-child(2) .kpi-icon{

    background:#eef7ff;

}

.space-card:nth-child(3) .kpi-icon{

    background:#edf9ef;

}

.space-card:nth-child(4) .kpi-icon{

    background:#f3edff;

}

.space-card:nth-child(5) .kpi-icon{

    background:#fff7eb;

}

.space-card:nth-child(6) .kpi-icon{

    background:#eef9ff;

}

.space-card:nth-child(7) .kpi-icon{

    background:#fff1f1;

}

.space-card:nth-child(8) .kpi-icon{

    background:#eef8f3;

}


/* ==========================================================
   RESPONSIVE KPI
   ========================================================== */

@media (max-width:1200px){

    .space-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(220px,1fr)
            );

    }

}

@media (max-width:640px){

    .space-grid{

        grid-template-columns:1fr;

    }

}




/* ==========================================================
   CARTES
   ========================================================== */






/* ==========================================================
   ICONE
   ========================================================== */

.workflow-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:16px;

    border-radius:50%;

    font-size:28px;

    font-weight:700;

}


/* ==========================================================
   ETATS
   ========================================================== */

.workflow-complete .workflow-icon{

    background:#eaf8ef;

    color:#2d9a55;

}

.workflow-active .workflow-icon{

    background:#eef3ff;

    color:#4f63ff;

}

.workflow-pending .workflow-icon{

    background:#f2f4f7;

    color:#9aa7ba;

}


/* ==========================================================
   TEXTE
   ========================================================== */

.workflow-card h4{

    width:100%;

    margin:10px 0 8px;

    text-align:center;

}

.workflow-card p{

    width:100%;

    margin:0 0 18px;

    text-align:center;

}

/* ==========================================================
   ACTION
   ========================================================== */

.workflow-actions{

    margin-top:auto;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}


/* ==========================================================
   FLECHES
   ========================================================== */

.workflow-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:#c2ccda;

    font-weight:700;
    height:100%;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1100px){

    .deployment-workflow{

        display:grid;

        grid-template-columns:1fr;

        gap:20px;

    }

    .workflow-arrow{

        display:none;

    }

}


/* ==========================================================
   JOURNAL DE DEPLOIEMENT
   ========================================================== */

.deployment-history{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-top:24px;

}

.history-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:20px 24px;

    background:#ffffff;

    border:1px solid #e6edf7;

    border-radius:16px;

    transition:.20s;

    box-shadow:
        0 6px 18px rgba(15,23,42,.04);

}

.history-card:hover{

    border-color:#cad8fb;

    box-shadow:
        0 12px 28px rgba(79,99,255,.10);

}

.history-main{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.history-main strong{

    color:#1d2b45;

    font-size:16px;

    font-weight:700;

}

.history-main small{

    color:#8090a5;

    font-size:13px;

}


/* ==========================================================
   BADGES
   ========================================================== */

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:110px;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

}

.status-success{

    background:#eaf8ef;

    color:#2d9a55;

}

.status-warning{

    background:#fff7e4;

    color:#bb7b00;

}

.status-danger{

    background:#fdecec;

    color:#cb3b3b;

}

.status-info{

    background:#edf3ff;

    color:#4d64db;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:900px){

    .history-card{

        flex-direction:column;

        align-items:flex-start;

    }

    .status-badge{

        width:100%;

    }

}

@media (max-width:768px){

    .update-engine-shortcuts{

        flex-direction:column;

    }

    .update-engine-shortcuts a{

        width:100%;

    }

    .update-center-card{

        padding:20px;

    }

}

@media (max-width:480px){

    .update-center-card h3{

        font-size:20px;

    }

    .space-card h2{

        font-size:24px;

    }
}
 
.deployment-workflow{

    display:grid;

    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;

    gap:28px;

    align-items:stretch;

    width:100%;

    margin-top:30px;

}

.workflow-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:40px;

    font-size:28px;

    color:#c5cfdf;

}

/* ==========================================================
   AXIOM ENTERPRISE WORKFLOW FINAL
   ========================================================== */


.workflow-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    flex:1;

    width:100%;

    min-height:190px;

    padding:26px;

    background:#ffffff;

    border:1px solid #dfe7f2;

    border-radius:18px;

    box-shadow:0 8px 20px rgba(15,23,42,.05);

    box-sizing:border-box;

    text-align:center;

    transition:transform .20s, box-shadow .20s;

}


.workflow-card:hover{

    transform:translateY(-3px);

    box-shadow:0 16px 32px rgba(79,99,255,.12);

}


.workflow-arrow{

    display:flex !important;

    justify-content:center;

    align-items:center;

    font-size:30px;

    color:#c6d2e3;

}

.workflow-icon{

    width:54px;

    height:54px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    font-size:24px;

    font-weight:700;
     margin:0 auto 18px auto;

}

.workflow-complete .workflow-icon{

    background:#e8f8ee;

    color:#29a55a;

}

.workflow-active .workflow-icon{

    background:#edf2ff;

    color:#4f63ff;

}

.workflow-pending .workflow-icon{

    background:#f3f5f8;

    color:#97a7ba;

}


}