/*
 Modern Trader X9 Enterprise Platform
 Sprint 2.3 - Production Dashboard
*/

#page-dashboard {
    --mx9-bg: #07111f;
    --mx9-card: rgba(13, 27, 46, 0.92);
    --mx9-card-soft: rgba(19, 38, 63, 0.78);
    --mx9-border: rgba(100, 152, 213, 0.19);
    --mx9-text: #f2f7ff;
    --mx9-muted: #91a6c3;
    --mx9-green: #22d89a;
    --mx9-red: #ff5f76;
    --mx9-yellow: #ffcf5a;
    --mx9-blue: #4ea8ff;
    --mx9-purple: #a879ff;
    color: var(--mx9-text);
}

#page-dashboard .mx9-dashboard {
    width: 100%;
    min-width: 0;
    padding: 4px;
}

#page-dashboard .mx9-dashboard * {
    box-sizing: border-box;
}

#page-dashboard .mx9-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

#page-dashboard .mx9-dashboard-title h1 {
    margin: 0 0 6px;
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

#page-dashboard .mx9-dashboard-title p {
    margin: 0;
    color: var(--mx9-muted);
    font-size: 14px;
}

#page-dashboard .mx9-live-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid var(--mx9-border);
    border-radius: 999px;
    background: var(--mx9-card);
    color: var(--mx9-muted);
    white-space: nowrap;
}

#page-dashboard .mx9-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mx9-green);
    box-shadow: 0 0 14px rgba(34, 216, 154, 0.8);
    animation: mx9Pulse 1.7s infinite;
}

#page-dashboard .mx9-live-dot.error {
    background: var(--mx9-red);
    box-shadow: 0 0 14px rgba(255, 95, 118, 0.8);
}

@keyframes mx9Pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.42; transform: scale(0.78); }
}

#page-dashboard .mx9-finance-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

#page-dashboard .mx9-stat-card,
#page-dashboard .mx9-panel {
    border: 1px solid var(--mx9-border);
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(78, 168, 255, 0.07), transparent 38%),
        var(--mx9-card);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.19);
}

#page-dashboard .mx9-stat-card {
    min-height: 118px;
    padding: 16px;
    overflow: hidden;
}

#page-dashboard .mx9-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

#page-dashboard .mx9-stat-label {
    color: var(--mx9-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

#page-dashboard .mx9-stat-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--mx9-border);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 16px;
}

#page-dashboard .mx9-stat-value {
    font-size: clamp(20px, 2vw, 29px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    overflow-wrap: anywhere;
}

#page-dashboard .mx9-stat-sub {
    margin-top: 9px;
    color: var(--mx9-muted);
    font-size: 12px;
}

#page-dashboard .mx9-positive { color: var(--mx9-green) !important; }
#page-dashboard .mx9-negative { color: var(--mx9-red) !important; }
#page-dashboard .mx9-neutral { color: var(--mx9-muted) !important; }
#page-dashboard .mx9-warning { color: var(--mx9-yellow) !important; }
#page-dashboard .mx9-blue { color: var(--mx9-blue) !important; }

#page-dashboard .mx9-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
    gap: 14px;
    margin-bottom: 14px;
}

#page-dashboard .mx9-panel {
    padding: 17px;
    min-width: 0;
}

#page-dashboard .mx9-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

#page-dashboard .mx9-panel-title h2 {
    margin: 0;
    font-size: 16px;
    letter-spacing: -0.01em;
}

#page-dashboard .mx9-panel-title span {
    color: var(--mx9-muted);
    font-size: 12px;
}

#page-dashboard .mx9-performance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

#page-dashboard .mx9-mini-card {
    min-height: 94px;
    padding: 13px;
    border: 1px solid var(--mx9-border);
    border-radius: 13px;
    background: var(--mx9-card-soft);
}

#page-dashboard .mx9-mini-label {
    margin-bottom: 10px;
    color: var(--mx9-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

#page-dashboard .mx9-mini-value {
    font-size: 20px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

#page-dashboard .mx9-gauge-wrap {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
}

#page-dashboard .mx9-gauge {
    --gauge-value: 0deg;
    position: relative;
    width: 158px;
    height: 158px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #0b1728 0 57%, transparent 58%),
        conic-gradient(
            from 225deg,
            var(--mx9-red) 0deg,
            var(--mx9-yellow) 67.5deg,
            var(--mx9-green) 135deg,
            rgba(255, 255, 255, 0.08) 135deg 270deg,
            transparent 270deg
        );
    transform: rotate(0deg);
}

