/*
 * Clareza Acadêmica — navegação global
 * Camada escopada para preservar os hooks e a estrutura legada do navbar.
 */

.navbar-clarity,
.bottom-nav-clarity {
    --nav-primary: #667eea;
    --nav-primary-hover: #545fcb;
    --nav-primary-soft: #f0f1ff;
    --nav-surface: #ffffff;
    --nav-ink: #1f2937;
    --nav-muted: #6b7280;
    --nav-subtle: #9ca3af;
    --nav-border: #e5e7eb;
    --nav-border-strong: #d8dce5;
    --nav-danger: #ef4444;
    --nav-radius-sm: 9px;
    --nav-radius-md: 14px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.navbar-clarity,
.navbar-clarity.scrolled {
    min-height: 68px;
    padding: 0.35rem 0;
    background: var(--nav-surface);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 4px 18px rgba(31, 41, 55, 0.07);
    transition: box-shadow 0.2s ease;
}

.navbar-clarity.scrolled {
    box-shadow: 0 7px 22px rgba(31, 41, 55, 0.10);
}

.navbar-clarity .navbar-brand-netflix {
    min-height: 44px;
    padding: 0.25rem 0.35rem;
    color: var(--nav-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
    font-size: 1.02rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.navbar-clarity .navbar-brand-netflix > i {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    border-radius: 10px;
    background: var(--nav-primary-soft);
    color: var(--nav-primary);
    font-size: 0.92rem;
}

.navbar-clarity .navbar-brand-netflix:hover {
    color: var(--nav-primary-hover);
    filter: none;
    transform: none;
}

.navbar-clarity .navbar-nav {
    align-items: center;
    gap: 0.15rem;
}

.navbar-clarity .nav-link-netflix {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.7rem !important;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: var(--nav-radius-sm);
    color: #4b5563 !important;
    font-size: 0.86rem;
    font-weight: 650;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.navbar-clarity .nav-link-netflix::before {
    display: none;
}

.navbar-clarity .nav-link-netflix:hover,
.navbar-clarity .nav-link-netflix.active {
    color: var(--nav-primary-hover) !important;
    background: var(--nav-primary-soft);
    border-color: #e2e4ff;
    box-shadow: none;
    transform: none;
}

.navbar-clarity .btn-search-desktop {
    width: 44px;
    min-width: 44px;
    padding: 0 !important;
    color: var(--nav-muted) !important;
}

.navbar-clarity .btn-search-desktop:hover {
    color: var(--nav-primary-hover) !important;
    background: var(--nav-primary-soft) !important;
}

.navbar-clarity .nav-wcoin-pill {
    min-height: 40px;
    color: #854d0e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 0.78rem;
    white-space: nowrap;
}

.navbar-clarity .nav-wcoin-pill i {
    color: #d97706;
}

.navbar-clarity .btn-netflix-primary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--nav-primary);
    border-radius: var(--nav-radius-sm);
    background: var(--nav-primary);
    color: #fff;
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.navbar-clarity .btn-netflix-primary:hover {
    border-color: var(--nav-primary-hover);
    background: var(--nav-primary-hover);
    color: #fff;
    box-shadow: none;
    filter: none;
    transform: none;
}

.navbar-clarity .btn-netflix-outline {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nav-border-strong);
    border-radius: var(--nav-radius-sm);
    background: var(--nav-surface);
    color: var(--nav-ink);
}

.navbar-clarity .btn-netflix-outline:hover {
    border-color: var(--nav-primary);
    background: var(--nav-primary-soft);
    color: var(--nav-primary-hover);
    box-shadow: none;
    transform: none;
}

.navbar-clarity .nav-notif-bell {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: var(--nav-radius-sm);
    color: var(--nav-muted) !important;
}

.navbar-clarity .nav-notif-bell:hover {
    border-color: #e2e4ff;
    background: var(--nav-primary-soft);
    color: var(--nav-primary-hover) !important;
}

.navbar-clarity .nav-notif-badge {
    top: -1px;
    right: -3px;
    border-color: var(--nav-surface);
    background: var(--nav-danger);
    box-shadow: none;
}

.navbar-clarity #userMenu {
    min-height: 44px;
    max-width: 220px;
    padding: 0.25rem 0.45rem !important;
    border: 1px solid transparent;
    border-radius: var(--nav-radius-sm);
    color: var(--nav-ink);
    font-size: 0.82rem;
    font-weight: 650;
}

.navbar-clarity #userMenu:hover,
.navbar-clarity #userMenu[aria-expanded="true"] {
    border-color: #e2e4ff;
    background: var(--nav-primary-soft);
    color: var(--nav-primary-hover);
}

