/* JP TO PASTE L4 v1.2 report-styles.css HERE */
/*
/* === SECTION 1: Global Body & Typography === */
body {
	font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; 
	background-color: #f4f4f4; color: #333; line-height: 1.6;
}
/* === END SECTION 1 === */

/* === SECTION 2: Header Styling === */
.header-container { 
	background-color: #2a2a2a; color: #ffffff; padding: 10px 20px;
	display: flex; justify-content: space-between; align-items: center;
	border-bottom: 3px solid #714D4D; 
}
.header-left { flex-grow: 1; display:flex; align-items:center; }
.header-report-title { font-size: 1.8em; font-weight: bold; color: #ffffff; background-color: transparent; margin-right:20px;}
.header-button { 
	background-color: #f0f0f0; color: #2a2a2a; border: 1px solid #2a2a2a;
	padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 0.8em; 
	margin-right: 10px; 
}
.header-button:hover { background-color: #e0e0e0; }
.header-right { display: flex; align-items: center; }
/* === END SECTION 2 === */

/* === SECTION 3: Main Title & Subtitle Area === */
.main-title-container { 
	text-align: center; padding: 15px 20px; background-color: #e9f2f9; 
	border-bottom: 1px solid #d0e0f0;
}
.main-title-container h1 { font-size: 1.6em; font-weight: bold; color: #002E5D; margin: 0; }
.report-subtitle { 
	text-align: center; font-size: 1.1em; color: #555; margin-top: 5px; margin-bottom: 15px; min-height: 1.1em; /* Ensure space even if empty */
}
.prepared-by { text-align: center; font-size: 0.9em; color: #555; margin-top: 5px; margin-bottom: 10px; }
/* === END SECTION 3 === */

/* === SECTION 4: Global Controls (Toolbar, Collapse Buttons) === */
.global-collapse-controls {
	text-align: center;
	margin-bottom: 20px;
}
.global-collapse-controls button {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 8px 15px;
	margin: 0 5px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9em;
}
.global-collapse-controls button:hover {
	background-color: #0056b3;
}

#toolbar {
	margin: 10px auto; padding: 8px; border: 1px solid #ddd; background-color: #f0f0f0;
	border-radius: 4px; display: none; position: sticky; top: 0; z-index: 1000; 
	max-width: calc(100% - 40px); 
}
#toolbar select, #toolbar input[type="color"], #toolbar button {
	margin-right: 5px; padding: 4px 6px; border-radius: 3px; border: 1px solid #ccc; font-size: 0.9em; 
	vertical-align: middle; 
}
#toolbar button:hover { background-color: #e0e0e0; }
#toolbar button svg { width: 1em; height: 1em; vertical-align: text-bottom; fill: currentColor;}
/* === END SECTION 4 === */

/* === SECTION 5: Main Document Layout (3 Columns) === */
.main-document-layout { 
	display: flex;
	flex-direction: row; 
	max-width: 1800px;
	margin: auto;
	gap: 20px; 
	padding: 0 20px; 
}
/* === END SECTION 5 === */

/* === SECTION 6: Left Sidebar Styling === */
#leftSidebar {
	flex: 1 1 280px; 
	order: 1;
	min-width: 280px; 
	max-width: 350px; 
	background-color: #f8f9fa;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.05);
	height: fit-content; 
	margin-top: 10px; 
	display: flex; /* This makes #leftSidebar a flex container for its own children */
	flex-direction: column;
	gap: 15px; 
	transition: opacity 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, padding 0.3s ease, margin-right 0.3s ease, border 0.3s ease;
}
#leftSidebar.hidden-via-js {
	opacity:0; min-width:0; max-width:0; padding:0; margin-right:0; border:none; overflow:hidden; flex-basis:0;
}
#leftSidebar h3 {
	margin-top: 0; color: #0055A4; 
	border-bottom: 1px solid #ddd; padding-bottom: 5px;
	font-size: 1.05em; text-align:center;
}
#leftSidebar ul { list-style-type: none; padding-left: 0; margin: 0; }
#leftSidebar li { margin-bottom: 8px; font-size: 0.9em;}
#leftSidebar li a { text-decoration: underline; color: #007bff;}
#leftSidebar li a:hover {text-decoration: none;}

