/* Template Manager Module */
.template-mgr-page {
    --tmp-accent: #7c3aed;
    --tmp-accent-soft: #f3e8ff;
    --tmp-success: #059669;
    --tmp-warning: #d97706;
    --tmp-danger: #dc2626;
    --tmp-ink: #1e1b4b;
    --tmp-muted: #6b7280;
    --tmp-bg: #faf8ff;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 6% -6%, rgba(124, 58, 237, 0.09), transparent 36%),
        radial-gradient(circle at 94% 0%, rgba(168, 85, 247, 0.08), transparent 34%),
        var(--tmp-bg);
    border-radius: 1rem;
}

.tmp-title { color: var(--tmp-ink); }
.tmp-subtitle { color: var(--tmp-muted); }
.tmp-card { border: 1px solid rgba(124, 58, 237, 0.14); border-radius: 0.9rem; background: #fff; box-shadow: 0 10px 26px rgba(30, 27, 75, 0.05); }
.tmp-card .card-header { background: linear-gradient(180deg, rgba(124, 58, 237, 0.06), transparent); border-bottom: 1px solid rgba(124, 58, 237, 0.1); }
.tmp-quality-badge { padding: 0.35rem 0.75rem; border-radius: 0.5rem; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.tmp-quality-badge.green { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.tmp-quality-badge.yellow { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.tmp-quality-badge.red { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.tmp-quality-badge.unknown { background: #e5e7eb; color: #4b5563; border: 1px solid #d1d5db; }
.tmp-status-badge { padding: 0.3rem 0.65rem; border-radius: 0.45rem; font-size: 0.78rem; font-weight: 600; }
.tmp-status-badge.approved { background: #dcfce7; color: #166534; }
.tmp-status-badge.pending { background: #fef3c7; color: #78350f; }
.tmp-status-badge.rejected { background: #fee2e2; color: #991b1b; }
.tmp-category-badge { padding: 0.25rem 0.6rem; border-radius: 0.4rem; font-size: 0.76rem; font-weight: 600; }
.tmp-category-badge.marketing { background: #dbeafe; color: #1e40af; }
.tmp-category-badge.utility { background: #e0e7ff; color: #3730a3; }
.tmp-preview-box { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); border-radius: 1rem; padding: 1.5rem; color: #fff; min-height: 300px; position: relative; }
.tmp-whatsapp-bubble { background: #dcf8c6; color: #000; border-radius: 0.6rem; padding: 0.75rem; max-width: 85%; position: relative; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.tmp-table { font-size: 0.88rem; }
.tmp-table th { background: #faf8ff; color: var(--tmp-ink); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.3px; }
.tmp-table tbody tr { cursor: pointer; transition: all 0.15s; }
.tmp-table tbody tr:hover { background: #faf8ff; }

/* Dark Mode */
html.dark-theme .template-mgr-page {
    --tmp-ink: #e9d5ff;
    --tmp-muted: #94a3b8;
    --tmp-bg: #0f0a1a;
    background:
        radial-gradient(circle at 6% -6%, rgba(124, 58, 237, 0.12), transparent 36%),
        radial-gradient(circle at 94% 0%, rgba(168, 85, 247, 0.10), transparent 34%),
        var(--tmp-bg);
}
html.dark-theme .tmp-title { color: #e9d5ff; }
html.dark-theme .tmp-subtitle { color: #94a3b8; }
html.dark-theme .tmp-card { background: #1f1428; border-color: rgba(124, 58, 237, 0.2); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); }
html.dark-theme .tmp-card .card-header { background: linear-gradient(180deg, rgba(124, 58, 237, 0.1), transparent); border-color: rgba(124, 58, 237, 0.2); }
html.dark-theme .tmp-table th { background: #0f0a1a; color: #e9d5ff; }
html.dark-theme .tmp-table tbody tr:hover { background: #1a0f28; }
html.dark-theme .tmp-preview-box { background: linear-gradient(135deg, #128c7e 0%, #075e54 100%); }