/**
 * Advanced Tags Styling
 * Styles for interactive WritingML tags: dropnote, popnote, footnote, hide
 */

/* Dropcap - Large first character */
.dropCap p { 
  padding: 0px; 
  margin: 0px; 
}

.dropCap p:first-child:first-letter { 
  padding: 0px 4px 0px 0px; 
  float: left; 
  width: 0.7em; 
  font-family: algerian, courier; 
  font-size: 400%; 
  line-height: 70%; 
}

/* Dropnote - Inline atom with popup (like hide) */
.writingml-dropnote {
  display: inline;
  cursor: pointer;
  user-select: none;
  /* Ensure inline dropnote does not affect surrounding whitespace/newlines */
  vertical-align: baseline;
}

/* Add margin to accordion-style dropnotes so they don't stack too tightly */
.writingml-dropnote.style-folder,
.writingml-dropnote.style-card {
  margin: 1px 0;
}

/* Hidden content preview should be completely out of document flow */
.writingml-dropnote .dropnote-content-preview:empty,
.writingml-dropnote .dropnote-content-preview[style*="display: none"] {
  position: absolute !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.writingml-dropnote .dropnote-title {
  /* Color is applied via inline style only when needed (no chevron = default blue)
     When user has styled the title (has chevron), no color is imposed */
}

.writingml-dropnote .dropnote-arrow {
  color: #0000FF;
  font-size: 0.8em;
}

.writingml-dropnote.editing {
  background-color: rgba(179, 217, 255, 0.3);
}

/* Inline dropnote editing styles */
.writingml-dropnote .dropnote-content-preview.inline-editing {
  border: 1px solid #90CAF9;
  border-radius: 4px;
  background: rgba(227, 242, 253, 0.5);
  min-height: 2em;
  cursor: text;
}

.writingml-dropnote .dropnote-content-preview.inline-editing:hover {
  border-color: #2196F3;
  background: rgba(227, 242, 253, 0.7);
}

.writingml-dropnote .dropnote-content-preview.inline-editing:focus-within {
  border-color: #1976D2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
  background: white;
}

/* Inline editor inside dropnote */
.writingml-dropnote .dropnote-inline-editor {
  outline: none !important;
  min-height: 1.5em;
  cursor: text;
}

.writingml-dropnote .dropnote-inline-editor:focus {
  outline: none !important;
}

/* Popnote - Hover/click note (matches output.inc rendering) */
.writingml-popnote {
  border-bottom: 2px dotted #0000FF;
  cursor: pointer;
  user-select: none;
}

.writingml-popnote[data-sticky="true"] {
  border-bottom-style: solid;
}

.writingml-popnote-popup {
  position: absolute;
  display: none;
  z-index: 10000;
  background: white;
  border: 1px solid #000;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  padding: 15px;
  max-width: 400px;
  margin-top: 5px;
}

.writingml-popnote-content {
  min-width: 200px;
  outline: none;
}

/* Footnote - Numbered footnote reference */
.writingml-footnote {
  vertical-align: super;
  font-size: 0.8em;
  color: blue;
  cursor: pointer;
  padding: 0 2px;
}

.writingml-footnote:hover {
  text-decoration: underline;
}

.writingml-footnotes-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #333;
}

.footnote-entry {
  margin-bottom: 10px;
}

.footnote-ref {
  font-weight: bold;
  margin-right: 5px;
}

/* Hide - Inline atom with click-to-edit content */
.writingml-hide {
  display: inline;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  background: #f0f0f0;
  border: 1px dashed #999;
  color: #666;
  font-style: italic;
  font-size: 0.9em;
  user-select: none;
}

.writingml-hide:hover {
  background: #e8e8e8;
  border-color: #666;
}

.writingml-hide.editing {
  background: #fff3cd;
  border-color: #ffc107;
  border-style: solid;
}

/* ProseMirror selection styling for special blocks */
.writingml-dropnote.ProseMirror-selectednode,
.writingml-hide.ProseMirror-selectednode {
  outline: 2px solid #3399ff;
  outline-offset: 2px;
  background-color: rgba(51, 153, 255, 0.15);
}

/* Folder style dropnote - no outline on wrapper, selection shown on tab only */
.writingml-dropnote.style-folder.ProseMirror-selectednode,
.writingml-dropnote.style-folder.advanced-tag-selected {
  outline: none !important;
  background-color: transparent !important;
}

/* Popnote selection - visible background highlight (inline element) */
.writingml-popnote.ProseMirror-selectednode {
  background-color: rgba(51, 153, 255, 0.25);
  outline: 1px solid #3399ff;
  outline-offset: 1px;
  border-radius: 2px;
}

/* Footnote selection - subtle background highlight, no outline box */
.writingml-footnote.ProseMirror-selectednode {
  background-color: rgba(33, 150, 243, 0.15);
  border-radius: 3px;
  outline: none !important;
}

/* Range selection highlighting (when part of a multi-element selection via drag or Ctrl+A) */
.writingml-dropnote.advanced-tag-selected,
.writingml-hide.advanced-tag-selected {
  outline: 2px solid #3399ff;
  outline-offset: 2px;
  background-color: rgba(51, 153, 255, 0.15);
}

.writingml-popnote.advanced-tag-selected {
  background-color: rgba(51, 153, 255, 0.25);
  outline: 1px solid #3399ff;
  outline-offset: 1px;
}

.writingml-footnote.advanced-tag-selected {
  background-color: rgba(33, 150, 243, 0.15);
}

.writingml-location-anchor.advanced-tag-selected {
  background-color: rgba(51, 153, 255, 0.2);
  outline: 1px solid #3399ff;
}