/* ========== БАЗОВЫЕ ПЕРЕМЕННЫЕ И СБРОС ========== */
:root {
--primary: #2563eb;
--primary-light: #3b82f6;
--primary-dark: #1d4ed8;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--info: #0ea5e9;
--success-light: #d1fae5;
--warning-light: #fef3c7;
--danger-light: #fee2e2;
--info-light: #f0f9ff;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--orange: #f97316;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: var(--gray-50);
color: var(--gray-800);
line-height: 1.6;
}

/* ========== КОНТЕЙНЕР (УМЕНЬШЕНЫ ОТСТУПЫ) ========== */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 10px;
}

/* Header */
header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid var(--gray-200);
}

header h1 {
color: var(--primary);
font-size: 28px;
margin-bottom: 10px;
}

header p {
color: var(--gray-600);
font-size: 16px;
}

/* Stages */
.stage {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
display: none;
}

.stage.active {
display: block;
}

/* ========== ЭТАПЫ (УМЕНЬШЕНЫ ОТСТУПЫ) ========== */
.stage-header {
padding: 15px 20px;
border-bottom: 1px solid var(--gray-200);
background: var(--gray-50);
border-radius: 12px 12px 0 0;
}

.stage-header h2 {
color: var(--gray-800);
font-size: 20px;
display: flex;
align-items: center;
gap: 10px;
}

.stage-content {
padding: 15px;
}

.stage-footer {
padding: 15px 20px;
border-top: 1px solid var(--gray-200);
display: flex;
gap: 10px;
background: var(--gray-50);
border-radius: 0 0 12px 12px;
}

/* Form Elements */
.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--gray-700);
display: flex;
align-items: center;
gap: 8px;
}

.form-control {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--gray-200);
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}

.form-control:focus {
outline: none;
border-color: var(--primary);
}

.form-help {
margin-top: 6px;
font-size: 14px;
color: var(--gray-500);
}

/* Upload Area */
.upload-area {
border: 3px dashed var(--primary);
border-radius: 12px;
padding: 30px 20px;
text-align: center;
background: var(--gray-50);
cursor: pointer;
transition: all 0.3s;
max-width: 500px;
margin: 0 auto;
}

.upload-area:hover {
background: rgba(37, 99, 235, 0.05);
border-color: var(--primary-dark);
}

.upload-icon {
font-size: 36px;
color: var(--primary);
margin-bottom: 15px;
opacity: 0.8;
}

.upload-area h3 {
font-size: 18px;
margin-bottom: 8px;
color: var(--gray-800);
}

.upload-area p {
color: var(--gray-600);
margin-bottom: 5px;
font-size: 14px;
}

.upload-area .note {
font-size: 13px;
color: var(--gray-500);
margin-bottom: 15px;
}

.model-config-panel {
background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 18px;
margin-bottom: 20px;
}

.model-config-header {
margin-bottom: 16px;
}

.model-config-header h3 {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
color: var(--gray-800);
margin-bottom: 4px;
}

.model-config-header p {
font-size: 14px;
color: var(--gray-600);
}

.model-config-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 12px;
}

.model-selector-card {
background: white;
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 14px;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.model-selector-card label {
display: block;
font-weight: 600;
font-size: 14px;
margin-bottom: 10px;
color: var(--gray-700);
}

.model-meta {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--gray-200);
}

.model-meta-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}

.model-pill {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: var(--gray-100);
color: var(--gray-700);
}

.model-pill.open {
background: var(--success-light);
color: #047857;
}

.model-pill.closed {
background: var(--danger-light);
color: #b91c1c;
}

.model-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.model-meta-item {
background: var(--gray-50);
border-radius: 10px;
padding: 10px;
}

.model-meta-label {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--gray-500);
margin-bottom: 4px;
}

.model-meta-empty {
font-size: 13px;
color: var(--gray-500);
}

/* Buttons */
.btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
}

.btn-primary {
background: var(--primary);
color: white;
}

.btn-primary:hover {
background: var(--primary-dark);
}

.btn-secondary {
background: var(--gray-200);
color: var(--gray-700);
}

.btn-secondary:hover {
background: var(--gray-300);
}

.btn-success {
background: var(--success);
color: white;
}

