/* Style Halaman Login */
.login-image-container {
  padding: 2rem;
  background-color: #f8f9fa; /* Latar belakang untuk gambar */
}

.login-image {
  width: 80%;
  height: 80%;
  object-fit: cover;
  border-radius: 2.5rem; /* Efek Kapsul */
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.login-box {
  background: #ffffff;
  border-radius: 1.5rem; /* Sudut tumpul untuk kotak login */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}

.login-logo {
  width: 85px; /* Sesuaikan ukuran logo */
  height: 85px;
}

.login-heading-1 {
  font-weight: 700;
  color: #212529;
  letter-spacing: 0.5px;
}

.login-heading-2 {
  font-weight: 600;
  color: #495057;
  font-size: 1.1rem;
}

.login-welcome {
  font-weight: 500;
  color: #0d6efd; /* Biru Bootstrap */
  font-size: 1.3rem;
}

.form-floating label {
  color: #6c757d;
}

.btn-login {
  padding: 0.8rem;
  border-radius: 0.75rem;
  font-size: 1rem;
}

/* ========================================= */
/* STYLE DASHBOARD (TAMBAHAN)        */
/* ========================================= */

/* Pengaturan Body & Wrapper Utama */
body {
  background-color: #f4f7f6; /* Latar belakang body utama */
}

#wrapper {
  /* #wrapper adalah 'd-flex' dari header.php
      Ini memastikan tidak ada overflow horizontal
    */
  overflow-x: hidden;
}

/* ----------------- */
/* Style Sidebar */
/* ----------------- */
.sidebar-wrapper {
  width: 22rem; /* Lebar sidebar */
  min-height: 100vh;
  background-color: #2c3e50; /* Warna gelap sidebar */
  color: #ecf0f1;
  transition: margin-left 0.3s ease;

  /* Bayangan pemisah di kanan sidebar */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.sidebar-heading {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo {
  width: 60px;
  height: 60px;
}

.sidebar-title-1 {
  font-weight: 700;
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.sidebar-title-2 {
  font-weight: 500;
  color: #bdc3c7; /* Abu-abu muda */
  font-size: 0.9rem;
}

/* Garis Pemisah Menu */
.sidebar-menu-divider {
  padding: 0.5rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #95a5a6; /* Abu-abu */
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0.5rem;
}

/* Style Item Menu */
.list-group-item-action {
  background-color: #2c3e50; /* Warna sama dgn sidebar */
  color: #ecf0f1; /* Warna teks */
  border: none;
  padding: 0.9rem 1.25rem;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, padding-left 0.2s;
}

/* Efek Hover Menu */
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: #34495e; /* Sedikit lebih terang */
  color: #ffffff;
}

/* Menu Aktif */
.list-group-item-action.active {
  background-color: #0d6efd; /* Biru Primer Bootstrap */
  color: #ffffff;
  font-weight: 700;
  border-left: 5px solid #ffffff; /* Penanda aktif */
}

/* Style Submenu */
.submenu-item {
  padding-left: 2.75rem !important; /* Indentasi submenu */
  background-color: #22303f; /* Latar submenu lebih gelap */
  color: #bdc3c7;
  font-size: 0.9rem;
}

.submenu-item:hover {
  background-color: #34495e;
  color: #ffffff;
}

/* Ikon panah submenu */
.list-group-item[data-bs-toggle="collapse"] i.fa-chevron-down {
  transition: transform 0.3s ease;
}
.list-group-item[data-bs-toggle="collapse"][aria-expanded="true"]
  i.fa-chevron-down {
  transform: rotate(180deg); /* Panah berputar saat submenu terbuka */
}

/* ----------------- */
/* Style Navbar Atas */
/* ----------------- */
#page-content-wrapper {
  min-width: 0;
  width: 100%;
  transition: margin-left 0.3s ease;
}

.navbar {
  min-height: 4rem; /* Tinggi navbar */
}

#sidebarToggle {
  border: none;
  color: #2c3e50;
}
#sidebarToggle:hover {
  color: #0d6efd;
}

.marquee-container {
  flex-grow: 1; /* Mengisi sisa ruang */
  overflow: hidden; /* Sembunyikan marquee yg keluar */
}
.navbar-text {
  color: #6c757d !important;
}

/* ----------------- */
/* Style Konten (Kartu Kapsul) */
/* ----------------- */
.card-kapsul {
  border-radius: 1rem; /* Efek kapsul */
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-kapsul:hover {
  transform: translateY(-5px); /* Efek mengangkat */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
/* Kartu scan spesial */
.card-scan:hover {
  background-color: #c82333; /* Warna merah lebih gelap saat hover */
}

/* ----------------- */
/* Fungsionalitas Toggle & Responsif */
/* ----------------- */

/* Tampilan Default di Desktop (Sidebar Terbuka)
  (min-width: 992px = Ukuran 'lg' Bootstrap)
*/
@media (min-width: 992px) {
  .sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    margin-left: 0 !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Status Toggled (Tertutup) di Desktop
      Ketika body punya kelas .sb-sidenav-toggled
    */
  body.sb-sidenav-toggled .sidebar-wrapper {
    margin-left: -22rem; /* Sembunyikan sidebar ke kiri */
  }

  body.sb-sidenav-toggled #page-content-wrapper {
    margin-left: 0; /* Konten jadi full-width */
  }
}

/* Tampilan Default di Mobile (Sidebar Tertutup)
  (max-width: 991.98px)
*/
@media (max-width: 991.98px) {
  .sidebar-wrapper {
    margin-left: -22rem; /* Sidebar tersembunyi */
  }

  #page-content-wrapper {
    margin-left: 0; /* Konten full-width */
  }

  /* Status Toggled (Terbuka) di Mobile
    */
  body.sb-sidenav-toggled .sidebar-wrapper {
    margin-left: 0; /* Tampilkan sidebar */
  }
}

/* Style untuk foto thumbnail di tabel data */
.foto-thumbnail {
  width: 50px;
  height: 50px;
  object-fit: cover; /* Agar foto tidak gepeng */
  border-radius: 50%; /* Membuat foto jadi bulat (opsional, ganti ke 0.25rem jika mau kotak) */
  border: 2px solid #ddd;
}