/* =========================================================================
   Template Editor admin page (Components/Admin/TemplateEditorPage.razor)
   -------------------------------------------------------------------------
   Generic form rules were removed from this file - including the generic .form-group, .form-label and .form-control rules,
   which were global (this stylesheet is not scoped) and shadowed Bootstrap
   app-wide.

   What is left below has no design-system equivalent: the per-event section
   rhythm, the auto-fitting card grid, the monospace editing surface and the
   <details> preview block. Colours, radii and fonts use the HEIFIT tokens.
   ========================================================================= */

.template-section {
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--divider);
}

/* Variable cheat sheet - an inline hint, not a feedback alert, so it is
   styled here rather than as a feedback alert. */
.variable-hint {
    box-sizing: border-box;
    margin: var(--space-2) 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius-sm);
    background-color: var(--surface-300);
    color: var(--ink);
    font: 400 0.9375rem/1.6 var(--font-sans);
}

.variable-hint code {
    padding: 0.1rem 0.3rem;
    border-radius: 5px;
    background-color: var(--surface-200);
    font-family: monospace;
}

/* .template-textarea lives in Components/Admin/TemplateEditorPage.razor.css (scoped). */

.preview-section {
    margin: var(--space-4) 0;
    padding: var(--space-3);
    border: 1px solid var(--divider);
    border-radius: var(--radius-sm);
    background-color: var(--surface-300);
}

.preview-toggle {
    padding: var(--space-2);
    color: var(--ink);
    font: 600 0.875rem/1.2 var(--font-sans);
    user-select: none;
    cursor: pointer;
}

.preview-toggle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.preview-box {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--divider);
    border-radius: var(--radius-sm);
    background-color: var(--surface-200);
    font: 400 0.9375rem/1.6 var(--font-sans);
    word-wrap: break-word;
    white-space: pre-wrap;
}

.template-actions {
    display: flex;
    gap: var(--space-2);
}

.template-actions button {
    flex: 1;
}