/* DOM Validator Styles */

.dom-inspector-content {
  padding: 20px;
  overflow: auto;
  height: 100%;
}

.dom-inspector-placeholder {
  text-align: center;
  padding: 40px;
  color: var(--color-text-secondary);
}

/* Tree Node */
.dom-tree-node {
  font-family: var(--font-family-mono);
  font-size: 14px;
  line-height: 1.3;
}

.dom-tree-node__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background-color 0.15s ease;
}

.dom-tree-node__header--clickable {
  cursor: pointer;
}

.dom-tree-node__header--clickable:hover {
  background-color: var(--color-hover, rgba(0, 0, 0, 0.05));
}

.dom-tree-node__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

.dom-tree-node__icon--empty {
  opacity: 0;
}

.dom-tree-node__tag {
  color: var(--color-primary, #0066cc);
  font-weight: 600;
}

.dom-tree-node__tag--table {
  color: #a24c07;
  background: rgba(255, 61, 0, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
}

.dom-tree-node__tag--panel-left {
  color: #1976d2;
  background: rgba(25, 118, 210, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
}

.dom-tree-node__tag--right-panel {
  color: #7b1fa2;
  background: rgba(123, 31, 162, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
}

.dom-tree-node__tag--page {
  color: #388e3c;
  background: rgba(56, 142, 60, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
}

.dom-tree-node__depth {
  color: var(--color-text-tertiary, #999);
  font-size: 11px;
  font-weight: 500;
  margin-left: 4px;
}

.dom-tree-node__id {
  color: var(--color-accent, #d32f2f);
  font-weight: 600;
  margin-left: 8px;
  font-size: 12px;
}

.dom-tree-node__classes {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.dom-tree-node__class {
  background: var(--color-bg-secondary, #f0f0f0);
  color: var(--color-text-secondary, #666);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
}

.dom-tree-node__class--special {
  background: rgba(255, 193, 7, 0.25);
  color: #f57c00;
  font-weight: 700;
  border: 1px solid rgba(255, 193, 7, 0.5);
}

.dom-tree-node__data-attrs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: 8px;
}

.dom-tree-node__data-attr {
  background: rgb(240, 199, 250);
  color: #8e24aa;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(156, 39, 176, 0.3);
}

.dom-tree-node__data-attr--hidden {
  background-color: var(--color-bg-secondary, #e0e0e0);
  color: var(--color-text-tertiary, #999);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--color-border, #ccc);
}

.dom-tree-node__button-text {
  margin-left: 8px;
  color: #2e7d32;
  font-style: italic;
  font-size: 13px;
  font-weight: 600;
}

.dom-tree-node__children {
  margin-left: 20px;
  border-left: 1px solid var(--color-border, #e0e0e0);
  padding-left: 8px;
}

/* ============================================
   Validation Report
   ============================================ */

.dom-inspector-report {
  padding: 16px;
}

.dom-inspector-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
}

.dom-inspector-summary--ok {
  background: rgba(56, 142, 60, 0.1);
  border-color: rgba(56, 142, 60, 0.3);
}

.dom-inspector-summary--warning {
  background: rgba(255, 152, 0, 0.1);
  border-color: rgba(255, 152, 0, 0.3);
}

.dom-inspector-summary--error {
  background: rgba(211, 47, 47, 0.1);
  border-color: rgba(211, 47, 47, 0.3);
}

.dom-inspector-summary__stat {
  color: var(--color-text-secondary, #555);
}

.dom-inspector-summary__stat--ok { color: #388e3c; }
.dom-inspector-summary__stat--error { color: #d32f2f; }
.dom-inspector-summary__stat--warning { color: #f57c00; }
.dom-inspector-summary__stat--legacy { color: #795548; }

/* Badge chips (shown in tab label) */
.dom-inspector-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  line-height: 1;
}

.dom-inspector-badge--error {
  background: #d32f2f;
  color: #fff;
}

.dom-inspector-badge--warning {
  background: #f57c00;
  color: #fff;
}

.dom-inspector-badge--ok {
  background: #388e3c;
  color: #fff;
}

.dom-inspector-badge--info {
  background: #0288d1;
  color: #fff;
}

/* Validation table */
/* Скин наследуется от .table__data (components.css). Своё — моноширинный
   шрифт во всей таблице и выравнивание ячеек по верху: сообщения многострочные. */
.dom-inspector-table {
  margin: 0;
  font-family: var(--font-family-mono);
}

.dom-inspector-table tbody td {
  vertical-align: top;
}

.dom-inspector-row--error td:first-child {
  border-left: 3px solid #d32f2f;
}

.dom-inspector-row--warning td:first-child {
  border-left: 3px solid #f57c00;
}

.dom-inspector-row--info td:first-child {
  border-left: 3px solid #0288d1;
}

.dom-inspector-tab-key {
  color: #8e24aa;
  font-weight: 600;
  white-space: nowrap;
}