/* WebStackNav — Clarity Pro skins (DataPulse SaaS Analytics glass) */

/* ── Background grid overlay ── */
.page-body.glass-theme .page-container::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--skin-bg-grid-opacity, 0);
    background-image: var(--skin-bg-grid, none);
    background-size: 20px 20px;
}

/* ── Tool cards ── */
.box2 {
    border-radius: var(--skin-card-radius, var(--glass-radius));
    box-shadow: var(--skin-card-shadow, var(--neu-raised));
    -webkit-backdrop-filter: blur(var(--skin-card-blur, 6px));
    backdrop-filter: blur(var(--skin-card-blur, 6px));
    background: var(--glass-bg-strong);
}

.box2:hover {
    transform: translateY(var(--skin-card-hover-y, -2px));
    -webkit-transform: translateY(var(--skin-card-hover-y, -2px));
    -moz-transform: translateY(var(--skin-card-hover-y, -2px));
    box-shadow: var(--skin-card-hover-shadow, var(--neu-raised));
    -webkit-box-shadow: var(--skin-card-hover-shadow, var(--neu-raised));
    -moz-box-shadow: var(--skin-card-hover-shadow, var(--neu-raised));
}

/* ── Section headings: left accent bar ── */
.page-body.glass-theme h3.text-gray,
.page-body.glass-theme h4.text-gray {
    background: var(--glass-bg-strong);
    box-shadow: none;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--glass-radius-sm);
    padding: 8px 14px;
}

/* ── Navbar & hero: crisp SaaS elevation ── */
.page-body.glass-theme .user-info-navbar {
    box-shadow: 0 1px 3px rgba(var(--color-foreground-rgb), 0.08), 0 4px 12px rgba(var(--color-foreground-rgb), 0.04);
}

.ai-search-hero {
    box-shadow: 0 1px 3px rgba(var(--color-foreground-rgb), 0.06), 0 8px 24px rgba(var(--color-foreground-rgb), 0.05);
}

.ai-search-form {
    box-shadow:
        0 10px 28px rgba(var(--color-foreground-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    border-radius: 999px;
}

.ai-search-form button {
    border-radius: 0;
}

/* ── Primary actions: clear hover / focus ── */
.ai-search-tabs .tab,
.ai-search-form button,
.news-refresh-btn,
.page-body.glass-theme .user-info-navbar .nav-btn,
.page-body.glass-theme .sidebar-menu .main-menu > li > a,
.page-body.glass-theme .sidebar-menu .main-menu ul li a {
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast),
        box-shadow var(--transition-fast), border-color var(--transition-fast),
        transform var(--transition-fast);
}

.ai-search-tabs .tab.active,
.ai-search-form button,
.news-refresh-btn {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.ai-search-tabs .tab.active:hover,
.ai-search-form button:hover,
.news-refresh-btn:hover {
    background: var(--color-primary-dark);
}

.ai-search-form:focus-within {
    border-color: rgba(var(--color-primary-rgb), 0.4);
    box-shadow:
        0 10px 28px rgba(var(--color-foreground-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 0 3px rgba(var(--color-primary-rgb), 0.14);
}

.ai-search-tabs .tab:focus-visible,
.ai-search-form button:focus-visible,
.news-refresh-btn:focus-visible,
.page-body.glass-theme .user-info-navbar .nav-btn:focus-visible,
.page-body.glass-theme .sidebar-menu .main-menu > li > a:focus-visible,
.page-body.glass-theme .sidebar-menu .main-menu ul li a:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .box2:hover {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
    }

    .ai-search-tabs .tab,
    .ai-search-form button,
    .news-refresh-btn,
    .page-body.glass-theme .user-info-navbar .nav-btn,
    .page-body.glass-theme .sidebar-menu .main-menu > li > a {
        transition: none;
    }
}