.btn-success:hover {
background: #0da271;
}

.btn-sm {
padding: 8px 16px;
font-size: 14px;
}

.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

@media (max-width: 768px) {
.model-meta-grid {
grid-template-columns: 1fr;
}
}

/* Progress */
.progress-container {
margin: 20px 0;
}

.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.progress-message {
font-weight: 500;
color: var(--gray-700);
}

.progress-percent {
font-weight: bold;
color: var(--primary);
}

.progress-bar {
height: 10px;
background: var(--gray-200);
border-radius: 5px;
overflow: hidden;
}

.progress-fill {
height: 100%;
background: var(--primary);
width: 0%;
transition: width 0.3s;
border-radius: 5px;
}

/* Task Info */
.task-info {
background: var(--gray-50);
border-radius: 8px;
padding: 15px;
margin-top: 20px;
border-left: 4px solid var(--primary);
}

.task-id, .task-status {
margin-bottom: 8px;
font-size: 14px;
}

/* Footer */
footer {
text-align: center;
padding: 20px;
color: var(--gray-600);
border-top: 1px solid var(--gray-200);
margin-top: 40px;
}

/* Notification */
.notification {
position: fixed;
top: 20px;
right: 20px;
background: var(--success);
color: white;
padding: 12px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1001;
display: flex;
align-items: center;
gap: 10px;
animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}

/* Spinner */
.fa-spinner.fa-spin {
animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* ========== КАРТОЧКИ СВОДКИ (УМЕНЬШЕНЫ ШРИФТЫ) ========== */
.summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
margin-bottom: 30px;
}

.summary-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-top: 4px solid var(--primary);
transition: transform 0.2s;
}

.summary-card.archive-card .summary-value {
font-size: 14px;
word-break: break-word;
}

.summary-card:hover {
transform: translateY(-3px);
}

.summary-icon {
font-size: 24px;
color: var(--primary);
margin-bottom: 12px;
}

.summary-value {
font-size: 22px;
font-weight: 700;
color: var(--gray-800);
line-height: 1.2;
margin-bottom: 5px;
}

.summary-label {
font-size: 13px;
color: var(--gray-600);
font-weight: 500;
}

.summary-card.matched {
border-top-color: var(--success);
}

.summary-card.matched .summary-icon {
color: var(--success);
}

.summary-card.unmatched {
border-top-color: var(--danger);
}

.summary-card.unmatched .summary-icon {
color: var(--danger);
}

/* ========== ТАБЛИЦЫ (УМЕНЬШЕНЫ ШРИФТЫ И ОТСТУПЫ) ========== */
.table-header {
margin-bottom: 15px;
}

.table-header h3 {
font-size: 18px;
color: var(--gray-800);
}

.table-responsive {
overflow-x: auto;
border-radius: 12px;
border: 1px solid var(--gray-200);
}

.positions-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--gray-200);
font-size: 13px;
}

.positions-table th {
background: var(--gray-100);
padding: 10px 8px;
text-align: center;
font-weight: 600;
color: var(--gray-700);
border: 1px solid var(--gray-200);
font-size: 13px;
}

/* Центрируем все ячейки */
.positions-table td {
padding: 10px 8px;
border: 1px solid var(--gray-200);
vertical-align: middle;
font-size: 13px;
word-break: break-word;
white-space: normal;
text-align: center; /* <-- добавлено центрирование */
}

/* Фикс колонки "№ пп" (первая колонка) */
.positions-table th:nth-child(1),
.positions-table td:nth-child(1) {
text-align: center;
width: 50px;
max-width: 60px;
min-width: 40px;
padding: 10px 4px;
}

/* Уменьшаем ширину колонки "Товар" (2-я колонка) */
.positions-table td:nth-child(2) {
max-width: 300px;
width: 20%;
min-width: 150px;
}

/* Расширяем колонку "Поставщик" (3-я колонка) */
.positions-table td:nth-child(3) {
min-width: 200px;
width: auto;
}

.positions-table th.total-col,
.positions-table th.found-col,
.positions-table th.missing-col,
.positions-table td.total-cell,
.positions-table td.found-cell,
.positions-table td.missing-cell {
text-align: center !important;
}

.positions-table td:nth-child(7) {
white-space: nowrap;
width: 140px;
}

