/* PDF template designer. Scoped .razor.css is not loaded in this app, so these live here. */

.pd-root {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 90px);
    min-height: 520px;
    background: #f4f5f7;
}

.pd-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border-bottom: 1px solid #dfe5f0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.pd-name { font-weight: 600; color: #17233f; }
.pd-status { color: #8b97ad; font-size: 0.8rem; }
.pd-toolbar-spacer { flex: 1 1 auto; }
.pd-records { min-width: 220px; }
.pd-errors { margin: 0.5rem 0.75rem 0; }
.pd-errors ul { margin: 0; padding-left: 1.1rem; }

.pd-loading { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }

.pd-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 300px 1fr 360px;
    min-height: 0;
}

.pd-pane { background: #fff; border-left: 1px solid #dfe5f0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pd-left { border-left: none; border-right: 1px solid #dfe5f0; }
.pd-center { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ------------------------------------------------------------------ canvas */

.pd-canvas-bar {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.6rem; background: #eef1f6; border-bottom: 1px solid #dfe5f0;
    flex-wrap: wrap; flex-shrink: 0;
}

.pd-canvas-spacer { flex: 1 1 auto; }
.pd-zoom { font-variant-numeric: tabular-nums; color: #5b6982; min-width: 3rem; text-align: center; }
.pd-toggle { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: #5b6982; }
.pd-hint { font-size: 0.75rem; color: #8b97ad; }

.pd-canvas-scroll { flex: 1 1 auto; overflow: auto; background: #525659; padding: 14px; }
.pd-canvas-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: #cfd6e4; }
.pd-canvas-note {
    max-width: 640px; margin: 0 auto 10px; padding: 6px 10px; border-radius: 6px;
    background: #fff5d6; color: #6b5300; font-size: 0.78rem; text-align: center;
}

.pd-page {
    position: relative; margin: 0 auto 14px; background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4); touch-action: none;
}

.pd-page-canvas { display: block; width: 100%; height: 100%; }

/* Overlay boxes are Blazor markup, not DOM the JS builds — selection and hover stay in C#. */
.pd-widget {
    position: absolute; box-sizing: border-box; cursor: pointer;
    border: 1.5px solid rgba(120, 132, 158, .8); background: rgba(120, 132, 158, .10);
}

.pd-widget.pd-mapped { border-color: rgba(31, 138, 76, .95); background: rgba(31, 138, 76, .14); }
.pd-widget.pd-unmapped { border-style: dashed; }
.pd-widget:hover { background: rgba(255, 196, 0, .35); }
.pd-widget.pd-selected { border-color: #1f6feb; background: rgba(31, 111, 235, .28); box-shadow: 0 0 0 2px rgba(31, 111, 235, .35); }

.pd-widget-tag {
    position: absolute; top: -15px; left: -1px; font-size: 9px; line-height: 14px;
    background: #333; color: #fff; padding: 0 4px; white-space: nowrap;
    display: none; border-radius: 2px; pointer-events: none; z-index: 3;
}

.pd-widget:hover .pd-widget-tag, .pd-widget.pd-selected .pd-widget-tag { display: block; }

.pd-sign {
    position: absolute; box-sizing: border-box; cursor: move;
    border: 2px solid #b3541e; background: rgba(179, 84, 30, .16);
}

.pd-sign.pd-selected { box-shadow: 0 0 0 2px rgba(179, 84, 30, .45); }
.pd-sign-tag { position: absolute; top: -15px; left: -2px; font-size: 9px; line-height: 14px; background: #b3541e; color: #fff; padding: 0 4px; white-space: nowrap; border-radius: 2px; }

.pd-sign-handle {
    position: absolute; right: -5px; bottom: -5px; width: 11px; height: 11px;
    background: #b3541e; border: 1px solid #fff; cursor: nwse-resize; border-radius: 2px;
}

/* The rubber-band preview the drag helper appends. */
.pd-drag-preview {
    position: absolute; border: 2px dashed #b3541e;
    background: rgba(179, 84, 30, .18); pointer-events: none; z-index: 4;
}

/* ------------------------------------------------------------------ lists */

.pd-list, .pd-catalog, .pd-testfill { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.pd-list-search, .pd-catalog-head { padding: 0.5rem; border-bottom: 1px solid #eef1f6; }
.pd-search-box { width: 100%; }
.pd-list-scroll, .pd-catalog-scroll, .pd-testfill-scroll { flex: 1 1 auto; overflow: auto; }

.pd-group { padding: 0.5rem 0.6rem 0.25rem; display: flex; flex-direction: column; }
.pd-group-warn { background: #fff5f4; }
.pd-group-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5b6982; }
.pd-group-note { font-size: 0.72rem; color: #8b97ad; }

.pd-row {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem;
    cursor: pointer; border-left: 3px solid transparent; font-size: 0.8rem;
}

.pd-row:hover { background: #f2f6ff; }
.pd-row.pd-selected { background: #e6efff; border-left-color: #1f6feb; }
.pd-row-orphan { background: #fff8f7; }
.pd-row-unmapped { color: #6b7689; }
.pd-row-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-row-target { font-size: 0.72rem; color: #8b97ad; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-row-empty { font-style: italic; color: #c0562f; }
.pd-empty-row { padding: 0.6rem; color: #8b97ad; font-size: 0.78rem; }

/* ------------------------------------------------------------------ properties */

.pd-props { padding: 0.6rem; overflow: auto; }
.pd-props-head { margin-bottom: 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; }
.pd-props-title { font-weight: 600; color: #17233f; word-break: break-word; }
.pd-props-sub { font-size: 0.75rem; color: #8b97ad; }

.pd-field { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.7rem; flex: 1 1 0; min-width: 0; }
.pd-field > label { font-size: 0.72rem; font-weight: 600; color: #5b6982; }
.pd-field-row { display: flex; gap: 0.5rem; }
.pd-input { width: 100%; }
.pd-note { font-size: 0.7rem; color: #8b97ad; }
.pd-note code, .pd-group-note code { background: #eef1f6; padding: 0 3px; border-radius: 3px; }

.pd-props-actions { margin-top: 0.5rem; }
.pd-warnings { margin-top: 0.8rem; border-top: 1px solid #eef1f6; padding-top: 0.6rem; }
.pd-warning { font-size: 0.74rem; color: #8a6100; background: #fff8e5; padding: 4px 6px; border-radius: 4px; margin-top: 4px; }

.pd-functions { border-top: 1px solid #eef1f6; padding-top: 0.5rem; margin-top: 0.3rem; }
.pd-function-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.pd-function {
    border: 1px solid #d7deea; background: #fff; border-radius: 4px; cursor: pointer;
    font-size: 0.72rem; padding: 2px 7px; color: #33415c;
}
.pd-function:hover { background: #eef4ff; border-color: #1f6feb; }

/* ------------------------------------------------------------------ test fill */

.pd-testfill-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-bottom: 1px solid #eef1f6; }
.pd-testfill-summary { display: flex; flex-wrap: wrap; gap: 4px; padding: 0.5rem; }

.pd-chip { font-size: 0.7rem; padding: 2px 7px; border-radius: 10px; background: #eef1f6; color: #4a5468; }
.pd-chip-filled { background: #e3f5e9; color: #1f6b3d; }
.pd-chip-error, .pd-chip-fieldnotfound { background: #fdecea; color: #a32316; }
.pd-chip-conditionfalse, .pd-chip-novaluesource, .pd-chip-novalue { background: #fff5d6; color: #6b5300; }

.pd-testfill-row {
    display: flex; gap: 0.5rem; padding: 0.28rem 0.6rem; font-size: 0.78rem;
    border-left: 3px solid transparent; cursor: pointer;
}
.pd-testfill-row:hover { background: #f2f6ff; }
.pd-testfill-row.pd-selected { background: #e6efff; border-left-color: #1f6feb; }
.pd-testfill-name { flex: 0 0 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #33415c; }
.pd-testfill-value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-testfill-value em { color: #8b97ad; font-style: italic; }

.pd-outcome-error, .pd-outcome-fieldnotfound { border-left-color: #d64545; }
.pd-outcome-novalue, .pd-outcome-novaluesource, .pd-outcome-conditionfalse { border-left-color: #e0a800; }

/* ------------------------------------------------------------------ catalog */

.pd-catalog-row {
    display: flex; width: 100%; gap: 0.5rem; align-items: baseline; text-align: left;
    padding: 0.25rem 0.6rem; border: none; background: none; cursor: pointer; font-size: 0.78rem;
}
.pd-catalog-row:hover { background: #f2f6ff; }
.pd-catalog-path { flex: 1 1 auto; color: #33415c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-catalog-type { font-size: 0.7rem; color: #8b97ad; }

/* ------------------------------------------------------------------ upload */

.pd-upload { display: flex; flex-direction: column; height: 100%; gap: 0.6rem; }
.pd-upload-intro { color: #5b6982; font-size: 0.82rem; margin: 0; }

.pd-upload-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
    border: 2px dashed #c7d1e2; border-radius: 10px; padding: 2rem; cursor: pointer; color: #5b6982;
}
.pd-upload-drop:hover { border-color: #1f6feb; background: #f7faff; }
.pd-upload-drop input[type=file] { display: none; }
.pd-upload-icon { font-size: 1.8rem; opacity: .75; }

.pd-upload-summary { display: flex; flex-wrap: wrap; gap: 5px; }
.pd-upload-scroll { flex: 1 1 auto; overflow: auto; border: 1px solid #eef1f6; border-radius: 8px; }
.pd-upload-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.pd-upload-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

@media (max-width: 1200px) {
    .pd-body { grid-template-columns: 240px 1fr 320px; }
}

/* Published-state badge: "saved" and "live" are different things once consumers read a snapshot. */
.pd-version { font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.pd-version-live { background: #e3f5e9; color: #1f6b3d; }
.pd-version-stale { background: #fff5d6; color: #6b5300; }
.pd-version-none { background: #fdecea; color: #a32316; }