.tnx-structured-field { min-width: 0; width: 100%; }
.tnx-structured-field [hidden] { display: none !important; }
/* Exactly the company accent color of UI/SetupCompany.php, where only UI/style.css applies and the
   browser's own color swatch stays: the page stylesheets would stretch it into a thin line. */
.tnx-structured-field input[type="color"]:is(.form-control, .interactive-table-input) { width: 50px; height: 27px; min-height: 0; padding: 0; border-radius: 0; border-color: revert; background-color: revert; }
.tnx-structured-field .tnx-structured-actions { display: flex; gap: .5rem; justify-content: flex-end; font-size: .8rem; }
.tnx-structured-field .tnx-structured-actions [data-code-download] { opacity: .5; }
/* A download link reads DOWNLOADED for a moment after its click, then goes back to its resting look. */
.tnx-structured-field [data-code-download].is-downloaded { opacity: .4; }
.tnx-structured-choices { display: flex; gap: .5rem; align-items: center; }
[data-structured-type="multiselect"] .tnx-structured-choices { flex-direction: column; align-items: flex-start; padding-inline-start: 1rem; }
/* The page-wide button rules make every button a full-width block; these choices size to their content. */
.tnx-structured-choices button.tnx-tristate-option,
.tnx-structured-choices button.tnx-multiselect-option { display: inline-flex; align-items: center; gap: .5rem; width: auto; min-width: 0; flex: 0 0 auto; margin: 0; }
.tnx-tristate-option, button.tnx-multiselect-option { background: transparent; border: 0; margin: 0; padding: 0; color: var(--text-color); font: inherit; cursor: pointer; box-shadow: none; }
.tnx-tristate-option { opacity: .3; }
.tnx-tristate-option:hover { opacity: .24; }
.tnx-tristate-option.is-selected { opacity: 1; cursor: default; }
.tnx-tristate-option.is-selected:hover { opacity: 1; }
.readonly-boolean-pill--open { background: var(--bg-color); border: 1px solid var(--text-color); color: var(--text-color); }
.tnx-multiselect-option { display: flex; align-items: center; gap: .5rem; text-align: start; }
button.tnx-multiselect-option { opacity: .5; }
button.tnx-multiselect-option:hover { opacity: .4; }
button.tnx-multiselect-option.is-selected { opacity: 1; }
button.tnx-multiselect-option.is-selected:hover { opacity: .8; }
/* Readonly choices keep their resting look: no hover feedback and no pointer. */
.tnx-tristate-option:disabled, button.tnx-multiselect-option:disabled { cursor: default; }
.tnx-tristate-option:disabled:hover { opacity: .3; }
.tnx-tristate-option.is-selected:disabled:hover { opacity: 1; }
button.tnx-multiselect-option:disabled:hover { opacity: .5; }
button.tnx-multiselect-option.is-selected:disabled:hover { opacity: 1; }
.tnx-multiselect-circle { display: inline-block; width: 1em; height: 1em; flex: 0 0 1em; border: 1px solid currentColor; border-radius: 50%; }
.is-selected > .tnx-multiselect-circle { background: currentColor; }
.tnx-field-code-readonly { white-space: pre-wrap; overflow: auto; max-height: 12rem; margin: 0; }
/* A CODE field keeps its highlighted text, scrollable; a click opens it in the API code editor. */
.tnx-code-opens-editor .CodeMirror, .tnx-code-opens-editor .CodeMirror-lines, .tnx-field-code-readonly.tnx-code-opens-editor { cursor: pointer; }
.tnx-code-opens-editor .CodeMirror, .tnx-field-code-readonly.tnx-code-opens-editor { transition: opacity .12s; }
.tnx-code-opens-editor .CodeMirror:hover, .tnx-field-code-readonly.tnx-code-opens-editor:hover { opacity: .8; }
/* Nothing is typed into the field itself, so it shows no blinking cursor. */
.tnx-code-opens-editor .CodeMirror-cursors { visibility: hidden !important; }
/* An executable field shows its preview, never its raw source: the text waits out of sight until the
   preview takes its place, so the page never shows something else first. */
.tnx-structured-field textarea[data-field-type="executable_code"]:not([data-tnx-executable="1"]):not([data-code-default-editor="1"]) { visibility: hidden; }
/* One line high everywhere except the pages that show a symbol large (entry, bulk operations,
   workflow fields, shop), which keep the picker's own 6rem square. */
