/* NIPI-057, NIPI-060: шаблоны документов — реестр и редактор макета A4 */
.tpl-default { background: var(--primary-soft, #e8edf8); color: var(--primary); }
.tpl-registry .actions { white-space: nowrap; }

.tpl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.tpl-toolbar #tpl-name { min-width: 220px; flex: 0 1 340px; }
.tpl-toolbar .checkbox { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.tpl-spacer { flex: 1; }

.tpl-workspace { display: flex; gap: 14px; align-items: flex-start; }
.tpl-structure { flex: 0 0 210px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 12px; }
.tpl-structure .card-title { margin: 0 0 8px; font-size: 14px; }
.tpl-tree, .tpl-tree ul { list-style: none; margin: 0; padding: 0; }
.tpl-tree ul { padding-left: 12px; border-left: 1px dotted #c9d1de; margin-left: 4px; }
.tpl-ti { padding: 3px 6px; border-radius: 4px; cursor: pointer; font-size: 12.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-ti:hover { background: rgba(38, 71, 150, .07); }
.tpl-ti.active { background: var(--primary); color: #fff; }
.tpl-ti:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.tpl-ti-item { color: #6b4d00; }
.tpl-ti-group { cursor: default; color: #667; font-size: 12px; }
.tpl-tag { font-size: 10.5px; opacity: .75; }

.tpl-canvas { flex: 0 1 auto; min-width: 0; overflow: auto; padding: 16px; background: #e6e9ef; border-radius: var(--radius); }
.tpl-panel { flex: 1 1 340px; min-width: 300px; max-width: 470px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: hidden;
  display: flex; flex-direction: column; padding: 0; }
.tpl-tabs { padding: 8px 12px 0; flex: 0 0 auto; }
.tpl-panel-body { overflow: auto; padding: 12px 14px 16px; }
.tpl-panel label { display: block; margin-bottom: 8px; font-size: 13px; }
.tpl-panel label > input:not([type=checkbox]):not([type=color]), .tpl-panel label > select, .tpl-panel label > textarea { display: block; width: 100%; margin-top: 3px; }
.tpl-panel .card-title { margin: 14px 0 8px; font-size: 14px; }
.tpl-panel .card-title:first-child { margin-top: 0; }
.tpl-panel .checkbox { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.tpl-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.tpl-group, .tpl-sides { border: 1px solid #e3e7ee; border-radius: 6px; padding: 6px 10px 4px; margin: 0 0 10px; min-width: 0; }
.tpl-group legend, .tpl-sides legend { font-size: 12px; color: #556; padding: 0 4px; }
.tpl-sides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tpl-sides label { margin: 0 0 4px; font-size: 11.5px; }
.tpl-sides input { width: 100% !important; }
.tpl-two { display: grid; grid-template-columns: 1fr; gap: 0; }
.tpl-inline-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 6px; }
.tpl-inline-row > label { margin-bottom: 0; }
.tpl-inline-row input[type=number] { width: 84px !important; }
.tpl-grow { flex: 1 1 140px; }
.tpl-panel input[type=color] { display: inline-block; width: 38px; height: 28px; padding: 1px; vertical-align: middle; }
.tpl-vars, .tpl-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; }
.tpl-split-ctl { display: inline-flex; gap: 4px; align-items: center; }
.tpl-split-ctl input { width: 52px; }
.tpl-warn { color: #a03b00; font-size: 12px; margin: 4px 0; }
.tpl-rte-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; }
.tpl-rte-bar select { max-width: 150px; }
.tpl-rte-bar input[type=number] { width: 62px; }
.tpl-rte { min-height: 90px; max-height: 260px; overflow: auto; border: 1px solid var(--border, #ccd3df); border-radius: 6px; padding: 6px 8px; background: #fff;
  font-family: "tpl-sans", "DejaVu Sans", Arial, sans-serif; font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.tpl-rte:focus { outline: 2px solid var(--primary); outline-offset: 0; }
.tpl-cells { display: grid; gap: 3px; margin-top: 6px; }
.tpl-cells textarea { width: 100%; min-height: 28px; font-size: 12px; padding: 3px 4px; resize: vertical; }
.tpl-fonts { list-style: none; margin: 0 0 10px; padding: 0; }
.tpl-fonts li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid #eef1f5; }
.tpl-fonts li .btn { margin-left: auto; }
.tpl-font-form { border-top: 1px solid #e3e7ee; padding-top: 10px; }

/* Лист: абсолютная раскладка в мм (масштаб задаёт templates-editor.js), совпадает с PDF */
.tpl-page { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(16, 24, 40, .18); color: #111; overflow: hidden; touch-action: none; user-select: none; }
.tpl-page.tpl-grid { background-image: linear-gradient(rgba(38, 71, 150, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 71, 150, .08) 1px, transparent 1px); }
.tpl-guide { position: absolute; outline: 1px dashed #c9d1de; pointer-events: none; }
.tpl-n { position: absolute; box-sizing: border-box; }
.tpl-box { outline: 1px dashed transparent; }
.tpl-box.selected { outline: 2px dashed var(--primary); outline-offset: -1px; }
.tpl-block { z-index: 20; cursor: pointer; outline: 1px dotted #d6dce6; outline-offset: -1px; }
.tpl-block:hover { background-color: rgba(38, 71, 150, .04); }
.tpl-block.selected { background-color: rgba(38, 71, 150, .06); }
.tpl-repeat.tpl-block, .tpl-repeat .tpl-block { background-image: linear-gradient(90deg, rgba(0, 171, 202, .07), transparent 40%); }
.tpl-bl { position: absolute; display: block; pointer-events: none; }
.tpl-text { position: absolute; overflow: hidden; overflow-wrap: anywhere; white-space: normal; }
.tpl-body { background: repeating-linear-gradient(180deg, transparent 0 14px, #eef1f6 14px 15px); }
.tpl-img { position: absolute; object-fit: contain; pointer-events: none; }
.tpl-img-empty { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px dashed #b7bfcc; color: #8a94a6; font-size: 10px; box-sizing: border-box; }
.tpl-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tpl-table td { vertical-align: top; overflow-wrap: anywhere; }
.tpl-placeholder { color: #8a94a6; font-style: italic; font-size: 11px; font-weight: 400; }
.tpl-var { display: inline; padding: 0 3px; border-radius: 3px; background: #e1ecfb; color: #1b3570; }
.tpl-qr { position: absolute; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed #556; color: #556; font-size: 10px; background: #fafbfc; box-sizing: border-box; }
.tpl-qr.tpl-off { opacity: .45; }
.tpl-qr-corner { z-index: 30; }
.tpl-margin-sign { position: absolute; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 9px; color: #667; border: 1px dashed #b7bfcc; box-sizing: border-box; }
.tpl-split { position: absolute; z-index: 40; }
.tpl-split-rows { margin-top: -3px; height: 6px !important; cursor: row-resize; }
.tpl-split-cols { margin-left: -3px; width: 6px !important; cursor: col-resize; }
.tpl-split:hover { background: rgba(38, 71, 150, .35); }
.tpl-item { position: absolute; z-index: 50; cursor: move; outline: 1px dashed rgba(160, 100, 0, .55); outline-offset: -1px; }
.tpl-item.selected { outline: 2px solid #c27c0e; }
.tpl-ih { position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid #c27c0e; box-sizing: border-box; z-index: 2; }
.tpl-ih-n, .tpl-ih-s { left: calc(50% - 4px); cursor: ns-resize; }
.tpl-ih-e, .tpl-ih-w { top: calc(50% - 4px); cursor: ew-resize; }
.tpl-ih-n, .tpl-ih-ne, .tpl-ih-nw { top: -4px; }
.tpl-ih-s, .tpl-ih-se, .tpl-ih-sw { bottom: -4px; }
.tpl-ih-e, .tpl-ih-ne, .tpl-ih-se { right: -4px; }
.tpl-ih-w, .tpl-ih-nw, .tpl-ih-sw { left: -4px; }
.tpl-ih-ne, .tpl-ih-sw { cursor: nesw-resize; }
.tpl-ih-nw, .tpl-ih-se { cursor: nwse-resize; }
.tpl-sel { position: absolute; z-index: 60; outline: 2px solid var(--primary); outline-offset: -1px; pointer-events: none; }
.tpl-eh, .tpl-grip { position: absolute; pointer-events: auto; box-sizing: border-box; }
.tpl-eh { width: 12px; height: 12px; background: #fff; border: 2px solid var(--primary); border-radius: 2px; }
.tpl-eh-top { top: -6px; left: calc(50% - 6px); cursor: row-resize; }
.tpl-eh-bottom { bottom: -6px; left: calc(50% - 6px); cursor: row-resize; }
.tpl-eh-left { left: -6px; top: calc(50% - 6px); cursor: col-resize; }
.tpl-eh-right { right: -6px; top: calc(50% - 6px); cursor: col-resize; }
.tpl-grip { left: -1px; top: -1px; width: 18px; height: 18px; background: var(--primary); color: #fff; font-size: 12px; line-height: 18px; text-align: center; cursor: grab; border-radius: 0 0 4px 0; }
.tpl-size { position: absolute; right: 0; bottom: 0; background: rgba(23, 37, 84, .85); color: #fff; font: 10px/1.4 Arial, sans-serif; padding: 0 4px; border-radius: 3px 0 0 0; pointer-events: none; white-space: nowrap; }
.tpl-item .tpl-size { background: rgba(140, 85, 0, .9); }
.tpl-drop { position: absolute; z-index: 70; background: rgba(0, 150, 200, .28); border: 2px solid #0096c8; box-sizing: border-box; pointer-events: none; }
.tpl-badge { position: absolute; z-index: 80; background: #172554; color: #fff; font: 11px/1.4 Arial, sans-serif; padding: 2px 6px; border-radius: 4px; pointer-events: none; white-space: nowrap; }
body.tpl-dragging, body.tpl-dragging * { cursor: grabbing !important; }

@media (max-width: 1100px) {
  .tpl-workspace { flex-direction: column; }
  .tpl-structure { display: block; position: static; width: 100%; max-height: 240px; }
  .tpl-panel { position: static; max-width: none; width: 100%; max-height: none; }
  .tpl-canvas { max-width: 100%; }
}
.tpl-canvas:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }