/* css/views/study.css */

/* Styles specific to the #study section */

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

/* Main Layout for Study Hub */
.study-dashboard-layout {
    display: grid;
    /* grid-template-columns: repeat(12, 1fr); (Removed as it was complex and panels manage their own spans) */
    grid-template-columns: 1fr; /* Default to single column */
    gap: 1.5vh;
}

.study-main-panel { /* Contains Timer and Quick Stats */
    /* grid-column: span 12; (Not needed if layout is simpler) */
    display: grid;
    grid-template-columns: 1fr; /* Stack on small screens */
    gap: 1vw;
}

.study-content-panel { /* Contains Goals and Log List */
    /* grid-column: span 12; (Not needed) */
    display: flex; /* Changed from grid to flex for simpler stacking or side-by-side of two main items */
    flex-direction: column; /* Default stack */
    gap: 1vw;
}

@media (min-width: 992px) { /* Adjust breakpoint as needed for two-column layout */
    .study-main-panel {
        /* Timer panel takes more space, quick stats less */
        grid-template-columns: minmax(380px, 2fr) minmax(280px, 1fr);
    }
    .study-content-panel {
        flex-direction: row; /* Goals and Log side-by-side */
        /* Individual panels will use flex-basis or width */
    }
    .study-goals-panel, .study-recent-log-panel {
        flex: 1 1 0; /* Allow them to share space equally or set different flex factors */
        min-width: 300px; /* Ensure they have a minimum width */
    }
}


.study-recent-log-panel {
    margin: 0px !important;
}

/* Panel Headers (shared style for study view panels) */
.study-timer-panel .card-header h3,
.study-quick-stats-panel .card-header h3,
.study-goals-panel .card-header h3,
.study-recent-log-panel .card-header h3 {
    /* Generic .card-header h3 styles apply */
    font-size: 1.1rem; /* Consistent panel titles */
}
.study-timer-panel .card-header h3 .mr-2, /* For icons */
.study-quick-stats-panel .card-header h3 .mr-2,
.study-goals-panel .card-header h3 .mr-2,
.study-recent-log-panel .card-header h3 .mr-2 {
    margin-right: 0.5rem;
    color: var(--accent-primary);
}

/* Study Timer Panel */
.study-timer-panel .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px;
}
#studyTaskName.form-control-lg { /* Assuming .form-control-lg comes from components.css */
    text-align: center;
    margin-bottom: 20px !important; /* Override form-group margin if inside one */
    max-width: 400px; /* Prevent it from being too wide */
    width: 100%;
}
.study-timer-display-enhanced {
    font-size: 3.5rem; /* Slightly reduced from 4rem for better fit */
    font-weight: 700;
    color: var(--accent-primary);
    text-align: center;
    margin: 10px auto 5px auto;
    font-family: 'DS-Digital', 'Courier New', Courier, monospace; /* DS-Digital font from HTML */
    padding: 15px 20px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    min-width: 280px; /* Ensure it doesn't get too squished */
    letter-spacing: 1px; /* Reduced letter spacing */
    box-sizing: border-box;
}
#currentSessionInfo { /* Text below timer */
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px; /* Space before controls */
    min-height: 1.2em; /* Prevent layout jump when text appears */
}
.study-timer-controls-enhanced {
    display: flex;
    justify-content: center;
    gap: 10px; /* Reduced gap from 15px */
    margin-top: 15px; /* Reduced margin */
    width: 100%;
    max-width: 400px;
}
.study-timer-controls-enhanced .btn-lg { /* Uses .btn .btn-lg from components.css */
    flex-grow: 1; /* Buttons share space */
}
.study-timer-controls-enhanced .btn-lg .mr-2 { margin-right: 0.4rem; }


/* Quick Stats Panel */
.study-quick-stats-panel .card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.quick-stat-item {
    display: flex;
    flex-direction: column;
}
.quick-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.quick-stat-value {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
}
.study-quick-stats-panel .progress-bar-container.small-progress {
    /* Generic .progress-bar-container.small-progress styles from components.css */
    height: 12px;
}
.study-quick-stats-panel .progress-bar {
    /* Generic .progress-bar styles from components.css */
    font-size: 0.7rem; /* Text inside this specific progress bar */
}
/* Button to view full log - uses generic .btn styles */
.study-quick-stats-panel .card-footer .btn { /* If button is in footer */
    /* display: block; width: 100%; text-align: center; */
}


/* Goals Panel */
.study-goals-panel .card-body {
    padding: 20px;
    display: flex;
    flex-direction: column; /* Stack form and list */
}

#addStudyGoalForm .form-control { /* Input and select in add goal form */
    /* Generic .form-control styles apply */
    font-size: 0.9rem;
}
#addStudyGoalForm button[type="submit"] { /* Add Goal button */
    /* Generic .btn .btn-primary .btn-block styles apply */
    /* padding-top: 0.6rem; padding-bottom: 0.6rem; (Adjust if needed, or use .btn-sm) */
}

