:root{
  --teal-900:#083f3b; --teal-800:#0b5148; --teal-700:#0e6157; --teal-600:#12756a;
  --teal-100:#e2f2ef; --teal-50:#f0f9f7;
  --ink:#123a44; --ink-soft:#4b6b74; --bg:#eef2f5; --card:#fff; --line:#e3e9ee;
  --red:#d63a2f; --amber:#b97a10; --green:#1d7d4f; --blue:#1f5fa8;
  --radius:14px; --shadow:0 4px 16px rgba(16,50,60,.08);
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}
button{font-family:inherit;cursor:pointer}
a{text-decoration:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:.95rem}

/* ===== Header ===== */
header{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,var(--teal-800),var(--teal-700) 55%,var(--teal-600));color:#fff;display:flex;align-items:center;gap:16px;padding:14px 24px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.brand{display:flex;align-items:center;background:#fff;border-radius:12px;padding:6px 14px;text-decoration:none}
.brand-img{height:40px;width:auto;display:block;object-fit:contain}
.head-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.head-title{font-weight:600;font-size:1rem}
.pill{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:8px 18px;font-size:.9rem}
.btn-keluar{background:var(--red);color:#fff;border:none;border-radius:10px;padding:9px 20px;font-weight:600;display:inline-block}
.btn-keluar:hover{filter:brightness(1.08)}

/* ===== Layout ===== */
.layout{display:flex;min-height:calc(100vh - 68px)}
nav{width:280px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);padding:26px 0 40px;overflow-y:auto;height:calc(100vh - 68px);position:sticky;top:68px}
.nav-label{font-size:.72rem;font-weight:700;letter-spacing:.18em;color:#8aa0a8;padding:0 26px;margin-bottom:14px}
.nav-item{display:flex;align-items:center;gap:14px;width:100%;padding:13px 26px;color:var(--ink);font-size:.98rem;font-weight:500;border-left:4px solid transparent;border-radius:0 12px 12px 0;transition:background .15s}
.nav-item .ic{font-size:1.15rem;width:26px;text-align:center}
.nav-item:hover{background:var(--teal-50)}
.nav-item.active{background:var(--teal-100);border-left-color:var(--teal-700);color:var(--teal-800);font-weight:700}
main{flex:1;padding:34px 40px 60px;min-width:0}

/* ===== Page head ===== */
.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:8px}
.page-head .ic{font-size:1.9rem;background:var(--teal-100);border-radius:12px;width:52px;height:52px;display:grid;place-items:center}
.page-head h1{font-size:1.75rem;color:var(--teal-900)}
.page-sub{color:var(--ink-soft);margin:4px 0 26px;font-size:1rem}

/* ===== Statistik ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin-bottom:28px}
.stat{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px}
.stat b{font-size:2.3rem;color:var(--teal-900);display:block;line-height:1.1}
.stat b.warn{color:var(--red)}
.stat span{color:var(--ink-soft);font-size:.95rem}

/* ===== Panel & menu cepat ===== */
.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px;margin-bottom:26px}
.panel h2{font-size:1.25rem;color:var(--teal-900);margin-bottom:20px}
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.quick a{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 14px;display:flex;flex-direction:column;align-items:center;gap:14px;font-weight:700;color:var(--teal-900);font-size:1rem;transition:.15s;text-align:center}
.quick a .ic{font-size:2rem}
.quick a:hover{border-color:var(--teal-600);box-shadow:var(--shadow);transform:translateY(-2px)}

