/* =====================================================================
   SUPERCARE — Gaya antarmuka
   Palet warna mengacu pada SKPL Bab 7.2
   ===================================================================== */
:root{
  --sc-primary:#0B3D5C;     /* Navy  */
  --sc-primary-2:#10547c;
  --sc-accent:#0E7C86;      /* Teal  */
  --sc-accent-2:#13a0ad;
  --sc-bg:#F7FAFB;
  --sc-surface:#ffffff;
  --sc-border:#e3ebef;
  --sc-text:#1f2d35;
  --sc-muted:#6b7c86;
  --sc-green:#2E9E5B;
  --sc-blue:#2F80ED;
  --sc-orange:#E2A53A;
  --sc-red:#D64545;
  --sc-sidebar-w:260px;
}

*{box-sizing:border-box}
body{
  margin:0;font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--sc-bg);color:var(--sc-text);font-size:15px;line-height:1.55;
}
a{color:var(--sc-accent);text-decoration:none}
a:hover{color:var(--sc-primary)}

/* ---------- Layout ---------- */
.sc-layout{display:flex;min-height:100vh}
.sc-sidebar{
  width:var(--sc-sidebar-w);flex:0 0 var(--sc-sidebar-w);
  background:linear-gradient(180deg,var(--sc-primary) 0%,#082c43 100%);
  color:#dce8ef;position:fixed;top:0;bottom:0;left:0;z-index:1040;
  display:flex;flex-direction:column;transition:transform .25s ease;
}
.sc-main{margin-left:var(--sc-sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column}
.sc-content{padding:24px 28px 60px;flex:1}

/* ---------- Sidebar brand ---------- */
.sc-brand{display:flex;align-items:center;gap:12px;padding:20px 20px 16px}
.sc-brand img{height:42px;width:42px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.sc-brand .t{line-height:1.1}
.sc-brand .t b{font-size:18px;letter-spacing:.5px;color:#fff;display:block}
.sc-brand .t span{font-size:11px;color:#9cc0d4}

.sc-nav{padding:8px 12px;overflow-y:auto;flex:1}
.sc-nav .sec{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#6f96ac;padding:16px 12px 6px;font-weight:600}
.sc-nav a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  color:#cfe0ea;font-weight:500;margin-bottom:2px;transition:.15s;
}
.sc-nav a .ic{width:20px;text-align:center;opacity:.9}
.sc-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sc-nav a.active{background:var(--sc-accent);color:#fff;box-shadow:0 4px 14px rgba(14,124,134,.35)}

.sc-sidebar-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#8fb1c4}

/* ---------- Topbar ---------- */
.sc-topbar{
  background:var(--sc-surface);border-bottom:1px solid var(--sc-border);
  padding:12px 24px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:1030;
}
.sc-topbar h1{font-size:18px;margin:0;font-weight:700;color:var(--sc-primary)}
.sc-topbar .sub{font-size:12px;color:var(--sc-muted)}
.sc-hamburger{display:none;background:none;border:none;font-size:22px;color:var(--sc-primary);cursor:pointer}
.sc-userbox{margin-left:auto;display:flex;align-items:center;gap:12px}
.sc-avatar{
  width:40px;height:40px;border-radius:50%;background:var(--sc-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
}
.sc-userbox .nm{line-height:1.1;text-align:right}
.sc-userbox .nm b{font-size:14px}
.sc-userbox .nm span{font-size:11px;color:var(--sc-muted)}

/* ---------- Cards ---------- */
.card{border:1px solid var(--sc-border);border-radius:16px;box-shadow:0 6px 22px rgba(11,61,92,.05)}
.card .card-header{background:transparent;border-bottom:1px solid var(--sc-border);font-weight:600;padding:16px 20px}
.card .card-body{padding:20px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h2{font-size:24px;font-weight:700;color:var(--sc-primary);margin:0}
.page-head p{margin:4px 0 0;color:var(--sc-muted);font-size:14px}

/* ---------- Stat cards ---------- */
.stat{display:flex;align-items:center;gap:16px;padding:20px;border-radius:16px;background:var(--sc-surface);border:1px solid var(--sc-border);box-shadow:0 6px 22px rgba(11,61,92,.05);height:100%}
.stat .ic{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;flex:0 0 auto}
.stat .v{font-size:28px;font-weight:800;line-height:1;color:var(--sc-primary)}
.stat .l{font-size:13px;color:var(--sc-muted);margin-top:4px}
.ic-navy{background:linear-gradient(135deg,#0B3D5C,#10547c)}
.ic-teal{background:linear-gradient(135deg,#0E7C86,#13a0ad)}
.ic-green{background:linear-gradient(135deg,#2E9E5B,#38c06f)}
.ic-orange{background:linear-gradient(135deg,#E2A53A,#f0bd5c)}

/* ---------- Badge kategori ---------- */
.badge{font-weight:600;padding:.4em .7em;border-radius:8px;font-size:12px}
.badge-sangat-baik{background:rgba(46,158,91,.14);color:#1c7a40;border:1px solid rgba(46,158,91,.3)}
.badge-baik{background:rgba(47,128,237,.14);color:#1c5fc0;border:1px solid rgba(47,128,237,.3)}
.badge-cukup{background:rgba(226,165,58,.16);color:#9a6e10;border:1px solid rgba(226,165,58,.35)}
.badge-kurang{background:rgba(214,69,69,.14);color:#a82a2a;border:1px solid rgba(214,69,69,.3)}

/* ---------- Buttons ---------- */
.btn-primary{background:var(--sc-primary);border-color:var(--sc-primary)}
.btn-primary:hover,.btn-primary:focus{background:var(--sc-accent);border-color:var(--sc-accent)}
.btn-accent{background:var(--sc-accent);border-color:var(--sc-accent);color:#fff}
.btn-accent:hover{background:var(--sc-accent-2);border-color:var(--sc-accent-2);color:#fff}
.btn-outline-primary{color:var(--sc-primary);border-color:var(--sc-primary)}
.btn-outline-primary:hover{background:var(--sc-primary);border-color:var(--sc-primary)}

/* ---------- Tables ---------- */
.table{vertical-align:middle}
.table>thead th{background:#eef4f7;color:var(--sc-primary);font-size:12px;text-transform:uppercase;letter-spacing:.4px;border-bottom:none;font-weight:700}
.table>tbody td{border-color:#eef2f4}
.table-hover>tbody>tr:hover{background:#f4f9fb}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 600px at 10% -10%,#0E7C86 0%,transparent 50%),
             radial-gradient(1200px 600px at 110% 110%,#0B3D5C 0%,transparent 55%),
             linear-gradient(135deg,#0B3D5C,#082c43)}
.login-card{width:100%;max-width:420px;background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden}
.login-card .head{text-align:center;padding:34px 30px 10px}
.login-card .head img{height:84px}
.login-card .head h1{font-size:24px;color:var(--sc-primary);margin:14px 0 2px;font-weight:800;letter-spacing:1px}
.login-card .head p{color:var(--sc-muted);font-size:13px;margin:0}
.login-card .body{padding:14px 30px 32px}
.login-card .form-control{padding:.7rem .9rem}
.login-card .input-group-text{background:#f1f6f8;border-right:none;color:var(--sc-accent)}

/* ---------- Login split (brand + agenda + form) ---------- */
.login-shell{width:100%;max-width:900px;display:flex;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.4)}
.login-aside{flex:1;min-width:0;padding:40px 34px;color:#eaf3f8;
  background:linear-gradient(160deg,#0E7C86 0%,#0B3D5C 70%);display:flex;flex-direction:column}
.login-aside .brand{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.login-aside .brand img{height:60px;width:60px;background:#fff;border-radius:14px;padding:6px}
.login-aside .brand b{font-size:26px;letter-spacing:1px;color:#fff;display:block;line-height:1}
.login-aside .brand span{font-size:12px;color:#bcdbe7}
.login-aside .instansi{font-size:13px;color:#cfe6ef;margin:4px 0 18px}
.login-aside .agenda{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:14px 16px;margin-top:auto}
.login-aside .agenda h6{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#bcdbe7;margin:0 0 10px;font-weight:700}
.login-aside .agenda-item{display:flex;gap:12px;padding:8px 0;border-top:1px solid rgba(255,255,255,.10)}
.login-aside .agenda-item:first-of-type{border-top:none}
.login-aside .agenda-date{flex:0 0 46px;text-align:center;background:rgba(255,255,255,.14);border-radius:10px;padding:4px 0;line-height:1}
.login-aside .agenda-date b{display:block;font-size:18px;color:#fff}
.login-aside .agenda-date span{font-size:10px;text-transform:uppercase;color:#bcdbe7}
.login-aside .agenda-info{min-width:0}
.login-aside .agenda-info .t{font-weight:600;color:#fff;font-size:14px}
.login-aside .agenda-info .m{font-size:12px;color:#cfe6ef}
.login-aside .agenda-empty{font-size:13px;color:#cfe6ef;text-align:center;padding:8px 0}
.login-main{flex:0 0 380px;max-width:380px;padding:44px 36px;display:flex;flex-direction:column;justify-content:center;background:#fff}
.login-main h2{font-size:22px;font-weight:800;color:var(--sc-primary);margin:0 0 2px}
.login-main p.sub{color:var(--sc-muted);font-size:13px;margin:0 0 20px}
.login-main .form-control{padding:.7rem .9rem}
.login-main .input-group-text{background:#f1f6f8;border-right:none;color:var(--sc-accent)}
@media (max-width:768px){
  .login-shell{flex-direction:column;max-width:440px}
  .login-main{flex:auto;max-width:none;padding:30px 26px}
  .login-aside{padding:28px 26px}
  .login-aside .agenda{margin-top:18px}
}

/* ---------- Dokumen cetak (lampiran) ---------- */
.print-toolbar{background:#0B3D5C;color:#fff;padding:10px 16px;display:flex;gap:10px;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.print-toolbar .btn{font-weight:600}
.doc{max-width:800px;margin:24px auto;background:#fff;padding:42px 48px;box-shadow:0 6px 30px rgba(0,0,0,.12);color:#000;font-family:'Times New Roman',Georgia,serif}
.doc .kop{text-align:center;margin-bottom:18px}
.doc .kop img{height:64px;margin-bottom:8px}
.doc .kop h1{font-size:15px;font-weight:bold;margin:0;text-transform:uppercase;letter-spacing:.3px}
.doc .kop h2{font-size:13px;font-weight:bold;margin:2px 0 0;text-transform:uppercase}
.doc .kop .sub{font-size:12px;margin-top:2px}
.doc .ident{width:100%;font-size:13px;margin:14px 0}
.doc .ident td{padding:2px 4px;vertical-align:top}
.doc .petunjuk{font-size:12px;font-style:italic;margin:8px 0 12px}
.doc table.grid{width:100%;border-collapse:collapse;font-size:12.5px}
.doc table.grid th,.doc table.grid td{border:1px solid #000;padding:5px 7px;vertical-align:top}
.doc table.grid thead th{text-align:center;font-weight:bold;background:#f0f0f0}
.doc table.grid td.no{text-align:center;width:42px;white-space:nowrap}
.doc table.grid td.yt{text-align:center;width:60px}
.doc table.grid tr.aspek td{font-weight:bold;background:#f7f7f7}
.doc table.grid tr.subaspek td{font-weight:bold}
.doc table.grid tr.total td{font-weight:bold;text-align:center}
.doc .legend{display:flex;justify-content:space-between;gap:24px;font-size:12px;margin:14px 0}
.doc .legend .nilai{margin-top:6px;font-size:13px}
.doc .catatan{font-size:13px;margin:10px 0}
.doc .catatan .line{border-bottom:1px dotted #000;min-height:20px;padding:2px 0}
.doc .ttd{display:flex;justify-content:space-between;text-align:center;font-size:13px;margin-top:26px}
.doc .ttd .col{flex:1}
.doc .ttd .space{height:60px}
.doc .ttd .mengetahui{text-align:center;font-size:13px;margin-top:20px}
.doc .badge-cell{text-align:center}
@media print{
  @page{size:A4;margin:14mm}
  .print-toolbar{display:none!important}
  body{background:#fff!important}
  .doc{box-shadow:none;margin:0;max-width:none;padding:0}
}

/* ---------- Instrumen form ---------- */
.aspek-head{background:#eef4f7;border-left:4px solid var(--sc-accent);padding:10px 16px;font-weight:700;color:var(--sc-primary);border-radius:8px;margin:18px 0 6px}
.aspek-sub{font-weight:600;color:var(--sc-accent);padding:8px 16px;margin:8px 0 2px}
.item-row{border:1px solid var(--sc-border);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:#fff;display:flex;gap:14px;align-items:flex-start}
.item-row .no{font-weight:700;color:var(--sc-muted);min-width:26px}
.item-row .q{flex:1}
.item-choice{display:flex;gap:8px;flex:0 0 auto}
.item-choice .form-check{margin:0}
.choice-ya .form-check-input:checked{background-color:var(--sc-green);border-color:var(--sc-green)}
.choice-tidak .form-check-input:checked{background-color:var(--sc-red);border-color:var(--sc-red)}
.choice-pill{border:1.5px solid var(--sc-border);border-radius:10px;padding:6px 14px;cursor:pointer;font-weight:600;font-size:13px;user-select:none;transition:.12s}
.choice-pill input{margin-right:6px}
.choice-pill.ya.on{background:rgba(46,158,91,.12);border-color:var(--sc-green);color:#1c7a40}
.choice-pill.tidak.on{background:rgba(214,69,69,.12);border-color:var(--sc-red);color:#a82a2a}

/* ---------- Score ring ---------- */
.score-ring{width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--ring-color) calc(var(--p)*1%),#eef2f4 0);}
.score-ring .inner{width:108px;height:108px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-ring .inner b{font-size:30px;color:var(--sc-primary);line-height:1}
.score-ring .inner span{font-size:11px;color:var(--sc-muted)}

.empty{text-align:center;padding:50px 20px;color:var(--sc-muted)}
.empty .ic{font-size:46px;opacity:.4}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .sc-sidebar{transform:translateX(-100%)}
  .sc-sidebar.show{transform:translateX(0)}
  .sc-main{margin-left:0}
  .sc-hamburger{display:block}
  .sc-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1035}
  .sc-backdrop.show{display:block}
}
@media print{
  .sc-sidebar,.sc-topbar,.no-print{display:none!important}
  .sc-main{margin-left:0}
  .sc-content{padding:0}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ccc}
  /* Memastikan kontainer utama tidak memotong sembarangan */
  .doc {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Proteksi tambahan untuk tabel skor dan catatan agar tidak terpotong di tengah baris */
  table.grid tr, .catatan {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}