/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Dark Mode Main Layout */
.page[b-eblvmuccol] {
    display: flex;
    height: 100vh;
    position: relative;
    background: var(--bg-primary);
}

.sidebar[b-eblvmuccol] {
    width: 240px;
    height: 100vh;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
}

.sidebar.collapsed[b-eblvmuccol] {
    width: 70px;
}

/* Mobile sidebar overlay */
.sidebar-overlay[b-eblvmuccol] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none;
    backdrop-filter: blur(4px);
}

main[b-eblvmuccol] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-primary);
}

.mobile-header[b-eblvmuccol] {
    display: none;
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1002;
}

.mobile-menu-btn[b-eblvmuccol] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.25rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 0.75rem;
}

.mobile-menu-btn:hover[b-eblvmuccol] {
    background: var(--border-light);
    color: var(--accent-cyan);
}

.mobile-brand[b-eblvmuccol] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-brand .brand-icon[b-eblvmuccol] {
    font-size: 1.25rem;
    line-height: 1;
}

.main-content[b-eblvmuccol] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary);
}

.content-wrapper[b-eblvmuccol] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    background: var(--bg-primary);
}

#blazor-error-ui[b-eblvmuccol] {
    background: var(--bg-card);
    border-top: 1px solid var(--danger);
    color: var(--text-primary);
    bottom: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-eblvmuccol] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: var(--text-muted);
}

#blazor-error-ui .dismiss:hover[b-eblvmuccol] {
    color: var(--danger);
}

/* Responsive styles */
@media (max-width: 992px) {
    .page[b-eblvmuccol] {
        flex-direction: column;
    }
    
    .sidebar[b-eblvmuccol] {
        position: fixed;
        left: -240px;
        top: 0;
        z-index: 1001;
        transition: left 0.3s ease;
        width: 240px;
    }

    .sidebar.open[b-eblvmuccol] {
        left: 0;
    }

    /* On mobile the sidebar is a full-width overlay; ignore desktop collapse */
    .sidebar.collapsed[b-eblvmuccol] {
        width: 240px;
    }

    .sidebar-overlay[b-eblvmuccol] {
        display: block;
    }

    .mobile-header[b-eblvmuccol] {
        display: flex;
    }

    main[b-eblvmuccol] {
        width: 100%;
        margin-left: 0;
    }

    .content-wrapper[b-eblvmuccol] {
        padding: 0.75rem;
    }
}

/* Extra small screens */
@media (max-width: 576px) {
    .content-wrapper[b-eblvmuccol] {
        padding: 0.5rem;
    }
    
    .mobile-header[b-eblvmuccol] {
        padding: 0.5rem 0.75rem;
    }
    
    .mobile-menu-btn[b-eblvmuccol] {
        font-size: 1.1rem;
        padding: 0.35rem 0.5rem;
    }
    
    .mobile-brand[b-eblvmuccol] {
        font-size: 1rem;
    }
}
/* /Components/Layout/MonitorLayout.razor.rz.scp.css */
.monitor-page[b-5bft6yjrwp] {
    min-height: 100vh;
    width: 100%;
    background: #ffffff;
    padding: 0;
    margin: 0;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Modern Dark Mode Sidebar Navigation with Emoji Icons */
.modern-nav[b-g589khu4tq] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar */
.modern-nav[b-g589khu4tq]::-webkit-scrollbar {
    width: 4px;
}

.modern-nav[b-g589khu4tq]::-webkit-scrollbar-track {
    background: transparent;
}

.modern-nav[b-g589khu4tq]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.modern-nav[b-g589khu4tq]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Header */
.nav-header[b-g589khu4tq] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-brand-wrap[b-g589khu4tq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.nav-version[b-g589khu4tq] {
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.7;
    letter-spacing: 0.02em;
}

.nav-brand[b-g589khu4tq] {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.monitor-logo[b-g589khu4tq] {
    width: 140px;
    height: auto;
    display: block;
}

.brand-icon[b-g589khu4tq] {
    font-size: 1.25rem;
    line-height: 1;
}

/* Collapse toggle (☰) sits to the left of the logo */
.nav-collapse-btn[b-g589khu4tq] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.nav-collapse-btn:hover[b-g589khu4tq] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.brand-text[b-g589khu4tq] {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--primary-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-brand:hover[b-g589khu4tq] {
    transform: translateX(2px);
    text-decoration: none;
}

.nav-toggler[b-g589khu4tq] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin-left: auto;
}

.nav-toggler:hover[b-g589khu4tq] {
    background: var(--border-color);
    color: var(--text-primary);
}

/* Navigation Sections */
.nav-section[b-g589khu4tq] {
    margin-top: 0.75rem;
    padding: 0 0.75rem;
}

.featured-section[b-g589khu4tq] {
    margin-top: 0.5rem;
    padding: 0 0.75rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.nav-section-title[b-g589khu4tq] {
    color: var(--text-muted);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem 0.75rem 0.25rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

/* Navigation Menu */
.nav-menu[b-g589khu4tq] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item[b-g589khu4tq] {
    margin-bottom: 2px;
}

/* Navigation Link */
.nav-link[b-g589khu4tq] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s ease;
    font-weight: 500;
    font-size: 0.85rem;
    gap: 0.625rem;
    border: 1px solid transparent;
}

.nav-emoji[b-g589khu4tq] {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.nav-link:hover[b-g589khu4tq] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
}

.nav-link.active[b-g589khu4tq] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(34, 211, 238, 0.08) 100%);
    color: var(--accent-cyan);
    border-color: rgba(59, 130, 246, 0.25);
}

/* Featured Link */
.featured-nav-link[b-g589khu4tq] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(34, 211, 238, 0.05) 100%);
    color: var(--text-primary);
    font-weight: 600;
    position: relative;
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.featured-nav-link:hover[b-g589khu4tq] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(34, 211, 238, 0.1) 100%);
    border-color: rgba(59, 130, 246, 0.4);
}

.featured-nav-link.active[b-g589khu4tq] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(34, 211, 238, 0.08) 100%);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* Active page highlight. NavLink renders its own <a> (a child component), so the scoped `.nav-link`
   rules above don't reliably reach it — ::deep crosses that boundary. Deliberately prominent (left
   accent bar + stronger background + bold) so the current page is obvious in the sidebar. Orange to
   match the AbServer logo. */
.nav-menu[b-g589khu4tq]  a.nav-link.active {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.28) 0%, rgba(251, 146, 60, 0.16) 100%);
    color: var(--accent-orange-light);
    border-color: rgba(249, 115, 22, 0.55);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--accent-orange);
}

/* Collapsed sidebar: no room for a left bar, so emphasize with background + a ring instead. */
.modern-nav.collapsed .nav-menu[b-g589khu4tq]  a.nav-link.active {
    box-shadow: 0 0 0 1px var(--accent-orange);
}

/* Same ::deep reason as above: the `.nav-link` layout rule can't reach NavLink's own <a>, so the
   anchor stayed inline and `margin-left: auto` on the badges had no flex line to push against —
   they sat right against the label text. Restating the layout here parks them at the right edge. */
