/* V3 Trading-Focused Design Styles */

:root {
    /* Trading-focused colors - Dark Theme (Default) */
    --v3-bg-primary: #0a0e1a;
    --v3-bg-secondary: #12182b;
    --v3-bg-card: #1a2030;
    --v3-bg-hover: #232d45;

    /* Accent colors - crypto inspired */
    --v3-accent-primary: #0891b2;
    --v3-accent-secondary: #7c3aed;
    --v3-accent-tertiary: #f59e0b;

    /* Trading colors */
    --v3-bullish: #10b981;
    --v3-bullish-glow: rgba(16, 185, 129, 0.2);
    --v3-bearish: #ef4444;
    --v3-bearish-glow: rgba(239, 68, 68, 0.2);
    /* Softer shades for profit/loss figures and the green/red action buttons (#495).
       --v3-bullish / --v3-bearish stay for status pills, charts and toggles. */
    --v3-num-positive: #34a77f;
    --v3-num-positive-glow: rgba(52, 167, 127, 0.18);
    --v3-num-negative: #e05a5a;
    --v3-num-negative-glow: rgba(224, 90, 90, 0.18);
    /* Dimmed blue for the blue summary figures (#502). */
    --v3-icon-primary: #4a8fb3;
    --v3-icon-primary-glow: rgba(74, 143, 179, 0.18);

    /* Text colors */
    --v3-text-primary: #f8fafc;
    --v3-text-secondary: #94a3b8;
    /* Hover tint for the light grey table action buttons (#504) */
    --v3-text-secondary-glow: rgba(148, 163, 184, 0.18);
    --v3-text-muted: #64748b;

    /* Border and dividers */
    --v3-border: #2d3748;
    --v3-border-glow: #3b4d6b;

    /* Shadows and glows */
    --v3-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --v3-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --v3-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --v3-glow-primary: 0 0 20px rgba(8, 145, 178, 0.3);
    --v3-glow-accent: 0 0 20px rgba(124, 58, 237, 0.3);

    /* Status colors */
    --v3-status-running: #10b981;
    --v3-status-stopped: #6b7280;
    --v3-status-error: #ef4444;
    --v3-status-warning: #f59e0b;
    --v3-status-info: #0891b2;
    
    /* Spacing */
    --v3-spacing-xs: 0.25rem;
    --v3-spacing-sm: 0.5rem;
    --v3-spacing-md: 1rem;
    --v3-spacing-lg: 1.5rem;
    --v3-spacing-xl: 2rem;
    
    /* Border radius */
    --v3-radius-sm: 0.375rem;
    --v3-radius-md: 0.5rem;
    --v3-radius-lg: 0.75rem;
    --v3-radius-xl: 1rem;
}

/* Light Theme */
[data-theme="light"] {
    --v3-bg-primary: #f8fafc;
    --v3-bg-secondary: #ffffff;
    --v3-bg-card: #ffffff;
    --v3-bg-hover: #f1f5f9;
    
    /* Accent colors - slightly adjusted for light theme */
    --v3-accent-primary: #0284c7;
    --v3-accent-secondary: #7c3aed;
    --v3-accent-tertiary: #d97706;
    
    /* Trading colors remain similar but adjusted */
    --v3-bullish: #059669;
    --v3-bullish-glow: rgba(5, 150, 105, 0.15);
    --v3-bearish: #dc2626;
    --v3-bearish-glow: rgba(220, 38, 38, 0.15);
    --v3-num-positive: #2f8a68;
    --v3-num-positive-glow: rgba(47, 138, 104, 0.14);
    --v3-num-negative: #c94a4a;
    --v3-num-negative-glow: rgba(201, 74, 74, 0.14);
    --v3-icon-primary: #3b78a0;
    --v3-icon-primary-glow: rgba(59, 120, 160, 0.14);
    
    /* Text colors */
    --v3-text-primary: #1e293b;
    --v3-text-secondary: #475569;
    --v3-text-secondary-glow: rgba(71, 85, 105, 0.14);
    --v3-text-muted: #94a3b8;
    
    /* Border and dividers */
    --v3-border: #e2e8f0;
    --v3-border-glow: #cbd5e1;
    
    /* Shadows - lighter for light theme */
    --v3-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --v3-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --v3-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --v3-glow-primary: 0 0 15px rgba(2, 132, 199, 0.2);
    --v3-glow-accent: 0 0 15px rgba(124, 58, 237, 0.2);
    
    /* Status colors */
    --v3-status-running: #059669;
    --v3-status-stopped: #6b7280;
    --v3-status-error: #dc2626;
    --v3-status-warning: #d97706;
    --v3-status-info: #0891b2;
}

/* Light theme specific overrides */
[data-theme="light"] .v3-brand-text {
    background: linear-gradient(135deg, #0284c7, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .v3-page-title {
    background: linear-gradient(135deg, #0284c7, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .v3-table .btn {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}

[data-theme="light"] .v3-table .btn:hover {
    background: #e2e8f0;
    border-color: #0284c7;
    color: #0284c7;
}

[data-theme="light"] .v3-table .btn-toggle-active {
    background: #e0f2fe;
    border-color: #0284c7;
    color: #0284c7;
}

[data-theme="light"] .v3-card::before {
    background: linear-gradient(90deg, #0284c7, #7c3aed);
}

[data-theme="light"] .v3-form-control,
[data-theme="light"] .v3-edit-form-container input,
[data-theme="light"] .v3-card .form-control,
[data-theme="light"] .v3-card input[type="text"],
[data-theme="light"] .v3-card input[type="number"] {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

[data-theme="light"] .v3-form-control:focus,
[data-theme="light"] .v3-edit-form-container input:focus,
[data-theme="light"] .v3-card input:focus {
    background: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1) !important;
}

[data-theme="light"] .v3-edit-form-container .card,
[data-theme="light"] .v3-card .card {
    background: #ffffff;
    border-color: #e2e8f0;
}

[data-theme="light"] .v3-edit-form-container .card-header,
[data-theme="light"] .v3-card .card-header {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
}

[data-theme="light"] .v3-edit-form-container .card-body,
[data-theme="light"] .v3-card .card-body {
    background: #ffffff;
}

[data-theme="light"] .v3-instance-checkbox-item input[type="checkbox"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .v3-instance-checkbox-item input[type="checkbox"]:checked::after {
    border-color: #ffffff;
}

[data-theme="light"] .v3-modal {
    background: #ffffff;
    border-color: #e2e8f0;
}

[data-theme="light"] .v3-modal-footer {
    background: #f8fafc;
}

[data-theme="light"] .v3-toast-container .alert-info,
[data-theme="light"] .v3-toast-container .alert-success,
[data-theme="light"] .v3-toast-container .alert-warning,
[data-theme="light"] .v3-toast-container .alert-danger {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #0284c7;
}

/* Theme Toggle Button */
.v3-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    color: var(--v3-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.v3-theme-toggle:hover {
    border-color: var(--v3-accent-primary);
    color: var(--v3-accent-primary);
    transform: rotate(15deg);
}

.v3-theme-toggle i {
    transition: transform 0.3s ease;
}

.v3-theme-toggle:hover i {
    transform: scale(1.1);
}

/* Global V3 Layout */
.v3-page {
    background: var(--v3-bg-primary);
    min-height: 100vh;
    color: var(--v3-text-primary);
}

.v3-page-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--v3-bg-primary);
    color: var(--v3-text-primary);
}

.v3-main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 60px; /* Height of navbar */
    position: relative;
}

.v3-content-wrapper {
    flex: 1;
}

.v3-sidebar {
    background: var(--v3-bg-secondary);
    border-right: 1px solid var(--v3-border);
    box-shadow: var(--v3-shadow-md);
}

.v3-main {
    background: var(--v3-bg-primary);
}

/* Top Navigation Bar */
.v3-top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--v3-bg-secondary);
    border-bottom: 1px solid var(--v3-border);
    box-shadow: var(--v3-shadow-md);
    z-index: 1000;
    overflow: visible;
}

.v3-navbar-container {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1.5rem;
    gap: 2rem;
}

.v3-navbar-brand {
    flex-shrink: 0;
}

.v3-brand-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 700;
}