.study-goals-list-enhanced { /* ul or div container for goals */
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 350px; /* Adjusted max-height */
    overflow-y: auto;
    padding-right: 5px; /* Space for scrollbar */
}
.study-goal-item-enhanced { /* Individual goal item */
    display: flex;
    align-items: flex-start; /* Align icon to top of content */
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-secondary); /* Slight contrast for item */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.study-goal-item-enhanced:hover {
    background-color: var(--bg-interactive);
    box-shadow: 0 2px 8px var(--shadow-color);
}
.goal-icon {
    flex-shrink: 0;
    width: 38px; /* Adjusted size */
    height: 38px;
    border-radius: 50%;
    background-color: rgba(var(--accent-primary-rgb), 0.1);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 1.1rem; /* Icon size */
}
body[data-theme="dark"] .goal-icon {
    background-color: rgba(var(--accent-primary-rgb-dark), 0.2);
}
.goal-details {
    flex-grow: 1;
}
.goal-description {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 3px;
    line-height: 1.4;
}
.goal-description.text-success.text-decoration-line-through { /* Completed goal text */
    /* These utility classes from base.css should handle it */
}
.goal-meta { /* Subject, Type, Target info */
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
    line-height: 1.4;
    margin-bottom: 8px; /* Space before progress bar */
}
.goal-progress { /* Container for "Achieved" text and progress bar */
    font-size: 0.85em;
}
.goal-progress .progress-bar-container.small-progress {
    /* Generic styles apply */
    height: 10px;
    margin-top: 5px; /* Space between "Achieved" text and bar */
}
/* .goal-details .progress-bar color classes are applied by JS and styled in components.css */

.goal-actions-enhanced {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 15px; /* Space from details */
    flex-shrink: 0;
}
/* .goal-actions-enhanced .btn-sm and outline styles from components.css */


/* Study Log List Panel (was Recent Log Panel) */
.study-recent-log-panel .card-body {
    padding: 20px;
    display: flex; /* Make body flex for list to grow */
    flex-direction: column;
}
.study-log-list-enhanced { /* div container for log items */
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 400px; /* Match goals list for consistency */
    overflow-y: auto;
    padding-right: 5px; /* Space for scrollbar */
    flex-grow: 1; /* Allow list to take available space */
}
.study-log-item-enhanced { /* Individual log item */
    display: flex;
    align-items: center; /* Align icon and text */
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-secondary);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.study-log-item-enhanced:hover {
    background-color: var(--bg-interactive);
    box-shadow: 0 2px 8px var(--shadow-color);
}
.log-icon { /* Same as .goal-icon */
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(var(--accent-primary-rgb), 0.1);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 1.1rem;
}
body[data-theme="dark"] .log-icon {
    background-color: rgba(var(--accent-primary-rgb-dark), 0.2);
}
.log-details {
    flex-grow: 1;
}
.log-task { /* Task name */
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 3px;
    line-height: 1.4;
}
.log-meta { /* Subject, Duration, Date */
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
    line-height: 1.4;
}
.log-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 15px;
    flex-shrink: 0;
}
/* .log-actions .btn-sm and outline styles from components.css */


/* Full Stats Panel (Hidden by default, shown by button) */
#studyLogFull {
    /* This panel is a .card, generic styles apply */
    /* Specifics if needed: */
    margin-top: 20px; /* Space if it appears below other content */
    padding: 20px; /* Padding for its content */
}
#studyLogFull .card-header h3 { /* Assuming it might have a header */
    /* Generic card header styles */
}
/* Chart containers within this panel will use generic sizing or specific chart styles */
#totalStudyTimeChart, #weeklyStudyTimeChart {
    max-height: 300px; /* Constrain chart height */
    margin-bottom: 20px; /* Space between charts or chart and log */
}


/* Responsive Adjustments for Study Hub */
@media (max-width: 991px) { /* Tablet */
    .study-main-panel {
        grid-template-columns: 1fr; /* Stack timer and quick stats */
    }
    .study-content-panel {
        flex-direction: column; /* Stack Goals and Log */
    }
    .study-timer-panel .card-body { padding: 20px; }
    .study-timer-display-enhanced { font-size: 3rem; min-width: 260px; }
}

@media (max-width: 767px) { /* Mobile */
    .study-dashboard-layout,
    .study-main-panel,
    .study-content-panel {
        gap: 1vw; /* Consistent gap for stacked items */
    }
    .study-timer-panel .card-body { padding: 15px; }
    .study-timer-display-enhanced { font-size: 2.5rem; max-width: 100%; padding: 8px 15px; }
    .study-timer-controls-enhanced { gap: 8px; }
    .study-timer-controls-enhanced .btn-lg { padding: 8px 10px; font-size: 0.9rem; }

    .quick-stat-value { font-size: 1.1rem; }

    .study-goal-item-enhanced, .study-log-item-enhanced {
        padding: 12px;
        flex-direction: column; /* Stack icon/details and actions */
        align-items: stretch;
    }
    .goal-icon, .log-icon { margin-bottom: 10px; align-self: center; }
    .goal-details, .log-details { text-align: center; margin-bottom: 10px; }
    .goal-actions-enhanced, .log-actions { margin-left: 0; justify-content: center; }

    #studyLogFull { padding: 15px; }
    #totalStudyTimeChart, #weeklyStudyTimeChart { max-height: 250px; }
}