/* =========================================================
   RPS — Rapi. Praktis. Sistematis.
   Design tokens: navy akademik + aksen emas, tipografi
   Poppins (heading) & Inter (body).
   ========================================================= */

:root{
  --navy-900:#12253D;
  --navy-800:#1E3A5F;
  --navy-700:#2A4C77;
  --teal-600:#2E86AB;
  --teal-500:#3B9BC4;
  --gold-500:#C9A227;
  --gold-100:#FBF3D9;
  --success-600:#2E7D32;
  --success-100:#E6F4E7;
  --danger-600:#C62828;
  --danger-100:#FBE9E7;
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --line:#E3E8EF;
  --ink-900:#1F2937;
  --ink-600:#5B6472;
  --ink-400:#8A93A2;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-card:0 10px 30px rgba(18,37,61,.07);
  --shadow-pop:0 20px 45px rgba(18,37,61,.18);
  --font-head:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-padding-top:calc(64px + var(--safe-top));}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3{font-family:var(--font-head);color:var(--navy-900);margin:0;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--gold-100);color:var(--navy-900);}
:focus-visible{outline:2.5px solid var(--teal-600);outline-offset:2px;border-radius:6px;}

.only-mobile{display:inline-flex;}
.only-desktop{display:none;}

/* ===================== SPLASH ===================== */
.splash{
  position:fixed;inset:0;background:var(--navy-800);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;transition:opacity .5s ease, visibility .5s ease;
}
.splash.hide{opacity:0;visibility:hidden;}
.splash-mark{
  font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.28em;
  color:var(--gold-500);border:1.5px solid rgba(201,162,39,.5);
  padding:14px 22px;border-radius:12px;
}

/* ===================== TOAST ===================== */
.toast{
  position:fixed;left:50%;bottom:calc(90px + var(--safe-bottom));
  transform:translateX(-50%) translateY(20px);
  background:var(--navy-900);color:#fff;
  padding:13px 20px;border-radius:var(--radius-md);
  font-size:14px;font-weight:500;box-shadow:var(--shadow-pop);
  z-index:6000;opacity:0;visibility:hidden;
  transition:opacity .25s ease, transform .25s ease;
  max-width:88vw;text-align:center;
}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.toast.toast-success{background:var(--success-600);}
.toast.toast-error{background:var(--danger-600);}

/* ===================== TOPBAR ===================== */
.topbar{
  position:sticky;top:0;z-index:500;
  background:var(--navy-800);
  padding-top:var(--safe-top);
  box-shadow:0 2px 14px rgba(18,37,61,.12);
}
.topbar-inner{
  height:58px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;max-width:1320px;margin:0 auto;
}
.brand{display:flex;align-items:baseline;gap:10px;}
.brand-mark{font-family:var(--font-head);font-weight:700;font-size:19px;color:#fff;letter-spacing:.04em;}
.brand-sub{font-size:12.5px;color:rgba(255,255,255,.65);}
.icon-btn{
  width:38px;height:38px;border-radius:10px;border:none;background:transparent;
  color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.icon-btn:hover{background:rgba(255,255,255,.12);}

/* ===================== SHELL / LAYOUT ===================== */
.shell{
  display:flex;max-width:1320px;margin:0 auto;min-height:calc(100vh - 58px - var(--safe-top));
}

/* Sidebar (desktop) / Drawer (mobile) */
.sidebar{
  width:250px;flex-shrink:0;background:var(--navy-900);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:-270px;bottom:0;z-index:900;
  padding:18px 12px;transition:left .28s ease;
  padding-top:calc(18px + var(--safe-top));
  padding-bottom:calc(18px + var(--safe-bottom));
}
.sidebar.open{left:0;box-shadow:20px 0 40px rgba(0,0,0,.25);}
.sidebar-brand{padding:6px 10px 22px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px;}
.sidebar-brand .brand-mark{color:#fff;font-size:22px;}
.sidebar-brand .brand-tagline{display:block;color:rgba(255,255,255,.55);font-size:12px;margin-top:6px;line-height:1.4;}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto;}
.nav-link{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-sm);
  color:rgba(255,255,255,.68);font-size:14.5px;font-weight:500;transition:background .15s ease,color .15s ease;
}
.nav-link svg{width:19px;height:19px;flex-shrink:0;}
.nav-link:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-link.active{background:var(--gold-500);color:var(--navy-900);font-weight:600;}
.sidebar-foot{padding:12px 10px 4px;border-top:1px solid rgba(255,255,255,.08);margin-top:10px;}
.sidebar-foot p{color:rgba(255,255,255,.4);font-size:11.5px;}

.drawer-overlay{
  position:fixed;inset:0;background:rgba(18,37,61,.5);z-index:800;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
.drawer-overlay.show{opacity:1;visibility:visible;}

.content{
  flex:1;min-width:0;padding:20px 16px calc(96px + var(--safe-bottom));
}

/* ===================== VIEW HEAD ===================== */
.view{display:none;animation:viewIn .28s ease;}
.view.active{display:block;}
@keyframes viewIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.view-head{
  display:flex;flex-direction:column;gap:14px;margin-bottom:20px;
}
.view-head h1{font-size:22px;font-weight:600;}
.view-desc{color:var(--ink-600);font-size:13.5px;margin-top:5px;}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--radius-sm);padding:12px 18px;
  font-size:14.5px;font-weight:600;transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--navy-800);color:#fff;box-shadow:0 8px 18px rgba(30,58,95,.28);}
