/* PUBMEM Pages - Various page views */

/* Page titles */
.page-title {
  text-align: center;
  margin-bottom: 1.5rem;
}
.page-title h3 {
  margin: 0;
  font-size: 1.1rem;
}

/* Authors/Users page */
.authors-page {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}
.authors-card {
  max-width: 500px;
  width: 100%;
}
.authors-card h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.1rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.authors-table { width: 100%; margin-bottom: 1.5rem; }
.authors-table th {
  text-align: left;
  font-size: 0.8rem;
  color: var(--gh-text-subtle);
  font-weight: normal;
}
.authors-table td { font-size: 0.9rem; white-space: nowrap; }
.authors-table th:last-child,
.authors-table td:last-child { text-align: right; width: 100px; }

.model-id-code {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--gh-text-subtle);
  background: transparent;
}

.add-inline-btn {
  background: transparent;
  border: 1px solid var(--pico-muted-border-color);
  color: var(--gh-blue);
  font-size: 1.25rem;
  font-weight: 300;
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}
.add-inline-btn:hover {
  background: var(--gh-blue);
  color: white;
  border-color: var(--gh-blue);
}

/* Action buttons in tables */
.action-btns {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  white-space: nowrap;
}

/* Edit button inline */
.edit-btn-inline {
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
}
.edit-icon-small {
  width: 24px;
  height: 24px;
  fill: var(--gh-blue);
  opacity: 0.5;
  transition: opacity 0.2s, fill 0.2s;
}
.edit-btn-inline:hover .edit-icon-small {
  opacity: 1;
  fill: var(--gh-orange);
}

/* Delete button inline */
.delete-btn-inline {
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
}
.trash-icon-small {
  width: 24px;
  height: 24px;
  fill: #dc3545;
  opacity: 0.5;
  transition: opacity 0.2s, fill 0.2s;
}
.delete-btn-inline:hover .trash-icon-small {
  opacity: 1;
  fill: #ff4d5a;
}
.delete-btn-inline.disabled {
  cursor: not-allowed;
  opacity: 0.25;
}
.delete-btn-inline.disabled .trash-icon-small { fill: var(--gh-text-subtle); }

/* Search page */
.search-page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1rem;
}
.search-form {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}
.search-form input,
.search-form select,
.search-form button {
  margin-bottom: 0 !important;
  height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box;
  line-height: 44px;
}
.search-form input { flex: 4; min-width: 200px; }
.search-form select { flex: 1.5; min-width: 120px; }
.search-form button { flex: 1; min-width: 100px; }
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

/* Add entry page */
.add-page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1rem;
}
.add-entry-form textarea {
  min-height: 100px;
  resize: vertical;
}
.add-entry-form textarea#entry-content {
  min-height: 300px;
}

/* Content tabs (source/preview) */
.content-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--gh-border);
  margin-bottom: 0;
}
.content-tab {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--gh-text-subtle);
  margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
}
.content-tab:hover { color: var(--gh-text); }
.content-tab.active {
  background: var(--gh-bg);
  border-color: var(--gh-border);
  border-bottom: 2px solid var(--gh-blue);
  color: var(--gh-text);
}
.content-panel {
  display: none;
  border: 1px solid var(--gh-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
}
.content-panel.active { display: block; }
.content-panel textarea {
  border: none !important;
  border-radius: 0 0 6px 6px !important;
  margin-bottom: 0 !important;
}
.content-preview {
  min-height: 300px;
  padding: 1rem;
  background: var(--gh-bg);
  border-radius: 0 0 6px 6px;
  overflow-y: auto;
}
.content-preview:empty::before {
  content: "Preview will appear here...";
  color: var(--gh-text-subtle);
  font-style: italic;
}

/* Edit entry page */
.edit-page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1rem;
}
.edit-entry-form .edit-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.edit-entry-form .edit-field { flex: 1; }
.edit-entry-form .edit-field label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  color: var(--gh-text-subtle);
}
.edit-entry-form textarea {
  min-height: 100px;
  resize: vertical;
}
.edit-entry-form .edit-details-large { min-height: 300px; }
.edit-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* Docs page (SPA) */
.docs-page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1rem;
}
.docs-page h2 {
  color: var(--gh-blue);
  font-size: 1.25rem;
  margin: 2rem 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gh-border);
}
.docs-page h2:first-child { margin-top: 0; }
.docs-page ul, .docs-page ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.docs-page li { margin: 0.5rem 0; }
.docs-page code {
  background: var(--gh-bg-subtle);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9rem;
}
.docs-page p { margin: 0.5rem 0; }
.docs-page small { color: var(--gh-text-subtle); }

/* Mobile responsiveness */
@media (max-width: 600px) {
  .search-form { flex-wrap: wrap; }
  .search-form input { width: 100%; }
  .search-form select, .search-form button { flex: 1; }
  .edit-entry-form .edit-row { flex-direction: column; gap: 0.5rem; }
  .add-author-form { grid-template-columns: 1fr; }
  .authors-card { overflow-x: auto; }
}