@import '../../styles/admin-list-pages.css';

.form-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.95fr 0.85fr 1fr 1fr;
  gap: var(--space-3);
}

.sku-input-wrap { display: grid; min-width: 0; }

.native-input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: rgba(255, 255, 255, 0.74);
  color: var(--text-primary);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.native-input:focus {
  border-color: rgba(37, 89, 167, 0.38);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(37, 89, 167, 0.08);
}

.single-row,
.action-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: 14px;
}
.single-row :deep(.el-input) { min-width: 0; }

.helper-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: 14px;
}

.helper-item {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-md);
  background: rgba(248, 250, 252, 0.72);
}

.helper-title { color: #2559a7; font-size: var(--text-xs); font-weight: 700; }
.helper-copy { min-width: 0; color: #334155; line-height: 1.6; word-break: break-word; }

.sku-helper-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
}
.helper-text { color: var(--text-secondary); font-size: var(--text-xs); margin: 0; }

.sku-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-3);
}

.sku-chip {
  display: inline-grid;
  gap: 4px;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(86, 108, 138, 0.16);
  background: rgba(248, 250, 252, 0.78);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.sku-chip:hover { transform: translateY(-1px); border-color: rgba(37, 89, 167, 0.26); box-shadow: 0 12px 24px rgba(37, 89, 167, 0.08); }
.sku-chip-title { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sku-chip-meta { min-width: 0; color: var(--text-secondary); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.stat-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius-md);
  background: rgba(248, 250, 252, 0.72);
}
.stat-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
.stat-value { font-size: 30px; line-height: 1; color: var(--text-primary); display: block; margin-top: var(--space-2); }
.stat-meta { color: var(--text-secondary); font-size: var(--text-xs); display: block; margin-top: var(--space-1); }

.pool-section { margin-bottom: 18px; }
.pool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.pool-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(248, 250, 252, 0.68);
}

.pool-topline { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.pool-title-block { display: grid; gap: 6px; min-width: 0; }
.pool-title { min-width: 0; margin: 0; color: var(--text-primary); font-size: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-subtitle { min-width: 0; color: var(--text-secondary); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-total {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: rgba(37, 89, 167, 0.08);
  border: 1px solid rgba(37, 89, 167, 0.12);
  color: #2559a7;
  font-size: var(--text-xs);
  font-weight: 700;
}
.pool-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pool-stat {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: rgba(37, 89, 167, 0.08);
  color: #1d4f91;
  font-size: var(--text-xs);
  font-weight: 700;
}
.pool-meta { display: grid; gap: 6px; min-width: 0; color: var(--text-secondary); font-size: var(--text-xs); word-break: break-word; }
.pool-suggestion { margin: 0; line-height: 1.6; color: var(--text-secondary); font-size: var(--text-sm); }
.pool-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.table-toolbar {
  margin-bottom: var(--space-2);
  padding-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.6;
  word-break: break-word;
}

.item-cell, .sku-cell, .info-cell {
  display: grid;
  gap: 6px;
}

.item-title, .sku-title, .link-title {
  color: var(--text-primary);
  font-weight: 700;
}

.item-value {
  display: inline-flex;
  max-width: 100%;
  width: fit-content;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  white-space: pre-wrap;
  word-break: break-all;
}

.info-subline, .sku-subline, .link-subline, .time-line, .status-copy {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.sku-raw { font-family: var(--font-mono); font-size: var(--text-xs); }

.status-stack, .action-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.action-stack { justify-content: center; }

.status-warning { color: #b54708; font-size: var(--text-xs); }

@media (max-width: 1200px) {
  .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .form-grid,
  .summary-grid,
  .pool-grid,
  .helper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .form-grid,
  .summary-grid,
  .pool-grid,
  .helper-grid { grid-template-columns: 1fr; }
  .single-row,
  .action-row,
  .sku-helper-bar { flex-direction: column; align-items: stretch; }
  .status-stack, .action-stack { justify-content: flex-start; }
}