/* project_0/assets/css/playerDetailedStatsUI.css */

/* Inherits from style.css, so only overrides and specific styles here */

#player-detailed-stats-view-container {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure it takes full viewport height */
    box-sizing: border-box;
    background-color: var(--dark-bg); /* Match main theme background */
    color: var(--text-primary);
}

.detailed-stats-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-m) var(--spacing-l);
    border-bottom: 2px solid var(--accent-interactive);
    background-color: var(--glass-tint); /* Slight tint for header */
    flex-shrink: 0; /* Header should not shrink */
}

.detailed-stats-header h1 {
    font-size: 1.6em;
    color: var(--accent-interactive);
    margin: 0;
    text-align: center;
    flex-grow: 1; /* Allow title to take space */
}

.detailed-stats-header .back-button {
    /* Uses general .button styling from style.css */
    /* Potentially add specific icon or text styling if needed */
    font-size: 0.9em;
    padding: var(--spacing-s) var(--spacing-m);
    margin-right: var(--spacing-l); /* Space between button and title */
}

#detailed-stats-main-content {
    flex-grow: 1; /* Allow main content to fill available space */
    padding: var(--spacing-l);
    overflow-y: auto; /* Enable scrolling for the content area */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns for stat groups */
    gap: var(--spacing-l);
    align-content: start; /* Align items to the start of the grid */
}

.stat-group-panel {
    background-color: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-l);
    padding: var(--spacing-l);
    box-shadow: var(--shadow-s); /* Subtle shadow for depth */
    display: flex;
    flex-direction: column; /* Stack title and list vertically */
}

.stat-group-panel h2 {
    font-size: 1.25em; /* Clear group titles */
    color: var(--text-primary);
    margin: 0 0 var(--spacing-m) 0;
    padding-bottom: var(--spacing-s);
    border-bottom: 1px solid var(--accent-interactive); /* Consistent separator */
    text-transform: capitalize;
    font-weight: 600;
}

.detailed-stat-list { /* Changed from .stat-group-panel ul */
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.detailed-stat-list .stat-entry { /* Changed from .stat-group-panel li.stat-entry */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-s) var(--spacing-xs); /* Slightly less vertical padding */
    border-bottom: 1px dotted var(--border-color-subtle); /* Softer separator for individual stats */
    font-size: 0.95em;
    line-height: 1.5;
    transition: background-color 0.15s ease-in-out;
}
.detailed-stat-list .stat-entry:hover {
    background-color: rgba(var(--accent-interactive-rgb), 0.07); /* Interactive hover */
}
.detailed-stat-list .stat-entry:last-child {
    border-bottom: none;
}

.stat-entry .stat-name-detailed {
    color: var(--text-secondary);
    margin-right: var(--spacing-l); /* More space between name and value */
    flex-shrink: 0; /* Prevent name from shrinking too much */
}

.stat-entry .stat-value-detailed {
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
    text-align: right;
    white-space: nowrap; /* Prevent value from wrapping */
    background-color: rgba(0,0,0,0.2);
    padding: var(--spacing-xxs) var(--spacing-s);
    border-radius: var(--radius-s);
}

.loading-text {
    grid-column: 1 / -1; /* Span all columns if grid is active */
    text-align: center;
    font-style: italic;
    color: var(--text-secondary);
    font-size: 1.1em;
    padding: var(--spacing-xl);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .detailed-stats-header h1 {
        font-size: 1.4em;
    }
    #detailed-stats-main-content {
        grid-template-columns: 1fr; /* Single column for stat groups on smaller tablets/mobile */
        padding: var(--spacing-m);
        gap: var(--spacing-m);
    }
    .stat-group-panel {
        padding: var(--spacing-m);
    }
    .stat-group-panel h2 {
        font-size: 1.15em;
    }
    .detailed-stat-list .stat-entry {
        padding: var(--spacing-s) 0; /* Adjust padding for mobile */
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .detailed-stats-header {
        padding: var(--spacing-s) var(--spacing-m);
        flex-direction: column-reverse; /* Stack title below button for space */
        gap: var(--spacing-s);
    }
    .detailed-stats-header .back-button {
        align-self: flex-start; /* Align button to left */
        margin-right: 0;
        margin-bottom: var(--spacing-s);
    }
    .detailed-stats-header h1 {
        font-size: 1.25em;
        width: 100%;
        text-align: center;
    }

    .stat-entry .stat-name-detailed {
        margin-right: var(--spacing-s); /* Less margin */
    }
    .stat-entry .stat-value-detailed {
        padding: var(--spacing-xxs) var(--spacing-xs); /* Smaller padding for value */
        font-size: 0.95em;
    }
}