/* ═══════════════════════════════════════════════════════════════
   performance-modes.css — Adaptive Performance Tiers & UI
   Architecture: Progressive Visual Degradation (Enterprise Standard)
   
   Table of Contents:
   1. Tier: HIGH (Default)
   2. Tier: MEDIUM (Balanced)
   3. Tier: LOW (Power Saver)
   4. Tier: POTATO (Maximum Performance)
   5. User Interface (Performance Dropdown)
   6. System UI (Toast Notifications)
   7. Developer Tools (Debug Panel)
   8. Accessibility (Reduced Motion)
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1. TIER: HIGH (Default — Everything Enabled)
   ───────────────────────────────────────────────────────────────
   No CSS overrides are required. The system runs at maximum 
   visual fidelity with full blurs, shadows, and animations.
   ─────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────
   2. TIER: MEDIUM (Balanced)
   ───────────────────────────────────────────────────────────────
   Strategy: Reduce heavy compositing tasks (blur intensity) and
   slow down infinite background animations to save GPU cycles.
   ─────────────────────────────────────────────────────────────── */
/* Backdrop glows — Obsidian Kinetic (Phase 2).
   Base blurs are 80px (glow-1) and 100px (glow-2); medium halves them and
   dims opacity by ~30%. Glows stay STATIC at every tier (D5 — no animation). */
[data-perf="medium"] .aura-glow-1 {
    filter: blur(40px);
    /* Halved from 80px */
    opacity: 0.42;
    /* 0.6 x 0.7 */
}

[data-perf="medium"] .aura-glow-2 {
    filter: blur(50px);
    /* Halved from 100px */
    opacity: 0.28;
    /* 0.4 x 0.7 */
}

[data-perf="medium"] .aura-base {
    background: var(--bg);
    /* Flat — no vignette gradient */
}

[data-perf="medium"] .nav-bar,
[data-perf="medium"] .ac-dropdown {
    backdrop-filter: blur(8px);
    /* Reduced from 16px */
    -webkit-backdrop-filter: blur(8px);
}

/* Navbar dropdowns — Obsidian Kinetic glass (Phase 3). */
[data-perf="medium"] .perf-dropdown-menu,
[data-perf="medium"] .lang-dropdown-menu {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-perf="medium"] .logo-shader {
    filter: blur(20px);
    /* Reduced from 36px */
}

[data-perf="medium"] .hero-cloud-wrap {
    animation-duration: 10s;
    /* Slower animation = less GPU repaint */
}

/* ───────────────────────────────────────────────────────────────
   3. TIER: LOW (Power Saver)
   ───────────────────────────────────────────────────────────────
   Strategy: Completely disable expensive filters (backdrop-filter),
   remove ambient glows, simplify box-shadows, and convert complex
   bezier animations to rapid linear transitions.
   ─────────────────────────────────────────────────────────────── */

/* Disable all backdrop filters (heaviest CSS property) */
[data-perf="low"] .nav-bar,
[data-perf="low"] .ac-dropdown {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Navbar glass effects added in Phase 3 — flat fill, no blur, no inset
   highlight, single cheap shadow. */
[data-perf="low"] .perf-dropdown-menu,
[data-perf="low"] .lang-dropdown-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    background: var(--bg-card);
}

[data-perf="low"] .nav-bar {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    background: var(--bg-card);
}

[data-perf="low"] .perf-pill {
    background: transparent;
    border-color: var(--border);
}

/* Remove ambient background glows entirely */
[data-perf="low"] .aura-glow-1,
[data-perf="low"] .aura-glow-2,
[data-perf="low"] .logo-shader {
    display: none;
}

/* Backdrop falls back to a single flat fill — no blur, no vignette gradient.
   The Hero-scoped selector above is left untouched: it is frozen per D8/I21,
   so its low-tier behaviour must not change. */
[data-perf="low"] .aura-base {
    background: var(--bg);
    filter: none !important;
}

[data-perf="low"] .aura-backdrop {
    background: var(--bg);
}

/* Simplify logo transition, remove blur filter */
[data-perf="low"] .logo-layer {
    filter: none !important;
    transition: opacity 100ms linear !important;
}

