/* Marketing Hub - Navigation Stylesheet */

/* Prevent horizontal scrolling */
.bottom-nav,
.bottom-nav-container,
.bottom-nav-tabs,
.nav-menu {
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================
   BOTTOM NAVIGATION BAR - DESKTOP ONLY
   ============================================ */

@media (min-width: 768px) {
    /* Bottom Navigation Bar Container */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 72px;
        z-index: var(--z-fixed);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        pointer-events: none;
    }
    
    .bottom-nav-container {
        width: 100%;
        max-width: 1400px;
        height: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid rgba(229, 231, 235, 0.8);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08), 0 -2px 8px rgba(0, 0, 0, 0.04);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 24px;
        margin: 0 16px;
        pointer-events: auto;
        box-sizing: border-box;
    }
    
    /* Primary Navigation Tabs Container */
    .bottom-nav-tabs {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
    }
    
    /* Individual Tab Item */
    .bottom-nav-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 12px;
        min-width: 64px;
        max-width: 120px;
        flex: 1;
        border-radius: 12px;
        text-decoration: none;
        color: #6b7280;
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        cursor: pointer;
        box-sizing: border-box;
    }
    
    .bottom-nav-tab:hover {
        transform: translateY(-2px);
    }
    
    .bottom-nav-tab.active {
        color: var(--primary-color);
    }
    
    .bottom-nav-tab.active::before {
        content: '';
        position: absolute;
        top: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--primary-color);
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    }
    
    /* Tab Icon */
    .bottom-nav-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
        flex-shrink: 0;
    }
    
    .bottom-nav-tab:hover .bottom-nav-icon {
        transform: scale(1.1);
    }
    
    .bottom-nav-tab.active .bottom-nav-icon {
        transform: scale(1.15);
    }
    
    .bottom-nav-icon svg {
        width: 24px;
        height: 24px;
        stroke: currentColor;
        stroke-width: 2;
    }
    
    /* Tab Label */
    .bottom-nav-label {
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        transition: font-weight 200ms ease-out;
        display: block;
    }
    
    .bottom-nav-tab.active .bottom-nav-label {
        font-weight: 600;
    }
    
    /* Action Buttons Container */
    .bottom-nav-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: 16px;
        padding-left: 16px;
        border-left: 1px solid rgba(229, 231, 235, 0.6);
        flex-shrink: 0;
    }
    
    /* Hide toggle button on desktop */
    .bottom-nav-toggle-btn {
        display: none;
    }
    
    /* Hide action buttons that are inside tabs container on desktop */
    .bottom-nav-tabs .bottom-nav-action-btn {
        display: none;
    }
    
    /* Show action buttons menu on desktop */
    .bottom-nav-actions-menu {
        display: flex;
        flex-direction: row;
        gap: 8px;
        position: static;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        min-width: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    
    /* Action Buttons - Distinct from tabs */
    .bottom-nav-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 14px;
        min-width: 56px;
        border-radius: 10px;
        text-decoration: none;
        color: #1f2937;
        font-size: 11px;
        font-weight: 600;
        background: #ffffff;
        border: 1.5px solid rgba(229, 231, 235, 0.8);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        box-sizing: border-box;
    }
    
    .bottom-nav-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .bottom-nav-action-btn:active {
        transform: translateY(0);
    }
    
    .bottom-nav-action-btn svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2.5;
        transition: transform 200ms ease-out;
        flex-shrink: 0;
    }
    
    .bottom-nav-action-btn:hover svg {
        transform: scale(1.1);
    }
    
    .bottom-nav-action-btn span {
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
    }
    
    /* Install Button - Special Styling with distinct green color */
    .bottom-nav-action-btn-install {
        background: var(--primary-color);
        color: #ffffff;
        border-color: var(--primary-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
    
    .bottom-nav-action-btn-install:hover {
        background: var(--primary-dark);
        border-color: var(--primary-light);
        color: #ffffff;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }
    
    .bottom-nav-action-btn-install:hover svg {
        stroke: #ffffff;
    }
    
    .bottom-nav-action-btn-install svg {
        stroke: currentColor;
    }
}

@media (min-width: 1921px) {
    .bottom-nav-container {
        max-width: 1600px;
    }
}

/* ============================================
   COLOR IDENTIFIERS - WORK ON ALL SCREEN SIZES
   ============================================ */

/* Category-specific hover colors for tabs */
.bottom-nav-tab[data-nav-category="social-media"]:hover {
    color: #5865f2;
    background: rgba(88, 101, 242, 0.12);
}

.bottom-nav-tab[data-nav-category="analytics"]:hover {
    color: #f97316;
    background: rgba(249, 115, 22, 0.12);
}

.bottom-nav-tab[data-nav-category="offline-materials"]:hover {
    color: var(--accent-color);
    background: rgba(139, 69, 19, 0.12);
}

.bottom-nav-tab[data-nav-category="photography"]:hover {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.12);
}

.bottom-nav-tab[data-nav-category="brand"]:hover {
    color: #9333ea;
    background: rgba(147, 51, 234, 0.12);
}

.bottom-nav-tab[data-nav-category="letterheads"]:hover {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

/* Category-specific active colors - Work on all screen sizes */
.bottom-nav-tab[data-nav-category="social-media"].active {
    color: #5865f2;
}

.bottom-nav-tab[data-nav-category="social-media"].active::before {
    background: #5865f2;
    box-shadow: 0 0 8px rgba(88, 101, 242, 0.4);
}

.bottom-nav-tab[data-nav-category="analytics"].active {
    color: #f97316;
}

.bottom-nav-tab[data-nav-category="analytics"].active::before {
    background: #f97316;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
}

.bottom-nav-tab[data-nav-category="offline-materials"].active {
    color: var(--accent-color);
}

.bottom-nav-tab[data-nav-category="offline-materials"].active::before {
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(139, 69, 19, 0.4);
}

.bottom-nav-tab[data-nav-category="photography"].active {
    color: #06b6d4;
}

.bottom-nav-tab[data-nav-category="photography"].active::before {
    background: #06b6d4;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}

.bottom-nav-tab[data-nav-category="brand"].active {
    color: #9333ea;
}

.bottom-nav-tab[data-nav-category="brand"].active::before {
    background: #9333ea;
    box-shadow: 0 0 8px rgba(147, 51, 234, 0.4);
}

.bottom-nav-tab[data-nav-category="letterheads"].active {
    color: #22c55e;
}

.bottom-nav-tab[data-nav-category="letterheads"].active::before {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

/* Unique hover colors for each action button */
.bottom-nav-action-btn[aria-label="Home"]:hover,
.bottom-nav-action-btn[href*="index.html"]:hover {
    background: rgba(16, 110, 60, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.bottom-nav-action-btn[aria-label="Marketing Calendar"]:hover,
.bottom-nav-action-btn[href*="marketing-calendar"]:hover {
    background: rgba(233, 133, 11, 0.1);
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.bottom-nav-action-btn[aria-label="Send Files"]:hover,
.bottom-nav-action-btn[href*="file-sharing"]:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: #6366f1;
    color: #6366f1;
}

/* ============================================
   BOTTOM NAVIGATION BAR - MOBILE STYLES
   ============================================ */

@media (max-width: 767px) {
    /* Hide mobile menu toggle and slide-out menu elements */
    .mobile-menu-toggle {
        display: none !important;
    }
    
    .main-header {
        display: none !important;
    }
    
    .nav-backdrop {
        display: none !important;
    }
    
    /* Bottom Navigation Bar Container - Mobile */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        min-height: 70px;
        z-index: var(--z-fixed);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 0;
        pointer-events: none;
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Hide bottom nav when scrolling down on mobile */
    .bottom-nav.bottom-nav-hidden {
        transform: translateY(100%);
    }
    
    .bottom-nav-container {
        width: 100%;
        max-width: 100%;
        min-height: 70px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid rgba(229, 231, 235, 0.8);
        border-radius: 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08), 0 -2px 8px rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        pointer-events: auto;
        box-sizing: border-box;
        overflow-x: hidden;
        gap: 8px;
    }
    
    /* Primary Navigation Tabs Container - Mobile */
    .bottom-nav-tabs {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        justify-items: center;
        gap: 4px;
        width: 100%;
        min-width: 0;
        order: 1;
    }
    
    /* Individual Tab Item - Mobile */
    .bottom-nav-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        min-width: 0;
        min-height: 50px;
        width: 100%;
        max-width: 100%;
        border-radius: 8px;
        text-decoration: none;
        color: #6b7280;
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        cursor: pointer;
        box-sizing: border-box;
        touch-action: manipulation;
    }
    
    /* Tab Icon - Mobile */
    .bottom-nav-icon {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
        flex-shrink: 0;
    }
    
    .bottom-nav-tab:active .bottom-nav-icon {
        transform: scale(1.05);
    }
    
    .bottom-nav-tab.active .bottom-nav-icon {
        transform: scale(1.1);
    }
    
    .bottom-nav-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2;
    }
    
    /* Tab Label - Mobile */
    .bottom-nav-label {
        font-size: 10px;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        transition: font-weight 200ms ease-out;
    }
    
    .bottom-nav-tab.active {
        color: var(--primary-color);
    }
    
    .bottom-nav-tab.active::before {
        content: '';
        position: absolute;
        top: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--primary-color);
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    }
    
    .bottom-nav-tab.active .bottom-nav-label {
        font-weight: 600;
    }
    
    /* Action Buttons Container - Mobile - Now part of the grid */
    .bottom-nav-actions {
        display: contents;
    }
    
    /* Hide toggle button on mobile */
    .bottom-nav-toggle-btn {
        display: none !important;
    }
    
    /* Hide action menu on mobile */
    .bottom-nav-actions-menu {
        display: none !important;
    }
    
    /* Action Buttons - Mobile - Styled as tabs (same as .bottom-nav-tab) */
    .bottom-nav-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        min-width: 0;
        min-height: 50px;
        width: 100%;
        max-width: 100%;
        border-radius: 8px;
        text-decoration: none;
        color: #6b7280;
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        cursor: pointer;
        box-sizing: border-box;
        touch-action: manipulation;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        border: none;
    }
    
    .bottom-nav-action-btn:active {
        transform: scale(0.95);
    }
    
    .bottom-nav-action-btn .bottom-nav-icon {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
        flex-shrink: 0;
    }
    
    .bottom-nav-action-btn:active .bottom-nav-icon {
        transform: scale(1.05);
    }
    
    .bottom-nav-action-btn.active .bottom-nav-icon {
        transform: scale(1.1);
    }
    
    .bottom-nav-action-btn .bottom-nav-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2;
    }
    
    .bottom-nav-action-btn .bottom-nav-label {
        font-size: 10px;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        transition: font-weight 200ms ease-out;
    }
    
    /* Install Button - Mobile - Styled as tab */
    .bottom-nav-action-btn-install {
        background: transparent;
        color: #6b7280;
    }
    
    .bottom-nav-action-btn-install:active {
        background: transparent;
        color: var(--primary-color);
        transform: scale(0.95);
    }
    
    /* Action buttons get same active indicator as tabs */
    .bottom-nav-action-btn.active {
        color: var(--primary-color);
    }
    
    .bottom-nav-action-btn.active::before {
        content: '';
        position: absolute;
        top: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--primary-color);
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    }
    
    .bottom-nav-action-btn.active .bottom-nav-label {
        font-weight: 600;
    }
}

