/* ─────────────────────────────────────────────────────────────────────────────
   Report Builder — shared edit-modal form styling.

   Every component edit modal (text block, table, list, image, graph, header, footer, stack) renders inside
   .edit-modal-body, and Report Defaults inside .rd-body. Each modal's scoped .razor.css grew its own input
   classes (size-input, size-input-text, edit-input, size-select, bba-select, …) that drifted apart — square
   number boxes with spinners next to rounded text boxes, grey vs white fills, different heights. This one
   global sheet gives every text/number input and select in those roots the look of the font-size "px" box,
   so all modals match without touching each modal's markup. Widths stay with the markup (inline/classes).

   Selectors use :is(...) under the modal root, which out-ranks the per-modal scoped class rules (a scoped
   ".size-input[b-xyz]" is 0,2,0; these are 0,2,1), so no !important is needed. Checkboxes, radios, colour
   pickers and ranges are deliberately excluded.
   ───────────────────────────────────────────────────────────────────────────── */

:is(.edit-modal-body, .rd-body) :is(input[type="text"], input[type="number"], input:not([type]), select, textarea) {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 0.8rem;
    font-family: inherit;
    color: #374151;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color 0.1s, box-shadow 0.1s;
}

:is(.edit-modal-body, .rd-body) :is(input[type="text"], input[type="number"], input:not([type]), select) {
    height: 30px;
}

:is(.edit-modal-body, .rd-body) :is(input[type="text"], input[type="number"], input:not([type]), select, textarea):focus {
    outline: none;
    border-color: #000061;
    box-shadow: 0 0 0 2px rgba(0, 0, 97, 0.1);
}

:is(.edit-modal-body, .rd-body) :is(input, select, textarea):disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Numbers read right-aligned like the font-size box, with the browser spinners hidden (they made the
   number boxes look square and cramped next to the text boxes). Arrow keys still step the value. */
:is(.edit-modal-body, .rd-body) input[type="number"] {
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
}

:is(.edit-modal-body, .rd-body) input[type="number"]::-webkit-outer-spin-button,
:is(.edit-modal-body, .rd-body) input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Placeholder ("px", "default", "12"…) in the light grey used for unit labels. */
:is(.edit-modal-body, .rd-body) :is(input, textarea)::placeholder {
    color: #9ca3af;
}

/* Opt-out: the table modal's inline cell editor sits inside a small grid tile and keeps its compact look. */
.edit-modal-body input.cell-inline-input {
    height: auto;
    padding: 1px 3px;
    font-size: 0.72rem;
    border-color: #009DC9;
    border-radius: 3px;
    text-align: left;
}

/* Toggle/alignment buttons: some modals mark the selected one with .active, others .fmt-btn-active, and not
   every modal's scoped CSS styled both (the text block's header-align buttons showed no selection). */
.edit-modal-body .fmt-btn.fmt-btn-active,
.edit-modal-body .fmt-btn.active {
    background: #000061;
    border-color: #000061;
    color: #fff;
}

.edit-modal-body .fmt-btn.fmt-btn-active :is(b, i, strong, em),
.edit-modal-body .fmt-btn.active :is(b, i, strong, em) {
    color: #fff;
}