/* Flatten multi-layered shadows to a single, cheap drop-shadow */
[data-perf="low"] .resource-card,
[data-perf="low"] .file-tbl,
[data-perf="low"] .browse-head,
[data-perf="low"] .results-panel {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* Dark mode specific simplified shadows */
[data-theme="dark"][data-perf="low"] .resource-card,
[data-theme="dark"][data-perf="low"] .file-tbl,
[data-theme="dark"][data-perf="low"] .browse-head,
[data-theme="dark"][data-perf="low"] .results-panel {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Halt infinite decorative animations */
[data-perf="low"] .hero-cloud-wrap {
    animation: none;
}

/* Simplify skeleton shimmer to a static, low-opacity pulse */
[data-perf="low"] .skeleton-box,
[data-perf="low"] .skeleton-line {
    animation: none;
    opacity: 0.5;
}

/* Disable staggered entry animations (avoids layout recalculations) */
[data-perf="low"] .stagger>* {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Force UI elements to use cheap, linear transitions */
[data-perf="low"] .resource-card,
[data-perf="low"] .btn,
[data-perf="low"] .nav-tab,
[data-perf="low"] .crumb {
    transition-duration: 80ms !important;
    transition-timing-function: linear !important;
}

/* Disable structural hover transforms to prevent composite layer creation */
[data-perf="low"] .resource-card:hover,
[data-perf="low"] .file-tbl.grid-mode .trow:hover {
    transform: none !important;
}

/* Home page glass + glow effects introduced in Phase 4.
   .filter-dropdown-wrap still toggles .show on the WRAPPER — only the visual
   effect is removed here, never the mechanism (I8). */
[data-perf="medium"] .filter-dropdown-menu {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-perf="low"] .filter-dropdown-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    background: var(--bg-card);
}

[data-perf="low"] .resource-card:hover,
[data-theme="dark"][data-perf="low"] .resource-card:hover {
    box-shadow: none !important;
}

[data-perf="low"] .locked-icon {
    box-shadow: none !important;
}

/* Remove decorative layout elements */
[data-perf="low"] .hero-max::before {
    display: none;
}

[data-perf="low"] .cav-banner-timer-bar {
    animation: none !important;
    transform: scaleX(1) !important;
}

/* ───────────────────────────────────────────────────────────────
   4. TIER: POTATO (Maximum Performance / Zero Eye Candy)
   ───────────────────────────────────────────────────────────────
   Strategy: Absolute zero visual overhead. Inherits all LOW 
   overrides, then forcefully kills ALL animations, transitions, 
   shadows, and decorative backdrops globally.
   ─────────────────────────────────────────────────────────────── */

/* Inherit LOW tier overrides */
[data-perf="potato"] .nav-bar,
[data-perf="potato"] .ac-dropdown {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Navbar glass effects (Phase 3) */
[data-perf="potato"] .perf-dropdown-menu,
[data-perf="potato"] .lang-dropdown-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    background: var(--bg-card);
}

[data-perf="potato"] .nav-bar {
    background: var(--bg-card);
}

/* Nuke all background aesthetics.
[data-perf="potato"] .aura-glow-1,
[data-perf="potato"] .aura-glow-2,
[data-perf="potato"] .logo-shader,
[data-perf="potato"] .hero-max::before,
[data-perf="potato"] .aura-backdrop {
    display: none !important;
}

/* ☢️ Force kill ALL animations and transitions globally */
[data-perf="potato"] *,
[data-perf="potato"] *::before,
[data-perf="potato"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Eradicate all box-shadows to bypass drawing entirely */
[data-perf="potato"] .resource-card,
[data-perf="potato"] .file-tbl,
[data-perf="potato"] .browse-head,
[data-perf="potato"] .results-panel,
[data-perf="potato"] .nav-bar,
[data-perf="potato"] .ac-dropdown,
[data-perf="potato"] .card,
[data-perf="potato"] .btn {
    box-shadow: none !important;
}

/* Suppress all remaining hover transforms */
[data-perf="potato"] .resource-card:hover,
[data-perf="potato"] .file-tbl.grid-mode .trow:hover,
[data-perf="potato"] .resource-arrow,
[data-perf="potato"] .btn:active {
    transform: none !important;
}

/* Pure static skeletons */
[data-perf="potato"] .skeleton-box,
[data-perf="potato"] .skeleton-line {
    animation: none !important;
    background: var(--n-4) !important;
    opacity: 0.6;
}

/* Home page glass + glow effects (Phase 4) */
[data-perf="potato"] .filter-dropdown-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    background: var(--bg-card);
}

[data-perf="potato"] .resource-card:hover {
    box-shadow: none !important;
}

[data-perf="potato"] .locked-icon {
    box-shadow: none !important;
}

/* Remove functional toggle animations (Theme, Wipe, etc.) */
[data-perf="potato"] .theme-btn svg {
    transition: none !important;
}

[data-perf="potato"] .logo-layer {
    filter: none !important;
    transition: none !important;
}

[data-perf="potato"] .logo-swap.wiping {
    clip-path: none !important;
}

/* Highly simplified scrollbar */
[data-perf="potato"] ::-webkit-scrollbar {
    width: 4px;
}

[data-perf="potato"] ::-webkit-scrollbar-thumb {
    border-radius: 0;
}

/* ───────────────────────────────────────────────────────────────
   5. USER INTERFACE (Performance Setting Dropdown)
   shadcn-inspired minimal architecture
   ─────────────────────────────────────────────────────────────── */

/* Dropdown Container */
.perf-dropdown-wrap {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    height: 32px;
}

/* Trigger Button (Pill) */
.perf-pill {
    height: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 184, 0, 0.3);
    background: rgba(255, 184, 0, 0.1);
    color: var(--color-ember-pulse);
    font-family: var(--font-mono);
    font-size: var(--text-label-mono-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--dur-1) ease;
}

/* SVG Icon in Pill */
.perf-pill svg {
    color: var(--color-ember-pulse);
    transition: color var(--dur-1) ease;
}

/* Pill Hover & Active State */
.perf-dropdown-wrap:hover .perf-pill,
.perf-dropdown-wrap.show .perf-pill {
    border-color: var(--color-ember-pulse);
    background: rgba(255, 184, 0, 0.18);
    color: var(--text);
}

/* Highlight icon with brand color when active/hovered */
.perf-dropdown-wrap:hover .perf-pill svg,
.perf-dropdown-wrap.show .perf-pill svg {
    color: var(--color-ember-pulse);
}

/* Dropdown Menu Panel */
.perf-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    padding: 4px;
    background: var(--surface-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transition: all 0.15s ease;
    z-index: var(--z-dropdown-high);
    /* Stays above general content */
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
}

/* RTL Layout Flip */
[dir="rtl"] .perf-dropdown-menu {
    right: auto;
    left: 0;
}

/* Menu Visible State */
.perf-dropdown-wrap.show .perf-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Menu Item (Option) */
.perf-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: start;
    transition: background 0.12s ease, color 0.12s ease;
}