/* Small Screen Navigation - Optimize for screens 400px and below */
@media (max-width: 400px) {
    .bottom-nav-container {
        padding: 6px;
        gap: 6px;
        min-height: 68px;
    }
    
    .bottom-nav-tabs {
        gap: 3px;
    }
    
    .bottom-nav-tab,
    .bottom-nav-action-btn {
        padding: 5px 2px;
        min-height: 48px;
    }
    
    .bottom-nav-icon svg,
    .bottom-nav-action-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .bottom-nav-label,
    .bottom-nav-action-btn span {
        font-size: 9px;
    }
}

/* Very Small Screen Navigation - Extra small devices (320px and below) */
@media (max-width: 320px) {
    .bottom-nav-container {
        padding: 5px;
        gap: 5px;
        min-height: 66px;
    }
    
    .bottom-nav-tabs {
        gap: 2px;
    }
    
    .bottom-nav-tab,
    .bottom-nav-action-btn {
        padding: 4px 1px;
        min-height: 44px;
    }
    
    .bottom-nav-icon svg,
    .bottom-nav-action-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .bottom-nav-label,
    .bottom-nav-action-btn span {
        font-size: 8px;
    }
}

/* Breadcrumb Navigation */
.breadcrumb {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    backdrop-filter: blur(10px);
    background-color: rgba(249, 250, 251, 0.95);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.breadcrumb .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.breadcrumb-item:not(:last-child)::after {
    content: '›';
    margin: 0 var(--spacing-sm);
    color: var(--gray-400);
    font-weight: 600;
    font-size: var(--font-size-base);
}

.breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
    color: var(--primary-color);
    background-color: rgba(16, 110, 60, 0.08);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.breadcrumb-item[aria-current="page"] {
    color: var(--text-primary);
    font-weight: 600;
}

@media (max-width: 767px) {
    .breadcrumb {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .breadcrumb .container {
        padding: 0 var(--spacing-md);
    }
    
    .breadcrumb-list {
        font-size: var(--font-size-xs);
    }
}

/* Desktop Navigation */
.main-nav {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-sm);
    align-items: center;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-menu li {
    margin: 0;
    padding: 0;
}

/* Desktop sidebar navigation links - Complete Redesign */
@media (min-width: 768px) {
    /* Section Label: Resources - Add before first nav link */
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close):first-of-type::before {
        content: 'Resources';
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 0 12px 10px 12px;
        margin-bottom: 6px;
    }
    
    /* Section Label: Quick Actions - Add before first desktop-only item */
    .nav-menu > li.desktop-only:first-of-type::before {
        content: 'Quick Actions';
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 20px 12px 10px 12px;
        margin-bottom: 6px;
    }
    
    .nav-menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0;
        margin: 0;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }
    
    .nav-menu li {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* Navigation Links with Icons */
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a {
        color: #1f2937;
        font-weight: 500;
        padding: 10px 12px;
        border-radius: 8px;
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        display: flex;
        align-items: center;
        white-space: nowrap;
        font-size: 14px;
        width: 100%;
        text-decoration: none;
        margin: 0;
        min-height: 40px;
        overflow: hidden;
        letter-spacing: -0.01em;
        background: transparent;
        gap: 10px;
    }
    
    /* Left border indicator */
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 0;
        background: var(--primary-color);
        border-radius: 0 2px 2px 0;
        transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a::before {
        display: none;
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a:hover {
        color: var(--primary-color);
        background: #f0f9f4;
        font-weight: 500;
        transform: translateX(2px);
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a:hover::after {
        height: 60%;
        opacity: 1;
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a:hover::before {
        opacity: 1;
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a.active {
        color: #ffffff;
        background: var(--primary-color);
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(16, 110, 60, 0.2);
        transform: translateX(0);
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a.active::after {
        height: 70%;
        opacity: 1;
        background: rgba(255, 255, 255, 0.3);
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a.active::before {
        opacity: 1;
        background: rgba(255, 255, 255, 0.9);
    }
    
    /* Category-specific color hints on hover */
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a[data-nav-category="social-media"]:hover {
        background: #f0f4ff;
        color: #5865f2;
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a[data-nav-category="analytics"]:hover {
        background: #fff7ed;
        color: #f97316;
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a[data-nav-category="offline-materials"]:hover {
        background: #fef3e8;
        color: var(--accent-color);
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a[data-nav-category="photography"]:hover {
        background: #ecfeff;
        color: #06b6d4;
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a[data-nav-category="brand"]:hover {
        background: #faf5ff;
        color: #9333ea;
    }
    
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a[data-nav-category="letterheads"]:hover {
        background: #f0fdf4;
        color: #22c55e;
    }
    
    /* Hide desktop buttons on mobile, hide mobile buttons on desktop */
    .nav-menu > li.desktop-only {
        display: list-item;
    }
    
    .nav-menu > li.mobile-only {
        display: none !important;
    }
    
    .nav-menu > li.nav-links-grid {
        display: none !important;
    }
    
    .nav-menu > li.send-files-button {
        display: none !important;
    }
    
    .nav-menu > li.logout-button {
        display: none !important;
    }
    
    /* Logout Button Styles */
    .nav-menu .logout-button {
        background: transparent;
        border: none;
        padding: 12px;
        min-height: 44px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        border-radius: 8px;
        transition: all 200ms ease-out;
        font-family: var(--font-family);
    }
    
    .nav-menu .logout-button:hover {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }
    
    .nav-menu .logout-button svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
    }
    
    /* Action Buttons - Card-style design */
    .nav-menu a.home-icon,
    .nav-menu a.calendar-icon,
    .nav-menu a.file-icon {
        padding: 12px;
        min-height: 44px;
        justify-content: flex-start;
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        width: 100%;
        margin: 0;
        margin-top: 4px;
        font-weight: 500;
        gap: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
        letter-spacing: -0.01em;
        position: relative;
        overflow: hidden;
    }
    
    .nav-menu a.home-icon::before,
    .nav-menu a.calendar-icon::before,
    .nav-menu a.file-icon::before {
        display: none;
    }
    
    .nav-menu a.home-icon svg,
    .nav-menu a.calendar-icon svg,
    .nav-menu a.file-icon svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        stroke: currentColor;
        stroke-width: 2;
        transition: transform 200ms ease-out;
    }
    
    .nav-menu a.home-icon span,
    .nav-menu a.calendar-icon span,
    .nav-menu a.file-icon span {
        flex: 1;
        text-align: left;
        font-size: 14px;
        font-weight: 500;
    }
    
    /* Home button - Green card */
    .nav-menu a.home-icon {
        color: var(--primary-color);
        border-color: rgba(16, 110, 60, 0.2);
        background: rgba(13, 107, 205, 0.04);
    }
    
    .nav-menu a.home-icon:hover {
        background: rgba(13, 107, 205, 0.08);
        border-color: rgba(16, 110, 60, 0.3);
        color: var(--primary-color);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(16, 110, 60, 0.1);
    }
    
    .nav-menu a.home-icon:hover svg {
        transform: scale(1.1);
    }
    
    .nav-menu a.home-icon.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #ffffff;
        box-shadow: 0 2px 6px rgba(16, 110, 60, 0.25);
    }
    
    .nav-menu a.home-icon.active svg {
        stroke: #ffffff;
    }
    
    /* Calendar button - Orange card */
    .nav-menu a.calendar-icon {
        color: var(--secondary-color);
        border-color: rgba(var(--secondary-color-rgb), 0.2);
        background: rgba(255, 158, 0, 0.04);
    }
    
    .nav-menu a.calendar-icon:hover {
        background: rgba(255, 158, 0, 0.08);
        border-color: rgba(var(--secondary-color-rgb), 0.3);
        color: var(--secondary-color);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(var(--secondary-color-rgb), 0.1);
    }
    
    .nav-menu a.calendar-icon:hover svg {
        transform: scale(1.1);
    }
    
    .nav-menu a.calendar-icon.active {
        background: var(--secondary-color);
        border-color: var(--secondary-color);
        color: #ffffff;
        box-shadow: 0 2px 6px rgba(var(--secondary-color-rgb), 0.25);
    }
    
    .nav-menu a.calendar-icon.active svg {
        stroke: #ffffff;
    }
    
    /* File button - Blue card */
    .nav-menu a.file-icon {
        background: rgba(75, 107, 150, 0.04);
        color: #6366f1;
        border-color: rgba(99, 102, 241, 0.2);
    }
    
    .nav-menu a.file-icon:hover {
        background: rgba(75, 107, 150, 0.08);
        border-color: rgba(99, 102, 241, 0.3);
        color: #6366f1;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(99, 102, 241, 0.1);
    }
    
    .nav-menu a.file-icon:hover svg {
        transform: scale(1.1);
    }
    
    .nav-menu a.file-icon:active {
        transform: translateY(0);
    }
    
    .nav-menu a.file-icon svg {
        stroke: currentColor;
    }
    
}

/* Mobile navigation links */
@media (max-width: 767px) {
    .nav-menu a {
        color: var(--text-secondary);
        font-weight: 500;
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius-md);
        transition: all var(--transition-fast);
        position: relative;
        display: block;
        white-space: nowrap;
        font-size: var(--font-size-sm);
    }
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-fast);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: calc(100% - var(--spacing-md));
}

    .nav-menu a:hover {
        color: var(--primary-color);
        background-color: rgba(var(--primary-color-rgb), 0.08);
        transform: translateX(2px);
    }
    
    .nav-menu a.active {
        color: var(--primary-color);
        background-color: rgba(var(--primary-color-rgb), 0.12);
        font-weight: 600;
    }

.nav-menu a:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.2);
    background-color: rgba(var(--primary-color-rgb), 0.05);
}

.nav-menu a:focus:not(:focus-visible) {
    outline: none;
}

/* Icon Button Styling - Home (Green) and Calendar (Orange) */
.nav-menu a.home-icon,
.nav-menu a.calendar-icon {
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background-color: var(--bg-secondary);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.nav-menu a.home-icon svg,
.nav-menu a.calendar-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    transition: all var(--transition-fast);
}

/* Home Button - Green */
.nav-menu a.home-icon {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.nav-menu a.home-icon:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(var(--primary-color-rgb), 0.2);
}

.nav-menu a.home-icon:hover svg,
.nav-menu a.home-icon.active svg {
    stroke: currentColor;
    transform: scale(1.1);
}

.nav-menu a.home-icon.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.nav-menu a.home-icon.active svg {
    stroke: currentColor;
}

/* Calendar Button - Orange */
.nav-menu a.calendar-icon {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.nav-menu a.calendar-icon:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(var(--secondary-color-rgb), 0.2);
}

.nav-menu a.calendar-icon:hover svg,
.nav-menu a.calendar-icon.active svg {
    stroke: currentColor;
    transform: scale(1.1);
}

.nav-menu a.calendar-icon.active {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white);
}

.nav-menu a.calendar-icon.active svg {
    stroke: currentColor;
}

/* File Button - Blue background with white text */
.nav-menu a.file-icon {
    background-color: #6366f1;
    border-color: #6366f1;
    color: var(--white);
}

.nav-menu a.file-icon:hover {
    background-color: #4f46e5;
    border-color: #4f46e5;
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
}

.nav-menu a.file-icon.active {
    background-color: #4f46e5;
    border-color: #4f46e5;
    color: var(--white);
}

.nav-menu a.home-icon::after,
.nav-menu a.calendar-icon::after,
    .nav-menu a.file-icon::after {
        display: none;
    }
    
    /* Very small screens - optimize mobile menu */
    @media (max-width: 319px) {
        .mobile-menu-toggle {
            width: 48px;
            height: 48px;
            top: var(--spacing-sm);
            left: var(--spacing-sm);
        }
        
        .nav-menu-close {
            padding: var(--spacing-md) var(--spacing-sm) !important;
        }
        
        .nav-menu-close .mobile-header-content {
            gap: var(--spacing-sm);
        }
        
        .nav-menu-close .header-buttons {
            gap: var(--spacing-xs);
        }
        
        .nav-menu-close .header-buttons a {
            height: 52px;
            min-height: 52px;
            max-height: 52px;
            font-size: var(--font-size-sm);
        }
        
        .nav-menu-close .header-buttons a svg {
            width: 20px;
            height: 20px;
        }
        
        .install-pwa-button {
            max-width: 100%;
            height: 52px;
            font-size: var(--font-size-sm);
            padding: 0 var(--spacing-sm);
        }
        
        .nav-menu > li.nav-links-grid {
            padding: var(--spacing-sm);
            gap: var(--spacing-xs);
            grid-template-columns: repeat(3, 1fr); /* Keep 3 columns on very small screens */
        }
        
        .nav-menu > li.nav-links-grid > a {
            padding: var(--spacing-xs);
            min-height: 44px;
            font-size: var(--font-size-xs);
        }
        
        .nav-menu > li.send-files-button {
            padding: var(--spacing-sm);
        }
        
        .nav-menu > li.send-files-button > a {
            padding: var(--spacing-sm) var(--spacing-md);
            min-height: 52px;
            font-size: var(--font-size-sm);
        }
        
        .nav-menu > li.logout-button {
            padding: var(--spacing-sm);
        }
        
        .nav-menu > li.logout-button > button {
            padding: var(--spacing-sm) var(--spacing-md);
            min-height: 52px;
            font-size: var(--font-size-sm);
        }
    }

    /* Hide close button and mobile footer on desktop */
    .nav-menu-close {
        display: none;
    }
    
    .mobile-footer {
        display: none;
    }

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    z-index: 1001;
}

.mobile-menu-toggle span {
    width: 22px;
    height: 2.5px;
    background-color: var(--text-primary);
    transition: all var(--transition-fast);
    border-radius: 2px;
    display: block;
}

/* Mobile Navigation - Hide slide-out menu elements */
@media (max-width: 767px) {
    /* CRITICAL: Hide ALL desktop-only elements on mobile */
    .nav-menu > li.desktop-only {
        display: none !important;
    }
    
    /* Hide all nav menu items - using bottom nav only */
    .nav-menu > li {
        display: none !important;
    }
}

/* ============================================
   EMOJI-STYLE NAV ICONS (header + bottom nav)
   ============================================ */

/* Header nav category links (desktop sidebar) */
@media (min-width: 768px) {
    .nav-menu > li:not(.desktop-only):not(.nav-menu-close) > a[data-nav-category]::before {
        display: inline-block;
        margin-right: 10px;
        font-size: 1.1rem;
    }

    .nav-menu > li > a[data-nav-category="social-media"]::before {
        content: "📱";
    }

    .nav-menu > li > a[data-nav-category="analytics"]::before {
        content: "📊";
    }

    .nav-menu > li > a[data-nav-category="offline-materials"]::before {
        content: "📰";
    }

    .nav-menu > li > a[data-nav-category="photography"]::before {
        content: "📷";
    }

    .nav-menu > li > a[data-nav-category="brand"]::before {
        content: "🎨";
    }
}

/* Header Quick Action buttons (home/calendar/files/logout) - all breakpoints */
.nav-menu a.home-icon svg,
.nav-menu a.calendar-icon svg,
.nav-menu a.file-icon svg,
.nav-menu .logout-button svg {
    display: none !important;
}

.nav-menu a.home-icon::before,
.nav-menu a.calendar-icon::before,
.nav-menu a.file-icon::before,
.nav-menu .logout-button::before {
    display: inline-block;
    margin-right: 8px;
    font-size: 1.1rem;
    content: "";
}

.nav-menu a.home-icon::before {
    content: "🏠";
}

.nav-menu a.calendar-icon::before {
    content: "📅";
}

.nav-menu a.file-icon::before {
    content: "📤";
}

.nav-menu .logout-button::before {
    content: "🚪";
}

/* Bottom nav tabs (desktop + mobile) */
.bottom-nav-tab .bottom-nav-icon svg,
.bottom-nav-tab .bottom-nav-icon img {
    display: none !important;
}

.bottom-nav-action-btn .bottom-nav-icon svg,
.bottom-nav-action-btn .bottom-nav-icon img {
    display: none !important;
}

.bottom-nav-tab .bottom-nav-icon::before,
.bottom-nav-action-btn .bottom-nav-icon::before {
    display: inline-block;
    font-size: 1.3rem;
    line-height: 1;
    content: "";
}

.bottom-nav-tab[data-nav-category="social-media"] .bottom-nav-icon::before {
    content: "📱";
}

.bottom-nav-tab[data-nav-category="analytics"] .bottom-nav-icon::before {
    content: "📊";
}

.bottom-nav-tab[data-nav-category="offline-materials"] .bottom-nav-icon::before {
    content: "📰";
}

.bottom-nav-tab[data-nav-category="photography"] .bottom-nav-icon::before {
    content: "📷";
}

.bottom-nav-tab[data-nav-category="brand"] .bottom-nav-icon::before {
    content: "🎨";
}

/* Bottom nav action buttons that navigate to pages */
.bottom-nav-action-btn[href*="index.html"] .bottom-nav-icon::before {
    content: "🏠";
}

.bottom-nav-action-btn[href*="marketing-calendar"] .bottom-nav-icon::before {
    content: "📅";
}

.bottom-nav-action-btn[data-file-sharing-url] .bottom-nav-icon::before,
.bottom-nav-action-btn[href*="weesendit"] .bottom-nav-icon::before {
    content: "📤";
}

.bottom-nav-action-btn-install .bottom-nav-icon::before {
    content: "📲";
}

.bottom-nav-action-btn[aria-label="Logout"] .bottom-nav-icon::before {
    content: "🚪";
}

.bottom-nav-action-btn[href*="admin"] .bottom-nav-icon::before,
.bottom-nav-action-btn[aria-label="Admin"] .bottom-nav-icon::before {
    content: "⚙️";
}

/* Desktop actions menu: buttons have no .bottom-nav-icon, svg/span are direct children */
.bottom-nav-actions-menu .bottom-nav-action-btn svg {
    display: none !important;
}

.bottom-nav-actions-menu .bottom-nav-action-btn::before {
    display: inline-block;
    margin-right: 6px;
    font-size: 1.1rem;
    line-height: 1;
    content: "";
}

.bottom-nav-actions-menu .bottom-nav-action-btn[href*="index.html"]::before {
    content: "🏠";
}

.bottom-nav-actions-menu .bottom-nav-action-btn[href*="marketing-calendar"]::before {
    content: "📅";
}

.bottom-nav-actions-menu .bottom-nav-action-btn[data-file-sharing-url]::before,
.bottom-nav-actions-menu .bottom-nav-action-btn[href*="weesendit"]::before {
    content: "📤";
}

.bottom-nav-actions-menu .bottom-nav-action-btn-install::before {
    content: "📲";
}

.bottom-nav-actions-menu .bottom-nav-action-btn[aria-label="Logout"]::before {
    content: "🚪";
}

.bottom-nav-actions-menu .bottom-nav-action-btn[href*="admin"]::before,
.bottom-nav-actions-menu .bottom-nav-action-btn[aria-label="Admin"]::before {
    content: "⚙️";
}

.nav-menu a.admin-link {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: all 200ms ease;
}
.nav-menu a.admin-link:hover {
    color: var(--primary-color);
    background: #f0f9f4;
}