.v3-brand-link i {
    color: var(--v3-accent-primary);
}

.v3-brand-text {
    background: linear-gradient(135deg, var(--v3-accent-primary), var(--v3-accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.navbar-logo-text {
    height: 32px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

[data-theme="light"] .navbar-logo-text {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.v3-navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    overflow: visible;
}

.v3-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--v3-text-secondary);
    text-decoration: none;
    border-radius: var(--v3-radius-md);
    transition: all 0.2s;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.v3-nav-item:hover {
    color: var(--v3-accent-primary);
    background: var(--v3-bg-hover);
}

.v3-nav-item.active {
    color: var(--v3-accent-primary);
    background: var(--v3-bg-hover);
    border-bottom: 2px solid var(--v3-accent-primary);
}

/* Hamburger Menu - hidden by default, shown when nav overflows */
.v3-hamburger-wrapper {
    display: none;
    position: relative;
    flex-shrink: 0;
}

.v3-hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    color: var(--v3-text-primary);
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.2s;
}

.v3-hamburger-btn:hover {
    border-color: var(--v3-accent-primary);
    color: var(--v3-accent-primary);
    background: var(--v3-bg-hover);
}

.v3-hamburger-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.v3-hamburger-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 220px;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    box-shadow: var(--v3-shadow-lg);
    padding: 0.5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.v3-hamburger-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: var(--v3-text-secondary);
    text-decoration: none;
    border-radius: var(--v3-radius-md);
    transition: all 0.2s;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.v3-hamburger-item:hover {
    color: var(--v3-accent-primary);
    background: var(--v3-bg-hover);
}

.v3-hamburger-item.active {
    color: var(--v3-accent-primary);
    background: var(--v3-bg-hover);
}

/* Show hamburger and hide nav items when they overflow */
@media (max-width: 1560px) {
    .v3-hamburger-wrapper {
        display: block;
    }
    .v3-navbar-nav {
        display: none;
    }
    .v3-navbar-container {
        justify-content: space-between;
    }
    .v3-navbar-right {
        margin-left: auto;
    }
}

/* Notification bell red when unread */
.v3-notification-bell-unread .bi-bell-fill {
    color: #ef4444;
}

/* Admin Dropdown */
.v3-admin-dropdown {
    position: relative;
}

.v3-admin-toggle {
    cursor: pointer;
    border: none;
    background: none;
}

.v3-admin-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.v3-admin-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 200px;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    box-shadow: var(--v3-shadow-lg);
    padding: 0.5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.v3-admin-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: var(--v3-text-secondary);
    text-decoration: none;
    border-radius: var(--v3-radius-md);
    transition: all 0.2s;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.v3-admin-menu-item:hover {
    color: var(--v3-accent-primary);
    background: var(--v3-bg-hover);
}

.v3-admin-menu-item.active {
    color: var(--v3-accent-primary);
    background: var(--v3-bg-hover);
}

/* Hamburger section header */
.v3-hamburger-section-header {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--v3-accent-primary);
}

.v3-navbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Dropdown */
.v3-dropdown {
    position: relative;
}

.v3-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    color: var(--v3-text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9375rem;
}

.v3-dropdown-toggle:hover {
    border-color: var(--v3-accent-primary);
    color: var(--v3-accent-primary);
}

.v3-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 160px;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    box-shadow: var(--v3-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
}

.v3-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.v3-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--v3-text-primary);
    text-decoration: none;
    transition: all 0.2s;
    border-bottom: 1px solid var(--v3-border);
}

.v3-dropdown-item:last-child {
    border-bottom: none;
}

.v3-dropdown-item:hover {
    background: var(--v3-bg-hover);
    color: var(--v3-accent-primary);
}

.v3-dropdown-item.active {
    background: var(--v3-bg-hover);
    color: var(--v3-accent-primary);
    border-left: 3px solid var(--v3-accent-primary);
}

/* User Info */
.v3-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 1rem;
    border-left: 1px solid var(--v3-border);
}

.v3-user-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--v3-text-primary);
    font-size: 0.9375rem;
}

.v3-logout-btn, .v3-login-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    color: var(--v3-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9375rem;
    text-decoration: none;
}

.v3-logout-btn:hover, .v3-login-link:hover {
    border-color: var(--v3-num-negative);
    color: var(--v3-num-negative);
}

.v3-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    color: var(--v3-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.v3-settings-btn:hover {
    border-color: var(--v3-accent-primary);
    color: var(--v3-accent-primary);
}

/* Toast Container */
.v3-toast-container {
    position: fixed;
    top: 70px;
    right: 1rem;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 350px;
}

.v3-toast-container .alert-info,
.v3-toast-container .alert-success,
.v3-toast-container .alert-warning,
.v3-toast-container .alert-danger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--v3-radius-md);
    box-shadow: var(--v3-shadow-lg);
    animation: slideInRight 0.3s ease-out;
    backdrop-filter: blur(10px);
    border: 1px solid;
}

.v3-toast-container .alert-info {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--v3-status-info);
    color: var(--v3-text-primary);
}

.v3-toast-container .alert-success {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--v3-bullish);
    color: var(--v3-text-primary);
}

.v3-toast-container .alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--v3-status-warning);
    color: var(--v3-text-primary);
}

.v3-toast-container .alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--v3-bearish);
    color: var(--v3-text-primary);
}

.v3-toast-container .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.v3-toast-container .btn-close:hover {
    opacity: 1;
}

[data-theme="light"] .v3-toast-container .btn-close {
    filter: none;
    opacity: 0.6;
}

[data-theme="light"] .v3-toast-container .btn-close:hover {
    opacity: 1;
}

/* Also fix AlertBox close button in light theme */
[data-theme="light"] .alert .btn-close {
    filter: none;
    opacity: 0.6;
}

[data-theme="light"] .alert .btn-close:hover {
    opacity: 1;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Footer */
.v3-footer {
    padding: 0.75rem 1.5rem;
    background: var(--v3-bg-secondary);
    border-top: 1px solid var(--v3-border);
    margin-top: auto;
    display: flex;
    align-items: center;
    position: relative;
}

.v3-footer-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.v3-footer-link {
    color: var(--v3-text-muted);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.v3-footer-link:hover {
    color: var(--v3-accent-primary);
    text-decoration: none;
}

.v3-footer-divider {
    color: var(--v3-text-muted);
    font-size: 0.75rem;
    opacity: 0.5;
}

.v3-version-info {
    display: inline-block;
    color: var(--v3-text-muted);
    font-size: 0.75rem;
}

/* Modern Container */
.v3-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--v3-spacing-lg);
}

.v3-container-fluid {
    width: 100%;
    padding: var(--v3-spacing-lg);
}

/* Page Header */
.v3-page-header {
    margin-bottom: var(--v3-spacing-xl);
    padding-bottom: var(--v3-spacing-lg);
    border-bottom: 2px solid var(--v3-border);
    background: linear-gradient(90deg, transparent, var(--v3-accent-primary) 50%, transparent);
    background-position: 0 100%;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    border-bottom: none;
}

.v3-page-title {
    font-size: 2.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--v3-accent-primary), var(--v3-accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--v3-spacing-sm);
    letter-spacing: -0.02em;
}

.v3-page-subtitle {
    color: var(--v3-text-secondary);
    font-size: 1.125rem;
    font-weight: 400;
}

/* Modern Card Design */
.v3-card {
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    padding: var(--v3-spacing-lg);
    margin-bottom: var(--v3-spacing-lg);
    box-shadow: var(--v3-shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.v3-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--v3-accent-primary), var(--v3-accent-secondary));
    opacity: 0;
    transition: opacity 0.3s;
}

