/*
 * Backend styling for the SOP checklist's `sop_items` MultiColumnWizard.
 *
 * The default MCW layout puts each column in its own <td>, which squeezes
 * the step title into a narrow cell next to a TinyMCE editor. For SOP
 * steps we want the title stacked on top of the description so both get
 * full row width — the title reads like a heading, the rich-text area
 * below holds the detail.
 *
 * Scoped to #ctrl_sop_items so no other MCW widget is affected.
 */

#ctrl_sop_items.multicolumnwizard {
    /* Container already has sensible defaults */
}

/* Hide the column-header row — placeholders / inline labels are clearer
   once the inputs are stacked. */
#ctrl_sop_items.multicolumnwizard thead {
    display: none;
}

/* Turn each row into a 2-column grid:
   column 1 = the field stack (title on top, description below)
   column 2 = the operations (move up/down, copy, delete) */
#ctrl_sop_items.multicolumnwizard > tbody > tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid var(--border, #dbdbdb);
}

#ctrl_sop_items.multicolumnwizard > tbody > tr:last-child {
    border-bottom: 0;
}

/* All non-operations cells stack in column 1. */
#ctrl_sop_items.multicolumnwizard > tbody > tr > td {
    display: block;
    grid-column: 1;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

/* Inputs fill the cell. */
#ctrl_sop_items.multicolumnwizard > tbody > tr > td input[type="text"],
#ctrl_sop_items.multicolumnwizard > tbody > tr > td textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Make the title look like a heading for the step. */
#ctrl_sop_items.multicolumnwizard > tbody > tr > td input[name$="[title]"] {
    font-size: 1.05em;
    font-weight: 600;
    padding: 6px 8px;
}

/* TinyMCE wrapper needs width: 100% on its host container too. */
#ctrl_sop_items.multicolumnwizard > tbody > tr > td .mce-tinymce,
#ctrl_sop_items.multicolumnwizard > tbody > tr > td .tox-tinymce {
    width: 100% !important;
    max-width: 100% !important;
}

/* Operations column: anchor to the right, stay visible as the user scrolls
   through a tall TinyMCE description. The sticky ancestor is the grid <tr>,
   so the buttons stick to the top of the current row and release when the
   next row scrolls into view. */
#ctrl_sop_items.multicolumnwizard > tbody > tr > td.operations {
    grid-column: 2;
    grid-row: 1 / span 10;
    align-self: start;
    padding-top: 4px;
    white-space: nowrap;
    position: sticky;
    top: 16px;
    z-index: 1;
}