.navbar-clarity .nav-username {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-clarity .user-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid var(--nav-border-strong);
    box-shadow: none;
}

.navbar-clarity .user-avatar:hover {
    border-color: var(--nav-primary);
    transform: none;
}

.navbar-clarity .dropdown-menu-estudar,
.navbar-clarity .dropdown-menu-netflix {
    padding: 0.4rem;
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-md);
    background: var(--nav-surface);
    box-shadow: 0 18px 50px rgba(31, 41, 55, 0.10);
    animation: none;
}

.navbar-clarity .dropdown-menu-estudar {
    min-width: 235px;
    margin-top: 0.45rem;
}

.navbar-clarity .dropdown-menu-estudar .dropdown-item,
.navbar-clarity .quick-links .dropdown-item,
.navbar-clarity .accordion-body-custom .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: var(--nav-radius-sm);
    color: #374151;
    font-size: 0.84rem;
    font-weight: 600;
}

.navbar-clarity .dropdown-menu-estudar .dropdown-item:hover,
.navbar-clarity .quick-links .dropdown-item:hover,
.navbar-clarity .accordion-body-custom .dropdown-item:hover {
    padding-left: 0.75rem;
    border-left: 0;
    background: var(--nav-primary-soft);
    color: var(--nav-primary-hover);
    transform: none;
}

.navbar-clarity .dropdown-menu-estudar .dropdown-item.active,
.navbar-clarity .dropdown-menu-estudar .dropdown-item.active:hover,
.navbar-clarity .dropdown-item.quick-link.active,
.navbar-clarity .accordion-body-custom .dropdown-item.active {
    padding-left: 0.75rem !important;
    border-left: 0;
    background: var(--nav-primary-soft) !important;
    color: var(--nav-primary-hover) !important;
}

.navbar-clarity .dropdown-menu-estudar .dropdown-item i,
.navbar-clarity .dropdown-menu-estudar .dropdown-item.active i,
.navbar-clarity .quick-links .dropdown-item i,
.navbar-clarity .dropdown-item.quick-link.active i,
.navbar-clarity .accordion-body-custom .dropdown-item i,
.navbar-clarity .accordion-body-custom .dropdown-item.active i {
    color: var(--nav-primary) !important;
    opacity: 1;
}