.v3-card:hover {
    border-color: var(--v3-border-glow);
    box-shadow: var(--v3-shadow-md), var(--v3-glow-primary);
    transform: translateY(-2px);
}

.v3-card:hover::before {
    opacity: 1;
}

.v3-card-header {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--v3-text-primary);
    margin-bottom: var(--v3-spacing-md);
    padding-bottom: var(--v3-spacing-sm);
    border-bottom: 1px solid var(--v3-border);
    display: flex;
    align-items: center;
    gap: var(--v3-spacing-sm);
}

.v3-card-header i {
    color: var(--v3-accent-primary);
}

/* Exchange Connections card (dashboard) - one compact row per exchange:
   logo + name on the left, masked key + status pill pushed right. */
.v3-exchange-list {
    display: flex;
    flex-direction: column;
}

.v3-exchange-row {
    display: flex;
    align-items: center;
    gap: var(--v3-spacing-sm);
    padding: var(--v3-spacing-sm) 0;
    border-bottom: 1px solid var(--v3-border);
}

.v3-exchange-list .v3-exchange-row:last-child {
    border-bottom: none;
}

.v3-exchange-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.v3-exchange-name {
    font-weight: 600;
    color: var(--v3-text-primary);
    flex: 0 0 auto;
}

/* margin-left: auto is what pushes the key and everything after it to the right edge. */
.v3-exchange-key {
    margin-left: auto;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--v3-text-secondary);
    white-space: nowrap;
}

/* The placeholder keeps the push identical on unconfigured rows so the pills stay aligned. */
.v3-exchange-key--empty {
    opacity: 0.6;
}

.v3-exchange-status {
    flex: 0 0 auto;
}

.v3-exchange-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--v3-spacing-md);
}

@media (max-width: 640px) {
    .v3-exchange-row {
        flex-wrap: wrap;
    }
}

/* Grid System */
.v3-grid {
    display: grid;
    gap: var(--v3-spacing-lg);
}

.v3-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.v3-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.v3-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.v3-grid-report {
    grid-template-columns: 350px 1fr;
}

/* Stats Cards */
.v3-stat-card {
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    padding: var(--v3-spacing-lg);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.v3-stat-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--v3-accent-primary) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.v3-stat-card:hover {
    border-color: var(--v3-accent-primary);
    box-shadow: var(--v3-glow-primary);
    transform: scale(1.02);
}

.v3-stat-card:hover::after {
    opacity: 0.1;
}

.v3-stat-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.v3-stat-card-link:hover {
    border-color: var(--v3-bullish);
    box-shadow: 0 4px 20px var(--v3-bullish-glow);
}

.v3-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--v3-accent-primary);
    margin-bottom: var(--v3-spacing-xs);
}

.v3-stat-label {
    color: var(--v3-text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Badges and Status Indicators */
.v3-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--v3-spacing-xs);
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: all 0.2s;
}