.navigation-pane a {display: block; padding: 5px 0; border-bottom: 1px dotted #eee;}
.navigation-pane a:last-child {border-bottom: none;}

.key-info-sources-section-ls .source-title { 
	display: block; font-style: italic; color: #555; font-size:0.9em; 
	border: 1px dashed transparent; padding: 2px; 
}
.key-info-sources-section-ls .source-title:hover { border-color: #007bff; background-color: #f0f8ff; }
.key-info-sources-section-ls .source-title:focus { border: 1px solid #007bff !important; background-color: #f0f8ff !important; outline: none; }
.key-info-sources-section-ls .source-button-container { text-align: left; margin-top: 3px; }
.key-info-sources-section-ls .source-button {
	text-decoration: none; background-color: #2a2a2a; color: white !important; 
	padding: 3px 8px; border-radius: 15px; font-size: 0.8em;
	transition: background-color 0.2s ease; border: none; cursor: pointer;
}
.key-info-sources-section-ls .source-button:hover { background-color: #714D4D; }
.key-info-sources-section-ls .disclaimer { font-size: 0.8em; font-style: italic; color: #666; margin-top: 10px;}

.suggested-search-queries-section-ls .query-topic, .related-topics-section-ls .query-topic { 
	font-weight: bold; display: block; margin-bottom: 3px; font-size: 0.9em;
	border: 1px dashed transparent; padding: 2px; 
}
.suggested-search-queries-section-ls .query-topic:hover, .related-topics-section-ls .query-topic:hover { border-color: #007bff; background-color: #f0f8ff;}
.suggested-search-queries-section-ls .query-topic:focus, .related-topics-section-ls .query-topic:focus { border: 1px solid #007bff !important; background-color: #f0f8ff !important; outline: none; }
.suggested-search-queries-section-ls .search-query-link, .related-topics-section-ls .search-query-link { 
	display: inline-block; text-decoration: none; background-color: #2a2a2a; color: white !important; 
	padding: 6px 12px; border-radius: 20px; font-size: 0.85em;
	transition: background-color 0.2s ease; border: none; cursor: pointer;
}
.suggested-search-queries-section-ls .search-query-link:hover, .related-topics-section-ls .search-query-link:hover { background-color: #714D4D; }
#leftSidebar .action-buttons button {
	display: block; width: 100%; padding: 10px; margin-top: 10px; 
}
#leftSidebar #save_file_note_generic_sidebar { 
	font-size:0.8em; text-align:center; margin-top:5px;
}
/* === END SECTION 6 === */

/* === SECTION 7: Main Content Area Styling === */
.main-content-area {
	flex: 2.5 1 600px; 
	order: 2;
	background-color: #fff; padding: 20px; border-radius: 8px;
	box-shadow: 0 0 15px rgba(0,0,0,0.1); 
	min-width: 500px; 
}
/* === END SECTION 7 === */

/* === SECTION 8: Right Notes Pane Styling === */
#notesPane.right-notes-pane {
	flex: 1 1 280px; 
	order: 3; 
	background-color: #fffaf0; 
	padding: 0; /* Adjusted for tab structure */
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.05);
	height: fit-content; 
	margin-top: 10px; 
	display: flex; /* This makes #notesPane a flex container for its own children */
	flex-direction: column;
	transition: opacity 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, padding 0.3s ease, margin-left 0.3s ease, border 0.3s ease;
}
#notesPane.right-notes-pane.hidden-via-js {
	opacity:0; min-width:0; max-width:0; padding:0; margin-left:0; border:none; overflow:hidden; flex-basis:0;
}
.notes-tabs-container {
	display: flex;
	border-bottom: 1px solid #f0e6d2;
}
.notes-tab-button {
	padding: 10px 15px;
	cursor: pointer;
	border: none;
	background-color: transparent;
	font-size: 0.9em;
	color: #D2691E;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px; /* Overlap border */
}
.notes-tab-button.active-notes-tab {
	border-bottom-color: #D2691E;
	font-weight: bold;
}
.notes-tab-content {
	padding: 15px; 
	font-size: 0.9em;
}
.notes-tab-content.hidden-notes-content {
	display: none;
}
#notesEditor { 
	min-height: 150px; 
	border: 1px solid #e0e0e0; 
	padding: 10px; 
	border-radius: 4px; 
	background-color: #fefdfa;
}
#aceNotesContentArea { 
	min-height: 150px;
	padding: 10px; 
	border-radius: 4px; 
	background-color: #fefdfa; 
}
/* === END SECTION 8 === */

/* === SECTION 9: Collapsible Section Styling === */
.section h2.collapsible-trigger { 
	color: #003478; font-size: 1.3em; margin-top: 20px; margin-bottom: 5px; 
	border-bottom: 2px solid #e9f2f9; padding-bottom: 5px; cursor: pointer; 
	display: flex; align-items: center; justify-content: space-between; 
}
.section h2.collapsible-trigger .title-text { flex-grow: 1; }
.section h2.collapsible-trigger .icons-container { display: flex; align-items: center; }
.section h2 .summary-pin-icon { 
	font-size: 1.2em; font-weight: bold; cursor: pointer; margin-left: 10px; 
	padding: 0px 3px; user-select: none; color: #555;
}
.section h2 .summary-pin-icon:hover { color: #007bff; }
.section h2 .collapse-icon { 
	margin-left: 8px; font-size: 0.8em; transition: transform 0.2s ease-in-out; user-select: none; 
}
.section h2.collapsed .collapse-icon { transform: rotate(-90deg); }

.collapsible-content-main, .bullet-summary-content {
	padding-left: 10px; border-left: 2px solid #e9f2f9; margin-left: 5px; margin-top: 5px; 
}
.collapsible-content-main::after,
.bullet-summary-content::after { /* Clearfix for floated images */
    content: "";
    clear: both;
    display: table;
}
/* === END SECTION 9 === */
/* === SECTION 10: Bullet Summary Styling === */
.bullet-summary-content { 
    background-color: #f0f8ff; padding: 10px; border-radius: 4px; margin-bottom:10px; 
}
.bullet-summary-content ul { 
    margin-top:0; margin-bottom: 5px; padding-left: 20px; 
}
.bullet-summary-content ul li { 
    margin-bottom: 3px; 
}
.hide-summary-button {
	font-size: 0.8em; padding: 3px 8px; cursor: pointer; background-color: #e0e0e0;
	border: 1px solid #ccc; border-radius: 3px; margin-top: 5px;
}
.hide-summary-button:hover { background-color: #d0d0d0; }
/* === END SECTION 10 === */

/* === SECTION 11: General Content Styling (Paragraphs, Lists) === */
.section p, .section ul:not(.bullet-summary-content ul):not(.general-perspective-summary ul):not(#navPaneLinks):not(#source_list_generic_sidebar) { /* More specific to avoid left sidebar lists */
    margin-bottom: 10px; list-style-type: disc; padding-left: 20px; 
}
.section ul li {
    margin-bottom: 5px;
}
/* === END SECTION 11 === */

/* === SECTION 12: L4v1 "General Perspective" Subsection Styling === */
.general-perspective-summary { 
    background-color: #e6f7ff; padding: 10px; border-radius: 4px; margin-top:15px; margin-bottom:10px; border: 1px dashed #91d5ff;
}
.general-perspective-summary ul { 
    margin-top:0; margin-bottom: 5px; padding-left: 20px; list-style-type: square;
}
.general-perspective-summary ul li { 
    margin-bottom: 3px; 
}
.collapsible-content-main h3.general-perspective-title { 
    color: #0055A4; font-size: 1.1em; margin-top: 25px; margin-bottom: 10px; border-bottom: 1px dotted #d0e0f0; padding-bottom: 3px;
}
/* === END SECTION 12 === */

/* === SECTION 13: L4v1 Image Layout Styling (MODIFICATIONS) === */
/* ... (other image layout styles remain the same) ... */

/* --- Flexbox approach for Bullet Summary with Image on Right --- */
.bullet-summary-content.summary-with-image-right { 
    /* display: flex !important; REMOVE !important or the whole line if only used for visibility */
    /* We will control display with a separate class now */
    flex-wrap: nowrap; 
    gap: 20px;
}

.bullet-summary-content.summary-with-image-left { 
    /* display: flex !important; REMOVE !important or the whole line */
    flex-wrap: nowrap;
    gap: 20px;
}

/* New classes to control visibility AND flex display */
.bullet-summary-content.summary-hidden {
    display: none !important; /* Ensure this hides it */
}

.bullet-summary-content.summary-visible.summary-with-image-right,
.bullet-summary-content.summary-visible.summary-with-image-left {
    display: flex !important; /* Apply flex when it's specifically meant to be visible AND is a flex type */
}

/* If you have non-flex summaries that are just block */
.bullet-summary-content.summary-visible:not(.summary-with-image-right):not(.summary-with-image-left) { /* Added :not clauses for specificity */
    display: block; /* Default for summaries that are not image-with-summary types */
}

/* Ensure specificity for children if needed, or ensure the above is enough */
.bullet-summary-content.summary-visible.summary-with-image-right > .summary-text-and-button-wrapper {
    flex: 1 1 60%; 
    margin: 0; 
}
.bullet-summary-content.summary-visible.summary-with-image-right > .img-container {
    flex: 1 1 35%; 
    max-width: 35%; 
    margin: 0; 
}
/* Repeat for summary-with-image-left and its children, ensuring .summary-visible is part of selector */
.bullet-summary-content.summary-visible.summary-with-image-left > .img-container {
    flex: 1 1 35%;
    max-width: 35%; 
    margin: 0;
    order: -1; 
}
.bullet-summary-content.summary-visible.summary-with-image-left > .summary-text-and-button-wrapper {
    flex: 1 1 60%;
    margin: 0;
}

/* Vertical Alignment classes for summary flex containers (these remain the same) */
.bullet-summary-content.img-align-summary-top { align-items: flex-start; }
.bullet-summary-content.img-align-summary-center { align-items: center; }
.bullet-summary-content.img-align-summary-bottom { align-items: flex-end; }

/* Other image layout styles like float (from your original) */
.img-container.img-float-left { float: left; margin-right: 15px; margin-bottom: 10px; }
.img-container.img-float-right { float: right; margin-left: 15px; margin-bottom: 10px; }
.img-container.img-width-full { max-width: 100%; width:100%; margin-left:auto; margin-right:auto;}
.img-container.img-width-half { max-width: 50%; width:50%; }
.img-container.img-width-third { max-width: 33.33%; width:33.33%;}
.img-container.img-width-quarter { max-width: 25%; width:25%; }
.img-container.img-align-center { margin-left:auto; margin-right:auto; display:block; text-align:center; float:none;} /* For centering block images */
.img-container img { max-width: 100%; height: auto; display: block; border-radius: 4px; }

/* === END SECTION 13 === */

/* === SECTION 14: L4v1 Supporting Visuals Section Styling === */
.visuals-gallery {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px;       
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #eee; 
}
.visual-item {
    flex: 1 1 calc(33.333% - 20px); 
    box-sizing: border-box; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 5px;
    background-color: #fdfdfd; 
}
.visual-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 3px; 
}
.visual-caption {
    font-size: 0.85em;
    color: #555;
    margin-top: auto; 
}
/* === END SECTION 14 === */

/* === SECTION 15: L4v1 Key Terms & Glossary Section Styling === */
.glossary-list {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #eee; 
}
.glossary-list dt {
    font-weight: bold;
    color: #003478; 
    margin-top: 15px;
}
.glossary-list dd {
    margin-left: 25px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 2px solid #e9f2f9; 
}
/* === END SECTION 15 === */

/* === SECTION 16: Content Editable Styling === */
div[contenteditable="true"], 
h1[contenteditable="true"], 
/* h3[contenteditable="true"], */ /* Handled by .general-perspective-title and #leftSidebar h3 for specificity */
h4[contenteditable="true"], 
span[contenteditable="true"], li[contenteditable="true"] { 
	border: 1px dashed transparent; padding: 5px; min-height: 1.2em; background-color: transparent; 
}
h3.general-perspective-title[contenteditable="true"]:hover,
h3.general-perspective-title[contenteditable="true"]:focus {
    border: 1px dashed #007bff; background-color: #f0f8ff;
}
#leftSidebar h3[contenteditable="true"]:hover,
#leftSidebar h3[contenteditable="true"]:focus {
    border: 1px dashed #007bff; background-color: #f0f8ff;
}
h2.collapsible-trigger .title-text[contenteditable="true"]:hover,
h2.collapsible-trigger .title-text[contenteditable="true"]:focus {
	border: 1px dashed #007bff; background-color: #f0f8ff;
}
h2:not(.collapsible-trigger)[contenteditable="true"] { /* For any other H2s that might be editable but not main section titles */
	border: 1px dashed transparent; padding: 5px; min-height: 1.2em; background-color: transparent; 
}
h2:not(.collapsible-trigger)[contenteditable="true"]:hover { border-color: #007bff; background-color: #f0f8ff; }
h2:not(.collapsible-trigger)[contenteditable="true"]:focus { border: 1px solid #007bff !important; background-color: #f0f8ff !important; outline: none; }
ul.editable-list > li[contenteditable="true"] { display: list-item; }

/* More specific hover/focus for general contenteditables to avoid overriding specific ones */
div[contenteditable="true"]:not(.header-report-title):not(#documentMainTitleL2):not(.report-subtitle):not(.prepared-by span):not(.title-text):not(.source-title):not(.query-topic):not(.disclaimer):not(#save_file_note_generic_sidebar):not(#aceNotesContent):not(#notesEditor):not(.general-perspective-title):not(li):not(h4):not(ul):hover,
p[contenteditable="true"]:hover,
ul[contenteditable="true"]:not(#navPaneLinks):not(#source_list_generic_sidebar):not(.bullet-summary-content ul):not(.general-perspective-summary ul) > li[contenteditable="true"]:hover {
    border-color: #007bff; background-color: #f0f8ff;
}
div[contenteditable="true"]:not(.header-report-title):not(#documentMainTitleL2):not(.report-subtitle):not(.prepared-by span):not(.title-text):not(.source-title):not(.query-topic):not(.disclaimer):not(#save_file_note_generic_sidebar):not(#aceNotesContent):not(#notesEditor):not(.general-perspective-title):not(li):not(h4):not(ul):focus,
p[contenteditable="true"]:focus,
ul[contenteditable="true"]:not(#navPaneLinks):not(#source_list_generic_sidebar):not(.bullet-summary-content ul):not(.general-perspective-summary ul) > li[contenteditable="true"]:focus {
    border: 1px solid #007bff !important; background-color: #f0f8ff !important; outline: none;
}
/* === END SECTION 16 === */

/* === SECTION 17: Footer Styling === */
.footer {
	text-align: center; padding: 20px; margin-top: 30px; background-color: #f8f9fa; 
	border-top: 1px solid #dcdcdc; font-size: 0.85em; color: #555;
}
.footer img { height: 35px; margin-bottom: 5px; vertical-align: middle; }
/* === END SECTION 17 === */

/* === SECTION 18: Dark Mode Styles === */
body.dark-mode { background-color: #22272e; color: #c9d1d9; }
body.dark-mode .header-container { background-color: #1c2128; }
body.dark-mode .header-report-title { color: #e0e0e0; }
body.dark-mode .header-button {background-color: #30363d; color: #c9d1d9; border-color: #714D4D;}
body.dark-mode .header-button:hover {background-color: #444c56;}
body.dark-mode .main-title-container { background-color: #22272e; border-bottom-color: #30363d; }
body.dark-mode .main-title-container h1 { color: #58a6ff; } 
body.dark-mode .report-subtitle {color: #adbac7;}
body.dark-mode .prepared-by, body.dark-mode .prepared-by span[contenteditable="true"] { color: #adbac7; background-color: transparent;}
body.dark-mode .global-collapse-controls button { background-color: #388bfd; }
body.dark-mode .global-collapse-controls button:hover { background-color: #1f6feb; }
body.dark-mode #toolbar { background-color: #2d333b; border-color: #444c56; }
body.dark-mode #toolbar select, body.dark-mode #toolbar input[type="color"], body.dark-mode #toolbar button { background-color: #30363d; color: #c9d1d9; border-color: #444c56; }
body.dark-mode #toolbar button:hover { background-color: #3b4c5a; }
body.dark-mode #leftSidebar { background-color: #2d333b; border-color: #444c56;}
body.dark-mode #leftSidebar h3 { color: #58a6ff; border-bottom-color: #444c56;}
body.dark-mode #leftSidebar h3[contenteditable="true"]:hover, body.dark-mode #leftSidebar h3[contenteditable="true"]:focus { border-color: #58a6ff; background-color: #4f4f4f; }
body.dark-mode .navigation-pane a {color: #8ab4f8; border-bottom-color: #444c56;}
body.dark-mode .navigation-pane a:hover {color: #c7d7fe;}
body.dark-mode .key-info-sources-section-ls .source-title {color: #adbac7;}
body.dark-mode .key-info-sources-section-ls .source-title:hover, body.dark-mode .key-info-sources-section-ls .source-title:focus {border-color: #58a6ff; background-color: #4f4f4f;}
body.dark-mode .key-info-sources-section-ls .source-button {background-color: #714D4D;}
body.dark-mode .key-info-sources-section-ls .source-button:hover {background-color: #5a3d3d;}
body.dark-mode .key-info-sources-section-ls .disclaimer {color: #8b949e;}
body.dark-mode .suggested-search-queries-section-ls .query-topic, body.dark-mode .related-topics-section-ls .query-topic {color: #adbac7;}
body.dark-mode .suggested-search-queries-section-ls .query-topic:hover, body.dark-mode .related-topics-section-ls .query-topic:hover, body.dark-mode .suggested-search-queries-section-ls .query-topic:focus, body.dark-mode .related-topics-section-ls .query-topic:focus {border-color: #58a6ff; background-color: #4f4f4f;}
body.dark-mode .suggested-search-queries-section-ls .search-query-link, body.dark-mode .related-topics-section-ls .search-query-link {background-color: #714D4D;}
body.dark-mode .suggested-search-queries-section-ls .search-query-link:hover, body.dark-mode .related-topics-section-ls .search-query-link:hover {background-color: #5a3d3d;}
body.dark-mode #leftSidebar .action-buttons .print-button, body.dark-mode #leftSidebar .action-buttons .download-file-button { background-color: #714D4D; }
body.dark-mode #leftSidebar .action-buttons .print-button:hover, body.dark-mode #leftSidebar .action-buttons .download-file-button:hover { background-color: #5a3d3d; }
body.dark-mode .main-content-area { background-color: #2d333b; } 
body.dark-mode #notesPane.right-notes-pane { background-color: #2d333b; border-color: #444c56; } 
body.dark-mode .notes-tabs-container { border-bottom-color: #444c56;}
body.dark-mode .notes-tab-button { color: #8ab4f8; }
body.dark-mode .notes-tab-button.active-notes-tab { border-bottom-color: #58a6ff; }
body.dark-mode #notesEditor { background-color: #22272e; border-color: #444c56; color: #c9d1d9;}
body.dark-mode #aceNotesContentArea { background-color: #22272e; border-color: #444c56; color: #c9d1d9;}
body.dark-mode .section h2.collapsible-trigger { color: #58a6ff; border-bottom-color: #30363d; }
body.dark-mode .section h2.collapsible-trigger .title-text:hover, body.dark-mode .section h2.collapsible-trigger .title-text:focus {border-color: #58a6ff; background-color: #4f4f4f;}
body.dark-mode .section h2 .summary-pin-icon { color: #81d4fa;}
body.dark-mode .section h2 .summary-pin-icon:hover { color: #c7d7fe;}
body.dark-mode .collapsible-content-main, body.dark-mode .bullet-summary-content { border-left-color: #30363d;}
body.dark-mode .bullet-summary-content { background-color: #22272e;}
body.dark-mode .general-perspective-summary { background-color: #1c2128; border-color: #30363d;}
body.dark-mode .collapsible-content-main h3.general-perspective-title { color: #58a6ff; border-bottom-color: #444c56;}
body.dark-mode .collapsible-content-main h3.general-perspective-title[contenteditable="true"]:hover, body.dark-mode .collapsible-content-main h3.general-perspective-title[contenteditable="true"]:focus {border-color: #58a6ff; background-color: #4f4f4f;}
body.dark-mode .hide-summary-button { background-color: #444c56; border-color: #58a6ff; color: #c9d1d9;}
body.dark-mode .hide-summary-button:hover { background-color: #58a6ff; color: #1c2128;}

body.dark-mode div[contenteditable="true"]:not(.header-report-title):not(#documentMainTitleL2):not(.report-subtitle):not(.prepared-by span):not(.title-text):not(.source-title):not(.query-topic):not(.disclaimer):not(#save_file_note_generic_sidebar):not(#aceNotesContent):not(#notesEditor):not(.general-perspective-title):not(li):not(h4):not(ul),
body.dark-mode p[contenteditable="true"],
body.dark-mode ul[contenteditable="true"]:not(#navPaneLinks):not(#source_list_generic_sidebar):not(.bullet-summary-content ul):not(.general-perspective-summary ul) > li[contenteditable="true"] {
    background-color: transparent; border-color: transparent; color: #c9d1d9;
}
body.dark-mode div[contenteditable="true"]:not(.header-report-title):not(#documentMainTitleL2):not(.report-subtitle):not(.prepared-by span):not(.title-text):not(.source-title):not(.query-topic):not(.disclaimer):not(#save_file_note_generic_sidebar):not(#aceNotesContent):not(#notesEditor):not(.general-perspective-title):not(li):not(h4):not(ul):hover,
body.dark-mode p[contenteditable="true"]:hover,
body.dark-mode ul[contenteditable="true"]:not(#navPaneLinks):not(#source_list_generic_sidebar):not(.bullet-summary-content ul):not(.general-perspective-summary ul) > li[contenteditable="true"]:hover {
    border-color: #58a6ff; background-color: #4f4f4f;
}
body.dark-mode div[contenteditable="true"]:not(.header-report-title):not(#documentMainTitleL2):not(.report-subtitle):not(.prepared-by span):not(.title-text):not(.source-title):not(.query-topic):not(.disclaimer):not(#save_file_note_generic_sidebar):not(#aceNotesContent):not(#notesEditor):not(.general-perspective-title):not(li):not(h4):not(ul):focus,
body.dark-mode p[contenteditable="true"]:focus,
body.dark-mode ul[contenteditable="true"]:not(#navPaneLinks):not(#source_list_generic_sidebar):not(.bullet-summary-content ul):not(.general-perspective-summary ul) > li[contenteditable="true"]:focus {
    border: 1px solid #58a6ff !important; background-color: #4f4f4f !important;
}
body.dark-mode .visual-item { /* L4v1 Dark Mode addition */
    border-color: #444c56;
    background-color: #2d333b;
}
body.dark-mode .visual-caption { /* L4v1 Dark Mode addition */
    color: #adbac7;
}
body.dark-mode .glossary-list dt { /* L4v1 Dark Mode addition */
    color: #58a6ff;
}
body.dark-mode .glossary-list dd { /* L4v1 Dark Mode addition */
    border-left-color: #30363d;
}
body.dark-mode .footer { background-color: #1c2128; border-top-color: #444c56; color: #adbac7; }
body.dark-mode .footer span[contenteditable="true"] {background-color: transparent;}
/* === END SECTION 18 === */

/* === SECTION 19: Print Styles === */
#printableNotesSection { display: none; } 
@media print {
	body { margin: 0; background-color: #fff !important; color: black !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
	.header-container, .prepared-by, #leftSidebar, .footer, .dark-mode-toggle, #toolbar, .action-buttons, 
	#notesPane.right-notes-pane .notes-tabs-container, /* Hide tab buttons */
	.global-collapse-controls, .summary-pin-icon, .hide-summary-button, .collapse-icon,
    #splash-box /* Hide splash box for printing */ { display: none !important; }
	
	#notesPane.right-notes-pane { /* Ensure notes pane itself is not hidden if we want its content */
	display: block !important; /* Or flex if it was flex */
	order: initial !important; /* May need to adjust if it was reordered for print */
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	}
	
	.main-document-layout {padding: 0; gap:0; flex-direction:column; max-width:100% !important;}
	.main-content-area {order:1 !important; box-shadow: none; border: none; margin: 0; max-width: 100% !important; padding: 10px; background-color: #fff !important; flex-basis:auto !important; }
	.main-title-container {background-color: white !important; padding-bottom: 5px;}
	.main-title-container h1 {font-size: 1.8em; color: black !important;}
	
	.collapsible-content-main:not([style*="display: none"]), 
	.bullet-summary-content:not([style*="display: none"]):not(.summary-hidden) { /* Added :not(.summary-hidden) */
	display: block !important; 
	border-left: none !important; 
	margin-left:0 !important; 
	padding-left:0 !important; 
	background-color: transparent !important;
	}
	.collapsible-content-main[style*="display: none"], 
	.bullet-summary-content[style*="display: none"] {
	display: none !important;
	}
    .bullet-summary-content.summary-hidden { /* Ensure explicitly hidden summaries stay hidden in print */
        display: none !important;
    }
	
	div[contenteditable="true"], h1[contenteditable="true"], h2[contenteditable="true"], h3[contenteditable="true"], h4[contenteditable="true"], span[contenteditable="true"], li[contenteditable="true"] { 
	border: 1px solid transparent !important; background-color: transparent !important; color: black !important; padding:0px !important;
	}
	.section h2 { margin-top: 15px; font-size: 1.4em; color: black !important; border-bottom: 2px solid #ccc !important; cursor:default;}
    .collapsible-content-main h3.general-perspective-title { color: black !important; border-bottom-color: #ccc !important;}
	.section p, .section ul { font-size: 0.9em; color: black !important;}
	.header-report-title {color: black !important;} 
	
	/* Notes Pane printing logic */
	.notes-tab-content { display: none !important; } /* Hide all tab contents by default for print */
	#printableNotesSection { 
	order:2 !important; /* Ensure it comes after main content */
	margin-top: 30px; border-top: 2px solid #ccc; padding-top: 15px;
	page-break-before: always; 
	display: none; /* Initially hidden, JS will show if needed */
	}
	#printableNotesSection h2 { font-size: 1.2em; color: black; text-align: center; margin-bottom:10px; }
	#printableNotesContent { font-size: 0.9em; color: black; }
}
/* === END SECTION 19 === */

/* === SECTION 20: Splash Box Styles === */
#splash-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(42, 42, 42, 0.85); /* Using a color from your theme: #2a2a2a */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000; /* Higher than toolbar's z-index: 1000 */
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

#splash-box-content {
    background-color: #f4f4f4; /* Light background from your body style */
    color: #333; /* Text color from your body style */
    padding: 40px 50px;
    border-radius: 8px; /* Consistent with other elements like leftSidebar */
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    text-align: center;
    max-width: 600px;
    transform: scale(1);
    transition: transform 0.3s ease-out;
}

#splash-box.hidden {
    opacity: 0;
    pointer-events: none;
}

#splash-box.hidden #splash-box-content {
    transform: scale(0.9);
}

#splash-box-content h2 {
    font-family: 'Georgia', serif; /* Example heading font, adjust as needed */
    color: #002E5D; /* Main title color from your .main-title-container h1 */
    font-size: 2.5em;
    margin-top: 0;
    margin-bottom: 20px;
}

#splash-box-content p {
    font-family: 'Segoe UI', Arial, sans-serif; /* Body font */
    font-size: 1.2em;
    line-height: 1.7;
    margin-bottom: 15px;
}

#splash-box-content p strong {
    color: #003478; /* From your .section h2.collapsible-trigger */
}

.splash-box-instruction {
    font-style: italic;
    font-size: 1em !important;
    margin-top: 25px;
    color: #555; /* From your .report-subtitle */
}

/* Dark mode adjustments for Splash Box */
body.dark-mode #splash-box {
    background-color: rgba(28, 33, 40, 0.85); /* #1c2128 */
}
body.dark-mode #splash-box-content {
    background-color: #2d333b; /* main content area dark bg */
    color: #c9d1d9; /* dark mode text */
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
body.dark-mode #splash-box-content h2 {
    color: #58a6ff; /* dark mode h1 color */
}
body.dark-mode #splash-box-content p strong {
    color: #58a6ff; /* dark mode accent */
}
body.dark-mode .splash-box-instruction {
    color: #adbac7; /* dark mode subtitle color */
}
/* === END SECTION 20 === */

/* === SECTION 21: Responsive Design Adjustments (General - from your original structure if further needed) === */
@media (max-width: 768px) {
    .main-document-layout {
        flex-direction: column;
        padding: 0 10px; /* Adjust padding */
        gap: 15px; /* Adjust gap */
    }
    #leftSidebar, #notesPane.right-notes-pane {
        order: initial; /* Reset order for stacked layout */
        min-width: 100%; /* Take full width when stacked */
        max-width: 100%;
        margin-top: 0;
        margin-bottom:15px; /* Add some space between stacked items */
    }
    .main-content-area {
        min-width: 100%; /* Take full width */
        order: initial;
    }
    .header-left {
        flex-direction: column; /* Stack title and buttons */
        align-items: flex-start;
    }
    .header-report-title { margin-bottom: 5px; }

    #splash-box-content {
        padding: 30px 25px;
        max-width: 90%;
    }
    #splash-box-content h2 {
        font-size: 2em;
    }
    #splash-box-content p {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .header-report-title { font-size: 1.4em; }
    .main-title-container h1 { font-size: 1.3em; }
    .report-subtitle { font-size: 0.9em; }
    .header-button { font-size: 0.7em; padding: 4px 8px;}

    /* Further responsive adjustments for Visuals Gallery from your original */
    .visual-item {
        flex-basis: calc(50% - 10px); /* Two items per row on smaller screens */
    }
    .visuals-gallery { gap: 10px; }

    #splash-box-content h2 {
        font-size: 1.8em;
    }
    #splash-box-content p {
        font-size: 1em;
    }
    .splash-box-instruction {
        font-size: 0.9em !important;
    }
}