/* Settings > Email/Mail/SMS Templates — shared card-grid layout for the three template
   management pages. Loaded globally via app.js alongside vx-design-system.css. */

.tpl-page { padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; }

.tpl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tpl-blurb { font-size: 13.5px; color: #8892A8; max-width: 500px; line-height: 1.5; }

.tpl-empty { border: 1px dashed #D8E0F0; border-radius: 16px; padding: 48px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.tpl-empty-icon { width: 56px; height: 56px; border-radius: 15px; background: #EEF3FF; color: #3B6EF6; display: flex; align-items: center; justify-content: center; }
.tpl-empty-title { font-size: 16px; font-weight: 800; color: #1E2A63; }
.tpl-empty-text { font-size: 13.5px; color: #8892A8; max-width: 360px; line-height: 1.55; }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.tpl-card { border: 1px solid #E6EBF3; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: border-color .13s ease; }
.tpl-card:hover { border-color: #C7D5F0; }

.tpl-card-head { padding: 16px 18px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tpl-card-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tpl-card-icon { width: 34px; height: 34px; border-radius: 9px; background: #EEF3FF; color: #3B6EF6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tpl-card-name { font-size: 14.5px; font-weight: 800; color: #1C2540; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tpl-card-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.tpl-card-action-btn { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #94A0B8; cursor: pointer; text-decoration: none; }
.tpl-card-action-btn:hover { background: #EEF1F6; color: #3B6EF6; }
.tpl-card-action-btn.tpl-card-action-danger:hover { background: #FCEBEC; color: #E5484D; }

.tpl-card-subject { padding: 0 18px 6px; display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; }
.tpl-card-subject-label { font-weight: 800; color: #8892A8; flex-shrink: 0; }
.tpl-card-subject-value { color: #3D486A; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tpl-card-body { padding: 0 18px 14px; flex: 1; }
.tpl-card-body-text { font-size: 13px; color: #5A6580; line-height: 1.6; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-card-body-text-4 { -webkit-line-clamp: 4; }

.tpl-card-footer { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-top: 1px solid #F1F4FA; background: #FAFBFD; }
.tpl-card-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #8892A8; }

/* Modal forms (create/edit) shared across the three template types */
.tpl-var-dropdown { min-width: 700px; max-width: 800px; }
.tpl-var-dropdown-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tpl-modal-success { text-align: center; padding: 32px 24px; }
.tpl-modal-success-icon { width: 56px; height: 56px; border-radius: 50%; background: #E4F6EC; color: #1FA463; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.tpl-modal-success-title { font-size: 18px; font-weight: 800; color: #1C2540; }
.tpl-modal-success-footer { border-top: none; justify-content: center; }
.tpl-modal-success-text { font-size: 13.5px; color: #8892A8; margin-top: 6px; }
.tpl-sms-counter-row { display: flex; justify-content: space-between; margin-top: 8px; }