/* Hello Summer — Soft Playful Professional */
@font-face{font-family:"Nunito";font-weight:400;font-style:normal;font-display:swap;src:url("../vendor/fonts/nunito-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:600;font-style:normal;font-display:swap;src:url("../vendor/fonts/nunito-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-style:normal;font-display:swap;src:url("../vendor/fonts/nunito-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-style:normal;font-display:swap;src:url("../vendor/fonts/nunito-latin-800-normal.woff2") format("woff2")}

:root{
  --teal:#2f6b6b; --teal-d:#235252; --coral:#e8735a; --sun:#fbc02d;
  --blue:#dbeafe; --blue-d:#3b82c4; --mint:#d9f3e8; --mint-d:#2e9c74; --cream:#fff8ec; --peach:#ffe3d6; --peach-d:#d9694a; --lav:#ece6fb; --lav-d:#7a5fc4;
  --ink:#27403f; --muted:#7a8b8a; --line:#eee6d8; --radius:18px;
  --bs-body-font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-body-color:var(--ink); --bs-primary:var(--teal); --bs-primary-rgb:47,107,107; --bs-link-color:var(--teal); --bs-link-hover-color:var(--teal-d);
}
body{background:var(--cream);color:var(--ink);font-size:.95rem}
h1,h2,h3,h4,h5,h6{font-weight:800;color:var(--teal)}
a{text-decoration:none}

/* dev bar */
.devbar{background:#fff3b0;color:#6b5600;padding:.35rem 1rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:.82rem;border-bottom:1px solid #f1dc72;position:relative;z-index:1100}

/* shell */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:260px;flex:0 0 260px;background:#fff;border-right:1px solid var(--line);padding:1rem .8rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;gap:.7rem;align-items:center;color:var(--teal);font-weight:800;line-height:1.1;padding:.3rem .4rem 1rem}
.brand img{width:46px;height:46px;border-radius:50%;box-shadow:0 2px 8px #0002}
.brand small{display:block;font-weight:600;color:var(--muted);font-size:.72rem;margin-top:3px}
.nav-group{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:1rem .7rem .3rem}
.nav-link-x{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;border-radius:14px;color:var(--ink);font-weight:600;margin-bottom:2px;transition:.15s}
.nav-link-x i{font-size:1.1rem;color:var(--teal);width:1.3rem;text-align:center}
.nav-link-x:hover{background:var(--mint)}
.nav-link-x.active{background:var(--teal);color:#fff;box-shadow:0 4px 12px #2f6b6b44}
.nav-link-x.active i{color:var(--sun)}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:.6rem;padding:.8rem 1.4rem;background:rgba(255,248,236,.9);backdrop-filter:blur(6px);position:sticky;top:0;z-index:50}
.page-title{font-size:1.35rem;margin:0}
.page-body{padding:.5rem 1.4rem 1.4rem;flex:1}
.foot{padding:1rem 1.4rem;color:var(--muted);font-size:.78rem;text-align:center}
.btn-icon{font-size:1.5rem;line-height:1;padding:.1rem .5rem;color:var(--teal)}
.user-chip{background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--teal);font-weight:700}

/* cards */
.card-soft{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 18px #5f4b2a0d}
.card-soft>.card-header{background:transparent;border-bottom:1px solid var(--line);font-weight:800;color:var(--teal);padding:.9rem 1.1rem;border-radius:var(--radius) var(--radius) 0 0}
.card-soft>.card-body{padding:1.1rem}
.stat{border-radius:var(--radius);padding:1rem 1.1rem;display:flex;gap:.9rem;align-items:center;height:100%;border:1px solid #0000000a}
.stat .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;background:#ffffffb0;flex:0 0 46px}
.stat .lbl{font-size:.78rem;color:#00000099;font-weight:700}
.stat .val{font-size:1.35rem;font-weight:800;line-height:1.15;color:var(--ink)}
.stat .sub{font-size:.72rem;color:#0000008a}
.stat.blue{background:var(--blue)} .stat.blue .ic{color:var(--blue-d)}
.stat.mint{background:var(--mint)} .stat.mint .ic{color:var(--mint-d)}
.stat.peach{background:var(--peach)} .stat.peach .ic{color:var(--peach-d)}
.stat.lav{background:var(--lav)} .stat.lav .ic{color:var(--lav-d)}
.stat.sun{background:#fff1c2} .stat.sun .ic{color:#c48a00}
.stat.white{background:#fff;border-color:var(--line)}

/* buttons / forms */
.btn{border-radius:12px;font-weight:700}
.btn-brand{background:var(--teal);border-color:var(--teal);color:#fff}
.btn-brand:hover,.btn-brand:focus{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.btn-coral{background:var(--coral);border-color:var(--coral);color:#fff}
.btn-coral:hover{background:#d4614a;color:#fff}
.btn-outline-brand{border-color:var(--teal);color:var(--teal)}
.btn-outline-brand:hover{background:var(--teal);color:#fff}
.form-control,.form-select{border-radius:12px;border-color:#e4dccb;padding:.5rem .75rem}
.form-control:focus,.form-select:focus{border-color:var(--teal);box-shadow:0 0 0 .2rem #2f6b6b22}
.form-label{font-weight:700;font-size:.85rem;margin-bottom:.25rem;color:#3f5756}
.form-text{font-size:.75rem}
.money{font-variant-numeric:tabular-nums}

/* tables */
.table{--bs-table-bg:transparent;margin-bottom:0}
.table thead th{background:var(--cream);color:var(--teal);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--line);white-space:nowrap}
.table td{vertical-align:middle;border-color:var(--line)}
.table-hover tbody tr:hover{background:#fffaf0}
.table .num,.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table tfoot td,.table tfoot th{font-weight:800;background:var(--cream);border-top:2px solid var(--line)}
.badge-soft{border-radius:999px;font-weight:700;padding:.4em .75em}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--lav);display:inline-grid;place-items:center;color:var(--lav-d);font-weight:800;flex:0 0 38px}
.avatar-lg{width:96px;height:96px;flex-basis:96px;font-size:2rem}
.empty-state{text-align:center;padding:2.2rem 1rem;color:var(--muted)}
.empty-state .emoji{font-size:2.2rem}
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}
.toolbar .grow{flex:1 1 220px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:.35rem .8rem}
.kv dt{color:var(--muted);font-weight:700;font-size:.82rem}
.kv dd{margin:0}
.nav-tabs-soft{border:0;gap:.3rem;flex-wrap:wrap}
.nav-tabs-soft .nav-link{border:1px solid var(--line);border-radius:999px;color:var(--teal);font-weight:700;background:#fff;padding:.35rem .9rem}
.nav-tabs-soft .nav-link.active{background:var(--teal);color:#fff;border-color:var(--teal)}

/* indikator kesehatan */
.ind{border-radius:var(--radius);padding:1rem;background:#fff;border:1px solid var(--line);height:100%;border-left:6px solid var(--line)}
.ind.s-sehat{border-left-color:var(--mint-d)} .ind.s-perhatian{border-left-color:#f0a500} .ind.s-tidak{border-left-color:#d9534f} .ind.s-na{border-left-color:#b9c2c1}
.ind .v{font-size:1.45rem;font-weight:800;color:var(--ink)}
.ind .nm{font-weight:800;color:var(--teal);font-size:.9rem}
.ind .tg{font-size:.72rem;color:var(--muted)}
.ind .ex{font-size:.82rem;margin-top:.4rem}
.ind .mn{font-size:.74rem;color:var(--muted);margin-top:.3rem}
.overall{border-radius:22px;padding:1.3rem 1.5rem;color:#fff}
.overall.sehat{background:linear-gradient(135deg,#2e9c74,#5cc2a0)} .overall.perhatian{background:linear-gradient(135deg,#e69a00,#f5c04a)} .overall.tidak{background:linear-gradient(135deg,#d9534f,#ef8a72)} .overall.na{background:linear-gradient(135deg,#8da3a2,#b4c6c5)}

/* laporan */
.report-head{text-align:center;margin-bottom:1rem}
.lh{display:flex;gap:.9rem;align-items:center;justify-content:center;text-align:left}
.lh img{width:62px;height:62px;border-radius:50%}
.lh-name{font-size:1.2rem;font-weight:800;color:var(--teal)}
.lh-sub{font-size:.78rem;color:var(--muted)}
.rep-table td,.rep-table th{padding:.35rem .6rem}
.rep-table .grp td{font-weight:800;background:var(--cream);color:var(--teal)}
.rep-table .sub td{font-weight:800;border-top:1px solid #cfc6b3}
.rep-table .tot td{font-weight:800;border-top:2px solid var(--ink);background:#fffaf0}
.rep-table .ind1{padding-left:1.6rem}
.check-ok{color:var(--mint-d);font-weight:800}
.check-bad{color:#d9534f;font-weight:800}

/* print docs */
.print-body{background:#f3efe6}
.print-toolbar{max-width:820px;margin:1rem auto;display:flex;gap:.5rem}
.paper{max-width:820px;margin:0 auto 2rem;background:#fff;padding:2rem 2.2rem;border-radius:14px;box-shadow:0 6px 24px #0001}
.paper .doc-title{font-size:1.6rem;font-weight:800;color:var(--coral);letter-spacing:.06em}
.stamp{display:inline-block;border:3px solid var(--mint-d);color:var(--mint-d);font-weight:800;padding:.1rem .8rem;border-radius:10px;transform:rotate(-6deg);font-size:1.2rem}
.stamp.unpaid{border-color:#d9534f;color:#d9534f}
.stamp.partial{border-color:#f0a500;color:#c48a00}

.sidebar-backdrop{display:none}
@media (max-width:991.98px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1200;transform:translateX(-105%);transition:.25s;box-shadow:0 0 30px #0004}
  body.nav-open .sidebar{transform:none}
  body.nav-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:#0006;z-index:1150}
  .page-body{padding:.4rem .8rem 1rem} .topbar{padding:.7rem .8rem}
  .kv{grid-template-columns:1fr} .kv dt{margin-top:.4rem}
  .paper{padding:1.2rem}
}
@media (max-width:575.98px){ .stat .val{font-size:1.15rem} .page-title{font-size:1.15rem} }

@media print{
  body,.print-body{background:#fff!important}
  .sidebar,.topbar,.foot,.devbar,.d-print-none{display:none!important}
  .content,.page-body{padding:0!important;margin:0!important}
  .app-shell{display:block}
  .card-soft{box-shadow:none;border:0}
  .paper{box-shadow:none;margin:0;max-width:none;padding:0}
  a{color:inherit}
  .table thead th{background:#f3f3f3!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}