/* ============================================================
   templates.css — namespace .wat-* (WhatsApp Templates)
   ============================================================ */

.wat-page { display:flex; flex-direction:column; gap:14px; padding:8px 0; }
.wat-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px; background:#fff;
  border:1px solid var(--cf-border, #e2e8f0); border-radius:10px;
}
.wat-filters { display:flex; gap:6px; flex-wrap:wrap; }
.wat-filter {
  background:transparent; border:1px solid var(--cf-border, #e2e8f0);
  padding:5px 12px; border-radius:14px; font-size:12px; cursor:pointer;
  color:var(--cf-text-2, #475569);
}
.wat-filter.active { background:var(--cf-brand, #1E5BAA); color:#fff; border-color:var(--cf-brand, #1E5BAA); }

.wat-empty {
  text-align:center; padding:48px; background:#f8fafc; border-radius:12px;
  border:2px dashed var(--cf-border, #e2e8f0);
}
.wat-empty-icon { font-size:48px; margin-bottom:8px; }
.wat-empty-title { font-size:16px; font-weight:600; }
.wat-empty-msg { font-size:13px; color:var(--cf-text-3, #64748b); margin-top:6px; }

.wat-table { width:100%; border-collapse:collapse; font-size:13px; background:#fff; border-radius:10px; overflow:hidden; }
.wat-table th {
  text-align:left; padding:10px 12px; background:#f8fafc;
  font-size:10px; font-weight:600; color:var(--cf-text-3, #64748b);
  text-transform:uppercase; letter-spacing:0.5px;
}
.wat-table td { padding:10px 12px; border-top:1px solid #f1f5f9; }
.wat-row-clickable { cursor:pointer; }
.wat-row-clickable:hover { background:#f8fafc; }
.wat-name { font-weight:500; color:var(--cf-text, #0f172a); }
.wat-account { font-size:11px; color:var(--cf-text-3, #94a3b8); margin-top:2px; }

.wat-pill { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:500; }
.wat-pill-green { background:#dcfce7; color:#166534; }
.wat-pill-amber { background:#fef3c7; color:#92400e; }
.wat-pill-red { background:#fee2e2; color:#991b1b; }
.wat-pill-pink { background:#fce7f3; color:#9f1239; }
.wat-pill-gray { background:#f1f5f9; color:#475569; }

.wat-btn-primary {
  background:var(--cf-brand, #1E5BAA); color:#fff; border:none;
  padding:7px 14px; border-radius:6px; font-size:13px; cursor:pointer;
}
.wat-btn-ghost {
  background:transparent; color:var(--cf-text-2, #475569);
  border:1px solid var(--cf-border, #e2e8f0);
  padding:7px 14px; border-radius:6px; font-size:13px; cursor:pointer;
}
.wat-btn-ghost-sm {
  background:transparent; color:var(--cf-text-2, #475569);
  border:1px solid var(--cf-border, #e2e8f0);
  padding:4px 10px; border-radius:4px; font-size:11px; cursor:pointer;
}
.wat-btn-icon {
  background:transparent; border:none; cursor:pointer;
  padding:4px 8px; font-size:14px; color:var(--cf-text-3, #94a3b8);
}

/* form */
.wat-form { display:flex; flex-direction:column; gap:12px; }
.wat-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wat-label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; color:var(--cf-text-2, #475569); }
.wat-input {
  width:100%; padding:9px 12px;
  border:1px solid var(--cf-border, #e2e8f0); border-radius:7px;
  font-size:13px; background:#fff;
}
.wat-input-sm { padding:6px 10px; font-size:12px; }
.wat-textarea { resize:vertical; min-height:120px; font-family:inherit; }
.wat-hint { font-size:11px; color:var(--cf-text-3, #94a3b8); }
.wat-toggle { display:inline-flex; gap:6px; cursor:pointer; font-size:13px; align-items:center; }

.wat-vars-section { display:flex; flex-direction:column; gap:8px; padding:12px; background:#f8fafc; border-radius:8px; }
.wat-vars-head { display:flex; justify-content:space-between; align-items:center; }
.wat-var-row { display:grid; grid-template-columns: 60px 1fr; gap:8px; align-items:center; padding:6px 0; }
.wat-var-pos {
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  background:#0f172a; color:#fff; padding:4px 8px; border-radius:4px;
  text-align:center;
}