/* css/views/assessmentTracker.css */

/* Styles specific to the #assessment-tracker section */

#assessment-tracker .content-header {
    /* Specific styles for the assessment tracker header, if any */
    margin-bottom: 30px;
}
#assessment-tracker .content-header h1 {
    /* font-size: 1.8rem; (Handled by generic .content-header h1) */
}
#assessmentTrackerPlaceholder { /* If you have a placeholder for this view */
    padding: 30px;
    font-size: 1.1rem;
    text-align: center;
    color: var(--text-muted);
}

.assessment-tracker-layout {
    display: grid;
    grid-template-columns: 1fr; /* Default: Stack panels */
    gap: 25px;
}
@media (min-width: 992px) { /* Two-column layout on larger screens */
    .assessment-tracker-layout {
        grid-template-columns: minmax(350px, 1fr) 2fr; /* Form panel, then overview panel */
    }
}

/* Both panels share some base card styling */
.add-assessment-panel.card,
.assessment-overview-panel.card {
    /* Generic .card styles apply */
    /* border: 1px solid var(--border-color); (Handled by .card) */
    display: flex; /* Added to allow card-body to grow */
    flex-direction: column;
}
.add-assessment-panel .card-body,
.assessment-overview-panel .card-body {
    flex-grow: 1; /* Allow card bodies to fill space if panels have fixed height (they don't here) */
}


.add-assessment-panel .card-header h3,
.assessment-overview-panel .card-header h3,
.assessment-overview-panel h4 { /* For "Assessment Log" title if it's an h4 */
    /* Generic .card-header h3 styles apply */
    /* Specific icon styling if needed */
}
.add-assessment-panel .card-header h3 .mr-2, /* For icons */
.assessment-overview-panel .card-header h3 .mr-2,
.assessment-overview-panel h4 .mr-2 {
    margin-right: 0.5rem;
    color: var(--accent-primary);
}

/* Form Styling in Add Assessment Panel */
#addAssessmentForm .form-group {
    margin-bottom: 1rem; /* Consistent spacing with base.css/components.css */
}
#addAssessmentForm label {
    /* Generic label styles apply */
    /* font-size: 0.85rem; (Can be handled by generic label style) */
}
#addAssessmentForm .form-control {
    /* Generic .form-control styles apply */
    /* font-size: 0.9rem; (Can be handled by generic .form-control style) */
}
#addAssessmentForm button[type="submit"].btn-block { /* If it's a block button */
    /* Generic .btn .btn-primary .btn-block styles apply */
    /* font-size: 0.95rem; padding: 10px 15px; (Can be handled by generic .btn) */
}
#addAssessmentForm button[type="submit"] .mr-2 { /* For icon in button */
    margin-right: 0.4rem;
}

/* Performance Overview Panel Styling */
.assessment-summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Space between stat items */
    justify-content: space-around;
    padding: 15px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    /* border-bottom-left-radius: 0px; */ /* Removed from original as it might look odd */
    /* border-bottom-right-radius: 0px; */
    margin-bottom: 1.5rem; /* Space below stats before chart */
}
.assessment-summary-stats .stat-item { /* Reusing .stat-item from base/components if defined, or specific here */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
    min-width: 120px;
}
.assessment-summary-stats .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}
.assessment-summary-stats .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    /* Color will be set by JS based on score class */
}
/* Stat value color classes (JS will add 'excellent', 'good', etc.) */
.assessment-summary-stats .stat-value.excellent { color: var(--success); }
.assessment-summary-stats .stat-value.good { color: var(--accent-primary); } /* Or a specific 'good' color */
.assessment-summary-stats .stat-value.average { color: var(--warning); }
.assessment-summary-stats .stat-value.needs-improvement { color: var(--danger); }


.assessment-chart-container-enhanced { /* Container for the assessment results chart */
    height: 300px;
    position: relative;
    padding: 15px; /* Give some padding around the canvas */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-primary);
    margin-bottom: 1.5rem; /* Space below chart before history list */
}
#assessmentResultsChart { /* The canvas itself */
    display: block;
    width: 100% !important; /* Override Chart.js inline styles if necessary */
    height: 100% !important;
}

.assessment-overview-panel h4 { /* For "Assessment Log" title */
    margin-top: 1.5rem; /* Space above this title */
}

.assessment-history-list { /* #assessmentHistoryListEnhanced */
    max-height: 400px;
    overflow-y: auto;
    /* border-top: 1px solid var(--border-color); (Header h4 provides separation) */
    /* padding-top: 15px; */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between history items */
}

.assessment-history-item {
    display: flex;
    align-items: center; /* Vertically align content */
    justify-content: space-between;
    padding: 12px 15px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: box-shadow var(--transition-speed-fast) ease;
}
.assessment-history-item:hover {
    box-shadow: 0 3px 10px var(--shadow-color);
}

.assessment-item-main {
    flex-grow: 1;
    margin-right: 15px;
}
.assessment-item-name {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    font-size: 0.95rem;
    margin-bottom: 2px; /* Small space below name */
}
.assessment-item-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}
/* Styles for optional weighting and notes snippet display */
.assessment-item-main .d-block.text-muted { font-size: 0.8rem; }
.assessment-item-main .d-block.text-muted.mt-1 { margin-top: 0.25rem !important; }


.assessment-item-score {
    margin-right: 1rem; /* Space between score and actions */
    font-size: 1.2rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: var(--border-radius-sm);
    min-width: 75px; /* Ensure score box has decent width */
    text-align: center;
    /* Background and text color set by JS classes: .excellent, .good, etc. */
}
/* Score Color Coding (JS adds these classes) */
.assessment-item-score.excellent { background-color: rgba(var(--success-rgb), 0.15); color: var(--success); border: 1px solid var(--success); }
.assessment-item-score.good { background-color: rgba(var(--accent-primary-rgb), 0.1); color: var(--accent-primary); border: 1px solid var(--accent-primary); }
.assessment-item-score.average { background-color: rgba(var(--warning-rgb), 0.15); color: var(--warning); border: 1px solid var(--warning); }
.assessment-item-score.needs-improvement { background-color: rgba(var(--danger-rgb), 0.1); color: var(--danger); border: 1px solid var(--danger); }


.assessment-item-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0; /* Prevent buttons from shrinking */
}
/* .assessment-item-actions .btn-sm and outline styles come from components.css */


/* Responsive adjustments for Assessment Tracker */
@media (max-width: 991px) { /* When layout stacks */
    .assessment-tracker-layout {
        gap: 20px;
    }
}
@media (max-width: 768px) {
    .add-assessment-panel .card-body,
    .assessment-overview-panel .card-body {
        padding: 15px;
    }
    .assessment-summary-stats {
        gap: 10px;
        padding: 10px;
        justify-content: center; /* Center stat items when they wrap */
    }
    .assessment-summary-stats .stat-item {
        min-width: 100px; /* Allow more to fit per row */
    }
    .assessment-summary-stats .stat-value {
        font-size: 1.5rem;
    }
    .assessment-chart-container-enhanced {
        height: 250px;
        padding: 10px;
    }
    .assessment-history-item {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
    }
    .assessment-item-main {
        margin-right: 0;
        margin-bottom: 8px;
        text-align: center;
    }
    .assessment-item-score {
        margin-right: 0; /* No right margin when stacked */
        margin-bottom: 10px;
        align-self: center;
    }
    .assessment-item-actions {
        justify-content: center;
    }
}