/* =========================================================================
   NAVIGATION HEADER MODERNIZATION - SP Archive Portal
   Pagadian City Sangguniang Panlungsod

   UNIFIED NAVY-VIOLET THEME (Reduced Pink)
   All tabs uniform (except Executive Portal & Throwback Vibes)

   Author: Claude Code
   Date: 2026-01-05 (Navy-Heavy, Pink Reduced 50%)
   ========================================================================= */

/* =========================================================================
   1. ROOT VARIABLES - Unified Theme Configuration
   ========================================================================= */
:root {
    /* === UNIFIED COLOR PALETTE === */
    /* Navy Blue Base (DOMINANT) */
    --navy-dark: #0a1628;
    --navy-mid: #1e3a5f;
    --navy-light: #2d4a6f;

    /* Violet Accent */
    --violet-dark: #4c1d95;
    --violet-mid: #7c3aed;
    --violet-light: #8b5cf6;

    /* Pink Highlight (REDUCED - 50%) */
    --pink-dark: #831843;
    --pink-mid: #9d174d;

    /* === MAIN UNIFIED GRADIENT - MORE NAVY, LESS PINK === */
    --nav-grad-unified: linear-gradient(135deg,
        #0a1628 0%,
        #1e3a5f 30%,
        #2d4a6f 50%,
        #4c1d95 70%,
        #7c3aed 88%,
        #9d174d 100%);

    --nav-grad-unified-hover: linear-gradient(135deg,
        #1e3a5f 0%,
        #2d4a6f 30%,
        #3d5a80 50%,
        #7c3aed 70%,
        #a78bfa 88%,
        #be185d 100%);

    /* === EXECUTIVE PORTAL - 60% Navy Blue + Emerald === */
    --nav-grad-exec: linear-gradient(135deg, #0a1628 0%, #1e3a5f 30%, #2d4a6f 60%, #059669 80%, #10b981 100%);
    --nav-grad-exec-hover: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 30%, #3d5a80 60%, #10b981 80%, #34d399 100%);

    /* === THROWBACK VIBES - 60% Navy Blue + Amber === */
    --nav-grad-throwback: linear-gradient(135deg, #0a1628 0%, #1e3a5f 30%, #2d4a6f 60%, #b45309 80%, #f59e0b 100%);
    --nav-grad-throwback-hover: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 30%, #3d5a80 60%, #d97706 80%, #fbbf24 100%);

    /* === Premium Container Background === */
    --nav-container-bg: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(241, 245, 249, 0.92) 50%,
        rgba(245, 243, 255, 0.88) 100%);

    /* === Enhanced Shadows (Navy-Violet tinted) === */
    --nav-shadow-soft: 0 4px 6px -1px rgba(10, 22, 40, 0.15),
                       0 2px 4px -1px rgba(30, 58, 95, 0.1);
    --nav-shadow-hover: 0 20px 25px -5px rgba(10, 22, 40, 0.25),
                        0 8px 10px -6px rgba(76, 29, 149, 0.15);
    --nav-shadow-glow: 0 0 20px rgba(76, 29, 149, 0.3),
                       0 0 40px rgba(30, 58, 95, 0.2);
    --nav-shadow-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
                             inset 0 -1px 0 rgba(10, 22, 40, 0.1);

    /* === Premium Transitions === */
    --nav-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --nav-transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --nav-transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =========================================================================
   2. NAVIGATION CONTAINER - Navy-Violet Glassmorphism
   ========================================================================= */
.nav-buttons-container {
    background: var(--nav-container-bg) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(30, 58, 95, 0.2);
    border-radius: 20px;
    padding: 16px 20px;
    gap: 10px !important;
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.7),
                0 8px 32px rgba(10, 22, 40, 0.12),
                0 2px 8px rgba(76, 29, 149, 0.06);
    position: relative;
    overflow: visible;
}

/* Static gradient border - Navy-Violet dominant (animation removed to fix blinking) */
.nav-buttons-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: linear-gradient(135deg,
        rgba(10, 22, 40, 0.4),
        rgba(30, 58, 95, 0.35),
        rgba(76, 29, 149, 0.25),
        rgba(30, 58, 95, 0.35),
        rgba(10, 22, 40, 0.4));
    z-index: -1;
    opacity: 0.6;
}


/* =========================================================================
   3. BASE BUTTON - UNIFIED Navy-Violet Styling (Reduced Pink)
   ALL TABS USE THIS SAME GRADIENT
   ========================================================================= */
.nav-btn {
    /* Typography */
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(10, 22, 40, 0.5);

    /* Shape & Borders */
    border-radius: 12px;
    border: 1px solid rgba(124, 58, 237, 0.25);
    padding: 11px 20px;

    /* UNIFIED Gradient - Navy dominant, reduced pink */
    background: var(--nav-grad-unified);

    /* Premium Shadow Stack - Navy-Violet focus */
    box-shadow: var(--nav-shadow-inner-glow),
                var(--nav-shadow-soft),
                0 0 15px rgba(30, 58, 95, 0.2),
                0 0 10px rgba(76, 29, 149, 0.15);

    /* Smooth Premium Transition */
    transition: var(--nav-transition);

    /* Cursor */
    cursor: pointer;

    /* Prevent text selection */
    user-select: none;

    /* Position for pseudo-elements */
    position: relative;
    overflow: hidden;
}

/* Shine effect removed to fix blinking issues */

/* Hover State - UNIFIED for all buttons */
.nav-btn:hover {
    background: var(--nav-grad-unified-hover);
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--nav-shadow-inner-glow),
                var(--nav-shadow-hover),
                0 0 25px rgba(30, 58, 95, 0.35),
                0 0 20px rgba(124, 58, 237, 0.3);
    filter: brightness(110%);
    border-color: rgba(167, 139, 250, 0.4);
}

/* Active/Pressed State */
.nav-btn:active {
    transform: translateY(1px) scale(0.98);
    filter: brightness(95%);
    transition: var(--nav-transition-fast);
}

/* Selected/Active Tab State */
.nav-btn.active,
.nav-btn[aria-selected="true"] {
    box-shadow: var(--nav-shadow-inner-glow),
                0 0 0 3px rgba(124, 58, 237, 0.4),
                var(--nav-shadow-soft),
                0 0 20px rgba(30, 58, 95, 0.3);
    border-color: rgba(167, 139, 250, 0.5);
}

/* Focus state for accessibility */
.nav-btn:focus-visible {
    outline: 2px solid rgba(124, 58, 237, 0.6);
    outline-offset: 2px;
}


/* =========================================================================
   4. ALL STANDARD TABS - UNIFORM GRADIENT
   Homepage, News, Browse, Categories, Recent, Legislative, E-Library,
   Research, Agenda, Admin, Full Disclosure, Document Tracker,
   Codifications, Officials, Calendar, Minutes, About, Traffic Code, CLUP
   ========================================================================= */

/* All these selectors use the SAME unified gradient */
.nav-btn.homepage-btn,
.nav-btn.spnews-btn,
.nav-btn.elibrary-emphasized,
.nav-btn.ecalendar-btn,
.nav-btn.traffic-regulation-btn,
.nav-btn.nav-btn-2026,
.nav-btn[data-tab="browse"],
.nav-btn[data-tab="categories"],
.nav-btn[data-tab="recent"],
.nav-btn[data-tab="legflowchart"],
.nav-btn[data-tab="research"],
.nav-btn[data-tab="admin"],
.nav-btn[data-tab="document-tracker"],
.nav-btn[data-tab="codification"],
.nav-btn[data-tab="officials-gallery"],
.nav-btn[data-tab="minutes"],
.nav-btn[data-tab="about"],
a.nav-btn[href*="Rules"],
a.nav-btn[href*="Agenda"],
a.nav-btn[href*="PaperlessSession"],
a.nav-btn[href*="FullDisclosure"],
a.nav-btn[href*="full-disclosure"],
a.nav-btn[href*="CLUP"],
a.nav-btn[href*="clup"] {
    background: var(--nav-grad-unified) !important;
    border: 1px solid rgba(124, 58, 237, 0.25) !important;
    box-shadow: var(--nav-shadow-inner-glow),
                var(--nav-shadow-soft),
                0 0 15px rgba(30, 58, 95, 0.2),
                0 0 10px rgba(76, 29, 149, 0.15);
}

/* Hover state for all standard tabs */
.nav-btn.homepage-btn:hover,
.nav-btn.spnews-btn:hover,
.nav-btn.elibrary-emphasized:hover,
.nav-btn.ecalendar-btn:hover,
.nav-btn.traffic-regulation-btn:hover,
.nav-btn.nav-btn-2026:hover,
.nav-btn[data-tab="browse"]:hover,
.nav-btn[data-tab="categories"]:hover,
.nav-btn[data-tab="recent"]:hover,
.nav-btn[data-tab="legflowchart"]:hover,
.nav-btn[data-tab="research"]:hover,
.nav-btn[data-tab="admin"]:hover,
.nav-btn[data-tab="document-tracker"]:hover,
.nav-btn[data-tab="codification"]:hover,
.nav-btn[data-tab="officials-gallery"]:hover,
.nav-btn[data-tab="minutes"]:hover,
.nav-btn[data-tab="about"]:hover,
a.nav-btn[href*="Rules"]:hover,
a.nav-btn[href*="Agenda"]:hover,
a.nav-btn[href*="PaperlessSession"]:hover,
a.nav-btn[href*="FullDisclosure"]:hover,
a.nav-btn[href*="full-disclosure"]:hover,
a.nav-btn[href*="CLUP"]:hover,
a.nav-btn[href*="clup"]:hover {
    background: var(--nav-grad-unified-hover) !important;
    box-shadow: var(--nav-shadow-inner-glow),
                var(--nav-shadow-hover),
                0 0 25px rgba(30, 58, 95, 0.35),
                0 0 20px rgba(124, 58, 237, 0.3);
    border-color: rgba(167, 139, 250, 0.4) !important;
}


/* =========================================================================
   5. EXCEPTION: Executive Management Portal (Emerald Green)
   UNCHANGED - Keep distinct for executive functions
   ========================================================================= */
.nav-btn.executive-portal-btn {
    background: var(--nav-grad-exec) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    box-shadow: var(--nav-shadow-inner-glow),
                var(--nav-shadow-soft),
                0 0 12px rgba(5, 150, 105, 0.25);
}

.nav-btn.executive-portal-btn:hover {
    background: var(--nav-grad-exec-hover) !important;
    box-shadow: var(--nav-shadow-inner-glow),
                var(--nav-shadow-hover),
                0 0 25px rgba(16, 185, 129, 0.45);
    border-color: rgba(52, 211, 153, 0.5) !important;
}


/* =========================================================================
   6. EXCEPTION: Throwback Vibes (Warm Amber/Orange)
   Nostalgic warm gradient - distinct from others
   ========================================================================= */
.nav-btn.throwback-btn {
    background: var(--nav-grad-throwback) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    box-shadow: var(--nav-shadow-inner-glow),
                var(--nav-shadow-soft),
                0 0 12px rgba(180, 83, 9, 0.25);
}

.nav-btn.throwback-btn:hover {
    background: var(--nav-grad-throwback-hover) !important;
    box-shadow: var(--nav-shadow-inner-glow),
                var(--nav-shadow-hover),
                0 0 25px rgba(245, 158, 11, 0.45);
    border-color: rgba(251, 191, 36, 0.5) !important;
}


/* =========================================================================
   7. EXECUTIVE DROPDOWN STYLING (Keep Emerald theme)
   ========================================================================= */
.executive-dropdown {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(19, 78, 94, 0.2);
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15),
                0 5px 15px rgba(0, 0, 0, 0.08);
    transition: var(--nav-transition);
}