.v3-badge-success {
    background: linear-gradient(135deg, var(--v3-bullish), #059669);
    color: white;
    box-shadow: 0 2px 8px var(--v3-bullish-glow);
}

.v3-badge-running {
    background: linear-gradient(135deg, var(--v3-bullish), #059669);
    color: white;
    box-shadow: 0 2px 8px var(--v3-bullish-glow);
}

.v3-badge-danger {
    background: linear-gradient(135deg, var(--v3-bearish), #dc2626);
    color: white;
    box-shadow: 0 2px 8px var(--v3-bearish-glow);
}

.v3-badge-stopped {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
}

.v3-badge-warning {
    background: linear-gradient(135deg, var(--v3-accent-tertiary), #d97706);
    color: white;
}

.v3-badge-info {
    background: linear-gradient(135deg, var(--v3-accent-primary), #0891b2);
    color: white;
}

.v3-badge-primary {
    background: var(--v3-accent-primary);
    color: white;
}

/* Buttons */
.v3-btn {
    padding: 0.625rem 1.25rem;
    border-radius: var(--v3-radius-md);
    font-weight: 600;
    font-size: 0.9375rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: var(--v3-spacing-sm);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.v3-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.v3-btn:hover::before {
    width: 300px;
    height: 300px;
}

.v3-btn-primary {
    background: #0891b2;
    color: white;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.v3-btn-primary:hover {
    background: #0e7490;
    box-shadow: 0 6px 20px rgba(8, 145, 178, 0.5);
    transform: translateY(-2px);
}

.v3-btn-success {
    background: var(--v3-num-positive);
    color: white;
    box-shadow: 0 4px 12px var(--v3-num-positive-glow);
}

.v3-btn-success:hover {
    box-shadow: 0 6px 20px var(--v3-num-positive-glow);
    transform: translateY(-2px);
}

.v3-btn-danger {
    background: var(--v3-num-negative);
    color: white;
    box-shadow: 0 4px 12px var(--v3-num-negative-glow);
}

.v3-btn-danger:hover {
    box-shadow: 0 6px 20px var(--v3-num-negative-glow);
    transform: translateY(-2px);
}

.v3-btn-secondary {
    background: var(--v3-bg-secondary);
    color: var(--v3-text-primary);
    border: 1px solid var(--v3-border);
}

.v3-btn-secondary:hover {
    border-color: var(--v3-accent-primary);
    color: var(--v3-accent-primary);
}

/* Small button variant */
.v3-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Button Spinner - vertically centered */
.v3-btn-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: v3-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Report Loading Animation */
.v3-report-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    text-align: center;
}

.v3-report-loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 4px solid var(--v3-bg-secondary);
    border-top-color: var(--v3-accent-primary);
    border-radius: 50%;
    animation: v3-spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

.v3-report-loading p {
    color: var(--v3-text-secondary);
    font-size: 1rem;
    margin: 0;
    animation: v3-pulse-text 1.5s ease-in-out infinite;
}

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

/* Report Table Footer - Match header height */
.v3-report-footer {
    background: var(--v3-bg-secondary) !important;
    font-weight: bold;
    color: var(--v3-accent-primary) !important;
}

.v3-table.v3-report-table tfoot tr.v3-report-footer {
    background: var(--v3-bg-secondary);
    font-weight: bold;
    color: var(--v3-accent-primary);
}

.v3-table.v3-report-table tfoot tr.v3-report-footer td {
    padding: 1rem !important;
    line-height: 1;
    color: var(--v3-accent-primary);
    border-top: 3px solid var(--v3-accent-primary);
}

/* Form Elements */
.v3-form-group {
    margin-bottom: var(--v3-spacing-md);
}

.v3-form-label {
    display: block;
    color: var(--v3-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--v3-spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.v3-form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--v3-bg-secondary);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    color: var(--v3-text-primary);
    font-size: 1rem;
    transition: all 0.3s;
}

.v3-form-control:focus {
    outline: none;
    border-color: var(--v3-accent-primary);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.v3-form-control::placeholder {
    color: var(--v3-text-muted);
}

input.v3-form-control,
select.v3-form-control {
    height: 3rem;
    box-sizing: border-box;
}

input[type="date"].v3-form-control::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

[data-theme="light"] input[type="date"].v3-form-control::-webkit-calendar-picker-indicator {
    filter: none;
}

/* Override Bootstrap form classes for V3 dark theme */
.v3-card .card {
    background: var(--v3-bg-secondary);
    border: 1px solid var(--v3-border);
    color: var(--v3-text-primary);
}

.v3-card .card-header {
    background: var(--v3-bg-secondary);
    border-bottom: 1px solid var(--v3-border);
    color: var(--v3-accent-primary);
    font-weight: 600;
}

.v3-card .card-body {
    background: var(--v3-bg-card);
    color: var(--v3-text-primary);
}

.v3-card label,
.v3-card .col-form-label {
    color: var(--v3-text-secondary);
    font-weight: 500;
}

.v3-card .form-control,
.v3-card input[type="text"],
.v3-card input[type="number"],
.v3-card select,
.v3-card .card input[type="text"],
.v3-card .card input[type="number"],
.v3-card .card .form-control {
    background: var(--v3-bg-secondary) !important;
    border: 1px solid var(--v3-border);
    color: var(--v3-text-primary) !important;
}

.v3-card .form-control:focus,
.v3-card input:focus,
.v3-card select:focus,
.v3-card .card input:focus {
    background: var(--v3-bg-secondary) !important;
    border-color: var(--v3-accent-primary);
    color: var(--v3-text-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.v3-card .form-check-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--v3-bg-secondary) !important;
    border: 2px solid var(--v3-border) !important;
    width: 2.5em !important;
    height: 1.3em !important;
    border-radius: 2em !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background-image: none !important;
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

.v3-card .form-check-input:checked {
    background-color: var(--v3-accent-primary) !important;
    border-color: var(--v3-accent-primary) !important;
    background-image: none !important;
}

.v3-card .form-check-input::before {
    content: '' !important;
    position: absolute !important;
    width: 0.9em !important;
    height: 0.9em !important;
    border-radius: 50% !important;
    background: white !important;
    top: 50% !important;
    left: 0.15em !important;
    transform: translateY(-50%) !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.v3-card .form-check-input:checked::before {
    left: calc(100% - 1.05em) !important;
    background: white !important;
}

.v3-card .btn-primary {
    background: var(--v3-accent-primary);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

.v3-card .btn-primary:hover {
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
    transform: translateY(-2px);
}

/* Tables */
.v3-table-container {
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    overflow: hidden;
    margin-bottom: var(--v3-spacing-lg);
}

.v3-table {
    width: 100%;
    border-collapse: collapse;
}

.v3-table thead {
    background: var(--v3-bg-secondary);
}

.v3-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--v3-accent-primary);
    font-size: 0.9375rem;
    letter-spacing: 0.025em;
    border-bottom: 2px solid var(--v3-border);
}

.v3-table td {
    padding: 1rem;
    color: var(--v3-text-primary);
    border-bottom: 1px solid var(--v3-border);
    line-height: 2;
}

/* Report table specific styling - reduced row height */
.v3-table.v3-report-table td {
    padding: 0.5rem 1rem;
    line-height: 1;
}

.v3-table tbody tr {
    transition: background-color 0.2s;
    background: var(--v3-bg-card);
}

.v3-table tbody tr:hover {
    background: var(--v3-bg-hover);
}

.v3-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Action Buttons */
.v3-table .btn {
    background: var(--v3-bg-secondary);
    border: 1px solid var(--v3-border);
    color: var(--v3-text-primary);
    margin: 0 0.25rem;
    border-radius: var(--v3-radius-sm);
    transition: all 0.2s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    box-sizing: border-box;
    vertical-align: middle;
}

.v3-table .btn:hover {
    background: var(--v3-bg-hover);
    border-color: var(--v3-accent-primary);
    color: var(--v3-accent-primary);
    transform: scale(1.05);
}

.v3-table .btn:active {
    transform: scale(0.95);
}

/* Inset style for active toggle buttons */
.v3-table .btn-toggle-active {
    background: var(--v3-bg-base);
    border-color: var(--v3-accent-primary);
    color: var(--v3-accent-primary);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Invisible placeholder buttons */
.v3-table .btn-invisible {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* Ensure invisible buttons occupy same space as visible ones */
.v3-table .btn-invisible::before {
    font-family: "bootstrap-icons" !important;
    content: "\f1e5"; /* bi-circle icon as placeholder */
}

/* Coloured table action buttons: green for start, red for destructive actions.
   Light theme needs its own rules because [data-theme="light"] .v3-table .btn outranks a plain class pair. */
.v3-table .btn.v3-icon-success,
[data-theme="light"] .v3-table .btn.v3-icon-success {
    color: var(--v3-num-positive);
    border-color: var(--v3-num-positive);
}

.v3-table .btn.v3-icon-success:hover,
[data-theme="light"] .v3-table .btn.v3-icon-success:hover {
    background: var(--v3-num-positive-glow);
    color: var(--v3-num-positive);
    border-color: var(--v3-num-positive);
}

.v3-table .btn.v3-icon-danger,
[data-theme="light"] .v3-table .btn.v3-icon-danger {
    color: var(--v3-num-negative);
    border-color: var(--v3-num-negative);
}

.v3-table .btn.v3-icon-danger:hover,
[data-theme="light"] .v3-table .btn.v3-icon-danger:hover {
    background: var(--v3-num-negative-glow);
    color: var(--v3-num-negative);
    border-color: var(--v3-num-negative);
}

/* Light grey for the table action buttons that are neither green nor red (#502; grey since #504, the
   colour of the "Next multi-range check" label). An active toggle keeps the accent look so it still stands out. */
.v3-table .btn.v3-icon-primary,
[data-theme="light"] .v3-table .btn.v3-icon-primary {
    color: var(--v3-text-secondary);
    border-color: var(--v3-text-secondary);
}

.v3-table .btn.v3-icon-primary:hover,
[data-theme="light"] .v3-table .btn.v3-icon-primary:hover {
    background: var(--v3-text-secondary-glow);
    color: var(--v3-text-secondary);
    border-color: var(--v3-text-secondary);
}

.v3-table .btn.v3-icon-primary.btn-toggle-active {
    background: var(--v3-bg-base);
    border-color: var(--v3-accent-primary);
    color: var(--v3-accent-primary);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .v3-table .btn.v3-icon-primary.btn-toggle-active {
    background: #e0f2fe;
    border-color: #0284c7;
    color: #0284c7;
}

/* No border on the action buttons of the desktop bot tables and the positions tables nested in them (#506),
   in any colour, state or theme. The width stays, so the buttons do not change size. */
.v3-instance-table .btn,
.v3-instance-table .btn:hover,
.v3-instance-table .btn-toggle-active {
    border-color: transparent !important;
}

/* Profit / loss figures: profits and buys green, fees, losses and sells red, totals bold */
.v3-num-profit {
    color: var(--v3-num-positive) !important;
}

.v3-num-loss {
    color: var(--v3-num-negative) !important;
}

.v3-num-total {
    font-weight: 700 !important;
}

/* Blue figure (summary totals) and greyed-out figure (zero amounts, the "other" count) (#502) */
.v3-num-info {
    color: var(--v3-icon-primary) !important;
}

.v3-num-muted {
    color: var(--v3-text-muted) !important;
}

/* Light grey on the desktop bot pages: bot name, trade pair, the summary's allocation and base value (#504) */
.v3-num-secondary {
    color: var(--v3-text-secondary) !important;
}

/* Status pills in the desktop bot tables take the same light grey (#504). Dark theme only: the light
   theme's pills are solid colour with white text, and grey text would not be readable on them. */
.v3-instance-table .v3-status-pill {
    color: var(--v3-text-secondary);
}

/* Merged "Status / Awaited price" cell in the positions tables */
.v3-status-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.v3-awaited-price {
    font-variant-numeric: tabular-nums;
    color: var(--v3-text-secondary);
}

/* /instance merged Price / Status / Awaited price cell (#495): plain price, then the pill.
   The price keeps a minimum width so pills line up; a Buy limit placed pill carries its price and starts at the left edge. */
.v3-price-status-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.v3-price-level {
    font-variant-numeric: tabular-nums;
    min-width: 10ch;
}

/* Profit share bar: one solid colour per bar on a red (lowest) to green (highest) scale */
.v3-profit-share {
    width: 80px;
    height: 0.6rem;
    background: var(--v3-bg-secondary);
    border: 1px solid var(--v3-border);
    border-radius: 999px;
    overflow: hidden;
}

.v3-profit-share-fill {
    height: 100%;
    border-radius: 999px;
}

/* Clickable share header: cycles Profit share -> Trades share -> Ext. trades share (#502) */
.v3-positions-table th.v3-share-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.v3-positions-table th.v3-share-header .bi {
    margin-left: 0.3rem;
    font-size: 0.75rem;
    opacity: 0.7;
}

.v3-positions-table th.v3-share-header:hover {
    color: var(--v3-icon-primary);
}

/* Market price row between the two positions nearest the market price (#502), labelled only with
   the market price. Since #504: twice the old height, with separators above and below, and a line
   through its middle across 90 % of the row, rounded at both ends and broken by the label.
   The row is the line's containing block. The label hides the line beneath it by painting the row's
   own background, which every element between them inherits, so the gap follows the row's hover colour. */
.v3-positions-table tbody tr.v3-market-price-row {
    position: relative;
}

.v3-positions-table tr.v3-market-price-row td {
    height: 2.1rem;
    padding: 0 0.5rem;
    line-height: 1;
    vertical-align: middle;
    background: inherit;
    border-top: 1px solid var(--v3-border);
    border-bottom: 1px solid var(--v3-border);
}

.v3-market-price-row .v3-price-status-cell,
.v3-market-price-row .v3-status-cell {
    background: inherit;
}

.v3-market-price-line {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    height: 4.5px;
    margin-top: -2.25px;
    border-radius: 999px;
    background: var(--v3-market-price-colour);
    pointer-events: none;
}

/* Red / green swapped in #504: the row's tone class is unchanged, only its colour */
.v3-market-price-row.v3-market-price-up {
    --v3-market-price-colour: var(--v3-num-positive);
}

.v3-market-price-row.v3-market-price-down {
    --v3-market-price-colour: var(--v3-num-negative);
}

.v3-market-price-row.v3-market-price-neutral {
    --v3-market-price-colour: var(--v3-text-muted);
}

/* The negative margin cancels the padding, so the price stays where it lines up with the rows above */
.v3-market-price-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 0.5rem;
    margin: 0 -0.5rem;
    background: inherit;
    color: var(--v3-market-price-colour);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Ghost of the upper row's price and pill, so the label lines up under its awaited price */
.v3-market-price-ghost {
    visibility: hidden;
}

.v3-status-pill.v3-market-price-ghost-pill {
    background: inherit;
    border: 1px solid transparent;
    padding-top: 0;
    padding-bottom: 0;
}

.v3-status-cell.v3-market-price-awaited {
    justify-content: flex-end;
}

/* Status Pills for Table Rows */
.v3-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.v3-status-pill-new {
    background: rgba(6, 182, 212, 0.3);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.4);
}

.v3-status-pill-created {
    background: rgba(0, 212, 255, 0.3);
    color: var(--v3-accent-primary);
    border: 1px solid rgba(0, 212, 255, 0.4);
}

.v3-status-pill-running {
    background: rgba(16, 185, 129, 0.3);
    color: var(--v3-bullish);
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.v3-status-pill-error {
    background: rgba(239, 68, 68, 0.3);
    color: var(--v3-bearish);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.v3-status-pill-paused {
    background: rgba(239, 0, 0, 0.3);
    color: #ffe2f0;
    border: 1px solid rgba(219, 39, 119, 0.4);
}

.v3-status-pill-archived {
    background: rgba(107, 114, 128, 0.3);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.4);
}

.v3-status-pill-deleted {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.4);
}

.v3-status-pill-expiring {
    background: rgba(245, 158, 11, 0.25);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.v3-status-pill-recently-expired {
    background: rgba(249, 115, 22, 0.25);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.4);
}

.v3-status-pill-default {
    background: rgba(148, 163, 184, 0.3);
    color: var(--v3-text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

/* Position Status Pills - Following original GetPostionStatusColor pattern */
.v3-status-pill-pos-created {
    background: rgba(173, 216, 230, 0.3);
    color: #add8e6;
    border: 1px solid rgba(173, 216, 230, 0.5);
}

.v3-status-pill-pos-buylimitplaced {
    background: rgba(0, 169, 0, 0.3);
    color: #d7f3d7;
    border: 1px solid rgba(144, 238, 144, 0.5);
}

.v3-status-pill-pos-limitbought {
    background: rgba(0, 128, 0, 0.3);
    color: #00ff00;
    border: 1px solid rgba(0, 128, 0, 0.5);
}

.v3-status-pill-pos-error {
    background: rgba(255, 0, 0, 0.3);
    color: #ff6b6b;
    border: 1px solid rgba(255, 0, 0, 0.5);
}

.v3-status-pill-pos-stoplimitplaced {
    background: rgba(255, 127, 80, 0.3);
    color: #ff7f50;
    border: 1px solid rgba(255, 127, 80, 0.5);
}

.v3-status-pill-pos-stoplimitsold {
    background: rgba(240, 128, 128, 0.3);
    color: #f08080;
    border: 1px solid rgba(240, 128, 128, 0.5);
}

.v3-status-pill-pos-stoplimitsuspended {
    background: rgba(211, 211, 211, 0.3);
    color: #d3d3d3;
    border: 1px solid rgba(211, 211, 211, 0.5);
}

.v3-status-pill-pos-selllimitplaced {
    background: rgba(255, 127, 80, 0.3);
    color: #ff7f50;
    border: 1px solid rgba(255, 127, 80, 0.5);
}

.v3-status-pill-pos-waitforpriceincrease {
    background: rgba(0, 94, 241, 0.3);
    color: #f1f1f1;
    border: 1px solid rgba(189, 183, 107, 0.5);
}

.v3-status-pill-pos-bearrotation {
    background: rgba(244, 164, 96, 0.3);
    color: #f4a460;
    border: 1px solid rgba(244, 164, 96, 0.5);
}

.v3-status-pill-pos-buyordersuspended {
    background: rgba(21, 43, 21, 0.3);
    color: #d6d7d6;
    border: 1px solid rgba(152, 251, 152, 0.5);
}

.v3-status-pill-pos-gap {
    background: rgba(211, 211, 211, 0.3);
    color: #d3d3d3;
    border: 1px solid rgba(211, 211, 211, 0.5);
}

/* Table Row Status Colors - No background change, keep clean */
.v3-table-row-new,
.v3-table-row-created,
.v3-table-row-running,
.v3-table-row-error,
.v3-table-row-paused,
.v3-table-row-archived,
.v3-table-row-deleted,
.v3-table-row-default {
    background: var(--v3-bg-card) !important;
}

.v3-table-row-new:hover,
.v3-table-row-created:hover,
.v3-table-row-running:hover,
.v3-table-row-error:hover,
.v3-table-row-paused:hover,
.v3-table-row-archived:hover,
.v3-table-row-deleted:hover,
.v3-table-row-default:hover {
    background: var(--v3-bg-hover) !important;
}

/* Virtual bot row highlight */
.v3-table-row-virtual {
    background: rgba(124, 58, 237, 0.07) !important;
}

.v3-table-row-virtual:hover {
    background: rgba(124, 58, 237, 0.14) !important;
}

/* Bot type tag */
.v3-type-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.v3-type-tag-virtual {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.4);
}

/* Position Status Colors - Dark Theme Optimized */
.v3-table-row-pos-created {
    background: rgba(6, 182, 212, 0.1) !important;
}

.v3-table-row-pos-buy-limit {
    background: rgba(16, 185, 129, 0.1) !important;
}

.v3-table-row-pos-limit-bought {
    background: rgba(16, 185, 129, 0.15) !important;
}

.v3-table-row-pos-error {
    background: rgba(239, 68, 68, 0.12) !important;
}

.v3-table-row-pos-stop-limit {
    background: rgba(251, 146, 60, 0.12) !important;
}

.v3-table-row-pos-stop-sold {
    background: rgba(251, 113, 133, 0.12) !important;
}

.v3-table-row-pos-suspended {
    background: rgba(156, 163, 175, 0.1) !important;
}

.v3-table-row-pos-sell-limit {
    background: rgba(251, 146, 60, 0.12) !important;
}

.v3-table-row-pos-wait-increase {
    background: rgba(245, 158, 11, 0.12) !important;
}

.v3-table-row-pos-bear-rotation {
    background: rgba(251, 146, 60, 0.15) !important;
}

.v3-table-row-pos-buy-suspended {
    background: rgba(16, 185, 129, 0.08) !important;
}

.v3-table-row-pos-gap {
    background: rgba(156, 163, 175, 0.08) !important;
}

/* Loading Indicators */
.v3-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--v3-spacing-xl);
    gap: var(--v3-spacing-md);
}

.v3-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--v3-bg-secondary);
    border-top-color: var(--v3-accent-primary);
    border-radius: 50%;
    animation: v3-spin 0.8s linear infinite;
}

@keyframes v3-spin {
    to { transform: rotate(360deg); }
}

.v3-loading-text {
    color: var(--v3-text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Candlestick Loading Animation */
.v3-candles-loader {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 80px;
    gap: 8px;
}

.v3-candle {
    width: 12px;
    background: linear-gradient(to top, var(--v3-bullish), var(--v3-accent-primary));
    border-radius: 2px;
    animation: v3-candleAnimation 1.2s ease-in-out infinite;
    box-shadow: 0 2px 8px var(--v3-bullish-glow);
}

.v3-candle:nth-child(1) { height: 30px; animation-delay: 0s; }
.v3-candle:nth-child(2) { height: 50px; animation-delay: 0.1s; background: linear-gradient(to top, var(--v3-bearish), #dc2626); box-shadow: 0 2px 8px var(--v3-bearish-glow); }
.v3-candle:nth-child(3) { height: 65px; animation-delay: 0.2s; }
.v3-candle:nth-child(4) { height: 40px; animation-delay: 0.3s; background: linear-gradient(to top, var(--v3-bearish), #dc2626); box-shadow: 0 2px 8px var(--v3-bearish-glow); }
.v3-candle:nth-child(5) { height: 55px; animation-delay: 0.4s; }

@keyframes v3-candleAnimation {
    0%, 100% { 
        transform: scaleY(1); 
        opacity: 0.7; 
    }
    50% { 
        transform: scaleY(1.3); 
        opacity: 1; 
    }
}

/* Nested Tables Styling */
.v3-nested-table {
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    overflow: hidden;
}

.v3-nested-table thead {
    background: var(--v3-bg-secondary);
}

.v3-nested-table th {
    padding: 0.75rem;
    color: var(--v3-accent-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--v3-border);
}

.v3-nested-table td {
    padding: 0.75rem;
    color: var(--v3-text-primary);
    border-bottom: 1px solid var(--v3-border);
    line-height: 1.5;
}

/* Positions table with minimal padding */
.v3-positions-table {
    width: 100%;
    border-collapse: collapse;
}

.v3-positions-table thead tr {
    background: var(--v3-bg-secondary);
}

.v3-positions-table th {
    padding: 0.5rem;
    text-align: left;
    font-weight: 600;
    color: var(--v3-accent-primary);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--v3-border);
}

.v3-positions-table td {
    padding: 0.25rem 0.5rem;
    color: var(--v3-text-primary);
    border-bottom: 1px solid var(--v3-border);
    line-height: 2;
    font-size: 0.875rem;
}

.v3-positions-table tbody tr {
    border-bottom: 1px solid var(--v3-border);
}

.v3-nested-table tbody tr:hover {
    background: var(--v3-bg-hover);
}

.v3-nested-table tbody tr:last-child td {
    border-bottom: none;
}

/* Edit Form Container */
.v3-edit-form-container {
    background: var(--v3-bg-card);
    padding: 1.5rem;
    border-radius: var(--v3-radius-lg);
}

.v3-edit-form-container .card {
    background: var(--v3-bg-secondary);
    border: 1px solid var(--v3-border);
    color: var(--v3-text-primary);
}

.v3-edit-form-container .card-header {
    background: var(--v3-bg-secondary);
    border-bottom: 1px solid var(--v3-border);
    color: var(--v3-accent-primary);
    font-weight: 600;
}

.v3-edit-form-container .card-body {
    background: var(--v3-bg-card);
}

.v3-edit-form-container label,
.v3-edit-form-container .col-form-label {
    color: var(--v3-text-secondary);
}

.v3-edit-form-container input {
    background: var(--v3-bg-secondary);
    border: 1px solid var(--v3-border);
    color: var(--v3-text-primary);
}

.v3-edit-form-container input:focus {
    background: var(--v3-bg-secondary);
    border-color: var(--v3-accent-primary);
    color: var(--v3-text-primary);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.v3-edit-form-container .form-check-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--v3-bg-secondary) !important;
    border: 2px solid var(--v3-border) !important;
    width: 2.5em !important;
    height: 1.3em !important;
    border-radius: 2em !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background-image: none !important;
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

.v3-edit-form-container .form-check-input:checked {
    background-color: var(--v3-accent-primary) !important;
    border-color: var(--v3-accent-primary) !important;
    background-image: none !important;
}

.v3-edit-form-container .form-check-input:focus {
    border-color: var(--v3-accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.15) !important;
    outline: none !important;
    background-image: none !important;
}

.v3-edit-form-container .form-check-input::before {
    content: '' !important;
    position: absolute !important;
    width: 0.9em !important;
    height: 0.9em !important;
    border-radius: 50% !important;
    background: white !important;
    top: 50% !important;
    left: 0.15em !important;
    transform: translateY(-50%) !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.v3-edit-form-container .form-check-input:checked::before {
    left: calc(100% - 1.05em) !important;
    background: white !important;
}

.v3-edit-form-container .text-info {
    color: var(--v3-accent-primary) !important;
}

/* Button spacing in edit form */
.v3-edit-form-container .v3-btn {
    margin-right: 1rem;
}

.v3-edit-form-container .v3-btn:last-child {
    margin-right: 0;
}

/* Instance selection checkbox list */
.v3-instance-checkbox-list {
    max-height: 400px;
    overflow-y: auto;
    background: var(--v3-bg-secondary);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    padding: 0.75rem;
}

.v3-instance-checkbox-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: var(--v3-radius-sm);
    transition: background 0.2s;
    cursor: pointer;
}

.v3-instance-checkbox-item:hover {
    background: var(--v3-bg-hover);
}

.v3-instance-checkbox-item input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    position: relative;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #000 !important;
    border: 2px solid var(--v3-border) !important;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.v3-instance-checkbox-item input[type="checkbox"]:hover {
    border-color: var(--v3-accent-primary);
}

.v3-instance-checkbox-item input[type="checkbox"]:checked {
    background-color: var(--v3-accent-primary) !important;
    border-color: var(--v3-accent-primary) !important;
}

.v3-instance-checkbox-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0.15rem;
    width: 0.4rem;
    height: 0.7rem;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.v3-instance-checkbox-item label {
    cursor: pointer;
    margin: 0;
    flex: 1;
    color: var(--v3-text-primary);
}

/* Instance Info Cards */
.v3-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.v3-info-card {
    background: var(--v3-bg-secondary);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    padding: 1rem;
}

.v3-info-card-header {
    color: var(--v3-accent-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--v3-border);
}

.v3-info-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: var(--v3-text-secondary);
}

.v3-info-item-value {
    color: var(--v3-text-primary);
    font-weight: 600;
}

/* Pulse Loading Animation */
.v3-pulse-loader {
    display: flex;
    gap: 8px;
    align-items: center;
}

.v3-pulse-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--v3-accent-primary);
    animation: v3-pulse 1.4s ease-in-out infinite;
    box-shadow: 0 0 10px var(--v3-accent-primary);
}

.v3-pulse-dot:nth-child(1) { animation-delay: 0s; }
.v3-pulse-dot:nth-child(2) { animation-delay: 0.2s; }
.v3-pulse-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes v3-pulse {
    0%, 100% { 
        transform: scale(0.8); 
        opacity: 0.5; 
    }
    50% { 
        transform: scale(1.2); 
        opacity: 1; 
    }
}

/* Trading Chart Placeholder */
.v3-chart-placeholder {
    background: var(--v3-bg-secondary);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    padding: var(--v3-spacing-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* Alert/Message Boxes */
.v3-alert {
    padding: 1rem 1.25rem;
    border-radius: var(--v3-radius-md);
    margin-bottom: var(--v3-spacing-lg);
    border-left: 4px solid;
    display: flex;
    align-items: start;
    gap: var(--v3-spacing-md);
}

.v3-alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-left-color: var(--v3-bullish);
    color: var(--v3-text-primary);
}

.v3-alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border-left-color: var(--v3-bearish);
    color: var(--v3-text-primary);
}

.v3-alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-left-color: var(--v3-accent-tertiary);
    color: var(--v3-text-primary);
}

.v3-alert-info {
    background: rgba(0, 212, 255, 0.1);
    border-left-color: var(--v3-accent-primary);
    color: var(--v3-text-primary);
}

/* Version Switcher */
.v3-version-switcher {
    display: flex;
    gap: var(--v3-spacing-sm);
    padding: var(--v3-spacing-sm);
    background: var(--v3-bg-secondary);
    border-radius: var(--v3-radius-md);
    border: 1px solid var(--v3-border);
}

.v3-version-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--v3-text-secondary);
    border: none;
    border-radius: var(--v3-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.v3-version-btn:hover {
    background: var(--v3-bg-hover);
    color: var(--v3-text-primary);
}

.v3-version-btn.active {
    background: var(--v3-accent-primary);
    color: white;
}

/* Confirmation Modal */
.v3-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: v3-fadeIn 0.2s ease-out;
}

.v3-modal {
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    box-shadow: var(--v3-shadow-lg), var(--v3-glow-primary);
    max-width: 500px;
    width: 90%;
    animation: v3-slideUp 0.3s ease-out;
}

.v3-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--v3-border);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--v3-text-primary);
    font-family: var(--v3-font-display);
}

.v3-modal-header i {
    font-size: 1.5rem;
}

.v3-modal-body {
    padding: 1.5rem;
    color: var(--v3-text-secondary);
    line-height: 1.6;
    font-family: var(--v3-font-body);
}

.v3-modal-body p {
    margin: 0;
    white-space: pre-line;
}

/* Settings Page Styles */
.v3-settings-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.v3-settings-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.v3-setting-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--v3-border);
}

.v3-setting-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.v3-setting-item.v3-setting-nested {
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--v3-accent-primary);
}

.v3-setting-info {
    flex: 1;
}

.v3-setting-title {
    font-weight: 600;
    color: var(--v3-text-primary);
    margin-bottom: 0.25rem;
}

.v3-setting-description {
    font-size: 0.875rem;
    color: var(--v3-text-muted);
    line-height: 1.5;
}

.v3-setting-control {
    flex-shrink: 0;
}

/* Toggle Group */
.v3-toggle-group {
    display: flex;
    gap: 0;
    border-radius: var(--v3-radius-md);
    overflow: hidden;
    border: 1px solid var(--v3-border);
}

.v3-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--v3-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.v3-toggle-btn:not(:last-child) {
    border-right: 1px solid var(--v3-border);
}

.v3-toggle-btn:hover {
    background: var(--v3-bg-hover);
}

.v3-toggle-btn.active {
    background: var(--v3-accent-primary);
    color: var(--v3-bg-primary);
    font-weight: 600;
}

/* Switch Toggle */
.v3-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.v3-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.v3-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--v3-bg-hover);
    border: 1px solid var(--v3-border);
    transition: 0.3s;
    border-radius: 26px;
}