.positions-table td.chevron-cell,
.positions-table th:nth-child(8) {
width: 40px;
max-width: 40px;
min-width: 40px;
padding: 10px 4px;
text-align: center;
}

.positions-table td.chevron-cell .chevron-icon {
font-size: 14px;
color: var(--gray-400);
}

.positions-table td.chevron-cell:hover .chevron-icon {
color: var(--primary);
}

.positions-table tbody tr {
cursor: default;
}

.positions-table tbody tr:hover {
background: var(--gray-50);
}

.positions-table td.supplier-cell,
.positions-table td.chevron-cell {
cursor: pointer;
}

.chevron-cell .chevron-icon {
transition: transform 0.2s;
}

.chevron-cell:hover .chevron-icon {
transform: translateX(4px);
}

.positions-table td[rowspan] {
vertical-align: top;
background-color: white;
font-weight: 600;
text-align: center; /* <-- добавлено центрирование для ячеек с объединением строк */
}

.supplier-name {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
color: var(--gray-800);
justify-content: center; /* <-- добавлено центрирование flex-контейнера */
}

.supplier-name i {
color: var(--gray-500);
font-size: 16px;
}

.position-name {
font-weight: 600;
color: var(--gray-800);
font-size: 13px;
line-height: 1.3;
max-width: 500px;
display: block; /* для центрирования текста */
}

.mandatory-badge {
display: inline-block;
background: var(--gray-100);
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
}

.missing-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: var(--danger);
color: white;
border-radius: 50%;
font-size: 12px;
font-weight: bold;
}

.missing-dash {
color: var(--gray-400);
font-size: 18px;
line-height: 1;
}

.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
line-height: 1.2;
min-width: 100px;
justify-content: center;
}

.status-badge i {
font-size: 14px;
}

.status-complete {
background: var(--success-light);
color: #065f46;
}

.status-incomplete {
background: var(--warning-light);
color: #92400e;
}

.status-partial {
background: #fef9c3;
color: #854d0e;
}

.status-partial i {
color: #854d0e;
}

.chevron-icon {
color: var(--gray-400);
font-size: 18px;
transition: transform 0.2s;
}

tr:hover .chevron-icon {
color: var(--primary);
transform: translateX(4px);
}

/* ========== ТАБЛИЦА НЕСОПОСТАВЛЕННЫХ ДОКУМЕНТОВ ========== */
#unmatchedTable {
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--gray-200);
}

#unmatchedTable th,
#unmatchedTable td {
border: 1px solid var(--gray-200);
}

#unmatchedTable th:nth-child(1),
#unmatchedTable td:nth-child(1) {
text-align: center;
width: 10%;
padding: 10px 4px;
}

#unmatchedTable td:nth-child(2) {
width: 25%;
max-width: 300px;
}

#unmatchedTable td:nth-child(3) {
width: auto;
min-width: 50%;
text-align: left;
}

/* ========== DRAWER ========== */
.drawer-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 999;
display: none;
}

.drawer {
position: fixed;
top: 0;
right: -950px;
width: 950px;
max-width: 90%;
height: 100vh;
background: white;
box-shadow: -2px 0 12px rgba(0,0,0,0.15);
z-index: 1000;
transition: right 0.3s ease-out;
display: flex;
flex-direction: column;
overflow: hidden;
}

.drawer.active {
right: 0;
}

.drawer-overlay.active {
display: block;
}

.drawer-header {
padding: 20px 25px;
border-bottom: 1px solid var(--gray-200);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
position: relative;
}

.drawer-supplier {
font-size: 16px;
color: var(--gray-600);
font-weight: 500;
width: 100%;
padding-right: 40px;
}

.drawer-header h3 {
margin: 0;
font-size: 1rem;
font-weight: 400;
color: var(--gray-800);
width: 100%;
padding-right: 40px;
}

