/* Variables */
:root {
    --primary-color: #5F1EC0;
    --primary-color-75-transparent: rgba(95, 30, 192, 0.75);
    --primary-color-50-transparent: rgba(95, 30, 192, 0.5);
    --primary-color-30-transparent: rgba(95, 30, 192, 0.3);
}

/* Navigation */
.navbar .navbar-nav .nav-link {
    transition: color 0.3s ease;
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 8px;
}

/* Cards */
.card {
    border: none;
    transition: transform 0.3s ease;
}

.card:not(.transparent):hover {
    transform: translateY(-5px);
}

.card.transparent {
    background-color: transparent;
    transition: none;
}

.card-header {
    border-bottom: none;
}

/* Buttons */
.custom-outline-btn,
.dynamic-btn {
    background-color: transparent;
}

.custom-outline-btn {
    border-color: var(--bs-gray-400);
}

.custom-outline-btn:hover {
    border-color: var(--bs-gray-600);
    color: var(--primary-color);
}

.dynamic-btn {
    font-size: 0.7rem;
    color: var(--bs-gray-900);
    border: none;
    padding: 0.5rem 1rem;
}

.dynamic-btn:hover {
    color: var(--primary-color-75-transparent);
}

.dynamic-btn:focus,
.dynamic-btn.active,
.dynamic-btn:active {
    color: var(--primary-color);
    outline: none;
}

/* DataTables */
.dataTable {
    font-size: 0.7rem;
}

table.dataTable tbody tr {
    height: 30px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_info {
    font-size: 0.8rem;
}

/* Progress */
.progress {
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
}

.progress-bar {
    background-color: var(--primary-color-50-transparent);
    color: white;
    text-align: center;
    transition: width 0.6s ease;
    font-size: 0.5rem;
    padding-left: 0.5rem;
}

/* Colors */
.text-custom-gray-600 {
    color: var(--bs-gray-600);
}

.bg-custom-gray-100 {
    background-color: var(--bs-gray-100);
}

.bg-custom-gray-200 {
    background-color: var(--bs-gray-200);
}

/* Chart */
.model-achart-container {
    padding: 10px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar-brand img {
        max-width: 12% !important;
    }
    
    .navbar-brand .fs-3 {
        font-size: 1.25rem !important;
    }
}

.py-custom {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.text-primary {
    color: var(--primary-color-75-transparent) !important;
}

/* List Group */
.list-group-item {
    background-color: transparent !important;
    margin-bottom: -1px;
    border: 1px solid var(--bs-gray-300) !important;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s ease;
}

.list-group-item:hover {
    border-color: var(--primary-color-75-transparent) !important;
    z-index: 2;
}

.list-group-item.active,
.list-group-item.active:hover {
    background-color: var(--primary-color-75-transparent) !important;
    color: white !important;
    z-index: 3;
}

.list-group-item.active span,
.list-group-item.active:hover span {
    color: white !important;
}

/* Expand Button */
.expand-button {
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: -1px;
}

.expand-button:hover {
    opacity: 0.8;
}

.expand-button:focus {
    outline: none;
    box-shadow: none;
}

.expand-button i {
    transition: transform 0.3s ease;
}

.expand-button.expanded i {
    transform: rotate(180deg);
}

.expand-button span {
    transition: opacity 0.2s ease;
}

.expand-button:hover span {
    opacity: 0.8;
}

/* Wallet Connect */
.btn-outline-light,
.btn-wallet-connect {
    color: white;
    border: 1px solid white;
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-outline-light:hover,
.btn-wallet-connect:hover {
    color: var(--primary-color);
    background-color: white;
    border-color: white;
}

.text-secondary-gray {
    color: #6c757d;
}






/* 表格透明背景覆盖样式 */
#TaurusPositionDetails table.table,
#TaurusPositionDetails table.table thead,
#TaurusPositionDetails table.table tbody,
#TaurusPositionDetails table.table tr,
#TaurusPositionDetails table.table th,
#TaurusPositionDetails table.table td {
    background-color: transparent !important;
}

/* 确保表格行hover时也保持透明 */
#TaurusPositionDetails table.table tr:hover {
    background-color: transparent !important;
}

/* Pisces Position表格透明背景覆盖样式 */
#PiscesPositionDetails table.table,
#PiscesPositionDetails table.table thead,
#PiscesPositionDetails table.table tbody,
#PiscesPositionDetails table.table tr,
#PiscesPositionDetails table.table th,
#PiscesPositionDetails table.table td {
    background-color: transparent !important;
}

