/* Header Styles */
header {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Jangan animasikan layout (tinggi/lebar/posisi) saat auth navbar
     dirender async atau class scrolled berubah. Ini mencegah flicker. */
  transition: background-color 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease;
}

header.scrolled {
  background-color: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Disable blur when mobile menu is open to prevent stacking context bugs */
body.menu-open header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: white !important;
  /* Overlay berada di luar header. Naikkan stacking context header saat
     drawer terbuka agar nav dan tombol hamburger tetap di atas overlay. */
  z-index: 10000;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; 
}

.header-right {
  display: none;
}

/* Mobile Header Profiling - visible only on mobile */

/* ===== SHARED MOBILE CONTROLS =====
   Disimpan di header.css supaya semua halaman user, termasuk Tentang
   dan Kontak, memiliki hamburger dan overlay yang identik. */
.hamburger-menu {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  z-index: 10001;
}

.hamburger-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background: #1e293b;
  border-radius: 999px;
  transform-origin: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger-menu.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  display: block;
  background: rgba(15, 23, 42, 0.52);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 9999;
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.menu-open {
  overflow: hidden;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  width: 100px;
  height: auto;
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
}

/* Logo di dalam drawer nav mobile — HARUS disembunyikan di desktop
   di sini (bukan cuma di dashboard_user.css), karena header.css
   ini dimuat di SEMUA halaman termasuk yang tidak memuat
   dashboard_user.css (Tentang, Kontak, Profil, Pengaturan). Tanpa
   baris ini, elemen .nav-logo tampil full-size tanpa constraint di
   halaman-halaman tersebut. Di-override jadi display:block lagi
   khusus di dalam media query mobile di bawah. */
.nav-logo {
  display: none;
}

/* ===== MAIN CONTAINER =====
   Sama seperti kasus .nav-logo — aturan ini SEBELUMNYA cuma ada di
   dashboard_user.css. Halaman yang tidak memuat file itu (Tentang,
   Kontak, Profil, Pengaturan) jadi tidak punya batasan lebar sama
   sekali untuk .container, sehingga isinya melebar penuh satu
   halaman padahal navbar di atasnya sudah rapi dibatasi 1200px lewat
   .header-container. Ditaruh di sini (header.css, dimuat di semua
   halaman) supaya konsisten di mana pun. */
.container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 30px;
}

/* ===== NAVIGATION =====
   Sebelumnya nav di-posisikan absolute+left:50% supaya selalu di
   tengah header, TAPI itu membuat nav tidak ikut diperhitungkan oleh
   flexbox sama sekali — jadi begitu isi nav bertambah (dari 2 item
   jadi 5 item setelah dropdown ARTIKEL diratakan), lebarnya menabrak
   search bar yang posisinya dihitung terpisah lewat flex order.
   Sekarang nav jadi flex item biasa (flex:1, justify-content:center)
   supaya ruang di antara logo dan search/avatar otomatis menyesuaikan
   lebar nav, berapa pun jumlah link-nya. */
nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex: 1;
  min-width: 0;
}

nav a {
  text-decoration: none;
  color: #64748b;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s;
  padding: 8px 16px;
  border-radius: 8px;
}

nav a:hover, .nav-link.has-caret:hover {
  background-color: #f1f5f9;
  color: #2c3e50;
}

nav a.active {
  color: #2c3e50;
  font-weight: 600;
}

/* ===== SEARCH BOX ===== */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: white;
}

.search-box #icon-search {
  color: #94a3b8;
  width: 18px;
  height: 18px;
}

.search-box input {
  border: none;
  outline: none;
  font-size: 13px;
  width: 180px;
  background: transparent;
}

/* ===== NAV DROPDOWN (masih dipakai di komponen lain, mis. mobile drawer) ===== */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-link.has-caret {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: #64748b;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s;
}

.nav-link.has-caret .caret {
  transition: transform 0.2s ease;
}

.nav-dropdown.open .caret {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 120%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 8px;
  display: none;
  z-index: 1000;
}

.nav-dropdown.open .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: #334155;
  text-decoration: none;
  font: 500 13px/1.2 'Montserrat', system-ui, sans-serif;
}

.dropdown-menu a:hover {
  background: #f1f5f9;
  color: #111827;
}

/* ===== AUTH SECTION ===== */
.auth-section {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Ruang tetap mencegah header bergeser saat Guest/profil selesai dimuat. */
  min-width: 76px;
  justify-content: flex-end;
}

