/* =========================================================
   KSP – GLOBAL UI LOCK (AdminLTE)
   Brand: KSP SIBAYAK ABADI MANDIRI
   File: public/css/ksp.css
   ========================================================= */

/* =========================================================
   1) TOKENS (Single Source of Truth) – LOCK
   ========================================================= */
:root{
  --ksp-font: "Inter", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Brand Primary (LOCK) */
  --ksp-primary: #1d4ed8;
  --ksp-primary-600: #2563eb;
  --ksp-primary-400: #60a5fa;
  --ksp-primary-soft: rgba(29,78,216,.12);

  /* Semantic */
  --ksp-success: #198754;
  --ksp-warning: #ffc107;
  --ksp-danger:  #dc3545;
  --ksp-info:    #0dcaf0;

  /* Surfaces / text */
  --ksp-bg-app: #f3f6fb;
  --ksp-card: #ffffff;
  --ksp-text: #0f172a;
  --ksp-muted:#64748b;
  --ksp-border: rgba(15,23,42,.10);

  /* Sidebar */
  --ksp-sidebar-bg: #343a40;
  --ksp-brand-text: #ffffff;

  /* Radius */
  --ksp-radius: 14px;

  /* Spacing System (8px Grid) */
  --ksp-space-1: 4px;
  --ksp-space-2: 8px;
  --ksp-space-3: 12px;
  --ksp-space-4: 16px;
  --ksp-space-5: 20px;
  --ksp-space-6: 24px;
  --ksp-space-7: 32px;
  --ksp-space-8: 40px;
}

/* =========================================================
   2) TYPOGRAPHY LOCK (Global)
   ========================================================= */
html{ font-size: 14px; }

html, body{
  font-family: var(--ksp-font) !important;
  color: var(--ksp-text);
  font-size: 14px;
  line-height: 1.55;
}

