/* account-crm.css: "CRM connection" tab of the account dashboard + the
   "connect your CRM" banner on Custom fields. Light theme, account tokens. */

.crm-msg{ font-size:13px; font-weight:600; margin:0 0 14px; color:var(--muted); }
.crm-msg--ok{ color:var(--acct-green); }
.crm-msg--err{ color:#d64545; }

.crm-tiles{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; margin-bottom:18px; }
.crm-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:12px 10px; min-width:0; text-align:left; font:inherit; color:var(--text); cursor:pointer;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:border-color var(--duration-fast, 150ms) ease, transform var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease;
}
.crm-tile:hover{ border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-soft); }
.crm-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.crm-tile.is-selected{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.crm-tile img{ height:24px; width:auto; max-width:120px; object-fit:contain; object-position:left center; }
.crm-tile-name{ font-weight:700; font-size:14px; line-height:1.25; overflow-wrap:anywhere; }
.crm-tile-name small{ display:block; font-weight:500; font-size:11px; color:var(--muted); }
.crm-pill{ margin-top:auto; white-space:nowrap; font-size:11px; font-weight:700; letter-spacing:.02em; padding:3px 8px; border-radius:999px; color:var(--muted); background:var(--accent-soft); }
.crm-pill--on{ color:#fff; background:var(--acct-green); }

.crm-detail{ border-top:1px solid var(--border); padding-top:18px; }
.crm-empty{ color:var(--muted); margin:0; }
.crm-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.crm-head img{ height:30px; width:auto; max-width:130px; object-fit:contain; }
.crm-h3{ font-size:17px; font-weight:700; margin:0 0 4px; }
.crm-sub{ color:var(--muted); font-size:14px; margin:0 0 14px; }
.crm-sub a{ color:var(--accent); font-weight:600; }
.crm-label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
.crm-row{ display:flex; gap:8px; align-items:center; }
.crm-row .tpl-input{ flex:1; font-family:var(--acct-mono, monospace); }
.crm-wait{ margin-top:12px; font-size:13px; color:var(--muted); }
.crm-warn{ font-size:13px; font-weight:600; color:#b26a00; background:rgba(255, 170, 0, .12); border-radius:10px; padding:9px 12px; margin:0 0 14px; }
.crm-actions{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px; }
.crm-danger{ color:#d64545; }
.crm-field{ margin-top:20px; }
.crm-hint{ font-size:13px; color:var(--muted); margin:6px 0 0; }
.crm-radios{ display:flex; gap:8px; flex-wrap:wrap; }
.crm-radio{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:14px; font-weight:600;
  padding:7px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-elevated);
}
.crm-radio:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.crm-radio input{ accent-color:var(--accent); margin:0; }
.crm-objs{ list-style:none; margin:0 0 10px; padding:0; display:grid; gap:6px; }
.crm-objs li{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; }
.crm-obj{ font-weight:700; }
.crm-ok{ color:var(--acct-green); font-family:var(--acct-mono, monospace); }
.crm-miss{ color:var(--muted); }

/* Custom fields: nothing connected yet */
.cf-needcrm{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:16px; border:1px solid var(--accent); border-radius:var(--radius-sm); background:var(--accent-soft);
}
.cf-needcrm[hidden]{ display:none; }
.cf-needcrm p{ margin:0; font-size:14px; }
.cf-needcrm strong{ display:block; font-size:15px; margin-bottom:2px; }

@media (max-width: 900px){
  .crm-tiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .crm-row{ flex-direction:column; align-items:stretch; }
  .crm-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Custom fields: no Save while there are no CRM fields (.btn display would beat [hidden]) */
#cfSaveBtn[hidden]{ display:none; }