.executive-dropdown-header {
    background: linear-gradient(135deg, rgba(19, 78, 94, 0.1) 0%, rgba(113, 178, 128, 0.1) 100%);
    border-bottom: 1px solid rgba(19, 78, 94, 0.15);
    padding: 12px 16px;
    border-radius: 14px 14px 0 0;
}

.executive-dropdown-header h4 {
    background: linear-gradient(135deg, #134E5E, #71B280);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.executive-dropdown-item {
    transition: var(--nav-transition-fast);
    border-radius: 8px;
    margin: 4px 8px;
}

.executive-dropdown-item:hover {
    background: linear-gradient(90deg, rgba(19, 78, 94, 0.12), transparent);
    padding-left: 20px;
    border-left: 3px solid #71B280;
}

.executive-dropdown-item.active {
    background: linear-gradient(90deg, rgba(113, 178, 128, 0.15), transparent);
    border-left: 3px solid #134E5E;
}


/* =========================================================================
   8. SUBMENU BUTTON STYLING (Navy-Violet theme)
   ========================================================================= */
.submenu-btn {
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
    border: 1px solid rgba(30, 58, 95, 0.15);
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 500;
    color: #1e3a5f;
    transition: var(--nav-transition);
}

.submenu-btn:hover {
    transform: translateY(-2px);
    background: var(--nav-grad-unified);
    color: #ffffff;
    box-shadow: var(--nav-shadow-soft);
}

.submenu-btn.active {
    background: var(--nav-grad-unified);
    color: #ffffff;
    border-color: rgba(124, 58, 237, 0.4);
}


/* =========================================================================
   9. ACCESSIBILITY - Focus States
   ========================================================================= */
.nav-btn:focus-visible {
    outline: 3px solid rgba(124, 58, 237, 0.5);
    outline-offset: 2px;
}

.executive-dropdown-item:focus-visible {
    outline: 2px solid #71B280;
    outline-offset: 1px;
}

.submenu-btn:focus-visible {
    outline: 2px solid rgba(30, 58, 95, 0.6);
    outline-offset: 1px;
}

/* Skip to main content link */
.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    padding: 10px 20px;
    background: var(--nav-grad-unified);
    color: #ffffff;
    border-radius: 8px;
}


