/* nuBuilder Next – small layer on top of Bootstrap 5.3 (works in light and dark mode) */

:root {
	--nu-accent: #2f6fd6;
	--nu-accent-2: #1fa39a;
	--nu-surface: var(--bs-body-bg);
	--nu-page: #f4f6f9;
}
[data-bs-theme="dark"] {
	--nu-page: #14171c;
	--nu-surface: #1c2027;
}

body.nu-app, body.nu-center { background: var(--nu-page); }
.card { --bs-card-bg: var(--nu-surface); }
.card-header { background: transparent; }

/* navbar */
.nu-navbar { background: var(--nu-surface); }
.nu-navbar .nav-link { border-radius: .5rem; padding-inline: .75rem !important; }
.nu-navbar .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.nu-user-name { max-width: 12rem; }

.nu-logo {
	display: inline-grid; place-items: center;
	width: 2rem; height: 2rem; border-radius: .6rem;
	background: linear-gradient(135deg, var(--nu-accent), var(--nu-accent-2));
	color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: -.02em;
}
.nu-logo-lg { width: 3.25rem; height: 3.25rem; border-radius: .9rem; font-size: 1.4rem; }
/* nuBuilder Next logo (nu_brand_logo): light / dark version follow the theme */
.nu-brand { display: inline-flex; align-items: center; line-height: 1; }
.nu-brand img { height: 2rem; width: auto; max-width: 100%; }
.nu-brand-lg img { height: 3.5rem; }
.nu-brand .nu-brand-dark, [data-bs-theme="dark"] .nu-brand .nu-brand-light { display: none; }
[data-bs-theme="dark"] .nu-brand .nu-brand-dark { display: inline; }
.navbar-brand .nu-brand img { height: 1.9rem; }
@media (max-width: 380px) { .navbar-brand .nu-brand img { height: 1.6rem; } }
/* branding (0.8.297, Admin tools → Branding): own logo – any aspect ratio, at most 32 px high in the top bar, 72 px on sign-in pages;
   title next to it; environment label (colour from the generated ?p=brand&a=css) and a line of its colour at the top of the page */
.nu-brand-own img { height: auto; max-height: 2rem; max-width: 12rem; object-fit: contain; }
.navbar-brand .nu-brand-own img { height: auto; max-height: 2rem; }
.nu-brand-own.nu-brand-lg img { max-height: 4.5rem; max-width: 16rem; }
.nu-brand-title { font-weight: 600; font-size: 1.05rem; color: var(--bs-emphasis-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18rem; }
@media (max-width: 575.98px) { .nu-brand-title { max-width: 9rem; font-size: .95rem; } }
.nuEnvLabel { display: inline-block; padding: .2rem .55rem; border-radius: .375rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; line-height: 1.2; background: #dc3545; color: #fff; white-space: nowrap; }
html.nu-env .nu-navbar, html.nu-env body:not(.nu-app) { border-top: 4px solid var(--nu-env, #dc3545); }
.brandPreviewBox { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 1rem; background: var(--bs-body-bg); }
.brandLogoPrev { max-height: 4rem; max-width: 14rem; }
.brandLogoPrevDark { background: #1c2027; padding: .5rem; border-radius: .375rem; }

/* centered pages (login, errors) */
.nu-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.nu-card-narrow { width: 100%; max-width: 26rem; }
.nu-login { background:
	radial-gradient(60rem 30rem at 10% -10%, rgba(47, 111, 214, .12), transparent 60%),
	radial-gradient(50rem 30rem at 110% 110%, rgba(31, 163, 154, .12), transparent 60%),
	var(--nu-page); }

/* login page from $nuWelcomeBodyInnerHTML (nuconfig.php); nuBuilder's class names nuLogin, nuLoginInput, nuButton look like nuBuilder Next */
.nu-login-custom { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.5rem 1rem 1.5rem; }
.nu-login-tools { position: absolute; top: 1rem; inset-inline-end: 1rem; display: flex; gap: .5rem; }
.nu-login-msg { width: 100%; max-width: 26rem; }
.nu-login-custom .nuLogin { width: fit-content; max-width: 100%; margin: 0 auto; padding: 2rem; border-radius: var(--bs-border-radius-lg);
	background: var(--bs-body-bg); box-shadow: var(--bs-box-shadow-sm); }
.nu-login-custom .nuLogin table { margin: 0 auto; }
.nu-login-custom .nuLogin img { max-width: 100%; height: auto; }
.nu-login-custom .nuLoginInput { display: block; width: 16rem; max-width: 100%; padding: .45rem .75rem; color: var(--bs-body-color);
	background: var(--bs-body-bg); border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.nu-login-custom .nuLoginInput:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .1rem rgb(140 180 239 / 8%); }
.nu-login-custom .nuButton { padding: .4rem 1rem; color: #fff; background: var(--bs-primary); border: 0; border-radius: var(--bs-border-radius); cursor: pointer; }
.nu-login-custom .nuButton:hover { filter: brightness(.92); }

/* inputs with a suggestion list (HTML5 datalist): always show an arrow like a select. Chrome draws its own arrow only on
   hover and Bootstrap hides it, so the arrow is a background image (same as .form-select) and a click on it opens the
   list (assets/js/nuapp.js, showPicker). Not with a validation icon (is-invalid / is-valid use the same place). */
:root { --nu-datalist-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] { --nu-datalist-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
input.form-control[list]:not(.is-invalid):not(.is-valid) {
	padding-inline-end: 2.25rem; background-image: var(--nu-datalist-arrow); background-repeat: no-repeat;
	background-position: right .75rem center; background-size: 16px 12px; }

/* lighter focus ring on inputs */
.form-control:focus { box-shadow: 0 0 0 .1rem rgb(140 180 239 / 8%); }

/* password field with eye button inside a floating label */
.nu-pw { position: relative; }
.nu-pw .form-control { padding-inline-end: 3rem; }
.nu-pw-toggle { position: absolute; inset-inline-end: .25rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); z-index: 5; }

/* home tiles */
.nu-tile { transition: transform .12s ease, box-shadow .12s ease; border: 1px solid var(--bs-border-color-translucent); }
.nu-tile:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08) !important; }
.nu-tile-icon {
	display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .8rem;
	background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: 1.4rem;
}

/* tables */
.nu-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap; }
.nu-sort { color: inherit; text-decoration: none; }
.nu-sort:hover { color: var(--bs-body-color); }
.card > .table-responsive:first-child .table { border-top-left-radius: var(--bs-card-inner-border-radius); }

/* rights grid */
.nu-rights-wrap { max-height: 65vh; overflow: auto; }
.nu-rights thead th { background: var(--nu-surface); font-weight: 600; z-index: 2; }
.nu-rights .form-check-input { cursor: pointer; }
.nu-rights-filter { max-width: 15rem; }
.nu-scroll { max-height: 18rem; overflow: auto; }

/* sticky action bar at the bottom of edit screens */
.nu-actionbar {
	position: sticky; bottom: 0; z-index: 10;
	padding: .75rem 1rem; margin-inline: -.25rem;
	background: color-mix(in srgb, var(--nu-surface) 92%, transparent);
	backdrop-filter: blur(6px);
	border: 1px solid var(--bs-border-color-translucent); border-radius: .75rem;
}

fieldset[disabled] .form-control, fieldset[disabled] .form-select { background-color: var(--bs-tertiary-bg); }

@media print {
	.nu-navbar, .nu-actionbar, footer, .btn { display: none !important; }
	body.nu-app { background: #fff; }
}

/* breathing room at the card edges of tables */
.card .table > :not(caption) > * > *:first-child { padding-inline-start: 1rem; }
.card .table > :not(caption) > * > *:last-child { padding-inline-end: 1rem; }
.breadcrumb a { text-decoration: none; }
.nu-row-link { cursor: pointer; }
/* scroll box = containing block: absolutely positioned children (e.g. .visually-hidden headers) stay inside it and do not widen the page on phones */
.table-responsive { position: relative; }

/* 2FA */
.nuQr { width: 200px; height: 200px; background: #fff; padding: 6px; border-radius: .5rem; border: 1px solid var(--bs-border-color); }
.nuQr svg { width: 100%; height: 100%; display: block; }
.nuSecret { font-size: .95rem; letter-spacing: .05em; }
.nuOtp { font-size: 1.4rem; letter-spacing: .35em; text-align: center; }
.nu-logo-lg .bi { font-size: 1.5rem; }

/* ---------------------------------------------------------------- e-mail */
.nuMailBody { display: block; width: 100%; min-height: 480px; border: 0; border-radius: var(--bs-card-border-radius); background: #fff; }
.nuMailDebug { max-height: 460px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.nuPurgeDays { width: 5.5rem; }
.nuPreWrap { white-space: pre-wrap; }

/* ---------------------------------------------------------------- formats */
.nuNegative { color: var(--bs-danger) !important; }
.nuFmtType { font-weight: 600; }
.nuFmtType-D { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.nuFmtType-N { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.nuFmtType-T { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.nuFmtKey { font-size: .95em; white-space: pre; }
#fmtTable tbody tr[data-format-id], #fmtTable tbody tr[data-format-key] { cursor: pointer; }
.nuFmtBuiltin td { color: var(--bs-secondary-color); }
.nfdMono { font-family: var(--bs-font-monospace); }
.nfdResult { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: .75rem 1rem; background: var(--bs-tertiary-bg); }
.nfdResult code { white-space: pre; }
.nfdPreview { display: grid; gap: .25rem; margin-top: .25rem; }
.nfdPreviewRow { display: flex; align-items: center; flex-wrap: wrap; }
.nfdLegend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--bs-secondary-color); }
.nbFormatPick { display: flex; gap: .25rem; }
.nbFormatPick select { min-width: 0; }

/* Mobile: dropdowns of the collapsed navbar open to the right of their button (Bootstrap positions navbar menus statically,
   so right-aligned menus of buttons at the left edge would leave the screen) */
@media (max-width: 767.98px) {
	.nu-navbar .dropdown-menu-end[data-bs-popper] { inset-inline-end: auto; inset-inline-start: 0; max-width: calc(100vw - 2rem); }
}

/* ---------------------------------------------------------------- e-mail templates */
.emtFields { max-height: 70vh; overflow: auto; }
.emtField { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; padding: .35rem .75rem; }
.emtFieldLabel { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emtFieldId { font-size: .8rem; }
.emtFieldMeta { grid-column: 1 / -1; font-size: .75rem; color: var(--bs-secondary-color); }
.emtActive { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .15); }
.emtRecord { width: 9rem; }
.emtTestTo { width: 16rem; max-width: 100%; }
.emtPreview { min-height: 260px; border-top: 1px solid var(--bs-border-color); border-radius: 0; }
@media (min-width: 1200px) { .emtFieldsCard { position: sticky; top: 4.5rem; } }

/* ---------------------------------------------------------------- items */
.itemCard { max-width: 820px; }
.itemSort { max-width: 8rem; }
.itemIconPreview { min-width: 2.6rem; justify-content: center; }

/* ---------------------------------------------------------------- debug */
.debugMsg { font-size: .8rem; white-space: pre-wrap; word-break: break-word; background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius); padding: .5rem .75rem; }
.debugCollapsed { max-height: 14rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.debugFirst { max-width: 60ch; }
.nu-navbar .nav-link { white-space: nowrap; }

/* ---------------------------------------------------------------- sessions */
.nuSessDot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-inline-end: .35rem; vertical-align: middle; }
.nuSessActive { background: var(--bs-success); }
.nuSessIdle { background: var(--bs-warning); }

/* Save / Clone / Delete of records (0.8.199): one quiet style as in nuBuilder – light background, thin border, dark text with a
   Bootstrap icon. Only Save changes, while there are unsaved changes: red text and icon on a slightly red background
   (.nuSaveEdited, set by assets/js/nuapp.js, the form runtime and the editors; the builder uses .nbDirty). */
.btn.nuBtnAct {
	--bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--bs-tertiary-bg); --bs-btn-border-color: var(--bs-border-color);
	--bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-secondary-border-subtle, var(--bs-border-color));
	--bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: var(--bs-border-color);
	--bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-bg: var(--bs-tertiary-bg); --bs-btn-disabled-border-color: var(--bs-border-color);
	--bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
	border-radius: .5rem; font-weight: 400;
}
.btn.nuBtnAct > .bi { margin-inline-end: .45rem !important; }
.btn.nuBtnSave.nuSaveEdited, #nbSave.nbDirty {
	--bs-btn-color: var(--bs-danger); --bs-btn-bg: rgba(var(--bs-danger-rgb), .05); --bs-btn-border-color: rgba(var(--bs-danger-rgb), .25);
	--bs-btn-hover-color: var(--bs-danger); --bs-btn-hover-bg: rgba(var(--bs-danger-rgb), .1); --bs-btn-hover-border-color: rgba(var(--bs-danger-rgb), .4);
	--bs-btn-active-color: var(--bs-danger); --bs-btn-active-bg: rgba(var(--bs-danger-rgb), .14); --bs-btn-active-border-color: rgba(var(--bs-danger-rgb), .45);
	--bs-btn-disabled-color: var(--bs-danger); --bs-btn-disabled-bg: rgba(var(--bs-danger-rgb), .05); --bs-btn-disabled-border-color: rgba(var(--bs-danger-rgb), .25);
	--bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}
[data-bs-theme="dark"] .btn.nuBtnSave.nuSaveEdited, [data-bs-theme="dark"] #nbSave.nbDirty {
	--bs-btn-color: #ff8e98; --bs-btn-hover-color: #ffa8b0; --bs-btn-active-color: #ffa8b0; --bs-btn-disabled-color: #ff8e98;
	--bs-btn-bg: rgba(var(--bs-danger-rgb), .14); --bs-btn-border-color: rgba(var(--bs-danger-rgb), .45);
}

/* documentation (?p=help) */
.nuHelpSide { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); overflow-y: auto; }
.nuHelpToc a { display: block; padding: .15rem .5rem; border-radius: .375rem; text-decoration: none; color: var(--bs-body-color); }
.nuHelpToc a:hover, .nuHelpToc a.active { background: var(--bs-secondary-bg); }
.nuHelpToc .nuHelpToc2 { font-weight: 600; margin-top: .35rem; }
.nuHelpToc .nuHelpToc3 { font-size: .875rem; padding-inline-start: 1.25rem; color: var(--bs-secondary-color); }
.nuHelpBody { max-width: 60rem; }
.nuHelpBody section { background: var(--nu-surface, var(--bs-body-bg)); border: 1px solid var(--bs-border-color-translucent); border-radius: .75rem; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.nuHelpBody h2 { font-size: 1.35rem; margin-bottom: .75rem; }
.nuHelpBody h3 { font-size: 1.05rem; margin-top: 1.25rem; margin-bottom: .5rem; }
.nuHelpBody h2, .nuHelpBody h3, .nuHelpBody section, .nuHelpBody .doc-sub { scroll-margin-top: 4.5rem; }
.nuHelpBody table { font-size: .9rem; }
.nuHelpBody code { word-break: break-word; }
.nuHelpBody pre.doc-code { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .5rem .75rem; font-size: .8rem; white-space: pre-wrap; }
.nuHelpBody .doc-red { color: var(--bs-danger); font-weight: 600; }
.nuHelpBody .doc-badge { background: var(--bs-warning); color: #000; border-radius: .375rem; padding: 0 .4rem; font-size: .8rem; font-weight: 600; }
/* function reference (0.8.399, core/nufnref.php) */
.nuFnTools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .75rem 0 .5rem; }
.nuFnTools .nuFnSearch { max-width: 350px; }
.nuFnIndex { margin-bottom: .75rem; }
.nuFnIndex summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.nuFnAz { font-size: .8rem; margin-top: .5rem; line-height: 1.7; }
.nuFnLetter { margin-bottom: .25rem; }
.nuFnLetter b { display: inline-block; min-width: 1.25rem; }
.nuFnLetter a { margin-right: .5rem; white-space: nowrap; }
.nuFn { border-top: 1px solid var(--bs-border-color-translucent); padding: .5rem 0 .6rem; scroll-margin-top: 4.5rem; }
.nuFn:target { background: var(--bs-warning-bg-subtle); box-shadow: 0 0 0 .5rem var(--bs-warning-bg-subtle); border-radius: .25rem; }
.nuFnHead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.nuFnSig { font-weight: 600; font-size: .85rem; }
.nuFnHead .badge { font-weight: 500; font-size: .7rem; }
.nuFnNb { background: var(--bs-secondary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }
.nuFnNext { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border: 1px solid var(--bs-primary-border-subtle); }
.nuFnHook { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border: 1px solid var(--bs-warning-border-subtle); }
.nuFnDesc { font-size: .9rem; margin-top: .15rem; }
.nuFnRet { font-size: .85rem; }
.nuFnRet span { color: var(--bs-secondary-color); margin-right: .25rem; }
.nuFn pre.doc-code { margin: .35rem 0 0; }
.nuFn.nuFnOutL, .nuFn.nuFnOutG, .nuFnGroup.nuFnOutL { display: none; }
mark.nuHelpHit { padding: 0; background: rgba(var(--bs-warning-rgb), .45); color: inherit; }
@media (max-width: 991.98px) { .nuHelpSide { position: static; max-height: none; } .nuHelpToc { max-height: 40vh; overflow-y: auto; } }

.nuEngineList { max-height: 20rem; overflow-y: auto; }

/* files (zzzzsys_file) */
.nuFileCard { color: inherit; transition: box-shadow .15s; }
.nuFileCard:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.12) !important; }
.nuFileThumbBox { height: 8rem; display: flex; align-items: center; justify-content: center; padding: .5rem; border-bottom: 1px solid var(--bs-border-color-translucent);
	background: repeating-conic-gradient(var(--bs-tertiary-bg) 0 25%, var(--bs-body-bg) 0 50%) 0 0 / 16px 16px; border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; }
.nuFileThumbBox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nuFilePreview { min-height: 8rem; display: flex; align-items: center; justify-content: center; border-radius: .5rem;
	background: repeating-conic-gradient(var(--bs-tertiary-bg) 0 25%, var(--bs-body-bg) 0 50%) 0 0 / 16px 16px; padding: .75rem; }
.nuFilePreview img { max-width: 100%; max-height: 20rem; object-fit: contain; }
.nuFileDrop { border: 2px dashed var(--bs-border-color); border-radius: .5rem; padding: .75rem; }
.nuFileDrop.nuFileDropOver { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); }
.nuFileDrop.is-invalid { border-color: var(--bs-danger); }

.nuUpdChanges { white-space: normal; max-height: 22rem; overflow-y: auto; }

/* installer (pages/nuinstall.php) */
.nu-install { width: 100%; max-width: 48rem; }
.nuInsSteps { display: flex; gap: .25rem; list-style: none; padding: 0; counter-reset: insstep; font-size: .8rem; }
.nuInsSteps li { flex: 1 1 0; counter-increment: insstep; text-align: center; padding-top: .5rem; border-top: .25rem solid var(--bs-border-color); color: var(--bs-secondary-color); min-width: 0; }
.nuInsSteps li::before { content: counter(insstep) ". "; }
.nuInsSteps li.done { border-top-color: var(--nu-accent-2); }
.nuInsSteps li.active { border-top-color: var(--nu-accent); color: var(--bs-body-color); font-weight: 600; }
.nuInsSteps a { color: inherit; text-decoration: none; }
.nuInsSteps a:hover { text-decoration: underline; }
@media (max-width: 575.98px) { .nuInsSteps li:not(.active) span, .nuInsSteps li:not(.active) a { display: none; } }
.insStrength { height: .3rem; }
.insStrength .progress-bar { transition: width .15s ease; }
.insNubPath { max-width: calc(100% - 1.5rem); }

/* "#" menu of the code editors (assets/js/nu/nuhashvars.js) */
/* # (hash variables) button: same box as the editor tool buttons (.nuCodeTools .btn: .15rem .45rem padding, .9rem icon, btn-sm line height) */
.nuHashVarsBtn { font-family: var(--bs-font-monospace); font-weight: 700; font-size: .9rem; line-height: 1; padding: 0;
	display: inline-flex; align-items: center; justify-content: center; width: 1.925rem; height: 1.9375rem; }
.nuHashVarsMenu { width: min(26rem, 90vw); }
.nuHashVarsMenu .form-control { margin-bottom: .35rem; }
.nuHashVarsList { max-height: 50vh; overflow-y: auto; }
.nuHashVarsList .dropdown-header { position: sticky; top: 0; background: var(--bs-dropdown-bg); font-weight: 600; }
.nuHashVarsList .dropdown-item code { flex: none; }
.nbCodeBar { margin-bottom: .25rem; }


/* printable lists (core/nulistexport.php) */
body.nu-print-list { background: var(--bs-body-bg); font-size: .85rem; }
.nu-print-table th { white-space: nowrap; background: var(--bs-tertiary-bg); }
.nu-print-table td { word-break: break-word; }
@media print { body.nu-print-list { font-size: 9pt; } .nu-print-table thead { display: table-header-group; } }

/* procedures (pages/nuprocedures.php) */
.procCM { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); height: auto; min-height: 22rem; font-size: .85rem; }
.procCM .CodeMirror-scroll { min-height: 22rem; max-height: 70vh; }
.procCM.is-invalid { border-color: var(--bs-danger); }
.cfgCM { height: auto; font-size: .85rem; border-bottom-left-radius: var(--bs-card-inner-border-radius); border-bottom-right-radius: var(--bs-card-inner-border-radius); }
.cfgCM .CodeMirror-scroll { min-height: 24rem; max-height: 72vh; }
.cfgEditor.nuCodeFull .cfgToolbar { border: 0 !important; padding: 0 0 .5rem !important; }
[data-bs-theme="dark"] .cfgCM.CodeMirror { background: var(--bs-body-bg); color: var(--bs-body-color); }
#procTabJs .procCM, #procTabJs .procCM .CodeMirror-scroll { min-height: 16rem; }
.procResultPre { max-height: 14rem; overflow: auto; white-space: pre-wrap; margin: .25rem 0 0; font-size: .8rem; background: var(--bs-body-bg); padding: .4rem; border-radius: .3rem; }
.procHistCode { max-height: 18rem; overflow: auto; white-space: pre-wrap; font-size: .78rem; background: var(--bs-tertiary-bg); padding: .5rem; border-radius: .3rem; }
.procAccessList { max-height: 50vh; overflow-y: auto; }
[data-bs-theme="dark"] .procCM .CodeMirror { background: var(--bs-body-bg); color: var(--bs-body-color); }