/* Headings */
h1 { font-size: 1.85rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
h6 { font-size: .9rem; }

h1,h2,h3,h4,h5,h6{
  font-family: var(--ksp-font) !important;
  font-weight: 800;
  letter-spacing: .2px;
}

.text-muted{ color: var(--ksp-muted) !important; }
.text-primary{ color: var(--ksp-primary) !important; }

small, .small{ font-size: .85rem; }

/* =========================================================
   3) PRIMARY LOCK (Bootstrap/AdminLTE)
   ========================================================= */

/* Link global */
a{ color: var(--ksp-primary) !important; }
a:hover{ color: var(--ksp-primary-600) !important; }

/* Buttons base */
.btn{
  border-radius: 10px;
  font-weight: 700;
  padding: 6px 14px;
}
.btn i{ margin-right: 6px; }

/* Primary */
.btn-primary{
  background: var(--ksp-primary) !important;
  border-color: var(--ksp-primary) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 24px rgba(29,78,216,.18);
}
.btn-primary:hover{
  background: var(--ksp-primary-600) !important;
  border-color: var(--ksp-primary-600) !important;
}
.btn-primary:focus, .btn-primary.focus{
  box-shadow: 0 0 0 .2rem var(--ksp-primary-soft) !important;
}
.btn-primary:active{
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(29,78,216,.16);
}

.btn-outline-primary{
  color: var(--ksp-primary) !important;
  border-color: var(--ksp-primary) !important;
}
.btn-outline-primary:hover{
  background: var(--ksp-primary) !important;
  border-color: var(--ksp-primary) !important;
  color: #fff !important;
}

.bg-primary{ background: var(--ksp-primary) !important; }
.border-primary{ border-color: var(--ksp-primary) !important; }
.badge-primary{ background: var(--ksp-primary) !important; }

.form-control:focus, .custom-select:focus{
  border-color: rgba(29,78,216,.55) !important;
  box-shadow: 0 0 0 .2rem var(--ksp-primary-soft) !important;
}

.card-primary.card-outline{
  border-top: 3px solid var(--ksp-primary) !important;
}

/* =========================================================
   4) SPACING SYSTEM LOCK – APP ONLY
   ========================================================= */
body:not(.login-page):not(.register-page) .content-wrapper{
  padding: var(--ksp-space-6);
  padding-top: 18px;
}
body:not(.login-page):not(.register-page) .content-header{
  padding: 0;
  margin-bottom: 14px;
}
body:not(.login-page):not(.register-page) .card{
  margin-bottom: 18px;
}
body:not(.login-page):not(.register-page) .card-header{
  padding: var(--ksp-space-4) var(--ksp-space-5);
}
body:not(.login-page):not(.register-page) .card-body{
  padding: var(--ksp-space-5);
}
body:not(.login-page):not(.register-page) .table th,
body:not(.login-page):not(.register-page) .table td{
  padding: var(--ksp-space-3) var(--ksp-space-4);
}
body:not(.login-page):not(.register-page) .form-group{
  margin-bottom: var(--ksp-space-5);
}
.section-gap{
  margin-bottom: var(--ksp-space-7);
}

/* =========================================================
   5) APP-ONLY – FINTECH ENTERPRISE LOOK
   ========================================================= */

/* Global smoothing */
body:not(.login-page):not(.register-page){
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Background app: premium soft gradient */
body:not(.login-page):not(.register-page) .content-wrapper{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(29,78,216,.08), transparent 60%),
              radial-gradient(1000px 500px at 90% 10%, rgba(96,165,250,.10), transparent 55%),
              var(--ksp-bg-app) !important;
}

/* Content max width */
body:not(.login-page):not(.register-page) .content-wrapper > .content{
  max-width: 1320px;
  margin: 0 auto;
}

/* Navbar */
body:not(.login-page):not(.register-page) .main-header.navbar{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  height: 58px;
}

/* Heading */
body:not(.login-page):not(.register-page) .content-header h1,
body:not(.login-page):not(.register-page) .content-header .m-0{
  font-weight: 900;
  letter-spacing: .1px;
  color: #0b1220 !important;
  font-size: 1.55rem;
}

/* Card */
body:not(.login-page):not(.register-page) .card{
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.06);
  box-shadow:
    0 22px 60px rgba(2,6,23,.10),
    0 1px 0 rgba(255,255,255,.75) inset;
}
body:not(.login-page):not(.register-page) .card-header{
  background: #fff;
  border-bottom: 1px solid rgba(15,23,42,.08);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
body:not(.login-page):not(.register-page) .card-title{
  font-weight: 800;
}

/* Tables */
body:not(.login-page):not(.register-page) .table{ color: var(--ksp-text); }
body:not(.login-page):not(.register-page) .table thead th{
  background: linear-gradient(180deg, #f7f9fe 0%, #f2f5fb 100%);
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  font-weight: 800;
  white-space: nowrap;
}
body:not(.login-page):not(.register-page) .table td,
body:not(.login-page):not(.register-page) .table th{
  border-top: 1px solid rgba(15,23,42,.08) !important;
  vertical-align: middle;
}
body:not(.login-page):not(.register-page) .table-hover tbody tr:hover{
  background: rgba(29,78,216,.04);
}

/* Forms */
body:not(.login-page):not(.register-page) .form-control,
body:not(.login-page):not(.register-page) .custom-select{
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.10);
}
.is-invalid{ border-color: var(--ksp-danger) !important; }
.invalid-feedback{ font-weight: 700; }

/* Links: only inside content */
body:not(.login-page):not(.register-page) .content-wrapper a{
  color: var(--ksp-primary) !important;
}
body:not(.login-page):not(.register-page) .content-wrapper a:hover{
  color: var(--ksp-primary-600) !important;
}

/* Neutralize links in navbar & sidebar */
body:not(.login-page):not(.register-page) .main-header a,
body:not(.login-page):not(.register-page) .main-sidebar a{
  color: inherit !important;
}

/* Navbar link tone */
body:not(.login-page):not(.register-page) .main-header.navbar a.nav-link{
  color: rgba(15,23,42,.70) !important;
}
body:not(.login-page):not(.register-page) .main-header.navbar a.nav-link:hover{
  color: rgba(15,23,42,.90) !important;
}

/* =========================================================
   6) SIDEBAR WIDTH LOCK (260px) + COLLAPSE
   ========================================================= */
body:not(.login-page):not(.register-page) .main-sidebar{
  width: 260px !important;
}
body:not(.login-page):not(.register-page) .content-wrapper,
body:not(.login-page):not(.register-page) .main-header{
  margin-left: 260px !important;
}

/* Sidebar mini collapse */
body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar{
  width: 4.6rem !important;
}
body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .content-wrapper,
body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-header{
  margin-left: 4.6rem !important;
}

/* Sidebar matte */
body:not(.login-page):not(.register-page) .sidebar-dark-primary{
  background: linear-gradient(180deg, #2f353c 0%, #2a3036 100%) !important;
}

/* Sidebar normal hover */
body:not(.login-page):not(.register-page) .sidebar-dark-primary .nav-sidebar .nav-link{
  color: rgba(255,255,255,.82) !important;
  transition: background .15s ease, color .15s ease;
}
body:not(.login-page):not(.register-page) .sidebar-dark-primary .nav-sidebar .nav-link:hover{
  background: rgba(255,255,255,.07) !important;
  color: #ffffff !important;
}

/* Sidebar active refined */
body:not(.login-page):not(.register-page) .nav-sidebar .nav-link.active{
  background: rgba(29,78,216,.16) !important;
  color: #eaf2ff !important;
  border-left: 3px solid var(--ksp-primary);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.16);
}
body:not(.login-page):not(.register-page) .nav-sidebar .nav-link.active i{
  color: #eaf2ff !important;
}

/* =========================================================
   7) BRAND (Sidebar Logo + Text)
   ========================================================= */
.main-sidebar .brand-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .75rem 1rem;
}
.main-sidebar .brand-link .brand-image{
  max-height: 34px;
  width: auto;
  padding: 3px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.main-sidebar .brand-link .brand-text{
  color: var(--ksp-brand-text);
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
  font-size: .92rem;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Sidebar mini: logo only */
body.sidebar-mini.sidebar-collapse .main-sidebar .brand-link{ justify-content: center; }
body.sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-text{ display: none !important; }
body.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p{ display: none; }

/* =========================================================
   8) DASHBOARD – HERO + STAT CARD
   ========================================================= */
.dashboard-hero{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(247,251,255,.92)) !important;
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 26px 70px rgba(2,6,23,.10);
}
.dashboard-hero::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background: linear-gradient(180deg, var(--ksp-primary), var(--ksp-primary-400));
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
.dashboard-hero::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(29,78,216,.10), transparent 55%),
              radial-gradient(circle at 75% 20%, rgba(96,165,250,.12), transparent 60%);
  pointer-events:none;
  transform: rotate(-8deg);
}

