/* SPMI UI V4 - stronger, clearer, asesor-friendly */
.spmi-header-panel{display:flex !important;justify-content:space-between !important;align-items:flex-start !important;gap:24px !important;margin:0 0 14px !important;padding:18px 22px !important;background:linear-gradient(135deg,#ffffff 0%,#f7fbff 100%) !important;border:1px solid #d6e5f1 !important;border-radius:14px !important;box-shadow:0 8px 24px rgba(24,39,75,.06) !important;}
.spmi-header-main{flex:1 1 auto !important;min-width:0 !important;}
.spmi-header-kicker{font-size:12px !important;font-weight:800 !important;letter-spacing:1.2px !important;text-transform:uppercase !important;color:#10afc8 !important;margin-bottom:10px !important;}
.spmi-header-main h1{margin:0 !important;color:#34495e !important;font-size:34px !important;line-height:1.15 !important;font-weight:700 !important;}
.spmi-header-main p{margin:10px 0 0 !important;color:#68788c !important;font-size:15px !important;line-height:1.55 !important;}
.spmi-header-side{flex:0 0 auto !important;}
.spmi-page-badge{display:inline-flex !important;align-items:center !important;gap:8px !important;padding:12px 18px !important;border-radius:999px !important;background:linear-gradient(180deg,#e9f6ff 0%,#f7fbff 100%) !important;border:1px solid #c9def3 !important;color:#2f83be !important;font-size:14px !important;font-weight:800 !important;box-shadow:0 8px 18px rgba(49,136,193,.12) !important;}
.spmi-breadcrumb.breadcrumb{margin:0 0 18px !important;background:transparent !important;padding:0 !important;}
.spmi-breadcrumb.breadcrumb>li,.spmi-breadcrumb.breadcrumb>li a,.spmi-breadcrumb.breadcrumb>li span{font-size:14px !important;}

.spmi-hero{background:linear-gradient(135deg,#ffffff 0%,#fcfeff 65%,#eef9ff 100%) !important;border:1px solid #dbe8f2 !important;border-radius:16px !important;padding:22px 24px !important;margin-bottom:20px !important;box-shadow:0 10px 24px rgba(24,39,75,.05) !important;position:relative !important;overflow:hidden !important;}
.spmi-hero:before{content:"" !important;position:absolute !important;top:-80px !important;right:-80px !important;width:260px !important;height:260px !important;border-radius:50% !important;background:radial-gradient(circle, rgba(20,175,200,.12) 0%, rgba(20,175,200,0) 72%) !important;}
.spmi-hero-grid{display:flex !important;justify-content:space-between !important;align-items:flex-start !important;gap:28px !important;position:relative !important;z-index:2 !important;}
.spmi-hero-copy{flex:1 1 auto !important;}
.spmi-hero-side{width:250px !important;max-width:100% !important;}
.spmi-eyebrow{color:#10afc8 !important;font-size:13px !important;letter-spacing:1.3px !important;text-transform:uppercase !important;font-weight:800 !important;margin-bottom:8px !important;}
.spmi-hero h2{color:#34495e !important;font-weight:700 !important;font-size:32px !important;line-height:1.15 !important;margin:0 0 10px !important;}
.spmi-hero p{color:#6c7d90 !important;font-size:15px !important;line-height:1.6 !important;margin:0 !important;max-width:950px !important;}
.spmi-hero-chip{display:inline-flex !important;align-items:center !important;gap:10px !important;padding:13px 16px !important;border-radius:16px !important;background:#fff !important;border:1px solid #d5e8f7 !important;color:#2f83be !important;font-size:14px !important;font-weight:800 !important;box-shadow:0 8px 18px rgba(49,136,193,.10) !important;}
.spmi-hero-mini{margin-top:12px !important;color:#8493a4 !important;font-size:14px !important;line-height:1.6 !important;}

.spmi-cycle-strip{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:16px !important;margin:0 0 22px !important;}
.spmi-cycle-card{display:block !important;background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;border:1px solid #d8e4ef !important;border-radius:16px !important;padding:16px !important;min-height:164px !important;color:#607083 !important;box-shadow:0 10px 20px rgba(24,39,75,.05) !important;position:relative !important;overflow:hidden !important;transition:.18s ease !important;}
.spmi-cycle-card:hover{text-decoration:none !important;border-color:#b7dceb !important;transform:translateY(-2px) !important;box-shadow:0 14px 28px rgba(24,39,75,.08) !important;}
.spmi-cycle-card.active{border-top:5px solid #15b7ca !important;background:linear-gradient(180deg,#ffffff 0%,#f3fcff 100%) !important;}
.spmi-cycle-card:before{content:"" !important;position:absolute !important;right:-35px !important;bottom:-35px !important;width:120px !important;height:120px !important;border-radius:50% !important;background:radial-gradient(circle, rgba(21,183,202,.08) 0%, rgba(21,183,202,0) 72%) !important;}
.spmi-cycle-card:not(:last-child):after{content:"›" !important;position:absolute !important;right:-12px !important;top:82px !important;color:#b9c5d2 !important;font-size:26px !important;z-index:2 !important;}
.spmi-cycle-top{display:flex !important;justify-content:space-between !important;align-items:center !important;margin-bottom:16px !important;position:relative !important;z-index:2 !important;}
.spmi-cycle-number{color:#8f9db0 !important;font-size:12px !important;font-weight:800 !important;letter-spacing:1px !important;}
.spmi-cycle-icon{width:42px !important;height:42px !important;border-radius:16px !important;background:linear-gradient(135deg,#eff9ff,#ffffff) !important;border:1px solid #d8ebf7 !important;color:#12afc7 !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:18px !important;box-shadow:0 8px 16px rgba(18,175,199,.10) !important;}
.spmi-cycle-title{color:#3f566d !important;font-size:22px !important;font-weight:700 !important;line-height:1.2 !important;position:relative !important;z-index:2 !important;}
.spmi-cycle-note{color:#78889a !important;font-size:13px !important;line-height:1.5 !important;margin:10px 0 14px !important;min-height:54px !important;position:relative !important;z-index:2 !important;}
.spmi-cycle-evidence{color:#2f83be !important;font-size:12px !important;font-weight:800 !important;position:relative !important;z-index:2 !important;}

.spmi-kpi-row{margin-top:4px !important;}
.spmi-kpi-card{display:block !important;position:relative !important;min-height:158px !important;padding:18px 18px 16px !important;border-radius:16px !important;margin-bottom:18px !important;border:1px solid #d9e4ee !important;background:#fff !important;box-shadow:0 12px 24px rgba(24,39,75,.05) !important;overflow:hidden !important;}
.spmi-kpi-card:before{content:"" !important;position:absolute !important;left:0 !important;top:0 !important;width:100% !important;height:6px !important;background:linear-gradient(90deg,#12afc7,#4e9fe0) !important;}
.spmi-kpi-card.theme-1{background:linear-gradient(180deg,#ffffff 0%,#f5fcff 100%) !important;}
.spmi-kpi-card.theme-2{background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%) !important;}
.spmi-kpi-card.theme-3{background:linear-gradient(180deg,#ffffff 0%,#f4fffc 100%) !important;}
.spmi-kpi-card.theme-4{background:linear-gradient(180deg,#ffffff 0%,#f8f7ff 100%) !important;}
.spmi-kpi-top{display:flex !important;align-items:center !important;gap:14px !important;margin-bottom:16px !important;}
.spmi-kpi-icon{width:46px !important;height:46px !important;flex:0 0 46px !important;border-radius:18px !important;background:#fff !important;border:1px solid #d8ebf7 !important;color:#16afc7 !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:20px !important;box-shadow:0 8px 18px rgba(24,184,204,.11) !important;}
.spmi-kpi-label{font-size:13px !important;font-weight:800 !important;color:#66778b !important;text-transform:uppercase !important;line-height:1.45 !important;}
.spmi-kpi-value{font-size:34px !important;font-weight:800 !important;color:#26384a !important;line-height:1.08 !important;margin:2px 0 8px !important;}
.spmi-kpi-note{font-size:13px !important;color:#7e8e9f !important;line-height:1.55 !important;}

.spmi-portlet{margin-top:20px !important;border-radius:16px !important;overflow:hidden !important;box-shadow:0 12px 24px rgba(24,39,75,.04) !important;border:1px solid #dce6ef !important;}
.spmi-portlet .portlet-title{padding:16px 20px 14px !important;border-bottom:1px solid #e8edf2 !important;min-height:auto !important;display:flex !important;justify-content:space-between !important;align-items:center !important;}
.spmi-portlet .portlet-title .caption{display:flex !important;align-items:center !important;gap:12px !important;float:none !important;}
.spmi-portlet .portlet-title .caption i{font-size:18px !important;color:#16afc7 !important;float:none !important;margin:0 !important;}
.spmi-portlet .portlet-title .caption .caption-subject{font-size:20px !important;font-weight:800 !important;color:#16afc7 !important;line-height:1.2 !important;text-transform:none !important;}
.spmi-portlet .portlet-body{padding:20px !important;background:#fff !important;}
.spmi-portlet .actions .btn{border-radius:999px !important;padding:10px 14px !important;font-size:13px !important;}

.spmi-group-block{margin-bottom:28px !important;}
.spmi-group-heading{font-size:14px !important;color:#7b8b9d !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.7px !important;margin:0 0 14px 4px !important;}
.spmi-topic-card{display:flex !important;align-items:center !important;gap:16px !important;min-height:108px !important;padding:15px !important;margin-bottom:16px !important;background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;border:1px solid #dbe6ef !important;border-radius:16px !important;color:#59697c !important;box-shadow:0 10px 18px rgba(24,39,75,.04) !important;transition:.18s ease !important;}
.spmi-topic-card:hover{text-decoration:none !important;color:#4387b5 !important;border-color:#c5e2ef !important;box-shadow:0 14px 26px rgba(24,39,75,.07) !important;transform:translateY(-2px) !important;}
.spmi-topic-icon{width:50px !important;height:50px !important;flex:0 0 50px !important;border-radius:18px !important;background:linear-gradient(135deg,#edfaff,#ffffff) !important;border:1px solid #d7ebf5 !important;color:#16afc7 !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:20px !important;box-shadow:0 8px 18px rgba(24,184,204,.12) !important;}
.spmi-topic-text{flex:1 1 auto !important;min-width:0 !important;}
.spmi-topic-text h4{font-size:15px !important;font-weight:700 !important;line-height:1.25 !important;margin:0 0 7px !important;color:#3d5369 !important;}
.spmi-topic-text p{margin:0 !important;font-size:13px !important;color:#8392a3 !important;line-height:1.55 !important;}
.spmi-topic-arrow{font-size:20px !important;color:#9fb1c0 !important;}

.spmi-chain{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:16px !important;}
.spmi-chain-step{position:relative !important;min-height:180px !important;padding:16px !important;border-radius:16px !important;background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;border:1px solid #dbe6ef !important;box-shadow:0 10px 20px rgba(24,39,75,.04) !important;overflow:hidden !important;}
.spmi-chain-step:before{content:"" !important;position:absolute !important;right:-30px !important;bottom:-30px !important;width:100px !important;height:100px !important;border-radius:50% !important;background:radial-gradient(circle, rgba(21,183,202,.07) 0%, rgba(21,183,202,0) 72%) !important;}
.spmi-chain-step:not(:last-child):after{content:"›" !important;position:absolute !important;right:-12px !important;top:90px !important;color:#b9c5d2 !important;font-size:24px !important;z-index:2 !important;}
.spmi-chain-stepno{font-size:12px !important;font-weight:800 !important;letter-spacing:1px !important;color:#8fa0b1 !important;margin-bottom:12px !important;}
.spmi-chain-head{display:flex !important;gap:10px !important;align-items:center !important;color:#506479 !important;font-size:15px !important;font-weight:700 !important;position:relative !important;z-index:2 !important;}
.spmi-chain-dot{width:10px !important;height:10px !important;border-radius:50% !important;background:#bdc7d1 !important;display:inline-block !important;}
.spmi-chain-step.available .spmi-chain-dot{background:#33ab70 !important;}
.spmi-chain-step.partial .spmi-chain-dot{background:#ea9a27 !important;}
.spmi-chain-step.waiting .spmi-chain-dot{background:#bdc7d1 !important;}
.spmi-chain-step p{min-height:76px !important;margin:16px 0 18px !important;color:#8091a3 !important;font-size:13px !important;line-height:1.55 !important;position:relative !important;z-index:2 !important;}
.spmi-chain-step a{color:#2f83be !important;font-size:12px !important;font-weight:800 !important;position:relative !important;z-index:2 !important;}
.spmi-chain-step a:hover{text-decoration:none !important;}

.spmi-dashboard-card{min-height:178px !important;border:1px solid #dbe6ef !important;padding:20px 18px 18px !important;margin-bottom:18px !important;border-radius:16px !important;background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;position:relative !important;box-shadow:0 10px 18px rgba(24,39,75,.04) !important;}
.spmi-dashboard-card .spmi-source{display:inline-block !important;background:#eef8ff !important;color:#3488bf !important;font-size:11px !important;font-weight:800 !important;text-transform:uppercase !important;padding:6px 10px !important;border-radius:11px !important;letter-spacing:.4px !important;}
.spmi-dashboard-card h4{margin:15px 0 9px !important;color:#43576d !important;font-size:20px !important;font-weight:700 !important;line-height:1.25 !important;}
.spmi-dashboard-card p{font-size:13px !important;color:#8694a5 !important;line-height:1.65 !important;margin-bottom:30px !important;}
.spmi-dashboard-card a{position:absolute !important;left:18px !important;bottom:18px !important;font-size:12px !important;color:#3188c1 !important;font-weight:700 !important;}

.spmi-toolbar{display:flex !important;justify-content:space-between !important;align-items:center !important;gap:14px !important;margin-bottom:16px !important;}
.spmi-search-wrap{position:relative !important;width:520px !important;max-width:100% !important;}
.spmi-search-wrap i{position:absolute !important;top:15px !important;left:13px !important;color:#9ba6b2 !important;font-size:15px !important;}
.spmi-search-wrap input{padding-left:38px !important;height:48px !important;border-radius:12px !important;border:1px solid #d8e2ec !important;}
.spmi-source-label{color:#8f9cad !important;font-size:13px !important;}
.spmi-table thead th{color:#6f7d8d !important;font-size:13px !important;text-transform:uppercase !important;padding:14px 12px !important;}
.spmi-table tbody td{color:#59697c !important;font-size:13px !important;vertical-align:middle !important;padding:16px 12px !important;}
.spmi-cell-note{display:block !important;color:#9da7b2 !important;margin-top:5px !important;font-size:13px !important;}
.spmi-empty{text-align:center !important;padding:48px 20px !important;color:#96a2ae !important;}
.spmi-empty i{display:block !important;font-size:38px !important;color:#bdc7d1 !important;margin-bottom:14px !important;}
.spmi-empty b{display:block !important;color:#6f7d8e !important;font-size:16px !important;margin-bottom:6px !important;}
.spmi-empty span{font-size:13px !important;line-height:1.5 !important;display:block !important;max-width:640px !important;margin:0 auto !important;}
.spmi-note{border-left:4px solid #55a9dc !important;background:#f8fbfe !important;color:#6e7e91 !important;padding:16px 18px !important;line-height:1.7 !important;font-size:13px !important;margin-top:15px !important;border-radius:8px !important;}

@media (max-width:1300px){.spmi-cycle-strip,.spmi-chain{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}.spmi-cycle-card:not(:last-child):after,.spmi-chain-step:not(:last-child):after{display:none !important;}.spmi-header-main h1{font-size:32px !important;}.spmi-hero h2{font-size:30px !important;}}
@media (max-width:991px){.spmi-header-panel,.spmi-hero-grid{display:block !important;}.spmi-header-side{margin-top:14px !important;}.spmi-hero-side{width:auto !important;margin-top:16px !important;}}
@media (max-width:767px){.spmi-header-panel{padding:18px !important;}.spmi-header-main h1{font-size:26px !important;}.spmi-header-main p,.spmi-hero p,.spmi-topic-text p,.spmi-kpi-note,.spmi-chain-step p,.spmi-dashboard-card p,.spmi-note{font-size:14px !important;}.spmi-hero{padding:16px !important;}.spmi-hero h2{font-size:25px !important;}.spmi-cycle-strip,.spmi-chain{grid-template-columns:1fr !important;}.spmi-kpi-value{font-size:32px !important;}.spmi-topic-text h4{font-size:18px !important;}.spmi-portlet .portlet-title .caption .caption-subject{font-size:19px !important;}.spmi-toolbar{display:block !important;}.spmi-source-label{display:block !important;margin-top:10px !important;}}


/* ==========================================================
   DETAIL PAGE ALIGNMENT FIX
   - heading portlet rata kiri
   - Dashboard Pendidikan tiga card sama tinggi
   - tombol Buka dashboard lurus pada garis yang sama
   - Evidence Chain sama tinggi dan tombol di bawah
   ========================================================== */

/* Metronic kadang memberi margin/float pada caption.
   Paksa caption benar-benar mulai dari kiri. */
.spmi-portlet > .portlet-title{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
}

.spmi-portlet > .portlet-title > .caption{
    float:none !important;
    flex:1 1 auto !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
}

.spmi-portlet > .portlet-title > .caption > i,
.spmi-portlet > .portlet-title > .caption > .caption-subject{
    float:none !important;
    margin-left:0 !important;
    text-align:left !important;
}

/* Bila ada action di title, tetap taruh di kanan. */
.spmi-portlet > .portlet-title > .actions{
    float:none !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
    margin-right:0 !important;
}

/* ===== Dashboard Pendidikan: equal height ===== */
.spmi-dashboard-row{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:stretch !important;
}

.spmi-dashboard-row > [class*="col-"]{
    float:none !important;
    display:flex !important;
    flex-direction:column !important;
}

.spmi-dashboard-row .spmi-dashboard-card{
    width:100% !important;
    height:100% !important;
    min-height:178px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
}

/* Deskripsi boleh 1 atau 2 baris, tetapi tombol tetap satu baseline. */
.spmi-dashboard-row .spmi-dashboard-card p{
    flex:1 1 auto !important;
    width:100% !important;
    margin-bottom:16px !important;
}

.spmi-dashboard-row .spmi-dashboard-card a{
    position:static !important;
    margin-top:auto !important;
    left:auto !important;
    bottom:auto !important;
}

/* ===== Evidence Chain: equal height ===== */
.spmi-chain{
    align-items:stretch !important;
}

.spmi-chain-step{
    min-height:180px !important;
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
}

.spmi-chain-step p{
    min-height:0 !important;
    flex:1 1 auto !important;
    margin-bottom:16px !important;
}

.spmi-chain-step a{
    margin-top:auto !important;
    align-self:flex-start !important;
}

/* Sedikit koreksi spacing section agar awal card segaris. */
.spmi-portlet .portlet-body > .spmi-dashboard-row{
    margin-top:0 !important;
}

@media (max-width:991px){
    .spmi-dashboard-row{
        display:block !important;
    }

    .spmi-dashboard-row > [class*="col-"]{
        display:block !important;
    }

    .spmi-dashboard-row .spmi-dashboard-card{
        height:auto !important;
        min-height:178px !important;
    }
}