/* ============================================================
   SIPERKASA — custom.css
   Desain Modern & Tidak Monoton — Kabupaten Kotabaru
   ============================================================ */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/* ── Variabel Global ────────────────────────────────────────── */
:root {
  --bs-primary:            #185FA5;
  --bs-primary-rgb:        24, 95, 165;
  --bs-border-radius:      .5rem;
  --bs-border-color:       #E2E8F0;
  --bs-body-font-family:   "Inter", system-ui, -apple-system, sans-serif;
  --bs-body-font-size:     .925rem;
  --bs-body-bg:            #F0F4FA;

  --siperkasa-card-bg:         #FFFFFF;
  --siperkasa-text-muted:      #64748B;
  --siperkasa-border:          #E2E8F0;

  --siperkasa-blue:            #185FA5;
  --siperkasa-teal:            #0D9488;
  --siperkasa-indigo:          #4F46E5;
  --siperkasa-amber:           #D97706;
  --siperkasa-rose:            #E11D48;
  --siperkasa-green:           #15803D;
}

body {
  font-family: var(--bs-body-font-family);
  background-color: var(--bs-body-bg);
  background-image: radial-gradient(circle, #CBD5E1 1px, transparent 1px);
  background-size: 28px 28px;
  color: #1E293B;
  -webkit-font-smoothing: antialiased;
}

/* ── Navbar ──────────────────────────────────────────────── */
.navbar {
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 100%) !important;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #185FA5, #0D9488, #4F46E5) 1;
  padding: .65rem 0;
  box-shadow: 0 2px 8px 0 rgba(24, 95, 165, 0.08);
}


/* ── iOS Hello Style Animated Brand Text ──────────────────────── */
.ios-hello-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.ios-hello-text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #185FA5 0%, #009688 35%, #028090 70%, #185FA5 100%);
  background-size: 250% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: iosHelloShimmer 5s ease-in-out infinite, iosHelloPulse 3s ease-in-out infinite;
  display: inline-block;
}

.ios-hello-sub {
  font-size: 0.7rem;
  font-weight: 700;
  color: #00766c;
  background: linear-gradient(135deg, #CCFBF1, #A7F3D0);
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  animation: iosSubFade 3s ease-in-out infinite alternate;
}

@keyframes iosHelloShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes iosHelloPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.025); }
}

@keyframes iosSubFade {
  0%   { opacity: 0.85; }
  100% { opacity: 1; box-shadow: 0 0 6px rgba(0,150,136,0.25); }
}

.navbar .nav-link {
  color: #475569 !important;
  font-size: .875rem;
  font-weight: 500;
  padding: .5rem .85rem;
  border-radius: .375rem;
  transition: all .18s ease-in-out;
}

.navbar .nav-link:hover {
  background: linear-gradient(135deg, #EFF6FF, #F0FDFA);
  color: var(--bs-primary) !important;
  transform: translateY(-1px);
}

.navbar .nav-link.active {
  background: linear-gradient(135deg, #DBEAFE, #CCFBF1);
  color: var(--bs-primary) !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(24, 95, 165, 0.15);
}

/* ── Cards & Panels ───────────────────────────────────────────── */
.card {
  background: var(--siperkasa-card-bg);
  border: 1px solid var(--siperkasa-border) !important;
  border-radius: .6rem !important;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
  transition: box-shadow .2s ease, transform .2s ease;
}

.card:hover {
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.09);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--siperkasa-border);
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: .9rem;
}

/* ── Stat Cards (Dashboard) ───────────────────────────────────── */
.stat-card {
  border-radius: .75rem !important;
  overflow: hidden;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}

