/* Rest Area Action Buttons: Edit, Hapus, Tambah */
.btn-warning, .btn-danger, .btn-primary {
  color: #fff !important;
}
/* KPI Card Icon Centering Fix */
.icon-shape {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px !important;
  font-size: 2rem;
  color: #fff !important;
  margin-right: 16px;
  margin-left: 0;
  float: left;
}
.icon-shape i,
.icon-shape .material-icons-round,
.icon-shape .fas,
.icon-shape .far {
  font-size: 1.2rem;
}

/* Dashboard card icon specific fix */
.card-stat .icon-shape {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-right: 16px;
  flex-shrink: 0;
}

.card-stat .icon-shape i.material-icons {
  font-size: 2.2rem !important;
  line-height: 1;
  width: auto;
  height: auto;
  position: relative; /* Penting untuk positioning */
  margin: 0 !important;
}

/* Sidebar nav icon styling */
.nav-item .icon .fas,
.nav-item .icon .far,
.nav-item .icon i.material-icons {
  font-size: 1.25rem !important; /* Sedikit lebih besar */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  width: 24px !important;
  height: 24px !important;
  text-align: center !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  line-height: 24px !important;
}

/* Memastikan container ikon memiliki ukuran dan posisi yang konsisten */
.nav-item .icon {
  min-width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Card Stat Styling untuk Dashboard */
.card-stat .card-header {
  min-height: 90px;
  padding: 1rem !important;
}

.card-stat .card-header .text-end {
  margin-left: auto;
  padding-left: 10px;
  text-align: right !important;
}

.card-stat .stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

/* Membuat display flex untuk konten dalam card-header */
.card-stat .card-header .d-flex {
  width: 100%;
  align-items: center !important;
  justify-content: space-between;
}

/* Override untuk ikon Material di kartu */
.card-stat .card-header .material-icons.text-white {
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  top: 0;
}

/* Sidebar dropdown menu styling */
.sidebar-dropdown-menu {
  display: none;
  padding: 0.5rem 0;
  margin: 0 0 0 20px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sidebar-dropdown-menu.show {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
  z-index: 1000;
}

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

.sidebar-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  color: #3b82f6 !important; /* Biru tua seperti logo */
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in;
  font-weight: 500;
  text-decoration: none;
  background-color: transparent;
  margin: 2px 5px;
}

.sidebar-dropdown-menu .dropdown-item:hover,
.sidebar-dropdown-menu .dropdown-item:focus {
  color: #1e40af !important; /* Biru lebih tua saat hover */
  background-color: #f0f7ff; /* Background biru sangat muda */
  font-weight: 600;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.1);
}

/* Styling untuk Material Icons dalam dropdown menu */
.sidebar-dropdown-menu .dropdown-item .material-icons {
  font-size: 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.js-sidebar-dropdown-toggle::after {
  /* Removed decorative dropdown caret because the toggle is not functional in all places */
  display: none !important;
  content: none !important;
}
.icon-shape svg {
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
}
#sidenav-main .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

#sidenav-main .nav-link .icon,
#sidenav-main .nav-link i {
  min-width: 32px;
  text-align: center;
  font-size: 1.4rem;
  margin-right: 0 !important;
}