.v3-switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: var(--v3-text-secondary);
    transition: 0.3s;
    border-radius: 50%;
}

.v3-switch input:checked + .v3-switch-slider {
    background-color: var(--v3-accent-primary);
    border-color: var(--v3-accent-primary);
}

.v3-switch input:checked + .v3-switch-slider:before {
    transform: translateX(22px);
    background-color: var(--v3-bg-primary);
}

/* Info Box */
.v3-info-box {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--v3-radius-md);
    color: var(--v3-text-secondary);
}

.v3-info-box i {
    font-size: 1.5rem;
    color: var(--v3-accent-primary);
    flex-shrink: 0;
}

.v3-info-box strong {
    color: var(--v3-text-primary);
    display: block;
    margin-bottom: 0.25rem;
}

.v3-info-box p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Input Group */
.v3-input-group {
    display: flex;
    align-items: center;
}

.v3-input-group .v3-form-control {
    border-radius: 0;
    width: 80px;
}

.v3-input-group .v3-form-control:first-child {
    border-top-left-radius: var(--v3-radius-md);
    border-bottom-left-radius: var(--v3-radius-md);
}

.v3-input-group .v3-form-control:last-child {
    border-top-right-radius: var(--v3-radius-md);
    border-bottom-right-radius: var(--v3-radius-md);
}