.auth-section .btn-user-login,
.auth-section .btn-login,
.auth-section .btn-register {
  padding: 8px 18px;
  background: #2c3e50;
  color: #f1f5f9;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  text-transform: none;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
}

.auth-section .btn-register {
  background: transparent;
  border: 1.5px solid #2c3e50;
  color: #2c3e50;
}

/* Optimized for icon-only/profile-only appearance on Admin page */
.btn-register.icon-only, .user-profile.btn-register.icon-only, .guest-profile.btn-register.icon-only {
  width: 44px;
  height: 44px;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  gap: 0 !important;
}

.user-profile.btn-register.icon-only .user-avatar, 
.guest-profile.btn-register.icon-only .guest-avatar {
  margin: 0 !important;
}

.auth-section .btn-user-login:hover,
.auth-section .btn-login:hover,
.auth-section .btn-register:hover {
  background: #3b5c92;
  color: white;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.btn-user-login:active,
.btn-register:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* Nav auth section - only visible on mobile (inside side nav) */
.nav-auth-section {
  display: none;
}

/* ===== USER PROFILE + DROPDOWN MENU (Profil Saya / Jurnal Saya / Riwayat Token / Pengaturan / Logout) ===== */
/* .user-profile sekarang murni wrapper posisi relative untuk menu dropdown.
   Style pill (border, padding, dsb) dipindah ke .user-profile-trigger. */
.user-profile {
  position: relative;
  display: flex !important;
  align-items: center;
}

.user-profile-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 50px;
  transition: all 0.2s ease;
  background: transparent;
  border: 1.5px solid #2c3e50;
  color: #2c3e50;
  padding: 4px 8px 4px 4px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}

.user-profile-trigger:hover {
  background: #f8fafc;
}

.user-profile-caret {
  color: #64748b;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.user-profile.open .user-profile-caret {
  transform: rotate(180deg);
}

.user-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* .user-name tetap dipertahankan untuk kompatibilitas (dipakai di
   tempat lain seperti dashboard_user.js setUserName()), tapi sudah
   tidak dirender lagi di dalam trigger navbar. */
.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

/* Header nama+email di dalam dropdown — di sinilah nama lengkap
   ditampilkan sekarang, dengan ellipsis kalau kepanjangan karena
   dropdown punya lebar tetap (beda dari navbar yang harus ikut
   melebar/rusak kalau isinya dipaksa muat). */
