/* ==========================================================================
   Settings Tab Navigation Styles
   ========================================================================== */

.biblib-tab-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 8px;
}

.biblib-tab-button {
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  padding: 8px 16px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.biblib-tab-button:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.biblib-tab-button.active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

.biblib-settings-container {
  margin-top: 16px;
}

/* ==========================================================================
   Base Modal Styles
   ========================================================================== */

.bibliography-modal,
.bibliography-bulk-import-modal { /* Added bulk import modal here */
  padding: 20px;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box; /* Added for consistency */
}

/* Scrollbar Styling (Applies to modals with overflow-y: auto) */
.bibliography-modal::-webkit-scrollbar,
.bibliography-bulk-import-modal::-webkit-scrollbar,
.template-variables-list::-webkit-scrollbar, /* Added for template list */
.custom-fields-help > div::-webkit-scrollbar { /* Added for help section */
  width: 8px;
}

.bibliography-modal::-webkit-scrollbar-track,
.bibliography-bulk-import-modal::-webkit-scrollbar-track,
.template-variables-list::-webkit-scrollbar-track,
.custom-fields-help > div::-webkit-scrollbar-track {
  background: var(--background-primary);
}

.bibliography-modal::-webkit-scrollbar-thumb,
.bibliography-bulk-import-modal::-webkit-scrollbar-thumb,
.template-variables-list::-webkit-scrollbar-thumb,
.custom-fields-help > div::-webkit-scrollbar-thumb {
  background-color: var(--background-modifier-border);
  border-radius: 4px;
}

.bibliography-modal::-webkit-scrollbar-thumb:hover,
.bibliography-bulk-import-modal::-webkit-scrollbar-thumb:hover,
.template-variables-list::-webkit-scrollbar-thumb:hover,
.custom-fields-help > div::-webkit-scrollbar-thumb:hover {
  background-color: var(--background-modifier-hover);
}

/* Modal Headings */
.bibliography-modal h2,
.bibliography-bulk-import-modal h2 {
  margin-bottom: 20px;
  text-align: center;
  color: var(--text-normal);
}

/* General h3 within modal (can be overridden) */
.bibliography-modal h3 {
  margin-bottom: 20px;
  text-align: left;
  color: var(--text-normal);
}

/* Bulk Import h3 has specific margin */
.bibliography-bulk-import-modal h3 {
  margin-top: 24px;
  margin-bottom: 16px;
  color: var(--text-normal);
}

/* Loading State */
.bibliography-modal.loading {
  pointer-events: none;
  opacity: 0.7;
}

/* ==========================================================================
   Form Elements (Inputs, Textareas, Selects)
   ========================================================================== */

/* Base Styles for Inputs, Selects, Textareas */
.bibliography-modal input[type="text"],
.bibliography-modal input[type="number"],
.bibliography-modal input[type="date"],
.bibliography-modal select,
.bibliography-modal textarea,
.bibliography-citoid-input,
.bibliography-bibtex-input,
.link-path-input { /* Added link path input */
  width: 100%;
  padding: 8px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  background-color: var(--background-primary);
  color: var(--text-normal);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Textarea Specifics */
.bibliography-modal textarea,
.bibliography-bibtex-input { /* BibTeX input often acts like textarea */
  resize: vertical;
  min-height: 100px; /* Default min-height */
  line-height: 1.4;
}

/* Specific Overrides & Additions */
.bibliography-citoid-input,
.bibliography-bibtex-input {
  font-family: var(--font-monospace);
  margin-bottom: 8px;
}

.bibliography-bibtex-input {
  min-height: 100px; /* Redundant, but safe to keep */
  padding: 10px; /* Specific padding */
  font-size: 0.9em; /* Specific font size */
}

/* Textarea in custom frontmatter (refined style) */
.custom-frontmatter-field textarea {
  width: 100%;
  min-height: 100px;
  font-family: var(--font-monospace);
  font-size: 14px;
  padding: 10px;
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  margin-top: 8px;
}

/* Template field container */
.custom-frontmatter-template-container {
  width: 100%;
  margin-top: 8px;
}

/* Field name input styling */
.custom-frontmatter-field-name {
  width: 100%;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  background-color: var(--background-primary);
  margin-top: 8px;
}

/* Interaction States */
.bibliography-modal input:hover,
.bibliography-modal select:hover,
.bibliography-modal textarea:hover {
  border-color: var(--interactive-accent);
}

.bibliography-modal input:focus,
.bibliography-modal select:focus,
.bibliography-modal textarea:focus {
  border-color: var(--interactive-accent);
  outline: none;
  box-shadow: 0 0 0 2px var(--background-modifier-border); /* Consider var(--interactive-accent-border) if exists */
}

.custom-frontmatter-field textarea:focus,
.custom-frontmatter-field-name:focus { 
   background-color: var(--background-primary);
   border-color: var(--interactive-accent);
   box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
   outline: none;
}

.bibliography-modal input:disabled,
.bibliography-modal select:disabled,
.bibliography-modal textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Validation */
.bibliography-modal input:invalid,
.bibliography-modal select:invalid,
.is-invalid, .has-error input {
  border-color: var(--text-error) !important;
  background-color: rgba(var(--color-red-rgb), 0.05) !important;
}

/* File Input (Hidden by default) */
.bibliography-modal input[type="file"] {
  display: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Base Button Styles */
.bibliography-modal button,
.bibliography-bibtex-button {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background-color: var(--background-primary);
  color: var(--text-normal);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  font-weight: 500;
  box-sizing: border-box;
}

.bibliography-modal button:hover,
.bibliography-bibtex-button:hover {
  background-color: var(--background-modifier-hover);
}

/* Primary Action / Accent Buttons */
.bibliography-modal .create-button,
.bibliography-bibtex-button {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none; /* Override base border */
  font-weight: 600;
}

.bibliography-modal .create-button:hover,
.bibliography-bibtex-button:hover {
  background-color: var(--interactive-accent-hover);
}

.bibliography-modal .create-button {
  display: flex; /* Keep flex for centering content if needed */
  justify-content: center; /* Example alignment */
  align-items: center; /* Example alignment */
  width: 100%;
  margin-top: 20px;
  /* padding: 12px; */ /* Consider if base padding is sufficient */
}

.bibliography-bibtex-button {
  display: block; /* Make block */
  margin-top: 10px;
}

/* Secondary / Add Buttons */
.bibliography-add-contributor-button,
.bibliography-add-field-button {
  margin: 10px 0;
  width: 100%;
  background-color: var(--background-secondary);
  /* Inherits base hover */
}

/* Tertiary / Utility Buttons (e.g., Regenerate Citekey) */
.bibliography-modal .citekey-regenerate-button {
  padding: 4px 8px; /* Smaller padding */
  margin-left: 8px;
  font-size: 14px; /* Specific size */
  background-color: var(--background-secondary);
  /* Inherits base text color */
  /* Inherits base border */
}

.bibliography-modal .citekey-regenerate-button:hover {
  background-color: var(--background-modifier-hover);
  color: var(--text-accent); /* Specific hover color */
}

/* Destructive / Remove Buttons */
.bibliography-remove-contributor-button,
.bibliography-remove-field-button {
  padding: 4px 8px; /* Smaller padding */
  color: var(--text-error);
  background-color: transparent; /* Usually transparent */
  border-color: transparent; /* Usually transparent */
}

.bibliography-remove-contributor-button:hover,
.bibliography-remove-field-button:hover {
  background-color: var(--background-modifier-error-hover);
  color: var(--text-error);
  /* border-color: var(--text-error); */ /* Optional: add border on hover */
}

/* Cancel Button */
.bibliography-modal .bibliography-cancel-button {
  display: flex; /* Keep flex */
  justify-content: center; /* Example alignment */
  align-items: center; /* Example alignment */
  width: 100%;
  margin-top: 20px;
  /* Inherits base styles */
  /* padding: 12px; */ /* Consider if base padding is sufficient */
}

/* Link Button Container (in Temp Modal) */
.link-button-container {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}

/* ==========================================================================
   Citoid and BibTeX Sections
   ========================================================================== */

.bibliography-citoid-container {
  background-color: var(--background-secondary);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  overflow: hidden; /* Moved from collapsed state for consistency */
}

.bibliography-citoid-container.collapsed {
  padding-top: 0;
  padding-bottom: 0;
  /* overflow: hidden; */ /* Already applied to base */
}

.bibliography-citoid-toggle {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  margin-bottom: 10px; /* Only when expanded */
  padding-top: 16px; /* Add padding when collapsed to maintain click area */
  padding-bottom: 16px; /* Add padding when collapsed */
}
.bibliography-citoid-container.collapsed .bibliography-citoid-toggle {
   margin-bottom: 0;
}

.bibliography-citoid-toggle:hover {
  color: var(--text-accent);
}

.bibliography-citoid-toggle-icon {
  transition: transform 0.3s ease;
}

.bibliography-citoid-container.collapsed .bibliography-citoid-toggle-icon {
  transform: rotate(-90deg);
}

.bibliography-citoid-content {
  opacity: 1;
  max-height: 1000px; /* Adjust as needed */
  transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  overflow: hidden;
}

.bibliography-citoid-container.collapsed .bibliography-citoid-content {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.bibliography-citoid-input-container,
.bibliography-bibtex-container {
  margin: 12px 0;
}

.bibliography-zotero-notice {
  font-size: 0.85em;
  color: var(--text-accent);
  font-style: italic;
  margin-left: 10px;
  padding-left: 5px;
  border-left: 2px solid var(--interactive-accent);
}

/* ==========================================================================
   Settings Tab Styles
   ========================================================================== */

/* Main settings container */
.biblib-settings-container {
  /* Use minimal styling that doesn't affect other settings */
}

/* Plugin-specific resets */
.bibliography-date-container .setting-item,
.custom-frontmatter-field .setting-item {
  border-top: none;
  padding: 0;
  margin: 0; /* Ensure reset */
}

/* Only apply to our specific description elements */
.biblib-setting-description p {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  line-height: 1.4;
}

.biblib-setting-description strong {
  font-weight: 600;
  color: var(--text-accent);
}

/* Setting guide subtitles */
.setting-guide-subtitle {
    display: block;
    font-weight: 600;
    color: var(--text-accent);
    margin-top: var(--size-4-4);
    margin-bottom: var(--size-4-2);
    padding-bottom: var(--size-4-1);
    border-bottom: 1px solid var(--background-modifier-border);
}

/* Legacy Citekey Options Box */
.settings-legacy-citekey {
  padding: var(--size-4-3);
  border-left: 3px solid var(--text-muted); /* Was --text-faint, use --text-muted for consistency */
  margin-left: var(--size-4-2); /* Was 8px */
  margin-bottom: var(--size-4-4); /* Was 20px */
  background-color: var(--background-secondary-alt);
  border-radius: 0 var(--radius-m) var(--radius-m) 0; /* Use radius var */
}

/* Indentation Helper */
.setting-indent {
  margin-left: var(--size-6-2); /* Was 25px, use var */
}

/* Template Example Styling */
.template-example,
.setting-item-description code.template-example { /* Combine selectors */
  display: inline-block;
  margin-top: 6px;
  padding: 6px 8px;
  background-color: var(--background-secondary-alt);
  border-radius: 4px;
  font-family: var(--font-monospace);
  font-size: 0.9em;
  border: 1px dashed var(--text-accent);
  color: var(--text-accent); /* Ensure color consistency */
}

/* Template examples container */
.note-template-examples-container {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Template example item */
.template-example-item {
  background-color: var(--background-primary);
  border-radius: 8px;
  border: 1px solid var(--background-modifier-border);
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.template-example-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Template example title */
.template-example-title {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-accent);
}

/* Template example description */
.template-example-description {
  color: var(--text-muted);
  font-size: 14px;
  margin: 4px 0 12px 0;
  line-height: 1.5;
}

/* Template example code block */
.template-example-code {
  background-color: var(--background-secondary);
  border-radius: 6px;
  margin: 0 0 12px 0;
  padding: 0;
  overflow: auto;
  max-height: 300px;
}

.template-example-code code {
  display: block;
  padding: 12px;
  font-family: var(--font-monospace);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: normal;
  color: var(--text-normal);
  overflow-wrap: break-word;
}

/* Template example actions */
.template-example-actions {
  display: flex;
  justify-content: flex-end;
}

/* Template example copy button */
.template-example-copy-button {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.template-example-copy-button:hover {
  background-color: var(--interactive-accent-hover);
}

/* Template examples details element */
.template-examples-details {
  background-color: var(--background-secondary-alt);
  border-radius: 6px;
  padding: 0;
  margin-top: 16px;
  border: 1px solid var(--background-modifier-border);
}

.template-examples-details summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-normal);
  user-select: none;
  display: block;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.template-examples-details summary:hover {
  background-color: var(--background-modifier-hover);
  color: var(--text-accent);
}

.template-examples-details[open] summary {
  border-bottom: 1px solid var(--background-modifier-border);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Text and toggle inputs */
.setting-item input[type="text"],
.setting-item textarea {
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  padding: 8px;
  border-radius: 4px;
  width: 100%;
  transition: border-color 0.2s ease;
}

.setting-item input[type="text"]:focus,
.setting-item textarea:focus {
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
}

/* Card-style custom fields in settings */
.custom-frontmatter-field {
  background-color: var(--background-secondary);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-frontmatter-field:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* Improved toggle button styling */
.checkbox-container {
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.checkbox-container.is-enabled {
  background-color: var(--interactive-accent);
}

/* Add a subtle background to details sections */
.setting-item-description details {
  background-color: var(--background-secondary-alt);
  border-radius: 6px;
  padding: 1px;
  margin-bottom: 16px;
}

.setting-item-description details summary {
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.setting-item-description details summary:hover {
  background-color: var(--background-modifier-hover);
}

/* Helper text */

.setting-helper-text {
  margin-top: 4px;
  font-size: 0.85em;
  color: var(--text-muted);
  font-style: italic;
  padding-left: 8px;
  border-left: 2px solid var(--text-accent-hover);
}


/* ==========================================================================
   Date Input Container
   ========================================================================== */

.bibliography-date-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Responsive columns */
  gap: var(--size-4-4);
  margin: var(--size-4-4) 0;
}

.bibliography-date-container .setting-item-info {
   margin-bottom: var(--size-4-1); /* Space between label and input */
}

/* ==========================================================================
   Contributors & Additional Fields Sections
   ========================================================================== */

.bibliography-contributors,
.bibliography-contributors-list,
.bibliography-additional-fields,
.bibliography-additional-fields-list {
  margin: 10px 0;
}

.bibliography-contributor,
.bibliography-additional-field {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.bibliography-contributor {
  grid-template-columns: 1fr 1fr 1fr auto; /* Type, First, Last, Remove */
}

.bibliography-additional-field {
  grid-template-columns: 1fr 1fr 2fr auto; /* Type, Key, Value, Remove */
}

/* Ensure inputs/selects within these grids have no extra margin */
.bibliography-contributor select,
.bibliography-contributor input,
.bibliography-additional-field select,
.bibliography-additional-field input {
  margin: 0;
}

/* Highlight non-standard CSL fields */
.bibliography-additional-field.non-csl-field {
	background-color: rgba(255, 0, 0, 0.1); /* Light red background */
	border: 1px solid var(--text-error); /* Red border */
	border-radius: 4px;
    padding: 5px; /* Add slight padding */
    margin-left: -5px; /* Counteract padding for alignment */
    margin-right: -5px; /* Counteract padding for alignment */
}

/* Container for value input in additional fields (if needed for specific styling) */
.bibliography-field-value-container {
  margin: 0;
}

/* ==========================================================================
   Custom Frontmatter Fields (Settings Tab)
   ========================================================================== */

.custom-frontmatter-fields-container {
  margin-top: var(--size-4-3); /* Use vars */
  margin-bottom: var(--size-4-3); /* Use vars */
}

.custom-frontmatter-field {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-l);
  padding: var(--size-4-4);
  margin-bottom: var(--size-4-4);
  background-color: var(--background-secondary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Header for custom frontmatter field */
.custom-frontmatter-field-header {
  margin-bottom: 16px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Labels for field name and template */
.custom-frontmatter-field label.setting-item-name {
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  color: var(--text-accent);
}

/* Template textarea */
.custom-frontmatter-field-textarea {
  width: 100%;
  min-height: 120px;
  font-family: var(--font-monospace);
  font-size: 14px;
  padding: 10px;
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  margin-top: 8px;
}

.custom-frontmatter-field-textarea:focus {
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
  outline: none;
}

/* Custom field warning message */
.custom-field-warning {
  padding: 6px 10px;
  border-left: 3px solid var(--text-error);
  background-color: rgba(var(--color-red-rgb), 0.05);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-style: italic;
  margin-top: 8px !important;
}

/* Custom field warning visibility classes */
.custom-field-warning.warning-hidden {
  display: none;
}

.custom-field-warning.warning-visible {
  display: block;
}

.custom-frontmatter-field .setting-item-control {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-4-3);
}

.custom-frontmatter-field .setting-item-control > .text-input { /* Assumes text input has this class */
  flex: 1 1 150px;
}
.custom-frontmatter-field .setting-item-control > .text-area-input { /* Assumes textarea has this class */
  flex: 1 1 100%;
  min-width: 250px;
}

.custom-frontmatter-field .setting-item-control > .setting-editor-extra-button { /* Assumes delete button */
  flex-shrink: 0;
  /* Uses base button styles, maybe needs specific alignment? */
  align-self: center; /* Align button vertically */
}

/* ==========================================================================
   Template Variable Guides / Help Sections (Settings Tab)
   ========================================================================== */

/* <details> wrapper within setting descriptions */
.setting-item-description details {
  margin-top: var(--size-4-2);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background-color: var(--background-secondary);
  overflow: hidden;
}

.setting-item-description summary {
  cursor: pointer;
  font-weight: 500; /* Was 600, adjusted */
  padding: var(--size-4-2) var(--size-4-3);
  background-color: var(--background-secondary-alt);
  color: var(--text-muted); /* Was --text-accent, use muted for summary */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.setting-item-description summary:hover {
  background-color: var(--background-modifier-hover);
  color: var(--text-normal); /* Change text color on hover */
}

.setting-item-description summary::marker {
  color: var(--text-muted);
}

/* Content area within the details */
.template-variables-list,
.custom-fields-help > div { /* Assuming help content is wrapped */
  padding: var(--size-4-4);
  margin: 0;
  max-height: 500px; /* Limit height */
  overflow-y: auto;
  font-size: var(--font-ui-small);
  background-color: var(--background-secondary); /* Match details background */
}

/* Headings within guides */
.template-variables-list h3, .custom-fields-help h3, /* Added h3 */
.template-variables-list h4, .custom-fields-help h4,
.template-variables-list h5, .custom-fields-help h5 { /* Added h5 */
  font-size: var(--font-ui-small); /* Consistent small size */
  font-weight: 600;
  color: var(--text-accent);
  margin: var(--size-4-4) 0 var(--size-4-2) 0;
  padding-bottom: var(--size-4-1);
  border-bottom: 1px solid var(--background-modifier-border);
}
.template-variables-list h3:first-child, /* Reset top margin for first heading */
.custom-fields-help h3:first-child,
.template-variables-list h4:first-child,
.custom-fields-help h4:first-child {
  margin-top: 0;
}

/* Lists within guides */
.template-variables-list ul, .custom-fields-help ul {
  margin: 0 0 var(--size-4-3) 0; /* Add bottom margin */
  padding-left: 20px;
  list-style-type: disc; /* Default list style */
}
.template-variables-list li, .custom-fields-help li {
  margin-bottom: var(--size-4-2); /* Consistent spacing */
  line-height: 1.4;
}
/* Example lists need specific styling */
.template-examples ul {
  list-style-type: none;
  padding-left: 10px;
  margin-bottom: 15px;
}
.template-examples li {
  margin-bottom: 8px;
}
.template-examples code { /* Code blocks within examples */
  display: block;
  padding: 6px 8px;
  margin-bottom: 4px;
  /* Inherits base code styles */
}

/* Paragraphs within guides */
.template-variables-list p, .custom-fields-help p {
  margin: var(--size-4-2) 0;
  line-height: 1.5;
}

/* Code snippets within guides */
.template-variables-list code, .custom-fields-help code {
  background-color: var(--background-primary);
  border-radius: var(--radius-s);
  padding: 0.1em 0.3em;
  font-family: var(--font-monospace);
  font-size: 0.95em;
  color: var(--text-normal);
}

/* Links within guides */
.custom-fields-help a {
  color: var(--text-accent);
  text-decoration: underline;
}
.custom-fields-help a:hover {
    color: var(--text-accent-hover);
}


/* Tables within guides */
.template-variables-list table, .custom-fields-help table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--size-4-3) 0;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  overflow: hidden; /* Clip content to border radius */
  font-size: inherit; /* Inherit font size from container */
}

.template-variables-list th, .custom-fields-help th {
  background-color: var(--background-secondary-alt);
  padding: var(--size-4-2);
  text-align: left;
  font-weight: 500; /* Less bold */
  border-bottom: 1px solid var(--background-modifier-border); /* Lighter separator */
}

.template-variables-list td, .custom-fields-help td {
  padding: var(--size-4-2);
  border-top: 1px solid var(--background-modifier-border);
  vertical-align: top;
}

.template-variables-list tr:nth-child(even), /* Added zebra striping */
.custom-fields-help tr:nth-child(even) {
  background-color: var(--background-primary);
}

.template-variables-list tr:hover,
.custom-fields-help tr:hover {
  background-color: var(--background-modifier-hover);
}

/* ==========================================================================
   Bulk Import Modal Specifics
   ========================================================================== */

.bibliography-bulk-import-modal .bulk-import-warning {
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 5px;
  background-color: var(--background-secondary-alt);
  border: 1px solid var(--text-error);
  color: var(--text-error); /* Ensure text is visible */
}

.bibliography-bulk-import-modal .bulk-import-warning p {
  margin: 8px 0;
  line-height: 1.4;
  color: inherit; /* Inherit from parent */
}

.bibliography-bulk-import-modal .bulk-import-instructions {
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 5px;
  background-color: var(--background-secondary-alt);
  border: 1px solid var(--interactive-accent);
}

.bibliography-bulk-import-modal .bulk-import-instructions h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--interactive-accent);
  font-size: 1.1em;
  border: none; /* Override guide heading style if it cascaded */
  padding: 0;
}

.bibliography-bulk-import-modal .bulk-import-instructions ol {
  margin: 0 0 10px 20px;
  padding: 0;
}

.bibliography-bulk-import-modal .bulk-import-instructions li {
  margin-bottom: 8px;
  line-height: 1.4;
}

.bibliography-bulk-import-modal .bulk-import-instructions p {
  margin: 8px 0;
  line-height: 1.4;
  font-weight: 500;
}

.bibliography-bulk-import-modal .file-info {
  margin: 10px 0 20px;
  padding: 10px;
  border-radius: 4px;
  background-color: var(--background-secondary-alt);
  font-style: italic;
  color: var(--text-muted);
  border: 1px dashed var(--background-modifier-border); /* Add subtle border */
}

.bibliography-bulk-import-modal .file-info.has-file {
  color: var(--text-normal);
  font-weight: bold;
  font-style: normal;
  background-color: var(--background-modifier-success-hover); /* Use success bg */
  border-color: var(--text-success); /* Use success border */
}

.bibliography-bulk-import-modal .import-button-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  padding-bottom: 10px; /* Space at bottom */
}
/* Ensure import button uses primary styles */
.bibliography-bulk-import-modal .import-button-container button {
  /* Inherits base button, apply primary styles if needed */
   background-color: var(--interactive-accent);
   color: var(--text-on-accent);
   border: none;
   font-weight: 600;
   padding: 10px 24px; /* Larger padding for primary action */
}
.bibliography-bulk-import-modal .import-button-container button:hover {
    background-color: var(--interactive-accent-hover);
}

/* ==========================================================================
   Zotero Specific Styles
   ========================================================================== */

.zotero-attachment-indicator {
  margin-left: 8px;
  font-size: 16px; /* Keep size specific */
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
  font-weight: 500;
  display: inline-block;
  /* vertical-align: right; */ /* This is not a standard value, maybe 'middle' or 'baseline'? */
  vertical-align: middle; /* Adjusted alignment */
  cursor: help;
  transition: background-color 0.2s ease;
  animation: fade-in 0.3s ease-out forwards;
}

.zotero-attachment-indicator:hover {
  background-color: var(--interactive-accent-hover);
}

/* Container for the import section */
.import-section-container {
  margin-bottom: 0;
}

/* Placeholder for zotero note - initially empty */
.zotero-note-placeholder {
  display: none;
}

/* Container for the zotero note */
.zotero-note-container {
  display: block;
  width: 100%;
  margin-top: 8px;
}

.zotero-attachment-note {
  font-size: 12px;
  /* background-color: var(--interactive-accent); */
  /* color: var(--text-on-accent); */
  font-weight: 500;
  font-style: italic;
  display: block; /* Ensure it takes its own line */
  padding: 6px 10px; /* Increased padding for visibility */
  border: 1px solid var(--interactive-accent); /* Left border for visual cue */
  border-radius: 4px 4px 4px 4px; /* Round right corners */
  animation: fade-in 0.5s ease-out forwards;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  cursor: help;
}

.zotero-attachment-note:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0); /* Subtle shadow for depth */
}

/* Animation for Zotero elements */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   CSL Key Styling
   ========================================================================== */

/* IMPORTANT: This section should be updated whenever CSL_ALL_CSL_FIELDS changes in src/utils/csl-variables.ts */

/* Default style for all frontmatter keys */
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property-key, /* Live Preview */
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line .cm-meta.cm-yaml-key /* Source Mode */
{
  /* Default style for all keys  */
  font-style: italic;
  opacity: 0.7;
}

/* These CSS selectors target CSL fields defined in the source */
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="id"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="type"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="title"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="author"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="editor"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="chair"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="translator"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="container-author"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="collection-editor"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="issued"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="accessed"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="year"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="month"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="day"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="volume"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="number"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="issue"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="page"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="container-title"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="collection-title"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="DOI"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="ISBN"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="ISSN"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="URL"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="publisher"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="publisher-place"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="abstract"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="language"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="event"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="event-place"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="genre"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="source"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="medium"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="note"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="scale"] .metadata-property-key,
body.biblib-csl-styling-enabled .cm-s-obsidian .metadata-container .metadata-property[data-property-key="status"] .metadata-property-key,

/* Also target source mode keys */
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="id"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="type"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="title"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="author"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="editor"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="chair"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="translator"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="container-author"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="collection-editor"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="issued"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="accessed"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="year"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="month"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="day"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="volume"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="number"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="issue"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="page"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="container-title"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="collection-title"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="DOI"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="ISBN"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="ISSN"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="URL"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="publisher"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="publisher-place"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="abstract"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="language"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="event"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="event-place"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="genre"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="source"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="medium"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="note"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="scale"],
body.biblib-csl-styling-enabled .cm-s-obsidian .cm-line span.cm-meta.cm-yaml-key[cm-property-key="status"]
{
  /* Style for standard CSL keys - overrides default style */
  font-style: normal !important;
  font-weight: bold !important;
  opacity: 1.0 !important;
  color: var(--interactive-accent) !important;
}

/* ==========================================================================
   Status Bar Indicator for Zotero Connector
   ========================================================================== */

.zotero-connector-status {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.8;
    padding: 0 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.zotero-connector-status:hover {
    background-color: var(--background-modifier-hover);
}

.zotero-connector-status .status-icon {
    font-size: 10px;
}

.zotero-connector-status.active {
    color: var(--text-success);
}

.zotero-connector-status.active .status-icon {
    color: var(--interactive-success);
}

.zotero-connector-status.inactive {
    color: var(--text-muted);
}

.zotero-connector-status.inactive .status-icon {
    color: var(--text-faint);
}

/* ==========================================================================
   Utility & Visibility Classes
   ========================================================================== */

.setting-hidden {
  display: none !important;
}

.setting-visible {
  display: block !important; /* Or flex, grid, etc. depending on context */
}

/* These seem specific to an attachment container structure */
.attachment-container .hidden {
  display: none;
}

.attachment-container .visible {
  display: block; /* Or flex, grid, etc. */
}

/* ==========================================================================
   Attachments and Related Notes Display
   ========================================================================== */

.bibliography-attachments-display,
.bibliography-related-notes-display {
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 4px;
  background-color: var(--background-secondary);
  min-height: 30px;
}

.bibliography-attachments-list,
.bibliography-related-notes-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.bibliography-attachments-list li,
.bibliography-related-notes-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 4px;
  background-color: var(--background-primary);
}

.bibliography-remove-attachment-button,
.bibliography-remove-related-note-button {
  padding: 2px 6px;
  border: none;
  border-radius: 3px;
  background-color: var(--background-modifier-error);
  color: var(--text-on-accent);
  cursor: pointer;
  font-size: 12px;
}

.bibliography-remove-attachment-button:hover,
.bibliography-remove-related-note-button:hover {
  background-color: var(--text-error);
}

.attachment-type-badge {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
}

.attachment-type-badge.import {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
}

.attachment-type-badge.link {
  background-color: var(--interactive-success);
  color: var(--text-on-accent);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media screen and (max-width: 600px) {
  /* Stack grid items vertically on small screens */
  .bibliography-contributor,
  .bibliography-additional-field {
    grid-template-columns: 1fr;
  }

  /* Reduce padding on modal for small screens */
  .bibliography-modal,
  .bibliography-bulk-import-modal {
    padding: 10px;
  }

  /* Allow date fields to stack */
  .bibliography-date-container {
     grid-template-columns: 1fr; /* Stack date inputs */
  }

  /* Adjust custom field controls */
  .custom-frontmatter-field .setting-item-control {
      gap: var(--size-4-2); /* Reduce gap */
  }
  .custom-frontmatter-field .setting-item-control > .text-input,
  .custom-frontmatter-field .setting-item-control > .text-area-input {
      flex-basis: 100%; /* Force stacking */
  }
}

/* ==========================================================================
   Template Preview Styles 
   ========================================================================== */

.template-preview-container {
  margin-top: 8px;
  margin-bottom: 16px;
  background-color: var(--background-secondary);
  border-radius: 4px;
  padding: 8px;
}

.template-preview-label {
  font-size: 0.85em;
  margin-bottom: 4px;
  color: var(--text-muted);
}

.template-preview-sample-data {
  font-size: 0.8em;
  margin-bottom: 8px;
  color: var(--text-muted);
}

.template-preview-sample-data details summary {
  cursor: pointer;
}

.template-preview-content {
  font-family: var(--font-monospace);
  background-color: var(--background-primary);
  padding: 4px 8px;
  border-radius: 4px;
  word-break: break-all;
}

.template-preview-error {
  color: var(--text-error);
}

/* ==========================================================================
   Template Section Styles 
   ========================================================================== */

.template-playground-wrapper,
.template-settings-container,
.template-guide-container {
  margin: 20px 0;
  padding-top: 8px;
  border-top: 1px solid var(--background-modifier-border);
}

.template-playground-wrapper h3,
.template-settings-container h3,
.template-guide-container h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1em;
  font-weight: 600;
  color: var(--text-normal);
}

/* Note content template textarea styling */
.template-textarea-container textarea {
  width: 100%;
  height: 200px;
  font-family: var(--font-monospace);
  font-size: 14px;
  padding: 10px;
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

.template-textarea-container textarea:focus {
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
  outline: none;
}

/* ==========================================================================
   Template Playground Styles 
   ========================================================================== */

.template-playground-container {
  margin: 20px 0;
  padding: 20px;
  background-color: var(--background-secondary);
  border-radius: 8px;
  border: 1px solid var(--background-modifier-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.template-playground-description {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--text-normal);
  font-size: 0.95em;
  line-height: 1.5;
}

.template-playground-input-container {
  margin-bottom: 16px;
}

.template-playground-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-accent);
  font-size: 14px;
}

.template-playground-textarea {
  width: 100%;
  min-height: 180px !important;
  font-family: var(--font-monospace);
  font-size: 14px;
  padding: 10px;
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

.template-playground-textarea:focus {
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
  outline: none;
}

.template-playground-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px;
  background-color: var(--background-primary);
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  justify-content: space-between;
  align-items: center;
}

/* Mode toggles container */
.template-playground-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}

.template-playground-toggle,
.template-playground-examples {
  display: flex;
  align-items: center;
  gap: 10px;
}

.template-playground-toggle-label,
.template-playground-examples-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-accent);
}

