/* Autopilot Component */
/* Extends existing card and list components for autopilot-specific layouts */

/* ===== BROKERAGE CONNECTIONS ===== */

.brokerage-connections-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.brokerage-connection-item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    transition: var(--transition-fast);
}

.brokerage-connection-item:hover {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-hover);
    text-decoration: none;
}

.connection-account-meta {
    min-width: 0;
    padding-left: var(--spacing-sm);
}

.connection-account-name-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.connection-account-name-row h6 {
    max-width: 220px;
}

/* ===== PENDING TRADES ===== */

.pending-trades-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.pending-trade-item {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    transition: var(--transition-fast);
    gap: var(--spacing-sm);
}

.pending-trade-item:hover {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-hover);
}

.trade-action {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.trade-action.buy {
    background: var(--success-light);
    color: var(--success-color);
}

.trade-action.sell {
    background: var(--danger-light);
    color: var(--danger-color);
}

.trade-action.square {
    width: 50px;
    height: 50px;
}

.pending-approvals-table .trade-action {
    min-width: 52px;
    padding: 0.2rem 0.55rem;
}

.pending-shares-control {
    gap: 0.15rem;
}

.pending-shares-control .pending-shares-input {
    width: 65px;
    min-width: 65px;
    font-size: 0.8rem;
}

.pending-shares-control .pending-shares-stepper {
    gap: 0.1rem;
}

.pending-shares-control .btn {
    min-width: 16px;
    min-height: 16px;
    line-height: 1;
    padding: 0;
    font-size: 0.6rem;
}

.pending-shares-control .btn .bi {
    font-size: 0.5rem;
    line-height: 1;
}

/* ===== AUTOPILOT STATUS ===== */

.autopilot-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) 0;
}

.connection-secondary-row {
    gap: var(--spacing-sm);
}

.connection-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.connection-status-dot.connected {
    background: #22c55e;
}

.connection-status-dot.failed {
    background: #ef4444;
}

.connection-status-dot.pending {
    background: #9ca3af;
}

.linked-portfolio-link {
    font-weight: 600;
}

.toggle-positions-btn .positions-toggle-icon {
    transition: transform 0.2s ease;
}

.toggle-positions-btn[aria-expanded="true"] .positions-toggle-icon {
    transform: rotate(180deg);
}

/* ===== BROKERAGE GRID (Modal) ===== */

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

.brokerage-option {
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
}

.brokerage-option:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.brokerage-option img {
    max-width: 100%;
    height: 60px;
    object-fit: contain;
    margin-bottom: var(--spacing-sm);
}

.brokerage-option .brokerage-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

/* ===== AUTOPILOT SETTINGS ===== */

#maxTradeAmount {
    --allocation-progress: 0%;
}

#maxTradeAmount::-webkit-slider-runnable-track {
    background: linear-gradient(
        to right,
        #0d6efd 0%,
        #0d6efd var(--allocation-progress),
        #dee2e6 var(--allocation-progress),
        #dee2e6 100%
    );
}

#maxTradeAmount::-moz-range-track {
    background: #dee2e6;
}

#maxTradeAmount::-moz-range-progress {
    background: #0d6efd;
}

/* ===== RESPONSIVE STYLES ===== */

@media (max-width: 768px) {
    .brokerage-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--spacing-sm);
    }

    .brokerage-connection-item,
    .pending-trade-item {
        padding: var(--spacing-sm);
    }

    .autopilot-status {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .connection-account-name-row h6 {
        max-width: 150px;
        font-size: 0.95rem;
    }

    .trade-action {
        font-size: 0.75rem;
    }

    .pending-shares-control .pending-shares-input {
        width: 45px;
        min-width: 45px;
    }

}