/**
 * SAW Admin - Mobile Bottom Navigation
 * @package SAW_Visitors
 * @version 4.0.0
 */

/* ============================================
   DESKTOP - HIDE BOTTOM NAV
   ============================================ */
@media (min-width: 1025px) {
    .sa-bottom-nav {
        display: none !important;
    }
}

/* ============================================
   TABLET & MOBILE - SHOW BOTTOM NAV
   ============================================ */
@media (max-width: 1024px) {
    .sa-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 52px;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
        z-index: 10001;
        
        /* Matching sidebar gradient */
        background: linear-gradient(
            90deg,
            #0a2540 0%,
            #0d3a5c 50%,
            #005A8C 100%
        );
        
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 
            0 -4px 20px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -webkit-user-select: none;
        user-select: none;
    }
    
    .sa-bottom-nav-inner {
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        height: 100%;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        padding: 0 4px;
    }
    
    .sa-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-width: 0;
        padding: 6px 8px;
        text-decoration: none;
        background: transparent;
        border: none;
        border-radius: var(--saw-radius-md, 6px);
        cursor: pointer;
        position: relative;
        margin: 4px 2px;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        
        /* Matching sidebar text color */
        color: rgba(255, 255, 255, 0.7);
        transition: all 0.2s ease;
    }
    
    .sa-bottom-nav-item:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    
    .sa-bottom-nav-item--active {
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.15),
            inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    /* Active indicator - top accent bar matching sidebar */
    .sa-bottom-nav-item--active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        background: linear-gradient(90deg, #60d0ff 0%, #00a8e8 100%);
        border-radius: 0 0 3px 3px;
        box-shadow: 0 0 8px rgba(96, 208, 255, 0.4);
    }
    
    .sa-bottom-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-bottom: 2px;
        opacity: 0.9;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    .sa-bottom-nav-item:hover .sa-bottom-nav-icon,
    .sa-bottom-nav-item--active .sa-bottom-nav-icon {
        opacity: 1;
    }
    
    .sa-bottom-nav-item--active .sa-bottom-nav-icon {
        transform: scale(1.05);
    }
    
    .sa-bottom-nav-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2;
    }
    
    .sa-bottom-nav-label {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    
    /* Hide desktop footer */
    .sa-app-footer {
        display: none !important;
    }
    
    /* Adjust FAB position */
    .sa-fab,
    .sa-floating-btn {
        bottom: calc(52px + 16px + env(safe-area-inset-bottom, 0)) !important;
    }
}

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 768px) {
    .sa-bottom-nav {
        height: 48px;
    }
    
    .sa-bottom-nav-item {
        padding: 4px 6px;
        margin: 3px 2px;
    }
    
    .sa-bottom-nav-icon {
        width: 18px;
        height: 18px;
        margin-bottom: 1px;
    }
    
    .sa-bottom-nav-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .sa-bottom-nav-label {
        font-size: 9px;
    }
    
    .sa-fab,
    .sa-floating-btn {
        bottom: calc(48px + 12px + env(safe-area-inset-bottom, 0)) !important;
    }
}

/* ============================================
   VERY SMALL MOBILE
   ============================================ */
@media (max-width: 380px) {
    .sa-bottom-nav-inner {
        padding: 0 2px;
    }
    
    .sa-bottom-nav-item {
        padding: 4px 4px;
        margin: 3px 1px;
    }
    
    .sa-bottom-nav-label {
        font-size: 8px;
    }
}