/* Dropdown styling */
.dropdown-section-header {
  font-weight: bold;
  color: var(--text-accent);
  background-color: var(--background-secondary-alt);
}

.template-playground-mode-select,
.template-playground-examples-dropdown {
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--text-normal);
  cursor: pointer;
  min-width: 180px;
}

.template-playground-mode-select:focus,
.template-playground-examples-dropdown:focus {
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
  outline: none;
}

.template-playground-mode-select:hover,
.template-playground-examples-dropdown:hover {
  border-color: var(--interactive-accent);
}

.template-playground-preview-container {
  background-color: var(--background-primary);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--background-modifier-border);
  margin-top: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.template-playground-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--background-modifier-border);
}

.template-playground-preview-label {
  font-weight: 600;
  color: var(--text-accent);
  font-size: 16px;
}

.template-playground-sample-data {
  font-size: 0.9em;
  color: var(--text-muted);
  background-color: var(--background-secondary);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
}

.template-playground-sample-data details summary {
  cursor: pointer;
  padding: 6px 2px;
  font-weight: 600;
  user-select: none;
  color: var(--text-accent);
  transition: color 0.2s ease;
}

.template-playground-sample-data details summary:hover {
  color: var(--text-accent-hover);
}

/* Data container styling */
.template-playground-data-container {
  margin-top: 12px;
  padding: 12px;
  background-color: var(--background-secondary-alt);
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
}