/* 确保Pisces表格行hover时也保持透明 */
#PiscesPositionDetails table.table tr:hover {
    background-color: transparent !important;
}
#AquariusPositionDetails table.table,
#AquariusPositionDetails table.table thead,
#AquariusPositionDetails table.table tbody,
#AquariusPositionDetails table.table tr,
#AquariusPositionDetails table.table th,
#AquariusPositionDetails table.table td {
    background-color: transparent !important;
}
#AquariusPositionDetails table.table tr:hover {
    background-color: transparent !important;
}
/* Main Spot Tokens表格透明背景覆盖样式 */
#MainSpotTokens table.table,
#MainSpotTokens table.table thead,
#MainSpotTokens table.table tbody,
#MainSpotTokens table.table tr,
#MainSpotTokens table.table th,
#MainSpotTokens table.table td {
    background-color: transparent !important;
}

/* 确保Main Spot Tokens表格行hover时也保持透明 */
#MainSpotTokens table.table tr:hover {
    background-color: transparent !important;
}

/* Normal Tokens表格透明背景覆盖样式 */
#NormalSpot table.table,
#NormalSpot table.table thead,
#NormalSpot table.table tbody,
#NormalSpot table.table tr,
#NormalSpot table.table th,
#NormalSpot table.table td {
    background-color: transparent !important;
}

/* 确保Normal Tokens表格行hover时也保持透明 */
#NormalSpot table.table tr:hover {
    background-color: transparent !important;
}

/* Account Setting表格透明背景覆盖样式 */
#AccountSetting table.table,
#AccountSetting table.table thead,
#AccountSetting table.table tbody,
#AccountSetting table.table tr,
#AccountSetting table.table th,
#AccountSetting table.table td {
    background-color: transparent !important;
}

/* 确保Account Setting表格行hover时也保持透明 */
#AccountSetting table.table tr:hover {
    background-color: transparent !important;
}

/* Active Orders表格透明背景覆盖样式 */
#ActiveOrders table.table,
#ActiveOrders table.table thead,
#ActiveOrders table.table tbody,
#ActiveOrders table.table tr,
#ActiveOrders table.table th,
#ActiveOrders table.table td {
    background-color: transparent !important;
}

/* 确保Active Orders表格行hover时也保持透明 */
#ActiveOrders table.table tr:hover {
    background-color: transparent !important;
}

/*  添加 CSS 规则来设置 Account Setting 表格第一列的宽度  */
#AccountSetting table.table tr td:nth-child(1) {
    width: 60%; /* 设置第一列宽度为 30% */
}

/* 确保开关颜色与图标一致 */
.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    opacity: 0.75 !important;
}
/* 添加COMPLETED状态图标样式 */
/* .bi-check-square-fill.status-completed {
    color: var(--bs-primary) !important;
    opacity: 0.75 !important;
} */
/* 修改UniMMR图标颜色，使与卡片头背景色匹配 */
.bi-check-circle-fill.text-primary {
    color: var(--bs-primary) !important;
    opacity: 0.75 !important;
}

/* 使Account Setting中的status-dot可见 */
a[href="#AccountSetting"] .status-dot {
    display: inline-block !important;
    opacity: 1 !important;
}

.wallet-icon {
    position: relative;
    text-align: center;
    color: #6c757d;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: not-allowed;
}

/* 状态点动画 */
@keyframes statusPulse {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}

