/* Navbar / chrome styles, extracted VERBATIM from templates/base.html's
 * inline <style> block (advisory P5) — only the themed background and
 * foreground literals became var() reads (values in themes.css; dark
 * defaults identical to the old literals). Everything else is byte-for-
 * byte the original rules, quirky indentation included.
 */

.custom-navbar {
    background: var(--theme-nav-bg);
    padding: 0.75rem 1rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.navbar-brand {
    color: var(--theme-nav-fg) !important;
    font-size: 1.5rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.navbar a {
    color: var(--theme-nav-fg);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar a:hover {
    color: #228B22;
    background-color: rgba(34, 139, 34, 0.1);
    border-radius: 4px;
}

.dropdown-menu {
    background-color: var(--theme-surface-bg);
    border: 1px solid var(--theme-surface-border);
    display: none !important;
    min-width: 200px;
}

.dropdown-item {
    color: var(--theme-surface-fg);
    transition: background-color 0.3s ease;
    text-align: right;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.dropdown-item i {
    order: 2;
}

.dropdown-item:hover {
    background-color: rgba(34, 139, 34, 0.2);
    color: #228B22;
}

/* A menu entry whose page needs a broker-LINKED account the user does not
 * have (base.html: Track a Fund / Unrealized Gains / Trades). Bootstrap's
 * own .dropdown-item.disabled colour is stated here too because this sheet
 * loads later and its themed .dropdown-item rules would otherwise fight it.
 * #8a8a8a reads as grey against BOTH surface backgrounds (#2a2a2a dark,
 * #ffffff light), so one literal covers both themes. The `title` reason
 * lives on the wrapping <li> — pointer-events:none would swallow a tooltip
 * set on the anchor itself. */
.dropdown-item.disabled,
.dropdown-item.disabled:hover,
.dropdown-item.disabled i {
    color: #8a8a8a;
    background-color: transparent;
    cursor: default;
    pointer-events: none;
}

.dropdown-item-goal {
    color: #007bff !important;
    background-color: #ffffff;
    font-weight: 600;
}

.dropdown-item-goal i {
    color: #007bff !important;
}

.dropdown-item-goal:hover {
    background-color: #e5c689 !important;
    color: #0056b3 !important;
}

.dropdown-item-goal:hover i {
    color: #0056b3 !important;
}

.dropdown-item-goal img.ai-icon-sm {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 2px;
}

.btn-hamburger {
    background: none;
    border: none;
    color: var(--theme-nav-fg);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 1.5rem;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.btn-hamburger:hover {
    color: #228B22;
}

.btn-hamburger:focus {
    outline: none;
    box-shadow: none;
}

.btn-hamburger::after {
    display: none;
}

/* Disable hamburger when user is not authenticated */
.btn-hamburger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.btn-hamburger:disabled:hover {
    color: var(--theme-nav-fg);
}

.auth-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 1;
    min-width: 0;
}

.auth-buttons .btn {
    font-weight: 500;
    white-space: nowrap;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.btn-outline-light {
    border-color: var(--theme-nav-fg);
    color: var(--theme-nav-fg);
}

.btn-outline-light:hover {
    background-color: #ffffff;
    color: #1a1a1a;
}

.btn-success-custom {
    background-color: #228B22;
    border-color: #228B22;
    color: #ffffff;
}

.btn-success-custom:hover {
    background-color: #1a6b1a;
    border-color: #1a6b1a;
}

.btn-logout {
    background: none;
    border: 2px solid var(--theme-nav-fg);
    color: var(--theme-nav-fg);
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.btn-logout:hover {
    background-color: #ffffff;
    color: #1a1a1a;
}

.dropdown:hover .dropdown-menu {
    display: block !important;
}

.dropdown-menu-end {
    right: 0;
    left: auto;
}

.navbar .container-fluid {
    flex-wrap: nowrap;
}

.navbar .d-flex {
    flex-wrap: nowrap;
    min-width: 0;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .navbar-brand {
        font-size: 1.2rem;
    }

    .btn-logout {
        max-width: 120px;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .auth-buttons .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .btn-hamburger {
        font-size: 1.25rem;
        padding: 0.25rem 0.5rem;
    }

    .custom-navbar {
        padding: 0.5rem 0.75rem;
    }

    .btn-logout .username-text {
        display: none;
    }

    /* Page-header nav button: collapse to icon-only on phone-width */
    .nav-btn-label {
        display: none;
    }
}

@media (max-width: 400px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .auth-buttons {
        gap: 0.25rem;
    }
}

/* Give main content room below fixed navbar */
main {
    padding-top: 70px;
}

/* Add space above footer so content doesn't butt up against it */
footer {
    margin-top: 2rem;
    padding-top: 1rem;
}