/* ext_admin_custom_fields.css — styles for the Custom Fields admin page
 * Dark theme matching the rest of the S2T CRM. All classes prefixed with `cf-`.
 */

/* ---------- Page shell ---------------------------------------------------- */
.cf-page {
  padding: 24px 32px 80px;
  /* Fill the content area. This used to be `max-width: 1200px; margin: 0 auto`,
     which centred a narrow column inside the (up to ~1380px) main area and left
     a large dead margin on both sides. The other admin/drop-in panels do not cap
     their width, so neither does this page — long tables and the fields list use
     the space. */
  width: 100%;
  box-sizing: border-box;
  color: var(--text);
}
.cf-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.cf-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}
.cf-sub {
  font-size: 12px;
  color: var(--text-3);
}
.cf-header-right {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cf-search {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  min-width: 260px;
  outline: none;
  transition: border-color 120ms ease;
}
.cf-search:focus {
  border-color: var(--accent, #d4ff3a);
}

/* ---------- Filter chips -------------------------------------------------- */
.cf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 20px;
}
.cf-filters-sep {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 6px;
}
.cf-chip {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cf-chip:hover {
  background: var(--bg-3);
  color: var(--text);
}
.cf-chip.active {
  background: var(--accent, #d4ff3a);
  color: var(--bg);
  border-color: var(--accent, #d4ff3a);
}
.cf-chip-count {
  background: rgba(0,0,0,0.18);
  color: inherit;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}
.cf-chip.active .cf-chip-count {
  background: rgba(0,0,0,0.25);
}

/* ---------- Buttons ------------------------------------------------------- */
.cf-btn {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms ease;
  font-family: inherit;
}
.cf-btn:hover {
  background: var(--bg-3);
  border-color: var(--line-2);
}
.cf-btn.primary {
  background: var(--accent, #d4ff3a);
  color: var(--bg);
  border-color: var(--accent, #d4ff3a);
}
.cf-btn.primary:hover {
  background: #c4ef2a;
  border-color: #c4ef2a;
}
.cf-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.cf-btn.ghost:hover {
  background: var(--bg-2);
  color: var(--text);
}
.cf-btn.danger {
  background: #2a1212;
  border-color: #5a1f1f;
  color: #ff7b72;
}
.cf-btn.danger:hover {
  background: #3a1818;
  color: #ff8c82;
}
.cf-btn.danger:disabled {
  background: #1a0a0a;
  border-color: #2e1212;
  color: #5a3030;
  cursor: not-allowed;
  opacity: 0.5;
}
.cf-btn.warn {
  background: #2a1f12;
  border-color: #5a471f;
  color: #ffb86b;
}
.cf-btn.warn:hover {
  background: #3a2a18;
  color: #ffc78c;
}
.cf-btn.small {
  padding: 4px 10px;
  font-size: 12px;
}
.cf-actions {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ---------- Table --------------------------------------------------------- */
.cf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.cf-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 12px 16px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
}
.cf-th-num, .cf-td-num { text-align: right; }
.cf-th-act, .cf-td-act { text-align: right; }
.cf-row {
  border-bottom: 1px solid var(--line);
  transition: background 100ms ease;
}
.cf-row:last-child { border-bottom: none; }
.cf-row:hover {
  background: var(--bg-3);
}
.cf-row-inactive {
  opacity: 0.55;
}
.cf-row td {
  padding: 14px 16px;
  vertical-align: top;
  font-size: 13px;
}
.cf-label {
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf-required {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(212, 255, 58, 0.12);
  color: var(--accent, #d4ff3a);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.cf-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.cf-type {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.cf-muted {
  color: var(--text-3);
  font-style: italic;
}
.cf-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cf-status.ok  { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.cf-status.off { background: rgba(154, 154, 168, 0.10); color: var(--text-3); }
.cf-options-preview {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cf-opt {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text-2);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
}
.cf-opt-more {
  font-size: 10px;
  color: var(--text-3);
  align-self: center;
}

/* ---------- Empty state --------------------------------------------------- */
.cf-empty {
  text-align: center;
  padding: 64px 24px;
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--text-2);
}
.cf-empty-icon {
  font-size: 48px;
  color: var(--line-2);
  margin-bottom: 12px;
  line-height: 1;
}
.cf-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.cf-empty-sub {
  font-size: 13px;
  color: var(--text-3);
  max-width: 460px;
  margin: 0 auto 20px;
  line-height: 1.5;
}
.cf-error {
  background: rgba(255, 93, 77, 0.08);
  border: 1px solid rgba(255, 93, 77, 0.3);
  color: #ff8c82;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ---------- Modal --------------------------------------------------------- */
.cf-modal-open { overflow: hidden; }
.cf-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: cf-fade-in 120ms ease;
}
@keyframes cf-fade-in { from { opacity: 0; } to { opacity: 1; } }
.cf-modal {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
  animation: cf-slide-in 160ms cubic-bezier(.2,.9,.3,1);
}
.cf-modal-narrow { max-width: 440px; }
@keyframes cf-slide-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.cf-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.cf-modal-head.danger {
  background: linear-gradient(180deg, #2a1212 0%, var(--bg-2) 100%);
  border-bottom-color: #5a1f1f;
}
.cf-modal-head.danger .cf-modal-title {
  color: #ff8c82;
}
.cf-danger-box {
  background: rgba(255, 123, 114, 0.06);
  border: 1px solid rgba(255, 123, 114, 0.25);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.cf-danger-box p { margin: 0 0 8px; }
.cf-danger-box p:last-child { margin: 0; }
.cf-danger-box ul {
  margin: 4px 0 0;
  padding-left: 20px;
}
.cf-danger-box li { margin: 2px 0; }
.cf-modal-title {
  font-size: 16px; font-weight: 600;
}
.cf-x {
  background: transparent; border: 0; color: var(--text-3);
  font-size: 24px; line-height: 1; padding: 0; width: 28px; height: 28px;
  border-radius: 4px; cursor: pointer;
  transition: all 100ms ease;
}
.cf-x:hover { background: var(--bg-3); color: var(--text); }

.cf-modal-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.cf-modal-body p {
  font-size: 13px; line-height: 1.5;
  color: var(--text-2); margin: 0 0 12px;
}
.cf-modal-body p code {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 3px;
  font-size: 11px;
  color: var(--text);
}
.cf-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg-3);
  border-radius: 0 0 10px 10px;
}

/* ---------- Form fields --------------------------------------------------- */
.cf-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.cf-field {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px;
}
.cf-field.cf-row {
  flex-direction: row; align-items: center; gap: 8px;
  align-self: end;
  padding-bottom: 8px;
}
.cf-lbl {
  font-size: 11px; font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cf-in {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 120ms ease;
}
.cf-in.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.cf-in:focus { border-color: var(--accent, #d4ff3a); }
.cf-hint {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
}

/* ---------- Options editor ----------------------------------------------- */
#cf-m-options-wrap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cf-options {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0;
}
.cf-opt-row {
  display: flex; gap: 6px; align-items: center;
}
.cf-opt-row .cf-in { flex: 1 1 auto; }
.cf-opt-row .cf-btn {
  flex: 0 0 32px;
  height: 32px; padding: 0;
  font-size: 16px; line-height: 1;
}

/* ---------- Per-lead value inputs (used in lead detail) ----------------- */
.cf-v-in {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  width: 100%;
  transition: border-color 120ms ease;
}
.cf-v-in:focus { border-color: var(--accent, #d4ff3a); }
.cf-v-bool {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 12px; color: var(--text-2);
}

/* ---------- Lead-detail Custom Fields tab ------------------------------- */
.cf-lf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  padding: 12px 4px;
}
.cf-lf-row {
  display: flex; flex-direction: column; gap: 4px;
}
.cf-lf-label {
  font-size: 11px; font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cf-lf-label .cf-required { color: #ff7b72; font-size: 11px; }
.cf-lf-input .cf-v-in {
  padding: 7px 11px;
  font-size: 13px;
}
.cf-lf-input .cf-v-bool {
  font-size: 13px;
  color: var(--text);
  padding: 7px 0;
}
@media (max-width: 900px) {
  .cf-lf-grid { grid-template-columns: 1fr; }
}