/* ============================================
   CONDITION BUILDER - Composant réutilisable
   ============================================ */

.cb-container {
  background: rgba(20, 12, 7, 0.45);
  border: 1px solid rgba(58, 42, 30, 0.35);
  border-radius: 6px;
  padding: 8px 10px;
}

/* --- Rows --- */
.cb-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(38, 26, 18, 0.6);
  border: 1px solid rgba(58, 42, 30, 0.25);
  border-radius: 5px;
  transition: border-color 0.15s;
}

.cb-row:hover {
  border-color: rgba(122, 74, 42, 0.4);
}

/* --- Logic badge (Si / ET / OU) --- */
.cb-logic-badge {
  width: 36px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  user-select: none;
}

.cb-logic {
  width: 52px !important;
  flex-shrink: 0;
  font-size: 0.75rem !important;
  font-weight: 700;
  padding: 3px 4px !important;
  background: transparent !important;
  border: 1px solid rgba(154, 138, 78, 0.35) !important;
  color: #e0a851 !important;
  border-radius: 4px !important;
  text-align: center;
  cursor: pointer;
  appearance: auto;
}

.cb-logic:focus {
  border-color: rgba(154, 138, 78, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(154, 138, 78, 0.1) !important;
}

/* --- Condition select --- */
.cb-code {
  flex: 2;
  min-width: 0;
  font-size: 0.78rem !important;
  padding: 3px 6px !important;
  background: var(--bg-input) !important;
  border: 1px solid rgba(58, 42, 30, 0.4) !important;
  color: var(--text-main) !important;
  border-radius: 4px !important;
}

.cb-code:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(200, 119, 67, 0.15) !important;
}

/* --- Operator select --- */
.cb-op {
  width: 74px !important;
  flex-shrink: 0;
  font-size: 0.75rem !important;
  padding: 3px 4px !important;
  background: var(--bg-input) !important;
  border: 1px solid rgba(58, 42, 30, 0.4) !important;
  color: #e6c0a0 !important;
  border-radius: 4px !important;
  text-align: center;
}

.cb-op:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(200, 119, 67, 0.15) !important;
}

/* --- Value input --- */
.cb-val {
  width: 80px !important;
  flex-shrink: 0;
  font-size: 0.78rem !important;
  padding: 3px 6px !important;
  background: var(--bg-input) !important;
  border: 1px solid rgba(58, 42, 30, 0.4) !important;
  color: #a5f3fc !important;
  border-radius: 4px !important;
  font-family: "Consolas", "Monaco", monospace;
}

.cb-val:focus {
  border-color: #bfa15c !important;
  box-shadow: 0 0 0 2px rgba(154, 138, 78, 0.12) !important;
}

.cb-val::placeholder {
  color: rgba(162, 143, 127, 0.4) !important;
  font-family: inherit;
}

/* --- No-value placeholder --- */
.cb-novalue {
  font-size: 0.72rem;
  color: rgba(162, 143, 127, 0.5);
  font-style: italic;
  padding: 0 4px;
  white-space: nowrap;
}

/* --- Remove button --- */
.cb-remove {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px !important;
  font-size: 0.65rem;
  color: var(--text-muted);
  border: none !important;
  background: transparent;
  transition: all 0.15s;
  cursor: pointer;
}

.cb-remove:hover {
  color: var(--danger);
  background: rgba(184, 70, 92, 0.12);
}

/* --- Empty state --- */
.cb-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 2px 0;
  font-style: italic;
}

/* --- Add button --- */
.cb-add {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  color: var(--text-muted);
  border-color: rgba(58, 42, 30, 0.4);
  transition: all 0.15s;
}

.cb-add:hover {
  color: var(--text-main);
  border-color: rgba(122, 74, 42, 0.5);
  background: rgba(122, 74, 42, 0.08);
}

.cb-add i {
  font-size: 0.8rem;
}

/* ============================================
   PREVIEW (readable + raw)
   ============================================ */
.cb-preview {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(58, 42, 30, 0.25);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cb-preview-readable {
  font-size: 0.76rem;
  color: #e0a3ae;
  line-height: 1.35;
}

.cb-preview-raw {
  font-size: 0.72rem;
  font-family: "Consolas", "Monaco", monospace;
  color: #67e8f9;
  background: rgba(20, 12, 7, 0.5);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(154, 138, 78, 0.15);
  display: inline-block;
  word-break: break-all;
}

/* compact preview */
.cb-compact .cb-preview {
  margin-top: 5px;
  padding-top: 5px;
}

.cb-compact .cb-preview-readable {
  font-size: 0.7rem;
}

.cb-compact .cb-preview-raw {
  font-size: 0.67rem;
  padding: 1px 5px;
}

/* ============================================
   COMPACT VARIANT (drops, npc actions/quests)
   ============================================ */
.cb-compact .cb-container {
  padding: 6px 8px;
}

.cb-compact .cb-rows {
  gap: 4px;
}

.cb-compact .cb-row {
  padding: 3px 6px;
  gap: 4px;
}

.cb-compact .cb-logic-badge {
  width: 28px;
  font-size: 0.65rem;
}

.cb-compact .cb-logic {
  width: 44px !important;
  font-size: 0.7rem !important;
  padding: 2px 2px !important;
}

.cb-compact .cb-code {
  font-size: 0.73rem !important;
  padding: 2px 4px !important;
}

.cb-compact .cb-op {
  width: 64px !important;
  font-size: 0.7rem !important;
  padding: 2px 2px !important;
}

.cb-compact .cb-val {
  width: 70px !important;
  font-size: 0.73rem !important;
  padding: 2px 4px !important;
}

.cb-compact .cb-remove {
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
}

.cb-compact .cb-add {
  margin-top: 4px;
  font-size: 0.68rem;
  padding: 2px 8px;
}

.cb-compact .cb-empty {
  font-size: 0.73rem;
}