/* =========================
   DASHBOARD GRID
========================= */

.dashboard-grid{

    display:grid;

    grid-template-columns:
    repeat(5,1fr);

    gap:24px;

    margin-bottom:35px;

}

/* =========================
   DASHBOARD CARD
========================= */

.dashboard-card{
    backdrop-filter: blur(18px);

box-shadow:
0 10px 30px rgba(93,169,255,0.08);

    position:relative;

    overflow:hidden;

    min-height:170px;

    padding:28px;

    border-radius:28px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    background:
    rgba(255,255,255,0.72);

    border:
    1px solid rgba(255,255,255,0.8);

    backdrop-filter:blur(18px);

    transition:0.25s ease;

    box-shadow:
    0 10px 30px rgba(93,169,255,0.10);

}

.dashboard-card::before{

    content:'';

    position:absolute;

    top:-90px;
    right:-90px;

    width:200px;
    height:200px;

    background:
    radial-gradient(
        rgba(93,169,255,0.14),
        transparent 70%
    );

}

/* HOVER */

.dashboard-card:hover{

    transform:
    translateY(-6px);

    scale:1.015;

    border-color:
    rgba(93,169,255,0.25);

    box-shadow:
    0 18px 40px rgba(93,169,255,0.18);

}

/* =========================
   DASHBOARD TOP
========================= */

.dashboard-top{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:20px;

}

/* =========================
   ICONS
========================= */

.card-icon{

    width:60px;
    height:60px;

    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;

    color:white;

    box-shadow:
    0 8px 20px rgba(93,169,255,0.20);

}

/* COLORS */

.icon-blue{

    background:
    linear-gradient(
        135deg,
        #5da9ff,
        #3b82f6
    );

}

.icon-purple{

    background:
    linear-gradient(
        135deg,
        #8b5cf6,
        #7c3aed
    );

}

.icon-yellow{

    background:
    linear-gradient(
        135deg,
        #f59e0b,
        #d97706
    );

}

.icon-green{

    background:
    linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

}

.icon-red{

    background:
    linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );

}

/* =========================
   TITLES
========================= */

.dashboard-card h3{

    margin:0;

    font-size:15px;

    font-weight:600;

    color:#475569;

}

.dashboard-card h1{

    margin:0;

    font-size:58px;

    font-weight:800;

    line-height:1;

    color:#0f172a;

    letter-spacing:-2px;

}

.dashboard-card p{

    margin-top:14px;

    font-size:14px;

    color:#64748b;

}

/* =========================
   GRAFICO
========================= */

.grafico-card{

    background:
    rgba(255,255,255,0.72);

    border:
    1px solid rgba(255,255,255,0.8);

    border-radius:32px;

    padding:34px;

    backdrop-filter:blur(20px);

    box-shadow:
    0 10px 35px rgba(93,169,255,0.10);

}

/* HEADER */

.grafico-header{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:30px;

}

.grafico-header h2{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#0f172a;

}

/* SELECT */

.grafico-select{

    height:50px;

    padding:0 18px;

    border-radius:16px;

    background:
    rgba(255,255,255,0.72);

    border:
    1px solid rgba(15,23,42,0.08);

    color:#0f172a;

    font-size:14px;

    outline:none;

    transition:0.25s ease;

}

.grafico-select:focus{

    border-color:
    rgba(93,169,255,0.35);

    box-shadow:
    0 0 20px rgba(93,169,255,0.12);

}

/* =========================
   GRAFICO HEIGHT
========================= */

#graficoProducao{

    height:240px !important;

}

/* =========================
   SEM DADOS
========================= */

.sem-dados{

    height:220px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#64748b;

    font-size:18px;

}

/* =========================
   TABLES
========================= */

.table-card{

    margin-top:35px;

    padding:30px;

    border-radius:30px;

    background:
    rgba(255,255,255,0.72);

    border:
    1px solid rgba(255,255,255,0.8);

    backdrop-filter:blur(18px);

    box-shadow:
    0 10px 35px rgba(93,169,255,0.10);

}

/* HEADER */

.table-header{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:25px;

}

.table-header h2{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#0f172a;

}

/* BUTTON */

.table-header button{

    height:50px;

    padding:0 22px;

    border:none;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        #5da9ff,
        #3b82f6
    );

    color:white;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:0.25s ease;

    box-shadow:
    0 10px 25px rgba(93,169,255,0.18);

}

.table-header button:hover{

    transform:
    translateY(-2px);

    box-shadow:
    0 18px 35px rgba(93,169,255,0.20);

}

/* TABLE */

table{

    width:100%;

    border-collapse:collapse;

}

th{

    text-align:left;

    color:#64748b;

    font-size:13px;

    font-weight:600;

    padding:18px;

}

td{

    padding:20px 18px;

    font-size:14px;

    color:#0f172a;

}

/* ROW */

tbody tr{

    border-top:
    1px solid rgba(15,23,42,0.05);

    transition:0.2s ease;

}

tbody tr:hover{

    background:
    rgba(255,255,255,0.45);

}

/* =========================
   STATUS
========================= */

.status{

    padding:10px 16px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:0.5px;

}

.andamento{

    background:
    rgba(93,169,255,0.14);

    color:#2563eb;

}

.concluido{

    background:
    rgba(34,197,94,0.14);

    color:#16a34a;

}

.pendente{

    background:
    rgba(239,68,68,0.14);

    color:#dc2626;

}

/* =========================
   RESPONSIVO
========================= */

@media(max-width:1500px){

    .dashboard-grid{

        grid-template-columns:
        repeat(3,1fr);

    }

}

@media(max-width:900px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

}