/* ===== Toolbar & tabel ===== */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 8px 6px 14px}
.search input{border:none;outline:none;flex:1;background:none;padding:6px 0}
.search button{border:none;background:var(--teal-100);color:var(--teal-800);border-radius:8px;padding:8px 14px;font-weight:600}
.btn-primary{background:var(--teal-700);color:#fff;border:none;border-radius:10px;padding:11px 20px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.btn-primary:hover{background:var(--teal-800)}
.btn-danger{background:#c0392b;color:#fff;border:none;border-radius:10px;padding:11px 20px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.btn-danger:hover{background:#a93226}
.btn-ghost{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 16px;color:var(--ink-soft)}
.readonly-note{display:inline-flex;align-items:center;gap:8px;background:#fdf1dc;color:var(--amber);border-radius:10px;padding:10px 16px;font-size:.88rem;font-weight:600}

.table-wrap{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
th{background:var(--teal-50);color:var(--teal-900);text-align:left;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f7fbfa}
.empty{padding:46px;text-align:center;color:var(--ink-soft)}
.empty .ic{font-size:2.2rem;display:block;margin-bottom:10px}

.badge{display:inline-block;border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:700;white-space:nowrap}
.b-green{background:#e3f4ea;color:var(--green)}
.b-amber{background:#fdf1dc;color:var(--amber)}
.b-red{background:#fde5e3;color:var(--red)}
.b-blue{background:#e5eefb;color:var(--blue)}
.b-gray{background:#eef1f4;color:#5b6b73}

.row-actions{display:flex;gap:8px}
.icon-btn{border:1px solid var(--line);background:#fff;border-radius:8px;width:34px;height:34px;display:grid;place-items:center;font-size:.95rem}
.icon-btn:hover{border-color:var(--teal-600)}
.icon-btn.del:hover{border-color:var(--red);background:#fde5e3}

/* ===== Modal ===== */
.modal-back{position:fixed;inset:0;background:rgba(8,40,45,.45);display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;z-index:100;overflow:auto}
.modal-back.open{display:flex}
.modal{background:#fff;border-radius:16px;width:640px;max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.modal-head{background:linear-gradient(90deg,var(--teal-800),var(--teal-600));color:#fff;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.modal-head h3{font-size:1.1rem}
.modal-head button{background:none;border:none;color:#fff;font-size:1.3rem}
.modal-body{padding:24px;display:grid;gap:16px;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.85rem;font-weight:600;color:var(--teal-900)}
.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;background:#fff}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal-600);box-shadow:0 0 0 3px rgba(18,117,106,.15)}
.modal-foot{padding:18px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}

/* ===== Flash / toast ===== */
.flash{background:var(--teal-100);color:var(--teal-800);border:1px solid #bfe3db;border-radius:12px;padding:13px 20px;margin-bottom:20px;font-weight:600}

/* ===== RPS workflow: file chip, catatan reviu, timeline ===== */
.file-chip{display:inline-flex;align-items:center;gap:6px;background:var(--teal-50);color:var(--teal-800);border-radius:8px;padding:6px 12px;font-size:.82rem;font-weight:600;border:1px solid var(--line);white-space:nowrap}
.file-chip:hover{border-color:var(--teal-600)}
.note-box{background:#fdf1dc;border:1px solid #f3ddb0;border-radius:10px;padding:12px 14px;font-size:.88rem;color:#7a5410;line-height:1.5}
.timeline{display:flex;flex-direction:column;gap:16px;max-height:60vh;overflow-y:auto}
.timeline-item{border-left:3px solid var(--teal-600);padding-left:14px}
.timeline-item .t-head{font-weight:700;color:var(--teal-900);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.95rem}
.timeline-item .t-meta{font-size:.78rem;color:var(--ink-soft)}
.timeline-item .t-note{margin-top:4px;font-size:.88rem;color:var(--ink)}

/* ===== Login ===== */
.login-wrap{
  min-height:100vh;display:grid;place-items:center;padding:20px;
  background:url('../assets/login_bg.jpg') center center/cover no-repeat;
  position:relative
}
.login-wrap::before{
  content:'';position:absolute;inset:0;
  background:rgba(10,50,40,.58);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)
}
.login-card{
  position:relative;z-index:1;
  background:rgba(255,255,255,.97);
  border-radius:20px;box-shadow:0 28px 80px rgba(0,0,0,.45);
  width:420px;max-width:100%;overflow:hidden
}
.login-head{
  background:linear-gradient(160deg,#e8f5f1 0%,#f4faf8 100%);
  padding:28px 30px 20px;text-align:center;
  border-bottom:1px solid var(--line)
}
.login-logo{height:56px;width:auto;display:block;margin:0 auto}
.login-body{padding:28px 30px;display:grid;gap:16px}
.login-body .btn-primary{justify-content:center;padding:13px}
.login-err{background:#fde5e3;color:var(--red);border-radius:10px;padding:11px 16px;font-size:.88rem;font-weight:600}
.login-hint{font-size:.8rem;color:var(--ink-soft);text-align:center;line-height:1.6}

#menuToggle{display:none;background:none;border:none;color:#fff;font-size:1.5rem}
@media (max-width:960px){
  #menuToggle{display:block}
  .head-title{display:none}
  nav, nav#sidebar{
    position:fixed!important;
    left:0!important;
    top:68px!important;
    bottom:0!important;
    height:calc(100vh - 68px)!important;
    width:280px!important;
    padding:26px 0 40px!important;
    transform:translateX(-110%)!important;
    transition:transform .3s ease!important;
    z-index:60!important;
    box-shadow:4px 0 20px rgba(0,0,0,.25)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:#fff!important;
  }
  nav.open, nav#sidebar.open{
    transform:translateX(0)!important;
  }
  main{padding:22px 16px 60px}
  .modal-body{grid-template-columns:1fr}
  .brand-img{height:32px}
}