.navbar-clarity .dropdown-menu-netflix {
    width: 340px;
    min-width: 340px;
    max-width: min(340px, calc(100vw - 1rem));
    max-height: calc(100vh - 86px);
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.navbar-clarity .dropdown-menu-netflix .user-header {
    padding: 1rem;
    border-bottom: 1px solid var(--nav-border);
    background: #fafbff;
}

.navbar-clarity .user-header-avatar {
    border-color: var(--nav-border-strong);
}

.navbar-clarity .quick-links {
    padding: 0.4rem;
    border-bottom-color: var(--nav-border);
}

.navbar-clarity .accordion-item-custom {
    border-bottom-color: var(--nav-border);
}

.navbar-clarity .accordion-button-custom {
    min-height: 48px;
    padding: 0.7rem 1rem;
    color: #374151;
    font-size: 0.86rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.navbar-clarity .accordion-button-custom:hover,
.navbar-clarity .accordion-button-custom:not(.collapsed) {
    border-left: 0;
    background: var(--nav-primary-soft);
    color: var(--nav-primary-hover);
}

.navbar-clarity .accordion-button-custom .accordion-icon i {
    color: var(--nav-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.navbar-clarity .accordion-body-custom {
    background: #fafbfc;
}

.navbar-clarity .dropdown-footer-actions {
    padding: 0.75rem;
    border-top-color: var(--nav-border);
    background: #fafbfc;
}

.navbar-clarity .dropdown-footer-actions .btn-logout {
    min-height: 44px;
    border-color: var(--nav-border-strong);
    border-radius: var(--nav-radius-sm);
    box-shadow: none;
}

.navbar-clarity .dropdown-footer-actions .btn-logout:hover {
    background: #fff7f7;
    border-color: #fecaca;
    color: var(--nav-danger);
    transform: none;
}

.navbar-clarity :is(a, button):focus-visible,
.bottom-nav-clarity a:focus-visible {
    outline: 3px solid rgba(102, 126, 234, 0.28);
    outline-offset: 2px;
    box-shadow: none !important;
}

@media (max-width: 1399.98px) and (min-width: 1200px) {
    .navbar-clarity > .container {
        max-width: 100%;
        padding-inline: 1rem;
    }

    .navbar-clarity .navbar-brand-netflix {
        font-size: 0.94rem;
    }

    .navbar-clarity .navbar-brand-netflix > i {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .navbar-clarity .nav-link-netflix {
        padding-inline: 0.55rem !important;
    }

    .navbar-clarity .navbar-nav.align-items-center > .nav-item {
        margin-right: 0.35rem !important;
    }

    .navbar-clarity .nav-username {
        max-width: 110px;
    }
}

@media (max-width: 1199.98px) {
    .navbar-clarity,
    .navbar-clarity.scrolled {
        min-height: 64px;
        padding: 0.25rem 0;
    }

    .navbar-clarity > .container {
        max-width: 100%;
        padding-inline: 0.85rem;
    }

    .navbar-clarity .navbar-brand-netflix {
        font-size: 0.95rem;
    }

    .navbar-clarity .navbar-brand-netflix > i {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .navbar-clarity .wcoin-mobile-pill {
        min-height: 36px;
        padding: 0.35rem 0.65rem;
        border-color: #fde68a;
        background: #fffbeb;
        color: #854d0e;
    }

    .navbar-clarity .wcoin-mobile-pill i {
        color: #d97706;
    }

    .navbar-clarity .btn-icon-mobile,
    .navbar-clarity .navbar-toggler {
        width: 44px;
        min-width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        border: 1px solid var(--nav-border-strong) !important;
        border-radius: var(--nav-radius-sm) !important;
        background: var(--nav-surface);
        color: var(--nav-muted);
    }

    .navbar-clarity .btn-icon-mobile:hover,
    .navbar-clarity .navbar-toggler:hover {
        border-color: #e2e4ff !important;
        background: var(--nav-primary-soft) !important;
        color: var(--nav-primary-hover);
        transform: none;
    }

    .navbar-clarity .navbar-toggler-icon {
        width: 22px !important;
        height: 22px !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .navbar-clarity .navbar-toggler.active .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23667eea' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6l18 18M6 24L24 6'/%3e%3c/svg%3e") !important;
    }

    .navbar-clarity #navbarNav.offcanvas {
        width: min(90vw, 360px);
        border-left: 1px solid var(--nav-border);
        background: var(--nav-surface);
        color: var(--nav-ink);
        box-shadow: -14px 0 42px rgba(31, 41, 55, 0.14);
    }

    .navbar-clarity #navbarNav .offcanvas-header {
        min-height: 64px;
        padding: 0.7rem 1rem;
        border-bottom: 1px solid var(--nav-border);
    }

    .navbar-clarity #navbarNav .offcanvas-title {
        display: flex;
        align-items: center;
        color: var(--nav-ink);
        font-size: 1rem;
        font-weight: 750;
    }

    .navbar-clarity #navbarNav .offcanvas-title i {
        color: var(--nav-primary);
    }

    .navbar-clarity .btn-close-offcanvas {
        width: 44px;
        height: 44px;
        border-color: var(--nav-border);
        border-radius: var(--nav-radius-sm);
        background: #f9fafb;
        color: var(--nav-muted);
        transform: none;
    }

    .navbar-clarity .btn-close-offcanvas:hover {
        background: var(--nav-primary-soft);
        color: var(--nav-primary-hover);
        transform: none;
    }

    .navbar-clarity #navbarNav .offcanvas-body {
        padding: 0.65rem 0.75rem 1.25rem;
    }

    .navbar-clarity #navbarNav .navbar-nav {
        align-items: stretch;
        gap: 0.2rem;
    }

    .navbar-clarity #navbarNav .nav-link-netflix {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
        margin: 0;
        color: #374151 !important;
    }

    .navbar-clarity #navbarNav .nav-link-netflix:hover,
    .navbar-clarity #navbarNav .nav-link-netflix.active {
        color: var(--nav-primary-hover) !important;
        background: var(--nav-primary-soft);
    }

    .navbar-clarity #navbarNav .dropdown-menu-estudar {
        width: 100% !important;
        max-width: none !important;
        margin: 0.2rem 0 0.45rem !important;
        padding: 0.3rem !important;
        border: 1px solid var(--nav-border) !important;
        border-radius: var(--nav-radius-sm) !important;
        background: #fafbfc !important;
        box-shadow: none !important;
    }

    .navbar-clarity #navbarNav .dropdown-menu-estudar .dropdown-item,
    .navbar-clarity #navbarNav .dropdown-menu-estudar .dropdown-item:hover,
    .navbar-clarity #navbarNav .dropdown-menu-estudar .dropdown-item.active {
        min-height: 44px;
        padding: 0.6rem 0.7rem !important;
        border-left: 0;
        border-radius: 8px;
        color: #374151 !important;
    }

    .navbar-clarity #navbarNav .dropdown-menu-estudar .dropdown-item:hover,
    .navbar-clarity #navbarNav .dropdown-menu-estudar .dropdown-item.active {
        background: var(--nav-primary-soft) !important;
        color: var(--nav-primary-hover) !important;
    }

    .navbar-clarity #navbarNav .navbar-nav.align-items-center {
        margin-top: 0.65rem;
        padding-top: 0.65rem;
        border-top-color: var(--nav-border);
    }

    .navbar-clarity #navbarNav .nav-notif-bell {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start !important;
        padding: 0.55rem 0.7rem !important;
        color: #374151 !important;
    }

    .navbar-clarity #navbarNav .nav-mobile-label {
        color: inherit;
        font-weight: 650;
    }

    .navbar-clarity #userMenu {
        width: 100%;
        max-width: none;
        min-height: 48px;
        padding: 0.35rem 0.5rem !important;
    }

    .navbar-clarity #navbarNav .dropdown-menu-netflix {
        position: static !important;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: none;
        margin-top: 0.35rem;
        border: 1px solid var(--nav-border);
        border-radius: var(--nav-radius-md);
        box-shadow: none !important;
        transform: none !important;
    }

    .navbar-clarity .mobile-create-btn {
        padding: 0.75rem 0;
    }

    .navbar-clarity .mobile-create-btn a {
        min-height: 44px;
        border-radius: var(--nav-radius-sm);
        background: var(--nav-primary);
        box-shadow: none;
    }

    .navbar-clarity .mobile-create-btn a:hover {
        background: var(--nav-primary-hover);
        box-shadow: none;
        transform: none;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .bottom-nav-clarity {
        display: none !important;
    }

    body {
        padding-bottom: 0;
    }

    #comp-invite-toast {
        bottom: 20px !important;
    }
}

