/* ==========================================
   FMC CARD V11
========================================== */

.card{

    background:var(--card);

    border-radius:18px;

    box-shadow:
    0 12px 30px rgba(0,0,0,.08);

    padding:16px;

    margin:0px;

    transition:.25s;

    border:1px solid rgba(0,0,0,.04);

}

.card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 18px 36px rgba(0,0,0,.12);

}

/* ===========================
   TITLE
=========================== */

.card h2{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0 0 14px;

    font-size:20px;

    font-weight:700;

    color:var(--text);

}

.card h3{

    margin:0 0 12px;

    font-size:17px;

    font-weight:700;

    color:var(--text);

}

.card h4{

    margin:10px 0 6px;

    font-size:14px;

    font-weight:600;

    color:var(--text-soft);

}

.card p{

    margin:0;

    font-size:14px;

    color:var(--text-soft);

    line-height:1.6;

}

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

.kpiIcon{

    width:52px;

    height:52px;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:28px;

    box-shadow:
    0 8px 18px rgba(11,143,67,.28);

}

.kpiIcon .material-symbols-rounded{

    font-size:28px;

}

.card b{

    display:block;

    margin-top:4px;

    font-size:24px;

    font-weight:800;

    color:var(--text);

}

/* ===========================
   FARM CARD
=========================== */

.farmCard{

    background:
    linear-gradient(
        135deg,
        #0B8F43,
        #18B85B
    );

    color:#fff;

}

.farmHeader{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:12px;

}

.farmHeader h2{

    color:#fff;

    margin:0;

}

.farmHeader small{

    display:block;

    margin-top:6px;

    color:rgba(255,255,255,.9);

}

.onlineBadge{

    display:flex;

    align-items:center;

    gap:6px;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.15);

    color:#fff;

    font-size:12px;

    font-weight:700;

}

.onlineBadge .material-symbols-rounded{

    font-size:18px;

}

.farmInfo{

    margin-top:18px;

    padding-top:16px;

    border-top:1px solid rgba(255,255,255,.25);

    color:#fff;

    font-size:15px;

}

.farmInfo b{

    display:inline;

    color:#fff;

    font-size:17px;

}

/* ===========================
   HERO
=========================== */

.dashboardHero{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:16px;

    padding:24px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        #087438,
        #18B85B
    );

    color:#fff;

    box-shadow:
    0 18px 36px rgba(11,143,67,.30);

}

.dashboardHero h1{

    margin:8px 0;

    font-size:30px;

    font-weight:800;

}

.heroSmall{

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.85;

}

.heroDate{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:10px;

    font-size:13px;

}

.heroLogo{

    width:74px;

    height:74px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.15);

}

.heroLogo .material-symbols-rounded{

    font-size:42px;

    color:#fff;

}