#page-dashboard .mx9-gauge::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px solid var(--mx9-border);
    pointer-events: none;
}

#page-dashboard .mx9-gauge-needle {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 50%;
    width: 3px;
    height: 53px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 9px rgba(255,255,255,.55);
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(var(--gauge-value));
    transition: transform 0.65s ease;
}

#page-dashboard .mx9-gauge-center {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

#page-dashboard .mx9-gauge-info strong {
    display: block;
    margin-bottom: 5px;
    font-size: 28px;
}

#page-dashboard .mx9-gauge-info small {
    color: var(--mx9-muted);
    line-height: 1.5;
}

#page-dashboard .mx9-progress-block {
    margin-top: 18px;
}

#page-dashboard .mx9-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--mx9-muted);
    font-size: 12px;
}

#page-dashboard .mx9-progress-track {
    height: 11px;
    overflow: hidden;
    border: 1px solid var(--mx9-border);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
}

#page-dashboard .mx9-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mx9-blue), var(--mx9-purple), var(--mx9-green));
    transition: width 0.55s ease;
}

#page-dashboard .mx9-ai-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

#page-dashboard .mx9-ai-card {
    padding: 14px;
    border: 1px solid var(--mx9-border);
    border-radius: 13px;
    background: var(--mx9-card-soft);
}

#page-dashboard .mx9-ai-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--mx9-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

#page-dashboard .mx9-ai-card strong {
    display: block;
    font-size: 17px;
    overflow-wrap: anywhere;
}

#page-dashboard .mx9-summary-box {
    margin-top: 12px;
    padding: 15px;
    border: 1px solid rgba(78,168,255,.22);
    border-radius: 13px;
    background: rgba(78,168,255,.055);
    color: #cddcf0;
    font-size: 13px;
    line-height: 1.62;
}

#page-dashboard .mx9-status-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

#page-dashboard .mx9-status-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 12px;
    border: 1px solid var(--mx9-border);
    border-radius: 13px;
    background: var(--mx9-card-soft);
}

#page-dashboard .mx9-status-light {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mx9-red);
    box-shadow: 0 0 10px rgba(255,95,118,.55);
}

#page-dashboard .mx9-status-light.online {
    background: var(--mx9-green);
    box-shadow: 0 0 10px rgba(34,216,154,.6);
}

#page-dashboard .mx9-status-light.warning {
    background: var(--mx9-yellow);
    box-shadow: 0 0 10px rgba(255,207,90,.55);
}

#page-dashboard .mx9-status-card strong {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
}

#page-dashboard .mx9-status-card small {
    display: block;
    color: var(--mx9-muted);
    font-size: 10px;
    overflow-wrap: anywhere;
}

#page-dashboard .mx9-error-message {
    display: none;
    margin-bottom: 13px;
    padding: 11px 13px;
    border: 1px solid rgba(255,95,118,.32);
    border-radius: 12px;
    background: rgba(255,95,118,.08);
    color: #ffb3be;
    font-size: 12px;
}

#page-dashboard .mx9-error-message.visible {
    display: block;
}

#page-dashboard .mx9-last-update {
    margin-top: 13px;
    color: var(--mx9-muted);
    font-size: 11px;
    text-align: right;
}

@media (max-width: 1250px) {
    #page-dashboard .mx9-finance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #page-dashboard .mx9-status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    #page-dashboard .mx9-main-grid {
        grid-template-columns: 1fr;
    }

    #page-dashboard .mx9-performance-grid,
    #page-dashboard .mx9-ai-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    #page-dashboard .mx9-dashboard {
        padding: 0;
    }

    #page-dashboard .mx9-dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    #page-dashboard .mx9-live-state {
        justify-content: center;
    }

    #page-dashboard .mx9-finance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #page-dashboard .mx9-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #page-dashboard .mx9-gauge-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

@media (max-width: 430px) {
    #page-dashboard .mx9-finance-grid,
    #page-dashboard .mx9-performance-grid,
    #page-dashboard .mx9-ai-grid,
    #page-dashboard .mx9-status-grid {
        grid-template-columns: 1fr;
    }

    #page-dashboard .mx9-panel,
    #page-dashboard .mx9-stat-card {
        border-radius: 13px;
    }
}

/* Sprint 2.3.2 - Daily target final states */
#page-dashboard .mx9-progress-fill[data-state="reached"] {
    width: 100%;
    filter: saturate(1.15) brightness(1.08);
    box-shadow: 0 0 16px rgba(34, 216, 154, 0.38);
}

#page-dashboard .mx9-progress-fill[data-state="negative"] {
    width: 0% !important;
    box-shadow: none;
}