/* common/css/nav.css - Underground Theme + Modern Enhancements */

/* === UNDERGROUND THEME NAVIGATION VARIABLES === */
:root {
    /* Button sizing - Better touch targets */
    --btn_height_sm: 36px;
    --btn_height_md: 44px;
    --btn_height_lg: 52px;
    
    /* Underground theme button colors */
    --btn_primary_bg: rgba(168, 85, 247, 1);        /* Punk purple */
    --btn_primary_text: rgba(248, 250, 252, 1);
    --btn_primary_border: rgba(168, 85, 247, 1);
    --btn_primary_hover_bg: rgba(147, 51, 234, 1);  /* Darker punk purple */
    --btn_primary_active_bg: rgba(126, 34, 206, 1);
    
    --btn_secondary_bg: rgba(14, 165, 233, 1);      /* Ska blue */
    --btn_secondary_text: rgba(248, 250, 252, 1);
    --btn_secondary_border: rgba(14, 165, 233, 1);
    --btn_secondary_hover_bg: rgba(2, 132, 199, 1); /* Darker ska blue */
    --btn_secondary_active_bg: rgba(3, 105, 161, 1);
    
    --btn_accent_bg: rgba(239, 68, 68, 1);          /* Rebellious red */
    --btn_accent_text: rgba(248, 250, 252, 1);
    --btn_accent_border: rgba(239, 68, 68, 1);
    --btn_accent_hover_bg: rgba(220, 38, 38, 1);    /* Darker rebellious red */
    --btn_accent_active_bg: rgba(185, 28, 28, 1);
    
    --btn_light_bg: rgba(248, 250, 252, 1);
    --btn_light_text: rgba(15, 23, 42, 1);
    --btn_light_border: rgba(226, 232, 240, 1);
    --btn_light_hover_bg: rgba(241, 245, 249, 1);
    --btn_light_active_bg: rgba(226, 232, 240, 1);
    
    --btn_dark_bg: rgba(15, 23, 42, 1);
    --btn_dark_text: rgba(248, 250, 252, 1);
    --btn_dark_border: rgba(15, 23, 42, 1);
    --btn_dark_hover_bg: rgba(30, 41, 59, 1);
    --btn_dark_active_bg: rgba(51, 65, 85, 1);
    
    --btn_outline_hover_bg: rgba(237, 233, 254, 0.5); /* Light purple tint */
    --btn_disabled_opacity: 0.6;
    --btn_focus_ring_width: 2px;
    
    /* Link colors - Underground theme */
    --link_color: rgba(126, 34, 206, 1);             /* Punk purple */
    --link_hover_color:  rgba(147, 51, 234, 1);      
    --link_active_color: rgba(168, 85, 247, 1);     
    --link_muted_color: rgba(100, 116, 139, 1);
    
    /* Navigation colors */
    --nav_bg: rgba(248, 250, 252, 1);
    --nav_text: rgba(15, 23, 42, 1);
    --nav_border: rgba(226, 232, 240, 1);
    --nav_active_bg: rgba(237, 233, 254, 1);         /* Light purple */
    --nav_active_border: rgba(168, 85, 247, 1);      /* Punk purple */
    --nav_hover_bg: rgba(243, 244, 246, 1);
    --nav_disabled_text: rgba(160, 174, 192, 1);
    
    /* Typography */
    --text_xs: 0.75rem;
    --text_sm: 0.875rem;
    --text_base: 1rem;
    --text_lg: 1.125rem;
    
    /* Spacing */
    --pad_xs: 4px;
    --pad_sm: 8px;
    --pad_md: 12px;
    --pad_lg: 15px;
    --gap_xs: 6px;
    --gap_sm: 10px;
    --gap_md: 15px;
    
    /* Border radius */
    --radius_sm: 6px;
    --radius_md: 10px;
    --radius_lg: 15px;
    
    /* Shadows */
    --shadow_sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow_md: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    :root {
        --btn_light_bg: rgba(51, 65, 85, 1);
        --btn_light_text: rgba(248, 250, 252, 1);
        --btn_light_border: rgba(51, 65, 85, 1);
        --btn_light_hover_bg: rgba(71, 85, 105, 1);
        --btn_light_active_bg: rgba(100, 116, 139, 1);
        
        --btn_dark_bg: rgba(30, 41, 59, 1);
        --btn_dark_hover_bg: rgba(15, 23, 42, 1);
        --btn_dark_active_bg: rgba(12, 17, 27, 1);
        
        --btn_outline_hover_bg: rgba(76, 29, 149, 0.3);
        
        --link_color: rgba(196, 141, 255, 1);          /* Lighter purple for dark mode */
        --link_hover_color: rgba(216, 161, 255, 1);
        --link_muted_color: rgba(160, 174, 192, 1);
        
        --nav_bg: rgba(30, 41, 59, 1);
        --nav_text: rgba(248, 250, 252, 1);
        --nav_border: rgba(51, 65, 85, 1);
        --nav_active_bg: rgba(76, 29, 149, 1);         /* Dark purple */
        --nav_hover_bg: rgba(51, 65, 85, 1);
        --nav_disabled_text: rgba(100, 116, 139, 1);
    }
}