.perf-option:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}

/* Selected Indicator Dot */
.perf-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

/* Selected Item - Base Active State */
.perf-option.active {
    font-weight: 700;
}

/* Selected Item - Light Theme */
:root .perf-option.active,
[data-theme="light"] .perf-option.active {
    background: rgba(255, 184, 0, 0.14);
    color: var(--text-accent);
}

:root .perf-option.active .perf-indicator-dot,
[data-theme="light"] .perf-option.active .perf-indicator-dot {
    background: var(--color-ember-pulse);
    box-shadow: 0 0 6px rgba(255, 184, 0, 0.5);
}

/* Selected Item - Dark Theme */
[data-theme="dark"] .perf-option.active {
    background: rgba(255, 184, 0, 0.16);
    color: var(--text-accent);
}

[data-theme="dark"] .perf-option.active .perf-indicator-dot {
    background: var(--color-ember-pulse);
    box-shadow: 0 0 6px rgba(255, 184, 0, 0.6);
}

/* Mobile Responsiveness for Dropdown Trigger */
@media (max-width: 480px) {
    .perf-pill span {
        display: none;
        /* Hide text, keep only icon */
    }

    .perf-pill {
        padding: 0 10px;
    }
}

/* ───────────────────────────────────────────────────────────────
   6. SYSTEM UI (Toast Notifications for Auto-Downgrades)
   ─────────────────────────────────────────────────────────────── */
.perf-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--bg-card, #1e293b);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    color: var(--text, #fff);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

