:root {
  color-scheme: light;
  --jti-row-height-compact: 28px;
  --jti-row-height-normal: 34px;
  --jti-row-height-roomy: 44px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
  background: #d8dde5;
  color: #111720;
}

#app {
  min-height: 100vh;
  padding: 10px;
}

.jti-root {
  min-height: calc(100vh - 20px);
  display: grid;
}

.jti-toolbar {
  width: 100%;
}

.jti-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.jti-toolbar-metrics {
  justify-content: flex-end;
}

.jti-toolbar-badge {
  border: 1px solid var(--awwbookmarklet-border-subtle, #9ba5b3);
  background: var(--awwbookmarklet-surface-raised-bg, #f7f9fc);
  color: var(--awwbookmarklet-text-muted, #586272);
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

.jti-panel-helper,
.jti-input-meta {
  margin: 0;
  color: var(--awwbookmarklet-text-muted, #586272);
  white-space: pre-wrap;
}

.jti-parse-alert {
  white-space: pre-wrap;
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 12px;
}

.jti-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jti-examples {
  display: grid;
  gap: 6px;
}

.jti-example-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jti-detection-reasons,
.jti-diagnostics-list,
.jti-performance-warnings,
.jti-row-reasons,
.jti-row-fields {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.jti-mini-panel {
  border: 1px solid var(--awwbookmarklet-border-subtle, #9ba5b3);
  background: var(--awwbookmarklet-surface-raised-bg, #f8fbfe);
  padding: 6px 8px;
  display: grid;
  gap: 6px;
}

.jti-mini-title {
  margin: 0;
  font-weight: 600;
}

.jti-highlight-form,
.jti-column-actions,
.jti-highlight-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.jti-highlight-list,
.jti-column-list {
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow: auto;
}

.jti-column-item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.jti-column-search {
  min-height: 28px;
  border: 1px solid var(--awwbookmarklet-border-strong, #657282);
  background: #fff;
  color: #111720;
  padding: 4px 8px;
}

.jti-table-status {
  width: 100%;
}

.jti-table-container {
  min-height: 200px;
}

.jti-table-placeholder {
  margin: 0;
  color: var(--awwbookmarklet-text-muted, #586272);
}

.jti-table-scroll {
  overflow: auto;
  max-height: 48vh;
  border: 1px solid var(--awwbookmarklet-border-subtle, #9ba5b3);
}

.jti-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.jti-table ::selection {
  background: Highlight;
  color: HighlightText;
}

.jti-th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #eef2f7;
  border-bottom: 1px solid var(--awwbookmarklet-border-strong, #657282);
  border-right: 1px solid var(--awwbookmarklet-border-subtle, #9ba5b3);
  text-align: left;
  padding: 0;
}

.jti-th--system {
  user-select: none;
}

.jti-sort-button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  color: #111720;
  font: inherit;
}

.jti-sort-button--system {
  cursor: default;
}

.jti-cell {
  border-right: 1px solid var(--awwbookmarklet-border-subtle, #b2bac6);
  border-bottom: 1px solid var(--awwbookmarklet-border-subtle, #c7cfdb);
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jti-cell--data {
  user-select: text;
}

.jti-root[data-wrap-cells="true"] .jti-cell {
  white-space: normal;
  overflow-wrap: anywhere;
}

.jti-system-cell {
  background: #f6f8fb;
  position: sticky;
  left: 0;
  z-index: 1;
}

.jti-row .jti-system-cell:nth-child(2) {
  left: 56px;
}

.jti-cell--system,
.jti-th--system,
.jti-health-badge {
  user-select: none;
}

.jti-row--selected {
  box-shadow: inset 0 0 0 1px var(--awwbookmarklet-border-strong, #657282);
}

.jti-cell-value {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.jti-cell-missing,
.jti-cell-null,
.jti-cell-empty {
  color: #647181;
}

.jti-row-failure {
  background: color-mix(in srgb, #fef2f2 75%, white);
}

.jti-row-warning {
  background: color-mix(in srgb, #fff7ed 70%, white);
}

.jti-health-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid;
  font-size: 12px;
  text-transform: capitalize;
}

.jti-health-failure {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.jti-health-warning {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fdba74;
}

.jti-health-ok {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.jti-health-unknown {
  background: #e5e7eb;
  color: #374151;
  border-color: #c4c8cf;
}

.jti-highlight {
  position: relative;
}

.jti-highlight--danger {
  background: #fee2e2;
}

.jti-highlight--warning {
  background: #fef3c7;
}

.jti-highlight--info {
  background: #dbeafe;
}

.jti-highlight--success {
  background: #dcfce7;
}

.jti-highlight--custom {
  background: var(--jti-highlight-bg, #fde68a);
}

.jti-json-block {
  margin: 0;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--awwbookmarklet-border-subtle, #9ba5b3);
  padding: 8px;
  background: #fff;
  font: 12px/1.35 ui-monospace, "Cascadia Mono", "Consolas", monospace;
  white-space: pre;
}

.jti-root[data-density="compact"] .jti-cell {
  min-height: var(--jti-row-height-compact);
  font-size: 12px;
}

.jti-root[data-density="normal"] .jti-cell {
  min-height: var(--jti-row-height-normal);
}

.jti-root[data-density="roomy"] .jti-cell {
  min-height: var(--jti-row-height-roomy);
  padding: 8px 10px;
}