/* Tabs styling */
.template-playground-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.tab-button {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background-color: var(--background-primary);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  transition: all 0.2s ease;
}

.tab-button:hover {
  background-color: var(--background-modifier-hover);
  border-color: var(--interactive-accent);
}

.tab-button.active {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

.template-playground-tab-content {
  font-size: 0.9em;
}

.tab-pane {
  display: none;
  background-color: var(--background-primary);
  border-radius: 6px;
  padding: 12px;
  border: 1px solid var(--background-modifier-border);
}

.tab-pane.active {
  display: block;
}

.tab-pane code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-monospace);
  padding: 10px;
  border-radius: 4px;
  line-height: 1.5;
  background-color: var(--background-secondary-alt);
  font-size: 14px;
}

.template-playground-preview-content {
  padding: 16px;
  background-color: var(--background-secondary);
  border-radius: 6px;
  min-height: 100px;
  border: 1px solid var(--background-modifier-border);
  margin-top: 12px;
  overflow: auto;
  max-height: 400px;
  font-size: 14px;
}

.template-playground-rendered {
  white-space: pre-wrap;
  font-family: var(--font-text);
  line-height: 1.6;
  font-size: 14px;
}

.template-playground-rendered.citekey-rendering {
  font-family: var(--font-monospace);
  padding: 10px;
  background-color: var(--background-primary);
  border-radius: 4px;
  border: 1px dashed var(--interactive-accent);
  color: var(--text-accent);
}

