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

/* ============================================
   PREMIUM 2026 THEME — e-Billing LBN
   ============================================ */

* { font-family: 'Inter', sans-serif !important; }

/* BODY */
body {
  background: #070d1a !important;
  color: #c9d1d9 !important;
}

/* ===== MARQUEE BAR ===== */
.marquee-bar {
  background: linear-gradient(90deg, #070d1a, #0d2248, #070d1a) !important;
  border-bottom: 1px solid rgba(66,165,245,.25) !important;
  box-shadow: 0 1px 12px rgba(21,101,192,.3) !important;
  padding: 5px 0 !important;
  position: relative !important;
  z-index: 999 !important;
}
.marquee-inner {
  color: #64b5f6 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .4px !important;
}
.marquee-dot { color: #ff6b35 !important; }

/* ===== TOPBAR / MAIN HEADER ===== */
.main-header,
.main-header .navbar,
.navbar-static-top {
  background: linear-gradient(135deg, #070d1a 0%, #0d2248 60%, #1565c0 100%) !important;
  border-bottom: 1px solid rgba(66,165,245,.2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.5) !important;
  min-height: 52px !important;
}
.main-header .logo {
  background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: .5px !important;
  box-shadow: 4px 0 16px rgba(255,107,53,.3) !important;
}
.main-header .logo:hover { opacity: .9 !important; }

/* ===== SIDEBAR ===== */
.main-sidebar,
.left-side {
  background: linear-gradient(180deg, #070d1a 0%, #0a1628 50%, #0d1f3a 100%) !important;
  border-right: 1px solid rgba(66,165,245,.1) !important;
  box-shadow: 4px 0 20px rgba(0,0,0,.4) !important;
}

/* User Panel Sidebar */
.user-panel {
  background: rgba(21,101,192,.1) !important;
  border-bottom: 1px solid rgba(66,165,245,.15) !important;
  padding: 12px 16px !important;
}
.user-panel .info a {
  color: #90caf9 !important;
  font-weight: 600 !important;
}

/* Sidebar Menu Label */
.sidebar-menu > li.header {
  color: #1976d2 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  padding: 8px 16px 4px !important;
  background: none !important;
}

/* Sidebar Buttons */
.s-btn, .sidebar-menu > li > a {
  color: #78909c !important;
  border-left: 3px solid transparent !important;
  transition: all .2s ease !important;
  font-size: 12.5px !important;
  padding: 9px 16px !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 1px 8px 1px 0 !important;
  background: none !important;
}
.s-btn:hover, .sidebar-menu > li > a:hover {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(21,101,192,.2), transparent) !important;
  border-left-color: #42a5f5 !important;
  transform: translateX(4px) !important;
}
.s-btn.active, .sidebar-menu > li.active > a {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(21,101,192,.3), transparent) !important;
  border-left-color: #1976d2 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 20px rgba(21,101,192,.15) !important;
}

/* ===== CONTENT WRAPPER ===== */
.content-wrapper,
.right-side {
  background: #070d1a !important;
  background-image: radial-gradient(ellipse at 20% 20%, rgba(21,101,192,.05) 0%, transparent 60%) !important;
  min-height: 100vh !important;
}

/* ===== STAT CARDS (Info Box) ===== */
.info-box {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
  backdrop-filter: blur(10px) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.info-box:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5) !important;
}
.info-box-icon {
  border-radius: 12px 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.info-box-number {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  animation: fadeUp .5s ease !important;
}
.info-box-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ===== BOXES / CARDS ===== */
.box {
  background: #0d1f3a !important;
  border: 1px solid rgba(66,165,245,.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.3) !important;
  overflow: hidden !important;
}
.box-header {
  background: linear-gradient(135deg, rgba(21,101,192,.2), rgba(13,31,58,.8)) !important;
  border-bottom: 1px solid rgba(66,165,245,.1) !important;
  padding: 12px 18px !important;
  border-radius: 14px 14px 0 0 !important;
}
.box-title {
  color: #42a5f5 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.box-body {
  background: transparent !important;
  color: #c9d1d9 !important;
}

/* ===== RINGKASAN PEMBAYARAN ===== */
.small-box {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.35) !important;
  transition: transform .2s !important;
}
.small-box:hover { transform: translateY(-4px) !important; }
.small-box h3 {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
}
.small-box p {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
}

/* ===== PROGRESS BAR ===== */
.progress {
  background: rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
  height: 8px !important;
  overflow: hidden !important;
}
.progress-bar {
  background: linear-gradient(90deg, #1565c0, #42a5f5, #1565c0) !important;
  background-size: 200% !important;
  animation: shimmer 2s linear infinite !important;
  border-radius: 10px !important;
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ===== TABLES ===== */
table {
  border-collapse: collapse !important;
  width: 100% !important;
}
table thead tr {
  background: linear-gradient(135deg, #1565c0, #1976d2) !important;
}
table thead th {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 11px 12px !important;
  letter-spacing: .3px !important;
  border: none !important;
}
table tbody tr {
  border-bottom: 1px solid rgba(66,165,245,.07) !important;
  transition: background .15s !important;
}
table tbody tr:hover {
  background: rgba(21,101,192,.1) !important;
}
table tbody td {
  padding: 9px 12px !important;
  color: #c9d1d9 !important;
  border: none !important;
  font-size: 12.5px !important;
}
.table-striped > tbody > tr:nth-child(odd) {
  background: rgba(255,255,255,.02) !important;
}

/* ===== BUTTONS ===== */
.btn-act, .btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 8px 18px !important;
  transition: all .2s ease !important;
  border: none !important;
  letter-spacing: .2px !important;
}
.btn-act:hover, .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.3) !important;
}
.btn-act.btn-green, .btn-success {
  background: linear-gradient(135deg, #1565c0, #1976d2) !important;
  box-shadow: 0 4px 14px rgba(21,101,192,.35) !important;
}
.btn-act.btn-blue {
  background: linear-gradient(135deg, #0288d1, #0097a7) !important;
}
.btn-act.btn-red, .btn-danger {
  background: linear-gradient(135deg, #c62828, #e53935) !important;
}
.btn-act.btn-orange, .btn-warning {
  background: linear-gradient(135deg, #e65100, #f57c00) !important;
  color: #fff !important;
}
.btn-save {
  background: linear-gradient(135deg, #1565c0, #42a5f5) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(21,101,192,.4) !important;
}

/* ===== INPUTS ===== */
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], input[type=date],
select, textarea {
  background: #0d1f3a !important;
  border: 1px solid rgba(66,165,245,.2) !important;
  color: #c9d1d9 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  transition: .2s !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #1976d2 !important;
  box-shadow: 0 0 0 3px rgba(21,101,192,.2) !important;
  outline: none !important;
  background: #0a1628 !important;
}
input::placeholder { color: #455a64 !important; }

/* ===== SEARCH BOX ===== */
.input-group .form-control {
  background: #0d1f3a !important;
  border-color: rgba(66,165,245,.2) !important;
  color: #c9d1d9 !important;
}
.input-group-btn .btn {
  background: linear-gradient(135deg, #1565c0, #1976d2) !important;
  border: none !important;
  color: #fff !important;
}

/* ===== BADGES ===== */
.badge, .label {
  border-radius: 20px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  letter-spacing: .3px !important;
}
.badge-success, .label-success { background: rgba(21,101,192,.3) !important; color: #42a5f5 !important; }
.badge-danger, .label-danger   { background: rgba(198,40,40,.3) !important; color: #ef9a9a !important; }
.badge-warning, .label-warning { background: rgba(230,81,0,.3) !important; color: #ffcc80 !important; }

/* ===== MODAL ===== */
.modal-content, .overlay .modal {
  background: #0d1f3a !important;
  border: 1px solid rgba(66,165,245,.2) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
  color: #c9d1d9 !important;
}
.modal-header, .m-header {
  background: linear-gradient(135deg, #1565c0, #1976d2) !important;
  border-radius: 14px 14px 0 0 !important;
  border-bottom: none !important;
  padding: 14px 18px !important;
}
.modal-title { color: #fff !important; font-weight: 700 !important; font-size: 14px !important; }
.modal-backdrop { background: #000 !important; opacity: .7 !important; }
.modal-footer {
  border-top: 1px solid rgba(66,165,245,.1) !important;
  background: transparent !important;
}
.m-btns .btn-save {
  background: linear-gradient(135deg, #1565c0, #42a5f5) !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-weight: 700 !important;
}
.m-btns .btn-cancel {
  background: #0a1628 !important;
  border: 1px solid rgba(66,165,245,.2) !important;
  color: #78909c !important;
  border-radius: 8px !important;
}

/* ===== TOAST / ALERT ===== */
.toast-msg, [class*="toast"] {
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}

/* ===== STATUS COLORS ===== */
.text-green, .text-success { color: #42a5f5 !important; }
.text-red, .text-danger    { color: #ef9a9a !important; }
.text-yellow, .text-warning{ color: #ffcc80 !important; }
.bg-green  { background: linear-gradient(135deg,#1a3a6c,#1e4d8c) !important; }
.bg-red    { background: linear-gradient(135deg,#4a1a1a,#6b2020) !important; }
.bg-blue   { background: linear-gradient(135deg,#0d2a4a,#1565c0) !important; }
.bg-yellow { background: linear-gradient(135deg,#3d2800,#5c3d00) !important; }

/* ===== DROPDOWN ===== */
.dropdown-menu {
  background: #0d1f3a !important;
  border: 1px solid rgba(66,165,245,.15) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a {
  color: #90caf9 !important;
  border-radius: 6px !important;
  padding: 7px 12px !important;
  font-size: 12.5px !important;
}
.dropdown-menu > li > a:hover {
  background: rgba(21,101,192,.2) !important;
  color: #fff !important;
}

/* ===== SELECT STATUS ===== */
select option { background: #0d1f3a !important; color: #c9d1d9 !important; }

/* ===== PAGINATION ===== */
.pagination > li > a {
  background: #0d1f3a !important;
  border-color: rgba(66,165,245,.15) !important;
  color: #90caf9 !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
}
.pagination > .active > a {
  background: linear-gradient(135deg,#1565c0,#1976d2) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #070d1a; }
::-webkit-scrollbar-thumb { background: linear-gradient(#1565c0,#42a5f5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #1976d2; }

/* ===== GLOW EFFECTS ===== */
.info-box-icon { position: relative !important; }
.info-box-icon::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: inherit !important;
  filter: blur(12px) !important;
  opacity: .3 !important;
  z-index: -1 !important;
}

/* ===== ANIMATE ON LOAD ===== */
@keyframes slideIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.info-box, .small-box, .box {
  animation: slideIn .4s ease forwards !important;
}
.info-box:nth-child(2) { animation-delay:.1s !important; }
.info-box:nth-child(3) { animation-delay:.2s !important; }
.info-box:nth-child(4) { animation-delay:.3s !important; }