/* css/views/dashboard.css */

#dashboard .content-header {
    margin-bottom: 1vh;
}
#dashboardUserNameGreeting { /* Span inside H1 */
    color: var(--accent-primary);
    font-weight: 600;
}

/* Main Dashboard Grid Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column for mobile */
    gap: 1vw;
}
@media (min-width: 992px) { /* Two columns for larger screens */
    .dashboard-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* Main content 2/3, sidebar 1/3 */
    }
}

.dashboard-main-column,
.dashboard-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 1.5vh; /* Space between cards in a column */
}

/* Specific Card Styling for Dashboard Widgets */
.card-dashboard-summary .card-header h3 .mr-2,
.card-dashboard-syllabi .card-header h3 .mr-2,
.card-dashboard-upcoming .card-header h3 .mr-2,
.card-dashboard-add-syllabus .card-header h3 .mr-2 {
    color: var(--accent-primary); /* Icon color in headers */
}

.card-dashboard-syllabi,.card-dashboard-upcoming {
    margin-bottom: 0px;
}

.card-dashboard-add-syllabus, .card-dashboard-syllabi {
    margin-bottom: 0px;
    flex: 1;
}

/* Overall Summary Stats Grid */
.summary-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Responsive columns */
    gap: 1vh; /* Gap between stat items */
    padding: 10px 0; /* Padding around the grid */
}
.summary-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px 10px;
    /*background-color: var(--bg-secondary);*/
    border-radius: var(--border-radius-md);
    /*
    border: 1px solid var(--border-color);
    */
    transition: transform var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease;
}
.summary-stat-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
}
.summary-stat-item .stat-icon {
    font-size: 2rem; /* Icon size */
    color: var(--accent-primary);
    margin-bottom: 8px;
}
.summary-stat-item .stat-value {
    font-size: 2rem; /* Value size */
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}
.summary-stat-item .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Enhanced Syllabi List */
#dashboardLoadedSyllabiList { /* The card-body container */
    padding: 0; /* Remove card-body padding if list items have their own */
}
.loaded-syllabi-list-enhanced { /* The ul element */
    /* list-group and list-group-flush from components.css handle base */
}
.loaded-syllabi-list-enhanced > .list-group-item {
    display: grid;
    grid-template-columns: auto 1fr auto; /* Icon(optional), Info+Progress, Actions */
    gap: 15px;
    align-items: center;
    padding: 12px 15px;
}
.loaded-syllabi-list-enhanced .syllabus-info strong { font-size: 1.05rem; color: var(--text-primary); }
.loaded-syllabi-list-enhanced .syllabus-info span { font-size: 0.8rem; color: var(--text-secondary); margin-left: 5px;}

.syllabus-progress-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* Push it towards the center/right */
    margin-right: 15px; /* Space before action buttons */
}
.syllabus-progress-summary .progress-bar-container.small-progress {
    width: 80px; /* Fixed width for mini progress bar */
    height: 6px !important; /* Even smaller for dashboard */
    margin-bottom: 0; /* Remove margin if any from generic */
}
.syllabus-progress-summary .progress-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.loaded-syllabi-list-enhanced .syllabus-actions {
    display: flex;
    gap: 8px;
}
.loaded-syllabi-list-enhanced .syllabus-actions .btn-xs {
    /* Assuming .btn-xs is defined in components.css (padding:3px 6px, font-size:0.7rem) */
}
.loaded-syllabi-placeholder {
    /* Styles for when no syllabi are loaded */
    padding: 30px 20px;
    /* text-align: center; (Utility class) */
    /* color: var(--text-muted); (Utility class) */
    /* background-color: var(--bg-secondary); */ /* Optional distinct background */
    border-radius: var(--border-radius-md);
}
.loaded-syllabi-placeholder .fa-3x { margin-bottom: 1rem; }


/* Upcoming Deadlines List */
.upcoming-deadlines-list { /* The ul element */
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px; /* Limit height */
    overflow-y: auto;
}
.upcoming-deadline-item { /* li element */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0; /* Minimal padding, relies on card-body padding */
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}
.upcoming-deadlines-list .list-group-item:last-child { border: none; } /* If using list-group-item */

.deadline-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}
.deadline-icon.type-task { background-color: var(--info); }
.deadline-icon.type-assessment { background-color: var(--warning); }
/* Add more types if needed */

.deadline-info {
    flex-grow: 1;
    overflow: hidden; /* For text ellipsis */
}
.deadline-name {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deadline-details {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.deadline-details.text-danger { /* For overdue items */
    font-weight: 500;
}

.view-deadline-item-btn {
    /* Generic .btn .btn-xs .btn-outline-secondary styles apply */
    flex-shrink: 0;
}

/* "Add New Syllabus" Form Card in Sidebar Column */
#dashboardAddSyllabusFormCard {
    /* Generic .card styles */
}
#dashboardAddSyllabusFormCard .setup-form button[type="submit"] {
    /* Generic .btn .btn-primary .btn-block styles */
}
#dashboardAddSyllabusFormCard .spinner {
    /* Generic .spinner styles */
}

.card-dashboard-summary {
    margin-bottom: 0px;
}

.card-dashboard-upcoming .card-body,
.card-dashboard-summary .card-body {
    align-content: center;
    margin-bottom: 0px;
    height: fit-content;
}