/* MT5 WordPress Connector - Main Styles */

.mt5-dashboard {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f5f7fa;
    min-height: 100vh;
}

.profit-positive {
    color: #28a745;
}

.profit-negative {
    color: #dc3545;
}

.wp-list-table {
    border-collapse: collapse;
}

.wp-list-table th {
    border-bottom: 2px solid #e0e0e0 !important;
}

.wp-list-table tr:hover {
    background: #f8f9fa !important;
}

/* ===============================
   FRONTEND + MOBILE RESPONSIVE FIX
   =============================== */

.mt5-frontend-dashboard {
    padding: 10px;
    box-sizing: border-box;
}

.mt5-frontend-dashboard .mt5-dashboard {
    min-height: auto !important;
}

/* Fix two column layout */
@media (max-width: 992px) {
    .mt5-frontend-dashboard > .wrap > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* Earnings cards grid */
@media (max-width: 768px) {
    .earnings-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Charts full width */
.mt5-frontend-dashboard canvas {
    max-width: 100% !important;
}

/* Tables scroll on mobile */
.mt5-frontend-dashboard table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

/* Reduce padding on cards */
@media (max-width: 768px) {
    .mt5-frontend-dashboard div[style*="padding: 25px"] {
        padding: 14px !important;
    }

    .mt5-frontend-dashboard h1 {
        font-size: 20px !important;
    }

    .mt5-frontend-dashboard h3 {
        font-size: 16px !important;
    }
}

/* Fix chart container height on small screens */
@media (max-width: 600px) {
    .mt5-frontend-dashboard canvas {
        height: 260px !important;
    }
}

/* Prevent horizontal overflow */
body {
    overflow-x: hidden;
}

@media (max-width: 1200px) {
    .dashboard-header {
        flex-direction: column;
        text-align: center;
    }
    
    .dashboard-header > div:last-child {
        margin-top: 15px;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .mt5-dashboard > div:last-child {
        grid-template-columns: 1fr !important;
    }
}