/* Native V2 Manage meta templet. Grid and popovers reuse the .ct-* classes of css/contacts.css; layout follows the width of the area. */
.tp { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 16px; min-width: 0; min-height: 0; overflow: auto; background: #f1f1f1; font-size: 14px; color: var(--ink); }
.tp.off { display: none; }
.tp[data-layout="narrow"] { padding: 12px 8px 8px; }
.tp .ct-loading { padding: 24px; }

/* header card */
.tp-head { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; background: #fff; border-radius: 8px; padding: 16px; }
.tp-head.compact { display: flex; gap: 12px; align-items: center; }
.tp-head.compact .tp-add { flex: 1; max-width: 300px; }
.tp-headtext { display: grid; gap: 14px; justify-items: start; }
.tp-art { width: 200px; max-width: 100%; height: auto; display: block; }
.tp-des { margin: 0; color: gray; font-size: 12.5px; line-height: 1.45; max-width: 480px; }
.tp-headrow { display: flex; gap: 12px; align-items: center; width: 100%; }
.tp-add { flex: 1; max-width: 300px; }
.tp-play { justify-self: center; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: #f3f3f3; color: gray; }
.tp-play .wk-i { width: 44px; height: 44px; }
.tp[data-layout="narrow"] .tp-head { grid-template-columns: 1fr; }
.tp[data-layout="narrow"] .tp-play { display: none; }
.tp[data-layout="narrow"] .tp-add { max-width: none; }

/* template list */
.tp .wg { flex: 1; min-height: 240px; }
.tp .wg .ct-table th { min-width: 0; } .tp .wg .ct-table td { max-width: 320px; }
.tp .wg .ct-table th, .tp .wg .ct-table td { padding: 0 8px; }
.tp-viewbtn { color: #666; } .tp-del { color: #d32f2f; }
.tp-st { display: inline-grid; place-items: center; } .tp-st.approved { color: green; } .tp-st.pending { color: orange; } .tp-st.rejected { color: red; }

/* view dialog */
.tp-viewdlg { width: min(560px, 94vw); }
.tp-viewbody { display: grid; gap: 14px; min-width: 0; }
.tp-viewbody hr { border: 0; border-top: 1px solid #e3e3e3; width: 100%; margin: 0; }
.tp-vhead { margin: 0; font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.tp-vmedia { width: 100%; max-height: 200px; object-fit: contain; border-radius: 10px; background: #f3f3f3; }
.tp-vdoc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 10px; background: #f3f3f3; }
.tp-vbody, .tp-vfoot { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .tp-vfoot { color: #6b6b6b; }
.tp-vbtns { display: grid; gap: 8px; }
.tp-vbtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #cfcfcf; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
a.tp-vbtn:hover { background: #f5f5f5; }

/* builder dialog */
.tp-dialog { width: min(1100px, 96vw); }
.tp-dialog .wk-mhead { position: sticky; top: 0; z-index: 3; background: #fff; }
.tp-build { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 900px) { .tp-build { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .tp-prevcol { position: sticky; top: 60px; } }
.tp-form { display: grid; gap: 16px; min-width: 0; }
.tp-form hr { border: 0; border-top: 1px solid #e3e3e3; width: 100%; margin: 0; }
.tp-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; } .tp-lang { min-width: 200px; flex: 1; }
.tp-sec { display: grid; gap: 10px; min-width: 0; }
.tp-lbl { font-size: 13.5px; } .tp-des2 { color: gray; font-size: 12px; margin-top: -6px; }
.tp-help, .tp-ext { color: var(--muted); font-size: 11.5px; } .tp-ext { color: var(--green); }
.tp-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--green); background: #fff; color: var(--green); font: inherit; font-size: 13.5px; cursor: pointer; }
.tp-chip.on { background: var(--green); border-color: var(--green); color: #fff; }
.tp-dialog input.wk-field, .tp-dialog textarea.wk-field { background: #f5f7fb; border-color: #f5f7fb; } .tp-dialog select.wk-field { border-color: #cfe5c8; }
.tp-dialog input.wk-field:focus, .tp-dialog textarea.wk-field:focus { background: #fff; }
.tp-btnchip { cursor: default; padding-right: 6px; }
.tp-x { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; } .tp-x:hover { background: rgba(0, 0, 0, .08); }
.tp-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; } .tp-radio input { accent-color: var(--green); }
.tp-uprow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tp-uprow .wk-field { flex: 1; min-width: 180px; }
.tp-upload { border: 1px solid var(--line); cursor: pointer; } .tp-upload.busy { opacity: .5; cursor: progress; }
.tp-fieldrow { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; } .tp-grow { flex: 1; min-width: 160px; display: grid; gap: 4px; }
.tp-addbtn { color: var(--green); margin-top: 2px; } .tp-addbtn:disabled { opacity: .35; cursor: not-allowed; }
.tp-submit { justify-self: start; }
textarea.wk-field { resize: vertical; }

/* live preview */
.tp-phone { background: #ece9de; border: 5px solid #fff; border-radius: 24px; box-shadow: 0 0 50px 5px rgba(0, 0, 0, .25); min-height: 320px; max-height: 500px; overflow: auto; }
.tp-ph-top { height: 24px; background: #074e47; border-radius: 20px 20px 0 0; } .tp-ph-bar { height: 28px; background: #055f54; }
.tp-bubble { margin: 8px; border-radius: 8px; background: #fff; padding: 12px; min-width: 0; }
.tp-bubble hr { border: 0; border-top: 1px solid #e3e3e3; width: 100%; margin: 0; }
.tp-ph-text { font-weight: 500; font-size: 13.5px; overflow-wrap: anywhere; }
.tp-ph-body { font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; } .tp-ph-foot { color: gray; font-size: 12px; overflow-wrap: anywhere; }
.tp-ph-media { width: 100%; height: 150px; object-fit: contain; background: #f3f3f3; border-radius: 6px; }
.tp-ph-box { display: grid; place-items: center; padding: 28px; border-radius: 8px; background: #e2e2e2; color: gray; } .tp-ph-box.ok { color: var(--green); }
.tp-ph-noimg { width: 40px; height: 40px; }
.tp-ph-btn { display: flex; align-items: center; gap: 8px; border: 1px solid #cfcfcf; border-radius: 8px; padding: 5px 12px; font-size: 12.5px; overflow-wrap: anywhere; }
.tp-ph-time { margin-top: 8px; text-align: right; font-size: 11px; }
.tp-dialog .wk-toast, .tp .wk-toast, .tp-viewdlg .wk-toast { z-index: 2000; }

/* tabs of the Broadcasts screen: buttons (in-screen tabs) and the link to the classic page; the template manager fills the main area */
.bc button.bc-tab { border: 0; background: none; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; text-align: left; width: 100%; }
.bc button.bc-tab:hover { background: #f5f5f5; } .bc button.bc-tab.on { background: #f1f1f1; }
.bc[data-layout="narrow"] button.bc-tab { width: auto; border: 1px solid #cfcfcf; background: #fff; } .bc[data-layout="narrow"] button.bc-tab.on { background: #dfe9e2; }
.bc-classic { margin-top: auto; padding: 8px 10px; font-size: 12px; color: var(--muted); text-decoration: underline; }
.bc[data-layout="narrow"] .bc-classic { margin: 0 0 0 auto; align-self: center; padding: 4px 6px; }
.bc-main.off { display: none; }
.bc-tp { min-width: 0; min-height: 0; }