/* CSR Template editor components: the collapsible sections and bindings cards, plus the
   upload dialog form. Split out of clinical-ai-wc.css so this page owns its styles, per
   review on PR #1085.

   Rules whose selector also matches the CSR Linkage editor stay in clinical-ai-wc.css:
   that page belongs to CAI-387 on develop and its cascade should not move with this one. */

/* The upload dialog skips .cai-labelled-form (see LibraryTlfCsrTemplateUploadDialog), so its
   section titles miss the rule above and fall back to the library default — 1rem, Title Case.
   Match .tlf-gov-lbl so WORKBOOK / LIFECYCLE read the same as the embedded GOVERNANCE band. */
[data-testid="library-tlf-csr-template-upload-form"] > .wc-ui-section > .wc-ui-section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5C6878;
    line-height: 1;
}

/* ── CSR Template editor — collapsible sections, bindings as a grid ────────
   These structural classes shipped with no CSS, so a section and its nested
   bindings rendered as one flat run of identically-indented fields with no
   divider, and every field of every binding stayed in the document. Sections
   now collapse to a header row and bindings are a fixed-height grid, so a
   section's height no longer grows with its binding count. Reuses the same
   card border, header band, and label typography as the .wc-ui-section rule
   above. */
.csr-template-editor-form .csr-tpl-sections-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.375rem;
    padding: 0 var(--csr-card-pad) 0.875rem;
}

/* The visible control is the widget's inner shadow-DOM button, which paints its own background,
   padding and radius — styling the host alone left these looking like default buttons. Drive the
   widget's own custom properties instead, same approach as the row controls below. */
.csr-template-editor-form .csr-tpl-toolbar-btn {
    border: 0.0625rem solid #dde3ec;
    background: #fff;
    color: #5C6878;
    border-radius: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1.4;
}

.csr-template-editor-form .csr-tpl-toolbar-btn:hover:not(:disabled) {
    background: #f4f6f9;
    color: #111827;
}

.csr-template-editor-form .csr-tpl-toolbar-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.csr-template-editor-form .csr-tpl-sections-cards {
    display: grid;
    gap: 0.75rem;
}

.csr-template-editor-form .csr-tpl-section-card {
    background: #fff;
    border: 0.0625rem solid #dde3ec;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Whole header is the collapse target; the move/remove cluster stops propagation in Java. */
.csr-template-editor-form .csr-tpl-section-hdr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem var(--csr-card-pad);
    background: #f4f6f9;
    border-bottom: 0.0625rem solid #dde3ec;
    cursor: pointer;
    user-select: none;
}

.csr-template-editor-form .csr-tpl-section-hdr:hover {
    background: #eef2f7;
}

/* nph-button's shadow DOM sizes icon-only padding from --nwc-button-icon-only-padding, not from
   the host's own box model — overriding width/height alone (as below) leaves that shadow padding
   in place, so the chevron rendered low/off-center against csr-tpl-section-title next to it.
   Zeroing the variable plus forcing flex-centering on the host is the same fix already used for
   .project-study-execution-refresh-button. */
.csr-template-editor-form .csr-tpl-section-chevron {
    --nwc-button-icon-only-padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: #8A94A6;
}

.csr-template-editor-form .csr-tpl-section-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5C6878;
    line-height: 1.3;
}

.csr-template-editor-form .csr-tpl-section-count {
    flex-shrink: 0;
    border: 0.0625rem solid #dde3ec;
    border-radius: 1rem;
    background: #fff;
    padding: 0.0625rem 0.5rem;
    font-size: 0.6875rem;
    color: #5C6878;
    line-height: 1.5;
}

/* Compound selector so a later same-specificity rule can never re-show it. */
.csr-template-editor-form .csr-tpl-section-body.csr-tpl-section-body--hidden {
    display: none;
}

