:root{
  --navy:#0b2a4a; --navy-2:#12385f; --navy-3:#1b4a7a; --teal:#0d9488; --teal-2:#14b8a6; --teal-d:#0f766e;
  --bg:#f3f6fa; --line:#e3e9f1; --sidebar-w:264px; --header-h:60px;
}
body{background:var(--bg);color:#1f2d3d;font-size:.94rem}
.text-navy{color:var(--navy)!important}
.btn-teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn-teal:hover,.btn-teal:focus{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.btn-outline-navy{border-color:var(--navy);color:var(--navy)}
.btn-outline-navy:hover{background:var(--navy);color:#fff}
.btn-icon{border:0;background:transparent;padding:.25rem .5rem}
.breadcrumb{font-size:.85rem}
.breadcrumb a{color:var(--teal-d);text-decoration:none}

/* ===== Shell ===== */
.app-shell{display:flex;min-height:100vh}
.app-sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#cfe0f2;position:fixed;inset:0 auto 0 0;z-index:1040;display:flex;flex-direction:column;overflow-y:auto;transition:transform .2s ease}
.sidebar-brand{display:flex;gap:.7rem;align-items:center;padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.08);min-height:var(--header-h)}
.brand-logo{width:40px;height:40px;border-radius:10px;background:#fff;object-fit:contain;padding:2px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{color:#fff;font-size:1rem}
.brand-text small{color:var(--teal-2);font-size:.75rem;letter-spacing:.04em}
.sidebar-nav{padding:.6rem .6rem 2rem}
.nav-link-top{display:flex;align-items:center;gap:.65rem;width:100%;padding:.6rem .75rem;color:#cfe0f2;text-decoration:none;border:0;background:transparent;border-radius:8px;font-size:.92rem;text-align:left;cursor:pointer}
.nav-link-top:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-link-top.active{background:var(--teal);color:#fff}
.nav-link-top .caret{margin-left:auto;font-size:.7rem;transition:transform .2s}
.nav-group.open>.nav-toggle{color:#fff}
.nav-group.open>.nav-toggle .caret{transform:rotate(180deg)}
.nav-sub{display:none;padding:.15rem 0 .35rem 1.1rem;margin-left:1.05rem;border-left:1px solid rgba(255,255,255,.14)}
.nav-group.open>.nav-sub{display:block}
.nav-sub-link{display:block;padding:.38rem .75rem;color:#a9c2dd;text-decoration:none;border-radius:6px;font-size:.87rem}
.nav-sub-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-sub-link.active{color:#fff;background:rgba(20,184,166,.28);font-weight:600}
.sidebar-backdrop{display:none}

.app-main{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column}
.app-header{height:var(--header-h);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.75rem;padding:0 1.25rem;position:sticky;top:0;z-index:1020}
.header-logo{width:34px;height:34px;object-fit:contain;border-radius:8px}
.app-content{padding:1.25rem;flex:1}
.app-footer{padding:.9rem 1.25rem;color:#7a8aa0;font-size:.8rem;border-top:1px solid var(--line);background:#fff}
@media (max-width:991.98px){
  .app-sidebar{transform:translateX(-100%)}
  .app-main{margin-left:0}
  body.sidebar-open .app-sidebar{transform:none;box-shadow:0 0 30px rgba(0,0,0,.35)}
  body.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(5,15,30,.5);z-index:1030}
  .app-content{padding:.9rem}
  .app-header{padding:0 .75rem}
}

/* ===== Komponen ===== */
.page-head{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
.page-head h1{font-size:1.3rem;margin:0;color:var(--navy);font-weight:700}
.card{border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(11,42,74,.04)}
.card-header{background:#fff;border-bottom:1px solid var(--line);font-weight:600;color:var(--navy)}
.stat-card{border-radius:12px;padding:1rem 1.1rem;color:#fff;position:relative;overflow:hidden;height:100%}
.stat-card .num{font-size:1.9rem;font-weight:700;line-height:1.1}
.stat-card .lbl{opacity:.92;font-size:.85rem}
.stat-card i{position:absolute;right:.9rem;top:.7rem;font-size:2rem;opacity:.25}
.bg-navy{background:var(--navy)}.bg-navy2{background:var(--navy-3)}.bg-teal{background:var(--teal)}.bg-teal2{background:var(--teal-d)}.bg-slate{background:#4a6076}.bg-amber{background:#b7791f}
.table thead th{background:#eef3f9;color:var(--navy);font-weight:600;white-space:nowrap;border-bottom:1px solid var(--line)}
.table-responsive{border-radius:8px}
.table td,.table th{vertical-align:middle}
.filter-bar .form-control,.filter-bar .form-select{min-width:140px}
.form-label{font-weight:600;font-size:.86rem;color:#33475b;margin-bottom:.25rem}
.req::after{content:" *";color:#dc3545}
.section-title{font-size:.92rem;font-weight:700;color:var(--navy);border-left:4px solid var(--teal);padding-left:.6rem;margin:1.25rem 0 .75rem}
.kv dt{font-weight:600;color:#5b6f85;font-size:.82rem}
.kv dd{margin-bottom:.6rem}
.nav-tabs .nav-link{color:#476079}
.nav-tabs .nav-link.active{color:var(--navy);font-weight:600;border-bottom-color:#fff}
.doc-preview{width:100%;height:75vh;border:1px solid var(--line);border-radius:8px;background:#fff}
.progress-thin{height:8px}
.avatar-box{width:110px;height:140px;border:1px dashed #b8c4d3;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8fa0b4;background:#f8fafc;overflow:hidden}
.avatar-box img{width:100%;height:100%;object-fit:cover}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.table-actions .btn{padding:.15rem .45rem}
.sticky-actions{position:sticky;bottom:0;background:rgba(243,246,250,.95);padding:.75rem 0;margin-top:1rem;border-top:1px solid var(--line)}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.35rem .75rem}

/* ===== Login ===== */
.auth-body{background:radial-gradient(1200px 600px at 10% -10%,var(--navy-3) 0,var(--navy) 55%,#071b32 100%);min-height:100vh}
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem}
.auth-card{width:100%;max-width:410px;background:#fff;border-radius:16px;padding:2rem 1.75rem;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.auth-logo{width:72px;height:72px;object-fit:contain}

/* ===== Cetak halaman (daftar) ===== */
@media print{
  .app-sidebar,.app-header,.app-footer,.no-print,.breadcrumb,.sidebar-backdrop{display:none!important}
  .app-main{margin:0}
  .app-content{padding:0}
  body{background:#fff}
}