.template-playground-error {
  color: var(--text-error);
  padding: 12px 16px;
  border-left: 4px solid var(--text-error);
  background-color: rgba(var(--color-red-rgb), 0.05);
  border-radius: 0 6px 6px 0;
  margin: 12px 0;
  font-weight: 500;
}

/* Button styling for playground */
.template-playground-toggle button {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--background-modifier-border);
  background-color: var(--background-primary);
  transition: all 0.2s ease;
}

.template-playground-toggle button:hover {
  background-color: var(--background-modifier-hover);
  border-color: var(--interactive-accent);
}

.template-playground-toggle button.is-active {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

/* YAML preview specific styling */
.yaml-preview-container {
  padding: 16px;
  background-color: var(--background-primary);
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  margin-top: 16px;
  max-height: 400px;
  overflow: auto;
}

.yaml-preview-heading {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-accent);
}

.yaml-preview-explanation {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
  color: var(--text-normal);
}

.yaml-preview-biblib-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--background-modifier-border);
}

.yaml-preview-biblib-note h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--text-accent);
}

/* Frontmatter Preview Styling */
.frontmatter-preview-code {
  padding: 0;
  margin: 0;
  font-family: var(--font-monospace);
  font-size: 0.9em;
  line-height: 1.5;
  overflow: auto;
  background-color: var(--background-secondary-alt);
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
}