/* 状态点闪动动画 - 不再使用 */
/* @keyframes statusFlash {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(1); }
} */

.status-dot {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1px;
    font-size: 0.35em;
    opacity: 0.4; /* 默认透明度设置为0.4 */
    /* 默认隐藏呼吸灯 */
    display: none;
}

/* 添加透明度变化动画类 */
.status-dot-flash {
    display: inline-block !important;
    animation: statusPulse 1s 1;
}

.status-dot.offline {
    color: rgba(255, 80, 80, 0.9);
    animation: none;
}



.wallet-icon.not-installed {
    color: #6c757d;
    background-color: rgba(108, 117, 125, 0.1);
    opacity: 0.7;
}

.wallet-icon.active {
    color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.1);
    cursor: pointer;
}

.wallet-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: grayscale(100%) opacity(50%);
}

.status-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #dc3545;
}



.wallet-icon.active .status-badge {
    background-color: #0d6efd;
}

.wallet-icon:hover.installed,
.wallet-icon:hover.active {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}



/* 完全移除快速操作列表的所有悬停效果 */
.quick-actions-list .list-group-item {
    cursor: default;
    border-left: 0;
    border-right: 0;
    border-color: rgba(0,0,0,.125);
    transition: none !important;
    pointer-events: none;
}

.quick-actions-list .list-group-item:hover,
.quick-actions-list .list-group-item:active,
.quick-actions-list .list-group-item:focus {
    background-color: #fff !important;
    z-index: auto;
    border-color: rgba(0,0,0,.125) !important;
    transform: none !important;
}

.quick-actions-list .list-group-item:first-child {
    border-top: 1px solid rgba(0,0,0,.125);
}

.quick-actions-list .list-group-item:last-child {
    border-bottom: 0;
}

/* Add chart-related styles */
.custom-outline-btn {
    background-color: transparent;
    border: 1px solid var(--bs-gray-400);
    transition: all 0.2s ease-in-out;
}

.custom-outline-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
}

.custom-outline-btn:focus {
    box-shadow: none;
}

/* 指标选择下拉按钮样式 */
.indicator-dropdown .btn.custom-outline-btn {
    border: 1px solid var(--bs-gray-400);
    background-color: transparent;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease-in-out;
}

.indicator-dropdown .btn.custom-outline-btn:hover,
.indicator-dropdown .btn.custom-outline-btn.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
}

.indicator-dropdown .btn.custom-outline-btn .text-custom-gray-600 {
    color: var(--bs-gray-700) !important;
    transition: color 0.2s ease-in-out;
}

.indicator-dropdown .btn.custom-outline-btn:hover .text-custom-gray-600,
.indicator-dropdown .btn.custom-outline-btn.active .text-custom-gray-600 {
    color: var(--primary-color) !important;
}

.indicator-dropdown .selected-count {
    color: var(--bs-gray-600);
    transition: color 0.2s ease-in-out;
}

.indicator-dropdown .btn.custom-outline-btn:hover .selected-count,
.indicator-dropdown .btn.custom-outline-btn.active .selected-count {
    color: var(--primary-color);
}