.tnx-structured-field:not(.tnx-structured-field--large-symbol):not(#interactiveTable.interactive-table--cards .tnx-structured-field) .tnx-symbol-picker-trigger {
  width: 2.2rem !important; min-width: 2.2rem !important; max-width: 2.2rem !important; inline-size: 2.2rem;
  height: 2.2rem !important; min-height: 2.2rem !important; max-height: 2.2rem !important; block-size: 2.2rem;
  flex-basis: 2.2rem; border-radius: 6px;
}
.tnx-structured-field:not(.tnx-structured-field--large-symbol):not(#interactiveTable.interactive-table--cards .tnx-structured-field) .tnx-symbol-picker-trigger-value { font-size: 1.3rem; }
/* The code editor header of UI/helpers/CodeInputEditorHelper.php, which only prints its own CSS on the pages using it. */
.tnx-structured-field .tnx-code-editor-header { display: flex; align-items: center; justify-content: flex-end; }
.tnx-structured-field .tnx-code-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-left: auto; white-space: nowrap; }
.db-code-default-trigger { cursor: pointer; resize: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnx-code-default-overlay { display: flex; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; backdrop-filter: blur(6px); background: #0006; }
.tnx-code-default-overlay .tnx-modal-window { width: min(1100px, 92vw); max-height: 90vh; overflow: auto; padding: 1.5rem; background: var(--bg-color); color: var(--text-color); border-radius: 12px; }
.tnx-code-default-overlay .CodeMirror { height: min(60vh, 600px); }
.tnx-field-scan-overlay { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; backdrop-filter: blur(6px); background: #0006; }
.tnx-field-scan-card { padding: 1rem; width: min(90vw, 640px); max-height: 90vh; overflow: auto; background: var(--bg-color); color: var(--text-color); border-radius: 8px; }
.tnx-field-scan-card video { display: block; width: 100%; }
.tnx-structured-field .tnx-table-link-input { box-sizing: border-box; border: 1px solid var(--border-color); border-radius: 3px; background: var(--input-bg); color: var(--text-color); padding: .375rem .5rem; width: 100%; height: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-height: 2.2rem; max-height: 6.6rem; overflow: auto; cursor: text; }
.tnx-table-link-input.is-expanded { max-height: 16rem; }
.tnx-table-link-pills { display: contents; }
.tnx-table-link-pill { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid currentColor; border-radius: 4px; padding: .1rem .3rem; }
/* Pills and readonly lists borrow .linked-entry-link for its link colour and hover card, but not
   its layout: that class is a right-aligned block below a field, these read inline like text. */
.tnx-structured-field .tnx-table-link-pill.linked-entry-link { display: inline-flex; width: auto; max-width: 100%; margin: 0; text-align: start; flex: 0 1 auto; }
.tnx-structured-field .tnx-table-links-readonly { text-align: start; }
.tnx-structured-field .tnx-table-links-readonly .linked-entry-link { display: inline; margin: 0; text-align: start; }
.tnx-structured-field .tnx-table-link-pill.linked-entry-link > a,
.tnx-structured-field .tnx-table-links-readonly .linked-entry-link > a { display: inline; width: auto; margin: 0; }
.tnx-table-link-pill:has(a:not(.tnx-table-link-remove)):hover { opacity: .8; }
.tnx-structured-field .tnx-table-link-search { height: 1.4rem; min-height: 0; margin: 0; flex: 1 1 6rem; width: 6rem; min-width: 3rem; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; color: inherit; font: inherit; }
.tnx-structured-field .tnx-table-link-input:focus-within { border-color: var(--primary-color); outline: none; box-shadow: none; }
.tnx-table-link-remove { border: 0; background: transparent; color: inherit; padding: 0 .15rem; cursor: pointer; font: inherit; }
/* Removal uses its own compact link style, like the email recipient pills. */
.tnx-structured-field a.tnx-table-link-remove { display: inline-flex; width: auto; min-width: 0; flex: 0 0 auto; margin: 0; padding: 0 .15rem; }
.tnx-table-link-scan { display: block; text-align: end; font-size: .8rem; }
/* The same placement as a resolved entry link, because it sits in that very slot. */
.tnx-scan-search-link { display: block; text-align: end; font-size: .8rem; }
.tnx-scan-search-link[hidden] { display: none; }
.tnx-field-execution-output iframe { width: 100%; min-height: 18rem; border: 0; background: transparent; }
.tnx-structured-code-switch { display: block; text-align: end; font-size: .8rem; }
.tnx-field-execution-backdrop { position: fixed; inset: 0; z-index: 100000; backdrop-filter: blur(6px); background: #0006; }
.tnx-field-execution-output.is-fullscreen { position: fixed; inset: 5vh 4vw; z-index: 100001; display: flex; flex-direction: column; padding: 1rem; overflow: auto; background: var(--bg-color); color: var(--text-color); border-radius: 10px; }
.tnx-field-execution-output.is-fullscreen iframe { flex: 1; min-height: 0; height: 100%; }

.tnx-linked-selection-trigger { display: block; max-width: 20rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnx-linked-selection-trigger[hidden] { display: none; }
/* The linked table and role popup is the calculation logic popup (.tnx-modal-overlay and
   .tnx-modal-window from UI/style.css); its list scrolls inside a capped height. */
.tnx-selection-overlay { z-index: 100001; }
.tnx-selection-card { width: min(520px, 100%); max-height: calc(100vh - 3rem); gap: 1rem; text-align: left; overflow: hidden; }
.tnx-selection-card h3 { margin: 0; }
.tnx-selection-scroll { flex: 1 1 auto; min-height: 0; max-height: 55vh; overflow: auto; }
/* An invisible table: no borders, no backgrounds, only the alignment of its two columns. */
.tnx-selection-grid { width: 100%; border-collapse: collapse; border: 0; background: transparent; }
.tnx-selection-grid th, .tnx-selection-grid td { border: 0; background: transparent; padding: .3rem 0; text-align: left; vertical-align: middle; font-weight: normal; }
.tnx-selection-grid thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-color); }
.tnx-selection-grid tr[hidden] { display: none; }
.tnx-selection-grid .tnx-selection-general-head, .tnx-selection-grid .tnx-selection-general { width: 1%; padding-left: 1rem; text-align: center; white-space: nowrap; }
/* A table that is not linked has no general flag to set: its checkbox only appears once the table is
   checked, and keeps its place meanwhile, so nothing in the list moves while it comes and goes. */
.tnx-selection-grid .tnx-selection-general.is-inactive input[type="checkbox"] { visibility: hidden; }
.tnx-selection-grid label { display: flex; align-items: center; column-gap: 0.25em; margin: 0; cursor: pointer; }
.tnx-selection-grid input[type="checkbox"] { margin: 0 .5rem 0 0; flex: 0 0 auto; }
.tnx-selection-grid .tnx-selection-general input[type="checkbox"] { margin: 0; }
.tnx-selection-master { display: inline-block; margin-top: .35rem; }
.tnx-selection-master[hidden], .tnx-selection-search[hidden], .tnx-selection-empty[hidden] { display: none; }
/* The search box of the interactive table filter menus. */
.tnx-selection-card input.tnx-selection-search { width: 100%; padding: .35rem .5rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--background-color, var(--input-bg)); color: var(--text-color); font-size: .9rem; box-sizing: border-box; }
.tnx-selection-empty { color: #c0392b; font-size: .82rem; }
/* The emoji box of UI/roles.php, directly followed by the name. */
.tnx-selection-grid .table-icon-box { border: 1px solid var(--border-color); background-color: var(--table-icon-bg, var(--input-bg)); }
.tnx-selection-footer { margin-top: .5rem; }
.tnx-linked-selection-trigger[aria-disabled="true"] { color: var(--text-color); cursor: default; pointer-events: none; }

.tnx-structured-field .tnx-table-link-input [hidden] { display: none !important; }

/* The whole navigable pill dims once, including its removal link. */
.tnx-structured-field .tnx-table-link-pill:has(a:not(.tnx-table-link-remove)) > a:hover { opacity: 1 !important; }

.tnx-structured-field input[type="hidden"] { display: none !important; }

:is(.tnx-structured-field--large-symbol, #interactiveTable.interactive-table--cards .tnx-structured-field)[data-structured-type="symbol"] [data-structured-readonly="1"] {
    font-size: 3rem;
    min-height: 6rem;
    display: flex;
    align-items: center;
}

/* Single selections retain the normal input and the resolved link below it. */
.tnx-single-table-link-label { display: block; text-align: right; margin-top: 4px; }
.tnx-single-table-link-label > .linked-entry-link { display: block; margin: 0; }
.tnx-structured-field .linked-entry-search-results .search-select { display: block; width: auto; background: none; border: 0; padding: 0; margin: 0 0 .5em; font: inherit; text-align: start; text-transform: uppercase; text-decoration: none; color: var(--link-color); cursor: pointer; }
.tnx-structured-field .linked-entry-search-results .search-select.tnx-exact-idpk-match { font-weight: bold; }
/* Across several tables the value leads, the table it belongs to stays in the background. */
.tnx-structured-field .linked-entry-search-results .tnx-table-link-result-meta { opacity: .5; }
.tnx-structured-field .linked-entry-search-results .tnx-table-link-new { display: block; opacity: .5; }
.tnx-structured-field .linked-entry-search-results .tnx-table-link-new:hover { opacity: .4; }
.tnx-structured-field .linked-entry-search-results:not([hidden]) { display: block; }

/* The create line of ./entry.css for areas outside the entry page. */
.tnx-attachment-area .attachment-create-inline { margin-top: 10px; opacity: .3; font-size: .9rem; }
.tnx-attachment-area .attachment-create-inline--files { display: flex; align-items: center; gap: 1rem; }
.tnx-attachment-area .attachment-create-inline__files { min-width: 0; }
.tnx-attachment-area .attachment-create-inline__link { text-decoration: none; }
.tnx-attachment-area .attachment-create-inline.is-busy { pointer-events: none; }
/* The history link of the regular code editors: dimmed and set apart from WRITE. */
.tnx-structured-field .tnx-code-editor-actions .code-history-button { opacity: .5; margin-right: 20px; }
/* The table badge of the calendar search, for NEW links and results across several tables. */
.tnx-structured-field .table-icon-box { border: 1px solid var(--border-color); background-color: var(--table-icon-bg, var(--input-bg)); }
.tnx-structured-field .table-icon-emoji { white-space: nowrap; }
.tnx-selection-grid thead[hidden] { display: none; }
/* The default code popup: its title on the left, the editor links on the right of the same line. */
.tnx-code-default-overlay .tnx-structured-field .tnx-code-editor-header { justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.tnx-code-default-overlay .tnx-code-editor-header h3 { margin: 0; }

/* Code field links on the line of the field label (the bar sits before the label and floats right). */
.tnx-code-editor-header.tnx-code-header-beside-label { float: right; display: flex; align-items: center; gap: .5rem; margin: 0 0 0 1rem; line-height: inherit; }
.tnx-code-header-beside-label [hidden] { display: none !important; }
.tnx-code-header-beside-label .tnx-code-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin: 0; white-space: nowrap; }
.tnx-code-header-beside-label .tnx-code-editor-actions .code-history-button { opacity: .5; margin-right: 20px; }
.tnx-code-header-beside-label .tnx-code-fullscreen-actions { display: flex; margin: 0; font-size: inherit; }
.tnx-structured-field[data-structured-type="code"], .tnx-structured-field[data-structured-type="executable_code"] { clear: both; }

/* The page-wide button:hover paints a square background; the choices are plain circles and texts. */
.tnx-structured-choices button.tnx-tristate-option,
.tnx-structured-choices button.tnx-tristate-option:hover,
.tnx-structured-choices button.tnx-tristate-option:focus,
.tnx-structured-choices button.tnx-multiselect-option:hover,
.tnx-structured-choices button.tnx-multiselect-option:focus { background: transparent; box-shadow: none; }
/* These choices already set their hover opacity, so the global button filter must not dim them again. */
.tnx-structured-choices button.tnx-tristate-option { border-radius: 50%; corner-shape: round; filter: none; }

/* Six or more multiselect options sit in a scrollable box that looks like an input field. */
[data-structured-type="multiselect"] .tnx-structured-choices.tnx-multiselect-scrollbox {
    max-height: 12rem; overflow-y: auto; overscroll-behavior: contain; padding: .5rem .75rem;
    border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--input-bg); box-sizing: border-box;
}
/* In hover cards the color swatch is only as tall as the label line beside it. */
.tnx-structured-field.tnx-tooltip-color { display: inline-flex; width: auto; vertical-align: middle; line-height: 1; }
.tnx-structured-field.tnx-tooltip-color input[type="color"].form-control { box-sizing: border-box; font-size: inherit; width: 2.2em; height: 1.15em; border-width: 1px; }
/* A readonly multiselect: one pill per chosen option, all on one line (wrapping only when the line is full). */
.tnx-multiselect-readonly { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; vertical-align: middle; }
.tnx-multiselect-readonly .preview-pill--empty { opacity: .5; }
/* Readonly values that read on the line of their label (color, multiselect, tri-state). */
.form-group--readonly-inline > .tnx-structured-field,
.form-group--readonly-inline > .tnx-structured-field > [data-structured-readonly="1"] { display: inline; width: auto; min-height: 0; vertical-align: middle; }
.form-group--readonly-inline > .tnx-structured-field input[type="color"].form-control { vertical-align: middle; }
/* A failed upload or create is told in the drop area: red, fading out over three seconds, then the sentence fades back in. */
.tnx-attachment-area .tnx-drop-area-text { transition: opacity .6s ease; }
.tnx-attachment-area .tnx-drop-area-text.is-error { color: #ff453a; }
.tnx-attachment-area .tnx-drop-area-text.is-fading { opacity: 0; transition: opacity 3s ease-in; }
.tnx-attachment-area .attachment-create-inline { margin-bottom: 10px; }
/* The areas whose attachments are being moved or copied, until that is done. */
.is-tnx-attachment-moving .preview-container { opacity: .5; pointer-events: none; }
/* A table cell's attachments area without files reads like an empty field from the first paint. */
.tnx-attachment-area.is-empty > .drop-area:not(.highlight):not(:hover) { opacity: .3; }
.tnx-linked-own-choices:not([hidden]) { display: block; text-align: right; margin-top: 4px; }