/* css/views/notes.css */

/* Styles specific to the #notes section */

#notes .content-header {
    /* Specific styles for the notes view header, if any */
    margin-bottom: 25px; /* Consistent with other views */
}
/* #notesPlaceholder ID was not found in your HTML for this section,
   the editor has its own placeholder. */

.notes-container-redesigned {
    display: flex;
    gap: 20px;
    /* Height is set to fill available space, considering topbar and content-header */
    /* This calculation can be tricky and might be better handled by flex-grow on main-content */
    height: calc(100vh - var(--topbar-height) - 60px - 25px - 30px); /* topbar - main-content-padding-top - content-header-margin - content-header-padding-bottom approx */
    min-height: 550px; /* Ensure a decent minimum height */
}

/* Base Panel Styles (if not fully covered by generic .card) */
.notes-list-panel,
.notes-context-panel,
.notes-editor-panel-redesigned {
    /* Generic .card styles from components.css will apply for background, border, radius, shadow */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Important for child elements with scroll */
}

/* --- Panel Sizing (Flex properties from original CSS) --- */
.notes-list-panel {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 260px; /* Adjusted for slightly wider list panel */
    min-width: 230px;
    max-width: 320px;
}
.notes-context-panel {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 320px;
    min-width: 280px;
    max-width: 400px;
}
.notes-editor-panel-redesigned {
    flex-grow: 3; /* Editor takes more space */
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 400px;
}

/* Panel Header, Subheader, Content (General structure) */
.panel-header {
    /* Generic .card-header styles could apply if these panels are .card */
    /* If not, define base panel header styles here or in components.css */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    flex-shrink: 0; /* Prevent header from shrinking */
}
.panel-header h4 { /* Or h5 if used */
    font-size: 1.05rem; /* Consistent panel title size */
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.panel-header h4 .mr-2 { margin-right: 0.6em; color: var(--accent-primary); }
.panel-header .btn-icon {
    /* Generic .btn .btn-icon styles apply */
    line-height: 1; padding: 6px 8px; /* Ensure small icon button */
}

.panel-subheader { /* For "Notes for: Subject" title */
    padding: 8px 15px;
    font-size: 0.8rem;
    color: var(--text-muted);
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.current-subject-notes-title-redesigned { /* Class from HTML */
    font-weight: 500;
    /* color: var(--accent-primary); (If you want the subject name part to be accented) */
}

.panel-content {
    padding: 15px;
    flex-grow: 1; /* Allow content area to fill panel */
    display: flex;
    flex-direction: column; /* For internal layout of content */
}
.panel-content.scrollable {
    overflow-y: auto;
    /* Custom scrollbar styles from base.css will apply */
}
.panel-content.editor-area { /* Specific for notes editor panel */
    padding: 0; /* Editor itself will have padding */
    overflow-y: hidden; /* Editor's internal div will scroll */
}


/* Notes List Panel Specifics */
.saved-notes-list-redesigned { /* ul element */
    list-style: none; padding: 0; margin: 0;
    flex-grow: 1; /* Allow list to take space if panel-content is flex */
    overflow-y: auto; /* Make the list itself scrollable if needed */
}
.saved-notes-list-redesigned li.saved-note-item { /* Class from JS */
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.saved-notes-list-redesigned li.saved-note-item:last-child { border-bottom: none; }
.saved-notes-list-redesigned li.saved-note-item:hover {
    background-color: var(--bg-interactive);
    color: var(--accent-primary);
}
.saved-notes-list-redesigned li.saved-note-item.active-note {
    background-color: var(--accent-primary);
    color: white;
    font-weight: 500;
}
.saved-notes-list-redesigned li.saved-note-item.active-note .delete-note-btn {
    color: white; /* Ensure delete icon is visible on active background */
    opacity: 0.8;
}
.saved-notes-list-redesigned li.saved-note-item.active-note .delete-note-btn:hover { opacity: 1; }

.saved-notes-list-redesigned .notes-list-placeholder { /* li element for placeholder */
    padding: 20px;
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
    cursor: default;
    border-bottom: none; /* No border if it's the only item */
}
.saved-notes-list-redesigned .notes-list-placeholder .mr-2 { margin-right: 0.5em;}
.saved-notes-list-redesigned .delete-note-btn { /* Button inside list item */
    background: none; border: none;
    color: var(--danger);
    opacity: 0.6;
    padding: 2px 5px; /* Small clickable area */
    transition: opacity var(--transition-speed-fast);
}
.saved-notes-list-redesigned .delete-note-btn:hover { opacity: 1; }
.saved-notes-list-redesigned .note-title-in-list { /* Span for title in list */
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}


/* Context/Syllabus Panel Specifics */
.notes-context-panel .form-group label { /* Labels for topic selector, note title */
    /* Generic label styles apply */
    font-size: 0.85rem; /* From original */
    margin-bottom: 0.3rem;
}
.notes-context-panel .form-control-sm { /* For topic selector, note title input */
    /* Generic .form-control .form-control-sm styles apply */
}
.notes-topic-points-redesigned { /* div for displaying syllabus points */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 12px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-height: 100px; /* From original */
    flex-grow: 1; /* Allow it to take available vertical space */
    overflow-y: auto;
}
.notes-topic-points-redesigned ul { /* ul inside points area */
    list-style-position: inside; /* Or outside, depending on preference */
    padding-left: 0; /* Reset if list-style none wasn't global */
    margin-bottom: 0;
}
.notes-topic-points-redesigned ul li {
    margin-bottom: 4px;
    list-style-type: disc; /* Add disc if desired */
    margin-left: 1.2em; /* Indent list items */
}
.notes-context-panel .form-group.mt-auto { /* For note title input group at bottom */
    margin-top: auto !important; /* Push to bottom of flex container */
    padding-top: 1rem; /* Space above it */
    border-top: 1px solid var(--border-color);
}
.notes-context-panel #generateNotesBtn.btn-block {
    /* Generic .btn .btn-success .btn-block styles apply */
    font-size: 0.9rem; /* From original */
}
#notesGenerationSpinner { /* If this is the general spinner class */
    /* Generic .spinner styles apply */
    margin-left: 10px;
    vertical-align: middle;
}

/* Editor Panel Specifics */
.notes-editor-panel-redesigned .panel-header #saveCurrentNoteBtn {
    /* Generic .btn .btn-info .btn-sm styles apply */
}
.notes-editor-panel-redesigned .panel-header #saveCurrentNoteBtn .mr-1 { margin-right: 0.3rem; }