.v3-input-prefix {
    padding: 0.5rem 0.75rem;
    background: var(--v3-bg-hover);
    border: 1px solid var(--v3-border);
    border-right: none;
    border-radius: var(--v3-radius-md) 0 0 var(--v3-radius-md);
    color: var(--v3-text-muted);
    font-size: 0.875rem;
}

.v3-input-suffix {
    padding: 0.5rem 0.75rem;
    background: var(--v3-bg-hover);
    border: 1px solid var(--v3-border);
    border-left: none;
    border-radius: 0 var(--v3-radius-md) var(--v3-radius-md) 0;
    color: var(--v3-text-muted);
    font-size: 0.875rem;
}

.v3-input-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Info Box Subtle Variant */
.v3-info-box-subtle {
    background: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.3);
}

.v3-info-box-subtle i {
    color: var(--v3-text-secondary);
}

/* Danger Card */
.v3-card-danger {
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.v3-card-danger .v3-card-header {
    border-bottom-color: rgba(239, 68, 68, 0.3);
}

/* Danger Buttons */
.v3-btn-outline-danger {
    background: transparent;
    border: 1px solid var(--v3-num-negative);
    color: var(--v3-num-negative);
}

.v3-btn-outline-danger:hover {
    background: var(--v3-num-negative-glow);
}

.v3-btn-danger {
    background: var(--v3-num-negative);
    border: 1px solid var(--v3-num-negative);
    color: white;
}

.v3-btn-danger:hover {
    background: var(--v3-num-negative);
    border-color: var(--v3-num-negative);
    filter: brightness(0.92);
}

.v3-btn-danger:disabled,
.v3-btn-outline-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Text Utilities */
.v3-text-danger {
    color: var(--v3-bearish) !important;
}

.v3-text-accent {
    color: var(--v3-accent-primary);
    font-weight: 600;
}

.v3-text-mono {
    font-family: monospace;
    font-size: 0.875rem;
    opacity: 0.7;
}

/* API Key Display */
.v3-api-key-display {
    font-family: monospace;
    font-size: 0.875rem;
    word-break: break-all;
    background: var(--v3-bg-secondary);
    padding: 0.75rem;
    border-radius: var(--v3-radius-md);
    border: 1px solid var(--v3-border);
}

/* Alert Info Box */
.v3-alert {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--v3-radius-md);
    margin-bottom: 1.5rem;
}