.btn-primary:hover{background:var(--navy-700);}
.btn-primary:active{transform:scale(.98);}
.btn-block{width:100%;}
.btn-ghost{background:var(--bg);color:var(--ink-900);border:1px solid var(--line);}
.btn-ghost:hover{background:#eef1f5;}
.btn-danger{background:var(--danger-600);color:#fff;}
.btn-danger-outline{background:#fff;color:var(--danger-600);border:1.5px solid var(--danger-600);}
.btn-danger-outline:hover{background:var(--danger-100);}
.btn-wa{
  background:#25D366;color:#fff;
}
.btn-wa:hover{background:#1fbd5a;}
.btn-sm{padding:9px 14px;font-size:13px;}
.btn-icon-only{padding:9px;border-radius:10px;}

/* ===================== STAT GRID (Dashboard) ===================== */
.stat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px;
}
.stat-card{
  background:var(--surface);border-radius:var(--radius-lg);padding:18px 16px;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:6px;
  border-top:3px solid var(--navy-800);
}
.stat-teal{border-top-color:var(--teal-600);}
.stat-gold{border-top-color:var(--gold-500);}
.stat-plain{border-top-color:var(--line);}
.stat-label{font-size:12px;color:var(--ink-600);font-weight:600;}
.stat-value{font-family:var(--font-head);font-size:30px;font-weight:700;color:var(--navy-900);}
.stat-value-sm{font-size:15px;font-weight:600;line-height:1.35;}
.stat-note{font-size:11.5px;color:var(--ink-400);}

.stat-strip{display:flex;gap:10px;margin-bottom:18px;overflow-x:auto;padding-bottom:2px;}
.strip-pill{
  flex-shrink:0;background:var(--surface);border-radius:999px;padding:9px 16px;
  font-size:13px;font-weight:600;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:7px;
}
.strip-dot{width:8px;height:8px;border-radius:50%;}

/* ===================== PANELS ===================== */
.panel-grid{display:flex;flex-direction:column;gap:14px;}
.panel{
  background:var(--surface);border-radius:var(--radius-lg);padding:18px;
  box-shadow:var(--shadow-card);
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.panel-head h2{font-size:15.5px;font-weight:600;}
.panel-title{font-size:15.5px;font-weight:600;margin-bottom:14px;}
.link-more{color:var(--teal-600);font-size:13px;font-weight:600;}
.form-panel{margin-bottom:14px;}
.panel-danger{border:1px solid var(--danger-100);}

.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.quick-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  background:var(--bg);border-radius:var(--radius-md);padding:14px;
  font-size:13px;font-weight:600;color:var(--navy-800);
  border:1px solid var(--line);transition:background .15s ease;
}
.quick-btn:hover{background:var(--gold-100);}
.quick-btn svg{width:20px;height:20px;color:var(--teal-600);}

.mini-list{display:flex;flex-direction:column;gap:10px;}
.mini-item{
  border-left:3px solid var(--gold-500);background:var(--bg);
  border-radius:8px;padding:10px 12px;
}
.mini-item h4{font-size:13.5px;font-weight:600;margin:0 0 2px;color:var(--navy-900);}
.mini-item p{font-size:12.5px;color:var(--ink-600);}
.mini-empty{color:var(--ink-400);font-size:13px;padding:8px 2px;}

/* ===================== TOOLBAR / SEARCH / FIELD ===================== */
.toolbar{margin-bottom:16px;}
.search-box{
  display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px;
  box-shadow:var(--shadow-card);
}
.search-box svg{width:18px;height:18px;color:var(--ink-400);flex-shrink:0;}
.search-box input{border:none;outline:none;width:100%;font-size:14px;background:transparent;color:var(--ink-900);}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field:last-child{margin-bottom:0;}
.field label{font-size:13px;font-weight:600;color:var(--ink-900);}
.field input,.field select,.field textarea{
  border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 13px;font-size:14.5px;color:var(--ink-900);background:var(--surface);
  transition:border-color .15s ease, box-shadow .15s ease;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--teal-600);box-shadow:0 0 0 3px rgba(46,134,171,.15);outline:none;
}
.field textarea{resize:vertical;min-height:96px;}
.field-hint{font-size:11.5px;color:var(--ink-400);}
.field-error{font-size:12px;color:var(--danger-600);font-weight:500;display:none;}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger-600);}
.field.has-error .field-error{display:block;}
.field-inline{margin-bottom:0;}
.form-row{display:flex;flex-direction:column;gap:14px;}
.char-count{font-size:11.5px;color:var(--ink-400);text-align:right;}