.drawer-close {
position: absolute;
top: 20px;
right: 25px;
background: none;
border: none;
font-size: 28px;
color: var(--gray-500);
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.drawer-close:hover {
background: var(--gray-200);
color: var(--gray-700);
}

.drawer-content {
padding: 25px;
overflow-y: auto;
flex: 1;
}

.drawer-status-badge {
margin-bottom: 20px;
}

.drawer-section {
margin-bottom: 30px;
}

.drawer-section h4 {
display: flex;
align-items: center;
gap: 10px;
color: var(--gray-700);
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 15px;
border-bottom: none;
padding-bottom: 10px;
}

.error-section {
background: #fee2e2;
border-radius: 8px;
padding: 15px;
border-left: 4px solid var(--danger);
}

.error-section h4 {
border-bottom: none;
color: #991b1b;
margin-bottom: 10px;
}

.drawer-docs-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}

.drawer-docs-table th {
text-align: left;
padding: 10px;
background: var(--gray-100);
color: var(--gray-700);
font-weight: 600;
}

.drawer-docs-table td {
padding: 12px 10px;
border-bottom: 1px solid var(--gray-200);
vertical-align: middle;
}

.drawer-title-container {
display: flex;
align-items: flex-start;
gap: 8px;
width: 100%;
padding-right: 40px;
}

.drawer-title {
flex: 1;
font-size: 1rem;
font-weight: 400;
color: var(--gray-800);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}

.drawer-title.expanded {
line-clamp: unset;
-webkit-line-clamp: unset;
}

.drawer-title-toggle {
background: none;
border: none;
color: var(--gray-500);
cursor: pointer;
padding: 4px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
margin-top: -2px;
}

.drawer-title-toggle:hover {
background: var(--gray-200);
color: var(--gray-700);
}

.drawer-title-toggle i {
font-size: 14px;
}

.status-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.status-icon.found {
color: var(--success);
font-size: 18px;
}

.status-icon.missing {
color: var(--gray-400);
font-size: 18px;
}

.filename-cell {
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
word-break: break-word;
white-space: normal;
max-width: 400px;
}

.filename-cell i {
color: var(--gray-500);
}

.missing-filename {
color: var(--gray-500);
font-style: italic;
}

.additional-item, .unmatched-item {
display: flex;
align-items: baseline;
gap: 12px;
padding: 12px;
background: var(--gray-50);
border-radius: 8px;
margin-bottom: 8px;
}

.additional-item i, .unmatched-item i {
color: var(--gray-500);
}

.additional-info, .unmatched-info {
flex: 1;
}

.additional-info strong, .unmatched-info strong {
display: block;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 4px;
}

.additional-info small, .unmatched-info small {
display: block;
color: var(--gray-600);
font-size: 12px;
margin-bottom: 2px;
}

.file-description {
color: var(--gray-500);
font-size: 12px;
}

.missing-list {
padding-left: 25px;
margin: 10px 0 0 0;
}

.missing-list li {
margin-bottom: 6px;
}

/* ========== МОДАЛЬНЫЕ ОКНА ========== */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
padding: 20px;
}

.modal {
background: white;
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
max-width: 90%;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
animation: modalFadeIn 0.2s ease-out;
}

.modal-lg {
max-width: 1200px;
width: 95%;
}

@keyframes modalFadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}

.modal-header {
padding: 20px 25px;
border-bottom: 1px solid var(--gray-200);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--gray-50);
}

.modal-header h3 {
font-size: 1.2rem;
font-weight: 600;
color: var(--gray-800);
margin: 0;
padding-right: 20px;
word-break: break-word;
}

.modal-close {
background: none;
border: none;
font-size: 28px;
color: var(--gray-500);
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.2s;
}

.modal-close:hover {
background: var(--gray-200);
color: var(--gray-700);
}

.modal-content {
padding: 25px;
overflow-y: auto;
}

.product-title {
font-size: 14px;
color: var(--gray-600);
margin-bottom: 20px;
background: var(--gray-50);
padding: 10px 15px;
border-radius: 8px;
border-left: 4px solid var(--primary);
line-height: 1.5;
}

.comparison-table, .detail-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}

.comparison-table th,
.comparison-table td {
min-width: 150px;
word-break: break-word;
white-space: normal;
vertical-align: top;
}

.comparison-table td {
text-align: justify;
}

.comparison-table th, .detail-table th {
background: var(--gray-100);
padding: 12px;
text-align: center;
font-weight: 600;
color: var(--gray-700);
border-bottom: 2px solid var(--gray-200);
}