/* =========================================================================
   10. RESPONSIVE ADJUSTMENTS
   ========================================================================= */
@media (max-width: 768px) {
    .nav-buttons-container {
        gap: 8px !important;
        padding: 10px 12px;
        row-gap: 8px !important;
    }

    .nav-btn {
        padding: 8px 12px;
        font-size: 0.72rem;
        letter-spacing: 0.3px;
        white-space: normal !important;
        flex: 1 1 calc(33.33% - 8px);
        max-width: calc(33.33% - 5px);
        min-height: 44px;
        text-align: center;
        line-height: 1.3;
    }

    .nav-btn:hover {
        transform: translateY(-1px) scale(1.01);
    }

    .executive-dropdown {
        border-radius: 12px;
    }

    .executive-portal-container {
        flex: 1 1 calc(50% - 8px);
        max-width: calc(50% - 4px);
    }

    .submenu-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .nav-buttons-container {
        gap: 6px !important;
        padding: 10px 8px;
        row-gap: 6px !important;
    }

    .nav-btn {
        padding: 8px 10px;
        font-size: 0.7rem;
        white-space: normal !important;
        min-height: 44px;
        text-align: center;
        line-height: 1.3;
        flex: 1 1 calc(50% - 6px);
        max-width: calc(50% - 3px);
    }

    .executive-portal-container {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .executive-portal-btn {
        width: 100%;
    }
}

/* Extra small mobile devices (320px-360px) */
@media (max-width: 360px) {
    .nav-buttons-container {
        gap: 4px !important;
        padding: 8px 6px;
        row-gap: 4px !important;
    }

    .nav-btn {
        flex: 1 1 100%;
        max-width: 100%;
        font-size: 0.68rem;
        padding: 8px 12px;
    }
}


/* =========================================================================
   11. 2026 SEPARATOR STYLING (Navy-Violet gradient)
   ========================================================================= */
.nav-2026-separator {
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(30, 58, 95, 0.5) 20%,
        rgba(124, 58, 237, 0.5) 80%,
        transparent 100%) !important;
    width: 2px;
    height: 28px;
    margin: 0 10px;
    border-radius: 1px;
}


