/* Стили Diff View и статусов. Обычный CSS (не классы Tailwind), чтобы подсветка
   не зависела от того, как Tailwind CDN обрабатывает классы, добавленные из JS. */

:root {
  --changed: #fef3c7;      /* жёлтый: значение изменилось */
  --added: #dcfce7;        /* зелёный: значение появилось */
  --removed: #fee2e2;      /* красный: значение исчезло */
  --unexpected: #fecaca;   /* насыщенный красный: изменён постоянный реквизит */
}

.diff-section { background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1rem; margin-bottom: 1rem; }
.diff-section-head { margin-bottom: .75rem; }
.diff-section-title { font-weight: 600; font-size: 1.05rem; }
.diff-section-subtitle { color: #64748b; font-size: .85rem; }
.diff-table-wrap { overflow-x: auto; }
.diff-table { width: 100%; border-collapse: collapse; font-size: .9rem; table-layout: fixed; min-width: 720px; }
.diff-table th { text-align: left; font-weight: 500; color: #475569; background: #f8fafc; padding: .5rem; border-bottom: 1px solid #e2e8f0; }
.diff-table td { padding: .4rem .5rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; word-break: break-word; }
.diff-col-label { width: 22%; }
.diff-col-old, .diff-col-new { width: 39%; }
.diff-label { color: #475569; }
.diff-old { color: #334155; }

.diff-row.diff-changed .diff-new { background: var(--changed); }
.diff-row.diff-changed .diff-old { background: #fffbeb; }
.diff-row.diff-added .diff-new { background: var(--added); }
.diff-row.diff-removed .diff-new { background: var(--removed); }
.diff-row.diff-removed .diff-old { text-decoration: line-through; color: #b91c1c; }
.diff-row.diff-unexpected .diff-new,
.diff-row.diff-unexpected .diff-old { background: var(--unexpected); }
.diff-row.diff-has-error .diff-label { box-shadow: inset 3px 0 0 #dc2626; }

.only-changes .diff-row.diff-same { display: none; }
.diff-all-same { display: none; }
.diff-all-same td { color: #166534; background: #f0fdf4; }
/* В режиме «только изменения» секция без изменений показывает пояснение вместо пустой таблицы */
.only-changes tbody:not(:has(.diff-row:not(.diff-same))) .diff-all-same { display: table-row; }

.diff-item-title td { background: #f1f5f9; padding-top: .6rem; border-top: 2px solid #cbd5e1; }
.diff-item-title.diff-item-new td { background: #ecfdf5; }
.diff-item-title.diff-item-removed td { background: #fef2f2; color: #991b1b; }
.diff-source { font-size: .8rem; color: #64748b; margin-top: .15rem; font-family: ui-monospace, monospace; }

.diff-input { width: 100%; border: 1px solid #cbd5e1; border-radius: .375rem; padding: .25rem .4rem; background: rgba(255, 255, 255, .85); font: inherit; }
textarea.diff-input { min-height: 3.2rem; resize: vertical; }
.diff-input:focus { outline: 2px solid #3b82f6; outline-offset: -1px; }
.diff-input.diff-invalid { border-color: #dc2626; outline-color: #dc2626; background: #fff1f2; }
.diff-delta { display: inline-block; margin-top: .15rem; font-size: .8rem; color: #92400e; font-variant-numeric: tabular-nums; }
.diff-delta:empty { display: none; }
.diff-basis { display: inline-block; margin-left: .4rem; margin-top: .15rem; font-size: .75rem; padding: 0 .4rem; border-radius: 9999px; background: #e2e8f0; color: #334155; }
.diff-basis-reference_match { background: #dbeafe; color: #1e40af; }
.diff-basis-not_found { background: #fee2e2; color: #991b1b; }
.diff-basis-manual { background: #ede9fe; color: #5b21b6; }

.diff-issue { font-size: .8rem; margin-top: .25rem; padding: .2rem .45rem; border-radius: .25rem; }
.diff-issue-error { background: #fee2e2; color: #991b1b; }
.diff-issue-warning { background: #fef3c7; color: #92400e; }
.diff-issue-info { background: #e0f2fe; color: #075985; }

.diff-chip { font-size: .8rem; padding: .2rem .6rem; border-radius: 9999px; border: 1px solid transparent; }
.diff-chip-ok { background: #dcfce7; color: #166534; }
.diff-chip-bad { background: #fee2e2; color: #991b1b; }
.diff-chip-warn { background: #fef3c7; color: #92400e; }
.diff-chip-info { background: #f1f5f9; color: #334155; }

.diff-legend { font-size: .75rem; padding: .1rem .5rem; border-radius: .25rem; }
.diff-legend.diff-changed { background: var(--changed); }
.diff-legend.diff-added { background: var(--added); }
.diff-legend.diff-removed { background: var(--removed); }
.diff-legend.diff-unexpected { background: var(--unexpected); }

.status-badge { font-size: .75rem; padding: .15rem .6rem; border-radius: 9999px; background: #e2e8f0; color: #334155; }
.status-processing { background: #dbeafe; color: #1e40af; }
.status-review { background: #fef3c7; color: #92400e; }
.status-approved, .status-exported { background: #dcfce7; color: #166534; }
.status-failed { background: #fee2e2; color: #991b1b; }

.spinner { width: 2.5rem; height: 2.5rem; border: 3px solid #cbd5e1; border-top-color: #2563eb; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }