/* Navbar - TikTok Style with Theme Support */

.navbar {
    background: rgba(18, 18, 18, 0.95);  /* Slightly more opaque for better visibility */
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;  /* Ensure it stays above all content */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);  /* Safari support */
}

/* THE CENTRE GROUP IS CENTRED ON THE NAVBAR, NOT ON WHAT IS LEFT OVER.
   This used to be justify-content: space-between across three flex children,
   which only centres the middle one when the logo and the account controls
   happen to be the same width. They never are, and the width of the right-hand
   side changes with the visitor (two buttons signed out, one avatar signed
   in), so Home/Discover/Calendar sat at a different offset on every page.

   The logo and the account controls are taken out of the flow and pinned to
   the edges instead. They now sit over the bar rather than pushing the links
   around, so the centre group is centred on the container, full stop. */
.navbar-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.navbar-logo,
.navbar-user {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.navbar-logo { left: 20px; }
.navbar-user { right: 20px; }

/* Logo Section */
.navbar-logo a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 20px;
}

.logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: block;
    flex: none;
}

.logo-text {
    background: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navigation Links */
.navbar-links {
    display: flex;
    gap: 8px;
    align-items: center;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--text-tertiary);
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s;
    position: relative;
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.nav-link.active {
    color: var(--text-primary);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--accent-primary);
    border-radius: 2px 2px 0 0;
}

.nav-icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.nav-text {
    font-size: 16px;
}

/* User Menu */
.navbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-menu {
    position: relative;
}

.user-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: white;
    transition: transform 0.2s;
}

.user-button:hover .user-avatar {
    transform: scale(1.05);
}

/* User Dropdown */
.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 200px;
    box-shadow: 0 8px 24px var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
}

.user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.dropdown-username {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
}

.dropdown-item {
    display: block;
    padding: 12px 16px;
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.dropdown-item.logout {
    color: var(--accent-primary);
    border-top: 1px solid var(--border-color);
}

.dropdown-item.logout:hover {
    background: rgba(254, 44, 85, 0.1);
}

/* Main Content Spacing */
.main-content {
    min-height: calc(100vh - 60px);
    background: var(--bg-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar-container {
        padding: 0 12px;
    }

    /* Keep the pinned edges in step with the reduced padding. */
    .navbar-logo { left: 12px; }
    .navbar-user { right: 12px; }

    .navbar-links {
        gap: 4px;
    }

    .nav-link {
        padding: 8px 12px;
        font-size: 14px;
    }

    .nav-text {
        display: none;
    }

    .nav-icon {
        width: 20px;
        height: 20px;
    }

    .logo-text {
        display: none;
    }

    .logo-icon {
        width: 26px;
        height: 26px;
        border-radius: 6px;
    }
}

@media (max-width: 480px) {
    .navbar-container {
        height: 56px;
    }

    .nav-link {
        padding: 6px 10px;
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* ==================== Admin Dropdown ==================== */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dropdown-arrow {
    transition: transform 0.2s;
}

.nav-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 160px;
    box-shadow: 0 8px 24px var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 1001;
}

.nav-dropdown.active .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.nav-dropdown-item {
    display: block;
    padding: 12px 16px;
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-dropdown-item:first-child {
    border-radius: 8px 8px 0 0;
}

.nav-dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

.nav-dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.pending-badge {
    color: var(--accent-primary);
    font-weight: 700;
}

/* ==================== Feedback Button & Modal ==================== */
.feedback-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(254, 44, 85, 0.4);
    transition: all 0.2s;
    z-index: 999;
}

.feedback-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(254, 44, 85, 0.5);
}

.feedback-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.feedback-modal.active {
    display: flex;
}

.feedback-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.feedback-modal-content h2 {
    color: var(--text-primary);
    margin: 0 0 24px 0;
    font-size: 22px;
}

.feedback-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.feedback-modal-close:hover {
    color: var(--accent-primary);
}

.feedback-type-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.feedback-type-option {
    flex: 1;
    cursor: pointer;
}

.feedback-type-option input {
    display: none;
}

.feedback-type-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.feedback-type-option input:checked + .feedback-type-label {
    border-color: var(--accent-primary);
    background: rgba(254, 44, 85, 0.1);
    color: var(--accent-primary);
}

.feedback-form-group {
    margin-bottom: 16px;
}

.feedback-form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.feedback-form-group input,
.feedback-form-group textarea {
    width: 100%;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.feedback-form-group input:focus,
.feedback-form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.feedback-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.feedback-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.feedback-btn-cancel,
.feedback-btn-submit {
    flex: 1;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.feedback-btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.feedback-btn-cancel:hover {
    background: var(--bg-hover);
}

.feedback-btn-submit {
    background: var(--accent-primary);
    color: white;
}

.feedback-btn-submit:hover {
    background: var(--accent-hover);
}

.feedback-success {
    text-align: center;
    padding: 40px 20px;
}

.feedback-success svg {
    color: #22c55e;
    margin-bottom: 16px;
}

.feedback-success h3 {
    color: var(--text-primary);
    margin: 0 0 8px 0;
    font-size: 20px;
}

.feedback-success p {
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .feedback-btn {
        bottom: 16px; /* Align with tags and help button */
        left: 16px; /* Left side on mobile */
        right: auto; /* Remove right positioning */
        width: 40px;
        height: 40px;
        z-index: 1000; /* Above other content */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .feedback-modal-content {
        padding: 24px;
    }

    .nav-dropdown-menu {
        left: auto;
        right: 0;
        transform: none;
    }
}

/* ==================== Signed-out account actions ====================
   The navbar used to show nothing at all to a logged-out visitor, so the only
   way to reach sign in was a button inside a page's own content. These two sit
   where the avatar sits once you are signed in. */

.nav-auth-link {
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.2s, background-color 0.2s;
    white-space: nowrap;
}

.nav-auth-link:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.nav-auth-btn {
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--accent-primary);
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 650;
    white-space: nowrap;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 20px -12px rgba(254, 44, 85, 0.95);
}

.nav-auth-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* Below this the nav is icon-only and space is tight; the pill alone still
   carries the message, and sign in is one tap further inside it. */
@media (max-width: 560px) {
    .nav-auth-link { display: none; }
    .nav-auth-btn { padding: 8px 14px; font-size: 14px; }
}