/* =========================================================================
   12. TOOLTIP ENHANCEMENTS (Navy-Violet theme)
   ========================================================================= */
.spnews-btn-tooltip,
.ecalendar-btn-tooltip,
.elibrary-btn-tooltip,
.traffic-btn-tooltip {
    background: linear-gradient(135deg,
        rgba(10, 22, 40, 0.98) 0%,
        rgba(30, 58, 95, 0.96) 40%,
        rgba(76, 29, 149, 0.94) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(10, 22, 40, 0.35),
                0 0 20px rgba(30, 58, 95, 0.2),
                0 0 15px rgba(76, 29, 149, 0.15);
    color: #ffffff;
}


/* =========================================================================
   END OF NAVIGATION MODERNIZATION STYLES
   Navy-Violet Theme (Pink Reduced 50%)

   GRADIENT BREAKDOWN:
   - Navy Dark #0a1628: 0-30% (dominant)
   - Navy Light #2d4a6f: 30-50%
   - Violet #4c1d95: 50-70%
   - Violet Light #7c3aed: 70-88%
   - Pink (subtle) #9d174d: 88-100% (reduced)

   EXCEPTIONS:
   - Executive Management Portal: Emerald Green
   - Throwback Vibes: Warm Amber/Orange
   ========================================================================= */