/* Mobile-first responsive adjustments */
@media (max-width: 480px) {
    :root {
        --pad_md: 10px;
        --pad_lg: 12px;
        --gap_md: 12px;
    }
}

/* === STANDARD BUTTONS === */

/* Base button styles with underground theme */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn_height_md);
    padding: 0 var(--pad_lg);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: var(--radius_md);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: var(--text_base);
    text-decoration: none;
    min-height: 44px; /* iOS touch target minimum */
    touch-action: manipulation;
    position: relative;
    overflow: hidden;
    font-family: inherit;
}

.btn.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
}

/* Button glow effect */
.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

/* Button sizes */
.btn_sm {
    height: var(--btn_height_sm);
    padding: 0 var(--pad_md);
    font-size: var(--text_sm);
    border-radius: var(--radius_sm);
    min-height: 36px;
}

.btn_lg {
    height: var(--btn_height_lg);
    padding: 0 calc(var(--pad_lg) * 1.5);
    font-size: var(--text_lg);
    min-height: 52px;
}

/* Block button (full width) */
.btn_block {
    display: flex;
    width: 100%;
}

/* Button color variations - Underground theme */
.btn_primary {
    color: var(--btn_primary_text);
    background: linear-gradient(135deg, var(--btn_primary_bg), rgba(168, 85, 247, 0.9));
    border-color: var(--btn_primary_border);
    box-shadow: 0 2px 4px rgba(168, 85, 247, 0.2);
}

.btn_primary:hover {
    background: linear-gradient(135deg, var(--btn_primary_hover_bg), rgba(147, 51, 234, 0.9));
    border-color: var(--btn_primary_hover_bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(168, 85, 247, 0.3);
}

.btn_primary:active {
    background: linear-gradient(135deg, var(--btn_primary_active_bg), rgba(126, 34, 206, 0.9));
    border-color: var(--btn_primary_active_bg);
    transform: translateY(0);
}

.btn_secondary {
    color: var(--btn_secondary_text);
    background: linear-gradient(135deg, var(--btn_secondary_bg), rgba(14, 165, 233, 0.9));
    border-color: var(--btn_secondary_border);
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.2);
}