.notes-output-redesigned { /* The contenteditable div */
    height: 100%; /* Fill the .editor-area */
    padding: 20px;
    overflow-y: auto;
    font-size: 1rem; /* Base font size for notes */
    line-height: 1.7; /* Generous line height for readability */
    color: var(--text-primary);
    background-color: var(--bg-primary); /* Editor background */
    outline: none; /* Remove focus outline on contenteditable */
    white-space: pre-wrap; /* Preserve whitespace and wrap lines */
    word-wrap: break-word;
}
.notes-output-redesigned:focus-within { /* Subtle indication when editor is active */
    /* box-shadow: inset 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2); */
}

.editor-placeholder { /* Div inside notesOutputArea */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-muted);
    pointer-events: none; /* So it doesn't interfere with clicks */
    user-select: none;
}
.editor-placeholder i.fa-3x { /* Icon in placeholder */
    font-size: 3em;
    color: var(--border-color); /* Use a subtle color */
    margin-bottom: 0.75rem;
}
.editor-placeholder p { /* Main text of placeholder */
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.editor-placeholder small { /* Sub-text of placeholder */
    font-size: 0.9rem;
}
/* JS handles showing/hiding this placeholder by clearing/filling notesOutputArea */
.notes-output-redesigned:not(:empty) > .editor-placeholder { display: none; }
.notes-output-redesigned:empty::before { /* Alternative: CSS pseudo-element placeholder if content is truly empty */
    /* content: 'Start typing or generate notes...';
    display: block; text-align: center; padding-top: 50px; color: var(--text-muted); */
}


/* Styling for content *within* the .notes-output-redesigned (Markdown rendered HTML) */
/* These are important for making the notes look good. */
.notes-output-redesigned h1,
.notes-output-redesigned h2,
.notes-output-redesigned h3,
.notes-output-redesigned h4,
.notes-output-redesigned h5,
.notes-output-redesigned h6 {
    font-family: var(--font-secondary);
    color: var(--text-primary);
    margin-top: 1.5em;
    margin-bottom: 0.6em; /* Tighter bottom margin for flow */
    line-height: 1.3;
}
.notes-output-redesigned h1 { font-size: 1.8em; border-bottom: 2px solid var(--border-color); padding-bottom: 0.3em;}
.notes-output-redesigned h2 { font-size: 1.5em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.2em;}
.notes-output-redesigned h3 { font-size: 1.3em; }
.notes-output-redesigned h4 { font-size: 1.15em; }

.notes-output-redesigned p { margin-bottom: 1em; color: var(--text-secondary); }
.notes-output-redesigned ul, .notes-output-redesigned ol { margin-bottom: 1em; padding-left: 25px; /* Indent lists */ }
.notes-output-redesigned ul li { list-style-type: disc; }
.notes-output-redesigned ol li { list-style-type: decimal; }
.notes-output-redesigned li { margin-bottom: 0.5em; }
.notes-output-redesigned ul ul, .notes-output-redesigned ol ol,
.notes-output-redesigned ul ol, .notes-output-redesigned ol ul { margin-top: 0.25em; margin-bottom: 0.5em; padding-left: 20px; }
.notes-output-redesigned ul ul li { list-style-type: circle; }
.notes-output-redesigned ul ul ul li { list-style-type: square; }

.notes-output-redesigned pre {
    background-color: var(--bg-tertiary);
    padding: 15px;
    border-radius: var(--border-radius-sm);
    overflow-x: auto;
    border: 1px solid var(--border-color);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* Better mono stack */
    font-size: 0.9em;
    color: var(--text-primary);
    white-space: pre-wrap; /* Wrap long lines in pre */
    word-break: break-all; /* Break long words if necessary */
}
.notes-output-redesigned code { /* Inline code */
    background-color: var(--bg-tertiary);
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: var(--border-radius-sm);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    color: var(--accent-secondary); /* Different color for inline code */
}
.notes-output-redesigned pre code { /* Code inside pre should not have extra bg/padding */
    background-color: transparent;
    padding: 0;
    font-size: inherit; /* Inherit from pre */
    color: inherit;
    border-radius: 0;
}

.notes-output-redesigned blockquote {
    border-left: 4px solid var(--accent-primary);
    margin-left: 0; margin-right: 0; padding-left: 15px;
    color: var(--text-muted);
    font-style: italic;
}
.notes-output-redesigned table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
    font-size: 0.9rem;
}
.notes-output-redesigned th, .notes-output-redesigned td {
    border: 1px solid var(--border-color);
    padding: 8px 12px; /* Adjusted padding */
    text-align: left;
}
.notes-output-redesigned th {
    background-color: var(--bg-secondary);
    font-weight: 600;
}
.notes-output-redesigned hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 2em 0;
}

/* Responsive adjustments for the Notes Layout */
@media (max-width: 991px) { /* Tablet and below */
    .notes-container-redesigned {
        flex-direction: column;
        height: auto; /* Allow content to determine height */
        min-height: unset;
    }
    .notes-list-panel,
    .notes-context-panel,
    .notes-editor-panel-redesigned {
        flex-basis: auto;
        min-width: unset;
        max-width: unset;
    }
    .notes-list-panel { max-height: 250px; } /* Constrain list height when stacked */
    .notes-context-panel { /* No specific max-height, let content define */ }
    .notes-editor-panel-redesigned { min-height: 400px; }
    .notes-topic-points-redesigned { max-height: 150px; } /* Constrain points area */
}
@media (max-width: 767px) { /* Mobile further refinements */
    .panel-header { padding: 10px 12px; }
    .panel-header h4 { font-size: 0.95rem; }
    .panel-content { padding: 12px; }

    .notes-list-panel { max-height: 200px; }
    .notes-editor-panel-redesigned { min-height: 350px; }
    .notes-output-redesigned { font-size: 0.95rem; padding: 15px; }
}