/* PuavoMenu Editor (PME) */

:root {
  --pme-selected-item: #088;

  /* Category tabs */
  --pme-border-color: #5294e2;
  --pme-category-tab-border: var(--pme-border-color);
  --pme-category-tab-background: none;
  --pme-category-tab-foreground: #000;
  --pme-category-tab-foreground-hover: #fff;
  --pme-category-tab-background-hover: var(--pme-border-color);

  /* Menu/program list headers */
  --pme-section-header-foreground: #000;
  --pme-section-header-border: #ccc;

  /* Menu/program ID */
  --pme-entry-id-background: none;
  --pme-entry-id-foreground: 000;
  --pme-entry-id-border: #ccc;
  --pme-entry-id-hover-background: #ddd;
  --pme-entry-id-hover-foreground: #000;
  --pme-entry-id-hover-border: #bbb;

  /* Menu/program remove button */
  --pme-entry-remove-background: #fdd;
  --pme-entry-remove-foreground: #f00;
  --pme-entry-remove-border: #fcc;
  --pme-entry-remove-hover-background: #fcc;
  --pme-entry-remove-hover-foreground: #f00;
  --pme-entry-remove-hover-border: #faa;

  /* Add menu/program button */
  --pme-entry-new-background: #bfb;
  --pme-entry-new-foreground: #000;
  --pme-entry-new-border: #7f7;
  --pme-entry-new-hover-background: #8f8;
  --pme-entry-new-hover-foreground: #000;
  --pme-entry-new-hover-border: #7f7;

  --pme-notify-background: #f66;
  --pme-notify-foreground: #fff;
}

/*
====================================================================================================
COMMON ELEMENTS
====================================================================================================
*/

/* The main menu editor wrapper DIV */
div#pme {
  display: block;
  width: 100%;
  font-size: 95%;
  line-height: 1.2;
}

/* Any selected entry */
div#pme .selected {
  outline: 2px dotted var(--pme-selected-item);
}

/* Item editor help popup */
p.helpTitle {
  font-weight: bold;
  font-size: 90%;
  margin: 0;
}

div.pmeError p {
  border: 1px solid #f00;
  border-radius: 5px;
  background: #fcc;
  color: #000;
  margin: 0;
  padding: 5px;
}

div.pmeWarning p {
  border: 1px solid #ff0;
  border-radius: 5px;
  background: #ffc;
  color: #000;
  margin: 0;
  padding: 5px;
}

.pmeDrag {
  position: absolute;
  z-index: 10;
  cursor: grabbing;
  opacity: 0.9;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #eee;
  user-select: none;
  padding: 5px;
  display: flex;
  align-items: center;
  font-size: 80%;
}

.pmeDragMarker {
  background: #00f;
  border: none;
  position: absolute;
  width: 5px;
  display: block;
  z-index: 9;
}

div#pme header.header {
  font-size: 130%;
  margin-bottom: 10px;
  background: #ccc;
  padding: 5px;
}

div.popup table.pmeUnused {
  border: 1px solid #888;
  width: 100%;
}

div.popup table.pmeUnused th,
div.popup table.pmeUnused td {
  border: 1px solid #888;
  padding: 5px;
}

div.popup table.pmeUnused th {
  background: #ccc;
}

div.popup .pmeSearchResults#results {
  overflow-x: clip;
  overflow-y: scroll;
  max-height: 20em;
}

div.popup .pmeSearchResults ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/*
====================================================================================================
THE MENU PREVIEW
====================================================================================================
*/

div#pme div#preview {
  width: 70%;
}

div#pme div#preview div.entries {
  /* Text selection here can cause weird things */
  user-select: none;
}

/*
----------------------------------------------------------------------------------------------------
Category tabs
----------------------------------------------------------------------------------------------------
*/

div#pme div#preview div#tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  border-bottom: 2px solid var(--pme-border-color);
}

div#pme div#preview div#tabs div.tab {
  background: var(--pme-category-tab-background);
  color: var(--pme-category-tab-foreground);
  border-radius: 5px 5px 0 0;
  padding: 5px 10px;
  margin: 0;
  cursor: pointer;
}

div#pme div#preview div#tabs div.tab span {
  pointer-events: none;
}

div#pme div#preview div#tabs div.tab:hover,
div#pme div#preview div#tabs div.tab.current {
  background: var(--pme-category-tab-background-hover);
  color: var(--pme-category-tab-foreground-hover);
}

div#pme div#preview div#tabs div.tab.current {
  border-color: var(--pme-category-tab-border);
  background: var(--pme-category-tab-background-hover);
  color: var(--pme-category-tab-foreground-hover);
}

/* A category with problems */
div#pme div#preview div#tabs div.tab.notify span.id:before {
  content: "!";
  background: var(--pme-notify-background);
  color: var(--pme-notify-foreground);
  padding: 2px 10px;
  margin-right: 5px;
  border-radius: 3px;
}

/*
----------------------------------------------------------------------------------------------------
Menu and program lists
----------------------------------------------------------------------------------------------------
*/