.user-profile-menu-header {
  padding: 10px 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-profile-menu-header strong {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-profile-menu-header span {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

.user-profile.open .user-profile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #334155;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.user-profile-menu-item svg,
.user-profile-menu-item i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.user-profile-menu-item:hover {
  background: #f1f5f9;
}

.user-profile-menu-item--danger {
  color: #ef4444;
  border-top: 1px solid #f1f5f9;
  margin-top: 6px;
  padding-top: 12px;
}

.user-profile-menu-item--danger:hover {
  background: #fef2f2;
}

/* ===== GUEST PROFILE (Global) ===== */
.guest-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1.5px solid #e2e8f0;
  background: white;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.guest-profile:hover {
  background: #f8fafc;
  border-color: #2c3e50;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.guest-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 16px;
  transition: all 0.3s ease;
}

.guest-profile:hover .guest-avatar {
  background: #2c3e50;
  color: white;
}

.guest-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  transition: color 0.3s ease;
}

.guest-profile:hover .guest-label {
  color: #2c3e50;
}

/* Responsive untuk mobile */
@media (max-width: 768px) {
  .logo img {
    width: 80px;
  }
  
  .header-container {
    padding: .75rem;
  }

  .auth-section {
    display: none !important;
  }

  .btn-user-login,
  .btn-login,
  .btn-register {
    width: 100%;
    justify-content: center;
    padding: 5px;
  }

  /* Hover for mobile buttons (same as global, retained for specificity in mobile context) */

  .mobile-auth-header {
    display: block;
  }

  .mobile-auth-header .guest-profile {
    padding: 2px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-auth-header .guest-label {
    display: none;
  }

  .mobile-auth-header .guest-avatar {
    background: #f1f5f9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    color: #64748b;
  }

  .mobile-avatar-container {
    position: relative;
    display: flex;
    align-items: center;
  }

  .mobile-header-avatar {
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    transition: transform 0.2s;
  }

  .mobile-header-avatar:active {
    transform: scale(0.9);
  }

  .mobile-logout-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: -10px;
    background: white;
    width: min(280px, calc(100vw - 28px));
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    padding: 10px;
    display: none;
    z-index: 2000;
    animation: fadeInScale 0.2s ease-out;
  }

  .mobile-logout-dropdown.active {
    display: block;
  }

  .dropdown-user-info {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
  }

  .dropdown-user-info strong {
    font-size: 14px;
    color: #1e293b;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dropdown-user-info span {
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .btn-logout-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #334155;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.2s;
  }

  .btn-logout-mobile:hover {
    background: #f1f5f9;
  }

  .btn-logout-mobile#btnMobileLogout {
    color: #ef4444;
    border-top: 1px solid #f1f5f9;
    margin-top: 6px;
    padding-top: 12px;
  }

  .btn-logout-mobile#btnMobileLogout:hover {
    background: #fef2f2;
  }

  @keyframes fadeInScale {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(-10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  /* Nav & Dropdown for Mobile - Fixed Drawer */
  nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateX(-105%) !important;
    width: min(84vw, 320px) !important;
    height: 100dvh !important;
    background: white !important;
    flex-direction: column !important;
    padding: max(1rem, env(safe-area-inset-top)) 0 1.5rem !important;
    gap: 0 !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 15px 0 40px rgba(0, 0, 0, 0.1) !important;
    z-index: 10000 !important;
    display: flex !important;
    overflow-y: auto !important;
    align-items: stretch !important;
    /* Tanpa ini, justify-content:center dari aturan desktop tetap aktif dan
       (karena drawer memakai flex-direction:column) mendorong logo + link
       ke tengah vertikal drawer. Isi drawer harus mulai dari atas. */
    justify-content: flex-start !important;
    text-align: left !important;
  }


  nav.active {
    transform: translateX(0) !important;
  }

  nav > a {
    width: auto;
    margin: 2px 12px;
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 14px;
  }

  nav > a.active {
    background: #eef2f7;
    color: #1e293b;
  }

  /* Logo inside sidebar — WAJIB di kiri-atas drawer.
     order:-1 mengunci posisinya sebagai item pertama walau ada
     elemen lain yang disuntik oleh script lain. align-self/justify
     dipaksa agar tidak ikut aturan center dari layout desktop. */
  .nav-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    order: -1 !important;
    align-self: stretch !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0.25rem 1.25rem 1rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-align: left !important;
    flex: 0 0 auto !important;
  }

  .nav-logo a,
  .nav-logo .logo-link {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-logo img {
    width: 78px !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
  }


  /* Auth section at bottom of sidebar */
  .nav-auth-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 1.5rem !important;
    border-top: 1px solid #f0f0f0 !important;
    margin-top: auto !important;
  }

  /* Dropdown profil di dalam drawer mobile ditampilkan statis (bukan absolute) */
  .nav-auth-section .user-profile-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 8px 0 0;
    margin-top: 10px;
    display: none;
  }

  .nav-auth-section .user-profile.open .user-profile-menu {
    display: block;
  }

  .nav-dropdown {
    width: 100% !important;
    position: static !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .nav-link.has-caret {
    width: 100%;
    justify-content: space-between;
    padding: 12px 16px;
  }

  .nav-dropdown .dropdown-menu {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background: #f8fafc !important;
    padding: 5px 0 5px 20px !important;
    margin-top: 0 !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .nav-dropdown.open .dropdown-menu {
    display: block !important;
  }

  .nav-dropdown .dropdown-menu a {
    padding: 10px 16px;
  }
}

/* Flex Order for Desktop Layout (search bar dihapus, jadi cuma 3 item) */
.logo { order: 1; }
nav { order: 2; }
.auth-section { order: 3; }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .header-container .logo {
    order: 1 !important;
    margin-right: auto !important;
  }

  .header-container .header-right {
    order: 2 !important;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-container .hamburger-menu {
    order: 3 !important;
    position: relative;
    display: flex !important;
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 10px 14px;
  }

  .logo img {
    width: 72px;
  }

  .header-container .header-right {
    gap: 8px;
  }

  .hamburger-menu {
    width: 40px;
    height: 40px;
    padding: 9px;
  }

  .container {
    margin: 28px auto;
    padding: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  header,
  nav,
  .nav-overlay,
  .hamburger-menu span {
    transition: none !important;
  }
}