:root {
    --ikp-navy: #0b2d5c;
    --ikp-blue: #1557a5;
    --ikp-orange: #f28c00;
    --ikp-orange-soft: #fff3df;
    --ikp-green: #169873;
    --ikp-teal: #0796a8;
    --ikp-red: #dc3545;
    --ikp-yellow: #f5b82e;
    --ikp-bg: #f5f7fb;
    --ikp-text: #172033;
    --ikp-muted: #667085;
    --ikp-border: #e5e7eb;
    --ikp-white: #ffffff;
    --shadow-sm: 0 8px 24px rgba(16, 24, 40, 0.08);
    --shadow-md: 0 18px 50px rgba(16, 24, 40, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, Arial, Helvetica, sans-serif;
    color: var(--ikp-text);
    background: var(--ikp-bg);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.topbar {
    background: var(--ikp-navy);
    color: var(--ikp-white);
    font-size: 13px;
    padding: 8px 0;
}

.topbar-inner,
.nav-inner,
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ikp-border);
}

.nav-inner {
    min-height: 74px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ikp-orange), #ffb347);
    display: grid;
    place-items: center;
    color: white;
    font-weight: 900;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}

.brand strong {
    display: block;
    color: var(--ikp-navy);
    font-size: 17px;
    line-height: 1.2;
}

.brand span {
    display: block;
    color: var(--ikp-muted);
    font-size: 12px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    font-weight: 700;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 800;
    cursor: pointer;
}

.btn-primary {
    background: var(--ikp-orange);
    color: white;
}

.btn-primary:hover {
    background: #dc7c00;
}

.btn-outline {
    border-color: #cfd6e4;
    background: white;
    color: var(--ikp-navy);
}

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 20%, rgba(242,140,0,.22), transparent 28%),
        radial-gradient(circle at 20% 85%, rgba(7,150,168,.16), transparent 30%),
        linear-gradient(135deg, #071f42 0%, #0b2d5c 58%, #123f77 100%);
    color: white;
    padding: 82px 0 70px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 54px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.hero h1 {
    margin: 18px 0 14px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.04;
    letter-spacing: -1.7px;
}

.hero h1 span {
    color: #ffb23d;
}

.hero p {
    max-width: 720px;
    font-size: 18px;
    color: rgba(255,255,255,.86);
    margin: 0 0 28px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-panel {
    background: rgba(255,255,255,.96);
    color: var(--ikp-text);
    border-radius: 24px;
    padding: 22px;
    box-shadow: var(--shadow-md);
}

.hero-panel-title {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--ikp-muted);
    letter-spacing: .6px;
    margin-bottom: 14px;
}

.focus-mini {
    display: grid;
    gap: 12px;
}

.focus-mini-item {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--ikp-border);
    border-radius: 16px;
}

.focus-mini-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: #eef4ff;
}

.focus-mini-item:nth-child(2) .focus-mini-icon {
    background: #e9fbf5;
}

.focus-mini-item:nth-child(3) .focus-mini-icon {
    background: #fff7e8;
}

.focus-mini strong {
    color: var(--ikp-navy);
    display: block;
}

.focus-mini small {
    color: var(--ikp-muted);
}

.focus-weight {
    font-size: 22px;
    font-weight: 900;
    color: var(--ikp-orange);
}

.section {
    padding: 72px 0;
}

.section-white {
    background: white;
}

.section-head {
    max-width: 820px;
    margin-bottom: 34px;
}

