/* KUERIS - Premium UI Theme */
:root{
  --kr-primary:#4338ca;
  --kr-primary-dark:#312e81;
  --kr-primary-light:#eef2ff;
  --kr-accent:#0ea5a4;
  --kr-warning:#f59e0b;
  --kr-danger:#e11d48;
  --kr-success:#16a34a;
  --kr-bg:#f5f6fb;
  --kr-card:#ffffff;
  --kr-text:#1f2333;
  --kr-muted:#6b7280;
  --kr-border:#e6e8f0;
  --kr-radius:14px;
}
*{box-sizing:border-box;}
body{
  background:var(--kr-bg);
  color:var(--kr-text);
  font-family:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,sans-serif;
}
a{ text-decoration:none; }

.kr-shell{ display:flex; min-height:100vh; }
.kr-sidebar{
  width:260px; flex-shrink:0;
  background:linear-gradient(180deg,var(--kr-primary-dark),var(--kr-primary));
  color:#fff; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.kr-sidebar .brand{
  display:flex; align-items:center; gap:10px; padding:22px 20px; font-weight:700; font-size:20px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.kr-sidebar .brand small{ display:block; font-weight:400; font-size:11px; opacity:.75; }
.kr-sidebar .nav-section{ padding:14px 18px 4px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.6; }
.kr-sidebar a.nav-link{
  color:rgba(255,255,255,.88); padding:10px 20px; display:flex; align-items:center; gap:10px;
  font-size:14.5px; border-left:3px solid transparent; transition:.15s;
}
.kr-sidebar a.nav-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.kr-sidebar a.nav-link.active{ background:rgba(255,255,255,.14); border-left-color:var(--kr-accent); color:#fff; font-weight:600; }

.kr-main{ flex:1; min-width:0; }
.kr-topbar{
  background:#fff; border-bottom:1px solid var(--kr-border); padding:14px 26px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20;
}
.kr-topbar h1{ font-size:18px; margin:0; font-weight:700; }
.kr-content{ padding:26px; }

.kr-card{
  background:var(--kr-card); border:1px solid var(--kr-border); border-radius:var(--kr-radius);
  padding:20px; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.kr-stat{
  background:var(--kr-card); border:1px solid var(--kr-border); border-radius:var(--kr-radius);
  padding:18px 20px; display:flex; flex-direction:column; gap:6px;
}
.kr-stat .label{ font-size:12.5px; color:var(--kr-muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.kr-stat .value{ font-size:26px; font-weight:800; color:var(--kr-primary-dark); }
.kr-stat .icon{ width:38px;height:38px;border-radius:10px;background:var(--kr-primary-light);color:var(--kr-primary);
  display:flex; align-items:center; justify-content:center; font-size:18px; }

.badge-status-Draft{ background:#e5e7eb; color:#374151; }
.badge-status-Aktif{ background:#dcfce7; color:#15803d; }
.badge-status-Ditutup{ background:#fee2e2; color:#b91c1c; }
.badge-status-Arsip{ background:#f3e8ff; color:#7e22ce; }
.badge-status-Submitted{ background:#dcfce7; color:#15803d; }
.badge-status-Draft.resp{ background:#fef3c7; color:#92400e; }

.btn-kr-primary{
  background:var(--kr-primary); border-color:var(--kr-primary); color:#fff;
}
.btn-kr-primary:hover{ background:var(--kr-primary-dark); border-color:var(--kr-primary-dark); color:#fff; }
.btn-kr-outline{ border:1px solid var(--kr-primary); color:var(--kr-primary); background:#fff; }
.btn-kr-outline:hover{ background:var(--kr-primary-light); color:var(--kr-primary-dark); }

.table-kr thead th{ background:var(--kr-primary-light); color:var(--kr-primary-dark); font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; border-bottom:none; }
.table-kr td, .table-kr th{ vertical-align:middle; padding:10px 12px; }

.kr-login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at top left,#4338ca,#1e1b4b 60%);
  padding:20px;
}
.kr-login-card{ background:#fff; border-radius:18px; padding:38px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.kr-login-logo{ font-weight:800; font-size:26px; color:var(--kr-primary); text-align:center; margin-bottom:4px;}
.kr-login-sub{ text-align:center; color:var(--kr-muted); font-size:13.5px; margin-bottom:28px; }

.kr-respondent-wrap{ min-height:100vh; background:linear-gradient(180deg,#eef2ff,#f5f6fb 240px); padding:24px 14px; }
.kr-respondent-card{ max-width:720px; margin:0 auto; background:#fff; border-radius:18px; box-shadow:0 10px 40px rgba(30,27,75,.08); overflow:hidden; }
.kr-respondent-header{ background:linear-gradient(120deg,var(--kr-primary-dark),var(--kr-primary)); color:#fff; padding:28px 32px; }
.kr-respondent-body{ padding:30px 32px; }
.kr-progress-track{ height:8px; border-radius:6px; background:var(--kr-primary-light); overflow:hidden; }
.kr-progress-fill{ height:100%; background:var(--kr-accent); transition:width .25s ease; }

.kr-item-card{ border:1px solid var(--kr-border); border-radius:12px; padding:18px 20px; margin-bottom:16px; background:#fbfbfe;}
.kr-item-card .item-no{ display:inline-block; background:var(--kr-primary); color:#fff; font-size:12px; font-weight:700; padding:2px 10px; border-radius:20px; margin-bottom:8px;}

.section-title{ font-weight:700; color:var(--kr-primary-dark); margin:26px 0 12px; font-size:15px; text-transform:uppercase; letter-spacing:.03em;}

@media(max-width:900px){
  .kr-sidebar{ position:fixed; left:-280px; z-index:50; transition:.2s; box-shadow:0 0 40px rgba(0,0,0,.3);}
  .kr-sidebar.open{ left:0; }
  .kr-content{ padding:16px; }
}