/* code editor toolbar (assets/js/nu/nucodetools.js) + CodeMirror search dialog */
.nuCodeTools .btn { padding: .15rem .45rem; }
.nuCodeTools .btn .bi { font-size: .9rem; }
.CodeMirror-dialog { position: absolute; left: 0; right: 0; background: var(--bs-tertiary-bg); color: var(--bs-body-color); z-index: 15; padding: .25rem .8rem; overflow: hidden; font-size: .85rem; }
.CodeMirror-dialog-top { border-bottom: 1px solid var(--bs-border-color); top: 0; }
.CodeMirror-dialog-bottom { border-top: 1px solid var(--bs-border-color); bottom: 0; }
.CodeMirror-dialog input { border: 1px solid var(--bs-border-color); border-radius: .25rem; outline: none; background: var(--bs-body-bg); width: 20em; color: inherit; font-family: var(--bs-font-monospace); padding: 0 .3rem; }
.CodeMirror-dialog button { font-size: .8rem; margin-left: .25rem; }
.CodeMirror .cm-searching { background: rgba(255, 193, 7, .35); }
.nuShowInvisibles .cm-nu-space { background: radial-gradient(circle, rgba(128, 128, 128, .55) 1px, transparent 1.5px) center / 100% 100% no-repeat; }
.nuShowInvisibles .cm-nu-tab { background: linear-gradient(to right, transparent 15%, rgba(128, 128, 128, .45) 15%, rgba(128, 128, 128, .45) 85%, transparent 85%) center / 100% 1px no-repeat; }

/* show / hide and generate password, open-in-new-tab buttons inside an input group: same border as the input */
.input-group > .btn-outline-secondary[data-pw-toggle],
.input-group > .btn-outline-secondary.nuPwGenBtn,
.input-group > .btn-outline-secondary.nuOpenBtn {
	--bs-btn-border-color: var(--bs-border-color);
	--bs-btn-color: var(--bs-secondary-color);
	--bs-btn-bg: var(--bs-body-bg);
	--bs-btn-hover-bg: var(--bs-tertiary-bg);
	--bs-btn-hover-color: var(--bs-body-color);
	--bs-btn-hover-border-color: var(--bs-border-color);
	--bs-btn-active-bg: var(--bs-secondary-bg);
	--bs-btn-active-color: var(--bs-body-color);
	--bs-btn-active-border-color: var(--bs-border-color);
}

/* user form: permission items */
.userPermSearch { max-width: 260px; }
#userPerms .form-check-label { cursor: pointer; }

/* hamburger: Bootstrap draws a 0.25rem ring on every :focus (also after a tap) – only for keyboard focus, and thinner */
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler:focus-visible { box-shadow: 0 0 0 2px var(--bs-focus-ring-color); outline: 0; }

