/* Component-specific CSS for merged HyperWatcher frontend */

/* Toggle Switch Component migrated to components-core.css (Phase 2) */

/* Phase 3 Migration: Dashboard layout & stat card styles moved to styles/dashboard.css */
/* Removed: .dashboard-grid, .dashboard-card*, .dashboard-stats, .dashboard-stat-card, .stat-value, .stat-label */

/* Strategy Builder Components - Layout handled in strategy-builder.css */

.rule-group {
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.rule-group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.rule-group__title {
    font-weight: 600;
    color: var(--color-text);
}

.rule-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rule-item:last-child {
    margin-bottom: 0;
}

/* Backtest Components */
.backtest-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.backtest-results {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.backtest-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.metric-card {
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
}

.metric-value {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Trade Components */
.trade-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.trade-parameters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.trade-summary {
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

/* Wallet Components */
.wallet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.wallet-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.wallet-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.wallet-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.wallet-card__name {
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.wallet-card__address {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    word-break: break-all;
    margin-bottom: var(--spacing-md);
}

.wallet-card__actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Paginated Table Components */
.paginated-table {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.paginated-table__header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-gray-50);
}

.paginated-table__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.paginated-table__controls {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.paginated-table__table {
    width: 100%;
    border-collapse: collapse;
}

.paginated-table__footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: between;
    align-items: center;
    background: var(--color-gray-50);
}

.pagination {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.pagination__button {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--font-size-sm);
}

.pagination__button:hover:not(:disabled) {
    background: var(--color-gray-50);
}

.pagination__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination__button--active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.pagination__info {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 var(--spacing-md);
}

/* Search and Filter Components */
.search-filters {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.search-filters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.search-input {
    position: relative;
}

.search-input__icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
}

.search-input input {
    padding-left: 2.5rem;
}

/* Status Indicators migrated to status.css (Phase 2) */

/* Progress Bars migrated to status.css (Phase 2) */

/* Code & JSON Display migrated to data-display.css (Phase 2) */

/* Responsive adjustments */
@media (max-width: 1024px) {
    .trade-parameters {
        grid-template-columns: 1fr;
    }

    /* Dashboard responsive rule moved */
}

@media (max-width: 768px) {

    /* Dashboard stats responsive rule moved */
    .backtest-metrics {
        grid-template-columns: 1fr;
    }

    .wallet-grid {
        grid-template-columns: 1fr;
    }

    .paginated-table__header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }

    .paginated-table__controls {
        justify-content: center;
    }

    .search-filters__grid {
        grid-template-columns: 1fr;
    }

    .toggle-switch {
        margin-right: 0;
        justify-content: center;
    }
}

/* Quick Time Range Buttons */
.quick-ranges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .quick-ranges {
        flex-direction: column;
    }

    .quick-ranges .btn {
        justify-content: center;
    }
}