/* === NAVBAR BASE STYLE === */
.navbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #98d0fd;
  box-shadow: 0 14px 22px -12px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;                 /* desktop height */
  padding: 6px 48px;
  box-sizing: border-box;
}

/* brand */
.brand-left{ display:flex; align-items:center; gap:10px; }
.brand-left img{ height:60px; width:auto; border-radius:8px; }
.brand-text{ font-weight:700; font-size:20px; color:#0f172a; }

/* === HAMBURGER === */
.hamburger{
  display:none !important;       /* desktop: pastikan tersembunyi */
  width:42px; height:42px;
  border:0; border-radius:10px;
  background:#ffffffcf;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  cursor:pointer;
  align-items:center; justify-content:center;
}
.hamburger:focus{ outline:3px solid #bfdcff; }
.hamburger .bar{
  position:relative; width:22px; height:2px; background:#0f172a; border-radius:2px;
  transition:transform .25s ease, background .25s ease;
}
.hamburger .bar::before,
.hamburger .bar::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#0f172a; border-radius:2px;
  transition:transform .25s ease, top .25s ease, opacity .2s ease;
}
.hamburger .bar::before{ top:-7px; }
  .hamburger .bar::after{ top:7px; }w:0; transform:rotate(45deg); }
.hamburger.active .bar::after{ top:0; transform:rotate(-45deg); }

/* === MENU (DESKTOP) === */
ul.menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap:30px;
  background:#fff;
  border:1px solid #dbeafe;
  border-radius:999px;
  padding:6px 18px;
  margin:0;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
}
ul.menu>li{ position:relative; white-space:nowrap; }
ul.menu>li>a{
  color:#0f172a; text-decoration:none; font-weight:700; padding:4px 10px; border-radius:8px;
  transition:background .2s, color .2s;
}
ul.menu>li>a:hover{ color:#2563eb; background:#eef4ff; }

/* === DROPDOWN (DESKTOP hover) === */
.dropdown{
  display:none; position:absolute; top:100%; left:0; min-width:200px;
  background:#fff; border:1px solid #dbeafe; border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15); padding:8px 0; z-index:10;
}
.dropdown a{
  display:block; padding:10px 14px; text-decoration:none; color:#0f172a; font-size:14px;
}
.dropdown a:hover{ background:#eef4ff; color:#2563eb; }
ul.menu>li:hover .dropdown{ display:block; }

/* === LOGOUT BUTTON === */
.logout-btn{
  background:#fee2e2; color:#b91c1c; border:none; border-radius:999px;
  padding:10px 18px; font-weight:700; cursor:pointer; transition:all .15s;
  box-shadow:0 6px 12px rgba(239,68,68,0.15);
}
.logout-btn:hover{ filter:brightness(.95); transform:translateY(-1px); }

/* === ROLE THEMES === */
.navbar.pelamar    { background:linear-gradient(90deg, #3D1AA8, #3D1AA8); }
.navbar.karyawan   { background:linear-gradient(90deg, #3D1AA8, #3D1AA8); }
.navbar.supervisor { background:linear-gradient(90deg, #2F237B, #2F237B); }
.navbar.direksi    { background:linear-gradient(90deg, #4A1AD6, #4A1AD6); }
.navbar.guest      { background:linear-gradient(90deg, #4A1AD6, #4A1AD6); } 

/* === USER INFO (desktop) === */
.user-info{ font-size:20px; color:#0f172a; display:flex; align-items:center; gap:8px; }
.role-badge{ background:#2563eb; color:#fff; padding:4px 10px; border-radius:999px; font-size:.8rem; }

/* cegah wrap aneh di desktop */
@media (min-width:981px){
  ul.menu{ flex-wrap:nowrap; }
}

/* ============================= */
/* ========== MOBILE =========== */
/* ============================= */
@media (max-width:980px){
  .navbar{ height:64px; padding:8px 16px; }
  .brand-left img{ height:42px; }
  .brand-text{ font-size:16px; }
  .user-info{ display:none; }                        /* versi desktop disembunyikan */
  .hamburger{ display:inline-flex !important; }

  /* Panel menu mobile: default HILANG (tidak memakan ruang) */
  ul.menu{
    position:fixed;
    top:64px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:6px;
    background:#fff;
    border:1px solid #dbeafe;
    border-radius:16px !important;
    padding:12px 14px;
    margin:8px 10px;
    display:none;                                     /* kunci: tidak terlihat & tidak memakan ruang */
  }
  ul.menu.open{
    display:flex;                                     /* tampil saat burger ditekan */
    max-height:70vh;
    overflow:auto;
    box-shadow:0 18px 42px rgba(0,0,0,.15);
  }

  ul.menu>li>a{ display:block; padding:12px; border-radius:10px; }

  /* dropdown: dibuka via JS (class .show) */
  .dropdown{
    position:static; display:none; border:none; box-shadow:none;
    padding:4px 0 8px; margin-left:6px; border-left:2px dashed #dbeafe;
  }
  .dropdown.show{ display:block; }

  .logout-btn{ width:100%; }
}