/* Templates dialog (From template…) and the Save as template prompt. Tokens come from tables.css and tlbxui.css. */
.tpl-dlg { width: min(900px, 100%); }
.tpl-body { display: grid; gap: 6px; }
.tpl-body h3 { margin: 10px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--s-dim); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tpl-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-input); }
.tpl-card h4 { margin: 0; font-size: 14px; }
.tpl-desc { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--s-dim); }
.tpl-mini { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
.tpl-mini td { padding: 2px 5px; border: 1px solid var(--s-line); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tpl-mini tr:first-child td { font-weight: 600; background: var(--s-hover); }
.tpl-mini td.n { text-align: right; }
.tpl-actions { display: flex; gap: 6px; margin-top: auto; }
.tpl-actions .sui-btn { flex: 1; }
.tpl-actions .tpl-more { flex: 0 0 auto; min-width: 36px; }
.tpl-empty { margin: 0; font-size: 13px; color: var(--s-dim); }
.tpl-preview { max-height: 60vh; overflow: auto; }
.tpl-preview .tpl-mini { font-size: 12px; }
@media (max-width: 480px) { .tpl-grid { grid-template-columns: 1fr; } }