@media (max-width: 767.98px) {
    .bottom-nav-clarity {
        min-height: 68px;
        padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
        align-items: stretch;
        border-top: 1px solid var(--nav-border);
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -6px 22px rgba(31, 41, 55, 0.10);
        backdrop-filter: blur(12px);
    }

    .bottom-nav-clarity .bottom-nav-item {
        min-height: 54px;
        gap: 3px;
        padding: 0.35rem 0.15rem;
        border-radius: var(--nav-radius-sm);
        color: var(--nav-muted);
        font-size: 0.64rem;
        font-weight: 650;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

    .bottom-nav-clarity .bottom-nav-item:hover,
    .bottom-nav-clarity .bottom-nav-item.active {
        background: var(--nav-primary-soft);
        color: var(--nav-primary-hover);
    }

    .bottom-nav-clarity .bottom-nav-item.active::before {
        top: -5px;
        left: 32%;
        right: 32%;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--nav-primary);
    }

    .bottom-nav-clarity .bottom-nav-item.active i {
        color: var(--nav-primary);
        transform: none;
    }

    .bottom-nav-clarity .bottom-nav-item-create {
        margin-top: 0;
    }

    .bottom-nav-clarity .bottom-nav-item-create .bn-create-btn {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        background: var(--nav-primary);
        color: #fff !important;
        box-shadow: none;
        font-size: 1rem;
        transform: none;
    }

    .bottom-nav-clarity .bottom-nav-item-create:hover .bn-create-btn {
        background: var(--nav-primary-hover);
        transform: none;
    }

    .bottom-nav-clarity .bottom-nav-item-create > span:last-child {
        color: var(--nav-primary-hover);
    }

    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 390px) {
    .navbar-clarity > .container {
        padding-inline: 0.5rem;
    }

    .navbar-clarity .navbar-mobile-actions {
        gap: 0.35rem !important;
        margin-right: 0.35rem !important;
    }

    .navbar-clarity .wcoin-mobile-pill {
        padding-inline: 0.5rem;
        font-size: 0.72rem;
    }

    .bottom-nav-clarity .bottom-nav-item {
        font-size: 0.61rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-clarity *,
    .navbar-clarity *::before,
    .navbar-clarity *::after,
    .bottom-nav-clarity *,
    .bottom-nav-clarity *::before,
    .bottom-nav-clarity *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}