/* it#377 — fiche template alignée sur le langage visuel "Ink Flow" du dashboard.
 * Toutes les primitives (.card / .card-h / .kpi / .btn / .hero / .topbar) sont
 * fournies par .dashboard-v2 dans app.css. Ici : seules les surfaces template-
 * spécifiques (stage de preview, éditeur HTML, panneau variables, submit bar).
 * Scoped sous .dashboard-v2 .tpl-* pour ne pas leaker.
 */

/* ─────────────── Hero compact ─────────────── */
.dashboard-v2 .hero.hero--tpl {
    grid-template-columns: 1.4fr .6fr;
    padding: 22px 26px 22px;
    gap: 24px;
}
.dashboard-v2 .hero--tpl h1 {
    font-size: clamp(24px, 3vw, 34px);
}
.dashboard-v2 .hero--tpl .badges {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.dashboard-v2 .hero--tpl .badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
}
.dashboard-v2 .hero--tpl .badge.lock { background: rgba(0,159,227,.18); border-color: rgba(0,159,227,.4); }
.dashboard-v2 .hero--tpl .badge.def  { background: rgba(102,179,46,.2); border-color: rgba(102,179,46,.45); }
.dashboard-v2 .hero--tpl .badge.off  { opacity: .55; }

.dashboard-v2 .hero--tpl .dims {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.dashboard-v2 .hero--tpl .dim {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 12px 14px;
}
.dashboard-v2 .hero--tpl .dim .lb {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
    color: rgba(255,255,255,.6); font-weight: 600; margin-bottom: 4px;
}
.dashboard-v2 .hero--tpl .dim .v {
    font-family: 'Geist', sans-serif;
    font-size: 26px; font-weight: 700; letter-spacing: -.02em;
    line-height: 1; color: #fff;
}
.dashboard-v2 .hero--tpl .dim .v small {
    font-size: 12px; font-weight: 500; color: rgba(255,255,255,.55); margin-left: 3px;
}

/* ─────────────── Layout grid : params (top) / preview ↔ html / vars (bottom right) ─────────────── */
.dashboard-v2 .tpl-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-areas:
        "params  params"
        "preview html"
        "preview vars";
    grid-template-rows: auto auto 1fr;
    gap: 14px;
    margin-top: 14px;
    align-items: start;
}
.dashboard-v2 .tpl-grid > .tpl-area-params  { grid-area: params; }
.dashboard-v2 .tpl-grid > .tpl-area-preview { grid-area: preview; }
.dashboard-v2 .tpl-grid > .tpl-area-html    { grid-area: html; }
.dashboard-v2 .tpl-grid > .tpl-area-vars    { grid-area: vars; }

@media (max-width: 1199.98px) {
    .dashboard-v2 .tpl-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "params"
            "preview"
            "html"
            "vars";
    }
}

/* ─────────────── Dual preview pair (recto / verso) it#378 ─────────────── */
.dashboard-v2 .tpl-preview-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}
.dashboard-v2 .tpl-preview-pair > .tpl-preview-face {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dashboard-v2 .tpl-preview-legend {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--dv2-text-muted);
}
@media (max-width: 768px) {
    .dashboard-v2 .tpl-preview-pair { flex-direction: column; }
    .dashboard-v2 .tpl-preview-pair > .tpl-preview-face { flex: 1 1 100%; }
}

