/* === MODULE 8: PLAYER REPORT (EXTENDED) === */

.report-profile-block {
    display: flex;
    flex-direction: row; /* Visual Left, Text Right */
    align-items: flex-start; /* Align to top because visual is longer */
    gap: 60px;
    margin-bottom: 80px;
}

/* Card Container - Taller now */
.report-card-ui {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    width: 100%;
    max-width: 550px;
    font-family: 'Montserrat', sans-serif;
}

/* Header */
.rc-header {
    background: #0f172a; padding: 15px 25px;
    border-bottom: 1px solid #334155;
    display: flex; justify-content: space-between; align-items: center;
}
.rc-label { font-size: 0.75rem; font-weight: 700; color: #64748b; letter-spacing: 1px; }
.btn-download-pdf {
    background: #ef4444; color: #fff; border: none; padding: 6px 14px; border-radius: 6px;
    font-size: 0.75rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: background 0.2s;
}
.btn-download-pdf:hover { background: #dc2626; }
.btn-download-pdf .icon { font-size: 0.9rem; }

/* Body & Sections */
.rc-body { padding: 25px; }

.rc-section { margin-bottom: 25px; }
.rc-divider { height: 1px; background: #334155; margin: 25px -25px; } /* Full width divider */


/* --- 1. Main Info --- */
.rc-main-info { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; }
.rc-avatar-wrapper { position: relative; }
.rc-avatar {
    width: 70px; height: 70px; background: #334155; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800; color: #fff; border: 2px solid #475569;
}
.rc-status {
    position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
    padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.rc-status.starter { background: #22c55e; color: #fff; }

.rc-details { flex: 1; }
.p-name { font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
.p-meta { display: flex; flex-direction: column; gap: 2px; }
.p-pos { font-size: 0.8rem; color: #3b82f6; font-weight: 700; }
.p-age { font-size: 0.75rem; color: #94a3b8; }

.rc-ovr-badge {
    background: #0f172a; border: 1px solid #334155;
    padding: 10px; border-radius: 8px; text-align: center; min-width: 70px;
}
.rc-ovr-badge .lbl { display: block; font-size: 0.7rem; color: #64748b; font-weight: 700; }
.rc-ovr-badge .val { display: block; font-size: 2rem; color: #fff; font-weight: 800; line-height: 1; }


/* --- 2. Stats Grid (3 Columns) --- */
.rc-stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); /* Changed to 3 */
    gap: 10px; margin-bottom: 25px;
}
.stat-box {
    background: #0f172a; padding: 10px 5px; border-radius: 8px; border: 1px solid #334155; text-align: center;
}
.s-val { display: block; font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.s-val.highlight { color: #4ade80; }
.s-val.rating { color: #facc15; }
.s-lbl { font-size: 0.65rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; }


/* --- 3. Progress Bar --- */
.pa-header {
    display: flex; justify-content: space-between; margin-bottom: 6px;
    font-size: 0.75rem; color: #cbd5e1; font-weight: 600;
}
.pa-track { height: 6px; background: #334155; border-radius: 3px; overflow: hidden; }
.pa-fill { height: 100%; background: #3b82f6; border-radius: 3px; }


/* --- NEW CHARTS GENERAL STYLES --- */
.chart-title {
    font-size: 0.9rem; color: #fff; font-weight: 700; margin-bottom: 15px; text-transform: uppercase;
}
.chart-container { position: relative; margin-bottom: 15px; }
.rc-svg-chart { width: 100%; overflow: visible; }
.grid-line-soft { stroke: #334155; stroke-width: 1; stroke-dasharray: 4; }


/* --- 4. OVR Chart Specifics --- */
.ovr-chart .rc-svg-chart { height: 150px; }
.chart-area-blue { fill: rgba(59, 130, 246, 0.2); }
.chart-line-blue { fill: none; stroke: #3b82f6; stroke-width: 3; }
.chart-dot-blue { fill: #1e293b; stroke: #3b82f6; stroke-width: 2; }
.chart-labels-x {
    display: flex; justify-content: space-between; padding: 0 10px; margin-top: 5px;
    font-size: 0.7rem; color: #94a3b8;
}

/* OVR Summary Footer */
.chart-summary-footer {
    display: flex; background: #0f172a; border-radius: 8px; padding: 15px; border: 1px solid #334155;
}
.cs-box { flex: 1; text-align: center; border-right: 1px solid #334155; }
.cs-box:last-child { border-right: none; }
.cs-lbl { display: block; font-size: 0.7rem; color: #94a3b8; margin-bottom: 4px; }
.cs-val { font-size: 1.1rem; font-weight: 800; color: #fff; }
.cs-val.neg { color: #ef4444; }
.cs-val.status { font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 5px; }


/* --- 5. Skills Chart Specifics --- */
.skills-chart .rc-svg-chart { height: 180px; }
.line-phys { stroke: #22c55e; } /* Green */
.line-tech { stroke: #3b82f6; } /* Blue */
.line-tact { stroke: #a855f7; } /* Purple */
.line-ment { stroke: #f97316; } /* Orange */

/* Legend */
.chart-legend {
    display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-bottom: 15px;
}
.legend-item {
    font-size: 0.75rem; color: #cbd5e1; display: flex; align-items: center; gap: 6px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.tech { background: #3b82f6; }
.dot.phys { background: #22c55e; }
.dot.tact { background: #a855f7; }
.dot.ment { background: #f97316; }

/* Skills Summary Footer */
.skills-summary-footer {
    display: flex; gap: 10px;
}
.ss-box {
    flex: 1; background: #0f172a; border-radius: 8px; padding: 12px; border: 1px solid #334155;
    text-align: center;
}
.ss-lbl { display: block; font-size: 0.7rem; color: #94a3b8; margin-bottom: 4px; font-weight: 700; }
.ss-val { font-size: 1rem; font-weight: 800; }
.ss-val.pos { color: #22c55e; }
.ss-val.neg { color: #ef4444; }


/* Responsive */
@media (max-width: 900px) {
    .report-profile-block { flex-direction: column-reverse; gap: 30px; align-items: center; }
    .feature-visual { width: 100%; }
}

/* --- Pro Tip Box (Space Filler) --- */
.pro-tip-box {
    margin-top: 30px;
    background: rgba(59, 130, 246, 0.05); /* Very light blue bg */
    border-left: 4px solid #3b82f6;
    padding: 20px;
    border-radius: 0 8px 8px 0;
}

.pt-head {
    font-size: 0.75rem; font-weight: 800; color: #3b82f6; 
    margin-bottom: 8px; letter-spacing: 0.5px;
}

.pro-tip-box p {
    margin: 0; font-size: 0.85rem; color: #cbd5e1; font-style: italic; line-height: 1.6;
}

/* Update grid to be single column if needed for height, or keep as is */
/* If the text is still too short, we can increase the gap between benefit items */
.benefit-item {
    margin-bottom: 20px; /* Add breathing room */
}