.perf-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.perf-toast svg {
    color: var(--color-ember-pulse, #ff8964);
    flex-shrink: 0;
}

/* Toast RTL Alignment */
[dir="rtl"] .perf-toast {
    left: auto;
    right: 50%;
    transform: translateX(50%) translateY(20px);
}

[dir="rtl"] .perf-toast.show {
    transform: translateX(50%) translateY(0);
}

/* ───────────────────────────────────────────────────────────────
   7. DEVELOPER TOOLS (Debug Panel via Ctrl+Shift+P)
   ─────────────────────────────────────────────────────────────── */
.perf-debug-panel {
    position: fixed;
    top: 70px;
    right: 16px;
    z-index: 99998;
    width: 260px;
    border-radius: 10px;
    background: var(--bg-card, #161922);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text, #e2e8f0);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: all 150ms ease;
    overflow: hidden;
}

/* Debug Panel RTL Alignment */
[dir="rtl"] .perf-debug-panel {
    right: auto;
    left: 16px;
}

.perf-debug-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.perf-debug-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    font-weight: 700;
    font-size: 12px;
}

.perf-debug-close {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-4, #64748b);
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
}

.perf-debug-close:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    color: var(--text, #fff);
}

.perf-debug-body {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.perf-debug-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.perf-debug-label {
    color: var(--text-4, #64748b);
    font-weight: 500;
}

.perf-debug-value {
    font-weight: 700;
    color: var(--text, #e2e8f0);
}

.perf-debug-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.perf-debug-btn {
    flex: 1;
    min-width: 48px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 5px;
    background: var(--bg-hover, rgba(255, 255, 255, 0.04));
    color: var(--text-3, #94a3b8);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all 100ms ease;
}

.perf-debug-btn:hover {
    background: var(--a-5, #5683da);
    color: #ffffff;
    border-color: var(--a-5, #5683da);
}

.perf-debug-btn-auto {
    flex-basis: 100%;
}

/* ───────────────────────────────────────────────────────────────
   8. ACCESSIBILITY (Reduced Motion)
   ───────────────────────────────────────────────────────────────
   Respect OS-level user preferences unconditionally.
   Disables layout shifts and animated state changes globally.
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    [data-perf] *,
    [data-perf] *::before,
    [data-perf] *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* ───────────────────────────────────────────────────────────────
   9. BROWSE METADATA CARD (browse-inspector-redesign)
   ───────────────────────────────────────────────────────────────
   The card opens with a transform/opacity transition. It is cheap
   (compositor-only, no layout), so `medium` keeps a shortened version
   while `low` and `potato` drop it entirely and show the card settled.
   Content and controls stay fully available at every tier.
   ─────────────────────────────────────────────────────────────── */
[data-perf="medium"] .browse-inspector.is-open {
    transition-duration: 90ms;
}

[data-perf="low"] .browse-inspector,
[data-perf="potato"] .browse-inspector {
    transition: none;
}

/* The table-collapse track animation runs on the two-column body. Suppress it at the
   tiers that drop the card animation, so the table snaps open/closed instead. */
[data-perf="low"] .browse-body,
[data-perf="potato"] .browse-body {
    transition: none;
}

[data-perf="low"] .browse-inspector:not(.is-open),
[data-perf="potato"] .browse-inspector:not(.is-open) {
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 7 - PERFORMANCE / RTL / RESPONSIVE AUDIT (D10-aware)

   Closes the tier gaps left behind when Phase 6 (Overlays) was skipped and
   Phase 5 added the Enterprise Footer.

   Coverage matrix added here:
     .auth-overlay        backdrop-filter: blur(12px)  - NO tier existed
     .resource-card       Phase 4 glass blur            - low/potato only
     .footer              opaque --bg-card, no blur     - documented, no rule
     .social-icon-btn     flat border, no blur         - transition-gated
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── MEDIUM tier: halve the remaining blur radii (~50%) ── */
[data-perf="medium"] .auth-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

[data-perf="medium"] .resource-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-perf="medium"] .resource-card::after {
    opacity: 0;
}

/* ── LOW tier: disable backdrop-filter entirely (heaviest CSS property) ── */
[data-perf="low"] .auth-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(9, 10, 12, 0.92);
}

[data-theme="light"][data-perf="low"] .auth-overlay {
    background: rgba(255, 255, 255, 0.94);
}

[data-perf="low"] .resource-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-card);
}

/* Footer + social buttons carry no backdrop-filter, but flatten their
   hover work so the low tier stays cheap. */
[data-perf="low"] .social-icon-btn:hover,
[data-perf="potato"] .social-icon-btn:hover {
    border-color: var(--border);
}

/* ── POTATO tier: no blur, no shadows, no transitions anywhere ── */
[data-perf="potato"] .auth-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #121316;
}

[data-theme="light"][data-perf="potato"] .auth-overlay {
    background: #ffffff;
}

[data-perf="potato"] .resource-card,
[data-perf="potato"] .filter-dropdown-menu,
[data-perf="potato"] .auth-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* The Enterprise Footer is already flat: opaque --bg-card background, a 1px
   hairline border and no shadow. Under the potato tier the hover affordance
   degrades to a colour change only (no transitions, no glow). */
[data-perf="potato"] .footer a:hover,
[data-perf="potato"] .social-icon-btn:hover {
    color: var(--text-accent);
    border-color: var(--border);
    transition: none !important;
}

[data-perf="potato"] .footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

/* ─────────────────────────────────────────────
   PHASE 8 (a11y-ux-debt) — keep the perf menu inside small viewports
   The menu is anchored to the wrap's inline-END edge with a 170px
   min-width; below ~420px the wrap sits so close to the start edge that
   the hidden menu juts past it (L=-11px at 360px), inflating scrollWidth.
   Anchor to the inline-START edge below 640px so it grows inward; the
   logical property mirrors correctly in RTL. Placed last so it wins the
   cascade over the physical right/left rules above.
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .perf-dropdown-menu {
        inset-inline-end: auto;
        inset-inline-start: 0;
    }
}