/* ═══════════════════════════════════════════════════════════════
   PintarRPH Dark Theme — Navbar Overrides
   Overrides inline styles in navbar.html
   ═══════════════════════════════════════════════════════════════ */

/* ── Main Navbar ───────────────────────────────────────────── */
.navbar {
    background: rgba(13, 13, 31, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-brand {
    color: var(--dark-accent, #fbbf24) !important;
}

.navbar-brand:hover {
    color: var(--dark-accent-hover, #f59e0b) !important;
}

/* ── Nav Links ─────────────────────────────────────────────── */
.navbar .nav-link {
    color: rgba(255, 255, 255, 0.65) !important;
}

.navbar .nav-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dark-accent, #fbbf24) !important;
}

.navbar .nav-link.active {
    background: rgba(251, 191, 36, 0.1) !important;
    color: var(--dark-accent, #fbbf24) !important;
}

.navbar .nav-link i {
    color: inherit;
}

/* Monitoring link (was green inline) */
.navbar .nav-link[href="/monitoring/"] {
    color: var(--dark-success, #34d399) !important;
}

/* Admin link (was red inline) */
.navbar .nav-link.text-danger {
    color: var(--dark-danger, #fca5a5) !important;
}

.navbar .nav-link.text-danger:hover {
    background: rgba(252, 165, 165, 0.1) !important;
}

/* ── Navbar Buttons ────────────────────────────────────────── */
.navbar .btn-primary {
    background: var(--dark-accent, #fbbf24) !important;
    border-color: var(--dark-accent, #fbbf24) !important;
    color: #0d0d1f !important;
    font-weight: 700 !important;
}

.navbar .btn-primary:hover {
    background: var(--dark-accent-hover, #f59e0b) !important;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.4) !important;
}

.navbar .btn-outline-primary {
    background: transparent !important;
    border: 2px solid var(--dark-accent, #fbbf24) !important;
    color: var(--dark-accent, #fbbf24) !important;
}

.navbar .btn-outline-primary:hover {
    background: var(--dark-accent, #fbbf24) !important;
    color: #0d0d1f !important;
}

.navbar .btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.navbar .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: white !important;
}

/* ── Hamburger Button ──────────────────────────────────────── */
.hamburger-btn span {
    background: rgba(255, 255, 255, 0.7) !important;
}

.hamburger-btn:hover span {
    background: var(--dark-accent, #fbbf24) !important;
}

/* ── Mobile Menu Overlay ───────────────────────────────────── */
#mobileMenu {
    background: rgba(13, 13, 31, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.mobile-menu-inner {
    background: #0a0f1f !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5) !important;
}

.mobile-menu-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.mobile-menu-header .navbar-brand {
    color: var(--dark-accent, #fbbf24) !important;
}

.mobile-menu-close {
    color: rgba(255, 255, 255, 0.5) !important;
}

.mobile-menu-close:hover {
    color: var(--dark-accent, #fbbf24) !important;
}

/* ── Mobile Menu Links ─────────────────────────────────────── */
.mobile-menu-link {
    color: rgba(255, 255, 255, 0.7) !important;
}

.mobile-menu-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dark-accent, #fbbf24) !important;
}

.mobile-menu-link.active {
    background: rgba(251, 191, 36, 0.1) !important;
    color: var(--dark-accent, #fbbf24) !important;
}

.mobile-menu-link i {
    color: var(--dark-accent, #fbbf24) !important;
}

/* Mobile logout link override */
.mobile-menu-link[style*="color:#ef4444"],
.mobile-menu-link[style*="color: #ef4444"] {
    color: var(--dark-danger, #fca5a5) !important;
}

/* ── Mobile Menu CTA Buttons ───────────────────────────────── */
.mobile-menu-cta-primary {
    background: var(--dark-accent, #fbbf24) !important;
    color: #0d0d1f !important;
    border: none !important;
    font-weight: 700 !important;
}

.mobile-menu-cta-primary:hover {
    background: var(--dark-accent-hover, #f59e0b) !important;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.4) !important;
}

.mobile-menu-cta-secondary {
    background: transparent !important;
    border: 2px solid var(--dark-accent, #fbbf24) !important;
    color: var(--dark-accent, #fbbf24) !important;
}

.mobile-menu-cta-secondary:hover {
    background: var(--dark-accent, #fbbf24) !important;
    color: #0d0d1f !important;
}

.mobile-menu-link-voucher {
    color: var(--dark-accent, #fbbf24) !important;
    background: rgba(251, 191, 36, 0.08) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

/* ── Mobile Menu Divider ───────────────────────────────────── */
.mobile-menu-divider {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── Download Modal ────────────────────────────────────────── */
#downloadModal {
    background: rgba(13, 13, 31, 0.85) !important;
    backdrop-filter: blur(8px) !important;
}

#downloadModal .modal-box {
    background: #0a0f1f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
    color: var(--dark-text, white) !important;
}

#downloadModal .modal-box h3 {
    color: white !important;
}

#downloadModal .modal-box p {
    color: rgba(255, 255, 255, 0.6) !important;
}

#downloadModal .modal-btn-copy {
    background: var(--dark-accent, #fbbf24) !important;
    color: #0d0d1f !important;
}

#downloadModal .modal-btn-wa {
    background: #25D366 !important;
    color: white !important;
}

#downloadModal .modal-btn-dismiss {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#downloadModal .modal-btn-dismiss:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}