/* ============================================
   Clean Form Mail v3 — Admin Styles
   Colours follow the WordPress admin colour
   scheme automatically via WP CSS variables.
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono&display=swap');

/*
  WordPress exposes these on :root for every admin colour scheme:
    --wp-admin-theme-color            (primary — blue/red/green etc.)
    --wp-admin-theme-color-darker-10  (10% darker)
    --wp-admin-theme-color-darker-20  (20% darker)
  We map our own tokens to them so every component picks up the
  admin's chosen colour automatically.
*/
:root {
    --cfm-accent:    var(--wp-admin-theme-color,        #2271b1);
    --cfm-accent-h:  var(--wp-admin-theme-color-darker-10, #135e96);
    --cfm-accent-d:  var(--wp-admin-theme-color-darker-20, #0a4b78);

    /* Neutral palette — independent of scheme */
    --cfm-bg:        #f0f0f1;   /* matches WP admin background */
    --cfm-surface:   #ffffff;
    --cfm-border:    #c3c4c7;   /* WP standard border colour */
    --cfm-text:      #1d2327;   /* WP body text */
    --cfm-muted:     #646970;   /* WP muted / description text */
    --cfm-success:   #00a32a;   /* WP green */
    --cfm-danger:    #d63638;   /* WP red */
    --cfm-radius:    4px;       /* WP uses tighter radius */
    --cfm-shadow:    0 1px 3px rgba(0,0,0,.1);
}

/* ── Base ────────────────────────────────────────────────────────── */
.cfm-wrap { font-family: 'DM Sans', -apple-system, sans-serif; color: var(--cfm-text); max-width: 960px; }

/* ── Header ──────────────────────────────────────────────────────── */
.cfm-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px; padding: 18px 22px;
    background: var(--cfm-accent);
    border-radius: var(--cfm-radius);
    color: #fff;
}

.cfm-header h1 { margin: 0; font-size: 1.35rem; font-weight: 600; color: #fff; }
.cfm-header p  { margin: 3px 0 0; opacity: .85; font-size: .82rem; font-family: 'DM Sans', sans-serif; }
.cfm-header p code { background: rgba(255,255,255,.2); padding: 1px 5px; border-radius: 3px; font-family: 'DM Mono', monospace; }

/* ── Notice ──────────────────────────────────────────────────────── */
.cfm-notice { padding: 10px 15px; border-radius: var(--cfm-radius); margin-bottom: 14px; font-weight: 500; font-size: .875rem; }
.cfm-notice--success { background: #edfaef; color: var(--cfm-success); border: 1px solid #b8e6be; }

/* ── Tabs ────────────────────────────────────────────────────────── */
.cfm-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--cfm-border); flex-wrap: wrap; }
.cfm-tab  { padding: 8px 15px; text-decoration: none !important; color: var(--cfm-muted) !important; font-weight: 500; font-size: .85rem; transition: color .12s; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.cfm-tab:hover { color: var(--cfm-accent) !important; }
.cfm-tab--active { color: var(--cfm-accent) !important; border-bottom-color: var(--cfm-accent); background: var(--cfm-surface); }

/* ── Card ────────────────────────────────────────────────────────── */
.cfm-card { background: var(--cfm-surface); border: 1px solid var(--cfm-border); border-radius: var(--cfm-radius); padding: 20px 24px; box-shadow: var(--cfm-shadow); }
.cfm-card h2 { margin: 0 0 16px; font-size: 1rem; font-weight: 600; color: var(--cfm-text); }
.cfm-card h3 { margin: 20px 0 8px; font-size: .82rem; font-weight: 700; color: var(--cfm-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── Forms list table ── */
.cfm-forms-table { border-collapse: collapse; width: 100%; margin: 0; }
.cfm-forms-table th { font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--cfm-muted); padding: 8px 12px; background: var(--cfm-bg);
    border-bottom: 1px solid var(--cfm-border); }
.cfm-forms-table td { padding: 10px 12px; vertical-align: middle;
    border-bottom: 1px solid var(--cfm-border); }
.cfm-forms-table tbody tr:last-child td { border-bottom: none; }
.cfm-forms-table tbody tr:hover td { background: #f6f7f7; }
.cfm-forms-table tfoot td { border-top: 2px solid var(--cfm-border); background: var(--cfm-bg); padding: 8px 12px; }
.cfm-forms-table .cfm-code-block { font-size: .82rem; padding: 4px 10px; margin: 0; }
.cfm-forms-table .cfm-code-block code { font-size: .82rem; }


/* ── Table ───────────────────────────────────────────────────────── */
.cfm-table { width: 100%; border-collapse: collapse; }
.cfm-table th { text-align: left; padding: 9px 12px 9px 0; width: 180px; color: var(--cfm-muted); font-weight: 500; font-size: .84rem; vertical-align: top; padding-top: 12px; }
.cfm-table td { padding: 6px 0; }
.cfm-table input[type=text],.cfm-table input[type=email],.cfm-table input[type=url],
.cfm-table input[type=number],.cfm-table select,.cfm-table textarea {
    width: 100%; padding: 7px 10px; border: 1px solid var(--cfm-border); border-radius: var(--cfm-radius);
    font-size: .875rem; font-family: inherit; box-sizing: border-box; transition: border-color .12s, box-shadow .12s;
    background: var(--cfm-surface); color: var(--cfm-text);
}
.cfm-table input:focus,.cfm-table select:focus,.cfm-table textarea:focus {
    outline: none; border-color: var(--cfm-accent); box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}
.cfm-table textarea { resize: vertical; min-height: 80px; font-family: 'DM Mono', monospace; font-size: .82rem; line-height: 1.6; }

/* ── Fields header row ───────────────────────────────────────────── */
.cfm-fields-header { display: flex; gap: 8px; padding: 5px 8px; background: var(--cfm-bg); border-radius: var(--cfm-radius); margin-bottom: 6px; font-size: .75rem; font-weight: 600; color: var(--cfm-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ── Field rows ──────────────────────────────────────────────────── */
.cfm-field-item { margin-bottom: 6px; }
.cfm-field-row { display: flex; align-items: center; gap: 7px; padding: 8px 9px; background: var(--cfm-bg); border: 1px solid var(--cfm-border); border-radius: var(--cfm-radius) var(--cfm-radius) 0 0; transition: border-color .12s; }
.cfm-field-item:not(:has(.cfm-options-row:not(.cfm-hidden))) .cfm-field-row { border-radius: var(--cfm-radius); }
.cfm-field-row:hover { border-color: var(--cfm-accent); }
.cfm-drag-handle { cursor: grab; color: var(--cfm-muted); font-size: 15px; flex-shrink: 0; }
.cfm-input-id    { width: 120px; flex-shrink: 0; }
.cfm-input-label { flex: 1; }
.cfm-input-type  { width: 100px; flex-shrink: 0; }
.cfm-input-placeholder { flex: 1; }
.cfm-req-label   { display: flex; align-items: center; gap: 4px; font-size: .79rem; color: var(--cfm-muted); white-space: nowrap; flex-shrink: 0; width: 50px; }
.cfm-field-row input[type=text],.cfm-field-row select {
    padding: 5px 8px; border: 1px solid var(--cfm-border); border-radius: var(--cfm-radius); font-size: .83rem; font-family: inherit;
    background: var(--cfm-surface); color: var(--cfm-text);
}
.cfm-field-row input:focus,.cfm-field-row select:focus { outline: none; border-color: var(--cfm-accent); }

/* Options sub-row (shown only for Select type) */
.cfm-options-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 46px; background: #f6f7ff; border: 1px solid var(--cfm-accent); border-top: none; border-radius: 0 0 var(--cfm-radius) var(--cfm-radius); }
.cfm-options-row.cfm-hidden { display: none !important; }
.cfm-options-label { font-size: .78rem; font-weight: 600; color: var(--cfm-accent); white-space: nowrap; flex-shrink: 0; }
.cfm-options-input { flex: 1; padding: 5px 8px; border: 1px solid var(--cfm-border); border-radius: var(--cfm-radius); font-size: .83rem; font-family: inherit; background: var(--cfm-surface); color: var(--cfm-text); }

/* ── After-submit radio group ────────────────────────────────────── */
.cfm-radio-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cfm-radio-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--cfm-border); border-radius: var(--cfm-radius); cursor: pointer; transition: border-color .12s, background .12s; background: var(--cfm-bg); }
.cfm-radio-option:hover { border-color: var(--cfm-accent); background: #fff; }
.cfm-radio-option--active { border-color: var(--cfm-accent); background: #fff; box-shadow: inset 3px 0 0 var(--cfm-accent); }
.cfm-radio-option input[type=radio] { flex-shrink: 0; accent-color: var(--cfm-accent); width: 15px; height: 15px; }
.cfm-radio-icon  { font-size: 20px; flex-shrink: 0; }
.cfm-radio-option strong { font-size: .88rem; }
.cfm-radio-option small  { font-size: .78rem; color: var(--cfm-muted); }
.cfm-radio-option code   { background: var(--cfm-bg); padding: 1px 4px; border-radius: 3px; font-size: .76rem; }

/* ── Sub-sections ────────────────────────────────────────────────── */
.cfm-sub-section { border-top: 1px solid var(--cfm-border); padding-top: 14px; margin-top: 4px; }
.cfm-hidden { display: none !important; }
#cfm-link-fields { padding-left: 14px; border-left: 3px solid var(--cfm-border); margin-top: 8px; }

/* ── Tips / hints ────────────────────────────────────────────────── */
.cfm-hint { font-size: .72rem; font-weight: 400; color: var(--cfm-muted); background: var(--cfm-bg); padding: 2px 7px; border-radius: 20px; }
.cfm-tip  { font-size: .79rem; color: var(--cfm-muted); margin: 5px 0 0; line-height: 1.5; }
.cfm-tip code,.cfm-tip strong { font-family: 'DM Mono', monospace; font-size: .78rem; }
.cfm-tip a { color: var(--cfm-accent); }

/* ── Placeholder chips ───────────────────────────────────────────── */
.cfm-placeholders { margin-top: 8px; }
.cfm-placeholders strong { display: block; font-size: .77rem; margin-bottom: 5px; color: var(--cfm-muted); }
.cfm-chip { background: var(--cfm-bg); border: 1px solid var(--cfm-border); padding: 2px 7px; border-radius: 3px; font-family: 'DM Mono', monospace; font-size: .77rem; margin: 2px; display: inline-block; cursor: pointer; color: var(--cfm-text); transition: background .12s; }
.cfm-chip:hover { background: var(--cfm-accent); color: #fff !important; border-color: var(--cfm-accent); }

/* ── Badge ───────────────────────────────────────────────────────── */
.cfm-badge { background: #edfaef; color: var(--cfm-success); padding: 2px 8px; border-radius: 20px; font-size: .77rem; font-weight: 600; margin-right: 5px; }

/* ── Code block ──────────────────────────────────────────────────── */
.cfm-code-block { background: #1d2327; color: #a5f3fc; font-family: 'DM Mono', monospace; padding: 11px 16px; border-radius: var(--cfm-radius); font-size: .85rem; margin: 8px 0; }
.cfm-field-list  { list-style: disc; padding-left: 18px; }
.cfm-field-list li { margin-bottom: 4px; font-size: .875rem; }
.cfm-field-list code { background: var(--cfm-bg); padding: 1px 5px; border-radius: 3px; font-family: 'DM Mono', monospace; }

/* ── Toggle switch ───────────────────────────────────────────────── */
.cfm-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cfm-toggle input { display: none; }
.cfm-toggle span { width: 38px; height: 20px; background: var(--cfm-border); border-radius: 10px; position: relative; transition: background .2s; flex-shrink: 0; }
.cfm-toggle span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.cfm-toggle input:checked + span { background: var(--cfm-accent); }
.cfm-toggle input:checked + span::after { left: 20px; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
   Primary uses WP accent colour.
   Hover changes ONLY the background — text colour is fixed.
   Outline hover background lightens — text stays put.
   Danger hover background lightens — text stays put.
══════════════════════════════════════════════════════════ */
.cfm-btn {
    display: inline-block; padding: 7px 14px; border-radius: var(--cfm-radius);
    font-size: .84rem; font-weight: 600; cursor: pointer; border: 1px solid transparent;
    font-family: inherit; transition: background .12s; text-decoration: none;
    line-height: 1.4; white-space: nowrap;
}
/* Primary — accent background, white text, always */
.cfm-btn--primary {
    background: var(--cfm-accent);
    color: #fff !important;
    border-color: var(--cfm-accent-h);
}
.cfm-btn--primary:hover {
    background: var(--cfm-accent-h);
    color: #fff !important;         /* text stays white */
    border-color: var(--cfm-accent-d);
}
/* Outline — transparent background, dark text, always */
.cfm-btn--outline {
    background: var(--cfm-surface);
    color: var(--cfm-text) !important;
    border-color: var(--cfm-border);
}
.cfm-btn--outline:hover {
    background: var(--cfm-bg);     /* background darkens slightly */
    color: var(--cfm-text) !important; /* text stays dark */
    border-color: var(--cfm-muted);
}
/* Danger — white background, red text, always */
.cfm-btn--danger {
    background: transparent;
    color: var(--cfm-danger) !important;
    border-color: transparent;
    padding: 5px 9px;
}
.cfm-btn--danger:hover {
    background: #fce8e8;           /* background blushes red */
    color: var(--cfm-danger) !important; /* text stays red */
}
.cfm-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Actions bar */
.cfm-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cfm-border); display: flex; align-items: center; gap: 8px; }

/* ── Forms grid ──────────────────────────────────────────────────── */





.cfm-form-id-chip { background: var(--cfm-bg); border: 1px solid var(--cfm-border); padding: 1px 7px; border-radius: 3px; font-family: 'DM Mono', monospace; font-size: .73rem; color: var(--cfm-muted); display: inline-block; }



/* All action buttons in card are same size — no margin-top offset */


/* ── Back button ─────────────────────────────────────────────────── */
.cfm-back-btn { font-size: .8rem; color: var(--cfm-muted) !important; text-decoration: none; padding: 4px 9px; border-radius: var(--cfm-radius); border: 1px solid var(--cfm-border); background: var(--cfm-surface); transition: border-color .12s; }
.cfm-back-btn:hover { border-color: var(--cfm-accent); color: var(--cfm-accent) !important; }

/* ── New form modal ──────────────────────────────────────────────── */




/* ── Clipboard copy ──────────────────────────────────────────────── */
.cfm-code-block.cfm-copyable {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background .12s;
}
.cfm-code-block.cfm-copyable:hover { background: #2d3748; }
.cfm-copy-badge {
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: #a5f3fc;
    border: 1px solid #3a4a6a;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .12s, color .12s;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cfm-code-block.cfm-copyable:hover .cfm-copy-badge { background: #1a4bff; border-color: #1a4bff; color: #fff; }
.cfm-code-block.cfm-copied .cfm-copy-badge { background: var(--cfm-success); border-color: var(--cfm-success); color: #fff; }

/* Inline copy (field ID chips) */
.cfm-copyable-inline {
    cursor: pointer;
    background: var(--cfm-bg);
    border: 1px solid var(--cfm-border);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'DM Mono', monospace;
    font-size: .82rem;
    transition: background .12s, color .12s, border-color .12s;
    display: inline-block;
}
.cfm-copyable-inline:hover { background: var(--cfm-accent); color: #fff; border-color: var(--cfm-accent); }
.cfm-copyable-inline.cfm-copied { background: var(--cfm-success); color: #fff; border-color: var(--cfm-success); }