.v3-alert-info {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: var(--v3-text-secondary);
}

.v3-alert i {
    color: var(--v3-status-info);
    flex-shrink: 0;
}

.v3-alert strong {
    color: var(--v3-text-primary);
}

.v3-form-value {
    margin-bottom: 0.75rem;
}

/* Modal Enhancements for Settings */
.v3-modal-danger .v3-modal-header {
    background: rgba(239, 68, 68, 0.1);
    color: var(--v3-bearish);
}

.v3-modal-body ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.v3-modal-body li {
    margin-bottom: 0.5rem;
}

.v3-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--v3-border);
    background: var(--v3-bg-secondary);
}

.v3-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--v3-border);
    background: var(--v3-bg-secondary);
    border-radius: 0 0 var(--v3-radius-lg) var(--v3-radius-lg);
}

@keyframes v3-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes v3-slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   FIX: Light Theme Status Pills - More Contrast
   ============================================ */
[data-theme="light"] .v3-status-pill-pos-created {
    background: #1e40af;
    color: white;
}

[data-theme="light"] .v3-status-pill-pos-buylimitplaced {
    background: #13771b;
    color: white;
}

[data-theme="light"] .v3-status-pill-pos-limitbought {
    background: #166534;
    color: white;
}

[data-theme="light"] .v3-status-pill-pos-waitforpriceincrease {
    background: rgb(0, 94, 241);
    color: white;
}

