/* PUBMEM Modals - Modal overlays and dialogs */

/* Modal overlay (for add/search) */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); display: none;
  justify-content: center; align-items: flex-start; z-index: 100;
  padding: 1rem;
  overflow-y: auto;
}
.modal-overlay.show { display: flex; }

.modal {
  background: var(--pico-card-background-color);
  padding: 1.5rem; border-radius: 8px;
  width: 100%; max-width: 600px;
  margin-top: 5vh;
}
.modal h2 { margin-top: 0; font-size: 1.1rem; }
.modal textarea { min-height: 150px; resize: vertical; }

/* Pico dialog modal (for confirmations) */
dialog article footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
dialog article footer button { margin: 0; }
dialog article h3 {
  font-size: 1rem;
  margin-top: 0;
}

/* Edit dialog */
.edit-dialog {
  max-width: 600px;
  width: 90vw;
}
.edit-article {
  padding: 1.5rem;
}
.edit-article h3 {
  margin-bottom: 1.5rem;
}
.edit-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.edit-field {
  flex: 1;
}
.edit-field label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
}
.edit-field select {
  width: 100%;
  margin-bottom: 0;
}
#edit-summary {
  min-height: 80px;
  resize: vertical;
}
#edit-details {
  min-height: 200px;
  resize: vertical;
}

/* Shortcuts modal */
.shortcuts-modal {
  min-width: 280px;
}
.shortcuts-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}
.shortcuts-list dt {
  font-family: monospace;
  font-weight: 600;
  background: var(--pico-code-background-color);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
}
.shortcuts-list dd {
  margin: 0;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .modal { margin-top: 1rem; padding: 1rem; }
  .modal textarea { min-height: 120px; }
}