/* ─────────────── Preview stage ─────────────── */
.dashboard-v2 .tpl-stage {
    padding: 18px 18px 14px;
    background:
        linear-gradient(rgba(0,159,227,.06) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(90deg, rgba(0,159,227,.06) 1px, transparent 1px) 0 0 / 16px 16px,
        var(--dv2-surface-2);
    border-top: 1px solid var(--dv2-border);
    overflow: auto;
    max-height: 70vh;
    position: relative;
}
[data-theme="dark"] .dashboard-v2 .tpl-stage {
    background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 16px 16px,
        var(--dv2-surface-2);
}

.dashboard-v2 .tpl-frame-host {
    transform: scale(var(--preview-zoom, 1));
    transform-origin: top left;
    transition: transform 220ms var(--dv2-ease);
    box-shadow:
        0 1px 0 rgba(0,0,0,0.04),
        0 12px 32px -8px rgba(0,0,0,0.18);
    border-radius: 4px;
}
.dashboard-v2 .tpl-frame-host iframe {
    background: white;
    border: 0;
    border-radius: 4px;
    display: block;
}

.dashboard-v2 .tpl-zoom {
    display: flex; align-items: center; gap: 10px;
}
.dashboard-v2 .tpl-zoom label {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 600; color: var(--dv2-text-muted); margin: 0;
}
.dashboard-v2 .tpl-zoom input[type=range] {
    accent-color: var(--ink-magenta);
    width: 120px; height: 4px;
}
.dashboard-v2 .tpl-zoom .readout {
    font-family: 'Geist Mono', monospace;
    font-size: 12px; font-weight: 500;
    color: var(--dv2-text);
    min-width: 3.2rem; text-align: right;
    font-variant-numeric: tabular-nums;
}
.dashboard-v2 .tpl-stage-foot {
    padding: 10px 16px;
    border-top: 1px solid var(--dv2-border);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11.5px; color: var(--dv2-text-muted);
    font-family: 'Geist Mono', monospace;
}
.dashboard-v2 .tpl-stage-foot strong { color: var(--dv2-text); font-weight: 600; }

/* ─────────────── Params form ─────────────── */
.dashboard-v2 .tpl-form {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.dashboard-v2 .tpl-form .full { grid-column: 1 / -1; }
/* Inline mode (top, full-width row) : 7 colonnes pour aligner sur une seule ligne */
.dashboard-v2 .tpl-form--inline {
    grid-template-columns: 2fr 1fr 1fr 1.4fr 1.6fr auto auto;
    align-items: end;
}
@media (max-width: 1199.98px) {
    .dashboard-v2 .tpl-form--inline {
        grid-template-columns: 1fr 1fr;
    }
}
.dashboard-v2 .tpl-form .form-label {
    display: block;
    font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--dv2-text-muted); font-weight: 600; margin-bottom: 5px;
}
.dashboard-v2 .tpl-form .form-control,
.dashboard-v2 .tpl-form .form-select {
    width: 100%;
    background: var(--dv2-surface-2);
    border: 1px solid var(--dv2-border);
    border-radius: var(--dv2-radius-sm);
    color: var(--dv2-text);
    font-size: 13.5px;
    padding: 8px 10px;
    font-family: inherit;
    transition: all .15s var(--dv2-ease);
}
.dashboard-v2 .tpl-form .form-control:focus,
.dashboard-v2 .tpl-form .form-select:focus {
    outline: 0;
    border-color: var(--ink-magenta);
    box-shadow: 0 0 0 3px rgba(230,0,126,.12);
    background: var(--dv2-surface);
}
.dashboard-v2 .tpl-form .form-check {
    display: flex; align-items: center; gap: 8px;
    background: var(--dv2-surface-2);
    border: 1px solid var(--dv2-border);
    border-radius: var(--dv2-radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    transition: all .15s var(--dv2-ease);
}
.dashboard-v2 .tpl-form .form-check:hover {
    border-color: var(--dv2-border-strong);
}
.dashboard-v2 .tpl-form .form-check label {
    margin: 0; font-size: 13px; font-weight: 500; cursor: pointer;
}
.dashboard-v2 .tpl-form .form-check-input {
    margin: 0; cursor: pointer;
    accent-color: var(--ink-magenta);
}
.dashboard-v2 .tpl-form .form-text,
.dashboard-v2 .tpl-form .text-muted {
    font-size: 11.5px; color: var(--dv2-text-muted); margin-top: 4px; display: block;
}

/* ─────────────── Variables panel ─────────────── */
.dashboard-v2 .tpl-vars-card { margin-top: 14px; }
.dashboard-v2 .tpl-vars-list {
    max-height: 380px; overflow-y: auto;
    padding: 4px 6px 8px;
}
.dashboard-v2 .tpl-vars-list .var-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px; align-items: center;
    padding: 8px 10px;
    border-radius: var(--dv2-radius-sm);
    transition: background .12s var(--dv2-ease);
}
.dashboard-v2 .tpl-vars-list .var-item:hover {
    background: var(--dv2-surface-2);
}
.dashboard-v2 .tpl-vars-list .var-insert {
    width: 28px; height: 28px;
    border-radius: 7px;
    border: 1px solid var(--dv2-border);
    background: var(--dv2-surface);
    color: var(--dv2-text);
    font-family: 'Geist Mono', monospace;
    font-weight: 600;
    cursor: pointer;
    display: grid; place-items: center;
    transition: all .15s var(--dv2-ease);
}
.dashboard-v2 .tpl-vars-list .var-insert:hover {
    background: linear-gradient(135deg, var(--gel-ink-blue), var(--ink-magenta));
    color: white;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230,0,126,.25);
}
.dashboard-v2 .tpl-vars-list code {
    font-family: 'Geist Mono', monospace;
    font-size: 12px; font-weight: 500;
    color: var(--ink-magenta);
    background: transparent;
    padding: 0;
}
.dashboard-v2 .tpl-vars-list .desc {
    display: block;
    font-size: 11.5px;
    color: var(--dv2-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

/* ─────────────── HTML editor (terminal feel) ─────────────── */
.dashboard-v2 .tpl-editor-card { margin-top: 14px; }
.dashboard-v2 .tpl-editor-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 16px;
    background: var(--dv2-surface-2);
    border-bottom: 1px solid var(--dv2-border);
    font-family: 'Geist Mono', monospace;
    font-size: 11.5px;
}
.dashboard-v2 .tpl-editor-bar .dots { display: flex; gap: 5px; }
.dashboard-v2 .tpl-editor-bar .dots span {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--dv2-border-strong);
}
.dashboard-v2 .tpl-editor-bar .dots span:nth-child(1) { background: var(--ink-red); }
.dashboard-v2 .tpl-editor-bar .dots span:nth-child(2) { background: var(--ink-orange); }
.dashboard-v2 .tpl-editor-bar .dots span:nth-child(3) { background: var(--ink-green); }
.dashboard-v2 .tpl-editor-bar .filename {
    color: var(--dv2-text-muted);
    flex: 1;
}
.dashboard-v2 .tpl-editor-bar .dirty {
    display: flex; align-items: center; gap: 6px;
    color: var(--ink-orange);
    font-weight: 600;
}
.dashboard-v2 .tpl-editor-bar .dirty .dot {
    width: 7px; height: 7px;
    background: var(--ink-orange);
    border-radius: 50%;
    animation: tpl-pulse 1.4s ease-in-out infinite;
}
@keyframes tpl-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}

