/* tools/nbt-editor/nbt-editor.css
 * Scoped to #tool-root to prevent tool-theme.css specificity overrides.
 */

#tool-root [hidden] {
  display: none !important;
}

#tool-root .nbte-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#tool-root .nbte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--text, #1f2923);
}

/* Toolbar */
#tool-root .nbte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card-bg, #f4f6f3);
  border: 1px solid var(--border, #d2dad0);
  border-radius: 8px;
}

#tool-root .nbte-file-group,
#tool-root .nbte-history-group,
#tool-root .nbte-download-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Buttons */
#tool-root button.nbte-btn,
#tool-root label.nbte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  user-select: none;
  box-sizing: border-box;
  text-decoration: none;
}

#tool-root button.nbte-btn:disabled,
#tool-root label.nbte-btn.nbte-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

#tool-root .nbte-btn-primary {
  background: #1b6356;
  color: #ffffff;
  border-color: #155045;
}

#tool-root .nbte-btn-primary:hover:not(:disabled) {
  background: #155045;
}

#tool-root .nbte-btn-success {
  background: #2b7a4b;
  color: #ffffff;
  border-color: #23633d;
}

#tool-root .nbte-btn-success:hover:not(:disabled) {
  background: #23633d;
}

#tool-root .nbte-btn-subtle {
  background: var(--btn-subtle-bg, #ffffff);
  color: var(--text, #1f2923);
  border-color: var(--border, #ccd4ca);
}

:root[data-theme="dark"] #tool-root .nbte-btn-subtle {
  background: #1c2720;
  color: #e2e8e0;
  border-color: #2f3e34;
}

#tool-root .nbte-btn-subtle:hover:not(:disabled) {
  background: var(--hover-bg, #e8ede6);
}

:root[data-theme="dark"] #tool-root .nbte-btn-subtle:hover:not(:disabled) {
  background: #26352c;
}

#tool-root .nbte-btn-danger {
  background: #bd2727;
  color: #ffffff;
  border-color: #9c1f1f;
}

#tool-root .nbte-btn-danger:hover:not(:disabled) {
  background: #9c1f1f;
}

#tool-root .nbte-btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

#tool-root .nbte-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--border, #ccd4ca);
  background: var(--btn-subtle-bg, #ffffff);
  color: var(--text-muted, #526356);
  border-radius: 4px;
  cursor: pointer;
}

:root[data-theme="dark"] #tool-root .nbte-icon-btn {
  background: #1c2720;
  color: #9cb0a1;
  border-color: #2f3e34;
}

#tool-root .nbte-icon-btn:hover {
  background: var(--hover-bg, #e8ede6);
  color: var(--text, #1f2923);
}

/* File Meta Bar */
#tool-root .nbte-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  font-size: 12.5px;
  background: var(--panel-sub-bg, #edf1ea);
  border: 1px solid var(--border, #d2dad0);
  border-radius: 6px;
}

:root[data-theme="dark"] #tool-root .nbte-meta-bar {
  background: #162019;
  border-color: #28372d;
}

#tool-root .nbte-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#tool-root .nbte-meta-label {
  color: var(--text-muted, #5f7063);
}

#tool-root .nbte-meta-badge {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #1b6356;
  color: #ffffff;
  border-radius: 4px;
}

#tool-root .nbte-badge-bedrock {
  background: #733c94;
}

/* Notification banner */
#tool-root .nbte-banner {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid transparent;
}

#tool-root .nbte-banner-info {
  background: #e8f4f2;
  border-color: #b5ded8;
  color: #114a40;
}

#tool-root .nbte-banner-error {
  background: #fdeeea;
  border-color: #f7c3b9;
  color: #8c1e14;
}

#tool-root .nbte-banner-success {
  background: #edf7ed;
  border-color: #bce0bc;
  color: #1e5a22;
}

:root[data-theme="dark"] #tool-root .nbte-banner-info {
  background: #132e2a;
  border-color: #1f4f48;
  color: #7de0d2;
}

:root[data-theme="dark"] #tool-root .nbte-banner-error {
  background: #331512;
  border-color: #59231e;
  color: #fca89d;
}

/* Dropzone */
#tool-root .nbte-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  border: 2px dashed var(--border-dashed, #bcc7b9);
  border-radius: 12px;
  background: var(--dropzone-bg, #fbfcfb);
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

:root[data-theme="dark"] #tool-root .nbte-dropzone {
  border-color: #314436;
  background: #121a15;
}

