#templatesPage{
display:grid;
grid-template-columns:2fr 1fr;
gap:25px;
align-items:stretch;
}

.template-card{
background:white;
border-radius:22px;
padding:28px;
box-shadow:0 2px 10px rgba(0,0,0,0.04);
}

.template-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.template-title{
font-size:24px;
font-weight:700;
color:#2563eb;
margin:0;
}

.new-template-btn{
background:#2563eb;
color:white;
border:none;
padding:14px 20px;
border-radius:14px;
font-size:15px;
font-weight:600;
cursor:pointer;
}

#templateName,
#templateSubject{
width:100%;
padding:16px;
border-radius:14px;
border:1px solid #dbe1ea;
font-size:15px;
margin-bottom:18px;
outline:none;
box-sizing:border-box;
}

#editorContainer{
border:1px solid #dbe1ea;
border-radius:16px;
overflow:hidden;
background:white;
}

#toolbar{
border-bottom:1px solid #e5e7eb;
background:#fafafa;
}

#templateEditor{
height:350px;
font-size:15px;
}

.save-template-btn{
margin-top:20px;
background:#0f172a;
color:white;
border:none;
padding:15px 22px;
border-radius:14px;
font-size:15px;
font-weight:600;
cursor:pointer;
}

#templatesList{
max-height:700px;
overflow-y:auto;
padding-right:5px;
}

.template-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px;
border:1px solid #edf1f7;
border-radius:18px;
margin-bottom:14px;
background:#fff;
}

.template-left{
display:flex;
align-items:center;
gap:14px;
}

.template-icon{
width:48px;
height:48px;
border-radius:14px;
background:#eef2ff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}

.template-info h3{
margin:0;
font-size:16px;
color:#111827;
}

.template-date{
font-size:13px;
color:#6b7280;
margin-top:4px;
}

.template-buttons{
display:flex;
gap:10px;
}

.edit-btn{
background:#0f172a;
color:white;
border:none;
padding:10px 14px;
border-radius:12px;
cursor:pointer;
font-size:14px;
}

.delete-btn{
background:#ef4444;
color:white;
border:none;
padding:10px 14px;
border-radius:12px;
cursor:pointer;
font-size:14px;
}

#templateReplyTo{
width:100%;
padding:16px;
border-radius:14px;
border:1px solid #dbe1ea;
font-size:15px;
margin-bottom:18px;
outline:none;
box-sizing:border-box;
}

.template-actions{
margin-top:20px;
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
}

#testEmailAddress{
flex:1;
padding:15px;
border-radius:14px;
border:1px solid #dbe1ea;
font-size:15px;
}

.test-template-btn{
background:#22c55e;
color:white;
border:none;
padding:15px 22px;
border-radius:14px;
font-size:15px;
font-weight:600;
cursor:pointer;
}

/* =========================================================================
   TEMPLATE PAGE PARITY — CONSOLIDATED CLEAN V7
   ========================================================================= */

/* =========================================================
   TEMPLATE PAGE PARITY FIX V6
   Restores the professional editor toolbar, merge tags,
   information notes, actions, and Saved Templates panel.
   ========================================================= */

/* Keep both template columns stable and prevent either card from overflowing. */
#templatesPage{
    grid-template-columns:minmax(0,2fr) minmax(360px,1fr) !important;
    gap:25px !important;
    align-items:start !important;
    width:100% !important;
    min-width:0 !important;
}
#templatesPage > .template-card{
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
}

/* Inputs and editor shell. */
#templatesPage #templateName,
#templatesPage #templateSubject,
#templatesPage #templateReplyTo{
    width:100% !important;
    min-height:54px !important;
    padding:15px 16px !important;
    margin:0 0 18px !important;
    box-sizing:border-box !important;
    border:1px solid #dbe1ea !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#0f172a !important;
    font-size:15px !important;
    outline:none !important;
}
#templatesPage #editorContainer{
    overflow:visible !important;
    border:0 !important;
    border-radius:16px !important;
    background:#fff !important;
}

/* Professional two-row Quill toolbar. */
#templatesPage #toolbar.ql-toolbar.ql-snow{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:7px !important;
    min-height:72px !important;
    padding:12px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    border:1px solid #d8e1ee !important;
    border-radius:16px 16px 0 0 !important;
    background:#f8fafc !important;
}
#templatesPage #toolbar .ql-formats{
    float:none !important;
    display:inline-flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    gap:0 !important;
    min-width:0 !important;
    margin:0 !important;
    padding-right:7px !important;
    border-right:1px solid #dbe4ef !important;
}
#templatesPage #toolbar .ql-formats:last-of-type{
    border-right:0 !important;
}
#templatesPage #toolbar .ql-picker.ql-font{
    width:145px !important;
}
#templatesPage #toolbar .ql-picker.ql-size{
    width:72px !important;
}
#templatesPage #toolbar .template-spacing-select{
    display:inline-block !important;
    width:118px !important;
    min-width:118px !important;
    height:31px !important;
    padding:0 9px !important;
    box-sizing:border-box !important;
    border:1px solid #cbd5e1 !important;
    border-radius:7px !important;
    background:#fff !important;
    color:#334155 !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:29px !important;
}