/* Bindings sit one level in, behind a left rule. */
.csr-template-editor-form .csr-tpl-bindings {
    margin: 0 var(--csr-card-pad) 0.875rem;
    padding-left: 0.875rem;
    border-left: 0.125rem solid #e3e8ef;
}

.csr-template-editor-form .csr-tpl-bindings-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0 0.375rem;
}

.csr-template-editor-form .csr-tpl-bindings-lbl {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8A94A6;
    line-height: 1;
}

/* Binding cards mirror the section cards one level down — same chevron/header/hide
   mechanics, lighter band and smaller label so the nesting stays legible. */
.csr-template-editor-form .csr-tpl-binding-cards {
    display: grid;
    gap: 0.375rem;
}

.csr-template-editor-form .csr-tpl-binding-card {
    background: #fff;
    border: 0.0625rem solid #e3e8ef;
    border-radius: 0.375rem;
    overflow: hidden;
}

.csr-template-editor-form .csr-tpl-binding-hdr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: #fbfcfd;
    border-bottom: 0.0625rem solid #eef1f5;
    cursor: pointer;
    user-select: none;
}

.csr-template-editor-form .csr-tpl-binding-hdr:hover {
    background: #f4f6f9;
}

/* Same nph-button icon-padding fix as .csr-tpl-section-chevron above. */
.csr-template-editor-form .csr-tpl-binding-chevron {
    --nwc-button-icon-only-padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    color: #9CA3AF;
}

.csr-template-editor-form .csr-tpl-binding-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8A94A6;
    line-height: 1.3;
}

.csr-template-editor-form .csr-tpl-binding-meta {
    flex-shrink: 0;
    font-size: 0.6875rem;
    color: #5C6878;
    line-height: 1.4;
    white-space: nowrap;
}

.csr-template-editor-form .csr-tpl-binding-body {
    padding: 0.5rem 0.75rem 0.75rem;
    display: grid;
    gap: 0.25rem;
}

/* Compound selector, and placed after the base rule: as a single class this lost the
   cascade to .csr-tpl-binding-body's display:grid at equal specificity, so bindings
   rendered permanently expanded no matter what the chevron said. */
.csr-template-editor-form .csr-tpl-binding-body.csr-tpl-binding-body--hidden {
    display: none;
}

/* Name and Heading run long, so they take two of the three columns; every other field keeps
   one, which leaves all the column gutters aligned down the card. */
.csr-template-editor-form .csr-tpl-span-2 {
    grid-column: span 2;
}

/* Empty trailing cell that holds a column open so the fields beside it are not stretched. */
.csr-template-editor-form .csr-tpl-form-spacer {
    min-width: 0;
}

/* Row controls were unstyled native buttons next to an already-styled remove "×".
   Match .linked-tpl-del so the cluster reads as one set. */
.csr-template-editor-form .csr-tpl-row-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.csr-template-editor-form .csr-tpl-move-btn {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border: 0.0625rem solid transparent;
    background: transparent;
    color: #9CA3AF;
    cursor: pointer;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1;
}

.csr-template-editor-form .csr-tpl-move-btn:hover:not(:disabled) {
    background: #EEF2F7;
    color: #3D4A5C;
    border-color: #dde3ec;
}

.csr-template-editor-form .csr-tpl-move-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Base .linked-tpl-footer margin-top is 0.25rem, tight enough here that "+ Add Section" read as
   part of the section card above it. Match the 0.75rem gap already used between section cards
   (.csr-tpl-sections-cards) so toolbar→card, card→card, and card→button read as one rhythm. */
.csr-template-editor-form .csr-tpl-sections-body > .linked-tpl-footer {
    margin-top: 0.75rem;
}

/* Moved out of clinical-ai-wc.css per review on PR #1085: these are CSR Template
   rules only. The .csr-linkage-editor-form halves stay in the shared sheet so this
   page's styles no longer alter the CSR Linkage editor's layout. */