#tool-root .nbte-dropzone.nbte-dragover {
  border-color: #1b6356;
  background: #eef7f5;
}

:root[data-theme="dark"] #tool-root .nbte-dropzone.nbte-dragover {
  background: #162a24;
}

#tool-root .nbte-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 440px;
}

#tool-root .nbte-dropzone-icon {
  color: #1b6356;
  opacity: 0.85;
}

#tool-root .nbte-dropzone-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--text, #1f2923);
}

#tool-root .nbte-dropzone-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted, #5f7063);
}

#tool-root .nbte-dropzone-sub code {
  background: var(--code-bg, #eaeef1);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12.5px;
}

:root[data-theme="dark"] #tool-root .nbte-dropzone-sub code {
  background: #1f2c23;
  color: #c9d8cb;
}

#tool-root .nbte-dropzone-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* Workspace layout */
#tool-root .nbte-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 390px;
  gap: 16px;
  width: 100%;
  align-items: start;
}

@media (max-width: 820px) {
  #tool-root .nbte-workspace {
    grid-template-columns: 1fr;
  }
}

/* Panels */
#tool-root .nbte-panel {
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #d2dad0);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

:root[data-theme="dark"] #tool-root .nbte-panel {
  background: #151e18;
  border-color: #2b3a30;
}

#tool-root .nbte-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--panel-header-bg, #f4f6f3);
  border-bottom: 1px solid var(--border, #d2dad0);
  gap: 10px;
}

:root[data-theme="dark"] #tool-root .nbte-panel-header {
  background: #18231c;
  border-color: #2b3a30;
}

#tool-root .nbte-panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1f2923);
}

/* Search bar */
#tool-root .nbte-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

#tool-root .nbte-search-icon {
  position: absolute;
  left: 9px;
  color: var(--text-muted, #728577);
  pointer-events: none;
}

#tool-root .nbte-search-input {
  width: 100%;
  padding: 6px 26px 6px 30px;
  font-size: 13px;
  border: 1px solid var(--border, #ccd4ca);
  border-radius: 5px;
  background: var(--input-bg, #ffffff);
  color: var(--text, #1f2923);
  box-sizing: border-box;
}

:root[data-theme="dark"] #tool-root .nbte-search-input {
  background: #1a251e;
  color: #e2e8e0;
  border-color: #2f3e34;
}

#tool-root .nbte-search-input:focus {
  outline: 2px solid #1b6356;
  outline-offset: -1px;
}

#tool-root .nbte-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted, #728577);
  font-size: 15px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

#tool-root .nbte-tree-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Tree view container */
#tool-root .nbte-tree-wrap {
  max-height: 580px;
  min-height: 380px;
  overflow: auto;
  padding: 10px 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  background: var(--tree-bg, #ffffff);
}

:root[data-theme="dark"] #tool-root .nbte-tree-wrap {
  background: #141b16;
}

#tool-root .nbte-tree-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
}

#tool-root .nbte-tree-root {
  padding-left: 0;
}

#tool-root .nbte-tree-item {
  margin: 1px 0;
}

#tool-root .nbte-tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

#tool-root .nbte-tree-row:hover {
  background: var(--hover-bg, #edf3eb);
}

:root[data-theme="dark"] #tool-root .nbte-tree-row:hover {
  background: #1f2d23;
}

#tool-root .nbte-tree-row.nbte-selected {
  background: #d8eae5;
  outline: 1px solid #1b6356;
}

:root[data-theme="dark"] #tool-root .nbte-tree-row.nbte-selected {
  background: #1c3831;
  outline-color: #388e7e;
}

#tool-root .nbte-toggle-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 10px;
  line-height: 1;
  color: var(--text-muted, #728577);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

#tool-root .nbte-toggle-arrow.nbte-expanded {
  transform: rotate(90deg);
}

#tool-root .nbte-spacer {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Tag Type Badges */
#tool-root .nbte-badge {
  display: inline-block;
  padding: 1px 5px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 3px;
  color: #ffffff;
  flex-shrink: 0;
  line-height: 1.3;
}

#tool-root .nbte-badge-byte { background: #2b6cb0; }
#tool-root .nbte-badge-short { background: #2c7a7b; }
#tool-root .nbte-badge-int { background: #2f855a; }
#tool-root .nbte-badge-long { background: #276749; }
#tool-root .nbte-badge-float { background: #c05621; }
#tool-root .nbte-badge-double { background: #dd6b20; }
#tool-root .nbte-badge-bytearray { background: #6b46c1; }
#tool-root .nbte-badge-string { background: #b7791f; }
#tool-root .nbte-badge-list { background: #4c51bf; }
#tool-root .nbte-badge-compound { background: #c53030; }
#tool-root .nbte-badge-intarray { background: #805ad5; }
#tool-root .nbte-badge-longarray { background: #553c9a; }