/* acting as another user (globeadmin): bar above the navigation */
.nuImpBar { flex: 0 0 100%; width: 100%; margin: calc(-1 * var(--bs-navbar-padding-y)) 0 var(--bs-navbar-padding-y); font-size: .875rem; color: #fff; }
.nuImpBar.nuImpView { background: #0a6f86; }
.nuImpBar.nuImpFull { background: #b02a37; }
.nuImpBar .badge { font-weight: 600; }

/* breadcrumbs: the current page is the heading right below – show only the way back */
main > nav > .breadcrumb .breadcrumb-item.active { display: none; }
main > nav:has(> .breadcrumb):not(:has(.breadcrumb-item:not(.active))) { display: none; }

/* list footer: total · pager · rows per page – always shown, sticky at the bottom of the window */
.nuListFooter {
	position: sticky; bottom: 0; z-index: 5;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem;
	padding: .5rem 1rem; font-size: .875rem; color: var(--bs-secondary-color);
	background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color-translucent);
	box-shadow: 0 -.25rem .75rem rgba(0, 0, 0, .04);
}
.card > .nuListFooter.card-footer { background: var(--bs-body-bg); }
.nuListFooter.card { flex-direction: row; border-radius: var(--bs-border-radius-lg); }
.nuListFooter .nuLfTotal { white-space: nowrap; }
.nuListFooter .nuLfTotal b { color: var(--bs-body-color); font-weight: 600; }
.nuListFooter .nuLfPer { justify-self: end; white-space: nowrap; }
.nuPager {
	display: inline-flex; align-items: center; gap: .25rem; padding: .25rem;
	border: 1px solid var(--bs-border-color); border-radius: 50rem; background: var(--bs-tertiary-bg);
}
.nuPagerBtn {
	display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 50rem;
	color: var(--bs-body-color); text-decoration: none; white-space: nowrap;
}
.nuPagerBtn:hover { background: var(--bs-body-bg); color: var(--bs-primary); }
.nuPagerBtn:focus-visible { outline: 2px solid var(--bs-focus-ring-color); outline-offset: 1px; }
.nuPagerFirst, .nuPagerLast { padding-inline-start: .65rem; padding-inline-end: .65rem; }
.nuPagerBtn.disabled { color: var(--bs-secondary-color); opacity: .55; pointer-events: none; }
.nuPagerCur {
	padding: .3rem .9rem; border-radius: 50rem; background: var(--bs-body-bg); color: var(--bs-body-color);
	font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
button.nuPagerCur { border: 0; cursor: text; }
button.nuPagerCur:hover { color: var(--bs-primary); }
button.nuPagerCur:focus-visible { outline: 2px solid var(--bs-focus-ring-color); outline-offset: 1px; }
.nuPagerJumpBox { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 50rem; background: var(--bs-body-bg);
	font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.nuPagerJumpBox input { width: 4.5em; padding: .1rem .35rem; font-weight: 600; text-align: center; border-radius: 50rem; }
@media (max-width: 575.98px) {
	/* phones: no "xx per page" (it got cut off) – total left, pager right */
	.nuListFooter { padding: .5rem .5rem; gap: .5rem; grid-template-columns: auto 1fr; }
	.nuListFooter .nuLfPer { display: none; }
	.nuListFooter .nuPager { justify-self: end; }
	.nuPagerTxt, .nuLfUnit { display: none; }
	.nuPagerBtn { padding: .3rem .6rem; }
	.nuPagerFirst, .nuPagerLast { padding-inline-start: .5rem; padding-inline-end: .5rem; }
	.nuPagerCur { padding: .3rem .6rem; }
}
@media print { .nuListFooter { position: static; box-shadow: none; } .nuPager { display: none; } }

/* code editor full screen (toolbar button / F11): toolbar + editor fill the window */
.nuCodeFull {
	position: fixed !important; inset: 0; z-index: 1045; margin: 0 !important; max-width: none !important; width: auto !important;
	padding: .75rem; overflow: auto; background: var(--bs-body-bg);
}
html.nuCodeFullOpen, html.nuCodeFullOpen body { overflow: hidden; }
.nuCodeFull .CodeMirror-scroll { max-height: none !important; min-height: 0 !important; }
.nu-tile-icon { flex-shrink: 0; }
button.nu-tile { font: inherit; color: inherit; background: var(--bs-card-bg); cursor: pointer; }

/* list tables (nuBuilder Next lists, form browse): flat body with zebra stripes, accent tint on clickable rows (Table Style Specification) */
:root, [data-bs-theme="light"] {
	--nu-th-bg: var(--bs-body-bg); --nu-th-color: #6b7785; --nu-th-line: #d7dde2;
	--nu-row-stripe: rgba(127, 140, 155, .09); --nu-row-hover: rgba(47, 111, 206, .08); --nu-row-line: #edf0f3;
}
[data-bs-theme="dark"] {
	--nu-th-bg: var(--bs-body-bg); --nu-th-color: #7f8c99; --nu-th-line: #2c3742;
	--nu-row-stripe: rgba(127, 140, 155, .09); --nu-row-hover: rgba(77, 159, 255, .12); --nu-row-line: #242d36;
}
.nu-table, .nuBrowseTable { --bs-table-hover-bg: transparent; --bs-table-hover-color: var(--bs-table-color); }
/* header: colours only */
.nu-table > thead > tr > th, .nuBrowseTable > thead > tr > th {
	--bs-table-bg: var(--nu-th-bg); color: var(--nu-th-color); border-bottom: 1px solid var(--nu-th-line);
}
/* body: thin dividers between rows, roomy cells (no stripes) */
.nu-table > tbody > tr > *, .nuBrowseTable > tbody > tr > * { border-bottom: 1px solid var(--nu-row-line); }
.nu-table > tbody > tr:last-child > *, .nuBrowseTable > tbody > tr:last-child > * { border-bottom-width: 0; }
.nu-table:not(.table-sm) > :not(caption) > tr > * { padding: .5rem 1rem; }   /* rows: .5rem above and below (was .8rem) */
/* 0.8.208: header without grey band – same background as the card, lighter labels, only a line below */
.nu-table > thead > tr > th, .nuBrowseTable > thead > tr > th { border-top: 0; font-size: .72rem; letter-spacing: .05em; font-weight: 500; }
.nu-table:not(.table-sm) > thead > tr > th { padding-top: .7rem; padding-bottom: .7rem; }
/* hover: rows that open something */
.nu-table > tbody > tr[data-href]:hover > *, .nuBrowseTable > tbody > tr.nuBrowseRow:hover > *,
.nu-table > tbody > tr.clickable-row:hover > * { --bs-table-bg-state: var(--nu-row-hover); }
.nu-table > tbody > tr[data-href] { cursor: pointer; }
.nu-table > tbody > tr[data-href]:focus-visible > * { --bs-table-bg-state: var(--nu-row-hover); }

/* toolbar buttons above lists (Print, CSV, links to related pages): softer border */
.btn.nuToolBtn { --bs-btn-border-color: #c9d1d8; --bs-btn-hover-border-color: #c9d1d8; --bs-btn-active-border-color: #c9d1d8; --bs-btn-disabled-border-color: #c9d1d8; }
[data-bs-theme="dark"] .btn.nuToolBtn { --bs-btn-border-color: #3a4652; --bs-btn-hover-border-color: #3a4652; --bs-btn-active-border-color: #3a4652; --bs-btn-disabled-border-color: #3a4652; }

/* list page: one card – header (title + buttons), filters, table, footer */
.nuListCard { border-radius: .75rem; overflow: visible; }
.nuListCard > .nuListHead { background: var(--bs-body-bg); padding: 1rem 1.25rem; border-bottom: 1px solid var(--nu-th-line); border-radius: .75rem .75rem 0 0; }
.nuListCard > .nuListHead h1 { font-size: 1.15rem; }
/* title bars: <div class="nuTitleBar"> <h1> · optional <div class="nuTitleSub"> (subtitle / hint) · <div> buttons </div> </div>
   Title, then subtitle, then the buttons on a row of their own, left-aligned (short mouse way, same on desktop and phone). */
.nuTitleBar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nuTitleBar > :first-child { margin-inline-end: 1rem; }
.nuTitleBar > .nuTitleSub { flex-basis: 100%; margin-top: -.25rem; }
/* 0.8.152: the buttons always get their own row below title (and subtitle) – on every screen width, as on phones */
.nuTitleBar > div:last-child:not(:first-child):not(.nuTitleSub) { flex-basis: 100%; }
/* rows marked for removal (0.8.139 – access level form rights, form builder lists, attribute editor): crossed out and faded until
   the record is saved, then deleted; the ↺ button in the last cell brings the row back (that cell stays usable). nuApp.toggleRemoved() */
.nuRowRemoved > :not(:last-child) { opacity: .45; text-decoration: line-through; pointer-events: none; }
.nuRowRemoved :is(input, select, textarea) { text-decoration: line-through; }
/* "+ Add" buttons: since 0.8.223 the same quiet style as the Print button next to them (btn-outline-secondary nuToolBtn) –
   grey text, transparent background, light border (0.8.135–0.8.222: light blue) */
.btn.nuAddBtn {
	--bs-btn-color: #6c757d; --bs-btn-bg: transparent; --bs-btn-border-color: #dee2e6; --bs-btn-font-weight: 400;
	--bs-btn-hover-color: #0c0b0b; --bs-btn-hover-bg: #e1e3e87d; --bs-btn-hover-border-color: #dee2e6;
	--bs-btn-active-color: #0c0b0b; --bs-btn-active-bg: #e1e3e8; --bs-btn-active-border-color: #dee2e6;
	--bs-btn-disabled-color: #6c757d; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #dee2e6;
	--bs-btn-focus-shadow-rgb: 108, 117, 125;
}
[data-bs-theme="dark"] .btn.nuAddBtn {
	--bs-btn-color: #adb5bd; --bs-btn-border-color: #3a4652; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6c757d;
	--bs-btn-hover-border-color: #3a4652; --bs-btn-active-color: #fff; --bs-btn-active-bg: #6c757d; --bs-btn-active-border-color: #3a4652;
	--bs-btn-disabled-color: #adb5bd; --bs-btn-disabled-border-color: #3a4652;
}
.nuListCard .nuListFilter { padding: 1rem 1.25rem 1.1rem; }
.nuListCard .nuListFilter .form-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--nu-th-color); }
.nuListCard .nuListBody > .card-header { border-top: 1px solid var(--nu-th-line); }
.nuListCard .table-responsive .table { border-radius: 0 !important; }
.nuListCard > .nuListFooter.card-footer { border-radius: 0 0 .75rem .75rem; }
/* row action buttons (users list) */
.nuRowBtn { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: .4rem; }
.nuRowBtn.btn-outline-secondary { --bs-btn-border-color: #d5dbe1; --bs-btn-color: var(--bs-secondary-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: #c3cad1; }
.nuRowBtn.btn-outline-danger { --bs-btn-border-color: #f1c4c8; --bs-btn-hover-bg: #fdecee; --bs-btn-hover-color: var(--bs-danger); --bs-btn-hover-border-color: #e9a4ab; }
[data-bs-theme="dark"] .nuRowBtn.btn-outline-secondary { --bs-btn-border-color: #3a4652; }
[data-bs-theme="dark"] .nuRowBtn.btn-outline-danger { --bs-btn-border-color: #6b2c33; --bs-btn-hover-bg: rgba(248, 81, 73, .12); }
.nuRowActions { white-space: nowrap; } .nuRowActions > * + * { margin-inline-start: .35rem; }
@media (max-width: 767.98px) { .nu-table > tbody > tr > td { white-space: nowrap; } .nuListCard > .nuListHead, .nuListCard .nuListFilter { padding-inline-start: 1rem; padding-inline-end: 1rem; } }
/* search field with the search button on the right */
.nuSearchBtn { --bs-btn-border-color: var(--bs-border-color); --bs-btn-color: var(--bs-secondary-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-color: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-color: var(--bs-primary); --bs-btn-active-border-color: var(--bs-border-color); }
/* filter button right of the search field (users list): blue while the filters are open or set */
.nuFilterToggle[aria-expanded="true"], .nuFilterToggle.active { color: var(--bs-primary); }
/* users list: access level badge – light blue */
.nuAccessBadge.bg-secondary-subtle { background-color: #eaf4ff !important; border-color: #dcd7ff !important; }
/* user form: password generator (no inline styles – CSP) */
.nuPwGenLen { width: 5rem; flex: none; }
.nuPwGenBar { height: .4rem; }
.nuPwGenOut { letter-spacing: .03em; }
/* forms list: one colour per form type (light and dark theme) */
.nuFormType { font-weight: 600; border: 1px solid transparent; }
.nuFormType-browseedit { background: #e8f1ff; color: #1f4fa3; border-color: #cfe0fb; }
.nuFormType-browse     { background: #e6f6fb; color: #0b6178; border-color: #c7e9f3; }
.nuFormType-edit       { background: #e8f6ee; color: #1d6b3f; border-color: #c9e8d5; }
.nuFormType-launch     { background: #fff4e0; color: #8a5300; border-color: #f6dfb3; }
.nuFormType-subform    { background: #f1ecfd; color: #5b3aa6; border-color: #e0d6f8; }
.nuFormType-page       { background: #fde8f0; color: #9b1d4f; border-color: #f6cadb; }
[data-bs-theme="dark"] .nuFormType-browseedit { background: #16263f; color: #9ec2ff; border-color: #24395c; }
[data-bs-theme="dark"] .nuFormType-browse     { background: #10303a; color: #8fd6e8; border-color: #1b4552; }
[data-bs-theme="dark"] .nuFormType-edit       { background: #12301f; color: #8fd8ab; border-color: #1d4630; }
[data-bs-theme="dark"] .nuFormType-launch     { background: #3a2a0d; color: #f3c46d; border-color: #54401a; }
[data-bs-theme="dark"] .nuFormType-subform    { background: #2a2142; color: #c3b0f5; border-color: #3c3060; }
[data-bs-theme="dark"] .nuFormType-page       { background: #3d1526; color: #f5a3c4; border-color: #5a2139; }
[data-bs-theme="dark"] .nuAccessBadge.bg-secondary-subtle { background-color: #1d2b3a !important; border-color: #33405a !important; }

/* tabs (0.8.312): clean underline look – no boxes; grey text, the selected tab in the accent blue with a 2 px line on the base line,
   hover darkens the text and shows a light line. Icons and their colours stay. Dark mode: the same with dark colours. */
:root, [data-bs-theme="light"] {
	--nu-tab-line: #dee2e6; --nu-tab-border: #dee2e6; --nu-tab-color: #5c6670; --nu-tab-hover-bg: #f5f5f5; --nu-tab-hover-color: #212529;
	--nu-tab-active-color: #2d84d1; --nu-tab-active: #2d84d1; --nu-tab-hover-line: #ced4da; --nu-tab-active-bg: var(--nu-tab-surface);
}
[data-bs-theme="dark"] {
	--nu-tab-line: #3a4552; --nu-tab-border: #3a4552; --nu-tab-color: #a7b0ba; --nu-tab-hover-bg: #27303a; --nu-tab-hover-color: #fff;
	--nu-tab-active-color: #5ea4e8; --nu-tab-active: #5ea4e8; --nu-tab-hover-line: #4f5c6a; --nu-tab-active-bg: var(--nu-tab-surface);
}
.nav-tabs { --nu-tab-surface: var(--nu-page); --bs-nav-tabs-border-width: 0; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--nu-tab-line); padding-inline-start: 0; }
.card .nav-tabs { --nu-tab-surface: var(--bs-card-bg); }
.card-header .nav-tabs { --nu-tab-surface: var(--bs-card-bg); }
.nav-tabs .nav-item { margin-bottom: -1px; }
.nav-tabs .nav-link {
	display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; margin: 0;
	background: transparent; color: var(--nu-tab-color); font-size: .9rem; font-weight: 400; line-height: 1.4;
	border: 0; border-bottom: 2px solid transparent; border-radius: 0;
	cursor: pointer; transition: color .15s ease-in-out, border-color .15s ease-in-out;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { background: transparent; color: var(--nu-tab-hover-color); isolation: isolate; border-bottom-color: var(--nu-tab-hover-line); }
.nav-tabs .nav-link:focus-visible { outline: 2px solid var(--bs-focus-ring-color); outline-offset: -2px; border-radius: .25rem .25rem 0 0; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
	background: transparent; color: var(--nu-tab-active-color); font-weight: 500; cursor: default; border-bottom-color: var(--nu-tab-active);
}
.nav-tabs .nav-link.disabled { opacity: .55; }
.nav-tabs .nav-link .badge { margin-inline-start: .1rem; font-size: .7rem; line-height: 1.2; }
.nav-tabs .nav-link > .bi { font-size: .95em; }
/* tabs inside a card header: the header's bottom border is the base line */
.card-header-tabs { margin-bottom: calc(-1 * var(--bs-card-cap-padding-y)); border-bottom: 0; }

/* prompt generator */
.pgResult { min-height: 22rem; resize: vertical; white-space: pre-wrap; background: var(--bs-tertiary-bg); font-size: .78rem; line-height: 1.45; }
@media (min-width: 1200px) { .pgResultCard { position: sticky; top: 4.5rem; } }
.min-w-0 { min-width: 0; }
.flex-none { flex: none; }

/* CSV import */
.impDrop { display: block; border: 2px dashed var(--bs-border-color); border-radius: .75rem; padding: 2rem 1rem; text-align: center; cursor: pointer; color: var(--bs-secondary-color); transition: border-color .15s, background .15s; position: relative; }
.impDrop:hover, .impDrop.dragover, .impDrop:focus-within { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); color: var(--bs-body-color); }
.impSteps li { display: flex; align-items: center; gap: .35rem; color: var(--bs-secondary-color); }
.impSteps li span { display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid var(--bs-border-color); font-weight: 600; }
.impSteps li.active { color: var(--bs-primary); font-weight: 600; }
.impSteps li.active span { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.impSteps li.done span { background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); color: var(--bs-success-text-emphasis); }
.impPreview { max-height: 22rem; }
.impPreview td, .impPreview th { white-space: nowrap; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; }
.impPreview thead th { position: sticky; top: 0; background: var(--bs-tertiary-bg); }
.impCustomDelim { max-width: 3.5rem; }
.impMap td { vertical-align: top; }
.impMap .impSrcCell { min-width: 12rem; }
.impMap .impPrev { min-width: 10rem; max-width: 18rem; }
.impPrevVal { max-width: 18rem; }
.impAutoMapped { background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
.impErrors { max-height: 24rem; }
.impBusy { cursor: progress; }

/* every outline-secondary button: border #6c757d – also the row, tool and filter buttons, which had lighter borders of their
   own (dark mode). At the end of the file so it wins over those rules. Buttons attached to a field (input group:
   open access level, show / generate password, search) keep the field's border colour. */
.btn.btn-outline-secondary,
.btn.btn-outline-secondary.nuRowBtn,
.btn.btn-outline-secondary.nuToolBtn { --bs-btn-border-color: #6c757d; }
/* light theme (0.8.137): grey outline buttons (Back, Act as user, Clone, New, Refresh, Tools, ⋮ …) with the light border #dee2e6,
   like Print and the search button – also on hover. Pressed / selected (e.g. Absolute | Auto | Grid) keep the dark fill and border.
   The top bar buttons keep their own #e4e4e4 (more specific rule below). */
:root:not([data-bs-theme="dark"]) .btn.btn-outline-secondary:not(.nuSearchBtn),
:root:not([data-bs-theme="dark"]) .btn.btn-outline-secondary.nuRowBtn,
:root:not([data-bs-theme="dark"]) .btn.btn-outline-secondary.nuToolBtn { --bs-btn-border-color: #dee2e6; --bs-btn-hover-border-color: #dee2e6; --bs-btn-disabled-border-color: #dee2e6; }
/* light theme (0.8.138): red outline buttons (Delete, Delete all, row delete buttons, Reset …) with the light red border #ebaab1;
   on hover Bootstrap's red fill (row buttons keep their soft hover). Dark mode unchanged. */
:root:not([data-bs-theme="dark"]) .btn.btn-outline-danger { --bs-btn-border-color: #ebaab1; --bs-btn-disabled-border-color: #ebaab1; }
.input-group > .btn.btn-outline-secondary { --bs-btn-border-color: var(--bs-border-color); }
/* filter button next to the search field: same border as the search button (also hover / open / focus) */
.btn.btn-outline-secondary.nuFilterToggle, .btn.btn-outline-secondary.nuListResetBtn { --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-border-color: var(--bs-border-color); }
.btn.nuFilterToggle:focus-visible, .btn.nuListResetBtn:focus-visible { border-color: var(--bs-border-color); }
/* Print button of lists (#nuListPrint) and form browse lists (#nuPrintButton), row buttons in lists (Clone …): same border as the search button */
.nu-table .btn.btn-outline-secondary, .nu-table .btn.btn-outline-secondary.nuRowBtn,
.btn.btn-outline-secondary#nuListExportBtn, .btn.btn-outline-secondary#nuExportButton { --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-border-color: var(--bs-border-color); }

/* inspect record (pages/nuinspect.php) */
.inspTable .inspValue { display: inline-block; max-width: min(55vw, 46rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; cursor: pointer; font-size: .85rem; }
.inspTable .inspValue.inspOpen { display: block; max-width: none; white-space: pre-wrap; overflow-wrap: anywhere; cursor: auto; }
.inspTable .inspValue.inspMasked { filter: blur(5px); user-select: none; cursor: default; }
.inspTable .inspType { font-size: .8rem; color: var(--bs-secondary-color); }
.inspSortBtn { font: inherit; color: inherit; text-decoration: none; text-transform: inherit; letter-spacing: inherit; }
.inspSortBtn:hover { color: var(--bs-primary); }
th[aria-sort="ascending"] .inspSortBtn::after { content: " \25B2"; font-size: .7em; }
th[aria-sort="descending"] .inspSortBtn::after { content: " \25BC"; font-size: .7em; }
.inspFacts dt { font-weight: 600; color: var(--bs-secondary-color); }
.inspFacts dd { margin-bottom: .25rem; }

/* access level: "Several…" dialog to add forms */
.nuAmList { max-height: 50vh; overflow-y: auto; }
.nuAmList .list-group-item { cursor: pointer; }

/* form cloner */
.nuClList { min-height: 6rem; max-height: 14rem; overflow-y: auto; }
.nuClSql { resize: vertical; }

/* app cloner */
.nuAcTables { max-height: 22rem; overflow-y: auto; }
.nuAcTable:last-child { border-bottom: 0 !important; }
.nuAcTable { cursor: pointer; }
.nuAcLog { max-height: 60vh; overflow-y: auto; }
.nuAcLine-step { font-weight: 600; margin-top: .35rem; }
.nuAcLine-error { color: var(--bs-danger-text-emphasis); font-weight: 600; }

/* list title with an (i) button: the hint opened below it wraps instead of pushing the buttons to a new line */
.nuInfoBtn { text-decoration: none; font-size: .85rem; }

/* REST API clients: curl example */
.nuApiExample { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .5rem .75rem; font-size: .78rem; white-space: pre-wrap; word-break: break-all; }

/* API playground (pages/nuapiplayground.php) */
.apgSide .apgList { max-height: calc(100vh - 14rem); overflow-y: auto; }
.apgSide .apgMeth, #apg .apgMeth { font-family: var(--bs-font-monospace); font-size: .68rem; min-width: 3.9rem; margin-inline-end: .35rem; }
.apgSide .apgPath { font-size: .76rem; word-break: break-all; }
.apgSide .apgFolderHead { font-size: .75rem; }
#apgMethod { min-width: 7rem; }
.apgCode { font-size: .8rem; tab-size: 2; min-height: 6rem; resize: vertical; }
.apgOut { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .5rem .75rem;
	font-size: .78rem; white-space: pre-wrap; word-break: break-word; max-height: 55vh; overflow: auto; }
.apgToast { z-index: 1090; max-width: 24rem; }
@media (max-width: 991.98px) { .apgSide .apgList { max-height: 18rem; } }

/* validation markers (sob_all_validate): red * = no blanks, blue ◆ = no duplicates – shades readable in light and dark mode */
:root, [data-bs-theme="light"] { --nu-mark-required: #dc3545; --nu-mark-unique: #0b5ed7; }
[data-bs-theme="dark"] { --nu-mark-required: #ff6b6b; --nu-mark-unique: #6ea8fe; }
.nuRequired, .nuMarkRequired { color: var(--nu-mark-required); }
.nuMarkUnique { color: var(--nu-mark-unique); }
.nuMarks { display: inline-flex; align-items: baseline; gap: .2em; margin-inline-start: .25em; white-space: nowrap; font-weight: 600; }
.nuMark { cursor: help; line-height: 1; }
.nuMarkRequired { font-size: 1.05em; }
.nuMarkUnique { font-size: .7em; position: relative; top: -.1em; }
.nuMarksLegend { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding: .5rem 1rem .6rem; border-top: 1px solid var(--bs-border-color-translucent); }
.nuMarksLegendItem { display: inline-flex; align-items: baseline; gap: .35em; }
.nuMarksLegend .nuMark { cursor: default; }

/* grey outline buttons (Act as user, Clone, Back, Print, row and tool buttons …): hover light grey with dark text.
   The search / filter buttons keep their own hover; dark mode keeps Bootstrap's hover (dark text would not be readable there). */
:root:not([data-bs-theme="dark"]) .btn.btn-outline-secondary:not(.nuSearchBtn),
:root:not([data-bs-theme="dark"]) .btn.btn-outline-secondary.nuRowBtn,
:root:not([data-bs-theme="dark"]) .btn.btn-outline-secondary.nuToolBtn { --bs-btn-hover-bg: #e1e3e87d; --bs-btn-hover-color: #0c0b0b; }

/* procedure edit form: labels above the fields */
#procTabPhp .procField { margin-bottom: 1rem; }
#procTabPhp .procFieldRow > [class*="col-"] > .procField { margin-bottom: 0; }
#procTabPhp .procFieldRow { margin-bottom: 1rem; }
.procLabel { font-weight: 600; color: var(--bs-secondary-color); margin-bottom: .35rem; }
#procTabPhp .procHint { margin-top: -.5rem; margin-bottom: 1rem; }
#procTabPhp .procRunRow { margin-bottom: 1.25rem; }
.btn.btn-outline-secondary.procRunBtn { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-border-color: var(--bs-border-color); }

/* nuBuilder settings (pages/nusettings.php) */
.setTable .setValueCol { min-width: 11rem; width: 14rem; }
.setTable .setDesc { max-width: 26rem; }
/* Settings (0.8.242): below 800 px the description column is hidden; an (i) next to the name shows it on tap / click */
.setTable .setDescTip { display: none; font-weight: 400; }
@media (max-width: 799.98px) {
	.setTable .setDescCol { display: none; }
	.setTable .setDescTip { display: inline-block; }
}
.setTable .setValue.setChanged { border-color: var(--bs-warning); box-shadow: 0 0 0 .15rem rgba(255, 193, 7, .25); }
/* settings: what a setting means for nuBuilder Next (0.8.279) – used / not yet / not needed */
.setSt { cursor: help; font-size: .7rem; }
.setSt-next { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle) !important; }
.setSt-open { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle) !important; }
.setSt-na { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); border-color: var(--bs-border-color) !important; }
.btn-check:checked + .setStBtn-next { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle); }
.btn-check:checked + .setStBtn-open { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }
.btn-check:checked + .setStBtn-na { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); border-color: var(--bs-secondary-color); }
.setTable > thead th { position: sticky; top: 0; z-index: 1; }


/* globeadmin start page (pages/nuhome.php, assets/js/nuhome.js) */
.nuHomeGroupTitle { text-transform: uppercase; letter-spacing: .07em; font-size: .8rem; font-weight: 700; color: var(--bs-secondary-color); margin: 0 0 .65rem; }
.nuHomeIconSm { width: 2rem; height: 2rem; font-size: 1rem; }
.nuHomeList .list-group-item { padding-top: .6rem; padding-bottom: .6rem; }
.nuHomeList { max-width: 550px; }   /* list layout: a readable column instead of the full page width (phones: full width) */
.nuHomeList.nuHomeListWide { max-width: none; }   /* wide list: full page width */
/* list in 2 columns (0.8.363): full width, filled row by row (same order as the tiles); each row its own framed line; phones: one column */
@media (min-width: 768px) {
	.nuHomeList.nuHomeList2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; box-shadow: none !important; }
	.nuHomeList2 > .list-group-item, .nuHomeList2 > form > .list-group-item { border-width: var(--bs-list-group-border-width) !important;
		border-radius: var(--bs-list-group-border-radius) !important; box-shadow: var(--bs-box-shadow-sm); height: 100%; }
	.nuHomeList2 > form { margin: 0; }
	.nuHomeList2 > .nuHeEmpty { grid-column: 1 / -1; }
}
.nuHomeList .nu-tile-icon { width: 2.1rem; height: 2.1rem; font-size: 1.05rem; }
.nuHomeTabs { margin-bottom: 0; }
.nuHomeToast { z-index: 1090; max-width: 26rem; }
/* start page edit mode (0.8.263): the page itself is edited – tools on the tiles, drag with mouse or (hold, then drag) finger */
.nuHeBar { position: sticky; top: calc(var(--nu-nav-h, 0px) + .5rem); z-index: 1010;   /* below the top bar (1020) and its menus, 0.8.318 */
	 margin-bottom: 1rem; padding: .55rem .75rem; border: 1px solid var(--bs-primary-border-subtle);
	border-radius: .75rem; background: var(--bs-body-bg); box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .07); }
/* start page edit mode: Start from ▾ (0.8.385) */
.nuHeStartMenu { width: 25rem; max-width: calc(100vw - 2rem); max-height: min(70vh, 38rem); overflow-y: auto; }
.nuHeStartMenu .dropdown-header { white-space: normal; }
.nuHeStartItem { display: flex; align-items: flex-start; gap: .65rem; padding-top: .45rem; padding-bottom: .45rem; white-space: normal; }
.nuHeStartIcon { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; margin-top: .1rem; border-radius: .55rem;
	background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.nuHeStartItem:hover .nuHeStartIcon, .nuHeStartItem:focus .nuHeStartIcon { background: var(--bs-primary); color: #fff; }
.nuHeNote { line-height: 1.4; }
/* Save as new layout → Based on (0.8.385) */
.nuHlBaseBox { padding: .85rem 1rem 1rem; border-radius: .75rem; background: var(--nu-page); border: 1px solid var(--bs-border-color-translucent); }
.nuHeBarRow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nuHomeEditing .nuHeItem { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.nuHomeEditing .nuHeItem > .nu-tile { position: relative; border: 1px dashed var(--bs-primary-border-subtle); }
.nuHomeEditing .nuHeItem > .nu-tile:hover { transform: none; box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .07) !important; border-color: var(--bs-primary); }
.nuHomeEditing .nuHeItem:focus-visible { outline: none; }
.nuHomeEditing .nuHeItem:focus-visible > .nu-tile, .nuHomeEditing .list-group-item.nuHeItem:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .3) !important; }
.nuHeOwn { border-style: dashed; }
.nuHeTools { position: absolute; top: .4rem; inset-inline-end: .4rem; display: flex; gap: .2rem; opacity: 0; transition: opacity .12s; z-index: 2; }
.nuHeItem:hover .nuHeTools, .nuHeItem:focus-within .nuHeTools { opacity: 1; }
@media (hover: none) { .nuHeTools { opacity: 1; } }
.list-group-item.nuHeItem .nuHeTools { position: static; opacity: 1; flex: none; }
.nuHeToolBtn { width: 1.8rem; height: 1.8rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; line-height: 1;
	border: 1px solid var(--bs-border-color); border-radius: .4rem; background: var(--bs-body-bg); color: var(--bs-secondary-color); }
.nuHeToolBtn:hover, .nuHeToolBtn:focus-visible { color: var(--bs-primary); border-color: var(--bs-primary); background: var(--bs-body-bg); }
.nuHeToolBtn.nuHeToolDel:hover, .nuHeToolBtn.nuHeToolDel:focus-visible { color: var(--bs-danger); border-color: var(--bs-danger); }
.nuHeToolBtn.disabled { opacity: .35; }
.nuHeGroupHead { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .65rem; }
.nuHeGroupTitle.form-control { flex: 0 1 22rem; min-width: 8rem; padding: .2rem .45rem; border-color: transparent; background: transparent; box-shadow: none;
	text-transform: uppercase; letter-spacing: .07em; font-size: .8rem; font-weight: 700; color: var(--bs-secondary-color); }
.nuHeGroupTitle.form-control:hover { border-color: var(--bs-border-color); }
.nuHeGroupTitle.form-control:focus { border-color: var(--bs-primary); background: var(--bs-body-bg); color: var(--bs-body-color); }
.nuHeGrip { padding: .1rem .2rem; border: 0; background: none; color: var(--bs-secondary-color); cursor: grab; touch-action: none; line-height: 1; }
.nuHeGrip:hover { color: var(--bs-primary); }
.nuHeDrop { min-height: 4.5rem; border-radius: .75rem; outline: 2px dashed transparent; outline-offset: .35rem; transition: outline-color .1s, background-color .1s; }
.nuHeDrop.list-group { min-height: 3rem; }
.nuHeDrop:has(> .nuHeItem) > .nuHeEmpty { display: none; }
.nuHeEmpty { padding: 1rem; text-align: center; border: 1px dashed var(--bs-border-color); border-radius: .6rem; }
.row.nuHeDrop > .nuHeEmpty { margin-inline: calc(var(--bs-gutter-x) * .5); width: calc(100% - var(--bs-gutter-x)); }
.nuHeDragging .nuHeDrop { outline-color: var(--bs-border-color); }
.nuHeDragging .nuHeDrop.nuHeOver { outline-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.nuHeDragging, .nuHeDragging * { cursor: grabbing !important; }
.nuHePlaceholder { opacity: .35; }
.nuHePlaceholder > .nu-tile, .list-group-item.nuHePlaceholder { border: 2px dashed var(--bs-primary) !important; }
.nuHeGroup.nuHePlaceholder { opacity: .45; outline: 2px dashed var(--bs-primary); outline-offset: .4rem; border-radius: .5rem; }
.nuHeGhost { position: fixed; z-index: 2000; pointer-events: none; margin: 0; padding: 0; opacity: .95; transform: rotate(1.5deg) scale(1.03);
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); border-radius: .75rem; }
.nuHeGhost > .nu-tile { height: 100%; }
.nuHeGhost.list-group-item { border: 1px solid var(--bs-primary); background: var(--bs-body-bg); }
.nuHeGhostLabel { display: inline-flex; align-items: center; padding: .45rem .8rem; background: var(--bs-body-bg); border: 1px solid var(--bs-primary);
	font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--bs-body-color); }
.nuHeTabs .nav-link { cursor: pointer; user-select: none; height: auto; min-height: 28px; line-height: 1.5; padding-top: 2px; padding-bottom: 2px; }
.nuHeTabs .nuHeTab.active .nav-link { cursor: default; }
.nuHeTabInput { border: 0; padding: 0 .1rem; background: transparent; font: inherit; font-weight: 600; color: inherit; min-width: 3ch; }
.nuHeTabInput:focus { outline: 1px solid var(--bs-primary); border-radius: .2rem; }
.nuHeTabs .nuHeToolBtn { width: 1.5rem; height: 1.5rem; font-size: .75rem; }
.nuHeTabGrip { font-size: .85rem; }
.nuHeTab.nuHeOver .nav-link { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); }
.nuHeTab.nuHePlaceholder { opacity: .4; }
.nuHeHidden { padding: .85rem 1rem 1rem; border: 1px dashed var(--bs-border-color); border-radius: .75rem; }
.nuHeHidden .nuHeItem:not(.nuHePlaceholder) > .nu-tile, .nuHeHidden .list-group-item.nuHeItem { opacity: .6; }
.nuHeHidden .nuHeItem:hover > .nu-tile, .nuHeHidden .list-group-item.nuHeItem:hover { opacity: 1; }

/* top bar (and login page): theme, language and user menu buttons with a light border; dark mode keeps its own */
:root:not([data-bs-theme="dark"]) .nu-navbar .btn.btn-outline-secondary.dropdown-toggle,
:root:not([data-bs-theme="dark"]) .nu-login .btn.btn-outline-secondary.dropdown-toggle {
	--bs-btn-border-color: #e4e4e4; --bs-btn-hover-border-color: #e4e4e4; --bs-btn-active-border-color: #e4e4e4;
}

/* demo mode (0.8.140, core/nudemo.php): badge in the top bar, "Try the demo" on the login page */
.nuDemoBadge { background: #fff4e5; color: #8a4b00; border: 1px solid #f5c98b; font-weight: 600; padding: .45em .7em; white-space: nowrap; }
[data-bs-theme="dark"] .nuDemoBadge { background: rgba(245, 159, 0, .14); color: #ffc46b; border-color: rgba(245, 159, 0, .4); }
.nuLoginDemo { margin-top: 1.25rem; }
.nuLoginOr { display: flex; align-items: center; gap: .75rem; color: var(--bs-secondary-color); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.nuLoginOr::before, .nuLoginOr::after { content: ''; flex: 1; border-top: 1px solid var(--bs-border-color); }
.nuLoginDemoCustom { max-width: 22rem; margin: 1rem auto 0; }

/* start page (0.8.141): "+" / "▾" on the right of a tile instead of ">" (NuHome::actions) – card and button lift together */
.nuHomeTileWrap { position: relative; transition: transform .12s ease; }
.nuHomeTileWrap > .nu-tile:hover { transform: none; }
.nuHomeTileWrap:not(.nuHomeListRow):hover { transform: translateY(-2px); }
.nuHomeTileWrap:not(.nuHomeListRow):hover > .nu-tile { box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08) !important; }
.nuHomeTileWrap:focus-within, .nuHomeTileWrap:has(.dropdown-menu.show) { z-index: 3; }   /* the open menu stays above the next tiles */
.nuHomeTileWrap > .nuHomeAction { position: absolute; top: 50%; inset-inline-end: .9rem; transform: translateY(-50%); z-index: 2; }
.nuHomeHasAction > .card-body { padding-inline-end: 3.6rem; }
.nuHomeCompact > .nuHomeAction { inset-inline-end: .5rem; }
.nuHomeCompact > .nuHomeHasAction > .card-body { padding-inline-end: 3rem; }
.nuHomeMenuBtn.dropdown-toggle::after { margin-inline-start: 0; }
.nuHomeList .nuHomeListRow { padding: 0; }
.nuHomeListRow:hover { background: var(--bs-list-group-action-hover-bg); }
.nuHomeListRow > .nuHomeAction { position: static; transform: none; margin-inline-end: .75rem; flex: none; }
.nuHomeList .nuHomeListLink { padding: .6rem 1rem; color: inherit; min-width: 0; }
.nuHomeListRow > form { min-width: 0; margin: 0; }   /* POST tile (Database) with ▾: the button gets the same padding as a link row (0.8.317) */
/* tiles sent as a form (File Manager): no double line between rows – Bootstrap only removes it between adjacent items */
.nuHomeList > form:not(:first-child) > .list-group-item, .nuHomeList > form + .list-group-item { border-top-width: 0; }

/* a button whose action is blocked (data-nu-info explains why on click) */
.btn.nuBtnBlocked { opacity: .5; }
.btn.nuBtnBlocked:hover { opacity: .8; }

/* right-to-left languages (Arabic: html dir="rtl" + bootstrap.rtl.min.css). Spacing above uses logical properties (inline-start / -end). */
[dir="rtl"] input.form-control[list]:not(.is-invalid):not(.is-valid) { background-position: left .75rem center; }
[dir="rtl"] .CodeMirror, [dir="rtl"] .CodeMirror-dialog, [dir="rtl"] .cfgCode, [dir="rtl"] .nuCodeTools { direction: ltr; text-align: left; }   /* code stays left to right */
[dir="rtl"] .bi-chevron-right::before, [dir="rtl"] .bi-chevron-left::before, [dir="rtl"] .bi-arrow-left::before, [dir="rtl"] .bi-arrow-right::before,
[dir="rtl"] .bi-chevron-double-left::before, [dir="rtl"] .bi-chevron-double-right::before, [dir="rtl"] .bi-box-arrow-up-right::before { transform: scaleX(-1); }   /* arrows point the reading way */
[dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] .font-monospace { unicode-bidi: isolate; }

/* phones: Save / Clone / Delete of edit pages and forms show only their icon (the text stays for screen readers and as tooltip) */
@media (max-width: 575.98px) {
	.nuTitleBar .btn:is([data-nu-save], :has(> .bi-copy), :has(> .bi-trash)),
	#nuSaveButton, #nuCloneButton, #nuDeleteButton { font-size: 0; padding-inline: .7rem; }
	.nuTitleBar .btn:is([data-nu-save], :has(> .bi-copy), :has(> .bi-trash)) > .bi,
	#nuSaveButton > .bi, #nuCloneButton > .bi, #nuDeleteButton > .bi { font-size: 1.05rem; line-height: 1.45; margin: 0 !important; }
}

/* Admin tools → To do (pages/nutodo.php, developer mode): TODO.md as a page */
.nuTodo h2 { font-size: 1.35rem; margin: 0 0 1rem; }
.nuTodo h3 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--bs-border-color); }
.nuTodo h4, .nuTodo h5 { font-size: .95rem; margin: 1rem 0 .4rem; }
.nuTodo .nuTodoList { list-style: none; padding-inline-start: 0; margin-bottom: .5rem; }
.nuTodo .nuTodoList .nuTodoList { padding-inline-start: 1.6rem; margin: .25rem 0; }
.nuTodo .nuTodoList > li { display: flex; align-items: flex-start; padding: .2rem 0; }
.nuTodo .nuTodoList > li:not(.nuTodoTask)::before { content: "•"; width: 1.5rem; flex: none; color: var(--bs-secondary-color); }
.nuTodo .nuTodoList > li > .form-check-input { flex: none; margin-top: .2rem; opacity: 1; }
.nuTodo .nuTodoDone > span { color: var(--bs-secondary-color); text-decoration: line-through; }
.nuTodo code { font-size: .85em; }
.cfgCM .cfgErrLine { background: rgba(var(--bs-danger-rgb), .18); }

/* own grab / grabbing hand for things that are dragged (0.8.184): black hand in light mode, white hand with dark outline in dark mode */
:root, [data-bs-theme="light"] {
	--nu-cursor-grab: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMgMTlWMTBhMyAzIDAgMCAxIDYgMHY3VjdhMyAzIDAgMCAxIDYgMHYxMFYxMGEzIDMgMCAwIDEgNiAwdjEybDEtM2EzIDMgMCAwIDEgNiAxbC0yIDEwYy0xIDUtNSA4LTExIDhoLTVjLTQgMC03LTItOS01TDMgMjRhMyAzIDAgMCAxIDUtM2w1IDZ6IiBmaWxsPSIjMTExODI3IiBzdHJva2U9IiMxMTE4MjciIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=") 16 18, grab;
	--nu-cursor-grabbing: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNOSAxNmEzIDMgMCAwIDEgNiAwdjNhMyAzIDAgMCAxIDYtMWEzIDMgMCAwIDEgNiAwYTMgMyAwIDAgMSA2IDJsMiA2YzEgNy00IDEyLTExIDEyaC02Yy01IDAtOC0zLTEwLTdMNCAyM2EzIDMgMCAwIDEgNS0zbDMgNHoiIGZpbGw9IiMxMTE4MjciIHN0cm9rZT0iIzExMTgyNyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") 16 18, grabbing;
}
[data-bs-theme="dark"] {
	--nu-cursor-grab: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMgMTlWMTBhMyAzIDAgMCAxIDYgMHY3VjdhMyAzIDAgMCAxIDYgMHYxMFYxMGEzIDMgMCAwIDEgNiAwdjEybDEtM2EzIDMgMCAwIDEgNiAxbC0yIDEwYy0xIDUtNSA4LTExIDhoLTVjLTQgMC03LTItOS01TDMgMjRhMyAzIDAgMCAxIDUtM2w1IDZ6IiBmaWxsPSIjZmZmZmZmIiBzdHJva2U9IiMyNjMyMzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") 16 18, grab;
	--nu-cursor-grabbing: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNOSAxNmEzIDMgMCAwIDEgNiAwdjNhMyAzIDAgMCAxIDYtMWEzIDMgMCAwIDEgNiAwYTMgMyAwIDAgMSA2IDJsMiA2YzEgNy00IDEyLTExIDEyaC02Yy01IDAtOC0zLTEwLTdMNCAyM2EzIDMgMCAwIDEgNS0zbDMgNHoiIGZpbGw9IiNmZmZmZmYiIHN0cm9rZT0iIzI2MzIzOCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=") 16 18, grabbing;
}
.nuGrab { cursor: var(--nu-cursor-grab); }
.nuGrab:active { cursor: var(--nu-cursor-grabbing); }
.nuInfoTip { color: var(--bs-secondary-color); cursor: help; }
.nuInfoTip:hover, .nuInfoTip:focus { color: var(--bs-primary); outline: none; }
.updHistoryItem > summary { cursor: pointer; list-style-position: outside; }
.updHistoryText { max-height: 28rem; overflow-y: auto; }
#updHistory { scroll-margin-top: 4.5rem; }
.updBackupsNav .nuLfPer { display: none; } /* update page: backup list in a narrow card */
.nuOffscreen { position: fixed; left: -10000px; top: 0; opacity: 0; } /* copy fallback (assets/js/nuemail.js) */
.tooltip-inner { overflow-wrap: anywhere; } /* long paths in tooltips (e.g. PHPMailer folder) */
.nuTipWide .tooltip-inner { max-width: min(26rem, 90vw); text-align: start; }
.nuTipPre .tooltip-inner { white-space: pre-line; }   /* tooltip text with line breaks (update page: Folder writable) */
.updKeepNum { width: 5rem; }
/* user page (globeadmin): "Act as user" as the icon in front of the user name (0.8.200) */
.nuImpIconBtn { padding: .1rem .35rem; font-size: inherit; line-height: 1; color: var(--bs-body-color); border: 1px solid transparent; border-radius: .5rem; }
.nuImpIconBtn:hover, .nuImpIconBtn:focus-visible, .nuImpIconBtn[aria-expanded="true"] { color: var(--bs-primary); background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
.nuImpIcon .nuImpMenu { font-size: 1rem; font-weight: 400; line-height: 1.5; }


/* Admin tools → Security check (0.8.207): status also as a coloured left border (not only the icon) */
#secChecks .list-group-item { border-inline-start: 4px solid transparent; }
#secChecks .sec-bad { border-inline-start-color: var(--bs-danger); }
#secChecks .sec-warn { border-inline-start-color: var(--bs-warning); }
#secChecks .sec-ok { border-inline-start-color: var(--bs-success); }
#secChecks .sec-info { border-inline-start-color: var(--bs-info); }
#secProbe .list-group-item { border-inline-start: 4px solid transparent; }
#secProbe .list-group-item.sec-open { border-inline-start-color: var(--bs-danger); }
.nuAdminRight { cursor: help; }


/* Procedures: code, description, group, category, status, launch form in a collapsible block (0.8.225) */
.procFields { border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); }
.procFields > summary { cursor: pointer; padding: .55rem .9rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .25rem; list-style: none; }
.procFields > summary::-webkit-details-marker { display: none; }
.procFields > summary::before { content: "\F285"; font-family: bootstrap-icons; font-size: .8rem; margin-inline-end: .5rem; transition: transform .15s; display: inline-block; }
.procFields[open] > summary::before { transform: rotate(90deg); }
[dir="rtl"] .procFields:not([open]) > summary::before { transform: scaleX(-1); }
.procFields[open] > summary { border-bottom: 1px solid var(--bs-border-color); }
.procFieldsSumText { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.procFieldsBody { padding: .9rem; }

/* List search (nu_list_search, 0.8.227): field + magnifier at most 350px wide; from md up its column only takes what it needs, so the
   filters (the next column) stand right next to it instead of after a half-width column. Phones: full width as before. */
@media (min-width: 768px) {
	.nuListSearch > .input-group { width: 350px; max-width: 100%; }
	.row > [class*="col-md-"]:has(> .nuListSearch) { flex: 0 0 auto; width: auto; max-width: 100%; }
}

/* Update page → Libraries (0.8.229): group rows */
#updLibraries .nuLibGroup > td { background: var(--bs-tertiary-bg); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
#updLibraries > summary { cursor: pointer; list-style: none; }
#updLibraries > summary::-webkit-details-marker { display: none; }
#updLibraries:not([open]) > summary { border-bottom: 0; border-radius: inherit; }
#updLibraries .nuLibChevron { display: inline-block; transition: transform .15s; font-size: .8rem; }
#updLibraries[open] .nuLibChevron { transform: rotate(90deg); }
[dir="rtl"] #updLibraries:not([open]) .nuLibChevron { transform: scaleX(-1); }
#updLibraries .nuLibState { min-width: 9rem; }

/* lists (0.8.251): the first column (the record's name, usually a link) in body colour instead of blue – stays bold; underline on hover */
.table-responsive .table > tbody > tr > td:first-child a:not(.btn):not(.badge),
.table-responsive .table > tbody > tr > td:first-child > .text-primary,
.table-responsive .table > tbody > tr > td.nuMainCol a:not(.btn):not(.badge),
.table-responsive .table > tbody > tr > td.nuMainCol > .text-primary { color: var(--bs-body-color) !important; }
.table-responsive .table > tbody > tr > td:first-child a:not(.btn):not(.badge):hover,
.table-responsive .table > tbody > tr > td.nuMainCol a:not(.btn):not(.badge):hover { text-decoration: underline !important; }
/* the main column when the row buttons come first (forms list, 0.8.253) */
.table > tbody > tr > td.nuRowActions { width: 1%; padding-inline-end: .25rem; }

/* backups (0.8.259): download · roll back · delete as one row of equal 2rem buttons; roll back neutral with an amber accent */
.updBkActions { display: inline-flex; align-items: center; gap: .35rem; }
.updBkActions form, .updBkActions .dropdown { display: inline-flex; margin: 0; }
.updBkActions .updBkDl { width: auto; padding-inline: .45rem; gap: .15rem; }
.updBkActions .updBkDl::after { margin-inline-start: .1rem; vertical-align: .15em; }
.btn.updRollback {
	--bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--bs-body-bg); --bs-btn-border-color: #d5dbe1;
	--bs-btn-hover-color: #7a4a00; --bs-btn-hover-bg: #fff6e0; --bs-btn-hover-border-color: #f0c36d;
	--bs-btn-active-color: #7a4a00; --bs-btn-active-bg: #ffecbf; --bs-btn-active-border-color: #e5ad3d;
	height: 2rem; display: inline-flex; align-items: center; padding: 0 .7rem; border-radius: .4rem; font-weight: 500;
}
.btn.updRollback .bi { color: #b26a00; }
[data-bs-theme="dark"] .btn.updRollback {
	--bs-btn-border-color: #3a4652; --bs-btn-hover-color: #ffd58a; --bs-btn-hover-bg: rgba(255, 193, 7, .12); --bs-btn-hover-border-color: #8a6a1f;
	--bs-btn-active-color: #ffd58a; --bs-btn-active-bg: rgba(255, 193, 7, .2); --bs-btn-active-border-color: #a8801f;
}
[data-bs-theme="dark"] .btn.updRollback .bi { color: #ffc54d; }
/* debug page (0.8.262): the auto refresh switch at the right end of the buttons, on phones in its own row */
.debugAutoWrap { margin-inline-start: auto; }
@media (max-width: 575.98px) { .debugAutoWrap { flex-basis: 100%; margin-inline-start: 0; } }
@media (hover: none) { .nuHomeEditing .nuHeItem > .nu-tile > .card-body { padding-top: 2.75rem; } }   /* touch: the tools stay visible above the text */
@media (max-width: 575.98px) {
	.nuHeGroupHead { flex-wrap: nowrap; }
	.nuHeGroupTitle.form-control { flex: 1 1 auto; min-width: 0; }
	.nuHeGroupHead .nuHeGroupTab { max-width: 7rem; }
}
@media (max-width: 575.98px) { .nuHeBar .form-select { max-width: 9.5rem; } }

/* ▾ menu of the Database tile / card (0.8.284): star = make this tool the default */
.nuDbItem .dropdown-item { padding-right: .5rem; }
.nuDbStar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-right: .35rem; border: 0; border-radius: .375rem;
	background: transparent; color: var(--bs-secondary-color); }
button.nuDbStar:hover, button.nuDbStar:focus-visible { background: var(--bs-tertiary-bg); color: var(--bs-warning-text-emphasis); }
.nuDbStarOn { color: var(--bs-warning); }

/* dashboards (0.8.298, assets/js/nudashboard.js): start page and HTML objects of forms */
.nuDash { width: 100%; text-align: start; }
/* in an HTML object of a form (absolute layout: fixed size) – scroll when the dashboard is taller than the object */
.nuHtml:has([data-nu-dashboard]) { overflow: auto; }
.nuDashHead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.nuDashTitle { font-size: 1.1rem; font-weight: 600; margin: 0; flex: 1 1 auto; }
.nuDashTools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-inline-start: auto; }
.nuDashRange { width: auto; min-width: 10rem; }
.nuDashDate { width: 9.5rem; }
.nuDashCard { height: 100%; border-color: var(--bs-border-color-translucent); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.nuDashCardHead { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem 0; }
.nuDashCardTitle { flex: 1 1 auto; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.nuDashLink { color: var(--bs-secondary-color); }
.nuDashLink:hover { color: var(--bs-link-color); }
.nuDashBody { padding: .5rem 1rem 1rem; min-height: 5rem; transition: opacity .2s; }
.nuDashBusy { opacity: .55; }
.nuDashKpiValue { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 700; overflow-wrap: anywhere; line-height: 1.15; color: var(--bs-emphasis-color); font-variant-numeric: tabular-nums; }
.nuDashKpi-good { color: var(--bs-success-text-emphasis); }
.nuDashKpi-warn { color: var(--bs-warning-text-emphasis); }
.nuDashKpi-bad { color: var(--bs-danger-text-emphasis); }
.nuDashKpiDelta { margin-top: .3rem; font-size: .85rem; font-weight: 600; color: var(--bs-secondary-color); }
.nuDashUp { color: var(--bs-success-text-emphasis); }
.nuDashDown { color: var(--bs-danger-text-emphasis); }
.nuDashKpiPrev { margin-inline-start: .5rem; font-weight: 400; color: var(--bs-secondary-color); }
.nuDashKpiNote { margin-top: .25rem; font-size: .85rem; color: var(--bs-secondary-color); }
.nuDashMsg { padding: 1rem 0; text-align: center; color: var(--bs-secondary-color); font-size: .9rem; }
.nuDashErr { color: var(--bs-danger-text-emphasis); text-align: start; overflow-wrap: anywhere; }
.nuDashWait { font-style: italic; }
.nuDashTable { max-height: 22rem; overflow: auto; }
.nuDashChart { min-height: 120px; }
.nuDashChart .apexcharts-tooltip { color: #212529; }
[data-bs-theme="dark"] .nuDashChart .apexcharts-tooltip { color: #f8f9fa; }
/* dashboard editor */
.dashSnippet { font-size: .85rem; user-select: all; }
.dashPreview { min-height: 6rem; }
.dashWidgetRow td { vertical-align: middle; }

/* start page (globeadmin), Customize + ▾ at the bottom (0.8.305): on touch screens a target for the thumb – the ▾ at least 48 px wide,
   both buttons 44 px high */
@media (max-width: 767.98px), (pointer: coarse) {
	.nuHomeCustomizeBar .btn { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
	.nuHomeCustomizeBar #nuHomeSizeMenu { min-width: 3rem; }
}

/* update page: progress modal while installing (0.8.308) */
.nuUpdSpinner { width: 3rem; height: 3rem; border-width: .3rem; }
/* update page, database steps (0.8.308): description and date wrap on narrow screens instead of widening the page */
.nuUpdStepDesc { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }

/* start page (0.8.320): on wider screens Customize sits at the top right – its ▾ opens downwards, so the caret points down */
@media (min-width: 768px) {
	.nuHomeCustomizeBar .dropup .dropdown-toggle::after { border-top: .3em solid; border-bottom: 0; }
}

/* start page (0.8.321): grid – search on top, the tiles below; Customize at the bottom on phones, next to the search on wider screens */
.nuHomeWrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.nuHomeWrap > .nuHomeSearchRow { grid-row: 1; }
.nuHomeWrap > #nuHomeView, .nuHomeWrap > #nuHomeEdit { grid-row: 2; min-width: 0; }
.nuHomeWrap > .nuHomeCustomizeBar { grid-row: 3; }
@media (min-width: 768px) {
	.nuHomeWrap { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
	.nuHomeWrap > .nuHomeSearchRow { grid-column: 1; }
	.nuHomeWrap > .nuHomeCustomizeBar { grid-column: 2; grid-row: 1; align-self: start; }
	.nuHomeWrap > #nuHomeView, .nuHomeWrap > #nuHomeEdit { grid-column: 1 / -1; }
}
.nuHomeSearchBox { max-width: 26rem; }
.nuHomeSearchRow .nuHomeList { max-width: 550px; }
/* while searching: every tab with hits is shown, the tab titles are hidden */
#nuHomeView.nuHomeSearching .nuHomeTabs { display: none; }
#nuHomeView.nuHomeSearching .tab-pane { display: none; opacity: 1; }
#nuHomeView.nuHomeSearching .tab-pane.nuHomeSearchHit { display: block; }
/* pin in a tile's ▾ menu */
.nuPinItem .dropdown-item { padding-inline-end: .5rem; }
.nuPinBtn { color: var(--bs-secondary-color); border: 0; padding: .15rem .5rem; margin-inline-end: .35rem; line-height: 1; }
.nuPinBtn:hover, .nuPinBtn:focus-visible { color: var(--bs-primary); background: var(--bs-tertiary-bg); }
.nuPinBtn.nuPinned { color: var(--bs-primary); }
/* Ctrl+K search box (assets/js/nupalette.js) */
.nuPaletteDialog { margin-top: 10vh; }
.nuPaletteDialog .modal-header kbd { font-size: .7rem; }
.nuPaletteList { max-height: 60vh; overflow-y: auto; }
.nuPaletteGroup { padding: .5rem 1rem .25rem; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); }
.nuPaletteList .list-group-item { border: 0; padding: .45rem 1rem; }
.nuPaletteList .list-group-item.active { background: var(--bs-primary-bg-subtle); color: var(--bs-emphasis-color); }
.nuPaletteList .list-group-item.active .bi { color: var(--bs-primary) !important; }
.nuPaletteKw { max-width: 40%; }

/* Admin roles (0.8.326): the groups of the rights table are clearly headings – a band with icon, the rights below indented */
#admRights > tbody > tr.nuAdmGroup > th { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); font-weight: 600; font-size: .95rem;
	text-transform: none; letter-spacing: 0; padding-top: .6rem; padding-bottom: .6rem; border-top: 1px solid var(--bs-border-color); }
#admRights > tbody > tr.nuAdmGroup > th .bi { color: var(--bs-secondary-color); }
#admRights > tbody > tr.nuAdmRight > td:first-child { padding-inline-start: 2.6rem; }

/* Tom Select inside an input group (user form: access level + open button, 0.8.327) */
.input-group > .ts-wrapper { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .ts-wrapper:not(:last-child) .ts-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Tutorial (0.8.328, pages/nututorial.php) */
.tutProgress .progress { height: .5rem; }
.tutIndex .list-group { max-height: calc(100vh - 14rem); overflow-y: auto; }
@media (max-width: 991.98px) { .tutIndex .list-group { max-height: none; } }
.tutIndex .tutPart { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); padding-top: .35rem; padding-bottom: .35rem; }
.tutIndex .tutChapter { font-weight: 600; font-size: .9rem; border-bottom: 0; padding-bottom: .15rem; }
.tutIndex .tutLessonLink { font-size: .875rem; padding-left: 1.5rem; border-top: 0; }
.tutIndex .tutLessonLink.active .bi { color: inherit !important; }
.tutBody { line-height: 1.6; }
.tutBody h4 { font-size: 1.05rem; margin-top: 1.25rem; }
.tutBody ul, .tutBody ol { padding-left: 1.4rem; }
.tutBody li { margin-bottom: .25rem; }
.tutBody code { font-size: .85em; }
.tutBody kbd { font-size: .8em; }
.tutBody .tut-task { border: 1px solid var(--bs-success-border-subtle); background: var(--bs-success-bg-subtle); border-radius: .5rem; padding: .75rem 1rem; margin: 1.25rem 0 .5rem; }
.tutBody .tut-task ol, .tutBody .tut-task ul { margin-bottom: 0; }
.tutBody .tutTaskHead { font-weight: 600; margin-bottom: .4rem; color: var(--bs-success-text-emphasis); }
.tutBody .tut-note { border-left: 3px solid var(--bs-warning); padding: .25rem .75rem; margin: .75rem 0; background: var(--bs-warning-bg-subtle); border-radius: 0 .375rem .375rem 0; }
.tutBody .tut-tip { border-left: 3px solid var(--bs-info); padding: .25rem .75rem; margin: .75rem 0; background: var(--bs-info-bg-subtle); border-radius: 0 .375rem .375rem 0; }
.tutBody a.tutOpen, .tutBody a.tutHelp { white-space: nowrap; }
.tutChapterCard a { text-decoration: none; }

/* List views (0.8.329, core/nulistview.php): column widths, phone cards, editor */
.nuLv .nuLvNarrow { width: 1%; white-space: nowrap; }
.nuLv .nuLvWide { min-width: 18rem; }
.nuLvMenuBtn .nuLvMenuName { display: inline-block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.nuLvMenu { max-height: 70vh; overflow-y: auto; min-width: 16rem; }
.nuLvCards { padding: .5rem .75rem; }
.nuLvCard { display: block; padding: .6rem .75rem; margin-bottom: .5rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); color: var(--bs-body-color); text-decoration: none; }
.nuLvCard:hover, .nuLvCard:focus { border-color: var(--bs-primary); color: var(--bs-body-color); }
.nuLvCardHead { display: flex; align-items: flex-start; gap: .5rem; }
.nuLvCardTitle { font-weight: 600; margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
.nuLvCardBadge { flex-shrink: 0; }
.nuLvCardLine { display: flex; gap: .5rem; font-size: .875rem; margin-top: .15rem; min-width: 0; }
.nuLvCardLabel { color: var(--bs-secondary-color); flex: 0 0 auto; max-width: 45%; }
.nuLvCardLabel::after { content: ":"; }
.nuLvCardVal { min-width: 0; overflow-wrap: anywhere; }
.nuLvCardDemo { pointer-events: none; }
.nuLvEdTable td, .nuLvEdTable th { vertical-align: middle; }
.nuLvEdTable select { min-width: 7rem; }
.nuLvGrip { cursor: grab; color: var(--bs-secondary-color); width: 1.5rem; }
.nuLvDragging { opacity: .5; }
.nuLvLevels { max-height: 12rem; overflow-y: auto; }
.nuLv .nuLvThumbCell { width: 1%; }
.nuLv .nuLvThumb { width: 2.5rem; height: 2.5rem; object-fit: contain; border-radius: .25rem; background: var(--bs-tertiary-bg); }

/* audit trail (0.8.350): history of a record – the same column widths in every block */
.nuAudTable { table-layout: fixed; }
.nuAudTable th:first-child { width: 25%; }
.nuAudTable th:last-child { width: 3.5rem; }
.nuAudOld { color: var(--bs-secondary-color); }


/* start page favourites (0.8.353): "Favourites only" hides the other tiles and groups without favourites (not while searching) */
.nuHomeFavOnly:not(.nuHomeSearching) .row > :not(:has([data-nu-fav])),
.nuHomeFavOnly:not(.nuHomeSearching) .nuHomeList > :not([data-nu-fav]):not(:has([data-nu-fav])),
.nuHomeFavOnly:not(.nuHomeSearching) .nuHomeGroup:not(:has([data-nu-fav])) { display: none !important; }
.nuHomeFavBtn.active, .nuHomeFavBtn.active:hover { color: #e0a800; background: var(--bs-body-bg); border-color: var(--bs-border-color); }
.nuHeToolFav, .nuHeToolFav:hover { color: #e0a800 !important; }

/* Customise (0.8.354): favourites keep a star in the corner (the tools with ★ take its place on hover); "Favourites" shows only them */
.nuHeFavMark { position: absolute; top: .5rem; inset-inline-end: .65rem; color: #e0a800; font-size: .95rem; line-height: 1; z-index: 1; pointer-events: none; transition: opacity .12s; }
.nuHeItem:hover .nuHeFavMark, .nuHeItem:focus-within .nuHeFavMark { opacity: 0; }
@media (hover: none) { .nuHeFavMark { display: none; } }
.nuHeFavInline { color: #e0a800; font-size: .85em; }
.nuHeFavOnly .nuHeItem:not([data-fav]) { display: none !important; }
.nuHeFavOnly .nuHeGroup:not(:has([data-fav])), .nuHeFavOnly .nuHeHidden { display: none !important; }

/* compact start page tiles (0.8.355): the description as tooltip – mouse over, or a long tap on phones (no copy / link menu then) */
[data-nu-hint] { -webkit-touch-callout: none; }

/* notification centre (0.8.357): the bell (red badge = unread), its panel, the level colours, toasts and the list page */
.nuBellBtn { position: relative; }
.nuBellBtn.nuBellHas { color: var(--bs-danger); border-color: var(--bs-danger); }
.nuBellBadge { position: absolute; top: -.45rem; inset-inline-end: -.45rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px;
	background: var(--bs-danger); color: #fff; font-size: .68rem; font-weight: 600; line-height: 1.15rem; text-align: center; box-shadow: 0 0 0 2px var(--bs-body-bg); }
.nuBellRing > .bi { display: inline-block; animation: nuBellRing .9s ease-in-out 1; transform-origin: 50% 0; }
@keyframes nuBellRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .nuBellRing > .bi { animation: none; } }
.nuBellPanel { width: min(380px, calc(100vw - 1.5rem)); }
.nuBellList { max-height: min(60vh, 460px); overflow-y: auto; }
.nuBellItem { padding: .65rem .9rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.nuBellItem:last-child { border-bottom: 0; }
.nuBellUnread { background: var(--bs-primary-bg-subtle); }
.nuBellUnread .nuBellTitle { font-weight: 600; }
.nuBellBody { color: var(--bs-secondary-color); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nuBellTool { width: 1.7rem; height: 1.7rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); border: 1px solid transparent; }
.nuBellTool:hover, .nuBellTool:focus-visible { color: var(--bs-primary); border-color: var(--bs-border-color); background: var(--bs-body-bg); }
.nuBellIcon { line-height: 1.3; }
.nuBellLv-info .nuBellIcon, .nuBellIcon.nuBellLv-info { color: var(--bs-info-text-emphasis); }
.nuBellLv-success .nuBellIcon, .nuBellIcon.nuBellLv-success { color: var(--bs-success); }
.nuBellLv-warning .nuBellIcon, .nuBellIcon.nuBellLv-warning { color: #d39e00; }
.nuBellLv-danger .nuBellIcon, .nuBellIcon.nuBellLv-danger { color: var(--bs-danger); }
.nuBellToasts { z-index: 1090; margin-top: 3.5rem; }
.nuBellToast { cursor: pointer; }
.nuNtfItem.nuBellUnread { border-color: var(--bs-primary-border-subtle) !important; }
.nuNtfItem.nuBellLv-danger { border-inline-start: 4px solid var(--bs-danger) !important; }
.nuNtfItem.nuBellLv-warning { border-inline-start: 4px solid #d39e00 !important; }
.nuNtfNames { max-height: 8rem; overflow-y: auto; }

/* notification form (0.8.358): the chosen level light in its own colour instead of the dark grey of Bootstrap's checked button */
.nuNtfLevels .btn { --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-border-color); color: var(--bs-body-color); }
.nuNtfLevels .btn-check:checked + .btn { font-weight: 500; position: relative; z-index: 1; }
.nuNtfLevels .btn-check:checked + .nuNtfLv-info { background: var(--bs-info-bg-subtle); border-color: var(--bs-info-border-subtle); color: var(--bs-info-text-emphasis); }
.nuNtfLevels .btn-check:checked + .nuNtfLv-success { background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); color: var(--bs-success-text-emphasis); }
.nuNtfLevels .btn-check:checked + .nuNtfLv-warning { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text-emphasis); }
.nuNtfLevels .btn-check:checked + .nuNtfLv-danger { background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text-emphasis); }
.nuNtfLevels .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2); }

/* accessibility (0.8.368, dev/tests/a11y.js – WCAG AA, text contrast at least 4.5:1): Bootstrap's grey #6c757d of outline buttons,
   its link blue and a few own colours are a little too light on the grey page (#f4f6f9) or too dark in dark mode. */
:root:not([data-bs-theme="dark"]) .btn-outline-secondary { --bs-btn-color: #5c636a; }
:root:not([data-bs-theme="dark"]) { --bs-link-color: #0a58ca; --bs-link-color-rgb: 10, 88, 202; --bs-link-hover-color: #084298; --bs-link-hover-color-rgb: 8, 66, 152; }
:root:not([data-bs-theme="dark"]) .btn.nuBtnSave.nuSaveEdited, :root:not([data-bs-theme="dark"]) #nbSave.nbDirty { --bs-btn-color: #b02a37; --bs-btn-hover-color: #b02a37; --bs-btn-active-color: #b02a37; --bs-btn-disabled-color: #b02a37; }
:root:not([data-bs-theme="dark"]) { --nu-tab-active-color: #1f6fb8; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #adb5bd; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #6ea8fe; }
[data-bs-theme="dark"] { --nu-th-color: #9aa5b1; }
[data-bs-theme="dark"] .nuHelpBody .doc-red { color: #ea868f; }
/* phones (0.8.368, a11y.js): wide help tables scroll inside their box, the update page's file field fits the screen */
@media (max-width: 575.98px) {
	.nuHelpBody table { display: block; max-width: 100%; overflow-x: auto; }
	#updPackage { max-width: 100%; }
}
/* more contrast (0.8.368): "+ Add" buttons, the import steps, red texts in dark mode, CodeMirror's line numbers */
:root:not([data-bs-theme="dark"]) .btn.nuAddBtn { --bs-btn-color: #5c636a; }
[data-bs-theme="dark"] .btn.nuAddBtn { --bs-btn-color: #adb5bd; }
.impSteps li.active { color: var(--bs-link-color); }
[data-bs-theme="dark"] .text-danger, [data-bs-theme="dark"] .nuNegative { color: #ea868f !important; }
.CodeMirror .CodeMirror-linenumber, .cm-s-default .CodeMirror-linenumber { color: #666; }
[data-bs-theme="dark"] .CodeMirror .CodeMirror-linenumber { color: #9aa5b1; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #ea868f; }
[data-bs-theme="dark"] .text-success { color: #75b798 !important; }
/* CodeMirror in dark mode (0.8.368 – before, every editor kept CodeMirror's light colours on the dark page): one palette for the
   form runtime, procedures, builder, nuconfig.php; colours with at least 4.5:1 on the editor background */
[data-bs-theme="dark"] .CodeMirror { background: #1c2027; color: #e9ecef; }
[data-bs-theme="dark"] .CodeMirror .CodeMirror-gutters { background: #1c2027; border-right-color: #343a40; }
[data-bs-theme="dark"] .CodeMirror .CodeMirror-cursor { border-left-color: #e9ecef; }
[data-bs-theme="dark"] .CodeMirror div.CodeMirror-selected, [data-bs-theme="dark"] .CodeMirror-focused div.CodeMirror-selected { background: #2f3b4a; }
[data-bs-theme="dark"] .CodeMirror .cm-keyword, [data-bs-theme="dark"] .CodeMirror .cm-attribute { color: #c792ea; }
[data-bs-theme="dark"] .CodeMirror .cm-atom, [data-bs-theme="dark"] .CodeMirror .cm-number { color: #f78c6c; }
[data-bs-theme="dark"] .CodeMirror .cm-def, [data-bs-theme="dark"] .CodeMirror .cm-variable-2, [data-bs-theme="dark"] .CodeMirror .cm-header, [data-bs-theme="dark"] .CodeMirror .cm-link { color: #82aaff; }
[data-bs-theme="dark"] .CodeMirror .cm-variable, [data-bs-theme="dark"] .CodeMirror .cm-punctuation { color: #e9ecef; }
[data-bs-theme="dark"] .CodeMirror .cm-variable-3, [data-bs-theme="dark"] .CodeMirror .cm-type, [data-bs-theme="dark"] .CodeMirror .cm-builtin { color: #ffcb6b; }
[data-bs-theme="dark"] .CodeMirror .cm-property { color: #9cdcfe; }
[data-bs-theme="dark"] .CodeMirror .cm-operator { color: #89ddff; }
[data-bs-theme="dark"] .CodeMirror .cm-comment { color: #9aa5b1; }
[data-bs-theme="dark"] .CodeMirror .cm-string, [data-bs-theme="dark"] .CodeMirror .cm-qualifier { color: #c3e88d; }
[data-bs-theme="dark"] .CodeMirror .cm-string-2, [data-bs-theme="dark"] .CodeMirror .cm-tag { color: #f07178; }
[data-bs-theme="dark"] .CodeMirror .cm-meta, [data-bs-theme="dark"] .CodeMirror .cm-bracket { color: #b0b8c0; }
[data-bs-theme="dark"] .CodeMirror .cm-error { color: #ff8e98; background: transparent; }
[data-bs-theme="dark"] .CodeMirror .CodeMirror-matchingbracket { color: #c3e88d !important; outline: 1px solid #4f5c6a; }

/* toggle with a chevron that turns when its collapse is open (update page → Other ways to update, 0.8.376) */
.nuChevToggle .bi-chevron-right { display: inline-block; transition: transform .2s; }
.nuChevToggle:not(.collapsed) .bi-chevron-right { transform: rotate(90deg); }
[dir="rtl"] .nuChevToggle:not(.collapsed) .bi-chevron-right { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .nuChevToggle .bi-chevron-right { transition: none; } }

/* flash messages as toasts (nu_flash(…, true), 0.8.377): top right, below the top bar */
.nuFlashToasts { top: 3.5rem; z-index: 1090; }

/* update page → packages in the folder _update (0.8.381): the list at most 450 px wide, Check package below it */
.nuUpdFolderList { max-width: 450px; }

/* form drafts (0.8.386): preview banner under the top bar, badge in iframes */
.nuDraftBanner { position: sticky; top: var(--nu-nav-h, 0px); z-index: 1015; background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.nuDraftBanner .btn-outline-dark { --bs-btn-color: var(--bs-warning-text-emphasis); --bs-btn-border-color: var(--bs-warning-border-subtle); }
.nuDraftBadge { position: fixed; top: .35rem; inset-inline-end: .35rem; z-index: 1080; padding: .1rem .45rem; border-radius: .35rem; font-size: .7rem; font-weight: 600;
	letter-spacing: .04em; background: var(--bs-warning); color: #000; pointer-events: none; }

/* ---------------------------------------------------------------- page forms (form type "page", 0.8.387): the iframe of the wrapper */
.nuPageWrap .nuPageFrame { display: block; width: 100%; border: 0; height: calc(100vh - 150px); min-height: 200px; background: var(--bs-body-bg); }
.nu-bare .nuPageWrap .nuPageFrame { height: 100vh; }
.nuPageWrap .nuPageCrumbs .breadcrumb { font-size: .875rem; }
.nuPageToasts { z-index: 1090; }

/* update page: "Update from GitHub" as label / value rows (0.8.389) */
.nuGhInfo { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 2.5rem; margin-bottom: 1.25rem; }
.nuGhInfo dt { font-weight: 400; color: var(--bs-secondary-color); }
.nuGhInfo dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.nuGhInfo .badge { font-weight: 500; font-size: .85em; padding: .4em .8em; }
.nuGhBadgePre { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.nuGhBadgeMuted { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
@media (max-width: 575.98px) { .nuGhInfo { grid-template-columns: 1fr; gap: .1rem; } .nuGhInfo dd { margin-bottom: .5rem; } }
.nuGhAgain { font-size: .9em; text-decoration: none; vertical-align: baseline; }
.nuGhAgain:hover { text-decoration: underline; }

/* update page tabs (0.8.392): one line, scrolls sideways on phones; dot = something to look at in "System" */
.nuUpdTabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.nuUpdTabs .nav-link { white-space: nowrap; }
.nuTabDot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; vertical-align: middle; }

/* print view of lists (0.8.397): × after each column title hides the column */
.nu-print-table .nuColHidden { display: none; }
.nu-print-table th .nuColHide { border: 0; background: none; padding: 0 .1rem; margin-left: .25rem; line-height: 1; color: var(--bs-secondary-color); vertical-align: middle; }
.nu-print-table th .nuColHide:hover, .nu-print-table th .nuColHide:focus-visible { color: var(--bs-danger); }

/* notifications → Manage (0.8.402): the ⋯ column stays visible when the table scrolls sideways on phones */
.nuNtfManage th:last-child, .nuNtfManage td:last-child { position: sticky; right: 0; z-index: 1; background: var(--nu-surface, var(--bs-body-bg)); }
.nuNtfManage td:last-child .dropdown-menu { z-index: 1060; }