/*
The interactive PuavoConf editor
*/

.pcRawError {
  border: 1px solid var(--pce-error-border);
}

.puavoConfEditor {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pcTable {
  width: 100%;
}

.pcTable table {
  border-collapse: collapse;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

.pcTable td {
  margin: 0 !important;
  padding: 2px !important;
}

.pcTable .buttons {
  width: 0;       /* minimize cell width */
}

.pcTable .buttons button {
  cursor: pointer;
  padding: 2px 5px;
}

.pcTable .buttons button.delete {
  background: var(--pce-delete-back) !important;
  color: var(--pce-delete-fore) !important;
  border: 1px solid var(--pce-delete-border) !important;
}

.pcTable .buttons .delete:hover {
  background: var(--pce-delete-back-hover) !important;
  color: var(--pce-delete-fore-hover) !important;
  border: 1px solid var(--pce-delete-border-hover) !important;
}

.pcTable .key {
  width: 0;
}

.pcTable .value {
}

.pcTable div.editor {
  margin-left: 10px;
}

.pcTable div.editor table tr {
  background: none;
}

.pcTable div.editor input[type="text"] {
  padding: 5px !important;
}

.pcTable div.editor label {
  font-size: 100%;
  margin-right: 1em;
}

.pcTable input.new {
  width: 100%;
}

.pcTable textarea {
  width: 100%;
}

.pcTable .invalid {
  border: 1px solid var(--pce-error-border);
}

.pcTable div.editor div.details table {
  margin-left: 10px !important;
  width: auto !important;
}

.pcTable div.editor div.details table td {
  padding: 0 2px !important;
}

.pcTable div.editor div.details select {
  padding: 2px !important;
}

.pcTable div.editor div.details input[type="text"] {
  width: auto !important;
  padding: 2px !important;
}

.pcTable div.editor div.details table tr.invalid {
  background: var(--pce-error-back);
  border: none;
}

.pcTable div.editor div.details {
  max-height: 250px;
  overflow-y: auto;
}

/* The autocomplete suggestions list */
.pcSuggestions {
  position: absolute;
  z-index: 1;
  background: var(--pce-autocomplete-back);
  color: var(--pce-autocomplete-fore);
  border: 1px solid var(--pce-autocomplete-border);
  visibility: hidden;
  margin: 0;
  padding: 2px;
  font-size: 90%;

  min-width: 500px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
}

.pcSuggestions div {
  display: block;
  padding: 5px;
  cursor: pointer;
}

.pcSuggestions div.new {
  font-style: italic;
}

.pcSuggestions div.error {
  color: var(--pce-error-fore);
  font-style: italic;
}

.pcSuggestions div.entry {
  white-space: nowrap;
}

.pcSuggestions dfn {
  /* Default values and help texts, if available */
  margin-left: 10px;
  background: none;
  color: var(--pce-autocomplete-hint);
  font-size: 80%;
  text-overflow: ellipsis;
  pointer-events: none;
}

.pcSuggestions div.entry.selected, .pcSuggestions div.entry:hover {
  background: var(--pce-autocomplete-entry-hover-back);
  color: var(--pce-autocomplete-entry-hover-fore);
}

.pcSuggestions div.entry.selected dfn, .pcSuggestions div.entry:hover dfn {
  color: var(--pce-autocomplete-hint);
}

.pcSuggestions span {
  pointer-events: none;
}

.pcSuggestions span.match {
  /* Highlight the matching part */
  background: var(--pce-autocomplete-match-back);
  color: var(--pce-autocomplete-match-fore);
}