.btn_secondary:hover {
    background: linear-gradient(135deg, var(--btn_secondary_hover_bg), rgba(2, 132, 199, 0.9));
    border-color: var(--btn_secondary_hover_bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(14, 165, 233, 0.3);
}

.btn_secondary:active {
    background: linear-gradient(135deg, var(--btn_secondary_active_bg), rgba(3, 105, 161, 0.9));
    border-color: var(--btn_secondary_active_bg);
    transform: translateY(0);
}

.btn_accent {
    color: var(--btn_accent_text);
    background: linear-gradient(135deg, var(--btn_accent_bg), rgba(239, 68, 68, 0.9));
    border-color: var(--btn_accent_border);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.btn_accent:hover {
    background: linear-gradient(135deg, var(--btn_accent_hover_bg), rgba(220, 38, 38, 0.9));
    border-color: var(--btn_accent_hover_bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.btn_accent:active {
    background: linear-gradient(135deg, var(--btn_accent_active_bg), rgba(185, 28, 28, 0.9));
    border-color: var(--btn_accent_active_bg);
    transform: translateY(0);
}

.btn_light {
    color: var(--btn_light_text);
    background: linear-gradient(135deg, var(--btn_light_bg), rgba(248, 250, 252, 0.9));
    border-color: var(--btn_light_border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn_light:hover {
    background: linear-gradient(135deg, var(--btn_light_hover_bg), rgba(241, 245, 249, 0.9));
    border-color: var(--btn_light_border);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn_light:active {
    background: linear-gradient(135deg, var(--btn_light_active_bg), rgba(226, 232, 240, 0.9));
    border-color: var(--btn_light_border);
    transform: translateY(0);
}

.btn_dark {
    color: var(--btn_dark_text);
    background: linear-gradient(135deg, var(--btn_dark_bg), rgba(15, 23, 42, 0.9));
    border-color: var(--btn_dark_border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn_dark:hover {
    background: linear-gradient(135deg, var(--btn_dark_hover_bg), rgba(30, 41, 59, 0.9));
    border-color: var(--btn_dark_hover_bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn_dark:active {
    background: linear-gradient(135deg, var(--btn_dark_active_bg), rgba(51, 65, 85, 0.9));
    border-color: var(--btn_dark_active_bg);
    transform: translateY(0);
}

/* Outline button variations */
.btn_outline_primary {
    color: var(--btn_primary_bg);
    background-color: transparent;
    border-color: var(--btn_primary_bg);
    position: relative;
}

.btn_outline_primary::before {
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
}

.btn_outline_primary:hover {
    color: var(--btn_primary_text);
    background: linear-gradient(135deg, var(--btn_primary_bg), rgba(168, 85, 247, 0.9));
    border-color: var(--btn_primary_bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(168, 85, 247, 0.3);
}

.btn_outline_secondary {
    color: var(--btn_secondary_bg);
    background-color: transparent;
    border-color: var(--btn_secondary_bg);
}

.btn_outline_secondary:hover {
    color: var(--btn_secondary_text);
    background: linear-gradient(135deg, var(--btn_secondary_bg), rgba(14, 165, 233, 0.9));
    border-color: var(--btn_secondary_bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(14, 165, 233, 0.3);
}

.btn_outline_accent {
    color: var(--btn_accent_bg);
    background-color: transparent;
    border-color: var(--btn_accent_bg);
}

.btn_outline_accent:hover {
    color: var(--btn_accent_text);
    background: linear-gradient(135deg, var(--btn_accent_bg), rgba(239, 68, 68, 0.9));
    border-color: var(--btn_accent_bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

/* Text buttons (no background or border) */
.btn_text {
    color: var(--btn_primary_bg);
    background-color: transparent;
    border-color: transparent;
    padding-left: var(--pad_sm);
    padding-right: var(--pad_sm);
    box-shadow: none;
}

.btn_text::before {
    display: none;
}

.btn_text:hover {
    background-color: var(--btn_outline_hover_bg);
    color: var(--btn_primary_hover_bg);
    transform: none;
    box-shadow: none;
}

/* Ghost buttons (minimal style) */
.btn_ghost {
    color: var(--btn_primary_bg);
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.btn_ghost::before {
    display: none;
}

.btn_ghost:hover {
    background-color: var(--btn_outline_hover_bg);
    border-color: var(--btn_primary_bg);
    transform: none;
}

/* Button states */
.btn:disabled,
.btn.disabled {
    opacity: var(--btn_disabled_opacity);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 var(--btn_focus_ring_width) rgba(168, 85, 247, 0.3);
    z-index: 2;
}

/* Loading state */
.btn.loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: btn_spinner 0.8s linear infinite;
    color: var(--btn_primary_text);
}

@keyframes btn_spinner {
    to { transform: rotate(360deg); }
}

/* === MENU BUTTONS === */
/* ─── Nav Toggle Buttons (drawer open/close) ─── */
.nav_toggle_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    background: linear-gradient(135deg, var(--btn_primary_bg), rgba(168, 85, 247, 0.9));
    color: var(--btn_primary_text);
    border: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-top-left-radius: var(--radius_md);
    border-top-right-radius: var(--radius_md);
    border-bottom-left-radius: var(--radius_md);
    border-bottom-right-radius: var(--radius_md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-size: var(--text_lg);
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow_sm);
    opacity: 1;
    z-index: auto;
}

.nav_toggle_btn .material-symbols-outlined {
    font-size: 24px;
    line-height: 1;
    color: inherit;
}

.nav_toggle_btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.3s;
}

.nav_toggle_btn:hover {
    background: linear-gradient(135deg, var(--btn_primary_hover_bg), rgba(147, 51, 234, 0.9));
    transform: scale(1.05);
    box-shadow: var(--shadow_md);
}

.nav_toggle_btn:hover::before {
    left: 100%;
}

.nav_toggle_btn:active {
    transform: scale(0.95);
}

/* === CONTENT LINK BUTTONS === */
.content-link-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap_sm, 0.5rem);
    width: 100%;
    height: auto;
    min-height: 44px;
    margin-bottom: var(--gap_sm, 0.5rem);
    padding: 0.55rem 0.75rem;
    text-align: left;
    white-space: normal;
    line-height: 1.25;
}

.content-link-button .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1;
}

.content-link-button > span {
    position: relative;
    z-index: 1;
}

.content-link-button--split {
    justify-content: space-between;
}

.content-link-label {
    display: inline-flex;
    align-items: center;
    gap: var(--gap_xs, 0.35rem);
    min-width: 0;
}

.content-link-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    color: var(--btn_primary_text, #fff);
    background: var(--btn_primary_bg, #7c3aed);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
}
/* === LINKS === */
.link {
    color: var(--link_color);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    position: relative;
    cursor: pointer;
}

.link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, var(--link_color), var(--btn_secondary_bg));
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link:hover {
    color: var(--link_hover_color);
    text-decoration: none;
}

.link:hover::after {
    width: 100%;
}

.link:active {
    color: var(--link_active_color);
}

.link_muted {
    color: var(--link_muted_color);
}

.link_muted:hover {
    color: var(--link_color);
}

/* === OBJ LINKS BEAUTIFICATION === */
.link_obj_beauty {
    background: linear-gradient(135deg, var(--btn_primary_bg), rgba(168, 85, 247, 0.9));
    color: var(--btn_primary_text);
    display: flex;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-size: var(--text_lg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow_sm);

}

.link_obj_beauty::after {
    background: linear-gradient(90deg, var(--btn_secondary_bg), var(--link_color));
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow_md);
}

.link_obj_beauty:hover {
    background: linear-gradient(90deg, var(--btn_secondary_bg), var(--link_color));
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: var(--shadow_md);     
}

/* External link indicator */
.link_external::before {
    content: "?";
    font-size: var(--text_sm);
    margin-left: 4px;
    opacity: 0.7;
}

/* === NAVIGATION SYSTEMS === */

/* Breadcrumb navigation */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap_sm);
    padding: var(--pad_sm) 0;
    font-size: var(--text_sm);
}

.breadcrumb_item {
    display: flex;
    align-items: center;
    gap: var(--gap_sm);
    color: var(--nav_text);
}

.breadcrumb_item:not(:last-child)::after {
    content: "/";
    color: var(--link_muted_color);
    font-weight: 600;
    margin-left: var(--gap_sm);
}

.breadcrumb_item.active {
    color: var(--link_muted_color);
    font-weight: 600;
}

.breadcrumb_link {
    color: var(--link_color);
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.breadcrumb_link:hover {
    color: var(--link_hover_color);
}

/* Tab navigation */
.nav_tabs {
    display: flex;
    border-bottom: 2px solid var(--nav_border);
    margin-bottom: var(--gap_md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nav_tab {
    display: flex;
    align-items: center;
    padding: var(--pad_md) var(--pad_lg);
    color: var(--nav_text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    font-weight: 500;
    position: relative;
    cursor: pointer;
}

.nav_tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(90deg, var(--btn_primary_bg), var(--btn_secondary_bg));
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav_tab:hover {
    background-color: var(--nav_hover_bg);
    color: var(--link_color);
}

.nav_tab:hover::before {
    height: 3px;
}

.nav_tab.active {
    border-bottom-color: var(--nav_active_border);
    background-color: var(--nav_active_bg);
    color: var(--btn_primary_bg);
    font-weight: 600;
}

.nav_tab.active::before {
    height: 3px;
}

.nav_tab.disabled {
    color: var(--nav_disabled_text);
    cursor: not-allowed;
    pointer-events: none;
}
/* Tab content panes */
.tab_pane {
    display: none;
}

.tab_pane.active {
    display: block;
}

/* Pill navigation */
.nav_pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap_sm);
    margin-bottom: var(--gap_md);
}

.nav_pill {
    display: flex;
    align-items: center;
    padding: var(--pad_sm) var(--pad_md);
    color: var(--nav_text);
    text-decoration: none;
    border-radius: var(--radius_md);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.nav_pill::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
    transition: left 0.5s;
}

.nav_pill:hover {
    background: linear-gradient(135deg, var(--nav_hover_bg), rgba(168, 85, 247, 0.05));
    color: var(--link_color);
    transform: translateY(-1px);
}

.nav_pill:hover::before {
    left: 100%;
}

.nav_pill.active {
    background: linear-gradient(135deg, var(--btn_primary_bg), rgba(168, 85, 247, 0.9));
    color: var(--btn_primary_text);
    font-weight: 600;
    box-shadow: var(--shadow_sm);
}

.nav_pill.disabled {
    color: var(--nav_disabled_text);
    cursor: not-allowed;
    pointer-events: none;
}

/* Shared carousel treatment for the public Blog category menu. */
.blog-category-menu {
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
}

.blog-category-menu-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.blog-category-menu a.blog-category-menu-item:not(.btn_primary),
.blog-category-menu a.blog-category-menu-item:not(.btn_primary):visited,
.blog-category-menu a.blog-category-menu-item:not(.btn_primary):hover {
    color: var(--special_primary, #6c5fc7);
}

.blog-filter-results {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
}

/* Vertical navigation */
.nav_vertical {
    display: flex;
    flex-direction: column;
    gap: var(--gap_xs);
    padding: var(--pad_sm);
    background: linear-gradient(135deg, var(--nav_bg), rgba(248, 250, 252, 0.95));
    border-radius: var(--radius_md);
    border: 1px solid var(--nav_border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nav_vertical_item {
    display: flex;
    align-items: center;
    padding: var(--pad_sm) var(--pad_md);
    color: var(--nav_text);
    text-decoration: none;
    border-radius: var(--radius_sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.nav_vertical_item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, var(--btn_primary_bg), var(--btn_secondary_bg));
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav_vertical_item:hover {
    background-color: var(--nav_hover_bg);
    color: var(--link_color);
    padding-left: calc(var(--pad_md) + 4px);
}

.nav_vertical_item:hover::before {
    width: 4px;
}

.nav_vertical_item.active {
    background: linear-gradient(135deg, var(--nav_active_bg), rgba(168, 85, 247, 0.1));
    color: var(--btn_primary_bg);
    font-weight: 600;
    padding-left: calc(var(--pad_md) + 4px);
    border-left: 4px solid var(--btn_primary_bg);
}

.nav_vertical_item.disabled {
    color: var(--nav_disabled_text);
    cursor: not-allowed;
    pointer-events: none;
}

/* === PAGINATION === */
.pagination {
    display: flex;
    align-items: center;
    gap: var(--gap_xs);
    margin: var(--gap_lg) 0;
    justify-content: center;
    flex-wrap: wrap;
}

.page_item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--pad_sm);
    color: var(--nav_text);
    text-decoration: none;
    border: 1px solid var(--nav_border);
    border-radius: var(--radius_sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: var(--nav_bg);
    touch-action: manipulation;
}

.page_item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
    transition: left 0.3s;
}

.page_item:hover {
    background: linear-gradient(135deg, var(--nav_hover_bg), rgba(168, 85, 247, 0.05));
    border-color: var(--btn_primary_bg);
    color: var(--link_color);
    transform: translateY(-1px);
    box-shadow: var(--shadow_sm);
}

.page_item:hover::before {
    left: 100%;
}

.page_item.active {
    background: linear-gradient(135deg, var(--btn_primary_bg), rgba(168, 85, 247, 0.9));
    color: var(--btn_primary_text);
    border-color: var(--btn_primary_bg);
    font-weight: 600;
    box-shadow: var(--shadow_sm);
}

.page_item.disabled {
    color: var(--nav_disabled_text);
    cursor: not-allowed;
    pointer-events: none;
    opacity: var(--btn_disabled_opacity);
}

.page_item.disabled::before {
    display: none;
}

/* Pagination info */
.pagination_info {
    font-size: var(--text_sm);
    color: var(--link_muted_color);
    margin: 0 var(--gap_md);
    white-space: nowrap;
}

/* === BUTTON GROUPS === */
.btn_group {
    display: inline-flex;
    border-radius: var(--radius_md);
    overflow: hidden;
    box-shadow: var(--shadow_sm);
}

.btn_group .btn {
    border-radius: 0;
    border-right-width: 1px;
    position: relative;
    z-index: 1;
}

.btn_group .btn:first-child {
    border-top-left-radius: var(--radius_md);
    border-bottom-left-radius: var(--radius_md);
}

.btn_group .btn:last-child {
    border-top-right-radius: var(--radius_md);
    border-bottom-right-radius: var(--radius_md);
    border-right-width: 2px;
}

.btn_group .btn:hover,
.btn_group .btn:focus,
.btn_group .btn.active {
    z-index: 2;
}

/* === FLOATING ACTION BUTTONS === */
.fab_container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--gap_sm);
    z-index: 1000;
}

.fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--btn_primary_bg), var(--btn_secondary_bg));
    color: var(--btn_primary_text);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow_md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: var(--text_lg);
    font-weight: 600;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    touch-action: manipulation;
}

.fab::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.fab:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.4);
}

.fab:hover::before {
    left: 100%;
}

.fab:active {
    transform: scale(0.95);
}

.fab_mini {
    width: 40px;
    height: 40px;
    font-size: var(--text_base);
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
    .btn {
        padding: 0 var(--pad_md);
    }
    
    .btn_lg {
        padding: 0 var(--pad_lg);
    }
    
    .nav_tabs {
        padding-bottom: 2px;
    }
    
    .nav_tab {
        padding: var(--pad_sm) var(--pad_md);
    }
    
    .pagination {
        gap: var(--gap_xs);
    }
    
    .page_item {
        min-width: 36px;
        height: 36px;
        font-size: var(--text_sm);
    }
    
    .fab_container {
        bottom: 15px;
        right: 15px;
    }
    
    .fab {
        width: 48px;
        height: 48px;
        font-size: var(--text_base);
    }
    
    .fab_mini {
        width: 36px;
        height: 36px;
        font-size: var(--text_sm);
    }
}

@media (max-width: 480px) {
    .btn_group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn_group .btn {
        border-radius: 0;
        border-right-width: 2px;
        border-bottom-width: 1px;
    }
    
    .btn_group .btn:first-child {
        border-radius: var(--radius_md) var(--radius_md) 0 0;
    }
    
    .btn_group .btn:last-child {
        border-radius: 0 0 var(--radius_md) var(--radius_md);
        border-bottom-width: 2px;
    }
    
    .nav_vertical {
        margin: 0 -var(--pad_sm);
    }
    
    .pagination_info {
        width: 100%;
        text-align: center;
        margin: var(--gap_sm) 0;
    }
}

/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
    .nav_toggle_btn {
        background: linear-gradient(135deg, var(--btn_primary_bg), rgba(168, 85, 247, 0.8));
        box-shadow: var(--shadow_md);
    }
    
    .nav_vertical {
        background: linear-gradient(135deg, var(--nav_bg), rgba(30, 41, 59, 0.95));
        border-color: var(--nav_border);
    }
    
    .page_item {
        background-color: var(--nav_bg);
        border-color: var(--nav_border);
        color: var(--nav_text);
    }
}

/* === ACCESSIBILITY ENHANCEMENTS === */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn::before,
    .nav_toggle_btn,
    .nav_toggle_btn::before,
    .link,
    .link::after,
    .link_obj_beauty,
    .link_obj_beauty::after,
    .nav_tab,
    .nav_tab::before,
    .nav_pill,
    .nav_pill::before,
    .nav_vertical_item,
    .nav_vertical_item::before,
    .page_item,
    .page_item::before,
    .fab,
    .fab::before {
        transition: none;
        animation: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .btn {
        border-width: 3px;
    }
    
    .nav_tab.active {
        border-bottom-width: 4px;
    }
    
    .nav_vertical_item.active {
        border-left-width: 6px;
    }
    
    .page_item {
        border-width: 2px;
    }
}
/* Success button variant */
.btn_success {
    background: #2e7d32;
    color: #fff;
    border: 1px solid #2e7d32;
}
.btn_success:hover:not(:disabled) {
    background: #1b5e20;
    border-color: #1b5e20;
}

/* Site Studio navigation locations and reusable menu rendering */
.site_header_layout{display:flex;flex-direction:column;min-width:0}.site_header_main{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;width:100%;min-width:0}.site_header_zone{display:flex;align-items:center;gap:.45rem;min-width:0}.site_header_zone_left{justify-content:flex-start}.site_header_zone_center{justify-content:center}.site_header_zone_right{justify-content:flex-end}.site_header_content{min-width:0;max-width:100%}.site_header_content:empty{display:none}.site_header_bottom,.site_footer_top{width:100%;min-width:0}.site_footer_layout{display:flex;flex-direction:column;height:auto;min-height:40px}.site_footer_columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"left center right";width:100%;align-items:start}.site_footer_zone{min-width:0}.site_footer_zone_left{grid-area:left}.site_footer_zone_center{grid-area:center}.site_footer_zone_right{grid-area:right}.site_footer_zone:empty{display:none}.site_footer_legal{width:100%;text-align:center}.site_sidebar_menu,.menu_loc_left_sidebar,.menu_loc_right_sidebar,.menu_orientation_vertical,.menu_orientation_vertical .menu_inner,.menu_orientation_vertical .carousel-container,.menu_orientation_vertical .carousel-viewport,.menu_orientation_vertical .carousel-buttons-strip{width:100%;min-width:0;align-items:stretch!important;justify-content:flex-start!important}.menu_orientation_vertical .menu_tree_link,.menu_orientation_vertical .menu_tree_item,.menu_orientation_vertical .menu_tree_primary{width:100%;min-width:0}.menu_link_surface{display:flex;align-items:center;justify-content:flex-start;gap:.3rem;width:100%;min-width:0;margin:0 0 4px;text-align:left;box-sizing:border-box}.menu_link_label{min-width:0;overflow-wrap:anywhere}.navigation_badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;min-height:1.25rem;margin-left:auto;padding:0 .35rem;border-radius:999px;background:var(--base_danger,#dc2626);color:#fff;font-size:.7rem;font-weight:700;line-height:1}.menu_orientation_horizontal .menu_inner,.menu_orientation_horizontal .carousel-buttons-strip{min-width:0}.menu_orientation_horizontal .menu_tree_link{white-space:nowrap}.menu_submenu_toggle{flex:0 0 32px}@media(max-width:760px){.site_header_zone_center .menu_manager_wrap{max-width:42vw}.site_footer_columns{grid-template-columns:1fr;grid-template-areas:"left" "center" "right"}.site_footer_zone:empty{display:none}}
.menu_tree_item{position:relative;min-width:0}.menu_tree_primary{display:flex;align-items:stretch;min-width:0}.menu_tree_primary>.menu_tree_link{flex:1 1 auto;min-width:0}.menu_submenu_toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;min-height:32px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}.menu_submenu_toggle .material-symbols-outlined{font-size:20px;transition:transform .2s}.menu_tree_item.is_open>.menu_tree_primary .menu_submenu_toggle .material-symbols-outlined{transform:rotate(180deg)}.menu_submenu{display:none;min-width:180px;z-index:20}.menu_tree_item:hover>.menu_submenu,.menu_tree_item:focus-within>.menu_submenu,.menu_tree_item.is_open>.menu_submenu{display:block}.menu_orientation_vertical .menu_submenu{position:static;width:100%;min-width:0;padding-left:.75rem}.menu_orientation_horizontal .menu_tree_item{flex:0 0 auto}.menu_orientation_horizontal .menu_submenu{position:absolute;top:100%;left:0;padding:.35rem;background:var(--base_bg,#fff);color:var(--base_text,#111827);border:1px solid rgba(0,0,0,.12);border-radius:4px;box-shadow:0 8px 22px rgba(0,0,0,.18)}.menu_orientation_horizontal .menu_submenu .menu_tree_item>.menu_submenu{top:0;left:100%}.menu_submenu .menu_tree_link{width:100%}


.menu_inline_link {
    color: inherit;
    text-decoration: none;
}

.menu_inline_link:hover {
    text-decoration: none;
}

.menu_inline_link .menu_link_surface {
    height: auto;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    white-space: normal;
    line-height: 1.25;
}

.menu_inline_link .menu_link_surface > span {
    position: relative;
    z-index: 1;
}

.menu_orientation_horizontal .menu_inline_link .menu_link_surface {
    white-space: nowrap;
}
/* Clear group boundaries in reusable admin navigation. */
.menu_section_separator,
.navigation_item_section {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: .55rem 0 .35rem;
    padding: .45rem .55rem;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    background: rgba(255, 255, 255, .16);
    color: inherit;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
}

.menu_section_separator {
    position: relative;
    z-index: 1;
    background: rgba(17, 24, 39, .94);
    border-color: var(--base_accent, #38bdf8);
    color: #fff;
}

.menu_section_separator:first-child,
.navigation_item_section:first-child {
    margin-top: 0;
}

.navigation_item_section {
    color: var(--base_text, #111827);
    background: rgba(0, 0, 0, .07);
    border-color: rgba(0, 0, 0, .22);
}
/* Keep drawer controls clear of viewport and safe-area edges. */
.site_header_main {
    box-sizing: border-box;
    padding-left: max(var(--base_pad_md, 1rem), env(safe-area-inset-left));
    padding-right: max(var(--base_pad_md, 1rem), env(safe-area-inset-right));
}

.site_header_logo_link {
    display: block;
    color: inherit;
    line-height: inherit;
    text-decoration: none;
}

.site_header_logo_link img {
    display: block;
}