.comparison-table td, .detail-table td {
padding: 12px;
border-bottom: 1px solid var(--gray-200);
vertical-align: top;
}

.comparison-table td.match-yes {
background: var(--success-light);
}

.comparison-table td.match-no {
background: var(--danger-light);
}

.detail-table td:first-child {
font-weight: 600;
color: var(--gray-800);
}

.detail-table td:nth-child(2) {
color: var(--primary);
font-weight: 500;
}

.detail-table td:nth-child(3) {
font-family: monospace;
}

.detail-table td:nth-child(4) {
font-weight: 500;
}

.detail-table td:nth-child(5), .detail-table td:nth-child(6) {
color: var(--gray-600);
font-size: 12px;
max-width: 200px;
white-space: pre-wrap;
}

.mismatch-section {
margin-top: 30px;
background: var(--danger-light);
border-radius: 16px;
padding: 20px;
}

.mismatch-section h4 {
color: var(--danger);
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}

.table-header-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}

/* ========== ЭКРАН ИЗВЛЕЧЕНИЯ АТРИБУТОВ ========== */
.extraction-item {
background: white;
border-radius: 12px;
border: 1px solid var(--gray-200);
margin-bottom: 20px;
overflow: hidden;
}

.extraction-header {
padding: 16px 20px;
background: var(--gray-50);
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--gray-200);
font-weight: 600;
color: var(--gray-800);
}

.extraction-header i {
transition: transform 0.2s;
}

.extraction-header.expanded i {
transform: rotate(90deg);
}

.extraction-content {
padding: 20px;
}

.attributes-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}

.attributes-table th {
background: var(--gray-100);
padding: 10px;
text-align: left;
font-weight: 600;
color: var(--gray-700);
}

.attributes-table td {
padding: 12px 10px;
border-bottom: 1px solid var(--gray-200);
vertical-align: middle;
}

.attributes-table input[type="text"] {
width: 100%;
padding: 6px 10px;
border: 1px solid var(--gray-300);
border-radius: 6px;
font-size: 14px;
}

.attributes-table input[type="text"]:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}

.attributes-table .checkbox-col {
width: 30px;
text-align: center;
}

.actions-col {
white-space: nowrap;
}

.action-btn {
background: none;
border: none;
color: var(--gray-600);
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 4px;
}

.action-btn:hover {
background: var(--gray-100);
}

.action-btn.edit {
color: var(--primary);
}

.action-btn.delete {
color: var(--danger);
}

.action-btn.save {
color: var(--success);
}

.add-attr-btn {
margin-top: 15px;
padding: 8px 16px;
background: var(--gray-100);
border: 1px dashed var(--gray-400);
border-radius: 8px;
color: var(--gray-700);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
}

.add-attr-btn:hover {
background: var(--gray-200);
border-color: var(--primary);
}

/* ========== АДАПТИВНОСТЬ ========== */
@media (max-width: 768px) {
.container { padding: 15px; }
.stage-content, .stage-header, .stage-footer { padding: 20px; }
.summary-cards { grid-template-columns: repeat(2, 1fr); gap: 15px; }
.btn { width: 100%; justify-content: center; }
.upload-area { max-width: 100%; padding: 20px 15px; }
.drawer { width: 100%; max-width: 100%; }
.modal-lg { width: 100%; }

.positions-table td:nth-child(2) {
max-width: 200px;
}

.positions-table td:nth-child(3) {
min-width: 150px;
}
}

@media (max-width: 480px) {
.summary-cards { grid-template-columns: 1fr; }
header h1 { font-size: 24px; }
.stage-header h2 { font-size: 18px; }
.summary-value { font-size: 28px; }
}

/* ========== ИСПРАВЛЕНИЯ ДЛЯ БОЛЬШИХ ЭКРАНОВ ========== */
@media (min-width: 1400px) {
.positions-table td:nth-child(2) {
max-width: 350px;
width: 15%;
}

.positions-table td:nth-child(3) {
min-width: 250px;
}

.modal-lg .comparison-table th:nth-child(1),
.modal-lg .comparison-table td:nth-child(1) {
width: 18%;
}

.modal-lg .comparison-table th:nth-child(2),
.modal-lg .comparison-table td:nth-child(2) {
width: 22%;
}
}