/* =========================================================
   DesaDigital Pro - Infografis Desa UI Premium Part 3
   Fokus: tampilan mobile rapi, modern, dan tetap satu tema hijau desa
========================================================= */
:root{
    --info-green:#138a24;
    --info-green-2:#00b83f;
    --info-green-soft:#eaffef;
    --info-lime:#7ee34d;
    --info-dark:#10251a;
    --info-text:#1f2937;
    --info-muted:#64748b;
    --info-line:#e5eaf0;
    --info-bg:#f4f7f5;
    --info-card:#ffffff;
    --info-danger:#e23f3f;
    --info-shadow:0 18px 45px rgba(15,23,42,.08);
    --info-shadow-soft:0 10px 24px rgba(15,23,42,.06);
}

.infografis-page{
    min-height:78vh;
    background:
        radial-gradient(circle at top left, rgba(126,227,77,.20), transparent 34%),
        linear-gradient(180deg,#f8fbf7 0%,#f3f7f4 48%,#f8fafc 100%);
    padding:0 0 76px;
    overflow:hidden;
}

.infografis-wrap{
    width:min(1220px,100%);
    margin:0 auto;
    padding:0 18px;
}

/* HERO */
.infografis-hero{
    position:relative;
    margin:24px auto 22px;
    border-radius:32px;
    overflow:hidden;
    background:
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.24), transparent 24%),
        radial-gradient(circle at 10% 82%, rgba(126,227,77,.28), transparent 26%),
        linear-gradient(135deg,#006d1d 0%,#07872a 42%,#00ad38 100%);
    box-shadow:0 24px 60px rgba(0,108,30,.22);
    color:#fff;
}
.infografis-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
    background-size:34px 34px;
    opacity:.35;
}
.infografis-hero-inner{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:26px;
    align-items:center;
    padding:34px;
}
.infografis-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.28);
    color:#fff;
    font-size:13px;
    font-weight:850;
    backdrop-filter:blur(10px);
}
.infografis-badge i{font-size:16px;}
.infografis-hero h1{
    margin:16px 0 12px;
    font-size:clamp(32px,5vw,64px);
    line-height:1.02;
    letter-spacing:-1.4px;
    font-weight:1000;
    text-transform:uppercase;
    color:#fff;
    text-shadow:0 7px 26px rgba(0,0,0,.18);
}
.infografis-hero p{
    max-width:720px;
    margin:0;
    color:rgba(255,255,255,.90);
    font-size:clamp(15px,2vw,19px);
    line-height:1.65;
    font-weight:650;
}
.infografis-hero-year{
    margin-top:20px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    color:#11351d;
    background:#fff;
    border-radius:16px;
    padding:11px 15px;
    box-shadow:0 14px 30px rgba(0,0,0,.12);
}
.infografis-hero-year i{color:var(--info-green);}

.infografis-hero-stat-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.infografis-hero-stat{
    position:relative;
    min-height:132px;
    border-radius:24px;
    padding:20px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.24);
    backdrop-filter:blur(14px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.infografis-hero-stat i{
    display:inline-flex;
    width:42px;
    height:42px;
    border-radius:15px;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.18);
    font-size:22px;
    margin-bottom:14px;
}
.infografis-hero-stat span{
    display:block;
    font-size:clamp(24px,3.5vw,35px);
    line-height:1;
    font-weight:1000;
    letter-spacing:-.5px;
}
.infografis-hero-stat small{
    display:block;
    margin-top:7px;
    color:rgba(255,255,255,.86);
    font-weight:800;
}
.infografis-hero-stat.wide{grid-column:1 / -1;min-height:108px;}