.dashboard-v2 textarea[data-template-preview-target="source"] {
    width: 100%;
    background: #0F1118;
    color: #E8EAF0;
    border: 0;
    border-radius: 0;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 12.5px;
    line-height: 1.65;
    padding: 16px 18px;
    resize: vertical;
    min-height: 380px;
    display: block;
}
.dashboard-v2 textarea[data-template-preview-target="source"]:focus {
    outline: 0;
    box-shadow: inset 3px 0 0 var(--ink-magenta);
}
.dashboard-v2 textarea[data-template-preview-target="source"]::selection {
    background: rgba(230,0,126,.45); color: #fff;
}

.dashboard-v2 .tpl-readonly {
    margin: 0;
    background: #0F1118;
    color: #E8EAF0;
    font-family: 'Geist Mono', monospace;
    font-size: 12.5px;
    line-height: 1.65;
    padding: 16px 18px;
    max-height: 460px;
    overflow: auto;
}

/* ─────────────── Read-only banner ─────────────── */
.dashboard-v2 .tpl-readonly-banner {
    margin: 14px 16px;
    padding: 12px 14px;
    border-radius: var(--dv2-radius-sm);
    border: 1px solid var(--dv2-border);
    border-left: 3px solid var(--ink-cyan);
    background: rgba(0,159,227,.04);
    font-size: 13px;
    color: var(--dv2-text);
}

/* ─────────────── Submit bar ─────────────── */
.dashboard-v2 .tpl-submit-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--dv2-surface);
    border: 1px solid var(--dv2-border);
    border-radius: var(--dv2-radius);
    box-shadow: var(--dv2-shadow-md);
    display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
.dashboard-v2 .tpl-submit-bar .spacer { flex: 1; }
.dashboard-v2 .tpl-submit-bar .hint {
    font-size: 11.5px; color: var(--dv2-text-muted);
    font-family: 'Geist Mono', monospace;
}

@media (max-width: 767.98px) {
    .dashboard-v2 .tpl-stage { max-height: 50vh; padding: 12px; }
    .dashboard-v2 .tpl-form { grid-template-columns: 1fr; }
    .dashboard-v2 .tpl-submit-bar { position: static; }
    .dashboard-v2 .hero.hero--tpl { grid-template-columns: 1fr; }
}