/* City Creek Queue Filter Manager — injected styles.
 * Visual language: identical to ccm-formula-fields.js / ccm-theme.css.
 * Tokens: slate-teal #3d4d49, orange accent #c47b3d, destructive #c0392b.
 * Dark mode uses html.dark (set by Twenty), same ramp as Formula Fields.
 * All layout, spacing, and color values are from tokens.json / design system.
 */

/* ------------------------------------------------------------------ */
/* Overlay + Manager shell                                            */
/* ------------------------------------------------------------------ */

.ccm-qf-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2147480001;
  pointer-events: none;
}
.ccm-qf-overlay[style*="block"] {
  pointer-events: auto;
}

.ccm-qf-manager {
  position: fixed;
  left: 220px;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--t-background-primary, #f8f8f8);
  border-left: 1px solid var(--t-border-color-medium, #d8dbdb);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  font-family: var(--t-font-family, "Inter", sans-serif);
  font-size: 13px;
  pointer-events: auto;
}
html.dark .ccm-qf-manager {
  background: #161f1d;
  border-color: #2c3c38;
}

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */

.ccm-qf-header {
  padding: 28px 32px 18px;
  border-bottom: 1px solid var(--t-border-color-light, #e0eeef);
  background: var(--t-background-secondary, #fff);
  flex-shrink: 0;
}
html.dark .ccm-qf-header {
  background: #1e2c29;
  border-color: #2c3c38;
}
.ccm-qf-header-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--t-font-color-primary, #1a1a1a);
  margin-bottom: 4px;
}
html.dark .ccm-qf-header-title { color: #f0f4f4; }
.ccm-qf-header-sub {
  font-size: 13px;
  color: var(--t-font-color-secondary, #5e7c8b);
  max-width: 640px;
  line-height: 1.5;
}
html.dark .ccm-qf-header-sub { color: #7a9baa; }

/* ------------------------------------------------------------------ */
/* Content                                                            */
/* ------------------------------------------------------------------ */

.ccm-qf-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  min-height: 0;
}

/* ------------------------------------------------------------------ */
/* List view                                                          */
/* ------------------------------------------------------------------ */

.ccm-qf-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.ccm-qf-list-body {}

/* ------------------------------------------------------------------ */
/* Tabs (Lead / Loan)                                                 */
/* ------------------------------------------------------------------ */

.ccm-qf-tabs {
  display: flex;
  gap: 4px;
  background: var(--t-background-tertiary, #f4f5f4);
  border-radius: 8px;
  padding: 3px;
}
html.dark .ccm-qf-tabs { background: #1e2926; }
.ccm-qf-tab {
  padding: 6px 18px;
  font: 600 12.5px var(--t-font-family, sans-serif);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--t-font-color-secondary, #5e7c8b);
  background: transparent;
  letter-spacing: 0.01em;
  transition: background 0.12s, color 0.12s;
}
.ccm-qf-tab:hover {
  color: #1c2523;
  background: var(--t-background-secondary, #fff);
}
html.dark .ccm-qf-tab:hover { color: #f0f4f4; background: #243330; }
.ccm-qf-tab--active {
  background: var(--t-background-secondary, #fff);
  color: #3d4d49;
  box-shadow: 0 1px 4px rgba(28,37,35,0.12);
}
html.dark .ccm-qf-tab--active { background: #243330; color: #9fbdb4; }

/* ------------------------------------------------------------------ */
/* Queue table                                                        */
/* ------------------------------------------------------------------ */

.ccm-qf-table-wrap {
  background: var(--t-background-secondary, #fff);
  border: 1px solid var(--t-border-color-light, #d8dbdb);
  border-radius: 10px;
  overflow: hidden;
}
html.dark .ccm-qf-table-wrap { background: #1e2c29; border-color: #2c3c38; }
.ccm-qf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ccm-qf-table thead { background: var(--t-background-tertiary, #f4f5f4); }
html.dark .ccm-qf-table thead { background: #243330; }
.ccm-qf-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--t-font-color-secondary, #5e7c8b);
  border-bottom: 1px solid var(--t-border-color-light, #e0eeef);
  white-space: nowrap;
}
html.dark .ccm-qf-table th { color: #7a9baa; border-color: #2c3c38; }
.ccm-qf-table td {
  padding: 11px 14px;
  vertical-align: middle;
  color: var(--t-font-color-primary, #1a1a1a);
  border-bottom: 1px solid var(--t-border-color-light, #eef1f0);
}
html.dark .ccm-qf-table td { color: #f0f4f4; border-color: #243330; }
.ccm-qf-table-row:last-child td { border-bottom: none; }
.ccm-qf-table-row:hover td { background: var(--t-background-tertiary, #f8f8f8); }
html.dark .ccm-qf-table-row:hover td { background: #243330; }

.ccm-qf-td-name { max-width: 280px; }
.ccm-qf-queue-name {
  font-weight: 600;
  color: #1c2523;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .ccm-qf-queue-name { color: #f0f4f4; }
.ccm-qf-queue-note {
  font-size: 11px;
  color: var(--t-font-color-secondary, #5e7c8b);
  margin-top: 2px;
  font-style: italic;
  line-height: 1.4;
}
html.dark .ccm-qf-queue-note { color: #7a9baa; }

.ccm-qf-td-summary {
  font-size: 12px;
  color: var(--t-font-color-secondary, #5e7c8b);
  max-width: 340px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .ccm-qf-td-summary { color: #7a9baa; }
.ccm-qf-td-actions { white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Badges                                                             */
/* ------------------------------------------------------------------ */

.ccm-qf-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ccm-qf-badge--native {
  background: #e8eeec;
  color: #2f3d39;
}
html.dark .ccm-qf-badge--native { background: #24312d; color: #9fbdb4; }

.ccm-qf-badge--advanced {
  background: #fef3e2;
  color: #8a5a00;
  border: 1px solid #f5d78a;
}
html.dark .ccm-qf-badge--advanced { background: #2c2010; color: #e8b86d; border-color: #5a3c00; }

.ccm-qf-badge--published {
  background: #e8eeec;
  color: #2f3d39;
}
html.dark .ccm-qf-badge--published { background: #1e2c29; color: #9fbdb4; }

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */

.ccm-qf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font: 600 12.5px var(--t-font-family, sans-serif);
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: background 0.1s, color 0.1s, opacity 0.1s;
  white-space: nowrap;
  line-height: 1;
}
.ccm-qf-btn:disabled { opacity: 0.55; cursor: default; }

.ccm-qf-btn--primary {
  background: #3d4d49;
  color: #fff;
}
.ccm-qf-btn--primary:hover:not(:disabled) { background: #35443f; }
html.dark .ccm-qf-btn--primary { background: #3d4d49; color: #f0f4f4; }
html.dark .ccm-qf-btn--primary:hover:not(:disabled) { background: #4a5e59; }

.ccm-qf-btn--outline {
  background: var(--t-background-secondary, #fff);
  color: #3d4d49;
  border: 1px solid var(--t-border-color-medium, #d8dbdb);
}
.ccm-qf-btn--outline:hover:not(:disabled) { background: var(--t-background-tertiary, #f4f5f4); }
html.dark .ccm-qf-btn--outline { background: #1e2926; color: #9fbdb4; border-color: #2c3c38; }
html.dark .ccm-qf-btn--outline:hover:not(:disabled) { background: #243330; }

.ccm-qf-btn--draft {
  background: var(--t-background-secondary, #fff);
  color: #5e7c8b;
  border: 1px solid #b9cac5;
}
.ccm-qf-btn--draft:hover:not(:disabled) { background: #f0f4f4; color: #3d4d49; }
html.dark .ccm-qf-btn--draft { background: #1e2926; color: #7a9baa; border-color: #2c3c38; }
html.dark .ccm-qf-btn--draft:hover:not(:disabled) { background: #243330; color: #9fbdb4; }

.ccm-qf-btn--preview {
  background: #e8eeec;
  color: #2f3d39;
  border: 1px solid #b9cac5;
}
.ccm-qf-btn--preview:hover:not(:disabled) { background: #dbe5e2; }
html.dark .ccm-qf-btn--preview { background: #1e2926; color: #9fbdb4; border-color: #2c3c38; }
html.dark .ccm-qf-btn--preview:hover:not(:disabled) { background: #243330; }

.ccm-qf-btn--add-cond {
  background: none;
  border: 1px dashed var(--t-border-color-medium, #b9cac5);
  color: #3d4d49;
  font: 600 12px var(--t-font-family, sans-serif);
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  margin-top: 8px;
  width: 100%;
  text-align: center;
  transition: background 0.1s, border-color 0.1s;
}
.ccm-qf-btn--add-cond:hover { background: var(--t-background-tertiary, #f4f5f4); border-color: #7f9a92; }
html.dark .ccm-qf-btn--add-cond { color: #9fbdb4; border-color: #2c3c38; }
html.dark .ccm-qf-btn--add-cond:hover { background: #1e2926; border-color: #4a5e59; }

.ccm-qf-action-btn {
  background: none;
  border: 1px solid var(--t-border-color-medium, #d8dbdb);
  color: #3d4d49;
  font: 600 11.5px var(--t-font-family, sans-serif);
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.ccm-qf-action-btn:hover { background: var(--t-background-tertiary, #f4f5f4); }
html.dark .ccm-qf-action-btn { color: #9fbdb4; border-color: #2c3c38; }
html.dark .ccm-qf-action-btn:hover { background: #243330; }

/* ------------------------------------------------------------------ */
/* Skeleton loading                                                   */
/* ------------------------------------------------------------------ */

.ccm-qf-skeleton-wrap {
  background: var(--t-background-secondary, #fff);
  border: 1px solid var(--t-border-color-light, #d8dbdb);
  border-radius: 10px;
  overflow: hidden;
  padding: 6px 0;
}
html.dark .ccm-qf-skeleton-wrap { background: #1e2c29; border-color: #2c3c38; }
.ccm-qf-skeleton-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--t-border-color-light, #eef1f0);
}
.ccm-qf-skeleton-row:last-child { border-bottom: none; }
.ccm-qf-skeleton-cell {
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, #eef1f0 25%, #e0e8e5 50%, #eef1f0 75%);
  background-size: 400% 100%;
  animation: ccm-qf-shimmer 1.4s infinite linear;
  flex-shrink: 0;
}
html.dark .ccm-qf-skeleton-cell {
  background: linear-gradient(90deg, #243330 25%, #2c3c38 50%, #243330 75%);
  background-size: 400% 100%;
}
@keyframes ccm-qf-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ------------------------------------------------------------------ */
/* Empty / Error states                                               */
/* ------------------------------------------------------------------ */

.ccm-qf-state-empty {
  text-align: center;
  padding: 64px 32px;
  background: var(--t-background-secondary, #fff);
  border: 1px solid var(--t-border-color-light, #d8dbdb);
  border-radius: 10px;
}
html.dark .ccm-qf-state-empty { background: #1e2c29; border-color: #2c3c38; }
.ccm-qf-state-empty-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--t-font-color-primary, #1a1a1a);
  margin-bottom: 8px;
}
html.dark .ccm-qf-state-empty-title { color: #f0f4f4; }
.ccm-qf-state-empty-sub {
  font-size: 13px;
  color: var(--t-font-color-secondary, #5e7c8b);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.55;
}
html.dark .ccm-qf-state-empty-sub { color: #7a9baa; }

.ccm-qf-state-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 32px;
  background: var(--t-background-secondary, #fff);
  border: 1px solid #f5c6c0;
  border-radius: 10px;
}
html.dark .ccm-qf-state-error { background: #1e2c29; border-color: #7f1d1d; }
.ccm-qf-state-error-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fdecea; color: #c0392b;
  font-weight: 900; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
html.dark .ccm-qf-state-error-icon { background: #7f1d1d; color: #fca5a5; }
.ccm-qf-state-error-msg {
  font-size: 13px;
  color: #c0392b;
  text-align: center;
  max-width: 480px;
  line-height: 1.5;
}
html.dark .ccm-qf-state-error-msg { color: #fca5a5; }

/* ------------------------------------------------------------------ */
/* Editor view                                                        */
/* ------------------------------------------------------------------ */

.ccm-qf-editor-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.ccm-qf-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: 600 13px var(--t-font-family, sans-serif);
  color: #3d4d49;
  padding: 4px 6px;
  border-radius: 5px;
}
.ccm-qf-back-btn:hover { background: var(--t-background-tertiary, #f4f5f4); }
html.dark .ccm-qf-back-btn { color: #9fbdb4; }
html.dark .ccm-qf-back-btn:hover { background: #243330; }
.ccm-qf-breadcrumb-sep { color: #b9cac5; font-size: 15px; }
.ccm-qf-editor-title { font-weight: 700; font-size: 15px; color: #1c2523; }
html.dark .ccm-qf-editor-title { color: #f0f4f4; }

/* Advanced queue notice */
.ccm-qf-advanced-notice {
  padding: 14px 18px;
  background: #fef8ec;
  border: 1px solid #f5d78a;
  border-radius: 8px;
  margin-bottom: 16px;
}
html.dark .ccm-qf-advanced-notice { background: #2c2010; border-color: #5a3c00; }
.ccm-qf-advanced-notice-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a5a00;
  margin-bottom: 4px;
}
html.dark .ccm-qf-advanced-notice-title { color: #e8b86d; }
.ccm-qf-advanced-notice-body {
  font-size: 12.5px;
  color: #6b4a00;
  line-height: 1.5;
}
html.dark .ccm-qf-advanced-notice-body { color: #c4a07a; }

/* Editor body */
.ccm-qf-editor-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ------------------------------------------------------------------ */
/* Section containers                                                 */
/* ------------------------------------------------------------------ */

.ccm-qf-section {
  background: var(--t-background-secondary, #fff);
  border: 1px solid var(--t-border-color-light, #e0eeef);
  border-radius: 10px;
  padding: 18px 22px;
}
html.dark .ccm-qf-section { background: #1e2c29; border-color: #2c3c38; }

.ccm-qf-section-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-font-color-secondary, #5e7c8b);
  margin-bottom: 12px;
}
html.dark .ccm-qf-section-title { color: #7a9baa; }

.ccm-qf-section-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ccm-qf-section-header-row .ccm-qf-section-title { margin-bottom: 0; }
.ccm-qf-section-hint {
  flex: 1;
  font-size: 11.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--t-font-color-secondary, #5e7c8b);
}
html.dark .ccm-qf-section-hint { color: #7a9baa; }

/* ------------------------------------------------------------------ */
/* Form fields                                                        */
/* ------------------------------------------------------------------ */

.ccm-qf-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.ccm-qf-form-field:last-child { margin-bottom: 0; }
.ccm-qf-form-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--t-font-color-secondary, #5e7c8b);
}
html.dark .ccm-qf-form-label { color: #7a9baa; }
.ccm-qf-form-hint {
  font-size: 11px;
  color: var(--t-font-color-secondary, #7a9baa);
  line-height: 1.45;
  margin-top: 2px;
}
html.dark .ccm-qf-form-hint { color: #7a9baa; }

/* Inputs */
.ccm-qf-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font: 13px var(--t-font-family, sans-serif);
  border: 1px solid var(--t-border-color-medium, #d8dbdb);
  border-radius: 7px;
  background: var(--t-background-primary, #f8f8f8);
  color: var(--t-font-color-primary, #1a1a1a);
  appearance: auto;
}
html.dark .ccm-qf-input { background: #161f1d; border-color: #2c3c38; color: #f0f4f4; }
.ccm-qf-input:focus { outline: 2px solid #7f9a92; outline-offset: -1px; }
.ccm-qf-input:disabled { opacity: 0.55; cursor: not-allowed; }

.ccm-qf-logic-select { max-width: 280px; }

/* Custom logic row */
.ccm-qf-custom-logic-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--t-background-tertiary, #f4f5f4);
  border: 1px solid var(--t-border-color-light, #e0eeef);
  border-radius: 8px;
}
html.dark .ccm-qf-custom-logic-row { background: #1e2926; border-color: #2c3c38; }
.ccm-qf-custom-logic-input { font-family: "Menlo", "Consolas", monospace; font-size: 12.5px; }

/* ------------------------------------------------------------------ */
/* Condition rows                                                     */
/* ------------------------------------------------------------------ */

.ccm-qf-conditions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ccm-qf-no-conditions {
  font-size: 12.5px;
  color: var(--t-font-color-secondary, #5e7c8b);
  padding: 14px 0 8px;
  font-style: italic;
}
html.dark .ccm-qf-no-conditions { color: #7a9baa; }

.ccm-qf-meta-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 13px;
  font-size: 12.5px;
  color: #c0392b;
  background: #fdecea;
  border: 1px solid #f5c6c0;
  border-radius: 7px;
  line-height: 1.45;
}
html.dark .ccm-qf-meta-error { color: #fca5a5; background: #2c1a1a; border-color: #7f1d1d; }

/* Relation value: read-only display inside a condition row */
.ccm-qf-cond-relation-val {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 9px;
  background: var(--t-background-tertiary, #f4f5f4);
  border: 1px solid var(--t-border-color-light, #e0eeef);
  border-radius: 6px;
  min-width: 0;
}
html.dark .ccm-qf-cond-relation-val { background: #18201e; border-color: #2c3c38; }
.ccm-qf-cond-relation-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--t-font-color-primary, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .ccm-qf-cond-relation-label { color: #f0f4f4; }
.ccm-qf-cond-relation-note {
  font-size: 10.5px;
  color: var(--t-font-color-secondary, #5e7c8b);
  font-style: italic;
}
html.dark .ccm-qf-cond-relation-note { color: #7a9baa; }

.ccm-qf-cond-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--t-background-tertiary, #f4f5f4);
  border: 1px solid var(--t-border-color-light, #e0eeef);
  border-radius: 8px;
  transition: border-color 0.1s;
}
html.dark .ccm-qf-cond-row { background: #18201e; border-color: #2c3c38; }
.ccm-qf-cond-row:hover { border-color: #7f9a92; }
html.dark .ccm-qf-cond-row:hover { border-color: #4a5e59; }

.ccm-qf-cond-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8eeec;
  color: #2f3d39;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
html.dark .ccm-qf-cond-num { background: #24312d; color: #9fbdb4; }

.ccm-qf-cond-cells {
  display: flex;
  flex: 1;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ccm-qf-cond-cell { flex: 1; min-width: 120px; }
.ccm-qf-cond-cell--val { flex: 1.2; min-width: 140px; }
.ccm-qf-cond-cell--remove { flex: 0 0 auto; min-width: auto; }

.ccm-qf-cond-remove {
  background: none;
  border: none;
  cursor: pointer;
  font: 600 11px var(--t-font-family, sans-serif);
  color: #c0392b;
  padding: 4px 8px;
  border-radius: 5px;
  opacity: 0.7;
  transition: opacity 0.1s, background 0.1s;
}
.ccm-qf-cond-remove:hover { opacity: 1; background: #fdecea; }
html.dark .ccm-qf-cond-remove { color: #fca5a5; }
html.dark .ccm-qf-cond-remove:hover { background: #2c1a1a; }

/* ------------------------------------------------------------------ */
/* Preview section                                                    */
/* ------------------------------------------------------------------ */

.ccm-qf-preview-section {}

.ccm-qf-preview-error {
  margin-top: 8px;
  padding: 9px 13px;
  background: #fdecea;
  border: 1px solid #f5c6c0;
  border-radius: 7px;
  font-size: 12.5px;
  color: #c0392b;
  line-height: 1.45;
}
html.dark .ccm-qf-preview-error { background: #2c1a1a; border-color: #7f1d1d; color: #fca5a5; }

.ccm-qf-preview-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 12px;
  padding: 10px 14px;
  background: #e8eeec;
  border: 1px solid #b9cac5;
  border-radius: 8px;
}
html.dark .ccm-qf-preview-count { background: #1e2c29; border-color: #2c3c38; }
.ccm-qf-preview-count-num {
  font-size: 20px;
  font-weight: 700;
  color: #2f3d39;
  font-variant-numeric: tabular-nums;
}
html.dark .ccm-qf-preview-count-num { color: #9fbdb4; }
.ccm-qf-preview-count-label {
  font-size: 13px;
  color: var(--t-font-color-secondary, #5e7c8b);
}
html.dark .ccm-qf-preview-count-label { color: #7a9baa; }

.ccm-qf-preview-results {
  margin-top: 12px;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--t-border-color-light, #e0eeef);
}
html.dark .ccm-qf-preview-results { border-color: #2c3c38; }

.ccm-qf-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ccm-qf-preview-table th {
  padding: 8px 12px;
  background: var(--t-background-tertiary, #f4f5f4);
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-font-color-secondary, #5e7c8b);
  border-bottom: 1px solid var(--t-border-color-light, #e0eeef);
  white-space: nowrap;
}
html.dark .ccm-qf-preview-table th { background: #243330; color: #7a9baa; border-color: #2c3c38; }
.ccm-qf-preview-table td {
  padding: 8px 12px;
  color: var(--t-font-color-primary, #1a1a1a);
  border-bottom: 1px solid var(--t-border-color-light, #eef1f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
html.dark .ccm-qf-preview-table td { color: #f0f4f4; border-color: #243330; }
.ccm-qf-preview-table tr:last-child td { border-bottom: none; }
.ccm-qf-preview-table tbody tr:hover td { background: var(--t-background-tertiary, #f8f8f8); }
html.dark .ccm-qf-preview-table tbody tr:hover td { background: #243330; }
.ccm-qf-results-empty {
  padding: 18px;
  font-size: 12.5px;
  color: var(--t-font-color-secondary, #5e7c8b);
  background: var(--t-background-secondary, #fff);
}
html.dark .ccm-qf-results-empty { color: #7a9baa; background: #1e2c29; }
.ccm-qf-results-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.ccm-qf-results-range {
  font-size: 12px;
  color: var(--t-font-color-secondary, #5e7c8b);
  font-variant-numeric: tabular-nums;
}
html.dark .ccm-qf-results-range { color: #7a9baa; }
.ccm-qf-results-pager-actions { display: flex; gap: 8px; }

/* ------------------------------------------------------------------ */
/* Footer                                                             */
/* ------------------------------------------------------------------ */

.ccm-qf-editor-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--t-border-color-light, #e0eeef);
}
html.dark .ccm-qf-editor-footer { border-color: #2c3c38; }
.ccm-qf-editor-footer-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
}

/* Save banner */
.ccm-qf-save-banner {
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.45;
}
.ccm-qf-save-banner--error {
  background: #fdecea;
  color: #c0392b;
  border: 1px solid #f5c6c0;
}
.ccm-qf-save-banner--success {
  background: #e8eeec;
  color: #2f3d39;
  border: 1px solid #b9cac5;
}
html.dark .ccm-qf-save-banner--error { background: #2c1a1a; color: #fca5a5; border-color: #7f1d1d; }
html.dark .ccm-qf-save-banner--success { background: #1e2c29; color: #9fbdb4; border-color: #2c3c38; }

/* ------------------------------------------------------------------ */
/* Version history                                                    */
/* ------------------------------------------------------------------ */

.ccm-qf-versions-area {
  margin-bottom: 14px;
  padding: 16px 18px;
  background: var(--t-background-tertiary, #f4f5f4);
  border: 1px solid var(--t-border-color-medium, #d8dbdb);
  border-radius: 9px;
}
html.dark .ccm-qf-versions-area { background: #1e2926; border-color: #2c3c38; }

.ccm-qf-versions-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-font-color-secondary, #5e7c8b);
  margin-bottom: 10px;
}
html.dark .ccm-qf-versions-title { color: #7a9baa; }

.ccm-qf-versions-loading, .ccm-qf-versions-empty {
  font-size: 12.5px;
  color: var(--t-font-color-secondary, #5e7c8b);
  font-style: italic;
}
html.dark .ccm-qf-versions-loading, html.dark .ccm-qf-versions-empty { color: #7a9baa; }
.ccm-qf-versions-error {
  font-size: 12.5px;
  color: #c0392b;
  margin-top: 6px;
}
html.dark .ccm-qf-versions-error { color: #fca5a5; }

.ccm-qf-versions-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ccm-qf-version-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--t-background-secondary, #fff);
  border: 1px solid var(--t-border-color-light, #e0eeef);
  border-radius: 7px;
}
html.dark .ccm-qf-version-item { background: #1e2c29; border-color: #2c3c38; }
.ccm-qf-version-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.ccm-qf-version-num {
  font-size: 12.5px;
  font-weight: 700;
  color: #3d4d49;
  font-family: "Menlo", "Consolas", monospace;
}
html.dark .ccm-qf-version-num { color: #9fbdb4; }
.ccm-qf-version-when, .ccm-qf-version-who, .ccm-qf-version-note {
  font-size: 12px;
  color: var(--t-font-color-secondary, #5e7c8b);
}
html.dark .ccm-qf-version-when, html.dark .ccm-qf-version-who, html.dark .ccm-qf-version-note {
  color: #7a9baa;
}

/* ------------------------------------------------------------------ */
/* Settings nav link                                                  */
/* ------------------------------------------------------------------ */

.ccm-qf-nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 8px !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1c2523 !important;
  min-height: 34px !important;
  border-radius: 8px !important;
  margin-top: 4px !important;
  cursor: pointer !important;
}
.ccm-qf-nav-link:hover { background: var(--t-background-tertiary, #f4f5f4) !important; }
.ccm-qf-nav-link--active {
  background: var(--t-accent-quaternary, #f4f7f6) !important;
  font-weight: 600 !important;
  color: #3d4d49 !important;
}
html.dark .ccm-qf-nav-link { color: #d8e6e2 !important; }
html.dark .ccm-qf-nav-link:hover { background: #1e2926 !important; }
html.dark .ccm-qf-nav-link--active { color: #9fbdb4 !important; background: #1e2926 !important; }

/* ------------------------------------------------------------------ */
/* Token-normalized overrides (tie everything to Twenty's --t-* vars) */
/* ------------------------------------------------------------------ */

.ccm-qf-manager,
html.dark .ccm-qf-manager {
  background: var(--t-background-primary);
  border-color: var(--t-border-color-medium);
  color: var(--t-font-color-primary);
}

.ccm-qf-header,
html.dark .ccm-qf-header {
  background: var(--t-background-secondary);
  border-color: var(--t-border-color-light);
}

.ccm-qf-tabs,
html.dark .ccm-qf-tabs,
.ccm-qf-table thead,
html.dark .ccm-qf-table thead,
.ccm-qf-cond-row,
html.dark .ccm-qf-cond-row,
.ccm-qf-preview-table th,
html.dark .ccm-qf-preview-table th,
.ccm-qf-versions-area,
html.dark .ccm-qf-versions-area {
  background: var(--t-background-tertiary);
  border-color: var(--t-border-color-light);
}

.ccm-qf-table-wrap,
html.dark .ccm-qf-table-wrap,
.ccm-qf-section,
html.dark .ccm-qf-section,
.ccm-qf-version-item,
html.dark .ccm-qf-version-item {
  background: var(--t-background-secondary);
  border-color: var(--t-border-color-light);
}

.ccm-qf-header-title,
html.dark .ccm-qf-header-title,
.ccm-qf-queue-name,
html.dark .ccm-qf-queue-name,
.ccm-qf-table td,
html.dark .ccm-qf-table td,
.ccm-qf-editor-title,
html.dark .ccm-qf-editor-title,
.ccm-qf-preview-count-num,
html.dark .ccm-qf-preview-count-num,
.ccm-qf-preview-table td,
html.dark .ccm-qf-preview-table td {
  color: var(--t-font-color-primary);
}

.ccm-qf-header-sub,
html.dark .ccm-qf-header-sub,
.ccm-qf-queue-note,
html.dark .ccm-qf-queue-note,
.ccm-qf-td-summary,
html.dark .ccm-qf-td-summary,
.ccm-qf-table th,
html.dark .ccm-qf-table th,
.ccm-qf-form-label,
html.dark .ccm-qf-form-label,
.ccm-qf-section-title,
html.dark .ccm-qf-section-title,
.ccm-qf-section-hint,
html.dark .ccm-qf-section-hint,
.ccm-qf-form-hint,
html.dark .ccm-qf-form-hint,
.ccm-qf-versions-title,
html.dark .ccm-qf-versions-title,
.ccm-qf-preview-count-label,
html.dark .ccm-qf-preview-count-label,
.ccm-qf-version-when,
html.dark .ccm-qf-version-when,
.ccm-qf-version-who,
html.dark .ccm-qf-version-who,
.ccm-qf-version-note,
html.dark .ccm-qf-version-note {
  color: var(--t-font-color-secondary);
}

.ccm-qf-table th,
html.dark .ccm-qf-table th,
.ccm-qf-table td,
html.dark .ccm-qf-table td {
  border-color: var(--t-border-color-light);
}

.ccm-qf-input,
html.dark .ccm-qf-input {
  background: var(--t-background-primary);
  border-color: var(--t-border-color-medium);
  color: var(--t-font-color-primary);
}
.ccm-qf-input:focus { outline-color: var(--t-color-blue8); }

.ccm-qf-btn--primary,
html.dark .ccm-qf-btn--primary {
  background: var(--t-color-blue9);
  color: var(--t-background-secondary);
}
.ccm-qf-btn--primary:hover:not(:disabled),
html.dark .ccm-qf-btn--primary:hover:not(:disabled) {
  background: var(--t-color-blue10);
}

.ccm-qf-btn--outline,
html.dark .ccm-qf-btn--outline {
  background: var(--t-background-secondary);
  border-color: var(--t-border-color-medium);
  color: var(--t-color-blue11);
}

.ccm-qf-badge--native,
html.dark .ccm-qf-badge--native {
  background: var(--t-color-blue3);
  color: var(--t-color-blue11);
}

.ccm-qf-preview-count,
html.dark .ccm-qf-preview-count,
.ccm-qf-save-banner--success,
html.dark .ccm-qf-save-banner--success {
  background: var(--t-color-blue3);
  border-color: var(--t-color-blue6);
  color: var(--t-color-blue11);
}

.ccm-qf-table-row:hover td,
html.dark .ccm-qf-table-row:hover td,
.ccm-qf-tab:hover,
html.dark .ccm-qf-tab:hover,
.ccm-qf-btn--outline:hover:not(:disabled),
html.dark .ccm-qf-btn--outline:hover:not(:disabled),
.ccm-qf-nav-link:hover,
html.dark .ccm-qf-nav-link:hover {
  background: var(--t-background-tertiary) !important;
  color: var(--t-font-color-primary);
}

.ccm-qf-tab--active,
html.dark .ccm-qf-tab--active {
  background: var(--t-accent-quaternary) !important;
  color: var(--t-color-blue11) !important;
}

.ccm-qf-nav-link,
html.dark .ccm-qf-nav-link {
  color: var(--t-font-color-primary) !important;
}

.ccm-qf-save-banner--error,
html.dark .ccm-qf-save-banner--error,
.ccm-qf-preview-error,
html.dark .ccm-qf-preview-error {
  background: var(--t-color-red3, #fdecea);
  border-color: var(--t-color-red6, #f5c6c0);
  color: var(--t-color-red11, #c0392b);
}

.ccm-qf-cond-num,
html.dark .ccm-qf-cond-num {
  background: var(--t-color-blue3);
  color: var(--t-color-blue11);
}