.frontmatter-preview-code code {
  display: block;
  padding: 12px;
  white-space: pre-wrap;
}

.yaml-preview-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background-color: var(--background-primary);
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  margin-top: 16px;
  max-height: 300px;
  overflow: auto;
}

.yaml-preview-heading {
  font-size: 0.9em;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-normal);
}

.standard-rendering {
  padding: 8px;
  background-color: var(--background-secondary-alt);
  border-radius: 4px;
  margin-bottom: 4px;
}

.yaml-preview-code {
  background-color: var(--background-secondary-alt);
  border-radius: 4px;
  padding: 0;
  margin: 0;
  overflow: auto;
  max-height: 200px;
}

.yaml-preview-code code {
  display: block;
  padding: 8px;
  font-family: var(--font-monospace);
  font-size: 0.9em;
  line-height: 1.4;
  white-space: pre-wrap;
  color: var(--text-normal);
}

.yaml-preview-explanation {
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 4px;
}

.yaml-preview-biblib-note {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--background-modifier-border);
}

.yaml-preview-biblib-note h4 {
  font-size: 0.9em;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text-accent);
}

.yaml-preview-biblib-note h5 {
  font-size: 0.85em;
  font-weight: 600;
  margin: 16px 0 8px 0;
  color: var(--text-normal);
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 4px;
}

