/*
===========================================
WATERPILOT
dashboard.css
===========================================
*/

/* =========================================
   CARDS STATISTIQUES
========================================= */

.stat-card
{
    background: #ffffff;

    border-radius: 15px;

    padding: 20px;

    box-shadow: 0 2px 12px rgba(0,0,0,0.08);

    transition: all 0.3s ease;
}

.stat-card:hover
{
    transform: translateY(-4px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.stat-card h6
{
    color: #6c757d;

    font-size: 14px;

    margin-bottom: 10px;
}

.stat-card h2
{
    font-size: 32px;

    font-weight: 700;

    color: #0d6efd;
}

/* =========================================
   TOPBAR
========================================= */

.topbar
{
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;
}

.topbar h2
{
    font-weight: 700;

    margin-bottom: 0;
}

.topbar p
{
    margin-bottom: 0;
}

/* =========================================
   TABLEAUX
========================================= */

.dashboard-table
{
    background: white;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.dashboard-table .table
{
    margin-bottom: 0;
}

.dashboard-table th
{
    background: #f8f9fa;

    font-weight: 600;
}

/* =========================================
   FILIERE DE TRAITEMENT
========================================= */

.process-flow
{
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;
}

.process-step
{
    width: 110px;

    height: 110px;

    background: white;

    border-radius: 15px;

    border: 1px solid #e9ecef;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    font-size: 13px;

    font-weight: 600;

    transition: 0.3s;
}

.process-step:hover
{
    transform: scale(1.05);
}

.process-step i
{
    font-size: 28px;

    color: #0d6efd;

    margin-bottom: 8px;
}

.process-arrow
{
    font-size: 24px;

    color: #6c757d;
}

/* =========================================
   PERFORMANCE
========================================= */

.performance-card
{
    text-align: center;

    background: white;

    border-radius: 15px;

    padding: 15px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.performance-card h5
{
    margin-top: 10px;

    font-weight: 600;
}

/* =========================================
   PROJET ACTUEL
========================================= */

.project-summary
{
    background: #013a99;

    color: white;

    border-radius: 15px;

    padding: 20px;
}

.project-summary h5
{
    font-weight: 700;
}

.project-summary p
{
    margin-bottom: 5px;
}

/* =========================================
   BOUTONS DASHBOARD
========================================= */

.btn-dashboard
{
    border-radius: 10px;

    padding: 10px 20px;

    font-weight: 600;
}

/* =========================================
   INDICATEUR CONFORMITE
========================================= */

.indice-global
{
    text-align: center;

    padding: 20px;
}

.indice-global h1
{
    font-size: 48px;

    font-weight: bold;

    color: #198754;
}

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

@media(max-width:992px)
{
    .topbar
    {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }

    .process-flow
    {
        flex-direction: column;
    }

    .process-arrow
    {
        transform: rotate(90deg);
    }
}