div#pme div#contents {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 10px;
}

div#pme div#contents section { }

/* Menu/program section header */
div#pme div#contents section header {
  border-bottom: 1px solid var(--pme-section-header-border);
  color: var(--pme-section-header-foreground);
  padding: 2px 0;
  margin: 5px 0;
  font-weight: bold;
}

/* A list of menus/programs inside a section */
div#pme div#contents div.entries {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px;  /* Leave some room for the drag-and-drop slot markers */
}

/* Any menu or program entry. Contains two child spans: the entry ID and the remove button. */
div.pmeEntry {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

div.pmeEntry span {
  border-style: solid;    /* color and width set elsewhere */
  border-width: 0;
  padding: 5px 10px;
}

/* Left side: menu/program ID */
div.pmeEntry span.id {
  background: var(--pme-entry-id-background);
  color: var(--pme-entry-id-foreground);
  border-color: var(--pme-entry-id-border);
  border-width: 1px 0px 1px 1px;
  border-radius: 5px 0 0 5px;
}

div.pmeEntry.notify span.id:before {    /* Something is wrong with this entry */
  content: "!";
  background: var(--pme-notify-background);
  color: var(--pme-notify-foreground);
  padding: 2px 10px;
  margin-right: 5px;
  border-radius: 3px;
}

div.pmeEntry span.id:hover {
  border-color: var(--pme-entry-id-hover-border);
  background: var(--pme-entry-id-hover-background);
  color: var(--pme-entry-id-hover-foreground);
}

/* Right side: the remove button */
div.pmeEntry span.remove {
  background: var(--pme-entry-remove-background);
  color: var(--pme-entry-remove-foreground);
  border-color: var(--pme-entry-remove-border);
  border-width: 1px 1px 1px 0;
  border-radius: 0 5px 5px 0;
}

div.pmeEntry span.remove:hover {
  border-color: var(--pme-entry-remove-hover-border);
  background: var(--pme-entry-remove-hover-background);
  color: var(--pme-entry-remove-hover-foreground);
}

/* Add menu/program buttons */
div.pmeEntry.new {
  border: 1px solid var(--pme-entry-new-border);
  background: var(--pme-entry-new-background);
  color: var(--pme-entry-new-foreground);
  border-radius: 5px;
}

div.pmeEntry.new:hover {
  border: 1px solid var(--pme-entry-new-hover-border);
  background: var(--pme-entry-new-hover-background);
  color: var(--pme-entry-new-hover-foreground);
}

div.pmeEntry.new span {
  /* seriously? deep sigh... */
  pointer-events: none;
}

/* Indicate external menus and programs */
div.pmeEntry.external span.id {
  font-style: italic;
}

/*
----------------------------------------------------------------------------------------------------
New entry popup
(These are on top of the generic modalPopup styles)
----------------------------------------------------------------------------------------------------
*/

div.popup div.pmeNewEntry input#newName { }

div.popup div.pmeNewEntry div#list {
  border: 1px solid #ccc;

  overflow-x: hidden;
  overflow-y: scroll;

  min-height: 20em;
  max-height: 20em;
  user-select: none;
}

div.popup div.pmeNewEntry div#list div {
  padding: 5px;
  cursor: pointer;
}

div.popup div.pmeNewEntry div#list div:hover {
  background: #ddd;
}

div.popup div.pmeNewEntry div#list div.alreadyIn {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
====================================================================================================
THE EDITOR SIDE PANE
====================================================================================================
*/

div#pme div#editor {
  width: 30%;
  margin-left: 5px;
  border-left: 2px solid #ccc;
  padding-left: 5px;

  max-height: 90vh;
  overflow: scroll;
}

/* The placeholder texts */
div#pme div#editor div.placeholder {
  font-style: italic;
}

div#pme div#editor div#wrapper {
  display: flex;
  flex-direction: column;
}

/* Editor controls container */
div#pme div#editor div#wrapper {
  gap: 10px;
}

/* Nested sections inside the wrapper */
div#pme div#editor div#wrapper details {
  flex-wrap: no-wrap;
  gap: 5px;
}

/* Title bar for each editor section. Contains the title and optionally a help link. */
div#pme div#editor div#wrapper details summary {
  padding: 5px;
  background: #eee;
  cursor: pointer;
}

div#pme div#editor div#wrapper details summary:hover {
  background: #ddd;
}

div#pme div#editor div#wrapper details summary a {
  margin-left: 5px;
}

div#pme div#editor div#wrapper details span.notify::before {
  color: #f00;
  font-weight: bold;
  content: "!!";
}

/* Inside of each section */
div#pme div#editor div#wrapper details div.contents {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 5px;
}

/* Language editor table */
div#pme div#editor div#wrapper details table.languages {
  margin-left: 20px;
}

div#pme div#editor div#wrapper details table.languages th {
  font-weight: normal;
  text-align: right;
  padding-right: 5px;
}

div#pme div#editor div#wrapper details table.languages td {
  /* Override top-level rules */
  padding: 2px !important;
}