.stat-card.stat-blue {
  background: linear-gradient(160deg, #EFF6FF 0%, #DBEAFE 100%);
  border-left: 4px solid #185FA5 !important;
}

.stat-card.stat-green {
  background: linear-gradient(160deg, #F0FDF4 0%, #DCFCE7 100%);
  border-left: 4px solid #15803D !important;
}

.stat-card.stat-amber {
  background: linear-gradient(160deg, #FFFBEB 0%, #FEF3C7 100%);
  border-left: 4px solid #D97706 !important;
}

.stat-card.stat-indigo {
  background: linear-gradient(160deg, #EEF2FF 0%, #E0E7FF 100%);
  border-left: 4px solid #4F46E5 !important;
}

.stat-icon-wrap {
  
}

.stat-icon-blue   { background: linear-gradient(135deg, #185FA5, #3B82F6); color: #fff; }
.stat-icon-green  { background: linear-gradient(135deg, #15803D, #22C55E); color: #fff; }
.stat-icon-amber  { background: linear-gradient(135deg, #D97706, #FBBF24); color: #fff; }
.stat-icon-indigo { background: linear-gradient(135deg, #4F46E5, #818CF8); color: #fff; }

/* ── Tabel & Badges ───────────────────────────────────────────── */
.table {
  font-size: .875rem;
}

.table > thead > tr > th {
  font-weight: 600;
  font-size: .775rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748B;
  border-bottom: 2px solid var(--siperkasa-border);
  padding: .75rem 1rem;
  background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
}

.table > tbody > tr > td {
  padding: .85rem 1rem;
  border-color: var(--siperkasa-border);
  vertical-align: middle;
}

.table > tbody > tr {
  transition: background .15s ease;
}

.table > tbody > tr:hover {
  background: linear-gradient(135deg, #F8FBFF, #F0FDF4);
}

/* ── Badge status surat ──────────────────────────────────────── */
.badge-status-diteruskan {
  background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
  color: #15803D;
  font-weight: 600;
  font-size: .775rem;
  padding: .35rem .75rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid #86EFAC;
  box-shadow: 0 1px 3px rgba(21,128,61,0.15);
}

.badge-status-belum {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  font-weight: 600;
  font-size: .775rem;
  padding: .35rem .75rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid #FCD34D;
  box-shadow: 0 1px 3px rgba(217,119,6,0.15);
}

.badge-status-dibatalkan {
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  color: #991B1B;
  font-weight: 600;
  font-size: .775rem;
  padding: .35rem .75rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid #FCA5A5;
  box-shadow: 0 1px 3px rgba(153,27,27,0.15);
}

/* ── Tombol & Form Controls ──────────────────────────────────── */
.btn {
  font-size: .875rem;
  font-weight: 500;
  border-radius: .4rem;
  padding: .45rem .9rem;
  transition: all .18s ease-in-out;
}

.btn:hover {
  transform: translateY(-1px);
}

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

.btn-primary {
  background: linear-gradient(135deg, #185FA5, #1d76c8);
  border-color: #185FA5;
  box-shadow: 0 2px 8px rgba(24, 95, 165, 0.28);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #144E8A, #185FA5);
  border-color: #144E8A;
  box-shadow: 0 6px 16px rgba(24, 95, 165, 0.36);
}

.btn-danger {
  background: linear-gradient(135deg, #E11D48, #F43F5E);
  border-color: #E11D48;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
}

.btn-danger:hover {
  background: linear-gradient(135deg, #BE123C, #E11D48);
  border-color: #BE123C;
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.35);
}

.btn-warning {
  background: linear-gradient(135deg, #D97706, #F59E0B);
  border-color: #D97706;
}

.form-control,
.form-select {
  border-color: var(--siperkasa-border);
  font-size: .875rem;
  border-radius: .4rem;
  padding: .5rem .75rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(24, 95, 165, .15);
  background-color: #FAFCFF;
}

.input-group-text {
  border-color: var(--siperkasa-border);
  background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
}

/* ── Upload Area ─────────────────────────────────────────────── */
.upload-area {
  border: 2px dashed #93C5FD;
  border-radius: .6rem;
  padding: 2.25rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all .2s ease-in-out;
  background: linear-gradient(135deg, #F8FAFC, #EFF6FF);
}

.upload-area:hover,
.upload-area.dragover {
  border-color: var(--bs-primary);
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  box-shadow: 0 4px 16px rgba(24, 95, 165, 0.12);
}

/* ── Kop Surat Detail ────────────────────────────────────────── */
.kop-surat {
  border: 1px solid var(--siperkasa-border);
  border-radius: .6rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #FFFFFF, #F8FBFF);
  border-left: 4px solid var(--siperkasa-blue) !important;
  margin-bottom: 1rem;
}

.kop-surat .kop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--siperkasa-border);
}

.label-field {
  font-size: .775rem;
  color: var(--siperkasa-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin-bottom: .15rem;
}

.nomor-surat {
  font-size: 1rem;
  font-weight: 700;
  color: var(--siperkasa-blue);
}

/* ── Alert Notifications ──────────────────────────────────────── */
.alert {
  border-radius: .6rem;
}

.alert-success {
  background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
  border-left: 4px solid #22C55E;
  border-top: none;
  border-right: none;
  border-bottom: none;
  color: #14532D;
}

.alert-danger {
  background: linear-gradient(135deg, #FFF1F2, #FFE4E6);
  border-left: 4px solid #F43F5E;
  border-top: none;
  border-right: none;
  border-bottom: none;
  color: #9F1239;
}

.alert-info {
  background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
  border-left: 4px solid #38BDF8;
  border-top: none;
  border-right: none;
  border-bottom: none;
  color: #075985;
}

.alert-warning {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border-left: 4px solid #FBBF24;
  border-top: none;
  border-right: none;
  border-bottom: none;
  color: #78350F;
}

/* ── SKPD Checklist Panel ────────────────────────────────────── */
.skpd-checklist { 
  background: linear-gradient(135deg, #d8d9fc, #F1F5F9) !important;
  border-radius: .5rem !important;
  border: 1px solid var(--siperkasa-border) !important;
}

.skpd-checklist .form-check-input:checked {
  background-color: var(--siperkasa-blue);
  border-color: var(--siperkasa-blue);
}

/* ── Footer ──────────────────────────────────────────────────── */
.app-footer {
  background: linear-gradient(135deg, #F8FAFC, #EFF6FF) !important;
  border-top: 2px solid transparent !important;
  border-image: linear-gradient(90deg, #185FA5 0%, #0D9488 50%, #4F46E5 100%) 1 !important;
  margin-top: auto;
}

/* ── Responsive Mobile Optimizations ─────────────────────────── */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: #FFFFFF;
    padding: 1rem;
    border-radius: .5rem;
    margin-top: .5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--siperkasa-border);
  }

  .navbar .nav-link {
    padding: .65rem 1rem;
    margin-bottom: .25rem;
  }
}

@media (max-width: 767.98px) {
  .container-xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .table-responsive {
    border-radius: .4rem;
    border: 1px solid var(--siperkasa-border);
  }

  .btn-group-sm > .btn,
  .btn-sm {
    padding: .35rem .65rem;
    font-size: .8rem;
  }

  .kop-surat .kop-header {
    flex-direction: column;
    gap: .75rem;
  }
}

/* ── Login Page ────────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("/images/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 1.5rem;
  position: relative;
}

.login-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 30, 55, 0.52);
  z-index: 0;
}

.login-wrapper .login-card {
  position: relative;
  z-index: 1;
  overflow: visible;
  transition: transform 0.35s ease, box-shadow 0.4s ease;
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 1rem;
  padding: 0 2rem 2rem 2rem;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.45) inset;
}

.login-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 28px 55px -8px rgba(0, 0, 0, 0.32),
    0 0 0 2px rgba(34, 197, 94, 0.5),
    0 0 40px rgba(34, 197, 94, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.45) inset;
}

.login-accent-bar {
  height: 5px;
  border-radius: 1rem 1rem 0 0;
  margin: 0 -2rem 2rem -2rem;
  background: linear-gradient(90deg, #27bb4e 0%, #0D9488 40%, #15cf59 75%, #185FA5 100%);
  background-size: 200% 100%;
    animation: accentFlow 4s ease-in-out infinite;
  }

@keyframes accentFlow {
  0%, 100% { background-position: 0% 0%; }
  50%       { background-position: 100% 0%; }
}

.login-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #185FA5;
  text-align: center;
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}

.login-subtitle {
  text-align: center;
  color: #64748B;
  font-size: .82rem;
  margin-bottom: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login-divider {
  display: flex;
  align-items: center;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #CBD5E1, transparent);
}

.login-divider span {
  padding: 0 0.75rem;
  color: #94A3B8;
  font-size: 0.95rem;
}

.input-icon-wrap {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  font-size: 0.85rem;
  z-index: 5;
  pointer-events: none;
  transition: color 0.2s ease;
}

.input-icon-wrap:focus-within .input-icon {
  color: #185FA5;
}

.login-input {
  padding-left: 2.2rem !important;
  border-color: #CBD5E1;
  background: rgba(248, 250, 252, 0.8);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login-input:focus {
  background: #fff;
  border-color: #185FA5;
  box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.12);
}

.login-toggle-btn {
  border: 1px solid #CBD5E1;
  border-left: none;
  color: #94A3B8;
  background: rgba(248, 250, 252, 0.8);
  transition: color 0.2s, background 0.2s;
}

.login-toggle-btn:hover {
  color: #185FA5;
  background: #EFF6FF;
}

.btn-login-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #185FA5 0%, #0D9488 50%, #4F46E5 100%);
  background-size: 200% auto;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 0.72rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 18px rgba(24, 95, 165, 0.38);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: loginBtnGradient 5s ease infinite;
}

@keyframes loginBtnGradient {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

.btn-login-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 80%;
  height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
  transition: left 0.55s ease;
  pointer-events: none;
}

.btn-login-primary:hover::before {
  left: 130%;
}

.btn-login-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(24, 95, 165, 0.45);
  color: #fff;
}

.btn-login-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(24, 95, 165, 0.35);
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  transform: scale(0);
  animation: rippleExpand 0.65s linear forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  to { transform: scale(4.5); opacity: 0; }
}

.login-footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #E2E8F0, transparent);
}

.login-footer-link {
  color: #185FA5;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.login-footer-link:hover {
  color: #1d76c8;
  text-decoration: underline;
}

/* ── Vine / Tanaman Merambat ────────────────────────────────── */
.vine {
  position: absolute;
  width: 95px;
  height: 95px;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.vine-tl { top: -20px;    left: -20px;  }
.vine-tr { top: -20px;    right: -20px; }
.vine-bl { bottom: -20px; left: -20px;  }
.vine-br { bottom: -20px; right: -20px; }

.vine-stem {
  fill: none;
  stroke: #15803d;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.vine-leaf {
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: scale(0.3);
}

.login-card:hover .vine-stem { stroke-dashoffset: 0; }
.login-card:hover .vine-tl .vine-leaf-1 { opacity: .92; transform: scale(1); transition-delay: 0.15s; }
.login-card:hover .vine-tl .vine-leaf-2 { opacity: .88; transform: scale(1); transition-delay: 0.40s; }
.login-card:hover .vine-tl .vine-leaf-3 { opacity: .85; transform: scale(1); transition-delay: 0.65s; }
.login-card:hover .vine-tr .vine-leaf-1 { opacity: .92; transform: scale(1); transition-delay: 0.20s; }
.login-card:hover .vine-tr .vine-leaf-2 { opacity: .88; transform: scale(1); transition-delay: 0.45s; }
.login-card:hover .vine-tr .vine-leaf-3 { opacity: .85; transform: scale(1); transition-delay: 0.70s; }
.login-card:hover .vine-bl .vine-leaf-1 { opacity: .92; transform: scale(1); transition-delay: 0.25s; }
.login-card:hover .vine-bl .vine-leaf-2 { opacity: .88; transform: scale(1); transition-delay: 0.50s; }
.login-card:hover .vine-bl .vine-leaf-3 { opacity: .85; transform: scale(1); transition-delay: 0.75s; }
.login-card:hover .vine-br .vine-leaf-1 { opacity: .92; transform: scale(1); transition-delay: 0.30s; }
.login-card:hover .vine-br .vine-leaf-2 { opacity: .88; transform: scale(1); transition-delay: 0.55s; }
.login-card:hover .vine-br .vine-leaf-3 { opacity: .85; transform: scale(1); transition-delay: 0.80s; }

@keyframes leafSway {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30%       { transform: scale(1) rotate(3deg); }
  70%       { transform: scale(1) rotate(-3deg); }
}

.login-card:hover .vine-leaf {
  animation: leafSway 3s ease-in-out infinite;
  animation-delay: 1s;
}

/* ── Quick Action Cards ──────────────────────────────────────── */
.quick-action-card {
  border-radius: .6rem !important;
  border: none !important;
  padding: .9rem 1.1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  font-size: .875rem;
  transition: transform .2s ease, box-shadow .2s ease;
}

.quick-action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.14) !important;
  text-decoration: none;
}

.quick-action-card.qa-blue   { background: linear-gradient(135deg, #185FA5, #1d76c8); color: #fff; box-shadow: 0 3px 10px rgba(24,95,165,0.3); }
.quick-action-card.qa-teal   { background: linear-gradient(135deg, #0D9488, #14B8A6); color: #fff; box-shadow: 0 3px 10px rgba(13,148,136,0.3); }
.quick-action-card.qa-indigo { background: linear-gradient(135deg, #4F46E5, #6366F1); color: #fff; box-shadow: 0 3px 10px rgba(79,70,229,0.3); }
.quick-action-card.qa-rose   { background: linear-gradient(135deg, #E11D48, #F43F5E); color: #fff; box-shadow: 0 3px 10px rgba(225,29,72,0.3); }
.quick-action-card.qa-amber  { background: linear-gradient(135deg, #D97706, #F59E0B); color: #fff; box-shadow: 0 3px 10px rgba(217,119,6,0.3); }

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state {
  padding: 3.5rem 1rem;
  text-align: center;
  color: #94A3B8;
}

.empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: .5;
}

/* ── Pagination ──────────────────────────────────────────────── */
.page-item.active .page-link {
  background: linear-gradient(135deg, #185FA5, #1d76c8);
  border-color: #185FA5;
}

.page-link {
  color: #185FA5;
  border-color: var(--siperkasa-border);
  border-radius: .35rem !important;
  transition: all .15s ease;
}

.page-link:hover {
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  color: var(--bs-primary);
  border-color: #93C5FD;
}

/* ── Dropdown ────────────────────────────────────────────────── */
.dropdown-menu {
  border-radius: .6rem;
  border: 1px solid var(--siperkasa-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  padding: .4rem;
}

.dropdown-item {
  border-radius: .35rem;
  transition: background .15s ease;
}

.dropdown-item:hover {
  background: linear-gradient(135deg, #EFF6FF, #F0FDFA);
}

/* ── Modal styling ───────────────────────────────────────────── */
.modal-content {
  border-radius: .75rem;
  border: none;
}

.modal-header {
  border-radius: .75rem .75rem 0 0;
}

/* ── Custom Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: #F1F5F9; border-radius: 10px; }
::-webkit-scrollbar-thumb  { background: linear-gradient(135deg, #185FA5, #0D9488); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #144E8A, #0D9488); }

/* ── User Pill Button in Navbar ──────────────────────────────── */
.user-pill-btn {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.user-pill-btn:hover {
  background-color: #F8FAFC !important;
  border-color: #185FA5 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 95, 165, 0.12) !important;
}

/* ── Badge Tipe / Sifat Surat ────────────────────────────────── */
.badge-tipe-biasa {
  background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
  color: #334155;
  font-weight: 600;
  font-size: .75rem;
  padding: .28rem .65rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid #CBD5E1;
}

.badge-tipe-penting {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  font-weight: 600;
  font-size: .75rem;
  padding: .28rem .65rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid #FCD34D;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.15);
}

.badge-tipe-rahasia {
  background: linear-gradient(135deg, #FFE4E6, #FECDD3);
  color: #BE123C;
  font-weight: 600;
  font-size: .75rem;
  padding: .28rem .65rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid #FDA4AF;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.15);
}

.badge-tipe-terbatas {
  background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
  color: #6D28D9;
  font-weight: 600;
  font-size: .75rem;
  padding: .28rem .65rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid #C4B5FD;
  box-shadow: 0 1px 3px rgba(109, 40, 217, 0.15);
}

/* ── Searchable SKPD Dropdown Picker ─────────────────────────── */
.searchable-skpd-container {
  position: relative;
  user-select: none;
}

.searchable-skpd-container .skpd-display-box {
  cursor: pointer;
  background-color: #FFFFFF;
  border: 1px solid var(--siperkasa-border);
  border-radius: 0 .4rem .4rem 0 !important;
  min-height: 38px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.searchable-skpd-container .skpd-display-box:hover {
  border-color: #93C5FD;
}

.searchable-skpd-container.is-open .skpd-display-box {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(24, 95, 165, .15);
}

.searchable-skpd-container .skpd-dropdown-menu {
  border-color: #CBD5E1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
  border-radius: .6rem !important;
  z-index: 1060;
  animation: skpdFadeIn .15s ease-out;
}

@keyframes skpdFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.skpd-options-list {
  max-height: 250px;
  overflow-y: auto;
}

.skpd-option-item {
  cursor: pointer;
  padding: .55rem .75rem;
  border-radius: .4rem;
  transition: background .12s ease-in-out, transform .12s ease;
}

.skpd-option-item:hover {
  background: linear-gradient(135deg, #EFF6FF, #F0FDFA);
  transform: translateX(2px);
}

.skpd-option-item.selected {
  background: linear-gradient(135deg, #DBEAFE, #E0F2FE);
  font-weight: 600;
  border: 1px solid #BFDBFE;
}

.skpd-option-item.selected .check-icon {
  display: inline-block !important;
}

/* ══════════════════════════════════════════════════════════════
   NEW DASHBOARD & NAVBAR REDESIGN (SIPERKASA)
   ══════════════════════════════════════════════════════════════ */

/* ── Stacked Nav Links (Icons on Top, Text Below) ──────────── */
.nav-link-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.45rem 0.85rem !important;
  border-radius: 10px;
  color: #334155 !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  transition: all 0.18s ease;
  min-width: 66px;
  text-decoration: none;
}

.nav-link-stacked i {
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 3px;
}

.nav-link-stacked:hover {
  background: #F1F5F9;
  color: #185FA5 !important;
  transform: translateY(-1px);
}

.nav-link-stacked.active {
  background: #E0EDFB !important;
  color: #185FA5 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ── Navbar Right Profile & Logout Card ────────────────────── */
.nav-user-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.nav-user-card:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
  transform: translateY(-1px);
}

.nav-logout-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  border-radius: 12px;
  padding: 0.35rem 0.85rem;
  color: #E11D48 !important;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.06);
}

.nav-logout-btn i {
  font-size: 1.15rem;
  margin-bottom: 2px;
  color: #E11D48;
}

.nav-logout-btn:hover {
  background: #FFE4E6;
  border-color: #FDA4AF;
  color: #BE123C !important;
  transform: translateY(-1px);
}

/* ── Hero Welcome Box with Panoramic Banner ───────────────── */
.dashboard-hero-box {
  background-image: linear-gradient(90deg, rgba(8, 55, 125, 0.94) 0%, rgba(10, 70, 150, 0.88) 42%, rgba(14, 90, 175, 0.52) 75%, rgba(14, 90, 175, 0.18) 100%), url('/images/dashboard-banner.png');
  background-size: cover;
  background-position: center right;
  border-radius: 16px;
  padding: 2.25rem 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

@media (max-width: 768px) {
  .dashboard-hero-box {
    padding: 1.5rem;
    background-position: center;
  }
}

/* ── Quick Action Colored Cards (Menu & Pintasan Cepat) ────── */
.dashboard-quick-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.15rem;
  border-radius: 14px;
  text-decoration: none;
  color: #ffffff !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  min-height: 72px;
}

.dashboard-quick-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  color: #ffffff !important;
}

.qa-card-blue   { background: #0284C7; }
.qa-card-teal   { background: #0D9488; }
.qa-card-indigo { background: #3B82F6; }
.qa-card-red    { background: #DC2626; }
.qa-card-amber  { background: #D97706; }
.qa-card-purple { background: #7C3AED; }
.qa-card-cyan   { background: #0891B2; }
.qa-card-slate  { background: #64748B; }

.qa-icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #ffffff;
  flex-shrink: 0;
}

.qa-arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #ffffff;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.dashboard-quick-card:hover .qa-arrow-circle {
  transform: translateX(3px);
}

.qa-title {
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.2;
  color: #ffffff;
}

.qa-sub {
  font-size: 0.76rem;
  opacity: 0.88;
  line-height: 1.2;
  margin-top: 3px;
  color: #ffffff;
}