#tool-root .nbte-node-name {
  font-weight: 600;
  color: var(--node-name, #184c42);
}

:root[data-theme="dark"] #tool-root .nbte-node-name {
  color: #6ed0bf;
}

#tool-root .nbte-node-val-preview {
  color: var(--text-muted, #5f7063);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

#tool-root .nbte-highlight {
  background: #ffec99;
  color: #000000;
  padding: 0 2px;
  border-radius: 2px;
}

/* Editor Panel Content */
#tool-root .nbte-editor-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#tool-root .nbte-empty-hint {
  margin: 24px 0;
  text-align: center;
  color: var(--text-muted, #728577);
  font-size: 13.5px;
}

#tool-root .nbte-path-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--panel-sub-bg, #f0f3ee);
  border-radius: 5px;
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-muted, #526356);
}

:root[data-theme="dark"] #tool-root .nbte-path-bar {
  background: #19231c;
  color: #9cb0a1;
}

#tool-root .nbte-path-bar .nbte-path-sep {
  color: #98a79a;
}

#tool-root .nbte-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#tool-root .nbte-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text, #1f2923);
}

#tool-root .nbte-input,
#tool-root .nbte-select,
#tool-root .nbte-textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 13.5px;
  font-family: inherit;
  border: 1px solid var(--border, #ccd4ca);
  border-radius: 6px;
  background: var(--input-bg, #ffffff);
  color: var(--text, #1f2923);
  box-sizing: border-box;
}

:root[data-theme="dark"] #tool-root .nbte-input,
:root[data-theme="dark"] #tool-root .nbte-select,
:root[data-theme="dark"] #tool-root .nbte-textarea {
  background: #18231c;
  color: #e2e8e0;
  border-color: #2f3e34;
}

#tool-root .nbte-input:focus,
#tool-root .nbte-select:focus,
#tool-root .nbte-textarea:focus {
  outline: 2px solid #1b6356;
  outline-offset: -1px;
}

#tool-root .nbte-textarea {
  min-height: 80px;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.4;
  resize: vertical;
}

#tool-root .nbte-field-hint {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-muted, #5f7063);
}

#tool-root .nbte-validation-error {
  color: #b71c1c;
  font-size: 12px;
  font-weight: 600;
}

:root[data-theme="dark"] #tool-root .nbte-validation-error {
  color: #ff8a80;
}

#tool-root .nbte-editor-btn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* Modal Dialog */
#tool-root .nbte-dialog {
  padding: 0;
  border: 1px solid var(--border, #ccd4ca);
  border-radius: 10px;
  background: var(--dialog-bg, #ffffff);
  color: var(--text, #1f2923);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 440px;
}

:root[data-theme="dark"] #tool-root .nbte-dialog {
  background: #162019;
  border-color: #314436;
  color: #e2e8e0;
}

#tool-root .nbte-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

#tool-root .nbte-dialog-form {
  margin: 0;
  display: flex;
  flex-direction: column;
}

#tool-root .nbte-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #d2dad0);
}

:root[data-theme="dark"] #tool-root .nbte-dialog-header {
  border-color: #2b3a30;
}

#tool-root .nbte-dialog-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

#tool-root .nbte-dialog-close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted, #728577);
  line-height: 1;
}

#tool-root .nbte-dialog-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#tool-root .nbte-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border, #d2dad0);
  background: var(--panel-sub-bg, #f4f6f3);
}

:root[data-theme="dark"] #tool-root .nbte-dialog-footer {
  border-color: #2b3a30;
  background: #18231c;
}

/* Footer & Help section */
#tool-root .nbte-footer {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#tool-root .nbte-security-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted, #5f7063);
}

#tool-root .nbte-icon-secure {
  color: #1b6356;
}

#tool-root .nbte-help {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text, #27331f);
}

:root[data-theme="dark"] #tool-root .nbte-help {
  color: #b7c7b9;
}

#tool-root .nbte-help p {
  margin: 0 0 10px;
}

#tool-root .nbte-help code {
  background: var(--code-bg, #edf1ea);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12.5px;
}

:root[data-theme="dark"] #tool-root .nbte-help code {
  background: #1f2c23;
  color: #c9d8cb;
}