/* ===================== CARD LIST (generic data cards) ===================== */
.card-list{display:flex;flex-direction:column;gap:12px;}
.data-card{
  background:var(--surface);border-radius:var(--radius-md);padding:15px 16px;
  box-shadow:var(--shadow-card);
}
.dc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px;}
.dc-title{font-size:15px;font-weight:600;color:var(--navy-900);}
.dc-sub{font-size:12.5px;color:var(--ink-600);margin-top:2px;}
.dc-meta{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;}
.chip{
  font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;
  background:var(--bg);color:var(--ink-600);border:1px solid var(--line);
}
.chip-navy{background:#EAF0F7;color:var(--navy-800);border-color:#D7E2EF;}
.chip-teal{background:#E7F3F8;color:var(--teal-600);border-color:#D3E8F0;}
.chip-success{background:var(--success-100);color:var(--success-600);border-color:#CFE9D1;}
.chip-danger{background:var(--danger-100);color:var(--danger-600);border-color:#F5CFCB;}
.chip-gold{background:var(--gold-100);color:#8a6c14;border-color:#F0E1AC;}
.dc-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}

.icon-action{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink-600);
  transition:background .15s ease,color .15s ease;flex-shrink:0;
}
.icon-action svg{width:16px;height:16px;}
.icon-action:hover{background:var(--bg);}
.icon-action.danger:hover{background:var(--danger-100);color:var(--danger-600);}
.icon-action.wa{color:#25D366;border-color:#bfe9cf;}
.icon-action.wa:hover{background:#e8f9ee;}

/* ===================== TABLE (Nilai) ===================== */
.table-wrap{background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow-x:auto;}
table{width:100%;border-collapse:collapse;min-width:520px;}
thead th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-400);padding:13px 14px;border-bottom:1px solid var(--line);font-weight:700;
}
tbody td{padding:13px 14px;font-size:13.5px;border-bottom:1px solid var(--line);color:var(--ink-900);}
tbody tr:last-child td{border-bottom:none;}
.td-actions{display:flex;gap:6px;}
.score-badge{font-weight:700;font-family:var(--font-head);}
.score-high{color:var(--success-600);}
.score-mid{color:var(--gold-500);}
.score-low{color:var(--danger-600);}

/* ===================== PRESENSI ===================== */
.presensi-list{display:flex;flex-direction:column;gap:10px;padding-bottom:8px;}
.presensi-item{
  background:var(--surface);border-radius:var(--radius-md);padding:13px 14px;
  box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.presensi-name{font-size:14.5px;font-weight:600;color:var(--navy-900);}
.presensi-options{display:flex;gap:6px;}
.p-opt{
  width:40px;height:36px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);
  font-size:12px;font-weight:700;color:var(--ink-600);transition:all .15s ease;
}
.p-opt.h.active{background:var(--success-600);border-color:var(--success-600);color:#fff;}
.p-opt.i.active{background:var(--teal-600);border-color:var(--teal-600);color:#fff;}
.p-opt.s.active{background:var(--gold-500);border-color:var(--gold-500);color:#fff;}
.p-opt.a.active{background:var(--danger-600);border-color:var(--danger-600);color:#fff;}

.sticky-footer{
  position:fixed;left:0;right:0;bottom:calc(64px + var(--safe-bottom));
  background:var(--surface);border-top:1px solid var(--line);
  padding:12px 16px;box-shadow:0 -8px 24px rgba(18,37,61,.08);
  z-index:400;max-width:1320px;margin:0 auto;
}
.presensi-summary{display:flex;gap:12px;justify-content:center;margin-bottom:10px;font-size:12.5px;color:var(--ink-600);flex-wrap:wrap;}
.presensi-summary b{color:var(--navy-900);}

/* ===================== EMPTY STATE ===================== */
.empty-state{
  text-align:center;padding:52px 20px;background:var(--surface);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
}
.empty-icon{font-size:38px;margin-bottom:12px;}
.empty-state h3{font-size:16px;margin-bottom:6px;}
.empty-state p{color:var(--ink-600);font-size:13.5px;margin-bottom:18px;max-width:320px;margin-left:auto;margin-right:auto;}

/* ===================== MODAL ===================== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(18,37,61,.55);z-index:2000;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
.modal-overlay.show{opacity:1;visibility:visible;}
.modal{
  background:var(--surface);width:100%;max-width:520px;
  border-radius:22px 22px 0 0;
  max-height:88vh;display:flex;flex-direction:column;
  transform:translateY(30px);transition:transform .28s ease;
  padding-bottom:var(--safe-bottom);
}
.modal-overlay.show .modal{transform:translateY(0);}
.modal-sm{border-radius:20px;margin:16px;}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px 12px;border-bottom:1px solid var(--line);
}
.modal-head h3{font-size:17px;font-weight:600;}
.modal-head .icon-btn{color:var(--ink-600);}
.modal-head .icon-btn:hover{background:var(--bg);}
.modal-body{padding:18px;overflow-y:auto;}
.confirm-actions{display:flex;gap:10px;margin-top:18px;}
.confirm-actions .btn{flex:1;}

/* ===================== BOTTOM NAV ===================== */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:700;
  background:var(--surface);border-top:1px solid var(--line);
  display:flex;justify-content:space-around;align-items:center;
  padding:8px 6px calc(8px + var(--safe-bottom));
  box-shadow:0 -6px 20px rgba(18,37,61,.06);
}
.bn-link{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ink-400);font-size:10.5px;font-weight:600;padding:4px 8px;border-radius:10px;flex:1;
}
.bn-link svg{width:21px;height:21px;}
.bn-link.active{color:var(--navy-800);}
.bn-fab{position:relative;}
.bn-fab svg{
  background:var(--gold-500);color:var(--navy-900);border-radius:50%;padding:8px;width:36px;height:36px;
  margin-top:-18px;box-shadow:0 6px 16px rgba(201,162,39,.45);
}
.bn-fab.active svg{background:var(--navy-800);color:#fff;}

/* ===================== DESKTOP ===================== */
@media (min-width:960px){
  .only-mobile{display:none !important;}
  .only-desktop{display:flex;}
  .topbar{display:none;}
  .shell{min-height:100vh;}
  .sidebar{position:sticky;left:0;top:0;height:100vh;padding-top:18px;}
  .content{padding:32px 36px 40px;margin-left:250px;}
  .view-head{flex-direction:row;align-items:center;justify-content:space-between;}
  .view-head h1{font-size:26px;}
  .stat-grid{grid-template-columns:repeat(4,1fr);}
  .panel-grid{flex-direction:row;}
  .panel-grid .panel:first-child{flex:1.4;}
  .panel-grid .panel:last-child{flex:1;}
  .quick-actions{grid-template-columns:1fr 1fr;}
  .form-row{flex-direction:row;}
  .form-row .field{flex:1;}
  .sticky-footer{bottom:0;left:250px;}
  .modal-overlay{align-items:center;}
  .modal{border-radius:22px;margin:16px;}
}

@media (min-width:640px) and (max-width:959.98px){
  .stat-grid{grid-template-columns:repeat(4,1fr);}
  .content{padding:20px 28px 96px;}
}

/* Small phones */
@media (max-width:374px){
  .stat-value{font-size:26px;}
  .p-opt{width:36px;}
}