/* Merge-tag controls must appear as buttons, never as raw overlapping text. */
#templatesPage #toolbar .template-personalize-row{
    float:none !important;
    display:inline-flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    flex:0 1 auto !important;
    gap:6px !important;
    min-width:0 !important;
    width:auto !important;
    margin:0 !important;
    padding:0 0 0 4px !important;
    border:0 !important;
    background:transparent !important;
}
#templatesPage #toolbar .template-personalize-row strong{
    display:inline-block !important;
    margin:0 2px 0 0 !important;
    color:#475569 !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:31px !important;
    white-space:nowrap !important;
}
#templatesPage #toolbar .template-personalize-row button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:0 !important;
    height:31px !important;
    padding:0 11px !important;
    box-sizing:border-box !important;
    border:1px solid #bdd0ff !important;
    border-radius:9px !important;
    background:#eef4ff !important;
    color:#2458d3 !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:29px !important;
    white-space:nowrap !important;
    cursor:pointer !important;
}
#templatesPage #toolbar .template-personalize-row button:hover{
    border-color:#2563eb !important;
    background:#2563eb !important;
    color:#fff !important;
}

/* Editor body identical to the production editor proportions. */
#templatesPage #templateEditor.ql-container.ql-snow{
    height:auto !important;
    min-height:520px !important;
    box-sizing:border-box !important;
    border:1px solid #d8e1ee !important;
    border-top:0 !important;
    border-radius:0 0 16px 16px !important;
    background:#fff !important;
    font-family:Arial,sans-serif !important;
    font-size:14px !important;
}
#templatesPage #templateEditor .ql-editor{
    min-height:520px !important;
    padding:24px 26px !important;
    box-sizing:border-box !important;
    line-height:1.35 !important;
}
#templatesPage #templateEditor .ql-editor.ql-blank::before{
    left:26px !important;
    right:26px !important;
    color:#64748b !important;
}

/* Help boxes below the editor. */
#templatesPage .template-editor-note,
#templatesPage .template-image-note{
    display:block !important;
    width:auto !important;
    margin:8px 4px 0 !important;
    padding:10px 13px !important;
    box-sizing:border-box !important;
    border-radius:10px !important;
    font-size:12px !important;
    line-height:1.5 !important;
}
#templatesPage .template-editor-note{
    border:0 !important;
    background:#eff6ff !important;
    color:#334155 !important;
}
#templatesPage .template-editor-note strong{
    color:#1d4ed8 !important;
    font-weight:800 !important;
}
#templatesPage .template-image-note{
    border:1px solid #bbf7d0 !important;
    background:#f0fdf4 !important;
    color:#334155 !important;
}
#templatesPage .template-image-note strong{
    color:#15803d !important;
}

/* Bottom actions. */
#templatesPage .template-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:15px !important;
    margin-top:20px !important;
}
#templatesPage .save-template-btn{
    flex:0 0 auto !important;
    margin:0 !important;
}
#templatesPage .test-email-box{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
}
#templatesPage #testEmailAddress{
    flex:0 1 230px !important;
    min-width:160px !important;
    height:52px !important;
    padding:14px 16px !important;
    box-sizing:border-box !important;
    border:1px solid #dbe1ea !important;
    border-radius:14px !important;
    font-size:15px !important;
}
#templatesPage .test-template-btn{
    flex:0 0 auto !important;
    min-height:52px !important;
}

/* Saved Templates heading and search field. */
#templatesPage .saved-templates-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
    margin:0 0 18px !important;
}
#templatesPage .saved-templates-header h2{
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
    color:#111827 !important;
    font-size:20px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
}
#templatesPage .saved-templates-header input{
    flex:0 0 140px !important;
    width:140px !important;
    height:40px !important;
    padding:9px 10px !important;
    box-sizing:border-box !important;
    border:1px solid #dbe1ea !important;
    border-radius:10px !important;
    background:#fff !important;
    font-size:13px !important;
}
#templatesPage #templatesList{
    width:100% !important;
    height:650px !important;
    min-height:650px !important;
    max-height:650px !important;
    padding-right:5px !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}
#templatesPage .template-item{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    width:100% !important;
    min-height:104px !important;
    margin:0 0 14px !important;
    padding:16px !important;
    box-sizing:border-box !important;
    border:1px solid #edf1f7 !important;
    border-radius:18px !important;
    background:#fff !important;
}
#templatesPage .template-left{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
}
#templatesPage .template-icon{
    flex:0 0 48px !important;
    width:48px !important;
    height:48px !important;
}
#templatesPage .template-info{
    flex:1 1 auto !important;
    min-width:0 !important;
}
#templatesPage .template-info h3{
    display:block !important;
    margin:0 !important;
    color:#111827 !important;
    font-size:16px !important;
    line-height:1.15 !important;
    overflow-wrap:anywhere !important;
}
#templatesPage .template-date{
    margin-top:4px !important;
    color:#6b7280 !important;
    font-size:13px !important;
    line-height:1.25 !important;
}
#templatesPage .template-creator-label{
    color:#a16207 !important;
}
#templatesPage .template-buttons{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex:0 0 auto !important;
    min-width:max-content !important;
}
#templatesPage .template-buttons .edit-btn,
#templatesPage .template-buttons .delete-btn{
    min-height:42px !important;
    padding:10px 14px !important;
    border-radius:12px !important;
    font-size:14px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
}

@media(max-width:1250px){
    #templatesPage{
        grid-template-columns:minmax(0,1.6fr) minmax(330px,1fr) !important;
    }
    #templatesPage #toolbar .ql-picker.ql-font{width:125px !important;}
}

@media(max-width:980px){
    #templatesPage{
        grid-template-columns:1fr !important;
    }
    #templatesPage #templatesList{
        height:520px !important;
        min-height:520px !important;
        max-height:520px !important;
    }
}