.biblib-array-explanation {
  font-size: 0.85em;
  line-height: 1.5;
  white-space: pre-wrap;
  margin: 0;
}

/* YAML Guide Container and Related Styles */
.yaml-guide-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yaml-method-heading {
  font-weight: 600;
  color: var(--text-accent);
  margin: 16px 0 8px 0;
}

.yaml-example-container {
  background-color: var(--background-secondary-alt);
  border-radius: 4px;
  padding: 8px;
  margin: 8px 0;
}

.yaml-example-container p {
  margin: 4px 0;
  font-size: 0.85em;
}

.yaml-example-container pre {
  background-color: var(--background-primary);
  border-radius: 4px;
  padding: 0;
  margin: 4px 0 8px 0;
}

.yaml-example-container code {
  display: block;
  padding: 6px;
  font-family: var(--font-monospace);
  font-size: 0.85em;
  white-space: pre-wrap;
}

/* New styles for array processing */
.yaml-processing-container {
  margin-top: 10px;
  padding: 8px;
  background-color: var(--background-primary-alt);
  border-radius: 4px;
  border-left: 3px solid var(--color-green);
}

.yaml-processing-warning {
  color: var(--text-warning);
  font-weight: 500;
  font-size: 0.9em;
}

.yaml-processing-error {
  color: var(--text-error);
  font-weight: 500;
  font-size: 0.9em;
}

.template-preview-array-label {
  font-size: 0.9em;
  margin-bottom: 5px;
  color: var(--text-accent);
}

/* ==========================================================================
   Edit Modal Regeneration Options
   ========================================================================== */

.edit-options-container {
  margin: 20px 0;
  padding: 15px;
  background-color: var(--background-secondary);
  border-radius: 8px;
  border: 1px solid var(--background-modifier-border);
}

.edit-options-container h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--text-normal);
  font-size: 1.1em;
}

.edit-options-container .setting-item-description {
  margin-bottom: 15px;
  color: var(--text-muted);
  font-size: 0.9em;
}

.edit-body-warning {
  margin-top: 10px;
}

.edit-body-warning .callout {
  margin: 0;
}

.edit-body-warning .callout-warning {
  background-color: var(--background-modifier-error-hover);
  border-left: 4px solid var(--text-error);
  padding: 10px;
  border-radius: 4px;
}

.edit-body-warning .callout-title {
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--text-error);
}

.edit-body-warning .callout-content {
  font-size: 0.9em;
  color: var(--text-normal);
}