:root{--navy:#17365d;--navy2:#244b73;--teal:#0d8074;--teal2:#dff5f1;--gold:#c9962e;--bg:#f4f7fb;--panel:#fff;--ink:#172033;--muted:#68758a;--line:#dfe6ef;--good:#198754;--warn:#d99800;--bad:#c44536;--blue:#2b6cb0;--shadow:0 10px 30px rgba(23,54,93,.08)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}.app-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--navy),#102a4b);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;padding:0 6px 26px}.brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),#29a598);font-weight:800}.brand small{display:block;color:#b8c8db;margin-top:4px}.sidebar nav{display:grid;gap:6px}.nav-item{border:0;background:transparent;color:#cad8e8;text-align:left;padding:12px 14px;border-radius:12px;cursor:pointer;display:flex;gap:10px}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.11);color:#fff}.sidebar-foot{position:absolute;bottom:22px;left:22px;font-size:12px;color:#cbd6e4}.dot{width:8px;height:8px;border-radius:50%;background:#62d39f;display:inline-block;margin-right:6px}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);padding:0 26px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}.topbar h1{font-size:20px;margin:0}.topbar p{margin:4px 0 0;color:var(--muted);font-size:13px}.top-actions{display:flex;gap:16px;align-items:center}.uat-role{font-size:11px;color:var(--muted);display:grid;gap:3px}.uat-role select{border:1px solid var(--line);border-radius:8px;padding:6px 28px 6px 8px;background:#fff}.user-chip{display:flex;gap:9px;align-items:center}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--teal2);color:var(--teal);font-weight:800}.user-chip small{display:block;color:var(--muted);margin-top:2px}.content{padding:26px;max-width:1600px;margin:auto}.view{display:none}.view.active{display:block}.hero{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;border-radius:20px;padding:28px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.05);right:-70px;top:-110px}.hero h2{margin:6px 0;font-size:27px;max-width:760px}.hero p{margin:0;color:#dbe6f1;max-width:760px;line-height:1.5}.eyebrow{font-size:11px;letter-spacing:1.5px;color:#91e1d6;font-weight:800}.btn{border:1px solid transparent;border-radius:10px;padding:10px 15px;cursor:pointer;font-weight:700}.btn.primary{background:var(--teal);color:#fff}.btn.primary:hover{filter:brightness(.95)}.btn.ghost{background:#fff;border-color:var(--line);color:var(--navy)}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.kpi small{color:var(--muted)}.kpi strong{font-size:28px;display:block;margin:5px 0}.kpi .trend{font-size:12px;color:var(--teal)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel-head.wrap{align-items:flex-end;gap:12px;flex-wrap:wrap}.panel h3{margin:0;font-size:17px}.panel p{color:var(--muted);margin:4px 0 0}.legend{display:flex;gap:12px;font-size:11px;color:var(--muted)}.legend .s{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.excellent{background:#168a55}.good{background:#3b82c4}.medium{background:#d99a00}.low{background:#c95448}.bar-list{display:grid;gap:10px}.bar-row{display:grid;grid-template-columns:170px 1fr 60px;gap:12px;align-items:center;font-size:13px}.bar-track{height:10px;background:#edf1f6;border-radius:9px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,var(--teal),#50b9ad);border-radius:9px}.toolbar{display:flex;gap:8px;flex-wrap:wrap}.input{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 10px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.data-table{border-collapse:collapse;width:100%;min-width:980px;font-size:13px}.data-table th{background:#edf3f8;color:var(--navy);padding:11px 10px;text-align:left;position:sticky;top:0;white-space:nowrap;cursor:pointer}.data-table td{padding:10px;border-top:1px solid var(--line);vertical-align:middle}.data-table tbody tr:hover{background:#f8fbfd}.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.status-CEMERLANG{background:#dff3e8;color:#126b42}.status-BAIK{background:#e1effb;color:#245d8f}.status-SEDERHANA{background:#fff1cc;color:#8d6500}.status-MEMUASKAN,.status-LEMAH{background:#fde4df;color:#96392e}.pagination{display:flex;justify-content:space-between;align-items:center;padding-top:14px;font-size:12px;color:var(--muted);gap:10px;flex-wrap:wrap}.pager{display:flex;gap:5px;align-items:center}.pager button{border:1px solid var(--line);background:#fff;min-width:30px;height:30px;border-radius:7px;cursor:pointer}.pager button.active{background:var(--navy);color:#fff}.page-size select{border:1px solid var(--line);padding:6px;border-radius:7px}.assessment-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.assessment-head h2{margin:8px 0 2px}.assessment-head p{margin:0;color:var(--muted)}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.4px}.badge.blue{background:#e4eef9;color:#255e91}.badge.green{background:#e0f3e8;color:#147045}.score-orb{background:var(--navy);color:#fff;border-radius:16px;padding:12px 18px;text-align:center;min-width:120px}.score-orb small,.score-orb span{display:block;color:#cddceb;font-size:11px}.score-orb strong{font-size:23px}.stepper{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border:1px solid var(--line);border-radius:15px;padding:8px;margin-bottom:12px}.stepper button{border:0;background:transparent;padding:10px;border-radius:10px;color:var(--muted);cursor:pointer}.stepper b{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;background:#edf1f6;margin-right:6px}.stepper button.active{background:#edf8f6;color:var(--teal);font-weight:800}.stepper button.active b{background:var(--teal);color:#fff}.progress-track{height:7px;background:#e6ebf2;border-radius:8px;overflow:hidden}.progress-track>div{height:100%;width:0;background:linear-gradient(90deg,var(--teal),#47b7a7);transition:.25s}.progress-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:6px 2px 16px}.step-panel{display:none}.step-panel.active{display:block}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.profile-grid>div{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:14px}.profile-grid label{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.confirm{display:flex;gap:8px;align-items:center;margin-top:18px;padding:12px;background:#f6faf9;border-radius:10px}.item-card{background:#fff;border:1px solid var(--line);border-radius:15px;margin-bottom:12px;overflow:hidden;box-shadow:0 5px 18px rgba(23,54,93,.04)}.item-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;background:#fbfcfe}.item-code{display:inline-flex;min-width:48px;height:28px;align-items:center;justify-content:center;border-radius:8px;background:#e6f5f2;color:var(--teal);font-size:11px;font-weight:900;margin-right:8px}.item-title{font-weight:800}.item-body{padding:16px;border-top:1px solid var(--line)}.score-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.score-option{border:1px solid var(--line);border-radius:11px;padding:10px;cursor:pointer;min-height:112px}.score-option input{margin-right:5px}.score-option strong{font-size:13px}.score-option p{font-size:11px;line-height:1.45;margin-top:7px}.score-option:has(input:checked){border:2px solid var(--teal);background:#f1faf8}.comment-row{margin-top:12px}.comment-row textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;min-height:70px;resize:vertical}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.summary-grid>div{background:#f8fafc;padding:15px;border-radius:12px;border:1px solid var(--line)}.summary-grid small{display:block;color:var(--muted)}.summary-grid strong{font-size:20px}.alert{margin-top:14px;border-radius:11px;padding:12px;background:#fff6dc;color:#7f5a00}.alert.ok{background:#e7f6ed;color:#176844}.center{text-align:center;padding:36px}.success-icon{width:62px;height:62px;border-radius:50%;background:#dff3e8;color:#147045;display:grid;place-items:center;font-size:30px;font-weight:900;margin:0 auto 12px}.wizard-actions{display:flex;justify-content:space-between;margin-top:12px}.report-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.report-cards article{border:1px solid var(--line);border-radius:15px;padding:20px}.report-icon{width:48px;height:48px;border-radius:12px;background:#e7f1f8;color:var(--navy);display:grid;place-items:center;font-weight:900}.toast{position:fixed;right:22px;bottom:22px;background:#172033;color:#fff;padding:11px 14px;border-radius:10px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none;z-index:100}.toast.show{opacity:1;transform:translateY(0)}.mobile-only{display:none}.icon-btn{border:0;background:transparent;font-size:22px}
@media(max-width:1000px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:50;left:-260px;transition:.25s;width:250px}.sidebar.open{left:0}.mobile-only{display:block}.kpi-grid{grid-template-columns:repeat(2,1fr)}.profile-grid,.summary-grid{grid-template-columns:repeat(2,1fr)}.score-options{grid-template-columns:repeat(2,1fr)}.topbar{padding:0 14px}.content{padding:16px}.user-chip{display:none}.hero{align-items:flex-start;gap:18px;flex-direction:column}.stepper span{display:none}}
@media(max-width:600px){.kpi-grid,.profile-grid,.summary-grid,.report-cards{grid-template-columns:1fr}.score-options{grid-template-columns:1fr}.top-actions{gap:5px}.uat-role{display:none}.bar-row{grid-template-columns:110px 1fr 45px}.assessment-head{align-items:flex-start}.score-orb{min-width:96px}.legend{display:none}}
@media print{.sidebar,.topbar,.wizard-actions,.toolbar,.pagination,.btn,.stepper,.progress-track,.progress-meta{display:none!important}.app-shell{display:block}.content{padding:0}.view{display:none!important}#view-reports{display:block!important}.panel{box-shadow:none;border:0}.report-cards{display:none}body:after{content:"Laporan RPI dijana melalui Modul RPI, SPK HUB Johor";display:block;font-size:10px;color:#666;margin-top:20px}}

/* UAT V1.0.1 — mobile sidebar close behaviour */
.sidebar-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  z-index:61;
}
.sidebar-backdrop{display:none}
@media(max-width:1000px){
  .sidebar{box-shadow:12px 0 30px rgba(9,31,58,.22)}
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(11,28,49,.38);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility .2s ease;
    z-index:40;
  }
  .sidebar-backdrop.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  body.sidebar-open{overflow:hidden}
}