/* navbar.css — dropdown UI untuk bell/avatar + tema terang, dipakai bersama */

.nav-dropdown-wrap { position: relative; }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 220px;
  background-color: #1a1d2a;
  border: 1px solid #282c3f;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  padding: 8px;
  display: none;
  flex-direction: column;
  z-index: 400;
  animation: navDropIn .15s ease;
}
.nav-dropdown.open { display: flex; }
@keyframes navDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.nav-dropdown-title { font-size: 12.5px; font-weight: 700; color: #a0a5ba; padding: 8px 10px 4px; }
.nav-dropdown-empty { font-size: 13px; color: #5c6178; padding: 14px 10px; text-align: center; }

.nav-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: 8px;
  color: #d7dae5; font-size: 13.5px; text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-dropdown-item:hover { background-color: #212534; color: #fff; }
.nav-dropdown-item i { width: 16px; text-align: center; color: #787f96; }

.result-quota { margin-top: 12px; font-size: 12px; color: #7d8496; display: flex; align-items: center; gap: 6px; }

/* ---- Tema terang (toggle via ikon matahari) ---- */
body.light-theme { background: #f4f5f9; color: #1b1e2b; }
body.light-theme .navbar { background-color: #ffffff; border-bottom-color: #e4e6ef; }
body.light-theme .search-box { background-color: #f0f1f6; border-color: #e4e6ef; color: #6c728f; }
body.light-theme .search-box input { color: #1b1e2b; }
body.light-theme .menu-btn { color: #6c728f; }
body.light-theme .menu-btn:hover, body.light-theme .menu-btn.active { background-color: #eef0f8; color: #2563eb; }
body.light-theme .nav-icon { color: #6c728f; }
body.light-theme .nav-icon:hover { background-color: #eef0f8; color: #2563eb; }
body.light-theme .avatar { box-shadow: 0 2px 10px rgba(37,99,235,.25); }
body.light-theme .sidebar { background-color: #ffffff; border-right-color: #e4e6ef; }
body.light-theme .menu-link { color: #4b5170; }
body.light-theme .menu-link i:first-child { color: #8a90ab; }
body.light-theme .menu-link:hover, body.light-theme .menu-link.active { background-color: #eef0f8; color: #1b1e2b; }
body.light-theme .submenu { border-left-color: #e4e6ef; }
body.light-theme .submenu a { color: #575d7a; }
body.light-theme .submenu a:hover, body.light-theme .submenu a.active { background-color: #eef0f8; color: #2563eb; }
body.light-theme .card,
body.light-theme .result-panel,
body.light-theme .section-box,
body.light-theme .stat-card,
body.light-theme .nav-dropdown { background-color: #ffffff; border-color: #e4e6ef; box-shadow: 0 8px 24px rgba(20,20,40,.06); }
body.light-theme .hero-panel,
body.light-theme .readout,
body.light-theme .route-table { background: #ffffff; border-color: #e4e6ef; }
body.light-theme .route-row { border-bottom-color: #eef0f6; }
body.light-theme .route-row:hover { background-color: #f7f8fc; }
body.light-theme .route-path { color: #333750; }
body.light-theme .readout-value, body.light-theme .status-title { color: #1b1e2b; }
body.light-theme .readout-label, body.light-theme .status-sub, body.light-theme .route-empty { color: #7c8199; }
body.light-theme .panel-heading { color: #1b1e2b; }
body.light-theme .spotify-panel { background: #ffffff; border-color: #e4e6ef; }
body.light-theme .spotify-head, body.light-theme .spotify-track { border-bottom-color: #eef0f6; }
body.light-theme .spotify-track:hover { background-color: #f7f8fc; }
body.light-theme .spotify-name, body.light-theme .spotify-track-title { color: #1b1e2b; }
body.light-theme .spotify-owner, body.light-theme .spotify-track-artist, body.light-theme .spotify-track-duration { color: #7c8199; }
body.light-theme .input-box { background-color: #f4f5f9; border-color: #e4e6ef; color: #1b1e2b; }
body.light-theme .page-sub, body.light-theme .page-note, body.light-theme .placeholder-msg { color: #5b6178; }
body.light-theme .result-quota { color: #7c8199; }
body.light-theme .nav-dropdown-item { color: #333750; }
body.light-theme .nav-dropdown-item:hover { background-color: #eef0f8; color: #1b1e2b; }
body.light-theme .nav-dropdown-title { color: #7c8199; }
body.light-theme .status-card { border-color: #e4e6ef; background-color: #f4f5f9; }
body.light-theme .status-hero-stat { background-color: #f4f5f9; }
body.light-theme .btn-refresh, body.light-theme .btn-auto { background-color: #eef0f8; border-color: #e4e6ef; color: #333750; }
body.light-theme .btn-refresh:hover, body.light-theme .btn-auto:hover { background-color: #e4e6ef; }
body.light-theme .sidebar-brand { border-bottom-color: #e4e6ef; }
body.light-theme .sidebar-brand-tag { color: #7c8199; }
body.light-theme .sidebar-section-label { color: #9095ab; }
body.light-theme .json-result-block { background-color: #f4f5f9; border-color: #e4e6ef; color: #333750; }