.indicator-dropdown .dropdown-menu {
    border: 1px solid var(--bs-gray-300);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.indicator-dropdown .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Wallet Connect Button */
.btn-wallet-connect:hover {
    color: var(--primary-color);
    background-color: white;
    border-color: white;
}

/* Equal height for Trading Console row cards */
.trading-console-row {
    display: flex !important;
    align-items: stretch;
    flex-wrap: wrap;
}
.trading-console-row > .col-lg-6 {
    display: flex !important;
    flex-direction: column;
}
/* 左侧 Trading Console 卡片 */
.trading-console-row > .col-lg-6:first-child .card {
    flex: 1 1 auto !important;
}
/* 右侧包含 Taurus 和 Pisces 的嵌套行 */
.trading-console-row > .col-lg-6:last-child {
    display: flex !important;
    flex-direction: column;
}
.trading-console-row > .col-lg-6:last-child .row {
    display: flex !important;
    flex: 1;
    flex-wrap: wrap;
    height: 100%;
}
.trading-console-row > .col-lg-6:last-child .row > .col-md-6 {
    display: flex !important;
    flex-direction: column;
}
.trading-console-row > .col-lg-6:last-child .row > .col-md-6 .card {
    flex: 1 1 auto !important;
    min-height: 100%;
}

/* 添加User Account和Order Status卡片的响应式样式 */
.row.align-items-stretch {
    display: flex !important;
    align-items: stretch;
    flex-wrap: wrap;
}
.row.align-items-stretch > .col-lg-6 {
    display: flex !important;
    flex-direction: column;
}
/* User Account卡片 */
.row.align-items-stretch > .col-lg-6:first-child .card {
    flex: 1 1 auto !important;
    display: flex;
    flex-direction: column;
}
/* Order Status卡片 */
.row.align-items-stretch > .col-lg-6:last-child .card {
    flex: 1 1 auto !important;
    display: flex;
    flex-direction: column;
}

/* 在小屏幕上的特殊处理 */
@media (max-width: 991.98px) {
    .row.align-items-stretch > .col-lg-6:first-child,
    .trading-console-row > .col-lg-6:first-child {
        margin-bottom: 1rem;
    }
    #Order-status {
        margin-top: 0 !important;
    }
}

/* Wallet Connect Modal Button Styles */
.btn.btn-primary:disabled {
    background-color: var(--bs-primary) !important;
    opacity: 0.4 !important;
    border: none !important;
    color: #fff !important;
    cursor: not-allowed;
}
.btn.btn-primary:not(:disabled) {
    background-color: var(--bs-primary) !important;
    opacity: 0.75 !important;
    border: none !important;
}
/* 按钮中的图标样式 */
.btn.btn-primary img.white-icon {
    filter: brightness(0) invert(1);
}

/* 确保通过固定ID指定的下拉按钮在active状态下显示紫色边框和文字 */
#Taurus-dropdown-button.active,
#Pisces-dropdown-button.active,
#Aquarius-dropdown-button.active {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
/* 强制所有 active 状态下的下拉按钮内部所有文字（span）均采用紫色 */
#Taurus-dropdown-button.active span,
#Pisces-dropdown-button.active span,
#Aquarius-dropdown-button.active span {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.custom-outline-btn:hover span,
.custom-outline-btn:focus span {
    color: var(--primary-color) !important;
}
.card-header.bg-primary .card-title span > img[src$=".svg"] {
    filter: brightness(0) invert(1) !important;
}
.refresh-icon {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.refresh-icon:hover {
    opacity: 1;
}

/* 通用按钮悬浮和点击效果 */
.btn-hover-effect {
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-hover-effect:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    filter: brightness(1.1);
}

.btn-hover-effect:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    filter: brightness(0.95);
}

/* 右侧时间按钮的悬浮和激活状态样式 */
#1H-button:hover,
#2H-button:hover,
#1D-button:hover,
#1H-button.active,
#2H-button.active,
#1D-button.active {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    /* background-color: transparent !important;
    box-shadow: none !important; */
}

#1H-button:hover span,
#2H-button:hover span,
#1D-button:hover span,
#1H-button.active span,
#2H-button.active span,
#1D-button.active span {
    color: var(--primary-color) !important;
}

/* 覆盖Bootstrap的.btn.active样式 */
.btn.btn-outline.custom-outline-btn.active {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Removed legacy #gravityark-fund overrides; using utility class .btn-ghost instead to keep buttons link-like without locking colors */

.btn-ghost {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.btn-ghost:hover,
.btn-ghost:focus,
.btn-ghost:active {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}



.cursor-pointer {
    cursor: pointer;
}

.transaction-details {
    transition: all 0.3s ease;
}

.status-toggle-icon {
    transition: transform 0.3s ease;
}

#Order-status .list-group-item[data-content-type="task-status"] {
    border-top-color: var(--primary-color-75-transparent) !important;
}