:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /*QGIS colors*/

  /* --qgis-bg: #1e1e1e; */
  --qgis-bg: #1e1e1e;
  --qgis-fg: #e6e6e6;
  --qgis-panel: #242526;
  --qgis-panel-text: #e6e6e6;
  --qgis-border: rgba(255,255,255,.08);
  --qgis-accent: #4d94ff;
  --qgis-accent-text: #ffffff;
  --qgis-muted: #9aa0a6;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}

a:hover {
  color: #535bf2;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  height: 100%;
  display: block;
  /* no centering—let the dock control layout */
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

.card {
  padding: 2em;
}

#app {
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  height: 100%;
  display: flex;
  /* make the editor fill */
  flex-direction: column;
  min-height: 0;
  /* critical inside flex/docks */
}


/* JSONEditor container */
#editor {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* nuke the stray spacer if present */
.editor-container {
  display: none !important;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}

button:hover {
  border-color: #646cff;
}

button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }

  a:hover {
    color: #747bff;
  }

  button {
    background-color: #f9f9f9;
  }
}

/* Status bar: looks clickable and supports toggling */
#status {
  font-weight: 700;          /* make it bold for readability */
  cursor: pointer;           /* make it obvious it's clickable */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  pointer-events: auto;      /* ensure WebEngine doesn't swallow clicks */
}

#status[data-has-details="1"]::after {
  content: "  (click to expand)";
  font-weight: 400;
  color: #aaa;
}


#status {
  padding: 4px 8px;
  border: 0;                                     /* remove ugly border */
  border-bottom: 1px solid var(--qgis-border);   /* subtle divider */
  background: var(--qgis-bg);
  color: var(--qgis-fg);
  white-space: nowrap;
  overflow: hidden;                               /* collapsed: single line */
}
#status.expanded {
  white-space: pre-line;                          /* multiline details */
  max-height: 12rem;
  overflow: auto;                                 /* scroll when long */
}
#status .status-text { color: var(--qgis-fg); }

#status.expanded {
  white-space: pre-line;     /* show multiline details when expanded */
  max-height: 12rem;
  overflow: auto;
}

/* Save button style in the JSONEditor menu */
/* Use icon + label and kill the default "+" pseudo-icon */
/* Remove the built-in '+' pseudo-icon from OUR Save button */
#editor .jsoneditor .jsoneditor-menu .je-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  margin-left: 6px;                 /* spacing after search box */
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font-weight: 600;
  text-indent: 0;                    /* just in case */
  cursor: pointer;
}
#editor .jsoneditor .jsoneditor-menu .je-btn:hover {
  background: rgba(255,255,255,.06); /* subtle hover like toolbar */
}
#editor .jsoneditor .jsoneditor-menu .je-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
#editor .jsoneditor .jsoneditor-menu .je-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
#editor .jsoneditor .jsoneditor-menu .jsoneditor-save-wrap {
  display: inline-flex;
  align-items: center;
}

/* JSONEditor chrome - QGIS color matching*/
.jsoneditor,
.jsoneditor * {
  color: var(--qgis-fg);
}
.jsoneditor .jsoneditor-menu {
  background: var(--qgis-panel);
  border-bottom: 1px solid var(--qgis-border);
}
.jsoneditor .jsoneditor-outer,
.jsoneditor .jsoneditor-tree,
.jsoneditor .jsoneditor-outer > .jsoneditor-tree {
  background: var(--qgis-bg);
}

/* Rows, selection, hover */
.jsoneditor .jsoneditor-highlight,
.jsoneditor .jsoneditor-selected {
  background: color-mix(in srgb, var(--qgis-accent) 18%, transparent);
}
.jsoneditor .jsoneditor-search input {
  background: var(--qgis-panel);
  color: var(--qgis-panel-text);
  border-color: var(--qgis-border);
}

/* Buttons hover feel */
.jsoneditor .jsoneditor-menu button:hover {
  background: color-mix(in srgb, var(--qgis-fg) 8%, transparent);
}

/* Validation warning dot color (if you want to align it) */
.jsoneditor .jsoneditor-schema-error {
  background: #f4b642;
}

#editor .jsoneditor .jsoneditor-tree .jsoneditor-field,
#editor .jsoneditor .jsoneditor-tree .jsoneditor-readonly {
  color: var(--qgis-fg) !important;
}


/* 3) Remove thin “blue” outline/border look */
#editor .jsoneditor,
#editor .jsoneditor .jsoneditor-outer,
#editor .jsoneditor .jsoneditor-tree,
#editor .jsoneditor .jsoneditor-menu,
#editor .jsoneditor *:focus {
  outline: none !important;
  box-shadow: none !important;
}
#editor .jsoneditor { border: 0 !important; }     /* nuke any default border */