/* ── CSR Template / CSR Linkage editors — same card-based form pattern ────── */
.csr-template-editor-form {
    --csr-card-pad: 2.25rem;
    /* Was 100% — with every field on its own full-width row that gave the widest possible box
       to a 6-character E3 Ref. Sections/bindings fields now sit in .cai-form-grid-2/-3 rows, so
       a real cap keeps those rows (and Template Details/Governance, which share --csr-content-box)
       from stretching arbitrarily wide on a large monitor without leaving the old dead band. */
    --csr-content-max: 76rem;
    --csr-content-box: calc(var(--csr-content-max) + (2 * var(--csr-card-pad)));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.csr-template-editor-form.cai-labelled-form .wc-ui-section {
    background: #fff;
    border: 0.0625rem solid #dde3ec;
    border-radius: 0.5rem;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.csr-template-editor-form.cai-labelled-form .wc-ui-section > .wc-ui-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.625rem var(--csr-card-pad);
    background: #f4f6f9;
    border-bottom: 0.0625rem solid #dde3ec;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5c6878;
    line-height: 1.3;
}

/* Kind/Lifecycle are nph-combobox and Design Summary is nph-textarea; the shared
   .cai-labelled-form rule only uncaps nph-input, so these kept a 28.7rem shadow-DOM cap
   inside a 49.7rem column. Mirrors the .deriv-spec-editor-form rule above. */
.csr-template-editor-form.cai-labelled-form nph-combobox,
.csr-template-editor-form.cai-labelled-form nph-textarea {
    --label-width: 0;
    --label-input-gap: 0;
    --input-max-width: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Three fields per row, reusing the app's .cai-form-grid-3. The label column stays at the
   shared 10.5rem — narrowing it clipped "Source Kind" and "Resolution Status" to "Sourc"
   and "Resolution". Row gap is tightened since these rows sit inside a card. */
.csr-template-editor-form .cai-form-grid-3 {
    gap: 0.5rem 1.25rem;
}

/* Horizontal inset comes from the Card body padding below, not from these inner wrappers —
   stacking both gave the two EditorCard surfaces a 3.5rem inset against Governance's 2.25rem. */
.csr-template-editor-form .cai-editor-card {
    --wc-ui-card-body-padding: 0.375rem var(--csr-card-pad) 0.875rem;
    max-width: var(--csr-content-box);
    box-sizing: border-box;
}

.csr-template-editor-form.cai-labelled-form .wc-ui-field {
    grid-template-columns: 10.5rem minmax(0, 1fr);
}

.csr-template-editor-form.cai-labelled-form .wc-ui-field > :not(.wc-ui-label) {
    max-width: none;
}

.csr-template-editor-form .tlf-gov-section {
    --wc-ui-card-header-padding: 0.625rem var(--csr-card-pad);
    --wc-ui-card-body-padding: 1rem var(--csr-card-pad);
    max-width: var(--csr-content-box);
    box-sizing: border-box;
}

.csr-template-editor-form .linked-tpl-grid,
.csr-template-editor-form .linked-tpl-footer {
    padding-left: var(--csr-card-pad);
    padding-right: var(--csr-card-pad);
    max-width: var(--csr-content-box);
    box-sizing: border-box;
}

.csr-template-editor-form .linked-tpl-grid {
    padding-top: 0.375rem;
}

/* Below the card's comfortable width for a 3-up row, stack to one field per line instead of
   letting columns get cramped. 2-up (Template Details) drops to one column a bit later, since a
   pair of fields keeps enough room for longer values down to a narrower viewport. */
@media (max-width: 56rem) {
    .csr-template-editor-form .cai-form-grid-3 {
        grid-template-columns: 1fr;
    }

    .csr-template-editor-form .csr-tpl-span-2 {
        grid-column: span 1;
    }
}

@media (max-width: 40rem) {
    .csr-template-editor-form .cai-form-grid-2 {
        grid-template-columns: 1fr;
    }
}