/* Navbar dua lapis "DPS System" -- SATU-SATUNYA sumber gaya navbar, dipakai
   finance (webapp/templates/base.html) DAN Operasional (operasional/templates/
   base.html memuat file ini dari /static/navbar.css milik finance), supaya
   berpindah bagian terasa satu aplikasi.
   Lapis 1: brand + tombol bagian (Operasional / Finance) + user.
   Lapis 2: menu bagian yang sedang dibuka. */
.sysnav {
  --sn-bg: #ffffff;
  --sn-border: #e2e5ea;
  --sn-text: #1a1a2e;
  --sn-muted: #6b7280;
  --sn-accent: #3d5afe;
  --sn-aktif-bg: #1a1a2e;
  background: var(--sn-bg);
  border-bottom: 1px solid var(--sn-border);
  font-family: "Inter var", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.sysnav a { text-decoration: none; }

.sysnav-l1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0.6rem 1.5rem;
}
.sysnav-brand { font-weight: 800; color: var(--sn-text); letter-spacing: -0.01em; white-space: nowrap; }
.sysnav-bagian { display: flex; gap: 0.35rem; flex: 1; flex-wrap: wrap; }
.sysnav-btn {
  color: var(--sn-text);
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--sn-border);
  white-space: nowrap;
}
.sysnav-btn:hover { border-color: var(--sn-accent); color: var(--sn-accent); }
.sysnav-btn.aktif, .sysnav-btn.aktif:hover { background: var(--sn-aktif-bg); border-color: var(--sn-aktif-bg); color: #fff; }
.sysnav-user { color: var(--sn-muted); font-size: 0.9rem; white-space: nowrap; }
.sysnav-user a { color: var(--sn-muted); text-decoration: underline; }
.sysnav .role-badge { font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 4px; vertical-align: middle; }
.sysnav .role-badge.role-direktur { color: #16803c; background: #e6f4ea; }
.sysnav .role-badge.role-admin { color: var(--sn-muted); background: var(--sn-border); }

.sysnav-l2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.45rem 1.5rem;
  border-top: 1px solid var(--sn-border);
  background: #fafbfc;
  font-size: 0.92rem;
}
.sysnav-l2 a { color: var(--sn-text); padding: 0.1rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.sysnav-l2 a:hover { color: var(--sn-accent); }
.sysnav-l2 a.aktif { color: var(--sn-accent); font-weight: 700; border-bottom-color: var(--sn-accent); }
.sysnav-l2 a.tulis { color: var(--sn-accent); font-weight: 700; }
.sysnav-ket { color: var(--sn-muted); font-size: 0.85rem; }
.sysnav-sep { width: 1px; align-self: stretch; background: var(--sn-border); margin: 0 0.25rem; }
.sysnav-label {
  margin-left: auto;
  font-size: 0.65rem; font-weight: 700; color: #16803c; background: #e6f4ea;
  padding: 0.15rem 0.4rem; border-radius: 4px; white-space: nowrap;
}

@media (max-width: 640px) {
  .sysnav-l1 { padding: 0.55rem 1rem; gap: 0.4rem 0.75rem; }
  .sysnav-bagian { flex: 0 1 auto; }
  .sysnav-user { flex-basis: 100%; order: 3; font-size: 0.85rem; }
  .sysnav-btn { padding: 0.25rem 0.65rem; }
  .sysnav-l2 { padding: 0.4rem 1rem; gap: 0.2rem 0.85rem; }
  .sysnav-label { margin-left: 0; }
}