/*
 * Shared document stylesheet: how a template-built document (certificate, invoice, quote, entry notice ...) looks.
 *
 * One source for both consumers: the UI loads it ahead of rentsafe.css (so the template editor and the report views show a document exactly as
 * it prints), and PrecisionFW bundles it into the jar as /pfw-document.css for PdfRenderer. It holds content/layout rules only; editor chrome
 * (the on-screen paper, dashed zone/block outlines, hover and selection styling, toolbars) stays in the app stylesheet, which loads later and
 * layers it on top. Keep this file to selectors on the classes a saved document contains; PD4ML reads it too, so stick to CSS it supports.
 */
.template-editor__document {
    background: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
}

.template-editor-block {
    min-height: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border-radius: 0;
    border: none;
    position: relative;
}

.template-editor-field-ref {
    font-size: 0.78rem;
    font-family: monospace;
    padding: 3px 6px;
    background: var(--md-sys-color-surface-container);
    border-radius: 4px;
    margin-bottom: 3px;
    color: var(--md-sys-color-on-surface-variant);
    cursor: default;
}

.template-editor-zone--header,
.template-editor-zone--body,
.template-editor-zone--footer {
    outline: none;
}

.template-editor-zone--body {
    flex: 1;
}

.template-editor-zone--header,
.template-editor-zone--footer {
    min-height: 60px;
}

.template-editor-inline-field {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: 3px;
    padding: 0 4px;
    cursor: pointer;
    font-style: italic;
    white-space: nowrap;
    user-select: none;
}

.template-editor-inline-field:empty::before {
    content: '⋯';
    opacity: 0.6;
}

.template-editor__document ul,
.template-editor-static-text ul {
    list-style: disc;
    padding-left: 1.5em;
}

.template-editor__document ol,
.template-editor-static-text ol {
    list-style: decimal;
    padding-left: 1.5em;
}

.template-editor-image-el {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
    transition: outline 0.1s;
}

.template-editor-image-el {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 80px;
}

.template-editor-table-el {
    position: relative;
    border: 1px dashed transparent;
    transition: border-color 0.15s;
    overflow: hidden;
    width: 100%;
}

.template-editor-table-el__header,
.template-editor-table-el__row {
    display: flex;
}

.template-editor-table-el__header[hidden] {
    display: none;
}

.template-editor-table-el--border-none .template-editor-table-el__th,
.template-editor-table-el--border-none .template-editor-table-el__td {
    border: none;
    background: none;
}

.template-editor-table-el--border-none .template-editor-table-el__footer-cell {
    border: none;
}

.template-editor-table-el--border-none .template-editor-table-el__footer-row:first-child {
    border-top: none;
}

.template-editor-table-el--border-hlines .template-editor-table-el__th,
.template-editor-table-el--border-hlines .template-editor-table-el__td {
    border: none;
    background: none;
}

.template-editor-table-el--border-hlines .template-editor-table-el__footer-cell {
    border: none;
}

.template-editor-table-el--border-hlines .template-editor-table-el__header {
    border-bottom: 1px solid #e0e0e0;
}

.template-editor-table-el--border-hlines .template-editor-table-el__footer-row:first-child {
    border-top: 1px solid #e0e0e0;
}

.template-editor-table-el--border-rows .template-editor-table-el__th,
.template-editor-table-el--border-rows .template-editor-table-el__td {
    border: none;
    background: none;
}

.template-editor-table-el--border-rows .template-editor-table-el__footer-cell {
    border: none;
}

.template-editor-table-el--border-rows {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.template-editor-table-el--border-rows .template-editor-table-el__header {
    border-bottom: 1px solid #e0e0e0;
}

.template-editor-table-el--border-rows .template-editor-table-el__footer-row:first-child {
    border-top: 1px solid #e0e0e0;
}

.template-editor-table-el--border-box .template-editor-table-el__th,
.template-editor-table-el--border-box .template-editor-table-el__td {
    border: none;
    background: none;
}

.template-editor-table-el--border-box .template-editor-table-el__footer-cell {
    border: none;
}

.template-editor-table-el--border-box .template-editor-table-el__footer-row:first-child {
    border-top: none;
}

.template-editor-table-el--border-box {
    border: 1px solid #e0e0e0;
}

.template-editor-table-el--no-border .template-editor-table-el__th,
.template-editor-table-el--no-border .template-editor-table-el__td {
    border: none;
    background: none;
}

.template-editor-table-el--no-border .template-editor-table-el__footer-cell {
    border: none;
}

.template-editor-table-el--no-border .template-editor-table-el__footer-row:first-child {
    border-top: none;
}

.template-editor-table-el--wrap .template-editor-table-el__th,
.template-editor-table-el--wrap .template-editor-table-el__td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.template-editor-table-el__th,
.template-editor-table-el__td {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    min-width: 0;
    white-space: nowrap;
    box-sizing: border-box;
}

.template-editor-table-el__th {
    position: relative;
    overflow: visible;
    background: #f5f5f5;
    font-weight: 600;
    font-size: 0.8em;
    cursor: pointer;
}

.template-editor-table-el__td {
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.template-editor-table-el__footer:empty::after {
    content: 'Click to add footer row';
    display: block;
    padding: 6px 8px;
    font-size: 0.8em;
    font-style: italic;
    color: var(--md-sys-color-outline, #aaa);
    border-top: 2px solid var(--md-sys-color-outline-variant, #ccc);
    min-height: 32px;
    box-sizing: border-box;
    cursor: pointer;
}

.template-editor-table-el__footer-row {
    display: flex;
    align-items: center;
    cursor: default;
    transition: background 0.1s;
    min-height: 24px;
    position: relative;
}

.template-editor-table-el__footer-row:first-child {
    border-top: 2px solid var(--md-sys-color-outline-variant, #ccc);
}

.template-editor-table-el__footer-cell {
    flex: 1;
    padding: 0 8px;
    border: 1px solid #e0e0e0;
    min-width: 0;
    min-height: 24px;
    box-sizing: border-box;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
    cursor: pointer;
}