/* === MODULE 4.2: PERFORMANCE MATRIX (FIXED DOTS) === */

.matrix-block {
    margin-top: 80px;
}

/* Card Container */
.matrix-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    max-width: 600px;
    margin: 0 auto;
}

/* Header & Legend */
.mtx-header {
    background: #0f172a;
    padding: 15px 20px;
    border-bottom: 1px solid #334155;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; gap: 10px;
}

.mtx-title {
    font-size: 0.9rem; font-weight: 700; color: #fff;
}

.mtx-legend {
    display: flex; gap: 12px;
}
.l-item { font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; gap: 4px; text-transform: uppercase; }
.l-item .dot { width: 8px; height: 8px; border-radius: 50%; display: block; }

/* Colors for Legend HTML Elements */
.l-item.star { color: #22c55e; } .l-item.star .dot { background: #22c55e; }
.l-item.pros { color: #3b82f6; } .l-item.pros .dot { background: #3b82f6; }
.l-item.work { color: #eab308; } .l-item.work .dot { background: #eab308; }
.l-item.rot  { color: #94a3b8; } .l-item.rot  .dot { background: #94a3b8; }


/* --- Chart Area --- */
.mtx-chart-area {
    padding: 20px;
    background: radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, transparent 80%);
}

.mtx-svg { width: 100%; height: auto; overflow: visible; }

/* Zones Background */
.zone { opacity: 0.08; stroke: none; }
.z-green { fill: #22c55e; }
.z-blue { fill: #3b82f6; }
.z-yellow { fill: #eab308; }
.z-gray { fill: #94a3b8; }

/* Lines */
.m-axis { stroke: #64748b; stroke-width: 1; }
.m-grid { stroke: #334155; stroke-width: 1; stroke-dasharray: 4 2; opacity: 0.5; }
.m-grid.mid { stroke: #fff; opacity: 0.1; }

/* --- DOTS STYLING (FIXED) --- */
.m-dot { 
    stroke: #1e293b; /* Dark border to define the dot */
    stroke-width: 1.5px;
    paint-order: stroke;
    transition: r 0.2s, stroke-width 0.2s;
}

/* Explicit SVG Fill Colors */
.m-dot.star { fill: #22c55e; } /* Green */
.m-dot.pros { fill: #3b82f6; } /* Blue */
.m-dot.work { fill: #eab308; } /* Yellow */
.m-dot.rot  { fill: #94a3b8; } /* Gray */

.m-dot:hover { 
    r: 6px; 
    stroke: #fff; 
    stroke-width: 2px; 
    cursor: pointer; 
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
}

/* Labels */
.axis-label { 
    font-size: 8px; fill: #64748b; font-weight: 600; text-anchor: middle; 
}


/* --- Footer Summary Grid --- */
.mtx-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #334155;
    border-top: 1px solid #334155;
}

.m-box {
    background: #1e293b;
    padding: 15px;
}

/* Color borders for boxes */
.b-pros { border-top: 3px solid #3b82f6; }
.b-star { border-top: 3px solid #22c55e; }
.b-rot  { border-top: 3px solid #94a3b8; }
.b-work { border-top: 3px solid #eab308; }

.m-box strong {
    display: block; font-size: 0.8rem; margin-bottom: 5px; font-weight: 800;
}
.m-box p {
    margin: 0; font-size: 0.75rem; color: #cbd5e1; line-height: 1.4;
}

/* Responsive */
@media (max-width: 600px) {
    .mtx-footer { grid-template-columns: 1fr; }
    .mtx-legend { display: grid; grid-template-columns: 1fr 1fr; }
}