/* search field focus ring → match theme instead of blue */
#editor .jsoneditor .jsoneditor-search input {
  background: var(--qgis-panel);
  color: var(--qgis-panel-text);
  border: 1px solid var(--qgis-border);
}
#editor .jsoneditor .jsoneditor-search input:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--qgis-border);
}

/* remove page margin + ensure background matches the theme */
html, body { margin: 0; padding: 0; background: var(--qgis-bg); }

/* nuke both lines around the status bar */
#status {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* remove the line below/above the editor toolbar, so no line sits against #status */
#editor .jsoneditor .jsoneditor-menu {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* make sure the containers don’t introduce stray borders/outlines */
#editor .jsoneditor,
#editor .jsoneditor .jsoneditor-outer,
#editor .jsoneditor .jsoneditor-tree {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* keep the status background solid (prevents a faint seam on some themes) */
#status { background: var(--qgis-bg) !important; }

/* Tree view: size badges for objects/arrays ({12}, [6]) */
#editor .jsoneditor .jsoneditor-tree .jsoneditor-value.jsoneditor-object,
#editor .jsoneditor .jsoneditor-tree .jsoneditor-value.jsoneditor-array {
  color: var(--qgis-accent-text) !important;          /* readable on dark */
  background: color-mix(in srgb, var(--qgis-accent) 24%, transparent);
  border: 1px solid var(--qgis-border);
  display: inline-block;
  padding: 0 6px;
  line-height: 18px;
  height: 18px;
  border-radius: 9px;
  font-weight: 600;
}

/* When the row is selected/highlighted, keep the badge readable */
#editor .jsoneditor .jsoneditor-selected
  .jsoneditor-value.jsoneditor-object,
#editor .jsoneditor .jsoneditor-selected
  .jsoneditor-value.jsoneditor-array {
  background: color-mix(in srgb, var(--qgis-accent) 35%, transparent);
  border-color: var(--qgis-border);
}

/* Fallback if color-mix isn't supported */
@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
  #editor .jsoneditor .jsoneditor-tree .jsoneditor-value.jsoneditor-object,
  #editor .jsoneditor .jsoneditor-tree .jsoneditor-value.jsoneditor-array {
    background: rgba(77, 148, 255, 0.24);
  }
  #editor .jsoneditor .jsoneditor-selected
    .jsoneditor-value.jsoneditor-object,
  #editor .jsoneditor .jsoneditor-selected
    .jsoneditor-value.jsoneditor-array {
    background: rgba(77, 148, 255, 0.35);
  }
}
/* Use QGIS foreground-tinted highlight instead of JSONEditor yellow */

/* Generic highlight (search hits, hovered label chunks, etc.) */
#editor .jsoneditor .jsoneditor-highlight {
  background: color-mix(in srgb, var(--qgis-fg) 18%, transparent) !important;
  color: var(--qgis-fg) !important;
  border-radius: 4px;
}

/* The “active” hit (current match / focused chunk) */
#editor .jsoneditor .jsoneditor-highlight-active {
  background: color-mix(in srgb, var(--qgis-fg) 28%, transparent) !important;
  color: var(--qgis-fg) !important;
}

/* When the whole row is selected, keep the chunk readable */
#editor .jsoneditor .jsoneditor-selected .jsoneditor-highlight,
#editor .jsoneditor .jsoneditor-selected .jsoneditor-highlight-active {
  background: color-mix(in srgb, var(--qgis-fg) 24%, transparent) !important;
}

/* Fallback for older Qt WebEngine without color-mix */
@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
  #editor .jsoneditor .jsoneditor-highlight         { background: rgba(255,255,255,0.18) !important; }
  #editor .jsoneditor .jsoneditor-highlight-active  { background: rgba(255,255,255,0.28) !important; }
  #editor .jsoneditor .jsoneditor-selected .jsoneditor-highlight,
  #editor .jsoneditor .jsoneditor-selected .jsoneditor-highlight-active {
    background: rgba(255,255,255,0.24) !important;
  }
}

/* Bonus: match selection color in Code mode (Ace) to the same white tint */
#editor .ace_editor .ace_marker-layer .ace_selection {
  background: color-mix(in srgb, var(--qgis-fg) 22%, transparent) !important;
}
@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
  #editor .ace_editor .ace_marker-layer .ace_selection {
    background: rgba(255,255,255,0.22) !important;
  }
}

/* Text selection in inputs/spans inside the editor */
#editor ::selection { background: rgba(255,255,255,0.22); color: var(--qgis-fg); }
#editor ::-moz-selection { background: rgba(255,255,255,0.22); color: var(--qgis-fg); }