.nav-menu[b-g589khu4tq]  a.nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* Anomaly Badge */
.anomaly-badge[b-g589khu4tq] {
    background: var(--danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: auto;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Classified-ad coverage. Informational, not an alert, so it reads quieter than the red/amber
   badges — it is a standing percentage, not something to go and clear. */
.coverage-badge[b-g589khu4tq] {
    background: rgba(34, 211, 238, 0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(34, 211, 238, 0.35);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0 6px;
    border-radius: 10px;
    margin-left: auto;
}

.card-art-badge[b-g589khu4tq] {
    background: rgba(235, 168, 75, 0.628);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: auto;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Collapsed sidebar (icon-only) */
.modern-nav.collapsed .nav-brand-wrap[b-g589khu4tq],
.modern-nav.collapsed .nav-brand[b-g589khu4tq],
.modern-nav.collapsed .nav-section-title[b-g589khu4tq],
.modern-nav.collapsed .nav-link > span:not(.nav-emoji)[b-g589khu4tq] {
    display: none;
}

.modern-nav.collapsed .nav-header[b-g589khu4tq] {
    justify-content: center;
    padding: 1rem 0;
}

.modern-nav.collapsed .nav-section[b-g589khu4tq],
.modern-nav.collapsed .featured-section[b-g589khu4tq] {
    padding: 0 0.5rem;
}

/* NavLink renders the <a> itself, so it doesn't carry this component's CSS
   scope attribute — ::deep is required to reach it. */
.modern-nav.collapsed[b-g589khu4tq]  .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    gap: 0;
}

.modern-nav.collapsed .nav-emoji[b-g589khu4tq] {
    font-size: 1.15rem;
}

/* Keep notification badges visible as a corner indicator on the icon when collapsed */
/* Coverage is deliberately absent here: "21%" doesn't fit the corner dot, and it's a standing
   figure rather than a call to action, so it stays behind the expanded sidebar. */
.modern-nav.collapsed .nav-link > span.anomaly-badge[b-g589khu4tq],
.modern-nav.collapsed .nav-link > span.card-art-badge[b-g589khu4tq] {
    display: block;
    position: absolute;
    top: 2px;
    left: 50%;
    right: auto;
    margin-left: 2px;
    min-width: 15px;
    padding: 0 4px;
    font-size: 0.55rem;
    line-height: 15px;
    text-align: center;
    border-radius: 8px;
}

/* Signed-in user footer */
.nav-user[b-g589khu4tq] {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: sticky;
    bottom: 0;
}

.nav-user-link[b-g589khu4tq] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    padding: 0.15rem 0.2rem;
    transition: background 0.15s ease;
}

.nav-user-link:hover[b-g589khu4tq] {
    background: var(--bg-tertiary);
}

.nav-user-avatar[b-g589khu4tq] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-blue, #3b82f6) 0%, var(--accent-cyan, #22d3ee) 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.nav-user-avatar img[b-g589khu4tq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-user-info[b-g589khu4tq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.nav-user-name[b-g589khu4tq] {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-user-role[b-g589khu4tq] {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nav-user-actions[b-g589khu4tq] {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
}

/* NavLink renders its own <a>, so ::deep is needed to style it */
.nav-user-actions[b-g589khu4tq]  .nav-user-action,
.nav-user-actions .nav-user-action[b-g589khu4tq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}

.nav-user-actions[b-g589khu4tq]  .nav-user-action:hover,
.nav-user-actions .nav-user-action:hover[b-g589khu4tq] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Collapsed sidebar: avatar only */
.modern-nav.collapsed .nav-user[b-g589khu4tq] {
    flex-direction: column;
    padding: 0.75rem 0.5rem;
    gap: 0.4rem;
}

.modern-nav.collapsed .nav-user-info[b-g589khu4tq] {
    display: none;
}

.modern-nav.collapsed .nav-user-actions[b-g589khu4tq] {
    margin-left: 0;
    flex-direction: column;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .nav-toggler[b-g589khu4tq] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Collapse is a desktop affordance; mobile uses the overlay toggle */
    .nav-collapse-btn[b-g589khu4tq] {
        display: none;
    }

    .navbar-collapse[b-g589khu4tq] {
        display: block;
    }

    .nav-header[b-g589khu4tq] {
        padding: 1rem 1.5rem;
    }

    .nav-link[b-g589khu4tq] {
        padding: 0.625rem 1rem;
    }
}

@media (max-width: 576px) {
    .nav-header[b-g589khu4tq] {
        padding: 0.75rem 1rem;
    }

    .nav-brand[b-g589khu4tq] {
        font-size: 1rem;
    }

    .brand-icon[b-g589khu4tq] {
        font-size: 1.1rem;
    }

    .nav-link[b-g589khu4tq] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .nav-emoji[b-g589khu4tq] {
        font-size: 0.9rem;
    }

    .nav-section-title[b-g589khu4tq] {
        font-size: 0.6rem;
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
.public-page[b-btkaejk8f1] {
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.public-content[b-btkaejk8f1] {
    width: 100%;
    max-width: 1000px;
}
/* /Components/Pages/Account/ChangePassword.razor.rz.scp.css */
.change-password-page[b-xgw01tsavn] {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.change-password-card[b-xgw01tsavn] {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 2rem;
    width: 100%;
    max-width: 420px;
    color: var(--text-primary, #222);
}

.change-password-card h2[b-xgw01tsavn] {
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
    color: var(--text-primary, #222);
}

.cp-notice[b-xgw01tsavn] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fbbf24;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.cp-error[b-xgw01tsavn] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.cp-field[b-xgw01tsavn] {
    margin-bottom: 1rem;
}

.cp-field label[b-xgw01tsavn] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: var(--text-primary, #222);
}

.cp-hint[b-xgw01tsavn] {
    font-weight: 400;
    color: var(--text-muted, #888);
    font-size: 0.75rem;
}

.cp-field input[b-xgw01tsavn] {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #222);
    font-size: 0.95rem;
}

.cp-field input:focus[b-xgw01tsavn] {
    outline: none;
    border-color: #4d6bfe;
    box-shadow: 0 0 0 3px rgba(77, 107, 254, 0.15);
}

.cp-submit[b-xgw01tsavn] {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem;
    border: none;
    border-radius: 8px;
    background: #4d6bfe;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.cp-submit:hover:not(:disabled)[b-xgw01tsavn] {
    background: #3d58e0;
}

.cp-submit:disabled[b-xgw01tsavn] {
    opacity: 0.6;
    cursor: default;
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
.login-page[b-1j3634rass] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1d29 0%, #23283b 100%);
    padding: 1rem;
}

.login-card[b-1j3634rass] {
    background: #2a2f45;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.login-logo[b-1j3634rass] {
    height: 48px;
    margin-bottom: 1rem;
}

.login-card h1[b-1j3634rass] {
    color: #fff;
    font-size: 1.4rem;
    margin: 0 0 0.25rem;
}

.login-subtitle[b-1j3634rass] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.login-field[b-1j3634rass] {
    text-align: left;
    margin-bottom: 1rem;
}

.login-field label[b-1j3634rass] {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}

.login-field[b-1j3634rass]  input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #1e2233;
    color: #fff;
    font-size: 0.95rem;
    outline: none;
}

.login-field[b-1j3634rass]  input:focus {
    border-color: #6c8cff;
    box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.2);
}

.login-submit[b-1j3634rass] {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem;
    border: none;
    border-radius: 8px;
    background: #4d6bfe;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.login-submit:hover[b-1j3634rass] {
    background: #3d58e0;
}

.login-error[b-1j3634rass] {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ff8b98;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    text-align: left;
}
/* /Components/Pages/Admin/ApiTraffic.razor.rz.scp.css */
/* Statistics Cards */
.stat-card[b-pd07751ua0] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

.stat-card:hover[b-pd07751ua0] {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
}

.stat-card.clickable[b-pd07751ua0] {
    cursor: pointer;
}

.stat-card.clickable:hover[b-pd07751ua0] {
    transform: translateY(-2px);
}

.stat-card.active[b-pd07751ua0] {
    border-width: 2px;
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
}

.stat-card.active[b-pd07751ua0]::after {
    content: "✓ Filtered";
    display: block;
    font-size: 0.65rem;
    color: var(--primary);
    margin-top: 0.25rem;
}

.stat-card.warning[b-pd07751ua0] {
    border-color: #ffc107;
    background-color: rgba(255, 193, 7, 0.1);
}

.stat-card.warning.active[b-pd07751ua0] {
    border-color: #ffc107;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
}

.stat-card.warning.active[b-pd07751ua0]::after {
    color: #ffc107;
}

.stat-card.danger[b-pd07751ua0] {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

.stat-card.danger.active[b-pd07751ua0] {
    border-color: #dc3545;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.3);
}

.stat-card.danger.active[b-pd07751ua0]::after {
    color: #dc3545;
}

.stat-value[b-pd07751ua0] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card.warning .stat-value[b-pd07751ua0] {
    color: #ffc107;
}

.stat-card.danger .stat-value[b-pd07751ua0] {
    color: #dc3545;
}

.stat-label[b-pd07751ua0] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Filter Section */
.filter-section[b-pd07751ua0] {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Traffic Table */
.traffic-table[b-pd07751ua0] {
    font-size: 0.85rem;
}

.traffic-table thead[b-pd07751ua0] {
    background-color: var(--bg-secondary);
}

.traffic-table thead th[b-pd07751ua0] {
    border-bottom: 2px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.traffic-table tbody tr[b-pd07751ua0] {
    transition: background-color 0.15s ease;
}

.traffic-table tbody tr:hover[b-pd07751ua0] {
    background-color: var(--bg-hover) !important;
}

.traffic-table td[b-pd07751ua0] {
    vertical-align: middle;
    border-color: var(--border-color);
}

/* Path cell truncation */
.path-cell[b-pd07751ua0] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sticky header for table */
.sticky-top[b-pd07751ua0] {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bg-secondary);
}

/* Security status colors */
.text-danger[b-pd07751ua0] {
    color: #dc3545 !important;
    font-weight: 600;
}

.text-warning[b-pd07751ua0] {
    color: #ffc107 !important;
}

.text-success[b-pd07751ua0] {
    color: #28a745 !important;
}

/* Badge styling */
.badge[b-pd07751ua0] {
    font-weight: 500;
    font-size: 0.7rem;
}

/* Table row highlighting */
.table-danger[b-pd07751ua0] {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

.table-warning[b-pd07751ua0] {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

/* Animate pulse for alerts */
.animate-pulse[b-pd07751ua0] {
    animation: pulse-b-pd07751ua0 1.5s infinite;
}

@keyframes pulse-b-pd07751ua0 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Dashboard card override */
[b-pd07751ua0] .dashboard-card .card-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

[b-pd07751ua0] .dashboard-card .card-body {
    background-color: var(--bg-card);
}

/* Link styling */
a[b-pd07751ua0] {
    color: var(--primary);
    text-decoration: none;
}

a:hover[b-pd07751ua0] {
    text-decoration: underline;
}

/* Small badge adjustments */
.badge.bg-info[b-pd07751ua0] {
    background-color: #17a2b8 !important;
}

.badge.bg-success[b-pd07751ua0] {
    background-color: #28a745 !important;
}

.badge.bg-warning[b-pd07751ua0] {
    background-color: #ffc107 !important;
}

.badge.bg-danger[b-pd07751ua0] {
    background-color: #dc3545 !important;
}

.badge.bg-secondary[b-pd07751ua0] {
    background-color: #6c757d !important;
}

/* Form controls */
.form-select-sm[b-pd07751ua0],
.form-control-sm[b-pd07751ua0] {
    font-size: 0.8rem;
}

.form-label.small[b-pd07751ua0] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

/* IP and endpoint summary tables */
.table-sm td[b-pd07751ua0],
.table-sm th[b-pd07751ua0] {
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
}
/* /Components/Pages/Admin/CardsPurchased.razor.rz.scp.css */
/* ===================================================================
   Cards Purchased — dark dashboard
   Built on the app design tokens in wwwroot/app.css.
   =================================================================== */

.cp-page[b-ao34jacjrh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

/* ===== Hero ======================================================= */

.cp-hero[b-ao34jacjrh] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(13, 148, 136, 0.06) 55%, rgba(234, 88, 12, 0.06) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.cp-hero-row[b-ao34jacjrh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cp-hero-title[b-ao34jacjrh] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.cp-hero-title i[b-ao34jacjrh] {
    color: var(--accent-cyan);
    font-size: 1.125rem;
}

.cp-hero-sub[b-ao34jacjrh] {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* The headline number — top right, no stat-card row taking up a whole band. */
.cp-hero-total[b-ao34jacjrh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    margin-left: auto;
}

.cp-total-label[b-ao34jacjrh] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
}

.cp-total-value[b-ao34jacjrh] {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin: 0.125rem 0;
}

.cp-total-value.is-negative[b-ao34jacjrh] {
    color: var(--danger);
}

.cp-total-meta[b-ao34jacjrh] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ===== Controls =================================================== */

.cp-controls[b-ao34jacjrh] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.cp-control-search[b-ao34jacjrh] {
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 420px;
}

.cp-select[b-ao34jacjrh] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.4375rem 0.75rem;
    min-width: 150px;
    transition: border-color 0.2s ease;
}

.cp-select:focus[b-ao34jacjrh] {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.cp-chips[b-ao34jacjrh] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.1875rem;
}

.cp-chip[b-ao34jacjrh] {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3125rem 0.6875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.cp-chip:hover[b-ao34jacjrh] {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.cp-chip.active[b-ao34jacjrh] {
    background: var(--primary-blue);
    color: #fff;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.35);
}

.cp-btn[b-ao34jacjrh] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.4375rem 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cp-btn-sm[b-ao34jacjrh] {
    font-size: 0.75rem;
    padding: 0.3125rem 0.625rem;
}

.cp-btn-ghost[b-ao34jacjrh] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.cp-btn-ghost:hover[b-ao34jacjrh] {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.cp-active-filters[b-ao34jacjrh] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.cp-filter-chip[b-ao34jacjrh] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.32);
    border-radius: var(--radius-md);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.cp-filter-chip i[b-ao34jacjrh] {
    color: var(--primary-light);
    font-size: 0.6875rem;
}

.cp-filter-key[b-ao34jacjrh] {
    color: var(--text-muted);
    font-weight: 600;
}

.cp-filter-val[b-ao34jacjrh] {
    font-weight: 500;
}

.cp-filter-x[b-ao34jacjrh] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 0 0 0.125rem;
    line-height: 1;
    transition: color 0.15s ease;
}

.cp-filter-x:hover[b-ao34jacjrh] {
    color: var(--danger);
}

/* ===== Panels ===================================================== */

.cp-panel[b-ao34jacjrh] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cp-panel-head[b-ao34jacjrh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.015);
    flex-wrap: wrap;
}

/* Series identity: a color bar keyed to the chart series, so the table and the
   chart line read as the same thing without relying on hue alone. */
.cp-panel-head-goatbots[b-ao34jacjrh] { box-shadow: inset 3px 0 0 0 #3b82f6; }
.cp-panel-head-external[b-ao34jacjrh] { box-shadow: inset 3px 0 0 0 #0d9488; }
.cp-panel-head-family[b-ao34jacjrh] { box-shadow: inset 3px 0 0 0 #ea580c; }

.cp-panel-title[b-ao34jacjrh] {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cp-panel-title i[b-ao34jacjrh] {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.cp-panel-note[b-ao34jacjrh] {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* The per-source amount lives here, in the table header. */
.cp-head-metrics[b-ao34jacjrh] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-left: auto;
}

.cp-head-value[b-ao34jacjrh] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.cp-head-value.is-negative[b-ao34jacjrh] {
    color: var(--danger);
}

.cp-head-qty[b-ao34jacjrh] {
    font-size: 0.6875rem;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

.cp-export[b-ao34jacjrh] {
    display: flex;
    gap: 0.375rem;
    margin-left: 0.5rem;
}

.cp-panel-body[b-ao34jacjrh] {
    padding: 0.875rem;
}

.cp-panel-body-flush[b-ao34jacjrh] {
    padding: 0;
}

.cp-chart-panel .cp-panel-body[b-ao34jacjrh] {
    padding: 0.5rem 0.5rem 0.25rem;
}

.cp-chart[b-ao34jacjrh] {
    min-height: 320px;
}

/* ===== Source grid ================================================ */

.cp-source-grid[b-ao34jacjrh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.cp-source-panel[b-ao34jacjrh] {
    min-width: 0;
}

/* ===== Tables ===================================================== */

.cp-table-wrap[b-ao34jacjrh] {
    overflow-x: auto;
}

.cp-table[b-ao34jacjrh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.cp-table thead th[b-ao34jacjrh] {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.cp-table tbody td[b-ao34jacjrh] {
    padding: 0.4375rem 0.75rem;
    border-bottom: 1px solid rgba(46, 52, 64, 0.55);
    color: var(--text-secondary);
    vertical-align: middle;
}

.cp-table tbody tr:last-child td[b-ao34jacjrh] {
    border-bottom: none;
}

.cp-table tbody tr:hover[b-ao34jacjrh] {
    background: rgba(255, 255, 255, 0.025);
}

.cp-table-sm tbody td[b-ao34jacjrh] {
    padding: 0.375rem 0.75rem;
}

.cp-num[b-ao34jacjrh] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cp-table thead th.cp-num[b-ao34jacjrh] {
    text-align: right;
}

.cp-strong[b-ao34jacjrh] {
    color: var(--text-primary);
    font-weight: 600;
}

.cp-muted[b-ao34jacjrh] {
    color: var(--text-muted);
}

.is-negative[b-ao34jacjrh] {
    color: var(--danger);
}

.cp-when[b-ao34jacjrh] {
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cp-card-link[b-ao34jacjrh] {
    color: var(--accent-cyan);
    text-decoration: none;
    font-weight: 500;
}

.cp-card-link:hover[b-ao34jacjrh] {
    color: var(--primary-light);
    text-decoration: underline;
}

.cp-catid[b-ao34jacjrh] {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

.cp-clickable[b-ao34jacjrh] {
    cursor: pointer;
}

/* ===== Expandable card rows ======================================= */

.cp-expander-col[b-ao34jacjrh] {
    width: 22px;
    padding-right: 0 !important;
}

.cp-card-row[b-ao34jacjrh] {
    cursor: pointer;
}

.cp-expander[b-ao34jacjrh] {
    color: var(--text-light);
    font-size: 0.625rem;
    transition: color 0.15s ease;
}

.cp-card-row:hover .cp-expander[b-ao34jacjrh] {
    color: var(--primary-light);
}

.cp-card-row.is-open[b-ao34jacjrh] {
    background: rgba(59, 130, 246, 0.07);
}

.cp-card-row.is-open .cp-expander[b-ao34jacjrh] {
    color: var(--primary-light);
}

.cp-legs-row > td[b-ao34jacjrh] {
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid var(--border-color) !important;
}

.cp-legs[b-ao34jacjrh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.cp-legs thead th[b-ao34jacjrh] {
    text-align: left;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
    padding: 0.375rem 0.75rem 0.25rem;
    white-space: nowrap;
}

.cp-legs thead th.cp-num[b-ao34jacjrh] {
    text-align: right;
}

.cp-legs tbody td[b-ao34jacjrh] {
    padding: 0.25rem 0.75rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(46, 52, 64, 0.4);
}

.cp-legs tbody tr:last-child td[b-ao34jacjrh] {
    border-bottom: none;
}

.cp-legs tbody tr:hover[b-ao34jacjrh] {
    background: rgba(255, 255, 255, 0.03);
}

.cp-party[b-ao34jacjrh] {
    color: var(--text-muted);
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-legs-loading[b-ao34jacjrh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.cp-legs-note[b-ao34jacjrh] {
    padding: 0.375rem 0.75rem 0.5rem;
    color: var(--text-light);
    font-size: 0.6875rem;
}

.cp-rank-1[b-ao34jacjrh] { color: #f59e0b; }
.cp-rank-2[b-ao34jacjrh] { color: #9ca3af; }
.cp-rank-3[b-ao34jacjrh] { color: #b45309; }

/* ===== Pager ====================================================== */

.cp-pager[b-ao34jacjrh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.15);
    flex-wrap: wrap;
}

.cp-pager-info[b-ao34jacjrh] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.cp-pager-btns[b-ao34jacjrh] {
    display: flex;
    gap: 0.25rem;
}

.cp-page-btn[b-ao34jacjrh] {
    min-width: 30px;
    height: 30px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cp-page-btn:hover:not(:disabled)[b-ao34jacjrh] {
    border-color: var(--primary-blue);
    color: var(--text-primary);
}

.cp-page-btn.active[b-ao34jacjrh] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
}

.cp-page-btn:disabled[b-ao34jacjrh] {
    opacity: 0.4;
    cursor: default;
}

/* ===== States ===================================================== */

.cp-loading[b-ao34jacjrh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}

.cp-empty[b-ao34jacjrh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--text-light);
    font-size: 0.8125rem;
}

.cp-empty i[b-ao34jacjrh] {
    font-size: 1.5rem;
    opacity: 0.5;
}

.cp-empty-sm[b-ao34jacjrh] {
    padding: 1.5rem 1rem;
    font-size: 0.75rem;
}

.cp-empty-sm i[b-ao34jacjrh] {
    font-size: 1.125rem;
}

/* ===== Modal ====================================================== */

.cp-modal-backdrop[b-ao34jacjrh] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    z-index: 1050;
}

.cp-modal[b-ao34jacjrh] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
    z-index: 1060;
    overflow: hidden;
}

.cp-modal-head[b-ao34jacjrh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.cp-modal-head h3[b-ao34jacjrh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cp-modal-head h3 i[b-ao34jacjrh] {
    color: var(--warning);
}

.cp-modal-x[b-ao34jacjrh] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.25rem;
    transition: color 0.15s ease;
}

.cp-modal-x:hover[b-ao34jacjrh] {
    color: var(--text-primary);
}

.cp-modal-body[b-ao34jacjrh] {
    overflow: auto;
}

/* ===== Responsive ================================================= */

@media (max-width: 1100px) {
    .cp-source-grid[b-ao34jacjrh] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cp-hero[b-ao34jacjrh] {
        padding: 0.875rem 1rem;
    }

    .cp-hero-row[b-ao34jacjrh] {
        align-items: flex-end;
    }

    .cp-hero-title[b-ao34jacjrh] {
        font-size: 1.125rem;
    }

    .cp-total-value[b-ao34jacjrh] {
        font-size: 1.5rem;
    }

    .cp-control-search[b-ao34jacjrh] {
        flex: 1 1 100%;
        max-width: none;
    }

    .cp-hide-md[b-ao34jacjrh] {
        display: none;
    }
}

@media (max-width: 560px) {
    .cp-hero-sub[b-ao34jacjrh] {
        display: none;
    }

    .cp-btn-text[b-ao34jacjrh] {
        display: none;
    }

    .cp-hide-sm[b-ao34jacjrh] {
        display: none;
    }

    .cp-chips[b-ao34jacjrh] {
        width: 100%;
        justify-content: space-between;
    }

    .cp-chip[b-ao34jacjrh] {
        padding: 0.3125rem 0.5rem;
        font-size: 0.6875rem;
    }
}
/* /Components/Pages/Assets/Cashflow.razor.rz.scp.css */
/* ============ Hero ============ */

.cf-hero[b-nqputkroxl] {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.cf-hero[b-nqputkroxl]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% -20%, rgba(99, 102, 241, 0.18), transparent 60%);
    pointer-events: none;
}

.cf-hero-label[b-nqputkroxl] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.cf-hero-value[b-nqputkroxl] {
    font-size: 3.75rem;
    font-weight: 800;
    line-height: 1.1;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cf-hero-value.positive[b-nqputkroxl] {
    background-image: linear-gradient(120deg, #4ade80, #16a34a 60%, #6366f1);
    text-shadow: 0 0 40px rgba(34, 197, 94, 0.25);
}

.cf-hero-value.negative[b-nqputkroxl] {
    background-image: linear-gradient(120deg, #fb7185, #f43f5e 60%, #d97706);
    text-shadow: 0 0 40px rgba(244, 63, 94, 0.25);
}

.cf-hero-sub[b-nqputkroxl] {
    font-size: 0.9rem;
}

.cf-hero-chip[b-nqputkroxl] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.cf-hero-chip.chip-up[b-nqputkroxl] {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
}

.cf-hero-chip.chip-down[b-nqputkroxl] {
    color: #fb7185;
    background: rgba(244, 63, 94, 0.12);
}

/* ============ Net worth line ============ */
/* The one whole-desk figure for the period, sat above the counterparty view it frames. It used
   to head its own band of three across the top; those three now live where each belongs — this
   one here, the collection against cost among the tiles, the rental debt in its own tile. */

.cf-hero-worth[b-nqputkroxl] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    cursor: pointer;
}

.cf-hero-worth:hover .cf-hero-worth-value[b-nqputkroxl] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cf-hero-worth-label[b-nqputkroxl] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.cf-hero-worth-value[b-nqputkroxl] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.cf-hero-worth-value.up[b-nqputkroxl] {
    color: #4ade80;
}

.cf-hero-worth-value.down[b-nqputkroxl] {
    color: #fb7185;
}

/* ============ Plain-English reading ============ */

.cf-reading[b-nqputkroxl] {
    padding: 0.85rem 1.15rem;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ============ KPI tiles ============ */

/* Auto-fit rather than a fixed column count: the row has grown past the six it was built for,
   and a hard `repeat(n, 1fr)` strands the odd tile alone on its own line at some widths. */
.cf-kpi-grid[b-nqputkroxl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
}

.cf-tile[b-nqputkroxl] {
    background: var(--bg-card, #1e2128);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    min-height: 110px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cf-tile:hover[b-nqputkroxl] {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.cf-tile-label[b-nqputkroxl] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.35rem;
}

/* Deliberately smaller than the headline band above — these are the workings, not the answer */
.cf-tile-value[b-nqputkroxl] {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.cf-tile-sub[b-nqputkroxl] {
    font-size: 0.75rem;
    margin-top: 0.3rem;
    color: #94a3b8;
}

.cf-tile-spark[b-nqputkroxl] {
    margin-top: 0.4rem;
}

.cf-sparkline[b-nqputkroxl] {
    display: block;
}

/* ============ Unrealized P&L ============ */

.cf-unrealized-value[b-nqputkroxl] {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.15;
}

.cf-unrealized-value.positive[b-nqputkroxl] {
    color: #4ade80;
}

.cf-unrealized-value.negative[b-nqputkroxl] {
    color: #fb7185;
}

/* ============ Horizontal bars (unrealized + credit flow) ============ */

.cf-hbar-row[b-nqputkroxl] {
    display: grid;
    grid-template-columns: 190px 1fr 110px;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.cf-hbar-label[b-nqputkroxl] {
    font-size: 0.82rem;
    color: #94a3b8;
    text-align: right;
}

.cf-hbar-track[b-nqputkroxl] {
    height: 14px;
    background: rgba(148, 163, 184, 0.10);
    border-radius: 7px;
    overflow: hidden;
}

.cf-hbar-fill[b-nqputkroxl] {
    height: 100%;
    border-radius: 7px;
}

.cf-hbar-value[b-nqputkroxl] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
}

.cf-redemption-badge[b-nqputkroxl] {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    font-weight: 700;
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* ============ Stacked flow bars ============ */

.cf-stack-row[b-nqputkroxl] {
    margin-bottom: 1rem;
}

.cf-stack-title[b-nqputkroxl] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.35rem;
}

.cf-stack-bar[b-nqputkroxl] {
    display: flex;
    gap: 2px; /* 2px surface gap between segments */
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
}

.cf-stack-seg[b-nqputkroxl] {
    height: 100%;
    border-radius: 3px;
    min-width: 0;
}

.cf-legend[b-nqputkroxl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #cbd5e1;
}

.cf-legend-dot[b-nqputkroxl] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* ============ Flow diagram (Sankey) ============ */

.cf-flow-svg[b-nqputkroxl] {
    display: block;
    overflow: visible;
}

[b-nqputkroxl] .cf-flow-label {
    fill: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
}

[b-nqputkroxl] .cf-flow-value {
    fill: #94a3b8;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

[b-nqputkroxl] .cf-flow-desk-label {
    fill: #a5b4fc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

[b-nqputkroxl] .cf-flow-ribbon {
    transition: fill-opacity 0.18s ease;
}

[b-nqputkroxl] .cf-flow-ribbon:hover {
    fill-opacity: 0.55;
}

/* ============ Bridge bars (hero) ============ */
/* Diverging from a centre axis: negative terms run left, positive right, so the shape of
   the headline reads at a glance without needing a full chart. */

.cf-bridge[b-nqputkroxl] {
    max-width: 380px;
    margin-inline: auto;
    width: 100%;
}

.cf-bridge-row[b-nqputkroxl] {
    display: grid;
    grid-template-columns: 116px 1fr 62px;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.cf-bridge-label[b-nqputkroxl] {
    font-size: 0.76rem;
    color: #94a3b8;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-bridge-track[b-nqputkroxl] {
    position: relative;
    display: block;
    height: 6px;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 3px;
}

.cf-bridge-axis[b-nqputkroxl] {
    position: absolute;
    left: 50%;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background: rgba(148, 163, 184, 0.35);
}

.cf-bridge-fill[b-nqputkroxl] {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 3px;
    min-width: 2px;
}

.cf-bridge-fill.pos[b-nqputkroxl] {
    background: #16a34a;
}

.cf-bridge-fill.neg[b-nqputkroxl] {
    background: #f43f5e;
}

.cf-bridge-total .cf-bridge-label[b-nqputkroxl] {
    color: #e2e8f0;
    font-weight: 700;
}

.cf-bridge-total .cf-bridge-track[b-nqputkroxl] {
    height: 9px;
}

.cf-bridge-total .cf-bridge-fill[b-nqputkroxl] {
    background: #6366f1;
}

.cf-bridge-value[b-nqputkroxl] {
    font-size: 0.78rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cf-bridge-total .cf-bridge-value[b-nqputkroxl] {
    font-size: 0.85rem;
}

/* ============ Statement rows (card trading, family account) ============ */

.cf-statement[b-nqputkroxl] {
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.cf-statement td[b-nqputkroxl],
.cf-statement th[b-nqputkroxl] {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    /* Cells without a semantic colour inherited a near-black default and were unreadable
       against the dark card — the cards in/out columns rendered invisible. */
    color: #cbd5e1;
}

/* Cells without a semantic colour (the card-value columns) inherited a near-black default
   and were invisible against the card surface. */
.cf-statement td[b-nqputkroxl] {
    color: #cbd5e1;
}

.cf-statement thead th[b-nqputkroxl] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    border-bottom-color: rgba(148, 163, 184, 0.2);
}

.cf-statement .cf-row-total td[b-nqputkroxl] {
    border-top: 1px solid rgba(148, 163, 184, 0.28);
    border-bottom: none;
    font-weight: 700;
    color: #e2e8f0;
}

.cf-statement .cf-row-label[b-nqputkroxl] {
    color: #cbd5e1;
}

.cf-statement .cf-row-note[b-nqputkroxl] {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
}

/* ============ Segmented toggle ============ */

.cf-segmented[b-nqputkroxl] {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.cf-segmented button[b-nqputkroxl] {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 7px;
    transition: background 0.18s ease, color 0.18s ease;
}

/* Four tabs need to fit where two did */
.cf-segmented-sm button[b-nqputkroxl] {
    font-size: 0.76rem;
    padding: 0.3rem 0.65rem;
}

.cf-segmented button.active[b-nqputkroxl] {
    background: rgba(99, 102, 241, 0.9);
    color: #fff;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
}

/* ============ Stat detail modal ============ */

.cf-tile[b-nqputkroxl] {
    cursor: pointer;
    position: relative;
}

/* No drill-down behind this one — don't offer a click that does nothing. */
.cf-tile-static[b-nqputkroxl] {
    cursor: default;
}

.cf-tile-hint[b-nqputkroxl] {
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    font-size: 0.7rem;
    color: #64748b;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.cf-tile:hover .cf-tile-hint[b-nqputkroxl] {
    opacity: 1;
}

.cf-modal-backdrop[b-nqputkroxl] {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 14, 0.72);
    backdrop-filter: blur(4px);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.cf-modal[b-nqputkroxl] {
    background: var(--bg-card, #1e2128);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    width: min(980px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
}

.cf-modal-head[b-nqputkroxl] {
    padding: 1.3rem 1.6rem 0.9rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.cf-modal-value[b-nqputkroxl] {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
}

.cf-modal-body[b-nqputkroxl] {
    padding: 1.2rem 1.6rem 1.6rem;
}

.cf-modal-close[b-nqputkroxl] {
    position: absolute;
    top: 0.9rem;
    right: 1.1rem;
    background: rgba(148, 163, 184, 0.12);
    border: none;
    color: #cbd5e1;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    line-height: 1;
}

.cf-modal-close:hover[b-nqputkroxl] {
    background: rgba(244, 63, 94, 0.25);
    color: #fff;
}

.cf-modal-facts[b-nqputkroxl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.9rem;
    margin-top: 1.1rem;
}

.cf-fact[b-nqputkroxl] {
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
}

.cf-fact-label[b-nqputkroxl] {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.cf-fact-value[b-nqputkroxl] {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: 0.15rem;
}

.cf-trend-svg[b-nqputkroxl] {
    display: block;
    width: 100%;
}

[b-nqputkroxl] .cf-trend-axis {
    fill: #94a3b8;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

[b-nqputkroxl] .cf-trend-bar {
    transition: fill-opacity 0.15s ease;
}

[b-nqputkroxl] .cf-trend-bar:hover {
    fill-opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .cf-modal[b-nqputkroxl] {
        animation: cf-modal-in-b-nqputkroxl 0.22s ease-out;
    }
}

@keyframes cf-modal-in-b-nqputkroxl {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

/* ============ Collection valuation rows ============ */

.cf-val-row[b-nqputkroxl] {
    display: grid;
    grid-template-columns: 260px 1fr 110px 96px;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.85rem;
}

.cf-val-label[b-nqputkroxl] {
    color: #e2e8f0;
    font-size: 0.9rem;
    text-align: right;
}

.cf-val-track[b-nqputkroxl] {
    display: block;
    height: 22px;
    background: rgba(148, 163, 184, 0.07);
    border-radius: 6px;
    overflow: hidden;
}

.cf-val-fill[b-nqputkroxl] {
    display: block;
    height: 100%;
    border-radius: 6px;
    transform-origin: left;
}

.cf-val-amount[b-nqputkroxl] {
    text-align: right;
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}

.cf-val-delta[b-nqputkroxl] {
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
    .cf-val-fill[b-nqputkroxl] {
        animation: cf-grow-x-b-nqputkroxl 0.9s ease-out;
    }
}

@media (max-width: 900px) {
    .cf-val-row[b-nqputkroxl] {
        grid-template-columns: 1fr 90px 80px;
    }

    .cf-val-track[b-nqputkroxl] {
        display: none;
    }
}

/* ============ Age bands ============ */

.cf-age-row[b-nqputkroxl] {
    display: grid;
    grid-template-columns: 108px 1fr 96px 92px;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
}

.cf-age-label[b-nqputkroxl] {
    color: #cbd5e1;
    text-align: right;
}

.cf-age-track[b-nqputkroxl] {
    height: 20px;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.cf-age-fill[b-nqputkroxl] {
    height: 100%;
    border-radius: 6px;
    transform-origin: left;
}

.cf-age-value[b-nqputkroxl] {
    font-weight: 600;
    color: #e2e8f0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cf-age-unrealized[b-nqputkroxl] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ============ Mover rows ============ */

.cf-mover-row[b-nqputkroxl] {
    display: grid;
    grid-template-columns: 1fr 62px 108px 92px;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.2rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.07);
    font-size: 0.82rem;
}

.cf-mover-name[b-nqputkroxl] {
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-mover-set[b-nqputkroxl] {
    color: #64748b;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.cf-mover-num[b-nqputkroxl] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
}

.cf-mover-change[b-nqputkroxl] {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ============ Daily table drill-down ============ */

.cf-day-row[b-nqputkroxl] {
    cursor: pointer;
}

.cf-day-detail > td[b-nqputkroxl] {
    background: rgba(15, 17, 21, 0.55);
    border-left: 3px solid rgba(99, 102, 241, 0.5);
    padding: 0.25rem 0.5rem 0.6rem;
}

.cf-detail-table[b-nqputkroxl] {
    font-size: 0.82rem;
    margin-bottom: 0;
}

.cf-detail-table thead th[b-nqputkroxl] {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom-color: rgba(148, 163, 184, 0.2);
}

.cf-adjustment-row > td[b-nqputkroxl] {
    opacity: 0.75;
}

.cf-view-trade[b-nqputkroxl] {
    color: #94a3b8;
    text-decoration: none;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.cf-view-trade:hover[b-nqputkroxl] {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.15);
}

.cf-rental-tag[b-nqputkroxl] {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.25);
    vertical-align: text-bottom;
}

/* ============ Animations (respect reduced motion) ============ */

@media (prefers-reduced-motion: no-preference) {
    .cf-tile[b-nqputkroxl] {
        opacity: 0;
        animation: cf-fade-up-b-nqputkroxl 0.5s ease-out forwards;
        animation-delay: calc(var(--tile-index, 0) * 80ms);
    }

    .cf-hero[b-nqputkroxl] {
        animation: cf-fade-up-b-nqputkroxl 0.5s ease-out;
    }

    .cf-hbar-fill[b-nqputkroxl] {
        animation: cf-grow-x-b-nqputkroxl 0.9s ease-out;
        transform-origin: left;
    }

    .cf-stack-seg[b-nqputkroxl] {
        animation: cf-grow-x-b-nqputkroxl 0.9s ease-out;
        transform-origin: left;
    }

    .cf-sparkline[b-nqputkroxl] {
        animation: cf-fade-in-b-nqputkroxl 1s ease-out;
    }
}

@keyframes cf-fade-up-b-nqputkroxl {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cf-fade-in-b-nqputkroxl {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cf-grow-x-b-nqputkroxl {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
/* /Components/Pages/BotMessages/BotMessages.razor.rz.scp.css */
/* Dark Mode Bot Messages - Compact Modern Design */

.bot-message-card[b-jn6y29giaz] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
    overflow: hidden;
}

.bot-message-card:hover[b-jn6y29giaz] {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.bot-message-card .card-header[b-jn6y29giaz] {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
}

.bot-message-card .card-header h6[b-jn6y29giaz] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary);
    margin: 0;
}

.bot-message-card .card-body[b-jn6y29giaz] {
    background: var(--bg-card);
    padding: 0.75rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.message-display[b-jn6y29giaz] {
    min-height: 50px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    color: var(--text-primary);
    font-size: 0.75rem;
    word-wrap: break-word;
}

.bot-selection[b-jn6y29giaz] {
    max-height: 150px;
    overflow-y: auto;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
}

.form-check[b-jn6y29giaz] {
    min-width: 80px;
}

.form-check-label[b-jn6y29giaz] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.form-check-input:checked[b-jn6y29giaz] {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.spinner-border-sm[b-jn6y29giaz] {
    width: 0.8rem;
    height: 0.8rem;
}

/* Form Controls Dark Mode */
.form-control[b-jn6y29giaz] {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color);
    color: #ffffff !important;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.form-control:focus[b-jn6y29giaz] {
    background: var(--bg-tertiary) !important;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
    color: #ffffff !important;
}

.form-control[b-jn6y29giaz]::placeholder {
    color: var(--text-muted) !important;
}

textarea.form-control[b-jn6y29giaz] {
    resize: vertical;
    min-height: 60px;
}

/* Buttons Dark Mode */
.btn[b-jn6y29giaz] {
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all 0.15s ease;
}

.btn-primary[b-jn6y29giaz] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
}

.btn-primary:hover[b-jn6y29giaz] {
    background: var(--primary-light);
    border-color: var(--primary-light);
}

.btn-outline-secondary[b-jn6y29giaz] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-outline-secondary:hover[b-jn6y29giaz] {
    background: var(--bg-tertiary);
    border-color: var(--gray-400);
    color: var(--text-primary);
}

.btn-outline-primary[b-jn6y29giaz] {
    background: transparent;
    border: 1px solid var(--primary-blue);
    color: var(--primary-light);
}

.btn-outline-primary:hover[b-jn6y29giaz] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
}

.btn-success[b-jn6y29giaz] {
    background: var(--success);
    border-color: var(--success);
    color: var(--white);
}

.btn-success:hover[b-jn6y29giaz] {
    background: var(--success-dark);
    border-color: var(--success-dark);
}

/* Modal Dark Mode */
.modal-content[b-jn6y29giaz] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.modal-header[b-jn6y29giaz] {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
}

.modal-header .modal-title[b-jn6y29giaz] {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.modal-body[b-jn6y29giaz] {
    background: var(--bg-card);
    padding: 1rem;
}

.modal-footer[b-jn6y29giaz] {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
}

.btn-close[b-jn6y29giaz] {
    filter: invert(1);
    opacity: 0.6;
}

.btn-close:hover[b-jn6y29giaz] {
    opacity: 1;
}

/* Alert Dark Mode */
.alert-info[b-jn6y29giaz] {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid var(--info);
    border-left: 3px solid var(--info);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

.alert-info .alert-heading[b-jn6y29giaz] {
    color: var(--accent-cyan);
    font-size: 0.85rem;
    font-weight: 600;
}

.alert-info .btn[b-jn6y29giaz] {
    margin-top: 0.5rem;
}

/* Status Colors */
.text-success[b-jn6y29giaz] {
    color: var(--success) !important;
}

.text-success i[b-jn6y29giaz] {
    color: var(--success) !important;
}

.text-warning[b-jn6y29giaz] {
    color: var(--warning) !important;
}

.text-warning i[b-jn6y29giaz] {
    color: var(--warning) !important;
}

.fw-bold[b-jn6y29giaz] {
    font-weight: 600 !important;
    color: var(--text-primary);
}

/* Background */
.bg-light[b-jn6y29giaz] {
    background: var(--bg-tertiary) !important;
}

/* Form Text */
.form-text[b-jn6y29giaz] {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.form-label[b-jn6y29giaz] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

/* Card Grid Layout */
.row .col-md-6[b-jn6y29giaz] {
    display: flex;
}

.bot-message-card[b-jn6y29giaz] {
    width: 100%;
    height: 100%;
}

/* Page Container Override */
.container-fluid[b-jn6y29giaz] {
    background: var(--bg-primary);
}

/* Dashboard Card Override */
.dashboard-card[b-jn6y29giaz] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.dashboard-card .card-header[b-jn6y29giaz] {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
}

.dashboard-card .card-header h5[b-jn6y29giaz] {
    color: var(--text-primary);
    font-size: 0.9rem;
    margin: 0;
}

.dashboard-card .card-header h5 i[b-jn6y29giaz] {
    color: var(--accent-cyan);
}

/* Collapsible card header */
.collapsible-header[b-jn6y29giaz] {
    user-select: none;
    transition: background 0.15s ease;
}

.collapsible-header:hover[b-jn6y29giaz] {
    background: var(--bg-secondary, var(--bg-tertiary));
}

.collapse-chevron[b-jn6y29giaz] {
    transition: transform 0.2s ease;
    font-size: 0.85rem;
}

.collapsible-header[aria-expanded="false"] .collapse-chevron[b-jn6y29giaz] {
    transform: rotate(-90deg);
}

.dashboard-card .card-body[b-jn6y29giaz] {
    background: var(--bg-card);
    padding: 1rem;
}

/* Loading State */
.text-center.py-4[b-jn6y29giaz] {
    padding: 2rem 0;
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
    .bot-selection[b-jn6y29giaz] {
        justify-content: center;
    }
    
    .form-check[b-jn6y29giaz] {
        min-width: 70px;
    }
    
    .bot-message-card .card-header[b-jn6y29giaz] {
        padding: 0.4rem 0.6rem;
    }
    
    .bot-message-card .card-body[b-jn6y29giaz] {
        padding: 0.5rem;
    }
}

/* Cardbot Buyer Chains */
.buyer-chain-card[b-jn6y29giaz] {
    background: var(--bg-secondary, var(--bg-card));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.buyer-chain-card > .card-header[b-jn6y29giaz] {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
}

.buyer-chain-card > .card-header h6[b-jn6y29giaz] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin: 0;
}

.buyer-chain-card > .card-header h6 i[b-jn6y29giaz] {
    color: var(--accent-cyan);
}

.buyer-chain-card .card-body[b-jn6y29giaz] {
    background: var(--bg-card);
    padding: 0.75rem;
}

.chain-online-badge[b-jn6y29giaz] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
}

.buyer-status[b-jn6y29giaz] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

.buyer-online[b-jn6y29giaz] {
    color: var(--success);
    background: rgba(34, 197, 94, 0.12);
}

.buyer-offline[b-jn6y29giaz] {
    color: var(--text-muted);
    background: var(--bg-tertiary);
}
/* /Components/Pages/ControlCenter/ControlCenter.razor.rz.scp.css */
/* Control Center Styles */
.control-center-container[b-s2rp08dc80] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
}

/* Summary Cards Row */
.summary-cards-row[b-s2rp08dc80] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 992px) {
    .summary-cards-row[b-s2rp08dc80] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .summary-cards-row[b-s2rp08dc80] {
        grid-template-columns: 1fr;
    }
}

.summary-card[b-s2rp08dc80] {
    background: var(--card-background, #242830);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.summary-card:hover[b-s2rp08dc80] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.card-icon[b-s2rp08dc80] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.vms-online .card-icon[b-s2rp08dc80] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.bots-online .card-icon[b-s2rp08dc80] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.issues .card-icon[b-s2rp08dc80] {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.restarts .card-icon[b-s2rp08dc80] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.card-content[b-s2rp08dc80] {
    flex: 1;
}

.card-value[b-s2rp08dc80] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
    line-height: 1;
}

.card-label[b-s2rp08dc80] {
    font-size: 0.875rem;
    color: var(--text-secondary, #94a3b8);
    margin-top: 0.25rem;
}

.card-badge[b-s2rp08dc80] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
}

.card-badge.danger[b-s2rp08dc80] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.card-badge.warning[b-s2rp08dc80] {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
}

/* Control Panels Row */
.control-panels-row[b-s2rp08dc80] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 1200px) {
    .control-panels-row[b-s2rp08dc80] {
        grid-template-columns: 1fr;
    }
}

.control-panel[b-s2rp08dc80] {
    background: var(--card-background, #242830);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}

.panel-header[b-s2rp08dc80] {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    gap: 0.5rem;
}

.panel-header-top[b-s2rp08dc80] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h5[b-s2rp08dc80] {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary, #f8fafc);
    font-size: 1rem;
}

.panel-header-actions[b-s2rp08dc80] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.btn-xs[b-s2rp08dc80] {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    border-radius: 0.25rem;
}

.vm-operation-toast[b-s2rp08dc80] {
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.vm-operation-toast .toast-header[b-s2rp08dc80] {
    color: white;
    border-bottom: none;
}

.vm-operation-toast .toast-body[b-s2rp08dc80] {
    padding: 0.75rem;
}

.panel-filters .form-select[b-s2rp08dc80] {
    font-size: 0.8rem;
    padding: 0.3rem 2rem 0.3rem 0.5rem;
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: var(--text-primary, #f8fafc);
}

/* VM Filter Container */
.vm-filters-container[b-s2rp08dc80] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vm-quick-filters[b-s2rp08dc80] {
    display: flex;
    gap: 0.4rem;
}

.machine-selector[b-s2rp08dc80] {
    max-width: 150px;
    font-size: 0.8rem;
    padding: 0.3rem 2rem 0.3rem 0.5rem;
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: var(--text-primary, #f8fafc);
}

/* Bot Quick Filter Boxes */
.bot-quick-filters[b-s2rp08dc80] {
    display: flex;
    gap: 0.4rem;
}

.quick-filter-box[b-s2rp08dc80] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-filter-box:hover[b-s2rp08dc80] {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.quick-filter-box.active[b-s2rp08dc80] {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

.filter-letter[b-s2rp08dc80] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
    line-height: 1;
}

.quick-filter-box.active .filter-letter[b-s2rp08dc80] {
    color: #60a5fa;
}

.filter-count[b-s2rp08dc80] {
    font-size: 0.65rem;
    color: var(--text-secondary, #94a3b8);
    margin-top: 0.15rem;
    white-space: nowrap;
}

.quick-filter-box.active .filter-count[b-s2rp08dc80] {
    color: #93c5fd;
}

/* VM Quick Filter Colors */
.quick-filter-box.vm-all[b-s2rp08dc80] {
    border-color: rgba(59, 130, 246, 0.3);
}

.quick-filter-box.vm-all.active[b-s2rp08dc80] {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

.quick-filter-box.vm-all.active .filter-letter[b-s2rp08dc80] {
    color: #60a5fa;
}

.quick-filter-box.vm-online[b-s2rp08dc80] {
    border-color: rgba(34, 197, 94, 0.3);
}

.quick-filter-box.vm-online.active[b-s2rp08dc80] {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
}

.quick-filter-box.vm-online.active .filter-letter[b-s2rp08dc80] {
    color: #4ade80;
}

.quick-filter-box.vm-issues[b-s2rp08dc80] {
    border-color: rgba(234, 179, 8, 0.3);
}

.quick-filter-box.vm-issues.active[b-s2rp08dc80] {
    background: rgba(234, 179, 8, 0.2);
    border-color: #eab308;
}

.quick-filter-box.vm-issues.active .filter-letter[b-s2rp08dc80] {
    color: #facc15;
}

.quick-filter-box.vm-offline[b-s2rp08dc80] {
    border-color: rgba(107, 114, 128, 0.3);
}

.quick-filter-box.vm-offline.active[b-s2rp08dc80] {
    background: rgba(107, 114, 128, 0.2);
    border-color: #6b7280;
}

.quick-filter-box.vm-offline.active .filter-letter[b-s2rp08dc80] {
    color: #9ca3af;
}

@media (max-width: 576px) {
    .bot-quick-filters[b-s2rp08dc80] {
        gap: 0.25rem;
    }
    
    .quick-filter-box[b-s2rp08dc80] {
        min-width: 40px;
        padding: 0.3rem 0.4rem;
    }
    
    .filter-letter[b-s2rp08dc80] {
        font-size: 0.85rem;
    }
    
    .filter-count[b-s2rp08dc80] {
        font-size: 0.6rem;
    }
}

.panel-body[b-s2rp08dc80] {
    max-height: 400px;
    overflow-y: auto;
}

/* Compact Table Styles */
.compact-table[b-s2rp08dc80] {
    font-size: 0.85rem;
    margin: 0;
}

.compact-table th[b-s2rp08dc80] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #94a3b8);
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.compact-table th.sortable-header[b-s2rp08dc80] {
    cursor: pointer;
    user-select: none;
}

.compact-table th.sortable-header:hover[b-s2rp08dc80] {
    color: var(--text-primary, #e2e8f0);
    background: rgba(255,255,255,0.05);
}

.compact-table th.sortable-header i[b-s2rp08dc80] {
    margin-left: 0.25rem;
    font-size: 0.65rem;
}

.compact-table th.sortable-header i.sort-idle[b-s2rp08dc80] {
    opacity: 0.3;
}

.compact-table td[b-s2rp08dc80] {
    padding: 0.6rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.compact-table tbody tr:hover[b-s2rp08dc80] {
    background: rgba(255,255,255,0.03);
}

/* VM Specific Styles */
.vm-name-cell[b-s2rp08dc80] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.power-indicator[b-s2rp08dc80] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.power-on[b-s2rp08dc80] {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.power-off[b-s2rp08dc80] {
    background: #ef4444;
}

.power-suspended[b-s2rp08dc80] {
    background: #eab308;
}

.power-unknown[b-s2rp08dc80] {
    background: #6b7280;
}

.vm-name[b-s2rp08dc80] {
    font-weight: 500;
}

.vm-offline[b-s2rp08dc80] {
    opacity: 0.6;
}

.vm-disconnected td[b-s2rp08dc80] {
    background: rgba(239, 68, 68, 0.05);
}

/* Health Badge Styles */
.health-badge[b-s2rp08dc80] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s;
}

.health-badge:hover[b-s2rp08dc80] {
    transform: scale(1.05);
}

.health-good[b-s2rp08dc80] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.health-warning[b-s2rp08dc80] {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.health-critical[b-s2rp08dc80] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.health-stat[b-s2rp08dc80] {
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.2rem;
}

/* Bot Specific Styles */
.bot-name[b-s2rp08dc80] {
    font-weight: 500;
}

.ticket-count[b-s2rp08dc80] {
    font-family: monospace;
    font-weight: 500;
}

.bot-offline[b-s2rp08dc80] {
    opacity: 0.6;
}

.status-badge[b-s2rp08dc80] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-available[b-s2rp08dc80] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.status-trading[b-s2rp08dc80] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.status-busy[b-s2rp08dc80] {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.status-offline[b-s2rp08dc80] {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.last-trade[b-s2rp08dc80] {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.8rem;
}

/* Action Buttons */
.action-buttons[b-s2rp08dc80] {
    display: flex;
    gap: 0.3rem;
}

.btn-icon[b-s2rp08dc80] {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Health Stats Panel */
.health-stats-panel[b-s2rp08dc80] {
    background: var(--card-background, #242830);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}

.time-range-selector[b-s2rp08dc80] {
    display: flex;
    gap: 0.3rem;
}

.time-range-selector .btn[b-s2rp08dc80] {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
}

.entity-type-icon[b-s2rp08dc80] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-right: 0.5rem;
    font-size: 0.75rem;
}

.vm-icon[b-s2rp08dc80] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.bot-icon[b-s2rp08dc80] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.stat-value[b-s2rp08dc80] {
    font-family: monospace;
    font-weight: 500;
}

.stat-value.has-issues[b-s2rp08dc80] {
    color: #ef4444;
}

.last-issue[b-s2rp08dc80] {
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
    max-width: 200px;
    display: inline-block;
}

.no-data-message[b-s2rp08dc80] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-secondary, #94a3b8);
}

/* Health Details Modal */
.health-detail-stats[b-s2rp08dc80] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-row[b-s2rp08dc80] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stat-label[b-s2rp08dc80] {
    color: var(--text-secondary, #94a3b8);
}

.stat-row .stat-value[b-s2rp08dc80] {
    font-weight: 600;
}

.recent-events-list[b-s2rp08dc80] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-events-list li[b-s2rp08dc80] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 0.85rem;
}

.event-time[b-s2rp08dc80] {
    color: var(--text-secondary, #94a3b8);
    white-space: nowrap;
}

.event-reason[b-s2rp08dc80] {
    flex: 1;
}

.event-action[b-s2rp08dc80] {
    color: #3b82f6;
    font-weight: 500;
}

/* Scrollbar styling */
.panel-body[b-s2rp08dc80]::-webkit-scrollbar {
    width: 6px;
}

.panel-body[b-s2rp08dc80]::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}

.panel-body[b-s2rp08dc80]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

.panel-body[b-s2rp08dc80]::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}
/* /Components/Pages/CreditLog/CreditLog.razor.rz.scp.css */
/* Dark Mode Credit Log Styles - Compact Modern Design */

/* ==============================================
   BOOTSTRAP TABLE OVERRIDES FOR DARK MODE
   ============================================== */

/* Force dark mode on all table elements */
[b-k26ypauu37] .table,
[b-k26ypauu37] .table.table-hover,
[b-k26ypauu37] .credit-log-table {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
}

[b-k26ypauu37] .table thead,
[b-k26ypauu37] .credit-log-table thead {
    background: var(--bg-tertiary) !important;
}

[b-k26ypauu37] .table thead th,
[b-k26ypauu37] .credit-log-table th {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.5rem 0.75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: none !important;
    white-space: nowrap !important;
    text-align: left;
}

[b-k26ypauu37] .table thead th:hover,
[b-k26ypauu37] .credit-log-table th:hover {
    background: var(--bg-secondary) !important;
    color: var(--accent-cyan) !important;
    cursor: pointer;
}

[b-k26ypauu37] .table tbody,
[b-k26ypauu37] .credit-log-table tbody {
    background: var(--bg-card) !important;
}

[b-k26ypauu37] .table tbody tr,
[b-k26ypauu37] .credit-log-table tbody tr {
    background: var(--bg-card) !important;
    transition: background 0.15s ease !important;
}

[b-k26ypauu37] .table tbody tr:nth-child(even),
[b-k26ypauu37] .credit-log-table tbody tr:nth-child(even) {
    background: var(--bg-secondary) !important;
}

[b-k26ypauu37] .table tbody tr:hover,
[b-k26ypauu37] .table-hover tbody tr:hover,
[b-k26ypauu37] .credit-log-table tbody tr:hover {
    background: var(--bg-tertiary) !important;
}

[b-k26ypauu37] .table tbody td,
[b-k26ypauu37] .credit-log-table td {
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    vertical-align: middle !important;
}

[b-k26ypauu37] .table tbody tr:last-child td,
[b-k26ypauu37] .credit-log-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Empty State Styling */
.empty-state[b-k26ypauu37] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-muted);
}

.empty-state i[b-k26ypauu37] {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: var(--text-muted);
}

.empty-state p[b-k26ypauu37] {
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* Card Styling - Dark Mode */
.dashboard-card[b-k26ypauu37] {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.dashboard-card .card-header[b-k26ypauu37] {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
}

.dashboard-card .card-header h5[b-k26ypauu37] {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.dashboard-card .card-header h5 i[b-k26ypauu37] {
    color: var(--accent-cyan);
    margin-right: 0.5rem;
}

.dashboard-card .card-body[b-k26ypauu37] {
    padding: 1rem;
    background: var(--bg-card);
}

/* Search and Filter Container - Dark Compact */
.mobile-search-container[b-k26ypauu37] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mobile-search-container .input-group[b-k26ypauu37] {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.mobile-search-container .form-control[b-k26ypauu37] {
    background: transparent !important;
    border: none;
    color: #ffffff !important;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
}

.mobile-search-container .form-control[b-k26ypauu37]::placeholder {
    color: var(--text-muted) !important;
}

.mobile-search-container .form-control:focus[b-k26ypauu37] {
    background: transparent !important;
    box-shadow: none;
    outline: none;
    color: #ffffff !important;
}

.mobile-search-container .input-group:focus-within[b-k26ypauu37] {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
}

.mobile-search-container .btn-primary[b-k26ypauu37] {
    background: var(--primary-blue);
    border: none;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

.mobile-search-container .btn-primary:hover[b-k26ypauu37] {
    background: var(--primary-light);
}

.mobile-search-container .text-muted[b-k26ypauu37] {
    color: var(--text-muted) !important;
    font-size: 0.7rem;
}

/* Filter Buttons - Dark Compact */
.mobile-filter-buttons[b-k26ypauu37] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.mobile-filter-buttons .btn-check + .btn[b-k26ypauu37] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.7rem;
    padding: 0.4rem 0.75rem;
    font-weight: 500;
    transition: all 0.15s ease;
    border-radius: var(--radius-sm);
}

.mobile-filter-buttons .btn-check + .btn:hover[b-k26ypauu37] {
    background: var(--bg-secondary);
    border-color: var(--primary-blue);
    color: var(--text-primary);
}

.mobile-filter-buttons .btn-check:checked + .btn-outline-primary[b-k26ypauu37] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
}

.mobile-filter-buttons .btn-check:checked + .btn-outline-secondary[b-k26ypauu37] {
    background: var(--gray-500);
    border-color: var(--gray-500);
    color: var(--white);
}

/* Credit Amount Colors */
.text-success[b-k26ypauu37] {
    color: var(--success) !important;
}

.text-danger[b-k26ypauu37] {
    color: var(--danger) !important;
}

/* Table Responsive Wrapper - Force Dark Mode */
[b-k26ypauu37] .table-responsive,
[b-k26ypauu37] .table-responsive-mobile,
.table-responsive-mobile[b-k26ypauu37] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
}

/* Mobile Table Optimizations */
@media (max-width: 992px) {
    [b-k26ypauu37] .table th,
    [b-k26ypauu37] .table td,
    .credit-log-table th[b-k26ypauu37],
    .credit-log-table td[b-k26ypauu37] {
        white-space: nowrap !important;
        min-width: 100px;
    }
    
    [b-k26ypauu37] .table th:first-child,
    [b-k26ypauu37] .table td:first-child,
    .credit-log-table th:first-child[b-k26ypauu37],
    .credit-log-table td:first-child[b-k26ypauu37] {
        position: sticky;
        left: 0;
        background: var(--bg-card) !important;
        z-index: 10;
        border-right: 1px solid var(--border-color) !important;
    }
    
    [b-k26ypauu37] .table tbody tr:nth-child(even) td:first-child {
        background: var(--bg-secondary) !important;
    }
    
    [b-k26ypauu37] .table thead th:first-child,
    .credit-log-table thead th:first-child[b-k26ypauu37] {
        z-index: 11;
        background: var(--bg-tertiary) !important;
    }
}

/* Pagination - Dark Compact */
.pagination[b-k26ypauu37] {
    margin: 0;
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination .page-item .page-link[b-k26ypauu37] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.35rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.pagination .page-item .page-link:hover[b-k26ypauu37] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
}

.pagination .page-item.active .page-link[b-k26ypauu37] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
}

.pagination .page-item.disabled .page-link[b-k26ypauu37] {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
}

.pagination-info small[b-k26ypauu37] {
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .d-flex.justify-content-between[b-k26ypauu37] {
        flex-direction: column;
        gap: 0.75rem;
    }

    [b-k26ypauu37] .table .d-tablet-none,
    .credit-log-table .d-tablet-none[b-k26ypauu37] {
        display: none !important;
    }

    .mobile-search-container .input-group[b-k26ypauu37] {
        flex-direction: column;
    }

    .mobile-search-container .input-group .btn[b-k26ypauu37] {
        width: 100%;
        margin-top: 0.5rem;
        border-radius: var(--radius-sm);
    }

    .mobile-filter-buttons[b-k26ypauu37] {
        flex-direction: column;
    }

    .mobile-filter-buttons .btn-check + .btn[b-k26ypauu37] {
        min-width: 100%;
    }

    .dashboard-card .card-header[b-k26ypauu37] {
        text-align: center;
    }

    .dashboard-card .card-body[b-k26ypauu37] {
        padding: 0.75rem;
    }
}

/* Mobile Layout */
@media (max-width: 576px) {
    [b-k26ypauu37] .table .d-mobile-none,
    .credit-log-table .d-mobile-none[b-k26ypauu37] {
        display: none !important;
    }

    [b-k26ypauu37] .table,
    .credit-log-table[b-k26ypauu37] {
        font-size: 0.7rem !important;
    }

    [b-k26ypauu37] .table th,
    [b-k26ypauu37] .table td,
    .credit-log-table th[b-k26ypauu37],
    .credit-log-table td[b-k26ypauu37] {
        padding: 0.35rem 0.5rem !important;
        min-width: 80px;
    }

    .dashboard-card .card-body[b-k26ypauu37] {
        padding: 0.5rem;
    }

    .dashboard-card .card-header[b-k26ypauu37] {
        padding: 0.5rem 0.75rem;
    }
}

/* View Trade Button - Compact Dark */
.btn-outline-primary[b-k26ypauu37] {
    background: transparent;
    border: 1px solid var(--primary-blue);
    color: var(--primary-light);
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.btn-outline-primary:hover[b-k26ypauu37] {
    background: var(--primary-blue);
    color: var(--white);
}

/* Sort Icons */
.credit-log-table th i[b-k26ypauu37] {
    margin-left: 0.25rem;
    font-size: 0.6rem;
    opacity: 0.7;
}

/* Mobile column visibility classes */
.d-tablet-none[b-k26ypauu37] {
    display: table-cell;
}

.d-mobile-none[b-k26ypauu37] {
    display: table-cell;
}

@media (max-width: 768px) {
    .d-tablet-none[b-k26ypauu37] {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .d-mobile-none[b-k26ypauu37] {
        display: none !important;
    }
}

/* Container override for dark mode */
.container-fluid[b-k26ypauu37] {
    background: var(--bg-primary);
    min-height: 100vh;
}
/* /Components/Pages/Diagnostics/TradeDiagnostics.razor.rz.scp.css */
/* Trade Diagnostics — page-scoped styles. Prefix `td-` per the codebase convention (cf-, rrb-). */

.td-subtitle[b-lmzu94i6bv] {
    color: var(--text-secondary);
    margin: -0.25rem 0 1.5rem;
}

.td-section[b-lmzu94i6bv] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem 1.5rem;
    margin-bottom: 1.5rem;
}

.td-section-head[b-lmzu94i6bv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.td-section-head h2[b-lmzu94i6bv] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.td-section-head h3[b-lmzu94i6bv] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.td-h3[b-lmzu94i6bv] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.td-muted[b-lmzu94i6bv] {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.td-caption[b-lmzu94i6bv] {
    margin-top: 0.75rem;
    margin-bottom: 0;
    line-height: 1.5;
}

.td-note[b-lmzu94i6bv] {
    background: rgba(96, 165, 250, 0.08);
    border-left: 3px solid #60a5fa;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* ---------- Live strip ---------- */

.td-live-grid[b-lmzu94i6bv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.td-live-tile[b-lmzu94i6bv] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
}

/* A fleet with zero free bots is the thing worth noticing at a glance. */
.td-live-tile.saturated[b-lmzu94i6bv] {
    border-color: var(--danger);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25);
}

.td-live-name[b-lmzu94i6bv] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.td-live-bar[b-lmzu94i6bv] {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-tertiary);
    margin-bottom: 0.5rem;
}

.td-live-bar .seg[b-lmzu94i6bv] {
    display: block;
    height: 100%;
}

.td-live-bar .seg.busy[b-lmzu94i6bv] { background: #10b981; }
.td-live-bar .seg.free[b-lmzu94i6bv] { background: #374151; }
.td-live-bar .seg.blocked[b-lmzu94i6bv] { background: #f59e0b; }

.td-live-counts[b-lmzu94i6bv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.td-live-counts .busy[b-lmzu94i6bv] { color: #10b981; }
.td-live-counts .free[b-lmzu94i6bv] { color: var(--text-secondary); }
.td-live-counts .blocked[b-lmzu94i6bv] { color: #f59e0b; }
.td-live-counts .offline[b-lmzu94i6bv] { color: var(--text-muted); }

.td-queue-strip[b-lmzu94i6bv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.td-queue[b-lmzu94i6bv] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.td-queue.has-items[b-lmzu94i6bv] {
    border-color: var(--accent-orange);
    color: var(--text-primary);
}

.td-queue-depth[b-lmzu94i6bv] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.td-queue-age[b-lmzu94i6bv] {
    color: var(--text-muted);
    font-size: 0.72rem;
}

/* ---------- Range filter ---------- */

.td-filter[b-lmzu94i6bv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.td-toggle[b-lmzu94i6bv] {
    display: flex;
    gap: 0.35rem;
}

/* ---------- Donut grid ---------- */

.td-donut-grid[b-lmzu94i6bv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.td-donut-card[b-lmzu94i6bv] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.td-donut-card:hover[b-lmzu94i6bv] {
    border-color: var(--primary-blue);
    transform: translateY(-2px);
}

.td-donut-card.selected[b-lmzu94i6bv] {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 1px var(--primary-blue);
}

.td-donut-head[b-lmzu94i6bv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.td-donut-title[b-lmzu94i6bv] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.td-donut-sub[b-lmzu94i6bv] {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.td-donut-legend[b-lmzu94i6bv] {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.td-legend-row[b-lmzu94i6bv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.td-legend-row .dot[b-lmzu94i6bv] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.td-legend-row .label[b-lmzu94i6bv] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-legend-row .pct[b-lmzu94i6bv] {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 600;
}

.td-legend-row.more[b-lmzu94i6bv] {
    color: var(--text-muted);
    padding-left: 1.05rem;
}

/* ---------- Drill-down ---------- */

.td-drilldown[b-lmzu94i6bv] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.td-drill-stats[b-lmzu94i6bv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.td-stat[b-lmzu94i6bv] {
    display: flex;
    flex-direction: column;
    font-size: 0.72rem;
}

.td-stat .k[b-lmzu94i6bv] {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.td-stat .v[b-lmzu94i6bv] {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

.td-stat .v.warn[b-lmzu94i6bv],
.td-kpi .v.warn[b-lmzu94i6bv] {
    color: var(--warning);
}

/* ---------- KPIs ---------- */

.td-kpi-row[b-lmzu94i6bv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.td-kpi[b-lmzu94i6bv] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.td-kpi .k[b-lmzu94i6bv] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.td-kpi .v[b-lmzu94i6bv] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.td-kpi-sub[b-lmzu94i6bv] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
}

.td-kpi-sub .k[b-lmzu94i6bv] {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.td-kpi-sub .v[b-lmzu94i6bv] {
    color: var(--text-primary);
}

.td-delta[b-lmzu94i6bv] {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.85;
    margin-left: 0.2rem;
}

/* ---------- Tables ---------- */

.td-table[b-lmzu94i6bv] {
    font-size: 0.82rem;
    margin-bottom: 0;
}

.td-table th[b-lmzu94i6bv] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.td-table td[b-lmzu94i6bv] {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.td-table td:first-child[b-lmzu94i6bv] {
    color: var(--text-primary);
    font-weight: 500;
}

.td-table .num[b-lmzu94i6bv] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.td-two-col[b-lmzu94i6bv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.td-check[b-lmzu94i6bv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
/* /Components/Pages/Inventory/Inventory.razor.rz.scp.css */
/* Dark Mode Inventory Page - Compact Modern Design */

/* Main Container */
.modern-search-container[b-v60ex66vvy] {
    min-height: 100vh;
    background: var(--bg-primary);
    padding: 1rem;
}

.search-content[b-v60ex66vvy] {
    max-width: 1400px;
    margin: 0 auto;
}

/* ==============================================
   BOOTSTRAP OVERRIDES FOR DARK MODE
   ============================================== */

/* Card overrides */
[b-v60ex66vvy] .card,
[b-v60ex66vvy] .card.dashboard-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
}

[b-v60ex66vvy] .card-header {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 0.75rem 1rem !important;
}

[b-v60ex66vvy] .card-header h5,
[b-v60ex66vvy] .card-header .h5 {
    color: var(--text-primary) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

[b-v60ex66vvy] .card-body {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    padding: 0.75rem !important;
}

/* Table overrides - CRITICAL for dark mode */
[b-v60ex66vvy] .table {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
}

[b-v60ex66vvy] .table thead {
    background: var(--bg-tertiary) !important;
}

[b-v60ex66vvy] .table thead th {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.5rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    border-top: none !important;
    white-space: nowrap !important;
}

[b-v60ex66vvy] .table thead th:last-child {
    border-right: none !important;
}

[b-v60ex66vvy] .table tbody tr {
    background: var(--bg-card) !important;
    transition: background 0.15s ease !important;
}

[b-v60ex66vvy] .table tbody tr:nth-child(even) {
    background: var(--bg-secondary) !important;
}

[b-v60ex66vvy] .table tbody tr:hover,
[b-v60ex66vvy] .table-hover tbody tr:hover {
    background: var(--bg-tertiary) !important;
}

[b-v60ex66vvy] .table tbody td {
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    vertical-align: middle !important;
}

[b-v60ex66vvy] .table tbody td:last-child {
    border-right: none !important;
}

[b-v60ex66vvy] .table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Summary row */
[b-v60ex66vvy] .table-secondary,
[b-v60ex66vvy] .table tbody tr.table-secondary {
    background: var(--bg-tertiary) !important;
    border-top: 2px solid var(--primary-blue) !important;
}

[b-v60ex66vvy] .table-secondary td,
[b-v60ex66vvy] .table tbody tr.table-secondary td {
    background: var(--bg-tertiary) !important;
    color: var(--primary-light) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 0.5rem !important;
}

/* Table light header in modals */
[b-v60ex66vvy] .table-light,
[b-v60ex66vvy] thead.table-light,
[b-v60ex66vvy] thead.table-light th {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Table responsive wrapper */
[b-v60ex66vvy] .table-responsive {
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    border: 1px solid var(--border-color) !important;
}

/* Enhanced Search Section */
.enhanced-search-section[b-v60ex66vvy] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.search-input-wrapper-main[b-v60ex66vvy] {
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    transition: all 0.2s ease;
    padding: 4px;
}

.search-input-wrapper-main:hover[b-v60ex66vvy],
.search-input-wrapper-main:focus-within[b-v60ex66vvy] {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
}

.search-icon[b-v60ex66vvy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary-blue);
    border-radius: 50%;
    color: var(--white);
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-right: 8px;
}

.search-input-wrapper-main[b-v60ex66vvy]  .form-control {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.85rem;
    padding: 8px 0;
    outline: none !important;
    box-shadow: none !important;
}

.search-input-wrapper-main[b-v60ex66vvy]  .form-control::placeholder {
    color: var(--text-muted) !important;
}

/* Prominent Card Section */
.prominent-card-section[b-v60ex66vvy] {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.card-image-showcase[b-v60ex66vvy] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.showcase-card-image[b-v60ex66vvy],
.main-card-image[b-v60ex66vvy] {
    width: 100px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Card image hover is now handled by CardImage.razor component */

.card-info-main[b-v60ex66vvy] {
    text-align: center;
}

.card-title-main[b-v60ex66vvy],
.card-title[b-v60ex66vvy] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

/* Stats Row */
.stats-row[b-v60ex66vvy],
.stats-row-center[b-v60ex66vvy],
.stats-row-header[b-v60ex66vvy] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stat-box[b-v60ex66vvy],
.stat-box-center[b-v60ex66vvy],
.stat-box-header[b-v60ex66vvy] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    text-align: center;
    min-width: 80px;
    transition: all 0.15s ease;
}

.stat-box:hover[b-v60ex66vvy],
.stat-box-center:hover[b-v60ex66vvy],
.stat-box-header:hover[b-v60ex66vvy] {
    background: var(--bg-secondary);
    border-color: var(--primary-blue);
}

.stat-box .stat-value[b-v60ex66vvy],
.stat-box-center .stat-value[b-v60ex66vvy],
.stat-box-header .stat-value[b-v60ex66vvy] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-light);
    display: block;
    line-height: 1.2;
}

.stat-box .stat-label[b-v60ex66vvy],
.stat-box-center .stat-label[b-v60ex66vvy],
.stat-box-header .stat-label[b-v60ex66vvy] {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Summary Stats Grid */
.summary-stats[b-v60ex66vvy],
.stats-summary[b-v60ex66vvy] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.stat-item[b-v60ex66vvy] {
    background: var(--bg-tertiary);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    text-align: center;
    border: 1px solid var(--border-color);
}

.stat-item .stat-value[b-v60ex66vvy] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-light);
    display: block;
    margin-bottom: 0.1rem;
}

.stat-item .stat-label[b-v60ex66vvy] {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Action Buttons */
.action-buttons-main[b-v60ex66vvy],
.action-buttons-header[b-v60ex66vvy],
.header-actions-section[b-v60ex66vvy] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
}

.btn-modern[b-v60ex66vvy],
.btn-uniform[b-v60ex66vvy] {
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.7rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: all 0.15s ease;
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    min-height: 32px;
}

.btn-modern:hover[b-v60ex66vvy],
.btn-uniform:hover[b-v60ex66vvy] {
    transform: translateY(-1px);
}

.btn-modern.btn-primary[b-v60ex66vvy],
.btn-uniform.btn-primary[b-v60ex66vvy] {
    background: var(--primary-blue);
    color: var(--white);
}

.btn-modern.btn-primary:hover[b-v60ex66vvy],
.btn-uniform.btn-primary:hover[b-v60ex66vvy] {
    background: var(--primary-light);
}

.btn-modern.btn-danger[b-v60ex66vvy],
.btn-uniform.btn-danger[b-v60ex66vvy] {
    background: var(--danger);
    color: var(--white);
}

.btn-modern.btn-danger:hover[b-v60ex66vvy],
.btn-uniform.btn-danger:hover[b-v60ex66vvy] {
    background: var(--danger-dark);
}

.btn-modern.btn-success[b-v60ex66vvy],
.btn-uniform.btn-success[b-v60ex66vvy] {
    background: var(--success);
    color: var(--white);
}

.btn-modern.btn-success:hover[b-v60ex66vvy],
.btn-uniform.btn-success:hover[b-v60ex66vvy] {
    background: var(--success-dark);
}

.btn-modern.btn-outline[b-v60ex66vvy],
.btn-uniform.btn-outline[b-v60ex66vvy] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-modern.btn-outline:hover[b-v60ex66vvy],
.btn-uniform.btn-outline:hover[b-v60ex66vvy] {
    background: var(--bg-tertiary);
    border-color: var(--primary-blue);
    color: var(--primary-light);
}

.btn-modern.btn-info[b-v60ex66vvy] {
    background: var(--info);
    color: var(--white);
}

.btn-modern.btn-goatbots[b-v60ex66vvy] {
    background: var(--accent-orange);
    border: 1px solid var(--accent-orange);
    color: var(--white);
}

.btn-modern.btn-goatbots:hover[b-v60ex66vvy] {
    background: var(--accent-orange-light);
}

/* Tables - Dark Mode Compact */
.ultra-modern-table[b-v60ex66vvy],
.pricing-table[b-v60ex66vvy] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.ultra-modern-table thead th[b-v60ex66vvy],
.pricing-table thead th[b-v60ex66vvy] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    padding: 0.5rem;
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.ultra-modern-table thead th:first-child[b-v60ex66vvy],
.pricing-table thead th:first-child[b-v60ex66vvy] {
    text-align: left;
}

.ultra-modern-table thead th:last-child[b-v60ex66vvy],
.pricing-table thead th:last-child[b-v60ex66vvy] {
    border-right: none;
}

.ultra-modern-table tbody tr[b-v60ex66vvy],
.pricing-table tbody tr[b-v60ex66vvy] {
    background: var(--bg-card);
    transition: all 0.15s ease;
}

.ultra-modern-table tbody tr:nth-child(even)[b-v60ex66vvy],
.pricing-table tbody tr:nth-child(even)[b-v60ex66vvy] {
    background: var(--bg-secondary);
}

.ultra-modern-table tbody tr:hover[b-v60ex66vvy],
.pricing-table tbody tr:hover[b-v60ex66vvy] {
    background: var(--bg-tertiary);
}

.ultra-modern-table tbody td[b-v60ex66vvy],
.pricing-table tbody td[b-v60ex66vvy] {
    padding: 0.5rem;
    color: var(--text-primary);
    font-size: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    text-align: center;
}

.ultra-modern-table tbody td:first-child[b-v60ex66vvy],
.pricing-table tbody td:first-child[b-v60ex66vvy] {
    text-align: left;
}

.ultra-modern-table tbody td:last-child[b-v60ex66vvy],
.pricing-table tbody td:last-child[b-v60ex66vvy] {
    border-right: none;
}

.ultra-modern-table tbody tr:last-child td[b-v60ex66vvy],
.pricing-table tbody tr:last-child td[b-v60ex66vvy] {
    border-bottom: none;
}

/* Bot Name */
.bot-name[b-v60ex66vvy] {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bot-status[b-v60ex66vvy] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
}

/* Metric Values */
.metric-value[b-v60ex66vvy] {
    font-weight: 600;
}

.metric-positive[b-v60ex66vvy] {
    color: var(--success);
}

.metric-neutral[b-v60ex66vvy] {
    color: var(--text-muted);
}

.metric-negative[b-v60ex66vvy] {
    color: var(--danger);
}

/* Summary Row */
.summary-row[b-v60ex66vvy] {
    background: var(--bg-tertiary) !important;
    font-weight: 700;
    border-top: 2px solid var(--primary-blue) !important;
}

.summary-row td[b-v60ex66vvy] {
    color: var(--primary-light);
    font-size: 0.8rem;
    padding: 0.75rem !important;
}

/* Card Containers */
.ultra-modern-card[b-v60ex66vvy] {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
}

.card-title-section[b-v60ex66vvy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.section-title[b-v60ex66vvy] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-icon[b-v60ex66vvy] {
    width: 16px;
    height: 16px;
    color: var(--accent-cyan);
}

/* Data Grid */
.data-grid[b-v60ex66vvy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 1024px) {
    .data-grid[b-v60ex66vvy] {
        grid-template-columns: 1fr;
    }
}

/* Empty State */
.empty-state[b-v60ex66vvy] {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.empty-state-icon[b-v60ex66vvy] {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    color: var(--text-muted);
}

.empty-state h3[b-v60ex66vvy] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
}

.empty-state p[b-v60ex66vvy] {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.8rem;
}

/* Price Display Column */
.price-display-column[b-v60ex66vvy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.our-price[b-v60ex66vvy] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.goat-price[b-v60ex66vvy] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.2;
}

/* Set Column */
.set-column[b-v60ex66vvy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.set-name[b-v60ex66vvy] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.75rem;
}

.last-updated-time[b-v60ex66vvy] {
    font-size: 0.65rem;
    font-style: italic;
    font-weight: 500;
}

/* Timestamp colors */
.timestamp-fresh[b-v60ex66vvy] { color: var(--success); }
.timestamp-recent[b-v60ex66vvy] { color: var(--warning); }
.timestamp-stale[b-v60ex66vvy] { color: var(--danger); }
.timestamp-unknown[b-v60ex66vvy] { color: var(--text-muted); }

/* Price competitive */
.price-competitive[b-v60ex66vvy] { color: var(--success); }
.price-uncompetitive[b-v60ex66vvy] { color: var(--danger); }
.price-neutral[b-v60ex66vvy] { color: var(--text-primary); }

/* Expandable Content */
.expandable-content[b-v60ex66vvy] {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-left: 3px solid var(--primary-blue);
}

.expandable-content p[b-v60ex66vvy] {
    margin: 0.25rem 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.last-updated[b-v60ex66vvy] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.card-detail[b-v60ex66vvy] {
    background: var(--bg-secondary);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    margin: 2px 0;
    border: 1px solid var(--border-color);
}

/* Modal */
.modal-overlay[b-v60ex66vvy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-v60ex66vvy] {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.modal-header[b-v60ex66vvy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.modal-title[b-v60ex66vvy] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close[b-v60ex66vvy] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.15s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover[b-v60ex66vvy] {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--white);
}

.modal-body[b-v60ex66vvy] {
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer[b-v60ex66vvy] {
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

/* Force Buy List */
.force-buy-list[b-v60ex66vvy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.force-buy-item[b-v60ex66vvy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary-blue);
    border: 1px solid var(--border-color);
}

.force-buy-item:hover[b-v60ex66vvy] {
    background: var(--bg-secondary);
}

.card-info[b-v60ex66vvy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.card-name[b-v60ex66vvy] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.card-link[b-v60ex66vvy] {
    color: var(--primary-light);
    text-decoration: none;
    padding: 0.25rem;
    border-radius: 4px;
}

.card-link:hover[b-v60ex66vvy] {
    background: var(--bg-tertiary);
    color: var(--accent-cyan);
}

.btn-remove[b-v60ex66vvy] {
    background: var(--danger);
    border: none;
    color: var(--white);
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.7rem;
    cursor: pointer;
}

.btn-remove:hover[b-v60ex66vvy] {
    background: var(--danger-dark);
}

.empty-force-buy[b-v60ex66vvy] {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.empty-icon[b-v60ex66vvy] {
    margin: 0 auto 1rem;
    color: var(--text-muted);
}

.empty-force-buy h4[b-v60ex66vvy] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.empty-force-buy p[b-v60ex66vvy] {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Inventory Tabs */
.inventory-tabs-container[b-v60ex66vvy] {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
}

.inventory-tabs-container .nav-tabs[b-v60ex66vvy] {
    border-bottom: none;
    display: flex;
    gap: 2px;
}

.inventory-tabs-container .nav-link[b-v60ex66vvy] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-bottom: none;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: all 0.15s ease;
}

.inventory-tabs-container .nav-link:hover[b-v60ex66vvy] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.inventory-tabs-container .nav-link.active[b-v60ex66vvy] {
    background: var(--bg-card);
    border-color: var(--primary-blue);
    color: var(--primary-light);
    font-weight: 700;
}

/* Card Header Override */
.card-header[b-v60ex66vvy] {
    background: var(--bg-tertiary) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden !important;
    text-align: left !important;
}

/* New Header Layout */
.new-header-layout[b-v60ex66vvy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.header-card-section[b-v60ex66vvy] {
    flex-shrink: 0;
}

.header-center-section[b-v60ex66vvy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.header-actions-section[b-v60ex66vvy] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 140px;
    max-width: 160px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .new-header-layout[b-v60ex66vvy] {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    
    .header-actions-section[b-v60ex66vvy] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        min-width: auto;
        max-width: none;
    }
    
    .stats-row-center[b-v60ex66vvy] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

@media (max-width: 768px) {
    .modern-search-container[b-v60ex66vvy] {
        padding: 0.5rem;
    }
    
    .prominent-card-section[b-v60ex66vvy] {
        padding: 0.5rem;
    }
    
    .card-title-main[b-v60ex66vvy],
    .card-title[b-v60ex66vvy] {
        font-size: 1rem;
    }
    
    .showcase-card-image[b-v60ex66vvy],
    .main-card-image[b-v60ex66vvy] {
        width: 70px;
    }
    
    .summary-stats[b-v60ex66vvy],
    .stats-summary[b-v60ex66vvy] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ultra-modern-table thead th[b-v60ex66vvy],
    .ultra-modern-table tbody td[b-v60ex66vvy],
    .pricing-table thead th[b-v60ex66vvy],
    .pricing-table tbody td[b-v60ex66vvy] {
        padding: 0.35rem;
        font-size: 0.65rem;
    }
    
    .btn-modern[b-v60ex66vvy],
    .btn-uniform[b-v60ex66vvy] {
        font-size: 0.65rem;
        padding: 0.35rem 0.5rem;
        min-height: 28px;
    }
    
    .inventory-tabs-container .nav-link[b-v60ex66vvy] {
        font-size: 0.65rem;
        padding: 0.4rem 0.6rem;
    }
}

@media (max-width: 480px) {
    .card-title-main[b-v60ex66vvy],
    .card-title[b-v60ex66vvy] {
        font-size: 0.9rem;
    }
    
    .showcase-card-image[b-v60ex66vvy],
    .main-card-image[b-v60ex66vvy] {
        width: 60px;
    }
    
    .stats-row-center[b-v60ex66vvy] {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        gap: 0.4rem;
    }
    
    .stat-box-center[b-v60ex66vvy] {
        min-width: auto;
        padding: 0.3rem 0.5rem;
    }
    
    .header-actions-section[b-v60ex66vvy] {
        width: 100%;
    }
    
    .header-actions-section .btn-modern[b-v60ex66vvy] {
        width: 100%;
    }
}

/* Table Responsive */
.table-responsive[b-v60ex66vvy] {
    border-radius: var(--radius-md);
    overflow-x: auto;
}

/* Search Card Image Legacy */
.search-card-image[b-v60ex66vvy] {
    width: 50px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Card image hover is now handled by CardImage.razor component */

/* Dashboard Card Override */
.dashboard-card[b-v60ex66vvy] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.dashboard-card .card-body[b-v60ex66vvy] {
    padding: 0.75rem;
    background: var(--bg-card);
}

/* Clickable Stat Wrapper */
.clickable-stat-wrapper[b-v60ex66vvy] {
    display: flex;
    justify-content: center;
}

.stat-box-clickable[b-v60ex66vvy] {
    cursor: pointer;
}

.stat-box-clickable:hover[b-v60ex66vvy] {
    background: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
}

.stat-box-clickable:hover .stat-value[b-v60ex66vvy] {
    color: var(--white) !important;
}

.stat-box-clickable:hover .stat-label[b-v60ex66vvy] {
    color: rgba(255, 255, 255, 0.9) !important;
}

.stat-icon[b-v60ex66vvy] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ==============================================
   STAT BOX COLOR MODIFIERS - DARK MODE
   ============================================== */

/* Success state - green tint */
.stat-success[b-v60ex66vvy],
.stat-box-center.stat-success[b-v60ex66vvy],
.stat-item.stat-success[b-v60ex66vvy] {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}

.stat-success .stat-value[b-v60ex66vvy] {
    color: #4ade80 !important;
}

/* Warning state - amber tint */
.stat-warning[b-v60ex66vvy],
.stat-box-center.stat-warning[b-v60ex66vvy],
.stat-item.stat-warning[b-v60ex66vvy] {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

.stat-warning .stat-value[b-v60ex66vvy] {
    color: #fbbf24 !important;
}

/* Danger state - red tint */
.stat-danger[b-v60ex66vvy],
.stat-box-center.stat-danger[b-v60ex66vvy],
.stat-item.stat-danger[b-v60ex66vvy] {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

.stat-danger .stat-value[b-v60ex66vvy] {
    color: #f87171 !important;
}

/* Clickable stat box */
.stat-clickable[b-v60ex66vvy],
.stat-box-center.stat-clickable[b-v60ex66vvy] {
    cursor: pointer;
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.stat-clickable:hover[b-v60ex66vvy],
.stat-box-center.stat-clickable:hover[b-v60ex66vvy] {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: var(--primary-blue) !important;
    transform: translateY(-1px);
}

/* Button secondary and warning overrides */
.btn-modern.btn-secondary[b-v60ex66vvy] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-modern.btn-secondary:hover[b-v60ex66vvy] {
    background: var(--bg-secondary);
    border-color: var(--text-muted);
}

.btn-modern.btn-warning[b-v60ex66vvy] {
    background: #f59e0b;
    color: #000;
}

.btn-modern.btn-warning:hover[b-v60ex66vvy] {
    background: #d97706;
}

/* Modal body dark mode overrides */
[b-v60ex66vvy] .modal-body .btn,
[b-v60ex66vvy] .modal-body .btn-primary,
[b-v60ex66vvy] .modal-body .btn-outline-primary {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[b-v60ex66vvy] .modal-body .btn-primary,
[b-v60ex66vvy] .modal-body .btn-primary:not(.btn-outline-primary) {
    background: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
    color: white !important;
}

[b-v60ex66vvy] .modal-body .btn-success {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: white !important;
}

[b-v60ex66vvy] .modal-body .btn-danger {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: white !important;
}

[b-v60ex66vvy] .modal-body .list-group-item {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[b-v60ex66vvy] .modal-body .list-group-item:hover {
    background: var(--bg-secondary) !important;
}

/* Text colors for modal */
[b-v60ex66vvy] .modal-body .text-muted {
    color: var(--text-muted) !important;
}

[b-v60ex66vvy] .modal-body h5,
[b-v60ex66vvy] .modal-body h6 {
    color: var(--text-primary) !important;
}

[b-v60ex66vvy] .modal-body p {
    color: var(--text-secondary) !important;
}
/* /Components/Pages/Monitoring/StatusGrid.razor.rz.scp.css */
/* Live Monitor — replica of Manatraders' live_monitor.scss (compiled to plain CSS).
   Honeycomb via CSS grid: each hexagon spans 3 columns / 2 rows, alternating items
   shift up one row to interlock. 9 = hexagons-worth of columns per row.
   Source: mtgotickets/app/assets/stylesheets/mana/live_monitor.scss */

.live-monitor-page[b-oarfm4am6a] {
    position: relative;
    min-height: 100vh;
    width: 100%;
    background: #ffffff;
    padding-bottom: 15px;
}

/* Updated + reload, pinned top-right */
.monitor-status-tr[b-oarfm4am6a] {
    position: absolute;
    top: 14px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #999;
    font-size: 0.85rem;
    z-index: 2;
}

.monitor-status-tr .refresh-btn[b-oarfm4am6a] {
    border: 1px solid #ccc;
    background: #f7f7f7;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #555;
}
.monitor-status-tr .refresh-btn:hover[b-oarfm4am6a] { background: #ececec; }

.live-monitor[b-oarfm4am6a] {
    padding: 22px 0 6px;
    align-items: center;
    gap: 12px;
}

.monitor-logo[b-oarfm4am6a] { width: 240px; height: auto; }
.brand-sub[b-oarfm4am6a] { font-size: 1rem; font-weight: 600; letter-spacing: 0.18em; color: #777; }

.monitor-controls[b-oarfm4am6a] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.monitor-controls .legend[b-oarfm4am6a] { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: #444; }
.monitor-controls .dot[b-oarfm4am6a] { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.monitor-controls .dot.ok[b-oarfm4am6a] { background: #28a745; }
.monitor-controls .dot.warning[b-oarfm4am6a] { background: orange; }
.monitor-controls .dot.critical[b-oarfm4am6a] { background: red; }

.monitor-loading[b-oarfm4am6a] { text-align: center; color: #666; padding: 80px 0; font-size: 1.1rem; }

.hex-grid__list[b-oarfm4am6a] {
    --counter: 1;
    position: relative;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(9, 1fr 2fr) 1fr;
    grid-gap: 0.35rem 0.7rem;
}

.hex-grid__item[b-oarfm4am6a] {
    position: relative;
    grid-column: 1 / span 3;
    grid-row: calc(var(--counter) + var(--counter)) / span 2;
    filter: drop-shadow(0 0 7px rgba(68, 68, 68, 0.22));
    height: 0;
    padding-bottom: 90%;
}
/* Columns */
.hex-grid__item:nth-of-type(9n + 1)[b-oarfm4am6a] { grid-column: 1 / span 3; }
.hex-grid__item:nth-of-type(9n + 2)[b-oarfm4am6a] { grid-column: 3 / span 3; grid-row: calc(var(--counter) + var(--counter) - 1) / span 2; }
.hex-grid__item:nth-of-type(9n + 3)[b-oarfm4am6a] { grid-column: 5 / span 3; }
.hex-grid__item:nth-of-type(9n + 4)[b-oarfm4am6a] { grid-column: 7 / span 3; grid-row: calc(var(--counter) + var(--counter) - 1) / span 2; }
.hex-grid__item:nth-of-type(9n + 5)[b-oarfm4am6a] { grid-column: 9 / span 3; }
.hex-grid__item:nth-of-type(9n + 6)[b-oarfm4am6a] { grid-column: 11 / span 3; grid-row: calc(var(--counter) + var(--counter) - 1) / span 2; }
.hex-grid__item:nth-of-type(9n + 7)[b-oarfm4am6a] { grid-column: 13 / span 3; }
.hex-grid__item:nth-of-type(9n + 8)[b-oarfm4am6a] { grid-column: 15 / span 3; grid-row: calc(var(--counter) + var(--counter) - 1) / span 2; }
.hex-grid__item:nth-of-type(9n + 9)[b-oarfm4am6a] { grid-column: 17 / span 3; }

/* Rows */
.hex-grid__item:nth-of-type(n + 10)[b-oarfm4am6a] { --counter: 2; }
.hex-grid__item:nth-of-type(n + 19)[b-oarfm4am6a] { --counter: 3; }
.hex-grid__item:nth-of-type(n + 28)[b-oarfm4am6a] { --counter: 4; }
.hex-grid__item:nth-of-type(n + 37)[b-oarfm4am6a] { --counter: 5; }
.hex-grid__item:nth-of-type(n + 46)[b-oarfm4am6a] { --counter: 6; }
.hex-grid__item:nth-of-type(n + 55)[b-oarfm4am6a] { --counter: 7; }
.hex-grid__item:nth-of-type(n + 64)[b-oarfm4am6a] { --counter: 8; }
.hex-grid__item:nth-of-type(n + 73)[b-oarfm4am6a] { --counter: 9; }
.hex-grid__item:nth-of-type(n + 82)[b-oarfm4am6a] { --counter: 10; }
.hex-grid__item:nth-of-type(n + 91)[b-oarfm4am6a] { --counter: 11; }
.hex-grid__item:nth-of-type(n + 100)[b-oarfm4am6a] { --counter: 12; }
.hex-grid__item:nth-of-type(n + 109)[b-oarfm4am6a] { --counter: 13; }
.hex-grid__item:nth-of-type(n + 118)[b-oarfm4am6a] { --counter: 14; }
.hex-grid__item:nth-of-type(n + 127)[b-oarfm4am6a] { --counter: 15; }
.hex-grid__item:nth-of-type(n + 136)[b-oarfm4am6a] { --counter: 16; }
.hex-grid__item:nth-of-type(n + 145)[b-oarfm4am6a] { --counter: 17; }
.hex-grid__item:nth-of-type(n + 154)[b-oarfm4am6a] { --counter: 18; }
.hex-grid__item:nth-of-type(n + 163)[b-oarfm4am6a] { --counter: 19; }
.hex-grid__item:nth-of-type(n + 172)[b-oarfm4am6a] { --counter: 20; }
.hex-grid__item:nth-of-type(n + 181)[b-oarfm4am6a] { --counter: 21; }

.hex-grid__content[b-oarfm4am6a] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    color: #111111;
    background-color: white;
    clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.4rem 17%;
    text-decoration: none;
    text-align: center;
    transition: transform 0.24s ease-out;
}

.hex-grid__content:hover[b-oarfm4am6a] { transform: scale(1.04); }
.hex-grid__content[b-oarfm4am6a] { cursor: pointer; }

/* Click-through detail modal (mirrors Manatraders' live monitor) */
.monitor-modal-backdrop[b-oarfm4am6a] {
    position: fixed;
    inset: 0;
    background: rgba(40, 60, 30, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8vh;
    z-index: 1000;
}

.monitor-modal[b-oarfm4am6a] {
    background: #ffffff;
    width: min(680px, 92vw);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.monitor-modal__header[b-oarfm4am6a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eee;
}
.monitor-modal__title[b-oarfm4am6a] { margin: 0; font-size: 1.3rem; color: #222; }
.monitor-modal__close[b-oarfm4am6a] {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
}
.monitor-modal__close:hover[b-oarfm4am6a] { color: #333; }

.monitor-modal__body[b-oarfm4am6a] { padding: 20px 22px; color: #333; }
.monitor-modal__value[b-oarfm4am6a] { font-size: 1.05rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.monitor-modal__value .dot[b-oarfm4am6a] { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.monitor-modal__desc[b-oarfm4am6a] { color: #666; margin: 0 0 12px; font-size: 0.9rem; }
.monitor-modal__empty[b-oarfm4am6a] { color: #888; font-style: italic; margin: 0; }
.monitor-modal__list[b-oarfm4am6a] {
    margin: 0;
    padding-left: 18px;
    max-height: 50vh;
    overflow-y: auto;
}
.monitor-modal__list li[b-oarfm4am6a] { padding: 3px 0; font-size: 0.95rem; }

.monitor-modal__footer[b-oarfm4am6a] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 14px 22px;
    border-top: 1px solid #eee;
}
.monitor-modal__link[b-oarfm4am6a] { color: #2a6; text-decoration: none; font-size: 0.9rem; margin-right: auto; }
.monitor-modal__link:hover[b-oarfm4am6a] { text-decoration: underline; }
.monitor-modal__btn[b-oarfm4am6a] {
    border: 1px solid #ccc;
    background: #f7f7f7;
    border-radius: 6px;
    padding: 7px 18px;
    cursor: pointer;
    color: #444;
}
.monitor-modal__btn:hover[b-oarfm4am6a] { background: #ececec; }

.hex-grid__title[b-oarfm4am6a] {
    color: white;
    z-index: 1;
    font-size: 0.72rem;
    line-height: 1.12;
    margin: 0;
    word-break: break-word;
}
/* /Components/Pages/Performance/CardPerformance.razor.rz.scp.css */
/* Dark Mode Card Performance Page - Compact Modern Design */

/* Main container styling */
.performance-container[b-zlb9mwlx1o] {
    height: 100vh;
    background: var(--bg-primary);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Enhanced search component styling */
.enhanced-search-input-wrapper[b-zlb9mwlx1o] {
    flex: 1;
    position: relative;
}

.enhanced-autocomplete[b-zlb9mwlx1o] {
    position: relative;
    width: 100%;
}

.enhanced-autocomplete .form-control[b-zlb9mwlx1o] {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.85rem;
    font-weight: 400;
    padding: 8px 0;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
    height: auto;
}

.enhanced-autocomplete .form-control[b-zlb9mwlx1o]::placeholder {
    color: var(--text-muted) !important;
    font-weight: 400;
}

.enhanced-autocomplete .form-control:focus[b-zlb9mwlx1o] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
}

/* Search and version row */
.search-version-row[b-zlb9mwlx1o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    justify-content: center;
}

/* Search wrapper styling */
.integrated-search-wrapper[b-zlb9mwlx1o] {
    display: flex;
    flex: 1;
    max-width: 400px;
}

.search-input-wrapper-clean[b-zlb9mwlx1o] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    transition: all 0.2s ease;
    padding: 4px;
    height: 36px;
}

.search-input-wrapper-clean:hover[b-zlb9mwlx1o] {
    border-color: var(--primary-blue);
}

.search-input-wrapper-clean:focus-within[b-zlb9mwlx1o] {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
}

.search-icon-clean[b-zlb9mwlx1o] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--primary-blue);
    border-radius: 50%;
    color: white;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-right: 6px;
    transition: all 0.2s ease;
}

.search-input-wrapper-clean:hover .search-icon-clean[b-zlb9mwlx1o] {
    background: var(--primary-light);
}

/* Header layout */
.new-header-layout[b-zlb9mwlx1o] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.header-card-section[b-zlb9mwlx1o] {
    flex-shrink: 0;
}

.card-image-showcase[b-zlb9mwlx1o] {
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-zlb9mwlx1o] .showcase-card-image {
    width: 120px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: none !important;
    transform: none !important;
}

[b-zlb9mwlx1o] .showcase-card-image:hover {
    transform: none !important;
    scale: 1 !important;
}

.header-center-section[b-zlb9mwlx1o] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.card-title-main[b-zlb9mwlx1o] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
    line-height: 1.2;
    text-align: center;
}

/* Stats row styling */
.stats-row-center[b-zlb9mwlx1o] {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}

.stat-box-center[b-zlb9mwlx1o] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.5rem;
    text-align: center;
    min-width: 70px;
    transition: all 0.15s ease;
}

.stat-box-center:hover[b-zlb9mwlx1o] {
    background: var(--bg-secondary);
    border-color: var(--primary-blue);
}

.stat-box-center .stat-value[b-zlb9mwlx1o] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-light);
    display: block;
    line-height: 1.2;
}

.stat-box-center .stat-label[b-zlb9mwlx1o] {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Sell price formula — a dialog opened from the SELL PRICE NOW stat box */
.stat-box-sell-now[b-zlb9mwlx1o] {
    border-color: var(--primary-blue);
    cursor: pointer;
}

.stat-box-sell-now:focus-visible[b-zlb9mwlx1o] {
    outline: 2px solid var(--primary-blue);
    outline-offset: 1px;
}

/* The GoatBots anchor sits next to our quote — same blue as the GB_sell term in the formula. */
.stat-box-gb-sell .stat-value[b-zlb9mwlx1o] {
    color: #60a5fa;
}

.sell-now-hint[b-zlb9mwlx1o] {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-left: 0.15rem;
    vertical-align: super;
}

.sell-formula-modal .modal-body[b-zlb9mwlx1o] {
    text-align: left;
}

.sell-formula-subheader[b-zlb9mwlx1o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.goatbots-link[b-zlb9mwlx1o] {
    margin-left: 0.5rem;
    color: var(--primary-blue);
    text-decoration: none;
    white-space: nowrap;
}

.goatbots-link:hover[b-zlb9mwlx1o] {
    text-decoration: underline;
}

.sell-formula-quote strong[b-zlb9mwlx1o] {
    color: var(--primary-light);
    font-family: var(--bs-font-monospace, monospace);
}

.sell-formula-version[b-zlb9mwlx1o] {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-family: var(--bs-font-monospace, monospace);
}

.sell-formula-line[b-zlb9mwlx1o] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.95rem;
    line-height: 1.8;
}

.sell-formula-numbers[b-zlb9mwlx1o] {
    font-weight: 700;
}

.sell-formula-line .formula-symbol[b-zlb9mwlx1o] {
    color: var(--primary-light);
    font-weight: 700;
}

.sell-formula-line .formula-op[b-zlb9mwlx1o] {
    color: var(--text-muted);
}

.sell-formula-line .formula-term[b-zlb9mwlx1o] {
    border-radius: var(--radius-sm);
    padding: 0 0.3rem;
}

.sell-formula-line .term-gb[b-zlb9mwlx1o] {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

.sell-formula-line .term-p[b-zlb9mwlx1o] {
    background: rgba(167, 139, 250, 0.14);
    color: #a78bfa;
}

.sell-formula-note[b-zlb9mwlx1o] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.p-steps[b-zlb9mwlx1o] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

.p-step[b-zlb9mwlx1o] {
    flex: 1 1 12rem;
    min-width: 12rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.6rem;
}

.p-step-label[b-zlb9mwlx1o] {
    display: block;
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.p-step-value[b-zlb9mwlx1o] {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-light);
    font-family: var(--bs-font-monospace, monospace);
    line-height: 1.4;
}

.p-step-value.value-down[b-zlb9mwlx1o] {
    color: #f87171;
}

.p-step-value.value-up[b-zlb9mwlx1o] {
    color: #34d399;
}

.p-step-detail[b-zlb9mwlx1o] {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.35;
}

/* Version selector inline with search */
.version-selector-inline[b-zlb9mwlx1o] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.version-selector-inline .form-label[b-zlb9mwlx1o] {
    margin-bottom: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Prominent card section */
.prominent-card-section[b-zlb9mwlx1o] {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

/* Chart and Ledger Grid Layout - 50-50 split */
.chart-ledger-grid[b-zlb9mwlx1o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex: 1;
    min-height: 0;
}

.chart-section[b-zlb9mwlx1o] {
    order: 1;
    display: flex;
    flex-direction: column;
}

.ledger-section[b-zlb9mwlx1o] {
    order: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Chart container */
.chart-container[b-zlb9mwlx1o] {
    background: linear-gradient(180deg, var(--bg-card) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    flex: 1;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.chart-container[b-zlb9mwlx1o]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
}

/* Chart wrapper for proper sizing */
.chart-wrapper[b-zlb9mwlx1o] {
    position: relative;
    flex: 1;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-canvas {
    background: transparent !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-tooltip {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px);
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-tooltip-title {
    background: rgba(51, 65, 85, 0.8) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-tooltip-series-group {
    padding: 4px 12px !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-tooltip-text-y-value {
    color: #f1f5f9 !important;
    font-weight: 600 !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-tooltip-text-y-label {
    color: #94a3b8 !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-legend-text {
    color: #cbd5e1 !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-legend-marker {
    border-radius: 50% !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-gridlines-horizontal line {
    stroke: #334155 !important;
    stroke-dasharray: 4 !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-xaxis-label,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-yaxis-label {
    fill: #94a3b8 !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-toolbar {
    top: -5px !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-toolbar-custom-icon,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-reset-icon,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-zoom-icon,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-zoomin-icon,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-zoomout-icon,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-pan-icon,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-menu-icon,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-download-icon {
    color: #64748b !important;
    transition: all 0.2s ease !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-toolbar-custom-icon:hover,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-reset-icon:hover,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-zoom-icon:hover,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-zoomin-icon:hover,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-zoomout-icon:hover,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-pan-icon:hover,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-menu-icon:hover,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-download-icon:hover {
    color: #6366f1 !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-zoom-icon.apexcharts-selected svg,
.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-pan-icon.apexcharts-selected svg {
    stroke: #6366f1 !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-menu {
    background: rgba(30, 41, 59, 0.98) !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-menu-item {
    color: #e2e8f0 !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-menu-item:hover {
    background: rgba(99, 102, 241, 0.2) !important;
}

.chart-wrapper[b-zlb9mwlx1o]  .apexcharts-align-right {
    justify-content: flex-start !important;
}

.chart-header[b-zlb9mwlx1o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

.chart-title[b-zlb9mwlx1o] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.chart-title i[b-zlb9mwlx1o] {
    color: #6366f1;
    font-size: 1rem;
}

/* Time filter buttons - Modern pill style */
.time-filter-buttons[b-zlb9mwlx1o] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    align-items: center;
    background: rgba(30, 41, 59, 0.6);
    padding: 0.2rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.filter-buttons-group[b-zlb9mwlx1o] {
    display: flex;
    gap: 0.15rem;
}

.time-filter-buttons .btn[b-zlb9mwlx1o] {
    border-radius: 16px;
    padding: 0.35rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    color: #94a3b8;
    min-width: 36px;
}

.time-filter-buttons .btn:hover[b-zlb9mwlx1o] {
    color: #e2e8f0;
    background: rgba(99, 102, 241, 0.15);
}

.time-filter-buttons .btn.btn-accent[b-zlb9mwlx1o] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
    transform: scale(1.02);
}

.time-filter-buttons .btn.btn-accent:hover[b-zlb9mwlx1o] {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45);
}

/* Ledger table styling */
[b-zlb9mwlx1o] .ledger-table {
    font-size: 0.7rem;
    table-layout: fixed;
    width: 100%;
}

[b-zlb9mwlx1o] .ledger-table th {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-weight: 600;
    color: var(--text-primary) !important;
    padding: 0.4rem 0.35rem !important;
    text-align: center;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

[b-zlb9mwlx1o] .ledger-table td {
    padding: 0.35rem 0.35rem !important;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    background: transparent !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-zlb9mwlx1o] .ledger-table tbody tr {
    background: var(--bg-card) !important;
    transition: background 0.15s ease;
}

[b-zlb9mwlx1o] .ledger-table tbody tr:nth-child(even) {
    background: var(--bg-secondary) !important;
}

[b-zlb9mwlx1o] .ledger-table tbody tr:hover {
    background: var(--bg-tertiary) !important;
}

/* Dashboard card override for ledger */
[b-zlb9mwlx1o] .dashboard-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

[b-zlb9mwlx1o] .dashboard-card .card-header {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.5rem 0.75rem !important;
    flex-shrink: 0;
}

[b-zlb9mwlx1o] .dashboard-card .card-header h5 {
    color: var(--text-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

[b-zlb9mwlx1o] .dashboard-card .card-body {
    background: var(--bg-card) !important;
    padding: 0.5rem !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Empty state */
.empty-state[b-zlb9mwlx1o] {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
}

.empty-state i[b-zlb9mwlx1o] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.empty-state p[b-zlb9mwlx1o] {
    margin: 0;
    font-size: 0.8rem;
}

/* Text colors */
.text-muted[b-zlb9mwlx1o] {
    color: var(--text-muted) !important;
}

/* Badge styling */
[b-zlb9mwlx1o] .badge.bg-success {
    background: var(--success) !important;
}

[b-zlb9mwlx1o] .badge.bg-primary {
    background: var(--primary-blue) !important;
}

/* Table responsive */
[b-zlb9mwlx1o] .table-responsive {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Ledger scrollable container */
.ledger-scrollable[b-zlb9mwlx1o] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

.ledger-scrollable[b-zlb9mwlx1o]::-webkit-scrollbar {
    width: 6px;
}

.ledger-scrollable[b-zlb9mwlx1o]::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.ledger-scrollable[b-zlb9mwlx1o]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.ledger-scrollable[b-zlb9mwlx1o]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Ledger section specific styles */
.ledger-section[b-zlb9mwlx1o] {
    flex: 1;
    min-height: 0;
}

[b-zlb9mwlx1o] .ledger-section .card-body {
    padding: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-zlb9mwlx1o] .ledger-section.dashboard-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Mobile responsive */
@media (max-width: 1200px) {
    .chart-ledger-grid[b-zlb9mwlx1o] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {
    .new-header-layout[b-zlb9mwlx1o] {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .chart-ledger-grid[b-zlb9mwlx1o] {
        grid-template-columns: 1fr;
    }

    .chart-section[b-zlb9mwlx1o] {
        order: 1;
    }

    .ledger-section[b-zlb9mwlx1o] {
        order: 2;
        flex: 1;
    }

    .ledger-scrollable[b-zlb9mwlx1o] {
        flex: 1;
        min-height: 300px;
    }

    .stats-row-center[b-zlb9mwlx1o] {
        flex-wrap: wrap;
        gap: 0.4rem;
        justify-content: center;
    }

    .stat-box-center[b-zlb9mwlx1o] {
        min-width: 80px;
        padding: 0.4rem 0.6rem;
    }

    .chart-header[b-zlb9mwlx1o] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .time-filter-buttons[b-zlb9mwlx1o] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .performance-container[b-zlb9mwlx1o] {
        padding: 0.5rem;
    }

    .prominent-card-section[b-zlb9mwlx1o] {
        padding: 0.5rem;
    }

    .card-title-main[b-zlb9mwlx1o] {
        font-size: 1.1rem;
    }

    [b-zlb9mwlx1o] .showcase-card-image {
        width: 90px;
    }

    .stats-row-center[b-zlb9mwlx1o] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.3rem;
        width: 100%;
    }

    .stat-box-center[b-zlb9mwlx1o] {
        min-width: auto;
        padding: 0.35rem 0.4rem;
    }

    .stat-box-center .stat-value[b-zlb9mwlx1o] {
        font-size: 0.8rem;
    }

    .stat-box-center .stat-label[b-zlb9mwlx1o] {
        font-size: 0.5rem;
    }

    .time-filter-buttons .btn[b-zlb9mwlx1o] {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }

    .chart-container[b-zlb9mwlx1o] {
        padding: 0.5rem;
    }

    .search-version-row[b-zlb9mwlx1o] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .integrated-search-wrapper[b-zlb9mwlx1o] {
        max-width: 100%;
        width: 100%;
    }

    .ledger-scrollable[b-zlb9mwlx1o] {
        flex: 1;
        min-height: 250px;
    }

    /* Compact ledger table for mobile */
    [b-zlb9mwlx1o] .ledger-table th,
    [b-zlb9mwlx1o] .ledger-table td {
        padding: 0.3rem 0.4rem !important;
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .card-title-main[b-zlb9mwlx1o] {
        font-size: 1rem;
    }

    [b-zlb9mwlx1o] .showcase-card-image {
        width: 80px;
    }

    .stats-row-center[b-zlb9mwlx1o] {
        grid-template-columns: repeat(3, 1fr);
    }

    .stat-box-center[b-zlb9mwlx1o] {
        padding: 0.3rem 0.35rem;
    }

    .stat-box-center .stat-value[b-zlb9mwlx1o] {
        font-size: 0.75rem;
    }

    .stat-box-center .stat-label[b-zlb9mwlx1o] {
        font-size: 0.45rem;
    }

    .time-filter-buttons .btn[b-zlb9mwlx1o] {
        padding: 0.2rem 0.4rem;
        font-size: 0.6rem;
    }

    .chart-title[b-zlb9mwlx1o] {
        font-size: 0.75rem;
    }

    .ledger-scrollable[b-zlb9mwlx1o] {
        flex: 1;
        min-height: 200px;
    }

    /* Even more compact ledger on small screens */
    [b-zlb9mwlx1o] .ledger-table th,
    [b-zlb9mwlx1o] .ledger-table td {
        padding: 0.25rem 0.3rem !important;
        font-size: 0.6rem;
    }
}
/* /Components/Pages/Pricing/Pricing.razor.rz.scp.css */
/* ===== Pricing Dashboard - Modern Dark Mode with Wow Factor ===== */

/* ===== CSS Variables ===== */
:root[b-01wf81gkgb] {
    --pricing-bg-primary: #0d1117;
    --pricing-bg-secondary: #161b22;
    --pricing-bg-tertiary: #21262d;
    --pricing-bg-card: #1c2128;
    --pricing-border-color: rgba(255, 255, 255, 0.08);
    --pricing-border-light: rgba(255, 255, 255, 0.12);
    --pricing-text-primary: #f0f6fc;
    --pricing-text-secondary: #8b949e;
    --pricing-text-muted: #6e7681;
    --pricing-accent-blue: #58a6ff;
    --pricing-accent-green: #3fb950;
    --pricing-accent-red: #f85149;
    --pricing-accent-yellow: #d29922;
    --pricing-accent-purple: #a371f7;
    --pricing-accent-cyan: #39c5cf;
    --pricing-gradient-blue: linear-gradient(135deg, #58a6ff 0%, #1f6feb 100%);
    --pricing-gradient-green: linear-gradient(135deg, #3fb950 0%, #238636 100%);
    --pricing-gradient-red: linear-gradient(135deg, #f85149 0%, #da3633 100%);
    --pricing-gradient-purple: linear-gradient(135deg, #a371f7 0%, #8957e5 100%);
}

/* ===== Condensed Pricing Configuration Grid ===== */
.pricing-config-grid[b-01wf81gkgb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
    .pricing-config-grid[b-01wf81gkgb] {
        grid-template-columns: 1fr;
    }
}

.config-panel[b-01wf81gkgb] {
    background: linear-gradient(180deg, rgba(30, 35, 45, 0.95) 0%, rgba(22, 27, 34, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.all-cards-panel[b-01wf81gkgb] {
    border-top: 4px solid var(--pricing-accent-blue);
    background: linear-gradient(180deg, rgba(88, 166, 255, 0.08) 0%, rgba(22, 27, 34, 0.98) 100%);
}

.new-sets-panel[b-01wf81gkgb] {
    border-top: 4px solid var(--pricing-accent-yellow);
    background: linear-gradient(180deg, rgba(210, 153, 34, 0.08) 0%, rgba(22, 27, 34, 0.98) 100%);
}

.config-panel-header[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.config-panel-title[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pricing-text-primary);
}

.config-panel-title i[b-01wf81gkgb] {
    font-size: 1rem;
}

.all-cards-panel .config-panel-title i[b-01wf81gkgb] {
    color: var(--pricing-accent-blue);
}

.new-sets-panel .config-panel-title i[b-01wf81gkgb] {
    color: var(--pricing-accent-yellow);
}

.config-expiry[b-01wf81gkgb] {
    font-size: 0.6875rem;
    color: var(--pricing-accent-yellow);
    background: rgba(210, 153, 34, 0.15);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Header right section for Last Updated and toggle */
.config-header-right[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.last-updated[b-01wf81gkgb] {
    font-size: 0.6875rem;
    color: var(--pricing-text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.last-updated i[b-01wf81gkgb] {
    font-size: 0.75rem;
    color: var(--pricing-text-secondary);
}

/* Offset indicator for settings that differ from defaults */
.offset-indicator[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    color: var(--pricing-accent-yellow);
    animation: pulse-glow-b-01wf81gkgb 2s ease-in-out infinite;
}

.offset-indicator i[b-01wf81gkgb] {
    font-size: 0.75rem;
}

@keyframes pulse-glow-b-01wf81gkgb {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.config-loading[b-01wf81gkgb] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.loading-spinner-sm[b-01wf81gkgb] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--pricing-border-color);
    border-top-color: var(--pricing-accent-blue);
    border-radius: 50%;
    animation: spin-b-01wf81gkgb 0.8s linear infinite;
}

.config-panel-body[b-01wf81gkgb] {
    padding: 1rem;
}

.config-panel-body.disabled[b-01wf81gkgb] {
    opacity: 0.6;
}

.config-panel-body.disabled .compact-slider:not(:disabled)[b-01wf81gkgb] {
    cursor: not-allowed;
}

.config-row[b-01wf81gkgb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.config-item[b-01wf81gkgb] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.config-item-header[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.config-label[b-01wf81gkgb] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.config-label i[b-01wf81gkgb] {
    font-size: 0.75rem;
}

.buy-label[b-01wf81gkgb] {
    color: var(--pricing-accent-green);
}

.sell-label[b-01wf81gkgb] {
    color: var(--pricing-accent-red);
}

.margin-label[b-01wf81gkgb] {
    color: var(--pricing-accent-purple);
}

.booster-label[b-01wf81gkgb] {
    color: var(--pricing-accent-cyan);
}

.config-value[b-01wf81gkgb] {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.config-value.buy-value[b-01wf81gkgb] {
    color: var(--pricing-accent-green);
}

.config-value.sell-value[b-01wf81gkgb] {
    color: var(--pricing-accent-red);
}

.config-value.margin-value[b-01wf81gkgb] {
    color: var(--pricing-accent-purple);
}

.config-value.booster-value[b-01wf81gkgb] {
    color: var(--pricing-accent-cyan);
}

/* Compact Sliders - Enhanced Visibility */
.compact-slider[b-01wf81gkgb] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.compact-slider[b-01wf81gkgb]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 255, 255, 0.2);
    transition: transform 0.15s, box-shadow 0.15s;
}

.compact-slider[b-01wf81gkgb]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.3);
}

.compact-slider[b-01wf81gkgb]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Buy Slider - Green Track */
.compact-slider.buy-slider[b-01wf81gkgb] {
    background: linear-gradient(90deg, rgba(63, 185, 80, 0.3) 0%, rgba(63, 185, 80, 0.5) 100%);
    border-color: rgba(63, 185, 80, 0.4);
}

.compact-slider.buy-slider[b-01wf81gkgb]::-webkit-slider-thumb {
    background: var(--pricing-gradient-green);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 15px rgba(63, 185, 80, 0.5);
}

.compact-slider.buy-slider[b-01wf81gkgb]::-moz-range-thumb {
    background: var(--pricing-gradient-green);
}

/* Sell Slider - Red Track */
.compact-slider.sell-slider[b-01wf81gkgb] {
    background: linear-gradient(90deg, rgba(248, 81, 73, 0.3) 0%, rgba(248, 81, 73, 0.5) 100%);
    border-color: rgba(248, 81, 73, 0.4);
}

.compact-slider.sell-slider[b-01wf81gkgb]::-webkit-slider-thumb {
    background: var(--pricing-gradient-red);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 15px rgba(248, 81, 73, 0.5);
}

.compact-slider.sell-slider[b-01wf81gkgb]::-moz-range-thumb {
    background: var(--pricing-gradient-red);
}

/* Margin Slider - Purple Track */
.compact-slider.margin-slider[b-01wf81gkgb] {
    background: linear-gradient(90deg, rgba(163, 113, 247, 0.3) 0%, rgba(163, 113, 247, 0.5) 100%);
    border-color: rgba(163, 113, 247, 0.4);
}

.compact-slider.margin-slider[b-01wf81gkgb]::-webkit-slider-thumb {
    background: var(--pricing-gradient-purple);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 15px rgba(163, 113, 247, 0.5);
}

.compact-slider.margin-slider[b-01wf81gkgb]::-moz-range-thumb {
    background: var(--pricing-gradient-purple);
}

/* Booster Slider - Cyan Track */
.compact-slider.booster-slider[b-01wf81gkgb] {
    background: linear-gradient(90deg, rgba(57, 197, 207, 0.3) 0%, rgba(57, 197, 207, 0.5) 100%);
    border-color: rgba(57, 197, 207, 0.4);
}

.compact-slider.booster-slider[b-01wf81gkgb]::-webkit-slider-thumb {
    background: linear-gradient(135deg, #39c5cf 0%, #2da8b0 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 15px rgba(57, 197, 207, 0.5);
}

.compact-slider.booster-slider[b-01wf81gkgb]::-moz-range-thumb {
    background: linear-gradient(135deg, #39c5cf 0%, #2da8b0 100%);
}

/* Config Actions */
.config-actions[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--pricing-border-color);
    margin-top: 0.5rem;
}

.duration-compact[b-01wf81gkgb] {
    display: flex;
    gap: 0.25rem;
}

.duration-chip[b-01wf81gkgb] {
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    background: var(--pricing-bg-secondary);
    color: var(--pricing-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.duration-chip:hover[b-01wf81gkgb] {
    color: var(--pricing-text-primary);
    background: var(--pricing-bg-tertiary);
}

.duration-chip.active[b-01wf81gkgb] {
    background: var(--pricing-accent-blue);
    color: white;
}

.action-compact[b-01wf81gkgb] {
    display: flex;
    gap: 0.375rem;
}

.btn-apply[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background: var(--pricing-gradient-green);
    color: white;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-apply:hover:not(:disabled)[b-01wf81gkgb] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(63, 185, 80, 0.3);
}

.btn-apply:disabled[b-01wf81gkgb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-reset[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--pricing-border-light);
    background: transparent;
    color: var(--pricing-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-reset:hover:not(:disabled)[b-01wf81gkgb] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--pricing-text-primary);
}

.btn-reset:disabled[b-01wf81gkgb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.new-sets-hint[b-01wf81gkgb] {
    font-size: 0.625rem;
    color: var(--pricing-text-muted);
}

/* Toggle Switch */
.toggle-switch[b-01wf81gkgb] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle-switch input[b-01wf81gkgb] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-01wf81gkgb] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--pricing-bg-secondary);
    border: 1px solid var(--pricing-border-color);
    border-radius: 20px;
    transition: 0.3s;
}

.toggle-slider[b-01wf81gkgb]:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--pricing-text-muted);
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider[b-01wf81gkgb] {
    background-color: rgba(210, 153, 34, 0.3);
    border-color: var(--pricing-accent-yellow);
}

.toggle-switch input:checked + .toggle-slider[b-01wf81gkgb]:before {
    transform: translateX(16px);
    background-color: var(--pricing-accent-yellow);
}

/* ===== Base Dashboard Layout ===== */
.pricing-dashboard[b-01wf81gkgb] {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--pricing-bg-primary) 0%, #0a0d12 100%);
    padding: 0;
}

/* ===== Hero Section ===== */
.pricing-hero[b-01wf81gkgb] {
    background: linear-gradient(135deg, rgba(88, 166, 255, 0.08) 0%, rgba(63, 185, 80, 0.04) 50%, rgba(163, 113, 247, 0.06) 100%);
    border-bottom: 1px solid var(--pricing-border-color);
    padding: 1.5rem 2rem;
    margin: -1rem -1rem 1.5rem -1rem;
    position: relative;
    overflow: hidden;
}

.pricing-hero[b-01wf81gkgb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(88, 166, 255, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 50%, rgba(63, 185, 80, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-title-section[b-01wf81gkgb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hero-title[b-01wf81gkgb] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pricing-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.02em;
}

.hero-title-icon[b-01wf81gkgb] {
    width: 48px;
    height: 48px;
    background: var(--pricing-gradient-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(88, 166, 255, 0.3);
}

.hero-subtitle[b-01wf81gkgb] {
    color: var(--pricing-text-secondary);
    font-size: 0.9375rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-actions[b-01wf81gkgb] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* ===== Status Indicator ===== */
.status-indicator[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(63, 185, 80, 0.1);
    border: 1px solid rgba(63, 185, 80, 0.3);
    border-radius: 20px;
    font-size: 0.8125rem;
    color: var(--pricing-accent-green);
}

.status-indicator.warning[b-01wf81gkgb] {
    background: rgba(210, 153, 34, 0.1);
    border-color: rgba(210, 153, 34, 0.3);
    color: var(--pricing-accent-yellow);
}

.status-dot[b-01wf81gkgb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-b-01wf81gkgb 2s ease-in-out infinite;
}

@keyframes pulse-b-01wf81gkgb {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

/* ===== Modern Buttons ===== */
.btn-modern[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-modern[b-01wf81gkgb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.btn-modern:hover[b-01wf81gkgb]::before {
    left: 100%;
}

.btn-primary-modern[b-01wf81gkgb] {
    background: var(--pricing-gradient-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.25);
}

.btn-primary-modern:hover:not(:disabled)[b-01wf81gkgb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 166, 255, 0.4);
}

.btn-success-modern[b-01wf81gkgb] {
    background: var(--pricing-gradient-green);
    color: white;
    box-shadow: 0 4px 12px rgba(63, 185, 80, 0.25);
}

.btn-success-modern:hover:not(:disabled)[b-01wf81gkgb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(63, 185, 80, 0.4);
}

.btn-outline-modern[b-01wf81gkgb] {
    background: transparent;
    color: var(--pricing-text-secondary);
    border: 1px solid var(--pricing-border-light);
}

.btn-outline-modern:hover:not(:disabled)[b-01wf81gkgb] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--pricing-text-primary);
    border-color: var(--pricing-accent-blue);
}

.btn-modern:disabled[b-01wf81gkgb] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ===== Metrics Grid ===== */
.metrics-grid[b-01wf81gkgb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .metrics-grid[b-01wf81gkgb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .metrics-grid[b-01wf81gkgb] {
        grid-template-columns: 1fr;
    }
}

.metric-card[b-01wf81gkgb] {
    background: var(--pricing-bg-card);
    border: 1px solid var(--pricing-border-color);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.metric-card[b-01wf81gkgb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent, var(--pricing-gradient-blue));
    opacity: 0;
    transition: opacity 0.3s;
}

.metric-card:hover[b-01wf81gkgb] {
    transform: translateY(-4px);
    border-color: var(--pricing-border-light);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.metric-card:hover[b-01wf81gkgb]::before {
    opacity: 1;
}

.metric-card.buy-card[b-01wf81gkgb] { --card-accent: var(--pricing-gradient-green); }
.metric-card.sell-card[b-01wf81gkgb] { --card-accent: var(--pricing-gradient-red); }
.metric-card.margin-card[b-01wf81gkgb] { --card-accent: var(--pricing-gradient-purple); }
.metric-card.movement-card[b-01wf81gkgb] { --card-accent: var(--pricing-gradient-blue); }

.metric-icon[b-01wf81gkgb] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.metric-card.buy-card .metric-icon[b-01wf81gkgb] {
    background: rgba(63, 185, 80, 0.12);
    color: var(--pricing-accent-green);
}

.metric-card.sell-card .metric-icon[b-01wf81gkgb] {
    background: rgba(248, 81, 73, 0.12);
    color: var(--pricing-accent-red);
}

.metric-card.margin-card .metric-icon[b-01wf81gkgb] {
    background: rgba(163, 113, 247, 0.12);
    color: var(--pricing-accent-purple);
}

.metric-card.movement-card .metric-icon[b-01wf81gkgb] {
    background: rgba(88, 166, 255, 0.12);
    color: var(--pricing-accent-blue);
}

.metric-content[b-01wf81gkgb] {
    flex: 1;
    min-width: 0;
}

.metric-label[b-01wf81gkgb] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pricing-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}

.metric-value[b-01wf81gkgb] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--pricing-text-primary);
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.metric-value-dual[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.margin-item[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--pricing-accent-purple);
}

.margin-item i[b-01wf81gkgb] {
    font-size: 0.875rem;
    opacity: 0.8;
}

.margin-item.booster[b-01wf81gkgb] {
    color: var(--pricing-accent-cyan);
}

.margin-separator[b-01wf81gkgb] {
    color: var(--pricing-text-muted);
    font-weight: 400;
    margin: 0 0.125rem;
}

.metric-subtext[b-01wf81gkgb] {
    font-size: 0.75rem;
    color: var(--pricing-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.metric-change[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.metric-change.positive[b-01wf81gkgb] {
    background: rgba(63, 185, 80, 0.15);
    color: var(--pricing-accent-green);
}

.metric-change.negative[b-01wf81gkgb] {
    background: rgba(248, 81, 73, 0.15);
    color: var(--pricing-accent-red);
}

/* Dual subtext for showing Normal and New Sets values */
.metric-subtext-dual[b-01wf81gkgb] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.6875rem;
    color: var(--pricing-text-secondary);
}

.metric-subtext-dual .subtext-item[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.metric-subtext-dual .subtext-item i[b-01wf81gkgb] {
    font-size: 0.625rem;
    opacity: 0.7;
}

.metric-subtext-dual .subtext-item.new-sets[b-01wf81gkgb] {
    color: var(--pricing-accent-yellow);
}

.metric-subtext-dual .subtext-item.new-sets i[b-01wf81gkgb] {
    opacity: 1;
}

/* ===== Settings Panel ===== */
.settings-panel[b-01wf81gkgb] {
    background: var(--pricing-bg-card);
    border: 1px solid var(--pricing-border-color);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.panel-header[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--pricing-border-color);
    background: rgba(0, 0, 0, 0.2);
}

.panel-title[b-01wf81gkgb] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pricing-text-primary);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
}

.panel-title i[b-01wf81gkgb] {
    color: var(--pricing-accent-blue);
}

.panel-badge[b-01wf81gkgb] {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.panel-badge.active[b-01wf81gkgb] {
    background: rgba(63, 185, 80, 0.15);
    color: var(--pricing-accent-green);
    border: 1px solid rgba(63, 185, 80, 0.3);
}

.panel-badge.warning[b-01wf81gkgb] {
    background: rgba(210, 153, 34, 0.15);
    color: var(--pricing-accent-yellow);
    border: 1px solid rgba(210, 153, 34, 0.3);
}

.panel-body[b-01wf81gkgb] {
    padding: 1.5rem;
}

/* ===== Settings Grid ===== */
.settings-grid[b-01wf81gkgb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .settings-grid[b-01wf81gkgb] {
        grid-template-columns: 1fr;
    }
}

.setting-card[b-01wf81gkgb] {
    background: var(--pricing-bg-tertiary);
    border: 1px solid var(--pricing-border-color);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s;
}

.setting-card:hover[b-01wf81gkgb] {
    border-color: var(--pricing-border-light);
}

.setting-header[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.setting-icon[b-01wf81gkgb] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.setting-icon.percentile[b-01wf81gkgb] {
    background: rgba(88, 166, 255, 0.12);
    color: var(--pricing-accent-blue);
}

.setting-icon.margin[b-01wf81gkgb] {
    background: rgba(163, 113, 247, 0.12);
    color: var(--pricing-accent-purple);
}

.setting-title[b-01wf81gkgb] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--pricing-text-primary);
    margin: 0;
}

.setting-description[b-01wf81gkgb] {
    font-size: 0.8125rem;
    color: var(--pricing-text-muted);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* ===== Modern Slider ===== */
.slider-container[b-01wf81gkgb] {
    margin-bottom: 1.25rem;
}

.slider-header[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.slider-label[b-01wf81gkgb] {
    font-size: 0.8125rem;
    color: var(--pricing-text-secondary);
}

.slider-value[b-01wf81gkgb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pricing-accent-blue);
    font-variant-numeric: tabular-nums;
}

.modern-slider[b-01wf81gkgb] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--pricing-bg-secondary);
    outline: none;
    cursor: pointer;
    position: relative;
}

.modern-slider[b-01wf81gkgb]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pricing-gradient-blue);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(88, 166, 255, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.modern-slider[b-01wf81gkgb]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(88, 166, 255, 0.5);
}

.modern-slider[b-01wf81gkgb]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pricing-gradient-blue);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(88, 166, 255, 0.4);
}

.slider-marks[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding: 0 0.25rem;
}

.slider-mark[b-01wf81gkgb] {
    font-size: 0.6875rem;
    color: var(--pricing-text-muted);
}

/* ===== Price Preview ===== */
.price-preview[b-01wf81gkgb] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.preview-badge[b-01wf81gkgb] {
    flex: 1;
    padding: 0.75rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
}

.preview-badge.buy[b-01wf81gkgb] {
    background: rgba(63, 185, 80, 0.1);
    border: 1px solid rgba(63, 185, 80, 0.3);
    color: var(--pricing-accent-green);
}

.preview-badge.sell[b-01wf81gkgb] {
    background: rgba(248, 81, 73, 0.1);
    border: 1px solid rgba(248, 81, 73, 0.3);
    color: var(--pricing-accent-red);
}

.preview-label[b-01wf81gkgb] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.preview-value[b-01wf81gkgb] {
    font-size: 1.25rem;
    font-weight: 700;
}

/* ===== Duration Pills ===== */
.duration-pills[b-01wf81gkgb] {
    display: flex;
    gap: 0.375rem;
    background: var(--pricing-bg-secondary);
    padding: 0.25rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}

.duration-pill[b-01wf81gkgb] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pricing-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.duration-pill:hover[b-01wf81gkgb] {
    color: var(--pricing-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.duration-pill.active[b-01wf81gkgb] {
    background: var(--pricing-gradient-blue);
    color: white;
    box-shadow: 0 2px 8px rgba(88, 166, 255, 0.3);
}

/* ===== Action Buttons ===== */
.action-buttons[b-01wf81gkgb] {
    display: flex;
    gap: 0.75rem;
}

.action-buttons .btn-modern[b-01wf81gkgb] {
    flex: 1;
}

/* ===== Margin Settings ===== */
.margin-group[b-01wf81gkgb] {
    margin-bottom: 1.5rem;
}

.margin-group:last-child[b-01wf81gkgb] {
    margin-bottom: 0;
}

.margin-header[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.margin-label[b-01wf81gkgb] {
    font-size: 0.8125rem;
    color: var(--pricing-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.margin-label i[b-01wf81gkgb] {
    font-size: 1rem;
}

.margin-value[b-01wf81gkgb] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pricing-accent-purple);
}

.margin-slider[b-01wf81gkgb] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--pricing-bg-secondary);
    outline: none;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.margin-slider[b-01wf81gkgb]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pricing-gradient-purple);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(163, 113, 247, 0.4);
}

.margin-slider[b-01wf81gkgb]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pricing-gradient-purple);
    cursor: pointer;
    border: none;
}

/* ===== Redesigned Pricing Settings Container ===== */
.pricing-settings-container[b-01wf81gkgb] {
    background: var(--pricing-bg-card);
    border: 1px solid var(--pricing-border-color);
    border-radius: 20px;
    padding: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.pricing-settings-header[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(88, 166, 255, 0.06) 0%, rgba(163, 113, 247, 0.04) 100%);
    border-bottom: 1px solid var(--pricing-border-color);
}

.header-left[b-01wf81gkgb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-main-title[b-01wf81gkgb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pricing-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.settings-main-title i[b-01wf81gkgb] {
    color: var(--pricing-accent-blue);
}

.settings-subtitle[b-01wf81gkgb] {
    font-size: 0.875rem;
    color: var(--pricing-text-muted);
    margin: 0;
}

.expiry-badge[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(210, 153, 34, 0.12);
    border: 1px solid rgba(210, 153, 34, 0.3);
    border-radius: 20px;
    font-size: 0.8125rem;
    color: var(--pricing-accent-yellow);
}

/* ===== Percentile Section ===== */
.percentile-section[b-01wf81gkgb] {
    padding: 2rem;
    border-bottom: 1px solid var(--pricing-border-color);
}

.section-header[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.section-icon[b-01wf81gkgb] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.section-icon.buy-icon[b-01wf81gkgb] {
    background: rgba(63, 185, 80, 0.15);
    color: var(--pricing-accent-green);
}

.section-icon.sell-icon[b-01wf81gkgb] {
    background: rgba(248, 81, 73, 0.15);
    color: var(--pricing-accent-red);
}

.section-icon.margin-icon[b-01wf81gkgb] {
    background: rgba(163, 113, 247, 0.15);
    color: var(--pricing-accent-purple);
}

.section-title[b-01wf81gkgb] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--pricing-text-primary);
}

.section-description[b-01wf81gkgb] {
    font-size: 0.8125rem;
    color: var(--pricing-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* ===== Dual Slider Container ===== */
.dual-slider-container[b-01wf81gkgb] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .dual-slider-container[b-01wf81gkgb] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .slider-separator[b-01wf81gkgb] {
        display: none;
    }
}

/* ===== Slider Cards ===== */
.slider-card[b-01wf81gkgb] {
    background: var(--pricing-bg-tertiary);
    border: 1px solid var(--pricing-border-color);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-card:hover[b-01wf81gkgb] {
    border-color: var(--pricing-border-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.buy-slider-card[b-01wf81gkgb] {
    border-left: 3px solid var(--pricing-accent-green);
}

.sell-slider-card[b-01wf81gkgb] {
    border-left: 3px solid var(--pricing-accent-red);
}

.slider-card-header[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.slider-card-label[b-01wf81gkgb] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pricing-text-muted);
}

.slider-card-value-container[b-01wf81gkgb] {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
}

.slider-card-value[b-01wf81gkgb] {
    font-size: 2.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.slider-card-value.buy-value[b-01wf81gkgb] {
    color: var(--pricing-accent-green);
}

.slider-card-value.sell-value[b-01wf81gkgb] {
    color: var(--pricing-accent-red);
}

.slider-card-unit[b-01wf81gkgb] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pricing-text-muted);
}

/* ===== Enhanced Slider Track ===== */
.slider-track-container[b-01wf81gkgb] {
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.enhanced-slider[b-01wf81gkgb] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background: var(--pricing-bg-secondary);
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.enhanced-slider[b-01wf81gkgb]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 3px solid white;
}

.enhanced-slider[b-01wf81gkgb]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.enhanced-slider[b-01wf81gkgb]::-webkit-slider-thumb:active {
    transform: scale(1.2);
}

.enhanced-slider[b-01wf81gkgb]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.buy-slider[b-01wf81gkgb]::-webkit-slider-thumb {
    background: var(--pricing-gradient-green);
    box-shadow: 0 4px 16px rgba(63, 185, 80, 0.5);
}

.buy-slider[b-01wf81gkgb]::-moz-range-thumb {
    background: var(--pricing-gradient-green);
}

.sell-slider[b-01wf81gkgb]::-webkit-slider-thumb {
    background: var(--pricing-gradient-red);
    box-shadow: 0 4px 16px rgba(248, 81, 73, 0.5);
}

.sell-slider[b-01wf81gkgb]::-moz-range-thumb {
    background: var(--pricing-gradient-red);
}

.slider-fill[b-01wf81gkgb] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}

.buy-fill[b-01wf81gkgb] {
    background: linear-gradient(90deg, rgba(63, 185, 80, 0.3) 0%, rgba(63, 185, 80, 0.6) 100%);
}

.sell-fill[b-01wf81gkgb] {
    background: linear-gradient(90deg, rgba(248, 81, 73, 0.3) 0%, rgba(248, 81, 73, 0.6) 100%);
}

.slider-labels[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6875rem;
    color: var(--pricing-text-muted);
}

.slider-label-hint[b-01wf81gkgb] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

/* ===== Slider Separator ===== */
.slider-separator[b-01wf81gkgb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
}

.separator-line[b-01wf81gkgb] {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent 0%, var(--pricing-border-light) 50%, transparent 100%);
}

.separator-icon[b-01wf81gkgb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pricing-bg-tertiary);
    border: 1px solid var(--pricing-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pricing-text-muted);
    font-size: 0.875rem;
}

/* ===== Spread Indicator ===== */
.spread-indicator[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--pricing-bg-tertiary);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.spread-label[b-01wf81gkgb] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pricing-text-muted);
}

.spread-value[b-01wf81gkgb] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pricing-accent-cyan);
    font-variant-numeric: tabular-nums;
}

.spread-bar[b-01wf81gkgb] {
    flex: 1;
    height: 8px;
    background: var(--pricing-bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.spread-bar-fill[b-01wf81gkgb] {
    height: 100%;
    background: linear-gradient(90deg, var(--pricing-accent-green) 0%, var(--pricing-accent-cyan) 50%, var(--pricing-accent-red) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ===== Percentile Actions ===== */
.percentile-actions[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.duration-selector[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.duration-label[b-01wf81gkgb] {
    font-size: 0.8125rem;
    color: var(--pricing-text-muted);
    font-weight: 500;
}

.duration-buttons[b-01wf81gkgb] {
    display: flex;
    gap: 0.375rem;
    background: var(--pricing-bg-secondary);
    padding: 0.25rem;
    border-radius: 10px;
}

.duration-btn[b-01wf81gkgb] {
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pricing-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.duration-btn:hover[b-01wf81gkgb] {
    color: var(--pricing-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.duration-btn.active[b-01wf81gkgb] {
    background: var(--pricing-gradient-blue);
    color: white;
    box-shadow: 0 2px 8px rgba(88, 166, 255, 0.3);
}

.action-buttons-row[b-01wf81gkgb] {
    display: flex;
    gap: 0.75rem;
}

.action-btn-primary[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--pricing-gradient-green);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(63, 185, 80, 0.3);
}

.action-btn-primary:hover:not(:disabled)[b-01wf81gkgb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(63, 185, 80, 0.4);
}

.action-btn-primary:disabled[b-01wf81gkgb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.action-btn-secondary[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--pricing-text-secondary);
    border: 1px solid var(--pricing-border-light);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn-secondary:hover:not(:disabled)[b-01wf81gkgb] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--pricing-text-primary);
}

.action-btn-secondary:disabled[b-01wf81gkgb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-spinner[b-01wf81gkgb] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-01wf81gkgb 0.8s linear infinite;
}

/* ===== Margins Section ===== */
.margins-section[b-01wf81gkgb] {
    padding: 2rem;
}

.margins-grid[b-01wf81gkgb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .margins-grid[b-01wf81gkgb] {
        grid-template-columns: 1fr;
    }
}

.margin-card[b-01wf81gkgb] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--pricing-bg-tertiary);
    border: 1px solid var(--pricing-border-color);
    border-radius: 16px;
    padding: 1.25rem;
    transition: all 0.2s;
}

.margin-card:hover[b-01wf81gkgb] {
    border-color: var(--pricing-border-light);
}

.margin-card-icon[b-01wf81gkgb] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(163, 113, 247, 0.12);
    color: var(--pricing-accent-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.margin-card-icon.booster[b-01wf81gkgb] {
    background: rgba(57, 197, 207, 0.12);
    color: var(--pricing-accent-cyan);
}

.margin-card-content[b-01wf81gkgb] {
    flex: 1;
    min-width: 0;
}

.margin-card-header[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.margin-card-title[b-01wf81gkgb] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--pricing-text-primary);
}

.margin-card-value-container[b-01wf81gkgb] {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
}

.margin-card-value[b-01wf81gkgb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pricing-accent-purple);
    font-variant-numeric: tabular-nums;
}

.margin-card-unit[b-01wf81gkgb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pricing-text-muted);
}

.margin-slider-container[b-01wf81gkgb] {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.margin-slider-input[b-01wf81gkgb] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--pricing-bg-secondary);
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.margin-slider-input[b-01wf81gkgb]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pricing-gradient-purple);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(163, 113, 247, 0.4);
    border: 2px solid white;
    transition: transform 0.2s;
}

.margin-slider-input[b-01wf81gkgb]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.margin-slider-input[b-01wf81gkgb]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pricing-gradient-purple);
    cursor: pointer;
    border: 2px solid white;
}

.margin-slider-fill[b-01wf81gkgb] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(163, 113, 247, 0.3) 0%, rgba(163, 113, 247, 0.6) 100%);
    pointer-events: none;
    z-index: 1;
}

.margin-slider-fill.booster-fill[b-01wf81gkgb] {
    background: linear-gradient(90deg, rgba(57, 197, 207, 0.3) 0%, rgba(57, 197, 207, 0.6) 100%);
}

.margin-slider-labels[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    font-size: 0.625rem;
    color: var(--pricing-text-muted);
}

.margin-save-btn[b-01wf81gkgb] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--pricing-bg-secondary);
    border: 1px solid var(--pricing-border-color);
    color: var(--pricing-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    align-self: center;
}

.margin-save-btn:hover:not(:disabled)[b-01wf81gkgb] {
    background: var(--pricing-gradient-green);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(63, 185, 80, 0.3);
}

.margin-save-btn:disabled[b-01wf81gkgb] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Movement Table ===== */
.movement-panel[b-01wf81gkgb] {
    background: var(--pricing-bg-card);
    border: 1px solid var(--pricing-border-color);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.movement-table-container[b-01wf81gkgb] {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pricing-bg-tertiary) var(--pricing-bg-secondary);
}

.movement-table-container[b-01wf81gkgb]::-webkit-scrollbar {
    width: 8px;
}

.movement-table-container[b-01wf81gkgb]::-webkit-scrollbar-track {
    background: var(--pricing-bg-secondary);
}

.movement-table-container[b-01wf81gkgb]::-webkit-scrollbar-thumb {
    background: var(--pricing-bg-tertiary);
    border-radius: 4px;
}

.movement-table-container[b-01wf81gkgb]::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

.modern-table[b-01wf81gkgb] {
    width: 100%;
    border-collapse: collapse;
}

.modern-table thead[b-01wf81gkgb] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.modern-table th[b-01wf81gkgb] {
    background: var(--pricing-bg-tertiary);
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pricing-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--pricing-border-color);
}

.modern-table td[b-01wf81gkgb] {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--pricing-text-primary);
    border-bottom: 1px solid var(--pricing-border-color);
    transition: background 0.15s;
}

.modern-table tbody tr:hover td[b-01wf81gkgb] {
    background: rgba(88, 166, 255, 0.04);
}

.modern-table tbody tr:last-child td[b-01wf81gkgb] {
    border-bottom: none;
}

/* ===== Movement Badges ===== */
.movement-badge[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.movement-badge.positive[b-01wf81gkgb] {
    background: rgba(63, 185, 80, 0.15);
    color: var(--pricing-accent-green);
}

.movement-badge.negative[b-01wf81gkgb] {
    background: rgba(248, 81, 73, 0.15);
    color: var(--pricing-accent-red);
}

.direction-indicator[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

.direction-indicator.selling[b-01wf81gkgb] {
    color: var(--pricing-accent-red);
}

.direction-indicator.buying[b-01wf81gkgb] {
    color: var(--pricing-accent-green);
}

/* ===== Price List Panel ===== */
.price-list-panel[b-01wf81gkgb] {
    background: var(--pricing-bg-card);
    border: 1px solid var(--pricing-border-color);
    border-radius: 16px;
    overflow: hidden;
}

.price-list-header[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--pricing-border-color);
    background: rgba(0, 0, 0, 0.2);
    flex-wrap: wrap;
    gap: 1rem;
}

.search-container[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modern-search[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    background: var(--pricing-bg-tertiary);
    border: 1px solid var(--pricing-border-color);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    width: 320px;
    transition: all 0.2s;
}

.modern-search:focus-within[b-01wf81gkgb] {
    border-color: var(--pricing-accent-blue);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}

.modern-search i[b-01wf81gkgb] {
    color: var(--pricing-text-muted);
    margin-right: 0.625rem;
}

.modern-search input[b-01wf81gkgb] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--pricing-text-primary);
    font-size: 0.875rem;
}

.modern-search input[b-01wf81gkgb]::placeholder {
    color: var(--pricing-text-muted);
}

.search-clear[b-01wf81gkgb] {
    background: transparent;
    border: none;
    color: var(--pricing-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.15s;
}

.search-clear:hover[b-01wf81gkgb] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pricing-text-primary);
}

.results-badge[b-01wf81gkgb] {
    padding: 0.5rem 1rem;
    background: var(--pricing-bg-tertiary);
    border-radius: 20px;
    font-size: 0.8125rem;
    color: var(--pricing-text-secondary);
    font-weight: 500;
}

/* ===== Price Table ===== */
.price-table-container[b-01wf81gkgb] {
    overflow-x: auto;
}

.price-table[b-01wf81gkgb] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

.price-table th[b-01wf81gkgb] {
    background: var(--pricing-bg-tertiary);
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pricing-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--pricing-border-color);
    position: sticky;
    top: 0;
    z-index: 10;
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
}

.price-table th:hover[b-01wf81gkgb] {
    color: var(--pricing-text-primary);
}

.price-table th.sorted[b-01wf81gkgb] {
    color: var(--pricing-accent-blue);
}

.sort-icon[b-01wf81gkgb] {
    margin-left: 0.375rem;
    font-size: 0.625rem;
}

.price-table td[b-01wf81gkgb] {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--pricing-text-primary);
    border-bottom: 1px solid var(--pricing-border-color);
    transition: background 0.15s;
}

.price-table tbody tr[b-01wf81gkgb] {
    transition: all 0.15s;
}

.price-table tbody tr:hover[b-01wf81gkgb] {
    background: rgba(88, 166, 255, 0.04);
}

.price-table tbody tr:hover td[b-01wf81gkgb] {
    border-color: rgba(88, 166, 255, 0.1);
}

/* ===== Card Name Cell ===== */
.card-name-cell[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-link[b-01wf81gkgb] {
    color: var(--pricing-text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

.card-link:hover[b-01wf81gkgb] {
    color: var(--pricing-accent-blue);
}

.catalog-id[b-01wf81gkgb] {
    font-size: 0.6875rem;
    color: var(--pricing-text-muted);
}

.override-badge[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: rgba(210, 153, 34, 0.15);
    color: var(--pricing-accent-yellow);
    font-size: 0.625rem;
}

/* ===== Price Cells ===== */
.price-buy[b-01wf81gkgb] {
    color: var(--pricing-accent-green);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.price-sell[b-01wf81gkgb] {
    color: var(--pricing-accent-red);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.price-muted[b-01wf81gkgb] {
    color: var(--pricing-text-muted);
    font-variant-numeric: tabular-nums;
}

.price-goatbots[b-01wf81gkgb] {
    color: var(--pricing-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ===== Wishlist Badge ===== */
.wishlist-badge[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.75rem;
}

.wishlist-badge.active[b-01wf81gkgb] {
    background: rgba(63, 185, 80, 0.15);
    color: var(--pricing-accent-green);
}

.wishlist-badge.inactive[b-01wf81gkgb] {
    background: var(--pricing-bg-tertiary);
    color: var(--pricing-text-muted);
}

/* ===== Action Button ===== */
.action-btn[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(210, 153, 34, 0.1);
    border: 1px solid rgba(210, 153, 34, 0.3);
    color: var(--pricing-accent-yellow);
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover[b-01wf81gkgb] {
    background: rgba(210, 153, 34, 0.2);
    transform: scale(1.05);
}

/* ===== Pagination ===== */
.pagination-container[b-01wf81gkgb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--pricing-border-color);
    background: rgba(0, 0, 0, 0.1);
}

.pagination-info[b-01wf81gkgb] {
    font-size: 0.8125rem;
    color: var(--pricing-text-secondary);
}

.pagination-controls[b-01wf81gkgb] {
    display: flex;
    gap: 0.25rem;
}

.page-btn[b-01wf81gkgb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border-radius: 8px;
    background: var(--pricing-bg-tertiary);
    border: 1px solid var(--pricing-border-color);
    color: var(--pricing-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.page-btn:hover:not(:disabled)[b-01wf81gkgb] {
    background: var(--pricing-bg-secondary);
    color: var(--pricing-text-primary);
    border-color: var(--pricing-border-light);
}

.page-btn.active[b-01wf81gkgb] {
    background: var(--pricing-gradient-blue);
    border-color: transparent;
    color: white;
}

.page-btn:disabled[b-01wf81gkgb] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Empty State ===== */
.empty-state[b-01wf81gkgb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state-icon[b-01wf81gkgb] {
    font-size: 4rem;
    color: var(--pricing-text-muted);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-title[b-01wf81gkgb] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--pricing-text-primary);
    margin-bottom: 0.5rem;
}

.empty-state-text[b-01wf81gkgb] {
    font-size: 0.875rem;
    color: var(--pricing-text-muted);
}

/* ===== Loading State ===== */
.loading-state[b-01wf81gkgb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.loading-spinner[b-01wf81gkgb] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--pricing-border-color);
    border-top-color: var(--pricing-accent-blue);
    border-radius: 50%;
    animation: spin-b-01wf81gkgb 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-01wf81gkgb {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-text[b-01wf81gkgb] {
    font-size: 0.875rem;
    color: var(--pricing-text-muted);
}

/* ===== Toast Notifications ===== */
.toast-container[b-01wf81gkgb] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toast[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--pricing-bg-card);
    border: 1px solid var(--pricing-border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: slideIn-b-01wf81gkgb 0.3s ease-out;
    min-width: 300px;
}

@keyframes slideIn-b-01wf81gkgb {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.success[b-01wf81gkgb] {
    border-left: 3px solid var(--pricing-accent-green);
}

.toast.error[b-01wf81gkgb] {
    border-left: 3px solid var(--pricing-accent-red);
}

.toast.warning[b-01wf81gkgb] {
    border-left: 3px solid var(--pricing-accent-yellow);
}

.toast-icon[b-01wf81gkgb] {
    font-size: 1.25rem;
}

.toast.success .toast-icon[b-01wf81gkgb] {
    color: var(--pricing-accent-green);
}

.toast.error .toast-icon[b-01wf81gkgb] {
    color: var(--pricing-accent-red);
}

.toast.warning .toast-icon[b-01wf81gkgb] {
    color: var(--pricing-accent-yellow);
}

.toast-content[b-01wf81gkgb] {
    flex: 1;
}

.toast-title[b-01wf81gkgb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pricing-text-primary);
    margin-bottom: 0.125rem;
}

.toast-message[b-01wf81gkgb] {
    font-size: 0.8125rem;
    color: var(--pricing-text-secondary);
}

.toast-close[b-01wf81gkgb] {
    background: transparent;
    border: none;
    color: var(--pricing-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.15s;
}

.toast-close:hover[b-01wf81gkgb] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pricing-text-primary);
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
    .pricing-hero[b-01wf81gkgb] {
        padding: 1rem;
    }
    
    .hero-content[b-01wf81gkgb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .hero-title[b-01wf81gkgb] {
        font-size: 1.5rem;
    }
    
    .hero-actions[b-01wf81gkgb] {
        width: 100%;
        justify-content: flex-start;
    }
    
    .price-list-header[b-01wf81gkgb] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .modern-search[b-01wf81gkgb] {
        width: 100%;
    }
    
    .pagination-container[b-01wf81gkgb] {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ===== Animations ===== */
.fade-in[b-01wf81gkgb] {
    animation: fadeIn-b-01wf81gkgb 0.3s ease-out;
}

@keyframes fadeIn-b-01wf81gkgb {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-up[b-01wf81gkgb] {
    animation: slideUp-b-01wf81gkgb 0.3s ease-out;
}

@keyframes slideUp-b-01wf81gkgb {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== Glow Effects ===== */
.glow-green[b-01wf81gkgb] {
    box-shadow: 0 0 20px rgba(63, 185, 80, 0.3);
}

.glow-red[b-01wf81gkgb] {
    box-shadow: 0 0 20px rgba(248, 81, 73, 0.3);
}

.glow-blue[b-01wf81gkgb] {
    box-shadow: 0 0 20px rgba(88, 166, 255, 0.3);
}

/* ===== Sparkline Mini Chart ===== */
.sparkline[b-01wf81gkgb] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 24px;
}

.sparkline-bar[b-01wf81gkgb] {
    width: 4px;
    background: var(--pricing-accent-blue);
    border-radius: 2px;
    transition: height 0.3s ease;
}

.sparkline-bar.positive[b-01wf81gkgb] {
    background: var(--pricing-accent-green);
}

.sparkline-bar.negative[b-01wf81gkgb] {
    background: var(--pricing-accent-red);
}

/* ===== New Sets Display ===== */
.new-sets-display[b-01wf81gkgb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(136, 87, 229, 0.1);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(136, 87, 229, 0.2);
}

.new-sets-display .sets-label[b-01wf81gkgb] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.new-sets-display .sets-codes[b-01wf81gkgb] {
    font-size: 0.8rem;
    color: var(--pricing-accent-purple);
    font-weight: 600;
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.5px;
}

.new-sets-display .sets-codes.none[b-01wf81gkgb] {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    font-weight: 400;
}
/* /Components/Pages/Profit/Profit.razor.rz.scp.css */
/* Trade Analytics Dashboard - Modern Dark Mode Styles */

/* ===== Base Dashboard Layout ===== */
.analytics-dashboard[b-n3ddifx8e5] {
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--bg-primary) 0%, #0c0f14 100%);
}

/* ===== Hero Section ===== */
.analytics-hero[b-n3ddifx8e5] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 2rem;
    margin: -1rem -1rem 1.5rem -1rem;
}

.hero-content[b-n3ddifx8e5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.hero-title-section[b-n3ddifx8e5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hero-title[b-n3ddifx8e5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero-title i[b-n3ddifx8e5] {
    color: var(--accent-cyan);
    font-size: 1.5rem;
}

.hero-subtitle[b-n3ddifx8e5] {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.hero-actions[b-n3ddifx8e5] {
    display: flex;
    gap: 0.75rem;
}

/* ===== Modern Buttons ===== */
.btn-modern[b-n3ddifx8e5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-refresh[b-n3ddifx8e5] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-light);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-refresh:hover:not(:disabled)[b-n3ddifx8e5] {
    background: rgba(59, 130, 246, 0.25);
    border-color: var(--primary-blue);
    transform: translateY(-1px);
}

.btn-refresh:disabled[b-n3ddifx8e5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-n3ddifx8e5] {
    background: linear-gradient(135deg, var(--primary-blue), #2563eb);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-n3ddifx8e5] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-success[b-n3ddifx8e5] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.btn-success:hover:not(:disabled)[b-n3ddifx8e5] {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
}

.spin[b-n3ddifx8e5] {
    animation: spin-b-n3ddifx8e5 1s linear infinite;
}

@keyframes spin-b-n3ddifx8e5 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Time Filter Section ===== */
.time-filter-section[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-pills[b-n3ddifx8e5] {
    display: flex;
    gap: 0.375rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.25rem;
    border-radius: 10px;
}

.filter-pill[b-n3ddifx8e5] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.filter-pill:hover[b-n3ddifx8e5] {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.filter-pill.active[b-n3ddifx8e5] {
    background: linear-gradient(135deg, var(--primary-blue), #2563eb);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.date-range-picker[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    padding: 0.375rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.date-inputs[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-input[b-n3ddifx8e5] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    width: 130px;
}

.date-input:focus[b-n3ddifx8e5] {
    outline: none;
    border-color: var(--primary-blue);
}

.date-separator[b-n3ddifx8e5] {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.btn-apply[b-n3ddifx8e5] {
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.btn-apply:hover[b-n3ddifx8e5] {
    background: #2563eb;
}

.date-range-display[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.75rem;
}

.date-range-display i[b-n3ddifx8e5] {
    color: var(--primary-light);
}

/* ===== Alerts ===== */
.alert-modern[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}

.alert-error[b-n3ddifx8e5] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-error strong[b-n3ddifx8e5] {
    color: #f87171;
}

.alert-close[b-n3ddifx8e5] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
}

.alert-close:hover[b-n3ddifx8e5] {
    opacity: 1;
}

/* ===== Loading State ===== */
.loading-state[b-n3ddifx8e5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--text-muted);
}

.loading-spinner[b-n3ddifx8e5] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-n3ddifx8e5 1s linear infinite;
    margin-bottom: 1rem;
}

.loading-state-inline[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    justify-content: center;
    color: var(--text-muted);
}

.loading-spinner-sm[b-n3ddifx8e5] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-n3ddifx8e5 1s linear infinite;
}

.spinner-sm[b-n3ddifx8e5] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-n3ddifx8e5 0.8s linear infinite;
    display: inline-block;
}

/* ===== Metrics Grid ===== */
.metrics-grid[b-n3ddifx8e5] {
    display: grid;
    /* All seven summary cards stay on a single row; minmax(0,1fr) lets them shrink instead of
       wrapping to a second line (which left "Pending Alerts" misaligned on narrower viewports). */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1400px) {
    .metrics-grid[b-n3ddifx8e5] {
        gap: 0.6rem;
    }
}

/* Only on genuinely small screens do we let the cards scroll horizontally rather than wrap,
   so the row never breaks. */
@media (max-width: 768px) {
    .metrics-grid[b-n3ddifx8e5] {
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, 1fr);
        overflow-x: auto;
    }
}

.metric-card[b-n3ddifx8e5] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.metric-card:hover[b-n3ddifx8e5] {
    transform: translateY(-2px);
    border-color: var(--border-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.metric-card[b-n3ddifx8e5]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-accent, var(--primary-blue)), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.metric-card:hover[b-n3ddifx8e5]::before {
    opacity: 1;
}

.metric-primary[b-n3ddifx8e5] { --card-accent: var(--primary-blue); }
.metric-info[b-n3ddifx8e5] { --card-accent: #06b6d4; }
.metric-success[b-n3ddifx8e5] { --card-accent: #10b981; }
.metric-warning[b-n3ddifx8e5] { --card-accent: #f59e0b; }
.metric-danger[b-n3ddifx8e5] { --card-accent: #ef4444; }
.metric-alert[b-n3ddifx8e5] { --card-accent: #f59e0b; }

.metric-alert.has-alerts[b-n3ddifx8e5] {
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, var(--bg-card), rgba(239, 68, 68, 0.05));
}

.metric-icon[b-n3ddifx8e5] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent), black 20%));
    flex-shrink: 0;
}

.metric-content[b-n3ddifx8e5] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.metric-value[b-n3ddifx8e5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.metric-label[b-n3ddifx8e5] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.metric-trend[b-n3ddifx8e5] {
    font-size: 1rem;
    opacity: 0.8;
}

.metric-trend.positive[b-n3ddifx8e5] { color: #10b981; }
.metric-trend.negative[b-n3ddifx8e5] { color: #ef4444; }
.metric-trend.neutral[b-n3ddifx8e5] { color: var(--text-muted); }

.alert-pulse[b-n3ddifx8e5] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse-b-n3ddifx8e5 2s infinite;
}

@keyframes pulse-b-n3ddifx8e5 {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ===== Text Colors ===== */
.text-profit[b-n3ddifx8e5] { color: #10b981 !important; }
.text-loss[b-n3ddifx8e5] { color: #ef4444 !important; }
.text-success[b-n3ddifx8e5] { color: #10b981 !important; }
.text-warning[b-n3ddifx8e5] { color: #f59e0b !important; }
.text-danger[b-n3ddifx8e5] { color: #ef4444 !important; }
.text-info[b-n3ddifx8e5] { color: #06b6d4 !important; }
.text-muted[b-n3ddifx8e5] { color: var(--text-muted) !important; }

/* ===== Insights Section ===== */
.insights-section[b-n3ddifx8e5] {
    margin-bottom: 1.5rem;
}

.section-title[b-n3ddifx8e5] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.section-title i[b-n3ddifx8e5] {
    color: #f59e0b;
}

.insights-grid[b-n3ddifx8e5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 992px) {
    .insights-grid[b-n3ddifx8e5] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.insight-card[b-n3ddifx8e5] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

.insight-card.clickable[b-n3ddifx8e5] {
    cursor: pointer;
}

.insight-card.clickable:hover[b-n3ddifx8e5] {
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.insight-header[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.insight-header i[b-n3ddifx8e5] {
    font-size: 1rem;
}

.insight-value[b-n3ddifx8e5] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.insight-label[b-n3ddifx8e5] {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* ===== Trend Banner ===== */
.trend-banner[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 0;
}

.trend-positive[b-n3ddifx8e5] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.trend-negative[b-n3ddifx8e5] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.trend-icon[b-n3ddifx8e5] {
    font-size: 1.5rem;
}

.trend-positive .trend-icon[b-n3ddifx8e5] { color: #10b981; }
.trend-negative .trend-icon[b-n3ddifx8e5] { color: #ef4444; }

.trend-content[b-n3ddifx8e5] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.trend-value[b-n3ddifx8e5] {
    font-weight: 600;
}

.trend-change[b-n3ddifx8e5] {
    color: var(--text-muted);
    margin-left: 0.25rem;
}

/* ===== Chart Section ===== */
.chart-section[b-n3ddifx8e5] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.chart-header[b-n3ddifx8e5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.chart-title[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chart-title i[b-n3ddifx8e5] {
    color: var(--accent-cyan);
}

.chart-badge[b-n3ddifx8e5] {
    background: var(--primary-blue);
    color: white;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.chart-actions[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-hint[b-n3ddifx8e5] {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.chart-footnote[b-n3ddifx8e5] {
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.75rem;
    border-left: 3px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.chart-footnote i[b-n3ddifx8e5] {
    margin-right: 0.375rem;
}

.btn-chart-action[b-n3ddifx8e5] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s ease;
}

.btn-chart-action:hover[b-n3ddifx8e5] {
    border-color: var(--primary-blue);
    color: var(--primary-light);
}

.chart-container[b-n3ddifx8e5] {
    padding: 1rem;
    min-height: 320px;
}

.chart-wrapper[b-n3ddifx8e5] {
    min-height: 280px;
}

.chart-empty[b-n3ddifx8e5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
}

.chart-empty i[b-n3ddifx8e5] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.chart-empty p[b-n3ddifx8e5] {
    margin: 0;
    font-size: 0.9375rem;
}

.chart-empty small[b-n3ddifx8e5] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ===== Tabs Section ===== */
.tabs-section[b-n3ddifx8e5] {
    margin-bottom: 1.5rem;
}

.tabs-nav[b-n3ddifx8e5] {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-tertiary);
    padding: 0.25rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.tab-btn[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.tab-btn:hover[b-n3ddifx8e5] {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active[b-n3ddifx8e5] {
    background: var(--bg-card);
    color: var(--primary-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tab-btn.tab-highlight[b-n3ddifx8e5] {
    color: var(--primary-light);
}

.tab-btn.tab-highlight.active[b-n3ddifx8e5] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
}

.tab-badge[b-n3ddifx8e5] {
    background: #ef4444;
    color: white;
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

/* ===== Content Cards ===== */
.content-card[b-n3ddifx8e5] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.content-header[b-n3ddifx8e5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.content-header h3[b-n3ddifx8e5] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content-header h3 i[b-n3ddifx8e5] {
    font-size: 1rem;
}

.header-controls[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.control-select[b-n3ddifx8e5] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
}

.control-select:focus[b-n3ddifx8e5] {
    outline: none;
    border-color: var(--primary-blue);
}

.btn-icon[b-n3ddifx8e5] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-n3ddifx8e5] {
    border-color: var(--primary-blue);
    color: var(--primary-light);
    background: rgba(59, 130, 246, 0.1);
}

.content-body[b-n3ddifx8e5] {
    padding: 0;
}

/* ===== Flow Grid ===== */
.flow-grid[b-n3ddifx8e5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 992px) {
    .flow-grid[b-n3ddifx8e5] {
        grid-template-columns: 1fr;
    }
}

/* ===== Modern Table ===== */
.table-wrapper[b-n3ddifx8e5] {
    overflow-x: auto;
}

.modern-table[b-n3ddifx8e5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.modern-table thead[b-n3ddifx8e5] {
    background: var(--bg-tertiary);
}

.modern-table th[b-n3ddifx8e5] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.modern-table td[b-n3ddifx8e5] {
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.modern-table tbody tr[b-n3ddifx8e5] {
    transition: background 0.15s ease;
}

.modern-table tbody tr:hover[b-n3ddifx8e5] {
    background: var(--bg-tertiary);
}

.modern-table tbody tr:last-child td[b-n3ddifx8e5] {
    border-bottom: none;
}

/* Day-detail tables (HiFO/FIFO breakdown + per-trade detail): larger text, tighter padding —
   requested for readability on smaller monitors. Scoped so other tables are unaffected. */
.day-detail-table[b-n3ddifx8e5] {
    font-size: 0.9375rem;
}

.day-detail-table th[b-n3ddifx8e5] {
    padding: 0.4rem 0.625rem;
    font-size: 0.78rem;
}

.day-detail-table td[b-n3ddifx8e5] {
    padding: 0.4rem 0.625rem;
}

.day-detail-table .time-badge[b-n3ddifx8e5] {
    font-size: 0.8125rem;
}

.day-detail-table .bot-name[b-n3ddifx8e5] {
    font-size: 0.875rem;
}

/* Grouping super-header (Buy / Sell / Profit) sitting above the shortened column labels.
   Lets the sub-headers stay short (Bot / From / Tix …) so the wide breakdown table fits
   the screen instead of overflowing. */
.modern-table .group-header-row th[b-n3ddifx8e5] {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    border-bottom: none;
}

.modern-table th.group-header[b-n3ddifx8e5] {
    color: var(--text-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

/* Row states */
.row-highlight[b-n3ddifx8e5] {
    background: rgba(59, 130, 246, 0.05) !important;
}

.row-danger[b-n3ddifx8e5] {
    background: rgba(239, 68, 68, 0.1) !important;
}

.row-warning[b-n3ddifx8e5] {
    background: rgba(245, 158, 11, 0.1) !important;
}

.row-reviewed[b-n3ddifx8e5] {
    opacity: 0.6;
}

.row-profit[b-n3ddifx8e5] {
    background: rgba(16, 185, 129, 0.05) !important;
}

.row-loss[b-n3ddifx8e5] {
    background: rgba(239, 68, 68, 0.05) !important;
}

/* Special columns */
.rank-col[b-n3ddifx8e5] {
    width: 50px;
    text-align: center !important;
}

.check-col[b-n3ddifx8e5] {
    width: 40px;
}

.status-col[b-n3ddifx8e5] {
    width: 50px;
    text-align: center !important;
}

.actions-col[b-n3ddifx8e5] {
    width: 120px;
}

.rank-badge[b-n3ddifx8e5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 700;
}

.rank-1[b-n3ddifx8e5] { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #1f2937; }
.rank-2[b-n3ddifx8e5] { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: #1f2937; }
.rank-3[b-n3ddifx8e5] { background: linear-gradient(135deg, #d97706, #b45309); color: white; }

/* ===== Links & Badges ===== */
.trader-link[b-n3ddifx8e5],
.card-link[b-n3ddifx8e5] {
    color: var(--primary-light);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.trader-link:hover[b-n3ddifx8e5],
.card-link:hover[b-n3ddifx8e5] {
    color: var(--accent-cyan);
    text-decoration: underline;
}

.badge-subscriber[b-n3ddifx8e5] {
    color: #10b981;
    font-size: 0.6875rem;
    margin-left: 0.25rem;
}

.time-display[b-n3ddifx8e5] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.set-badge[b-n3ddifx8e5] {
    background: var(--bg-tertiary);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.status-badge[b-n3ddifx8e5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 0.6875rem;
}

.status-danger[b-n3ddifx8e5] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.status-warning[b-n3ddifx8e5] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.status-info[b-n3ddifx8e5] {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
}

.status-icon[b-n3ddifx8e5] {
    font-size: 1rem;
}

.status-reviewed[b-n3ddifx8e5] { color: #10b981; }

/* ===== Anomaly Table ===== */
.anomaly-table tbody tr[b-n3ddifx8e5] {
    cursor: pointer;
}

.anomaly-badge[b-n3ddifx8e5] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.badge-danger[b-n3ddifx8e5] { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.badge-warning[b-n3ddifx8e5] { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.badge-info[b-n3ddifx8e5] { background: rgba(6, 182, 212, 0.2); color: #22d3ee; }
.badge-primary[b-n3ddifx8e5] { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.badge-secondary[b-n3ddifx8e5] { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }

.anomaly-desc[b-n3ddifx8e5] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.card-tag[b-n3ddifx8e5] {
    display: inline-block;
    background: var(--bg-tertiary);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    color: var(--primary-light);
    text-decoration: none;
    margin-top: 0.25rem;
}

.card-tag:hover[b-n3ddifx8e5] {
    background: var(--primary-blue);
    color: white;
}

/* ===== Action Buttons ===== */
.btn-action[b-n3ddifx8e5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.btn-action.btn-success[b-n3ddifx8e5] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.btn-action.btn-success:hover[b-n3ddifx8e5] {
    background: #10b981;
    color: white;
}

.btn-action.btn-info[b-n3ddifx8e5] {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
    border-color: rgba(6, 182, 212, 0.3);
}

.btn-action.btn-info:hover[b-n3ddifx8e5] {
    background: #06b6d4;
    color: white;
}

.btn-action.btn-primary[b-n3ddifx8e5] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
}

.btn-action.btn-primary:hover[b-n3ddifx8e5] {
    background: #3b82f6;
    color: white;
}

/* ===== Toggle Switch ===== */
.toggle-switch[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.toggle-switch input[b-n3ddifx8e5] {
    display: none;
}

.toggle-slider[b-n3ddifx8e5] {
    width: 36px;
    height: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    position: relative;
    transition: all 0.2s ease;
}

.toggle-slider[b-n3ddifx8e5]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider[b-n3ddifx8e5] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.toggle-switch input:checked + .toggle-slider[b-n3ddifx8e5]::after {
    left: 18px;
    background: white;
}

.toggle-label[b-n3ddifx8e5] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.modern-check[b-n3ddifx8e5] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-blue);
}

/* ===== Daily Trades Summary Bar ===== */
.daily-summary-bar[b-n3ddifx8e5] {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.summary-stat[b-n3ddifx8e5] {
    text-align: center;
}

.summary-stat .stat-value[b-n3ddifx8e5] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-stat .stat-label[b-n3ddifx8e5] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.summary-badge[b-n3ddifx8e5] {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.summary-badge.badge-profit[b-n3ddifx8e5] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.summary-badge.badge-loss[b-n3ddifx8e5] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ===== Daily Trades Table ===== */
.time-badge[b-n3ddifx8e5] {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    font-family: monospace;
    /* Keep "2026-06-26 23:17" on a single line — the column has room, so let it auto-size. */
    white-space: nowrap;
}

/* Card name cell with a hover image popup (breakdown table). The image (CardImage) is only mounted
   after the first hover, so it isn't fetched for every row up front. */
.card-cell[b-n3ddifx8e5] {
    position: relative;
    cursor: help;
    display: inline-block;
}

.card-hover-pop[b-n3ddifx8e5] {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.25rem;
    z-index: 99999;
    pointer-events: none;
}

.card-cell:hover .card-hover-pop[b-n3ddifx8e5] {
    display: block;
}

.bot-name[b-n3ddifx8e5] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.top-cards-preview[b-n3ddifx8e5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.card-chip[b-n3ddifx8e5] {
    background: var(--bg-tertiary);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.625rem;
    color: var(--text-secondary);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-chip.more[b-n3ddifx8e5] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-light);
}

/* ===== Empty State ===== */
.empty-state[b-n3ddifx8e5] {
    text-align: center;
    padding: 3rem 2rem !important;
    color: var(--text-muted);
}

.empty-state i[b-n3ddifx8e5] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p[b-n3ddifx8e5] {
    margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .analytics-hero[b-n3ddifx8e5] {
        padding: 1rem;
    }

    .hero-content[b-n3ddifx8e5] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .hero-title[b-n3ddifx8e5] {
        font-size: 1.25rem;
    }

    .time-filter-section[b-n3ddifx8e5] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .filter-pills[b-n3ddifx8e5] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .date-range-picker[b-n3ddifx8e5] {
        flex-direction: column;
        width: 100%;
    }

    .date-inputs[b-n3ddifx8e5] {
        width: 100%;
    }

    .date-input[b-n3ddifx8e5] {
        flex: 1;
    }

    .btn-apply[b-n3ddifx8e5] {
        width: 100%;
        justify-content: center;
    }

    .tabs-nav[b-n3ddifx8e5] {
        flex-wrap: wrap;
    }

    .tab-btn span[b-n3ddifx8e5] {
        display: none;
    }

    .content-header[b-n3ddifx8e5] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .header-controls[b-n3ddifx8e5] {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .daily-summary-bar[b-n3ddifx8e5] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .summary-stat[b-n3ddifx8e5] {
        flex: 0 0 calc(33.333% - 0.75rem);
    }
}

/* ===== Day-detail sub-tabs (Daily Detail / Sale Breakdown) ===== */
.daily-subtabs[b-n3ddifx8e5] {
    margin: 1rem 1.25rem;
    width: fit-content;
}

/* HiFO/FIFO toggle in the Sale Breakdown header — a compact segmented control. */
.method-toggle[b-n3ddifx8e5] {
    padding: 0.15rem;
}

.method-toggle .tab-btn[b-n3ddifx8e5] {
    padding: 0.35rem 0.85rem;
}

/* ===== Custom legend for the Sales Profit chart ===== */
.sale-chart-legend[b-n3ddifx8e5] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0.25rem 0 0.5rem;
}

.sale-legend-item[b-n3ddifx8e5] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    border: none;
    color: var(--text-secondary, #9ca3af);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    transition: opacity 0.15s ease;
}

.sale-legend-item:hover[b-n3ddifx8e5] {
    color: var(--text-primary);
}

.sale-legend-item.is-hidden[b-n3ddifx8e5] {
    opacity: 0.4;
    text-decoration: line-through;
}

.sale-legend-dot[b-n3ddifx8e5] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

/* Vertical group separators in the Profit Breakdown table (before the Buy group and Profit group). */
.modern-table th.col-sep[b-n3ddifx8e5],
.modern-table td.col-sep[b-n3ddifx8e5] {
    border-left: 2px solid var(--border-color);
}

/* ===== Ledger rebuild dry-run report banner ===== */
.rebuild-report-banner[b-n3ddifx8e5] {
    background: var(--bg-card);
    border: 1px solid var(--accent-orange, #f97316);
    border-left: 4px solid var(--accent-orange, #f97316);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.rebuild-report-banner.rrb-error[b-n3ddifx8e5] {
    border-color: var(--danger, #ef4444);
    border-left-color: var(--danger, #ef4444);
    color: var(--text-primary);
}

.rebuild-report-banner.rrb-apply[b-n3ddifx8e5] {
    border-color: #10b981;
    border-left-color: #10b981;
}

.rrb-header[b-n3ddifx8e5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.btn-close-sm[b-n3ddifx8e5] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.btn-close-sm:hover[b-n3ddifx8e5] { color: var(--text-primary); }

.rrb-grid[b-n3ddifx8e5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.5rem 1.5rem;
}

.rrb-grid > div[b-n3ddifx8e5] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0;
}

.rrb-label[b-n3ddifx8e5] { color: var(--text-muted); }
.rrb-val[b-n3ddifx8e5] { color: var(--text-primary); font-weight: 600; }

.rrb-note[b-n3ddifx8e5] {
    margin: 0.6rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}


/* ===== Global Cost-Method Selector ===== */
.method-selector-section[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.method-selector-label[b-n3ddifx8e5] {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: help;
}

.method-selector[b-n3ddifx8e5] {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.method-pill[b-n3ddifx8e5] {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.method-pill:hover[b-n3ddifx8e5] {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.method-pill.active[b-n3ddifx8e5] {
    background: linear-gradient(135deg, #10b981 0%, #0ea5a5 100%);
    color: #05201a;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

/* ===== Profit Spotlight (headline number + method comparison) ===== */
.profit-spotlight[b-n3ddifx8e5] {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(320px, 2fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .profit-spotlight[b-n3ddifx8e5] {
        grid-template-columns: 1fr;
    }
}

.spotlight-card[b-n3ddifx8e5] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.5rem 1.75rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(16, 185, 129, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.25) 100%);
    overflow: hidden;
}

.spotlight-card.spotlight-loss[b-n3ddifx8e5] {
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(239, 68, 68, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.spotlight-label[b-n3ddifx8e5] {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.spotlight-value[b-n3ddifx8e5] {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.spotlight-sub[b-n3ddifx8e5] {
    color: var(--text-muted);
    font-size: 0.8rem;
    max-width: 42ch;
}

.method-compare-panel[b-n3ddifx8e5] {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.2) 100%);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.method-compare-header[b-n3ddifx8e5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: help;
}

.spread-badge[b-n3ddifx8e5] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.spread-badge.spread-tight[b-n3ddifx8e5] {
    color: #34d399;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
}

.spread-badge.spread-wide[b-n3ddifx8e5] {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}

.method-compare-grid[b-n3ddifx8e5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

@media (max-width: 700px) {
    .method-compare-grid[b-n3ddifx8e5] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.method-compare-cell[b-n3ddifx8e5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.method-compare-cell:hover[b-n3ddifx8e5] {
    border-color: rgba(16, 185, 129, 0.5);
    transform: translateY(-1px);
}

.method-compare-cell.active[b-n3ddifx8e5] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4) inset;
}

.mc-method[b-n3ddifx8e5] {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mc-value[b-n3ddifx8e5] {
    font-size: 1.05rem;
    font-weight: 700;
}
/* /Components/Pages/TradeAlerts/TradeAlerts.razor.rz.scp.css */
/* Trade Analytics Dashboard - Modern Dark Mode Styles */

/* ===== Base Dashboard Layout ===== */
.analytics-dashboard[b-tfwge1dfxe] {
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--bg-primary) 0%, #0c0f14 100%);
}

/* ===== Hero Section ===== */
.analytics-hero[b-tfwge1dfxe] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 2rem;
    margin: -1rem -1rem 1.5rem -1rem;
}

.hero-content[b-tfwge1dfxe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.hero-title-section[b-tfwge1dfxe] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hero-title[b-tfwge1dfxe] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero-title i[b-tfwge1dfxe] {
    color: var(--accent-cyan);
    font-size: 1.5rem;
}

.hero-subtitle[b-tfwge1dfxe] {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.hero-actions[b-tfwge1dfxe] {
    display: flex;
    gap: 0.75rem;
}

/* ===== Modern Buttons ===== */
.btn-modern[b-tfwge1dfxe] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-refresh[b-tfwge1dfxe] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-light);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-refresh:hover:not(:disabled)[b-tfwge1dfxe] {
    background: rgba(59, 130, 246, 0.25);
    border-color: var(--primary-blue);
    transform: translateY(-1px);
}

.btn-refresh:disabled[b-tfwge1dfxe] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-tfwge1dfxe] {
    background: linear-gradient(135deg, var(--primary-blue), #2563eb);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-tfwge1dfxe] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-success[b-tfwge1dfxe] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.btn-success:hover:not(:disabled)[b-tfwge1dfxe] {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
}

.spin[b-tfwge1dfxe] {
    animation: spin-b-tfwge1dfxe 1s linear infinite;
}

@keyframes spin-b-tfwge1dfxe {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Time Filter Section ===== */
.time-filter-section[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-pills[b-tfwge1dfxe] {
    display: flex;
    gap: 0.375rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.25rem;
    border-radius: 10px;
}

.filter-pill[b-tfwge1dfxe] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.filter-pill:hover[b-tfwge1dfxe] {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.filter-pill.active[b-tfwge1dfxe] {
    background: linear-gradient(135deg, var(--primary-blue), #2563eb);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.date-range-picker[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    padding: 0.375rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.date-inputs[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-input[b-tfwge1dfxe] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    width: 130px;
}

.date-input:focus[b-tfwge1dfxe] {
    outline: none;
    border-color: var(--primary-blue);
}

.date-separator[b-tfwge1dfxe] {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.btn-apply[b-tfwge1dfxe] {
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.btn-apply:hover[b-tfwge1dfxe] {
    background: #2563eb;
}

.date-range-display[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.75rem;
}

.date-range-display i[b-tfwge1dfxe] {
    color: var(--primary-light);
}

/* ===== Alerts ===== */
.alert-modern[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}

.alert-error[b-tfwge1dfxe] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-error strong[b-tfwge1dfxe] {
    color: #f87171;
}

.alert-close[b-tfwge1dfxe] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
}

.alert-close:hover[b-tfwge1dfxe] {
    opacity: 1;
}

/* ===== Loading State ===== */
.loading-state[b-tfwge1dfxe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--text-muted);
}

.loading-spinner[b-tfwge1dfxe] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-tfwge1dfxe 1s linear infinite;
    margin-bottom: 1rem;
}

.loading-state-inline[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    justify-content: center;
    color: var(--text-muted);
}

.loading-spinner-sm[b-tfwge1dfxe] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin-b-tfwge1dfxe 1s linear infinite;
}

.spinner-sm[b-tfwge1dfxe] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-tfwge1dfxe 0.8s linear infinite;
    display: inline-block;
}

/* ===== Metrics Grid ===== */
.metrics-grid[b-tfwge1dfxe] {
    display: grid;
    /* All seven summary cards stay on a single row; minmax(0,1fr) lets them shrink instead of
       wrapping to a second line (which left "Pending Alerts" misaligned on narrower viewports). */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1400px) {
    .metrics-grid[b-tfwge1dfxe] {
        gap: 0.6rem;
    }
}

/* Only on genuinely small screens do we let the cards scroll horizontally rather than wrap,
   so the row never breaks. */
@media (max-width: 768px) {
    .metrics-grid[b-tfwge1dfxe] {
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, 1fr);
        overflow-x: auto;
    }
}

.metric-card[b-tfwge1dfxe] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.metric-card:hover[b-tfwge1dfxe] {
    transform: translateY(-2px);
    border-color: var(--border-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.metric-card[b-tfwge1dfxe]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-accent, var(--primary-blue)), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.metric-card:hover[b-tfwge1dfxe]::before {
    opacity: 1;
}

.metric-primary[b-tfwge1dfxe] { --card-accent: var(--primary-blue); }
.metric-info[b-tfwge1dfxe] { --card-accent: #06b6d4; }
.metric-success[b-tfwge1dfxe] { --card-accent: #10b981; }
.metric-warning[b-tfwge1dfxe] { --card-accent: #f59e0b; }
.metric-danger[b-tfwge1dfxe] { --card-accent: #ef4444; }
.metric-alert[b-tfwge1dfxe] { --card-accent: #f59e0b; }

.metric-alert.has-alerts[b-tfwge1dfxe] {
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, var(--bg-card), rgba(239, 68, 68, 0.05));
}

.metric-icon[b-tfwge1dfxe] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent), black 20%));
    flex-shrink: 0;
}

.metric-content[b-tfwge1dfxe] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.metric-value[b-tfwge1dfxe] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.metric-label[b-tfwge1dfxe] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.metric-trend[b-tfwge1dfxe] {
    font-size: 1rem;
    opacity: 0.8;
}

.metric-trend.positive[b-tfwge1dfxe] { color: #10b981; }
.metric-trend.negative[b-tfwge1dfxe] { color: #ef4444; }
.metric-trend.neutral[b-tfwge1dfxe] { color: var(--text-muted); }

.alert-pulse[b-tfwge1dfxe] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse-b-tfwge1dfxe 2s infinite;
}

@keyframes pulse-b-tfwge1dfxe {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ===== Text Colors ===== */
.text-profit[b-tfwge1dfxe] { color: #10b981 !important; }
.text-loss[b-tfwge1dfxe] { color: #ef4444 !important; }
.text-success[b-tfwge1dfxe] { color: #10b981 !important; }
.text-warning[b-tfwge1dfxe] { color: #f59e0b !important; }
.text-danger[b-tfwge1dfxe] { color: #ef4444 !important; }
.text-info[b-tfwge1dfxe] { color: #06b6d4 !important; }
.text-muted[b-tfwge1dfxe] { color: var(--text-muted) !important; }

/* ===== Insights Section ===== */
.insights-section[b-tfwge1dfxe] {
    margin-bottom: 1.5rem;
}

.section-title[b-tfwge1dfxe] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.section-title i[b-tfwge1dfxe] {
    color: #f59e0b;
}

.insights-grid[b-tfwge1dfxe] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 992px) {
    .insights-grid[b-tfwge1dfxe] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.insight-card[b-tfwge1dfxe] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

.insight-card.clickable[b-tfwge1dfxe] {
    cursor: pointer;
}

.insight-card.clickable:hover[b-tfwge1dfxe] {
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.insight-header[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.insight-header i[b-tfwge1dfxe] {
    font-size: 1rem;
}

.insight-value[b-tfwge1dfxe] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.insight-label[b-tfwge1dfxe] {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* ===== Trend Banner ===== */
.trend-banner[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 0;
}

.trend-positive[b-tfwge1dfxe] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.trend-negative[b-tfwge1dfxe] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.trend-icon[b-tfwge1dfxe] {
    font-size: 1.5rem;
}

.trend-positive .trend-icon[b-tfwge1dfxe] { color: #10b981; }
.trend-negative .trend-icon[b-tfwge1dfxe] { color: #ef4444; }

.trend-content[b-tfwge1dfxe] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.trend-value[b-tfwge1dfxe] {
    font-weight: 600;
}

.trend-change[b-tfwge1dfxe] {
    color: var(--text-muted);
    margin-left: 0.25rem;
}

/* ===== Chart Section ===== */
.chart-section[b-tfwge1dfxe] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.chart-header[b-tfwge1dfxe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.chart-title[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chart-title i[b-tfwge1dfxe] {
    color: var(--accent-cyan);
}

.chart-badge[b-tfwge1dfxe] {
    background: var(--primary-blue);
    color: white;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.chart-actions[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-hint[b-tfwge1dfxe] {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.chart-footnote[b-tfwge1dfxe] {
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.75rem;
    border-left: 3px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.chart-footnote i[b-tfwge1dfxe] {
    margin-right: 0.375rem;
}

.btn-chart-action[b-tfwge1dfxe] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s ease;
}

.btn-chart-action:hover[b-tfwge1dfxe] {
    border-color: var(--primary-blue);
    color: var(--primary-light);
}

.chart-container[b-tfwge1dfxe] {
    padding: 1rem;
    min-height: 320px;
}

.chart-wrapper[b-tfwge1dfxe] {
    min-height: 280px;
}

.chart-empty[b-tfwge1dfxe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
}

.chart-empty i[b-tfwge1dfxe] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.chart-empty p[b-tfwge1dfxe] {
    margin: 0;
    font-size: 0.9375rem;
}

.chart-empty small[b-tfwge1dfxe] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ===== Tabs Section ===== */
.tabs-section[b-tfwge1dfxe] {
    margin-bottom: 1.5rem;
}

.tabs-nav[b-tfwge1dfxe] {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-tertiary);
    padding: 0.25rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.tab-btn[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.tab-btn:hover[b-tfwge1dfxe] {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active[b-tfwge1dfxe] {
    background: var(--bg-card);
    color: var(--primary-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tab-btn.tab-highlight[b-tfwge1dfxe] {
    color: var(--primary-light);
}

.tab-btn.tab-highlight.active[b-tfwge1dfxe] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
}

.tab-badge[b-tfwge1dfxe] {
    background: #ef4444;
    color: white;
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

/* ===== Content Cards ===== */
.content-card[b-tfwge1dfxe] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.content-header[b-tfwge1dfxe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.content-header h3[b-tfwge1dfxe] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content-header h3 i[b-tfwge1dfxe] {
    font-size: 1rem;
}

.header-controls[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.control-select[b-tfwge1dfxe] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
}

.control-select:focus[b-tfwge1dfxe] {
    outline: none;
    border-color: var(--primary-blue);
}

.btn-icon[b-tfwge1dfxe] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-tfwge1dfxe] {
    border-color: var(--primary-blue);
    color: var(--primary-light);
    background: rgba(59, 130, 246, 0.1);
}

.content-body[b-tfwge1dfxe] {
    padding: 0;
}

/* ===== Flow Grid ===== */
.flow-grid[b-tfwge1dfxe] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 992px) {
    .flow-grid[b-tfwge1dfxe] {
        grid-template-columns: 1fr;
    }
}

/* ===== Modern Table ===== */
.table-wrapper[b-tfwge1dfxe] {
    overflow-x: auto;
}

.modern-table[b-tfwge1dfxe] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.modern-table thead[b-tfwge1dfxe] {
    background: var(--bg-tertiary);
}

.modern-table th[b-tfwge1dfxe] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.modern-table td[b-tfwge1dfxe] {
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.modern-table tbody tr[b-tfwge1dfxe] {
    transition: background 0.15s ease;
}

.modern-table tbody tr:hover[b-tfwge1dfxe] {
    background: var(--bg-tertiary);
}

.modern-table tbody tr:last-child td[b-tfwge1dfxe] {
    border-bottom: none;
}

/* Day-detail tables (HiFO/FIFO breakdown + per-trade detail): larger text, tighter padding —
   requested for readability on smaller monitors. Scoped so other tables are unaffected. */
.day-detail-table[b-tfwge1dfxe] {
    font-size: 0.9375rem;
}

.day-detail-table th[b-tfwge1dfxe] {
    padding: 0.4rem 0.625rem;
    font-size: 0.78rem;
}

.day-detail-table td[b-tfwge1dfxe] {
    padding: 0.4rem 0.625rem;
}

.day-detail-table .time-badge[b-tfwge1dfxe] {
    font-size: 0.8125rem;
}

.day-detail-table .bot-name[b-tfwge1dfxe] {
    font-size: 0.875rem;
}

/* Grouping super-header (Buy / Sell / Profit) sitting above the shortened column labels.
   Lets the sub-headers stay short (Bot / From / Tix …) so the wide breakdown table fits
   the screen instead of overflowing. */
.modern-table .group-header-row th[b-tfwge1dfxe] {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    border-bottom: none;
}

.modern-table th.group-header[b-tfwge1dfxe] {
    color: var(--text-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

/* Row states */
.row-highlight[b-tfwge1dfxe] {
    background: rgba(59, 130, 246, 0.05) !important;
}

.row-danger[b-tfwge1dfxe] {
    background: rgba(239, 68, 68, 0.1) !important;
}

.row-warning[b-tfwge1dfxe] {
    background: rgba(245, 158, 11, 0.1) !important;
}

.row-reviewed[b-tfwge1dfxe] {
    opacity: 0.6;
}

.row-profit[b-tfwge1dfxe] {
    background: rgba(16, 185, 129, 0.05) !important;
}

.row-loss[b-tfwge1dfxe] {
    background: rgba(239, 68, 68, 0.05) !important;
}

/* Special columns */
.rank-col[b-tfwge1dfxe] {
    width: 50px;
    text-align: center !important;
}

.check-col[b-tfwge1dfxe] {
    width: 40px;
}

.status-col[b-tfwge1dfxe] {
    width: 50px;
    text-align: center !important;
}

.actions-col[b-tfwge1dfxe] {
    width: 120px;
}

.rank-badge[b-tfwge1dfxe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 700;
}

.rank-1[b-tfwge1dfxe] { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #1f2937; }
.rank-2[b-tfwge1dfxe] { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: #1f2937; }
.rank-3[b-tfwge1dfxe] { background: linear-gradient(135deg, #d97706, #b45309); color: white; }

/* ===== Links & Badges ===== */
.trader-link[b-tfwge1dfxe],
.card-link[b-tfwge1dfxe] {
    color: var(--primary-light);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.trader-link:hover[b-tfwge1dfxe],
.card-link:hover[b-tfwge1dfxe] {
    color: var(--accent-cyan);
    text-decoration: underline;
}

.badge-subscriber[b-tfwge1dfxe] {
    color: #10b981;
    font-size: 0.6875rem;
    margin-left: 0.25rem;
}

.time-display[b-tfwge1dfxe] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.set-badge[b-tfwge1dfxe] {
    background: var(--bg-tertiary);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.status-badge[b-tfwge1dfxe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 0.6875rem;
}

.status-danger[b-tfwge1dfxe] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.status-warning[b-tfwge1dfxe] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.status-info[b-tfwge1dfxe] {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
}

.status-icon[b-tfwge1dfxe] {
    font-size: 1rem;
}

.status-reviewed[b-tfwge1dfxe] { color: #10b981; }

/* ===== Anomaly Table ===== */
.anomaly-table tbody tr[b-tfwge1dfxe] {
    cursor: pointer;
}

.anomaly-badge[b-tfwge1dfxe] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.badge-danger[b-tfwge1dfxe] { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.badge-warning[b-tfwge1dfxe] { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.badge-info[b-tfwge1dfxe] { background: rgba(6, 182, 212, 0.2); color: #22d3ee; }
.badge-primary[b-tfwge1dfxe] { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.badge-secondary[b-tfwge1dfxe] { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }

.anomaly-desc[b-tfwge1dfxe] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.card-tag[b-tfwge1dfxe] {
    display: inline-block;
    background: var(--bg-tertiary);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    color: var(--primary-light);
    text-decoration: none;
    margin-top: 0.25rem;
}

.card-tag:hover[b-tfwge1dfxe] {
    background: var(--primary-blue);
    color: white;
}

/* ===== Action Buttons ===== */
.btn-action[b-tfwge1dfxe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.btn-action.btn-success[b-tfwge1dfxe] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.btn-action.btn-success:hover[b-tfwge1dfxe] {
    background: #10b981;
    color: white;
}

.btn-action.btn-info[b-tfwge1dfxe] {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
    border-color: rgba(6, 182, 212, 0.3);
}

.btn-action.btn-info:hover[b-tfwge1dfxe] {
    background: #06b6d4;
    color: white;
}

.btn-action.btn-primary[b-tfwge1dfxe] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
}

.btn-action.btn-primary:hover[b-tfwge1dfxe] {
    background: #3b82f6;
    color: white;
}

/* ===== Toggle Switch ===== */
.toggle-switch[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.toggle-switch input[b-tfwge1dfxe] {
    display: none;
}

.toggle-slider[b-tfwge1dfxe] {
    width: 36px;
    height: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    position: relative;
    transition: all 0.2s ease;
}

.toggle-slider[b-tfwge1dfxe]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider[b-tfwge1dfxe] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.toggle-switch input:checked + .toggle-slider[b-tfwge1dfxe]::after {
    left: 18px;
    background: white;
}

.toggle-label[b-tfwge1dfxe] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.modern-check[b-tfwge1dfxe] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-blue);
}

/* ===== Daily Trades Summary Bar ===== */
.daily-summary-bar[b-tfwge1dfxe] {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.summary-stat[b-tfwge1dfxe] {
    text-align: center;
}

.summary-stat .stat-value[b-tfwge1dfxe] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-stat .stat-label[b-tfwge1dfxe] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.summary-badge[b-tfwge1dfxe] {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.summary-badge.badge-profit[b-tfwge1dfxe] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.summary-badge.badge-loss[b-tfwge1dfxe] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ===== Daily Trades Table ===== */
.time-badge[b-tfwge1dfxe] {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    font-family: monospace;
    /* Keep "2026-06-26 23:17" on a single line — the column has room, so let it auto-size. */
    white-space: nowrap;
}

/* Card name cell with a hover image popup (breakdown table). The image (CardImage) is only mounted
   after the first hover, so it isn't fetched for every row up front. */
.card-cell[b-tfwge1dfxe] {
    position: relative;
    cursor: help;
    display: inline-block;
}

.card-hover-pop[b-tfwge1dfxe] {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.25rem;
    z-index: 99999;
    pointer-events: none;
}

.card-cell:hover .card-hover-pop[b-tfwge1dfxe] {
    display: block;
}

.bot-name[b-tfwge1dfxe] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.top-cards-preview[b-tfwge1dfxe] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.card-chip[b-tfwge1dfxe] {
    background: var(--bg-tertiary);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.625rem;
    color: var(--text-secondary);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-chip.more[b-tfwge1dfxe] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-light);
}

/* ===== Empty State ===== */
.empty-state[b-tfwge1dfxe] {
    text-align: center;
    padding: 3rem 2rem !important;
    color: var(--text-muted);
}

.empty-state i[b-tfwge1dfxe] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p[b-tfwge1dfxe] {
    margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .analytics-hero[b-tfwge1dfxe] {
        padding: 1rem;
    }

    .hero-content[b-tfwge1dfxe] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .hero-title[b-tfwge1dfxe] {
        font-size: 1.25rem;
    }

    .time-filter-section[b-tfwge1dfxe] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .filter-pills[b-tfwge1dfxe] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .date-range-picker[b-tfwge1dfxe] {
        flex-direction: column;
        width: 100%;
    }

    .date-inputs[b-tfwge1dfxe] {
        width: 100%;
    }

    .date-input[b-tfwge1dfxe] {
        flex: 1;
    }

    .btn-apply[b-tfwge1dfxe] {
        width: 100%;
        justify-content: center;
    }

    .tabs-nav[b-tfwge1dfxe] {
        flex-wrap: wrap;
    }

    .tab-btn span[b-tfwge1dfxe] {
        display: none;
    }

    .content-header[b-tfwge1dfxe] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .header-controls[b-tfwge1dfxe] {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .daily-summary-bar[b-tfwge1dfxe] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .summary-stat[b-tfwge1dfxe] {
        flex: 0 0 calc(33.333% - 0.75rem);
    }
}

/* ===== Day-detail sub-tabs (Daily Detail / Sale Breakdown) ===== */
.daily-subtabs[b-tfwge1dfxe] {
    margin: 1rem 1.25rem;
    width: fit-content;
}

/* HiFO/FIFO toggle in the Sale Breakdown header — a compact segmented control. */
.method-toggle[b-tfwge1dfxe] {
    padding: 0.15rem;
}

.method-toggle .tab-btn[b-tfwge1dfxe] {
    padding: 0.35rem 0.85rem;
}

/* ===== Custom legend for the Sales Profit chart ===== */
.sale-chart-legend[b-tfwge1dfxe] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0.25rem 0 0.5rem;
}

.sale-legend-item[b-tfwge1dfxe] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    border: none;
    color: var(--text-secondary, #9ca3af);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    transition: opacity 0.15s ease;
}

.sale-legend-item:hover[b-tfwge1dfxe] {
    color: var(--text-primary);
}

.sale-legend-item.is-hidden[b-tfwge1dfxe] {
    opacity: 0.4;
    text-decoration: line-through;
}

.sale-legend-dot[b-tfwge1dfxe] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

/* Vertical group separators in the Profit Breakdown table (before the Buy group and Profit group). */
.modern-table th.col-sep[b-tfwge1dfxe],
.modern-table td.col-sep[b-tfwge1dfxe] {
    border-left: 2px solid var(--border-color);
}

/* ===== Ledger rebuild dry-run report banner ===== */
.rebuild-report-banner[b-tfwge1dfxe] {
    background: var(--bg-card);
    border: 1px solid var(--accent-orange, #f97316);
    border-left: 4px solid var(--accent-orange, #f97316);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.rebuild-report-banner.rrb-error[b-tfwge1dfxe] {
    border-color: var(--danger, #ef4444);
    border-left-color: var(--danger, #ef4444);
    color: var(--text-primary);
}

.rebuild-report-banner.rrb-apply[b-tfwge1dfxe] {
    border-color: #10b981;
    border-left-color: #10b981;
}

.rrb-header[b-tfwge1dfxe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.btn-close-sm[b-tfwge1dfxe] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.btn-close-sm:hover[b-tfwge1dfxe] { color: var(--text-primary); }

.rrb-grid[b-tfwge1dfxe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.5rem 1.5rem;
}

.rrb-grid > div[b-tfwge1dfxe] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0;
}

.rrb-label[b-tfwge1dfxe] { color: var(--text-muted); }
.rrb-val[b-tfwge1dfxe] { color: var(--text-primary); font-weight: 600; }

.rrb-note[b-tfwge1dfxe] {
    margin: 0.6rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}


/* ===== Global Cost-Method Selector ===== */
.method-selector-section[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.method-selector-label[b-tfwge1dfxe] {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: help;
}

.method-selector[b-tfwge1dfxe] {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.method-pill[b-tfwge1dfxe] {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.method-pill:hover[b-tfwge1dfxe] {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.method-pill.active[b-tfwge1dfxe] {
    background: linear-gradient(135deg, #10b981 0%, #0ea5a5 100%);
    color: #05201a;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

/* ===== Profit Spotlight (headline number + method comparison) ===== */
.profit-spotlight[b-tfwge1dfxe] {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(320px, 2fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .profit-spotlight[b-tfwge1dfxe] {
        grid-template-columns: 1fr;
    }
}

.spotlight-card[b-tfwge1dfxe] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.5rem 1.75rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(16, 185, 129, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.25) 100%);
    overflow: hidden;
}

.spotlight-card.spotlight-loss[b-tfwge1dfxe] {
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(239, 68, 68, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.spotlight-label[b-tfwge1dfxe] {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.spotlight-value[b-tfwge1dfxe] {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.spotlight-sub[b-tfwge1dfxe] {
    color: var(--text-muted);
    font-size: 0.8rem;
    max-width: 42ch;
}

.method-compare-panel[b-tfwge1dfxe] {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.2) 100%);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.method-compare-header[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: help;
}

.spread-badge[b-tfwge1dfxe] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.spread-badge.spread-tight[b-tfwge1dfxe] {
    color: #34d399;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
}

.spread-badge.spread-wide[b-tfwge1dfxe] {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}

.method-compare-grid[b-tfwge1dfxe] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

@media (max-width: 700px) {
    .method-compare-grid[b-tfwge1dfxe] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.method-compare-cell[b-tfwge1dfxe] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.method-compare-cell:hover[b-tfwge1dfxe] {
    border-color: rgba(16, 185, 129, 0.5);
    transform: translateY(-1px);
}

.method-compare-cell.active[b-tfwge1dfxe] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4) inset;
}

.mc-method[b-tfwge1dfxe] {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mc-value[b-tfwge1dfxe] {
    font-size: 1.05rem;
    font-weight: 700;
}


/* ===== Suspicious Trades: KPI strip ===== */
.su-kpi-strip[b-tfwge1dfxe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.su-kpi[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.25);
}

.su-kpi i[b-tfwge1dfxe] { font-size: 1.1rem; }
.su-kpi-good i[b-tfwge1dfxe] { color: #34d399; }
.su-kpi-warn i[b-tfwge1dfxe] { color: #fbbf24; }
.su-kpi-bad i[b-tfwge1dfxe] { color: #f87171; }

.su-kpi-value[b-tfwge1dfxe] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
}

.su-kpi-bad .su-kpi-value[b-tfwge1dfxe] { color: #f87171; }
.su-kpi-warn .su-kpi-value[b-tfwge1dfxe] { color: #fbbf24; }

.su-kpi-label[b-tfwge1dfxe] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== Suspicious user cards ===== */
.su-card[b-tfwge1dfxe] {
    border: 1px solid var(--border-color);
    border-left: 4px solid #fbbf24;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.22) 100%);
    margin-bottom: 1rem;
    overflow: hidden;
}

.su-card-high[b-tfwge1dfxe] { border-left-color: #ef4444; }

.su-card-header[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem 0.5rem 1.25rem;
    cursor: pointer;
}

.su-rank[b-tfwge1dfxe] {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-muted);
    min-width: 2.2rem;
}

.su-identity[b-tfwge1dfxe] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.su-username[b-tfwge1dfxe] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.su-username a[b-tfwge1dfxe] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}

.su-username a:hover[b-tfwge1dfxe] { color: #60a5fa; }

.su-badge[b-tfwge1dfxe] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.su-badge-black[b-tfwge1dfxe] { color: #f87171; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); }
.su-badge-new[b-tfwge1dfxe] { color: #93c5fd; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.4); }
.su-badge-alerts[b-tfwge1dfxe] { color: #fbbf24; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.4); }
.su-badge-withdrawn[b-tfwge1dfxe] { color: #fbbf24; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.4); }

.su-evidence[b-tfwge1dfxe] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.su-chip[b-tfwge1dfxe] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.25rem 0.6rem;
    cursor: help;
}

.su-chip i[b-tfwge1dfxe] { color: #fbbf24; }

.su-score[b-tfwge1dfxe] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    min-width: 130px;
    cursor: help;
}

.su-score-bar[b-tfwge1dfxe] {
    width: 130px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.su-score-fill[b-tfwge1dfxe] {
    height: 100%;
    border-radius: 999px;
}

.su-score-fill.fill-medium[b-tfwge1dfxe] { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.su-score-fill.fill-high[b-tfwge1dfxe] { background: linear-gradient(90deg, #ef4444, #f87171); }

.su-score-value[b-tfwge1dfxe] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.su-score-max[b-tfwge1dfxe] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

.su-expand-icon[b-tfwge1dfxe] { color: var(--text-muted); }

.su-actions[b-tfwge1dfxe] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem 1rem 4.45rem;
}

.btn-danger-outline[b-tfwge1dfxe] {
    background: transparent;
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.btn-danger-outline:hover[b-tfwge1dfxe] {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

/* ===== Decision panel ===== */
.su-detail[b-tfwge1dfxe] {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.18);
}

.su-facts[b-tfwge1dfxe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
}

.su-fact[b-tfwge1dfxe] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.25);
    cursor: help;
}

.su-fact-label[b-tfwge1dfxe] {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.su-fact-value[b-tfwge1dfxe] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.su-chart[b-tfwge1dfxe] {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
}

.su-subsection h4[b-tfwge1dfxe] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.su-mini-table td[b-tfwge1dfxe], .su-mini-table th[b-tfwge1dfxe] {
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
}

.su-alert-row[b-tfwge1dfxe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    background: rgba(0, 0, 0, 0.25);
}

.su-alert-desc[b-tfwge1dfxe] {
    flex: 1;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.su-all-clear i[b-tfwge1dfxe] { font-size: 2.2rem; }
.su-all-clear small[b-tfwge1dfxe] { color: var(--text-muted); }
/* /Components/Pages/Trades/PublicVideoPlayer.razor.rz.scp.css */
.video-player-container[b-ox2obkm51b] {
    background: #1e1e2d;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Header */
.player-header[b-ox2obkm51b] {
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand[b-ox2obkm51b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-icon[b-ox2obkm51b] {
    font-size: 1.5rem;
}

.brand-text[b-ox2obkm51b] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
}

/* Main Content */
.player-content[b-ox2obkm51b] {
    padding: 0;
}

/* Loading State */
.loading-state[b-ox2obkm51b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: #a0a0a0;
}

/* Error State */
.error-state[b-ox2obkm51b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-icon[b-ox2obkm51b] {
    font-size: 4rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

.error-state h3[b-ox2obkm51b] {
    color: #fff;
    margin-bottom: 0.5rem;
}

/* Video Player */
.video-wrapper[b-ox2obkm51b] {
    background: #000;
}

.video-player[b-ox2obkm51b] {
    width: 100%;
    max-height: 70vh;
    display: block;
}

/* Recording Info */
.recording-info[b-ox2obkm51b] {
    padding: 1.25rem 1.5rem;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.info-title[b-ox2obkm51b] {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.info-details[b-ox2obkm51b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: #a0a0a0;
    font-size: 0.875rem;
}

.info-item[b-ox2obkm51b] {
    display: inline-flex;
    align-items: center;
}

.info-separator[b-ox2obkm51b] {
    color: #555;
}

/* Footer */
.player-footer[b-ox2obkm51b] {
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content[b-ox2obkm51b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-text[b-ox2obkm51b] {
    color: #a0a0a0;
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 576px) {
    .player-header[b-ox2obkm51b],
    .recording-info[b-ox2obkm51b],
    .player-footer[b-ox2obkm51b] {
        padding: 1rem;
    }

    .footer-content[b-ox2obkm51b] {
        flex-direction: column;
        text-align: center;
    }

    .info-details[b-ox2obkm51b] {
        font-size: 0.8rem;
    }

    .brand-text[b-ox2obkm51b] {
        font-size: 1.1rem;
    }
}
/* /Components/Pages/Trades/UserTrades.razor.rz.scp.css */
/* Modern Dark Mode Search Container */
.modern-search-container[b-guj3mblhln] {
    margin-bottom: 1rem;
}

/* Search Hero Section */
.search-hero[b-guj3mblhln] {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-orange);
}

.search-main[b-guj3mblhln] {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.search-actions[b-guj3mblhln] {
    display: flex;
    gap: 0.375rem;
    align-items: stretch;
}

/* Modern Search Input */
.search-input-container[b-guj3mblhln] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-guj3mblhln] {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    z-index: 2;
    transition: color 0.2s ease;
}

.search-input[b-guj3mblhln] {
    width: 100%;
    height: 2.5rem;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 2.25rem;
    font-size: 0.85rem;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.search-input:focus[b-guj3mblhln] {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15);
    color: #ffffff !important;
}

.search-input:focus + .search-icon[b-guj3mblhln] {
    color: var(--accent-orange);
}

.search-input[b-guj3mblhln]::placeholder {
    color: var(--text-muted);
}

.search-clear-btn[b-guj3mblhln] {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 2;
}

.search-clear-btn:hover[b-guj3mblhln] {
    color: var(--danger);
    background: rgba(220, 38, 38, 0.1);
}

/* Action Buttons */
.search-action-btn[b-guj3mblhln] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    min-height: 2.5rem;
}

.search-action-btn:hover[b-guj3mblhln] {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.search-action-btn.has-filters[b-guj3mblhln] {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: white;
}

.search-help-btn[b-guj3mblhln],
.search-btn[b-guj3mblhln] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0 0.75rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    min-width: 2.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.search-help-btn:hover[b-guj3mblhln] {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.search-btn[b-guj3mblhln] {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: white;
}

.search-btn:hover[b-guj3mblhln] {
    background: #ea580c;
    border-color: #ea580c;
}

/* Filter Chips */
.filter-chips-container[b-guj3mblhln] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.filter-chips[b-guj3mblhln] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

.filter-chip[b-guj3mblhln] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.25rem 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.filter-chip:hover[b-guj3mblhln] {
    border-color: var(--primary-blue);
}

.chip-icon[b-guj3mblhln] {
    color: var(--primary-blue);
    font-size: 0.7rem;
}

.chip-label[b-guj3mblhln] {
    font-weight: 600;
    color: var(--text-muted);
}

.chip-value[b-guj3mblhln] {
    color: var(--text-primary);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-remove[b-guj3mblhln] {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.125rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    margin-left: 0.125rem;
}

.chip-remove:hover[b-guj3mblhln] {
    background: rgba(220, 38, 38, 0.1);
}

.clear-all-filters[b-guj3mblhln] {
    background: var(--danger);
    color: white;
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.clear-all-filters:hover[b-guj3mblhln] {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* Search Help Panel */
.search-help-panel[b-guj3mblhln] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
    border-left: 3px solid var(--primary-blue);
}

.search-help-content[b-guj3mblhln] {
    padding: 1rem;
}

.search-help-title[b-guj3mblhln] {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

.search-help-examples[b-guj3mblhln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
}

.help-example[b-guj3mblhln] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--primary-blue);
}

.help-example code[b-guj3mblhln] {
    background: var(--primary-blue);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-family: 'Fira Code', monospace;
    font-weight: 500;
}

.help-example span[b-guj3mblhln] {
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* Advanced Filters Panel */
.advanced-filters[b-guj3mblhln] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.advanced-filters.show[b-guj3mblhln] {
    max-height: 300px;
    opacity: 1;
}

.advanced-filters-content[b-guj3mblhln] {
    padding: 1rem;
}

.filters-grid[b-guj3mblhln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.filter-group[b-guj3mblhln] {
    display: flex;
    flex-direction: column;
}

.filter-label[b-guj3mblhln] {
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
}

.filter-input[b-guj3mblhln],
.filter-select[b-guj3mblhln] {
    height: 2.25rem;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0 0.75rem;
    font-size: 0.8rem;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.filter-input:focus[b-guj3mblhln],
.filter-select:focus[b-guj3mblhln] {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    color: #ffffff !important;
}

.filter-input[b-guj3mblhln]::placeholder {
    color: var(--text-muted);
}

.filter-actions[b-guj3mblhln] {
    display: flex;
    align-items: flex-end;
}

.filter-buttons[b-guj3mblhln] {
    display: flex;
    gap: 0.375rem;
    width: 100%;
}

.btn-modern[b-guj3mblhln] {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 2.25rem;
    flex: 1;
}

.btn-modern.btn-primary[b-guj3mblhln] {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}

.btn-modern.btn-primary:hover[b-guj3mblhln] {
    background: #2563eb;
}

.btn-modern.btn-secondary[b-guj3mblhln] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-modern.btn-secondary:hover[b-guj3mblhln] {
    background: var(--bg-secondary);
}

/* Trades Table */
.trades-table[b-guj3mblhln] {
    font-size: 0.75rem;
    table-layout: fixed;
    width: 100%;
}

.trades-table th[b-guj3mblhln],
.trades-table td[b-guj3mblhln] {
    padding: 0.375rem 0.5rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.trade-row[b-guj3mblhln] {
    border-left: 3px solid transparent;
    transition: border-left-color 0.2s ease;
}

.trade-row:hover[b-guj3mblhln] {
    border-left-color: var(--primary-blue);
}

.trade-row.table-active[b-guj3mblhln] {
    border-left-color: var(--accent-orange);
    background-color: rgba(234, 88, 12, 0.1);
}

.trade-date[b-guj3mblhln] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.75rem;
}

.trade-user-mobile[b-guj3mblhln] {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.trade-summary-mobile[b-guj3mblhln] {
    margin-top: 0.125rem;
}

.trade-badge[b-guj3mblhln] {
    font-size: 0.6rem;
    padding: 0.125rem 0.25rem;
    line-height: 1;
}

/* Trade Type Badge */
.trade-type-badge[b-guj3mblhln] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.trade-type-badge.internal[b-guj3mblhln] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.trade-type-badge.external-family[b-guj3mblhln] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.trade-type-badge.external[b-guj3mblhln] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.trade-type-badge.goatbots[b-guj3mblhln] {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* List View Table - Dark Mode */
.trades-list-wrapper[b-guj3mblhln] {
    background: var(--bg-card) !important;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color) !important;
}

.trades-list-table[b-guj3mblhln] {
    font-size: 0.85rem;
    margin-bottom: 0;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.trades-list-table thead[b-guj3mblhln] {
    background: var(--bg-tertiary) !important;
}

.trades-list-table thead th[b-guj3mblhln] {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: none !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.6rem 0.5rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.trades-list-table tbody[b-guj3mblhln] {
    background: var(--bg-card) !important;
}

.trades-list-table tbody tr[b-guj3mblhln] {
    background: var(--bg-card) !important;
    transition: all 0.15s ease;
}

.trades-list-table tbody tr:nth-child(even)[b-guj3mblhln] {
    background: var(--bg-secondary) !important;
}

.trades-list-table tbody .trade-list-row[b-guj3mblhln] {
    border-left: 3px solid transparent;
}

.trades-list-table tbody .trade-list-row:hover[b-guj3mblhln] {
    border-left-color: var(--primary-blue);
    background: var(--bg-tertiary) !important;
}

.trades-list-table tbody .trade-list-row.table-active[b-guj3mblhln] {
    border-left-color: var(--accent-orange);
    background: rgba(249, 115, 22, 0.1) !important;
}

.trades-list-table td[b-guj3mblhln] {
    padding: 0.55rem 0.5rem !important;
    vertical-align: middle;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent !important;
    color: var(--text-primary) !important;
}

.list-datetime-cell[b-guj3mblhln] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted) !important;
    white-space: nowrap;
}

.list-bot-cell[b-guj3mblhln],
.list-user-cell[b-guj3mblhln] {
    font-size: 0.8rem;
}

/* Compact badges for list view */
.bot-badge-compact[b-guj3mblhln] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.user-badge-compact[b-guj3mblhln] {
    background: rgba(249, 115, 22, 0.15);
    color: #fb923c;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Stat cells for list view */
.list-stat-cell[b-guj3mblhln] {
    font-size: 0.8rem;
    font-weight: 600;
}

.list-stat-cell.incoming[b-guj3mblhln] {
    color: #4ade80;
}

.list-stat-cell.outgoing[b-guj3mblhln] {
    color: #f87171;
}

.list-stat-cell.tickets[b-guj3mblhln] {
    color: #a78bfa;
}

.list-stat-cell.value[b-guj3mblhln] {
    color: #fbbf24;
}

/* Mini trade type badges for list view */
.trade-type-mini[b-guj3mblhln] {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.trade-type-mini.internal[b-guj3mblhln] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.trade-type-mini.external-family[b-guj3mblhln] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.trade-type-mini.external[b-guj3mblhln] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.trade-type-mini.goatbots[b-guj3mblhln] {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

/* Legacy highlight styles - keeping for card view */
.bot-highlight[b-guj3mblhln] {
    background: rgba(34, 197, 94, 0.1);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem !important;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.bot-highlight i[b-guj3mblhln] {
    color: #22c55e;
}

.user-highlight[b-guj3mblhln] {
    background: rgba(249, 115, 22, 0.1);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem !important;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.user-highlight i[b-guj3mblhln] {
    color: #f97316;
}

/* Card Autocomplete Wrapper */
.card-autocomplete-wrapper[b-guj3mblhln] {
    position: relative;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .search-hero[b-guj3mblhln] {
        padding: 0.75rem;
    }

    .search-main[b-guj3mblhln] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .search-actions[b-guj3mblhln] {
        justify-content: center;
        order: -1;
    }

    .search-input[b-guj3mblhln] {
        height: 2.5rem;
        font-size: 0.85rem;
    }

    .filter-chips[b-guj3mblhln] {
        gap: 0.25rem;
    }

    .filter-chip[b-guj3mblhln] {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    .chip-value[b-guj3mblhln] {
        max-width: 80px;
    }

    .search-help-examples[b-guj3mblhln] {
        grid-template-columns: 1fr;
        gap: 0.375rem;
    }

    .help-example[b-guj3mblhln] {
        padding: 0.5rem;
    }

    .filters-grid[b-guj3mblhln] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .advanced-filters-content[b-guj3mblhln] {
        padding: 0.75rem;
    }

    .filter-buttons[b-guj3mblhln] {
        flex-direction: column;
    }

    .trade-type-badge[b-guj3mblhln] {
        padding: 0.125rem 0.375rem;
        font-size: 0.55rem;
    }

    .trades-list-table[b-guj3mblhln] {
        font-size: 0.75rem;
    }

    .trades-list-table thead th[b-guj3mblhln] {
        padding: 0.375rem;
        font-size: 0.65rem;
    }

    .trades-list-table td[b-guj3mblhln] {
        padding: 0.25rem 0.375rem;
    }

    .list-datetime-cell[b-guj3mblhln] {
        font-size: 0.65rem;
        min-width: 100px;
    }

    .list-bot-cell[b-guj3mblhln],
    .list-user-cell[b-guj3mblhln] {
        font-size: 0.65rem;
    }

    .bot-highlight[b-guj3mblhln],
    .user-highlight[b-guj3mblhln] {
        padding: 0.2rem 0.375rem !important;
    }
}

@media (max-width: 576px) {
    .search-hero[b-guj3mblhln] {
        padding: 0.625rem;
    }

    .search-input[b-guj3mblhln] {
        height: 2.25rem;
        padding: 0 2rem;
        font-size: 0.8rem;
    }

    .search-icon[b-guj3mblhln] {
        left: 0.5rem;
        font-size: 0.8rem;
    }

    .search-clear-btn[b-guj3mblhln] {
        right: 0.5rem;
        font-size: 0.8rem;
    }

    .search-action-btn[b-guj3mblhln],
    .search-help-btn[b-guj3mblhln],
    .search-btn[b-guj3mblhln] {
        min-height: 2.25rem;
        padding: 0 0.625rem;
        font-size: 0.75rem;
    }

    .search-help-btn[b-guj3mblhln] {
        min-width: 2.25rem;
        padding: 0 0.375rem;
    }

    .filter-chip[b-guj3mblhln] {
        font-size: 0.65rem;
        padding: 0.2rem 0.375rem;
    }

    .chip-value[b-guj3mblhln] {
        max-width: 60px;
    }

    .clear-all-filters[b-guj3mblhln] {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
    }

    .advanced-filters-content[b-guj3mblhln] {
        padding: 0.625rem;
    }

    .filter-input[b-guj3mblhln],
    .filter-select[b-guj3mblhln] {
        height: 2rem;
        font-size: 0.75rem;
    }

    .btn-modern[b-guj3mblhln] {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
        min-height: 2rem;
    }
}

/* Large screens - optimized column widths */
@media (min-width: 1200px) {
    .trades-table[b-guj3mblhln] {
        font-size: 0.7rem;
    }

    .trades-table th[b-guj3mblhln],
    .trades-table td[b-guj3mblhln] {
        padding: 0.3rem 0.25rem !important;
    }

    .trades-table th:nth-child(1)[b-guj3mblhln],
    .trades-table td:nth-child(1)[b-guj3mblhln] {
        width: 15%;
        min-width: 80px;
    }

    .trades-table th:nth-child(2)[b-guj3mblhln],
    .trades-table td:nth-child(2)[b-guj3mblhln] {
        width: 20%;
        min-width: 100px;
    }

    .trades-table th:nth-child(3)[b-guj3mblhln],
    .trades-table td:nth-child(3)[b-guj3mblhln] {
        width: 18%;
        min-width: 90px;
    }

    .trades-table th:nth-child(4)[b-guj3mblhln],
    .trades-table td:nth-child(4)[b-guj3mblhln] {
        width: 8%;
        min-width: 40px;
        text-align: center;
    }

    .trades-table th:nth-child(5)[b-guj3mblhln],
    .trades-table td:nth-child(5)[b-guj3mblhln] {
        width: 8%;
        min-width: 40px;
        text-align: center;
    }

    .trades-table th:nth-child(6)[b-guj3mblhln],
    .trades-table td:nth-child(6)[b-guj3mblhln] {
        width: 10%;
        min-width: 50px;
        text-align: center;
    }

    .trades-table th:nth-child(7)[b-guj3mblhln],
    .trades-table td:nth-child(7)[b-guj3mblhln] {
        width: 21%;
        min-width: 80px;
    }

    .trades-table .d-none.d-md-table-cell[b-guj3mblhln],
    .trades-table .d-none.d-lg-table-cell[b-guj3mblhln],
    .trades-table .d-none.d-sm-table-cell[b-guj3mblhln] {
        display: table-cell !important;
    }
}

@media (min-width: 1400px) {
    .trades-table[b-guj3mblhln] {
        font-size: 0.75rem;
    }

    .trades-table th[b-guj3mblhln],
    .trades-table td[b-guj3mblhln] {
        padding: 0.375rem 0.3rem !important;
    }
}
/* /Components/Pages/Users/Users.razor.rz.scp.css */
/* Users Page - Modern Dark Theme Styles */

/* ===== Page Container ===== */
.users-page-container[b-b7x0xxanwt] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: calc(100vh - 60px);
    overflow: hidden;
    padding: 1rem;
}

/* ===== Enhanced Statistics Section ===== */
.enhanced-stats-section[b-b7x0xxanwt] {
    flex-shrink: 0;
}

/*
   Five tiles across on a desktop, wrapping to a readable minimum rather than squeezing. The old
   repeat(6, 1fr) forced six equal columns at any width — ~230px each on a 1600px screen, narrower
   than "$593,914.75" renders, which is what clipped the balance and the split sub-figures.
*/
.stats-grid-enhanced[b-b7x0xxanwt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.75rem;
}

/* ===== Stat Card Enhanced ===== */
.stat-card-enhanced[b-b7x0xxanwt] {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.75rem 0.875rem;
    /* Column, not row: the icon+number line and the detail strip are separate bands, which is what
       lets the bottom strip run the full width of the tile. */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    min-height: 92px;
    text-align: left;
}

.stat-main[b-b7x0xxanwt] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    /* Keeps the headline number clear of the absolutely positioned pill in the corner. */
    padding-right: 3rem;
}

/* Subscriber share sits in the corner rather than competing with the detail chips for the bottom
   row — it qualifies the headline number, it is not another figure to scan. */
.stat-pill[b-b7x0xxanwt] {
    position: absolute;
    top: 0.5rem;
    right: 0.625rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 999px;
    padding: 0.1rem 0.4rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
}

.stat-pill.danger[b-b7x0xxanwt] {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
}

.stat-card-enhanced.active .stat-pill[b-b7x0xxanwt] {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Total credit, folded into the Total Users tile. */
.stat-footer[b-b7x0xxanwt] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--border-color);
    min-width: 0;
}

.footer-value[b-b7x0xxanwt] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.footer-label[b-b7x0xxanwt] {
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-card-enhanced.active .stat-footer[b-b7x0xxanwt] {
    border-top-color: rgba(255, 255, 255, 0.25);
}

.stat-card-enhanced.active .footer-value[b-b7x0xxanwt],
.stat-card-enhanced.active .footer-label[b-b7x0xxanwt] {
    color: #fff;
}

.stat-card-enhanced[b-b7x0xxanwt]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background 0.25s ease;
}

.stat-card-enhanced:hover[b-b7x0xxanwt] {
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stat-card-enhanced:hover[b-b7x0xxanwt]::before {
    background: var(--primary-blue);
}

.stat-card-enhanced.active[b-b7x0xxanwt] {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #1e40af 100%);
    border-color: var(--primary-blue);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

.stat-card-enhanced.active[b-b7x0xxanwt]::before {
    background: #93c5fd;
}

.stat-card-enhanced.active .stat-icon-enhanced[b-b7x0xxanwt] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.stat-card-enhanced.active .stat-value-large[b-b7x0xxanwt],
.stat-card-enhanced.active .stat-title[b-b7x0xxanwt],
.stat-card-enhanced.active .sub-detail[b-b7x0xxanwt] {
    color: white;
}

.stat-card-enhanced.active .sub-detail[b-b7x0xxanwt] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

/* .stat-card-enhanced.highlight was only ever set by the Total Credit Balance tile, which no longer
   filters — the class defined a border colour but none of the .active text/icon rules, so the tile
   never actually looked selected. Removed with the duplicate filter it belonged to. */

.stat-card-enhanced.warning[b-b7x0xxanwt] {
    border-color: transparent;
}

.stat-card-enhanced.warning:hover[b-b7x0xxanwt] {
    border-color: var(--danger);
}

.stat-card-enhanced.warning.active[b-b7x0xxanwt] {
    background: linear-gradient(135deg, var(--danger) 0%, #991b1b 100%);
    border-color: var(--danger);
}

/* ===== Stat Icon Enhanced ===== */
.stat-icon-enhanced[b-b7x0xxanwt] {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.stat-icon-enhanced.total[b-b7x0xxanwt] {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #1e40af 100%);
    color: white;
}

.stat-icon-enhanced.credit[b-b7x0xxanwt] {
    background: linear-gradient(135deg, var(--accent-orange) 0%, #c2410c 100%);
    color: white;
}

.stat-icon-enhanced.new-user[b-b7x0xxanwt] {
    background: linear-gradient(135deg, var(--success) 0%, #047857 100%);
    color: white;
}

.stat-icon-enhanced.active[b-b7x0xxanwt] {
    background: linear-gradient(135deg, var(--info) 0%, #0e7490 100%);
    color: white;
}

.stat-icon-enhanced.balance[b-b7x0xxanwt] {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: white;
}

.stat-icon-enhanced.blacklisted[b-b7x0xxanwt] {
    background: linear-gradient(135deg, var(--danger) 0%, #991b1b 100%);
    color: white;
}

/* ===== Stat Info ===== */
.stat-info[b-b7x0xxanwt] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.stat-value-large[b-b7x0xxanwt] {
    /* Scales with the tile so a six-figure number stays on one line at any column width. */
    font-size: clamp(1.35rem, 1.8vw, 1.7rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-title[b-b7x0xxanwt] {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.0625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-sub-info[b-b7x0xxanwt] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    align-items: center;
    min-width: 0;
}

/* .sub-percentage is gone: the subscriber share it styled now renders as .stat-pill in the tile's
   top-right corner instead of as another chip in the bottom strip. */

.sub-detail[b-b7x0xxanwt] {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 0.2rem 0.4rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

/* Filter chips inside a tile — the two-filter tiles (New / Active users) use these instead of the
   nested split panel, so every tile keeps the same number-title-details shape. */
.sub-filter[b-b7x0xxanwt] {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0.2rem 0.45rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sub-filter b[b-b7x0xxanwt] {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sub-filter:hover[b-b7x0xxanwt] {
    border-color: var(--primary-blue);
    color: var(--text-primary);
}

.sub-filter.active[b-b7x0xxanwt] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
}

.sub-filter.active b[b-b7x0xxanwt] {
    color: #fff;
}

/* Tiles that report a figure rather than select a segment (Total Credit Balance, and the two-filter
   tiles whose chips do the filtering). No pointer, no lift, no active state. */
.stat-card-enhanced.is-readonly[b-b7x0xxanwt] {
    cursor: default;
}

.stat-card-enhanced.is-readonly:hover[b-b7x0xxanwt] {
    transform: none;
    box-shadow: none;
    border-color: var(--border-color);
}

.stat-card-enhanced.is-readonly:hover[b-b7x0xxanwt]::before {
    background: transparent;
}

.sub-detail.warning-text[b-b7x0xxanwt] {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

/* The split-card rules that lived here are gone with the markup: the nested panel never had the
   width to render inside a 1/6 column, which is what clipped "CARD TRADE 6" in the header. The two
   filters it held are now .sub-filter chips in the standard detail row. */

/* ===== Users Table Card ===== */
.users-table-card[b-b7x0xxanwt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 0;
}

/* ===== Table Card Header ===== */
.table-card-header[b-b7x0xxanwt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-title[b-b7x0xxanwt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.header-title i[b-b7x0xxanwt] {
    font-size: 1.1rem;
    color: var(--primary-blue);
}

.filter-indicator[b-b7x0xxanwt] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--accent-orange);
    background: rgba(251, 146, 60, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(251, 146, 60, 0.2);
}

.filter-indicator i[b-b7x0xxanwt] {
    font-size: 0.65rem;
    color: var(--accent-orange);
}

.header-controls[b-b7x0xxanwt] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ===== Header Search ===== */
.header-search[b-b7x0xxanwt] {
    min-width: 200px;
}

.search-input-group[b-b7x0xxanwt] {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.2s ease;
}

.search-input-group:focus-within[b-b7x0xxanwt] {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.search-input-group .search-icon[b-b7x0xxanwt] {
    padding: 0.625rem 0.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.search-input-group .search-input[b-b7x0xxanwt] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.625rem 0.75rem 0.625rem 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    outline: none;
    min-width: 120px;
}

.search-input-group .search-input[b-b7x0xxanwt]::placeholder {
    color: var(--text-muted);
}

.search-input-group .clear-btn[b-b7x0xxanwt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 0.25rem;
    border-radius: var(--radius-sm);
}

.search-input-group .clear-btn:hover[b-b7x0xxanwt] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ===== Header Filters ===== */
.header-filters[b-b7x0xxanwt] {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-secondary);
    padding: 0.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.filter-pill[b-b7x0xxanwt] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-pill:hover[b-b7x0xxanwt] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-blue);
}

.filter-pill.active[b-b7x0xxanwt] {
    background: var(--primary-blue);
    color: white;
}

.filter-pill.danger.active[b-b7x0xxanwt] {
    background: var(--danger);
}

/* ===== Add User Button ===== */
.add-user-btn[b-b7x0xxanwt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--success) 0%, #047857 100%);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.add-user-btn:hover[b-b7x0xxanwt] {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.add-user-btn:active[b-b7x0xxanwt] {
    transform: translateY(0);
}

.add-user-btn i[b-b7x0xxanwt] {
    font-size: 1rem;
}

/* ===== Ban Status Filter ===== */
.ban-filter-group[b-b7x0xxanwt] {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-wrap: wrap;
}

/* Ban-provenance chips (Auto / Manual / Unknown) — visually subordinate to the three primary
   status filters they narrow. */
.ban-filter-btn.ban-filter-sub[b-b7x0xxanwt] {
    padding: 0.625rem 0.7rem;
    font-size: 0.75rem;
    color: var(--text-light);
}

.ban-filter-btn.ban-filter-sub:first-of-type[b-b7x0xxanwt] {
    border-left: 1px solid var(--border-color);
}

.ban-filter-btn[b-b7x0xxanwt] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.625rem 0.9rem;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ban-filter-btn:last-child[b-b7x0xxanwt] {
    border-right: none;
}

.ban-filter-btn:hover[b-b7x0xxanwt] {
    color: var(--text-primary);
    background: rgba(148, 163, 184, 0.1);
}

.ban-filter-btn.active[b-b7x0xxanwt] {
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.18);
}

.ban-filter-count[b-b7x0xxanwt] {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    font-size: 0.72rem;
    font-weight: 700;
}

/* ===== Ban Status Cell ===== */
.ban-status-cell i[b-b7x0xxanwt] {
    font-size: 1rem;
}

.ban-status[b-b7x0xxanwt] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.ban-source-label[b-b7x0xxanwt] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

/* ===== Table Card Body ===== */
.table-card-body[b-b7x0xxanwt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.table-responsive-mobile[b-b7x0xxanwt] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ===== Table Styles ===== */
[b-b7x0xxanwt] .table {
    background: var(--bg-card);
    margin-bottom: 0;
    color: var(--text-primary);
    font-size: 0.85rem;
}

[b-b7x0xxanwt] .table thead {
    background: var(--bg-tertiary);
    position: sticky;
    top: 0;
    z-index: 10;
}

[b-b7x0xxanwt] .table thead th {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    border-top: none;
    padding: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

[b-b7x0xxanwt] .table tbody {
    background: var(--bg-card);
}

[b-b7x0xxanwt] .table tbody tr {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

[b-b7x0xxanwt] .table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

[b-b7x0xxanwt] .table tbody tr:hover {
    background: var(--bg-tertiary);
}

[b-b7x0xxanwt] .table tbody td {
    background: transparent;
    color: var(--text-primary);
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    font-size: 0.85rem;
}

/* ===== Username Link ===== */
.username-link[b-b7x0xxanwt] {
    color: var(--accent-cyan) !important;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.username-link:hover[b-b7x0xxanwt] {
    color: var(--primary-blue) !important;
}

/* ===== Credit Input ===== */
.credit-input[b-b7x0xxanwt] {
    max-width: 80px;
    text-align: center;
    font-weight: 600;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm);
    padding: 0.375rem;
    font-size: 0.8rem;
}

.credit-input:focus[b-b7x0xxanwt] {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.adjustment-history-link[b-b7x0xxanwt] {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--primary-blue);
    white-space: nowrap;
}

.adjustment-history-link:hover[b-b7x0xxanwt] {
    text-decoration: underline;
}

/* ===== Button Styles ===== */
.btn-sm[b-b7x0xxanwt] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-outline-secondary[b-b7x0xxanwt] {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.btn-outline-secondary:hover[b-b7x0xxanwt] {
    background: var(--bg-secondary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* ===== Modal Styles ===== */
.modal-content[b-b7x0xxanwt] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}

.modal-header[b-b7x0xxanwt] {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 1rem 1.25rem;
}

.modal-footer[b-b7x0xxanwt] {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 1rem 1.25rem;
}

.modal-title[b-b7x0xxanwt] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.modal-body[b-b7x0xxanwt] {
    padding: 1.25rem;
}

/* ===== Form Styles ===== */
.form-control[b-b7x0xxanwt] {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.form-control:focus[b-b7x0xxanwt] {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.form-label[b-b7x0xxanwt] {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* ===== Alert Styles ===== */
.alert-info[b-b7x0xxanwt] {
    background: rgba(6, 182, 212, 0.1);
    border-left: 3px solid var(--info);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 1rem;
    font-size: 0.85rem;
}

/* ===== Mobile Actions ===== */
.mobile-actions[b-b7x0xxanwt] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.mobile-credit-group[b-b7x0xxanwt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-credit-input[b-b7x0xxanwt] {
    width: 100%;
    text-align: center;
    min-height: 36px;
}

.mobile-credit-buttons[b-b7x0xxanwt] {
    display: flex;
    gap: 0.25rem;
}

.mobile-credit-buttons .btn[b-b7x0xxanwt] {
    flex: 1;
    padding: 0.3rem;
    min-height: 32px;
}

/* ===== Responsive Design ===== */
@media (max-width: 1400px) {
    .stats-grid-enhanced[b-b7x0xxanwt] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .stats-grid-enhanced[b-b7x0xxanwt] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-card-enhanced[b-b7x0xxanwt] {
        min-height: 90px;
        padding: 0.875rem 1rem;
    }
    
    .stat-value-large[b-b7x0xxanwt] {
        font-size: 1.5rem;
    }
    
    .stat-icon-enhanced[b-b7x0xxanwt] {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
    
    .table-card-header[b-b7x0xxanwt] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-title[b-b7x0xxanwt] {
        justify-content: center;
    }
    
    .header-controls[b-b7x0xxanwt] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .users-page-container[b-b7x0xxanwt] {
        padding: 0.75rem;
        gap: 1rem;
    }
    
    .stats-grid-enhanced[b-b7x0xxanwt] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .stat-card-enhanced[b-b7x0xxanwt] {
        padding: 0.75rem;
        min-height: 80px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .stat-icon-enhanced[b-b7x0xxanwt] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .stat-value-large[b-b7x0xxanwt] {
        font-size: 1.25rem;
    }
    
    .stat-title[b-b7x0xxanwt] {
        font-size: 0.7rem;
    }
    
    .stat-sub-info[b-b7x0xxanwt] {
        justify-content: center;
    }
    
    .split-value[b-b7x0xxanwt] {
        font-size: 1rem;
    }
    
    .header-search[b-b7x0xxanwt] {
        width: 100%;
        min-width: auto;
    }
    
    .header-filters[b-b7x0xxanwt] {
        width: 100%;
        justify-content: center;
    }
    
    .add-user-btn[b-b7x0xxanwt] {
        width: 100%;
        justify-content: center;
    }
    
    .table .d-tablet-none[b-b7x0xxanwt] {
        display: none;
    }
    
    [b-b7x0xxanwt] .table thead th,
    [b-b7x0xxanwt] .table tbody td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .stats-grid-enhanced[b-b7x0xxanwt] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .stat-card-enhanced[b-b7x0xxanwt] {
        flex-direction: row;
        text-align: left;
        padding: 0.75rem;
    }
    
    .stat-split-container[b-b7x0xxanwt] {
        flex-direction: row;
    }
    
    .split-section[b-b7x0xxanwt] {
        padding: 0.375rem;
    }
    
    .split-value[b-b7x0xxanwt] {
        font-size: 0.9rem;
    }
    
    .split-percent[b-b7x0xxanwt] {
        font-size: 0.55rem;
    }
    
    .table .d-mobile-none[b-b7x0xxanwt] {
        display: none;
    }
    
    .filter-pill[b-b7x0xxanwt] {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
    
    .filter-pill span[b-b7x0xxanwt] {
        display: none;
    }
}

@media (max-width: 375px) {
    .stat-value-large[b-b7x0xxanwt] {
        font-size: 1rem;
    }
    
    .stat-title[b-b7x0xxanwt] {
        font-size: 0.65rem;
    }
    
    .sub-detail[b-b7x0xxanwt],
    .sub-filter[b-b7x0xxanwt] {
        font-size: 0.6rem;
        padding: 0.125rem 0.25rem;
    }
}

/* ===== Touch Improvements ===== */
@media (hover: none) and (pointer: coarse) {
    .stat-card-enhanced:hover[b-b7x0xxanwt] {
        transform: none;
        box-shadow: none;
    }
    
    .stat-card-enhanced:active[b-b7x0xxanwt] {
        transform: scale(0.98);
    }
    
    .filter-pill:hover[b-b7x0xxanwt] {
        background: transparent;
        color: var(--text-muted);
    }
    
    .filter-pill:active[b-b7x0xxanwt] {
        background: rgba(59, 130, 246, 0.1);
        color: var(--primary-blue);
    }
    
    .add-user-btn:hover[b-b7x0xxanwt] {
        transform: none;
    }
    
    .add-user-btn:active[b-b7x0xxanwt] {
        transform: scale(0.98);
    }
    
    .btn[b-b7x0xxanwt],
    .form-control[b-b7x0xxanwt],
    .search-input[b-b7x0xxanwt] {
        min-height: 40px;
    }
}


/* ===== Credit scope switch (Desk / Buyer chains) =====
   Same shape as the ban filter group so the header reads as one row of controls; a segmented pair
   rather than a checkbox because the two views are alternatives, not a modifier. */
.credit-view-switch[b-b7x0xxanwt] {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.credit-view-btn[b-b7x0xxanwt] {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.9rem;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.credit-view-btn:last-child[b-b7x0xxanwt] {
    border-right: none;
}

.credit-view-btn:hover[b-b7x0xxanwt] {
    color: var(--text-primary);
    background: rgba(148, 163, 184, 0.1);
}

.credit-view-btn.active[b-b7x0xxanwt] {
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.18);
}

/* ===== Chain summary chips ===== */
.chain-summary-strip[b-b7x0xxanwt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.chain-chip[b-b7x0xxanwt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 7.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.chain-chip:hover[b-b7x0xxanwt] {
    border-color: rgba(59, 130, 246, 0.5);
}

.chain-chip.active[b-b7x0xxanwt] {
    border-color: var(--primary-blue, #3b82f6);
    background: rgba(59, 130, 246, 0.14);
}

.chain-chip-name[b-b7x0xxanwt] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chain-chip-value[b-b7x0xxanwt] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.chain-chip-detail[b-b7x0xxanwt] {
    font-size: 0.72rem;
    color: var(--text-light);
}

/* Chain name wherever it appears inside a row or a modal title. */
.chain-badge[b-b7x0xxanwt] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.16);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 700;
}
/* /Components/Pages/Utilities/DebugLinks.razor.rz.scp.css */
/* Debug Links Page Styles */

.debug-link-list[b-5m5pqt38rk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.debug-link-item[b-5m5pqt38rk] {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 8px;
    background: var(--bg-tertiary, #1a1a2e);
    border: 1px solid var(--border-color, #2d2d44);
    cursor: pointer;
    transition: all 0.2s ease;
}

.debug-link-item:hover[b-5m5pqt38rk] {
    background: var(--bg-secondary, #252540);
    border-color: var(--primary-blue, #3b82f6);
    transform: translateX(4px);
}

.debug-link-icon[b-5m5pqt38rk] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-secondary, #252540);
    color: var(--primary-blue, #3b82f6);
    font-size: 1.25rem;
    margin-right: 1rem;
}

.debug-link-item:hover .debug-link-icon[b-5m5pqt38rk] {
    background: var(--primary-blue, #3b82f6);
    color: white;
}

.debug-link-content[b-5m5pqt38rk] {
    flex: 1;
    min-width: 0;
}

.debug-link-title[b-5m5pqt38rk] {
    font-weight: 600;
    color: var(--text-primary, #e4e4e7);
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.debug-link-description[b-5m5pqt38rk] {
    color: var(--text-muted, #71717a);
    font-size: 0.85rem;
    line-height: 1.4;
}

.debug-link-arrow[b-5m5pqt38rk] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted, #71717a);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.debug-link-item:hover .debug-link-arrow[b-5m5pqt38rk] {
    opacity: 1;
    transform: translateX(4px);
}

/* Card header icons */
.card-header .bi[b-5m5pqt38rk] {
    font-size: 1.1rem;
}

/* Input group styling for search inputs */
.debug-link-item .input-group[b-5m5pqt38rk] {
    margin-top: 0.5rem;
}

.debug-link-item .input-group .form-control[b-5m5pqt38rk] {
    background: var(--bg-primary, #0f0f1a);
    border-color: var(--border-color, #2d2d44);
    color: var(--text-primary, #e4e4e7);
}

.debug-link-item .input-group .form-control:focus[b-5m5pqt38rk] {
    background: var(--bg-primary, #0f0f1a);
    border-color: var(--primary-blue, #3b82f6);
    color: var(--text-primary, #e4e4e7);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.debug-link-item .input-group .form-control[b-5m5pqt38rk]::placeholder {
    color: var(--text-muted, #71717a);
}

.debug-link-item .input-group .btn[b-5m5pqt38rk] {
    border-color: var(--primary-blue, #3b82f6);
}

/* Dashboard card styles (ensure consistency with other pages) */
.dashboard-card[b-5m5pqt38rk] {
    background: var(--bg-secondary, #1e1e2d);
    border: 1px solid var(--border-color, #2d2d44);
    border-radius: 12px;
}

.dashboard-card .card-header[b-5m5pqt38rk] {
    background: transparent;
    border-bottom: 1px solid var(--border-color, #2d2d44);
    padding: 1rem 1.25rem;
}

.dashboard-card .card-header h5[b-5m5pqt38rk] {
    color: var(--text-primary, #e4e4e7);
    font-size: 1rem;
    font-weight: 600;
}

.dashboard-card .card-body[b-5m5pqt38rk] {
    padding: 1.25rem;
}

/* Text color utilities */
.text-primary[b-5m5pqt38rk] {
    color: var(--primary-blue, #3b82f6) !important;
}

.text-success[b-5m5pqt38rk] {
    color: var(--success, #22c55e) !important;
}

.text-warning[b-5m5pqt38rk] {
    color: var(--warning, #f59e0b) !important;
}

.text-info[b-5m5pqt38rk] {
    color: var(--info, #06b6d4) !important;
}

.text-secondary[b-5m5pqt38rk] {
    color: var(--text-secondary, #a1a1aa) !important;
}

.text-purple[b-5m5pqt38rk] {
    color: #a855f7 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .debug-link-item[b-5m5pqt38rk] {
        padding: 0.875rem;
    }
    
    .debug-link-icon[b-5m5pqt38rk] {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        margin-right: 0.75rem;
    }
    
    .debug-link-title[b-5m5pqt38rk] {
        font-size: 0.9rem;
    }
    
    .debug-link-description[b-5m5pqt38rk] {
        font-size: 0.8rem;
    }
}
/* /Components/Shared/BotConnectionStatus.razor.rz.scp.css */
/* BotConnectionStatus component styles */

.status-indicator[b-sxm9ofsirj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-circle[b-sxm9ofsirj] {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    position: relative;
}

/* Available status */
.status-available[b-sxm9ofsirj] {
    background-color: var(--success);
    box-shadow: 0 0 0 rgba(46, 204, 113, 0.4);
    animation: pulse-green-b-sxm9ofsirj 2s infinite;
}

/* Busy status */
.status-busy[b-sxm9ofsirj] {
    background-color: var(--accent-orange);
    box-shadow: 0 0 0 rgba(230, 126, 34, 0.4);
    animation: pulse-orange-b-sxm9ofsirj 2s infinite;
}

/* Standby status */
.status-standby[b-sxm9ofsirj] {
    background-color: var(--secondary-blue);
    box-shadow: 0 0 0 rgba(52, 152, 219, 0.4);
    animation: pulse-blue-b-sxm9ofsirj 2s infinite;
}

/* Offline status */
.status-offline[b-sxm9ofsirj] {
    background-color: var(--danger);
}

/* Unknown status */
.status-unknown[b-sxm9ofsirj] {
    background-color: var(--medium-grey);
}

.status-label[b-sxm9ofsirj] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--medium-grey);
}

/* Pulse animations */
@keyframes pulse-green-b-sxm9ofsirj {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(46, 204, 113, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

@keyframes pulse-orange-b-sxm9ofsirj {
    0% {
        box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(230, 126, 34, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(230, 126, 34, 0);
    }
}

@keyframes pulse-blue-b-sxm9ofsirj {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(52, 152, 219, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}
/* /Components/Shared/DropDownCardSelector.razor.rz.scp.css */
/* Integrated Search Wrapper */
.integrated-search-wrapper[b-dd5gnsdm7k] {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 450px;
    margin: 0.5rem auto;
}

/* Search Input Wrapper Clean */
.search-input-wrapper-clean[b-dd5gnsdm7k] {
    position: relative;
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    transition: all 0.2s ease;
    padding: 4px;
    height: 40px;
}

.search-input-wrapper-clean:hover[b-dd5gnsdm7k],
.search-input-wrapper-clean:focus-within[b-dd5gnsdm7k] {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
}


.search-icon-clean[b-dd5gnsdm7k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--primary-blue);
    border-radius: 50%;
    color: var(--white);
    font-size: 0.85rem;
    flex-shrink: 0;
}


/* Enhanced Search Input Wrapper - Flex to fill remaining space */
.enhanced-search-input-wrapper[b-dd5gnsdm7k] {
    flex: 1;
    min-width: 0;
    margin-left: 8px;
}

.enhanced-search-input-wrapper input[b-dd5gnsdm7k],
.enhanced-search-input-wrapper .form-control[b-dd5gnsdm7k],
.enhanced-autocomplete input[b-dd5gnsdm7k] {
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.85rem;
    padding: 8px 12px 8px 0 !important;
    outline: none !important;
    box-shadow: none !important;
    height: auto;
}

.enhanced-search-input-wrapper input[b-dd5gnsdm7k]::placeholder,
.enhanced-search-input-wrapper .form-control[b-dd5gnsdm7k]::placeholder,
.enhanced-autocomplete input[b-dd5gnsdm7k]::placeholder {
    color: var(--text-muted) !important;
}

.enhanced-autocomplete[b-dd5gnsdm7k] {
    position: relative;
    width: 100%;
}

.enhanced-autocomplete .form-control[b-dd5gnsdm7k] {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.85rem;
    font-weight: 400;
    padding: 8px 0;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
    height: auto;
}

.enhanced-autocomplete .form-control[b-dd5gnsdm7k]::placeholder {
    color: var(--text-muted) !important;
    font-weight: 400;
}

.enhanced-autocomplete .form-control:focus[b-dd5gnsdm7k] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
}

.autocomplete .input-group[b-dd5gnsdm7k] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.autocomplete .form-control[b-dd5gnsdm7k] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.autocomplete .form-control:focus[b-dd5gnsdm7k] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.autocomplete .form-control:hover[b-dd5gnsdm7k] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.autocomplete[b-dd5gnsdm7k] {
    position: relative !important;
    overflow: visible !important;
}

.autocomplete .dropdown-menu[b-dd5gnsdm7k] {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-item[b-dd5gnsdm7k] {
    color: var(--text-primary) !important;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

.dropdown-item:hover[b-dd5gnsdm7k] {
    background: var(--bg-tertiary) !important;
    color: var(--accent-cyan) !important;
}

.dropdown-item.active[b-dd5gnsdm7k] {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
}

/* Enhanced dropdown portal for search */
[b-dd5gnsdm7k] .enhanced-dropdown {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

[b-dd5gnsdm7k] .enhanced-dropdown-item {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[b-dd5gnsdm7k] .enhanced-dropdown-item:hover {
    background: var(--bg-tertiary) !important;
}

[b-dd5gnsdm7k] .enhanced-dropdown-item div {
    color: var(--text-primary) !important;
}

[b-dd5gnsdm7k] .enhanced-dropdown-item small {
    color: var(--text-muted) !important;
}

.version-dropdown-inline[b-dd5gnsdm7k] {
    min-width: 130px;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary) !important;
    color: #ffffff !important;
    height: 36px;
}

.version-dropdown-inline:focus[b-dd5gnsdm7k] {
    border-color: var(--accent-cyan);
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
    color: #ffffff !important;
}
/* /Components/Shared/PageContainer.razor.rz.scp.css */
/* Dark Mode Professional Page Header */
.dashboard-header[b-r08ofvoys0] {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    color: var(--text-primary);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border-left: 3px solid var(--accent-cyan);
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-title[b-r08ofvoys0] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
}

.dashboard-title i[b-r08ofvoys0] {
    margin-right: var(--space-2);
    font-size: var(--text-xl);
    color: var(--accent-cyan);
}

.dashboard-actions[b-r08ofvoys0] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .dashboard-header[b-r08ofvoys0] {
        padding: var(--space-4) var(--space-5);
        gap: var(--space-3);
    }
    
    .dashboard-title[b-r08ofvoys0] {
        font-size: var(--text-lg);
    }
    
    .dashboard-title i[b-r08ofvoys0] {
        font-size: var(--text-lg);
    }
}

@media (max-width: 768px) {
    .dashboard-header[b-r08ofvoys0] {
        padding: var(--space-3) var(--space-4);
        margin-bottom: var(--space-3);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    .dashboard-title[b-r08ofvoys0] {
        font-size: var(--text-base);
    }
    
    .dashboard-title i[b-r08ofvoys0] {
        font-size: var(--text-lg);
        margin-right: var(--space-2);
    }
    
    .dashboard-actions[b-r08ofvoys0] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .dashboard-header[b-r08ofvoys0] {
        padding: var(--space-3);
        margin-bottom: var(--space-2);
    }
    
    .dashboard-title[b-r08ofvoys0] {
        font-size: var(--text-sm);
    }
    
    .dashboard-title i[b-r08ofvoys0] {
        font-size: var(--text-base);
    }
}
/* /Components/Shared/PaginatedTable.razor.rz.scp.css */
/* The footer used Bootstrap's .bg-light: a light strip sitting under a dark table, carrying
   .text-muted grey text that had nothing to contrast against. Styled against the app's own
   variables instead, so it reads as the bottom of the card it belongs to. */

.table-footer[b-xvtrf2itnb] {
    background: var(--bg-tertiary, #1a1a2e);
    border-top: 1px solid var(--border-color, #2d2d44);
    border-radius: 0 0 12px 12px;
}

.table-footer-count[b-xvtrf2itnb] {
    color: var(--text-secondary, #94a3b8);
}

/* Otherwise the select stretches to fill the flex row and swamps the count beside it. */
.table-footer .form-select[b-xvtrf2itnb] {
    width: auto;
}