/**
 * Navigation System - Prime Factors Pro
 * Public site navbar and dashboard/admin sidebar components.
 * Requirements: 5.1, 5.2, 5.5, 5.6, 8.7
 */

/* ==========================================================================
   Public Site Navbar (.navbar-pfp) — Compact, single dark row
   ========================================================================== */

.navbar-pfp {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.navbar-pfp__container {
    display: flex;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.5rem 1.25rem;
    gap: 1.5rem;
}

/* Brand / Logo */
.navbar-pfp__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.navbar-pfp__brand img {
    height: 26px;
    width: auto;
}

/* Nav links */
.navbar-pfp__nav {
    display: flex;
    align-items: center;
}

.navbar-pfp__links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-pfp__link {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    padding: 0.25rem 0;
    transition: color 0.2s;
}

.navbar-pfp__link:hover,
.navbar-pfp__link:focus {
    color: #fff;
}

.navbar-pfp__link[aria-current="page"] {
    color: var(--color-secondary);
}

/* Right section: email + buttons */
.navbar-pfp__right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-left: auto;
}

.navbar-pfp__email {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}

.navbar-pfp__email:hover {
    color: var(--color-secondary);
}

/* Actions (CTA Buttons) */
.navbar-pfp__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-pfp__actions .btn-pfp--ghost {
    color: rgba(255,255,255,0.85);
    font-size: 0.6875rem;
    padding: 0.3rem 0.625rem;
}

.navbar-pfp__actions .btn-pfp--ghost:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.navbar-pfp__actions .btn-pfp--primary {
    font-size: 0.6875rem;
    padding: 0.3rem 0.75rem;
}

/* Hamburger Toggle */
.navbar-pfp__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    transition: background 0.2s;
}

.navbar-pfp__toggle:hover {
    background: rgba(255,255,255,0.1);
}

.navbar-pfp__toggle:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Mobile Navigation (collapsed state) */
.navbar-pfp__mobile-nav {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: var(--color-primary);
}

.navbar-pfp__mobile-nav.is-open {
    display: flex;
}

.navbar-pfp__mobile-nav .navbar-pfp__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    min-height: 40px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.8);
    font-size: 0.875rem;
}

.navbar-pfp__mobile-nav .navbar-pfp__link:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.navbar-pfp__mobile-nav .navbar-pfp__link--email {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 0.25rem;
    padding-top: 0.75rem;
}

.navbar-pfp__mobile-nav .navbar-pfp__actions {
    flex-direction: column;
    gap: 0.375rem;
    padding-top: 0.625rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 0.25rem;
}

.navbar-pfp__mobile-nav .navbar-pfp__actions .btn-pfp {
    min-height: 40px;
    justify-content: center;
    font-size: 0.8125rem;
}

/* ==========================================================================
   Responsive: Mobile Navbar (below 768px)
   ========================================================================== */

@media (max-width: 767px) {
    .navbar-pfp__nav,
    .navbar-pfp__right {
        display: none;
    }

    .navbar-pfp__toggle {
        display: flex !important;
        margin-left: auto;
    }

    .navbar-pfp__container {
        padding: 0.4rem 1rem;
    }

    .navbar-pfp__brand img {
        height: 22px;
    }
}

/* ==========================================================================
   Dashboard / Admin Sidebar (.sidebar-pfp)
   ========================================================================== */

.sidebar-pfp {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    width: 260px;
    height: 100vh;
    background: var(--color-bg-dark);
    overflow-y: auto;
    transition: transform var(--transition-base), width var(--transition-base);
}

/* Sidebar Header */
.sidebar-pfp__header {
    display: flex;
    align-items: center;
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-primary-light);
}

.sidebar-pfp__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}

.sidebar-pfp__brand img {
    height: 32px;
    width: auto;
}

.sidebar-pfp__brand-text {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-bg-primary);
    white-space: nowrap;
}

/* Portfolio Balance Display */
.sidebar-pfp__balance {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-primary-light);
}

.sidebar-pfp__balance-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-pfp__balance-value {
    font-family: var(--font-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-bg-primary);
}

/* Sidebar Navigation */
.sidebar-pfp__nav {
    flex: 1;
    padding: var(--space-4) 0;
}

.sidebar-pfp__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-pfp__item {
    margin: var(--space-1) 0;
}

/* Active State */
.sidebar-pfp__item--active {
    background: var(--color-primary-light);
    border-left: 3px solid var(--color-secondary);
}

.sidebar-pfp__item--active .sidebar-pfp__link {
    color: var(--color-bg-primary);
    font-weight: var(--font-weight-semibold);
}

/* Sidebar Link */
.sidebar-pfp__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.sidebar-pfp__link:hover {
    color: var(--color-bg-primary);
    background: var(--color-primary-light);
}

.sidebar-pfp__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

/* Sidebar icon sizing */
.sidebar-pfp__link i,
.sidebar-pfp__link svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Icon Fallback (Requirement 13.1)
   If the Lucide script fails to load, <i data-lucide> elements remain empty.
   These rules ensure the icon placeholder reserves its dimensions and
   does not collapse, so text labels remain visible and layout is preserved.
   ========================================================================== */

.navbar-pfp__toggle i[data-lucide],
.sidebar-pfp__link i[data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
}

.navbar-pfp__toggle i[data-lucide] {
    min-width: 24px;
    min-height: 24px;
}


/* ==========================================================================
   Responsive: Sidebar (below 768px)
   ========================================================================== */

@media (max-width: 767px) {
    .sidebar-pfp {
        transform: translateX(-100%);
    }

    .sidebar-pfp.is-open {
        transform: translateX(0);
    }

    /* Ensure touch targets on mobile */
    .sidebar-pfp__link {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Compact sidebar: icons only (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar-pfp {
        width: 72px;
    }

    .sidebar-pfp__brand-text,
    .sidebar-pfp__balance,
    .sidebar-pfp__link span {
        display: none;
    }

    .sidebar-pfp__header {
        justify-content: center;
        padding: var(--space-4);
    }

    .sidebar-pfp__link {
        justify-content: center;
        padding: var(--space-3);
        min-height: 44px;
        min-width: 44px;
    }

    .sidebar-pfp__item--active {
        border-left-width: 3px;
    }
}

/* Full sidebar: expanded (1024px+) */
@media (min-width: 1024px) {
    .sidebar-pfp {
        width: 260px;
    }
}

/* ==========================================================================
   Touch Target Enforcement (below 1024px per Requirement 8.7)
   ========================================================================== */

@media (max-width: 1023px) {
    .navbar-pfp__link,
    .navbar-pfp__toggle,
    .sidebar-pfp__link {
        min-height: 44px;
        min-width: 44px;
    }
}