:root{
  --sic-navy:#0b2545;
  --sic-navy-2:#123a6b;
  --sic-blue:#1668e3;
  --sic-blue-light:#e8f1ff;
  --sic-gold:#d4a017;
  --sic-green:#1a9c6b;
  --sic-red:#d64550;
  --sic-gray:#f4f6f9;
  --sic-radius:14px;
}
body{ background:var(--sic-gray); font-family:'Segoe UI', Roboto, Arial, sans-serif; color:#1f2937; }
a{ text-decoration:none; }

/* ===== Layout ===== */
.sic-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:260px; z-index:1030;
  background:linear-gradient(180deg,var(--sic-navy) 0%, var(--sic-navy-2) 100%);
  color:#fff; overflow-y:auto; transition:transform .25s ease;
}
.sic-sidebar .brand{ padding:22px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.sic-sidebar .brand .logo-box{ width:42px;height:42px;border-radius:10px;background:var(--sic-gold); display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--sic-navy); font-size:18px; }
.sic-sidebar .brand h6{ margin:0; font-weight:700; letter-spacing:.5px; font-size:14px; }
.sic-sidebar .brand small{ color:#b9c8de; font-size:11px; }
.sic-sidebar .nav-link{ color:#c9d6ea; padding:11px 20px; font-size:14.5px; border-left:3px solid transparent; display:flex; align-items:center; gap:10px; }
.sic-sidebar .nav-link i{ font-size:16px; width:20px; text-align:center; }
.sic-sidebar .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sic-sidebar .nav-link.active{ background:rgba(255,255,255,.10); color:#fff; border-left-color:var(--sic-gold); font-weight:600; }
.sic-sidebar .nav-section{ padding:16px 20px 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:#7d90ab; }

.sic-main{ margin-left:260px; min-height:100vh; }
.sic-topbar{
  background:#fff; border-bottom:1px solid #e7ebf1; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:1020;
}
.sic-content{ padding:24px; }
.sic-burger{ display:none; }

@media (max-width: 991.98px){
  .sic-sidebar{ transform:translateX(-100%); }
  .sic-sidebar.show{ transform:translateX(0); }
  .sic-main{ margin-left:0; }
  .sic-burger{ display:inline-flex; }
}

/* ===== Cards / KPI ===== */
.sic-card{ background:#fff; border:1px solid #edf0f4; border-radius:var(--sic-radius); box-shadow:0 2px 10px rgba(20,30,60,.04); }
.kpi-card{ border-radius:var(--sic-radius); padding:20px; color:#fff; position:relative; overflow:hidden; box-shadow:0 6px 16px rgba(20,30,60,.10); }
.kpi-card .kpi-icon{ position:absolute; right:14px; top:14px; font-size:34px; opacity:.25; }
.kpi-card h2{ font-weight:800; margin:6px 0 2px; }
.kpi-card .kpi-label{ font-size:13px; opacity:.9; }
.kpi-card .kpi-trend{ font-size:12px; opacity:.9; }
.bg-navy{ background:linear-gradient(135deg,var(--sic-navy),var(--sic-navy-2)); }
.bg-blue{ background:linear-gradient(135deg,#1668e3,#4f8cf0); }
.bg-green{ background:linear-gradient(135deg,#0f8f5f,#25b980); }
.bg-gold{ background:linear-gradient(135deg,#c68f10,#e3b13a); }
.bg-red{ background:linear-gradient(135deg,#c23b45,#e0636c); }

.badge-status-baru{ background:var(--sic-blue-light); color:var(--sic-blue); }
.badge-status-proses{ background:#fff4de; color:#b9770e; }
.badge-status-selesai{ background:#e5f7ef; color:var(--sic-green); }
.badge-status-tolak{ background:#fdeaec; color:var(--sic-red); }
.badge-status-batal{ background:#eef0f3; color:#6b7280; }

.table thead th{ font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#6b7280; background:#f8fafc; border-bottom:2px solid #eef1f6;}
.table td, .table th{ vertical-align:middle; }
.sic-page-title{ font-weight:800; color:var(--sic-navy); }
.sic-page-sub{ color:#6b7280; font-size:14px; }

.timeline{ position:relative; padding-left:28px; }
.timeline:before{ content:''; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background:#e5e9f0; }
.timeline-item{ position:relative; margin-bottom:18px; }
.timeline-item:before{ content:''; position:absolute; left:-28px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--sic-blue); border:3px solid #fff; box-shadow:0 0 0 2px #e5e9f0; }

.login-page{ min-height:100vh; background:linear-gradient(135deg,var(--sic-navy),#0f3f7a 60%, #123a6b); display:flex; align-items:center; }
.login-card{ border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.login-side{ background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 60%), var(--sic-navy); color:#fff; padding:48px; position:relative;}
.login-side .badge-seal{ width:64px;height:64px;border-radius:16px;background:var(--sic-gold); display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--sic-navy);font-size:24px;}

.progress-thin{ height:6px; border-radius:6px; }