:root{
  --navy:#102542;
  --gold:#d4a54a;
  --soft:#f5f7fb;
  --text:#101828;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg,#f7f9fc 0%,#eef3f9 100%);
  color:var(--text);
}
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:280px;flex:0 0 280px;color:#fff;
  background:linear-gradient(180deg,#0f2747 0%,#102542 55%,#173a61 100%);
  padding:24px 18px;position:sticky;top:0;height:100vh;
  box-shadow:0 12px 30px rgba(16,37,66,.25)
}
.brand-wrap{display:flex;gap:14px;align-items:center;padding:14px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);margin-bottom:22px}
.brand-icon{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,var(--gold),#f6d28a);display:grid;place-items:center;color:#13233e;font-size:24px;font-weight:700}
.brand-title{font-weight:800;font-size:1.05rem}
.brand-sub{opacity:.8;font-size:.9rem}
.nav-menu .nav-link{color:#e8eef7;padding:12px 14px;border-radius:16px;display:flex;gap:12px;align-items:center;font-weight:600;margin-bottom:6px}
.nav-menu .nav-link:hover,.nav-menu .nav-link.active{background:rgba(255,255,255,.12);color:#fff}
.main-content{flex:1;padding:28px 30px 50px}
.main-content.full{max-width:980px;margin:0 auto;padding-top:50px}
.topbar{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:24px}
.page-title{font-size:1.8rem;font-weight:800;color:#12233f}
.page-subtitle{color:#52637a}
.user-badge{background:#fff;padding:10px 14px;border-radius:999px;box-shadow:0 10px 25px rgba(17,24,39,.08);font-weight:700;color:#12233f}
.card{border:none;border-radius:24px;box-shadow:0 16px 34px rgba(15,23,42,.06)}
.card-header{background:linear-gradient(180deg,#ffffff,#f8fbff);border-bottom:1px solid #edf1f7;border-radius:24px 24px 0 0 !important;font-weight:800;color:#15263f}
.stat-card{padding:22px;border-radius:24px;background:#fff;box-shadow:0 15px 35px rgba(17,24,39,.06);height:100%}
.stat-card .icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#12315c,var(--gold));color:#fff;font-size:1.3rem;margin-bottom:14px}
.stat-value{font-size:2rem;font-weight:800;color:#111827}
.stat-label{color:#55657d;font-weight:600}
.table thead th{background:#f7f9fc;color:#0f2747;font-weight:800;border-bottom-width:1px}
.table td,.table th{vertical-align:middle}
.btn-primary{background:linear-gradient(135deg,#102542,#1c4677);border:none}
.btn-warning{color:#13233e;font-weight:700}
.form-control,.form-select{border-radius:14px;padding:.7rem .9rem;border:1px solid #d9e1ee}
.form-label{font-weight:700;color:#25364d}
.section-title{font-size:1.1rem;font-weight:800;color:#102542;margin-bottom:14px}
.login-card{max-width:450px;margin:0 auto;background:#fff;border-radius:30px;padding:28px;box-shadow:0 25px 50px rgba(16,37,66,.12)}
.signature-pad{border:2px dashed #cdd7e7;border-radius:18px;background:#fff;width:100%;height:220px;display:block}
.print-sheet{max-width:900px;margin:0 auto;background:#fff;padding:26px 30px;color:#111}
.identity-table td{padding:6px 8px;vertical-align:top}
.doc-box{border:1px solid #dfe6f3;border-radius:18px;padding:18px;background:#fcfdff}
.badge-soft{background:#eef4ff;color:#173a61;padding:.5rem .8rem;border-radius:999px;font-weight:700}
@media (max-width: 992px){
  .sidebar{display:none}
  .main-content{padding:18px}
  .topbar{flex-direction:column}
}
@media print{
  .no-print{display:none !important}
  body{background:#fff}
  .print-sheet{padding:0;max-width:none}
}

.avatar-fallback{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#102542,#1c4677);color:#fff;font-weight:800}
.analytics-card{padding:20px;border-radius:24px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 16px 34px rgba(15,23,42,.06);height:100%}
.analytics-title{font-size:1rem;font-weight:800;color:#102542;margin-bottom:10px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.kpi-chip{background:#fff;border:1px solid #e6edf7;border-radius:20px;padding:16px}
.kpi-chip .kpi-value{font-size:1.5rem;font-weight:800}
.list-mini{display:flex;flex-direction:column;gap:10px}
.list-mini .item{display:flex;justify-content:space-between;gap:16px;padding:10px 14px;border:1px solid #e7edf5;border-radius:16px;background:#fff}
.import-box{border:1px dashed #bfd0ea;background:#f8fbff;border-radius:18px;padding:18px}


.hero-panel{background:linear-gradient(135deg,#102542,#1c4677);color:#fff;border-radius:28px;padding:24px;box-shadow:0 20px 50px rgba(15,23,42,.12);margin-bottom:22px}
.hero-panel h2{font-weight:800;margin:0 0 8px}
.toolbar-action{display:flex;gap:10px;flex-wrap:wrap}
.table-responsive{border-radius:18px}

.sidebar{overflow-y:auto;padding-bottom:100px}


.brand-logo-box{overflow:hidden}
.brand-logo-img{width:100%;height:100%;object-fit:contain;display:block}
.user-badge img{background:#fff}

.brand-wrap{display:flex;gap:14px;align-items:center;padding:14px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);margin-bottom:22px;overflow:hidden}
.brand-mark{width:64px;min-width:64px;height:64px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px}
.brand-mark .brand-icon{width:100%;height:100%}
.brand-logo-img{display:block;max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain!important}
.brand-text{min-width:0;max-width:calc(100% - 78px)}
.brand-title,.brand-sub{display:block;word-break:break-word}
.user-avatar-wrap{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.25)}
.user-avatar-img{display:block;max-width:100%!important;max-height:100%!important;width:100%!important;height:100%!important;object-fit:cover!important}
.profile-preview-img{max-height:220px;object-fit:cover;width:100%;background:#fff;border:1px solid #e5e7eb}

.sidebar{overflow-x:hidden}
.brand-wrap{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);margin-bottom:22px;overflow:hidden;min-height:86px}
.brand-mark{width:56px;min-width:56px;height:56px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:5px;flex:0 0 56px}
.brand-mark .brand-icon{width:46px;height:46px;border-radius:16px}
.brand-logo-img{display:block;object-fit:contain!important}
.brand-text{min-width:0;flex:1}
.brand-title{font-weight:800;font-size:1rem;line-height:1.2;word-break:break-word}
.brand-sub{opacity:.88;font-size:.88rem;line-height:1.2;word-break:break-word}
.compact-brand-logo{width:72px;height:72px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px;border:1px solid #e5e7eb}
.compact-brand-preview{padding:12px 0}
.user-avatar-wrap{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.25)}
.user-avatar-img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:cover!important;display:block}
.profile-photo-box{width:100%}
.profile-preview-img{max-height:220px;max-width:100%;object-fit:cover;width:100%;background:#fff;border:1px solid #e5e7eb}
.profile-fallback-box{height:220px;display:flex;align-items:center;justify-content:center}


.approval-block{page-break-inside:avoid}
.approval-sign-space{min-height:110px;display:flex;align-items:center;justify-content:center}