/* Stat card */
.ksp-stat-card{
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid rgba(2,6,23,.06);
  box-shadow:
    0 26px 70px rgba(2,6,23,.10),
    0 1px 0 rgba(255,255,255,.8) inset;
  padding-left: 8px;
  overflow: hidden;
  transition: all .2s ease;
}
.ksp-stat-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--ksp-primary), var(--ksp-primary-400));
}
.ksp-stat-card::after{
  content:"";
  position:absolute;
  right:-60px;
  top:-60px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(29,78,216,.14), transparent 60%);
  pointer-events:none;
}
.ksp-stat-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 34px 86px rgba(2,6,23,.14),
    0 1px 0 rgba(255,255,255,.85) inset;
}
.ksp-stat-title{
  font-size: .86rem;
  letter-spacing: .1px;
  color: var(--ksp-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.ksp-stat-value{
  font-size: 2.05rem;
  font-weight: 950;
  letter-spacing: -0.4px;
  color: #070b16;
  margin-bottom: 6px;
}
.ksp-stat-sub{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(29,78,216,.08);
  color: var(--ksp-primary);
  border: 1px solid rgba(29,78,216,.12);
  font-size: .85rem;
  font-weight: 600;
}

/* =========================================================
   9) LOGIN/REGISTER SAFETY
   ========================================================= */
.ksp-watermark, .watermark{ display: none !important; }

.login-page .main-sidebar,
.login-page .brand-link,
.login-page .sidebar,
.login-page .sidebar-dark-primary,
.login-page .sidebar-mini,
.login-page .nav-sidebar,
.login-page .navbar{
  display: none !important;
}

.login-page::before,
.login-page::after,
.login-page .content-wrapper::before,
.login-page .content-wrapper::after,
.login-page body::before,
.login-page body::after,
.login-page .wrapper::before,
.login-page .wrapper::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* =========================================================
   10) FIX LOCK: Button Text vs Global Link Color (FINAL)
   ========================================================= */
body:not(.login-page):not(.register-page) a.btn{
  text-decoration: none !important;
}

/* tombol gelap => teks putih (a + button) */
body:not(.login-page):not(.register-page) a.btn.btn-primary,
body:not(.login-page):not(.register-page) a.btn.btn-success,
body:not(.login-page):not(.register-page) a.btn.btn-danger,
body:not(.login-page):not(.register-page) a.btn.btn-info,
body:not(.login-page):not(.register-page) a.btn.btn-dark,
body:not(.login-page):not(.register-page) button.btn.btn-primary,
body:not(.login-page):not(.register-page) button.btn.btn-success,
body:not(.login-page):not(.register-page) button.btn.btn-danger,
body:not(.login-page):not(.register-page) button.btn.btn-info,
body:not(.login-page):not(.register-page) button.btn.btn-dark{
  color: #ffffff !important;
}

/* icon ikut warna tombol (a + button) */
body:not(.login-page):not(.register-page) a.btn.btn-primary i,
body:not(.login-page):not(.register-page) a.btn.btn-success i,
body:not(.login-page):not(.register-page) a.btn.btn-danger i,
body:not(.login-page):not(.register-page) a.btn.btn-info i,
body:not(.login-page):not(.register-page) a.btn.btn-dark i,
body:not(.login-page):not(.register-page) button.btn.btn-primary i,
body:not(.login-page):not(.register-page) button.btn.btn-success i,
body:not(.login-page):not(.register-page) button.btn.btn-danger i,
body:not(.login-page):not(.register-page) button.btn.btn-info i,
body:not(.login-page):not(.register-page) button.btn.btn-dark i{
  color: #ffffff !important;
}

/* tombol terang => teks gelap (a + button) */
body:not(.login-page):not(.register-page) a.btn.btn-light,
body:not(.login-page):not(.register-page) a.btn.btn-warning,
body:not(.login-page):not(.register-page) a.btn.btn-outline-secondary,
body:not(.login-page):not(.register-page) a.btn.btn-outline-primary,
body:not(.login-page):not(.register-page) button.btn.btn-light,
body:not(.login-page):not(.register-page) button.btn.btn-warning,
body:not(.login-page):not(.register-page) button.btn.btn-outline-secondary,
body:not(.login-page):not(.register-page) button.btn.btn-outline-primary{
  color: #0b1220 !important;
}
body:not(.login-page):not(.register-page) a.btn.btn-light i,
body:not(.login-page):not(.register-page) a.btn.btn-warning i,
body:not(.login-page):not(.register-page) a.btn.btn-outline-secondary i,
body:not(.login-page):not(.register-page) a.btn.btn-outline-primary i,
body:not(.login-page):not(.register-page) button.btn.btn-light i,
body:not(.login-page):not(.register-page) button.btn.btn-warning i,
body:not(.login-page):not(.register-page) button.btn.btn-outline-secondary i,
body:not(.login-page):not(.register-page) button.btn.btn-outline-primary i{
  color: #0b1220 !important;
}

/* Border halus agar btn-light tidak “hilang” */
body:not(.login-page):not(.register-page) .btn.btn-light{
  border: 1px solid rgba(15,23,42,.12) !important;
}

/* =========================================================
   11) KSP – COMPONENTS (TABLE / ACTION / BADGE / HELPERS)
   ========================================================= */

/* helpers */
.ksp-nowrap{ white-space: nowrap; }
.ksp-mono{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: .2px;
}

/* table wrapper */
.ksp-table-wrap{
  width: 100%;
  overflow-x: hidden;
}

/* name subline */
.ksp-sub{
  margin-top: 6px;
  font-size: .86rem;
  color: var(--ksp-muted);
}

/* BADGE */
.ksp-badge{
  border-radius: 999px;
  padding: 3px 8px;
  font-weight: 800;
  letter-spacing: .1px;
  font-size: .68rem;
  line-height: 1.1;
  vertical-align: middle;
}

/* ACTIONS */
.ksp-actions{
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

.ksp-actions .btn{
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.ksp-actions .btn i{
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.ksp-actions .btn.btn-sm{
  padding: 0 !important;
}

/* =========================================================
   11A) KSP – ACTION BAR
   ========================================================= */
.ksp-actionbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ksp-actionbar form{ margin: 0; }

.ksp-actionbar .btn{
  border-radius: 14px !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 26px rgba(2,6,23,.10);
}

.ksp-actionbar .btn:disabled,
.ksp-actionbar .btn.disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.ksp-actionbar .form-control{
  border-radius: 14px !important;
  padding: 10px 14px !important;
  height: auto !important;
}

.ksp-actionbar .form-control:disabled{
  background: rgba(15,23,42,.04) !important;
  color: rgba(15,23,42,.55) !important;
}

/* =========================================================
   11B) KSP – TABLE STANDARD LOCK
   ========================================================= */
.ksp-table{
  width: 100%;
  color: var(--ksp-text);
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
  font-size: .93rem;
}

.ksp-table thead th{
  background: linear-gradient(180deg, #f7f9fe 0%, #f2f5fb 100%);
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .2px;
  white-space: nowrap;
  vertical-align: middle;
}

.ksp-table td,
.ksp-table th{
  border-top: 1px solid rgba(15,23,42,.08) !important;
  vertical-align: middle;
  padding: 10px 14px !important;
}

.ksp-table td{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.ksp-table tbody tr{
  background: rgba(255,255,255,.55);
}

.ksp-table tbody tr + tr td{
  border-top-color: rgba(15,23,42,.06) !important;
}

.ksp-table.table-hover tbody tr:hover{
  background: rgba(29,78,216,.04);
}

.ksp-table-sm td,
.ksp-table-sm th{
  padding: 8px 12px !important;
  font-size: .88rem;
}

.ksp-table-xs td,
.ksp-table-xs th{
  padding: 6px 10px !important;
  font-size: .82rem;
}

.ksp-table-nowrap td,
.ksp-table-nowrap th{
  white-space: nowrap;
}

.ksp-table-center th,
.ksp-table-center td{
  vertical-align: middle;
}

.ksp-table-status .badge,
.ksp-table .badge,
.ksp-table .ksp-badge{
  font-size: .68rem;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1.1;
}

/* Outer border tabel */
.ksp-table-frame{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.ksp-table-frame .ksp-table{
  margin-bottom: 0;
}

.ksp-table-frame .ksp-table thead th:first-child,
.ksp-table-frame .ksp-table tbody td:first-child{
  border-left: 0 !important;
}

.ksp-table-frame .ksp-table thead th:last-child,
.ksp-table-frame .ksp-table tbody td:last-child{
  border-right: 0 !important;
}

.ksp-table-frame .ksp-table thead tr:first-child th{
  border-top: 0 !important;
}

.ksp-table-frame .ksp-table tbody tr:last-child td{
  border-bottom: 0 !important;
}

/* =========================================================
   12) FIX: Tombol "Kembali" agar kontras jelas
   ========================================================= */
.ksp-btn-back{
  border-radius: 999px !important;
  padding: 10px 16px !important;
  background: #0b1220 !important;
  border-color: #0b1220 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(2,6,23,.18);
}
.ksp-btn-back:hover{
  background: #111a2f !important;
  border-color: #111a2f !important;
}
.ksp-btn-back i{
  color: #ffffff !important;
}

/* =========================================================
   13) KSP - Notification badge pulse + Bell shake
   ========================================================= */
.badge-pulse { animation: kspPulse 1.2s infinite; }

@keyframes kspPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.ksp-bell-shake { animation: kspBellShake 0.6s ease; }

@keyframes kspBellShake {
  0% { transform: rotate(0); }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(15deg); }
  60% { transform: rotate(-10deg); }
  80% { transform: rotate(10deg); }
  100% { transform: rotate(0); }
}

/* =========================================================
   14) FIX: Sidebar scroll + treeview (SAFE) - MERGED
   ========================================================= */

/* Kunci tinggi sidebar */
body:not(.login-page):not(.register-page) .layout-fixed .main-sidebar{
  height: 100vh;
}

/* Sidebar area harus bisa scroll */
body:not(.login-page):not(.register-page) .layout-fixed .main-sidebar .sidebar{
  height: calc(100vh - 58px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Stabilkan treeview */
body:not(.login-page):not(.register-page) .nav-sidebar .nav-treeview{
  overflow: hidden;
}

/* Sidebar mini collapse: hover expand (push, bukan overlay) */
body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover{
  width: 260px !important;
}

/* Dorong content/header/footer saat hover */
body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover ~ .content-wrapper,
body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover ~ .main-header,
body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover ~ .main-footer{
  margin-left: 260px !important;
}

/* Saat hover, tampilkan kembali teks menu */
body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover .nav-sidebar .nav-link p{
  display: inline-block !important;
}

/* =========================================================
   DISABLED VISUAL LOCK
   ========================================================= */
.btn:disabled,
button.btn:disabled,
.btn.disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.form-control:disabled,
.custom-select:disabled{
  opacity: .65 !important;
  cursor: not-allowed !important;
  background-color: rgba(15,23,42,.04) !important;
}

.pdf-header-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:8px;
}

.pdf-header-logo-cell{
  width:80px;
  vertical-align:top;
}

.pdf-header-company-cell{
  vertical-align:top;
}

.pdf-header-logo{
  width:70px;
  height:auto;
}

.pdf-company-name{
  font-size:14px;
  font-weight:bold;
  margin-bottom:2px;
}

.pdf-company-address{
  font-size:9px;
  color:#374151;
  line-height:1.35;
  margin-bottom:4px;
}

.pdf-document-title{
  font-size:15px;
  font-weight:bold;
  margin-top:6px;
  margin-bottom:2px;
}

.pdf-document-subtitle{
  font-size:10px;
  color:#4b5563;
  margin-bottom:6px;
}

/* =========================================================
   MOBILE FIX FINAL: Sidebar jangan sisakan ruang kosong
   ========================================================= */
@media (max-width: 991.98px){

  /* Wrapper full width */
  body:not(.login-page):not(.register-page) .content-wrapper,
  body:not(.login-page):not(.register-page) .main-header,
  body:not(.login-page):not(.register-page) .main-footer{
    margin-left: 0 !important;
    left: 0 !important;
    width: auto !important;
  }

  /* Hilangkan batas desktop dari pseudo sidebar */
  body:not(.login-page):not(.register-page) .main-sidebar,
  body:not(.login-page):not(.register-page) .main-sidebar::before{
    width: 260px !important;
    margin-left: -260px !important;
    transform: none !important;
  }

  /* Saat sidebar dibuka */
  body.sidebar-open:not(.login-page):not(.register-page) .main-sidebar,
  body.sidebar-open:not(.login-page):not(.register-page) .main-sidebar::before{
    margin-left: 0 !important;
  }

  /* Content jangan ikut terdorong saat sidebar open */
  body.sidebar-open:not(.login-page):not(.register-page) .content-wrapper,
  body.sidebar-open:not(.login-page):not(.register-page) .main-header,
  body.sidebar-open:not(.login-page):not(.register-page) .main-footer{
    margin-left: 0 !important;
  }

  /* Override semua state collapse/mini desktop */
  body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .content-wrapper,
  body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-header,
  body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-footer,
  body.sidebar-mini-md.sidebar-collapse:not(.login-page):not(.register-page) .content-wrapper,
  body.sidebar-mini-md.sidebar-collapse:not(.login-page):not(.register-page) .main-header,
  body.sidebar-mini-md.sidebar-collapse:not(.login-page):not(.register-page) .main-footer{
    margin-left: 0 !important;
  }

  body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar,
  body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar::before,
  body.sidebar-mini-md.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar,
  body.sidebar-mini-md.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar::before{
    width: 260px !important;
    margin-left: -260px !important;
  }

  body.sidebar-mini.sidebar-collapse.sidebar-open:not(.login-page):not(.register-page) .main-sidebar,
  body.sidebar-mini.sidebar-collapse.sidebar-open:not(.login-page):not(.register-page) .main-sidebar::before,
  body.sidebar-mini-md.sidebar-collapse.sidebar-open:not(.login-page):not(.register-page) .main-sidebar,
  body.sidebar-mini-md.sidebar-collapse.sidebar-open:not(.login-page):not(.register-page) .main-sidebar::before{
    margin-left: 0 !important;
  }

  /* Matikan hover-expand desktop di mobile */
  body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover,
  body.sidebar-mini-md.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover{
    width: 260px !important;
  }

  body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover ~ .content-wrapper,
  body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover ~ .main-header,
  body.sidebar-mini.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover ~ .main-footer,
  body.sidebar-mini-md.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover ~ .content-wrapper,
  body.sidebar-mini-md.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover ~ .main-header,
  body.sidebar-mini-md.sidebar-collapse:not(.login-page):not(.register-page) .main-sidebar:hover ~ .main-footer{
    margin-left: 0 !important;
  }

  /* Hilangkan center layout desktop di HP */
  body:not(.login-page):not(.register-page) .content-wrapper{
    padding: 12px !important;
    padding-top: 12px !important;
  }

  body:not(.login-page):not(.register-page) .content-wrapper > .content{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Header mobile rapat */
  body:not(.login-page):not(.register-page) .content-header h1,
  body:not(.login-page):not(.register-page) .content-header .m-0{
    font-size: 1.35rem !important;
  }
}

/* ========================================
   BUTTON SIMULASI — HIGH CONTRAST
======================================== */

.btn-simulasi {
    background: linear-gradient(
        135deg,
      #ff9800,
      #ff5722
    );

    color: #000 !important;

    border: none;

    font-weight: 600;

    box-shadow: 0 4px 10px rgba(0, 114, 255, 0.35);

    transition: all 0.2s ease;
}

.btn-simulasi:hover {
    background: linear-gradient(
        135deg,
        #33d4ff,
        #3385ff
    );

    transform: translateY(-1px);

    box-shadow: 0 6px 14px rgba(0, 114, 255, 0.45);
}

.btn-simulasi:active {
    transform: translateY(0px);
}

/* =========================================================
   HOLIDAY STYLE
   ========================================================= */
.holiday-date{
  color: var(--ksp-danger) !important;
  font-weight: 800;
}

.holiday-date-muted{
  color: rgba(220, 53, 69, .75) !important;
}

.calendar-day-holiday{
  background: rgba(220, 53, 69, .12) !important;
  color: var(--ksp-danger) !important;
  font-weight: 800;
  border-radius: 8px;
}

.calendar-day-holiday:hover{
  background: rgba(220, 53, 69, .20) !important;
}