/* 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; }

.raw-toggle { margin-top: 14px; }
.btn-raw {
  background-color: #212534; border: 1px solid #282c3f; color: #a0a5ba;
  border-radius: 8px; padding: 8px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, color .15s;
}
.btn-raw:hover { background-color: #282c3f; color: #38bdf8; }
.raw-json {
  margin-top: 10px; background-color: #0d0e14; border: 1px solid #282c3f; border-radius: 10px;
  padding: 14px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
  color: #9fe6b0; white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow-y: auto;
}
body.light-theme .btn-raw { background-color: #eef0f8; border-color: #e4e6ef; color: #575d7a; }
body.light-theme .btn-raw:hover { background-color: #e4e6ef; color: #2563eb; }
body.light-theme .raw-json { background-color: #f4f5f9; border-color: #e4e6ef; color: #166534; }

/* ---- 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 .endpoint-item { border-color: #e4e6ef; }