#sidenav-main .nav-link-text {
  flex: 1;
  text-align: left;
}
/* Hilangkan garis horizontal di bawah judul dashboard */
.hero, .page-header, .hero::after, .page-header::after {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* =========================
   EYE-CATCHING PROFESSIONAL UI
   ========================= */

/* 0) Tokens */
:root{
  --brand:#214985;         /* biru JMSS */
  --brand-2:#4a7bc9;       /* biru aksen */
  --accent:#f1c40f;        /* kuning aksen */
  --bg:#f7f9fc;            /* background halaman */
  --card:#ffffff;
  --line:#e8edf5;
  --text:#1f2937;
  --muted:#6b7280;
}

/* 1) Font global */
html, body, button, input, textarea, select,
h1,h2,h3,h4,h5,h6, .btn, .navbar, .sidenav, .card, .table{
  font-family:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif !important;
  color:var(--text);
}

/* 2) Background halaman */
body{ background:var(--bg) !important; }

/* 3) Sidebar */
.sidenav{ background:#ebf2ff !important; border-right:1px solid #d9e6ff !important; }
.navbar-vertical .navbar-nav .nav-link{ color:var(--brand) !important; font-weight:500; }
.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-link:hover{
  background:linear-gradient(180deg,var(--brand-2) 0%,#739fe0 100%) !important;
  color:#fff !important; border-radius:10px !important; box-shadow:0 4px 12px rgba(74,123,201,.25);
}
.navbar-vertical .navbar-nav .nav-link i{ color:var(--brand) !important; }
.navbar-vertical .navbar-nav .nav-link.active i,
.navbar-vertical .navbar-nav .nav-link:hover i{ color:#fff !important; }

/* 4) Card umum */
.card{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  box-shadow:0 6px 24px rgba(33,73,133,.08) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(33,73,133,.12) !important; }
.card .card-header{
  background:#fff !important; color:var(--text) !important;
  border-bottom:1px solid var(--line) !important; border-radius:14px 14px 0 0 !important;
  padding:14px 18px !important; position:relative;
}
/* Hilangkan garis gradien di atas card */
.card::before{ display:none !important; }

/* 5) KPI cards (ikon & warna) */
.icon-shape{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:12px !important;font-size:1.2rem;color:#fff !important;
}
.card-stat.stat-pengakuan .stat-icon{ background:linear-gradient(135deg,#214985,#3b82f6); }
.card-stat.stat-tagihan   .stat-icon{ background:linear-gradient(135deg,#b58900,#e0a800); }
.card-stat.stat-selisih   .stat-icon{ background:linear-gradient(135deg,#dc2626,#b91c1c); }
.card-stat.stat-tenant    .stat-icon{ background:linear-gradient(135deg,#15803d,#16a34a); }
.card-stat.stat-selisih h4{ color:#dc2626 !important; }

/* 6) Table */
.table{ border-color:var(--line) !important; }
.table thead th{ background:#f3f7ff; color:#334155; font-weight:700; border-bottom:1px solid var(--line) !important; }
.table tbody tr:hover{ background:#f7fbff; }

/* 7) Buttons */
.btn-primary{ background:linear-gradient(180deg,var(--brand-2),#3f6fb5) !important; border-color:transparent !important; box-shadow:0 8px 16px rgba(44,62,80,.15) !important; }
/* Button shadow abu-abu saat aktif/fokus/hover */
.btn:focus, .btn:active, .btn-primary:focus, .btn-primary:active {
  box-shadow:0 0 0 0.2rem rgba(44,62,80,0.15) !important;
  outline:none !important;
}
.btn-outline-primary{ color:var(--brand) !important; border-color:var(--brand) !important; }
.btn-outline-primary:hover{ background:var(--brand) !important; color:#fff !important; }

/* 8) Chart canvas & teks */
.card canvas{ background:#fff !important; }
.chart-title,.legend-label{ color:var(--text) !important; }

/* 9) Badge */
.badge.bg-gradient-primary{ background:var(--brand-2) !important; }
.badge.bg-gradient-warning{ background:var(--accent) !important; color:#1f2937 !important; }

/* 10) Garis horizontal penuh di bawah header/judul */
.page-header,.hero,header.bg-white{
  background:transparent !important; border:none !important; box-shadow:none !important;
  text-align:center; padding:1rem 0; margin-bottom:1.5rem; position:relative;
}
.page-header::after,.hero::after,header.bg-white::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brand);
}
.page-header h1,.hero h1,header.bg-white h1{ color:var(--brand) !important; font-weight:900 !important; letter-spacing:.3px; }

/* 11) BERSIHKAN KARTU CHART (NO BINGKAI WARNA) */
.card .card-header,
.card .card-body,
.card .card-footer,
.card .bg-primary,
.card .bg-info,
.card .bg-success,
.card .bg-warning,
.card .bg-danger,
.card .bg-secondary,
.card .bg-dark,
.card .bg-light,
.card [class*="bg-gradient"],
.card [class^="bg-"],
.card.bg-primary,
.card.bg-info,
.card.bg-success,
.card.bg-warning,
.card.bg-danger,
.card.bg-secondary,
.card.bg-dark,
.card[class*="bg-gradient"]{
  background:#fff !important;
  background-image:none !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}

/* Canvas chart benar-benar polos */
.card .card-body canvas,
.chart,
.chart-canvas {
  background:#fff !important;
  border:none !important;
  box-shadow:none !important;
}

/* Navbar */
.navbar {
  background-color: white;
  overflow: hidden;
  width: 100%;
}