[data-theme="light"] .v3-status-pill-pos-selllimitplaced {
    background: #c2410c;
    color: white;
}

[data-theme="light"] .v3-status-pill-pos-stoplimitplaced {
    background: #b91c1c;
    color: white;
}

[data-theme="light"] .v3-status-pill-pos-stoplimitsold {
    background: #dc2626;
    color: white;
}

[data-theme="light"] .v3-status-pill-pos-stoplimitsuspended {
    background: #4b5563;
    color: white;
}

[data-theme="light"] .v3-status-pill-pos-error {
    background: #991b1b;
    color: white;
}

[data-theme="light"] .v3-status-pill-pos-bearrotation {
    background: #9a3412;
    color: white;
}

[data-theme="light"] .v3-status-pill-pos-buyordersuspended {
    background: rgb(21, 43, 21);
    color: white;
}

[data-theme="light"] .v3-status-pill-pos-gap {
    background: #6b7280;
    color: white;
}

/* Instance status pills in light theme */
[data-theme="light"] .v3-status-pill-running {
    background: #15803d;
    color: white;
}

[data-theme="light"] .v3-status-pill-paused {
    background: #f00000;
    color: white;
}

[data-theme="light"] .v3-status-pill-error {
    background: #b91c1c;
    color: white;
}

[data-theme="light"] .v3-status-pill-new {
    background: #1e40af;
    color: white;
}

[data-theme="light"] .v3-status-pill-created {
    background: #0e7490;
    color: white;
}

[data-theme="light"] .v3-status-pill-archived {
    background: #4b5563;
    color: white;
}

[data-theme="light"] .v3-status-pill-deleted {
    background: #b91c1c;
    color: white;
}

[data-theme="light"] .v3-status-pill-expiring {
    background: #b45309;
    color: white;
}

[data-theme="light"] .v3-status-pill-recently-expired {
    background: #c2410c;
    color: white;
}

/* ============================================
   FIX: Light Theme Toast Messages - Light Background
   ============================================ */
[data-theme="light"] .v3-toast-container .alert,
[data-theme="light"] .alert-info,
[data-theme="light"] .alert-success,
[data-theme="light"] .alert-warning,
[data-theme="light"] .alert-danger {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .alert-info {
    background-color: #eff6ff;
    border-left: 4px solid #3b82f6;
    color: #1e40af;
}

[data-theme="light"] .alert-success {
    background-color: #f0fdf4;
    border-left: 4px solid #22c55e;
    color: #166534;
}

[data-theme="light"] .alert-warning {
    background-color: #fffbeb;
    border-left: 4px solid #f59e0b;
    color: #92400e;
}

[data-theme="light"] .alert-danger {
    background-color: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #991b1b;
}

/* ============================================
   FIX: Order Side Pills (Buy=Green, Sell=Red)
   ============================================ */
.v3-order-side-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.v3-order-side-buy {
    background: rgba(16, 185, 129, 0.2);
    color: var(--v3-bullish);
    border: 1px solid var(--v3-bullish);
}

.v3-order-side-sell {
    background: rgba(239, 68, 68, 0.2);
    color: var(--v3-bearish);
    border: 1px solid var(--v3-bearish);
}

/* Light theme order side pills */
[data-theme="light"] .v3-order-side-buy {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

[data-theme="light"] .v3-order-side-sell {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

/* ============================================
   FIX: Toggle Switches - Immediate Feedback
   Override Bootstrap's form-check-input to use
   CSS-only toggle that updates immediately
   ============================================ */
.v3-card .form-switch .form-check-input,
.v3-edit-form-container .form-switch .form-check-input,
.v3-card .form-check.form-switch .form-check-input,
.card .form-switch .form-check-input,
.card .form-check.form-switch .form-check-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--v3-bg-secondary, #374151) !important;
    background-image: none !important;
    border: 2px solid var(--v3-border, #4b5563) !important;
    width: 2.5em !important;
    height: 1.25em !important;
    border-radius: 2em !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
    margin-right: 0.5rem !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

.v3-card .form-switch .form-check-input::before,
.v3-edit-form-container .form-switch .form-check-input::before,
.v3-card .form-check.form-switch .form-check-input::before,
.card .form-switch .form-check-input::before,
.card .form-check.form-switch .form-check-input::before {
    content: '' !important;
    position: absolute !important;
    width: 0.85em !important;
    height: 0.85em !important;
    border-radius: 50% !important;
    background: var(--v3-text-secondary, #9ca3af) !important;
    top: 50% !important;
    left: 0.15em !important;
    transform: translateY(-50%) !important;
    transition: left 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.v3-card .form-switch .form-check-input:checked,
.v3-edit-form-container .form-switch .form-check-input:checked,
.v3-card .form-check.form-switch .form-check-input:checked,
.card .form-switch .form-check-input:checked,
.card .form-check.form-switch .form-check-input:checked {
    background-color: var(--v3-accent-primary, #00d4ff) !important;
    border-color: var(--v3-accent-primary, #00d4ff) !important;
    background-image: none !important;
}

.v3-card .form-switch .form-check-input:checked::before,
.v3-edit-form-container .form-switch .form-check-input:checked::before,
.v3-card .form-check.form-switch .form-check-input:checked::before,
.card .form-switch .form-check-input:checked::before,
.card .form-check.form-switch .form-check-input:checked::before {
    left: calc(100% - 1em) !important;
    background: white !important;
}

.v3-card .form-switch .form-check-input:focus,
.v3-edit-form-container .form-switch .form-check-input:focus,
.v3-card .form-check.form-switch .form-check-input:focus,
.card .form-switch .form-check-input:focus,
.card .form-check.form-switch .form-check-input:focus {
    border-color: var(--v3-accent-primary, #00d4ff) !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
}

/* Light theme toggle adjustments */
[data-theme="light"] .v3-card .form-switch .form-check-input,
[data-theme="light"] .v3-edit-form-container .form-switch .form-check-input,
[data-theme="light"] .card .form-switch .form-check-input {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .v3-card .form-switch .form-check-input::before,
[data-theme="light"] .v3-edit-form-container .form-switch .form-check-input::before,
[data-theme="light"] .card .form-switch .form-check-input::before {
    background: #94a3b8 !important;
}

[data-theme="light"] .v3-card .form-switch .form-check-input:checked,
[data-theme="light"] .v3-edit-form-container .form-switch .form-check-input:checked,
[data-theme="light"] .card .form-switch .form-check-input:checked {
    background-color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}

[data-theme="light"] .v3-card .form-switch .form-check-input:checked::before,
[data-theme="light"] .v3-edit-form-container .form-switch .form-check-input:checked::before,
[data-theme="light"] .card .form-switch .form-check-input:checked::before {
    background: white !important;
}