
/* Existing blue/white system; compact KPI columns and normal-flow template footers. */
#app[data-surface=kpi] .kpi-wrap .kpi-table8{width:100%;min-width:940px;table-layout:fixed}
#app[data-surface=kpi] .kpi-table8 td[data-column="2"]{text-align:left!important;overflow-wrap:break-word}
#app[data-surface=kpi] .kpi-note7{padding:8px;vertical-align:top!important}
.kpi-manual-note8{min-height:32px;white-space:pre-wrap;overflow-wrap:anywhere;outline-offset:2px}
.kpi-manual-note8:empty::before{content:attr(data-placeholder);color:var(--a-muted,#52647a);pointer-events:none}
.kpi-manual-note8:focus{outline:2px solid var(--a-blue,#0065e8)}
.journal-linked8{margin-top:8px;padding-top:8px;border-top:1px solid var(--a-border,#d6e0ed);white-space:pre-wrap;overflow-wrap:anywhere}
.journal-linked8 strong{display:block;font-size:14px;font-weight:500}
.journal-kpi-hint8{margin:12px 0}
#app[data-surface=templates] .template-table8{width:100%;min-width:940px;table-layout:fixed}
#app[data-surface=templates] .template-table8 td{min-width:0;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;height:auto;padding:8px}
#app[data-surface=templates] .template-wrap8{overflow-x:auto}
.template-footer8{margin-top:20px;padding-top:16px;border-top:1px solid var(--a-border,#d6e0ed);min-width:0}
.template-footer8 h2{margin:0 0 12px}
.template-footer-row8{margin:12px 0;min-width:0}
.template-footer-row8 [contenteditable]{min-height:30px;white-space:pre-wrap;overflow-wrap:break-word;line-height:1.6}
.template-footer-row8 [contenteditable]:focus{outline:2px solid var(--a-blue,#0065e8);outline-offset:2px}
.journal-form8{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--a-border,#d6e0ed)}
.journal-form8 .filters{align-items:flex-end}
.journal-form8 label:not(.journal-check8){display:flex;flex-direction:column;gap:6px}
.journal-form8 [name=deduction]{width:120px}
.journal-form8 .journal-check8{display:flex;align-items:center;gap:6px;min-height:36px}
.journal-content8{margin:12px 0;width:100%}
.journal-content8 textarea{width:100%;box-sizing:border-box;min-height:72px;resize:vertical;font:inherit;color:inherit}
#app[data-surface=journal] .journal-table8{min-width:940px;table-layout:fixed}
#app[data-surface=journal] .journal-event8{white-space:pre-wrap;overflow-wrap:anywhere}
#app[data-surface=journal] .journal-table8 td{vertical-align:top}

/* Keep journal fields and checkbox on the same baseline. */
.journal-form8 > .filters:first-child{align-items:center;gap:12px}
.journal-form8 > .filters:first-child > label{flex-direction:row;align-items:center;gap:8px;margin:0;white-space:nowrap}
.journal-form8 > .filters:first-child input:not([type=checkbox]){height:36px;box-sizing:border-box}
.journal-form8 > .filters:first-child .journal-check8{min-height:36px}
.carry-note10{margin:0 0 12px}

/* Merged cells must retain their logical grid edges, even when they are
   the last DOM cell in a row occupied by rowspans from earlier rows. */
#app[data-surface="templates"] .template-wrap8 > table.template-table8{
 width:100%;min-width:940px;table-layout:fixed;border-collapse:collapse;border-spacing:0
}
#app[data-surface="templates"] .template-wrap8 > table.template-table8 th,
#app[data-surface="templates"] .template-wrap8 > table.template-table8 td{
 border:1px solid var(--a-border,#d6e0ed);min-width:0;white-space:normal;overflow-wrap:break-word
}
#app[data-surface="templates"] .template-table8 td[data-template-cell6^="A"],
#app[data-surface="templates"] .template-table8 td[data-template-cell6^="G"]{
 text-align:center;vertical-align:middle
}
#app[data-surface="templates"] .template-table8 td[data-template-cell6^="F"]{text-align:right}
#app[data-surface="templates"] .template-wrap8{overflow-x:auto;max-height:none}
#app[data-surface="kpi"] .kpi-table8 td,
#app[data-surface="kpi"] .kpi-table8 th,
#app[data-surface="payroll"] .workbook-grid4 td,
#app[data-surface="payroll"] .workbook-grid4 th{
 border-right:1px solid var(--a-border,#d6e0ed);border-bottom:1px solid var(--a-border,#d6e0ed)
}

/* Keep the Save action inside the page when the side panel is narrow. */
#app .pagehead > .actions{flex-wrap:wrap;max-width:100%;min-width:0;justify-content:flex-end}
#app[data-surface="templates"] .template-table8 th:first-child{padding-inline:6px;white-space:nowrap}
