/* Basic styles for topic discovery */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f8f9fa;
}

.navbar-brand {
  font-weight: bold;
}

.card {
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

/* Publication search buttons in modal */
.search-btn {
  background-color: #28a745;
  color: white;
  border: 1px solid #28a745;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s;
}

.search-btn:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

.search-btn:disabled {
  background-color: #6c757d;
  border-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.65;
}

.search-btn.searching {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
}

/* Discovery specific styles */
.topic-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 3rem 0;
  margin-bottom: 2rem;
}

.topic-search-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  color: white;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  width: 100%;
  max-width: 500px;
}

.topic-search-box::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.topic-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
  cursor: pointer;
}

.topic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.topic-icon {
  font-size: 2.5rem;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.trending-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff6b6b;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: bold;
}

.category-filter {
  background: #f8f9fa;
  border-radius: 25px;
  padding: 0.5rem 1rem;
  border: 1px solid #e9ecef;
  margin: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-filter.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.institution-attribution {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.5rem;
}

.institution-badge {
  background: #e9ecef;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  margin: 0.1rem;
  display: inline-block;
  font-size: 0.75rem;
}

.search-results {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
}

.search-result-item {
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-result-item:hover {
  background-color: #f8f9fa;
}

.search-result-item:last-child {
  border-bottom: none;
}

.topic-detail-modal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

.content-preview {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  margin: 0.5rem 0;
}

.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 8px;
  height: 200px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== PERSONAL LIST STYLING ===== */

/* Special styling for personal list row to emphasize its importance */
.personal-list-row {
  background-color: #f8f9fa;
  border-left: 4px solid #28a745;
  position: relative;
}

.personal-list-row:hover {
  background-color: #e8f5e8;
}

/* Personal indicator styling */
.personal-indicator {
  font-size: 1.1em;
  color: #28a745;
  margin-right: 0.25em;
}

/* Styling for the slug note in editing mode */
.slug-note {
  display: block;
  font-size: 0.75em;
  color: #6c757d;
  font-style: italic;
  margin-top: 0.25em;
}

/* Readonly slug input for personal list */
input[readonly].slug-input {
  background-color: #f8f9fa;
  border-color: #e9ecef;
  color: #6c757d;
}

/* ===== TABLE EDITING UX IMPROVEMENTS ===== */

/* Subtle highlight for target column to guide user attention */
.editing td:nth-child(2) {
  position: relative;
  background-color: #f8f9ff;
  border-left: 3px solid #007bff;
  border-right: 1px solid #e0e6ff;
}

/* Enhanced styling for URL input with auto-title-fetch capability */
input[data-field="target.url"] {
  border: 2px solid #e9ecef;
  border-radius: 6px;
  padding: 8px 12px;
  transition: all 0.3s ease;
  background: linear-gradient(to right, #ffffff 0%, #f8f9ff 100%);
}

input[data-field="target.url"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  background: #ffffff;
  outline: none;
}

/* Animated hint for URL inputs */
input[data-field="target.url"]::placeholder {
  color: #6c757d;
  transition: color 0.3s ease;
}

input[data-field="target.url"]:focus::placeholder {
  color: #007bff;
}

/* Auto-title-fetch indicator for name field (shows where auto-fill will appear) */
.name-auto-hint {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #28a745;
  color: white;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: normal;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 10;
  font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: 0.5px;
}

/* Protected state styling - overrides default green */
.name-auto-hint.protected {
  background: #ffc107;
  color: #000;
}

/* Show name auto hint when the name field is empty and focused, or when hovering the row */
.editing td:nth-child(1):hover .name-auto-hint,
input[data-field="name"]:focus + .name-auto-hint,
input[data-field="name"].link-name-input:placeholder-shown + .name-auto-hint,
.editing tr:has(input[data-field="target.url"]:focus) .name-auto-hint {
  opacity: 1;
  transform: scale(1);
}

/* Original URL input hint - keeping for URL-specific feedback */
.url-input-hint {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #007bff;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 0 4px 0 8px;
  font-weight: bold;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

/* URL warning text transitions */
.url-warning {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.url-warning[style*="display: none"] {
  opacity: 0;
  transform: translateY(-5px);
}

/* Loading state for auto-title-fetch */
input[data-field="target.url"].fetching-title {
  background: linear-gradient(90deg, #f8f9ff 25%, #e9ecef 50%, #f8f9ff 75%);
  background-size: 200% 100%;
  animation: fetchingTitle 1.5s infinite;
  border-color: #007bff;
}

@keyframes fetchingTitle {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Success state for auto-title-fetch */
input[data-field="target.url"].title-fetched {
  border-color: #28a745;
  background: linear-gradient(to right, #d4edda 0%, #ffffff 100%);
}

/* Subtle pulse animation for actionable cells */
@keyframes targetColumnPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(0, 123, 255, 0.1); }
  50% { box-shadow: inset 0 0 0 1px rgba(0, 123, 255, 0.3); }
}

.editing td:nth-child(2) {
  animation: targetColumnPulse 3s ease-in-out infinite;
}

/* Stop animation when user interacts */
.editing td:nth-child(2):hover,
.editing td:nth-child(2):focus-within {
  animation: none;
}

/* Enhanced visual feedback for the entire target column during editing */
.editing td:nth-child(2)::before {
  content: "💡 Paste URL here for auto-title";
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 11px;
  color: #007bff;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s ease;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}

/* Show the hint on hover or when input is empty */
.editing td:nth-child(2):hover::before,
.editing td:nth-child(2):has(input[data-field="target.url"]:placeholder-shown)::before {
  opacity: 1;
  transform: translateY(0);
}

/* Hide the hint when user is typing */
.editing td:nth-child(2):has(input[data-field="target.url"]:focus)::before {
  opacity: 0;
  transform: translateY(-5px);
}

/* Show connection between URL and name fields when URL is focused */
.editing tr:has(input[data-field="target.url"]:focus) input[data-field="name"] {
  border-color: #28a745;
  background: linear-gradient(to right, #f0f8f0 0%, #ffffff 100%);
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
}

/* Add a subtle connecting line between URL and name fields */
.editing tr:has(input[data-field="target.url"]:focus) td:nth-child(1)::after {
  content: "← auto-fill";
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #28a745;
  background: #ffffff;
  padding: 2px 6px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  opacity: 0;
  animation: connectFieldsAppear 0.3s ease-out 0.5s forwards;
  z-index: 10;
}

@keyframes connectFieldsAppear {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Style for publication editing cells */
.publication-editor-cell {
  background-color: #fffef8;
  border-left: 3px solid #ffc107;
  border-right: 1px solid #fff3cd;
}

/* Style for note editing cells */
.note-editor-cell {
  background-color: #f8f9ff;
  border-left: 3px solid #6f42c1;
  border-right: 1px solid #e2d9f3;
  max-width: 0; /* Forces table cell to respect content width */
  overflow: hidden; /* Prevent horizontal overflow */
}

.note-editor-cell > div {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.note-editor-cell textarea {
  border: 1px solid #d0d7de;
  border-radius: 4px;
  padding: 8px;
  font-family: inherit;
  resize: vertical;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.note-editor-cell .help-text {
  color: #6f42c1;
  font-style: italic;
  margin-top: 4px;
  display: block;
}

/* Character counter styles for note content */
.note-character-counter {
  margin-top: 4px;
  text-align: right;
}

.character-count {
  font-size: 0.75rem;
  color: #6c757d;
  font-weight: 500;
  transition: color 0.2s ease;
}

.character-count.near-limit {
  color: #fd7e14; /* Orange warning */
  font-weight: 600;
}

.character-count.over-limit {
  color: #dc3545; /* Red danger */
  font-weight: 700;
  animation: pulse-warning 1s infinite;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Style for sublist editing cells */
.editing td:has(.target-editor) {
  background-color: #f0f8f0;
  border-left: 3px solid #28a745;
  border-right: 1px solid #d4edda;
}

/* ===== EDITING GUIDANCE ANIMATIONS ===== */

@keyframes guidanceAppear {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes guidanceDisappear {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.9);
  }
}

/* ===== NOTE CARD STYLES ===== */

.note-content {
  padding: 12px 16px;
}

/* ===== NOTE CARD BADGE STYLES ===== */

.note-type-badge {
  background-color: #6f42c1; /* Purple badge for notes */
  color: white;
  font-size: 0.75em;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.note-title {
  font-weight: 600;
  font-size: 1.1em;
  margin-bottom: 8px;
  color: #2c3e50;
}

.note-body {
  font-size: 0.95em;
  line-height: 1.5;
  color: #555;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.note-body.note-empty {
  color: #999;
  font-style: italic;
}

/* Target note display styles */
.target-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.note-icon {
  font-size: 1.1em;
  color: #6f42c1;
  flex-shrink: 0;
}

.note-content {
  color: #555;
  line-height: 1.4;
  font-size: 0.95em;
}

/* ===== PUBLICATION CARD BADGE STYLES ===== */

.publication-type-badge {
  background-color: #28a745;
  color: white;
  font-size: 0.75em;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== CURATED COLLECTION BADGE STYLES ===== */

.curated-type-badge {
  background-color: #007bff;
  color: white;
  font-size: 0.75em;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.curated-ai-badge {
  background-color: #ffc107;
  color: #212529;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.8em;
  font-weight: 600;
}

/* ===== DOI CONVERSION MODAL STYLES ===== */

.doi-conversion-modal {
  max-width: 600px;
  padding: 2rem;
}

.doi-conversion-modal h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.doi-display {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 0.75rem;
  border-radius: 4px;
  margin: 1rem 0;
  font-family: monospace;
  word-break: break-all;
}

.conversion-preview {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 1rem;
  border-radius: 4px;
  margin: 1rem 0;
  min-height: 100px;
}

.publication-preview {
  line-height: 1.6;
  color: #2c3e50;
}

.preview-error {
  color: #dc3545;
  font-style: italic;
}

.loading {
  color: #6c757d;
  font-style: italic;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0 1rem 0;
}

.btn-primary {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background-color: #545b62;
}

.preference-settings {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
  font-size: 0.9em;
  color: #6c757d;
}

.preference-settings label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.convert-to-publication-btn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8em;
  cursor: pointer;
  margin-right: 0.5rem;
  transition: background-color 0.2s;
}

.convert-to-publication-btn:hover {
  background-color: #1e7e34;
}

/* ===== SUBLIST NAVIGATION STYLES ===== */

.target-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 4px; /* Square corners, not pill-shaped */
  font-size: 0.85em;
  font-weight: 600; /* Bolded font for sublist names */
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid #1565c0; /* Clear button outline */
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
}

.pill-sublist {
  background-color: #f8f9fa;
  color: #1565c0;
  border-color: #1565c0;
}

.pill-sublist .list-icon {
  color: #1976d2; /* Darker blue for the icon */
  font-size: 0.9em;
  font-weight: normal; /* Keep icon at normal weight */
}

.pill-sublist:hover {
  background-color: #1565c0;
  color: white;
  border-color: #0d47a1;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(33, 150, 243, 0.25);
}

.pill-sublist:hover .list-icon {
  color: white; /* Icon becomes white on hover */
}

    .pill-sublist:active {
      transform: translateY(0);
      box-shadow: 0 1px 3px rgba(33, 150, 243, 0.3);
    }

    /* ===== EDIT PAGE SPECIFIC STYLES ===== */

    .header h1 {
      position: center;
      font-size: 1.5em;
      margin-left: 80px; /* Adjust to align with the image */
      margin-top: 20px; /* Adjust as needed */
    }

    /* Edit page body styling */
    body.edit-page {
      font-family: Arial, sans-serif;
      margin: 2rem;
      background: #f7f9fc;
    }

    body.edit-page h1 {
      margin-bottom: 1rem;
    }

    body.edit-page select, 
    body.edit-page input, 
    body.edit-page button {
      padding: 0.5rem;
      margin: 0.25rem;
    }

    body.edit-page table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
    }

    #listHeading {
      text-align: center;
    }

    /* Define widths for each column */
    body.edit-page table th:nth-child(1),
    body.edit-page table td:nth-child(1) {
      width: auto; /* Let the first column take up remaining space */
    }

    body.edit-page table th:nth-child(2),
    body.edit-page table td:nth-child(2) {
      width: auto; /* Let the second column take up remaining space */
    }

    body.edit-page table th:nth-child(3),
    body.edit-page table td:nth-child(3) {
      width: 300px; /* Set the fixed width for the third column */
    }

    /* Optional: Manage text overflow if content exceeds fixed width */
    body.edit-page table td, 
    body.edit-page table th {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Override for note editing cells to allow proper textarea layout */
    body.edit-page table td.note-editor-cell {
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
    }

    body.edit-page th, 
    body.edit-page td {
      padding: 0.5rem;
      border: 1px solid #ccc;
      min-width: 400px;
    }

    body.edit-page table input[type="text"] {
      width: 99%;
      box-sizing: border-box;
      display: block;
    }

    .nowrap {
      white-space: nowrap;
    }

    body:not(.advanced-mode) .advanced-only {
      display: none;
    }
    
    /* Hide organizer and academic features by default */
    body:not(.organizer-features) .organizer-features {
      display: none;
    }
    body:not(.scholar-features) .scholar-features {
      display: none;
    }
    
    /* Hide curator features by default */
    body:not(.curator-features) .curator-features {
      display: none;
    }

    #title, #user {
      text-align: center;
      margin-top: 1rem;
    }

    #saveButton {
      display: inline-block;
      align-self: right;
      margin: 1rem auto;
    }

    /* 1. Row-Level Cue: A subtle background color for the entire editing row */
    tr.is-editing {
      background-color: #f0f7ff; /* A very light, soft blue */
      box-shadow: inset 3px 0 0 0 #007bff; /* A blue left-border to indicate "active" */
    }

    /* 2. Cell-Level Cue: Style the input fields for a clean look */
    .editing input[type="text"] {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 0.5rem;
      font-size: 1em;
      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    /* 3. Focus-Level Cue: A prominent "glow" when a user clicks into an input */
    .editing input[type="text"]:focus {
      outline: none; /* Remove the default browser outline */
      border-color: #007bff;
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* A soft blue glow */
    }

    /* Bonus: Add a visual cue to the read-only text on hover to hint at interactivity */
    td:not(.editing) > span:hover {
        background-color: #e9ecef;
        cursor: pointer;
        border-radius: 3px;
    }

    /* Generic Message Banner Styles */
    .message-banner {
      display: none;
      padding: 12px 16px;
      margin: 16px 0;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      position: relative;
      animation: slideDown 0.3s ease-out;
    }

    .message-banner.show {
      display: block;
    }

    .message-banner .close-btn {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      font-size: 18px;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      opacity: 0.7;
    }

    .message-banner .close-btn:hover {
      opacity: 1;
    }

    /* Message types */
    .message-banner.info {
      background-color: #d1ecf1;
      color: #0c5460;
      border-left: 4px solid #17a2b8;
    }

    .message-banner.success {
      background-color: #d4edda;
      color: #155724;
      border-left: 4px solid #28a745;
    }

    .message-banner.warning {
      background-color: #fff3cd;
      color: #856404;
      border-left: 4px solid #ffc107;
    }

    .message-banner.error {
      background-color: #f8d7da;
      color: #721c24;
      border-left: 4px solid #dc3545;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Moderation Status Styles */
    .moderated-item {
      position: relative;
    }
    
    .moderated-item.hidden {
      background-color: #fff3cd;
      border-left: 4px solid #ffc107;
    }
    
    .moderated-item.removed {
      background-color: #f8d7da;
      border-left: 4px solid #dc3545;
    }
    
    .moderation-status-indicator {
      position: absolute;
      top: 5px;
      right: 5px;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 11px;
      font-weight: bold;
      text-transform: uppercase;
      z-index: 10;
    }
    
    .moderation-status-indicator.hidden {
      background-color: #ffc107;
      color: #856404;
    }
    
    .moderation-status-indicator.removed {
      background-color: #dc3545;
      color: white;
    }
    
    .moderated-item input {
      opacity: 0.7;
      cursor: not-allowed;
    }
    
    .moderated-item.removed input {
      background-color: #f5f5f5;
      text-decoration: line-through;
    }
    
    .moderation-tooltip {
      position: absolute;
      background: #333;
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      z-index: 1000;
      top: 100%;
      left: 0;
      margin-top: 5px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    
    .moderation-status-indicator:hover .moderation-tooltip {
      opacity: 1;
    }

    /* Action buttons styling */
    #actionButtons {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    #discardButton {
      background-color: #dc3545;
      color: white;
      border: 1px solid #dc3545;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.2s ease;
    }

    #discardButton:hover {
      background-color: #c82333;
      border-color: #bd2130;
    }

    #discardButton:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
    }

    .edit-publication-trigger {
      cursor: pointer;
      text-decoration: underline;
      text-decoration-style: dotted;
      text-decoration-color: #0056b3;
    }

    .edit-publication-trigger:hover {
      color: #0056b3;
    }

    /* Modal Styles */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal-content {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      max-width: 500px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
    }

    .modal-content h3 {
      margin-top: 0;
      margin-bottom: 1.5rem;
      color: #333;
    }

    .modal-content label {
      display: block;
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      font-weight: bold;
      color: #555;
    }

    .modal-content input[type="text"] {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }

    .modal-content textarea {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
      font-family: 'Courier New', monospace;
      font-size: 0.9em;
      resize: vertical;
    }

    .modal-content button {
      margin-top: 1rem;
      margin-right: 0.5rem;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .modal-content button:first-of-type {
      background: #dc3545;
      color: white;
    }

    .modal-content button:last-of-type {
      background: #007bff;
      color: white;
    }

    .modal-content button:hover {
      opacity: 0.9;
    }

    /* URL Input Validation Styles */
    .url-input-empty {
      border: 2px solid #e74c3c !important;
      background-color: #fdf2f2 !important;
    }

    .url-input-empty:focus {
      border-color: #c0392b !important;
      box-shadow: 0 0 5px rgba(231, 76, 60, 0.3) !important;
    }

    /* Deleted row styling - strikethrough effect */
    tr.is-deleted {
      background-color: #f8f8f8;
      opacity: 0.7;
      text-decoration: line-through;
    }
    
    tr.is-deleted span,
    tr.is-deleted .target-pill,
    tr.is-deleted .target-url,
    tr.is-deleted .publication-title {
      text-decoration: line-through;
      color: #666;
    }
    
    tr.is-deleted .restore-item-btn {
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 4px;
      padding: 0.25rem 0.5rem;
      cursor: pointer;
    }
    
    tr.is-deleted .restore-item-btn:hover {
      background-color: #218838;
    }

    /* Curated List Item Styles */
    .curated-item-editor {
      padding: 1rem !important;
    }
    
    .curated-info {
      background: linear-gradient(135deg, #f8f4ff 0%, #f0e6ff 100%);
      border: 1px solid #9b59b6;
      border-radius: 8px;
      padding: 0.75rem;
      position: relative;
    }
    
    .curator-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 600;
      color: #9b59b6;
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
    }
    
    .curated-info .description {
      color: #666;
      font-size: 0.85rem;
      line-height: 1.4;
      margin-bottom: 0.5rem;
      font-style: italic;
    }
    
    .curated-info .help-text {
      color: #888;
      font-size: 0.8rem;
      display: block;
      margin-top: 0.5rem;
      padding-top: 0.5rem;
      border-top: 1px solid #e0e0e0;
    }
    
    /* Curated button styling */
    #addCuratedListButton {
      background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
      color: white;
      border: none;
      padding: 0.75rem 1rem;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(155, 89, 182, 0.2);
    }
    
    #addCuratedListButton:hover {
      background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(155, 89, 182, 0.3);
    }
    
    #addCuratedListButton:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(155, 89, 182, 0.2);
    }
    
    /* Curated List Read-Only Display Styles */
    .target-curated {
      background: linear-gradient(135deg, #f8f4ff 0%, #f0e6ff 100%);
      border: 1px solid #9b59b6;
      border-radius: 6px;
      padding: 0.5rem 0.75rem;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-block;
      min-width: 200px;
    }
    
    .target-curated:hover {
      background: linear-gradient(135deg, #f0e6ff 0%, #e8d4ff 100%);
      border-color: #8e44ad;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(155, 89, 182, 0.2);
    }
    
    .curated-header {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 0.25rem;
    }
    
    .curated-badge {
      background: #9b59b6;
      color: white;
      padding: 0.2rem 0.4rem;
      border-radius: 3px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
    }
    
    .ai-badge {
      background: #e74c3c;
      color: white;
      padding: 0.2rem 0.4rem;
      border-radius: 3px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    
    .curated-details {
      font-size: 0.85rem;
    }
    
    .curator-name {
      font-weight: 600;
      color: #9b59b6;
      display: block;
    }
    
    .curated-desc {
      color: #666;
      font-style: italic;
      margin-top: 0.25rem;
      line-height: 1.3;
    }

/* ===== DRAG AND DROP STYLES ===== */

/* Drag handle styling */
.drag-handle {
  cursor: grab;
  color: #999;
  font-weight: bold;
  font-size: 16px;
  padding: 4px 8px;
  margin-right: 8px;
  user-select: none;
  display: inline-block;
  transition: color 0.2s ease;
  border-radius: 3px;
}

.drag-handle:hover {
  color: #007bff;
  background-color: rgba(0, 123, 255, 0.1);
}

.drag-handle:active {
  cursor: grabbing;
}

/* Sortable.js classes for visual feedback */
.sortable-ghost {
  opacity: 0.4;
  background-color: #f0f8ff !important;
}

.sortable-chosen {
  background-color: #e3f2fd !important;
}

.sortable-drag {
  background-color: #ffffff !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
  border: 2px solid #007bff !important;
  transform: rotate(2deg);
}

/* Additional styling for the row being dragged */
.dragging {
  background-color: #f8f9fa !important;
  border: 1px dashed #007bff !important;
}

/* Make sure table rows remain proper height during drag */
tr.sortable-ghost td,
tr.sortable-chosen td,
tr.dragging td {
  border-color: #007bff;
}

/* Improve drag handle visibility in editing mode */
.editing .drag-handle {
  background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
  border: 1px solid rgba(111, 66, 193, 0.2);
}

.editing .drag-handle:hover {
  background-color: rgba(111, 66, 193, 0.2);
  color: #5a2d91;
}

/* ===== SORT CONTROLS STYLING ===== */

.sort-controls {
  margin: 1rem 0;
  padding: 0.75rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-weight: 500;
  color: #495057;
}

.sort-label-text {
  font-size: 0.9rem;
  color: #6c757d;
}

.sort-toggle-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border: 2px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
  color: #495057;
}

.sort-toggle-button:hover {
  border-color: #007bff;
  background: #f8f9ff;
  color: #007bff;
}

.sort-toggle-button:active {
  transform: translateY(1px);
}

.sort-toggle-button.alphabetical {
  border-color: #28a745;
  background: #f8fff9;
  color: #28a745;
}

.sort-toggle-button.alphabetical:hover {
  border-color: #1e7e34;
  background: #e8f5e8;
  color: #1e7e34;
}

.sort-icon {
  font-size: 1rem;
}

.sort-text {
  font-size: 0.85rem;
}

/* Hide drag handles when in alphabetical mode */
.alphabetical-sort .drag-handle {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.alphabetical-sort .drag-handle::after {
  content: "";
  font-size: 0.7rem;
  color: #999;
  font-weight: normal;
}

/* Collection Source Visual Indicators */
.collection-source-background {
  background: linear-gradient(135deg, #fef9e7 0%, #fdf6e3 100%);
  border: 2px solid #f39c12;
  border-radius: 8px;
  position: relative;
}

.collection-source-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(243, 156, 18, 0.05) 10px,
    rgba(243, 156, 18, 0.05) 20px
  );
  pointer-events: none;
  border-radius: 6px;
}

.collection-source-banner {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: white;
  padding: 16px 24px;
  margin: -20px -20px 24px -20px;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border: 3px solid #d68910;
}

.collection-source-banner .collection-icon {
  font-size: 1.4rem;
  margin-right: 10px;
}

.collection-source-banner .collection-text {
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.collection-source-banner .collection-note {
  font-size: 0.9rem;
  opacity: 0.95;
  margin-left: 12px;
  font-weight: 500;
  background: rgba(255,255,255,0.15);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* Bold gold outline around the table itself */
.collection-source-table {
  border: 4px solid #f39c12 !important;
  border-radius: 8px !important;
  box-shadow: 
    0 0 0 2px #fff,
    0 0 0 6px #f39c12,
    0 4px 12px rgba(243, 156, 18, 0.3) !important;
  background: linear-gradient(135deg, #fffdf7 0%, #fefcf3 100%) !important;
  position: relative;
}

.collection-source-table::before {
  content: "⭐ COLLECTION SOURCE ⭐";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 10;
}

/* Make table headers more prominent when it's a collection source */
.collection-source-table thead th {
  background: linear-gradient(135deg, #f8f4e6 0%, #f5efdc 100%) !important;
  border-bottom: 3px solid #f39c12 !important;
  font-weight: bold;
  color: #8b6914;
}