.kicker {
    color: var(--ikp-orange);
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.section h2 {
    color: var(--ikp-navy);
    font-size: clamp(28px, 4vw, 42px);
    margin: 8px 0 10px;
    line-height: 1.15;
}

.section-head p {
    color: var(--ikp-muted);
    margin: 0;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    background: white;
    border: 1px solid var(--ikp-border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.card h3 {
    color: var(--ikp-navy);
    margin: 10px 0 8px;
    line-height: 1.25;
}

.card p {
    color: var(--ikp-muted);
    margin: 0;
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: var(--ikp-orange-soft);
}

.weight-badge {
    display: inline-block;
    margin-top: 16px;
    background: #eff4ff;
    color: var(--ikp-navy);
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 900;
}

.criteria-list {
    margin: 15px 0 0;
    padding-left: 20px;
    color: var(--ikp-muted);
}

.criteria-list li {
    margin-bottom: 8px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.why-item {
    border-radius: 18px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid var(--ikp-border);
}

.why-number {
    font-size: 12px;
    font-weight: 900;
    color: var(--ikp-orange);
}

.why-item strong {
    display: block;
    margin-top: 6px;
    color: var(--ikp-navy);
}

.band-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.band-card {
    overflow: hidden;
    background: white;
    border-radius: 18px;
    border: 1px solid var(--ikp-border);
    box-shadow: var(--shadow-sm);
}

.band-head {
    padding: 18px;
    color: white;
}

.band-head b {
    font-size: 26px;
    display: block;
}

.band-head span {
    font-weight: 900;
}

.band-body {
    padding: 18px;
    color: var(--ikp-muted);
    font-size: 13px;
}

.band-1 .band-head { background: #e53935; }
.band-2 .band-head { background: #f4b52b; color: #222; }
.band-3 .band-head { background: #f47b31; }
.band-4 .band-head { background: #0d99aa; }
.band-5 .band-head { background: #2f9d65; }

.cta {
    background: linear-gradient(135deg, var(--ikp-orange), #ffaf32);
    border-radius: 28px;
    padding: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    color: white;
    box-shadow: var(--shadow-md);
}

.cta h3 {
    margin: 0 0 6px;
    font-size: 28px;
}

.cta p {
    margin: 0;
    color: rgba(255,255,255,.88);
}

.cta .btn {
    background: white;
    color: var(--ikp-navy);
    min-width: 150px;
}

.footer {
    background: #061b38;
    color: rgba(255,255,255,.78);
    padding: 34px 0;
    font-size: 13px;
}

.footer strong {
    color: white;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: white;
}

.login-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 54px;
    color: white;
    background:
        radial-gradient(circle at 20% 20%, rgba(242,140,0,.34), transparent 28%),
        linear-gradient(145deg, #071f42, #0b2d5c 60%, #134a89);
}

.login-visual h1 {
    font-size: 48px;
    line-height: 1.05;
    margin: 18px 0;
}

.login-visual p {
    color: rgba(255,255,255,.82);
    max-width: 540px;
}

.login-card-wrap {
    display: grid;
    place-items: center;
    padding: 42px;
    background: #f8fafc;
}

.login-card {
    width: min(470px, 100%);
    background: white;
    border: 1px solid var(--ikp-border);
    border-radius: 24px;
    padding: 34px;
    box-shadow: var(--shadow-md);
}

.login-card h2 {
    color: var(--ikp-navy);
    margin: 0 0 6px;
    font-size: 30px;
}

.login-card .sub {
    color: var(--ikp-muted);
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 7px;
    color: #344054;
}

.form-control {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 15px;
    outline: none;
    background: white;
}

.form-control:focus {
    border-color: var(--ikp-blue);
    box-shadow: 0 0 0 4px rgba(21,87,165,.10);
}

.alert {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 13px;
}

.alert-danger {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
}

.login-help {
    margin-top: 18px;
    color: var(--ikp-muted);
    font-size: 12px;
}

.dashboard-body {
    background: #f5f7fb;
}

.dash-topbar {
    background: white;
    border-bottom: 1px solid var(--ikp-border);
}

.dash-topbar .container {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ikp-muted);
    font-size: 13px;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--ikp-navy);
    color: white;
    font-weight: 900;
}

.dashboard {
    padding: 30px 0 60px;
}

.dashboard h1 {
    color: var(--ikp-navy);
    margin: 0 0 4px;
}

.dashboard .lead {
    margin: 0 0 24px;
    color: var(--ikp-muted);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.kpi {
    background: white;
    border: 1px solid var(--ikp-border);
    border-radius: 18px;
    padding: 20px;
}

.kpi-label {
    color: var(--ikp-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.kpi-value {
    font-size: 34px;
    font-weight: 900;
    color: var(--ikp-navy);
    line-height: 1.15;
    margin-top: 7px;
}

.kpi-note {
    color: var(--ikp-muted);
    font-size: 12px;
    margin-top: 6px;
}

.panel {
    margin-top: 20px;
    background: white;
    border: 1px solid var(--ikp-border);
    border-radius: 20px;
    overflow: hidden;
}

.panel-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--ikp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-head h3 {
    margin: 0;
    color: var(--ikp-navy);
}

.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

.table th,
.table td {
    padding: 13px 16px;
    border-bottom: 1px solid #edf0f4;
    text-align: left;
    font-size: 13px;
}

.table th {
    background: #f8fafc;
    color: #475467;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.badge-green { background: #e9f9f0; color: #18794e; }
.badge-orange { background: #fff4e3; color: #9a5a00; }
.badge-red { background: #fff0f1; color: #b42318; }
.badge-gray { background: #f2f4f7; color: #475467; }

.empty {
    padding: 34px 20px;
    text-align: center;
    color: var(--ikp-muted);
}

@media (max-width: 980px) {
    .hero-grid,
    .login-shell {
        grid-template-columns: 1fr;
    }

    .grid-3,
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-grid,
    .band-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .login-visual {
        min-height: 360px;
    }
}

@media (max-width: 680px) {
    .container {
        width: min(100% - 24px, 1180px);
    }

    .nav-links a:not(.btn) {
        display: none;
    }

    .hero {
        padding-top: 58px;
    }

    .grid-3,
    .kpi-grid,
    .why-grid,
    .band-grid {
        grid-template-columns: 1fr;
    }

    .cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .login-visual,
    .login-card-wrap {
        padding: 28px;
    }

    .login-visual h1 {
        font-size: 38px;
    }
}


/* ==========================================================
   IKP v2 - APPLICATION UI
   ========================================================== */
.app-body { background:#f4f6fa; overflow-x:hidden; }
.app-shell { min-height:100vh; display:flex; }
.app-sidebar { position:fixed; inset:0 auto 0 0; width:270px; background:#071f42; color:#fff; display:flex; flex-direction:column; z-index:50; box-shadow:10px 0 30px rgba(7,31,66,.12); }
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:22px 20px; border-bottom:1px solid rgba(255,255,255,.09); }
.sidebar-logo { width:48px; height:48px; object-fit:contain; background:#fff; padding:4px; border-radius:12px; }
.sidebar-brand strong { display:block; font-size:18px; }
.sidebar-brand span { color:rgba(255,255,255,.62); font-size:11px; }
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 10px 24px; }
.nav-section { padding:16px 12px 7px; color:rgba(255,255,255,.42); text-transform:uppercase; font-size:10px; font-weight:900; letter-spacing:.9px; }
.nav-item { min-height:42px; display:flex; align-items:center; gap:10px; padding:9px 12px; margin:3px 0; border-radius:10px; color:rgba(255,255,255,.76); font-size:13px; font-weight:700; transition:.18s ease; }
.nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active { background:linear-gradient(135deg,#f28c00,#ffad32); color:#fff; box-shadow:0 10px 24px rgba(242,140,0,.23); }
.nav-icon {
    width:22px;
    min-width:22px;
    height:22px;
    display:inline-grid;
    place-items:center;
}

/* Paksa semua ikon SVG sidebar menggunakan warna cerah.
   Jangan bergantung kepada currentColor kerana sesetengah browser/server
   boleh memaparkan SVG dengan fill/stroke hitam. */
.app-sidebar .nav-item .nav-icon svg {
    width:18px;
    height:18px;
    display:block;
    fill:none !important;
    stroke:#c7d2e3 !important;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.app-sidebar .nav-item .nav-icon svg * {
    fill:none !important;
    stroke:#c7d2e3 !important;
}

.app-sidebar .nav-item:hover .nav-icon svg,
.app-sidebar .nav-item:hover .nav-icon svg * {
    stroke:#ffffff !important;
}

.app-sidebar .nav-item.active .nav-icon svg,
.app-sidebar .nav-item.active .nav-icon svg * {
    stroke:#ffffff !important;
}

.nav-weight { margin-left:auto; opacity:.7; font-size:10px; }
.sidebar-footer { padding:16px 18px; border-top:1px solid rgba(255,255,255,.09); }
.role-pill { display:inline-block; padding:4px 8px; border-radius:999px; background:rgba(242,140,0,.18); color:#ffbd57; font-size:9px; font-weight:900; }
.sidebar-user { margin-top:6px; font-size:11px; color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-main { margin-left:270px; min-height:100vh; width:calc(100% - 270px); display:flex; flex-direction:column; }
.app-topbar { position:sticky; top:0; z-index:30; min-height:76px; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid #e7eaf0; padding:12px 28px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.app-topbar > div:first-child { display:flex; align-items:center; gap:12px; }
.sidebar-toggle { display:none; border:0; background:#eef2f7; width:40px; height:40px; border-radius:10px; font-size:19px; cursor:pointer; }
.page-heading h1 { margin:0; color:#0b2d5c; font-size:22px; line-height:1.15; }
.page-heading p { margin:4px 0 0; color:#7a8495; font-size:12px; }
.topbar-actions, .top-user { display:flex; align-items:center; gap:10px; }
.top-avatar { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; background:#0b2d5c; font-weight:900; }
.top-user strong { display:block; color:#172033; font-size:12px; max-width:210px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-user span { display:block; color:#8a94a5; font-size:10px; max-width:210px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn-sm { min-height:36px; padding:7px 12px; font-size:12px; }
.app-content { flex:1; padding:26px 28px 45px; }
.app-footer { display:flex; justify-content:space-between; gap:20px; padding:18px 28px; border-top:1px solid #e5e7eb; color:#8a94a5; font-size:11px; background:#fff; }
.page-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.filter-field label { display:block; font-size:10px; color:#667085; text-transform:uppercase; font-weight:900; margin-bottom:5px; }
.filter-field select, .filter-field input { height:39px; min-width:150px; border:1px solid #d8dde7; border-radius:9px; padding:0 10px; background:#fff; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:18px; }
.metric-card { position:relative; overflow:hidden; background:#fff; border:1px solid #e7eaf0; border-radius:16px; padding:18px; box-shadow:0 8px 20px rgba(16,24,40,.04); }
.metric-card:after { content:""; position:absolute; width:70px; height:70px; border-radius:50%; right:-24px; top:-24px; background:rgba(11,45,92,.05); }
.metric-title { color:#7b8494; font-size:10px; text-transform:uppercase; font-weight:900; letter-spacing:.4px; }
.metric-value { color:#0b2d5c; font-size:30px; line-height:1.1; font-weight:900; margin:7px 0 5px; }
.metric-foot { color:#98a2b3; font-size:10px; }
.content-grid-2 { display:grid; grid-template-columns:1.35fr .65fr; gap:18px; }
.content-grid-equal { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel-body { padding:18px 20px; }
.panel-subtitle { color:#8a94a5; font-size:11px; }
.band-big { width:88px; height:88px; border-radius:50%; display:grid; place-items:center; margin:auto; color:#fff; font-size:28px; font-weight:900; }
.band-big.b1 { background:#e53935; }.band-big.b2 { background:#f4b52b;color:#222; }.band-big.b3 { background:#f47b31; }.band-big.b4 { background:#0d99aa; }.band-big.b5 { background:#2f9d65; }
.progress { height:8px; border-radius:999px; background:#edf0f4; overflow:hidden; }
.progress > span { display:block; height:100%; background:#1557a5; border-radius:999px; }
.progress.orange > span { background:#f28c00; }.progress.green > span { background:#169873; }.progress.red > span { background:#dc3545; }
.form-card { background:#fff; border:1px solid #e4e8ef; border-radius:18px; margin-bottom:18px; overflow:hidden; }
.form-card-head { padding:16px 20px; border-bottom:1px solid #edf0f4; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.form-card-head h3 { margin:0; color:#0b2d5c; font-size:15px; }
.form-card-head span { color:#8a94a5; font-size:11px; }
.form-card-body { padding:20px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.form-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.form-group textarea.form-control { min-height:100px; resize:vertical; }
.help { color:#98a2b3; font-size:10px; margin-top:5px; }
.checkbox-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.check-card { display:flex; gap:9px; align-items:flex-start; padding:11px; border:1px solid #e6eaf0; border-radius:10px; background:#fafbfc; font-size:12px; }
.check-card input { margin-top:3px; }
.score-preview { background:linear-gradient(135deg,#071f42,#103e75); color:#fff; border-radius:18px; padding:20px; }
.score-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.score-row:last-child { border:0; }
.score-row span { color:rgba(255,255,255,.65); font-size:12px; }.score-row strong { font-size:15px; }
.action-buttons { display:flex; gap:6px; flex-wrap:wrap; }
.btn-light { background:#f2f4f7; color:#344054; border-color:#e4e7ec; }.btn-danger { background:#fff1f2; color:#b42318; border-color:#fecdd3; }
.table .num { text-align:right; font-variant-numeric:tabular-nums; }
.table .center { text-align:center; }
.score-pill { display:inline-flex; align-items:center; justify-content:center; min-width:50px; padding:4px 8px; border-radius:8px; background:#eff4ff; color:#0b2d5c; font-weight:900; }
.chart-bars { display:flex; align-items:flex-end; gap:12px; height:210px; padding-top:20px; }
.chart-col { flex:1; min-width:42px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.chart-bar { width:70%; min-height:2px; border-radius:7px 7px 2px 2px; background:linear-gradient(180deg,#1557a5,#0b2d5c); position:relative; }
.chart-bar.orange { background:linear-gradient(180deg,#ffb13f,#f28c00); }.chart-bar.green { background:linear-gradient(180deg,#31b88b,#169873); }
.chart-label { margin-top:7px; font-size:10px; color:#7b8494; text-align:center; }.chart-value { font-size:10px; font-weight:900; color:#344054; margin-bottom:5px; }
.band-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.band-stat { padding:14px; border-radius:13px; color:#fff; text-align:center; }.band-stat strong { display:block; font-size:24px; }.band-stat span { font-size:10px; }
.band-stat.b1{background:#e53935}.band-stat.b2{background:#eeb028;color:#222}.band-stat.b3{background:#f47b31}.band-stat.b4{background:#0d99aa}.band-stat.b5{background:#2f9d65}
.alert-success { background:#ecfdf3; border:1px solid #abefc6; color:#067647; }
.legend { display:flex; gap:12px; flex-wrap:wrap; color:#667085; font-size:10px; }.legend span { display:inline-flex; align-items:center; gap:5px; }
.legend i { width:9px; height:9px; border-radius:3px; display:inline-block; }
.print-only { display:none; }
@media print { .app-sidebar,.app-topbar,.app-footer,.no-print { display:none !important; } .app-main { margin:0; width:100%; } .app-content { padding:0; } .panel,.metric-card { box-shadow:none; break-inside:avoid; } .print-only{display:block;} }
@media(max-width:1050px){ .metric-grid{grid-template-columns:repeat(2,1fr)} .content-grid-2,.content-grid-equal{grid-template-columns:1fr} }
@media(max-width:820px){ .app-sidebar{transform:translateX(-100%);transition:.2s}.app-sidebar.open{transform:translateX(0)} .app-main{margin-left:0;width:100%}.sidebar-toggle{display:inline-grid;place-items:center}.top-user{display:none}.app-content{padding:18px}.form-grid,.form-grid-3,.checkbox-grid{grid-template-columns:1fr}.band-strip{grid-template-columns:1fr 1fr}.app-footer{flex-direction:column} }
@media(max-width:560px){ .metric-grid{grid-template-columns:1fr}.app-topbar{padding:10px 14px}.page-heading h1{font-size:18px}.page-heading p{display:none}.band-strip{grid-template-columns:1fr}.app-content{padding:14px} }


/* ==========================================================
   v2.4.0 - FORMULA IKP & WORKFLOW STATUS
   ========================================================== */
.formula-note {
    background: #eef6ff;
    border: 1px solid #cfe2ff;
    border-left: 4px solid #1557a5;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    color: #344054;
}

.formula-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.formula-card {
    background: #fff;
    border: 1px solid var(--ikp-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.formula-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    color: #fff;
}

.formula-card-head h3 {
    margin: 3px 0 0;
    font-size: 17px;
}

.formula-card-head > strong {
    font-size: 28px;
}

.ppa-head { background: linear-gradient(135deg, #1557a5, #0b2d5c); }
.hepa-head { background: linear-gradient(135deg, #169873, #087c62); }
.pkpa-head { background: linear-gradient(135deg, #f28c00, #cc6f00); }

.formula-code {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .8px;
    opacity: .78;
}

.formula-card-body { padding: 18px 20px 20px; }

.formula-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    color: #344054;
    font-size: 13px;
}

.formula-row:first-child { margin-top: 0; }

.formula-card code {
    display: block;
    white-space: normal;
    margin-top: 7px;
    padding: 9px 10px;
    border-radius: 9px;
    background: #f8fafc;
    border: 1px solid #eaecf0;
    color: #344054;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
}

.formula-total {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid #eaecf0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ikp-navy);
    font-size: 13px;
}

.formula-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.formula-summary > div {
    border: 1px solid #eaecf0;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px;
}

.formula-summary span {
    display: block;
    color: #667085;
    font-size: 12px;
    margin-bottom: 6px;
}

.formula-summary strong {
    color: var(--ikp-navy);
}

.formula-example {
    margin-top: 16px;
    background: #fff8e8;
    border: 1px solid #f7dfaa;
    border-radius: 12px;
    padding: 14px 16px;
    color: #7a5200;
}

.component-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.component-status-card {
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 13px 14px;
    background: #f8fafc;
}

.component-status-card span {
    display: block;
    font-size: 11px;
    color: #667085;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 800;
}

.component-status-card strong { color: var(--ikp-navy); }

.workflow-actions {
    display: grid;
    gap: 8px;
}

@media (max-width: 1100px) {
    .formula-grid,
    .formula-summary,
    .component-status-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   v2.4.3 - FULL MARK LABEL
   ========================================================== */
.score-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:72px;
    padding:6px 12px;
    border-radius:999px;
    font-weight:900;
    letter-spacing:.2px;
}
.score-badge.full {
    background:#e9f9f0;
    color:#18794e;
    border:1px solid #b7e7cb;
}


/* ==========================================================
   v2.4.4 - ANALISIS BAND & SPIDERWEB
   ========================================================== */
.band-label { display:inline-flex; align-items:center; justify-content:center; min-width:68px; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:900; border:1px solid transparent; }
.band-label.b1 { background:#fff0f1; color:#b42318; border-color:#fecdd3; }
.band-label.b2 { background:#fff8df; color:#8a5a00; border-color:#f7dc8b; }
.band-label.b3 { background:#fff1e7; color:#b54708; border-color:#ffd0ad; }
.band-label.b4 { background:#e7f8fb; color:#087b88; border-color:#b8e7ed; }
.band-label.b5 { background:#e9f9f0; color:#18794e; border-color:#b7e7cb; }
.band-progress.b1 span { background:#e53935; }
.band-progress.b2 span { background:#f0b429; }
.band-progress.b3 span { background:#f47b31; }
.band-progress.b4 span { background:#0d99aa; }
.band-progress.b5 span { background:#2f9d65; }
.analysis-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr); gap:18px; align-items:stretch; }
.analysis-grid > .panel { margin-top:0; }
.radar-wrap { padding:14px 18px 18px; text-align:center; }
.ikp-radar { display:block; width:min(100%,390px); height:auto; margin:0 auto; }
.radar-grid { fill:none; stroke:#d8e0ea; stroke-width:1; }
.radar-grid-outer { stroke:#b9c7d8; stroke-width:1.3; }
.radar-axis { stroke:#d8e0ea; stroke-width:1; }
.radar-data { fill:rgba(21,87,165,.18); stroke:#1557a5; stroke-width:2.5; }
.radar-point { fill:#1557a5; stroke:#ffffff; stroke-width:2; }
.radar-label { fill:#0b2d5c; font-size:12px; font-weight:900; }
.radar-value { fill:#667085; font-size:10px; font-weight:700; }
.radar-note { margin-top:-6px; color:#667085; font-size:11px; line-height:1.45; }
@media(max-width:1050px){ .analysis-grid { grid-template-columns:1fr; } }


/* ==========================================================
   v2.5.0 - DASHBOARD ANALYTICS ENHANCEMENT
   ========================================================== */
.component-progress-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin:18px 0;
}
.component-progress-card {
    background:#fff;
    border:1px solid #e4e8ef;
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow-sm);
}
.component-progress-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.component-progress-head > div { min-width:0; }
.component-progress-code {
    display:block;
    font-size:10px;
    font-weight:900;
    letter-spacing:.7px;
    text-transform:uppercase;
    color:#8a94a5;
    margin-bottom:4px;
}
.component-progress-head strong {
    display:block;
    color:var(--ikp-navy);
    font-size:14px;
    line-height:1.3;
}
.component-progress-head b {
    font-size:24px;
    line-height:1;
    color:var(--ikp-navy);
}
.component-progress-count {
    margin-top:14px;
    font-size:12px;
    font-weight:800;
    color:#475467;
}
.component-track {
    height:8px;
    margin-top:10px;
    border-radius:999px;
    background:#edf0f4;
    overflow:hidden;
}
.component-track span { display:block; height:100%; border-radius:999px; }
.component-progress-card.ppa .component-track span { background:#f28c00; }
.component-progress-card.hepa .component-track span { background:#169873; }
.component-progress-card.pkpa .component-track span { background:#1557a5; }
.component-progress-card.bandfinal .component-track span { background:#7f56d9; }
.component-progress-card small { display:block; margin-top:8px; color:#98a2b3; font-size:10px; }

.band-scope-panel { margin-top:18px; }
.band-scope-legend { display:flex; gap:14px; flex-wrap:wrap; color:#667085; font-size:11px; }
.band-scope-legend span { display:inline-flex; align-items:center; gap:6px; }
.band-scope-legend i { width:9px; height:9px; border-radius:50%; display:inline-block; }
.program-dot { background:#1557a5; }
.faculty-dot { background:#f28c00; }
.band-scope-chart { padding:18px 20px 20px; display:grid; gap:14px; }
.band-scope-row { display:grid; grid-template-columns:90px 1fr; gap:14px; align-items:center; }
.band-scope-bars { display:grid; gap:7px; }
.band-scope-line { display:grid; grid-template-columns:62px 1fr 34px; gap:9px; align-items:center; }
.band-scope-type { font-size:10px; color:#667085; font-weight:700; }
.band-scope-track { height:10px; border-radius:999px; background:#edf0f4; overflow:hidden; }
.band-scope-fill { display:block; height:100%; border-radius:999px; }
.band-scope-fill.program { background:#1557a5; }
.band-scope-fill.faculty { background:#f28c00; }
.band-scope-line strong { font-size:12px; color:#344054; text-align:right; }

.clickable-bars .chart-col { border-radius:10px; transition:.15s ease; }
.clickable-bars .chart-col:hover { background:#f8fafc; transform:translateY(-2px); }

.faculty-overview-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}
.faculty-overview-card {
    background:#fff;
    border:1px solid #e4e8ef;
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow-sm);
}
.faculty-overview-card span {
    display:block;
    color:#667085;
    font-size:10px;
    font-weight:900;
    letter-spacing:.5px;
    text-transform:uppercase;
}
.faculty-overview-card strong {
    display:block;
    margin-top:6px;
    color:var(--ikp-navy);
    font-size:27px;
    line-height:1.05;
}
.faculty-overview-card small { display:block; margin-top:8px; color:#98a2b3; font-size:10px; }
.band-card-mini.b1 { border-top:4px solid #e53935; }
.band-card-mini.b2 { border-top:4px solid #f0b429; }
.band-card-mini.b3 { border-top:4px solid #f47b31; }
.band-card-mini.b4 { border-top:4px solid #0d99aa; }
.band-card-mini.b5 { border-top:4px solid #2f9d65; }

.faculty-band-card-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    padding:18px 20px 20px;
}
.faculty-band-card {
    border-radius:16px;
    padding:15px;
    border:1px solid #eaecf0;
    background:#fff;
}
.faculty-band-card.b1 { border-top:4px solid #e53935; }
.faculty-band-card.b2 { border-top:4px solid #f0b429; }
.faculty-band-card.b3 { border-top:4px solid #f47b31; }
.faculty-band-card.b4 { border-top:4px solid #0d99aa; }
.faculty-band-card.b5 { border-top:4px solid #2f9d65; }
.faculty-band-no { font-size:11px; font-weight:900; color:#475467; text-transform:uppercase; }
.faculty-band-values { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.faculty-band-values strong { display:block; font-size:22px; color:var(--ikp-navy); }
.faculty-band-values span { display:block; color:#98a2b3; font-size:10px; }
.faculty-band-bars { display:grid; gap:6px; margin-top:12px; }
.mini-track { height:6px; border-radius:999px; background:#edf0f4; overflow:hidden; }
.mini-track span { display:block; height:100%; border-radius:999px; }
.mini-track span.program { background:#1557a5; }
.mini-track span.faculty { background:#f28c00; }
.table-detail-link { color:var(--ikp-navy); text-decoration:none; }
.table-detail-link:hover { text-decoration:underline; }

.detail-year-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}
.detail-year-card {
    background:#fff;
    border:1px solid #e4e8ef;
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow-sm);
}
.detail-year-card span { display:block; color:#667085; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
.detail-year-card strong { display:block; margin-top:6px; color:var(--ikp-navy); font-size:27px; }
.detail-year-card small { display:block; margin-top:7px; color:#98a2b3; font-size:10px; }

@media(max-width:1200px){
    .component-progress-grid,.faculty-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .faculty-band-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:820px){
    .component-progress-grid,.faculty-overview-grid,.detail-year-grid { grid-template-columns:1fr; }
    .faculty-band-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .band-scope-row { grid-template-columns:1fr; }
}
@media(max-width:560px){
    .faculty-band-card-grid { grid-template-columns:1fr; }
}


/* ==========================================================
   v2.5.2 - REVIEW STATUS CARDS
   ========================================================== */
.review-status-grid {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:12px;
    margin-bottom:18px;
}
.review-status-card {
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid #e4e8ef;
    border-radius:17px;
    padding:16px;
    box-shadow:var(--shadow-sm);
    min-height:122px;
}
.review-status-card:after {
    content:"";
    position:absolute;
    width:64px;
    height:64px;
    right:-24px;
    top:-24px;
    border-radius:50%;
    background:rgba(11,45,92,.05);
}
.review-status-card span {
    display:block;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#667085;
}
.review-status-card strong {
    display:block;
    margin-top:5px;
    font-size:27px;
    line-height:1;
    color:var(--ikp-navy);
}
.review-status-card small {
    display:block;
    margin-top:8px;
    color:#98a2b3;
    font-size:10px;
    line-height:1.4;
}
.review-status-card.ppa { border-top:4px solid #f28c00; }
.review-status-card.hepa { border-top:4px solid #169873; }
.review-status-card.pkpa { border-top:4px solid #1557a5; }
.review-status-card.ready { border-top:4px solid #0d99aa; background:#f7feff; }
.review-status-card.incomplete { border-top:4px solid #f0b429; background:#fffdf7; }
.review-status-card.final { border-top:4px solid #2f9d65; background:#f7fdf9; }
.review-status-card.ready strong { color:#087b88; }
.review-status-card.incomplete strong { color:#9a6500; }
.review-status-card.final strong { color:#208c61; }
.review-mini-track {
    height:5px;
    border-radius:999px;
    background:#edf0f4;
    overflow:hidden;
    margin-top:9px;
}
.review-mini-track i {
    display:block;
    height:100%;
    border-radius:999px;
}
.review-status-card.ppa .review-mini-track i { background:#f28c00; }
.review-status-card.hepa .review-mini-track i { background:#169873; }
.review-status-card.pkpa .review-mini-track i { background:#1557a5; }
@media(max-width:1400px){
    .review-status-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:980px){
    .review-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:560px){
    .review-status-grid { grid-template-columns:1fr; }
}


/* ==========================================================
   v2.5.4 - ANALITIK BAND
   ========================================================== */
.analytics-kpi-grid { margin-bottom:18px; }
.metric-card small { display:block; margin-top:6px; color:#98a2b3; font-size:10px; }
.band-analytics-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-bottom:20px;
}
.band-analytics-card {
    display:block;
    padding:17px;
    border-radius:17px;
    color:#fff;
    box-shadow:0 8px 20px rgba(16,24,40,.08);
    transition:transform .15s ease, box-shadow .15s ease;
    border:2px solid transparent;
}
.band-analytics-card:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(16,24,40,.13); }
.band-analytics-card.selected { border-color:#fff; outline:3px solid rgba(11,45,92,.16); }
.band-analytics-card.b1 { background:linear-gradient(135deg,#e53935,#c62828); }
.band-analytics-card.b2 { background:linear-gradient(135deg,#f4bd32,#df9f13); color:#3b2b00; }
.band-analytics-card.b3 { background:linear-gradient(135deg,#f47b31,#dc6420); }
.band-analytics-card.b4 { background:linear-gradient(135deg,#11a0b1,#087986); }
.band-analytics-card.b5 { background:linear-gradient(135deg,#2fa36b,#1d8152); }
.band-analytics-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.band-analytics-top span { font-weight:900; text-transform:uppercase; letter-spacing:.5px; font-size:11px; }
.band-analytics-top strong { font-size:28px; line-height:1; }
.band-analytics-title { margin-top:12px; font-weight:900; font-size:13px; min-height:38px; }
.band-analytics-meta { margin-top:7px; font-size:10px; opacity:.9; line-height:1.45; }
.band-chart-wrap { padding:22px; }
.band-chart-row {
    display:grid;
    grid-template-columns:180px 1fr 70px;
    gap:15px;
    align-items:center;
    margin-bottom:18px;
}
.band-chart-row:last-child { margin-bottom:0; }
.band-chart-label strong { display:block; color:var(--ikp-navy); }
.band-chart-label span { display:block; color:#98a2b3; font-size:10px; margin-top:2px; }
.band-chart-track { height:16px; border-radius:999px; overflow:hidden; background:#edf0f4; }
.band-chart-fill { height:100%; min-width:0; border-radius:999px; }
.band-chart-fill.b1 { background:#e53935; }
.band-chart-fill.b2 { background:#f0b429; }
.band-chart-fill.b3 { background:#f47b31; }
.band-chart-fill.b4 { background:#0d99aa; }
.band-chart-fill.b5 { background:#2f9d65; }
.band-chart-value { font-weight:900; color:var(--ikp-navy); text-align:right; }
.analytics-note { margin:0 22px 22px; padding:12px 14px; border-radius:12px; background:#f8fafc; border:1px solid #eaecf0; color:#667085; font-size:11px; }
.band-table-badge { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; min-width:62px; border-radius:999px; font-size:10px; font-weight:900; }
.band-table-badge.b1 { background:#fff0f1; color:#b42318; border:1px solid #fecdd3; }
.band-table-badge.b2 { background:#fff6df; color:#8a5a00; border:1px solid #f8d98b; }
.band-table-badge.b3 { background:#fff0e4; color:#b54708; border:1px solid #f7c59f; }
.band-table-badge.b4 { background:#e8f8fb; color:#087985; border:1px solid #a7dfe6; }
.band-table-badge.b5 { background:#e9f9f0; color:#18794e; border:1px solid #b7e7cb; }
@media(max-width:1200px){ .band-analytics-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:820px){ .band-analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .band-chart-row{grid-template-columns:1fr;} .band-chart-value{text-align:left;} }
@media(max-width:560px){ .band-analytics-grid{grid-template-columns:1fr;} }


/* ==========================================================
   v2.5.5 - SUBKRITERIA LEMAH ANALYTICS
   ========================================================== */
.weak-kpi-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}
.weak-kpi-card {
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid #e4e8ef;
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow-sm);
}
.weak-kpi-card:after {
    content:"";
    position:absolute;
    width:72px;
    height:72px;
    right:-28px;
    top:-28px;
    border-radius:50%;
    background:rgba(11,45,92,.05);
}
.weak-kpi-card.alert { border-top:4px solid #f47b31; background:#fffaf6; }
.weak-kpi-card span { display:block; color:#667085; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
.weak-kpi-card strong { display:block; margin-top:6px; color:var(--ikp-navy); font-size:28px; line-height:1.05; }
.weak-kpi-card.alert strong { color:#c95d16; }
.weak-kpi-card small { display:block; margin-top:8px; color:#98a2b3; font-size:10px; }

.weak-focus-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:20px;
}
.weak-focus-card {
    background:#fff;
    border:1px solid #e4e8ef;
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow-sm);
}
.weak-focus-card.ppa { border-top:4px solid #f28c00; }
.weak-focus-card.hepa { border-top:4px solid #169873; }
.weak-focus-card.pkpa { border-top:4px solid #1557a5; }
.weak-focus-top { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.weak-focus-top span { display:block; font-size:10px; font-weight:900; letter-spacing:.6px; color:#667085; }
.weak-focus-top h3 { margin:3px 0 0; font-size:15px; color:var(--ikp-navy); }
.weak-focus-top > strong { font-size:27px; color:var(--ikp-navy); }
.weak-focus-track { height:8px; border-radius:999px; background:#edf0f4; overflow:hidden; margin-top:16px; }
.weak-focus-track i { display:block; height:100%; border-radius:999px; }
.weak-focus-card.ppa .weak-focus-track i { background:#f28c00; }
.weak-focus-card.hepa .weak-focus-track i { background:#169873; }
.weak-focus-card.pkpa .weak-focus-track i { background:#1557a5; }
.weak-focus-meta { display:flex; justify-content:space-between; gap:12px; margin-top:14px; color:#667085; font-size:11px; }
.weak-focus-meta b { color:var(--ikp-navy); }
.weak-focus-card > small { display:block; margin-top:8px; color:#98a2b3; font-size:10px; }

.weak-chart-grid { margin-bottom:20px; align-items:stretch; }
.weak-performance-chart { padding:22px; display:grid; gap:20px; }
.weak-performance-row { display:grid; grid-template-columns:150px 1fr 58px; gap:14px; align-items:center; }
.weak-performance-label strong { display:block; color:var(--ikp-navy); font-size:13px; }
.weak-performance-label span { display:block; color:#98a2b3; font-size:10px; margin-top:2px; }
.weak-performance-track { height:15px; border-radius:999px; background:#edf0f4; overflow:hidden; }
.weak-performance-track i { display:block; height:100%; border-radius:999px; }
.weak-performance-track i.ppa { background:#f28c00; }
.weak-performance-track i.hepa { background:#169873; }
.weak-performance-track i.pkpa { background:#1557a5; }
.weak-performance-value { text-align:right; font-size:13px; font-weight:900; color:var(--ikp-navy); }

.weak-donut-wrap { min-height:260px; display:grid; grid-template-columns:210px 1fr; gap:24px; align-items:center; padding:22px; }
.weak-donut { width:190px; height:190px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.03); }
.weak-donut-center { width:112px; height:112px; border-radius:50%; background:#fff; display:grid; place-items:center; align-content:center; box-shadow:0 3px 14px rgba(16,24,40,.08); }
.weak-donut-center strong { font-size:28px; line-height:1; color:var(--ikp-navy); }
.weak-donut-center span { margin-top:4px; color:#98a2b3; font-size:10px; text-transform:uppercase; font-weight:900; }
.weak-donut-legend { display:grid; gap:13px; }
.weak-donut-legend > div { display:grid; grid-template-columns:12px 1fr auto; gap:9px; align-items:center; padding-bottom:10px; border-bottom:1px solid #edf0f4; }
.weak-donut-legend > div:last-child { border-bottom:0; padding-bottom:0; }
.weak-donut-legend i { width:10px; height:10px; border-radius:3px; display:block; }
.weak-donut-legend i.ppa { background:#f28c00; }
.weak-donut-legend i.hepa { background:#169873; }
.weak-donut-legend i.pkpa { background:#1557a5; }
.weak-donut-legend span { color:#667085; font-size:11px; }
.weak-donut-legend strong { color:var(--ikp-navy); font-size:12px; }

.weak-analytics-note { margin:0 0 20px; padding:13px 15px; border:1px solid #dbe7f7; border-left:4px solid #1557a5; border-radius:12px; background:#f8fbff; color:#667085; font-size:11px; }
.weak-table-badge { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; font-size:10px; font-weight:900; }
.weak-table-badge.ppa { background:#fff4e3; color:#9a5a00; border:1px solid #f8d69e; }
.weak-table-badge.hepa { background:#e9f9f0; color:#18794e; border:1px solid #b7e7cb; }
.weak-table-badge.pkpa { background:#edf4ff; color:#1557a5; border:1px solid #bfd3f3; }

@media(max-width:1200px){
    .weak-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px){
    .weak-focus-grid { grid-template-columns:1fr; }
    .weak-donut-wrap { grid-template-columns:1fr; justify-items:center; }
    .weak-donut-legend { width:100%; }
}
@media(max-width:680px){
    .weak-kpi-grid { grid-template-columns:1fr; }
    .weak-performance-row { grid-template-columns:1fr; }
    .weak-performance-value { text-align:left; }
}


/* ==========================================================
   v2.5.6 - CATATAN PENGISI MODAL
   ========================================================== */
.note-cell {
    text-align:center;
    width:72px;
}
.input-note-button {
    width:36px;
    height:36px;
    border:1px solid #d7e0ec;
    border-radius:11px;
    background:#f8fbff;
    color:#0b2d5c;
    display:inline-grid;
    place-items:center;
    cursor:pointer;
    transition:.18s ease;
}
.input-note-button:hover {
    background:#0b2d5c;
    color:#fff;
    border-color:#0b2d5c;
    transform:translateY(-1px);
    box-shadow:0 7px 18px rgba(11,45,92,.16);
}
.input-note-button svg {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.input-note-source {
    display:none !important;
}
body.modal-open {
    overflow:hidden;
}
.input-note-modal {
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.input-note-modal.show {
    display:flex;
}
.input-note-backdrop {
    position:absolute;
    inset:0;
    background:rgba(6,27,56,.58);
    backdrop-filter:blur(3px);
}
.input-note-dialog {
    position:relative;
    z-index:1;
    width:min(650px, 100%);
    max-height:80vh;
    overflow:hidden;
    border-radius:20px;
    background:#fff;
    border:1px solid #dfe5ee;
    box-shadow:0 28px 80px rgba(6,27,56,.28);
}
.input-note-dialog-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:20px 22px;
    background:linear-gradient(135deg,#071f42,#0b2d5c);
    color:#fff;
}
.input-note-dialog-head span {
    display:block;
    font-size:10px;
    font-weight:900;
    letter-spacing:.8px;
    color:rgba(255,255,255,.68);
}
.input-note-dialog-head h3 {
    margin:4px 0 0;
    font-size:20px;
}
.input-note-close {
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:10px;
    background:rgba(255,255,255,.09);
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}
.input-note-close:hover {
    background:rgba(255,255,255,.18);
}
.input-note-dialog-body {
    padding:22px;
    overflow:auto;
    max-height:calc(80vh - 90px);
}
.input-note-program {
    margin-bottom:14px;
    padding:11px 13px;
    border-radius:12px;
    background:#f4f7fb;
    border:1px solid #e3e8f0;
    color:#0b2d5c;
    font-size:12px;
    font-weight:900;
}
.input-note-content {
    padding:18px;
    border-radius:14px;
    border:1px solid #f0dcae;
    background:#fff9ea;
    color:#5f470f;
    font-size:14px;
    line-height:1.7;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}
@media(max-width:680px) {
    .input-note-modal { padding:12px; }
    .input-note-dialog-head,
    .input-note-dialog-body { padding:16px; }
}


/* ==========================================================
   v2.5.7 - PENILAIAN SCORE EMPHASIS
   ========================================================== */
.assessment-score-cell {
    vertical-align: middle;
}

.assessment-score-value {
    font-size: 18px;
    line-height: 1.05;
    font-weight: 900;
    color: #0b2d5c;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.assessment-overall-value {
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
    color: #071f42;
    font-variant-numeric: tabular-nums;
}

.assessment-status-badge {
    min-width: 0;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 8.5px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .25px;
}

.assessment-status-badge.overall-status {
    padding: 4px 8px;
    font-size: 9px;
}

@media (max-width: 900px) {
    .assessment-score-value,
    .assessment-overall-value {
        font-size: 16px;
    }
}


/* ==========================================================
   v2.5.8 - PKPA ANALYTICS
   ========================================================== */
.pkpa-weight-card {
    margin-bottom:18px;
    border:1px solid #dce5f0;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    box-shadow:var(--shadow-sm);
}
.pkpa-weight-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:17px 20px;
    background:linear-gradient(135deg,#071f42,#0b2d5c);
    color:#fff;
}
.pkpa-weight-title span {
    display:block;
    font-size:10px;
    font-weight:900;
    letter-spacing:.7px;
    color:rgba(255,255,255,.62);
}
.pkpa-weight-title > div > strong {
    display:block;
    margin-top:3px;
    font-size:18px;
}
.pkpa-focus-badge {
    min-width:132px;
    padding:9px 13px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    background:rgba(255,255,255,.1);
    text-align:right;
}
.pkpa-focus-badge small {
    display:block;
    font-size:9px;
    color:rgba(255,255,255,.65);
    font-weight:900;
}
.pkpa-focus-badge strong {
    display:block;
    font-size:27px;
    line-height:1.05;
}
.pkpa-weight-strip {
    display:flex;
    min-height:108px;
}
.pkpa-weight-segment {
    position:relative;
    padding:18px 20px;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.pkpa-weight-segment.pdp { background:linear-gradient(135deg,#1557a5,#0d4587); }
.pkpa-weight-segment.curriculum { background:linear-gradient(135deg,#169873,#0f7b5f); }
.pkpa-weight-segment.pedagogy { background:linear-gradient(135deg,#f28c00,#d97800); }
.pkpa-weight-segment span { font-size:12px; font-weight:900; }
.pkpa-weight-segment strong { font-size:28px; line-height:1.05; margin:3px 0 4px; }
.pkpa-weight-segment small { font-size:10px; color:rgba(255,255,255,.78); }

.pkpa-kpi-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}
.pkpa-kpi-card {
    position:relative;
    overflow:hidden;
    border:1px solid #dfe5ee;
    border-radius:18px;
    padding:18px;
    background:#fff;
    box-shadow:var(--shadow-sm);
}
.pkpa-kpi-card::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:5px;
}
.pkpa-kpi-card.pdp::before { background:#1557a5; }
.pkpa-kpi-card.curriculum::before { background:#169873; }
.pkpa-kpi-card.pedagogy::before { background:#f28c00; }
.pkpa-kpi-card.overall::before { background:#6c4ccf; }
.pkpa-kpi-card span {
    display:block;
    color:#667085;
    font-size:10px;
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:.45px;
}
.pkpa-kpi-card strong {
    display:block;
    margin:7px 0 5px;
    color:#0b2d5c;
    font-size:26px;
    line-height:1.05;
}
.pkpa-kpi-card small {
    display:block;
    color:#7b8494;
    font-size:10px;
    line-height:1.5;
}
.panel-subtitle {
    display:block;
    margin-top:3px;
    color:#98a2b3;
    font-size:10px;
}
.pkpa-target-chart {
    padding:20px 22px;
    display:grid;
    gap:18px;
}
.pkpa-target-row {
    display:grid;
    grid-template-columns:230px 1fr 95px;
    gap:18px;
    align-items:center;
}
.pkpa-target-label strong {
    display:block;
    color:#0b2d5c;
    font-size:12px;
}
.pkpa-target-label span {
    display:block;
    margin-top:2px;
    color:#98a2b3;
    font-size:10px;
}
.pkpa-target-bar {
    height:14px;
    border-radius:999px;
    background:#edf1f6;
    overflow:hidden;
}
.pkpa-target-fill {
    height:100%;
    border-radius:999px;
    min-width:0;
}
.pkpa-target-fill.pdp { background:linear-gradient(90deg,#1557a5,#3380d6); }
.pkpa-target-fill.curriculum { background:linear-gradient(90deg,#169873,#31b88b); }
.pkpa-target-fill.pedagogy { background:linear-gradient(90deg,#f28c00,#ffb13f); }
.pkpa-target-value {
    text-align:right;
}
.pkpa-target-value strong {
    display:block;
    color:#0b2d5c;
    font-size:15px;
}
.pkpa-target-value span {
    display:block;
    color:#98a2b3;
    font-size:9px;
}
@media(max-width:1100px){
    .pkpa-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pkpa-target-row { grid-template-columns:190px 1fr 80px; }
}
@media(max-width:760px){
    .pkpa-weight-strip { flex-direction:column; }
    .pkpa-kpi-grid { grid-template-columns:1fr; }
    .pkpa-target-row { grid-template-columns:1fr; gap:7px; }
    .pkpa-target-value { text-align:left; }
    .pkpa-focus-badge { min-width:105px; }
}


/* ==========================================================
   v2.5.9 - PPA & HEPA ANALYTICS
   Menggunakan struktur visual yang sama dengan PKPA.
   ========================================================== */
.pkpa-weight-segment.ppa-upu { background:linear-gradient(135deg,#1557a5,#0d4587); }
.pkpa-weight-segment.ppa-registration { background:linear-gradient(135deg,#0f8b8d,#087173); }
.pkpa-weight-segment.ppa-dropout { background:linear-gradient(135deg,#f28c00,#d97800); }
.pkpa-kpi-card.ppa-upu::before { background:#1557a5; }
.pkpa-kpi-card.ppa-registration::before { background:#0f8b8d; }
.pkpa-kpi-card.ppa-dropout::before { background:#f28c00; }
.pkpa-target-fill.ppa-upu { background:linear-gradient(90deg,#1557a5,#3380d6); }
.pkpa-target-fill.ppa-registration { background:linear-gradient(90deg,#0f8b8d,#34b5b8); }
.pkpa-target-fill.ppa-dropout { background:linear-gradient(90deg,#f28c00,#ffb13f); }

.pkpa-weight-segment.hepa-employed { background:linear-gradient(135deg,#169873,#0f7b5f); }
.pkpa-weight-segment.hepa-field { background:linear-gradient(135deg,#1557a5,#0d4587); }
.pkpa-weight-segment.hepa-salary { background:linear-gradient(135deg,#6c4ccf,#5639ae); }
.pkpa-kpi-card.hepa-employed::before { background:#169873; }
.pkpa-kpi-card.hepa-field::before { background:#1557a5; }
.pkpa-kpi-card.hepa-salary::before { background:#6c4ccf; }
.pkpa-target-fill.hepa-employed { background:linear-gradient(90deg,#169873,#31b88b); }
.pkpa-target-fill.hepa-field { background:linear-gradient(90deg,#1557a5,#3380d6); }
.pkpa-target-fill.hepa-salary { background:linear-gradient(90deg,#6c4ccf,#967be9); }


/* ==========================================================
   v2.5.10 - ASSESSMENT OVERALL ANALYTICS
   ========================================================== */
.assessment-analytics-kpi-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}
.assessment-analytics-kpi {
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid #dfe5ee;
    border-radius:18px;
    padding:18px 20px;
    box-shadow:var(--shadow-sm);
}
.assessment-analytics-kpi::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:5px;
}
.assessment-analytics-kpi.overall::before { background:#1557a5; }
.assessment-analytics-kpi.highest::before { background:#169873; }
.assessment-analytics-kpi.lowest::before { background:#e53935; }
.assessment-analytics-kpi.band::before { background:#f28c00; }
.assessment-analytics-kpi span {
    display:block;
    color:#667085;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.45px;
}
.assessment-analytics-kpi strong {
    display:block;
    margin:7px 0 4px;
    color:#0b2d5c;
    font-size:28px;
    line-height:1.05;
}
.assessment-analytics-kpi small {
    color:#98a2b3;
    font-size:10px;
}
.assessment-ranking-panel { margin-bottom:18px; }
.assessment-ranking-list {
    max-height:440px;
    overflow:auto;
    padding:6px 18px 12px;
}
.assessment-ranking-row {
    display:grid;
    grid-template-columns:36px minmax(240px,1.15fr) minmax(260px,2fr) 120px;
    gap:14px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #eef1f5;
}
.assessment-ranking-row:last-child { border-bottom:0; }
.assessment-ranking-row:hover .assessment-ranking-program strong { color:#1557a5; }
.assessment-ranking-rank {
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#f2f4f7;
    color:#475467;
    font-size:10px;
    font-weight:900;
}
.assessment-ranking-program strong {
    display:block;
    color:#0b2d5c;
    font-size:12px;
}
.assessment-ranking-program span {
    display:block;
    color:#344054;
    margin-top:2px;
    font-size:11px;
    line-height:1.35;
}
.assessment-ranking-program small {
    display:block;
    margin-top:3px;
    color:#98a2b3;
    font-size:9px;
}
.assessment-ranking-track {
    height:14px;
    border-radius:999px;
    overflow:hidden;
    background:#edf1f6;
}
.assessment-ranking-fill {
    height:100%;
    border-radius:999px;
}
.assessment-ranking-fill.b1,.assessment-overall-fill.b1 { background:#e53935; }
.assessment-ranking-fill.b2,.assessment-overall-fill.b2 { background:#f0b429; }
.assessment-ranking-fill.b3,.assessment-overall-fill.b3 { background:#f47b31; }
.assessment-ranking-fill.b4,.assessment-overall-fill.b4 { background:#0d99aa; }
.assessment-ranking-fill.b5,.assessment-overall-fill.b5 { background:#2f9d65; }
.assessment-ranking-value {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}
.assessment-ranking-value > strong {
    color:#071f42;
    font-size:14px;
    font-variant-numeric:tabular-nums;
}
.assessment-overall-cell { min-width:105px; }
.assessment-overall-track {
    width:92px;
    height:6px;
    margin:7px auto 0;
    border-radius:999px;
    overflow:hidden;
    background:#edf1f6;
}
.assessment-overall-fill {
    height:100%;
    border-radius:999px;
}
@media(max-width:1100px){
    .assessment-analytics-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .assessment-ranking-row { grid-template-columns:32px minmax(200px,1fr) minmax(200px,1.4fr) 105px; }
}
@media(max-width:760px){
    .assessment-analytics-kpi-grid { grid-template-columns:1fr; }
    .assessment-ranking-row { grid-template-columns:30px 1fr; }
    .assessment-ranking-track,.assessment-ranking-value { grid-column:2; }
    .assessment-ranking-value { justify-content:flex-start; }
}


/* ==========================================================
   v2.5.11 - PROGRAM INDEX ANALYTICS
   ========================================================== */
.program-summary-grid { margin-bottom:14px; }
.program-ikp-card::after,
.program-band-card::after {
    content:"";
    position:absolute;
    width:76px;
    height:76px;
    border-radius:50%;
    right:-24px;
    top:-28px;
    opacity:.08;
    background:#1557a5;
}
.program-band-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}
.program-band-card {
    display:block;
    min-height:132px;
    border-radius:18px;
    padding:16px 17px;
    color:#fff;
    box-shadow:var(--shadow-sm);
    transition:transform .15s ease, box-shadow .15s ease;
}
.program-band-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.program-band-card span {
    display:block;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.program-band-card strong {
    display:block;
    margin:4px 0 2px;
    font-size:30px;
    line-height:1;
}
.program-band-card small { display:block; font-size:10px; opacity:.9; }
.program-band-card em {
    display:block;
    margin-top:12px;
    font-size:10px;
    font-style:normal;
    font-weight:800;
    line-height:1.35;
}
.program-band-card.b1 { background:linear-gradient(135deg,#e53935,#bd2925); }
.program-band-card.b2 { background:linear-gradient(135deg,#f0b429,#d6970b); color:#3c2900; }
.program-band-card.b3 { background:linear-gradient(135deg,#f47b31,#db641d); }
.program-band-card.b4 { background:linear-gradient(135deg,#0d99aa,#087684); }
.program-band-card.b5 { background:linear-gradient(135deg,#2f9d65,#217a4d); }
.program-band-overview { margin-bottom:18px; }
.program-band-chart {
    padding:18px 22px 22px;
    display:grid;
    gap:14px;
}
.program-band-chart-row {
    display:grid;
    grid-template-columns:105px 1fr 70px;
    gap:14px;
    align-items:center;
}
.program-band-chart-label strong { display:block; color:#0b2d5c; font-size:12px; }
.program-band-chart-label span { display:block; margin-top:2px; color:#98a2b3; font-size:9px; }
.program-band-chart-track {
    height:14px;
    background:#edf1f6;
    border-radius:999px;
    overflow:hidden;
}
.program-band-chart-fill { height:100%; border-radius:999px; }
.program-band-chart-fill.b1 { background:#e53935; }
.program-band-chart-fill.b2 { background:#f0b429; }
.program-band-chart-fill.b3 { background:#f47b31; }
.program-band-chart-fill.b4 { background:#0d99aa; }
.program-band-chart-fill.b5 { background:#2f9d65; }
.program-band-chart-value { text-align:right; color:#0b2d5c; font-size:12px; font-weight:900; }
@media(max-width:1100px){
    .program-band-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px){
    .program-band-grid { grid-template-columns:1fr; }
    .program-band-chart-row { grid-template-columns:80px 1fr 55px; }
}


/* ==========================================================
   v2.5.12 - ANALITIK BAND FILTER UI
   ========================================================== */
.band-filter-panel {
    margin-bottom:18px;
    padding:18px 20px;
    background:#fff;
    border:1px solid #e4e8ef;
    border-radius:18px;
    box-shadow:var(--shadow-sm);
}
.band-filter-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px;
    padding-bottom:14px;
    border-bottom:1px solid #edf0f4;
}
.band-filter-kicker {
    display:block;
    color:#f28c00;
    font-size:10px;
    font-weight:900;
    letter-spacing:.7px;
    margin-bottom:3px;
}
.band-filter-head h3 {
    margin:0;
    color:var(--ikp-navy);
    font-size:17px;
}
.band-filter-head p {
    margin:3px 0 0;
    color:#98a2b3;
    font-size:11px;
}
.band-filter-scope {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
    max-width:52%;
}
.band-filter-scope span {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 9px;
    border-radius:999px;
    background:#f5f7fa;
    border:1px solid #e4e7ec;
    color:#475467;
    font-size:10px;
    font-weight:800;
}
.band-filter-grid {
    display:grid;
    grid-template-columns:minmax(230px,1.25fr) minmax(200px,1fr) minmax(150px,.65fr) auto;
    gap:12px;
    align-items:end;
}
.band-filter-field label {
    display:block;
    margin-bottom:6px;
    color:#667085;
    font-size:10px;
    font-weight:900;
    letter-spacing:.35px;
    text-transform:uppercase;
}
.band-filter-field .form-control {
    width:100%;
    min-height:42px;
    height:42px;
    padding:8px 11px;
    border-radius:10px;
    font-size:13px;
}
.band-filter-actions {
    display:flex;
    gap:8px;
    align-items:center;
    white-space:nowrap;
}
.band-filter-actions .btn {
    min-height:42px;
    padding:8px 15px;
}
@media(max-width:1050px){
    .band-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .band-filter-actions { grid-column:1 / -1; }
}
@media(max-width:700px){
    .band-filter-head { flex-direction:column; }
    .band-filter-scope { justify-content:flex-start; max-width:none; }
    .band-filter-grid { grid-template-columns:1fr; }
    .band-filter-actions { grid-column:auto; }
}


/* ==========================================================
   v2.5.13 - WEAK CRITERIA INTERACTIVE DRILL-DOWN
   ========================================================== */
.weak-filter-panel {
    background:#fff;
    border:1px solid var(--ikp-border);
    border-radius:18px;
    padding:16px 18px;
    margin-bottom:16px;
    box-shadow:var(--shadow-sm);
}
.weak-filter-form {
    display:grid;
    grid-template-columns:1fr 1fr 1fr auto;
    gap:12px;
    align-items:end;
}
.weak-filter-actions { display:flex; gap:8px; align-items:center; }
.weak-scope-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid #edf0f4; }
.weak-scope-chips span { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:#f2f4f7; color:#475467; font-size:10px; font-weight:800; }
.weak-scope-chips span.active { background:#fff4e3; color:#9a5a00; border:1px solid #f8d69e; }
.weak-active-filter { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 16px; margin-bottom:16px; border-radius:14px; background:#fff8e8; border:1px solid #f7dfaa; }
.weak-active-filter strong { display:block; color:#7a5200; }
.weak-active-filter span { display:block; margin-top:2px; color:#8a6a20; font-size:11px; }
.weak-click-card { text-decoration:none; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.weak-click-card:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(16,24,40,.12); }
.weak-focus-card.selected { box-shadow:0 0 0 3px rgba(21,87,165,.10), var(--shadow-sm); }
.weak-focus-card.ppa.selected { border-color:#f28c00; }
.weak-focus-card.hepa.selected { border-color:#169873; }
.weak-focus-card.pkpa.selected { border-color:#1557a5; }
.weak-performance-row-link { text-decoration:none; padding:8px 10px; margin:-8px -10px; border-radius:10px; transition:background .15s ease; }
.weak-performance-row-link:hover { background:#f8fafc; }
.weak-donut-legend > a { display:grid; grid-template-columns:12px 1fr auto; gap:9px; align-items:center; padding:9px 8px; border-radius:10px; text-decoration:none; border-bottom:1px solid #edf0f4; }
.weak-donut-legend > a:hover { background:#f8fafc; }
.weak-donut-legend > a:last-child { border-bottom:0; }
.weak-donut-legend > a i { width:10px; height:10px; border-radius:3px; display:block; }
.weak-donut-legend > a i.ppa { background:#f28c00; }
.weak-donut-legend > a i.hepa { background:#169873; }
.weak-donut-legend > a i.pkpa { background:#1557a5; }
.weak-donut-legend > a span { color:#667085; font-size:11px; }
.weak-donut-legend > a strong { color:var(--ikp-navy); font-size:12px; }
.weak-table-subtitle { display:block; margin-top:3px; color:#98a2b3; font-size:10px; font-weight:600; }
.weak-program-link { color:inherit; text-decoration:none; }
.weak-program-link:hover strong { color:#1557a5; text-decoration:underline; }
.weak-faculty-link { color:#1557a5; font-weight:800; text-decoration:none; }
.weak-faculty-link:hover { text-decoration:underline; }
.weak-score-link { color:var(--ikp-navy); font-weight:800; text-decoration:none; }
.weak-score-link:hover { color:#1557a5; text-decoration:underline; }
.weak-score-link.strong { font-weight:900; }
a.weak-table-badge { text-decoration:none; }
a.weak-table-badge:hover { filter:brightness(.96); box-shadow:0 3px 10px rgba(16,24,40,.08); }
@media(max-width:1100px){
    .weak-filter-form { grid-template-columns:1fr 1fr; }
    .weak-filter-actions { grid-column:1 / -1; }
}
@media(max-width:680px){
    .weak-filter-form { grid-template-columns:1fr; }
    .weak-filter-actions { grid-column:auto; }
    .weak-active-filter { align-items:flex-start; flex-direction:column; }
}


/* ==========================================================
   v2.5.14 - REPORT IKP REDESIGN
   ========================================================== */
.report-toolbar {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}
.report-filter-form {
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
}
.report-filter-form .filter-field { min-width:220px; }

.ikp-report-cover {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    padding:26px 28px;
    border-radius:22px;
    background:
        radial-gradient(circle at 88% 18%, rgba(242,140,0,.2), transparent 26%),
        linear-gradient(135deg,#071f42 0%,#0b2d5c 58%,#1557a5 100%);
    color:#fff;
    box-shadow:var(--shadow-md);
    margin-bottom:18px;
}
.ikp-report-brand {
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
}
.ikp-report-logo {
    width:78px;
    height:78px;
    border-radius:18px;
    background:#fff;
    display:grid;
    place-items:center;
    padding:10px;
    flex:0 0 78px;
}
.ikp-report-logo img {
    max-width:100%;
    max-height:100%;
    display:block;
}
.report-kicker,
.report-section-kicker {
    display:block;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.2px;
    text-transform:uppercase;
}
.report-kicker { color:#ffc76a; }
.ikp-report-cover h1 {
    margin:5px 0 0;
    font-size:28px;
    line-height:1.1;
}
.ikp-report-cover h2 {
    margin:4px 0 0;
    font-size:15px;
    font-weight:600;
    color:rgba(255,255,255,.78);
}
.ikp-report-context {
    min-width:430px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.ikp-report-context > div {
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.13);
}
.ikp-report-context span {
    display:block;
    font-size:10px;
    color:rgba(255,255,255,.68);
    text-transform:uppercase;
    letter-spacing:.5px;
}
.ikp-report-context strong {
    display:block;
    margin-top:3px;
    font-size:14px;
}

.report-kpi-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:16px;
}
.report-kpi-card {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:17px;
    padding:17px 18px;
    box-shadow:var(--shadow-sm);
}
.report-kpi-card > span {
    display:block;
    color:#667085;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.7px;
}
.report-kpi-card > strong {
    display:block;
    color:var(--ikp-navy);
    font-size:26px;
    line-height:1.1;
    margin:5px 0 4px;
}
.report-kpi-card small {
    display:block;
    color:#8490a4;
    line-height:1.35;
}
.report-kpi-highlight {
    background:linear-gradient(180deg,#fff8ed,#fff);
    border-color:#f7d6a2;
}

.report-summary-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:16px;
}
.report-summary-card {
    background:#fff;
    border:1px solid #e5e7eb;
    border-top:4px solid #f28c00;
    border-radius:16px;
    padding:15px 17px;
}
.report-summary-card.green { border-top-color:#169873; }
.report-summary-card.blue { border-top-color:#1557a5; }
.report-summary-title,
.report-summary-value {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}
.report-summary-title span {
    font-weight:900;
    color:var(--ikp-navy);
}
.report-summary-title strong { font-size:12px; color:#667085; }
.report-summary-value { margin-top:10px; }
.report-summary-value strong { font-size:18px; color:#172033; }
.report-summary-value span { font-size:11px; color:#667085; }
.report-summary-card > small { color:#8490a4; }
.report-progress {
    height:7px;
    background:#edf0f5;
    border-radius:999px;
    overflow:hidden;
    margin:11px 0 8px;
}
.report-progress i {
    display:block;
    height:100%;
    background:#f28c00;
    border-radius:999px;
}
.report-summary-card.green .report-progress i { background:#169873; }
.report-summary-card.blue .report-progress i { background:#1557a5; }

.report-section {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    box-shadow:var(--shadow-sm);
    padding:18px;
    margin-bottom:16px;
}
.report-section-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:14px;
}
.report-section-kicker { color:#8490a4; }
.report-section-head h3,
.report-table-head h3 {
    margin:3px 0 0;
    color:var(--ikp-navy);
}
.report-section-head > small { color:#667085; }
.report-band-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
}
.report-band-card {
    padding:14px 12px;
    border-radius:14px;
    text-align:center;
    color:#fff;
    min-height:104px;
}
.report-band-card strong { display:block; font-size:25px; line-height:1; }
.report-band-card span { display:block; font-weight:900; margin-top:7px; }
.report-band-card small { display:block; margin-top:4px; line-height:1.25; opacity:.9; }
.report-band-card.b1 { background:#e53935; }
.report-band-card.b2 { background:#eeb028; color:#3a2a00; }
.report-band-card.b3 { background:#f47b31; }
.report-band-card.b4 { background:#0d99aa; }
.report-band-card.b5 { background:#2f9d65; }

.report-table-panel { margin-top:0; }
.report-table-head { align-items:center; }
.report-table-head > div { min-width:0; }
.report-table-wrap { overflow:visible; }
.report-table { font-size:11px; }
.report-table th { font-size:9px; }
.report-table td { vertical-align:middle; }
.report-program-cell strong {
    display:block;
    color:var(--ikp-navy);
    font-size:11px;
}
.report-program-cell span {
    display:block;
    margin-top:2px;
    line-height:1.3;
}
.report-band-pill,
.report-status-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:5px 8px;
    font-size:9px;
    font-weight:900;
    white-space:nowrap;
}
.report-band-pill.b1 { background:#fff0f1; color:#b42318; }
.report-band-pill.b2 { background:#fff6dd; color:#865700; }
.report-band-pill.b3 { background:#fff1e6; color:#b04c00; }
.report-band-pill.b4 { background:#e8f8fb; color:#087783; }
.report-band-pill.b5 { background:#e9f9f0; color:#18794e; }
.report-status-pill { background:#f2f4f7; color:#475467; }
.report-signoff {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:16px;
}
.report-signoff > div {
    padding:14px 16px;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
}
.report-signoff span { display:block; font-size:10px; color:#8490a4; text-transform:uppercase; letter-spacing:.5px; }
.report-signoff strong { display:block; margin-top:4px; color:var(--ikp-navy); }

@media(max-width:1100px){
    .ikp-report-cover { align-items:flex-start; flex-direction:column; }
    .ikp-report-context { min-width:0; width:100%; }
    .report-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .report-band-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:700px){
    .report-toolbar,.report-filter-form { align-items:stretch; flex-direction:column; }
    .report-filter-form .filter-field { min-width:0; width:100%; }
    .ikp-report-brand { align-items:flex-start; }
    .ikp-report-cover h1 { font-size:22px; }
    .ikp-report-context,.report-kpi-grid,.report-summary-grid,.report-band-grid,.report-signoff { grid-template-columns:1fr; }
}

@media print {
    @page {
        size: A4 landscape;
        margin: 9mm 9mm 10mm;
    }
    html,body {
        background:#fff !important;
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
    }
    .app-sidebar,
    .app-topbar,
    .app-footer,
    .no-print {
        display:none !important;
    }
    .app-shell,
    .app-main,
    .app-content {
        display:block !important;
        margin:0 !important;
        width:100% !important;
        min-height:0 !important;
        padding:0 !important;
        background:#fff !important;
    }
    .ikp-report-cover {
        box-shadow:none !important;
        border-radius:10px;
        padding:14px 16px;
        margin-bottom:8px;
        break-inside:avoid;
    }
    .ikp-report-logo { width:54px; height:54px; flex-basis:54px; border-radius:10px; padding:6px; }
    .ikp-report-cover h1 { font-size:19px; }
    .ikp-report-cover h2 { font-size:10px; }
    .ikp-report-context { min-width:360px; gap:6px; }
    .ikp-report-context > div { padding:7px 9px; border-radius:8px; }
    .ikp-report-context span { font-size:7px; }
    .ikp-report-context strong { font-size:9px; }
    .report-kpi-grid { gap:7px; margin-bottom:7px; }
    .report-kpi-card { box-shadow:none; border-radius:8px; padding:9px 10px; break-inside:avoid; }
    .report-kpi-card > span { font-size:7px; }
    .report-kpi-card > strong { font-size:17px; margin:3px 0 2px; }
    .report-kpi-card small { font-size:7px; }
    .report-summary-grid { gap:7px; margin-bottom:7px; }
    .report-summary-card { border-radius:8px; padding:8px 9px; break-inside:avoid; }
    .report-summary-title span { font-size:9px; }
    .report-summary-title strong,.report-summary-value span,.report-summary-card > small { font-size:7px; }
    .report-summary-value { margin-top:5px; }
    .report-summary-value strong { font-size:11px; }
    .report-progress { height:4px; margin:5px 0 4px; }
    .report-section { box-shadow:none; border-radius:8px; padding:9px; margin-bottom:7px; break-inside:avoid; }
    .report-section-head { margin-bottom:6px; }
    .report-section-head h3,.report-table-head h3 { font-size:11px; }
    .report-section-kicker { font-size:6px; }
    .report-band-grid { gap:5px; }
    .report-band-card { min-height:58px; border-radius:7px; padding:7px 5px; }
    .report-band-card strong { font-size:15px; }
    .report-band-card span { margin-top:3px; font-size:8px; }
    .report-band-card small { margin-top:2px; font-size:6px; }

    /* Penting: jadual panjang mesti boleh pecah merentas halaman */
    .panel.report-table-panel {
        break-inside:auto !important;
        page-break-inside:auto !important;
        box-shadow:none !important;
        border-radius:0 !important;
        border:0 !important;
        margin:0 !important;
        overflow:visible !important;
    }
    .report-table-head {
        padding:7px 0 !important;
        border-bottom:1px solid #d0d5dd;
    }
    .report-table-wrap {
        overflow:visible !important;
    }
    .report-table {
        width:100% !important;
        table-layout:fixed;
        border-collapse:collapse;
        font-size:7.5px !important;
    }
    .report-table thead {
        display:table-header-group;
    }
    .report-table tfoot {
        display:table-footer-group;
    }
    .report-table tr {
        break-inside:avoid;
        page-break-inside:avoid;
    }
    .report-table th {
        background:#eef2f7 !important;
        font-size:6.5px !important;
        padding:5px 4px !important;
        border:1px solid #d9dee7;
    }
    .report-table td {
        padding:5px 4px !important;
        border:1px solid #e2e6ec;
        line-height:1.25;
    }
    .report-table th:nth-child(1),.report-table td:nth-child(1){width:4%;}
    .report-table th:nth-child(2),.report-table td:nth-child(2){width:34%;}
    .report-table th:nth-child(3),.report-table td:nth-child(3){width:9%;}
    .report-table th:nth-child(4),.report-table td:nth-child(4),
    .report-table th:nth-child(5),.report-table td:nth-child(5),
    .report-table th:nth-child(6),.report-table td:nth-child(6){width:8%;}
    .report-table th:nth-child(7),.report-table td:nth-child(7){width:8%;}
    .report-table th:nth-child(8),.report-table td:nth-child(8){width:7%;}
    .report-table th:nth-child(9),.report-table td:nth-child(9){width:8%;}
    .report-program-cell strong { font-size:7.5px; }
    .report-program-cell span { font-size:7px; }
    .report-band-pill,.report-status-pill { font-size:6px; padding:3px 5px; }
    .report-signoff { gap:7px; margin-top:7px; break-inside:avoid; }
    .report-signoff > div { padding:8px 9px; border-radius:7px; }
    .report-signoff span { font-size:6px; }
    .report-signoff strong { font-size:8px; }
}