/* MAIN CARD */
.infografis-main-card{
    background:rgba(255,255,255,.90);
    border:1px solid rgba(226,232,240,.95);
    border-radius:30px;
    box-shadow:var(--info-shadow);
    overflow:hidden;
    backdrop-filter:blur(12px);
}
.infografis-toolbar{
    display:grid;
    grid-template-columns:1fr 210px;
    gap:16px;
    align-items:center;
    padding:18px;
    border-bottom:1px solid var(--info-line);
    background:linear-gradient(180deg,#fff,#fbfdfb);
}
.infografis-tabs{
    display:flex;
    gap:10px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:2px 2px 8px;
}
.infografis-tabs::-webkit-scrollbar{display:none;}
.infografis-tab{
    flex:0 0 auto;
    min-width:112px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:86px;
    padding:14px 16px;
    border-radius:22px;
    color:#5d6875;
    text-decoration:none;
    font-weight:900;
    border:1px solid transparent;
    background:#f8fafc;
    transition:.22s ease;
}
.infografis-tab i{
    font-size:28px;
    line-height:1;
    color:#64748b;
    transition:.22s ease;
}
.infografis-tab span{font-size:13px;}
.infografis-tab:hover{
    transform:translateY(-2px);
    color:var(--info-green);
    border-color:rgba(19,138,36,.20);
    background:var(--info-green-soft);
}
.infografis-tab.active{
    color:#fff;
    border-color:rgba(255,255,255,.35);
    background:linear-gradient(135deg,var(--info-green),var(--info-green-2));
    box-shadow:0 14px 28px rgba(19,138,36,.24);
}
.infografis-tab.active i{color:#fff;}

.infografis-year-filter{margin:0;}
.infografis-year-filter .form-select{
    min-height:56px;
    border-radius:18px;
    border:1px solid #dbe4dd;
    box-shadow:none;
    color:var(--info-dark);
    background-color:#fff;
    font-size:17px;
    font-weight:950;
    padding-left:16px;
}
.infografis-content{padding:22px;}

/* Cards */
.infografis-money-card,
.infografis-box,
.infografis-surplus{
    background:var(--info-card);
    border:1px solid var(--info-line);
    border-radius:24px;
    box-shadow:var(--info-shadow-soft);
}
.infografis-money-card{
    position:relative;
    min-height:132px;
    padding:22px;
    overflow:hidden;
}
.infografis-money-card::after{
    content:"";
    position:absolute;
    right:-32px;
    top:-42px;
    width:112px;
    height:112px;
    border-radius:50%;
    background:rgba(19,138,36,.09);
}
.infografis-money-card.expense::after{background:rgba(226,63,63,.10);}
.card-label{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:9px;
    color:#667085;
    font-weight:950;
    font-size:15px;
    margin-bottom:12px;
}
.card-label i{
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    color:#fff;
    background:linear-gradient(135deg,var(--info-green),var(--info-green-2));
}
.expense .card-label i,
.expense-text i,
.card-label.expense-text i{background:linear-gradient(135deg,#ef4444,#f97373);}
.card-value{
    position:relative;
    z-index:1;
    color:var(--info-green);
    font-size:clamp(25px,3vw,34px);
    font-weight:1000;
    line-height:1.13;
    letter-spacing:-.7px;
    word-break:break-word;
}
.small-value{font-size:clamp(23px,2.6vw,30px);}
.infografis-money-card.expense .card-value,
.expense-text{color:var(--info-danger)!important;}
.income-text{color:var(--info-green)!important;}
.infografis-money-card.neutral .card-value{color:var(--info-green);}
.infografis-money-card small{font-weight:850;color:#64748b;}

.infografis-box{overflow:hidden;}
.infografis-box-title{
    display:flex;
    align-items:center;
    gap:10px;
    color:#334155;
    font-weight:1000;
    font-size:17px;
    padding:18px 20px;
    border-bottom:1px solid var(--info-line);
    background:linear-gradient(180deg,#fff,#fbfdfb);
}
.infografis-box-title::before{
    content:"";
    width:10px;
    height:26px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--info-green),var(--info-lime));
}
.infografis-financing-cell{padding:20px 22px;}
.border-left-desktop{border-left:1px solid var(--info-line);}
.infografis-surplus{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:92px;
    padding:22px;
    text-align:center;
    color:#475569;
    font-size:18px;
    font-weight:950;
    background:linear-gradient(135deg,#ffffff,#f5fff6);
}
.infografis-surplus strong{
    font-size:clamp(26px,3.2vw,36px);
    color:#334155;
    font-weight:1000;
}
.infografis-section-title{
    color:var(--info-green);
    font-weight:1000;
    font-size:clamp(23px,3vw,38px);
    letter-spacing:-.8px;
}
.infografis-chart-wrap{padding:8px 14px 18px;}
.infografis-box canvas{padding:8px 6px 10px;}

.infografis-list-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:15px 20px;
    border-bottom:1px solid #edf2f7;
}
.infografis-list-row:last-child{border-bottom:0;}
.infografis-list-row span{color:#475569;font-weight:800;line-height:1.35;}
.infografis-list-row strong{color:#111827;font-weight:1000;text-align:right;white-space:nowrap;}
.infografis-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:9px;
    padding:42px 18px;
    color:#64748b;
}
.infografis-empty i{
    width:74px;
    height:74px;
    border-radius:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    color:var(--info-green);
    background:var(--info-green-soft);
}
.infografis-empty strong{font-size:18px;color:#334155;}
.infografis-doc{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius:18px;
    border:1px solid #edf0f3;
    color:#334155;
    background:#fff;
    text-decoration:none;
    font-weight:850;
}
.infografis-doc:hover{color:var(--info-green);border-color:rgba(19,138,36,.35);background:var(--info-green-soft);}
.infografis-doc i{font-size:25px;color:#ef4444;}

.infografis-metric-card{
    min-height:148px;
    padding:24px;
    border-radius:24px;
    border:1px solid rgba(15,23,42,.08);
    background:linear-gradient(180deg,#ffffff,#f9fff9);
    box-shadow:var(--info-shadow-soft);
}
.infografis-metric-card .metric-label{
    color:#64748b;
    font-weight:950;
    margin-bottom:10px;
}
.infografis-metric-card .metric-value{
    color:var(--info-green);
    font-size:clamp(30px,5vw,48px);
    line-height:1;
    font-weight:1000;
    letter-spacing:-1px;
}
.infografis-metric-card .metric-value small{
    font-size:15px;
    color:#64748b;
    margin-left:4px;
}
.infografis-metric-card .metric-desc{
    margin-top:12px;
    color:#64748b;
    font-size:.93rem;
    line-height:1.55;
}

.infografis-note{
    padding:14px 16px;
    border-radius:18px;
    background:#f8fafc;
    color:#64748b;
    font-weight:750;
}

@media (max-width:991px){
    .infografis-wrap{padding:0 12px;}
    .infografis-hero{margin:14px auto 14px;border-radius:24px;}
    .infografis-hero-inner{grid-template-columns:1fr;padding:24px 18px;gap:18px;}
    .infografis-hero-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
    .infografis-hero-stat,
    .infografis-hero-stat.wide{grid-column:auto;min-height:112px;padding:14px;}
    .infografis-hero-stat i{width:35px;height:35px;border-radius:13px;font-size:18px;margin-bottom:11px;}
    .infografis-toolbar{grid-template-columns:1fr;padding:14px;gap:10px;}
    .infografis-year-filter .form-select{min-height:52px;}
    .infografis-content{padding:14px;}
    .border-left-desktop{border-left:0;border-top:1px solid var(--info-line);}
    .infografis-surplus{flex-direction:column;gap:5px;}
}

@media (max-width:575px){
    .infografis-page{padding-bottom:52px;}
    .infografis-wrap{padding:0 10px;}
    .infografis-hero{border-radius:22px;}
    .infografis-hero-inner{padding:22px 16px;}
    .infografis-badge{font-size:12px;padding:8px 12px;}
    .infografis-hero h1{font-size:31px;letter-spacing:-.8px;margin:14px 0 10px;}
    .infografis-hero p{font-size:14px;line-height:1.55;}
    .infografis-hero-year{margin-top:16px;width:100%;justify-content:center;border-radius:15px;}
    .infografis-hero-stat-grid{grid-template-columns:1fr 1fr;}
    .infografis-hero-stat{min-height:104px;border-radius:20px;}
    .infografis-hero-stat.wide{grid-column:1 / -1;}
    .infografis-hero-stat span{font-size:24px;}
    .infografis-main-card{border-radius:22px;}
    .infografis-toolbar{padding:12px;}
    .infografis-tab{min-width:94px;min-height:78px;border-radius:18px;padding:12px 13px;}
    .infografis-tab i{font-size:24px;}
    .infografis-tab span{font-size:12px;}
    .infografis-content{padding:12px;}
    .infografis-money-card{min-height:116px;padding:18px;border-radius:20px;}
    .card-label{font-size:14px;}
    .card-value{font-size:25px;}
    .infografis-box,
    .infografis-surplus,
    .infografis-metric-card{border-radius:20px;}
    .infografis-box-title{font-size:15px;padding:16px;}
    .infografis-list-row{padding:14px 16px;align-items:flex-start;}
    .infografis-list-row{flex-direction:column;gap:5px;}
    .infografis-list-row strong{text-align:left;white-space:normal;}
}