/* public/assets/css/app-nav.css
   Nav bar for authenticated "app" pages (resources/views/layouts/app-shell.blade.php).
   White background matching the site's real theme (brand red #ff4136 for accents),
   not the old dark-navy mockup look. Kept separate from layout.css, which still
   styles the old header used by layouts/frontend.blade.php. */

.app-nav {
    background: #fff;
    border-bottom: 1.5px solid #e5e7eb;
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 40px;
    gap: 0;
    font-family: 'DM Sans', 'Inter', sans-serif;
}

/* Only the tab row scrolls when it overflows — the logo and the right-side
   user info/Go to Home button must always stay visible, never pushed
   off-screen by a long tab list. */
.app-nav-tabs {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    height: 58px;
}
.app-nav-tabs::-webkit-scrollbar { height: 3px; }

.app-nav-logo {
    display: flex;
    align-items: center;
    margin-right: 36px;
    flex-shrink: 0;
    text-decoration: none;
}
.app-nav-logo-img {
    max-height: 34px;
    display: block;
}

.app-nav a.app-nav-tab {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    padding: 0 14px;
    height: 58px;
    display: flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    transition: color .15s;
}
.app-nav a.app-nav-tab:hover { color: var(--theme-color, #ff4136); }
.app-nav a.app-nav-tab.act {
    color: var(--theme-color, #ff4136);
    border-bottom-color: var(--theme-color, #ff4136);
    font-weight: 700;
}
.app-nav-tab-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
    font-size: 13px;
}
.app-nav-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--theme-color, #ff4136);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    top: -7px;
    right: -9px;
    border: 1.5px solid #fff;
}

.app-nav-r {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-left: 16px;
}
.app-nav-portal {
    font-size: 10px;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
    padding: 3px 10px;
    border-radius: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.app-nav-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--theme-color, #ff4136);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600;
    flex-shrink: 0;
}
.app-nav-user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 10px 4px 4px;
    border-radius: 30px;
    transition: background .2s;
}
.app-nav-user-trigger:hover { background: #f1f5f9; }
.app-nav-chevron { font-size: 9px; color: #94a3b8; }
.app-nav-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    background: var(--theme-color, #ff4136);
    border: 1.5px solid var(--theme-color, #ff4136);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
}
.app-nav-home:hover { background: #e5372e; border-color: #e5372e; color: #fff; }

@media (max-width: 767px) {
    .app-nav { padding: 0 16px; }
    .app-nav-portal { display: none; }
}