/**
 * KPI SEO SYSTEM v2.4 — LOẠI KEY UI STYLES
 * Styles for Loại Key management table with auto-detection rules
 */

/* ═══════════════════════════════════════════════════════════════
   LOẠI KEY TABLE
   ═══════════════════════════════════════════════════════════════ */

.loai-key-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.loai-key-header {
  display: grid;
  grid-template-columns: 50px 1fr 150px 120px 1fr 120px;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.loai-key-row {
  display: grid;
  grid-template-columns: 50px 1fr 150px 120px 1fr 120px;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  align-items: center;
  transition: background 0.2s ease;
}

.loai-key-row:hover {
  background: #f8fafc;
}

.lk-col {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lk-col-order {
  justify-content: center;
}

.lk-col-label {
  flex: 1;
  min-width: 0;
}

.lk-col-difficulty,
.lk-col-multiplier {
  justify-content: center;
}

.lk-col-rules {
  flex: 1;
  min-width: 0;
}

.lk-col-actions {
  justify-content: flex-end;
  gap: 4px;
}

/* Order badge */
.lk-order-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #4f46e5;
  font-weight: 700;
  font-size: 0.75rem;
}

/* Color dot in loai badge */
.loai-badge .color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* KPI Multiplier badge */
.kpi-mult-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #78350f;
  font-weight: 600;
  font-size: 0.8rem;
  border: 1px solid #fde047;
}

/* Rules summary */
.rules-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  flex-wrap: wrap;
}

.rules-count {
  padding: 2px 8px;
  border-radius: 10px;
  background: #ede9fe;
  color: #6b21a8;
  font-weight: 600;
}

.rules-priority {
  padding: 2px 8px;
  border-radius: 10px;
  background: #e0f2fe;
  color: #075985;
  font-weight: 500;
}

.rules-empty {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   RULE BUILDER MODAL
   ═══════════════════════════════════════════════════════════════ */

.rule-block {
  padding: 16px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.rule-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.rule-label {
  font-weight: 600;
  color: var(--primary);
  font-size: 0.85rem;
  flex: 1;
}

.criteria-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.criterion-row {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1.5fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.crit-field,
.crit-operator,
.crit-value {
  font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .loai-key-header,
  .loai-key-row {
    grid-template-columns: 40px 1fr 130px 100px 1fr 100px;
    gap: 8px;
    font-size: 0.75rem;
  }

  .lk-order-badge {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
}

@media (max-width: 768px) {
  .loai-key-header {
    display: none;
  }

  .loai-key-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .lk-col {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .lk-col::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
  }

  .criterion-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BADGE NEW v2.4
   ═══════════════════════════════════════════════════════════════ */

.badge-new {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}