@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css');
body { 
  margin: 0;
  padding: 0;  
  background-color: #f8f9fa; }
.file-box { background: #fff; border: 1px solid #dee2e6; padding: 1rem; margin-bottom: 1rem; border-radius: 0.5rem; }
.file-box img, .file-box embed { max-width: 100%; height: auto; margin-top: 0.5rem; margin-bottom: 0.5rem; }
.inline-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.error { color: red; margin-top: 1rem; }
h2, h4 { margin-top: 1rem; }

.folder-card {
  text-decoration: none;
  color: inherit;
  transition: transform .15s;
}
.folder-card:hover {
  transform: scale(1.05);
}
.file-card .file-icon {
  font-size: 4rem;
  color: #6c757d;
  margin: 2rem auto;
}
.file-card embed,
.file-card img {
  max-height: 150px;
  object-fit: contain;
}

/* ===== Full-width Header with Background Image ===== */
.divisi-header {
  width: 100%;
  background: url('assets/images/header.jpg') center center/cover no-repeat;
  position: relative;
  /* atur tinggi header sesuai kebutuhan */
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divisi-header .overlay {
  /* overlay gelap untuk teks tetap terbaca */
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.divisi-header h1,
.divisi-header p {
  color: #fff;
  z-index: 1;
}


main { margin-left: 220px; }

/* ----- Login page only ----- */
body.login-page {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #f0f2f5;
  height: 100vh;
}

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.login-card {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  width: 320px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
}

.login-logo {
  max-width: 80px;
  margin-bottom: 1rem;
}

.login-title {
  margin-bottom: 1.5rem;
  color: #333;
}

.login-card .form-group {
  margin-bottom: 1rem;
  text-align: left;
}

.login-card .form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.login-card .form-group input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.login-btn {
  width: 100%;
  padding: 0.6rem;
  background-color: #e67e22;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  
}

.login-btn:hover {
  background-color: #6c757d !important;
  color: #fff;
}

/* ===== Accent oranye untuk judul, folder & tombol Logout ===== */

/* Judul divisi */
.container h2 {
  color: #e67e22;
  margin-bottom: 0.5rem;
}




/* Tombol Logout */
.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.5rem;

  color: #fff;
  border-radius: .4rem;
  text-decoration: none;
  font-size: .9rem;
  transition: background-color .2s;
    background-color: #6c757d !important;
  color: #fff !important;

    padding: 0.6rem 1.2rem;
  border-width: 2px;
    border-radius: 0.4rem;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  font-weight: 500;
}

.btn-logout:hover {
    background-color: #fff !important;
  border-color:#6c757d  !important;
  color: #6c757d    !important;
}

/* Icon & nama folder jadi oranye */
.folder-card i {
  color: #000 !important;
}
.folder-card p {
  color: #e67e22;
  font-weight: 500;
}



/* ===== Position Logout Button to Top-Right of Container ===== */
.container {
  position: relative;
  padding-top: 2.5rem; /* beri ruang di atas agar logout tidak menimpa judul */
  padding-bottom: 2.5rem;
}

.btn-logout {
  position: absolute;
  top: 0;      /* sesuaikan kalau ingin lebih rendah/tinggi */
  right: 0;    /* sesuaikan kalau ingin lebih ke dalam */
}

/* ===== Header ===== */
.divisi-header {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  position: relative;
}
.divisi-header .overlay {
  background: rgba(0, 0, 0, 0.4);
}

/* ===== Divisi Cards ===== */
.divisi-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.divisi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.divisi-card .card-title {
  color: #333;
}
.divisi-card .text-muted {
  font-size: 0.9rem;
}

.card-body{
  color:#e67e22;
}

/* ===== Logout Button index ===== */
.btn-outline-light {
  padding: 0.6rem 1.2rem !important;
  border-width: 2px !important;
  border-radius: 0.4rem !important;
  gap: 0.4rem !important;
  padding: 0.5rem 0.9rem !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  background-color: #e67e22 !important;
}
.btn-outline-light:hover {
  background-color: #fff !important;
  color: #e67e22 !important;
  border-color: #e67e22 !important;
}

.btn-outline-light-logout {
  padding: 0.6rem 1.2rem !important;
  border-width: 2px !important;
  border-radius: 0.4rem !important;
  gap: 0.4rem !important;
  padding: 0.5rem 0.9rem !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  background-color: #e67e22 !important;
}

/* Thumbnail height */
.thumb {
  height: 80px;
  object-fit: contain;
}

/* Pastikan dropdown di atas */
.card.position-relative .dropdown {
  z-index: 10;
}

.dropdown-item{

  padding: 0.6rem 1.2rem !important;
  border-width: 2px !important;
  border-radius: 0.4rem !important;
  gap: 0.4rem !important;
  padding: 0.5rem 0.9rem !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;

}

.dropdown-item::after{

  color:#fff;
}

/* styling tombol ⋮ di pojok card */
.card .dropdown-toggle {
  background-color: #e67e22;    /* oranye */
  color: #fff;                  /* titik putih */
  width: 25px;
  height: 25px;
  padding: 0;
  border-radius: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
}
/* sembunyikan caret bawaan bootstrap */
.card .dropdown-toggle::after {
  display: none;
}
/* saat hover & focus */
.card .dropdown-toggle:hover,
.card .dropdown-toggle:focus {
  background-color: #cf711c;
  color: #fff;
}

#menu-toggle{
	transition:all .3s;
	font-size:2em;
}


.card .dropdown-toggle {
background-color: #e67e22; color:#fff;
width:25px; height:25px; padding:0;
border-radius:20%; display:flex;
align-items:center; justify-content:center;
    }

.card .dropdown-toggle::after { display:none; }
.card .dropdown-toggle:hover { background-color:#cf711c; }
.thumb { height:80px; object-fit:contain; }

/* saat item dropdown diklik (maupun diberi class .active) */
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active {
  background-color: #e67e22 ; /* ganti dengan warna yang kamu mau */
  color: #fff !important;                /* teks putih agar kontras */
}

/* opsional: saat hover juga oranye */
.dropdown-menu .dropdown-item:hover {
  background-color: #e67e22;
  color: #fff;
}

/* opsional: saat hover juga oranye */
.dropdown-menu .dropdown-item.text-danger:hover {
  background-color: #e67e22;
  color: #fff !important;
}