/* css/views/progress.css */

/* Styles specific to the #progress section */

#progress .content-header {
    /* Specific styles for the progress view header, if any */
    margin-bottom: 30px; /* As per your original styles */
}
#progress .content-header h1 {
    /* font-size: 1.8rem; (Handled by generic .content-header h1) */
}
#progressPlaceholder {
    /* text-align: center; (Handled by utility class) */
    /* color: var(--text-muted); (Handled by utility class) */
    padding: 30px;
    font-size: 1.1rem;
}

.progress-dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between overall card and unit grid */
}

/* Overall Subject Progress Card */
.overall-progress-card {
    /* Generic .card styles apply from components.css */
    /* border: 1px solid var(--border-color); (Handled by .card) */
}
.overall-progress-card .card-header h3 {
    /* Generic .card-header h3 styles apply */
    /* Specific icon styling if needed */
}
.overall-progress-card .card-header h3 .mr-2 { /* For icon */
    margin-right: 0.5rem;
    color: var(--accent-primary);
}
.overall-progress-card .card-body {
    display: flex;
    flex-direction: column; /* Stack chart and stats on small screens */
    align-items: center;
    gap: 20px;
    padding: 25px;
}
@media (min-width: 768px) { /* Side-by-side on larger screens */
    .overall-progress-card .card-body {
        flex-direction: row;
        justify-content: space-around; /* Or space-between/evenly */
        align-items: center; /* Vertically align chart and stats */
    }
}

.overall-progress-chart-container {
    position: relative;
    width: 180px;
    height: 180px;
    margin-bottom: 15px; /* Space below chart if stats are below it */
}
@media (min-width: 768px) {
    .overall-progress-chart-container {
        margin-bottom: 0; /* No bottom margin if side-by-side */
        margin-right: 20px; /* Space to the right of chart */
    }
}
.overall-progress-chart-container canvas { /* Ensure canvas displays correctly */
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.overall-progress-text { /* Text inside doughnut chart */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    font-family: var(--font-secondary);
}

.overall-progress-stats-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    min-width: 200px; /* Give stats section some width */
}
.overall-progress-stats-summary .stat-line {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.overall-progress-stats-summary .stat-line strong.status-text { /* Target specific strong tags */
    font-weight: 600;
    min-width: 30px; /* Align numbers */
    display: inline-block;
    margin-right: 5px;
}
/* Status specific text colors for the count in summary */
.overall-progress-stats-summary .stat-line .status-learned { color: var(--status-learned-text); }
.overall-progress-stats-summary .stat-line .status-revising { color: var(--status-revising-text); }
.overall-progress-stats-summary .stat-line .status-need-help { color: var(--status-need-help-text); }
.overall-progress-stats-summary .stat-line .status-todo { color: var(--status-todo-text); }


/* Unit-wise Progress Grid */
.unit-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.unit-progress-card { /* Extends generic .card */
    /* background-color, border, border-radius, base shadow from .card */
    display: flex;
    flex-direction: column; /* Ensure footer is at bottom */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* From original styles */
}
.unit-progress-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-strong) 0px 5px 15px 0px; /* From original styles */
}

.unit-progress-card .card-header {
    /* Generic .card-header styles apply */
    /* Specific overrides for unit card header: */
    padding: 12px 15px;
}
.unit-progress-card .unit-title { /* h4 inside card-header */
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
.unit-progress-card .unit-completion-badge {
    /* Generic .badge styles apply from components.css */
    /* Specifics for this badge: */
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 8px;
    /* Background and text color will be set dynamically by JS adding classes like: */
    /* .bg-success-light, .text-success-dark (from base.css or components.css) */
    /* Or directly via style attribute if using JS to set specific var() colors */
}
/* Example of how dynamic classes for badge might look, assuming base.css defines these */
.unit-completion-badge.bg-success-light { background-color: rgba(var(--success-rgb), 0.15); }
.unit-completion-badge.text-success-dark { color: var(--success); }
.unit-completion-badge.bg-primary-light { background-color: rgba(var(--accent-primary-rgb), 0.15); }
.unit-completion-badge.text-primary-dark { color: var(--accent-primary); }
/* etc. for warning, danger, default */


.unit-progress-card .card-body {
    padding: 15px;
    flex-grow: 1;
}

/* Progress bar in unit cards uses generic .progress-bar-container.large-progress and .progress-bar */
/* Color classes like .bg-success, .bg-warning are applied by JS and styled in components.css */

.unit-topic-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for stats */
    gap: 10px 15px;
    margin-top: 15px;
}
.unit-topic-stats .stat-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}
.unit-topic-stats .stat-item .count {
    font-weight: 700;
    font-size: 1.1rem;
    margin-right: 6px;
    min-width: 25px;
    text-align: right;
}
.unit-topic-stats .stat-item .label {
    color: var(--text-secondary);
}
/* Specific text colors for stat counts in unit cards */
.unit-topic-stats .stat-item.status-learned .count { color: var(--status-learned-text); }
.unit-topic-stats .stat-item.status-revising .count { color: var(--status-revising-text); }
.unit-topic-stats .stat-item.status-need-help .count { color: var(--status-need-help-text); }
.unit-topic-stats .stat-item.status-todo .count { color: var(--status-todo-text); }

.unit-progress-card .card-footer {
    /* Generic .card-footer styles apply */
    padding: 10px 15px;
    text-align: right;
}
.unit-progress-card .focus-unit-btn {
    /* Generic .btn .btn-sm .btn-outline-primary styles apply */
    font-size: 0.85rem; /* From original styles */
}

/* Responsive Adjustments for Progress View */
@media (max-width: 767px) {
    .overall-progress-card .card-body {
        padding: 20px; /* From original styles */
    }
    .overall-progress-chart-container {
        width: 150px;
        height: 150px;
    }
    .overall-progress-text {
        font-size: 2rem;
    }
    .overall-progress-stats-summary {
        align-items: center; /* Center stats text */
        text-align: center;
    }
     .unit-topic-stats {
        grid-template-columns: 1fr; /* Stack stats */
    }
    .unit-topic-stats .stat-item {
        justify-content: center; /* Center stat items */
    }
}